gridsmith-ui 0.3.5 → 0.6.0

package/dist/roots.css

@@ -52,7 +52,7 @@
   --ds-ambient-hover-ease: cubic-bezier(0.33, 1, 0.68, 1);
 
   --ds-sidebar-width: 224px;
-  --ds-sidebar-compact-width: 72px;
+  --ds-sidebar-compact-width: 76px;
   --ds-sidebar-collapsed-width: 56px;
   --ds-navbar-height: 48px;
   --ds-navbar-height-compact: 40px;
@@ -195,11 +195,27 @@
   --ds-touch-target-min: 44px;
 
   /* ── L1: Z-Index Scale ─────────────────────────────────────────── */
-
-  --ds-z-dropdown: 100;
+  /*
+   * Stacking order (low → high). Floating layers attached to a control
+   * (dropdowns, menus, pickers, popovers, hover cards) sit ABOVE modals
+   * because they are routinely opened from inside a Dialog or Drawer.
+   *
+   *   sticky   200  navbars, sticky page headers, page-top alerts
+   *   overlay  300  scrims / backdrops behind drawers and sheets
+   *   modal    400  Dialog, Drawer, Sheet, CommandPalette
+   *   popover  450  Dropdown, DropdownMenu, Combobox, Popover, ContextMenu,
+   *                 HoverCard, DatePicker/DateRangePicker/TimePicker panels,
+   *                 NavMenu, SidebarNav flyouts, editor menus
+   *   tooltip  500  Tooltip (must show above an open popover)
+   *   toast    600  Toast / ToastProvider stack
+   *
+   * --ds-z-dropdown is kept as an alias of popover for existing consumers.
+   */
   --ds-z-sticky: 200;
   --ds-z-overlay: 300;
   --ds-z-modal: 400;
+  --ds-z-popover: 450;
+  --ds-z-dropdown: var(--ds-z-popover);
   --ds-z-tooltip: 500;
   --ds-z-toast: 600;
 
@@ -264,13 +280,32 @@
   --ds-accent-primary: var(--ds-primary-500);
   --ds-accent-primary-hover: var(--ds-primary-600);
   --ds-accent-primary-active: var(--ds-primary-700);
-  --ds-accent-subtle: color-mix(in oklch, var(--ds-accent-primary) 10%, transparent);
-
-  /* Data-visualisation fills — the sanctioned way to use the accent ramp
-     as a fill. "Never accent as solid background" applies to interactive
-     surfaces; chart bars, area fills, and legend swatches use these. */
-  --ds-chart-fill: var(--ds-accent-primary);
-  --ds-chart-fill-soft: color-mix(in oklch, var(--ds-accent-primary) 30%, transparent);
+  --ds-accent-whisper: color-mix(in srgb, var(--ds-accent-primary) 5%, transparent);
+  --ds-accent-subtle: color-mix(in srgb, var(--ds-accent-primary) 10%, transparent);
+  --ds-accent-muted: color-mix(in srgb, var(--ds-accent-primary) 20%, transparent);
+  --ds-accent-soft: color-mix(in srgb, var(--ds-accent-primary) 30%, transparent);
+  --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. */
+  --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-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-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-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-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-soft: color-mix(in oklch, var(--ds-chart-6) 30%, transparent);
+
+  /* Backwards-compat aliases */
+  --ds-chart-fill: var(--ds-chart-1);
+  --ds-chart-fill-soft: var(--ds-chart-1-soft);
 
   --ds-status-success: var(--ds-success-500);
   --ds-status-success-bg: var(--ds-success-100);
@@ -290,7 +325,7 @@
   --ds-sidebar-text-secondary: var(--ds-text-secondary);
   --ds-sidebar-text-muted: var(--ds-text-muted);
   --ds-sidebar-accent: var(--ds-accent-primary);
-  --ds-sidebar-accent-subtle: color-mix(in oklch, var(--ds-sidebar-accent) 10%, transparent);
+  --ds-sidebar-accent-subtle: color-mix(in srgb, var(--ds-sidebar-accent) 10%, transparent);
 
   /* Tab strip — presets can override for stronger contrast (e.g. Modern Dark) */
   --ds-tab-hover-bg: var(--ds-bg-muted);

package/dist/tabler-TVOR6AFM.js

