@crisp-ui-kit/crisp 0.54.0 → 0.54.2

package/dist/activityfeed.css

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

package/dist/activityfeed.d.ts

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

package/dist/activityfeed.layered.css

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

package/dist/badge.css

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

package/dist/badge.d.ts

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

package/dist/badge.layered.css

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

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

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

package/dist/cjs/components/datatable/datatable.js

@@ -337,7 +337,7 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
-function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
+function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
     // crisp/#471: same resolution order as TableToolbar's own — an explicit
     // prop wins, then the provider's translation of the built-in English
     // default, then that default itself with no provider in the tree.
@@ -818,6 +818,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), viewSettingsLabel] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: columnsGroupLabel }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: resolvedCountLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+                    ...scrollProps,
                     ref: scrollRef,
                     onScroll: (e) => {
                         const el = e.currentTarget;

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

@@ -69,6 +69,10 @@ const config = (0, core_1.defineRecipe)({
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${tokens_1.contract.bgSurface}; }
     & th[data-sticky] { z-index: 3; }
+    /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
+       \`tfoot td { z-index: 2 }\`), which \`td[data-sticky]\`'s own higher-specificity
+       \`z-index: 1\` would otherwise undercut -- keep it level with the row it's in. */
+    & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mentionChipRecipe = exports.MentionChip = void 0;
+var mentionchip_1 = require("./mentionchip");
+Object.defineProperty(exports, "MentionChip", { enumerable: true, get: function () { return mentionchip_1.MentionChip; } });
+var mentionchip_recipe_1 = require("./mentionchip.recipe");
+Object.defineProperty(exports, "mentionChipRecipe", { enumerable: true, get: function () { return mentionchip_recipe_1.mentionChipRecipe; } });

package/dist/cjs/components/mentionchip/mentionchip.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MentionChip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const mentionchip_recipe_1 = require("./mentionchip.recipe");
+/**
+ * A standalone "@mention" chip — the same look `RichTextEditor` draws
+ * inline while an editor is live (`.crisp-rte-mention`), exported on its
+ * own for a consumer rendering a mention OUTSIDE a mounted editor: a
+ * comment thread, a note's collapsed preview, anywhere a stored
+ * `@[Name](actor:id)`-shaped token needs to read as a person, not literal
+ * markup. Renders whatever `children` is given (the trigger character
+ * included, if the caller wants one, matching how `RichTextEditor`'s own
+ * chip includes it) rather than assuming an `@` prefix itself — plain text,
+ * no built-in click/remove behaviour (none was asked for; add one once a
+ * real interaction is measured, the same reasoning `Chip`'s own doc gives
+ * for not guessing a remove affordance).
+ */
+exports.MentionChip = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, mentionchip_recipe_1.mentionChipRecipe)({ className }), ...props }));
+});
+exports.MentionChip.displayName = "MentionChip";

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spec = exports.mentionChipRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The exact same values `product/richtext`'s own inline "@mention" span
+// uses (`.crisp-rte-mention`, richtext.recipe.ts) — not re-measured against
+// Attio independently (#428's own doc: no live @mention was reachable to
+// read computed styles from, and typing one to create one is off-limits),
+// reused verbatim from the one measured "brand" tag/chip this repo already
+// has (Chip's own `tone="brand"`). Pulled out to its own top-level recipe,
+// rather than importing richtext's, because `.crisp-rte-mention`'s CSS is
+// nested under richtext's own root selector (`&`, i.e. native CSS
+// nesting) — it only resolves inside a mounted `RichTextEditor`. A
+// standalone consumer rendering a mention OUTSIDE an editor (a comment
+// thread, a note preview list) needs the same look with no such ancestor,
+// which is what this recipe is for. Kept deliberately un-pill-shaped (no
+// fixed height, no ring) unlike Chip's own `brand` tone: this reads as
+// tinted text flowing inside a sentence, the same as a live mention does
+// mid-edit, not a standalone tag sitting in its own table cell.
+const spec = (0, core_1.defineSpec)({
+    name: "mention-chip",
+    base: {
+        display: "inline",
+        borderRadius: tokens_1.contract.radius.chip,
+        paddingInline: tokens_1.contract.space["1"],
+        background: `color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent)`,
+        color: `color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary})`,
+        fontWeight: tokens_1.contract.weight.medium,
+        cursor: "default",
+    },
+});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.mentionChipRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

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

@@ -11,18 +11,30 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "table",
     base: `display: block; box-sizing: border-box; background: ${tokens_1.contract.bgSurface};
-    & .crisp-table-scroll { overflow-x: auto; }
+    /* #554: both axes -- a consumer bounds the height via \`scrollProps\`
+       (style/className on this element), and the header/footer below pin
+       inside it exactly the way Attio's own grid does ("Both the header and
+       the summary row are sticky, on the scroll container rather than the
+       cells" -- docs/study/attio-table.md). Unbounded, \`overflow: auto\`
+       shows no vertical scrollbar and nothing sticks, so this is a no-op
+       for every existing consumer that never set a height. */
+    & .crisp-table-scroll { overflow: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
     /* #465: 12px, not crisp's old 8px -- measured on a live header cell
        (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
        ColumnCalc's own already-correct 12px trigger inset. */
     & th, & td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    & th { height: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); user-select: none; }
