@crisp-ui-kit/crisp 0.57.3 → 0.57.4

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

@@ -0,0 +1,27 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+/**
+ * `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 = defineRecipe({
+    name: "objectpagemenu",
+    base: "",
+    globalCss: `
+    [dir="rtl"] .crisp-menu-item svg[data-rtl-flip] { transform: scaleX(-1); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const objectpagemenuRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/objectsettings/objectsettings.js

@@ -161,7 +161,7 @@ ObjectAppearanceSection.displayName = "ObjectAppearanceSection";
  * measures 40px here — a real, small divergence left to DataTable's owner
  * rather than patched locally (see the PR).
  */
-export function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchiveAttribute, onReorder, onCreateAttribute, title: titleProp, subtitle: subtitleProp, createLabel: createLabelProp, searchPlaceholder: searchPlaceholderProp, filterLabel: filterLabelProp, nameColumnLabel: nameColumnLabelProp, dataTypeColumnLabel: dataTypeColumnLabelProp, constraintsColumnLabel: constraintsColumnLabelProp, propertiesColumnLabel: propertiesColumnLabelProp, systemLabel: systemLabelProp, enrichedLabel: enrichedLabelProp, editLabel: editLabelProp, archiveLabel: archiveLabelProp, rowActions, emptyLabel, }) {
+export function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onDuplicateAttribute, onCopyId, onCopySlug, onChangeSlug, onArchiveAttribute, onReorder, onCreateAttribute, title: titleProp, subtitle: subtitleProp, createLabel: createLabelProp, searchPlaceholder: searchPlaceholderProp, filterLabel: filterLabelProp, nameColumnLabel: nameColumnLabelProp, dataTypeColumnLabel: dataTypeColumnLabelProp, constraintsColumnLabel: constraintsColumnLabelProp, propertiesColumnLabel: propertiesColumnLabelProp, systemLabel: systemLabelProp, enrichedLabel: enrichedLabelProp, editLabel: editLabelProp, duplicateLabel: duplicateLabelProp, copyIdLabel: copyIdLabelProp, copySlugLabel: copySlugLabelProp, changeSlugLabel: changeSlugLabelProp, archiveLabel: archiveLabelProp, rowActions, emptyLabel, }) {
     const title = useCrispMessage(titleProp, "Attributes");
     const subtitle = useCrispMessage(subtitleProp, "Modify and add object attributes");
     const createLabel = useCrispMessage(createLabelProp, "Create attribute");
@@ -173,8 +173,37 @@ export function AttributesTable({ attributes, onOpenAttribute, onEditAttribute,
     const propertiesColumnLabel = useCrispMessage(propertiesColumnLabelProp, "Properties");
     const systemLabel = useCrispMessage(systemLabelProp, "System");
     const enrichedLabel = useCrispMessage(enrichedLabelProp, "Enriched");
-    const editLabel = useCrispMessage(editLabelProp, "Edit");
-    const archiveLabel = useCrispMessage(archiveLabelProp, "Archive");
+    // crisp#673, G-107 (verbatim): "Edit attribute, Duplicate attribute, Copy
+    // ID, Copy slug, Change slug, Archive attribute" — corrects this
+    // component's former "Edit"/"Archive" defaults, which were a paraphrase
+    // from an earlier, less precise measurement.
+    const editLabel = useCrispMessage(editLabelProp, "Edit attribute");
+    const duplicateLabel = useCrispMessage(duplicateLabelProp, "Duplicate attribute");
+    const copyIdLabel = useCrispMessage(copyIdLabelProp, "Copy ID");
+    const copySlugLabel = useCrispMessage(copySlugLabelProp, "Copy slug");
+    const changeSlugLabel = useCrispMessage(changeSlugLabelProp, "Change slug");
+    const archiveLabel = useCrispMessage(archiveLabelProp, "Archive attribute");
+    // Default-with-override (same shape as `CommentsPanel`'s `onCopyLink`):
+    // a consumer that only wants to know a copy happened (a toast, analytics)
+    // gets it for free; one that needs the real copy still owns it.
+    // `useCallback`, not a plain closure: the `columns` memo below references
+    // these, not `onCopyId`/`onCopySlug` directly, so their own identity has
+    // to track those props for the memo to stay correct without re-listing
+    // props it never mentions by name.
+    const copyId = React.useCallback((id) => {
+        if (onCopyId) {
+            onCopyId(id);
+            return;
+        }
+        navigator.clipboard?.writeText(id).catch(() => { });
+    }, [onCopyId]);
+    const copySlug = React.useCallback((slug) => {
+        if (onCopySlug) {
+            onCopySlug(slug);
+            return;
+        }
+        navigator.clipboard?.writeText(slug).catch(() => { });
+    }, [onCopySlug]);
     const [query, setQuery] = React.useState("");
     const filtered = React.useMemo(() => {
         if (!query.trim())
@@ -215,7 +244,7 @@ export function AttributesTable({ attributes, onOpenAttribute, onEditAttribute,
                         cursor: "pointer",
                         color: "inherit",
                         padding: 4,
-                    }, children: _jsx(MoreHorizontal, { size: 16 }) }), children: rowActions ? (rowActions(row)) : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => onEditAttribute?.(row.id), children: editLabel }), _jsx(MenuItem, { danger: true, onSelect: () => onArchiveAttribute?.(row.id), children: archiveLabel })] })) })),
+                    }, children: _jsx(MoreHorizontal, { size: 16 }) }), children: rowActions ? (rowActions(row)) : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => onEditAttribute?.(row.id), children: editLabel }), _jsx(MenuItem, { onSelect: () => onDuplicateAttribute?.(row.id), children: duplicateLabel }), _jsx(MenuItem, { onSelect: () => copyId(row.id), children: copyIdLabel }), _jsx(MenuItem, { disabled: !row.slug, onSelect: () => row.slug && copySlug(row.slug), children: copySlugLabel }), _jsx(MenuItem, { onSelect: () => onChangeSlug?.(row.id), children: changeSlugLabel }), _jsx(MenuItem, { danger: true, onSelect: () => onArchiveAttribute?.(row.id), children: archiveLabel })] })) })),
         },
     ], [
         nameColumnLabel,
@@ -225,8 +254,16 @@ export function AttributesTable({ attributes, onOpenAttribute, onEditAttribute,
         systemLabel,
         enrichedLabel,
         editLabel,
+        duplicateLabel,
+        copyIdLabel,
+        copySlugLabel,
+        changeSlugLabel,
         archiveLabel,
         onEditAttribute,
+        onDuplicateAttribute,
+        copyId,
+        copySlug,
+        onChangeSlug,
         onArchiveAttribute,
         rowActions,
     ]);
@@ -287,26 +324,82 @@ export function AttributeTypeSelect({ value, onValueChange, options = ATTRIBUTE_
     return (_jsx(Select, { id: id, options: selectOptions, value: value, onValueChange: onValueChange, searchable: true, searchPlaceholder: searchPlaceholder, width: "full" }));
 }
 AttributeTypeSelect.displayName = "AttributeTypeSelect";
+/* ── Currency's own extra required fields (crisp#673, G-104) ──────────
+ * Attio's Create-attribute dialog isn't a fixed layout: choosing "Currency"
+ * inserts four required selects between Description and the AI-autofill
+ * row (Text/Number/Checkbox/Date/Phone Number/Location/User add none).
+ * Display, Decimal Places and Grouping are Attio's own small fixed UI
+ * vocabulary (verified live, `app.attio.com` Companies object) and ship as
+ * defaults below; Currency is real reference data (ISO 4217, ~150+
+ * entries) that crisp doesn't own, so it has no default of its own — a
+ * consumer supplies its own list, the same "GRC need: later" boundary
+ * `aiAutofillTypeOptions` already draws. Each option's own live-formatted
+ * preview (e.g. "Code — USD 1,200.50") is deliberately not modelled: it
+ * needs real number-formatting logic, a separate, bigger piece of work. */
+export const CURRENCY_DISPLAY_OPTIONS = [
+    { value: "code", label: "Code" },
+    { value: "name", label: "Name" },
+    { value: "narrow-symbol", label: "Narrow symbol" },
+    { value: "symbol", label: "Symbol" },
+];
+export const CURRENCY_DECIMAL_PLACES_OPTIONS = [
+    { value: "2", label: "2 decimals" },
+    { value: "0", label: "No decimals" },
+];
+export const CURRENCY_GROUPING_OPTIONS = [
+    { value: "default", label: "Default" },
+    { value: "none", label: "No groups" },
+];
 /**
- * "Create attribute" (crisp#637, P-125, verified live): Attribute Type
- * select (defaults to Text) + Name (autofocused) + Description (optional)
- * + an AI-autofill switch row, footer Cancel/Create. Built on `FormDialog`
- * in its plain (non-`createMode`) shape — Attio's own footer here has a
- * real Cancel button, unlike the record-create dialog `createMode` models
- * (crisp#548), so `createMode` would be the wrong fit even though the
- * button carries the same ⌘↵ hint; that hint is rendered locally instead.
+ * "Create attribute" (crisp#637/#673, P-125, verified live): Attribute Type
+ * select (defaults to Text, type-ahead search built in via `Select`'s own
+ * `searchable`) + Name (autofocused on open, and again after picking a type
+ * — G-106) + Description (optional) + Currency's own four extra required
+ * fields when `type === "currency"` (G-104) + an AI-autofill switch row,
+ * footer Cancel/Create. Built on `FormDialog` in its plain (non-`createMode`)
+ * shape — Attio's own footer here has a real Cancel button, unlike the
+ * record-create dialog `createMode` models (crisp#548), so `createMode`
+ * would be the wrong fit even though the button carries the same ⌘↵ hint;
+ * that hint is rendered locally instead. The outside-click/Escape
+ * "Discard changes" confirm gated on dirty state (G-105) needed no work
+ * here at all — `FormDialog` already tracks dirtiness generically and shows
+ * it, so this dialog inherited it for free; `CreateAttributeDialog`'s own
+ * tests below just pin the behaviour to this component specifically.
  */
-export function CreateAttributeDialog({ type, onTypeChange, typeOptions, aiAutofillTypeOptions, name, onNameChange, description, onDescriptionChange, aiAutofillEnabled = false, onAiAutofillChange, onSubmit, onClose, busy, error, title: titleProp, attributeTypeLabel: attributeTypeLabelProp, nameLabel: nameLabelProp, descriptionLabel: descriptionLabelProp, descriptionPlaceholder: descriptionPlaceholderProp, aiAutofillLabel: aiAutofillLabelProp, setUpAiAutofillLabel: setUpAiAutofillLabelProp, createLabel: createLabelProp, }) {
+export function CreateAttributeDialog({ type, onTypeChange, typeOptions, aiAutofillTypeOptions, name, onNameChange, description, onDescriptionChange, currency, onCurrencyChange, currencyOptions, display, onDisplayChange, displayOptions = CURRENCY_DISPLAY_OPTIONS, decimalPlaces, onDecimalPlacesChange, decimalPlacesOptions = CURRENCY_DECIMAL_PLACES_OPTIONS, grouping, onGroupingChange, groupingOptions = CURRENCY_GROUPING_OPTIONS, currencyFieldLabel: currencyFieldLabelProp, displayFieldLabel: displayFieldLabelProp, decimalPlacesFieldLabel: decimalPlacesFieldLabelProp, groupingFieldLabel: groupingFieldLabelProp, aiAutofillEnabled = false, onAiAutofillChange, onSubmit, onClose, busy, error, title: titleProp, attributeTypeLabel: attributeTypeLabelProp, nameLabel: nameLabelProp, descriptionLabel: descriptionLabelProp, descriptionPlaceholder: descriptionPlaceholderProp, aiAutofillLabel: aiAutofillLabelProp, setUpAiAutofillLabel: setUpAiAutofillLabelProp, createLabel: createLabelProp, }) {
     const title = useCrispMessage(titleProp, "Create attribute");
     const attributeTypeLabel = useCrispMessage(attributeTypeLabelProp, "Attribute Type");
     const nameLabel = useCrispMessage(nameLabelProp, "Name");
     const descriptionLabel = useCrispMessage(descriptionLabelProp, "Description");
     const descriptionPlaceholder = useCrispMessage(descriptionPlaceholderProp, "Add a description for this attribute");
+    // Attio's own copy for these four is the label plus a literal "(required)"
+    // suffix (not `FormField`'s asterisk convention) — the same "(optional)"-
+    // as-label-text shape `descriptionLabel` above already uses, so these are
+    // plain overridable strings rather than a new `FormField` capability.
+    const currencyFieldLabel = useCrispMessage(currencyFieldLabelProp, "Currency (required)");
+    const displayFieldLabel = useCrispMessage(displayFieldLabelProp, "Display (required)");
+    const decimalPlacesFieldLabel = useCrispMessage(decimalPlacesFieldLabelProp, "Decimal Places (required)");
+    const groupingFieldLabel = useCrispMessage(groupingFieldLabelProp, "Grouping (required)");
     const aiAutofillLabel = useCrispMessage(aiAutofillLabelProp, "AI autofill");
     const setUpAiAutofillLabel = useCrispMessage(setUpAiAutofillLabelProp, "Set up AI autofill");
     const createLabel = useCrispMessage(createLabelProp, "Create attribute");
     const switchId = React.useId();
     const nameId = React.useId();
-    return (_jsxs(FormDialog, { title: title, submitLabel: _jsxs(_Fragment, { children: [createLabel, _jsxs("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: objectsettingsRecipe(), children: [_jsx(FormField, { label: attributeTypeLabel, children: _jsx(AttributeTypeSelect, { value: type, onValueChange: onTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), _jsx(FormField, { label: nameLabel, htmlFor: nameId, children: _jsx(Input, { id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), _jsx(FormField, { label: descriptionLabel, optional: true, children: _jsx(Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), _jsxs("div", { className: "crisp-objectsettings-aiautofill", children: [_jsx("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), _jsxs("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [_jsx(Sparkles, { size: 14 }), _jsx("span", { children: setUpAiAutofillLabel }), _jsx(Switch, { id: switchId, checked: aiAutofillEnabled, onCheckedChange: onAiAutofillChange })] })] })] }));
+    // G-106: selecting a type via the keyboard (filter to one match, Enter)
+    // auto-focuses Name right after — measured live. `Select`'s own
+    // `onValueChange` fires identically for a keyboard Enter and a mouse
+    // click (both go through its one `pick()`), so this can't distinguish
+    // input modality; only the keyboard path was independently re-measured,
+    // but there is no second code path to special-case even if there were
+    // one. The `requestAnimationFrame` wins the same race `Select`'s own
+    // `searchable` variant and `SavedViews`'s search box already schedule
+    // focus against (Select returns focus to its trigger synchronously on
+    // pick; this runs after that paint and wins).
+    const nameRef = React.useRef(null);
+    const handleTypeChange = (value) => {
+        onTypeChange(value);
+        requestAnimationFrame(() => nameRef.current?.focus({ preventScroll: true }));
+    };
+    return (_jsxs(FormDialog, { title: title, submitLabel: _jsxs(_Fragment, { children: [createLabel, _jsxs("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: objectsettingsRecipe(), children: [_jsx(FormField, { label: attributeTypeLabel, children: _jsx(AttributeTypeSelect, { value: type, onValueChange: handleTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), _jsx(FormField, { label: nameLabel, htmlFor: nameId, children: _jsx(Input, { ref: nameRef, id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), _jsx(FormField, { label: descriptionLabel, optional: true, children: _jsx(Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), type === "currency" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "crisp-objectsettings-fieldrow", children: [_jsx(FormField, { label: currencyFieldLabel, children: _jsx(Select, { options: currencyOptions ?? [], value: currency ?? "", onValueChange: onCurrencyChange, searchable: true }) }), _jsx(FormField, { label: displayFieldLabel, children: _jsx(Select, { options: displayOptions, value: display ?? displayOptions[0]?.value, onValueChange: onDisplayChange }) })] }), _jsxs("div", { className: "crisp-objectsettings-fieldrow", children: [_jsx(FormField, { label: decimalPlacesFieldLabel, children: _jsx(Select, { options: decimalPlacesOptions, value: decimalPlaces ?? decimalPlacesOptions[0]?.value, onValueChange: onDecimalPlacesChange }) }), _jsx(FormField, { label: groupingFieldLabel, children: _jsx(Select, { options: groupingOptions, value: grouping ?? groupingOptions[0]?.value, onValueChange: onGroupingChange }) })] })] })), _jsxs("div", { className: "crisp-objectsettings-aiautofill", children: [_jsx("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), _jsxs("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [_jsx(Sparkles, { size: 14 }), _jsx("span", { children: setUpAiAutofillLabel }), _jsx(Switch, { id: switchId, checked: aiAutofillEnabled, onCheckedChange: onAiAutofillChange })] })] })] }));
 }
 CreateAttributeDialog.displayName = "CreateAttributeDialog";

package/dist/esm/product/recordpage/recordpage.js

@@ -5,6 +5,7 @@ import { Avatar } from "../../components/avatar/index.js";
 import { Button } from "../../components/button/index.js";
 import { Checkbox } from "../../components/checkbox/index.js";
 import { Drawer } from "../../components/drawer/index.js";
+import { Kbd } from "../../components/kbd/index.js";
 import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
 import { Select } from "../../components/select/index.js";
 import { Spinner } from "../../components/spinner/index.js";
@@ -79,6 +80,12 @@ export const 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",
@@ -476,7 +483,7 @@ export function RecordDetails({ record, columns, sections, onEdit, labels, class
                                                                 commit(record.id, col.key, e.currentTarget.value);
                                                             } }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-recordpage-edit-pending" })), fieldError && (_jsx("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
                                     }
-                                    return (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit ? (_jsx("button", { type: "button", className: "crisp-recordpage-edit-trigger", onClick: () => openEditing(col.key), children: _jsx(FieldValue, { col: col, row: record, labels: t }) })) : (_jsx(FieldValue, { col: col, row: record, labels: t })), fieldError && (_jsx("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                    return (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit && col.type === "url" ? (_jsxs(_Fragment, { children: [_jsx(FieldValue, { col: col, row: record, labels: t }), _jsx("button", { type: "button", className: "crisp-recordpage-edit-affordance", "aria-label": `Edit ${col.label}`, onClick: () => openEditing(col.key), children: _jsx(Pencil, { size: 16, strokeWidth: 1.75 }) })] })) : canEdit ? (_jsx("button", { type: "button", className: "crisp-recordpage-edit-trigger", onClick: () => openEditing(col.key), children: _jsx(FieldValue, { col: col, row: record, labels: t }) })) : (_jsx(FieldValue, { col: col, row: record, labels: t })), fieldError && (_jsx("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
                                 })] }, g.title != null ? String(g.title) : `section-${i}`))), canRevealFields && (_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.
@@ -516,6 +523,46 @@ export function RecordPageMain({ className, children, ...rest }) {
     return (_jsx("main", { className: 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 (_jsxs(_Fragment, { children: [_jsx("div", { className: "crisp-recordpage-workflow-backdrop" }), _jsx("div", { className: "crisp-recordpage-workflow-positioner", onClick: (e) => {
+                    if (e.target === e.currentTarget)
+                        onClose();
+                }, children: _jsx("div", { className: "crisp-recordpage-workflow-content", children: _jsxs("div", { className: "crisp-recordpage-workflow-card", role: "dialog", "aria-modal": "true", "aria-label": labels.selectWorkflowTitle, children: [_jsxs("div", { className: "crisp-recordpage-workflow-header", children: [_jsx("span", { className: "crisp-recordpage-workflow-title", children: labels.selectWorkflowTitle }), _jsx("button", { type: "button", className: "crisp-recordpage-workflow-close", "aria-label": labels.closeWorkflowPopover, onClick: onClose, children: _jsx(X, { size: 14, strokeWidth: 1.75 }) })] }), _jsx("div", { className: "crisp-recordpage-workflow-search", children: _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" }) }), _jsx("div", { className: "crisp-recordpage-workflow-sep" }), _jsxs("div", { className: "crisp-recordpage-workflow-empty", children: [_jsx("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: _jsx(Workflow, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-recordpage-illustrated-desc", children: labels.noWorkflows }), _jsxs("button", { type: "button", className: "crisp-recordpage-workflow-create", children: [_jsx(Plus, { size: 14, strokeWidth: 1.75 }), labels.createNewWorkflow] })] }), _jsx("div", { className: "crisp-recordpage-workflow-footer", children: _jsxs("span", { className: "crisp-recordpage-workflow-footer-nav", children: [_jsx(Kbd, { children: "\u2191" }), _jsx(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
@@ -524,9 +571,15 @@ RecordPageMain.displayName = "RecordPageMain";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export 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 }) {
+export 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
@@ -643,7 +696,13 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     // choice `tabs` (#379) and `highlights` (#528) already make.
     const defaultQuickActions = [
         { label: t.logANote, icon: FileText },
-        { label: t.runWorkflow, icon: Workflow },
+        // #620: only the built-in default wires this to crisp's own popover --
+        // see `workflowPopoverOpen`'s own comment above.
+        {
+            label: t.runWorkflow,
+            icon: Workflow,
+            onSelect: () => setWorkflowPopoverOpen(true),
+        },
         { label: t.createATask, icon: SquareCheck },
     ];
     const quickActions = quickActionsProp ?? defaultQuickActions;
@@ -786,7 +845,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", "data-peek": onClose ? "" : undefined, children: [onClose ? (_jsxs("div", { className: "crisp-recordpage-peekbar", children: [_jsx("button", { type: "button", className: "crisp-recordpage-peek-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && (_jsxs("span", { className: "crisp-recordpage-peek-pager", children: [_jsx("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: _jsx(ChevronUp, { size: 16, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), counterLabel != null && (_jsx("span", { className: "crisp-recordpage-peek-counter", children: counterLabel }))] })) : (_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] })), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: _jsx(MessageSquare, { size: 15, strokeWidth: 1.75 }) }), _jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), _jsx(MenuItem, { icon: _jsx(Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), _jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), _jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _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: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => (_jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: _jsx(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), _jsx(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), _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 (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", "data-peek": onClose ? "" : undefined, children: [onClose ? (_jsxs("div", { className: "crisp-recordpage-peekbar", children: [_jsx("button", { type: "button", className: "crisp-recordpage-peek-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && (_jsxs("span", { className: "crisp-recordpage-peek-pager", children: [_jsx("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: _jsx(ChevronUp, { size: 16, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), counterLabel != null && (_jsx("span", { className: "crisp-recordpage-peek-counter", children: counterLabel }))] })) : (showBreadcrumb && (_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }))), _jsxs("div", { className: "crisp-recordpage-actions", children: [showShare && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share })), showComments && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: _jsx(MessageSquare, { size: 15, strokeWidth: 1.75 }) })), showAskAttio && (_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] })), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), _jsx(MenuItem, { icon: _jsx(Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), _jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), _jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), actions && actions.length > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuSeparator, {}), actions.map((a) => (_jsx(MenuItem, { icon: _jsx(a.icon, { size: 15, strokeWidth: 1.75 }), onSelect: a.onSelect, danger: a.danger, children: a.label }, a.label)))] })), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), onSelect: onDelete, danger: true, children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: avatarShape, tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, onClick: onEditRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _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: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => (_jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: _jsx(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), _jsx(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), _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.
@@ -798,6 +857,6 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                             setDetailsW((w) => grow
                                 ? Math.min(DETAILS_MAX_W, w + 16)
                                 : Math.max(DETAILS_MIN_W, w - 16));
-                        } }), _jsx(RecordPageMain, { children: _jsx(Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), _jsx(Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: _jsx(CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
+                        } }), _jsx(RecordPageMain, { children: _jsx(Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), _jsx(Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: _jsx(CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) }), _jsx(WorkflowPopover, { open: workflowPopoverOpen, onClose: () => setWorkflowPopoverOpen(false), labels: t })] }));
 }
 RecordPage.displayName = "RecordPage";

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

@@ -124,6 +124,19 @@ const config = 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: ${c.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: ${c.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${c.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, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
     & .crisp-recordpage-empty { color: ${c.fgMuted}; }
 
     /* #431: measured live on app.attio.com's record page Details column --
@@ -261,6 +274,31 @@ const config = defineRecipe({
     & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+
+    /* #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 ${c.space["4"]} ${c.space["4"]}; }
+    & .crisp-recordpage-workflow-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 808px; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.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: ${c.radius.xl}; background: ${c.bgSurface}; overflow: hidden; }
+    & .crisp-recordpage-workflow-header { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; }
+    & .crisp-recordpage-workflow-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.07px; color: ${c.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: ${c.radius.md}; background: none; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-recordpage-workflow-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-recordpage-workflow-search { display: flex; align-items: center; min-height: 52px; padding: ${c.space["4"]}; }
+    & .crisp-recordpage-workflow-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: ${c.text.xl}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-recordpage-workflow-input::placeholder { color: ${c.fgMuted}; }
+    & .crisp-recordpage-workflow-sep { height: 1px; flex-shrink: 0; background: ${c.borderSubtle}; }
+    & .crisp-recordpage-workflow-empty { display: flex; flex-direction: column; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["6"]} ${c.space["3"]}; text-align: center; }
+    & .crisp-recordpage-workflow-create { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 0 ${c.space["3"]}; margin-top: ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpage-workflow-create:hover { background: ${c.bgRaised}; }
+    & .crisp-recordpage-workflow-footer { display: flex; align-items: center; height: 44px; flex-shrink: 0; padding: 0 ${c.space["2.5"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .crisp-recordpage-workflow-footer-nav { display: flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -0,0 +1,2 @@
+export { RecordPicker, } from "./recordpicker.js";
+export { recordpickerRecipe } from "./recordpicker.recipe.js";

package/dist/esm/product/recordpicker/recordpicker.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import * as React from "react";
+import { useListboxKeyboard } from "../../components/select/index.js";
+import { Spinner } from "../../components/spinner/index.js";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
+import { recordpickerRecipe } from "./recordpicker.recipe.js";
+/**
+ * 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.
+ */
+export function RecordPicker({ records, loading = false, onSelect, query: queryProp, onQueryChange, searchLabel: searchLabelProp, loadingLabel: loadingLabelProp, emptyLabel: emptyLabelProp, className, ...rest }) {
+    const searchLabel = useCrispMessage(searchLabelProp, "Search...");
+    const loadingLabel = 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 = 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 } = 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 (_jsxs("div", { className: recordpickerRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpicker-search", children: [_jsx(Search, { size: 16, strokeWidth: 1.75 }), _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 ? (_jsxs("div", { className: "crisp-recordpicker-loading", children: [_jsx(Spinner, { size: 16 }), loadingLabel] })) : records.length === 0 ? (_jsx("div", { className: "crisp-recordpicker-empty", children: emptyLabel })) : (_jsx("div", { className: "crisp-recordpicker-list", role: "listbox", id: listboxId, children: records.map((r, i) => (_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/esm/product/recordpicker/recordpicker.recipe.js

@@ -0,0 +1,33 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "recordpicker",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: ${c.font.sans};
+
+    & .crisp-recordpicker-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["3"]}; color: ${c.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: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; color: ${c.fgPrimary}; }
+    & .crisp-recordpicker-search-input::placeholder { color: ${c.fgMuted}; }
+
+    & .crisp-recordpicker-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: ${c.space["8"]} ${c.space["3"]}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
+    & .crisp-recordpicker-empty { padding: ${c.space["4"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+
+    & .crisp-recordpicker-list { display: flex; flex-direction: column; margin: 0; padding: ${c.space["1"]}; list-style: none; max-height: 280px; overflow-y: auto; }
+    & .crisp-recordpicker-option { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; box-sizing: border-box; height: 32px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; }
+    & .crisp-recordpicker-option svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-recordpicker-option:hover, & .crisp-recordpicker-option[data-highlighted] { background: ${c.bgRaised}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const recordpickerRecipe = resolveRecipe(config);
+export default config;

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

@@ -1,2 +1,2 @@
-export { SavedViews, } from "./savedviews.js";
+export { SavedViews, SavedViewsSaveBar, } from "./savedviews.js";
 export { savedviewsRecipe } from "./savedviews.recipe.js";

package/dist/esm/product/savedviews/savedviews.js

@@ -3,7 +3,7 @@ import { ChevronDown, MoreVertical, Plus, Users2 } from "lucide-react";
 import * as React from "react";
 import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
 import { useListboxKeyboard } from "../../components/select/index.js";
-import { FloatingPortal, hasNestedFloatingLayer, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
+import { cx, FloatingPortal, hasNestedFloatingLayer, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
 import { savedviewsRecipe } from "./savedviews.recipe.js";
 // #618: the same fallback Select's own `optionText` gives a non-string
 // `label` — `keywords` first, then the plain string itself, then (rather
@@ -200,3 +200,24 @@ export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, o
                             }, children: [_jsx("span", { className: "crisp-savedviews-row-icon", "aria-hidden": "true", children: _jsx(Plus, { size: 16, strokeWidth: 1.75 }) }), _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.
+ */
+export function SavedViewsSaveBar({ onSave, onDiscard, onSaveAsNew, discardLabel: discardLabelProp, saveLabel: saveLabelProp, saveAsNewLabel: saveAsNewLabelProp, saveOptionsLabel: saveOptionsLabelProp, className, ...rest }) {
+    const discardLabel = useCrispMessage(discardLabelProp, "Discard changes");
+    const saveLabel = useCrispMessage(saveLabelProp, "Save for everyone");
+    const saveAsNewLabel = useCrispMessage(saveAsNewLabelProp, "Save as new view");
+    const saveOptionsLabel = useCrispMessage(saveOptionsLabelProp, "More save options");
+    return (_jsxs("div", { className: cx("crisp-savedviews-savebar", className), ...rest, children: [_jsx("button", { type: "button", className: "crisp-savedviews-savebar-discard", onClick: onDiscard, children: discardLabel }), _jsxs("div", { className: "crisp-savedviews-savebar-save-group", children: [_jsx("button", { type: "button", className: "crisp-savedviews-savebar-save", onClick: onSave, children: saveLabel }), onSaveAsNew && (_jsx(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-savedviews-savebar-save-chevron", "aria-label": saveOptionsLabel, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }), children: _jsx(MenuItem, { onSelect: onSaveAsNew, children: saveAsNewLabel }) }))] })] }));
+}
+SavedViewsSaveBar.displayName = "SavedViewsSaveBar";