@@ -0,0 +1,71 @@
+import { buildExtendedMap } from './chunk-GYVBRUO2.js';
+import { IconUpload, IconDownload, IconBookmark, IconStar, IconMenu2, IconPencil, IconLogout, IconSend, IconPaperclip, IconMicrophone, IconGripVertical, IconArrowLeft, IconArrowForwardUp, IconArrowBackUp, IconTrash, IconChevronDown, IconChevronUp, IconTypography, IconHighlight, IconSubscript, IconSuperscript, IconMinus, IconQuote, IconCode, IconTable, IconPhoto, IconLink, IconListCheck, IconListNumbers, IconList, IconAlignRight, IconAlignCenter, IconAlignLeft, IconStrikethrough, IconUnderline, IconItalic, IconBold, IconCalendar, IconClock, IconAlertCircle, IconInfoCircle, IconAlertTriangle, IconCheck, IconUser, IconBell, IconSearch, IconPlus, IconX, IconChevronRight, IconSettings, IconChartBar, IconFolder, IconHome } from '@tabler/icons-react';
+
+var curated = {
+  "home": IconHome,
+  "folder": IconFolder,
+  "chart": IconChartBar,
+  "settings": IconSettings,
+  "chevron-right": IconChevronRight,
+  "close": IconX,
+  "plus": IconPlus,
+  "search": IconSearch,
+  "bell": IconBell,
+  "user": IconUser,
+  "check": IconCheck,
+  "warning": IconAlertTriangle,
+  "info": IconInfoCircle,
+  "error": IconAlertCircle,
+  "clock": IconClock,
+  "calendar": IconCalendar,
+  "bold": IconBold,
+  "italic": IconItalic,
+  "underline": IconUnderline,
+  "strikethrough": IconStrikethrough,
+  "align-left": IconAlignLeft,
+  "align-center": IconAlignCenter,
+  "align-right": IconAlignRight,
+  "list": IconList,
+  "list-ordered": IconListNumbers,
+  "list-checks": IconListCheck,
+  "link": IconLink,
+  "image": IconPhoto,
+  "table": IconTable,
+  "code": IconCode,
+  "quote": IconQuote,
+  "minus": IconMinus,
+  "superscript": IconSuperscript,
+  "subscript": IconSubscript,
+  "highlight": IconHighlight,
+  "type": IconTypography,
+  "chevron-up": IconChevronUp,
+  "chevron-down": IconChevronDown,
+  "trash": IconTrash,
+  "undo": IconArrowBackUp,
+  "redo": IconArrowForwardUp,
+  "arrow-left": IconArrowLeft,
+  "grip-vertical": IconGripVertical,
+  "mic": IconMicrophone,
+  "paperclip": IconPaperclip,
+  "send": IconSend,
+  "log-out": IconLogout,
+  "edit": IconPencil,
+  "menu": IconMenu2,
+  "star": IconStar,
+  "bookmark": IconBookmark,
+  "download": IconDownload,
+  "upload": IconUpload
+};
+function loadCurated() {
+  return curated;
+}
+async function loadExtended() {
+  const T = await import('@tabler/icons-react');
+  const extended = buildExtendedMap(T, {}, { stripPrefix: "Icon" });
+  Object.assign(extended, curated);
+  return extended;
+}
+
+export { loadCurated, loadExtended };
+//# sourceMappingURL=tabler-TVOR6AFM.js.map
+//# sourceMappingURL=tabler-TVOR6AFM.js.map

