stack-site-builder 1.10.0

package/src/components/DetailTabs.astro

@@ -0,0 +1,219 @@
+---
+interface Props {
+  overviewLabel: string;
+  pricingLabel?: string;
+  codeLabel?: string;
+  implLabel?: string;
+}
+
+const { overviewLabel, pricingLabel, codeLabel, implLabel } = Astro.props;
+const tabClass =
+  'aas-tab cursor-pointer rounded-lg px-3 py-1.5 text-sm font-medium text-[var(--aas-muted)] hover:text-[var(--aas-text)]';
+---
+
+<div data-tabs>
+  <div role="tablist" class="inline-flex gap-1 rounded-xl bg-[var(--aas-tint)] p-1">
+    <button type="button" role="tab" id="tab-overview" aria-controls="panel-overview" data-tab="overview" class={tabClass} aria-selected="true">
+      {overviewLabel}
+    </button>
+    {
+      pricingLabel && (
+        <button type="button" role="tab" id="tab-pricing" aria-controls="panel-pricing" data-tab="pricing" class={tabClass} aria-selected="false">
+          {pricingLabel}
+        </button>
+      )
+    }
+    {
+      codeLabel && (
+        <button type="button" role="tab" id="tab-code" aria-controls="panel-code" data-tab="code" class={tabClass} aria-selected="false">
+          {codeLabel}
+        </button>
+      )
+    }
+    {
+      implLabel && (
+        <button type="button" role="tab" id="tab-impl" aria-controls="panel-impl" data-tab="impl" class={tabClass} aria-selected="false">
+          {implLabel}
+        </button>
+      )
+    }
+  </div>
+
+  <div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" data-panel="overview" class="mt-6">
+    <slot name="overview" />
+  </div>
+  {
+    pricingLabel && (
+      <div role="tabpanel" id="panel-pricing" aria-labelledby="tab-pricing" data-panel="pricing" class="mt-6 hidden">
+        <slot name="pricing" />
+      </div>
+    )
+  }
+  {
+    codeLabel && (
+      <div role="tabpanel" id="panel-code" aria-labelledby="tab-code" data-panel="code" class="mt-6 hidden">
+        <slot name="code" />
+      </div>
+    )
+  }
+  {
+    implLabel && (
+      <div role="tabpanel" id="panel-impl" aria-labelledby="tab-impl" data-panel="impl" class="mt-6 hidden">
+        <slot name="impl" />
+      </div>
+    )
+  }
+
+  {/* Pre-paint: pick the tab from ?tab= (or a legacy hash / the tab-owned
+      params) using inline display styles, which apply before the stylesheet
+      loads (so it works in dev too). */}
+  <script is:inline>
+    (function () {
+      var root = document.currentScript.parentElement;
+      var hash = decodeURIComponent(location.hash.slice(1));
+      var params = new URLSearchParams(location.search);
+      var has = function (id) {
+        var found = false;
+        root.querySelectorAll('[data-tab]').forEach(function (t) {
+          if (t.dataset.tab === id) found = true;
+        });
+        return found;
+      };
+
+      var target = null;
+      var pt = params.get('tab');
+      if (pt && has(pt)) target = pt;
+      if (!target && hash && hash !== 'overview') {
+        if (has(hash)) target = hash; // legacy #<tabid>
+        if (!target) {
+          root.querySelectorAll('[data-panel]').forEach(function (p) {
+            if (target) return;
+            try {
+              var esc = window.CSS && CSS.escape ? CSS.escape(hash) : hash;
+              if (p.querySelector('#' + esc)) target = p.dataset.panel;
+            } catch (e) {}
+          });
+        }
+      }
+      if (!target) {
+        // Tabs own their params: ?ex/?file → impl, ?v → code.
+        if ((params.has('ex') || params.has('file')) && has('impl')) target = 'impl';
+        else if (params.has('v') && has('code')) target = 'code';
+      }
+      if (!target || target === 'overview') return;
+      root.querySelectorAll('[data-panel]').forEach(function (p) {
+        p.style.display = p.dataset.panel === target ? 'block' : 'none';
+      });
+      root.querySelectorAll('[data-tab]').forEach(function (t) {
+        t.setAttribute('aria-selected', String(t.dataset.tab === target));
+      });
+    })();
+  </script>
+</div>
+
+<style>
+  .aas-tab[aria-selected='true'] {
+    background: var(--aas-panel);
+    color: var(--aas-text);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
+  }
+</style>
+
+<script>
+  // The selected tab lives in ?tab=; each tab also owns its own params, listed
+  // here so switching tabs can drop the others' (e.g. impl's ?ex/?file must not
+  // linger on the code tab). The hash is only ever a scroll anchor.
+  const TAB_PARAM = 'tab';
+  const OWNED: Record<string, string[]> = { code: ['v'], impl: ['ex', 'file'] };
+
+  function stripForeign(url: URL, id: string) {
+    for (const [tab, ps] of Object.entries(OWNED))
+      if (tab !== id) ps.forEach((p) => url.searchParams.delete(p));
+  }
+
+  document.querySelectorAll<HTMLElement>('[data-tabs]').forEach((root) => {
+    const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-tab]'));
+    const panels = Array.from(root.querySelectorAll<HTMLElement>('[data-panel]'));
+    const tabIds = tabs.map((t) => t.dataset.tab);
+
+    function applyTab(id: string) {
+      tabs.forEach((t) => t.setAttribute('aria-selected', String(t.dataset.tab === id)));
+      panels.forEach((p) => {
+        p.style.removeProperty('display'); // clear the pre-paint inline style
+        p.classList.toggle('hidden', p.dataset.panel !== id);
+      });
+      // Defer the broadcast to a microtask so child components (ProjectViewer,
+      // CodeSamples) have registered their listeners and can reflect their own
+      // params into the URL — even for the initial tab.
+      queueMicrotask(() => {
+        document.dispatchEvent(new CustomEvent('aas:tabchange', { detail: { id } }));
+        (window as unknown as { __aasRenderMermaid?: () => void }).__aasRenderMermaid?.();
+      });
+    }
+
+    // Clicking a tab: set ?tab=, drop other tabs' params, drop the scroll hash.
+    tabs.forEach((tab) =>
+      tab.addEventListener('click', () => {
+        const id = tab.dataset.tab!;
+        const url = new URL(location.href);
+        if (id === 'overview') url.searchParams.delete(TAB_PARAM);
+        else url.searchParams.set(TAB_PARAM, id);
+        stripForeign(url, id);
+        history.replaceState(null, '', url.pathname + url.search);
+        applyTab(id);
+      }),
+    );
+
+    // Resolve the initial tab: ?tab=, then a legacy #<tabid> / #<anchor>, then
+    // the tab-owned params (?ex/?file → impl, ?v → code). Else → Overview.
+    const raw = decodeURIComponent(location.hash.slice(1));
+    const params = new URLSearchParams(location.search);
+    let initial = 'overview';
+    const paramTab = params.get(TAB_PARAM);
+    if (paramTab && tabIds.includes(paramTab)) {
+      initial = paramTab;
+    } else if (tabIds.includes(raw)) {
+      initial = raw;
+    } else if (raw) {
+      for (const p of panels) {
+        const esc = window.CSS && CSS.escape ? CSS.escape(raw) : raw;
+        try {
+          if (p.querySelector('#' + esc)) {
+            initial = p.dataset.panel!;
+            break;
+          }
+        } catch {
+          /* invalid selector — ignore */
+        }
+      }
+    }
+    if (initial === 'overview') {
+      if ((params.has('ex') || params.has('file')) && tabIds.includes('impl')) initial = 'impl';
+      else if (params.has('v') && tabIds.includes('code')) initial = 'code';
+    }
+
+    applyTab(initial);
+
+    // Normalize the URL to the ?tab= form (drop a legacy tab-only hash, strip
+    // params owned by other tabs) without adding a history entry.
+    {
+      const url = new URL(location.href);
+      if (initial === 'overview') url.searchParams.delete(TAB_PARAM);
+      else url.searchParams.set(TAB_PARAM, initial);
+      stripForeign(url, initial);
+      if (tabIds.includes(raw)) url.hash = ''; // hash was just the tab id
+      const next = url.pathname + url.search + url.hash;
+      if (next !== location.pathname + location.search + location.hash)
+        history.replaceState(null, '', next);
+    }
+
+    // Deep-link scroll: select the sample for a #s<n>- hash (unless ?v= already
+    // chose one) and scroll the section into view.
+    if (raw && !tabIds.includes(raw)) {
+      const m = raw.match(/^s(\d+)-/);
+      if (m && !params.has('v'))
+        document.dispatchEvent(new CustomEvent('aas:select-sample', { detail: { index: Number(m[1]) } }));
+      document.getElementById(raw)?.scrollIntoView();
+    }
+  });
+</script>

