@crisp-ui-kit/crisp 0.57.3 → 0.57.4

package/dist/cjs/product/recordpage/recordpage.js

@@ -44,6 +44,7 @@ const avatar_1 = require("../../components/avatar");
 const button_1 = require("../../components/button");
 const checkbox_1 = require("../../components/checkbox");
 const drawer_1 = require("../../components/drawer");
+const kbd_1 = require("../../components/kbd");
 const menu_1 = require("../../components/menu");
 const select_1 = require("../../components/select");
 const spinner_1 = require("../../components/spinner");
@@ -118,6 +119,12 @@ exports.recordPageLabels = {
     upgradeToViewCalls: "Upgrade to view calls",
     callsUpgradeHint: "No call recordings yet! Upgrade to Pro to start recording calls.",
     upgrade: "Upgrade",
+    selectWorkflowTitle: "Select workflow",
+    closeWorkflowPopover: "Close",
+    searchWorkflowsPlaceholder: "Search workflows...",
+    noWorkflows: "No workflows",
+    createNewWorkflow: "Create new workflow",
+    navigate: "Navigate",
     highlights: "Highlights",
     recordDetails: "Record Details",
     searchFields: "Search fields",
@@ -515,7 +522,7 @@ function RecordDetails({ record, columns, sections, onEdit, labels, className, r
                                                                 commit(record.id, col.key, e.currentTarget.value);
                                                             } }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-recordpage-edit-pending" })), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
                                     }
-                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-field", children: [label, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-edit-trigger", onClick: () => openEditing(col.key), children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t }) })) : ((0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t })), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-field", children: [label, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit && col.type === "url" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-edit-affordance", "aria-label": `Edit ${col.label}`, onClick: () => openEditing(col.key), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 16, strokeWidth: 1.75 }) })] })) : canEdit ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-edit-trigger", onClick: () => openEditing(col.key), children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t }) })) : ((0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t })), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
                                 })] }, g.title != null ? String(g.title) : `section-${i}`))), canRevealFields && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-viewall crisp-recordpage-viewall--section", onClick: () => {
                                 // Revealing all fields also opens the (focused) field
                                 // search; collapsing closes it.
@@ -555,6 +562,46 @@ function RecordPageMain({ className, children, ...rest }) {
     return ((0, jsx_runtime_1.jsx)("main", { className: (0, core_1.cx)("crisp-recordpage-main", className), ...rest, children: children }));
 }
 RecordPageMain.displayName = "RecordPageMain";
