@crispy-seed/data-table 0.10.3 → 0.10.5

package/dist/data-table-recipe.css

@@ -174,6 +174,9 @@
     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;
 }
@@ -388,8 +391,9 @@ tr:hover .seed-data-table__entityActions {
     padding-inline: var(--seed-dimension-x3);
     padding-block: var(--seed-dimension-x3);
     background-color: var(--seed-color-bg-layer-floating);
-    border-radius: var(--seed-radius-r5);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak), var(--seed-shadow-s3);
+    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);

package/dist/data-table-recipe.layered.css

@@ -198,6 +198,11 @@
     overflow: clip;
   }
 
+  .seed-data-table__cell:not([data-editable]) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
   .seed-data-table__cell:last-child {
     border-inline-end: none;
   }
@@ -429,13 +434,14 @@
     padding-inline: var(--seed-dimension-x3);
     padding-block: var(--seed-dimension-x3);
     background-color: var(--seed-color-bg-layer-floating);
-    border-radius: var(--seed-radius-r5);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak), var(--seed-shadow-s3);
+    box-shadow: none;
     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;
+    border: 1px solid #266df0;
+    border-radius: 4px;
     align-items: flex-start;
     display: flex;
     position: absolute;

package/dist/index.cjs

@@ -1696,24 +1696,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 +1755,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 +1864,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 +1956,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 +1985,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,
@@ -2658,29 +2779,56 @@ function toneFor(value) {
     }
     return BADGE_TONES[hash % BADGE_TONES.length];
 }
-// Feature A/B (#9/#8) -- Attio's own flat 12-swatch chip palette, ported from
-// crisp's `tokens/palette.ts` (`tagSwatch1..12`, measured live off Attio) rather
-// than seed's own 6-tone `Badge` (`BADGE_TONES` above): a swatch, unlike a Badge
-// tone, has no ring/border and its ink is a FLAT black on every swatch (crisp's own
-// `tagSwatchInk`, `#000000` -- every swatch background is already a pale tint, so
-// one dark foreground reads on all 12), not a per-tone contrast color. No seed token
-// lands on any of these 12 hex values, so -- same footnote as the qvism recipe's own
-// `ATTIO_BRAND_BLUE`/`RATING_FILLED` literals -- they stay literal here too.
 const CHIP_SWATCHES = [
-    "#fff3cc",
-    "#f4fbcb",
-    "#fdf7c4",
-    "#feecf3",
-    "#e0fced",
-    "#ddf7ff",
-    "#f6f7f7",
-    "#ffebeb",
-    "#feeee1",
-    "#e5eeff",
-    "#f5f0ff",
-    "#fdedff"
+    {
+        background: "#dbeafe",
+        color: "#1e40af"
+    },
+    {
+        background: "#dcfce7",
+        color: "#166534"
+    },
+    {
+        background: "#ede9fe",
+        color: "#5b21b6"
+    },
+    {
+        background: "#fef3c7",
+        color: "#92400e"
+    },
+    {
+        background: "#fee2e2",
+        color: "#991b1b"
+    },
+    {
+        background: "#ccfbf1",
+        color: "#115e59"
+    },
+    {
+        background: "#fce7f3",
+        color: "#9d174d"
+    },
+    {
+        background: "#e0e7ff",
+        color: "#3730a3"
+    },
+    {
+        background: "#cffafe",
+        color: "#155e75"
+    },
+    {
+        background: "#ecfccb",
+        color: "#3f6212"
+    },
+    {
+        background: "#ffe4e6",
+        color: "#9f1239"
+    },
+    {
+        background: "#e2e8f0",
+        color: "#334155"
+    }
 ];
-const CHIP_SWATCH_INK = "#000000";
 /** Same stable multiply-and-add hash `toneFor` above already uses over seed's 6
  *  Badge tones, just over this file's own 12-swatch palette instead -- same value,
  *  same swatch, every render (crisp's own `toneFor`, `datatable.tsx`). */ function swatchIndexFor(value) {
@@ -2691,7 +2839,13 @@ const CHIP_SWATCH_INK = "#000000";
     return hash % CHIP_SWATCHES.length;
 }
 function swatchColorFor(value) {
-    return CHIP_SWATCHES[swatchIndexFor(value)];
+    return CHIP_SWATCHES[swatchIndexFor(value)].background;
+}
+/** The per-hue dark text paired with `swatchColorFor`'s background, at the SAME
+ *  index (`swatchIndexFor`) -- replaces the old single flat `CHIP_SWATCH_INK`
+ *  (`#000000`) now that each background is saturated enough that one foreground no
+ *  longer reads well on all 12. */ function swatchInkFor(value) {
+    return CHIP_SWATCHES[swatchIndexFor(value)].color;
 }
 function initialsFor(name) {
     const parts = name.trim().split(/\s+/);
@@ -2808,7 +2962,7 @@ function StatusCell({ value }) {
     });
 }
 /** One swatch chip -- `style` carries the per-value background/ink (computed by
- *  `swatchColorFor`/`CHIP_SWATCH_INK` above) since neither is a recipe token, the
+ *  `swatchColorFor`/`swatchInkFor` above) since neither is a recipe token, the
  *  same "literal color as a computed prop" call `RatingCell`'s star fill already
  *  makes. Shared by `ChipCell` (Feature A, single value) and `ChipListCell`/
  *  editors.tsx's `ChipListEditor` (Feature B, multi value) so all three chip
@@ -2817,7 +2971,7 @@ function StatusCell({ value }) {
         className: className,
         style: {
             backgroundColor: swatchColorFor(value),
-            color: CHIP_SWATCH_INK
+            color: swatchInkFor(value)
         },
         children: [
             value,
@@ -3121,8 +3275,28 @@ function RatingCell({ value, maxRating = 5 }) {
         let cursor = selectable ? 40 : 0;
         let pinnedCount = 0;
         const entries = ordered.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>{
-            const width = getColumnWidth(column.key) ?? column.width;
+            const rawWidth = getColumnWidth(column.key) ?? column.width;
             const pinned = pinnedSet.has(column.key);
+            // Fix (0.10.4, screenshot-confirmed pinned-column overlay): a pinned column
+            // with no explicit/resized width used to keep `width` as `undefined` here,
+            // which `DataTableColGroup` (DataTable.tsx) renders as an AUTO `<col>` --
+            // under `table-layout: fixed`, the browser then sizes it from whatever
+            // remaining space is left (anywhere from its full share down to 0, e.g. once
+            // the OTHER explicit-width columns already exceed the container). Meanwhile
+            // `cursor` below used `DEFAULT_PINNED_COLUMN_WIDTH` (180) as its OWN guess for
+            // that same column's width, to compute every LATER pinned column's
+            // `insetInlineStart`. Those two numbers -- the browser's real rendered width
+            // and this file's 180px guess -- had no reason to agree, and whenever they
+            // didn't, every pinned/unpinned column after the mismatched one landed at the
+            // wrong screen position: the next pinned column's sticky box (positioned at
+            // the WRONG, JS-assumed offset) then visually overlapped whatever unpinned
+            // content actually continues from the browser's REAL (different) offset.
+            // Forcing the SAME fallback into the `<col>` itself (not just the cursor
+            // math) is what makes the two agree by construction -- a pinned column
+            // without its own width now always renders at exactly
+            // `DEFAULT_PINNED_COLUMN_WIDTH`, matching what every other pinned column's
+            // offset already assumed it would be.
+            const width = pinned && rawWidth === undefined ? DEFAULT_PINNED_COLUMN_WIDTH : rawWidth;
             const pinOffset = pinned ? cursor : 0;
             if (pinned) {
                 cursor += width ?? DEFAULT_PINNED_COLUMN_WIDTH;
@@ -3527,7 +3701,7 @@ const TextFieldTextarea = /*#__PURE__*/ React.forwardRef(({ className, autoresiz
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
-__insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-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:var(--seed-radius-r5);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak),var(--seed-shadow-s3);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;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))}");
 
 const createClassName = (className, variants, compoundVariants = [])=>{
     const variantKeys = Object.keys(variants);
@@ -5347,9 +5521,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

package/dist/index.js

@@ -1677,24 +1677,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 = 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 = 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 = useCallback(()=>setSort(undefined), [
         setSort
     ]);
     const getHeaderCellProps = useCallback((columnKey, sortable)=>{
@@ -1727,7 +1736,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
     };
 }
 
@@ -1831,11 +1845,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({
@@ -1920,8 +1937,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);
@@ -1944,6 +1966,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 = useRef({
+        key: undefined,
+        dir: undefined
+    });
+    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,
@@ -2639,29 +2760,56 @@ function toneFor(value) {
     }
     return BADGE_TONES[hash % BADGE_TONES.length];
 }
-// Feature A/B (#9/#8) -- Attio's own flat 12-swatch chip palette, ported from
-// crisp's `tokens/palette.ts` (`tagSwatch1..12`, measured live off Attio) rather
-// than seed's own 6-tone `Badge` (`BADGE_TONES` above): a swatch, unlike a Badge
-// tone, has no ring/border and its ink is a FLAT black on every swatch (crisp's own
-// `tagSwatchInk`, `#000000` -- every swatch background is already a pale tint, so
-// one dark foreground reads on all 12), not a per-tone contrast color. No seed token
-// lands on any of these 12 hex values, so -- same footnote as the qvism recipe's own
-// `ATTIO_BRAND_BLUE`/`RATING_FILLED` literals -- they stay literal here too.
 const CHIP_SWATCHES = [
-    "#fff3cc",
-    "#f4fbcb",
-    "#fdf7c4",
-    "#feecf3",
-    "#e0fced",
-    "#ddf7ff",
-    "#f6f7f7",
-    "#ffebeb",
-    "#feeee1",
-    "#e5eeff",
-    "#f5f0ff",
-    "#fdedff"
+    {
+        background: "#dbeafe",
+        color: "#1e40af"
+    },
+    {
+        background: "#dcfce7",
+        color: "#166534"
+    },
+    {
+        background: "#ede9fe",
+        color: "#5b21b6"
+    },
+    {
+        background: "#fef3c7",
+        color: "#92400e"
+    },
+    {
+        background: "#fee2e2",
+        color: "#991b1b"
+    },
+    {
+        background: "#ccfbf1",
+        color: "#115e59"
+    },
+    {
+        background: "#fce7f3",
+        color: "#9d174d"
+    },
+    {
+        background: "#e0e7ff",
+        color: "#3730a3"
+    },
+    {
+        background: "#cffafe",
+        color: "#155e75"
+    },
+    {
+        background: "#ecfccb",
+        color: "#3f6212"
+    },
+    {
+        background: "#ffe4e6",
+        color: "#9f1239"
+    },
+    {
+        background: "#e2e8f0",
+        color: "#334155"
+    }
 ];
-const CHIP_SWATCH_INK = "#000000";
 /** Same stable multiply-and-add hash `toneFor` above already uses over seed's 6
  *  Badge tones, just over this file's own 12-swatch palette instead -- same value,
  *  same swatch, every render (crisp's own `toneFor`, `datatable.tsx`). */ function swatchIndexFor(value) {
@@ -2672,7 +2820,13 @@ const CHIP_SWATCH_INK = "#000000";
     return hash % CHIP_SWATCHES.length;
 }
 function swatchColorFor(value) {
-    return CHIP_SWATCHES[swatchIndexFor(value)];
+    return CHIP_SWATCHES[swatchIndexFor(value)].background;
+}
+/** The per-hue dark text paired with `swatchColorFor`'s background, at the SAME
+ *  index (`swatchIndexFor`) -- replaces the old single flat `CHIP_SWATCH_INK`
+ *  (`#000000`) now that each background is saturated enough that one foreground no
+ *  longer reads well on all 12. */ function swatchInkFor(value) {
+    return CHIP_SWATCHES[swatchIndexFor(value)].color;
 }
 function initialsFor(name) {
     const parts = name.trim().split(/\s+/);
@@ -2789,7 +2943,7 @@ function StatusCell({ value }) {
     });
 }
 /** One swatch chip -- `style` carries the per-value background/ink (computed by
- *  `swatchColorFor`/`CHIP_SWATCH_INK` above) since neither is a recipe token, the
+ *  `swatchColorFor`/`swatchInkFor` above) since neither is a recipe token, the
  *  same "literal color as a computed prop" call `RatingCell`'s star fill already
  *  makes. Shared by `ChipCell` (Feature A, single value) and `ChipListCell`/
  *  editors.tsx's `ChipListEditor` (Feature B, multi value) so all three chip
@@ -2798,7 +2952,7 @@ function StatusCell({ value }) {
         className: className,
         style: {
             backgroundColor: swatchColorFor(value),
-            color: CHIP_SWATCH_INK
+            color: swatchInkFor(value)
         },
         children: [
             value,
@@ -3102,8 +3256,28 @@ function RatingCell({ value, maxRating = 5 }) {
         let cursor = selectable ? 40 : 0;
         let pinnedCount = 0;
         const entries = ordered.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>{
-            const width = getColumnWidth(column.key) ?? column.width;
+            const rawWidth = getColumnWidth(column.key) ?? column.width;
             const pinned = pinnedSet.has(column.key);
+            // Fix (0.10.4, screenshot-confirmed pinned-column overlay): a pinned column
+            // with no explicit/resized width used to keep `width` as `undefined` here,
+            // which `DataTableColGroup` (DataTable.tsx) renders as an AUTO `<col>` --
+            // under `table-layout: fixed`, the browser then sizes it from whatever
+            // remaining space is left (anywhere from its full share down to 0, e.g. once
+            // the OTHER explicit-width columns already exceed the container). Meanwhile
+            // `cursor` below used `DEFAULT_PINNED_COLUMN_WIDTH` (180) as its OWN guess for
+            // that same column's width, to compute every LATER pinned column's
+            // `insetInlineStart`. Those two numbers -- the browser's real rendered width
+            // and this file's 180px guess -- had no reason to agree, and whenever they
+            // didn't, every pinned/unpinned column after the mismatched one landed at the
+            // wrong screen position: the next pinned column's sticky box (positioned at
+            // the WRONG, JS-assumed offset) then visually overlapped whatever unpinned
+            // content actually continues from the browser's REAL (different) offset.
+            // Forcing the SAME fallback into the `<col>` itself (not just the cursor
+            // math) is what makes the two agree by construction -- a pinned column
+            // without its own width now always renders at exactly
+            // `DEFAULT_PINNED_COLUMN_WIDTH`, matching what every other pinned column's
+            // offset already assumed it would be.
+            const width = pinned && rawWidth === undefined ? DEFAULT_PINNED_COLUMN_WIDTH : rawWidth;
             const pinOffset = pinned ? cursor : 0;
             if (pinned) {
                 cursor += width ?? DEFAULT_PINNED_COLUMN_WIDTH;
@@ -3508,7 +3682,7 @@ 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-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:var(--seed-radius-r5);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak),var(--seed-shadow-s3);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;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))}");
 
 const createClassName = (className, variants, compoundVariants = [])=>{
     const variantKeys = Object.keys(variants);
@@ -5328,9 +5502,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

package/dist/styles.css

@@ -4857,6 +4857,11 @@
   overflow: clip;
 }
 
+.seed-data-table__cell:not([data-editable]) {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 .seed-data-table__cell:last-child {
   border-inline-end: none;
 }
@@ -5088,13 +5093,14 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   padding-inline: var(--seed-dimension-x3);
   padding-block: var(--seed-dimension-x3);
   background-color: var(--seed-color-bg-layer-floating);
-  border-radius: var(--seed-radius-r5);
-  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak), var(--seed-shadow-s3);
+  box-shadow: none;
   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;
+  border: 1px solid #266df0;
+  border-radius: 4px;
   align-items: flex-start;
   display: flex;
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
   "repository": {
     "type": "git",