@crisp-ui-kit/crisp 0.53.3 → 0.53.5

package/dist/cjs/components/heatmapchart/heatmapchart.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeatmapChart = HeatmapChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const heatmapchart_recipe_1 = require("./heatmapchart.recipe");
+/**
+ * An NxM cell-matrix chart — GRC's own risk heatmap (impact x likelihood)
+ * is the first consumer. Severity/intensity mapping (`tone`, `ring`) is
+ * entirely the caller's own data, not a scale this component invents; see
+ * the recipe's own doc comment for why (and for its measurement — or lack
+ * of one — against Attio).
+ */
+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 }) {
+    const cols = data[0]?.length ?? 0;
+    const summary = ariaLabel ?? `Heatmap: ${data.length} x ${cols} grid`;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, heatmapchart_recipe_1.heatmapchartRecipe)({ className }), ...rest, role: "img", "aria-label": summary, children: empty ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-heatmapchart-empty", children: emptyLabel })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-heatmapchart-rowaxis", children: [(0, jsx_runtime_1.jsx)("span", { children: rowAxis.high }), rowAxis.title != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-heatmapchart-rowaxis-title", children: rowAxis.title })), (0, jsx_runtime_1.jsx)("span", { children: rowAxis.low })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-heatmapchart-body", children: [(0, jsx_runtime_1.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);
+                                const key = `${r}-${cc}`;
+                                const tone = cell.tone ?? "neutral";
+                                return clickable ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-heatmapchart-cell", "data-tone": tone, "data-ring": cell.ring ? "" : undefined, title: title, onClick: () => onCellClick?.(r, cc, cell), children: format(cell, r, cc) }, key)) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-heatmapchart-cell", "data-tone": tone, "data-ring": cell.ring ? "" : undefined, title: title, children: format(cell, r, cc) }, key));
+                            })) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-heatmapchart-colaxis", children: [(0, jsx_runtime_1.jsx)("span", { children: colAxis.low }), colAxis.title != null && (0, jsx_runtime_1.jsx)("span", { children: colAxis.title }), (0, jsx_runtime_1.jsx)("span", { children: colAxis.high })] })] })] })) }));
+}
+HeatmapChart.displayName = "HeatmapChart";

package/dist/cjs/components/heatmapchart/heatmapchart.recipe.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.heatmapchartRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+// An NxM cell-matrix chart, alongside BarChart/LineChart/DonutChart — GRC's
+// own risk heatmap (impact x likelihood) is the first consumer. No Attio
+// widget in the workspace this was checked against (Reports/Dashboards:
+// bar/line/number report tiles) has a matching matrix chart to measure a
+// pixel value from, so this is composed entirely from already-measured
+// crisp values: the same `color-mix` soft-tint recipe Badge's own `soft()`
+// helper and StatCard's delta pill already use, at the same 14-16%,
+// against the token contract's own success/warning/orange/danger roles.
+// A cell's text stays `fgPrimary` at every tone — not tone-matched — the
+// same "the background already carries the severity, tone-on-tone measures
+// illegible" reasoning GRC's own hand-built heatmap already recorded.
+const config = (0, core_1.defineRecipe)({
+    name: "heatmapchart",
+    base: `display: flex; gap: ${tokens_1.contract.space["2"]}; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: ${tokens_1.contract.space["1"]} 0; font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; text-transform: uppercase; letter-spacing: 0.02em; color: ${tokens_1.contract.fgNeutralSubtle}; }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: ${tokens_1.contract.space["1.5"]}; }
+
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: ${tokens_1.contract.radius.md}; border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.semibold}; font-variant-numeric: tabular-nums; color: ${tokens_1.contract.fgPrimary}; }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: ${soft(tokens_1.contract.bgSuccess, 16)}; }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: ${soft(tokens_1.contract.bgWarning, 16)}; }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: ${soft(tokens_1.contract.bgOrange, 18)}; }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: ${soft(tokens_1.contract.bgDanger, 16)}; }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px ${tokens_1.contract.bgDangerSolid}; }
+
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: ${tokens_1.contract.space["1.5"]}; padding: 0 ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; text-transform: uppercase; letter-spacing: 0.02em; color: ${tokens_1.contract.fgNeutralSubtle}; }
+
+    & .crisp-heatmapchart-empty { padding: ${tokens_1.contract.space["8"]} 0; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.heatmapchartRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/components/heatmapchart/index.js

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

package/dist/cjs/components/toast/toast.recipe.js

@@ -3,14 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.toastRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-// Toast notifications — a fixed bottom-right stack of cards on the measured
+// Toast notifications — a fixed TOP-right stack of cards on the measured
 // popover surface, each with a tone icon, title/description, optional action,
-// and a close button.
+// and a close button. Position, radius, padding, surface and shadow measured
+// live off Attio's own "Copied to clipboard!" toast (crisp#515): the stack
+// anchors top-right (not bottom-right), and the card shares Menu/Popover's
+// `bgPopover` surface + `elevation.floating` shadow (Lesson 31 — reference
+// the shared token, never a hand-typed near-duplicate).
 const config = (0, core_1.defineRecipe)({
     name: "toast",
     base: `display: contents; font-family: ${tokens_1.contract.font.sans};
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${tokens_1.contract.space["4"]}; bottom: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; width: 360px; max-width: calc(100vw - ${tokens_1.contract.space["8"]}); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${tokens_1.contract.space["4"]}; top: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; width: 360px; max-width: calc(100vw - ${tokens_1.contract.space["8"]}); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["2.5"]}; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: ${tokens_1.contract.bgBrandSolid}; }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: ${tokens_1.contract.bgSuccess}; }