+/**
+ * The "Run workflow" quick action's own popover (#620, P-018) — measured
+ * live on `app.attio.com`'s own record page: a centered, top-anchored
+ * overlay sharing the exact same frosted-bezel shell `product/command`'s
+ * own Cmd-K palette already uses (`elevation.modal`, `bgOverlayFrost` 60% +
+ * `blur(15px)`, radius `2xl`/`xl` outer/inner) — duplicated into this
+ * recipe rather than imported, the same "own copy per product surface"
+ * choice already made elsewhere in this codebase (`product/command` is
+ * outside this lane's own `product/recordpage` ownership).
+ *
+ * Chrome only, like the quick-action row's own Compose email/Add to list
+ * buttons above: crisp has no workflow data model to search or list yet, so
+ * the search box is real and typable but filters nothing, and the "No
+ * workflows" empty state always renders. The measured popover's own
+ * illustration is a bespoke Attio graphic (Golden Rule 4: Lucide only) —
+ * reuses crisp's own established "illustrated empty state" dotted-grid tile
+ * (`.crisp-recordpage-illustrated-icon`, already shipped for Files/Deals)
+ * with a `Workflow` glyph instead.
+ */
+function WorkflowPopover({ open, onClose, labels, }) {
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-workflow-backdrop" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-workflow-positioner", onClick: (e) => {
+                    if (e.target === e.currentTarget)
+                        onClose();
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-workflow-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-workflow-card", role: "dialog", "aria-modal": "true", "aria-label": labels.selectWorkflowTitle, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-workflow-header", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-workflow-title", children: labels.selectWorkflowTitle }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-workflow-close", "aria-label": labels.closeWorkflowPopover, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-workflow-search", children: (0, jsx_runtime_1.jsx)("input", { 
+                                    // biome-ignore lint/a11y/noAutofocus: focusing the just-opened popover's search is expected
+                                    autoFocus: true, type: "text", role: "combobox", "aria-expanded": "true", "aria-label": labels.selectWorkflowTitle, placeholder: labels.searchWorkflowsPlaceholder, className: "crisp-recordpage-workflow-input" }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-workflow-sep" }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-workflow-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-desc", children: labels.noWorkflows }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-workflow-create", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 1.75 }), labels.createNewWorkflow] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-workflow-footer", children: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-workflow-footer-nav", children: [(0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: "\u2191" }), (0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: "\u2193" }), labels.navigate] }) })] }) }) })] }));
+}
+WorkflowPopover.displayName = "WorkflowPopover";
 /**
  * The full-page company record view — the page that opens when you click into a
  * record (as opposed to the peek [RecordPanel]). A top breadcrumb bar with
@@ -563,9 +610,15 @@ RecordPageMain.displayName = "RecordPageMain";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, onClose, closeLabel = "Close", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", counterLabel, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, comments: commentsProp, onPostComment, currentUser, onShare, ...rest }) {
+function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, onClose, closeLabel = "Close", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", counterLabel, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, comments: commentsProp, onPostComment, currentUser, onShare, avatarShape = "rounded", onEditRecord, onDelete, actions, showBreadcrumb = true, showShare = true, showAskAttio = true, showComments = true, ...rest }) {
     const t = useRecordPageLabels(labels);
     const [favorite, setFavorite] = React.useState(false);
+    // #620: the "Run workflow" quick action's own popover -- only the
+    // BUILT-IN default quick-action list opens it (below); a caller supplying
+    // its own `quickActions` owns every button's behaviour itself, the same
+    // "caller's own list, not a merge" contract `tabs`/`highlights` already
+    // make.
+    const [workflowPopoverOpen, setWorkflowPopoverOpen] = React.useState(false);
     // Notes/Tasks are controlled when the caller supplies `notes`/`tasks` (even
     // `[]`) -- otherwise RecordPage keeps its own self-contained state, as
     // before (#379). "Controlled" here means the array prop alone decides the
@@ -682,7 +735,13 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     // choice `tabs` (#379) and `highlights` (#528) already make.
     const defaultQuickActions = [
         { label: t.logANote, icon: lucide_react_1.FileText },
-        { label: t.runWorkflow, icon: lucide_react_1.Workflow },
+        // #620: only the built-in default wires this to crisp's own popover --
+        // see `workflowPopoverOpen`'s own comment above.
+        {
+            label: t.runWorkflow,
+            icon: lucide_react_1.Workflow,
+            onSelect: () => setWorkflowPopoverOpen(true),
+        },
         { label: t.createATask, icon: lucide_react_1.SquareCheck },
     ];
     const quickActions = quickActionsProp ?? defaultQuickActions;
@@ -825,7 +884,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", "data-peek": onClose ? "" : undefined, children: [onClose ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-peekbar", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-iconbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-peek-pager", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), counterLabel != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-peek-counter", children: counterLabel }))] })) : ((0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, 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.Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", "data-peek": onClose ? "" : undefined, children: [onClose ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-peekbar", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-iconbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-peek-pager", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), counterLabel != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-peek-counter", children: counterLabel }))] })) : (showBreadcrumb && ((0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }))), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [showShare && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share })), showComments && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 15, strokeWidth: 1.75 }) })), showAskAttio && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] })), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, 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.Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), actions && actions.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), actions.map((a) => ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }), onSelect: a.onSelect, danger: a.danger, children: a.label }, a.label)))] })), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), onSelect: onDelete, danger: true, children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: avatarShape, tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, onClick: onEditRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
                                 return;
                             // The pointer drag learned its direction in #212; this did not.
@@ -837,6 +896,6 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                             setDetailsW((w) => grow
                                 ? Math.min(DETAILS_MAX_W, w + 16)
                                 : Math.max(DETAILS_MIN_W, w - 16));
-                        } }), (0, jsx_runtime_1.jsx)(RecordPageMain, { children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), (0, jsx_runtime_1.jsx)(drawer_1.Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(comments_1.CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
+                        } }), (0, jsx_runtime_1.jsx)(RecordPageMain, { children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), (0, jsx_runtime_1.jsx)(drawer_1.Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(comments_1.CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) }), (0, jsx_runtime_1.jsx)(WorkflowPopover, { open: workflowPopoverOpen, onClose: () => setWorkflowPopoverOpen(false), labels: t })] }));
 }
 RecordPage.displayName = "RecordPage";

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

@@ -127,6 +127,19 @@ const config = (0, core_1.defineRecipe)({
        the component's own comment) -- NOT \`display: contents\`, which
        drops a button's accessible semantics in some engines. */
     & .crisp-recordpage-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
