@crisp-ui-kit/crisp 0.54.8 → 0.54.9

package/dist/cjs/product/board/board.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const menu_1 = require("../../components/menu");
+const radiogroup_1 = require("../../components/radiogroup");
 const core_1 = require("../../core");
 const board_recipe_1 = require("./board.recipe");
 const BOARD_AGG_ORDER = [
@@ -97,11 +98,44 @@ function computeBoardAgg(agg, values) {
  * it via `onCardsChange` (the parent owns the cards, so the move is a
  * controlled state update). Measured from a deals pipeline.
  */
-function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, calc, className, ...rest }) {
+function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, calc, density = false, columnDensity: columnDensityProp, onColumnDensityChange, cardDensity: cardDensityProp, onCardDensityChange, collapseColumnsLabel: collapseColumnsLabelProp, expandColumnsLabel: expandColumnsLabelProp, collapseCardsLabel: collapseCardsLabelProp, expandCardsLabel: expandCardsLabelProp, columnDensityGroupLabel: columnDensityGroupLabelProp, cardDensityGroupLabel: cardDensityGroupLabelProp, onAddStage, addStageLabel: addStageLabelProp, className, ...rest }) {
     // crisp/#471: same resolution order as every other component's own —
     // explicit prop, then a CrispMessagesProvider's translation of the English
     // default, then that default itself.
     const newCardLabel = (0, core_1.useCrispMessage)(newCardLabelProp, "New");
+    const collapseColumnsLabel = (0, core_1.useCrispMessage)(collapseColumnsLabelProp, "Collapse columns");
+    const expandColumnsLabel = (0, core_1.useCrispMessage)(expandColumnsLabelProp, "Expand columns");
+    const collapseCardsLabel = (0, core_1.useCrispMessage)(collapseCardsLabelProp, "Collapse cards");
+    const expandCardsLabel = (0, core_1.useCrispMessage)(expandCardsLabelProp, "Expand cards");
+    const columnDensityGroupLabel = (0, core_1.useCrispMessage)(columnDensityGroupLabelProp, "Column density");
+    const cardDensityGroupLabel = (0, core_1.useCrispMessage)(cardDensityGroupLabelProp, "Card density");
+    const addStageLabel = (0, core_1.useCrispMessage)(addStageLabelProp, "Add stage");
+    // #718: same controlled/uncontrolled shape as `sort`/`selectedIds`
+    // elsewhere in crisp — explicit prop wins; otherwise this manages its own
+    // state, seeded "expand" (Attio's own board opens expanded by default).
+    const [internalColumnDensity, setInternalColumnDensity] = React.useState("expand");
+    const [internalCardDensity, setInternalCardDensity] = React.useState("expand");
+    const columnDensity = columnDensityProp ?? internalColumnDensity;
+    const cardDensity = cardDensityProp ?? internalCardDensity;
+    const setColumnDensity = (next) => {
+        onColumnDensityChange?.(next);
+        if (columnDensityProp === undefined)
+            setInternalColumnDensity(next);
+    };
+    const setCardDensity = (next) => {
+        onCardDensityChange?.(next);
+        if (cardDensityProp === undefined)
+            setInternalCardDensity(next);
+    };
+    // crisp's shared radio-group keyboard model (#200) — the same
+    // ←/→/↑/↓/Home/End-with-roving-tabindex model `Segmented`/`RadioGroup`
+    // already use, not a bespoke per-button handler (see that hook's own
+    // comment on the bug a per-button closure caused once already). Two
+    // independent hook instances: each density pair is its own radio group.
+    const { onKeyDown: onColumnDensityKeyDown, groupRef: columnDensityGroupRef } = (0, radiogroup_1.useRadioGroupKeyboard)({
+        select: (v) => setColumnDensity(v),
+    });
+    const { onKeyDown: onCardDensityKeyDown, groupRef: cardDensityGroupRef } = (0, radiogroup_1.useRadioGroupKeyboard)({ select: (v) => setCardDensity(v) });
     // #604: which BoardAgg each column's footer shows, keyed by column id.
     // Unset (undefined) means the column still shows the "+ Add calculation"
     // trigger, exactly like the table footer's own per-column state.
@@ -245,32 +279,32 @@ function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLa
         setRefocusId(card.id);
         return true;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, board_recipe_1.boardRecipe)({ className }), ...rest, children: [columns.map((col) => {
-                const colCards = cards.filter((c) => c.columnId === col.id);
-                return ((0, jsx_runtime_1.jsxs)("div", { ref: (el) => {
-                        if (el)
-                            colRefs.current.set(col.id, el);
-                        else
-                            colRefs.current.delete(col.id);
-                    }, className: "crisp-board-col", "data-over": overCol === col.id ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-board-col-add", "aria-label": `${crispMessages["Add to"] ?? "Add to"} ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-board-card", role: "listitem", 
-                                    // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
-                                    tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, "data-dragging": dragId === card.id ? "" : undefined, onPointerDown: (e) => onCardPointerDown(e, card), onPointerMove: onCardPointerMove, onPointerUp: (e) => endCardDrag(e, true), onPointerCancel: (e) => endCardDrag(e, false), onKeyDown: (e) => {
-                                        if (!(e.ctrlKey || e.metaKey))
-                                            return;
-                                        // the columns are a flex row, so under RTL the next one
-                                        // is to the LEFT and the keys swap (#255)
-                                        const rtl = (0, core_1.isRtlElement)(e.currentTarget);
-                                        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
-                                        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
-                                        const delta = e.key === backKey ? -1 : e.key === forwardKey ? 1 : 0;
-                                        // only swallow the key when the move actually happens, so
-                                        // Ctrl+Right at the last column still reaches the browser
-                                        if (delta && moveByKey(card, delta))
-                                            e.preventDefault();
-                                    }, children: renderCard(card) }, card.id)))] }), calc && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-board-col-footer", children: (0, jsx_runtime_1.jsx)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-board-col-calc", "data-empty": colAgg[col.id] ? undefined : "", children: colAgg[col.id] ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-calc-label", children: crispMessages[AGG_LABEL[colAgg[col.id]]] ??
-                                                    AGG_LABEL[colAgg[col.id]] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-calc-value", children: computeBoardAgg(colAgg[col.id], colCards.map((c) => calc.getValue(c))) })] })) : ((crispMessages["+ Add calculation"] ??
-                                        "+ Add calculation")) }), children: BOARD_AGG_ORDER.map((a) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => setColAgg((prev) => ({ ...prev, [col.id]: a })), children: [crispMessages[AGG_LABEL[a]] ?? AGG_LABEL[a], colAgg[col.id] === a ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 15, strokeWidth: 1.75 })) : null] }, a))) }) }))] }, col.id));
-            }), dragId &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, board_recipe_1.boardRecipe)({ className }), ...rest, children: [density && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-toolbar", children: [(0, jsx_runtime_1.jsxs)("div", { ref: columnDensityGroupRef, className: "crisp-board-density", role: "radiogroup", "aria-label": columnDensityGroupLabel, onKeyDown: onColumnDensityKeyDown, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "data-value": "collapse", "aria-checked": columnDensity === "collapse", "aria-label": collapseColumnsLabel, "data-state": columnDensity === "collapse" ? "on" : "off", onClick: () => setColumnDensity("collapse"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Columns3, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "data-value": "expand", "aria-checked": columnDensity === "expand", "aria-label": expandColumnsLabel, "data-state": columnDensity === "expand" ? "on" : "off", onClick: () => setColumnDensity("expand"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Columns2, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: cardDensityGroupRef, className: "crisp-board-density", role: "radiogroup", "aria-label": cardDensityGroupLabel, onKeyDown: onCardDensityKeyDown, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "data-value": "collapse", "aria-checked": cardDensity === "collapse", "aria-label": collapseCardsLabel, "data-state": cardDensity === "collapse" ? "on" : "off", onClick: () => setCardDensity("collapse"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Rows3, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "data-value": "expand", "aria-checked": cardDensity === "expand", "aria-label": expandCardsLabel, "data-state": cardDensity === "expand" ? "on" : "off", onClick: () => setCardDensity("expand"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Square, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-row", children: [columns.map((col) => {
+                        const colCards = cards.filter((c) => c.columnId === col.id);
+                        return ((0, jsx_runtime_1.jsxs)("div", { ref: (el) => {
+                                if (el)
+                                    colRefs.current.set(col.id, el);
+                                else
+                                    colRefs.current.delete(col.id);
+                            }, className: "crisp-board-col", "data-over": overCol === col.id ? "" : undefined, "data-density": columnDensity === "collapse" ? "collapse" : undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && columnDensity !== "collapse" && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-board-col-add", "aria-label": `${crispMessages["Add to"] ?? "Add to"} ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-board-card", role: "listitem", 
+                                            // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
+                                            tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, "data-dragging": dragId === card.id ? "" : undefined, "data-density": cardDensity === "collapse" ? "collapse" : undefined, onPointerDown: (e) => onCardPointerDown(e, card), onPointerMove: onCardPointerMove, onPointerUp: (e) => endCardDrag(e, true), onPointerCancel: (e) => endCardDrag(e, false), onKeyDown: (e) => {
+                                                if (!(e.ctrlKey || e.metaKey))
+                                                    return;
+                                                // the columns are a flex row, so under RTL the next one
+                                                // is to the LEFT and the keys swap (#255)
+                                                const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+                                                const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+                                                const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+                                                const delta = e.key === backKey ? -1 : e.key === forwardKey ? 1 : 0;
+                                                // only swallow the key when the move actually happens, so
+                                                // Ctrl+Right at the last column still reaches the browser
+                                                if (delta && moveByKey(card, delta))
+                                                    e.preventDefault();
+                                            }, children: renderCard(card, cardDensity) }, card.id)))] }), calc && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-board-col-footer", children: (0, jsx_runtime_1.jsx)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-board-col-calc", "data-empty": colAgg[col.id] ? undefined : "", children: colAgg[col.id] ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-calc-label", children: crispMessages[AGG_LABEL[colAgg[col.id]]] ??
+                                                            AGG_LABEL[colAgg[col.id]] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-calc-value", children: computeBoardAgg(colAgg[col.id], colCards.map((c) => calc.getValue(c))) })] })) : ((crispMessages["+ Add calculation"] ??
+                                                "+ Add calculation")) }), children: BOARD_AGG_ORDER.map((a) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => setColAgg((prev) => ({ ...prev, [col.id]: a })), children: [crispMessages[AGG_LABEL[a]] ?? AGG_LABEL[a], colAgg[col.id] === a ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 15, strokeWidth: 1.75 })) : null] }, a))) }) }))] }, col.id));
+                    }), onAddStage && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-board-addstage", "aria-label": addStageLabel, onClick: onAddStage, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), dragId &&
                 ghost &&
                 (() => {
                     const draggedCard = cards.find((c) => c.id === dragId);
@@ -281,7 +315,7 @@ function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLa
                             top: ghost.y,
                             width: ghost.width,
                             height: ghost.height,
-                        }, children: renderCard(draggedCard) }));
+                        }, children: renderCard(draggedCard, cardDensity) }));
                 })(), (0, jsx_runtime_1.jsx)("div", { className: "crisp-board-live", role: "status", "aria-live": "assertive", children: announcement })] }));
 }
 Board.displayName = "Board";

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

