@crisp-ui-kit/crisp 0.54.7 → 0.54.8

package/dist/esm/product/richtext/richtext.js

@@ -70,6 +70,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,
@@ -181,8 +246,14 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     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);
     }, []);
@@ -371,6 +442,10 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     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/esm/product/sidebar/sidebar.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Building2, ChartNoAxesColumn, ChevronDown, CircleDollarSign, FileText, House, Inbox, LayoutGrid, Mail, MessageSquare, PanelLeft, Phone, Search, Send, SquareCheck, User, UserPlus, Users, Waypoints, } from "lucide-react";
+import { Building2, ChartNoAxesColumn, ChevronDown, CircleDollarSign, FileText, House, Inbox, LayoutGrid, Mail, MessageSquare, PackagePlus, PanelLeft, Phone, Search, Send, Settings, SquareCheck, User, UserPlus, Users, Waypoints, } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
 import { Badge } from "../../components/badge/index.js";
@@ -44,42 +44,83 @@ export const 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. */
 export const 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: (_jsx(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". */
 export const 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". */
 export const 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". */
 export const 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. */
 export const ATTIO_SIDEBAR_FOOTER = {
@@ -88,8 +129,20 @@ export const ATTIO_SIDEBAR_FOOTER = {
     trialText: "13 days left on trial!",
     trialActionLabel: "Keep Pro",
 };
-function SectionHeader({ label, open, onToggle, }) {
-    return (_jsxs("button", { type: "button", className: "crisp-sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [_jsx(IconChevronMini, {}), _jsx("span", { children: label })] }));
+function SectionHeader({ label, open, onToggle, actions, }) {
+    return (_jsxs("div", { className: "crisp-sidebar-section-header-row", children: [_jsxs("button", { type: "button", className: "crisp-sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [_jsx(IconChevronMini, {}), _jsx("span", { children: label })] }), actions != null && (_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 (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "crisp-sidebar-section-action", "aria-label": optionsLabel, children: _jsx(Settings, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "crisp-sidebar-section-action", "aria-label": addLabel, children: _jsx(PackagePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }));
 }
 export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = ATTIO_SIDEBAR_WORKSPACE, workspaceMenu, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, groups, footer = 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
@@ -138,14 +191,14 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
         });
     }, []);
     const workspaceTrigger = (_jsxs("button", { type: "button", className: "crisp-sidebar-ws", children: [_jsx(Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), _jsx("span", { className: "crisp-sidebar-ws-name", children: workspace.name }), _jsx(IconChevronDown, {})] }));
-    return (_jsxs(Primitive.nav, { ref: ref, asChild: asChild, "aria-label": ariaLabel, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "crisp-sidebar-ws-row", children: [workspaceMenu ? (_jsx(Menu, { trigger: workspaceTrigger, className: "crisp-sidebar-ws-menuroot", contentClassName: "crisp-sidebar-ws-menu-content", children: workspaceMenu })) : (workspaceTrigger), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "crisp-sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "crisp-sidebar-search-label", children: searchLabel }), _jsx("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsx("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing, href, onSelect }) => (_jsx(NavItem, { href: href ?? "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, onClick: onSelect, children: label }, href ?? label))) }), groups ? (
+    return (_jsxs(Primitive.nav, { ref: ref, asChild: asChild, "aria-label": ariaLabel, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "crisp-sidebar-ws-row", children: [workspaceMenu ? (_jsx(Menu, { trigger: workspaceTrigger, className: "crisp-sidebar-ws-menuroot", contentClassName: "crisp-sidebar-ws-menu-content", children: workspaceMenu })) : (workspaceTrigger), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "crisp-sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "crisp-sidebar-search-label", children: searchLabel }), _jsx("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsx("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing, href, onSelect, shortcut, }) => (_jsx(NavItem, { href: href ?? "#", active: active, icon: _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 (_jsxs(React.Fragment, { children: [_jsx(SectionHeader, { label: group.label, open: !collapsedSections.has(groupKey), onToggle: () => toggleSection(groupKey) }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has(groupKey) ? "" : undefined, children: group.items.map((item) => (_jsx(NavItem, { href: item.href ?? "#", active: item.active, icon: item.icon ? _jsx(item.icon, {}) : undefined, trailing: item.count, onClick: item.onSelect, children: item.label }, item.href ?? item.label))) })] }, groupKey));
-            })) : (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon, active, trailing, href, onSelect, }) => (_jsx(NavItem, { href: href ?? "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, onClick: onSelect, children: label }, href ?? label))) })] })), footer !== false &&
+                return (_jsxs(React.Fragment, { children: [_jsx(SectionHeader, { label: group.label, open: !collapsedSections.has(groupKey), onToggle: () => toggleSection(groupKey), actions: group.actions }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has(groupKey) ? "" : undefined, children: group.items.map((item) => (_jsx(NavItem, { href: item.href ?? "#", active: item.active, icon: item.icon ? _jsx(item.icon, {}) : undefined, trailing: item.count, onClick: item.onSelect, shortcut: item.shortcut, children: item.label }, item.href ?? item.label))) })] }, groupKey));
+            })) : (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records"), actions: recordsSection.actions }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph, shortcut }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), shortcut: shortcut, children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists"), actions: listsSection.actions }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats"), actions: chatsSection.actions }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon, active, trailing, href, onSelect, shortcut, }) => (_jsx(NavItem, { href: href ?? "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, onClick: onSelect, shortcut: shortcut, children: label }, href ?? label))) })] })), footer !== false &&
                 (isSidebarFooterCopy(footer) ? (_jsxs("div", { className: "crisp-sidebar-footer", children: [_jsx(Button, { intent: "neutral", size: "sm", className: "crisp-sidebar-pill", children: footer.gettingStartedLabel }), _jsx(NavItem, { href: "#", icon: _jsx(IconInvite, {}), children: footer.inviteLabel }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsxs("div", { className: "crisp-sidebar-trial", children: [_jsx("span", { children: footer.trialText }), _jsx(Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] })) : (_jsx("div", { className: "crisp-sidebar-footer", children: footer }))), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen, items: commandItems })] }));
 });
 Sidebar.displayName = "Sidebar";

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