package/dist/cjs/core/i18n.js

@@ -36,11 +36,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrispMessagesProvider = CrispMessagesProvider;
 exports.useCrispMessage = useCrispMessage;
 exports.useCrispMessages = useCrispMessages;
+exports.useCrispComponentDefaults = useCrispComponentDefaults;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const CrispMessagesContext = React.createContext({});
-function CrispMessagesProvider({ messages, children, }) {
-    return ((0, jsx_runtime_1.jsx)(CrispMessagesContext.Provider, { value: messages, children: children }));
+const CrispComponentDefaultsContext = React.createContext({});
+function CrispMessagesProvider({ messages, componentDefaults, children, }) {
+    return ((0, jsx_runtime_1.jsx)(CrispMessagesContext.Provider, { value: messages, children: (0, jsx_runtime_1.jsx)(CrispComponentDefaultsContext.Provider, { value: componentDefaults ?? {}, children: children }) }));
 }
 /**
  * Resolves one translatable string for a component: `explicit` is whatever
@@ -73,3 +75,16 @@ function useCrispMessage(explicit, englishDefault) {
 function useCrispMessages() {
     return React.useContext(CrispMessagesContext);
 }
+/**
+ * Reads one component's own whole-object defaults override, set via
+ * `CrispMessagesProvider`'s `componentDefaults` prop (see its own doc for
+ * why this exists separately from `useCrispMessage`). `T` is the
+ * component's own labels TYPE (e.g. `Partial<RecordPageLabels>`) — this
+ * hook itself only knows `name`, a plain string key; the caller supplies
+ * and trusts the real shape, the same way `useContext` always has for an
+ * untyped-at-the-provider value.
+ */
+function useCrispComponentDefaults(name) {
+    const all = React.useContext(CrispComponentDefaultsContext);
+    return all[name];
+}

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
+exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.useCrispComponentDefaults = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
 var caret_rect_1 = require("./caret-rect");
 Object.defineProperty(exports, "caretRectInField", { enumerable: true, get: function () { return caret_rect_1.caretRectInField; } });
 var cell_date_1 = require("./cell-date");
@@ -39,6 +39,7 @@ var form_value_1 = require("./form-value");
 Object.defineProperty(exports, "formValueStyle", { enumerable: true, get: function () { return form_value_1.formValueStyle; } });
 var i18n_1 = require("./i18n");
 Object.defineProperty(exports, "CrispMessagesProvider", { enumerable: true, get: function () { return i18n_1.CrispMessagesProvider; } });
+Object.defineProperty(exports, "useCrispComponentDefaults", { enumerable: true, get: function () { return i18n_1.useCrispComponentDefaults; } });
 Object.defineProperty(exports, "useCrispMessage", { enumerable: true, get: function () { return i18n_1.useCrispMessage; } });
 Object.defineProperty(exports, "useCrispMessages", { enumerable: true, get: function () { return i18n_1.useCrispMessages; } });
 var mention_1 = require("./mention");

package/dist/cjs/index.js

@@ -45,6 +45,7 @@ __exportStar(require("./components/fileupload"), exports);
 __exportStar(require("./components/filldoc"), exports);
 __exportStar(require("./components/fillsheet"), exports);
 __exportStar(require("./components/formfield"), exports);
+__exportStar(require("./components/heatmapchart"), exports);
 __exportStar(require("./components/input"), exports);
 __exportStar(require("./components/kbd"), exports);
 __exportStar(require("./components/linechart"), exports);

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

@@ -257,19 +257,34 @@ function EmptyCard({ icon, children, }) {
  */
 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, ...labels?.tabs },
+        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]);
+    }), [labels, providerLabels]);
     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

package/dist/cjs/product/recordstable/recordstable.js

@@ -495,12 +495,23 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
     const [filterConds, setFilterConds] = React.useState([]);
     const [filterQuery, setFilterQuery] = React.useState("");
     // one popover open at a time: "sort" | "filter" | "more" | `sum:<key>`
+    // crisp/#471: same "provider sits between the built-in default and this
+    // instance's own explicit labels prop" order as RecordPage's own — see
+    // its comment. Several entries here (`selectionAnnouncement`, `sortedBy`,
+    // `recordCount`, …) are formatter functions, which is why this goes
+    // through `useCrispComponentDefaults`, not `useCrispMessage`.
+    const providerLabels = (0, core_1.useCrispComponentDefaults)("recordsTable");
     const t = React.useMemo(() => ({
         ...exports.recordsTableLabels,
+        ...providerLabels,
         ...labels,
-        agg: { ...exports.recordsTableLabels.agg, ...labels?.agg },
-        op: { ...exports.recordsTableLabels.op, ...labels?.op },
-    }), [labels]);
+        agg: {
+            ...exports.recordsTableLabels.agg,
+            ...providerLabels?.agg,
+            ...labels?.agg,
+        },
+        op: { ...exports.recordsTableLabels.op, ...providerLabels?.op, ...labels?.op },
+    }), [labels, providerLabels]);
     const [openMenu, setOpenMenu] = React.useState(null);
     // the element that opened the current menu, so Esc/select can hand focus back
     const menuReturn = React.useRef(null);

