@crispy-seed/data-table 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -55,7 +55,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/IconArrowUpLine.tsx
-var Icon$f = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+var Icon$h = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -73,11 +73,11 @@ var Icon$f = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconArrowUpLine = /*#__PURE__*/ React.forwardRef(Icon$f);
+var IconArrowUpLine = /*#__PURE__*/ React.forwardRef(Icon$h);
 var IconArrowUpLine_default = IconArrowUpLine;
 
 // src/IconArrowDownLine.tsx
-var Icon$e = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+var Icon$g = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -95,11 +95,33 @@ var Icon$e = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconArrowDownLine = /*#__PURE__*/ React.forwardRef(Icon$e);
+var IconArrowDownLine = /*#__PURE__*/ React.forwardRef(Icon$g);
 var IconArrowDownLine_default = IconArrowDownLine;
 
+// src/IconArrowUpRightLine.tsx
+var Icon$f = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M20.0005 19C20.5505 19 21.0005 18.55 21.0005 18V4C21.0005 3.45 20.5505 3 20.0005 3H6.00055C5.45055 3 5.00055 3.45 5.00055 4C5.00055 4.55 5.45055 5 6.00055 5H17.6005L3.29055 19.29C2.90055 19.68 2.90055 20.31 3.29055 20.7C3.68055 21.09 4.31055 21.09 4.70055 20.7L19.0005 6.43V18C19.0005 18.55 19.4505 19 20.0005 19Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconArrowUpRightLine = /*#__PURE__*/ React.forwardRef(Icon$f);
+var IconArrowUpRightLine_default = IconArrowUpRightLine;
+
 // src/IconArrowUpArrowDownLine.tsx
-var Icon$d = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+var Icon$e = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -123,11 +145,11 @@ var Icon$d = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconArrowUpArrowDownLine = /*#__PURE__*/ React.forwardRef(Icon$d);
+var IconArrowUpArrowDownLine = /*#__PURE__*/ React.forwardRef(Icon$e);
 var IconArrowUpArrowDownLine_default = IconArrowUpArrowDownLine;
 
 // src/IconChevronDownLine.tsx
-var Icon$c = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+var Icon$d = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -145,11 +167,11 @@ var Icon$c = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconChevronDownLine = /*#__PURE__*/ React.forwardRef(Icon$c);
+var IconChevronDownLine = /*#__PURE__*/ React.forwardRef(Icon$d);
 var IconChevronDownLine_default = IconChevronDownLine;
 
 // src/IconChevronUpLine.tsx
-var Icon$b = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+var Icon$c = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -167,11 +189,11 @@ var Icon$b = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconChevronUpLine = /*#__PURE__*/ React.forwardRef(Icon$b);
+var IconChevronUpLine = /*#__PURE__*/ React.forwardRef(Icon$c);
 var IconChevronUpLine_default = IconChevronUpLine;
 
 // src/IconDot3HorizontalLine.tsx
-var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+var Icon$b = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -199,9 +221,37 @@ var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconDot3HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$a);
+var IconDot3HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$b);
 var IconDot3HorizontalLine_default = IconDot3HorizontalLine;
 
+// src/IconEyeLine.tsx
+var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
+                children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M1.68785 14.0027C2.21223 14.1751 2.77712 13.8901 2.94996 13.3659C3.07236 13.0089 3.23163 12.663 3.39915 12.3254C3.7229 11.6731 4.22663 10.8054 4.94433 9.94191C6.3729 8.22305 8.6137 6.55273 12.0003 6.55273C15.3868 6.55273 17.6276 8.22305 19.0562 9.94191C19.7739 10.8054 20.2776 11.6731 20.6014 12.3254C20.7627 12.6505 20.8778 12.9189 20.9513 13.1024C21.0036 13.233 21.0295 13.302 21.0509 13.3669C21.2241 13.8904 21.7886 14.175 22.3127 14.0027C22.8373 13.8301 23.1225 13.264 22.9499 12.7394C22.9158 12.6366 22.8793 12.5369 22.8078 12.3586C22.717 12.1319 22.5805 11.8144 22.3929 11.4363C22.0187 10.6824 21.435 9.67502 20.5943 8.66356C18.9062 6.63242 16.147 4.55273 12.0003 4.55273C7.8535 4.55273 5.09431 6.63242 3.40621 8.66356C2.56557 9.67502 1.9818 10.6824 1.60765 11.4363C1.42001 11.8144 1.28353 12.1319 1.1927 12.3586C1.12106 12.5374 1.08448 12.6372 1.05033 12.7403C0.877781 13.2649 1.16321 13.8301 1.68785 14.0027Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M12.576 9.10187C12.7569 9.46282 12.7029 9.89712 12.4393 10.2029C12.0675 10.634 11.8429 11.1792 11.8429 11.7727C11.8429 13.0923 12.9123 14.1613 14.2263 14.1613C14.8331 14.1613 15.3926 13.9188 15.8177 13.522C16.1163 13.2434 16.5544 13.1743 16.9243 13.3476C17.2941 13.5209 17.5214 13.9017 17.4984 14.3095C17.3348 17.2106 15.0545 19.5498 12.0068 19.5498C8.94739 19.5498 6.5 16.9571 6.5 14.0363C6.5 11.1187 8.76722 8.75104 11.6123 8.55225C12.015 8.52411 12.3952 8.74091 12.576 9.10187Z",
+                        fill: "currentColor"
+                    })
+                ]
+            })
+        })
+    });
+var IconEyeLine = /*#__PURE__*/ React.forwardRef(Icon$a);
+var IconEyeLine_default = IconEyeLine;
+
 // src/IconMagnifyingglassLine.tsx
 var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
         viewBox: "0 0 24 24",
@@ -878,18 +928,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,
@@ -901,6 +966,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
@@ -914,19 +997,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,
@@ -963,6 +1117,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 = React.useMemo(()=>reconcilePinnedColumns(rawPinnedColumnKeys ?? EMPTY_STRINGS, columnKeys), [
+        rawPinnedColumnKeys,
+        columnKeys
+    ]);
+    const pinnedSet = React.useMemo(()=>new Set(pinnedColumnKeys), [
+        pinnedColumnKeys
+    ]);
+    const isColumnPinned = React.useCallback((key)=>pinnedSet.has(key), [
+        pinnedSet
+    ]);
+    const pinColumn = React.useCallback((key)=>setRawPinnedColumnKeys((current = EMPTY_STRINGS)=>current.includes(key) ? current : [
+                ...current,
+                key
+            ]), [
+        setRawPinnedColumnKeys
+    ]);
+    const unpinColumn = React.useCallback((key)=>setRawPinnedColumnKeys((current = EMPTY_STRINGS)=>current.filter((existing)=>existing !== key)), [
+        setRawPinnedColumnKeys
+    ]);
+    const togglePinColumn = React.useCallback((key)=>setRawPinnedColumnKeys((current = EMPTY_STRINGS)=>togglePinnedColumn(current, key)), [
+        setRawPinnedColumnKeys
+    ]);
     const isColumnHidden = React.useCallback((key)=>hiddenSet.has(key), [
         hiddenSet
     ]);
@@ -1007,22 +1191,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] = React.useState(null);
     const beginColumnDrag = React.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 = React.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 = React.useCallback(()=>setDraggingColumnKey(null), []);
@@ -1058,10 +1250,15 @@ const EMPTY_RECORD = {};
         hiddenColumnKeys,
         columnWidths,
         columnLabels,
+        pinnedColumnKeys,
         isColumnHidden,
         hideColumn,
         showColumn,
         toggleColumnVisibility,
+        isColumnPinned,
+        pinColumn,
+        unpinColumn,
+        togglePinColumn,
         getColumnLabel,
         renameColumn,
         getColumnWidth,
@@ -1710,7 +1907,7 @@ function useDataTableRowContext({ strict = true } = {}) {
     return context;
 }
 const DataTableRoot = /*#__PURE__*/ React.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,
