gridsmith-ui 0.4.0 → 0.6.0

package/dist/kanban.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    tags?: string[];
+    avatar?: string;
+}
+interface KanbanColumn {
+    id: string;
+    title: string;
+    cards: KanbanCard[];
+    color?: string;
+}
+interface KanbanBoardProps {
+    columns: KanbanColumn[];
+    onColumnsChange?: (columns: KanbanColumn[]) => void;
+    renderCard?: (card: KanbanCard) => ReactNode;
+    className?: string;
+}
+declare function KanbanBoard({ columns: controlledCols, onColumnsChange, renderCard, className, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
+
+export { KanbanBoard };

package/dist/kanban.js

@@ -0,0 +1,224 @@
+import { Badge } from './chunk-4SDKQDYV.js';
+import { useTextOverflow, Tooltip } from './chunk-CHNY75QI.js';
+import { Icon } from './chunk-XUBVMRIE.js';
+import { cn } from './chunk-IUBWNDUK.js';
+import { useState } from 'react';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, DragOverlay } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SortableCard({
+  card,
+  renderCard
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: card.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      ...listeners,
+      className: cn(
+        "rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+        "bg-[var(--ds-bg-surface)] p-ds-3 cursor-grab active:cursor-grabbing",
+        "shadow-[var(--ds-shadow-button)]",
+        "transition-shadow duration-[var(--ds-transition-speed)]",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        isDragging && "opacity-30 scale-[1.02]"
+      ),
+      children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card })
+    }
+  );
+}
+function ClampedDescription({ children }) {
+  const { ref, isTruncated } = useTextOverflow({ lines: 2 });
+  const el = /* @__PURE__ */ jsx("p", { ref, className: "text-xs text-[var(--ds-text-secondary)] line-clamp-2", children });
+  if (!isTruncated) return el;
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
+}
+function TruncTitle({ children }) {
+  const { ref, isTruncated } = useTextOverflow({ lines: 1 });
+  const el = /* @__PURE__ */ jsx("p", { ref, className: "text-sm font-medium text-[var(--ds-text-primary)] truncate", children });
+  if (!isTruncated) return el;
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
+}
+function DefaultCard({ card }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-ds-2", children: [
+    /* @__PURE__ */ jsx(TruncTitle, { children: card.title }),
+    card.description && /* @__PURE__ */ jsx(ClampedDescription, { children: card.description }),
+    card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-ds-1", children: card.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "subtle", size: "sm", children: tag }, tag)) })
+  ] });
+}
+function OverlayCard({
+  card,
+  renderCard
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+        "bg-[var(--ds-bg-surface)] p-ds-3 shadow-[var(--ds-shadow-card)]",
+        "rotate-2"
+      ),
+      children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card })
+    }
+  );
+}
+function KanbanBoard({
+  columns: controlledCols,
+  onColumnsChange,
+  renderCard,
+  className
+}) {
+  const [internalCols, setInternalCols] = useState(controlledCols);
+  const columns = onColumnsChange ? controlledCols : internalCols;
+  const setCols = (next) => {
+    if (typeof next === "function") {
+      const updated = next(columns);
+      if (onColumnsChange) onColumnsChange(updated);
+      else setInternalCols(updated);
+    } else {
+      if (onColumnsChange) onColumnsChange(next);
+      else setInternalCols(next);
+    }
+  };
+  const [activeCard, setActiveCard] = useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const findColumnByCardId = (cardId) => columns.find((col) => col.cards.some((c) => c.id === cardId));
+  const handleDragStart = (event) => {
+    const col = findColumnByCardId(String(event.active.id));
+    const card = col?.cards.find((c) => c.id === String(event.active.id));
+    if (card) setActiveCard(card);
+  };
+  const handleDragOver = (event) => {
+    const { active, over } = event;
+    if (!over) return;
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    if (activeId === overId) return;
+    const activeCol = findColumnByCardId(activeId);
+    const overCol = findColumnByCardId(overId) ?? columns.find((c) => c.id === overId);
+    if (!activeCol || !overCol || activeCol.id === overCol.id) return;
+    setCols(
+      (prev) => prev.map((col) => {
+        if (col.id === activeCol.id) {
+          return { ...col, cards: col.cards.filter((c) => c.id !== activeId) };
+        }
+        if (col.id === overCol.id) {
+          const card = activeCol.cards.find((c) => c.id === activeId);
+          if (!card) return col;
+          const overIdx = col.cards.findIndex((c) => c.id === overId);
+          const newCards = [...col.cards];
+          if (overIdx >= 0) {
+            newCards.splice(overIdx, 0, card);
+          } else {
+            newCards.push(card);
+          }
+          return { ...col, cards: newCards };
+        }
+        return col;
+      })
+    );
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    setActiveCard(null);
+    if (!over || active.id === over.id) return;
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    const col = findColumnByCardId(activeId);
+    if (!col) return;
+    const oldIdx = col.cards.findIndex((c) => c.id === activeId);
+    const newIdx = col.cards.findIndex((c) => c.id === overId);
+    if (oldIdx >= 0 && newIdx >= 0 && oldIdx !== newIdx) {
+      setCols(
+        (prev) => prev.map((c) => {
+          if (c.id !== col.id) return c;
+          const newCards = [...c.cards];
+          const [moved] = newCards.splice(oldIdx, 1);
+          newCards.splice(newIdx, 0, moved);
+          return { ...c, cards: newCards };
+        })
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCorners,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn("flex gap-ds-4 overflow-x-auto pb-ds-2 snap-x snap-mandatory sm:snap-none", className), children: columns.map((col) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col shrink-0 w-[calc(100vw-4rem)] sm:w-[280px] snap-center",
+              "bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-lg)]",
+              "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-ds-3 py-ds-2.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
+                  col.color && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "w-2.5 h-2.5 rounded-[var(--ds-radius-full)] shrink-0",
+                      style: { backgroundColor: col.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: col.title }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)] tabular-nums", children: col.cards.length })
+                ] }),
+                /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14, className: "text-[var(--ds-text-muted)]" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                SortableContext,
+                {
+                  items: col.cards.map((c) => c.id),
+                  strategy: verticalListSortingStrategy,
+                  id: col.id,
+                  children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-2.5 px-ds-3 pb-ds-3 min-h-[60px]", children: col.cards.map((card) => /* @__PURE__ */ jsx(
+                    SortableCard,
+                    {
+                      card,
+                      renderCard
+                    },
+                    card.id
+                  )) })
+                }
+              )
+            ]
+          },
+          col.id
+        )) }),
+        /* @__PURE__ */ jsx(DragOverlay, { children: activeCard && /* @__PURE__ */ jsx(OverlayCard, { card: activeCard, renderCard }) })
+      ]
+    }
+  );
+}
+
+export { KanbanBoard };
+//# sourceMappingURL=kanban.js.map
+//# sourceMappingURL=kanban.js.map

