@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/components/command-trigger/command-trigger.tsx

@@ -0,0 +1,70 @@
+import { forwardRef, type ComponentProps } from "react";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Kbd } from "../kbd";
+
+export interface CommandTriggerProps extends ComponentProps<"button"> {
+  /** The visible and announced label. Defaults to "Search". */
+  label?: string;
+  /** The shortcut hint. Defaults to the platform-correct ⌘ K / Ctrl K. */
+  shortcut?: string;
+}
+
+function platformShortcut(): string {
+  if (typeof navigator === "undefined") return "Ctrl K";
+  // `userAgentData.platform` where available, else the legacy string. Both are
+  // hints, not guarantees — the trigger is a hint too, so a wrong guess is cosmetic.
+  const platform =
+    (navigator as { userAgentData?: { platform?: string } }).userAgentData?.platform ??
+    navigator.platform ??
+    "";
+  return /mac|iphone|ipad/i.test(platform) ? "⌘ K" : "Ctrl K";
+}
+
+/**
+ * The command-palette opener, shaped like a search field: label left, shortcut
+ * pinned right, collapsing to the icon alone under `sm`.
+ *
+ * The button’s accessible name comes entirely from `aria-label` — that is what
+ * stops the `Kbd`’s shortcut glyph from concatenating into it (#117); a
+ * non-empty `aria-label` short-circuits accessible-name computation before the
+ * DOM is ever consulted. The visible label and the `Kbd` are ALSO marked
+ * `aria-hidden`, per `accessibility.md`, as defence in depth: if `aria-label`
+ * is ever dropped, that turns a silent regression into a loud one — an empty
+ * accessible name rather than a plausible wrong one. They do not do the work
+ * themselves.
+ *
+ * `shortcut` reads `navigator` at render time when omitted, which can differ
+ * between server and client — a consumer that server-renders this component
+ * should pass `shortcut` explicitly to avoid a hydration mismatch.
+ */
+export const CommandTrigger = forwardRef<HTMLButtonElement, CommandTriggerProps>(
+  function CommandTrigger({ label = "Search", shortcut, className, ...props }, ref) {
+    const hint = shortcut ?? platformShortcut();
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="command-trigger"
+        aria-label={label}
+        className={cn(
+          "inline-flex h-8 items-center gap-2 rounded-md border border-input bg-background px-2 text-body text-muted-foreground",
+          "hover:bg-accent hover:text-accent-foreground focus-ring",
+          "sm:w-56 sm:justify-between sm:ps-2 sm:pe-1.5",
+          className,
+        )}
+        {...props}
+      >
+        <span className="flex min-w-0 items-center gap-2">
+          <Search aria-hidden="true" className="size-4 shrink-0" />
+          <span aria-hidden="true" className="hidden truncate sm:inline">
+            {label}
+          </span>
+        </span>
+        <Kbd aria-hidden="true" className="hidden sm:inline-flex">
+          {hint}
+        </Kbd>
+      </button>
+    );
+  },
+);

package/src/components/command-trigger/index.ts

@@ -0,0 +1 @@
+export * from "./command-trigger";

package/src/components/context-menu/context-menu.tsx

@@ -21,8 +21,9 @@ export const ContextMenuSubTrigger = forwardRef<
   return (
     <ContextMenuPrimitive.SubTrigger
       ref={ref}
+      data-slot="context-menu-sub-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
         inset && "ps-8",
         className,
       )}
@@ -41,6 +42,7 @@ export const ContextMenuSubContent = forwardRef<
   return (
     <ContextMenuPrimitive.SubContent
       ref={ref}
+      data-slot="context-menu-sub-content"
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md 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,
@@ -58,8 +60,9 @@ export const ContextMenuContent = forwardRef<
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         ref={ref}
+        data-slot="context-menu-content"
         className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md 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",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md 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,
         )}
         {...props}
@@ -75,8 +78,9 @@ export const ContextMenuItem = forwardRef<
   return (
     <ContextMenuPrimitive.Item
       ref={ref}
+      data-slot="context-menu-item"
       className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4",
         inset && "ps-8",
         className,
       )}
@@ -92,9 +96,10 @@ export const ContextMenuCheckboxItem = forwardRef<
   return (
     <ContextMenuPrimitive.CheckboxItem
       ref={ref}
+      data-slot="context-menu-checkbox-item"
       checked={checked}
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
         className,
       )}
       {...props}