package/dist/cjs/product/richtext/richtext.js

@@ -149,7 +149,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.
  */
-exports.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) {
+exports.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);
@@ -170,6 +170,19 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     // entirely", the same distinction `updateBar` already makes for the block
     // menu's search input below.
     const mentionPickerRef = React.useRef(null);
+    // Whether focus currently sits somewhere inside whatever
+    // `renderMentionPicker` returned (#514) — tracked through React's own
+    // onFocus/onBlur, not `mentionPickerRef.current.contains(activeElement)`.
+    // A picker built from crisp's own `Command` (the shape #372's own doc
+    // recommends) renders through a `Portal`, so its DOM parent is nowhere
+    // near `mentionPickerRef` even though it's still that ref's REACT child;
+    // `.contains()` sees a stranger the instant the picker's search input
+    // takes focus and updateMention closes the picker it was just asked to
+    // protect. React's synthetic focus/blur events bubble through the
+    // component tree a portal renders into, not the DOM tree it renders to
+    // (documented React behaviour), so a plain onFocus/onBlur pair on this
+    // same wrapper sees the portal's contents correctly.
+    const mentionPickerHasFocusRef = React.useRef(false);
     const syncEmpty = (el) => {
         if (el)
             el.toggleAttribute("data-empty", (el.textContent ?? "") === "");
@@ -291,6 +304,11 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     }, [readOnly, blockMenu, closeBlockMenu]);
     const closeMention = React.useCallback(() => {
         mentionRangeRef.current = null;
+        // Defensive, not load-bearing: the wrapper's onBlur already clears this
+        // when the picker's own focused element leaves the DOM on unmount, but
+        // resetting it directly here means a stale `true` can never survive
+        // past whatever actually closed the picker, blur-ordering included.
+        mentionPickerHasFocusRef.current = false;
         setMention(null);
     }, []);
     /**
@@ -302,16 +320,23 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
      * no trigger.
      *
      * Does NOT auto-close while focus sits inside the consumer's own picker
-     * (`mentionPickerRef`) — a picker with its own search field would
+     * (`mentionPickerHasFocusRef`) — a picker with its own search field would
      * otherwise close itself the instant that field took focus, since focus
      * moving there also moves the document selection out of `body`. This is
      * the same distinction `updateBar` already draws for the block menu's own
-     * search input, made while merging the two features together.
+     * search input, made while merging the two features together — except a
+     * consumer's picker, unlike the block menu's own inline search, is free
+     * to render through a Portal (crisp's own `Command`, the shape #372's own
+     * doc recommends building one from, does exactly that), so this reads a
+     * ref React's focus/blur bubbling keeps current instead of asking
+     * `mentionPickerRef`'s DOM node whether it contains `activeElement` (#514
+     * — a Portal's content is a DOM stranger to its React parent, so that
+     * check silently stopped protecting the one case it exists for).
      */
     const updateMention = React.useCallback(() => {
         if (readOnly)
             return;
-        if (mentionPickerRef.current?.contains(document.activeElement))
+        if (mentionPickerHasFocusRef.current)
             return;
         const body = bodyRef.current;
         const sel = window.getSelection();
@@ -525,12 +550,12 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
         ol: (0, jsx_runtime_1.jsx)(lucide_react_1.ListOrdered, { ...menuIc }),
         image: (0, jsx_runtime_1.jsx)(lucide_react_1.Image, { ...menuIc }),
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, richtext_recipe_1.richtextRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, richtext_recipe_1.richtextRecipe)({ className }), ...rest, children: [showTitle && ((0, jsx_runtime_1.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();
-                    } }), (0, jsx_runtime_1.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
+                    } })), (0, jsx_runtime_1.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);
@@ -564,7 +589,11 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
                         select: insertMention,
                         close: closeMention,
                     });
-                    return rendered == null ? null : ((0, jsx_runtime_1.jsx)("div", { ref: mentionPickerRef, style: { display: "contents" }, children: rendered }));
+                    return rendered == null ? null : ((0, jsx_runtime_1.jsx)("div", { ref: mentionPickerRef, style: { display: "contents" }, onFocus: () => {
+                            mentionPickerHasFocusRef.current = true;
+                        }, onBlur: () => {
+                            mentionPickerHasFocusRef.current = false;
+                        }, children: rendered }));
                 })()] }));
 });
 exports.RichTextEditor.displayName = "RichTextEditor";

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

