@crisp-ui-kit/crisp 0.54.8 → 0.54.9

package/dist/tabletoolbar.css

@@ -39,7 +39,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; text-decoration: none; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -47,7 +47,25 @@
     & .crisp-tabletoolbar-menu-item[data-on] svg { color: var(--crisp-bg-brand-solid); }
     & .crisp-tabletoolbar-menu-item .crisp-tabletoolbar-menu-check { margin-left: auto; }
     & .crisp-tabletoolbar-menu-input { height: var(--crisp-size-row); margin: var(--crisp-space-0-5); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; }
-    & .crisp-tabletoolbar-menu-sep { height: 1px; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
+    & .crisp-tabletoolbar-menu-sep { height: 1px; border: none; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
+    /* #592: the Filter field picker's nested-scope header (back control +
+       search, once drilled into a nestedColumns column) and a search
+       result's own breadcrumb row ("Team › Twitter follower count", surfaced by the SAME query matching a nested column). menu-back reuses the established 28px icon-only control pattern this file already uses twice (sort-remove, the kebab segment) rather than an independent measurement of Attio's own back arrow. The breadcrumb
+       colours ARE measured live: the parent segment muted at the same
+       exact color-mix 63% sort-learn above already uses, the
+       separator chevron and leaf segment both full fgPrimary (the
+       generic menu-item svg rule below defaults every icon to
+       fgMuted, so the separator needs its own override to read
+       correctly here). */
+    & .crisp-tabletoolbar-menu-nesthead { display: flex; align-items: center; gap: var(--crisp-space-1); margin: var(--crisp-space-0-5); }
+    & .crisp-tabletoolbar-menu-nesthead .crisp-tabletoolbar-menu-input { flex: 1; margin: 0; }
+    & .crisp-tabletoolbar-menu-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-tabletoolbar-menu-back:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu-item--expand { justify-content: space-between; }
+    & .crisp-tabletoolbar-menu-item-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
+    & .crisp-tabletoolbar-menu-item-path-parent { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-tabletoolbar-menu-item-path-sep { flex-shrink: 0; color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu-item-path > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-tabletoolbar-menu--up { top: auto; bottom: calc(100% + var(--crisp-space-1)); transform-origin: bottom; }
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
@@ -68,12 +86,21 @@
     & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
+
     & .crisp-tabletoolbar-fcond { display: inline-flex; align-items: center; height: var(--crisp-size-row); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); white-space: nowrap; }
     & .crisp-tabletoolbar-fcond-seg { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
     & .crisp-tabletoolbar-fcond-seg svg { flex-shrink: 0; }
-    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field, & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
-    & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); }
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field,
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); max-width: 200px; }
     & .crisp-tabletoolbar-fcond-seg--field svg { color: var(--crisp-fg-muted); }
+    /* #592: a nested pick's field segment ("Team › Twitter follower
+       count") — measured live: BOTH path segments the same colour (chip context only; the picker's own menu rows keep the parent muted, see
+       tabletoolbar.chrome.ts), each independently truncated. Attio's own layout gives the leaf segment priority (it stays fully readable longer, the parent truncates first) via a two-part min-content measurement this reproduces qualitatively with a flex-shrink differential rather than byte-for-byte (the exact px split Attio computes is content-length-dependent, not a fixed value) — not independently re-verified at other path-segment lengths. */
+    & .crisp-tabletoolbar-fcond-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 178px; }
+    & .crisp-tabletoolbar-fcond-path-seg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-seg:first-child { flex: 0 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-sep { flex-shrink: 0; color: inherit; }
     & .crisp-tabletoolbar-fcond-seg--op { background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); }
     & .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); }
@@ -83,6 +110,8 @@
     & .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; }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/tabletoolbar.layered.css

@@ -40,7 +40,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; text-decoration: none; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -48,7 +48,25 @@
     & .crisp-tabletoolbar-menu-item[data-on] svg { color: var(--crisp-bg-brand-solid); }
     & .crisp-tabletoolbar-menu-item .crisp-tabletoolbar-menu-check { margin-left: auto; }
     & .crisp-tabletoolbar-menu-input { height: var(--crisp-size-row); margin: var(--crisp-space-0-5); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; }
