@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/data-grid.json

@@ -19,6 +19,454 @@
     "useDataGrid",
     "useDataGridRow"
   ],
+  "parts": [
+    {
+      "name": "DataGrid",
+      "props": [
+        {
+          "name": "table",
+          "type": "DataTableInstance<TData>",
+          "required": true,
+          "description": "The table instance, when not read from context.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "columns",
+          "type": "DataGridColumnConfig[]",
+          "required": false,
+          "default": "[]",
+          "description": "Per-column grid behaviour keyed by column id: editor type, width, pinning, options, format and parse.",
+          "from": "arkcn"
+        },
+        {
+          "name": "columnSizing",
+          "type": "Record<string, number>",
+          "required": false,
+          "description": "Controlled column widths by column id.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultColumnSizing",
+          "type": "Record<string, number>",
+          "required": false,
+          "description": "Initial column widths when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onCellChange",
+          "type": "((change: DataGridCellChange<TData>) => void)",
+          "required": false,
+          "description": "Called with `{ row, columnId, value, previous }` when a cell edit commits; the consumer applies it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onColumnSizingChange",
+          "type": "((sizing: Record<string, number>) => void)",
+          "required": false,
+          "description": "Called when a column is resized.",
+          "from": "arkcn"
+        },
+        {
+          "name": "overscan",
+          "type": "number",
+          "required": false,
+          "default": "6",
+          "description": "Rows rendered beyond the visible window on each side.",
+          "from": "arkcn"
+        },
+        {
+          "name": "rowHeight",
+          "type": "number",
+          "required": false,
+          "default": "36",
+          "description": "Fixed height of every row in px.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridContainer",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridHeader",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridHeaderRow",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridHead",
+      "props": [
+        {
+          "name": "column",
+          "type": "string",
+          "required": true,
+          "description": "Id of the column this part belongs to.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridHeadWithResize",
+      "props": [
+        {
+          "name": "column",
+          "type": "string",
+          "required": true,
+          "description": "Id of the column this part belongs to.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridResizeHandle",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridBody",
+      "props": [
+        {
+          "name": "children",
+          "type": "(row: DataTableRow<TData>, index: number) => ReactNode",
+          "required": true,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridRow",
+      "props": [
+        {
+          "name": "index",
+          "type": "number",
+          "required": true,
+          "description": "Position of the item in its list.",
+          "from": "arkcn"
+        },
+        {
+          "name": "row",
+          "type": "DataTableRow<TData>",
+          "required": true,
+          "description": "The row this part belongs to.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridCell",
+      "props": [
+        {
+          "name": "column",
+          "type": "string",
+          "required": true,
+          "description": "Id of the column this part belongs to.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "editable",
+          "type": "boolean",
+          "required": false,
+          "description": "Override the column config for this cell.",
+          "from": "arkcn"
+        },
+        {
+          "name": "editor",
+          "type": "((props: EditorRenderProps) => ReactNode)",
+          "required": false,
+          "description": "Custom editor; return `undefined` to use the default for the column type.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridSelectAll",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridSelectRow",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "DataGridEmpty",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "@ark-ui/react": "^5.39.1",
     "lucide-react": "^1.41.0"
@@ -34,7 +482,7 @@
   "files": [
     {
       "path": "components/ui/data-grid.tsx",
-      "content": "import * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from \"lucide-react\"\nimport { createListCollection } from \"@ark-ui/react/collection\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport type { DataTableInstance, DataTableRow } from \"@/lib/data-table-adapter\"\nimport { cn } from \"@/lib/utils\"\nimport { useControllable } from \"@/lib/controllable\"\nimport { LiveRegion, useLiveRegion } from \"@/components/ui/live-region\"\n\n/**\n * DataGrid — an editable, keyboard-driven grid on the same source-agnostic\n * `DataTableInstance` contract as the data table. The instance supplies rows,\n * columns, sorting, filtering and selection; the grid adds cell focus, range\n * selection, inline editing, copy/paste, row virtualization, column resizing\n * and pinning. Edits are intents: `onCellChange({ row, columnId, value })`\n * and the consumer owns the data.\n *\n * Column behaviour is data (`columns` prop, keyed by column id):\n * `{ id, type, editable, options, width, minWidth, pinned, format, parse }`.\n *\n * Anatomy:\n *   DataGrid { table, columns, onCellChange }\n *     DataGridContainer                 scroll viewport, role=\"grid\"\n *       DataGridHeader > DataGridHeaderRow > DataGridHead column=… (+ DataGridResizeHandle)\n *       DataGridBody children={(row) => cells}   virtualized rows\n *         DataGridRow > DataGridCell column=…    focusable, editable\n *       DataGridEmpty\n *   DataGridSelectAll / DataGridSelectRow  checkbox cells\n *\n * Keyboard: arrows move, Shift+arrows extend the range, Home/End and\n * Ctrl+Home/End jump, PageUp/PageDown scroll, Enter or F2 or typing edits,\n * Enter commits and moves down, Tab commits and moves right, Escape cancels,\n * Space toggles booleans, Delete clears the range, ⌘C/⌘V copy and paste TSV.\n */\n\ntype DataGridColumnType = \"text\" | \"number\" | \"boolean\" | \"select\" | \"date\"\ntype DataGridOption = { value: string; label: string }\ntype DataGridColumnConfig = {\n  id: string\n  type?: DataGridColumnType\n  editable?: boolean\n  options?: DataGridOption[]\n  width?: number\n  minWidth?: number\n  pinned?: \"left\" | \"right\"\n  /** Value → text for display and for seeding the editor. */\n  format?: (value: unknown) => string\n  /** Editor text → value on commit. */\n  parse?: (input: string, previous: unknown) => unknown\n}\n\ntype CellAddress = { rowIndex: number; columnId: string }\ntype CellRange = { anchor: CellAddress; focus: CellAddress }\ntype DataGridCellChange<TData> = {\n  row: DataTableRow<TData>\n  columnId: string\n  value: unknown\n  previous: unknown\n}\n\ntype EditorRenderProps = {\n  value: string\n  onChange: (value: string) => void\n  commit: (value?: string) => void\n  cancel: () => void\n  column: DataGridColumnConfig\n  row: DataTableRow<unknown>\n  inputProps: React.InputHTMLAttributes<HTMLInputElement> & { ref: React.Ref<HTMLInputElement> }\n}\n\nconst DEFAULT_WIDTH = 160\nconst MIN_WIDTH = 60\n\n/* ---------------------------------------------------------------------------\n * Context\n * ------------------------------------------------------------------------- */\n\ntype ColumnLayout = {\n  id: string\n  width: number\n  pinned?: \"left\" | \"right\"\n  /** Sticky offset for pinned columns. */\n  offset: number\n  config: DataGridColumnConfig\n}\n\ntype DataGridContextValue<TData = unknown> = {\n  table: DataTableInstance<TData>\n  rows: DataTableRow<TData>[]\n  layout: ColumnLayout[]\n  layoutById: Map<string, ColumnLayout>\n  templateColumns: string\n  totalWidth: number\n  rowHeight: number\n  setWidth: (columnId: string, width: number) => void\n  focus: CellAddress | null\n  range: CellRange | null\n  editing: (CellAddress & { seed?: string }) | null\n  focusCell: (address: CellAddress, options?: { extend?: boolean; scroll?: boolean }) => void\n  startEditing: (address: CellAddress, seed?: string) => void\n  stopEditing: (options?: { refocus?: boolean }) => void\n  commit: (address: CellAddress, value: unknown) => void\n  clearRange: () => void\n  copyRange: () => Promise<void>\n  paste: () => Promise<void>\n  isInRange: (address: CellAddress) => boolean\n  containerRef: React.RefObject<HTMLDivElement | null>\n  /** Bumped whenever a cell should take DOM focus; cells act on it in a layout effect. */\n  focusRequest: number\n  /** Editors register so the grid can close them when the viewport scrolls. */\n  registerEditor: (handle: { close: () => void }) => () => void\n  closeEditor: () => void\n  window: { start: number; end: number }\n  setScrollTop: (top: number) => void\n  setViewportHeight: (height: number) => void\n  announce: (message: string) => void\n}\n\nconst DataGridContext = React.createContext<DataGridContextValue | null>(null)\nconst RowContext = React.createContext<{ row: DataTableRow<unknown>; index: number } | null>(null)\n\nfunction useDataGrid<TData = unknown>() {\n  const ctx = React.useContext(DataGridContext)\n  if (!ctx) throw new Error(\"DataGrid parts must be used within <DataGrid>\")\n  return ctx as DataGridContextValue<TData>\n}\nfunction useDataGridRow() {\n  const ctx = React.useContext(RowContext)\n  if (!ctx) throw new Error(\"DataGridCell must be used within <DataGridRow>\")\n  return ctx\n}\n\nconst clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v))\nconst defaultFormat = (value: unknown) => {\n  if (value === null || value === undefined) return \"\"\n  if (value instanceof Date) return Number.isNaN(value.getTime()) ? \"\" : value.toISOString().slice(0, 10)\n  return String(value)\n}\n\n/* ---------------------------------------------------------------------------\n * Root\n * ------------------------------------------------------------------------- */\n\nfunction DataGrid<TData>({\n  table,\n  columns = [],\n  rowHeight = 36,\n  overscan = 6,\n  onCellChange,\n  columnSizing: sizingProp,\n  defaultColumnSizing,\n  onColumnSizingChange,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  table: DataTableInstance<TData>\n  columns?: DataGridColumnConfig[]\n  rowHeight?: number\n  overscan?: number\n  onCellChange?: (change: DataGridCellChange<TData>) => void\n  columnSizing?: Record<string, number>\n  defaultColumnSizing?: Record<string, number>\n  onColumnSizingChange?: (sizing: Record<string, number>) => void\n  children?: React.ReactNode\n}) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const rows = table.getRowModel().rows\n  const visibleColumns = table.getAllColumns().filter((c) => c.getIsVisible())\n\n  /* Column sizing (controllable) */\n  const [initialSizing] = React.useState<Record<string, number>>(() => defaultColumnSizing ?? {})\n  const [sizing, setSizing] = useControllable(sizingProp, initialSizing, onColumnSizingChange)\n  const setWidth = React.useCallback(\n    (columnId: string, width: number) => setSizing((prev) => ({ ...prev, [columnId]: width })),\n    [setSizing]\n  )\n\n  const configById = React.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns])\n\n  /* Layout: order = visible engine columns; pinned left first, right last */\n  const { layout, layoutById, templateColumns, totalWidth } = React.useMemo(() => {\n    const base = visibleColumns.map((c) => {\n      const config = configById.get(c.id) ?? { id: c.id }\n      const width = Math.max(config.minWidth ?? MIN_WIDTH, sizing[c.id] ?? config.width ?? DEFAULT_WIDTH)\n      return { id: c.id, width, pinned: config.pinned, offset: 0, config }\n    })\n    const left = base.filter((c) => c.pinned === \"left\")\n    const middle = base.filter((c) => !c.pinned)\n    const right = base.filter((c) => c.pinned === \"right\")\n    let offset = 0\n    for (const c of left) {\n      c.offset = offset\n      offset += c.width\n    }\n    offset = 0\n    for (const c of [...right].reverse()) {\n      c.offset = offset\n      offset += c.width\n    }\n    const ordered: ColumnLayout[] = [...left, ...middle, ...right]\n    return {\n      layout: ordered,\n      layoutById: new Map(ordered.map((c) => [c.id, c])),\n      templateColumns: ordered.map((c) => `${c.width}px`).join(\" \"),\n      totalWidth: ordered.reduce((sum, c) => sum + c.width, 0),\n    }\n    // visibleColumns is derived from table state; its identity changes with it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visibleColumns.map((c) => c.id).join(\"|\"), configById, sizing])\n\n  /* Virtual window */\n  const [scrollTop, setScrollTopState] = React.useState(0)\n  const [viewportHeight, setViewportHeight] = React.useState(0)\n  const setScrollTop = React.useCallback((top: number) => setScrollTopState(top), [])\n  const window = React.useMemo(() => {\n    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan)\n    const end = Math.min(rows.length, Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan)\n    return { start, end }\n  }, [scrollTop, viewportHeight, rowHeight, overscan, rows.length])\n\n  /* Focus, range, editing */\n  const [focus, setFocus] = React.useState<CellAddress | null>(null)\n  const [range, setRange] = React.useState<CellRange | null>(null)\n  const [editing, setEditing] = React.useState<(CellAddress & { seed?: string }) | null>(null)\n  const { message: announcement, announce } = useLiveRegion()\n  const [focusRequest, setFocusRequest] = React.useState(0)\n  const activeEditor = React.useRef<{ close: () => void } | null>(null)\n  const registerEditor = React.useCallback((handle: { close: () => void }) => {\n    activeEditor.current = handle\n    return () => {\n      if (activeEditor.current === handle) activeEditor.current = null\n    }\n  }, [])\n  const closeEditor = React.useCallback(() => activeEditor.current?.close(), [])\n\n  const latest = React.useRef({ rows, layout, focus, range, editing, onCellChange, rowHeight })\n  React.useEffect(() => {\n    latest.current = { rows, layout, focus, range, editing, onCellChange, rowHeight }\n  })\n\n  const scrollRowIntoView = React.useCallback(\n    (rowIndex: number) => {\n      const el = containerRef.current\n      if (!el) return\n      const headerHeight = el.querySelector<HTMLElement>(\"[data-slot=data-grid-header]\")?.offsetHeight ?? 0\n      const top = rowIndex * rowHeight\n      const bottom = top + rowHeight\n      const viewTop = el.scrollTop\n      const viewBottom = el.scrollTop + el.clientHeight - headerHeight\n      if (top < viewTop) el.scrollTop = top\n      else if (bottom > viewBottom) el.scrollTop = bottom - (el.clientHeight - headerHeight)\n    },\n    [rowHeight]\n  )\n\n  const scrollColumnIntoView = React.useCallback((columnId: string) => {\n    const el = containerRef.current\n    const col = latest.current.layout.find((c) => c.id === columnId)\n    if (!el || !col || col.pinned) return\n    const left = latest.current.layout.slice(0, latest.current.layout.indexOf(col)).reduce((s, c) => s + c.width, 0)\n    const pinnedLeft = latest.current.layout.filter((c) => c.pinned === \"left\").reduce((s, c) => s + c.width, 0)\n    const pinnedRight = latest.current.layout.filter((c) => c.pinned === \"right\").reduce((s, c) => s + c.width, 0)\n    if (left < el.scrollLeft + pinnedLeft) el.scrollLeft = left - pinnedLeft\n    else if (left + col.width > el.scrollLeft + el.clientWidth - pinnedRight)\n      el.scrollLeft = left + col.width - el.clientWidth + pinnedRight\n  }, [])\n\n  const focusCell = React.useCallback(\n    (address: CellAddress, options?: { extend?: boolean; scroll?: boolean }) => {\n      const { rows, layout } = latest.current\n      if (!rows.length || !layout.length) return\n      const rowIndex = clamp(address.rowIndex, 0, rows.length - 1)\n      const columnId = layout.some((c) => c.id === address.columnId) ? address.columnId : layout[0].id\n      const next = { rowIndex, columnId }\n      setFocus(next)\n      setRange((prev) =>\n        options?.extend && (prev?.anchor ?? latest.current.focus)\n          ? { anchor: prev?.anchor ?? latest.current.focus!, focus: next }\n          : null\n      )\n      setFocusRequest((n) => n + 1)\n      if (options?.scroll !== false) {\n        scrollRowIntoView(rowIndex)\n        scrollColumnIntoView(columnId)\n      }\n    },\n    [scrollRowIntoView, scrollColumnIntoView]\n  )\n\n  const startEditing = React.useCallback((address: CellAddress, seed?: string) => {\n    const config = latest.current.layout.find((c) => c.id === address.columnId)?.config\n    if (!config?.editable) return\n    setEditing({ ...address, seed })\n  }, [])\n\n  const stopEditing = React.useCallback((options?: { refocus?: boolean }) => {\n    setEditing(null)\n    if (options?.refocus !== false) setFocusRequest((n) => n + 1)\n  }, [])\n\n  const commit = React.useCallback((address: CellAddress, value: unknown) => {\n    const row = latest.current.rows[address.rowIndex]\n    if (!row) return\n    const previous = row.getValue(address.columnId)\n    if (Object.is(previous, value)) return\n    latest.current.onCellChange?.({ row, columnId: address.columnId, value, previous })\n  }, [])\n\n  const rangeBounds = React.useCallback(\n    () => boundsOf(latest.current.range, latest.current.focus, latest.current.layout),\n    []\n  )\n\n  const isInRange = React.useCallback(\n    (address: CellAddress) => {\n      if (!range) return false\n      const b = boundsOf(range, focus, layout)\n      const ci = layout.findIndex((c) => c.id === address.columnId)\n      return !!b && address.rowIndex >= b.r0 && address.rowIndex <= b.r1 && ci >= b.c0 && ci <= b.c1\n    },\n    [range, focus, layout]\n  )\n\n  const clearRange = React.useCallback(() => {\n    const b = rangeBounds()\n    if (!b) return\n    const { rows, layout } = latest.current\n    let count = 0\n    for (let r = b.r0; r <= b.r1; r++) {\n      for (let c = b.c0; c <= b.c1; c++) {\n        const col = layout[c]\n        if (!col?.config.editable) continue\n        const row = rows[r]\n        const empty = col.config.type === \"boolean\" ? false : col.config.type === \"number\" ? null : \"\"\n        if (row && !Object.is(row.getValue(col.id), empty)) {\n          latest.current.onCellChange?.({ row, columnId: col.id, value: empty, previous: row.getValue(col.id) })\n          count++\n        }\n      }\n    }\n    if (count) announce(`Cleared ${count} cell${count === 1 ? \"\" : \"s\"}.`)\n  }, [rangeBounds, announce])\n\n  const copyRange = React.useCallback(async () => {\n    const b = rangeBounds()\n    if (!b) return\n    const { rows, layout } = latest.current\n    const lines: string[] = []\n    for (let r = b.r0; r <= b.r1; r++) {\n      const cells: string[] = []\n      for (let c = b.c0; c <= b.c1; c++) {\n        const col = layout[c]\n        const value = rows[r]?.getValue(col.id)\n        cells.push((col.config.format ?? defaultFormat)(value))\n      }\n      lines.push(cells.join(\"\\t\"))\n    }\n    try {\n      await navigator.clipboard.writeText(lines.join(\"\\n\"))\n      const n = (b.r1 - b.r0 + 1) * (b.c1 - b.c0 + 1)\n      announce(`Copied ${n} cell${n === 1 ? \"\" : \"s\"}.`)\n    } catch {\n      announce(\"Could not copy to the clipboard.\")\n    }\n  }, [rangeBounds, announce])\n\n  const paste = React.useCallback(async () => {\n    const { focus, rows, layout } = latest.current\n    if (!focus) return\n    let text = \"\"\n    try {\n      text = await navigator.clipboard.readText()\n    } catch {\n      announce(\"Could not read the clipboard.\")\n      return\n    }\n    const lines = text\n      .replace(/\\r/g, \"\")\n      .split(\"\\n\")\n      .filter((l, i, arr) => l !== \"\" || i < arr.length - 1)\n    const startCol = layout.findIndex((c) => c.id === focus.columnId)\n    let count = 0\n    lines.forEach((line, dr) => {\n      const row = rows[focus.rowIndex + dr]\n      if (!row) return\n      line.split(\"\\t\").forEach((cell, dc) => {\n        const col = layout[startCol + dc]\n        if (!col?.config.editable) return\n        const previous = row.getValue(col.id)\n        const value = parseInput(col.config, cell, previous)\n        if (!Object.is(previous, value)) {\n          latest.current.onCellChange?.({ row, columnId: col.id, value, previous })\n          count++\n        }\n      })\n    })\n    announce(`Pasted into ${count} cell${count === 1 ? \"\" : \"s\"}.`)\n  }, [announce])\n\n  const ctx = React.useMemo<DataGridContextValue<TData>>(\n    () => ({\n      table,\n      rows,\n      layout,\n      layoutById,\n      templateColumns,\n      totalWidth,\n      rowHeight,\n      setWidth,\n      focus,\n      range,\n      editing,\n      focusCell,\n      startEditing,\n      stopEditing,\n      commit,\n      clearRange,\n      copyRange,\n      paste,\n      isInRange,\n      containerRef,\n      focusRequest,\n      registerEditor,\n      closeEditor,\n      window,\n      setScrollTop,\n      setViewportHeight,\n      announce,\n    }),\n    [\n      table,\n      rows,\n      layout,\n      layoutById,\n      templateColumns,\n      totalWidth,\n      rowHeight,\n      setWidth,\n      focus,\n      range,\n      editing,\n      focusCell,\n      startEditing,\n      stopEditing,\n      commit,\n      clearRange,\n      copyRange,\n      paste,\n      isInRange,\n      focusRequest,\n      registerEditor,\n      closeEditor,\n      window,\n      setScrollTop,\n      announce,\n    ]\n  )\n\n  return (\n    <DataGridContext.Provider value={ctx as DataGridContextValue}>\n      <div\n        data-slot=\"data-grid\"\n        data-editing={editing ? \"\" : undefined}\n        className={cn(\"flex min-h-0 flex-1 flex-col\", className)}\n        {...props}\n      >\n        {children}\n        <LiveRegion data-slot=\"data-grid-live-region\" message={announcement} />\n      </div>\n    </DataGridContext.Provider>\n  )\n}\n\nfunction boundsOf(range: CellRange | null, focus: CellAddress | null, layout: ColumnLayout[]) {\n  const a = range?.anchor ?? focus\n  const b = range?.focus ?? focus\n  if (!a || !b) return null\n  const ca = layout.findIndex((c) => c.id === a.columnId)\n  const cb = layout.findIndex((c) => c.id === b.columnId)\n  return {\n    r0: Math.min(a.rowIndex, b.rowIndex),\n    r1: Math.max(a.rowIndex, b.rowIndex),\n    c0: Math.min(ca, cb),\n    c1: Math.max(ca, cb),\n  }\n}\n\nfunction parseInput(config: DataGridColumnConfig, input: string, previous: unknown): unknown {\n  if (config.parse) return config.parse(input, previous)\n  switch (config.type) {\n    case \"number\": {\n      if (input.trim() === \"\") return null\n      const n = Number(input)\n      return Number.isNaN(n) ? previous : n\n    }\n    case \"boolean\":\n      return /^(true|yes|1|on|x)$/i.test(input.trim())\n    case \"date\": {\n      if (!input) return null\n      const d = new Date(input)\n      return Number.isNaN(d.getTime()) ? previous : previous instanceof Date ? d : input\n    }\n    default:\n      return input\n  }\n}\n\n/* ---------------------------------------------------------------------------\n * Container, header, body\n * ------------------------------------------------------------------------- */\n\nfunction DataGridContainer({ className, onScroll, ...props }: React.ComponentProps<\"div\">) {\n  const { containerRef, setScrollTop, setViewportHeight, rows, closeEditor } = useDataGrid()\n  React.useLayoutEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const update = () => setViewportHeight(el.clientHeight)\n    update()\n    const observer = new ResizeObserver(update)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [containerRef, setViewportHeight])\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"data-grid-container\"\n      role=\"grid\"\n      aria-rowcount={rows.length}\n      className={cn(\"relative min-h-0 flex-1 overflow-auto rounded-lg border bg-background text-sm\", className)}\n      onScroll={(event) => {\n        onScroll?.(event)\n        // An open editor (and its portaled popover) must not drift away from its cell.\n        closeEditor()\n        setScrollTop(event.currentTarget.scrollTop)\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction DataGridHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"data-grid-header\"\n      role=\"rowgroup\"\n      className={cn(\"sticky top-0 z-30 w-fit min-w-full bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DataGridHeaderRow({ className, style, ...props }: React.ComponentProps<\"div\">) {\n  const { templateColumns, totalWidth } = useDataGrid()\n  return (\n    <div\n      data-slot=\"data-grid-header-row\"\n      role=\"row\"\n      className={cn(\"grid border-b bg-muted\", className)}\n      style={{ gridTemplateColumns: templateColumns, minWidth: totalWidth, ...style }}\n      {...props}\n    />\n  )\n}\n\nconst pinnedStyle = (col: ColumnLayout | undefined): React.CSSProperties | undefined =>\n  col?.pinned === \"left\" ? { left: col.offset } : col?.pinned === \"right\" ? { right: col.offset } : undefined\n\n/** A header cell. Sortable columns get a sort button with `children` as the title. */\nfunction DataGridHead({\n  column: columnId,\n  className,\n  children,\n  style,\n  ...props\n}: React.ComponentProps<\"div\"> & { column: string }) {\n  const { table, layoutById } = useDataGrid()\n  const column = table.getColumn(columnId)\n  const layout = layoutById.get(columnId)\n  if (!column || !layout) return null\n  const sorted = column.getIsSorted()\n  const sortable = column.getCanSort()\n  return (\n    <div\n      data-slot=\"data-grid-head\"\n      data-column={columnId}\n      data-pinned={layout.pinned}\n      role=\"columnheader\"\n      aria-sort={sorted === \"asc\" ? \"ascending\" : sorted === \"desc\" ? \"descending\" : undefined}\n      className={cn(\n        \"group/head relative flex h-9 items-center gap-1 overflow-hidden px-2 font-medium whitespace-nowrap text-muted-foreground\",\n        layout.pinned && \"sticky z-10 bg-muted\",\n        layout.pinned === \"left\" && \"border-e\",\n        layout.pinned === \"right\" && \"border-s\",\n        className\n      )}\n      style={{ ...pinnedStyle(layout), ...style }}\n      {...props}\n    >\n      {sortable ? (\n        <ark.button\n          type=\"button\"\n          data-slot=\"data-grid-sort-trigger\"\n          className=\"-ms-1 flex h-7 min-w-0 items-center gap-1 rounded-md px-1 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50\"\n          onClick={() => column.toggleSorting()}\n        >\n          <span className=\"truncate\">{children}</span>\n          {sorted === \"desc\" ? (\n            <ArrowDownIcon className=\"size-3.5 shrink-0\" />\n          ) : sorted === \"asc\" ? (\n            <ArrowUpIcon className=\"size-3.5 shrink-0\" />\n          ) : (\n            <ChevronsUpDownIcon className=\"size-3.5 shrink-0 opacity-50\" />\n          )}\n        </ark.button>\n      ) : (\n        <span className=\"truncate\">{children}</span>\n      )}\n    </div>\n  )\n}\n\n/** Pointer-driven column resizer; double-click resets to the configured width. */\nfunction DataGridResizeHandle({ className, onPointerDown, onDoubleClick, ...props }: React.ComponentProps<\"div\">) {\n  const { setWidth, layoutById } = useDataGrid()\n  const head = React.useContext(HeadColumnContext)\n  return (\n    <div\n      data-slot=\"data-grid-resize-handle\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      className={cn(\n        \"absolute inset-y-0 inset-e-0 z-10 w-2 cursor-col-resize touch-none select-none after:absolute after:inset-y-2 after:inset-e-0.5 after:w-px after:bg-border group-hover/head:after:bg-foreground/40 hover:after:bg-primary\",\n        className\n      )}\n      onPointerDown={(event) => {\n        onPointerDown?.(event)\n        if (event.defaultPrevented || event.button !== 0 || !head) return\n        event.preventDefault()\n        event.stopPropagation()\n        const start = event.clientX\n        const startWidth = layoutById.get(head)?.width ?? DEFAULT_WIDTH\n        const min = layoutById.get(head)?.config.minWidth ?? MIN_WIDTH\n        const move = (e: PointerEvent) => setWidth(head, Math.max(min, startWidth + e.clientX - start))\n        const up = () => {\n          window.removeEventListener(\"pointermove\", move)\n          window.removeEventListener(\"pointerup\", up)\n        }\n        window.addEventListener(\"pointermove\", move)\n        window.addEventListener(\"pointerup\", up)\n      }}\n      onDoubleClick={(event) => {\n        onDoubleClick?.(event)\n        if (!event.defaultPrevented && head) {\n          const config = layoutById.get(head)?.config\n          setWidth(head, config?.width ?? DEFAULT_WIDTH)\n        }\n      }}\n      {...props}\n    />\n  )\n}\n\nconst HeadColumnContext = React.createContext<string | null>(null)\n\n/** Wraps `DataGridHead` so `DataGridResizeHandle` knows its column. */\nfunction DataGridHeadWithResize({ column, children, ...props }: React.ComponentProps<typeof DataGridHead>) {\n  return (\n    <HeadColumnContext.Provider value={column}>\n      <DataGridHead column={column} {...props}>\n        {children}\n        <DataGridResizeHandle />\n      </DataGridHead>\n    </HeadColumnContext.Provider>\n  )\n}\n\n/** Virtualized rows. `children` renders the cells for a row. */\nfunction DataGridBody<TData>({\n  className,\n  children,\n  style,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  children: (row: DataTableRow<TData>, index: number) => React.ReactNode\n}) {\n  const { rows, window: win, rowHeight, totalWidth } = useDataGrid<TData>()\n  const visible = rows.slice(win.start, win.end)\n  return (\n    <div\n      data-slot=\"data-grid-body\"\n      role=\"rowgroup\"\n      className={cn(\"relative\", className)}\n      style={{ height: rows.length * rowHeight, minWidth: totalWidth, ...style }}\n      {...props}\n    >\n      <div style={{ transform: `translateY(${win.start * rowHeight}px)` }}>\n        {visible.map((row, i) => (\n          <DataGridRow key={row.id} row={row} index={win.start + i}>\n            {children(row, win.start + i)}\n          </DataGridRow>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nfunction DataGridRow<TData>({\n  row,\n  index,\n  className,\n  style,\n  ...props\n}: React.ComponentProps<\"div\"> & { row: DataTableRow<TData>; index: number }) {\n  const { templateColumns, rowHeight, focus } = useDataGrid()\n  const ctx = React.useMemo(() => ({ row: row as DataTableRow<unknown>, index }), [row, index])\n  const selected = row.getIsSelected()\n  return (\n    <RowContext.Provider value={ctx}>\n      <div\n        data-slot=\"data-grid-row\"\n        data-index={index}\n        data-state={selected ? \"selected\" : undefined}\n        data-focused={focus?.rowIndex === index ? \"\" : undefined}\n        role=\"row\"\n        aria-rowindex={index + 1}\n        aria-selected={selected || undefined}\n        className={cn(\n          \"group/row grid border-b transition-colors hover:bg-muted/40 data-[state=selected]:bg-muted/60\",\n          className\n        )}\n        style={{ gridTemplateColumns: templateColumns, height: rowHeight, ...style }}\n        {...props}\n      />\n    </RowContext.Provider>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Cells\n * ------------------------------------------------------------------------- */\n\nconst isPrintable = (event: React.KeyboardEvent) =>\n  event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey\n\nfunction DataGridCell({\n  column: columnId,\n  editable: editableProp,\n  editor,\n  className,\n  children,\n  style,\n  onClick,\n  onDoubleClick,\n  onKeyDown,\n  onPointerDown,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  column: string\n  /** Override the column config for this cell. */\n  editable?: boolean\n  /** Custom editor; return `undefined` to use the default for the column type. */\n  editor?: (props: EditorRenderProps) => React.ReactNode | undefined\n  children?: React.ReactNode\n}) {\n  const grid = useDataGrid()\n  const { row, index } = useDataGridRow()\n  const layout = grid.layoutById.get(columnId)\n  const address = React.useMemo(() => ({ rowIndex: index, columnId }), [index, columnId])\n  const ref = React.useRef<HTMLDivElement>(null)\n  const focused = grid.focus?.rowIndex === index && grid.focus.columnId === columnId\n  const isEditing = grid.editing?.rowIndex === index && grid.editing.columnId === columnId\n  // Take DOM focus when this cell is the focused one and a focus request is pending\n  // (after navigation, after an editor closes, or once a virtualized row mounts).\n  React.useLayoutEffect(() => {\n    const el = ref.current\n    if (!focused || isEditing || !el) return\n    if (document.activeElement !== el && !el.contains(document.activeElement)) el.focus({ preventScroll: true })\n  }, [focused, isEditing, grid.focusRequest])\n  if (!layout) return null\n  const config = layout.config\n  const editable = editableProp ?? !!config.editable\n  const inRange = grid.isInRange(address)\n  const value = row.getValue(columnId)\n  const format = config.format ?? defaultFormat\n  const columnIndex = grid.layout.indexOf(layout)\n\n  const move = (dr: number, dc: number, extend = false) => {\n    // Navigate from the focused address in state; DOM focus can lag a frame after an edit.\n    const base = grid.focus ?? address\n    const baseCol = Math.max(\n      0,\n      grid.layout.findIndex((c) => c.id === base.columnId)\n    )\n    const nextCol = grid.layout[clamp(baseCol + dc, 0, grid.layout.length - 1)]\n    grid.focusCell({ rowIndex: base.rowIndex + dr, columnId: nextCol.id }, { extend })\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event)\n    if (event.defaultPrevented || isEditing) return\n    const meta = event.metaKey || event.ctrlKey\n    const pageRows = Math.max(1, Math.floor((grid.containerRef.current?.clientHeight ?? 0) / grid.rowHeight) - 1)\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault()\n        move(1, 0, event.shiftKey)\n        return\n      case \"ArrowUp\":\n        event.preventDefault()\n        move(-1, 0, event.shiftKey)\n        return\n      case \"ArrowRight\":\n        event.preventDefault()\n        move(0, 1, event.shiftKey)\n        return\n      case \"ArrowLeft\":\n        event.preventDefault()\n        move(0, -1, event.shiftKey)\n        return\n      case \"Home\":\n        event.preventDefault()\n        grid.focusCell({ rowIndex: meta ? 0 : index, columnId: grid.layout[0].id }, { extend: event.shiftKey })\n        return\n      case \"End\":\n        event.preventDefault()\n        grid.focusCell(\n          { rowIndex: meta ? grid.rows.length - 1 : index, columnId: grid.layout[grid.layout.length - 1].id },\n          { extend: event.shiftKey }\n        )\n        return\n      case \"PageDown\":\n        event.preventDefault()\n        move(pageRows, 0, event.shiftKey)\n        return\n      case \"PageUp\":\n        event.preventDefault()\n        move(-pageRows, 0, event.shiftKey)\n        return\n      case \"Tab\":\n        event.preventDefault()\n        move(0, event.shiftKey ? -1 : 1)\n        return\n      case \"Enter\":\n      case \"F2\":\n        event.preventDefault()\n        if (editable) grid.startEditing(address)\n        else if (event.key === \"Enter\") move(1, 0)\n        return\n      case \" \":\n        if (editable && config.type === \"boolean\") {\n          event.preventDefault()\n          grid.commit(address, !value)\n        }\n        return\n      case \"Escape\":\n        grid.focusCell(address)\n        return\n      case \"Delete\":\n      case \"Backspace\":\n        event.preventDefault()\n        grid.clearRange()\n        return\n      case \"c\":\n      case \"C\":\n        if (meta) {\n          event.preventDefault()\n          void grid.copyRange()\n        }\n        return\n      case \"v\":\n      case \"V\":\n        if (meta) {\n          event.preventDefault()\n          void grid.paste()\n        }\n        return\n    }\n    if (editable && isPrintable(event) && config.type !== \"boolean\") {\n      event.preventDefault()\n      grid.startEditing(address, event.key)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-grid-cell\"\n      data-column={columnId}\n      data-row-index={index}\n      data-type={config.type}\n      data-pinned={layout.pinned}\n      data-editable={editable ? \"\" : undefined}\n      data-focused={focused ? \"\" : undefined}\n      data-editing={isEditing ? \"\" : undefined}\n      data-selected={inRange ? \"\" : undefined}\n      role=\"gridcell\"\n      aria-colindex={columnIndex + 1}\n      aria-readonly={editable ? undefined : true}\n      tabIndex={focused ? 0 : -1}\n      className={cn(\n        \"relative flex min-w-0 items-center overflow-hidden px-2 whitespace-nowrap outline-none\",\n        \"data-selected:bg-primary/10\",\n        \"data-focused:z-10 data-focused:ring-2 data-focused:ring-primary data-focused:ring-inset\",\n        \"data-editing:bg-background data-editing:p-0\",\n        layout.pinned && \"sticky z-20 bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted\",\n        layout.pinned === \"left\" && \"border-e\",\n        layout.pinned === \"right\" && \"border-s\",\n        config.type === \"number\" && \"justify-end tabular-nums\",\n        className\n      )}\n      style={{ ...pinnedStyle(layout), ...style }}\n      onPointerDown={(event) => {\n        onPointerDown?.(event)\n        if (event.defaultPrevented || event.button !== 0 || isEditing) return\n        if ((event.target as HTMLElement).closest(\"button, a, input, select, textarea, [role=checkbox]\")) return\n        grid.focusCell(address, { extend: event.shiftKey, scroll: false })\n      }}\n      onClick={onClick}\n      onDoubleClick={(event) => {\n        onDoubleClick?.(event)\n        if (!event.defaultPrevented && editable && config.type !== \"boolean\") grid.startEditing(address)\n      }}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {isEditing ? (\n        <CellEditor\n          address={address}\n          config={config}\n          row={row}\n          value={value}\n          format={format}\n          editor={editor}\n          display={children}\n        />\n      ) : children !== undefined ? (\n        children\n      ) : config.type === \"boolean\" ? (\n        <Checkbox\n          checked={!!value}\n          disabled={!editable}\n          onCheckedChange={({ checked }) => grid.commit(address, checked === true)}\n          aria-label={columnId}\n        />\n      ) : (\n        <span className=\"truncate\">{format(value)}</span>\n      )}\n    </div>\n  )\n}\n\nfunction CellEditor({\n  address,\n  config,\n  row,\n  value,\n  format,\n  editor,\n  display,\n}: {\n  address: CellAddress\n  config: DataGridColumnConfig\n  row: DataTableRow<unknown>\n  value: unknown\n  format: (value: unknown) => string\n  editor?: (props: EditorRenderProps) => React.ReactNode | undefined\n  display?: React.ReactNode\n}) {\n  const grid = useDataGrid()\n  const seed = grid.editing?.seed\n  const [text, setText] = React.useState(() => seed ?? format(value))\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const done = React.useRef(false)\n  React.useLayoutEffect(() => {\n    const el = inputRef.current\n    if (!el) return\n    el.focus()\n    if (seed === undefined && \"select\" in el && typeof el.select === \"function\" && el.type !== \"date\") el.select()\n  }, [seed])\n\n  const commit = (next?: string, then?: () => void) => {\n    if (done.current) return\n    done.current = true\n    grid.commit(address, parseInput(config, next ?? text, value))\n    grid.stopEditing({ refocus: !then })\n    then?.()\n  }\n  const cancel = () => {\n    if (done.current) return\n    done.current = true\n    grid.stopEditing()\n  }\n  const isSelect = config.type === \"select\" && !!config.options\n  const commitRef = React.useRef(commit)\n  const cancelRef = React.useRef(cancel)\n  React.useEffect(() => {\n    commitRef.current = commit\n    cancelRef.current = cancel\n  })\n  const { registerEditor } = grid\n  // Scrolling the grid closes the editor (text commits, an unpicked select cancels) before its\n  // row can leave the virtual window, so the editor never unmounts mid-edit.\n  React.useEffect(\n    () => registerEditor({ close: () => (isSelect ? cancelRef.current() : commitRef.current()) }),\n    [registerEditor, isSelect]\n  )\n  const moveAfter = (dr: number, dc: number) => () => {\n    const col = grid.layout.findIndex((c) => c.id === address.columnId)\n    const next = grid.layout[clamp(col + dc, 0, grid.layout.length - 1)]\n    grid.focusCell({ rowIndex: address.rowIndex + dr, columnId: next.id })\n  }\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === \"Enter\") {\n      event.preventDefault()\n      commit(undefined, moveAfter(1, 0))\n    } else if (event.key === \"Tab\") {\n      event.preventDefault()\n      commit(undefined, moveAfter(0, event.shiftKey ? -1 : 1))\n    } else if (event.key === \"Escape\") {\n      event.preventDefault()\n      cancel()\n    }\n    event.stopPropagation()\n  }\n  const inputProps: EditorRenderProps[\"inputProps\"] = {\n    ref: inputRef,\n    value: text,\n    onChange: (e) => setText(e.target.value),\n    onKeyDown,\n    onBlur: () => commit(),\n    className: \"size-full bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground\",\n    \"aria-label\": \"Edit value\",\n  }\n  const custom = editor?.({ value: text, onChange: setText, commit, cancel, column: config, row, inputProps })\n  if (custom !== undefined) return <>{custom}</>\n\n  if (config.type === \"select\" && config.options) {\n    return (\n      <SelectEditor\n        options={config.options}\n        value={text}\n        display={display}\n        onCommit={(v) => commit(v, moveAfter(1, 0))}\n        onCancel={cancel}\n      />\n    )\n  }\n  const type = config.type === \"number\" ? \"number\" : config.type === \"date\" ? \"date\" : \"text\"\n  return <input data-slot=\"data-grid-editor\" type={type} {...inputProps} />\n}\n\n/** Opens the toolkit Select immediately; picking commits, closing without a pick cancels. */\nfunction SelectEditor({\n  options,\n  value,\n  display,\n  onCommit,\n  onCancel,\n}: {\n  options: DataGridOption[]\n  value: string\n  /** What the cell normally shows, so the open editor looks like the cell. */\n  display?: React.ReactNode\n  onCommit: (value: string) => void\n  onCancel: () => void\n}) {\n  const collection = React.useMemo(\n    () => createListCollection({ items: options, itemToValue: (o) => o.value, itemToString: (o) => o.label }),\n    [options]\n  )\n  const picked = React.useRef(false)\n  const contentId = React.useId()\n  // Ark handles list navigation on the open content, so focus it (it is portaled) once mounted.\n  React.useLayoutEffect(() => {\n    const focusContent = () => document.getElementById(contentId)?.focus({ preventScroll: true })\n    focusContent()\n    const timer = setTimeout(focusContent, 0)\n    return () => clearTimeout(timer)\n  }, [contentId])\n  const label = options.find((o) => o.value === value)?.label ?? value\n  return (\n    <Select\n      collection={collection}\n      value={value ? [value] : []}\n      defaultOpen\n      ids={{ content: contentId }}\n      positioning={{ sameWidth: true, gutter: 2 }}\n      onValueChange={({ value: next }) => {\n        if (next[0] === undefined) return\n        picked.current = true\n        onCommit(next[0])\n      }}\n      onOpenChange={({ open }) => {\n        if (!open && !picked.current) onCancel()\n      }}\n      onPointerDown={(event) => event.stopPropagation()}\n      className=\"size-full\"\n    >\n      <SelectControl className=\"size-full\">\n        <SelectTrigger\n          variant=\"unstyled\"\n          data-slot=\"data-grid-select-editor\"\n          className=\"size-full px-2 [&_svg]:text-muted-foreground\"\n          aria-label=\"Edit value\"\n        >\n          <SelectValue placeholder=\"Choose…\">{display ?? label}</SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {options.map((o) => (\n          <SelectItem key={o.value} item={o}>\n            <SelectItemText>{o.label}</SelectItemText>\n            <SelectItemIndicator />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Selection cells, empty\n * ------------------------------------------------------------------------- */\n\nfunction DataGridSelectAll({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { table, layoutById } = useDataGrid()\n  const layout = layoutById.get(\"select\")\n  const t = table as DataTableInstance<unknown> & {\n    getIsAllPageRowsSelected?: () => boolean\n    getIsSomePageRowsSelected?: () => boolean\n    toggleAllPageRowsSelected?: (v?: boolean) => void\n  }\n  const all = t.getIsAllPageRowsSelected?.() ?? false\n  const some = t.getIsSomePageRowsSelected?.() ?? false\n  return (\n    <div\n      data-slot=\"data-grid-select-all\"\n      role=\"columnheader\"\n      className={cn(\n        \"flex items-center justify-center\",\n        layout?.pinned && \"sticky z-10 bg-muted\",\n        layout?.pinned === \"left\" && \"border-e\",\n        className\n      )}\n      style={pinnedStyle(layout)}\n      {...props}\n    >\n      <Checkbox\n        checked={all ? true : some ? \"indeterminate\" : false}\n        onCheckedChange={({ checked }) => t.toggleAllPageRowsSelected?.(checked === true)}\n        aria-label=\"Select all\"\n      />\n    </div>\n  )\n}\n\nfunction DataGridSelectRow({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { layoutById } = useDataGrid()\n  const { row } = useDataGridRow()\n  const layout = layoutById.get(\"select\")\n  return (\n    <div\n      data-slot=\"data-grid-select-row\"\n      role=\"gridcell\"\n      className={cn(\n        \"flex items-center justify-center\",\n        layout?.pinned && \"sticky z-20 bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted\",\n        layout?.pinned === \"left\" && \"border-e\",\n        className\n      )}\n      style={pinnedStyle(layout)}\n      {...props}\n    >\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}\n        aria-label=\"Select row\"\n      />\n    </div>\n  )\n}\n\nfunction DataGridEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { rows } = useDataGrid()\n  if (rows.length) return null\n  return (\n    <div\n      data-slot=\"data-grid-empty\"\n      className={cn(\"flex h-24 items-center justify-center text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DataGrid,\n  DataGridContainer,\n  DataGridHeader,\n  DataGridHeaderRow,\n  DataGridHead,\n  DataGridHeadWithResize,\n  DataGridResizeHandle,\n  DataGridBody,\n  DataGridRow,\n  DataGridCell,\n  DataGridSelectAll,\n  DataGridSelectRow,\n  DataGridEmpty,\n  useDataGrid,\n  useDataGridRow,\n  type DataGridColumnConfig,\n  type DataGridColumnType,\n  type DataGridCellChange,\n  type DataGridOption,\n}\n"
+      "content": "import * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from \"lucide-react\"\nimport { createListCollection } from \"@ark-ui/react/collection\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport type { DataTableInstance, DataTableRow } from \"@/lib/data-table-adapter\"\nimport { cn } from \"@/lib/utils\"\nimport { useControllable } from \"@/lib/controllable\"\nimport { LiveRegion, useLiveRegion } from \"@/components/ui/live-region\"\n\n/**\n * DataGrid — an editable, keyboard-driven grid on the same source-agnostic\n * `DataTableInstance` contract as the data table. The instance supplies rows,\n * columns, sorting, filtering and selection; the grid adds cell focus, range\n * selection, inline editing, copy/paste, row virtualization, column resizing\n * and pinning. Edits are intents: `onCellChange({ row, columnId, value })`\n * and the consumer owns the data.\n *\n * Column behaviour is data (`columns` prop, keyed by column id):\n * `{ id, type, editable, options, width, minWidth, pinned, format, parse }`.\n *\n * Anatomy:\n *   DataGrid { table, columns, onCellChange }\n *     DataGridContainer                 scroll viewport, role=\"grid\"\n *       DataGridHeader > DataGridHeaderRow > DataGridHead column=… (+ DataGridResizeHandle)\n *       DataGridBody children={(row) => cells}   virtualized rows\n *         DataGridRow > DataGridCell column=…    focusable, editable\n *       DataGridEmpty\n *   DataGridSelectAll / DataGridSelectRow  checkbox cells\n *\n * Keyboard: arrows move, Shift+arrows extend the range, Home/End and\n * Ctrl+Home/End jump, PageUp/PageDown scroll, Enter or F2 or typing edits,\n * Enter commits and moves down, Tab commits and moves right, Escape cancels,\n * Space toggles booleans, Delete clears the range, ⌘C/⌘V copy and paste TSV.\n */\n\ntype DataGridColumnType = \"text\" | \"number\" | \"boolean\" | \"select\" | \"date\"\ntype DataGridOption = { value: string; label: string }\ntype DataGridColumnConfig = {\n  id: string\n  type?: DataGridColumnType\n  editable?: boolean\n  options?: DataGridOption[]\n  width?: number\n  minWidth?: number\n  pinned?: \"left\" | \"right\"\n  /** Value → text for display and for seeding the editor. */\n  format?: (value: unknown) => string\n  /** Editor text → value on commit. */\n  parse?: (input: string, previous: unknown) => unknown\n}\n\ntype CellAddress = { rowIndex: number; columnId: string }\ntype CellRange = { anchor: CellAddress; focus: CellAddress }\ntype DataGridCellChange<TData> = {\n  row: DataTableRow<TData>\n  columnId: string\n  value: unknown\n  previous: unknown\n}\n\ntype EditorRenderProps = {\n  value: string\n  onChange: (value: string) => void\n  commit: (value?: string) => void\n  cancel: () => void\n  column: DataGridColumnConfig\n  row: DataTableRow<unknown>\n  inputProps: React.InputHTMLAttributes<HTMLInputElement> & { ref: React.Ref<HTMLInputElement> }\n}\n\nconst DEFAULT_WIDTH = 160\nconst MIN_WIDTH = 60\n\n/* ---------------------------------------------------------------------------\n * Context\n * ------------------------------------------------------------------------- */\n\ntype ColumnLayout = {\n  id: string\n  width: number\n  pinned?: \"left\" | \"right\"\n  /** Sticky offset for pinned columns. */\n  offset: number\n  config: DataGridColumnConfig\n}\n\ntype DataGridContextValue<TData = unknown> = {\n  table: DataTableInstance<TData>\n  rows: DataTableRow<TData>[]\n  layout: ColumnLayout[]\n  layoutById: Map<string, ColumnLayout>\n  templateColumns: string\n  totalWidth: number\n  /** Fixed height of every row in px. */\n  rowHeight: number\n  setWidth: (columnId: string, width: number) => void\n  focus: CellAddress | null\n  range: CellRange | null\n  editing: (CellAddress & { seed?: string }) | null\n  focusCell: (address: CellAddress, options?: { extend?: boolean; scroll?: boolean }) => void\n  startEditing: (address: CellAddress, seed?: string) => void\n  stopEditing: (options?: { refocus?: boolean }) => void\n  commit: (address: CellAddress, value: unknown) => void\n  clearRange: () => void\n  copyRange: () => Promise<void>\n  paste: () => Promise<void>\n  isInRange: (address: CellAddress) => boolean\n  containerRef: React.RefObject<HTMLDivElement | null>\n  /** Bumped whenever a cell should take DOM focus; cells act on it in a layout effect. */\n  focusRequest: number\n  /** Editors register so the grid can close them when the viewport scrolls. */\n  registerEditor: (handle: { close: () => void }) => () => void\n  closeEditor: () => void\n  window: { start: number; end: number }\n  setScrollTop: (top: number) => void\n  setViewportHeight: (height: number) => void\n  announce: (message: string) => void\n}\n\nconst DataGridContext = React.createContext<DataGridContextValue | null>(null)\nconst RowContext = React.createContext<{ row: DataTableRow<unknown>; index: number } | null>(null)\n\nfunction useDataGrid<TData = unknown>() {\n  const ctx = React.useContext(DataGridContext)\n  if (!ctx) throw new Error(\"DataGrid parts must be used within <DataGrid>\")\n  return ctx as DataGridContextValue<TData>\n}\nfunction useDataGridRow() {\n  const ctx = React.useContext(RowContext)\n  if (!ctx) throw new Error(\"DataGridCell must be used within <DataGridRow>\")\n  return ctx\n}\n\nconst clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v))\nconst defaultFormat = (value: unknown) => {\n  if (value === null || value === undefined) return \"\"\n  if (value instanceof Date) return Number.isNaN(value.getTime()) ? \"\" : value.toISOString().slice(0, 10)\n  return String(value)\n}\n\n/* ---------------------------------------------------------------------------\n * Root\n * ------------------------------------------------------------------------- */\n\nfunction DataGrid<TData>({\n  table,\n  columns = [],\n  rowHeight = 36,\n  overscan = 6,\n  onCellChange,\n  columnSizing: sizingProp,\n  defaultColumnSizing,\n  onColumnSizingChange,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  table: DataTableInstance<TData>\n  /** Per-column grid behaviour keyed by column id: editor type, width, pinning, options, format and parse. */\n  columns?: DataGridColumnConfig[]\n  /** Fixed height of every row in px. */\n  rowHeight?: number\n  /** Rows rendered beyond the visible window on each side. */\n  overscan?: number\n  /** Called with `{ row, columnId, value, previous }` when a cell edit commits; the consumer applies it. */\n  onCellChange?: (change: DataGridCellChange<TData>) => void\n  /** Controlled column widths by column id. */\n  columnSizing?: Record<string, number>\n  /** Initial column widths when uncontrolled. */\n  defaultColumnSizing?: Record<string, number>\n  /** Called when a column is resized. */\n  onColumnSizingChange?: (sizing: Record<string, number>) => void\n  children?: React.ReactNode\n}) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const rows = table.getRowModel().rows\n  const visibleColumns = table.getAllColumns().filter((c) => c.getIsVisible())\n\n  /* Column sizing (controllable) */\n  const [initialSizing] = React.useState<Record<string, number>>(() => defaultColumnSizing ?? {})\n  const [sizing, setSizing] = useControllable(sizingProp, initialSizing, onColumnSizingChange)\n  const setWidth = React.useCallback(\n    (columnId: string, width: number) => setSizing((prev) => ({ ...prev, [columnId]: width })),\n    [setSizing]\n  )\n\n  const configById = React.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns])\n\n  /* Layout: order = visible engine columns; pinned left first, right last */\n  const { layout, layoutById, templateColumns, totalWidth } = React.useMemo(() => {\n    const base = visibleColumns.map((c) => {\n      const config = configById.get(c.id) ?? { id: c.id }\n      const width = Math.max(config.minWidth ?? MIN_WIDTH, sizing[c.id] ?? config.width ?? DEFAULT_WIDTH)\n      return { id: c.id, width, pinned: config.pinned, offset: 0, config }\n    })\n    const left = base.filter((c) => c.pinned === \"left\")\n    const middle = base.filter((c) => !c.pinned)\n    const right = base.filter((c) => c.pinned === \"right\")\n    let offset = 0\n    for (const c of left) {\n      c.offset = offset\n      offset += c.width\n    }\n    offset = 0\n    for (const c of [...right].reverse()) {\n      c.offset = offset\n      offset += c.width\n    }\n    const ordered: ColumnLayout[] = [...left, ...middle, ...right]\n    return {\n      layout: ordered,\n      layoutById: new Map(ordered.map((c) => [c.id, c])),\n      templateColumns: ordered.map((c) => `${c.width}px`).join(\" \"),\n      totalWidth: ordered.reduce((sum, c) => sum + c.width, 0),\n    }\n    // visibleColumns is derived from table state; its identity changes with it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visibleColumns.map((c) => c.id).join(\"|\"), configById, sizing])\n\n  /* Virtual window */\n  const [scrollTop, setScrollTopState] = React.useState(0)\n  const [viewportHeight, setViewportHeight] = React.useState(0)\n  const setScrollTop = React.useCallback((top: number) => setScrollTopState(top), [])\n  const window = React.useMemo(() => {\n    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan)\n    const end = Math.min(rows.length, Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan)\n    return { start, end }\n  }, [scrollTop, viewportHeight, rowHeight, overscan, rows.length])\n\n  /* Focus, range, editing */\n  const [focus, setFocus] = React.useState<CellAddress | null>(null)\n  const [range, setRange] = React.useState<CellRange | null>(null)\n  const [editing, setEditing] = React.useState<(CellAddress & { seed?: string }) | null>(null)\n  const { message: announcement, announce } = useLiveRegion()\n  const [focusRequest, setFocusRequest] = React.useState(0)\n  const activeEditor = React.useRef<{ close: () => void } | null>(null)\n  const registerEditor = React.useCallback((handle: { close: () => void }) => {\n    activeEditor.current = handle\n    return () => {\n      if (activeEditor.current === handle) activeEditor.current = null\n    }\n  }, [])\n  const closeEditor = React.useCallback(() => activeEditor.current?.close(), [])\n\n  const latest = React.useRef({ rows, layout, focus, range, editing, onCellChange, rowHeight })\n  React.useEffect(() => {\n    latest.current = { rows, layout, focus, range, editing, onCellChange, rowHeight }\n  })\n\n  const scrollRowIntoView = React.useCallback(\n    (rowIndex: number) => {\n      const el = containerRef.current\n      if (!el) return\n      const headerHeight = el.querySelector<HTMLElement>(\"[data-slot=data-grid-header]\")?.offsetHeight ?? 0\n      const top = rowIndex * rowHeight\n      const bottom = top + rowHeight\n      const viewTop = el.scrollTop\n      const viewBottom = el.scrollTop + el.clientHeight - headerHeight\n      if (top < viewTop) el.scrollTop = top\n      else if (bottom > viewBottom) el.scrollTop = bottom - (el.clientHeight - headerHeight)\n    },\n    [rowHeight]\n  )\n\n  const scrollColumnIntoView = React.useCallback((columnId: string) => {\n    const el = containerRef.current\n    const col = latest.current.layout.find((c) => c.id === columnId)\n    if (!el || !col || col.pinned) return\n    const left = latest.current.layout.slice(0, latest.current.layout.indexOf(col)).reduce((s, c) => s + c.width, 0)\n    const pinnedLeft = latest.current.layout.filter((c) => c.pinned === \"left\").reduce((s, c) => s + c.width, 0)\n    const pinnedRight = latest.current.layout.filter((c) => c.pinned === \"right\").reduce((s, c) => s + c.width, 0)\n    if (left < el.scrollLeft + pinnedLeft) el.scrollLeft = left - pinnedLeft\n    else if (left + col.width > el.scrollLeft + el.clientWidth - pinnedRight)\n      el.scrollLeft = left + col.width - el.clientWidth + pinnedRight\n  }, [])\n\n  const focusCell = React.useCallback(\n    (address: CellAddress, options?: { extend?: boolean; scroll?: boolean }) => {\n      const { rows, layout } = latest.current\n      if (!rows.length || !layout.length) return\n      const rowIndex = clamp(address.rowIndex, 0, rows.length - 1)\n      const columnId = layout.some((c) => c.id === address.columnId) ? address.columnId : layout[0].id\n      const next = { rowIndex, columnId }\n      setFocus(next)\n      setRange((prev) =>\n        options?.extend && (prev?.anchor ?? latest.current.focus)\n          ? { anchor: prev?.anchor ?? latest.current.focus!, focus: next }\n          : null\n      )\n      setFocusRequest((n) => n + 1)\n      if (options?.scroll !== false) {\n        scrollRowIntoView(rowIndex)\n        scrollColumnIntoView(columnId)\n      }\n    },\n    [scrollRowIntoView, scrollColumnIntoView]\n  )\n\n  const startEditing = React.useCallback((address: CellAddress, seed?: string) => {\n    const config = latest.current.layout.find((c) => c.id === address.columnId)?.config\n    if (!config?.editable) return\n    setEditing({ ...address, seed })\n  }, [])\n\n  const stopEditing = React.useCallback((options?: { refocus?: boolean }) => {\n    setEditing(null)\n    if (options?.refocus !== false) setFocusRequest((n) => n + 1)\n  }, [])\n\n  const commit = React.useCallback((address: CellAddress, value: unknown) => {\n    const row = latest.current.rows[address.rowIndex]\n    if (!row) return\n    const previous = row.getValue(address.columnId)\n    if (Object.is(previous, value)) return\n    latest.current.onCellChange?.({ row, columnId: address.columnId, value, previous })\n  }, [])\n\n  const rangeBounds = React.useCallback(\n    () => boundsOf(latest.current.range, latest.current.focus, latest.current.layout),\n    []\n  )\n\n  const isInRange = React.useCallback(\n    (address: CellAddress) => {\n      if (!range) return false\n      const b = boundsOf(range, focus, layout)\n      const ci = layout.findIndex((c) => c.id === address.columnId)\n      return !!b && address.rowIndex >= b.r0 && address.rowIndex <= b.r1 && ci >= b.c0 && ci <= b.c1\n    },\n    [range, focus, layout]\n  )\n\n  const clearRange = React.useCallback(() => {\n    const b = rangeBounds()\n    if (!b) return\n    const { rows, layout } = latest.current\n    let count = 0\n    for (let r = b.r0; r <= b.r1; r++) {\n      for (let c = b.c0; c <= b.c1; c++) {\n        const col = layout[c]\n        if (!col?.config.editable) continue\n        const row = rows[r]\n        const empty = col.config.type === \"boolean\" ? false : col.config.type === \"number\" ? null : \"\"\n        if (row && !Object.is(row.getValue(col.id), empty)) {\n          latest.current.onCellChange?.({ row, columnId: col.id, value: empty, previous: row.getValue(col.id) })\n          count++\n        }\n      }\n    }\n    if (count) announce(`Cleared ${count} cell${count === 1 ? \"\" : \"s\"}.`)\n  }, [rangeBounds, announce])\n\n  const copyRange = React.useCallback(async () => {\n    const b = rangeBounds()\n    if (!b) return\n    const { rows, layout } = latest.current\n    const lines: string[] = []\n    for (let r = b.r0; r <= b.r1; r++) {\n      const cells: string[] = []\n      for (let c = b.c0; c <= b.c1; c++) {\n        const col = layout[c]\n        const value = rows[r]?.getValue(col.id)\n        cells.push((col.config.format ?? defaultFormat)(value))\n      }\n      lines.push(cells.join(\"\\t\"))\n    }\n    try {\n      await navigator.clipboard.writeText(lines.join(\"\\n\"))\n      const n = (b.r1 - b.r0 + 1) * (b.c1 - b.c0 + 1)\n      announce(`Copied ${n} cell${n === 1 ? \"\" : \"s\"}.`)\n    } catch {\n      announce(\"Could not copy to the clipboard.\")\n    }\n  }, [rangeBounds, announce])\n\n  const paste = React.useCallback(async () => {\n    const { focus, rows, layout } = latest.current\n    if (!focus) return\n    let text = \"\"\n    try {\n      text = await navigator.clipboard.readText()\n    } catch {\n      announce(\"Could not read the clipboard.\")\n      return\n    }\n    const lines = text\n      .replace(/\\r/g, \"\")\n      .split(\"\\n\")\n      .filter((l, i, arr) => l !== \"\" || i < arr.length - 1)\n    const startCol = layout.findIndex((c) => c.id === focus.columnId)\n    let count = 0\n    lines.forEach((line, dr) => {\n      const row = rows[focus.rowIndex + dr]\n      if (!row) return\n      line.split(\"\\t\").forEach((cell, dc) => {\n        const col = layout[startCol + dc]\n        if (!col?.config.editable) return\n        const previous = row.getValue(col.id)\n        const value = parseInput(col.config, cell, previous)\n        if (!Object.is(previous, value)) {\n          latest.current.onCellChange?.({ row, columnId: col.id, value, previous })\n          count++\n        }\n      })\n    })\n    announce(`Pasted into ${count} cell${count === 1 ? \"\" : \"s\"}.`)\n  }, [announce])\n\n  const ctx = React.useMemo<DataGridContextValue<TData>>(\n    () => ({\n      table,\n      rows,\n      layout,\n      layoutById,\n      templateColumns,\n      totalWidth,\n      rowHeight,\n      setWidth,\n      focus,\n      range,\n      editing,\n      focusCell,\n      startEditing,\n      stopEditing,\n      commit,\n      clearRange,\n      copyRange,\n      paste,\n      isInRange,\n      containerRef,\n      focusRequest,\n      registerEditor,\n      closeEditor,\n      window,\n      setScrollTop,\n      setViewportHeight,\n      announce,\n    }),\n    [\n      table,\n      rows,\n      layout,\n      layoutById,\n      templateColumns,\n      totalWidth,\n      rowHeight,\n      setWidth,\n      focus,\n      range,\n      editing,\n      focusCell,\n      startEditing,\n      stopEditing,\n      commit,\n      clearRange,\n      copyRange,\n      paste,\n      isInRange,\n      focusRequest,\n      registerEditor,\n      closeEditor,\n      window,\n      setScrollTop,\n      announce,\n    ]\n  )\n\n  return (\n    <DataGridContext.Provider value={ctx as DataGridContextValue}>\n      <div\n        data-slot=\"data-grid\"\n        data-editing={editing ? \"\" : undefined}\n        className={cn(\"flex min-h-0 flex-1 flex-col\", className)}\n        {...props}\n      >\n        {children}\n        <LiveRegion data-slot=\"data-grid-live-region\" message={announcement} />\n      </div>\n    </DataGridContext.Provider>\n  )\n}\n\nfunction boundsOf(range: CellRange | null, focus: CellAddress | null, layout: ColumnLayout[]) {\n  const a = range?.anchor ?? focus\n  const b = range?.focus ?? focus\n  if (!a || !b) return null\n  const ca = layout.findIndex((c) => c.id === a.columnId)\n  const cb = layout.findIndex((c) => c.id === b.columnId)\n  return {\n    r0: Math.min(a.rowIndex, b.rowIndex),\n    r1: Math.max(a.rowIndex, b.rowIndex),\n    c0: Math.min(ca, cb),\n    c1: Math.max(ca, cb),\n  }\n}\n\nfunction parseInput(config: DataGridColumnConfig, input: string, previous: unknown): unknown {\n  if (config.parse) return config.parse(input, previous)\n  switch (config.type) {\n    case \"number\": {\n      if (input.trim() === \"\") return null\n      const n = Number(input)\n      return Number.isNaN(n) ? previous : n\n    }\n    case \"boolean\":\n      return /^(true|yes|1|on|x)$/i.test(input.trim())\n    case \"date\": {\n      if (!input) return null\n      const d = new Date(input)\n      return Number.isNaN(d.getTime()) ? previous : previous instanceof Date ? d : input\n    }\n    default:\n      return input\n  }\n}\n\n/* ---------------------------------------------------------------------------\n * Container, header, body\n * ------------------------------------------------------------------------- */\n\nfunction DataGridContainer({ className, onScroll, ...props }: React.ComponentProps<\"div\">) {\n  const { containerRef, setScrollTop, setViewportHeight, rows, closeEditor } = useDataGrid()\n  React.useLayoutEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const update = () => setViewportHeight(el.clientHeight)\n    update()\n    const observer = new ResizeObserver(update)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [containerRef, setViewportHeight])\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"data-grid-container\"\n      role=\"grid\"\n      aria-rowcount={rows.length}\n      className={cn(\"relative min-h-0 flex-1 overflow-auto rounded-lg border bg-background text-sm\", className)}\n      onScroll={(event) => {\n        onScroll?.(event)\n        // An open editor (and its portaled popover) must not drift away from its cell.\n        closeEditor()\n        setScrollTop(event.currentTarget.scrollTop)\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction DataGridHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"data-grid-header\"\n      role=\"rowgroup\"\n      className={cn(\"sticky top-0 z-30 w-fit min-w-full bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DataGridHeaderRow({ className, style, ...props }: React.ComponentProps<\"div\">) {\n  const { templateColumns, totalWidth } = useDataGrid()\n  return (\n    <div\n      data-slot=\"data-grid-header-row\"\n      role=\"row\"\n      className={cn(\"grid border-b bg-muted\", className)}\n      style={{ gridTemplateColumns: templateColumns, minWidth: totalWidth, ...style }}\n      {...props}\n    />\n  )\n}\n\nconst pinnedStyle = (col: ColumnLayout | undefined): React.CSSProperties | undefined =>\n  col?.pinned === \"left\" ? { left: col.offset } : col?.pinned === \"right\" ? { right: col.offset } : undefined\n\n/** A header cell. Sortable columns get a sort button with `children` as the title. */\nfunction DataGridHead({\n  column: columnId,\n  className,\n  children,\n  style,\n  ...props\n}: React.ComponentProps<\"div\"> & { column: string }) {\n  const { table, layoutById } = useDataGrid()\n  const column = table.getColumn(columnId)\n  const layout = layoutById.get(columnId)\n  if (!column || !layout) return null\n  const sorted = column.getIsSorted()\n  const sortable = column.getCanSort()\n  return (\n    <div\n      data-slot=\"data-grid-head\"\n      data-column={columnId}\n      data-pinned={layout.pinned}\n      role=\"columnheader\"\n      aria-sort={sorted === \"asc\" ? \"ascending\" : sorted === \"desc\" ? \"descending\" : undefined}\n      className={cn(\n        \"group/head relative flex h-9 items-center gap-1 overflow-hidden px-2 font-medium whitespace-nowrap text-muted-foreground\",\n        layout.pinned && \"sticky z-10 bg-muted\",\n        layout.pinned === \"left\" && \"border-e\",\n        layout.pinned === \"right\" && \"border-s\",\n        className\n      )}\n      style={{ ...pinnedStyle(layout), ...style }}\n      {...props}\n    >\n      {sortable ? (\n        <ark.button\n          type=\"button\"\n          data-slot=\"data-grid-sort-trigger\"\n          className=\"-ms-1 flex h-7 min-w-0 items-center gap-1 rounded-md px-1 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50\"\n          onClick={() => column.toggleSorting()}\n        >\n          <span className=\"truncate\">{children}</span>\n          {sorted === \"desc\" ? (\n            <ArrowDownIcon className=\"size-3.5 shrink-0\" />\n          ) : sorted === \"asc\" ? (\n            <ArrowUpIcon className=\"size-3.5 shrink-0\" />\n          ) : (\n            <ChevronsUpDownIcon className=\"size-3.5 shrink-0 opacity-50\" />\n          )}\n        </ark.button>\n      ) : (\n        <span className=\"truncate\">{children}</span>\n      )}\n    </div>\n  )\n}\n\n/** Pointer-driven column resizer; double-click resets to the configured width. */\nfunction DataGridResizeHandle({ className, onPointerDown, onDoubleClick, ...props }: React.ComponentProps<\"div\">) {\n  const { setWidth, layoutById } = useDataGrid()\n  const head = React.useContext(HeadColumnContext)\n  return (\n    <div\n      data-slot=\"data-grid-resize-handle\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      className={cn(\n        \"absolute inset-y-0 inset-e-0 z-10 w-2 cursor-col-resize touch-none select-none after:absolute after:inset-y-2 after:inset-e-0.5 after:w-px after:bg-border group-hover/head:after:bg-foreground/40 hover:after:bg-primary\",\n        className\n      )}\n      onPointerDown={(event) => {\n        onPointerDown?.(event)\n        if (event.defaultPrevented || event.button !== 0 || !head) return\n        event.preventDefault()\n        event.stopPropagation()\n        const start = event.clientX\n        const startWidth = layoutById.get(head)?.width ?? DEFAULT_WIDTH\n        const min = layoutById.get(head)?.config.minWidth ?? MIN_WIDTH\n        const move = (e: PointerEvent) => setWidth(head, Math.max(min, startWidth + e.clientX - start))\n        const up = () => {\n          window.removeEventListener(\"pointermove\", move)\n          window.removeEventListener(\"pointerup\", up)\n        }\n        window.addEventListener(\"pointermove\", move)\n        window.addEventListener(\"pointerup\", up)\n      }}\n      onDoubleClick={(event) => {\n        onDoubleClick?.(event)\n        if (!event.defaultPrevented && head) {\n          const config = layoutById.get(head)?.config\n          setWidth(head, config?.width ?? DEFAULT_WIDTH)\n        }\n      }}\n      {...props}\n    />\n  )\n}\n\nconst HeadColumnContext = React.createContext<string | null>(null)\n\n/** Wraps `DataGridHead` so `DataGridResizeHandle` knows its column. */\nfunction DataGridHeadWithResize({ column, children, ...props }: React.ComponentProps<typeof DataGridHead>) {\n  return (\n    <HeadColumnContext.Provider value={column}>\n      <DataGridHead column={column} {...props}>\n        {children}\n        <DataGridResizeHandle />\n      </DataGridHead>\n    </HeadColumnContext.Provider>\n  )\n}\n\n/** Virtualized rows. `children` renders the cells for a row. */\nfunction DataGridBody<TData>({\n  className,\n  children,\n  style,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  children: (row: DataTableRow<TData>, index: number) => React.ReactNode\n}) {\n  const { rows, window: win, rowHeight, totalWidth } = useDataGrid<TData>()\n  const visible = rows.slice(win.start, win.end)\n  return (\n    <div\n      data-slot=\"data-grid-body\"\n      role=\"rowgroup\"\n      className={cn(\"relative\", className)}\n      style={{ height: rows.length * rowHeight, minWidth: totalWidth, ...style }}\n      {...props}\n    >\n      <div style={{ transform: `translateY(${win.start * rowHeight}px)` }}>\n        {visible.map((row, i) => (\n          <DataGridRow key={row.id} row={row} index={win.start + i}>\n            {children(row, win.start + i)}\n          </DataGridRow>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nfunction DataGridRow<TData>({\n  row,\n  index,\n  className,\n  style,\n  ...props\n}: React.ComponentProps<\"div\"> & { row: DataTableRow<TData>; index: number }) {\n  const { templateColumns, rowHeight, focus } = useDataGrid()\n  const ctx = React.useMemo(() => ({ row: row as DataTableRow<unknown>, index }), [row, index])\n  const selected = row.getIsSelected()\n  return (\n    <RowContext.Provider value={ctx}>\n      <div\n        data-slot=\"data-grid-row\"\n        data-index={index}\n        data-state={selected ? \"selected\" : undefined}\n        data-focused={focus?.rowIndex === index ? \"\" : undefined}\n        role=\"row\"\n        aria-rowindex={index + 1}\n        aria-selected={selected || undefined}\n        className={cn(\n          \"group/row grid border-b transition-colors hover:bg-muted/40 data-[state=selected]:bg-muted/60\",\n          className\n        )}\n        style={{ gridTemplateColumns: templateColumns, height: rowHeight, ...style }}\n        {...props}\n      />\n    </RowContext.Provider>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Cells\n * ------------------------------------------------------------------------- */\n\nconst isPrintable = (event: React.KeyboardEvent) =>\n  event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey\n\nfunction DataGridCell({\n  column: columnId,\n  editable: editableProp,\n  editor,\n  className,\n  children,\n  style,\n  onClick,\n  onDoubleClick,\n  onKeyDown,\n  onPointerDown,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  column: string\n  /** Override the column config for this cell. */\n  editable?: boolean\n  /** Custom editor; return `undefined` to use the default for the column type. */\n  editor?: (props: EditorRenderProps) => React.ReactNode | undefined\n  children?: React.ReactNode\n}) {\n  const grid = useDataGrid()\n  const { row, index } = useDataGridRow()\n  const layout = grid.layoutById.get(columnId)\n  const address = React.useMemo(() => ({ rowIndex: index, columnId }), [index, columnId])\n  const ref = React.useRef<HTMLDivElement>(null)\n  const focused = grid.focus?.rowIndex === index && grid.focus.columnId === columnId\n  const isEditing = grid.editing?.rowIndex === index && grid.editing.columnId === columnId\n  // Take DOM focus when this cell is the focused one and a focus request is pending\n  // (after navigation, after an editor closes, or once a virtualized row mounts).\n  React.useLayoutEffect(() => {\n    const el = ref.current\n    if (!focused || isEditing || !el) return\n    if (document.activeElement !== el && !el.contains(document.activeElement)) el.focus({ preventScroll: true })\n  }, [focused, isEditing, grid.focusRequest])\n  if (!layout) return null\n  const config = layout.config\n  const editable = editableProp ?? !!config.editable\n  const inRange = grid.isInRange(address)\n  const value = row.getValue(columnId)\n  const format = config.format ?? defaultFormat\n  const columnIndex = grid.layout.indexOf(layout)\n\n  const move = (dr: number, dc: number, extend = false) => {\n    // Navigate from the focused address in state; DOM focus can lag a frame after an edit.\n    const base = grid.focus ?? address\n    const baseCol = Math.max(\n      0,\n      grid.layout.findIndex((c) => c.id === base.columnId)\n    )\n    const nextCol = grid.layout[clamp(baseCol + dc, 0, grid.layout.length - 1)]\n    grid.focusCell({ rowIndex: base.rowIndex + dr, columnId: nextCol.id }, { extend })\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event)\n    if (event.defaultPrevented || isEditing) return\n    const meta = event.metaKey || event.ctrlKey\n    const pageRows = Math.max(1, Math.floor((grid.containerRef.current?.clientHeight ?? 0) / grid.rowHeight) - 1)\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault()\n        move(1, 0, event.shiftKey)\n        return\n      case \"ArrowUp\":\n        event.preventDefault()\n        move(-1, 0, event.shiftKey)\n        return\n      case \"ArrowRight\":\n        event.preventDefault()\n        move(0, 1, event.shiftKey)\n        return\n      case \"ArrowLeft\":\n        event.preventDefault()\n        move(0, -1, event.shiftKey)\n        return\n      case \"Home\":\n        event.preventDefault()\n        grid.focusCell({ rowIndex: meta ? 0 : index, columnId: grid.layout[0].id }, { extend: event.shiftKey })\n        return\n      case \"End\":\n        event.preventDefault()\n        grid.focusCell(\n          { rowIndex: meta ? grid.rows.length - 1 : index, columnId: grid.layout[grid.layout.length - 1].id },\n          { extend: event.shiftKey }\n        )\n        return\n      case \"PageDown\":\n        event.preventDefault()\n        move(pageRows, 0, event.shiftKey)\n        return\n      case \"PageUp\":\n        event.preventDefault()\n        move(-pageRows, 0, event.shiftKey)\n        return\n      case \"Tab\":\n        event.preventDefault()\n        move(0, event.shiftKey ? -1 : 1)\n        return\n      case \"Enter\":\n      case \"F2\":\n        event.preventDefault()\n        if (editable) grid.startEditing(address)\n        else if (event.key === \"Enter\") move(1, 0)\n        return\n      case \" \":\n        if (editable && config.type === \"boolean\") {\n          event.preventDefault()\n          grid.commit(address, !value)\n        }\n        return\n      case \"Escape\":\n        grid.focusCell(address)\n        return\n      case \"Delete\":\n      case \"Backspace\":\n        event.preventDefault()\n        grid.clearRange()\n        return\n      case \"c\":\n      case \"C\":\n        if (meta) {\n          event.preventDefault()\n          void grid.copyRange()\n        }\n        return\n      case \"v\":\n      case \"V\":\n        if (meta) {\n          event.preventDefault()\n          void grid.paste()\n        }\n        return\n    }\n    if (editable && isPrintable(event) && config.type !== \"boolean\") {\n      event.preventDefault()\n      grid.startEditing(address, event.key)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-grid-cell\"\n      data-column={columnId}\n      data-row-index={index}\n      data-type={config.type}\n      data-pinned={layout.pinned}\n      data-editable={editable ? \"\" : undefined}\n      data-focused={focused ? \"\" : undefined}\n      data-editing={isEditing ? \"\" : undefined}\n      data-selected={inRange ? \"\" : undefined}\n      role=\"gridcell\"\n      aria-colindex={columnIndex + 1}\n      aria-readonly={editable ? undefined : true}\n      tabIndex={focused ? 0 : -1}\n      className={cn(\n        \"relative flex min-w-0 items-center overflow-hidden px-2 whitespace-nowrap outline-none\",\n        \"data-selected:bg-primary/10\",\n        \"data-focused:z-10 data-focused:ring-2 data-focused:ring-primary data-focused:ring-inset\",\n        \"data-editing:bg-background data-editing:p-0\",\n        layout.pinned && \"sticky z-20 bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted\",\n        layout.pinned === \"left\" && \"border-e\",\n        layout.pinned === \"right\" && \"border-s\",\n        config.type === \"number\" && \"justify-end tabular-nums\",\n        className\n      )}\n      style={{ ...pinnedStyle(layout), ...style }}\n      onPointerDown={(event) => {\n        onPointerDown?.(event)\n        if (event.defaultPrevented || event.button !== 0 || isEditing) return\n        if ((event.target as HTMLElement).closest(\"button, a, input, select, textarea, [role=checkbox]\")) return\n        grid.focusCell(address, { extend: event.shiftKey, scroll: false })\n      }}\n      onClick={onClick}\n      onDoubleClick={(event) => {\n        onDoubleClick?.(event)\n        if (!event.defaultPrevented && editable && config.type !== \"boolean\") grid.startEditing(address)\n      }}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {isEditing ? (\n        <CellEditor\n          address={address}\n          config={config}\n          row={row}\n          value={value}\n          format={format}\n          editor={editor}\n          display={children}\n        />\n      ) : children !== undefined ? (\n        children\n      ) : config.type === \"boolean\" ? (\n        <Checkbox\n          checked={!!value}\n          disabled={!editable}\n          onCheckedChange={({ checked }) => grid.commit(address, checked === true)}\n          aria-label={columnId}\n        />\n      ) : (\n        <span className=\"truncate\">{format(value)}</span>\n      )}\n    </div>\n  )\n}\n\nfunction CellEditor({\n  address,\n  config,\n  row,\n  value,\n  format,\n  editor,\n  display,\n}: {\n  address: CellAddress\n  config: DataGridColumnConfig\n  row: DataTableRow<unknown>\n  value: unknown\n  format: (value: unknown) => string\n  editor?: (props: EditorRenderProps) => React.ReactNode | undefined\n  display?: React.ReactNode\n}) {\n  const grid = useDataGrid()\n  const seed = grid.editing?.seed\n  const [text, setText] = React.useState(() => seed ?? format(value))\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const done = React.useRef(false)\n  React.useLayoutEffect(() => {\n    const el = inputRef.current\n    if (!el) return\n    el.focus()\n    if (seed === undefined && \"select\" in el && typeof el.select === \"function\" && el.type !== \"date\") el.select()\n  }, [seed])\n\n  const commit = (next?: string, then?: () => void) => {\n    if (done.current) return\n    done.current = true\n    grid.commit(address, parseInput(config, next ?? text, value))\n    grid.stopEditing({ refocus: !then })\n    then?.()\n  }\n  const cancel = () => {\n    if (done.current) return\n    done.current = true\n    grid.stopEditing()\n  }\n  const isSelect = config.type === \"select\" && !!config.options\n  const commitRef = React.useRef(commit)\n  const cancelRef = React.useRef(cancel)\n  React.useEffect(() => {\n    commitRef.current = commit\n    cancelRef.current = cancel\n  })\n  const { registerEditor } = grid\n  // Scrolling the grid closes the editor (text commits, an unpicked select cancels) before its\n  // row can leave the virtual window, so the editor never unmounts mid-edit.\n  React.useEffect(\n    () => registerEditor({ close: () => (isSelect ? cancelRef.current() : commitRef.current()) }),\n    [registerEditor, isSelect]\n  )\n  const moveAfter = (dr: number, dc: number) => () => {\n    const col = grid.layout.findIndex((c) => c.id === address.columnId)\n    const next = grid.layout[clamp(col + dc, 0, grid.layout.length - 1)]\n    grid.focusCell({ rowIndex: address.rowIndex + dr, columnId: next.id })\n  }\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === \"Enter\") {\n      event.preventDefault()\n      commit(undefined, moveAfter(1, 0))\n    } else if (event.key === \"Tab\") {\n      event.preventDefault()\n      commit(undefined, moveAfter(0, event.shiftKey ? -1 : 1))\n    } else if (event.key === \"Escape\") {\n      event.preventDefault()\n      cancel()\n    }\n    event.stopPropagation()\n  }\n  const inputProps: EditorRenderProps[\"inputProps\"] = {\n    ref: inputRef,\n    value: text,\n    onChange: (e) => setText(e.target.value),\n    onKeyDown,\n    onBlur: () => commit(),\n    className: \"size-full bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground\",\n    \"aria-label\": \"Edit value\",\n  }\n  const custom = editor?.({ value: text, onChange: setText, commit, cancel, column: config, row, inputProps })\n  if (custom !== undefined) return <>{custom}</>\n\n  if (config.type === \"select\" && config.options) {\n    return (\n      <SelectEditor\n        options={config.options}\n        value={text}\n        display={display}\n        onCommit={(v) => commit(v, moveAfter(1, 0))}\n        onCancel={cancel}\n      />\n    )\n  }\n  const type = config.type === \"number\" ? \"number\" : config.type === \"date\" ? \"date\" : \"text\"\n  return <input data-slot=\"data-grid-editor\" type={type} {...inputProps} />\n}\n\n/** Opens the toolkit Select immediately; picking commits, closing without a pick cancels. */\nfunction SelectEditor({\n  options,\n  value,\n  display,\n  onCommit,\n  onCancel,\n}: {\n  options: DataGridOption[]\n  value: string\n  /** What the cell normally shows, so the open editor looks like the cell. */\n  display?: React.ReactNode\n  onCommit: (value: string) => void\n  onCancel: () => void\n}) {\n  const collection = React.useMemo(\n    () => createListCollection({ items: options, itemToValue: (o) => o.value, itemToString: (o) => o.label }),\n    [options]\n  )\n  const picked = React.useRef(false)\n  const contentId = React.useId()\n  // Ark handles list navigation on the open content, so focus it (it is portaled) once mounted.\n  React.useLayoutEffect(() => {\n    const focusContent = () => document.getElementById(contentId)?.focus({ preventScroll: true })\n    focusContent()\n    const timer = setTimeout(focusContent, 0)\n    return () => clearTimeout(timer)\n  }, [contentId])\n  const label = options.find((o) => o.value === value)?.label ?? value\n  return (\n    <Select\n      collection={collection}\n      value={value ? [value] : []}\n      defaultOpen\n      ids={{ content: contentId }}\n      positioning={{ sameWidth: true, gutter: 2 }}\n      onValueChange={({ value: next }) => {\n        if (next[0] === undefined) return\n        picked.current = true\n        onCommit(next[0])\n      }}\n      onOpenChange={({ open }) => {\n        if (!open && !picked.current) onCancel()\n      }}\n      onPointerDown={(event) => event.stopPropagation()}\n      className=\"size-full\"\n    >\n      <SelectControl className=\"size-full\">\n        <SelectTrigger\n          variant=\"unstyled\"\n          data-slot=\"data-grid-select-editor\"\n          className=\"size-full px-2 [&_svg]:text-muted-foreground\"\n          aria-label=\"Edit value\"\n        >\n          <SelectValue placeholder=\"Choose…\">{display ?? label}</SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {options.map((o) => (\n          <SelectItem key={o.value} item={o}>\n            <SelectItemText>{o.label}</SelectItemText>\n            <SelectItemIndicator />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Selection cells, empty\n * ------------------------------------------------------------------------- */\n\nfunction DataGridSelectAll({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { table, layoutById } = useDataGrid()\n  const layout = layoutById.get(\"select\")\n  const t = table as DataTableInstance<unknown> & {\n    getIsAllPageRowsSelected?: () => boolean\n    getIsSomePageRowsSelected?: () => boolean\n    toggleAllPageRowsSelected?: (v?: boolean) => void\n  }\n  const all = t.getIsAllPageRowsSelected?.() ?? false\n  const some = t.getIsSomePageRowsSelected?.() ?? false\n  return (\n    <div\n      data-slot=\"data-grid-select-all\"\n      role=\"columnheader\"\n      className={cn(\n        \"flex items-center justify-center\",\n        layout?.pinned && \"sticky z-10 bg-muted\",\n        layout?.pinned === \"left\" && \"border-e\",\n        className\n      )}\n      style={pinnedStyle(layout)}\n      {...props}\n    >\n      <Checkbox\n        checked={all ? true : some ? \"indeterminate\" : false}\n        onCheckedChange={({ checked }) => t.toggleAllPageRowsSelected?.(checked === true)}\n        aria-label=\"Select all\"\n      />\n    </div>\n  )\n}\n\nfunction DataGridSelectRow({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { layoutById } = useDataGrid()\n  const { row } = useDataGridRow()\n  const layout = layoutById.get(\"select\")\n  return (\n    <div\n      data-slot=\"data-grid-select-row\"\n      role=\"gridcell\"\n      className={cn(\n        \"flex items-center justify-center\",\n        layout?.pinned && \"sticky z-20 bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted\",\n        layout?.pinned === \"left\" && \"border-e\",\n        className\n      )}\n      style={pinnedStyle(layout)}\n      {...props}\n    >\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}\n        aria-label=\"Select row\"\n      />\n    </div>\n  )\n}\n\nfunction DataGridEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { rows } = useDataGrid()\n  if (rows.length) return null\n  return (\n    <div\n      data-slot=\"data-grid-empty\"\n      className={cn(\"flex h-24 items-center justify-center text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DataGrid,\n  DataGridContainer,\n  DataGridHeader,\n  DataGridHeaderRow,\n  DataGridHead,\n  DataGridHeadWithResize,\n  DataGridResizeHandle,\n  DataGridBody,\n  DataGridRow,\n  DataGridCell,\n  DataGridSelectAll,\n  DataGridSelectRow,\n  DataGridEmpty,\n  useDataGrid,\n  useDataGridRow,\n  type DataGridColumnConfig,\n  type DataGridColumnType,\n  type DataGridCellChange,\n  type DataGridOption,\n}\n"
     }
   ],
   "docs": "## Data grid\n`src/components/ui/data-grid.tsx` is an editable, keyboard-driven grid on the same source-agnostic\n`DataTableInstance` contract as the data table (`useDataTable` with a huge `pageSize` feeds it every\nrow; `DataTable` toolbar parts can wrap it). Column behaviour is a separate data-only `columns` prop\nkeyed by column id: `{ id, type: text|number|boolean|select|date, editable, options, width, minWidth,\npinned: left|right, format, parse }`. Edits are intents: `onCellChange({ row, columnId, value,\nprevious })`; the consumer owns the data. Parts (div-based, `role=\"grid\"`): `DataGrid` (context:\nlayout, focus, range, editing, virtual window; `columnSizing` controllable) > `DataGridContainer`\n(scroll viewport) > `DataGridHeader` > `DataGridHeaderRow` > `DataGridHead column=` (sort button\nwhen sortable) or `DataGridHeadWithResize` (adds `DataGridResizeHandle`; double-click resets),\n`DataGridBody` (`children: (row, index) => cells`, renders only the visible window plus\n`overscan`, fixed `rowHeight`) > `DataGridRow` > `DataGridCell column=` (roving tabindex,\n`data-focused/selected/editing/pinned/editable`; `editable` and `editor` render-prop overrides;\ndefault editors by type, native `<select>` for select columns), `DataGridSelectAll` /\n`DataGridSelectRow` (Checkbox cells for the `select` column), `DataGridEmpty`. Editors never use\nnative form controls: select columns open the toolkit `Select` (with `SelectTrigger\nvariant=\"unstyled\"`, focus moved to the listbox content via the root `ids`), booleans render a\n`Checkbox`, text/number/date use a borderless input; the cell owns the single focus ring. Pinned columns\nare sticky with computed offsets. Keyboard: arrows move, Shift+arrows extend the range,\nHome/End and Ctrl+Home/End jump, PageUp/Down, Enter/F2/typing edits, Enter commits + moves down,\nTab commits + moves right, Escape cancels, Space toggles booleans, Delete clears the range, ⌘C/⌘V\ncopy/paste TSV; a live region announces clears/copies. `src/demo/data-grid/` is the reference\n(`/contacts`, \"Contacts\"): 500 users, pinned select + username, per-type editors, and tracked\nchanges with Undo / Discard / Save in a `FloatingToolbar`."