@crisp-ui-kit/crisp 0.53.4 → 0.54.0

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

package/dist/esm/product/richtext/richtext.js

@@ -113,7 +113,7 @@ const exec = (cmd, value) => document.execCommand(cmd, false, value);
  * reach the identical menu, sitting at the end of the body's last line) —
  * only the two entry points #426 asked for.
  */
-export const RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", imagePromptLabel = "Image URL", textColorLabel = "Text", highlightColorLabel = "Highlight", clearColorLabel = "Default", blockMenuLabel = "Body", blockMenuSearchPlaceholder = "Search items…", blockMenuEmptyLabel = "No matching blocks", mentionTrigger = "@", renderMentionPicker, readOnly = false, ...rest }, ref) {
+export const RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", imagePromptLabel = "Image URL", textColorLabel = "Text", highlightColorLabel = "Highlight", clearColorLabel = "Default", blockMenuLabel = "Body", blockMenuSearchPlaceholder = "Search items…", blockMenuEmptyLabel = "No matching blocks", mentionTrigger = "@", renderMentionPicker, readOnly = false, showTitle = true, ...rest }, ref) {
     const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [bar, setBar] = React.useState(null);
@@ -514,12 +514,12 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
         ol: _jsx(ListOrdered, { ...menuIc }),
         image: _jsx(ImageIcon, { ...menuIc }),
     };
-    return (_jsxs("div", { className: richtextRecipe({ className }), ...rest, children: [_jsx("div", { ref: titleRef, className: "crisp-rte-title", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-label": titleLabel, "aria-readonly": readOnly || undefined, "data-placeholder": titlePlaceholder, onInput: readOnly
+    return (_jsxs("div", { className: richtextRecipe({ className }), ...rest, children: [showTitle && (_jsx("div", { ref: titleRef, className: "crisp-rte-title", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-label": titleLabel, "aria-readonly": readOnly || undefined, "data-placeholder": titlePlaceholder, onInput: readOnly
                     ? undefined
                     : () => {
                         syncEmpty(titleRef.current);
                         emit();
-                    } }), _jsx("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-multiline": "true", "aria-label": bodyLabel, "aria-readonly": readOnly || undefined, "data-placeholder": placeholder, onInput: readOnly
+                    } })), _jsx("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-multiline": "true", "aria-label": bodyLabel, "aria-readonly": readOnly || undefined, "data-placeholder": placeholder, onInput: readOnly
                     ? undefined
                     : () => {
                         syncEmpty(bodyRef.current);

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

@@ -3,13 +3,22 @@ import { contract as c } from "../../tokens/index.js";
 // A settings section — measured from Settings pages: a 16px/600 title
 // with an optional subtitle, then a stack of rows (form fields, toggles…). Rows
 // gap evenly; an optional trailing action sits on the title row.
+//
+// Title line-height/letter-spacing and subtitle font-size/line-height
+// re-measured live at app.attio.com/<workspace>/settings/account against a
+// subsection heading ("Time preferences") — crisp#522. The subtitle's own
+// colour (measured `rgba(0,0,0,0.63)`, a black-alpha value) is left as
+// `fgMuted` pending a dark-mode measurement: a raw alpha-black has no
+// existing token match and would need its own light/dark pair to stay
+// legible in dark mode (Lesson: theme-constant vs theme-flipping colours
+// must each be independently verified).
 const config = defineRecipe({
     name: "settingssection",
     base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: ${c.space["2"]}; }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: ${c.text.xl}; line-height: 24px; font-weight: ${c.weight.semibold}; letter-spacing: -0.2px; color: ${c.fgPrimary}; }
-    & .crisp-settingssection-sub { margin-top: ${c.space["0.5"]}; font-size: ${c.text.md}; line-height: 18px; color: ${c.fgMuted}; }
+    & .crisp-settingssection-title { font-size: ${c.text.xl}; line-height: 20px; font-weight: ${c.weight.semibold}; letter-spacing: -0.16px; color: ${c.fgPrimary}; }
+    & .crisp-settingssection-sub { margin-top: ${c.space["0.5"]}; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgMuted}; }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: ${c.space["4"]}; margin-top: ${c.space["3"]}; }`,
     variants: {},

package/dist/esm/product/tasklist/tasklist.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { tasklistRecipe } from "./tasklist.recipe.js";
 function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
     return (_jsxs("div", { className: "crisp-tasklist-row", "data-done": task.done ? "" : undefined, children: [_jsx("input", { type: "checkbox", className: "crisp-tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), _jsx("span", { className: "crisp-tasklist-title", children: task.title }), (task.due != null || task.meta != null) && (_jsxs("span", { className: "crisp-tasklist-meta", children: [task.due != null && (_jsx("span", { className: "crisp-tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
@@ -8,9 +9,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.
  */
-export function TaskList({ tasks, groups, onToggle, emptyLabel = "No tasks", className, completeLabel = "Mark complete", incompleteLabel = "Mark incomplete", ...rest }) {
+export 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 = useCrispMessages();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No tasks"] ?? "No tasks";
+    const completeLabel = useCrispMessage(completeLabelProp, "Mark complete");
+    const incompleteLabel = useCrispMessage(incompleteLabelProp, "Mark incomplete");
     return (_jsx("div", { className: tasklistRecipe({ className }), ...rest, children: total === 0 ? (_jsx("div", { className: "crisp-tasklist-empty", children: emptyLabel })) : (resolved.map((g, gi) => (_jsxs("div", { children: [g.label != null && (_jsxs("div", { className: "crisp-tasklist-group", children: [g.label, _jsx("span", { className: "crisp-tasklist-group-count", children: g.tasks.length })] })), g.tasks.map((t) => (_jsx(Row, { task: t, onToggle: onToggle, completeLabel: completeLabel, incompleteLabel: incompleteLabel }, t.id)))] }, gi)))) }));
 }
 TaskList.displayName = "TaskList";

package/dist/headerbar.css

@@ -0,0 +1,7 @@
+.crisp-headerbar {
+  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: var(--crisp-size-header); flex-shrink: 0; padding: 0 var(--crisp-space-3); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-bordered] { border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-headerbar-leading { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; min-width: 0; }
+    & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-2); overflow: hidden; }
+    & .crisp-headerbar-trailing { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; }
+}

package/dist/headerbar.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface HeaderbarVariants {
+
+}
+
+export declare const headerbarRecipe: RecipeFn<{  }>;

package/dist/headerbar.layered.css

@@ -0,0 +1,9 @@
+@layer crisp-components {
+.crisp-headerbar {
+  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: var(--crisp-size-header); flex-shrink: 0; padding: 0 var(--crisp-space-3); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-bordered] { border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-headerbar-leading { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; min-width: 0; }
+    & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-2); overflow: hidden; }
+    & .crisp-headerbar-trailing { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; }
+}
+}