+    /* #990: measured live on app.attio.com's URL/domain attribute (hover the
+       row) -- the link itself never carries the edit affordance, a
+       separate 20px button trails it, mounting only on hover: 16px icon,
+       rgba(0,0,0,0.55) (crisp's own color-mix(fgPrimary 55%) -- the exact
+       formula .crisp-datatable-entity-action's identical muted icon
+       already uses), 6px radius (radius.sm). Reveal is opacity-based,
+       not the mount/unmount Attio's own DOM does, so a keyboard user
+       tabbing to it (:focus-visible) doesn't need the row hovered first --
+       same mechanism DataTable's own row actions (#601) already use. */
+    & .crisp-recordpage-edit-affordance { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s, color .12s; }
+    & .crisp-recordpage-field:hover .crisp-recordpage-edit-affordance,
+    & .crisp-recordpage-edit-affordance:focus-visible { opacity: 1; }
+    & .crisp-recordpage-edit-affordance:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-recordpage-empty { color: ${tokens_1.contract.fgMuted}; }
 
     /* #431: measured live on app.attio.com's record page Details column --
@@ -264,6 +277,31 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
+
+    /* #620: the "Run workflow" quick action's own popover -- measured live:
+       a centered, top-anchored overlay sharing product/command's own
+       Cmd-K-palette shell exactly (elevation.modal, bgOverlayFrost 60% +
+       blur(15px), radius 2xl/xl outer/inner) -- duplicated here rather than
+       imported, the same "own copy per product surface" choice already
+       made elsewhere in this codebase (product/command sits outside this
+       lane's own product/recordpage ownership). */
+    & .crisp-recordpage-workflow-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-recordpage-workflow-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["4"]}; }
+    & .crisp-recordpage-workflow-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 808px; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: color-mix(in srgb, ${tokens_1.contract.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${tokens_1.elevation.modal}; opacity: 1; transform: scale(1); transition: opacity .2s ease, transform .2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-recordpage-workflow-card { display: flex; flex-direction: column; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; overflow: hidden; }
+    & .crisp-recordpage-workflow-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["4"]}; }
+    & .crisp-recordpage-workflow-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.07px; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-workflow-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-recordpage-workflow-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-workflow-search { display: flex; align-items: center; min-height: 52px; padding: ${tokens_1.contract.space["4"]}; }
+    & .crisp-recordpage-workflow-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-workflow-input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-workflow-sep { height: 1px; flex-shrink: 0; background: ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordpage-workflow-empty { display: flex; flex-direction: column; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["3"]}; text-align: center; }
+    & .crisp-recordpage-workflow-create { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; padding: 0 ${tokens_1.contract.space["3"]}; margin-top: ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpage-workflow-create:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordpage-workflow-footer { display: flex; align-items: center; height: 44px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["2.5"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordpage-workflow-footer-nav { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recordpickerRecipe = exports.RecordPicker = void 0;
+var recordpicker_1 = require("./recordpicker");
+Object.defineProperty(exports, "RecordPicker", { enumerable: true, get: function () { return recordpicker_1.RecordPicker; } });
+var recordpicker_recipe_1 = require("./recordpicker.recipe");
+Object.defineProperty(exports, "recordpickerRecipe", { enumerable: true, get: function () { return recordpicker_recipe_1.recordpickerRecipe; } });

package/dist/cjs/product/recordpicker/recordpicker.js

@@ -0,0 +1,100 @@
+"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.RecordPicker = RecordPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const select_1 = require("../../components/select");
+const spinner_1 = require("../../components/spinner");
+const core_1 = require("../../core");
+const recordpicker_recipe_1 = require("./recordpicker.recipe");
+/**
+ * The record-search picker behind a task's "Add record" chip -- measured
+ * live on app.attio.com's Tasks page ("Edit task" -> "Add record"): a
+ * "Search..." row, then a FLAT list mixed across every object type (a
+ * person result sat first, ahead of several companies, with no section
+ * headers -- unlike the mention picker's own grouped Users/Records shape,
+ * crisp#646). Attio's own live search took a moment to resolve, showing a
+ * centred spinner + "Loading..." row meanwhile; not independently
+ * re-measured against a second empty-results case, so `emptyLabel`'s
+ * default copy ("No records") is inferred by symmetry with
+ * `AssigneePicker`'s own measured "No users", not itself pixel-measured.
+ */
+function RecordPicker({ records, loading = false, onSelect, query: queryProp, onQueryChange, searchLabel: searchLabelProp, loadingLabel: loadingLabelProp, emptyLabel: emptyLabelProp, className, ...rest }) {
+    const searchLabel = (0, core_1.useCrispMessage)(searchLabelProp, "Search...");
+    const loadingLabel = (0, core_1.useCrispMessage)(loadingLabelProp, "Loading...");
+    // 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 records"] ?? "No records";
+    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 select = (r) => {
+        onSelect?.(r);
+    };
+    const { onKeyDown } = (0, select_1.useListboxKeyboard)({
+        enabledIndexes: records.map((_, i) => i),
+        highlight,
+        setHighlight,
+        commit: () => {
+            const r = records[highlight];
+            if (r)
+                select(r);
+        },
+        close: () => { },
+        dismiss: () => { },
+    });
+    const activeId = !loading && highlight >= 0 && highlight < records.length
+        ? optionId(highlight)
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpicker_recipe_1.recordpickerRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpicker-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-recordpicker-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 })] }), loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpicker-loading", children: [(0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 16 }), loadingLabel] })) : records.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpicker-empty", children: emptyLabel })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpicker-list", role: "listbox", id: listboxId, children: records.map((r, 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-recordpicker-option", onMouseEnter: () => setHighlight(i), onClick: () => select(r), children: [r.icon, r.name] }, r.id))) }))] }));
+}
+RecordPicker.displayName = "RecordPicker";

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recordpickerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The record picker behind a task's "Add record" chip -- measured live on
+// app.attio.com's Tasks page ("Edit task" -> "Add record" -> its own
+// sub-popover, same measured 350px width as `AssigneePicker`'s): a
+// borderless "Search..." row, then a flat list mixed across every object
+// type (not grouped into sections -- that's the *mention* picker's own
+// shape, crisp#646, a different, still-ungrouped-by-default surface here),
+// each row a consumer-supplied type icon + the record's name. A "Loading..."
+// row appears while results are in flight (the same measured centred
+// Spinner + text DataTable's own #826 loading state already uses).
+const config = (0, core_1.defineRecipe)({
+    name: "recordpicker",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: ${tokens_1.contract.font.sans};
+
+    & .crisp-recordpicker-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-recordpicker-search svg { flex-shrink: 0; }
+    & .crisp-recordpicker-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-recordpicker-search-input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+
+    & .crisp-recordpicker-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }
+    & .crisp-recordpicker-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-recordpicker-list { display: flex; flex-direction: column; margin: 0; padding: ${tokens_1.contract.space["1"]}; list-style: none; max-height: 280px; overflow-y: auto; }
+    & .crisp-recordpicker-option { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; 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; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: start; cursor: pointer; }
+    & .crisp-recordpicker-option svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpicker-option:hover, & .crisp-recordpicker-option[data-highlighted] { background: ${tokens_1.contract.bgRaised}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.recordpickerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.savedviewsRecipe = exports.SavedViews = void 0;
+exports.savedviewsRecipe = exports.SavedViewsSaveBar = exports.SavedViews = void 0;
 var savedviews_1 = require("./savedviews");
 Object.defineProperty(exports, "SavedViews", { enumerable: true, get: function () { return savedviews_1.SavedViews; } });
+Object.defineProperty(exports, "SavedViewsSaveBar", { enumerable: true, get: function () { return savedviews_1.SavedViewsSaveBar; } });
 var savedviews_recipe_1 = require("./savedviews.recipe");
 Object.defineProperty(exports, "savedviewsRecipe", { enumerable: true, get: function () { return savedviews_recipe_1.savedviewsRecipe; } });

package/dist/cjs/product/savedviews/savedviews.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SavedViews = SavedViews;
+exports.SavedViewsSaveBar = SavedViewsSaveBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
@@ -236,3 +237,24 @@ function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename
                             }, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-label", children: createLabel })] })] }) }))] }));
 }
 SavedViews.displayName = "SavedViews";
