@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-O3JWMB6O.js

@@ -0,0 +1,20 @@
+"use client";
+
+// src/lib/optional-peer.ts
+var MODULE_NOT_FOUND_PATTERN = /cannot find module|failed to resolve|dynamically imported module|module not found/i;
+function isModuleNotFoundMessage(message) {
+  return MODULE_NOT_FOUND_PATTERN.test(message);
+}
+function isOptionalPeerMissing(value) {
+  if (!(value instanceof Error)) return false;
+  if ("code" in value && value.code === "ERR_MODULE_NOT_FOUND") {
+    return true;
+  }
+  return isModuleNotFoundMessage(value.message);
+}
+
+export {
+  isModuleNotFoundMessage,
+  isOptionalPeerMissing
+};
+//# sourceMappingURL=chunk-O3JWMB6O.js.map

package/dist/chunk-O3JWMB6O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/optional-peer.ts"],"sourcesContent":["/**\n * Detect a dynamic `import()` of an OPTIONAL peer that is not installed\n * (issue #33 — mermaid / xterm / Rive / media-chrome are optional peers of\n * `@elabs-ai/components-ai`, reached only through its lazy boundaries:\n * `_lazy-mermaid.ts`, `_interactive-terminal-xterm.ts`, `_persona-rive.tsx` and\n * `_audio-player-media-chrome.tsx`).\n *\n * Bundlers and runtimes report this differently (`ERR_MODULE_NOT_FOUND`,\n * `Cannot find module`, `Failed to resolve module specifier`, Vite/browser's\n * `Failed to fetch dynamically imported module`), so match on the SHAPES\n * rather than one runtime's wording. A false positive here is cheap — the\n * developer is told to install a package instead of seeing a raw\n * module-resolution stack trace — and a false negative is the failure mode\n * this exists to avoid.\n *\n * **Canonical home (promoted here per\n * `docs/decisions/2026-09-01-brainless-adoption-architecture.md` § 2).** `ui` is\n * upstream of every layer-2 package (`ai`, `terminal`, …) in the one-way\n * package graph (`tokens` → `ui`/`icons` →\n * `data`/`ai`/`flow`/`maps`/`charts`/`marketing`/`editor`/`viewer`), so this is\n * an ordinary downward import for all of them — unlike the sibling-to-sibling\n * case (e.g. `ai` ↔ `viewer`), which the graph forbids and which is why a\n * safety-critical predicate like this one must never be copy-pasted sideways\n * again. `packages/ai/src/_optional-peer.ts` still exists as a private,\n * underived-prefixed module for one merge window (issue #116 deletes it and\n * rewires its three importers onto this one); nothing imports this copy yet.\n *\n * It does NOT mirror `@elabs-ai/components-viewer`'s PRIMARY mechanism: the\n * viewer's adapters throw a typed `ViewerError` carrying `code`/`packages`\n * fields, and only fall back to string-matching for an error that didn't\n * originate as one. This module has no typed-error primary path — every lazy\n * boundary that uses it classifies purely by matching the caught error's\n * message shape. That difference is why a shape mismatch (a resolved module\n * with the wrong exports, rather than a rejected import) can slip past this\n * detector silently instead of being caught by construction — see\n * `_lazy-mermaid.ts`'s `loadEngine()` guard, added for exactly that gap\n * (issue #33 review).\n */\nconst MODULE_NOT_FOUND_PATTERN =\n  /cannot find module|failed to resolve|dynamically imported module|module not found/i;\n\n/** True when a raw error MESSAGE names a module the runtime could not load. */\nexport function isModuleNotFoundMessage(message: string): boolean {\n  return MODULE_NOT_FOUND_PATTERN.test(message);\n}\n\n/**\n * True when `value` is (or looks like) a failed dynamic `import()` of a\n * missing optional peer. Accepts anything a `.catch()` or an error boundary\n * might see: an `Error` instance (checked by `code` first, then message), or\n * `undefined`/other for anything that clearly is not one.\n */\nexport function isOptionalPeerMissing(value: unknown): boolean {\n  if (!(value instanceof Error)) return false;\n  if (\"code\" in value && (value as { code?: unknown }).code === \"ERR_MODULE_NOT_FOUND\") {\n    return true;\n  }\n  return isModuleNotFoundMessage(value.message);\n}\n"],"mappings":";;;AAsCA,IAAM,2BACJ;AAGK,SAAS,wBAAwB,SAA0B;AAChE,SAAO,yBAAyB,KAAK,OAAO;AAC9C;AAQO,SAAS,sBAAsB,OAAyB;AAC7D,MAAI,EAAE,iBAAiB,OAAQ,QAAO;AACtC,MAAI,UAAU,SAAU,MAA6B,SAAS,wBAAwB;AACpF,WAAO;AAAA,EACT;AACA,SAAO,wBAAwB,MAAM,OAAO;AAC9C;","names":[]}

package/dist/chunk-O6V65J5J.js

