@crisp-ui-kit/crisp 0.54.9 → 0.54.10

package/dist/cjs/components/datatable/datatable.js

@@ -611,6 +611,19 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     // arrow-key nav, Enter) is unaffected -- a plain click resets `selAnchor`
     // to null, collapsing back to single-cell mode.
     const [selAnchor, setSelAnchor] = React.useState(null);
+    // crisp/#749: Shift+ArrowUp/Down extends the ROW (checkbox) selection --
+    // confirmed live on Attio's own Companies grid, a DIFFERENT gesture from
+    // `selAnchor` above (that's Shift+CLICK extending a cell-value range;
+    // this issue's own text is explicit the two are independent, and arrow
+    // keys were never measured as a cell-range trigger, G-101). Same
+    // fixed-anchor/moving-cell shape as `selAnchor` -- a spreadsheet's own
+    // Shift+Arrow both moves the active cell AND grows/shrinks the selection
+    // relative to wherever the drag started, which recomputing the anchor→
+    // new-row span from scratch on every press gives for free (arrowing back
+    // toward the anchor shrinks the same way arrowing away grows it). Reset
+    // to null on any plain (non-shift) navigation or click, same as
+    // `selAnchor`'s own reset points.
+    const [rowSelectAnchor, setRowSelectAnchor] = React.useState(null);
     const gridRef = React.useRef(null);
     // The native-copy-event proxy (crisp/#645): Attio "has no Mousetrap/
     // JS-keydown binding for c/mod+c ... it copies purely via the native
@@ -1198,6 +1211,36 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             setSelected(new Set(rows.map((rw) => rw.id)));
             return;
         }
