@crisp-ui-kit/crisp 0.54.9 → 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);
@@ -611,6 +684,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
@@ -1020,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) {
@@ -1198,6 +1285,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 +1353,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") {
@@ -1243,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);
             }
@@ -1260,8 +1383,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`
@@ -1779,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" ||
@@ -1834,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 }))] }));
@@ -1844,7 +2001,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 +2016,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 +2061,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
@@ -221,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
@@ -262,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; }