@crisp-ui-kit/crisp 0.54.0 → 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/index.js

@@ -81,6 +81,7 @@ __exportStar(require("./core"), exports);
 // 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);

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

@@ -65,6 +65,7 @@ export * from "./core/index.js";
 // 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";

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

@@ -147,6 +147,14 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     // (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 ?? "") === "");
@@ -458,6 +466,20 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
         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();
@@ -522,10 +544,31 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
                     } })), _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/esm/tokens/palette.js

@@ -97,4 +97,18 @@ export const 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/esm/tokens/semantic.js

@@ -60,4 +60,9 @@ export const 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/native/tokens.d.ts

@@ -2,7 +2,7 @@
 // The same tokens the CSS custom properties carry, resolved per theme, with
 // dimensions as numbers for React Native and Lynx style objects.
 export type Theme = "light" | "dark";
-export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft", string>;
+export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft", string>;
 export declare const tokens: {
   color: Record<Theme, ColorTokens>;
   palette: Record<Theme, Record<string, string>>;

package/dist/native/tokens.js

@@ -49,7 +49,10 @@ export const tokens = {
       "fgSuccessSoft": "#186b3d",
       "fgWarningSoft": "#80520d",
       "fgDangerSoft": "#a33539",
-      "fgNeutralSoft": "#686870"
+      "fgNeutralSoft": "#686870",
+      "bgPurpleSoft": "#f5f0ff",
+      "fgPurpleSoft": "#6238b5",
+      "ringPurpleSoft": "#e8ddfe"
     },
     "dark": {
       "bgBrandSolid": "#266df0",
@@ -97,7 +100,10 @@ export const tokens = {
       "fgSuccessSoft": "#2ea968",
       "fgWarningSoft": "#e0982a",
       "fgDangerSoft": "#ff5a5f",
-      "fgNeutralSoft": "#9a9aa2"
+      "fgNeutralSoft": "#9a9aa2",
+      "bgPurpleSoft": "#f5f0ff",
+      "fgPurpleSoft": "#6238b5",
+      "ringPurpleSoft": "#e8ddfe"
     }
   },
   "palette": {
@@ -146,7 +152,10 @@ export const tokens = {
       "softSuccessText": "#186b3d",
       "softWarningText": "#80520d",
       "softDangerText": "#a33539",
-      "softNeutralText": "#686870"
+      "softNeutralText": "#686870",
+      "purpleTint": "#f5f0ff",
+      "softPurpleText": "#6238b5",
+      "purpleRing": "#e8ddfe"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -193,7 +202,10 @@ export const tokens = {
       "softSuccessText": "#2ea968",
       "softWarningText": "#e0982a",
       "softDangerText": "#ff5a5f",
-      "softNeutralText": "#9a9aa2"
+      "softNeutralText": "#9a9aa2",
+      "purpleTint": "#f5f0ff",
+      "softPurpleText": "#6238b5",
+      "purpleRing": "#e8ddfe"
     }
   },
   "space": {

package/dist/styles.css

@@ -45,6 +45,9 @@
   --crisp-fg-warning-soft: #80520d;
   --crisp-fg-danger-soft: #a33539;
   --crisp-fg-neutral-soft: #686870;
+  --crisp-bg-purple-soft: #f5f0ff;
+  --crisp-fg-purple-soft: #6238b5;
+  --crisp-ring-purple-soft: #e8ddfe;
 }
 
 [data-theme="dark"] {
@@ -94,6 +97,9 @@
   --crisp-fg-warning-soft: #e0982a;
   --crisp-fg-danger-soft: #ff5a5f;
   --crisp-fg-neutral-soft: #9a9aa2;
+  --crisp-bg-purple-soft: #f5f0ff;
+  --crisp-fg-purple-soft: #6238b5;
+  --crisp-ring-purple-soft: #e8ddfe;
 }
 
 :root {
@@ -224,6 +230,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);
 }
@@ -1869,6 +1878,19 @@
     & .crisp-wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
 }
 
+.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; }
+}
+
 .crisp-appshell {
   display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }

package/dist/styles.layered.css

@@ -45,6 +45,9 @@
   --crisp-fg-warning-soft: #80520d;
   --crisp-fg-danger-soft: #a33539;
   --crisp-fg-neutral-soft: #686870;
+  --crisp-bg-purple-soft: #f5f0ff;
+  --crisp-fg-purple-soft: #6238b5;
+  --crisp-ring-purple-soft: #e8ddfe;
 }
 
 [data-theme="dark"] {
@@ -94,6 +97,9 @@
   --crisp-fg-warning-soft: #e0982a;
   --crisp-fg-danger-soft: #ff5a5f;
   --crisp-fg-neutral-soft: #9a9aa2;
+  --crisp-bg-purple-soft: #f5f0ff;
+  --crisp-fg-purple-soft: #6238b5;
+  --crisp-ring-purple-soft: #e8ddfe;
 }
 
 :root {
@@ -225,6 +231,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);
 }