@@ -0,0 +1,81 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/slider/slider.tsx
+import { forwardRef } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PROTECTED_THUMB_KEYS = [
+  "role",
+  "aria-valuenow",
+  "aria-valuemin",
+  "aria-valuemax",
+  "aria-orientation",
+  "tabIndex"
+];
+function withoutProtectedKeys(thumbProps) {
+  if (!thumbProps) return thumbProps;
+  let safe = thumbProps;
+  for (const key of PROTECTED_THUMB_KEYS) {
+    if (!(key in safe)) continue;
+    const { [key]: _dropped, ...rest } = safe;
+    safe = rest;
+  }
+  return safe;
+}
+function getThumbPropsAt(thumbProps, index) {
+  if (!thumbProps) return void 0;
+  return Array.isArray(thumbProps) ? thumbProps[index] : thumbProps;
+}
+var Slider = forwardRef(
+  function Slider2({
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-valuetext": ariaValueText,
+    thumbProps,
+    value,
+    defaultValue,
+    ...props
+  }, ref) {
+    const values = value ?? defaultValue;
+    const thumbCount = Array.isArray(values) ? values.length : 1;
+    return /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        ref,
+        className: cn("relative flex w-full touch-none select-none items-center", className),
+        value,
+        defaultValue,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+          Array.from({ length: thumbCount }, (_, index) => {
+            const safeThumbProps = withoutProtectedKeys(getThumbPropsAt(thumbProps, index));
+            return /* @__PURE__ */ jsx(
+              SliderPrimitive.Thumb,
+              {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledby,
+                "aria-valuetext": ariaValueText,
+                ...safeThumbProps,
+                className: cn(
+                  "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50",
+                  safeThumbProps?.className
+                )
+              },
+              index
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  Slider
+};
+//# sourceMappingURL=chunk-O6V65J5J.js.map

package/dist/chunk-O6V65J5J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/slider/slider.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport { cn } from \"../../lib/cn\";\n\n/** Props for a single `SliderPrimitive.Thumb` — see `SliderProps[\"thumbProps\"]`. */\nexport type SliderThumbProps = ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb>;\n\nexport type SliderProps = ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {\n  /**\n   * Announced instead of the raw numeric value (e.g. `\"step 3 of 12\"` for a\n   * replay scrubber). Forwarded to the thumb alongside `aria-label`/\n   * `aria-labelledby` — see the doc comment below for why it has to land\n   * there, not on the root.\n   */\n  \"aria-valuetext\"?: string;\n  /**\n   * Escape hatch spread onto the thumb LAST — for `data-*`/`style`/etc, or to\n   * deliberately override `aria-label`/`aria-labelledby`/`aria-valuetext`\n   * (an explicit key here always wins over the matching top-level prop).\n   *\n   * The six keys that MAKE the element a slider are ignored on purpose:\n   * `role`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`,\n   * `aria-orientation` and `tabIndex`. Radix derives every one of them from\n   * the slider's live state and spreads consumer props AFTER its own, so\n   * passing them here would silently destroy the widget (a wrong\n   * `aria-valuenow` mis-announces the value; `role`/`tabIndex` make it\n   * unreachable). Change the VALUE (`value`/`min`/`max`/`orientation`/\n   * `disabled`) on `Slider` instead; use `aria-valuetext` to change how the\n   * value is spoken.\n   *\n   * Radix renders one thumb per element of `value`/`defaultValue` — pass a\n   * single object to apply the same props to every thumb (the historical\n   * single-thumb shape, unchanged), or an ARRAY to give each thumb its own\n   * props, indexed positionally against `value`/`defaultValue` (#398). A\n   * missing array slot falls back to no per-thumb override for that thumb.\n   */\n  thumbProps?: SliderThumbProps | SliderThumbProps[];\n};\n\n/**\n * Attributes Radix computes for the thumb and then lets consumer props\n * overwrite (`SliderThumbImpl` spreads them before `...thumbProps`). Dropping\n * them here is what keeps the escape hatch from being a foot-gun.\n */\nconst PROTECTED_THUMB_KEYS = [\n  \"role\",\n  \"aria-valuenow\",\n  \"aria-valuemin\",\n  \"aria-valuemax\",\n  \"aria-orientation\",\n  \"tabIndex\",\n] as const;\n\nfunction withoutProtectedKeys(\n  thumbProps: SliderThumbProps | undefined,\n): SliderThumbProps | undefined {\n  if (!thumbProps) return thumbProps;\n  let safe = thumbProps;\n  for (const key of PROTECTED_THUMB_KEYS) {\n    if (!(key in safe)) continue;\n    const { [key]: _dropped, ...rest } = safe;\n    safe = rest;\n  }\n  return safe;\n}\n\n/** `thumbProps` for the thumb at `index` — the shared object for every thumb, or that array slot. */\nfunction getThumbPropsAt(\n  thumbProps: SliderProps[\"thumbProps\"],\n  index: number,\n): SliderThumbProps | undefined {\n  if (!thumbProps) return undefined;\n  return Array.isArray(thumbProps) ? thumbProps[index] : thumbProps;\n}\n\n/**\n * Range input — a single-thumb value by default, or a multi-thumb range\n * slider when `value`/`defaultValue` is an array with more than one element\n * (Radix's own range-slider shape; #398). One `Thumb` is rendered per value.\n *\n * `aria-label` / `aria-labelledby` / `aria-valuetext` are routed to the\n * THUMB(S), not the root: Radix puts `role=\"slider\"` on the thumb, so a name\n * (or value text) on the root would never reach the widget. Pass `aria-label`\n * (or `aria-labelledby`, for a visible `<Label>`) — an unnamed slider is an\n * accessibility failure. For a range slider, pass an ARRAY to `thumbProps` so\n * each thumb gets its own name/valuetext (e.g. \"Minimum price\"/\"Maximum\n * price\") — the top-level `aria-label`/`aria-valuetext` apply identically to\n * every thumb, which is rarely what a multi-thumb slider wants.\n */\nexport const Slider = forwardRef<ElementRef<typeof SliderPrimitive.Root>, SliderProps>(\n  function Slider(\n    {\n      className,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      \"aria-valuetext\": ariaValueText,\n      thumbProps,\n      value,\n      defaultValue,\n      ...props\n    },\n    ref,\n  ) {\n    const values = value ?? defaultValue;\n    const thumbCount = Array.isArray(values) ? values.length : 1;\n    return (\n      <SliderPrimitive.Root\n        ref={ref}\n        className={cn(\"relative flex w-full touch-none select-none items-center\", className)}\n        value={value}\n        defaultValue={defaultValue}\n        {...props}\n      >\n        <SliderPrimitive.Track className=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted\">\n          <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n        </SliderPrimitive.Track>\n        {Array.from({ length: thumbCount }, (_, index) => {\n          const safeThumbProps = withoutProtectedKeys(getThumbPropsAt(thumbProps, index));\n          return (\n            <SliderPrimitive.Thumb\n              key={index}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-valuetext={ariaValueText}\n              {...safeThumbProps}\n              className={cn(\n                \"block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50\",\n                safeThumbProps?.className,\n              )}\n            />\n          );\n        })}\n      </SliderPrimitive.Root>\n    );\n  },\n);\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,qBAAqB;AAyG3B,SAQI,KARJ;AA9DN,IAAM,uBAAuB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,qBACP,YAC8B;AAC9B,MAAI,CAAC,WAAY,QAAO;AACxB,MAAI,OAAO;AACX,aAAW,OAAO,sBAAsB;AACtC,QAAI,EAAE,OAAO,MAAO;AACpB,UAAM,EAAE,CAAC,GAAG,GAAG,UAAU,GAAG,KAAK,IAAI;AACrC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAGA,SAAS,gBACP,YACA,OAC8B;AAC9B,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,MAAM,QAAQ,UAAU,IAAI,WAAW,KAAK,IAAI;AACzD;AAgBO,IAAM,SAAS;AAAA,EACpB,SAASA,QACP;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,SAAS,SAAS;AACxB,UAAM,aAAa,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS;AAC3D,WACE;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,WAAW,GAAG,4DAA4D,SAAS;AAAA,QACnF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAiB,uBAAhB,EAAsB,WAAU,oEAC/B,8BAAiB,uBAAhB,EAAsB,WAAU,8BAA6B,GAChE;AAAA,UACC,MAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,UAAU;AAChD,kBAAM,iBAAiB,qBAAqB,gBAAgB,YAAY,KAAK,CAAC;AAC9E,mBACE;AAAA,cAAiB;AAAA,cAAhB;AAAA,gBAEC,cAAY;AAAA,gBACZ,mBAAiB;AAAA,gBACjB,kBAAgB;AAAA,gBACf,GAAG;AAAA,gBACJ,WAAW;AAAA,kBACT;AAAA,kBACA,gBAAgB;AAAA,gBAClB;AAAA;AAAA,cARK;AAAA,YASP;AAAA,UAEJ,CAAC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["Slider"]}

package/dist/chunk-OEPN373X.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-OEPN373X.js.map

package/dist/chunk-OEPN373X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-OGTILHKP.js

@@ -0,0 +1,355 @@
+"use client";
+import {
+  mergeRefs
+} from "./chunk-L37QZALU.js";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle
+} from "./chunk-FXC64HLD.js";
+import {
+  useIsMobile
+} from "./chunk-YCFOFNQF.js";
+import {
+  useCollapsiblePanel
+} from "./chunk-JVCIAEFT.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/side-dock/side-dock.tsx
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_WIDTH = 400;
+var DEFAULT_MIN_WIDTH = 320;
+var DEFAULT_MAX_WIDTH = 640;
+var DEFAULT_MIN_CONTENT_WIDTH = 480;
+var DEFAULT_OVERLAY_BREAKPOINT = 1100;
+var KEY_STEP = 16;
+var KEY_STEP_SHIFT_MULTIPLIER = 4;
+var FALLBACK_VIEWPORT_WIDTH = 1024;
+function clampWidth(requested, viewportWidth, minWidth, maxWidth, minContentWidth) {
+  const upperBound = Math.min(maxWidth, viewportWidth - minContentWidth);
+  return Math.max(minWidth, Math.min(requested, upperBound));
+}
+var SideDock = forwardRef(function SideDock2({
+  title,
+  description,
+  headerActions,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  side = "right",
+  containerPosition = "viewport",
+  width,
+  defaultWidth = DEFAULT_WIDTH,
+  onWidthChange,
+  onWidthCommit,
+  minWidth = DEFAULT_MIN_WIDTH,
+  maxWidth = DEFAULT_MAX_WIDTH,
+  minContentWidth = DEFAULT_MIN_CONTENT_WIDTH,
+  resizable = true,
+  overlayBreakpoint = DEFAULT_OVERLAY_BREAKPOINT,
+  className,
+  style,
+  children,
+  ...props
+}, ref) {
+  const { t, formatNumber } = useLocale();
+  const titleId = useId();
+  const resizeLabelId = useId();
+  const panel = useCollapsiblePanel({ side, open, defaultOpen, onOpenChange, containerPosition });
+  const isOverlay = useIsMobile(overlayBreakpoint);
+  const containerRef = useRef(null);
+  const mergedContainerRef = useMemo(() => mergeRefs(ref, containerRef), [ref]);
+  const groupRef = useRef(null);
+  const openerRef = useRef(null);
+  const wasOpenRef = useRef(panel.open);
+  useEffect(() => {
+    const wasOpen = wasOpenRef.current;
+    const isOpen = panel.open;
+    wasOpenRef.current = isOpen;
+    if (isOpen && !wasOpen) {
+      openerRef.current = document.activeElement;
+      return;
+    }
+    if (!isOpen && wasOpen) {
+      const container = containerRef.current;
+      const active = document.activeElement;
+      const focusWasInside = container != null && active != null && container.contains(active);
+      if (!focusWasInside) return;
+      const opener = openerRef.current;
+      if (opener instanceof HTMLElement && opener.isConnected && opener !== document.body) {
+        opener.focus();
+      } else {
+        groupRef.current?.focus();
+      }
+    }
+  }, [panel.open]);
+  const [viewportWidth, setViewportWidth] = useState(FALLBACK_VIEWPORT_WIDTH);
+  useEffect(() => {
+    setViewportWidth(window.innerWidth);
+    let rafId = null;
+    const onResize = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        setViewportWidth(window.innerWidth);
+      });
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
+  }, []);
+  const isWidthControlled = width !== void 0;
+  const [uncontrolledWidth, setUncontrolledWidth] = useState(defaultWidth);
+  const requestedWidth = isWidthControlled ? width : uncontrolledWidth;
+  const upperBound = Math.min(maxWidth, viewportWidth - minContentWidth);
+  const clampedWidth = clampWidth(
+    requestedWidth,
+    viewportWidth,
+    minWidth,
+    maxWidth,
+    minContentWidth
+  );
+  const latestWidthRef = useRef(clampedWidth);
+  latestWidthRef.current = clampedWidth;
+  useEffect(() => {
+    if (!isWidthControlled) return;
+    if (clampedWidth === width) return;
+    onWidthChange?.(clampedWidth);
+    onWidthCommit?.(clampedWidth);
+  }, [isWidthControlled, clampedWidth, width]);
+  function requestWidth(next) {
+    if (next === latestWidthRef.current) return false;
+    latestWidthRef.current = next;
+    if (!isWidthControlled) setUncontrolledWidth(next);
+    onWidthChange?.(next);
+    return true;
+  }
+  const gestureChangedRef = useRef(false);
+  function handleResizeKeyDown(event) {
+    const widenKey = side === "right" ? "ArrowLeft" : "ArrowRight";
+    const narrowKey = side === "right" ? "ArrowRight" : "ArrowLeft";
+    const step = event.shiftKey ? KEY_STEP * KEY_STEP_SHIFT_MULTIPLIER : KEY_STEP;
+    let requested;
+    if (event.key === widenKey) requested = latestWidthRef.current + step;
+    else if (event.key === narrowKey) requested = latestWidthRef.current - step;
+    else if (event.key === "Home") requested = minWidth;
+    else if (event.key === "End") requested = upperBound;
+    else return;
+    event.preventDefault();
+    const next = clampWidth(requested, viewportWidth, minWidth, maxWidth, minContentWidth);
+    if (requestWidth(next)) gestureChangedRef.current = true;
+  }
+  function handleResizeKeyUp() {
+    if (gestureChangedRef.current) onWidthCommit?.(latestWidthRef.current);
+    gestureChangedRef.current = false;
+  }
+  const pointerStartRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  function handleResizePointerDown(event) {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    gestureChangedRef.current = false;
+    pointerStartRef.current = { x: event.clientX, width: latestWidthRef.current };
+    setIsDragging(true);
+  }
+  function handleResizePointerMove(event) {
+    const start = pointerStartRef.current;
+    if (!start) return;
+    const delta = event.clientX - start.x;
+    const signedDelta = side === "right" ? -delta : delta;
+    const next = clampWidth(
+      start.width + signedDelta,
+      viewportWidth,
+      minWidth,
+      maxWidth,
+      minContentWidth
+    );
+    if (requestWidth(next)) gestureChangedRef.current = true;
+  }
+  function endPointerGesture(event) {
+    if (!pointerStartRef.current) return;
+    pointerStartRef.current = null;
+    setIsDragging(false);
+    event.currentTarget.releasePointerCapture?.(event.pointerId);
+    if (gestureChangedRef.current) onWidthCommit?.(latestWidthRef.current);
+    gestureChangedRef.current = false;
+  }
+  const closeLabel = t("close");
+  const resizeValueText = t("ui.sideDock.widthValue", {
+    count: Math.round(clampedWidth),
+    size: formatNumber(Math.round(clampedWidth))
+  });
+  const resizeHandle = resizable && /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-labelledby": `${resizeLabelId} ${titleId}`,
+      "aria-valuenow": Math.round(clampedWidth),
+      "aria-valuemin": minWidth,
+      "aria-valuemax": Math.round(upperBound),
+      "aria-valuetext": resizeValueText,
+      tabIndex: 0,
+      "data-slot": "side-dock-resize-handle",
+      onPointerDown: handleResizePointerDown,
+      onPointerMove: handleResizePointerMove,
+      onPointerUp: endPointerGesture,
+      onPointerCancel: endPointerGesture,
+      onKeyDown: handleResizeKeyDown,
+      onKeyUp: handleResizeKeyUp,
+      className: cn(
+        // A literal px hit box, not a `w-*` spacing utility — `--spacing` is
+        // what `data-density="compact"` rescales (Mechanism §3).
+        "absolute inset-y-0 w-[min(24px,50%)] cursor-col-resize touch-none select-none",
+        side === "right" ? "left-0" : "right-0",
+        "focus-visible:outline-none",
+        isDragging ? cn(
+          "after:absolute after:inset-y-0 after:w-1 after:bg-primary after:content-['']",
+          side === "right" ? "after:left-0" : "after:right-0"
+        ) : cn(
+          "after:absolute after:inset-y-0 after:w-px after:bg-muted-foreground after:content-['']",
+          "hover:after:w-1 focus-visible:after:w-1",
+          side === "right" ? "after:left-0" : "after:right-0"
+        ),
+        "focus-visible:after:focus-ring-static"
+      ),
+      children: /* @__PURE__ */ jsx("span", { id: resizeLabelId, className: "sr-only", children: t("ui.sideDock.resize") })
+    }
+  );
+  if (isOverlay) {
+    return /* @__PURE__ */ jsx(Sheet, { open: panel.open, onOpenChange: panel.setOpen, children: /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        ref,
+        side,
+        "data-slot": "side-dock",
+        className: cn("flex flex-col bg-card p-0", className),
+        style,
+        ...description ? {} : { "aria-describedby": void 0 },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            SheetHeader,
+            {
+              "data-slot": "side-dock-header",
+              className: "h-header flex-row items-center gap-2 space-y-0 border-b border-border px-4",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(SheetTitle, { "data-slot": "side-dock-title", className: "text-title", children: title }) }),
+                headerActions
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: description }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "side-dock-body",
+              tabIndex: 0,
+              className: "min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset",
+              children
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "side-dock",
+      ref: groupRef,
+      tabIndex: -1,
+      className: cn("group", containerPosition === "inset" && "relative"),
+      ...panel.attrs,
+      style: { "--collapsible-panel-width": `${clampedWidth}px` },
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "side-dock-spacer", className: panel.spacerClassName }),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            ref: mergedContainerRef,
+            "data-slot": "side-dock-container",
+            "aria-labelledby": titleId,
+            inert: !panel.open,
+            className: cn(
+              panel.containerClassName,
+              "flex-col bg-card",
+              side === "right" ? "border-l" : "border-r",
+              className
+            ),
+            style,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "side-dock-header",
+                  className: "flex h-header shrink-0 items-center gap-2 border-b border-border px-4",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        id: titleId,
+                        "data-slot": "side-dock-title",
+                        className: "min-w-0 flex-1 truncate text-title",
+                        children: title
+                      }
+                    ),
+                    headerActions,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "data-slot": "side-dock-close",
+                        "aria-label": closeLabel,
+                        onClick: () => panel.setOpen(false),
+                        className: "shrink-0 rounded-sm p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-ring",
+                        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "side-dock-body",
+                  tabIndex: 0,
+                  className: "min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset",
+                  children: [
+                    description && /* @__PURE__ */ jsx("p", { "data-slot": "side-dock-description", className: "mb-4 text-body text-muted-foreground", children: description }),
+                    children
+                  ]
+                }
+              ),
+              resizeHandle
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  SideDock
+};
+//# sourceMappingURL=chunk-OGTILHKP.js.map

