@elabs-ai/components-ui 4.1.0 → 5.0.0

package/dist/chunk-NTTSHOOK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/app-shell/app-shell.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { SkipLink } from \"../skip-link\";\nimport { TopNav } from \"../top-nav\";\n\n/** `topBar` slots — see `AppShellProps.topBar`. */\nexport interface AppShellTopBarSlots {\n  /** Leading content, after the brand (when `brandPlacement=\"topbar\"`). */\n  start?: ReactNode;\n  /** Centred content (e.g. a global search field) — see `TopNav`'s `center`. */\n  center?: ReactNode;\n  /** Trailing content (actions, account menu). */\n  end?: ReactNode;\n}\n\nexport interface AppShellProps {\n  /**\n   * Persistent left navigation (often a <Sidebar />). Not rendered when\n   * `navigation=\"topbar\"` — put the primary navigation in `topBar`/`topNav`\n   * instead.\n   */\n  sidebar?: ReactNode;\n  /**\n   * Top bar (often a <TopNav />), a fully-formed node the caller already\n   * brought. **Wins over `topBar` when both are passed** — this shell never\n   * merges the two, so pass one or the other, never both. Use `topNav` when\n   * you want to compose `TopNav` (or any other element) yourself; use\n   * `topBar` for the common case where this shell should compose `TopNav`\n   * for you from plain slots.\n   */\n  topNav?: ReactNode;\n  /**\n   * Slots this shell composes into a `TopNav` for you — the convenience path\n   * for the common case (see `topNav` for precedence when both are set).\n   * `center` renders through `TopNav`'s own `center` prop: a true 3-column\n   * grid, so centred content (e.g. a global search field) stays centred\n   * regardless of how wide `start`/`end` are.\n   */\n  topBar?: AppShellTopBarSlots;\n  /**\n   * Where the brand mark lives. `\"sidebar\"` (default) is today's behavior:\n   * this shell renders no brand of its own — the caller's `sidebar` node\n   * (e.g. a `SidebarHeader` / `TeamSwitcher`) owns it. `\"topbar\"` renders\n   * `brand` as the leading element of the top bar, before `topBar.start`.\n   * Has no effect without a `brand` node, and no effect when `topNav` is\n   * passed instead of `topBar` (bring your own top bar, bring your own\n   * brand placement inside it).\n   * @default \"sidebar\"\n   */\n  brandPlacement?: \"sidebar\" | \"topbar\";\n  /** Brand mark rendered in the top bar when `brandPlacement=\"topbar\"`. */\n  brand?: ReactNode;\n  /**\n   * Where the primary navigation lives. `\"sidebar\"` (default) renders\n   * `sidebar` in the left column, unchanged. `\"topbar\"` renders no sidebar\n   * column at all — compose the primary navigation into `topBar`/`topNav`\n   * instead (e.g. a `NavigationMenu` in `topBar.center`).\n   * @default \"sidebar\"\n   */\n  navigation?: \"sidebar\" | \"topbar\";\n  /**\n   * A second column beside the sidebar (e.g. a resource/filter panel) —\n   * `w-(--shell-secondary-width)` (16rem by default, every theme), hidden\n   * below `md` exactly like `sidebar`. Independent of `navigation`/`sidebar`:\n   * renders whenever it is passed. Pure layout, like `sidebar` — bring your\n   * own chrome (background, border) on the node itself.\n   */\n  secondaryPanel?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  /** Class for the scrolling main content region. */\n  mainClassName?: string;\n  /**\n   * The `<main>` region's id, and the skip link's target. Override it when a\n   * page mounts more than one shell — two elements sharing `main-content`\n   * would make the skip link ambiguous. @default \"main-content\"\n   */\n  mainId?: string;\n}\n\n/**\n * App-first layout: fixed-height viewport with an optional sidebar, a top bar,\n * and a scrollable main region. Pure layout — bring your own nav components.\n *\n * The `sidebar` slot is hidden below `md` with no fallback of its own: this\n * shell does not know whether `sidebar` already manages its own responsive\n * behavior. `<Sidebar>` (`../sidebar`) does — it renders as an offcanvas\n * `Sheet` below the mobile breakpoint entirely on its own, through a Radix\n * portal that is unaffected by this wrapper's `hidden md:flex` (a portal\n * mounts into `document.body`, not into this DOM subtree) — pair it with a\n * `<SidebarTrigger>` inside `topNav` for full mobile navigation. Wrapping an\n * arbitrary `sidebar` node in a SECOND, shell-owned `Sheet` here would look\n * like a fix but silently break that exact pattern: a Radix `Sheet`/`Dialog`\n * only mounts its content while open, so `<Sidebar>` would be unmounted\n * (not just hidden) whenever the shell's own drawer is closed — and with it,\n * the very trigger a caller uses to open ITS mobile view. A bare nav node\n * (no built-in responsive behavior of its own) has no such fallback; give it\n * one explicitly, e.g. by rendering a `<Sheet>` alongside `topNav` in the\n * consuming app.\n *\n * The `SidebarProvider` + `Sidebar` + `SidebarTrigger` composition above is\n * regression-locked in `app-shell.test.tsx` at a mobile viewport width: no\n * AppShell code change is needed to reach navigation below `md`, because\n * `SidebarProvider` is a plain React context and is never blocked by this\n * component's internal wrapper `<div>`.\n *\n * `brandPlacement`, `topBar`, `navigation` and `secondaryPanel` are all\n * optional, off by default: with none of them passed this renders exactly\n * what it always has (a `sidebar` column, `topNav` verbatim, `<main>`). They\n * generalise the shape `Layout/App Shell/Flagship` already hand-builds —\n * brand in the top bar, a centred search field, horizontal primary\n * navigation, a second resource column — into props any consumer can reach\n * for without hand-rolling the layout again.\n */\nexport const AppShell = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(\n  {\n    sidebar,\n    topNav,\n    topBar,\n    brandPlacement = \"sidebar\",\n    brand,\n    navigation = \"sidebar\",\n    secondaryPanel,\n    children,\n    className,\n    mainClassName,\n    mainId = \"main-content\",\n  },\n  ref,\n) {\n  const showSidebar = navigation !== \"topbar\" && !!sidebar;\n  const showBrandInTopBar = brandPlacement === \"topbar\" && !!brand;\n\n  // `topNav` is a fully-formed node the caller already brought, so it always\n  // wins over `topBar` — the shell's own compose-from-slots convenience path.\n  // See the `topNav`/`topBar` JSDoc for the full precedence note.\n  const composedTopBar =\n    topBar || showBrandInTopBar ? (\n      <TopNav\n        start={\n          showBrandInTopBar ? (\n            <>\n              <div data-slot=\"app-shell-brand\" className=\"flex items-center\">\n                {brand}\n              </div>\n              {topBar?.start}\n            </>\n          ) : (\n            topBar?.start\n          )\n        }\n        center={topBar?.center}\n        end={topBar?.end}\n      />\n    ) : null;\n  const resolvedTopBar = topNav ?? composedTopBar;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex h-dvh w-full overflow-hidden bg-background text-foreground\", className)}\n    >\n      {/* The first focusable element of the shell, so a keyboard user can pass\n          the nav rail instead of tabbing through it on every route (WCAG 2.4.1).\n          All four registry app-shell blocks ship one; the primitive they sit\n          beside must not be the exception, and it is the surface with the widest\n          reach — it is imported, not copy-owned. */}\n      <SkipLink targetId={mainId} />\n      {showSidebar ? <div className=\"hidden md:flex\">{sidebar}</div> : null}\n      {secondaryPanel ? (\n        <div\n          data-slot=\"app-shell-secondary-panel\"\n          className=\"hidden w-(--shell-secondary-width) shrink-0 md:flex\"\n        >\n          {secondaryPanel}\n        </div>\n      ) : null}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {resolvedTopBar}\n        {/* `<main>` IS the scroll port here (in the blocks the skip target and\n            the scroll port are separate elements), so it takes `tabIndex={0}`\n            rather than `{-1}`: a region that scrolls has to be keyboard-operable\n            even when the content inside it is not focusable (WCAG 2.1.1, axe\n            `scrollable-region-focusable`). `focus-ring-inset`, not `focus-ring`\n            — the root above carries `overflow-hidden`, which clips both layers\n            of the plain rung. */}\n        <main\n          id={mainId}\n          tabIndex={0}\n          className={cn(\"min-h-0 flex-1 overflow-y-auto focus-ring-inset\", mainClassName)}\n        >\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,kBAAkC;AA6I/B,mBACE,KADF;AA3BL,IAAM,WAAW,WAA0C,SAASA,UACzE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,GACA,KACA;AACA,QAAM,cAAc,eAAe,YAAY,CAAC,CAAC;AACjD,QAAM,oBAAoB,mBAAmB,YAAY,CAAC,CAAC;AAK3D,QAAM,iBACJ,UAAU,oBACR;AAAA,IAAC;AAAA;AAAA,MACC,OACE,oBACE,iCACE;AAAA,4BAAC,SAAI,aAAU,mBAAkB,WAAU,qBACxC,iBACH;AAAA,QACC,QAAQ;AAAA,SACX,IAEA,QAAQ;AAAA,MAGZ,QAAQ,QAAQ;AAAA,MAChB,KAAK,QAAQ;AAAA;AAAA,EACf,IACE;AACN,QAAM,iBAAiB,UAAU;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,mEAAmE,SAAS;AAAA,MAO1F;AAAA,4BAAC,YAAS,UAAU,QAAQ;AAAA,QAC3B,cAAc,oBAAC,SAAI,WAAU,kBAAkB,mBAAQ,IAAS;AAAA,QAChE,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,QACH,IACE;AAAA,QACJ,qBAAC,SAAI,WAAU,gCACZ;AAAA;AAAA,UAQD;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,UAAU;AAAA,cACV,WAAW,GAAG,mDAAmD,aAAa;AAAA,cAE7E;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["AppShell"]}

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-OBEJUAN6.js