@@ -18,8 +18,33 @@ const tokens_1 = require("../../tokens");
 // reference lacks).
 const config = (0, core_1.defineRecipe)({
     name: "board",
-    base: `display: flex; gap: ${tokens_1.contract.space["2"]}; height: 100%; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; overflow-x: auto; align-items: flex-start; font-family: ${tokens_1.contract.font.sans};
-    & .crisp-board-col { display: flex; flex-direction: column; width: 268px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; }
+    base: `display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; height: 100%; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
+    /* #718: the density toolbar's own row -- everything that used to be on
+       the root (padding/overflow/the columns themselves) moves to
+       .crisp-board-row below so this can sit above it, unscrolled. */
+    & .crisp-board-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["3"]}; flex-shrink: 0; }
+    /* Measured live (Deals pipeline): a 54×28px group, 24×24px buttons,
+       2px padding/gap -- an 8px gap between the two groups comes from the
+       toolbar's own \`gap\` above. */
+    & .crisp-board-density { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
+    & .crisp-board-density button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 8px; background: none; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-family: inherit; cursor: pointer; }
+    & .crisp-board-density button[data-state="on"] { background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-board-row { display: flex; gap: ${tokens_1.contract.space["2"]}; flex: 1; min-height: 0; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; overflow-x: auto; align-items: flex-start; }
+    & .crisp-board-col { display: flex; flex-direction: column; width: 268px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; transition: width 0.15s; }
+    /* #718: a collapsed column is a 52px vertical rail -- header only (dot
+       + count stacked above a vertical-rl title), body/footer hidden
+       entirely. Measured live: 52px width, 8px 0 padding on the header,
+       14px/600 title text. */
+    & .crisp-board-col[data-density="collapse"] { width: 52px; }
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-header { flex-direction: column; align-items: center; height: auto; padding: ${tokens_1.contract.space["2"]} 0; gap: ${tokens_1.contract.space["1"]}; }
+    /* Measured stacking order (top to bottom): dot, count, THEN the vertical
+       title -- reordered visually via \`order\`, not by changing the JSX/DOM
+       order, which stays dot/title/count (reading order, unaffected by
+       density). */
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-title { order: 1; writing-mode: vertical-rl; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; }
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-count { order: 0; }
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-body,
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-footer { display: none; }
     & .crisp-board-col-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 36px; padding: 0 ${tokens_1.contract.space["1"]}; flex-shrink: 0; }
     & .crisp-board-col-dot { width: 12px; height: 12px; border-radius: ${tokens_1.contract.radius.full}; flex-shrink: 0; }
     & .crisp-board-col-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