package/dist/tabler-TVOR6AFM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/lib/icon-packs/tabler.ts"],"names":[],"mappings":";;;AAyBA,IAAM,OAAA,GAAmB;AAAA,EACvB,MAAA,EAAQ,QAAA;AAAA,EAAU,QAAA,EAAU,UAAA;AAAA,EAAY,OAAA,EAAS,YAAA;AAAA,EACjD,UAAA,EAAY,YAAA;AAAA,EAAc,eAAA,EAAiB,gBAAA;AAAA,EAC3C,OAAA,EAAS,KAAA;AAAA,EAAO,MAAA,EAAQ,QAAA;AAAA,EAAU,QAAA,EAAU,UAAA;AAAA,EAC5C,MAAA,EAAQ,QAAA;AAAA,EAAU,MAAA,EAAQ,QAAA;AAAA,EAAU,OAAA,EAAS,SAAA;AAAA,EAC7C,SAAA,EAAW,iBAAA;AAAA,EAAmB,MAAA,EAAQ,cAAA;AAAA,EACtC,OAAA,EAAS,eAAA;AAAA,EAAiB,OAAA,EAAS,SAAA;AAAA,EAAW,UAAA,EAAY,YAAA;AAAA,EAC1D,MAAA,EAAQ,QAAA;AAAA,EAAU,QAAA,EAAU,UAAA;AAAA,EAAY,WAAA,EAAa,aAAA;AAAA,EACrD,eAAA,EAAiB,iBAAA;AAAA,EAAmB,YAAA,EAAc,aAAA;AAAA,EAClD,cAAA,EAAgB,eAAA;AAAA,EAAiB,aAAA,EAAe,cAAA;AAAA,EAChD,MAAA,EAAQ,QAAA;AAAA,EAAU,cAAA,EAAgB,eAAA;AAAA,EAAiB,aAAA,EAAe,aAAA;AAAA,EAClE,MAAA,EAAQ,QAAA;AAAA,EAAU,OAAA,EAAS,SAAA;AAAA,EAAW,OAAA,EAAS,SAAA;AAAA,EAAW,MAAA,EAAQ,QAAA;AAAA,EAClE,OAAA,EAAS,SAAA;AAAA,EAAW,OAAA,EAAS,SAAA;AAAA,EAAW,aAAA,EAAe,eAAA;AAAA,EACvD,WAAA,EAAa,aAAA;AAAA,EAAe,WAAA,EAAa,aAAA;AAAA,EAAe,MAAA,EAAQ,cAAA;AAAA,EAChE,YAAA,EAAc,aAAA;AAAA,EAAe,cAAA,EAAgB,eAAA;AAAA,EAAiB,OAAA,EAAS,SAAA;AAAA,EACvE,MAAA,EAAQ,eAAA;AAAA,EAAiB,MAAA,EAAQ,kBAAA;AAAA,EACjC,YAAA,EAAc,aAAA;AAAA,EAAe,eAAA,EAAiB,gBAAA;AAAA,EAC9C,KAAA,EAAO,cAAA;AAAA,EAAgB,WAAA,EAAa,aAAA;AAAA,EAAe,MAAA,EAAQ,QAAA;AAAA,EAC3D,SAAA,EAAW,UAAA;AAAA,EAAY,MAAA,EAAQ,UAAA;AAAA,EAAY,MAAA,EAAQ,SAAA;AAAA,EACnD,MAAA,EAAQ,QAAA;AAAA,EAAU,UAAA,EAAY,YAAA;AAAA,EAC9B,UAAA,EAAY,YAAA;AAAA,EAAc,QAAA,EAAU;AACtC,CAAA;AAEO,SAAS,WAAA,GAAuB;AACrC,EAAA,OAAO,OAAA;AACT;AAEA,eAAsB,YAAA,GAAiC;AACrD,EAAA,MAAM,CAAA,GAAI,MAAM,OAAO,qBAAqB,CAAA;AAC5C,EAAA,MAAM,QAAA,GAAW,iBAAiB,CAAA,EAAyC,IAAI,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtG,EAAA,MAAA,CAAO,MAAA,CAAO,UAAU,OAAO,CAAA;AAC/B,EAAA,OAAO,QAAA;AACT","file":"tabler-TVOR6AFM.js","sourcesContent":["import type { IconMap } from './types'\nimport { buildExtendedMap } from './utils'\nimport {\n  IconHome, IconFolder, IconChartBar,\n  IconSettings, IconChevronRight,\n  IconX, IconPlus, IconSearch,\n  IconBell, IconUser, IconCheck,\n  IconAlertTriangle, IconInfoCircle,\n  IconAlertCircle, IconClock, IconCalendar,\n  IconBold, IconItalic, IconUnderline,\n  IconStrikethrough, IconAlignLeft,\n  IconAlignCenter, IconAlignRight,\n  IconList, IconListNumbers, IconListCheck,\n  IconLink, IconPhoto, IconTable, IconCode,\n  IconQuote, IconMinus, IconSuperscript,\n  IconSubscript, IconHighlight, IconTypography,\n  IconChevronUp, IconChevronDown, IconTrash,\n  IconArrowBackUp, IconArrowForwardUp,\n  IconArrowLeft, IconGripVertical,\n  IconMicrophone, IconPaperclip, IconSend,\n  IconLogout, IconPencil, IconMenu2,\n  IconStar, IconBookmark,\n  IconDownload, IconUpload,\n} from \"@tabler/icons-react\"\n\nconst curated: IconMap = {\n  \"home\": IconHome, \"folder\": IconFolder, \"chart\": IconChartBar,\n  \"settings\": IconSettings, \"chevron-right\": IconChevronRight,\n  \"close\": IconX, \"plus\": IconPlus, \"search\": IconSearch,\n  \"bell\": IconBell, \"user\": IconUser, \"check\": IconCheck,\n  \"warning\": IconAlertTriangle, \"info\": IconInfoCircle,\n  \"error\": IconAlertCircle, \"clock\": IconClock, \"calendar\": IconCalendar,\n  \"bold\": IconBold, \"italic\": IconItalic, \"underline\": IconUnderline,\n  \"strikethrough\": IconStrikethrough, \"align-left\": IconAlignLeft,\n  \"align-center\": IconAlignCenter, \"align-right\": IconAlignRight,\n  \"list\": IconList, \"list-ordered\": IconListNumbers, \"list-checks\": IconListCheck,\n  \"link\": IconLink, \"image\": IconPhoto, \"table\": IconTable, \"code\": IconCode,\n  \"quote\": IconQuote, \"minus\": IconMinus, \"superscript\": IconSuperscript,\n  \"subscript\": IconSubscript, \"highlight\": IconHighlight, \"type\": IconTypography,\n  \"chevron-up\": IconChevronUp, \"chevron-down\": IconChevronDown, \"trash\": IconTrash,\n  \"undo\": IconArrowBackUp, \"redo\": IconArrowForwardUp,\n  \"arrow-left\": IconArrowLeft, \"grip-vertical\": IconGripVertical,\n  \"mic\": IconMicrophone, \"paperclip\": IconPaperclip, \"send\": IconSend,\n  \"log-out\": IconLogout, \"edit\": IconPencil, \"menu\": IconMenu2,\n  \"star\": IconStar, \"bookmark\": IconBookmark,\n  \"download\": IconDownload, \"upload\": IconUpload,\n}\n\nexport function loadCurated(): IconMap {\n  return curated\n}\n\nexport async function loadExtended(): Promise<IconMap> {\n  const T = await import(\"@tabler/icons-react\")\n  const extended = buildExtendedMap(T as unknown as Record<string, unknown>, {}, { stripPrefix: \"Icon\" })\n  Object.assign(extended, curated)\n  return extended\n}\n"]}