-    & .crisp-tabletoolbar-menu-sep { height: 1px; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
+    & .crisp-tabletoolbar-menu-sep { height: 1px; border: none; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
+    /* #592: the Filter field picker's nested-scope header (back control +
+       search, once drilled into a nestedColumns column) and a search
+       result's own breadcrumb row ("Team › Twitter follower count", surfaced by the SAME query matching a nested column). menu-back reuses the established 28px icon-only control pattern this file already uses twice (sort-remove, the kebab segment) rather than an independent measurement of Attio's own back arrow. The breadcrumb
+       colours ARE measured live: the parent segment muted at the same
+       exact color-mix 63% sort-learn above already uses, the
+       separator chevron and leaf segment both full fgPrimary (the
+       generic menu-item svg rule below defaults every icon to
+       fgMuted, so the separator needs its own override to read
+       correctly here). */
+    & .crisp-tabletoolbar-menu-nesthead { display: flex; align-items: center; gap: var(--crisp-space-1); margin: var(--crisp-space-0-5); }
+    & .crisp-tabletoolbar-menu-nesthead .crisp-tabletoolbar-menu-input { flex: 1; margin: 0; }
+    & .crisp-tabletoolbar-menu-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-tabletoolbar-menu-back:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu-item--expand { justify-content: space-between; }
+    & .crisp-tabletoolbar-menu-item-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
+    & .crisp-tabletoolbar-menu-item-path-parent { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-tabletoolbar-menu-item-path-sep { flex-shrink: 0; color: var(--crisp-fg-primary); }
+    & .crisp-tabletoolbar-menu-item-path > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-tabletoolbar-menu--up { top: auto; bottom: calc(100% + var(--crisp-space-1)); transform-origin: bottom; }
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
@@ -69,12 +87,21 @@
     & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
+
     & .crisp-tabletoolbar-fcond { display: inline-flex; align-items: center; height: var(--crisp-size-row); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); white-space: nowrap; }
     & .crisp-tabletoolbar-fcond-seg { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
     & .crisp-tabletoolbar-fcond-seg svg { flex-shrink: 0; }
-    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field, & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
-    & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); }
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field,
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); max-width: 200px; }
     & .crisp-tabletoolbar-fcond-seg--field svg { color: var(--crisp-fg-muted); }
+    /* #592: a nested pick's field segment ("Team › Twitter follower
+       count") — measured live: BOTH path segments the same colour (chip context only; the picker's own menu rows keep the parent muted, see
+       tabletoolbar.chrome.ts), each independently truncated. Attio's own layout gives the leaf segment priority (it stays fully readable longer, the parent truncates first) via a two-part min-content measurement this reproduces qualitatively with a flex-shrink differential rather than byte-for-byte (the exact px split Attio computes is content-length-dependent, not a fixed value) — not independently re-verified at other path-segment lengths. */
+    & .crisp-tabletoolbar-fcond-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 178px; }
+    & .crisp-tabletoolbar-fcond-path-seg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-seg:first-child { flex: 0 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-sep { flex-shrink: 0; color: inherit; }
     & .crisp-tabletoolbar-fcond-seg--op { background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); }
     & .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); }
