@crisp-ui-kit/crisp 0.57.2 → 0.57.4

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

@@ -52,10 +52,11 @@ const react_dom_1 = require("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
@@ -71,6 +72,8 @@ const react_dom_1 = require("react-dom");
  * element carrying that attribute.
  */
 function FloatingPortal({ children, sourceRef, }) {
+    if (typeof window === "undefined")
+        return children;
     const theme = sourceRef.current
         ?.closest("[data-theme]")
         ?.getAttribute("data-theme");

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.useCrispComponentDefaults = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.hasNestedFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
+exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeSubmenu = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.useCrispComponentDefaults = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.hasNestedFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
 var caret_rect_1 = require("./caret-rect");
 Object.defineProperty(exports, "caretRectInField", { enumerable: true, get: function () { return caret_rect_1.caretRectInField; } });
 var cell_date_1 = require("./cell-date");
@@ -47,6 +47,7 @@ var mention_1 = require("./mention");
 Object.defineProperty(exports, "matchMentionTrigger", { enumerable: true, get: function () { return mention_1.matchMentionTrigger; } });
 var place_floating_1 = require("./place-floating");
 Object.defineProperty(exports, "placeFloating", { enumerable: true, get: function () { return place_floating_1.placeFloating; } });
+Object.defineProperty(exports, "placeSubmenu", { enumerable: true, get: function () { return place_floating_1.placeSubmenu; } });
 var primitive_1 = require("./primitive");
 Object.defineProperty(exports, "Primitive", { enumerable: true, get: function () { return primitive_1.Primitive; } });
 var resolve_1 = require("./resolve");

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.placeFloating = placeFloating;
+exports.placeSubmenu = placeSubmenu;
 const direction_1 = require("./direction");
 /**
  * Where a floating layer goes, in logical terms.
@@ -36,3 +37,40 @@ 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.
+ */
+function placeSubmenu({ rect, size, gap, anchor, }) {
+    const rtl = (0, direction_1.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/cjs/index.js

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

package/dist/cjs/product/assigneepicker/assigneepicker.js

@@ -0,0 +1,127 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssigneePicker = AssigneePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const avatar_1 = require("../../components/avatar");
+const personchip_1 = require("../../components/personchip");
+const select_1 = require("../../components/select");
+const core_1 = require("../../core");
+const assigneepicker_recipe_1 = require("./assigneepicker.recipe");
+// 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.
+ */
+function AssigneePicker({ users, assignee = null, onAssigneeChange, query: queryProp, onQueryChange, searchLabel: searchLabelProp, removeLabel: removeLabelProp, emptyLabel: emptyLabelProp, className, ...rest }) {
+    const searchLabel = (0, core_1.useCrispMessage)(searchLabelProp, "Find a user...");
+    const removeLabel = (0, core_1.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 = (0, core_1.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 } = (0, select_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, assigneepicker_recipe_1.assigneepickerRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-assigneepicker-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, strokeWidth: 1.75 }), (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-assigneepicker-pill", children: (0, jsx_runtime_1.jsx)(personchip_1.PersonChip, { name: assignee.name, avatar: assignee.avatar, trailing: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-assigneepicker-remove", "aria-label": removeLabel, onClick: () => onAssigneeChange?.(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 10, strokeWidth: 2 }) }) }) })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-assigneepicker-empty", children: emptyLabel })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-assigneepicker-list", role: "listbox", id: listboxId, children: filtered.map((u, i) => ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: u.avatar ? "neutral" : hashTone(u.name), style: { flexShrink: 0, marginInlineEnd: 8 }, children: u.avatar ? (0, jsx_runtime_1.jsx)("img", { src: u.avatar, alt: "" }) : initials(u.name) }), u.name] }, u.id))) }))] }));
+}
+AssigneePicker.displayName = "AssigneePicker";

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assigneepickerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "assigneepicker",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: ${tokens_1.contract.font.sans};
+
+    & .crisp-assigneepicker-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 36px; padding: 0 ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.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: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-assigneepicker-search-input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+
+    & .crisp-assigneepicker-pill { display: flex; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.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: ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["3"]}; text-align: center; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+
+    & .crisp-assigneepicker-list { display: flex; flex-direction: column; margin: 0; padding: ${tokens_1.contract.space["1"]}; list-style: none; }
+    & .crisp-assigneepicker-option { display: flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-assigneepicker-option:hover, & .crisp-assigneepicker-option[data-highlighted] { background: ${tokens_1.contract.bgRaised}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.assigneepickerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assigneepickerRecipe = exports.AssigneePicker = void 0;
+var assigneepicker_1 = require("./assigneepicker");
+Object.defineProperty(exports, "AssigneePicker", { enumerable: true, get: function () { return assigneepicker_1.AssigneePicker; } });
+var assigneepicker_recipe_1 = require("./assigneepicker.recipe");
+Object.defineProperty(exports, "assigneepickerRecipe", { enumerable: true, get: function () { return assigneepicker_recipe_1.assigneepickerRecipe; } });

package/dist/cjs/product/inbox/inbox.js

@@ -54,10 +54,18 @@ function Inbox({ notifications = [], title: titleProp, tabs, activeTab, onTabCha
     // own `empty`.
     const crispMessages = (0, core_1.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 = (0, core_1.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
@@ -68,6 +76,6 @@ function Inbox({ notifications = [], title: titleProp, tabs, activeTab, onTabCha
         select: (id) => onTabChange?.(id),
         listRef,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, inbox_recipe_1.inboxRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-head", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-empty-icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), emptyAction != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-action", children: emptyAction }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-list", children: notifications.map((n) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-row-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && (0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, inbox_recipe_1.inboxRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-head", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-empty-icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), resolvedEmptyAction != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-action", children: resolvedEmptyAction }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-list", children: notifications.map((n) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-row-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && (0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
 }
 Inbox.displayName = "Inbox";

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notesgalleryRecipe = exports.NotesGallery = void 0;
+var notesgallery_1 = require("./notesgallery");
+Object.defineProperty(exports, "NotesGallery", { enumerable: true, get: function () { return notesgallery_1.NotesGallery; } });
+var notesgallery_recipe_1 = require("./notesgallery.recipe");
+Object.defineProperty(exports, "notesgalleryRecipe", { enumerable: true, get: function () { return notesgallery_recipe_1.notesgalleryRecipe; } });

package/dist/cjs/product/notesgallery/notesgallery.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotesGallery = NotesGallery;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const tabs_1 = require("../../components/tabs");
+const core_1 = require("../../core");
+const entitycard_1 = require("../entitycard");
+const notesgallery_recipe_1 = require("./notesgallery.recipe");
+function NoteCard({ note }) {
+    return ((0, jsx_runtime_1.jsx)(entitycard_1.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.
+ */
+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 = (0, core_1.useCrispMessage)(notesLabelProp, "Notes");
+    const templatesLabel = (0, core_1.useCrispMessage)(templatesLabelProp, "Templates");
+    const favoritesLabel = (0, core_1.useCrispMessage)(favoritesLabelProp, "Favorites");
+    const favoritesEmptyLabel = (0, core_1.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 = (0, core_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, notesgallery_recipe_1.notesgalleryRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-tabs", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
+                        { value: "notes", label: notesLabel, badge: notesCount },
+                        {
+                            value: "templates",
+                            label: templatesLabel,
+                            badge: templatesCount,
+                        },
+                    ], value: activeTab, onValueChange: setActiveTab }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notesgallery-toolbar", children: [leading, trailing != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-toolbar-trail", children: trailing }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notesgallery-favorites-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-favorites-label", children: favoritesLabel }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-favorites", children: favorites != null && favorites.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-grid", children: favorites.map((n) => ((0, jsx_runtime_1.jsx)(NoteCard, { note: n }, n.id))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-favorites-empty", children: favoritesEmptyLabel })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-body", children: total === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-empty", children: emptyLabel })) : (groups.map((g) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notesgallery-group", children: [g.label, (0, jsx_runtime_1.jsx)("span", { className: "crisp-notesgallery-group-count", children: g.count })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-grid", children: g.notes.map((n) => ((0, jsx_runtime_1.jsx)(NoteCard, { note: n }, n.id))) })] }, g.id)))) })] }));
+}
+NotesGallery.displayName = "NotesGallery";

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notesgalleryRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "notesgallery",
+    base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-notesgallery-tabs { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 44px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; }
+
+    & .crisp-notesgallery-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.header}; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; }
+    & .crisp-notesgallery-toolbar-trail { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; margin-inline-start: auto; }
+
+    & .crisp-notesgallery-favorites-section { background: ${tokens_1.contract.bgSubtle}; box-shadow: inset 0 -1px 0 ${tokens_1.contract.borderSubtle}; }
+    & .crisp-notesgallery-favorites-label { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["4"]} 0; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-notesgallery-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${tokens_1.contract.space["6"]}; }
+    & .crisp-notesgallery-favorites-empty { box-sizing: border-box; width: 100%; padding: ${tokens_1.contract.space["6"]}; border: 1px dashed ${tokens_1.contract.borderDefault}; border-radius: ${tokens_1.contract.radius.xl}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+
+    & .crisp-notesgallery-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]}; }
+    & .crisp-notesgallery-group { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.menuRow}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-notesgallery-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-notesgallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: ${tokens_1.contract.space["4"]}; padding-bottom: ${tokens_1.contract.space["4"]}; }
+
+    & .crisp-notesgallery-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.notesgalleryRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./objectpagemenu"), exports);

