@elabs-ai/components-ui 4.1.0 → 4.2.0

package/src/components/virtual-select/virtual-select.tsx

@@ -19,6 +19,7 @@ import { Badge } from "../badge";
 import { Button } from "../button";
 import { Input } from "../input";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { useLocale } from "../locale-provider";
 import { type VirtualSelectOption, useVirtualListbox } from "./use-virtual-listbox";
 
 export type { VirtualSelectOption };
@@ -85,9 +86,9 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
       value,
       defaultValue,
       onValueChange,
-      placeholder = "Select…",
-      searchPlaceholder = "Search…",
-      emptyText = "No results.",
+      placeholder,
+      searchPlaceholder,
+      emptyText,
       estimateOptionHeight = 32,
       maxListHeight = "18rem",
       className,
@@ -95,6 +96,11 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
     },
     ref,
   ) {
+    const { t } = useLocale();
+    const resolvedPlaceholder = placeholder ?? t("ui.virtualSelect.placeholder");
+    const resolvedSearchPlaceholder = searchPlaceholder ?? t("ui.virtualSelect.searchPlaceholder");
+    const resolvedEmptyText = emptyText ?? t("noResults");
+
     // ------------------------------------------------------------------
     // Controlled / uncontrolled
     // ------------------------------------------------------------------
@@ -135,6 +141,15 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
       [options, query],
     );
 
+    // O(1) label lookup for the trigger's selected chips — `selected.map(find)`
+    // is O(selected.length * options.length) and options lists here can be
+    // large (that's the whole point of virtualizing).
+    const optionByValue = useMemo(() => {
+      const map = new Map<string, VirtualSelectOption>();
+      for (const o of options) map.set(o.value, o);
+      return map;
+    }, [options]);
+
     // ------------------------------------------------------------------
     // Virtualizer
     // ------------------------------------------------------------------
@@ -184,26 +199,45 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
     const listboxId = `${uid}-listbox`;
     const optionId = (index: number) => `${uid}-option-${index}`;
 
-    // Focus the search input when the popover opens
+    // Focus the search input when the popover opens. The timeout id is
+    // tracked so it can be cancelled on unmount (or a rapid re-close) —
+    // otherwise it fires after the component (and `searchRef`'s DOM node)
+    // is gone, or focuses a NEW popover's input on a fast toggle.
+    const focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(
+      () => () => {
+        if (focusTimeoutRef.current != null) clearTimeout(focusTimeoutRef.current);
+      },
+      [],
+    );
+
     const handleOpenChange = useCallback((next: boolean) => {
       setOpen(next);
+      if (focusTimeoutRef.current != null) {
+        clearTimeout(focusTimeoutRef.current);
+        focusTimeoutRef.current = null;
+      }
       if (next) {
         // Defer one frame so Radix has mounted the portal
-        setTimeout(() => searchRef.current?.focus(), 0);
+        focusTimeoutRef.current = setTimeout(() => {
+          focusTimeoutRef.current = null;
+          searchRef.current?.focus();
+        }, 0);
       }
     }, []);
 
     // ------------------------------------------------------------------
     // Trigger label
     // ------------------------------------------------------------------