@@ -0,0 +1,246 @@
+"use client";
+import {
+  useThemeTransition
+} from "./chunk-YIFB24WW.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-TU24Y4HN.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-U4LHV5DS.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-VA2OONPE.js";
+
+// src/components/theme-switcher/theme-switcher.tsx
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Check, Monitor, Moon, Sun } from "lucide-react";
+import {
+  groupThemeFamilies,
+  resolveThemeVariant,
+  themeFamilyIdOf,
+  themeSchemeOf,
+  useTheme
+} from "@elabs-ai/components-tokens";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SYSTEM_STORAGE_KEY = "brand-ui-theme-system";
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+var ICON_SIZE = {
+  sm: "icon-sm",
+  default: "icon",
+  lg: "icon-lg"
+};
+function prefersDark() {
+  return typeof window !== "undefined" && window.matchMedia(DARK_QUERY).matches;
+}
+function pickByDarkness(list, dark) {
+  return (list.find((t) => t.dark === dark) ?? list[0])?.value;
+}
+var ThemeSwitcher = forwardRef(
+  function ThemeSwitcher2({
+    themes,
+    mode = "auto",
+    showSystem = true,
+    effect = "polygon",
+    size = "default",
+    variant,
+    preference,
+    onPreferenceChange,
+    className,
+    ...props
+  }, ref) {
+    const { theme, themeDefinitions, setTheme } = useTheme();
+    const { t } = useLocale();
+    const switchTheme = useThemeTransition(effect);
+    const isControlled = preference !== void 0;
+    const [uncontrolledIsSystem, setUncontrolledIsSystem] = useState(false);
+    const isSystem = isControlled ? preference === "system" : uncontrolledIsSystem;
+    const narrowed = themes ? themes.map((name) => themeDefinitions.find((d) => d.value === name)).filter((d) => d !== void 0) : themeDefinitions;
+    const offered = narrowed.length > 0 ? narrowed : themeDefinitions;
+    const safeThemes = offered.map((d) => d.value);
+    const labelOf = (name) => offered.find((d) => d.value === name)?.label ?? name;
+    const isDark = (name) => offered.find((d) => d.value === name)?.dark ?? false;
+    const resolvedTheme = isControlled && preference !== void 0 && preference !== "system" ? preference : theme;
+    const families = groupThemeFamilies(offered);
+    const useFamilies = mode === "auto" && families.filter((f) => f.declared).length >= 2;
+    const activeDefinition = offered.find((d) => d.value === resolvedTheme);
+    const activeFamily = useFamilies ? (activeDefinition && families.find((f) => f.id === themeFamilyIdOf(activeDefinition))) ?? families[0] : void 0;
+    const scope = activeFamily ? [activeFamily.light, activeFamily.dark].filter((d) => d !== void 0) : offered;
+    const lightTheme = pickByDarkness(scope, false) ?? theme;
+    const darkTheme = pickByDarkness(scope, true) ?? theme;
+    const intendedSchemeRef = useRef(
+      void 0
+    );
+    useEffect(() => {
+      if (isControlled) return;
+      if (typeof window === "undefined") return;
+      const active = window.localStorage.getItem(SYSTEM_STORAGE_KEY) === "1";
+      setUncontrolledIsSystem(active);
+      if (active) setTheme(prefersDark() ? darkTheme : lightTheme);
+    }, []);
+    useEffect(() => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+      const mql = window.matchMedia(DARK_QUERY);
+      const onChange = () => {
+        const active = isControlled ? preference === "system" : window.localStorage.getItem(SYSTEM_STORAGE_KEY) === "1";
+        if (active) setTheme(prefersDark() ? darkTheme : lightTheme);
+      };
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    }, [isControlled, preference, darkTheme, lightTheme, setTheme]);
+    const pickTheme = useCallback(
+      (next2) => {
+        if (isControlled) {
+          onPreferenceChange?.(next2);
+        } else {
+          setUncontrolledIsSystem(false);
+          if (typeof window !== "undefined") window.localStorage.setItem(SYSTEM_STORAGE_KEY, "0");
+        }
+        switchTheme(next2);
+      },
+      [switchTheme, isControlled, onPreferenceChange]
+    );
+    const pickSystem = useCallback(() => {
+      if (isControlled) {
+        onPreferenceChange?.("system");
+      } else {
+        setUncontrolledIsSystem(true);
+        if (typeof window !== "undefined") window.localStorage.setItem(SYSTEM_STORAGE_KEY, "1");
+      }
+      switchTheme(prefersDark() ? darkTheme : lightTheme);
+    }, [switchTheme, darkTheme, lightTheme, isControlled, onPreferenceChange]);
+    const TriggerIcon = isSystem ? Monitor : isDark(resolvedTheme) ? Moon : Sun;
+    if (activeFamily) {
+      const activeScheme = activeDefinition;
+      const remembered = intendedSchemeRef.current;
+      const intended = remembered && remembered.theme === resolvedTheme ? remembered.scheme : activeScheme ? themeSchemeOf(activeScheme) : "light";
+      const pickFamily = (familyId) => {
+        const scheme = isSystem ? prefersDark() ? "dark" : "light" : intended;
+        const next2 = resolveThemeVariant(families, familyId, scheme);
+        if (next2 === void 0) return;
+        intendedSchemeRef.current = { scheme: intended, theme: next2 };
+        if (isSystem) switchTheme(next2);
+        else pickTheme(next2);
+      };
+      const pickScheme = (value) => {
+        if (value === "system") {
+          pickSystem();
+          return;
+        }
+        const scheme = value;
+        const next2 = activeFamily[scheme]?.value;
+        if (next2 === void 0) return;
+        intendedSchemeRef.current = { scheme, theme: next2 };
+        pickTheme(next2);
+      };
+      const schemeValue = isSystem ? "system" : activeScheme ? themeSchemeOf(activeScheme) : "";
+      return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            variant: variant ?? "outline",
+            size: ICON_SIZE[size],
+            "aria-label": t("ui.themeSwitcher.theme"),
+            className,
+            ...props,
+            children: /* @__PURE__ */ jsx(TriggerIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("ui.themeSwitcher.theme") }),
+          /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: activeFamily.id, onValueChange: pickFamily, children: families.map((f) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: f.id, children: f.label }, f.id)) }),
+          activeFamily.schemes.length === 2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("ui.themeSwitcher.mode") }),
+            /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, { value: schemeValue, onValueChange: pickScheme, children: [
+              /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: "light", children: [
+                /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" }),
+                t("ui.themeSwitcher.light")
+              ] }),
+              /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: "dark", children: [
+                /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" }),
+                t("ui.themeSwitcher.dark")
+              ] }),
+              showSystem ? /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: "system", children: [
+                /* @__PURE__ */ jsx(Monitor, { "aria-hidden": "true" }),
+                t("ui.themeSwitcher.system")
+              ] }) : null
+            ] })
+          ] }) : null
+        ] })
+      ] });
+    }
+    const useDropdown = mode === "dropdown" || mode === "auto" && safeThemes.length > 2;
+    if (useDropdown) {
+      return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            variant: variant ?? "outline",
+            size: ICON_SIZE[size],
+            "aria-label": t("ui.themeSwitcher.theme"),
+            className,
+            ...props,
+            children: /* @__PURE__ */ jsx(TriggerIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          showSystem ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => pickSystem(), children: [
+            /* @__PURE__ */ jsx(Monitor, {}),
+            /* @__PURE__ */ jsx("span", { children: t("ui.themeSwitcher.system") }),
+            isSystem ? /* @__PURE__ */ jsx(Check, { className: "ms-auto" }) : null
+          ] }) : null,
+          offered.map((d) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => pickTheme(d.value), children: [
+            d.dark ? /* @__PURE__ */ jsx(Moon, {}) : /* @__PURE__ */ jsx(Sun, {}),
+            /* @__PURE__ */ jsx("span", { children: d.label }),
+            !isSystem && resolvedTheme === d.value ? /* @__PURE__ */ jsx(Check, { className: "ms-auto" }) : null
+          ] }, d.value))
+        ] })
+      ] });
+    }
+    const order = showSystem ? ["light", "dark", "system"] : ["light", "dark"];
+    const current = isSystem ? "system" : resolvedTheme === darkTheme ? "dark" : "light";
+    const next = order[(order.indexOf(current) + 1) % order.length];
+    const apply = () => {
+      if (next === "system") pickSystem();
+      else pickTheme(next === "dark" ? darkTheme : lightTheme);
+    };
+    const roleLabel = (role) => role === "system" ? t("ui.themeSwitcher.system") : labelOf(role === "dark" ? darkTheme : lightTheme);
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          variant: variant ?? "ghost",
+          size: ICON_SIZE[size],
+          "aria-label": `Theme: ${roleLabel(current)}. Activate to switch to ${roleLabel(next)}.`,
+          onClick: apply,
+          className,
+          ...props,
+          children: /* @__PURE__ */ jsx(TriggerIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: roleLabel(current) })
+    ] }) });
+  }
+);
+
+export {
+  ThemeSwitcher
+};
+//# sourceMappingURL=chunk-OBEJUAN6.js.map