@@ -6,13 +6,22 @@ const tokens_1 = require("../../tokens");
 // 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 = (0, core_1.defineRecipe)({
     name: "settingssection",
     base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: ${tokens_1.contract.text.xl}; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-settingssection-sub { margin-top: ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-settingssection-title { font-size: ${tokens_1.contract.text.xl}; line-height: 20px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.16px; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-settingssection-sub { margin-top: ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; margin-top: ${tokens_1.contract.space["3"]}; }`,
     variants: {},

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

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { heatmapchartRecipe } from "./heatmapchart.recipe.js";
+/**
+ * An NxM cell-matrix chart — GRC's own risk heatmap (impact x likelihood)
+ * is the first consumer. Severity/intensity mapping (`tone`, `ring`) is
+ * entirely the caller's own data, not a scale this component invents; see
+ * 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 }) {
+    const cols = data[0]?.length ?? 0;
+    const summary = ariaLabel ?? `Heatmap: ${data.length} x ${cols} 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);
+                                const key = `${r}-${cc}`;
+                                const tone = cell.tone ?? "neutral";
+                                return clickable ? (_jsx("button", { type: "button", className: "crisp-heatmapchart-cell", "data-tone": tone, "data-ring": cell.ring ? "" : undefined, title: title, onClick: () => onCellClick?.(r, cc, cell), children: format(cell, r, cc) }, key)) : (_jsx("div", { className: "crisp-heatmapchart-cell", "data-tone": tone, "data-ring": cell.ring ? "" : undefined, title: title, children: format(cell, r, cc) }, key));
+                            })) }), _jsxs("div", { className: "crisp-heatmapchart-colaxis", children: [_jsx("span", { children: colAxis.low }), colAxis.title != null && _jsx("span", { children: colAxis.title }), _jsx("span", { children: colAxis.high })] })] })] })) }));
+}
+HeatmapChart.displayName = "HeatmapChart";

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

@@ -0,0 +1,46 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+// An NxM cell-matrix chart, alongside BarChart/LineChart/DonutChart — GRC's
+// own risk heatmap (impact x likelihood) is the first consumer. No Attio
+// widget in the workspace this was checked against (Reports/Dashboards:
+// bar/line/number report tiles) has a matching matrix chart to measure a
+// pixel value from, so this is composed entirely from already-measured
+// crisp values: the same `color-mix` soft-tint recipe Badge's own `soft()`
+// helper and StatCard's delta pill already use, at the same 14-16%,
+// against the token contract's own success/warning/orange/danger roles.
+// A cell's text stays `fgPrimary` at every tone — not tone-matched — the
+// same "the background already carries the severity, tone-on-tone measures
+// illegible" reasoning GRC's own hand-built heatmap already recorded.
+const config = defineRecipe({
+    name: "heatmapchart",
+    base: `display: flex; gap: ${c.space["2"]}; box-sizing: border-box; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: ${c.space["1"]} 0; font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; text-transform: uppercase; letter-spacing: 0.02em; color: ${c.fgNeutralSubtle}; }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: ${c.space["1.5"]}; }
+
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: ${c.radius.md}; border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.semibold}; font-variant-numeric: tabular-nums; color: ${c.fgPrimary}; }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: ${c.bgRaised}; color: ${c.fgMuted}; }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: ${soft(c.bgSuccess, 16)}; }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: ${soft(c.bgWarning, 16)}; }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: ${soft(c.bgOrange, 18)}; }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: ${soft(c.bgDanger, 16)}; }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px ${c.bgDangerSolid}; }
+
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: ${c.space["1.5"]}; padding: 0 ${c.space["0.5"]}; font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; text-transform: uppercase; letter-spacing: 0.02em; color: ${c.fgNeutralSubtle}; }
+
+    & .crisp-heatmapchart-empty { padding: ${c.space["8"]} 0; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const heatmapchartRecipe = resolveRecipe(config);
+export default config;

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

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

package/dist/esm/components/toast/toast.recipe.js

@@ -1,13 +1,17 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
-// Toast notifications — a fixed bottom-right stack of cards on the measured
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// Toast notifications — a fixed TOP-right stack of cards on the measured
 // popover surface, each with a tone icon, title/description, optional action,
-// and a close button.
+// and a close button. Position, radius, padding, surface and shadow measured
+// live off Attio's own "Copied to clipboard!" toast (crisp#515): the stack
+// anchors top-right (not bottom-right), and the card shares Menu/Popover's
+// `bgPopover` surface + `elevation.floating` shadow (Lesson 31 — reference
+// the shared token, never a hand-typed near-duplicate).
 const config = defineRecipe({
     name: "toast",
     base: `display: contents; font-family: ${c.font.sans};
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${c.space["4"]}; bottom: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["2"]}; width: 360px; max-width: calc(100vw - ${c.space["8"]}); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["3"]}; border-radius: ${c.radius.xl}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${c.space["4"]}; top: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["2"]}; width: 360px; max-width: calc(100vw - ${c.space["8"]}); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["2.5"]}; border-radius: ${c.radius.md}; background: ${c.bgPopover}; box-shadow: ${e.floating}; opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${c.fgMuted}; }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: ${c.bgBrandSolid}; }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: ${c.bgSuccess}; }