@@ -116,8 +121,9 @@ export const ContextMenuRadioItem = forwardRef<
   return (
     <ContextMenuPrimitive.RadioItem
       ref={ref}
+      data-slot="context-menu-radio-item"
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
         className,
       )}
       {...props}
@@ -139,8 +145,9 @@ export const ContextMenuLabel = forwardRef<
   return (
     <ContextMenuPrimitive.Label
       ref={ref}
+      data-slot="context-menu-label"
       className={cn(
-        "px-2 py-1.5 text-xs font-semibold text-muted-foreground",
+        "px-2 py-1.5 text-meta font-semibold text-muted-foreground",
         inset && "ps-8",
         className,
       )}
@@ -156,6 +163,7 @@ export const ContextMenuSeparator = forwardRef<
   return (
     <ContextMenuPrimitive.Separator
       ref={ref}
+      data-slot="context-menu-separator"
       className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
@@ -165,7 +173,8 @@ export const ContextMenuSeparator = forwardRef<
 export function ContextMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)}
+      data-slot="context-menu-shortcut"
+      className={cn("ms-auto text-meta tracking-widest text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/context-rail/context-rail.stories.tsx

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FileText, History, MessageSquare } from "lucide-react";
+import { expect, screen, waitFor } from "storybook/test";
+
+import { ContextRail, type ContextRailSection } from "./context-rail";
+
+const meta = {
+  title: "Layout/ContextRail",
+  component: ContextRail,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A right-hand rail whose collapsed state is a 48px icon strip that doubles as its own section switcher — click a switcher entry to make it active, click the ACTIVE entry again to collapse/expand. Below `overlayBreakpoint` (default 768) it renders the strip plus a `Sheet` overlay for the expanded body instead of a fixed-width panel. See `docs/ADR/0035-context-rail-and-side-dock.md`.",
+      },
+    },
+  },
+} satisfies Meta<typeof ContextRail>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sections: ContextRailSection[] = [
+  {
+    id: "sources",
+    label: "Sources",
+    icon: <FileText />,
+    count: 4,
+    content: (
+      <ul className="flex flex-col gap-2 text-body">
+        <li className="rounded-md border border-border p-2">quarterly-report.pdf — p.12</li>
+        <li className="rounded-md border border-border p-2">design-notes.md — §3</li>
+        <li className="rounded-md border border-border p-2">onboarding-flow.fig</li>
+        <li className="rounded-md border border-border p-2">support-thread-4821</li>
+      </ul>
+    ),
+  },
+  {
+    id: "comments",
+    label: "Comments",
+    icon: <MessageSquare />,
+    count: 2,
+    content: (
+      <ul className="flex flex-col gap-2 text-body">
+        <li className="rounded-md border border-border p-2">
+          &ldquo;Can we tighten this copy?&rdquo; — Priya
+        </li>
+        <li className="rounded-md border border-border p-2">
+          &ldquo;Looks good, shipping.&rdquo; — Sam
+        </li>
+      </ul>
+    ),
+  },
+  {
+    id: "activity",
+    label: "Activity",
+    icon: <History />,
+    content: (
+      <ul className="flex flex-col gap-2 text-body text-muted-foreground">
+        <li>Created 2 hours ago</li>
+        <li>Edited by Priya, 40 minutes ago</li>
+        <li>Reviewed by Sam, 5 minutes ago</li>
+      </ul>
+    ),
+  },
+];
+
+/** Expanded (`open`, default), three believable sections, the first active. */
+export const Default: Story = {
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail sections={sections} defaultActiveSectionId="sources" />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("button", { name: "Sources 4 items" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Comments 2 items" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Activity" })).toBeInTheDocument();
+    await expect(canvas.getByText("Sources")).toBeInTheDocument();
+  },
+};
+
+/** `defaultOpen={false}` — the collapsed 48px icon strip, still fully operable as a switcher (uncontrolled, so the click-to-expand in the play function actually moves state). */
+export const Collapsed: Story = {
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail sections={sections} defaultActiveSectionId="sources" defaultOpen={false} />
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const sourcesEntry = await canvas.findByRole("button", { name: "Sources 4 items" });
+    await expect(sourcesEntry).toBeInTheDocument();
+    // Content stays mounted while collapsed (only the ACTIVE section's
+    // content is ever mounted at all — collapsing hides it visually via
+    // CSS, it doesn't unmount it) — so assert visibility, not presence.
+    await expect(canvas.getByText("quarterly-report.pdf — p.12")).not.toBeVisible();
+
+    // Clicking the ACTIVE entry while collapsed expands the rail again.
+    await userEvent.click(sourcesEntry);
+    await expect(canvas.getByText("quarterly-report.pdf — p.12")).toBeVisible();
+  },
+};
+
+/** No sections — the default localized empty state. */
+export const Empty: Story = {
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail sections={[]} />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    await expect(await canvas.findByText("No sections")).toBeInTheDocument();
+  },
+};
+
+/**
+ * Below `overlayBreakpoint` the rail mounts its own strip plus a `Sheet`
+ * instead of `Sidebar`. A viewport-size story parameter cannot force this
+ * branch under a headless run (the composed story's `window.innerWidth`
+ * doesn't track the addon's viewport there), so this story forces it
+ * deterministically with a very high `overlayBreakpoint` instead — reliable
+ * both interactively and under `vitest --project storybook`.
+ *
+ * Known constraint (task-11f-brief.md Finding 5): this story's own fixed
+ * `h-[560px]` host is shorter than the browser viewport, so the expanded
+ * body's `Sheet` (always viewport-height) visibly outruns the persistent
+ * strip below it — see the seam this reproduces in `ContextRail`'s own doc
+ * comment.
+ */
+export const Narrow: Story = {
+  // The sheet's real entrance/exit transition is load-bearing here: the
+  // occlusion hit-test is taken against the SETTLED panel, and the final
+  // assertion reads the panel's `data-state="closed"` while its exit animation
+  // is still running (Radix unmounts only afterwards). The suite otherwise runs
+  // under `prefers-reduced-motion: reduce` (`apps/docs/vitest.config.ts`, #125),
+  // which removes that exit window entirely — so this story opts back into full
+  // motion rather than the lock being rewritten around a missing animation.
+  globals: { motionPref: "full" },
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail sections={sections} defaultActiveSectionId="sources" overlayBreakpoint={2000} />
+    </div>
+  ),
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await expect(canvas.getByRole("button", { name: "Sources 4 items" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Comments 2 items" })).toBeInTheDocument();
+    await expect(canvasElement.querySelector('[data-slot="sidebar"]')).toBeNull();
+    await expect(canvasElement.querySelector('[data-slot="context-rail"]')).not.toBeNull();
+
+    // `ContextRail` has no `open`/`defaultOpen` here, so `SidebarProvider`'s
+    // own default (`true`) drives the Sheet `ContextRailNarrow` wires to that
+    // same `open` state — the panel renders OPEN at the same time as the
+    // persistent 48px strip, which is exactly the configuration the
+    // panel-occludes-the-strip regression (fix round 1, task-9b-fix-1.md)
+    // needs to reproduce. `userEvent.click` only checks `pointer-events:
+    // none` — it does NOT hit-test — so an occluded-but-visible button would
+    // still report a passing click. Assert the browser's REAL hit-test
+    // (`document.elementFromPoint`) instead, for an INACTIVE entry and for
+    // the ACTIVE/toggle entry — the reviewer's raw-coordinate repro landed
+    // on the sheet's own close button from exactly the active entry's
+    // position, so both are asserted, not just the easy one.
+    async function assertHitTestable(name: string) {
+      const button = canvas.getByRole("button", { name });
+      // The sheet's own entrance/exit transition (`duration-slow`, 380ms —
+      // `themes.css`) animates the panel in via `slide-in-from-right`. The
+      // panel is `position: fixed`, so mid-transition it sits translated by
+      // roughly its own width — a hit-test taken the instant after the click
+      // that opened it would see that IN-FLIGHT position (measured: right
+      // edge past the viewport, not its resting inset-by-the-strip-width
+      // position) and fail for a reason that has nothing to do with the
+      // Blocker this lock exists to catch. Wait for the REAL, settled
+      // hit-test to succeed instead of sleeping a fixed amount — this reads
+      // as fast as the animation actually is, and still fails for real
+      // (after timing out) if the panel keeps covering the strip once
+      // settled, which is the only case task-9b-fix-1.md's regression is.
+      await waitFor(
+        () => {
+          const rect = button.getBoundingClientRect();
+          if (rect.width === 0) {
+            throw new Error(`"${name}" has not been laid out yet (zero width)`);
+          }
+          const x = rect.left + rect.width / 2;
+          const y = rect.top + rect.height / 2;
+          const hit = document.elementFromPoint(x, y);
+          const hitDescription =
+            hit == null
+              ? "nothing"
+              : `<${hit.tagName.toLowerCase()}${
+                  hit.getAttribute("data-slot")
+                    ? ` data-slot="${hit.getAttribute("data-slot")}"`
+                    : ""
+                }>`;
+          expect(
+            hit != null && button.contains(hit),
+            `expected the centre of "${name}" (${x}, ${y}) to hit-test to that button, but it ` +
+              `hit ${hitDescription} instead — the sheet panel is likely covering the strip`,
+          ).toBe(true);
+        },
+        { timeout: 1000 },
+      );
+      return button;
+    }
+
+    // The switched-to section's content renders inside `SheetContent`, which
+    // Radix portals to `document.body` — a real DOM sibling of
+    // `canvasElement`, not a descendant of it — so it must be queried via
+    // `screen` (bound to `document.body`), not `canvas` (scoped to
+    // `canvasElement`).
+
+    // Inactive entry: clicking it changes the active section.
+    const commentsEntry = await assertHitTestable("Comments 2 items");
+    await userEvent.click(commentsEntry);
+    await expect(screen.getByText("“Looks good, shipping.” — Sam")).toBeVisible();
+
+    // Active/toggle entry: clicking it collapses the rail (closes the Sheet)
+    // rather than changing the section. Radix flips the panel's own
+    // `data-state` synchronously with the click (the exit ANIMATION, and the
+    // eventual unmount, follow after) — asserting that attribute is the
+    // immediate, non-flaky signal that the toggle actually fired, rather
+    // than racing the animation to observe visibility.
+    const commentsToggleEntry = await assertHitTestable("Comments 2 items");
+    await userEvent.click(commentsToggleEntry);
+    await expect(screen.getByRole("dialog", { hidden: true })).toHaveAttribute(
+      "data-state",
+      "closed",
+    );
+  },
+};
+
+/**
+ * Eight sections in the default 20rem rail — the count at which the header's
+ * two occupants genuinely compete for the band. `sections` is caller-supplied
+ * and unbounded, and the switcher is a fixed-height row of 32px buttons, so
+ * left uncapped it reserves its full width before the heading gets any: the
+ * active section's label was measured down to roughly 20px of usable width
+ * (its own padding included), which is no label at all. The cap keeps the
+ * heading's half of the band and moves the overflow into the switcher, which
+ * scrolls.
+ */
+export const ManySections: Story = {
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail
+        sections={[
+          ...sections,
+          { id: "files", label: "Files", icon: <FileText />, content: <p>Files</p> },
+          { id: "notes", label: "Notes", icon: <MessageSquare />, content: <p>Notes</p> },
+          { id: "audit", label: "Audit", icon: <History />, content: <p>Audit</p> },
+          { id: "links", label: "Links", icon: <FileText />, content: <p>Links</p> },
+          { id: "tasks", label: "Tasks", icon: <MessageSquare />, content: <p>Tasks</p> },
+        ]}
+        defaultActiveSectionId="sources"
+      />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const header = canvasElement.querySelector<HTMLElement>('[data-slot="context-rail-header"]');
+    const heading = canvasElement.querySelector<HTMLElement>('[data-slot="context-rail-heading"]');
+    const switcher = canvasElement.querySelector<HTMLElement>(
+      '[data-slot="context-rail-switcher"]',
+    );
+    await expect(header).not.toBeNull();
+    await expect(heading).not.toBeNull();
+    await expect(switcher).not.toBeNull();
+
+    const headerWidth = header!.getBoundingClientRect().width;
+    const switcherWidth = switcher!.getBoundingClientRect().width;
+    const headingWidth = heading!.getBoundingClientRect().width;
+
+    // The switcher never takes more than half the band…
+    await expect(switcherWidth).toBeLessThanOrEqual(headerWidth / 2 + 0.5);
+    // …so the heading keeps a width a label can actually render in. The
+    // regression this locks measured ~20px here.
+    await expect(headingWidth).toBeGreaterThan(80);
+    // And the header itself never outgrows the rail (the overflow lives
+    // inside the switcher, which scrolls).
+    await expect(switcher!.scrollWidth).toBeGreaterThan(switcher!.clientWidth);
+  },
+};