@crispy-seed/data-table 0.3.0 → 0.4.0

package/dist/index.js

@@ -2744,6 +2744,292 @@ const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = tr
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
+__insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
+
+const createClassName = (className, variants, compoundVariants = [])=>{
+    const variantKeys = Object.keys(variants);
+    const variantValues = variantKeys.map((key)=>variants[key]);
+    const variantClassName = variantKeys.map((key, index)=>`${className}--${key}_${variantValues[index]}`).join(" ");
+    const compountVariantClassName = compoundVariants.filter((compoundVariant)=>Object.keys(compoundVariant).every((key)=>compoundVariant[key] === variants[key])).map((compoundVariant)=>`${className}--${Object.keys(compoundVariant).map((key)=>{
+            return `${key}_${compoundVariant[key]}`;
+        }).join("-")}`).join(" ");
+    return [
+        className,
+        variantClassName,
+        compountVariantClassName
+    ].filter(Boolean).join(" ");
+};
+function mergeVariants(a, b) {
+    const result = {
+        ...a
+    };
+    for(const k in b){
+        if (b[k] != null) {
+            result[k] = b[k];
+        }
+    }
+    return result;
+}
+function splitVariantProps(props, variantMap) {
+    const variantProps = {};
+    const otherProps = {};
+    for(const key in props){
+        if (variantMap[key] != null) {
+            variantProps[key] = props[key];
+        } else {
+            otherProps[key] = props[key];
+        }
+    }
+    return [
+        variantProps,
+        otherProps
+    ];
+}
+
+const dataTableSlotNames = [
+    [
+        "root",
+        "seed-data-table__root"
+    ],
+    [
+        "table",
+        "seed-data-table__table"
+    ],
+    [
+        "header",
+        "seed-data-table__header"
+    ],
+    [
+        "headerCell",
+        "seed-data-table__headerCell"
+    ],
+    [
+        "headerCellInner",
+        "seed-data-table__headerCellInner"
+    ],
+    [
+        "headerCellLabel",
+        "seed-data-table__headerCellLabel"
+    ],
+    [
+        "headerCellIcon",
+        "seed-data-table__headerCellIcon"
+    ],
+    [
+        "row",
+        "seed-data-table__row"
+    ],
+    [
+        "cell",
+        "seed-data-table__cell"
+    ],
+    [
+        "entity",
+        "seed-data-table__entity"
+    ],
+    [
+        "entityName",
+        "seed-data-table__entityName"
+    ],
+    [
+        "tagList",
+        "seed-data-table__tagList"
+    ],
+    [
+        "link",
+        "seed-data-table__link"
+    ],
+    [
+        "toolbar",
+        "seed-data-table__toolbar"
+    ],
+    [
+        "search",
+        "seed-data-table__search"
+    ],
+    [
+        "count",
+        "seed-data-table__count"
+    ],
+    [
+        "toolbarEnd",
+        "seed-data-table__toolbarEnd"
+    ],
+    [
+        "scrollArea",
+        "seed-data-table__scrollArea"
+    ],
+    [
+        "footer",
+        "seed-data-table__footer"
+    ],
+    [
+        "footerCell",
+        "seed-data-table__footerCell"
+    ],
+    [
+        "emptyState",
+        "seed-data-table__emptyState"
+    ],
+    [
+        "loadingState",
+        "seed-data-table__loadingState"
+    ],
+    [
+        "addRow",
+        "seed-data-table__addRow"
+    ],
+    [
+        "addRowCell",
+        "seed-data-table__addRowCell"
+    ],
+    [
+        "selectionCell",
+        "seed-data-table__selectionCell"
+    ]
+];
+const defaultVariant$4 = {
+    "surface": "card",
+    "interactive": false
+};
+const compoundVariants$4 = [];
+const dataTableVariantMap = {
+    "surface": [
+        "card",
+        "bleed"
+    ],
+    "interactive": [
+        true,
+        false
+    ]
+};
+function dataTable(props) {
+    return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
+        return [
+            slot,
+            createClassName(className, mergeVariants(defaultVariant$4, props), compoundVariants$4)
+        ];
+    }));
+}
+Object.assign(dataTable, {
+    splitVariantProps: (props)=>splitVariantProps(props, dataTableVariantMap)
+}); // @recipe(seed): data-table
+
+// The one `createSlotRecipeContext(dataTable)` call every sibling file in this
+// directory shares -- `ClassNamesProvider` and `withContext` must be the SAME
+// binding everywhere (a slot component built from a second, independent call would
+// read a DIFFERENT React context and never see the classNames `DataTableInner`
+// provides), so this is the one place that calls `createSlotRecipeContext`, and every
+// other file (`DataTable.tsx`, `column-menu.tsx`, `resize.tsx`, `column-calc.tsx`,
+// `toolbar.tsx`, `body-cells.tsx`, `editors.tsx`) imports its exports from here rather
+// than re-deriving its own.
+const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$1, useClassNames: useClassNames$1 } = createSlotRecipeContext(dataTable);
+
+/**
+ * The pure filter itself, split out of `useSelectSearch` below so it can be
+ * mutation-tested directly (the same "small pure function beside its own test" shape
+ * `filtering.ts`'s `matchesSearch`/`getColumnValue` already use in this directory) --
+ * case-insensitive substring match, on whitespace-trimmed input. An empty/whitespace-
+ * only query returns `options` unfiltered rather than matching nothing, the same
+ * "no query yet" case crisp's own `select.tsx` special-cases (`searchable && q`).
+ */ function filterSelectOptions(options, query, getText) {
+    const q = query.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter((option)=>getText(option).toLowerCase().includes(q));
+}
+/**
+ * Filters `options` by `getText(option)` against a live query string -- the one
+ * concern every searchable Select popover shares (crisp's own `select.tsx` computes
+ * this inline; this hook is `filterSelectOptions` above plus the query state it reads,
+ * kept generic over `T` so it works for `DataTableEditOption` today and a future
+ * filter-value picker's own option shape without a second copy of the same filter).
+ */ function useSelectSearch(options, getText) {
+    const [query, setQuery] = React.useState("");
+    const filtered = React.useMemo(()=>filterSelectOptions(options, query, getText), [
+        options,
+        query,
+        getText
+    ]);
+    return {
+        query,
+        setQuery,
+        filtered
+    };
+}
+/**
+ * The search box itself -- crisp's own top-of-listbox filter field
+ * (`select.tsx`'s `crisp-select-search`), styled with the SAME compact chrome
+ * `toolbar.tsx`'s `SearchBox` already standardized for the table's own toolbar search
+ * (seed's real `text-input.ts` outline-variant tokens, via the `dataTable` recipe's
+ * own `search` slot -- not seed's documented `TextField`, measured too heavy for a
+ * ~32px inline control; see `SearchBox`'s own comment for that measurement). Reusing
+ * the SAME recipe slot here, rather than standing up a second near-identical one,
+ * keeps every "small bordered search input" in this package pixel-identical by
+ * construction -- the slot's `max-width: 280px` (a toolbar-row layout constraint, not
+ * chrome) is overridden inline since this field fills its popover instead.
+ *
+ * Swallows every keydown except Escape before it can reach seed's own listbox
+ * (`SelectContent`'s typeahead-by-keyboard): a search field that ALSO drives the
+ * listbox's letter-jump would fight the query it is supposed to be typing into. Escape
+ * passes through untouched -- `SelectRoot`'s own `onOpenChange` (in every caller) is
+ * what actually closes the editor on Escape, not a handler on this field.
+ *
+ * `autoFocus` is applied imperatively (an effect + ref), not the native `autoFocus`
+ * attribute -- lint (`a11y/noAutofocus`) bars that on a raw `<input>`, and this is the
+ * same ref-and-focus shape crisp's own `select.tsx` already uses for its search field
+ * (`searchRef.current?.focus({ preventScroll: true })` on open), not a workaround
+ * invented for the lint rule.
+ */ function SelectSearchField({ value, onChange, placeholder, "aria-label": ariaLabel, autoFocus, onKeyDown }) {
+    const classNames = dataTable();
+    const inputRef = React.useRef(null);
+    React.useEffect(()=>{
+        if (autoFocus) inputRef.current?.focus({
+            preventScroll: true
+        });
+    }, [
+        autoFocus
+    ]);
+    return /*#__PURE__*/ jsxs("span", {
+        className: classNames.search,
+        style: {
+            display: "flex",
+            maxWidth: "none",
+            margin: 4
+        },
+        children: [
+            /*#__PURE__*/ jsx(IconMagnifyingglassLine_default, {
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ jsx("input", {
+                ref: inputRef,
+                type: "text",
+                value: value,
+                onChange: (event)=>onChange(event.target.value),
+                placeholder: placeholder,
+                "aria-label": ariaLabel ?? placeholder,
+                onClick: (event)=>event.stopPropagation(),
+                onKeyDown: (event)=>{
+                    if (event.key !== "Escape") event.stopPropagation();
+                    onKeyDown?.(event);
+                }
+            })
+        ]
+    });
+}
+/** The empty state shown when a search matches nothing -- crisp's own `searchable`
+ *  `emptyLabel` (`crisp-select-empty`), reproduced at the same inset/opacity/size the
+ *  ad-hoc `ReferenceEditor` "No users"/"No results" row already used before this file
+ *  existed. */ function SelectSearchEmpty({ children }) {
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            padding: "6px 12px",
+            opacity: 0.63,
+            fontSize: 13
+        },
+        children: children
+    });
+}
+
 /** The raw value a live editor reads, distinct from `DataTableColumn.value` (the
  *  accessor sort/search/filter/export share): `editValue` returns whatever TYPE the
  *  editor itself expects -- a real `boolean` for `editor: "switch"`/`type:
@@ -2846,10 +3132,21 @@ function DateEditor({ column, value, pending, onCommit, onCancel }) {
 ////////////////////////////////////////////////////////////////////////////////////
 // -- editor: "select" -- double-click opens seed's own Select, auto-opened (seed's
 //    `SelectRoot` takes `defaultOpen` directly -- unlike crisp's closed-API `Select`,
-//    which needs a synthetic click on its own trigger to start open). -------------
+//    which needs a synthetic click on its own trigger to start open). A long option
+//    list gets crisp's own search-on-top (`select-search.tsx`) for free, past
+//    `SELECT_EDITOR_SEARCH_THRESHOLD` -- fewer options than that and a filter field
+//    is pure noise above a list you can already scan (crisp's own `searchable` is
+//    opt-in for the identical reason); `column.editorSearchable` overrides either way.
+/** Above this many options, `SelectEditor` turns its search field on by default --
+ *  below it, a filter box adds more chrome than it saves (nothing here claims this
+ *  exact number is measured; it is a judgment call, which is why `editorSearchable`
+ *  exists to override it either direction). */ const SELECT_EDITOR_SEARCH_THRESHOLD = 8;
 function SelectEditor({ column, value, pending, onCommit, onCancel }) {
     const options = column.options ?? [];
     const current = value == null ? "" : String(value);
+    const searchable = column.editorSearchable ?? options.length > SELECT_EDITOR_SEARCH_THRESHOLD;
+    const { query, setQuery, filtered } = useSelectSearch(options, (option)=>option.label);
+    const visible = searchable ? filtered : options;
     return /*#__PURE__*/ jsxs(SelectRoot, {
         // Controlled open, per docs/examples/react/select/controlled-open.tsx --
         // this editor is only ever mounted while the cell IS editing, so it always
@@ -2881,38 +3178,54 @@ function SelectEditor({ column, value, pending, onCommit, onCancel }) {
                 ]
             }),
             /*#__PURE__*/ jsx(SelectPositioner, {
-                children: /*#__PURE__*/ jsx(SelectContent, {
-                    children: /*#__PURE__*/ jsx(SelectScrollArea, {
-                        children: options.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
-                                value: option.value,
-                                label: option.label,
-                                children: [
-                                    /*#__PURE__*/ jsx(SelectItemBody, {
-                                        children: /*#__PURE__*/ jsx(SelectItemLabel, {})
-                                    }),
-                                    /*#__PURE__*/ jsx(SelectItemIndicator, {
-                                        selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
-                                    })
-                                ]
-                            }, option.value))
-                    })
+                children: /*#__PURE__*/ jsxs(SelectContent, {
+                    children: [
+                        searchable && /*#__PURE__*/ jsx(SelectSearchField, {
+                            autoFocus: true,
+                            value: query,
+                            onChange: setQuery,
+                            placeholder: column.editorSearchPlaceholder ?? "Search…",
+                            "aria-label": `Search ${column.key}`
+                        }),
+                        /*#__PURE__*/ jsxs(SelectScrollArea, {
+                            children: [
+                                searchable && visible.length === 0 && /*#__PURE__*/ jsx(SelectSearchEmpty, {
+                                    children: column.editorEmptyLabel ?? "No results"
+                                }),
+                                visible.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
+                                        value: option.value,
+                                        label: option.label,
+                                        children: [
+                                            /*#__PURE__*/ jsx(SelectItemBody, {
+                                                children: /*#__PURE__*/ jsx(SelectItemLabel, {})
+                                            }),
+                                            /*#__PURE__*/ jsx(SelectItemIndicator, {
+                                                selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
+                                            })
+                                        ]
+                                    }, option.value))
+                            ]
+                        })
+                    ]
                 })
             })
         ]
     });
 }
 ////////////////////////////////////////////////////////////////////////////////////
