@grimoire-rs/indexer 0.4.4 → 0.5.0

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

@@ -0,0 +1,273 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright 2026 The Grimoire Authors
+
+// One card of the grid view.
+//
+// Its own file so an index can replace the card without owning `Catalog.tsx`
+// and its sorting, filtering, keyboard and URL-state machinery. Unlike the
+// `.astro` components, this one takes props — a Preact component in a
+// hydrated island cannot read the build-time payload — so its props ARE a
+// contract, and they are the reason component overrides are documented as
+// unstable for now.
+import { ArrowBigUp } from "lucide-preact";
+import { mdiMicrosoftVisualStudioCode } from "@mdi/js";
+import { BrandMark } from "./BrandMark.js";
+import { CardLogo } from "./CardLogo.js";
+import { CopyButton } from "./CopyButton.js";
+import { DEPRECATED_MARK, KIND_MARKS, KindMark } from "./KindMark.js";
+import { withBase } from "../lib/base.js";
+import {
+  externalUrl,
+  lastUpdated,
+  timeAgo,
+  vscodeUrl,
+  vscodeVoteUrl,
+  type CatalogPackage,
+} from "../lib/catalog.js";
+
+export interface PackageCardProps {
+  pkg: CatalogPackage;
+  /**
+   * `publisher.extension` id behind the deep links, or `null`. A prop rather
+   * than a `lib/data` read: this island hydrates in the browser, and importing
+   * the build-time payload here would ship the whole catalog twice.
+   */
+  vscodeExtension: string | null;
+  /** Keyword facets currently applied, so a chip can render itself pressed. */
+  activeKeywords: string[];
+  /** Apply or clear one keyword facet. */
+  onToggleKeyword: (keyword: string) => void;
+  /** The catalog's own arrow-key navigation. */
+  onKeyDown: (event: KeyboardEvent) => void;
+}
+
+export function PackageCard({
+  pkg: p,
+  vscodeExtension,
+  activeKeywords,
+  onToggleKeyword,
+  onKeyDown,
+}: PackageCardProps) {
+  return (
+      <li
+              class="card"
+        data-slot="package-card"
+        tabIndex={0}
+        onKeyDown={onKeyDown}
+      >
+        {/* The kind again, as texture: the same mark the card's kind
+            wears in the VS Code extension, enlarged into the card's
+            top-right corner. Decorative — the kind is written on the
+            address line — so it is aria-hidden.
+
+            Every mark is framed on its own bounding box (see
+            `KindMark`), so they render at one apparent size rather
+            than at whatever fraction of the 16-unit grid each codicon
+            happens to use.
+
+            The colour is the token at FULL strength; the fading is
+            `opacity` on the element, in CSS. A translucent colour is
+            not equivalent: any glyph whose paths overlap composites
+            each crossing twice and comes out blotchy along its own
+            joins. Element opacity flattens the mark first and blends
+            the result once, which is the only way the tint is even.
+
+            A deprecated package spends it on the warning instead. The
+            kind is written either way, so the mark is free to carry the
+            one thing that has no words — and being the only deprecation
+            signal on the card, it is labelled rather than hidden. */}
+        {(() => {
+          const mark = p.deprecated
+            ? DEPRECATED_MARK
+            : KIND_MARKS[p.kind];
+          if (!mark) return null;
+          return (
+            <KindMark
+              glyph={mark}
+              class="card-watermark"
+              size={112}
+              role={p.deprecated ? "img" : undefined}
+              aria-label={p.deprecated ? "deprecated" : undefined}
+              aria-hidden={p.deprecated ? undefined : "true"}
+              style={{
+                color: p.deprecated
+                  ? "var(--grim-color-deprecated)"
+                  : `var(--grim-color-kind-${p.kind}, var(--grim-color-muted))`,
+              }}
+            />
+          );
+        })()}
+        <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>
+          {/* A count and two ways to add to it — never a "you voted"
+              state: the page is prerendered once for everyone, so it
+              cannot know whether *you* did, and showing "not voted"
+              to someone who has would be worse than showing nothing.
+
+              Left, the count itself, linking to the forge thread the
+              sidecar names. No forge offers a URL that casts a vote,
+              so this opens the thread and the reader clicks the
+              reaction there. Right, the extension's `/vote?repo=`
+              route, which does cast one — behind its own disclosure
+              modal, never on the strength of this link. */}
+          {p.rating &&
+            (() => {
+              const votes = `${p.rating.up} upvote${p.rating.up === 1 ? "" : "s"}`;
+              // Registry-supplied, like every other outbound string
+              // here: through the scheme allowlist before it is an
+              // href, whatever the sidecar spelled.
+              const thread = externalUrl(p.rating.url);
+              const vote = vscodeVoteUrl(vscodeExtension, p.ref);
+              return (
+                <span class="rating-group">
+                  {thread ? (
+                    <a
+                      class="rating-count"
+                      href={thread}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      tabIndex={-1}
+                      title={`${votes} — open the thread to vote`}
+                      aria-label={`${p.name}: ${votes}. Open the voting thread`}
+                    >
+                      <ArrowBigUp size={13} aria-hidden="true" />
+                      {p.rating.up}
+                    </a>
+                  ) : (
+                    <span class="rating-count" title={votes}>
+                      <ArrowBigUp size={13} aria-hidden="true" />
+                      {p.rating.up}
+                    </span>
+                  )}
+                  {vote && (
+                    <a
+                      class="rating-vote"
+                      href={vote}
+                      tabIndex={-1}
+                      title="Upvote in VS Code"
+                      aria-label={`Upvote ${p.name} in VS Code`}
+                    >
+                      <BrandMark
+                        path={mdiMicrosoftVisualStudioCode}
+                        size={12}
+                      />
+                    </a>
+                  )}
+                </span>
+              );
+            })()}
+          {/* Kind, then where it lives — two things, dot-separated, in
+              the same shape the foot's `version · updated` uses. The
+              kind leads because it is what a reader filters on; the
+              watermark in the corner says the same thing without
+              words. Deprecation is deliberately NOT here: a third item
+              filled the line, and the watermark carries it. */}
+          <p class="namespace">
+            <span class="kind" data-slot="package-kind">
+              {p.kind}
+            </span>
+            <span aria-hidden="true"> · </span>
+            {p.namespace}
+          </p>
+        </div>
+        {/* Under the head, above the description: what the package
+            is tagged with. One row, never two — the row gives up its
+            overflow rather than wrapping, and fades at its right end
+            to say there is more. */}
+        {p.keywords && p.keywords.length > 0 && (
+          <div class="keywords" data-slot="package-keywords">
+            {/* Capped at five so a package with thirty keywords does
+                not render thirty chips off the side of a clipped row.
+                Which of the five actually fit is the row's business. */}
+            {/* Applies the keyword facet, not a text search. The two
+                are not the same answer: `setQuery("cli")` also matched
+                every description with the word in it, so the chip
+                returned packages that are not tagged `cli` at all. */}
+            {p.keywords.slice(0, 5).map((kw) => (
+              <button
+                key={kw}
+                type="button"
+                class={
+                  activeKeywords.includes(kw)
+                    ? "chip keyword active"
+                    : "chip keyword"
+                }
+                aria-pressed={activeKeywords.includes(kw)}
+                tabIndex={-1}
+                onClick={() => onToggleKeyword(kw)}
+              >
+                {kw}
+              </button>
+            ))}
+          </div>
+        )}
+        {p.description && <p class="description">{p.description}</p>}
+        <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>
+          {/* Version and recency, on their own line under the buttons.
+              Both answer the same question — how current is this — so
+              they read as one stamp; alongside the buttons they were a
+              third thing competing for the card's last row, which is
+              where the vote badge now sits.
+
+              The date is the one 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. Licence is gone from the card entirely; it
+              matters when adopting a package, not when scanning for
+              one, and the detail page states it. */}
+          {(() => {
+            const at = lastUpdated(p);
+            const ago = at && timeAgo(at) ? timeAgo(at) : null;
+            if (!p.version && !ago) return null;
+            return (
+              <p class="card-meta" data-slot="package-meta">
+                {p.version && (
+                  <span class="card-version">v{p.version}</span>
+                )}
+                {p.version && ago && <span aria-hidden="true"> · </span>}
+                {ago && at && (
+                  <time datetime={at} title={at}>
+                    updated {ago}
+                  </time>
+                )}
+              </p>
+            );
+          })()}
+        </div>
+      </li>
+  );
+}