package/dist/use-breakpoint-Cn51IubK.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare const DEFAULT_BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+type BreakpointKey = keyof typeof DEFAULT_BREAKPOINTS;
+/**
+ * Provides an override container width for all `useBreakpoint` calls within
+ * this subtree. Used by the builder's viewport preview to make components
+ * respond to the constrained canvas width instead of the browser viewport.
+ */
+declare function BreakpointWidthProvider({ width, children }: {
+    width: number | null;
+    children: ReactNode;
+}): react.FunctionComponentElement<react.ProviderProps<number | null>>;
+/**
+ * Reactive breakpoint check that reads `--ds-bp-*` CSS variables.
+ * Returns true when the viewport (or override container) is at or below the
+ * named breakpoint.
+ *
+ * @example
+ * const isMobile = useBreakpoint("md"); // true when ≤768px
+ */
+declare function useBreakpoint(key: BreakpointKey): boolean;
+
+export { type BreakpointKey as B, BreakpointWidthProvider as a, useBreakpoint as u };

package/dist/utils.js

@@ -1,4 +1,3 @@
-export { GLASS_BACKDROP, GLASS_DROPDOWN, GLASS_OVERLAY, GLASS_SURFACE, cn } from './chunk-5XIPPVH7.js';
-import './chunk-5WRI5ZAA.js';
+export { GLASS_BACKDROP, GLASS_DROPDOWN, GLASS_OVERLAY, GLASS_SURFACE, cn } from './chunk-IUBWNDUK.js';
 //# sourceMappingURL=utils.js.map
 //# sourceMappingURL=utils.js.map

package/dist/virtualized.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, Ref } from 'react';
+import { VirtualItem } from '@tanstack/react-virtual';
+
+interface VirtualizedListProps<T> {
+    items: T[];
+    estimateSize: (index: number) => number;
+    renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;
+    overscan?: number;
+    height?: number | string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function VirtualizedList<T>({ items, estimateSize, renderItem, overscan, height, className, ref, }: VirtualizedListProps<T>): react_jsx_runtime.JSX.Element;
+
+export { VirtualizedList };

package/dist/virtualized.js

@@ -0,0 +1,55 @@
+import { cn } from './chunk-IUBWNDUK.js';
+import { useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { jsx } from 'react/jsx-runtime';
+
+function VirtualizedList({
+  items,
+  estimateSize,
+  renderItem,
+  overscan = 5,
+  height = 400,
+  className,
+  ref
+}) {
+  const parentRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize,
+    overscan
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        parentRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn(
+        "overflow-auto",
+        "rounded-[var(--ds-radius-md)]",
+        "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+        "bg-[var(--ds-bg-surface)]",
+        className
+      ),
+      style: { height },
+      children: /* @__PURE__ */ jsx("div", { className: "relative w-full", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-index": virtualItem.index,
+          ref: virtualizer.measureElement,
+          className: "absolute top-0 left-0 w-full",
+          style: { transform: `translateY(${virtualItem.start}px)` },
+          children: renderItem(items[virtualItem.index], virtualItem.index, virtualItem)
+        },
+        virtualItem.key
+      )) })
+    }
+  );
+}
+
+export { VirtualizedList };
+//# sourceMappingURL=virtualized.js.map
+//# sourceMappingURL=virtualized.js.map