+        // crisp/#749: Shift+ArrowUp/Down extends the row-checkbox selection --
+        // confirmed live, distinct from Shift+Click's cell-range gesture above
+        // (that one is `selAnchor`; this is `rowSelectAnchor`, and the two
+        // don't interact). Recomputes the whole anchor→destination span on
+        // every press rather than accumulating, so arrowing back toward the
+        // anchor shrinks the selection the same way arrowing away grows it --
+        // the "shrink-from-the-anchor" behavior a spreadsheet's own Shift+Arrow
+        // gives, which a plain add-on-each-press approach can't express.
+        if (selectable &&
+            e.shiftKey &&
+            (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            const r0 = rows.findIndex((row) => row.id === selCell.id);
+            if (r0 < 0)
+                return;
+            const nr0 = e.key === "ArrowDown"
+                ? Math.min(rows.length - 1, r0 + 1)
+                : Math.max(0, r0 - 1);
+            e.preventDefault();
+            const anchorId = rowSelectAnchor ?? selCell.id;
+            const anchorIdx = rows.findIndex((row) => row.id === anchorId);
+            if (anchorIdx < 0)
+                return;
+            setRowSelectAnchor(anchorId);
+            const lo = Math.min(anchorIdx, nr0);
+            const hi = Math.max(anchorIdx, nr0);
+            setSelected(new Set(rows.slice(lo, hi + 1).map((row) => row.id)));
+            setSelCell({ id: rows[nr0].id, key: selCell.key });
+            clipboardProxyRef.current?.select();
+            return;
+        }
         const r = rows.findIndex((row) => row.id === selCell.id);
         const c = columns.findIndex((col) => col.key === selCell.key);
         if (r < 0 || c < 0)
@@ -1236,6 +1279,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         else if (e.key === "Escape") {
             setSelCell(null);
             setSelAnchor(null);
+            setRowSelectAnchor(null);
             return;
         }
         else if (e.key === "Enter") {
@@ -1260,8 +1304,10 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         // A plain arrow key moves the single-cell selection and drops any active
         // range -- Attio's own range trigger is Shift+Click only (G-101), arrow
         // keys were never measured as a range-extend gesture, so this doesn't
-        // invent one.
+        // invent one. Also drops an in-progress Shift+Arrow row-selection drag
+        // (crisp/#749) for the same reason -- a plain arrow ends that gesture.
         setSelAnchor(null);
+        setRowSelectAnchor(null);
         setSelCell({ id: rows[nr].id, key: columns[nc].key });
         // keeps the clipboard proxy's selection non-collapsed after a move, so
         // a Cmd+C right after an arrow key still has something native `copy`
@@ -1844,7 +1890,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                             ? "crisp-datatable-editable"
                                                             : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                             ? ""
-                                                            : undefined, "data-in-range": inRange ? "" : undefined, "data-cell-expanded": isExpanded ? "" : undefined, onClick: (e) => {
+                                                            : undefined, "data-in-range": inRange ? "" : undefined, "data-cell-expanded": isExpanded ? "" : undefined, "data-enriched": col.enriched ? "" : undefined, onClick: (e) => {
                                                             // the keyboard model's anchor -- a single click
                                                             // only selects. A genuine double-click (or Enter
                                                             // on the selected cell) opens the editor (#411),
@@ -1859,6 +1905,11 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                             }
                                                             else {
                                                                 setSelAnchor(null);
+                                                                // crisp/#749: a plain click also ends an
+                                                                // in-progress Shift+Arrow row-selection drag
+                                                                // -- Shift+Click itself doesn't touch it,
+                                                                // the two gestures are independent.
+                                                                setRowSelectAnchor(null);
                                                             }
                                                             setSelCell({ id: row.id, key: col.key });
                                                             // Focuses the clipboard proxy, not `gridRef`
@@ -1899,6 +1950,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                             // selected (crisp/#598) -- collapses any
                                                             // active range, same as a plain left-click.
                                                             setSelAnchor(null);
+                                                            setRowSelectAnchor(null);
                                                             setSelCell({ id: row.id, key: col.key });
                                                             clipboardProxyRef.current?.focus();
                                                             clipboardProxyRef.current?.select();

package/dist/cjs/components/datatable/datatable.recipe.js

@@ -138,6 +138,12 @@ const config = (0, core_1.defineRecipe)({
     & tbody tr[data-selected] td { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface})); }
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); cursor: text; }
+    /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own
+       already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%,
+       composited OVER whatever row-state background the cell already has
+       (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
+    & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["1.5"]}; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
     /* An async onEdit's in-flight state (#385) -- the field/picker dims and

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -416,6 +416,12 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     // [team, company] is Team -> Company, etc. Reset to [] wherever
     // `filterQuery` already resets (opening the picker fresh), same lifetime.
     const [fieldPickerPath, setFieldPickerPath] = React.useState([]);
+    // #754: which sort row's own field picker is open (its index into
+    // `sorts`), or `null` for the normal sort-row list — the same
+    // "one sub-screen behind a flag" split View settings' own
+    // `addingAttribute` already uses, parameterized by index since more than
+    // one sort row exists.
+    const [sortFieldPickerIndex, setSortFieldPickerIndex] = React.useState(null);
     // filters the "isanyof" checkbox list, same lifetime as filterQuery above
     const [anyOfQuery, setAnyOfQuery] = React.useState("");
     const [dragAttr, setDragAttr] = React.useState(null);
@@ -429,7 +435,6 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     // built here -- hiding an attribute is a trailing control instead, see
     // the hide button below).
     const [addingAttribute, setAddingAttribute] = React.useState(false);
-    const [addAttrQuery, setAddAttrQuery] = React.useState("");
     // close any open menu on outside click (anything not inside a menu or its
     // trigger) or Escape
     React.useEffect(() => {
@@ -512,10 +517,27 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     };
     // #590: shown attributes, in `shownKeys`' order -- a key with no matching
     // `viewColumns` entry (stale state after a column is removed upstream)
-    // drops out rather than rendering a blank row.
-    const shownAttrs = shownKeys
-        .map((k) => viewColumns.find((c) => c.key === k))
-        .filter((c) => c != null);
+    // drops out rather than rendering a blank row. #754: `shownKeys` can now
+    // carry a dot-joined nested path ("team.jobTitle") from the add-attribute
+    // screen's own nested picker, so each key resolves via the same
+    // `resolveColumnPath` the filter chip uses -- the LEAF column's icon
+    // drives the row's own icon, and the label is the full breadcrumb
+    // ("Team › Job title"), joined as plain text rather than the chip's own
+    // muted/chevron treatment, which was measured specifically for the
+    // filter chip and wasn't re-verified for this row shape.
+    const shownAttrs = shownKeys.flatMap((k) => {
+        const path = resolveColumnPath(viewColumns, k);
+        const leaf = path.at(-1);
+        if (!leaf)
+            return [];
+        return [
+            {
+                key: k,
+                icon: leaf.icon,
+                label: path.length > 1 ? path.map((c) => c.label).join(" › ") : leaf.label,
+            },
+        ];
+    });
     const hiddenAttrs = viewColumns.filter((c) => !shownKeys.includes(c.key));
     const moveAttr = (from, to) => {
         if (from === to)
@@ -529,7 +551,8 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     const showAttr = (key) => {
         putShownKeys([...shownKeys, key]);
         setAddingAttribute(false);
-        setAddAttrQuery("");
+        setFieldPickerPath([]);
+        setFilterQuery("");
     };
     // #594: the filter chip's kebab is a real role="menu" (crisp/#188's shared
     // model — arrows, Home/End, typeahead, Escape), not a hand-rolled div like
@@ -562,15 +585,20 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
         close: () => setOpenMenu(null),
         contentRef: importExportMenuRef,
     });
-    // Shared between the "Filter" trigger's own add-condition picker and each
-    // chip's field segment (#462 follow-up) — both search the same
-    // `filterColumns` list and differ only in what a pick does. #592: also
-    // handles drilling into a `nestedColumns` column — `fieldPickerPath`
-    // tracks the current scope ([] is the top level), reset to [] wherever
-    // the picker opens fresh (both trigger onClicks, above).
-    const filterFieldPicker = (onSelect) => {
+    // #754: generalized from the Filter-only `filterFieldPicker` (#592) to
+    // also drive Sort's own field picker and View settings' add-attribute
+    // screen — all three offer the identical nested-drill-down construct on
+    // live Attio (confirmed: "Team" with a count badge appears, and drills
+    // into the same People-attribute screen, in all three pickers). Shared
+    // `fieldPickerPath`/`filterQuery` state across all three call sites is
+    // safe: `openMenu` already only ever names ONE open popover at a time,
+    // so only one of Filter/Sort/View-settings' own picker can be showing.
+    // `fieldPickerPath` tracks the current scope ([] is the top level),
+    // reset to [] wherever a picker opens fresh (every trigger's own
+    // onClick).
+    const nestedFieldPicker = (columns, onSelect, topLevelPlaceholder, topLevelLabel) => {
         const scope = fieldPickerPath.at(-1);
-        const scopeColumns = scope ? (scope.nestedColumns ?? []) : filterColumns;
+        const scopeColumns = scope ? (scope.nestedColumns ?? []) : columns;
         const query = filterQuery.trim().toLowerCase();
         const direct = scopeColumns.filter((c) => c.label.toLowerCase().includes(query));
         // #592: one level of flattening from wherever the picker is currently
@@ -598,9 +626,9 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                 setFilterQuery("");
                             }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: nestedFieldPlaceholder
                                 ? nestedFieldPlaceholder(scope.nestedObjectLabel ?? scope.label.toLowerCase())
-                                : `Search ${scope.nestedObjectLabel ?? scope.label.toLowerCase()} attributes…`, "aria-label": filterFieldLabel, 
+                                : `Search ${scope.nestedObjectLabel ?? scope.label.toLowerCase()} attributes…`, "aria-label": topLevelLabel, 
                             // biome-ignore lint/a11y/noAutofocus: focus the picker on open
-                            autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })] })) : ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
+                            autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })] })) : ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: topLevelPlaceholder, "aria-label": topLevelLabel, 
                     // biome-ignore lint/a11y/noAutofocus: focus the picker on open
                     autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })), scope && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath(fieldPickerPath), children: [scope.icon ? ((0, jsx_runtime_1.jsx)(scope.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), scope.label] })), direct.map((col) => col.nestedColumns?.length ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--expand", onClick: () => drillIn(col), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), col.label, (0, jsx_runtime_1.jsx)(RtlChevronRight, { size: 15, className: "crisp-tabletoolbar-menu-item-chevron" })] }, col.key)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath([...fieldPickerPath, col]), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), col.label] }, col.key))), nested.map(({ parent, col }) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath([...fieldPickerPath, parent, col]), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-menu-item-path", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-menu-item-path-parent", children: parent.label }), (0, jsx_runtime_1.jsx)(RtlChevronRight, { size: 15, className: "crisp-tabletoolbar-menu-item-path-sep" }), (0, jsx_runtime_1.jsx)("span", { children: col.label })] })] }, `${parent.key}.${col.key}`)))] }));
     };
@@ -616,7 +644,11 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     const sortedLabel = sortTriggerLabel
         ? sortTriggerLabel(sorts, sortColumns)
         : sorts.length
-            ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
+            ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${
+            // #754: sorts[0].key may be a dot-joined nested path
+            // ("team.jobTitle") — resolve it the same way the chip and sort
+            // row do, rather than a flat find that fails on a nested key.
+            resolveColumnPath(sortColumns, sorts[0].key).at(-1)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : sortLabel;
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
@@ -625,11 +657,26 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                         if (dragSort !== null)
                                             moveSort(dragSort, i);
                                         setDragSort(null);
-                                    }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)(select_1.Select, { className: "crisp-tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: sortColumns.map((c) => ({
-                                                value: c.key,
-                                                label: c.icon ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
-                                                keywords: c.label,
-                                            })), "aria-label": sortFieldLabel }), (0, jsx_runtime_1.jsx)(select_1.Select, { className: "crisp-tabletoolbar-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
+                                    }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (() => {
+                                            // #754: the sort row's own field picker -- the
+                                            // same nested-drill-down construct Filter's field
+                                            // picker already has (#592), measured live:
+                                            // clicking a sort row's field (or "Add sort") opens
+                                            // an identical picker, "Team" (a relationship
+                                            // field) drills into the same People-attribute
+                                            // screen Filter's own "Team" does.
+                                            const sortColPath = resolveColumnPath(sortColumns, s.key);
+                                            const sortCol = sortColPath.at(-1);
+                                            const pickerOpen = sortFieldPickerIndex === i;
+                                            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-field-picker", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-sort-field-trigger", "aria-haspopup": "dialog", "aria-expanded": pickerOpen, "aria-label": sortFieldLabel, onClick: () => {
+                                                            setFieldPickerPath([]);
+                                                            setFilterQuery("");
+                                                            setSortFieldPickerIndex(pickerOpen ? null : i);
+                                                        }, children: [sortCol?.icon ? ((0, jsx_runtime_1.jsx)(sortCol.icon, { size: 15, strokeWidth: 1.75 })) : null, sortColPath.length > 1 ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fcond-path", children: sortColPath.map((c, pi) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [pi > 0 && ((0, jsx_runtime_1.jsx)(RtlChevronRight, { size: 14, className: "crisp-tabletoolbar-fcond-path-sep" })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fcond-path-seg", children: c.label })] }, c.key))) })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-sort-field-label", children: sortCol?.label }))] }), pickerOpen && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": sortFieldLabel, children: nestedFieldPicker(sortColumns, (key) => {
+                                                            setSortField(i, key);
+                                                            setSortFieldPickerIndex(null);
+                                                        }, searchAttributesPlaceholder, sortFieldLabel) }))] }));
+                                        })(), (0, jsx_runtime_1.jsx)(select_1.Select, { className: "crisp-tabletoolbar-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
                                                 {
                                                     value: "asc",
                                                     label: ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), ascendingLabel] })),
@@ -647,7 +694,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `${filterLabel} · ${activeFilters}`
-                                        : filterLabel] }), openMenu === "filter" && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: filterFieldPicker(addFilter) }))] }), filters.map((cond) => {
+                                        : filterLabel] }), openMenu === "filter" && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: nestedFieldPicker(filterColumns, addFilter, filterFieldPlaceholder, filterFieldLabel) }))] }), filters.map((cond) => {
                     // #592: cond.key may be a dot-joined nested path
                     // ("team.twitterFollowerCount") — resolve the full path so the
                     // field segment can render its breadcrumb; `col` (the leaf) still
@@ -683,7 +730,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                                 ? col?.type === "date"
                                                     ? formatFilterDate(cond.value)
                                                     : cond.value
-                                                : filterValuePlaceholder })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--kebab", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && ((0, jsx_runtime_1.jsx)("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), fieldOpen && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: filterFieldPicker((key) => changeFilterField(cond.id, key)) })), opOpen && ((0, jsx_runtime_1.jsx)("div", { ref: opMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "menu", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, onKeyDown: onOpKeyDown, children: opsFor(col).map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => pickOp(cond.id, op), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))) })), valOpen && showValueSeg && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--val", role: "dialog", "aria-label": `${col?.label} filter value`, children: cond.op === "isanyof" && col?.values ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
+                                                : filterValuePlaceholder })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--kebab", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && ((0, jsx_runtime_1.jsx)("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), fieldOpen && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: nestedFieldPicker(filterColumns, (key) => changeFilterField(cond.id, key), filterFieldPlaceholder, filterFieldLabel) })), opOpen && ((0, jsx_runtime_1.jsx)("div", { ref: opMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "menu", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, onKeyDown: onOpKeyDown, children: opsFor(col).map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => pickOp(cond.id, op), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))) })), valOpen && showValueSeg && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--val", role: "dialog", "aria-label": `${col?.label} filter value`, children: cond.op === "isanyof" && col?.values ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
                                             // biome-ignore lint/a11y/noAutofocus: focus the search field
                                             autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
                                             .filter((v) => v
@@ -745,17 +792,12 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                 }
                                 else {
                                     setAddingAttribute(false);
-                                    setAddAttrQuery("");
+                                    setFieldPickerPath([]);
+                                    setFilterQuery("");
                                     setOpenMenu("viewsettings");
                                 }
                             }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "viewsettings", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), viewSettingsLabel] }), openMenu === "viewsettings" &&
-                            (addingAttribute ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: searchAttributesPlaceholder, "aria-label": searchAttributesPlaceholder, 
-                                        // biome-ignore lint/a11y/noAutofocus: focus the search box on open, same as Filter's field picker
-                                        autoFocus: true, value: addAttrQuery, onChange: (e) => setAddAttrQuery(e.target.value) }), hiddenAttrs
-                                        .filter((col) => col.label
-                                        .toLowerCase()
-                                        .includes(addAttrQuery.trim().toLowerCase()))
-                                        .map((col) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => showAttr(col.key), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), col.label] }, col.key)))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, children: [shownAttrs.map((col, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+                            (addingAttribute ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, children: nestedFieldPicker(hiddenAttrs, showAttr, searchAttributesPlaceholder, searchAttributesPlaceholder) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, children: [shownAttrs.map((col, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                             if (dragAttr !== null)
                                                 e.preventDefault();
                                         }, onDrop: () => {
@@ -763,7 +805,11 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                                 moveAttr(dragAttr, i);
                                             setDragAttr(null);
                                         }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => hideAttr(col.key), "aria-label": hideAttributeLabel?.(col.label) ??
-                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), (onImportCsv ||
+                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => {
+                                                setAddingAttribute(true);
+                                                setFieldPickerPath([]);
+                                                setFilterQuery("");
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), (onImportCsv ||
                     onExportCsv ||
                     onExportExcel ||
                     importExportHelpHref) && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => setOpenMenu(openMenu === "importexport" ? null : "importexport"), "aria-haspopup": "menu", "aria-expanded": openMenu === "importexport", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), importExportLabel, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "importexport" && ((0, jsx_runtime_1.jsxs)("div", { ref: importExportMenuRef, className: "crisp-tabletoolbar-menu", role: "menu", "aria-label": importExportLabel, onKeyDown: onImportExportKeyDown, children: [onImportCsv && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {

package/dist/cjs/components/tabletoolbar/tabletoolbar.recipe.js

@@ -56,6 +56,19 @@ const filterChipChrome = `
     & .crisp-tabletoolbar-fcond-seg--val { font-weight: ${tokens_1.contract.weight.medium}; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-tabletoolbar-fcond-seg--kebab { background: ${tokens_1.contract.bgSurface}; justify-content: center; width: 28px; padding: 0; border-radius: 0 ${tokens_1.contract.radius.md} ${tokens_1.contract.radius.md} 0; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: ${tokens_1.contract.fgPrimary}; }
+    /* #754: the sort row's own field trigger, replacing a plain Select
+       with the same nested-drill-down popover Filter's field picker
+       already has — reuses Select's own already-measured trigger chrome
+       verbatim (its class is scoped under Select's own root class, so it
+       can't be reused as a bare class name outside an actual Select tree;
+       these values are copied, not re-measured). */
+    & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
+    & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.menuRow}; width: 100%; min-width: 0; margin: 0; padding: 0 ${tokens_1.contract.space["1.5"]} 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabletoolbar-sort-field-trigger:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
+    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
     & .crisp-tabletoolbar-datepop { width: 300px; }
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: ${tokens_1.contract.space["1"]}; margin-top: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["1"]}; }

