@crisp-ui-kit/crisp 0.57.2 → 0.57.4

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

@@ -0,0 +1,43 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The standalone Notes gallery -- measured live on app.attio.com's Notes
+// page: a toolbar (leading Sort control, trailing view toggle/View
+// settings/New note, both consumer-composed slots -- crisp doesn't own the
+// exact button set, same reasoning as `ListPage`'s own leading/trailing), a
+// dashed "Favorites" region, then date-grouped sections (a group header +
+// count badge, transcribed from `ListPage`'s own already-measured values
+// rather than re-deriving them -- this IS the same Attio pattern, applied
+// above a card grid instead of a row list) holding a responsive card grid of
+// `EntityCard`s.
+//
+// The grid itself: a single real note card measured 356px wide -- with only
+// one note in the workspace there was no second card to read a column gap or
+// count from, so this uses a responsive `auto-fill` grid at that measured
+// per-card width instead of inventing a fixed column count or gap.
+const config = defineRecipe({
+    name: "notesgallery",
+    base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${c.font.sans}; color: ${c.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-notesgallery-tabs { display: flex; align-items: center; gap: ${c.space["2"]}; height: 44px; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
+
+    & .crisp-notesgallery-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.header}; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
+    & .crisp-notesgallery-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; margin-inline-start: auto; }
+
+    & .crisp-notesgallery-favorites-section { background: ${c.bgSubtle}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; }
+    & .crisp-notesgallery-favorites-label { padding: ${c.space["2"]} ${c.space["4"]} 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-notesgallery-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${c.space["6"]}; }
+    & .crisp-notesgallery-favorites-empty { box-sizing: border-box; width: 100%; padding: ${c.space["6"]}; border: 1px dashed ${c.borderDefault}; border-radius: ${c.radius.xl}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+
+    & .crisp-notesgallery-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["3"]} ${c.space["3"]}; }
+    & .crisp-notesgallery-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.menuRow}; padding: ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-notesgallery-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
+    & .crisp-notesgallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: ${c.space["4"]}; padding-bottom: ${c.space["4"]}; }
+
+    & .crisp-notesgallery-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const notesgalleryRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1 @@
+export * from "./objectpagemenu.js";

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell, ChevronRight, LayoutGrid, MessageSquare, MoreHorizontal, Settings, } from "lucide-react";
+import { Button } from "../../components/button/index.js";
+import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
+import { useCrispMessage } from "../../core/index.js";
+/**
+ * The page-level "…" menu on Attio's object page: Object settings / Manage
+ * attributes / a Notifications submenu ("Connect Slack workspace") — crisp
+ * parity checklist rows G-020/P-005 (crisp#616). Live-measured on
+ * app.attio.com/techpartners/companies: 208×114 popover (12px radius, 4px
+ * padding, 32px rows), a hairline separator before Notifications, and its
+ * submenu opening flush against the item with no gap, flipping side when
+ * the measured width doesn't fit (`placeSubmenu`, core/place-floating.ts).
+ */
+export function ObjectPageMenu({ trigger, onObjectSettings, onManageAttributes, onConnectSlack, objectSettingsLabel, manageAttributesLabel, notificationsLabel, connectSlackLabel, "aria-label": ariaLabelProp, align = "end", }) {
+    const objectSettings = useCrispMessage(objectSettingsLabel, "Object settings");
+    const manageAttributes = useCrispMessage(manageAttributesLabel, "Manage attributes");
+    const notifications = useCrispMessage(notificationsLabel, "Notifications");
+    const connectSlack = useCrispMessage(connectSlackLabel, "Connect Slack workspace");
+    const ariaLabel = useCrispMessage(ariaLabelProp, "Show menu");
+    return (_jsxs(Menu, { align: align, "aria-label": ariaLabel, trigger: trigger ?? (_jsx(Button, { intent: "ghost", size: "md", shape: "icon", "aria-label": ariaLabel, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), children: [_jsx(MenuItem, { icon: _jsx(Settings, { size: 16, strokeWidth: 1.75 }), onSelect: onObjectSettings, children: objectSettings }), _jsx(MenuItem, { icon: _jsx(LayoutGrid, { size: 16, strokeWidth: 1.75 }), onSelect: onManageAttributes, children: manageAttributes }), _jsx(MenuSeparator, {}), _jsx(Menu, { placement: "submenu", "aria-label": notifications, trigger: _jsx(MenuItem, { icon: _jsx(Bell, { size: 16, strokeWidth: 1.75 }), trailingIcon: _jsx(ChevronRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75 }), closeOnSelect: false, children: notifications }), children: _jsx(MenuItem, { icon: _jsx(MessageSquare, { size: 16, strokeWidth: 1.75 }), onSelect: onConnectSlack, children: connectSlack }) })] }));
+}
+ObjectPageMenu.displayName = "ObjectPageMenu";

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

@@ -1,4 +1,4 @@
 export { tagTone, } from "./column.js";
 export { editableInputType, useEditableField, } from "./editable-field.js";
-export { RecordDetails, RecordPage, recordPageLabels, } from "./recordpage.js";
+export { RecordDetails, RecordPage, RecordPageMain, recordPageLabels, } from "./recordpage.js";
 export { recordpageRecipe } from "./recordpage.recipe.js";

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

@@ -1,9 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Activity as ActivityIcon, CalendarClock, ChevronDown, ChevronUp, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, Mail, Maximize2, Merge, MessageSquare, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Settings, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, Workflow, X, Zap, } from "lucide-react";
+import { Activity as ActivityIcon, CalendarClock, ChevronDown, ChevronUp, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, ListFilter, Mail, Maximize2, Merge, MessageSquare, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Settings, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, Workflow, X, Zap, } from "lucide-react";
 import * as React from "react";
 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";
