@elabs-ai/components-ui 4.0.0 → 4.2.0

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

@@ -65,6 +65,26 @@ describe("ChangeReview — render", () => {
     );
     expect(screen.getByTestId("custom-prov")).toBeInTheDocument();
   });
+
+  it("exposes structured provenance as a named group reachable by assistive tech", () => {
+    // aria-label on a role-less <div> is prohibited and silently discarded (#159) —
+    // assert the accessible name actually resolves via the ARIA role tree, not just
+    // that the attribute is present in the DOM.
+    render(
+      <ChangeReview
+        hunks={HUNKS}
+        provenance={{ author: "Atlas Agent", model: "claude-sonnet-4-6", timestamp: "14:02" }}
+      />,
+    );
+    expect(screen.getByRole("group", { name: "Change provenance" })).toBeInTheDocument();
+  });
+
+  it("exposes ReactNode provenance as a named group reachable by assistive tech", () => {
+    render(
+      <ChangeReview hunks={HUNKS} provenance={<span data-testid="custom-prov">Custom</span>} />,
+    );
+    expect(screen.getByRole("group", { name: "Change provenance" })).toBeInTheDocument();
+  });
 });
 
 // ─── Initial state with controlled approved set ───────────────────────────────
@@ -232,6 +252,129 @@ describe("ChangeReview — accessibility", () => {
   });
 });
 