package/dist/kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/components/KanbanBoard.tsx"],"names":[],"mappings":"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","file":"kanban.js","sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport {\n  DndContext,\n  closestCorners,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragOverEvent,\n  DragOverlay,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../lib/icons\";\nimport { Tooltip } from \"./Tooltip\";\nimport { useTextOverflow } from \"../lib/use-text-overflow\";\nimport { Badge } from \"./Badge\";\n\nexport interface KanbanCard {\n  id: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  avatar?: string;\n}\n\nexport interface KanbanColumn {\n  id: string;\n  title: string;\n  cards: KanbanCard[];\n  color?: string;\n}\n\nexport interface KanbanBoardProps {\n  columns: KanbanColumn[];\n  onColumnsChange?: (columns: KanbanColumn[]) => void;\n  renderCard?: (card: KanbanCard) => ReactNode;\n  className?: string;\n}\n\nfunction SortableCard({\n  card,\n  renderCard,\n}: {\n  card: KanbanCard;\n  renderCard?: (card: KanbanCard) => ReactNode;\n}) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: card.id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  };\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      {...attributes}\n      {...listeners}\n      className={cn(\n        \"rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n        \"bg-[var(--ds-bg-surface)] p-ds-3 cursor-grab active:cursor-grabbing\",\n        \"shadow-[var(--ds-shadow-button)]\",\n        \"transition-shadow duration-[var(--ds-transition-speed)]\",\n        \"focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]\",\n        isDragging && \"opacity-30 scale-[1.02]\",\n      )}\n    >\n      {renderCard ? (\n        renderCard(card)\n      ) : (\n        <DefaultCard card={card} />\n      )}\n    </div>\n  );\n}\n\nfunction ClampedDescription({ children }: { children: string }) {\n  const { ref, isTruncated } = useTextOverflow({ lines: 2 });\n  const el = <p ref={ref} className=\"text-xs text-[var(--ds-text-secondary)] line-clamp-2\">{children}</p>;\n  if (!isTruncated) return el;\n  return <Tooltip content={children}>{el}</Tooltip>;\n}\n\nfunction TruncTitle({ children }: { children: string }) {\n  const { ref, isTruncated } = useTextOverflow({ lines: 1 });\n  const el = <p ref={ref} className=\"text-sm font-medium text-[var(--ds-text-primary)] truncate\">{children}</p>;\n  if (!isTruncated) return el;\n  return <Tooltip content={children}>{el}</Tooltip>;\n}\n\nfunction DefaultCard({ card }: { card: KanbanCard }) {\n  return (\n    <div className=\"space-y-ds-2\">\n      <TruncTitle>{card.title}</TruncTitle>\n      {card.description && (\n        <ClampedDescription>{card.description}</ClampedDescription>\n      )}\n      {card.tags && card.tags.length > 0 && (\n        <div className=\"flex flex-wrap gap-ds-1\">\n          {card.tags.map((tag) => (\n            <Badge key={tag} variant=\"subtle\" size=\"sm\">{tag}</Badge>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction OverlayCard({\n  card,\n  renderCard,\n}: {\n  card: KanbanCard;\n  renderCard?: (card: KanbanCard) => ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        \"rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n        \"bg-[var(--ds-bg-surface)] p-ds-3 shadow-[var(--ds-shadow-card)]\",\n        \"rotate-2\",\n      )}\n    >\n      {renderCard ? renderCard(card) : <DefaultCard card={card} />}\n    </div>\n  );\n}\n\nexport function KanbanBoard({\n  columns: controlledCols,\n  onColumnsChange,\n  renderCard,\n  className,\n}: KanbanBoardProps) {\n  const [internalCols, setInternalCols] = useState<KanbanColumn[]>(controlledCols);\n  const columns = onColumnsChange ? controlledCols : internalCols;\n  const setCols = (next: KanbanColumn[] | ((prev: KanbanColumn[]) => KanbanColumn[])) => {\n    if (typeof next === \"function\") {\n      const updated = next(columns);\n      if (onColumnsChange) onColumnsChange(updated);\n      else setInternalCols(updated);\n    } else {\n      if (onColumnsChange) onColumnsChange(next);\n      else setInternalCols(next);\n    }\n  };\n\n  const [activeCard, setActiveCard] = useState<KanbanCard | null>(null);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const findColumnByCardId = (cardId: string) =>\n    columns.find((col) => col.cards.some((c) => c.id === cardId));\n\n  const handleDragStart = (event: DragStartEvent) => {\n    const col = findColumnByCardId(String(event.active.id));\n    const card = col?.cards.find((c) => c.id === String(event.active.id));\n    if (card) setActiveCard(card);\n  };\n\n  const handleDragOver = (event: DragOverEvent) => {\n    const { active, over } = event;\n    if (!over) return;\n\n    const activeId = String(active.id);\n    const overId = String(over.id);\n    if (activeId === overId) return;\n\n    const activeCol = findColumnByCardId(activeId);\n    const overCol =\n      findColumnByCardId(overId) ?? columns.find((c) => c.id === overId);\n\n    if (!activeCol || !overCol || activeCol.id === overCol.id) return;\n\n    setCols((prev) =>\n      prev.map((col) => {\n        if (col.id === activeCol.id) {\n          return { ...col, cards: col.cards.filter((c) => c.id !== activeId) };\n        }\n        if (col.id === overCol.id) {\n          const card = activeCol.cards.find((c) => c.id === activeId);\n          if (!card) return col;\n          const overIdx = col.cards.findIndex((c) => c.id === overId);\n          const newCards = [...col.cards];\n          if (overIdx >= 0) {\n            newCards.splice(overIdx, 0, card);\n          } else {\n            newCards.push(card);\n          }\n          return { ...col, cards: newCards };\n        }\n        return col;\n      }),\n    );\n  };\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n    setActiveCard(null);\n    if (!over || active.id === over.id) return;\n\n    const activeId = String(active.id);\n    const overId = String(over.id);\n\n    const col = findColumnByCardId(activeId);\n    if (!col) return;\n\n    const oldIdx = col.cards.findIndex((c) => c.id === activeId);\n    const newIdx = col.cards.findIndex((c) => c.id === overId);\n\n    if (oldIdx >= 0 && newIdx >= 0 && oldIdx !== newIdx) {\n      setCols((prev) =>\n        prev.map((c) => {\n          if (c.id !== col.id) return c;\n          const newCards = [...c.cards];\n          const [moved] = newCards.splice(oldIdx, 1);\n          newCards.splice(newIdx, 0, moved);\n          return { ...c, cards: newCards };\n        }),\n      );\n    }\n  };\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCorners}\n      onDragStart={handleDragStart}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n    >\n      <div className={cn(\"flex gap-ds-4 overflow-x-auto pb-ds-2 snap-x snap-mandatory sm:snap-none\", className)}>\n        {columns.map((col) => (\n          <div\n            key={col.id}\n            className={cn(\n              \"flex flex-col shrink-0 w-[calc(100vw-4rem)] sm:w-[280px] snap-center\",\n              \"bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-lg)]\",\n              \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n            )}\n          >\n            <div className=\"flex items-center justify-between px-ds-3 py-ds-2.5\">\n              <div className=\"flex items-center gap-ds-2\">\n                {col.color && (\n                  <span\n                    className=\"w-2.5 h-2.5 rounded-[var(--ds-radius-full)] shrink-0\"\n                    style={{ backgroundColor: col.color }}\n                  />\n                )}\n                <span className=\"text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]\">\n                  {col.title}\n                </span>\n                <span className=\"text-xs text-[var(--ds-text-muted)] tabular-nums\">\n                  {col.cards.length}\n                </span>\n              </div>\n              <Icon name=\"plus\" size={14} className=\"text-[var(--ds-text-muted)]\" />\n            </div>\n\n            <SortableContext\n              items={col.cards.map((c) => c.id)}\n              strategy={verticalListSortingStrategy}\n              id={col.id}\n            >\n              <div className=\"flex flex-col gap-ds-2.5 px-ds-3 pb-ds-3 min-h-[60px]\">\n                {col.cards.map((card) => (\n                  <SortableCard\n                    key={card.id}\n                    card={card}\n                    renderCard={renderCard}\n                  />\n                ))}\n              </div>\n            </SortableContext>\n          </div>\n        ))}\n      </div>\n\n      <DragOverlay>\n        {activeCard && <OverlayCard card={activeCard} renderCard={renderCard} />}\n      </DragOverlay>\n    </DndContext>\n  );\n}\n"]}

