@crisp-ui-kit/crisp 0.39.0 → 0.41.0

package/dist/cjs/components/datepicker/datepicker.recipe.js

@@ -59,9 +59,14 @@ const config = (0, core_1.defineRecipe)({
       display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
       position: relative; z-index: 2; background: ${tokens_1.contract.bgSurface};
     }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
     & .crisp-datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
-      height: ${tokens_1.contract.size.calendarCell}; color: ${tokens_1.contract.fgNeutralSubtle};
+      height: ${tokens_1.contract.size.calendarCell}; color: ${tokens_1.contract.fgNeutralMuted};
       font-size: ${tokens_1.contract.text.sm}; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium};
     }
 

package/dist/cjs/components/dialog/dialog.js

@@ -72,6 +72,18 @@ function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ar
         // search), rather than the close button; fall back to the machine default.
         initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .crisp-dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
         "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361): none of those five are Zag machines, so this
+        // machine's own dismissable-layer stack has no visibility into them --
+        // pressing Escape to close one opened from inside this Dialog closed
+        // the Dialog too, since both listen for the same keypress independently.
+        // Zag only calls its own dismiss when the event isn't already
+        // prevented (`@zag-js/dismissable`), so this cleanly defers instead of
+        // racing it.
+        onEscapeKeyDown(event) {
+            if ((0, core_1.hasOpenFloatingLayer)())
+                event.preventDefault();
+        },
     });
     const api = dialog.connect(service, react_1.normalizeProps);
     if (!api.open)

package/dist/cjs/components/drawer/drawer.js

@@ -66,6 +66,13 @@ function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label":
             onOpenChange(details.open);
         },
         "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361) -- see Dialog's identical comment; this composes the
+        // same Zag machine.
+        onEscapeKeyDown(event) {
+            if ((0, core_1.hasOpenFloatingLayer)())
+                event.preventDefault();
+        },
     });
     const api = dialog.connect(service, react_1.normalizeProps);
     if (!api.open)

package/dist/cjs/core/floating-stack.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerFloatingLayer = registerFloatingLayer;
 exports.isInsideLaterFloatingLayer = isInsideLaterFloatingLayer;