@@ -1742,6 +1939,9 @@ const DataTableRoot = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         columnLabels,
         defaultColumnLabels,
         onColumnLabelsChange,
+        pinnedColumnKeys,
+        defaultPinnedColumnKeys,
+        onPinnedColumnKeysChange,
         columnCalcOps,
         defaultColumnCalcOps,
         onColumnCalcOpsChange,
@@ -1829,6 +2029,132 @@ const DataTableCell$1 = /*#__PURE__*/ React.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 = React.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 = React.useRef(true);
+    React.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 = React.useCallback((name, state)=>{
+        const id = generateViewId();
+        setViews((current = EMPTY_VIEWS)=>upsertDataTableView(current, {
+                id,
+                name,
+                state
+            }));
+        setActiveViewId(id);
+        return id;
+    }, [
+        setViews,
+        setActiveViewId
+    ]);
+    const updateView = React.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 = React.useCallback((id, name)=>setViews((current = EMPTY_VIEWS)=>renameDataTableView(current, id, name)), [
+        setViews
+    ]);
+    const deleteView = React.useCallback((id)=>{
+        setViews((current = EMPTY_VIEWS)=>removeDataTableView(current, id));
+        setActiveViewId((current)=>current === id ? null : current);
+    }, [
+        setViews,
+        setActiveViewId
+    ]);
+    const selectView = React.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;
@@ -2227,7 +2553,7 @@ function formatDateTimeCell(value, locale) {
         minute: "2-digit"
     }).format(date);
 }
-function EntityCell({ value, className, nameClassName }) {
+function EntityCell({ value, className, nameClassName, actionsClassName, actionClassName, column, row, openPreviewLabel }) {
     const entity = typeof value === "object" && value !== null ? value : {
         name: String(value ?? "")
     };
@@ -2250,6 +2576,21 @@ function EntityCell({ value, className, nameClassName }) {
             /*#__PURE__*/ jsxRuntime.jsx("span", {
                 className: nameClassName,
                 children: entity.name
+            }),
+            column?.onOpenPreview && row !== undefined && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                className: actionsClassName,
+                children: /*#__PURE__*/ jsxRuntime.jsx("button", {
+                    type: "button",
+                    className: actionClassName,
+                    "aria-label": openPreviewLabel ?? "Open preview",
+                    onClick: (event)=>{
+                        event.stopPropagation();
+                        column.onOpenPreview?.(row);
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsx(IconEyeLine_default, {
+                        size: 16
+                    })
+                })
             })
         ]
     });
@@ -2354,76 +2695,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__namespace.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
             }
         };
     }
@@ -2763,7 +3149,7 @@ const TextFieldTextarea = /*#__PURE__*/ React.forwardRef(({ className, autoresiz
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
-__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))}");
+__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__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0}.seed-data-table__entityActions:focus-within,tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:0;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.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);
@@ -2858,6 +3244,14 @@ const dataTableSlotNames = [
         "link",
         "seed-data-table__link"
     ],
+    [
+        "entityActions",
+        "seed-data-table__entityActions"
+    ],
+    [
+        "entityAction",
+        "seed-data-table__entityAction"
+    ],
     [
         "toolbar",
         "seed-data-table__toolbar"
@@ -2907,11 +3301,11 @@ const dataTableSlotNames = [
         "seed-data-table__selectionCell"
     ]
 ];
-const defaultVariant$4 = {
+const defaultVariant$6 = {
     "surface": "card",
     "interactive": false
 };
-const compoundVariants$4 = [];
+const compoundVariants$6 = [];
 const dataTableVariantMap = {
     "surface": [
         "card",
@@ -2926,7 +3320,7 @@ function dataTable(props) {
     return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
         return [
             slot,
-            createClassName(className, mergeVariants(defaultVariant$4, props), compoundVariants$4)
+            createClassName(className, mergeVariants(defaultVariant$6, props), compoundVariants$6)
         ];
     }));
 }
