@elabs-ai/components-ui 4.1.0 → 4.2.0

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/rating/rating.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // a2ui.exposed: yes
 import {
   forwardRef,

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,28 +1,54 @@
+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-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",

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

@@ -73,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 ────────────────────────────────────────────────────────
 
@@ -937,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.
@@ -1059,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 });
@@ -1102,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 (