package/dist/esm/core/i18n.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 const CrispMessagesContext = React.createContext({});
-export function CrispMessagesProvider({ messages, children, }) {
-    return (_jsx(CrispMessagesContext.Provider, { value: messages, children: children }));
+const CrispComponentDefaultsContext = React.createContext({});
+export function CrispMessagesProvider({ messages, componentDefaults, children, }) {
+    return (_jsx(CrispMessagesContext.Provider, { value: messages, children: _jsx(CrispComponentDefaultsContext.Provider, { value: componentDefaults ?? {}, children: children }) }));
 }
 /**
  * Resolves one translatable string for a component: `explicit` is whatever
@@ -35,3 +36,16 @@ export function useCrispMessage(explicit, englishDefault) {
 export function useCrispMessages() {
     return React.useContext(CrispMessagesContext);
 }
+/**
+ * Reads one component's own whole-object defaults override, set via
+ * `CrispMessagesProvider`'s `componentDefaults` prop (see its own doc for
+ * why this exists separately from `useCrispMessage`). `T` is the
+ * component's own labels TYPE (e.g. `Partial<RecordPageLabels>`) — this
+ * hook itself only knows `name`, a plain string key; the caller supplies
+ * and trusts the real shape, the same way `useContext` always has for an
+ * untyped-at-the-provider value.
+ */
+export function useCrispComponentDefaults(name) {
+    const all = React.useContext(CrispComponentDefaultsContext);
+    return all[name];
+}

package/dist/esm/core/index.js

@@ -7,7 +7,7 @@ export { isRtlElement } from "./direction.js";
 export { FloatingPortal } from "./floating-portal.js";
 export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
-export { CrispMessagesProvider, useCrispMessage, useCrispMessages, } from "./i18n.js";
+export { CrispMessagesProvider, useCrispComponentDefaults, useCrispMessage, useCrispMessages, } from "./i18n.js";
 export { matchMentionTrigger, } from "./mention.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";

package/dist/esm/index.js

@@ -29,6 +29,7 @@ export * from "./components/fileupload/index.js";
 export * from "./components/filldoc/index.js";
 export * from "./components/fillsheet/index.js";
 export * from "./components/formfield/index.js";
+export * from "./components/heatmapchart/index.js";
 export * from "./components/input/index.js";
 export * from "./components/kbd/index.js";
 export * from "./components/linechart/index.js";

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

@@ -8,7 +8,7 @@ import { Select } from "../../components/select/index.js";
 import { Spinner } from "../../components/spinner/index.js";
 import { Switch } from "../../components/switch/index.js";
 import { Tabs } from "../../components/tabs/index.js";
-import { isRtlElement } from "../../core/index.js";
+import { isRtlElement, useCrispComponentDefaults } from "../../core/index.js";
 import { editableInputType, tagTone, useEditableField, } from "../recordstable/index.js";
 import { recordpageRecipe } from "./recordpage.recipe.js";
 function valueEmpty(v) {
@@ -220,19 +220,34 @@ function EmptyCard({ icon, children, }) {
  */
 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, ...labels?.tabs },
+        tabs: {
+            ...recordPageLabels.tabs,
+            ...providerLabels?.tabs,
+            ...labels?.tabs,
+        },
         highlightLabels: {
             ...recordPageLabels.highlightLabels,
+            ...providerLabels?.highlightLabels,
             ...labels?.highlightLabels,
         },
         highlightEmpty: {
             ...recordPageLabels.highlightEmpty,
+            ...providerLabels?.highlightEmpty,
             ...labels?.highlightEmpty,
         },
-    }), [labels]);
+    }), [labels, providerLabels]);
     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

package/dist/esm/product/recordstable/recordstable.js

@@ -14,7 +14,7 @@ import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js"
 import { MultiSelect } from "../../components/multiselect/index.js";
 import { Select } from "../../components/select/index.js";
 import { Switch } from "../../components/switch/index.js";
-import { isInsideLaterFloatingLayer, isRtlElement, usePrefersReducedMotion, } from "../../core/index.js";
+import { isInsideLaterFloatingLayer, isRtlElement, useCrispComponentDefaults, usePrefersReducedMotion, } from "../../core/index.js";
 import { companyLogos } from "./company-logos.js";
 import { recordstableRecipe } from "./recordstable.recipe.js";
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -456,12 +456,23 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
     const [filterConds, setFilterConds] = React.useState([]);
     const [filterQuery, setFilterQuery] = React.useState("");
     // one popover open at a time: "sort" | "filter" | "more" | `sum:<key>`
+    // crisp/#471: same "provider sits between the built-in default and this
+    // instance's own explicit labels prop" order as RecordPage's own — see
+    // its comment. Several entries here (`selectionAnnouncement`, `sortedBy`,
+    // `recordCount`, …) are formatter functions, which is why this goes
+    // through `useCrispComponentDefaults`, not `useCrispMessage`.
+    const providerLabels = useCrispComponentDefaults("recordsTable");
     const t = React.useMemo(() => ({
         ...recordsTableLabels,
+        ...providerLabels,
         ...labels,
-        agg: { ...recordsTableLabels.agg, ...labels?.agg },
-        op: { ...recordsTableLabels.op, ...labels?.op },
-    }), [labels]);
+        agg: {
+            ...recordsTableLabels.agg,
+            ...providerLabels?.agg,
+            ...labels?.agg,
+        },
+        op: { ...recordsTableLabels.op, ...providerLabels?.op, ...labels?.op },
+    }), [labels, providerLabels]);
     const [openMenu, setOpenMenu] = React.useState(null);
     // the element that opened the current menu, so Esc/select can hand focus back
     const menuReturn = React.useRef(null);

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);
@@ -134,6 +134,19 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     // entirely", the same distinction `updateBar` already makes for the block
     // menu's search input below.
     const mentionPickerRef = React.useRef(null);
