@elabs-ai/components-ui 4.1.0 → 5.0.0

package/src/components/pagination/pagination.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, type ComponentProps } from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../../lib/cn";
@@ -5,10 +7,11 @@ 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}
     />
@@ -27,19 +30,22 @@ 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 (

package/src/components/parallax-plane/index.ts

@@ -0,0 +1,8 @@
+export {
+  ParallaxPlane,
+  PARALLAX_MAX_TRAVEL,
+  PARALLAX_PLANE_RATES,
+  parallaxOffset,
+  type ParallaxPlaneKind,
+  type ParallaxPlaneProps,
+} from "./parallax-plane";

package/src/components/parallax-plane/parallax-plane.css

@@ -0,0 +1,26 @@
+/*
+ * ParallaxPlane — the scroll-driven path (`animation-timeline: scroll(root)`).
+ * The component sets `data-parallax="timeline"` only after hydration, only when the motion gate
+ * is open and the browser supports scroll timelines, and passes the geometry in:
+ *   --parallax-travel  signed end offset (never more than 60px from the content plane)
+ *   --parallax-range   scroll distance over which that offset is reached (travel / |1 − rate|)
+ * Past the range the plane holds its offset (`both` fill), so the total travel stays clamped at
+ * every scroll position. Under reduced motion the attribute is never set: no animation, no
+ * transform. `transform` only — nothing here triggers layout.
+ */
+@layer base {
+  [data-slot="parallax-plane"][data-parallax="timeline"] {
+    animation: brand-ui-parallax-plane linear both;
+    animation-timeline: scroll(root block);
+    animation-range: 0px var(--parallax-range);
+  }
+
+  @keyframes brand-ui-parallax-plane {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(var(--parallax-travel));
+    }
+  }
+}

package/src/components/parallax-plane/parallax-plane.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+import { Card, CardDescription, CardHeader, CardTitle } from "../card";
+import { ParallaxPlane, type ParallaxPlaneKind } from "./parallax-plane";
+
+const PLANES: { plane: ParallaxPlaneKind; title: string; description: string }[] = [
+  { plane: "ground", title: "Ground plane", description: "Scrolls at 0.15× — it lags behind." },
+  { plane: "content", title: "Content plane", description: "Scrolls with the page at 1×." },
+  { plane: "float", title: "Float plane", description: "Scrolls at 1.2× — it runs ahead." },
+];
+
+function Planes() {
+  return (
+    <div className="min-h-screen p-8">
+      <p className="text-body text-muted-foreground">
+        Scroll the page: each card moves at its plane’s rate, never more than 60px from the content.
+      </p>
+      <div className="mt-40 grid gap-6 sm:grid-cols-3">
+        {PLANES.map(({ plane, title, description }) => (
+          <ParallaxPlane key={plane} plane={plane}>
+            <Card>
+              <CardHeader>
+                <CardTitle>{title}</CardTitle>
+                <CardDescription>{description}</CardDescription>
+              </CardHeader>
+            </Card>
+          </ParallaxPlane>
+        ))}
+      </div>
+      <div className="min-h-screen" />
+    </div>
+  );
+}
+
+const meta = {
+  title: "Display/ParallaxPlane",
+  component: ParallaxPlane,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+  render: () => <Planes />,
+} satisfies Meta<typeof ParallaxPlane>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Names a running animation so a failing reduced-motion play says what still moves. */
+function describeAnimation(a: Animation) {
+  const effect = a.effect as KeyframeEffect | null;
+  const target = effect?.target as Element | null | undefined;
+  const name = (a as CSSAnimation).animationName ?? (a as CSSTransition).transitionProperty ?? a.id;
+  return `${name} on ${target?.getAttribute("data-slot") ?? target?.tagName ?? "?"}${effect?.pseudoElement ?? ""}`;
+}
+
+export const Default: Story = {};
+
+export const Dark: Story = {
+  parameters: { themes: { themeOverride: "dark" } },
+};
+
+export const Decoration10: Story = {
+  globals: { decoration: "10" },
+};
+
+/** Under reduced motion every plane scrolls at 1×: no animation, no transform. */
+export const ReducedMotion: Story = {
+  // The real gate on :root (Storybook motion toolbar) plus a subtree dial, because the toolbar
+  // writes :root after the story has mounted.
+  globals: { motionPref: "reduced" },
+  render: () => (
+    <div data-motion-pref="reduced">
+      <Planes />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    // Transitions the harness started before the gate applied (theme/decoration swaps between
+    // stories) settle; a primitive that still animates under the gate never would.
+    await waitFor(() =>
+      expect(
+        document
+          .getAnimations()
+          .filter((a) => a.playState === "running")
+          .map(describeAnimation),
+      ).toEqual([]),
+    );
+    for (const plane of canvasElement.querySelectorAll('[data-slot="parallax-plane"]')) {
+      await expect(getComputedStyle(plane).transform).toBe("none");
+    }
+  },
+};

