@crisp-ui-kit/crisp 0.54.9 → 0.54.11

package/dist/cjs/product/recordpage/test-fixtures.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testRows = exports.testColumns = void 0;
+const lucide_react_1 = require("lucide-react");
+// Moved here from product/recordstable/recordstable.tsx's `defaultColumns`/
+// `defaultRows` (crisp#786): RecordsTable is deprecated and its whole
+// directory is being deleted, but RecordPage's own tests (and the shared
+// RTL-keyboard-convention tests that live alongside them) still need a
+// real, 12-column-deep dataset to exercise "a field past the first 5 needs
+// View all values" and similar shape-dependent assertions. Simplified from
+// the original: no baked-in company-logo data URIs (nothing here asserts on
+// avatars), a plain favicon URL instead.
+exports.testColumns = [
+    { key: "company", label: "Company", type: "entity", icon: lucide_react_1.Building2 },
+    { key: "domain", label: "Domain", type: "url", icon: lucide_react_1.Globe },
+    {
+        key: "categories",
+        label: "Categories",
+        type: "tags",
+        icon: lucide_react_1.Tag,
+        width: 240,
+    },
+    {
+        key: "employees",
+        label: "Employees",
+        type: "number",
+        icon: lucide_react_1.Users,
+        width: 120,
+    },
+    { key: "location", label: "Location", type: "text", icon: lucide_react_1.MapPin },
+    { key: "stage", label: "Stage", type: "tags", icon: lucide_react_1.TrendingUp, width: 150 },
+    { key: "ceo", label: "CEO", type: "text", icon: lucide_react_1.Briefcase, width: 170 },
+    { key: "twitter", label: "Twitter", type: "url", icon: lucide_react_1.AtSign, width: 150 },
+    {
+        key: "followers",
+        label: "Followers",
+        type: "number",
+        icon: lucide_react_1.Users,
+        width: 120,
+    },
+    { key: "linkedin", label: "LinkedIn", type: "url", icon: lucide_react_1.Globe, width: 180 },
+    {
+        key: "founded",
+        label: "Founded",
+        type: "date",
+        icon: lucide_react_1.Calendar,
+        width: 110,
+    },
+    { key: "arr", label: "Est. ARR", type: "number", icon: lucide_react_1.Hash, width: 130 },
+];
+// biome-ignore format: one row per line keeps the wide demo dataset readable
+exports.testRows = [
+    { id: "google", company: { name: "Google", avatar: "https://www.google.com/s2/favicons?domain=google.com&sz=64" }, domain: "google.com", categories: ["Search", "Ads", "Cloud", "AI", "Android", "Maps", "Hardware", "Workspace", "Chrome"], employees: 182000, location: "Mountain View, CA", stage: ["Public"], ceo: "Sundar Pichai", twitter: "twitter.com/google", followers: 29800000, linkedin: "linkedin.com/company/google", founded: "1998", arr: 307000000000 },
+    { id: "stripe", company: { name: "Stripe", avatar: "https://www.google.com/s2/favicons?domain=stripe.com&sz=64" }, domain: "stripe.com", categories: ["Payments", "Fintech"], employees: 8000, location: "San Francisco, CA", stage: ["Series I"], ceo: "Patrick Collison", twitter: "twitter.com/stripe", followers: 1200000, linkedin: "linkedin.com/company/stripe", founded: "2010", arr: 16000000000 },
+];

package/dist/cjs/product/recordstable/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.recordstableRecipe = exports.tagTone = exports.RecordsTable = exports.defaultRows = exports.defaultColumns = exports.useEditableField = exports.editableInputType = void 0;
-var editable_field_1 = require("./editable-field");
+var editable_field_1 = require("../recordpage/editable-field");
 Object.defineProperty(exports, "editableInputType", { enumerable: true, get: function () { return editable_field_1.editableInputType; } });
 Object.defineProperty(exports, "useEditableField", { enumerable: true, get: function () { return editable_field_1.useEditableField; } });
 var recordstable_1 = require("./recordstable");

package/dist/cjs/product/recordstable/recordstable.js

@@ -552,6 +552,11 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
  * editing (double-click a text/number/url/date cell), add-row and add-column,
  * and a floating bulk-action bar (delete / deselect) when rows are selected.
  * Selection can be controlled via `selectedIds`/`onSelectionChange`.