-    const selectedLabels = selected.map((v) => {
-      const opt = options.find((o) => o.value === v);
-      return { value: v, label: opt?.label ?? v };
-    });
+    const selectedLabels = selected.map((v) => ({
+      value: v,
+      label: optionByValue.get(v)?.label ?? v,
+    }));
 
     const triggerContent =
       selectedLabels.length === 0 ? (
-        <span className="text-muted-foreground">{placeholder}</span>
+        <span className="text-muted-foreground">{resolvedPlaceholder}</span>
       ) : multiple ? (
         <>
           {selectedLabels.slice(0, 2).map((l) => (
@@ -247,7 +281,7 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
             aria-expanded={open}
             aria-haspopup="listbox"
             aria-controls={listboxId}
-            className={cn("h-auto min-h-9 w-64 justify-between font-normal", className)}
+            className={cn("h-auto min-h-9 w-full justify-between font-normal", className)}
             {...props}
           >
             <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start">
@@ -258,7 +292,7 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
         </PopoverTrigger>
 
         <PopoverContent
-          className="w-64 p-0"
+          className="w-[var(--radix-popover-trigger-width)] min-w-64 p-0"
           align="start"
           // Prevent Radix from stealing focus so it can go to the input
           onOpenAutoFocus={(e) => e.preventDefault()}
@@ -270,17 +304,21 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
               type="text"
               autoComplete="off"
               spellCheck={false}
-              placeholder={searchPlaceholder}
+              placeholder={resolvedSearchPlaceholder}
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => onInputKeyDown(e)}
-              aria-label={searchPlaceholder}
+              aria-label={resolvedSearchPlaceholder}
               aria-autocomplete="list"
               aria-controls={listboxId}
               aria-activedescendant={
                 activeIndex >= 0 && activeMounted ? optionId(activeIndex) : undefined
               }
-              className="h-8 border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+              // Border/shadow removed (sits inside the popover's own bordered
+              // header strip) but the base `Input` focus-ring is kept — no
+              // compound ring lives elsewhere on this control, so silencing it
+              // would leave a re-focused search box with no visible indicator.
+              className="h-8 border-0 shadow-none"
             />
           </div>
 
@@ -318,7 +356,7 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
                         transform: `translateY(${virtualRow.start}px)`,
                       }}
                       className={cn(
-                        "flex cursor-pointer select-none items-center rounded-sm px-2 text-sm outline-none",
+                        "flex cursor-pointer select-none items-center rounded-sm px-2 text-body outline-none",
                         "transition-colors duration-fast motion-reduce:transition-none",
                         isActive && "bg-accent text-accent-foreground",
                         !isActive && "hover:bg-accent hover:text-accent-foreground",
@@ -349,9 +387,9 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
             <div
               role="status"
               aria-live="polite"
-              className="px-2 py-6 text-center text-sm text-muted-foreground"
+              className="px-2 py-6 text-center text-body text-muted-foreground"
             >
-              {emptyText}
+              {resolvedEmptyText}
             </div>
           ) : null}
         </PopoverContent>

package/src/components/wizard/wizard.test.tsx

@@ -64,4 +64,13 @@ describe("Wizard", () => {
     await user.click(screen.getByRole("button", { name: "Next" }));
     await waitFor(() => expect(screen.getByRole("button", { name: "Finish" })).toBeInTheDocument());
   });
+
+  it("names the completed-step indicator button — it renders only an icon", async () => {
+    const user = userEvent.setup();
+    renderWizard();
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    // The first step's indicator now shows a checkmark glyph with no text
+    // content — without an accessible name it would be an unlabelled button.
+    expect(screen.getByRole("button", { name: "Account — completed" })).toBeInTheDocument();
+  });
 });

package/src/components/wizard/wizard.tsx