package/dist/renderer/astro/components/PackageRow.d.ts

@@ -0,0 +1,10 @@
+import { type CatalogPackage } from "../lib/catalog.js";
+export interface PackageRowProps {
+    pkg: CatalogPackage;
+    /** Whether this index publishes ratings at all — decided once, not per row. */
+    hasRatings: boolean;
+    /** The catalog's own arrow-key navigation. */
+    onKeyDown: (event: KeyboardEvent) => void;
+}
+export declare function PackageRow({ pkg: p, hasRatings, onKeyDown }: PackageRowProps): import("preact").JSX.Element;
+//# sourceMappingURL=PackageRow.d.ts.map

package/dist/renderer/astro/components/PackageRow.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+// Copyright 2026 The Grimoire Authors
+// One row of the table view.
+//
+// Its own file so an index can replace the row without owning `Catalog.tsx`
+// and its sorting, filtering, keyboard and URL-state machinery. Unlike the
+// `.astro` components, this one takes props — a Preact component in a
+// hydrated island cannot read the build-time payload — so its props ARE a
+// contract, and they are the reason component overrides are documented as
+// unstable for now.
+import { ArrowBigUp } from "lucide-preact";
+import { CardLogo } from "./CardLogo.js";
+import { DEPRECATED_MARK, KIND_MARKS, KindMark } from "./KindMark.js";
+import { withBase } from "../lib/base.js";
+import { lastUpdated, timeAgo } from "../lib/catalog.js";
+export function PackageRow({ pkg: p, hasRatings, onKeyDown }) {
+    const at = lastUpdated(p);
+    const ago = at && timeAgo(at) ? timeAgo(at) : null;
+    return (_jsxs("a", { class: "row", "data-slot": "package-row", href: withBase(`/p/${p.namespace}/${p.name}/`), 
+        // The full identity, since the visible name is clipped and the
+        // namespace is not shown at all.
+        title: `${p.namespace}/${p.name}`, onKeyDown: onKeyDown, children: [_jsx("span", { class: "t-logo", children: _jsx(CardLogo, { pkg: p }) }), (() => {
+                const mark = p.deprecated ? DEPRECATED_MARK : KIND_MARKS[p.kind];
+                const label = p.deprecated ? `${p.kind}, deprecated` : p.kind;
+                return (_jsx("span", { class: "t-kind", "data-slot": "package-kind", title: label, style: {
+                        color: p.deprecated
+                            ? "var(--grim-color-deprecated)"
+                            : `var(--grim-color-kind-${p.kind}, var(--grim-color-muted))`,
+                    }, children: mark ? (_jsx(KindMark, { glyph: mark, size: 16, role: "img", "aria-label": label })) : (_jsx("span", { class: "t-kind-word", children: label })) }));
+            })(), _jsx("span", { class: "t-name", "data-slot": "package-name", children: p.name }), _jsx("span", { class: "t-desc", children: p.description }), _jsx("span", { class: "t-updated", "data-slot": "package-meta", children: ago && at && (_jsx("time", { datetime: at, title: at, children: ago })) }), hasRatings && (_jsx("span", { class: "t-rating", children: p.rating && (_jsxs(_Fragment, { children: [_jsx("span", { class: "t-votes", children: p.rating.up }), _jsx(ArrowBigUp, { size: 13, "aria-hidden": "true" })] })) }))] }));
+}

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