+exports.hasOpenFloatingLayer = hasOpenFloatingLayer;
 /**
  * Tracks every currently-open `FloatingPortal` layer, in open order, so a
  * layer's outside-click check can tell "outside me" from "inside a layer I
@@ -52,3 +53,23 @@ function isInsideLaterFloatingLayer(target, self) {
     }
     return false;
 }
+/**
+ * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
+ * `ContextMenu` is currently open, anywhere (#361).
+ *
+ * A dismissable container that closes on Escape via its OWN raw keydown
+ * listener or a library's dismissable-layer machine (`RecordPanel`,
+ * `Dialog`, `Drawer`) has no visibility into these five: none of them are
+ * built on the same machine, so a Menu opened from inside a `Dialog`
+ * registers here, but the Dialog's own Escape handling doesn't know to
+ * check for it. Both listeners fire on the same Escape keydown, so both
+ * close — the outer container closing was never the point of that
+ * keypress, which was meant for the nested layer alone. Call this before
+ * closing on Escape (or in a dismissable-layer's `onEscapeKeyDown`, calling
+ * `event.preventDefault()` when it's true) to defer instead: the nested
+ * layer's own listener still runs and closes it, and the outer container
+ * gets its own, uncontested Escape on the next press.
+ */
+function hasOpenFloatingLayer() {
+    return stack.length > 0;
+}

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = void 0;
+exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = void 0;
 var cell_date_1 = require("./cell-date");
 Object.defineProperty(exports, "formatCellDate", { enumerable: true, get: function () { return cell_date_1.formatCellDate; } });
 Object.defineProperty(exports, "parseCellDate", { enumerable: true, get: function () { return cell_date_1.parseCellDate; } });
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "isRtlElement", { enumerable: true, get: function
 var floating_portal_1 = require("./floating-portal");
 Object.defineProperty(exports, "FloatingPortal", { enumerable: true, get: function () { return floating_portal_1.FloatingPortal; } });
 var floating_stack_1 = require("./floating-stack");
+Object.defineProperty(exports, "hasOpenFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.hasOpenFloatingLayer; } });
 Object.defineProperty(exports, "isInsideLaterFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.isInsideLaterFloatingLayer; } });
 Object.defineProperty(exports, "registerFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.registerFloatingLayer; } });
 var form_value_1 = require("./form-value");

package/dist/cjs/core/primitive.js

@@ -37,7 +37,7 @@ exports.Primitive = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_slot_1 = require("@radix-ui/react-slot");
 const React = __importStar(require("react"));
-const NODES = ["button", "div", "span", "a", "input", "p"];
+const NODES = ["button", "div", "span", "a", "input", "p", "nav"];
 exports.Primitive = NODES.reduce((acc, node) => {
     const Component = React.forwardRef(({ asChild, ...props }, ref) => {
         const Comp = asChild ? react_slot_1.Slot : node;

package/dist/cjs/product/recordpanel/recordpanel.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
+const core_1 = require("../../core");
 const recordstable_1 = require("../recordstable");
 const recordpanel_recipe_1 = require("./recordpanel.recipe");
 function FieldValue({ col, row, emptyLabel, }) {
@@ -64,11 +65,21 @@ function FieldValue({ col, row, emptyLabel, }) {
  */
 function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, ...rest }) {
     const titleId = React.useId();
-    // close on Escape while open
+    // close on Escape while open -- but not when a Menu/Select/Popover/
+    // ContextMenu opened from inside the panel (e.g. a footer "More actions"
+    // menu) is itself open (#361): that Escape belongs to the nested layer,
+    // which has its own listener and will close itself. Without this check
+    // both close on the same keypress, since neither knows about the other --
+    // none of the five are built on this listener or registered anywhere it
+    // can see, only on the shared floating-stack this checks instead.
     React.useEffect(() => {
         if (!record)
             return;
-        const onKey = (e) => e.key === "Escape" && onClose();
+        const onKey = (e) => {
+            if (e.key !== "Escape" || (0, core_1.hasOpenFloatingLayer)())
+                return;
+            onClose();
+        };
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [record, onClose]);

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

@@ -117,7 +117,7 @@ exports.ATTIO_SIDEBAR_FOOTER = {
 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 })] }));
 }
-exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = exports.ATTIO_SIDEBAR_WORKSPACE, 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, ...props }, ref) => {
+exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = exports.ATTIO_SIDEBAR_WORKSPACE, 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
     // reactive to `groups` changing later, matching every other piece of
     // this component's state (recordsSection/listsSection/chatsSection have
@@ -125,8 +125,22 @@ exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, coll
     const [collapsedSections, setCollapsedSections] = React.useState(() => new Set(groups
         ?.filter((g) => g.defaultCollapsed)
         .map((g) => g.key ?? g.label)));
-    const [commandOpen, setCommandOpen] = React.useState(false);
+    // Controlled/uncontrolled triad (#364), same shape as Popover/Menu's own
+    // `open` -- an app driving a single ⌘K listener needs to be able to set
+    // `commandOpen` itself, not just read it.
+    const [internalCommandOpen, setInternalCommandOpen] = React.useState(defaultCommandOpen ?? false);
+    const commandOpen = commandOpenProp ?? internalCommandOpen;
+    const setCommandOpen = React.useCallback((next) => {
+        if (commandOpenProp === undefined)
+            setInternalCommandOpen(next);
+        onCommandOpenChange?.(next);
+    }, [commandOpenProp, onCommandOpenChange]);
     React.useEffect(() => {
+        // #364: skip attaching entirely when the app owns its own ⌘K listener
+        // -- two listeners on the same key both firing opened two overlapping
+        // command palettes.
+        if (!commandShortcut)
+            return;
         function handleKeyDown(event) {
             if ((event.metaKey || event.ctrlKey) &&
                 event.key.toLowerCase() === "k") {
@@ -136,7 +150,7 @@ exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, coll
         }
         document.addEventListener("keydown", handleKeyDown);
         return () => document.removeEventListener("keydown", handleKeyDown);
-    }, []);
+    }, [commandShortcut, setCommandOpen]);
     const toggleSection = React.useCallback((key) => {
         setCollapsedSections((prev) => {
             const next = new Set(prev);
@@ -149,13 +163,13 @@ exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, coll
             return next;
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.div, { ref: ref, asChild: asChild, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { 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, {}), (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 }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, children: label }, 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", 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, {}), (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 }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, children: label }, 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 }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), children: label }, label))) })] })), (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)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+            })) : ((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 }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), children: label }, label))) })] })), (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)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen, items: commandItems })] }));
 });
 exports.Sidebar.displayName = "Sidebar";

package/dist/datepicker.css

@@ -11,47 +11,47 @@
     & .crisp-datepicker-nav-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
     & .crisp-datepicker-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 2; background: var(--crisp-bg-surface); }
-    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-subtle); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
+    & .crisp-datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
+      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-datepicker-month-label {
+      display: flex; align-items: center; height: 24px;
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
-    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-    /* The bridge joining days inside a completed range. The endpoints do NOT carry data-in-range -- only the interior days do -- so these are three independent rules, not a base plus two modifiers. A modifier that sets only inset-inline-start never generates a pseudo element on an endpoint, which leaves a half-cell of white between the endpoint's pill and the run of grey beside it. Each rule declares its
-       own content. */
-    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
-      content: ""; position: absolute; z-index: -1; inset-inline: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 50%; inset-inline-end: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 0; inset-inline-end: 50%;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
 
-    & .crisp-datepicker-date {
-      position: relative; display: flex; width: 100%; height: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0;
-      align-items: flex-start; justify-content: center;
-      border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--crisp-fg-primary); font: inherit; outline: none;
+    & .crisp-datepicker-cell {
+      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
       isolation: isolate;
     }
+    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
+
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-date { position: relative; display: flex; width: 100%; height: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; align-items: flex-start; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--crisp-fg-primary); font: inherit; outline: none; isolation: isolate; }
     /* the round day highlight, behind the numeral */
-    & .crisp-datepicker-date::before {
-      content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      border-radius: var(--crisp-radius-md);
-      background: transparent; transform: translateX(-50%);
-    }
+    & .crisp-datepicker-date::before { content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); border-radius: var(--crisp-radius-md); background: transparent; transform: translateX(-50%); }
     & .crisp-datepicker-date[data-today]::before { background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-date[data-selected]::before { background: var(--crisp-bg-brand-solid); }
     & .crisp-datepicker-date[data-selected] { color: var(--crisp-fg-on-brand); }
@@ -59,34 +59,35 @@
     & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
     & .crisp-datepicker-date[data-unavailable] { color: var(--crisp-fg-disabled); }
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
-    & .crisp-datepicker-date:focus-visible::after {
-      content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--crisp-radius-md);
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
+    & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
+      align-items: center; justify-content: center;
     }
 
-    & .crisp-datepicker-date-content {
-      position: relative; z-index: 1; display: flex; width: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box;
-      flex-direction: column; align-items: center; gap: 3px;
-      padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit;
-      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
-      font-variant-numeric: tabular-nums;
-    }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill.
-       Without this the content column top-aligns the glyph and the pill reads
-       as offset — the cell is 48px, the pill 42px inset 3px, and only a
-       42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: var(--crisp-size-menuRow); bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: var(--crisp-bg-surface);
+    }
     & .crisp-datepicker-wheel { width: 100%; }