package/dist/virtualized.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/components/VirtualizedList.tsx"],"names":[],"mappings":";;;;;AAcO,SAAS,eAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA,GAAW,CAAA;AAAA,EACX,MAAA,GAAS,GAAA;AAAA,EACT,SAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAE7C,EAAA,MAAM,cAAc,cAAA,CAAe;AAAA,IACjC,OAAO,KAAA,CAAM,MAAA;AAAA,IACb,gBAAA,EAAkB,MAAM,SAAA,CAAU,OAAA;AAAA,IAClC,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,QAAC,UAA4D,OAAA,GAAU,IAAA;AACvE,QAAA,IAAI,OAAO,GAAA,KAAQ,UAAA,EAAY,GAAA,CAAI,IAAI,CAAA;AAAA,aAAA,IAC9B,GAAA,EAAM,GAAA,CAAsD,OAAA,GAAU,IAAA;AAAA,MACjF,CAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,eAAA;AAAA,QACA,+BAAA;AAAA,QACA,yEAAA;AAAA,QACA,2BAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,MAAA,EAAO;AAAA,MAEhB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBAAA,EAAkB,KAAA,EAAO,EAAE,MAAA,EAAQ,WAAA,CAAY,YAAA,EAAa,IACxE,QAAA,EAAA,WAAA,CAAY,eAAA,EAAgB,CAAE,GAAA,CAAI,CAAC,WAAA,qBAClC,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,cAAY,WAAA,CAAY,KAAA;AAAA,UACxB,KAAK,WAAA,CAAY,cAAA;AAAA,UACjB,SAAA,EAAU,8BAAA;AAAA,UACV,OAAO,EAAE,SAAA,EAAW,CAAA,WAAA,EAAc,WAAA,CAAY,KAAK,CAAA,GAAA,CAAA,EAAM;AAAA,UAExD,qBAAW,KAAA,CAAM,WAAA,CAAY,KAAK,CAAA,EAAG,WAAA,CAAY,OAAO,WAAW;AAAA,SAAA;AAAA,QAN/D,WAAA,CAAY;AAAA,OAQpB,CAAA,EACH;AAAA;AAAA,GACF;AAEJ","file":"virtualized.js","sourcesContent":["import { useRef, type ReactNode, type Ref } from \"react\";\nimport { useVirtualizer, type VirtualItem } from \"@tanstack/react-virtual\";\nimport { cn } from \"../lib/utils\";\n\nexport interface VirtualizedListProps<T> {\n  items: T[];\n  estimateSize: (index: number) => number;\n  renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;\n  overscan?: number;\n  height?: number | string;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function VirtualizedList<T>({\n  items,\n  estimateSize,\n  renderItem,\n  overscan = 5,\n  height = 400,\n  className,\n  ref,\n}: VirtualizedListProps<T>) {\n  const parentRef = useRef<HTMLDivElement>(null);\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize,\n    overscan,\n  });\n\n  return (\n    <div\n      ref={(node) => {\n        (parentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }}\n      className={cn(\n        \"overflow-auto\",\n        \"rounded-[var(--ds-radius-md)]\",\n        \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n        \"bg-[var(--ds-bg-surface)]\",\n        className,\n      )}\n      style={{ height }}\n    >\n      <div className=\"relative w-full\" style={{ height: virtualizer.getTotalSize() }}>\n        {virtualizer.getVirtualItems().map((virtualItem) => (\n          <div\n            key={virtualItem.key}\n            data-index={virtualItem.index}\n            ref={virtualizer.measureElement}\n            className=\"absolute top-0 left-0 w-full\"\n            style={{ transform: `translateY(${virtualItem.start}px)` }}\n          >\n            {renderItem(items[virtualItem.index], virtualItem.index, virtualItem)}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gridsmith-ui",
-  "version": "0.3.5",
-  "description": "Gridsmith component library — 82 React components with design tokens and a CSS custom property theming engine",
+  "version": "0.6.0",
+  "description": "Gridsmith component library \u2014 98 React components with design tokens and a CSS custom property theming engine",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -19,6 +19,30 @@
       "types": "./dist/icons.d.ts",
       "import": "./dist/icons.js"
     },
+    "./charts": {
+      "types": "./dist/charts.d.ts",
+      "import": "./dist/charts.js"
+    },
+    "./editor": {
+      "types": "./dist/editor.d.ts",
+      "import": "./dist/editor.js"
+    },
+    "./kanban": {
+      "types": "./dist/kanban.d.ts",
+      "import": "./dist/kanban.js"
+    },
+    "./data-grid": {
+      "types": "./dist/data-grid.d.ts",
+      "import": "./dist/data-grid.js"
+    },
+    "./virtualized": {
+      "types": "./dist/virtualized.d.ts",
+      "import": "./dist/virtualized.js"
+    },
+    "./resizable": {
+      "types": "./dist/resizable.d.ts",
+      "import": "./dist/resizable.js"
+    },
     "./roots.css": "./dist/roots.css",
     "./tokens.css": "./dist/tokens.css",
     "./tailwind.css": "./dist/tailwind.css"
@@ -43,12 +67,44 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "lucide-react": "^1.0.0",
+    "recharts": "^3.8.0",
     "@phosphor-icons/react": "^2.0.0",
     "@heroicons/react": "^2.0.0",
     "@tabler/icons-react": "^3.0.0",
