@crisp-ui-kit/crisp 0.53.2 → 0.53.4

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -36,12 +36,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumb = Breadcrumb;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const breadcrumb_recipe_1 = require("./breadcrumb.recipe");
 /**
  * A breadcrumb trail — measured from a record-page nav. The last item is
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
-function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
+function Breadcrumb({ items, separator, "aria-label": ariaLabelProp, className, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default, or that
+    // default itself with no provider — unchanged from before this existed.
+    const ariaLabel = (0, core_1.useCrispMessage)(ariaLabelProp, "Breadcrumb");
     // Live-measured (app.attio.com/<ws>/home, /companies,
     // /company/<id>/overview): a plain rounded divider, not a chevron -- a
     // symmetric shape needs no RTL mirroring, unlike the ChevronRight this

package/dist/cjs/components/columncalc/columncalc.js

@@ -40,6 +40,7 @@ exports.ColumnCalc = ColumnCalc;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const menu_1 = require("../menu");
 const columncalc_recipe_1 = require("./columncalc.recipe");
 /** The four calcs offered on every column, in their order. */
@@ -117,10 +118,18 @@ function computeCalc(values, op) {
 const defaultFormat = (n, op) => op === "percentEmpty" || op === "percentFilled"
     ? `${Math.round(n)}%`
     : n.toLocaleString(undefined, { maximumFractionDigits: 2 });
-function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel = "Add calculation", sectionLabel = "Aggregations", format = defaultFormat, align, opLabels, className, ...rest }) {
-    // a partial override, so a consumer can translate one op without
-    // restating all nine
-    const labelFor = (o) => opLabels?.[o] ?? exports.CALC_LABEL[o];
+function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel: addLabelProp, sectionLabel: sectionLabelProp, format = defaultFormat, align, opLabels, className, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default, or that
+    // default itself with no provider — unchanged from before this existed.
+    const addLabel = (0, core_1.useCrispMessage)(addLabelProp, "Add calculation");
+    const sectionLabel = (0, core_1.useCrispMessage)(sectionLabelProp, "Aggregations");
+    const crispMessages = (0, core_1.useCrispMessages)();
+    // opLabels (a per-op partial override) wins, then the provider's own
+    // translation of CALC_LABEL's English default, then that default itself —
+    // a consumer can translate one op via opLabels without restating all
+    // nine, AND get the rest from a provider with no per-instance prop at all.
+    const labelFor = (o) => opLabels?.[o] ?? crispMessages[exports.CALC_LABEL[o]] ?? exports.CALC_LABEL[o];
     const [internal, setInternal] = React.useState(defaultOp);
     const op = opProp ?? internal;
     const setOp = (next) => {

package/dist/cjs/components/composewindow/composewindow.js

@@ -93,7 +93,11 @@ function useComposeWindowInstanceId() {
  * measured screenshot. `trapFocus` follows the same call — a picture-in-
  * picture window, not a modal, so Tab is not caught inside it.
  */
-function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width = 968, "aria-label": ariaLabel, minimizeLabel = "Minimize", pinLabel = "Pin to screen", closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
+function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width = 968, "aria-label": ariaLabel, minimizeLabel: minimizeLabelProp, pinLabel: pinLabelProp, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const minimizeLabel = (0, core_1.useCrispMessage)(minimizeLabelProp, "Minimize");
+    const pinLabel = (0, core_1.useCrispMessage)(pinLabelProp, "Pin to screen");
+    const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
     const id = useComposeWindowInstanceId();
     const [internalMinimized, setInternalMinimized] = React.useState(defaultMinimized ?? false);
     const minimized = minimizedProp ?? internalMinimized;

package/dist/cjs/components/contextmenu/contextmenu.js

@@ -45,7 +45,9 @@ const contextmenu_recipe_1 = require("./contextmenu.recipe");
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
+function ContextMenu({ children, items, menuLabel: menuLabelProp, className, asChild = false, }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const menuLabel = (0, core_1.useCrispMessage)(menuLabelProp, "Context menu");
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);

package/dist/cjs/components/filldoc/filldoc.js

@@ -72,7 +72,12 @@ const emptyTable = () => ({
  * page covered in handles and grips stops looking like a page, which is the
  * whole thing this is for.
  */
-exports.FillDoc = React.forwardRef(function FillDoc({ blocks, onBlocksChange, mode = "edit", page = "a4", label, addTextLabel = "Text", addHeadingLabel = "Heading", addTableLabel = "Table", removeLabel = "Remove", className, style, ...rest }, forwardedRef) {
+exports.FillDoc = React.forwardRef(function FillDoc({ blocks, onBlocksChange, mode = "edit", page = "a4", label, addTextLabel: addTextLabelProp, addHeadingLabel: addHeadingLabelProp, addTableLabel: addTableLabelProp, removeLabel: removeLabelProp, className, style, ...rest }, forwardedRef) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const addTextLabel = (0, core_1.useCrispMessage)(addTextLabelProp, "Text");
+    const addHeadingLabel = (0, core_1.useCrispMessage)(addHeadingLabelProp, "Heading");
+    const addTableLabel = (0, core_1.useCrispMessage)(addTableLabelProp, "Table");
+    const removeLabel = (0, core_1.useCrispMessage)(removeLabelProp, "Remove");
     const editable = mode === "edit";
     const replace = (i, block) => {
         const next = blocks.slice();

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/spinner/spinner.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = Spinner;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("../../core");
 const spinner_recipe_1 = require("./spinner.recipe");
 /** A spinning ring indicator. Reports `role="status"` for assistive tech. */
-function Spinner({ size = 16, "aria-label": ariaLabel = "Loading", className, ...rest }) {
+function Spinner({ size = 16, "aria-label": ariaLabelProp, className, ...rest }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const ariaLabel = (0, core_1.useCrispMessage)(ariaLabelProp, "Loading");
     return ((0, jsx_runtime_1.jsx)("span", { role: "status", "aria-label": ariaLabel, className: (0, spinner_recipe_1.spinnerRecipe)({ className }), ...rest, style: {
             width: size,
             height: size,

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);
@@ -94,6 +95,7 @@ __exportStar(require("./product/richtext"), exports);
 __exportStar(require("./product/settingssection"), exports);
 __exportStar(require("./product/settingsshell"), exports);
 __exportStar(require("./product/sidebar"), exports);
+__exportStar(require("./product/statlist"), exports);
 __exportStar(require("./product/tasklist"), exports);
 __exportStar(require("./product/trialbanner"), exports);
 __exportStar(require("./product/viewtoggle"), 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

@@ -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();
@@ -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/statlist/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("./statlist"), exports);

package/dist/cjs/product/statlist/statlist.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatList = StatList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const badge_1 = require("../../components/badge/badge");
+const statlist_recipe_1 = require("./statlist.recipe");
+/**
+ * A list of label + trailing-count rows — a dashboard's own findings
+ * summary ("Open risks with no owner: 3") or an audit-readiness check list,
+ * each row optionally a link. Not measured against one specific Attio
+ * widget (see the recipe's own doc comment for why); composed from
+ * already-measured crisp values throughout.
+ */
+function StatList({ items, emptyLabel = "Nothing to show", className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, statlist_recipe_1.statlistRecipe)({ className }), ...rest, children: items.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-statlist-empty", children: emptyLabel })) : (items.map((item) => {
+            const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-statlist-label", children: item.label }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: item.count === 0 ? "neutral" : (item.tone ?? "neutral"), children: item.count })] }));
+            return item.href ? ((0, jsx_runtime_1.jsx)("a", { href: item.href, onClick: item.onClick, className: "crisp-statlist-row", children: content }, item.id)) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-statlist-row", children: content }, item.id));
+        })) }));
+}
+StatList.displayName = "StatList";

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statlistRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A list of label + trailing-count rows, each optionally a link — the
+// "N findings of this kind" shape a dashboard's own status summary and an
+// audit-readiness check list both need. No direct Attio widget measures
+// this exact row (Attio's own Reports/Dashboards surface in this workspace
+// has bar/line/number report tiles, not a findings list), so this reuses
+// already-measured crisp values throughout rather than a fresh guess:
+// TaskList's own row-divider structure (border-top, no border on the first
+// row), the type scale's own `md`/`sm` sizes, and Badge's own tone colours
+// for the trailing count — no new pixel or colour value is introduced here.
+const config = (0, core_1.defineRecipe)({
+    name: "statlist",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-statlist-row { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["3"]}; padding: ${tokens_1.contract.space["2.5"]} 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.md}; color: inherit; text-decoration: none; }
+    & .crisp-statlist-row:first-child { border-top: none; }
+    & a.crisp-statlist-row:hover .crisp-statlist-label { color: ${tokens_1.contract.fgBrandSoft}; }
+
+    & .crisp-statlist-label { color: ${tokens_1.contract.fgMuted}; }
+
+    & .crisp-statlist-empty { padding: ${tokens_1.contract.space["4"]} 0; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.statlistRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -1,11 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useCrispMessage } from "../../core/index.js";
 import { breadcrumbRecipe } from "./breadcrumb.recipe.js";
 /**
  * A breadcrumb trail — measured from a record-page nav. The last item is
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
-export function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
+export function Breadcrumb({ items, separator, "aria-label": ariaLabelProp, className, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default, or that
+    // default itself with no provider — unchanged from before this existed.
+    const ariaLabel = useCrispMessage(ariaLabelProp, "Breadcrumb");
     // Live-measured (app.attio.com/<ws>/home, /companies,
     // /company/<id>/overview): a plain rounded divider, not a chevron -- a
     // symmetric shape needs no RTL mirroring, unlike the ChevronRight this

package/dist/esm/components/columncalc/columncalc.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, Plus } from "lucide-react";
 import * as React from "react";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
 import { columncalcRecipe } from "./columncalc.recipe.js";
 /** The four calcs offered on every column, in their order. */
@@ -78,10 +79,18 @@ export function computeCalc(values, op) {
 const defaultFormat = (n, op) => op === "percentEmpty" || op === "percentFilled"
     ? `${Math.round(n)}%`
     : n.toLocaleString(undefined, { maximumFractionDigits: 2 });
-export function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel = "Add calculation", sectionLabel = "Aggregations", format = defaultFormat, align, opLabels, className, ...rest }) {
-    // a partial override, so a consumer can translate one op without
-    // restating all nine
-    const labelFor = (o) => opLabels?.[o] ?? CALC_LABEL[o];
+export function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel: addLabelProp, sectionLabel: sectionLabelProp, format = defaultFormat, align, opLabels, className, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default, or that
+    // default itself with no provider — unchanged from before this existed.
+    const addLabel = useCrispMessage(addLabelProp, "Add calculation");
+    const sectionLabel = useCrispMessage(sectionLabelProp, "Aggregations");
+    const crispMessages = useCrispMessages();
+    // opLabels (a per-op partial override) wins, then the provider's own
+    // translation of CALC_LABEL's English default, then that default itself —
+    // a consumer can translate one op via opLabels without restating all
+    // nine, AND get the rest from a provider with no per-instance prop at all.
+    const labelFor = (o) => opLabels?.[o] ?? crispMessages[CALC_LABEL[o]] ?? CALC_LABEL[o];
     const [internal, setInternal] = React.useState(defaultOp);
     const op = opProp ?? internal;
     const setOp = (next) => {

package/dist/esm/components/composewindow/composewindow.js

@@ -3,7 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { Minus, Pin, X } from "lucide-react";
 import * as React from "react";
-import { cx, withDescribedBy } from "../../core/index.js";
+import { cx, useCrispMessage, withDescribedBy } from "../../core/index.js";
 import { composewindowRecipe } from "./composewindow.recipe.js";
 // A globally unique id per mounted instance — see command.tsx/dialog.tsx for
 // the rationale (the machine defers its dismissal listeners a frame, so a
@@ -56,7 +56,11 @@ function useComposeWindowInstanceId() {
  * measured screenshot. `trapFocus` follows the same call — a picture-in-
  * picture window, not a modal, so Tab is not caught inside it.
  */
-export function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width = 968, "aria-label": ariaLabel, minimizeLabel = "Minimize", pinLabel = "Pin to screen", closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
+export function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width = 968, "aria-label": ariaLabel, minimizeLabel: minimizeLabelProp, pinLabel: pinLabelProp, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const minimizeLabel = useCrispMessage(minimizeLabelProp, "Minimize");
+    const pinLabel = useCrispMessage(pinLabelProp, "Pin to screen");
+    const closeLabel = useCrispMessage(closeLabelProp, "Close");
     const id = useComposeWindowInstanceId();
     const [internalMinimized, setInternalMinimized] = React.useState(defaultMinimized ?? false);
     const minimized = minimizedProp ?? internalMinimized;

package/dist/esm/components/contextmenu/contextmenu.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
-import { FloatingPortal, isInsideLaterFloatingLayer, registerFloatingLayer, } from "../../core/index.js";
+import { FloatingPortal, isInsideLaterFloatingLayer, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
 import { useMenuKeyboard } from "../menu/index.js";
 import { contextmenuRecipe } from "./contextmenu.recipe.js";
 /**
@@ -9,7 +9,9 @@ import { contextmenuRecipe } from "./contextmenu.recipe.js";
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
+export function ContextMenu({ children, items, menuLabel: menuLabelProp, className, asChild = false, }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const menuLabel = useCrispMessage(menuLabelProp, "Context menu");
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);