@@ -38,6 +63,14 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-board-newcard { display: flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; flex-shrink: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
     & .crisp-board-newcard:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent); color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-board-card { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; cursor: grab; touch-action: none; }
+    /* #718: a collapsed card is a single 40px row -- measured live and
+       independent of \`c.size.tableRow\`/\`tableHeader\` (36/40px) even
+       though it happens to match the latter; a plain literal, not a
+       cross-reference to a token measured for a different surface.
+       \`renderCard\`'s own second argument is what actually decides what a
+       collapsed card SHOWS (Board never sees inside its opaque output);
+       this only supplies the row-shaped box that content sits in. */
+    & .crisp-board-card[data-density="collapse"] { flex-direction: row; align-items: center; height: 40px; padding: 0 ${tokens_1.contract.space["3"]}; }
     & .crisp-board-card:active { cursor: grabbing; }
     & .crisp-board-card[data-dragging] { opacity: 0.4; }
     & .crisp-board-card:focus { outline: none; }
@@ -57,6 +90,13 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-board-col-calc[data-empty] { opacity: 0.7; }
     & .crisp-board-col-calc-label { text-transform: capitalize; }
     & .crisp-board-col-calc-value { color: ${tokens_1.contract.fgPrimary}; font-variant-numeric: tabular-nums; }