@@ -84,6 +111,8 @@
     & .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; }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -27,13 +27,20 @@ export type ContextMenuProps = {
      * element, same as any other `asChild` in crisp (`core/primitive.tsx`).
      */
     asChild?: boolean;
+    /** `"light"` (default) is this component's own original popover surface.
+     * `"dark"` is Attio's OWN cell-level context menu (`DataTable`'s #598) —
+     * measured live as a fixed, theme-INDEPENDENT dark chrome (background
+     * `#101112`, text `#eeeff1`), the same "dark pill" ink pair `Tooltip`
+     * already hardcodes for the same reason: this surface doesn't follow the
+     * app's light/dark theme, Attio always renders it dark. */
+    variant?: "light" | "dark";
 };
 /**
  * A right-click context menu — the popover surface positioned at the cursor.
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export declare function ContextMenu({ children, items, menuLabel: menuLabelProp, className, asChild, }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, items, menuLabel: menuLabelProp, className, asChild, variant, }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type CalcOp } from "../columncalc";
 type IconType = React.ComponentType<{
     size?: number;
     strokeWidth?: number;
@@ -7,6 +8,7 @@ export declare function isLabelTruncated(el: {
     scrollWidth: number;
     clientWidth: number;
 }): boolean;
+export declare function reorderColumns<T>(cols: DataTableColumn<T>[], order: string[] | undefined): DataTableColumn<T>[];
 export type EntityValue = {
     name: string;
     avatar?: string;
@@ -140,6 +142,24 @@ export type DataTableColumn<T> = {
     format?: (value: unknown, row: T) => string;
     /** Footer summary for this column (shown when any column supplies one). */
     summary?: (rows: T[]) => React.ReactNode;
+    /**
+     * Give this column an aggregation footer via `ColumnCalc`, matching
+     * Attio's own per-type set exactly (crisp/#602, checklist G-073;
+     * confirmed live against `app.attio.com`'s "Add calculation" menu on
+     * both a text and a numeric column): Count empty / Count filled /
+     * Percent empty / Percent filled on every column, plus Sum / Average /
+     * Min / Max on `"number"`/`"currency"` columns, plus an explicit "None"
+     * once one is active. RecordsTable's own OLDER, separate calc footer
+     * predates `ColumnCalc` and gives a flat, per-type-WRONG set (no
+     * Percent empty/filled at all, "Count all" instead of "Count empty" +
+     * "Count filled" as two ops) — that duplicate implementation is not
+     * touched here; this is DataTable's own footer only. Wins over
+     * `summary` when both are set on the same column. */
+    calc?: {
+        defaultOp?: CalcOp;
+        op?: CalcOp;
+        onOpChange?: (op: CalcOp) => void;
+    };
     /** Opt this column out of the header menu's Hide/Move/Rename items. */
     managed?: boolean;
     /** Hidden from the grid but still listed in the column manager. */
@@ -151,7 +171,12 @@ export type DataTableColumn<T> = {
      * icon set); this uses a Lucide `Lock`, the same substitution every
      * other crisp icon makes. Purely a visual marker — it does NOT disable
      * editing on its own; a column that shouldn't be editable simply
-     * doesn't set `editable: true`, the same as any other column. */
+     * doesn't set `editable: true`, the same as any other column.
+     * Also used by the cell context menu (crisp/#598, #645): matching
+     * Attio's own "no copy handler at all" for a computed field (checklist
+     * G-100), a `readOnly` cell's Copy item is disabled and its keyboard/
+     * native-copy path writes nothing to the clipboard, and its Clear-value
+     * item is disabled (there is nothing editable to clear). */
     readOnly?: 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
