@crispy-seed/data-table 0.10.5 → 0.11.1

package/dist/index.cjs

@@ -17,6 +17,9 @@ var reactCheckbox = require('@seed-design/react-checkbox');
 var reactScaleFeedback = require('@seed-design/react-scale-feedback');
 var checkboxGroup = require('@seed-design/css/recipes/checkbox-group');
 var reactDom = require('react-dom');
+var reactMenu = require('@seed-design/react-menu');
+var menu = require('@seed-design/css/recipes/menu');
+var menuItem = require('@seed-design/css/recipes/menu-item');
 var reactImage = require('@seed-design/react-image');
 var avatar = require('@seed-design/css/recipes/avatar');
 require('@seed-design/css/recipes/avatar-stack');
@@ -31,9 +34,6 @@ var _switch = require('@seed-design/css/recipes/switch');
 var switchmark = require('@seed-design/css/recipes/switchmark');
 var reactTextField = require('@seed-design/react-text-field');
 var textInput = require('@seed-design/css/recipes/text-input');
-var reactMenu = require('@seed-design/react-menu');
-var menu = require('@seed-design/css/recipes/menu');
-var menuItem = require('@seed-design/css/recipes/menu-item');
 var tabs = require('@seed-design/css/recipes/tabs');
 
 function _interopNamespace(e) {
@@ -780,7 +780,10 @@ function isFunction$1(value) {
 const DATA_TABLE_UNIVERSAL_CALC_OPS = [
     "count",
     "empty",
-    "notEmpty"
+    "notEmpty",
+    "percentEmpty",
+    "percentFilled",
+    "none"
 ];
 const DATA_TABLE_NUMERIC_CALC_OPS = [
     "sum",
@@ -795,8 +798,11 @@ const DATA_TABLE_NUMERIC_CALC_OPS = [
 ];
 const DATA_TABLE_CALC_LABEL = {
     count: "Count",
-    empty: "Empty",
-    notEmpty: "Not empty",
+    empty: "Count empty",
+    notEmpty: "Count filled",
+    percentEmpty: "Percent empty",
+    percentFilled: "Percent filled",
+    none: "None",
     sum: "Sum",
     average: "Average",
     median: "Median",
@@ -826,7 +832,12 @@ const DATA_TABLE_CALC_LABEL = {
  * (`JSON.stringify`-normalized, so two arrays/objects with the same shape count
  * once) -- empties are already their own op (`empty`), so folding them into "one
  * more unique value" here would double-count the same information two different
- * ways in the same menu.
+ * ways in the same menu. `percentEmpty`/`percentFilled` are `empty`/`notEmpty` as a
+ * share of the row count (0-100, unrounded -- formatting rounds it for display) --
+ * `null` on zero rows, since 0/0 has no meaningful percentage (not 0%, not 100%).
+ * `none` always renders nothing: it is Attio's own "no calculation" menu entry, not a
+ * separate always-appended "Clear" item, and picking it is a real, storable op so it
+ * overrides a `summaryDefaultOp` instead of falling back to it.
  */ function computeColumnCalc(values, op) {
     switch(op){
         case "count":
@@ -835,6 +846,14 @@ const DATA_TABLE_CALC_LABEL = {
             return values.filter(isEmptyValueForCalc).length;
         case "notEmpty":
             return values.filter((value)=>!isEmptyValueForCalc(value)).length;
+        case "percentEmpty":
+            if (values.length === 0) return null;
+            return values.filter(isEmptyValueForCalc).length / values.length * 100;
+        case "percentFilled":
+            if (values.length === 0) return null;
+            return values.filter((value)=>!isEmptyValueForCalc(value)).length / values.length * 100;
+        case "none":
+            return null;
         case "countUnique":
             {
                 const seen = new Set(values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>JSON.stringify(value)));
@@ -968,15 +987,33 @@ function sameCell$1(a, id, key) {
  * first captured) nor keeps a ghost entry for one that was removed. Known keys keep
  * their position from `order`; any key in `keys` missing from `order` is appended, in
  * `keys`' own order; any entry in `order` no longer in `keys` is dropped.
- */ function reconcileColumnOrder(order, keys) {
+ *
+ * `actionsKey` (the styled layer's `actions`-flagged column, e.g. the row-menu `⋯`
+ * column) is kept LAST no matter what -- without this, a brand-new column added to
+ * `columns` after the table first mounted got appended past it (the "any key in `keys`
+ * missing from `order` is appended" rule above has no notion of "past the end" vs. "at
+ * the very end"), stranding it in the middle of the table since `stickyLast`/`actions`
+ * only sticks the actual trailing column. A real consumer hit this: their newly-added
+ * column landed to the right of the already-pinned-sticky `actions` column, covered by
+ * it under horizontal scroll. Column-layout's own `pinnedCellProps` independently
+ * targets the `actions` column by FLAG rather than by position (belt and suspenders --
+ * see that file's own doc comment), but this still keeps the VISUAL order sane so nothing
+ * renders hidden behind the sticky cell in the first place.
+ */ function reconcileColumnOrder(order, keys, actionsKey) {
     const keySet = new Set(keys);
     const known = order.filter((key)=>keySet.has(key));
     const knownSet = new Set(known);
     const added = keys.filter((key)=>!knownSet.has(key));
-    return [
+    const merged = [
         ...known,
         ...added
     ];
+    if (actionsKey === undefined || !keySet.has(actionsKey)) return merged;
+    const withoutActions = merged.filter((key)=>key !== actionsKey);
+    return [
+        ...withoutActions,
+        actionsKey
+    ];
 }
 /**
  * Moves `key` one step toward `direction` in `order` -- a no-op (same array, well,
@@ -1155,7 +1192,7 @@ const EMPTY_RECORD = {};
  * 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, pinnedColumnKeys: pinnedProp, defaultPinnedColumnKeys = EMPTY_STRINGS, onPinnedColumnKeysChange } = props;
+    const { columnKeys = EMPTY_STRINGS, actionsColumnKey, 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,
@@ -1166,9 +1203,10 @@ const EMPTY_RECORD = {};
     // consumer persisted before a new column existed must still show that new column
     // (appended), and one holding a column that got removed from `columns` must not
     // render a ghost header for it.
-    const columnOrder = React.useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys), [
+    const columnOrder = React.useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys, actionsColumnKey), [
         rawOrder,
-        columnKeys
+        columnKeys,
+        actionsColumnKey
     ]);
     const [hiddenColumnKeys = EMPTY_STRINGS, setHiddenColumnKeys] = useControllableState$1({
         prop: hiddenProp,
@@ -1653,6 +1691,17 @@ function useDataTableSelection(props) {
         rowIds,
         setSelectedIds
     ]);
+    // Bulk-action bar's own "×" (gap #4, DATATABLE-ATTIO-SPEC's Attio review) --
+    // deliberately its own function rather than reusing `toggleAll`: `toggleAll` only
+    // clears from an "all" selection, and otherwise SELECTS every row (`selectionState
+    // === "some"` -> `rowIds`, above) -- exactly the wrong direction for a "clear
+    // selection" affordance shown while `selectionState` is "some". This always empties
+    // the set, regardless of `selectionState`.
+    const clearSelection = React.useCallback(()=>{
+        setSelectedIds([]);
+    }, [
+        setSelectedIds
+    ]);
     const getRowProps = React.useCallback((rowId)=>{
         const isRowSelected = isSelected(rowId);
         return domUtils.elementProps({
@@ -1671,6 +1720,7 @@ function useDataTableSelection(props) {
         isSelected,
         toggleRow,
         toggleAll,
+        clearSelection,
         getRowProps
     };
 }
@@ -2138,7 +2188,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, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, 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, actionsColumnKey, 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,
@@ -2158,6 +2208,7 @@ const DataTableRoot = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         defaultToolbarFilters,
         onToolbarFiltersChange,
         columnKeys,
+        actionsColumnKey,
         columnOrder,
         defaultColumnOrder,
         onColumnOrderChange,
@@ -2679,11 +2730,70 @@ CheckboxIndicator.displayName = "CheckboxIndicator";
 const CheckboxLabel = withContext$6(withStateProps$4(Primitive.span), "label");
 const CheckboxHiddenInput = reactCheckbox.Checkbox.HiddenInput;
 
-const { withProvider: withProvider$2, withContext: withContext$5 } = createSlotRecipeContext(avatar.avatar);
+const { ClassNamesProvider: ClassNamesProvider$2, withContext: withContext$5, useClassNames: useClassNames$2 } = createSlotRecipeContext(menu.menu);
+const { PropsProvider: ItemPropsProvider$1, useProps: useItemProps$1, withContext: withItemContext$1, ClassNamesProvider: ItemClassNamesProvider$1 } = createSlotRecipeContext(menuItem.menuItem);
+const withStateProps$3 = createWithStateProps([
+    reactMenu.useMenuContext
+]);
+const withItemStateProps$1 = createWithStateProps([
+    reactMenu.useMenuItemContext
+]);
+const MenuRoot = (props)=>{
+    const [variantProps, otherProps] = menu.menu.splitVariantProps(props);
+    const classNames = menu.menu(variantProps);
+    return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider$2, {
+        value: classNames,
+        children: /*#__PURE__*/ jsxRuntime.jsx(ItemPropsProvider$1, {
+            value: {
+                size: variantProps.size
+            },
+            children: /*#__PURE__*/ jsxRuntime.jsx(reactMenu.Menu.Root, {
+                ...otherProps
+            })
+        })
+    });
+};
+const MenuAnchor = reactMenu.Menu.Anchor;
+const MenuTrigger = reactMenu.Menu.Trigger;
+const MenuPositioner = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>{
+    const classNames = useClassNames$2();
+    return /*#__PURE__*/ jsxRuntime.jsx(reactMenu.Menu.Positioner, {
+        ref: ref,
+        className: clsx(classNames.positioner, className),
+        ...props
+    });
+});
+MenuPositioner.displayName = "MenuPositioner";
+const MenuContent = withContext$5(reactMenu.Menu.Content, "content");
+const MenuScrollArea = withContext$5(withStateProps$3(Primitive.div), "scrollArea");
+withContext$5(reactMenu.Menu.Group, "group");
+withContext$5(reactMenu.Menu.GroupLabel, "groupLabel");
+const MenuItem = /*#__PURE__*/ React__namespace.forwardRef(({ className: propClassName, ...props }, ref)=>{
+    const [variantProps, otherProps] = menuItem.menuItem.splitVariantProps(props);
+    const parentProps = useItemProps$1();
+    const classNames = menuItem.menuItem({
+        ...parentProps,
+        ...variantProps
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(ItemClassNamesProvider$1, {
+        value: classNames,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactMenu.Menu.Item, {
+            ref: ref,
+            className: clsx(classNames.root, propClassName),
+            ...otherProps
+        })
+    });
+});
+MenuItem.displayName = "MenuItem";
+withItemContext$1(withItemStateProps$1(Primitive.div), "body");
+const MenuItemLabel = withItemContext$1(withItemStateProps$1(Primitive.span), "label");
+withItemContext$1(withItemStateProps$1(Primitive.span), "description");
+
+const { withProvider: withProvider$2, withContext: withContext$4 } = createSlotRecipeContext(avatar.avatar);
 const AvatarRoot = withProvider$2(reactImage.Image.Root, "root");
-const AvatarImage = withContext$5(reactImage.Image.Content, "image");
-const AvatarFallback = withContext$5(reactImage.Image.Fallback, "fallback");
-withContext$5(Primitive.div, "badge");
+const AvatarImage = withContext$4(reactImage.Image.Content, "image");
+const AvatarFallback = withContext$4(reactImage.Image.Fallback, "fallback");
+withContext$4(Primitive.div, "badge");
 
 const Badge = /*#__PURE__*/ React.forwardRef(({ className, children, ...props }, ref)=>{
     const [variantProps, restProps] = badge.badge.splitVariantProps(props);
@@ -3227,6 +3337,141 @@ function RatingCell({ value, maxRating = 5 }) {
     });
 }
 
+/** Clear is withheld for `chip-list`: that column already owns its own per-tag remove
+ *  affordance (`ChipListEditor`) and commits a JSON-STRINGIFIED array through `onEdit`
+ *  (`DataTable.chips.test.tsx`'s own `TagsHarness` -- and this package's own Storybook
+ *  demo, `CellFeaturesDemo`, does exactly `JSON.parse(value)` on commit) -- committing
+ *  a bare `""` through that same path throws in the consumer's `onEdit`, it doesn't
+ *  clear anything. Every OTHER editable shape's commit value is a plain string
+ *  (`"true"`/`"false"`, a stringified rating, an option's own `value`, free text) that
+ *  a consumer's `onEdit` already has to accept a possibly-empty version of. */ function isClearableEditableCell(column) {
+    return !!column.editable && column.type !== "chip-list";
+}
+/** Paste is narrower still -- restricted to a PLAIN `editable` column (no `editor`,
+ *  and not one of the always-live widget types) whose committed value IS the raw
+ *  text/number a user typed. `select`/`reference`/`actor` expect one of THEIR OWN
+ *  option values (not arbitrary clipboard text), `switch`/`rating`/`checkbox` are
+ *  always-live widgets with their own encoding, and `chip-list` is excluded for the
+ *  same JSON reason `isClearableEditableCell` documents above. This is the task's own
+ *  "only for simple editable text/number cells" guard -- committing pasted text
+ *  through any of the excluded shapes would corrupt the row rather than edit it
+ *  (crispy-seed's own #1094 lesson: never assume an editor's commit shape).
+ */ function isSimpleEditableCell(column) {
+    if (!column.editable) return false;
+    if (column.editor) return false;
+    if (column.type === "chip-list" || column.type === "checkbox" || column.type === "rating") {
+        return false;
+    }
+    return true;
+}
+/** Copy's own text representation -- deliberately mirrors `DisplayCellContent`'s
+ *  (body-cells.tsx) switch closely enough to read the same as what's on screen, but
+ *  returns a plain string (`navigator.clipboard.writeText`) rather than JSX. Not
+ *  exported -- it exists only to feed Copy, not as a general-purpose formatter. */ function cellValueAsText(column, value, locale) {
+    if (value == null) return "";
+    switch(column.type){
+        case "entity":
+            if (typeof value === "object") return String(value.name ?? "");
+            return String(value);
+        case "tags":
+        case "chip-list":
+            return Array.isArray(value) ? value.join(", ") : String(value);
+        case "number":
+            return typeof value === "number" ? String(formatNumberCell(value, locale) ?? "") : String(value);
+        case "currency":
+            return typeof value === "number" ? String(formatCurrencyCell(value, column.symbol ?? "$", locale) ?? "") : String(value);
+        case "date":
+            return String(formatDateCell(value, locale) ?? "");
+        case "datetime":
+            return String(formatDateTimeCell(value, locale) ?? "");
+        case "checkbox":
+            return value === true || value === "true" ? "true" : "false";
+        default:
+            return String(value);
+    }
+}
+/**
+ * One cell's right-click menu -- mounted by `body-cells.tsx`'s `DataTableBodyCell`
+ * only while actually open (the same "don't keep an unused floating-ui instance alive
+ * per cell" reasoning as that file's own portaled chip-list popover), so this never
+ * costs anything for the row×column cells a user never right-clicks.
+ */ function CellContextMenu({ column, row, value, locale, point, open, onOpenChange, onCommit, onViewEditHistory, cellContextMenuItems }) {
+    const clearable = isClearableEditableCell(column);
+    const pasteable = isSimpleEditableCell(column);
+    return /*#__PURE__*/ jsxRuntime.jsxs(MenuRoot, {
+        open: open,
+        onOpenChange: onOpenChange,
+        placement: "bottom-start",
+        strategy: "fixed",
+        gutter: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(MenuAnchor, {
+                "aria-hidden": true,
+                style: {
+                    position: "fixed",
+                    top: point.y,
+                    left: point.x,
+                    width: 0,
+                    height: 0,
+                    pointerEvents: "none"
+                }
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(MenuPositioner, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(MenuContent, {
+                    style: {
+                        minWidth: 180
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(MenuScrollArea, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                onClick: ()=>{
+                                    const text = cellValueAsText(column, value, locale);
+                                    // Best-effort: an insecure context or a denied permission rejects
+                                    // this silently (no `MenuItem` state depends on the outcome) --
+                                    // there's nothing else for a plain "Copy" item to do about a
+                                    // browser that refused the write.
+                                    void navigator.clipboard?.writeText?.(text);
+                                },
+                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                    children: "Copy"
+                                })
+                            }),
+                            pasteable && /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                onClick: ()=>{
+                                    void navigator.clipboard?.readText?.().then((text)=>onCommit(text)).catch(()=>{
+                                    // Clipboard read denied/unavailable -- best-effort, same
+                                    // reasoning as Copy above.
+                                    });
+                                },
+                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                    children: "Paste"
+                                })
+                            }),
+                            clearable && /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                onClick: ()=>onCommit(""),
+                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                    children: "Clear value"
+                                })
+                            }),
+                            onViewEditHistory && /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                onClick: ()=>onViewEditHistory(row, column.key),
+                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                    children: "View edit history"
+                                })
+                            }),
+                            cellContextMenuItems?.({
+                                row,
+                                column,
+                                value
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+
 /** 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
@@ -3308,10 +3553,25 @@ function RatingCell({ value, maxRating = 5 }) {
                 width,
                 pinned,
                 pinOffset,
-                pinnedEdge: false
+                pinnedEdge: false,
+                stickyLastTarget: false
             };
         });
         if (pinnedCount > 0) entries[pinnedCount - 1].pinnedEdge = true;
+        // `stickyLast` sticks the `actions`-flagged column specifically -- not whichever
+        // column merely landed last in render order. Without this, `reconcileColumnOrder`
+        // appending a brand-new column past `actions` (this file's own `<colgroup>` doc
+        // comment on why order must stay in lockstep) silently moved the sticky-right
+        // treatment onto that new column instead, stranding `actions` in the middle of the
+        // table -- a real consumer hit this. Falls back to the genuine last entry when no
+        // column is flagged `actions` at all, matching `stickyLast`'s original single-
+        // column behavior.
+        if (entries.length > 0) {
+            const actionsColumn = columns.find((column)=>column.actions);
+            const actionsIndex = actionsColumn ? entries.findIndex((entry)=>entry.column.key === actionsColumn.key) : -1;
+            const stickyLastIndex = actionsIndex !== -1 ? actionsIndex : entries.length - 1;
+            entries[stickyLastIndex].stickyLastTarget = true;
+        }
         return entries;
     }, [
         columns,
@@ -3351,9 +3611,12 @@ function RatingCell({ value, maxRating = 5 }) {
 }
 /** 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) {
+ *  trailing-most member) takes priority over sticky-right (`stickyLast`, the
+ *  `actions`-flagged column when one exists, else the genuine last VISIBLE column)
+ *  since a column can only stick to one edge. Reads `entry.stickyLastTarget`
+ *  (`useEffectiveColumns`) rather than an `isLast` index the caller computes itself --
+ *  that index is just "last in render order", which is exactly what stranded a
+ *  reordered-past `actions` column in the first place. */ function pinnedCellProps(entry, stickyLast) {
     if (entry.pinned) {
         return {
             "data-sticky": "",
@@ -3365,7 +3628,7 @@ function RatingCell({ value, maxRating = 5 }) {
             }
         };
     }
-    if (stickyLast && isLast) {
+    if (stickyLast && entry.stickyLastTarget) {
         return {
             "data-sticky": "",
             "data-sticky-edge-end": "",
@@ -3385,11 +3648,11 @@ function RatingCell({ value, maxRating = 5 }) {
 // recipe, so a per-instance variant can override the root's default.
 const { ClassNamesProvider: TriggerClassNamesProvider, PropsProvider: TriggerPropsProvider, useProps: useTriggerProps, withContext: withTriggerContext, useClassNames: useTriggerClassNames } = createSlotRecipeContext(selectTrigger.selectTrigger);
 const { ClassNamesProvider: ContentClassNamesProvider, withContext: withContentContext, useClassNames: useContentClassNames } = createSlotRecipeContext(select.select);
-const { ClassNamesProvider: ItemClassNamesProvider$1, PropsProvider: ItemPropsProvider$1, useProps: useItemProps$1, withContext: withItemContext$1, useClassNames: useItemClassNames } = createSlotRecipeContext(selectItem.selectItem);
-const withStateProps$3 = createWithStateProps([
+const { ClassNamesProvider: ItemClassNamesProvider, PropsProvider: ItemPropsProvider, useProps: useItemProps, withContext: withItemContext, useClassNames: useItemClassNames } = createSlotRecipeContext(selectItem.selectItem);
+const withStateProps$2 = createWithStateProps([
     reactSelect.useSelectContext
 ]);
-const withItemStateProps$1 = createWithStateProps([
+const withItemStateProps = createWithStateProps([
     reactSelect.useSelectItemContext
 ]);
 // NOTE: `gutter` and `overflowPadding` are specified in Rootage (`select.yaml`,
@@ -3410,7 +3673,7 @@ const SelectRoot = (props)=>{
         value: contentClassNames,
         children: /*#__PURE__*/ jsxRuntime.jsx(TriggerPropsProvider, {
             value: triggerVariantProps,
-            children: /*#__PURE__*/ jsxRuntime.jsx(ItemPropsProvider$1, {
+            children: /*#__PURE__*/ jsxRuntime.jsx(ItemPropsProvider, {
                 value: itemVariantProps,
                 children: /*#__PURE__*/ jsxRuntime.jsx(reactSelect.Select.Root, {
                     ...otherProps
@@ -3450,8 +3713,8 @@ const SelectTrigger = /*#__PURE__*/ React__namespace.forwardRef(({ className, ..
     });
 });
 SelectTrigger.displayName = "SelectTrigger";
-const SelectValue = withTriggerContext(withStateProps$3(reactSelect.Select.Value), "value");
-const SelectPlaceholder = withTriggerContext(withStateProps$3(reactSelect.Select.Placeholder), "placeholder");
+const SelectValue = withTriggerContext(withStateProps$2(reactSelect.Select.Value), "value");
+const SelectPlaceholder = withTriggerContext(withStateProps$2(reactSelect.Select.Placeholder), "placeholder");
 const SelectPrefixIcon = /*#__PURE__*/ React__namespace.forwardRef(({ fallback, className, ...otherProps }, ref)=>{
     const { selectedItem, stateProps } = reactSelect.useSelectContext();
     const classNames = useTriggerClassNames();
@@ -3466,7 +3729,7 @@ const SelectPrefixIcon = /*#__PURE__*/ React__namespace.forwardRef(({ fallback,
     });
 });
 SelectPrefixIcon.displayName = "SelectPrefixIcon";
-const SelectSuffixIcon = withTriggerContext(withStateProps$3(InternalIcon), "suffixIcon");
+const SelectSuffixIcon = withTriggerContext(withStateProps$2(InternalIcon), "suffixIcon");
 const SelectPositioner = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>{
     const classNames = useContentClassNames();
     return /*#__PURE__*/ jsxRuntime.jsx(reactSelect.Select.Positioner, {
@@ -3497,12 +3760,12 @@ withContentContext(reactSelect.Select.Group, "group");
 withContentContext(reactSelect.Select.GroupLabel, "groupLabel");
 const SelectItem = /*#__PURE__*/ React__namespace.forwardRef(({ prefixIcon, className, ...props }, ref)=>{
     const [variantProps, otherProps] = selectItem.selectItem.splitVariantProps(props);
-    const rootProps = useItemProps$1();
+    const rootProps = useItemProps();
     const classNames = selectItem.selectItem({
         ...rootProps,
         ...variantProps
     });
-    return /*#__PURE__*/ jsxRuntime.jsx(ItemClassNamesProvider$1, {
+    return /*#__PURE__*/ jsxRuntime.jsx(ItemClassNamesProvider, {
         value: classNames,
         children: /*#__PURE__*/ jsxRuntime.jsx(reactSelect.Select.Item, {
             ref: ref,
@@ -3527,7 +3790,7 @@ const SelectItemPrefixIcon = /*#__PURE__*/ React__namespace.forwardRef(({ svg: s
     });
 });
 SelectItemPrefixIcon.displayName = "SelectItemPrefixIcon";
-const SelectItemBody = withItemContext$1(withItemStateProps$1(Primitive.div), "body");
+const SelectItemBody = withItemContext(withItemStateProps(Primitive.div), "body");
 const SelectItemLabel = /*#__PURE__*/ React__namespace.forwardRef(({ children, className, ...otherProps }, ref)=>{
     const { label, stateProps } = reactSelect.useSelectItemContext();
     const classNames = useItemClassNames();
@@ -3542,7 +3805,7 @@ const SelectItemLabel = /*#__PURE__*/ React__namespace.forwardRef(({ children, c
     });
 });
 SelectItemLabel.displayName = "SelectItemLabel";
-withItemContext$1(withItemStateProps$1(Primitive.span), "description");
+withItemContext(withItemStateProps(Primitive.span), "description");
 const SelectItemIndicator = /*#__PURE__*/ React__namespace.forwardRef(({ selected: selectedSvg, unselected: unselectedSvg, className, ...otherProps }, ref)=>{
     const { isSelected, stateProps } = reactSelect.useSelectItemContext();
     const classNames = useItemClassNames();
@@ -3574,9 +3837,9 @@ const SelectHiddenSelect = /*#__PURE__*/ React__namespace.forwardRef((props, ref
 });
 SelectHiddenSelect.displayName = "SelectHiddenSelect";
 
-const { withContext: withContext$4, ClassNamesProvider: ClassNamesProvider$2 } = createSlotRecipeContext(_switch.switchStyle);
+const { withContext: withContext$3, ClassNamesProvider: ClassNamesProvider$1 } = createSlotRecipeContext(_switch.switchStyle);
 const { withContext: withControlContext, PropsProvider: ControlPropsProvider, withProvider: withControlProvider } = createSlotRecipeContext(switchmark.switchmark);
-const withStateProps$2 = createWithStateProps([
+const withStateProps$1 = createWithStateProps([
     reactSwitch.useSwitchContext
 ]);
 const SwitchRoot = /*#__PURE__*/ React__namespace.default.forwardRef(({ className, ...props }, ref)=>{
@@ -3587,7 +3850,7 @@ const SwitchRoot = /*#__PURE__*/ React__namespace.default.forwardRef(({ classNam
     const classNames = _switch.switchStyle(switchVariantProps);
     return /*#__PURE__*/ jsxRuntime.jsx(ControlPropsProvider, {
         value: switchmarkVariantProps,
-        children: /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider$2, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider$1, {
             value: classNames,
             children: /*#__PURE__*/ jsxRuntime.jsx(reactSwitch.Switch.Root, {
                 ref: ref,
@@ -3600,20 +3863,20 @@ const SwitchRoot = /*#__PURE__*/ React__namespace.default.forwardRef(({ classNam
 SwitchRoot.displayName = "SwitchRoot";
 const SwitchControl = withScaleFeedback(withControlProvider(reactSwitch.Switch.Control, "root"));
 const SwitchThumb = withControlContext(reactSwitch.Switch.Thumb, "thumb");
-withContext$4(withStateProps$2(Primitive.span), "label");
+withContext$3(withStateProps$1(Primitive.span), "label");
 const SwitchHiddenInput = reactSwitch.Switch.HiddenInput;
 
 // src/use-layout-effect.tsx
 var useLayoutEffect2 = globalThis?.document ? React__namespace.useLayoutEffect : ()=>{};
 
-const { withProvider: withProvider$1, withContext: withContext$3, useClassNames: useClassNames$2 } = createSlotRecipeContext(textInput.textInput);
+const { withProvider: withProvider$1, withContext: withContext$2, useClassNames: useClassNames$1 } = createSlotRecipeContext(textInput.textInput);
 const withFieldStateProps = createWithStateProps([
     {
         useContext: reactField.useFieldContext,
         strict: false
     }
 ]);
-const withStateProps$1 = createWithStateProps([
+const withStateProps = createWithStateProps([
     reactTextField.useTextFieldContext,
     {
         useContext: reactField.useFieldContext,
@@ -3621,12 +3884,12 @@ const withStateProps$1 = createWithStateProps([
     }
 ]);
 const TextFieldRoot = withProvider$1(withFieldStateProps(reactTextField.TextField.Root), "root");
-withContext$3(withStateProps$1(InternalIcon), "prefixIcon");
-withContext$3(withStateProps$1(Primitive.span), "prefixText");
-withContext$3(withStateProps$1(InternalIcon), "suffixIcon");
-withContext$3(withStateProps$1(Primitive.span), "suffixText");
+withContext$2(withStateProps(InternalIcon), "prefixIcon");
+withContext$2(withStateProps(Primitive.span), "prefixText");
+withContext$2(withStateProps(InternalIcon), "suffixIcon");
+withContext$2(withStateProps(Primitive.span), "suffixText");
 const TextFieldInput = /*#__PURE__*/ React.forwardRef(({ className, ...otherProps }, ref)=>{
-    const classNames = useClassNames$2();
+    const classNames = useClassNames$1();
     const textFieldContext = reactTextField.useTextFieldContext();
     const fieldContext = reactField.useFieldContext({
         strict: false
@@ -3644,7 +3907,7 @@ const TextFieldInput = /*#__PURE__*/ React.forwardRef(({ className, ...otherProp
 });
 TextFieldInput.displayName = "TextFieldInput";
 const TextFieldTextarea = /*#__PURE__*/ React.forwardRef(({ className, autoresize = true, ...otherProps }, ref)=>{
-    const classNames = useClassNames$2();
+    const classNames = useClassNames$1();
     const textFieldContext = reactTextField.useTextFieldContext();
     const fieldContext = reactField.useFieldContext({
         strict: false
@@ -3701,7 +3964,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:not([data-editable]){user-select:none}.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-overlay-open]{overflow:visible;z-index:20}.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;transition:opacity .15s}tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityActions:focus-within{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:2px;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;transition:background-color .2s,color .2s,box-shadow .2s}.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__chip{box-sizing:border-box;display:inline-flex;align-items:center;flex-shrink:0;max-width:100%;height:22px;padding:0 4px;border-radius:7px;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:3px;overflow:hidden;min-width:0;width:100%}.seed-data-table__chipOverflow{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 4px;border-radius:6px;background-color:#f6f7f7;color:#000;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;white-space:nowrap}.seed-data-table__chipListEditor{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-width:0;width:100%}.seed-data-table__chipRemove{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;margin:0;margin-inline-start:2px;padding:0;border:none;border-radius:999px;background:0 0;color:inherit;opacity:.6;cursor:pointer;transition:opacity .12s,background-color .12s}.seed-data-table__chipRemove:hover{opacity:1;background-color:rgba(0,0,0,.08)}.seed-data-table__chipInput{flex:1 1 auto;min-width:40px;height:22px;margin:0;padding:0;border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);letter-spacing:-.14px}.seed-data-table__expandOverlay{box-sizing:border-box;position:absolute;top:-1px;inset-inline-start:-1px;inset-inline-end:-1px;z-index:10;min-height:calc(100% + 2px);display:flex;align-items:flex-start;padding-inline:var(--seed-dimension-x3);padding-block:var(--seed-dimension-x3);background-color:var(--seed-color-bg-layer-floating);border-radius:4px;box-shadow:none;border:1px solid #266df0;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);letter-spacing:-.14px;cursor:default}.seed-data-table__expandOverlayText{width:100%;min-width:0;white-space:normal;word-break:break-word}.seed-data-table__cellSuffixRow{display:flex;align-items:center;gap:4px;min-width:0;width:100%}.seed-data-table__cellSuffixText{flex:1 1 0%;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cellSuffixIcon{flex-shrink:0;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent)}.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;position:relative;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:not([data-editable]){user-select:none}.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-overlay-open]{overflow:visible;z-index:20}.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;transition:opacity .15s}tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityActions:focus-within{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:2px;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;transition:background-color .2s,color .2s,box-shadow .2s}.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__chip{box-sizing:border-box;display:inline-flex;align-items:center;flex-shrink:0;max-width:100%;height:22px;padding:0 4px;border-radius:7px;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:3px;overflow:hidden;min-width:0;width:100%}.seed-data-table__chipOverflow{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 4px;border-radius:6px;background-color:#f6f7f7;color:#000;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;white-space:nowrap}.seed-data-table__chipListEditor{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-width:0;width:100%}.seed-data-table__chipRemove{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;margin:0;margin-inline-start:2px;padding:0;border:none;border-radius:999px;background:0 0;color:inherit;opacity:.6;cursor:pointer;transition:opacity .12s,background-color .12s}.seed-data-table__chipRemove:hover{opacity:1;background-color:rgba(0,0,0,.08)}.seed-data-table__chipInput{flex:1 1 auto;min-width:40px;height:22px;margin:0;padding:0;border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);letter-spacing:-.14px}.seed-data-table__expandOverlay{box-sizing:border-box;position:absolute;top:-1px;inset-inline-start:-1px;inset-inline-end:-1px;z-index:10;min-height:calc(100% + 2px);display:flex;align-items:flex-start;padding-inline:var(--seed-dimension-x3);padding-block:var(--seed-dimension-x3);background-color:var(--seed-color-bg-layer-floating);border-radius:4px;box-shadow:none;border:1px solid #266df0;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);letter-spacing:-.14px;cursor:default}.seed-data-table__expandOverlayText{width:100%;min-width:0;white-space:normal;word-break:break-word}.seed-data-table__cellSuffixRow{display:flex;align-items:center;gap:4px;min-width:0;width:100%}.seed-data-table__cellSuffixText{flex:1 1 0%;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cellSuffixIcon{flex-shrink:0;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent)}.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__bulkBar{box-sizing:border-box;position:absolute;inset-inline-start:50%;transform:translateX(-50%);bottom:var(--seed-dimension-x4);z-index:30;display:flex;align-items:center;gap:var(--seed-dimension-x3);min-height:36px;padding-inline:var(--seed-dimension-x3_5);padding-block:var(--seed-dimension-x2);border-radius:var(--seed-radius-full);box-shadow:var(--seed-shadow-s3);background-color:var(--seed-color-bg-layer-floating);color:var(--seed-color-fg-neutral);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap}.seed-data-table__bulkBarCount{flex-shrink:0;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums}.seed-data-table__bulkBarClear{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin:0;padding:2px;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;transition:background-color .2s,color .2s}.seed-data-table__bulkBarClear:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 8%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__bulkBarActions{display:flex;align-items:center;flex-shrink:0;gap:var(--seed-dimension-x3);padding-inline-start:var(--seed-dimension-x3);border-inline-start:1px solid color-mix(in srgb,var(--seed-color-fg-neutral) 16%,transparent)}.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);
@@ -3895,6 +4158,22 @@ const dataTableSlotNames = [
     [
         "selectionCell",
         "seed-data-table__selectionCell"
+    ],
+    [
+        "bulkBar",
+        "seed-data-table__bulkBar"
+    ],
+    [
+        "bulkBarCount",
+        "seed-data-table__bulkBarCount"
+    ],
+    [
+        "bulkBarClear",
+        "seed-data-table__bulkBarClear"
+    ],
+    [
+        "bulkBarActions",
+        "seed-data-table__bulkBarActions"
     ]
 ];
 const defaultVariant$6 = {
@@ -3932,7 +4211,7 @@ Object.assign(dataTable, {
 // other file (`DataTable.tsx`, `column-menu.tsx`, `resize.tsx`, `column-calc.tsx`,
 // `toolbar.tsx`, `body-cells.tsx`, `editors.tsx`) imports its exports from here rather
 // than re-deriving its own.
-const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$2, useClassNames: useClassNames$1 } = createSlotRecipeContext(dataTable);
+const { ClassNamesProvider, withContext: withContext$1, useClassNames } = createSlotRecipeContext(dataTable);
 
 /**
  * The pure filter itself, split out of `useSelectSearch` below so it can be
@@ -4508,26 +4787,87 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
     }));
 }
 ////////////////////////////////////////////////////////////////////////////////////
-// -- Feature C (#12): cell-expand "show full content" overlay -- an anchored box
-//    (position:absolute over the cell it belongs to, grows in HEIGHT, elevated)
-//    that wraps whatever a truncated cell would otherwise show inline: an editable
-//    column's OWN editor node (unchanged, just relocated into this box instead of
-//    rendered flush in the 36px row) for the editable case, or the plain full value
-//    for a read-only one. `body-cells.tsx` decides WHEN to render this (a click on a
-//    cell whose content is actually truncated, `truncate.ts`'s `isCellTruncated`);
-//    this component only supplies the box.
-function CellExpandOverlay({ className, children }) {
-    return(// `stopPropagation` -- an overlay sits on top of (and past) its own cell/row;
+// -- Feature C (#12): cell-expand "show full content" overlay -- a box that wraps
+//    whatever a truncated cell would otherwise show inline: an editable column's OWN
+//    editor node (unchanged, just relocated into this box instead of rendered flush in
+//    the 36px row) for the editable case, or the plain full value for a read-only one.
+//    `body-cells.tsx` decides WHEN to render this (a click on a cell whose content is
+//    actually truncated, `truncate.ts`'s `isCellTruncated`); this component only
+//    supplies the box.
+//
+//    Portals to `document.body` (crispy-seed#1094's own pinned-column follow-up,
+//    ported from the chip-list editor's popover, `body-cells.tsx`'s
+//    `isChipListEditable` -- that one shipped this exact fix in 0.10.3) rather than
+//    positioning `absolute` against its own cell: a `position: sticky` `<td>` clips ANY
+//    descendant that grows past its own box, in every browser tested, regardless of
+//    `overflow`/`z-index` on anything in between, so a pinned column's own truncated
+//    cell used to clip this overlay's grown content instead of showing it in full. A
+//    portal sidesteps that by not being a descendant of the sticky `<td>` at all once
+//    mounted -- position is instead measured live off `anchorRef`'s own
+//    `getBoundingClientRect()`, the same technique the chip-list popover already uses.
+function CellExpandOverlay({ className, anchorRef, contentRef, children }) {
+    const [style, setStyle] = React__namespace.useState(null);
+    // Grows 1px past the cell's own edges in every direction, matching this box's
+    // pre-portal `top: -1px; insetInlineStart: -1px; insetInlineEnd: -1px` (the recipe's
+    // `expandOverlay` class, `data-table.ts`) -- hides the 1px border seam against the
+    // cell it's expanding out of. `minHeight`/`insetInlineEnd` from that same class no
+    // longer apply once portaled (they resolved against the `<td>` as this box's own
+    // containing block, meaningless once it's a `position: fixed` child of `<body>`
+    // instead -- the same override the chip-list popover's own `measurePopoverPosition`,
+    // `body-cells.tsx`, already makes), so this overrides both explicitly.
+    const measure = React__namespace.useCallback(()=>{
+        const cell = anchorRef.current;
+        if (!cell) return;
+        const rect = cell.getBoundingClientRect();
+        setStyle({
+            position: "fixed",
+            top: rect.top - 1,
+            insetInlineStart: rect.left - 1,
+            insetInlineEnd: "auto",
+            width: rect.width + 2,
+            minHeight: "auto",
+            zIndex: 1000
+        });
+    }, [
+        anchorRef
+    ]);
+    // Measured before paint, on mount -- see this component's own prop doc comment for
+    // why it can't just trust a caller to have measured first.
+    React__namespace.useLayoutEffect(()=>{
+        measure();
+    }, [
+        measure
+    ]);
+    // Same capture-phase listeners as the chip-list popover's own reposition effect
+    // (`body-cells.tsx`) -- `scroll` doesn't bubble, so the table's own horizontal/
+    // vertical scroll container (an arbitrary ancestor, not necessarily `window` itself)
+    // is only observable this way.
+    React__namespace.useEffect(()=>{
+        window.addEventListener("scroll", measure, true);
+        window.addEventListener("resize", measure);
+        return ()=>{
+            window.removeEventListener("scroll", measure, true);
+            window.removeEventListener("resize", measure);
+        };
+    }, [
+        measure
+    ]);
+    // Nothing to portal until the first measurement lands (avoids a one-frame flash at
+    // the origin corner before `useLayoutEffect` runs).
+    if (!style) return null;
+    return /*#__PURE__*/ reactDom.createPortal(// `stopPropagation` -- an overlay sits on top of (and past) its own cell/row;
     // a click anywhere inside it must never ALSO fire the row's own `onRowClick`,
     // the same guard every other interactive cell affordance in this directory
     // already applies (`LinkCell`, `EntityCell`'s preview button, editors.tsx's
     // `TextEditor` root).
     // biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this div never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the editor/text it wraps). No role fits it because it isn't a control.
     /*#__PURE__*/ jsxRuntime.jsx("div", {
+        ref: contentRef,
         className: className,
+        style: style,
         onClick: (event)=>event.stopPropagation(),
         children: children
-    }));
+    }), document.body);
 }
 
 // Row-narrowing for the toolbar's search box -- split out of DataTable.tsx the way
@@ -4623,39 +4963,37 @@ function isCellTruncated(cell) {
  *  close itself after the first tag commits, see `ChipListEditor`'s own doc
  *  comment).
  *
- *  Unlike every OTHER open editor in this file, this one does NOT render inside
- *  Feature C's `CellExpandOverlay` (an anchored box positioned relative to the
- *  `<td>`, `position: absolute` against it) -- it renders through a REAL React
- *  portal to `document.body` instead (`DataTableBodyCell`'s own `popoverStyle`).
- *  Confirmed live, crispy-seed#1094's pinned-column follow-up: a `position: sticky`
- *  `<td>` clips ANY descendant content that grows past its own box to the table's
- *  scrollport, in EVERY browser tested, regardless of `overflow: visible` on every
- *  element in between and regardless of how high its `z-index` is raised -- neither
- *  of which is a stacking-context or overflow bug this file can fix from the
- *  INSIDE. A portal sidesteps it entirely by not being a descendant of the sticky
- *  `<td>` at all once mounted. The same sticky-clip almost certainly affects the
- *  OTHER gated editors' `CellExpandOverlay` too when their own column is pinned,
- *  but porting all of Feature C to this same portal model is its own change,
- *  out of scope here -- this fix is scoped to the one editor crispy-seed#1094
- *  actually reported against a pinned column. */ function isChipListEditable(column) {
+ *  This one renders through its OWN REAL React portal to `document.body`
+ *  (`DataTableBodyCell`'s own `popoverStyle`) rather than `editors.tsx`'s shared
+ *  `CellExpandOverlay`, since its shape is different (Attio's own click-anywhere-
+ *  opens gesture, no truncation gate). `CellExpandOverlay` itself ALSO portals to
+ *  `document.body` now (ported from this exact fix) -- both exist because a
+ *  `position: sticky` `<td>` clips ANY descendant content that grows past its own
+ *  box to the table's scrollport, in EVERY browser tested, regardless of
+ *  `overflow: visible` on every element in between and regardless of how high its
+ *  `z-index` is raised -- neither of which is a stacking-context or overflow bug
+ *  fixable from the INSIDE. A portal sidesteps it entirely by not being a
+ *  descendant of the sticky `<td>` at all once mounted. */ function isChipListEditable(column) {
     return !!column.editable && column.type === "chip-list";
 }
-function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast }) {
+function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast, cellContextMenu, onViewEditHistory, cellContextMenuItems }) {
     const effective = useEffectiveColumns(columns, {
         selectable,
         stickyFirst
     });
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsxRuntime.jsx(DataTableBodyCell, {
                 column: column,
                 row: row,
                 classNames: classNames,
                 locale: locale,
-                sticky: sticky
+                sticky: sticky,
+                cellContextMenu: cellContextMenu,
+                onViewEditHistory: onViewEditHistory,
+                cellContextMenuItems: cellContextMenuItems
             }, column.key);
         })
     });
@@ -4667,7 +5005,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
  * on every row's render. React keeps this instance stable across re-renders because
  * `ColumnBodyCells` keys it by `column.key` the same way it always keyed the bare
  * `<DataTableCell>` before this split.
- */ function DataTableBodyCell({ column, row, classNames, locale, sticky }) {
+ */ function DataTableBodyCell({ column, row, classNames, locale, sticky, cellContextMenu, onViewEditHistory, cellContextMenuItems }) {
     const { startEdit, cancelEdit, isEditing, isPending, commitEdit, isPeeking, openPeek, closePeek } = useDataTableContext();
     const cellRef = React__namespace.useRef(null);
     // Feature B rework (#8) -- the chip-list popover's own live position, in VIEWPORT
@@ -4683,6 +5021,16 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     // editable cell's existing double-click-to-edit (tranche 5, unchanged) must keep
     // rendering exactly as it always has, not suddenly gain overlay chrome.
     const [overlayOpen, setOverlayOpen] = React__namespace.useState(false);
+    // Attio parity (attio-column-features-full.md gap #1) -- the right-click menu's own
+    // point + open state. `contextMenuPoint` is frozen at the moment of the right-click
+    // (never re-read live), same reasoning as `overlayOpen` above: the menu shouldn't
+    // chase the cursor after it opens. `<CellContextMenu>` itself is only rendered below
+    // while `contextMenuOpen` is true (not permanently mounted per cell) -- unlike
+    // `ColumnMenu` (one per COLUMN, header row only), this component runs once per
+    // row×column cell, and a floating-ui instance genuinely idle in every one of
+    // thousands of cells would be real, avoidable overhead.
+    const [contextMenuPoint, setContextMenuPoint] = React__namespace.useState(null);
+    const [contextMenuOpen, setContextMenuOpen] = React__namespace.useState(false);
     const alwaysLive = isAlwaysLiveEditable(column);
     const chipListEditable = isChipListEditable(column);
     // A gated `editable` column (everything except the always-live widgets AND the
@@ -4734,6 +5082,19 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         setOverlayOpen(isCellTruncated(event.currentTarget));
         startEdit(row.id, column.key);
     }
+    function handleContextMenu(event) {
+        if (!cellContextMenu) return;
+        // Replaces the browser's own native context menu (Attio's own gesture) -- and
+        // must not also reach the row's own `onRowClick`, same reasoning as every other
+        // cell-local click handler in this file.
+        event.preventDefault();
+        event.stopPropagation();
+        setContextMenuPoint({
+            x: event.clientX,
+            y: event.clientY
+        });
+        setContextMenuOpen(true);
+    }
     function handleClick(event) {
         if (chipListEditable) {
             // Attio's own chip-list gesture: click opens the editor regardless of
@@ -4771,6 +5132,16 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     // mounted, in `document.body` -- see `isChipListEditable`'s doc comment) and by
     // the reposition effect further down.
     const popoverRef = React__namespace.useRef(null);
+    // Feature C's own portaled overlay (`CellExpandOverlay`, editors.tsx) -- its own DOM
+    // node, once mounted, same reasoning as `popoverRef` above: it lives outside
+    // `cellRef`'s subtree (a sibling of the table in `document.body`, not a descendant of
+    // the `<td>`), so the outside-click detector below needs a ref to it too. Without
+    // this, `isInside` saw every click/keystroke INSIDE the portaled editor as "outside"
+    // once the overlay actually escaped the `<td>` (this fix's whole point) -- e.g.
+    // typing into the overlay's own `TextEditor` fires a pointerdown on an input that is
+    // no longer `cellRef.current`'s descendant, so every keystroke closed the overlay and
+    // cancelled the edit before the user finished typing.
+    const expandOverlayRef = React__namespace.useRef(null);
     // Closes the overlay on Escape or an outside click/pointerdown -- a gated
     // editor's OWN Escape/blur handling already ends `isEditing` on its own (see
     // `TextEditor`/`SelectEditor`'s existing onCancel/onOpenChange wiring), which
@@ -4783,7 +5154,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     React__namespace.useEffect(()=>{
         if (!overlayOpen) return;
         function isInside(target) {
-            return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false);
+            return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false) || (expandOverlayRef.current?.contains(target) ?? false);
         }
         function handlePointerDown(event) {
             if (!isInside(event.target)) {
@@ -4837,7 +5208,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     const pending = isPending(row.id, column.key);
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(DataTableCell, {
+            /*#__PURE__*/ jsxRuntime.jsxs(DataTableCell, {
                 ref: cellRef,
                 "data-numeric": domUtils.dataAttr(column.type === "number" || column.type === "currency"),
                 "data-editable": domUtils.dataAttr(!!column.editable),
@@ -4848,14 +5219,36 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
                 style: sticky.style,
                 onClick: handleClick,
                 onDoubleClick: handleDoubleClick,
-                children: /*#__PURE__*/ jsxRuntime.jsx(CellContent, {
-                    column: column,
-                    row: row,
-                    rowId: row.id,
-                    classNames: classNames,
-                    locale: locale,
-                    overlayActive: overlayActive
-                })
+                onContextMenu: handleContextMenu,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(CellContent, {
+                        column: column,
+                        row: row,
+                        rowId: row.id,
+                        classNames: classNames,
+                        locale: locale,
+                        overlayActive: overlayActive,
+                        cellRef: cellRef,
+                        expandOverlayRef: expandOverlayRef
+                    }),
+                    cellContextMenu && contextMenuOpen && contextMenuPoint && // A `<td>` (unlike its own parent `<tr>`) can validly hold any flow
+                    // content, so `CellContextMenu`'s own 0x0 `MenuAnchor` -- itself never
+                    // portaled, only `MenuPositioner`'s actual dropdown content is (via
+                    // floating-ui's own `FloatingPortal`, straight to `document.body`) --
+                    // renders here, INSIDE this cell, rather than as a sibling of it.
+                    /*#__PURE__*/ jsxRuntime.jsx(CellContextMenu, {
+                        column: column,
+                        row: row,
+                        value: rawValue,
+                        locale: locale,
+                        point: contextMenuPoint,
+                        open: contextMenuOpen,
+                        onOpenChange: setContextMenuOpen,
+                        onCommit: (value)=>commitEdit(row.id, column.key, value),
+                        onViewEditHistory: onViewEditHistory,
+                        cellContextMenuItems: cellContextMenuItems
+                    })
+                ]
             }),
             chipListEditorOpen && popoverStyle && /*#__PURE__*/ reactDom.createPortal(// biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- same shape as `CellExpandOverlay` (editors.tsx), which this box is a portaled variant of: it never responds to interaction on ITSELF, only stops propagation of clicks that already occurred on a real interactive descendant (the editor's input/remove buttons). No role fits it because it isn't a control.
             /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -4881,7 +5274,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
  * display (a custom `render` wins there, same as before `editable` existed; it never
  * overrides an actual editing/always-live state, matching crisp's own split between
  * `renderTyped`'s rest-state branch and the editing branches above it).
- */ function CellContent({ column, row, rowId, classNames, locale, overlayActive }) {
+ */ function CellContent({ column, row, rowId, classNames, locale, overlayActive, cellRef, expandOverlayRef }) {
     const { isEditing, isPending, getEditError, commitEdit, cancelEdit } = useDataTableContext();
     const rawValue = getColumnValue(column, row);
     const pending = isPending(rowId, column.key);
@@ -4975,6 +5368,8 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         children: [
             overlayActive ? /*#__PURE__*/ jsxRuntime.jsx(CellExpandOverlay, {
                 className: classNames.expandOverlay,
+                anchorRef: cellRef,
+                contentRef: expandOverlayRef,
                 children: column.editable ? node : /*#__PURE__*/ jsxRuntime.jsx("span", {
                     className: classNames.expandOverlayText,
                     children: node
@@ -5085,64 +5480,52 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
     }
 }
 
-const { ClassNamesProvider, withContext: withContext$1, useClassNames } = createSlotRecipeContext(menu.menu);
-const { PropsProvider: ItemPropsProvider, useProps: useItemProps, withContext: withItemContext, ClassNamesProvider: ItemClassNamesProvider } = createSlotRecipeContext(menuItem.menuItem);
-const withStateProps = createWithStateProps([
-    reactMenu.useMenuContext
-]);
-const withItemStateProps = createWithStateProps([
-    reactMenu.useMenuItemContext
-]);
-const MenuRoot = (props)=>{
-    const [variantProps, otherProps] = menu.menu.splitVariantProps(props);
-    const classNames = menu.menu(variantProps);
-    return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider, {
-        value: classNames,
-        children: /*#__PURE__*/ jsxRuntime.jsx(ItemPropsProvider, {
-            value: {
-                size: variantProps.size
-            },
-            children: /*#__PURE__*/ jsxRuntime.jsx(reactMenu.Menu.Root, {
-                ...otherProps
+const DataTableBulkBarRoot = withContext$1(Primitive.div, "bulkBar");
+const DataTableBulkBarCount = withContext$1(Primitive.span, "bulkBarCount");
+const DataTableBulkBarClear = withContext$1(Primitive.button, "bulkBarClear");
+/** Wraps whatever the CONSUMER passes as this bar's own action buttons -- the bar
+ *  itself only ever supplies chrome (count + clear); every actual action (Add to
+ *  list, Send email, …) is the consumer's own `<ActionButton>`/`<Menu>`, the same
+ *  "chrome vs. consumer content" split `toolbarActions`/`toolbarEnd` already draw for
+ *  the toolbar's own custom actions. */ const DataTableBulkBarActions = withContext$1(Primitive.div, "bulkBarActions");
+/**
+ * The floating bulk-action pill (gap #4) -- renders nothing while no row is selected
+ * (reads `selectedIds` off the table-wide context itself, so a consumer doesn't have
+ * to gate this on `selectable`/`selectedIds` on their own). Composed as the LAST
+ * child of the table's own root (`DataTable.tsx`), which is `position: relative` for
+ * exactly this reason -- see `data-table.ts`'s own `bulkBar` slot comment for why its
+ * geometry borrows `contextual-floating-button`'s already-measured vars rather than a
+ * guessed literal.
+ */ function DataTableBulkBar({ clearLabel = "Clear selection", children }) {
+    const { selectedIds, clearSelection } = useDataTableContext();
+    if (selectedIds.length === 0) return null;
+    return /*#__PURE__*/ jsxRuntime.jsxs(DataTableBulkBarRoot, {
+        role: "toolbar",
+        "aria-label": "Bulk actions",
+        "aria-orientation": "horizontal",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(DataTableBulkBarCount, {
+                "aria-live": "polite",
+                children: [
+                    selectedIds.length,
+                    " selected"
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(DataTableBulkBarClear, {
+                type: "button",
+                "aria-label": clearLabel,
+                onClick: clearSelection,
+                children: /*#__PURE__*/ jsxRuntime.jsx(IconXmarkLine_default, {
+                    size: 12,
+                    "aria-hidden": "true"
+                })
+            }),
+            children && /*#__PURE__*/ jsxRuntime.jsx(DataTableBulkBarActions, {
+                children: children(selectedIds)
             })
-        })
-    });
-};
-reactMenu.Menu.Anchor;
-const MenuTrigger = reactMenu.Menu.Trigger;
-const MenuPositioner = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>{
-    const classNames = useClassNames();
-    return /*#__PURE__*/ jsxRuntime.jsx(reactMenu.Menu.Positioner, {
-        ref: ref,
-        className: clsx(classNames.positioner, className),
-        ...props
-    });
-});
-MenuPositioner.displayName = "MenuPositioner";
-const MenuContent = withContext$1(reactMenu.Menu.Content, "content");
-const MenuScrollArea = withContext$1(withStateProps(Primitive.div), "scrollArea");
-withContext$1(reactMenu.Menu.Group, "group");
-withContext$1(reactMenu.Menu.GroupLabel, "groupLabel");
-const MenuItem = /*#__PURE__*/ React__namespace.forwardRef(({ className: propClassName, ...props }, ref)=>{
-    const [variantProps, otherProps] = menuItem.menuItem.splitVariantProps(props);
-    const parentProps = useItemProps();
-    const classNames = menuItem.menuItem({
-        ...parentProps,
-        ...variantProps
-    });
-    return /*#__PURE__*/ jsxRuntime.jsx(ItemClassNamesProvider, {
-        value: classNames,
-        children: /*#__PURE__*/ jsxRuntime.jsx(reactMenu.Menu.Item, {
-            ref: ref,
-            className: clsx(classNames.root, propClassName),
-            ...otherProps
-        })
+        ]
     });
-});
-MenuItem.displayName = "MenuItem";
-withItemContext(withItemStateProps(Primitive.div), "body");
-const MenuItemLabel = withItemContext(withItemStateProps(Primitive.span), "label");
-withItemContext(withItemStateProps(Primitive.span), "description");
+}
 
 function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast }) {
     const effective = useEffectiveColumns(columns, {
@@ -5150,10 +5533,9 @@ function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast })
         stickyFirst
     });
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsxRuntime.jsx(DataTableFooterCell, {
                 "data-sticky": sticky["data-sticky"],
                 "data-sticky-edge": sticky["data-sticky-edge"],
@@ -5169,10 +5551,11 @@ function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast })
         })
     });
 }
-function formatCalcValue(value) {
-    return value.toLocaleString(undefined, {
+function formatCalcValue(value, op) {
+    const formatted = value.toLocaleString(undefined, {
         maximumFractionDigits: 2
     });
+    return op === "percentEmpty" || op === "percentFilled" ? `${formatted}%` : formatted;
 }
 /**
  * One ColumnCalc footer cell -- a click-anywhere-in-the-cell trigger (crisp's own
@@ -5207,7 +5590,7 @@ function formatCalcValue(value) {
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx("span", {
                                 className: "seed-data-table-column-calc-value",
-                                children: formatCalcValue(result)
+                                children: formatCalcValue(result, op)
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx("span", {
                                 className: "seed-data-table-column-calc-op",
@@ -5228,21 +5611,13 @@ function formatCalcValue(value) {
                     style: {
                         minWidth: 160
                     },
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(MenuScrollArea, {
-                        children: [
-                            ops.map((candidate)=>/*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
-                                    onClick: ()=>setColumnCalcOp(column.key, candidate),
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
-                                        children: DATA_TABLE_CALC_LABEL[candidate]
-                                    })
-                                }, candidate)),
-                            op && /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
-                                onClick: ()=>setColumnCalcOp(column.key, undefined),
+                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuScrollArea, {
+                        children: ops.map((candidate)=>/*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                onClick: ()=>setColumnCalcOp(column.key, candidate),
                                 children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
-                                    children: "Clear"
+                                    children: DATA_TABLE_CALC_LABEL[candidate]
                                 })
-                            })
-                        ]
+                            }, candidate))
                     })
                 })
             })
@@ -5383,10 +5758,9 @@ const DEFAULT_SORT_ICON = {
     });
     const [renamingKey, setRenamingKey] = React__namespace.useState(null);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column, label, width } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsxRuntime.jsxs(DataTableHeaderCell, {
                 columnKey: column.key,
                 sortable: column.sortable,
@@ -10507,6 +10881,18 @@ ContinuousDatePicker.displayName = "ContinuousDatePicker";
 // value list) down to `is`/`is not`/`empty`/`not empty`. `"isanyof"` is appended to any
 // of the four whenever the column supplies `filterValues` -- a faceted checkbox list,
 // independent of the column's own kind.
+//
+// Multi-select fix (DATATABLE-ATTIO-SPEC.md gap #12, live-measured 2026-09-30): a
+// `kind: "select"` column whose CELL is multi-valued (`type: "tags"`/`"chip-list"` --
+// a chip-list/tag column, not a single status pill) offers Attio's own
+// `contains`/`does not contain` instead of `is`/`is not` -- "is" reads as an exact-
+// set-equality check against an array value, which is not what Attio's own multi-
+// select filter means or what `applyToolbarFilters`' `is`/`isnot` branch (a plain
+// string-equality compare via `asText`) computes. `contains`/`doesnotcontain` are
+// already correct here unmodified: `applyToolbarFilters` already runs them against
+// `asText(raw)` (an array's own values joined), which is exactly "does any tag
+// match". Single-select (no `filterValues`-array cell type) keeps `is`/`is not` --
+// not re-measured against Attio, so left alone per the discovery doc's own hedge.
 ////////////////////////////////////////////////////////////////////////////////////
 const OP_ORDER = [
     "contains",
@@ -10540,9 +10926,19 @@ const SELECT_OP_ORDER = [
     "empty",
     "notempty"
 ];
+const MULTI_SELECT_OP_ORDER = [
+    "contains",
+    "doesnotcontain",
+    "empty",
+    "notempty"
+];
 /** The operators a column of this `kind` offers, in display order -- `hasValues`
- *  (the column supplies `filterValues`) appends `"isanyof"` regardless of kind. */ function opsForKind(kind, hasValues) {
-    const base = kind === "number" ? NUMBER_OP_ORDER : kind === "date" ? DATE_OP_ORDER : kind === "select" ? SELECT_OP_ORDER : OP_ORDER;
+ *  (the column supplies `filterValues`) appends `"isanyof"` regardless of kind.
+ *  `multiValue` (the column's CELL type is a chip-list/tags column, not just its
+ *  filter `kind`) swaps `SELECT_OP_ORDER`'s `is`/`is not` for `contains`/`does not
+ *  contain`, matching Attio's own multi-select filter -- see the operator-sets
+ *  comment above. */ function opsForKind(kind, hasValues, multiValue = false) {
+    const base = kind === "number" ? NUMBER_OP_ORDER : kind === "date" ? DATE_OP_ORDER : kind === "select" ? multiValue ? MULTI_SELECT_OP_ORDER : SELECT_OP_ORDER : OP_ORDER;
     return hasValues ? [
         ...base,
         "isanyof"
@@ -10910,66 +11306,58 @@ const formatFilterDate = (iso)=>{
     return `${OPERATOR_LABELS[filter.op]} ${value}`;
 }
 /**
- * One filter condition, INSIDE the Filter popover -- a compact one-line summary row
- * (field: operator value) with a trailing remove "x", expanding in place (accordion,
- * not a second popover) to the field/operator/value editor when clicked. Presentation
- * note (crisp/#593-style live re-check, 2026-09-28): Attio's own toolbar keeps active
- * conditions as a compact "Filter · N" count on the trigger, not a row of always-on
- * pill chips spread across the toolbar -- this replaces that first pass (which DID
- * render one big chip per condition, directly in the toolbar row) with conditions
- * living inside the ONE popover the trigger opens, the same list-of-rows shape
- * `SortControl` above already uses for its own conditions.
- */ function FilterConditionRow({ filter, columns, expanded, onToggle }) {
+ * One filter condition, INSIDE the Filter popover -- Attio's own compact chip shape
+ * (DATATABLE-ATTIO-SPEC.md gap #12, re-measured live 2026-09-30): `[attribute ▾]
+ * [operator …] [value] [remove ×]`, ALL of it visible at once, never behind a click-
+ * to-expand accordion. Supersedes this file's earlier 2026-09-28 note (which read
+ * Attio as keeping conditions collapsed behind a bare "Filter · N" count and put them
+ * in an accordion for that reason) -- the fresh read found the opposite: every active
+ * condition shows attribute/operator/value simultaneously. This keeps the outer shell
+ * (the "Filter"/"Filter · N" trigger opening ONE popover, `SortControl`'s own
+ * list-of-rows shape) rather than moving chips into the toolbar row itself, so the
+ * already-covered trigger/`Add filter` DOM (`DataTable.test.tsx`) stays put; only the
+ * PER-CONDITION row tightens, from an accordion to an always-open card. The operator
+ * set stays a row of small pill buttons (not a dropdown) so every existing test that
+ * clicks an operator by its exact button name keeps working unchanged.
+ */ function FilterConditionRow({ filter, columns }) {
     const { patchToolbarFilter, changeToolbarFilterField, removeToolbarFilter } = useDataTableContext();
     const column = columns.find((c)=>c.key === filter.key);
     const kind = column?.kind;
+    const multiValue = column?.type === "tags" || column?.type === "chip-list";
     const values = column?.filterValues ?? [];
-    const ops = opsForKind(kind, values.length > 0);
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+    const ops = opsForKind(kind, values.length > 0, multiValue);
+    return /*#__PURE__*/ jsxRuntime.jsxs("fieldset", {
+        "aria-label": `${column ? columnLabel(column) : filter.key} filter: ${conditionSummary(filter, column)}`,
         style: {
+            margin: 0,
             display: "flex",
             flexDirection: "column",
-            gap: 6,
+            gap: 8,
             borderRadius: 6,
-            background: expanded ? "var(--seed-color-bg-neutral-weak)" : "transparent",
-            padding: expanded ? 6 : 0
+            border: "1px solid var(--seed-color-border-neutral)",
+            background: "var(--seed-color-bg-neutral-weak)",
+            padding: 6
         },
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    gap: 2
+                    gap: 4
                 },
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsxs("button", {
-                        type: "button",
-                        onClick: onToggle,
+                    /*#__PURE__*/ jsxRuntime.jsx(InlineSelect, {
+                        ariaLabel: "Filter by field",
+                        value: filter.key,
+                        onChange: (key)=>changeToolbarFilterField(filter.id, key),
+                        options: columns.map((c)=>({
+                                value: c.key,
+                                label: columnLabel(c)
+                            })),
                         style: {
                             flex: 1,
-                            minWidth: 0,
-                            textAlign: "left",
-                            padding: "6px 8px",
-                            border: "none",
-                            borderRadius: 6,
-                            background: "transparent",
-                            cursor: "pointer",
-                            fontSize: 13,
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap"
-                        },
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx("strong", {
-                                style: {
-                                    fontWeight: 500
-                                },
-                                children: column ? columnLabel(column) : filter.key
-                            }),
-                            ":",
-                            " ",
-                            conditionSummary(filter, column)
-                        ]
+                            minWidth: 0
+                        }
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("button", {
                         type: "button",
@@ -10983,136 +11371,103 @@ const formatFilterDate = (iso)=>{
                     })
                 ]
             }),
-            expanded && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: {
-                    padding: "0 8px 4px",
                     display: "flex",
-                    flexDirection: "column",
-                    gap: 8
+                    flexWrap: "wrap",
+                    gap: 2
                 },
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        style: {
-                            fontSize: 12,
-                            color: "var(--seed-color-fg-neutral-subtle)"
-                        },
-                        children: "Field"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(InlineSelect, {
-                        ariaLabel: "Filter by field",
-                        value: filter.key,
-                        onChange: (key)=>changeToolbarFilterField(filter.id, key),
-                        options: columns.map((c)=>({
-                                value: c.key,
-                                label: columnLabel(c)
-                            }))
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        style: {
-                            fontSize: 12,
-                            color: "var(--seed-color-fg-neutral-subtle)"
-                        },
-                        children: "Condition"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                children: ops.map((op)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
+                        type: "button",
+                        "data-active": filter.op === op ? "" : undefined,
+                        onClick: ()=>patchToolbarFilter(filter.id, {
+                                op
+                            }),
                         style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            gap: 2
+                            textAlign: "left",
+                            padding: "4px 8px",
+                            borderRadius: 999,
+                            border: "none",
+                            cursor: "pointer",
+                            background: filter.op === op ? "var(--seed-color-bg-layer-default)" : "transparent",
+                            fontSize: 12
                         },
-                        children: ops.map((op)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
-                                type: "button",
-                                "data-active": filter.op === op ? "" : undefined,
-                                onClick: ()=>patchToolbarFilter(filter.id, {
-                                        op
-                                    }),
-                                style: {
-                                    textAlign: "left",
-                                    padding: "6px 8px",
-                                    borderRadius: 6,
-                                    border: "none",
-                                    cursor: "pointer",
-                                    background: filter.op === op ? "var(--seed-color-bg-layer-default)" : "transparent",
-                                    fontSize: 13
-                                },
-                                children: OPERATOR_LABELS[op]
-                            }, op))
-                    }),
-                    opNeedsValues(filter.op) && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        children: OPERATOR_LABELS[op]
+                    }, op))
+            }),
+            opNeedsValues(filter.op) && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 4,
+                    maxHeight: 160,
+                    overflow: "auto"
+                },
+                children: values.map((value)=>{
+                    const checked = (filter.values ?? []).includes(value);
+                    return /*#__PURE__*/ jsxRuntime.jsxs(CheckboxRoot, {
+                        checked: checked,
+                        onCheckedChange: ()=>patchToolbarFilter(filter.id, {
+                                values: checked ? (filter.values ?? []).filter((v)=>v !== value) : [
+                                    ...filter.values ?? [],
+                                    value
+                                ]
+                            }),
                         style: {
                             display: "flex",
-                            flexDirection: "column",
-                            gap: 4,
-                            maxHeight: 160,
-                            overflow: "auto"
+                            alignItems: "center",
+                            gap: 8,
+                            padding: "4px 0",
+                            cursor: "pointer"
                         },
-                        children: values.map((value)=>{
-                            const checked = (filter.values ?? []).includes(value);
-                            return /*#__PURE__*/ jsxRuntime.jsxs(CheckboxRoot, {
-                                checked: checked,
-                                onCheckedChange: ()=>patchToolbarFilter(filter.id, {
-                                        values: checked ? (filter.values ?? []).filter((v)=>v !== value) : [
-                                            ...filter.values ?? [],
-                                            value
-                                        ]
-                                    }),
-                                style: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: 8,
-                                    padding: "4px 0",
-                                    cursor: "pointer"
-                                },
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(CheckboxControl, {
-                                        children: /*#__PURE__*/ jsxRuntime.jsx(CheckboxIndicator, {
-                                            checked: /*#__PURE__*/ jsxRuntime.jsx(IconCheckmarkLine_default, {
-                                                size: 12
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(CheckboxLabel, {
-                                        children: value
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(CheckboxHiddenInput, {
-                                        "aria-label": value
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(CheckboxControl, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(CheckboxIndicator, {
+                                    checked: /*#__PURE__*/ jsxRuntime.jsx(IconCheckmarkLine_default, {
+                                        size: 12
                                     })
-                                ]
-                            }, value);
-                        })
-                    }),
-                    opNeedsValue(filter.op) && kind === "date" && /*#__PURE__*/ jsxRuntime.jsx(DatePicker, {
-                        value: filter.value ? toDatePickerDate(isoToDate(filter.value) ?? new Date()) : undefined,
-                        onValueChange: (d)=>d && patchToolbarFilter(filter.id, {
-                                value: dateToISO(fromDatePickerDate(d))
-                            })
-                    }),
-                    opNeedsValue(filter.op) && kind === "select" && /*#__PURE__*/ jsxRuntime.jsx(InlineSelect, {
-                        ariaLabel: "Filter value",
-                        placeholder: "Value…",
-                        value: filter.value || undefined,
-                        onChange: (value)=>patchToolbarFilter(filter.id, {
-                                value
+                                })
                             }),
-                        options: values.map((value)=>({
-                                value,
-                                label: value
-                            }))
-                    }),
-                    opNeedsValue(filter.op) && kind !== "date" && kind !== "select" && /*#__PURE__*/ jsxRuntime.jsx(TextFieldRoot, {
-                        variant: "outline",
-                        size: "medium",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(TextFieldInput, {
-                            type: kind === "number" ? "number" : "text",
-                            value: filter.value,
-                            onChange: (e)=>patchToolbarFilter(filter.id, {
-                                    value: e.target.value
-                                }),
-                            placeholder: "Value…",
-                            "aria-label": "Filter value"
-                        })
+                            /*#__PURE__*/ jsxRuntime.jsx(CheckboxLabel, {
+                                children: value
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(CheckboxHiddenInput, {
+                                "aria-label": value
+                            })
+                        ]
+                    }, value);
+                })
+            }),
+            opNeedsValue(filter.op) && kind === "date" && /*#__PURE__*/ jsxRuntime.jsx(DatePicker, {
+                value: filter.value ? toDatePickerDate(isoToDate(filter.value) ?? new Date()) : undefined,
+                onValueChange: (d)=>d && patchToolbarFilter(filter.id, {
+                        value: dateToISO(fromDatePickerDate(d))
                     })
-                ]
+            }),
+            opNeedsValue(filter.op) && kind === "select" && /*#__PURE__*/ jsxRuntime.jsx(InlineSelect, {
+                ariaLabel: "Filter value",
+                placeholder: "Value…",
+                value: filter.value || undefined,
+                onChange: (value)=>patchToolbarFilter(filter.id, {
+                        value
+                    }),
+                options: values.map((value)=>({
+                        value,
+                        label: value
+                    }))
+            }),
+            opNeedsValue(filter.op) && kind !== "date" && kind !== "select" && /*#__PURE__*/ jsxRuntime.jsx(TextFieldRoot, {
+                variant: "outline",
+                size: "medium",
+                children: /*#__PURE__*/ jsxRuntime.jsx(TextFieldInput, {
+                    type: kind === "number" ? "number" : "text",
+                    value: filter.value,
+                    onChange: (e)=>patchToolbarFilter(filter.id, {
+                            value: e.target.value
+                        }),
+                    placeholder: "Value…",
+                    "aria-label": "Filter value"
+                })
             })
         ]
     });
@@ -11120,15 +11475,14 @@ const formatFilterDate = (iso)=>{
 /**
  * The toolbar's Filter trigger + popover -- a compact `"Filter"` / `"Filter · N"`
  * button (matching `SortControl`'s own `"Sort"` / `"Sort · N"`), opening ONE popover
- * that holds both the active conditions (compact rows, `FilterConditionRow` above,
- * one expanded at a time) and, behind "+ Add filter", the field picker that appends a
- * new one -- not a row of always-on pill chips spread across the toolbar (this
- * replaces that first pass; see `FilterConditionRow`'s own doc comment).
+ * that holds both the active conditions (compact chips, `FilterConditionRow` above,
+ * ALL open at once -- no accordion) and, behind "+ Add filter", the field picker that
+ * appends a new one. See `FilterConditionRow`'s own doc comment for why the chips
+ * live inside this one popover rather than spread across the toolbar row itself.
  */ function FilterControl({ columns, label = "Filter" }) {
     const { toolbarFilters, addToolbarFilter } = useDataTableContext();
     const [open, setOpen] = React__namespace.useState(false);
     const [pickingField, setPickingField] = React__namespace.useState(false);
-    const [expandedId, setExpandedId] = React__namespace.useState(null);
     return /*#__PURE__*/ jsxRuntime.jsxs(MenuRoot, {
         open: open,
         onOpenChange: (next)=>{
@@ -11190,8 +11544,7 @@ const formatFilterDate = (iso)=>{
                                 columns.map((c)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
                                         type: "button",
                                         onClick: ()=>{
-                                            const id = addToolbarFilter(c.key);
-                                            setExpandedId(id);
+                                            addToolbarFilter(c.key);
                                             setPickingField(false);
                                         },
                                         style: {
@@ -11224,9 +11577,7 @@ const formatFilterDate = (iso)=>{
                                 }),
                                 toolbarFilters.map((f)=>/*#__PURE__*/ jsxRuntime.jsx(FilterConditionRow, {
                                         filter: f,
-                                        columns: columns,
-                                        expanded: expandedId === f.id,
-                                        onToggle: ()=>setExpandedId((id)=>id === f.id ? null : f.id)
+                                        columns: columns
                                     }, f.id)),
                                 /*#__PURE__*/ jsxRuntime.jsxs("button", {
                                     type: "button",
@@ -11255,8 +11606,8 @@ const formatFilterDate = (iso)=>{
     });
 }
 
-const DataTableToolbar = withContext$2(Primitive.div, "toolbar");
-const DataTableCount = withContext$2(Primitive.span, "count");
+const DataTableToolbar = withContext$1(Primitive.div, "toolbar");
+const DataTableCount = withContext$1(Primitive.span, "count");
 /**
  * The toolbar's own right-hand group -- `count`'s `marginInlineStart: auto` moved
  * here (off the `<span>` itself) so a consumer's `toolbarActions` and the row count
@@ -11267,7 +11618,7 @@ const DataTableCount = withContext$2(Primitive.span, "count");
  * it. `DataTable.tsx` always renders this wrapper once either `toolbarActions` or
  * `showCount` is on, so it degrades to exactly the old single-count layout when no
  * `toolbarActions` is passed.
- */ const DataTableToolbarEnd = withContext$2(Primitive.div, "toolbarEnd");
+ */ const DataTableToolbarEnd = withContext$1(Primitive.div, "toolbarEnd");
 /**
  * A compact, borderless search box -- crisp's own measured `.crisp-datatable-search`
  * (32px, `bgSurface` background, a leading icon, a soft rest-state shadow, a 1px brand
@@ -11317,7 +11668,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, 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 { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, bulkActions, clearSelectionLabel, 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, cellContextMenu = true, onViewEditHistory, cellContextMenuItems, 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
@@ -11419,6 +11770,12 @@ function DataTableInner(props, ref) {
     const columnKeys = React__namespace.useMemo(()=>columns.map((column)=>column.key), [
         columns
     ]);
+    // Threaded down to `reconcileColumnOrder` (react-headless's `dom.ts`) so a brand-new
+    // column added to `columns` after mount gets appended BEFORE this one, not past it --
+    // see that function's own doc comment for the bug this prevents.
+    const actionsColumnKey = React__namespace.useMemo(()=>columns.find((column)=>column.actions)?.key, [
+        columns
+    ]);
     const searchable = React__namespace.useMemo(()=>columns.some((column)=>column.searchable), [
         columns
     ]);
@@ -11441,7 +11798,7 @@ function DataTableInner(props, ref) {
     // loading/error/empty body, infinite scroll's sentinel, the add-row footer) reads
     // this ONE value rather than each re-deriving it, so they can never drift apart.
     const totalCols = columns.length + (selectable ? 1 : 0);
-    return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider$1, {
+    return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider, {
         value: classNames,
         children: /*#__PURE__*/ jsxRuntime.jsxs(DataTableRoot, {
             ref: ref,
@@ -11461,6 +11818,7 @@ function DataTableInner(props, ref) {
             toolbarFilters: resolvedToolbarFilters,
             onToolbarFiltersChange: handleToolbarFiltersChange,
             columnKeys: columnKeys,
+            actionsColumnKey: actionsColumnKey,
             columnOrder: columnOrder,
             defaultColumnOrder: defaultColumnOrder,
             onColumnOrderChange: onColumnOrderChange,
@@ -11597,7 +11955,10 @@ function DataTableInner(props, ref) {
                                                         locale: locale,
                                                         selectable: !!selectable,
                                                         stickyFirst: stickyFirst,
-                                                        stickyLast: resolvedStickyLast
+                                                        stickyLast: resolvedStickyLast,
+                                                        cellContextMenu: cellContextMenu,
+                                                        onViewEditHistory: onViewEditHistory,
+                                                        cellContextMenuItems: cellContextMenuItems
                                                     })
                                                 ]
                                             }, row.id)),
@@ -11636,6 +11997,10 @@ function DataTableInner(props, ref) {
                             })
                         ]
                     })
+                }),
+                selectable && /*#__PURE__*/ jsxRuntime.jsx(DataTableBulkBar, {
+                    clearLabel: clearSelectionLabel,
+                    children: bulkActions
                 })
             ]
         })
@@ -11689,7 +12054,7 @@ DataTableInner.displayName = "DataTable";
 // is a SIBLING of the toolbar (both inside `DataTablePrimitiveRoot`'s card `<div>`)
 // rather than `DataTablePrimitiveRoot` itself: a `<table>` cannot host the toolbar as a
 // child without the HTML parser foster-parenting it back out.
-const DataTableTable = withContext$2(DataTableTable$1, "table");
+const DataTableTable = withContext$1(DataTableTable$1, "table");
 /** One `<col>` per rendered column (plus the 40px selection column, if any) -- the
  *  SINGLE place a column's width is ever set now. Every row's header/body/footer cell
  *  reads its own width off this shared `<colgroup>` by construction (native table
@@ -11726,15 +12091,15 @@ const DataTableTable = withContext$2(DataTableTable$1, "table");
         ]
     });
 }
-const DataTableHeader = withContext$2(DataTableHeader$1, "header");
-const DataTableHeaderCell = withContext$2(DataTableHeaderCell$1, "headerCell");
+const DataTableHeader = withContext$1(DataTableHeader$1, "header");
+const DataTableHeaderCell = withContext$1(DataTableHeaderCell$1, "headerCell");
 // `.crisp-datatable-th-inner` -- the flex row INSIDE a `<th>` (label + filter trigger +
 // sort chevron + column menu). See qvism-preset's own `headerCellInner` slot comment
 // for why this lives one level below the cell itself rather than on it.
-const DataTableHeaderCellInner = withContext$2(Primitive.div, "headerCellInner");
+const DataTableHeaderCellInner = withContext$1(Primitive.div, "headerCellInner");
 /** The label text specifically -- the one thing in `DataTableHeaderCellInner` that
  *  truncates; the trailing filter/sort/menu icons stay fully visible regardless of how
- *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext$2(Primitive.span, "headerCellLabel");
+ *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext$1(Primitive.span, "headerCellLabel");
 /**
  * A selection `<th>`/`<td>`/footer `<td>` composes ITS base slot (`headerCell`/`cell`/
  * `footerCell`) together with the `selectionCell` MODIFIER, rather than replacing it --
@@ -11745,7 +12110,7 @@ const DataTableHeaderCellInner = withContext$2(Primitive.div, "headerCellInner")
  * a second recipe call.
  */ function withSelectionCell(Component, baseSlot) {
     const StyledComponent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-        const classNames = useClassNames$1();
+        const classNames = useClassNames();
         return /*#__PURE__*/ jsxRuntime.jsx(Component, {
             ref: ref,
             ...props,
@@ -11756,12 +12121,12 @@ const DataTableHeaderCellInner = withContext$2(Primitive.div, "headerCellInner")
     return StyledComponent;
 }
 const DataTableSelectionHeaderCell = withSelectionCell(DataTableHeaderCell$1, "headerCell");
-const DataTableHeaderCellIcon = withContext$2(Primitive.span, "headerCellIcon");
+const DataTableHeaderCellIcon = withContext$1(Primitive.span, "headerCellIcon");
 // body has no CSS slot of its own in the rootage spec -- it is a plain structural
 // `<tbody>`, so it is not wrapped in `withContext`.
 const DataTableBody = DataTableBody$1;
-const DataTableRow = withContext$2(DataTableRow$1, "row");
-const DataTableCell = withContext$2(DataTableCell$1, "cell");
+const DataTableRow = withContext$1(DataTableRow$1, "row");
+const DataTableCell = withContext$1(DataTableCell$1, "cell");
 const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // Tranche 4 -- column menu + reorder + resize + sticky columns. A scroll boundary
 // wrapping the whole `<table>`: `overflowX: auto` is what makes a wide table (more
@@ -11771,7 +12136,7 @@ const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // stays out of this slot's own base css (nothing here has a bounded height of its own
 // to clip), so it never introduces a second vertical scrollbar next to whatever
 // ambient container the whole DataTable already sits in.
-const DataTableScrollBodyBase = withContext$2(Primitive.div, "scrollArea");
+const DataTableScrollBodyBase = withContext$1(Primitive.div, "scrollArea");
 function DataTableScrollBody({ children, scrollProps }) {
     const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
     const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
@@ -11786,7 +12151,7 @@ function DataTableScrollBody({ children, scrollProps }) {
         children: children
     });
 }
-const DataTableFooterBase = withContext$2(Primitive.tfoot, "footer");
+const DataTableFooterBase = withContext$1(Primitive.tfoot, "footer");
 function DataTableFooter({ children, ...props }) {
     return /*#__PURE__*/ jsxRuntime.jsx(DataTableFooterBase, {
         ...props,
@@ -11795,7 +12160,7 @@ function DataTableFooter({ children, ...props }) {
         })
     });
 }
-const DataTableFooterCell = withContext$2(Primitive.td, "footerCell");
+const DataTableFooterCell = withContext$1(Primitive.td, "footerCell");
 // The selection column's OWN sticky wrappers -- one each for header/body/footer,
 // reading the live pinned set via `useSelectionStickyFirst` (column-layout.ts) instead
 // of the `stickyFirst` PROP alone, so the checkbox column sticks the moment ANY column
@@ -15733,6 +16098,7 @@ function RecordPreviewPanel({ open: _open, record, onClose, className, animation
 RecordPreviewPanel.displayName = "RecordPreviewPanel";
 
 exports.DataTable = DataTable;
+exports.DataTableBulkBar = DataTableBulkBar;
 exports.DataTableViewsControl = DataTableViewsControl;
 exports.RecordPreview = RecordPreview;
 exports.ResizablePanel = ResizablePanel;