+    /* #718: "Add stage" -- measured live: 52×52px, transparent, a 1px
+       dashed border (rgb(230,231,234), exactly \`borderDropzone\`/\`line150\`
+       -- the same dashed-border colour ImportDialog's own dropzone already
+       uses, not borderSubtle/line100, a close but different value), radius.xl
+       (16px), a centered 16px "+". */
+    & .crisp-board-addstage { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border: 1px dashed ${tokens_1.contract.borderDropzone}; border-radius: ${tokens_1.contract.radius.xl}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-board-addstage:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
     /* announced, never drawn */
     & .crisp-board-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;

package/dist/cjs/product/comments/comments.js

@@ -369,7 +369,7 @@ function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResol
     const activeThread = activeThreadId
         ? threads.find((t) => t.id === activeThreadId)
         : null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, comments_recipe_1.commentsRecipe)({ className }), role: "dialog", "aria-label": title, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-head", children: [activeThread ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-title-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CommentRow, { comment: activeThread.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: activeThread.resolved, resolvedLabel: activeThread.resolved
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, comments_recipe_1.commentsRecipe)({ className }), role: "dialog", "aria-label": title, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-head", children: [activeThread ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-title-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CommentRow, { comment: activeThread.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: activeThread.resolved, resolvedLabel: activeThread.resolved
                                 ? activeThread.resolvedBy?.id === currentUserId ||
                                     !activeThread.resolvedBy
                                     ? resolvedByYouLabel