+ *
+ * @deprecated Reach for `DataTable` instead — a single Attio-exact records
+ * grid replaces the separate table variants. `RecordsTable` has no
+ * consumers left (checked GRC and the fms/Mercury admin) and is slated for
+ * removal in a future minor.
  */
 function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, rows: rowsProp = exports.defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", emptyStateExtra, className, ...rest }) {
     const [cols, setCols] = React.useState(columnsProp);

package/dist/cjs/product/savedviews/savedviews.recipe.js

@@ -26,24 +26,26 @@ const config = (0, core_1.defineRecipe)({
     position: relative; display: inline-flex; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
-       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
-       screenshot/anti-aliasing noise, not a second real colour. Reusing the
-       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
-       already-established dark-mode fill for free instead of a light-only
-       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
-       wrong (a flat colour that stayed visible where the reference had
-       none) — this is the opposite risk (a token that already flips per
-       theme, applied to the closest measured match). */
+    /* crisp/#772 follow-up, re-measured live 2026-09-25 in the trigger's
+       actual position (Attio's real view bar, next to View settings --
+       fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255)
+       exact) with elevation.field's 3-layer shadow, the same raised
+       chrome View settings and Import/Export both carry
+       (tabletoolbar.recipe.ts's own --raised, not reused here directly
+       since this is a separate recipe/component, but the identical measured
+       values). Supersedes the original #555 measurement (rgb(246,247,247),
+       reused as bgRaised -- a flat grey fill with no shadow at all), which
+       was wrong: this trigger was never re-checked once it moved into its
+       real view-bar position. */
     & .crisp-savedviews-trigger {
       box-sizing: border-box; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]};
       height: ${tokens_1.contract.size.row}; margin: 0; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1.5"]};
-      border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgRaised};
+      border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field};
       font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary};
       cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
     }
     & .crisp-savedviews-trigger:hover,
-    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgRaised}); }
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); }
     & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; }
     & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }

package/dist/cjs/product/taskstable/taskstable.js

@@ -14,6 +14,11 @@ function Cell({ flex, className, children, }) {
  * taskstable.recipe.ts) with a typed column/cell layer: a title+checkbox
  * row grouped into due-date sections, a due-date cell that goes red past
  * due, and consumer-supplied record/assignee chip slots.
+ *
+ * @deprecated Reach for `DataTable`'s `groupBy` instead — a single
+ * Attio-exact records grid replaces the separate table variants.
+ * `TasksTable` has no consumers left (checked GRC and the fms/Mercury
+ * admin) and is slated for removal in a future minor.
  */
 function TasksTable({ columns, groups, leading, trailing, emptyLabel: emptyLabelProp, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, className, ...rest }) {
     const crispMessages = (0, core_1.useCrispMessages)();

package/dist/datatable.css

@@ -90,6 +90,9 @@
     & tbody tr[data-selected] td { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface))); }
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
+    /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%, composited OVER whatever row-state background the cell already has (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
+    & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--crisp-bg-purple) 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */
@@ -149,6 +152,10 @@
     & 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: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-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: var(--crisp-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
        is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */
@@ -180,6 +187,16 @@
     /* url/email cell types (#654) -- same measured values as RecordsTable's own .crisp-recordstable-link, which this mirrors: no underline at rest, underline on hover, own-colour text rather than a browser-blue link. */
     & .crisp-datatable-link { color: var(--crisp-fg-primary); 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: var(--crisp-bg-brand-solid); }
+    & .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
        colour as the active drop target). The affordance + geometry are

package/dist/datatable.layered.css

@@ -91,6 +91,9 @@
     & tbody tr[data-selected] td { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface))); }
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
+    /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%, composited OVER whatever row-state background the cell already has (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
+    & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--crisp-bg-purple) 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */
@@ -150,6 +153,10 @@
     & 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: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-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: var(--crisp-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
        is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */
@@ -181,6 +188,16 @@
     /* url/email cell types (#654) -- same measured values as RecordsTable's own .crisp-recordstable-link, which this mirrors: no underline at rest, underline on hover, own-colour text rather than a browser-blue link. */
     & .crisp-datatable-link { color: var(--crisp-fg-primary); 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: var(--crisp-bg-brand-solid); }
+    & .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
        colour as the active drop target). The affordance + geometry are

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

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

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

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