@crispy-seed/data-table 0.10.4 → 0.11.0

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)));
@@ -1653,6 +1672,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 +1701,7 @@ function useDataTableSelection(props) {
         isSelected,
         toggleRow,
         toggleAll,
+        clearSelection,
         getRowProps
     };
 }
@@ -1696,24 +1727,33 @@ function useDataTableSort(props) {
         // already passes its "cleared" shape through unconditionally; this now matches.
         onChange: onSortChange
     });
+    // 3-state cycle (DATATABLE-ATTIO-SPEC.md: "asc/desc/none cycle") -- clicking a
+    // DIFFERENT column always starts it fresh at asc, discarding whatever the previous
+    // column's direction was (this stays a SINGLE-column secondary affordance, never a
+    // second multi-sort list of its own). Clicking the SAME column steps asc -> desc ->
+    // undefined ("none", i.e. this column drops out of the sort entirely) -> asc again.
+    // Before this, the cycle wrapped desc -> asc forever, with no click-driven way back
+    // to unsorted at all (a reported gap: "sort asc/desc has no option for no sort on
+    // columns") -- `clearSort` below was the ONLY way there, now it's one of two.
     const toggleSort = React.useCallback((key)=>{
         setSort((current)=>{
             if (!current || current.key !== key) return {
                 key,
                 dir: "asc"
             };
-            return {
+            if (current.dir === "asc") return {
                 key,
-                dir: current.dir === "asc" ? "desc" : "asc"
+                dir: "desc"
             };
+            return undefined;
         });
     }, [
         setSort
     ]);
-    /** Attio/GRC's "Remove sort" -- the header click cycle (above) only ever toggles
-   *  asc/desc once a column has been clicked once; this is the only way back to no
-   *  sort at all. Exposed for a column's own header menu (`column-menu.tsx`'s
-   *  `ColumnMenu`) to offer as a "Clear sort" item when that column is the sorted one. */ const clearSort = React.useCallback(()=>setSort(undefined), [
+    /** Attio/GRC's "Remove sort" -- a second way back to no sort at all (the header
+   *  click cycle above reaches it too, on a column's third click), exposed for a
+   *  column's own header menu (`column-menu.tsx`'s `ColumnMenu`) to offer as a
+   *  "Clear sort" item when that column is the sorted one, without three clicks. */ const clearSort = React.useCallback(()=>setSort(undefined), [
         setSort
     ]);
     const getHeaderCellProps = React.useCallback((columnKey, sortable)=>{
@@ -1746,7 +1786,12 @@ function useDataTableSort(props) {
         sort,
         toggleSort,
         clearSort,
-        getHeaderCellProps
+        getHeaderCellProps,
+        // Exposed for `useDataTable.ts`'s own composition ONLY (unifying this single
+        // click-to-sort column with `useDataTableToolbarSort`'s ordered list) -- not part
+        // of the documented header-click contract (`toggleSort`/`clearSort` above are),
+        // so no consumer-facing doc comment promotes it as a control of its own.
+        setSort
     };
 }
 
@@ -1850,11 +1895,14 @@ const EMPTY_SORTS = [];
  * concern rather than folded into `useDataTableSort` (DATATABLE-ATTIO-SPEC.md: "compose,
  * don't fatten one hook"). `useDataTableSort` still owns the single click-to-sort
  * column/direction a header's own click toggles -- that stays Attio's SECONDARY sort
- * affordance, untouched by this hook. This one is the PRIMARY toolbar Sort control: add
- * a condition, pick its field/direction, reorder, remove -- multiple conditions apply in
- * list order (sort[0] wins, later ones break ties; see the styled layer's
- * `applyToolbarSorts`). The styled layer decides how the two combine (DataTable.tsx:
- * toolbar sorts win when any exist, the single click-to-sort column otherwise).
+ * affordance, a separate hook from this one. They are NOT independent state, though:
+ * `useDataTable.ts`'s own composition keeps a header-driven column's entry in THIS
+ * array in sync (added/updated/removed as that column's header cycles asc/desc/none),
+ * so a consumer controlling only `toolbarSorts`/`onToolbarSortsChange` still sees a
+ * header click, and the toolbar's own "Remove sort" x on that same entry clears the
+ * header's side too. Multiple conditions apply in list order (sort[0] wins, later ones
+ * break ties; see the styled layer's `applyToolbarSorts`). The styled layer
+ * (`DataTable.tsx`) decides how the merged result actually sorts `data`.
  */ function useDataTableToolbarSort(props) {
     const { toolbarSorts: sortsProp, defaultToolbarSorts = EMPTY_SORTS, onToolbarSortsChange } = props;
     const [toolbarSorts = EMPTY_SORTS, setToolbarSorts] = useControllableState$1({
@@ -1939,8 +1987,13 @@ const EMPTY_SORTS = [];
 // header "is/is not" picker) -- DATATABLE-ATTIO-SPEC.md's Attio/crisp `TableToolbar`
 // model is now the PRIMARY filter/sort UX, not a per-column header affordance. They stay
 // SEPARATE sub-hooks from `useDataTableSort` rather than folded into it ("compose, don't
-// fatten one hook") -- the styled layer decides how the toolbar's multi-condition sort
-// and the header's single click-to-sort combine (DataTable.tsx).
+// fatten one hook") -- but this composition point below DOES reconcile the two into one
+// state (the two `useEffect`s after `infiniteScroll`), so a header click and the
+// toolbar's own Sort popover always agree on what's sorted, regardless of which prop
+// pair (`sort`/`onSortChange` or `toolbarSorts`/`onToolbarSortsChange`) a consumer
+// actually controls. `DataTable.tsx` (styled) still decides how the RESULT actually
+// sorts `data` (`effectiveSorts`/`applyToolbarSorts`) -- this layer only keeps the two
+// STATE pools in agreement.
 function useDataTable(props) {
     const sort = useDataTableSort(props);
     const selection = useDataTableSelection(props);
@@ -1963,6 +2016,105 @@ function useDataTable(props) {
         ...props,
         scrollRootRef: scroll.elementRef
     });
+    // Unifies `sort` (the header's own single click-to-sort column, above) with
+    // `toolbarSort.toolbarSorts` (the toolbar Sort popover's ordered list, above) into
+    // ONE state instead of two -- before this, a header click only ever moved `sort`,
+    // invisible to a consumer controlling `toolbarSorts`/`onToolbarSortsChange` (the
+    // reported bug: clicking a header did nothing to the array the consumer's own Sort
+    // popover reads, so the toolbar's "Sort" trigger/count and its popover rows silently
+    // ignored every header click).
+    //
+    // ONE effect, not two -- an earlier version split this into a forward
+    // (`sort` -> `toolbarSorts`) and a reverse (`toolbarSorts` -> `sort`) effect, each
+    // keyed off its own dependency. That raced on the very first render: `useEffect`
+    // runs every effect once on mount regardless of what "changed", so with
+    // `defaultSort` set, the reverse effect ran in the SAME commit as the forward one,
+    // read `toolbarSorts` BEFORE the forward effect's own (still-queued, not yet
+    // re-rendered) write had landed, saw no entry for the column yet, and immediately
+    // cleared `sort` right back out -- the defaultSort silently never took effect.
+    // `settledRef` sidesteps this: it remembers the last `{key,dir}` this effect itself
+    // confirmed, so on every run it can tell WHICH side moved since then, instead of
+    // guessing from which dependency happens to have triggered the re-run.
+    const settledRef = React.useRef({
+        key: undefined,
+        dir: undefined
+    });
+    React.useEffect(()=>{
+        const curSort = sort.sort;
+        const curEntry = curSort ? toolbarSort.toolbarSorts.find((s)=>s.key === curSort.key) : undefined;
+        const settled = settledRef.current;
+        const sortUnchangedSinceSettled = settled.key === curSort?.key && settled.dir === curSort?.dir;
+        if (sortUnchangedSinceSettled) {
+            // `sort` itself hasn't moved since we last settled -- if this effect is running
+            // at all, `toolbarSorts` is what changed, so REVERSE-sync: the toolbar Sort
+            // popover's own "Remove sort" x, or its direction select, touching this exact
+            // column. Never reaches across to adopt some OTHER column added independently
+            // via that popover -- only the column `sort` is already tracking.
+            if (!curSort) return;
+            if (!curEntry) {
+                sort.clearSort();
+                settledRef.current = {
+                    key: undefined,
+                    dir: undefined
+                };
+            } else if (curEntry.dir !== curSort.dir) {
+                sort.setSort({
+                    key: curSort.key,
+                    dir: curEntry.dir
+                });
+                settledRef.current = {
+                    key: curSort.key,
+                    dir: curEntry.dir
+                };
+            }
+            return;
+        }
+        // `sort` moved (a header click, Enter/Space, or `clearSort` -- column-menu.tsx's
+        // menu item calls that directly, bypassing `toggleSort`) -- FORWARD-sync:
+        // add/update/remove THIS column's own entry in `toolbarSorts`, leaving every
+        // OTHER entry (added independently via the toolbar's own "+ Add sort") untouched.
+        // The functional updater reads the CURRENT array off `current`, never off
+        // `toolbarSort.toolbarSorts` in this closure, so a stale render can never clobber
+        // an entry the toolbar's own popover added a moment earlier.
+        const prevKey = settled.key;
+        toolbarSort.setToolbarSorts((current)=>{
+            let updated = current;
+            if (prevKey && prevKey !== curSort?.key) {
+                updated = updated.filter((s)=>s.key !== prevKey);
+            }
+            if (curSort) {
+                const idx = updated.findIndex((s)=>s.key === curSort.key);
+                if (idx === -1) {
+                    updated = [
+                        ...updated,
+                        {
+                            key: curSort.key,
+                            dir: curSort.dir
+                        }
+                    ];
+                } else if (updated[idx].dir !== curSort.dir) {
+                    updated = updated.map((s, i)=>i === idx ? {
+                            ...s,
+                            dir: curSort.dir
+                        } : s);
+                }
+            }
+            return updated;
+        });
+        settledRef.current = curSort ? {
+            key: curSort.key,
+            dir: curSort.dir
+        } : {
+            key: undefined,
+            dir: undefined
+        };
+    }, [
+        sort.sort,
+        toolbarSort.toolbarSorts,
+        toolbarSort.setToolbarSorts,
+        sort.clearSort,
+        sort.setSort
+    ]);
     return {
         ...sort,
         ...selection,
@@ -2558,11 +2710,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);
@@ -3106,6 +3317,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
@@ -3264,11 +3610,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`,
@@ -3289,7 +3635,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
@@ -3329,8 +3675,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();
@@ -3345,7 +3691,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, {
@@ -3376,12 +3722,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,
@@ -3406,7 +3752,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();
@@ -3421,7 +3767,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();
@@ -3453,9 +3799,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)=>{
@@ -3466,7 +3812,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,
@@ -3479,20 +3825,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,
@@ -3500,12 +3846,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
@@ -3523,7 +3869,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
@@ -3580,7 +3926,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);
@@ -3774,6 +4120,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 = {
@@ -3811,7 +4173,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
@@ -4519,7 +4881,7 @@ function isCellTruncated(cell) {
  *  actually reported against a pinned column. */ 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
@@ -4534,7 +4896,10 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
                 row: row,
                 classNames: classNames,
                 locale: locale,
-                sticky: sticky
+                sticky: sticky,
+                cellContextMenu: cellContextMenu,
+                onViewEditHistory: onViewEditHistory,
+                cellContextMenuItems: cellContextMenuItems
             }, column.key);
         })
     });
@@ -4546,7 +4911,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
@@ -4562,6 +4927,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
@@ -4613,6 +4988,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
@@ -4716,7 +5104,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),
@@ -4727,14 +5115,34 @@ 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
+                    }),
+                    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", {
@@ -4964,64 +5372,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, {
@@ -5048,10 +5444,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
@@ -5086,7 +5483,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",
@@ -5107,21 +5504,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))
                     })
                 })
             })
@@ -5400,9 +5789,9 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
     const columnLabel = typeof label === "string" ? label : column.key;
     const pinned = isColumnPinned(column.key);
     // Attio/GRC's "Remove sort" (live-review fix D) -- the header's own click-to-sort
-    // (`SortIndicator`/`toggleSort`, above) only cycles asc/desc once a column has been
-    // clicked; this is the only affordance back to no sort at all, so it only makes
-    // sense to show on the column that IS currently sorted.
+    // (`SortIndicator`/`toggleSort`, above) already cycles asc -> desc -> none on its
+    // own third click, but this stays as a one-click shortcut to the same place, so it
+    // only makes sense to show on the column that IS currently sorted.
     const isSorted = sort?.key === column.key;
     const stopPropagation = (event)=>event.stopPropagation();
     return(// Live-review fix (D): a `MenuItem` inside `MenuPositioner` renders through a
@@ -10386,6 +10775,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",
@@ -10419,9 +10820,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"
@@ -10789,66 +11200,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",
@@ -10862,136 +11265,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"
+                })
             })
         ]
     });
@@ -10999,15 +11369,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)=>{
@@ -11069,8 +11438,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: {
@@ -11103,9 +11471,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",
@@ -11134,8 +11500,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
@@ -11146,7 +11512,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
@@ -11196,7 +11562,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
@@ -11320,7 +11686,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,
@@ -11476,7 +11842,10 @@ function DataTableInner(props, ref) {
                                                         locale: locale,
                                                         selectable: !!selectable,
                                                         stickyFirst: stickyFirst,
-                                                        stickyLast: resolvedStickyLast
+                                                        stickyLast: resolvedStickyLast,
+                                                        cellContextMenu: cellContextMenu,
+                                                        onViewEditHistory: onViewEditHistory,
+                                                        cellContextMenuItems: cellContextMenuItems
                                                     })
                                                 ]
                                             }, row.id)),
@@ -11515,6 +11884,10 @@ function DataTableInner(props, ref) {
                             })
                         ]
                     })
+                }),
+                selectable && /*#__PURE__*/ jsxRuntime.jsx(DataTableBulkBar, {
+                    clearLabel: clearSelectionLabel,
+                    children: bulkActions
                 })
             ]
         })
@@ -11568,7 +11941,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
@@ -11605,15 +11978,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 --
@@ -11624,7 +11997,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,
@@ -11635,12 +12008,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
@@ -11650,7 +12023,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 ?? {};
@@ -11665,7 +12038,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,
@@ -11674,7 +12047,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
@@ -15612,6 +15985,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;