@crispy-seed/data-table 0.3.1 → 0.5.0

package/dist/index.js

@@ -859,18 +859,33 @@ function useDataTableColumnCalc(props) {
     return next;
 }
 /**
- * Drag-to-reorder: removes `dragKey` from `order` and reinserts it immediately before
- * `dropKey`'s CURRENT position (i.e. its position after the removal, so dropping a
- * column just after its own old slot doesn't appear to do nothing). A no-op (an
- * equal-valued copy) when either key is missing or they're the same key.
+ * Drag-to-reorder: moves `dragKey` to `dropKey`'s own ORIGINAL index (the standard
+ * `arrayMove` two-splice shape -- remove `dragKey`, then reinsert it at `dropKey`'s
+ * pre-removal index of the now-shorter array), the same semantics dnd-kit's own
+ * `arrayMove` uses. A no-op (an equal-valued copy) when either key is missing or
+ * they're the same key.
+ *
+ * An EARLIER version of this function instead reinserted `dragKey` immediately before
+ * `dropKey`'s post-removal position. That reads the same for a multi-column jump, but
+ * is a silent no-op for the single most common drag gesture there is: dragging a
+ * column onto its own immediate RIGHT neighbor. Concretely, for `["a","b"]`, dragging
+ * "a" onto "b": removing "a" leaves `["b"]`, and "immediately before b" is index 0 --
+ * exactly where "a" already was, so nothing moved even though a real drag-and-drop
+ * gesture happened (caught by `DataTable.columns.test.tsx`'s own end-to-end drag test,
+ * which fires a real `dragover` DOM event and asserts the header order actually
+ * changed -- it didn't). This version's two-splice shape lands the dragged column at
+ * the target's own original slot instead, which swaps immediate neighbors correctly in
+ * both directions and still matches the old multi-jump behavior for a LEFTWARD drag
+ * (only a RIGHTWARD multi-column jump now lands one slot further, after the drop
+ * target instead of before it -- see this file's own test for both directions).
  */ function reorderColumnKey(order, dragKey, dropKey) {
     if (dragKey === dropKey || !order.includes(dragKey) || !order.includes(dropKey)) {
         return [
             ...order
         ];
     }
+    const dropIndex = order.indexOf(dropKey);
     const withoutDrag = order.filter((key)=>key !== dragKey);
-    const dropIndex = withoutDrag.indexOf(dropKey);
     return [
         ...withoutDrag.slice(0, dropIndex),
         dragKey,
@@ -882,6 +897,24 @@ function useDataTableColumnCalc(props) {
  *  nor balloon past a sane cap from one fast mouse move). */ function clampColumnWidth(width, min = 80, max = 640) {
     return Math.min(max, Math.max(min, width));
 }
+/**
+ * Reconciles a persisted/controlled PINNED set against the table's current column
+ * KEYS -- the same drop-what's-gone rule `reconcileColumnOrder` already applies to
+ * `columnOrder`, but pins never need the "append what's new" half of that: an unpinned
+ * column simply isn't in the set, appending it here would silently pin every brand-new
+ * column by accident. A key no longer in `keys` (hidden isn't "gone" -- only removed
+ * from `columns` entirely) is dropped; everything else keeps its order.
+ */ function reconcilePinnedColumns(pinned, keys) {
+    const keySet = new Set(keys);
+    return pinned.filter((key)=>keySet.has(key));
+}
+/** Pin/unpin: adds `key` if absent, removes it if present -- column-menu.tsx's own
+ *  "Pin column"/"Unpin column" toggle is one call of this, the same shape
+ *  `toggleMembership` already gives row selection. Kept as its own named function
+ *  (rather than reusing `toggleMembership` directly) so a pin-specific doc comment and
+ *  call sites aren't reading a generically-named helper for a column-specific concern. */ function togglePinnedColumn(pinned, key) {
+    return toggleMembership(pinned, key);
+}
 /**
  * Infinite scroll's own gate: fire `onLoadMore` only when the sentinel is ACTUALLY
  * intersecting (not e.g. an observer's initial `false` callback, which fires once on
@@ -895,19 +928,90 @@ function useDataTableColumnCalc(props) {
  */ function shouldTriggerLoadMore(isIntersecting, hasMore, loadingMore) {
     return hasMore && !loadingMore;
 }
+function isPlainObject(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/** Structural validation for ONE parsed view -- every field of `DataTableViewState` is
+ *  optional, so this only rejects a field that's actually PRESENT but the wrong shape
+ *  (a consumer's storage from a future/older version of this shape), not a field that's
+ *  simply missing. */ function isValidDataTableView(value) {
+    if (!isPlainObject(value)) return false;
+    if (typeof value["id"] !== "string" || typeof value["name"] !== "string") return false;
+    if (!isPlainObject(value["state"])) return false;
+    const state = value["state"];
+    if (state["columnOrder"] !== undefined && !isStringArray(state["columnOrder"])) return false;
+    if (state["hiddenColumnKeys"] !== undefined && !isStringArray(state["hiddenColumnKeys"])) return false;
+    if (state["pinnedColumnKeys"] !== undefined && !isStringArray(state["pinnedColumnKeys"])) return false;
+    if (state["columnWidths"] !== undefined && !isPlainObject(state["columnWidths"])) return false;
+    if (state["toolbarSorts"] !== undefined && !Array.isArray(state["toolbarSorts"])) return false;
+    if (state["toolbarFilters"] !== undefined && !Array.isArray(state["toolbarFilters"])) return false;
+    return true;
+}
+function isStringArray(value) {
+    return Array.isArray(value) && value.every((entry)=>typeof entry === "string");
+}
+/** JSON-serializes a saved-views list for the default localStorage store -- pure so it
+ *  can be unit- and mutation-tested without touching `window.localStorage` at all (the
+ *  hook's own effect, `useDataTableViews.ts`, is the only thing that actually touches
+ *  storage; this is just the byte-for-byte shape it writes/reads). */ function serializeDataTableViews(views) {
+    return JSON.stringify(views);
+}
+/**
+ * Parses a saved-views blob back into a `DataTableView[]`, defensively: malformed JSON,
+ * a non-array root, or any single malformed entry drops just that problem (an empty
+ * list, or that one entry) rather than throwing -- a consumer's localStorage can hold a
+ * PRIOR version's shape after this ships a new field, and one bad/stale entry shouldn't
+ * cost every other saved view.
+ */ function deserializeDataTableViews(raw) {
+    if (!raw) return [];
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    } catch  {
+        return [];
+    }
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(isValidDataTableView);
+}
+/** Inserts `view` (by `id`), or replaces the existing entry with the same `id` in
+ *  place -- "Save" (new view) and "update the currently loaded view" are both one call
+ *  of this, matching `moveColumnKey`/`reorderColumnKey`'s own "one pure op per user
+ *  gesture" shape. */ function upsertDataTableView(views, view) {
+    const index = views.findIndex((existing)=>existing.id === view.id);
+    if (index === -1) return [
+        ...views,
+        view
+    ];
+    const next = [
+        ...views
+    ];
+    next[index] = view;
+    return next;
+}
+/** Renames the view with this `id` -- a no-op (an equal-valued copy) if no view has
+ *  that id. */ function renameDataTableView(views, id, name) {
+    return views.map((view)=>view.id === id ? {
+            ...view,
+            name
+        } : view);
+}
+/** Removes the view with this `id`. */ function removeDataTableView(views, id) {
+    return views.filter((view)=>view.id !== id);
+}
 const EMPTY_STRINGS = [];
 const EMPTY_RECORD = {};
 /**
  * Owns everything DATATABLE-ATTIO-SPEC.md's column menu + reorder + resize tranche
- * needs -- order, visibility, a per-column label override, and a per-column width --
- * the way useDataTableSelection owns the one selected-id SET rather than one hook per
- * row. All four are "one value per column key" maps/lists a consumer may want to
- * persist (a saved view), so they share this hook instead of splitting into four
- * separate ones; drag-to-reorder and drag-to-resize (below) are the two INTERACTIONS
- * built on top of the order/width state this hook already owns, not independent state
+ * needs -- order, visibility, a per-column label override, a per-column width, and
+ * (Attio's "Pin column") a per-column left-pinned flag -- the way useDataTableSelection
+ * owns the one selected-id SET rather than one hook per row. All five are "one value
+ * per column key" maps/lists/sets a consumer may want to persist (a saved view), so
+ * they share this hook instead of splitting into five separate ones; drag-to-reorder
+ * and drag-to-resize (below) are the two INTERACTIONS built on top of the order/width
+ * state this hook already owns, not independent state
  * of their own.
  */ function useDataTableColumns(props) {
-    const { columnKeys = EMPTY_STRINGS, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys: hiddenProp, defaultHiddenColumnKeys = EMPTY_STRINGS, onHiddenColumnKeysChange, columnWidths: widthsProp, defaultColumnWidths = EMPTY_RECORD, onColumnWidthsChange, columnLabels: labelsProp, defaultColumnLabels = EMPTY_RECORD, onColumnLabelsChange } = props;
+    const { columnKeys = EMPTY_STRINGS, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys: hiddenProp, defaultHiddenColumnKeys = EMPTY_STRINGS, onHiddenColumnKeysChange, columnWidths: widthsProp, defaultColumnWidths = EMPTY_RECORD, onColumnWidthsChange, columnLabels: labelsProp, defaultColumnLabels = EMPTY_RECORD, onColumnLabelsChange, pinnedColumnKeys: pinnedProp, defaultPinnedColumnKeys = EMPTY_STRINGS, onPinnedColumnKeysChange } = props;
     const [rawOrder, setRawOrder] = useControllableState$1({
         prop: columnOrderProp,
         defaultProp: defaultColumnOrder ?? columnKeys,
@@ -944,6 +1048,36 @@ const EMPTY_RECORD = {};
         columnOrder,
         hiddenSet
     ]);
+    const [rawPinnedColumnKeys, setRawPinnedColumnKeys] = useControllableState$1({
+        prop: pinnedProp,
+        defaultProp: defaultPinnedColumnKeys,
+        onChange: onPinnedColumnKeysChange
+    });
+    // Reconciled against `columnKeys` every render, the same way `columnOrder` is above --
+    // a controlled `pinnedColumnKeys` a consumer persisted (e.g. a saved view) before a
+    // column was removed from `columns` must not keep pinning a ghost key.
+    const pinnedColumnKeys = useMemo(()=>reconcilePinnedColumns(rawPinnedColumnKeys ?? EMPTY_STRINGS, columnKeys), [
+        rawPinnedColumnKeys,
+        columnKeys
+    ]);
+    const pinnedSet = useMemo(()=>new Set(pinnedColumnKeys), [
+        pinnedColumnKeys
+    ]);
+    const isColumnPinned = useCallback((key)=>pinnedSet.has(key), [
+        pinnedSet
+    ]);
+    const pinColumn = useCallback((key)=>setRawPinnedColumnKeys((current = EMPTY_STRINGS)=>current.includes(key) ? current : [
+                ...current,
+                key
+            ]), [
+        setRawPinnedColumnKeys
+    ]);
+    const unpinColumn = useCallback((key)=>setRawPinnedColumnKeys((current = EMPTY_STRINGS)=>current.filter((existing)=>existing !== key)), [
+        setRawPinnedColumnKeys
+    ]);
+    const togglePinColumn = useCallback((key)=>setRawPinnedColumnKeys((current = EMPTY_STRINGS)=>togglePinnedColumn(current, key)), [
+        setRawPinnedColumnKeys
+    ]);
     const isColumnHidden = useCallback((key)=>hiddenSet.has(key), [
         hiddenSet
     ]);
@@ -988,22 +1122,30 @@ const EMPTY_RECORD = {};
         columnKeys
     ]);
     // -- drag-to-reorder ---------------------------------------------------------------
-    // Live state only (which column is currently being dragged) -- the styled layer
-    // drives it by calling `dragOverColumn` as the pointer crosses OTHER header cells
-    // (via `document.elementFromPoint`, since a captured pointer stops native
-    // `pointerenter` from firing on siblings), which reorders immediately rather than
-    // waiting for a drop. That is exactly what Attio's own header drag does (the column
-    // being passed visibly swaps live), and it means `endColumnDrag` never has to also
-    // commit a move -- there is nothing left to commit.
+    // Live state only (which column is currently being dragged) -- the styled layer's
+    // header cells are natively `draggable`, so `dragOverColumn` is driven straight off
+    // each cell's own `onDragOver` (one real browser event per column the pointer
+    // crosses), which reorders immediately rather than waiting for a drop. That is
+    // exactly what Attio's own header drag does (the column being passed visibly swaps
+    // live), and it means `endColumnDrag` never has to also commit a move -- there is
+    // nothing left to commit.
     const [draggingColumnKey, setDraggingColumnKey] = useState(null);
     const beginColumnDrag = useCallback((key)=>setDraggingColumnKey(key), []);
+    // Reads `draggingColumnKey` straight from this render's own closure rather than via
+    // `setDraggingColumnKey`'s functional-updater form (an earlier version of this hook
+    // nested the `reorderColumn` call inside that updater, to read a "live" value --
+    // `draggingColumnKey` never actually CHANGES during a drag, so that state update was
+    // pure ceremony, and nesting one hook's setState inside another's updater callback is
+    // exactly what silently dropped the reorder in DataTable.columns.test.tsx's own
+    // end-to-end drag test: a REAL `dragover` DOM event fired, `dragOverColumn` fired with
+    // the right key, but `columnOrder` never actually moved). Each `onDragOver` is its own
+    // discrete browser event (not a tight synchronous loop within one render), so a plain
+    // closure read is exactly as live as the updater trick was trying to be.
     const dragOverColumn = useCallback((hoverKey)=>{
-        setDraggingColumnKey((current)=>{
-            if (!current || current === hoverKey) return current;
-            reorderColumn(current, hoverKey);
-            return current;
-        });
+        if (!draggingColumnKey || draggingColumnKey === hoverKey) return;
+        reorderColumn(draggingColumnKey, hoverKey);
     }, [
+        draggingColumnKey,
         reorderColumn
     ]);
     const endColumnDrag = useCallback(()=>setDraggingColumnKey(null), []);
@@ -1039,10 +1181,15 @@ const EMPTY_RECORD = {};
         hiddenColumnKeys,
         columnWidths,
         columnLabels,
+        pinnedColumnKeys,
         isColumnHidden,
         hideColumn,
         showColumn,
         toggleColumnVisibility,
+        isColumnPinned,
+        pinColumn,
+        unpinColumn,
+        togglePinColumn,
         getColumnLabel,
         renameColumn,
         getColumnWidth,
@@ -1691,7 +1838,7 @@ function useDataTableRowContext({ strict = true } = {}) {
     return context;
 }
 const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, ...otherProps } = props;
