@crisp-ui-kit/crisp 0.53.5 → 0.54.1

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

@@ -183,6 +183,14 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     // (documented React behaviour), so a plain onFocus/onBlur pair on this
     // same wrapper sees the portal's contents correctly.
     const mentionPickerHasFocusRef = React.useRef(false);
+    // A caret position `insertMention` just established, to be re-asserted
+    // the next time `body` regains focus (#514 fixed the picker stealing
+    // focus on OPEN; this is the same "caret resets to offset 0" mechanism
+    // on SELECT — see insertMention's own comment for why one synchronous
+    // `sel.addRange` isn't enough). One-shot: consumed and cleared by the
+    // very next focus or input, whichever comes first, so a stale pointer
+    // can never later hijack an unrelated focus.
+    const pendingCaretRef = React.useRef(null);
     const syncEmpty = (el) => {
         if (el)
             el.toggleAttribute("data-empty", (el.textContent ?? "") === "");
@@ -494,6 +502,20 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
         after.collapse(true);
         sel.removeAllRanges();
         sel.addRange(after);
+        // `select`ing a mention is usually the LAST thing the consumer's
+        // picker does before it unmounts (ActorPicker-shaped consumers call
+        // `close` right after `select`, same as this file's own doc example).
+        // A picker built on a dialog primitive (crisp's own `Command`
+        // included) commonly restores focus to whatever had it before the
+        // dialog opened as part of ITS OWN unmount cleanup — a plain
+        // `.focus()` with no Range of its own, which collapses a
+        // contentEditable's caret to offset 0. That cleanup runs after this
+        // function returns (the picker only unmounts once `closeMention`
+        // below flips `mention` to null and React commits it), so the
+        // Selection set two lines up can already be correct here and still
+        // get clobbered a tick later. Re-assert it the next time `body`
+        // actually regains focus, whenever that turns out to be.
+        pendingCaretRef.current = { node: space, offset: 1 };
         closeMention();
         syncEmpty(bodyRef.current);
         emit();
@@ -558,10 +580,31 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
                     } })), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-multiline": "true", "aria-label": bodyLabel, "aria-readonly": readOnly || undefined, "data-placeholder": placeholder, onInput: readOnly
                     ? undefined
                     : () => {
+                        // A real keystroke landing here means `body` already has
+                        // focus on its own terms — any caret a prior mention
+                        // selection was waiting to reassert (see insertMention) is
+                        // moot now and must not later jump the caret backward on
+                        // some unrelated future focus.
+                        pendingCaretRef.current = null;
                         syncEmpty(bodyRef.current);
                         updateSlashTrigger();
                         updateMention();
                         emit();
+                    }, onFocus: readOnly
+                    ? undefined
+                    : () => {
+                        const pending = pendingCaretRef.current;
+                        pendingCaretRef.current = null;
+                        if (!pending?.node.isConnected)
+                            return;
+                        const sel = window.getSelection();
+                        if (!sel)
+                            return;
+                        const range = document.createRange();
+                        range.setStart(pending.node, pending.offset);
+                        range.collapse(true);
+                        sel.removeAllRanges();
+                        sel.addRange(range);
                     }, onMouseUp: readOnly
                     ? undefined
                     : () => {

package/dist/cjs/product/tasklist/tasklist.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TaskList = TaskList;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("../../core");
 const tasklist_recipe_1 = require("./tasklist.recipe");
 function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tasklist-row", "data-done": task.done ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "crisp-tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tasklist-title", children: task.title }), (task.due != null || task.meta != null) && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tasklist-meta", children: [task.due != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
@@ -11,9 +12,15 @@ function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
  * count, then rows of a round complete-checkbox + title + trailing meta.
  * Completed rows strike through; overdue dates go red.
  */
-function TaskList({ tasks, groups, onToggle, emptyLabel = "No tasks", className, completeLabel = "Mark complete", incompleteLabel = "Mark incomplete", ...rest }) {
+function TaskList({ tasks, groups, onToggle, emptyLabel: emptyLabelProp, className, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, ...rest }) {
     const resolved = groups ?? (tasks?.length ? [{ label: null, tasks }] : []);
     const total = resolved.reduce((s, g) => s + g.tasks.length, 0);
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No tasks"] ?? "No tasks";
+    const completeLabel = (0, core_1.useCrispMessage)(completeLabelProp, "Mark complete");
+    const incompleteLabel = (0, core_1.useCrispMessage)(incompleteLabelProp, "Mark incomplete");
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, tasklist_recipe_1.tasklistRecipe)({ className }), ...rest, children: total === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tasklist-empty", children: emptyLabel })) : (resolved.map((g, gi) => ((0, jsx_runtime_1.jsxs)("div", { children: [g.label != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tasklist-group", children: [g.label, (0, jsx_runtime_1.jsx)("span", { className: "crisp-tasklist-group-count", children: g.tasks.length })] })), g.tasks.map((t) => ((0, jsx_runtime_1.jsx)(Row, { task: t, onToggle: onToggle, completeLabel: completeLabel, incompleteLabel: incompleteLabel }, t.id)))] }, gi)))) }));
 }
 TaskList.displayName = "TaskList";