+/**
+ * The "unsaved changes" bar for a currently loaded saved view — Attio's own
+ * "Discard changes" + a split "Save for everyone ▾" button, measured live
+ * (app.attio.com, a saved Companies view with its sort changed). Not a part
+ * of `SavedViews`' own trigger/panel: Attio renders this in the page
+ * toolbar's own trailing slot, replacing whatever sits there at rest
+ * (Import/Export, "+ New …") — the same slot `TableToolbar`'s own
+ * `children` prop already documents ("Right-aligned actions after the
+ * count"). A consumer swaps this in for that slot's usual content once its
+ * own dirty check (live filters/sort/columns vs. the loaded view's
+ * snapshot) is true, and swaps it back out once it's false — this
+ * component itself carries no dirty state or visibility toggle.
+ */
+function SavedViewsSaveBar({ onSave, onDiscard, onSaveAsNew, discardLabel: discardLabelProp, saveLabel: saveLabelProp, saveAsNewLabel: saveAsNewLabelProp, saveOptionsLabel: saveOptionsLabelProp, className, ...rest }) {
+    const discardLabel = (0, core_1.useCrispMessage)(discardLabelProp, "Discard changes");
+    const saveLabel = (0, core_1.useCrispMessage)(saveLabelProp, "Save for everyone");
+    const saveAsNewLabel = (0, core_1.useCrispMessage)(saveAsNewLabelProp, "Save as new view");
+    const saveOptionsLabel = (0, core_1.useCrispMessage)(saveOptionsLabelProp, "More save options");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_1.cx)("crisp-savedviews-savebar", className), ...rest, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-savedviews-savebar-discard", onClick: onDiscard, children: discardLabel }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-savedviews-savebar-save-group", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-savedviews-savebar-save", onClick: onSave, children: saveLabel }), onSaveAsNew && ((0, jsx_runtime_1.jsx)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-savedviews-savebar-save-chevron", "aria-label": saveOptionsLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) }), children: (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: onSaveAsNew, children: saveAsNewLabel }) }))] })] }));
+}
+SavedViewsSaveBar.displayName = "SavedViewsSaveBar";

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