package/src/components/FilterControls.astro

@@ -0,0 +1,407 @@
+---
+// Shared search · filter · sort bar for the homepage and category pages.
+// Filtering runs client-side over the page's [data-section]/[data-grid]/[data-tool]
+// markup, and the full filter state is mirrored into the URL query string
+// (?q, ?pricing, ?license, ?language, ?updated, ?sort) so a filtered view is
+// shareable and reproducible. The parent supplies the data-derived facets.
+import ChevronDown from './ChevronDown.astro';
+import { useTranslations, type Lang } from '../i18n/ui';
+
+interface Facet {
+  key: string;
+  label: string;
+  options: { value: string; label: string }[];
+}
+interface Props {
+  lang: Lang;
+  facets: Facet[];
+  anchorId?: string;
+}
+
+const { lang, facets, anchorId } = Astro.props;
+const t = useTranslations(lang);
+
+const freshnessOptions = [
+  { months: 0, label: t('updated.all') },
+  { months: 6, label: t('updated.6m') },
+  { months: 12, label: t('updated.1y') },
+  { months: 24, label: t('updated.2y') },
+];
+const sortOptions = [
+  { key: 'alpha', label: t('sort.alpha') },
+  { key: 'recent', label: t('sort.recent') },
+  { key: 'stars', label: t('sort.stars') },
+];
+
+const summaryClass =
+  'flex items-center gap-1.5 rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] px-3 py-1.5 text-sm text-[var(--aas-text)]';
+const menuClass =
+  'absolute left-0 z-10 mt-1 max-h-72 min-w-[12rem] overflow-y-auto rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] p-1 shadow-lg';
+---
+
+<script is:inline>
+  // Pre-paint: if the URL carries a filter/sort, hide the catalog (via
+  // [data-prefilter] on <html>) until the controls script below applies it, so
+  // the list never flashes unfiltered first. Runs synchronously during parse,
+  // before the controls + grids render. Cleared in that script's load sequence.
+  try {
+    if (/[?&](q|pricing|license|language|updated|sort)=/.test(location.search)) {
+      document.documentElement.setAttribute('data-prefilter', '');
+      // Safety net: never leave the catalog hidden if the module script fails to
+      // load/run (it clears this far sooner on a normal load).
+      setTimeout(function () {
+        document.documentElement.removeAttribute('data-prefilter');
+      }, 1500);
+    }
+  } catch (e) {}
+</script>
+
+<div id={anchorId} class="flex scroll-mt-6 flex-col gap-3" data-controls>
+  <input
+    type="search"
+    data-search-input
+    placeholder={t('search.placeholder')}
+    aria-label={t('search.placeholder')}
+    class="w-full rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] px-3.5 py-2.5 text-sm text-[var(--aas-text)] outline-none placeholder:text-[var(--aas-muted)] focus:border-[var(--aas-accent)]"
+  />
+
+  <div class="flex flex-wrap items-center gap-2">
+    {
+      facets.map((f) => (
+        <details class="aas-dd">
+          <summary class={summaryClass}>
+            {f.label}
+            <span data-facet-count={f.key} hidden class="aas-pricing rounded px-1.5 text-xs" />
+            <ChevronDown class="text-[var(--aas-muted)]" />
+          </summary>
+          <ul class={menuClass}>
+            {f.options.map((o) => (
+              <li>
+                <label class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-[var(--aas-tint)]">
+                  <input type="checkbox" data-facet={f.key} value={o.value} class="aas-check" />
+                  {o.label}
+                </label>
+              </li>
+            ))}
+          </ul>
+        </details>
+      ))
+    }
+
+    {/* Last-updated freshness — single select; hides tools older than the pick. */}
+    <details class="aas-dd" data-fresh-dd>
+      <summary class={summaryClass}>
+        <span class="text-[var(--aas-muted)]">{t('filter.updated')}:</span>
+        <span data-fresh-label>{freshnessOptions[0].label}</span>
+        <ChevronDown class="text-[var(--aas-muted)]" />
+      </summary>
+      <ul class={menuClass}>
+        {
+          freshnessOptions.map((o, i) => (
+            <li>
+              <button
+                type="button"
+                data-fresh={o.months}
+                aria-current={i === 0 ? 'true' : 'false'}
+                class="flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-[var(--aas-tint)] aria-[current=true]:font-semibold aria-[current=true]:text-[var(--aas-accent)]"
+              >
+                {o.label}
+                <span data-check aria-hidden="true" class="opacity-0">
+                  ✓
+                </span>
+              </button>
+            </li>
+          ))
+        }
+      </ul>
+    </details>
+
+    <details class="aas-dd sm:ml-auto">
+      <summary class={summaryClass}>
+        <span class="text-[var(--aas-muted)]">{t('sort.label')}:</span>
+        <span data-sort-label>{sortOptions[0].label}</span>
+        <ChevronDown class="text-[var(--aas-muted)]" />
+      </summary>
+      <ul class={menuClass}>
+        {
+          sortOptions.map((s, i) => (
+            <li>
+              <button
+                type="button"
+                data-sort={s.key}
+                aria-current={i === 0 ? 'true' : 'false'}
+                class="flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-[var(--aas-tint)] aria-[current=true]:font-semibold aria-[current=true]:text-[var(--aas-accent)]"
+              >
+                {s.label}
+                <span data-check aria-hidden="true" class="opacity-0">
+                  ✓
+                </span>
+              </button>
+            </li>
+          ))
+        }
+      </ul>
+    </details>
+
+    <button
+      type="button"
+      data-clear
+      hidden
+      class="rounded-lg px-2.5 py-1.5 text-sm text-[var(--aas-muted)] hover:text-[var(--aas-accent)]"
+    >
+      {t('filter.clear')}
+    </button>
+
+    {/* Density toggle: standard cards vs compact gallery (saved in localStorage) */}
+    <div
+      data-view-group
+      role="group"
+      aria-label={t('view.label')}
+      class="inline-flex items-center gap-0.5 rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] p-0.5"
+    >
+      <button
+        type="button"
+        data-view-btn="grid"
+        aria-label={t('view.standard')}
+        title={t('view.standard')}
+        class="aas-viewbtn rounded-md p-1.5 text-[var(--aas-muted)]"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <rect x="3" y="4" width="18" height="7" rx="1" />
+          <rect x="3" y="13" width="18" height="7" rx="1" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        data-view-btn="gallery"
+        aria-label={t('view.gallery')}
+        title={t('view.gallery')}
+        class="aas-viewbtn rounded-md p-1.5 text-[var(--aas-muted)]"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <rect x="3" y="3" width="7" height="7" rx="1" />
+          <rect x="14" y="3" width="7" height="7" rx="1" />
+          <rect x="3" y="14" width="7" height="7" rx="1" />
+          <rect x="14" y="14" width="7" height="7" rx="1" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+
+<p data-no-results hidden class="mt-10 text-center text-[var(--aas-muted)]">{t('results.none')}</p>
+
+<script>
+  const root = document.querySelector<HTMLElement>('[data-controls]');
+  if (root) {
+    const input = root.querySelector<HTMLInputElement>('[data-search-input]')!;
+    const boxes = Array.from(root.querySelectorAll<HTMLInputElement>('input[data-facet]'));
+    const sortBtns = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-sort]'));
+    const sortLabel = root.querySelector<HTMLElement>('[data-sort-label]')!;
+    const freshBtns = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-fresh]'));
+    const freshLabel = root.querySelector<HTMLElement>('[data-fresh-label]')!;
+    const clearBtn = root.querySelector<HTMLButtonElement>('[data-clear]')!;
+    const sections = Array.from(document.querySelectorAll<HTMLElement>('[data-section]'));
+    const noResults = document.querySelector<HTMLElement>('[data-no-results]')!;
+    const FACETS = ['pricing', 'license', 'language'];
+
+    // Carry the live filter/sort state across catalog navigation: category links
+    // (and the breadcrumb) keep the current query string, so drilling into a
+    // category preserves the sort/filters. Each link's filter-free href is
+    // remembered once, then rewritten with the current `location.search`.
+    const keepLinks = Array.from(
+      document.querySelectorAll<HTMLAnchorElement>(
+        '[data-keep-filters], nav[aria-label="Breadcrumb"] a',
+      ),
+    );
+    keepLinks.forEach((a) => {
+      if (a.dataset.baseHref === undefined) a.dataset.baseHref = a.getAttribute('href') ?? '';
+    });
+    function syncLinks() {
+      for (const a of keepLinks) {
+        const [pathQ, hash] = (a.dataset.baseHref ?? '').split('#');
+        const path = pathQ.split('?')[0];
+        a.setAttribute('href', path + location.search + (hash ? `#${hash}` : ''));
+      }
+    }
+    let sort = 'alpha';
+    let fresh = 0; // hide tools whose latest release is older than this many months (0 = off)
+
+    const alpha = (a: HTMLElement, b: HTMLElement) =>
+      (a.dataset.name ?? '').localeCompare(b.dataset.name ?? '');
+
+    function comparator(a: HTMLElement, b: HTMLElement) {
+      if (sort === 'recent') {
+        const ad = a.dataset.date ?? '';
+        const bd = b.dataset.date ?? '';
+        if (!ad && !bd) return alpha(a, b);
+        if (!ad) return 1;
+        if (!bd) return -1;
+        return bd.localeCompare(ad);
+      }
+      if (sort === 'stars') {
+        const ah = a.dataset.stars !== '';
+        const bh = b.dataset.stars !== '';
+        if (!ah && !bh) return alpha(a, b);
+        if (!ah) return -1; // no-star (commercial) first, alphabetically
+        if (!bh) return 1;
+        return Number(b.dataset.stars) - Number(a.dataset.stars);
+      }
+      return alpha(a, b);
+    }
+
+    function selected(facet: string) {
+      return new Set(boxes.filter((b) => b.dataset.facet === facet && b.checked).map((b) => b.value));
+    }
+
+    // Mirror the live state into the URL query string (shareable / reproducible).
+    function writeUrl() {
+      const p = new URLSearchParams();
+      const q = input.value.trim();
+      if (q) p.set('q', q);
+      for (const key of FACETS) {
+        const vals = [...selected(key)];
+        if (vals.length) p.set(key, vals.join(','));
+      }
+      if (fresh) p.set('updated', String(fresh));
+      if (sort !== 'alpha') p.set('sort', sort);
+      const qs = p.toString();
+      history.replaceState(null, '', location.pathname + (qs ? `?${qs}` : '') + location.hash);
+    }
+
+    // Restore state from the URL on load (without rewriting it).
+    function readUrl() {
+      const p = new URLSearchParams(location.search);
+      input.value = p.get('q') ?? '';
+      for (const key of FACETS) {
+        const vals = new Set((p.get(key) ?? '').split(',').filter(Boolean));
+        boxes.filter((b) => b.dataset.facet === key).forEach((b) => (b.checked = vals.has(b.value)));
+      }
+      const up = Number(p.get('updated') ?? '0');
+      const fb = freshBtns.find((b) => Number(b.dataset.fresh) === up) ?? freshBtns[0];
+      fresh = Number(fb.dataset.fresh);
+      freshLabel.textContent = fb.textContent!.replace('✓', '').trim();
+      freshBtns.forEach((b) => b.setAttribute('aria-current', String(b === fb)));
+      const sortKey = p.get('sort') ?? 'alpha';
+      const sb = sortBtns.find((b) => b.dataset.sort === sortKey) ?? sortBtns[0];
+      sort = sb.dataset.sort!;
+      sortLabel.textContent = sb.textContent!.replace('✓', '').trim();
+      sortBtns.forEach((b) => b.setAttribute('aria-current', String(b === sb)));
+    }
+
+    function apply(write = true) {
+      const q = input.value.trim().toLowerCase();
+      const f = {
+        pricing: selected('pricing'),
+        license: selected('license'),
+        language: selected('language'),
+      };
+      let total = 0;
+      for (const section of sections) {
+        const grid = section.querySelector<HTMLElement>('[data-grid]')!;
+        const cards = Array.from(grid.querySelectorAll<HTMLElement>('[data-tool]'));
+        let visible = 0;
+        for (const card of cards) {
+          const ok =
+            (!q || (card.dataset.search ?? '').includes(q)) &&
+            (!f.pricing.size ||
+              (card.dataset.pricing ?? '').split('|').some((v) => f.pricing.has(v))) &&
+            (!f.license.size || f.license.has(card.dataset.license ?? '')) &&
+            (!f.language.size ||
+              (card.dataset.langs ?? '').split('|').some((v) => f.language.has(v))) &&
+            (!fresh ||
+              card.dataset.updatemonths === '' ||
+              Number(card.dataset.updatemonths) < fresh);
+          card.hidden = !ok;
+          if (ok) visible++;
+        }
+        cards
+          .filter((c) => !c.hidden)
+          .sort(comparator)
+          .forEach((c) => grid.appendChild(c));
+        section.hidden = visible === 0;
+        total += visible;
+      }
+      noResults.hidden = total !== 0;
+
+      // Facet count badges + clear-button visibility.
+      let anyFilter = q.length > 0 || sort !== 'alpha' || fresh !== 0;
+      for (const facet of FACETS) {
+        const n = selected(facet).size;
+        const badge = root!.querySelector<HTMLElement>(`[data-facet-count="${facet}"]`)!;
+        badge.textContent = String(n);
+        badge.hidden = n === 0;
+        if (n > 0) anyFilter = true;
+      }
+      clearBtn.hidden = !anyFilter;
+
+      if (write) writeUrl();
+      syncLinks();
+    }
+
+    input.addEventListener('input', () => apply());
+    boxes.forEach((b) => b.addEventListener('change', () => apply()));
+    sortBtns.forEach((btn) =>
+      btn.addEventListener('click', () => {
+        sort = btn.dataset.sort!;
+        sortLabel.textContent = btn.textContent!.replace('✓', '').trim();
+        sortBtns.forEach((b) => b.setAttribute('aria-current', String(b === btn)));
+        btn.closest('details')?.removeAttribute('open');
+        apply();
+      }),
+    );
+    freshBtns.forEach((btn) =>
+      btn.addEventListener('click', () => {
+        fresh = Number(btn.dataset.fresh);
+        freshLabel.textContent = btn.textContent!.replace('✓', '').trim();
+        freshBtns.forEach((b) => b.setAttribute('aria-current', String(b === btn)));
+        btn.closest('details')?.removeAttribute('open');
+        apply();
+      }),
+    );
+    clearBtn.addEventListener('click', () => {
+      input.value = '';
+      boxes.forEach((b) => (b.checked = false));
+      fresh = 0;
+      freshBtns.forEach((b) => b.setAttribute('aria-current', String(b === freshBtns[0])));
+      freshLabel.textContent = freshBtns[0].textContent!.replace('✓', '').trim();
+      sort = 'alpha';
+      sortBtns.forEach((b) => b.setAttribute('aria-current', String(b === sortBtns[0])));
+      sortLabel.textContent = sortBtns[0].textContent!.replace('✓', '').trim();
+      apply();
+    });
+
+    try {
+      readUrl();
+      apply(false); // restore from URL without rewriting it
+    } finally {
+      // Reveal the now-filtered catalog (always, even if the above throws).
+      document.documentElement.removeAttribute('data-prefilter');
+    }
+  }
+</script>
+
+<script>
+  // Listing density toggle. The choice is saved in localStorage and applied as
+  // [data-view] on <html> (also set pre-paint in BaseLayout to avoid a flash).
+  const group = document.querySelector<HTMLElement>('[data-view-group]');
+  if (group) {
+    const btns = Array.from(group.querySelectorAll<HTMLButtonElement>('[data-view-btn]'));
+    const current = () =>
+      document.documentElement.dataset.view === 'gallery' ? 'gallery' : 'grid';
+    const sync = () =>
+      btns.forEach((b) => b.setAttribute('aria-current', String(b.dataset.viewBtn === current())));
+    btns.forEach((b) =>
+      b.addEventListener('click', () => {
+        const v = b.dataset.viewBtn!;
+        if (v === 'gallery') document.documentElement.dataset.view = 'gallery';
+        else delete document.documentElement.dataset.view;
+        try {
+          localStorage.setItem('aas:view', v);
+        } catch (e) {}
+        sync();
+      }),
+    );
+    sync();
+  }
+</script>