package/src/components/parallax-plane/parallax-plane.test.tsx

@@ -0,0 +1,57 @@
+import type * as React from "react";
+import { render, waitFor } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PARALLAX_MAX_TRAVEL, ParallaxPlane, parallaxOffset } from "./parallax-plane";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("parallaxOffset", () => {
+  it("moves ground behind and float ahead of content, clamped to the max travel", () => {
+    expect(parallaxOffset(40, 0.15, 1)).toBeCloseTo(34);
+    expect(parallaxOffset(400, 0.15, 1)).toBe(PARALLAX_MAX_TRAVEL);
+    expect(parallaxOffset(200, 1.2, 1)).toBeCloseTo(-40);
+    expect(parallaxOffset(400, 1.2, 1)).toBe(-PARALLAX_MAX_TRAVEL);
+    expect(parallaxOffset(400, 1, 1)).toBe(0);
+  });
+
+  it("collapses to no parallax at the motion floor", () => {
+    expect(Math.abs(parallaxOffset(4000, 0.15, 0.0001))).toBeLessThan(0.5);
+  });
+});
+
+describe("ParallaxPlane", () => {
+  it("server-renders with no transform and no motion state", () => {
+    const html = renderToString(<ParallaxPlane plane="ground">x</ParallaxPlane>);
+    expect(html).toContain('data-plane="ground"');
+    expect(html).not.toContain("data-parallax");
+    expect(html).not.toContain("transform");
+  });
+
+  it("uses the scroll timeline when the browser has one", async () => {
+    vi.stubGlobal("CSS", { supports: () => true });
+    const { container } = render(<ParallaxPlane plane="ground" />);
+    const el = container.querySelector<HTMLElement>('[data-slot="parallax-plane"]')!;
+    await waitFor(() => expect(el).toHaveAttribute("data-parallax", "timeline"));
+    expect(el.style.getPropertyValue("--parallax-travel")).toBe("60px");
+    expect(Number.parseFloat(el.style.getPropertyValue("--parallax-range"))).toBeCloseTo(70.59, 1);
+  });
+
+  it("never moves the content plane or any plane under reduced motion", async () => {
+    vi.stubGlobal("CSS", { supports: () => true });
+    const { container } = render(<ParallaxPlane plane="content" />);
+    // jsdom does not inherit custom properties, so the reduce dial sits on the plane itself.
+    const { container: reduced } = render(
+      <ParallaxPlane
+        plane="float"
+        style={{ "--motion-factor": "0.0001" } as React.CSSProperties}
+      />,
+    );
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(container.firstElementChild).not.toHaveAttribute("data-parallax");
+    expect(reduced.firstElementChild).not.toHaveAttribute("data-parallax");
+    expect((reduced.firstElementChild as HTMLElement).style.transform).toBe("");
+  });
+});

