@crisp-ui-kit/crisp 0.54.7 → 0.54.9

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/cjs/product/sidebar/sidebar.js

@@ -80,42 +80,83 @@ exports.ATTIO_SIDEBAR_WORKSPACE = {
     avatarLabel: "T",
     avatarTone: "cyan",
 };
-/** The measured main nav — the default `items` prop. */
+/** The measured main nav — the default `items` prop.
+ *
+ * `shortcut` is set only where a live hover produced Attio's "G then
+ * <letter>" tooltip (crisp#633, P-108) -- Calls/Sequences/Workflows showed
+ * no tooltip at all after a 1.2s hover, tried repeatedly, so they're left
+ * without one rather than guessed. */
 exports.ATTIO_SIDEBAR_ITEMS = [
-    { label: "Home", icon: IconHome },
+    {
+        label: "Home",
+        icon: IconHome,
+        shortcut: { description: "Go to home page", keys: ["g", "h"] },
+    },
     {
         label: "Tasks",
         icon: IconTasks,
         active: true,
         trailing: ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "brand", variant: "solid", size: "small", children: "1" })),
+        shortcut: { description: "Go to tasks page", keys: ["g", "t"] },
+    },
+    {
+        label: "Notes",
+        icon: IconNotes,
+        shortcut: { description: "Go to all notes page", keys: ["g", "n"] },
+    },
+    {
+        label: "Emails",
+        icon: IconEmails,
+        shortcut: { description: "Go to email drafts page", keys: ["g", "e"] },
     },
-    { label: "Notes", icon: IconNotes },
-    { label: "Emails", icon: IconEmails },
     { label: "Calls", icon: IconCalls },
-    { label: "Reports", icon: IconReports },
+    {
+        label: "Reports",
+        icon: IconReports,
+        shortcut: { description: "Go to reports page", keys: ["g", "d"] },
+    },
     { label: "Sequences", icon: IconSequences },
     { label: "Workflows", icon: IconWorkflows },
 ];
-/** The measured Records section — the default `recordsSection` prop. */
+/** The measured Records section — the default `recordsSection` prop. Same
+ * `shortcut` caveat as `ATTIO_SIDEBAR_ITEMS`: Deals/Users/Workspaces showed
+ * no hover tooltip. `actions` is Attio's own gear + add glyph (P-109),
+ * measured aria-labels "Record options" / "Create new objects or enable
+ * standard objects". */
 exports.ATTIO_SIDEBAR_RECORDS_SECTION = {
     label: "Records",
     items: [
-        { label: "Companies", tone: "brand", glyph: GlyphCompanies },
-        { label: "People", tone: "brand", glyph: GlyphPeople },
+        {
+            label: "Companies",
+            tone: "brand",
+            glyph: GlyphCompanies,
+            shortcut: { description: "Go to all companies page", keys: ["g", "c"] },
+        },
+        {
+            label: "People",
+            tone: "brand",
+            glyph: GlyphPeople,
+            shortcut: { description: "Go to all people page", keys: ["g", "p"] },
+        },
         { label: "Deals", tone: "orange", glyph: GlyphDeals },
         { label: "Users", tone: "cyan", glyph: GlyphUsers },
         { label: "Workspaces", tone: "purple", glyph: GlyphWorkspaces },
     ],
+    actions: defaultSectionActions("Record options", "Create new objects or enable standard objects"),
 };
-/** The measured Lists section — the default `listsSection` prop. */
+/** The measured Lists section — the default `listsSection` prop. `actions`
+ * per P-109, measured aria-labels "List options" / "Add list". */
 exports.ATTIO_SIDEBAR_LISTS_SECTION = {
     label: "Lists",
     newListLabel: "+ New list",
+    actions: defaultSectionActions("List options", "Add list"),
 };
