gridsmith-ui 0.15.0 → 0.16.0

package/dist/resizable.d.ts

@@ -54,6 +54,16 @@ interface SplitViewProps {
     onDetailClose?: () => void;
     /** "stack" (default): the detail stacks over the list below the collapse width. "route": the app navigates to the detail's own route instead, and this renders the list alone there. */
     detailMode?: "stack" | "route";
+    /**
+     * "shown" (default): above the collapse width the detail pane is always there — an inbox's reading pane may show a
+     * placeholder. "hidden" (Sprint 25.7, C3): `detailOpen` decides at every width. Closed, the list takes the whole
+     * width; open, the pane appears beside it at the width the user last gave it, with a close control that calls
+     * `onDetailClose`. For boards, timelines and lists of records. The list stays mounted, so a board or a timeline keeps
+     * its scroll and zoom.
+     */
+    closedDetail?: "shown" | "hidden";
+    /** The open pane's close control, named for a screen reader (closedDetail="hidden"). Default "Close". */
+    closeLabel?: string;
     backLabel?: string;
     /** Percent of the width the list takes; the divider is draggable. */
     listWidth?: number;
@@ -80,6 +90,6 @@ interface SplitViewProps {
  * The page owns the selection and assembles the contents; keyboard movement
  * through the list is the list's job (StackedList selectedId).
  */
-declare function SplitView({ list, detail, aside, asideTitle, detailOpen, onDetailClose, detailMode, backLabel, listWidth, listMinWidth, asideWidth, collapseBelow, asideCollapseBelow, bordered, frame, "aria-label": ariaLabel, className, }: SplitViewProps): react_jsx_runtime.JSX.Element;
+declare function SplitView({ list, detail, aside, asideTitle, detailOpen, onDetailClose, detailMode, closedDetail, closeLabel, backLabel, listWidth, listMinWidth, asideWidth, collapseBelow, asideCollapseBelow, bordered, frame, "aria-label": ariaLabel, className, }: SplitViewProps): react_jsx_runtime.JSX.Element;
 
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup, SplitView, type SplitViewFrame, type SplitViewProps };

package/dist/resizable.js

@@ -1,14 +1,14 @@
-import { useCompact, useAppShell, Button, Drawer } from './chunk-ATONRIEB.js';
-import './chunk-VFAKME7Q.js';
+import { useCompact, useAppShell, Button, Drawer } from './chunk-2U2X6E2X.js';
+import { isTabStop, tabStops, rememberFocus } from './chunk-5XOJZQIP.js';
 import { SplitPaneCtx } from './chunk-TKVTZWBN.js';
 import { useBreakpoint } from './chunk-CRQ6KCRD.js';
 import './chunk-EMCSARQO.js';
 import './chunk-7Q46JXSK.js';
 import './chunk-WH2FUFAC.js';
-import { Icon } from './chunk-X4CNZFWC.js';
+import { Icon } from './chunk-4LDYR7QP.js';
 import { cn } from './chunk-4KVFH5KC.js';
 import { Group, Panel, Separator } from 'react-resizable-panels';
-import { createContext, useContext, useRef, useState } from 'react';
+import { createContext, useContext, useRef, useState, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DirectionCtx = createContext("horizontal");
@@ -97,6 +97,8 @@ function SplitView({
   detailOpen = false,
   onDetailClose,
   detailMode = "stack",
+  closedDetail = "shown",
+  closeLabel = "Close",
   backLabel = "Back",
   listWidth = 35,
   listMinWidth = 25,
@@ -112,6 +114,9 @@ function SplitView({
   const compact = useCompact(rootRef, collapseBelow);
   const asideCollapsed = useCompact(rootRef, asideCollapseBelow);
   const [asideWantsOpen, setAsideWantsOpen] = useState(false);
+  const hiding = closedDetail === "hidden";
+  const showAside = !!aside && (!hiding || detailOpen);
+  if (hiding && !detailOpen && asideWantsOpen) setAsideWantsOpen(false);
   const asideOpen = asideCollapsed && asideWantsOpen;
   const region = ariaLabel ? { role: "region", "aria-label": ariaLabel } : {};
   const isFill = frame === "fill";
@@ -123,28 +128,81 @@ function SplitView({
     bordered && !isFill && "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] overflow-hidden",
     className
   );
+  const [listPct, setListPct] = useState(listWidth);
+  const paneRef = useRef(null);
+  const shown = useRef(null);
+  const lastInList = useRef(null);
+  const wasOpen = useRef(false);
+  useLayoutEffect(() => {
+    if (!hiding) return;
+    const listPane = rootRef.current?.querySelector('[data-pane="list"]') ?? null;
+    if (detailOpen) {
+      wasOpen.current = true;
+      const selected = listPane?.querySelector('[aria-current="true"], [aria-selected="true"]');
+      const last = lastInList.current;
+      const item = selected && (isTabStop(selected) ? selected : tabStops(selected)[0]) || (last?.isConnected && listPane?.contains(last) ? last : null);
+      if (item && item !== shown.current?.el) shown.current = rememberFocus(item, { ignoreRoute: true });
+      return;
+    }
+    if (!wasOpen.current) return;
+    wasOpen.current = false;
+    const r = shown.current;
+    shown.current = null;
+    const active = document.activeElement;
+    if (active && active !== document.body && active.isConnected) return;
+    const first = listPane ? tabStops(listPane)[0] : void 0;
+    if (!r?.restore(first)) first?.focus();
+  });
+  const onPaneKeyDown = (e) => {
+    if (e.key !== "Escape" || e.defaultPrevented || !onDetailClose) return;
+    const t = e.target;
+    if (!paneRef.current?.contains(t) || t.closest("input, textarea, select, [contenteditable='true']")) return;
+    e.preventDefault();
+    onDetailClose();
+  };
   if (compact) {
-    const showDetail = detailMode === "stack" && detailOpen;
-    return /* @__PURE__ */ jsx("div", { ref: rootRef, "data-split-view": showDetail ? "detail" : "list", "data-frame": frame, ...region, className: cn(surface, "flex flex-col"), style: fillStyle, children: showDetail ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    const showDetail2 = detailMode === "stack" && detailOpen;
+    return /* @__PURE__ */ jsx("div", { ref: rootRef, "data-split-view": showDetail2 ? "detail" : "list", "data-frame": frame, ...region, className: cn(surface, "flex flex-col"), style: fillStyle, children: showDetail2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "shrink-0 px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "arrow-left", size: 14 }), onClick: onDetailClose, children: backLabel }) }),
       /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(SplitPaneCtx, { value: true, children: detail }) })
     ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(SplitPaneCtx, { value: true, children: list }) }) });
   }
-  const asideToggle = aside && asideCollapsed ? /* @__PURE__ */ jsx("div", { className: "shrink-0 flex justify-end px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "info", size: 14 }), onClick: () => setAsideWantsOpen(true), "aria-expanded": asideOpen, children: asideTitle }) }) : null;
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-split-view": "split", "data-frame": frame, ...region, className: surface, style: fillStyle, children: [
-    /* @__PURE__ */ jsxs(ResizablePanelGroup, { direction: "horizontal", stackOnMobile: false, className: "h-full", children: [
-      /* @__PURE__ */ jsx(ResizablePanel, { id: "list", defaultSize: `${listWidth}%`, minSize: `${listMinWidth}%`, children: /* @__PURE__ */ jsx("div", { "data-pane": "list", className: "h-full min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(SplitPaneCtx, { value: true, children: list }) }) }),
-      /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
-      /* @__PURE__ */ jsx(ResizablePanel, { id: "detail", minSize: "30%", children: /* @__PURE__ */ jsxs("div", { "data-pane": "detail", className: "h-full min-h-0 flex flex-col", children: [
-        asideToggle,
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(SplitPaneCtx, { value: true, children: detail }) })
-      ] }) }),
-      aside && !asideCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
-        /* @__PURE__ */ jsx(ResizablePanel, { id: "aside", defaultSize: `${asideWidth}%`, minSize: "15%", children: /* @__PURE__ */ jsx("div", { "data-pane": "aside", className: "h-full min-h-0 overflow-y-auto p-ds-4", children: /* @__PURE__ */ jsx(SplitPaneCtx, { value: true, children: aside }) }) })
-      ] })
-    ] }),
-    aside && asideCollapsed && /* @__PURE__ */ jsx(Drawer, { open: asideOpen, onClose: () => setAsideWantsOpen(false), title: asideTitle, position: "right", children: aside })
+  const asideButton = showAside && asideCollapsed ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "info", size: 14 }), onClick: () => setAsideWantsOpen(true), "aria-expanded": asideOpen, children: asideTitle }) : null;
+  const closeButton = hiding && onDetailClose ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": closeLabel, onClick: onDetailClose, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) }) : null;
+  const paneBar = asideButton || closeButton ? /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center justify-end gap-ds-1 px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: [
+    asideButton,
+    closeButton
+  ] }) : null;
+  const showDetail = !hiding || detailOpen;
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-split-view": hiding && !detailOpen ? "list" : "split", "data-frame": frame, ...region, className: surface, style: fillStyle, children: [
+    /* @__PURE__ */ jsxs(
+      ResizablePanelGroup,
+      {
+        direction: "horizontal",
+        stackOnMobile: false,
+        className: "h-full",
+        onLayoutChanged: hiding ? (layout) => {
+          if (layout.detail != null && layout.list != null) setListPct(layout.list);
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsx(ResizablePanel, { id: "list", defaultSize: `${hiding ? detailOpen ? listPct : 100 : listWidth}%`, minSize: `${listMinWidth}%`, children: /* @__PURE__ */ jsx("div", { "data-pane": "list", className: "h-full min-h-0 overflow-y-auto", onFocus: hiding ? (e) => {
+            lastInList.current = e.target;
+          } : void 0, children: /* @__PURE__ */ jsx(SplitPaneCtx, { value: true, children: list }) }) }),
+          showDetail && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+            /* @__PURE__ */ jsx(ResizablePanel, { id: "detail", minSize: "30%", children: /* @__PURE__ */ jsxs("div", { ref: paneRef, "data-pane": "detail", className: "h-full min-h-0 flex flex-col", onKeyDown: hiding ? onPaneKeyDown : void 0, children: [
+              paneBar,
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx(SplitPaneCtx, { value: true, children: detail }) })
+            ] }) })
+          ] }),
+          showAside && !asideCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+            /* @__PURE__ */ jsx(ResizablePanel, { id: "aside", defaultSize: `${asideWidth}%`, minSize: "15%", children: /* @__PURE__ */ jsx("div", { "data-pane": "aside", className: "h-full min-h-0 overflow-y-auto p-ds-4", children: /* @__PURE__ */ jsx(SplitPaneCtx, { value: true, children: aside }) }) })
+          ] })
+        ]
+      }
+    ),
+    showAside && asideCollapsed && /* @__PURE__ */ jsx(Drawer, { open: asideOpen, onClose: () => setAsideWantsOpen(false), title: asideTitle, position: "right", children: aside })
   ] });
 }
 

