@grimoire-rs/indexer 0.4.3 → 0.5.0

package/dist/renderer/astro/components/Catalog.tsx

@@ -1,11 +1,22 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
-// Lucide (ISC) draws the UI; brand marks come from `@mdi/js`, which Lucide
-// deliberately does not carry. No SVG on this site is hand-written.
-import { ArrowBigUp, Check, FolderRoot, Globe, Image, ImageOff } from "lucide-preact";
-import { mdiMicrosoftVisualStudioCode } from "@mdi/js";
-import { BrandMark } from "./BrandMark.js";
-import { withBase } from "../lib/base.js";
-import { lastUpdated, timeAgo, vscodeUrl, type CatalogPackage } from "../lib/catalog.js";
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "preact/hooks";
+// Lucide (ISC) draws the toolbar. The brand marks and kind glyphs moved out
+// with the card and the row that wear them.
+import {
+  ArrowDownWideNarrow,
+  ArrowUpNarrowWide,
+  LayoutGrid,
+  List,
+} from "lucide-preact";
+import { PackageCard } from "./PackageCard.js";
+import { PackageRow } from "./PackageRow.js";
+import { keywordFrequency, selectRailKeywords } from "../lib/keywordRail.js";
+import { lastUpdated, type CatalogPackage } from "../lib/catalog.js";
 
 // Known kinds get stable chip ordering + badge colors; unknown kinds
 // (future schema growth) still render with a neutral badge.
@@ -17,6 +28,33 @@ function kindOrder(kind: string): number {
 }
 
 export type Sort = "name" | "updated" | "rating";
+export type Dir = "asc" | "desc";
+/** Roomy cards, or the same packages as a scannable list. */
+export type View = "cards" | "table";
+
+/**
+ * How many keyword chips the rail shows at once, actives included.
+ *
+ * Everything past it goes behind the overflow menu. The cap is the point:
+ * this catalog's keyword vocabulary is open-ended, and a rail that renders
+ * all of it is a wall of chips nobody reads.
+ */
+const KEYWORD_CHIP_LIMIT = 8;
+
+/**
+ * The direction each field is *worth* reading first in — A→Z for a name,
+ * newest and best-liked first for the two ranked keys.
+ *
+ * Picking a field selects its natural direction; the toggle beside the
+ * combo box reverses that. So "descending" is not a global default a reader
+ * has to correct on every mode, and the arrow always describes what the
+ * order actually is rather than which way a flag is set.
+ */
+export const NATURAL: Record<Sort, Dir> = {
+  name: "asc",
+  updated: "desc",
+  rating: "desc",
+};
 
 type Key = (a: CatalogPackage, b: CatalogPackage) => number;
 