package/src/components/parallax-plane/parallax-plane.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import * as React from "react";
+import { useScrollProgress } from "../../lib/use-scroll-progress";
+import "./parallax-plane.css";
+
+/** The three depth planes of a page: the ground, the content, and floating accents. */
+export type ParallaxPlaneKind = "ground" | "content" | "float";
+
+/** Default scroll rate per plane, relative to the page (content moves with it at 1×). */
+export const PARALLAX_PLANE_RATES: Record<ParallaxPlaneKind, number> = {
+  ground: 0.15,
+  content: 1,
+  float: 1.2,
+};
+
+/** The largest offset, in px, any plane may drift from the content plane. */
+export const PARALLAX_MAX_TRAVEL = 60;
+
+export interface ParallaxPlaneProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Which depth plane this is; sets `data-plane` and the default `rate`. Default `content`. */
+  plane?: ParallaxPlaneKind;
+  /** Scroll rate relative to the page (1 = moves with the content). Defaults per `plane`. */
+  rate?: number;
+}
+
+/**
+ * Offset of a plane from the content plane after `scrollY` px of scroll: `(1 − rate) × factor`
+ * per px, clamped to ±{@link PARALLAX_MAX_TRAVEL}. Reduced motion (factor at the floor) gives an
+ * effective rate of 1 for every plane — no parallax.
+ */
+export function parallaxOffset(scrollY: number, rate: number, factor: number): number {
+  const offset = (1 - rate) * factor * scrollY;
+  return Math.max(-PARALLAX_MAX_TRAVEL, Math.min(PARALLAX_MAX_TRAVEL, offset));
+}
+
+/**
+ * A depth plane that scrolls at its own rate. Uses CSS `animation-timeline: scroll(root)` where
+ * the browser has it, else `motion`'s `scroll()` (lazy optional peer) writing `transform`. The
+ * server HTML has no transform; motion starts after hydration and only when the gate is open.
+ * The plane owns its `transform` — put layout transforms on a child.
+ */
+export const ParallaxPlane = React.forwardRef<HTMLDivElement, ParallaxPlaneProps>(
+  ({ plane = "content", rate, className, style, ...props }, ref) => {
+    const innerRef = React.useRef<HTMLDivElement>(null);
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement, []);
+
+    const effectiveRate = rate ?? PARALLAX_PLANE_RATES[plane];
+    const { mode, factor } = useScrollProgress(
+      (scrollY) => {
+        const el = innerRef.current;
+        if (el)
+          el.style.transform = `translateY(${parallaxOffset(scrollY, effectiveRate, factor)}px)`;
+      },
+      { enabled: effectiveRate !== 1, target: innerRef },
+    );
+
+    const perPx = (1 - effectiveRate) * factor;
+    const timelineStyle =
+      mode === "timeline" && perPx !== 0
+        ? ({
+            "--parallax-travel": `${Math.sign(perPx) * PARALLAX_MAX_TRAVEL}px`,
+            "--parallax-range": `${PARALLAX_MAX_TRAVEL / Math.abs(perPx)}px`,
+          } as React.CSSProperties)
+        : undefined;
+
+    return (
+      <div
+        ref={innerRef}
+        data-slot="parallax-plane"
+        data-plane={plane}
+        data-parallax={mode === "static" ? undefined : mode}
+        className={className}
+        style={timelineStyle ? { ...style, ...timelineStyle } : style}
+        {...props}
+      />
+    );
+  },
+);
+ParallaxPlane.displayName = "ParallaxPlane";

package/src/components/popover/popover.tsx

@@ -14,10 +14,11 @@ export const PopoverContent = forwardRef<
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
         ref={ref}
+        data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-72 rounded-md bg-popover p-4 text-popover-foreground shadow-ring-md outline-none",
+          "z-50 w-72 rounded-md bg-popover p-4 text-popover-foreground shadow-popover outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
           className,

package/src/components/progress/progress.stories.tsx

@@ -28,6 +28,18 @@ const meta = {
       control: "text",
       table: { category: "Appearance" },
     },
+    marker: {
+      description:
+        "Reference point (0–100) rendered as a thin vertical tick — e.g. an “expected by today” pace or a target. Unset renders no tick.",
+      control: { type: "number", min: 0, max: 100 },
+      table: { category: "Reference" },
+    },
+    markerLabel: {
+      description:
+        "What `marker` represents, already localized (e.g. “expected 70% by today”). Appended to the accessible value text unless a caller-supplied `aria-valuetext` is set.",
+      control: "text",
+      table: { category: "Reference" },
+    },
   },
 } satisfies Meta<typeof Progress>;
 export default meta;
