@elabs-ai/components-ui 4.0.0 → 4.2.0

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

@@ -0,0 +1,203 @@
+"use client";
+
+import { forwardRef, useId, useMemo, useState, type ComponentProps } from "react";
+import { ChevronDown, Search } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Badge } from "../badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible";
+import { Input } from "../input";
+import { Kbd } from "../kbd";
+import { useLocale } from "../locale-provider";
+import { StatePanel } from "../state-panel";
+
+/** One keyboard shortcut: the action it performs and its ordered key tokens. */
+export interface Shortcut {
+  action: string;
+  /** Ordered key tokens, e.g. `["⌘", "K"]`. Rendered via {@link Kbd}. */
+  keys: string[];
+}
+
+/**
+ * A named group of shortcuts. There is deliberately no `count` field — the
+ * displayed count is always derived from `items.length`, never supplied by
+ * the caller (see issue #113: brainless, the upstream this was adapted from,
+ * shipped a `count` with no `items`, an honestly-unverifiable number).
+ */
+export interface ShortcutGroup {
+  id: string;
+  label: string;
+  items: Shortcut[];
+  /** Whether this group starts expanded when search is inactive. @default false */
+  defaultOpen?: boolean;
+}
+
+export interface KeyboardShortcutsProps extends Omit<ComponentProps<"div">, "onChange"> {
+  groups: ShortcutGroup[];
+  /** Show the built-in search field. @default true */
+  searchable?: boolean;
+  /** Controlled search query, if the app owns it. */
+  query?: string;
+  onQueryChange?: (query: string) => void;
+}
+
+function matchesQuery(shortcut: Shortcut, normalizedQuery: string): boolean {
+  if (shortcut.action.toLowerCase().includes(normalizedQuery)) return true;
+  return shortcut.keys.some((key) => key.toLowerCase().includes(normalizedQuery));
+}
+
+interface FilteredGroup {
+  group: ShortcutGroup;
+  items: Shortcut[];
+}
+
+/**
+ * A grouped, searchable presentation of a shortcut set. Renders **content
+ * only** — the app supplies the `Dialog`/`Sheet` shell, so the same
+ * component works in a modal, a settings page or a sidebar.
+ *
+ * Group counts are always derived from `items.length` (or the number of
+ * matching items while a search is active) — never a value passed in.
+ */
+export const KeyboardShortcuts = forwardRef<HTMLDivElement, KeyboardShortcutsProps>(
+  function KeyboardShortcuts(
+    { groups, searchable = true, query: queryProp, onQueryChange, className, ...props },
+    ref,
+  ) {
+    const isControlled = queryProp !== undefined;
+    const [internalQuery, setInternalQuery] = useState("");
+    const query = isControlled ? queryProp : internalQuery;
+    const normalizedQuery = query.trim().toLowerCase();
+    const isFiltering = normalizedQuery.length > 0;
+    const { t } = useLocale();
+    const searchId = useId();
+
+    const setQuery = (next: string) => {
+      if (!isControlled) setInternalQuery(next);
+      onQueryChange?.(next);
+    };
+
+    const filteredGroups = useMemo<FilteredGroup[]>(() => {
+      return groups
+        .map((group) => ({
+          group,
+          items: isFiltering
+            ? group.items.filter((item) => matchesQuery(item, normalizedQuery))
+            : group.items,
+        }))
+        .filter(({ items }) => items.length > 0);
+    }, [groups, isFiltering, normalizedQuery]);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="keyboard-shortcuts"
+        className={cn("flex flex-col gap-4", className)}
+        {...props}
+      >
+        {searchable && (
+          <div data-slot="keyboard-shortcuts-search" className="relative">
+            <label htmlFor={searchId} className="sr-only">
+              Search shortcuts
+            </label>
+            <Search
+              aria-hidden="true"
+              className="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+            />
+            <Input
+              id={searchId}
+              type="search"
+              autoComplete="off"
+              placeholder={t("ui.keyboardShortcuts.searchPlaceholder")}
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              className="ps-8"
+            />
+          </div>
+        )}
+
+        {filteredGroups.length === 0 ? (
+          <div data-slot="keyboard-shortcuts-empty">
+            <StatePanel
+              kind="empty"
+              title={t("ui.keyboardShortcuts.emptyTitle")}
+              description={
+                isFiltering
+                  ? t("ui.keyboardShortcuts.emptyFiltered", { query: query.trim() })
+                  : t("ui.keyboardShortcuts.empty")
+              }
+            />
+          </div>
+        ) : (
+          <div data-slot="keyboard-shortcuts-groups" className="flex flex-col gap-2">
+            {filteredGroups.map(({ group, items }) => (
+              <ShortcutGroupItem
+                key={group.id}
+                group={group}
+                items={items}
+                forceOpen={isFiltering}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+interface ShortcutGroupItemProps {
+  group: ShortcutGroup;
+  /** Items to display — the full group, or the subset matching the active search. */
+  items: Shortcut[];
+  /** Force the group open (search is active) without discarding the user's manual toggle. */
+  forceOpen: boolean;
+}
+
+function ShortcutGroupItem({ group, items, forceOpen }: ShortcutGroupItemProps) {
+  const [open, setOpen] = useState(group.defaultOpen ?? false);
+
+  return (
+    <Collapsible
+      data-slot="keyboard-shortcuts-group"
+      open={forceOpen || open}
+      onOpenChange={setOpen}
+      className="rounded-md border"
+    >
+      <CollapsibleTrigger
+        data-slot="keyboard-shortcuts-group-trigger"
+        className={cn(
+          "flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-start",
+          "focus-ring",
+          "[&[data-state=open]>svg]:rotate-180",
+        )}
+      >
+        <span className="flex items-center gap-2">
+          <span className="text-body font-medium text-foreground">{group.label}</span>
+          {/* Derived from items.length — never a caller-supplied count (see #113). */}
+          <Badge variant="secondary">{items.length}</Badge>
+        </span>
+        <ChevronDown
+          aria-hidden="true"
+          className="size-4 shrink-0 text-muted-foreground transition-transform duration-base ease-standard"
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent data-slot="keyboard-shortcuts-group-content">
+        <ul className="flex flex-col gap-1 px-3 pb-3">
+          {items.map((item, index) => (
+            <li
+              key={`${item.action}-${index}`}
+              data-slot="keyboard-shortcuts-item"
+              className="flex items-center justify-between gap-4 py-1"
+            >
+              <span className="text-body text-muted-foreground">{item.action}</span>
+              <span className="flex items-center gap-1">
+                {item.keys.map((key, keyIndex) => (
+                  <Kbd key={`${key}-${keyIndex}`}>{key}</Kbd>
+                ))}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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/link-preview/link-preview.tsx

@@ -115,7 +115,7 @@ export const LinkPreviewCard = forwardRef<HTMLDivElement, LinkPreviewCardProps>(
           // When `href` is present: stretched-link focus ring (via focus-within on
           // the container, not the <a>) + hover lift + motion-tokened transition.
           href &&
-            "cursor-pointer transition-[translate,box-shadow,border-color] duration-fast ease-standard focus-within:outline-none focus-within:ring-2 focus-within:ring-ring hover:-translate-y-0.5 hover:border-ring/40 hover:shadow-md motion-reduce:hover:translate-y-0",
+            "cursor-pointer transition-[translate,box-shadow,border-color] duration-fast ease-standard focus-ring-within hover:-translate-y-0.5 hover:border-ring/40 hover:shadow-md motion-reduce:hover:translate-y-0",
           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/index.ts

@@ -5,4 +5,9 @@ export {
   type LocaleProviderProps,
   type Messages,
 } from "./locale-provider";
-export { DEFAULT_MESSAGES } from "./messages";
+export {
+  DEFAULT_MESSAGES,
+  type MessageValue,
+  type PluralCategory,
+  type PluralMessage,
+} from "./messages";

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([]);
+  });
+});