-    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+
+    & .crisp-datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
+
     /* announced, never drawn */
-    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 .crisp-datepicker--visibleRange_month {
   

package/dist/datepicker.layered.css

@@ -12,47 +12,47 @@
     & .crisp-datepicker-nav-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
     & .crisp-datepicker-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 2; background: var(--crisp-bg-surface); }
-    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-subtle); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
+    & .crisp-datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
+      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-datepicker-month-label {
+      display: flex; align-items: center; height: 24px;
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
-    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-    /* The bridge joining days inside a completed range. The endpoints do NOT carry data-in-range -- only the interior days do -- so these are three independent rules, not a base plus two modifiers. A modifier that sets only inset-inline-start never generates a pseudo element on an endpoint, which leaves a half-cell of white between the endpoint's pill and the run of grey beside it. Each rule declares its
-       own content. */
-    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
-      content: ""; position: absolute; z-index: -1; inset-inline: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 50%; inset-inline-end: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 0; inset-inline-end: 50%;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
 
-    & .crisp-datepicker-date {
-      position: relative; display: flex; width: 100%; height: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0;
-      align-items: flex-start; justify-content: center;
-      border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--crisp-fg-primary); font: inherit; outline: none;
+    & .crisp-datepicker-cell {
+      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
       isolation: isolate;
     }
+    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
+
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-date { position: relative; display: flex; width: 100%; height: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; align-items: flex-start; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--crisp-fg-primary); font: inherit; outline: none; isolation: isolate; }
     /* the round day highlight, behind the numeral */
