@elabs-ai/components-ui 4.0.0 → 4.1.0

package/src/components/pagination/pagination.tsx

@@ -2,6 +2,7 @@ import { forwardRef, type ComponentProps } from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { buttonVariants } from "../button";
+import { useLocale } from "../locale-provider";
 
 export function Pagination({ className, ...props }: ComponentProps<"nav">) {
   return (
@@ -40,30 +41,33 @@ export function PaginationLink({ className, isActive, ...props }: PaginationLink
   );
 }
 export function PaginationPrevious({ className, ...props }: ComponentProps<"a">) {
+  const { t } = useLocale();
   return (
     <a
-      aria-label="Go to previous page"
+      aria-label={t("ui.pagination.previous")}
       className={cn(buttonVariants({ variant: "ghost" }), "gap-1 ps-2.5 cursor-pointer", className)}
       {...props}
     >
       <ChevronLeft className="size-4" data-rtl-flip />
-      <span>Previous</span>
+      <span>{t("previous")}</span>
     </a>
   );
 }
 export function PaginationNext({ className, ...props }: ComponentProps<"a">) {
+  const { t } = useLocale();
   return (
     <a
-      aria-label="Go to next page"
+      aria-label={t("ui.pagination.next")}
       className={cn(buttonVariants({ variant: "ghost" }), "gap-1 pe-2.5 cursor-pointer", className)}
       {...props}
     >
-      <span>Next</span>
+      <span>{t("next")}</span>
       <ChevronRight className="size-4" data-rtl-flip />
     </a>
   );
 }
 export function PaginationEllipsis({ className, ...props }: ComponentProps<"span">) {
+  const { t } = useLocale();
   return (
     <span
       aria-hidden
@@ -71,7 +75,7 @@ export function PaginationEllipsis({ className, ...props }: ComponentProps<"span
       {...props}
     >
       <MoreHorizontal className="size-4" />
-      <span className="sr-only">More pages</span>
+      <span className="sr-only">{t("ui.pagination.morePages")}</span>
     </span>
   );
 }

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

@@ -19,7 +19,7 @@ export const RadioGroupItem = forwardRef<
       ref={ref}
       className={cn(
         "aspect-square size-4 rounded-full border border-input text-primary shadow-sm transition-colors duration-fast ease-standard",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
         className,
       )}

package/src/components/rating/rating.tsx

@@ -187,7 +187,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(
             aria-checked={checked}
             aria-label={`${index} ${index === 1 ? "star" : "stars"}`}
             tabIndex={i === tabStopIndex ? 0 : -1}
-            className="rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+            className="rounded-sm focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
             onClick={(e) =>
               commit(valueFromPointer(e as unknown as PointerEvent<HTMLButtonElement>, index))
             }

package/src/components/resizable/resizable.stories.tsx

@@ -1,9 +1,27 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent } from "storybook/test";
+import { cn } from "../../lib/cn";
+import { splitPaneVariants } from "../split-panel";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizable";
 const meta = {
   title: "Layout/Resizable",
   component: ResizablePanelGroup,
-  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Panes the user can drag to resize — fixed two-pane layouts with per-pane surface " +
+          "tones are `Layout/SplitPanel`, see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
+          "The `react-resizable-panels` primitive set (`ResizablePanelGroup`/`ResizablePanel`/ " +
+          "`ResizableHandle`): n panes, percentage sizing, persisted layout. Apply " +
+          "`splitPaneVariants({ tone })` (exported from `Layout/SplitPanel`) to a `ResizablePanel` " +
+          "for the same `plain`/`muted`/`card` ground-offset tiering — see the `Tiered` story.",
+      },
+    },
+  },
 } satisfies Meta<typeof ResizablePanelGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -13,7 +31,7 @@ export const Default: Story = {
       <ResizablePanel defaultSize={40} className="flex items-center justify-center p-4 text-body">
         List
       </ResizablePanel>
-      <ResizableHandle withHandle />
+      <ResizableHandle withHandle aria-label="Resize the list and detail panels" />
       <ResizablePanel
         defaultSize={60}
         className="flex items-center justify-center p-4 text-body text-muted-foreground"
@@ -22,4 +40,98 @@ export const Default: Story = {
       </ResizablePanel>
     </ResizablePanelGroup>
   ),
+  // #156 — the handle forwards `...props`, so `aria-label` reaches
+  // `PanelResizeHandle` and replaces the bare "separator, 50" announcement with a
+  // name that says which two regions it divides. Tabbing to it (rather than a
+  // direct `querySelector` focus call) exercises the same path a keyboard user
+  // takes, and the `ArrowRight` assertion locks that naming the handle didn't
+  // regress the keyboard resize behaviour that was already correct.
+  play: async ({ canvasElement }) => {
+    const handle = canvasElement.querySelector<HTMLElement>('[role="separator"]');
+    await expect(handle).not.toBeNull();
+
+    await userEvent.tab();
+    await expect(handle).toHaveFocus();
+    await expect(handle).toHaveAccessibleName("Resize the list and detail panels");
+
+    const panel = canvasElement.querySelector<HTMLElement>("[data-panel]");
+    const sizeBefore = panel!.getAttribute("data-panel-size");
+    await userEvent.keyboard("{ArrowRight}");
+    const sizeAfter = panel!.getAttribute("data-panel-size");
+    await expect(sizeAfter).not.toBe(sizeBefore);
+  },
+};
+
+/**
+ * The same `plain`/`muted`/`card` ground-offset tiering `SplitPanel` gives its
+ * `startTone`/`endTone`, composed onto draggable panels via the exported
+ * `splitPaneVariants` — so a user-resizable layout doesn't need a hand-rolled second
+ * copy of the tone classes. The play test drags the handle and asserts the panel's
+ * relative size (`data-panel-size`, react-resizable-panels' `flexGrow`-derived
+ * attribute) actually changed, not an exact pixel width — a headless drag is flaky
+ * against pixel deltas — and that both tone classes survive the resize.
+ */
+export const Tiered: Story = {
+  render: () => (
+    <ResizablePanelGroup direction="horizontal" className="h-48 max-w-xl rounded-lg border">
+      <ResizablePanel
+        defaultSize={40}
+        className={cn(
+          splitPaneVariants({ tone: "muted" }),
+          "flex items-center justify-center p-4 text-body",
+        )}
+      >
+        List
+      </ResizablePanel>
+      <ResizableHandle withHandle aria-label="Resize the list and detail panels" />
+      <ResizablePanel
+        defaultSize={60}
+        className={cn(
+          splitPaneVariants({ tone: "card" }),
+          "flex items-center justify-center p-4 text-body text-muted-foreground",
+        )}
+      >
+        Detail
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const panels = canvasElement.querySelectorAll<HTMLElement>("[data-panel]");
+    const [startPanel, endPanel] = Array.from(panels);
+    await expect(startPanel).toBeDefined();
+    await expect(endPanel).toBeDefined();
+    const sizeBefore = startPanel!.getAttribute("data-panel-size");
+
+    // Tones apply before the drag.
+    await expect(startPanel!.className).toMatch(/bg-surface-muted/);
+    await expect(endPanel!.className).toMatch(/bg-card/);
+    await expect(endPanel!.className).toMatch(/shadow-sm/);
+
+    // `ResizablePanel` sets `style="overflow: hidden"` inline (react-resizable-panels);
+    // an inline style always wins the cascade over `splitPaneVariants`' `overflow-auto`
+    // class, so the resolved overflow stays `hidden` here — the class isn't fighting
+    // anything visually, it's simply inert on this element. Locked so a future
+    // react-resizable-panels upgrade that drops the inline style doesn't silently
+    // flip scroll behaviour unnoticed.
+    await expect(getComputedStyle(startPanel!).overflow).toBe("hidden");
+
+    const handle = canvasElement.querySelector<HTMLElement>('[role="separator"]');
+    await expect(handle).not.toBeNull();
+    const rect = handle!.getBoundingClientRect();
+    const y = rect.top + rect.height / 2;
+    await userEvent.pointer([
+      { keys: "[MouseLeft>]", target: handle!, coords: { clientX: rect.left + 1, clientY: y } },
+      { coords: { clientX: rect.left + 80, clientY: y } },
+      { keys: "[/MouseLeft]" },
+    ]);
+
+    // The relative size changed — never assert an exact pixel width (flaky headless).
+    const sizeAfter = startPanel!.getAttribute("data-panel-size");
+    await expect(sizeAfter).not.toBe(sizeBefore);
+
+    // Tones still apply after the drag.
+    await expect(startPanel!.className).toMatch(/bg-surface-muted/);
+    await expect(endPanel!.className).toMatch(/bg-card/);
+    await expect(endPanel!.className).toMatch(/shadow-sm/);
+  },
 };

