@crispy-seed/data-table 0.9.0 → 0.10.0

package/dist/index.js

@@ -10,7 +10,7 @@ function __insertCSS(code) {
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, useCallback, useMemo, useState, useRef, useEffect, createContext, useContext, useId } from 'react';
+import React__default, { forwardRef, useCallback, useState, useMemo, useRef, useEffect, createContext, useContext, useId } from 'react';
 import { dataAttr, elementProps, ariaAttr, mergeProps as mergeProps$1, buttonProps } from '@seed-design/dom-utils';
 import { checkbox } from '@seed-design/css/recipes/checkbox';
 import { checkmark } from '@seed-design/css/recipes/checkmark';
@@ -882,6 +882,40 @@ function useDataTableColumnCalc(props) {
     };
 }
 
+function sameCell$1(a, id, key) {
+    return a !== null && a.id === id && a.key === key;
+}
+/**
+ * Tracks which single cell (if any) is showing its "show full content" overlay
+ * (DATATABLE-ATTIO-SPEC.md's cell-expand feature, #12) for the READ-ONLY case -- a
+ * non-`editable` column with truncated content, which has nothing to commit and so
+ * no reason to go through `useDataTableEdit`'s `editingCell`. An `editable` column's
+ * own truncated-cell overlay instead reuses `useDataTableEdit`'s `startEdit`/
+ * `editingCell` directly (the styled layer's `body-cells.tsx` picks which of the two
+ * a given activation opens) -- "for editable cells it's the editor" per the spec,
+ * not a second parallel state machine duplicating what editing already tracks.
+ *
+ * Only one cell can be peeked at a time, the same single-cell shape
+ * `useDataTableEdit`'s `editingCell` already uses -- this table has no multi-cell
+ * expand any more than it has multi-cell edit.
+ */ function useDataTableCellPeek() {
+    const [peekedCell, setPeekedCell] = useState(null);
+    const isPeeking = useCallback((id, key)=>sameCell$1(peekedCell, id, key), [
+        peekedCell
+    ]);
+    const openPeek = useCallback((id, key)=>setPeekedCell({
+            id,
+            key
+        }), []);
+    const closePeek = useCallback(()=>setPeekedCell(null), []);
+    return {
+        peekedCell,
+        isPeeking,
+        openPeek,
+        closePeek
+    };
+}
+
 // Select's `dom.ts` reads state off REAL rendered elements (aria-disabled, data-value)
 // because its options register asynchronously through a floating-ui list and the DOM
 // is the one thing always in sync with `elementsRef`. DataTable's selection has no