+    // Whether focus currently sits somewhere inside whatever
+    // `renderMentionPicker` returned (#514) — tracked through React's own
+    // onFocus/onBlur, not `mentionPickerRef.current.contains(activeElement)`.
+    // A picker built from crisp's own `Command` (the shape #372's own doc
+    // recommends) renders through a `Portal`, so its DOM parent is nowhere
+    // near `mentionPickerRef` even though it's still that ref's REACT child;
+    // `.contains()` sees a stranger the instant the picker's search input
+    // takes focus and updateMention closes the picker it was just asked to
+    // protect. React's synthetic focus/blur events bubble through the
+    // component tree a portal renders into, not the DOM tree it renders to
+    // (documented React behaviour), so a plain onFocus/onBlur pair on this
+    // same wrapper sees the portal's contents correctly.
+    const mentionPickerHasFocusRef = React.useRef(false);
     const syncEmpty = (el) => {
         if (el)
             el.toggleAttribute("data-empty", (el.textContent ?? "") === "");
@@ -255,6 +268,11 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     }, [readOnly, blockMenu, closeBlockMenu]);
     const closeMention = React.useCallback(() => {
         mentionRangeRef.current = null;
+        // Defensive, not load-bearing: the wrapper's onBlur already clears this
+        // when the picker's own focused element leaves the DOM on unmount, but
+        // resetting it directly here means a stale `true` can never survive
+        // past whatever actually closed the picker, blur-ordering included.
+        mentionPickerHasFocusRef.current = false;
         setMention(null);
     }, []);
     /**
@@ -266,16 +284,23 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
      * no trigger.
      *
      * Does NOT auto-close while focus sits inside the consumer's own picker
-     * (`mentionPickerRef`) — a picker with its own search field would
+     * (`mentionPickerHasFocusRef`) — a picker with its own search field would
      * otherwise close itself the instant that field took focus, since focus
      * moving there also moves the document selection out of `body`. This is
      * the same distinction `updateBar` already draws for the block menu's own
-     * search input, made while merging the two features together.
+     * search input, made while merging the two features together — except a
+     * consumer's picker, unlike the block menu's own inline search, is free
+     * to render through a Portal (crisp's own `Command`, the shape #372's own
+     * doc recommends building one from, does exactly that), so this reads a
+     * ref React's focus/blur bubbling keeps current instead of asking
+     * `mentionPickerRef`'s DOM node whether it contains `activeElement` (#514
+     * — a Portal's content is a DOM stranger to its React parent, so that
+     * check silently stopped protecting the one case it exists for).
      */
     const updateMention = React.useCallback(() => {
         if (readOnly)
             return;
-        if (mentionPickerRef.current?.contains(document.activeElement))
+        if (mentionPickerHasFocusRef.current)
             return;
         const body = bodyRef.current;
         const sel = window.getSelection();
@@ -489,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);
@@ -528,7 +553,11 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
                         select: insertMention,
                         close: closeMention,
                     });
-                    return rendered == null ? null : (_jsx("div", { ref: mentionPickerRef, style: { display: "contents" }, children: rendered }));
+                    return rendered == null ? null : (_jsx("div", { ref: mentionPickerRef, style: { display: "contents" }, onFocus: () => {
+                            mentionPickerHasFocusRef.current = true;
+                        }, onBlur: () => {
+                            mentionPickerHasFocusRef.current = false;
+                        }, children: rendered }));
                 })()] }));
 });
 RichTextEditor.displayName = "RichTextEditor";

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/heatmapchart.css

@@ -0,0 +1,27 @@
+.crisp-heatmapchart {
+  display: flex; gap: var(--crisp-space-2); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: var(--crisp-space-1) 0; font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: var(--crisp-space-1-5); }
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: var(--crisp-radius-md); border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); font-variant-numeric: tabular-nums; color: var(--crisp-fg-primary); }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 18%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger-solid); }
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: var(--crisp-space-1-5); padding: 0 var(--crisp-space-0-5); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-empty { padding: var(--crisp-space-8) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-heatmapchart, .crisp-heatmapchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/heatmapchart.d.ts

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

package/dist/heatmapchart.layered.css

@@ -0,0 +1,29 @@
+@layer crisp-components {
+.crisp-heatmapchart {
+  display: flex; gap: var(--crisp-space-2); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: var(--crisp-space-1) 0; font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: var(--crisp-space-1-5); }
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: var(--crisp-radius-md); border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); font-variant-numeric: tabular-nums; color: var(--crisp-fg-primary); }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 18%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger-solid); }
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: var(--crisp-space-1-5); padding: 0 var(--crisp-space-0-5); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-empty { padding: var(--crisp-space-8) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-heatmapchart, .crisp-heatmapchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/settingssection.css

@@ -2,8 +2,8 @@
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: var(--crisp-space-2); }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); }
-    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); }
+    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 20px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.16px; color: var(--crisp-fg-primary); }
+    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); }
 }

package/dist/settingssection.layered.css

@@ -3,8 +3,8 @@
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: var(--crisp-space-2); }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); }
-    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); }
+    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 20px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.16px; color: var(--crisp-fg-primary); }
+    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); }
 }

package/dist/styles.css

@@ -1028,6 +1028,34 @@
     & .crisp-formfield-error { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-bg-danger); }
 }
 