-    & .crisp-datepicker-date::before {
-      content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      border-radius: var(--crisp-radius-md);
-      background: transparent; transform: translateX(-50%);
-    }
+    & .crisp-datepicker-date::before { content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); border-radius: var(--crisp-radius-md); background: transparent; transform: translateX(-50%); }
     & .crisp-datepicker-date[data-today]::before { background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-date[data-selected]::before { background: var(--crisp-bg-brand-solid); }
     & .crisp-datepicker-date[data-selected] { color: var(--crisp-fg-on-brand); }
@@ -60,34 +60,35 @@
     & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
     & .crisp-datepicker-date[data-unavailable] { color: var(--crisp-fg-disabled); }
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
-    & .crisp-datepicker-date:focus-visible::after {
-      content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--crisp-radius-md);
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
+    & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
+      align-items: center; justify-content: center;
     }
 
-    & .crisp-datepicker-date-content {
-      position: relative; z-index: 1; display: flex; width: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box;
-      flex-direction: column; align-items: center; gap: 3px;
-      padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit;
-      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
-      font-variant-numeric: tabular-nums;
-    }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill.
-       Without this the content column top-aligns the glyph and the pill reads
-       as offset — the cell is 48px, the pill 42px inset 3px, and only a
-       42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: var(--crisp-size-menuRow); bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: var(--crisp-bg-surface);
+    }
     & .crisp-datepicker-wheel { width: 100%; }
-    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+
+    & .crisp-datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
+
     /* announced, never drawn */
-    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 .crisp-datepicker--visibleRange_month {
   

package/dist/esm/components/datepicker/datepicker.recipe.js

@@ -56,9 +56,14 @@ const config = defineRecipe({
       display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
       position: relative; z-index: 2; background: ${c.bgSurface};
     }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
     & .crisp-datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
-      height: ${c.size.calendarCell}; color: ${c.fgNeutralSubtle};
+      height: ${c.size.calendarCell}; color: ${c.fgNeutralMuted};
       font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium};
     }
 

package/dist/esm/components/dialog/dialog.js

@@ -3,7 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { X } from "lucide-react";
 import * as React from "react";
-import { cx, withDescribedBy } from "../../core/index.js";
+import { cx, hasOpenFloatingLayer, withDescribedBy } from "../../core/index.js";
 import { dialogRecipe } from "./dialog.recipe.js";
 // A globally unique id per mounted instance (see command.tsx for the rationale —
 // the machine defers its dismissal listeners a frame, so tree-relative useId
@@ -34,6 +34,18 @@ export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-lab
         // search), rather than the close button; fall back to the machine default.
         initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .crisp-dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
         "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361): none of those five are Zag machines, so this
+        // machine's own dismissable-layer stack has no visibility into them --
+        // pressing Escape to close one opened from inside this Dialog closed
+        // the Dialog too, since both listen for the same keypress independently.
+        // Zag only calls its own dismiss when the event isn't already
+        // prevented (`@zag-js/dismissable`), so this cleanly defers instead of
+        // racing it.
+        onEscapeKeyDown(event) {
+            if (hasOpenFloatingLayer())
+                event.preventDefault();
+        },
     });
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)

package/dist/esm/components/drawer/drawer.js

@@ -3,7 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { X } from "lucide-react";
 import * as React from "react";
-import { cx, withDescribedBy } from "../../core/index.js";
+import { cx, hasOpenFloatingLayer, withDescribedBy } from "../../core/index.js";
 import { drawerRecipe } from "./drawer.recipe.js";
 let instanceCounter = 0;
 function useDrawerInstanceId() {
@@ -28,6 +28,13 @@ export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-
             onOpenChange(details.open);
         },
         "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361) -- see Dialog's identical comment; this composes the