package/dist/cjs/components/text/text.recipe.js

@@ -13,13 +13,23 @@ const tokens_1 = require("../../tokens");
 // the same reason (see its own doc).
 const spec = (0, core_1.defineSpec)({
     name: "text",
-    // `display: inline` -- a span's own default, stated rather than left
-    // implicit: an EMPTY base compiles to an empty string, and
-    // `core/resolve.ts`'s `if (base) classes.push(prefixedName)` treats that
-    // falsy string as "no base rule", which drops the `crisp-text` class
-    // itself, silently, from every instance (caught by this file's own
-    // tests going red on that exact class).
-    base: { display: "inline" },
+    // Needs a real, always-present declaration so `resolveRecipe` emits the
+    // `crisp-text` class at all -- an EMPTY base compiles to an empty string,
+    // and `core/resolve.ts`'s `if (base) classes.push(prefixedName)` treats
+    // that falsy string as "no base rule", dropping the class itself,
+    // silently, from every instance (this file's own tests catch that).
+    // `display: "inline"` filled that role until a real bug: `asChild`
+    // (Primitive.span -> Radix Slot) merges this class onto WHATEVER element
+    // the caller passes, not a `<span>` -- a `<div>`/`<p>`/`<li>` child's own
+    // block default lost to `.crisp-text`'s class-specificity `display:
+    // inline`, silently collapsing its layout (internal/grc's own Settings.tsx
+    // ran two rows onto one line this way). `vertical-align: baseline` fills
+    // the same "always-present, never empty" role without that risk: it's a
+    // span's own already-inherited default (so nothing changes for the plain,
+    // non-asChild case `Primitive.span` renders), and it has NO effect at all
+    // on a block-level box, so an `asChild` div/p/li keeps its own display
+    // exactly as its own tag already gives it.
+    base: { verticalAlign: "baseline" },
     variants: {
         tone: {
             default: { color: tokens_1.contract.fgPrimary },

package/dist/datatable.css

@@ -90,6 +90,9 @@
     & tbody tr[data-selected] td { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface))); }
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
+    /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%, composited OVER whatever row-state background the cell already has (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
+    & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--crisp-bg-purple) 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */

package/dist/datatable.layered.css

@@ -91,6 +91,9 @@
     & tbody tr[data-selected] td { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface))); }
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
+    /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%, composited OVER whatever row-state background the cell already has (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
+    & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--crisp-bg-purple) 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */

package/dist/esm/components/datatable/datatable.js

@@ -573,6 +573,19 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     // arrow-key nav, Enter) is unaffected -- a plain click resets `selAnchor`
     // to null, collapsing back to single-cell mode.
     const [selAnchor, setSelAnchor] = React.useState(null);
+    // crisp/#749: Shift+ArrowUp/Down extends the ROW (checkbox) selection --
+    // confirmed live on Attio's own Companies grid, a DIFFERENT gesture from
+    // `selAnchor` above (that's Shift+CLICK extending a cell-value range;
+    // this issue's own text is explicit the two are independent, and arrow
+    // keys were never measured as a cell-range trigger, G-101). Same
+    // fixed-anchor/moving-cell shape as `selAnchor` -- a spreadsheet's own
+    // Shift+Arrow both moves the active cell AND grows/shrinks the selection
+    // relative to wherever the drag started, which recomputing the anchor→
+    // new-row span from scratch on every press gives for free (arrowing back
+    // toward the anchor shrinks the same way arrowing away grows it). Reset
+    // to null on any plain (non-shift) navigation or click, same as
+    // `selAnchor`'s own reset points.
+    const [rowSelectAnchor, setRowSelectAnchor] = React.useState(null);
     const gridRef = React.useRef(null);
     // The native-copy-event proxy (crisp/#645): Attio "has no Mousetrap/
     // JS-keydown binding for c/mod+c ... it copies purely via the native
@@ -1160,6 +1173,36 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             setSelected(new Set(rows.map((rw) => rw.id)));
             return;
         }
