@crisp-ui-kit/crisp 0.57.2 → 0.57.4

package/dist/cjs/product/objectsettings/objectsettings.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = exports.ATTRIBUTE_TYPE_OPTIONS = void 0;
+exports.CURRENCY_GROUPING_OPTIONS = exports.CURRENCY_DECIMAL_PLACES_OPTIONS = exports.CURRENCY_DISPLAY_OPTIONS = exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = exports.ATTRIBUTE_TYPE_OPTIONS = void 0;
 exports.ObjectsList = ObjectsList;
 exports.ObjectDetailPage = ObjectDetailPage;
 exports.ObjectGeneralSection = ObjectGeneralSection;
@@ -204,7 +204,7 @@ ObjectAppearanceSection.displayName = "ObjectAppearanceSection";
  * measures 40px here — a real, small divergence left to DataTable's owner
  * rather than patched locally (see the PR).
  */
-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, }) {
+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 = (0, core_1.useCrispMessage)(titleProp, "Attributes");
     const subtitle = (0, core_1.useCrispMessage)(subtitleProp, "Modify and add object attributes");
     const createLabel = (0, core_1.useCrispMessage)(createLabelProp, "Create attribute");
@@ -216,8 +216,37 @@ function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchi
     const propertiesColumnLabel = (0, core_1.useCrispMessage)(propertiesColumnLabelProp, "Properties");
     const systemLabel = (0, core_1.useCrispMessage)(systemLabelProp, "System");
     const enrichedLabel = (0, core_1.useCrispMessage)(enrichedLabelProp, "Enriched");
-    const editLabel = (0, core_1.useCrispMessage)(editLabelProp, "Edit");
-    const archiveLabel = (0, core_1.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 = (0, core_1.useCrispMessage)(editLabelProp, "Edit attribute");
+    const duplicateLabel = (0, core_1.useCrispMessage)(duplicateLabelProp, "Duplicate attribute");
+    const copyIdLabel = (0, core_1.useCrispMessage)(copyIdLabelProp, "Copy ID");
+    const copySlugLabel = (0, core_1.useCrispMessage)(copySlugLabelProp, "Copy slug");
+    const changeSlugLabel = (0, core_1.useCrispMessage)(changeSlugLabelProp, "Change slug");
+    const archiveLabel = (0, core_1.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())
@@ -258,7 +287,7 @@ function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchi
                         cursor: "pointer",
                         color: "inherit",
                         padding: 4,
-                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16 }) }), children: rowActions ? (rowActions(row)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onEditAttribute?.(row.id), children: editLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: () => onArchiveAttribute?.(row.id), children: archiveLabel })] })) })),
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16 }) }), children: rowActions ? (rowActions(row)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onEditAttribute?.(row.id), children: editLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onDuplicateAttribute?.(row.id), children: duplicateLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => copyId(row.id), children: copyIdLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { disabled: !row.slug, onSelect: () => row.slug && copySlug(row.slug), children: copySlugLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onChangeSlug?.(row.id), children: changeSlugLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: () => onArchiveAttribute?.(row.id), children: archiveLabel })] })) })),
         },
     ], [
         nameColumnLabel,
@@ -268,8 +297,16 @@ function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchi
         systemLabel,
         enrichedLabel,
         editLabel,
+        duplicateLabel,
+        copyIdLabel,
+        copySlugLabel,
+        changeSlugLabel,
         archiveLabel,
         onEditAttribute,
+        onDuplicateAttribute,
+        copyId,
+        copySlug,
+        onChangeSlug,
         onArchiveAttribute,
         rowActions,
     ]);