+        // same Zag machine.
+        onEscapeKeyDown(event) {
+            if (hasOpenFloatingLayer())
+                event.preventDefault();
+        },
     });
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)

package/dist/esm/core/floating-stack.js

@@ -48,3 +48,23 @@ export function isInsideLaterFloatingLayer(target, self) {
     }
     return false;
 }
+/**
+ * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
+ * `ContextMenu` is currently open, anywhere (#361).
+ *
+ * A dismissable container that closes on Escape via its OWN raw keydown
+ * listener or a library's dismissable-layer machine (`RecordPanel`,
+ * `Dialog`, `Drawer`) has no visibility into these five: none of them are
+ * built on the same machine, so a Menu opened from inside a `Dialog`
+ * registers here, but the Dialog's own Escape handling doesn't know to
+ * check for it. Both listeners fire on the same Escape keydown, so both
+ * close — the outer container closing was never the point of that
+ * keypress, which was meant for the nested layer alone. Call this before
+ * closing on Escape (or in a dismissable-layer's `onEscapeKeyDown`, calling
+ * `event.preventDefault()` when it's true) to defer instead: the nested
+ * layer's own listener still runs and closes it, and the outer container
+ * gets its own, uncontested Escape on the next press.
+ */
+export function hasOpenFloatingLayer() {
+    return stack.length > 0;
+}

package/dist/esm/core/index.js

@@ -4,7 +4,7 @@ export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";
 export { isRtlElement } from "./direction.js";
 export { FloatingPortal } from "./floating-portal.js";
-export { isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
+export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";

package/dist/esm/core/primitive.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
-const NODES = ["button", "div", "span", "a", "input", "p"];
+const NODES = ["button", "div", "span", "a", "input", "p", "nav"];
 export const Primitive = NODES.reduce((acc, node) => {
     const Component = React.forwardRef(({ asChild, ...props }, ref) => {
         const Comp = asChild ? Slot : node;

package/dist/esm/product/recordpanel/recordpanel.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { X } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
+import { hasOpenFloatingLayer } from "../../core/index.js";
 import { tagTone, } from "../recordstable/index.js";
 import { recordpanelRecipe } from "./recordpanel.recipe.js";
 function FieldValue({ col, row, emptyLabel, }) {
@@ -28,11 +29,21 @@ function FieldValue({ col, row, emptyLabel, }) {
  */
 export function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, ...rest }) {
     const titleId = React.useId();
-    // close on Escape while open
+    // close on Escape while open -- but not when a Menu/Select/Popover/
+    // ContextMenu opened from inside the panel (e.g. a footer "More actions"
+    // menu) is itself open (#361): that Escape belongs to the nested layer,
+    // which has its own listener and will close itself. Without this check
+    // both close on the same keypress, since neither knows about the other --
+    // none of the five are built on this listener or registered anywhere it
+    // can see, only on the shared floating-stack this checks instead.
     React.useEffect(() => {
         if (!record)
             return;
-        const onKey = (e) => e.key === "Escape" && onClose();
+        const onKey = (e) => {
+            if (e.key !== "Escape" || hasOpenFloatingLayer())
+                return;
+            onClose();
+        };
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [record, onClose]);

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

@@ -81,7 +81,7 @@ export const ATTIO_SIDEBAR_FOOTER = {
 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 })] }));
 }
-export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = ATTIO_SIDEBAR_WORKSPACE, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, groups, footer = ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
+export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = ATTIO_SIDEBAR_WORKSPACE, 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
     // reactive to `groups` changing later, matching every other piece of
     // this component's state (recordsSection/listsSection/chatsSection have
@@ -89,8 +89,22 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
     const [collapsedSections, setCollapsedSections] = React.useState(() => new Set(groups
         ?.filter((g) => g.defaultCollapsed)
         .map((g) => g.key ?? g.label)));
-    const [commandOpen, setCommandOpen] = React.useState(false);
+    // Controlled/uncontrolled triad (#364), same shape as Popover/Menu's own
+    // `open` -- an app driving a single ⌘K listener needs to be able to set
+    // `commandOpen` itself, not just read it.
+    const [internalCommandOpen, setInternalCommandOpen] = React.useState(defaultCommandOpen ?? false);
+    const commandOpen = commandOpenProp ?? internalCommandOpen;
+    const setCommandOpen = React.useCallback((next) => {
+        if (commandOpenProp === undefined)
+            setInternalCommandOpen(next);
+        onCommandOpenChange?.(next);
+    }, [commandOpenProp, onCommandOpenChange]);
     React.useEffect(() => {
+        // #364: skip attaching entirely when the app owns its own ⌘K listener
+        // -- two listeners on the same key both firing opened two overlapping
+        // command palettes.
+        if (!commandShortcut)
+            return;
         function handleKeyDown(event) {
             if ((event.metaKey || event.ctrlKey) &&
                 event.key.toLowerCase() === "k") {
@@ -100,7 +114,7 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
         }
         document.addEventListener("keydown", handleKeyDown);
         return () => document.removeEventListener("keydown", handleKeyDown);
-    }, []);
+    }, [commandShortcut, setCommandOpen]);
     const toggleSection = React.useCallback((key) => {
         setCollapsedSections((prev) => {
             const next = new Set(prev);
@@ -113,13 +127,13 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
             return next;
         });
     }, []);