@@ -0,0 +1,126 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright 2026 The Grimoire Authors
+
+// One row of the table view.
+//
+// Its own file so an index can replace the row without owning `Catalog.tsx`
+// and its sorting, filtering, keyboard and URL-state machinery. Unlike the
+// `.astro` components, this one takes props — a Preact component in a
+// hydrated island cannot read the build-time payload — so its props ARE a
+// contract, and they are the reason component overrides are documented as
+// unstable for now.
+import { ArrowBigUp } from "lucide-preact";
+import { CardLogo } from "./CardLogo.js";
+import { DEPRECATED_MARK, KIND_MARKS, KindMark } from "./KindMark.js";
+import { withBase } from "../lib/base.js";
+import { lastUpdated, timeAgo, type CatalogPackage } from "../lib/catalog.js";
+
+export interface PackageRowProps {
+  pkg: CatalogPackage;
+  /** Whether this index publishes ratings at all — decided once, not per row. */
+  hasRatings: boolean;
+  /** The catalog's own arrow-key navigation. */
+  onKeyDown: (event: KeyboardEvent) => void;
+}
+
+export function PackageRow({ pkg: p, hasRatings, onKeyDown }: PackageRowProps) {
+  const at = lastUpdated(p);
+  const ago = at && timeAgo(at) ? timeAgo(at) : null;
+  return (
+      <a
+              class="row"
+        data-slot="package-row"
+        href={withBase(`/p/${p.namespace}/${p.name}/`)}
+        // The full identity, since the visible name is clipped and the
+        // namespace is not shown at all.
+        title={`${p.namespace}/${p.name}`}
+        onKeyDown={onKeyDown}
+      >
+        {/* The same tile the card shows, at a row's height. It goes in a
+            column of its own rather than beside the name so it stays a
+            slot the eye tracks down — and `CardLogo` already answers the
+            three states a logo has here (missing, loading, declared but
+            unreachable), so the column is never ragged. */}
+        <span class="t-logo">
+          <CardLogo pkg={p} />
+        </span>
+        {/* The kind as its mark, not as its word — the same glyph the
+            card wears in its corner and the same one the VS Code
+            extension puts on its cards, in the kind's own colour.
+
+            Which is also how deprecation is said here: a retired package
+            shows the warning mark in the deprecation colour instead of
+            its kind, exactly as the card's watermark does. The badge this
+            replaces was a second word in a cell with room for none, and
+            it widened the column for every row whether or not anything in
+            view was retired.
+
+            The word is not lost — it names the mark, so it is read out,
+            and the `title` sits on the cell rather than on the `<svg>`:
+            an SVG takes its tooltip from a `<title>` child, and a `title`
+            attribute on it does nothing at all. */}
+        {(() => {
+          const mark = p.deprecated ? DEPRECATED_MARK : KIND_MARKS[p.kind];
+          const label = p.deprecated ? `${p.kind}, deprecated` : p.kind;
+          return (
+            <span
+              class="t-kind"
+              data-slot="package-kind"
+              title={label}
+              style={{
+                color: p.deprecated
+                  ? "var(--grim-color-deprecated)"
+                  : `var(--grim-color-kind-${p.kind}, var(--grim-color-muted))`,
+              }}
+            >
+              {mark ? (
+                <KindMark
+                  glyph={mark}
+                  size={16}
+                  role="img"
+                  aria-label={label}
+                />
+              ) : (
+                // An unknown kind has no mark, and inventing one would be
+                // a claim. It keeps the word it always had.
+                <span class="t-kind-word">{label}</span>
+              )}
+            </span>
+          );
+        })()}
+        {/* The name alone. The namespace used to sit beside it and was
+            what pushed this cell onto a second line — and it is not worth
+            a column of its own here, where the kind already answers "what
+            is this" and the description answers "about what". It rides in
+            the row's tooltip instead, with the full name, which is also
+            what the ellipsis costs the reader. */}
+        <span class="t-name" data-slot="package-name">
+          {p.name}
+        </span>
+        <span class="t-desc">{p.description}</span>
+        <span class="t-updated" data-slot="package-meta">
+          {ago && at && (
+            <time datetime={at} title={at}>
+              {ago}
+            </time>
+          )}
+        </span>
+        {hasRatings && (
+          // Count first, arrow after it, both held at the right edge.
+          // The count sits in a fixed right-aligned box, so the digits
+          // stack into a column and the arrow after them lands in the
+          // same place on every row whatever the count is. An unrated
+          // package keeps the empty cell: the column is a slot the eye
+          // tracks down, and a row that skips it breaks the run.
+          <span class="t-rating">
+            {p.rating && (
+              <>
+                <span class="t-votes">{p.rating.up}</span>
+                <ArrowBigUp size={13} aria-hidden="true" />
+              </>
+            )}
+          </span>
+        )}
+      </a>
+  );
+}