@@ -163,6 +188,30 @@ export type DataTableColumn<T> = {
      * row's own record — that's what `onRowClick` is for. Ignored on any
      * other `type`. */
     onEntityClick?: (row: T) => void;
+    /** `type: "entity"` only (crisp/#601, checklist G-048) — a right-aligned
+     * "Open preview" icon that appears on row hover (or keyboard focus),
+     * alongside `onOpenComments` below. Matches Attio's own measured pair
+     * exactly: a 20px ghost button, `radius.sm`, muted at rest, darkening on
+     * its own hover. Omit to render neither icon (default). Ignored on any
+     * other `type`, same as `onEntityClick`. */
+    onOpenPreview?: (row: T) => void;
+    /** `type: "entity"` only (crisp/#601, checklist G-048) — the OTHER
+     * hover icon next to `onOpenPreview`. Measured live: its button carries
+     * `aria-controls="comment-drawer"`, not the "possibly drag-to-reorder"
+     * the issue's own first-pass guess landed on — it opens a comment
+     * drawer for the row. Once set, renders via `CommentCountBadge`
+     * (product/comments, crisp/#625) rather than a plain icon — a persistent
+     * dot once the row has ≥1 comment, replaced on hover by the count (see
+     * `commentCount`); `onOpenPreview` above rides along as that badge's own
+     * second icon instead of rendering separately. Setting `onOpenPreview`
+     * with NO `onOpenComments` keeps the old plain-icon-only rendering (a
+     * column with a preview affordance but no comments concept at all). */
+    onOpenComments?: (row: T) => void;
+    /** The row's own comment count, read by `CommentCountBadge` when
+     * `onOpenComments` is set. Omit to always pass `0` — the badge still
+     * renders (a plain icon, no dot, no digit) once `onOpenComments` is set;
+     * it just can't show a real count without this. */
+    commentCount?: (row: T) => number;
 };
 export type SortState = {
     key: string;
@@ -227,8 +276,35 @@ export type DataTableProps<T extends {
     viewSettingsLabel?: string;
     /** That menu's own "Columns" section heading. */
     columnsGroupLabel?: string;
+    /** Accessible name for the cell context menu (crisp/#598) and the hidden
+     * clipboard-proxy textarea its Copy/Cmd+C share (crisp/#645). */
+    cellMenuLabel?: string;
+    /** The cell context menu's four items, matching Attio's own exactly
+     * (checklist G-043 — "identical menu regardless of field type"). */
+    copyLabel?: string;
+    pasteLabel?: string;
+    viewEditHistoryLabel?: string;
+    /** "Clear value" commits an empty string via the existing `onEdit`, same
+     * as clearing a plain text editor by hand -- no separate callback. */
+    clearValueLabel?: string;
     /** Called with the next column list after a move, rename or hide. */
     onColumnsChange?: (columns: DataTableColumn<T>[]) => void;
+    /**
+     * Controlled column order — a plain array of `key`s (crisp/#731), lighter
+     * than `onColumnsChange`'s full column definitions (which can't round-trip
+     * through JSON: `render`/`accessor`/etc. are functions) and so the shape a
+     * saved view actually persists. Omit for an uncontrolled default seeded
+     * from `columns`' own order and updated internally by a header drag or the
+     * column menu's Move left/right. A key this doesn't mention (a column
+     * added since the order was last saved) renders after every key it DOES
+     * mention, in `columns`' own relative order — see `reorderColumns`. Column
+     * drag-to-reorder itself is always available (like resize); this prop only
+     * changes who owns the resulting order.
+     */
+    columnOrder?: string[];
+    /** Called with the next `columnOrder` after a header drag or the column
+     *  menu's Move left/right — whichever changed the order. */
+    onColumnOrderChange?: (order: string[]) => void;
     /** Group rows under a heading row, the way a grouped view does. */
     groupBy?: (row: T) => string;
     /**
@@ -241,6 +317,11 @@ export type DataTableProps<T extends {
     onRowsReorder?: (rows: T[]) => void;
     /** aria-label on each row's drag grip (default "Reorder row"). */
     reorderRowLabel?: string;
+    /** aria-label on the entity column's "Open preview" hover icon (crisp/#601;
+     *  only rendered when a column sets `onOpenPreview`). Also passed through
+     *  to `CommentCountBadge`'s own `previewLabel` when a column sets
+     *  `onOpenComments` too (crisp/#601 supersession). */
+    openPreviewLabel?: string;
     /**
      * Render an error state in place of the rows. Uses the same measured
      * `EmptyState variant="page"` surface as the zero-row state.
@@ -265,6 +346,13 @@ export type DataTableProps<T extends {
      * outside `render`'s own output so a hover-only wrapper (a `Tooltip`, say)
      * can't swallow it. */
     onEdit?: (id: string, key: string, value: string) => Promise<void> | void;
+    /** The cell context menu's "View edit history" item (crisp/#598, checklist
+     * G-043 -- Attio's own item carries a "Pro" pill crisp has no billing
+     * concept to gate on, so the item itself always renders; see the
+     * component's own comment). Omitted: the item still renders (matching
+     * Attio, which shows it regardless of field type) but disabled, since
+     * there is nothing for it to open. */
+    onViewEditHistory?: (id: string, key: string) => void;
     /** Sticky the first column(s) with a horizontal scroll shadow (default true). */
     stickyFirst?: boolean;
     /** Sticky the LAST column with a horizontal scroll shadow, mirroring
@@ -337,7 +425,7 @@ export type DataTableProps<T extends {
 };
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst, stickyLast, scrollProps, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, columnOrder, onColumnOrderChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, onViewEditHistory, stickyFirst, stickyLast, scrollProps, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, openPreviewLabel: openPreviewLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, cellMenuLabel: cellMenuLabelProp, copyLabel: copyLabelProp, pasteLabel: pasteLabelProp, viewEditHistoryLabel: viewEditHistoryLabelProp, clearValueLabel: clearValueLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

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

@@ -48,8 +48,39 @@ export type TableToolbarColumn = {
      * `is`/`is not`/`before`/`after`/`empty`/`not empty` with a calendar +
      * Today/Tomorrow/Next week quick-picks — both sets, and the number
      * spinner, measured live against Attio's own column-typed filter menus.
+     * `"select"` (#715) swaps in `is`/`is not`/`empty`/`not empty` — a
+     * closed-vocabulary column's text-search operators (`contains`/`starts
+     * with`/…) mean nothing against a fixed value set. Pair it with `values`
+     * to also offer `"is any of"`, the same as every other type.
      */
-    type?: "text" | "number" | "date";
+    type?: "text" | "number" | "date" | "select";
+    /**
+     * This column's own related object's attributes, reachable as a
+     * "Parent › Child" path in the Filter field picker (#592) — a
+     * relationship field (Attio's own "Team 26", a company's linked people,
+     * e.g.) expands into a nested picker over these instead of only
+     * offering the relationship field itself. Recurses: a nested column can
+     * carry its own `nestedColumns` too (Team → Company → …, confirmed
+     * reachable live) with no depth limit built in here. The relationship
+     * field itself stays independently selectable (its own operators, e.g.
+     * `contains`/`does not contain`/`empty`/`not empty` for a person
+     * relationship, measured live) — drilling in doesn't remove that option,
+     * it adds the nested one alongside it, matching Attio's own picker
+     * exactly (its nested screen lists the relationship field itself first,
+     * checked when it's the chip's current field, then its children).
+     */
+    nestedColumns?: TableToolbarColumn[];
+    /**
+     * The related object's own singular noun, used once a consumer drills
+     * into this column: the nested picker's placeholder reads `Search
+     * ${nestedObjectLabel} attributes…` — measured live, e.g. "person" for a
+     * Team/People relationship, "company" for a Company relationship. Only
+     * meaningful alongside `nestedColumns`. Falls back to this column's own
+     * `label`, lowercased, when omitted — a plain fallback, since Attio's
+     * own noun is the *related object's* name, not usually the field's own
+     * label lowercased ("Team" the field vs. "person" the related object).
+     */
+    nestedObjectLabel?: string;
 };
 export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     /**
@@ -192,6 +223,45 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
     addAttributeToViewLabel?: string;
     /** Placeholder in the add-attribute search box (default "Search attributes…"). */
     searchAttributesPlaceholder?: string;
+    /**
+     * Text on the Import/Export trigger (default "Import / Export"). The
+     * trigger only renders when at least one of `onImportCsv`/`onExportCsv`/
+     * `onExportExcel`/`importExportHelpHref` is given — an unwired menu has
+     * nothing to do, the same "still renders empty" contract other triggers
+     * here make doesn't fit a menu that would just be blank.
+     */
+    importExportLabel?: string;
+    /** The menu's "Import CSV" item — omit to leave it out. */
+    onImportCsv?: () => void;
+    /** The menu's "Export view as CSV" item — omit to leave it out. */
+    onExportCsv?: () => void;
+    /** The menu's "Export view as Excel" item — omit to leave it out. */
+    onExportExcel?: () => void;
+    /** Shows a "Learn about imports and exports" link in the menu when set —
+     *  same pattern as Sort's own `helpHref`. */
+    importExportHelpHref?: string;
+    /** Label on the "Import CSV" item (default "Import CSV"). */
+    importCsvLabel?: string;
+    /** Label on the "Export view as CSV" item (default "Export view as CSV"). */
+    exportCsvLabel?: string;
+    /** Label on the "Export view as Excel" item (default "Export view as Excel"). */
+    exportExcelLabel?: string;
+    /** Text of the Import/Export menu's help link (default "Learn about
+     *  imports and exports"). */
+    learnImportExportLabel?: string;
+    /** aria-label on the Filter field picker's back control, shown once
+     *  drilled into a `nestedColumns` column (default "Back"). */
+    backLabel?: string;
+    /**
+     * Placeholder in the field picker's own search box once drilled into a
+     * `nestedColumns` column — receives that column's `nestedObjectLabel`
+     * (or its `label`, lowercased). Defaults to `Search ${noun} attributes…`,
+     * matching Attio's own measured wording ("Search person attributes…",
+     * drilled into a Team/People relationship) — a formatter, like
+     * `sortTriggerLabel` above, since the noun sits mid-sentence and a fixed
+     * template doesn't survive every language's word order.
+     */
+    nestedFieldPlaceholder?: (noun: string) => string;
 };
 /**
  * Applies a toolbar's filter conditions to any row array. Reads the raw value
@@ -218,7 +288,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, ...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, 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/product/board/board.d.ts

@@ -1,4 +1,9 @@
 import * as React from "react";
+/** crisp/#718 — Attio's own two independent density toggles: "collapse"
+ *  (columns narrow to a 52px vertical rail; cards shrink to a 40px row) or
+ *  "expand" (the normal width/height), measured live on the Deals
+ *  pipeline. */
+export type BoardDensity = "expand" | "collapse";
 export type BoardColumn = {
     id: string;
     title: string;
@@ -24,10 +29,51 @@ export type BoardProps<T extends BoardCard> = Omit<React.ComponentPropsWithoutRe
     cards: T[];
     /** Called with the next cards after a drag moves one between columns. */
     onCardsChange?: (cards: T[]) => void;
-    renderCard: (card: T) => React.ReactNode;
+    /**
+     * The second argument is the board's CURRENT card density (crisp/#718) —
+     * `renderCard` decides what a collapsed (40px row) card actually shows,
+     * since Board only knows the card is a `T`, never its display shape.
+     * Ignoring the argument (a plain `(card) => ...`) keeps every existing
+     * call site valid; `cardDensity` then just resolves to `"expand"` always,
+     * exactly as before this prop existed.
+     */
+    renderCard: (card: T, cardDensity: BoardDensity) => React.ReactNode;
     /** When set, each column shows a "+ {newCardLabel}" button and its header +. */
     onNewCard?: (columnId: string) => void;
     newCardLabel?: string;
+    /**
+     * Shows the density toolbar above the board — Attio's own two
+     * independent "Collapse/Expand columns" and "Collapse/Expand cards"
+     * segmented toggles (crisp/#718, measured live). Default `false`: an
+     * existing `Board` renders no toolbar and no extra chrome, exactly as
+     * before this prop existed.
+     */
+    density?: boolean;
+    /** Controlled column density (omit for uncontrolled, seeded "expand"). */
+    columnDensity?: BoardDensity;
+    onColumnDensityChange?: (density: BoardDensity) => void;
+    /** Controlled card density (omit for uncontrolled, seeded "expand") —
+     *  also the value `renderCard`'s second argument resolves to. */
+    cardDensity?: BoardDensity;
+    onCardDensityChange?: (density: BoardDensity) => void;
+    collapseColumnsLabel?: string;
+    expandColumnsLabel?: string;
+    collapseCardsLabel?: string;
+    expandCardsLabel?: string;
+    /** aria-label for the column-density toggle's own `role="radiogroup"`
+     *  wrapper (Attio's own markup uses a plain `role="group"` with no name —
+     *  crisp names both groups, the more correct ARIA shape for a set of
+     *  mutually-exclusive `role="radio"` buttons). */
+    columnDensityGroupLabel?: string;
+    cardDensityGroupLabel?: string;
+    /**
+     * Renders a trailing 52×52px dashed "+" slot after the last column —
+     * Attio's own "Add stage" (crisp/#718, measured live). Omit to skip it
+     * entirely, matching every other opt-in affordance here (`onNewCard`,
+     * `calc`).
+     */
+    onAddStage?: () => void;
+    addStageLabel?: string;
     /**
      * Accessible name for a card. Also used in the move announcement. Without it
      * a card is announced by whatever `renderCard` puts in it, which is usually
@@ -54,7 +100,7 @@ export type BoardProps<T extends BoardCard> = Omit<React.ComponentPropsWithoutRe
  * it via `onCardsChange` (the parent owns the cards, so the move is a
  * controlled state update). Measured from a deals pipeline.
  */
-export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, calc, className, ...rest }: BoardProps<T>): React.JSX.Element;
+export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, calc, density, columnDensity: columnDensityProp, onColumnDensityChange, cardDensity: cardDensityProp, onCardDensityChange, collapseColumnsLabel: collapseColumnsLabelProp, expandColumnsLabel: expandColumnsLabelProp, collapseCardsLabel: collapseCardsLabelProp, expandCardsLabel: expandCardsLabelProp, columnDensityGroupLabel: columnDensityGroupLabelProp, cardDensityGroupLabel: cardDensityGroupLabelProp, onAddStage, addStageLabel: addStageLabelProp, className, ...rest }: BoardProps<T>): React.JSX.Element;
 export declare namespace Board {
     var displayName: string;
 }

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