-    return (_jsxs(Primitive.div, { ref: ref, asChild: asChild, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { 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, {}), _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 }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, label))) }), groups ? (
+    return (_jsxs(Primitive.nav, { ref: ref, asChild: asChild, "aria-label": ariaLabel, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { 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, {}), _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 }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, 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 }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) })] })), _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(Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+            })) : (_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 }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) })] })), _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(Command, { open: commandOpen, onOpenChange: setCommandOpen, items: commandItems })] }));
 });
 Sidebar.displayName = "Sidebar";

package/dist/styles.css

@@ -601,47 +601,47 @@
     & .crisp-datepicker-nav-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
     & .crisp-datepicker-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 2; background: var(--crisp-bg-surface); }
-    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-subtle); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
+    & .crisp-datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
+      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-datepicker-month-label {
+      display: flex; align-items: center; height: 24px;
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
-    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-    /* The bridge joining days inside a completed range. The endpoints do NOT carry data-in-range -- only the interior days do -- so these are three independent rules, not a base plus two modifiers. A modifier that sets only inset-inline-start never generates a pseudo element on an endpoint, which leaves a half-cell of white between the endpoint's pill and the run of grey beside it. Each rule declares its
-       own content. */
-    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
-      content: ""; position: absolute; z-index: -1; inset-inline: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 50%; inset-inline-end: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 0; inset-inline-end: 50%;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
 
-    & .crisp-datepicker-date {
-      position: relative; display: flex; width: 100%; height: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0;
-      align-items: flex-start; justify-content: center;
-      border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--crisp-fg-primary); font: inherit; outline: none;
+    & .crisp-datepicker-cell {
+      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
       isolation: isolate;
     }
+    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
+
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-date { position: relative; display: flex; width: 100%; height: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; align-items: flex-start; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--crisp-fg-primary); font: inherit; outline: none; isolation: isolate; }
     /* the round day highlight, behind the numeral */
-    & .crisp-datepicker-date::before {
-      content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      border-radius: var(--crisp-radius-md);
-      background: transparent; transform: translateX(-50%);
-    }
+    & .crisp-datepicker-date::before { content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); border-radius: var(--crisp-radius-md); background: transparent; transform: translateX(-50%); }
     & .crisp-datepicker-date[data-today]::before { background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-date[data-selected]::before { background: var(--crisp-bg-brand-solid); }
     & .crisp-datepicker-date[data-selected] { color: var(--crisp-fg-on-brand); }
@@ -649,34 +649,35 @@
     & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
     & .crisp-datepicker-date[data-unavailable] { color: var(--crisp-fg-disabled); }
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
-    & .crisp-datepicker-date:focus-visible::after {
-      content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--crisp-radius-md);
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
+    & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
+      align-items: center; justify-content: center;
     }
 