package/dist/chunk-OGTILHKP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/side-dock/side-dock.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * SideDock — a *summoned* panel that docks to one edge of the content area:\n * closed by default, opened by something the user does, resizable by\n * pointer AND keyboard, and — below a viewport threshold — presented as an\n * overlay `Sheet` instead of a column. See\n * `docs/ADR/0035-context-rail-and-side-dock.md` §5. `ContextRail` (the\n * sibling in this package) is a *persistent* rail with a 48px icon collapsed\n * state; SideDock is not persistent and has no icon state.\n *\n * Built on the mandatory `useCollapsiblePanel` mechanism (open/close tween)\n * and `useIsMobile(overlayBreakpoint)` (the column/overlay switch) — both\n * shared with `ContextRail`, never re-implemented here.\n */\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentProps,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { mergeRefs } from \"../../lib/merge-refs\";\nimport { useIsMobile } from \"../../lib/use-mobile\";\nimport { useCollapsiblePanel, type CollapsiblePanelContainerPosition } from \"../collapsible-panel\";\nimport { useLocale } from \"../locale-provider/locale-provider\";\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from \"../sheet\";\n\nexport interface SideDockProps extends Omit<ComponentProps<\"aside\">, \"title\"> {\n  /**\n   * The dock's name. Rendered as its header heading, and as the `SheetTitle`\n   * of the overlay presentation. REQUIRED: the overlay cannot be accessible\n   * without it, and an optional prop with a generic default would ship a\n   * meaningless announced name into real apps.\n   */\n  title: ReactNode;\n  /**\n   * Optional longer description. Visible at the top of the body in the column\n   * presentation — never inside the header band, which is fixed at the app\n   * shell's header height; `sr-only` in the overlay presentation (the compact\n   * sheet header has no room for it, but it still reaches assistive tech).\n   */\n  description?: ReactNode;\n  /** Optional controls placed in the header row beside the built-in close button. */\n  headerActions?: ReactNode;\n\n  /** Controlled open state. Closed means zero width (content stays mounted, inert). */\n  open?: boolean;\n  /** Uncontrolled initial open state. Default `false` — a dock is summoned. */\n  defaultOpen?: boolean;\n  /** Called with the next open state. */\n  onOpenChange?: (open: boolean) => void;\n\n  /** Which edge it docks to. Default `\"right\"`. */\n  side?: \"left\" | \"right\";\n\n  /**\n   * Where the column presentation's fixed/absolute container positions\n   * itself. Default `\"viewport\"` (pins to the viewport edge — byte-identical\n   * pre-#432 behavior). `\"inset\"` pins to the dock's OWN position in the\n   * layout instead (`absolute` against a `relative` wrapper this component\n   * provides) — use this when the dock is nested inside another element that\n   * already pins itself to the same viewport edge (e.g. an app `Sidebar`),\n   * so the two never race for the same edge (#432). Has no effect on the\n   * overlay `Sheet` presentation below `overlayBreakpoint`.\n   */\n  containerPosition?: CollapsiblePanelContainerPosition;\n\n  /**\n   * `width`, `defaultWidth`, `minWidth`, `maxWidth`, `minContentWidth` and\n   * `resizable` (below) govern the COLUMN presentation only — viewport at or\n   * above `overlayBreakpoint`. Below that breakpoint the dock renders as an\n   * overlay `Sheet` sized by the viewport (`Sheet`'s own `w-3/4 max-w-sm`),\n   * so none of these props have any effect there.\n   */\n  /** Controlled width in px. */\n  width?: number;\n  /** Uncontrolled initial width in px. Default `400`. */\n  defaultWidth?: number;\n  /** Fires continuously during a resize — drive layout from this. */\n  onWidthChange?: (width: number) => void;\n  /** Fires once when an interaction ends — PERSIST from this. */\n  onWidthCommit?: (width: number) => void;\n\n  /** Lower bound in px. Default `320`. */\n  minWidth?: number;\n  /** Upper bound in px. Default `640`. */\n  maxWidth?: number;\n  /** Content width preserved when clamping against the live viewport, px. Default `480`. */\n  minContentWidth?: number;\n  /** Whether the resize handle renders. Default `true`. */\n  resizable?: boolean;\n\n  /**\n   * Viewport width in px below which the dock renders as an overlay `Sheet`\n   * instead of a column. Default `1100`. Deliberately ABOVE the library's\n   * 768px mobile breakpoint: a 400px dock at 768px leaves ~360px of content.\n   * This is the switch point for the column-only sizing props above — the\n   * overlay presentation ignores them entirely.\n   */\n  overlayBreakpoint?: number;\n}\n\nconst DEFAULT_WIDTH = 400;\nconst DEFAULT_MIN_WIDTH = 320;\nconst DEFAULT_MAX_WIDTH = 640;\nconst DEFAULT_MIN_CONTENT_WIDTH = 480;\nconst DEFAULT_OVERLAY_BREAKPOINT = 1100;\n// A single arrow-key step, and Shift's multiplier on it (Mechanism §3).\nconst KEY_STEP = 16;\nconst KEY_STEP_SHIFT_MULTIPLIER = 4;\n// SSR-only fallback — \"use client\" means this never actually renders on a\n// server, but a hook initializer still runs once during any non-browser\n// render pass (e.g. a framework's SSR pass before hydration).\nconst FALLBACK_VIEWPORT_WIDTH = 1024;\n\n/**\n * The clamp, written out exactly as specified (Ruling 26 §3):\n * `minWidth` wins last, so a hostile viewport can never render a\n * sub-minimum dock.\n */\nfunction clampWidth(\n  requested: number,\n  viewportWidth: number,\n  minWidth: number,\n  maxWidth: number,\n  minContentWidth: number,\n): number {\n  const upperBound = Math.min(maxWidth, viewportWidth - minContentWidth);\n  return Math.max(minWidth, Math.min(requested, upperBound));\n}\n\nexport const SideDock = forwardRef<HTMLElement, SideDockProps>(function SideDock(\n  {\n    title,\n    description,\n    headerActions,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    side = \"right\",\n    containerPosition = \"viewport\",\n    width,\n    defaultWidth = DEFAULT_WIDTH,\n    onWidthChange,\n    onWidthCommit,\n    minWidth = DEFAULT_MIN_WIDTH,\n    maxWidth = DEFAULT_MAX_WIDTH,\n    minContentWidth = DEFAULT_MIN_CONTENT_WIDTH,\n    resizable = true,\n    overlayBreakpoint = DEFAULT_OVERLAY_BREAKPOINT,\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const { t, formatNumber } = useLocale();\n  const titleId = useId();\n  const resizeLabelId = useId();\n\n  const panel = useCollapsiblePanel({ side, open, defaultOpen, onOpenChange, containerPosition });\n  const isOverlay = useIsMobile(overlayBreakpoint);\n\n  // Focus restoration for the COLUMN presentation only (Finding 2,\n  // task-11f-brief.md). The overlay presentation is a Radix `Dialog` and\n  // already restores focus to its opener on close; the column `<aside>`\n  // has no such mechanism, and marking it `inert` while closed makes the\n  // browser's own HTML focus-fixup rule drop focus to `<body>` the instant\n  // a focused descendant becomes inert — the exact stranding this repairs\n  // (see `.claude/rules/interaction-guidelines.md`'s identical note about\n  // the native `disabled` attribute).\n  //\n  // `containerRef` is an internal mirror of the forwarded `ref` (merged\n  // below) so this effect can ask \"was focus inside the dock?\" regardless\n  // of what the caller's own `ref` points at. `groupRef` targets the outer\n  // wrapper, which never becomes `inert`, as the in-page fallback when the\n  // recorded opener is no longer usable.\n  const containerRef = useRef<HTMLElement | null>(null);\n  const mergedContainerRef = useMemo(() => mergeRefs<HTMLElement>(ref, containerRef), [ref]);\n  const groupRef = useRef<HTMLDivElement>(null);\n  const openerRef = useRef<Element | null>(null);\n  const wasOpenRef = useRef(panel.open);\n\n  useEffect(() => {\n    const wasOpen = wasOpenRef.current;\n    const isOpen = panel.open;\n    wasOpenRef.current = isOpen;\n\n    if (isOpen && !wasOpen) {\n      // Closed → open: remember whatever summoned the dock, so a later\n      // close can hand focus back to it.\n      openerRef.current = document.activeElement;\n      return;\n    }\n\n    if (!isOpen && wasOpen) {\n      // Open → closed: only act if focus was actually inside the dock —\n      // never steal focus the user had already moved elsewhere.\n      const container = containerRef.current;\n      const active = document.activeElement;\n      const focusWasInside = container != null && active != null && container.contains(active);\n      if (!focusWasInside) return;\n\n      const opener = openerRef.current;\n      if (opener instanceof HTMLElement && opener.isConnected && opener !== document.body) {\n        opener.focus();\n      } else {\n        // The recorded opener unmounted (or there wasn't one) — land on\n        // the outer wrapper rather than let focus fall through to\n        // `<body>`. It never joins the tab order (`tabIndex={-1}`).\n        groupRef.current?.focus();\n      }\n    }\n  }, [panel.open]);\n\n  // The live viewport width the clamp reads — `useIsMobile` only exposes a\n  // boolean threshold, not the pixel value clamping needs.\n  // Starts at the fallback on the server AND on the client's first render, then reads the real\n  // width on mount: a lazy `window.innerWidth` initialiser made the first client render differ\n  // from the server HTML (`aria-valuemax`), which React reports as a hydration mismatch.\n  const [viewportWidth, setViewportWidth] = useState<number>(FALLBACK_VIEWPORT_WIDTH);\n  useEffect(() => {\n    setViewportWidth(window.innerWidth);\n    // `resize` can fire dozens of times per second while a window is being\n    // dragged — coalesce every event inside one frame into a single state\n    // update via rAF, instead of re-rendering on each raw event.\n    let rafId: number | null = null;\n    const onResize = () => {\n      if (rafId !== null) return;\n      rafId = requestAnimationFrame(() => {\n        rafId = null;\n        setViewportWidth(window.innerWidth);\n      });\n    };\n    window.addEventListener(\"resize\", onResize);\n    return () => {\n      window.removeEventListener(\"resize\", onResize);\n      if (rafId !== null) cancelAnimationFrame(rafId);\n    };\n  }, []);\n\n  const isWidthControlled = width !== undefined;\n  const [uncontrolledWidth, setUncontrolledWidth] = useState(defaultWidth);\n  const requestedWidth = isWidthControlled ? (width as number) : uncontrolledWidth;\n  const upperBound = Math.min(maxWidth, viewportWidth - minContentWidth);\n  const clampedWidth = clampWidth(\n    requestedWidth,\n    viewportWidth,\n    minWidth,\n    maxWidth,\n    minContentWidth,\n  );\n\n  // A ref mirror of the currently-rendered clamped width, refreshed on every\n  // render (not via an effect) so the keyboard/pointer handlers below can\n  // read and update it synchronously between two native browser events —\n  // React may not have committed a re-render from the previous event yet.\n  const latestWidthRef = useRef(clampedWidth);\n  latestWidthRef.current = clampedWidth;\n\n  // Convergence (fixed contract decision): a CONTROLLED width outside the\n  // clamp renders the clamped number and reports it back once — on mount,\n  // and again whenever a viewport resize moves the bound. Deps are scoped to\n  // the VALUES only (not the callback props), so an inline\n  // onWidthChange/onWidthCommit from the caller can't re-trigger this on\n  // every render — it fires only when what it reports actually changes.\n  useEffect(() => {\n    if (!isWidthControlled) return;\n    if (clampedWidth === width) return;\n    onWidthChange?.(clampedWidth);\n    onWidthCommit?.(clampedWidth);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isWidthControlled, clampedWidth, width]);\n\n  /** A no-op never emits (Ruling 26 §2). Returns whether it actually changed. */\n  function requestWidth(next: number): boolean {\n    if (next === latestWidthRef.current) return false;\n    latestWidthRef.current = next;\n    if (!isWidthControlled) setUncontrolledWidth(next);\n    onWidthChange?.(next);\n    return true;\n  }\n\n  // Shared across the keyboard and pointer gestures below: did THIS gesture\n  // (the run of keydowns between focus and keyup, or the pointerdown-to-\n  // pointerup drag) actually change the value? `onWidthCommit` is a\n  // persistence trigger — firing it for a no-op gesture is noise.\n  const gestureChangedRef = useRef(false);\n\n  function handleResizeKeyDown(event: ReactKeyboardEvent<HTMLDivElement>) {\n    // Physical, not logical/RTL-aware (Mechanism §3): on a right-hand dock\n    // ArrowLeft widens (the handle moves toward the content); a left-hand\n    // dock swaps the two.\n    const widenKey = side === \"right\" ? \"ArrowLeft\" : \"ArrowRight\";\n    const narrowKey = side === \"right\" ? \"ArrowRight\" : \"ArrowLeft\";\n    const step = event.shiftKey ? KEY_STEP * KEY_STEP_SHIFT_MULTIPLIER : KEY_STEP;\n    let requested: number | undefined;\n    if (event.key === widenKey) requested = latestWidthRef.current + step;\n    else if (event.key === narrowKey) requested = latestWidthRef.current - step;\n    else if (event.key === \"Home\") requested = minWidth;\n    else if (event.key === \"End\") requested = upperBound;\n    else return;\n    event.preventDefault();\n    const next = clampWidth(requested, viewportWidth, minWidth, maxWidth, minContentWidth);\n    if (requestWidth(next)) gestureChangedRef.current = true;\n  }\n\n  function handleResizeKeyUp() {\n    if (gestureChangedRef.current) onWidthCommit?.(latestWidthRef.current);\n    gestureChangedRef.current = false;\n  }\n\n  const pointerStartRef = useRef<{ x: number; width: number } | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  function handleResizePointerDown(event: ReactPointerEvent<HTMLDivElement>) {\n    if (event.pointerType === \"mouse\" && event.button !== 0) return;\n    event.currentTarget.setPointerCapture?.(event.pointerId);\n    gestureChangedRef.current = false;\n    pointerStartRef.current = { x: event.clientX, width: latestWidthRef.current };\n    setIsDragging(true);\n  }\n\n  function handleResizePointerMove(event: ReactPointerEvent<HTMLDivElement>) {\n    const start = pointerStartRef.current;\n    if (!start) return;\n    const delta = event.clientX - start.x;\n    const signedDelta = side === \"right\" ? -delta : delta;\n    const next = clampWidth(\n      start.width + signedDelta,\n      viewportWidth,\n      minWidth,\n      maxWidth,\n      minContentWidth,\n    );\n    if (requestWidth(next)) gestureChangedRef.current = true;\n  }\n\n  function endPointerGesture(event: ReactPointerEvent<HTMLDivElement>) {\n    if (!pointerStartRef.current) return;\n    pointerStartRef.current = null;\n    setIsDragging(false);\n    event.currentTarget.releasePointerCapture?.(event.pointerId);\n    if (gestureChangedRef.current) onWidthCommit?.(latestWidthRef.current);\n    gestureChangedRef.current = false;\n  }\n\n  // The generic `close` key (messages.ts \"Generic\" section) — reused per the\n  // brief rather than minting a new one.\n  const closeLabel = t(\"close\");\n  const resizeValueText = t(\"ui.sideDock.widthValue\", {\n    count: Math.round(clampedWidth),\n    size: formatNumber(Math.round(clampedWidth)),\n  });\n\n  const resizeHandle = resizable && (\n    <div\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-labelledby={`${resizeLabelId} ${titleId}`}\n      aria-valuenow={Math.round(clampedWidth)}\n      aria-valuemin={minWidth}\n      aria-valuemax={Math.round(upperBound)}\n      aria-valuetext={resizeValueText}\n      tabIndex={0}\n      data-slot=\"side-dock-resize-handle\"\n      onPointerDown={handleResizePointerDown}\n      onPointerMove={handleResizePointerMove}\n      onPointerUp={endPointerGesture}\n      onPointerCancel={endPointerGesture}\n      onKeyDown={handleResizeKeyDown}\n      onKeyUp={handleResizeKeyUp}\n      className={cn(\n        // A literal px hit box, not a `w-*` spacing utility — `--spacing` is\n        // what `data-density=\"compact\"` rescales (Mechanism §3).\n        \"absolute inset-y-0 w-[min(24px,50%)] cursor-col-resize touch-none select-none\",\n        side === \"right\" ? \"left-0\" : \"right-0\",\n        \"focus-visible:outline-none\",\n        isDragging\n          ? cn(\n              \"after:absolute after:inset-y-0 after:w-1 after:bg-primary after:content-['']\",\n              side === \"right\" ? \"after:left-0\" : \"after:right-0\",\n            )\n          : cn(\n              \"after:absolute after:inset-y-0 after:w-px after:bg-muted-foreground after:content-['']\",\n              \"hover:after:w-1 focus-visible:after:w-1\",\n              side === \"right\" ? \"after:left-0\" : \"after:right-0\",\n            ),\n        \"focus-visible:after:focus-ring-static\",\n      )}\n    >\n      <span id={resizeLabelId} className=\"sr-only\">\n        {t(\"ui.sideDock.resize\")}\n      </span>\n    </div>\n  );\n\n  if (isOverlay) {\n    return (\n      <Sheet open={panel.open} onOpenChange={panel.setOpen}>\n        <SheetContent\n          // Runtime-safe: Radix's Content ref resolves to a plain\n          // HTMLDivElement, same as the column branch's <aside> ref target\n          // at the type level (both extend HTMLElement).\n          ref={ref as unknown as Ref<HTMLDivElement>}\n          side={side}\n          data-slot=\"side-dock\"\n          className={cn(\"flex flex-col bg-card p-0\", className)}\n          style={style}\n          // With no description the dialog is still named by its title, so\n          // opt out of `aria-describedby` explicitly rather than let Radix\n          // warn about a missing description (mirrors ExpandDialogContent).\n          {...(description ? {} : { \"aria-describedby\": undefined })}\n          {...props}\n        >\n          <SheetHeader\n            data-slot=\"side-dock-header\"\n            // `h-header`, never padding: a dock's header band sits beside the app\n            // shell's top bar and MUST share its height in every theme (a theme\n            // retunes `--header-size`). See the column branch.\n            className=\"h-header flex-row items-center gap-2 space-y-0 border-b border-border px-4\"\n          >\n            <div className=\"min-w-0 flex-1\">\n              <SheetTitle data-slot=\"side-dock-title\" className=\"text-title\">\n                {title}\n              </SheetTitle>\n            </div>\n            {headerActions}\n          </SheetHeader>\n          {description && <SheetDescription className=\"sr-only\">{description}</SheetDescription>}\n          <div\n            data-slot=\"side-dock-body\"\n            // Focusable because it scrolls; `focus-ring-inset` because the Sheet\n            // panel clips anything drawn outside this box, and both layers of\n            // the plain rung are drawn outside it. A dock's children are\n            // caller-supplied and routinely have no focusable descendant (a\n            // change log, a read-only detail panel), so without a tab stop\n            // there is no keyboard route into the region once it overflows\n            // (WCAG 2.1.1, axe `scrollable-region-focusable`).\n            tabIndex={0}\n            className=\"min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset\"\n          >\n            {children}\n          </div>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"side-dock\"\n      // `group`: the ancestor `group-data-[state=collapsed]:…` selectors in\n      // `panel.spacerClassName`/`panel.containerClassName` resolve against\n      // THIS element (Mechanism §1 — mirrors Sidebar's outer `group` div).\n      // `ref={groupRef}` + `tabIndex={-1}`: the focus-restoration fallback\n      // target (Finding 2) — this wrapper is never `inert`, unlike the\n      // `<aside>` below, so it is always a safe place to land focus. -1\n      // keeps it out of the normal tab order; it is only ever focused\n      // programmatically.\n      ref={groupRef}\n      tabIndex={-1}\n      // `relative`: only in \"inset\" mode, so the container's `absolute`\n      // positioning below resolves against THIS wrapper (its own slot in\n      // the layout) instead of the viewport (#432). No-op in \"viewport\"\n      // mode — the container stays `fixed`.\n      className={cn(\"group\", containerPosition === \"inset\" && \"relative\")}\n      {...panel.attrs}\n      style={{ \"--collapsible-panel-width\": `${clampedWidth}px` } as CSSProperties}\n    >\n      <div data-slot=\"side-dock-spacer\" className={panel.spacerClassName} />\n      <aside\n        ref={mergedContainerRef}\n        data-slot=\"side-dock-container\"\n        aria-labelledby={titleId}\n        // The collapsed container stays mounted (for the closing transition)\n        // but stops being interactive/reachable (fixed contract decision).\n        inert={!panel.open}\n        className={cn(\n          panel.containerClassName,\n          \"flex-col bg-card\",\n          side === \"right\" ? \"border-l\" : \"border-r\",\n          className,\n        )}\n        style={style}\n        {...props}\n      >\n        <div\n          data-slot=\"side-dock-header\"\n          // ONE fixed band at `h-header` — the same height the app shell's top\n          // bar takes, so the two rules under them sit on one line in every\n          // theme. Never size it from padding: a padded header grows with its\n          // content (a two-line description made it 73px beside a 56px bar).\n          // The description therefore lives UNDER the band, not inside it.\n          className=\"flex h-header shrink-0 items-center gap-2 border-b border-border px-4\"\n        >\n          <div\n            id={titleId}\n            data-slot=\"side-dock-title\"\n            className=\"min-w-0 flex-1 truncate text-title\"\n          >\n            {title}\n          </div>\n          {headerActions}\n          <button\n            type=\"button\"\n            data-slot=\"side-dock-close\"\n            aria-label={closeLabel}\n            onClick={() => panel.setOpen(false)}\n            className=\"shrink-0 rounded-sm p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-ring\"\n          >\n            <X className=\"size-4\" aria-hidden=\"true\" />\n          </button>\n        </div>\n        <div\n          data-slot=\"side-dock-body\"\n          // Focusable because it scrolls; `focus-ring-inset` because the dock's\n          // own container clips anything drawn outside this box (the collapse\n          // tween animates its width). Worse here than in the overlay branch:\n          // the column is user-resizable, so narrowing it re-wraps every child\n          // taller — overflow is one keyboard gesture on the resize handle\n          // away, not a hypothetical viewport (WCAG 2.1.1, axe\n          // `scrollable-region-focusable`).\n          tabIndex={0}\n          className=\"min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset\"\n        >\n          {description && (\n            <p data-slot=\"side-dock-description\" className=\"mb-4 text-body text-muted-foreground\">\n              {description}\n            </p>\n          )}\n          {children}\n        </div>\n        {resizeHandle}\n      </aside>\n    </div>\n  );\n});\n"],"mappings":"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","names":["SideDock"]}