package/dist/chunk-OBEJUAN6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/theme-switcher/theme-switcher.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useEffect, useRef, useState, type HTMLAttributes } from \"react\";\nimport { Check, Monitor, Moon, Sun } from \"lucide-react\";\nimport {\n  groupThemeFamilies,\n  resolveThemeVariant,\n  themeFamilyIdOf,\n  themeSchemeOf,\n  useTheme,\n  type ThemeDefinition,\n  type ThemeName,\n  type ThemeScheme,\n} from \"@elabs-ai/components-tokens\";\n\nimport { Button, type ButtonProps } from \"../button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../tooltip\";\nimport { useLocale } from \"../locale-provider\";\nimport { useThemeTransition, type ThemeTransitionEffect } from \"./use-theme-transition\";\n\nconst SYSTEM_STORAGE_KEY = \"brand-ui-theme-system\";\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\ntype ButtonSize = \"sm\" | \"default\" | \"lg\";\nconst ICON_SIZE: Record<ButtonSize, \"icon-sm\" | \"icon\" | \"icon-lg\"> = {\n  sm: \"icon-sm\",\n  default: \"icon\",\n  lg: \"icon-lg\",\n};\n\n/** A theme choice, or \"system\" to follow the OS color scheme. */\nexport type ThemePreference = ThemeName | \"system\";\n\nexport interface ThemeSwitcherProps extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  /**\n   * Themes to offer, as names. ≤2 → toggle; >2 → dropdown.\n   *\n   * Defaults to the PROVIDER's registry (ADR 0029) — so an app that registers\n   * its own themes gets a working switcher with no prop at all. Pass this only\n   * to offer a subset, or to fix the order; names the provider doesn't know are\n   * dropped.\n   */\n  themes?: ThemeName[];\n  /** Force presentation; \"auto\" (default) picks toggle vs dropdown by theme count. */\n  mode?: \"auto\" | \"toggle\" | \"dropdown\";\n  /** Offer a \"System\" option that follows the OS color scheme. Default true. */\n  showSystem?: boolean;\n  /** Whole-screen reveal effect for the animated switch. Default \"polygon\". */\n  effect?: ThemeTransitionEffect;\n  /** Control size. Default \"default\". */\n  size?: ButtonSize;\n  /**\n   * The trigger button's variant. Default: `\"outline\"` for the dropdown forms and `\"ghost\"` for\n   * the two-theme toggle (today's behaviour). Pass `\"ghost\"` when the switcher sits in a row of\n   * borderless icon buttons — an app top bar — so it reads as one of them.\n   */\n  variant?: ButtonProps[\"variant\"];\n  /**\n   * Controlled preference (#366). When set, the switcher derives its \"current\"\n   * state — including \"system\" — from this prop instead of its own internal,\n   * `localStorage`-backed state, and reports every user pick via\n   * `onPreferenceChange` instead of writing its own storage key. Pass this pair\n   * when your app's actual source of truth is a different persisted preference\n   * (a settings API, a different storage key, a server-synced setting). Omit\n   * both for the default, uncontrolled behavior (unchanged).\n   */\n  preference?: ThemePreference;\n  /** Called with the new preference on every user pick, when `preference` is controlled. */\n  onPreferenceChange?: (preference: ThemePreference) => void;\n}\n\nfunction prefersDark(): boolean {\n  return typeof window !== \"undefined\" && window.matchMedia(DARK_QUERY).matches;\n}\n\n/** First theme in `list` matching `dark`, or the list's own first entry as a last resort. */\nfunction pickByDarkness(list: readonly ThemeDefinition[], dark: boolean): ThemeName | undefined {\n  return (list.find((t) => t.dark === dark) ?? list[0])?.value;\n}\n\n/**\n * Adaptive theme control. With ≤2 themes it renders a light/dark/system toggle\n * (a single icon button that cycles); with >2 it auto-upgrades to a dropdown\n * over the offered themes. Every switch animates the whole screen via\n * `useThemeTransition` (respecting reduced motion). Icons follow each theme's\n * `dark` flag, so it works for any theme — including one you authored.\n *\n * Uncontrolled by default (tracks its own \"system\" choice via `localStorage`).\n * Pass `preference`/`onPreferenceChange` to drive it from an external store\n * instead (#366) — see the `Controlled` story.\n *\n * **It renders the PROVIDER's registry** (ADR 0029). Register your themes on\n * `<ThemeProvider themes={…}>` and this switcher offers them with no prop —\n * which is also why `allowedThemes` (#355) is honoured for free: the provider\n * has already narrowed what it exposes. The `themes` prop is now purely an\n * additional, optional narrowing on top; a name the provider does not offer is\n * dropped rather than rendered, so a disallowed or unregistered theme is never\n * reachable via a menu item, the toggle, \"System\", or the OS\n * `prefers-color-scheme` listener.\n *\n * The pre-ADR-0029 hard-coded `[\"light\",\"dark\"]` default is gone. Behaviour for\n * an app on the default provider is unchanged — that registry IS light + dark.\n */\nexport const ThemeSwitcher = forwardRef<HTMLButtonElement, ThemeSwitcherProps>(\n  function ThemeSwitcher(\n    {\n      themes,\n      mode = \"auto\",\n      showSystem = true,\n      effect = \"polygon\",\n      size = \"default\",\n      variant,\n      preference,\n      onPreferenceChange,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const { theme, themeDefinitions, setTheme } = useTheme();\n    const { t } = useLocale();\n    const switchTheme = useThemeTransition(effect);\n    const isControlled = preference !== undefined;\n    const [uncontrolledIsSystem, setUncontrolledIsSystem] = useState(false);\n    const isSystem = isControlled ? preference === \"system\" : uncontrolledIsSystem;\n\n    // The provider's registry is the universe; the prop only narrows it, in the\n    // prop's own order. A name the provider doesn't offer is DROPPED (it has no\n    // CSS block here and no label to render), and an empty intersection falls\n    // back to the whole registry rather than to a hard-coded pair — falling back\n    // to literals is what could resurrect a theme the provider disallowed.\n    const narrowed = themes\n      ? themes\n          .map((name) => themeDefinitions.find((d) => d.value === name))\n          .filter((d): d is ThemeDefinition => d !== undefined)\n      : themeDefinitions;\n    const offered: readonly ThemeDefinition[] = narrowed.length > 0 ? narrowed : themeDefinitions;\n    const safeThemes: ThemeName[] = offered.map((d) => d.value);\n    const labelOf = (name: ThemeName) => offered.find((d) => d.value === name)?.label ?? name;\n    const isDark = (name: ThemeName) => offered.find((d) => d.value === name)?.dark ?? false;\n\n    // The concrete theme to DISPLAY as current: the controlled preference when\n    // it names one, otherwise the theme actually applied via the provider.\n    const resolvedTheme: ThemeName =\n      isControlled && preference !== undefined && preference !== \"system\" ? preference : theme;\n\n    // ADR 0036 — the family layout is OPT-IN: only when the offered list (not the\n    // provider's `families`, so the `themes` prop still narrows) holds two or\n    // more DECLARED families. An undeclared `[daylight, midnight]` pair keeps\n    // today's toggle byte-for-byte.\n    const families = groupThemeFamilies(offered);\n    const useFamilies = mode === \"auto\" && families.filter((f) => f.declared).length >= 2;\n    // Match by the active definition's declared family, not the retained\n    // light/dark slots: a second same-scheme variant is still reachable via\n    // `setTheme` but is not in either slot.\n    const activeDefinition = offered.find((d) => d.value === resolvedTheme);\n    const activeFamily = useFamilies\n      ? ((activeDefinition && families.find((f) => f.id === themeFamilyIdOf(activeDefinition))) ??\n        families[0])\n      : undefined;\n    // \"System\" is scoped to the active family in the family layout.\n    const scope: readonly ThemeDefinition[] = activeFamily\n      ? [activeFamily.light, activeFamily.dark].filter((d): d is ThemeDefinition => d !== undefined)\n      : offered;\n\n    // `?? theme` (the active theme), never a \"light\"/\"dark\" literal: with an open\n    // registry those names may not exist at all in this app.\n    const lightTheme: ThemeName = pickByDarkness(scope, false) ?? theme;\n    const darkTheme: ThemeName = pickByDarkness(scope, true) ?? theme;\n\n    // The scheme the user last chose, so dark → a light-only family → a\n    // two-scheme family lands on dark again (mirrors the provider's `setFamily`).\n    // Remembered together with the theme it produced: once something else changes\n    // the theme (another control calling `setTheme`), the memory no longer applies.\n    const intendedSchemeRef = useRef<{ scheme: ThemeScheme; theme: ThemeName } | undefined>(\n      undefined,\n    );\n\n    // Hydrate the \"system\" choice from localStorage and apply it on mount —\n    // uncontrolled mode only. Controlled mode's \"system\" state comes from the\n    // `preference` prop and never touches this component's own storage key.\n    useEffect(() => {\n      if (isControlled) return;\n      if (typeof window === \"undefined\") return;\n      const active = window.localStorage.getItem(SYSTEM_STORAGE_KEY) === \"1\";\n      setUncontrolledIsSystem(active);\n      if (active) setTheme(prefersDark() ? darkTheme : lightTheme);\n      // Mount-once hydration by design (mirrors the pre-#366 behavior); a\n      // component must not flip controlled/uncontrolled mid-lifecycle\n      // (.claude/rules/component-api.md), so `isControlled` cannot change here.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Keep the applied theme tracking the OS scheme while \"system\" is active —\n    // controlled or not. Depends on every value it reads (unlike the effect\n    // above) so it never captures a stale `lightTheme`/`darkTheme` once those\n    // become provider-derived (the staleness risk #384 flags).\n    useEffect(() => {\n      if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return;\n      const mql = window.matchMedia(DARK_QUERY);\n      const onChange = () => {\n        const active = isControlled\n          ? preference === \"system\"\n          : window.localStorage.getItem(SYSTEM_STORAGE_KEY) === \"1\";\n        if (active) setTheme(prefersDark() ? darkTheme : lightTheme);\n      };\n      mql.addEventListener(\"change\", onChange);\n      return () => mql.removeEventListener(\"change\", onChange);\n    }, [isControlled, preference, darkTheme, lightTheme, setTheme]);\n\n    const pickTheme = useCallback(\n      (next: ThemeName) => {\n        if (isControlled) {\n          onPreferenceChange?.(next);\n        } else {\n          setUncontrolledIsSystem(false);\n          if (typeof window !== \"undefined\") window.localStorage.setItem(SYSTEM_STORAGE_KEY, \"0\");\n        }\n        switchTheme(next);\n      },\n      [switchTheme, isControlled, onPreferenceChange],\n    );\n\n    const pickSystem = useCallback(() => {\n      if (isControlled) {\n        onPreferenceChange?.(\"system\");\n      } else {\n        setUncontrolledIsSystem(true);\n        if (typeof window !== \"undefined\") window.localStorage.setItem(SYSTEM_STORAGE_KEY, \"1\");\n      }\n      switchTheme(prefersDark() ? darkTheme : lightTheme);\n    }, [switchTheme, darkTheme, lightTheme, isControlled, onPreferenceChange]);\n\n    const TriggerIcon = isSystem ? Monitor : isDark(resolvedTheme) ? Moon : Sun;\n\n    // ---- Family layout (≥2 declared families): family group + scheme group ----\n    if (activeFamily) {\n      const activeScheme = activeDefinition;\n      const remembered = intendedSchemeRef.current;\n      const intended =\n        remembered && remembered.theme === resolvedTheme\n          ? remembered.scheme\n          : activeScheme\n            ? themeSchemeOf(activeScheme)\n            : \"light\";\n      const pickFamily = (familyId: string) => {\n        // System re-resolves against the OS immediately on a family change\n        // instead of waiting for the next `change` event.\n        const scheme: ThemeScheme = isSystem ? (prefersDark() ? \"dark\" : \"light\") : intended;\n        const next = resolveThemeVariant(families, familyId, scheme);\n        if (next === undefined) return;\n        intendedSchemeRef.current = { scheme: intended, theme: next };\n        if (isSystem) switchTheme(next);\n        else pickTheme(next);\n      };\n      const pickScheme = (value: string) => {\n        if (value === \"system\") {\n          pickSystem();\n          return;\n        }\n        const scheme = value as ThemeScheme;\n        const next = activeFamily[scheme]?.value;\n        if (next === undefined) return;\n        intendedSchemeRef.current = { scheme, theme: next };\n        pickTheme(next);\n      };\n      const schemeValue = isSystem ? \"system\" : activeScheme ? themeSchemeOf(activeScheme) : \"\";\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              ref={ref}\n              variant={variant ?? \"outline\"}\n              size={ICON_SIZE[size]}\n              aria-label={t(\"ui.themeSwitcher.theme\")}\n              className={className}\n              {...props}\n            >\n              <TriggerIcon />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>{t(\"ui.themeSwitcher.theme\")}</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={activeFamily.id} onValueChange={pickFamily}>\n              {families.map((f) => (\n                <DropdownMenuRadioItem key={f.id} value={f.id}>\n                  {f.label}\n                </DropdownMenuRadioItem>\n              ))}\n            </DropdownMenuRadioGroup>\n            {activeFamily.schemes.length === 2 ? (\n              <>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>{t(\"ui.themeSwitcher.mode\")}</DropdownMenuLabel>\n                <DropdownMenuRadioGroup value={schemeValue} onValueChange={pickScheme}>\n                  <DropdownMenuRadioItem value=\"light\">\n                    <Sun aria-hidden=\"true\" />\n                    {t(\"ui.themeSwitcher.light\")}\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"dark\">\n                    <Moon aria-hidden=\"true\" />\n                    {t(\"ui.themeSwitcher.dark\")}\n                  </DropdownMenuRadioItem>\n                  {showSystem ? (\n                    <DropdownMenuRadioItem value=\"system\">\n                      <Monitor aria-hidden=\"true\" />\n                      {t(\"ui.themeSwitcher.system\")}\n                    </DropdownMenuRadioItem>\n                  ) : null}\n                </DropdownMenuRadioGroup>\n              </>\n            ) : null}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      );\n    }\n\n    const useDropdown = mode === \"dropdown\" || (mode === \"auto\" && safeThemes.length > 2);\n\n    // ---- Dropdown mode (>2 themes) ----\n    if (useDropdown) {\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              ref={ref}\n              variant={variant ?? \"outline\"}\n              size={ICON_SIZE[size]}\n              aria-label={t(\"ui.themeSwitcher.theme\")}\n              className={className}\n              {...props}\n            >\n              <TriggerIcon />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {showSystem ? (\n              <DropdownMenuItem onSelect={() => pickSystem()}>\n                <Monitor />\n                <span>{t(\"ui.themeSwitcher.system\")}</span>\n                {isSystem ? <Check className=\"ms-auto\" /> : null}\n              </DropdownMenuItem>\n            ) : null}\n            {offered.map((d) => (\n              <DropdownMenuItem key={d.value} onSelect={() => pickTheme(d.value)}>\n                {d.dark ? <Moon /> : <Sun />}\n                <span>{d.label}</span>\n                {!isSystem && resolvedTheme === d.value ? <Check className=\"ms-auto\" /> : null}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      );\n    }\n\n    // ---- Toggle mode (≤2 themes): cycle light → dark → (system) ----\n    // These three are ROLES in the cycle, not theme names — `lightTheme` and\n    // `darkTheme` resolve each role to whatever this app actually registered.\n    const order: Array<\"light\" | \"dark\" | \"system\"> = showSystem\n      ? [\"light\", \"dark\", \"system\"]\n      : [\"light\", \"dark\"];\n    const current: \"light\" | \"dark\" | \"system\" = isSystem\n      ? \"system\"\n      : resolvedTheme === darkTheme\n        ? \"dark\"\n        : \"light\";\n    const next = order[(order.indexOf(current) + 1) % order.length];\n    const apply = () => {\n      if (next === \"system\") pickSystem();\n      else pickTheme(next === \"dark\" ? darkTheme : lightTheme);\n    };\n\n    // Announce the THEME'S OWN label, not the role: an app whose themes are\n    // \"Daylight\"/\"Midnight\" would otherwise announce \"Theme: light\" — naming a\n    // theme that does not exist in that app.\n    // `role` is optional only because `order[i]` is an indexed read under\n    // `noUncheckedIndexedAccess`; the modulo above makes it always present.\n    const roleLabel = (role: \"light\" | \"dark\" | \"system\" | undefined) =>\n      role === \"system\"\n        ? t(\"ui.themeSwitcher.system\")\n        : labelOf(role === \"dark\" ? darkTheme : lightTheme);\n\n    return (\n      <TooltipProvider>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              ref={ref}\n              variant={variant ?? \"ghost\"}\n              size={ICON_SIZE[size]}\n              aria-label={`Theme: ${roleLabel(current)}. Activate to switch to ${roleLabel(next)}.`}\n              onClick={apply}\n              className={className}\n              {...props}\n            >\n              <TriggerIcon />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>{roleLabel(current)}</TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    );\n  },\n);\n"],"mappings":"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","names":["ThemeSwitcher","next"]}

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-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-ON2E7XHD.js