@@ -78,3 +90,76 @@ export const Tones: Story = {
     await expect(destructive).toHaveAttribute("aria-valuetext", "Exceeded — 120 of 100");
   },
 };
+
+/**
+ * A KPI running behind its pace marker (62% done, expected 70% by today) —
+ * `markerLabel` composes into `aria-valuetext` alongside the raw value.
+ */
+export const WithMarker: Story = {
+  render: () => (
+    <Progress
+      aria-label="Quarterly goal"
+      className="w-64"
+      marker={70}
+      markerLabel="expected 70% by today"
+      value={62}
+    />
+  ),
+  play: async ({ canvas }) => {
+    const bar = canvas.getByRole("progressbar", { name: "Quarterly goal" });
+    await expect(bar).toHaveAttribute("aria-valuetext", "62%, expected 70% by today");
+  },
+};
+
+/** Ahead of pace — the same reference tick, further behind the filled value. */
+export const WithMarkerAhead: Story = {
+  render: () => (
+    <Progress
+      aria-label="Quarterly goal"
+      className="w-64"
+      marker={50}
+      markerLabel="expected 50% by today"
+      value={78}
+    />
+  ),
+  play: async ({ canvas }) => {
+    const bar = canvas.getByRole("progressbar", { name: "Quarterly goal" });
+    await expect(bar).toHaveAttribute("aria-valuetext", "78%, expected 50% by today");
+  },
+};
+
+/** The pace tick renders on every tone variant, not only `default`. */
+export const MarkerAllVariants: Story = {
+  render: () => (
+    <div className="flex w-64 flex-col gap-3">
+      <Progress
+        aria-label="Default tone with marker"
+        marker={70}
+        markerLabel="expected 70% by today"
+        value={62}
+        variant="default"
+      />
+      <Progress
+        aria-label="Success tone with marker"
+        marker={70}
+        markerLabel="expected 70% by today"
+        value={62}
+        variant="success"
+      />
+      <Progress
+        aria-label="Warning tone with marker"
+        marker={70}
+        markerLabel="expected 70% by today"
+        value={62}
+        variant="warning"
+      />
+      <Progress
+        aria-label="Destructive tone with marker"
+        marker={70}
+        markerLabel="expected 70% by today"
+        value={62}
+        variant="destructive"
+      />
+    </div>
+  ),
+};

package/src/components/progress/progress.test.tsx

@@ -32,4 +32,51 @@ describe("Progress", () => {
       "Exceeded — 100 of 100",
     );
   });
+
+  // marker (pace / target reference tick)
+  it("renders no tick and leaves the DOM unchanged when marker is unset", () => {
+    const { container } = render(<Progress value={40} />);
+    expect(container.querySelector('[data-slot="progress-marker"]')).toBeNull();
+    // The Indicator stays the progressbar's direct child (no wrapper added).
+    const directChild = container.querySelector('[role="progressbar"] > *');
+    expect(directChild).toHaveAttribute("data-slot", "progress-indicator");
+  });
+
+  it("positions the tick at marker% via insetInlineStart", () => {
+    const { container } = render(<Progress value={40} marker={70} />);
+    const tick = container.querySelector('[data-slot="progress-marker"]');
+    expect(tick).toHaveStyle({ insetInlineStart: "70%" });
+  });
+
+  it("clamps marker to 0–100", () => {
+    const { container } = render(<Progress value={40} marker={140} />);
+    const tick = container.querySelector('[data-slot="progress-marker"]');
+    expect(tick).toHaveStyle({ insetInlineStart: "100%" });
+  });
+
+  it("is decorative and leaves aria-valuetext unchanged when markerLabel is absent", () => {
+    render(<Progress value={62} marker={70} />);
+    const progressbar = screen.getByRole("progressbar");
+    expect(progressbar).not.toHaveAttribute("aria-valuetext");
+  });
+
+  it("composes aria-valuetext from value + markerLabel when both marker and markerLabel are set", () => {
+    render(<Progress value={62} marker={70} markerLabel="expected 70% by today" />);
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-valuetext",
+      "62%, expected 70% by today",
+    );
+  });
+
+  it("lets a caller-supplied aria-valuetext win over the composed marker text", () => {
+    render(
+      <Progress
+        aria-valuetext="Custom text"
+        marker={70}
+        markerLabel="expected 70% by today"
+        value={62}
+      />,
+    );
+    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuetext", "Custom text");
+  });
 });

