@crisp-ui-kit/crisp 0.53.5 → 0.54.1

package/dist/cjs/product/headerbar/headerbar.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderBar = HeaderBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const headerbar_recipe_1 = require("./headerbar.recipe");
+/**
+ * A page-level header row: an optional leading slot, a flexible title/
+ * breadcrumb region, and a trailing action cluster, on the measured 48px
+ * bar Attio uses for both its page-header and its view-bar row. See the
+ * recipe's own doc comment for the live measurement (crisp#462).
+ */
+function HeaderBar({ leading, title, trailing, bordered = true, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, headerbar_recipe_1.headerbarRecipe)({ className }), "data-bordered": bordered ? "" : undefined, ...rest, children: [leading ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-headerbar-leading", children: leading })) : null, title ? (0, jsx_runtime_1.jsx)("div", { className: "crisp-headerbar-title", children: title }) : null, trailing ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-headerbar-trailing", children: trailing })) : null] }));
+}
+HeaderBar.displayName = "HeaderBar";

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerbarRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A page-level header row — measured live at app.attio.com/techpartners/companies
+// against two stacked bars: the top utility bar (breadcrumb + trailing icon
+// actions, e.g. search/notifications) and the view bar directly under it
+// ("All Companies" view name + tabs + "New Company"). Both share the same
+// 48px content height and `0 ${space3}` padding; only the outer (first) bar
+// carries the divider -- measured `border-bottom: 1px solid rgb(238,239,241)`
+// (`borderSubtle`/`line100`, exact match) on the utility bar, no border of
+// its own on the view bar directly beneath it. `bordered` (default true)
+// lets a consumer that stacks two HeaderBars turn it off on the inner one,
+// the way GRC's own AppLayout UtilityBar + Page viewBar do today with two
+// hand-rolled, drifting copies of the same 49px bar (crisp#462 GRC audit,
+// crisp#527).
+//
+// No bell, no breadcrumb, no search box baked in -- those are the `leading`/
+// `title`/`trailing` slot content a consumer supplies. `size.header` (48px)
+// is reused rather than a new token, since it's the same "workspace-switcher
+// header height" measured elsewhere in the sidebar.
+const config = (0, core_1.defineRecipe)({
+    name: "headerbar",
+    base: `box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.header}; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-bordered] { border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-headerbar-leading { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; min-width: 0; }
+    & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; overflow: hidden; }
+    & .crisp-headerbar-trailing { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.headerbarRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

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

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

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const tabs_1 = require("../../components/tabs");
+const core_1 = require("../../core");
 const inbox_recipe_1 = require("./inbox.recipe");
 /**
  * A notifications inbox panel — measured from a notification flyout. A
@@ -45,8 +46,19 @@ const inbox_recipe_1 = require("./inbox.recipe");
  * (avatar + message + time + unread dot) or a centred empty state. Put it inside
  * a Popover for the flyout.
  */
-function Inbox({ notifications = [], title = "Notifications", tabs, activeTab, onTabChange, emptyTitle = "No notifications", emptySubtitle = "Notifications such as mentions and important updates will be displayed here.", emptyAction, tabsLabel = "Notification views", className, ...rest }) {
+function Inbox({ notifications = [], title: titleProp, tabs, activeTab, onTabChange, emptyTitle: emptyTitleProp, emptySubtitle: emptySubtitleProp, emptyAction, tabsLabel: tabsLabelProp, className, ...rest }) {
     const listRef = React.useRef(null);
+    // crisp/#471: `title`/`emptyTitle`/`emptySubtitle` are typed
+    // `React.ReactNode`, so they resolve by hand rather than through
+    // `useCrispMessage`, which is string-only — same reasoning as DataTable's
+    // own `empty`.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const title = titleProp ?? crispMessages.Notifications ?? "Notifications";
+    const emptyTitle = emptyTitleProp ?? crispMessages["No notifications"] ?? "No notifications";
+    const emptySubtitle = emptySubtitleProp ??
+        crispMessages["Notifications such as mentions and important updates will be displayed here."] ??
+        "Notifications such as mentions and important updates will be displayed here.";
+    const tabsLabel = (0, core_1.useCrispMessage)(tabsLabelProp, "Notification views");
     // crisp's shared tablist model, the one `Tabs` runs (#195). Hand-rolling a
     // second one is how Inbox ended up with no arrow keys, no roving tabindex
     // and no name while `Tabs` had all three.

package/dist/cjs/product/onboarding/onboarding.js

@@ -4,6 +4,7 @@ exports.onboardingLabels = void 0;
 exports.OnboardingChecklist = OnboardingChecklist;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
+const core_1 = require("../../core");
 const onboarding_recipe_1 = require("./onboarding.recipe");
 /**
  * The English defaults for the two pieces of copy that are formatters rather
@@ -19,9 +20,29 @@ exports.onboardingLabels = {
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", progressText = exports.onboardingLabels.progressText, completedStepLabel = exports.onboardingLabels.completedStepLabel, ...rest }) {
+function OnboardingChecklist({ title: titleProp, steps, encouragement: encouragementProp, onStepClick, onMenu, onMinimize, className, optionsLabel: optionsLabelProp, minimizeLabel: minimizeLabelProp, progressLabel: progressLabelProp, progressText: progressTextProp, completedStepLabel: completedStepLabelProp, ...rest }) {
     const total = steps.length;
     const done = steps.filter((s) => s.done).length;
+    // crisp/#471: same resolution order as every other component's own —
+    // explicit prop, then a CrispMessagesProvider's translation of the English
+    // default, then that default itself. `title`/`encouragement` are typed
+    // `React.ReactNode` (a caller can pass a translated element), so they
+    // resolve by hand rather than through `useCrispMessage`, which is
+    // string-only — same reasoning as DataTable's own `empty`.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const title = titleProp ?? crispMessages["Getting started"] ?? "Getting started";
+    const encouragement = encouragementProp ?? crispMessages["Keep it up!"] ?? "Keep it up!";
+    const optionsLabel = (0, core_1.useCrispMessage)(optionsLabelProp, "Checklist options");
+    const minimizeLabel = (0, core_1.useCrispMessage)(minimizeLabelProp, "Minimize");
+    const progressLabel = (0, core_1.useCrispMessage)(progressLabelProp, "Onboarding progress");
+    // `progressText`/`completedStepLabel` are formatters, not strings (the
+    // count moves within the sentence between languages, #216) — each of
+    // their own static fragments gets its own lookup, same as
+    // TableToolbar's "Sorted by" (crisp/#217).
+    const progressText = progressTextProp ??
+        ((doneCount, totalCount) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("b", { children: [doneCount, "/", totalCount] }), " ", crispMessages["steps completed"] ?? "steps completed"] })));
+    const completedStepLabel = completedStepLabelProp ??
+        ((label) => `${String(label)} ${crispMessages["— completed"] ?? "— completed"}`);
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, onboarding_recipe_1.onboardingRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-onboarding-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-title", children: title }), onMenu && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-onboarding-sub", children: [progressText(done, total), encouragement ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-onboarding-steps", children: steps.map((s) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-onboarding-step", "data-done": s.done ? "" : undefined, "aria-label": s.done ? completedStepLabel(s.label) : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-step-icon", children: s.icon }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-step-label", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-step-check", children: s.done && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = void 0;
+exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = exports.RecordDetails = void 0;
 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, "recordPageLabels", { enumerable: true, get: function () { return recordpage_1.recordPageLabels; } });
 var recordpage_recipe_1 = require("./recordpage.recipe");

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

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.recordPageLabels = void 0;
+exports.RecordDetails = RecordDetails;
 exports.RecordPage = RecordPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
@@ -124,7 +125,42 @@ exports.recordPageLabels = {
     taggedCategories: (count) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Tagged ", (0, jsx_runtime_1.jsx)("b", { children: count }), " categories"] })),
     recordCreated: (name) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { children: name }), " record was created"] })),
     noEmailsWith: (name) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["No emails logged with ", name, " yet."] }),
+    noFieldsMatch: (query) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["No fields match \u201C", query, "\u201D."] }),
 };
+/**
+ * crisp/#471: a `CrispMessagesProvider`'s `componentDefaults.recordPage` sits
+ * BETWEEN the built-in English defaults and an instance's own explicit
+ * `labels` prop -- a provider translates every `RecordPage`/`RecordDetails`
+ * on the page at once, and a caller who still passes `labels` for one
+ * instance keeps overriding it there. Not `useCrispMessage`: several of
+ * these entries (`domainSetTo`, `noFieldsMatch`, …) are formatter FUNCTIONS,
+ * which a flat string dictionary can't hold. Shared by `RecordPage` and
+ * `RecordDetails` (#528) -- both merge the same three layers the same way,
+ * so this is the one place that merge is written, not two copies of it.
+ */
+function useRecordPageLabels(labels) {
+    const providerLabels = (0, core_1.useCrispComponentDefaults)("recordPage");
+    return React.useMemo(() => ({
+        ...exports.recordPageLabels,
+        ...providerLabels,
+        ...labels,
+        tabs: {
+            ...exports.recordPageLabels.tabs,
+            ...providerLabels?.tabs,
+            ...labels?.tabs,
+        },
+        highlightLabels: {
+            ...exports.recordPageLabels.highlightLabels,
+            ...providerLabels?.highlightLabels,
+            ...labels?.highlightLabels,
+        },
+        highlightEmpty: {
+            ...exports.recordPageLabels.highlightEmpty,
+            ...providerLabels?.highlightEmpty,
+            ...labels?.highlightEmpty,
+        },
+    }), [labels, providerLabels]);
+}
 /** `Select` owns its own closed-by-default `open` state with no prop or
  * imperative way to start it open -- the only thing that opens it is a real
  * click on its trigger button. Mounting one on click (rather than rendering
@@ -180,6 +216,16 @@ function TagsValue({ values }) {
 }
 function FieldValue({ col, row, labels, }) {
     const v = row[col.key];
+    // `render` (#528) -- the same full-custom-content escape hatch
+    // `RecordsTable`'s own columns already have (recordstable.tsx's own doc:
+    // "an escape hatch for a display crisp can't express via type"), reused
+    // here so a value this component has no built-in shape for (a reference
+    // field's link to another record, say) doesn't need a new `type`/`editor`
+    // of its own. Checked before the empty check -- like `RecordsTable`'s own
+    // `render`, it owns the cell's content fully, including what "empty"
+    // looks like for that column.
+    if (col.render)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: col.render(v, row) });
     if (valueEmpty(v))
         return (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-empty", children: labels.setAValue });
     // `editor: "select"` at rest (#457) -- checked ahead of `col.type` since
@@ -247,6 +293,147 @@ function TasksSection({ tasks, onAdd, onToggle, labels, }) {
 function EmptyCard({ icon, children, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-emptycard", children: [icon, children] }));
 }
+/**
+ * The Details column's own field list, on its own (#528) — `RecordPage`'s
+ * "Record Details" collapsible + searchable field list, the one piece a
+ * consumer with a fixed-width rail of its own (no resize handle, no entity
+ * header, no CRM Lists panel — GRC's own persistent 320px column, grc#66)
+ * actually needs, rather than rebuilding this same click-to-edit/search/
+ * `sections` machinery by hand or pulling in the whole page's chrome for a
+ * rail that isn't one. `RecordPage` composes this internally for its own
+ * resizable aside (same component either way, not a second copy) — this is
+ * that same block, exactly, just not wrapped in `RecordPage`'s own topbar/
+ * tabs/resizer.
+ *
+ * Not wrapped in `recordpageRecipe` itself: doing so would duplicate the
+ * recipe's own `display:flex;height:100%` base rule as a nested child
+ * inside `RecordPage`'s aside (which already carries that class from
+ * `RecordPage`'s own root), breaking that layout. A standalone caller
+ * needs exactly one `.crisp-recordpage`-scoped ancestor for this
+ * component's classes to resolve — wrap it in one, the same way
+ * `RecordPage`'s own root does: `<div className={recordpageRecipe()}>`
+ * (also exported from this package).
+ */
+function RecordDetails({ record, columns, sections, onEdit, labels, className, ...rest }) {
+    const t = useRecordPageLabels(labels);
+    const { editingKey, pendingKey, error, openEditing, closeEditing, commit } = (0, recordstable_1.useEditableField)(onEdit);
+    const [detailsOpen, setDetailsOpen] = React.useState(true);
+    const [searchOpen, setSearchOpen] = React.useState(false);
+    const [fieldQuery, setFieldQuery] = React.useState("");
+    const [showAllValues, setShowAllValues] = React.useState(false);
+    const fields = columns.filter((col) => col.type !== "entity");
+    const q = fieldQuery.trim().toLowerCase();
+    const matches = (col) => !q || col.label.toLowerCase().includes(q);
+    // #528: `sections` groups fields under headings, in the caller's own
+    // order, and always shows every match — no 5-field reveal (see
+    // `RecordPageSection`'s own doc). Omitted, this stays the flat,
+    // Attio-measured list with its 5-field "View all values" reveal,
+    // unchanged from before #528.
+    const FIELD_LIMIT = 5;
+    let canRevealFields = false;
+    let groups;
+    if (sections) {
+        const byKey = new Map(fields.map((col) => [col.key, col]));
+        groups = sections
+            .map((s) => ({
+            title: s.title,
+            fields: s.fields
+                .map((key) => byKey.get(key))
+                .filter((col) => col !== undefined)
+                .filter(matches),
+        }))
+            // A section left with no matching fields (a search that matches
+            // nothing in it, or a `fields` key naming no real column) doesn't
+            // render at all -- heading included, not an empty group under a
+            // heading with nothing below it.
+            .filter((g) => g.fields.length > 0);
+    }
+    else {
+        const matched = q ? fields.filter(matches) : fields;
+        canRevealFields = !q && matched.length > FIELD_LIMIT;
+        const shown = canRevealFields && !showAllValues
+            ? matched.slice(0, FIELD_LIMIT)
+            : matched;
+        groups = [{ title: undefined, fields: shown }];
+    }
+    const totalShown = groups.reduce((n, g) => n + g.fields.length, 0);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_1.cx)("crisp-recordpage-section", className), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.jsx)("input", { 
+                        // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
+                        autoFocus: true, type: "text", className: "crisp-recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Escape") {
+                                setSearchOpen(false);
+                                setFieldQuery("");
+                            }
+                        } })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: [t.recordDetails, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-recordpage-chev", size: 12, strokeWidth: 2.5 })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-detailsearch", "data-active": searchOpen ? "" : undefined, "aria-label": searchOpen ? t.closeSearch : t.searchFields, "aria-pressed": searchOpen, onClick: () => {
+                            setSearchOpen((s) => !s);
+                            setFieldQuery("");
+                            if (!searchOpen)
+                                setDetailsOpen(true);
+                        }, children: searchOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
+                (totalShown > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [groups.map((g, i) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [sections && g.title != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-section-title crisp-recordpage-fieldsection-title", children: g.title })), g.fields.map((col) => {
+                                    // #431: a field only actually opens when there's an
+                                    // `onEdit` to commit through -- `editable` with nothing
+                                    // to call would be a dead click.
+                                    const canEdit = Boolean(col.editable && onEdit);
+                                    const isPending = pendingKey === col.key;
+                                    const fieldError = error?.key === col.key ? error.message : null;
+                                    const label = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-label", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-field-label-text", children: col.label })] }));
+                                    // `switch` is always its own live widget -- no
+                                    // click-to-open, no separate edit/view mode: flipping the
+                                    // toggle IS the commit gesture, and there's no
+                                    // meaningfully different "rest" display for a boolean
+                                    // (same exception `DataTable`'s own `editor` makes, #453).
+                                    if (canEdit && col.editor === "switch") {
+                                        const value = record[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", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-edit-picker", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) }), 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));
+                                    }
+                                    // `select` opens crisp's own `Select` on a SINGLE click
+                                    // (#457, corrects #431/#385's original always-live copy
+                                    // of the same regression #453 fixed on `DataTable`) --
+                                    // like every other editable type here, at rest it shows
+                                    // its value (see `FieldValue`'s own `col.editor ===
+                                    // "select"` case) via the generic click-to-open branch
+                                    // below, and only mounts `Select` once `editingKey`
+                                    // matches. `DataTable`'s own double-click gate doesn't
+                                    // apply: `RecordPage`'s plain text/date fields already
+                                    // open on a single click (measured live for #431), so
+                                    // `select` matches that, not `DataTable`.
+                                    if (canEdit &&
+                                        editingKey === col.key &&
+                                        col.editor === "select") {
+                                        const value = record[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", children: [(0, jsx_runtime_1.jsx)(RecordPageSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commit(record.id, col.key, v), onCancel: closeEditing }), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                    }
+                                    if (canEdit && editingKey === col.key) {
+                                        const value = record[col.key];
+                                        const editor = (0, recordstable_1.editableInputType)(col.type);
+                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-field", children: [label, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-value", children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-recordpage-edit", 
+                                                            // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
+                                                            autoFocus: true, ...editor, disabled: isPending, defaultValue: value == null ? "" : String(value), "aria-label": `Edit ${col.label}`, onKeyDown: (e) => {
+                                                                if (isPending)
+                                                                    return;
+                                                                if (e.key === "Enter")
+                                                                    commit(record.id, col.key, e.currentTarget.value);
+                                                                else if (e.key === "Escape")
+                                                                    closeEditing();
+                                                            }, onBlur: (e) => {
+                                                                if (isPending)
+                                                                    return;
+                                                                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));
+                                })] }, 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.
+                                const next = !showAllValues;
+                                setShowAllValues(next);
+                                setSearchOpen(next);
+                                if (!next)
+                                    setFieldQuery("");
+                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-noresults", children: t.noFieldsMatch(fieldQuery) })))] }));
+}
+RecordDetails.displayName = "RecordDetails";
 /**
  * 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
@@ -255,36 +442,8 @@ function EmptyCard({ icon, children, }) {
  * 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, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, ...rest }) {
-    const { editingKey, pendingKey, error, openEditing, closeEditing, commit } = (0, recordstable_1.useEditableField)(onEdit);
-    // crisp/#471: a CrispMessagesProvider's `componentDefaults.recordPage` sits
-    // BETWEEN the built-in English defaults and this instance's own explicit
-    // `labels` prop — a provider translates every RecordPage on the page at
-    // once, and a caller who still passes `labels` for one instance keeps
-    // overriding it there, same as before this existed. Not `useCrispMessage`:
-    // several of these entries (`domainSetTo`, `sortedBy`, …) are formatter
-    // FUNCTIONS, which a flat string dictionary can't hold.
-    const providerLabels = (0, core_1.useCrispComponentDefaults)("recordPage");
-    const t = React.useMemo(() => ({
-        ...exports.recordPageLabels,
-        ...providerLabels,
-        ...labels,
-        tabs: {
-            ...exports.recordPageLabels.tabs,
-            ...providerLabels?.tabs,
-            ...labels?.tabs,
-        },
-        highlightLabels: {
-            ...exports.recordPageLabels.highlightLabels,
-            ...providerLabels?.highlightLabels,
-            ...labels?.highlightLabels,
-        },
-        highlightEmpty: {
-            ...exports.recordPageLabels.highlightEmpty,
-            ...providerLabels?.highlightEmpty,
-            ...labels?.highlightEmpty,
-        },
-    }), [labels, providerLabels]);
+function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, ...rest }) {
+    const t = useRecordPageLabels(labels);
     const [favorite, setFavorite] = React.useState(false);
     // Notes/Tasks are controlled when the caller supplies `notes`/`tasks` (even
     // `[]`) -- otherwise RecordPage keeps its own self-contained state, as
@@ -296,11 +455,6 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const notes = notesProp ?? internalNotes;
     const tasks = tasksProp ?? internalTasks;
     const [showAllActivity, setShowAllActivity] = React.useState(false);
-    // Collapsible + searchable Record Details.
-    const [detailsOpen, setDetailsOpen] = React.useState(true);
-    const [searchOpen, setSearchOpen] = React.useState(false);
-    const [fieldQuery, setFieldQuery] = React.useState("");
-    const [showAllValues, setShowAllValues] = React.useState(false);
     // Drag-resizable left details column.
     const [detailsW, setDetailsW] = React.useState(320);
     const [resizing, setResizing] = React.useState(false);
@@ -337,17 +491,6 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         ? record[entityCol.key]
         : undefined;
     const name = entity?.name ?? "Record";
-    const fields = columns.filter((col) => col.type !== "entity");
-    const q = fieldQuery.trim().toLowerCase();
-    const matchedFields = q
-        ? fields.filter((col) => col.label.toLowerCase().includes(q))
-        : fields;
-    // Shows the first 5 fields; "View all values" reveals the rest.
-    const FIELD_LIMIT = 5;
-    const canRevealFields = !q && matchedFields.length > FIELD_LIMIT;
-    const shownFields = canRevealFields && !showAllValues
-        ? matchedFields.slice(0, FIELD_LIMIT)
-        : matchedFields;
     const byKey = React.useMemo(() => new Map(columns.map((col) => [col.key, col])), [columns]);
     // The Overview "Highlights" — a fixed set of enrichment stats (measured
     // from the live app), a couple derived from the record, the rest empty.
@@ -365,7 +508,11 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
             : n >= 1000
                 ? "1K–10K"
                 : "<1K";
-    const highlights = [
+    // #528: the built-in CRM Highlights set, used when the caller omits
+    // `highlights` entirely -- a caller passing `highlights` (an array, or
+    // `false` to omit the section) replaces this wholesale, the same
+    // "caller's own list, not a merge" choice `tabs` already makes (#379).
+    const defaultHighlights = [
         {
             label: t.highlightLabels.connectionStrength,
             icon: lucide_react_1.Zap,
@@ -403,6 +550,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
             empty: t.highlightEmpty.employeeRange,
         },
     ];
+    const highlights = highlightsProp === undefined ? defaultHighlights : highlightsProp;
     const ti = { size: 15, strokeWidth: 1.75 };
     const builtinTabs = [
         { value: "overview", label: t.tabs.overview, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { ...ti }) },
@@ -485,7 +633,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const builtinPanel = (active) => {
         switch (active) {
             case "overview":
-                return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-panel", children: [(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: [(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 })] }));
+                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 });
             case "notes":
@@ -511,81 +659,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", children: [(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.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.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (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, shortcut: "\u232B", 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.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.jsx)("input", { 
-                                                // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
-                                                autoFocus: true, type: "text", className: "crisp-recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
-                                                    if (e.key === "Escape") {
-                                                        setSearchOpen(false);
-                                                        setFieldQuery("");
-                                                    }
-                                                } })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: [t.recordDetails, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-recordpage-chev", size: 12, strokeWidth: 2.5 })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-detailsearch", "data-active": searchOpen ? "" : undefined, "aria-label": searchOpen ? t.closeSearch : t.searchFields, "aria-pressed": searchOpen, onClick: () => {
-                                                    setSearchOpen((s) => !s);
-                                                    setFieldQuery("");
-                                                    if (!searchOpen)
-                                                        setDetailsOpen(true);
-                                                }, children: searchOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
-                                        (shownFields.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shownFields.map((col) => {
-                                                    // #431: a field only actually opens when there's an
-                                                    // `onEdit` to commit through -- `editable` with nothing
-                                                    // to call would be a dead click.
-                                                    const canEdit = Boolean(col.editable && onEdit);
-                                                    const isPending = pendingKey === col.key;
-                                                    const fieldError = error?.key === col.key ? error.message : null;
-                                                    const label = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-label", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-field-label-text", children: col.label })] }));
-                                                    // `switch` is always its own live widget -- no
-                                                    // click-to-open, no separate edit/view mode: flipping the
-                                                    // toggle IS the commit gesture, and there's no
-                                                    // meaningfully different "rest" display for a boolean
-                                                    // (same exception `DataTable`'s own `editor` makes, #453).
-                                                    if (canEdit && col.editor === "switch") {
-                                                        const value = record[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", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-edit-picker", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) }), 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));
-                                                    }
-                                                    // `select` opens crisp's own `Select` on a SINGLE click
-                                                    // (#457, corrects #431/#385's original always-live
-                                                    // copy of the same regression #453 fixed on `DataTable`)
-                                                    // -- like every other editable type here, at rest it
-                                                    // shows its value (see `FieldValue`'s own `col.editor
-                                                    // === "select"` case) via the generic click-to-open
-                                                    // branch below, and only mounts `Select` once
-                                                    // `editingKey` matches. `DataTable`'s own double-click
-                                                    // gate doesn't apply: `RecordPage`'s plain text/date
-                                                    // fields already open on a single click (measured live
-                                                    // for #431), so `select` matches that, not `DataTable`.
-                                                    if (canEdit &&
-                                                        editingKey === col.key &&
-                                                        col.editor === "select") {
-                                                        const value = record[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", children: [(0, jsx_runtime_1.jsx)(RecordPageSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commit(record.id, col.key, v), onCancel: closeEditing }), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
-                                                    }
-                                                    if (canEdit && editingKey === col.key) {
-                                                        const value = record[col.key];
-                                                        const editor = (0, recordstable_1.editableInputType)(col.type);
-                                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-field", children: [label, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-value", children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-recordpage-edit", 
-                                                                            // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
-                                                                            autoFocus: true, ...editor, disabled: isPending, defaultValue: value == null ? "" : String(value), "aria-label": `Edit ${col.label}`, onKeyDown: (e) => {
-                                                                                if (isPending)
-                                                                                    return;
-                                                                                if (e.key === "Enter")
-                                                                                    commit(record.id, col.key, e.currentTarget.value);
-                                                                                else if (e.key === "Escape")
-                                                                                    closeEditing();
-                                                                            }, onBlur: (e) => {
-                                                                                if (isPending)
-                                                                                    return;
-                                                                                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));
-                                                }), 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.
-                                                        const next = !showAllValues;
-                                                        setShowAllValues(next);
-                                                        setSearchOpen(next);
-                                                        if (!next)
-                                                            setFieldQuery("");
-                                                    }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), (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": 300, "aria-valuemax": 560, 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", children: [(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.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.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (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, shortcut: "\u232B", 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.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (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": 300, "aria-valuemax": 560, 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.

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

@@ -66,6 +66,11 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: ${tokens_1.contract.size.chip}; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-recordpage-detailsearch:hover, & .crisp-recordpage-detailsearch[data-active] { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-recordpage-noresults { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    /* A caller-supplied \`sections\` grouping (#528) is not an Attio-measured
+       shape (its own Details column is flat) -- this heading reuses
+       .crisp-recordpage-section-title's own type treatment verbatim, just
+       spaced from the group above it. */
+    & .crisp-recordpage-fieldsection-title { margin-top: ${tokens_1.contract.space["3"]}; }
     & .crisp-recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
     & .crisp-recordpage-morevalues:hover { color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-recordpage-viewall { flex-basis: 100%; margin-top: ${tokens_1.contract.space["0.5"]}; border: none; background: none; padding: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.regular}; cursor: pointer; text-align: start; }