@@ -330,26 +367,82 @@ function AttributeTypeSelect({ value, onValueChange, options = exports.ATTRIBUTE
     return ((0, jsx_runtime_1.jsx)(select_1.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. */
+exports.CURRENCY_DISPLAY_OPTIONS = [
+    { value: "code", label: "Code" },
+    { value: "name", label: "Name" },
+    { value: "narrow-symbol", label: "Narrow symbol" },
+    { value: "symbol", label: "Symbol" },
+];
+exports.CURRENCY_DECIMAL_PLACES_OPTIONS = [
+    { value: "2", label: "2 decimals" },
+    { value: "0", label: "No decimals" },
+];
+exports.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.
  */
-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, }) {
+function CreateAttributeDialog({ type, onTypeChange, typeOptions, aiAutofillTypeOptions, name, onNameChange, description, onDescriptionChange, currency, onCurrencyChange, currencyOptions, display, onDisplayChange, displayOptions = exports.CURRENCY_DISPLAY_OPTIONS, decimalPlaces, onDecimalPlacesChange, decimalPlacesOptions = exports.CURRENCY_DECIMAL_PLACES_OPTIONS, grouping, onGroupingChange, groupingOptions = exports.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 = (0, core_1.useCrispMessage)(titleProp, "Create attribute");
     const attributeTypeLabel = (0, core_1.useCrispMessage)(attributeTypeLabelProp, "Attribute Type");
     const nameLabel = (0, core_1.useCrispMessage)(nameLabelProp, "Name");
     const descriptionLabel = (0, core_1.useCrispMessage)(descriptionLabelProp, "Description");
     const descriptionPlaceholder = (0, core_1.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 = (0, core_1.useCrispMessage)(currencyFieldLabelProp, "Currency (required)");
+    const displayFieldLabel = (0, core_1.useCrispMessage)(displayFieldLabelProp, "Display (required)");
+    const decimalPlacesFieldLabel = (0, core_1.useCrispMessage)(decimalPlacesFieldLabelProp, "Decimal Places (required)");
+    const groupingFieldLabel = (0, core_1.useCrispMessage)(groupingFieldLabelProp, "Grouping (required)");
     const aiAutofillLabel = (0, core_1.useCrispMessage)(aiAutofillLabelProp, "AI autofill");
     const setUpAiAutofillLabel = (0, core_1.useCrispMessage)(setUpAiAutofillLabelProp, "Set up AI autofill");
     const createLabel = (0, core_1.useCrispMessage)(createLabelProp, "Create attribute");
     const switchId = React.useId();
     const nameId = React.useId();
-    return ((0, jsx_runtime_1.jsxs)(formdialog_1.FormDialog, { title: title, submitLabel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [createLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: attributeTypeLabel, children: (0, jsx_runtime_1.jsx)(AttributeTypeSelect, { value: type, onValueChange: onTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: nameLabel, htmlFor: nameId, children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: descriptionLabel, optional: true, children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-aiautofill", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), (0, jsx_runtime_1.jsxs)("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14 }), (0, jsx_runtime_1.jsx)("span", { children: setUpAiAutofillLabel }), (0, jsx_runtime_1.jsx)(switch_1.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 ((0, jsx_runtime_1.jsxs)(formdialog_1.FormDialog, { title: title, submitLabel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [createLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: attributeTypeLabel, children: (0, jsx_runtime_1.jsx)(AttributeTypeSelect, { value: type, onValueChange: handleTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: nameLabel, htmlFor: nameId, children: (0, jsx_runtime_1.jsx)(input_1.Input, { ref: nameRef, id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: descriptionLabel, optional: true, children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), type === "currency" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-fieldrow", children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: currencyFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: currencyOptions ?? [], value: currency ?? "", onValueChange: onCurrencyChange, searchable: true }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: displayFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: displayOptions, value: display ?? displayOptions[0]?.value, onValueChange: onDisplayChange }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-fieldrow", children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: decimalPlacesFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: decimalPlacesOptions, value: decimalPlaces ?? decimalPlacesOptions[0]?.value, onValueChange: onDecimalPlacesChange }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: groupingFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: groupingOptions, value: grouping ?? groupingOptions[0]?.value, onValueChange: onGroupingChange }) })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-aiautofill", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), (0, jsx_runtime_1.jsxs)("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14 }), (0, jsx_runtime_1.jsx)("span", { children: setUpAiAutofillLabel }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { id: switchId, checked: aiAutofillEnabled, onCheckedChange: onAiAutofillChange })] })] })] }));
 }
 CreateAttributeDialog.displayName = "CreateAttributeDialog";

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = exports.RecordDetails = exports.useEditableField = exports.editableInputType = exports.tagTone = void 0;
+exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPageMain = exports.RecordPage = exports.RecordDetails = exports.useEditableField = exports.editableInputType = exports.tagTone = void 0;
 var column_1 = require("./column");
 Object.defineProperty(exports, "tagTone", { enumerable: true, get: function () { return column_1.tagTone; } });
 var editable_field_1 = require("./editable-field");
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "useEditableField", { enumerable: true, get: func
 var recordpage_1 = require("./recordpage");
 Object.defineProperty(exports, "RecordDetails", { enumerable: true, get: function () { return recordpage_1.RecordDetails; } });
 Object.defineProperty(exports, "RecordPage", { enumerable: true, get: function () { return recordpage_1.RecordPage; } });
+Object.defineProperty(exports, "RecordPageMain", { enumerable: true, get: function () { return recordpage_1.RecordPageMain; } });
 Object.defineProperty(exports, "recordPageLabels", { enumerable: true, get: function () { return recordpage_1.recordPageLabels; } });
 var recordpage_recipe_1 = require("./recordpage.recipe");
 Object.defineProperty(exports, "recordpageRecipe", { enumerable: true, get: function () { return recordpage_recipe_1.recordpageRecipe; } });

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

@@ -35,13 +35,16 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.recordPageLabels = void 0;
 exports.RecordDetails = RecordDetails;
+exports.RecordPageMain = RecordPageMain;
 exports.RecordPage = RecordPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
+const 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");
@@ -100,6 +103,28 @@ exports.recordPageLabels = {
     share: "Share",
     comments: "Comments",
     noLists: "This record has not been added to any lists.",
+    filters: "Filters",
+    addMeeting: "Add meeting",
+    noFiles: "No files",
+    filesHint: "Drag a file here or choose one from your computer.",
+    newFolder: "New folder",
+    uploadFile: "Upload file",
+    fileMoreActions: "More file actions",
+    noDealsFound: "No Deals found",
+    noDealsHint: "There are no related records for this relationship.",
+    newDeal: "New Deal",
+    noEmails: "No emails",
+    noEmailsHint: "This record doesn't have any emails, or they may be hidden due to permissions.",
+    configureMailbox: "Configure mailbox",
+    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",
@@ -497,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.
@@ -515,6 +540,68 @@ function RecordDetails({ record, columns, sections, onEdit, labels, className, r
                 } }))] }));
 }
 RecordDetails.displayName = "RecordDetails";