package/dist/cjs/product/objectpagemenu/objectpagemenu.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectPageMenu = ObjectPageMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const button_1 = require("../../components/button");
+const menu_1 = require("../../components/menu");
+const core_1 = require("../../core");
+/**
+ * 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).
+ */
+function ObjectPageMenu({ trigger, onObjectSettings, onManageAttributes, onConnectSlack, objectSettingsLabel, manageAttributesLabel, notificationsLabel, connectSlackLabel, "aria-label": ariaLabelProp, align = "end", }) {
+    const objectSettings = (0, core_1.useCrispMessage)(objectSettingsLabel, "Object settings");
+    const manageAttributes = (0, core_1.useCrispMessage)(manageAttributesLabel, "Manage attributes");
+    const notifications = (0, core_1.useCrispMessage)(notificationsLabel, "Notifications");
+    const connectSlack = (0, core_1.useCrispMessage)(connectSlackLabel, "Connect Slack workspace");
+    const ariaLabel = (0, core_1.useCrispMessage)(ariaLabelProp, "Show menu");
+    return ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: align, "aria-label": ariaLabel, trigger: trigger ?? ((0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "md", shape: "icon", "aria-label": ariaLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 16, strokeWidth: 1.75 }), onSelect: onObjectSettings, children: objectSettings }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { size: 16, strokeWidth: 1.75 }), onSelect: onManageAttributes, children: manageAttributes }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.Menu, { placement: "submenu", "aria-label": notifications, trigger: (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 16, strokeWidth: 1.75 }), trailingIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75 }), closeOnSelect: false, children: notifications }), children: (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 16, strokeWidth: 1.75 }), onSelect: onConnectSlack, children: connectSlack }) })] }));
+}
+ObjectPageMenu.displayName = "ObjectPageMenu";