-// -- editor: "reference" / "actor" -- same picker, search-enabled, each option
-//    carrying a small avatar (a photo for a real one, a generic person glyph for
-//    none) -- `actor` is `reference` over people specifically (crisp's own #449/
-//    #432 `ReferenceCell` shape), so the two share one component; only the search
-//    placeholder differs. Seed's `Select` has no built-in search combobox (unlike
-//    crisp's own `Select`), so this filters `refOptions` itself against a small
-//    `TextField` rendered as the content's own first row. --------------------------
+// -- editor: "reference" / "actor" -- same picker, ALWAYS search-enabled (unlike
+//    `SelectEditor`'s threshold -- a reference/actor list is people/records, search
+//    is the point regardless of how few there are today), each option carrying a
+//    small avatar (a photo for a real one, a generic person glyph for none) --
+//    `actor` is `reference` over people specifically (crisp's own #449/#432
+//    `ReferenceCell` shape), so the two share one component; only the search
+//    placeholder/empty copy differs. Seed's `Select` has no built-in search combobox
+//    (unlike crisp's own `Select`), so this uses the shared `select-search.tsx`
+//    field/hook -- the same one `SelectEditor` above uses -- rather than its own
+//    copy of the query/filter/empty triangle. --------------------------------------
 function ReferenceEditor({ column, value, pending, onCommit, onCancel }) {
-    const [query, setQuery] = React.useState("");
     const options = column.refOptions ?? [];
-    const filtered = query.trim() ? options.filter((option)=>option.label.toLowerCase().includes(query.trim().toLowerCase())) : options;
+    const { query, setQuery, filtered } = useSelectSearch(options, (option)=>option.label);
     const current = value == null ? "" : String(value);
     const isActor = column.editor === "actor";
     return /*#__PURE__*/ jsxs(SelectRoot, {
@@ -2942,40 +3255,17 @@ function ReferenceEditor({ column, value, pending, onCommit, onCancel }) {
             /*#__PURE__*/ jsx(SelectPositioner, {
                 children: /*#__PURE__*/ jsxs(SelectContent, {
                     children: [
-                        /*#__PURE__*/ jsx(TextFieldRoot, {
-                            size: "medium",
-                            style: {
-                                margin: 4
-                            },
-                            onKeyDown: (event)=>{
-                                // The listbox's own typeahead/arrow handling lives on THIS field's
-                                // sibling items, not on the field itself -- stop everything except
-                                // Escape from also driving the listbox's own keyboard nav. Escape
-                                // itself needs no special-casing to "reach" anything any more: it's
-                                // SelectContent's own `DismissibleLayer` (Select.tsx) that closes the
-                                // listbox, and that dismissal is a document-level listener outside
-                                // this React subtree entirely -- a synthetic `stopPropagation` here
-                                // was never able to block it either way, so the controlled `open`
-                                // above (via `onOpenChange`) is what actually ends this cell's edit.
-                                if (event.key !== "Escape") event.stopPropagation();
-                            },
-                            children: /*#__PURE__*/ jsx(TextFieldInput, {
-                                autoFocus: true,
-                                "aria-label": isActor ? "Search people" : `Search ${column.key}`,
-                                placeholder: isActor ? "Search people…" : "Search…",
-                                value: query,
-                                onChange: (event)=>setQuery(event.target.value)
-                            })
+                        /*#__PURE__*/ jsx(SelectSearchField, {
+                            autoFocus: true,
+                            value: query,
+                            onChange: setQuery,
+                            placeholder: column.refSearchPlaceholder ?? (isActor ? "Search people…" : "Search…"),
+                            "aria-label": isActor ? "Search people" : `Search ${column.key}`
                         }),
                         /*#__PURE__*/ jsxs(SelectScrollArea, {
                             children: [
-                                filtered.length === 0 && /*#__PURE__*/ jsx("div", {
-                                    style: {
-                                        padding: "6px 12px",
-                                        opacity: 0.63,
-                                        fontSize: 13
-                                    },
-                                    children: isActor ? "No users" : "No results"
+                                filtered.length === 0 && /*#__PURE__*/ jsx(SelectSearchEmpty, {
+                                    children: column.refEmptyLabel ?? (isActor ? "No users" : "No results")
                                 }),
                                 filtered.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
                                         value: option.value,
@@ -3351,7 +3641,7 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
     }
 }
 
-const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$1, useClassNames: useClassNames$1 } = createSlotRecipeContext(menu);
+const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(menu);
 const { PropsProvider: ItemPropsProvider, useProps: useItemProps, withContext: withItemContext, ClassNamesProvider: ItemClassNamesProvider } = createSlotRecipeContext(menuItem);
 const withStateProps = createWithStateProps([
     useMenuContext
@@ -3362,7 +3652,7 @@ const withItemStateProps = createWithStateProps([
 const MenuRoot = (props)=>{
     const [variantProps, otherProps] = menu.splitVariantProps(props);
     const classNames = menu(variantProps);
-    return /*#__PURE__*/ jsx(ClassNamesProvider$1, {
+    return /*#__PURE__*/ jsx(ClassNamesProvider, {
         value: classNames,
         children: /*#__PURE__*/ jsx(ItemPropsProvider, {
             value: {
@@ -3377,7 +3667,7 @@ const MenuRoot = (props)=>{
 Menu.Anchor;
 const MenuTrigger = Menu.Trigger;
 const MenuPositioner = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
-    const classNames = useClassNames$1();
+    const classNames = useClassNames();
     return /*#__PURE__*/ jsx(Menu.Positioner, {
         ref: ref,
         className: clsx(classNames.positioner, className),
@@ -3385,10 +3675,10 @@ const MenuPositioner = /*#__PURE__*/ React.forwardRef(({ className, ...props },
     });
 });
 MenuPositioner.displayName = "MenuPositioner";
-const MenuContent = withContext$1(Menu.Content, "content");
-const MenuScrollArea = withContext$1(withStateProps(Primitive.div), "scrollArea");
-withContext$1(Menu.Group, "group");
-withContext$1(Menu.GroupLabel, "groupLabel");
+const MenuContent = withContext(Menu.Content, "content");
+const MenuScrollArea = withContext(withStateProps(Primitive.div), "scrollArea");
+withContext(Menu.Group, "group");
+withContext(Menu.GroupLabel, "groupLabel");
 const MenuItem = /*#__PURE__*/ React.forwardRef(({ className: propClassName, ...props }, ref)=>{
     const [variantProps, otherProps] = menuItem.splitVariantProps(props);
     const parentProps = useItemProps();
@@ -3807,187 +4097,6 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
     });
 }
 
-__insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
-
-const createClassName = (className, variants, compoundVariants = [])=>{
-    const variantKeys = Object.keys(variants);
-    const variantValues = variantKeys.map((key)=>variants[key]);
-    const variantClassName = variantKeys.map((key, index)=>`${className}--${key}_${variantValues[index]}`).join(" ");
-    const compountVariantClassName = compoundVariants.filter((compoundVariant)=>Object.keys(compoundVariant).every((key)=>compoundVariant[key] === variants[key])).map((compoundVariant)=>`${className}--${Object.keys(compoundVariant).map((key)=>{
-            return `${key}_${compoundVariant[key]}`;
-        }).join("-")}`).join(" ");
-    return [
-        className,
-        variantClassName,
-        compountVariantClassName
-    ].filter(Boolean).join(" ");
-};
-function mergeVariants(a, b) {
-    const result = {
-        ...a
-    };
-    for(const k in b){
-        if (b[k] != null) {
-            result[k] = b[k];
-        }
-    }
-    return result;
-}
-function splitVariantProps(props, variantMap) {
-    const variantProps = {};
-    const otherProps = {};
-    for(const key in props){
-        if (variantMap[key] != null) {
-            variantProps[key] = props[key];
-        } else {
-            otherProps[key] = props[key];
-        }
-    }
-    return [
-        variantProps,
-        otherProps
-    ];
-}
-
-const dataTableSlotNames = [
-    [
-        "root",
-        "seed-data-table__root"
-    ],
-    [
-        "table",
-        "seed-data-table__table"
-    ],
-    [
-        "header",
-        "seed-data-table__header"
-    ],
-    [
-        "headerCell",
-        "seed-data-table__headerCell"
-    ],
-    [
-        "headerCellInner",
-        "seed-data-table__headerCellInner"
-    ],
-    [
-        "headerCellLabel",
-        "seed-data-table__headerCellLabel"
-    ],
-    [
-        "headerCellIcon",
-        "seed-data-table__headerCellIcon"
-    ],
-    [
-        "row",
-        "seed-data-table__row"
-    ],
-    [
-        "cell",
-        "seed-data-table__cell"
-    ],
-    [
-        "entity",
-        "seed-data-table__entity"
-    ],
-    [
-        "entityName",
-        "seed-data-table__entityName"
-    ],
-    [
-        "tagList",
-        "seed-data-table__tagList"
-    ],
-    [
-        "link",
-        "seed-data-table__link"
-    ],
-    [
-        "toolbar",
-        "seed-data-table__toolbar"
-    ],
-    [
-        "search",
-        "seed-data-table__search"
-    ],
-    [
-        "count",
-        "seed-data-table__count"
-    ],
-    [
-        "toolbarEnd",
-        "seed-data-table__toolbarEnd"
-    ],
-    [
-        "scrollArea",
-        "seed-data-table__scrollArea"
-    ],
-    [
-        "footer",
-        "seed-data-table__footer"
-    ],
-    [
-        "footerCell",
-        "seed-data-table__footerCell"
-    ],
-    [
-        "emptyState",
-        "seed-data-table__emptyState"
-    ],
-    [
-        "loadingState",
-        "seed-data-table__loadingState"
-    ],
-    [
-        "addRow",
-        "seed-data-table__addRow"
-    ],
-    [
-        "addRowCell",
-        "seed-data-table__addRowCell"
-    ],
-    [
-        "selectionCell",
-        "seed-data-table__selectionCell"
-    ]
-];
-const defaultVariant$4 = {
-    "surface": "card",
-    "interactive": false
-};
-const compoundVariants$4 = [];
-const dataTableVariantMap = {
-    "surface": [
-        "card",
-        "bleed"
-    ],
-    "interactive": [
-        true,
-        false
-    ]
-};
-function dataTable(props) {
-    return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
-        return [
-            slot,
-            createClassName(className, mergeVariants(defaultVariant$4, props), compoundVariants$4)
-        ];
-    }));
-}
-Object.assign(dataTable, {
-    splitVariantProps: (props)=>splitVariantProps(props, dataTableVariantMap)
-}); // @recipe(seed): data-table
-
-// The one `createSlotRecipeContext(dataTable)` call every sibling file in this
-// directory shares -- `ClassNamesProvider` and `withContext` must be the SAME
-// binding everywhere (a slot component built from a second, independent call would
-// read a DIFFERENT React context and never see the classNames `DataTableInner`
-// provides), so this is the one place that calls `createSlotRecipeContext`, and every
-// other file (`DataTable.tsx`, `column-menu.tsx`, `resize.tsx`, `column-calc.tsx`,
-// `toolbar.tsx`, `body-cells.tsx`, `editors.tsx`) imports its exports from here rather
-// than re-deriving its own.
-const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(dataTable);
-
 /**
  * A small inline spinner, not seed's own `ProgressCircle` -- that component's
  * smallest size (24px) is already bigger than crisp's own measured 16px loading
@@ -9630,8 +9739,8 @@ const formatFilterDate = (iso)=>{
     });
 }
 
-const DataTableToolbar = withContext(Primitive.div, "toolbar");
-const DataTableCount = withContext(Primitive.span, "count");
+const DataTableToolbar = withContext$1(Primitive.div, "toolbar");
+const DataTableCount = withContext$1(Primitive.span, "count");
 /**
  * The toolbar's own right-hand group -- `count`'s `marginInlineStart: auto` moved
  * here (off the `<span>` itself) so a consumer's `toolbarActions` and the row count
@@ -9642,7 +9751,7 @@ const DataTableCount = withContext(Primitive.span, "count");
  * it. `DataTable.tsx` always renders this wrapper once either `toolbarActions` or
  * `showCount` is on, so it degrades to exactly the old single-count layout when no
  * `toolbarActions` is passed.
- */ const DataTableToolbarEnd = withContext(Primitive.div, "toolbarEnd");
+ */ const DataTableToolbarEnd = withContext$1(Primitive.div, "toolbarEnd");
 /**
  * A compact, borderless search box -- crisp's own measured `.crisp-datatable-search`
  * (32px, `bgSurface` background, a leading icon, a soft rest-state shadow, a 1px brand
@@ -9797,7 +9906,7 @@ function DataTableInner(props, ref) {
     // loading/error/empty body, infinite scroll's sentinel, the add-row footer) reads
     // this ONE value rather than each re-deriving it, so they can never drift apart.
     const totalCols = columns.length + (selectable ? 1 : 0);
-    return /*#__PURE__*/ jsx(ClassNamesProvider, {
+    return /*#__PURE__*/ jsx(ClassNamesProvider$1, {
         value: classNames,
         children: /*#__PURE__*/ jsxs(DataTableRoot, {
             ref: ref,
@@ -10052,7 +10161,7 @@ DataTableInner.displayName = "DataTable";
 // is a SIBLING of the toolbar (both inside `DataTablePrimitiveRoot`'s card `<div>`)
 // rather than `DataTablePrimitiveRoot` itself: a `<table>` cannot host the toolbar as a
 // child without the HTML parser foster-parenting it back out.
-const DataTableTable = withContext(DataTableTable$1, "table");
+const DataTableTable = withContext$1(DataTableTable$1, "table");
 /** One `<col>` per rendered column (plus the 40px selection column, if any) -- the
  *  SINGLE place a column's width is ever set now. Every row's header/body/footer cell
  *  reads its own width off this shared `<colgroup>` by construction (native table
@@ -10077,15 +10186,15 @@ const DataTableTable = withContext(DataTableTable$1, "table");
         ]
     });
 }
-const DataTableHeader = withContext(DataTableHeader$1, "header");
-const DataTableHeaderCell = withContext(DataTableHeaderCell$1, "headerCell");
+const DataTableHeader = withContext$1(DataTableHeader$1, "header");
+const DataTableHeaderCell = withContext$1(DataTableHeaderCell$1, "headerCell");
 // `.crisp-datatable-th-inner` -- the flex row INSIDE a `<th>` (label + filter trigger +
 // sort chevron + column menu). See qvism-preset's own `headerCellInner` slot comment
 // for why this lives one level below the cell itself rather than on it.
-const DataTableHeaderCellInner = withContext(Primitive.div, "headerCellInner");
+const DataTableHeaderCellInner = withContext$1(Primitive.div, "headerCellInner");
 /** The label text specifically -- the one thing in `DataTableHeaderCellInner` that
  *  truncates; the trailing filter/sort/menu icons stay fully visible regardless of how
- *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext(Primitive.span, "headerCellLabel");
+ *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext$1(Primitive.span, "headerCellLabel");
 /**
  * A selection `<th>`/`<td>`/footer `<td>` composes ITS base slot (`headerCell`/`cell`/
  * `footerCell`) together with the `selectionCell` MODIFIER, rather than replacing it --
@@ -10096,7 +10205,7 @@ const DataTableHeaderCellInner = withContext(Primitive.div, "headerCellInner");
  * a second recipe call.
  */ function withSelectionCell(Component, baseSlot) {
     const StyledComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
-        const classNames = useClassNames();
+        const classNames = useClassNames$1();
         return /*#__PURE__*/ jsx(Component, {
             ref: ref,
             ...props,
@@ -10107,12 +10216,12 @@ const DataTableHeaderCellInner = withContext(Primitive.div, "headerCellInner");
     return StyledComponent;
 }
 const DataTableSelectionHeaderCell = withSelectionCell(DataTableHeaderCell$1, "headerCell");
-const DataTableHeaderCellIcon = withContext(Primitive.span, "headerCellIcon");
+const DataTableHeaderCellIcon = withContext$1(Primitive.span, "headerCellIcon");
 // body has no CSS slot of its own in the rootage spec -- it is a plain structural
 // `<tbody>`, so it is not wrapped in `withContext`.
 const DataTableBody = DataTableBody$1;
-const DataTableRow = withContext(DataTableRow$1, "row");
-const DataTableCell = withContext(DataTableCell$1, "cell");
+const DataTableRow = withContext$1(DataTableRow$1, "row");
+const DataTableCell = withContext$1(DataTableCell$1, "cell");
 const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // Tranche 4 -- column menu + reorder + resize + sticky columns. A scroll boundary
 // wrapping the whole `<table>`: `overflowX: auto` is what makes a wide table (more
@@ -10122,7 +10231,7 @@ const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // stays out of this slot's own base css (nothing here has a bounded height of its own
 // to clip), so it never introduces a second vertical scrollbar next to whatever
 // ambient container the whole DataTable already sits in.
-const DataTableScrollBodyBase = withContext(Primitive.div, "scrollArea");
+const DataTableScrollBodyBase = withContext$1(Primitive.div, "scrollArea");
 function DataTableScrollBody({ children, scrollProps }) {
     const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
     const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
@@ -10137,7 +10246,7 @@ function DataTableScrollBody({ children, scrollProps }) {
         children: children
     });
 }
-const DataTableFooterBase = withContext(Primitive.tfoot, "footer");
+const DataTableFooterBase = withContext$1(Primitive.tfoot, "footer");
 function DataTableFooter({ children, ...props }) {
     return /*#__PURE__*/ jsx(DataTableFooterBase, {
         ...props,
@@ -10146,7 +10255,7 @@ function DataTableFooter({ children, ...props }) {
         })
     });
 }
-const DataTableFooterCell = withContext(Primitive.td, "footerCell");
+const DataTableFooterCell = withContext$1(Primitive.td, "footerCell");
 ////////////////////////////////////////////////////////////////////////////////////
 // Fix (bug report): karrot icons default to a 24px intrinsic SVG attribute size
 // -- see column-menu.tsx's own `SORT_ICON_SIZE` comment for the full mechanism.