-/** The measured Chats section — the default `chatsSection` prop. */
+/** The measured Chats section — the default `chatsSection` prop. `actions`
+ * per P-109, measured aria-labels "Chat options" / "New chat". */
 exports.ATTIO_SIDEBAR_CHATS_SECTION = {
     label: "Chats",
     items: [{ label: "In-app notification for deal wins", icon: IconChat }],
+    actions: defaultSectionActions("Chat options", "New chat"),
 };
 /** The measured footer copy — the default `footer` prop. */
 exports.ATTIO_SIDEBAR_FOOTER = {
@@ -124,8 +165,20 @@ exports.ATTIO_SIDEBAR_FOOTER = {
     trialText: "13 days left on trial!",
     trialActionLabel: "Keep Pro",
 };
-function SectionHeader({ label, open, onToggle, }) {
-    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [(0, jsx_runtime_1.jsx)(IconChevronMini, {}), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
+function SectionHeader({ label, open, onToggle, actions, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-section-header-row", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [(0, jsx_runtime_1.jsx)(IconChevronMini, {}), (0, jsx_runtime_1.jsx)("span", { children: label })] }), actions != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section-actions", children: actions }))] }));
+}
+/** Attio's own two hover-only header actions (crisp#633, P-109), measured on
+ * the Records/Lists/Chats section headers: a gear ("<Section> options") and
+ * an add glyph -- re-measured on all three, the add icon is the SAME glyph
+ * (`icon-defs/cab3218f7a08cd13.svg`) reused everywhere, not a per-section
+ * one, so `PackagePlus` covers Lists/Chats too, not just Records' own
+ * "Create new objects" link. Both are decorative defaults with no handler,
+ * the same trade a consumer already makes with `footer`'s default
+ * "Getting started"/"Keep Pro" buttons — a consumer wanting the real
+ * behaviour passes its own `actions` node instead. */
+function defaultSectionActions(optionsLabel, addLabel) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-sidebar-section-action", "aria-label": optionsLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-sidebar-section-action", "aria-label": addLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PackagePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }));
 }
 exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = exports.ATTIO_SIDEBAR_WORKSPACE, workspaceMenu, items = exports.ATTIO_SIDEBAR_ITEMS, recordsSection = exports.ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = exports.ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = exports.ATTIO_SIDEBAR_CHATS_SECTION, groups, footer = exports.ATTIO_SIDEBAR_FOOTER, commandItems, commandOpen: commandOpenProp, defaultCommandOpen, onCommandOpenChange, commandShortcut = true, "aria-label": ariaLabel = "Main", ...props }, ref) => {
     // Seeded once, on mount, from whatever groups start collapsed — not
@@ -174,14 +227,14 @@ exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, coll
         });
     }, []);
     const workspaceTrigger = ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-ws", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-ws-name", children: workspace.name }), (0, jsx_runtime_1.jsx)(IconChevronDown, {})] }));