@@ -232,8 +232,12 @@ export const WizardSteps = forwardRef<HTMLOListElement, WizardStepsProps>(functi
               type="button"
               disabled={!isClickable}
               onClick={() => goTo(index)}
+              // The completed state renders only a checkmark glyph (hidden
+              // from AT below) — with no text content, the button would
+              // otherwise have no accessible name at all.
+              aria-label={isComplete ? `${meta.title} — completed` : undefined}
               className={cn(
-                "flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium tabular-nums",
+                "flex size-7 shrink-0 items-center justify-center rounded-full border text-meta font-medium tabular-nums",
                 "focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                 isActive && "border-primary bg-primary text-primary-foreground",
                 // #399 — the step NUMBER is text on a `/10` wash, not plate ink
@@ -248,14 +252,14 @@ export const WizardSteps = forwardRef<HTMLOListElement, WizardStepsProps>(functi
             <span className="flex min-w-0 flex-col">
               <span
                 className={cn(
-                  "truncate text-sm font-medium",
+                  "truncate text-body font-medium",
                   isActive ? "text-foreground" : "text-muted-foreground",
                 )}
               >
                 {meta.title}
               </span>
               {meta.description && (
-                <span className="truncate text-xs text-muted-foreground">{meta.description}</span>
+                <span className="truncate text-meta text-muted-foreground">{meta.description}</span>
               )}
             </span>
           </li>
@@ -309,7 +313,11 @@ export const WizardStep = forwardRef<HTMLDivElement, WizardStepProps>(function W
       role="group"
       aria-labelledby={`${baseId}-step-${step}`}
       tabIndex={-1}
-      className={cn("min-w-0 flex-1 focus-visible:outline-none", className)}
+      // Programmatically focused on step change (`regionRef.current?.focus()`
+      // above) — `focus-ring` gives that a visible indicator instead of
+      // silently discarding the browser's default outline (mirrors
+      // `DialogBody`'s same tabIndex={-1}-container precedent).
+      className={cn("min-w-0 flex-1 focus-ring", className)}
       {...props}
     >
       {children}

package/src/index.ts

@@ -21,6 +21,11 @@ export { useIsMobile } from "./lib/use-mobile";
 // Browser file-download mechanics — one home for the Blob/URL → <a download> dance
 // (shared by ConversationDownload, downloadCsv, and Gallery). SSR-guarded.
 export { downloadBlob, downloadUrl } from "./lib/download";
+// Shared CSV (RFC 4180) value stringification + injection-guarded field
+// quoting — one home for logic `@elabs-ai/components-data`'s `toCsv` and
+// `@elabs-ai/components-charts`'s ChartFrame serializer both need (charts may
+// not depend on data, so both build on this instead).
+export { csvStringifyValue, csvQuoteField } from "./lib/csv";
 // Clipboard write + transient "copied" flag — one implementation for the
 // editor's copy button and `CopyableValue`, so the timing and the
 // "no clipboard in this context" answer are defined once.

package/src/lib/cn.ts

@@ -17,6 +17,15 @@ const twMerge = extendTailwindMerge({
       "font-size": [{ text: TEXT_ROLES }],
       // `font-display` is the display-face seam (sibling of font-mono, #187).
       "font-family": [{ font: ["display"] }],
+      // Theme-driven control/table knobs (themes.css § CONTROL UTILITIES and the
+      // `@theme inline` bridge) — so a caller's `h-8` / `rounded-none` /
+      // `font-bold` / `shadow-none` still replaces the token default.
+      "font-weight": [{ font: ["control", "table-header"] }],
+      rounded: [{ rounded: ["control"] }],
+      shadow: [{ shadow: ["input"] }],
+      h: [{ h: ["control", "control-sm", "control-lg", "header"] }],
+      size: [{ size: ["control", "control-sm", "control-lg"] }],
+      "min-w": [{ "min-w": ["control", "control-sm", "control-lg"] }],
     },
   },
 });

package/src/lib/csv.ts

@@ -0,0 +1,48 @@
+/**
+ * Shared CSV (RFC 4180) primitives — value stringification + injection-guarded
+ * field quoting. Pure, no DOM, SSR-safe.
+ *
+ * The single home for logic previously duplicated between `@elabs-ai/components-data`'s
+ * `toCsv` and `@elabs-ai/components-charts`'s `ChartFrame` local serializer (charts may not
+ * depend on data per the one-way package rule, so both import this instead of
+ * one importing the other).
+ */
+
+/** Leading characters a spreadsheet may interpret as a formula trigger. */
+const INJECTION_TRIGGER = /^[=+\-@]/;
+
+/**
+ * True when `field` parses as a plain finite number, e.g. "-5" or "+12.3".
+ * A negative/positive number is not a formula — only guard fields that
+ * START with a trigger character AND are not actually numeric.
+ */
+function isNumericLiteral(field: string): boolean {
+  const trimmed = field.trim();
+  if (trimmed === "") return false;
+  return Number.isFinite(Number(trimmed));
+}
+
+/** Stringify a cell value for CSV: dates → ISO, objects → JSON, else `String()`. */
+export function csvStringifyValue(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (value instanceof Date) return value.toISOString();
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+/**
+ * Quote/escape one CSV field: prefixes a leading `'` when the field starts
+ * with a formula-trigger character and is not a plain number (CSV-injection
+ * guard), then RFC-4180-quotes when it contains the delimiter, a double
+ * quote, or a line break.
+ */
+export function csvQuoteField(field: string, delimiter: string): string {
+  let out = field;
+  if (INJECTION_TRIGGER.test(out) && !isNumericLiteral(out)) {
+    out = "'" + out;
+  }
+  if (out.includes(delimiter) || out.includes('"') || out.includes("\n") || out.includes("\r")) {
+    return '"' + out.replaceAll('"', '""') + '"';
+  }
+  return out;
+}

package/src/lib/diff-rows.ts

@@ -1,3 +1,5 @@
+"use client";
+
 /**
  * The context-run-collapsing hunk-windowing algorithm behind `DiffView`
  * (`@elabs-ai/components-ai`, #102, where it shipped as the private

package/src/lib/merge-refs.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import type { ForwardedRef } from "react";
 
 /**

package/src/lib/use-controllable-state.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+
+/**
+ * Shared controlled/uncontrolled state primitive.
+ *
+ * `isControlled` is fixed by whether `controlledValue` is `undefined` on the
+ * FIRST render (the usual React contract — don't flip modes across renders).
+ * The setter always does BOTH of its jobs, unconditionally:
+ * - uncontrolled: updates the internal state (so the next render reflects it)
+ * - always: calls `onChange`, so a listener attached to an otherwise
+ *   uncontrolled component still observes every change.
+ *
+ * A hand-rolled `value ?? internal` + `onChange ? onChange(v) : setInternal(v)`
+ * ternary gets this wrong in two ways: an uncontrolled component with an
+ * `onChange` handler stops updating its own displayed value (the ternary
+ * only ever takes one branch), and clearing a controlled value to `undefined`
+ * falls through to a stale `internal` instead of showing "no value" — see
+ * Combobox/DatePicker (#reviewed 1.7).
+ */
+export function useControllableState<T>(
+  controlledValue: T | undefined,
+  defaultValue: T,
+  onChange?: (value: T) => void,
+): [T, (next: T) => void] {
+  // Locked on mount, not recomputed every render: once a caller passes a
+  // defined `value`, the component stays controlled even if a later render
+  // clears it to `undefined` (e.g. "no date selected"). Recomputing
+  // `value !== undefined` on every render would flip a cleared controlled
+  // value to the (stale) uncontrolled `internal` state instead of showing
+  // "empty" — see DateRangePicker (#reviewed 1.7).
+  const isControlledRef = useRef(controlledValue !== undefined);
+  const isControlled = isControlledRef.current;
+  const [internal, setInternal] = useState<T>(defaultValue);
+  const value = isControlled ? (controlledValue as T) : internal;
+
+  const setValue = useCallback(
+    (next: T) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange],
+  );
+
+  return [value, setValue];
+}

package/src/lib/use-mobile.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { useIsMobile } from "./use-mobile";
+
+function setViewportWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", {
+    writable: true,
+    configurable: true,
+    value: width,
+  });
+}
+
+describe("useIsMobile", () => {
+  const originalInnerWidth = window.innerWidth;
+
+  afterEach(() => {
+    setViewportWidth(originalInnerWidth);
+  });
+
+  it("reports the correct value on the very first render — no desktop flash", () => {
+    setViewportWidth(500);
+    const renderedValues: boolean[] = [];
+    function Probe() {
+      const isMobile = useIsMobile();
+      renderedValues.push(isMobile);
+      return <span>{String(isMobile)}</span>;
+    }
+    render(<Probe />);
+
+    // A stale `false` in the recorded renders means the mobile viewport
+    // still rendered the desktop layout for at least one paint before the
+    // effect corrected it — i.e. a flash.
+    expect(renderedValues.length).toBeGreaterThan(0);
+    expect(renderedValues.every((value) => value === true)).toBe(true);
+    expect(screen.getByText("true")).toBeInTheDocument();
+  });
+
+  it("reports false on a desktop-width viewport", () => {
+    setViewportWidth(1280);
+    function Probe() {
+      const isMobile = useIsMobile();
+      return <span>{String(isMobile)}</span>;
+    }
+    render(<Probe />);
+    expect(screen.getByText("false")).toBeInTheDocument();
+  });
+});