package/dist/chunk-OITCRC5D.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-OITCRC5D.js.map

package/dist/chunk-OITCRC5D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-OKV3N7QK.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-OKV3N7QK.js.map

package/dist/chunk-OKV3N7QK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-OKY7ACZK.js

@@ -0,0 +1,31 @@
+"use client";
+import {
+  illustrationSvgProps
+} from "./chunk-CEQ3YKHR.js";
+
+// src/illustrations/offline-illustration.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OfflineIllustration = forwardRef(
+  function OfflineIllustration2({ size, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        ...illustrationSvgProps(size, className),
+        "data-slot": "offline-illustration",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M44.9,100.4 C44.9,83.6 56.4,72.4 67.9,75.2 C70.2,58.4 86.3,50 97.8,61.2 C111.6,55.6 125.4,69.6 120.8,86.4 C127.7,92 125.4,106 116.2,106 L54.1,106 C49.5,106 44.9,104.6 44.9,100.4 Z" }),
+          /* @__PURE__ */ jsx("line", { x1: "36", y1: "112", x2: "124", y2: "36", strokeWidth: 4 })
+        ]
+      }
+    );
+  }
+);
+OfflineIllustration.displayName = "OfflineIllustration";
+
+export {
+  OfflineIllustration
+};
+//# sourceMappingURL=chunk-OKY7ACZK.js.map