@@ -62,6 +64,28 @@ export const 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",
@@ -459,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.
@@ -477,6 +501,68 @@ export function RecordDetails({ record, columns, sections, onEdit, labels, class
                 } }))] }));
 }
 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.
+ */
+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
@@ -485,9 +571,15 @@ RecordDetails.displayName = "RecordDetails";
  * 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
@@ -604,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;
@@ -717,13 +815,19 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
             case "overview":
                 return (_jsxs("div", { className: "crisp-recordpage-panel", children: [highlights !== false && (_jsxs("section", { children: [_jsx("div", { className: "crisp-recordpage-section-title", children: t.highlights }), _jsx("div", { className: "crisp-recordpage-hl-card", children: _jsx("div", { className: "crisp-recordpage-hl-grid", children: highlights.map((h) => (_jsxs("div", { className: "crisp-recordpage-hl-cell", children: [h.icon && (_jsx(h.icon, { className: "crisp-recordpage-hl-icon", size: 15, strokeWidth: 1.75 })), _jsx("div", { className: "crisp-recordpage-hl-label", children: h.label }), _jsx("div", { className: "crisp-recordpage-hl-value", children: h.value ?? (_jsx("span", { className: "crisp-recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] })), activityFeed, _jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }), _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
             case "activity":
-                return _jsx("div", { className: "crisp-recordpage-panel", children: activityFeed });
+                return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.activity, action: _jsxs("span", { className: "crisp-recordpage-tabtoolbar", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action", children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75 }), t.filters] }), _jsxs("button", { type: "button", className: "crisp-recordpage-action", children: [_jsx(Plus, { size: 14, strokeWidth: 1.75 }), t.addMeeting] })] }) }), _jsx("div", { className: "crisp-recordpage-feed", children: activity.map((a) => (_jsxs("div", { className: "crisp-recordpage-feed-item", children: [_jsx("span", { className: "crisp-recordpage-feed-dot", children: _jsx(ActivityIcon, { size: 13, strokeWidth: 2 }) }), _jsxs("div", { className: "crisp-recordpage-feed-body", children: [a.text, _jsx("div", { className: "crisp-recordpage-feed-time", children: a.time })] })] }, a.id))) })] }) }));
+            case "files":
+                return (_jsx("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: _jsxs("div", { className: "crisp-recordpage-illustrated", children: [_jsx("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: _jsx(Folder, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-recordpage-illustrated-title", children: t.noFiles }), _jsx("div", { className: "crisp-recordpage-illustrated-desc", children: t.filesHint }), _jsxs("div", { className: "crisp-recordpage-illustrated-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action", children: [_jsx(Plus, { size: 14, strokeWidth: 1.75 }), t.newFolder] }), _jsxs("button", { type: "button", className: "crisp-recordpage-action", children: [_jsx(Plus, { size: 14, strokeWidth: 1.75 }), t.uploadFile] }), _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.fileMoreActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })] })] }) }));
+            case "deals":
+                return (_jsx("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: _jsxs("div", { className: "crisp-recordpage-illustrated", children: [_jsx("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: _jsx(Merge, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-recordpage-illustrated-title", children: t.noDealsFound }), _jsx("div", { className: "crisp-recordpage-illustrated-desc", children: t.noDealsHint }), _jsx("div", { className: "crisp-recordpage-illustrated-actions", children: _jsxs(Button, { intent: "primary", size: "md", children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newDeal] }) })] }) }));
             case "notes":
                 return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }) }));
             case "tasks":
                 return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t }) }));
             case "emails":
-                return _jsx("div", { className: "crisp-recordpage-panel", children: emailsEmpty });
+                return (_jsxs("div", { className: "crisp-recordpage-panel", children: [_jsx(SectionHead, { title: t.tabs.emails }), _jsx("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: _jsxs("div", { className: "crisp-recordpage-illustrated", children: [_jsx("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: _jsx(Mail, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-recordpage-illustrated-title", children: t.noEmails }), _jsx("div", { className: "crisp-recordpage-illustrated-desc", children: t.noEmailsHint }), _jsx("div", { className: "crisp-recordpage-illustrated-actions", children: _jsx(Button, { intent: "primary", size: "md", children: t.configureMailbox }) })] }) })] }));
+            case "calls":
+                return (_jsx("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: _jsxs("div", { className: "crisp-recordpage-illustrated", children: [_jsx("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: _jsx(Phone, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-recordpage-illustrated-title crisp-recordpage-illustrated-title--lg", children: t.upgradeToViewCalls }), _jsx("div", { className: "crisp-recordpage-illustrated-desc", children: t.callsUpgradeHint }), _jsx("div", { className: "crisp-recordpage-illustrated-actions", children: _jsxs(Button, { intent: "primary", size: "md", children: [_jsx(Zap, { size: 15, strokeWidth: 1.75 }), t.upgrade] }) })] }) }));
             default:
                 return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
@@ -741,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.
@@ -753,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("main", { className: "crisp-recordpage-main", 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";