package/dist/{lucide-Z74WVRAK.js → lucide-AILUUOAJ.js}

@@ -1,5 +1,4 @@
 import { buildExtendedMap } from './chunk-GYVBRUO2.js';
-import './chunk-5WRI5ZAA.js';
 import { Upload, Download, Bookmark, Star, Menu, Pencil, LogOut, Send, Paperclip, Mic, GripVertical, ArrowLeft, Redo2, Undo2, Trash2, ChevronDown, ChevronUp, Type, Highlighter, Subscript, Superscript, Minus, Quote, Code, Table, Image, Link, ListChecks, ListOrdered, List, AlignRight, AlignCenter, AlignLeft, Strikethrough, Underline, Italic, Bold, CalendarDays, Clock, AlertCircle, Info, AlertTriangle, Check, User, Bell, Search, Plus, X, ChevronRight, Settings, BarChart3, FolderKanban, Home } from 'lucide-react';
 
 var curated = {
@@ -68,5 +67,5 @@ async function loadExtended() {
 }
 
 export { loadCurated, loadExtended };
-//# sourceMappingURL=lucide-Z74WVRAK.js.map
-//# sourceMappingURL=lucide-Z74WVRAK.js.map
+//# sourceMappingURL=lucide-AILUUOAJ.js.map
+//# sourceMappingURL=lucide-AILUUOAJ.js.map

package/dist/lucide-AILUUOAJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/lib/icon-packs/lucide.ts"],"names":[],"mappings":";;;AAqBA,IAAM,OAAA,GAAmB;AAAA,EACvB,MAAA,EAAQ,IAAA;AAAA,EAAM,QAAA,EAAU,YAAA;AAAA,EAAc,OAAA,EAAS,SAAA;AAAA,EAAW,UAAA,EAAY,QAAA;AAAA,EACtE,eAAA,EAAiB,YAAA;AAAA,EAAc,OAAA,EAAS,CAAA;AAAA,EAAG,MAAA,EAAQ,IAAA;AAAA,EAAM,QAAA,EAAU,MAAA;AAAA,EACnE,MAAA,EAAQ,IAAA;AAAA,EAAM,MAAA,EAAQ,IAAA;AAAA,EAAM,OAAA,EAAS,KAAA;AAAA,EAAO,SAAA,EAAW,aAAA;AAAA,EACvD,MAAA,EAAQ,IAAA;AAAA,EAAM,OAAA,EAAS,WAAA;AAAA,EAAa,OAAA,EAAS,KAAA;AAAA,EAAO,UAAA,EAAY,YAAA;AAAA,EAChE,MAAA,EAAQ,IAAA;AAAA,EAAM,QAAA,EAAU,MAAA;AAAA,EAAQ,WAAA,EAAa,SAAA;AAAA,EAAW,eAAA,EAAiB,aAAA;AAAA,EACzE,YAAA,EAAc,SAAA;AAAA,EAAW,cAAA,EAAgB,WAAA;AAAA,EAAa,aAAA,EAAe,UAAA;AAAA,EACrE,MAAA,EAAQ,IAAA;AAAA,EAAM,cAAA,EAAgB,WAAA;AAAA,EAAa,aAAA,EAAe,UAAA;AAAA,EAC1D,MAAA,EAAQ,IAAA;AAAA,EAAM,OAAA,EAAS,KAAA;AAAA,EAAO,OAAA,EAAS,KAAA;AAAA,EAAO,MAAA,EAAQ,IAAA;AAAA,EACtD,OAAA,EAAS,KAAA;AAAA,EAAO,OAAA,EAAS,KAAA;AAAA,EAAO,aAAA,EAAe,WAAA;AAAA,EAAa,WAAA,EAAa,SAAA;AAAA,EACzE,WAAA,EAAa,WAAA;AAAA,EAAa,MAAA,EAAQ,IAAA;AAAA,EAAM,YAAA,EAAc,SAAA;AAAA,EAAW,cAAA,EAAgB,WAAA;AAAA,EACjF,OAAA,EAAS,MAAA;AAAA,EAAQ,MAAA,EAAQ,KAAA;AAAA,EAAO,MAAA,EAAQ,KAAA;AAAA,EACxC,YAAA,EAAc,SAAA;AAAA,EAAW,eAAA,EAAiB,YAAA;AAAA,EAC1C,KAAA,EAAO,GAAA;AAAA,EAAK,WAAA,EAAa,SAAA;AAAA,EAAW,MAAA,EAAQ,IAAA;AAAA,EAC5C,SAAA,EAAW,MAAA;AAAA,EAAQ,MAAA,EAAQ,MAAA;AAAA,EAAQ,MAAA,EAAQ,IAAA;AAAA,EAC3C,MAAA,EAAQ,IAAA;AAAA,EAAM,UAAA,EAAY,QAAA;AAAA,EAC1B,UAAA,EAAY,QAAA;AAAA,EAAU,QAAA,EAAU;AAClC,CAAA;AAEO,SAAS,WAAA,GAAuB;AACrC,EAAA,OAAO,OAAA;AACT;AAEA,eAAsB,YAAA,GAAiC;AACrD,EAAA,MAAM,CAAA,GAAI,MAAM,OAAO,cAAc,CAAA;AACrC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,CAAA,EAAyC,EAAE,CAAA;AAC7E,EAAA,MAAA,CAAO,MAAA,CAAO,UAAU,OAAO,CAAA;AAC/B,EAAA,OAAO,QAAA;AACT","file":"lucide-AILUUOAJ.js","sourcesContent":["import type { IconMap } from './types'\nimport { buildExtendedMap } from './utils'\nimport {\n  Home, FolderKanban, BarChart3, Settings,\n  ChevronRight, X, Plus, Search,\n  Bell, User, Check, AlertTriangle,\n  Info, AlertCircle, Clock, CalendarDays,\n  Bold, Italic, Underline, Strikethrough,\n  AlignLeft, AlignCenter, AlignRight,\n  List, ListOrdered, ListChecks,\n  Link, Image, Table, Code,\n  Quote, Minus, Superscript, Subscript,\n  Highlighter, Type, ChevronUp, ChevronDown,\n  Trash2, Undo2, Redo2,\n  ArrowLeft, GripVertical,\n  Mic, Paperclip, Send,\n  LogOut, Pencil, Menu,\n  Star, Bookmark,\n  Download, Upload,\n} from \"lucide-react\"\n\nconst curated: IconMap = {\n  \"home\": Home, \"folder\": FolderKanban, \"chart\": BarChart3, \"settings\": Settings,\n  \"chevron-right\": ChevronRight, \"close\": X, \"plus\": Plus, \"search\": Search,\n  \"bell\": Bell, \"user\": User, \"check\": Check, \"warning\": AlertTriangle,\n  \"info\": Info, \"error\": AlertCircle, \"clock\": Clock, \"calendar\": CalendarDays,\n  \"bold\": Bold, \"italic\": Italic, \"underline\": Underline, \"strikethrough\": Strikethrough,\n  \"align-left\": AlignLeft, \"align-center\": AlignCenter, \"align-right\": AlignRight,\n  \"list\": List, \"list-ordered\": ListOrdered, \"list-checks\": ListChecks,\n  \"link\": Link, \"image\": Image, \"table\": Table, \"code\": Code,\n  \"quote\": Quote, \"minus\": Minus, \"superscript\": Superscript, \"subscript\": Subscript,\n  \"highlight\": Highlighter, \"type\": Type, \"chevron-up\": ChevronUp, \"chevron-down\": ChevronDown,\n  \"trash\": Trash2, \"undo\": Undo2, \"redo\": Redo2,\n  \"arrow-left\": ArrowLeft, \"grip-vertical\": GripVertical,\n  \"mic\": Mic, \"paperclip\": Paperclip, \"send\": Send,\n  \"log-out\": LogOut, \"edit\": Pencil, \"menu\": Menu,\n  \"star\": Star, \"bookmark\": Bookmark,\n  \"download\": Download, \"upload\": Upload,\n}\n\nexport function loadCurated(): IconMap {\n  return curated\n}\n\nexport async function loadExtended(): Promise<IconMap> {\n  const L = await import(\"lucide-react\")\n  const extended = buildExtendedMap(L as unknown as Record<string, unknown>, {})\n  Object.assign(extended, curated)\n  return extended\n}\n"]}