package/src/components/progress/progress.tsx

@@ -23,7 +23,25 @@ export const progressIndicatorVariants = cva("size-full flex-1 transition-transf
 export interface ProgressProps
   extends
     ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
-    VariantProps<typeof progressIndicatorVariants> {}
+    VariantProps<typeof progressIndicatorVariants> {
+  /**
+   * Reference point (0–100, same scale as `value`) — e.g. an "expected by
+   * today" pace or a target — rendered as a thin vertical tick on the track.
+   * Unset (default) renders no tick and leaves the DOM/layout byte-identical
+   * to a marker-less `Progress`.
+   */
+  marker?: number;
+  /**
+   * What `marker` represents (already localized by the caller — e.g.
+   * `"expected 70% by today"`). When set, it is appended to the progress
+   * bar's accessible value text so assistive tech hears the reference point
+   * alongside the value; a caller-supplied `aria-valuetext` always wins over
+   * this composition. When `marker` is set but `markerLabel` is not, the
+   * tick is purely decorative and `aria-valuetext` is left untouched — this
+   * component never invents its own English copy (i18n-strings).
+   */
+  markerLabel?: string;
+}
 
 /**
  * Color must not be the only signal a guardrail tripped: set `aria-valuetext`
@@ -32,19 +50,57 @@ export interface ProgressProps
  * `...props` (Radix's `ProgressPrimitive.Root` already supports it).
  */
 export const Progress = forwardRef<ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(
-  function Progress({ className, value, variant, ...props }, ref) {
-    return (
+  function Progress(
+    { className, value, variant, marker, markerLabel, "aria-valuetext": ariaValuetext, ...props },
+    ref,
+  ) {
+    const hasMarker = typeof marker === "number" && Number.isFinite(marker);
+    const clampedMarker = hasMarker ? Math.min(100, Math.max(0, marker as number)) : undefined;
+    // No invented English glue words (i18n-strings) — just the numeric value
+    // plus the caller's own, already-localized `markerLabel`. A caller's own
+    // `aria-valuetext` always wins and is never overwritten.
+    const resolvedValuetext =
+      ariaValuetext ??
+      (hasMarker && markerLabel && typeof value === "number"
+        ? `${Math.round(value)}%, ${markerLabel}`
+        : undefined);
+
+    const root = (
       <ProgressPrimitive.Root
         ref={ref}
+        data-slot="progress"
         value={value}
+        aria-valuetext={resolvedValuetext}
         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)}%)` }}
         />
       </ProgressPrimitive.Root>
     );
+
+    if (!hasMarker) {
+      return root;
+    }
+
+    return (
+      // Root keeps `overflow-hidden` (clips the indicator fill, unchanged
+      // above); the tick lives OUTSIDE it as a sibling so it is never
+      // clipped. The wrapper mirrors `className` so it matches the track's
+      // own box exactly (width/height/flex sizing), which is what the
+      // tick's `insetInlineStart` percentage is measured against.
+      <div className={cn("relative", className)}>
+        {root}
+        <span
+          aria-hidden={markerLabel ? undefined : "true"}
+          className="pointer-events-none absolute -top-0.5 -bottom-0.5 w-0.5 bg-foreground"
+          data-slot="progress-marker"
+          style={{ insetInlineStart: `${clampedMarker}%` }}
+        />
+      </div>
+    );
   },
 );

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");
+  });
+});