@@ -1897,6 +1931,11 @@ function useDataTable(props) {
     const columnCalc = useDataTableColumnCalc(props);
     const scroll = useDataTableScroll();
     const edit = useDataTableEdit(props);
+    // Feature C (#12) -- which single cell (if any) is showing its read-only "show
+    // full content" overlay. Independent of `edit` above -- see
+    // `useDataTableCellPeek.ts`'s own doc comment for why an `editable` column's
+    // truncated-cell overlay reuses `edit` instead of this.
+    const peek = useDataTableCellPeek();
     // Wired to `scroll`'s own scroll-container ref (not a fresh one of its own) so a
     // BOUNDED table's auto-load triggers off its own internal scroll, not the
     // browsing viewport -- see useDataTableInfiniteScroll.ts's own doc comment.
@@ -1914,6 +1953,7 @@ function useDataTable(props) {
         ...columnCalc,
         ...scroll,
         ...edit,
+        ...peek,
         ...infiniteScroll,
         rootProps: elementProps({
             role: "table"
@@ -2554,6 +2594,41 @@ function toneFor(value) {
     }
     return BADGE_TONES[hash % BADGE_TONES.length];
 }
+// Feature A/B (#9/#8) -- Attio's own flat 12-swatch chip palette, ported from
+// crisp's `tokens/palette.ts` (`tagSwatch1..12`, measured live off Attio) rather
+// than seed's own 6-tone `Badge` (`BADGE_TONES` above): a swatch, unlike a Badge
+// tone, has no ring/border and its ink is a FLAT black on every swatch (crisp's own
+// `tagSwatchInk`, `#000000` -- every swatch background is already a pale tint, so
+// one dark foreground reads on all 12), not a per-tone contrast color. No seed token
+// lands on any of these 12 hex values, so -- same footnote as the qvism recipe's own
+// `ATTIO_BRAND_BLUE`/`RATING_FILLED` literals -- they stay literal here too.
+const CHIP_SWATCHES = [
+    "#fff3cc",
+    "#f4fbcb",
+    "#fdf7c4",
+    "#feecf3",
+    "#e0fced",
+    "#ddf7ff",
+    "#f6f7f7",
+    "#ffebeb",
+    "#feeee1",
+    "#e5eeff",
+    "#f5f0ff",
+    "#fdedff"
+];
+const CHIP_SWATCH_INK = "#000000";
+/** Same stable multiply-and-add hash `toneFor` above already uses over seed's 6
+ *  Badge tones, just over this file's own 12-swatch palette instead -- same value,
+ *  same swatch, every render (crisp's own `toneFor`, `datatable.tsx`). */ function swatchIndexFor(value) {
+    let hash = 0;
+    for(let index = 0; index < value.length; index++){
+        hash = hash * 31 + value.charCodeAt(index) >>> 0;
+    }
+    return hash % CHIP_SWATCHES.length;
+}
+function swatchColorFor(value) {
+    return CHIP_SWATCHES[swatchIndexFor(value)];
+}
 function initialsFor(name) {
     const parts = name.trim().split(/\s+/);
     return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase() || "?";
@@ -2668,11 +2743,89 @@ function StatusCell({ value }) {
         children: status
     });
 }
-function LinkCell({ column, value, className }) {
+/** One swatch chip -- `style` carries the per-value background/ink (computed by
+ *  `swatchColorFor`/`CHIP_SWATCH_INK` above) since neither is a recipe token, the
+ *  same "literal color as a computed prop" call `RatingCell`'s star fill already
+ *  makes. Shared by `ChipCell` (Feature A, single value) and `ChipListCell`/
+ *  editors.tsx's `ChipListEditor` (Feature B, multi value) so all three chip
+ *  renderings stay byte-identical. */ function SwatchChip({ value, className, children }) {
+    return /*#__PURE__*/ jsxs("span", {
+        className: className,
+        style: {
+            backgroundColor: swatchColorFor(value),
+            color: CHIP_SWATCH_INK
+        },
+        children: [
+            value,
+            children
+        ]
+    });
+}
+/** `type: "chip"` (Feature A, #9) -- a single value rendered as one colored chip,
+ *  the color derived deterministically from the value string (`swatchColorFor`):
+ *  same value, same color, every render, every column. For a column like provider/
+ *  tenant/vendor/status/select where a plain `Badge` (seed's 6-tone `status`/`tags`
+ *  types above) doesn't need to be color-STABLE per value -- this one does. */ function ChipCell({ value, className }) {
+    const text = value == null ? "" : String(value);
+    if (!text) return null;
+    return /*#__PURE__*/ jsx(SwatchChip, {
+        value: text,
+        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 }) {
+    const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
+    if (!tags.length) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: className,
+        children: tags.map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
+                value: tag,
+                className: chipClassName
+            }, tag))
+    });
+}
+/**
+ * Feature D (#13) -- generic text+affix composition: `suffix` (if given) renders as
+ * a `flex-shrink: 0` icon beside the text, and the TEXT itself (not the outer `<td>`)
+ * gets its own `flex: 1 1 0%; min-width: 0` + ellipsis, so a long value truncates
+ * while the affix stays visible instead of being squeezed out of the cell entirely
+ * (the bug: composing text+icon inside a plain truncating `<td>` lets the icon
+ * scroll/clip away with the text, since a flex child never inherits its PARENT's
+ * own `text-overflow`). `data-seed-truncate` on the text span is what `truncate.ts`'s
+ * `isCellTruncated` (Feature C's click-to-expand gate) measures instead of the
+ * `<td>` itself for exactly the same reason -- see that file's own comment.
+ * Any FUTURE cell composing a fixed leading/trailing glyph beside truncating text
+ * should render through this component rather than re-deriving the same three-slot
+ * flex shape.
+ */ function CellWithSuffix({ text, suffix, rowClassName, textClassName, suffixClassName }) {
+    if (!suffix) return /*#__PURE__*/ jsx(Fragment, {
+        children: text
+    });
+    return /*#__PURE__*/ jsxs("span", {
+        className: rowClassName,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: textClassName,
+                "data-seed-truncate": "",
+                children: text
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: suffixClassName,
+                children: suffix
+            })
+        ]
+    });
+}
+function LinkCell({ column, value, row, className, rowClassName, textClassName, suffixClassName }) {
     const text = value == null ? "" : String(value);
     if (!text) return null;
     const isUrl = column.type === "url";
     const href = isUrl ? /^https?:\/\//.test(text) ? text : `https://${text}` : `mailto:${text}`;
+    const suffix = column.suffixIcon?.(row);
     return /*#__PURE__*/ jsx("a", {
         className: className,
         href: href,
@@ -2681,7 +2834,13 @@ function LinkCell({ column, value, className }) {
         // A link cell points somewhere other than "select this row" -- its own
         // navigation must not also fire a row click handler.
         onClick: (event)=>event.stopPropagation(),
-        children: text
+        children: /*#__PURE__*/ jsx(CellWithSuffix, {
+            text: text,
+            suffix: suffix,
+            rowClassName: rowClassName,
+            textClassName: textClassName,
+            suffixClassName: suffixClassName
+        })
     });
 }
 // Attio's own measured 5-point star path (crisp's `RATING_STAR_D`, traced from the
@@ -2707,8 +2866,7 @@ function RatingCell({ value, maxRating = 5 }) {
         },
         children: Array.from({
             length: maxRating
-        }, (_, index)=>// biome-ignore lint/suspicious/noArrayIndexKey: a fixed-length star row has no other identity
-            /*#__PURE__*/ jsx("svg", {
+        }, (_, index)=>/*#__PURE__*/ jsx("svg", {
                 width: 16,
                 height: 16,
                 viewBox: "0 0 16 16",
@@ -3199,7 +3357,7 @@ const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = tr
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
-__insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-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__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-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))}");
 
 const createClassName = (className, variants, compoundVariants = [])=>{
     const variantKeys = Object.keys(variants);
@@ -3294,6 +3452,42 @@ const dataTableSlotNames = [
         "link",
         "seed-data-table__link"
     ],
+    [
+        "chip",
+        "seed-data-table__chip"
+    ],
+    [
+        "chipList",
+        "seed-data-table__chipList"
+    ],
+    [
+        "chipRemove",
+        "seed-data-table__chipRemove"
+    ],
+    [
+        "chipInput",
+        "seed-data-table__chipInput"
+    ],
+    [
+        "expandOverlay",
+        "seed-data-table__expandOverlay"
+    ],
+    [
+        "expandOverlayText",
+        "seed-data-table__expandOverlayText"
+    ],
+    [
+        "cellSuffixRow",
+        "seed-data-table__cellSuffixRow"
+    ],
+    [
+        "cellSuffixText",
+        "seed-data-table__cellSuffixText"
+    ],
+    [
+        "cellSuffixIcon",
+        "seed-data-table__cellSuffixIcon"
+    ],
     [
         "entityActions",
         "seed-data-table__entityActions"
@@ -3868,6 +4062,103 @@ 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
+//    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.
+function ChipListEditor({ column, value, pending, onCommit, classNames }) {
+    const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
+    const [draft, setDraft] = React.useState("");
+    function commitTags(next) {
+        onCommit(JSON.stringify(next));
+    }
+    function addTag() {
+        const tag = draft.trim();
+        setDraft("");
+        if (!tag || tags.includes(tag)) return;
+        commitTags([
+            ...tags,
+            tag
+        ]);
+    }
+    function removeTag(tag) {
+        commitTags(tags.filter((existing)=>existing !== tag));
+    }
+    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__*/ jsxs("span", {
+        className: classNames.chipList,
+        onClick: (event)=>event.stopPropagation(),
+        children: [
+            tags.map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
+                    value: tag,
+                    className: classNames.chip,
+                    children: /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        disabled: pending,
+                        "aria-label": `Remove ${tag}`,
+                        className: classNames.chipRemove,
+                        onClick: ()=>removeTag(tag),
+                        children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
+                            size: 10
+                        })
+                    })
+                }, tag)),
+            /*#__PURE__*/ jsx("input", {
+                className: classNames.chipInput,
+                value: draft,
+                disabled: pending,
+                placeholder: tags.length ? "" : "Add…",
+                "aria-label": `Add tag to ${column.key}`,
+                onChange: (event)=>setDraft(event.target.value),
+                onKeyDown: (event)=>{
+                    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("");
+                    }
+                }
+            }),
+            pending && /*#__PURE__*/ jsx(EditPendingIndicator, {})
+        ]
+    }));
+}
+////////////////////////////////////////////////////////////////////////////////////
+// -- 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;
+    // 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", {
+        className: className,
+        onClick: (event)=>event.stopPropagation(),
+        children: children
+    }));
+}
 
 // Row-narrowing for the toolbar's search box -- split out of DataTable.tsx the way
 // cells.tsx splits out cell-type rendering: a self-contained, independently testable