package/dist/{phosphor-DYUCR5S2.js → phosphor-A4JOBGMT.js}

@@ -1,5 +1,4 @@
 import { buildExtendedMap } from './chunk-GYVBRUO2.js';
-import './chunk-5WRI5ZAA.js';
 import { UploadSimple, DownloadSimple, BookmarkSimple, Star, List, PencilSimple, SignOut, PaperPlaneTilt, Paperclip, Microphone, DotsSixVertical, ArrowLeft, ArrowClockwise, ArrowCounterClockwise, Trash, CaretDown, CaretUp, TextT, Highlighter, TextSubscript, TextSuperscript, Minus, Quotes, Code, Table, Image, Link, ListChecks, ListNumbers, ListBullets, TextAlignRight, TextAlignCenter, TextAlignLeft, TextStrikethrough, TextUnderline, TextItalic, TextB, CalendarBlank, Clock, WarningCircle, Info, Warning, Check, User, Bell, MagnifyingGlass, Plus, X, CaretRight, Gear, ChartBar, FolderSimple, House } from '@phosphor-icons/react';
 
 var curated = {
@@ -68,5 +67,5 @@ async function loadExtended() {
 }
 
 export { loadCurated, loadExtended };
-//# sourceMappingURL=phosphor-DYUCR5S2.js.map
-//# sourceMappingURL=phosphor-DYUCR5S2.js.map
+//# sourceMappingURL=phosphor-A4JOBGMT.js.map
+//# sourceMappingURL=phosphor-A4JOBGMT.js.map

package/dist/phosphor-A4JOBGMT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/lib/icon-packs/phosphor.ts"],"names":[],"mappings":";;;AAwBA,IAAM,OAAA,GAAmB;AAAA,EACvB,MAAA,EAAQ,KAAA;AAAA,EAAO,QAAA,EAAU,YAAA;AAAA,EAAc,OAAA,EAAS,QAAA;AAAA,EAChD,UAAA,EAAY,IAAA;AAAA,EAAM,eAAA,EAAiB,UAAA;AAAA,EAAY,OAAA,EAAS,CAAA;AAAA,EACxD,MAAA,EAAQ,IAAA;AAAA,EAAM,QAAA,EAAU,eAAA;AAAA,EAAiB,MAAA,EAAQ,IAAA;AAAA,EAAM,MAAA,EAAQ,IAAA;AAAA,EAC/D,OAAA,EAAS,KAAA;AAAA,EAAO,SAAA,EAAW,OAAA;AAAA,EAAS,MAAA,EAAQ,IAAA;AAAA,EAC5C,OAAA,EAAS,aAAA;AAAA,EAAe,OAAA,EAAS,KAAA;AAAA,EAAO,UAAA,EAAY,aAAA;AAAA,EACpD,MAAA,EAAQ,KAAA;AAAA,EAAO,QAAA,EAAU,UAAA;AAAA,EAAY,WAAA,EAAa,aAAA;AAAA,EAClD,eAAA,EAAiB,iBAAA;AAAA,EAAmB,YAAA,EAAc,aAAA;AAAA,EAClD,cAAA,EAAgB,eAAA;AAAA,EAAiB,aAAA,EAAe,cAAA;AAAA,EAChD,MAAA,EAAQ,WAAA;AAAA,EAAa,cAAA,EAAgB,WAAA;AAAA,EAAa,aAAA,EAAe,UAAA;AAAA,EACjE,MAAA,EAAQ,IAAA;AAAA,EAAM,OAAA,EAAS,KAAA;AAAA,EAAO,OAAA,EAAS,KAAA;AAAA,EAAO,MAAA,EAAQ,IAAA;AAAA,EACtD,OAAA,EAAS,MAAA;AAAA,EAAQ,OAAA,EAAS,KAAA;AAAA,EAAO,aAAA,EAAe,eAAA;AAAA,EAChD,WAAA,EAAa,aAAA;AAAA,EAAe,WAAA,EAAa,WAAA;AAAA,EAAa,MAAA,EAAQ,KAAA;AAAA,EAC9D,YAAA,EAAc,OAAA;AAAA,EAAS,cAAA,EAAgB,SAAA;AAAA,EAAW,OAAA,EAAS,KAAA;AAAA,EAC3D,MAAA,EAAQ,qBAAA;AAAA,EAAuB,MAAA,EAAQ,cAAA;AAAA,EACvC,YAAA,EAAc,SAAA;AAAA,EAAW,eAAA,EAAiB,eAAA;AAAA,EAC1C,KAAA,EAAO,UAAA;AAAA,EAAY,WAAA,EAAa,SAAA;AAAA,EAAW,MAAA,EAAQ,cAAA;AAAA,EACnD,SAAA,EAAW,OAAA;AAAA,EAAS,MAAA,EAAQ,YAAA;AAAA,EAAc,MAAA,EAAQ,IAAA;AAAA,EAClD,MAAA,EAAQ,IAAA;AAAA,EAAM,UAAA,EAAY,cAAA;AAAA,EAC1B,UAAA,EAAY,cAAA;AAAA,EAAgB,QAAA,EAAU;AACxC,CAAA;AAEO,SAAS,WAAA,GAAuB;AACrC,EAAA,OAAO,OAAA;AACT;AAEA,eAAsB,YAAA,GAAiC;AACrD,EAAA,MAAM,CAAA,GAAI,MAAM,OAAO,uBAAuB,CAAA;AAC9C,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,CAAA,EAAyC,EAAE,CAAA;AAC7E,EAAA,MAAA,CAAO,MAAA,CAAO,UAAU,OAAO,CAAA;AAC/B,EAAA,OAAO,QAAA;AACT","file":"phosphor-A4JOBGMT.js","sourcesContent":["import type { IconMap } from './types'\nimport { buildExtendedMap } from './utils'\nimport {\n  House, FolderSimple, ChartBar,\n  Gear, CaretRight, X,\n  Plus, MagnifyingGlass, Bell, User,\n  Check, Warning, Info,\n  WarningCircle, Clock, CalendarBlank,\n  TextB, TextItalic, TextUnderline,\n  TextStrikethrough, TextAlignLeft,\n  TextAlignCenter, TextAlignRight,\n  ListBullets, ListNumbers, ListChecks,\n  Link, Image, Table, Code,\n  Quotes, Minus, TextSuperscript,\n  TextSubscript, Highlighter, TextT,\n  CaretUp, CaretDown, Trash,\n  ArrowCounterClockwise, ArrowClockwise,\n  ArrowLeft, DotsSixVertical,\n  Microphone, Paperclip, PaperPlaneTilt,\n  SignOut, PencilSimple, List,\n  Star, BookmarkSimple,\n  DownloadSimple, UploadSimple,\n} from \"@phosphor-icons/react\"\n\nconst curated: IconMap = {\n  \"home\": House, \"folder\": FolderSimple, \"chart\": ChartBar,\n  \"settings\": Gear, \"chevron-right\": CaretRight, \"close\": X,\n  \"plus\": Plus, \"search\": MagnifyingGlass, \"bell\": Bell, \"user\": User,\n  \"check\": Check, \"warning\": Warning, \"info\": Info,\n  \"error\": WarningCircle, \"clock\": Clock, \"calendar\": CalendarBlank,\n  \"bold\": TextB, \"italic\": TextItalic, \"underline\": TextUnderline,\n  \"strikethrough\": TextStrikethrough, \"align-left\": TextAlignLeft,\n  \"align-center\": TextAlignCenter, \"align-right\": TextAlignRight,\n  \"list\": ListBullets, \"list-ordered\": ListNumbers, \"list-checks\": ListChecks,\n  \"link\": Link, \"image\": Image, \"table\": Table, \"code\": Code,\n  \"quote\": Quotes, \"minus\": Minus, \"superscript\": TextSuperscript,\n  \"subscript\": TextSubscript, \"highlight\": Highlighter, \"type\": TextT,\n  \"chevron-up\": CaretUp, \"chevron-down\": CaretDown, \"trash\": Trash,\n  \"undo\": ArrowCounterClockwise, \"redo\": ArrowClockwise,\n  \"arrow-left\": ArrowLeft, \"grip-vertical\": DotsSixVertical,\n  \"mic\": Microphone, \"paperclip\": Paperclip, \"send\": PaperPlaneTilt,\n  \"log-out\": SignOut, \"edit\": PencilSimple, \"menu\": List,\n  \"star\": Star, \"bookmark\": BookmarkSimple,\n  \"download\": DownloadSimple, \"upload\": UploadSimple,\n}\n\nexport function loadCurated(): IconMap {\n  return curated\n}\n\nexport async function loadExtended(): Promise<IconMap> {\n  const P = await import(\"@phosphor-icons/react\")\n  const extended = buildExtendedMap(P as unknown as Record<string, unknown>, {})\n  Object.assign(extended, curated)\n  return extended\n}\n"]}

