@crisp-ui-kit/crisp 0.53.5 → 0.54.0

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; }

package/dist/cjs/product/tasklist/tasklist.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TaskList = TaskList;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("../../core");
 const tasklist_recipe_1 = require("./tasklist.recipe");
 function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tasklist-row", "data-done": task.done ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "crisp-tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tasklist-title", children: task.title }), (task.due != null || task.meta != null) && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tasklist-meta", children: [task.due != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
@@ -11,9 +12,15 @@ function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
  * count, then rows of a round complete-checkbox + title + trailing meta.
  * Completed rows strike through; overdue dates go red.
  */
-function TaskList({ tasks, groups, onToggle, emptyLabel = "No tasks", className, completeLabel = "Mark complete", incompleteLabel = "Mark incomplete", ...rest }) {
+function TaskList({ tasks, groups, onToggle, emptyLabel: emptyLabelProp, className, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, ...rest }) {
     const resolved = groups ?? (tasks?.length ? [{ label: null, tasks }] : []);
     const total = resolved.reduce((s, g) => s + g.tasks.length, 0);
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No tasks"] ?? "No tasks";
+    const completeLabel = (0, core_1.useCrispMessage)(completeLabelProp, "Mark complete");
+    const incompleteLabel = (0, core_1.useCrispMessage)(incompleteLabelProp, "Mark incomplete");
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, tasklist_recipe_1.tasklistRecipe)({ className }), ...rest, children: total === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tasklist-empty", children: emptyLabel })) : (resolved.map((g, gi) => ((0, jsx_runtime_1.jsxs)("div", { children: [g.label != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tasklist-group", children: [g.label, (0, jsx_runtime_1.jsx)("span", { className: "crisp-tasklist-group-count", children: g.tasks.length })] })), g.tasks.map((t) => ((0, jsx_runtime_1.jsx)(Row, { task: t, onToggle: onToggle, completeLabel: completeLabel, incompleteLabel: incompleteLabel }, t.id)))] }, gi)))) }));
 }
 TaskList.displayName = "TaskList";

package/dist/esm/components/bulkbar/bulkbar.js

@@ -1,13 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import * as React from "react";
+import { useCrispMessage } from "../../core/index.js";
 import { bulkbarRecipe } from "./bulkbar.recipe.js";
 /**
  * A floating bulk-action bar. Rises from the bottom-centre of its nearest
  * positioned ancestor when a selection is active; render it conditionally
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from a records table.
  */
