@crisp-ui-kit/crisp 0.53.5 → 0.54.0

package/dist/cjs/components/bulkbar/bulkbar.js

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

package/dist/cjs/components/fileupload/fileupload.js

@@ -93,10 +93,26 @@ function FileUpload({ className, labels, "aria-label": ariaLabel, id, accept, di
         onAcceptedFileEntriesChange,
     };
     const [rejections, setRejections] = React.useState([]);
+    // crisp/#471: same resolution order as every other component's own —
+    // explicit `labels` entry wins, then a CrispMessagesProvider's
+    // translation of the built-in English default, then that default itself.
+    const title = (0, core_1.useCrispMessage)(labels?.title, exports.fileUploadLabels.title);
+    const hint = (0, core_1.useCrispMessage)(labels?.hint, exports.fileUploadLabels.hint);
+    const remove = (0, core_1.useCrispMessage)(labels?.remove, exports.fileUploadLabels.remove);
+    const crispMessages = (0, core_1.useCrispMessages)();
     const t = {
-        ...exports.fileUploadLabels,
-        ...labels,
-        errors: { ...exports.fileUploadLabels.errors, ...labels?.errors },
+        title,
+        hint,
+        remove,
+        errors: Object.fromEntries(Object.keys(exports.fileUploadLabels.errors).map((code) => {
+            const englishDefault = exports.fileUploadLabels.errors[code];
+            return [
+                code,
+                labels?.errors?.[code] ??
+                    crispMessages[englishDefault] ??
+                    englishDefault,
+            ];
+        })),
     };
     const api = (0, react_file_upload_1.useFileUpload)({
         ...props,

package/dist/cjs/components/formfield/formfield.js

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

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeatmapChart = HeatmapChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("../../core");
 const heatmapchart_recipe_1 = require("./heatmapchart.recipe");
 /**
  * An NxM cell-matrix chart — GRC's own risk heatmap (impact x likelihood)
@@ -10,9 +11,20 @@ const heatmapchart_recipe_1 = require("./heatmapchart.recipe");
  * 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 }) {
+function HeatmapChart({ data, rowAxis, colAxis, format = (cell) => (cell.value ? cell.value : ""), cellTitle, onCellClick, isCellClickable = (cell) => cell.value > 0, empty, emptyLabel: emptyLabelProp, "aria-label": ariaLabel, className, ...rest }) {
     const cols = data[0]?.length ?? 0;
-    const summary = ariaLabel ?? `Heatmap: ${data.length} x ${cols} grid`;
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only. The
+    // default `aria-label` is a sentence built from two static fragments
+    // around live data (row/column counts, not translatable), so each
+    // fragment gets its own lookup — same as TableToolbar's "Sorted by"
+    // (crisp/#217).
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const emptyLabel = emptyLabelProp ??
+        crispMessages["Nothing to plot yet."] ??
+        "Nothing to plot yet.";
+    const summary = ariaLabel ??
+        `${crispMessages.Heatmap ?? "Heatmap"}: ${data.length} ${crispMessages.x ?? "x"} ${cols} ${crispMessages.grid ?? "grid"}`;
     return ((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);

package/dist/cjs/components/skiplink/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("./skiplink"), exports);

package/dist/cjs/components/skiplink/skiplink.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkipLink = SkipLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const skiplink_recipe_1 = require("./skiplink.recipe");
+/**
+ * A "skip to content" link — invisible until it is the thing with focus
+ * (a sighted mouse user never sees it), so a keyboard user's first Tab from
+ * a cold load reaches it instead of walking the whole nav first. Render it
+ * as the very first thing on the page, before the sidebar/header. See the
+ * recipe's own doc comment for why there's no Attio value behind its chrome.
+ */
+function SkipLink({ href = "#main-content", children = "Skip to content", className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("a", { href: href, className: (0, skiplink_recipe_1.skiplinkRecipe)({ className }), ...rest, children: children }));
+}
+SkipLink.displayName = "SkipLink";

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skiplinkRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A "skip to content" link: invisible (the same sr-only clip
+// VisuallyHidden uses) until it is the thing with focus, so a sighted
+// mouse user never sees it but a keyboard user's first Tab from a cold
+// load reaches it. No Attio screen ships one to measure -- this is
+// boilerplate accessibility furniture, not a design value (crisp#462 GRC
+// audit gap 2 of 4, crisp#540) -- so the un-hidden chrome reuses already-measured
+// crisp values throughout: the `bgPopover` floating surface + its
+// `elevation.floating` shadow (the same pairing Menu/Popover/ContextMenu/
+// Toast use for "a surface that appears above everything else"), `radius.md`,
+// and the canonical `:focus-visible` ring every other crisp control uses
+// (`outline: 2px solid ${bgBrandSolid}`, 1px offset) -- no new value is
+// introduced.
+const config = (0, core_1.defineRecipe)({
+    name: "skiplink",
+    base: `position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; text-decoration: none;
+    font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary};
+
+    &:focus {
+      position: fixed; top: ${tokens_1.contract.space["3"]}; inset-inline-start: ${tokens_1.contract.space["3"]}; z-index: 90; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
+      padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating};
+    }
+    &:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.skiplinkRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textlinkRecipe = exports.TextLink = void 0;
+var textlink_1 = require("./textlink");
+Object.defineProperty(exports, "TextLink", { enumerable: true, get: function () { return textlink_1.TextLink; } });
+var textlink_recipe_1 = require("./textlink.recipe");
+Object.defineProperty(exports, "textlinkRecipe", { enumerable: true, get: function () { return textlink_recipe_1.textlinkRecipe; } });

package/dist/cjs/components/textlink/textlink.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLink = TextLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const textlink_recipe_1 = require("./textlink.recipe");
+/**
+ * Inline navigable text — a real `<a href>` always, the same href+onClick
+ * division `StatList` uses: `href` gives ordinary browser behaviour (new
+ * tab, copy link, hover status), an `onClick` that calls
+ * `event.preventDefault()` pairs it with client-side routing (e.g.
+ * react-router's own `Link`).
+ */
+function TextLink({ tone = "muted", className, ...rest }) {
+    return (0, jsx_runtime_1.jsx)("a", { className: (0, textlink_recipe_1.textlinkRecipe)({ tone, className }), ...rest });
+}
+TextLink.displayName = "TextLink";

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textlinkRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The one inline-navigable-text shape GRC's own screens kept hand-typing at
+// every call site (internal/grc#110 / your-moon/crisp#529): a card's own
+// trailing "View all →", and a muted in-context reference link that goes
+// brand on hover. No new colour or size here — both variants read the exact
+// tokens those call sites already used (`bgBrandSolid` reused as a text
+// colour, the same alias GRC's own `--color-fg-brand` resolves to; `fgMuted`;
+// the existing 12px/13px text sizes) rather than a fresh guess, and neither
+// is measured against one specific Attio widget for the same reason
+// StatList/HeatmapChart's own doc comments give: this exact "small trailing
+// link" isn't a distinct Attio component to point a CDP session at, it's a
+// reuse of already-measured type and colour values in a new arrangement.
+const config = (0, core_1.defineRecipe)({
+    name: "textlink",
+    base: `display: inline; font-family: ${tokens_1.contract.font.sans}; text-decoration: none; cursor: pointer;
+    &:hover { text-decoration: underline; }`,
+    variants: {
+        tone: {
+            // The bold, always-brand-coloured trailing link a Card's own `action`
+            // slot uses ("View all →", "All registers →").
+            brand: `font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.bgBrandSolid};`,
+            // A quieter in-context reference (a sample record under a finding)
+            // that only goes brand on hover.
+            muted: `font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgMuted}; &:hover { color: ${tokens_1.contract.bgBrandSolid}; }`,
+        },
+    },
+    defaultVariants: { tone: "muted" },
+    compoundVariants: [],
+});
+exports.textlinkRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/components/visuallyhidden/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("./visuallyhidden"), exports);

package/dist/cjs/components/visuallyhidden/visuallyhidden.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisuallyHidden = VisuallyHidden;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const visuallyhidden_recipe_1 = require("./visuallyhidden.recipe");
+/**
+ * Hides content visually while keeping it in the accessibility tree and
+ * the tab order — a label for an icon-only control, extra context for a
+ * screen-reader user that a sighted one gets from layout alone. Renders a
+ * `<span>`; wrap the element that needs the treatment, or read its content
+ * as a `label`/`aria-label` source in a test.
+ */
+function VisuallyHidden({ className, ...rest }) {
+    return (0, jsx_runtime_1.jsx)("span", { className: (0, visuallyhidden_recipe_1.visuallyhiddenRecipe)({ className }), ...rest });
+}
+VisuallyHidden.displayName = "VisuallyHidden";

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visuallyhiddenRecipe = void 0;
+const core_1 = require("../../core");
+// The standard "sr-only" clip pattern: content stays in the accessibility
+// tree and the tab order, but occupies no visible space and is never
+// painted. Pure CSS mechanics, not a design value -- there is nothing to
+// measure against Attio here (crisp#462 GRC audit gap 2 of 4, crisp#540):
+// no Attio screen ships content that is deliberately invisible-but-reachable,
+// so this is the standard web-platform pattern, same shape `SkipLink` also
+// starts from before it un-hides on focus.
+const config = (0, core_1.defineRecipe)({
+    name: "visuallyhidden",
+    base: `position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.visuallyhiddenRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/index.js

@@ -60,6 +60,7 @@ __exportStar(require("./components/resizablepanel"), exports);
 __exportStar(require("./components/segmented"), exports);
 __exportStar(require("./components/select"), exports);
 __exportStar(require("./components/skeleton"), exports);
+__exportStar(require("./components/skiplink"), exports);
 __exportStar(require("./components/slider"), exports);
 __exportStar(require("./components/spinner"), exports);
 __exportStar(require("./components/stagebar"), exports);
@@ -69,9 +70,11 @@ __exportStar(require("./components/table"), exports);
 __exportStar(require("./components/tabletoolbar"), exports);
 __exportStar(require("./components/tabs"), exports);
 __exportStar(require("./components/textarea"), exports);
+__exportStar(require("./components/textlink"), exports);
 __exportStar(require("./components/timepicker"), exports);
 __exportStar(require("./components/toast"), exports);
 __exportStar(require("./components/tooltip"), exports);
+__exportStar(require("./components/visuallyhidden"), exports);
 __exportStar(require("./components/wheelpicker"), exports);
 __exportStar(require("./core"), exports);
 // product surfaces (product/) — faithful, pixel-measured rebuilds of specific
@@ -84,6 +87,7 @@ __exportStar(require("./product/board"), exports);
 __exportStar(require("./product/command"), exports);
 __exportStar(require("./product/entitycard"), exports);
 __exportStar(require("./product/flowcanvas"), exports);
+__exportStar(require("./product/headerbar"), exports);
 __exportStar(require("./product/inbox"), exports);
 __exportStar(require("./product/listpage"), exports);
 __exportStar(require("./product/navitem"), exports);

package/dist/cjs/product/board/board.js

@@ -44,7 +44,16 @@ const board_recipe_1 = require("./board.recipe");
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from a deals pipeline.
  */
-function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", getCardLabel, announceMove = (column, card) => card ? `${card} moved to ${column}` : `Moved to ${column}`, className, ...rest }) {
+function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, className, ...rest }) {
+    // crisp/#471: same resolution order as every other component's own —
+    // explicit prop, then a CrispMessagesProvider's translation of the English
+    // default, then that default itself.
+    const newCardLabel = (0, core_1.useCrispMessage)(newCardLabelProp, "New");
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const announceMove = announceMoveProp ??
+        ((column, card) => card
+            ? `${card} ${crispMessages["moved to"] ?? "moved to"} ${column}`
+            : `${crispMessages["Moved to"] ?? "Moved to"} ${column}`);
     const [dragId, setDragId] = React.useState(null);
     const [overCol, setOverCol] = React.useState(null);
     const [announcement, setAnnouncement] = React.useState("");
@@ -101,7 +110,7 @@ function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLa
                             move(dragId, col.id);
                         setDragId(null);
                         setOverCol(null);
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-board-card", role: "listitem", 
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-board-col-add", "aria-label": `${crispMessages["Add to"] ?? "Add to"} ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-board-card", role: "listitem", 
                                     // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
                                     tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
                                         setDragId(null);

package/dist/cjs/product/command/command.js

@@ -147,7 +147,19 @@ function useCommandInstanceId() {
  * option list) so keyboard/focus correctness comes from the machines, not
  * hand-rolled event handling.
  */
-function Command({ open, onOpenChange, items = exports.defaultCommandItems, placeholder = "Search actions and records…", "aria-label": ariaLabel = "Command palette", navigateLabel = "Navigate", selectLabel = "Select", emptyLabel = "No matching commands", query: queryProp, onQueryChange, filterItems = true, className, "aria-describedby": describedBy, ...rest }) {
+function Command({ open, onOpenChange, items = exports.defaultCommandItems, placeholder: placeholderProp, "aria-label": ariaLabelProp, navigateLabel: navigateLabelProp, selectLabel: selectLabelProp, emptyLabel: emptyLabelProp, query: queryProp, onQueryChange, filterItems = true, className, "aria-describedby": describedBy, ...rest }) {
+    // crisp/#471: same resolution order as every other component's own.
+    // `navigateLabel`/`emptyLabel` are typed `React.ReactNode`, so they
+    // resolve by hand rather than through `useCrispMessage`, which is
+    // string-only.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const placeholder = (0, core_1.useCrispMessage)(placeholderProp, "Search actions and records…");
+    const ariaLabel = (0, core_1.useCrispMessage)(ariaLabelProp, "Command palette");
+    const navigateLabel = navigateLabelProp ?? crispMessages.Navigate ?? "Navigate";
+    const selectLabel = (0, core_1.useCrispMessage)(selectLabelProp, "Select");
+    const emptyLabel = emptyLabelProp ??
+        crispMessages["No matching commands"] ??
+        "No matching commands";
     const instanceId = useCommandInstanceId();
     const dialogId = `${instanceId}-dialog`;
     const comboId = `${instanceId}-combobox`;

package/dist/cjs/product/flowcanvas/flowcanvas.js

@@ -37,6 +37,7 @@ exports.FlowCanvas = FlowCanvas;
 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 flowcanvas_recipe_1 = require("./flowcanvas.recipe");
 const GRID = 20;
 const clampZoom = (z) => Math.min(1.5, Math.max(0.5, z));
@@ -45,7 +46,13 @@ const clampZoom = (z) => Math.min(1.5, Math.max(0.5, z));
  * measured from a workflows editor. Drag a node to move it (fires
  * `onNodesChange`); drag the background to pan; use the toolbar to zoom.
  */
-function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth = 240, nodeHeight = 64, "aria-label": ariaLabel, className, zoomOutLabel = "Zoom out", zoomInLabel = "Zoom in", resetLabel = "Reset", edgesLabel = "Edges", ...rest }) {
+function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth = 240, nodeHeight = 64, "aria-label": ariaLabelProp, className, zoomOutLabel: zoomOutLabelProp, zoomInLabel: zoomInLabelProp, resetLabel: resetLabelProp, edgesLabel: edgesLabelProp, ...rest }) {
+    // crisp/#471: same resolution order as every other component's own.
+    const ariaLabel = (0, core_1.useCrispMessage)(ariaLabelProp, "Flow canvas");
+    const zoomOutLabel = (0, core_1.useCrispMessage)(zoomOutLabelProp, "Zoom out");
+    const zoomInLabel = (0, core_1.useCrispMessage)(zoomInLabelProp, "Zoom in");
+    const resetLabel = (0, core_1.useCrispMessage)(resetLabelProp, "Reset");
+    const edgesLabel = (0, core_1.useCrispMessage)(edgesLabelProp, "Edges");
     const [pan, setPan] = React.useState({ x: 40, y: 40 });
     const [zoom, setZoom] = React.useState(1);
     const [panning, setPanning] = React.useState(false);
@@ -100,7 +107,7 @@ function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth = 240,
             ...rest.style,
             backgroundSize: `${GRID * zoom}px ${GRID * zoom}px`,
             backgroundPosition: `${pan.x}px ${pan.y}px`,
-        }, role: "application", "aria-label": ariaLabel ?? "Flow canvas", onPointerDown: onBackgroundPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-flowcanvas-viewport", style: {
+        }, role: "application", "aria-label": ariaLabel, onPointerDown: onBackgroundPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-flowcanvas-viewport", style: {
                     transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
                 }, children: [(0, jsx_runtime_1.jsxs)("svg", { className: "crisp-flowcanvas-edges", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("title", { children: edgesLabel }), edges.map((edge) => {
                                 const a = byId.get(edge.from);

package/dist/cjs/product/headerbar/headerbar.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderBar = HeaderBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const headerbar_recipe_1 = require("./headerbar.recipe");
+/**
+ * A page-level header row: an optional leading slot, a flexible title/
+ * breadcrumb region, and a trailing action cluster, on the measured 48px
+ * bar Attio uses for both its page-header and its view-bar row. See the
+ * recipe's own doc comment for the live measurement (crisp#462).
+ */
+function HeaderBar({ leading, title, trailing, bordered = true, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, headerbar_recipe_1.headerbarRecipe)({ className }), "data-bordered": bordered ? "" : undefined, ...rest, children: [leading ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-headerbar-leading", children: leading })) : null, title ? (0, jsx_runtime_1.jsx)("div", { className: "crisp-headerbar-title", children: title }) : null, trailing ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-headerbar-trailing", children: trailing })) : null] }));
+}
+HeaderBar.displayName = "HeaderBar";

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerbarRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A page-level header row — measured live at app.attio.com/techpartners/companies
+// against two stacked bars: the top utility bar (breadcrumb + trailing icon
+// actions, e.g. search/notifications) and the view bar directly under it
+// ("All Companies" view name + tabs + "New Company"). Both share the same
+// 48px content height and `0 ${space3}` padding; only the outer (first) bar
+// carries the divider -- measured `border-bottom: 1px solid rgb(238,239,241)`
+// (`borderSubtle`/`line100`, exact match) on the utility bar, no border of
+// its own on the view bar directly beneath it. `bordered` (default true)
+// lets a consumer that stacks two HeaderBars turn it off on the inner one,
+// the way GRC's own AppLayout UtilityBar + Page viewBar do today with two
+// hand-rolled, drifting copies of the same 49px bar (crisp#462 GRC audit,
+// crisp#527).
+//
+// No bell, no breadcrumb, no search box baked in -- those are the `leading`/
+// `title`/`trailing` slot content a consumer supplies. `size.header` (48px)
+// is reused rather than a new token, since it's the same "workspace-switcher
+// header height" measured elsewhere in the sidebar.
+const config = (0, core_1.defineRecipe)({
+    name: "headerbar",
+    base: `box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.header}; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-bordered] { border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-headerbar-leading { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; min-width: 0; }
+    & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; overflow: hidden; }
+    & .crisp-headerbar-trailing { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.headerbarRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/headerbar/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("./headerbar"), exports);

package/dist/cjs/product/inbox/inbox.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const tabs_1 = require("../../components/tabs");
+const core_1 = require("../../core");
 const inbox_recipe_1 = require("./inbox.recipe");
 /**
  * A notifications inbox panel — measured from a notification flyout. A
@@ -45,8 +46,19 @@ const inbox_recipe_1 = require("./inbox.recipe");
  * (avatar + message + time + unread dot) or a centred empty state. Put it inside
  * a Popover for the flyout.
  */
-function Inbox({ notifications = [], title = "Notifications", tabs, activeTab, onTabChange, emptyTitle = "No notifications", emptySubtitle = "Notifications such as mentions and important updates will be displayed here.", emptyAction, tabsLabel = "Notification views", className, ...rest }) {
+function Inbox({ notifications = [], title: titleProp, tabs, activeTab, onTabChange, emptyTitle: emptyTitleProp, emptySubtitle: emptySubtitleProp, emptyAction, tabsLabel: tabsLabelProp, className, ...rest }) {
     const listRef = React.useRef(null);
+    // crisp/#471: `title`/`emptyTitle`/`emptySubtitle` are typed
+    // `React.ReactNode`, so they resolve by hand rather than through
+    // `useCrispMessage`, which is string-only — same reasoning as DataTable's
+    // own `empty`.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const title = titleProp ?? crispMessages.Notifications ?? "Notifications";
+    const emptyTitle = emptyTitleProp ?? crispMessages["No notifications"] ?? "No notifications";
+    const emptySubtitle = emptySubtitleProp ??
+        crispMessages["Notifications such as mentions and important updates will be displayed here."] ??
+        "Notifications such as mentions and important updates will be displayed here.";
+    const tabsLabel = (0, core_1.useCrispMessage)(tabsLabelProp, "Notification views");
     // crisp's shared tablist model, the one `Tabs` runs (#195). Hand-rolling a
     // second one is how Inbox ended up with no arrow keys, no roving tabindex
     // and no name while `Tabs` had all three.

package/dist/cjs/product/onboarding/onboarding.js

@@ -4,6 +4,7 @@ exports.onboardingLabels = void 0;
 exports.OnboardingChecklist = OnboardingChecklist;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
+const core_1 = require("../../core");
 const onboarding_recipe_1 = require("./onboarding.recipe");
 /**
  * The English defaults for the two pieces of copy that are formatters rather
@@ -19,9 +20,29 @@ exports.onboardingLabels = {
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", progressText = exports.onboardingLabels.progressText, completedStepLabel = exports.onboardingLabels.completedStepLabel, ...rest }) {
+function OnboardingChecklist({ title: titleProp, steps, encouragement: encouragementProp, onStepClick, onMenu, onMinimize, className, optionsLabel: optionsLabelProp, minimizeLabel: minimizeLabelProp, progressLabel: progressLabelProp, progressText: progressTextProp, completedStepLabel: completedStepLabelProp, ...rest }) {
     const total = steps.length;
     const done = steps.filter((s) => s.done).length;
+    // crisp/#471: same resolution order as every other component's own —
+    // explicit prop, then a CrispMessagesProvider's translation of the English
+    // default, then that default itself. `title`/`encouragement` are typed
+    // `React.ReactNode` (a caller can pass a translated element), so they
+    // resolve by hand rather than through `useCrispMessage`, which is
+    // string-only — same reasoning as DataTable's own `empty`.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const title = titleProp ?? crispMessages["Getting started"] ?? "Getting started";
+    const encouragement = encouragementProp ?? crispMessages["Keep it up!"] ?? "Keep it up!";
+    const optionsLabel = (0, core_1.useCrispMessage)(optionsLabelProp, "Checklist options");
+    const minimizeLabel = (0, core_1.useCrispMessage)(minimizeLabelProp, "Minimize");
+    const progressLabel = (0, core_1.useCrispMessage)(progressLabelProp, "Onboarding progress");
+    // `progressText`/`completedStepLabel` are formatters, not strings (the
+    // count moves within the sentence between languages, #216) — each of
+    // their own static fragments gets its own lookup, same as
+    // TableToolbar's "Sorted by" (crisp/#217).
+    const progressText = progressTextProp ??
+        ((doneCount, totalCount) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("b", { children: [doneCount, "/", totalCount] }), " ", crispMessages["steps completed"] ?? "steps completed"] })));
+    const completedStepLabel = completedStepLabelProp ??
+        ((label) => `${String(label)} ${crispMessages["— completed"] ?? "— completed"}`);
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, onboarding_recipe_1.onboardingRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-onboarding-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-title", children: title }), onMenu && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-onboarding-sub", children: [progressText(done, total), encouragement ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-onboarding-steps", children: steps.map((s) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-onboarding-step", "data-done": s.done ? "" : undefined, "aria-label": s.done ? completedStepLabel(s.label) : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-step-icon", children: s.icon }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-step-label", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-onboarding-step-check", children: s.done && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = void 0;
+exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = exports.RecordDetails = void 0;
 var recordpage_1 = require("./recordpage");
+Object.defineProperty(exports, "RecordDetails", { enumerable: true, get: function () { return recordpage_1.RecordDetails; } });
 Object.defineProperty(exports, "RecordPage", { enumerable: true, get: function () { return recordpage_1.RecordPage; } });
 Object.defineProperty(exports, "recordPageLabels", { enumerable: true, get: function () { return recordpage_1.recordPageLabels; } });
 var recordpage_recipe_1 = require("./recordpage.recipe");