package/dist/cjs/tokens/palette.js

@@ -100,4 +100,18 @@ exports.palette = {
     // as-is per build/spec-check.mjs's own note), this token exists only for
     // Badge's soft-neutral text, so darkening it doesn't move any other surface.
     softNeutralText: { light: "#686870", dark: "#9a9aa2" },
+    // Badge's purple/role-pill tone (crisp#506) -- measured live off Attio's
+    // own role pill ("Admin", app.attio.com/<ws>/settings/workspace/members):
+    // background rgb(245,240,255), text rgb(98,56,181). The ring re-uses a
+    // second, independent measurement from the same session (a company's
+    // Categories tag pill sharing the identical background, "Broadcasting",
+    // app.attio.com/<ws>/companies) at rgb(232,221,254) -- same hue family,
+    // cross-validated rather than guessed. Dark mode was NOT measured (no
+    // live Attio session was reachable when this tone was added) -- these
+    // three light values are reused as-is for dark rather than an invented
+    // "brightened" guess (Lesson: don't add unmeasured "robustness"). Needs a
+    // real dark-mode measurement before this note can be removed.
+    purpleTint: { light: "#f5f0ff", dark: "#f5f0ff" },
+    softPurpleText: { light: "#6238b5", dark: "#6238b5" },
+    purpleRing: { light: "#e8ddfe", dark: "#e8ddfe" },
 };

package/dist/cjs/tokens/semantic.js

@@ -63,4 +63,9 @@ exports.semantic = {
     fgWarningSoft: "softWarningText",
     fgDangerSoft: "softDangerText",
     fgNeutralSoft: "softNeutralText",
+    /** Badge's purple/role-pill tone (crisp#506) — see palette.ts's comment
+     * on `purpleTint`/`softPurpleText`/`purpleRing` for the measurement. */
+    bgPurpleSoft: "purpleTint",
+    fgPurpleSoft: "softPurpleText",
+    ringPurpleSoft: "purpleRing",
 };

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