package/dist/resizable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../showcase/src/components/ResizablePanels.tsx","../../../showcase/src/components/SplitView.tsx"],"names":["PanelGroup","PanelResizeHandle","jsx"],"mappings":"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","file":"resizable.js","sourcesContent":["import {\n  Panel,\n  Group as PanelGroup,\n  Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\nimport { createContext, useContext, type ComponentProps } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useBreakpoint } from \"../lib/use-breakpoint\";\nimport { Icon } from \"../lib/icons\";\n\ntype PanelGroupProps = ComponentProps<typeof PanelGroup>;\n\ntype Direction = \"horizontal\" | \"vertical\";\nconst DirectionCtx = createContext<Direction>(\"horizontal\");\nconst MobileCtx = createContext(false);\n\nexport interface ResizablePanelGroupProps\n  extends Omit<PanelGroupProps, \"className\" | \"orientation\"> {\n  direction?: Direction;\n  stackOnMobile?: boolean;\n  className?: string;\n  /** Map of panel id → percentage (0–100). Must be an object, never an array. Panels need matching id props. */\n  defaultLayout?: { [panelId: string]: number };\n  /** Called after resize ends. Receives { [panelId]: number }, not number[]. */\n  onLayoutChanged?: (layout: { [panelId: string]: number }) => void;\n}\n\nexport function ResizablePanelGroup({\n  className,\n  direction = \"horizontal\",\n  stackOnMobile = true,\n  ...props\n}: ResizablePanelGroupProps) {\n  const isMobile = useBreakpoint(\"sm\");\n  const shouldStack = stackOnMobile && isMobile && direction === \"horizontal\";\n  const effectiveDirection = shouldStack ? \"vertical\" : direction;\n\n  return (\n    <DirectionCtx.Provider value={effectiveDirection}>\n      <MobileCtx.Provider value={isMobile}>\n        <PanelGroup\n          className={cn(\n            \"flex h-full w-full\",\n            effectiveDirection === \"vertical\" && \"flex-col\",\n            className,\n          )}\n          orientation={effectiveDirection}\n          {...props}\n        />\n      </MobileCtx.Provider>\n    </DirectionCtx.Provider>\n  );\n}\n\ntype PanelProps = ComponentProps<typeof Panel>;\n\nexport interface ResizablePanelProps extends Omit<PanelProps, \"className\"> {\n  className?: string;\n  id?: string;\n  /** number = px. \"30%\" or \"30\" = percent. \"28rem\" / \"400px\" also valid. */\n  defaultSize?: number | string;\n  minSize?: number | string;\n  maxSize?: number | string;\n  collapsible?: boolean;\n}\n\nexport function ResizablePanel({ className, ...props }: ResizablePanelProps) {\n  return <Panel className={cn(\"\", className)} {...props} />;\n}\n\ntype PanelResizeHandleProps = ComponentProps<typeof PanelResizeHandle>;\n\nexport interface ResizableHandleProps\n  extends Omit<PanelResizeHandleProps, \"className\"> {\n  withHandle?: boolean;\n  className?: string;\n}\n\nexport function ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizableHandleProps) {\n  const direction = useContext(DirectionCtx);\n  const isMobile = useContext(MobileCtx);\n  const isVertical = direction === \"vertical\";\n\n  return (\n    <PanelResizeHandle\n      className={cn(\n        \"relative flex items-center justify-center bg-[var(--ds-border-default)]\",\n        isVertical\n          ? cn(\n              \"h-[var(--ds-border-width)] w-full after:absolute after:left-0 after:right-0 after:content-['']\",\n              isMobile ? \"after:-top-3 after:-bottom-3\" : \"after:-top-1 after:-bottom-1\"\n            )\n          : cn(\n              \"w-[var(--ds-border-width)] after:absolute after:inset-y-0 after:content-['']\",\n              isMobile ? \"after:-left-3 after:-right-3\" : \"after:-left-1 after:-right-1\"\n            ),\n        \"focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]\",\n        \"[&[data-resize-handle-state=drag]]:bg-[var(--ds-accent-primary)]\",\n        \"[&[data-resize-handle-state=hover]]:bg-[var(--ds-accent-primary)]\",\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div\n          className={cn(\n            \"z-10 flex items-center justify-center rounded-[var(--ds-radius-sm)]\",\n            \"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n            \"bg-[var(--ds-bg-surface)]\",\n            isVertical\n              ? (isMobile ? \"h-4 w-8\" : \"h-3 w-4\")\n              : (isMobile ? \"h-8 w-4\" : \"h-4 w-3\"),\n          )}\n        >\n          <Icon\n            name=\"grip-vertical\"\n            size={isMobile ? 12 : 10}\n            className={cn(\n              \"text-[var(--ds-text-muted)]\",\n              isVertical && \"rotate-90\",\n            )}\n          />\n        </div>\n      )}\n    </PanelResizeHandle>\n  );\n}\n","import { useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useCompact } from \"../lib/use-compact\";\nimport { ResizablePanelGroup, ResizablePanel, ResizableHandle } from \"./ResizablePanels\";\nimport { Button } from \"./Button\";\nimport { Drawer } from \"./Drawer\";\nimport { Icon } from \"../lib/icons\";\nimport { useAppShell } from \"./AppShell\";\nimport { SplitPaneCtx } from \"../lib/surface-context\";\n\nexport type SplitViewFrame = \"fill\" | \"page\";\n\nexport interface SplitViewProps {\n  /** The list (an inbox, a queue): it scrolls on its own. */\n  list: ReactNode;\n  /** The selected item (a thread, a record): it fills the height and scrolls on its own. */\n  detail: ReactNode;\n  /** Context beside the detail (a contact, properties). The pane pads it (16 px, like the Drawer it collapses into), so pass content with no padding classes (round 8). Collapses to a toggle that opens it in a Drawer when the layout is narrower than `asideCollapseBelow`. */\n  aside?: ReactNode;\n  /** Names the aside's toggle and Drawer. */\n  asideTitle?: string;\n  /**\n   * Below `collapseBelow` the list shows alone; with `detailOpen` the detail replaces it, with a Back button that calls\n   * `onDetailClose` (detailMode \"stack\"). The page owns the selection, so it owns this flag.\n   */\n  detailOpen?: boolean;\n  onDetailClose?: () => void;\n  /** \"stack\" (default): the detail stacks over the list below the collapse width. \"route\": the app navigates to the detail's own route instead, and this renders the list alone there. */\n  detailMode?: \"stack\" | \"route\";\n  backLabel?: string;\n  /** Percent of the width the list takes; the divider is draggable. */\n  listWidth?: number;\n  listMinWidth?: number;\n  asideWidth?: number;\n  /** Below this width of the layout itself (px) the list and detail stop sitting side by side. */\n  collapseBelow?: number;\n  /** Below this width of the layout itself (px) the aside becomes a toggle. */\n  asideCollapseBelow?: number;\n  /** A bordered, rounded surface (inside a page with padding) instead of edge to edge (filling <main>). */\n  bordered?: boolean;\n  /** \"fill\": the page root, flush to the shell, h-full against main, each pane owns its inset. \"page\" (default): inside a PageContainer under a PageHeader. */\n  frame?: SplitViewFrame;\n  \"aria-label\"?: string;\n  className?: string;\n}\n\n/**\n * The reading-pane composition (Sprint 25.2, R3): one surface with dividers —\n * list, detail and an optional aside — that fills the height it is given (an\n * AppShell's <main> already gives it) and never three cards with gaps. The\n * panels compose ResizablePanelGroup, so the dividers drag. Below the collapse\n * width, measured on the layout itself, the list shows alone and the detail\n * stacks over it (or the app routes to it); the aside collapses to a toggle.\n * The page owns the selection and assembles the contents; keyboard movement\n * through the list is the list's job (StackedList selectedId).\n */\nexport function SplitView({\n  list,\n  detail,\n  aside,\n  asideTitle = \"Details\",\n  detailOpen = false,\n  onDetailClose,\n  detailMode = \"stack\",\n  backLabel = \"Back\",\n  listWidth = 35,\n  listMinWidth = 25,\n  asideWidth = 25,\n  collapseBelow = 768,\n  asideCollapseBelow = 1024,\n  bordered = false,\n  frame = \"page\",\n  \"aria-label\": ariaLabel,\n  className,\n}: SplitViewProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const compact = useCompact(rootRef, collapseBelow);\n  const asideCollapsed = useCompact(rootRef, asideCollapseBelow);\n  const [asideWantsOpen, setAsideWantsOpen] = useState(false);\n  const asideOpen = asideCollapsed && asideWantsOpen;\n  const region = ariaLabel ? { role: \"region\" as const, \"aria-label\": ariaLabel } : {};\n  // fill: the page root, flush to the shell on every side (no border, no radius, no padding of its own); h-full\n  // resolves against <main> because the shell is a flex column down to it. page: inside a PageContainer under a\n  // PageHeader, where `bordered` draws the surface. Each pane owns its own inset either way.\n  const isFill = frame === \"fill\";\n  // In a shell with an app footer the children wrapper has no definite height, so h-full cannot resolve; the shell\n  // publishes main's height and fill takes it (the footer then sits below the fold, as it must under a full pane).\n  const shell = useAppShell();\n  const fillStyle = isFill && shell?.hasFooter ? { height: \"var(--ds-main-height, 100%)\" } : undefined;\n  const surface = cn(\n    \"h-full min-h-0 w-full bg-[var(--ds-bg-surface)]\",\n    isFill && \"rounded-none border-0\",\n    bordered && !isFill && \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] overflow-hidden\",\n    className,\n  );\n\n  if (compact) {\n    const showDetail = detailMode === \"stack\" && detailOpen;\n    return (\n      <div ref={rootRef} data-split-view={showDetail ? \"detail\" : \"list\"} data-frame={frame} {...region} className={cn(surface, \"flex flex-col\")} style={fillStyle}>\n        {showDetail ? (\n          <>\n            <div className=\"shrink-0 px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\">\n              <Button variant=\"ghost\" size=\"sm\" iconLeft={<Icon name=\"arrow-left\" size={14} />} onClick={onDetailClose}>{backLabel}</Button>\n            </div>\n            <div className=\"flex-1 min-h-0 overflow-y-auto\"><SplitPaneCtx value={true}>{detail}</SplitPaneCtx></div>\n          </>\n        ) : (\n          <div className=\"flex-1 min-h-0 overflow-y-auto\"><SplitPaneCtx value={true}>{list}</SplitPaneCtx></div>\n        )}\n      </div>\n    );\n  }\n\n  const asideToggle = aside && asideCollapsed ? (\n    <div className=\"shrink-0 flex justify-end px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\">\n      <Button variant=\"ghost\" size=\"sm\" iconLeft={<Icon name=\"info\" size={14} />} onClick={() => setAsideWantsOpen(true)} aria-expanded={asideOpen}>{asideTitle}</Button>\n    </div>\n  ) : null;\n\n  return (\n    <div ref={rootRef} data-split-view=\"split\" data-frame={frame} {...region} className={surface} style={fillStyle}>\n      <ResizablePanelGroup direction=\"horizontal\" stackOnMobile={false} className=\"h-full\">\n        <ResizablePanel id=\"list\" defaultSize={`${listWidth}%`} minSize={`${listMinWidth}%`}>\n          <div data-pane=\"list\" className=\"h-full min-h-0 overflow-y-auto\"><SplitPaneCtx value={true}>{list}</SplitPaneCtx></div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel id=\"detail\" minSize=\"30%\">\n          <div data-pane=\"detail\" className=\"h-full min-h-0 flex flex-col\">\n            {asideToggle}\n            <div className=\"flex-1 min-h-0 overflow-y-auto\"><SplitPaneCtx value={true}>{detail}</SplitPaneCtx></div>\n          </div>\n        </ResizablePanel>\n        {aside && !asideCollapsed && (\n          <>\n            <ResizableHandle withHandle />\n            <ResizablePanel id=\"aside\" defaultSize={`${asideWidth}%`} minSize=\"15%\">\n              <div data-pane=\"aside\" className=\"h-full min-h-0 overflow-y-auto p-ds-4\"><SplitPaneCtx value={true}>{aside}</SplitPaneCtx></div>\n            </ResizablePanel>\n          </>\n        )}\n      </ResizablePanelGroup>\n      {aside && asideCollapsed && (\n        <Drawer open={asideOpen} onClose={() => setAsideWantsOpen(false)} title={asideTitle} position=\"right\">\n          {aside}\n        </Drawer>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../../../showcase/src/components/ResizablePanels.tsx","../../../showcase/src/components/SplitView.tsx"],"names":["PanelGroup","PanelResizeHandle","showDetail","jsx"],"mappings":"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","file":"resizable.js","sourcesContent":["import {\n  Panel,\n  Group as PanelGroup,\n  Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\nimport { createContext, useContext, type ComponentProps } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useBreakpoint } from \"../lib/use-breakpoint\";\nimport { Icon } from \"../lib/icons\";\n\ntype PanelGroupProps = ComponentProps<typeof PanelGroup>;\n\ntype Direction = \"horizontal\" | \"vertical\";\nconst DirectionCtx = createContext<Direction>(\"horizontal\");\nconst MobileCtx = createContext(false);\n\nexport interface ResizablePanelGroupProps\n  extends Omit<PanelGroupProps, \"className\" | \"orientation\"> {\n  direction?: Direction;\n  stackOnMobile?: boolean;\n  className?: string;\n  /** Map of panel id → percentage (0–100). Must be an object, never an array. Panels need matching id props. */\n  defaultLayout?: { [panelId: string]: number };\n  /** Called after resize ends. Receives { [panelId]: number }, not number[]. */\n  onLayoutChanged?: (layout: { [panelId: string]: number }) => void;\n}\n\nexport function ResizablePanelGroup({\n  className,\n  direction = \"horizontal\",\n  stackOnMobile = true,\n  ...props\n}: ResizablePanelGroupProps) {\n  const isMobile = useBreakpoint(\"sm\");\n  const shouldStack = stackOnMobile && isMobile && direction === \"horizontal\";\n  const effectiveDirection = shouldStack ? \"vertical\" : direction;\n\n  return (\n    <DirectionCtx.Provider value={effectiveDirection}>\n      <MobileCtx.Provider value={isMobile}>\n        <PanelGroup\n          className={cn(\n            \"flex h-full w-full\",\n            effectiveDirection === \"vertical\" && \"flex-col\",\n            className,\n          )}\n          orientation={effectiveDirection}\n          {...props}\n        />\n      </MobileCtx.Provider>\n    </DirectionCtx.Provider>\n  );\n}\n\ntype PanelProps = ComponentProps<typeof Panel>;\n\nexport interface ResizablePanelProps extends Omit<PanelProps, \"className\"> {\n  className?: string;\n  id?: string;\n  /** number = px. \"30%\" or \"30\" = percent. \"28rem\" / \"400px\" also valid. */\n  defaultSize?: number | string;\n  minSize?: number | string;\n  maxSize?: number | string;\n  collapsible?: boolean;\n}\n\nexport function ResizablePanel({ className, ...props }: ResizablePanelProps) {\n  return <Panel className={cn(\"\", className)} {...props} />;\n}\n\ntype PanelResizeHandleProps = ComponentProps<typeof PanelResizeHandle>;\n\nexport interface ResizableHandleProps\n  extends Omit<PanelResizeHandleProps, \"className\"> {\n  withHandle?: boolean;\n  className?: string;\n}\n\nexport function ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizableHandleProps) {\n  const direction = useContext(DirectionCtx);\n  const isMobile = useContext(MobileCtx);\n  const isVertical = direction === \"vertical\";\n\n  return (\n    <PanelResizeHandle\n      className={cn(\n        \"relative flex items-center justify-center bg-[var(--ds-border-default)]\",\n        isVertical\n          ? cn(\n              \"h-[var(--ds-border-width)] w-full after:absolute after:left-0 after:right-0 after:content-['']\",\n              isMobile ? \"after:-top-3 after:-bottom-3\" : \"after:-top-1 after:-bottom-1\"\n            )\n          : cn(\n              \"w-[var(--ds-border-width)] after:absolute after:inset-y-0 after:content-['']\",\n              isMobile ? \"after:-left-3 after:-right-3\" : \"after:-left-1 after:-right-1\"\n            ),\n        \"focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]\",\n        \"[&[data-resize-handle-state=drag]]:bg-[var(--ds-accent-primary)]\",\n        \"[&[data-resize-handle-state=hover]]:bg-[var(--ds-accent-primary)]\",\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div\n          className={cn(\n            \"z-10 flex items-center justify-center rounded-[var(--ds-radius-sm)]\",\n            \"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n            \"bg-[var(--ds-bg-surface)]\",\n            isVertical\n              ? (isMobile ? \"h-4 w-8\" : \"h-3 w-4\")\n              : (isMobile ? \"h-8 w-4\" : \"h-4 w-3\"),\n          )}\n        >\n          <Icon\n            name=\"grip-vertical\"\n            size={isMobile ? 12 : 10}\n            className={cn(\n              \"text-[var(--ds-text-muted)]\",\n              isVertical && \"rotate-90\",\n            )}\n          />\n        </div>\n      )}\n    </PanelResizeHandle>\n  );\n}\n","import { useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useCompact } from \"../lib/use-compact\";\nimport { ResizablePanelGroup, ResizablePanel, ResizableHandle } from \"./ResizablePanels\";\nimport { Button } from \"./Button\";\nimport { Drawer } from \"./Drawer\";\nimport { Icon } from \"../lib/icons\";\nimport { useAppShell } from \"./AppShell\";\nimport { SplitPaneCtx } from \"../lib/surface-context\";\nimport { isTabStop, rememberFocus, tabStops, type RememberedFocus } from \"../lib/focus\";\n\nexport type SplitViewFrame = \"fill\" | \"page\";\n\nexport interface SplitViewProps {\n  /** The list (an inbox, a queue): it scrolls on its own. */\n  list: ReactNode;\n  /** The selected item (a thread, a record): it fills the height and scrolls on its own. */\n  detail: ReactNode;\n  /** Context beside the detail (a contact, properties). The pane pads it (16 px, like the Drawer it collapses into), so pass content with no padding classes (round 8). Collapses to a toggle that opens it in a Drawer when the layout is narrower than `asideCollapseBelow`. */\n  aside?: ReactNode;\n  /** Names the aside's toggle and Drawer. */\n  asideTitle?: string;\n  /**\n   * Below `collapseBelow` the list shows alone; with `detailOpen` the detail replaces it, with a Back button that calls\n   * `onDetailClose` (detailMode \"stack\"). The page owns the selection, so it owns this flag.\n   */\n  detailOpen?: boolean;\n  onDetailClose?: () => void;\n  /** \"stack\" (default): the detail stacks over the list below the collapse width. \"route\": the app navigates to the detail's own route instead, and this renders the list alone there. */\n  detailMode?: \"stack\" | \"route\";\n  /**\n   * \"shown\" (default): above the collapse width the detail pane is always there — an inbox's reading pane may show a\n   * placeholder. \"hidden\" (Sprint 25.7, C3): `detailOpen` decides at every width. Closed, the list takes the whole\n   * width; open, the pane appears beside it at the width the user last gave it, with a close control that calls\n   * `onDetailClose`. For boards, timelines and lists of records. The list stays mounted, so a board or a timeline keeps\n   * its scroll and zoom.\n   */\n  closedDetail?: \"shown\" | \"hidden\";\n  /** The open pane's close control, named for a screen reader (closedDetail=\"hidden\"). Default \"Close\". */\n  closeLabel?: string;\n  backLabel?: string;\n  /** Percent of the width the list takes; the divider is draggable. */\n  listWidth?: number;\n  listMinWidth?: number;\n  asideWidth?: number;\n  /** Below this width of the layout itself (px) the list and detail stop sitting side by side. */\n  collapseBelow?: number;\n  /** Below this width of the layout itself (px) the aside becomes a toggle. */\n  asideCollapseBelow?: number;\n  /** A bordered, rounded surface (inside a page with padding) instead of edge to edge (filling <main>). */\n  bordered?: boolean;\n  /** \"fill\": the page root, flush to the shell, h-full against main, each pane owns its inset. \"page\" (default): inside a PageContainer under a PageHeader. */\n  frame?: SplitViewFrame;\n  \"aria-label\"?: string;\n  className?: string;\n}\n\n/**\n * The reading-pane composition (Sprint 25.2, R3): one surface with dividers —\n * list, detail and an optional aside — that fills the height it is given (an\n * AppShell's <main> already gives it) and never three cards with gaps. The\n * panels compose ResizablePanelGroup, so the dividers drag. Below the collapse\n * width, measured on the layout itself, the list shows alone and the detail\n * stacks over it (or the app routes to it); the aside collapses to a toggle.\n * The page owns the selection and assembles the contents; keyboard movement\n * through the list is the list's job (StackedList selectedId).\n */\nexport function SplitView({\n  list,\n  detail,\n  aside,\n  asideTitle = \"Details\",\n  detailOpen = false,\n  onDetailClose,\n  detailMode = \"stack\",\n  closedDetail = \"shown\",\n  closeLabel = \"Close\",\n  backLabel = \"Back\",\n  listWidth = 35,\n  listMinWidth = 25,\n  asideWidth = 25,\n  collapseBelow = 768,\n  asideCollapseBelow = 1024,\n  bordered = false,\n  frame = \"page\",\n  \"aria-label\": ariaLabel,\n  className,\n}: SplitViewProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const compact = useCompact(rootRef, collapseBelow);\n  const asideCollapsed = useCompact(rootRef, asideCollapseBelow);\n  const [asideWantsOpen, setAsideWantsOpen] = useState(false);\n  const hiding = closedDetail === \"hidden\";\n  // Hidden: the aside belongs to the open item, so it (its pane, its toggle, its Drawer) goes with the pane, and a\n  // Drawer left open does not come back with the next item (render-time state adjustment).\n  const showAside = !!aside && (!hiding || detailOpen);\n  if (hiding && !detailOpen && asideWantsOpen) setAsideWantsOpen(false);\n  const asideOpen = asideCollapsed && asideWantsOpen;\n  const region = ariaLabel ? { role: \"region\" as const, \"aria-label\": ariaLabel } : {};\n  // fill: the page root, flush to the shell on every side (no border, no radius, no padding of its own); h-full\n  // resolves against <main> because the shell is a flex column down to it. page: inside a PageContainer under a\n  // PageHeader, where `bordered` draws the surface. Each pane owns its own inset either way.\n  const isFill = frame === \"fill\";\n  // In a shell with an app footer the children wrapper has no definite height, so h-full cannot resolve; the shell\n  // publishes main's height and fill takes it (the footer then sits below the fold, as it must under a full pane).\n  const shell = useAppShell();\n  const fillStyle = isFill && shell?.hasFooter ? { height: \"var(--ds-main-height, 100%)\" } : undefined;\n  const surface = cn(\n    \"h-full min-h-0 w-full bg-[var(--ds-bg-surface)]\",\n    isFill && \"rounded-none border-0\",\n    bordered && !isFill && \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] overflow-hidden\",\n    className,\n  );\n\n  // closedDetail=\"hidden\" (C3): the pane opens beside the list at the width the user last gave it; closing it returns\n  // focus to the item the pane shows, or its neighbour if that item is gone (D14(e)): the list's selected item, else\n  // the last list item that took focus, checked on each render while the pane is open, so switching items is followed.\n  // A selection kept in the URL changes the path, so the item is remembered whatever the route does. With no item\n  // (opened on load, or from outside the list) focus goes to the list's first Tab stop. No overlay layer: an\n  // assistant opened earlier keeps Escape.\n  const [listPct, setListPct] = useState(listWidth);\n  const paneRef = useRef<HTMLDivElement>(null);\n  const shown = useRef<RememberedFocus | null>(null);\n  const lastInList = useRef<HTMLElement | null>(null);\n  const wasOpen = useRef(false);\n  useLayoutEffect(() => {\n    if (!hiding) return;\n    const listPane = rootRef.current?.querySelector<HTMLElement>('[data-pane=\"list\"]') ?? null;\n    if (detailOpen) {\n      wasOpen.current = true;\n      const selected = listPane?.querySelector<HTMLElement>('[aria-current=\"true\"], [aria-selected=\"true\"]');\n      const last = lastInList.current;\n      const item = (selected && (isTabStop(selected) ? selected : tabStops(selected)[0]))\n        || (last?.isConnected && listPane?.contains(last) ? last : null);\n      if (item && item !== shown.current?.el) shown.current = rememberFocus(item, { ignoreRoute: true });\n      return;\n    }\n    if (!wasOpen.current) return;\n    wasOpen.current = false;\n    const r = shown.current;\n    shown.current = null;\n    const active = document.activeElement;\n    if (active && active !== document.body && active.isConnected) return;\n    const first = listPane ? tabStops(listPane)[0] : undefined;\n    if (!r?.restore(first)) first?.focus();\n  });\n  const onPaneKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\" || e.defaultPrevented || !onDetailClose) return;\n    const t = e.target as HTMLElement;\n    // the pane's own DOM only — a portalled popup inside it bubbles here in React's tree — and never from a field\n    if (!paneRef.current?.contains(t) || t.closest(\"input, textarea, select, [contenteditable='true']\")) return;\n    e.preventDefault();\n    onDetailClose();\n  };\n\n  if (compact) {\n    const showDetail = detailMode === \"stack\" && detailOpen;\n    return (\n      <div ref={rootRef} data-split-view={showDetail ? \"detail\" : \"list\"} data-frame={frame} {...region} className={cn(surface, \"flex flex-col\")} style={fillStyle}>\n        {showDetail ? (\n          <>\n            <div className=\"shrink-0 px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\">\n              <Button variant=\"ghost\" size=\"sm\" iconLeft={<Icon name=\"arrow-left\" size={14} />} onClick={onDetailClose}>{backLabel}</Button>\n            </div>\n            <div className=\"flex-1 min-h-0 overflow-y-auto\"><SplitPaneCtx value={true}>{detail}</SplitPaneCtx></div>\n          </>\n        ) : (\n          <div className=\"flex-1 min-h-0 overflow-y-auto\"><SplitPaneCtx value={true}>{list}</SplitPaneCtx></div>\n        )}\n      </div>\n    );\n  }\n\n  const asideButton = showAside && asideCollapsed\n    ? <Button variant=\"ghost\" size=\"sm\" iconLeft={<Icon name=\"info\" size={14} />} onClick={() => setAsideWantsOpen(true)} aria-expanded={asideOpen}>{asideTitle}</Button>\n    : null;\n  const closeButton = hiding && onDetailClose\n    ? <Button variant=\"ghost\" size=\"icon-sm\" aria-label={closeLabel} onClick={onDetailClose}><Icon name=\"close\" size={14} /></Button>\n    : null;\n  const paneBar = asideButton || closeButton ? (\n    <div className=\"shrink-0 flex items-center justify-end gap-ds-1 px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\">\n      {asideButton}\n      {closeButton}\n    </div>\n  ) : null;\n  const showDetail = !hiding || detailOpen;\n\n  return (\n    <div ref={rootRef} data-split-view={hiding && !detailOpen ? \"list\" : \"split\"} data-frame={frame} {...region} className={surface} style={fillStyle}>\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        stackOnMobile={false}\n        className=\"h-full\"\n        // the width the user gives the list is kept, so a closed pane reopens at it\n        onLayoutChanged={hiding ? (layout) => { if (layout.detail != null && layout.list != null) setListPct(layout.list); } : undefined}\n      >\n        <ResizablePanel id=\"list\" defaultSize={`${hiding ? (detailOpen ? listPct : 100) : listWidth}%`} minSize={`${listMinWidth}%`}>\n          <div data-pane=\"list\" className=\"h-full min-h-0 overflow-y-auto\" onFocus={hiding ? (e) => { lastInList.current = e.target; } : undefined}>\n            <SplitPaneCtx value={true}>{list}</SplitPaneCtx>\n          </div>\n        </ResizablePanel>\n        {showDetail && (\n          <>\n            <ResizableHandle withHandle />\n            <ResizablePanel id=\"detail\" minSize=\"30%\">\n              <div ref={paneRef} data-pane=\"detail\" className=\"h-full min-h-0 flex flex-col\" onKeyDown={hiding ? onPaneKeyDown : undefined}>\n                {paneBar}\n                <div className=\"flex-1 min-h-0 overflow-y-auto\"><SplitPaneCtx value={true}>{detail}</SplitPaneCtx></div>\n              </div>\n            </ResizablePanel>\n          </>\n        )}\n        {showAside && !asideCollapsed && (\n          <>\n            <ResizableHandle withHandle />\n            <ResizablePanel id=\"aside\" defaultSize={`${asideWidth}%`} minSize=\"15%\">\n              <div data-pane=\"aside\" className=\"h-full min-h-0 overflow-y-auto p-ds-4\"><SplitPaneCtx value={true}>{aside}</SplitPaneCtx></div>\n            </ResizablePanel>\n          </>\n        )}\n      </ResizablePanelGroup>\n      {showAside && asideCollapsed && (\n        <Drawer open={asideOpen} onClose={() => setAsideWantsOpen(false)} title={asideTitle} position=\"right\">\n          {aside}\n        </Drawer>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/roots.css

@@ -344,20 +344,23 @@
   --ds-accent-subtle-text: var(--ds-accent-primary);
 
   /* Categorical chart scale — 6 series colours for data visualisation.
-     chart-1 is the accent, chart-2–6 map to palette bold variants.
-     When palette tokens are absent (no theme loaded), chart-2–6 fall
-     back to neutral shades so something visible always renders. */
+     chart-1 is the accent, chart-2–6 map to the palette's chart colours
+     (the bold in light mode, lifted in dark so a series shows at 3:1 on a
+     dark card; a theme's generated tokens set chart-1 to a primary step
+     that shows when the accent does not). When palette tokens are absent
+     (no theme loaded), chart-2–6 fall back to neutral shades so something
+     visible always renders. */
   --ds-chart-1: var(--ds-accent-primary);
   --ds-chart-1-soft: color-mix(in oklch, var(--ds-accent-primary) 30%, transparent);
-  --ds-chart-2: var(--ds-palette-1-bold, var(--ds-neutral-500));
+  --ds-chart-2: var(--ds-palette-1-chart, var(--ds-palette-1-bold, var(--ds-neutral-500)));
   --ds-chart-2-soft: color-mix(in oklch, var(--ds-chart-2) 30%, transparent);
-  --ds-chart-3: var(--ds-palette-2-bold, var(--ds-neutral-400));
+  --ds-chart-3: var(--ds-palette-2-chart, var(--ds-palette-2-bold, var(--ds-neutral-400)));
   --ds-chart-3-soft: color-mix(in oklch, var(--ds-chart-3) 30%, transparent);
-  --ds-chart-4: var(--ds-palette-3-bold, var(--ds-neutral-600));
+  --ds-chart-4: var(--ds-palette-3-chart, var(--ds-palette-3-bold, var(--ds-neutral-600)));
   --ds-chart-4-soft: color-mix(in oklch, var(--ds-chart-4) 30%, transparent);
-  --ds-chart-5: var(--ds-palette-4-bold, var(--ds-neutral-300));
+  --ds-chart-5: var(--ds-palette-4-chart, var(--ds-palette-4-bold, var(--ds-neutral-300)));
   --ds-chart-5-soft: color-mix(in oklch, var(--ds-chart-5) 30%, transparent);
-  --ds-chart-6: var(--ds-palette-5-bold, var(--ds-neutral-700));
+  --ds-chart-6: var(--ds-palette-5-chart, var(--ds-palette-5-bold, var(--ds-neutral-700)));
   --ds-chart-6-soft: color-mix(in oklch, var(--ds-chart-6) 30%, transparent);
 
   /* Backwards-compat aliases */

package/dist/{tabler-HHIXSM73.js → tabler-YXXC7Y6B.js}

@@ -40,6 +40,7 @@ var CURATED = {
   "type": "IconTypography",
   "chevron-up": "IconChevronUp",
   "chevron-down": "IconChevronDown",
+  "chevron-left": "IconChevronLeft",
   "trash": "IconTrash",
   "undo": "IconArrowBackUp",
   "redo": "IconArrowForwardUp",
@@ -72,5 +73,5 @@ async function loadExtended() {
 }
 
 export { loadCurated, loadExtended };
-//# sourceMappingURL=tabler-HHIXSM73.js.map
-//# sourceMappingURL=tabler-HHIXSM73.js.map
+//# sourceMappingURL=tabler-YXXC7Y6B.js.map
+//# sourceMappingURL=tabler-YXXC7Y6B.js.map

package/dist/tabler-YXXC7Y6B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/lib/icon-packs/tabler.ts"],"names":[],"mappings":";;;AAgBA,IAAM,OAAA,GAAkC;AAAA,EACtC,MAAA,EAAQ,UAAA;AAAA,EACR,QAAA,EAAU,YAAA;AAAA,EACV,OAAA,EAAS,cAAA;AAAA,EACT,UAAA,EAAY,cAAA;AAAA,EACZ,eAAA,EAAiB,kBAAA;AAAA,EACjB,OAAA,EAAS,OAAA;AAAA,EACT,MAAA,EAAQ,UAAA;AAAA,EACR,QAAA,EAAU,YAAA;AAAA,EACV,MAAA,EAAQ,UAAA;AAAA,EACR,MAAA,EAAQ,UAAA;AAAA,EACR,OAAA,EAAS,WAAA;AAAA,EACT,SAAA,EAAW,mBAAA;AAAA,EACX,MAAA,EAAQ,gBAAA;AAAA,EACR,OAAA,EAAS,iBAAA;AAAA,EACT,OAAA,EAAS,WAAA;AAAA,EACT,UAAA,EAAY,cAAA;AAAA,EACZ,MAAA,EAAQ,UAAA;AAAA,EACR,QAAA,EAAU,YAAA;AAAA,EACV,WAAA,EAAa,eAAA;AAAA,EACb,eAAA,EAAiB,mBAAA;AAAA,EACjB,YAAA,EAAc,eAAA;AAAA,EACd,cAAA,EAAgB,iBAAA;AAAA,EAChB,aAAA,EAAe,gBAAA;AAAA,EACf,MAAA,EAAQ,UAAA;AAAA,EACR,cAAA,EAAgB,iBAAA;AAAA,EAChB,aAAA,EAAe,eAAA;AAAA,EACf,MAAA,EAAQ,UAAA;AAAA,EACR,OAAA,EAAS,WAAA;AAAA,EACT,OAAA,EAAS,WAAA;AAAA,EACT,MAAA,EAAQ,UAAA;AAAA,EACR,OAAA,EAAS,WAAA;AAAA,EACT,OAAA,EAAS,WAAA;AAAA,EACT,aAAA,EAAe,iBAAA;AAAA,EACf,WAAA,EAAa,eAAA;AAAA,EACb,WAAA,EAAa,eAAA;AAAA,EACb,MAAA,EAAQ,gBAAA;AAAA,EACR,YAAA,EAAc,eAAA;AAAA,EACd,cAAA,EAAgB,iBAAA;AAAA,EAChB,cAAA,EAAgB,iBAAA;AAAA,EAChB,OAAA,EAAS,WAAA;AAAA,EACT,MAAA,EAAQ,iBAAA;AAAA,EACR,MAAA,EAAQ,oBAAA;AAAA,EACR,YAAA,EAAc,eAAA;AAAA,EACd,eAAA,EAAiB,kBAAA;AAAA,EACjB,KAAA,EAAO,gBAAA;AAAA,EACP,WAAA,EAAa,eAAA;AAAA,EACb,MAAA,EAAQ,UAAA;AAAA,EACR,SAAA,EAAW,YAAA;AAAA,EACX,MAAA,EAAQ,YAAA;AAAA,EACR,MAAA,EAAQ,WAAA;AAAA,EACR,iBAAA,EAAmB,UAAA;AAAA,EACnB,MAAA,EAAQ,UAAA;AAAA,EACR,UAAA,EAAY,cAAA;AAAA,EACZ,UAAA,EAAY,cAAA;AAAA,EACZ,QAAA,EAAU,YAAA;AAAA,EACV,UAAA,EAAY;AACd,CAAA;AAEA,eAAe,IAAA,GAAyC;AACtD,EAAA,OAAQ,MAAM,OAAO,qBAAqB,CAAA;AAC5C;AAEA,eAAsB,WAAA,GAAgC;AACpD,EAAA,OAAO,WAAA,CAAY,MAAM,IAAA,EAAK,EAAG,OAAO,CAAA;AAC1C;AAEA,eAAsB,YAAA,GAAiC;AACrD,EAAA,MAAM,GAAA,GAAM,MAAM,IAAA,EAAK;AACvB,EAAA,MAAM,QAAA,GAAW,iBAAiB,GAAA,EAAK,IAAI,EAAE,WAAA,EAAa,QAAQ,CAAA;AAClE,EAAA,MAAA,CAAO,MAAA,CAAO,QAAA,EAAU,WAAA,CAAY,GAAA,EAAK,OAAO,CAAC,CAAA;AACjD,EAAA,OAAO,QAAA;AACT","file":"tabler-YXXC7Y6B.js","sourcesContent":["import type { IconMap } from './types'\nimport { buildExtendedMap, pickCurated } from './utils'\n\n/**\n * Tabler icons.\n *\n * The pack is reached only through the dynamic import in peer() — never a\n * static named import. A static import of an optional peer makes a consumer's\n * production build fail on Vite 8 when the peer is not installed: Vite\n * substitutes an export-less stub and the bundler treats every missing name as\n * fatal (Sprint 22 bench finding 1, 13 Sep 2026; showcase/src/test/\n * vite8-optional-peers-build.test.ts guards it). The curated names are strings\n * for the same reason; icon-completeness.test.tsx proves every one resolves in\n * the installed pack. If the pack is missing, peer() rejects and loadPack in\n * icons.tsx reports which package to install.\n */\nconst CURATED: Record<string, string> = {\n  \"home\": \"IconHome\",\n  \"folder\": \"IconFolder\",\n  \"chart\": \"IconChartBar\",\n  \"settings\": \"IconSettings\",\n  \"chevron-right\": \"IconChevronRight\",\n  \"close\": \"IconX\",\n  \"plus\": \"IconPlus\",\n  \"search\": \"IconSearch\",\n  \"bell\": \"IconBell\",\n  \"user\": \"IconUser\",\n  \"check\": \"IconCheck\",\n  \"warning\": \"IconAlertTriangle\",\n  \"info\": \"IconInfoCircle\",\n  \"error\": \"IconAlertCircle\",\n  \"clock\": \"IconClock\",\n  \"calendar\": \"IconCalendar\",\n  \"bold\": \"IconBold\",\n  \"italic\": \"IconItalic\",\n  \"underline\": \"IconUnderline\",\n  \"strikethrough\": \"IconStrikethrough\",\n  \"align-left\": \"IconAlignLeft\",\n  \"align-center\": \"IconAlignCenter\",\n  \"align-right\": \"IconAlignRight\",\n  \"list\": \"IconList\",\n  \"list-ordered\": \"IconListNumbers\",\n  \"list-checks\": \"IconListCheck\",\n  \"link\": \"IconLink\",\n  \"image\": \"IconPhoto\",\n  \"table\": \"IconTable\",\n  \"code\": \"IconCode\",\n  \"quote\": \"IconQuote\",\n  \"minus\": \"IconMinus\",\n  \"superscript\": \"IconSuperscript\",\n  \"subscript\": \"IconSubscript\",\n  \"highlight\": \"IconHighlight\",\n  \"type\": \"IconTypography\",\n  \"chevron-up\": \"IconChevronUp\",\n  \"chevron-down\": \"IconChevronDown\",\n  \"chevron-left\": \"IconChevronLeft\",\n  \"trash\": \"IconTrash\",\n  \"undo\": \"IconArrowBackUp\",\n  \"redo\": \"IconArrowForwardUp\",\n  \"arrow-left\": \"IconArrowLeft\",\n  \"grip-vertical\": \"IconGripVertical\",\n  \"mic\": \"IconMicrophone\",\n  \"paperclip\": \"IconPaperclip\",\n  \"send\": \"IconSend\",\n  \"log-out\": \"IconLogout\",\n  \"edit\": \"IconPencil\",\n  \"menu\": \"IconMenu2\",\n  \"more-horizontal\": \"IconDots\",\n  \"star\": \"IconStar\",\n  \"bookmark\": \"IconBookmark\",\n  \"download\": \"IconDownload\",\n  \"upload\": \"IconUpload\",\n  \"sparkles\": \"IconSparkles\",\n}\n\nasync function peer(): Promise<Record<string, unknown>> {\n  return (await import(\"@tabler/icons-react\")) as unknown as Record<string, unknown>\n}\n\nexport async function loadCurated(): Promise<IconMap> {\n  return pickCurated(await peer(), CURATED)\n}\n\nexport async function loadExtended(): Promise<IconMap> {\n  const mod = await peer()\n  const extended = buildExtendedMap(mod, {}, { stripPrefix: \"Icon\" })\n  Object.assign(extended, pickCurated(mod, CURATED))\n  return extended\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridsmith-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Gridsmith component library — 98 React components with design tokens and a CSS custom property theming engine",
   "type": "module",
   "sideEffects": [