@crisp-ui-kit/crisp 0.54.10 → 0.54.11

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

@@ -53,6 +53,7 @@ const checkbox_1 = require("../checkbox");
 const columncalc_1 = require("../columncalc");
 const contextmenu_1 = require("../contextmenu");
 const menu_1 = require("../menu");
+const radiogroup_1 = require("../radiogroup");
 const select_1 = require("../select");
 const spinner_1 = require("../spinner");
 const switch_1 = require("../switch");
@@ -292,6 +293,73 @@ function formatCell(type, v, symbol, locale = "en-US") {
     }
     return asText(v);
 }
+// crisp/#760 -- the exact 5-point star Attio's own Rating attribute draws
+// (path traced from the live widget's own SVG, `app.attio.com`, both the
+// attribute-creation default-value picker and the grid cell render the
+// identical path). Kept as one shared `d` string rather than a lucide icon
+// so the star's silhouette matches Attio verbatim rather than an
+// approximation, and so `RatingStars` below can flip its own `fill`
+// per-star instead of drawing a whole new icon per state.
+const RATING_STAR_D = "M7.32203 2.81085C7.65793 1.97438 8.84207 1.97438 9.17797 2.81085L10.0851 5.06967C10.2281 5.42587 10.5624 5.66876 10.9454 5.69473L13.3739 5.8594C14.2733 5.92038 14.6392 7.04656 13.9475 7.62451L12.0795 9.18521C11.7849 9.43132 11.6572 9.82433 11.7509 10.1966L12.3447 12.5572C12.5647 13.4313 11.6067 14.1273 10.8433 13.6481L8.78171 12.3538C8.45661 12.1497 8.04339 12.1497 7.71829 12.3538L5.65675 13.6481C4.89333 14.1273 3.93534 13.4313 4.15526 12.5572L4.74911 10.1966C4.84276 9.82433 4.71507 9.43132 4.4205 9.18521L2.55254 7.62451C1.86081 7.04656 2.22673 5.92038 3.12606 5.8594L5.55463 5.69473C5.9376 5.66876 6.27191 5.42587 6.41495 5.06967L7.32203 2.81085Z";
+/** A star row for `type: "rating"` / `editor: "rating"` (crisp/#760).
+ * Read-only (a plain `<span>` row, no interaction) unless `onChange` is
+ * given, which renders Attio's own measured accessible shape: a
+ * `role="radiogroup"` of `role="radio"` buttons, one per star. Clicking a
+ * star sets the rating to its 1-based index; clicking the star that
+ * already equals the current value clears it to 0 -- confirmed live
+ * (rating a record 5, then clicking the 5th star again cleared it
+ * entirely rather than re-committing 5). */
+function RatingStars({ value, max = 5, onChange, "aria-label": ariaLabel, }) {
+    const [hoverIdx, setHoverIdx] = React.useState(null);
+    // The house radiogroup keyboard model (crisp's own spec check requires it
+    // on every role="radiogroup", regardless of Attio parity): arrows move
+    // focus AND select, Home/End jump to the ends. Landing on a star always
+    // SETS the rating to that star's position -- arrow nav has no "clear on
+    // re-land" toggle, that's a click-only gesture (see onClick below).
+    const { onKeyDown, groupRef } = (0, radiogroup_1.useRadioGroupKeyboard)({
+        select: (v) => onChange?.(Number(v)),
+    });
+    const stars = Array.from({ length: max }, (_, i) => i);
+    const content = stars.map((i) => {
+        // Hovering star i previews filling every star up to and including it,
+        // whether or not it's already part of the committed value -- measured:
+        // hovering the 5th star while 4 were already filled turned all 5 the
+        // hover colour, not just the would-be-new one.
+        const hovering = onChange != null && hoverIdx != null && i <= hoverIdx;
+        const filled = hovering ? true : i < value;
+        // A native <input type="radio"> can't be unchecked by re-clicking the
+        // already-selected one, which is exactly the measured behaviour
+        // (clicking the star that already equals the rating clears it to 0) --
+        // Attio's own live widget is a <button role="radio"> for the same
+        // reason.
+        return onChange ? ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": i < value, "aria-label": `${i + 1} star${i === 0 ? "" : "s"}`, "data-value": String(i + 1), className: "crisp-datatable-rating-star-btn", onMouseEnter: () => setHoverIdx(i), onMouseLeave: () => setHoverIdx(null), onClick: (e) => {
+                e.stopPropagation();
+                onChange(i + 1 === value ? 0 : i + 1);
+            }, children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", className: "crisp-datatable-rating-star", "data-filled": filled ? "" : undefined, "data-hovering": hovering ? "" : undefined, children: (0, jsx_runtime_1.jsx)("path", { d: RATING_STAR_D }) }) }, i)) : ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", className: "crisp-datatable-rating-star", "data-filled": filled ? "" : undefined, children: (0, jsx_runtime_1.jsx)("path", { d: RATING_STAR_D }) }, i));
+    });
+    return onChange ? ((0, jsx_runtime_1.jsx)("span", { role: "radiogroup", "aria-label": ariaLabel, className: "crisp-datatable-rating", ref: groupRef, onKeyDown: onKeyDown, children: content })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-rating", children: content }));
+}
+/** The preview/comments action icons a column's `onOpenPreview`/
+ * `onOpenComments`/`commentCount` produce — the exact markup `type: "entity"`
+ * already renders inline, extracted so a column that ISN'T `"entity"` (a
+ * custom `render`, or any other built-in type) can compose the same actions
+ * alongside its own content instead of the props silently doing nothing
+ * (crisp/#601 supersession follow-up: these three props used to only have
+ * an effect inside `renderTyped`'s `"entity"` case). `null` when neither
+ * prop is set, so a caller can render nothing rather than an empty
+ * flex wrapper. */
+function renderCellActions(col, row, rowHovered, openPreviewLabel) {
+    if (col.onOpenComments) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-entity-actions", children: (0, jsx_runtime_1.jsx)(comments_1.CommentCountBadge, { count: col.commentCount?.(row) ?? 0, hovered: rowHovered, onOpen: () => col.onOpenComments?.(row), onOpenPreview: col.onOpenPreview ? () => col.onOpenPreview?.(row) : undefined, previewLabel: openPreviewLabel }) }));
+    }
+    if (col.onOpenPreview) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-entity-actions", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-entity-action", "aria-label": openPreviewLabel, onClick: (ev) => {
+                    ev.stopPropagation();
+                    col.onOpenPreview?.(row);
+                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) }));
+    }
+    return null;
+}
 /** Built-in typed-cell renderer (used when a column has no custom `render`). */
 // `value` is always the RAW cell value and `display` the caller's `format`
 // output, if any. They are separate arguments on purpose: the entity and tags