+    /* #554: sticky on the vertical axis, mirroring RecordsTable's own
+       \`.crisp-recordstable-th\`. z-index 2 sits above a plain body cell (auto)
+       and below a sticky-column corner cell (DataTable's \`th[data-sticky]\`,
+       z-index 3), so the corner always wins. */
+    & th { position: sticky; top: 0; z-index: 2; height: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); user-select: none; }
     & td { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
-    & tfoot td { border-top: 1px solid ${tokens_1.contract.borderSubtle}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    /* #554: sticky to the bottom, mirroring \`.crisp-recordstable-sum\`. */
+    & tfoot td { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid ${tokens_1.contract.borderSubtle}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     & caption { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]}; text-align: start; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; caption-side: bottom; }
     & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }`,

package/dist/cjs/core/floating-stack.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerFloatingLayer = registerFloatingLayer;
 exports.isInsideLaterFloatingLayer = isInsideLaterFloatingLayer;
+exports.hasNestedFloatingLayer = hasNestedFloatingLayer;
 exports.hasOpenFloatingLayer = hasOpenFloatingLayer;
 /**
  * Tracks every currently-open `FloatingPortal` layer, in open order, so a
@@ -53,6 +54,23 @@ function isInsideLaterFloatingLayer(target, self) {
     }
     return false;
 }
+/**
+ * True when a layer is registered strictly after `self` — i.e. `self` has
+ * spawned a still-open nested layer of its own (a row's kebab `Menu` inside
+ * `SavedViews`' own panel, e.g.).
+ *
+ * This is `hasOpenFloatingLayer`'s sibling for a caller that DOES register
+ * itself on this stack: `hasOpenFloatingLayer` reads "is the stack
+ * non-empty", which is always true for such a caller once its own layer is
+ * open — checking that before closing on Escape would defer to itself
+ * forever and Escape would never close it. `self`'s own position on the
+ * stack has to be excluded from the count, which `hasOpenFloatingLayer`
+ * cannot do since it takes no argument.
+ */
+function hasNestedFloatingLayer(self) {
+    const selfIndex = self ? stack.indexOf(self) : -1;
+    return selfIndex + 1 < stack.length;
+}
 /**
  * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
  * `ContextMenu` is currently open, anywhere (#361).

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.useCrispComponentDefaults = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
+exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.useCrispComponentDefaults = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.hasNestedFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
 var caret_rect_1 = require("./caret-rect");
 Object.defineProperty(exports, "caretRectInField", { enumerable: true, get: function () { return caret_rect_1.caretRectInField; } });
 var cell_date_1 = require("./cell-date");
@@ -32,6 +32,7 @@ Object.defineProperty(exports, "isRtlElement", { enumerable: true, get: function
 var floating_portal_1 = require("./floating-portal");
 Object.defineProperty(exports, "FloatingPortal", { enumerable: true, get: function () { return floating_portal_1.FloatingPortal; } });
 var floating_stack_1 = require("./floating-stack");
+Object.defineProperty(exports, "hasNestedFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.hasNestedFloatingLayer; } });
 Object.defineProperty(exports, "hasOpenFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.hasOpenFloatingLayer; } });
 Object.defineProperty(exports, "isInsideLaterFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.isInsideLaterFloatingLayer; } });
 Object.defineProperty(exports, "registerFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.registerFloatingLayer; } });

package/dist/cjs/index.js

@@ -49,6 +49,7 @@ __exportStar(require("./components/heatmapchart"), exports);
 __exportStar(require("./components/input"), exports);
 __exportStar(require("./components/kbd"), exports);
 __exportStar(require("./components/linechart"), exports);
+__exportStar(require("./components/mentionchip"), exports);
 __exportStar(require("./components/menu"), exports);
 __exportStar(require("./components/middletruncate"), exports);
 __exportStar(require("./components/multiselect"), exports);
@@ -81,13 +82,16 @@ __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);
 __exportStar(require("./product/command"), exports);
 __exportStar(require("./product/entitycard"), exports);
 __exportStar(require("./product/flowcanvas"), exports);
+__exportStar(require("./product/formdialog"), exports);
 __exportStar(require("./product/headerbar"), exports);
+__exportStar(require("./product/importdialog"), exports);
 __exportStar(require("./product/inbox"), exports);
 __exportStar(require("./product/listpage"), exports);
 __exportStar(require("./product/navitem"), exports);
@@ -96,11 +100,14 @@ __exportStar(require("./product/recordpage"), exports);
 __exportStar(require("./product/recordpanel"), exports);
 __exportStar(require("./product/recordstable"), exports);
 __exportStar(require("./product/richtext"), exports);
+__exportStar(require("./product/savedviews"), exports);
 __exportStar(require("./product/settingssection"), exports);
 __exportStar(require("./product/settingsshell"), exports);
 __exportStar(require("./product/sidebar"), exports);
 __exportStar(require("./product/statlist"), exports);
 __exportStar(require("./product/tasklist"), exports);
+__exportStar(require("./product/taskstable"), exports);
+__exportStar(require("./product/themepicker"), exports);
 __exportStar(require("./product/trialbanner"), exports);
 __exportStar(require("./product/viewtoggle"), exports);
 // design tokens + recipe core (for building custom components)

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