+.crisp-heatmapchart {
+  display: flex; gap: var(--crisp-space-2); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: var(--crisp-space-1) 0; font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: var(--crisp-space-1-5); }
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: var(--crisp-radius-md); border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); font-variant-numeric: tabular-nums; color: var(--crisp-fg-primary); }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 18%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger-solid); }
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: var(--crisp-space-1-5); padding: 0 var(--crisp-space-0-5); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-empty { padding: var(--crisp-space-8) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-heatmapchart, .crisp-heatmapchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .crisp-input {
   position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
     &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
@@ -1758,8 +1786,8 @@
 
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }
@@ -2646,8 +2674,8 @@
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: var(--crisp-space-2); }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); }
-    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); }
+    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 20px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.16px; color: var(--crisp-fg-primary); }
+    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); }
 }

package/dist/styles.layered.css

@@ -1029,6 +1029,34 @@
     & .crisp-formfield-error { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-bg-danger); }
 }
 
+.crisp-heatmapchart {
+  display: flex; gap: var(--crisp-space-2); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: var(--crisp-space-1) 0; font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: var(--crisp-space-1-5); }
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: var(--crisp-radius-md); border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); font-variant-numeric: tabular-nums; color: var(--crisp-fg-primary); }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 18%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger-solid); }
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: var(--crisp-space-1-5); padding: 0 var(--crisp-space-0-5); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-empty { padding: var(--crisp-space-8) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-heatmapchart, .crisp-heatmapchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .crisp-input {
   position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
     &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
@@ -1759,8 +1787,8 @@
 
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }
@@ -2647,8 +2675,8 @@
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: var(--crisp-space-2); }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); }
-    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); }
+    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 20px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.16px; color: var(--crisp-fg-primary); }
+    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); }
 }

package/dist/toast.css

@@ -1,7 +1,7 @@
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }

package/dist/toast.layered.css

@@ -1,8 +1,8 @@
 @layer crisp-components {
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }

package/dist/types/components/heatmapchart/heatmapchart.d.ts

@@ -0,0 +1,51 @@
+import type * as React from "react";
+export type HeatmapCell = {
+    /** The raw value a consumer's own severity/intensity scale maps from. */
+    value: number;
+    /** Cell background. "neutral" (the default) is a plain muted tint —
+     *  typically used for a value of 0. */
+    tone?: "neutral" | "success" | "warning" | "orange" | "danger";
+    /** Draws an inset danger ring around the cell (e.g. "over the appetite
+     *  threshold"), independent of — and layered on top of — `tone`. */
+    ring?: boolean;
+};
+/** An axis's own end labels + an optional rotated (row) or inline (column)
+ *  title between them — a 5x5 heatmap reads its axis by its two extremes
+ *  and what they mean, not a tick per row/column. */
+export type HeatmapAxis = {
+    low: React.ReactNode;
+    high: React.ReactNode;
+    title?: React.ReactNode;
+};
+export type HeatmapChartProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onClick"> & {
+    /** `data[row][col]`, row 0 at the top (the axis's `high` end). */
+    data: HeatmapCell[][];
+    rowAxis: HeatmapAxis;
+    colAxis: HeatmapAxis;
+    /** Cell display text — default `cell.value || ""` (a 0 renders blank, the
+     *  same "an empty cell says nothing happened here" reading GRC's own
+     *  heatmap already used). */
+    format?: (cell: HeatmapCell, row: number, col: number) => React.ReactNode;
+    /** Hover/focus tooltip text for a cell. */
+    cellTitle?: (cell: HeatmapCell, row: number, col: number) => string;
+    /** Only cells this returns true for become a real `<button>` — a cell
+     *  with nothing behind it stays a plain, non-interactive `<div>`. */
+    onCellClick?: (row: number, col: number, cell: HeatmapCell) => void;
+    isCellClickable?: (cell: HeatmapCell, row: number, col: number) => boolean;
+    /** Renders the empty-state message instead of the grid. */
+    empty?: boolean;
+    emptyLabel?: React.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * An NxM cell-matrix chart — GRC's own risk heatmap (impact x likelihood)
+ * is the first consumer. Severity/intensity mapping (`tone`, `ring`) is
+ * entirely the caller's own data, not a scale this component invents; see
+ * the recipe's own doc comment for why (and for its measurement — or lack
+ * of one — against Attio).
+ */
+export declare function HeatmapChart({ data, rowAxis, colAxis, format, cellTitle, onCellClick, isCellClickable, empty, emptyLabel, "aria-label": ariaLabel, className, ...rest }: HeatmapChartProps): React.JSX.Element;
+export declare namespace HeatmapChart {
+    var displayName: string;
+}

package/dist/types/components/heatmapchart/heatmapchart.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const heatmapchartRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/components/heatmapchart/index.d.ts

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

package/dist/types/core/i18n.d.ts

@@ -28,8 +28,27 @@ import * as React from "react";
  * before this existed.
  */
 export type CrispMessages = Record<string, string>;
