@crisp-ui-kit/crisp 0.54.10 → 0.55.0

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

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, ClipboardPaste, Copy, GripVertical, History, Lock, PanelRight, Plus, Search, SlidersHorizontal, X, } from "lucide-react";
 import * as React from "react";
-import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, } from "../../core/index.js";
+import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, usePrefersReducedMotion, } from "../../core/index.js";
 // crisp/#601 supersession: a deliberate exception to "DS atoms stay
 // generic; product components compose them" (AUTHORING.md) -- the row's
 // own comment affordance is `CommentCountBadge` (product/comments, #625),
@@ -15,6 +15,7 @@ import { Checkbox } from "../checkbox/index.js";
 import { ColumnCalc } from "../columncalc/index.js";
 import { ContextMenu } from "../contextmenu/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
+import { useRadioGroupKeyboard } from "../radiogroup/index.js";
 import { Select } from "../select/index.js";
 import { Spinner } from "../spinner/index.js";
 import { Switch } from "../switch/index.js";
@@ -254,6 +255,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 } = 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 ? (_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: _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: _jsx("path", { d: RATING_STAR_D }) }) }, i)) : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", className: "crisp-datatable-rating-star", "data-filled": filled ? "" : undefined, children: _jsx("path", { d: RATING_STAR_D }) }, i));
+    });
+    return onChange ? (_jsx("span", { role: "radiogroup", "aria-label": ariaLabel, className: "crisp-datatable-rating", ref: groupRef, onKeyDown: onKeyDown, children: content })) : (_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 (_jsx("span", { className: "crisp-datatable-entity-actions", children: _jsx(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 (_jsx("span", { className: "crisp-datatable-entity-actions", children: _jsx("button", { type: "button", className: "crisp-datatable-entity-action", "aria-label": openPreviewLabel, onClick: (ev) => {
+                    ev.stopPropagation();
+                    col.onOpenPreview?.(row);
+                }, children: _jsx(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
@@ -281,10 +349,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 })) : (_jsx("span", { className: "crisp-datatable-entity-name", children: e.name })), col.onOpenComments ? (_jsx("span", { className: "crisp-datatable-entity-actions", children: _jsx(CommentCountBadge, { count: col.commentCount?.(row) ?? 0, hovered: rowHovered, onOpen: () => col.onOpenComments?.(row), onOpenPreview: col.onOpenPreview ? () => col.onOpenPreview?.(row) : undefined, previewLabel: openPreviewLabel }) })) : (col.onOpenPreview && (_jsx("span", { className: "crisp-datatable-entity-actions", children: _jsx("button", { type: "button", className: "crisp-datatable-entity-action", "aria-label": openPreviewLabel, onClick: (ev) => {
-                                ev.stopPropagation();
-                                col.onOpenPreview?.(row);
-                            }, children: _jsx(PanelRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })))] }));
+                        }, children: e.name })) : (_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
@@ -304,6 +369,14 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
             // translation) can never silently repaint the chip
             return (_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 _jsx(RatingStars, { value: n, max: col.maxRating ?? 5 });
+        }
         case "url":
         case "email": {
             const text = display || asText(value);
@@ -960,14 +1033,48 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     const colAriaIndex = (i) => ariaColIndexBase + i + 1;
     const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.id));
     const someSelected = selected.size > 0 && !allSelected;
+    // crisp/#782, ported from RecordsTable's own already-shipped logic: the
+    // header checkbox speaks for the rows you can SEE. Rebuilding the whole
+    // set from `rows` (the filtered/visible set) would silently drop any
+    // selection an active filter is hiding -- add/remove only the visible
+    // rows and leave the rest of `selected` alone.
     function toggleAll() {
-        setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)));
+        const next = new Set(selected);
+        for (const r of rows) {
+            if (allSelected)
+                next.delete(r.id);
+            else
+                next.add(r.id);
+        }
+        setSelected(next);
     }
     function toggleRow(id) {
         const next = new Set(selected);
         next.has(id) ? next.delete(id) : next.add(id);
         setSelected(next);
     }
