@crispy-seed/data-table 0.11.0 → 0.11.2

package/dist/index.js

@@ -968,15 +968,33 @@ function sameCell$1(a, id, key) {
  * first captured) nor keeps a ghost entry for one that was removed. Known keys keep
  * their position from `order`; any key in `keys` missing from `order` is appended, in
  * `keys`' own order; any entry in `order` no longer in `keys` is dropped.
- */ function reconcileColumnOrder(order, keys) {
+ *
+ * `actionsKey` (the styled layer's `actions`-flagged column, e.g. the row-menu `⋯`
+ * column) is kept LAST no matter what -- without this, a brand-new column added to
+ * `columns` after the table first mounted got appended past it (the "any key in `keys`
+ * missing from `order` is appended" rule above has no notion of "past the end" vs. "at
+ * the very end"), stranding it in the middle of the table since `stickyLast`/`actions`
+ * only sticks the actual trailing column. A real consumer hit this: their newly-added
+ * column landed to the right of the already-pinned-sticky `actions` column, covered by
+ * it under horizontal scroll. Column-layout's own `pinnedCellProps` independently
+ * targets the `actions` column by FLAG rather than by position (belt and suspenders --
+ * see that file's own doc comment), but this still keeps the VISUAL order sane so nothing
+ * renders hidden behind the sticky cell in the first place.
+ */ function reconcileColumnOrder(order, keys, actionsKey) {
     const keySet = new Set(keys);
     const known = order.filter((key)=>keySet.has(key));
     const knownSet = new Set(known);
     const added = keys.filter((key)=>!knownSet.has(key));
-    return [
+    const merged = [
         ...known,
         ...added
     ];
+    if (actionsKey === undefined || !keySet.has(actionsKey)) return merged;
+    const withoutActions = merged.filter((key)=>key !== actionsKey);
+    return [
+        ...withoutActions,
+        actionsKey
+    ];
 }
 /**
  * Moves `key` one step toward `direction` in `order` -- a no-op (same array, well,
@@ -1155,7 +1173,7 @@ const EMPTY_RECORD = {};
  * state this hook already owns, not independent state
  * of their own.
  */ function useDataTableColumns(props) {
-    const { columnKeys = EMPTY_STRINGS, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys: hiddenProp, defaultHiddenColumnKeys = EMPTY_STRINGS, onHiddenColumnKeysChange, columnWidths: widthsProp, defaultColumnWidths = EMPTY_RECORD, onColumnWidthsChange, columnLabels: labelsProp, defaultColumnLabels = EMPTY_RECORD, onColumnLabelsChange, pinnedColumnKeys: pinnedProp, defaultPinnedColumnKeys = EMPTY_STRINGS, onPinnedColumnKeysChange } = props;
+    const { columnKeys = EMPTY_STRINGS, actionsColumnKey, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys: hiddenProp, defaultHiddenColumnKeys = EMPTY_STRINGS, onHiddenColumnKeysChange, columnWidths: widthsProp, defaultColumnWidths = EMPTY_RECORD, onColumnWidthsChange, columnLabels: labelsProp, defaultColumnLabels = EMPTY_RECORD, onColumnLabelsChange, pinnedColumnKeys: pinnedProp, defaultPinnedColumnKeys = EMPTY_STRINGS, onPinnedColumnKeysChange } = props;
     const [rawOrder, setRawOrder] = useControllableState$1({
         prop: columnOrderProp,
         defaultProp: defaultColumnOrder ?? columnKeys,
@@ -1166,9 +1184,10 @@ const EMPTY_RECORD = {};
     // consumer persisted before a new column existed must still show that new column
     // (appended), and one holding a column that got removed from `columns` must not
     // render a ghost header for it.
-    const columnOrder = useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys), [
+    const columnOrder = useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys, actionsColumnKey), [
         rawOrder,
-        columnKeys
+        columnKeys,
+        actionsColumnKey
     ]);
     const [hiddenColumnKeys = EMPTY_STRINGS, setHiddenColumnKeys] = useControllableState$1({
         prop: hiddenProp,
@@ -2150,7 +2169,7 @@ function useDataTableRowContext({ strict = true } = {}) {
     return context;
 }
 const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, ...otherProps } = props;
+    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, actionsColumnKey, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, ...otherProps } = props;
     const api = useDataTable({
         sort,
         defaultSort,
@@ -2170,6 +2189,7 @@ const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
         defaultToolbarFilters,
         onToolbarFiltersChange,
         columnKeys,
+        actionsColumnKey,
         columnOrder,
         defaultColumnOrder,
         onColumnOrderChange,
@@ -2972,6 +2992,40 @@ function EntityCell({ value, className, nameClassName, actionsClassName, actionC
         name: String(value ?? "")
     };
     if (!entity.name) return null;
+    // Click-to-navigate (your-moon/crisp, Attio parity) -- `onOpenRecord` wins over a
+    // plain `href` when both are set (see `onOpenRecord`'s own doc comment,
+    // `DataTable.tsx`); neither -> the original plain, non-clickable `<span>`. Both
+    // clickable variants carry `data-clickable` -- the ONLY thing the recipe's
+    // `entityName` hover-underline rule keys off (`data-table.ts`), so a plain name
+    // never underlines and a clickable one always does, regardless of which variant
+    // rendered it.
+    const nameNode = column?.onOpenRecord && row !== undefined ? // A real `<button>`, not a `<span role="link">` -- `onOpenRecord` is an
+    // arbitrary consumer callback (like `onOpenPreview`'s own button below), never
+    // a genuine URL, so `<button>` is the correct semantic element (native
+    // keyboard activation/focusability for free, no `role`/`tabIndex`/`onKeyDown`
+    // needed) -- unlike the `href` branch just below, which IS a real URL and
+    // gets a real `<a>`. The recipe's `entityName` slot resets this button's own
+    // chrome (border/background/padding/font/color/text-align) back to plain
+    // inline text (`data-table.ts`).
+    /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: nameClassName,
+        "data-clickable": "",
+        onClick: (event)=>{
+            event.stopPropagation();
+            column.onOpenRecord?.(row);
+        },
+        children: entity.name
+    }) : entity.href ? /*#__PURE__*/ jsx("a", {
+        className: nameClassName,
+        "data-clickable": "",
+        href: entity.href,
+        onClick: (event)=>event.stopPropagation(),
+        children: entity.name
+    }) : /*#__PURE__*/ jsx("span", {
+        className: nameClassName,
+        children: entity.name
+    });
     return /*#__PURE__*/ jsxs("span", {
         className: className,
         children: [
@@ -2987,10 +3041,7 @@ function EntityCell({ value, className, nameClassName, actionsClassName, actionC
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx("span", {
-                className: nameClassName,
-                children: entity.name
-            }),
+            nameNode,
             column?.onOpenPreview && row !== undefined && /*#__PURE__*/ jsx("span", {
                 className: actionsClassName,
                 children: /*#__PURE__*/ jsx("button", {
@@ -3514,10 +3565,25 @@ function RatingCell({ value, maxRating = 5 }) {
                 width,
                 pinned,
                 pinOffset,
-                pinnedEdge: false
+                pinnedEdge: false,
+                stickyLastTarget: false
             };
         });
         if (pinnedCount > 0) entries[pinnedCount - 1].pinnedEdge = true;
+        // `stickyLast` sticks the `actions`-flagged column specifically -- not whichever
+        // column merely landed last in render order. Without this, `reconcileColumnOrder`
+        // appending a brand-new column past `actions` (this file's own `<colgroup>` doc
+        // comment on why order must stay in lockstep) silently moved the sticky-right
+        // treatment onto that new column instead, stranding `actions` in the middle of the
+        // table -- a real consumer hit this. Falls back to the genuine last entry when no
+        // column is flagged `actions` at all, matching `stickyLast`'s original single-
+        // column behavior.
+        if (entries.length > 0) {
+            const actionsColumn = columns.find((column)=>column.actions);
+            const actionsIndex = actionsColumn ? entries.findIndex((entry)=>entry.column.key === actionsColumn.key) : -1;
+            const stickyLastIndex = actionsIndex !== -1 ? actionsIndex : entries.length - 1;
+            entries[stickyLastIndex].stickyLastTarget = true;
+        }
         return entries;
     }, [
         columns,
@@ -3557,9 +3623,12 @@ function RatingCell({ value, maxRating = 5 }) {
 }
 /** Sticky positioning for one DATA cell (header, body, or ColumnCalc footer) -- pinned-
  *  left (this column's own `pinOffset`, `data-sticky-edge` only on the group's
- *  trailing-most member) takes priority over sticky-right (`stickyLast`, always just
- *  the last VISIBLE column, e.g. an `actions` column) since a column can only stick to
- *  one edge. */ function pinnedCellProps(entry, stickyLast, isLast) {
+ *  trailing-most member) takes priority over sticky-right (`stickyLast`, the
+ *  `actions`-flagged column when one exists, else the genuine last VISIBLE column)
+ *  since a column can only stick to one edge. Reads `entry.stickyLastTarget`
+ *  (`useEffectiveColumns`) rather than an `isLast` index the caller computes itself --
+ *  that index is just "last in render order", which is exactly what stranded a
+ *  reordered-past `actions` column in the first place. */ function pinnedCellProps(entry, stickyLast) {
     if (entry.pinned) {
         return {
             "data-sticky": "",
@@ -3571,7 +3640,7 @@ function RatingCell({ value, maxRating = 5 }) {
             }
         };
     }
-    if (stickyLast && isLast) {
+    if (stickyLast && entry.stickyLastTarget) {
         return {
             "data-sticky": "",
             "data-sticky-edge-end": "",
@@ -3907,7 +3976,7 @@ const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = tr
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
-__insertCSS(".seed-data-table__root{box-sizing:border-box;position:relative;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:not([data-editable]){user-select:none}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-overlay-open]{overflow:visible;z-index:20}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0;transition:opacity .15s}tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityActions:focus-within{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0;transition:background-color .2s,color .2s,box-shadow .2s}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__chip{box-sizing:border-box;display:inline-flex;align-items:center;flex-shrink:0;max-width:100%;height:22px;padding:0 4px;border-radius:7px;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:3px;overflow:hidden;min-width:0;width:100%}.seed-data-table__chipOverflow{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 4px;border-radius:6px;background-color:#f6f7f7;color:#000;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;white-space:nowrap}.seed-data-table__chipListEditor{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-width:0;width:100%}.seed-data-table__chipRemove{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;margin:0;margin-inline-start:2px;padding:0;border:none;border-radius:999px;background:0 0;color:inherit;opacity:.6;cursor:pointer;transition:opacity .12s,background-color .12s}.seed-data-table__chipRemove:hover{opacity:1;background-color:rgba(0,0,0,.08)}.seed-data-table__chipInput{flex:1 1 auto;min-width:40px;height:22px;margin:0;padding:0;border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);letter-spacing:-.14px}.seed-data-table__expandOverlay{box-sizing:border-box;position:absolute;top:-1px;inset-inline-start:-1px;inset-inline-end:-1px;z-index:10;min-height:calc(100% + 2px);display:flex;align-items:flex-start;padding-inline:var(--seed-dimension-x3);padding-block:var(--seed-dimension-x3);background-color:var(--seed-color-bg-layer-floating);border-radius:4px;box-shadow:none;border:1px solid #266df0;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);letter-spacing:-.14px;cursor:default}.seed-data-table__expandOverlayText{width:100%;min-width:0;white-space:normal;word-break:break-word}.seed-data-table__cellSuffixRow{display:flex;align-items:center;gap:4px;min-width:0;width:100%}.seed-data-table__cellSuffixText{flex:1 1 0%;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cellSuffixIcon{flex-shrink:0;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent)}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__bulkBar{box-sizing:border-box;position:absolute;inset-inline-start:50%;transform:translateX(-50%);bottom:var(--seed-dimension-x4);z-index:30;display:flex;align-items:center;gap:var(--seed-dimension-x3);min-height:36px;padding-inline:var(--seed-dimension-x3_5);padding-block:var(--seed-dimension-x2);border-radius:var(--seed-radius-full);box-shadow:var(--seed-shadow-s3);background-color:var(--seed-color-bg-layer-floating);color:var(--seed-color-fg-neutral);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap}.seed-data-table__bulkBarCount{flex-shrink:0;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums}.seed-data-table__bulkBarClear{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;transition:background-color .2s,color .2s}.seed-data-table__bulkBarClear:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 8%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__bulkBarActions{display:flex;align-items:center;flex-shrink:0;gap:var(--seed-dimension-x3);padding-inline-start:var(--seed-dimension-x3);border-inline-start:1px solid color-mix(in srgb,var(--seed-color-fg-neutral) 16%,transparent)}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
+__insertCSS(".seed-data-table__root{box-sizing:border-box;position:relative;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:not([data-editable]){user-select:none}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-overlay-open]{overflow:visible;z-index:20}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entityName[data-clickable]{cursor:pointer;border:none;background:0 0;padding:0;margin:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;text-align:start}.seed-data-table__entityName[data-clickable]:is(:hover,[data-hover]){text-decoration:underline}.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:13px;font-weight:var(--seed-font-weight-medium);line-height:15px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:3px;overflow:hidden;min-width:0;width:100%}.seed-data-table__chipOverflow{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 4px;border-radius:6px;background-color:#f6f7f7;color:#000;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;white-space:nowrap}.seed-data-table__chipListEditor{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-width:0;width:100%}.seed-data-table__chipRemove{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;margin:0;margin-inline-start:2px;padding:0;border:none;border-radius:999px;background:0 0;color:inherit;opacity:.6;cursor:pointer;transition:opacity .12s,background-color .12s}.seed-data-table__chipRemove:hover{opacity:1;background-color:rgba(0,0,0,.08)}.seed-data-table__chipInput{flex:1 1 auto;min-width:40px;height:22px;margin:0;padding:0;border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);letter-spacing:-.14px}.seed-data-table__expandOverlay{box-sizing:border-box;position:absolute;top:-1px;inset-inline-start:-1px;inset-inline-end:-1px;z-index:10;min-height:calc(100% + 2px);display:flex;align-items:flex-start;padding-inline:var(--seed-dimension-x3);padding-block:var(--seed-dimension-x3);background-color:var(--seed-color-bg-layer-floating);border-radius:4px;box-shadow:none;border:1px solid #266df0;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);letter-spacing:-.14px;cursor:default}.seed-data-table__expandOverlayText{width:100%;min-width:0;white-space:normal;word-break:break-word}.seed-data-table__cellSuffixRow{display:flex;align-items:center;gap:4px;min-width:0;width:100%}.seed-data-table__cellSuffixText{flex:1 1 0%;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cellSuffixIcon{flex-shrink:0;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent)}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__bulkBar{box-sizing:border-box;position:absolute;inset-inline-start:50%;transform:translateX(-50%);bottom:var(--seed-dimension-x4);z-index:30;display:flex;align-items:center;gap:var(--seed-dimension-x3);min-height:36px;padding-inline:var(--seed-dimension-x3_5);padding-block:var(--seed-dimension-x2);border-radius:var(--seed-radius-full);box-shadow:var(--seed-shadow-s3);background-color:var(--seed-color-bg-layer-floating);color:var(--seed-color-fg-neutral);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap}.seed-data-table__bulkBarCount{flex-shrink:0;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums}.seed-data-table__bulkBarClear{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;transition:background-color .2s,color .2s}.seed-data-table__bulkBarClear:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 8%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__bulkBarActions{display:flex;align-items:center;flex-shrink:0;gap:var(--seed-dimension-x3);padding-inline-start:var(--seed-dimension-x3);border-inline-start:1px solid color-mix(in srgb,var(--seed-color-fg-neutral) 16%,transparent)}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
 
 const createClassName = (className, variants, compoundVariants = [])=>{
     const variantKeys = Object.keys(variants);
@@ -4730,26 +4799,87 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
     }));
 }
 ////////////////////////////////////////////////////////////////////////////////////
-// -- Feature C (#12): cell-expand "show full content" overlay -- an anchored box
-//    (position:absolute over the cell it belongs to, grows in HEIGHT, elevated)
-//    that wraps whatever a truncated cell would otherwise show inline: an editable
-//    column's OWN editor node (unchanged, just relocated into this box instead of
-//    rendered flush in the 36px row) for the editable case, or the plain full value
-//    for a read-only one. `body-cells.tsx` decides WHEN to render this (a click on a
-//    cell whose content is actually truncated, `truncate.ts`'s `isCellTruncated`);
-//    this component only supplies the box.
-function CellExpandOverlay({ className, children }) {
-    return(// `stopPropagation` -- an overlay sits on top of (and past) its own cell/row;
+// -- Feature C (#12): cell-expand "show full content" overlay -- a box that wraps
+//    whatever a truncated cell would otherwise show inline: an editable column's OWN
+//    editor node (unchanged, just relocated into this box instead of rendered flush in
+//    the 36px row) for the editable case, or the plain full value for a read-only one.
+//    `body-cells.tsx` decides WHEN to render this (a click on a cell whose content is
+//    actually truncated, `truncate.ts`'s `isCellTruncated`); this component only
+//    supplies the box.
+//
+//    Portals to `document.body` (crispy-seed#1094's own pinned-column follow-up,
+//    ported from the chip-list editor's popover, `body-cells.tsx`'s
+//    `isChipListEditable` -- that one shipped this exact fix in 0.10.3) rather than
+//    positioning `absolute` against its own cell: a `position: sticky` `<td>` clips ANY
+//    descendant that grows past its own box, in every browser tested, regardless of
+//    `overflow`/`z-index` on anything in between, so a pinned column's own truncated
+//    cell used to clip this overlay's grown content instead of showing it in full. A
+//    portal sidesteps that by not being a descendant of the sticky `<td>` at all once
+//    mounted -- position is instead measured live off `anchorRef`'s own
+//    `getBoundingClientRect()`, the same technique the chip-list popover already uses.
+function CellExpandOverlay({ className, anchorRef, contentRef, children }) {
+    const [style, setStyle] = React.useState(null);
+    // Grows 1px past the cell's own edges in every direction, matching this box's
+    // pre-portal `top: -1px; insetInlineStart: -1px; insetInlineEnd: -1px` (the recipe's
+    // `expandOverlay` class, `data-table.ts`) -- hides the 1px border seam against the
+    // cell it's expanding out of. `minHeight`/`insetInlineEnd` from that same class no
+    // longer apply once portaled (they resolved against the `<td>` as this box's own
+    // containing block, meaningless once it's a `position: fixed` child of `<body>`
+    // instead -- the same override the chip-list popover's own `measurePopoverPosition`,
+    // `body-cells.tsx`, already makes), so this overrides both explicitly.
+    const measure = React.useCallback(()=>{
+        const cell = anchorRef.current;
+        if (!cell) return;
+        const rect = cell.getBoundingClientRect();
+        setStyle({
+            position: "fixed",
+            top: rect.top - 1,
+            insetInlineStart: rect.left - 1,
+            insetInlineEnd: "auto",
+            width: rect.width + 2,
+            minHeight: "auto",
+            zIndex: 1000
+        });
+    }, [
+        anchorRef
+    ]);
+    // Measured before paint, on mount -- see this component's own prop doc comment for
+    // why it can't just trust a caller to have measured first.
+    React.useLayoutEffect(()=>{
+        measure();
+    }, [
+        measure
+    ]);
+    // Same capture-phase listeners as the chip-list popover's own reposition effect
+    // (`body-cells.tsx`) -- `scroll` doesn't bubble, so the table's own horizontal/
+    // vertical scroll container (an arbitrary ancestor, not necessarily `window` itself)
+    // is only observable this way.
+    React.useEffect(()=>{
+        window.addEventListener("scroll", measure, true);
+        window.addEventListener("resize", measure);
+        return ()=>{
+            window.removeEventListener("scroll", measure, true);
+            window.removeEventListener("resize", measure);
+        };
+    }, [
+        measure
+    ]);
+    // Nothing to portal until the first measurement lands (avoids a one-frame flash at
+    // the origin corner before `useLayoutEffect` runs).
+    if (!style) return null;
+    return /*#__PURE__*/ createPortal(// `stopPropagation` -- an overlay sits on top of (and past) its own cell/row;
     // a click anywhere inside it must never ALSO fire the row's own `onRowClick`,
     // the same guard every other interactive cell affordance in this directory
     // already applies (`LinkCell`, `EntityCell`'s preview button, editors.tsx's
     // `TextEditor` root).
     // biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this div never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the editor/text it wraps). No role fits it because it isn't a control.
     /*#__PURE__*/ jsx("div", {
+        ref: contentRef,
         className: className,
+        style: style,
         onClick: (event)=>event.stopPropagation(),
         children: children
-    }));
+    }), document.body);
 }
 
 // Row-narrowing for the toolbar's search box -- split out of DataTable.tsx the way
@@ -4845,21 +4975,17 @@ function isCellTruncated(cell) {
  *  close itself after the first tag commits, see `ChipListEditor`'s own doc
  *  comment).
  *
- *  Unlike every OTHER open editor in this file, this one does NOT render inside
- *  Feature C's `CellExpandOverlay` (an anchored box positioned relative to the
- *  `<td>`, `position: absolute` against it) -- it renders through a REAL React
- *  portal to `document.body` instead (`DataTableBodyCell`'s own `popoverStyle`).
- *  Confirmed live, crispy-seed#1094's pinned-column follow-up: a `position: sticky`
- *  `<td>` clips ANY descendant content that grows past its own box to the table's
- *  scrollport, in EVERY browser tested, regardless of `overflow: visible` on every
- *  element in between and regardless of how high its `z-index` is raised -- neither
- *  of which is a stacking-context or overflow bug this file can fix from the
- *  INSIDE. A portal sidesteps it entirely by not being a descendant of the sticky
- *  `<td>` at all once mounted. The same sticky-clip almost certainly affects the
- *  OTHER gated editors' `CellExpandOverlay` too when their own column is pinned,
- *  but porting all of Feature C to this same portal model is its own change,
- *  out of scope here -- this fix is scoped to the one editor crispy-seed#1094
- *  actually reported against a pinned column. */ function isChipListEditable(column) {
+ *  This one renders through its OWN REAL React portal to `document.body`
+ *  (`DataTableBodyCell`'s own `popoverStyle`) rather than `editors.tsx`'s shared
+ *  `CellExpandOverlay`, since its shape is different (Attio's own click-anywhere-
+ *  opens gesture, no truncation gate). `CellExpandOverlay` itself ALSO portals to
+ *  `document.body` now (ported from this exact fix) -- both exist because a
+ *  `position: sticky` `<td>` clips ANY descendant content that grows past its own
+ *  box to the table's scrollport, in EVERY browser tested, regardless of
+ *  `overflow: visible` on every element in between and regardless of how high its
+ *  `z-index` is raised -- neither of which is a stacking-context or overflow bug
+ *  fixable from the INSIDE. A portal sidesteps it entirely by not being a
+ *  descendant of the sticky `<td>` at all once mounted. */ function isChipListEditable(column) {
     return !!column.editable && column.type === "chip-list";
 }
 function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast, cellContextMenu, onViewEditHistory, cellContextMenuItems }) {
@@ -4868,10 +4994,9 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         stickyFirst
     });
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsx(DataTableBodyCell, {
                 column: column,
                 row: row,
@@ -5019,6 +5144,16 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     // mounted, in `document.body` -- see `isChipListEditable`'s doc comment) and by
     // the reposition effect further down.
     const popoverRef = React.useRef(null);
+    // Feature C's own portaled overlay (`CellExpandOverlay`, editors.tsx) -- its own DOM
+    // node, once mounted, same reasoning as `popoverRef` above: it lives outside
+    // `cellRef`'s subtree (a sibling of the table in `document.body`, not a descendant of
+    // the `<td>`), so the outside-click detector below needs a ref to it too. Without
+    // this, `isInside` saw every click/keystroke INSIDE the portaled editor as "outside"
+    // once the overlay actually escaped the `<td>` (this fix's whole point) -- e.g.
+    // typing into the overlay's own `TextEditor` fires a pointerdown on an input that is
+    // no longer `cellRef.current`'s descendant, so every keystroke closed the overlay and
+    // cancelled the edit before the user finished typing.
+    const expandOverlayRef = React.useRef(null);
     // Closes the overlay on Escape or an outside click/pointerdown -- a gated
     // editor's OWN Escape/blur handling already ends `isEditing` on its own (see
     // `TextEditor`/`SelectEditor`'s existing onCancel/onOpenChange wiring), which
@@ -5031,7 +5166,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     React.useEffect(()=>{
         if (!overlayOpen) return;
         function isInside(target) {
-            return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false);
+            return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false) || (expandOverlayRef.current?.contains(target) ?? false);
         }
         function handlePointerDown(event) {
             if (!isInside(event.target)) {
@@ -5104,7 +5239,9 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
                         rowId: row.id,
                         classNames: classNames,
                         locale: locale,
-                        overlayActive: overlayActive
+                        overlayActive: overlayActive,
+                        cellRef: cellRef,
+                        expandOverlayRef: expandOverlayRef
                     }),
                     cellContextMenu && contextMenuOpen && contextMenuPoint && // A `<td>` (unlike its own parent `<tr>`) can validly hold any flow
                     // content, so `CellContextMenu`'s own 0x0 `MenuAnchor` -- itself never
@@ -5149,7 +5286,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
  * display (a custom `render` wins there, same as before `editable` existed; it never
  * overrides an actual editing/always-live state, matching crisp's own split between
  * `renderTyped`'s rest-state branch and the editing branches above it).
- */ function CellContent({ column, row, rowId, classNames, locale, overlayActive }) {
+ */ function CellContent({ column, row, rowId, classNames, locale, overlayActive, cellRef, expandOverlayRef }) {
     const { isEditing, isPending, getEditError, commitEdit, cancelEdit } = useDataTableContext();
     const rawValue = getColumnValue(column, row);
     const pending = isPending(rowId, column.key);
@@ -5243,6 +5380,8 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         children: [
             overlayActive ? /*#__PURE__*/ jsx(CellExpandOverlay, {
                 className: classNames.expandOverlay,
+                anchorRef: cellRef,
+                contentRef: expandOverlayRef,
                 children: column.editable ? node : /*#__PURE__*/ jsx("span", {
                     className: classNames.expandOverlayText,
                     children: node
@@ -5406,10 +5545,9 @@ function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast })
         stickyFirst
     });
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsx(DataTableFooterCell, {
                 "data-sticky": sticky["data-sticky"],
                 "data-sticky-edge": sticky["data-sticky-edge"],
@@ -5474,9 +5612,20 @@ function formatCalcValue(value, op) {
                                 size: 14
                             })
                         ]
-                    }) : /*#__PURE__*/ jsx("span", {
+                    }) : /*#__PURE__*/ jsxs("span", {
                         className: "seed-data-table-column-calc-placeholder",
-                        children: "Add calculation"
+                        style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 4
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(IconPlusLine_default, {
+                                size: 13,
+                                strokeWidth: 1.75
+                            }),
+                            "Add calculation"
+                        ]
                     })
                 })
             }),
@@ -5632,10 +5781,9 @@ const DEFAULT_SORT_ICON = {
     });
     const [renamingKey, setRenamingKey] = React.useState(null);
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column, label, width } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsxs(DataTableHeaderCell, {
                 columnKey: column.key,
                 sortable: column.sortable,
@@ -11645,6 +11793,12 @@ function DataTableInner(props, ref) {
     const columnKeys = React.useMemo(()=>columns.map((column)=>column.key), [
         columns
     ]);
+    // Threaded down to `reconcileColumnOrder` (react-headless's `dom.ts`) so a brand-new
+    // column added to `columns` after mount gets appended BEFORE this one, not past it --
+    // see that function's own doc comment for the bug this prevents.
+    const actionsColumnKey = React.useMemo(()=>columns.find((column)=>column.actions)?.key, [
+        columns
+    ]);
     const searchable = React.useMemo(()=>columns.some((column)=>column.searchable), [
         columns
     ]);
@@ -11687,6 +11841,7 @@ function DataTableInner(props, ref) {
             toolbarFilters: resolvedToolbarFilters,
             onToolbarFiltersChange: handleToolbarFiltersChange,
             columnKeys: columnKeys,
+            actionsColumnKey: actionsColumnKey,
             columnOrder: columnOrder,
             defaultColumnOrder: defaultColumnOrder,
             onColumnOrderChange: onColumnOrderChange,

package/dist/styles.css

@@ -4934,6 +4934,23 @@ tbody tr:last-child .seed-data-table__cell {
   overflow: clip;
 }
 
+.seed-data-table__entityName[data-clickable] {
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-align: start;
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.seed-data-table__entityName[data-clickable]:is(:hover, [data-hover]) {
+  text-decoration: underline;
+}
+
 .seed-data-table__tagList {
   align-items: center;
   gap: var(--seed-dimension-x1_5);
@@ -4996,8 +5013,8 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   box-sizing: border-box;
   max-width: 100%;
   height: 22px;
-  font-size: 10px;
-  font-weight: var(--seed-font-weight-regular);
+  font-size: 13px;
+  font-weight: var(--seed-font-weight-medium);
   text-overflow: ellipsis;
   white-space: nowrap;
   border-radius: 7px;

package/package.json

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