@verdify/ui 0.1.0

package/dist/components/data-grid/data-grid.js

@@ -0,0 +1,529 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/cn";
+import { Checkbox } from "../checkbox";
+import {
+  dataGridVariants,
+  dataGridTableClass,
+  dataGridHeaderRowClass,
+  dataGridRowClass,
+  dataGridCellVariants,
+  dataGridColumnHeaderVariants,
+  dataGridSortButtonClass,
+  dataGridSortCaretClass,
+  dataGridSelectionCellClass,
+  dataGridBulkBarClass,
+  dataGridBulkCountClass,
+  dataGridBulkActionVariants,
+  dataGridEmptyClass,
+  dataGridStatusRegionClass
+} from "./data-grid.variants";
+const DataGridContext = React.createContext(null);
+function useDataGrid() {
+  const ctx = React.useContext(DataGridContext);
+  if (!ctx) throw new Error("DataGrid slots must be rendered inside <DataGrid>.");
+  return ctx;
+}
+const DataGrid = React.forwardRef(function DataGrid2({
+  className,
+  rowCount,
+  colCount,
+  density = "comfortable",
+  selection = "none",
+  loading = false,
+  announcement,
+  errorMessage,
+  onSelectAll,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}, ref) {
+  const registry = React.useRef(/* @__PURE__ */ new Set());
+  const [active, setActive] = React.useState(null);
+  const initialRef = React.useRef(null);
+  const [chromeContainer, setChromeContainer] = React.useState(null);
+  const userEngagedRef = React.useRef(false);
+  const [registryTick, setRegistryTick] = React.useState(0);
+  const register = React.useCallback((entry) => {
+    registry.current.add(entry);
+    setRegistryTick((t) => t + 1);
+    return () => {
+      registry.current.delete(entry);
+      setRegistryTick((t) => t + 1);
+    };
+  }, []);
+  const claimInitial = React.useCallback((coord) => {
+    const current = initialRef.current;
+    if (!current || coord.row < current.row || coord.row === current.row && coord.col < current.col) {
+      initialRef.current = coord;
+      setActive((prev) => prev ?? coord);
+    }
+  }, []);
+  const setActiveCoord = React.useCallback((coord) => {
+    userEngagedRef.current = true;
+    setActive(coord);
+  }, []);
+  const resolvedActive = active ?? initialRef.current;
+  const isActive = React.useCallback(
+    (coord) => resolvedActive !== null && resolvedActive.row === coord.row && resolvedActive.col === coord.col,
+    [resolvedActive]
+  );
+  React.useEffect(() => {
+    if (!resolvedActive || !userEngagedRef.current) return;
+    const activeCellEl = Array.from(registry.current).find(
+      (c) => c.row === resolvedActive.row && c.col === resolvedActive.col
+    )?.el;
+    if (!activeCellEl) return;
+    const root = activeCellEl.ownerDocument;
+    const focused = root.activeElement;
+    const focusInGrid = focused instanceof HTMLElement && root.contains(focused) && focused.closest('[role="grid"]') !== null;
+    if (!focusInGrid) activeCellEl.focus();
+  }, [resolvedActive, registryTick]);
+  const cells = () => Array.from(registry.current);
+  const rowsOf = () => {
+    const set = /* @__PURE__ */ new Set();
+    cells().forEach((c) => set.add(c.row));
+    return Array.from(set).sort((a, b) => a - b);
+  };
+  const colsInRow = (row) => cells().filter((c) => c.row === row).map((c) => c.col).sort((a, b) => a - b);
+  const cellAt = (row, col) => cells().find((c) => c.row === row && c.col === col);
+  const moveTo = (row, col) => {
+    const target = cellAt(row, col);
+    if (target) {
+      setActive({ row, col });
+      target.el.focus();
+      return;
+    }
+    const cols = colsInRow(row);
+    if (cols.length === 0) return;
+    const nearest = cols.reduce((best, c) => Math.abs(c - col) < Math.abs(best - col) ? c : best, cols[0]);
+    const fallback = cellAt(row, nearest);
+    if (fallback) {
+      setActive({ row, col: nearest });
+      fallback.el.focus();
+    }
+  };
+  const onKeyDown = (event) => {
+    if ((event.ctrlKey || event.metaKey) && (event.key === "a" || event.key === "A")) {
+      if (selection === "multiple" && onSelectAll) {
+        event.preventDefault();
+        onSelectAll();
+      }
+      return;
+    }
+    const current = resolvedActive;
+    if (!current) return;
+    const allRows = rowsOf();
+    if (allRows.length === 0) return;
+    const rowPos = allRows.indexOf(current.row);
+    const cols = colsInRow(current.row);
+    const colPos = cols.indexOf(current.col);
+    const PAGE = 10;
+    switch (event.key) {
+      case "ArrowRight": {
+        event.preventDefault();
+        if (colPos < cols.length - 1) moveTo(current.row, cols[colPos + 1]);
+        break;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        if (colPos > 0) moveTo(current.row, cols[colPos - 1]);
+        break;
+      }
+      case "ArrowDown": {
+        event.preventDefault();
+        if (rowPos < allRows.length - 1) moveTo(allRows[rowPos + 1], current.col);
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (rowPos > 0) moveTo(allRows[rowPos - 1], current.col);
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        if (event.ctrlKey) {
+          const firstRow = allRows[0];
+          moveTo(firstRow, colsInRow(firstRow)[0]);
+        } else {
+          moveTo(current.row, cols[0]);
+        }
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        if (event.ctrlKey) {
+          const lastRow = allRows[allRows.length - 1];
+          const lastRowCols = colsInRow(lastRow);
+          moveTo(lastRow, lastRowCols[lastRowCols.length - 1]);
+        } else {
+          moveTo(current.row, cols[cols.length - 1]);
+        }
+        break;
+      }
+      case "PageDown": {
+        event.preventDefault();
+        const dest = Math.min(rowPos + PAGE, allRows.length - 1);
+        moveTo(allRows[dest], current.col);
+        break;
+      }
+      case "PageUp": {
+        event.preventDefault();
+        const dest = Math.max(rowPos - PAGE, 0);
+        moveTo(allRows[dest], current.col);
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const ctx = React.useMemo(
+    () => ({
+      density,
+      selection,
+      active: resolvedActive,
+      register,
+      claimInitial,
+      isActive,
+      setActive: setActiveCoord,
+      chromeContainer
+    }),
+    [density, selection, resolvedActive, register, claimInitial, isActive, setActiveCoord, chromeContainer]
+  );
+  return /* @__PURE__ */ jsx(DataGridContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { ref, className: cn(dataGridVariants(), className), onKeyDown, ...props, children: [
+    /* @__PURE__ */ jsx(
+      "table",
+      {
+        role: "grid",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-rowcount": rowCount,
+        "aria-colcount": colCount,
+        "aria-multiselectable": selection === "multiple" ? true : void 0,
+        "aria-busy": loading || void 0,
+        className: dataGridTableClass,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { ref: setChromeContainer }),
+    chromeContainer ? createPortal(
+      /* @__PURE__ */ jsx(DataGridLiveRegions, { announcement, errorMessage }),
+      chromeContainer
+    ) : null
+  ] }) });
+});
+function DataGridLiveRegions({
+  announcement,
+  errorMessage
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: dataGridStatusRegionClass, children: announcement }),
+    /* @__PURE__ */ jsx("span", { role: "alert", "aria-live": "assertive", className: dataGridStatusRegionClass, children: errorMessage })
+  ] });
+}
+function DataGridStatusRegion(_props) {
+  return null;
+}
+const DataGridHeaderRow = React.forwardRef(
+  function DataGridHeaderRow2({ className, rowIndex, children, ...props }, ref) {
+    return (
+      // a real <thead><tr> so the column-header relationship is native (1.3.1)
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { ref, role: "row", "aria-rowindex": rowIndex, className: cn(dataGridHeaderRowClass, className), ...props, children }) })
+    );
+  }
+);
+const DataGridBody = React.forwardRef(
+  function DataGridBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("tbody", { ref, className: cn(className), ...props });
+  }
+);
+const DataGridRow = React.forwardRef(function DataGridRow2({ className, rowIndex, selected, ...props }, ref) {
+  const { selection } = useDataGrid();
+  const ariaSelected = selection === "multiple" ? selected ? true : false : selected ? true : void 0;
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      role: "row",
+      "aria-rowindex": rowIndex,
+      "aria-selected": ariaSelected,
+      className: cn(dataGridRowClass, className),
+      ...props
+    }
+  );
+});
+function useRovingCell(row, col) {
+  const { register, claimInitial, isActive, setActive } = useDataGrid();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    claimInitial({ row, col });
+    return register({ row, col, el });
+  }, [register, claimInitial, row, col]);
+  const active = isActive({ row, col });
+  const tabIndex = active ? 0 : -1;
+  const onFocus = () => setActive({ row, col });
+  return { ref, tabIndex, onFocus };
+}
+function SortCaret({ direction }) {
+  return /* @__PURE__ */ jsx("span", { "data-testid": "data-grid-sort-caret", "data-direction": direction, "aria-hidden": "true", className: dataGridSortCaretClass, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", focusable: "false", "aria-hidden": "true", children: direction === "ascending" ? /* @__PURE__ */ jsx("path", { d: "M4 10l4-4 4 4", strokeLinecap: "round", strokeLinejoin: "round" }) : direction === "descending" ? /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsx("path", { d: "M5 6.5l3-3 3 3M5 9.5l3 3 3-3", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
+}
+const NEXT_DIRECTION_WORD = {
+  none: "ascending",
+  ascending: "descending",
+  descending: "ascending"
+};
+const DataGridColumnHeader = React.forwardRef(
+  function DataGridColumnHeader2({ className, colIndex, sortable = false, sortDirection = "none", onSort, sortLabel, children, ...props }, ref) {
+    const { density } = useDataGrid();
+    const { ref: rovingRef, tabIndex, onFocus } = useRovingCell(1, colIndex);
+    React.useImperativeHandle(ref, () => rovingRef.current);
+    const ariaSort = sortable ? sortDirection : void 0;
+    const label = sortLabel ?? (typeof children === "string" ? children : void 0);
+    const onKeyDown = (event) => {
+      if (sortable && event.key === "Enter") {
+        event.preventDefault();
+        onSort?.();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref: rovingRef,
+        role: "columnheader",
+        scope: "col",
+        "aria-colindex": colIndex,
+        "aria-sort": ariaSort,
+        tabIndex,
+        onFocus,
+        onKeyDown,
+        className: cn(dataGridColumnHeaderVariants({ density }), className),
+        ...props,
+        children: sortable ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onSort,
+            tabIndex: -1,
+            "aria-label": label ? `Sort by ${label}, ${NEXT_DIRECTION_WORD[sortDirection]}` : void 0,
+            className: dataGridSortButtonClass,
+            children: [
+              children,
+              /* @__PURE__ */ jsx(SortCaret, { direction: sortDirection })
+            ]
+          }
+        ) : children
+      }
+    );
+  }
+);
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([role="gridcell"]):not([role="columnheader"]), [tabindex="-1"]:not([role="gridcell"]):not([role="columnheader"])';
+function focusablesIn(cell) {
+  return Array.from(cell.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function useOwningRowIndex(elRef, explicit) {
+  const [rowIndex, setRowIndex] = React.useState(explicit ?? 0);
+  React.useEffect(() => {
+    if (explicit !== void 0) {
+      setRowIndex(explicit);
+      return;
+    }
+    const tr = elRef.current?.closest('[role="row"]');
+    const attr = tr?.getAttribute("aria-rowindex");
+    if (attr) setRowIndex(Number(attr));
+  }, [elRef, explicit]);
+  return rowIndex;
+}
+const DataGridCell = React.forwardRef(function DataGridCell2({ className, colIndex, rowIndex, mono = false, secondary = false, status = "none", controls, onKeyDown, ...props }, ref) {
+  const { density } = useDataGrid();
+  const localRef = React.useRef(null);
+  const owningRow = useOwningRowIndex(localRef, rowIndex);
+  const { ref: rovingRef, tabIndex, onFocus: rovingOnFocus } = useRovingCell(owningRow, colIndex);
+  const [entered, setEntered] = React.useState(false);
+  React.useImperativeHandle(ref, () => localRef.current);
+  const setRefs = (node) => {
+    localRef.current = node;
+    rovingRef.current = node;
+  };
+  const onFocus = (event) => {
+    rovingOnFocus();
+    if (controls === "single" && event.target === localRef.current) {
+      const first = focusablesIn(localRef.current)[0];
+      if (first) first.focus();
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const cell = localRef.current;
+    if (!cell) return;
+    if (controls === "multiple") {
+      if (event.key === "Enter" && event.target === cell && !entered) {
+        const first = focusablesIn(cell)[0];
+        if (first) {
+          event.preventDefault();
+          setEntered(true);
+          first.focus();
+        }
+        return;
+      }
+      if (event.key === "Escape" && entered) {
+        event.preventDefault();
+        event.stopPropagation();
+        setEntered(false);
+        cell.focus();
+        return;
+      }
+      if (entered && (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Home" || event.key === "End")) {
+        event.stopPropagation();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref: setRefs,
+      role: "gridcell",
+      "aria-colindex": colIndex,
+      tabIndex,
+      onFocus,
+      onKeyDown: handleKeyDown,
+      className: cn(dataGridCellVariants({ density, mono, secondary, status }), className),
+      ...props
+    }
+  );
+});
+const DataGridSelectionCell = React.forwardRef(
+  function DataGridSelectionCell2({ className, colIndex, checked, onCheckedChange, onExtendSelection, label, rowIndex, ...props }, ref) {
+    const localRef = React.useRef(null);
+    const owningRow = useOwningRowIndex(localRef, rowIndex);
+    const { ref: rovingRef, tabIndex, onFocus } = useRovingCell(owningRow, colIndex);
+    React.useImperativeHandle(ref, () => localRef.current);
+    const setRefs = (node) => {
+      localRef.current = node;
+      rovingRef.current = node;
+    };
+    const onKeyDown = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        if (event.shiftKey && onExtendSelection) {
+          onExtendSelection();
+        } else {
+          onCheckedChange?.(!checked);
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref: setRefs,
+        role: "gridcell",
+        "aria-colindex": colIndex,
+        tabIndex,
+        onFocus,
+        onKeyDown,
+        className: cn(dataGridSelectionCellClass, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Checkbox, { label, checked, onCheckedChange })
+      }
+    );
+  }
+);
+const DataGridSelectAllCell = React.forwardRef(
+  function DataGridSelectAllCell2({ className, colIndex, checked, indeterminate = false, onCheckedChange, label, ...props }, ref) {
+    const { ref: rovingRef, tabIndex, onFocus } = useRovingCell(1, colIndex);
+    React.useImperativeHandle(ref, () => rovingRef.current);
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref: rovingRef,
+        role: "columnheader",
+        scope: "col",
+        "aria-colindex": colIndex,
+        tabIndex,
+        onFocus,
+        className: cn(dataGridSelectionCellClass, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            variant: "parent",
+            label,
+            checked,
+            indeterminate,
+            onCheckedChange
+          }
+        )
+      }
+    );
+  }
+);
+const DataGridBulkActionBar = React.forwardRef(
+  function DataGridBulkActionBar2({ className, selectedCount, onDismiss, children, ...props }, ref) {
+    const ctx = React.useContext(DataGridContext);
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onDismiss?.();
+      }
+    };
+    const bar = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "toolbar",
+        tabIndex: -1,
+        "aria-label": `${selectedCount} selected`,
+        className: cn(dataGridBulkBarClass, className),
+        onKeyDown,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: dataGridBulkCountClass, children: [
+            selectedCount,
+            " selected"
+          ] }),
+          children
+        ]
+      }
+    );
+    if (ctx) return ctx.chromeContainer ? createPortal(bar, ctx.chromeContainer) : null;
+    return bar;
+  }
+);
+const DataGridBulkAction = React.forwardRef(
+  function DataGridBulkAction2({ className, destructive = false, type = "button", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        className: cn(dataGridBulkActionVariants({ destructive }), className),
+        ...props
+      }
+    );
+  }
+);
+const DataGridEmpty = React.forwardRef(
+  function DataGridEmpty2({ className, colSpan = 1, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx("tr", { role: "row", children: /* @__PURE__ */ jsx("td", { ref, role: "gridcell", colSpan, className: cn(dataGridEmptyClass, className), ...props, children }) });
+  }
+);
+export {
+  DataGrid,
+  DataGridBody,
+  DataGridBulkAction,
+  DataGridBulkActionBar,
+  DataGridCell,
+  DataGridColumnHeader,
+  DataGridEmpty,
+  DataGridHeaderRow,
+  DataGridRow,
+  DataGridSelectAllCell,
+  DataGridSelectionCell,
+  DataGridStatusRegion
+};
+//# sourceMappingURL=data-grid.js.map

package/dist/components/data-grid/data-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-grid/data-grid.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../../lib/cn\";\nimport { Checkbox } from \"../checkbox\";\nimport {\n  dataGridVariants,\n  dataGridTableClass,\n  dataGridHeaderRowClass,\n  dataGridRowClass,\n  dataGridCellVariants,\n  dataGridColumnHeaderVariants,\n  dataGridSortButtonClass,\n  dataGridSortCaretClass,\n  dataGridSelectionCellClass,\n  dataGridBulkBarClass,\n  dataGridBulkCountClass,\n  dataGridBulkActionVariants,\n  dataGridEmptyClass,\n  dataGridStatusRegionClass,\n  type DataGridCellVariantProps,\n} from \"./data-grid.variants\";\n\n/** Row density (spec §3): `comfortable` (default) for read-and-act screens, `compact` for dense consoles. */\nexport type DataGridDensity = \"comfortable\" | \"compact\";\n/** Selection model (spec §3): `none` (read-only) or `multiple` (adds the selection cell, select-all, and bulk bar). */\nexport type DataGridSelection = \"none\" | \"multiple\";\n/** A status cell's reported state (spec §3/§4): a status color appears only inside a cell that reports a real state, paired with text. */\nexport type DataGridCellStatus = NonNullable<DataGridCellVariantProps[\"status\"]>;\n/** A sort direction (spec §4/§7): reflected as `aria-sort` on the column header and a non-color caret. */\nexport type DataGridSortDirection = \"ascending\" | \"descending\" | \"none\";\n\n// ─────────────────────────────────────────────────────────────────────────────────────────────\n// Roving-cell focus over a native <table role=\"grid\"> (spec §6/§7). There is no Radix primitive for\n// the APG grid pattern's cell-by-cell arrow movement, so it is HAND-COMPOSED the same way Sidebar\n// hand-rolls roving over its native links — but in 2D, keyed by the cell's (row, col) coordinates\n// rather than DOM order, because grid movement is coordinate-based (Right/Left/Up/Down, row ends,\n// grid corners, page). Each cell registers its absolute (rowIndex, colIndex) + live DOM ref with the\n// root; the root holds the single active coordinate (exactly one cell is tabindex=0, the rest -1, so\n// the grid is a single tab stop, 2.1.1/2.4.3) and an onKeyDown on the grid that resolves the\n// destination coordinate and focuses the registered cell there. This is why the file is 'use client'.\ntype CellRegistration = { row: number; col: number; el: HTMLElement };\ntype ActiveCoord = { row: number; col: number };\ntype DataGridContextValue = {\n  density: DataGridDensity;\n  selection: DataGridSelection;\n  active: ActiveCoord | null;\n  register: (entry: CellRegistration) => () => void;\n  // a cell reports its (row, col) so the root can set the initial active cell and answer isActive()\n  claimInitial: (coord: ActiveCoord) => void;\n  isActive: (coord: ActiveCoord) => boolean;\n  // a cell asks the root to make it the active cell (on focus / pointer), so click + Tab agree with arrows\n  setActive: (coord: ActiveCoord) => void;\n  // the sibling DOM node, after the grid table, that grid CHROME (the bulk bar, the status-region\n  // marker) portals itself into so it renders OUTSIDE role=\"grid\" (aria-required-children). A chrome\n  // slot reads this from context and createPortal()s into it — so it lands outside the grid no matter\n  // how a caller nests it (Fragment, wrapper, forwarded), with NO child.type introspection.\n  chromeContainer: HTMLElement | null;\n};\nconst DataGridContext = React.createContext<DataGridContextValue | null>(null);\n\nfunction useDataGrid(): DataGridContextValue {\n  const ctx = React.useContext(DataGridContext);\n  if (!ctx) throw new Error(\"DataGrid slots must be rendered inside <DataGrid>.\");\n  return ctx;\n}\n\nexport interface DataGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The TRUE total row count of the full set (spec §7), carried on the grid as `aria-rowcount` — NOT\n   * the rendered window. So a screen reader announces \"row 4,210 of 12,000\" even when only thirty\n   * rows are in the DOM. Reporting only the rendered window is the defining virtualization-a11y\n   * defect (spec §8 Don't).\n   */\n  rowCount: number;\n  /** The TRUE total column count of the full set (spec §7), carried on the grid as `aria-colcount`. */\n  colCount: number;\n  /** Row density (spec §3). `comfortable` (default) or `compact`. Applies to all cells via context. */\n  density?: DataGridDensity;\n  /**\n   * Selection model (spec §3). `none` (default, read-only) or `multiple` — `multiple` sets\n   * `aria-multiselectable` and is the model the selection cells + bulk bar belong to.\n   */\n  selection?: DataGridSelection;\n  /** The rows are resolving (spec §4 Loading). Marks the grid `aria-busy` without stealing focus. */\n  loading?: boolean;\n  /**\n   * The polite live-region message (spec §7, 4.1.3 Status Messages): the resolved row count after a\n   * load or filter, the new sort direction, or the selection count — announced as TEXT so it never\n   * rests on visual state alone. The caller owns the string (mirroring Table/CommandPalette).\n   */\n  announcement?: string;\n  /**\n   * A blocking row-load error (spec §4 Error / §7): announced through the ASSERTIVE region. State\n   * what failed and what to do next, in text, without blaming the reader — for example \"These rows\n   * didn't load. The request timed out — retry, or narrow the date range.\"\n   */\n  errorMessage?: string;\n  /**\n   * Select all rows that match the current filter (spec §6 Ctrl+A). The grid owns the keydown, so\n   * Ctrl+A inside the grid calls this; the caller selects the full filtered set and announces the\n   * resolved count through `announcement` (never silently — spec §6 \"announced as a count\"). Only\n   * meaningful in a `multiple`-selection grid. Without it, Ctrl+A falls through to the browser.\n   */\n  onSelectAll?: () => void;\n}\n\n/**\n * A DataGrid shows many rows of structured records in a scrollable, operable, two-dimensional grid\n * you navigate one cell at a time (spec §1). Reach for it over a Table when rows run into the\n * thousands and must virtualize, when columns sort/filter/resize/freeze, when rows select for bulk\n * actions, or when each cell is its own focus stop — a trust-events log, an API-key inventory, an\n * AI-agent-identity roster. Use the Table for short, read-mostly lists.\n *\n * It is a NEUTRAL data surface (spec §1/§3): neutrals carry roughly 90% of it. Verification and trust\n * states inside it are STATUS, never brand — a verified row reads through the status aliases, never\n * the Sovereign Violet brand accent, and the brand accent never marks a row as verified. Selection\n * and the active cell are NEUTRAL action states, not Verified Green and not the brand violet\n * (brand != state, G-U2). For a first-class verified result in a cell, use the VerifiedBadge molecule.\n *\n * The grid is a SINGLE tab stop: Tab lands on the active cell and Tab again leaves; inside, the arrow\n * keys move the active cell (spec §6). It owns that roving-cell focus, so it is `'use client'`.\n */\nexport const DataGrid = React.forwardRef<HTMLDivElement, DataGridProps>(function DataGrid(\n  {\n    className,\n    rowCount,\n    colCount,\n    density = \"comfortable\",\n    selection = \"none\",\n    loading = false,\n    announcement,\n    errorMessage,\n    onSelectAll,\n    children,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    ...props\n  },\n  ref,\n) {\n  // Cells register their absolute (row, col) + live DOM ref here so the root can move the active cell\n  // to a coordinate (Sidebar's registry-in-context pattern, generalized to 2D).\n  const registry = React.useRef<Set<CellRegistration>>(new Set());\n  const [active, setActive] = React.useState<ActiveCoord | null>(null);\n  // the lowest (row, col) any cell has claimed — the resting active cell before the user moves\n  const initialRef = React.useRef<ActiveCoord | null>(null);\n  // the sibling node, after the table, that grid chrome (bulk bar + status marker) portals into so it\n  // renders OUTSIDE role=\"grid\"; tracked as state so a chrome slot re-portals once the node mounts.\n  const [chromeContainer, setChromeContainer] = React.useState<HTMLElement | null>(null);\n  // true once the user has moved the active cell into the grid (Tab/arrow/pointer) — so we restore\n  // focus only for someone already operating the grid, never auto-focus the resting cell on mount.\n  const userEngagedRef = React.useRef(false);\n  // bumped on every (un)register so a window re-render re-runs the focus-restoration effect AFTER the\n  // remounted cell has registered its live DOM ref (a cell registers in its own effect, which fires\n  // before the root's effects — so the root must re-render to see the new ref, not read it in render).\n  const [registryTick, setRegistryTick] = React.useState(0);\n\n  const register = React.useCallback((entry: CellRegistration) => {\n    registry.current.add(entry);\n    setRegistryTick((t) => t + 1);\n    return () => {\n      registry.current.delete(entry);\n      setRegistryTick((t) => t + 1);\n    };\n  }, []);\n\n  const claimInitial = React.useCallback((coord: ActiveCoord) => {\n    const current = initialRef.current;\n    // the FIRST cell in reading order (lowest row, then lowest col) is the resting active cell\n    if (!current || coord.row < current.row || (coord.row === current.row && coord.col < current.col)) {\n      initialRef.current = coord;\n      setActive((prev) => prev ?? coord);\n    }\n  }, []);\n\n  const setActiveCoord = React.useCallback((coord: ActiveCoord) => {\n    // a cell took focus (pointer / Tab / arrow) → the user is operating the grid, so a later\n    // virtualized re-render should restore focus to the active cell rather than let it fall to <body>.\n    userEngagedRef.current = true;\n    setActive(coord);\n  }, []);\n\n  const resolvedActive = active ?? initialRef.current;\n  const isActive = React.useCallback(\n    (coord: ActiveCoord) =>\n      resolvedActive !== null && resolvedActive.row === coord.row && resolvedActive.col === coord.col,\n    [resolvedActive],\n  );\n\n  // Focus restoration across a virtualized re-render (spec §7 Focus management / §8 Don't — \"the\n  // defining virtualization-a11y defect\"). The active cell's COORDINATE survives in state, so the\n  // remounted cell at that (row, col) correctly regains tabindex=0 — but the BROWSER drops DOM focus\n  // to <body> when the old node unmounts. So when the cell carrying the active coordinate is present\n  // again (its window re-rendered) and focus has fallen OUT of the grid, restore focus to it, so a\n  // keyboard / screen-reader user is never stranded mid-grid. We restore ONLY when focus was actually\n  // lost — never steal it from another element, and never auto-focus the resting cell on first mount\n  // (the resting active cell is a tab stop, not auto-focused; `userEngagedRef` gates that). The effect\n  // re-runs on `registryTick`, which bumps once the remounted cell has registered its live DOM ref.\n  React.useEffect(() => {\n    if (!resolvedActive || !userEngagedRef.current) return;\n    const activeCellEl = Array.from(registry.current).find(\n      (c) => c.row === resolvedActive.row && c.col === resolvedActive.col,\n    )?.el;\n    if (!activeCellEl) return;\n    const root = activeCellEl.ownerDocument;\n    const focused = root.activeElement;\n    // focus is \"lost from the grid\" when it is no longer ON a node inside THIS grid — the browser\n    // drops it to <body> (or detaches it) when the previously-focused out-of-window cell unmounts.\n    const focusInGrid =\n      focused instanceof HTMLElement && root.contains(focused) && focused.closest('[role=\"grid\"]') !== null;\n    if (!focusInGrid) activeCellEl.focus();\n  }, [resolvedActive, registryTick]);\n\n  // Resolve a destination coordinate against the registered cells and move focus there. Movement is\n  // coordinate-based and clamps at the edges — Right/Left stop at the inline edge (no wrap, spec §6),\n  // Up/Down at the row edges, page by a viewport of rows (clamped to what is rendered).\n  const cells = () => Array.from(registry.current);\n  const rowsOf = () => {\n    const set = new Set<number>();\n    cells().forEach((c) => set.add(c.row));\n    return Array.from(set).sort((a, b) => a - b);\n  };\n  const colsInRow = (row: number) =>\n    cells()\n      .filter((c) => c.row === row)\n      .map((c) => c.col)\n      .sort((a, b) => a - b);\n  const cellAt = (row: number, col: number) => cells().find((c) => c.row === row && c.col === col);\n\n  // move to the nearest cell at (row, col), clamping col to the columns that exist in that row\n  const moveTo = (row: number, col: number) => {\n    const target = cellAt(row, col);\n    if (target) {\n      setActive({ row, col });\n      target.el.focus();\n      return;\n    }\n    // clamp the column to the nearest one present in the destination row (rows can differ in shape)\n    const cols = colsInRow(row);\n    if (cols.length === 0) return;\n    const nearest = cols.reduce((best, c) => (Math.abs(c - col) < Math.abs(best - col) ? c : best), cols[0]);\n    const fallback = cellAt(row, nearest);\n    if (fallback) {\n      setActive({ row, col: nearest });\n      fallback.el.focus();\n    }\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    // Ctrl+A → select all rows that match the current filter (spec §6), handled BEFORE the movement\n    // switch and independent of an active cell. The grid owns the keydown, so it intercepts the\n    // browser's select-all; the caller selects the full filtered set and announces the count via\n    // `announcement` (spec §6 \"announced as a count, not silently\"). Only a selection grid honors it.\n    if ((event.ctrlKey || event.metaKey) && (event.key === \"a\" || event.key === \"A\")) {\n      if (selection === \"multiple\" && onSelectAll) {\n        event.preventDefault();\n        onSelectAll();\n      }\n      return;\n    }\n\n    const current = resolvedActive;\n    if (!current) return;\n    const allRows = rowsOf();\n    if (allRows.length === 0) return;\n    const rowPos = allRows.indexOf(current.row);\n    const cols = colsInRow(current.row);\n    const colPos = cols.indexOf(current.col);\n    const PAGE = 10; // a viewport of rows; clamped to what exists in this fixture / window\n\n    switch (event.key) {\n      case \"ArrowRight\": {\n        event.preventDefault();\n        // inline-axis next; logical (the visual mirror under RTL is the browser's, the index is logical)\n        if (colPos < cols.length - 1) moveTo(current.row, cols[colPos + 1]); // stop at edge, no wrap\n        break;\n      }\n      case \"ArrowLeft\": {\n        event.preventDefault();\n        if (colPos > 0) moveTo(current.row, cols[colPos - 1]); // stop at edge, no wrap\n        break;\n      }\n      case \"ArrowDown\": {\n        event.preventDefault();\n        if (rowPos < allRows.length - 1) moveTo(allRows[rowPos + 1], current.col);\n        break;\n      }\n      case \"ArrowUp\": {\n        event.preventDefault();\n        if (rowPos > 0) moveTo(allRows[rowPos - 1], current.col);\n        break;\n      }\n      case \"Home\": {\n        event.preventDefault();\n        if (event.ctrlKey) {\n          // Ctrl+Home → first cell of the first row\n          const firstRow = allRows[0];\n          moveTo(firstRow, colsInRow(firstRow)[0]);\n        } else {\n          // Home → first cell in the current row\n          moveTo(current.row, cols[0]);\n        }\n        break;\n      }\n      case \"End\": {\n        event.preventDefault();\n        if (event.ctrlKey) {\n          // Ctrl+End → last cell of the last row\n          const lastRow = allRows[allRows.length - 1];\n          const lastRowCols = colsInRow(lastRow);\n          moveTo(lastRow, lastRowCols[lastRowCols.length - 1]);\n        } else {\n          // End → last cell in the current row\n          moveTo(current.row, cols[cols.length - 1]);\n        }\n        break;\n      }\n      case \"PageDown\": {\n        event.preventDefault();\n        const dest = Math.min(rowPos + PAGE, allRows.length - 1);\n        moveTo(allRows[dest], current.col);\n        break;\n      }\n      case \"PageUp\": {\n        event.preventDefault();\n        const dest = Math.max(rowPos - PAGE, 0);\n        moveTo(allRows[dest], current.col);\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const ctx = React.useMemo<DataGridContextValue>(\n    () => ({\n      density,\n      selection,\n      active: resolvedActive,\n      register,\n      claimInitial,\n      isActive,\n      setActive: setActiveCoord,\n      chromeContainer,\n    }),\n    [density, selection, resolvedActive, register, claimInitial, isActive, setActiveCoord, chromeContainer],\n  );\n\n  return (\n    <DataGridContext.Provider value={ctx}>\n      {/* The scroll container is a plain wrapper (the caller sizes the scroll viewport via className —\n          the token set has no grid-height scale, the caller-owned-dimension precedent). The grid ROLE\n          lives on the native <table> below, so its rows are the grid's direct row children\n          (aria-required-children); the bulk bar + live regions are SIBLINGS of the table, OUTSIDE the\n          grid. The arrow-key roving handler is on the wrapper so it catches the bubbling keydown from\n          any cell. */}\n      <div ref={ref} className={cn(dataGridVariants(), className)} onKeyDown={onKeyDown} {...props}>\n        {/* The grid carries the FULL-set shape (spec §7): aria-rowcount / aria-colcount are the TRUE\n            totals, not the rendered window, so the full shape survives virtualization. A selection\n            grid is multiselectable. aria-busy reflects loading without stealing focus (spec §4\n            Loading). A native <table> + role=\"grid\" keeps the row/column relationship native (1.3.1)\n            while exposing the APG grid pattern. The caller's children render INSIDE the table; the\n            chrome slots (bulk bar, status marker) portal THEMSELVES back OUT to the sibling node\n            below via context, so a role=\"toolbar\" never lands inside role=\"grid\" (aria-required-\n            children) no matter how the caller nests it. */}\n        <table\n          role=\"grid\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-rowcount={rowCount}\n          aria-colcount={colCount}\n          aria-multiselectable={selection === \"multiple\" ? true : undefined}\n          aria-busy={loading || undefined}\n          className={dataGridTableClass}\n        >\n          {children}\n        </table>\n        {/* The sibling node, OUTSIDE the grid table, that grid chrome portals into. A role=\"toolbar\"\n            (the bulk bar) and the live-region <span>s are not valid children of role=\"grid\", so they\n            live here — the same way Table's pagination is a sibling control beside the table, not\n            table content. Routed by context + createPortal (recipe Root→slot context), NOT by\n            introspecting child.type, so wrapping a chrome slot in a Fragment / wrapper can't misroute\n            it back into the grid. */}\n        <div ref={setChromeContainer} />\n        {/* The polite + assertive live regions, owned by the root and portaled to the chrome node, so\n            the announcement contract holds even when the caller omits <DataGridStatusRegion/>. The\n            grid's accessible name is carried by the <table>, so the wrapper is unnamed. */}\n        {chromeContainer\n          ? createPortal(\n              <DataGridLiveRegions announcement={announcement} errorMessage={errorMessage} />,\n              chromeContainer,\n            )\n          : null}\n      </div>\n    </DataGridContext.Provider>\n  );\n});\n\n// The grid's live regions (spec §7, 4.1.3): a POLITE region for the row count / sort / filter /\n// selection changes, and an ASSERTIVE region for a blocking row-load error. Both always present (a\n// live region must exist before its text changes to be announced) and sr-only (the visual state\n// carries the same information for sighted users, so the region is text-only — never color alone).\n// Rendered by the root so the contract holds even when a caller omits <DataGridStatusRegion/>; the\n// explicit slot is a no-op marker for the anatomy (below). They are siblings of the <table>.\nfunction DataGridLiveRegions({\n  announcement,\n  errorMessage,\n}: {\n  announcement?: string;\n  errorMessage?: string;\n}) {\n  return (\n    <>\n      <span role=\"status\" aria-live=\"polite\" className={dataGridStatusRegionClass}>\n        {announcement}\n      </span>\n      <span role=\"alert\" aria-live=\"assertive\" className={dataGridStatusRegionClass}>\n        {errorMessage}\n      </span>\n    </>\n  );\n}\n\nexport type DataGridStatusRegionProps = Record<string, never>;\n\n/**\n * A no-op anatomy marker for the live status region (spec §2 status-region). The actual polite +\n * assertive regions are owned by the DataGrid root (fed by its `announcement` / `errorMessage`\n * props) and portaled outside the grid table, so the announcement contract holds even when this slot\n * is omitted; render this in the grid's children to document the anatomy explicitly. It renders\n * nothing itself — so it is harmless wherever the caller places it inside the grid.\n */\nexport function DataGridStatusRegion(_props: DataGridStatusRegionProps): null {\n  return null;\n}\n\nexport interface DataGridHeaderRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** The header row's absolute 1-based `aria-rowindex` against the full set (spec §7). Conventionally 1. */\n  rowIndex: number;\n}\n\n/**\n * The sticky column-header row (spec §2 column-header-row / §4). It is a `role=\"row\"` holding the\n * `columnheader` cells, pinned to the top of the scroll viewport on the raised surface so it reads\n * above the scrolling rows (spec §4/§5). Its absolute `aria-rowindex` is carried for the full-set\n * shape (spec §7); a header row is conventionally row 1.\n */\nexport const DataGridHeaderRow = React.forwardRef<HTMLTableRowElement, DataGridHeaderRowProps>(\n  function DataGridHeaderRow({ className, rowIndex, children, ...props }, ref) {\n    return (\n      // a real <thead><tr> so the column-header relationship is native (1.3.1)\n      <thead>\n        <tr ref={ref} role=\"row\" aria-rowindex={rowIndex} className={cn(dataGridHeaderRowClass, className)} {...props}>\n          {children}\n        </tr>\n      </thead>\n    );\n  },\n);\n\nexport type DataGridBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\n/**\n * The `<tbody>` holding the rendered window of data rows (spec §2). With virtualization only a window\n * of rows is in the DOM — the full shape is carried by the grid's `aria-rowcount` and each row's\n * absolute `aria-rowindex` (spec §7), not by the rendered count.\n */\nexport const DataGridBody = React.forwardRef<HTMLTableSectionElement, DataGridBodyProps>(\n  function DataGridBody({ className, ...props }, ref) {\n    return <tbody ref={ref} className={cn(className)} {...props} />;\n  },\n);\n\nexport interface DataGridRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** The row's absolute 1-based `aria-rowindex` against the full set (spec §7) — e.g. 4210, not the rendered position. */\n  rowIndex: number;\n  /**\n   * The row is selected (spec §4 Selected). Sets `aria-selected` and the NEUTRAL selection-accent\n   * fill; selection is encoded by `aria-selected` + the selection checkbox, never by color alone, and\n   * NEVER a brand or status tint (brand != state, G-U2). Selecting a row never implies it is verified.\n   */\n  selected?: boolean;\n}\n\n/**\n * One record row (spec §2 row / §4). A `role=\"row\"` carrying its absolute `aria-rowindex` (spec §7),\n * the restrained ghost row-hover affordance, and — when `selected` — the neutral selection accent +\n * `aria-selected`. In a `multiple`-selection grid every body row reflects `aria-selected` (true or\n * false) so selection state is never ambiguous to assistive tech.\n */\nexport const DataGridRow = React.forwardRef<HTMLTableRowElement, DataGridRowProps>(function DataGridRow(\n  { className, rowIndex, selected, ...props },\n  ref,\n) {\n  const { selection } = useDataGrid();\n  // in a selection grid, every row reports aria-selected (true/false); a read-only grid omits it\n  const ariaSelected =\n    selection === \"multiple\" ? (selected ? true : false) : selected ? true : undefined;\n  return (\n    <tr\n      ref={ref}\n      role=\"row\"\n      aria-rowindex={rowIndex}\n      aria-selected={ariaSelected}\n      className={cn(dataGridRowClass, className)}\n      {...props}\n    />\n  );\n});\n\n// A hook that wires a cell into the roving-focus registry: it registers the cell's (row, col) + ref,\n// reports the initial active coordinate, and returns the tabindex + focus handler the cell binds. The\n// shared seam for every roving cell (data cell, column header, selection cell) so they all agree.\nfunction useRovingCell(row: number, col: number) {\n  const { register, claimInitial, isActive, setActive } = useDataGrid();\n  const ref = React.useRef<HTMLTableCellElement | null>(null);\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    claimInitial({ row, col });\n    return register({ row, col, el });\n  }, [register, claimInitial, row, col]);\n  const active = isActive({ row, col });\n  // exactly one cell is tabindex=0 (the active cell); every other is -1 → the grid is one tab stop\n  const tabIndex = active ? 0 : -1;\n  // focusing a cell (pointer/Tab/arrow) makes it the active cell, so click + Tab agree with arrows\n  const onFocus = () => setActive({ row, col });\n  return { ref, tabIndex, onFocus };\n}\n\nexport interface DataGridColumnHeaderProps\n  extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"onClick\"> {\n  /** The header's absolute 1-based `aria-colindex` against the full set (spec §7). */\n  colIndex: number;\n  /** This column can be re-sorted from its header (spec §3 sortable): renders a real sort button + caret. */\n  sortable?: boolean;\n  /**\n   * The current sort direction for this column (spec §4 Sorted), reflected as `aria-sort` on the\n   * header and as the caret. Only one column is the sort column — set it here and `\"none\"` elsewhere.\n   */\n  sortDirection?: DataGridSortDirection;\n  /** Fired when the sortable header is activated (click / Enter), so the caller re-sorts and updates `sortDirection`. */\n  onSort?: () => void;\n  /** The column name used in the sort control's accessible name, when it differs from the children. */\n  sortLabel?: string;\n}\n\n// The sort-direction caret (spec §4 Sorted): decorative — aria-sort on the th + the glyph SHAPE\n// (data-direction) encode the direction, so it never rests on color alone (1.4.1). Inline SVG, no\n// icon dep; it points up for ascending, down for descending, and shows a neutral both-ways glyph when\n// the column is sortable but not the active sort column.\nfunction SortCaret({ direction }: { direction: DataGridSortDirection }) {\n  return (\n    <span data-testid=\"data-grid-sort-caret\" data-direction={direction} aria-hidden=\"true\" className={dataGridSortCaretClass}>\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" focusable=\"false\" aria-hidden=\"true\">\n        {direction === \"ascending\" ? (\n          <path d=\"M4 10l4-4 4 4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : direction === \"descending\" ? (\n          <path d=\"M4 6l4 4 4-4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 6.5l3-3 3 3M5 9.5l3 3 3-3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n    </span>\n  );\n}\n\nconst NEXT_DIRECTION_WORD: Record<DataGridSortDirection, string> = {\n  none: \"ascending\",\n  ascending: \"descending\",\n  descending: \"ascending\",\n};\n\n/**\n * One column header cell (spec §2 column-header / §7). A `th role=\"columnheader\"` that is also a\n * roving active-cell target (it carries the cell focus ring + tabindex). A plain header is a quiet,\n * tracked label in the secondary text color. A `sortable` header wraps the label in a real `<button>`\n * carrying the ghost-action accent, a caret, and the target-size floor; the header reflects\n * `aria-sort` and Enter toggles the sort (spec §6) — so direction reaches assistive tech as data and\n * never rests on color alone (1.4.1).\n */\nexport const DataGridColumnHeader = React.forwardRef<HTMLTableCellElement, DataGridColumnHeaderProps>(\n  function DataGridColumnHeader(\n    { className, colIndex, sortable = false, sortDirection = \"none\", onSort, sortLabel, children, ...props },\n    ref,\n  ) {\n    const { density } = useDataGrid();\n    const { ref: rovingRef, tabIndex, onFocus } = useRovingCell(1, colIndex); // header is row 1\n    React.useImperativeHandle(ref, () => rovingRef.current as HTMLTableCellElement);\n    const ariaSort = sortable ? sortDirection : undefined;\n    const label = sortLabel ?? (typeof children === \"string\" ? children : undefined);\n\n    // Enter on the active header toggles the sort (spec §6 \"In a column header: toggle the column\n    // sort\"). Activating the inner button also fires onSort; both routes call the same handler.\n    const onKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {\n      if (sortable && event.key === \"Enter\") {\n        event.preventDefault();\n        onSort?.();\n      }\n    };\n\n    return (\n      <th\n        ref={rovingRef}\n        role=\"columnheader\"\n        scope=\"col\"\n        aria-colindex={colIndex}\n        // exactly one header carries aria-sort at a time (spec §4 Sorted); the rest are \"none\"/absent\n        aria-sort={ariaSort}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        className={cn(dataGridColumnHeaderVariants({ density }), className)}\n        {...props}\n      >\n        {sortable ? (\n          <button\n            type=\"button\"\n            onClick={onSort}\n            // a roving cell owns the tab stop; the inner button is reachable via Enter on the cell,\n            // not as its own tab stop (the cell is the single stop) — so it is tabindex=-1\n            tabIndex={-1}\n            aria-label={label ? `Sort by ${label}, ${NEXT_DIRECTION_WORD[sortDirection]}` : undefined}\n            className={dataGridSortButtonClass}\n          >\n            {children}\n            <SortCaret direction={sortDirection} />\n          </button>\n        ) : (\n          children\n        )}\n      </th>\n    );\n  },\n);\n\n/**\n * How a cell relates to the interactive control(s) it holds (spec §2/§6 cell entry/exit model):\n * - `undefined` — a plain VALUE cell (or one static, non-interactive node). The cell itself is the\n *   focus stop; arrow keys move the active cell as normal.\n * - `\"single\"` — the cell holds ONE interactive control (a link, a status chip, a row-action menu).\n *   The cell DELEGATES focus to that control on entry, so the control is what you land on and operate\n *   directly (spec §6 \"delegates focus to it on entry\").\n * - `\"multiple\"` — the cell holds SEVERAL controls. The cell is ENTERED with Enter (focus moves to the\n *   first control, and arrow keys stay free for the inner controls rather than moving the active cell)\n *   and EXITED with Escape (focus returns to the cell), so arrow keys stay free for grid movement\n *   outside it (spec §6 \"entered with Enter and exited with Escape, so arrow keys stay free\").\n */\nexport type DataGridCellControls = \"single\" | \"multiple\";\n\nexport interface DataGridCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement>,\n    Pick<DataGridCellVariantProps, \"mono\" | \"secondary\" | \"status\"> {\n  /** The cell's absolute 1-based `aria-colindex` against the full set (spec §7). */\n  colIndex: number;\n  /** The cell belongs to a body row at this absolute `aria-rowindex`; supplied by DataGridRow context where omitted. */\n  rowIndex?: number;\n  /**\n   * Whether this cell holds interactive control(s), and so how Enter/Escape behave for it (spec §6\n   * cell entry/exit model). Omit for a plain value cell. See {@link DataGridCellControls}.\n   */\n  controls?: DataGridCellControls;\n}\n\n// Find the focusable descendants of a cell (a single/multi-control cell delegates / enters into\n// them). The roving-cell <td> itself is excluded — we want the controls it HOSTS, not the cell.\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([role=\"gridcell\"]):not([role=\"columnheader\"]), [tabindex=\"-1\"]:not([role=\"gridcell\"]):not([role=\"columnheader\"])';\nfunction focusablesIn(cell: HTMLElement): HTMLElement[] {\n  return Array.from(cell.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\n// A cell reads its owning row's aria-rowindex from the rendered <tr> so the caller does not repeat it\n// on every cell. The row sets it; the cell discovers it from its closest row on mount.\nfunction useOwningRowIndex(elRef: React.RefObject<HTMLElement | null>, explicit?: number): number {\n  const [rowIndex, setRowIndex] = React.useState<number>(explicit ?? 0);\n  React.useEffect(() => {\n    if (explicit !== undefined) {\n      setRowIndex(explicit);\n      return;\n    }\n    const tr = elRef.current?.closest('[role=\"row\"]');\n    const attr = tr?.getAttribute(\"aria-rowindex\");\n    if (attr) setRowIndex(Number(attr));\n  }, [elRef, explicit]);\n  return rowIndex;\n}\n\n/**\n * One data cell — the focusable unit of the grid (spec §2 cell / §4/§7). A `td role=\"gridcell\"`\n * carrying its absolute `aria-colindex` (spec §7) and the roving active-cell tabindex + focus ring.\n * A plain cell is neutral primary text; a `mono` cell takes the monospace role and stays LTR in RTL\n * (an identifier/key/timestamp, G-U6); a `secondary` cell is de-emphasized; a `status` cell carries\n * the status fg paired with text (a verification/trust state) — the status color lives in the cell\n * only, never the row or header, and NEVER the brand (brand != state, G-U2). The cell hosts a value\n * or a single interactive control; density is read from the grid via context.\n */\nexport const DataGridCell = React.forwardRef<HTMLTableCellElement, DataGridCellProps>(function DataGridCell(\n  { className, colIndex, rowIndex, mono = false, secondary = false, status = \"none\", controls, onKeyDown, ...props },\n  ref,\n) {\n  const { density } = useDataGrid();\n  const localRef = React.useRef<HTMLTableCellElement | null>(null);\n  const owningRow = useOwningRowIndex(localRef, rowIndex);\n  const { ref: rovingRef, tabIndex, onFocus: rovingOnFocus } = useRovingCell(owningRow, colIndex);\n  // whether the active cell has been ENTERED for its controls (a multi-control cell); while entered,\n  // arrow keys are left for the inner controls and Escape returns to grid navigation (spec §6).\n  const [entered, setEntered] = React.useState(false);\n  // share one DOM node between the roving registry, the row-index discovery, and the forwarded ref\n  React.useImperativeHandle(ref, () => localRef.current as HTMLTableCellElement);\n  const setRefs = (node: HTMLTableCellElement | null) => {\n    localRef.current = node;\n    rovingRef.current = node;\n  };\n\n  // A SINGLE-control cell delegates focus to its one control on entry (spec §6): when the cell takes\n  // focus, hand focus straight to the inner control so you land on and operate the control directly.\n  const onFocus = (event: React.FocusEvent<HTMLTableCellElement>) => {\n    rovingOnFocus();\n    if (controls === \"single\" && event.target === localRef.current) {\n      const first = focusablesIn(localRef.current)[0];\n      if (first) first.focus();\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    const cell = localRef.current;\n    if (!cell) return;\n    if (controls === \"multiple\") {\n      // Enter ENTERS the cell: focus the first control; arrow keys then stay free for the inner\n      // controls (we stop their propagation below so the grid's roving handler ignores them).\n      if (event.key === \"Enter\" && event.target === cell && !entered) {\n        const first = focusablesIn(cell)[0];\n        if (first) {\n          event.preventDefault();\n          setEntered(true);\n          first.focus();\n        }\n        return;\n      }\n      // Escape EXITS the cell: focus returns to the cell and arrow keys move the active cell again.\n      if (event.key === \"Escape\" && entered) {\n        event.preventDefault();\n        event.stopPropagation();\n        setEntered(false);\n        cell.focus();\n        return;\n      }\n      // while ENTERED, keep arrow keys for the inner controls — stop them reaching the grid's roving\n      // handler on the wrapper, so they never move the active cell (spec §6 \"arrow keys stay free\").\n      if (\n        entered &&\n        (event.key === \"ArrowRight\" ||\n          event.key === \"ArrowLeft\" ||\n          event.key === \"ArrowUp\" ||\n          event.key === \"ArrowDown\" ||\n          event.key === \"Home\" ||\n          event.key === \"End\")\n      ) {\n        event.stopPropagation();\n      }\n    }\n  };\n\n  return (\n    <td\n      ref={setRefs}\n      role=\"gridcell\"\n      aria-colindex={colIndex}\n      tabIndex={tabIndex}\n      onFocus={onFocus}\n      onKeyDown={handleKeyDown}\n      className={cn(dataGridCellVariants({ density, mono, secondary, status }), className)}\n      {...props}\n    />\n  );\n});\n\nexport interface DataGridSelectionCellProps\n  extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, \"onChange\"> {\n  /** The cell's absolute 1-based `aria-colindex` (spec §7). The selection cell is the leading column. */\n  colIndex: number;\n  /** Whether the row is selected (spec §4 Selected). */\n  checked: boolean;\n  /** Fired when the row's selection toggles (via the checkbox or Space on the cell). */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Extend a range from the last selected row to this one (spec §6 Shift+Space). The grid does not\n   * track which row was selected last, so the caller owns the anchor and the resulting range; this\n   * fires on Shift+Space on the cell so the range reaches the same handler keyboard and pointer\n   * (Shift+click) would. Without it, Shift+Space falls back to toggling the single row.\n   */\n  onExtendSelection?: () => void;\n  /** The checkbox's accessible name (spec §7) — e.g. \"Select sk_live_1\". Never the placeholder. */\n  label: string;\n  /** The cell belongs to a body row at this absolute `aria-rowindex`; discovered from the row when omitted. */\n  rowIndex?: number;\n}\n\n/**\n * The leading selection cell (spec §2 selection-cell / §4/§6): a `gridcell` holding the row's\n * Checkbox. Space on the cell toggles the row's selection (spec §6). The checkbox is the committed\n * Checkbox component — a checked box is the brand action accent (never status-verified, G-U2):\n * selection is a neutral action state. It is a roving active-cell target like any other cell.\n */\nexport const DataGridSelectionCell = React.forwardRef<HTMLTableCellElement, DataGridSelectionCellProps>(\n  function DataGridSelectionCell(\n    { className, colIndex, checked, onCheckedChange, onExtendSelection, label, rowIndex, ...props },\n    ref,\n  ) {\n    const localRef = React.useRef<HTMLTableCellElement | null>(null);\n    const owningRow = useOwningRowIndex(localRef, rowIndex);\n    const { ref: rovingRef, tabIndex, onFocus } = useRovingCell(owningRow, colIndex);\n    React.useImperativeHandle(ref, () => localRef.current as HTMLTableCellElement);\n    const setRefs = (node: HTMLTableCellElement | null) => {\n      localRef.current = node;\n      rovingRef.current = node;\n    };\n    // Space on the cell toggles the row's selection; Shift+Space extends a range from the last\n    // selected row (spec §6). Shift+Space prefers the range handler when the caller wires one and\n    // falls back to toggling the single row otherwise, so the key is never inert.\n    const onKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {\n      if (event.key === \" \") {\n        event.preventDefault();\n        if (event.shiftKey && onExtendSelection) {\n          onExtendSelection();\n        } else {\n          onCheckedChange?.(!checked);\n        }\n      }\n    };\n    return (\n      <td\n        ref={setRefs}\n        role=\"gridcell\"\n        aria-colindex={colIndex}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        className={cn(dataGridSelectionCellClass, className)}\n        {...props}\n      >\n        <Checkbox label={label} checked={checked} onCheckedChange={onCheckedChange} />\n      </td>\n    );\n  },\n);\n\nexport interface DataGridSelectAllCellProps\n  extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"onChange\"> {\n  /** The header cell's absolute 1-based `aria-colindex` (spec §7). The select-all is the leading column. */\n  colIndex: number;\n  /** Whether all rows are selected. */\n  checked: boolean;\n  /** Whether some-but-not-all rows are selected (the mixed/indeterminate state). */\n  indeterminate?: boolean;\n  /** Fired when the select-all toggles. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** The select-all checkbox's accessible name (spec §7) — e.g. \"Select all rows\". */\n  label: string;\n}\n\n/**\n * The select-all header cell (spec §2 selection-cell: \"its header holds the select-all checkbox\").\n * A `columnheader` holding the parent Checkbox (the `variant=\"parent\"` mixed model), so a partial\n * selection reads as mixed to assistive tech. A roving active-cell target like any other header.\n */\nexport const DataGridSelectAllCell = React.forwardRef<HTMLTableCellElement, DataGridSelectAllCellProps>(\n  function DataGridSelectAllCell(\n    { className, colIndex, checked, indeterminate = false, onCheckedChange, label, ...props },\n    ref,\n  ) {\n    const { ref: rovingRef, tabIndex, onFocus } = useRovingCell(1, colIndex); // header is row 1\n    React.useImperativeHandle(ref, () => rovingRef.current as HTMLTableCellElement);\n    return (\n      <th\n        ref={rovingRef}\n        role=\"columnheader\"\n        scope=\"col\"\n        aria-colindex={colIndex}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        className={cn(dataGridSelectionCellClass, className)}\n        {...props}\n      >\n        <Checkbox\n          variant=\"parent\"\n          label={label}\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={onCheckedChange}\n        />\n      </th>\n    );\n  },\n);\n\nexport interface DataGridBulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** How many rows are selected (spec §2/§7), announced in words so selection is never color alone. */\n  selectedCount: number;\n  /** Fired when Escape dismisses the bar (spec §6 \"dismiss the bulk-action bar\"). */\n  onDismiss?: () => void;\n}\n\n/**\n * The bulk-action bar (spec §2 bulk-action-bar / §4/§6): a `role=\"toolbar\"` that appears when one or\n * more rows are selected, holding the selection actions and the selected-count label. It is a NEUTRAL\n * surface — the color lives on the action buttons it holds, never on the bar (spec §3/§8). Escape\n * dismisses it back to grid navigation (spec §6). Its accessible name names the selection count.\n */\nexport const DataGridBulkActionBar = React.forwardRef<HTMLDivElement, DataGridBulkActionBarProps>(\n  function DataGridBulkActionBar({ className, selectedCount, onDismiss, children, ...props }, ref) {\n    // A role=\"toolbar\" is not a valid child of role=\"grid\" (aria-required-children), so the bar\n    // renders OUTSIDE the grid table — but it is authored as a child of <DataGrid>. It reads the\n    // root's chrome container from context and portals itself there, so it lands outside the grid no\n    // matter how the caller nests it (Fragment, wrapper, forwarded) — NO child.type introspection.\n    const ctx = React.useContext(DataGridContext);\n    const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onDismiss?.();\n      }\n    };\n    const bar = (\n      <div\n        ref={ref}\n        role=\"toolbar\"\n        tabIndex={-1}\n        aria-label={`${selectedCount} selected`}\n        className={cn(dataGridBulkBarClass, className)}\n        onKeyDown={onKeyDown}\n        {...props}\n      >\n        <span className={dataGridBulkCountClass}>{selectedCount} selected</span>\n        {children}\n      </div>\n    );\n    // Inside a DataGrid: portal to the root's chrome node — and render NOTHING until that node\n    // mounts, so the bar never lands inside the <table role=\"grid\"> for even one frame (the container\n    // ref is set + a state bump re-renders this on the same commit). Outside any DataGrid (no\n    // context): render in place so a standalone bar is never lost.\n    if (ctx) return ctx.chromeContainer ? createPortal(bar, ctx.chromeContainer) : null;\n    return bar;\n  },\n);\n\nexport interface DataGridBulkActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** A destructive bulk action (spec §5) — a risk signal in the ACTION tier (never a status color). */\n  destructive?: boolean;\n}\n\n/**\n * One action in the bulk-action bar (spec §2/§5): a real `<button>`. The default action is the\n * primary action accent; a `destructive` action (for example, revoke a key) is the destructive\n * action accent — a risk signal named in TEXT, never a status color (spec §5/§8).\n */\nexport const DataGridBulkAction = React.forwardRef<HTMLButtonElement, DataGridBulkActionProps>(\n  function DataGridBulkAction({ className, destructive = false, type = \"button\", ...props }, ref) {\n    return (\n      <button\n        ref={ref}\n        type={type}\n        className={cn(dataGridBulkActionVariants({ destructive }), className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface DataGridEmptyProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** How many columns the empty line spans, so it fills the grid's own width (spec §2/§4 Empty). */\n  colSpan?: number;\n}\n\n/**\n * The empty-state row (spec §2/§4 Empty): a single full-width cell stating why the grid is empty and\n * what to do next, in plain words ending in a period — clear a filter, widen a date range. An empty\n * grid is NOT an error and never reads as one (no status color), and it never blames you or ends with\n * an exclamation mark (voice). Render it inside the body when a query returns nothing.\n */\nexport const DataGridEmpty = React.forwardRef<HTMLTableCellElement, DataGridEmptyProps>(\n  function DataGridEmpty({ className, colSpan = 1, children, ...props }, ref) {\n    return (\n      <tr role=\"row\">\n        <td ref={ref} role=\"gridcell\" colSpan={colSpan} className={cn(dataGridEmptyClass, className)} {...props}>\n          {children}\n        </td>\n      </tr>\n    );\n  },\n);\n"],"mappings":"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","names":["DataGrid","DataGridHeaderRow","DataGridBody","DataGridRow","DataGridColumnHeader","DataGridCell","DataGridSelectionCell","DataGridSelectAllCell","DataGridBulkActionBar","DataGridBulkAction","DataGridEmpty"]}