@crispy-seed/data-table 0.10.1 → 0.10.3

package/dist/index.cjs

@@ -16,6 +16,7 @@ var checkmark = require('@seed-design/css/recipes/checkmark');
 var reactCheckbox = require('@seed-design/react-checkbox');
 var reactScaleFeedback = require('@seed-design/react-scale-feedback');
 var checkboxGroup = require('@seed-design/css/recipes/checkbox-group');
+var reactDom = require('react-dom');
 var reactImage = require('@seed-design/react-image');
 var avatar = require('@seed-design/css/recipes/avatar');
 require('@seed-design/css/recipes/avatar-stack');
@@ -2578,6 +2579,50 @@ const Badge = /*#__PURE__*/ React.forwardRef(({ className, children, ...props },
 });
 Badge.displayName = "Badge";
 
+// Feature B rework (#8, chip-list display) -- the pure "how many chips fit" decision,
+// isolated from the DOM measuring that drives it (`cells.tsx`'s `ChipListCell`) the same
+// way `truncate.ts`/`filtering.ts` already split a pure calculation out of the styled
+// layer: this file touches no DOM, so the actual fitting algorithm is unit-testable with
+// plain numbers instead of a real laid-out browser.
+//
+// Attio's own chip-list cell (e.g. Categories: "Internet", "Broadcasting", "+7") shows as
+// many WHOLE chips as fit left-to-right, then one "+N" badge for the rest -- never a
+// chip clipped mid-render, never a second wrapped line. `ChipListCell` measures every
+// chip's real rendered width (font/padding-dependent, so it can't be estimated from
+// character count) plus the container's current width, then asks this function how many
+// of those chips it can show before the running total (chips + gaps + the badge itself)
+// would exceed the container.
+/**
+ * `overflowBadgeWidth` is the WORST-CASE badge width the caller measured (e.g. the
+ * width of a badge showing every tag: `+<chipWidths.length>`) rather than the width of
+ * the badge for whatever count this call actually returns -- the real badge (fewer
+ * digits once some chips DO fit) is never wider than that, so reserving the worst case
+ * up front avoids a second measuring pass and always yields a result that fits. It may
+ * slightly under-fill the row by the odd chip in a boundary case (e.g. "+9" vs "+10" --
+ * one fewer digit than reserved), which is the deliberate trade against re-measuring per
+ * candidate count.
+ */ function computeVisibleChipCount(chipWidths, containerWidth, gap, overflowBadgeWidth) {
+    // An unmeasured/zero-width container (not yet laid out, e.g. `display: none` or a
+    // pre-hydration frame) has no meaningful "fits" answer -- show everything rather than
+    // collapsing every chip behind "+N" for a frame it'll never actually paint like that.
+    if (containerWidth <= 0) return chipWidths.length;
+    let used = 0;
+    let count = 0;
+    for(let index = 0; index < chipWidths.length; index++){
+        const withGap = count > 0 ? gap : 0;
+        const usedIfShown = used + withGap + chipWidths[index];
+        const remainingAfterThis = chipWidths.length - (index + 1);
+        // Every chip except the very last one needs room left over for the overflow badge
+        // TOO (if it's going to exist at all) -- otherwise this loop would happily show
+        // every chip except the last, then have nowhere left to put "+1".
+        const badgeReserve = remainingAfterThis > 0 ? gap + overflowBadgeWidth : 0;
+        if (usedIfShown + badgeReserve > containerWidth) break;
+        used = usedIfShown;
+        count++;
+    }
+    return count;
+}
+
 // Attio cell-type renderers, built from seed's own components -- not exported from
 // the package's public surface (kept alongside DataTable.tsx as an implementation
 // detail, the way Select keeps `InternalIcon` under `components/private`). Each
@@ -2792,19 +2837,125 @@ function StatusCell({ value }) {
         className: className
     });
 }