+        // crisp/#749: Shift+ArrowUp/Down extends the row-checkbox selection --
+        // confirmed live, distinct from Shift+Click's cell-range gesture above
+        // (that one is `selAnchor`; this is `rowSelectAnchor`, and the two
+        // don't interact). Recomputes the whole anchor→destination span on
+        // every press rather than accumulating, so arrowing back toward the
+        // anchor shrinks the selection the same way arrowing away grows it --
+        // the "shrink-from-the-anchor" behavior a spreadsheet's own Shift+Arrow
+        // gives, which a plain add-on-each-press approach can't express.
+        if (selectable &&
+            e.shiftKey &&
+            (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            const r0 = rows.findIndex((row) => row.id === selCell.id);
+            if (r0 < 0)
+                return;
+            const nr0 = e.key === "ArrowDown"
+                ? Math.min(rows.length - 1, r0 + 1)
+                : Math.max(0, r0 - 1);
+            e.preventDefault();
+            const anchorId = rowSelectAnchor ?? selCell.id;
+            const anchorIdx = rows.findIndex((row) => row.id === anchorId);
+            if (anchorIdx < 0)
+                return;
+            setRowSelectAnchor(anchorId);
+            const lo = Math.min(anchorIdx, nr0);
+            const hi = Math.max(anchorIdx, nr0);
+            setSelected(new Set(rows.slice(lo, hi + 1).map((row) => row.id)));
+            setSelCell({ id: rows[nr0].id, key: selCell.key });
+            clipboardProxyRef.current?.select();
+            return;
+        }
         const r = rows.findIndex((row) => row.id === selCell.id);
         const c = columns.findIndex((col) => col.key === selCell.key);
         if (r < 0 || c < 0)
@@ -1198,6 +1241,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         else if (e.key === "Escape") {
             setSelCell(null);
             setSelAnchor(null);
+            setRowSelectAnchor(null);
             return;
         }
         else if (e.key === "Enter") {
@@ -1222,8 +1266,10 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         // A plain arrow key moves the single-cell selection and drops any active
         // range -- Attio's own range trigger is Shift+Click only (G-101), arrow
         // keys were never measured as a range-extend gesture, so this doesn't
-        // invent one.
+        // invent one. Also drops an in-progress Shift+Arrow row-selection drag
+        // (crisp/#749) for the same reason -- a plain arrow ends that gesture.
         setSelAnchor(null);
+        setRowSelectAnchor(null);
         setSelCell({ id: rows[nr].id, key: columns[nc].key });
         // keeps the clipboard proxy's selection non-collapsed after a move, so
         // a Cmd+C right after an arrow key still has something native `copy`
@@ -1806,7 +1852,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                             ? "crisp-datatable-editable"
                                                             : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                             ? ""
-                                                            : undefined, "data-in-range": inRange ? "" : undefined, "data-cell-expanded": isExpanded ? "" : undefined, onClick: (e) => {
+                                                            : undefined, "data-in-range": inRange ? "" : undefined, "data-cell-expanded": isExpanded ? "" : undefined, "data-enriched": col.enriched ? "" : undefined, onClick: (e) => {
                                                             // the keyboard model's anchor -- a single click
                                                             // only selects. A genuine double-click (or Enter
                                                             // on the selected cell) opens the editor (#411),
@@ -1821,6 +1867,11 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                             }
                                                             else {
                                                                 setSelAnchor(null);
+                                                                // crisp/#749: a plain click also ends an
+                                                                // in-progress Shift+Arrow row-selection drag
+                                                                // -- Shift+Click itself doesn't touch it,
+                                                                // the two gestures are independent.
+                                                                setRowSelectAnchor(null);
                                                             }
                                                             setSelCell({ id: row.id, key: col.key });
                                                             // Focuses the clipboard proxy, not `gridRef`
@@ -1861,6 +1912,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                             // selected (crisp/#598) -- collapses any
                                                             // active range, same as a plain left-click.
                                                             setSelAnchor(null);
+                                                            setRowSelectAnchor(null);
                                                             setSelCell({ id: row.id, key: col.key });
                                                             clipboardProxyRef.current?.focus();
                                                             clipboardProxyRef.current?.select();

package/dist/esm/components/datatable/datatable.recipe.js

@@ -135,6 +135,12 @@ const config = defineRecipe({
     & tbody tr[data-selected] td { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, ${c.fgPrimary} 4%, color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface})); }
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); cursor: text; }
+    /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own
+       already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%,
+       composited OVER whatever row-state background the cell already has
+       (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
+    & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, ${c.bgPurple} 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${c.space["1.5"]}; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     /* An async onEdit's in-flight state (#385) -- the field/picker dims and

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -377,6 +377,12 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     // [team, company] is Team -> Company, etc. Reset to [] wherever
     // `filterQuery` already resets (opening the picker fresh), same lifetime.
     const [fieldPickerPath, setFieldPickerPath] = React.useState([]);
+    // #754: which sort row's own field picker is open (its index into
+    // `sorts`), or `null` for the normal sort-row list — the same
+    // "one sub-screen behind a flag" split View settings' own
+    // `addingAttribute` already uses, parameterized by index since more than
+    // one sort row exists.
+    const [sortFieldPickerIndex, setSortFieldPickerIndex] = React.useState(null);
     // filters the "isanyof" checkbox list, same lifetime as filterQuery above
     const [anyOfQuery, setAnyOfQuery] = React.useState("");
     const [dragAttr, setDragAttr] = React.useState(null);
@@ -390,7 +396,6 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     // built here -- hiding an attribute is a trailing control instead, see
     // the hide button below).
     const [addingAttribute, setAddingAttribute] = React.useState(false);
-    const [addAttrQuery, setAddAttrQuery] = React.useState("");
     // close any open menu on outside click (anything not inside a menu or its
     // trigger) or Escape
     React.useEffect(() => {
@@ -473,10 +478,27 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     };
     // #590: shown attributes, in `shownKeys`' order -- a key with no matching
     // `viewColumns` entry (stale state after a column is removed upstream)
-    // drops out rather than rendering a blank row.
-    const shownAttrs = shownKeys
-        .map((k) => viewColumns.find((c) => c.key === k))
-        .filter((c) => c != null);
+    // drops out rather than rendering a blank row. #754: `shownKeys` can now
+    // carry a dot-joined nested path ("team.jobTitle") from the add-attribute
+    // screen's own nested picker, so each key resolves via the same
+    // `resolveColumnPath` the filter chip uses -- the LEAF column's icon
+    // drives the row's own icon, and the label is the full breadcrumb
+    // ("Team › Job title"), joined as plain text rather than the chip's own
+    // muted/chevron treatment, which was measured specifically for the
+    // filter chip and wasn't re-verified for this row shape.
+    const shownAttrs = shownKeys.flatMap((k) => {
+        const path = resolveColumnPath(viewColumns, k);
+        const leaf = path.at(-1);
+        if (!leaf)
+            return [];
+        return [
+            {
+                key: k,
+                icon: leaf.icon,
+                label: path.length > 1 ? path.map((c) => c.label).join(" › ") : leaf.label,
+            },
+        ];
+    });
     const hiddenAttrs = viewColumns.filter((c) => !shownKeys.includes(c.key));
     const moveAttr = (from, to) => {
         if (from === to)
@@ -490,7 +512,8 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     const showAttr = (key) => {
         putShownKeys([...shownKeys, key]);
         setAddingAttribute(false);
-        setAddAttrQuery("");
+        setFieldPickerPath([]);
+        setFilterQuery("");
     };
     // #594: the filter chip's kebab is a real role="menu" (crisp/#188's shared
     // model — arrows, Home/End, typeahead, Escape), not a hand-rolled div like
@@ -523,15 +546,20 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
         close: () => setOpenMenu(null),
         contentRef: importExportMenuRef,
     });
-    // Shared between the "Filter" trigger's own add-condition picker and each
-    // chip's field segment (#462 follow-up) — both search the same
-    // `filterColumns` list and differ only in what a pick does. #592: also
-    // handles drilling into a `nestedColumns` column — `fieldPickerPath`
-    // tracks the current scope ([] is the top level), reset to [] wherever
-    // the picker opens fresh (both trigger onClicks, above).
-    const filterFieldPicker = (onSelect) => {
+    // #754: generalized from the Filter-only `filterFieldPicker` (#592) to
+    // also drive Sort's own field picker and View settings' add-attribute
+    // screen — all three offer the identical nested-drill-down construct on
+    // live Attio (confirmed: "Team" with a count badge appears, and drills
+    // into the same People-attribute screen, in all three pickers). Shared
+    // `fieldPickerPath`/`filterQuery` state across all three call sites is
+    // safe: `openMenu` already only ever names ONE open popover at a time,
+    // so only one of Filter/Sort/View-settings' own picker can be showing.
+    // `fieldPickerPath` tracks the current scope ([] is the top level),
+    // reset to [] wherever a picker opens fresh (every trigger's own
+    // onClick).
+    const nestedFieldPicker = (columns, onSelect, topLevelPlaceholder, topLevelLabel) => {
         const scope = fieldPickerPath.at(-1);
-        const scopeColumns = scope ? (scope.nestedColumns ?? []) : filterColumns;
+        const scopeColumns = scope ? (scope.nestedColumns ?? []) : columns;
         const query = filterQuery.trim().toLowerCase();
         const direct = scopeColumns.filter((c) => c.label.toLowerCase().includes(query));
         // #592: one level of flattening from wherever the picker is currently
@@ -559,9 +587,9 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                 setFilterQuery("");
                             }, children: _jsx(ChevronLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) }), _jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: nestedFieldPlaceholder
                                 ? nestedFieldPlaceholder(scope.nestedObjectLabel ?? scope.label.toLowerCase())
-                                : `Search ${scope.nestedObjectLabel ?? scope.label.toLowerCase()} attributes…`, "aria-label": filterFieldLabel, 
+                                : `Search ${scope.nestedObjectLabel ?? scope.label.toLowerCase()} attributes…`, "aria-label": topLevelLabel, 
                             // biome-ignore lint/a11y/noAutofocus: focus the picker on open
-                            autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })] })) : (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
+                            autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })] })) : (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: topLevelPlaceholder, "aria-label": topLevelLabel, 
                     // biome-ignore lint/a11y/noAutofocus: focus the picker on open
                     autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })), scope && (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath(fieldPickerPath), children: [scope.icon ? (_jsx(scope.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), scope.label] })), direct.map((col) => col.nestedColumns?.length ? (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--expand", onClick: () => drillIn(col), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label, _jsx(RtlChevronRight, { size: 15, className: "crisp-tabletoolbar-menu-item-chevron" })] }, col.key)) : (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath([...fieldPickerPath, col]), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key))), nested.map(({ parent, col }) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath([...fieldPickerPath, parent, col]), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), _jsxs("span", { className: "crisp-tabletoolbar-menu-item-path", children: [_jsx("span", { className: "crisp-tabletoolbar-menu-item-path-parent", children: parent.label }), _jsx(RtlChevronRight, { size: 15, className: "crisp-tabletoolbar-menu-item-path-sep" }), _jsx("span", { children: col.label })] })] }, `${parent.key}.${col.key}`)))] }));
     };
@@ -577,7 +605,11 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     const sortedLabel = sortTriggerLabel
         ? sortTriggerLabel(sorts, sortColumns)
         : sorts.length
-            ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
+            ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${
+            // #754: sorts[0].key may be a dot-joined nested path
+            // ("team.jobTitle") — resolve it the same way the chip and sort
+            // row do, rather than a flat find that fails on a nested key.
+            resolveColumnPath(sortColumns, sorts[0].key).at(-1)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : sortLabel;
     return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
@@ -586,11 +618,26 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                         if (dragSort !== null)
                                             moveSort(dragSort, i);
                                         setDragSort(null);
-                                    }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "crisp-tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: sortColumns.map((c) => ({
-                                                value: c.key,
-                                                label: c.icon ? (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
-                                                keywords: c.label,
-                                            })), "aria-label": sortFieldLabel }), _jsx(Select, { className: "crisp-tabletoolbar-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
+                                    }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), (() => {
+                                            // #754: the sort row's own field picker -- the
+                                            // same nested-drill-down construct Filter's field
+                                            // picker already has (#592), measured live:
+                                            // clicking a sort row's field (or "Add sort") opens
+                                            // an identical picker, "Team" (a relationship
+                                            // field) drills into the same People-attribute
+                                            // screen Filter's own "Team" does.
+                                            const sortColPath = resolveColumnPath(sortColumns, s.key);
+                                            const sortCol = sortColPath.at(-1);
+                                            const pickerOpen = sortFieldPickerIndex === i;
+                                            return (_jsxs("span", { className: "crisp-tabletoolbar-sort-field-picker", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-field-trigger", "aria-haspopup": "dialog", "aria-expanded": pickerOpen, "aria-label": sortFieldLabel, onClick: () => {
+                                                            setFieldPickerPath([]);
+                                                            setFilterQuery("");
+                                                            setSortFieldPickerIndex(pickerOpen ? null : i);
+                                                        }, children: [sortCol?.icon ? (_jsx(sortCol.icon, { size: 15, strokeWidth: 1.75 })) : null, sortColPath.length > 1 ? (_jsx("span", { className: "crisp-tabletoolbar-fcond-path", children: sortColPath.map((c, pi) => (_jsxs(React.Fragment, { children: [pi > 0 && (_jsx(RtlChevronRight, { size: 14, className: "crisp-tabletoolbar-fcond-path-sep" })), _jsx("span", { className: "crisp-tabletoolbar-fcond-path-seg", children: c.label })] }, c.key))) })) : (_jsx("span", { className: "crisp-tabletoolbar-sort-field-label", children: sortCol?.label }))] }), pickerOpen && (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": sortFieldLabel, children: nestedFieldPicker(sortColumns, (key) => {
+                                                            setSortField(i, key);
+                                                            setSortFieldPickerIndex(null);
+                                                        }, searchAttributesPlaceholder, sortFieldLabel) }))] }));
+                                        })(), _jsx(Select, { className: "crisp-tabletoolbar-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
                                                 {
                                                     value: "asc",
                                                     label: (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), ascendingLabel] })),
@@ -608,7 +655,7 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `${filterLabel} · ${activeFilters}`
-                                        : filterLabel] }), openMenu === "filter" && (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: filterFieldPicker(addFilter) }))] }), filters.map((cond) => {
+                                        : filterLabel] }), openMenu === "filter" && (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: nestedFieldPicker(filterColumns, addFilter, filterFieldPlaceholder, filterFieldLabel) }))] }), filters.map((cond) => {
                     // #592: cond.key may be a dot-joined nested path
                     // ("team.twitterFollowerCount") — resolve the full path so the
                     // field segment can render its breadcrumb; `col` (the leaf) still
@@ -644,7 +691,7 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                 ? col?.type === "date"
                                                     ? formatFilterDate(cond.value)
                                                     : cond.value
-                                                : filterValuePlaceholder })), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--kebab", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: _jsx(MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && (_jsx("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: _jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [_jsx(Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), fieldOpen && (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: filterFieldPicker((key) => changeFilterField(cond.id, key)) })), opOpen && (_jsx("div", { ref: opMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "menu", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, onKeyDown: onOpKeyDown, children: opsFor(col).map((op) => (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => pickOp(cond.id, op), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))) })), valOpen && showValueSeg && (_jsx("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--val", role: "dialog", "aria-label": `${col?.label} filter value`, children: cond.op === "isanyof" && col?.values ? (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
+                                                : filterValuePlaceholder })), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--kebab", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: _jsx(MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && (_jsx("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: _jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [_jsx(Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), fieldOpen && (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: nestedFieldPicker(filterColumns, (key) => changeFilterField(cond.id, key), filterFieldPlaceholder, filterFieldLabel) })), opOpen && (_jsx("div", { ref: opMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "menu", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, onKeyDown: onOpKeyDown, children: opsFor(col).map((op) => (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => pickOp(cond.id, op), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))) })), valOpen && showValueSeg && (_jsx("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--val", role: "dialog", "aria-label": `${col?.label} filter value`, children: cond.op === "isanyof" && col?.values ? (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
                                             // biome-ignore lint/a11y/noAutofocus: focus the search field
                                             autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
                                             .filter((v) => v
@@ -706,17 +753,12 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                 }
                                 else {
                                     setAddingAttribute(false);
-                                    setAddAttrQuery("");
+                                    setFieldPickerPath([]);
+                                    setFilterQuery("");
                                     setOpenMenu("viewsettings");
                                 }
                             }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "viewsettings", "data-menu-trigger": true, children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), viewSettingsLabel] }), openMenu === "viewsettings" &&
-                            (addingAttribute ? (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: searchAttributesPlaceholder, "aria-label": searchAttributesPlaceholder, 
-                                        // biome-ignore lint/a11y/noAutofocus: focus the search box on open, same as Filter's field picker
-                                        autoFocus: true, value: addAttrQuery, onChange: (e) => setAddAttrQuery(e.target.value) }), hiddenAttrs
-                                        .filter((col) => col.label
-                                        .toLowerCase()
-                                        .includes(addAttrQuery.trim().toLowerCase()))
-                                        .map((col) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => showAttr(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] })) : (_jsxs("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, children: [shownAttrs.map((col, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+                            (addingAttribute ? (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, children: nestedFieldPicker(hiddenAttrs, showAttr, searchAttributesPlaceholder, searchAttributesPlaceholder) })) : (_jsxs("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, children: [shownAttrs.map((col, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                             if (dragAttr !== null)
                                                 e.preventDefault();
                                         }, onDrop: () => {
@@ -724,7 +766,11 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                 moveAttr(dragAttr, i);
                                             setDragAttr(null);
                                         }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => hideAttr(col.key), "aria-label": hideAttributeLabel?.(col.label) ??
-                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), (onImportCsv ||
+                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => {
+                                                setAddingAttribute(true);
+                                                setFieldPickerPath([]);
+                                                setFilterQuery("");
+                                            }, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), (onImportCsv ||
                     onExportCsv ||
                     onExportExcel ||
                     importExportHelpHref) && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => setOpenMenu(openMenu === "importexport" ? null : "importexport"), "aria-haspopup": "menu", "aria-expanded": openMenu === "importexport", "data-menu-trigger": true, children: [_jsx(Upload, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), importExportLabel, _jsx(ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "importexport" && (_jsxs("div", { ref: importExportMenuRef, className: "crisp-tabletoolbar-menu", role: "menu", "aria-label": importExportLabel, onKeyDown: onImportExportKeyDown, children: [onImportCsv && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {

package/dist/esm/components/tabletoolbar/tabletoolbar.recipe.js

@@ -53,6 +53,19 @@ const filterChipChrome = `
     & .crisp-tabletoolbar-fcond-seg--val { font-weight: ${c.weight.medium}; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-tabletoolbar-fcond-seg--kebab { background: ${c.bgSurface}; justify-content: center; width: 28px; padding: 0; border-radius: 0 ${c.radius.md} ${c.radius.md} 0; color: ${c.fgMuted}; }
     & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: ${c.fgPrimary}; }
+    /* #754: the sort row's own field trigger, replacing a plain Select
+       with the same nested-drill-down popover Filter's field picker
+       already has — reuses Select's own already-measured trigger chrome
+       verbatim (its class is scoped under Select's own root class, so it
+       can't be reused as a bare class name outside an actual Select tree;
+       these values are copied, not re-measured). */
+    & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
+    & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.menuRow}; width: 100%; min-width: 0; margin: 0; padding: 0 ${c.space["1.5"]} 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent); font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabletoolbar-sort-field-trigger:hover { background: ${c.bgRaised}; }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
+    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; background: ${c.bgSurface}; }
+    & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
     & .crisp-tabletoolbar-datepop { width: 300px; }
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; padding: 0 ${c.space["1"]}; }

