From 99b69630122b76dee4b92b960b785f255339a276 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Wed, 20 May 2026 15:34:56 -0300
Subject: [PATCH 01/15] Add attribute filters

---
 docs/src/components/AttributeCard.astro     |  10 +-
 docs/src/components/AttributeFilters.svelte | 332 ++++++++++++++++++++
 docs/src/components/SearchModal.svelte      |   6 +-
 docs/src/pages/api/attributes.json.ts       |   3 +
 docs/src/pages/attributes/[category].astro  |  16 +-
 docs/src/pages/attributes/index.astro       |  40 ++-
 6 files changed, 392 insertions(+), 15 deletions(-)
 create mode 100644 docs/src/components/AttributeFilters.svelte

diff --git a/docs/src/components/AttributeCard.astro b/docs/src/components/AttributeCard.astro
index 5dea76c2..7ad9c783 100644
--- a/docs/src/components/AttributeCard.astro
+++ b/docs/src/components/AttributeCard.astro
@@ -10,9 +10,10 @@ interface Props {
   attribute: Attribute;
   id: string;
   showCategory?: boolean;
+  defaultHidden?: boolean;
 }
 
-const { attribute, id, showCategory = false } = Astro.props;
+const { attribute, id, showCategory = false, defaultHidden = false } = Astro.props;
 
 const { category } = parseAttributeId(id);
 const isDeprecated = !!attribute.deprecation;
@@ -23,9 +24,16 @@ const rawJson = JSON.stringify(attribute, null, 2);
 <article 
   class:list={[
     'attribute-card bg-bg-secondary border border-border rounded-lg p-5 transition-colors duration-fast scroll-mt-24 hover:border-border-light',
+    { hidden: defaultHidden },
     { 'opacity-70 border-dashed hover:opacity-100': isDeprecated }
   ]} 
   id={anchorId}
+  hidden={defaultHidden}
+  data-attribute-card
+  data-filter-default-hidden={defaultHidden ? 'true' : undefined}
+  data-filter-pii={attribute.pii.key}
+  data-filter-visibility={attribute.visibility}
+  data-filter-otel={attribute.is_in_otel ? 'true' : 'false'}
   data-pagefind-body
 >
   <div class="flex flex-wrap items-start justify-between gap-3 mb-3">
diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
new file mode 100644
index 00000000..44a70221
--- /dev/null
+++ b/docs/src/components/AttributeFilters.svelte
@@ -0,0 +1,332 @@
+<script lang="ts">
+import { onMount, tick } from 'svelte';
+
+interface WindowWithAttributeIndex {
+  attributeIndex?: AttributeIndexEntry[];
+}
+
+interface AttributeIndexEntry {
+  key: string;
+  brief: string;
+  type: string;
+  category: string;
+  url: string;
+  deprecated: boolean;
+  pii: 'true' | 'maybe' | 'false';
+  visibility: 'public' | 'internal';
+  is_in_otel: boolean;
+}
+
+interface Props {
+  mode: 'cards' | 'sections';
+  category?: string;
+  totalCount?: number;
+}
+
+const PII_VALUES = ['true', 'maybe', 'false'] as const;
+const VISIBILITY_VALUES = ['public', 'internal'] as const;
+const OTEL_VALUES = ['true', 'false'] as const;
+
+const { mode, totalCount = 0 }: Props = $props();
+
+let piiFilter = $state('');
+let visibilityFilter = $state('');
+let otelFilter = $state('');
+
+let visibleCount = $state(0);
+let visibleCardCount = $state(0);
+let visibleSectionCount = $state(0);
+let emptyStateEl: HTMLElement | null = null;
+let attributeListEl: HTMLElement | null = null;
+
+const hasActiveFilters = $derived(piiFilter !== '' || visibilityFilter !== '' || otelFilter !== '');
+
+function readFiltersFromUrl() {
+  const params = new URLSearchParams(window.location.search);
+  const pii = params.get('pii') ?? '';
+  // `vis` avoids clashing with CSS/DOM visibility; accept legacy `visibility` param
+  const visibility = params.get('vis') ?? params.get('visibility') ?? '';
+  const otel = params.get('otel') ?? '';
+
+  piiFilter = PII_VALUES.includes(pii as (typeof PII_VALUES)[number]) ? pii : '';
+  visibilityFilter = VISIBILITY_VALUES.includes(visibility as (typeof VISIBILITY_VALUES)[number]) ? visibility : '';
+  otelFilter = OTEL_VALUES.includes(otel as (typeof OTEL_VALUES)[number]) ? otel : '';
+}
+
+function syncUrl() {
+  const url = new URL(window.location.href);
+
+  if (piiFilter) {
+    url.searchParams.set('pii', piiFilter);
+  } else {
+    url.searchParams.delete('pii');
+  }
+
+  if (visibilityFilter) {
+    url.searchParams.set('vis', visibilityFilter);
+  } else {
+    url.searchParams.delete('vis');
+    url.searchParams.delete('visibility');
+  }
+
+  if (otelFilter) {
+    url.searchParams.set('otel', otelFilter);
+  } else {
+    url.searchParams.delete('otel');
+  }
+
+  history.replaceState(null, '', url);
+}
+
+function matchesFilters(pii: string, visibility: string, otel: string) {
+  if (piiFilter && pii !== piiFilter) return false;
+  if (visibilityFilter && visibility !== visibilityFilter) return false;
+  if (otelFilter && otel !== otelFilter) return false;
+  return true;
+}
+
+function getCardFilterValues(card: HTMLElement) {
+  return {
+    pii: card.dataset.filterPii ?? card.getAttribute('data-filter-pii') ?? '',
+    visibility: card.dataset.filterVisibility ?? card.getAttribute('data-filter-visibility') ?? '',
+    otel: card.dataset.filterOtel ?? card.getAttribute('data-filter-otel') ?? '',
+  };
+}
+
+function cardMatches(card: HTMLElement) {
+  const { pii, visibility, otel } = getCardFilterValues(card);
+  return matchesFilters(pii, visibility, otel);
+}
+
+function isElementVisible(el: HTMLElement) {
+  return !el.hidden && !el.classList.contains('hidden');
+}
+
+function isDefaultHidden(el: HTMLElement) {
+  return el.dataset.filterDefaultHidden === 'true';
+}
+
+function setElementVisible(el: HTMLElement, show: boolean) {
+  el.hidden = !show;
+  el.classList.toggle('hidden', !show);
+}
+
+function getFilterRoot(): ParentNode {
+  return attributeListEl ?? document;
+}
+
+function applyCardFilters(): number {
+  const root = getFilterRoot();
+  const cards = root.querySelectorAll<HTMLElement>('[data-attribute-card]');
+  let visible = 0;
+
+  for (const card of cards) {
+    const show = hasActiveFilters ? cardMatches(card) : !isDefaultHidden(card);
+    setElementVisible(card, show);
+    if (show) visible++;
+  }
+
+  if (mode === 'cards') {
+    const sections = root.querySelectorAll<HTMLElement>('[data-attribute-section]');
+    for (const section of sections) {
+      const sectionCards = section.querySelectorAll<HTMLElement>('[data-attribute-card]');
+      const hasVisible = Array.from(sectionCards).some(isElementVisible);
+      setElementVisible(section, hasVisible);
+    }
+  }
+
+  return visible;
+}
+
+function updateCategorySectionVisibility(): number {
+  const root = getFilterRoot();
+  const sections = root.querySelectorAll<HTMLElement>('[data-category-section]');
+  let visibleSections = 0;
+
+  for (const section of sections) {
+    const cards = section.querySelectorAll<HTMLElement>('[data-attribute-card]');
+    const hasVisibleCard = Array.from(cards).some(isElementVisible);
+
+    setElementVisible(section, hasVisibleCard);
+    if (hasVisibleCard) visibleSections++;
+
+    const viewAllLink = section.querySelector<HTMLElement>('[data-category-view-all]');
+    if (viewAllLink) {
+      const stableGrid = section.querySelector<HTMLElement>('[data-category-stable-grid]');
+      const hasVisibleStable =
+        stableGrid !== null &&
+        Array.from(stableGrid.querySelectorAll<HTMLElement>('[data-attribute-card]')).some(isElementVisible);
+      setElementVisible(viewAllLink, hasVisibleStable);
+    }
+
+    const deprecatedBlock = section.querySelector<HTMLElement>('[data-category-deprecated]');
+    if (deprecatedBlock) {
+      const hasVisibleDeprecated = Array.from(
+        deprecatedBlock.querySelectorAll<HTMLElement>('[data-attribute-card]'),
+      ).some(isElementVisible);
+      setElementVisible(deprecatedBlock, hasVisibleDeprecated);
+    }
+  }
+
+  return visibleSections;
+}
+
+function resetSectionVisibility(showDefaultHidden = false) {
+  const root = getFilterRoot();
+  const sections = root.querySelectorAll<HTMLElement>('[data-category-section]');
+
+  for (const section of sections) {
+    setElementVisible(section, true);
+    const viewAllLink = section.querySelector<HTMLElement>('[data-category-view-all]');
+    if (viewAllLink) setElementVisible(viewAllLink, true);
+    const deprecatedBlock = section.querySelector<HTMLElement>('[data-category-deprecated]');
+    if (deprecatedBlock) setElementVisible(deprecatedBlock, showDefaultHidden || !isDefaultHidden(deprecatedBlock));
+  }
+}
+
+async function applySectionFilters() {
+  if (!hasActiveFilters) {
+    resetSectionVisibility();
+    visibleCardCount = applyCardFilters();
+    visibleSectionCount = getFilterRoot().querySelectorAll('[data-category-section]').length;
+    visibleCount = visibleSectionCount;
+    return;
+  }
+
+  // Show all sections first so card filters run against every rendered card
+  resetSectionVisibility(true);
+  visibleCardCount = applyCardFilters();
+  visibleSectionCount = updateCategorySectionVisibility();
+  visibleCount = visibleSectionCount;
+}
+
+function updateEmptyState(visible: number) {
+  if (emptyStateEl) {
+    emptyStateEl.hidden = visible > 0 || !hasActiveFilters;
+    emptyStateEl.classList.toggle('hidden', emptyStateEl.hidden);
+  }
+  if (attributeListEl && mode === 'cards') {
+    const hideList = visible === 0 && hasActiveFilters;
+    attributeListEl.hidden = hideList;
+    attributeListEl.classList.toggle('hidden', hideList);
+  }
+}
+
+async function applyFilters() {
+  await tick();
+
+  if (!attributeListEl) {
+    attributeListEl = document.getElementById('attribute-list');
+  }
+
+  syncUrl();
+
+  if (mode === 'sections') {
+    await applySectionFilters();
+    updateEmptyState(visibleSectionCount);
+  } else {
+    visibleCardCount = applyCardFilters();
+    visibleCount = visibleCardCount;
+    updateEmptyState(visibleCount);
+  }
+}
+
+function clearFilters() {
+  piiFilter = '';
+  visibilityFilter = '';
+  otelFilter = '';
+}
+
+function handlePopState() {
+  readFiltersFromUrl();
+}
+
+onMount(() => {
+  readFiltersFromUrl();
+  emptyStateEl = document.getElementById('attribute-filter-empty');
+  attributeListEl = document.getElementById('attribute-list');
+  applyFilters();
+
+  window.addEventListener('popstate', handlePopState);
+  return () => window.removeEventListener('popstate', handlePopState);
+});
+
+$effect(() => {
+  piiFilter;
+  visibilityFilter;
+  otelFilter;
+  applyFilters();
+});
+
+const resultLabel = $derived.by(() => {
+  if (mode === 'cards') {
+    if (hasActiveFilters) {
+      return `Showing ${visibleCount} of ${totalCount} attributes`;
+    }
+    return `${totalCount} attributes`;
+  }
+
+  if (hasActiveFilters) {
+    return `Showing ${visibleCardCount} attributes across ${visibleSectionCount} categories`;
+  }
+  return null;
+});
+</script>
+
+<div class="mb-6 p-4 bg-bg-secondary border border-border rounded-lg">
+  <div class="flex flex-wrap items-end gap-3">
+    <label class="flex flex-col gap-1 min-w-[140px]">
+      <span class="text-xs text-text-muted uppercase tracking-wider">PII</span>
+      <select
+        class="form-input py-2"
+        bind:value={piiFilter}
+        aria-label="Filter by PII"
+      >
+        <option value="">All</option>
+        <option value="true">True</option>
+        <option value="maybe">Maybe</option>
+        <option value="false">False</option>
+      </select>
+    </label>
+
+    <label class="flex flex-col gap-1 min-w-[140px]">
+      <span class="text-xs text-text-muted uppercase tracking-wider">Visibility</span>
+      <select
+        class="form-input py-2"
+        bind:value={visibilityFilter}
+        aria-label="Filter by visibility"
+      >
+        <option value="">All</option>
+        <option value="public">Public</option>
+        <option value="internal">Internal</option>
+      </select>
+    </label>
+
+    <label class="flex flex-col gap-1 min-w-[140px]">
+      <span class="text-xs text-text-muted uppercase tracking-wider">OTel</span>
+      <select
+        class="form-input py-2"
+        bind:value={otelFilter}
+        aria-label="Filter by OpenTelemetry"
+      >
+        <option value="">All</option>
+        <option value="true">In OTel</option>
+        <option value="false">Not in OTel</option>
+      </select>
+    </label>
+
+    {#if hasActiveFilters}
+      <button
+        type="button"
+        class="text-sm text-accent hover:text-accent-hover px-2 py-2"
+        onclick={clearFilters}
+      >
+        Clear filters
+      </button>
+    {/if}
+  </div>
+
+  {#if resultLabel}
+    <p class="text-sm text-text-muted mt-3 mb-0">{resultLabel}</p>
+  {/if}
+</div>
diff --git a/docs/src/components/SearchModal.svelte b/docs/src/components/SearchModal.svelte
index fc3dc5bc..8858fe9a 100644
--- a/docs/src/components/SearchModal.svelte
+++ b/docs/src/components/SearchModal.svelte
@@ -39,6 +39,9 @@ interface AttributeIndex {
   category: string;
   url: string;
   deprecated: boolean;
+  pii: 'true' | 'maybe' | 'false';
+  visibility: 'public' | 'internal';
+  is_in_otel: boolean;
 }
 
 let isOpen = $state(false);
@@ -59,7 +62,8 @@ const noResults = $derived(query && !isLoading && !hasResults);
 
 async function loadAttributeIndex() {
   const windowWithPagefind = window as WindowWithPagefind;
-  if (windowWithPagefind.attributeIndex) {
+  const cached = windowWithPagefind.attributeIndex;
+  if (cached?.length && cached[0]?.visibility !== undefined) {
     return;
   }
 
diff --git a/docs/src/pages/api/attributes.json.ts b/docs/src/pages/api/attributes.json.ts
index 000a9bdf..d982e495 100644
--- a/docs/src/pages/api/attributes.json.ts
+++ b/docs/src/pages/api/attributes.json.ts
@@ -22,6 +22,9 @@ export const GET: APIRoute = async () => {
       category,
       url,
       deprecated: !!attr.data.deprecation,
+      pii: attr.data.pii.key,
+      visibility: attr.data.visibility,
+      is_in_otel: attr.data.is_in_otel,
     };
   });
 
diff --git a/docs/src/pages/attributes/[category].astro b/docs/src/pages/attributes/[category].astro
index 2ebdc33d..1d6851fb 100644
--- a/docs/src/pages/attributes/[category].astro
+++ b/docs/src/pages/attributes/[category].astro
@@ -1,6 +1,7 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import AttributeCard from '../../components/AttributeCard.astro';
+import AttributeFilters from '../../components/AttributeFilters.svelte';
 import { getCollection } from 'astro:content';
 import { parseAttributeId } from '../../utils/category';
 
@@ -104,10 +105,19 @@ const categoryTitle = category.charAt(0).toUpperCase() + category.slice(1);
           {deprecatedCount > 0 && <span class="text-text-muted">{deprecatedCount} deprecated</span>}
         </p>
       </div>
+
+      <AttributeFilters client:load mode="cards" category={category} totalCount={totalCount} />
+
+      <div
+        id="attribute-filter-empty"
+        class="hidden mb-8 p-6 bg-bg-secondary border border-dashed border-border rounded-lg text-center text-text-muted"
+      >
+        No attributes match the current filters.
+      </div>
       
-      <div class="flex flex-col gap-12">
+      <div id="attribute-list" class="flex flex-col gap-12">
         {stableAttributes.length > 0 && (
-          <section>
+          <section data-attribute-section>
             <h2 class="mb-4 pb-3 border-b border-border">Stable Attributes</h2>
             <div class="flex flex-col gap-4">
               {stableAttributes.map(attr => (
@@ -118,7 +128,7 @@ const categoryTitle = category.charAt(0).toUpperCase() + category.slice(1);
         )}
         
         {deprecatedAttributes.length > 0 && (
-          <section class="opacity-90">
+          <section class="opacity-90" data-attribute-section>
             <h2 class="mb-4 pb-3 border-b border-border text-text-muted">Deprecated Attributes</h2>
             <p class="text-sm text-text-muted mb-6">
               These attributes are deprecated and should not be used in new code. 
diff --git a/docs/src/pages/attributes/index.astro b/docs/src/pages/attributes/index.astro
index c596ee2f..0794a76f 100644
--- a/docs/src/pages/attributes/index.astro
+++ b/docs/src/pages/attributes/index.astro
@@ -1,7 +1,7 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import AttributeCard from '../../components/AttributeCard.astro';
-import CategoryChip from '../../components/CategoryChip.astro';
+import AttributeFilters from '../../components/AttributeFilters.svelte';
 import { getCollection } from 'astro:content';
 import { parseAttributeId } from '../../utils/category';
 
@@ -75,16 +75,24 @@ const deprecatedCount = totalAttributes - stableCount;
           LLM-friendly: <a href={`${import.meta.env.BASE_URL}llms.txt`} class="text-accent hover:text-accent-hover">llms.txt</a> · <a href={`${import.meta.env.BASE_URL}llms-full.txt`} class="text-accent hover:text-accent-hover">llms-full.txt</a>
         </p>
       </div>
+
+      <AttributeFilters client:load mode="sections" />
+
+      <div
+        id="attribute-filter-empty"
+        class="hidden mb-8 p-6 bg-bg-secondary border border-dashed border-border rounded-lg text-center text-text-muted"
+      >
+        No categories match the current filters.
+      </div>
       
-      
-      <div class="flex flex-col gap-12">
+      <div id="attribute-list" class="flex flex-col gap-12">
     {sortedCategories.map(category => {
       const attributes = categoryMap.get(category) || [];
       const stableAttrs = attributes.filter(a => !a.data.deprecation);
       const deprecatedAttrs = attributes.filter(a => a.data.deprecation);
       
       return (
-        <section class="scroll-mt-20" id={category}>
+        <section class="scroll-mt-20" id={category} data-category-section>
           <div class="flex items-baseline gap-4 mb-6 pb-3 border-b border-border">
             <h2 class="m-0 text-2xl">
               <a href={`${import.meta.env.BASE_URL}attributes/${category}/`} class="text-text-primary hover:text-accent">{category}</a>
@@ -93,21 +101,33 @@ const deprecatedCount = totalAttributes - stableCount;
           </div>
           
           {stableAttrs.length > 0 && (
-            <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
-              {stableAttrs.slice(0, 6).map(attr => (
-                <AttributeCard attribute={attr.data} id={attr.id} />
+            <div class="grid grid-cols-1 xl:grid-cols-2 gap-4" data-category-stable-grid>
+              {stableAttrs.map((attr, index) => (
+                <AttributeCard attribute={attr.data} id={attr.id} defaultHidden={index >= 6} />
               ))}
             </div>
           )}
           
           {stableAttrs.length > 6 && (
-            <a href={`${import.meta.env.BASE_URL}attributes/${category}/`} class="inline-block mt-4 text-sm text-accent hover:text-accent-hover">
+            <a
+              href={`${import.meta.env.BASE_URL}attributes/${category}/`}
+              data-category-view-all
+              class="inline-block mt-4 text-sm text-accent hover:text-accent-hover"
+            >
               View all {attributes.length} {category} attributes →
             </a>
           )}
           
-          {stableAttrs.length <= 6 && deprecatedAttrs.length > 0 && (
-            <details class="mt-6 group">
+          {deprecatedAttrs.length > 0 && (
+            <details
+              class:list={[
+                'mt-6 group',
+                { hidden: stableAttrs.length > 6 }
+              ]}
+              hidden={stableAttrs.length > 6}
+              data-category-deprecated
+              data-filter-default-hidden={stableAttrs.length > 6 ? 'true' : undefined}
+            >
               <summary class="cursor-pointer list-none">
                 <span class="inline-flex items-center gap-2 px-4 py-2 bg-bg-secondary border border-dashed border-border rounded-md text-sm text-text-muted transition-all duration-fast hover:border-border-light hover:text-text-secondary group-open:mb-4">
                   {deprecatedAttrs.length} deprecated attribute{deprecatedAttrs.length > 1 ? 's' : ''}

From 35f9ffb608e2f91809f1642b1f10d0fa9980b270 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Wed, 20 May 2026 15:35:21 -0300
Subject: [PATCH 02/15] Tighten attribute filter spacing

---
 docs/src/components/AttributeFilters.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index 44a70221..8a73fb4e 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -273,7 +273,7 @@ const resultLabel = $derived.by(() => {
 });
 </script>
 
-<div class="mb-6 p-4 bg-bg-secondary border border-border rounded-lg">
+<div class="mb-6 p-3 bg-bg-secondary border border-border rounded-lg">
   <div class="flex flex-wrap items-end gap-3">
     <label class="flex flex-col gap-1 min-w-[140px]">
       <span class="text-xs text-text-muted uppercase tracking-wider">PII</span>

From f91dca5863e3a85cb8b3291c40398ca6c1763ee3 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Wed, 20 May 2026 15:45:44 -0300
Subject: [PATCH 03/15] Prevent attribute filter deep link reset

---
 docs/src/components/AttributeFilters.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index 8a73fb4e..f52d0aec 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -38,6 +38,7 @@ let visibleCardCount = $state(0);
 let visibleSectionCount = $state(0);
 let emptyStateEl: HTMLElement | null = null;
 let attributeListEl: HTMLElement | null = null;
+let filtersInitializedFromUrl = false;
 
 const hasActiveFilters = $derived(piiFilter !== '' || visibilityFilter !== '' || otelFilter !== '');
 
@@ -243,6 +244,7 @@ function handlePopState() {
 
 onMount(() => {
   readFiltersFromUrl();
+  filtersInitializedFromUrl = true;
   emptyStateEl = document.getElementById('attribute-filter-empty');
   attributeListEl = document.getElementById('attribute-list');
   applyFilters();
@@ -255,6 +257,7 @@ $effect(() => {
   piiFilter;
   visibilityFilter;
   otelFilter;
+  if (!filtersInitializedFromUrl) return;
   applyFilters();
 });
 

From 5bd730153cbe5cac908b9957916e99b1cc740424 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Wed, 20 May 2026 15:47:36 -0300
Subject: [PATCH 04/15] Ignore stale attribute filter updates

---
 docs/src/components/AttributeFilters.svelte | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index f52d0aec..33be29b7 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -39,6 +39,7 @@ let visibleSectionCount = $state(0);
 let emptyStateEl: HTMLElement | null = null;
 let attributeListEl: HTMLElement | null = null;
 let filtersInitializedFromUrl = false;
+let latestApplyFiltersRun = 0;
 
 const hasActiveFilters = $derived(piiFilter !== '' || visibilityFilter !== '' || otelFilter !== '');
 
@@ -185,7 +186,7 @@ function resetSectionVisibility(showDefaultHidden = false) {
   }
 }
 
-async function applySectionFilters() {
+function applySectionFilters() {
   if (!hasActiveFilters) {
     resetSectionVisibility();
     visibleCardCount = applyCardFilters();
@@ -214,8 +215,13 @@ function updateEmptyState(visible: number) {
 }
 
 async function applyFilters() {
+  const applyFiltersRun = ++latestApplyFiltersRun;
   await tick();
 
+  if (applyFiltersRun !== latestApplyFiltersRun) {
+    return;
+  }
+
   if (!attributeListEl) {
     attributeListEl = document.getElementById('attribute-list');
   }
@@ -223,7 +229,7 @@ async function applyFilters() {
   syncUrl();
 
   if (mode === 'sections') {
-    await applySectionFilters();
+    applySectionFilters();
     updateEmptyState(visibleSectionCount);
   } else {
     visibleCardCount = applyCardFilters();
@@ -247,7 +253,7 @@ onMount(() => {
   filtersInitializedFromUrl = true;
   emptyStateEl = document.getElementById('attribute-filter-empty');
   attributeListEl = document.getElementById('attribute-list');
-  applyFilters();
+  void applyFilters();
 
   window.addEventListener('popstate', handlePopState);
   return () => window.removeEventListener('popstate', handlePopState);
@@ -258,7 +264,7 @@ $effect(() => {
   visibilityFilter;
   otelFilter;
   if (!filtersInitializedFromUrl) return;
-  applyFilters();
+  void applyFilters();
 });
 
 const resultLabel = $derived.by(() => {

From df8171577972ce40efab07160fc91f67566a7952 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Wed, 20 May 2026 15:58:53 -0300
Subject: [PATCH 05/15] Stop accepting legacy visibility filter param

---
 docs/src/components/AttributeFilters.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index 33be29b7..829279cb 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -46,8 +46,8 @@ const hasActiveFilters = $derived(piiFilter !== '' || visibilityFilter !== '' ||
 function readFiltersFromUrl() {
   const params = new URLSearchParams(window.location.search);
   const pii = params.get('pii') ?? '';
-  // `vis` avoids clashing with CSS/DOM visibility; accept legacy `visibility` param
-  const visibility = params.get('vis') ?? params.get('visibility') ?? '';
+  // `vis` avoids clashing with CSS/DOM visibility
+  const visibility = params.get('vis') ?? '';
   const otel = params.get('otel') ?? '';
 
   piiFilter = PII_VALUES.includes(pii as (typeof PII_VALUES)[number]) ? pii : '';
@@ -68,7 +68,6 @@ function syncUrl() {
     url.searchParams.set('vis', visibilityFilter);
   } else {
     url.searchParams.delete('vis');
-    url.searchParams.delete('visibility');
   }
 
   if (otelFilter) {

From f6dd837aaf17b24cd2645a6fc91a513df8aa99d5 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Wed, 20 May 2026 15:59:34 -0300
Subject: [PATCH 06/15] Expand deprecated filters when matches are visible

---
 docs/src/components/AttributeFilters.svelte | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index 829279cb..97072726 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -112,6 +112,12 @@ function setElementVisible(el: HTMLElement, show: boolean) {
   el.classList.toggle('hidden', !show);
 }
 
+function setDetailsOpen(el: HTMLElement, open: boolean) {
+  if (el instanceof HTMLDetailsElement) {
+    el.open = open;
+  }
+}
+
 function getFilterRoot(): ParentNode {
   return attributeListEl ?? document;
 }
@@ -166,6 +172,7 @@ function updateCategorySectionVisibility(): number {
         deprecatedBlock.querySelectorAll<HTMLElement>('[data-attribute-card]'),
       ).some(isElementVisible);
       setElementVisible(deprecatedBlock, hasVisibleDeprecated);
+      setDetailsOpen(deprecatedBlock, hasVisibleDeprecated);
     }
   }
 
@@ -181,7 +188,10 @@ function resetSectionVisibility(showDefaultHidden = false) {
     const viewAllLink = section.querySelector<HTMLElement>('[data-category-view-all]');
     if (viewAllLink) setElementVisible(viewAllLink, true);
     const deprecatedBlock = section.querySelector<HTMLElement>('[data-category-deprecated]');
-    if (deprecatedBlock) setElementVisible(deprecatedBlock, showDefaultHidden || !isDefaultHidden(deprecatedBlock));
+    if (deprecatedBlock) {
+      setElementVisible(deprecatedBlock, showDefaultHidden || !isDefaultHidden(deprecatedBlock));
+      setDetailsOpen(deprecatedBlock, false);
+    }
   }
 }
 

From 21b5fbd52e028ccfa748acb9ddb0f516ca66be13 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Thu, 21 May 2026 07:06:51 -0300
Subject: [PATCH 07/15] Remove unused prop

---
 docs/src/components/AttributeFilters.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index 97072726..023a07c7 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -19,7 +19,6 @@ interface AttributeIndexEntry {
 
 interface Props {
   mode: 'cards' | 'sections';
-  category?: string;
   totalCount?: number;
 }
 

From 10cf0e5c731e7e0e4f357355c930296568ac559f Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Thu, 21 May 2026 07:07:23 -0300
Subject: [PATCH 08/15] Remove unused interface

---
 docs/src/components/AttributeFilters.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index 023a07c7..1fd2c0ec 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
 import { onMount, tick } from 'svelte';
 
-interface WindowWithAttributeIndex {
-  attributeIndex?: AttributeIndexEntry[];
-}
-
 interface AttributeIndexEntry {
   key: string;
   brief: string;

From 0273bc1e312c8dd9cb87eeda824b5f9155bf10f1 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Thu, 21 May 2026 07:29:34 -0300
Subject: [PATCH 09/15] Preserve attribute filters across category links

---
 docs/src/components/AttributeFilters.svelte | 82 ++++++++++++++++++---
 docs/src/pages/attributes/index.astro       | 43 ++++++++++-
 2 files changed, 112 insertions(+), 13 deletions(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index 1fd2c0ec..e612896e 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -1,28 +1,27 @@
 <script lang="ts">
 import { onMount, tick } from 'svelte';
 
-interface AttributeIndexEntry {
-  key: string;
-  brief: string;
-  type: string;
+interface CategoryFilterCount {
   category: string;
-  url: string;
-  deprecated: boolean;
-  pii: 'true' | 'maybe' | 'false';
-  visibility: 'public' | 'internal';
-  is_in_otel: boolean;
+  total: number;
+  attributes: Array<{
+    pii: 'true' | 'maybe' | 'false';
+    visibility: 'public' | 'internal';
+    otel: 'true' | 'false';
+  }>;
 }
 
 interface Props {
   mode: 'cards' | 'sections';
   totalCount?: number;
+  categoryFilterCounts?: CategoryFilterCount[];
 }
 
 const PII_VALUES = ['true', 'maybe', 'false'] as const;
 const VISIBILITY_VALUES = ['public', 'internal'] as const;
 const OTEL_VALUES = ['true', 'false'] as const;
 
-const { mode, totalCount = 0 }: Props = $props();
+const { mode, totalCount = 0, categoryFilterCounts = [] }: Props = $props();
 
 let piiFilter = $state('');
 let visibilityFilter = $state('');
@@ -81,6 +80,10 @@ function matchesFilters(pii: string, visibility: string, otel: string) {
   return true;
 }
 
+function formatAttributeCount(count: number) {
+  return `${count} attribute${count === 1 ? '' : 's'}`;
+}
+
 function getCardFilterValues(card: HTMLElement) {
   return {
     pii: card.dataset.filterPii ?? card.getAttribute('data-filter-pii') ?? '',
@@ -117,6 +120,61 @@ function getFilterRoot(): ParentNode {
   return attributeListEl ?? document;
 }
 
+function updateCategoryLinkUrls() {
+  const root = getFilterRoot();
+  const links = root.querySelectorAll<HTMLAnchorElement>('[data-category-filter-link]');
+
+  const query = new URLSearchParams([
+    ...(piiFilter ? [['pii', piiFilter]] : []),
+    ...(visibilityFilter ? [['vis', visibilityFilter]] : []),
+    ...(otelFilter ? [['otel', otelFilter]] : []),
+  ]).toString();
+
+  for (const link of links) {
+    const originalHref = link.dataset.categoryOriginalHref ?? link.getAttribute('href') ?? '';
+    link.dataset.categoryOriginalHref = originalHref;
+
+    const url = new URL(originalHref, window.location.href);
+    url.search = query;
+    link.setAttribute('href', `${url.pathname}${url.search}${url.hash}`);
+  }
+}
+
+function resetCategoryCountLabels() {
+  const root = getFilterRoot();
+  const labels = root.querySelectorAll<HTMLElement>('[data-category-count-label]');
+
+  for (const label of labels) {
+    const total = Number(label.dataset.categoryTotal ?? 0);
+    label.textContent = formatAttributeCount(total);
+  }
+}
+
+function updateCategoryCountLabels() {
+  const labels = getFilterRoot().querySelectorAll<HTMLElement>('[data-category-count-label]');
+
+  const counts = new Map(
+    categoryFilterCounts.map(({ category, total, attributes }) => [
+      category,
+      {
+        total,
+        visible: attributes.filter((attribute) => matchesFilters(attribute.pii, attribute.visibility, attribute.otel))
+          .length,
+      },
+    ]),
+  );
+
+  for (const label of labels) {
+    const category = label.dataset.categoryCountLabel;
+    if (!category) continue;
+
+    const count = counts.get(category);
+    if (!count) continue;
+
+    label.textContent = `${count.visible}/${count.total} attribute${count.total === 1 ? '' : 's'}`;
+  }
+}
+
 function applyCardFilters(): number {
   const root = getFilterRoot();
   const cards = root.querySelectorAll<HTMLElement>('[data-attribute-card]');
@@ -191,8 +249,11 @@ function resetSectionVisibility(showDefaultHidden = false) {
 }
 
 function applySectionFilters() {
+  updateCategoryLinkUrls();
+
   if (!hasActiveFilters) {
     resetSectionVisibility();
+    resetCategoryCountLabels();
     visibleCardCount = applyCardFilters();
     visibleSectionCount = getFilterRoot().querySelectorAll('[data-category-section]').length;
     visibleCount = visibleSectionCount;
@@ -203,6 +264,7 @@ function applySectionFilters() {
   resetSectionVisibility(true);
   visibleCardCount = applyCardFilters();
   visibleSectionCount = updateCategorySectionVisibility();
+  updateCategoryCountLabels();
   visibleCount = visibleSectionCount;
 }
 
diff --git a/docs/src/pages/attributes/index.astro b/docs/src/pages/attributes/index.astro
index 0794a76f..59181c60 100644
--- a/docs/src/pages/attributes/index.astro
+++ b/docs/src/pages/attributes/index.astro
@@ -5,6 +5,16 @@ import AttributeFilters from '../../components/AttributeFilters.svelte';
 import { getCollection } from 'astro:content';
 import { parseAttributeId } from '../../utils/category';
 
+type CategoryFilterCounts = Array<{
+  category: string;
+  total: number;
+  attributes: Array<{
+    pii: 'true' | 'maybe' | 'false';
+    visibility: 'public' | 'internal';
+    otel: 'true' | 'false';
+  }>;
+}>;
+
 // Get all attributes
 const allAttributes = await getCollection('attributes');
 
@@ -32,6 +42,20 @@ for (const [category, attrs] of categoryMap) {
   attrs.sort((a, b) => a.data.key.localeCompare(b.data.key));
 }
 
+const categoryFilterCounts: CategoryFilterCounts = sortedCategories.map((category) => {
+  const attributes = categoryMap.get(category) || [];
+
+  return {
+    category,
+    total: attributes.length,
+    attributes: attributes.map((attr) => ({
+      pii: attr.data.pii.key,
+      visibility: attr.data.visibility,
+      otel: attr.data.is_in_otel ? ('true' as const) : ('false' as const),
+    })),
+  };
+});
+
 // Stats
 const totalAttributes = allAttributes.length;
 const stableCount = allAttributes.filter((a) => !a.data.deprecation).length;
@@ -76,7 +100,7 @@ const deprecatedCount = totalAttributes - stableCount;
         </p>
       </div>
 
-      <AttributeFilters client:load mode="sections" />
+      <AttributeFilters client:load mode="sections" categoryFilterCounts={categoryFilterCounts} />
 
       <div
         id="attribute-filter-empty"
@@ -95,9 +119,21 @@ const deprecatedCount = totalAttributes - stableCount;
         <section class="scroll-mt-20" id={category} data-category-section>
           <div class="flex items-baseline gap-4 mb-6 pb-3 border-b border-border">
             <h2 class="m-0 text-2xl">
-              <a href={`${import.meta.env.BASE_URL}attributes/${category}/`} class="text-text-primary hover:text-accent">{category}</a>
+              <a
+                href={`${import.meta.env.BASE_URL}attributes/${category}/`}
+                class="text-text-primary hover:text-accent"
+                data-category-filter-link
+              >
+                {category}
+              </a>
             </h2>
-            <span class="text-sm text-text-muted">{attributes.length} attributes</span>
+            <span
+              class="text-sm text-text-muted"
+              data-category-count-label={category}
+              data-category-total={attributes.length}
+            >
+              {attributes.length} attributes
+            </span>
           </div>
           
           {stableAttrs.length > 0 && (
@@ -112,6 +148,7 @@ const deprecatedCount = totalAttributes - stableCount;
             <a
               href={`${import.meta.env.BASE_URL}attributes/${category}/`}
               data-category-view-all
+              data-category-filter-link
               class="inline-block mt-4 text-sm text-accent hover:text-accent-hover"
             >
               View all {attributes.length} {category} attributes →

From 11ad0e85a477420cc99155caf90e6d919adf974d Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Thu, 21 May 2026 07:29:55 -0300
Subject: [PATCH 10/15] Remove unused attribute category filter prop

---
 docs/src/pages/attributes/[category].astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/attributes/[category].astro b/docs/src/pages/attributes/[category].astro
index 1d6851fb..87930809 100644
--- a/docs/src/pages/attributes/[category].astro
+++ b/docs/src/pages/attributes/[category].astro
@@ -106,7 +106,7 @@ const categoryTitle = category.charAt(0).toUpperCase() + category.slice(1);
         </p>
       </div>
 
-      <AttributeFilters client:load mode="cards" category={category} totalCount={totalCount} />
+      <AttributeFilters client:load mode="cards" totalCount={totalCount} />
 
       <div
         id="attribute-filter-empty"

From f0bd43a83978420df778d20eaf08911fc76a7f1a Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Thu, 21 May 2026 07:45:00 -0300
Subject: [PATCH 11/15] Fix singular/plural in attribute filter result labels.

Reuse formatAttributeCount and add formatCategoryCount so counts of 1 read correctly.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/src/components/AttributeFilters.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index e612896e..387b2104 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -84,6 +84,10 @@ function formatAttributeCount(count: number) {
   return `${count} attribute${count === 1 ? '' : 's'}`;
 }
 
+function formatCategoryCount(count: number) {
+  return `${count} categor${count === 1 ? 'y' : 'ies'}`;
+}
+
 function getCardFilterValues(card: HTMLElement) {
   return {
     pii: card.dataset.filterPii ?? card.getAttribute('data-filter-pii') ?? '',
@@ -336,13 +340,13 @@ $effect(() => {
 const resultLabel = $derived.by(() => {
   if (mode === 'cards') {
     if (hasActiveFilters) {
-      return `Showing ${visibleCount} of ${totalCount} attributes`;
+      return `Showing ${visibleCount} of ${formatAttributeCount(totalCount)}`;
     }
-    return `${totalCount} attributes`;
+    return formatAttributeCount(totalCount);
   }
 
   if (hasActiveFilters) {
-    return `Showing ${visibleCardCount} attributes across ${visibleSectionCount} categories`;
+    return `Showing ${formatAttributeCount(visibleCardCount)} across ${formatCategoryCount(visibleSectionCount)}`;
   }
   return null;
 });

From 7e6be0c8d336fdb053d34121dd5f149571be0731 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Thu, 21 May 2026 07:48:33 -0300
Subject: [PATCH 12/15] Remove unused filter fields from attribute search
 index.

Search only needs key, brief, type, category, url, and deprecated; PII, visibility, and OTel filtering live on the attribute pages.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/src/components/SearchModal.svelte | 6 +-----
 docs/src/pages/api/attributes.json.ts  | 3 ---
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/docs/src/components/SearchModal.svelte b/docs/src/components/SearchModal.svelte
index 8858fe9a..fc3dc5bc 100644
--- a/docs/src/components/SearchModal.svelte
+++ b/docs/src/components/SearchModal.svelte
@@ -39,9 +39,6 @@ interface AttributeIndex {
   category: string;
   url: string;
   deprecated: boolean;
-  pii: 'true' | 'maybe' | 'false';
-  visibility: 'public' | 'internal';
-  is_in_otel: boolean;
 }
 
 let isOpen = $state(false);
@@ -62,8 +59,7 @@ const noResults = $derived(query && !isLoading && !hasResults);
 
 async function loadAttributeIndex() {
   const windowWithPagefind = window as WindowWithPagefind;
-  const cached = windowWithPagefind.attributeIndex;
-  if (cached?.length && cached[0]?.visibility !== undefined) {
+  if (windowWithPagefind.attributeIndex) {
     return;
   }
 
diff --git a/docs/src/pages/api/attributes.json.ts b/docs/src/pages/api/attributes.json.ts
index d982e495..000a9bdf 100644
--- a/docs/src/pages/api/attributes.json.ts
+++ b/docs/src/pages/api/attributes.json.ts
@@ -22,9 +22,6 @@ export const GET: APIRoute = async () => {
       category,
       url,
       deprecated: !!attr.data.deprecation,
-      pii: attr.data.pii.key,
-      visibility: attr.data.visibility,
-      is_in_otel: attr.data.is_in_otel,
     };
   });
 

From dd569e11808884ef5b8dbb9de4b652582566c844 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Thu, 21 May 2026 07:55:36 -0300
Subject: [PATCH 13/15] Reveal hash-targeted attribute cards on the attributes
 index.

Deep links to default-hidden cards stayed invisible after filter hydration; also open collapsed deprecated sections and re-scroll on hash change.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/src/components/AttributeFilters.svelte | 55 ++++++++++++++++++++-
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index 387b2104..ef00136d 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -109,6 +109,46 @@ function isDefaultHidden(el: HTMLElement) {
   return el.dataset.filterDefaultHidden === 'true';
 }
 
+function getHashAnchorId() {
+  const hash = window.location.hash.slice(1);
+  if (!hash) return '';
+  try {
+    return decodeURIComponent(hash);
+  } catch {
+    return hash;
+  }
+}
+
+function isHashTarget(card: HTMLElement) {
+  const anchorId = getHashAnchorId();
+  return anchorId !== '' && card.id === anchorId;
+}
+
+function getHashTargetCard(): HTMLElement | null {
+  const anchorId = getHashAnchorId();
+  if (!anchorId) return null;
+
+  const target = getFilterRoot().querySelector<HTMLElement>(`#${CSS.escape(anchorId)}`);
+  return target?.matches('[data-attribute-card]') ? target : null;
+}
+
+function revealHashTarget() {
+  if (hasActiveFilters) return;
+
+  const target = getHashTargetCard();
+  if (!target) return;
+
+  const deprecatedBlock = target.closest<HTMLElement>('[data-category-deprecated]');
+  if (deprecatedBlock) {
+    setElementVisible(deprecatedBlock, true);
+    setDetailsOpen(deprecatedBlock, true);
+  }
+
+  requestAnimationFrame(() => {
+    target.scrollIntoView({ block: 'start' });
+  });
+}
+
 function setElementVisible(el: HTMLElement, show: boolean) {
   el.hidden = !show;
   el.classList.toggle('hidden', !show);
@@ -185,7 +225,9 @@ function applyCardFilters(): number {
   let visible = 0;
 
   for (const card of cards) {
-    const show = hasActiveFilters ? cardMatches(card) : !isDefaultHidden(card);
+    const show = hasActiveFilters
+      ? cardMatches(card)
+      : !isDefaultHidden(card) || isHashTarget(card);
     setElementVisible(card, show);
     if (show) visible++;
   }
@@ -259,6 +301,7 @@ function applySectionFilters() {
     resetSectionVisibility();
     resetCategoryCountLabels();
     visibleCardCount = applyCardFilters();
+    revealHashTarget();
     visibleSectionCount = getFilterRoot().querySelectorAll('[data-category-section]').length;
     visibleCount = visibleSectionCount;
     return;
@@ -318,6 +361,10 @@ function handlePopState() {
   readFiltersFromUrl();
 }
 
+function handleHashChange() {
+  void applyFilters();
+}
+
 onMount(() => {
   readFiltersFromUrl();
   filtersInitializedFromUrl = true;
@@ -326,7 +373,11 @@ onMount(() => {
   void applyFilters();
 
   window.addEventListener('popstate', handlePopState);
-  return () => window.removeEventListener('popstate', handlePopState);
+  window.addEventListener('hashchange', handleHashChange);
+  return () => {
+    window.removeEventListener('popstate', handlePopState);
+    window.removeEventListener('hashchange', handleHashChange);
+  };
 });
 
 $effect(() => {

From f2d08c7322bc803d426bbd5acbd62ecb4bcf8686 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Thu, 21 May 2026 09:19:47 -0300
Subject: [PATCH 14/15] Remove redundent state

---
 docs/src/components/AttributeFilters.svelte | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index ef00136d..4fad0068 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -27,7 +27,6 @@ let piiFilter = $state('');
 let visibilityFilter = $state('');
 let otelFilter = $state('');
 
-let visibleCount = $state(0);
 let visibleCardCount = $state(0);
 let visibleSectionCount = $state(0);
 let emptyStateEl: HTMLElement | null = null;
@@ -303,7 +302,6 @@ function applySectionFilters() {
     visibleCardCount = applyCardFilters();
     revealHashTarget();
     visibleSectionCount = getFilterRoot().querySelectorAll('[data-category-section]').length;
-    visibleCount = visibleSectionCount;
     return;
   }
 
@@ -312,7 +310,6 @@ function applySectionFilters() {
   visibleCardCount = applyCardFilters();
   visibleSectionCount = updateCategorySectionVisibility();
   updateCategoryCountLabels();
-  visibleCount = visibleSectionCount;
 }
 
 function updateEmptyState(visible: number) {
@@ -346,8 +343,7 @@ async function applyFilters() {
     updateEmptyState(visibleSectionCount);
   } else {
     visibleCardCount = applyCardFilters();
-    visibleCount = visibleCardCount;
-    updateEmptyState(visibleCount);
+    updateEmptyState(visibleCardCount);
   }
 }
 
@@ -391,7 +387,7 @@ $effect(() => {
 const resultLabel = $derived.by(() => {
   if (mode === 'cards') {
     if (hasActiveFilters) {
-      return `Showing ${visibleCount} of ${formatAttributeCount(totalCount)}`;
+      return `Showing ${visibleCardCount} of ${formatAttributeCount(totalCount)}`;
     }
     return formatAttributeCount(totalCount);
   }

From 8247f26c9abee66c8bdf7feb69cfc3678ed08364 Mon Sep 17 00:00:00 2001
From: nsdeschenes <nicholas.deschenes@sentry.io>
Date: Fri, 22 May 2026 07:14:26 -0300
Subject: [PATCH 15/15] Run formatter

---
 docs/src/components/AttributeFilters.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/src/components/AttributeFilters.svelte b/docs/src/components/AttributeFilters.svelte
index 4fad0068..da404f00 100644
--- a/docs/src/components/AttributeFilters.svelte
+++ b/docs/src/components/AttributeFilters.svelte
@@ -224,9 +224,7 @@ function applyCardFilters(): number {
   let visible = 0;
 
   for (const card of cards) {
-    const show = hasActiveFilters
-      ? cardMatches(card)
-      : !isDefaultHidden(card) || isHashTarget(card);
+    const show = hasActiveFilters ? cardMatches(card) : !isDefaultHidden(card) || isHashTarget(card);
     setElementVisible(card, show);
     if (show) visible++;
   }