@@ -46,7 +84,8 @@ function updatedAt(p: CatalogPackage): number | null {
  * that is not total is a browse order that reshuffles on rebuild.
  */
 const byName: Key = (a, b) =>
-  a.name.localeCompare(b.name, undefined, { sensitivity: "accent" }) || a.ref.localeCompare(b.ref);
+  a.name.localeCompare(b.name, undefined, { sensitivity: "accent" }) ||
+  a.ref.localeCompare(b.ref);
 
 /**
  * Newest first. No usable date is *unknown*, not epoch 0: dating an undated
@@ -60,7 +99,8 @@ const byUpdated: Key = (a, b) => descending(updatedAt(a), updatedAt(b));
  * a fresh index is all-unrated, and zeroes would leave every one of those
  * rows comparing equal with nothing left to break the tie.
  */
-const byRating: Key = (a, b) => descending(a.rating?.up ?? null, b.rating?.up ?? null);
+const byRating: Key = (a, b) =>
+  descending(a.rating?.up ?? null, b.rating?.up ?? null);
 
 /** Each mode as a chain of keys, most significant first. */
 const CHAINS: Record<Sort, Key[]> = {
@@ -74,10 +114,18 @@ const CHAINS: Record<Sort, Key[]> = {
 // any other row when the toggle brings them back. grim's own browse order
 // (`browse_sort.rs`) has no deprecated key either; keeping this comparator
 // silent on deprecation is what keeps the two in sync.
-export function compare(a: CatalogPackage, b: CatalogPackage, sort: Sort): number {
+export function compare(
+  a: CatalogPackage,
+  b: CatalogPackage,
+  sort: Sort,
+  dir: Dir = NATURAL[sort],
+): number {
   for (const key of CHAINS[sort]) {
     const d = key(a, b);
-    if (d !== 0) return d;
+    // Reversed means reversed all the way down, the ref tiebreak included.
+    // Every chain ends on a unique key, so no two rows compare equal and
+    // negating the whole answer leaves the order just as total as it was.
+    if (d !== 0) return dir === NATURAL[sort] ? d : -d;
   }
   return 0;
 }
@@ -87,11 +135,57 @@ export function compare(a: CatalogPackage, b: CatalogPackage, sort: Sort): numbe
 // is gone on purpose: every icon now comes from one set. `FolderRoot` and
 // `Globe` are the nearest Lucide equivalents and carry the same meaning.
 
+/**
+ * The reader's own preferences, kept out of the URL.
+ *
+ * The split is deliberate and matches grim: `q`, `kind` and `kw` are *what
+ * you are looking at* — a keyword chip on a package page links to
+ * `/?kw=<keyword>`, so that half has to stay shareable — while sort,
+ * direction, deprecated visibility and the cards/table choice are *how you
+ * like the catalog arranged*, the same answer on every visit. grim keeps
+ * `show_deprecated` in its config file for exactly that reason.
+ *
+ * Both accessors swallow: reading `localStorage` throws outright, not
+ * returns null, in a browser set to block site data, and a catalog is not
+ * worth a blank page. A reader who blocks it browses without preferences.
+ */
+const PREF = "grim.catalog.";
+
+function readPref(key: string): string | null {
+  try {
+    return localStorage.getItem(PREF + key);
+  } catch {
+    return null;
+  }
+}
+
+function writePref(key: string, value: string | null): void {
+  try {
+    if (value === null) localStorage.removeItem(PREF + key);
+    else localStorage.setItem(PREF + key, value);
+  } catch {
+    // Nothing to do and nothing to report: preferences are a convenience.
+  }
+}
+
+/**
+ * A comma-joined URL parameter, back into the list it was.
+ *
+ * Empty and absent are the same answer — `?kind=` is a reader who cleared
+ * the filter, not a request for the kind named "". Duplicates collapse so a
+ * hand-edited `?kw=a,a` cannot render the same chip twice.
+ */
+function list(value: string | null): string[] {
+  return [...new Set((value ?? "").split(",").filter(Boolean))];
+}
+
 /** Typing inside one of these means a bare keystroke is text, not a shortcut. */
 function isTyping(el: EventTarget | null): boolean {
   const node = el as HTMLElement | null;
   if (!node) return false;
-  return node.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(node.tagName);
+  return (
+    node.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(node.tagName)
+  );
 }
 
 /**
@@ -100,6 +194,10 @@ function isTyping(el: EventTarget | null): boolean {
  * Measured, not read from CSS: the track list is `auto-fill` with a minimum
  * width, so the count is a layout outcome that depends on the viewport. The
  * first card whose top edge drops below the first row's starts row two.
+ *
+ * The table view needs no branch of its own — its rows stack, so the second
+ * one is already below the first and this measures the 1 that makes every
+ * arrow key move by a single row.
  */
 function columnCount(cards: HTMLElement[]): number {
   if (cards.length < 2) return 1;
@@ -109,125 +207,57 @@ function columnCount(cards: HTMLElement[]): number {
 }
 
 /**
- * The card's 28px logo slot, in its three states.
+ * The same packages as a list, for reading down a column rather than across
+ * a grid.
  *
- * The third one is the reason this is a component rather than inline JSX: a
- * package can declare a `logo` whose file is not actually served — the
- * enrich step failed, the asset was pruned, the path is stale — and the
- * browser's own broken-image glyph is both ugly and says nothing. So a
- * declared-but-unreachable logo degrades to a marked placeholder, which is
- * deliberately *not* the same as the initial-letter tile a package with no
- * logo at all gets: one is a fault worth seeing, the other is normal.
+ * **A row is an anchor, and there is no `<table>`.** Two reasons, and the
+ * first is the load-bearing one: a header row that cannot sort is a header
+ * row that *looks* like it sorts — every reader who has met a data table
+ * clicks it once. Sorting lives in the toolbar, so the table has no headers,
+ * and a headerless table has no column semantics left to justify the element.
+ * What remains is a list of links, which is what this is. A CSS grid with
+ * `subgrid` rows keeps the columns aligned without the markup.
  *
- * The static detail page needs the same treatment but cannot use `onError`,
- * so it opts into the global handler in `Base.astro` instead — keep the two
- * placeholders looking alike.
+ * The anchor is also what makes the whole row clickable, focusable and
+ * middle-clickable for free — no stretched-link overlay, no synthetic Enter
+ * handler. A row carries no controls of its own: the install buttons and the
+ * vote links are what the card exists for, and repeating them per row would
+ * be five columns of icons. The detail page has all of them.
+ *
+ * Columns are fixed, unlike the keyword rail above — deliberately. A column
+ * is a slot the eye tracks down; one that appears and disappears as the
+ * filters change destroys the alignment the table exists to give. The rating
+ * column is the one exception, and it is decided once per index rather than
+ * per filter.
  */
-function CardLogo({ pkg }: { pkg: CatalogPackage }) {
-  const [state, setState] = useState<"loading" | "ready" | "broken">("loading");
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  // The image is server-rendered, so the browser begins fetching it while
-  // parsing the HTML — long before this island hydrates. Two consequences,
-  // and the slot markup below answers both: `onError` can fire before any
-  // listener exists (the placeholder used to appear only sometimes), and a
-  // failed image paints the browser's broken glyph on the way (the flash on
-  // reload). Starting the image hidden means nothing is ever shown until it
-  // is known to be good.
-  //
-  // `complete` says the browser finished, not how it went. `decode()` is
-  // what separates the two: it rejects for a failure and resolves for a good
-  // image — including an SVG with no intrinsic size, where the usual
-  // `naturalWidth === 0` test reports a false failure. Gating on `complete`
-  // means it never starts a fetch, so `loading="lazy"` still holds off
-  // -screen cards.
-  useEffect(() => {
-    setState("loading");
-    const img = imgRef.current;
-    if (!img?.complete) return;
-    let live = true;
-    img.decode().then(
-      () => live && setState("ready"),
-      () => live && setState("broken"),
-    );
-    return () => {
-      live = false;
-    };
-  }, [pkg.logo]);
-
-  if (!pkg.logo) {
-    return (
-      <span
-        class="card-logo card-logo-fallback"
-        aria-hidden="true"
-        style={{ background: `var(--grim-color-kind-${pkg.kind}, var(--grim-color-muted))` }}
-      >
-        {pkg.name[0]?.toUpperCase()}
-      </span>
-    );
-  }
-
-  return (
-    <span
-      class="card-logo logo-slot"
-      data-state={state}
-      role={state === "broken" ? "img" : undefined}
-      aria-label={state === "broken" ? "Logo image unavailable" : undefined}
-      title={state === "broken" ? "Logo image unavailable" : undefined}
-    >
-      {state === "broken" ? (
-        <ImageOff class="logo-mark" aria-hidden="true" />
-      ) : (
-        <Image class="logo-mark" aria-hidden="true" />
-      )}
-      <img
-        ref={imgRef}
-        src={withBase(pkg.logo)}
-        alt=""
-        loading="lazy"
-        onLoad={() => setState("ready")}
-        onError={() => setState("broken")}
-      />
-    </span>
-  );
-}
-
-function CopyButton({
-  command,
-  variant = "default",
-  name,
+function PackageTable({
+  packages,
+  hasRatings,
+  onKeyDown,
+  rootRef,
 }: {
-  command: string;
-  variant?: "default" | "global";
-  /** What the copy toast calls this, e.g. `"global install command"`. */
-  name?: string;
+  packages: CatalogPackage[];
+  hasRatings: boolean;
+  onKeyDown: (event: KeyboardEvent) => void;
+  rootRef: { current: HTMLElement | null };
 }) {
-  const [copied, setCopied] = useState(false);
-  const copy = () => {
-    navigator.clipboard.writeText(command).then(() => {
-      setCopied(true);
-      // The toast lives in Base.astro's inline script, outside this island —
-      // an event is how a hydrated component reaches it without either side
-      // importing the other.
-      document.dispatchEvent(
-        new CustomEvent("grimoire:copied", { detail: { name, value: command } }),
-      );
-      setTimeout(() => setCopied(false), 1500);
-    });
-  };
   return (
-    <button
-      type="button"
-      class={copied ? "copy copied" : "copy"}
-      title={command}
-      aria-label={`Copy: ${command}`}
-      // Out of the Tab sequence: the card is the stop, and the same command
-      // is copyable from the detail page Enter opens.
-      tabIndex={-1}
-      onClick={copy}
+    <div
+      class={hasRatings ? "table rated" : "table"}
+      data-slot="package-table"
+      ref={(el) => {
+        rootRef.current = el;
+      }}
     >
-      {copied ? <Check size={14} /> : variant === "global" ? <Globe size={14} /> : <FolderRoot size={14} />}
-    </button>
+      {packages.map((p) => (
+        <PackageRow
+          key={`${p.namespace}/${p.name}`}
+          pkg={p}
+          hasRatings={hasRatings}
+          onKeyDown={onKeyDown}
+        />
+      ))}
+    </div>
   );
 }
 
@@ -256,22 +286,146 @@ export default function Catalog({
   // Whether the URL's query has been applied. Gates the reveal below, so the
   // catalog is never unhidden while it still shows the unfiltered list.
   const [seeded, setSeeded] = useState(false);
-  const [kind, setKind] = useState<string | null>(null);
+  // Kinds combine with OR, keywords with AND, and the two groups with each
+  // other. That is not an inconsistency, it follows from the data: a package
+  // has exactly one kind, so requiring both of two kinds always yields
+  // nothing, while it carries many keywords, so requiring both of two is the
+  // only reading under which a second click narrows. A facet whose second
+  // click *widens* the result set reads as broken.
+  const [kinds, setKinds] = useState<string[]>([]);
+  const [keywords, setKeywords] = useState<string[]>([]);
   const [sort, setSort] = useState<Sort>("name");
+  // Direction, not "reversed": what the arrow draws is the order itself.
+  const [dir, setDir] = useState<Dir>(NATURAL.name);
   // Deprecated packages are hidden until asked for: a retired package is
   // noise for someone browsing what to install, and the publisher already
   // said as much by deprecating it.
   const [showDeprecated, setShowDeprecated] = useState(false);
+  const [view, setView] = useState<View>("cards");
+  // Local to the overflow menu and deliberately not shareable: it narrows
+  // the list of keywords, not the catalog.
+  const [keywordFilter, setKeywordFilter] = useState("");
 
   const searchRef = useRef<HTMLInputElement>(null);
-  const gridRef = useRef<HTMLUListElement>(null);
+  const gridRef = useRef<HTMLElement>(null);
   const controlsRef = useRef<HTMLDivElement>(null);
 
-  const cardsOf = () => [...(gridRef.current?.querySelectorAll<HTMLElement>("li.card") ?? [])];
+  // Both views, one selector: a table row is the Tab stop its card is, so
+  // every keyboard path below — the search hatch, ArrowDown out of the
+  // chips, Escape's blur — works in either without knowing which is up.
+  const cardsOf = () => [
+    ...(gridRef.current?.querySelectorAll<HTMLElement>("li.card, a.row") ?? []),
+  ];
+  // Clipped keyword chips are excluded: they are drawn as nothing, so an
+  // arrow key that landed on one would move focus somewhere the reader
+  // cannot see it.
   const chipsOf = () => [
-    ...(controlsRef.current?.querySelectorAll<HTMLElement>("button.chip") ?? []),
+    ...(controlsRef.current?.querySelectorAll<HTMLElement>(
+      'button.chip:not([aria-hidden="true"])',
+    ) ?? []),
   ];
 
+  const railRefs = useRef(new Map<string, HTMLElement>());
+  const railRects = useRef(new Map<string, DOMRect>());
+  const railRef = useRef<HTMLDivElement>(null);
+
+  /**
+   * How many keyword chips actually fit on the row, measured.
+   *
+   * Not a constant, because the answer is a layout outcome: the rail is the
+   * one flexible child of the filter row, so its width is whatever the kinds,
+   * the overflow menu and the deprecated toggle left, and the chips are as
+   * wide as the words publishers wrote. `KEYWORD_CHIP_LIMIT` bounds how many
+   * are *offered*; this is how many are shown.
+   *
+   * The rule it enforces: the rail never wraps and never scrolls. A second
+   * row makes the toolbar a different height on every filter click, and a
+   * scrollbar hides the chips behind a gesture nobody looks for — it also
+   * pushed the overflow menu off the end of the row entirely.
+   *
+   * Every chip stays in the flow whatever this says; the ones past it are
+   * drawn as nothing (see `.chip.kw.clipped`). Taking them out of the flow
+   * would free the width that excluded them, which is a measurement that
+   * disagrees with itself on every other frame.
+   */
+  const [railFit, setRailFit] = useState(KEYWORD_CHIP_LIMIT);
+
+  useLayoutEffect(() => {
+    const rail = railRef.current;
+    if (!rail) return;
+    const measure = () => {
+      const edge = rail.getBoundingClientRect().right;
+      let fits = 0;
+      for (const chip of rail.children) {
+        // Half a pixel of slack: a fractional layout can leave a chip's right
+        // edge a rounding error past a boundary it visually sits inside.
+        if (chip.getBoundingClientRect().right > edge + 0.5) break;
+        fits += 1;
+      }
+      // At least one, always. A rail too narrow for its shortest chip should
+      // show that chip clipped rather than render an empty group beside a
+      // divider that then divides nothing.
+      setRailFit(Math.max(1, fits));
+    };
+    measure();
+    // Guarded rather than assumed: this effect also runs under the test
+    // renderer, whose DOM has no `ResizeObserver` — and a missing one costs
+    // only re-measurement on viewport resize, which is not worth throwing
+    // during a render over.
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(rail);
+    return () => observer.disconnect();
+    // Re-measured on every commit that changes which chips are up, since the
+    // observer only fires when the rail's own box changes and a rescore can
+    // swap a short word for a long one at the same width.
+  });
+
+  /**
+   * FLIP for the keyword rail: chips slide to their new places instead of
+   * teleporting.
+   *
+   * The rail is rescored against the current result set, so it reorders on
+   * every click — the chip just picked moves to the front and the rest flow
+   * around it. Animating that is not decoration: a rail whose contents change
+   * between two frames reads as having been *replaced*, and a reader who
+   * cannot see that a chip moved has no reason to believe it is the same one.
+   *
+   * First (the map of rects kept from the last commit), Last (measured now),
+   * Invert (an inline translate back to where the chip was), Play (dropped on
+   * the next frame, so the stylesheet's transition carries it home). Measure
+   * every chip before transforming any: `translate` composites and does not
+   * reflow, but reading a rect after writing a style on a sibling is the
+   * shape that makes a layout thrash, and this runs per keystroke.
+   */
+  useLayoutEffect(() => {
+    const previous = railRects.current;
+    const current = new Map<string, DOMRect>();
+    const moved: { el: HTMLElement; dx: number; dy: number }[] = [];
+    for (const [keyword, el] of railRefs.current) {
+      const rect = el.getBoundingClientRect();
+      current.set(keyword, rect);
+      const was = previous.get(keyword);
+      if (!was) continue;
+      const dx = was.left - rect.left;
+      const dy = was.top - rect.top;
+      if (dx !== 0 || dy !== 0) moved.push({ el, dx, dy });
+    }
+    railRects.current = current;
+    if (moved.length === 0) return;
+    for (const { el, dx, dy } of moved) {
+      el.style.transition = "none";
+      el.style.translate = `${dx}px ${dy}px`;
+    }
+    const frame = requestAnimationFrame(() => {
+      for (const { el } of moved) {
+        el.style.transition = "";
+        el.style.translate = "";
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  });
+
   /** Move focus `delta` cards along, clamping at both ends rather than wrapping. */
   const focusCard = (from: number, delta: number) => {
     const cards = cardsOf();
@@ -297,19 +451,95 @@ export default function Catalog({
     input.select();
     input.scrollIntoView({
       block: "start",
-      behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
+      behavior: matchMedia("(prefers-reduced-motion: reduce)").matches
+        ? "auto"
+        : "smooth",
     });
   };
 
-  // Apply `?q=…`, now that hydration has matched the server's markup and
-  // Preact owns the tree. A layout effect rather than a plain one: the
+  /**
+   * Put the reader's view into state — the query from the URL, the
+   * preferences from storage. Neither half was there before, and the missing
+   * preference half is what made a deprecated package unreachable by Back:
+   * you turned the toggle on, opened the package, came back, and the
+   * remounted catalog knew nothing about it, so the card you had just been
+   * looking at was hidden again.
+   *
+   * Unknown values are dropped rather than trusted at both doors: `kind`
+   * reaches a class name, `kw` reaches a chip that stays on screen until it
+   * is clicked off, and `sort` selects a comparator, so none of them follows
+   * a hand-typed URL or a hand-edited storage entry anywhere the controls
+   * cannot go. `kw` is checked against the catalog's own vocabulary rather
+   * than a fixed list, since keywords are whatever publishers wrote.
+   */
+  const applyView = () => {
+    const params = new URLSearchParams(location.search);
+    const s = readPref("sort");
+    const d = readPref("dir");
+    const v = readPref("view");
+    const field: Sort = s === "updated" || s === "rating" ? s : "name";
+    const published = new Set(packages.flatMap((p) => p.keywords ?? []));
+    setQuery(params.get("q") ?? "");
+    setKinds(list(params.get("kind")).filter((k) => KNOWN_KINDS.includes(k)));
+    setKeywords(list(params.get("kw")).filter((k) => published.has(k)));
+    setSort(field);
+    setDir(d === "asc" || d === "desc" ? d : NATURAL[field]);
+    // A flag: stored at all means on.
+    setShowDeprecated(readPref("deprecated") !== null);
+    setView(v === "table" ? "table" : "cards");
+  };
+
+  // Apply the URL's view, now that hydration has matched the server's markup
+  // and Preact owns the tree. A layout effect rather than a plain one: the
   // resulting render must land before the browser paints, or a `?q=` visitor
   // sees the whole catalog flash past on the way to their results.
   useLayoutEffect(() => {
-    setQuery(new URLSearchParams(location.search).get("q") ?? "");
+    applyView();
     setSeeded(true);
   }, []);
 
+  // Back and Forward within the catalog — a keyword chip on a package page
+  // links to `/?q=…`, so the reader can land here more than once without a
+  // reload, and `popstate` is the only notice of it.
+  useEffect(() => {
+    const onPop = () => applyView();
+    addEventListener("popstate", onPop);
+    return () => removeEventListener("popstate", onPop);
+  }, []);
+
+  // The query, into the URL — so it can be shared, and so Back lands on the
+  // search the reader left. `replaceState`, not `pushState`: a history entry
+  // per keystroke would make Back mean "undo one letter" rather than "the
+  // page I came from". Gated on `seeded`, since writing before the URL has
+  // been read would erase a deep link on arrival.
+  useEffect(() => {
+    if (!seeded) return;
+    const params = new URLSearchParams(location.search);
+    const set = (key: string, value: string | null) =>
+      value === null ? params.delete(key) : params.set(key, value);
+    set("q", query || null);
+    set("kind", kinds.length > 0 ? kinds.join(",") : null);
+    set("kw", keywords.length > 0 ? keywords.join(",") : null);
+    const search = params.toString();
+    const next = `${location.pathname}${search ? `?${search}` : ""}${location.hash}`;
+    if (next !== `${location.pathname}${location.search}${location.hash}`) {
+      history.replaceState(history.state, "", next);
+    }
+    // `keywords` is compared by identity, which is what we want: the array is
+    // replaced on every toggle and never mutated in place.
+  }, [seeded, query, kinds, keywords]);
+
+  // The preferences, into storage — so the next visit opens the way this one
+  // ended. Each is stored only when it is not the default, so a reader who
+  // never touched a control leaves nothing behind.
+  useEffect(() => {
+    if (!seeded) return;
+    writePref("sort", sort === "name" ? null : sort);
+    writePref("dir", dir === NATURAL[sort] ? null : dir);
+    writePref("deprecated", showDeprecated ? "1" : null);
+    writePref("view", view === "cards" ? null : view);
+  }, [seeded, sort, dir, showDeprecated, view]);
+
   // Base.astro hides the catalog before first paint when the URL carries a
   // query. Reveal it only once the filtered render is in the DOM — keyed on
   // `seeded`, so the unfiltered first render is never the one revealed.
@@ -328,7 +558,8 @@ export default function Catalog({
   // shares. Bound on the document so it works wherever the reader is.
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey)
+        return;
       if (isTyping(event.target)) return;
       event.preventDefault();
       focusSearch();
@@ -360,27 +591,44 @@ export default function Catalog({
       const active = document.activeElement;
       // Also true for a control *inside* a card, which is still the card
       // being selected as far as the reader is concerned.
-      const card = active instanceof HTMLElement ? active.closest("li.card") : null;
-      if (!query && kind === null && !card) return; // nothing selected: not our key
+      const card =
+        active instanceof HTMLElement ? active.closest("li.card, a.row") : null;
+      // Nothing selected: not our key.
+      if (!query && kinds.length === 0 && keywords.length === 0 && !card)
+        return;
       event.preventDefault();
       setQuery("");
-      setKind(null);
+      setKinds([]);
+      setKeywords([]);
       if (card) (active as HTMLElement).blur();
     };
     document.addEventListener("keydown", onEscape);
     return () => document.removeEventListener("keydown", onEscape);
-  }, [query, kind]);
+  }, [query, kinds, keywords]);
+
+  /** Both facets toggle the same way; only the relation between values differs. */
+  const toggle =
+    (set: (next: (was: string[]) => string[]) => void) => (value: string) =>
+      set((was) =>
+        was.includes(value) ? was.filter((v) => v !== value) : [...was, value],
+      );
+  const toggleKind = toggle(setKinds);
+  // Appends rather than inserts, so the pinned chips below stay in the order
+  // they were picked — the rail reorders underneath them, the actives do not.
+  const toggleKeyword = toggle(setKeywords);
 
   /**
-   * The filter and sort chips are not Tab stops — Tab is reserved for
-   * crossing the catalog, so it runs search → card → card. The chips sit in
-   * the row above the grid, so they are reached the way that row is:
-   * ArrowUp out of the top card row, ArrowDown back into it.
+   * Arrow keys move *across* a rail the reader is already standing in. They
+   * are not Tab's replacement, and this is the correction of a real defect:
+   * the chips used to carry `tabIndex={-1}` whenever the grid had anything
+   * in it, which left filtering reachable by pointer and arrow key only.
+   * That is a WCAG 2.1.1 (A) failure — every control has to be operable from
+   * the keyboard through the ordinary sequence, and an undocumented arrow
+   * convention is not that sequence. The sibling `@ocx-sh/catalog` renderer
+   * shipped the same shortcut and reverted it for the same reason.
    *
-   * The one case that would strand them is an empty result set, where there
-   * is no card to arrow up from — so with nothing shown they rejoin the Tab
-   * order (see `chipTabIndex` below), which is also exactly when a reader
-   * needs them most.
+   * So the chips are ordinary Tab stops now, and ArrowUp/ArrowDown remain as
+   * the faster way to cross a long rail or drop back into the grid.
    */
   const onChipKeyDown = (event: KeyboardEvent) => {
     const chips = chipsOf();
@@ -410,7 +658,35 @@ export default function Catalog({
     if (event.key === "ArrowDown") {
       event.preventDefault();
       cardsOf()[0]?.focus();
-    } else if (event.key === "Escape" && !query && kind === null) {
+    } else if (
+      event.key === "Tab" &&
+      !event.shiftKey &&
+      !event.metaKey &&
+      !event.ctrlKey &&
+      !event.altKey
+    ) {
+      // The hatch. Everything between the field and the grid — sort, the
+      // view toggle, every chip — sits after it in the DOM and is a real Tab
+      // stop again, so plain Tab would walk the whole toolbar before
+      // reaching a single package. Forward Tab skips to the results; the
+      // toolbar stays reachable by Shift+Tab back out of the grid.
+      //
+      // Reordering the DOM instead would have put focus order at odds with
+      // visual order, which is the worse defect of the two.
+      //
+      // With nothing to jump to — an empty result set — Tab is left alone
+      // rather than swallowed: trapping focus in the field is worse than the
+      // walk it was meant to save.
+      const first = cardsOf()[0];
+      if (!first) return;
+      event.preventDefault();
+      first.focus();
+    } else if (
+      event.key === "Escape" &&
+      !query &&
+      kinds.length === 0 &&
+      keywords.length === 0
+    ) {
       // Clearing is the document handler's job; this is only the second
       // press, once there is nothing left to clear — so Escape leaves the
       // field rather than being a dead key.
@@ -457,6 +733,10 @@ export default function Catalog({
         // Only when the card itself holds focus: an inner control reached by
         // mouse must keep its own Space/Enter behaviour.
         if (event.target !== card) return;
+        // A table row *is* an anchor, so Enter is the browser's to handle —
+        // swallowing it here would break activation rather than provide it.
+        // Only the card needs its title link clicked on its behalf.
+        if (card instanceof HTMLAnchorElement) return;
         event.preventDefault();
         card.querySelector<HTMLAnchorElement>("h2 a")?.click();
         return;
@@ -473,20 +753,26 @@ export default function Catalog({
     [packages, showDeprecated],
   );
 
-  const kinds = useMemo(() => {
-    const counts = new Map<string, number>();
-    for (const p of counted) counts.set(p.kind, (counts.get(p.kind) ?? 0) + 1);
-    return [...counts.entries()].sort(
-      (a, b) => kindOrder(a[0]) - kindOrder(b[0]) || a[0].localeCompare(b[0]),
+  // Which kinds this catalog publishes, in chip order. No counts on the
+  // chips: they cost every chip the width of a number, which is width the
+  // keyword rail beside them needs more, and the meta row already states how
+  // many packages the filters left. A per-chip count is also the harder one
+  // to read honestly — kinds are an OR group, so a count taken after the
+  // filter says "3" about a chip that is about to reveal thirty.
+  const kindNames = useMemo(() => {
+    const seen = new Set(counted.map((p) => p.kind));
+    return [...seen].sort(
+      (a, b) => kindOrder(a) - kindOrder(b) || a.localeCompare(b),
     );
   }, [counted]);
 
   const q = query.trim().toLowerCase();
-  // Query and kind first, deprecation last — so the toggle can report how
+  // Query and facets first, deprecation last — so the toggle can report how
   // many entries *it alone* is holding back, rather than a catalog-wide
   // number that has nothing to do with what is on screen.
   const matching = packages.filter((p) => {
-    if (kind && p.kind !== kind) return false;
+    if (kinds.length > 0 && !kinds.includes(p.kind)) return false;
+    if (!keywords.every((kw) => p.keywords?.includes(kw))) return false;
     if (!q) return true;
     return [
       p.name,
@@ -498,8 +784,54 @@ export default function Catalog({
       (p.keywords ?? []).join(" "),
     ].some((field) => field.toLowerCase().includes(q));
   });
-  const shown = (showDeprecated ? matching : matching.filter((p) => !p.deprecated)).sort((a, b) =>
-    compare(a, b, sort),
+  const shown = (
+    showDeprecated ? matching : matching.filter((p) => !p.deprecated)
+  ).sort((a, b) => compare(a, b, sort, dir));
+
+  /**
+   * The keyword rail, over what is on screen rather than over the catalog.
+   *
+   * Two decisions, both borrowed from `@ocx-sh/catalog` and both load-bearing:
+   *
+   * Active keywords are **pinned**, first and in the order they were clicked,
+   * and never scored. A filter that scrolls out of the rail is a filter the
+   * reader cannot lift. Their count is `shown.length` by construction — under
+   * AND, every surviving package carries every active keyword.
+   *
+   * The rest are picked by splitting power over `shown`, not by frequency
+   * over `packages`. A rail scored against the whole catalog keeps offering
+   * keywords no surviving package carries, and under AND that is most of
+   * them — every such chip is one click to an empty grid.
+   *
+   * The cost, accepted: the rail's contents move as the reader filters, which
+   * is what the FLIP effect above animates. The set changing invisibly is
+   * what would read as broken.
+   */
+  const pinned = keywords.map((keyword) => ({
+    keyword,
+    count: shown.length,
+  }));
+  const rail = selectRailKeywords(shown, KEYWORD_CHIP_LIMIT)
+    // `selectRailKeywords` scores the actives like any other keyword, so
+    // over-request and drop them rather than spend rail slots twice.
+    .filter((k) => !keywords.includes(k.keyword))
+    .slice(0, Math.max(0, KEYWORD_CHIP_LIMIT - pinned.length));
+  const visibleKeywords = [...pinned, ...rail];
+  // What the menu has to carry: everything the rail had no slot for, plus
+  // everything it has a slot for but no ROOM for. The second half is why the
+  // menu is built from `railFit` rather than from `KEYWORD_CHIP_LIMIT` — a
+  // chip clipped at the rail's edge is one the reader cannot reach anywhere
+  // else, and a "+N more" that does not count it is lying about where it is.
+  const clippedKeywords = visibleKeywords.slice(railFit).map((k) => k.keyword);
+  const menuKeywords = keywordFrequency(shown).filter(
+    (k) =>
+      clippedKeywords.includes(k.keyword) ||
+      !visibleKeywords.some((v) => v.keyword === k.keyword),
+  );
+  // Plain substring, not a fuzzy match: this searches a list the reader is
+  // looking at, and every entry in it is one short known word.
+  const menuShown = menuKeywords.filter((k) =>
+    k.keyword.toLowerCase().includes(keywordFilter.trim().toLowerCase()),
   );
 
   // A catalog with nothing deprecated gets no toggle — a control that can
@@ -508,9 +840,6 @@ export default function Catalog({
   const hasDeprecated = packages.some((p) => p.deprecated);
   const hasRatings = packages.some((p) => p.rating);
 
-  // Chips leave the Tab order only while there is a grid to arrow up from.
-  const chipTabIndex = shown.length === 0 ? 0 : -1;
-
   return (
     <section class="catalog" data-slot="catalog">
       <div class="controls" data-slot="catalog-toolbar" ref={controlsRef}>
@@ -518,7 +847,7 @@ export default function Catalog({
           <input
             ref={searchRef}
             type="search"
-            placeholder={`Search ${counted.length} packages…`}
+            placeholder="Search packages — name, keyword, description…"
             value={query}
             onInput={(e) => setQuery((e.target as HTMLInputElement).value)}
             onKeyDown={onSearchKeyDown}
@@ -528,219 +857,297 @@ export default function Catalog({
           {/* Decorative: the shortcut is announced by aria-keyshortcuts, so
               repeating it here would be read twice. CSS hides it as soon as
               the field is focused or holds a query. */}
-          <kbd class="search-hint" aria-hidden="true">/</kbd>
+          <kbd class="search-hint" aria-hidden="true">
+            /
+          </kbd>
         </div>
-        <div class="chips" role="group" aria-label="Sort by">
-          <button
-            type="button"
-            class={sort === "name" ? "chip active" : "chip"}
-            data-slot="filter-chip"
-            tabIndex={chipTabIndex}
-            onKeyDown={onChipKeyDown}
-            onClick={() => setSort("name")}
-          >
-            name
-          </button>
-          <button
-            type="button"
-            class={sort === "updated" ? "chip active" : "chip"}
-            data-slot="filter-chip"
-            tabIndex={chipTabIndex}
-            onKeyDown={onChipKeyDown}
-            onClick={() => setSort("updated")}
+        {/* One row, three groups, in the order they narrow: what sort of
+            thing, then what it is about, then what the catalog is
+            withholding. Only the keyword group flexes and scrolls, so a
+            narrow viewport shrinks IT rather than dropping the deprecated
+            toggle onto a second line — no chip can shrink below its own
+            longest word, and the rail's chip count is a constant, not a
+            viewport reading. */}
+        <div class="filter-row">
+          <div
+            class="chips kind-chips"
+            role="group"
+            aria-label="Filter by kind"
           >
-            updated
-          </button>
-          {hasRatings && (
+            {/* "all" is the empty selection rendered as a chip, not a sixth
+                kind — so it is active exactly when nothing else is, and
+                clicking it clears rather than selects. */}
             <button
               type="button"
-              class={sort === "rating" ? "chip active" : "chip"}
+              class={kinds.length === 0 ? "chip active" : "chip"}
               data-slot="filter-chip"
-              tabIndex={chipTabIndex}
+              aria-pressed={kinds.length === 0}
               onKeyDown={onChipKeyDown}
-              onClick={() => setSort("rating")}
+              onClick={() => setKinds([])}
             >
-              rating
+              all
+            </button>
+            {kindNames.map((k) => (
+              <button
+                key={k}
+                type="button"
+                class={
+                  kinds.includes(k) ? `chip active kind-${k}` : `chip kind-${k}`
+                }
+                data-slot="filter-chip"
+                aria-pressed={kinds.includes(k)}
+                onKeyDown={onChipKeyDown}
+                onClick={() => toggleKind(k)}
+              >
+                {k}
+              </button>
+            ))}
+          </div>
+          {/* Divides "what sort of thing" from "about what" — two
+              questions sharing a row. Decorative: each group carries its own
+              aria-label, so this is drawn, not announced. */}
+          {visibleKeywords.length > 0 && (
+            <>
+              <span class="filter-divider" aria-hidden="true" />
+              <div
+                class="chips kw-rail"
+                role="group"
+                aria-label="Filter by keyword"
+                ref={railRef}
+              >
+                {visibleKeywords.map(({ keyword }, i) => {
+                  // Past the measured fit: still laid out, so the measurement
+                  // that decided this stays true on the next pass, but drawn
+                  // as nothing and out of reach. Removing it from the flow
+                  // instead would free the width that excluded it, which is
+                  // the oscillation this shape exists to avoid.
+                  const clipped = i >= railFit;
+                  return (
+                    <button
+                      key={keyword}
+                      ref={(el) => {
+                        // The FLIP effect measures whatever is in this map, so
+                        // a chip that leaves has to leave the map with it —
+                        // Preact calls back with null on unmount for that.
+                        if (el)
+                          railRefs.current.set(keyword, el as HTMLElement);
+                        else railRefs.current.delete(keyword);
+                      }}
+                      type="button"
+                      class={[
+                        "chip kw",
+                        keywords.includes(keyword) ? "active" : "",
+                        clipped ? "clipped" : "",
+                      ]
+                        .filter(Boolean)
+                        .join(" ")}
+                      data-slot="filter-chip"
+                      aria-pressed={keywords.includes(keyword)}
+                      aria-hidden={clipped ? "true" : undefined}
+                      tabIndex={clipped ? -1 : undefined}
+                      onKeyDown={onChipKeyDown}
+                      onClick={() => toggleKeyword(keyword)}
+                    >
+                      {keyword}
+                    </button>
+                  );
+                })}
+              </div>
+            </>
+          )}
+          {menuKeywords.length > 0 && (
+            // Everything the rail had no room for, behind a search box.
+            // Not an "expand" that dumps the remaining chips inline: a
+            // catalog's keyword vocabulary is open-ended, and a few hundred
+            // chips at once is a wall, not a control.
+            //
+            // A `<details>` for the same reason the platform picker and the
+            // version menus are: it opens, closes and takes Escape on its
+            // own, with no popover library and no script.
+            <details class="kw-menu">
+              <summary class="chip" data-slot="filter-chip">
+                +{menuKeywords.length} more
+              </summary>
+              <div class="kw-menu-panel">
+                <input
+                  type="text"
+                  class="kw-menu-search"
+                  placeholder="Filter keywords…"
+                  aria-label="Filter keywords"
+                  value={keywordFilter}
+                  onInput={(e) =>
+                    setKeywordFilter((e.target as HTMLInputElement).value)
+                  }
+                />
+                <div class="kw-menu-list">
+                  {menuShown.map(({ keyword, count }) => (
+                    <button
+                      key={keyword}
+                      type="button"
+                      class="kw-menu-item"
+                      onClick={() => toggleKeyword(keyword)}
+                    >
+                      <span>{keyword}</span>
+                      <small>{count}</small>
+                    </button>
+                  ))}
+                  {menuShown.length === 0 && (
+                    <p class="kw-menu-empty">No keyword matches.</p>
+                  )}
+                </div>
+              </div>
+            </details>
+          )}
+          {hasDeprecated && (
+            // A toggle, not a filter: `aria-pressed` rather than the `active`
+            // class alone, so it is announced as on/off instead of selected.
+            //
+            // No count, unlike the kind chips. Theirs is a fixed property of
+            // the catalog; this one would be the number currently hidden, which
+            // is zero once the toggle is on — so it vanished exactly when
+            // pressed and the chip changed width under the pointer.
+            <button
+              type="button"
+              class={
+                showDeprecated
+                  ? "chip deprecated-toggle active"
+                  : "chip deprecated-toggle"
+              }
+              aria-pressed={showDeprecated}
+              title={
+                showDeprecated
+                  ? "Hide deprecated packages"
+                  : "Show deprecated packages"
+              }
+              onKeyDown={onChipKeyDown}
+              onClick={() => setShowDeprecated((on) => !on)}
+            >
+              deprecated
             </button>
           )}
         </div>
-        {/* Divides sort from filter — two different questions sharing a row.
-            Decorative only: each group already carries its own aria-label,
-            so this is hidden rather than announced. */}
-        <span class="chip-sep" aria-hidden="true"></span>
-        <div class="chips" role="group" aria-label="Filter by kind">
-          <button
-            type="button"
-            class={kind === null ? "chip active" : "chip"}
-            data-slot="filter-chip"
-            tabIndex={chipTabIndex}
-            onKeyDown={onChipKeyDown}
-            onClick={() => setKind(null)}
-          >
-            all <small>{counted.length}</small>
-          </button>
-          {kinds.map(([k, count]) => (
+        {/* The bottom line of the toolbar: what the filters above left, and
+            the three controls that arrange it. The count leads because it is
+            the answer to everything above it; the controls are pushed to the
+            far end because they are not. */}
+        <div class="meta-row">
+          {/* `role="status"` on the count alone. It re-announces "N of M
+              packages" as the filters change; putting it on the grid would
+              read the whole result list out on every keystroke. */}
+          <p class="result-count" role="status" aria-atomic="true">
+            {shown.length === counted.length
+              ? `${counted.length} packages`
+              : `${shown.length} of ${counted.length} packages`}
+          </p>
+          {/* Held at the far end, away from the chips: choosing an order is
+              not filtering. Both halves take an ordinary tab stop; a select
+              owns ArrowLeft/Right for its options, so neither can join the
+              chips' roving arrow ring. */}
+          <div class="sort-group" role="group" aria-label="Sort by">
+            {/* Left, because that is the order the pair reads in: "descending,
+                by rating". The bars-and-arrow glyph draws the order itself —
+                tall-to-short under a down arrow — rather than labelling a flag,
+                so it stays right whichever field is selected. */}
             <button
-              key={k}
               type="button"
-              class={kind === k ? `chip active kind-${k}` : `chip kind-${k}`}
+              class="sort-dir"
               data-slot="filter-chip"
-              tabIndex={chipTabIndex}
-              onKeyDown={onChipKeyDown}
-              onClick={() => setKind(kind === k ? null : k)}
+              title={
+                dir === "asc"
+                  ? "Ascending — click for descending"
+                  : "Descending — click for ascending"
+              }
+              aria-label={
+                dir === "asc"
+                  ? "Sorted ascending; sort descending"
+                  : "Sorted descending; sort ascending"
+              }
+              onClick={() => setDir((d) => (d === "asc" ? "desc" : "asc"))}
             >
-              {k} <small>{count}</small>
+              {dir === "asc" ? (
+                <ArrowUpNarrowWide size={15} aria-hidden="true" />
+              ) : (
+                <ArrowDownWideNarrow size={15} aria-hidden="true" />
+              )}
             </button>
-          ))}
+            <select
+              class="sort-field"
+              data-slot="filter-chip"
+              aria-label="Sort by"
+              value={sort}
+              onChange={(event) => {
+                const next = (event.currentTarget as HTMLSelectElement)
+                  .value as Sort;
+                setSort(next);
+                // Picking a field takes that field's own direction. Carrying
+                // the previous one over lands the reader on "oldest first"
+                // because they had asked for Z→A a moment ago.
+                setDir(NATURAL[next]);
+              }}
+            >
+              <option value="name">name</option>
+              <option value="updated">updated</option>
+              {hasRatings && <option value="rating">rating</option>}
+            </select>
+          </div>
+          {/* Beside sort, because it answers the same kind of question — how
+              the catalog is arranged, not which of it is shown. Two buttons
+              rather than one that toggles: a single button has to be labelled
+              with either the state or the action, and whichever it picks reads
+              as the other half the time. `aria-pressed` on both says which is
+              current without either label lying. */}
+          <div class="view-toggle" role="group" aria-label="Catalog view">
+            <button
+              type="button"
+              class={view === "cards" ? "view-pick active" : "view-pick"}
+              data-slot="filter-chip"
+              aria-pressed={view === "cards"}
+              title="Cards"
+              aria-label="Show packages as cards"
+              onClick={() => setView("cards")}
+            >
+              <LayoutGrid size={15} aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class={view === "table" ? "view-pick active" : "view-pick"}
+              data-slot="filter-chip"
+              aria-pressed={view === "table"}
+              title="List"
+              aria-label="Show packages as a list"
+              onClick={() => setView("table")}
+            >
+              <List size={15} aria-hidden="true" />
+            </button>
+          </div>
         </div>
-        {hasDeprecated && (
-          // A toggle, not a filter: `aria-pressed` rather than the `active`
-          // class alone, so it is announced as on/off instead of selected.
-          //
-          // No count, unlike the kind chips. Theirs is a fixed property of
-          // the catalog; this one would be the number currently hidden, which
-          // is zero once the toggle is on — so it vanished exactly when
-          // pressed and the chip changed width under the pointer.
-          <button
-            type="button"
-            class={showDeprecated ? "chip deprecated-toggle active" : "chip deprecated-toggle"}
-            aria-pressed={showDeprecated}
-            title={showDeprecated ? "Hide deprecated packages" : "Show deprecated packages"}
-            tabIndex={chipTabIndex}
-            onKeyDown={onChipKeyDown}
-            onClick={() => setShowDeprecated((on) => !on)}
-          >
-            deprecated
-          </button>
-        )}
       </div>
 
       {shown.length === 0 ? (
         <p class="empty">No packages match.</p>
+      ) : view === "table" ? (
+        <PackageTable
+          packages={shown}
+          hasRatings={hasRatings}
+          onKeyDown={onCardKeyDown}
+          rootRef={gridRef}
+        />
       ) : (
-        <ul class="grid" ref={gridRef}>
+        <ul
+          class="grid"
+          ref={(el) => {
+            gridRef.current = el;
+          }}
+        >
           {shown.map((p) => (
-            // One Tab stop per card, in DOM order — which the grid lays out
-            // left to right, top to bottom. Every control inside is taken
-            // out of the sequence (`tabindex={-1}`) so tabbing crosses the
-            // catalog instead of wading through it; arrow keys move by row
-            // and column, and Enter opens the detail page, which carries the
-            // same install commands the card's buttons do.
-            <li
+            <PackageCard
               key={`${p.namespace}/${p.name}`}
-              class="card"
-              data-slot="package-card"
-              tabIndex={0}
+              pkg={p}
+              vscodeExtension={vscodeExtension}
+              activeKeywords={keywords}
+              onToggleKeyword={toggleKeyword}
               onKeyDown={onCardKeyDown}
-            >
-              <div class="card-head">
-                <CardLogo pkg={p} />
-                <h2 data-slot="package-name">
-                  <a href={withBase(`/p/${p.namespace}/${p.name}/`)} tabIndex={-1}>
-                    {p.name}
-                  </a>
-                </h2>
-                {p.deprecated ? (
-                  <span class="badge deprecated" data-slot="package-kind">deprecated</span>
-                ) : (
-                  <span class={`badge kind-${p.kind}`} data-slot="package-kind">{p.kind}</span>
-                )}
-              </div>
-              <p class="namespace">{p.namespace}</p>
-              {(p.version || p.license || lastUpdated(p) || p.rating) && (
-                <div class="meta-row" data-slot="package-meta">
-                  {p.version && <span class="pill version">v{p.version}</span>}
-                  {p.license && <span class="pill license">{p.license}</span>}
-                  {/* A count and nothing more. The page is prerendered once
-                      for everyone, so it cannot know whether *you* voted —
-                      showing "not voted" to someone who has would be worse
-                      than showing nothing. */}
-                  {p.rating && (
-                    <span
-                      class="pill rating"
-                      title={`${p.rating.up} upvote${p.rating.up === 1 ? "" : "s"}`}
-                    >
-                      <ArrowBigUp size={13} aria-hidden="true" />
-                      {p.rating.up}
-                    </span>
-                  )}
-                  {/* The date the sidecar derived, not the artifact's own
-                      `created`: a package republished from the same commit
-                      keeps its date, and one with no commit date at all gets
-                      the day this index first saw its current digest. */}
-                  {(() => {
-                    const at = lastUpdated(p);
-                    return at && timeAgo(at) ? (
-                      <time class="updated" datetime={at} title={at}>
-                        updated {timeAgo(at)}
-                      </time>
-                    ) : null;
-                  })()}
-                </div>
-              )}
-              {p.deprecated && (
-                <p class="deprecated-strip">
-                  deprecated
-                  {p.replacedBy ? ` — replaced by ${p.replacedBy}` : ""}
-                </p>
-              )}
-              {p.description && <p class="description">{p.description}</p>}
-              {p.keywords && p.keywords.length > 0 && (
-                <div class="keywords" data-slot="package-keywords">
-                  {p.keywords.slice(0, 5).map((kw) => (
-                    <button
-                      key={kw}
-                      type="button"
-                      class="chip keyword"
-                      tabIndex={-1}
-                      onClick={() => setQuery(kw)}
-                    >
-                      {kw}
-                    </button>
-                  ))}
-                  {p.keywords.length > 5 && (
-                    <span class="chip keyword overflow">
-                      +{p.keywords.length - 5}
-                    </span>
-                  )}
-                </div>
-              )}
-              <div class="card-foot">
-                <div class="copy-group">
-                  {/* Global first, matching the hero's scope picker — the two
-                      are the same choice in two places, so they lead with the
-                      same one. */}
-                  <CopyButton
-                    command={`grim add --global ${p.ref}`}
-                    variant="global"
-                    name={`global add for ${p.name}`}
-                  />
-                  <CopyButton command={`grim add ${p.ref}`} name={`project add for ${p.name}`} />
-                  {vscodeUrl(vscodeExtension, p.ref) && (
-                    <a
-                      class="copy vscode"
-                      href={vscodeUrl(vscodeExtension, p.ref)!}
-                      title="Open in VS Code"
-                      aria-label={`Open ${p.name} in VS Code`}
-                      tabIndex={-1}
-                    >
-                      <BrandMark path={mdiMicrosoftVisualStudioCode} />
-                    </a>
-                  )}
-                </div>
-                {p.repository && (
-                  <a
-                    class="source"
-                    href={p.repository}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    tabIndex={-1}
-                  >
-                    source
-                  </a>
-                )}
-              </div>
-            </li>
+            />
           ))}
         </ul>
       )}