-    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.nav, { ref: ref, asChild: asChild, "aria-label": ariaLabel, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-ws-row", children: [workspaceMenu ? ((0, jsx_runtime_1.jsx)(menu_1.Menu, { trigger: workspaceTrigger, className: "crisp-sidebar-ws-menuroot", contentClassName: "crisp-sidebar-ws-menu-content", children: workspaceMenu })) : (workspaceTrigger), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: (0, jsx_runtime_1.jsx)(IconCollapsePanel, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-searchrow", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-label", children: searchLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: (0, jsx_runtime_1.jsx)(IconInbox, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-divider" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing, href, onSelect }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: href ?? "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, onClick: onSelect, children: label }, href ?? label))) }), groups ? (
+    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.nav, { ref: ref, asChild: asChild, "aria-label": ariaLabel, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-ws-row", children: [workspaceMenu ? ((0, jsx_runtime_1.jsx)(menu_1.Menu, { trigger: workspaceTrigger, className: "crisp-sidebar-ws-menuroot", contentClassName: "crisp-sidebar-ws-menu-content", children: workspaceMenu })) : (workspaceTrigger), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: (0, jsx_runtime_1.jsx)(IconCollapsePanel, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-searchrow", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-label", children: searchLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: (0, jsx_runtime_1.jsx)(IconInbox, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-divider" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing, href, onSelect, shortcut, }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: href ?? "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, onClick: onSelect, shortcut: shortcut, children: label }, href ?? label))) }), groups ? (
             // #325: navigation as data, reusing the exact section markup/
             // recipe above — SectionHeader + .crisp-sidebar-section — instead
             // of the three fixed Attio sections.
             groups.map((group) => {
                 const groupKey = group.key ?? group.label;
-                return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: group.label, open: !collapsedSections.has(groupKey), onToggle: () => toggleSection(groupKey) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has(groupKey) ? "" : undefined, children: group.items.map((item) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: item.href ?? "#", active: item.active, icon: item.icon ? (0, jsx_runtime_1.jsx)(item.icon, {}) : undefined, trailing: item.count, onClick: item.onSelect, children: item.label }, item.href ?? item.label))) })] }, groupKey));
-            })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: tone, children: (0, jsx_runtime_1.jsx)(Glyph, {}) }), children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon, active, trailing, href, onSelect, }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: href ?? "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, onClick: onSelect, children: label }, href ?? label))) })] })), footer !== false &&
+                return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: group.label, open: !collapsedSections.has(groupKey), onToggle: () => toggleSection(groupKey), actions: group.actions }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has(groupKey) ? "" : undefined, children: group.items.map((item) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: item.href ?? "#", active: item.active, icon: item.icon ? (0, jsx_runtime_1.jsx)(item.icon, {}) : undefined, trailing: item.count, onClick: item.onSelect, shortcut: item.shortcut, children: item.label }, item.href ?? item.label))) })] }, groupKey));
+            })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records"), actions: recordsSection.actions }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph, shortcut }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: tone, children: (0, jsx_runtime_1.jsx)(Glyph, {}) }), shortcut: shortcut, children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists"), actions: listsSection.actions }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats"), actions: chatsSection.actions }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon, active, trailing, href, onSelect, shortcut, }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: href ?? "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, onClick: onSelect, shortcut: shortcut, children: label }, href ?? label))) })] })), footer !== false &&
                 (isSidebarFooterCopy(footer) ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", className: "crisp-sidebar-pill", children: footer.gettingStartedLabel }), (0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(IconInvite, {}), children: footer.inviteLabel }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-trial", children: [(0, jsx_runtime_1.jsx)("span", { children: footer.trialText }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-footer", children: footer }))), (0, jsx_runtime_1.jsx)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen, items: commandItems })] }));
 });
 exports.Sidebar.displayName = "Sidebar";

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

@@ -19,9 +19,14 @@ const config = (0, core_1.defineRecipe)({
   ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .crisp-sidebar-section { display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px}; margin-top: ${tokens_1.contract.space["2"]}; }
   & .crisp-sidebar-section[data-collapsed] { display: none; }
   & .crisp-sidebar-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; }
-  & .crisp-sidebar-section-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; margin: 0; border: none; background: none; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+  & .crisp-sidebar-section-header-row { display: flex; align-items: center; }
+  & .crisp-sidebar-section-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
   & .crisp-sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; }
   & .crisp-sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); }
+  & .crisp-sidebar-section-actions { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; flex-shrink: 0; padding-inline-end: ${tokens_1.contract.space["1"]}; opacity: 0; transition: opacity .12s ease; }
+  & .crisp-sidebar-section-header-row:hover .crisp-sidebar-section-actions, & .crisp-sidebar-section-header-row:focus-within .crisp-sidebar-section-actions { opacity: 1; }
+  & .crisp-sidebar-section-action { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: ${tokens_1.contract.space["5"]}; height: ${tokens_1.contract.space["5"]}; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: transparent; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-family: inherit; cursor: pointer; text-decoration: none; transition: background-color 0.14s, color 0.14s; }
+  & .crisp-sidebar-section-action:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
   & .crisp-sidebar-ws-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.header}; padding: 0 ${tokens_1.contract.space["2"]}; }
   & .crisp-sidebar-ws-menuroot { display: flex; flex: 1; min-width: 0; }
   & .crisp-sidebar-ws { box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: none; background: none; border-radius: ${tokens_1.contract.radius.lg}; font-family: inherit; font-size: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color 0.16s; }

package/dist/cjs/tokens/palette.js