-export function BulkBar({ count, onClear, countLabel = "Selected", countText = (count, label) => (_jsxs(_Fragment, { children: [count, " ", label] })), children, className, clearLabel = "Clear selection", ...rest }) {
+export function BulkBar({ count, onClear, countLabel: countLabelProp, countText = (count, label) => (_jsxs(_Fragment, { children: [count, " ", label] })), children, className, clearLabel: clearLabelProp, ...rest }) {
+    // crisp/#471: same resolution order as every other component's own.
+    const countLabel = useCrispMessage(countLabelProp, "Selected");
+    const clearLabel = useCrispMessage(clearLabelProp, "Clear selection");
     return (_jsx("div", { className: bulkbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-bulkbar-bar", children: [count != null && (_jsxs("button", { type: "button", className: "crisp-bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), _jsx("span", { className: "crisp-bulkbar-clearlabel", children: clearLabel }), _jsx(X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
 }
 BulkBar.displayName = "BulkBar";

package/dist/esm/components/fileupload/fileupload.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFileUpload, } from "@seed-design/react-file-upload";
 import { X } from "lucide-react";
 import * as React from "react";
-import { useFocusAfterRemoval } from "../../core/index.js";
+import { useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
 import { fileuploadRecipe } from "./fileupload.recipe.js";
 export const fileUploadLabels = {
     // Matches the copy on the record Files pane.
@@ -56,10 +56,26 @@ export function FileUpload({ className, labels, "aria-label": ariaLabel, id, acc
         onAcceptedFileEntriesChange,
     };
     const [rejections, setRejections] = React.useState([]);
+    // crisp/#471: same resolution order as every other component's own —
+    // explicit `labels` entry wins, then a CrispMessagesProvider's
+    // translation of the built-in English default, then that default itself.
+    const title = useCrispMessage(labels?.title, fileUploadLabels.title);
+    const hint = useCrispMessage(labels?.hint, fileUploadLabels.hint);
+    const remove = useCrispMessage(labels?.remove, fileUploadLabels.remove);
+    const crispMessages = useCrispMessages();
     const t = {
-        ...fileUploadLabels,
-        ...labels,
-        errors: { ...fileUploadLabels.errors, ...labels?.errors },
+        title,
+        hint,
+        remove,
+        errors: Object.fromEntries(Object.keys(fileUploadLabels.errors).map((code) => {
+            const englishDefault = fileUploadLabels.errors[code];
+            return [
+                code,
+                labels?.errors?.[code] ??
+                    crispMessages[englishDefault] ??
+                    englishDefault,
+            ];
+        })),
     };
     const api = useFileUpload({
         ...props,

package/dist/esm/components/formfield/formfield.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useCrispMessage } from "../../core/index.js";
 import { formfieldRecipe } from "./formfield.recipe.js";
 /**
  * Tell the control what the field knows about it.
@@ -60,12 +61,18 @@ function useFieldWiring({ htmlFor, messageId, invalid, required, }) {
 export function FormField({ label, htmlFor, required, optional, description, error, children, className, ...rest }) {
     const descId = React.useId();
     const hasMsg = error != null || description != null;
+    // crisp/#471: `optional` doubles as a boolean flag and a ReactNode
+    // override — passing any node instead of `true` already renders it
+    // verbatim below, with no lookup needed. `true` reads a
+    // CrispMessagesProvider's translation of the built-in default text, same
+    // resolution order as every other component's own.
+    const optionalDefault = useCrispMessage(undefined, "(optional)");
     useFieldWiring({
         htmlFor,
         messageId: hasMsg ? descId : undefined,
         invalid: error != null,
         required: !!required,
     });
-    return (_jsxs("div", { className: formfieldRecipe({ className }), ...rest, children: [_jsxs("label", { className: "crisp-formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "crisp-formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "crisp-formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? (_jsx("span", { className: "crisp-formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "crisp-formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
+    return (_jsxs("div", { className: formfieldRecipe({ className }), ...rest, children: [_jsxs("label", { className: "crisp-formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "crisp-formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "crisp-formfield-optional", children: optional === true ? optionalDefault : optional }))] }), children, error != null ? (_jsx("span", { className: "crisp-formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "crisp-formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
 }
 FormField.displayName = "FormField";

package/dist/esm/components/heatmapchart/heatmapchart.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCrispMessages } from "../../core/index.js";
 import { heatmapchartRecipe } from "./heatmapchart.recipe.js";
 /**
  * An NxM cell-matrix chart — GRC's own risk heatmap (impact x likelihood)
@@ -7,9 +8,20 @@ import { heatmapchartRecipe } from "./heatmapchart.recipe.js";
  * the recipe's own doc comment for why (and for its measurement — or lack
  * of one — against Attio).
  */
-export function HeatmapChart({ data, rowAxis, colAxis, format = (cell) => (cell.value ? cell.value : ""), cellTitle, onCellClick, isCellClickable = (cell) => cell.value > 0, empty, emptyLabel = "Nothing to plot yet.", "aria-label": ariaLabel, className, ...rest }) {
+export function HeatmapChart({ data, rowAxis, colAxis, format = (cell) => (cell.value ? cell.value : ""), cellTitle, onCellClick, isCellClickable = (cell) => cell.value > 0, empty, emptyLabel: emptyLabelProp, "aria-label": ariaLabel, className, ...rest }) {
     const cols = data[0]?.length ?? 0;
-    const summary = ariaLabel ?? `Heatmap: ${data.length} x ${cols} grid`;
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only. The
+    // default `aria-label` is a sentence built from two static fragments
+    // around live data (row/column counts, not translatable), so each
+    // fragment gets its own lookup — same as TableToolbar's "Sorted by"
+    // (crisp/#217).
+    const crispMessages = useCrispMessages();
+    const emptyLabel = emptyLabelProp ??
+        crispMessages["Nothing to plot yet."] ??
+        "Nothing to plot yet.";
+    const summary = ariaLabel ??
+        `${crispMessages.Heatmap ?? "Heatmap"}: ${data.length} ${crispMessages.x ?? "x"} ${cols} ${crispMessages.grid ?? "grid"}`;
     return (_jsx("div", { className: heatmapchartRecipe({ className }), ...rest, role: "img", "aria-label": summary, children: empty ? (_jsx("div", { className: "crisp-heatmapchart-empty", children: emptyLabel })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "crisp-heatmapchart-rowaxis", children: [_jsx("span", { children: rowAxis.high }), rowAxis.title != null && (_jsx("span", { className: "crisp-heatmapchart-rowaxis-title", children: rowAxis.title })), _jsx("span", { children: rowAxis.low })] }), _jsxs("div", { className: "crisp-heatmapchart-body", children: [_jsx("div", { className: "crisp-heatmapchart-grid", style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: data.map((row, r) => row.map((cell, cc) => {
                                 const clickable = onCellClick != null && isCellClickable(cell, r, cc);
                                 const title = cellTitle?.(cell, r, cc);

package/dist/esm/components/skiplink/index.js

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