-    & .crisp-datepicker-date-content {
-      position: relative; z-index: 1; display: flex; width: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box;
-      flex-direction: column; align-items: center; gap: 3px;
-      padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit;
-      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
-      font-variant-numeric: tabular-nums;
-    }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill.
-       Without this the content column top-aligns the glyph and the pill reads
-       as offset — the cell is 48px, the pill 42px inset 3px, and only a
-       42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: var(--crisp-size-menuRow); bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: var(--crisp-bg-surface);
+    }
     & .crisp-datepicker-wheel { width: 100%; }
-    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+
+    & .crisp-datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
+
     /* announced, never drawn */
-    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 .crisp-datepicker--visibleRange_month {
   

package/dist/styles.layered.css

@@ -602,47 +602,47 @@
     & .crisp-datepicker-nav-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
     & .crisp-datepicker-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 2; background: var(--crisp-bg-surface); }
-    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-subtle); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
+    & .crisp-datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
+      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-datepicker-month-label {
+      display: flex; align-items: center; height: 24px;
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
-    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-    /* The bridge joining days inside a completed range. The endpoints do NOT carry data-in-range -- only the interior days do -- so these are three independent rules, not a base plus two modifiers. A modifier that sets only inset-inline-start never generates a pseudo element on an endpoint, which leaves a half-cell of white between the endpoint's pill and the run of grey beside it. Each rule declares its
-       own content. */
-    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
-      content: ""; position: absolute; z-index: -1; inset-inline: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 50%; inset-inline-end: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 0; inset-inline-end: 50%;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
 
-    & .crisp-datepicker-date {
-      position: relative; display: flex; width: 100%; height: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0;
-      align-items: flex-start; justify-content: center;
-      border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--crisp-fg-primary); font: inherit; outline: none;
+    & .crisp-datepicker-cell {
+      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
       isolation: isolate;
     }
+    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
+
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-date { position: relative; display: flex; width: 100%; height: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; align-items: flex-start; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--crisp-fg-primary); font: inherit; outline: none; isolation: isolate; }
     /* the round day highlight, behind the numeral */
-    & .crisp-datepicker-date::before {
-      content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      border-radius: var(--crisp-radius-md);
-      background: transparent; transform: translateX(-50%);
-    }
+    & .crisp-datepicker-date::before { content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); border-radius: var(--crisp-radius-md); background: transparent; transform: translateX(-50%); }
     & .crisp-datepicker-date[data-today]::before { background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-date[data-selected]::before { background: var(--crisp-bg-brand-solid); }
     & .crisp-datepicker-date[data-selected] { color: var(--crisp-fg-on-brand); }
@@ -650,34 +650,35 @@
     & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
     & .crisp-datepicker-date[data-unavailable] { color: var(--crisp-fg-disabled); }
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
-    & .crisp-datepicker-date:focus-visible::after {
-      content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--crisp-radius-md);
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
+    & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
+      align-items: center; justify-content: center;
     }
 
-    & .crisp-datepicker-date-content {
-      position: relative; z-index: 1; display: flex; width: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box;
-      flex-direction: column; align-items: center; gap: 3px;
-      padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit;
-      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
-      font-variant-numeric: tabular-nums;
-    }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill.
-       Without this the content column top-aligns the glyph and the pill reads
-       as offset — the cell is 48px, the pill 42px inset 3px, and only a
-       42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: var(--crisp-size-menuRow); bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: var(--crisp-bg-surface);
+    }
     & .crisp-datepicker-wheel { width: 100%; }
-    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+
+    & .crisp-datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
+
     /* announced, never drawn */
