@crisp-ui-kit/crisp 0.54.7 → 0.54.8

package/dist/cjs/product/richtext/richtext.js

@@ -106,6 +106,71 @@ function matchSlashTrigger(textBeforeCaret, trigger = "/") {
     return { query, start };
 }
 const exec = (cmd, value) => document.execCommand(cmd, false, value);
+/**
+ * #685: `execCommand("insertUnorderedList"/"insertOrderedList")` is built
+ * through DOM APIs, not the HTML parser, so it can leave the live DOM in a
+ * shape the parser itself would never produce: a `<ul>`/`<ol>` as a literal
+ * child of the `<p>` it converted, e.g. `<p><ul><li>text</li></ul></p>`.
+ * That's invalid content for a `<p>` — reading `innerHTML` back and later
+ * re-parsing it (a fresh mount, GRC reloading a stored note) auto-closes the
+ * `<p>` the instant the parser meets the `<ul>`, which leaves a now-empty
+ * `<p></p>` sitting next to the list instead. Two different malformed
+ * shapes, one root cause, so one function fixes both: unwrap a `<ul>`/`<ol>`
+ * that's still literally nested inside a `<p>` (the freshly-converted case),
+ * and drop an empty `<p>` that ended up glued to a list (the reloaded-old-
+ * content case) — matching Attio's own structure, where the list is always
+ * a sibling of the surrounding `<p>` blocks, never nested in or padded by
+ * one.
+ */
+const normalizeListStructure = (root) => {
+    for (const list of root.querySelectorAll("p > ul, p > ol")) {
+        const p = list.parentElement;
+        if (!p)
+            continue;
+        const before = [];
+        const after = [];
+        let seenList = false;
+        for (const child of Array.from(p.childNodes)) {
+            if (child === list) {
+                seenList = true;
+            }
+            else if (seenList) {
+                after.push(child);
+            }
+            else {
+                before.push(child);
+            }
+        }
+        const isBlank = (nodes) => nodes.every((n) => (n.textContent ?? "").trim() === "");
+        const parent = p.parentElement;
+        if (!parent)
+            continue;
+        if (!isBlank(before)) {
+            const leading = document.createElement("p");
+            for (const n of before)
+                leading.appendChild(n);
+            parent.insertBefore(leading, p);
+        }
+        parent.insertBefore(list, p);
+        if (!isBlank(after)) {
+            const trailing = document.createElement("p");
+            for (const n of after)
+                trailing.appendChild(n);
+            parent.insertBefore(trailing, p);
+        }
+        parent.removeChild(p);
+    }
+    for (const list of root.querySelectorAll("ul, ol")) {
+        const isEmptyP = (el) => !!el &&
+            el.tagName === "P" &&
+            el.children.length === 0 &&
+            (el.textContent ?? "").trim() === "";
+        if (isEmptyP(list.previousElementSibling))
+            list.previousElementSibling?.remove();
+        if (isEmptyP(list.nextElementSibling))
+            list.nextElementSibling?.remove();
+    }
+};
 /**
  * A block rich-text editor — measured from Attio's own notes editor. A large
  * title, a prose body (h1/h2/h3, bulleted/numbered lists, an image block,
@@ -217,8 +282,14 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     React.useEffect(() => {
         if (titleRef.current)
             titleRef.current.textContent = defaultTitle;
-        if (bodyRef.current)
+        if (bodyRef.current) {
             bodyRef.current.innerHTML = defaultHtml;
+            // #685: normalize any pre-existing `<p><ul>` nesting (or its
+            // reloaded shape, an empty `<p>` glued to the list) from content
+            // stored before the fix, so it renders correctly instead of staying
+            // broken forever.
+            normalizeListStructure(bodyRef.current);
+        }
         syncEmpty(titleRef.current);
         syncEmpty(bodyRef.current);
     }, []);
@@ -407,6 +478,10 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     const run = (cmd, value) => {
         bodyRef.current?.focus();
         exec(cmd, value);
+        // #685: insertUnorderedList/insertOrderedList can leave the new list
+        // nested inside the `<p>` it converted instead of replacing it.
+        if (bodyRef.current)
+            normalizeListStructure(bodyRef.current);
         updateBar();
         syncEmpty(bodyRef.current);
         emit();

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

@@ -30,31 +30,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 +83,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); }
 }

package/dist/comments.layered.css

@@ -31,31 +31,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; }
@@ -65,15 +84,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); }
 }