package/dist/resizable.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Separator, Panel, Group } from 'react-resizable-panels';
+import { ComponentProps } from 'react';
+
+type PanelGroupProps = ComponentProps<typeof Group>;
+type Direction = "horizontal" | "vertical";
+interface ResizablePanelGroupProps extends Omit<PanelGroupProps, "className" | "orientation"> {
+    direction?: Direction;
+    stackOnMobile?: boolean;
+    className?: string;
+    /** Map of panel id → percentage (0–100). Must be an object, never an array. Panels need matching id props. */
+    defaultLayout?: {
+        [panelId: string]: number;
+    };
+    /** Called after resize ends. Receives { [panelId]: number }, not number[]. */
+    onLayoutChanged?: (layout: {
+        [panelId: string]: number;
+    }) => void;
+}
+declare function ResizablePanelGroup({ className, direction, stackOnMobile, ...props }: ResizablePanelGroupProps): react_jsx_runtime.JSX.Element;
+type PanelProps = ComponentProps<typeof Panel>;
+interface ResizablePanelProps extends Omit<PanelProps, "className"> {
+    className?: string;
+    id?: string;
+    /** number = px. "30%" or "30" = percent. "28rem" / "400px" also valid. */
+    defaultSize?: number | string;
+    minSize?: number | string;
+    maxSize?: number | string;
+    collapsible?: boolean;
+}
+declare function ResizablePanel({ className, ...props }: ResizablePanelProps): react_jsx_runtime.JSX.Element;
+type PanelResizeHandleProps = ComponentProps<typeof Separator>;
+interface ResizableHandleProps extends Omit<PanelResizeHandleProps, "className"> {
+    withHandle?: boolean;
+    className?: string;
+}
+declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps): react_jsx_runtime.JSX.Element;
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/resizable.js