@@ -3907,49 +4198,167 @@ function RatingEditor({ column, value, pending, onCommit }) {
     return data.filter((row)=>searchableColumns.some((column)=>matchesSearch(getColumnValue(column, row), query)));
 }
 
+// Feature C (#12) -- the click-to-expand gate: measures whether a cell's rendered
+// content is ACTUALLY truncated right now, so a single click only opens the
+// anchored overlay (editors.tsx's `CellExpandOverlay`) when there's real hidden
+// content to show, never on a short value that already fits. Isolated out of
+// body-cells.tsx the same way select-search.tsx/filtering.ts already split their own
+// concerns out of the styled layer, so this one pure DOM read is unit-testable on
+// its own (a plain `<td>`'s own truncate CSS vs. a suffix-icon cell's nested flex
+// child need two different elements measured -- see below).
+//
+// This one genuinely reads a real, laid-out DOM element (`scrollWidth`/
+// `clientWidth`), unlike react-headless/data-table/src/dom.ts's own helpers (plain
+// data in, plain data out) -- it lives in the REACT (styled) package rather than
+// react-headless for that reason: measuring actual layout is a rendering concern,
+// not table state.
+function isCellTruncated(cell) {
+    // The common case: a plain cell's own `white-space: nowrap; overflow: clip` (the
+    // `cell` recipe slot) makes the `<td>` ITSELF overflow once its text is longer
+    // than the column is wide.
+    if (cell.scrollWidth > cell.clientWidth) return true;
+    // A cell composing a suffix icon beside its text (cells.tsx's `CellWithSuffix`,
+    // Feature D) wraps the text in its OWN `flex: 1 1 0%; min-width: 0` child instead
+    // -- that flex child never lets the `<td>` itself overflow (it's constrained to
+    // the remaining row width by construction), so the truncating element to measure
+    // is the flex child, marked `data-seed-truncate` by whichever cell renderer
+    // applies its own ellipsis (`CellWithSuffix`'s text span today; any future
+    // truncating inner element should carry the same marker).
+    const targets = cell.querySelectorAll("[data-seed-truncate]");
+    for (const target of targets){
+        if (target.scrollWidth > target.clientWidth) return true;
+    }
+    return false;
+}
+
 /** `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). Every other `editable` column opens on double-click. */ function isAlwaysLiveEditable(column) {
+ *  "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) {
     if (!column.editable) return false;
-    return column.editor === "switch" || column.type === "rating" || column.type === "checkbox";
+    return column.editor === "switch" || column.type === "rating" || column.type === "checkbox" || column.type === "chip-list";
 }
 function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast }) {
     const effective = useEffectiveColumns(columns, {
         selectable,
         stickyFirst
     });
-    const { startEdit } = useDataTableContext();
     return /*#__PURE__*/ jsx(Fragment, {
         children: effective.map((entry, index)=>{
             const { column } = entry;
             const isLast = index === effective.length - 1;
             const sticky = pinnedCellProps(entry, stickyLast, isLast);
-            // 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.
-            const gated = column.editable && !isAlwaysLiveEditable(column);
-            return /*#__PURE__*/ jsx(DataTableCell, {
-                "data-numeric": dataAttr(column.type === "number" || column.type === "currency"),
-                "data-editable": 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,
-                onDoubleClick: gated ? ()=>startEdit(row.id, column.key) : undefined,
-                children: /*#__PURE__*/ jsx(CellContent, {
-                    column: column,
-                    row: row,
-                    rowId: row.id,
-                    classNames: classNames,
-                    locale: locale
-                })
+            return /*#__PURE__*/ jsx(DataTableBodyCell, {
+                column: column,
+                row: row,
+                classNames: classNames,
+                locale: locale,
+                sticky: sticky
             }, column.key);
         })
     });
 }
+/**
+ * One `<td>` -- split out of `ColumnBodyCells`'s own map (which now only computes
+ * per-column LAYOUT, `pinnedCellProps`) so this component can own its own per-cell
+ * "is the Feature C overlay open" local state (`overlayOpen`) without re-deriving it
+ * on every row's render. React keeps this instance stable across re-renders because
+ * `ColumnBodyCells` keys it by `column.key` the same way it always keyed the bare
+ * `<DataTableCell>` before this split.
+ */ function DataTableBodyCell({ column, row, classNames, locale, sticky }) {
+    const { startEdit, isEditing, isPeeking, openPeek, closePeek } = useDataTableContext();
+    const cellRef = React.useRef(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
+    // from `isEditing`/`isPeeking` alone, because those two states don't carry "was
+    // the content actually truncated when this opened" on their own -- a SHORT
+    // editable cell's existing double-click-to-edit (tranche 5, unchanged) must keep
+    // rendering exactly as it always has, not suddenly gain overlay chrome.
+    const [overlayOpen, setOverlayOpen] = React.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;
+    function handleDoubleClick(event) {
+        if (!gated) return;
+        setOverlayOpen(isCellTruncated(event.currentTarget));
+        startEdit(row.id, column.key);
+    }
+    function handleClick(event) {
+        if (!isCellTruncated(event.currentTarget)) return;
+        if (gated) {
+            setOverlayOpen(true);
+            startEdit(row.id, column.key);
+        } 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.
+            setOverlayOpen(true);
+        } else {
+            setOverlayOpen(true);
+            openPeek(row.id, column.key);
+        }
+    }
+    // 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.
+    React.useEffect(()=>{
+        if (!overlayOpen) return;
+        function handlePointerDown(event) {
+            if (cellRef.current && !cellRef.current.contains(event.target)) {
+                setOverlayOpen(false);
+                closePeek();
+            }
+        }
+        function handleKeyDown(event) {
+            if (event.key !== "Escape") return;
+            setOverlayOpen(false);
+            closePeek();
+        }
+        document.addEventListener("pointerdown", handlePointerDown);
+        document.addEventListener("keydown", handleKeyDown);
+        return ()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        overlayOpen,
+        closePeek
+    ]);
+    const overlayActive = overlayOpen && (alwaysLive || isEditing(row.id, column.key) || isPeeking(row.id, column.key));
+    return /*#__PURE__*/ jsx(DataTableCell, {
+        ref: cellRef,
+        "data-numeric": dataAttr(column.type === "number" || column.type === "currency"),
+        "data-editable": 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__*/ jsx(CellContent, {
+            column: column,
+            row: row,
+            rowId: row.id,
+            classNames: classNames,
+            locale: locale,
+            overlayActive: overlayActive
+        })
+    });
+}
 /**
  * Dispatches to whichever of cells.tsx's static renderers or editors.tsx's live
  * editors applies to THIS column/row right now -- always-live first (no rest state to
@@ -3957,7 +4366,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 }) {
+ */ function CellContent({ column, row, rowId, classNames, locale, overlayActive }) {
     const { isEditing, isPending, getEditError, commitEdit, cancelEdit } = useDataTableContext();
     const rawValue = getColumnValue(column, row);
     const pending = isPending(rowId, column.key);
@@ -3986,6 +4395,14 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
             pending: pending,
             onCommit: commit
         });
+    } else if (column.editable && column.type === "chip-list") {
+        node = /*#__PURE__*/ jsx(ChipListEditor, {
+            column: column,
+            value: resolveEditValue(column, row, rawValue),
+            pending: pending,
+            onCommit: commit,
+            classNames: classNames
+        });
     } else if (column.editable && isEditing(rowId, column.key)) {
         if (column.editor === "select") {
             node = /*#__PURE__*/ jsx(SelectEditor, {
@@ -4021,6 +4438,10 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
             });
         }
     } else {
+        // Feature C (#12), read-only case: `DataTableBodyCell`'s own `isPeeking` already
+        // decided whether the overlay should be open (folded into `overlayActive`
+        // below) -- this branch always renders the SAME `DisplayCellContent` either
+        // way, just possibly relocated into the overlay box.
         node = /*#__PURE__*/ jsx(DisplayCellContent, {
             column: column,
             row: row,
@@ -4031,7 +4452,13 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            node,
+            overlayActive ? /*#__PURE__*/ jsx(CellExpandOverlay, {
+                className: classNames.expandOverlay,
+                children: column.editable ? node : /*#__PURE__*/ jsx("span", {
+                    className: classNames.expandOverlayText,
+                    children: node
+                })
+            }) : node,
             error && /*#__PURE__*/ jsx(EditError, {
                 message: error
             })
@@ -4062,7 +4489,11 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
             return /*#__PURE__*/ jsx(LinkCell, {
                 column: column,
                 value: value,
-                className: classNames.link
+                row: row,
+                className: classNames.link,
+                rowClassName: classNames.cellSuffixRow,
+                textClassName: classNames.cellSuffixText,
+                suffixClassName: classNames.cellSuffixIcon
             });
         case "tags":
             return /*#__PURE__*/ jsx(TagsCell, {
@@ -4073,6 +4504,17 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
             return /*#__PURE__*/ jsx(StatusCell, {
                 value: value
             });
+        case "chip":
+            return /*#__PURE__*/ jsx(ChipCell, {
+                value: value,
+                className: classNames.chip
+            });
+        case "chip-list":
+            return /*#__PURE__*/ jsx(ChipListCell, {
+                value: value,
+                className: classNames.chipList,
+                chipClassName: classNames.chip
+            });
         case "number":
             return /*#__PURE__*/ jsx(Fragment, {
                 children: formatNumberCell(value, locale)
@@ -4099,9 +4541,23 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
                 value: value
             });
         default:
-            return /*#__PURE__*/ jsx(Fragment, {
-                children: value == null ? null : String(value)
-            });
+            {
+                const text = value == null ? null : String(value);
+                const suffix = column.suffixIcon?.(row);
+                // Feature D (#13) -- a plain text column carrying a `suffixIcon` (e.g. a
+                // location column's pin glyph) composes through the same `CellWithSuffix`
+                // LinkCell already uses, so the icon never gets squeezed out by a long value.
+                if (!suffix || text == null) return /*#__PURE__*/ jsx(Fragment, {
+                    children: text
+                });
+                return /*#__PURE__*/ jsx(CellWithSuffix, {
+                    text: text,
+                    suffix: suffix,
+                    rowClassName: classNames.cellSuffixRow,
+                    textClassName: classNames.cellSuffixText,
+                    suffixClassName: classNames.cellSuffixIcon
+                });
+            }
     }
 }