@@ -319,10 +387,7 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
                             // at a DIFFERENT record than the row itself (#501).
                             ev.stopPropagation();
                             col.onEntityClick?.(row);
-                        }, children: e.name })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-entity-name", children: e.name })), col.onOpenComments ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-entity-actions", children: (0, jsx_runtime_1.jsx)(comments_1.CommentCountBadge, { count: col.commentCount?.(row) ?? 0, hovered: rowHovered, onOpen: () => col.onOpenComments?.(row), onOpenPreview: col.onOpenPreview ? () => col.onOpenPreview?.(row) : undefined, previewLabel: openPreviewLabel }) })) : (col.onOpenPreview && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-entity-actions", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-entity-action", "aria-label": openPreviewLabel, onClick: (ev) => {
-                                ev.stopPropagation();
-                                col.onOpenPreview?.(row);
-                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })))] }));
+                        }, children: e.name })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-entity-name", children: e.name })), renderCellActions(col, row, rowHovered, openPreviewLabel)] }));
         }
         case "tags": {
             // asking for a format on a tag column means "render it your way" -- show
@@ -342,6 +407,14 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
             // translation) can never silently repaint the chip
             return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
+        case "rating": {
+            // Read-only display -- `editor: "rating"` (the always-live picker) is
+            // handled separately, the same split `switch` gets (#453).
+            const n = typeof value === "number" ? value : Number(value);
+            if (!n || Number.isNaN(n))
+                return empty;
+            return (0, jsx_runtime_1.jsx)(RatingStars, { value: n, max: col.maxRating ?? 5 });
+        }
         case "url":
         case "email": {
             const text = display || asText(value);
@@ -1033,8 +1106,9 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
      * `editor: "select"`/`"reference"` open their own picker instead of this
      * native-input family, but through the SAME double-click gate (#453) --
      * see the row-render loop's `isEditing` branch for those, this function
-     * only covers the native-input-backed types. `editor: "switch"` is the
-     * one editor with no double-click gate at all (always live).
+     * only covers the native-input-backed types.
+     * `editor: "switch"`/`"rating"`/`"checkbox"` are the editors with no
+     * double-click gate at all (always live).
      */
     function editorFor(col) {
         switch (col.type) {
@@ -1287,8 +1361,13 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             // already its own live widget (#385); Enter there is a no-op, same
             // as any other non-editable cell that isn't wired to onRowClick.
             // `select`/`reference` DO have one now (like every other editor),
-            // so Enter opens them too.
-            if (columns[c]?.editable && columns[c]?.editor !== "switch") {
+            // so Enter opens them too. `rating` (#760) and `checkbox` (#761)
+            // join `switch` in the no-separate-editing-mode exception -- same
+            // always-live shape.
+            if (columns[c]?.editable &&
+                columns[c]?.editor !== "switch" &&
+                columns[c]?.editor !== "rating" &&
+                columns[c]?.editor !== "checkbox") {
                 e.preventDefault();
                 openEditing(selCell.id, selCell.key);
             }
@@ -1825,6 +1904,22 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 if (col.editable && col.editor === "switch") {
                                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
+                                                // crisp/#760: `editor: "rating"` is the same always-
+                                                // live shape as `switch` above -- clicking a star IS
+                                                // the commit gesture, confirmed live.
+                                                if (col.editable && col.editor === "rating") {
+                                                    const n = typeof value === "number" ? value : Number(value);
+                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [(0, jsx_runtime_1.jsx)(RatingStars, { "aria-label": `Edit ${col.key}`, value: Number.isNaN(n) ? 0 : n, max: col.maxRating ?? 5, onChange: (next) => commitEdit(row.id, col.key, String(next)) }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                }
+                                                // crisp/#761: `editor: "checkbox"` is a THIRD always-
+                                                // live boolean shape, distinct from `switch` --
+                                                // confirmed live against Attio's own "Checkbox"
+                                                // attribute type, which renders a plain square, not a
+                                                // toggle. Reuses crisp's own `Checkbox` (already the
+                                                // measured 16px/r6/brand-fill grid checkbox).
+                                                if (col.editable && col.editor === "checkbox") {
+                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onChange: (e) => commitEdit(row.id, col.key, String(e.currentTarget.checked)) }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                }
                                                 if (isEditing &&
                                                     (col.editor === "select" ||
                                                         col.editor === "reference" ||
@@ -1880,9 +1975,25 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                         i >= range.c0 &&
                                                         i <= range.c1);
                                                 })();
-                                                const rendered = col.render
+                                                const rowHoveredForCell = hoveredRowId === row.id;
+                                                const baseRendered = col.render
                                                     ? col.render(value, row)
-                                                    : renderTyped(col, value, avatarTone, row, col.format?.(value, row), locale, openPreviewLabel, hoveredRowId === row.id);
+                                                    : renderTyped(col, value, avatarTone, row, col.format?.(value, row), locale, openPreviewLabel, rowHoveredForCell);
+                                                // crisp/#601 supersession follow-up: `onOpenComments`/
+                                                // `onOpenPreview`/`commentCount` used to only do
+                                                // anything inside `renderTyped`'s `"entity"` case,
+                                                // which already renders its own actions inline (see
+                                                // `renderCellActions` there) -- silently dropping them
+                                                // on any OTHER type, and on a custom `render` of any
+                                                // type, since neither path went through that switch.
+                                                // This composes the same actions alongside whatever
+                                                // `rendered` is instead, decoupling the props from
+                                                // requiring `type: "entity"`.
+                                                const cellActions = col.type !== "entity" &&
+                                                    (col.onOpenComments || col.onOpenPreview)
+                                                    ? renderCellActions(col, row, rowHoveredForCell, openPreviewLabel)
+                                                    : null;
+                                                const rendered = cellActions ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-cell-actions-row", children: [baseRendered, cellActions] })) : (baseRendered);
                                                 const isExpanded = expandedCell?.id === row.id &&
                                                     expandedCell?.key === col.key;
                                                 const cellContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isExpanded && rendered, errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere })), isExpanded && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-cell-overlay", onClick: (e) => e.stopPropagation(), children: rendered }))] }));

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

@@ -227,6 +227,13 @@ const config = (0, core_1.defineRecipe)({
     & th[data-drop-after]::after { inset-inline-end: -1.5px; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .crisp-datatable-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
+    /* crisp/#601 supersession follow-up -- the same flex-row shape
+       .crisp-datatable-entity gives its own avatar+name+actions, but
+       structural only (no entity-specific colour/weight): lets
+       onOpenComments/onOpenPreview compose alongside ANY column's own
+       content (a custom render, or a non-entity built-in type), not just
+       type: "entity"'s own inline rendering. */
+    & .crisp-datatable-cell-actions-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; width: 100%; }
     /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text,
        plain hover vs rest) that Attio's underline is unconditional, not a
        hover reveal -- identical at rest and on hover: text-decoration-color
@@ -268,6 +275,23 @@ const config = (0, core_1.defineRecipe)({
        link. */
     & .crisp-datatable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-datatable-link:hover { text-decoration: underline; }
+    /* rating cell type/editor (#760) -- measured live: 16px stars on an
+       18px pitch (a 2px gap), an empty star at rgba(0,0,0,0.1), a
+       committed/filled star at brand600 (--crisp-bg-brand-solid, an exact
+       match to the measured #266df0), and a distinct hover-preview colour
+       -- rgb(33,91,196) -- that's close to but NOT brand700/bgBrandSolidPressed
+       (#1f5fd6); kept as its own literal rather than forced onto that token,
+       since the two were measured stable and different. The read-only svg
+       and the editable button's own inner svg both carry the
+       crisp-datatable-rating-star class on the svg itself (not the
+       button), so one set of fill rules covers both -- the button only
+       adds its own reset + cursor via a separate -btn class. */
+    & .crisp-datatable-rating { display: inline-flex; align-items: center; gap: 2px; }
+    & .crisp-datatable-rating-star { display: block; }
+    & .crisp-datatable-rating-star path { fill: rgba(0, 0, 0, 0.1); }
+    & .crisp-datatable-rating-star[data-filled] path { fill: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-rating-star[data-hovering] path { fill: #215bc4; }
+    & .crisp-datatable-rating-star-btn { display: inline-flex; padding: 0; margin: 0; border: none; background: none; font-family: inherit; cursor: pointer; }
     /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
        a leading 20px grip column, a 16px grip icon, and the row's own
        hairline doubling as the drop indicator (it tints toward the brand

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

@@ -53,12 +53,35 @@ const toolbarChromeHead = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-toolbar
     & .${namespace_1.CLASS_PREFIX}${p}-search svg { flex-shrink: 0; }
     & .${namespace_1.CLASS_PREFIX}${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; width: 180px; }
     & .${namespace_1.CLASS_PREFIX}${p}-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .${namespace_1.CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .${namespace_1.CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDivider}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .${namespace_1.CLASS_PREFIX}${p}-tool:hover { background: ${tokens_1.contract.bgRaised}; }
     & .${namespace_1.CLASS_PREFIX}${p}-tool svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .${namespace_1.CLASS_PREFIX}${p}-tool--active { background: ${tokens_1.contract.bgRaised}; }
+    /* crisp/#772: re-measured live on Sort with an actual sort applied --
+       an active trigger's own fill is white (bgSurface), the same as the
+       base .tool rule above now already sets; this override existed to
+       distinguish active from a base state that used to be transparent.
+       Kept explicit (not just deleted) so a future change to the base
+       rule's background can't silently change this one too. */
+    & .${namespace_1.CLASS_PREFIX}${p}-tool--active { background: ${tokens_1.contract.bgSurface}; }
     & .${namespace_1.CLASS_PREFIX}${p}-tool--ghost { box-shadow: none; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); color: ${tokens_1.contract.fgMuted}; }
     & .${namespace_1.CLASS_PREFIX}${p}-tool--ghost:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
+    /* crisp/#772 follow-up, re-measured live 2026-09-25: an EMPTY Sort/Filter
+       trigger (no sort/condition set) isn't a solid-ring chip at all -- it's
+       a dashed ::before (1px dashed, border-radius: inherit, absolutely
+       positioned inset: 0) over a barely-there fill, confirmed on Attio's
+       own empty Filter chip (its ::before border computes to exactly
+       "1px dashed rgba(0, 0, 0, 0.06)"). Once a value IS set, the trigger
+       drops the dashed pseudo and picks up the base tool's own solid ring
+       instead (the --active modifier, unchanged) -- confirmed on Sort with
+       an actual sort applied. color-mix (not the raw rgba Attio computes
+       to) so both the border and the fill flip correctly in dark mode, the
+       same reasoning --ghost above already uses. Only wired into
+       TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's
+       own Sort/Filter triggers share this same chrome function but are
+       deprecated, not touched here. */
+    & .${namespace_1.CLASS_PREFIX}${p}-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 2%, transparent); }
+    & .${namespace_1.CLASS_PREFIX}${p}-tool--dashed::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); pointer-events: none; }
+    & .${namespace_1.CLASS_PREFIX}${p}-tool--dashed:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
     & .${namespace_1.CLASS_PREFIX}${p}-toolgroup { position: relative; display: inline-flex; }
     & .${namespace_1.CLASS_PREFIX}${p}-divider { flex-shrink: 0; width: 1px; height: 20px; background: ${tokens_1.contract.borderSubtle}; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu { position: absolute; top: calc(100% + ${tokens_1.contract.space["1"]}); left: 0; z-index: 30; min-width: 232px; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px}; transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }

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

@@ -40,11 +40,41 @@ exports.TableToolbar = TableToolbar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
 const core_1 = require("../../core");
 const datepicker_1 = require("../datepicker");
 const menu_1 = require("../menu");
 const select_1 = require("../select");
 const tabletoolbar_recipe_1 = require("./tabletoolbar.recipe");
+// crisp/#766, #772: portals View settings/Import-Export into a
+// consumer-supplied target (e.g. a `<span>` rendered next to `SavedViews`,
+// or another next to the primary action) instead of this toolbar's own row,
+// when one is given -- a plain passthrough otherwise, so the default (no
+// ref given) stays byte-identical to before this existed. Kept outside the
+// main component (no closure over its state) so it's a stable reference
+// across renders.
+//
+// #772 fix: every `.crisp-tabletoolbar-*` chrome rule is nested under this
+// recipe's own root class (`& .crisp-tabletoolbar-tool { ... }`), which
+// compiles to a real CSS descendant combinator -- it needs actual DOM
+// containment under an element carrying that class. A portal target
+// rendered by the CONSUMER, outside this component's own root `<div>`,
+// breaks that containment even though React still considers the portaled
+// content a child for event/context purposes: the classes were still
+// applied, they just matched nothing, so the buttons rendered as unstyled
+// native chrome. Same failure class `select.recipe.ts`'s own doc comment
+// describes for its listbox portal to `document.body`. Fixed the same way
+// `ToolbarTool` (below) already lets a bare `.crisp-tabletoolbar-tool` be
+// used outside an actual `TableToolbar` tree: wrap the portaled content in
+// its own `tabletoolbarRecipe()`-classed span. `display: contents` on that
+// recipe's own base rule means the wrapper contributes no box of its own,
+// so it changes nothing about layout -- only re-establishes the selector
+// match.
+function ViewBarSlot({ target, children, }) {
+    return target
+        ? (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("span", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)(), children: children }), target)
+        : children;
+}
 // #592: shared by every direction-bearing ChevronRight usage below (the
 // field picker's own disclosure chevron, a flattened search result's
 // breadcrumb separator, and a filter chip's own breadcrumb separator) so
@@ -338,7 +368,7 @@ function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort = true, showViewSettings = true, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }) {
+function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort = true, showViewSettings = true, viewSettingsRef, importExportRef, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }) {
     // crisp/#471: an explicit prop always wins; missing, it reads the nearest
     // CrispMessagesProvider's translation of the English default below, or
     // that default itself with no provider — unchanged from before this
@@ -408,6 +438,19 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
             setShownKeysState(next);
         onShownKeysChange?.(next);
     };
+    // crisp/#766: a ref's `.current` is null during THIS render (a ref only
+    // attaches during commit, and the consumer's own target element may not
+    // even exist in the DOM yet on first paint) -- an effect after mount picks
+    // it up and re-renders once, the same one-render-late pattern the floating
+    // popovers elsewhere in this file already use for a portal target.
+    const [viewSettingsTarget, setViewSettingsTarget] = React.useState(null);
+    React.useEffect(() => {
+        setViewSettingsTarget(viewSettingsRef?.current ?? null);
+    }, [viewSettingsRef]);
+    const [importExportTarget, setImportExportTarget] = React.useState(null);
+    React.useEffect(() => {
+        setImportExportTarget(importExportRef?.current ?? null);
+    }, [importExportRef]);
     const [openMenu, setOpenMenu] = React.useState(null);
     const [dragSort, setDragSort] = React.useState(null);
     const [filterQuery, setFilterQuery] = React.useState("");
@@ -641,16 +684,23 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     // worse than an imperfect word order); `crispMessages` rather than a
     // second `useCrispMessage` call, since this only fires on the branch that
     // needs it.
+    // crisp/#788: "Sorted by" and the field name are NOT a font-weight split
+    // (both measure 500/medium live) -- the difference is colour/opacity only:
+    // "Sorted by" at 63% black, the field name at full-strength near-black
+    // (rgb(16,17,18)). The "+N" suffix is smaller (12px vs 14px) and its own
+    // mid-grey (rgb(80,81,85)), not muted-63%-black either -- three distinct
+    // treatments, not two. `sortField` isolates the resolved label so the
+    // default (non-`sortTriggerLabel`) render can wrap each part in its own
+    // span; `sortedLabel` stays a single string for the `sortTriggerLabel`
+    // escape hatch (a caller-supplied formatter can't be split, by definition)
+    // and the empty-state `sortLabel`.
+    const sortField = resolveColumnPath(sortColumns, sorts[0]?.key ?? "").at(-1)?.label;
     const sortedLabel = sortTriggerLabel
         ? sortTriggerLabel(sorts, sortColumns)
         : sorts.length
-            ? `${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}` : ""}`
+            ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortField}${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) => {
+    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" : " crisp-tabletoolbar-tool--dashed"}`, 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" }), sortTriggerLabel || !sorts.length ? (sortedLabel) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-sorted-prefix", children: crispMessages["Sorted by"] ?? "Sorted by" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-sorted-field", children: sortField }), sorts.length > 1 && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sorted-count", children: [" ", "+", sorts.length - 1] }))] }))] }), 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)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -687,7 +737,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                                     label: ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] })), showSort && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), (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--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => {
+                                            ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] })), showSort && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-tabletoolbar-tool${activeFilters ? " crisp-tabletoolbar-tool--active" : " crisp-tabletoolbar-tool--dashed"}`, onClick: () => {
                                 setFieldPickerPath([]);
                                 setOpenMenu(openMenu === "filter" ? null : "filter");
                             }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
@@ -786,43 +836,43 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                                 }, children: label }, label))) })] })) : ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", type: col?.type === "number" ? "number" : "text", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                     // biome-ignore lint/a11y/noAutofocus: focus the value field
                                     autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })) }))] }, cond.id));
-                }), showViewSettings && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), showViewSettings && ((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--ghost", onClick: () => {
-                                if (openMenu === "viewsettings") {
-                                    setOpenMenu(null);
-                                }
-                                else {
-                                    setAddingAttribute(false);
-                                    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.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: () => {
-                                            if (dragAttr !== null)
-                                                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);
-                                                setFieldPickerPath([]);
-                                                setFilterQuery("");
-                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), (onImportCsv ||
+                }), showViewSettings && !viewSettingsTarget && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), showViewSettings && ((0, jsx_runtime_1.jsx)(ViewBarSlot, { target: viewSettingsTarget, children: (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: () => {
+                                    if (openMenu === "viewsettings") {
+                                        setOpenMenu(null);
+                                    }
+                                    else {
+                                        setAddingAttribute(false);
+                                        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, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "viewsettings" &&
+                                (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: () => {
+                                                if (dragAttr !== null)
+                                                    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);
+                                                    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: () => {
-                                        onImportCsv();
-                                        setOpenMenu(null);
-                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), importCsvLabel] })), onImportCsv && (onExportCsv || onExportExcel) && ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-tabletoolbar-menu-sep" })), onExportCsv && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
-                                        onExportCsv();
-                                        setOpenMenu(null);
-                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), exportCsvLabel] })), onExportExcel && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
-                                        onExportExcel();
-                                        setOpenMenu(null);
-                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), exportExcelLabel] })), importExportHelpHref &&
-                                    (onImportCsv || onExportCsv || onExportExcel) && ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-tabletoolbar-menu-sep" })), importExportHelpHref && ((0, jsx_runtime_1.jsxs)("a", { className: "crisp-tabletoolbar-menu-item", role: "menuitem", href: importExportHelpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 15, strokeWidth: 1.75 }), learnImportExportLabel] }))] }))] })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-spacer" }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
+                    importExportHelpHref) && ((0, jsx_runtime_1.jsx)(ViewBarSlot, { target: importExportTarget, children: (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: () => {
+                                            onImportCsv();
+                                            setOpenMenu(null);
+                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), importCsvLabel] })), onImportCsv && (onExportCsv || onExportExcel) && ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-tabletoolbar-menu-sep" })), onExportCsv && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                            onExportCsv();
+                                            setOpenMenu(null);
+                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), exportCsvLabel] })), onExportExcel && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                            onExportExcel();
+                                            setOpenMenu(null);
+                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), exportExcelLabel] })), importExportHelpHref &&
+                                        (onImportCsv || onExportCsv || onExportExcel) && ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-tabletoolbar-menu-sep" })), importExportHelpHref && ((0, jsx_runtime_1.jsxs)("a", { className: "crisp-tabletoolbar-menu-item", role: "menuitem", href: importExportHelpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 15, strokeWidth: 1.75 }), learnImportExportLabel] }))] }))] }) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-spacer" }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }
 /**
  * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone

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

@@ -74,14 +74,21 @@ const filterChipChrome = `
     & .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"]}; }
     & .crisp-tabletoolbar-datepop-preset { height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.chip}; background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); }`;
-// #595: the Import/Export trigger — measured live, `app.attio.com`'s own
-// view bar: `28px` tall, `radius.md` (8px), background `bgSurfaceMuted`
-// (`rgb(246,247,247)`, exact match) and `elevation.field`'s exact 3-layer
-// shadow (`inset 0 0 0 1px transparent, 0 0 2px rgba(28,40,64,.18), 0 1px 3px
-// rgba(0,0,0,.04)`) — a "raised chrome button" distinct from Sort/Filter/View
-// settings' plain ringed `.tool` (no background, no elevation shadow), and
-// the only trigger of the four with a trailing chevron (2 icons total,
-// confirmed live). Overrides `.tool`'s own base background/shadow by cascade
+// #595, corrected #772 (re-measured live 2026-09-25): the view bar's raised
+// trigger chrome — `app.attio.com`'s own view bar: `28px` tall, `radius.md`
+// (8px), background `bgSurface` (white, `rgb(255,255,255)` exact match — the
+// #595 pass originally measured `bgSurfaceMuted`/`rgb(246,247,247)`, which
+// re-measuring live this pass shows was wrong, not a later Attio change: ALL
+// THREE of the switcher, View settings and Import/Export read pure white)
+// and `elevation.field`'s exact 3-layer shadow (`inset 0 0 0 1px transparent,
+// 0 0 2px rgba(28,40,64,.18), 0 1px 3px rgba(0,0,0,.04)`) — distinct from
+// Sort/Filter's plain ringed `.tool` (no elevation shadow; see `--dashed` in
+// `tabletoolbar.chrome.ts` for their own OWN empty-state chrome). Originally
+// built for Import/Export alone ("the only trigger... with a trailing
+// chevron") — that was also wrong: View settings and the view switcher both
+// carry one too, confirmed live (3 children each: icon, label, chevron).
+// Now shared by View settings' own trigger (`tabletoolbar.tsx`) as well as
+// Import/Export's. Overrides `.tool`'s own base background/shadow by cascade
 // order (this block is appended after `toolbarChromeBody`, which defines
 // them), the same way `.tool--ghost` already does. `border`/`font-family`/
 // `cursor` are repeated here too, even though `.tool`'s own base rule (in