@@ -123,6 +123,53 @@ const config = (0, core_1.defineRecipe)({
       font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium};
       color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent);
     }
+
+    /* crisp#568: the "Discard changes" / "Save for everyone ▾" bar a
+       consumer swaps into its own toolbar's trailing slot (TableToolbar's
+       own children prop already documents "right-aligned actions after the
+       count") while the loaded view is dirty -- measured live on
+       app.attio.com replacing that exact slot's usual Import/Export + New
+       button. Not rendered inside SavedViews' own trigger/panel, which
+       stays untouched; this is its own export, SavedViewsSaveBar. */
+    .crisp-savedviews-savebar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    /* Rest-state color is a 55% color-mix of fgPrimary -- measured
+       identical to recordpanel's own ".crisp-recordpanel-section-action"
+       (its own comment: "measured 10px/400, a lighter mix..." -- font size
+       there was the SAME outer-vs-inner-div miss #688 corrected; the 55%
+       mix itself checks out independently here). Hover repeats crisp's own
+       already-measured Button ghost intent exactly (bgRaised + fgPrimary),
+       confirmed live (hover bg rgba(0,0,0,.04) + ink text matches bgRaised
+       + fgPrimary bit for bit) -- reused, not re-derived. */
+    .crisp-savedviews-savebar-discard {
+      box-sizing: border-box; display: inline-flex; align-items: center; height: 28px;
+      margin: 0; padding-inline: ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md};
+      background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium};
+      color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer;
+      transition: background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-savebar-discard:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    /* the split "Save for everyone ▾" pill -- two adjacent buttons sharing
+       one visual pill (measured: label half rounds only its outer/left
+       corners, the chevron half only its outer/right corners, seamless
+       between). Fill is crisp's OWN measured bgBrandContrast, not Attio's
+       own literal button blue -- the owner's directive is Attio structure/
+       sizing, seed-identity color (crisp direction doc). Hover/active reuse
+       Button's own already-measured primary-intent brightness filter
+       (crisp#910) rather than Attio's own literal darker fill, for the
+       same reason. */
+    .crisp-savedviews-savebar-save-group { display: flex; }
+    .crisp-savedviews-savebar-save, .crisp-savedviews-savebar-save-chevron {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      height: 28px; margin: 0; border: none; background: ${tokens_1.contract.bgBrandContrast}; color: ${tokens_1.contract.fgOnBrand};
+      cursor: pointer; transition: filter .2s;
+    }
+    .crisp-savedviews-savebar-save:hover, .crisp-savedviews-savebar-save-chevron:hover { filter: brightness(0.96); }
+    .crisp-savedviews-savebar-save:active, .crisp-savedviews-savebar-save-chevron:active { filter: brightness(0.92); }
+    .crisp-savedviews-savebar-save {
+      padding-inline: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1.5"]}; border-radius: ${tokens_1.contract.radius.md} 0 0 ${tokens_1.contract.radius.md};
+      font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium};
+    }
+    .crisp-savedviews-savebar-save-chevron { width: 28px; padding: 0; border-radius: 0 ${tokens_1.contract.radius.md} ${tokens_1.contract.radius.md} 0; }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shareRecipe = exports.SharePopover = void 0;
+var share_1 = require("./share");
+Object.defineProperty(exports, "SharePopover", { enumerable: true, get: function () { return share_1.SharePopover; } });
+var share_recipe_1 = require("./share.recipe");
+Object.defineProperty(exports, "shareRecipe", { enumerable: true, get: function () { return share_recipe_1.shareRecipe; } });