@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/components/carousel/carousel.test.tsx

@@ -0,0 +1,169 @@
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { DirectionProvider } from "@radix-ui/react-direction";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "./carousel";
+
+function renderCarousel(props: Partial<React.ComponentProps<typeof Carousel>> = {}) {
+  return render(
+    <Carousel {...props}>
+      <CarouselContent>
+        <CarouselItem>
+          <input aria-label="slide input" defaultValue="abc" />
+        </CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>,
+  );
+}
+
+describe("Carousel keyboard handling", () => {
+  it("does not intercept ArrowLeft/ArrowRight when the target is a text input", () => {
+    renderCarousel();
+    const input = screen.getByLabelText("slide input") as HTMLInputElement;
+    input.focus();
+    const event = fireEvent.keyDown(input, { key: "ArrowRight", bubbles: true });
+    // `fireEvent` returns `false` from `dispatchEvent` only when
+    // `preventDefault()` was called — the carousel must leave the caret event
+    // alone so it reaches the input's own default behavior.
+    expect(event).toBe(true);
+  });
+
+  it("still intercepts ArrowLeft/ArrowRight outside of an editable target", () => {
+    renderCarousel();
+    const region = screen.getByRole("region");
+    const event = fireEvent.keyDown(region, { key: "ArrowRight", bubbles: true });
+    expect(event).toBe(false);
+  });
+});
+
+describe("Carousel RTL keyboard mapping", () => {
+  it("flips ArrowLeft/ArrowRight to the visually-adjacent slide under dir=rtl", () => {
+    let scrollPrevSpy: ReturnType<typeof vi.spyOn> | undefined;
+    let scrollNextSpy: ReturnType<typeof vi.spyOn> | undefined;
+    render(
+      <DirectionProvider dir="rtl">
+        <Carousel
+          setApi={(api) => {
+            if (!api) return;
+            scrollPrevSpy = vi.spyOn(api, "scrollPrev");
+            scrollNextSpy = vi.spyOn(api, "scrollNext");
+          }}
+        >
+          <CarouselContent>
+            <CarouselItem>Slide 1</CarouselItem>
+            <CarouselItem>Slide 2</CarouselItem>
+          </CarouselContent>
+        </Carousel>
+      </DirectionProvider>,
+    );
+    const region = screen.getByRole("region");
+    // In RTL, ArrowLeft is the visually-forward direction — it must trigger
+    // the SAME embla call the "Next slide" button does, not "Previous".
+    fireEvent.keyDown(region, { key: "ArrowLeft" });
+    expect(scrollNextSpy).toHaveBeenCalledTimes(1);
+    expect(scrollPrevSpy).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(region, { key: "ArrowRight" });
+    expect(scrollPrevSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps the physical mapping under dir=ltr (default)", () => {
+    let scrollPrevSpy: ReturnType<typeof vi.spyOn> | undefined;
+    let scrollNextSpy: ReturnType<typeof vi.spyOn> | undefined;
+    render(
+      <Carousel
+        setApi={(api) => {
+          if (!api) return;
+          scrollPrevSpy = vi.spyOn(api, "scrollPrev");
+          scrollNextSpy = vi.spyOn(api, "scrollNext");
+        }}
+      >
+        <CarouselContent>
+          <CarouselItem>Slide 1</CarouselItem>
+          <CarouselItem>Slide 2</CarouselItem>
+        </CarouselContent>
+      </Carousel>,
+    );
+    const region = screen.getByRole("region");
+    fireEvent.keyDown(region, { key: "ArrowRight" });
+    expect(scrollNextSpy).toHaveBeenCalledTimes(1);
+    fireEvent.keyDown(region, { key: "ArrowLeft" });
+    expect(scrollPrevSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("uses ArrowUp/ArrowDown instead of ArrowLeft/ArrowRight for a vertical carousel", () => {
+    let scrollPrevSpy: ReturnType<typeof vi.spyOn> | undefined;
+    let scrollNextSpy: ReturnType<typeof vi.spyOn> | undefined;
+    render(
+      <Carousel
+        orientation="vertical"
+        setApi={(api) => {
+          if (!api) return;
+          scrollPrevSpy = vi.spyOn(api, "scrollPrev");
+          scrollNextSpy = vi.spyOn(api, "scrollNext");
+        }}
+      >
+        <CarouselContent>
+          <CarouselItem>Slide 1</CarouselItem>
+          <CarouselItem>Slide 2</CarouselItem>
+        </CarouselContent>
+      </Carousel>,
+    );
+    const region = screen.getByRole("region");
+    fireEvent.keyDown(region, { key: "ArrowRight" });
+    expect(scrollNextSpy).not.toHaveBeenCalled();
+    fireEvent.keyDown(region, { key: "ArrowDown" });
+    expect(scrollNextSpy).toHaveBeenCalledTimes(1);
+    fireEvent.keyDown(region, { key: "ArrowUp" });
+    expect(scrollPrevSpy).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("CarouselPrevious / CarouselNext", () => {
+  it("forward a ref to the underlying button", () => {
+    const prevRef = createRef<HTMLButtonElement>();
+    const nextRef = createRef<HTMLButtonElement>();
+    renderCarousel();
+    render(
+      <Carousel>
+        <CarouselContent>
+          <CarouselItem>1</CarouselItem>
+        </CarouselContent>
+        <CarouselPrevious ref={prevRef} />
+        <CarouselNext ref={nextRef} />
+      </Carousel>,
+    );
+    expect(prevRef.current).toBeInstanceOf(HTMLButtonElement);
+    expect(nextRef.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("keeps the buttons inset on narrow viewports (no unconditional negative offset)", () => {
+    render(
+      <Carousel>
+        <CarouselContent>
+          <CarouselItem>1</CarouselItem>
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>,
+    );
+    const prev = screen.getByRole("button", { name: "Previous slide" });
+    const next = screen.getByRole("button", { name: "Next slide" });
+    // The negative offset that pushes the button outside the carousel box
+    // only applies from `sm:` up; unconditionally offsetting it caused
+    // horizontal overflow on narrow phone screens.
+    expect(prev.className).not.toMatch(/(?<!sm:)-start-12/);
+    expect(next.className).not.toMatch(/(?<!sm:)-end-12/);
+    expect(prev.className).toContain("sm:-start-12");
+    expect(next.className).toContain("sm:-end-12");
+  });
+});

package/src/components/carousel/carousel.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   createContext,
   forwardRef,
@@ -6,13 +8,29 @@ import {
   useEffect,
   useState,
   type ComponentProps,
+  type ElementRef,
   type HTMLAttributes,
   type KeyboardEvent,
 } from "react";
+import { useDirection } from "@radix-ui/react-direction";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Button } from "../button";
+import { useLocale } from "../locale-provider";
+
+/**
+ * True when the keyboard event's target already owns arrow-key semantics of
+ * its own (a text field's caret, a contenteditable's selection) — the
+ * carousel must not steal ArrowLeft/ArrowRight from a form control that
+ * happens to live inside the active slide.
+ */
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+}
 
 type CarouselApi = UseEmblaCarouselType[1];
 type CarouselOptions = NonNullable<Parameters<typeof useEmblaCarousel>[0]>;
@@ -62,17 +80,20 @@ export const Carousel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
       // aria-roledescription changes the announcement, it does not name the
       // landmark. Default is overridable; pass a specific label ("Product
       // photos") when the carousel's purpose isn't generic. Issue #279.
-      "aria-label": ariaLabel = "Carousel",
+      "aria-label": ariaLabel,
       ...props
     },
     ref,
   ) {
+    const { t } = useLocale();
+    const resolvedAriaLabel = ariaLabel ?? t("ui.carousel.label");
     const [carouselRef, api] = useEmblaCarousel(
       { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
       plugins,
     );
     const [canScrollPrev, setCanScrollPrev] = useState(false);
     const [canScrollNext, setCanScrollNext] = useState(false);
+    const dir = useDirection();
 
     const onSelect = useCallback((a: CarouselApi) => {
       if (!a) return;
@@ -85,15 +106,42 @@ export const Carousel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
 
     const onKeyDown = useCallback(
       (e: KeyboardEvent<HTMLDivElement>) => {
+        // Don't steal ArrowLeft/ArrowRight from a text field's caret or a
+        // contenteditable's selection inside the active slide.
+        if (isEditableTarget(e.target)) return;
+
+        if (orientation === "vertical") {
+          if (e.key === "ArrowUp") {
+            e.preventDefault();
+            scrollPrev();
+          } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            scrollNext();
+          }
+          return;
+        }
+
+        // Horizontal: the PHYSICAL key maps to the visually-adjacent slide,
+        // which flips with writing direction — in RTL, ArrowLeft moves toward
+        // the next slide (visually to the left of the current one), not prev.
+        const isRtl = dir === "rtl";
         if (e.key === "ArrowLeft") {
           e.preventDefault();
-          scrollPrev();
+          if (isRtl) {
+            scrollNext();
+          } else {
+            scrollPrev();
+          }
         } else if (e.key === "ArrowRight") {
           e.preventDefault();
-          scrollNext();
+          if (isRtl) {
+            scrollPrev();
+          } else {
+            scrollNext();
+          }
         }
       },
-      [scrollPrev, scrollNext],
+      [orientation, dir, scrollPrev, scrollNext],
     );
 
     useEffect(() => {
@@ -105,6 +153,7 @@ export const Carousel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
       api.on("reInit", onSelect);
       api.on("select", onSelect);
       return () => {
+        api.off("reInit", onSelect);
         api.off("select", onSelect);
       };
     }, [api, onSelect]);
@@ -128,7 +177,7 @@ export const Carousel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
           className={cn("relative", className)}
           role="region"
           aria-roledescription="carousel"
-          aria-label={ariaLabel}
+          aria-label={resolvedAriaLabel}
           {...props}
         >
           {children}
@@ -176,20 +225,28 @@ export const CarouselItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
   },
 );
 
-export function CarouselPrevious({ className, ...props }: ComponentProps<typeof Button>) {
+export const CarouselPrevious = forwardRef<
+  ElementRef<typeof Button>,
+  ComponentProps<typeof Button>
+>(function CarouselPrevious({ className, ...props }, ref) {
   const { scrollPrev, canScrollPrev, orientation } = useCarousel();
+  const { t } = useLocale();
   return (
     <Button
+      ref={ref}
       variant="outline"
       size="icon"
       disabled={!canScrollPrev}
       onClick={scrollPrev}
-      aria-label="Previous slide"
+      aria-label={t("previousSlide")}
       className={cn(
         "absolute size-8 rounded-full",
+        // Inset on narrow screens (no room for the button to sit outside
+        // the carousel box without overflowing horizontally); pushed
+        // outside the box only from `sm` up, where there's margin for it.
         orientation === "horizontal"
-          ? "-start-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          ? "start-2 top-1/2 -translate-y-1/2 sm:-start-12"
+          : "top-2 left-1/2 -translate-x-1/2 rotate-90 sm:-top-12",
         className,
       )}
       {...props}
@@ -197,29 +254,33 @@ export function CarouselPrevious({ className, ...props }: ComponentProps<typeof
       <ArrowLeft className="size-4" data-rtl-flip />
     </Button>
   );
-}
+});
 
-export function CarouselNext({ className, ...props }: ComponentProps<typeof Button>) {
-  const { scrollNext, canScrollNext, orientation } = useCarousel();
-  return (
-    <Button
-      variant="outline"
-      size="icon"
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      aria-label="Next slide"
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "-end-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      {...props}
-    >
-      <ArrowRight className="size-4" data-rtl-flip />
-    </Button>
-  );
-}
+export const CarouselNext = forwardRef<ElementRef<typeof Button>, ComponentProps<typeof Button>>(
+  function CarouselNext({ className, ...props }, ref) {
+    const { scrollNext, canScrollNext, orientation } = useCarousel();
+    const { t } = useLocale();
+    return (
+      <Button
+        ref={ref}
+        variant="outline"
+        size="icon"
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        aria-label={t("nextSlide")}
+        className={cn(
+          "absolute size-8 rounded-full",
+          orientation === "horizontal"
+            ? "end-2 top-1/2 -translate-y-1/2 sm:-end-12"
+            : "bottom-2 left-1/2 -translate-x-1/2 rotate-90 sm:-bottom-12",
+          className,
+        )}
+        {...props}
+      >
+        <ArrowRight className="size-4" data-rtl-flip />
+      </Button>
+    );
+  },
+);
 
 export type { CarouselApi };

package/src/components/change-review/change-review.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 import { useState } from "react";
+import { type CheckResult } from "../../lib/check-result";
 import {
   ChangeReview,
   ChangeReviewHeader,
@@ -42,6 +43,41 @@ const PROVENANCE = {
   note: "run-abc123",
 };
 
+// ─── Sample hunks with verification checks (#112) ─────────────────────────────
+
+const HUNKS_WITH_CHECKS: ChangeHunk[] = [
+  {
+    id: "checked-1",
+    title: "src/api/handler.ts",
+    status: "modified",
+    before: `function handle(req) { return req.body; }`,
+    after: `function handle(req: Request) { return req.body; }`,
+    checks: [
+      { label: "eslint", ok: true, durationMs: 214 },
+      {
+        label: "tsc",
+        ok: false,
+        durationMs: 890,
+        detail:
+          "src/api/handler.ts:1:31 — Parameter 'req' implicitly has an 'any' type, and the " +
+          "surrounding function type annotation does not resolve it. This is a deliberately " +
+          "long detail line so it renders behind a collapsed disclosure by default.",
+      },
+    ],
+  },
+  {
+    id: "checked-2",
+    title: "src/api/handler.test.ts",
+    status: "added",
+    after: `it("handles a request", () => { ... });`,
+    checks: [
+      { label: "pre_tool_use", ok: true, phase: "before" },
+      { label: "eslint", ok: true, phase: "after", durationMs: 120 },
+      { label: "vitest", ok: true, phase: "after", detail: "3 passed", durationMs: 1420 },
+    ] satisfies CheckResult[],
+  },
+];
+
 // ─── Meta ─────────────────────────────────────────────────────────────────────
 
 const meta = {
@@ -53,10 +89,30 @@ const meta = {
     docs: {
       description: {
         component:
+          "The ACCEPT/REJECT diff surface; read-only patch lines are `AI/DiffView` and an " +
+          "editable side-by-side is `Editor/DiffEditor` — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
           "AI-edit trust gate. When an agent proposes edits, the human reviews them " +
           "hunk-by-hunk and accepts or rejects each before they apply. Compound " +
           "component with lifted state — compose parts for custom layouts, or use the " +
-          "convenience `<ChangeReview>` root.",
+          "convenience `<ChangeReview>` root.\n\n" +
+          "**Ships from `@elabs-ai/components-ui`**, not from the package this story " +
+          "group names. Stories are grouped by what a component is *for*, which " +
+          "`docs/STORYBOOK_GUIDELINES.md` names as intentional and cites this component " +
+          "as the worked example.\n\n" +
+          "**A hunk’s `before` / `after` are prose, not diff lines.** They are ordinary " +
+          "`ReactNode`s, drawn as a deliberately quiet no-fill comparison — a struck " +
+          "muted “before” above a plain “after”, with the status rail carrying the " +
+          "polarity. This component is not a line renderer and is not going to become " +
+          "one.\n\n" +
+          "**Structured `DiffLine[]` hunks arrive by injection.** The app that depends " +
+          "on both packages passes a `<DiffView>` (`@elabs-ai/components-ai`) through " +
+          "the `renderHunk` render-prop or a hunk’s `after` slot; neither package " +
+          "imports the other. `ChangeHunk` gains no `lines` field and `DiffLine` " +
+          "never moves — a ratified seam, recorded in § 3 of the adoption-architecture " +
+          "decision. The *Injected hunk renderer* story below shows the shape with a " +
+          "stand-in node; the real wiring is *Composed into ChangeReview (ui)* on " +
+          "[AI/DiffView](?path=/docs/ai-diffview--docs).",
       },
     },
   },
@@ -239,6 +295,55 @@ export const CustomRenderer: Story = {
   },
 };
 
+// ─── Injected hunk renderer (the DiffView seam) ───────────────────────────────
+//
+// BINDING SEAM — docs/decisions/2026-09-01-brainless-adoption-architecture.md § 3.
+// `ChangeHunk` gains no `lines` field and `DiffLine` never moves into this
+// package. An app that wants structured patch rows inside the trust gate injects
+// a renderer through `renderHunk` (or a hunk's `after` slot); in a real app that
+// node is `<DiffView lines={…} />` from `@elabs-ai/components-ai`.
+//
+// This package has no dependency on that one in EITHER direction — that is the
+// whole point of the seam — so the story stands in for it with a plain node of
+// the same shape. The real composition is the `ChangeReviewComposition` story in
+// `packages/ai/src/diff-view.stories.tsx`, which can import both.
+
+function StandInLineRenderer({ file }: { file: string }) {
+  return (
+    <div
+      data-testid={`injected-${file}`}
+      className="rounded-md bg-surface-muted p-3 text-meta text-muted-foreground"
+    >
+      <span className="font-mono">{`<DiffView lines={…} />`}</span> renders the patch rows for{" "}
+      <span className="font-medium text-foreground">{file}</span> here.
+    </div>
+  );
+}
+
+export const InjectedHunkRenderer: Story = {
+  args: {
+    hunks: HUNKS,
+    renderHunk: (hunk) => <StandInLineRenderer file={hunk.title ?? hunk.id} />,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // The injected node replaces the default before/after prose on every hunk…
+    await waitFor(() => expect(canvas.getByTestId("injected-config/settings.json")).toBeVisible());
+    expect(canvas.getAllByTestId(/^injected-/)).toHaveLength(3);
+
+    // …and the default prose comparison is gone, because the seam replaces it.
+    expect(canvas.queryByText('"timeout": 30')).not.toBeInTheDocument();
+
+    // Approve/reject still belongs to ChangeReview, not to the injected renderer.
+    await userEvent.click(
+      canvas.getByRole("button", { name: /approve hunk: config\/settings\.json/i }),
+    );
+    await waitFor(() => expect(canvas.getByText("1 of 3 approved")).toBeVisible());
+    expect(canvas.getByTestId("injected-config/settings.json")).toBeVisible();
+  },
+};
+
 // ─── Compound (manual layout) ─────────────────────────────────────────────────
 
 export const Compound: Story = {
@@ -286,3 +391,42 @@ edge cases properly and includes proper error boundaries.`,
     ],
   },
 };
+
+// ─── With verification checks (#112) ──────────────────────────────────────────
+// Evidence a reviewer needs (lint / types / tests / policy hooks) rendered
+// alongside the diff. A failing check informs the decision — it never blocks
+// approval, so `checked-1` (which carries a failing `tsc` check) can still be
+// approved below.
+
+export const WithChecks: Story = {
+  args: {
+    hunks: HUNKS_WITH_CHECKS,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getByText("src/api/handler.ts")).toBeVisible());
+
+    // Passing and failing checks are distinguishable by accessible text —
+    // never by colour alone.
+    await waitFor(() => expect(canvas.getAllByText("Passed").length).toBeGreaterThan(0));
+    await waitFor(() => expect(canvas.getAllByText("Failed").length).toBeGreaterThan(0));
+
+    // The long `tsc` detail is collapsed by default…
+    const showDetail = canvas.getByRole("button", { name: /show detail/i });
+    expect(canvas.queryByText(/implicitly has an 'any' type/)).not.toBeInTheDocument();
+    // …and expands on click.
+    await userEvent.click(showDetail);
+    await waitFor(() => expect(canvas.getByText(/implicitly has an 'any' type/)).toBeVisible());
+
+    // Both phases present on the second hunk → grouped "Before" / "After".
+    await waitFor(() => expect(canvas.getByText("Before")).toBeVisible());
+    await waitFor(() => expect(canvas.getByText("After")).toBeVisible());
+
+    // A failing check does not block approval — it only informs it.
+    const approveFirstHunk = canvas.getByRole("button", {
+      name: /approve hunk: src\/api\/handler\.ts/i,
+    });
+    await userEvent.click(approveFirstHunk);
+    await waitFor(() => expect(canvas.getByText("1 of 2 approved")).toBeVisible());
+  },
+};