package/src/lib/use-mobile.ts

@@ -1,7 +1,27 @@
-import { useEffect, useState } from "react";
+"use client";
+
+import { useSyncExternalStore } from "react";
 
 const MOBILE_BREAKPOINT = 768;
 
+function subscribe(breakpoint: number, onStoreChange: () => void) {
+  const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+  mql.addEventListener("change", onStoreChange);
+  return () => mql.removeEventListener("change", onStoreChange);
+}
+
+function getSnapshot(breakpoint: number) {
+  return window.innerWidth < breakpoint;
+}
+
+// SSR / first-paint snapshot: no viewport to measure yet, so report "not
+// mobile" rather than guessing — this must match what the server rendered to
+// avoid a hydration mismatch, and useSyncExternalStore re-syncs to the real
+// value on the client before paint (no desktop-layout flash).
+function getServerSnapshot() {
+  return false;
+}
+
 /**
  * Returns true when the viewport is below `breakpoint` (default 768px, the
  * mobile breakpoint). Additive optional argument (ADR 0035 §5) — every
@@ -10,13 +30,9 @@ const MOBILE_BREAKPOINT = 768;
  * second hook.
  */
 export function useIsMobile(breakpoint: number = MOBILE_BREAKPOINT): boolean {
-  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
-  useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
-    const onChange = () => setIsMobile(window.innerWidth < breakpoint);
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < breakpoint);
-    return () => mql.removeEventListener("change", onChange);
-  }, [breakpoint]);
-  return !!isMobile;
+  return useSyncExternalStore(
+    (onStoreChange) => subscribe(breakpoint, onStoreChange),
+    () => getSnapshot(breakpoint),
+    getServerSnapshot,
+  );
 }

