gridsmith-ui 0.9.0 → 0.9.1

package/dist/kanban.d.ts

@@ -18,8 +18,14 @@ interface KanbanBoardProps {
     columns: KanbanColumn[];
     onColumnsChange?: (columns: KanbanColumn[]) => void;
     renderCard?: (card: KanbanCard) => ReactNode;
+    /**
+     * Opens a card (a detail drawer, a route). The board's own card surface is the control: click, or Enter with the
+     * card focused, opens it; Space picks the card up for a keyboard drag. Never wire a clickable element inside
+     * renderCard — a role="button" div fights the drag listeners and the judge cites it (Sprint 25.4 K-1).
+     */
+    onCardClick?: (card: KanbanCard) => void;
     className?: string;
 }
-declare function KanbanBoard({ columns: controlledCols, onColumnsChange, renderCard, className, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
+declare function KanbanBoard({ columns: controlledCols, onColumnsChange, renderCard, onCardClick, className, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
 
 export { KanbanBoard };

package/dist/kanban.js

@@ -1,5 +1,6 @@
-import { Badge } from './chunk-PHQWHAT3.js';
-import { useTextOverflow, Tooltip } from './chunk-RLNIRPOH.js';
+import { Badge } from './chunk-OVVRMMCO.js';
+import { useTextOverflow, Tooltip } from './chunk-CQADS7JZ.js';
+import './chunk-PKLVP5ZB.js';
 import './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-X4CNZFWC.js';
 import { cn } from './chunk-4KVFH5KC.js';
@@ -11,7 +12,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 function SortableCard({
   card,
-  renderCard
+  renderCard,
+  onCardClick
 }) {
   const {
     attributes,
@@ -32,9 +34,20 @@ function SortableCard({
       style,
       ...attributes,
       ...listeners,
+      onClick: onCardClick ? () => onCardClick(card) : void 0,
+      onKeyDown: (e) => {
+        if (onCardClick && e.key === "Enter") {
+          e.preventDefault();
+          onCardClick(card);
+          return;
+        }
+        listeners?.onKeyDown?.(e);
+      },
+      "data-kanban-card": card.id,
       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",
+        "bg-[var(--ds-bg-surface)] p-ds-3 active:cursor-grabbing",
+        onCardClick ? "cursor-pointer" : "cursor-grab",
         "shadow-[var(--ds-shadow-button)]",
         "transition-shadow duration-[var(--ds-transition-speed)]",
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
@@ -83,6 +96,7 @@ function KanbanBoard({
   columns: controlledCols,
   onColumnsChange,
   renderCard,
+  onCardClick,
   className
 }) {
   const [internalCols, setInternalCols] = useState(controlledCols);
@@ -101,7 +115,9 @@ function KanbanBoard({
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates
+      coordinateGetter: sortableKeyboardCoordinates,
+      // Space picks up and drops; Enter is the card's open key (onCardClick)
+      keyboardCodes: { start: ["Space"], cancel: ["Escape"], end: ["Space"] }
     })
   );
   const findColumnByCardId = (cardId) => columns.find((col) => col.cards.some((c) => c.id === cardId));
@@ -204,7 +220,8 @@ function KanbanBoard({
                     SortableCard,
                     {
                       card,
-                      renderCard
+                      renderCard,
+                      onCardClick
                     },
                     card.id
                   )) })

package/dist/kanban.js.map

@@ -1 +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"]}
+{"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  /**\n   * Opens a card (a detail drawer, a route). The board's own card surface is the control: click, or Enter with the\n   * card focused, opens it; Space picks the card up for a keyboard drag. Never wire a clickable element inside\n   * renderCard — a role=\"button\" div fights the drag listeners and the judge cites it (Sprint 25.4 K-1).\n   */\n  onCardClick?: (card: KanbanCard) => void;\n  className?: string;\n}\n\nfunction SortableCard({\n  card,\n  renderCard,\n  onCardClick,\n}: {\n  card: KanbanCard;\n  renderCard?: (card: KanbanCard) => ReactNode;\n  onCardClick?: (card: KanbanCard) => void;\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      // the surface is the control (K-1): a click opens (the pointer sensor needs 5 px of movement to start a drag),\n      // Enter opens, Space stays the keyboard drag's pick-up\n      onClick={onCardClick ? () => onCardClick(card) : undefined}\n      onKeyDown={(e) => {\n        if (onCardClick && e.key === \"Enter\") { e.preventDefault(); onCardClick(card); return; }\n        listeners?.onKeyDown?.(e);\n      }}\n      data-kanban-card={card.id}\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 active:cursor-grabbing\",\n        onCardClick ? \"cursor-pointer\" : \"cursor-grab\",\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  onCardClick,\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      // Space picks up and drops; Enter is the card's open key (onCardClick)\n      keyboardCodes: { start: [\"Space\"], cancel: [\"Escape\"], end: [\"Space\"] },\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                    onCardClick={onCardClick}\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/resizable.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Separator, Panel, Group } from 'react-resizable-panels';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 
 type PanelGroupProps = ComponentProps<typeof Group>;
 type Direction = "horizontal" | "vertical";
@@ -36,4 +36,50 @@ interface ResizableHandleProps extends Omit<PanelResizeHandleProps, "className">
 }
 declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps): react_jsx_runtime.JSX.Element;
 
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+type SplitViewFrame = "fill" | "page";
+interface SplitViewProps {
+    /** The list (an inbox, a queue): it scrolls on its own. */
+    list: ReactNode;
+    /** The selected item (a thread, a record): it fills the height and scrolls on its own. */
+    detail: ReactNode;
+    /** 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`. */
+    aside?: ReactNode;
+    /** Names the aside's toggle and Drawer. */
+    asideTitle?: string;
+    /**
+     * Below `collapseBelow` the list shows alone; with `detailOpen` the detail replaces it, with a Back button that calls
+     * `onDetailClose` (detailMode "stack"). The page owns the selection, so it owns this flag.
+     */
+    detailOpen?: boolean;
+    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";
+    backLabel?: string;
+    /** Percent of the width the list takes; the divider is draggable. */
+    listWidth?: number;
+    listMinWidth?: number;
+    asideWidth?: number;
+    /** Below this width of the layout itself (px) the list and detail stop sitting side by side. */
+    collapseBelow?: number;
+    /** Below this width of the layout itself (px) the aside becomes a toggle. */
+    asideCollapseBelow?: number;
+    /** A bordered, rounded surface (inside a page with padding) instead of edge to edge (filling <main>). */
+    bordered?: boolean;
+    /** "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. */
+    frame?: SplitViewFrame;
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * The reading-pane composition (Sprint 25.2, R3): one surface with dividers —
+ * list, detail and an optional aside — that fills the height it is given (an
+ * AppShell's <main> already gives it) and never three cards with gaps. The
+ * panels compose ResizablePanelGroup, so the dividers drag. Below the collapse
+ * width, measured on the layout itself, the list shows alone and the detail
+ * stacks over it (or the app routes to it); the aside collapses to a toggle.
+ * 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;
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, SplitView, type SplitViewFrame, type SplitViewProps };

package/dist/resizable.js

@@ -1,6 +1,153 @@
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './chunk-5B2ZFL2H.js';
-import './chunk-CRQ6KCRD.js';
-import './chunk-X4CNZFWC.js';
-import './chunk-4KVFH5KC.js';
+import { useCompact, useAppShell, Button, Drawer } from './chunk-Z37HO5NU.js';
+import './chunk-RLUK575N.js';
+import { SplitPaneCtx } from './chunk-RG4KUCRS.js';
+import { useBreakpoint } from './chunk-CRQ6KCRD.js';
+import './chunk-CQADS7JZ.js';
+import './chunk-PKLVP5ZB.js';
+import './chunk-WH2FUFAC.js';
+import { Icon } from './chunk-X4CNZFWC.js';
+import { cn } from './chunk-4KVFH5KC.js';
+import { Group, Panel, Separator } from 'react-resizable-panels';
+import { createContext, useContext, useRef, useState } from 'react';
+import { jsx, jsxs, Fragment } 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:shadow-[var(--ds-shadow-focus)]",
+        "[&[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"
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function SplitView({
+  list,
+  detail,
+  aside,
+  asideTitle = "Details",
+  detailOpen = false,
+  onDetailClose,
+  detailMode = "stack",
+  backLabel = "Back",
+  listWidth = 35,
+  listMinWidth = 25,
+  asideWidth = 25,
+  collapseBelow = 768,
+  asideCollapseBelow = 1024,
+  bordered = false,
+  frame = "page",
+  "aria-label": ariaLabel,
+  className
+}) {
+  const rootRef = useRef(null);
+  const compact = useCompact(rootRef, collapseBelow);
+  const asideCollapsed = useCompact(rootRef, asideCollapseBelow);
+  const [asideWantsOpen, setAsideWantsOpen] = useState(false);
+  const asideOpen = asideCollapsed && asideWantsOpen;
+  const region = ariaLabel ? { role: "region", "aria-label": ariaLabel } : {};
+  const isFill = frame === "fill";
+  const shell = useAppShell();
+  const fillStyle = isFill && shell?.hasFooter ? { height: "var(--ds-main-height, 100%)" } : void 0;
+  const surface = cn(
+    "h-full min-h-0 w-full bg-[var(--ds-bg-surface)]",
+    isFill && "rounded-none border-0",
+    bordered && !isFill && "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] overflow-hidden",
+    className
+  );
+  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: [
+      /* @__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 })
+  ] });
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, SplitView };
 //# sourceMappingURL=resizable.js.map
 //# sourceMappingURL=resizable.js.map

package/dist/resizable.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"resizable.js"}
+{"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"]}

package/package.json

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

package/dist/chunk-5B2ZFL2H.js

@@ -1,89 +0,0 @@
-import { useBreakpoint } from './chunk-CRQ6KCRD.js';
-import { Icon } from './chunk-X4CNZFWC.js';
-import { cn } from './chunk-4KVFH5KC.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:shadow-[var(--ds-shadow-focus)]",
-        "[&[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=chunk-5B2ZFL2H.js.map
-//# sourceMappingURL=chunk-5B2ZFL2H.js.map

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

@@ -1 +0,0 @@
-{"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,0EAAA;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":"chunk-5B2ZFL2H.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"]}

package/dist/chunk-PDZL4A6K.js

@@ -1,38 +0,0 @@
-// ../../showcase/src/lib/table-utils.ts
-var DATE_ISO = /^\d{4}-\d{2}-\d{2}$/;
-var DATE_US = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
-var DATE_TEXT_MDY = /^[A-Z][a-z]{2}\s+\d{1,2},?\s+\d{4}$/;
-var DATE_TEXT_DMY = /^\d{1,2}\s+[A-Z][a-z]{2}\s+\d{4}$/;
-var NUMBER_RE = /^[$€£¥]?\s?[\d,]+\.?\d*%?$/;
-var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-function isDate(v) {
-  return DATE_ISO.test(v) || DATE_US.test(v) || DATE_TEXT_MDY.test(v) || DATE_TEXT_DMY.test(v);
-}
-function isJsx(v) {
-  return typeof v === "object" && v !== null;
-}
-function detectKind(values) {
-  const present = values.filter((v) => v != null);
-  if (present.length === 0) return void 0;
-  if (present.some(isJsx)) return void 0;
-  if (present.every((v) => typeof v === "string" && isDate(v))) return "date";
-  if (present.every((v) => typeof v === "number")) return "number";
-  if (present.every((v) => typeof v === "string" && NUMBER_RE.test(v))) return "number";
-  if (present.every((v) => typeof v === "string" && EMAIL_RE.test(v))) return "email";
-  if (present.every((v) => typeof v === "string" && v.length <= 20 && !/[\n\r]/.test(v))) return "label";
-  return "text";
-}
-function inferColumnKinds(data, columnKeys, maxSample = 50) {
-  const sample = data.length > maxSample ? data.slice(0, maxSample) : data;
-  const result = /* @__PURE__ */ new Map();
-  for (const key of columnKeys) {
-    const values = sample.map((row) => row[key]);
-    const kind = detectKind(values);
-    if (kind) result.set(key, kind);
-  }
-  return result;
-}
-
-export { inferColumnKinds };
-//# sourceMappingURL=chunk-PDZL4A6K.js.map
-//# sourceMappingURL=chunk-PDZL4A6K.js.map

package/dist/chunk-PDZL4A6K.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../showcase/src/lib/table-utils.ts"],"names":[],"mappings":";AAIA,IAAM,QAAA,GAAW,qBAAA;AACjB,IAAM,OAAA,GAAU,2BAAA;AAChB,IAAM,aAAA,GAAgB,qCAAA;AACtB,IAAM,aAAA,GAAgB,mCAAA;AACtB,IAAM,SAAA,GAAY,4BAAA;AAClB,IAAM,QAAA,GAAW,4BAAA;AAEjB,SAAS,OAAO,CAAA,EAAoB;AAClC,EAAA,OAAO,QAAA,CAAS,IAAA,CAAK,CAAC,CAAA,IAAK,QAAQ,IAAA,CAAK,CAAC,CAAA,IAAK,aAAA,CAAc,IAAA,CAAK,CAAC,CAAA,IAAK,aAAA,CAAc,KAAK,CAAC,CAAA;AAC7F;AAEA,SAAS,MAAM,CAAA,EAAqB;AAClC,EAAA,OAAO,OAAO,CAAA,KAAM,QAAA,IAAY,CAAA,KAAM,IAAA;AACxC;AAEA,SAAS,WAAW,MAAA,EAA2C;AAE7D,EAAA,MAAM,UAAU,MAAA,CAAO,MAAA,CAAO,CAAC,CAAA,KAAM,KAAK,IAAI,CAAA;AAC9C,EAAA,IAAI,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG,OAAO,MAAA;AAGjC,EAAA,IAAI,OAAA,CAAQ,IAAA,CAAK,KAAK,CAAA,EAAG,OAAO,MAAA;AAGhC,EAAA,IAAI,OAAA,CAAQ,KAAA,CAAM,CAAC,CAAA,KAAM,OAAO,CAAA,KAAM,QAAA,IAAY,MAAA,CAAO,CAAC,CAAC,CAAA,EAAG,OAAO,MAAA;AAGrE,EAAA,IAAI,OAAA,CAAQ,MAAM,CAAC,CAAA,KAAM,OAAO,CAAA,KAAM,QAAQ,GAAG,OAAO,QAAA;AACxD,EAAA,IAAI,OAAA,CAAQ,KAAA,CAAM,CAAC,CAAA,KAAM,OAAO,CAAA,KAAM,QAAA,IAAY,SAAA,CAAU,IAAA,CAAK,CAAC,CAAC,CAAA,EAAG,OAAO,QAAA;AAG7E,EAAA,IAAI,OAAA,CAAQ,KAAA,CAAM,CAAC,CAAA,KAAM,OAAO,CAAA,KAAM,QAAA,IAAY,QAAA,CAAS,IAAA,CAAK,CAAC,CAAC,CAAA,EAAG,OAAO,OAAA;AAG5E,EAAA,IAAI,QAAQ,KAAA,CAAM,CAAC,CAAA,KAAM,OAAO,MAAM,QAAA,IAAY,CAAA,CAAE,MAAA,IAAU,EAAA,IAAM,CAAC,QAAA,CAAS,IAAA,CAAK,CAAC,CAAC,GAAG,OAAO,OAAA;AAG/F,EAAA,OAAO,MAAA;AACT;AAOO,SAAS,gBAAA,CACd,IAAA,EACA,UAAA,EACA,SAAA,GAAY,EAAA,EACa;AACzB,EAAA,MAAM,MAAA,GAAS,KAAK,MAAA,GAAS,SAAA,GAAY,KAAK,KAAA,CAAM,CAAA,EAAG,SAAS,CAAA,GAAI,IAAA;AACpE,EAAA,MAAM,MAAA,uBAAa,GAAA,EAAwB;AAE3C,EAAA,KAAA,MAAW,OAAO,UAAA,EAAY;AAC5B,IAAA,MAAM,SAAS,MAAA,CAAO,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAA,CAAI,GAAG,CAAC,CAAA;AAC3C,IAAA,MAAM,IAAA,GAAO,WAAW,MAAM,CAAA;AAC9B,IAAA,IAAI,IAAA,EAAM,MAAA,CAAO,GAAA,CAAI,GAAA,EAAK,IAAI,CAAA;AAAA,EAChC;AAEA,EAAA,OAAO,MAAA;AACT","file":"chunk-PDZL4A6K.js","sourcesContent":["/** Shared column-kind inference for Table and DataGrid. */\n\nexport type ColumnKind = \"date\" | \"number\" | \"email\" | \"label\" | \"text\";\n\nconst DATE_ISO = /^\\d{4}-\\d{2}-\\d{2}$/;\nconst DATE_US = /^\\d{1,2}\\/\\d{1,2}\\/\\d{4}$/;\nconst DATE_TEXT_MDY = /^[A-Z][a-z]{2}\\s+\\d{1,2},?\\s+\\d{4}$/;   // \"Jan 12, 2024\" or \"Jan 12 2024\"\nconst DATE_TEXT_DMY = /^\\d{1,2}\\s+[A-Z][a-z]{2}\\s+\\d{4}$/;      // \"12 Jan 2024\"\nconst NUMBER_RE = /^[$€£¥]?\\s?[\\d,]+\\.?\\d*%?$/;\nconst EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\nfunction isDate(v: string): boolean {\n  return DATE_ISO.test(v) || DATE_US.test(v) || DATE_TEXT_MDY.test(v) || DATE_TEXT_DMY.test(v);\n}\n\nfunction isJsx(v: unknown): boolean {\n  return typeof v === \"object\" && v !== null;\n}\n\nfunction detectKind(values: unknown[]): ColumnKind | undefined {\n  // Filter out null/undefined\n  const present = values.filter((v) => v != null);\n  if (present.length === 0) return undefined;\n\n  // Any JSX value means no kind\n  if (present.some(isJsx)) return undefined;\n\n  // Check date (strings only)\n  if (present.every((v) => typeof v === \"string\" && isDate(v))) return \"date\";\n\n  // Check number: all typeof number, or all strings matching the number pattern\n  if (present.every((v) => typeof v === \"number\")) return \"number\";\n  if (present.every((v) => typeof v === \"string\" && NUMBER_RE.test(v))) return \"number\";\n\n  // Check email\n  if (present.every((v) => typeof v === \"string\" && EMAIL_RE.test(v))) return \"email\";\n\n  // Check label: strings <= 20 chars, no line breaks\n  if (present.every((v) => typeof v === \"string\" && v.length <= 20 && !/[\\n\\r]/.test(v))) return \"label\";\n\n  // Fallback\n  return \"text\";\n}\n\n/**\n * Sample data rows and infer a ColumnKind for each key.\n * Returns a Map of key -> kind for columns that matched a pattern.\n * Columns with mixed types or JSX values get no entry.\n */\nexport function inferColumnKinds(\n  data: Record<string, unknown>[],\n  columnKeys: string[],\n  maxSample = 50,\n): Map<string, ColumnKind> {\n  const sample = data.length > maxSample ? data.slice(0, maxSample) : data;\n  const result = new Map<string, ColumnKind>();\n\n  for (const key of columnKeys) {\n    const values = sample.map((row) => row[key]);\n    const kind = detectKind(values);\n    if (kind) result.set(key, kind);\n  }\n\n  return result;\n}\n"]}