@crisp-ui-kit/crisp 0.54.9 → 0.54.11

package/dist/tabletoolbar.css

@@ -7,12 +7,29 @@
     & .crisp-tabletoolbar-search svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
     & .crisp-tabletoolbar-search input::placeholder { color: var(--crisp-fg-muted); }
-    & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-tool:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-tabletoolbar-tool--active { background: var(--crisp-bg-raised); }
+    /* 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. */
+    & .crisp-tabletoolbar-tool--active { background: var(--crisp-bg-surface); }
     & .crisp-tabletoolbar-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-tool--ghost:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 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. */
+    & .crisp-tabletoolbar-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); }
+    & .crisp-tabletoolbar-tool--dashed::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); pointer-events: none; }
+    & .crisp-tabletoolbar-tool--dashed:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
     & .crisp-tabletoolbar-toolgroup { position: relative; display: inline-flex; }
     & .crisp-tabletoolbar-divider { flex-shrink: 0; width: 1px; height: 20px; background: var(--crisp-border-subtle); }
     & .crisp-tabletoolbar-menu { position: absolute; top: calc(100% + var(--crisp-space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); display: flex; flex-direction: column; gap: var(--crisp-space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
@@ -105,12 +122,27 @@
     & .crisp-tabletoolbar-fcond-seg--val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-tabletoolbar-fcond-seg--kebab { background: var(--crisp-bg-surface); justify-content: center; width: 28px; padding: 0; border-radius: 0 var(--crisp-radius-md) var(--crisp-radius-md) 0; color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: var(--crisp-fg-primary); }
+    /* #754: the sort row's own field trigger, replacing a plain Select
+       with the same nested-drill-down popover Filter's field picker already has — reuses Select's own already-measured trigger chrome
+       verbatim (its class is scoped under Select's own root class, so it can't be reused as a bare class name outside an actual Select tree;
+       these values are copied, not re-measured). */
+    & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
+    & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); width: 100%; min-width: 0; margin: 0; padding: 0 var(--crisp-space-1-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabletoolbar-sort-field-trigger:hover { background: var(--crisp-bg-raised); }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
+    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
     & .crisp-tabletoolbar-datepop { width: 300px; }
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
     & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
-    & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
+
+    & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
+
+    & .crisp-tabletoolbar-sorted-prefix { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-tabletoolbar-sorted-count { font-size: var(--crisp-text-sm); color: color-mix(in srgb, var(--crisp-fg-primary) 73%, transparent); }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 

package/dist/tabletoolbar.layered.css

@@ -8,12 +8,29 @@
     & .crisp-tabletoolbar-search svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
     & .crisp-tabletoolbar-search input::placeholder { color: var(--crisp-fg-muted); }
-    & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-tool:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-tabletoolbar-tool--active { background: var(--crisp-bg-raised); }
+    /* 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. */
+    & .crisp-tabletoolbar-tool--active { background: var(--crisp-bg-surface); }
     & .crisp-tabletoolbar-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-tool--ghost:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 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. */
+    & .crisp-tabletoolbar-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); }
+    & .crisp-tabletoolbar-tool--dashed::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); pointer-events: none; }
+    & .crisp-tabletoolbar-tool--dashed:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
     & .crisp-tabletoolbar-toolgroup { position: relative; display: inline-flex; }
     & .crisp-tabletoolbar-divider { flex-shrink: 0; width: 1px; height: 20px; background: var(--crisp-border-subtle); }
     & .crisp-tabletoolbar-menu { position: absolute; top: calc(100% + var(--crisp-space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); display: flex; flex-direction: column; gap: var(--crisp-space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
@@ -106,12 +123,27 @@
     & .crisp-tabletoolbar-fcond-seg--val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-tabletoolbar-fcond-seg--kebab { background: var(--crisp-bg-surface); justify-content: center; width: 28px; padding: 0; border-radius: 0 var(--crisp-radius-md) var(--crisp-radius-md) 0; color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: var(--crisp-fg-primary); }
+    /* #754: the sort row's own field trigger, replacing a plain Select
+       with the same nested-drill-down popover Filter's field picker already has — reuses Select's own already-measured trigger chrome
+       verbatim (its class is scoped under Select's own root class, so it can't be reused as a bare class name outside an actual Select tree;
+       these values are copied, not re-measured). */
+    & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
+    & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); width: 100%; min-width: 0; margin: 0; padding: 0 var(--crisp-space-1-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabletoolbar-sort-field-trigger:hover { background: var(--crisp-bg-raised); }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
+    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
     & .crisp-tabletoolbar-datepop { width: 300px; }
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
     & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
-    & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
+
+    & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
+
+    & .crisp-tabletoolbar-sorted-prefix { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-tabletoolbar-sorted-count { font-size: var(--crisp-text-sm); color: color-mix(in srgb, var(--crisp-fg-primary) 73%, transparent); }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 

package/dist/text.css

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

package/dist/text.layered.css

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

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

@@ -37,7 +37,12 @@ export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "dat
  * workspace -- this type is display-only for now; editing still falls
  * through to the plain-text editor every other non-number/date type
  * gets, not a dedicated one (see #597 for when that's measured). */
- | "email";
+ | "email"
+/** A star row (crisp/#760) -- Attio's own "Rating" attribute type,
+ * confirmed live: 5 filled/empty 5-point stars, `maxRating` stars total
+ * (default 5). Read-only display without `editor: "rating"`; see that
+ * prop for the always-live editable version. */
+ | "rating";
 export type DataTableColumn<T> = {
     key: string;
     /** Truncates with an ellipsis when it's wider than the column (#534: a
@@ -63,6 +68,10 @@ export type DataTableColumn<T> = {
     };
     /** Currency symbol for `currency` columns (default "$"). */
     symbol?: string;
+    /** Star count for `type: "rating"` / `editor: "rating"` (default 5 --
+     * Attio's own scale wasn't independently varied beyond the default in
+     * the measured workspace, #760). */
+    maxRating?: number;
     /** Allow drag-to-resize on this column (default true). */
     resizable?: boolean;
     /** Tone overrides for `status`/`tags` values (else a stable colour per value). */
@@ -94,8 +103,26 @@ export type DataTableColumn<T> = {
      * empty-search state reads "No users" rather than `Select`'s own
      * generic "No results" — both still overridable the normal way.
      * Otherwise identical to `reference`: same `refOptions` shape, same
-     * `onCreateReference`/`createLabel` "Create X" row. */
-    editor?: "select" | "switch" | "reference" | "actor";
+     * `onCreateReference`/`createLabel` "Create X" row.
+     *
+     * `"rating"` (crisp/#760) is the other always-live exception, same
+     * category as `"switch"`: confirmed live, a single click on any star
+     * commits immediately (no double-click gate, no separate rest/edit
+     * display) — clicking the star that already equals the current value
+     * clears it to 0/empty rather than re-setting it. Reads/writes
+     * `maxRating` stars (default 5).
+     *
+     * `"checkbox"` (crisp/#761) is a THIRD, distinct boolean rendering from
+     * `"switch"` — confirmed live against Attio's own "Checkbox" attribute
+     * type (Settings → Data → Lists → Attributes → Create attribute), which
+     * renders a plain checked/unchecked square, not a toggle pill; `"switch"`
+     * was never actually measured against that surface (no cited source —
+     * see #761's own investigation) and stays as-is for a genuine toggle
+     * field. Always-live like `"switch"`/`"rating"`; renders crisp's own
+     * `Checkbox` component (already measured 16px/r6/brand-fill from the
+     * grid's own row-selection checkbox — this is the SAME visual, not a
+     * new one). */
+    editor?: "select" | "switch" | "reference" | "actor" | "rating" | "checkbox";
     /** Options for `editor: "select"` (value/label, an optional `color` a
      * caller's own `render` can read) — same shape as RecordsTable's
      * `Column.options` for its `status` picker. */
@@ -178,6 +205,14 @@ export type DataTableColumn<T> = {
      * native-copy path writes nothing to the clipboard, and its Clear-value
      * item is disabled (there is nothing editable to clear). */
     readOnly?: boolean;
+    /** Marks the column's values as AI-enriched (crisp/#758) — every cell
+     * gets a full-bleed purple wash, composited OVER whatever row-state
+     * background the cell already has (hover, selected), which is why it's
+     * an overlay rather than a plain `background`. Ported from
+     * `RecordsTable`'s own already-measured value (`#9b69ff` at 4%, same as
+     * `bgPurple`) — no new measurement needed, `RecordsTable`'s own
+     * `Column.enriched` predates this. */
+    enriched?: boolean;
     /** `type: "entity"` only (#501) — makes the cell's name its own click
      * target, separate from the row's own `onRowClick`: the name renders as a
      * `stopPropagation`-guarded button instead of a plain span, the same

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

@@ -192,6 +192,31 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
      * the filter chips from View settings is dropped along with it.
      */
     showViewSettings?: boolean;
+    /**
+     * Relocates the View settings trigger (and its popover) into a
+     * consumer-supplied element instead of this toolbar's own row
+     * (your-moon/crisp#766) — a plain DOM ref, e.g. a `<span ref={...} />`
+     * rendered right next to `SavedViews`' own trigger. Measured live: Attio's
+     * view bar puts the view switcher and View settings adjacent, then a
+     * flexible gap, then Import/Export immediately before the primary "+ New"
+     * action (see `importExportRef`, a SEPARATE ref — the two controls sit
+     * far apart, not next to each other). The row below holds only Sort and
+     * Filter. Neither `SavedViews` nor `TableToolbar` renders the OTHER
+     * component's pieces itself — they stay two separate components, each
+     * still owning its own state — this ref is a portal target, not a new
+     * cross-component API. Omit it (the default) and View settings renders
+     * exactly where it always has, inline in this toolbar's own row,
+     * unchanged — existing consumers see no difference at all.
+     */
+    viewSettingsRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * Same relocation, for the Import/Export trigger (and its menu) — a
+     * separate ref from `viewSettingsRef` because Attio's own layout puts
+     * Import/Export far from View settings, immediately before the primary
+     * action instead of next to the view switcher. Omit it and Import/Export
+     * renders exactly where it always has, inline in this toolbar's own row.
+     */
+    importExportRef?: React.RefObject<HTMLElement | null>;
     /**
      * The full set of attributes View settings offers — every attribute on
      * the object, shown or not. Defaults to `columns`. Omit both, along with
@@ -288,7 +313,7 @@ export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (ro
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-export declare function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort, showViewSettings, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }: TableToolbarProps): React.JSX.Element;
+export declare function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort, showViewSettings, viewSettingsRef, importExportRef, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }: TableToolbarProps): React.JSX.Element;
 export type ToolbarToolProps = React.ComponentPropsWithoutRef<"button"> & {
     /** Drawn the way Sort/Filter are once a condition is set (#399). */
     active?: boolean;

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

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

package/dist/types/product/recordpage/column.d.ts

@@ -0,0 +1,112 @@
+import type * as React from "react";
+import type { EditableOption } from "./editable-field";
+type IconType = React.ComponentType<{
+    size?: number;
+    strokeWidth?: number;
+}>;
+export type ColumnType = "entity" | "text" | "tags" | "number" | "url" | "date" | "currency" | "status" | "reference";
+export type StatusOption = {
+    value: string;
+    label: string;
+    color: string;
+};
+export type ReferenceOption = {
+    value: string;
+    label: string;
+    avatar?: string;
+};
+export type EntityValue = {
+    name: string;
+    avatar?: string;
+};
+export type Row = {
+    id: string;
+} & Record<string, any>;
+export type Column = {
+    key: string;
+    label: string;
+    type?: ColumnType;
+    /** Mark the column's values as AI-enriched — tints the cells the way
+     *  enriched values are washed (#9b69ff at 4%). */
+    enriched?: boolean;
+    icon?: IconType;
+    /** This column's values reference another type of record (e.g. a
+     * "Primary location" column of Country records). When the header
+     * overflows, its `Tooltip` appends this type's icon and name after the
+     * label and switches to Attio's second, reference-column tooltip chrome
+     * (crisp#580) — distinct from `icon` above (the column's own field-type
+     * glyph shown in the header row) and from `refOptions` (the picker's
+     * selectable values). Omit for a plain column; the tooltip stays
+     * label-only (#534). */
+    referencedType?: {
+        icon: IconType;
+        label: string;
+    };
+    width?: number;
+    /** Currency symbol for `currency` columns (default "$"). */
+    symbol?: string;
+    /** Choices for a `status` column (each a coloured dot + label). */
+    options?: StatusOption[];
+    /** Choices for a `reference` column (a searchable record picker). */
+    refOptions?: ReferenceOption[];
+    /** Adds a trailing "Create {createLabel}" row to the picker (Attio's own
+     * always has one) — rendered only when this is provided. Picking it hands
+     * back the picker's current search text, e.g. to open a create flow
+     * pre-seeded with it. */
+    onCreateReference?: (query: string) => void;
+    /** The object noun in "Create {createLabel}" (Attio: "Create Person").
+     * Only used with `onCreateReference`; defaults to "record". */
+    createLabel?: string;
+    /**
+     * Full custom cell content — an escape hatch for a display crisp can't
+     * express via `type` (sign-coloured currency, a maskable amount, a custom
+     * badge, …). Precedence is **`render` > `format` > the built-in `type`
+     * renderer**: when `render` is set it is the *only* thing drawn in the
+     * cell, replacing whatever `type` would normally render.
+     *
+     * Interaction contract for a `render` column: it keeps every grid chrome —
+     * row height, hairlines, padding, hover/selected tint, the cell focus ring,
+     * shift-click range select, the right-click row menu — but is **never**
+     * inline-editable and never shows a `type` picker (status/reference/date/
+     * tags), because crisp has no way to write a value back into custom
+     * content. Use `format` instead if the column should stay editable.
+     *
+     * ⌘C copies `format(value, row)` when the column also has one, otherwise
+     * the raw value stringified the same way a plain column would — never a
+     * serialization of the rendered node. Sort, filter, and the footer
+     * aggregation all read `row[column.key]` directly and never call `render`.
+     */
+    render?: (value: unknown, row: Row) => React.ReactNode;
+    /**
+     * Display-only string transform. Unlike `render`, a `format` column keeps
+     * the built-in `type` renderer's chrome (a `currency`/`number` column stays
+     * right-aligned in its numeric span; `text`/`url`/`date`/the default case
+     * keep their own wrapper) — `format`'s return value simply replaces the
+     * text that renderer would otherwise show. `format` fully owns that text,
+     * so a `currency` column's `format` should include its own symbol/masking
+     * if it wants one (the built-in `$` prefix is skipped once `format` is
+     * set). A `format` column stays editable/pickable exactly like a plain
+     * `type` column — only `render` disables that.
+     *
+     * Sort, filter, and the footer aggregation all read the **raw**
+     * `row[column.key]` value, never `format`'s output — so a grouped/prefixed
+     * currency string still sums and sorts numerically.
+     */
+    format?: (value: unknown, row: Row) => string;
+    /**
+     * Opts this column into `RecordPanel`/`RecordPage`'s editable-field API
+     * (#431) — click-to-edit there. A plain `editable` column, with no
+     * `editor`, opens a text/number/date field (inferred from `type`); `editor`
+     * below picks a `select`/`switch` picker instead. Requires `onEdit` to
+     * actually be given for a field to open at all.
+     */
+    editable?: boolean;
+    /** `select`/`switch` render as the field's own live, always-interactive
+     * content instead of opening on click. `select` reads `editOptions`. */
+    editor?: "select" | "switch";
+    /** Options for `editor: "select"`. Not `options` (`StatusOption` requires
+     * `color`, for this type's own `status` picker) so this stays additive. */
+    editOptions?: EditableOption[];
+};
+export declare function tagTone(t: string): string;
+export {};

package/dist/types/product/recordpage/recordpage.d.ts

@@ -1,6 +1,6 @@
 import { type LucideIcon } from "lucide-react";
 import * as React from "react";
-import { type Column, type Row } from "../recordstable";
+import { type Column, type Row } from "./column";
 export type RecordPageNote = {
     id: string;
     text: string;

package/dist/types/product/recordpage/test-fixtures.d.ts

@@ -0,0 +1,3 @@
+import type { Column, Row } from "./column";
+export declare const testColumns: Column[];
+export declare const testRows: Row[];

package/dist/types/product/recordpanel/recordpanel.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type AvatarProps } from "../../components/avatar";
-import type { Row } from "../recordstable";
+import type { Row } from "../recordpage/column";
 type IconType = React.ComponentType<{
     size?: number;
     strokeWidth?: number;

package/dist/types/product/recordstable/index.d.ts

@@ -1,3 +1,3 @@
-export { type EditableOption, editableInputType, useEditableField, } from "./editable-field";
+export { type EditableOption, editableInputType, useEditableField, } from "../recordpage/editable-field";
 export { type Column, type ColumnType, defaultColumns, defaultRows, type EntityValue, RecordsTable, type RecordsTableProps, type Row, tagTone, } from "./recordstable";
 export { recordstableRecipe } from "./recordstable.recipe";

package/dist/types/product/recordstable/recordstable.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type EmptyStateLearnMore } from "../../components/emptystate";
-import type { EditableOption } from "./editable-field";
+import type { EditableOption } from "../recordpage/editable-field";
 type IconType = React.ComponentType<{
     size?: number;
     strokeWidth?: number;
@@ -283,6 +283,11 @@ export { formatCellDate, parseCellDate };
  * 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.
  */
 export declare function RecordsTable({ labels, columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, allowAddColumn, onOpenRecord, onOpenRecordPage, avatarTone, emptyStateExtra, className, ...rest }: RecordsTableProps): React.JSX.Element;
 export declare const defaultColumns: Column[];

package/dist/types/product/taskstable/taskstable.d.ts

@@ -47,6 +47,11 @@ export type TasksTableProps = Omit<React.ComponentPropsWithoutRef<"div">, "child
  * 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.
  */
 export declare function TasksTable({ columns, groups, leading, trailing, emptyLabel: emptyLabelProp, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, className, ...rest }: TasksTableProps): React.JSX.Element;
 export declare namespace TasksTable {

package/package.json

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