@crisp-ui-kit/crisp 0.53.5 → 0.54.1

package/dist/esm/product/headerbar/headerbar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { headerbarRecipe } from "./headerbar.recipe.js";
+/**
+ * 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).
+ */
+export function HeaderBar({ leading, title, trailing, bordered = true, className, ...rest }) {
+    return (_jsxs("div", { className: headerbarRecipe({ className }), "data-bordered": bordered ? "" : undefined, ...rest, children: [leading ? (_jsx("span", { className: "crisp-headerbar-leading", children: leading })) : null, title ? _jsx("div", { className: "crisp-headerbar-title", children: title }) : null, trailing ? (_jsx("span", { className: "crisp-headerbar-trailing", children: trailing })) : null] }));
+}
+HeaderBar.displayName = "HeaderBar";

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

@@ -0,0 +1,32 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "headerbar",
+    base: `box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; height: ${c.size.header}; flex-shrink: 0; padding: 0 ${c.space["3"]}; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-bordered] { border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-headerbar-leading { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; min-width: 0; }
+    & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: ${c.space["2"]}; overflow: hidden; }
+    & .crisp-headerbar-trailing { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const headerbarRecipe = resolveRecipe(config);
+export default config;

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

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

package/dist/esm/product/inbox/inbox.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bell } from "lucide-react";
 import * as React from "react";
 import { useTablistKeyboard } from "../../components/tabs/index.js";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { inboxRecipe } from "./inbox.recipe.js";
 /**
  * A notifications inbox panel — measured from a notification flyout. A
@@ -9,8 +10,19 @@ import { inboxRecipe } from "./inbox.recipe.js";
  * (avatar + message + time + unread dot) or a centred empty state. Put it inside
  * a Popover for the flyout.
  */
-export 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 }) {
+export 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 = 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 = 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/esm/product/onboarding/onboarding.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, MoreHorizontal } from "lucide-react";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { onboardingRecipe } from "./onboarding.recipe.js";
 /**
  * The English defaults for the two pieces of copy that are formatters rather
@@ -15,9 +16,29 @@ export const onboardingLabels = {
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-export function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", progressText = onboardingLabels.progressText, completedStepLabel = onboardingLabels.completedStepLabel, ...rest }) {
+export 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 = useCrispMessages();
+    const title = titleProp ?? crispMessages["Getting started"] ?? "Getting started";
+    const encouragement = encouragementProp ?? crispMessages["Keep it up!"] ?? "Keep it up!";
+    const optionsLabel = useCrispMessage(optionsLabelProp, "Checklist options");
+    const minimizeLabel = useCrispMessage(minimizeLabelProp, "Minimize");
+    const progressLabel = 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) => (_jsxs(_Fragment, { children: [_jsxs("b", { children: [doneCount, "/", totalCount] }), " ", crispMessages["steps completed"] ?? "steps completed"] })));
+    const completedStepLabel = completedStepLabelProp ??
+        ((label) => `${String(label)} ${crispMessages["— completed"] ?? "— completed"}`);
     return (_jsxs("div", { className: onboardingRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-onboarding-head", children: [_jsx("span", { className: "crisp-onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "crisp-onboarding-sub", children: [progressText(done, total), encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _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) => (_jsx("span", { className: "crisp-onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "crisp-onboarding-steps", children: steps.map((s) => (_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: [_jsx("span", { className: "crisp-onboarding-step-icon", children: s.icon }), _jsx("span", { className: "crisp-onboarding-step-label", children: s.label }), _jsx("span", { className: "crisp-onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

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

@@ -1,2 +1,2 @@
-export { RecordPage, recordPageLabels, } from "./recordpage.js";
+export { RecordDetails, RecordPage, recordPageLabels, } from "./recordpage.js";
 export { recordpageRecipe } from "./recordpage.recipe.js";

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

@@ -8,7 +8,7 @@ import { Select } from "../../components/select/index.js";
 import { Spinner } from "../../components/spinner/index.js";
 import { Switch } from "../../components/switch/index.js";
 import { Tabs } from "../../components/tabs/index.js";
-import { isRtlElement, useCrispComponentDefaults } from "../../core/index.js";
+import { cx, isRtlElement, useCrispComponentDefaults } from "../../core/index.js";
 import { editableInputType, tagTone, useEditableField, } from "../recordstable/index.js";
 import { recordpageRecipe } from "./recordpage.recipe.js";
 function valueEmpty(v) {
@@ -87,7 +87,42 @@ export const recordPageLabels = {
     taggedCategories: (count) => (_jsxs(_Fragment, { children: ["Tagged ", _jsx("b", { children: count }), " categories"] })),
     recordCreated: (name) => (_jsxs(_Fragment, { children: [_jsx("b", { children: name }), " record was created"] })),
     noEmailsWith: (name) => _jsxs(_Fragment, { children: ["No emails logged with ", name, " yet."] }),
+    noFieldsMatch: (query) => _jsxs(_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 = useCrispComponentDefaults("recordPage");
+    return React.useMemo(() => ({
+        ...recordPageLabels,
+        ...providerLabels,
+        ...labels,
+        tabs: {
+            ...recordPageLabels.tabs,
+            ...providerLabels?.tabs,
+            ...labels?.tabs,
+        },
+        highlightLabels: {
+            ...recordPageLabels.highlightLabels,
+            ...providerLabels?.highlightLabels,
+            ...labels?.highlightLabels,
+        },
+        highlightEmpty: {
+            ...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
@@ -143,6 +178,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 _jsx(_Fragment, { children: col.render(v, row) });
     if (valueEmpty(v))
         return _jsx("span", { className: "crisp-recordpage-empty", children: labels.setAValue });
     // `editor: "select"` at rest (#457) -- checked ahead of `col.type` since
@@ -210,6 +255,147 @@ function TasksSection({ tasks, onAdd, onToggle, labels, }) {
 function EmptyCard({ icon, children, }) {
     return (_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).
+ */
+export function RecordDetails({ record, columns, sections, onEdit, labels, className, ...rest }) {
+    const t = useRecordPageLabels(labels);
+    const { editingKey, pendingKey, error, openEditing, closeEditing, commit } = 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 (_jsxs("div", { className: cx("crisp-recordpage-section", className), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_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("");
+                            }
+                        } })) : (_jsxs("button", { type: "button", className: "crisp-recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: [t.recordDetails, _jsx(ChevronDown, { className: "crisp-recordpage-chev", size: 12, strokeWidth: 2.5 })] })), _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 ? (_jsx(X, { size: 14, strokeWidth: 1.75 })) : (_jsx(Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
+                (totalShown > 0 ? (_jsxs(_Fragment, { children: [groups.map((g, i) => (_jsxs(React.Fragment, { children: [sections && g.title != null && (_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 = (_jsxs("span", { className: "crisp-recordpage-field-label", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, _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 (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", children: [_jsxs("span", { className: "crisp-recordpage-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-recordpage-edit-pending" }))] }), fieldError && (_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 (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", children: [_jsx(RecordPageSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commit(record.id, col.key, v), onCancel: closeEditing }), fieldError && (_jsx("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                    }
+                                    if (canEdit && editingKey === col.key) {
+                                        const value = record[col.key];
+                                        const editor = editableInputType(col.type);
+                                        return (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", children: [_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 && (_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));
+                                })] }, 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.
+                                const next = !showAllValues;
+                                setShowAllValues(next);
+                                setSearchOpen(next);
+                                if (!next)
+                                    setFieldQuery("");
+                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_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
@@ -218,36 +404,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.
  */
-export 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 } = 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 = useCrispComponentDefaults("recordPage");
-    const t = React.useMemo(() => ({
-        ...recordPageLabels,
-        ...providerLabels,
-        ...labels,
-        tabs: {
-            ...recordPageLabels.tabs,
-            ...providerLabels?.tabs,
-            ...labels?.tabs,
-        },
-        highlightLabels: {
-            ...recordPageLabels.highlightLabels,
-            ...providerLabels?.highlightLabels,
-            ...labels?.highlightLabels,
-        },
-        highlightEmpty: {
-            ...recordPageLabels.highlightEmpty,
-            ...providerLabels?.highlightEmpty,
-            ...labels?.highlightEmpty,
-        },
-    }), [labels, providerLabels]);
+export 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
@@ -259,11 +417,6 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     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);
@@ -300,17 +453,6 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
         ? 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.
@@ -328,7 +470,11 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
             : 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: Zap,
@@ -366,6 +512,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
             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: _jsx(LayoutGrid, { ...ti }) },
@@ -448,7 +595,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     const builtinPanel = (active) => {
         switch (active) {
             case "overview":
-                return (_jsxs("div", { className: "crisp-recordpage-panel", children: [_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: [_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 })] }));
+                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 });
             case "notes":
@@ -474,81 +621,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", children: [_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: [_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(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _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, shortcut: "\u232B", 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] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_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("");
-                                                    }
-                                                } })) : (_jsxs("button", { type: "button", className: "crisp-recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: [t.recordDetails, _jsx(ChevronDown, { className: "crisp-recordpage-chev", size: 12, strokeWidth: 2.5 })] })), _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 ? (_jsx(X, { size: 14, strokeWidth: 1.75 })) : (_jsx(Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
-                                        (shownFields.length > 0 ? (_jsxs(_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 = (_jsxs("span", { className: "crisp-recordpage-field-label", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, _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 (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", children: [_jsxs("span", { className: "crisp-recordpage-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-recordpage-edit-pending" }))] }), fieldError && (_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 (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", children: [_jsx(RecordPageSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commit(record.id, col.key, v), onCancel: closeEditing }), fieldError && (_jsx("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
-                                                    }
-                                                    if (canEdit && editingKey === col.key) {
-                                                        const value = record[col.key];
-                                                        const editor = editableInputType(col.type);
-                                                        return (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", children: [_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 && (_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));
-                                                }), 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.
-                                                        const next = !showAllValues;
-                                                        setShowAllValues(next);
-                                                        setSearchOpen(next);
-                                                        if (!next)
-                                                            setFieldQuery("");
-                                                    }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsxs("div", { className: "crisp-recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), _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": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_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: [_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(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _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, shortcut: "\u232B", 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] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _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": 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/esm/product/recordpage/recordpage.recipe.js

@@ -63,6 +63,11 @@ const config = defineRecipe({
     & .crisp-recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: ${c.size.chip}; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-recordpage-detailsearch:hover, & .crisp-recordpage-detailsearch[data-active] { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
     & .crisp-recordpage-noresults { padding: ${c.space["1.5"]} ${c.space["1"]}; font-size: ${c.text.md}; color: ${c.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: ${c.space["3"]}; }
     & .crisp-recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgMuted}; cursor: pointer; }
     & .crisp-recordpage-morevalues:hover { color: ${c.fgPrimary}; }
     & .crisp-recordpage-viewall { flex-basis: 100%; margin-top: ${c.space["0.5"]}; border: none; background: none; padding: 0; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.regular}; cursor: pointer; text-align: start; }