package/dist/esm/components/text/text.recipe.js

@@ -10,13 +10,23 @@ import { contract as c } from "../../tokens/index.js";
 // the same reason (see its own doc).
 const spec = defineSpec({
     name: "text",
-    // `display: inline` -- a span's own default, stated rather than left
-    // implicit: an EMPTY base compiles to an empty string, and
-    // `core/resolve.ts`'s `if (base) classes.push(prefixedName)` treats that
-    // falsy string as "no base rule", which drops the `crisp-text` class
-    // itself, silently, from every instance (caught by this file's own
-    // tests going red on that exact class).
-    base: { display: "inline" },
+    // Needs a real, always-present declaration so `resolveRecipe` emits the
+    // `crisp-text` class at all -- an EMPTY base compiles to an empty string,
+    // and `core/resolve.ts`'s `if (base) classes.push(prefixedName)` treats
+    // that falsy string as "no base rule", dropping the class itself,
+    // silently, from every instance (this file's own tests catch that).
+    // `display: "inline"` filled that role until a real bug: `asChild`
+    // (Primitive.span -> Radix Slot) merges this class onto WHATEVER element
+    // the caller passes, not a `<span>` -- a `<div>`/`<p>`/`<li>` child's own
+    // block default lost to `.crisp-text`'s class-specificity `display:
+    // inline`, silently collapsing its layout (internal/grc's own Settings.tsx
+    // ran two rows onto one line this way). `vertical-align: baseline` fills
+    // the same "always-present, never empty" role without that risk: it's a
+    // span's own already-inherited default (so nothing changes for the plain,
+    // non-asChild case `Primitive.span` renders), and it has NO effect at all
+    // on a block-level box, so an `asChild` div/p/li keeps its own display
+    // exactly as its own tag already gives it.
+    base: { verticalAlign: "baseline" },
     variants: {
         tone: {
             default: { color: c.fgPrimary },

package/dist/styles.css

@@ -689,6 +689,9 @@
     & tbody tr[data-selected] td { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface))); }
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
+    /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%, composited OVER whatever row-state background the cell already has (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
+    & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--crisp-bg-purple) 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */
@@ -1922,11 +1925,23 @@
     & .crisp-tabletoolbar-fcond-seg--val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-tabletoolbar-fcond-seg--kebab { background: var(--crisp-bg-surface); justify-content: center; width: 28px; padding: 0; border-radius: 0 var(--crisp-radius-md) var(--crisp-radius-md) 0; color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: var(--crisp-fg-primary); }
+    /* #754: the sort row's own field trigger, replacing a plain Select
+       with the same nested-drill-down popover Filter's field picker already has — reuses Select's own already-measured trigger chrome
+       verbatim (its class is scoped under Select's own root class, so it can't be reused as a bare class name outside an actual Select tree;
+       these values are copied, not re-measured). */
+    & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
+    & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); width: 100%; min-width: 0; margin: 0; padding: 0 var(--crisp-space-1-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabletoolbar-sort-field-trigger:hover { background: var(--crisp-bg-raised); }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
+    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
     & .crisp-tabletoolbar-datepop { width: 300px; }
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
     & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
+
     & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
@@ -1971,7 +1986,7 @@
 }
 
 .crisp-text {
-  display: inline;
+  vertical-align: baseline;
 }
 .crisp-text--tone_default {
   color: var(--crisp-fg-primary);

package/dist/styles.layered.css

@@ -690,6 +690,9 @@
     & tbody tr[data-selected] td { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface))); }
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
+    /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%, composited OVER whatever row-state background the cell already has (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
+    & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--crisp-bg-purple) 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */
@@ -1923,11 +1926,23 @@
     & .crisp-tabletoolbar-fcond-seg--val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-tabletoolbar-fcond-seg--kebab { background: var(--crisp-bg-surface); justify-content: center; width: 28px; padding: 0; border-radius: 0 var(--crisp-radius-md) var(--crisp-radius-md) 0; color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: var(--crisp-fg-primary); }