@@ -91,7 +98,18 @@ const filterChipChrome = `
 // behind `chrome.ts`'s function call is invisible to it; harmless repeats,
 // not a real gap.
 const importExportChrome = `
-    & .crisp-tabletoolbar-tool--raised { border: none; background: ${tokens_1.contract.bgSurfaceMuted}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; cursor: pointer; }`;
+    & .crisp-tabletoolbar-tool--raised { border: none; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; cursor: pointer; }`;
+// crisp/#788: the Sort trigger's own "Sorted by X (+N)" label, measured live
+// against Attio's own chip -- three parts, not one flat string, and NOT a
+// font-weight split (all three read 500/medium): "Sorted by" is muted (63%
+// black), the resolved field name is full-strength near-black, and a
+// trailing "+N" (when more than one sort is active) is both smaller (12px
+// vs 14px) and its own mid-grey, distinct from the "Sorted by" muted tone.
+// TableToolbar-only, same reasoning as `filterChipChrome` above (RecordsTable
+// keeps its own older Sort label markup, not touched here).
+const sortedLabelChrome = `
+    & .crisp-tabletoolbar-sorted-prefix { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-tabletoolbar-sorted-count { font-size: ${tokens_1.contract.text.sm}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 73%, transparent); }`;
 // The table toolbar, measured: 28px controls, the Sort/Filter buttons and
 // the menus they open, sort-condition rows, and the filter chips. The chrome
 // itself lives in ./tabletoolbar.chrome.ts because RecordsTable renders the
@@ -110,6 +128,7 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeHead)("tabletoolbar")}
 ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("tabletoolbar")}
 ${filterChipChrome}
 ${importExportChrome}
+${sortedLabelChrome}
     ${core_1.rtlFlipCss}
   `,
 });

package/dist/cjs/product/recordpage/column.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagTone = tagTone;
+// deterministic pastel colour per tag value (a select option keeps its colour)
+const TAG_TONES = [
+    "brand",
+    "success",
+    "warning",
+    "danger",
+    "purple",
+    "cyan",
+    "orange",
+];
+function tagTone(t) {
+    let h = 0;
+    for (let i = 0; i < t.length; i++)
+        h = (h * 31 + t.charCodeAt(i)) >>> 0;
+    return TAG_TONES[h % TAG_TONES.length];
+}