@@ -3471,20 +3865,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__*/ jsxRuntime.jsx(jsxRuntime.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"
@@ -3610,7 +4000,12 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
             return /*#__PURE__*/ jsxRuntime.jsx(EntityCell, {
                 value: value,
                 className: classNames.entity,
-                nameClassName: classNames.entityName
+                nameClassName: classNames.entityName,
+                actionsClassName: classNames.entityActions,
+                actionClassName: classNames.entityAction,
+                column: column,
+                row: row,
+                openPreviewLabel: column.openPreviewLabel
             });
         case "url":
         case "email":
@@ -3720,19 +4115,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__*/ jsxRuntime.jsx(jsxRuntime.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__*/ jsxRuntime.jsx(DataTableFooterCell, {
                 "data-sticky": sticky["data-sticky"],
                 "data-sticky-edge": sticky["data-sticky-edge"],
@@ -3916,20 +4307,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__namespace.useState(null);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.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__*/ jsxRuntime.jsxs(DataTableHeaderCell, {
                 columnKey: column.key,
                 sortable: column.sortable,
@@ -4059,8 +4446,9 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
  *  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 { 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__*/ jsxRuntime.jsxs(MenuRoot, {
         children: [
@@ -4102,6 +4490,12 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
                                     children: "Move right"
                                 })
                             }),
+                            /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                onClick: ()=>togglePinColumn(column.key),
+                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                    children: pinned ? "Unpin column" : "Pin column"
+                                })
+                            }),
                             /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
                                 onClick: ()=>hideColumn(column.key),
                                 children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
@@ -4224,12 +4618,12 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
 
 __insertCSS(".seed-action-button{display:inline-flex;position:relative;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border:none;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;flex-shrink:0;font-family:inherit;--seed-box-flex-grow:initial;flex-grow:var(--seed-box-flex-grow);--seed-box-min-width:initial;min-width:var(--seed-box-min-width);--seed-box-padding-bottom:initial;--seed-box-padding-top:initial;--seed-box-padding-left:initial;--seed-box-padding-right:initial;padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom-base:0px;--seed-box-bleed-bottom-sm:var(--seed-box-bleed-bottom-base, initial);--seed-box-bleed-bottom-md:var(--seed-box-bleed-bottom-sm, initial);--seed-box-bleed-bottom-lg:var(--seed-box-bleed-bottom-md, initial);--seed-box-bleed-bottom-xl:var(--seed-box-bleed-bottom-lg, initial);--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-base, initial);--seed-box-bleed-top-base:0px;--seed-box-bleed-top-sm:var(--seed-box-bleed-top-base, initial);--seed-box-bleed-top-md:var(--seed-box-bleed-top-sm, initial);--seed-box-bleed-top-lg:var(--seed-box-bleed-top-md, initial);--seed-box-bleed-top-xl:var(--seed-box-bleed-top-lg, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-base, initial);--seed-box-bleed-left-base:0px;--seed-box-bleed-left-sm:var(--seed-box-bleed-left-base, initial);--seed-box-bleed-left-md:var(--seed-box-bleed-left-sm, initial);--seed-box-bleed-left-lg:var(--seed-box-bleed-left-md, initial);--seed-box-bleed-left-xl:var(--seed-box-bleed-left-lg, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-base, initial);--seed-box-bleed-right-base:0px;--seed-box-bleed-right-sm:var(--seed-box-bleed-right-base, initial);--seed-box-bleed-right-md:var(--seed-box-bleed-right-sm, initial);--seed-box-bleed-right-lg:var(--seed-box-bleed-right-md, initial);--seed-box-bleed-right-xl:var(--seed-box-bleed-right-lg, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-base, initial);margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:var(--seed-dimension-x0_5)}.seed-action-button:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:var(--seed-dimension-x0_5)}.seed-action-button:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.seed-action-button:not(:is(:disabled,[disabled],[data-disabled])):is(:active,[data-active]){scale:var(--seed-feedback-scale)}.seed-action-button{transition:background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing),scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale),outline-color var(--seed-duration-d3) var(--seed-timing-function-easing)}.seed-action-button--variant_brandSolid{background:var(--seed-color-bg-brand-solid);color:var(--seed-color-palette-static-white);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_brandSolid:is(:hover,[data-hover]){background:var(--seed-color-bg-brand-solid-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_brandSolid:is(:active,[data-active]){background:var(--seed-color-bg-brand-solid-pressed)}}.seed-action-button--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-disabled);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_brandSolid[data-loading]{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button--variant_neutralSolid{background:var(--seed-color-bg-neutral-inverted);color:var(--seed-color-fg-neutral-inverted);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-suffix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-icon-color:var(--seed-color-fg-neutral-inverted);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralSolid:is(:hover,[data-hover]){background:var(--seed-color-bg-neutral-inverted-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralSolid:is(:active,[data-active]){background:var(--seed-color-bg-neutral-inverted-pressed)}}.seed-action-button--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-disabled);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralSolid[data-loading]{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button--variant_neutralWeak{background:var(--seed-color-bg-neutral-weak);color:var(--seed-color-fg-neutral);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralWeak:is(:hover,[data-hover]){background:var(--seed-color-bg-neutral-weak-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralWeak:is(:active,[data-active]){background:var(--seed-color-bg-neutral-weak-pressed)}}.seed-action-button--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-disabled);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralWeak[data-loading]{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button--variant_criticalSolid{background:var(--seed-color-bg-critical-solid);color:var(--seed-color-palette-static-white);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_criticalSolid:is(:hover,[data-hover]){background:var(--seed-color-bg-critical-solid-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_criticalSolid:is(:active,[data-active]){background:var(--seed-color-bg-critical-solid-pressed)}}.seed-action-button--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-disabled);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_criticalSolid[data-loading]{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button--variant_brandOutline{border-style:solid;background:var(--seed-color-bg-transparent);border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);color:var(--seed-color-fg-brand);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-fg-brand);--seed-suffix-icon-color:var(--seed-color-fg-brand);--seed-icon-color:var(--seed-color-fg-brand);--track-color:var(--seed-color-palette-carrot-200);--range-color:var(--seed-color-bg-brand-solid)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_brandOutline:is(:hover,[data-hover]){background:var(--seed-color-bg-transparent-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_brandOutline:is(:active,[data-active]){background:var(--seed-color-bg-transparent-pressed)}}.seed-action-button--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_brandOutline[data-loading]{background:var(--seed-color-bg-transparent)}.seed-action-button--variant_neutralOutline{border-style:solid;background:var(--seed-color-bg-transparent);border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);color:var(--seed-color-fg-neutral);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralOutline:is(:hover,[data-hover]){background:var(--seed-color-bg-transparent-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralOutline:is(:active,[data-active]){background:var(--seed-color-bg-transparent-pressed)}}.seed-action-button--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralOutline[data-loading]{background:var(--seed-color-bg-transparent)}.seed-action-button--variant_ghost{background:#ffffff00;--seed-box-color:var(--seed-color-fg-neutral);color:var(--seed-box-color);--seed-prefix-icon-color:var(--seed-box-color);--seed-suffix-icon-color:var(--seed-box-color);--seed-icon-color:var(--seed-box-color);--seed-font-weight:var(--seed-font-weight-bold);font-weight:var(--seed-font-weight);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_ghost:is(:hover,[data-hover]){background:var(--seed-color-bg-transparent-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_ghost:is(:active,[data-active]){background:var(--seed-color-bg-transparent-pressed)}}.seed-action-button--variant_ghost:is(:disabled,[disabled],[data-disabled]){background:#ffffff00;color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_ghost[data-loading]{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--size_xsmall{height:var(--seed-dimension-x8);border-radius:var(--seed-radius-full);--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x3_5)}.seed-action-button--size_small{height:var(--seed-dimension-x9);border-radius:var(--seed-radius-r2);--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x4)}.seed-action-button--size_medium{height:var(--seed-dimension-x10);border-radius:var(--seed-radius-r2);--size:16px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x4);--seed-suffix-icon-size:var(--seed-dimension-x4);--seed-icon-size:18px}.seed-action-button--size_large{height:var(--seed-dimension-x13);border-radius:var(--seed-radius-r3);--size:18px;--thickness:2px;--seed-prefix-icon-size:22px;--seed-suffix-icon-size:22px;--seed-icon-size:22px}.seed-action-button--size_xsmall-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5);font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-action-button--size_xsmall-layout_iconOnly{min-width:var(--seed-dimension-x8);--seed-box-padding-left:var(--seed-dimension-x1_5);--seed-box-padding-right:var(--seed-dimension-x1_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button--size_small-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button--size_small-layout_iconOnly{min-width:var(--seed-dimension-x9);--seed-box-padding-left:var(--seed-dimension-x2);--seed-box-padding-right:var(--seed-dimension-x2);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button--size_medium-layout_withText{gap:var(--seed-dimension-x1_5);--seed-box-padding-left:var(--seed-dimension-x4);--seed-box-padding-right:var(--seed-dimension-x4);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button--size_medium-layout_iconOnly{min-width:var(--seed-dimension-x10);--seed-box-padding-left:var(--seed-dimension-x2_5);--seed-box-padding-right:var(--seed-dimension-x2_5);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button--size_large-layout_withText{gap:var(--seed-dimension-x2);--seed-box-padding-left:var(--seed-dimension-x5);--seed-box-padding-right:var(--seed-dimension-x5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5);font-size:var(--seed-font-size-t6);line-height:var(--seed-line-height-t6)}.seed-action-button--size_large-layout_iconOnly{min-width:var(--seed-dimension-x13);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}@media (min-width:480px){.seed-action-button{--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-sm, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-sm, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-sm, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-sm, initial)}}@media (min-width:768px){.seed-action-button{--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-md, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-md, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-md, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-md, initial)}}@media (min-width:1280px){.seed-action-button{--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-lg, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-lg, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-lg, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-lg, initial)}}@media (min-width:1440px){.seed-action-button{--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-xl, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-xl, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-xl, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-xl, initial)}}");
 
-const defaultVariant$3 = {
+const defaultVariant$5 = {
     "variant": "brandSolid",
     "size": "medium",
     "layout": "withText"
 };
-const compoundVariants$3 = [
+const compoundVariants$5 = [
     {
         "size": "xsmall",
         "layout": "withText"
@@ -4285,7 +4679,7 @@ const actionButtonVariantMap = {
     ]
 };
 function actionButton(props) {
-    return createClassName("seed-action-button", mergeVariants(defaultVariant$3, props), compoundVariants$3);
+    return createClassName("seed-action-button", mergeVariants(defaultVariant$5, props), compoundVariants$5);
 }
 Object.assign(actionButton, {
     splitVariantProps: (props)=>splitVariantProps(props, actionButtonVariantMap)
@@ -5367,10 +5761,10 @@ const datePickerSlotNames = [
         "seed-date-picker__liveRegion"
     ]
 ];
-const defaultVariant$2 = {
+const defaultVariant$4 = {
     "visibleRange": "month"
 };
-const compoundVariants$2 = [];
+const compoundVariants$4 = [];
 const datePickerVariantMap = {
     "visibleRange": [
         "month",
@@ -5383,7 +5777,7 @@ function datePicker(props) {
     return Object.fromEntries(datePickerSlotNames.map(([slot, className])=>{
         return [
             slot,
-            createClassName(className, mergeVariants(defaultVariant$2, props), compoundVariants$2)
+            createClassName(className, mergeVariants(defaultVariant$4, props), compoundVariants$4)
         ];
     }));
 }
@@ -7717,14 +8111,14 @@ const wheelPickerSlotNames = [
         "seed-wheel-picker__selectionIndicator"
     ]
 ];
-const defaultVariant$1 = {};
-const compoundVariants$1 = [];
+const defaultVariant$3 = {};
+const compoundVariants$3 = [];
 const wheelPickerVariantMap = {};
 function wheelPicker(props) {
     return Object.fromEntries(wheelPickerSlotNames.map(([slot, className])=>{
         return [
             slot,
-            createClassName(className, mergeVariants(defaultVariant$1, props), compoundVariants$1)
+            createClassName(className, mergeVariants(defaultVariant$3, props), compoundVariants$3)
         ];
     }));
 }
@@ -8506,17 +8900,17 @@ var WheelPicker_namespace = {
 
 __insertCSS(".seed-scroll-fog{position:relative;overflow:auto;height:100%;width:100%;mask-image:linear-gradient(to bottom,#00000000 0,#00000003 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.08),#00000005 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.16),#0000000d calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.22),#00000014 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.29),#00000021 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.35),#0000002e calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.41),#00000040 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.47),#00000052 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.53),#00000066 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.59),#0000007a calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.65),#00000094 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.71),#000000ab calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.78),#000000c7 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.84),#000000e3 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.92),#000000ff calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 1)),linear-gradient(to top,#00000000 0,#00000003 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.08),#00000005 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.16),#0000000d calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.22),#00000014 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.29),#00000021 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.35),#0000002e calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.41),#00000040 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.47),#00000052 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.53),#00000066 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.59),#0000007a calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.65),#00000094 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.71),#000000ab calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.78),#000000c7 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.84),#000000e3 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.92),#000000ff calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 1)),linear-gradient(to right,#00000000 0,#00000003 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.08),#00000005 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.16),#0000000d calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.22),#00000014 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.29),#00000021 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.35),#0000002e calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.41),#00000040 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.47),#00000052 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.53),#00000066 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.59),#0000007a calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.65),#00000094 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.71),#000000ab calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.78),#000000c7 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.84),#000000e3 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.92),#000000ff calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 1)),linear-gradient(to left,#00000000 0,#00000003 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.08),#00000005 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.16),#0000000d calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.22),#00000014 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.29),#00000021 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.35),#0000002e calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.41),#00000040 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.47),#00000052 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.53),#00000066 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.59),#0000007a calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.65),#00000094 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.71),#000000ab calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.78),#000000c7 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.84),#000000e3 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.92),#000000ff calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 1));-webkit-mask-image:linear-gradient(to bottom,#00000000 0,#00000003 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.08),#00000005 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.16),#0000000d calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.22),#00000014 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.29),#00000021 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.35),#0000002e calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.41),#00000040 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.47),#00000052 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.53),#00000066 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.59),#0000007a calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.65),#00000094 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.71),#000000ab calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.78),#000000c7 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.84),#000000e3 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.92),#000000ff calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 1)),linear-gradient(to top,#00000000 0,#00000003 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.08),#00000005 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.16),#0000000d calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.22),#00000014 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.29),#00000021 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.35),#0000002e calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.41),#00000040 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.47),#00000052 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.53),#00000066 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.59),#0000007a calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.65),#00000094 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.71),#000000ab calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.78),#000000c7 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.84),#000000e3 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.92),#000000ff calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 1)),linear-gradient(to right,#00000000 0,#00000003 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.08),#00000005 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.16),#0000000d calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.22),#00000014 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.29),#00000021 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.35),#0000002e calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.41),#00000040 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.47),#00000052 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.53),#00000066 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.59),#0000007a calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.65),#00000094 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.71),#000000ab calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.78),#000000c7 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.84),#000000e3 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.92),#000000ff calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 1)),linear-gradient(to left,#00000000 0,#00000003 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.08),#00000005 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.16),#0000000d calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.22),#00000014 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.29),#00000021 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.35),#0000002e calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.41),#00000040 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.47),#00000052 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.53),#00000066 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.59),#0000007a calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.65),#00000094 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.71),#000000ab calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.78),#000000c7 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.84),#000000e3 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.92),#000000ff calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 1));mask-size:100% 100%,100% 100%,100% 100%,100% 100%;-webkit-mask-size:100% 100%,100% 100%,100% 100%,100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-composite:intersect;-webkit-mask-composite:source-in}.seed-scroll-fog--hideScrollBar_true{scrollbar-width:none;-ms-overflow-style:none}.seed-scroll-fog--hideScrollBar_true::-webkit-scrollbar{display:none}");
 
-const defaultVariant = {
+const defaultVariant$2 = {
     "hideScrollBar": false
 };
-const compoundVariants = [];
+const compoundVariants$2 = [];
 const scrollFogVariantMap = {
     "hideScrollBar": [
         true
     ]
 };
 function scrollFog(props) {
-    return createClassName("seed-scroll-fog", mergeVariants(defaultVariant, props), compoundVariants);
+    return createClassName("seed-scroll-fog", mergeVariants(defaultVariant$2, props), compoundVariants$2);
 }
 Object.assign(scrollFog, {
     splitVariantProps: (props)=>splitVariantProps(props, scrollFogVariantMap)
@@ -9322,7 +9716,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__*/ jsxRuntime.jsx(IconArrowUpLine_default, {
                                                     size: 13,
                                                     strokeWidth: 1.75
@@ -9333,7 +9727,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__*/ jsxRuntime.jsx(IconArrowDownLine_default, {
                                                     size: 13,
                                                     strokeWidth: 1.75
@@ -9343,7 +9737,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__*/ jsxRuntime.jsx(IconXmarkLine_default, {
                                                     size: 13,
                                                     strokeWidth: 1.75
@@ -9358,7 +9752,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",
@@ -9380,7 +9774,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",
@@ -9478,7 +9872,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__*/ jsxRuntime.jsx(IconXmarkLine_default, {
                             size: 12,
                             strokeWidth: 1.75
@@ -9735,7 +10129,7 @@ const formatFilterDate = (iso)=>{
                                     type: "button",
                                     onClick: ()=>setPickingField(true),
                                     style: {
-                                        ...iconButtonStyle,
+                                        ...iconButtonStyle$1,
                                         width: "auto",
                                         gap: 6,
                                         padding: "6px 8px",
@@ -9820,7 +10214,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
@@ -9956,6 +10350,9 @@ function DataTableInner(props, ref) {
             columnLabels: columnLabels,
             defaultColumnLabels: defaultColumnLabels,
             onColumnLabelsChange: onColumnLabelsChange,
+            pinnedColumnKeys: pinnedColumnKeys,
+            defaultPinnedColumnKeys: defaultPinnedColumnKeys,
+            onPinnedColumnKeysChange: onPinnedColumnKeysChange,
             columnCalcOps: columnCalcOps,
             defaultColumnCalcOps: defaultColumnCalcOps,
             onColumnCalcOpsChange: onColumnCalcOpsChange,
@@ -9999,19 +10396,13 @@ function DataTableInner(props, ref) {
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx(DataTableColGroup, {
                                 columns: columns,
-                                selectable: !!selectable
+                                selectable: !!selectable,
+                                stickyFirst: stickyFirst
                             }),
                             /*#__PURE__*/ jsxRuntime.jsxs(DataTableHeader, {
                                 children: [
-                                    selectable && /*#__PURE__*/ jsxRuntime.jsx(DataTableSelectionHeaderCell, {
-                                        ...stickyProps({
-                                            selectable,
-                                            stickyFirst,
-                                            stickyLast: resolvedStickyLast,
-                                            isSelectionCell: true,
-                                            isFirst: false,
-                                            isLast: false
-                                        }),
+                                    selectable && /*#__PURE__*/ jsxRuntime.jsx(SelectionHeaderCell, {
+                                        stickyFirst: stickyFirst,
                                         children: /*#__PURE__*/ jsxRuntime.jsx(SelectAllCheckbox, {
                                             label: selectAllLabel,
                                             checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON,
@@ -10062,7 +10453,7 @@ function DataTableInner(props, ref) {
                                                 "data-clickable": onRowClick ? "" : undefined,
                                                 onClick: onRowClick ? ()=>onRowClick(row) : undefined,
                                                 children: [
-                                                    selectable && /*#__PURE__*/ jsxRuntime.jsx(DataTableSelectionCell, {
+                                                    selectable && /*#__PURE__*/ jsxRuntime.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
@@ -10070,14 +10461,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__*/ jsxRuntime.jsx(RowCheckbox, {
                                                             label: getRowSelectionLabel(row),
                                                             checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
@@ -10109,15 +10493,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__*/ jsxRuntime.jsx(DataTableFooterCell, {
-                                        ...stickyProps({
-                                            selectable,
-                                            stickyFirst,
-                                            stickyLast: resolvedStickyLast,
-                                            isSelectionCell: true,
-                                            isFirst: false,
-                                            isLast: false
-                                        })
+                                    /*#__PURE__*/ jsxRuntime.jsx(SelectionFooterCell, {
+                                        stickyFirst: stickyFirst
                                     }),
                                     /*#__PURE__*/ jsxRuntime.jsx(ColumnCalcCells, {
                                         columns: columns,
@@ -10153,7 +10530,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
@@ -10188,8 +10574,16 @@ const DataTableTable = withContext$1(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__*/ jsxRuntime.jsxs("colgroup", {
         children: [
             selectable && /*#__PURE__*/ jsxRuntime.jsx("col", {
@@ -10275,6 +10669,32 @@ function DataTableFooter({ children, ...props }) {
     });
 }
 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__*/ jsxRuntime.jsx(DataTableSelectionHeaderCell, {
+        ...selectionStickyProps(resolvedStickyFirst),
+        children: children
+    });
+}
+function SelectionCell({ stickyFirst, onClick, children }) {
+    const resolvedStickyFirst = useSelectionStickyFirst(stickyFirst);
+    return /*#__PURE__*/ jsxRuntime.jsx(DataTableSelectionCell, {
+        onClick: onClick,
+        ...selectionStickyProps(resolvedStickyFirst),
+        children: children
+    });
+}
+function SelectionFooterCell({ stickyFirst }) {
+    const resolvedStickyFirst = useSelectionStickyFirst(stickyFirst);
+    return /*#__PURE__*/ jsxRuntime.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.
@@ -10330,4 +10750,946 @@ function SelectAllCheckbox({ label, checkedIcon, indeterminateIcon }) {
     });
 }
 
+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__*/ jsxRuntime.jsxs(MenuRoot, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(MenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxRuntime.jsxs(ActionButton, {
+                    variant: "neutralOutline",
+                    size: "xsmall",
+                    "data-active": activeViewId ? "" : undefined,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(IconArrowUpArrowDownLine_default, {
+                            size: 14,
+                            strokeWidth: 1.75
+                        }),
+                        triggerLabel,
+                        /*#__PURE__*/ jsxRuntime.jsx(IconChevronDownSmallLine_default, {
+                            size: 14,
+                            strokeWidth: 1.75
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(MenuPositioner, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(MenuContent, {
+                    style: {
+                        minWidth: 240
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuScrollArea, {
+                        children: /*#__PURE__*/ jsxRuntime.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 } = reactMenu.useMenuContext();
+    const [renamingId, setRenamingId] = React__namespace.useState(null);
+    const [renameValue, setRenameValue] = React__namespace.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__namespace.useRef(false);
+    const renameInputRef = React__namespace.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__namespace.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__*/ jsxRuntime.jsxs("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            padding: "4px 8px"
+        },
+        children: [
+            showClearRow && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                type: "button",
+                onClick: ()=>handleSelect(null),
+                "data-active": !activeViewId ? "" : undefined,
+                style: rowButtonStyle,
+                children: clearLabel ?? label
+            }),
+            views.length === 0 && /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("div", {
+                    style: rowStyle,
+                    children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsxs("div", {
+                    style: rowStyle,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            type: "button",
+                            onClick: ()=>handleSelect(view.id),
+                            "data-active": view.id === activeViewId ? "" : undefined,
+                            style: rowButtonStyle,
+                            children: view.name
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            type: "button",
+                            onClick: ()=>startRename(view),
+                            style: smallButtonStyle,
+                            children: renameLabel
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            type: "button",
+                            "aria-label": `${deleteLabel} ${view.name}`,
+                            onClick: ()=>deleteView(view.id),
+                            style: iconButtonStyle,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(IconXmarkLine_default, {
+                                size: 13,
+                                strokeWidth: 1.75
+                            })
+                        })
+                    ]
+                }, view.id)),
+            activeViewId && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                type: "button",
+                onClick: handleUpdate,
+                style: {
+                    ...rowButtonStyle,
+                    color: "var(--seed-color-fg-neutral-subtle)"
+                },
+                children: updateViewLabel
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                type: "button",
+                onClick: handleCreate,
+                style: rowButtonStyle,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(IconPlusLine_default, {
+                        size: 13,
+                        strokeWidth: 1.75
+                    }),
+                    newViewLabel
+                ]
+            })
+        ]
+    });
+}
+
+__insertCSS(".seed-resizable-panel__root{position:relative;display:flex;height:100%}.seed-resizable-panel__spacer{flex:0 0 auto;height:100%;transition:width .14s}.seed-resizable-panel__panel{position:absolute;top:0;bottom:0;box-sizing:border-box;overflow:hidden;background:var(--seed-color-bg-layer-default)}.seed-resizable-panel__panel[data-side=left]{left:0}.seed-resizable-panel__panel[data-side=right]{right:0}.seed-resizable-panel__panel[data-floating=false]{border-radius:0;box-shadow:none}.seed-resizable-panel__panel[data-floating=false][data-side=left]{border-inline-end:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=false][data-side=right]{border-inline-start:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=true]{position:fixed;top:8px;bottom:8px;border-inline-end:none;border-inline-start:none;border-radius:10px;box-shadow:inset 0 0 0 1px transparent,0 0 0 1px rgba(28,40,64,.04),0 4px 8px -4px rgba(28,40,64,.12),0 4px 12px -2px rgba(24,41,75,.16);transform:none;transition:transform .14s,padding .14s}.seed-resizable-panel__panel[data-floating=true][data-side=left]{padding:8px 0 8px 8px}[data-floating=true]>.seed-resizable-panel__inner{transition:opacity .14s}.seed-resizable-panel__handle[data-side=left]{right:0}.seed-resizable-panel__handle[data-side=right]{left:0}.seed-resizable-panel__handle::before{content:\"\";position:absolute;top:0;width:1px;height:100%;background:var(--seed-color-stroke-neutral-muted);transition:background-color .16s,height .16s}.seed-resizable-panel__handle[data-side=left]::before{right:0}.seed-resizable-panel__handle[data-side=right]::before{left:0}.seed-resizable-panel__handle:hover::before,.seed-resizable-panel__handle[data-dragging]::before{width:2px;background:#0298d9}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column{display:flex;align-items:center;justify-content:center;width:7px;left:-3px;right:-3px;z-index:1;cursor:col-resize}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column::before{content:none}.seed-resizable-panel__handleInner{width:3px;height:100%;border-radius:3px;background:#0298d9;opacity:0;transition:opacity .1s .1s}.seed-resizable-panel__handle:hover .seed-resizable-panel__handleInner,.seed-resizable-panel__handle[data-dragging] .seed-resizable-panel__handleInner{opacity:1}");
+
+const resizablePanelSlotNames = [
+    [
+        "root",
+        "seed-resizable-panel__root"
+    ],
+    [
+        "spacer",
+        "seed-resizable-panel__spacer"
+    ],
+    [
+        "panel",
+        "seed-resizable-panel__panel"
+    ],
+    [
+        "inner",
+        "seed-resizable-panel__inner"
+    ],
+    [
+        "handle",
+        "seed-resizable-panel__handle"
+    ],
+    [
+        "handleInner",
+        "seed-resizable-panel__handleInner"
+    ]
+];
+const defaultVariant$1 = {};
+const compoundVariants$1 = [];
+const resizablePanelVariantMap = {};
+function resizablePanel(props) {
+    return Object.fromEntries(resizablePanelSlotNames.map(([slot, className])=>{
+        return [
+            slot,
+            createClassName(className, mergeVariants(defaultVariant$1, props), compoundVariants$1)
+        ];
+    }));
+}
+Object.assign(resizablePanel, {
+    splitVariantProps: (props)=>splitVariantProps(props, resizablePanelVariantMap)
+}); // @recipe(seed): resizable-panel
+
+// Pure geometry + persistence helpers for ResizablePanel -- isolated from React so
+// they're unit-testable without a DOM, the same split `useDataTable`'s own dom.ts
+// draws for its column-layout math. Ported from your-moon/crisp's
+// `components/resizablepanel/resizablepanel.tsx` (computeDragWidth/widthToPercent/
+// percentToWidth/readStoredPercent/writeStoredPercent), unchanged in behavior.
+/**
+ * Drag delta -> next width, in px, signed by which edge of the panel the handle
+ * drags from. A left-side panel's handle sits at its *right* edge, so dragging
+ * right (positive dx) grows it; a right-side panel's handle sits at its *left*
+ * edge, so dragging right shrinks it.
+ */ function computeDragWidth(startWidth, startX, clientX, side) {
+    const dx = clientX - startX;
+    return side === "left" ? startWidth + dx : startWidth - dx;
+}
+/** width (px) -> percentage of the container's width. Pure, unrounded. */ function widthToPercent(width, containerWidth) {
+    if (!(containerWidth > 0)) return 0;
+    return width / containerWidth * 100;
+}
+/** percentage of the container's width -> width (px). Pure, unrounded. */ function percentToWidth(percent, containerWidth) {
+    return percent / 100 * containerWidth;
+}
+/**
+ * Reads a persisted width percentage, wrapped in try/catch: `localStorage` can
+ * throw (private browsing, storage disabled), and a resizable panel failing to
+ * *render* over a persistence error would be worse than the panel simply
+ * forgetting its width. `storage` defaults to `window.localStorage` and exists
+ * as a seam for tests -- dropping the try/catch here is the exact failure this
+ * must catch.
+ */ function readStoredPercent(key, storage = window.localStorage) {
+    try {
+        const raw = storage.getItem(key);
+        if (raw == null) return null;
+        const n = Number(raw);
+        return Number.isFinite(n) ? n : null;
+    } catch  {
+        // private mode / storage disabled -- behave as if nothing is stored
+        return null;
+    }
+}
+/** Writes a persisted width percentage, wrapped in try/catch -- see {@link readStoredPercent}. */ function writeStoredPercent(key, percent, storage = window.localStorage) {
+    try {
+        storage.setItem(key, String(percent));
+    } catch  {
+    // private mode / quota exceeded -- persistence is best-effort
+    }
+}
+/**
+ * Owns ResizablePanel's width state and pointer-drag handling -- the same
+ * split `useDataTableSort` draws between the state it owns and the DOM
+ * ref/style/recipe-class assembly a styled component does on top. Ported
+ * from your-moon/crisp's `resizablepanel.tsx`; ONLY the state/behavior moved
+ * here, not the DOM -- `ResizablePanel.tsx` (react package) still renders
+ * the spacer/panel/handle and reads back the panel's actual rendered rect,
+ * because crisp's own comment matters just as much in this split: constraints
+ * are CSS `min-width`/`max-width`, never re-clamped in JS. This hook only
+ * ever writes an UNclamped drag width; the caller's own panel ref is what
+ * gets read back after layout on pointerup.
+ */ function useResizablePanel(props) {
+    const { side = "left", size, defaultSize = 280, onSizeChange, storageKey } = props;
+    const controlled = size != null;
+    const [width, setWidth] = useControllableState$1({
+        prop: size,
+        defaultProp: defaultSize,
+        onChange: onSizeChange
+    });
+    const containerRef = React__namespace.useRef(null);
+    const panelRef = React__namespace.useRef(null);
+    const dragRef = React__namespace.useRef(null);
+    const [dragging, setDragging] = React__namespace.useState(false);
+    // Restore a persisted percentage on mount (uncontrolled + storageKey only).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: restore the persisted width once, on mount only
+    React__namespace.useEffect(()=>{
+        if (controlled || !storageKey) return;
+        const percent = readStoredPercent(storageKey);
+        if (percent == null) return;
+        const containerWidth = containerRef.current?.getBoundingClientRect().width;
+        if (!containerWidth) return;
+        setWidth(percentToWidth(percent, containerWidth));
+    }, []);
+    const commitSize = React__namespace.useCallback((next)=>{
+        setWidth(next);
+        if (!controlled && storageKey) {
+            const containerWidth = containerRef.current?.getBoundingClientRect().width;
+            if (containerWidth) {
+                writeStoredPercent(storageKey, widthToPercent(next, containerWidth));
+            }
+        }
+    }, [
+        controlled,
+        setWidth,
+        storageKey
+    ]);
+    const onHandlePointerDown = React__namespace.useCallback((event)=>{
+        event.preventDefault();
+        event.target.setPointerCapture?.(event.pointerId);
+        dragRef.current = {
+            startX: event.clientX,
+            startWidth: width,
+            moved: false
+        };
+    }, [
+        width
+    ]);
+    const onHandlePointerMove = React__namespace.useCallback((event)=>{
+        const drag = dragRef.current;
+        if (!drag) return;
+        if (!drag.moved) {
+            drag.moved = true;
+            setDragging(true);
+        }
+        const next = computeDragWidth(drag.startWidth, drag.startX, event.clientX, side);
+        setWidth(next);
+    }, [
+        side,
+        setWidth
+    ]);
+    const onHandlePointerUp = React__namespace.useCallback((event)=>{
+        const drag = dragRef.current;
+        dragRef.current = null;
+        setDragging(false);
+        event.target.releasePointerCapture?.(event.pointerId);
+        if (!drag) return;
+        // Never re-clamp here: read back the panel's actual, CSS-clamped
+        // rendered width after layout, and commit *that* value.
+        const rect = panelRef.current?.getBoundingClientRect();
+        const finalWidth = rect ? Math.round(rect.width) : width;
+        commitSize(finalWidth);
+    }, [
+        width,
+        commitSize
+    ]);
+    // your-moon/crisp#795: double-click resets to `defaultSize`, confirmed
+    // live on Attio's own record-page divider. Reuses `commitSize`, the same
+    // commit path a drag already uses, so persistence (`storageKey`) picks up
+    // the reset the same way it picks up a drag.
+    const onHandleDoubleClick = React__namespace.useCallback(()=>{
+        commitSize(defaultSize);
+    }, [
+        commitSize,
+        defaultSize
+    ]);
+    return {
+        width,
+        dragging,
+        containerRef,
+        panelRef,
+        handleHandlers: {
+            onPointerDown: onHandlePointerDown,
+            onPointerMove: onHandlePointerMove,
+            onPointerUp: onHandlePointerUp,
+            onDoubleClick: onHandleDoubleClick
+        }
+    };
+}
+
+// The "column" handle variant's own wider hit-target class -- a literal
+// class name (not a recipe slot) the same way the recipe itself keys off it
+// (`resizable-panel.ts`'s own `.crisp-seed-resizable-panel-handle--column`
+// selector), so this component and that recipe stay in lockstep without a
+// second source of truth for the string.
+const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
+/**
+ * An adjustable-panel primitive: a spacer that reserves layout width plus a
+ * panel that overlays it, so the panel can move between docked (in-flow) and
+ * floating (`position: fixed`, an overlay) without a reflow glitch. Drag the
+ * edge handle to resize; constraints are CSS `min-width`/`max-width`, never
+ * re-clamped in JS. Ported from your-moon/crisp's `ResizablePanel`
+ * (`components/resizablepanel/`); state/drag behavior lives in
+ * `useResizablePanel` (`@seed-design/react-resizable-panel`), this component
+ * owns the DOM + recipe classes on top of it.
+ */ const ResizablePanel = /*#__PURE__*/ React.forwardRef(({ side = "left", width: sizeProp, defaultSize = 280, onWidthChange, min = 200, max, floating = false, handleVariant = "panel", resizable = true, storageKey, className, children, ...rest }, forwardedRef)=>{
+    const { width, dragging, containerRef, panelRef, handleHandlers } = useResizablePanel({
+        side,
+        size: sizeProp,
+        defaultSize,
+        onSizeChange: onWidthChange,
+        storageKey
+    });
+    const classNames = resizablePanel();
+    const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
+    const panelSizeStyle = {
+        width,
+        minWidth: min,
+        maxWidth: maxStyle
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+        ref: (node)=>{
+            containerRef.current = node;
+            if (typeof forwardedRef === "function") forwardedRef(node);
+            else if (forwardedRef) forwardedRef.current = node;
+        },
+        className: clsx(classNames.root, className),
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                className: classNames.spacer,
+                style: floating ? {
+                    width: 0
+                } : {
+                    width,
+                    minWidth: min,
+                    maxWidth: maxStyle
+                }
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                ref: panelRef,
+                className: classNames.panel,
+                "data-side": side,
+                "data-floating": floating ? "true" : "false",
+                style: panelSizeStyle,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                        className: classNames.inner,
+                        children: children
+                    }),
+                    resizable && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                        className: clsx(classNames.handle, handleVariant === "column" && COLUMN_HANDLE_CLASS),
+                        "data-side": side,
+                        "data-dragging": dragging ? "true" : undefined,
+                        "data-handle": "",
+                        ...handleHandlers,
+                        children: handleVariant === "column" && /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                            className: classNames.handleInner,
+                            "aria-hidden": "true"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+});
+ResizablePanel.displayName = "ResizablePanel";
+
+__insertCSS(".seed-record-panel__root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--seed-color-bg-layer-default);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-record-panel__toolbar{display:flex;align-items:center;height:49px;flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-panel__toolbarSpacer{flex:1}.seed-record-panel__pager{display:flex;align-items:center;gap:6px;margin-inline-start:12px}.seed-record-panel__counter{margin-inline-start:12px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seed-record-panel__iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;cursor:pointer;transition:background-color .12s}.seed-record-panel__iconbtn:hover{background:var(--seed-color-bg-layer-fill);color:var(--seed-color-fg-neutral)}.seed-record-panel__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 2px rgba(28,40,64,.18),0 1px 3px rgba(0,0,0,.04);color:var(--seed-color-fg-neutral);font-family:inherit;cursor:pointer}.seed-record-panel__navbtn:hover:not(:disabled){background:var(--seed-color-bg-layer-fill)}.seed-record-panel__navbtn:disabled{opacity:.4;cursor:not-allowed}.seed-record-panel__header{display:flex;align-items:center;gap:8px;height:52px;flex-shrink:0;padding:0 12px}.seed-record-panel__fav{width:22px;height:22px;border-radius:4px;flex-shrink:0;object-fit:cover;background:var(--seed-color-bg-layer-fill)}.seed-record-panel__title{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-panel__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-panel__section{padding:8px 4px 0}.seed-record-panel__sectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;margin-bottom:8px}.seed-record-panel__sectionLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-panel__sectionAction{border:none;background:0 0;padding:0;font-family:inherit;font-size:10px;font-weight:400;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer}.seed-record-panel__sectionAction:hover{color:var(--seed-color-fg-neutral)}.seed-record-panel__highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seed-record-panel__highlight{display:flex;flex-direction:column;gap:6px;min-width:0}.seed-record-panel__highlightLabel{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-panel__highlightLabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-panel__highlightLabel svg{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle)}.seed-record-panel__highlightValue{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis}.seed-record-panel__activity{font-size:14px}.seed-record-panel__sections{display:flex;flex-direction:column;padding-top:8px}.seed-record-panel__sectionTrigger{display:flex;align-items:center;gap:4px;width:100%;height:20px;padding:0 8px 0 12px;border:none;background:0 0;font-family:inherit;text-align:start;cursor:pointer}.seed-record-panel__sectionTrigger[data-inert]{cursor:default}.seed-record-panel__sectionRowLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral)}.seed-record-panel__sectionRowCount{font-size:14px;color:var(--seed-color-fg-neutral-subtle)}.seed-record-panel__sectionChevron{margin-inline-start:auto;flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);transition:transform .15s ease}.seed-record-panel__sectionChevron[data-open]{transform:rotate(180deg)}.seed-record-panel__sectionContent{padding:8px 8px 8px 12px}.seed-record-panel__footer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--seed-color-stroke-neutral-muted)}");
+
+const recordPanelSlotNames = [
+    [
+        "root",
+        "seed-record-panel__root"
+    ],
+    [
+        "toolbar",
+        "seed-record-panel__toolbar"
+    ],
+    [
+        "toolbarSpacer",
+        "seed-record-panel__toolbarSpacer"
+    ],
+    [
+        "pager",
+        "seed-record-panel__pager"
+    ],
+    [
+        "counter",
+        "seed-record-panel__counter"
+    ],
+    [
+        "iconbtn",
+        "seed-record-panel__iconbtn"
+    ],
+    [
+        "navbtn",
+        "seed-record-panel__navbtn"
+    ],
+    [
+        "header",
+        "seed-record-panel__header"
+    ],
+    [
+        "fav",
+        "seed-record-panel__fav"
+    ],
+    [
+        "title",
+        "seed-record-panel__title"
+    ],
+    [
+        "body",
+        "seed-record-panel__body"
+    ],
+    [
+        "section",
+        "seed-record-panel__section"
+    ],
+    [
+        "sectionHead",
+        "seed-record-panel__sectionHead"
+    ],
+    [
+        "sectionLabel",
+        "seed-record-panel__sectionLabel"
+    ],
+    [
+        "sectionAction",
+        "seed-record-panel__sectionAction"
+    ],
+    [
+        "highlights",
+        "seed-record-panel__highlights"
+    ],
+    [
+        "highlight",
+        "seed-record-panel__highlight"
+    ],
+    [
+        "highlightLabel",
+        "seed-record-panel__highlightLabel"
+    ],
+    [
+        "highlightValue",
+        "seed-record-panel__highlightValue"
+    ],
+    [
+        "activity",
+        "seed-record-panel__activity"
+    ],
+    [
+        "sections",
+        "seed-record-panel__sections"
+    ],
+    [
+        "sectionTrigger",
+        "seed-record-panel__sectionTrigger"
+    ],
+    [
+        "sectionRowLabel",
+        "seed-record-panel__sectionRowLabel"
+    ],
+    [
+        "sectionRowCount",
+        "seed-record-panel__sectionRowCount"
+    ],
+    [
+        "sectionChevron",
+        "seed-record-panel__sectionChevron"
+    ],
+    [
+        "sectionContent",
+        "seed-record-panel__sectionContent"
+    ],
+    [
+        "footer",
+        "seed-record-panel__footer"
+    ]
+];
+const defaultVariant = {};
+const compoundVariants = [];
+const recordPanelVariantMap = {};
+function recordPanel(props) {
+    return Object.fromEntries(recordPanelSlotNames.map(([slot, className])=>{
+        return [
+            slot,
+            createClassName(className, mergeVariants(defaultVariant, props), compoundVariants)
+        ];
+    }));
+}
+Object.assign(recordPanel, {
+    splitVariantProps: (props)=>splitVariantProps(props, recordPanelVariantMap)
+}); // @recipe(seed): record-panel
+
+const RESIZE_MIN_WIDTH = 360;
+const RESIZE_MAX_WIDTH = 720;
+/**
+ * Right-side record peek panel -- Attio's own peek shows a Highlights card
+ * area and an Activity feed (measured live). Ported from your-moon/crisp's
+ * `RecordPanel` (`product/recordpanel/`), built ON `ResizablePanel`
+ * (`side="right" floating`) rather than crisp's own duplicate absolute-
+ * positioning/slide-in/resize-handle implementation -- the outer shell (the
+ * `@starting-style` slide-in, the floating elevation, the drag handle
+ * itself) all come from that primitive; this component only renders the
+ * CONTENT inside it.
+ */ function RecordPanel({ open, record, onClose, className, closeLabel = "Close panel", onOpenRecord, openRecordLabel = "Open record", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", title, avatar, highlightsLabel = "Highlights", highlights, counterLabel, resizable = false, width, defaultWidth = 420, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, footer, ...rest }) {
+    const titleId = React.useId();
+    const classNames = recordPanel();
+    // Which sections (your-moon/crisp#413) are expanded -- uncontrolled and
+    // independent (Attio's own Emails/Notes/Tasks open without closing one
+    // another): a plain `Set`, reset whenever the record itself changes so a
+    // stale open section doesn't carry over between two different records.
+    const [openSections, setOpenSections] = React.useState(()=>new Set());
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `record` is read as a change TRIGGER, not a value the effect body needs -- reset whenever it changes identity, regardless of what it now points to.
+    React.useEffect(()=>{
+        setOpenSections(new Set());
+    }, [
+        record
+    ]);
+    const toggleSection = (key)=>setOpenSections((prev)=>{
+            const next = new Set(prev);
+            if (next.has(key)) next.delete(key);
+            else next.add(key);
+            return next;
+        });
+    // Close on Escape while open. Simpler than crisp's own version (crisp
+    // additionally checks `hasOpenFloatingLayer()` so an Escape meant for a
+    // nested Menu/Select/Popover doesn't also close this panel) -- crispy-seed
+    // has no equivalent floating-stack registry to read, so a consumer nesting
+    // its own floating layers inside `footer`/`sections` content should stop
+    // propagation on its own Escape handler.
+    React.useEffect(()=>{
+        if (!open) return;
+        const onKey = (event)=>{
+            if (event.key === "Escape") onClose();
+        };
+        document.addEventListener("keydown", onKey);
+        return ()=>document.removeEventListener("keydown", onKey);
+    }, [
+        open,
+        onClose
+    ]);
+    if (!open || !record) return null;
+    const heading = title ?? record.name ?? "Record";
+    return /*#__PURE__*/ jsxRuntime.jsx(ResizablePanel, {
+        side: "right",
+        floating: true,
+        resizable: resizable,
+        width: width,
+        defaultSize: defaultWidth,
+        onWidthChange: onWidthChange,
+        min: minWidth,
+        max: maxWidth,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+            className: clsx(classNames.root, className),
+            ...rest,
+            role: "dialog",
+            "aria-labelledby": titleId,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                    className: classNames.toolbar,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
+                            type: "button",
+                            className: classNames.iconbtn,
+                            "aria-label": closeLabel,
+                            onClick: onClose,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(IconXmarkLine_default, {
+                                size: 16
+                            })
+                        }),
+                        (onPrevious || onNext) && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.span, {
+                            className: classNames.pager,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
+                                    type: "button",
+                                    className: classNames.navbtn,
+                                    "aria-label": previousRecordLabel,
+                                    disabled: !onPrevious,
+                                    onClick: onPrevious,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(IconChevronUpLine_default, {
+                                        size: 16
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
+                                    type: "button",
+                                    className: classNames.navbtn,
+                                    "aria-label": nextRecordLabel,
+                                    disabled: !onNext,
+                                    onClick: onNext,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(IconChevronDownLine_default, {
+                                        size: 16
+                                    })
+                                })
+                            ]
+                        }),
+                        counterLabel != null && /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                            className: classNames.counter,
+                            children: counterLabel
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                            className: classNames.toolbarSpacer
+                        }),
+                        onOpenRecord && /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
+                            type: "button",
+                            className: classNames.navbtn,
+                            "aria-label": openRecordLabel,
+                            onClick: onOpenRecord,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(IconArrowUpRightLine_default, {
+                                size: 16
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                    className: classNames.header,
+                    children: [
+                        avatar ? /*#__PURE__*/ jsxRuntime.jsx(Primitive.img, {
+                            className: classNames.fav,
+                            src: avatar,
+                            alt: ""
+                        }) : /*#__PURE__*/ jsxRuntime.jsx(AvatarRoot, {
+                            size: "24",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(AvatarFallback, {
+                                children: (record.name ?? "?").charAt(0)
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                            id: titleId,
+                            className: classNames.title,
+                            children: heading
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                    className: classNames.body,
+                    children: [
+                        highlights && highlights.length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                            className: classNames.section,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                                    className: classNames.sectionHead,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                        className: classNames.sectionLabel,
+                                        children: highlightsLabel
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                                    className: classNames.highlights,
+                                    children: highlights.map((h)=>/*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                                            className: classNames.highlight,
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.span, {
+                                                    className: classNames.highlightLabel,
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                            children: h.label
+                                                        }),
+                                                        h.icon ? /*#__PURE__*/ jsxRuntime.jsx(h.icon, {
+                                                            size: 16
+                                                        }) : null
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                                    className: classNames.highlightValue,
+                                                    children: h.value
+                                                })
+                                            ]
+                                        }, h.key))
+                                })
+                            ]
+                        }),
+                        activity != null && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                            className: classNames.section,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                                    className: classNames.sectionHead,
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                            className: classNames.sectionLabel,
+                                            children: activityLabel
+                                        }),
+                                        onViewAllActivity && /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
+                                            type: "button",
+                                            className: classNames.sectionAction,
+                                            onClick: onViewAllActivity,
+                                            children: viewAllActivityLabel
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                                    className: classNames.activity,
+                                    children: activity
+                                })
+                            ]
+                        }),
+                        sections && sections.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                            className: classNames.sections,
+                            children: sections.map((s)=>{
+                                const isOpen = openSections.has(s.key);
+                                const panelId = `${titleId}-section-${s.key}`;
+                                return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    children: [
+                                        s.content ? /*#__PURE__*/ jsxRuntime.jsxs(Primitive.button, {
+                                            type: "button",
+                                            className: classNames.sectionTrigger,
+                                            "aria-expanded": isOpen,
+                                            "aria-controls": panelId,
+                                            onClick: ()=>toggleSection(s.key),
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                                    className: classNames.sectionRowLabel,
+                                                    children: s.label
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                                    className: classNames.sectionRowCount,
+                                                    children: s.count
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(IconChevronDownLine_default, {
+                                                    className: classNames.sectionChevron,
+                                                    size: 14,
+                                                    "data-open": isOpen ? "" : undefined,
+                                                    "aria-hidden": "true"
+                                                })
+                                            ]
+                                        }) : /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                                            className: classNames.sectionTrigger,
+                                            "data-inert": "",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                                    className: classNames.sectionRowLabel,
+                                                    children: s.label
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                                    className: classNames.sectionRowCount,
+                                                    children: s.count
+                                                })
+                                            ]
+                                        }),
+                                        s.content && isOpen && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                                            id: panelId,
+                                            className: classNames.sectionContent,
+                                            children: s.content
+                                        })
+                                    ]
+                                }, s.key);
+                            })
+                        })
+                    ]
+                }),
+                footer != null && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                    className: classNames.footer,
+                    children: footer
+                })
+            ]
+        })
+    });
+}
+RecordPanel.displayName = "RecordPanel";
+
 exports.DataTable = DataTable;
+exports.DataTableViewsControl = DataTableViewsControl;
+exports.RecordPanel = RecordPanel;
+exports.ResizablePanel = ResizablePanel;