@@ -426,6 +426,15 @@ function CommentCountBadge({ count, hovered, onOpen, onOpenPreview, label: label
                 ? `crisp-comments-badge ${className}`
                 : "crisp-comments-badge", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-badge-dot" }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("span", { className: className ? `crisp-comments-badge ${className}` : "crisp-comments-badge", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-comments-badge", "aria-label": label, onClick: onOpen, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 12, strokeWidth: 2, "aria-hidden": "true" }), count > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-badge-count", children: count }))] }), onOpenPreview && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-badge", "aria-label": previewLabel, onClick: onOpenPreview, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { "data-rtl-flip": "", size: 12, strokeWidth: 2, "aria-hidden": "true" }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("span", { className: className ? `crisp-comments-badge ${className}` : "crisp-comments-badge", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-comments-badge-trigger", "aria-label": label, onClick: (ev) => {
+                    // this badge lives in a grid row (crisp/#601 supersession) whose
+                    // own click opens the record -- the same stopPropagation every
+                    // other per-row affordance in that cell already uses.
+                    ev.stopPropagation();
+                    onOpen();
+                }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 12, strokeWidth: 2, "aria-hidden": "true" }), count > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-badge-count", children: count }))] }), onOpenPreview && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-badge-preview", "aria-label": previewLabel, onClick: (ev) => {
+                    ev.stopPropagation();
+                    onOpenPreview();
+                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }));
 }
 CommentCountBadge.displayName = "CommentCountBadge";

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

@@ -143,11 +143,21 @@ const config = (0, core_1.defineRecipe)({
 
     /* Row badge (CommentCountBadge) -- lives in its own class family so the
        grid lanes can drop it into a cell without pulling in the panel's
-       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
-       icon + 12px count text, both at 55% ink, replacing the dot. */
-    .crisp-comments-badge { box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); }
+       CSS. Re-measured live on a real commented row (crisp/#601
+       supersession, right-aligned in a DataTable primary column): a 6px
+       grey dot at rest (unchanged, already matched); on hover, the trigger
+       button is auto-width with a 12px icon + 12px/500 count text,
+       "padding: 2px 6px 2px 4px", radius 6px -- distinct from the preview
+       button beside it, a fixed 20px square with a 16px icon, same radius.
+       Both share the 55%-ink idle colour and darken on their OWN hover
+       (color-mix 4%, the same formula DataTable's own #601 icons use). */
+    .crisp-comments-badge { box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
     .crisp-comments-badge-dot { box-sizing: border-box; width: 6px; height: 6px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 38%, transparent); }
-    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    .crisp-comments-badge-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: 20px; margin: 0; padding: 2px ${tokens_1.contract.space["1.5"]} 2px ${tokens_1.contract.space["1"]}; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer; }
+    .crisp-comments-badge-trigger:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    .crisp-comments-badge-preview { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    .crisp-comments-badge-preview:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium}; }
     [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
   `,
 });

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

@@ -193,7 +193,6 @@ exports.recordsTableLabels = {
     selectionAnnouncement: (count) => count === 0 ? "Selection cleared" : `${count} selected`,
     delete: "Delete",
     sendEmail: "Send email",
-    exportCsv: "Export CSV",
     runWorkflow: "Run workflow",
     calculate: "Calculate",
     emptyPlaceholder: "Empty",
@@ -1043,21 +1042,6 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         setData((prev) => prev.filter((r) => !selected.has(r.id)));
         setSelected(new Set());
     };
-    const exportSelected = () => {
-        const picked = data.filter((r) => selected.has(r.id));
-        const esc = (s) => `"${s.replace(/"/g, '""')}"`;
-        const csv = [
-            cols.map((c) => esc(c.label)).join(","),
-            ...picked.map((r) => cols.map((c) => esc(cellText(c, r))).join(",")),
-        ].join("\n");
-        const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }));
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = "records.csv";
-        a.click();
-        URL.revokeObjectURL(url);
-        setOpenMenu(null);
-    };
     const entityCol = cols.find((c) => c.type === "entity");
     // "Add to list" → pin the selected rows (shows a ★ on the entity)
     const addToList = () => {
@@ -1303,7 +1287,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                             // filtered-to-zero ring -- two different Attio surfaces.
                             variant: !activeFilters && emptyStateExtra ? "records" : "page", icon: activeFilters ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: !activeFilters && emptyStateExtra ? 40 : 18, strokeWidth: 1.25, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete }) })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: ctxRef, className: "crisp-recordstable-menu crisp-recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item crisp-recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 exports.defaultColumns = [

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