@@ -1870,6 +1879,19 @@
     & .crisp-wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
 }
 
+.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; }
+}
+
 .crisp-appshell {
   display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }

package/dist/tokens.css

@@ -45,6 +45,9 @@
   --crisp-fg-warning-soft: #80520d;
   --crisp-fg-danger-soft: #a33539;
   --crisp-fg-neutral-soft: #686870;
+  --crisp-bg-purple-soft: #f5f0ff;
+  --crisp-fg-purple-soft: #6238b5;
+  --crisp-ring-purple-soft: #e8ddfe;
 }
 
 [data-theme="dark"] {
@@ -94,6 +97,9 @@
   --crisp-fg-warning-soft: #e0982a;
   --crisp-fg-danger-soft: #ff5a5f;
   --crisp-fg-neutral-soft: #9a9aa2;
+  --crisp-bg-purple-soft: #f5f0ff;
+  --crisp-fg-purple-soft: #6238b5;
+  --crisp-ring-purple-soft: #e8ddfe;
 }
 
 :root {

package/dist/tokens.json

@@ -46,7 +46,10 @@
       "fgSuccessSoft": "#186b3d",
       "fgWarningSoft": "#80520d",
       "fgDangerSoft": "#a33539",
-      "fgNeutralSoft": "#686870"
+      "fgNeutralSoft": "#686870",
+      "bgPurpleSoft": "#f5f0ff",
+      "fgPurpleSoft": "#6238b5",
+      "ringPurpleSoft": "#e8ddfe"
     },
     "dark": {
       "bgBrandSolid": "#266df0",
@@ -94,7 +97,10 @@
       "fgSuccessSoft": "#2ea968",
       "fgWarningSoft": "#e0982a",
       "fgDangerSoft": "#ff5a5f",
-      "fgNeutralSoft": "#9a9aa2"
+      "fgNeutralSoft": "#9a9aa2",
+      "bgPurpleSoft": "#f5f0ff",
+      "fgPurpleSoft": "#6238b5",
+      "ringPurpleSoft": "#e8ddfe"
     }
   },
   "palette": {
@@ -143,7 +149,10 @@
       "softSuccessText": "#186b3d",
       "softWarningText": "#80520d",
       "softDangerText": "#a33539",
-      "softNeutralText": "#686870"
+      "softNeutralText": "#686870",
+      "purpleTint": "#f5f0ff",
+      "softPurpleText": "#6238b5",
+      "purpleRing": "#e8ddfe"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -190,7 +199,10 @@
       "softSuccessText": "#2ea968",
       "softWarningText": "#e0982a",
       "softDangerText": "#ff5a5f",
-      "softNeutralText": "#9a9aa2"
+      "softNeutralText": "#9a9aa2",
+      "purpleTint": "#f5f0ff",
+      "softPurpleText": "#6238b5",
+      "purpleRing": "#e8ddfe"
     }
   },
   "space": {

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

@@ -13,6 +13,7 @@ export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedH
         readonly success: string;
         readonly warning: string;
         readonly danger: string;
+        readonly purple: string;
     };
     readonly size: {
         readonly small: string;
@@ -31,6 +32,7 @@ export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedH
             readonly success: string;
             readonly warning: string;
             readonly danger: string;
+            readonly purple: string;
         };
         readonly size: {
             readonly small: string;

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

@@ -48,6 +48,11 @@ declare const spec: {
                 color: `var(--${string})`;
                 boxShadow: string;
             };
+            readonly purple: {
+                readonly background: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly boxShadow: `inset 0 0 0 1px var(--${string})`;
+            };
         };
         readonly size: {
             readonly small: {
@@ -128,6 +133,7 @@ declare const config: import("../..").RecipeConfig<{
         readonly success: string;
         readonly warning: string;
         readonly danger: string;
+        readonly purple: string;
     };
     readonly size: {
         readonly small: string;
@@ -146,6 +152,7 @@ export declare const badgeRecipe: import("../..").RecipeFn<{
         readonly success: string;
         readonly warning: string;
         readonly danger: string;
+        readonly purple: string;
     };
     readonly size: {
         readonly small: string;
@@ -164,6 +171,7 @@ export declare const badgeRecipe: import("../..").RecipeFn<{
             readonly success: string;
             readonly warning: string;
             readonly danger: string;
+            readonly purple: string;
         };
         readonly size: {
             readonly small: string;

package/dist/types/index.d.ts

@@ -57,6 +57,7 @@ export * from "./components/tooltip";
 export * from "./components/visuallyhidden";
 export * from "./components/wheelpicker";
 export * from "./core";
+export * from "./product/activityfeed";
 export * from "./product/appshell";
 export * from "./product/authshell";
 export * from "./product/board";

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

@@ -0,0 +1,57 @@
+import type * as React from "react";
+export type ActivityFeedProps = React.ComponentPropsWithoutRef<"div"> & {
+    className?: string;
+};
+/**
+ * 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 declare function ActivityFeed({ className, children, ...rest }: ActivityFeedProps): React.JSX.Element;
+export declare namespace ActivityFeed {
+    var displayName: string;
+}
+export type ActivityFeedRowProps = {
+    /** Who did it — a chip, an avatar+name, whatever the consumer's identity
+     *  treatment is. crisp renders no actor chip of its own. */
+    actor: React.ReactNode;
+    /** What happened — a tag/badge naming the action. */
+    action: React.ReactNode;
+    /** When — already formatted for display. */
+    when: React.ReactNode;
+    /** An optional field-level diff list under the row (see
+     *  `ActivityFeedDiffItem`). */
+    children?: React.ReactNode;
+};
+/** One event row: actor + action + timestamp, with an optional diff list
+ *  underneath. The last row in an `ActivityFeed` draws no divider. */
+export declare function ActivityFeedRow({ actor, action, when, children, }: ActivityFeedRowProps): React.JSX.Element;
+export declare namespace ActivityFeedRow {
+    var displayName: string;
+}
+export type ActivityFeedDiffItemProps = {
+    /** The changed field's label. */
+    field: React.ReactNode;
+    /** The prior value, already formatted — omit for a "set to" (no known
+     *  prior value) row. */
+    before?: React.ReactNode;
+    /** The new value, already formatted. */
+    after: React.ReactNode;
+};
+/** One changed-field line under an `ActivityFeedRow` — "Field: before →
+ *  after", or "Field: set to after" when there is no known prior value. */
+export declare function ActivityFeedDiffItem({ field, before, after, }: ActivityFeedDiffItemProps): React.JSX.Element;
+export declare namespace ActivityFeedDiffItem {
+    var displayName: string;
+}
+export declare function ActivityFeedDiffList({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace ActivityFeedDiffList {
+    var displayName: string;
+}

package/dist/types/product/activityfeed/activityfeed.recipe.d.ts

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

package/dist/types/product/activityfeed/index.d.ts

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

package/dist/types/tokens/contract.d.ts

@@ -47,6 +47,9 @@ export declare const contract: MapLeafNodes<{
     fgWarningSoft: "softWarningText";
     fgDangerSoft: "softDangerText";
     fgNeutralSoft: "softNeutralText";
+    bgPurpleSoft: "purpleTint";
+    fgPurpleSoft: "softPurpleText";
+    ringPurpleSoft: "purpleRing";
 }, `var(--${string})`> & {
     space: Record<"0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "8" | "px", `var(--${string})`>;
     radius: Record<"2xl" | "chip" | "full" | "lg" | "md" | "sm" | "xl", `var(--${string})`>;

package/dist/types/tokens/palette.d.ts

@@ -179,5 +179,17 @@ export declare const palette: {
         readonly light: "#686870";
         readonly dark: "#9a9aa2";
     };
+    readonly purpleTint: {
+        readonly light: "#f5f0ff";
+        readonly dark: "#f5f0ff";
+    };
+    readonly softPurpleText: {
+        readonly light: "#6238b5";
+        readonly dark: "#6238b5";
+    };
+    readonly purpleRing: {
+        readonly light: "#e8ddfe";
+        readonly dark: "#e8ddfe";
+    };
 };
 export type PaletteKey = keyof typeof palette;

package/dist/types/tokens/semantic.d.ts

@@ -55,5 +55,10 @@ export declare const 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";
 };
 export type Tokens = typeof semantic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.54.0",
+  "version": "0.54.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -323,6 +323,11 @@
       "import": "./dist/esm/components/wheelpicker/index.js",
       "require": "./dist/cjs/components/wheelpicker/index.js"
     },
+    "./activityfeed": {
+      "types": "./dist/types/product/activityfeed/index.d.ts",
+      "import": "./dist/esm/product/activityfeed/index.js",
+      "require": "./dist/cjs/product/activityfeed/index.js"
+    },
     "./appshell": {
       "types": "./dist/types/product/appshell/index.d.ts",
       "import": "./dist/esm/product/appshell/index.js",