-/** `type: "chip-list"`, READ-ONLY (Feature B, #8) -- multiple swatch chips, no add/
- *  remove affordances. The editable case is editors.tsx's `ChipListEditor`, an
- *  always-live widget (interacting with it IS the commit, the same `switch`/
- *  `rating`/`checkbox` shape `body-cells.tsx`'s `isAlwaysLiveEditable` already
- *  covers) -- this component only ever renders the REST display. */ function ChipListCell({ value, className, chipClassName }) {
+// Feature B rework (#8) -- the chip-list DISPLAY row's own gap, mirrored from the
+// qvism recipe's `chipList` slot (`packages/qvism-preset/src/recipes/data-table.ts`'s
+// `CHIP_GAP`, measured live off Attio at 3px between chips). Kept as a literal here
+// too, same footnote as `CHIP_SWATCHES` above: this file and the recipe are two
+// independent sources for numbers that have to agree, not one importing the other
+// (react/AGENTS.md -- style stays in the recipe; this is the one JS-side computation,
+// `computeVisibleChipCount`, that needs the SAME number to size against).
+const CHIP_LIST_GAP_PX = 3;
+/** `type: "chip-list"` display -- every editable/non-editable chip-list cell renders
+ *  through this component for its REST state (editable: when its click-to-edit
+ *  popover, editors.tsx's `ChipListEditor`, isn't open; read-only: always). Attio's
+ *  own model (its Categories cell: "Internet", "Broadcasting", "+7") -- show as many
+ *  WHOLE chips as fit the cell's current width, then one "+N" badge for the rest,
+ *  never a chip clipped mid-render, never a second wrapped line, never overflowing
+ *  into a neighboring (possibly sticky) column. `body-cells.tsx`'s `isAlwaysLiveEditable`
+ *  no longer lists `chip-list` -- the always-live inline editor this replaced is what
+ *  produced exactly that overflow (crispy-seed's #1094).
+ *
+ *  The fitting decision itself (`computeVisibleChipCount`, `chip-overflow.ts`) is pure
+ *  and unit-tested on its own; this component's only job is feeding it real measured
+ *  widths. Two widths need measuring that can't be estimated from character count
+ *  (font/padding-dependent): every chip's own rendered width, and the "+N" badge's
+ *  worst-case width (reserved for the FULL tag count, so the real badge -- fewer
+ *  digits once some chips fit -- never overflows what was reserved for it; see
+ *  `computeVisibleChipCount`'s own doc comment). Both are measured off a permanently
+ *  mounted, invisible copy (`visibility: hidden`, absolutely positioned so it never
+ *  affects layout -- `position: relative` on the `chipList` slot's own recipe rule
+ *  makes THIS element, not the `<td>` two levels up, its containing block, and the
+ *  `chipList` slot's own `overflow: hidden` clips it there too) -- kept mounted at ALL
+ *  times, not just while a `ResizeObserver` fires, because widening the column back
+ *  out needs to know the width of chips currently hidden behind "+N" to decide
+ *  whether they now fit again.
+ */ function ChipListCell({ value, className, chipClassName, overflowClassName }) {
     const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
+    const containerRef = React__namespace.useRef(null);
+    const measureRef = React__namespace.useRef(null);
+    const overflowMeasureRef = React__namespace.useRef(null);
+    const [visibleCount, setVisibleCount] = React__namespace.useState(tags.length);
+    // Every tag joined into one string -- a stable primitive dependency for the effect
+    // below, so it only re-measures when the actual tag SET changes, not on every
+    // unrelated re-render of the row (a new `tags` array identity from a fresh
+    // `getColumnValue` call on every render would otherwise re-run this every time).
+    const tagsKey = tags.join("\u0000");
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `tagsKey` is a deliberate serialized proxy for `tags` (a fresh array identity every render would otherwise re-run this effect on every unrelated re-render) -- `tags` itself is intentionally excluded, and `tags.length` (referenced below, in the early-return branch) is already covered by `tagsKey` changing whenever the tag SET does, including a same-length rename/reorder that `tags.length` alone would miss.
+    React__namespace.useLayoutEffect(()=>{
+        const container = containerRef.current;
+        const measure = measureRef.current;
+        // No real layout to measure against (SSR, or a test environment with no layout
+        // engine, e.g. this package's own `bun test` -- happy-dom lays out nothing, every
+        // rect comes back zero) -- show every chip rather than a permanently-wrong "+N"
+        // for a width this environment can never actually report.
+        if (!container || !measure || typeof ResizeObserver === "undefined") {
+            setVisibleCount(tags.length);
+            return;
+        }
+        // Rebound to non-null consts (rather than a `!` assertion inside `recompute`
+        // below) -- `container`/`measure` are already narrowed non-null here, and these
+        // two bindings carry that narrowing into the closure without re-deriving it.
+        const measuredContainer = container;
+        const measuredList = measure;
+        function recompute() {
+            const chipWidths = Array.from(measuredList.children, (el)=>el.getBoundingClientRect().width);
+            const overflowWidth = overflowMeasureRef.current?.getBoundingClientRect().width ?? 0;
+            setVisibleCount(computeVisibleChipCount(chipWidths, measuredContainer.clientWidth, CHIP_LIST_GAP_PX, overflowWidth));
+        }
+        recompute();
+        const observer = new ResizeObserver(recompute);
+        observer.observe(container);
+        return ()=>observer.disconnect();
+    }, [
+        tagsKey
+    ]);
     if (!tags.length) return null;
-    return /*#__PURE__*/ jsxRuntime.jsx("span", {
+    const clampedVisible = Math.min(visibleCount, tags.length);
+    const overflowCount = tags.length - clampedVisible;
+    return /*#__PURE__*/ jsxRuntime.jsxs("span", {
         className: className,
-        children: tags.map((tag)=>/*#__PURE__*/ jsxRuntime.jsx(SwatchChip, {
-                value: tag,
-                className: chipClassName
-            }, tag))
+        ref: containerRef,
+        children: [
+            tags.slice(0, clampedVisible).map((tag)=>/*#__PURE__*/ jsxRuntime.jsx(SwatchChip, {
+                    value: tag,
+                    className: chipClassName
+                }, tag)),
+            overflowCount > 0 && /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                className: overflowClassName,
+                children: [
+                    "+",
+                    overflowCount
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                ref: measureRef,
+                "aria-hidden": "true",
+                className: className,
+                style: {
+                    position: "absolute",
+                    visibility: "hidden",
+                    pointerEvents: "none"
+                },
+                children: tags.map((tag)=>/*#__PURE__*/ jsxRuntime.jsx(SwatchChip, {
+                        value: tag,
+                        className: chipClassName
+                    }, tag))
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                ref: overflowMeasureRef,
+                "aria-hidden": "true",
+                className: overflowClassName,
+                style: {
+                    position: "absolute",
+                    visibility: "hidden",
+                    pointerEvents: "none"
+                },
+                children: [
+                    "+",
+                    tags.length
+                ]
+            })
+        ]
     });
 }
 /**
@@ -3376,7 +3527,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-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:22px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--seed-dimension-x1_5);overflow:hidden;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: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))}");
 
 const createClassName = (className, variants, compoundVariants = [])=>{
     const variantKeys = Object.keys(variants);
@@ -3479,6 +3630,14 @@ const dataTableSlotNames = [
         "chipList",
         "seed-data-table__chipList"
     ],
+    [
+        "chipOverflow",
+        "seed-data-table__chipOverflow"
+    ],
+    [
+        "chipListEditor",
+        "seed-data-table__chipListEditor"
+    ],
     [
         "chipRemove",
         "seed-data-table__chipRemove"
@@ -4082,20 +4241,31 @@ function RatingEditor({ column, value, pending, onCommit }) {
     });
 }
 ////////////////////////////////////////////////////////////////////////////////////
-// -- editable: "chip-list" (Feature B, #8) -- always-live, the same shape
-//    `SwitchEditor`/`CheckboxEditor`/`RatingEditor` above already establish
-//    (interacting with the widget IS the commit, no double-click gate, no separate
-//    rest display -- `body-cells.tsx`'s `isAlwaysLiveEditable` covers it alongside
-//    them). A gated open/close state (like `SelectEditor`'s) would fight adding
-//    MULTIPLE tags in one sitting: `useDataTableEdit`'s `commitEdit` closes editing
-//    the instant a SYNC commit resolves, so a gated chip editor would close itself
-//    after the very first tag. Always-live sidesteps that entirely -- there is no
-//    `editingCell` to close, the widget is simply always the cell's own content.
-//    Every add/remove commits the FULL next array through the same one-string
+// -- editable: "chip-list" (Feature B rework, #8) -- click-to-edit, Attio's own model
+//    rather than the always-live widget this replaced (crispy-seed#1094: every row
+//    rendering a live add-tag editor at once overflowed the cell and collided with
+//    sticky columns). `body-cells.tsx`'s `DataTableBodyCell` opens this INSIDE the
+//    same anchored `CellExpandOverlay` Feature C already built for a gated editor's
+//    expanded state, on a plain single click (no truncation gate, unlike every other
+//    read-only cell's peek) -- clicking a short 2-tag cell must open the editor just
+//    as readily as a 10-tag one. It stays open across MULTIPLE add/remove commits
+//    (closes only on blur/outside-click/Escape, `DataTableBodyCell`'s own effect) by
+//    NOT going through `useDataTableEdit`'s `isEditing` gate the way `SelectEditor`/
+//    `TextEditor` do -- `commitEdit` closes `editingCell` the instant a SYNC commit
+//    resolves (its own doc comment), which would have closed a gated chip editor
+//    after the very first tag. `DataTableBodyCell` instead tracks THIS editor's own
+//    open/closed state in its local `overlayOpen`, independent of `editingCell`.
+//    Every add/remove still commits the FULL next array through the same one-string
 //    contract every other editor already uses (`useDataTableEdit`'s own doc
-//    comment): `JSON.stringify(nextTags)`, which the consumer's `onEdit` parses
-//    back -- crisp/GRC's contract stays "one string in, no typed union", not a
-//    second commit shape invented for just this column.
+//    comment): `JSON.stringify(nextTags)`, which the consumer's `onEdit` parses back
+//    -- crisp/GRC's contract stays "one string in, no typed union", not a second
+//    commit shape invented for just this column.
+//
+//    Renders through `classNames.chipListEditor`, NOT the read-only `chipList` slot
+//    (cells.tsx's `ChipListCell`) -- the display row clips to one line with a "+N"
+//    badge; this editor instead WRAPS onto as many lines as it needs inside the
+//    overlay's own grow-in-height box, since every tag (plus the add-input) has to
+//    stay visible and editable at once.
 function ChipListEditor({ column, value, pending, onCommit, classNames }) {
     const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
     const [draft, setDraft] = React__namespace.useState("");
@@ -4116,7 +4286,7 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
     }
     return(// biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this span never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the remove buttons, the add-tag input). No role fits it because it isn't a control.
     /*#__PURE__*/ jsxRuntime.jsxs("span", {
-        className: classNames.chipList,
+        className: classNames.chipListEditor,
         onClick: (event)=>event.stopPropagation(),
         children: [
             tags.map((tag)=>/*#__PURE__*/ jsxRuntime.jsx(SwatchChip, {
@@ -4134,6 +4304,8 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
                     })
                 }, tag)),
             /*#__PURE__*/ jsxRuntime.jsx("input", {
+                // biome-ignore lint/a11y/noAutofocus: this editor only ever mounts in response to an explicit click that just opened it (never on page load), matching `SelectEditor`'s own `open` (controlled, always-open-on-mount) -- the same UX every gated editor in this file already gives via a component the linter can't see through (`TextFieldInput`/`SelectSearchField`), just on a bare `<input>` here since `chipInput` has no such wrapper.
+                autoFocus: true,
                 className: classNames.chipInput,
                 value: draft,
                 disabled: pending,
@@ -4141,14 +4313,19 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
                 "aria-label": `Add tag to ${column.key}`,
                 onChange: (event)=>setDraft(event.target.value),
                 onKeyDown: (event)=>{
+                    // Escape is the ONE key this input must NOT stop propagation for: there is
+                    // no in-progress draft state worth clearing locally (every add/remove
+                    // already commits immediately), so it needs to bubble all the way to
+                    // `document` -- `DataTableBodyCell`'s own Escape listener is what actually
+                    // closes this popover. Every other key stops here, same as before, so it
+                    // never reaches the row's own click/keyboard handling.
+                    if (event.key === "Escape") return;
                     event.stopPropagation();
                     if (event.key === "Enter") {
                         event.preventDefault();
                         addTag();
                     } else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
                         removeTag(tags[tags.length - 1]);
-                    } else if (event.key === "Escape") {
-                        setDraft("");
                     }
                 }
             }),
@@ -4253,12 +4430,41 @@ function isCellTruncated(cell) {
 /** `editable` + one of these shapes needs no double-click gate and no separate rest
  *  display -- interacting with the widget itself IS the commit gesture (crisp's own
  *  #453/#760/#761: `switch`/`rating`/`checkbox` never had a meaningfully different
- *  "rest" state to show). `chip-list` (Feature B, #8) joins them for a different
- *  reason -- see `ChipListEditor`'s own doc comment (editors.tsx): a GATED chip
- *  editor would close itself the instant the first tag committed. Every other
- *  `editable` column opens on double-click. */ function isAlwaysLiveEditable(column) {
+ *  "rest" state to show). `chip-list` used to join them here (Feature B, #8) but no
+ *  longer does -- see `isChipListEditable` below, its own separate "click opens a
+ *  popover, closed the rest of the time" category, and `ChipListEditor`'s own doc
+ *  comment (editors.tsx) for why it isn't just the ordinary GATED (double-click)
+ *  shape either. Every other `editable` column opens on double-click. */ function isAlwaysLiveEditable(column) {
     if (!column.editable) return false;
-    return column.editor === "switch" || column.type === "rating" || column.type === "checkbox" || column.type === "chip-list";
+    return column.editor === "switch" || column.type === "rating" || column.type === "checkbox";
+}
+/** Feature B rework (#8) -- an editable `chip-list` column's own third category,
+ *  alongside `isAlwaysLiveEditable` (above) and the ordinary double-click GATED
+ *  shape: a single click (no truncation gate -- even a short, unclipped 2-tag cell
+ *  must open just as readily as a long one) opens `editors.tsx`'s `ChipListEditor`,
+ *  and it closes back to the plain `ChipListCell` display on blur/outside-click/
+ *  Escape (`DataTableBodyCell`'s own `overlayOpen`) -- never always-live
+ *  (crispy-seed#1094: that overflowed the cell and collided with sticky columns),
+ *  never simply GATED either (a `useDataTableEdit`-driven `isEditing` gate would
+ *  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) {
+    return !!column.editable && column.type === "chip-list";
 }
 function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast }) {
     const effective = useEffectiveColumns(columns, {
@@ -4288,8 +4494,13 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
  * `ColumnBodyCells` keys it by `column.key` the same way it always keyed the bare
  * `<DataTableCell>` before this split.
  */ function DataTableBodyCell({ column, row, classNames, locale, sticky }) {
-    const { startEdit, isEditing, isPeeking, openPeek, closePeek } = useDataTableContext();
+    const { startEdit, cancelEdit, isEditing, isPending, commitEdit, isPeeking, openPeek, closePeek } = useDataTableContext();
     const cellRef = React__namespace.useRef(null);
+    // Feature B rework (#8) -- the chip-list popover's own live position, in VIEWPORT
+    // coordinates (`position: fixed`), since it portals to `document.body` rather than
+    // anchoring inside the `<td>` (see `isChipListEditable`'s own doc comment for why).
+    // `null` while closed -- nothing to portal yet.
+    const [popoverStyle, setPopoverStyle] = React__namespace.useState(null);
     // Feature C (#12) -- whether THIS activation (click or double-click) should
     // render as the anchored overlay rather than plain inline. Frozen at the moment
     // of activation (re-measured every time, never left stale) rather than derived
@@ -4299,20 +4510,68 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     // rendering exactly as it always has, not suddenly gain overlay chrome.
     const [overlayOpen, setOverlayOpen] = React__namespace.useState(false);
     const alwaysLive = isAlwaysLiveEditable(column);
-    // A gated `editable` column (everything except the always-live widgets) opens on
-    // double-click -- Attio's own measured gesture (crisp's #411), matched here
-    // rather than a single click, which stays "select this cell" in crisp's own
-    // spreadsheet model and would otherwise be indistinguishable from this table's
-    // plain row click. Feature C ADDS a single click as a SECOND way in, but only
-    // when the cell's content is actually truncated (see `handleClick` below) --
-    // double-click keeps working unconditionally, same as before this feature.
-    const gated = column.editable && !alwaysLive;
+    const chipListEditable = isChipListEditable(column);
+    // A gated `editable` column (everything except the always-live widgets AND the
+    // click-to-edit chip-list) opens on double-click -- Attio's own measured gesture
+    // (crisp's #411), matched here rather than a single click, which stays "select
+    // this cell" in crisp's own spreadsheet model and would otherwise be
+    // indistinguishable from this table's plain row click. Feature C ADDS a single
+    // click as a SECOND way in, but only when the cell's content is actually
+    // truncated (see `handleClick` below) -- double-click keeps working
+    // unconditionally, same as before this feature.
+    const gated = column.editable && !alwaysLive && !chipListEditable;
+    // This cell's chip-list popover is showing right now -- `overlayOpen` alone isn't
+    // enough (it's shared with the read-only peek/gated-edit cases below), so this
+    // ANDs in "is this actually a chip-list column" too. Gates the portal render
+    // below (`popoverStyle` is only ever non-null while this is true).
+    const chipListEditorOpen = chipListEditable && overlayOpen;
+    // Feature B rework (#8) -- the chip-list popover's own position, read off the
+    // `<td>`'s LIVE `getBoundingClientRect()` (viewport coordinates, matching
+    // `position: fixed`) rather than anything Feature C's `pinOffset`/sticky math
+    // already tracks -- those describe offsets WITHIN the scrolling table, not where
+    // the cell actually sits in the viewport right now, which is what a portaled,
+    // `position: fixed` box anchored below the cell needs.
+    const measurePopoverPosition = React__namespace.useCallback(()=>{
+        const cell = cellRef.current;
+        if (!cell) return;
+        const rect = cell.getBoundingClientRect();
+        setPopoverStyle({
+            position: "fixed",
+            top: rect.bottom,
+            insetInlineStart: rect.left,
+            insetInlineEnd: "auto",
+            minWidth: rect.width,
+            // Both override the SAME `expandOverlay` class properties this box also
+            // carries (`className={classNames.expandOverlay}`, below) -- that class's
+            // `minHeight: calc(100% + 2px)` resolves against an ANCHORED box's own
+            // containing block (the `<td>`, ~36px), which is meaningless (and would
+            // resolve against the VIEWPORT instead, ~100% of the page's height) for a
+            // portaled `position: fixed` box; `auto` lets the content size it instead.
+            // `zIndex: 10` is Feature C's own value for an in-place overlay competing
+            // only with OTHER table content -- a portal to `document.body` can land
+            // beside arbitrary page chrome (this Storybook's own toolbar, a consuming
+            // app's header), so it gets a value comfortably above typical page chrome.
+            minHeight: "auto",
+            zIndex: 1000
+        });
+    }, []);
     function handleDoubleClick(event) {
         if (!gated) return;
         setOverlayOpen(isCellTruncated(event.currentTarget));
         startEdit(row.id, column.key);
     }
     function handleClick(event) {
+        if (chipListEditable) {
+            // Attio's own chip-list gesture: click opens the editor regardless of
+            // truncation -- a short, fully-visible 2-tag cell opens just as readily as
+            // one already showing "+N". Must not also reach the row's own `onRowClick`,
+            // same reasoning as the read-only peek/preview-button cases below.
+            event.stopPropagation();
+            measurePopoverPosition();
+            setOverlayOpen(true);
+            startEdit(row.id, column.key);
+            return;
+        }
         if (!isCellTruncated(event.currentTarget)) return;
         if (gated) {
             setOverlayOpen(true);
@@ -4320,7 +4579,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         } else if (alwaysLive) {
             // No separate open/edit state to start -- the always-live widget already
             // renders unconditionally; this only switches ITS OWN box to the anchored
-            // overlay so a long chip list (etc.) gets room to show every chip.
+            // overlay so a long value (etc.) gets room to show in full.
             setOverlayOpen(true);
         } else {
             // Read-only truncated cell: this click's only job is opening the peek
@@ -4333,25 +4592,39 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
             openPeek(row.id, column.key);
         }
     }
+    // Feature B rework (#8) -- the portaled popover's own DOM node. Read by the
+    // outside-click detector below (it lives outside `cellRef`'s subtree once
+    // mounted, in `document.body` -- see `isChipListEditable`'s doc comment) and by
+    // the reposition effect further down.
+    const popoverRef = React__namespace.useRef(null);
     // Closes the overlay on Escape or an outside click/pointerdown -- a gated
     // editor's OWN Escape/blur handling already ends `isEditing` on its own (see
     // `TextEditor`/`SelectEditor`'s existing onCancel/onOpenChange wiring), which
     // alone is enough to hide a GATED cell's overlay (its render below is gated on
-    // `isEditing` too); this listener is what the PEEK and ALWAYS-LIVE cases need,
-    // since neither has any other mechanism that ever calls `closePeek`/resets
-    // `overlayOpen` on its own.
+    // `isEditing` too); this listener is what the PEEK, ALWAYS-LIVE and chip-list-edit
+    // cases need, since none of them has any other mechanism that ever calls
+    // `closePeek`/`cancelEdit`/resets `overlayOpen` on its own. `cancelEdit()` is a
+    // no-op for the peek/always-live cases (there is no `editingCell` to clear) and is
+    // what actually ends the chip-list editor's own `startEdit` call above.
     React__namespace.useEffect(()=>{
         if (!overlayOpen) return;
+        function isInside(target) {
+            return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false);
+        }
         function handlePointerDown(event) {
-            if (cellRef.current && !cellRef.current.contains(event.target)) {
+            if (!isInside(event.target)) {
                 setOverlayOpen(false);
+                setPopoverStyle(null);
                 closePeek();
+                cancelEdit();
             }
         }
         function handleKeyDown(event) {
             if (event.key !== "Escape") return;
             setOverlayOpen(false);
+            setPopoverStyle(null);
             closePeek();
+            cancelEdit();
         }
         document.addEventListener("pointerdown", handlePointerDown);
         document.addEventListener("keydown", handleKeyDown);
@@ -4361,27 +4634,70 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         };
     }, [
         overlayOpen,
-        closePeek
+        closePeek,
+        cancelEdit
+    ]);
+    // Feature B rework (#8) -- keeps the portaled popover glued to its cell while
+    // open: any scroll on ANY ancestor (the table's own horizontal/vertical
+    // `scrollArea`, or the page itself) or a viewport resize re-measures. `scroll`
+    // doesn't bubble, so this listens in the CAPTURE phase on `window` -- the
+    // standard way to observe a scroll on an arbitrary descendant scroll container
+    // without knowing which element it is ahead of time.
+    React__namespace.useEffect(()=>{
+        if (!chipListEditorOpen) return;
+        function reposition() {
+            measurePopoverPosition();
+        }
+        window.addEventListener("scroll", reposition, true);
+        window.addEventListener("resize", reposition);
+        return ()=>{
+            window.removeEventListener("scroll", reposition, true);
+            window.removeEventListener("resize", reposition);
+        };
+    }, [
+        chipListEditorOpen,
+        measurePopoverPosition
     ]);
     const overlayActive = overlayOpen && (alwaysLive || isEditing(row.id, column.key) || isPeeking(row.id, column.key));
-    return /*#__PURE__*/ jsxRuntime.jsx(DataTableCell, {
-        ref: cellRef,
-        "data-numeric": domUtils.dataAttr(column.type === "number" || column.type === "currency"),
-        "data-editable": domUtils.dataAttr(!!column.editable),
-        "data-sticky": sticky["data-sticky"],
-        "data-sticky-edge": sticky["data-sticky-edge"],
-        "data-sticky-edge-end": sticky["data-sticky-edge-end"],
-        style: sticky.style,
-        onClick: handleClick,
-        onDoubleClick: handleDoubleClick,
-        children: /*#__PURE__*/ jsxRuntime.jsx(CellContent, {
-            column: column,
-            row: row,
-            rowId: row.id,
-            classNames: classNames,
-            locale: locale,
-            overlayActive: overlayActive
-        })
+    const rawValue = getColumnValue(column, row);
+    const pending = isPending(row.id, column.key);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(DataTableCell, {
+                ref: cellRef,
+                "data-numeric": domUtils.dataAttr(column.type === "number" || column.type === "currency"),
+                "data-editable": domUtils.dataAttr(!!column.editable),
+                "data-sticky": sticky["data-sticky"],
+                "data-sticky-edge": sticky["data-sticky-edge"],
+                "data-sticky-edge-end": sticky["data-sticky-edge-end"],
+                "data-overlay-open": domUtils.dataAttr(overlayActive),
+                style: sticky.style,
+                onClick: handleClick,
+                onDoubleClick: handleDoubleClick,
+                children: /*#__PURE__*/ jsxRuntime.jsx(CellContent, {
+                    column: column,
+                    row: row,
+                    rowId: row.id,
+                    classNames: classNames,
+                    locale: locale,
+                    overlayActive: overlayActive
+                })
+            }),
+            chipListEditorOpen && popoverStyle && /*#__PURE__*/ reactDom.createPortal(// biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- same shape as `CellExpandOverlay` (editors.tsx), which this box is a portaled variant of: it never responds to interaction on ITSELF, only stops propagation of clicks that already occurred on a real interactive descendant (the editor's input/remove buttons). No role fits it because it isn't a control.
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                ref: popoverRef,
+                className: classNames.expandOverlay,
+                style: popoverStyle,
+                onClick: (event)=>event.stopPropagation(),
+                children: /*#__PURE__*/ jsxRuntime.jsx(ChipListEditor, {
+                    column: column,
+                    value: resolveEditValue(column, row, rawValue),
+                    pending: pending,
+                    onCommit: (value)=>commitEdit(row.id, column.key, value),
+                    classNames: classNames
+                })
+            }), document.body)
+        ]
     });
 }
 /**
@@ -4421,12 +4737,18 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
             onCommit: commit
         });
     } else if (column.editable && column.type === "chip-list") {
-        node = /*#__PURE__*/ jsxRuntime.jsx(ChipListEditor, {
-            column: column,
-            value: resolveEditValue(column, row, rawValue),
-            pending: pending,
-            onCommit: commit,
-            classNames: classNames
+        // Feature B rework (#8) -- this column ALWAYS dispatches here to the plain
+        // display (never to `DisplayCellContent`'s own read-only `chip-list` case,
+        // never through the generic `isEditing` branch below): the click-to-edit
+        // popover is a separate portal `DataTableBodyCell` renders alongside this
+        // whole `<td>`, not a `node` this function returns -- see `isChipListEditable`'s
+        // own doc comment (body-cells.tsx) for why it isn't anchored in place like
+        // every other editor here.
+        node = /*#__PURE__*/ jsxRuntime.jsx(ChipListCell, {
+            value: rawValue,
+            className: classNames.chipList,
+            chipClassName: classNames.chip,
+            overflowClassName: classNames.chipOverflow
         });
     } else if (column.editable && isEditing(rowId, column.key)) {
         if (column.editor === "select") {
@@ -4535,10 +4857,13 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
                 className: classNames.chip
             });
         case "chip-list":
+            // Non-editable chip-list only -- an editable one is fully handled by
+            // `CellContent`'s own dedicated branch above and never reaches here.
             return /*#__PURE__*/ jsxRuntime.jsx(ChipListCell, {
                 value: value,
                 className: classNames.chipList,
-                chipClassName: classNames.chip
+                chipClassName: classNames.chip,
+                overflowClassName: classNames.chipOverflow
             });
         case "number":
             return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -4925,6 +5250,7 @@ const DEFAULT_SORT_ICON = {
                                 }),
                                 columnMenu && /*#__PURE__*/ jsxRuntime.jsx(ColumnMenu, {
                                     column: column,
+                                    label: label,
                                     onRename: ()=>setRenamingKey(column.key)
                                 })
                             ]
@@ -5016,9 +5342,9 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
  *  `data-table.ts`) -- crisp's own header shows the trigger only on hover, not
  *  permanently, so this one carries its own marker attribute distinct from that
  *  slot's OTHER occupants (the sort chevron, the filter trigger), which stay visible
- *  under their own separate rules regardless of hover. */ function ColumnMenu({ column, onRename }) {
+ *  under their own separate rules regardless of hover. */ function ColumnMenu({ column, label, onRename }) {
     const { moveColumn, hideColumn, isColumnPinned, togglePinColumn, sort, clearSort } = useDataTableContext();
-    const columnLabel = typeof column.header === "string" ? column.header : column.key;
+    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