@@ -41,28 +41,43 @@ const menu_1 = require("../../components/menu");
 const select_1 = require("../../components/select");
 const core_1 = require("../../core");
 const savedviews_recipe_1 = require("./savedviews.recipe");
+// #618: the same fallback Select's own `optionText` gives a non-string
+// `label` — `keywords` first, then the plain string itself, then (rather
+// than becoming permanently unmatchable) the view's own `id`.
+function viewText(v) {
+    if (v.keywords)
+        return v.keywords;
+    return typeof v.name === "string" ? v.name : v.id;
+}
 /**
  * A saved-view switcher — measured from Attio's "All Companies ▾" menu. A
  * chip trigger opens a popover listing every saved view as a `role="option"`
  * 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.
  */
-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 }) {
+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 }) {
     const createLabel = (0, core_1.useCrispMessage)(createLabelProp, "Create new view");
     const renameLabel = (0, core_1.useCrispMessage)(renameLabelProp, "Rename");
     const duplicateLabel = (0, core_1.useCrispMessage)(duplicateLabelProp, "Duplicate");
     const deleteLabel = (0, core_1.useCrispMessage)(deleteLabelProp, "Delete");
     const favoriteLabel = (0, core_1.useCrispMessage)(favoriteLabelProp, "Add to favorites");
     const viewOptionsLabel = (0, core_1.useCrispMessage)(viewOptionsLabelProp, "View options");
+    const searchPlaceholder = (0, core_1.useCrispMessage)(searchPlaceholderProp, "Search views...");
+    const searchLabel = (0, core_1.useCrispMessage)(searchLabelProp, "Filter views");
+    const emptyLabel = (0, core_1.useCrispMessage)(emptyLabelProp, "No results");
     const autoId = React.useId();
     const triggerId = `${autoId}-trigger`;
     // role="combobox" (below) does not take its name from content — unlike a
@@ -81,13 +96,22 @@ function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename
     const [up, setUp] = React.useState(false);
     const [pos, setPos] = React.useState({});
     const [highlight, setHighlight] = React.useState(-1);
+    // #618: the panel's own "Search views..." box — real DOM focus lives here
+    // while open, unlike the virtual-focus-on-trigger model this component
+    // used before the search box existed.
+    const [query, setQuery] = React.useState("");
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
     const panelRef = React.useRef(null);
+    const searchRef = React.useRef(null);
     const activeView = views.find((v) => v.id === activeId) ?? null;
+    const q = query.trim().toLowerCase();
+    const filteredViews = q
+        ? views.filter((v) => viewText(v).toLowerCase().includes(q))
+        : views;
     // the trailing "Create new view" row is one more enabled index, past every
-    // real view
-    const createIndex = views.length;
+    // (possibly filtered) view -- it never itself filters out
+    const createIndex = filteredViews.length;
     const openPanel = () => {
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
@@ -100,8 +124,14 @@ function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename
             setUp(flipUp);
             setPos(style);
         }
+        setQuery("");
         setHighlight(-1);
         setOpen(true);
+        // Same race Select's own `searchable` variant already guards against
+        // (its own comment: calling focus synchronously here loses to the
+        // portal's own mount timing) -- a `requestAnimationFrame` after the
+        // state update that renders the input wins it.
+        requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
     const close = React.useCallback(() => {
         setOpen(false);
@@ -113,7 +143,7 @@ function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename
             close();
         }
         else {
-            const v = views[highlight];
+            const v = filteredViews[highlight];
             if (v) {
                 onSelect(v.id);
                 close();
@@ -121,7 +151,7 @@ function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename
         }
     };
     const { onKeyDown: onNavKeys } = (0, select_1.useListboxKeyboard)({
-        enabledIndexes: Array.from({ length: views.length + 1 }, (_, i) => i),
+        enabledIndexes: Array.from({ length: filteredViews.length + 1 }, (_, i) => i),
         highlight,
         setHighlight,
         commit,
@@ -180,25 +210,26 @@ function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename
     const triggerIcon = activeView ? activeView.icon : icon;
     const triggerLabel = activeView ? activeView.name : label;
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, savedviews_recipe_1.savedviewsRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: triggerId, type: "button", 
-                // combobox, not the bare default "button" role: aria-activedescendant
-                // (the virtual-focus highlight, same model Select/MultiSelect use
-                // without a search field) is only valid on a widget role that
-                // supports it, and combobox's aria-haspopup explicitly allows
-                // "dialog" — the value Attio's own trigger measures — alongside the
-                // more common "listbox".
-                role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? panelId : undefined, "aria-activedescendant": open && highlight >= 0 ? optionId(highlight) : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, "data-open": open ? "" : undefined, className: "crisp-savedviews-trigger", onClick: () => (open ? setOpen(false) : openPanel()), onKeyDown: (e) => {
-                    if (open)
-                        onNavKeys(e);
-                    else if (e.key === "ArrowDown" || e.key === "Enter") {
+                // combobox: aria-haspopup explicitly allows "dialog" — the value
+                // Attio's own trigger measures — alongside the more common
+                // "listbox". aria-activedescendant lives on the search input (#618)
+                // now that real focus moves there while open, not here — the same
+                // split Select's own `searchable` variant already uses.
+                role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? panelId : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, "data-open": open ? "" : undefined, className: "crisp-savedviews-trigger", onClick: () => (open ? setOpen(false) : openPanel()), onKeyDown: (e) => {
+                    // navigation is handled on the search input while open (#618)
+                    if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {
                         e.preventDefault();
                         openPanel();
                     }
-                }, children: [triggerIcon != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-trigger-icon", children: triggerIcon })), (0, jsx_runtime_1.jsx)("span", { id: triggerLabelId, className: "crisp-savedviews-trigger-label", children: triggerLabel }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-savedviews-trigger-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, id: panelId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, className: "crisp-savedviews-panel", "data-up": up ? "" : undefined, style: pos, children: [views.map((v, i) => {
+                }, children: [triggerIcon != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-trigger-icon", children: triggerIcon })), (0, jsx_runtime_1.jsx)("span", { id: triggerLabelId, className: "crisp-savedviews-trigger-label", children: triggerLabel }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-savedviews-trigger-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, id: panelId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, className: "crisp-savedviews-panel", "data-up": up ? "" : undefined, style: pos, children: [(0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchLabel, "aria-controls": panelId, "aria-activedescendant": highlight >= 0 ? optionId(highlight) : undefined, className: "crisp-savedviews-search", value: query, onChange: (e) => {
+                                setQuery(e.target.value);
+                                setHighlight(-1);
+                            }, onKeyDown: onNavKeys }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-savedviews-search-sep", "aria-hidden": "true" }), filteredViews.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-savedviews-empty", children: emptyLabel })), filteredViews.map((v, i) => {
                             const selected = v.id === activeId;
                             return ((0, jsx_runtime_1.jsxs)("div", { id: optionId(i), role: "option", "aria-selected": selected, "aria-current": selected ? "page" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-savedviews-row", onMouseEnter: () => setHighlight(i), onClick: () => {
                                     onSelect(v.id);
                                     close();
-                                }, children: [v.icon != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-icon", children: v.icon })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-label", children: v.name }), v.shared && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-shared", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Users2, { size: 12, strokeWidth: 1.75 }) })), (0, jsx_runtime_1.jsx)("div", { className: "crisp-savedviews-kebab-slot", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-savedviews-kebab", "aria-label": viewOptionsLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, strokeWidth: 1.75 }) }), children: [onToggleFavorite && ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onToggleFavorite(v.id), children: favoriteLabel })), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onRename(v.id), children: renameLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onDuplicate(v.id), children: duplicateLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: () => onDelete(v.id), children: deleteLabel })] }) })] }, v.id));
+                                }, children: [v.icon != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-icon", children: v.icon })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-label", children: v.name }), v.shared && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-shared", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Users2, { size: 12, strokeWidth: 1.75 }) })), (0, jsx_runtime_1.jsx)("div", { className: "crisp-savedviews-kebab-slot", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-savedviews-kebab", "aria-label": viewOptionsLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, strokeWidth: 1.75 }) }), children: [onToggleFavorite && ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onToggleFavorite(v.id), children: favoriteLabel })), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onRename(v.id), children: renameLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onDuplicate(v.id), children: duplicateLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: () => onDelete(v.id), children: deleteLabel }), (v.createdBy != null || v.createdAt != null) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-savedviews-kebab-footer", children: [v.createdBy != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-savedviews-kebab-footer-line", children: v.createdBy })), v.createdAt != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-savedviews-kebab-footer-line", children: v.createdAt }))] })] }))] }) })] }, v.id));
                         }), (0, jsx_runtime_1.jsxs)("div", { id: optionId(createIndex), role: "option", "aria-selected": false, "data-highlighted": highlight === createIndex ? "" : undefined, className: "crisp-savedviews-row", onMouseEnter: () => setHighlight(createIndex), onClick: () => {
                                 onCreate();
                                 close();

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

@@ -63,6 +63,21 @@ const config = (0, core_1.defineRecipe)({
     .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
     .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
 
+    /* #618 (P-007): the panel's own "Search views..." box — measured live:
+       32px tall, 6px/8px padding, NO border/background/leading icon of its
+       own (unlike Select's own bordered searchable-input pill), 14px text.
+       A hairline divider (borderSubtle, 1px, 3px top margin) separates it
+       from the view list, matching the divider Attio's own kebab menu uses
+       between its action items and the "Created by" footer below. */
+    .crisp-savedviews-search {
+      box-sizing: border-box; display: block; width: 100%; height: 32px; flex-shrink: 0;
+      margin: 0; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]}; border: none; background: none;
+      font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none;
+    }
+    .crisp-savedviews-search::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    .crisp-savedviews-search-sep { height: 1px; flex-shrink: 0; margin: 3px 0 0; background: ${tokens_1.contract.borderSubtle}; }
+    .crisp-savedviews-empty { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgMuted}; }
+
     .crisp-savedviews-row {
       box-sizing: border-box; position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]};
       height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]};
@@ -94,6 +109,18 @@ const config = (0, core_1.defineRecipe)({
     .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
     .crisp-savedviews-kebab[data-open] { opacity: 1; }
     .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgPrimary}; }
+
+    /* #618 (P-008): the kebab menu's own "Created by X" / date footer —
+       measured live: 2 stacked lines, 6px/8px padding, 2px gap between
+       them, 12px/500 text, BOTH lines the same color-mix 50% muted (a
+       distinct value from the 63% mix #592's chip breadcrumb uses —
+       independently measured, not assumed to match). */
+    .crisp-savedviews-kebab-footer {
+      display: flex; flex-direction: column; gap: 2px;
+      padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]};
+      font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium};
+      color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent);
+    }
   `,
     variants: {},
     defaultVariants: {},

package/dist/comments.css

@@ -12,11 +12,21 @@
 
     /* Row badge (CommentCountBadge) -- lives in its own class family so the
        grid lanes can drop it into a cell without pulling in the panel's
-       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
-       icon + 12px count text, both at 55% ink, replacing the dot. */
-    .crisp-comments-badge { box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: var(--crisp-space-1); border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); }
+       CSS. Re-measured live on a real commented row (crisp/#601
+       supersession, right-aligned in a DataTable primary column): a 6px
+       grey dot at rest (unchanged, already matched); on hover, the trigger
+       button is auto-width with a 12px icon + 12px/500 count text,
+       "padding: 2px 6px 2px 4px", radius 6px -- distinct from the preview
+       button beside it, a fixed 20px square with a 16px icon, same radius.
+       Both share the 55%-ink idle colour and darken on their OWN hover
+       (color-mix 4%, the same formula DataTable's own #601 icons use). */
+    .crisp-comments-badge { box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); }
     .crisp-comments-badge-dot { box-sizing: border-box; width: 6px; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 38%, transparent); }
-    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    .crisp-comments-badge-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 20px; margin: 0; padding: 2px var(--crisp-space-1-5) 2px var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; }
+    .crisp-comments-badge-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
+    .crisp-comments-badge-preview { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    .crisp-comments-badge-preview:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
+    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; font-weight: var(--crisp-weight-medium); }
     [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
   
 .crisp-comments {