-    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 .crisp-datepicker--visibleRange_month {
   

package/dist/types/core/floating-stack.d.ts

@@ -11,3 +11,21 @@ export declare function registerFloatingLayer(el: HTMLElement): () => void;
  * right query for "was this click inside some floating child I opened".
  */
 export declare function isInsideLaterFloatingLayer(target: Node, self: HTMLElement | null): boolean;
+/**
+ * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
+ * `ContextMenu` is currently open, anywhere (#361).
+ *
+ * A dismissable container that closes on Escape via its OWN raw keydown
+ * listener or a library's dismissable-layer machine (`RecordPanel`,
+ * `Dialog`, `Drawer`) has no visibility into these five: none of them are
+ * built on the same machine, so a Menu opened from inside a `Dialog`
+ * registers here, but the Dialog's own Escape handling doesn't know to
+ * check for it. Both listeners fire on the same Escape keydown, so both
+ * close — the outer container closing was never the point of that
+ * keypress, which was meant for the nested layer alone. Call this before
+ * closing on Escape (or in a dismissable-layer's `onEscapeKeyDown`, calling
+ * `event.preventDefault()` when it's true) to defer instead: the nested
+ * layer's own listener still runs and closes it, and the outer container
+ * gets its own, uncontested Escape on the next press.
+ */
+export declare function hasOpenFloatingLayer(): boolean;

package/dist/types/core/index.d.ts

@@ -4,7 +4,7 @@ export { defineRecipe } from "./define";
 export { withDescribedBy } from "./dialog-description";
 export { isRtlElement } from "./direction";
 export { FloatingPortal } from "./floating-portal";
-export { isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
+export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
 export { formValueStyle } from "./form-value";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";

package/dist/types/core/primitive.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-declare const NODES: readonly ["button", "div", "span", "a", "input", "p"];
+declare const NODES: readonly ["button", "div", "span", "a", "input", "p", "nav"];
 type NodeName = (typeof NODES)[number];
 type PrimitiveProps<E extends NodeName> = React.ComponentPropsWithoutRef<E> & {
     asChild?: boolean;

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { AvatarProps } from "../../components/avatar";
+import { type CommandItem } from "../command";
 type IconProps = {
     className?: string;
 };
@@ -115,6 +116,27 @@ export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
     groups?: SidebarNavGroup[];
     /** Footer copy (onboarding pill, invite row, trial banner). */
     footer?: SidebarFooter;
+    /**
+     * Command-palette items, forwarded to the internal `Command`'s own
+     * `items` prop. Omit for Command's built-in Attio set (#364: GRC's
+     * commands aren't Attio's, and there was no way to reach them).
+     */
+    commandItems?: CommandItem[];
+    /** Controlled open state for the command palette. Omit to let Sidebar
+     *  manage it (see `defaultCommandOpen`). */
+    commandOpen?: boolean;
+    /** Initially open, when uncontrolled. */
+    defaultCommandOpen?: boolean;
+    onCommandOpenChange?: (open: boolean) => void;
+    /**
+     * Whether Sidebar attaches its own ⌘K/Ctrl+K document listener to open
+     * the command palette (default `true`). Set `false` when the app already
+     * owns a single global ⌘K listener — e.g. to route the same shortcut to
+     * more than Sidebar's palette elsewhere in the page — and drives
+     * `commandOpen` itself; two listeners on the same key both firing opened
+     * two overlapping instances (#364).
+     */
+    commandShortcut?: boolean;
 };
 /** The measured workspace switcher — the default `workspace` prop. */
 export declare const ATTIO_SIDEBAR_WORKSPACE: SidebarWorkspace;
@@ -160,5 +182,26 @@ export declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.Detaile
     groups?: SidebarNavGroup[];
     /** Footer copy (onboarding pill, invite row, trial banner). */
     footer?: SidebarFooter;
-} & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Command-palette items, forwarded to the internal `Command`'s own
+     * `items` prop. Omit for Command's built-in Attio set (#364: GRC's
+     * commands aren't Attio's, and there was no way to reach them).
+     */
+    commandItems?: CommandItem[];
+    /** Controlled open state for the command palette. Omit to let Sidebar
+     *  manage it (see `defaultCommandOpen`). */
+    commandOpen?: boolean;
+    /** Initially open, when uncontrolled. */
+    defaultCommandOpen?: boolean;
+    onCommandOpenChange?: (open: boolean) => void;
+    /**
+     * Whether Sidebar attaches its own ⌘K/Ctrl+K document listener to open
+     * the command palette (default `true`). Set `false` when the app already
+     * owns a single global ⌘K listener — e.g. to route the same shortcut to
+     * more than Sidebar's palette elsewhere in the page — and drives
+     * `commandOpen` itself; two listeners on the same key both firing opened
+     * two overlapping instances (#364).
+     */
+    commandShortcut?: boolean;
+} & React.RefAttributes<HTMLElement>>;
 export {};

package/package.json

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