@elabs-ai/components-ui 4.0.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-ui",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,6 +21,10 @@
     "./lib/cn": {
       "types": "./dist/lib/cn.d.ts",
       "default": "./dist/lib/cn.js"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "default": "./dist/form.js"
     }
   },
   "publishConfig": {
@@ -28,7 +32,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-aspect-ratio": "^1.1.1",
@@ -65,19 +68,28 @@
     "input-otp": "^1.4.1",
     "lucide-react": "^0.577.0",
     "react-day-picker": "^9.4.4",
-    "react-hook-form": "^7.54.2",
     "react-resizable-panels": "^2.1.7",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.6.0",
-    "vaul": "^1.1.2",
-    "zod": "^3.24.1"
+    "vaul": "^1.1.2"
   },
   "peerDependencies": {
+    "@hookform/resolvers": "^3.9.1",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "@elabs-ai/components-tokens": "4.0.0"
+    "react-hook-form": "^7.54.2",
+    "@elabs-ai/components-tokens": "4.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@hookform/resolvers": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@hookform/resolvers": "^3.9.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
@@ -88,12 +100,14 @@
     "jsdom": "^25.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
     "vitest": "^3.0.2",
+    "zod": "^3.24.1",
     "@elabs-ai/components-eslint-config": "0.1.0",
     "@elabs-ai/components-typescript-config": "0.1.0",
-    "@elabs-ai/components-tokens": "4.0.0"
+    "@elabs-ai/components-tokens": "4.1.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup",

package/src/_peer-deps.test.ts

@@ -0,0 +1,59 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Regression guard for issue #26 — `react-hook-form` / `@hookform/resolvers`
+ * are used ONLY by the RHF-bound `Form` family
+ * (`packages/ui/src/components/form/form.tsx`); `FieldRow` and every other
+ * component in this package render from plain props and never import either.
+ *
+ * A consumer who never imports `Form` should not be forced to install (or
+ * have their bundler resolve) react-hook-form. Declaring both as
+ * `dependencies` defeats that — npm/pnpm install them unconditionally for
+ * every consumer of `@elabs-ai/components-ui`, regardless of whether `Form`
+ * is ever imported. This test locks the fix: both packages are declared as
+ * OPTIONAL peers, and neither reappears as a hard `dependency`.
+ *
+ * `zod` is used only inside `form.stories.tsx` (the `zodResolver` demo) and
+ * never in shipped runtime source — it belongs in `devDependencies`, never as
+ * a runtime `dependency` or a peer a consumer must install.
+ */
+const PACKAGE_JSON_PATH = join(dirname(fileURLToPath(import.meta.url)), "..", "package.json");
+
+function readPackageJson(): {
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+  peerDependencies?: Record<string, string>;
+  peerDependenciesMeta?: Record<string, { optional?: boolean }>;
+} {
+  return JSON.parse(readFileSync(PACKAGE_JSON_PATH, "utf8"));
+}
+
+describe("packages/ui/package.json — react-hook-form is an optional peer, not a hard dependency", () => {
+  const pkg = readPackageJson();
+
+  it.each(["react-hook-form", "@hookform/resolvers"])(
+    "declares %s as an OPTIONAL peerDependency",
+    (name) => {
+      expect(pkg.dependencies?.[name]).toBeUndefined();
+      expect(pkg.peerDependencies?.[name]).toBeTruthy();
+      expect(pkg.peerDependenciesMeta?.[name]?.optional).toBe(true);
+    },
+  );
+
+  it("still lists react-hook-form + @hookform/resolvers as devDependencies for the workspace's own build/test", () => {
+    // The package's own `Form` tests/stories (and `form.tsx` itself) need the
+    // real library to typecheck/run inside this workspace — peer alone does
+    // not guarantee resolution here, only for an external consumer.
+    expect(pkg.devDependencies?.["react-hook-form"]).toBeTruthy();
+    expect(pkg.devDependencies?.["@hookform/resolvers"]).toBeTruthy();
+  });
+
+  it("declares zod as a devDependency only — never a runtime dependency or peer", () => {
+    expect(pkg.dependencies?.zod).toBeUndefined();
+    expect(pkg.peerDependencies?.zod).toBeUndefined();
+    expect(pkg.devDependencies?.zod).toBeTruthy();
+  });
+});

package/src/blocks-comparison-table.stories.tsx

@@ -7,7 +7,7 @@
  * cells, a price row, and a per-plan CTA row. Reuses brand-ui's strongest
  * assets — Table + Badge + Button — and stays token-only.
  *
- * Reads in all three themes. Verify with globals=theme:<slug>.
+ * Reads in every theme. Verify with globals=theme:<slug>.
  */
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Check, Minus } from "lucide-react";
@@ -152,7 +152,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "The canonical plan/feature comparison matrix (brand-ui's Compare gap): a header with one featured column (badge + recessed wash), feature rows with check / dash / value cells, a price row, and a per-plan CTA row. Composes Table + Badge + Button; semantic tokens only; reads in all three themes.",
+          "The canonical plan/feature comparison matrix (brand-ui's Compare gap): a header with one featured column (badge + recessed wash), feature rows with check / dash / value cells, a price row, and a per-plan CTA row. Composes Table + Badge + Button; semantic tokens only; reads in every theme.",
       },
     },
   },