package/dist/chunk-JKPPTL63.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/label/label.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * The semantic type roles (`--text-<role>` tokens → `text-<role>` utilities, #187).\n * tailwind-merge doesn't know custom theme keys, so without registration it\n * classifies `text-title` as a text COLOR — and `cn(\"text-kpi\", \"text-foreground\")`\n * would silently drop the role. Registering the roles in the `font-size` class\n * group makes role-vs-role and role-vs-raw-size conflicts resolve correctly while\n * keeping role + color independent.\n */\nconst TEXT_ROLES = [\"display\", \"title\", \"subtitle\", \"body\", \"caption\", \"meta\", \"kpi\", \"code\"];\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [{ text: TEXT_ROLES }],\n      // `font-display` is the display-face seam (sibling of font-mono, #187).\n      \"font-family\": [{ font: [\"display\"] }],\n    },\n  },\n});\n\n/**\n * Merge class names with conflict resolution. `clsx` handles conditionals;\n * `tailwind-merge` ensures later Tailwind utilities win (e.g. `p-2 p-4` -> `p-4`).\n * Use this in every component that accepts a `className` prop.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cn } from \"../../lib/cn\";\n\nexport const Label = forwardRef<\n  ElementRef<typeof LabelPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(function Label({ className, ...props }, ref) {\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAUpC,IAAM,aAAa,CAAC,WAAW,SAAS,YAAY,QAAQ,WAAW,QAAQ,OAAO,MAAM;AAE5F,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa,CAAC,EAAE,MAAM,WAAW,CAAC;AAAA;AAAA,MAElC,eAAe,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC;AAAA,IACvC;AAAA,EACF;AACF,CAAC;AAOM,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AC9BA,SAAS,kBAAkE;AAC3E,YAAY,oBAAoB;AAQ5B;AALG,IAAM,QAAQ,WAGnB,SAASA,OAAM,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC7C,SACE;AAAA,IAAgB;AAAA,IAAf;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["Label"]}