package/dist/chunk-OKY7ACZK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/illustrations/offline-illustration.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { illustrationSvgProps, type IllustrationProps } from \"./illustration-base\";\n\n/**\n * Disconnected / no-network state. A line-art cloud crossed by a slash — the\n * universal \"disabled/no signal\" idiom — reads as \"offline\" on its own\n * silhouette. No accent mark, per the accent-semantics convention in\n * `illustration-base.tsx` (#48 finding 1).\n *\n * Redrawn for #24 fix round 1 (P1-4) — the previous cloud path's closing curve\n * left a visible hook/spur, and the dashed tether + falling node read as a\n * raindrop rather than a severed connection while pulling the ink centre 11.5\n * units below the shared stage centre.\n *\n * Redrawn again for #48 finding 4 — the two small rounded-rect \"chain link\"\n * fragments below the slash read as loose debris/dashes rather than a\n * \"broken link\" gesture. Removed rather than redrawn: the cloud+slash\n * silhouette already fully conveys \"offline\" without them (the same\n * reasoning that dropped the decorative accents from `EmptyListIllustration`/\n * `FirstRunIllustration`).\n */\nexport const OfflineIllustration = forwardRef<SVGSVGElement, IllustrationProps>(\n  function OfflineIllustration({ size, className, ...props }, ref) {\n    return (\n      <svg\n        ref={ref}\n        {...illustrationSvgProps(size, className)}\n        data-slot=\"offline-illustration\"\n        {...props}\n      >\n        <path d=\"M44.9,100.4 C44.9,83.6 56.4,72.4 67.9,75.2 C70.2,58.4 86.3,50 97.8,61.2 C111.6,55.6 125.4,69.6 120.8,86.4 C127.7,92 125.4,106 116.2,106 L54.1,106 C49.5,106 44.9,104.6 44.9,100.4 Z\" />\n        <line x1=\"36\" y1=\"112\" x2=\"124\" y2=\"36\" strokeWidth={4} />\n      </svg>\n    );\n  },\n);\nOfflineIllustration.displayName = \"OfflineIllustration\";\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAwBrB,SAME,KANF;AAHC,IAAM,sBAAsB;AAAA,EACjC,SAASA,qBAAoB,EAAE,MAAM,WAAW,GAAG,MAAM,GAAG,KAAK;AAC/D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,qBAAqB,MAAM,SAAS;AAAA,QACxC,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,8BAAC,UAAK,GAAE,uLAAsL;AAAA,UAC9L,oBAAC,UAAK,IAAG,MAAK,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,aAAa,GAAG;AAAA;AAAA;AAAA,IAC1D;AAAA,EAEJ;AACF;AACA,oBAAoB,cAAc;","names":["OfflineIllustration"]}