+// ─── Checks (verification evidence, #112) ─────────────────────────────────────
+
+describe("ChangeReview — checks", () => {
+  it("shows a failing check's status in accessible text with an icon distinct from a passing check's", () => {
+    const hunksWithChecks: ChangeHunk[] = [
+      {
+        id: "h1",
+        title: "config/a.json",
+        status: "modified",
+        before: "old",
+        after: "new",
+        checks: [
+          { label: "eslint", ok: true },
+          { label: "tsc", ok: false, detail: "Type 'string' is not assignable to type 'number'." },
+        ],
+      },
+    ];
+    render(<ChangeReview hunks={hunksWithChecks} />);
+
+    // Accessible text carries the pass/fail status word — not color alone.
+    const passed = screen.getByText("Passed");
+    const failed = screen.getByText("Failed");
+    expect(passed).toBeInTheDocument();
+    expect(failed).toBeInTheDocument();
+
+    // The icon differs between a passing and a failing check (StatusIcon's
+    // canonical `complete` vs `failed` glyphs — never colour alone).
+    const passRow = passed.closest('[data-slot="change-review-hunk-check"]')!;
+    const failRow = failed.closest('[data-slot="change-review-hunk-check"]')!;
+    const passIcon = passRow.querySelector("svg[data-status]");
+    const failIcon = failRow.querySelector("svg[data-status]");
+    expect(passIcon).toHaveAttribute("data-status", "complete");
+    expect(failIcon).toHaveAttribute("data-status", "failed");
+    expect(passIcon?.getAttribute("data-status")).not.toBe(failIcon?.getAttribute("data-status"));
+  });
+
+  it("allows approving a hunk that carries a failing check", async () => {
+    const user = userEvent.setup();
+    const hunksWithFailingCheck: ChangeHunk[] = [
+      {
+        id: "h1",
+        title: "config/a.json",
+        status: "modified",
+        before: "old",
+        after: "new",
+        checks: [{ label: "tsc", ok: false, detail: "Type error" }],
+      },
+    ];
+    render(<ChangeReview hunks={hunksWithFailingCheck} />);
+
+    expect(screen.getByText("Failed")).toBeInTheDocument();
+
+    const btn = screen.getByRole("button", { name: /approve hunk: config\/a\.json/i });
+    await user.click(btn);
+
+    expect(screen.getByText("1 of 1 approved")).toBeInTheDocument();
+    expect(screen.getByText("Approved")).toBeInTheDocument();
+    // The failing check is still shown — informational, not blocking.
+    expect(screen.getByText("Failed")).toBeInTheDocument();
+  });
+
+  it("does not render a checks section when a hunk has no checks (strictly additive)", () => {
+    render(<ChangeReview hunks={HUNKS} />);
+    expect(screen.queryByText("Passed")).not.toBeInTheDocument();
+    expect(screen.queryByText("Failed")).not.toBeInTheDocument();
+  });
+
+  it("groups checks into Before / After sections only when both phases are present", () => {
+    const bothPhases: ChangeHunk[] = [
+      {
+        id: "h1",
+        checks: [
+          { label: "pre_tool_use", ok: true, phase: "before" },
+          { label: "post_tool_use", ok: true, phase: "after" },
+        ],
+      },
+    ];
+    render(<ChangeReview hunks={bothPhases} />);
+    expect(screen.getByText("Before")).toBeInTheDocument();
+    expect(screen.getByText("After")).toBeInTheDocument();
+  });
+
+  it("does not render phase headers when only one phase is present", () => {
+    const onePhase: ChangeHunk[] = [
+      {
+        id: "h1",
+        checks: [{ label: "eslint", ok: true, phase: "before" }],
+      },
+    ];
+    render(<ChangeReview hunks={onePhase} />);
+    expect(screen.queryByText("Before")).not.toBeInTheDocument();
+    expect(screen.queryByText("After")).not.toBeInTheDocument();
+    expect(screen.getByText("eslint")).toBeInTheDocument();
+  });
+
+  it("renders a short detail line inline and shows the duration", () => {
+    const hunksWithDuration: ChangeHunk[] = [
+      { id: "h1", checks: [{ label: "eslint", ok: true, detail: "0 problems", durationMs: 128 }] },
+    ];
+    render(<ChangeReview hunks={hunksWithDuration} />);
+    expect(screen.getByText("0 problems")).toBeInTheDocument();
+    expect(screen.getByText("128ms")).toBeInTheDocument();
+  });
+
+  it("collapses a long detail line behind a disclosure, expandable on click", async () => {
+    const user = userEvent.setup();
+    const longDetail =
+      "This is a deliberately long detail line that exceeds the inline collapse " +
+      "threshold and should therefore render behind a disclosure toggle by default.";
+    const hunksWithLongDetail: ChangeHunk[] = [
+      { id: "h1", checks: [{ label: "tsc", ok: false, detail: longDetail }] },
+    ];
+    render(<ChangeReview hunks={hunksWithLongDetail} />);
+
+    // Collapsed by default: the detail text is not yet in the document.
+    expect(screen.queryByText(longDetail)).not.toBeInTheDocument();
+    const trigger = screen.getByRole("button", { name: /show detail/i });
+
+    await user.click(trigger);
+    expect(await screen.findByText(longDetail)).toBeInTheDocument();
+  });
+});
+
 // ─── Compound usage ───────────────────────────────────────────────────────────
 
 describe("ChangeReview — compound component parts", () => {

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

@@ -11,6 +11,27 @@
  * Design references: GitHub PR file-review (per-hunk viewed/comment),
  * Cursor/Copilot "review changes" panel, Graphite/Linear review UIs.
  *
+ * NOT a diff-line renderer, and deliberately never becoming one. A hunk's
+ * `before`/`after` are ordinary `ReactNode` prose, drawn as a quiet no-fill
+ * comparison; the `−`/`+` markers below mean "previous content"/"proposed
+ * content", which is not the same idea as `DiffLine`'s "removed line"/"added
+ * line" even though the glyphs coincide. Do NOT reach for `diffLineMarker` here:
+ * a coincidence stays a literal (theming.md, intentional-mirror rule).
+ *
+ * Structured `DiffLine[]` hunks reach this component by INJECTION, which is a
+ * binding decision, not an unfinished merge — see
+ * `docs/decisions/2026-09-01-brainless-adoption-architecture.md` § 3:
+ *   - `ChangeHunk` gains NO `lines` field and `DiffLine` never moves here.
+ *   - The app that depends on both packages passes a `<DiffView>`
+ *     (`@elabs-ai/components-ai`, Shiki-backed) through `renderHunk` or a hunk's
+ *     `after` slot. Neither package imports the other, in either direction.
+ *   - Re-litigated and re-ratified 2026-09-03: moving this component into
+ *     `@elabs-ai/components-ai` was rejected because it would push a
+ *     dependency-free component into a layer-2 leaf that `terminal`, `editor`
+ *     and `viewer` could then never reach.
+ * See the `InjectedHunkRenderer` story here, and `ChangeReviewComposition` in
+ * `packages/ai/src/diff-view.stories.tsx` for the real two-package wiring.
+ *
  * State grid: empty (no hunks → StatePanel), single hunk, mixed, all-approved,
  * all-rejected, very long hunk content. Approval state is signalled with color
  * AND icon/label (colorblind + high-decoration/high-contrast safe).
@@ -36,12 +57,17 @@ import {
   type HTMLAttributes,
   type ReactNode,
 } from "react";
-import { Check, X, CheckCheck, User, Bot, Clock } from "lucide-react";
+import { Check, X, CheckCheck, User, Bot, Clock, ChevronDown } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
+import { type CheckResult } from "../../lib/check-result";
+import { formatElapsed } from "../../lib/format-duration";
 import { Button } from "../button/button";
 import { Badge } from "../badge/badge";
 import { StatePanel } from "../state-panel/state-panel";
+import { StatusIcon } from "../status-badge/status-badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible/collapsible";
+import { useLocale } from "../locale-provider";
 
 // ─── Public types ─────────────────────────────────────────────────────────────
 
@@ -74,6 +100,13 @@ export interface ChangeHunk {
   status?: ChangeHunkStatus;
   /** Per-hunk provenance override (overrides the review-level provenance). */
   provenance?: ChangeProvenance;
+  /**
+   * Verification results for this hunk (lint / types / tests / policy hooks).
+   * Purely informational — a failing check never blocks approval, it only
+   * informs the reviewer's decision. Grouped into "Before" / "After" sections
+   * when both phases are present.
+   */
+  checks?: CheckResult[];
 }
 
 /** State surface exposed by the ChangeReview context. */
@@ -251,6 +284,7 @@ export type ChangeReviewHeaderProps = HTMLAttributes<HTMLDivElement>;
  */
 export const ChangeReviewHeader = forwardRef<HTMLDivElement, ChangeReviewHeaderProps>(
   function ChangeReviewHeader({ className, ...props }, ref) {
+    const { t } = useLocale();
     const { state, actions, headingId } = useChangeReview();
     const { approvedCount, totalCount, allApproved, noneApproved } = state;
 
@@ -262,10 +296,10 @@ export const ChangeReviewHeader = forwardRef<HTMLDivElement, ChangeReviewHeaderP
       >
         <div className="flex items-center gap-2 min-w-0">
           <span id={headingId} className="text-subtitle font-semibold text-foreground truncate">
-            Review changes
+            {t("ui.changeReview.heading")}
           </span>
           <Badge variant={allApproved ? "success" : approvedCount > 0 ? "info" : "secondary"}>
-            {approvedCount} of {totalCount} approved
+            {t("ui.changeReview.approvedCount", { approved: approvedCount, total: totalCount })}
           </Badge>
         </div>
 
@@ -276,20 +310,20 @@ export const ChangeReviewHeader = forwardRef<HTMLDivElement, ChangeReviewHeaderP
               variant="outline-subtle"
               disabled={noneApproved}
               onClick={actions.rejectAll}
-              aria-label="Reject all changes"
+              aria-label={t("ui.changeReview.rejectAllLabel")}
             >
               <X aria-hidden="true" />
-              Reject all
+              {t("ui.changeReview.rejectAll")}
             </Button>
             <Button
               size="sm"
               variant={allApproved ? "secondary" : "default"}
               disabled={allApproved}
               onClick={actions.approveAll}
-              aria-label="Approve all changes"
+              aria-label={t("ui.changeReview.approveAllLabel")}
             >
               <CheckCheck aria-hidden="true" />
-              Approve all
+              {t("ui.changeReview.approveAll")}
             </Button>
           </div>
         )}
@@ -325,6 +359,7 @@ function isChangeProvenance(v: unknown): v is ChangeProvenance {
  */
 export const ChangeReviewProvenance = forwardRef<HTMLDivElement, ChangeReviewProvenanceProps>(
   function ChangeReviewProvenance({ provenance, className, ...props }, ref) {
+    const { t } = useLocale();
     if (isChangeProvenance(provenance)) {
       const { author, model, timestamp, note } = provenance;
       return (
@@ -334,7 +369,8 @@ export const ChangeReviewProvenance = forwardRef<HTMLDivElement, ChangeReviewPro
             "flex flex-wrap items-center gap-x-3 gap-y-1 text-caption text-muted-foreground pb-3",
             className,
           )}
-          aria-label="Change provenance"
+          role="group"
+          aria-label={t("ui.changeReview.provenanceLabel")}
           {...props}
         >
           {author && (
@@ -365,7 +401,8 @@ export const ChangeReviewProvenance = forwardRef<HTMLDivElement, ChangeReviewPro
       <div
         ref={ref}
         className={cn("pb-3 text-caption text-muted-foreground", className)}
-        aria-label="Change provenance"
+        role="group"
+        aria-label={t("ui.changeReview.provenanceLabel")}
         {...props}
       >
         {provenance as ReactNode}
@@ -384,14 +421,15 @@ export type ChangeReviewListProps = HTMLAttributes<HTMLOListElement>;
  */
 export const ChangeReviewList = forwardRef<HTMLOListElement, ChangeReviewListProps>(
   function ChangeReviewList({ className, children, ...props }, ref) {
+    const { t } = useLocale();
     const { hunks, headingId } = useChangeReview();
 
     if (hunks.length === 0) {
       return (
         <StatePanel
           kind="empty"
-          title="No changes to review"
-          description="When an agent proposes edits, they'll appear here for your approval."
+          title={t("ui.changeReview.emptyTitle")}
+          description={t("ui.changeReview.emptyDescription")}
           className="my-2"
         />
       );
@@ -419,7 +457,11 @@ const HUNK_STATUS_ICONS: Record<ChangeHunkStatus, ReactNode> = {
     </span>
   ),
   removed: (
-    <span className="text-destructive font-bold text-meta" aria-hidden="true">
+    // #124: sibling of `added`/`modified` above — this glyph is a decorative
+    // aria-hidden marker beside a labelled span (see HUNK_STATUS_LABELS), and
+    // reads as running text at the type scale, so it takes the ink rung the
+    // other two already use.
+    <span className="text-destructive-text font-bold text-meta" aria-hidden="true">
       −
     </span>
   ),
@@ -430,12 +472,153 @@ const HUNK_STATUS_ICONS: Record<ChangeHunkStatus, ReactNode> = {
   ),
 };
 
-const HUNK_STATUS_LABELS: Record<ChangeHunkStatus, string> = {
-  added: "added",
-  removed: "removed",
-  modified: "modified",
+const HUNK_STATUS_LABEL_KEYS: Record<ChangeHunkStatus, string> = {
+  added: "ui.changeReview.statusAdded",
+  removed: "ui.changeReview.statusRemoved",
+  modified: "ui.changeReview.statusModified",
+};
+
+// ─── Checks (verification evidence) ────────────────────────────────────────────
+
+/**
+ * A check's `detail` collapses behind a disclosure once it's long enough that
+ * showing it inline would dominate the hunk row. Short details always render
+ * in place.
+ */
+const CHECK_DETAIL_COLLAPSE_THRESHOLD = 80;
+
+function isLongCheckDetail(detail: string): boolean {
+  return detail.length > CHECK_DETAIL_COLLAPSE_THRESHOLD || detail.includes("\n");
+}
+
+const CHECK_PHASE_LABEL_KEYS: Record<"before" | "after", string> = {
+  before: "ui.changeReview.phaseBefore",
+  after: "ui.changeReview.phaseAfter",
 };
 
+/**
+ * Group checks for display. Phase headers ("Before" / "After") appear ONLY
+ * when both phases are present in the same hunk — a single-phase or
+ * unphased list of checks renders flat, with no header noise.
+ */
+function groupChecksByPhase(
+  checks: CheckResult[],
+): { phase?: "before" | "after"; items: CheckResult[] }[] {
+  const before = checks.filter((c) => c.phase === "before");
+  const after = checks.filter((c) => c.phase === "after");
+  const showPhaseLabels = before.length > 0 && after.length > 0;
+
+  if (!showPhaseLabels) {
+    return [{ items: checks }];
+  }
+
+  const rest = checks.filter((c) => c.phase !== "before" && c.phase !== "after");
+  const groups: { phase?: "before" | "after"; items: CheckResult[] }[] = [];
+  if (rest.length > 0) groups.push({ items: rest });
+  groups.push({ phase: "before", items: before });
+  groups.push({ phase: "after", items: after });
+  return groups;
+}
+
+/**
+ * A single verification result row: icon + label + accessible status word +
+ * optional duration, with an optional collapsed detail line below.
+ *
+ * The pass/fail signal is carried by TWO non-color cues — the icon (distinct
+ * glyph per `StatusIcon`'s canonical vocabulary) and the visible "Passed"/
+ * "Failed" text — so it survives in greyscale (WCAG 1.4.1). `StatusIcon` is
+ * decorative (`aria-hidden`); the status word is what reaches assistive tech.
+ */
+function ChangeCheckRow({ check }: { check: CheckResult }) {
+  const { t } = useLocale();
+  const [detailOpen, setDetailOpen] = useState(false);
+  const { label, ok, detail, durationMs } = check;
+  const statusWord = ok ? t("ui.changeReview.checkPassed") : t("ui.changeReview.checkFailed");
+  const hasDetail = detail !== undefined && detail !== "";
+  const longDetail = hasDetail && isLongCheckDetail(detail);
+
+  return (
+    <div data-slot="change-review-hunk-check" data-ok={ok} className="flex flex-col gap-1">
+      <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 min-w-0">
+        <StatusIcon status={ok ? "complete" : "failed"} className="size-3.5 shrink-0" />
+        <span className="text-caption font-medium text-foreground truncate">{label}</span>
+        <span className={cn("text-caption", ok ? "text-success-text" : "text-destructive-text")}>
+          {statusWord}
+        </span>
+        {durationMs !== undefined && (
+          <span className="text-caption text-muted-foreground tabular-nums shrink-0">
+            {formatElapsed(durationMs)}
+          </span>
+        )}
+      </div>
+
+      {hasDetail &&
+        (longDetail ? (
+          <Collapsible open={detailOpen} onOpenChange={setDetailOpen}>
+            <CollapsibleTrigger
+              className={cn(
+                "flex items-center gap-1 self-start rounded-sm ps-5 text-caption text-muted-foreground",
+                "hover:text-foreground focus-ring",
+              )}
+            >
+              <ChevronDown
+                aria-hidden="true"
+                className={cn(
+                  "size-3 transition-transform duration-fast motion-reduce:transition-none",
+                  detailOpen ? "rotate-180" : "rotate-0",
+                )}
+              />
+              {detailOpen ? t("ui.changeReview.hideDetail") : t("ui.changeReview.showDetail")}
+            </CollapsibleTrigger>
+            <CollapsibleContent data-slot="change-review-hunk-check-detail">
+              <p className="ps-5 pt-1 text-caption text-muted-foreground break-words">{detail}</p>
+            </CollapsibleContent>
+          </Collapsible>
+        ) : (
+          <p
+            data-slot="change-review-hunk-check-detail"
+            className="ps-5 text-caption text-muted-foreground break-words"
+          >
+            {detail}
+          </p>
+        ))}
+    </div>
+  );
+}
+
+/** The full checks section for one hunk — grouped by phase when applicable. */
+function ChangeReviewChecks({ checks }: { checks: CheckResult[] }) {
+  const { t } = useLocale();
+  const groups = groupChecksByPhase(checks);
+  const showPhaseLabels = groups.some((g) => g.phase !== undefined);
+
+  return (
+    <div
+      data-slot="change-review-hunk-checks"
+      className="flex flex-col gap-2 border-t border-border pt-3"
+    >
+      {groups.map((group, index) => (
+        <div
+          key={group.phase ?? `_${index}`}
+          data-slot="change-review-hunk-checks-phase"
+          className="flex flex-col gap-1.5"
+        >
+          {showPhaseLabels && group.phase && (
+            <span className="text-meta font-medium text-muted-foreground">
+              {t(CHECK_PHASE_LABEL_KEYS[group.phase])}
+            </span>
+          )}
+          <div className="flex flex-col gap-1.5">
+            {group.items.map((check, itemIndex) => (
+              <ChangeCheckRow key={`${check.label}-${itemIndex}`} check={check} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export interface ChangeReviewHunkProps
   extends
     Omit<HTMLAttributes<HTMLLIElement>, "children">,
@@ -454,17 +637,20 @@ export interface ChangeReviewHunkProps
  * Approval state is signalled with TWO non-color cues:
  * - icon: Check (approved) vs plain toggle (pending)
  * - label: "Approved" badge vs "Approve" button text
- * This ensures the state is clear in all three themes including the low-chroma
+ * This ensures the state is clear in every theme including the low-chroma
  * monochrome surfaces (colorblind-safe).
  */
 export const ChangeReviewHunk = forwardRef<HTMLLIElement, ChangeReviewHunkProps>(
   function ChangeReviewHunk({ hunk, renderHunk, className, ...props }, ref) {
+    const { t } = useLocale();
     const { state, actions } = useChangeReview();
-    const { id, title, before, after, status = "modified", provenance } = hunk;
+    const { id, title, before, after, status = "modified", provenance, checks } = hunk;
     const approved = state.approved.has(id);
 
-    const statusLabel = HUNK_STATUS_LABELS[status];
-    const toggleLabel = approved ? `Reject hunk: ${title ?? id}` : `Approve hunk: ${title ?? id}`;
+    const statusLabel = t(HUNK_STATUS_LABEL_KEYS[status]);
+    const toggleLabel = t(approved ? "ui.changeReview.rejectHunk" : "ui.changeReview.approveHunk", {
+      title: title ?? id,
+    });
 
     // Quiet, no-fill diff: before = struck muted text with a "−" marker, after =
     // foreground text with a "+" marker — separated by space, NOT colored
@@ -482,7 +668,7 @@ export const ChangeReviewHunk = forwardRef<HTMLLIElement, ChangeReviewHunkProps>
                 >
                   −
                 </span>
-                <span className="sr-only">Before: </span>
+                <span className="sr-only">{t("ui.changeReview.beforePrefix")}</span>
                 <div className="min-w-0 break-words text-muted-foreground line-through decoration-muted-foreground/30">
                   {before}
                 </div>
@@ -493,7 +679,7 @@ export const ChangeReviewHunk = forwardRef<HTMLLIElement, ChangeReviewHunkProps>
                 <span aria-hidden="true" className="shrink-0 select-none font-mono text-foreground">
                   +
                 </span>
-                <span className="sr-only">After: </span>
+                <span className="sr-only">{t("ui.changeReview.afterPrefix")}</span>
                 <div className="min-w-0 break-words text-foreground">{after}</div>
               </div>
             )}
@@ -513,7 +699,8 @@ export const ChangeReviewHunk = forwardRef<HTMLLIElement, ChangeReviewHunkProps>
           <div className="flex items-center gap-2 min-w-0">
             {/* Status indicator: NON-color cue via symbol + color together */}
             <span
-              aria-label={`Change type: ${statusLabel}`}
+              role="img"
+              aria-label={t("ui.changeReview.changeType", { status: statusLabel })}
               className="shrink-0 inline-flex items-center justify-center size-5"
             >
               {HUNK_STATUS_ICONS[status]}
@@ -554,13 +741,16 @@ export const ChangeReviewHunk = forwardRef<HTMLLIElement, ChangeReviewHunkProps>
           <div className="flex items-center gap-1.5">
             <Badge variant="success" className="animate-in fade-in-0 duration-fast ease-entrance">
               <Check aria-hidden="true" className="size-3" />
-              Approved
+              {t("ui.changeReview.approvedBadge")}
             </Badge>
           </div>
         )}
 
         {/* Content area: before / after or custom renderHunk */}
         {defaultContent && <div>{defaultContent}</div>}
+
+        {/* Verification evidence — informational only, never blocks approval */}
+        {checks && checks.length > 0 && <ChangeReviewChecks checks={checks} />}
       </li>
     );
   },

package/src/components/checkbox/checkbox.tsx

@@ -10,9 +10,10 @@ export const Checkbox = forwardRef<
   return (
     <CheckboxPrimitive.Root
       ref={ref}
+      data-slot="checkbox"
       className={cn(
         "peer size-4 shrink-0 rounded-sm border border-input 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
         className,

package/src/components/collapsible-panel/use-collapsible-panel.ts

@@ -25,9 +25,6 @@
  * state-keyed defaults for a generic panel. Sidebar passes its
  * `--sidebar-width` + `group-data-[collapsible=offcanvas]` literals and gets
  * back its exact original fragments (the byte-identical re-point).
- *
- * Fork-prevention: a second gap-spacer + fixed-slide width tween outside this
- * folder fails `pnpm collapse-fork:check` (scripts/check-collapse-fork.mjs).
  */
 import { useCallback, useMemo, useState } from "react";
 import { cn } from "../../lib/cn";