@@ -20,6 +20,15 @@ exports.palette = {
     // off-limits to toggle, same restriction as `ringField`/`ringSwitch`) —
     // reuses `line200`'s dark line colour rather than inventing a new one.
     line150: { light: "#e6e7ea", dark: "#212224" },
+    // The filter chip's field/value segments while the condition is
+    // incomplete (no value typed yet) — measured live on Attio's own filter
+    // chip (`rgb(246,247,247)`), lighter than `gray50` (#f4f4f5, close but not
+    // equal). The chip's operator/kebab segments stay `gray00` in the same
+    // state; only the two text-content segments carry this muted fill. Dark
+    // value not independently re-measured (Attio's dark theme is off-limits to
+    // toggle) — reuses `gray50`'s dark value, the nearest existing "muted
+    // surface" tone, rather than inventing a third dark gray.
+    gray25: { light: "#f6f7f7", dark: "#101112" },
     ringNeutral: { light: "transparent", dark: "#212224" },
     // Text-entry fields (Input, Textarea) — measured live on app.attio.com's
     // Settings page, a real typed field: `inset 0 0 0 1px rgba(0,0,0,.06)`,
@@ -40,6 +49,22 @@ exports.palette = {
     ringSwitch: { light: "#d9dade", dark: "#212224" },
     tileActive: { light: "#ffffff", dark: "#101112" },
     tileActiveShadow: { light: "rgba(0,0,0,0.04)", dark: "rgba(0,0,0,0)" },
+    // Dialog's page-dimming backdrop (crisp#677) — measured live behind the
+    // Create-attribute FormDialog, both themes: `rgba(0,0,0,.25)` light,
+    // `rgba(0,0,0,.55)` dark. `Dialog`'s own backdrop had shipped fully
+    // `transparent` (AUTHORING's Lesson 14 measured the command palette has
+    // NO dark backdrop and that got generalized to every `Dialog`, which this
+    // corrects — the palette is a different surface from a plain content
+    // dialog and really does dim the page).
+    bgScrim: { light: "rgba(0,0,0,0.25)", dark: "rgba(0,0,0,0.55)" },
+    // The discard-confirm's description line (crisp#677, `Dialog`'s new
+    // `variant="alert"`) — measured live, both themes, over `popoverBg`: a
+    // theme-relative alpha rather than a flat gray, so it stays legible if
+    // `popoverBg` itself ever shifts.
+    fgAlertDescription: {
+        light: "rgba(0,0,0,0.63)",
+        dark: "rgba(255,255,255,0.6)",
+    },
     overlayFrost: { light: "#ffffff", dark: "#1c1d1f" },
     shadowOverlay1: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.48)" },
     shadowOverlay2: { light: "rgba(28,40,64,0.16)", dark: "rgba(0,0,0,0.64)" },
@@ -116,7 +141,13 @@ exports.palette = {
     // fg-muted/bg-raised themselves (system-wide, measured from Attio, kept
     // as-is per build/spec-check.mjs's own note), this token exists only for
     // Badge's soft-neutral text, so darkening it doesn't move any other surface.
-    softNeutralText: { light: "#686870", dark: "#9a9aa2" },
+    // crisp#696: re-measured live (Standard/System pills, object settings) at
+    // rgb(80,81,85) -- darker than the #686870 above, which only ever cleared
+    // AA, never matched the reference. Only the light side moves: dark
+    // (#9a9aa2) already passed and Attio's own dark theme stays off-limits to
+    // toggle, the same restriction this file notes throughout (ringField,
+    // ringSwitch, line150).
+    softNeutralText: { light: "#505155", dark: "#9a9aa2" },
     // Badge's purple/role-pill tone (crisp#506) -- measured live off Attio's
     // own role pill ("Admin", app.attio.com/<ws>/settings/members-and-teams):
     // background rgb(245,240,255), text rgb(98,56,181), ring rgb(232,221,254)

package/dist/cjs/tokens/semantic.js

@@ -11,15 +11,26 @@ exports.semantic = {
     fgOnTone: "ink",
     bgSurface: "gray00",
     bgRaised: "gray50",
+    /** A surface lighter than `bgRaised` for content that isn't actionable
+     *  yet — the filter chip's field/value segments before the condition has
+     *  a value (see palette.ts's `gray25`). */
+    bgSurfaceMuted: "gray25",
     borderDefault: "line200",
     borderSubtle: "line100",
     /** ImportDialog's dashed dropzone border — see palette.ts's `line150`. */
     borderDropzone: "line150",
+    /** A hairline between adjacent same-height segments (the filter chip's
+     *  field/operator/value/kebab boxes) — same measured hex as
+     *  `borderDropzone` (`line150`), aliased under its own name because the
+     *  two consumers share nothing but the colour. */
+    borderDivider: "line150",
     ringNeutral: "ringNeutral",
     ringField: "ringField",
     ringSwitch: "ringSwitch",
     bgTileActive: "tileActive",
     shadowTileActive: "tileActiveShadow",
+    bgScrim: "bgScrim",
+    fgAlertDescription: "fgAlertDescription",
     bgOverlayFrost: "overlayFrost",
     shadowOverlay1: "shadowOverlay1",
     shadowOverlay2: "shadowOverlay2",

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 {
@@ -30,31 +40,50 @@
     & .crisp-comments-breadcrumb { display: flex; align-items: center; gap: var(--crisp-space-1); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-comments-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
     & .crisp-comments-body--pad-top { padding-top: var(--crisp-space-3); }
-    /* One comment row -- avatar 16px (Avatar size="sm"), 6px gap to the name/time line, 14px/600 name + 12px/500 63%-muted time, 14px/400 body two lines below. Hover actions fade in flush with the name line. */
+    /* One comment row -- avatar 16px (Avatar size="sm"), 6px gap to the name/time line, 14px/600 name + 12px/500 63%-muted time, 14px/400 body two lines below. Hover actions fade in flush with the name line. .crisp-comments-row-head's own height: 20px (above) is a single
+       text-line's worth, on the same assumption .crisp-comments-title/ .crisp-comments-breadcrumb already act on higher up in this same recipe -- a name that doesn't fit wraps to two lines with nothing
+       reserving room for the second one, overflowing straight into the
+       body text underneath (found live: this app's own dev-bypass author name, an email long enough to wrap, sat on top of the comment's own
+       body text). .crisp-comments-author gets the identical nowrap-
+       ellipsis treatment those two already have, plus min-width: 0 so a
+       flex item is actually allowed to shrink below its own text's natural width in the first place; .crisp-comments-time gets flex-shrink: 0 so it's the name that gives, never the timestamp -- the same "one
+       side shrinks, the other one doesn't" split PersonChip's own name/
+       avatar pair already uses (crisp#668/#671). */
     & .crisp-comments-row { position: relative; display: flex; gap: var(--crisp-space-1-5); }
     & .crisp-comments-row-main { flex: 1; min-width: 0; }
     & .crisp-comments-row-head { display: flex; align-items: baseline; gap: var(--crisp-space-1-5); height: 20px; }
-    & .crisp-comments-author { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
-    & .crisp-comments-time { font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); white-space: nowrap; }
+    & .crisp-comments-author { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    & .crisp-comments-time { flex-shrink: 0; font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); white-space: nowrap; }
     & .crisp-comments-resolved-label { display: flex; align-items: center; gap: var(--crisp-space-1); margin-bottom: var(--crisp-space-1); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-comments-body-text { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
-    /* Hover actions -- measured: 4 buttons, 28x28, radius 8, flush side-by-side (0 gap), transparent by default, 16px icon at 55% ink. */
+
+    /* Hover actions -- measured: 4 buttons, 28x28, radius 8, flush
+       side-by-side (0 gap), transparent by default, 16px icon at 55% ink. */
     & .crisp-comments-row-actions { position: absolute; top: 0; inset-inline-end: 0; display: flex; opacity: 0; pointer-events: none; background: var(--crisp-bg-surface); }
-    & .crisp-comments-row:hover .crisp-comments-row-actions, & .crisp-comments-row-actions:focus-within { opacity: 1; pointer-events: auto; }
+    & .crisp-comments-row:hover .crisp-comments-row-actions,
+    & .crisp-comments-row-actions:focus-within { opacity: 1; pointer-events: auto; }
     & .crisp-comments-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-comments-action:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
     & .crisp-comments-action[data-active] { color: var(--crisp-bg-brand-solid); }
-    /* Reactions -- measured: 28px pill, radius 8, subtle 4% ink fill, padding 4px 8px 4px 6px, gap 4px between the emoji glyph and count. */
+
+    /* Reactions -- measured: 28px pill, radius 8, subtle 4% ink fill,
+       padding 4px 8px 4px 6px, gap 4px between the emoji glyph and count. */
     & .crisp-comments-reactions { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-1-5); }
     & .crisp-comments-reaction { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 28px; padding: 4px 8px 4px 6px; border: none; border-radius: var(--crisp-radius-md); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); font-family: inherit; font-size: 12px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; }
     & .crisp-comments-reaction[data-reacted] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); }
     & .crisp-comments-reaction-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--crisp-radius-md); background: transparent; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s; }
     & .crisp-comments-row:hover .crisp-comments-reaction-add { opacity: 1; }
     & .crisp-comments-reaction-add:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+
     /* Reply-in-thread view -- an indented block of replies below the root. */
     & .crisp-comments-replies { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); padding-inline-start: var(--crisp-space-4); border-inline-start: 1px solid var(--crisp-border-subtle); }