package/src/components/resizable/resizable.tsx

@@ -24,7 +24,7 @@ export function ResizableHandle({
   return (
     <ResizablePrimitive.PanelResizeHandle
       className={cn(
-        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-ring",
         "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0",
         className,
       )}

package/src/components/revision-timeline/revision-timeline.stories.tsx

@@ -17,10 +17,17 @@ const meta = {
     docs: {
       description: {
         component:
+          "The GIT-HISTORY rail; a generic ordered-steps rail is `Core/Timeline` — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
           "A presentational git-history timeline. Renders revisions (newest-first) with " +
           "day grouping, an SVG branch-graph lane gutter, churn indicators (+/−), " +
           "ref chips, and an accessible selection rail. The app computes lane indices " +
-          "and edges; the component only renders what it receives.",
+          "and edges; the component only renders what it receives. " +
+          "It deliberately does not ride the shared `Timeline` rail: a rail node's colour " +
+          "there is the closed 7-state execution `Status`, while a node here is coloured by " +
+          "lane identity (the chart ramp), and a fork/merge join is a cross-row bezier that " +
+          "no item-local connector can draw — the four-point reason is in the component's " +
+          "docblock (RM-014).",
       },
     },
   },

package/src/components/revision-timeline/revision-timeline.test.tsx

@@ -264,6 +264,32 @@ describe("Merge rows", () => {
     expect(svg).not.toBeNull();
   });
 
+  // #387 — colour is never the only channel (WCAG 1.4.1). The lane graph paints
+  // every node from the same categorical chart ramp, so the ROW GLYPH is the cue
+  // that survives greyscale: the merge-marked row renders `GitMerge`, every other
+  // row `GitCommitHorizontal`. Asserted on the rendered `lucide-*` class (the
+  // actual shape signature) — the idiom flow-node.test.tsx uses. This is also the
+  // non-colour channel that justifies this component keeping its own node
+  // vocabulary instead of the shared `Timeline` rail's status-keyed dot (RM-014,
+  // #133) — see the component docblock.
+  //
+  // WHICH row is marked is deliberately NOT asserted here: the derivation counts
+  // edges by `to` (parents with >=2 children), so today the glyph lands on the
+  // fork point rather than on the commit whose message says "Merge". That routing
+  // question is out of scope for RM-014 and is reported separately; this lock is
+  // about the CHANNEL, and must keep holding whichever row ends up marked.
+  it("marks the merge row with a distinct glyph, not colour alone (#387)", () => {
+    render(<RevisionTimeline revisions={MERGE_REVISIONS} edges={MERGE_EDGES} groupBy="none" />);
+    const rows = Array.from(document.querySelectorAll("[data-revision-id]"));
+    expect(rows).toHaveLength(MERGE_REVISIONS.length);
+    const merge = rows.filter((r) => r.querySelector("svg.lucide-git-merge"));
+    const plain = rows.filter((r) => r.querySelector("svg.lucide-git-commit-horizontal"));
+    expect(merge).toHaveLength(1);
+    expect(plain).toHaveLength(rows.length - 1);
+    // No row carries both shapes, so the two are genuinely exclusive silhouettes.
+    expect(merge[0]!.querySelector("svg.lucide-git-commit-horizontal")).toBeNull();
+  });
+
   it("renders all revisions including the merge commit", () => {
     render(<RevisionTimeline revisions={MERGE_REVISIONS} edges={MERGE_EDGES} groupBy="none" />);
     expect(screen.getAllByRole("listitem")).toHaveLength(MERGE_REVISIONS.length);

package/src/components/revision-timeline/revision-timeline.tsx

@@ -12,6 +12,49 @@
  * The APP computes the graph layout (lane indices, edges). This component
  * only renders what it receives. Heavy graph-math stays out.
  *
+ * WHY THIS DOES NOT RIDE THE SHARED `Timeline` RAIL (RM-014, #133).
+ * `components/timeline/` is the canonical rail/node/connector spine (#190) and
+ * `AgentTimeline` rides it. This component deliberately does not. The decision
+ * was taken against the real code, so do not re-investigate it and do not
+ * "converge" the two without reopening #133 — four things block it:
+ *
+ *   1. The node channel already carries a DIFFERENT meaning there. On the
+ *      shared rail a node's colour IS the closed 7-state execution `Status`:
+ *      `NODE_STYLE` is locked to `STATUS_ROLE`/`statusBadgeVariants` (#392)
+ *      and every status owns a unique non-colour signature (#387). A node
+ *      here is coloured by LANE IDENTITY (`laneColor` → `--chart-1..5`, a
+ *      categorical series ramp), and a revision has no execution status at
+ *      all. Mapping lane → status would be a lie (lane 3 is not `failed`),
+ *      and opening the rail node to a free-form colour would dissolve the two
+ *      invariants those tests exist to defend.
+ *   2. A cross-lane join cannot be an item-local connector. The shared rail's
+ *      connector is one `w-px` span inside each `<li>` at a fixed inline
+ *      offset. A fork/merge join here is a cubic bezier from one row's centre
+ *      to ANOTHER row's centre, several rows away and in a different lane —
+ *      geometry that only exists in a coordinate space spanning the whole
+ *      list (`rowCenterY` + `LaneGutter`). No per-item primitive can draw it,
+ *      so the reusable unit would have to be the list, not the item.
+ *   3. Row geometry is load-bearing, not styling. Rows are fixed-height
+ *      (`ROW_H_COMFORTABLE`/`ROW_H_COMPACT`) and day headers fixed at
+ *      `DAY_HEADER_H` precisely because the SVG shares the list's coordinate
+ *      space; the shared rail item is content-height (`pb-5 ps-7 last:pb-0`).
+ *      Riding it means overriding every geometry decision it makes.
+ *   4. The row is a selection control, not a title slot. The whole row is one
+ *      `<button aria-pressed>`, while the rail item's title slot is a span
+ *      that unconditionally prefixes an `sr-only` status word — so every
+ *      revision would announce a status it does not have.
+ *
+ * Teaching the rail all four means ~5 opt-in props, four of which turn OFF
+ * what the spine provides (its node, its connector, its geometry, its status
+ * announcement) and one of which moves `LaneGutter` into it — a behavioural
+ * mode fork (.claude/rules/component-api.md) paid for by every existing rail
+ * consumer. That relocates the duplication rather than removing it. The two
+ * are one silhouette ("a vertical list with dots and lines") speaking two
+ * grammars: an execution trace vs a commit DAG.
+ *
+ * Nothing visual is shared, but the fork-prevention gate still binds this
+ * file — which is why the GATE NOTES below are not optional.
+ *
  * GATE NOTES:
  *   - No identifier starting with `Timeline` (timeline-fork class 1).
  *   - Lanes/connectors drawn with SVG <line> / <path>, NOT `absolute w-px`
@@ -566,7 +609,7 @@ function BranchToggle({ branchName, onToggle }: { branchName: string; onToggle:
         "flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground",
         "transition-colors duration-fast ease-standard motion-reduce:transition-none",
         "hover:bg-accent hover:text-accent-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "focus-ring",
       )}
     >
       <BranchChevron expanded />
@@ -615,7 +658,7 @@ function CollapsedBranchRow({
         className={cn(
           "flex h-full w-full min-w-0 items-center gap-2 px-2 text-start",
           "transition-colors duration-fast ease-standard motion-reduce:transition-none",
-          "rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "rounded focus-ring",
           "hover:bg-accent hover:text-accent-foreground",
         )}
       >
@@ -695,7 +738,7 @@ function RevisionRow({ revision, isMerge, density, indent, collapseToggle }: Rev
             ? "flex h-full min-w-0 flex-1 items-center gap-2 px-2 text-start"
             : "flex h-full w-full min-w-0 items-center gap-2 px-2 text-start",
           "transition-colors duration-fast ease-standard motion-reduce:transition-none",
-          "rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "rounded focus-ring",
           "hover:bg-accent hover:text-accent-foreground",
           isSelected && "border-s-2 border-s-primary bg-accent text-accent-foreground",
         )}