+    // crisp/#781: Shift+Click on a row checkbox selects the whole contiguous
+    // range from the last plain click (the anchor) to this row -- confirmed
+    // live, the mouse counterpart to #749's Shift+Arrow keyboard gesture,
+    // sharing the same `rowSelectAnchor` state and the same recompute-the-
+    // whole-span shape (not accumulate) so shift-clicking back toward the
+    // anchor shrinks the same way clicking away from it grows. A plain click
+    // both toggles normally AND re-anchors, so the NEXT Shift+Click extends
+    // from wherever the user last plain-clicked, matching Attio.
+    function toggleRowOrExtend(id, shiftKey) {
+        if (shiftKey && rowSelectAnchor != null) {
+            const anchorIdx = rows.findIndex((r) => r.id === rowSelectAnchor);
+            const idx = rows.findIndex((r) => r.id === id);
+            if (anchorIdx >= 0 && idx >= 0) {
+                const lo = Math.min(anchorIdx, idx);
+                const hi = Math.max(anchorIdx, idx);
+                setSelected(new Set(rows.slice(lo, hi + 1).map((r) => r.id)));
+                return;
+            }
+        }
+        setRowSelectAnchor(id);
+        toggleRow(id);
+    }
     function cycleSort(key) {
         // Clicking a header drives a single sort, as before. Multi-sort is supplied
         // by the caller through the `sort` prop (built in a sort popover).
@@ -995,8 +1102,9 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
      * `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) {
@@ -1173,6 +1281,28 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             setSelected(new Set(rows.map((rw) => rw.id)));
             return;
         }
+        // crisp/#772: Cmd/Ctrl+ArrowUp jumps the selected cell to the first row,
+        // Cmd/Ctrl+ArrowDown to the last -- confirmed live (Attio's own help
+        // drawer documents "Jump to top"/"Jump to bottom" on these exact
+        // bindings). `!e.shiftKey` guards this from stealing Cmd+Shift+Arrow,
+        // a separate gesture (#773, extend-selection-to-first/last) that falls
+        // through to the Shift+Arrow branch below untouched. Placed before that
+        // branch for the same reason: without the guard, Cmd+Shift+Arrow would
+        // still reach it (that branch doesn't check metaKey/ctrlKey either),
+        // just not do the "jump" part -- the guard here is what keeps the two
+        // gestures from fighting over the same keys.
+        if ((e.metaKey || e.ctrlKey) &&
+            !e.shiftKey &&
+            (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+            const r0 = rows.findIndex((row) => row.id === selCell.id);
+            if (r0 < 0)
+                return;
+            e.preventDefault();
+            const nr0 = e.key === "ArrowUp" ? 0 : rows.length - 1;
+            setSelCell({ id: rows[nr0].id, key: selCell.key });
+            clipboardProxyRef.current?.select();
+            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
@@ -1249,8 +1379,13 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             // 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);
             }
@@ -1319,15 +1454,21 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         }
         setEditing(null);
     }
+    const reduceMotion = usePrefersReducedMotion();
     // crisp/#577 -- keyboard nav to an off-screen (virtualized-out) cell
-    // scrolls it into the rendered window, on both axes. Column scroll-into-
-    // view runs regardless of `height` -- the horizontal scroll container (and
-    // its own virtualization) exists either way; row scroll-into-view only
-    // makes sense once `height` gives the grid an internal vertical scroll
-    // position to move. `widths` is read only indirectly, through `colWidth`'s
-    // closure over it -- biome can't see that, but a column resize while a
-    // cell is selected genuinely needs to re-run this to keep it in view, so
-    // the dependency is real even though the lint rule can't prove it.
+    // scrolls it into the rendered window, on both axes. `renderItems`/
+    // `rowOffsets` are computed unconditionally (`height == null` just makes
+    // them a no-op elsewhere, see the comment above `renderItems`), so this
+    // runs on both axes regardless of `height` too (crisp/#780 -- it used to
+    // gate the vertical half on `height != null`, on the reasoning that only
+    // `height` gives the grid an internal scroll position to move; that's
+    // wrong when the grid's own container still scrolls without an explicit
+    // height, e.g. inside a shorter ancestor, matching `RecordsTable`'s own
+    // already-shipped #257 fix, which had no such gate). `widths` is read only
+    // indirectly, through `colWidth`'s closure over it -- biome can't see
+    // that, but a column resize while a cell is selected genuinely needs to
+    // re-run this to keep it in view, so the dependency is real even though
+    // the lint rule can't prove it.
     // biome-ignore lint/correctness/useExhaustiveDependencies: widths is read via colWidth's closure, see comment above
     React.useEffect(() => {
         if (!selCell)
@@ -1335,28 +1476,37 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         const el = scrollRef.current;
         if (!el)
             return;
-        // Sets `viewport` directly from the SAME value just assigned to the
-        // real DOM property, rather than waiting for a follow-up `scroll` event
-        // to round-trip through the `onScroll` handler above -- a real browser
-        // does fire one when `scrollTop`/`scrollLeft` is set programmatically,
-        // but relying on that would make this effect's own visible result (the
+        // `el.scrollTo` rather than a direct `el.scrollTop =`/`el.scrollLeft =`
+        // assignment (crisp/#780, matching RecordsTable's own #208/#257 rule):
+        // property assignment is ALWAYS instant, so it can never honour a
+        // consumer's own `scroll-behavior: smooth` on this container; `scrollTo`
+        // defers to that CSS when no `behavior` is given, and only forces
+        // `"auto"` under `prefers-reduced-motion`, which is the one case that
+        // must win even over a host page's own smooth-scroll opt-in.
+        const scrollTo = (opts) => el.scrollTo({
+            ...opts,
+            ...(reduceMotion ? { behavior: "auto" } : null),
+        });
+        // Sets `viewport` directly from the SAME value just passed to
+        // `scrollTo`, rather than waiting for a follow-up `scroll` event to
+        // round-trip through the `onScroll` handler above -- a real browser
+        // does fire one when the scroll position changes programmatically, but
+        // relying on that would make this effect's own visible result (the
         // newly-selected cell actually rendering) depend on a second render
         // triggered from outside React's own update, which is both slower and
         // one more thing that has to be true for this to work.
-        if (height != null) {
-            const itemIndex = rowIdToItemIndex.get(selCell.id);
-            if (itemIndex != null) {
-                const itemTop = rowOffsets[itemIndex];
-                const itemBottom = itemTop + renderItems[itemIndex].height;
-                if (itemTop < el.scrollTop) {
-                    el.scrollTop = itemTop;
-                    setViewport((v) => ({ ...v, top: itemTop }));
-                }
-                else if (itemBottom > el.scrollTop + el.clientHeight) {
-                    const newTop = itemBottom - el.clientHeight;
-                    el.scrollTop = newTop;
-                    setViewport((v) => ({ ...v, top: newTop }));
-                }
+        const itemIndex = rowIdToItemIndex.get(selCell.id);
+        if (itemIndex != null) {
+            const itemTop = rowOffsets[itemIndex];
+            const itemBottom = itemTop + renderItems[itemIndex].height;
+            if (itemTop < el.scrollTop) {
+                scrollTo({ top: itemTop });
+                setViewport((v) => ({ ...v, top: itemTop }));
+            }
+            else if (itemBottom > el.scrollTop + el.clientHeight) {
+                const newTop = itemBottom - el.clientHeight;
+                scrollTo({ top: newTop });
+                setViewport((v) => ({ ...v, top: newTop }));
             }
         }
         const ci = columns.findIndex((c) => c.key === selCell.key);
@@ -1366,24 +1516,24 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                 left += colWidth(columns[i]);
             const right = left + colWidth(columns[ci]);
             if (left < el.scrollLeft) {
-                el.scrollLeft = left;
+                scrollTo({ left });
                 setViewport((v) => ({ ...v, left }));
             }
             else if (right > el.scrollLeft + el.clientWidth) {
                 const newLeft = right - el.clientWidth;
-                el.scrollLeft = newLeft;
+                scrollTo({ left: newLeft });
                 setViewport((v) => ({ ...v, left: newLeft }));
             }
         }
     }, [
         selCell,
-        height,
         columns,
         widths,
         selectable,
         rowIdToItemIndex,
         rowOffsets,
         renderItems,
+        reduceMotion,
     ]);
     const totalCols = columns.length + (selectable ? 1 : 0) + (showGrip ? 1 : 0);
     const hasSummary = columns.some((c) => c.summary || c.calc);
@@ -1757,12 +1907,33 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     }, onDragEnd: () => {
                                                         setDragRowId(null);
                                                         setDropRowId(null);
-                                                    }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), colSlots.map((slot) => {
+                                                    }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), 
+                                                        // preventDefault stops the native check/change
+                                                        // this click would otherwise also fire -- this
+                                                        // handler is the single source of truth so a
+                                                        // Shift+Click's range-select and a plain
+                                                        // click's toggle-and-re-anchor never race each
+                                                        // other (crisp/#781).
+                                                        onClick: (e) => {
+                                                            e.preventDefault();
+                                                            toggleRowOrExtend(row.id, e.shiftKey);
+                                                        }, onChange: () => { } }) }) })), colSlots.map((slot) => {
                                                 if (slot.type === "spacer") {
                                                     return (_jsx("td", { role: "presentation", "aria-hidden": "true", style: { padding: 0, border: "none" } }, `__spacer_${slot.side}`));
                                                 }
                                                 const col = columns[slot.i];
                                                 const i = slot.i;
+                                                // crisp/#779, matching RecordsTable's own #231 fix:
+                                                // column 0 is the row's own identity (its name), not
+                                                // a value it holds -- a screen reader crossing the
+                                                // row should read "Google, Employees, 182,000", not a
+                                                // bare "182,000". Spread onto every TableCell this
+                                                // column can render as (every editor branch, not just
+                                                // the default one), since the row-identity semantics
+                                                // don't depend on which editor is open.
+                                                const rowHeaderProps = i === 0
+                                                    ? { as: "th", scope: "row" }
+                                                    : undefined;
                                                 const isEditing = editing?.id === row.id && editing?.key === col.key;
                                                 const value = cellValue(col, row);
                                                 const sticky = dataStickyCol(i);
@@ -1785,13 +1956,29 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 // right). See the `isEditing` block below for their
                                                 // actual editor.
                                                 if (col.editable && col.editor === "switch") {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_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 (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_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 && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_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 (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(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 && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing &&
                                                     (col.editor === "select" ||
                                                         col.editor === "reference" ||
                                                         col.editor === "actor")) {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
                                                         // Same as the plain text editor's own cell:
                                                         // opening/using the picker must not also fire
                                                         // the row's onRowClick. Escape is handled by
@@ -1805,7 +1992,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                         onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing) {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 
                                                                 // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
                                                                 autoFocus: true, ...editorFor(col), "data-editor": editorFor(col).type, disabled: isPending, defaultValue: col.type === "date"
                                                                     ? toDateInputValue(value)
@@ -1842,13 +2029,29 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                         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 ? (_jsxs("span", { className: "crisp-datatable-cell-actions-row", children: [baseRendered, cellActions] })) : (baseRendered);
                                                 const isExpanded = expandedCell?.id === row.id &&
                                                     expandedCell?.key === col.key;
                                                 const cellContent = (_jsxs(_Fragment, { children: [!isExpanded && rendered, errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere })), isExpanded && (_jsx("div", { className: "crisp-datatable-cell-overlay", onClick: (e) => e.stopPropagation(), children: rendered }))] }));
-                                                return (_jsx(ContextMenu, { asChild: true, variant: "dark", menuLabel: cellMenuLabel, items: cellMenuItems(row, col), children: _jsx(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: col.editable
+                                                return (_jsx(ContextMenu, { asChild: true, variant: "dark", menuLabel: cellMenuLabel, items: cellMenuItems(row, col), children: _jsx(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: col.editable
                                                             ? "crisp-datatable-editable"
                                                             : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                             ? ""

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

@@ -224,6 +224,13 @@ const config = 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: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.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: ${c.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
@@ -265,6 +272,23 @@ const config = defineRecipe({
        link. */
     & .crisp-datatable-link { color: ${c.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: ${c.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/esm/components/resizablepanel/resizablepanel.js

@@ -122,6 +122,15 @@ export function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeC
         const finalWidth = rect ? Math.round(rect.width) : width;
         commitSize(finalWidth);
     }
+    // crisp/#795: double-click resets to `defaultSize`, confirmed live on
+    // Attio's own record-page divider (dragged 722px -> 924px, double-click
+    // snapped it back to exactly 722px -- its own default/initial width, not
+    // some other fixed value). Reuses `commitSize`, the same commit path a
+    // drag already uses, so persistence (`storageKey`) picks up the reset the
+    // same way it picks up a drag -- no separate reset-specific write.
+    function onHandleDoubleClick() {
+        commitSize(defaultSize);
+    }
     const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
     const panelSizeStyle = {
         width,
@@ -130,6 +139,6 @@ export function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeC
     };
     return (_jsxs("div", { ref: containerRef, className: resizablepanelRecipe({ className }), ...rest, children: [_jsx("div", { className: "crisp-resizablepanel-spacer", style: floating ? { width: 0 } : { width, minWidth: min, maxWidth: maxStyle } }), _jsxs("div", { ref: panelRef, className: "crisp-resizablepanel-panel", "data-side": side, "data-floating": floating ? "true" : "false", style: panelSizeStyle, children: [_jsx("div", { className: "crisp-resizablepanel-inner", children: children }), _jsx("div", { className: handleVariant === "column"
                             ? "crisp-resizablepanel-handle crisp-resizablepanel-handle--column"
-                            : "crisp-resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, children: handleVariant === "column" && (_jsx("span", { className: "crisp-resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
+                            : "crisp-resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, onDoubleClick: onHandleDoubleClick, children: handleVariant === "column" && (_jsx("span", { className: "crisp-resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
 }
 ResizablePanel.displayName = "ResizablePanel";

package/dist/esm/components/table/table.js

@@ -28,7 +28,14 @@ export const TableRow = React.forwardRef((props, ref) => _jsx("tr", { ref: ref,
 TableRow.displayName = "TableRow";
 export const TableHead = React.forwardRef(({ align, ...props }, ref) => _jsx("th", { ref: ref, "data-align": align, ...props }));
 TableHead.displayName = "TableHead";
-export const TableCell = React.forwardRef(({ align, ...props }, ref) => _jsx("td", { ref: ref, "data-align": align, ...props }));
+export const TableCell = React.forwardRef(({ align, as, ...props }, ref) => {
+    // Cast to "td", same as RecordsTable's own dynamic-tag precedent --
+    // `props` (which may carry `scope`) would otherwise need to satisfy
+    // both <td> and <th>'s JSX attribute types at once for a bare union
+    // element name.
+    const Cell = (as ?? "td");
+    return _jsx(Cell, { ref: ref, "data-align": align, ...props });
+});
 TableCell.displayName = "TableCell";
 export const TableCaption = React.forwardRef((props, ref) => _jsx("caption", { ref: ref, ...props }));
 TableCaption.displayName = "TableCaption";

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

@@ -50,12 +50,35 @@ export const toolbarChromeHead = (p) => `    & .${CLASS_PREFIX}${p}-toolbar { di
     & .${CLASS_PREFIX}${p}-search svg { flex-shrink: 0; }
     & .${CLASS_PREFIX}${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; width: 180px; }
     & .${CLASS_PREFIX}${p}-search input::placeholder { color: ${c.fgMuted}; }
-    & .${CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .${CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderDivider}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .${CLASS_PREFIX}${p}-tool:hover { background: ${c.bgRaised}; }
     & .${CLASS_PREFIX}${p}-tool svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .${CLASS_PREFIX}${p}-tool--active { background: ${c.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. */
+    & .${CLASS_PREFIX}${p}-tool--active { background: ${c.bgSurface}; }
     & .${CLASS_PREFIX}${p}-tool--ghost { box-shadow: none; background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); color: ${c.fgMuted}; }
     & .${CLASS_PREFIX}${p}-tool--ghost:hover { background: color-mix(in srgb, ${c.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. */
+    & .${CLASS_PREFIX}${p}-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); }
+    & .${CLASS_PREFIX}${p}-tool--dashed::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed color-mix(in srgb, ${c.fgPrimary} 6%, transparent); pointer-events: none; }
+    & .${CLASS_PREFIX}${p}-tool--dashed:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
     & .${CLASS_PREFIX}${p}-toolgroup { position: relative; display: inline-flex; }
     & .${CLASS_PREFIX}${p}-divider { flex-shrink: 0; width: 1px; height: 20px; background: ${c.borderSubtle}; }
     & .${CLASS_PREFIX}${p}-menu { position: absolute; top: calc(100% + ${c.space["1"]}); left: 0; z-index: 30; min-width: 232px; padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: ${e.floating}; display: flex; flex-direction: column; gap: ${c.space.px}; transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }