@@ -254,6 +254,56 @@ function entryRowHtml(entry, repo, now) {
 </article>`;
 }
 
+/**
+ * The catalog grouped under category headings. 300 rows in one flat list is
+ * not navigable; headings give the page structure a reader can scan and an
+ * anchor they can link to. app.js reproduces this exact shape on hydrate.
+ *
+ * Grouping is only correct under the default sort. Sorting by verified date
+ * or license across category buckets would be meaningless, so app.js falls
+ * back to a flat list in those cases; the prerender is always the default.
+ */
+function groupedRowsHtml(entries, categories, repo, now) {
+  const order = Object.keys(categories);
+  const seen = new Set(entries.map((e) => e.category));
+  const out = [];
+  for (const cat of order) {
+    if (!seen.has(cat)) continue;
+    const group = entries.filter((e) => e.category === cat);
+    if (!group.length) continue;
+    const label = categories[cat]?.label || cat;
+    out.push(
+      `<h3 class="group-heading" id="group-${esc(cat)}" data-cat="${esc(cat)}">` +
+        `<span class="group-name">${esc(label)}</span>` +
+        `<span class="group-count">${group.length}</span>` +
+        `</h3>`
+    );
+    out.push(...group.map((e) => entryRowHtml(e, repo, now)));
+  }
+  return out.join("\n");
+}
+
+/**
+ * Without JavaScript the chips cannot filter, so the prerender emits them as
+ * jump links to the group headings instead. app.js replaces them with real
+ * filter buttons on hydrate.
+ */
+function categoryChipsHtml(entries, categories) {
+  const counts = new Map();
+  for (const e of entries) counts.set(e.category, (counts.get(e.category) || 0) + 1);
+  const chips = [
+    `<a class="chip" href="#catalog">All <span class="chip-count">${entries.length}</span></a>`,
+  ];
+  for (const [cat, meta] of Object.entries(categories)) {
+    const n = counts.get(cat) || 0;
+    if (!n) continue;
+    chips.push(
+      `<a class="chip" href="#group-${esc(cat)}">${esc(meta.label || cat)} <span class="chip-count">${n}</span></a>`
+    );
+  }
+  return chips.join("");
+}
+
 function starterRowsHtml(featured) {
   return featured
     .map(
@@ -406,9 +456,8 @@ function main() {
   const substitutions = {
     HEAD_META: headMetaHtml(config.site, stats, payload.generatedAt),
     STARTER_ROWS: starterRowsHtml(featured),
-    ENTRY_ROWS: visible
-      .map((e) => entryRowHtml(e, repoUrl, now))
-      .join("\n"),
+    ENTRY_ROWS: groupedRowsHtml(visible, config.categories, repoUrl, now),
+    CATEGORY_CHIPS: categoryChipsHtml(visible, config.categories),
     GUIDE_ROWS: guideRowsHtml(config.guides, repoUrl),
     CATALOG_BLURB: `${stats.total} sources &middot; ${stats.active} active &middot; ${stats.commercialOk} commercial-ok &middot; ${stats.commercialVaries} per-file &middot; ${stats.deprecated} deprecated`,
     RESULT_COUNT: `${visible.length} / ${stats.total}`,
 
@@ -192,6 +192,31 @@
 </article>`;
   }
 