+    /* #754: the sort row's own field trigger, replacing a plain Select
+       with the same nested-drill-down popover Filter's field picker already has — reuses Select's own already-measured trigger chrome
+       verbatim (its class is scoped under Select's own root class, so it can't be reused as a bare class name outside an actual Select tree;
+       these values are copied, not re-measured). */
+    & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
+    & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); width: 100%; min-width: 0; margin: 0; padding: 0 var(--crisp-space-1-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabletoolbar-sort-field-trigger:hover { background: var(--crisp-bg-raised); }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
+    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
     & .crisp-tabletoolbar-datepop { width: 300px; }
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
     & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
+
     & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
@@ -1972,7 +1987,7 @@
 }
 
 .crisp-text {
-  display: inline;
+  vertical-align: baseline;
 }
 .crisp-text--tone_default {
   color: var(--crisp-fg-primary);

package/dist/tabletoolbar.css

@@ -105,11 +105,23 @@
     & .crisp-tabletoolbar-fcond-seg--val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-tabletoolbar-fcond-seg--kebab { background: var(--crisp-bg-surface); justify-content: center; width: 28px; padding: 0; border-radius: 0 var(--crisp-radius-md) var(--crisp-radius-md) 0; color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: var(--crisp-fg-primary); }
+    /* #754: the sort row's own field trigger, replacing a plain Select
+       with the same nested-drill-down popover Filter's field picker already has — reuses Select's own already-measured trigger chrome
+       verbatim (its class is scoped under Select's own root class, so it can't be reused as a bare class name outside an actual Select tree;
+       these values are copied, not re-measured). */
+    & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
+    & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); width: 100%; min-width: 0; margin: 0; padding: 0 var(--crisp-space-1-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabletoolbar-sort-field-trigger:hover { background: var(--crisp-bg-raised); }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
+    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
     & .crisp-tabletoolbar-datepop { width: 300px; }
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
     & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
+
     & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }

package/dist/tabletoolbar.layered.css

@@ -106,11 +106,23 @@
     & .crisp-tabletoolbar-fcond-seg--val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-tabletoolbar-fcond-seg--kebab { background: var(--crisp-bg-surface); justify-content: center; width: 28px; padding: 0; border-radius: 0 var(--crisp-radius-md) var(--crisp-radius-md) 0; color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: var(--crisp-fg-primary); }
+    /* #754: the sort row's own field trigger, replacing a plain Select
+       with the same nested-drill-down popover Filter's field picker already has — reuses Select's own already-measured trigger chrome
+       verbatim (its class is scoped under Select's own root class, so it can't be reused as a bare class name outside an actual Select tree;
+       these values are copied, not re-measured). */
+    & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
+    & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); width: 100%; min-width: 0; margin: 0; padding: 0 var(--crisp-space-1-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabletoolbar-sort-field-trigger:hover { background: var(--crisp-bg-raised); }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
+    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
     & .crisp-tabletoolbar-datepop { width: 300px; }
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
     & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
+
     & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }

package/dist/text.css

@@ -1,5 +1,5 @@
 .crisp-text {
-  display: inline;
+  vertical-align: baseline;
 }
 .crisp-text--tone_default {
   color: var(--crisp-fg-primary);

package/dist/text.layered.css

@@ -1,6 +1,6 @@
 @layer crisp-components {
 .crisp-text {
-  display: inline;
+  vertical-align: baseline;
 }
 .crisp-text--tone_default {
   color: var(--crisp-fg-primary);

package/dist/types/components/datatable/datatable.d.ts

@@ -178,6 +178,14 @@ export type DataTableColumn<T> = {
      * native-copy path writes nothing to the clipboard, and its Clear-value
      * item is disabled (there is nothing editable to clear). */
     readOnly?: boolean;
+    /** Marks the column's values as AI-enriched (crisp/#758) — every cell
+     * gets a full-bleed purple wash, composited OVER whatever row-state
+     * background the cell already has (hover, selected), which is why it's
+     * an overlay rather than a plain `background`. Ported from
+     * `RecordsTable`'s own already-measured value (`#9b69ff` at 4%, same as
+     * `bgPurple`) — no new measurement needed, `RecordsTable`'s own
+     * `Column.enriched` predates this. */
+    enriched?: boolean;
     /** `type: "entity"` only (#501) — makes the cell's name its own click
      * target, separate from the row's own `onRowClick`: the name renders as a
      * `stopPropagation`-guarded button instead of a plain span, the same

package/dist/types/components/text/text.recipe.d.ts

@@ -1,7 +1,7 @@
 declare const spec: {
     readonly name: "text";
     readonly base: {
-        readonly display: "inline";
+        readonly verticalAlign: "baseline";
     };
     readonly variants: {
         tone: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.54.9",
+  "version": "0.54.10",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",