+/**
+ * The main/tab-content column's own box, on its own (#750) — the same
+ * "standalone piece" `RecordDetails` already is for the Details column,
+ * mirrored to the other side of the layout. `RecordPage` composes this
+ * internally for its own tabbed body (below) — this exact box, not a second
+ * copy — so a consumer building a custom record page (its own tab set, its
+ * own menu, `RecordDetails` for the left column, but not the full
+ * `RecordPage`, which hardcodes the CRM tab set) gets the same
+ * Attio-measured inset: `flex: 1; min-width: 0; display: flex;
+ * flex-direction: column; min-height: 0; overflow-y: auto; padding: 12px
+ * 20px` (`recordpage.recipe.ts`'s own `.crisp-recordpage-main`) — without
+ * reaching for that internal class name directly, the only option before
+ * this existed.
+ *
+ * Needs the same single `.crisp-recordpage`-scoped ancestor `RecordDetails`
+ * already documents — wrap both in `recordpageRecipe()`, the way
+ * `RecordPage`'s own root does.
+ */
+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
@@ -523,9 +610,15 @@ RecordDetails.displayName = "RecordDetails";
  * 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
@@ -642,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;
@@ -755,13 +854,19 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
             case "overview":
                 return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-panel", children: [highlights !== false && ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-section-title", children: t.highlights }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-card", children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-grid", children: highlights.map((h) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-hl-cell", children: [h.icon && ((0, jsx_runtime_1.jsx)(h.icon, { className: "crisp-recordpage-hl-icon", size: 15, strokeWidth: 1.75 })), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-label", children: h.label }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-value", children: h.value ?? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] })), activityFeed, (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), (0, jsx_runtime_1.jsx)(NotesSection, { notes: notes, onAdd: addNote, labels: t }), (0, jsx_runtime_1.jsx)(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
             case "activity":