@@ -16,9 +16,14 @@ const config = defineRecipe({
   ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .crisp-sidebar-section { display: flex; flex-direction: column; gap: ${c.space.px}; margin-top: ${c.space["2"]}; }
   & .crisp-sidebar-section[data-collapsed] { display: none; }
   & .crisp-sidebar-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; }
-  & .crisp-sidebar-section-header { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; margin: 0; border: none; background: none; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-family: ${c.font.sans}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; }
+  & .crisp-sidebar-section-header-row { display: flex; align-items: center; }
+  & .crisp-sidebar-section-header { display: flex; align-items: center; gap: ${c.space["1"]}; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-family: ${c.font.sans}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.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: ${c.space["1"]}; flex-shrink: 0; padding-inline-end: ${c.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: ${c.space["5"]}; height: ${c.space["5"]}; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: transparent; color: color-mix(in srgb, ${c.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: ${c.bgRaised}; color: ${c.fgPrimary}; }
   & .crisp-sidebar-ws-row { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.header}; padding: 0 ${c.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: ${c.space["2"]}; flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: none; background: none; border-radius: ${c.radius.lg}; font-family: inherit; font-size: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color 0.16s; }

package/dist/esm/tokens/palette.js

@@ -17,6 +17,15 @@ export const 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)`,
@@ -37,6 +46,22 @@ export const 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)" },
@@ -113,7 +138,13 @@ export const 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/esm/tokens/semantic.js

@@ -8,15 +8,26 @@ export const 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/native/tokens.d.ts

@@ -2,7 +2,7 @@
 // The same tokens the CSS custom properties carry, resolved per theme, with
 // dimensions as numbers for React Native and Lynx style objects.
 export type Theme = "light" | "dark";
-export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "borderDropzone" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "fgDanger" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft", string>;
+export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "bgSurfaceMuted" | "borderDefault" | "borderSubtle" | "borderDropzone" | "borderDivider" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgScrim" | "fgAlertDescription" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "fgDanger" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft", string>;
 export declare const tokens: {
   color: Record<Theme, ColorTokens>;
   palette: Record<Theme, Record<string, string>>;

package/dist/native/tokens.js

@@ -10,14 +10,18 @@ export const tokens = {
       "fgOnTone": "#101112",
       "bgSurface": "#ffffff",
       "bgRaised": "#f4f4f5",
+      "bgSurfaceMuted": "#f6f7f7",
       "borderDefault": "#e4e4e7",
       "borderSubtle": "#eeeff1",
       "borderDropzone": "#e6e7ea",
+      "borderDivider": "#e6e7ea",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
       "bgTileActive": "#ffffff",
       "shadowTileActive": "rgba(0,0,0,0.04)",
+      "bgScrim": "rgba(0,0,0,0.25)",
+      "fgAlertDescription": "rgba(0,0,0,0.63)",
       "bgOverlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
       "shadowOverlay2": "rgba(28,40,64,0.16)",
@@ -51,7 +55,7 @@ export const tokens = {
       "fgSuccessSoft": "#186b3d",
       "fgWarningSoft": "#80520d",
       "fgDangerSoft": "#a33539",
-      "fgNeutralSoft": "#686870",
+      "fgNeutralSoft": "#505155",
       "bgPurpleSoft": "#f5f0ff",
       "fgPurpleSoft": "#6238b5",
       "ringPurpleSoft": "#e8ddfe"
@@ -63,14 +67,18 @@ export const tokens = {
       "fgOnTone": "#101112",
       "bgSurface": "#0a0a0a",
       "bgRaised": "#101112",
+      "bgSurfaceMuted": "#101112",
       "borderDefault": "#212224",
       "borderSubtle": "#1c1d1f",
       "borderDropzone": "#212224",
+      "borderDivider": "#212224",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
       "bgTileActive": "#101112",
       "shadowTileActive": "rgba(0,0,0,0)",
+      "bgScrim": "rgba(0,0,0,0.55)",
+      "fgAlertDescription": "rgba(255,255,255,0.6)",
       "bgOverlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
       "shadowOverlay2": "rgba(0,0,0,0.64)",
@@ -120,11 +128,14 @@ export const tokens = {
       "line200": "#e4e4e7",
       "line100": "#eeeff1",
       "line150": "#e6e7ea",
+      "gray25": "#f6f7f7",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
       "tileActive": "#ffffff",
       "tileActiveShadow": "rgba(0,0,0,0.04)",
+      "bgScrim": "rgba(0,0,0,0.25)",
+      "fgAlertDescription": "rgba(0,0,0,0.63)",
       "overlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
       "shadowOverlay2": "rgba(28,40,64,0.16)",
@@ -158,7 +169,7 @@ export const tokens = {
       "softSuccessText": "#186b3d",
       "softWarningText": "#80520d",
       "softDangerText": "#a33539",
-      "softNeutralText": "#686870",
+      "softNeutralText": "#505155",
       "purpleTint": "#f5f0ff",
       "softPurpleText": "#6238b5",
       "purpleRing": "#e8ddfe"
@@ -172,11 +183,14 @@ export const tokens = {
       "line200": "#212224",
       "line100": "#1c1d1f",
       "line150": "#212224",
+      "gray25": "#101112",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
       "tileActive": "#101112",
       "tileActiveShadow": "rgba(0,0,0,0)",
+      "bgScrim": "rgba(0,0,0,0.55)",
+      "fgAlertDescription": "rgba(255,255,255,0.6)",
       "overlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
       "shadowOverlay2": "rgba(0,0,0,0.64)",

package/dist/navitem.css

@@ -1,3 +1,10 @@
+
+    .crisp-navitem-shortcut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--crisp-space-3); }
+    .crisp-navitem-shortcut-desc { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 16px; white-space: nowrap; }
+    .crisp-navitem-shortcut-chord { display: inline-flex; align-items: center; gap: var(--crisp-space-1); flex-shrink: 0; }
+    .crisp-navitem-shortcut-then { font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: #898a8d; }
+    .crisp-navitem-shortcut-chord .crisp-kbd { text-transform: uppercase; font-weight: var(--crisp-weight-regular); color: #a2a4a7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
+  
 .crisp-navitem {
   box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding-inline: var(--crisp-space-2); padding-inline-end: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary); text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
     & .crisp-navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/dist/navitem.layered.css

@@ -1,4 +1,11 @@
 @layer crisp-components {
+
+    .crisp-navitem-shortcut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--crisp-space-3); }
+    .crisp-navitem-shortcut-desc { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 16px; white-space: nowrap; }
+    .crisp-navitem-shortcut-chord { display: inline-flex; align-items: center; gap: var(--crisp-space-1); flex-shrink: 0; }
+    .crisp-navitem-shortcut-then { font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: #898a8d; }
+    .crisp-navitem-shortcut-chord .crisp-kbd { text-transform: uppercase; font-weight: var(--crisp-weight-regular); color: #a2a4a7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
+  
 .crisp-navitem {
   box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding-inline: var(--crisp-space-2); padding-inline-end: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary); text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
     & .crisp-navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/dist/recordstable.css

@@ -56,7 +56,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
-    & .crisp-recordstable-menu--op { min-width: 134px; }
+    & .crisp-recordstable-menu--op { min-width: 0; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/recordstable.layered.css

@@ -57,7 +57,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
-    & .crisp-recordstable-menu--op { min-width: 134px; }
+    & .crisp-recordstable-menu--op { min-width: 0; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/sidebar.css

@@ -6,9 +6,14 @@
     & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
     & .crisp-sidebar-section[data-collapsed] { display: none; }
     & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }
-    & .crisp-sidebar-section-header { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; margin: 0; border: none; background: none; padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-sidebar-section-header-row { display: flex; align-items: center; }
+    & .crisp-sidebar-section-header { display: flex; align-items: center; gap: var(--crisp-space-1); flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); 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: var(--crisp-space-1); flex-shrink: 0; padding-inline-end: var(--crisp-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: var(--crisp-space-5); height: var(--crisp-space-5); margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: transparent; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); font-family: inherit; cursor: pointer; text-decoration: none; transition: background-color 0.14s, color 0.14s; }
+    & .crisp-sidebar-section-action:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
     & .crisp-sidebar-ws-row { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-header); padding: 0 var(--crisp-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: var(--crisp-space-2); flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: none; background: none; border-radius: var(--crisp-radius-lg); font-family: inherit; font-size: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color 0.16s; }

package/dist/sidebar.layered.css

@@ -7,9 +7,14 @@
     & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
     & .crisp-sidebar-section[data-collapsed] { display: none; }
     & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }
-    & .crisp-sidebar-section-header { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; margin: 0; border: none; background: none; padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-sidebar-section-header-row { display: flex; align-items: center; }
+    & .crisp-sidebar-section-header { display: flex; align-items: center; gap: var(--crisp-space-1); flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); 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: var(--crisp-space-1); flex-shrink: 0; padding-inline-end: var(--crisp-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: var(--crisp-space-5); height: var(--crisp-space-5); margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: transparent; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); font-family: inherit; cursor: pointer; text-decoration: none; transition: background-color 0.14s, color 0.14s; }
+    & .crisp-sidebar-section-action:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
     & .crisp-sidebar-ws-row { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-header); padding: 0 var(--crisp-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: var(--crisp-space-2); flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: none; background: none; border-radius: var(--crisp-radius-lg); font-family: inherit; font-size: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color 0.16s; }