-    "react-icons": "^5.0.0"
+    "react-icons": "^5.0.0",
+    "@tiptap/react": "^3.22.4",
+    "@tiptap/pm": "^3.22.4",
+    "@tiptap/starter-kit": "^3.22.4",
+    "@tiptap/extension-code-block-lowlight": "^3.22.4",
+    "@tiptap/extension-color": "^3.22.4",
+    "@tiptap/extension-font-family": "^3.22.4",
+    "@tiptap/extension-highlight": "^3.22.4",
+    "@tiptap/extension-image": "^3.22.4",
+    "@tiptap/extension-link": "^3.22.4",
+    "@tiptap/extension-placeholder": "^3.22.4",
+    "@tiptap/extension-subscript": "^3.22.4",
+    "@tiptap/extension-superscript": "^3.22.4",
+    "@tiptap/extension-table": "^3.22.4",
+    "@tiptap/extension-table-cell": "^3.22.4",
+    "@tiptap/extension-table-header": "^3.22.4",
+    "@tiptap/extension-table-row": "^3.22.4",
+    "@tiptap/extension-task-item": "^3.22.4",
+    "@tiptap/extension-task-list": "^3.22.4",
+    "@tiptap/extension-text-align": "^3.22.4",
+    "@tiptap/extension-text-style": "^3.22.4",
+    "@tiptap/extension-underline": "^3.22.4",
+    "lowlight": "^3.3.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.24",
+    "react-resizable-panels": "^4.10.0"
   },
   "peerDependenciesMeta": {
+    "recharts": {
+      "optional": true
+    },
     "@phosphor-icons/react": {
       "optional": true
     },
@@ -60,6 +116,90 @@
     },
     "react-icons": {
       "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "@tiptap/extension-code-block-lowlight": {
+      "optional": true
+    },
+    "@tiptap/extension-color": {
+      "optional": true
+    },
+    "@tiptap/extension-font-family": {
+      "optional": true
+    },
+    "@tiptap/extension-highlight": {
+      "optional": true
+    },
+    "@tiptap/extension-image": {
+      "optional": true
+    },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extension-placeholder": {
+      "optional": true
+    },
+    "@tiptap/extension-subscript": {
+      "optional": true
+    },
+    "@tiptap/extension-superscript": {
+      "optional": true
+    },
+    "@tiptap/extension-table": {
+      "optional": true
+    },
+    "@tiptap/extension-table-cell": {
+      "optional": true
+    },
+    "@tiptap/extension-table-header": {
+      "optional": true
+    },
+    "@tiptap/extension-table-row": {
+      "optional": true
+    },
+    "@tiptap/extension-task-item": {
+      "optional": true
+    },
+    "@tiptap/extension-task-list": {
+      "optional": true
+    },
+    "@tiptap/extension-text-align": {
+      "optional": true
+    },
+    "@tiptap/extension-text-style": {
+      "optional": true
+    },
+    "@tiptap/extension-underline": {
+      "optional": true
+    },
+    "lowlight": {
+      "optional": true
+    },
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -86,4 +226,4 @@
     "type": "git",
     "url": "https://github.com/gridsmith/ui"
   }
-}
+}

package/dist/chunk-5WRI5ZAA.js

@@ -1,29 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-export { __commonJS, __toESM };
-//# sourceMappingURL=chunk-5WRI5ZAA.js.map
-//# sourceMappingURL=chunk-5WRI5ZAA.js.map

package/dist/chunk-5WRI5ZAA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-5WRI5ZAA.js"}

package/dist/chunk-5XIPPVH7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../showcase/src/lib/utils.ts"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AAEO,IAAM,cAAA,GAAiB;AAEvB,IAAM,aAAA,GAAgB,GAAG,cAAc,CAAA,qDAAA;AAEvC,IAAM,aAAA,GAAgB,GAAG,cAAc,CAAA,sDAAA;AAEvC,IAAM,cAAA,GAAiB,GAAG,cAAc,CAAA,yDAAA;AAExC,SAAS,cAAA,GAAiB;AAC/B,EAAA,QAAA,CAAS,IAAA,CAAK,MAAM,QAAA,GAAW,QAAA;AACjC;AAEO,SAAS,gBAAA,GAAmB;AACjC,EAAA,QAAA,CAAS,IAAA,CAAK,MAAM,QAAA,GAAW,EAAA;AACjC","file":"chunk-5XIPPVH7.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n\nexport const GLASS_BACKDROP = \"[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]\";\n\nexport const GLASS_SURFACE = `${GLASS_BACKDROP} shadow-[var(--ds-shadow-card),var(--ds-glass-inset)]`;\n\nexport const GLASS_OVERLAY = `${GLASS_BACKDROP} shadow-[var(--ds-shadow-modal),var(--ds-glass-inset)]`;\n\nexport const GLASS_DROPDOWN = `${GLASS_BACKDROP} shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]`;\n\nexport function lockBodyScroll() {\n  document.body.style.overflow = \"hidden\";\n}\n\nexport function unlockBodyScroll() {\n  document.body.style.overflow = \"\";\n}\n"]}

package/dist/chunk-WVB3SRXW.js

@@ -1,82 +0,0 @@
-import { createContext, useContext, useState, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-// ../../showcase/src/lib/icons.tsx
-var packCache = /* @__PURE__ */ new Map();
-var fullyLoaded = /* @__PURE__ */ new Set();
-async function loadPack(pack) {
-  switch (pack) {
-    case "lucide":
-      return (await import('./lucide-6TGT4G26.js')).load();
-    case "phosphor":
-      return (await import('./phosphor-BWDP4PU7.js')).load();
-    case "heroicons":
-      return (await import('./heroicons-HJTKMLIJ.js')).load();
-    case "tabler":
-      return (await import('./tabler-6TPNTLFV.js')).load();
-    case "feather":
-      return (await import('./feather-N37QZ7LA.js')).load();
-  }
-}
-var IconCtx = createContext({ pack: "lucide", weight: 1.5 });
-function IconProvider({ pack, weight, children }) {
-  return /* @__PURE__ */ jsx(IconCtx.Provider, { value: { pack, weight }, children });
-}
-function useIconMap(pack) {
-  const [map, setMap] = useState(packCache.get(pack) ?? null);
-  useEffect(() => {
-    if (fullyLoaded.has(pack)) {
-      const cached = packCache.get(pack);
-      if (cached) setMap(cached);
-      return;
-    }
-    let cancelled = false;
-    loadPack(pack).then((loaded) => {
-      packCache.set(pack, loaded);
-      fullyLoaded.add(pack);
-      if (!cancelled) setMap(loaded);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [pack]);
-  return map;
-}
-function getPhosphorWeight(numericWeight) {
-  if (numericWeight <= 0.75) return "thin";
-  if (numericWeight <= 1.25) return "light";
-  if (numericWeight <= 1.75) return "regular";
-  if (numericWeight <= 2.25) return "bold";
-  return "fill";
-}
-function Icon({ name, size = 16, className }) {
-  const { pack, weight } = useContext(IconCtx);
-  const map = useIconMap(pack);
-  const needsFallback = pack !== "lucide" && map !== null && !map[name];
-  const lucideMap = useIconMap(needsFallback ? "lucide" : pack);
-  if (!map) return null;
-  let Comp = map[name];
-  let renderPack = pack;
-  if (!Comp) {
-    if (!needsFallback || !lucideMap?.[name]) return null;
-    Comp = lucideMap[name];
-    renderPack = "lucide";
-  }
-  if (renderPack === "phosphor") {
-    return /* @__PURE__ */ jsx(Comp, { size, weight: getPhosphorWeight(weight), className });
-  }
-  if (renderPack === "heroicons") {
-    return /* @__PURE__ */ jsx(Comp, { className, style: { width: size, height: size, strokeWidth: weight } });
-  }
-  if (renderPack === "tabler") {
-    return /* @__PURE__ */ jsx(Comp, { size, stroke: weight, className });
-  }
-  if (renderPack === "feather") {
-    return /* @__PURE__ */ jsx(Comp, { size, className, strokeWidth: weight });
-  }
-  return /* @__PURE__ */ jsx(Comp, { size, strokeWidth: weight, className });
-}
-
-export { Icon, IconProvider };
-//# sourceMappingURL=chunk-WVB3SRXW.js.map
-//# sourceMappingURL=chunk-WVB3SRXW.js.map

package/dist/chunk-WVB3SRXW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../showcase/src/lib/icons.tsx"],"names":[],"mappings":"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","file":"chunk-WVB3SRXW.js","sourcesContent":["import { createContext, useContext, useState, useEffect, type ReactNode, type ComponentType } from \"react\";\n\n/* ── Types ────────────────────────────────────────────────────── */\n\n/**\n * Runtime list of curated icon names. The CuratedIconName type derives from\n * this array, so adding a name here extends autocomplete automatically.\n * Every name must have an alias (or auto-kebab match) in ALL five packs —\n * icon-completeness.test.tsx enforces this.\n */\nexport const CURATED_ICON_NAMES = [\n  \"home\", \"folder\", \"chart\", \"settings\",\n  \"chevron-right\", \"close\", \"plus\", \"search\",\n  \"bell\", \"user\", \"check\", \"warning\", \"info\", \"error\",\n  \"clock\", \"calendar\",\n  \"bold\", \"italic\", \"underline\", \"strikethrough\",\n  \"align-left\", \"align-center\", \"align-right\",\n  \"list\", \"list-ordered\", \"list-checks\",\n  \"link\", \"image\", \"table\", \"code\", \"quote\", \"minus\",\n  \"superscript\", \"subscript\", \"highlight\", \"type\",\n  \"chevron-up\", \"chevron-down\", \"trash\",\n  \"undo\", \"redo\",\n  \"arrow-left\", \"grip-vertical\",\n  \"mic\", \"paperclip\", \"send\",\n  \"log-out\", \"edit\", \"menu\",\n  \"star\", \"bookmark\", \"download\", \"upload\",\n] as const;\n\ntype CuratedIconName = (typeof CURATED_ICON_NAMES)[number];\n\n/**\n * Curated names provide autocomplete and work identically across all 5 packs.\n * Any kebab-case string is also accepted — it resolves directly against the\n * active pack's native exports (e.g. \"clipboard-copy\" → Lucide's ClipboardCopy).\n */\nexport type IconName = CuratedIconName | (string & {});\n\nexport type IconPack = \"lucide\" | \"phosphor\" | \"heroicons\" | \"tabler\" | \"feather\";\n\ntype IconComponent = ComponentType<Record<string, unknown>>;\ntype IconMap = Record<string, IconComponent>;\n\n/* ── Pack loading ─────────────────────────────────────────────── \n   Each pack is isolated in its own file under ./icon-packs/.\n   Only the active pack's module is dynamically imported at runtime,\n   so bundlers (including Turbopack) won't resolve unused pack\n   dependencies at build time. */\n\nconst packCache = new Map<IconPack, IconMap>();\nconst fullyLoaded = new Set<IconPack>();\n\nasync function loadPack(pack: IconPack): Promise<IconMap> {\n  switch (pack) {\n    case \"lucide\": return (await import(\"./icon-packs/lucide\")).load();\n    case \"phosphor\": return (await import(\"./icon-packs/phosphor\")).load();\n    case \"heroicons\": return (await import(\"./icon-packs/heroicons\")).load();\n    case \"tabler\": return (await import(\"./icon-packs/tabler\")).load();\n    case \"feather\": return (await import(\"./icon-packs/feather\")).load();\n  }\n}\n\n/** Exported for the icon-completeness test — not part of the public API. */\nexport const packLoaders: Record<IconPack, () => Promise<IconMap>> = {\n  lucide: () => loadPack(\"lucide\"),\n  phosphor: () => loadPack(\"phosphor\"),\n  heroicons: () => loadPack(\"heroicons\"),\n  tabler: () => loadPack(\"tabler\"),\n  feather: () => loadPack(\"feather\"),\n};\n\n/* ── Context ──────────────────────────────────────────────────── */\n\ninterface IconContextValue {\n  pack: IconPack;\n  weight: number;\n}\n\nconst IconCtx = createContext<IconContextValue>({ pack: \"lucide\", weight: 1.5 });\n\nexport function IconProvider({ pack, weight, children }: { pack: IconPack; weight: number; children: ReactNode }) {\n  return <IconCtx.Provider value={{ pack, weight }}>{children}</IconCtx.Provider>;\n}\n\n/* ── Hook ─────────────────────────────────────────────────────── */\n\nfunction useIconMap(pack: IconPack): IconMap | null {\n  const [map, setMap] = useState<IconMap | null>(packCache.get(pack) ?? null);\n\n  useEffect(() => {\n    if (fullyLoaded.has(pack)) {\n      const cached = packCache.get(pack);\n      if (cached) setMap(cached);\n      return;\n    }\n\n    let cancelled = false;\n    loadPack(pack).then((loaded) => {\n      packCache.set(pack, loaded);\n      fullyLoaded.add(pack);\n      if (!cancelled) setMap(loaded);\n    });\n    return () => { cancelled = true; };\n  }, [pack]);\n\n  return map;\n}\n\n/* ── Phosphor weight mapping ──────────────────────────────────── */\n\nfunction getPhosphorWeight(numericWeight: number): \"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\" {\n  if (numericWeight <= 0.75) return \"thin\";\n  if (numericWeight <= 1.25) return \"light\";\n  if (numericWeight <= 1.75) return \"regular\";\n  if (numericWeight <= 2.25) return \"bold\";\n  return \"fill\";\n}\n\n/* ── Icon component ───────────────────────────────────────────── */\n\nexport function Icon({ name, size = 16, className }: { name: IconName; size?: number; className?: string }) {\n  const { pack, weight } = useContext(IconCtx);\n  const map = useIconMap(pack);\n\n  // Lucide doubles as the universal fallback: when the active pack has loaded\n  // but lacks the requested name, resolve against lucide instead of rendering\n  // nothing. The hook call is unconditional (no conditional-hook violation) —\n  // it only re-targets lucide once a miss is confirmed, which triggers the\n  // lazy load and a re-render when the map arrives.\n  const needsFallback = pack !== \"lucide\" && map !== null && !map[name];\n  const lucideMap = useIconMap(needsFallback ? \"lucide\" : pack);\n\n  if (!map) return null;\n\n  let Comp = map[name];\n  let renderPack: IconPack = pack;\n  if (!Comp) {\n    if (!needsFallback || !lucideMap?.[name]) return null;\n    Comp = lucideMap[name];\n    renderPack = \"lucide\";\n  }\n\n  if (renderPack === \"phosphor\") {\n    return <Comp size={size} weight={getPhosphorWeight(weight)} className={className} />;\n  }\n\n  if (renderPack === \"heroicons\") {\n    return <Comp className={className} style={{ width: size, height: size, strokeWidth: weight }} />;\n  }\n\n  if (renderPack === \"tabler\") {\n    return <Comp size={size} stroke={weight} className={className} />;\n  }\n\n  if (renderPack === \"feather\") {\n    return <Comp size={size} className={className} strokeWidth={weight} />;\n  }\n\n  return <Comp size={size} strokeWidth={weight} className={className} />;\n}\n"]}