@@ -0,0 +1,89 @@
+import { useBreakpoint } from './chunk-DPF6776I.js';
+import { Icon } from './chunk-XUBVMRIE.js';
+import { cn } from './chunk-IUBWNDUK.js';
+import { Group, Panel, Separator } from 'react-resizable-panels';
+import { createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var DirectionCtx = createContext("horizontal");
+var MobileCtx = createContext(false);
+function ResizablePanelGroup({
+  className,
+  direction = "horizontal",
+  stackOnMobile = true,
+  ...props
+}) {
+  const isMobile = useBreakpoint("sm");
+  const shouldStack = stackOnMobile && isMobile && direction === "horizontal";
+  const effectiveDirection = shouldStack ? "vertical" : direction;
+  return /* @__PURE__ */ jsx(DirectionCtx.Provider, { value: effectiveDirection, children: /* @__PURE__ */ jsx(MobileCtx.Provider, { value: isMobile, children: /* @__PURE__ */ jsx(
+    Group,
+    {
+      className: cn(
+        "flex h-full w-full",
+        effectiveDirection === "vertical" && "flex-col",
+        className
+      ),
+      orientation: effectiveDirection,
+      ...props
+    }
+  ) }) });
+}
+function ResizablePanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Panel, { className: cn("", className), ...props });
+}
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}) {
+  const direction = useContext(DirectionCtx);
+  const isMobile = useContext(MobileCtx);
+  const isVertical = direction === "vertical";
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      className: cn(
+        "relative flex items-center justify-center bg-[var(--ds-border-default)]",
+        isVertical ? cn(
+          "h-[var(--ds-border-width)] w-full after:absolute after:left-0 after:right-0 after:content-['']",
+          isMobile ? "after:-top-3 after:-bottom-3" : "after:-top-1 after:-bottom-1"
+        ) : cn(
+          "w-[var(--ds-border-width)] after:absolute after:inset-y-0 after:content-['']",
+          isMobile ? "after:-left-3 after:-right-3" : "after:-left-1 after:-right-1"
+        ),
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]",
+        "[&[data-resize-handle-state=drag]]:bg-[var(--ds-accent-primary)]",
+        "[&[data-resize-handle-state=hover]]:bg-[var(--ds-accent-primary)]",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "z-10 flex items-center justify-center rounded-[var(--ds-radius-sm)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+            "bg-[var(--ds-bg-surface)]",
+            isVertical ? isMobile ? "h-4 w-8" : "h-3 w-4" : isMobile ? "h-8 w-4" : "h-4 w-3"
+          ),
+          children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "grip-vertical",
+              size: isMobile ? 12 : 10,
+              className: cn(
+                "text-[var(--ds-text-muted)]",
+                isVertical && "rotate-90"
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+//# sourceMappingURL=resizable.js.map
+//# sourceMappingURL=resizable.js.map

package/dist/resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/components/ResizablePanels.tsx"],"names":["PanelGroup","PanelResizeHandle"],"mappings":";;;;;;;AAaA,IAAM,YAAA,GAAe,cAAyB,YAAY,CAAA;AAC1D,IAAM,SAAA,GAAY,cAAc,KAAK,CAAA;AAa9B,SAAS,mBAAA,CAAoB;AAAA,EAClC,SAAA;AAAA,EACA,SAAA,GAAY,YAAA;AAAA,EACZ,aAAA,GAAgB,IAAA;AAAA,EAChB,GAAG;AACL,CAAA,EAA6B;AAC3B,EAAA,MAAM,QAAA,GAAW,cAAc,IAAI,CAAA;AACnC,EAAA,MAAM,WAAA,GAAc,aAAA,IAAiB,QAAA,IAAY,SAAA,KAAc,YAAA;AAC/D,EAAA,MAAM,kBAAA,GAAqB,cAAc,UAAA,GAAa,SAAA;AAEtD,EAAA,uBACE,GAAA,CAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO,kBAAA,EAC5B,QAAA,kBAAA,GAAA,CAAC,SAAA,CAAU,QAAA,EAAV,EAAmB,KAAA,EAAO,QAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,oBAAA;AAAA,QACA,uBAAuB,UAAA,IAAc,UAAA;AAAA,QACrC;AAAA,OACF;AAAA,MACA,WAAA,EAAa,kBAAA;AAAA,MACZ,GAAG;AAAA;AAAA,KAER,CAAA,EACF,CAAA;AAEJ;AAcO,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC3E,EAAA,uBAAO,GAAA,CAAC,SAAM,SAAA,EAAW,EAAA,CAAG,IAAI,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACzD;AAUO,SAAS,eAAA,CAAgB;AAAA,EAC9B,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,WAAW,YAAY,CAAA;AACzC,EAAA,MAAM,QAAA,GAAW,WAAW,SAAS,CAAA;AACrC,EAAA,MAAM,aAAa,SAAA,KAAc,UAAA;AAEjC,EAAA,uBACE,GAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,yEAAA;AAAA,QACA,UAAA,GACI,EAAA;AAAA,UACE,gGAAA;AAAA,UACA,WAAW,8BAAA,GAAiC;AAAA,SAC9C,GACA,EAAA;AAAA,UACE,8EAAA;AAAA,UACA,WAAW,8BAAA,GAAiC;AAAA,SAC9C;AAAA,QACJ,iGAAA;AAAA,QACA,kEAAA;AAAA,QACA,mEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,UAAA,oBACC,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA;AAAA,YACT,qEAAA;AAAA,YACA,0EAAA;AAAA,YACA,2BAAA;AAAA,YACA,UAAA,GACK,QAAA,GAAW,SAAA,GAAY,SAAA,GACvB,WAAW,SAAA,GAAY;AAAA,WAC9B;AAAA,UAEA,QAAA,kBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,eAAA;AAAA,cACL,IAAA,EAAM,WAAW,EAAA,GAAK,EAAA;AAAA,cACtB,SAAA,EAAW,EAAA;AAAA,gBACT,6BAAA;AAAA,gBACA,UAAA,IAAc;AAAA;AAChB;AAAA;AACF;AAAA;AACF;AAAA,GAEJ;AAEJ","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:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]\",\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"]}

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-GRXDPAHR.js → tabler-TVOR6AFM.js}

@@ -1,5 +1,4 @@
 import { buildExtendedMap } from './chunk-GYVBRUO2.js';
-import './chunk-5WRI5ZAA.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 = {
@@ -68,5 +67,5 @@ async function loadExtended() {
 }
 
 export { loadCurated, loadExtended };
-//# sourceMappingURL=tabler-GRXDPAHR.js.map
-//# sourceMappingURL=tabler-GRXDPAHR.js.map
+//# 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