-                return (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: activityFeed });
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.activity, action: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-tabtoolbar", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75 }), t.filters] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 1.75 }), t.addMeeting] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-feed", children: activity.map((a) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-feed-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-feed-dot", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { size: 13, strokeWidth: 2 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-feed-body", children: [a.text, (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-feed-time", children: a.time })] })] }, a.id))) })] }) }));
+            case "files":
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-title", children: t.noFiles }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-desc", children: t.filesHint }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 1.75 }), t.newFolder] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 1.75 }), t.uploadFile] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.fileMoreActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })] })] }) }));
+            case "deals":
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Merge, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-title", children: t.noDealsFound }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-desc", children: t.noDealsHint }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-actions", children: (0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "md", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newDeal] }) })] }) }));
             case "notes":
                 return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(NotesSection, { notes: notes, onAdd: addNote, labels: t }) }));
             case "tasks":
                 return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t }) }));
             case "emails":
-                return (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: emailsEmpty });
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-panel", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.emails }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-title", children: t.noEmails }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-desc", children: t.noEmailsHint }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-actions", children: (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "primary", size: "md", children: t.configureMailbox }) })] }) })] }));
+            case "calls":
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Phone, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-title crisp-recordpage-illustrated-title--lg", children: t.upgradeToViewCalls }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-desc", children: t.callsUpgradeHint }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-actions", children: (0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "md", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Zap, { size: 15, strokeWidth: 1.75 }), t.upgrade] }) })] }) }));
             default:
                 return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
@@ -779,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.
@@ -791,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)("main", { className: "crisp-recordpage-main", 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 --
@@ -229,6 +242,31 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["3"]}; border: 1px dashed ${tokens_1.contract.borderDefault}; border-radius: ${tokens_1.contract.radius.xl}; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; text-align: center; }
     & .crisp-recordpage-emptycard svg { color: ${tokens_1.contract.fgMuted}; opacity: 0.7; }
 
+    /* #622: the Activity tab's own toolbar -- "Filters" + "+ Add meeting",
+       both the same measured button chrome as the topbar's own action
+       buttons (28px, e.field shadow, 14/500 label). */
+    & .crisp-recordpage-tabtoolbar { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
+
+    /* #622: Files tab's empty state -- measured live on Attio's own record
+       page (a company with no files uploaded). The 138x138 dotted-grid
+       backdrop is the same measured tile EmptyState's records variant uses
+       (crisp/#603), duplicated here rather than composed through that
+       component because this surface's title (16/600) and body (14/500,
+       63%-mixed fgPrimary, not the flat fgMuted EmptyState uses) measure to
+       their own values, matching neither of that component's existing
+       variants. */
+    & .crisp-recordpage-panel--center { flex: 1; align-items: center; justify-content: center; }
+    & .crisp-recordpage-illustrated { display: flex; flex-direction: column; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; text-align: center; }
+    & .crisp-recordpage-illustrated-icon { display: flex; align-items: center; justify-content: center; width: 138px; height: 138px; margin-bottom: ${tokens_1.contract.space["2"]}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-recordpage-illustrated-title { font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    /* #988: the Calls tab's own gated state measures a larger 20/24 title
+       than Files/Deals' 16/600 -- Attio's own "empty view" pattern (the
+       same 20/600 EmptyState's page/records variants already carry, not a
+       one-off). */
+    & .crisp-recordpage-illustrated-title--lg { font-size: 20px; line-height: 24px; }
+    & .crisp-recordpage-illustrated-desc { max-width: 320px; 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-recordpage-illustrated-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: ${tokens_1.contract.space["1.5"]}; margin-top: ${tokens_1.contract.space["2"]}; }
+
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
 
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
@@ -239,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; } });