+  /**
+   * Grouping is only meaningful under the default sort with no category
+   * filter. Sorting by verified date or license inside category buckets would
+   * hide the very ordering the reader asked for, so those fall back to a flat
+   * list. The prerendered page is always the grouped default.
+   */
+  function shouldGroup() {
+    return state.sort === "name" && state.category === "all";
+  }
+
+  /**
+   * How many entries each category would yield under the *other* active
+   * filters. Counting with the category filter applied would make every chip
+   * read 0 except the selected one, which tells the reader nothing.
+   */
+  function facetCounts() {
+    const saved = state.category;
+    state.category = "all";
+    const pool = data.entries.filter(matches);
+    state.category = saved;
+    const counts = new Map();
+    for (const e of pool) counts.set(e.category, (counts.get(e.category) || 0) + 1);
+    return { counts, total: pool.length };
+  }
+
   function renderCategoryFilters() {
     const host = $("#category-filters");
     const buttons = [
@@ -204,7 +229,7 @@
     host.innerHTML = buttons
       .map(
         (b) =>
-          `<button type="button" class="chip" data-cat="${escapeHtml(b.id)}" aria-pressed="false">${escapeHtml(b.label)}</button>`
+          `<button type="button" class="chip" data-cat="${escapeHtml(b.id)}" aria-pressed="false">${escapeHtml(b.label)} <span class="chip-count" data-count-for="${escapeHtml(b.id)}"></span></button>`
       )
       .join("");
     host.addEventListener("click", (e) => {
@@ -216,10 +241,15 @@
   }
 
   function syncCategoryChips() {
+    const { counts, total } = facetCounts();
     $$("#category-filters .chip").forEach((chip) => {
-      const on = chip.getAttribute("data-cat") === state.category;
+      const cat = chip.getAttribute("data-cat");
+      const on = cat === state.category;
       chip.classList.toggle("is-active", on);
       chip.setAttribute("aria-pressed", on ? "true" : "false");
+      const slot = chip.querySelector(".chip-count");
+      if (slot) slot.textContent = cat === "all" ? String(total) : String(counts.get(cat) || 0);
+      chip.classList.toggle("is-empty", cat !== "all" && !(counts.get(cat) || 0));
     });
   }
 
@@ -272,10 +302,83 @@
     if (!list.length) {
       grid.innerHTML = "";
       empty.hidden = false;
+      groupHeadings = [];
       return;
     }
     empty.hidden = true;
-    grid.innerHTML = list.map(cardHtml).join("");
+
+    if (!shouldGroup()) {
+      grid.innerHTML = list.map(cardHtml).join("");
+      groupHeadings = [];
+      syncSpy();
+      return;
+    }
+
+    const out = [];
+    for (const cat of Object.keys(categoryLabels)) {
+      const group = list.filter((e) => e.category === cat);
+      if (!group.length) continue;
+      const label = categoryLabels[cat]?.label || cat;
+      out.push(
+        `<h3 class="group-heading" id="group-${escapeHtml(cat)}" data-cat="${escapeHtml(cat)}">` +
+          `<span class="group-name">${escapeHtml(label)}</span>` +
+          `<span class="group-count">${group.length}</span>` +
+          `</h3>`
+      );
+      out.push(...group.map(cardHtml));
+    }
+    grid.innerHTML = out.join("");
+    groupHeadings = $$("#entry-grid .group-heading");
+    syncSpy();
+  }
+
+  /* ------------------------------------------------- scroll position */
+
+  let groupHeadings = [];
+  let currentGroup = null;
+  let ticking = false;
+
+  /**
+   * Marks which category you are currently scrolled into. The chips stay pure
+   * filters; this is a separate, quieter signal, because one control carrying
+   * two meanings is how a filter row stops being readable.
+   */
+  function syncSpy() {
+    const controls = $(".controls");
+    // Anchored jumps (chip links, #entry- permalinks) would otherwise land
+    // underneath the sticky filter bar. Its height varies with wrapping, so
+    // publish the measured value and let CSS scroll-margin use it.
+    if (controls) {
+      document.documentElement.style.setProperty(
+        "--sticky-h",
+        `${Math.round(controls.getBoundingClientRect().height)}px`
+      );
+    }
+    const cutoff = (controls ? controls.getBoundingClientRect().bottom : 0) + 8;
+    let found = null;
+    for (const h of groupHeadings) {
+      if (h.getBoundingClientRect().top <= cutoff) found = h.getAttribute("data-cat");
+      else break;
+    }
+    if (found === currentGroup) return;
+    currentGroup = found;
+    $$("#category-filters .chip").forEach((chip) => {
+      const on = found !== null && chip.getAttribute("data-cat") === found;
+      chip.classList.toggle("is-current", on);
+      if (on) chip.setAttribute("aria-current", "true");
+      else chip.removeAttribute("aria-current");
+    });
+  }
+
+  function onScroll() {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => {
+      ticking = false;
+      syncSpy();
+      const btn = $("#to-top");
+      if (btn) btn.hidden = window.scrollY < 600;
+    });
   }
 
   function apply() {
@@ -451,6 +554,39 @@
       apply();
     });
 
+    const top = $("#to-top");
+    top.addEventListener("click", () => {
+      const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
+      window.scrollTo({ top: 0, behavior: reduce ? "auto" : "smooth" });
+      search.focus();
+    });
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+
+    // "/" focuses search, Escape leaves it. Suppressed whenever the user is
+    // already typing somewhere or the entry dialog has focus.
+    document.addEventListener("keydown", (e) => {
+      const el = document.activeElement;
+      const typing =
+        el &&
+        (el.tagName === "INPUT" ||
+          el.tagName === "TEXTAREA" ||
+          el.tagName === "SELECT" ||
+          el.isContentEditable);
+      if (e.key === "/" && !typing && !$("#entry-dialog").open) {
+        e.preventDefault();
+        search.focus();
+        search.select();
+        return;
+      }
+      if (e.key === "Escape" && el === search && search.value) {
+        search.value = "";
+        state.q = "";
+        apply();
+      }
+    });
+
     $("#repo-link").href = repo;
     $("#footer-repo").href = repo;
   }
 
@@ -90,9 +90,10 @@ <h2 id="catalog-title">Catalog</h2>
               placeholder="Name, license, tag, format…"
               autocomplete="off"
             />
+            <kbd class="search-key" aria-hidden="true">/</kbd>
           </label>
 
-          <div class="filter-row" id="category-filters" role="group" aria-label="Filter by category"></div>
+          <div class="filter-row" id="category-filters" role="group" aria-label="Filter by category"><!--CATEGORY_CHIPS--></div>
 
           <div class="filter-row meta-filters" role="group" aria-label="Filter by status and terms">
             <label class="check">
@@ -168,6 +169,10 @@ <h2 id="guides-title">Guides</h2>
       <p class="footer-stamp"><!--FOOTER_STAMP--></p>
     </footer>
 
+    <button type="button" class="to-top" id="to-top" hidden>
+      <span aria-hidden="true">↑</span> Top
+    </button>
+
     <dialog class="entry-dialog" id="entry-dialog" aria-labelledby="dialog-title">
       <form method="dialog" class="dialog-chrome">
         <button value="close" class="dialog-close" aria-label="Close">Close</button>