package/src/components/accordion/accordion.tsx

@@ -21,7 +21,7 @@ export const AccordionTrigger = forwardRef<
       <AccordionPrimitive.Trigger
         ref={ref}
         className={cn(
-          "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&[data-state=open]>svg]:rotate-180",
+          "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline focus-ring [&[data-state=open]>svg]:rotate-180",
           className,
         )}
         {...props}

package/src/components/advanced-group/advanced-group.tsx

@@ -85,7 +85,7 @@ export function AdvancedGroup({
     >
       <CollapsibleTrigger
         data-slot="advanced-group-trigger"
-        className="group -mx-2 flex items-center gap-2 rounded-md px-2 py-1.5 text-body font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="group -mx-2 flex items-center gap-2 rounded-md px-2 py-1.5 text-body font-medium hover:bg-accent hover:text-accent-foreground focus-ring"
       >
         <ChevronDown
           aria-hidden="true"

package/src/components/alert/alert.tsx

@@ -11,8 +11,11 @@ export const alertVariants = cva(
         info: "border-info/40 bg-info/10 text-foreground",
         success: "border-success/40 bg-success/10 text-foreground",
         warning: "border-warning/50 bg-warning/10 text-foreground",
+        // #124: the bare `text-destructive` set the ambient colour for the
+        // Title/Description running text — ink rung. `[&>svg]:text-destructive`
+        // (the icon mark) is unchanged.
         destructive:
-          "border-destructive/40 bg-destructive/10 text-destructive [&>svg]:text-destructive",
+          "border-destructive/40 bg-destructive/10 text-destructive-text [&>svg]:text-destructive",
       },
     },
     defaultVariants: { variant: "default" },

package/src/components/app-shell/app-shell.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
 import { AppShell } from "./app-shell";
 import { TopNav } from "../top-nav";
 import { PageShell } from "../page-shell";
@@ -6,7 +7,7 @@ import { SectionHeader } from "../section-header";
 import { Button } from "../button";
 
 const meta = {
-  title: "Layout/App Shell/Basic",
+  title: "Layout/App Shell/Minimal",
   component: AppShell,
   parameters: { layout: "fullscreen" },
 } satisfies Meta<typeof AppShell>;
@@ -46,8 +47,10 @@ export const Default: Story = {
         <PageShell
           header={
             <SectionHeader
+              // The page's own title, so it owns the document outline root.
+              as="h1"
               title="Overview"
-              description="A lightweight generic shell. For full sidebar behavior use the Sidebar primitive."
+              description="A minimal, unstyled two-region shell — the honest answer for a simple layout. For full sidebar behavior use the Sidebar primitive; for a fully wired enterprise console see Layout/App Shell/Flagship."
             />
           }
         >
@@ -58,4 +61,43 @@ export const Default: Story = {
       </AppShell>
     </div>
   ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // The shell ships a skip link, so a keyboard user can pass the nav rail
+    // instead of tabbing through it on every route (WCAG 2.4.1). Resolve the
+    // TARGET FROM THE LINK, never from a hard-coded `#main-content`: querying
+    // the id directly stays green when the link and the target are deleted
+    // together.
+    const skip = canvas.getByRole("link", { name: "Skip to main content" });
+    const targetId = (skip.getAttribute("href") ?? "").replace(/^#/, "");
+    await expect(targetId).not.toBe("");
+    const target = canvasElement.querySelector(`#${CSS.escape(targetId)}`) as HTMLElement;
+    await expect(target).toBeVisible();
+    await expect(target.tagName).toBe("MAIN");
+    await expect(canvas.getByRole("main")).toBe(target);
+
+    // …and here <main> IS the scroll port (in the registry blocks the skip
+    // target and the port are separate elements), so it takes a REAL tab stop,
+    // not the `-1` a pure skip target would carry: a region that scrolls has to
+    // be keyboard-operable even when nothing inside it is focusable (WCAG
+    // 2.1.1, axe `scrollable-region-focusable`). Read as an ATTRIBUTE — the
+    // `tabIndex` IDL getter answers -1 for any non-focusable element whether or
+    // not anyone set it, so it cannot tell "-1 was set" from "nothing was set".
+    await expect(target).toHaveAttribute("tabindex", "0");
+    await expect(getComputedStyle(target).overflowY).toBe("auto");
+    // The INSET rung: the shell root above carries `overflow-hidden`, which
+    // clips both layers of the plain `focus-ring`. Asserting only that
+    // `focus-ring-inset` is present would still pass with both classes on the
+    // element — and then the clipped one is what paints.
+    await expect(target.classList.contains("focus-ring-inset")).toBe(true);
+    await expect(target.classList.contains("focus-ring")).toBe(false);
+
+    // The outline has a root. axe cannot catch its absence here:
+    // `page-has-heading-one` is a best-practice rule outside the wcag2a/wcag2aa
+    // tag set, and `heading-order` passes happily on levels that start at 2.
+    const h1s = canvasElement.querySelectorAll("h1");
+    await expect(h1s.length).toBe(1);
+    await expect(canvas.getByRole("heading", { level: 1 })).toHaveTextContent("Overview");
+  },
 };

package/src/components/app-shell/app-shell.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { cn } from "../../lib/cn";
+import { SkipLink } from "../skip-link";
 
 export interface AppShellProps {
   /** Persistent left navigation (often a <Sidebar />). */
@@ -10,21 +11,53 @@ export interface AppShellProps {
   className?: string;
   /** Class for the scrolling main content region. */
   mainClassName?: string;
+  /**
+   * The `<main>` region's id, and the skip link's target. Override it when a
+   * page mounts more than one shell — two elements sharing `main-content`
+   * would make the skip link ambiguous. @default "main-content"
+   */
+  mainId?: string;
 }
 
 /**
  * App-first layout: fixed-height viewport with an optional sidebar, a top bar,
  * and a scrollable main region. Pure layout — bring your own nav components.
  */
-export function AppShell({ sidebar, topNav, children, className, mainClassName }: AppShellProps) {
+export function AppShell({
+  sidebar,
+  topNav,
+  children,
+  className,
+  mainClassName,
+  mainId = "main-content",
+}: AppShellProps) {
   return (
     <div
       className={cn("flex h-dvh w-full overflow-hidden bg-background text-foreground", className)}
     >
+      {/* The first focusable element of the shell, so a keyboard user can pass
+          the nav rail instead of tabbing through it on every route (WCAG 2.4.1).
+          All four registry app-shell blocks ship one; the primitive they sit
+          beside must not be the exception, and it is the surface with the widest
+          reach — it is imported, not copy-owned. */}
+      <SkipLink targetId={mainId} />
       {sidebar ? <div className="hidden md:flex">{sidebar}</div> : null}
       <div className="flex min-w-0 flex-1 flex-col">
         {topNav}
-        <main className={cn("min-h-0 flex-1 overflow-y-auto", mainClassName)}>{children}</main>
+        {/* `<main>` IS the scroll port here (in the blocks the skip target and
+            the scroll port are separate elements), so it takes `tabIndex={0}`
+            rather than `{-1}`: a region that scrolls has to be keyboard-operable
+            even when the content inside it is not focusable (WCAG 2.1.1, axe
+            `scrollable-region-focusable`). `focus-ring-inset`, not `focus-ring`
+            — the root above carries `overflow-hidden`, which clips both layers
+            of the plain rung. */}
+        <main
+          id={mainId}
+          tabIndex={0}
+          className={cn("min-h-0 flex-1 overflow-y-auto focus-ring-inset", mainClassName)}
+        >
+          {children}
+        </main>
       </div>
     </div>
   );

package/src/components/app-sidebar/app-sidebar.stories.tsx

@@ -17,7 +17,15 @@ const meta = {
   title: "Layout/AppSidebar",
   component: AppSidebar,
   tags: ["autodocs"],
-  parameters: { layout: "fullscreen" },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "The opinionated application sidebar — the raw primitive set it composes is `Layout/Sidebar`; see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). `AppSidebar` wraps the `Sidebar` → `SidebarHeader` → `SidebarContent` → `SidebarFooter` skeleton behind typed `header` / `footer` slots with the navigation as `children`, and forwards every `Sidebar` prop. The registry’s sidebar blocks import this rather than rebuilding the skeleton.",
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <SidebarProvider>

package/src/components/attribution-panel/attribution-panel.tsx

@@ -74,7 +74,7 @@ function AttributionItem({ item, requiredLabel }: { item: Attribution; requiredL
             href={item.url}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-body font-medium underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-xs"
+            className="text-body font-medium underline underline-offset-2 focus-ring rounded-xs"
           >
             {item.name}
           </a>

package/src/components/attribution-panel/attributions.generated.ts

@@ -2,7 +2,7 @@
 // Run `pnpm gen:attributions` after changing a dependency, a vendored font, or
 // scripts/attributions.sources.json. `pnpm attributions:check` fails on a stale copy.
 //
-// 116 entries (data: 2, source: 16, font: 2, dependency: 96).
+// 116 entries (data: 2, source: 18, font: 2, dependency: 94).
 
 import type { Attribution } from "./attribution-types";
 
@@ -93,14 +93,14 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
   },
   {
     version: null,
-    note: "The sidebar-02 / sidebar-04 / sidebar-05 copy-owned blocks, re-tokenized with Tabler icons mapped to Lucide.",
-    id: "blocks-so",
+    note: "Agent-session UI logic re-expressed on our tokens: the line-level diff model and its screen-reader polarity prefixes, the scoped N-option permission anatomy, the slash-palette prefix-filter/clamp behaviour, the turn-status elapsed formatter, the hook/lifecycle event line, and the grouped keyboard-shortcuts sheet. No upstream code, styling or terminal palette is shipped.",
+    id: "brainless",
     category: "source",
-    name: "blocks.so",
+    name: "brainless",
     license: "MIT",
-    copyright: "Copyright (c) 2025 Ephraim Duncan",
-    url: "https://github.com/ephraimduncan/blocks",
-    usedBy: ["@elabs-ai/components-ui"],
+    copyright: "Copyright (c) 2026 Ben Swerdlow",
+    url: "https://github.com/theswerd/brainless",
+    usedBy: ["@elabs-ai/components-ai", "@elabs-ai/components-ui", "@elabs-ai/components-terminal"],
     required: false,
   },
   {
@@ -115,6 +115,18 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     usedBy: ["@elabs-ai/components-viewer"],
     required: false,
   },
+  {
+    version: null,
+    note: "The editorial chart gallery behind the 2026-09-04 charts gap analysis: 71 files across the charts and tokens packages cite it as the source of a value, a mark shape or a composition (unit decomposition, hairline furniture, the sequential/diverging ramps, the reveal timing), and three copy-own registry blocks (chart-editorial-hourglass, -patchwork, -almanac) reproduce three of its gallery cards' DATA-SHAPE DESCRIPTIONS from that same analysis' one-line prose. No code was copied verbatim — each was re-expressed onto this repo's tokens and primitives. Its LICENSE is PolyForm Noncommercial 1.0.0, read verbatim from the upstream file; GitHub's own detection reports NOASSERTION, which is why nothing flagged it earlier. The licence's Required Notice slot is left at the template's example value, so upstream states no copyright holder and none is claimed here. Noncommercial-only is unresolved for a repo headed for public release — a licensing decision for the maintainer, not something attribution settles.",
+    id: "lieflat-charts",
+    category: "source",
+    name: "lieflat-charts",
+    license: "PolyForm-Noncommercial-1.0.0",
+    copyright: null,
+    url: "https://github.com/larashero3-dotcom/lieflat-charts",
+    usedBy: ["@elabs-ai/components-charts", "@elabs-ai/components-tokens"],
+    required: false,
+  },
   {
     version: null,
     note: "The live-axis tick-interval picker behind live-y-axis.tsx. Upstream now names that function niceTimeInterval.",
@@ -151,6 +163,18 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     usedBy: ["@elabs-ai/components-editor"],
     required: false,
   },
+  {
+    version: null,
+    note: "Algorithm shape for the framework-free process-mining core: which aggregates a directly-follows graph carries (discoverGraph) and how traces are grouped into variants (extractVariants), with durationStats as their shared summary. Re-typed in TypeScript from the published algorithms, not copied.",
+    id: "pm4js",
+    category: "source",
+    name: "pm4js",
+    license: "BSD-3-Clause",
+    copyright: "Copyright 2021 Alessandro Berti",
+    url: "https://github.com/pm4js/pm4js-core",
+    usedBy: ["@elabs-ai/components-process"],
+    required: false,
+  },
   {
     version: null,
     note: "Beyond the npm dependency below, the shipped dist of react-scroll-area and react-select is modified in patches/ — disclosed here so the change is not invisible.",
@@ -261,14 +285,38 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     note: null,
   },
   {
-    id: "@hookform/resolvers",
+    id: "@dnd-kit/core",
     category: "dependency",
-    name: "@hookform/resolvers",
-    version: "3.10.0",
+    name: "@dnd-kit/core",
+    version: "6.3.1",
     license: "MIT",
-    copyright: "bluebill1049",
-    url: "https://www.npmjs.com/package/@hookform/resolvers",
-    usedBy: ["@elabs-ai/components-ui"],
+    copyright: "Claudéric Demers",
+    url: "https://www.npmjs.com/package/@dnd-kit/core",
+    usedBy: ["@elabs-ai/components-data"],
+    required: false,
+    note: null,
+  },
+  {
+    id: "@dnd-kit/sortable",
+    category: "dependency",
+    name: "@dnd-kit/sortable",
+    version: "10.0.0",
+    license: "MIT",
+    copyright: "Claudéric Demers",
+    url: "https://www.npmjs.com/package/@dnd-kit/sortable",
+    usedBy: ["@elabs-ai/components-data"],
+    required: false,
+    note: null,
+  },
+  {
+    id: "@dnd-kit/utilities",
+    category: "dependency",
+    name: "@dnd-kit/utilities",
+    version: "3.2.2",
+    license: "MIT",
+    copyright: "Claudéric Demers",
+    url: "https://www.npmjs.com/package/@dnd-kit/utilities",
+    usedBy: ["@elabs-ai/components-data"],
     required: false,
     note: null,
   },
@@ -656,18 +704,6 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     required: false,
     note: null,
   },
-  {
-    id: "@rive-app/react-webgl2",
-    category: "dependency",
-    name: "@rive-app/react-webgl2",
-    version: "4.28.6",
-    license: "MIT",
-    copyright: null,
-    url: "https://www.npmjs.com/package/@rive-app/react-webgl2",
-    usedBy: ["@elabs-ai/components-ai"],
-    required: false,
-    note: null,
-  },
   {
     id: "@streamdown/cjk",
     category: "dependency",
@@ -901,30 +937,6 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     required: false,
     note: null,
   },
-  {
-    id: "@xterm/addon-fit",
-    category: "dependency",
-    name: "@xterm/addon-fit",
-    version: "0.11.0",
-    license: "MIT",
-    copyright: "The xterm.js authors",
-    url: "https://www.npmjs.com/package/@xterm/addon-fit",
-    usedBy: ["@elabs-ai/components-ai"],
-    required: false,
-    note: null,
-  },
-  {
-    id: "@xterm/xterm",
-    category: "dependency",
-    name: "@xterm/xterm",
-    version: "6.0.0",
-    license: "MIT",
-    copyright: null,
-    url: "https://www.npmjs.com/package/@xterm/xterm",
-    usedBy: ["@elabs-ai/components-ai"],
-    required: false,
-    note: null,
-  },
   {
     id: "ansi-to-react",
     category: "dependency",
@@ -933,7 +945,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     license: "BSD-3-Clause",
     copyright: "Kyle Kelley",
     url: "https://www.npmjs.com/package/ansi-to-react",
-    usedBy: ["@elabs-ai/components-ai"],
+    usedBy: ["@elabs-ai/components-terminal"],
     required: false,
     note: null,
   },
@@ -949,6 +961,8 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
       "@elabs-ai/components-ai",
       "@elabs-ai/components-charts",
       "@elabs-ai/components-editor",
+      "@elabs-ai/components-process",
+      "@elabs-ai/components-terminal",
       "@elabs-ai/components-ui",
     ],
     required: false,
@@ -998,7 +1012,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     license: "ISC",
     copyright: "Mike Bostock",
     url: "https://www.npmjs.com/package/d3-force",
-    usedBy: ["@elabs-ai/components-flow"],
+    usedBy: ["@elabs-ai/components-charts", "@elabs-ai/components-flow"],
     required: false,
     note: null,
   },
@@ -1014,6 +1028,18 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     required: false,
     note: null,
   },
+  {
+    id: "d3-hierarchy",
+    category: "dependency",
+    name: "d3-hierarchy",
+    version: "3.1.2",
+    license: "ISC",
+    copyright: "Mike Bostock",
+    url: "https://www.npmjs.com/package/d3-hierarchy",
+    usedBy: ["@elabs-ai/components-charts"],
+    required: false,
+    note: null,
+  },
   {
     id: "d3-sankey",
     category: "dependency",
@@ -1113,24 +1139,14 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
       "@elabs-ai/components-editor",
       "@elabs-ai/components-flow",
       "@elabs-ai/components-maps",
+      "@elabs-ai/components-process",
+      "@elabs-ai/components-terminal",
       "@elabs-ai/components-ui",
       "@elabs-ai/components-viewer",
     ],
     required: false,
     note: null,
   },
-  {
-    id: "media-chrome",
-    category: "dependency",
-    name: "media-chrome",
-    version: "4.19.1",
-    license: "MIT",
-    copyright: "@muxinc",
-    url: "https://www.npmjs.com/package/media-chrome",
-    usedBy: ["@elabs-ai/components-ai"],
-    required: false,
-    note: null,
-  },
   {
     id: "mermaid",
     category: "dependency",
@@ -1139,7 +1155,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     license: "MIT",
     copyright: "Knut Sveidqvist",
     url: "https://www.npmjs.com/package/mermaid",
-    usedBy: ["@elabs-ai/components-ai", "@elabs-ai/components-editor"],
+    usedBy: ["@elabs-ai/components-editor"],
     required: false,
     note: null,
   },
@@ -1179,18 +1195,6 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     required: false,
     note: null,
   },
-  {
-    id: "react-hook-form",
-    category: "dependency",
-    name: "react-hook-form",
-    version: "7.77.0",
-    license: "MIT",
-    copyright: "Beier(Bill) Luo",
-    url: "https://www.npmjs.com/package/react-hook-form",
-    usedBy: ["@elabs-ai/components-ui"],
-    required: false,
-    note: null,
-  },
   {
     id: "react-jsx-parser",
     category: "dependency",
@@ -1415,7 +1419,7 @@ export const ATTRIBUTIONS: readonly Attribution[] = [
     license: "MIT",
     copyright: "Colin McDonnell",
     url: "https://www.npmjs.com/package/zod",
-    usedBy: ["@elabs-ai/components-ai", "@elabs-ai/components-ui"],
+    usedBy: ["@elabs-ai/components-ai"],
     required: false,
     note: null,
   },

package/src/components/badge/badge.stories.tsx

@@ -5,6 +5,14 @@ const meta = {
   title: "Core/Badge",
   component: Badge,
   tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A neutral label or count. The closed seven-state execution-status vocabulary — each state carrying its own glyph, so it survives greyscale — is `Core/StatusBadge`; see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). Reach for `Badge` when the text IS the meaning and the tone is decoration.",
+      },
+    },
+  },
   args: { children: "Badge" },
   argTypes: {
     variant: {

package/src/components/badge/badge.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
 
 export const badgeVariants = cva(
-  "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-meta font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-meta font-medium transition-colors focus-ring focus-visible:ring-offset-2",
   {
     variants: {
       variant: {

package/src/components/bento-grid/bento-grid.test.tsx

@@ -104,7 +104,7 @@ describe("BentoGridItem", () => {
     // The tile stays a div; the inner anchor is the focusable element.
     const item = screen.getByTestId("item");
     expect(item.tagName).toBe("DIV");
-    expect(item.className).toMatch(/focus-within:ring/);
+    expect(item.className).toMatch(/focus-ring-within/);
     expect(screen.getByRole("link", { name: "go" })).toBeInTheDocument();
   });
 

package/src/components/bento-grid/bento-grid.tsx

@@ -178,7 +178,7 @@ export const bentoGridItemVariants = cva(
        * (elevation + edge) is on the base — every tile lifts, clickable or not.
        */
       interactive: {
-        true: "cursor-pointer focus-within:outline-none focus-within:ring-2 focus-within:ring-ring",
+        true: "cursor-pointer focus-ring-within",
         false: "",
       },
     },