@@ -0,0 +1,51 @@
+"use client";
+
+// src/lib/diff-rows.ts
+import { useCallback, useMemo, useState } from "react";
+function collapseDiffRows(lines, contextLines, expanded = /* @__PURE__ */ new Set()) {
+  if (!contextLines || contextLines <= 0) {
+    return lines.map((line, index) => ({ kind: "line", line, index }));
+  }
+  const out = [];
+  let i = 0;
+  while (i < lines.length) {
+    if (lines[i]?.type !== "context") {
+      out.push({ kind: "line", line: lines[i], index: i });
+      i++;
+      continue;
+    }
+    const runStart = i;
+    let j = i;
+    while (j < lines.length && lines[j]?.type === "context") j++;
+    const runLength = j - runStart;
+    if (runLength <= contextLines || expanded.has(runStart)) {
+      for (let k = runStart; k < j; k++) out.push({ kind: "line", line: lines[k], index: k });
+    } else {
+      const top = Math.ceil(contextLines / 2);
+      const bottom = Math.floor(contextLines / 2);
+      for (let k = runStart; k < runStart + top; k++)
+        out.push({ kind: "line", line: lines[k], index: k });
+      out.push({ kind: "collapsed", runStart, hiddenCount: runLength - top - bottom });
+      for (let k = j - bottom; k < j; k++) out.push({ kind: "line", line: lines[k], index: k });
+    }
+    i = j;
+  }
+  return out;
+}
+function useDiffRows(lines, contextLines) {
+  const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+  const rows = useMemo(
+    () => collapseDiffRows(lines, contextLines, expanded),
+    [lines, contextLines, expanded]
+  );
+  const expand = useCallback((runStart) => {
+    setExpanded((prev) => new Set(prev).add(runStart));
+  }, []);
+  return { rows, expand };
+}
+
+export {
+  collapseDiffRows,
+  useDiffRows
+};
+//# sourceMappingURL=chunk-ON2E7XHD.js.map