+    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, ...otherProps } = props;
     const api = useDataTable({
         sort,
         defaultSort,
@@ -1723,6 +1870,9 @@ const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
         columnLabels,
         defaultColumnLabels,
         onColumnLabelsChange,
+        pinnedColumnKeys,
+        defaultPinnedColumnKeys,
+        onPinnedColumnKeysChange,
         columnCalcOps,
         defaultColumnCalcOps,
         onColumnCalcOpsChange,
@@ -1810,6 +1960,132 @@ const DataTableCell$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
 });
 DataTableCell$1.displayName = "DataTableCell";
 
+const EMPTY_VIEWS = [];
+function readStoredViews(storageKey) {
+    if (!storageKey || typeof window === "undefined") return EMPTY_VIEWS;
+    try {
+        return deserializeDataTableViews(window.localStorage.getItem(storageKey));
+    } catch  {
+        // A private-browsing tab / blocked storage throws on access, not just on quota --
+        // this hook degrades to in-memory-only rather than crash the table over it.
+        return EMPTY_VIEWS;
+    }
+}
+/** A reasonably unique id for a newly created view -- `crypto.randomUUID` where it
+ *  exists (every real browser + modern Node), a plain timestamp+random fallback
+ *  otherwise (older jsdom/test environments) so this hook never throws just because a
+ *  test runner's `crypto` is a stub. */ function generateViewId() {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID();
+    }
+    return `view-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+/**
+ * Owns the saved-views LIST (create/rename/delete/select) and its default persistence
+ * (localStorage, pluggable away by controlling `views`/`onViewsChange` instead) -- the
+ * same controllable shape every other DataTable state hook already uses
+ * (`useDataTableColumns`, `useDataTableToolbarSort`, ...). Read `DataTableViewsControl`
+ * (`views.tsx`, the styled layer) for how a consumer wires `captureState`/`applyState`
+ * around this to actually save/restore column + sort + filter state.
+ */ function useDataTableViews(props) {
+    const { views: viewsProp, defaultViews = EMPTY_VIEWS, onViewsChange, activeViewId: activeViewIdProp, defaultActiveViewId = null, onActiveViewIdChange, storageKey } = props;
+    // Lazy, ONE-TIME read of localStorage as this render's default -- re-reading it on
+    // every render (rather than a lazy ref) would clobber whatever the user just did in
+    // THIS tab with whatever another tab most recently wrote. Only fires at all when this
+    // hook truly owns persistence: `views` is uncontrolled AND a `storageKey` was given.
+    const initialViewsRef = useRef(null);
+    if (initialViewsRef.current === null) {
+        if (viewsProp !== undefined) {
+            initialViewsRef.current = defaultViews;
+        } else {
+            const stored = readStoredViews(storageKey);
+            // Nothing in storage yet (first run, or no `storageKey` at all) -- seed from
+            // `defaultViews` instead of an empty list, matching every other hook's own
+            // `defaultProp` semantics.
+            initialViewsRef.current = stored.length > 0 ? stored : defaultViews;
+        }
+    }
+    const [views = EMPTY_VIEWS, setViews] = useControllableState$1({
+        prop: viewsProp,
+        defaultProp: initialViewsRef.current,
+        onChange: onViewsChange
+    });
+    // Persists every change back to `storageKey` -- same "only when this hook owns
+    // persistence" gate as the lazy read above. Skips the FIRST render (the effect would
+    // otherwise immediately re-write back the exact bytes it just read, or stomp an
+    // empty default over a controlled consumer's storage before it ever mounts).
+    const skipFirstPersistRef = useRef(true);
+    useEffect(()=>{
+        if (viewsProp !== undefined || !storageKey || typeof window === "undefined") return;
+        if (skipFirstPersistRef.current) {
+            skipFirstPersistRef.current = false;
+            return;
+        }
+        try {
+            window.localStorage.setItem(storageKey, serializeDataTableViews(views));
+        } catch  {
+        // Storage full/blocked -- the view still exists in memory for this session.
+        }
+    }, [
+        views,
+        viewsProp,
+        storageKey
+    ]);
+    const [activeViewId = null, setActiveViewId] = useControllableState$1({
+        prop: activeViewIdProp,
+        defaultProp: defaultActiveViewId,
+        onChange: onActiveViewIdChange
+    });
+    const activeView = views.find((view)=>view.id === activeViewId) ?? null;
+    const createView = useCallback((name, state)=>{
+        const id = generateViewId();
+        setViews((current = EMPTY_VIEWS)=>upsertDataTableView(current, {
+                id,
+                name,
+                state
+            }));
+        setActiveViewId(id);
+        return id;
+    }, [
+        setViews,
+        setActiveViewId
+    ]);
+    const updateView = useCallback((id, state)=>{
+        setViews((current = EMPTY_VIEWS)=>{
+            const existing = current.find((view)=>view.id === id);
+            return existing ? upsertDataTableView(current, {
+                ...existing,
+                state
+            }) : current;
+        });
+    }, [
+        setViews
+    ]);
+    const renameView = useCallback((id, name)=>setViews((current = EMPTY_VIEWS)=>renameDataTableView(current, id, name)), [
+        setViews
+    ]);
+    const deleteView = useCallback((id)=>{
+        setViews((current = EMPTY_VIEWS)=>removeDataTableView(current, id));
+        setActiveViewId((current)=>current === id ? null : current);
+    }, [
+        setViews,
+        setActiveViewId
+    ]);
+    const selectView = useCallback((id)=>setActiveViewId(id), [
+        setActiveViewId
+    ]);
+    return {
+        views,
+        activeViewId,
+        activeView,
+        createView,
+        updateView,
+        renameView,
+        deleteView,
+        selectView
+    };
+}
+
 function r(e) {
     var t, f, n = "";
     if ("string" == typeof e || "number" == typeof e) n += e;
@@ -2335,76 +2611,121 @@ function RatingCell({ value, maxRating = 5 }) {
     });
 }
 
-/** The subset of `useDataTableContext()` every "resolve which columns to actually
- *  render, in what order, under what label/width" helper below needs -- narrowed so
- *  each helper's own signature documents exactly what it reads, rather than the whole
- *  table API. */ function useEffectiveColumns(columns) {
-    const { visibleColumnOrder, getColumnLabel, getColumnWidth } = useDataTableContext();
+/** Fallback width (px) used to compute a pinned column's cumulative sticky offset when
+ *  it has no explicit `width` and hasn't been drag-resized -- pinning needs a STATIC
+ *  number to put in an inline `insetInlineStart`, and `table-layout: fixed` only
+ *  decides how an unset column's share of the leftover width actually renders at paint
+ *  time (something no amount of JS math here can know ahead of it). Matches
+ *  `clampColumnWidth`'s own floor (react-headless's `dom.ts`) -- a real pinned column
+ *  narrower than this only needs its offset "wide enough not to overlap", not exact. */ const DEFAULT_PINNED_COLUMN_WIDTH = 180;
+/**
+ * Every column this table actually renders, in RENDER order: any pinned columns first
+ * (their own relative order preserved from `visibleColumnOrder`, not a separate pin-
+ * order of their own), then everything else in normal order -- resolved label/width,
+ * and this file's own sticky-left bookkeeping (`pinned`/`pinOffset`/`pinnedEdge`). Read
+ * by the header, the body, the ColumnCalc footer AND the `<colgroup>` alike -- all four
+ * must agree on this exact order, since a `<colgroup>`'s `<col>`s are matched
+ * POSITIONALLY to every row's cells; splitting "order" (here) from "which one is
+ * pinned" into two independently-ordered helpers would let a `<colgroup>` built from
+ * one and a header row built from the other drift out of sync under `table-layout:
+ * fixed`'s own column-to-cell matching.
+ */ function useEffectiveColumns(columns, options) {
+    const { visibleColumnOrder, getColumnLabel, getColumnWidth, pinnedColumnKeys } = useDataTableContext();
+    const { selectable, stickyFirst } = options;
     return React.useMemo(()=>{
         const byKey = new Map(columns.map((column)=>[
                 column.key,
                 column
             ]));
-        return visibleColumnOrder.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>({
+        const visibleKeySet = new Set(visibleColumnOrder);
+        const explicitPins = new Set((pinnedColumnKeys ?? []).filter((key)=>byKey.has(key) && visibleKeySet.has(key)));
+        // Legacy fallback (DataTable.columns.test.tsx's own `stickyFirst` tests, predating
+        // per-column pin): no EXPLICIT pin at all, `stickyFirst` pins exactly the first
+        // visible column -- the single-column behavior this file now generalizes to a
+        // whole pinned GROUP.
+        const pinnedSet = explicitPins.size > 0 ? explicitPins : stickyFirst && visibleColumnOrder.length > 0 ? new Set([
+            visibleColumnOrder[0]
+        ]) : explicitPins;
+        // Stable partition: pinned columns first (their relative order among THEMSELVES
+        // preserved from `visibleColumnOrder`), then every other column, also in its
+        // existing relative order. `Array.prototype.sort` is spec-stable (ES2019+).
+        const ordered = [
+            ...visibleColumnOrder
+        ].sort((a, b)=>{
+            const aPinned = pinnedSet.has(a) ? 0 : 1;
+            const bPinned = pinnedSet.has(b) ? 0 : 1;
+            return aPinned - bPinned;
+        });
+        let cursor = selectable ? 40 : 0;
+        let pinnedCount = 0;
+        const entries = ordered.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>{
+            const width = getColumnWidth(column.key) ?? column.width;
+            const pinned = pinnedSet.has(column.key);
+            const pinOffset = pinned ? cursor : 0;
+            if (pinned) {
+                cursor += width ?? DEFAULT_PINNED_COLUMN_WIDTH;
+                pinnedCount += 1;
+            }
+            return {
                 column,
                 label: getColumnLabel(column.key, column.header),
-                width: getColumnWidth(column.key) ?? column.width
-            }));
+                width,
+                pinned,
+                pinOffset,
+                pinnedEdge: false
+            };
+        });
+        if (pinnedCount > 0) entries[pinnedCount - 1].pinnedEdge = true;
+        return entries;
     }, [
         columns,
         visibleColumnOrder,
         getColumnLabel,
-        getColumnWidth
-    ]);
-}
-/** Sticky positioning for the leading/trailing visible cell of a row (header, body, or
- *  footer) -- `stickyFirst` pins the SELECTION cell when the table has one, plus the
- *  first data column; `stickyLast` always pins the last VISIBLE data column. Only the
- *  OUTERMOST sticky cell on each side gets `data-sticky-edge(-end)` -- that's the one
- *  whose shadow should reveal on scroll, not every sticky cell.
- *
- *  When both a selection column and a sticky first data column are present, the edge
- *  is the data column (e.g. Company), not the 40px selection cell: the data column is
- *  ALSO `position: sticky`, sitting immediately to its right, so a shadow cast from the
- *  selection cell's trailing edge would render directly underneath that opaque sticky
- *  cell and never actually be visible. Putting `data-sticky-edge` on the trailing-most
- *  sticky-left cell is what makes the shadow render somewhere unobstructed -- past the
- *  whole pinned group, not between two members of it. */ function stickyProps(options) {
-    const { selectable, stickyFirst, stickyLast, isSelectionCell, isFirst, isLast } = options;
-    if (stickyFirst && isSelectionCell) {
-        // Still sticky either way. The edge marker only belongs here when there is no
-        // sticky first DATA column to hand it to instead (i.e. no columns at all) --
-        // otherwise that data column is the true trailing edge of the pinned group.
-        return selectable ? {
-            "data-sticky": "",
-            style: {
-                insetInlineStart: 0
-            }
-        } : {
-            "data-sticky": "",
-            "data-sticky-edge": "",
-            style: {
-                insetInlineStart: 0
-            }
-        };
-    }
-    if (stickyFirst && isFirst && !selectable) {
-        return {
-            "data-sticky": "",
-            "data-sticky-edge": "",
-            style: {
-                insetInlineStart: 0
-            }
-        };
-    }
-    if (stickyFirst && isFirst && selectable) {
-        // The trailing edge of the pinned group -- past the 40px selection cell, so this
-        // is where the scroll shadow actually renders unobstructed.
+        getColumnWidth,
+        pinnedColumnKeys,
+        selectable,
+        stickyFirst
+    ]);
+}
+/** The 40px selection column's own sticky-left state -- `stickyFirst` (the table-wide
+ *  prop) alone undercounts "should the checkbox column stick" the moment ANY per-column
+ *  pin is live, controlled or not, since the live pinned SET only exists once
+ *  `DataTablePrimitiveRoot`'s provider has mounted (an uncontrolled consumer never
+ *  hands its pinned columns back up as a prop for `DataTable.tsx` to read directly).
+ *  Mirrors `DataTable.tsx`'s own `resolvedStickyLast = stickyLast ||
+ *  columns.some(actions)` widening, just resolved one level down (live STATE, not
+ *  static column config) -- read via context from a component under the provider, not
+ *  computed above it. */ function useSelectionStickyFirst(stickyFirst) {
+    const { pinnedColumnKeys } = useDataTableContext();
+    return stickyFirst || (pinnedColumnKeys?.length ?? 0) > 0;
+}
+/** Sticky positioning for the 40px SELECTION cell only (header/body/footer) -- data
+ *  columns use their own `pinned`/`pinOffset`/`pinnedEdge` (`useEffectiveColumns`,
+ *  above) instead, via `pinnedCellProps` below. The selection cell is always the
+ *  leading edge of the pinned-left group when it's sticky at all, so it never itself
+ *  carries `data-sticky-edge` -- the trailing-most pinned DATA column does (its own
+ *  `pinnedEdge`), the same split the original single-column `stickyFirst` already drew
+ *  between the selection cell and Company/Name. */ function selectionStickyProps(stickyFirst) {
+    return stickyFirst ? {
+        "data-sticky": "",
+        style: {
+            insetInlineStart: 0
+        }
+    } : {};
+}
+/** Sticky positioning for one DATA cell (header, body, or ColumnCalc footer) -- pinned-
+ *  left (this column's own `pinOffset`, `data-sticky-edge` only on the group's
+ *  trailing-most member) takes priority over sticky-right (`stickyLast`, always just
+ *  the last VISIBLE column, e.g. an `actions` column) since a column can only stick to
+ *  one edge. */ function pinnedCellProps(entry, stickyLast, isLast) {
+    if (entry.pinned) {
         return {
             "data-sticky": "",
-            "data-sticky-edge": "",
+            ...entry.pinnedEdge ? {
+                "data-sticky-edge": ""
+            } : {},
             style: {
-                insetInlineStart: 40
+                insetInlineStart: entry.pinOffset
             }
         };
     }
@@ -2744,265 +3065,555 @@ const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = tr
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
-/** The raw value a live editor reads, distinct from `DataTableColumn.value` (the
- *  accessor sort/search/filter/export share): `editValue` returns whatever TYPE the
- *  editor itself expects -- a real `boolean` for `editor: "switch"`/`type:
- *  "checkbox"`, a `number` for `type: "rating"`, the option's own string for `select`/
- *  `reference`/`actor` -- where `value`/`render` may format that same field for
- *  display. Falls back to the table's own accessor when the column supplies none. */ function resolveEditValue(column, row, fallback) {
-    return column.editValue ? column.editValue(row) : fallback;
-}
-function EditPendingIndicator() {
-    return /*#__PURE__*/ jsxs("svg", {
-        className: "seed-data-table-edit-pending",
-        width: 14,
-        height: 14,
-        viewBox: "0 0 16 16",
-        fill: "none",
-        role: "presentation",
-        "aria-hidden": "true",
-        children: [
-            /*#__PURE__*/ jsx("circle", {
-                cx: 8,
-                cy: 8,
-                r: 6.5,
-                stroke: "currentColor",
-                strokeOpacity: 0.25,
-                strokeWidth: 2
-            }),
-            /*#__PURE__*/ jsx("path", {
-                d: "M14.5 8a6.5 6.5 0 0 0-6.5-6.5",
-                stroke: "currentColor",
-                strokeWidth: 2,
-                strokeLinecap: "round"
-            })
-        ]
-    });
-}
-function EditError({ message }) {
-    return /*#__PURE__*/ jsx("span", {
-        className: "seed-data-table-edit-error",
-        children: message
-    });
-}
-////////////////////////////////////////////////////////////////////////////////////
-// -- plain editable: text/number (seed TextField) and date/datetime (a native input,
-//    styled the same way, per `cellType`) -- both double-click gated, Enter/blur
-//    commits, Escape cancels. -------------------------------------------------------
-function TextEditor({ column, value, pending, onCommit, onCancel }) {
-    const [draft, setDraft] = React.useState(()=>value == null ? "" : String(value));
-    return(// `size="medium"` (seed's smallest fixed `TextField` size, 40px min-height,
-    // `text-input.ts`'s own token) -- the default `size="large"` overflowed a 36px
-    // table row (same class of fix as `toolbar.tsx`'s `SearchBox`, which made the
-    // same call for its own 32px-ish search box).
-    /*#__PURE__*/ jsx(TextFieldRoot, {
-        size: "medium",
-        style: {
-            width: "100%"
-        },
-        onClick: (event)=>event.stopPropagation(),
-        onKeyDown: (event)=>event.stopPropagation(),
-        children: /*#__PURE__*/ jsx(TextFieldInput, {
-            autoFocus: true,
-            type: column.cellType === "number" ? "number" : "text",
-            "aria-label": `Edit ${column.key}`,
-            value: draft,
-            disabled: pending,
-            onChange: (event)=>setDraft(event.target.value),
-            onBlur: ()=>onCommit(draft),
-            onKeyDown: (event)=>{
-                if (event.key === "Enter") onCommit(draft);
-                else if (event.key === "Escape") onCancel();
-            }
-        })
-    }));
+__insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
+
+const createClassName = (className, variants, compoundVariants = [])=>{
+    const variantKeys = Object.keys(variants);
+    const variantValues = variantKeys.map((key)=>variants[key]);
+    const variantClassName = variantKeys.map((key, index)=>`${className}--${key}_${variantValues[index]}`).join(" ");
+    const compountVariantClassName = compoundVariants.filter((compoundVariant)=>Object.keys(compoundVariant).every((key)=>compoundVariant[key] === variants[key])).map((compoundVariant)=>`${className}--${Object.keys(compoundVariant).map((key)=>{
+            return `${key}_${compoundVariant[key]}`;
+        }).join("-")}`).join(" ");
+    return [
+        className,
+        variantClassName,
+        compountVariantClassName
+    ].filter(Boolean).join(" ");
+};
+function mergeVariants(a, b) {
+    const result = {
+        ...a
+    };
+    for(const k in b){
+        if (b[k] != null) {
+            result[k] = b[k];
+        }
+    }
+    return result;
 }
-function DateEditor({ column, value, pending, onCommit, onCancel }) {
-    const isDateTime = column.cellType === "datetime";
-    const [draft, setDraft] = React.useState(()=>isDateTime ? toDateTimeInputValue(value) : toDateInputValue(value));
-    return(// See `TextEditor`'s own comment above -- same `size="medium"` fix.
-    /*#__PURE__*/ jsx(TextFieldRoot, {
-        size: "medium",
-        style: {
-            width: "100%"
-        },
-        onClick: (event)=>event.stopPropagation(),
-        onKeyDown: (event)=>event.stopPropagation(),
-        children: /*#__PURE__*/ jsx(TextFieldInput, {
-            autoFocus: true,
-            type: isDateTime ? "datetime-local" : "date",
-            "aria-label": `Edit ${column.key}`,
-            value: draft,
-            disabled: pending,
-            onChange: (event)=>setDraft(event.target.value),
-            onBlur: ()=>onCommit(draft),
-            onKeyDown: (event)=>{
-                if (event.key === "Enter") onCommit(draft);
-                else if (event.key === "Escape") onCancel();
-            }
-        })
-    }));
+function splitVariantProps(props, variantMap) {
+    const variantProps = {};
+    const otherProps = {};
+    for(const key in props){
+        if (variantMap[key] != null) {
+            variantProps[key] = props[key];
+        } else {
+            otherProps[key] = props[key];
+        }
+    }
+    return [
+        variantProps,
+        otherProps
+    ];
 }
-////////////////////////////////////////////////////////////////////////////////////
-// -- editor: "select" -- double-click opens seed's own Select, auto-opened (seed's
-//    `SelectRoot` takes `defaultOpen` directly -- unlike crisp's closed-API `Select`,
-//    which needs a synthetic click on its own trigger to start open). -------------
-function SelectEditor({ column, value, pending, onCommit, onCancel }) {
-    const options = column.options ?? [];
-    const current = value == null ? "" : String(value);
-    return /*#__PURE__*/ jsxs(SelectRoot, {
-        // Controlled open, per docs/examples/react/select/controlled-open.tsx --
-        // this editor is only ever mounted while the cell IS editing, so it always
-        // wants to start (and stay) open; `onOpenChange(false)` is what tells us
-        // the popover wants to close for ANY reason (Escape, an outside click, OR
-        // the internal auto-close a single-select commit already triggers), so
-        // `onCancel` alone now covers the Escape gap the old raw `document`
-        // listener existed for, without a second, independent listener.
-        open: true,
-        onOpenChange: (next)=>{
-            if (!next) onCancel();
-        },
-        disabled: pending,
-        value: current ? [
-            current
-        ] : [],
-        onValueChange: (next)=>onCommit(next[0] ?? ""),
-        children: [
-            /*#__PURE__*/ jsxs(SelectTrigger, {
-                "aria-label": `Edit ${column.key}`,
-                children: [
-                    /*#__PURE__*/ jsx(SelectValue, {}),
-                    /*#__PURE__*/ jsx(SelectPlaceholder, {
-                        children: "Select…"
-                    }),
-                    /*#__PURE__*/ jsx(SelectSuffixIcon, {
-                        svg: /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {})
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(SelectPositioner, {
-                children: /*#__PURE__*/ jsx(SelectContent, {
-                    children: /*#__PURE__*/ jsx(SelectScrollArea, {
-                        children: options.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
-                                value: option.value,
-                                label: option.label,
-                                children: [
-                                    /*#__PURE__*/ jsx(SelectItemBody, {
-                                        children: /*#__PURE__*/ jsx(SelectItemLabel, {})
-                                    }),
-                                    /*#__PURE__*/ jsx(SelectItemIndicator, {
-                                        selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
-                                    })
-                                ]
-                            }, option.value))
-                    })
-                })
-            })
-        ]
-    });
+
+const dataTableSlotNames = [
+    [
+        "root",
+        "seed-data-table__root"
+    ],
+    [
+        "table",
+        "seed-data-table__table"
+    ],
+    [
+        "header",
+        "seed-data-table__header"
+    ],
+    [
+        "headerCell",
+        "seed-data-table__headerCell"
+    ],
+    [
+        "headerCellInner",
+        "seed-data-table__headerCellInner"
+    ],
+    [
+        "headerCellLabel",
+        "seed-data-table__headerCellLabel"
+    ],
+    [
+        "headerCellIcon",
+        "seed-data-table__headerCellIcon"
+    ],
+    [
+        "row",
+        "seed-data-table__row"
+    ],
+    [
+        "cell",
+        "seed-data-table__cell"
+    ],
+    [
+        "entity",
+        "seed-data-table__entity"
+    ],
+    [
+        "entityName",
+        "seed-data-table__entityName"
+    ],
+    [
+        "tagList",
+        "seed-data-table__tagList"
+    ],
+    [
+        "link",
+        "seed-data-table__link"
+    ],
+    [
+        "toolbar",
+        "seed-data-table__toolbar"
+    ],
+    [
+        "search",
+        "seed-data-table__search"
+    ],
+    [
+        "count",
+        "seed-data-table__count"
+    ],
+    [
+        "toolbarEnd",
+        "seed-data-table__toolbarEnd"
+    ],
+    [
+        "scrollArea",
+        "seed-data-table__scrollArea"
+    ],
+    [
+        "footer",
+        "seed-data-table__footer"
+    ],
+    [
+        "footerCell",
+        "seed-data-table__footerCell"
+    ],
+    [
+        "emptyState",
+        "seed-data-table__emptyState"
+    ],
+    [
+        "loadingState",
+        "seed-data-table__loadingState"
+    ],
+    [
+        "addRow",
+        "seed-data-table__addRow"
+    ],
+    [
+        "addRowCell",
+        "seed-data-table__addRowCell"
+    ],
+    [
+        "selectionCell",
+        "seed-data-table__selectionCell"
+    ]
+];
+const defaultVariant$4 = {
+    "surface": "card",
+    "interactive": false
+};
+const compoundVariants$4 = [];
+const dataTableVariantMap = {
+    "surface": [
+        "card",
+        "bleed"
+    ],
+    "interactive": [
+        true,
+        false
+    ]
+};
+function dataTable(props) {
+    return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
+        return [
+            slot,
+            createClassName(className, mergeVariants(defaultVariant$4, props), compoundVariants$4)
+        ];
+    }));
 }
-////////////////////////////////////////////////////////////////////////////////////
-// -- editor: "reference" / "actor" -- same picker, search-enabled, each option
-//    carrying a small avatar (a photo for a real one, a generic person glyph for
-//    none) -- `actor` is `reference` over people specifically (crisp's own #449/
-//    #432 `ReferenceCell` shape), so the two share one component; only the search
-//    placeholder differs. Seed's `Select` has no built-in search combobox (unlike
-//    crisp's own `Select`), so this filters `refOptions` itself against a small
-//    `TextField` rendered as the content's own first row. --------------------------
-function ReferenceEditor({ column, value, pending, onCommit, onCancel }) {
+Object.assign(dataTable, {
+    splitVariantProps: (props)=>splitVariantProps(props, dataTableVariantMap)
+}); // @recipe(seed): data-table
+
+// The one `createSlotRecipeContext(dataTable)` call every sibling file in this
+// directory shares -- `ClassNamesProvider` and `withContext` must be the SAME
+// binding everywhere (a slot component built from a second, independent call would
+// read a DIFFERENT React context and never see the classNames `DataTableInner`
+// provides), so this is the one place that calls `createSlotRecipeContext`, and every
+// other file (`DataTable.tsx`, `column-menu.tsx`, `resize.tsx`, `column-calc.tsx`,
+// `toolbar.tsx`, `body-cells.tsx`, `editors.tsx`) imports its exports from here rather
+// than re-deriving its own.
+const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$1, useClassNames: useClassNames$1 } = createSlotRecipeContext(dataTable);
+
+/**
+ * The pure filter itself, split out of `useSelectSearch` below so it can be
+ * mutation-tested directly (the same "small pure function beside its own test" shape
+ * `filtering.ts`'s `matchesSearch`/`getColumnValue` already use in this directory) --
+ * case-insensitive substring match, on whitespace-trimmed input. An empty/whitespace-
+ * only query returns `options` unfiltered rather than matching nothing, the same
+ * "no query yet" case crisp's own `select.tsx` special-cases (`searchable && q`).
+ */ function filterSelectOptions(options, query, getText) {
+    const q = query.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter((option)=>getText(option).toLowerCase().includes(q));
+}
+/**
+ * Filters `options` by `getText(option)` against a live query string -- the one
+ * concern every searchable Select popover shares (crisp's own `select.tsx` computes
+ * this inline; this hook is `filterSelectOptions` above plus the query state it reads,
+ * kept generic over `T` so it works for `DataTableEditOption` today and a future
+ * filter-value picker's own option shape without a second copy of the same filter).
+ */ function useSelectSearch(options, getText) {
     const [query, setQuery] = React.useState("");
-    const options = column.refOptions ?? [];
-    const filtered = query.trim() ? options.filter((option)=>option.label.toLowerCase().includes(query.trim().toLowerCase())) : options;
-    const current = value == null ? "" : String(value);
-    const isActor = column.editor === "actor";
-    return /*#__PURE__*/ jsxs(SelectRoot, {
-        // See `SelectEditor`'s own comment above -- same controlled-open wiring.
-        open: true,
-        onOpenChange: (next)=>{
-            if (!next) onCancel();
+    const filtered = React.useMemo(()=>filterSelectOptions(options, query, getText), [
+        options,
+        query,
+        getText
+    ]);
+    return {
+        query,
+        setQuery,
+        filtered
+    };
+}
+/**
+ * The search box itself -- crisp's own top-of-listbox filter field
+ * (`select.tsx`'s `crisp-select-search`), styled with the SAME compact chrome
+ * `toolbar.tsx`'s `SearchBox` already standardized for the table's own toolbar search
+ * (seed's real `text-input.ts` outline-variant tokens, via the `dataTable` recipe's
+ * own `search` slot -- not seed's documented `TextField`, measured too heavy for a
+ * ~32px inline control; see `SearchBox`'s own comment for that measurement). Reusing
+ * the SAME recipe slot here, rather than standing up a second near-identical one,
+ * keeps every "small bordered search input" in this package pixel-identical by
+ * construction -- the slot's `max-width: 280px` (a toolbar-row layout constraint, not
+ * chrome) is overridden inline since this field fills its popover instead.
+ *
+ * Swallows every keydown except Escape before it can reach seed's own listbox
+ * (`SelectContent`'s typeahead-by-keyboard): a search field that ALSO drives the
+ * listbox's letter-jump would fight the query it is supposed to be typing into. Escape
+ * passes through untouched -- `SelectRoot`'s own `onOpenChange` (in every caller) is
+ * what actually closes the editor on Escape, not a handler on this field.
+ *
+ * `autoFocus` is applied imperatively (an effect + ref), not the native `autoFocus`
+ * attribute -- lint (`a11y/noAutofocus`) bars that on a raw `<input>`, and this is the
+ * same ref-and-focus shape crisp's own `select.tsx` already uses for its search field
+ * (`searchRef.current?.focus({ preventScroll: true })` on open), not a workaround
+ * invented for the lint rule.
+ */ function SelectSearchField({ value, onChange, placeholder, "aria-label": ariaLabel, autoFocus, onKeyDown }) {
+    const classNames = dataTable();
+    const inputRef = React.useRef(null);
+    React.useEffect(()=>{
+        if (autoFocus) inputRef.current?.focus({
+            preventScroll: true
+        });
+    }, [
+        autoFocus
+    ]);
+    return /*#__PURE__*/ jsxs("span", {
+        className: classNames.search,
+        style: {
+            display: "flex",
+            maxWidth: "none",
+            margin: 4
         },
-        disabled: pending,
-        value: current ? [
-            current
-        ] : [],
-        onValueChange: (next)=>onCommit(next[0] ?? ""),
         children: [
-            /*#__PURE__*/ jsxs(SelectTrigger, {
-                "aria-label": `Edit ${column.key}`,
-                children: [
-                    /*#__PURE__*/ jsx(SelectValue, {}),
-                    /*#__PURE__*/ jsx(SelectPlaceholder, {
-                        children: isActor ? "Assign…" : "Select…"
-                    }),
-                    /*#__PURE__*/ jsx(SelectSuffixIcon, {
-                        svg: /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {})
-                    })
-                ]
+            /*#__PURE__*/ jsx(IconMagnifyingglassLine_default, {
+                "aria-hidden": "true"
             }),
-            /*#__PURE__*/ jsx(SelectPositioner, {
-                children: /*#__PURE__*/ jsxs(SelectContent, {
-                    children: [
-                        /*#__PURE__*/ jsx(TextFieldRoot, {
-                            size: "medium",
-                            style: {
-                                margin: 4
-                            },
-                            onKeyDown: (event)=>{
-                                // The listbox's own typeahead/arrow handling lives on THIS field's
-                                // sibling items, not on the field itself -- stop everything except
-                                // Escape from also driving the listbox's own keyboard nav. Escape
-                                // itself needs no special-casing to "reach" anything any more: it's
-                                // SelectContent's own `DismissibleLayer` (Select.tsx) that closes the
-                                // listbox, and that dismissal is a document-level listener outside
-                                // this React subtree entirely -- a synthetic `stopPropagation` here
-                                // was never able to block it either way, so the controlled `open`
-                                // above (via `onOpenChange`) is what actually ends this cell's edit.
-                                if (event.key !== "Escape") event.stopPropagation();
-                            },
-                            children: /*#__PURE__*/ jsx(TextFieldInput, {
-                                autoFocus: true,
-                                "aria-label": isActor ? "Search people" : `Search ${column.key}`,
-                                placeholder: isActor ? "Search people…" : "Search…",
-                                value: query,
-                                onChange: (event)=>setQuery(event.target.value)
-                            })
-                        }),
-                        /*#__PURE__*/ jsxs(SelectScrollArea, {
-                            children: [
-                                filtered.length === 0 && /*#__PURE__*/ jsx("div", {
-                                    style: {
-                                        padding: "6px 12px",
-                                        opacity: 0.63,
-                                        fontSize: 13
-                                    },
-                                    children: isActor ? "No users" : "No results"
-                                }),
-                                filtered.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
-                                        value: option.value,
-                                        label: option.label,
-                                        children: [
-                                            /*#__PURE__*/ jsxs(SelectItemBody, {
-                                                children: [
-                                                    /*#__PURE__*/ jsx(ReferenceAvatar, {
-                                                        avatar: option.avatar
-                                                    }),
-                                                    /*#__PURE__*/ jsx(SelectItemLabel, {})
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(SelectItemIndicator, {
-                                                selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
-                                            })
-                                        ]
-                                    }, option.value))
-                            ]
-                        })
-                    ]
-                })
+            /*#__PURE__*/ jsx("input", {
+                ref: inputRef,
+                type: "text",
+                value: value,
+                onChange: (event)=>onChange(event.target.value),
+                placeholder: placeholder,
+                "aria-label": ariaLabel ?? placeholder,
+                onClick: (event)=>event.stopPropagation(),
+                onKeyDown: (event)=>{
+                    if (event.key !== "Escape") event.stopPropagation();
+                    onKeyDown?.(event);
+                }
             })
         ]
     });
 }
-function ReferenceAvatar({ avatar }) {
+/** The empty state shown when a search matches nothing -- crisp's own `searchable`
+ *  `emptyLabel` (`crisp-select-empty`), reproduced at the same inset/opacity/size the
+ *  ad-hoc `ReferenceEditor` "No users"/"No results" row already used before this file
+ *  existed. */ function SelectSearchEmpty({ children }) {
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            padding: "6px 12px",
+            opacity: 0.63,
+            fontSize: 13
+        },
+        children: children
+    });
+}
+
+/** The raw value a live editor reads, distinct from `DataTableColumn.value` (the
+ *  accessor sort/search/filter/export share): `editValue` returns whatever TYPE the
+ *  editor itself expects -- a real `boolean` for `editor: "switch"`/`type:
+ *  "checkbox"`, a `number` for `type: "rating"`, the option's own string for `select`/
+ *  `reference`/`actor` -- where `value`/`render` may format that same field for
+ *  display. Falls back to the table's own accessor when the column supplies none. */ function resolveEditValue(column, row, fallback) {
+    return column.editValue ? column.editValue(row) : fallback;
+}
+function EditPendingIndicator() {
+    return /*#__PURE__*/ jsxs("svg", {
+        className: "seed-data-table-edit-pending",
+        width: 14,
+        height: 14,
+        viewBox: "0 0 16 16",
+        fill: "none",
+        role: "presentation",
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                cx: 8,
+                cy: 8,
+                r: 6.5,
+                stroke: "currentColor",
+                strokeOpacity: 0.25,
+                strokeWidth: 2
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M14.5 8a6.5 6.5 0 0 0-6.5-6.5",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round"
+            })
+        ]
+    });
+}
+function EditError({ message }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: "seed-data-table-edit-error",
+        children: message
+    });
+}
+////////////////////////////////////////////////////////////////////////////////////
+// -- plain editable: text/number (seed TextField) and date/datetime (a native input,
+//    styled the same way, per `cellType`) -- both double-click gated, Enter/blur
+//    commits, Escape cancels. -------------------------------------------------------
+function TextEditor({ column, value, pending, onCommit, onCancel }) {
+    const [draft, setDraft] = React.useState(()=>value == null ? "" : String(value));
+    return(// `size="medium"` (seed's smallest fixed `TextField` size, 40px min-height,
+    // `text-input.ts`'s own token) -- the default `size="large"` overflowed a 36px
+    // table row (same class of fix as `toolbar.tsx`'s `SearchBox`, which made the
+    // same call for its own 32px-ish search box).
+    /*#__PURE__*/ jsx(TextFieldRoot, {
+        size: "medium",
+        style: {
+            width: "100%"
+        },
+        onClick: (event)=>event.stopPropagation(),
+        onKeyDown: (event)=>event.stopPropagation(),
+        children: /*#__PURE__*/ jsx(TextFieldInput, {
+            autoFocus: true,
+            type: column.cellType === "number" ? "number" : "text",
+            "aria-label": `Edit ${column.key}`,
+            value: draft,
+            disabled: pending,
+            onChange: (event)=>setDraft(event.target.value),
+            onBlur: ()=>onCommit(draft),
+            onKeyDown: (event)=>{
+                if (event.key === "Enter") onCommit(draft);
+                else if (event.key === "Escape") onCancel();
+            }
+        })
+    }));
+}
+function DateEditor({ column, value, pending, onCommit, onCancel }) {
+    const isDateTime = column.cellType === "datetime";
+    const [draft, setDraft] = React.useState(()=>isDateTime ? toDateTimeInputValue(value) : toDateInputValue(value));
+    return(// See `TextEditor`'s own comment above -- same `size="medium"` fix.
+    /*#__PURE__*/ jsx(TextFieldRoot, {
+        size: "medium",
+        style: {
+            width: "100%"
+        },
+        onClick: (event)=>event.stopPropagation(),
+        onKeyDown: (event)=>event.stopPropagation(),
+        children: /*#__PURE__*/ jsx(TextFieldInput, {
+            autoFocus: true,
+            type: isDateTime ? "datetime-local" : "date",
+            "aria-label": `Edit ${column.key}`,
+            value: draft,
+            disabled: pending,
+            onChange: (event)=>setDraft(event.target.value),
+            onBlur: ()=>onCommit(draft),
+            onKeyDown: (event)=>{
+                if (event.key === "Enter") onCommit(draft);
+                else if (event.key === "Escape") onCancel();
+            }
+        })
+    }));
+}
+////////////////////////////////////////////////////////////////////////////////////
+// -- editor: "select" -- double-click opens seed's own Select, auto-opened (seed's
+//    `SelectRoot` takes `defaultOpen` directly -- unlike crisp's closed-API `Select`,
+//    which needs a synthetic click on its own trigger to start open). A long option
+//    list gets crisp's own search-on-top (`select-search.tsx`) for free, past
+//    `SELECT_EDITOR_SEARCH_THRESHOLD` -- fewer options than that and a filter field
+//    is pure noise above a list you can already scan (crisp's own `searchable` is
+//    opt-in for the identical reason); `column.editorSearchable` overrides either way.
+/** Above this many options, `SelectEditor` turns its search field on by default --
+ *  below it, a filter box adds more chrome than it saves (nothing here claims this
+ *  exact number is measured; it is a judgment call, which is why `editorSearchable`
+ *  exists to override it either direction). */ const SELECT_EDITOR_SEARCH_THRESHOLD = 8;
+function SelectEditor({ column, value, pending, onCommit, onCancel }) {
+    const options = column.options ?? [];
+    const current = value == null ? "" : String(value);
+    const searchable = column.editorSearchable ?? options.length > SELECT_EDITOR_SEARCH_THRESHOLD;
+    const { query, setQuery, filtered } = useSelectSearch(options, (option)=>option.label);
+    const visible = searchable ? filtered : options;
+    return /*#__PURE__*/ jsxs(SelectRoot, {
+        // Controlled open, per docs/examples/react/select/controlled-open.tsx --
+        // this editor is only ever mounted while the cell IS editing, so it always
+        // wants to start (and stay) open; `onOpenChange(false)` is what tells us
+        // the popover wants to close for ANY reason (Escape, an outside click, OR
+        // the internal auto-close a single-select commit already triggers), so
+        // `onCancel` alone now covers the Escape gap the old raw `document`
+        // listener existed for, without a second, independent listener.
+        open: true,
+        onOpenChange: (next)=>{
+            if (!next) onCancel();
+        },
+        disabled: pending,
+        value: current ? [
+            current
+        ] : [],
+        onValueChange: (next)=>onCommit(next[0] ?? ""),
+        children: [
+            /*#__PURE__*/ jsxs(SelectTrigger, {
+                "aria-label": `Edit ${column.key}`,
+                children: [
+                    /*#__PURE__*/ jsx(SelectValue, {}),
+                    /*#__PURE__*/ jsx(SelectPlaceholder, {
+                        children: "Select…"
+                    }),
+                    /*#__PURE__*/ jsx(SelectSuffixIcon, {
+                        svg: /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(SelectPositioner, {
+                children: /*#__PURE__*/ jsxs(SelectContent, {
+                    children: [
+                        searchable && /*#__PURE__*/ jsx(SelectSearchField, {
+                            autoFocus: true,
+                            value: query,
+                            onChange: setQuery,
+                            placeholder: column.editorSearchPlaceholder ?? "Search…",
+                            "aria-label": `Search ${column.key}`
+                        }),
+                        /*#__PURE__*/ jsxs(SelectScrollArea, {
+                            children: [
+                                searchable && visible.length === 0 && /*#__PURE__*/ jsx(SelectSearchEmpty, {
+                                    children: column.editorEmptyLabel ?? "No results"
+                                }),
+                                visible.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
+                                        value: option.value,
+                                        label: option.label,
+                                        children: [
+                                            /*#__PURE__*/ jsx(SelectItemBody, {
+                                                children: /*#__PURE__*/ jsx(SelectItemLabel, {})
+                                            }),
+                                            /*#__PURE__*/ jsx(SelectItemIndicator, {
+                                                selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
+                                            })
+                                        ]
+                                    }, option.value))
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+////////////////////////////////////////////////////////////////////////////////////
+// -- editor: "reference" / "actor" -- same picker, ALWAYS search-enabled (unlike
+//    `SelectEditor`'s threshold -- a reference/actor list is people/records, search
+//    is the point regardless of how few there are today), each option carrying a
+//    small avatar (a photo for a real one, a generic person glyph for none) --
+//    `actor` is `reference` over people specifically (crisp's own #449/#432
+//    `ReferenceCell` shape), so the two share one component; only the search
+//    placeholder/empty copy differs. Seed's `Select` has no built-in search combobox
+//    (unlike crisp's own `Select`), so this uses the shared `select-search.tsx`
+//    field/hook -- the same one `SelectEditor` above uses -- rather than its own
+//    copy of the query/filter/empty triangle. --------------------------------------
+function ReferenceEditor({ column, value, pending, onCommit, onCancel }) {
+    const options = column.refOptions ?? [];
+    const { query, setQuery, filtered } = useSelectSearch(options, (option)=>option.label);
+    const current = value == null ? "" : String(value);
+    const isActor = column.editor === "actor";
+    return /*#__PURE__*/ jsxs(SelectRoot, {
+        // See `SelectEditor`'s own comment above -- same controlled-open wiring.
+        open: true,
+        onOpenChange: (next)=>{
+            if (!next) onCancel();
+        },
+        disabled: pending,
+        value: current ? [
+            current
+        ] : [],
+        onValueChange: (next)=>onCommit(next[0] ?? ""),
+        children: [
+            /*#__PURE__*/ jsxs(SelectTrigger, {
+                "aria-label": `Edit ${column.key}`,
+                children: [
+                    /*#__PURE__*/ jsx(SelectValue, {}),
+                    /*#__PURE__*/ jsx(SelectPlaceholder, {
+                        children: isActor ? "Assign…" : "Select…"
+                    }),
+                    /*#__PURE__*/ jsx(SelectSuffixIcon, {
+                        svg: /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(SelectPositioner, {
+                children: /*#__PURE__*/ jsxs(SelectContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(SelectSearchField, {
+                            autoFocus: true,
+                            value: query,
+                            onChange: setQuery,
+                            placeholder: column.refSearchPlaceholder ?? (isActor ? "Search people…" : "Search…"),
+                            "aria-label": isActor ? "Search people" : `Search ${column.key}`
+                        }),
+                        /*#__PURE__*/ jsxs(SelectScrollArea, {
+                            children: [
+                                filtered.length === 0 && /*#__PURE__*/ jsx(SelectSearchEmpty, {
+                                    children: column.refEmptyLabel ?? (isActor ? "No users" : "No results")
+                                }),
+                                filtered.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
+                                        value: option.value,
+                                        label: option.label,
+                                        children: [
+                                            /*#__PURE__*/ jsxs(SelectItemBody, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx(ReferenceAvatar, {
+                                                        avatar: option.avatar
+                                                    }),
+                                                    /*#__PURE__*/ jsx(SelectItemLabel, {})
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsx(SelectItemIndicator, {
+                                                selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
+                                            })
+                                        ]
+                                    }, option.value))
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function ReferenceAvatar({ avatar }) {
     return /*#__PURE__*/ jsxs(AvatarRoot, {
         size: "20",
         children: [
@@ -3162,20 +3773,16 @@ function RatingEditor({ column, value, pending, onCommit }) {
     return column.editor === "switch" || column.type === "rating" || column.type === "checkbox";
 }
 function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast }) {
-    const effective = useEffectiveColumns(columns);
+    const effective = useEffectiveColumns(columns, {
+        selectable,
+        stickyFirst
+    });
     const { startEdit } = useDataTableContext();
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map(({ column }, index)=>{
-            const isFirst = index === 0;
+        children: effective.map((entry, index)=>{
+            const { column } = entry;
             const isLast = index === effective.length - 1;
-            const sticky = stickyProps({
-                selectable,
-                stickyFirst,
-                stickyLast,
-                isSelectionCell: false,
-                isFirst,
-                isLast
-            });
+            const sticky = pinnedCellProps(entry, stickyLast, isLast);
             // A gated `editable` column (everything except the always-live widgets)
             // opens on double-click -- Attio's own measured gesture (crisp's #411),
             // matched here rather than a single click, which stays "select this cell"
@@ -3351,7 +3958,7 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
     }
 }
 
-const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$1, useClassNames: useClassNames$1 } = createSlotRecipeContext(menu);
+const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(menu);
 const { PropsProvider: ItemPropsProvider, useProps: useItemProps, withContext: withItemContext, ClassNamesProvider: ItemClassNamesProvider } = createSlotRecipeContext(menuItem);
 const withStateProps = createWithStateProps([
     useMenuContext
@@ -3362,7 +3969,7 @@ const withItemStateProps = createWithStateProps([
 const MenuRoot = (props)=>{
     const [variantProps, otherProps] = menu.splitVariantProps(props);
     const classNames = menu(variantProps);
-    return /*#__PURE__*/ jsx(ClassNamesProvider$1, {
+    return /*#__PURE__*/ jsx(ClassNamesProvider, {
         value: classNames,
         children: /*#__PURE__*/ jsx(ItemPropsProvider, {
             value: {
@@ -3377,7 +3984,7 @@ const MenuRoot = (props)=>{
 Menu.Anchor;
 const MenuTrigger = Menu.Trigger;
 const MenuPositioner = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
-    const classNames = useClassNames$1();
+    const classNames = useClassNames();
     return /*#__PURE__*/ jsx(Menu.Positioner, {
         ref: ref,
         className: clsx(classNames.positioner, className),
@@ -3385,10 +3992,10 @@ const MenuPositioner = /*#__PURE__*/ React.forwardRef(({ className, ...props },
     });
 });
 MenuPositioner.displayName = "MenuPositioner";
-const MenuContent = withContext$1(Menu.Content, "content");
-const MenuScrollArea = withContext$1(withStateProps(Primitive.div), "scrollArea");
-withContext$1(Menu.Group, "group");
-withContext$1(Menu.GroupLabel, "groupLabel");
+const MenuContent = withContext(Menu.Content, "content");
+const MenuScrollArea = withContext(withStateProps(Primitive.div), "scrollArea");
+withContext(Menu.Group, "group");
+withContext(Menu.GroupLabel, "groupLabel");
 const MenuItem = /*#__PURE__*/ React.forwardRef(({ className: propClassName, ...props }, ref)=>{
     const [variantProps, otherProps] = menuItem.splitVariantProps(props);
     const parentProps = useItemProps();
@@ -3411,19 +4018,15 @@ const MenuItemLabel = withItemContext(withItemStateProps(Primitive.span), "label
 withItemContext(withItemStateProps(Primitive.span), "description");
 
 function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast }) {
-    const effective = useEffectiveColumns(columns);
+    const effective = useEffectiveColumns(columns, {
+        selectable,
+        stickyFirst
+    });
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map(({ column }, index)=>{
-            const isFirst = index === 0;
+        children: effective.map((entry, index)=>{
+            const { column } = entry;
             const isLast = index === effective.length - 1;
-            const sticky = stickyProps({
-                selectable,
-                stickyFirst,
-                stickyLast,
-                isSelectionCell: false,
-                isFirst,
-                isLast
-            });
+            const sticky = pinnedCellProps(entry, stickyLast, isLast);
             return /*#__PURE__*/ jsx(DataTableFooterCell, {
                 "data-sticky": sticky["data-sticky"],
                 "data-sticky-edge": sticky["data-sticky-edge"],
@@ -3607,20 +4210,16 @@ const DEFAULT_SORT_ICON = {
  *  `visibleColumnOrder`/labels/widths change, without also re-deriving `sortedData`'s
  *  render above it. */ function ColumnHeaderCells({ columns, columnMenu, reorderable, resizable, sortIcon, selectable, stickyFirst, stickyLast }) {
     const { draggingColumnKey, beginColumnDrag, dragOverColumn, endColumnDrag } = useDataTableContext();
-    const effective = useEffectiveColumns(columns);
+    const effective = useEffectiveColumns(columns, {
+        selectable,
+        stickyFirst
+    });
     const [renamingKey, setRenamingKey] = React.useState(null);
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map(({ column, label, width }, index)=>{
-            const isFirst = index === 0;
+        children: effective.map((entry, index)=>{
+            const { column, label, width } = entry;
             const isLast = index === effective.length - 1;
-            const sticky = stickyProps({
-                selectable,
-                stickyFirst,
-                stickyLast,
-                isSelectionCell: false,
-                isFirst,
-                isLast
-            });
+            const sticky = pinnedCellProps(entry, stickyLast, isLast);
             return /*#__PURE__*/ jsxs(DataTableHeaderCell, {
                 columnKey: column.key,
                 sortable: column.sortable,
@@ -3689,304 +4288,130 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
         // The menu's close restores focus to its trigger one frame after this input
         // mounts, stealing focus from `autoFocus`. Re-grab it in the SAME frame (after
         // the restore) and select the text, so the user can type/replace immediately.
-        const frame = requestAnimationFrame(()=>{
-            readyRef.current = true;
-            inputRef.current?.focus();
-            inputRef.current?.select();
-        });
-        return ()=>cancelAnimationFrame(frame);
-    }, []);
-    const commit = ()=>{
-        if (value.trim()) renameColumn(column.key, value.trim());
-        onDone();
-    };
-    return(// A bare, minimal input -- NOT seed's `TextField` (its labeled root measures
-    // ~52px tall, per DATATABLE-ATTIO-SPEC.md's own note; this has to fit a 40px
-    // header cell with no label/description chrome of its own). Seed has no lighter
-    // input primitive at this level, so this follows crisp's own measured
-    // `.crisp-datatable-th-rename` (`datatable.recipe.ts`) instead: full-width,
-    // header-row height, a small inset, no border (an inset brand-solid box-shadow
-    // stands in for a focus ring), the header's own font weight/size inherited
-    // rather than a new size introduced for one input.
-    /*#__PURE__*/ jsx("input", {
-        ref: inputRef,
-        // biome-ignore lint/a11y/noAutofocus: opening this input IS the user's own click a moment earlier (crisp's `.crisp-datatable-th-rename` does the same), not an unannounced page-load autofocus.
-        autoFocus: true,
-        "aria-label": `Rename ${initialLabel}`,
-        value: value,
-        onClick: (event)=>event.stopPropagation(),
-        onChange: (event)=>setValue(event.target.value),
-        onBlur: ()=>{
-            if (readyRef.current) commit();
-        },
-        onKeyDown: (event)=>{
-            event.stopPropagation();
-            if (event.key === "Enter") commit();
-            if (event.key === "Escape") onDone();
-        },
-        // Bare inline input: no border/ring/background/radius -- it reads as the
-        // header label made editable in place, not a boxed field.
-        style: {
-            width: "100%",
-            minWidth: 0,
-            height: "100%",
-            margin: 0,
-            padding: 0,
-            border: "none",
-            borderRadius: 0,
-            background: "transparent",
-            boxShadow: "none",
-            font: "inherit",
-            fontWeight: "var(--seed-font-weight-medium)",
-            color: "var(--seed-color-fg-neutral)",
-            outline: "none"
-        }
-    }));
-}
-/** The per-column header menu (rename / hide / move left / move right) -- seed
- *  `Menu`, opened from the same `headerCellIcon` slot the filter trigger and sort
- *  chevron already share. Hover/focus-reveal (`data-column-menu`'s own CSS in
- *  `data-table.ts`) -- crisp's own header shows the trigger only on hover, not
- *  permanently, so this one carries its own marker attribute distinct from that
- *  slot's OTHER occupants (the sort chevron, the filter trigger), which stay visible
- *  under their own separate rules regardless of hover. */ function ColumnMenu({ column, onRename }) {
-    const { moveColumn, hideColumn } = useDataTableContext();
-    const columnLabel = typeof column.header === "string" ? column.header : column.key;
-    const stopPropagation = (event)=>event.stopPropagation();
-    return /*#__PURE__*/ jsxs(MenuRoot, {
-        children: [
-            /*#__PURE__*/ jsx(DataTableHeaderCellIcon, {
-                asChild: true,
-                "data-column-menu": "",
-                onClick: stopPropagation,
-                onKeyDown: stopPropagation,
-                draggable: false,
-                children: /*#__PURE__*/ jsx(MenuTrigger, {
-                    "aria-label": `${columnLabel} column menu`,
-                    children: /*#__PURE__*/ jsx(IconDot3HorizontalLine_default, {
-                        size: 16
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx(MenuPositioner, {
-                children: /*#__PURE__*/ jsx(MenuContent, {
-                    style: {
-                        minWidth: 160
-                    },
-                    children: /*#__PURE__*/ jsxs(MenuScrollArea, {
-                        children: [
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: onRename,
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Rename"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>moveColumn(column.key, "left"),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Move left"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>moveColumn(column.key, "right"),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Move right"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>hideColumn(column.key),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Hide column"
-                                })
-                            })
-                        ]
-                    })
-                })
-            })
-        ]
-    });
-}
-
-__insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
-
-const createClassName = (className, variants, compoundVariants = [])=>{
-    const variantKeys = Object.keys(variants);
-    const variantValues = variantKeys.map((key)=>variants[key]);
-    const variantClassName = variantKeys.map((key, index)=>`${className}--${key}_${variantValues[index]}`).join(" ");
-    const compountVariantClassName = compoundVariants.filter((compoundVariant)=>Object.keys(compoundVariant).every((key)=>compoundVariant[key] === variants[key])).map((compoundVariant)=>`${className}--${Object.keys(compoundVariant).map((key)=>{
-            return `${key}_${compoundVariant[key]}`;
-        }).join("-")}`).join(" ");
-    return [
-        className,
-        variantClassName,
-        compountVariantClassName
-    ].filter(Boolean).join(" ");
-};
-function mergeVariants(a, b) {
-    const result = {
-        ...a
-    };
-    for(const k in b){
-        if (b[k] != null) {
-            result[k] = b[k];
-        }
-    }
-    return result;
-}
-function splitVariantProps(props, variantMap) {
-    const variantProps = {};
-    const otherProps = {};
-    for(const key in props){
-        if (variantMap[key] != null) {
-            variantProps[key] = props[key];
-        } else {
-            otherProps[key] = props[key];
-        }
-    }
-    return [
-        variantProps,
-        otherProps
-    ];
-}
-
-const dataTableSlotNames = [
-    [
-        "root",
-        "seed-data-table__root"
-    ],
-    [
-        "table",
-        "seed-data-table__table"
-    ],
-    [
-        "header",
-        "seed-data-table__header"
-    ],
-    [
-        "headerCell",
-        "seed-data-table__headerCell"
-    ],
-    [
-        "headerCellInner",
-        "seed-data-table__headerCellInner"
-    ],
-    [
-        "headerCellLabel",
-        "seed-data-table__headerCellLabel"
-    ],
-    [
-        "headerCellIcon",
-        "seed-data-table__headerCellIcon"
-    ],
-    [
-        "row",
-        "seed-data-table__row"
-    ],
-    [
-        "cell",
-        "seed-data-table__cell"
-    ],
-    [
-        "entity",
-        "seed-data-table__entity"
-    ],
-    [
-        "entityName",
-        "seed-data-table__entityName"
-    ],
-    [
-        "tagList",
-        "seed-data-table__tagList"
-    ],
-    [
-        "link",
-        "seed-data-table__link"
-    ],
-    [
-        "toolbar",
-        "seed-data-table__toolbar"
-    ],
-    [
-        "search",
-        "seed-data-table__search"
-    ],
-    [
-        "count",
-        "seed-data-table__count"
-    ],
-    [
-        "toolbarEnd",
-        "seed-data-table__toolbarEnd"
-    ],
-    [
-        "scrollArea",
-        "seed-data-table__scrollArea"
-    ],
-    [
-        "footer",
-        "seed-data-table__footer"
-    ],
-    [
-        "footerCell",
-        "seed-data-table__footerCell"
-    ],
-    [
-        "emptyState",
-        "seed-data-table__emptyState"
-    ],
-    [
-        "loadingState",
-        "seed-data-table__loadingState"
-    ],
-    [
-        "addRow",
-        "seed-data-table__addRow"
-    ],
-    [
-        "addRowCell",
-        "seed-data-table__addRowCell"
-    ],
-    [
-        "selectionCell",
-        "seed-data-table__selectionCell"
-    ]
-];
-const defaultVariant$4 = {
-    "surface": "card",
-    "interactive": false
-};
-const compoundVariants$4 = [];
-const dataTableVariantMap = {
-    "surface": [
-        "card",
-        "bleed"
-    ],
-    "interactive": [
-        true,
-        false
-    ]
-};
-function dataTable(props) {
-    return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
-        return [
-            slot,
-            createClassName(className, mergeVariants(defaultVariant$4, props), compoundVariants$4)
-        ];
+        const frame = requestAnimationFrame(()=>{
+            readyRef.current = true;
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        });
+        return ()=>cancelAnimationFrame(frame);
+    }, []);
+    const commit = ()=>{
+        if (value.trim()) renameColumn(column.key, value.trim());
+        onDone();
+    };
+    return(// A bare, minimal input -- NOT seed's `TextField` (its labeled root measures
+    // ~52px tall, per DATATABLE-ATTIO-SPEC.md's own note; this has to fit a 40px
+    // header cell with no label/description chrome of its own). Seed has no lighter
+    // input primitive at this level, so this follows crisp's own measured
+    // `.crisp-datatable-th-rename` (`datatable.recipe.ts`) instead: full-width,
+    // header-row height, a small inset, no border (an inset brand-solid box-shadow
+    // stands in for a focus ring), the header's own font weight/size inherited
+    // rather than a new size introduced for one input.
+    /*#__PURE__*/ jsx("input", {
+        ref: inputRef,
+        // biome-ignore lint/a11y/noAutofocus: opening this input IS the user's own click a moment earlier (crisp's `.crisp-datatable-th-rename` does the same), not an unannounced page-load autofocus.
+        autoFocus: true,
+        "aria-label": `Rename ${initialLabel}`,
+        value: value,
+        onClick: (event)=>event.stopPropagation(),
+        onChange: (event)=>setValue(event.target.value),
+        onBlur: ()=>{
+            if (readyRef.current) commit();
+        },
+        onKeyDown: (event)=>{
+            event.stopPropagation();
+            if (event.key === "Enter") commit();
+            if (event.key === "Escape") onDone();
+        },
+        // Bare inline input: no border/ring/background/radius -- it reads as the
+        // header label made editable in place, not a boxed field.
+        style: {
+            width: "100%",
+            minWidth: 0,
+            height: "100%",
+            margin: 0,
+            padding: 0,
+            border: "none",
+            borderRadius: 0,
+            background: "transparent",
+            boxShadow: "none",
+            font: "inherit",
+            fontWeight: "var(--seed-font-weight-medium)",
+            color: "var(--seed-color-fg-neutral)",
+            outline: "none"
+        }
     }));
 }
-Object.assign(dataTable, {
-    splitVariantProps: (props)=>splitVariantProps(props, dataTableVariantMap)
-}); // @recipe(seed): data-table
-
-// The one `createSlotRecipeContext(dataTable)` call every sibling file in this
-// directory shares -- `ClassNamesProvider` and `withContext` must be the SAME
-// binding everywhere (a slot component built from a second, independent call would
-// read a DIFFERENT React context and never see the classNames `DataTableInner`
-// provides), so this is the one place that calls `createSlotRecipeContext`, and every
-// other file (`DataTable.tsx`, `column-menu.tsx`, `resize.tsx`, `column-calc.tsx`,
-// `toolbar.tsx`, `body-cells.tsx`, `editors.tsx`) imports its exports from here rather
-// than re-deriving its own.
-const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(dataTable);
+/** The per-column header menu (rename / hide / move left / move right) -- seed
+ *  `Menu`, opened from the same `headerCellIcon` slot the filter trigger and sort
+ *  chevron already share. Hover/focus-reveal (`data-column-menu`'s own CSS in
+ *  `data-table.ts`) -- crisp's own header shows the trigger only on hover, not
+ *  permanently, so this one carries its own marker attribute distinct from that
+ *  slot's OTHER occupants (the sort chevron, the filter trigger), which stay visible
+ *  under their own separate rules regardless of hover. */ function ColumnMenu({ column, onRename }) {
+    const { moveColumn, hideColumn, isColumnPinned, togglePinColumn } = useDataTableContext();
+    const columnLabel = typeof column.header === "string" ? column.header : column.key;
+    const pinned = isColumnPinned(column.key);
+    const stopPropagation = (event)=>event.stopPropagation();
+    return /*#__PURE__*/ jsxs(MenuRoot, {
+        children: [
+            /*#__PURE__*/ jsx(DataTableHeaderCellIcon, {
+                asChild: true,
+                "data-column-menu": "",
+                onClick: stopPropagation,
+                onKeyDown: stopPropagation,
+                draggable: false,
+                children: /*#__PURE__*/ jsx(MenuTrigger, {
+                    "aria-label": `${columnLabel} column menu`,
+                    children: /*#__PURE__*/ jsx(IconDot3HorizontalLine_default, {
+                        size: 16
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(MenuPositioner, {
+                children: /*#__PURE__*/ jsx(MenuContent, {
+                    style: {
+                        minWidth: 160
+                    },
+                    children: /*#__PURE__*/ jsxs(MenuScrollArea, {
+                        children: [
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: onRename,
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: "Rename"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: ()=>moveColumn(column.key, "left"),
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: "Move left"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: ()=>moveColumn(column.key, "right"),
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: "Move right"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: ()=>togglePinColumn(column.key),
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: pinned ? "Unpin column" : "Pin column"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: ()=>hideColumn(column.key),
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: "Hide column"
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
 
 /**
  * A small inline spinner, not seed's own `ProgressCircle` -- that component's
@@ -9194,7 +9619,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
                                                 "aria-label": "Move sort up",
                                                 disabled: index === 0,
                                                 onClick: ()=>moveToolbarSort(index, index - 1),
-                                                style: iconButtonStyle,
+                                                style: iconButtonStyle$1,
                                                 children: /*#__PURE__*/ jsx(IconArrowUpLine_default, {
                                                     size: 13,
                                                     strokeWidth: 1.75
@@ -9205,7 +9630,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
                                                 "aria-label": "Move sort down",
                                                 disabled: index === toolbarSorts.length - 1,
                                                 onClick: ()=>moveToolbarSort(index, index + 1),
-                                                style: iconButtonStyle,
+                                                style: iconButtonStyle$1,
                                                 children: /*#__PURE__*/ jsx(IconArrowDownLine_default, {
                                                     size: 13,
                                                     strokeWidth: 1.75
@@ -9215,7 +9640,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
                                                 type: "button",
                                                 "aria-label": "Remove sort",
                                                 onClick: ()=>removeToolbarSort(index),
-                                                style: iconButtonStyle,
+                                                style: iconButtonStyle$1,
                                                 children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
                                                     size: 13,
                                                     strokeWidth: 1.75
@@ -9230,7 +9655,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
                                     disabled: availableColumns.length === 0,
                                     onClick: ()=>availableColumns[0] && addToolbarSort(availableColumns[0].key),
                                     style: {
-                                        ...iconButtonStyle,
+                                        ...iconButtonStyle$1,
                                         width: "auto",
                                         gap: 6,
                                         padding: "6px 8px",
@@ -9252,7 +9677,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
         ]
     });
 }
-const iconButtonStyle = {
+const iconButtonStyle$1 = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -9350,7 +9775,7 @@ const formatFilterDate = (iso)=>{
                         type: "button",
                         "aria-label": `Remove ${column ? columnLabel(column) : filter.key} filter`,
                         onClick: ()=>removeToolbarFilter(filter.id),
-                        style: iconButtonStyle,
+                        style: iconButtonStyle$1,
                         children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
                             size: 12,
                             strokeWidth: 1.75
@@ -9607,7 +10032,7 @@ const formatFilterDate = (iso)=>{
                                     type: "button",
                                     onClick: ()=>setPickingField(true),
                                     style: {
-                                        ...iconButtonStyle,
+                                        ...iconButtonStyle$1,
                                         width: "auto",
                                         gap: 6,
                                         padding: "6px 8px",
@@ -9630,8 +10055,8 @@ const formatFilterDate = (iso)=>{
     });
 }
 
-const DataTableToolbar = withContext(Primitive.div, "toolbar");
-const DataTableCount = withContext(Primitive.span, "count");
+const DataTableToolbar = withContext$1(Primitive.div, "toolbar");
+const DataTableCount = withContext$1(Primitive.span, "count");
 /**
  * The toolbar's own right-hand group -- `count`'s `marginInlineStart: auto` moved
  * here (off the `<span>` itself) so a consumer's `toolbarActions` and the row count
@@ -9642,7 +10067,7 @@ const DataTableCount = withContext(Primitive.span, "count");
  * it. `DataTable.tsx` always renders this wrapper once either `toolbarActions` or
  * `showCount` is on, so it degrades to exactly the old single-count layout when no
  * `toolbarActions` is passed.
- */ const DataTableToolbarEnd = withContext(Primitive.div, "toolbarEnd");
+ */ const DataTableToolbarEnd = withContext$1(Primitive.div, "toolbarEnd");
 /**
  * A compact, borderless search box -- crisp's own measured `.crisp-datatable-search`
  * (32px, `bgSurface` background, a leading icon, a soft rest-state shadow, a 1px brand
@@ -9692,7 +10117,7 @@ function RowCount({ shown, total, countLabel }) {
 }
 
 function DataTableInner(props, ref) {
-    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
+    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
     const classNames = dataTable({
         surface,
         interactive
@@ -9797,7 +10222,7 @@ function DataTableInner(props, ref) {
     // loading/error/empty body, infinite scroll's sentinel, the add-row footer) reads
     // this ONE value rather than each re-deriving it, so they can never drift apart.
     const totalCols = columns.length + (selectable ? 1 : 0);
-    return /*#__PURE__*/ jsx(ClassNamesProvider, {
+    return /*#__PURE__*/ jsx(ClassNamesProvider$1, {
         value: classNames,
         children: /*#__PURE__*/ jsxs(DataTableRoot, {
             ref: ref,
@@ -9828,6 +10253,9 @@ function DataTableInner(props, ref) {
             columnLabels: columnLabels,
             defaultColumnLabels: defaultColumnLabels,
             onColumnLabelsChange: onColumnLabelsChange,
+            pinnedColumnKeys: pinnedColumnKeys,
+            defaultPinnedColumnKeys: defaultPinnedColumnKeys,
+            onPinnedColumnKeysChange: onPinnedColumnKeysChange,
             columnCalcOps: columnCalcOps,
             defaultColumnCalcOps: defaultColumnCalcOps,
             onColumnCalcOpsChange: onColumnCalcOpsChange,
@@ -9871,19 +10299,13 @@ function DataTableInner(props, ref) {
                         children: [
                             /*#__PURE__*/ jsx(DataTableColGroup, {
                                 columns: columns,
-                                selectable: !!selectable
+                                selectable: !!selectable,
+                                stickyFirst: stickyFirst
                             }),
                             /*#__PURE__*/ jsxs(DataTableHeader, {
                                 children: [
-                                    selectable && /*#__PURE__*/ jsx(DataTableSelectionHeaderCell, {
-                                        ...stickyProps({
-                                            selectable,
-                                            stickyFirst,
-                                            stickyLast: resolvedStickyLast,
-                                            isSelectionCell: true,
-                                            isFirst: false,
-                                            isLast: false
-                                        }),
+                                    selectable && /*#__PURE__*/ jsx(SelectionHeaderCell, {
+                                        stickyFirst: stickyFirst,
                                         children: /*#__PURE__*/ jsx(SelectAllCheckbox, {
                                             label: selectAllLabel,
                                             checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON,
@@ -9934,7 +10356,7 @@ function DataTableInner(props, ref) {
                                                 "data-clickable": onRowClick ? "" : undefined,
                                                 onClick: onRowClick ? ()=>onRowClick(row) : undefined,
                                                 children: [
-                                                    selectable && /*#__PURE__*/ jsx(DataTableSelectionCell, {
+                                                    selectable && /*#__PURE__*/ jsx(SelectionCell, {
                                                         // The row itself carries `onClick={onRowClick}` above, and a
                                                         // native click on this cell's checkbox bubbles up through it
                                                         // (React attaches DataTableRow's handler on the <tr>, which
@@ -9942,14 +10364,7 @@ function DataTableInner(props, ref) {
                                                         // it from at -- so this has to live here, not in the consumer).
                                                         // Without this, checking a row's box also fires `onRowClick`.
                                                         onClick: (event)=>event.stopPropagation(),
-                                                        ...stickyProps({
-                                                            selectable,
-                                                            stickyFirst,
-                                                            stickyLast: resolvedStickyLast,
-                                                            isSelectionCell: true,
-                                                            isFirst: false,
-                                                            isLast: false
-                                                        }),
+                                                        stickyFirst: stickyFirst,
                                                         children: /*#__PURE__*/ jsx(RowCheckbox, {
                                                             label: getRowSelectionLabel(row),
                                                             checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
@@ -9981,15 +10396,8 @@ function DataTableInner(props, ref) {
                                     // is what makes every row's selection column line up now, not a matching
                                     // per-slot width formula, so there is no more reason for this cell to
                                     // borrow a different slot than its footer siblings.
-                                    /*#__PURE__*/ jsx(DataTableFooterCell, {
-                                        ...stickyProps({
-                                            selectable,
-                                            stickyFirst,
-                                            stickyLast: resolvedStickyLast,
-                                            isSelectionCell: true,
-                                            isFirst: false,
-                                            isLast: false
-                                        })
+                                    /*#__PURE__*/ jsx(SelectionFooterCell, {
+                                        stickyFirst: stickyFirst
                                     }),
                                     /*#__PURE__*/ jsx(ColumnCalcCells, {
                                         columns: columns,
@@ -10025,7 +10433,16 @@ DataTableInner.displayName = "DataTable";
  *  `DataTableInner`) purely so it can call `useDataTableContext()` -- that context is
  *  provided by the `DataTablePrimitiveRoot` this renders as a SIBLING of, one level
  *  up from where `DataTableInner` itself sits. */ function ColumnsChangeEffect({ columns, onColumnsChange }) {
-    const effective = useEffectiveColumns(columns);
+    // `selectable`/`stickyFirst` are both `false` here on purpose: this convenience blob
+    // never renders a row of its own, so it needs neither the +40px selection offset nor
+    // `stickyFirst`'s legacy "no explicit pin -> pin the first visible column" fallback.
+    // An EXPLICIT per-column pin (`pinnedColumnKeys`) still reorders this list the same
+    // way it reorders every rendered row -- this callback reports "what's showing now",
+    // and a pinned column showing first IS what's showing now.
+    const effective = useEffectiveColumns(columns, {
+        selectable: false,
+        stickyFirst: false
+    });
     // A NEW array every time `effective` itself is a new array (its own `useMemo`
     // recomputes only when order/hidden/label/width actually change) -- `header`
     // resolves to the menu's rename override (falling back to the column's own static
@@ -10052,7 +10469,7 @@ DataTableInner.displayName = "DataTable";
 // is a SIBLING of the toolbar (both inside `DataTablePrimitiveRoot`'s card `<div>`)
 // rather than `DataTablePrimitiveRoot` itself: a `<table>` cannot host the toolbar as a
 // child without the HTML parser foster-parenting it back out.
-const DataTableTable = withContext(DataTableTable$1, "table");
+const DataTableTable = withContext$1(DataTableTable$1, "table");
 /** One `<col>` per rendered column (plus the 40px selection column, if any) -- the
  *  SINGLE place a column's width is ever set now. Every row's header/body/footer cell
  *  reads its own width off this shared `<colgroup>` by construction (native table
@@ -10060,8 +10477,16 @@ const DataTableTable = withContext(DataTableTable$1, "table");
  *  out of sync between the three. A column with no explicit width gets a bare `<col>`
  *  (no `style`): `table-layout: fixed`'s own algorithm gives every such column an equal
  *  share of whatever space is left, matching the old flex grid's `flex: 1 1 0%`
- *  default with no extra code needed here. */ function DataTableColGroup({ columns, selectable }) {
-    const effective = useEffectiveColumns(columns);
+ *  default with no extra code needed here. */ function DataTableColGroup({ columns, selectable, stickyFirst }) {
+    // MUST use the same pinned-first ordering every OTHER row (header/body/footer)
+    // renders in (`useEffectiveColumns`'s own doc comment) -- a `<colgroup>`'s `<col>`s
+    // are matched positionally to each row's cells, so if a pinned column visually moves
+    // to the front of the header/body but not here, every column's width applies to the
+    // WRONG cell.
+    const effective = useEffectiveColumns(columns, {
+        selectable,
+        stickyFirst
+    });
     return /*#__PURE__*/ jsxs("colgroup", {
         children: [
             selectable && /*#__PURE__*/ jsx("col", {
@@ -10077,15 +10502,15 @@ const DataTableTable = withContext(DataTableTable$1, "table");
         ]
     });
 }
-const DataTableHeader = withContext(DataTableHeader$1, "header");
-const DataTableHeaderCell = withContext(DataTableHeaderCell$1, "headerCell");
+const DataTableHeader = withContext$1(DataTableHeader$1, "header");
+const DataTableHeaderCell = withContext$1(DataTableHeaderCell$1, "headerCell");
 // `.crisp-datatable-th-inner` -- the flex row INSIDE a `<th>` (label + filter trigger +
 // sort chevron + column menu). See qvism-preset's own `headerCellInner` slot comment
 // for why this lives one level below the cell itself rather than on it.
-const DataTableHeaderCellInner = withContext(Primitive.div, "headerCellInner");
+const DataTableHeaderCellInner = withContext$1(Primitive.div, "headerCellInner");
 /** The label text specifically -- the one thing in `DataTableHeaderCellInner` that
  *  truncates; the trailing filter/sort/menu icons stay fully visible regardless of how
- *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext(Primitive.span, "headerCellLabel");
+ *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext$1(Primitive.span, "headerCellLabel");
 /**
  * A selection `<th>`/`<td>`/footer `<td>` composes ITS base slot (`headerCell`/`cell`/
  * `footerCell`) together with the `selectionCell` MODIFIER, rather than replacing it --
@@ -10096,7 +10521,7 @@ const DataTableHeaderCellInner = withContext(Primitive.div, "headerCellInner");
  * a second recipe call.
  */ function withSelectionCell(Component, baseSlot) {
     const StyledComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
-        const classNames = useClassNames();
+        const classNames = useClassNames$1();
         return /*#__PURE__*/ jsx(Component, {
             ref: ref,
             ...props,
@@ -10107,12 +10532,12 @@ const DataTableHeaderCellInner = withContext(Primitive.div, "headerCellInner");
     return StyledComponent;
 }
 const DataTableSelectionHeaderCell = withSelectionCell(DataTableHeaderCell$1, "headerCell");
-const DataTableHeaderCellIcon = withContext(Primitive.span, "headerCellIcon");
+const DataTableHeaderCellIcon = withContext$1(Primitive.span, "headerCellIcon");
 // body has no CSS slot of its own in the rootage spec -- it is a plain structural
 // `<tbody>`, so it is not wrapped in `withContext`.
 const DataTableBody = DataTableBody$1;
-const DataTableRow = withContext(DataTableRow$1, "row");
-const DataTableCell = withContext(DataTableCell$1, "cell");
+const DataTableRow = withContext$1(DataTableRow$1, "row");
+const DataTableCell = withContext$1(DataTableCell$1, "cell");
 const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // Tranche 4 -- column menu + reorder + resize + sticky columns. A scroll boundary
 // wrapping the whole `<table>`: `overflowX: auto` is what makes a wide table (more
@@ -10122,7 +10547,7 @@ const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // stays out of this slot's own base css (nothing here has a bounded height of its own
 // to clip), so it never introduces a second vertical scrollbar next to whatever
 // ambient container the whole DataTable already sits in.
-const DataTableScrollBodyBase = withContext(Primitive.div, "scrollArea");
+const DataTableScrollBodyBase = withContext$1(Primitive.div, "scrollArea");
 function DataTableScrollBody({ children, scrollProps }) {
     const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
     const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
@@ -10137,7 +10562,7 @@ function DataTableScrollBody({ children, scrollProps }) {
         children: children
     });
 }
-const DataTableFooterBase = withContext(Primitive.tfoot, "footer");
+const DataTableFooterBase = withContext$1(Primitive.tfoot, "footer");
 function DataTableFooter({ children, ...props }) {
     return /*#__PURE__*/ jsx(DataTableFooterBase, {
         ...props,
@@ -10146,7 +10571,33 @@ function DataTableFooter({ children, ...props }) {
         })
     });
 }
-const DataTableFooterCell = withContext(Primitive.td, "footerCell");
+const DataTableFooterCell = withContext$1(Primitive.td, "footerCell");
+// The selection column's OWN sticky wrappers -- one each for header/body/footer,
+// reading the live pinned set via `useSelectionStickyFirst` (column-layout.ts) instead
+// of the `stickyFirst` PROP alone, so the checkbox column sticks the moment ANY column
+// is pinned, uncontrolled or not (see that hook's own doc comment for why this can't
+// just be computed once, above, in `DataTableInner`).
+function SelectionHeaderCell({ stickyFirst, children }) {
+    const resolvedStickyFirst = useSelectionStickyFirst(stickyFirst);
+    return /*#__PURE__*/ jsx(DataTableSelectionHeaderCell, {
+        ...selectionStickyProps(resolvedStickyFirst),
+        children: children
+    });
+}
+function SelectionCell({ stickyFirst, onClick, children }) {
+    const resolvedStickyFirst = useSelectionStickyFirst(stickyFirst);
+    return /*#__PURE__*/ jsx(DataTableSelectionCell, {
+        onClick: onClick,
+        ...selectionStickyProps(resolvedStickyFirst),
+        children: children
+    });
+}
+function SelectionFooterCell({ stickyFirst }) {
+    const resolvedStickyFirst = useSelectionStickyFirst(stickyFirst);
+    return /*#__PURE__*/ jsx(DataTableFooterCell, {
+        ...selectionStickyProps(resolvedStickyFirst)
+    });
+}
 ////////////////////////////////////////////////////////////////////////////////////
 // Fix (bug report): karrot icons default to a 24px intrinsic SVG attribute size
 // -- see column-menu.tsx's own `SORT_ICON_SIZE` comment for the full mechanism.
@@ -10202,4 +10653,274 @@ function SelectAllCheckbox({ label, checkedIcon, indeterminateIcon }) {
     });
 }
 
-export { DataTable };
+const rowStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 4
+};
+const rowButtonStyle = {
+    flex: 1,
+    minWidth: 0,
+    textAlign: "left",
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 8px",
+    border: "none",
+    borderRadius: 6,
+    background: "transparent",
+    color: "var(--seed-color-fg-neutral)",
+    fontSize: 13,
+    cursor: "pointer",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+};
+const smallButtonStyle = {
+    flexShrink: 0,
+    border: "none",
+    borderRadius: 6,
+    background: "transparent",
+    color: "var(--seed-color-fg-neutral-subtle)",
+    fontSize: 12,
+    padding: "4px 6px",
+    cursor: "pointer"
+};
+const iconButtonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 22,
+    height: 22,
+    flexShrink: 0,
+    border: "none",
+    borderRadius: 6,
+    background: "transparent",
+    color: "var(--seed-color-fg-neutral-subtle)",
+    cursor: "pointer"
+};
+/**
+ * A compact saved-views switcher -- current view name (or `label`) as the trigger,
+ * a popover listing every saved view (click to switch, inline Rename/Delete), a
+ * trailing "Save as new view", and (once a view is active) "Update view" to overwrite
+ * the loaded view with the table's current state.
+ */ function DataTableViewsControl({ label = "Views", showClearRow = false, clearLabel, captureState, applyState, newViewLabel = "Save as new view", updateViewLabel = "Update view", renameLabel = "Rename", deleteLabel = "Delete", renameInputLabel = (name)=>`Rename ${name}`, ...viewsProps }) {
+    const viewsApi = useDataTableViews(viewsProps);
+    const { activeViewId, activeView } = viewsApi;
+    const triggerLabel = activeView ? activeView.name : label;
+    return /*#__PURE__*/ jsxs(MenuRoot, {
+        children: [
+            /*#__PURE__*/ jsx(MenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxs(ActionButton, {
+                    variant: "neutralOutline",
+                    size: "xsmall",
+                    "data-active": activeViewId ? "" : undefined,
+                    children: [
+                        /*#__PURE__*/ jsx(IconArrowUpArrowDownLine_default, {
+                            size: 14,
+                            strokeWidth: 1.75
+                        }),
+                        triggerLabel,
+                        /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {
+                            size: 14,
+                            strokeWidth: 1.75
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(MenuPositioner, {
+                children: /*#__PURE__*/ jsx(MenuContent, {
+                    style: {
+                        minWidth: 240
+                    },
+                    children: /*#__PURE__*/ jsx(MenuScrollArea, {
+                        children: /*#__PURE__*/ jsx(ViewsMenuBody, {
+                            viewsApi: viewsApi,
+                            captureState: captureState,
+                            applyState: applyState,
+                            label: label,
+                            showClearRow: showClearRow,
+                            clearLabel: clearLabel,
+                            newViewLabel: newViewLabel,
+                            updateViewLabel: updateViewLabel,
+                            renameLabel: renameLabel,
+                            deleteLabel: deleteLabel,
+                            renameInputLabel: renameInputLabel
+                        })
+                    })
+                })
+            })
+        ]
+    });
+}
+DataTableViewsControl.displayName = "DataTableViewsControl";
+/**
+ * The popover's own body -- split out from `DataTableViewsControl` purely so it can
+ * call `useMenuContext()` (`@seed-design/react-menu`), which only resolves for a
+ * descendant of `MenuRoot`, not the component that RENDERS `MenuRoot` itself (the same
+ * reason `column-layout.ts`'s `useSelectionStickyFirst` is its own component-level
+ * hook rather than something computed in `DataTable.tsx` above its provider). Plain
+ * `<button>` rows here (not seed `MenuItem`s -- `toolbar-conditions.tsx`'s own Sort/
+ * Filter popovers make the same call) don't auto-close the menu on click the way a real
+ * `MenuItem` does, so switching/creating/updating a view calls `setOpen(false)` here
+ * explicitly; renaming and deleting deliberately do NOT close it, so a consumer can
+ * clean up more than one view without reopening the popover each time.
+ */ function ViewsMenuBody({ viewsApi, captureState, applyState, label, showClearRow, clearLabel, newViewLabel, updateViewLabel, renameLabel, deleteLabel, renameInputLabel }) {
+    const { views, activeViewId, createView, updateView, renameView, deleteView, selectView } = viewsApi;
+    const { setOpen } = useMenuContext();
+    const [renamingId, setRenamingId] = React.useState(null);
+    const [renameValue, setRenameValue] = React.useState("");
+    // Same race `column-menu.tsx`'s own inline rename input already guards against:
+    // starting a rename swaps the clicked "Rename" button for an input in the SAME
+    // MenuContent this popover's own floating-ui focus management watches, and its
+    // focus-guard spans can steal focus right back (to the content, or the trigger)
+    // one frame after mount -- BEFORE this ref flips true -- so `onBlur` ignores that
+    // one spurious blur and only commits a REAL blur (an actual click/tab away) after.
+    const renameReadyRef = React.useRef(false);
+    const renameInputRef = React.useRef(null);
+    const handleSelect = (id)=>{
+        selectView(id);
+        if (id !== null) {
+            const view = views.find((v)=>v.id === id);
+            if (view) applyState(view.state);
+        }
+        setOpen(false);
+    };
+    const handleCreate = ()=>{
+        createView(`View ${views.length + 1}`, captureState());
+        setOpen(false);
+    };
+    const handleUpdate = ()=>{
+        if (activeViewId) updateView(activeViewId, captureState());
+        setOpen(false);
+    };
+    const startRename = (view)=>{
+        renameReadyRef.current = false;
+        setRenamingId(view.id);
+        setRenameValue(view.name);
+    };
+    const commitRename = ()=>{
+        if (renamingId && renameValue.trim()) renameView(renamingId, renameValue.trim());
+        setRenamingId(null);
+    };
+    React.useEffect(()=>{
+        if (!renamingId) return;
+        // Re-grab focus (and select the text) one frame after mount, AFTER whatever
+        // floating-ui's own focus-guard restore was going to do -- see this component's
+        // own `renameReadyRef` doc comment above.
+        const frame = requestAnimationFrame(()=>{
+            renameReadyRef.current = true;
+            renameInputRef.current?.focus();
+            renameInputRef.current?.select();
+        });
+        return ()=>cancelAnimationFrame(frame);
+    }, [
+        renamingId
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            padding: "4px 8px"
+        },
+        children: [
+            showClearRow && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: ()=>handleSelect(null),
+                "data-active": !activeViewId ? "" : undefined,
+                style: rowButtonStyle,
+                children: clearLabel ?? label
+            }),
+            views.length === 0 && /*#__PURE__*/ jsx("div", {
+                style: {
+                    fontSize: 13,
+                    color: "var(--seed-color-fg-neutral-subtle)",
+                    padding: "4px 8px"
+                },
+                children: "No saved views yet."
+            }),
+            views.map((view)=>renamingId === view.id ? /*#__PURE__*/ jsx("div", {
+                    style: rowStyle,
+                    children: /*#__PURE__*/ jsx("input", {
+                        ref: renameInputRef,
+                        // biome-ignore lint/a11y/noAutofocus: opening this input IS the user's own "Rename" click a moment earlier, not an unannounced page-load autofocus (same call column-menu.tsx's own inline rename input makes).
+                        autoFocus: true,
+                        "aria-label": renameInputLabel(view.name),
+                        value: renameValue,
+                        onChange: (event)=>setRenameValue(event.target.value),
+                        onBlur: ()=>{
+                            if (renameReadyRef.current) commitRename();
+                        },
+                        onKeyDown: (event)=>{
+                            event.stopPropagation();
+                            if (event.key === "Enter") commitRename();
+                            if (event.key === "Escape") setRenamingId(null);
+                        },
+                        style: {
+                            flex: 1,
+                            minWidth: 0,
+                            font: "inherit",
+                            fontSize: 13,
+                            padding: "6px 8px",
+                            border: "1px solid var(--seed-color-border-neutral)",
+                            borderRadius: 6,
+                            background: "var(--seed-color-bg-surface)",
+                            color: "var(--seed-color-fg-neutral)"
+                        }
+                    })
+                }, view.id) : /*#__PURE__*/ jsxs("div", {
+                    style: rowStyle,
+                    children: [
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            onClick: ()=>handleSelect(view.id),
+                            "data-active": view.id === activeViewId ? "" : undefined,
+                            style: rowButtonStyle,
+                            children: view.name
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            onClick: ()=>startRename(view),
+                            style: smallButtonStyle,
+                            children: renameLabel
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            "aria-label": `${deleteLabel} ${view.name}`,
+                            onClick: ()=>deleteView(view.id),
+                            style: iconButtonStyle,
+                            children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
+                                size: 13,
+                                strokeWidth: 1.75
+                            })
+                        })
+                    ]
+                }, view.id)),
+            activeViewId && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: handleUpdate,
+                style: {
+                    ...rowButtonStyle,
+                    color: "var(--seed-color-fg-neutral-subtle)"
+                },
+                children: updateViewLabel
+            }),
+            /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                onClick: handleCreate,
+                style: rowButtonStyle,
+                children: [
+                    /*#__PURE__*/ jsx(IconPlusLine_default, {
+                        size: 13,
+                        strokeWidth: 1.75
+                    }),
+                    newViewLabel
+                ]
+            })
+        ]
+    });
+}
+
+export { DataTable, DataTableViewsControl };