@elabs-ai/components-ui 4.1.0 → 5.0.0

package/src/components/integration-matrix/integration-matrix.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+/**
+ * IntegrationMatrix — every agent-facing integration unit, as installable rows.
+ *
+ * Ships no site copy, no URL and no install command of its own (`i18n-strings`,
+ * `remote-origins`): every string, host and command text is a prop. A single host
+ * selector at the top swaps every row's copy action at once, so a visitor picks
+ * their tool once instead of re-reading each row for it.
+ */
+import { forwardRef, type HTMLAttributes } from "react";
+import { ArrowRight } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
+import { Button } from "../button";
+import { CommandChip } from "../command-chip";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip";
+
+/** One host the visitor can pick — the selection swaps every row's copy action. */
+export interface IntegrationMatrixHost {
+  /** Stable id, matched against each action's `value` map. */
+  id: string;
+  /** Shown in the selector. */
+  label: string;
+}
+
+/** One action a row offers: copy a command, or follow a link. */
+export interface IntegrationMatrixAction {
+  /** Shown on the link button, or as the copy button's accessible name suffix. */
+  label: string;
+  kind: "copy" | "link";
+  /**
+   * `kind: "copy"` — the exact text per host id (a row that never changes by host
+   * repeats the same string under every id). `kind: "link"` — a single href string.
+   */
+  value: string | Record<string, string>;
+}
+
+/** One installable unit — hosted MCP, local MCP + CLI, the plugin, `llms.txt`, … */
+export interface IntegrationMatrixRow {
+  id: string;
+  unit: string;
+  gives: string;
+  actions: IntegrationMatrixAction[];
+}
+
+/** One step of the routine line below the matrix (`info → search → docs → …`). */
+export interface IntegrationMatrixRoutineStep {
+  verb: string;
+  /** Tooltip body — what the verb does. */
+  does: string;
+}
+
+export interface IntegrationMatrixLabels {
+  /** Visible label beside the host selector. */
+  hostSelectLabel: string;
+  /** `aria-label` of the host `Select` trigger. */
+  hostSelectAriaLabel: string;
+  unitHeading: string;
+  givesHeading: string;
+  actionsHeading: string;
+  /** Heading above the routine chips. */
+  routineHeading: string;
+}
+
+export const DEFAULT_INTEGRATION_MATRIX_LABELS: IntegrationMatrixLabels = {
+  hostSelectLabel: "Show commands for",
+  hostSelectAriaLabel: "Host to show commands for",
+  unitHeading: "Unit",
+  givesHeading: "Gives you",
+  actionsHeading: "Actions",
+  routineHeading: "The daily routine",
+};
+
+export interface IntegrationMatrixProps extends HTMLAttributes<HTMLDivElement> {
+  hosts: IntegrationMatrixHost[];
+  rows: IntegrationMatrixRow[];
+  /** The routine strip below the matrix; omitted entirely when empty. */
+  routine?: IntegrationMatrixRoutineStep[];
+  /** Selected host id (controlled). */
+  value?: string;
+  /** Initially selected host id (uncontrolled). Default: the first host. */
+  defaultValue?: string;
+  /** Fires when the visitor picks another host. */
+  onValueChange?: (id: string) => void;
+  /** Fires after a copy attempt with the row id, the action label and the text. */
+  onCopyAction?: (rowId: string, actionLabel: string, text: string, copied: boolean) => void;
+  labels?: Partial<IntegrationMatrixLabels>;
+}
+
+function resolveCopyValue(value: string | Record<string, string>, hostId: string): string {
+  if (typeof value === "string") return value;
+  return value[hostId] ?? Object.values(value)[0] ?? "";
+}
+
+export const IntegrationMatrix = forwardRef<HTMLDivElement, IntegrationMatrixProps>(
+  function IntegrationMatrix(
+    {
+      hosts,
+      rows,
+      routine,
+      value,
+      defaultValue,
+      onValueChange,
+      onCopyAction,
+      labels: labelsProp,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const labels = { ...DEFAULT_INTEGRATION_MATRIX_LABELS, ...labelsProp };
+    const [hostId, setHostId] = useControllableState(
+      value,
+      defaultValue ?? hosts[0]?.id ?? "",
+      onValueChange,
+    );
+
+    return (
+      <div
+        ref={ref}
+        data-slot="integration-matrix"
+        className={cn("flex flex-col gap-6", className)}
+        {...props}
+      >
+        {hosts.length > 1 ? (
+          <div className="flex items-center gap-3">
+            <span className="text-body text-muted-foreground">{labels.hostSelectLabel}</span>
+            <Select value={hostId} onValueChange={setHostId}>
+              <SelectTrigger
+                data-slot="integration-matrix-host"
+                aria-label={labels.hostSelectAriaLabel}
+                className="min-w-40"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {hosts.map((host) => (
+                  <SelectItem key={host.id} value={host.id}>
+                    {host.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : null}
+
+        {/* md+: a 3-column grid with a header row. Below md: stacked cards, one per row. */}
+        <div className="flex flex-col gap-4 md:gap-0">
+          <div className="hidden grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)_minmax(0,1.6fr)] gap-4 border-b border-border-strong pb-2 md:grid">
+            <span className="text-caption font-semibold text-muted-foreground">
+              {labels.unitHeading}
+            </span>
+            <span className="text-caption font-semibold text-muted-foreground">
+              {labels.givesHeading}
+            </span>
+            <span className="text-caption font-semibold text-muted-foreground">
+              {labels.actionsHeading}
+            </span>
+          </div>
+          {rows.map((row) => (
+            <div
+              key={row.id}
+              data-slot="integration-matrix-row"
+              className="grid grid-cols-1 gap-3 border-b py-4 last:border-b-0 md:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)_minmax(0,1.6fr)] md:items-center md:gap-4"
+            >
+              <span className="text-body font-medium text-foreground">{row.unit}</span>
+              <span className="text-body text-muted-foreground">{row.gives}</span>
+              <div
+                data-slot="integration-matrix-actions"
+                className="flex flex-wrap items-center gap-2"
+              >
+                {row.actions.map((action) =>
+                  action.kind === "copy" ? (
+                    <CommandChip
+                      key={action.label}
+                      className="max-w-full"
+                      hosts={[
+                        {
+                          id: "value",
+                          label: action.label,
+                          command: resolveCopyValue(action.value, hostId),
+                        },
+                      ]}
+                      onCopyCommand={(text, copied) =>
+                        onCopyAction?.(row.id, action.label, text, copied)
+                      }
+                    />
+                  ) : (
+                    <Button key={action.label} variant="link" size="sm" asChild>
+                      <a href={resolveCopyValue(action.value, hostId)}>{action.label}</a>
+                    </Button>
+                  ),
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {routine && routine.length > 0 ? (
+          <div className="flex flex-col gap-3">
+            <h3 className="text-caption font-semibold text-muted-foreground">
+              {labels.routineHeading}
+            </h3>
+            <TooltipProvider>
+              <div
+                data-slot="integration-matrix-routine"
+                className="flex flex-wrap items-center gap-2"
+              >
+                {routine.map((step, index) => (
+                  <div key={step.verb} className="flex items-center gap-2">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span
+                          data-slot="integration-matrix-routine-step"
+                          tabIndex={0}
+                          className="inline-flex items-center rounded-md border border-input bg-card px-2.5 py-1 font-mono text-code text-foreground focus-ring"
+                        >
+                          {step.verb}
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent>{step.does}</TooltipContent>
+                    </Tooltip>
+                    {index < routine.length - 1 ? (
+                      <ArrowRight aria-hidden="true" className="size-4 text-muted-foreground" />
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            </TooltipProvider>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/src/components/keyboard-shortcuts/keyboard-shortcuts.tsx

@@ -101,7 +101,7 @@ export const KeyboardShortcuts = forwardRef<HTMLDivElement, KeyboardShortcutsPro
             </label>
             <Search
               aria-hidden="true"
-              className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+              className="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
             />
             <Input
               id={searchId}
@@ -110,7 +110,7 @@ export const KeyboardShortcuts = forwardRef<HTMLDivElement, KeyboardShortcutsPro
               placeholder={t("ui.keyboardShortcuts.searchPlaceholder")}
               value={query}
               onChange={(event) => setQuery(event.target.value)}
-              className="pl-8"
+              className="ps-8"
             />
           </div>
         )}

package/src/components/label/label.tsx

@@ -10,7 +10,7 @@ export const Label = forwardRef<
     <LabelPrimitive.Root
       ref={ref}
       className={cn(
-        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        "text-body font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
         className,
       )}
       {...props}

package/src/components/list-editor/list-editor.test.tsx

@@ -69,6 +69,30 @@ describe("ListEditor", () => {
     expect(onValueChange).toHaveBeenCalledWith(["b", "a"]);
   });
 
+  it("keeps keyboard focus on the moved row's own move-down button after a non-boundary move", async () => {
+    render(<ListEditor defaultValue={["a", "b", "c", "d"]} />);
+    const moveDown = screen.getByRole("button", { name: "Move item 2 down" });
+    moveDown.focus();
+    await userEvent.keyboard("{Enter}");
+    // Row "b" moved from position 2 to position 3 — index-keyed rows would
+    // leave focus sitting on whatever the DOM slot at the old position now
+    // renders (the row that got swapped INTO it), not on the row the user
+    // actually moved.
+    expect(screen.getByRole("button", { name: "Move item 3 down" })).toHaveFocus();
+  });
+
+  it("redirects focus to the complementary button when a move disables the one just pressed", async () => {
+    render(<ListEditor defaultValue={["a", "b", "c"]} />);
+    const moveUp = screen.getByRole("button", { name: "Move item 2 up" });
+    moveUp.focus();
+    await userEvent.keyboard("{Enter}");
+    // "b" is now row 1 (the top) — its own "move up" is now disabled, and a
+    // browser blurs a focused element the moment it goes disabled. Focus
+    // must land on that same row's still-enabled "move down" button instead
+    // of falling through to <body>.
+    expect(screen.getByRole("button", { name: "Move item 1 down" })).toHaveFocus();
+  });
+
   it("hides reorder buttons when reorderable=false", () => {
     render(<ListEditor defaultValue={["a", "b"]} reorderable={false} />);
     // Anchored at the start — "Remove item 1" contains the substring "move

package/src/components/list-editor/list-editor.tsx

@@ -3,7 +3,9 @@
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useMemo,
+  useRef,
   useState,
   type HTMLAttributes,
   type ReactNode,
@@ -77,10 +79,48 @@ export const ListEditor = forwardRef<HTMLDivElement, ListEditorProps>(function L
     [isControlled, onValueChange],
   );
 
+  // `rows` is a bare `string[]` with no identity of its own — keying each
+  // row's DOM by its ARRAY INDEX means a reorder swaps which row's data a
+  // given DOM node (and its focused "Move up" button) renders, not which
+  // node holds the moved row's data. A stable per-row id, generated once and
+  // carried through add/remove/move in lockstep with `rows`, lets React
+  // (and thus keyboard focus) follow the actual row instead of the slot.
+  const idCounterRef = useRef(0);
+  const makeId = useCallback(() => `list-editor-row-${idCounterRef.current++}`, []);
+  const [rowIds, setRowIds] = useState<string[]>(() => rows.map(() => makeId()));
+  const lastRowsRef = useRef(rows);
+  const upButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const downButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const pendingFocusRef = useRef<{ id: string; want: "up" | "down" } | null>(null);
+
+  // Safety net for a `rows` change that did NOT come from add/remove/move
+  // below (e.g. a controlled `value` reset by the app) — keeps `rowIds` the
+  // same length as `rows` without guessing at a diff.
+  useEffect(() => {
+    if (rows === lastRowsRef.current) return;
+    lastRowsRef.current = rows;
+    setRowIds((prev) => {
+      if (prev.length === rows.length) return prev;
+      if (rows.length > prev.length) {
+        return [...prev, ...Array.from({ length: rows.length - prev.length }, () => makeId())];
+      }
+      return prev.slice(0, rows.length);
+    });
+  }, [rows, makeId]);
+
+  useEffect(() => {
+    const pending = pendingFocusRef.current;
+    if (!pending) return;
+    pendingFocusRef.current = null;
+    const map = pending.want === "up" ? upButtonRefs.current : downButtonRefs.current;
+    map.get(pending.id)?.focus();
+  }, [rowIds]);
+
   const addRow = useCallback(() => {
     if (max !== undefined && rows.length >= max) return;
     commit([...rows, ""]);
-  }, [rows, max, commit]);
+    setRowIds((ids) => [...ids, makeId()]);
+  }, [rows, max, commit, makeId]);
 
   const updateRow = useCallback(
     (index: number, next: string) => {
@@ -92,6 +132,7 @@ export const ListEditor = forwardRef<HTMLDivElement, ListEditorProps>(function L
   const removeRow = useCallback(
     (index: number) => {
       commit(rows.filter((_, i) => i !== index));
+      setRowIds((ids) => ids.filter((_, i) => i !== index));
     },
     [rows, commit],
   );
@@ -103,9 +144,31 @@ export const ListEditor = forwardRef<HTMLDivElement, ListEditorProps>(function L
       const next = [...rows];
       const [moved] = next.splice(index, 1);
       next.splice(target, 0, moved!);
+      const movedId = rowIds[index]!;
       commit(next);
+      setRowIds((ids) => {
+        const nextIds = [...ids];
+        const [id] = nextIds.splice(index, 1);
+        nextIds.splice(target, 0, id!);
+        return nextIds;
+      });
+
+      // The button the user just pressed keeps focus by default (same id ⇒
+      // same DOM node, just repositioned). The one case that needs help: the
+      // row landed at the top/bottom, so THIS direction's button is now
+      // `disabled` — a browser blurs a focused element the instant it goes
+      // disabled, dropping focus to <body>. Redirect to the row's other
+      // reorder button instead, which stays enabled.
+      const activated: "up" | "down" = direction === -1 ? "up" : "down";
+      const willDisable =
+        (activated === "up" && target === 0) ||
+        (activated === "down" && target === rows.length - 1);
+      pendingFocusRef.current = {
+        id: movedId,
+        want: willDisable ? (activated === "up" ? "down" : "up") : activated,
+      };
     },
-    [rows, commit],
+    [rows, rowIds, commit],
   );
 
   const atMax = max !== undefined && rows.length >= max;
@@ -123,56 +186,67 @@ export const ListEditor = forwardRef<HTMLDivElement, ListEditorProps>(function L
         </p>
       ) : (
         <div className="flex flex-col gap-2">
-          {rows.map((row, index) => (
-            <div key={index} data-slot="list-editor-row" className="flex items-center gap-1">
-              <Input
-                data-slot="list-editor-item"
-                value={row}
-                placeholder={placeholder}
-                disabled={disabled}
-                aria-label={t("ui.listEditor.itemLabel", { n: index + 1 })}
-                onChange={(event) => updateRow(index, event.target.value)}
-                className="flex-1"
-              />
-              {reorderable && (
-                <>
-                  <Button
-                    data-slot="list-editor-move-up"
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    disabled={disabled || index === 0}
-                    aria-label={t("ui.listEditor.moveUp", { n: index + 1 })}
-                    onClick={() => moveRow(index, -1)}
-                  >
-                    <ChevronUp aria-hidden="true" />
-                  </Button>
-                  <Button
-                    data-slot="list-editor-move-down"
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    disabled={disabled || index === rows.length - 1}
-                    aria-label={t("ui.listEditor.moveDown", { n: index + 1 })}
-                    onClick={() => moveRow(index, 1)}
-                  >
-                    <ChevronDown aria-hidden="true" />
-                  </Button>
-                </>
-              )}
-              <Button
-                data-slot="list-editor-remove"
-                type="button"
-                variant="ghost"
-                size="icon-sm"
-                disabled={disabled}
-                aria-label={t("ui.listEditor.removeItem", { n: index + 1 })}
-                onClick={() => removeRow(index)}
-              >
-                <X aria-hidden="true" />
-              </Button>
-            </div>
-          ))}
+          {rows.map((row, index) => {
+            const rowId = rowIds[index] ?? String(index);
+            return (
+              <div key={rowId} data-slot="list-editor-row" className="flex items-center gap-1">
+                <Input
+                  data-slot="list-editor-item"
+                  value={row}
+                  placeholder={placeholder}
+                  disabled={disabled}
+                  aria-label={t("ui.listEditor.itemLabel", { n: index + 1 })}
+                  onChange={(event) => updateRow(index, event.target.value)}
+                  className="flex-1"
+                />
+                {reorderable && (
+                  <>
+                    <Button
+                      ref={(el) => {
+                        if (el) upButtonRefs.current.set(rowId, el);
+                        else upButtonRefs.current.delete(rowId);
+                      }}
+                      data-slot="list-editor-move-up"
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      disabled={disabled || index === 0}
+                      aria-label={t("ui.listEditor.moveUp", { n: index + 1 })}
+                      onClick={() => moveRow(index, -1)}
+                    >
+                      <ChevronUp aria-hidden="true" />
+                    </Button>
+                    <Button
+                      ref={(el) => {
+                        if (el) downButtonRefs.current.set(rowId, el);
+                        else downButtonRefs.current.delete(rowId);
+                      }}
+                      data-slot="list-editor-move-down"
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      disabled={disabled || index === rows.length - 1}
+                      aria-label={t("ui.listEditor.moveDown", { n: index + 1 })}
+                      onClick={() => moveRow(index, 1)}
+                    >
+                      <ChevronDown aria-hidden="true" />
+                    </Button>
+                  </>
+                )}
+                <Button
+                  data-slot="list-editor-remove"
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  disabled={disabled}
+                  aria-label={t("ui.listEditor.removeItem", { n: index + 1 })}
+                  onClick={() => removeRow(index)}
+                >
+                  <X aria-hidden="true" />
+                </Button>
+              </div>
+            );
+          })}
         </div>
       )}
       <Button

package/src/components/locale-provider/locale-keys.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
+import { DEFAULT_MESSAGES } from "./messages";
+
+// ---------------------------------------------------------------------------
+// Guards `t("some.key")` call sites across every package against the shipped
+// English dictionary — a key used in source but never registered in
+// `DEFAULT_MESSAGES` silently renders the RAW KEY to end users (t()'s last
+// fallback rung), which is exactly what shipped when a i18n sweep added
+// `t()` call sites but the matching messages.ts entries lagged behind
+// (#4 i18n review). Source is the one true list of "keys a component can
+// render" (see docs/I18N.md); this test keeps that list honest without
+// hand-maintaining a duplicate inventory.
+// ---------------------------------------------------------------------------
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+// packages/ui/src/components/locale-provider -> repo root
+const REPO_ROOT = join(HERE, "../../../../..");
+
+/** Source `.tsx`/`.ts` files under a package's `src/`, excluding tests/stories. */
+function sourceFiles(dir: string, acc: string[] = []): string[] {
+  let entries;
+  try {
+    entries = readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return acc;
+  }
+  for (const entry of entries) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === "node_modules" || entry.name === "dist") continue;
+      sourceFiles(full, acc);
+    } else if (/\.tsx?$/.test(entry.name) && !/\.(test|spec|stories)\.tsx?$/.test(entry.name)) {
+      acc.push(full);
+    }
+  }
+  return acc;
+}
+
+/** Strip `//` and `/* *‍/` comments so example code in comments never counts as a call site. */
+function stripComments(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "");
+}
+
+/**
+ * Extract every string-literal key passed as (or inside a ternary forming)
+ * the FIRST argument of a `t(...)` call in `source`. Handles the shapes this
+ * codebase actually uses:
+ *   t("ui.foo.bar")
+ *   t("ui.foo.bar", { count })
+ *   t(cond ? "ui.foo.a" : "ui.foo.b", { name })
+ *   t(SOME_MAP[status])            — dynamic; no literal to extract, skipped
+ *
+ * A literal only counts as a candidate KEY when it stands as a whole ternary
+ * branch or the whole argument — i.e. bounded (modulo whitespace) by the
+ * start of the argument, `?`, `:`, or the argument's end — so a literal used
+ * mid-condition (`zoom === "fit-width" ? a : b`) is correctly NOT treated as
+ * a translation key.
+ */
+export function extractTranslationKeys(source: string): string[] {
+  const clean = stripComments(source);
+  const keys: string[] = [];
+  const callRe = /(?<![A-Za-z0-9_.])t\(/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = callRe.exec(clean))) {
+    const start = match.index + match[0].length;
+    let depth = 0;
+    let end = start;
+    // Walk to the first top-level comma or closing paren — the boundary of
+    // the first argument expression.
+    for (; end < clean.length; end++) {
+      const ch = clean[end];
+      if (ch === "(" || ch === "{" || ch === "[") depth++;
+      else if (ch === ")" || ch === "}" || ch === "]") {
+        if (depth === 0) break;
+        depth--;
+      } else if (ch === "," && depth === 0) {
+        break;
+      }
+    }
+    const firstArg = clean.slice(start, end);
+    const literalRe = /(?:^|[?:(,])\s*(["'])((?:(?!\1).)*)\1\s*(?=$|[):,])/g;
+    for (const lit of firstArg.matchAll(literalRe)) {
+      if (lit[2]) keys.push(lit[2]);
+    }
+  }
+  return keys;
+}
+
+interface Finding {
+  file: string;
+  key: string;
+}
+
+function collectMissingKeys(): Finding[] {
+  const missing: Finding[] = [];
+  const pkgsDir = join(REPO_ROOT, "packages");
+  for (const pkg of readdirSync(pkgsDir, { withFileTypes: true })) {
+    if (!pkg.isDirectory()) continue;
+    const src = join(pkgsDir, pkg.name, "src");
+    try {
+      if (!statSync(src).isDirectory()) continue;
+    } catch {
+      continue;
+    }
+    for (const file of sourceFiles(src)) {
+      const source = readFileSync(file, "utf8");
+      for (const key of extractTranslationKeys(source)) {
+        if (!(key in DEFAULT_MESSAGES)) {
+          missing.push({ file: relative(REPO_ROOT, file), key });
+        }
+      }
+    }
+  }
+  return missing;
+}
+
+describe("t() call sites vs. DEFAULT_MESSAGES", () => {
+  it("every literal key passed to t() across every package exists in the shipped dictionary", () => {
+    const missing = collectMissingKeys();
+    if (missing.length > 0) {
+      const report = missing.map((m) => `  ${m.file}: t("${m.key}")`).join("\n");
+      throw new Error(
+        `Found ${missing.length} t() call(s) whose key has no entry in ` +
+          `packages/ui/src/components/locale-provider/messages.ts — this key would ` +
+          `render as the raw key string to end users instead of English copy:\n${report}`,
+      );
+    }
+    expect(missing).toEqual([]);
+  });
+});