package/dist/renderer/astro/components/PickerMenu.astro

@@ -8,23 +8,14 @@
 // `Base.astro`'s `[data-os-switch]` handler moves it. That handler is generic
 // over bars, so this component ships no script of its own.
 //
-// Icons arrive one of two ways and both render to static SVG at build time:
-// `path` for a `@mdi/js` brand mark, `Icon` for a Lucide component. Lucide
-// carries no brand marks and MDI is not the set the rest of the site draws
-// with, so neither alone covers both bars.
+// Icons arrive one of two ways and both render to static SVG at build time —
+// see `Choice` in `../lib/commands`.
 import { ChevronDown } from "lucide-preact";
 import { BrandMark } from "./BrandMark.tsx";
+// The shape lives with the functions that build it, so a page importing
+// `installChoices` and a component rendering it cannot disagree about it.
+import type { Choice } from "../lib/commands";
 
-export interface Choice {
-  /** Shown in the menu, and matched against `data-os-glyph` when picking. */
-  name: string;
-  /** What the field shows and copies once this choice is picked. */
-  command: string;
-  /** `@mdi/js` path string. */
-  path?: string;
-  /** Lucide component, taking a `size` prop. */
-  Icon?: (props: { size?: number }) => unknown;
-}
 
 interface Props {
   choices: Choice[];

package/dist/renderer/astro/components/SiteFooter.astro

@@ -0,0 +1,64 @@
+---
+// The site footer: the raw-data pointer, whatever links this index adds, and
+// the attribution line.
+//
+// Split out for the same reason as `SiteHeader.astro`, and with the same
+// contract: no props, reads build-time config, styles live in `Base.astro`'s
+// global block. `theme/components/SiteFooter.astro` replaces it.
+import { linkAttrs, withBase } from "../lib/base";
+import { data } from "../lib/data";
+
+const { config } = data;
+// Shown as well as linked: on a subpath deployment the bare path is not where
+// the file is, so the label has to carry the prefix too.
+const allJson = withBase("/all.json");
+---
+
+<footer data-slot="site-footer">
+  <div class="shell">
+    <p>
+      Raw data: <a href={allJson}><code>{allJson}</code></a>{
+        config.footerNote ? ` · ${config.footerNote}` : ""
+      }
+    </p>
+    {/* Whatever this index has to link — a privacy notice, an imprint, a code
+        of conduct, a page it added under `theme/pages/`. Absent by default, so
+        a footer without them looks exactly as it did before.
+
+        `withBase` for the same reason the nav needs it: a site-root href is a
+        legal entry here, and on a project Pages deployment the site does not
+        live at the domain root. `linkAttrs` for the same reason too — one
+        list of links in two components, and a `nav` entry moved down here
+        must not silently change how it opens. */}
+    {
+      config.footerLinks.length > 0 && (
+        <p class="footer-links">
+          {config.footerLinks.map((link) => (
+            <a href={withBase(link.href)} {...linkAttrs(link)}>
+              {link.label}
+            </a>
+          ))}
+        </p>
+      )
+    }
+    {/* Opt-out, not opt-in: an index runner who does not want to say where the
+        software came from sets `attribution: false`, and this disappears.
+        Nothing else on the page changes.
+
+        "using", not "by": the index runner built this site — Grimoire is the
+        tool they built it with. */}
+    {
+      config.attribution && (
+        <p class="attribution">
+          Built with <span aria-hidden="true">♥</span><span class="sr-only">love</span> using{" "}
+          {/* New tab: this is the one link that leaves the index for an
+              unrelated site, and a visitor mid-browse should not lose their
+              place to it. */}
+          <a href="https://grimoire.rs" target="_blank" rel="noopener">
+            Grimoire
+          </a>
+        </p>
+      )
+    }
+  </div>
+</footer>

package/dist/renderer/astro/components/SiteHeader.astro

@@ -0,0 +1,74 @@
+---
+// The site header: brand, nav, theme toggle.
+//
+// Its own file so an index can replace the header ALONE — `theme/components/
+// SiteHeader.astro` wins over this, and `Base.astro` still supplies the head,
+// the centered `main`, the copy toast and every default style. Replacing the
+// layout instead means owning all of that.
+//
+// It takes no props deliberately: everything it draws is build-time config,
+// which it reads the same way any page does. A replacement therefore has no
+// prop contract to match — it imports `data` and renders whatever it likes.
+//
+// The styles stay in `Base.astro`'s global block, which is `is:global` and so
+// reaches this markup wherever it lives. Nothing here to keep in step.
+import { Moon, Sun } from "lucide-preact";
+import { linkAttrs, withBase } from "../lib/base";
+import { data } from "../lib/data";
+
+const { config } = data;
+// The mark is styled separately, so it only applies when it really is the
+// leading run of the brand — otherwise the header renders the plain text.
+const brandRest =
+  config.brandMark && config.brand.startsWith(config.brandMark)
+    ? config.brand.slice(config.brandMark.length)
+    : null;
+// `config.nav` arrives resolved: `resolveConfig` synthesized the docs/forge
+// pair for an index that configured no nav, and named the forge host itself.
+---
+
+<header data-slot="site-header">
+  <div class="shell header-row">
+    <a class="brand" href={withBase("/")} data-slot="brand">
+      {/* Decorative: the brand text is right beside it, so announcing the
+          logo too would read the index's name twice. */}
+      {config.logo && <img class="brand-logo" src={withBase(config.logo)} alt="" />}
+      {
+        brandRest === null ? (
+          config.brand
+        ) : (
+          <Fragment>
+            <span class="brand-mark">{config.brandMark}</span>
+            {brandRest}
+          </Fragment>
+        )
+      }
+    </a>
+    <nav>
+      {/* Two independent questions, and they used to be one branch. Every
+          href gets `withBase`: a page added under `theme/pages/` is linked
+          as `/setup/`, on project Pages the site does not live at the domain
+          root, and `withBase` already leaves an absolute URL alone — so
+          there is nothing here to guard. Whether the link opens in a new tab
+          is `linkAttrs`, which reads `external` and falls back to the href's
+          shape. An internal link must not open a tab, or browsing the
+          index's own guide pages litters the visitor's. */}
+      {
+        config.nav.map((link) => (
+          <a href={withBase(link.href)} {...linkAttrs(link)}>
+            {link.label}
+          </a>
+        ))
+      }
+      {/* Stroked, not filled, and inheriting the nav's own colour, so the
+          toggle reads as a third nav item rather than a control bolted beside
+          them. Rendered statically — no client directive, so no JavaScript
+          ships for the icons. The click handler lives in `Base.astro`, with
+          the rest of the document's scripts. */}
+      <button id="theme-toggle" type="button" aria-label="Toggle theme">
+        <Moon class="when-light" size={16} aria-hidden="true" />
+        <Sun class="when-dark" size={16} aria-hidden="true" />
+      </button>
+    </nav>
+  </div>
+</header>

package/dist/renderer/astro/components/VersionMenu.astro

@@ -92,14 +92,14 @@ const commands: [string, string][] = [
     padding: var(--grim-space-2);
     background: var(--grim-color-card);
     border: var(--grim-border-width) solid var(--grim-color-border);
-    border-radius: var(--grim-radius-lg);
+    border-radius: var(--grim-radius-control);
     box-shadow: var(--grim-shadow-raised);
   }
   .cmd {
     display: block;
     width: 100%;
     border: 0;
-    border-radius: var(--grim-radius-md);
+    border-radius: var(--grim-radius-inset);
     background: transparent;
     color: var(--grim-color-muted);
     font: inherit;