@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/components/pagination/pagination.tsx

@@ -2,12 +2,14 @@ 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">) {
+  const { t } = useLocale();
   return (
     <nav
       role="navigation"
-      aria-label="pagination"
+      aria-label={t("ui.pagination.label")}
       className={cn("mx-auto flex w-full justify-center", className)}
       {...props}
     />
@@ -26,44 +28,50 @@ export const PaginationItem = forwardRef<HTMLLIElement, ComponentProps<"li">>(
   },
 );
 type PaginationLinkProps = { isActive?: boolean } & ComponentProps<"a">;
-export function PaginationLink({ className, isActive, ...props }: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      className={cn(
-        buttonVariants({ variant: isActive ? "outline" : "ghost", size: "icon" }),
-        "cursor-pointer",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+export const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  function PaginationLink({ className, isActive, ...props }, ref) {
+    return (
+      <a
+        ref={ref}
+        aria-current={isActive ? "page" : undefined}
+        className={cn(
+          buttonVariants({ variant: isActive ? "outline" : "ghost", size: "icon" }),
+          "cursor-pointer",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
 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 +79,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/popover/popover.tsx

@@ -14,6 +14,7 @@ export const PopoverContent = forwardRef<
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
         ref={ref}
+        data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
         className={cn(

package/src/components/progress/progress.tsx

@@ -36,11 +36,13 @@ export const Progress = forwardRef<ElementRef<typeof ProgressPrimitive.Root>, Pr
     return (
       <ProgressPrimitive.Root
         ref={ref}
+        data-slot="progress"
         value={value}
         className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className)}
         {...props}
       >
         <ProgressPrimitive.Indicator
+          data-slot="progress-indicator"
           className={progressIndicatorVariants({ variant })}
           style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
         />

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

@@ -1,3 +1,5 @@
+"use client";
+
 // a2ui.exposed: yes
 import {
   forwardRef,
@@ -187,7 +189,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.test.tsx

@@ -0,0 +1,76 @@
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render } from "@testing-library/react";
+import type * as ResizablePrimitiveModule from "react-resizable-panels";
+import type { ImperativePanelGroupHandle } from "react-resizable-panels";
+
+const capturedProps: Record<string, unknown>[] = [];
+
+vi.mock("react-resizable-panels", async (importOriginal) => {
+  const actual = await importOriginal<typeof ResizablePrimitiveModule>();
+  return {
+    ...actual,
+    PanelResizeHandle: (props: Record<string, unknown>) => {
+      capturedProps.push(props);
+      return actual.PanelResizeHandle(props as never);
+    },
+  };
+});
+
+// Imported AFTER the mock so the module picked up above is the one in use.
+const { ResizableHandle, ResizablePanel, ResizablePanelGroup } = await import("./resizable");
+
+describe("Resizable — handle hit area is expanded without changing the visible line", () => {
+  it("keeps the visible line at 1px (w-px) while widening the pointer hit area via hitAreaMargins", () => {
+    capturedProps.length = 0;
+    const { container } = render(
+      <ResizablePanelGroup direction="horizontal" className="h-48 max-w-xl">
+        <ResizablePanel defaultSize={40}>List</ResizablePanel>
+        <ResizableHandle aria-label="Resize" />
+        <ResizablePanel defaultSize={60}>Detail</ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+    const handle = container.querySelector('[role="separator"]');
+    expect(handle).not.toBeNull();
+    // Visual line unchanged — still the 1px hairline, not a wider drawn box.
+    expect(handle!.className).toMatch(/\bw-px\b/);
+
+    // The DRAG hit area comes from the primitive's own pointer-distance
+    // config, not from CSS: at least 16px combined margin around the line
+    // (>= 8px each side), satisfying the ≥16px minimum without widening
+    // anything visible.
+    const props = capturedProps.at(-1);
+    const margins = props?.hitAreaMargins as { coarse: number; fine: number } | undefined;
+    expect(margins).toBeDefined();
+    expect(margins!.fine).toBeGreaterThanOrEqual(8);
+    expect(margins!.coarse).toBeGreaterThanOrEqual(8);
+  });
+
+  it("lets a caller override hitAreaMargins explicitly", () => {
+    capturedProps.length = 0;
+    render(
+      <ResizablePanelGroup direction="horizontal" className="h-48 max-w-xl">
+        <ResizablePanel defaultSize={40}>List</ResizablePanel>
+        <ResizableHandle aria-label="Resize" hitAreaMargins={{ coarse: 20, fine: 20 }} />
+        <ResizablePanel defaultSize={60}>Detail</ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+    const props = capturedProps.at(-1);
+    expect(props?.hitAreaMargins).toEqual({ coarse: 20, fine: 20 });
+  });
+});
+
+describe("Resizable — forwardRef", () => {
+  it("ResizablePanelGroup forwards its ref to the imperative panel-group handle", () => {
+    const ref = createRef<ImperativePanelGroupHandle>();
+    render(
+      <ResizablePanelGroup ref={ref} direction="horizontal" className="h-48 max-w-xl">
+        <ResizablePanel defaultSize={40}>List</ResizablePanel>
+        <ResizableHandle aria-label="Resize" />
+        <ResizablePanel defaultSize={60}>Detail</ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(typeof ref.current?.getLayout).toBe("function");
+  });
+});

package/src/components/resizable/resizable.tsx

@@ -1,30 +1,56 @@
+import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from "react";
 import { GripVertical } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { cn } from "../../lib/cn";
 
-export function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+export const ResizablePanelGroup: ForwardRefExoticComponent<
+  React.ComponentProps<typeof ResizablePrimitive.PanelGroup> &
+    RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>
+> = forwardRef<
+  ResizablePrimitive.ImperativePanelGroupHandle,
+  React.ComponentProps<typeof ResizablePrimitive.PanelGroup>
+>(function ResizablePanelGroup({ className, ...props }, ref) {
   return (
     <ResizablePrimitive.PanelGroup
+      ref={ref}
       className={cn("flex size-full data-[panel-group-direction=vertical]:flex-col", className)}
       {...props}
     />
   );
-}
+});
 
 export const ResizablePanel = ResizablePrimitive.Panel;
 
+/**
+ * The visible line stays 1px (`w-px`); the DRAG hit area is expanded via the
+ * primitive's own `hitAreaMargins` (pointer-distance based, not a CSS trick),
+ * so pointer/touch users get a ≥16px target without widening what's drawn.
+ * Callers can still override `hitAreaMargins` explicitly.
+ */
+const DEFAULT_HIT_AREA_MARGINS: ResizablePrimitive.PointerHitAreaMargins = {
+  coarse: 15,
+  fine: 8,
+};
+
+/**
+ * NOT wrapped in `forwardRef`: `react-resizable-panels`' `PanelResizeHandle`
+ * is a plain function component that hardcodes its own internal element ref
+ * and does not accept `ref` as a prop at all (neither in its types nor at
+ * runtime — verified: a `ref` passed to it resolves to `null`). There is no
+ * DOM node here for a wrapper ref to attach to without changing what render
+ * onto the actual drag surface, so adding `forwardRef` would be a dead prop.
+ */
 export function ResizableHandle({
   withHandle,
   className,
+  hitAreaMargins,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & { withHandle?: boolean }) {
   return (
     <ResizablePrimitive.PanelResizeHandle
+      hitAreaMargins={hitAreaMargins ?? DEFAULT_HIT_AREA_MARGINS}
       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`
@@ -30,6 +73,7 @@ import {
 import { cva, type VariantProps } from "class-variance-authority";
 import { ChevronRight, GitBranch, GitCommitHorizontal, GitMerge, Plus, Minus } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { useLocale } from "../locale-provider";
 
 // ─── Public data types ────────────────────────────────────────────────────────
 
@@ -566,7 +610,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 +659,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 +739,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",
         )}
@@ -894,6 +938,7 @@ export const RevisionTimeline = forwardRef<HTMLDivElement, RevisionTimelineProps
     },
     ref,
   ) {
+    const { t } = useLocale();
     const resolvedDensity: RevisionTimelineDensity = density ?? "comfortable";
 
     // Collapse/expand mode is opt-in: active only when `branches` are supplied.
@@ -1016,7 +1061,7 @@ export const RevisionTimeline = forwardRef<HTMLDivElement, RevisionTimelineProps
         const from = summaryOf.get(e.from) ?? e.from;
         const to = summaryOf.get(e.to) ?? e.to;
         if (from === to) continue; // collapsed into a single node
-        const key = `${from}${to}`;
+        const key = `${from}\u0000${to}`;
         if (seen.has(key)) continue; // de-dup coincident remaps
         seen.add(key);
         out.push({ from, to });
@@ -1059,7 +1104,10 @@ export const RevisionTimeline = forwardRef<HTMLDivElement, RevisionTimelineProps
               {groups.map((group) => (
                 <div key={group.dayKey}>
                   {groupBy === "day" && <DayHeader label={group.dayLabel} />}
-                  <ol role="list" aria-label={groupBy === "day" ? group.dayLabel : "Revisions"}>
+                  <ol
+                    role="list"
+                    aria-label={groupBy === "day" ? group.dayLabel : t("ui.revisionTimeline.label")}
+                  >
                     {group.items.map((it) => {
                       if (it.kind === "summary") {
                         return (