@@ -60,6 +60,16 @@ const spec = defineSpec({
                 color: c.fgDangerSoft,
                 boxShadow: ring(c.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: c.bgPurpleSoft,
+                color: c.fgPurpleSoft,
+                boxShadow: `inset 0 0 0 1px ${c.ringPurpleSoft}`,
+            },
         },
         size: {
             small: {

package/dist/esm/components/bulkbar/bulkbar.js

@@ -1,13 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import * as React from "react";
+import { useCrispMessage } from "../../core/index.js";
 import { bulkbarRecipe } from "./bulkbar.recipe.js";
 /**
  * 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.
  */
-export function BulkBar({ count, onClear, countLabel = "Selected", countText = (count, label) => (_jsxs(_Fragment, { children: [count, " ", label] })), children, className, clearLabel = "Clear selection", ...rest }) {
+export function BulkBar({ count, onClear, countLabel: countLabelProp, countText = (count, label) => (_jsxs(_Fragment, { children: [count, " ", label] })), children, className, clearLabel: clearLabelProp, ...rest }) {
+    // crisp/#471: same resolution order as every other component's own.
+    const countLabel = useCrispMessage(countLabelProp, "Selected");
+    const clearLabel = useCrispMessage(clearLabelProp, "Clear selection");
     return (_jsx("div", { className: bulkbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-bulkbar-bar", children: [count != null && (_jsxs("button", { type: "button", className: "crisp-bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), _jsx("span", { className: "crisp-bulkbar-clearlabel", children: clearLabel }), _jsx(X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
 }
 BulkBar.displayName = "BulkBar";

package/dist/esm/components/fileupload/fileupload.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFileUpload, } from "@seed-design/react-file-upload";
 import { X } from "lucide-react";
 import * as React from "react";
-import { useFocusAfterRemoval } from "../../core/index.js";
+import { useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
 import { fileuploadRecipe } from "./fileupload.recipe.js";
 export const fileUploadLabels = {
     // Matches the copy on the record Files pane.
@@ -56,10 +56,26 @@ export function FileUpload({ className, labels, "aria-label": ariaLabel, id, acc
         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 = useCrispMessage(labels?.title, fileUploadLabels.title);
+    const hint = useCrispMessage(labels?.hint, fileUploadLabels.hint);
+    const remove = useCrispMessage(labels?.remove, fileUploadLabels.remove);
+    const crispMessages = useCrispMessages();
     const t = {
-        ...fileUploadLabels,
-        ...labels,
-        errors: { ...fileUploadLabels.errors, ...labels?.errors },
+        title,
+        hint,
+        remove,
+        errors: Object.fromEntries(Object.keys(fileUploadLabels.errors).map((code) => {
+            const englishDefault = fileUploadLabels.errors[code];
+            return [
+                code,
+                labels?.errors?.[code] ??
+                    crispMessages[englishDefault] ??
+                    englishDefault,
+            ];
+        })),
     };
     const api = useFileUpload({
         ...props,

package/dist/esm/components/formfield/formfield.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useCrispMessage } from "../../core/index.js";
 import { formfieldRecipe } from "./formfield.recipe.js";
 /**
  * Tell the control what the field knows about it.
@@ -60,12 +61,18 @@ function useFieldWiring({ htmlFor, messageId, invalid, required, }) {
 export 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 = useCrispMessage(undefined, "(optional)");
     useFieldWiring({
         htmlFor,
         messageId: hasMsg ? descId : undefined,
         invalid: error != null,
         required: !!required,
     });
-    return (_jsxs("div", { className: formfieldRecipe({ className }), ...rest, children: [_jsxs("label", { className: "crisp-formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "crisp-formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "crisp-formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? (_jsx("span", { className: "crisp-formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "crisp-formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
+    return (_jsxs("div", { className: formfieldRecipe({ className }), ...rest, children: [_jsxs("label", { className: "crisp-formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "crisp-formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "crisp-formfield-optional", children: optional === true ? optionalDefault : optional }))] }), children, error != null ? (_jsx("span", { className: "crisp-formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "crisp-formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
 }
 FormField.displayName = "FormField";

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

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCrispMessages } from "../../core/index.js";
 import { heatmapchartRecipe } from "./heatmapchart.recipe.js";
 /**
  * An NxM cell-matrix chart — GRC's own risk heatmap (impact x likelihood)
@@ -7,9 +8,20 @@ import { heatmapchartRecipe } from "./heatmapchart.recipe.js";
  * the recipe's own doc comment for why (and for its measurement — or lack
  * of one — against Attio).
  */
-export function HeatmapChart({ data, rowAxis, colAxis, format = (cell) => (cell.value ? cell.value : ""), cellTitle, onCellClick, isCellClickable = (cell) => cell.value > 0, empty, emptyLabel = "Nothing to plot yet.", "aria-label": ariaLabel, className, ...rest }) {
+export 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 = 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 (_jsx("div", { className: heatmapchartRecipe({ className }), ...rest, role: "img", "aria-label": summary, children: empty ? (_jsx("div", { className: "crisp-heatmapchart-empty", children: emptyLabel })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "crisp-heatmapchart-rowaxis", children: [_jsx("span", { children: rowAxis.high }), rowAxis.title != null && (_jsx("span", { className: "crisp-heatmapchart-rowaxis-title", children: rowAxis.title })), _jsx("span", { children: rowAxis.low })] }), _jsxs("div", { className: "crisp-heatmapchart-body", children: [_jsx("div", { className: "crisp-heatmapchart-grid", style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: data.map((row, r) => row.map((cell, cc) => {
                                 const clickable = onCellClick != null && isCellClickable(cell, r, cc);
                                 const title = cellTitle?.(cell, r, cc);

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

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

package/dist/esm/components/skiplink/skiplink.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { skiplinkRecipe } from "./skiplink.recipe.js";
+/**
+ * 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.
+ */
+export function SkipLink({ href = "#main-content", children = "Skip to content", className, ...rest }) {
+    return (_jsx("a", { href: href, className: skiplinkRecipe({ className }), ...rest, children: children }));
+}
+SkipLink.displayName = "SkipLink";

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

@@ -0,0 +1,30 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// 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 = 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: ${c.font.sans}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
+
+    &:focus {
+      position: fixed; top: ${c.space["3"]}; inset-inline-start: ${c.space["3"]}; z-index: 90; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
+      padding: ${c.space["2"]} ${c.space["3"]}; border-radius: ${c.radius.md}; background: ${c.bgPopover}; box-shadow: ${e.floating};
+    }
+    &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const skiplinkRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { TextLink } from "./textlink.js";
+export { textlinkRecipe } from "./textlink.recipe.js";

package/dist/esm/components/textlink/textlink.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { textlinkRecipe } from "./textlink.recipe.js";
+/**
+ * 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`).
+ */
+export function TextLink({ tone = "muted", className, ...rest }) {
+    return _jsx("a", { className: textlinkRecipe({ tone, className }), ...rest });
+}
+TextLink.displayName = "TextLink";

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

@@ -0,0 +1,32 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "textlink",
+    base: `display: inline; font-family: ${c.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: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.bgBrandSolid};`,
+            // A quieter in-context reference (a sample record under a finding)
+            // that only goes brand on hover.
+            muted: `font-size: ${c.text.md}; font-weight: ${c.weight.regular}; color: ${c.fgMuted}; &:hover { color: ${c.bgBrandSolid}; }`,
+        },
+    },
+    defaultVariants: { tone: "muted" },
+    compoundVariants: [],
+});
+export const textlinkRecipe = resolveRecipe(config);
+export default config;

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

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

package/dist/esm/components/visuallyhidden/visuallyhidden.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { visuallyhiddenRecipe } from "./visuallyhidden.recipe.js";
+/**
+ * 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.
+ */
+export function VisuallyHidden({ className, ...rest }) {
+    return _jsx("span", { className: visuallyhiddenRecipe({ className }), ...rest });
+}
+VisuallyHidden.displayName = "VisuallyHidden";

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

@@ -0,0 +1,17 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+// 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 = 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: [],
+});
+export const visuallyhiddenRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/index.js

@@ -44,6 +44,7 @@ export * from "./components/resizablepanel/index.js";
 export * from "./components/segmented/index.js";
 export * from "./components/select/index.js";
 export * from "./components/skeleton/index.js";
+export * from "./components/skiplink/index.js";
 export * from "./components/slider/index.js";
 export * from "./components/spinner/index.js";
 export * from "./components/stagebar/index.js";
@@ -53,21 +54,25 @@ export * from "./components/table/index.js";
 export * from "./components/tabletoolbar/index.js";
 export * from "./components/tabs/index.js";
 export * from "./components/textarea/index.js";
+export * from "./components/textlink/index.js";
 export * from "./components/timepicker/index.js";
 export * from "./components/toast/index.js";
 export * from "./components/tooltip/index.js";
+export * from "./components/visuallyhidden/index.js";
 export * from "./components/wheelpicker/index.js";
 export * from "./core/index.js";
 // 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.
+export * from "./product/activityfeed/index.js";
 export * from "./product/appshell/index.js";
 export * from "./product/authshell/index.js";
 export * from "./product/board/index.js";
 export * from "./product/command/index.js";
 export * from "./product/entitycard/index.js";
 export * from "./product/flowcanvas/index.js";
+export * from "./product/headerbar/index.js";
 export * from "./product/inbox/index.js";
 export * from "./product/listpage/index.js";
 export * from "./product/navitem/index.js";

package/dist/esm/product/activityfeed/activityfeed.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { activityfeedRecipe } from "./activityfeed.recipe.js";
+/**
+ * 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.
+ */
+export function ActivityFeed({ className, children, ...rest }) {
+    return (_jsx("div", { className: 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. */
+export function ActivityFeedRow({ actor, action, when, children, }) {
+    return (_jsxs("div", { className: "crisp-activityfeed-row", children: [_jsxs("div", { className: "crisp-activityfeed-row-head", children: [actor, action, _jsx("span", { className: "crisp-activityfeed-row-spacer" }), _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. */
+export function ActivityFeedDiffItem({ field, before, after, }) {
+    return (_jsxs("li", { className: "crisp-activityfeed-diff-item", children: [_jsx("span", { className: "crisp-activityfeed-diff-field", children: field }), " ", before !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-activityfeed-diff-before", children: before }), " ", _jsx("span", { "aria-hidden": "true", children: "\u2192" }), " ", _jsx("span", { children: after })] })) : (_jsx("span", { children: after }))] }));
+}
+ActivityFeedDiffItem.displayName = "ActivityFeedDiffItem";
+export function ActivityFeedDiffList({ children, }) {
+    return _jsx("ul", { className: "crisp-activityfeed-diff", children: children });
+}
+ActivityFeedDiffList.displayName = "ActivityFeedDiffList";

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

@@ -0,0 +1,32 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "activityfeed",
+    base: `box-sizing: border-box; max-width: 767px; margin-inline: auto; padding: ${c.space["6"]};
+    display: flex; flex-direction: column; gap: ${c.space["4"]};
+    & .crisp-activityfeed-row { display: flex; flex-direction: column; gap: ${c.space["2"]}; padding-bottom: ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-activityfeed-row:last-of-type { border-bottom: none; padding-bottom: 0; }
+    & .crisp-activityfeed-row-head { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-activityfeed-row-spacer { flex: 1; }
+    & .crisp-activityfeed-row-when { font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .crisp-activityfeed-diff { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: ${c.space["1"]}; }
+    & .crisp-activityfeed-diff-item { padding-inline-start: ${c.space["8"]}; font-size: ${c.text.md}; }
+    & .crisp-activityfeed-diff-field { color: ${c.fgMuted}; }
+    & .crisp-activityfeed-diff-before { color: ${c.fgMuted}; text-decoration: line-through; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const activityfeedRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { ActivityFeed, ActivityFeedDiffItem, ActivityFeedDiffList, ActivityFeedRow, } from "./activityfeed.js";
+export { activityfeedRecipe } from "./activityfeed.recipe.js";

package/dist/esm/product/board/board.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { isRtlElement } from "../../core/index.js";
+import { isRtlElement, useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { boardRecipe } from "./board.recipe.js";
 /**
  * A kanban board with native drag-and-drop between columns. Cards are
@@ -8,7 +8,16 @@ import { boardRecipe } from "./board.recipe.js";
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from a deals pipeline.
  */
-export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", getCardLabel, announceMove = (column, card) => card ? `${card} moved to ${column}` : `Moved to ${column}`, className, ...rest }) {
+export 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 = useCrispMessage(newCardLabelProp, "New");
+    const crispMessages = 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("");
@@ -65,7 +74,7 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
                             move(dragId, col.id);
                         setDragId(null);
                         setOverCol(null);
-                    }, children: [_jsxs("div", { className: "crisp-board-col-header", children: [col.accent && (_jsx("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "crisp-board-col-title", children: col.title }), _jsx("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "crisp-board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "crisp-board-card", role: "listitem", 
+                    }, children: [_jsxs("div", { className: "crisp-board-col-header", children: [col.accent && (_jsx("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "crisp-board-col-title", children: col.title }), _jsx("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "crisp-board-col-add", "aria-label": `${crispMessages["Add to"] ?? "Add to"} ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_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/esm/product/command/command.js

@@ -5,7 +5,7 @@ import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { Building2, CircleDollarSign, House, ListTodo, Search, Settings, SquareCheck, User, UserPlus, } from "lucide-react";
 import * as React from "react";
 import { Kbd } from "../../components/kbd/index.js";
-import { cx, withDescribedBy } from "../../core/index.js";
+import { cx, useCrispMessage, useCrispMessages, withDescribedBy, } from "../../core/index.js";
 import { commandRecipe } from "./command.recipe.js";
 const IconHome = () => (_jsx(House, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
 const IconTasks = () => (_jsx(SquareCheck, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
@@ -110,7 +110,19 @@ function useCommandInstanceId() {
  * option list) so keyboard/focus correctness comes from the machines, not
  * hand-rolled event handling.
  */
-export function Command({ open, onOpenChange, items = 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 }) {
+export function Command({ open, onOpenChange, items = 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 = useCrispMessages();
+    const placeholder = useCrispMessage(placeholderProp, "Search actions and records…");
+    const ariaLabel = useCrispMessage(ariaLabelProp, "Command palette");
+    const navigateLabel = navigateLabelProp ?? crispMessages.Navigate ?? "Navigate";
+    const selectLabel = 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/esm/product/flowcanvas/flowcanvas.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Minus, Plus } from "lucide-react";
 import * as React from "react";
+import { useCrispMessage } from "../../core/index.js";
 import { flowcanvasRecipe } from "./flowcanvas.recipe.js";
 const GRID = 20;
 const clampZoom = (z) => Math.min(1.5, Math.max(0.5, z));
@@ -9,7 +10,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.
  */
-export 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 }) {
+export 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 = useCrispMessage(ariaLabelProp, "Flow canvas");
+    const zoomOutLabel = useCrispMessage(zoomOutLabelProp, "Zoom out");
+    const zoomInLabel = useCrispMessage(zoomInLabelProp, "Zoom in");
+    const resetLabel = useCrispMessage(resetLabelProp, "Reset");
+    const edgesLabel = useCrispMessage(edgesLabelProp, "Edges");
     const [pan, setPan] = React.useState({ x: 40, y: 40 });
     const [zoom, setZoom] = React.useState(1);
     const [panning, setPanning] = React.useState(false);
@@ -64,7 +71,7 @@ export function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth
             ...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: [_jsxs("div", { className: "crisp-flowcanvas-viewport", style: {
+        }, role: "application", "aria-label": ariaLabel, onPointerDown: onBackgroundPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsxs("div", { className: "crisp-flowcanvas-viewport", style: {
                     transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
                 }, children: [_jsxs("svg", { className: "crisp-flowcanvas-edges", "aria-hidden": "true", children: [_jsx("title", { children: edgesLabel }), edges.map((edge) => {
                                 const a = byId.get(edge.from);