-export declare function CrispMessagesProvider({ messages, children, }: {
+/**
+ * A handful of product components (`RecordPage`, `RecordsTable`) already
+ * take their own translatable text as one big `labels` object rather than a
+ * prop per string — and several of ITS entries are formatter FUNCTIONS
+ * (`domainSetTo(value)`, `sortedBy(first, extra)`), not plain strings, since
+ * word order and pluralisation differ too much across languages for a
+ * template (the same reason `TableToolbar.sortTriggerLabel` is a function).
+ * `CrispMessages` can't hold those — it's `Record<string,string>` — so those
+ * two components get their own whole-object slot instead of a per-string
+ * swap through `messages`. `componentDefaults` is deliberately untyped here
+ * (`Record<string, unknown>`, cast back to the real shape by
+ * `useCrispComponentDefaults<T>` at the CALL site): `core/` sits underneath
+ * `product/`, so it cannot import `RecordPageLabels`/`RecordsTableLabels`
+ * without a circular dependency. Keyed by the component's own name
+ * ("recordPage", "recordsTable") — a small, closed set, not a general
+ * registry, since only these two currently need it.
+ */
+export type CrispComponentDefaults = Record<string, unknown>;
+export declare function CrispMessagesProvider({ messages, componentDefaults, children, }: {
     messages: CrispMessages;
+    componentDefaults?: CrispComponentDefaults;
     children?: React.ReactNode;
 }): React.ReactElement;
 /**
@@ -56,3 +75,13 @@ export declare function useCrispMessage(explicit: string | undefined, englishDef
  * per fragment, same fallback order, no hook-in-a-loop.
  */
 export declare function useCrispMessages(): CrispMessages;
+/**
+ * Reads one component's own whole-object defaults override, set via
+ * `CrispMessagesProvider`'s `componentDefaults` prop (see its own doc for
+ * why this exists separately from `useCrispMessage`). `T` is the
+ * component's own labels TYPE (e.g. `Partial<RecordPageLabels>`) — this
+ * hook itself only knows `name`, a plain string key; the caller supplies
+ * and trusts the real shape, the same way `useContext` always has for an
+ * untyped-at-the-provider value.
+ */
+export declare function useCrispComponentDefaults<T>(name: string): T | undefined;

package/dist/types/core/index.d.ts

@@ -7,7 +7,7 @@ export { isRtlElement } from "./direction";
 export { FloatingPortal } from "./floating-portal";
 export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
 export { formValueStyle } from "./form-value";
-export { type CrispMessages, CrispMessagesProvider, useCrispMessage, useCrispMessages, } from "./i18n";
+export { type CrispComponentDefaults, type CrispMessages, CrispMessagesProvider, useCrispComponentDefaults, useCrispMessage, useCrispMessages, } from "./i18n";
 export { type MentionAnchor, type MentionMatch, matchMentionTrigger, } from "./mention";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";

package/dist/types/index.d.ts

@@ -25,6 +25,7 @@ export * from "./components/fileupload";
 export * from "./components/filldoc";
 export * from "./components/fillsheet";
 export * from "./components/formfield";
+export * from "./components/heatmapchart";
 export * from "./components/input";
 export * from "./components/kbd";
 export * from "./components/linechart";

package/dist/types/product/richtext/richtext.d.ts

@@ -93,6 +93,16 @@ export type RichTextEditorProps = Omit<React.ComponentPropsWithoutRef<"div">, "c
      * headings/lists/marks all survive into it. No toolbar renders in this
      * mode. */
     readOnly?: boolean;
+    /**
+     * Renders the title field at all (default `true`, matching Attio's own
+     * preview — see `readOnly` above). `false` omits it from the DOM
+     * entirely, not just visually: for a consumer whose own layout already
+     * shows a note's title elsewhere (a list row's own heading, a record's
+     * collapsed-note summary), rendering it a second time here would
+     * duplicate it rather than match anything Attio does. `onChange`'s
+     * `title` is always `""` with this off; `defaultTitle` is ignored.
+     */
+    showTitle?: boolean;
     className?: string;
 };
 /**
@@ -187,5 +197,15 @@ export declare const RichTextEditor: React.ForwardRefExoticComponent<Omit<Omit<R
      * headings/lists/marks all survive into it. No toolbar renders in this
      * mode. */
     readOnly?: boolean;
+    /**
+     * Renders the title field at all (default `true`, matching Attio's own
+     * preview — see `readOnly` above). `false` omits it from the DOM
+     * entirely, not just visually: for a consumer whose own layout already
+     * shows a note's title elsewhere (a list row's own heading, a record's
+     * collapsed-note summary), rendering it a second time here would
+     * duplicate it rather than match anything Attio does. `onChange`'s
+     * `title` is always `""` with this off; `defaultTitle` is ignored.
+     */
+    showTitle?: boolean;
     className?: string;
 } & React.RefAttributes<RichTextEditorHandle>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.53.3",
+  "version": "0.53.5",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -168,6 +168,11 @@
       "import": "./dist/esm/components/formfield/index.js",
       "require": "./dist/cjs/components/formfield/index.js"
     },
+    "./heatmapchart": {
+      "types": "./dist/types/components/heatmapchart/index.d.ts",
+      "import": "./dist/esm/components/heatmapchart/index.js",
+      "require": "./dist/cjs/components/heatmapchart/index.js"
+    },
     "./input": {
       "types": "./dist/types/components/input/index.d.ts",
       "import": "./dist/esm/components/input/index.js",