@crisp-ui-kit/crisp 0.57.3 → 0.57.4

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

@@ -315,9 +315,24 @@ const config = defineRecipe({
        Avatar's own already-shipped shape="rounded" value, not a new number.
        shape="circle" reuses Avatar's own shape="circle" value (radius.full)
        the same way, measured live on a real Attio person avatar. */
-    & .crisp-datatable-avatar { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${c.weight.semibold}; text-transform: uppercase; color: ${c.fgOnBrand}; background: ${c.bgBrandSolid}; }
+    & .crisp-datatable-avatar { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${c.weight.semibold}; text-transform: uppercase; color: ${c.fgOnTone}; background: ${c.bgBrandSolid}; }
     & .crisp-datatable-avatar[data-shape="circle"] { border-radius: ${c.radius.full}; }
-    & .crisp-datatable-avatar[data-tone="success"] { background: ${c.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${c.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${c.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${c.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${c.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${c.bgOrange}; }
+    /* your-moon/crisp#891: every data-tone override painted ONLY a
+       background, inheriting the base rule's white fgOnBrand -- white
+       clears AA against none of these seven fills (brand 3.23:1, success
+       3.96, warning 4.12, danger 3.76, purple 3.58, cyan 2.30, orange
+       2.77). fgOnTone (ink, #101112 -- semantic.ts's own comment: "dark ink
+       clears AA on every tone in both themes") clears 4.5:1+ on every fill
+       here with a comfortable margin (brand 5.85, success 4.77/6.29,
+       danger 5.03/6.19, purple 5.27, cyan 8.23, orange 6.83, light/dark),
+       so the base rule's colour moves there and every override keeps it --
+       EXCEPT warning, whose raw fill (bgWarning) only clears 4.59:1 in
+       light, too thin a margin to rely on: it takes bgWarningSolid instead,
+       the same solid-warning-plus-ink pair Badge's own solid variant
+       already established (13.98/7.83), for the same reason (see
+       tokens/palette.ts's amberSolid comment). No background changes
+       otherwise -- the fills themselves are unaffected, only the text. */
+    & .crisp-datatable-avatar[data-tone="success"] { background: ${c.bgSuccess}; color: ${c.fgOnTone}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${c.bgWarningSolid}; color: ${c.fgOnTone}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${c.bgDanger}; color: ${c.fgOnTone}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${c.bgPurple}; color: ${c.fgOnTone}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${c.bgCyan}; color: ${c.fgOnTone}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${c.bgOrange}; color: ${c.fgOnTone}; }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: ${c.space["1"]}; overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
@@ -328,6 +343,24 @@ const config = defineRecipe({
     & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
     & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured
+       live, see tokens/palette.ts's tagSwatch1 comment) -- flat black
+       text, no ring, unlike the tone family above. 7px radius/10px text
+       are measured literals (no matching step in the shared scale, same
+       as Select's own .crisp-select-swatch). */
+    & .crisp-datatable-swatch { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: 7px; font-size: 10px; font-weight: ${c.weight.regular}; white-space: nowrap; color: ${c.fgTagSwatch}; }
+    & .crisp-datatable-swatch[data-swatch="1"] { background: ${c.bgTagSwatch1}; }
+    & .crisp-datatable-swatch[data-swatch="2"] { background: ${c.bgTagSwatch2}; }
+    & .crisp-datatable-swatch[data-swatch="3"] { background: ${c.bgTagSwatch3}; }
+    & .crisp-datatable-swatch[data-swatch="4"] { background: ${c.bgTagSwatch4}; }
+    & .crisp-datatable-swatch[data-swatch="5"] { background: ${c.bgTagSwatch5}; }
+    & .crisp-datatable-swatch[data-swatch="6"] { background: ${c.bgTagSwatch6}; }
+    & .crisp-datatable-swatch[data-swatch="7"] { background: ${c.bgTagSwatch7}; }
+    & .crisp-datatable-swatch[data-swatch="8"] { background: ${c.bgTagSwatch8}; }
+    & .crisp-datatable-swatch[data-swatch="9"] { background: ${c.bgTagSwatch9}; }
+    & .crisp-datatable-swatch[data-swatch="10"] { background: ${c.bgTagSwatch10}; }
+    & .crisp-datatable-swatch[data-swatch="11"] { background: ${c.bgTagSwatch11}; }
+    & .crisp-datatable-swatch[data-swatch="12"] { background: ${c.bgTagSwatch12}; }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: ${c.fgMuted}; }
     /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as

package/dist/esm/components/menu/menu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import * as React from "react";
-import { FloatingPortal, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, } from "../../core/index.js";
+import { FloatingPortal, isInsideLaterFloatingLayer, placeFloating, placeSubmenu, registerFloatingLayer, } from "../../core/index.js";
 import { menuRecipe } from "./menu.recipe.js";
 import { useMenuKeyboard } from "./menu-keyboard.js";
 const MenuContext = React.createContext(null);
@@ -12,7 +12,7 @@ const MenuContext = React.createContext(null);
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
-export function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }) {
+export function Menu({ trigger, children, align = "start", placement = "menu", open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }) {
     // The surface and the button that opens it were two unconnected nodes: the
     // menu/dialog had no id, so nothing could point at it, and no accessible
     // name, so a screen reader announced a bare "menu"/"dialog". Labelling the
@@ -28,6 +28,7 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         onOpenChange?.(next);
     }, [openProp, onOpenChange]);
     const [up, setUp] = React.useState(false);
+    const [submenuAlign, setSubmenuAlign] = React.useState("start");
     const [pos, setPos] = React.useState({});
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
@@ -39,6 +40,38 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect)
             return;
+        if (placement === "submenu") {
+            // The content div is already in the DOM by this point (it's part of
+            // the same render this effect runs after, just not yet painted) so its
+            // real rendered size/padding are measurable, not guessed.
+            const content = contentRef.current;
+            const size = content?.getBoundingClientRect() ?? {
+                width: 200,
+                height: 0,
+            };
+            const padTop = content
+                ? Number.parseFloat(getComputedStyle(content).paddingTop) || 0
+                : 0;
+            const { style, align: side, up: flipUp, } = placeSubmenu({
+                // Not a `{...rect}` spread: DOMRect's numeric fields are accessors
+                // on its prototype, not own enumerable properties, so a spread
+                // silently drops everything except the two overridden below.
+                rect: {
+                    left: rect.left,
+                    right: rect.right,
+                    top: rect.top - padTop,
+                    bottom: rect.bottom - padTop,
+                },
+                size,
+                // Measured flush against the item, no gap (crisp#616).
+                gap: 0,
+                anchor: triggerRef.current,
+            });
+            setSubmenuAlign(side);
+            setUp(flipUp);
+            setPos(style);
+            return;
+        }
         const { style, up: flipUp } = placeFloating({
             rect,
             align,
@@ -141,17 +174,24 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
     });
     return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: contentRef, className: contentClassName
                         ? `crisp-menu-content ${contentClassName}`
-                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, onFocus: onContentFocus, children: _jsx(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
+                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": placement === "submenu" ? submenuAlign : align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, onFocus: onContentFocus, children: _jsx(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
-export function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect = true, }) {
+/**
+ * A row inside a `Menu`. Forwards its ref and spreads unrecognised button
+ * props (crisp#616) so it can double as another `Menu`'s own `trigger` —
+ * `Menu` clones its trigger with `ref`/`onClick`/`aria-*`, which a plain
+ * function component would silently drop.
+ */
+export const MenuItem = React.forwardRef(function MenuItem({ children, icon, shortcut, count, trailingIcon, danger, disabled, onSelect, closeOnSelect = true, onClick, ...rest }, ref) {
     const ctx = React.useContext(MenuContext);
-    return (_jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `crisp-menu-item${danger ? " crisp-menu-item--danger" : ""}`, onClick: () => {
+    return (_jsxs("button", { ref: ref, type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `crisp-menu-item${danger ? " crisp-menu-item--danger" : ""}`, onClick: (e) => {
+            onClick?.(e);
             onSelect?.();
             if (closeOnSelect)
                 ctx?.close();
-        }, children: [icon, _jsx("span", { className: "crisp-menu-item-label", children: children }), count != null && _jsx("span", { className: "crisp-menu-item-count", children: count }), shortcut && _jsx("span", { className: "crisp-menu-item-shortcut", children: shortcut })] }));
-}
+        }, ...rest, children: [icon, _jsx("span", { className: "crisp-menu-item-label", children: children }), count != null && (_jsx("span", { className: "crisp-menu-item-count", children: count })), shortcut && (_jsx("span", { className: "crisp-menu-item-shortcut", children: shortcut })), trailingIcon] }));
+});
 MenuItem.displayName = "MenuItem";
 export function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {
     return (_jsxs("button", { type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: "crisp-menu-item", onClick: () => onCheckedChange?.(!checked), children: [checked ? (_jsx(Check, { className: "crisp-menu-item-check", size: 15, strokeWidth: 2 })) : (_jsx("span", { className: "crisp-menu-item-check--placeholder" })), _jsx("span", { className: "crisp-menu-item-label", children: children })] }));

package/dist/esm/components/multiselect/multiselect.js

@@ -21,6 +21,9 @@ function toneFor(t) {
     return TONES[h % TONES.length];
 }
 function Chip({ opt }) {
+    if (opt.swatch) {
+        return (_jsx("span", { className: "crisp-multiselect-swatch", "data-swatch": opt.swatch, children: opt.label }));
+    }
     return (_jsx("span", { className: "crisp-recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
 }
 /**

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

@@ -104,6 +104,24 @@ const config = defineRecipe({
     .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgPurple} 30%, transparent); }
     .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgCyan} 30%, transparent); }
     .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgOrange} 30%, transparent); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured live,
+       see tokens/palette.ts's tagSwatch1 comment) -- flat black text, no
+       ring/border, unlike the tone family above. 7px radius/10px text are
+       measured literals, no matching step in the shared scale (same as
+       Select's own .crisp-select-swatch). */
+    .crisp-multiselect-swatch { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: 7px; font-size: 10px; font-weight: ${c.weight.regular}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: ${c.fgTagSwatch}; }
+    .crisp-multiselect-swatch[data-swatch="1"] { background: ${c.bgTagSwatch1}; }
+    .crisp-multiselect-swatch[data-swatch="2"] { background: ${c.bgTagSwatch2}; }
+    .crisp-multiselect-swatch[data-swatch="3"] { background: ${c.bgTagSwatch3}; }
+    .crisp-multiselect-swatch[data-swatch="4"] { background: ${c.bgTagSwatch4}; }
+    .crisp-multiselect-swatch[data-swatch="5"] { background: ${c.bgTagSwatch5}; }
+    .crisp-multiselect-swatch[data-swatch="6"] { background: ${c.bgTagSwatch6}; }
+    .crisp-multiselect-swatch[data-swatch="7"] { background: ${c.bgTagSwatch7}; }
+    .crisp-multiselect-swatch[data-swatch="8"] { background: ${c.bgTagSwatch8}; }
+    .crisp-multiselect-swatch[data-swatch="9"] { background: ${c.bgTagSwatch9}; }
+    .crisp-multiselect-swatch[data-swatch="10"] { background: ${c.bgTagSwatch10}; }
+    .crisp-multiselect-swatch[data-swatch="11"] { background: ${c.bgTagSwatch11}; }
+    .crisp-multiselect-swatch[data-swatch="12"] { background: ${c.bgTagSwatch12}; }
   `,
     variants: {
         // Owner's follow-up after #867/#879/#882 (crisp/#889): SIZE is Attio's

package/dist/esm/components/select/select.js

@@ -181,7 +181,7 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
     return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, size, invalid, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, "aria-readonly": readOnly ? "true" : undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 16, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, "aria-readonly": readOnly ? "true" : undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (selectedOption.swatch ? (_jsx("span", { className: "crisp-select-swatch", "data-swatch": selectedOption.swatch, children: selectedOption.triggerLabel ?? selectedOption.label })) : (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] }))) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 16, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                         onSearchChange?.(e.target.value);
@@ -192,7 +192,7 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
                             // heading, not one each.
                             const showGroupLabel = opt.group !== undefined &&
                                 opt.group !== filtered[i - 1]?.group;
-                            return (_jsxs(React.Fragment, { children: [showGroupLabel && (_jsx("div", { className: "crisp-select-label", children: opt.group })), _jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), opt.description !== undefined ? (_jsxs("span", { className: "crisp-select-option-body", children: [_jsx("span", { className: "crisp-select-option-label", children: opt.label }), _jsx("span", { className: "crisp-select-option-description", children: opt.description })] })) : (_jsx("span", { className: "crisp-select-option-label", children: opt.label })), isSel && (_jsx(Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
+                            return (_jsxs(React.Fragment, { children: [showGroupLabel && (_jsx("div", { className: "crisp-select-label", children: opt.group })), _jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [!opt.swatch && opt.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), opt.description !== undefined ? (_jsxs("span", { className: "crisp-select-option-body", children: [_jsx("span", { className: "crisp-select-option-label", children: opt.swatch ? (_jsx("span", { className: "crisp-select-swatch", "data-swatch": opt.swatch, children: opt.label })) : (opt.label) }), _jsx("span", { className: "crisp-select-option-description", children: opt.description })] })) : (_jsx("span", { className: "crisp-select-option-label", children: opt.swatch ? (_jsx("span", { className: "crisp-select-swatch", "data-swatch": opt.swatch, children: opt.label })) : (opt.label) })), isSel && (_jsx(Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
                         }))] }) }))] }));
 }
 Select.displayName = "Select";

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

@@ -134,6 +134,25 @@ const config = defineRecipe({
     .crisp-select-option[data-disabled] .crisp-select-option-description,
     .crisp-select-option[data-disabled] .crisp-select-option-check { color: ${c.fgDisabled}; }
     .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${c.radius.full}; margin-inline-end: ${c.space["2"]}; }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured live,
+       see tokens/palette.ts's tagSwatch1 comment) -- the label itself as a
+       filled pill, not a dot beside it. 7px radius/10px text have no
+       matching step in the shared scale (radius.xs is 4px, .sm is 6px;
+       text.xs is 11px), so both are the measured literals, same as
+       DataTable's own avatar font-size (#891). */
+    .crisp-select-swatch { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: 7px; font-size: 10px; font-weight: ${c.weight.regular}; color: ${c.fgTagSwatch}; }
+    .crisp-select-swatch[data-swatch="1"] { background: ${c.bgTagSwatch1}; }
+    .crisp-select-swatch[data-swatch="2"] { background: ${c.bgTagSwatch2}; }
+    .crisp-select-swatch[data-swatch="3"] { background: ${c.bgTagSwatch3}; }
+    .crisp-select-swatch[data-swatch="4"] { background: ${c.bgTagSwatch4}; }
+    .crisp-select-swatch[data-swatch="5"] { background: ${c.bgTagSwatch5}; }
+    .crisp-select-swatch[data-swatch="6"] { background: ${c.bgTagSwatch6}; }
+    .crisp-select-swatch[data-swatch="7"] { background: ${c.bgTagSwatch7}; }
+    .crisp-select-swatch[data-swatch="8"] { background: ${c.bgTagSwatch8}; }
+    .crisp-select-swatch[data-swatch="9"] { background: ${c.bgTagSwatch9}; }
+    .crisp-select-swatch[data-swatch="10"] { background: ${c.bgTagSwatch10}; }
+    .crisp-select-swatch[data-swatch="11"] { background: ${c.bgTagSwatch11}; }
+    .crisp-select-swatch[data-swatch="12"] { background: ${c.bgTagSwatch12}; }
     .crisp-select-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: ${c.space["0.5"]}; }
     .crisp-select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     .crisp-select-option-description { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: ${c.fgNeutralSubtle}; }

package/dist/esm/core/index.js

@@ -9,7 +9,7 @@ export { hasNestedFloatingLayer, hasOpenFloatingLayer, isInsideLaterFloatingLaye
 export { formValueStyle } from "./form-value.js";
 export { CrispMessagesProvider, useCrispComponentDefaults, useCrispMessage, useCrispMessages, } from "./i18n.js";
 export { matchMentionTrigger, } from "./mention.js";
-export { placeFloating, } from "./place-floating.js";
+export { placeFloating, placeSubmenu, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
 export * from "./rtl.js";

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

@@ -33,3 +33,40 @@ export function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }
         style.left = rect.left;
     return { style, up };
 }
+/**
+ * Where a cascading submenu goes, BESIDE the item that opens it — not below
+ * it, the way `placeFloating`'s own dropdown does. Opens toward the inline
+ * end by default (further into the reading direction) and flips to the
+ * inline start when the surface's measured width doesn't fit there.
+ *
+ * Live-measured on Attio's own object-page "…" menu (crisp#616): the
+ * Notifications submenu sits with NO gap against the item's opposite edge
+ * (its own edge lines up exactly with the item's), so callers pass `gap: 0`
+ * for this specific cascade rather than the 4px a dropdown uses against its
+ * trigger.
+ */
+export function placeSubmenu({ rect, size, gap, anchor, }) {
+    const rtl = isRtlElement(anchor);
+    // "end" here is the inline-end direction FROM the item, e.g. further
+    // right in LTR — the room available there is measured from whichever
+    // physical edge that is.
+    const roomTowardEnd = rtl ? rect.left : window.innerWidth - rect.right;
+    const opensEnd = roomTowardEnd >= size.width + gap;
+    const align = opensEnd ? "start" : "end";
+    const style = {};
+    // Same formula as `placeFloating`'s own `toRight`, applied to the opposite
+    // geometry: there `align` picks which of the TRIGGER's edges the layer's
+    // matching edge lines up with; here it picks which side of the ITEM the
+    // layer cascades toward.
+    const anchorRight = align === "end" ? !rtl : rtl;
+    if (anchorRight)
+        style.right = window.innerWidth - rect.left + gap;
+    else
+        style.left = rect.right + gap;
+    const up = rect.top + size.height > window.innerHeight;
+    if (up)
+        style.bottom = Math.max(0, window.innerHeight - rect.bottom);
+    else
+        style.top = rect.top;
+    return { style, align, up };
+}

package/dist/esm/index.js

@@ -76,6 +76,7 @@ export * from "./core/index.js";
 // the generic primitives (Table, DataTable, Button, …) to build your own UI from.
 export * from "./product/activityfeed/index.js";
 export * from "./product/appshell/index.js";
+export * from "./product/assigneepicker/index.js";
 export * from "./product/authshell/index.js";
 export * from "./product/board/index.js";
 export * from "./product/command/index.js";
@@ -89,21 +90,28 @@ export * from "./product/inbox/index.js";
 export * from "./product/listpage/index.js";
 export * from "./product/memberssettings/index.js";
 export * from "./product/navitem/index.js";
+export * from "./product/notesgallery/index.js";
 export * from "./product/notificationssettings/index.js";
+export * from "./product/objectpagemenu/index.js";
 export * from "./product/objectsettings/index.js";
 export * from "./product/onboarding/index.js";
 export * from "./product/recordpage/index.js";
 export * from "./product/recordpanel/index.js";
+export * from "./product/recordpicker/index.js";
 export * from "./product/richtext/index.js";
 export * from "./product/savedviews/index.js";
 export * from "./product/settingssection/index.js";
 export * from "./product/settingsshell/index.js";
+export * from "./product/share/index.js";
+export * from "./product/shortcutssheet/index.js";
 export * from "./product/sidebar/index.js";
 export * from "./product/statlist/index.js";
+export * from "./product/taskeditpopover/index.js";
 export * from "./product/tasklist/index.js";
 export * from "./product/themepicker/index.js";
 export * from "./product/trialbanner/index.js";
 export * from "./product/viewtoggle/index.js";
 export * from "./product/workspacegeneralsettings/index.js";
+export * from "./product/workspaceswitchermenu/index.js";
 // design tokens + recipe core (for building custom components)
 export * from "./tokens/index.js";

package/dist/esm/product/assigneepicker/assigneepicker.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+import * as React from "react";
+import { Avatar } from "../../components/avatar/index.js";
+import { PersonChip } from "../../components/personchip/index.js";
+import { useListboxKeyboard } from "../../components/select/index.js";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
+import { assigneepickerRecipe } from "./assigneepicker.recipe.js";
+// Same five hashed avatar tones as `PersonChip`'s own (transcribed, not
+// imported -- PersonChip's are private to that file, and this is the same
+// one-line pure function `personchip.tsx` itself transcribes from
+// `datatable.tsx`'s `TAG_TONES` rather than sharing an import; see its own
+// comment for why that's fine here).
+const HASH_TONES = ["brand", "orange", "cyan", "purple", "green"];
+function hashTone(name) {
+    let h = 0;
+    for (let i = 0; i < name.length; i++)
+        h = (h * 31 + name.charCodeAt(i)) >>> 0;
+    return HASH_TONES[h % HASH_TONES.length];
+}
+function initials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    return (parts[0][0] + (parts[1]?.[0] ?? "")).toUpperCase();
+}
+/**
+ * The picker behind a task's "Assigned to" chip -- measured live on
+ * app.attio.com's Tasks page ("Edit task" -> "Assigned to You" -> its own
+ * sub-popover, `Popover`-sized at the same measured 350px): a "Find a
+ * user..." search, the current assignee as a removable pill, then a plain
+ * option list, or "No users" when nothing matches. Attio's task assignment
+ * is single-user (one pill, replaced by picking another), unlike a
+ * multi-value field.
+ */
+export function AssigneePicker({ users, assignee = null, onAssigneeChange, query: queryProp, onQueryChange, searchLabel: searchLabelProp, removeLabel: removeLabelProp, emptyLabel: emptyLabelProp, className, ...rest }) {
+    const searchLabel = useCrispMessage(searchLabelProp, "Find a user...");
+    const removeLabel = useCrispMessage(removeLabelProp, "Remove assignee");
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only --
+    // same reasoning as `Inbox`'s own `emptyTitle`/`emptySubtitle`.
+    const crispMessages = useCrispMessages();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No users"] ?? "No users";
+    const [internalQuery, setInternalQuery] = React.useState("");
+    const query = queryProp ?? internalQuery;
+    const setQuery = (q) => {
+        if (queryProp === undefined)
+            setInternalQuery(q);
+        onQueryChange?.(q);
+    };
+    const [highlight, setHighlight] = React.useState(0);
+    const autoId = React.useId();
+    const listboxId = `${autoId}-listbox`;
+    const optionId = (i) => `${autoId}-opt-${i}`;
+    const q = query.trim().toLowerCase();
+    const candidates = users.filter((u) => u.id !== assignee?.id);
+    const filtered = q
+        ? candidates.filter((u) => u.name.toLowerCase().includes(q))
+        : candidates;
+    const select = (u) => {
+        onAssigneeChange?.(u);
+        setQuery("");
+        setHighlight(0);
+    };
+    // crisp's shared popup-listbox model (#198), same as Select/MultiSelect --
+    // arrows, Home/End and wrapping, instead of a second hand-rolled one.
+    const { onKeyDown } = useListboxKeyboard({
+        enabledIndexes: filtered.map((_, i) => i),
+        highlight,
+        setHighlight,
+        commit: () => {
+            const u = filtered[highlight];
+            if (u)
+                select(u);
+        },
+        // Escape/Tab are for the enclosing Popover to handle (it owns open/close
+        // here, this picker has no floating state of its own).
+        close: () => { },
+        dismiss: () => { },
+    });
+    const activeId = highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
+    return (_jsxs("div", { className: assigneepickerRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-assigneepicker-search", children: [_jsx(Search, { size: 16, strokeWidth: 1.75 }), _jsx("input", { type: "text", className: "crisp-assigneepicker-search-input", placeholder: searchLabel, value: query, onChange: (e) => {
+                            setQuery(e.target.value);
+                            setHighlight(0);
+                        }, onKeyDown: onKeyDown, role: "combobox", "aria-expanded": "true", "aria-controls": listboxId, "aria-activedescendant": activeId, 
+                        // biome-ignore lint/a11y/noAutofocus: focus the search field the moment its enclosing popover opens
+                        autoFocus: true })] }), assignee != null && (_jsx("div", { className: "crisp-assigneepicker-pill", children: _jsx(PersonChip, { name: assignee.name, avatar: assignee.avatar, trailing: _jsx("button", { type: "button", className: "crisp-assigneepicker-remove", "aria-label": removeLabel, onClick: () => onAssigneeChange?.(null), children: _jsx(X, { size: 10, strokeWidth: 2 }) }) }) })), filtered.length === 0 ? (_jsx("div", { className: "crisp-assigneepicker-empty", children: emptyLabel })) : (_jsx("div", { className: "crisp-assigneepicker-list", role: "listbox", id: listboxId, children: filtered.map((u, i) => (_jsxs("button", { type: "button", id: optionId(i), role: "option", tabIndex: -1, "aria-selected": i === highlight, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-assigneepicker-option", onMouseEnter: () => setHighlight(i), onClick: () => select(u), children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: u.avatar ? "neutral" : hashTone(u.name), style: { flexShrink: 0, marginInlineEnd: 8 }, children: u.avatar ? _jsx("img", { src: u.avatar, alt: "" }) : initials(u.name) }), u.name] }, u.id))) }))] }));
+}
+AssigneePicker.displayName = "AssigneePicker";

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

@@ -0,0 +1,33 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The assignee picker behind a task's "Assigned to" chip -- measured live on
+// app.attio.com's Tasks page (Edit task -> "Assigned to You" -> its own
+// sub-popover): a borderless 14px/500 "Find a user..." search row, the
+// current assignee as a removable pill below it, then a plain option list
+// (32px rows, radius 8, the same measured hover crisp's other listboxes
+// share -- see menu.recipe.ts's own comment) or a centred "No users" line.
+// The popover shell itself (radius/shadow/width) is `Popover`'s own --
+// this is only the 350px-wide content Attio's own picker measured at.
+const config = defineRecipe({
+    name: "assigneepicker",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: ${c.font.sans};
+
+    & .crisp-assigneepicker-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["3"]}; color: ${c.fgMuted}; }
+    & .crisp-assigneepicker-search svg { flex-shrink: 0; }
+    & .crisp-assigneepicker-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; color: ${c.fgPrimary}; }
+    & .crisp-assigneepicker-search-input::placeholder { color: ${c.fgMuted}; }
+
+    & .crisp-assigneepicker-pill { display: flex; padding: 0 ${c.space["3"]} ${c.space["2"]}; }
+    & .crisp-assigneepicker-remove { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; margin: 0; padding: 0; border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; }
+
+    & .crisp-assigneepicker-empty { padding: ${c.space["4"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+
+    & .crisp-assigneepicker-list { display: flex; flex-direction: column; margin: 0; padding: ${c.space["1"]}; list-style: none; }
+    & .crisp-assigneepicker-option { display: flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-assigneepicker-option:hover, & .crisp-assigneepicker-option[data-highlighted] { background: ${c.bgRaised}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const assigneepickerRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/assigneepicker/index.js

@@ -0,0 +1,2 @@
+export { AssigneePicker, } from "./assigneepicker.js";
+export { assigneepickerRecipe } from "./assigneepicker.recipe.js";

package/dist/esm/product/notesgallery/index.js

@@ -0,0 +1,2 @@
+export { NotesGallery, } from "./notesgallery.js";
+export { notesgalleryRecipe } from "./notesgallery.recipe.js";

package/dist/esm/product/notesgallery/notesgallery.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tabs } from "../../components/tabs/index.js";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
+import { EntityCard } from "../entitycard/index.js";
+import { notesgalleryRecipe } from "./notesgallery.recipe.js";
+function NoteCard({ note }) {
+    return (_jsx(EntityCard, { author: note.linkedRecord, title: note.title, excerpt: note.excerpt, footer: note.author, date: note.date, onClick: note.onClick }));
+}
+/**
+ * The standalone Notes gallery -- measured live on app.attio.com's Notes
+ * page: "Notes N"/"Templates N" sub-tabs, a toolbar (Sort/View
+ * toggle/settings/New note, all consumer-composed), a dashed "Favorites"
+ * region, and date-grouped card sections. The card itself is `EntityCard`
+ * (crisp#474's own "measured from a Notes grid" component) — this shell
+ * only adds the gallery chrome around it.
+ */
+export function NotesGallery({ notesCount, templatesCount, activeTab: activeTabProp, defaultActiveTab = "notes", onActiveTabChange, notesLabel: notesLabelProp, templatesLabel: templatesLabelProp, leading, trailing, favoritesLabel: favoritesLabelProp, favorites, favoritesEmptyLabel: favoritesEmptyLabelProp, groups, emptyLabel: emptyLabelProp, className, ...rest }) {
+    const notesLabel = useCrispMessage(notesLabelProp, "Notes");
+    const templatesLabel = useCrispMessage(templatesLabelProp, "Templates");
+    const favoritesLabel = useCrispMessage(favoritesLabelProp, "Favorites");
+    const favoritesEmptyLabel = useCrispMessage(favoritesEmptyLabelProp, "Notes that you favorite will appear here");
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only.
+    const crispMessages = useCrispMessages();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No notes"] ?? "No notes";
+    const [internalTab, setInternalTab] = React.useState(defaultActiveTab);
+    const activeTab = activeTabProp ?? internalTab;
+    const setActiveTab = (v) => {
+        if (activeTabProp === undefined)
+            setInternalTab(v);
+        onActiveTabChange?.(v);
+    };
+    const total = groups.reduce((s, g) => s + g.notes.length, 0);
+    return (_jsxs("div", { className: notesgalleryRecipe({ className }), ...rest, children: [_jsx("div", { className: "crisp-notesgallery-tabs", children: _jsx(Tabs, { tabs: [
+                        { value: "notes", label: notesLabel, badge: notesCount },
+                        {
+                            value: "templates",
+                            label: templatesLabel,
+                            badge: templatesCount,
+                        },
+                    ], value: activeTab, onValueChange: setActiveTab }) }), _jsxs("div", { className: "crisp-notesgallery-toolbar", children: [leading, trailing != null && (_jsx("div", { className: "crisp-notesgallery-toolbar-trail", children: trailing }))] }), _jsxs("div", { className: "crisp-notesgallery-favorites-section", children: [_jsx("div", { className: "crisp-notesgallery-favorites-label", children: favoritesLabel }), _jsx("div", { className: "crisp-notesgallery-favorites", children: favorites != null && favorites.length > 0 ? (_jsx("div", { className: "crisp-notesgallery-grid", children: favorites.map((n) => (_jsx(NoteCard, { note: n }, n.id))) })) : (_jsx("div", { className: "crisp-notesgallery-favorites-empty", children: favoritesEmptyLabel })) })] }), _jsx("div", { className: "crisp-notesgallery-body", children: total === 0 ? (_jsx("div", { className: "crisp-notesgallery-empty", children: emptyLabel })) : (groups.map((g) => (_jsxs("div", { children: [_jsxs("div", { className: "crisp-notesgallery-group", children: [g.label, _jsx("span", { className: "crisp-notesgallery-group-count", children: g.count })] }), _jsx("div", { className: "crisp-notesgallery-grid", children: g.notes.map((n) => (_jsx(NoteCard, { note: n }, n.id))) })] }, g.id)))) })] }));
+}
+NotesGallery.displayName = "NotesGallery";

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

@@ -0,0 +1,43 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The standalone Notes gallery -- measured live on app.attio.com's Notes
+// page: a toolbar (leading Sort control, trailing view toggle/View
+// settings/New note, both consumer-composed slots -- crisp doesn't own the
+// exact button set, same reasoning as `ListPage`'s own leading/trailing), a
+// dashed "Favorites" region, then date-grouped sections (a group header +
+// count badge, transcribed from `ListPage`'s own already-measured values
+// rather than re-deriving them -- this IS the same Attio pattern, applied
+// above a card grid instead of a row list) holding a responsive card grid of
+// `EntityCard`s.
+//
+// The grid itself: a single real note card measured 356px wide -- with only
+// one note in the workspace there was no second card to read a column gap or
+// count from, so this uses a responsive `auto-fill` grid at that measured
+// per-card width instead of inventing a fixed column count or gap.
+const config = defineRecipe({
+    name: "notesgallery",
+    base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${c.font.sans}; color: ${c.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-notesgallery-tabs { display: flex; align-items: center; gap: ${c.space["2"]}; height: 44px; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
+
+    & .crisp-notesgallery-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.header}; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
+    & .crisp-notesgallery-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; margin-inline-start: auto; }
+
+    & .crisp-notesgallery-favorites-section { background: ${c.bgSubtle}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; }
+    & .crisp-notesgallery-favorites-label { padding: ${c.space["2"]} ${c.space["4"]} 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-notesgallery-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${c.space["6"]}; }
+    & .crisp-notesgallery-favorites-empty { box-sizing: border-box; width: 100%; padding: ${c.space["6"]}; border: 1px dashed ${c.borderDefault}; border-radius: ${c.radius.xl}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+
+    & .crisp-notesgallery-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["3"]} ${c.space["3"]}; }
+    & .crisp-notesgallery-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.menuRow}; padding: ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-notesgallery-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
+    & .crisp-notesgallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: ${c.space["4"]}; padding-bottom: ${c.space["4"]}; }
+
+    & .crisp-notesgallery-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const notesgalleryRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/objectpagemenu/index.js

@@ -0,0 +1 @@
+export * from "./objectpagemenu.js";

package/dist/esm/product/objectpagemenu/objectpagemenu.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell, ChevronRight, LayoutGrid, MessageSquare, MoreHorizontal, Settings, } from "lucide-react";
+import { Button } from "../../components/button/index.js";
+import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
+import { useCrispMessage } from "../../core/index.js";
+/**
+ * The page-level "…" menu on Attio's object page: Object settings / Manage
+ * attributes / a Notifications submenu ("Connect Slack workspace") — crisp
+ * parity checklist rows G-020/P-005 (crisp#616). Live-measured on
+ * app.attio.com/techpartners/companies: 208×114 popover (12px radius, 4px
+ * padding, 32px rows), a hairline separator before Notifications, and its
+ * submenu opening flush against the item with no gap, flipping side when
+ * the measured width doesn't fit (`placeSubmenu`, core/place-floating.ts).
+ */
+export function ObjectPageMenu({ trigger, onObjectSettings, onManageAttributes, onConnectSlack, objectSettingsLabel, manageAttributesLabel, notificationsLabel, connectSlackLabel, "aria-label": ariaLabelProp, align = "end", }) {
+    const objectSettings = useCrispMessage(objectSettingsLabel, "Object settings");
+    const manageAttributes = useCrispMessage(manageAttributesLabel, "Manage attributes");
+    const notifications = useCrispMessage(notificationsLabel, "Notifications");
+    const connectSlack = useCrispMessage(connectSlackLabel, "Connect Slack workspace");
+    const ariaLabel = useCrispMessage(ariaLabelProp, "Show menu");
+    return (_jsxs(Menu, { align: align, "aria-label": ariaLabel, trigger: trigger ?? (_jsx(Button, { intent: "ghost", size: "md", shape: "icon", "aria-label": ariaLabel, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), children: [_jsx(MenuItem, { icon: _jsx(Settings, { size: 16, strokeWidth: 1.75 }), onSelect: onObjectSettings, children: objectSettings }), _jsx(MenuItem, { icon: _jsx(LayoutGrid, { size: 16, strokeWidth: 1.75 }), onSelect: onManageAttributes, children: manageAttributes }), _jsx(MenuSeparator, {}), _jsx(Menu, { placement: "submenu", "aria-label": notifications, trigger: _jsx(MenuItem, { icon: _jsx(Bell, { size: 16, strokeWidth: 1.75 }), trailingIcon: _jsx(ChevronRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75 }), closeOnSelect: false, children: notifications }), children: _jsx(MenuItem, { icon: _jsx(MessageSquare, { size: 16, strokeWidth: 1.75 }), onSelect: onConnectSlack, children: connectSlack }) })] }));
+}
+ObjectPageMenu.displayName = "ObjectPageMenu";