@crisp-ui-kit/crisp 0.53.5 → 0.54.1

package/dist/activityfeed.css

@@ -0,0 +1,12 @@
+.crisp-activityfeed {
+  box-sizing: border-box; max-width: 767px; margin-inline: auto; padding: var(--crisp-space-6); display: flex; flex-direction: column; gap: var(--crisp-space-4);
+    & .crisp-activityfeed-row { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding-bottom: var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-activityfeed-row:last-of-type { border-bottom: none; padding-bottom: 0; }
+    & .crisp-activityfeed-row-head { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-activityfeed-row-spacer { flex: 1; }
+    & .crisp-activityfeed-row-when { font-size: var(--crisp-text-xs); color: var(--crisp-fg-muted); white-space: nowrap; }
+    & .crisp-activityfeed-diff { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    & .crisp-activityfeed-diff-item { padding-inline-start: var(--crisp-space-8); font-size: var(--crisp-text-md); }
+    & .crisp-activityfeed-diff-field { color: var(--crisp-fg-muted); }
+    & .crisp-activityfeed-diff-before { color: var(--crisp-fg-muted); text-decoration: line-through; }
+}

package/dist/activityfeed.d.ts

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

package/dist/activityfeed.layered.css

@@ -0,0 +1,14 @@
+@layer crisp-components {
+.crisp-activityfeed {
+  box-sizing: border-box; max-width: 767px; margin-inline: auto; padding: var(--crisp-space-6); display: flex; flex-direction: column; gap: var(--crisp-space-4);
+    & .crisp-activityfeed-row { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding-bottom: var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-activityfeed-row:last-of-type { border-bottom: none; padding-bottom: 0; }
+    & .crisp-activityfeed-row-head { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-activityfeed-row-spacer { flex: 1; }
+    & .crisp-activityfeed-row-when { font-size: var(--crisp-text-xs); color: var(--crisp-fg-muted); white-space: nowrap; }
+    & .crisp-activityfeed-diff { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    & .crisp-activityfeed-diff-item { padding-inline-start: var(--crisp-space-8); font-size: var(--crisp-text-md); }
+    & .crisp-activityfeed-diff-field { color: var(--crisp-fg-muted); }
+    & .crisp-activityfeed-diff-before { color: var(--crisp-fg-muted); text-decoration: line-through; }
+}
+}

package/dist/badge.css

@@ -17,6 +17,9 @@
 .crisp-badge--tone_danger {
   background: color-mix(in srgb, var(--crisp-bg-danger) 14%, transparent); color: var(--crisp-fg-danger-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
 }
+.crisp-badge--tone_purple {
+  background: var(--crisp-bg-purple-soft); color: var(--crisp-fg-purple-soft); box-shadow: inset 0 0 0 1px var(--crisp-ring-purple-soft);
+}
 .crisp-badge--size_small {
   height: 16px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-xs); border-radius: var(--crisp-radius-sm);
 }

package/dist/badge.d.ts

@@ -1,9 +1,9 @@
 import type { RecipeFn } from "../core/types";
 
 export interface BadgeVariants {
-  tone?: "neutral" | "brand" | "success" | "warning" | "danger";
+  tone?: "neutral" | "brand" | "success" | "warning" | "danger" | "purple";
   size?: "small" | "medium" | "large";
   variant?: "soft" | "solid";
 }
 
-export declare const badgeRecipe: RecipeFn<{ tone: { neutral: string; brand: string; success: string; warning: string; danger: string }; size: { small: string; medium: string; large: string }; variant: { soft: string; solid: string } }>;
+export declare const badgeRecipe: RecipeFn<{ tone: { neutral: string; brand: string; success: string; warning: string; danger: string; purple: string }; size: { small: string; medium: string; large: string }; variant: { soft: string; solid: string } }>;

package/dist/badge.layered.css

@@ -18,6 +18,9 @@
 .crisp-badge--tone_danger {
   background: color-mix(in srgb, var(--crisp-bg-danger) 14%, transparent); color: var(--crisp-fg-danger-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
 }
+.crisp-badge--tone_purple {
+  background: var(--crisp-bg-purple-soft); color: var(--crisp-fg-purple-soft); box-shadow: inset 0 0 0 1px var(--crisp-ring-purple-soft);
+}
 .crisp-badge--size_small {
   height: 16px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-xs); border-radius: var(--crisp-radius-sm);
 }

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

@@ -63,6 +63,16 @@ const spec = (0, core_1.defineSpec)({
                 color: tokens_1.contract.fgDangerSoft,
                 boxShadow: ring(tokens_1.contract.bgDanger, 30),
             },
+            // crisp#506: a distinct purple used for role-style labels (Attio's own
+            // "Admin" role pill), not a status/severity colour -- the other five
+            // tones don't cover this hue. Unlike those, these are the measured
+            // *solid* values directly (not a color-mix tint of a base accent):
+            // Attio's own pill background reads a flat, opaque rgb(), no alpha.
+            purple: {
+                background: tokens_1.contract.bgPurpleSoft,
+                color: tokens_1.contract.fgPurpleSoft,
+                boxShadow: `inset 0 0 0 1px ${tokens_1.contract.ringPurpleSoft}`,
+            },
         },
         size: {
             small: {

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,21 +70,25 @@ __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
 // product screens (Sidebar, RecordsTable, RecordPage, Inbox, …). Use them as-is
 // or as composition references for your own data; `components/` above holds
 // the generic primitives (Table, DataTable, Button, …) to build your own UI from.
+__exportStar(require("./product/activityfeed"), exports);
 __exportStar(require("./product/appshell"), exports);
 __exportStar(require("./product/authshell"), exports);
 __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/activityfeed/activityfeed.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActivityFeed = ActivityFeed;
+exports.ActivityFeedRow = ActivityFeedRow;
+exports.ActivityFeedDiffItem = ActivityFeedDiffItem;
+exports.ActivityFeedDiffList = ActivityFeedDiffList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const activityfeed_recipe_1 = require("./activityfeed.recipe");
+/**
+ * A record's own event timeline — a vertically stacked, bordered list of
+ * `ActivityFeedRow`s, capped at a readable content width. Built for
+ * internal/grc's per-record "Activity" tab (crisp#462 SHELL/forms gap): it
+ * replaces a hand-rolled `<div className="mx-auto max-w-3xl space-y-4
+ * p-6">`. No live Attio re-measurement behind its own chrome this pass (the
+ * CDP bridge was unreachable when this was built) — see the recipe's own
+ * doc comment for which already-measured crisp values it reuses instead of
+ * a new guess.
+ */
+function ActivityFeed({ className, children, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, activityfeed_recipe_1.activityfeedRecipe)({ className }), ...rest, children: children }));
+}
+ActivityFeed.displayName = "ActivityFeed";
+/** One event row: actor + action + timestamp, with an optional diff list
+ *  underneath. The last row in an `ActivityFeed` draws no divider. */
+function ActivityFeedRow({ actor, action, when, children, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-activityfeed-row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-activityfeed-row-head", children: [actor, action, (0, jsx_runtime_1.jsx)("span", { className: "crisp-activityfeed-row-spacer" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-activityfeed-row-when", children: when })] }), children] }));
+}
+ActivityFeedRow.displayName = "ActivityFeedRow";
+/** One changed-field line under an `ActivityFeedRow` — "Field: before →
+ *  after", or "Field: set to after" when there is no known prior value. */
+function ActivityFeedDiffItem({ field, before, after, }) {
+    return ((0, jsx_runtime_1.jsxs)("li", { className: "crisp-activityfeed-diff-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-activityfeed-diff-field", children: field }), " ", before !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-activityfeed-diff-before", children: before }), " ", (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2192" }), " ", (0, jsx_runtime_1.jsx)("span", { children: after })] })) : ((0, jsx_runtime_1.jsx)("span", { children: after }))] }));
+}
+ActivityFeedDiffItem.displayName = "ActivityFeedDiffItem";
+function ActivityFeedDiffList({ children, }) {
+    return (0, jsx_runtime_1.jsx)("ul", { className: "crisp-activityfeed-diff", children: children });
+}
+ActivityFeedDiffList.displayName = "ActivityFeedDiffList";

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.activityfeedRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A record's own event timeline (crisp#462 gap: internal/grc's ActivityTab
+// hand-rolled this as a bare `<div className="mx-auto max-w-3xl space-y-4
+// p-6">` list of bordered rows). No live Attio re-measurement behind these
+// values this pass -- the CDP bridge to the owner's Vivaldi was unreachable
+// when this was built (documented in the component's own doc comment) --
+// so this reuses already-measured crisp values throughout rather than a new
+// guess: `space["6"]` (24px) padding is RecordPanel's own content padding,
+// the row's bottom border reuses `borderSubtle` (the same divider every
+// other bordered row in this codebase draws with), and the 767px content
+// cap matches SettingsSection's own measured content width.
+const config = (0, core_1.defineRecipe)({
+    name: "activityfeed",
+    base: `box-sizing: border-box; max-width: 767px; margin-inline: auto; padding: ${tokens_1.contract.space["6"]};
+    display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]};
+    & .crisp-activityfeed-row { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; padding-bottom: ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-activityfeed-row:last-of-type { border-bottom: none; padding-bottom: 0; }
+    & .crisp-activityfeed-row-head { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    & .crisp-activityfeed-row-spacer { flex: 1; }
+    & .crisp-activityfeed-row-when { font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
+    & .crisp-activityfeed-diff { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; }
+    & .crisp-activityfeed-diff-item { padding-inline-start: ${tokens_1.contract.space["8"]}; font-size: ${tokens_1.contract.text.md}; }
+    & .crisp-activityfeed-diff-field { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-activityfeed-diff-before { color: ${tokens_1.contract.fgMuted}; text-decoration: line-through; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.activityfeedRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.activityfeedRecipe = exports.ActivityFeedRow = exports.ActivityFeedDiffList = exports.ActivityFeedDiffItem = exports.ActivityFeed = void 0;
+var activityfeed_1 = require("./activityfeed");
+Object.defineProperty(exports, "ActivityFeed", { enumerable: true, get: function () { return activityfeed_1.ActivityFeed; } });
+Object.defineProperty(exports, "ActivityFeedDiffItem", { enumerable: true, get: function () { return activityfeed_1.ActivityFeedDiffItem; } });
+Object.defineProperty(exports, "ActivityFeedDiffList", { enumerable: true, get: function () { return activityfeed_1.ActivityFeedDiffList; } });
+Object.defineProperty(exports, "ActivityFeedRow", { enumerable: true, get: function () { return activityfeed_1.ActivityFeedRow; } });
+var activityfeed_recipe_1 = require("./activityfeed.recipe");
+Object.defineProperty(exports, "activityfeedRecipe", { enumerable: true, get: function () { return activityfeed_recipe_1.activityfeedRecipe; } });

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