package/dist/chunk-ON2E7XHD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/diff-rows.ts"],"sourcesContent":["\"use client\";\n\n/**\n * The context-run-collapsing hunk-windowing algorithm behind `DiffView`\n * (`@elabs-ai/components-ai`, #102, where it shipped as the private\n * `useVisibleRows`) and the terminal CLI look-alike family's own diff hunk\n * (issue #117).\n *\n * Promoted here (not duplicated) because `@elabs-ai/components-ai` and\n * `@elabs-ai/components-terminal` are layer-2 DAG SIBLINGS and may not import\n * each other — `ui` is upstream of both\n * (docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4). The\n * windowing algorithm is shiki-free and DOM-free; `ui` already hosts hooks\n * (`use-mobile`, `use-copy-to-clipboard`), so a hook alongside a pure\n * function is an ordinary shape here, not a new category.\n */\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { DiffLine } from \"./diff-line\";\n\n/**\n * One rendered row: either a real diff line, or a collapsed run of\n * consecutive `context` lines longer than the caller's `contextLines`.\n */\nexport type DiffRow =\n  | { kind: \"line\"; line: DiffLine; index: number }\n  | { kind: \"collapsed\"; runStart: number; hiddenCount: number };\n\n/**\n * Collapse long runs of consecutive `context` lines behind a single\n * `\"collapsed\"` row, keeping `Math.ceil(contextLines / 2)` lines of context\n * at the top of the run and `Math.floor(contextLines / 2)` at the bottom —\n * so a reader always sees context on both sides of a hidden gap. A run\n * already in `expanded` (by its start index) renders in full instead.\n *\n * Pure: no state, no effect. `useDiffRows` below is the stateful wrapper\n * that owns the `expanded` set for a component.\n */\nexport function collapseDiffRows(\n  lines: DiffLine[],\n  contextLines: number | undefined,\n  expanded: ReadonlySet<number> = new Set(),\n): DiffRow[] {\n  if (!contextLines || contextLines <= 0) {\n    return lines.map((line, index) => ({ kind: \"line\", line, index }));\n  }\n  const out: DiffRow[] = [];\n  let i = 0;\n  while (i < lines.length) {\n    if (lines[i]?.type !== \"context\") {\n      out.push({ kind: \"line\", line: lines[i]!, index: i });\n      i++;\n      continue;\n    }\n    const runStart = i;\n    let j = i;\n    while (j < lines.length && lines[j]?.type === \"context\") j++;\n    const runLength = j - runStart;\n    if (runLength <= contextLines || expanded.has(runStart)) {\n      for (let k = runStart; k < j; k++) out.push({ kind: \"line\", line: lines[k]!, index: k });\n    } else {\n      const top = Math.ceil(contextLines / 2);\n      const bottom = Math.floor(contextLines / 2);\n      for (let k = runStart; k < runStart + top; k++)\n        out.push({ kind: \"line\", line: lines[k]!, index: k });\n      out.push({ kind: \"collapsed\", runStart, hiddenCount: runLength - top - bottom });\n      for (let k = j - bottom; k < j; k++) out.push({ kind: \"line\", line: lines[k]!, index: k });\n    }\n    i = j;\n  }\n  return out;\n}\n\n/**\n * Stateful wrapper around `collapseDiffRows`: owns the set of run-start\n * indices a caller has expanded via the \"show more\" control, and returns the\n * current row list alongside an `expand` action.\n */\nexport function useDiffRows(\n  lines: DiffLine[],\n  contextLines: number | undefined,\n): { rows: DiffRow[]; expand: (runStart: number) => void } {\n  const [expanded, setExpanded] = useState<ReadonlySet<number>>(new Set());\n\n  const rows = useMemo(\n    () => collapseDiffRows(lines, contextLines, expanded),\n    [lines, contextLines, expanded],\n  );\n\n  const expand = useCallback((runStart: number) => {\n    setExpanded((prev) => new Set(prev).add(runStart));\n  }, []);\n\n  return { rows, expand };\n}\n"],"mappings":";;;AAgBA,SAAS,aAAa,SAAS,gBAAgB;AAqBxC,SAAS,iBACd,OACA,cACA,WAAgC,oBAAI,IAAI,GAC7B;AACX,MAAI,CAAC,gBAAgB,gBAAgB,GAAG;AACtC,WAAO,MAAM,IAAI,CAAC,MAAM,WAAW,EAAE,MAAM,QAAQ,MAAM,MAAM,EAAE;AAAA,EACnE;AACA,QAAM,MAAiB,CAAC;AACxB,MAAI,IAAI;AACR,SAAO,IAAI,MAAM,QAAQ;AACvB,QAAI,MAAM,CAAC,GAAG,SAAS,WAAW;AAChC,UAAI,KAAK,EAAE,MAAM,QAAQ,MAAM,MAAM,CAAC,GAAI,OAAO,EAAE,CAAC;AACpD;AACA;AAAA,IACF;AACA,UAAM,WAAW;AACjB,QAAI,IAAI;AACR,WAAO,IAAI,MAAM,UAAU,MAAM,CAAC,GAAG,SAAS,UAAW;AACzD,UAAM,YAAY,IAAI;AACtB,QAAI,aAAa,gBAAgB,SAAS,IAAI,QAAQ,GAAG;AACvD,eAAS,IAAI,UAAU,IAAI,GAAG,IAAK,KAAI,KAAK,EAAE,MAAM,QAAQ,MAAM,MAAM,CAAC,GAAI,OAAO,EAAE,CAAC;AAAA,IACzF,OAAO;AACL,YAAM,MAAM,KAAK,KAAK,eAAe,CAAC;AACtC,YAAM,SAAS,KAAK,MAAM,eAAe,CAAC;AAC1C,eAAS,IAAI,UAAU,IAAI,WAAW,KAAK;AACzC,YAAI,KAAK,EAAE,MAAM,QAAQ,MAAM,MAAM,CAAC,GAAI,OAAO,EAAE,CAAC;AACtD,UAAI,KAAK,EAAE,MAAM,aAAa,UAAU,aAAa,YAAY,MAAM,OAAO,CAAC;AAC/E,eAAS,IAAI,IAAI,QAAQ,IAAI,GAAG,IAAK,KAAI,KAAK,EAAE,MAAM,QAAQ,MAAM,MAAM,CAAC,GAAI,OAAO,EAAE,CAAC;AAAA,IAC3F;AACA,QAAI;AAAA,EACN;AACA,SAAO;AACT;AAOO,SAAS,YACd,OACA,cACyD;AACzD,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,oBAAI,IAAI,CAAC;AAEvE,QAAM,OAAO;AAAA,IACX,MAAM,iBAAiB,OAAO,cAAc,QAAQ;AAAA,IACpD,CAAC,OAAO,cAAc,QAAQ;AAAA,EAChC;AAEA,QAAM,SAAS,YAAY,CAAC,aAAqB;AAC/C,gBAAY,CAAC,SAAS,IAAI,IAAI,IAAI,EAAE,IAAI,QAAQ,CAAC;AAAA,EACnD,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,MAAM,OAAO;AACxB;","names":[]}