@crisp-ui-kit/crisp 0.57.2 → 0.57.4

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,
@@ -104,12 +137,28 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    const { onKeyDown: onContentKeyDown } = useMenuKeyboard({
+    const { onKeyDown: onContentKeyDown, items } = useMenuKeyboard({
         open,
         close,
         dismiss: () => setOpen(false),
         contentRef,
     });
+    // Roving tabindex (crisp#964): every item hardcodes tabIndex={-1} for the
+    // arrow-key model above, which means none of them is ever a real Tab stop
+    // on its own -- kept in sync with wherever focus actually lands, same as
+    // MenuSheet's identical fix (#966).
+    const onContentFocus = React.useCallback((e) => {
+        for (const el of items())
+            el.tabIndex = -1;
+        e.target.tabIndex = 0;
+    }, [items]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const [first] = items();
+        if (first)
+            first.tabIndex = 0;
+    }, [open, items]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,
@@ -125,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, 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/components/table/table.recipe.js

@@ -21,7 +21,13 @@ const config = defineRecipe({
        (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
        ColumnCalc's own already-correct 12px trigger inset. */
-    & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    /* #719: overflow: clip, not hidden -- both render the ellipsis
+       identically, but hidden still honours a programmatic scrollLeft
+       assignment (a screenshot tool, a browser extension) even though it
+       already blocks user-driven wheel/scrollbar input; clip leaves no
+       scroll position for anything to move, so the truncated text can
+       never be panned out of view. */
+    & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
     /* #554: sticky on the vertical axis, mirroring RecordsTable's own
        \`.crisp-recordstable-th\`. z-index 2 sits above a plain body cell (auto)
        and below a sticky-column corner cell (DataTable's \`th[data-sticky]\`,

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

@@ -16,10 +16,11 @@ import { createPortal } from "react-dom";
  * `Dialog` was rendering offset by the dialog's own box instead of anchored
  * to its trigger.
  *
- * Every caller renders this conditionally on its own `open` state, which
- * starts `false` and is driven only by client interaction — never a prop a
- * fixture sets true at mount (unlike Dialog/Drawer/Command) — so this never
- * touches `document` during SSR, the same safety Tooltip already had.
+ * Every caller renders this conditionally on its own `open` state. A fixture
+ * CAN set that true at mount (crisp#964 needs exactly that, to give Menu's
+ * roving-tabindex guard something to inspect), so this checks for `window`
+ * itself rather than assuming the caller never does — the same guard
+ * `@zag-js/react`'s own `Portal` uses for the identical reason.
  *
  * `sourceRef` is the caller's own root — still in its original DOM position,
  * never portaled — used to carry a `data-theme` set on some ancestor of it
@@ -35,6 +36,8 @@ import { createPortal } from "react-dom";
  * element carrying that attribute.
  */
 export function FloatingPortal({ children, sourceRef, }) {
+    if (typeof window === "undefined")
+        return children;
     const theme = sourceRef.current
         ?.closest("[data-theme]")
         ?.getAttribute("data-theme");

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/inbox/inbox.js

@@ -18,10 +18,18 @@ export function Inbox({ notifications = [], title: titleProp, tabs, activeTab, o
     // own `empty`.
     const crispMessages = useCrispMessages();
     const title = titleProp ?? crispMessages.Notifications ?? "Notifications";
-    const emptyTitle = emptyTitleProp ?? crispMessages["No notifications"] ?? "No notifications";
-    const emptySubtitle = emptySubtitleProp ??
+    // A tab's own empty copy wins over the instance-level prop, which wins
+    // over the built-in default — same precedence as `title`/`emptyAction`.
+    const activeTabDef = tabs?.find((t) => t.id === activeTab);
+    const emptyTitle = activeTabDef?.emptyTitle ??
+        emptyTitleProp ??
+        crispMessages["No notifications"] ??
+        "No notifications";
+    const emptySubtitle = activeTabDef?.emptySubtitle ??
+        emptySubtitleProp ??
         crispMessages["Notifications such as mentions and important updates will be displayed here."] ??
         "Notifications such as mentions and important updates will be displayed here.";
+    const resolvedEmptyAction = activeTabDef?.emptyAction ?? emptyAction;
     const tabsLabel = useCrispMessage(tabsLabelProp, "Notification views");
     // crisp's shared tablist model, the one `Tabs` runs (#195). Hand-rolling a
     // second one is how Inbox ended up with no arrow keys, no roving tabindex
@@ -32,6 +40,6 @@ export function Inbox({ notifications = [], title: titleProp, tabs, activeTab, o
         select: (id) => onTabChange?.(id),
         listRef,
     });
-    return (_jsxs("div", { className: inboxRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-inbox-head", children: [_jsx("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "crisp-inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && (_jsxs("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "crisp-inbox-empty", children: [_jsx("span", { className: "crisp-inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), emptyAction != null && (_jsx("div", { className: "crisp-inbox-empty-action", children: emptyAction }))] })) : (_jsx("div", { className: "crisp-inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "crisp-inbox-row-body", children: [_jsx("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
+    return (_jsxs("div", { className: inboxRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-inbox-head", children: [_jsx("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "crisp-inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && (_jsxs("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "crisp-inbox-empty", children: [_jsx("span", { className: "crisp-inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), resolvedEmptyAction != null && (_jsx("div", { className: "crisp-inbox-empty-action", children: resolvedEmptyAction }))] })) : (_jsx("div", { className: "crisp-inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "crisp-inbox-row-body", children: [_jsx("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
 }
 Inbox.displayName = "Inbox";

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";