@@ -120,7 +120,12 @@ export type CommentsPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "ch
     emojiOptions?: string[];
     mentionTrigger?: string;
     renderMentionPicker?: (state: CommentMentionTriggerState) => React.ReactNode;
-    onClose: () => void;
+    /** Omit for a consumer with no separate open/close state of its own —
+     *  embedded in a tab pane rather than a true slide-over/drawer, e.g.
+     *  (crisp#738, the same reasoning #721 already applied to
+     *  `onReact`/`onDelete`) — the header's close "✕" drops out rather than
+     *  sitting there as a button that visibly does nothing. */
+    onClose?: () => void;
     closeLabel?: string;
     backLabel?: string;
     title?: string;

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

@@ -228,7 +228,6 @@ export type RecordsTableLabels = {
     selectionAnnouncement: (count: number) => string;
     delete: string;
     sendEmail: string;
-    exportCsv: string;
     runWorkflow: string;
     calculate: string;
     emptyPlaceholder: string;

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

@@ -6,6 +6,27 @@ export type SavedView = {
     icon?: React.ReactNode;
     /** Renders a small shared-view indicator next to the name. */
     shared?: boolean;
+    /**
+     * Text matched against the switcher's own search box (#618) when `name`
+     * isn't a plain string — same fallback `Select`'s own `keywords` already
+     * gives a non-string `label`. Falls back to `id` when `name` is also
+     * non-string and this is omitted, the same way `Select`'s own
+     * `optionText` falls back to `value` — a view with a rich, non-string
+     * name and no `keywords` still matches SOME query (its own id) rather
+     * than becoming permanently unfindable by search.
+     */
+    keywords?: string;
+    /**
+     * "Created by …" — the first line of the kebab menu's own footer row
+     * (#618, measured live: "Created by Attio system" / "26th Aug 2026
+     * 12:20 PM", two stacked lines). Renders only the line(s) actually
+     * given — omit both for a view with no author/date metadata and the
+     * footer (and its divider) don't render at all.
+     */
+    createdBy?: React.ReactNode;
+    /** The footer's second line — a pre-formatted date/time, since crisp
+     *  doesn't own locale formatting. See `createdBy`. */
+    createdAt?: React.ReactNode;
 };
 export type SavedViewsProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSelect"> & {
     /** The trigger's label when no view is active (Attio's "All Companies"). */
@@ -32,6 +53,18 @@ export type SavedViewsProps = Omit<React.ComponentPropsWithoutRef<"div">, "child
     viewOptionsLabel?: string;
     /** aria-label for the panel itself (defaults to the resolved trigger label). */
     "aria-label"?: string;
+    /** Placeholder on the panel's own search box (default "Search views..." —
+     *  Attio's own text, measured live: 3 literal dots, not an ellipsis
+     *  glyph). */
+    searchPlaceholder?: string;
+    /** aria-label on the search box (default "Filter views" — Attio's own
+     *  measured aria-label, distinct from its placeholder text). */
+    searchLabel?: string;
+    /** Shown in place of the view list when a search matches nothing (default
+     *  "No results" — the same text and contract `Select`'s own `searchable`
+     *  empty state already uses). The "Create new view" row still renders
+     *  below it either way. */
+    emptyLabel?: string;
     className?: string;
 };
 /**
@@ -40,16 +73,20 @@ export type SavedViewsProps = Omit<React.ComponentPropsWithoutRef<"div">, "child
  * row (leading coloured icon, name, a hover-revealed kebab of
  * rename/duplicate/delete), plus a trailing "Create new view" row. The
  * active view is marked `aria-selected`/`aria-current="page"` and mirrored
- * onto the trigger's own icon/label.
+ * onto the trigger's own icon/label. The panel opens on a "Search views..."
+ * box (#618, P-007) — real DOM focus moves there (`requestAnimationFrame`,
+ * same race `Select`'s own `searchable` variant already guards against),
+ * not virtual focus on the trigger.
  *
- * Keyboard: while the trigger has focus and the panel is open, ↑/↓ move a
- * virtual highlight (`aria-activedescendant`, the same "focus stays on the
- * trigger" model `Select`/`MultiSelect` use without a search field), Enter
- * chooses the highlighted row, Escape closes — deferring to a still-open
- * kebab submenu first (`hasOpenFloatingLayer`), so Escape closes one layer
- * at a time.
+ * Keyboard: while the panel is open, focus lives on the search input — ↑/↓
+ * move a virtual highlight (`aria-activedescendant`) over the (possibly
+ * filtered) view list, Enter chooses the highlighted row, Escape closes,
+ * deferring to a still-open kebab submenu first (`hasOpenFloatingLayer`),
+ * so Escape closes one layer at a time — the same split `Select`'s own
+ * `searchable` variant already uses between its trigger and its own search
+ * input.
  */
-export declare function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename, onDuplicate, onDelete, onToggleFavorite, createLabel: createLabelProp, renameLabel: renameLabelProp, duplicateLabel: duplicateLabelProp, deleteLabel: deleteLabelProp, favoriteLabel: favoriteLabelProp, viewOptionsLabel: viewOptionsLabelProp, className, "aria-label": ariaLabel, ...rest }: SavedViewsProps): React.JSX.Element;
+export declare function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename, onDuplicate, onDelete, onToggleFavorite, createLabel: createLabelProp, renameLabel: renameLabelProp, duplicateLabel: duplicateLabelProp, deleteLabel: deleteLabelProp, favoriteLabel: favoriteLabelProp, viewOptionsLabel: viewOptionsLabelProp, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, emptyLabel: emptyLabelProp, className, "aria-label": ariaLabel, ...rest }: SavedViewsProps): React.JSX.Element;
 export declare namespace SavedViews {
     var displayName: string;
 }

package/package.json

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