package/dist/cjs/product/objectpagemenu/objectpagemenu.recipe.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectpagemenuRecipe = void 0;
+const core_1 = require("../../core");
+/**
+ * `ObjectPageMenu` owns no styling of its own — every visible pixel is
+ * `Menu`/`MenuItem`'s own already-measured recipe. The one thing it DOES
+ * need is the RTL mirror for its Notifications submenu chevron (crisp#616):
+ * that icon is the first direction-bearing one ever passed as a `MenuItem`
+ * `trailingIcon`, so nothing already mirrors it.
+ *
+ * Not written as `${rtlFlipCss}` (core/rtl.ts): that string relies on native
+ * CSS nesting's `&` resolving to an ENCLOSING rule, which is exactly what
+ * `Menu`'s own recipe deliberately avoids for its portaled content (see its
+ * own doc comment) — nesting this under a `.crisp-objectpagemenu` root would
+ * need a root class this component doesn't have. A plain absolute selector,
+ * matching `Menu`'s own pattern for the identical reason.
+ */
+const config = (0, core_1.defineRecipe)({
+    name: "objectpagemenu",
+    base: "",
+    globalCss: `
+    [dir="rtl"] .crisp-menu-item svg[data-rtl-flip] { transform: scaleX(-1); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.objectpagemenuRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;