+
     & .crisp-comments-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); padding: var(--crisp-space-6) var(--crisp-space-4); text-align: center; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-size: var(--crisp-text-lg); }
-    /* Composer -- measured: 14px/20px body text, 16px gap above the reply/mention icon row, Comment button 84x32 padding 6px 10px radius 9 (= radius.lg) brand-solid fill, 14px/500 white label, opacity .4 disabled / 1 enabled (no color/background change between the two). */
+
+    /* Composer -- measured: 14px/20px body text, 16px gap above the
+       reply/mention icon row, Comment button 84x32 padding 6px 10px radius
+       9 (= radius.lg) brand-solid fill, 14px/500 white label, opacity .4
+       disabled / 1 enabled (no color/background change between the two). */
     & .crisp-comments-composer { flex-shrink: 0; padding: var(--crisp-space-3) var(--crisp-space-4) var(--crisp-space-4); border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-comments-field { min-height: 20px; max-height: 120px; overflow-y: auto; font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-primary); outline: none; white-space: pre-wrap; word-break: break-word; }
     & .crisp-comments-field:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 2px; }
@@ -64,15 +93,22 @@
     & .crisp-comments-tool { 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; color: color-mix(in srgb, var(--crisp-fg-primary) 45%, transparent); font-family: inherit; cursor: pointer; }
     & .crisp-comments-tool:hover { color: var(--crisp-fg-primary); }
     /* Same fill/shadow as Button's own intent="primary" (crisp/button.recipe.ts) --
-       confirmed byte-identical against the live "Comment" button's computed box-shadow, so this reuses that literal rather than re-deriving it. 32px/radius.lg/6px-10px padding has no matching Button `size` yet (24/28/40 are the three that exist), so this stays hand-rolled instead of stretching one of those. */
+       confirmed byte-identical against the live "Comment" button's computed
+       box-shadow, so this reuses that literal rather than re-deriving it.
+       32px/radius.lg/6px-10px padding has no matching Button `size` yet
+       (24/28/40 are the three that exist), so this stays hand-rolled instead
+       of stretching one of those. */
     & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-brand-solid); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-on-brand); cursor: pointer; opacity: 1; transition: opacity .12s, background-color .12s; }
     & .crisp-comments-post:hover:not(:disabled) { background: var(--crisp-bg-brand-solid-pressed); }
     & .crisp-comments-post:disabled { opacity: .4; cursor: default; }
-    /* Filter menu -- measured: 220px, radius 12 (radius.xl), 4px padding, elevation.floating -- a plain reuse of crisp's own Menu, so no rules
+
+    /* Filter menu -- measured: 220px, radius 12 (radius.xl), 4px padding,
+       elevation.floating -- a plain reuse of crisp's own Menu, so no rules
        live here; kept as a comment for the record. */
 
     /* An inserted "@mention" chip in the composer -- same shape as
-       RichTextEditor's own `.crisp-rte-mention` (crisp#428), reused here rather than re-derived since it's the same atomic-chip affordance. */
+       RichTextEditor's own `.crisp-rte-mention` (crisp#428), reused here
+       rather than re-derived since it's the same atomic-chip affordance. */
     & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); font-weight: var(--crisp-weight-medium); user-select: none; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }