@crisp-ui-kit/crisp 0.56.0 → 0.57.1

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

@@ -21,11 +21,32 @@ const config = (0, core_1.defineRecipe)({
     variants: {
         tone: {
             // The bold, always-brand-coloured trailing link a Card's own `action`
-            // slot uses ("View all →", "All registers →").
-            brand: `font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.bgBrandSolid};`,
+            // slot uses ("View all →", "All registers →"). your-moon/crisp#897:
+            // `fgBrandContrast`, not `bgBrandSolid` (#0298d9) directly -- as TEXT
+            // on a white page the accent itself only clears 3.23:1; the darker
+            // contrast-safe sibling clears 4.5:1+.
+            brand: `font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgBrandContrast};`,
             // A quieter in-context reference (a sample record under a finding)
             // that only goes brand on hover.
-            muted: `font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgMuted}; &:hover { color: ${tokens_1.contract.bgBrandSolid}; }`,
+            muted: `font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgMuted}; &:hover { color: ${tokens_1.contract.fgBrandContrast}; }`,
+        },
+        // crisp#874: an explicit, OPTIONAL size override -- no `defaultVariants`
+        // entry below, so omitting `size` emits no `--size_*` class at all and
+        // each tone's own hard-coded font-size (above) stands completely
+        // unchanged. Only when a caller passes `size` explicitly does this
+        // override it: `size`'s CSS block is emitted AFTER `tone`'s in the
+        // generated stylesheet (`generate-recipes.mjs` walks `variants` in
+        // object-key order), so at equal specificity it wins the cascade.
+        // Measured live (a running GRC server, `getComputedStyle`):
+        // internal/grc's two primary-column record links
+        // (routes/lists/Lists.tsx:51, routes/registers/Registers.tsx:63) are
+        // 14px/500 ambient, inherited from DataTable's own
+        // `.crisp-datatable-entity-name` -- `size="lg"` matches that context
+        // without changing `brand`'s weight/colour.
+        size: {
+            sm: `font-size: ${tokens_1.contract.text.sm};`,
+            md: `font-size: ${tokens_1.contract.text.md};`,
+            lg: `font-size: ${tokens_1.contract.text.lg};`,
         },
     },
     defaultVariants: { tone: "muted" },

package/dist/cjs/index.js

@@ -18,6 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 // primitives (components/)
+__exportStar(require("./components/accentpicker"), exports);
 __exportStar(require("./components/accordion"), exports);
 __exportStar(require("./components/avatar"), exports);
 __exportStar(require("./components/avatargroup"), exports);

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

@@ -41,12 +41,14 @@ const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
 const checkbox_1 = require("../../components/checkbox");
+const drawer_1 = require("../../components/drawer");
 const menu_1 = require("../../components/menu");
 const select_1 = require("../../components/select");
 const spinner_1 = require("../../components/spinner");
 const switch_1 = require("../../components/switch");
 const tabs_1 = require("../../components/tabs");
 const core_1 = require("../../core");
+const comments_1 = require("../comments");
 const column_1 = require("./column");
 const editable_field_1 = require("./editable-field");
 const recordpage_recipe_1 = require("./recordpage.recipe");
@@ -71,19 +73,32 @@ exports.recordPageLabels = {
     breadcrumb: "Breadcrumb",
     editRecord: "Edit record",
     recordActions: "Record actions",
-    addToFavourites: "Add to favourites",
-    removeFromFavourites: "Remove from favourites",
+    // US spelling, matching Attio's own live text exactly (#621) — this string
+    // is shared with the entity header's favourite-star aria-label, so both
+    // read "favorites" now, not just the menu.
+    addToFavourites: "Add to favorites",
+    removeFromFavourites: "Remove from favorites",
     copyRecordLink: "Copy record link",
+    configurePage: "Configure page",
+    copyPageUrl: "Copy page URL",
+    copyRecordId: "Copy record ID",
+    mergeRecords: "Merge records",
     deleteRecord: "Delete record",
     linkRecords: "Link records",
-    logANote: "Log a note",
-    createATask: "Create a task",
+    // Tooltip copy re-measured live for #865 (was "Log a note"/"Create a
+    // task" — the field names stay, only the visible text changes to match
+    // Attio's own React-tooltip strings on these two icon buttons exactly).
+    logANote: "New note",
+    createATask: "New task",
+    runWorkflow: "Run workflow",
     fullScreen: "Full screen",
     exitFullScreen: "Exit full screen",
     resizeDetails: "Resize details column",
     composeEmail: "Compose email",
     askAttio: "Ask AI",
     addToList: "Add to list",
+    share: "Share",
+    comments: "Comments",
     noLists: "This record has not been added to any lists.",
     highlights: "Highlights",
     recordDetails: "Record Details",
@@ -457,7 +472,7 @@ RecordDetails.displayName = "RecordDetails";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, ...rest }) {
+function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, comments: commentsProp, onPostComment, currentUser, onShare, ...rest }) {
     const t = useRecordPageLabels(labels);
     const [favorite, setFavorite] = React.useState(false);
     // Notes/Tasks are controlled when the caller supplies `notes`/`tasks` (even
@@ -469,6 +484,11 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const [internalTasks, setInternalTasks] = React.useState([]);
     const notes = notesProp ?? internalNotes;
     const tasks = tasksProp ?? internalTasks;
+    // Comments follow the same controlled/self-contained duality (#864).
+    const [internalComments, setInternalComments] = React.useState([]);
+    const comments = commentsProp ?? internalComments;
+    const [commentsOpen, setCommentsOpen] = React.useState(false);
+    const me = currentUser ?? { id: "me", name: "You" };
     const [showAllActivity, setShowAllActivity] = React.useState(false);
     // Drag-resizable left details column.
     const [detailsW, setDetailsW] = React.useState(DETAILS_DEFAULT_W);
@@ -566,6 +586,15 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         },
     ];
     const highlights = highlightsProp === undefined ? defaultHighlights : highlightsProp;
+    // #865: the built-in CRM icon set for the quick-action row, used when the
+    // caller omits `quickActions` -- same "caller's own list, not a merge"
+    // choice `tabs` (#379) and `highlights` (#528) already make.
+    const defaultQuickActions = [
+        { label: t.logANote, icon: lucide_react_1.FileText },
+        { label: t.runWorkflow, icon: lucide_react_1.Workflow },
+        { label: t.createATask, icon: lucide_react_1.SquareCheck },
+    ];
+    const quickActions = quickActionsProp ?? defaultQuickActions;
     const ti = { size: 15, strokeWidth: 1.75 };
     const builtinTabs = [
         { value: "overview", label: t.tabs.overview, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { ...ti }) },
@@ -618,6 +647,31 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         }
         setInternalTasks((n) => n.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
     };
+    const postComment = (text, threadId) => {
+        if (commentsProp) {
+            onPostComment?.(text, threadId);
+            return;
+        }
+        if (threadId == null) {
+            setInternalComments((prev) => [
+                {
+                    id: nextId(),
+                    root: { id: nextId(), author: me, time: t.justNow, body: text },
+                },
+                ...prev,
+            ]);
+            return;
+        }
+        setInternalComments((prev) => prev.map((th) => th.id === threadId
+            ? {
+                ...th,
+                replies: [
+                    ...(th.replies ?? []),
+                    { id: nextId(), author: me, time: t.justNow, body: text },
+                ],
+            }
+            : th));
+    };
     // A small, plausible activity feed derived from the record's own fields.
     const domain = byKey.get("domain");
     const cats = byKey.get("categories");
@@ -674,7 +728,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
                                 return;
                             // The pointer drag learned its direction in #212; this did not.
@@ -686,6 +740,6 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                             setDetailsW((w) => grow
                                 ? Math.min(DETAILS_MAX_W, w + 16)
                                 : Math.max(DETAILS_MIN_W, w - 16));
-                        } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] })] }));
+                        } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), (0, jsx_runtime_1.jsx)(drawer_1.Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(comments_1.CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
 }
 RecordPage.displayName = "RecordPage";

package/dist/cjs/tokens/elevation.js

@@ -59,4 +59,11 @@ exports.elevation = {
      * nobody measured for them.
      */
     fieldNoRing: `0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`,
+    /**
+     * Select's own listbox shadow (crisp/#867) — seed-design's `$shadow.s3`, a
+     * single layer, NOT `floating` above. This component follows seed, not
+     * Attio, for the same reason `DatePicker` follows seed's calendar
+     * structure: an explicit owner request to match seed-design exactly.
+     */
+    selectFloating: `0 4px 16px ${contract_1.contract.shadowSelect}`,
 };

package/dist/cjs/tokens/palette.js

@@ -8,9 +8,14 @@ exports.palette = {
     // on a bright tone fill. Same value as gray900's light side (the measured
     // near-black), named separately because its job is not "primary foreground".
     ink: { light: "#101112", dark: "#101112" },
-    gray50: { light: "#f4f4f5", dark: "#101112" },
+    // seed-identity migration (your-moon/crisp#890): seed's bg.layer-default-
+    // pressed / gray-100. Light side only — dark is untouched, unmeasured
+    // Attio territory this migration doesn't scope into.
+    gray50: { light: "#f7f8f9", dark: "#101112" },
     gray900: { light: "#101112", dark: "#f5f5f5" },
-    line200: { light: "#e4e4e7", dark: "#212224" },
+    // seed-identity migration (your-moon/crisp#890): seed's stroke.neutral-
+    // weak / gray-400. Light side only, same scoping as `gray50` above.
+    line200: { light: "#dcdee3", dark: "#212224" },
     line100: { light: "#eeeff1", dark: "#1c1d1f" },
     // ImportDialog's dropzone border — measured live from Attio's Import CSV
     // flow (`rgb(230,231,234)`), distinct from `line200`/`line100` (#e4e4e7 /
@@ -22,8 +27,11 @@ exports.palette = {
     line150: { light: "#e6e7ea", dark: "#212224" },
     // The filter chip's field/value segments while the condition is
     // incomplete (no value typed yet) — measured live on Attio's own filter
-    // chip (`rgb(246,247,247)`), lighter than `gray50` (#f4f4f5, close but not
-    // equal). The chip's operator/kebab segments stay `gray00` in the same
+    // chip (`rgb(246,247,247)`), close to but not equal to `gray50`
+    // (`#f7f8f9` since the seed-identity migration, your-moon/crisp#890 — the
+    // two used to differ the other direction, gray25 lighter; the relative
+    // order isn't the point, staying off `gray50` while remaining a
+    // near-neighbour is). The chip's operator/kebab segments stay `gray00` in the same
     // state; only the two text-content segments carry this muted fill. Dark
     // value not independently re-measured (Attio's dark theme is off-limits to
     // toggle) — reuses `gray50`'s dark value, the nearest existing "muted
@@ -47,6 +55,15 @@ exports.palette = {
     // both themes (Switch's own spec), so this reuses ringField's dark value
     // rather than inventing a third "field-adjacent ring, dark" colour.
     ringSwitch: { light: "#d9dade", dark: "#212224" },
+    // Callout's bordered/banner look (crisp#869) — measured live on Attio's
+    // Objects settings page (the "Create custom objects... Upgrade" Pro-plan
+    // banner): `border: 1px solid rgb(214,229,255)`, an opaque colour, not a
+    // composited tint of `bgBrandSolid` (checked: no single color-mix
+    // percentage matches all three channels at once). Dark value not
+    // independently re-measured (Attio's own theme toggle is off-limits) —
+    // reuses `ringField`/`ringSwitch`'s existing dark ring (#212224), the same
+    // "edge visible against a dark surface" role those already establish.
+    ringBrandSoft: { light: "#d6e5ff", dark: "#212224" },
     tileActive: { light: "#ffffff", dark: "#101112" },
     tileActiveShadow: { light: "rgba(0,0,0,0.04)", dark: "rgba(0,0,0,0)" },
     // Dialog's page-dimming backdrop (crisp#677) — measured live behind the
@@ -75,25 +92,54 @@ exports.palette = {
     shadowPopover2: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.24)" },
     shadowPopover3: { light: "rgba(24,41,75,0.16)", dark: "rgba(0,0,0,0.32)" },
     gray400: { light: "#71717a", dark: "#9a9aa2" },
-    brand600: { light: "#266df0", dark: "#266df0" },
-    brand700: { light: "#1f5fd6", dark: "#1f5fd6" },
-    red600: { light: "#e5484d", dark: "#ff5a5f" },
-    // A red dark enough to carry white text. red600 cannot: white on it is
-    // 3.91:1 light / 3.05:1 dark, and the solid button's hover DARKENS the fill
-    // (filter: brightness), so dark ink fails there instead (4.49 at hover).
-    // Measured from the reference stylesheet, which ships this red alongside the
-    // #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
-    // destructive control needs the same white-bearing fill in both themes.
-    red700: { light: "#ba2525", dark: "#ba2525" },
-    // The #EB3B3B named in red700's own comment above (destructive menu text) —
-    // it had never actually been given a token. Independently re-measured live
-    // on `app.attio.com/.../tasks`, `rgb(235,59,59)`, as the overdue due-date
-    // text colour on the Tasks page (crisp#462) — same hex, second surface.
-    // Dark not independently re-measured (Attio's theme toggle is off-limits,
-    // same restriction noted throughout this file); reuses red600's dark value,
-    // the same "brightens for legibility on a dark surface" tone this red
-    // already sits next to, rather than inventing a third red.
-    red500: { light: "#eb3b3b", dark: "#ff5a5f" },
+    // seed-identity migration (your-moon/crisp#890, "Attio structure, seed
+    // look"): the owner's TechPartners primary (#0298D9, sourced from the
+    // official logo SVG + the live site's own compiled CSS — see
+    // ~/grc-parity/seed-identity-spec.md §1) replaces the old measured-from-
+    // Attio brand blue, built as seed's own carrot-scale RELATIVE lightness
+    // shape around that exact hex at step 600 ("Method A" in the spec — the
+    // verified logo hex stays literally in the scale, at the step that's
+    // actually rendered, rather than a mathematically tidier neighbour).
+    // Does not flip with theme, matching this token's own prior precedent.
+    brand600: { light: "#0298d9", dark: "#0298d9" },
+    // Method A's raw carrot-shape output (L 37.1%) — the hover/pressed-darken
+    // step of the ACCENT colour above, same role brand700 has always had.
+    // Not tuned for any particular contrast target; see `brandContrast` below
+    // for the token that carries that job.
+    brand700: { light: "#0283bb", dark: "#0283bb" },
+    // your-moon/crisp#897: #0298d9 (the verified brand hex, kept exactly as
+    // the ACCENT everywhere else — focus rings, selected states, icons,
+    // tints) only clears 3.23:1 against white, short of the 4.5:1 a SOLID
+    // fill carrying white text needs (Button primary, Badge solid+brand,
+    // Avatar's brand tone), or brand-coloured TEXT sitting directly on a white
+    // page (TextLink/Text's brand tone). This is that darker, AA-safe step —
+    // same hue (198°), L dropped to 34% — clearing 4.88:1 with white. An
+    // earlier round of this fix used dark ink text instead of finding this
+    // value; that read off-brand (seed's own solid buttons use white) and got
+    // reverted in favour of this.
+    brandContrast: { light: "#0278ac", dark: "#0278ac" },
+    // seed's red-700 (fg.critical) — the accent used for plain danger TEXT
+    // (an overdue due-date, a destructive menu label) and for tinting
+    // (Chip/Badge's soft-danger `color-mix()` inputs). NOT used for a solid
+    // fill paired with white text — see `red700` below for why that split
+    // matters here specifically.
+    red600: { light: "#fa342c", dark: "#ff5a5f" },
+    // seed's red-800 (bg.critical-solid-**pressed**), not red-700
+    // (bg.critical-solid-enabled, `red600` above) — deliberately the darker
+    // of the two. `red700` is crisp's SOLID destructive fill (Button danger,
+    // Badge solid+danger), which pairs with white text and, on Button,
+    // DARKENS further on hover/active via a brightness filter (not a second
+    // token, per this token's own original comment below this migration note
+    // — that invariant is why a dark-enough red matters at all). Seed's own
+    // red-700 only clears 3.76:1 with white (measured) — short of AA even
+    // before any hover darkening — so reusing crisp's existing "needs to
+    // survive getting darker" role means red-800 (5.68:1 at rest, improving
+    // through hover/active) is the correct step, not seed's literal
+    // "enabled" one. `red500` below is pure text again (no fill/contrast
+    // constraint), so it stays on the
+    // lighter red-700, matching seed exactly.
+    red700: { light: "#ca1d13", dark: "#ba2525" },
+    red500: { light: "#fa342c", dark: "#ff5a5f" },
     // seed-design's field focus ring (stroke-neutral-contrast = gray-1000),
     // measured from @seed-design/css. A high-contrast neutral rather than a brand
     // hue: the ring reads as "this field has focus", not as a state colour.
@@ -113,8 +159,25 @@ exports.palette = {
     neutralSubtle: { light: "#868b94", dark: "#b0b3ba" },
     neutralMuted: { light: "#555d6d", dark: "#dcdee3" },
     focusRing: { light: "#1e82eb", dark: "#5e98fe" },
-    green600: { light: "#1f9d57", dark: "#2ea968" },
-    amber600: { light: "#b5730f", dark: "#e0982a" },
+    // seed's fg.positive / bg.positive-solid (green-700).
+    green600: { light: "#079171", dark: "#2ea968" },
+    // seed's fg.warning / stroke.warning-solid (yellow-700) — the ACCENT used
+    // for tinting (Badge/Chip's `soft()`/`ring()` colour-mix formulas), not
+    // seed's actual solid-fill colour, which is a much paler yellow at a
+    // different scale step — see `amberSolid` below for why the two need to
+    // stay separate tokens.
+    amber600: { light: "#9b7821", dark: "#e0982a" },
+    // seed's bg.warning-solid (yellow-300) — genuinely NOT amber600 tinted
+    // lighter: seed's warning-solid is its own pale scale step, distinct from
+    // the darker accent every other tone's solid fill derives from (see the
+    // spec's Badge section). Badge's `variant="solid" tone="warning"` uses
+    // this directly, unmixed, the same way `red700`'s solid destructive fill
+    // is used directly rather than computed from a tint. Dark side is NOT
+    // independently sourced (this is a new token; no prior Attio measurement
+    // exists to preserve) — reuses amber600's own dark value as the nearest
+    // existing "warning, dark theme" tone, same convention this file uses
+    // throughout for an unmeasured dark side (ringSwitch, line150, gray25).
+    amberSolid: { light: "#fbdc65", dark: "#e0982a" },
     orange600: { light: "#f97514", dark: "#f97514" },
     cyan600: { light: "#00b9eb", dark: "#00b9eb" },
     purple600: { light: "#9b69ff", dark: "#9b69ff" },
@@ -162,4 +225,36 @@ exports.palette = {
     purpleTint: { light: "#f5f0ff", dark: "#2f1e5a" },
     softPurpleText: { light: "#6238b5", dark: "#d8c4ff" },
     purpleRing: { light: "#e8ddfe", dark: "#45297d" },
+    // Select rebuilt to seed-design parity (crisp/#867), NOT Attio -- a
+    // deliberate one-component exception, the same way DatePicker already
+    // follows seed's calendar structure. Values below are resolved directly
+    // from `@seed-design/rootage`'s color.yaml (gray palette), not measured
+    // live, since there is no Attio reference for this component anymore.
+    // gray-00 / gray-200 (bg.layer-floating) -- the listbox surface. Distinct
+    // from `popoverBg` (crisp's Attio-measured popover, #fff/#17181a): the dark
+    // value differs (#1d2025), so this is its own token, not a reuse.
+    selectListboxBg: { light: "#ffffff", dark: "#1d2025" },
+    // gray-400 (stroke.neutral-weak) -- the trigger's real 1px border at rest.
+    selectTriggerStroke: { light: "#dcdee3", dark: "#393d46" },
+    // static-black/white-alpha (bg.transparent-pressed) -- the trigger/item
+    // press tint. Deliberately alpha, not a gray, so it reads the same over
+    // either surface colour.
+    selectPressedTint: { light: "#00000007", dark: "#ffffff0d" },
+    // gray-200 / gray-300 (bg.disabled) -- the trigger's disabled AND readonly
+    // fill. Distinct from `neutralWeak` (light matches, dark is #1d2025 not
+    // #2b2e35), so its own token rather than a reuse.
+    selectDisabledBg: { light: "#f3f4f5", dark: "#2b2e35" },
+    // red-700 (stroke.critical-solid) -- the trigger's invalid border. Distinct
+    // from crisp's own `bgDangerSolid`/`red700` (#ba2525, an Attio red): seed's
+    // red is a different hue entirely, and this component follows seed.
+    selectInvalidStroke: { light: "#fa342c", dark: "#ff6e60" },
+    // static-black/white-alpha (stroke.neutral-muted) -- the listbox's own
+    // divider slot (defined in select.yaml; not yet exposed on any consumer).
+    selectDivider: { light: "#00000010", dark: "#ffffff17" },
+    // gray-600 (fg.placeholder) -- distinct from `neutralSubtle` (its light/dark
+    // pair is the same two hexes, swapped), so its own token, not a reuse.
+    selectPlaceholder: { light: "#b0b3ba", dark: "#868b94" },
+    // s3 (shadow.yaml) -- the listbox's single-layer floating shadow, in place
+    // of crisp's own multi-layer `elevation.floating` for this component only.
+    selectShadow: { light: "#0000001f", dark: "#000000cc" },
 };

package/dist/cjs/tokens/scale.js

@@ -20,6 +20,7 @@ exports.space = {
     "2": "8px",
     "2.5": "10px",
     "3": "12px",
+    "3.5": "14px", // seed-design's $dimension.x3_5 — Select's medium trigger paddingX (crisp/#867)
     "4": "16px",
     "5": "20px",
     "6": "24px",
@@ -28,12 +29,14 @@ exports.space = {
 // Corner radius. sm/md/lg are the three used on stacked surfaces
 // (inputs, rows, tiles); full is the pill.
 exports.radius = {
+    xs: "4px", // seed-design's $radius.r1 — small badge / checkbox box corner
     chip: "7px", // tag / chip corner — the single most used radius
     sm: "6px", // chips, badges
     md: "8px", // inputs, search box
     lg: "9px", // rows, tiles, list items
     xl: "12px", // overlay items (command rows)
     "2xl": "16px", // overlay panels (command surface)
+    "3xl": "20px", // seed-design's $radius.r5 — Select's listbox corner (crisp/#867)
     full: "999px", // pills
 };
 // Component sizing — recurring measured dimensions that are neither spacing nor
@@ -52,6 +55,12 @@ exports.size = {
     // whole cells and a column gap would cut it.
     calendarCell: "34px", // calendar day pitch (32px day + 2px gap)
     calendarPill: "32px", // the day highlight itself
+    // seed-design's Select, resolved from select-trigger.yaml/select-item.yaml
+    // (crisp/#867) — this component follows seed, not Attio, so these sit
+    // alongside the measured scale rather than folding into it.
+    selectTriggerMd: "40px", // $dimension.x10 — the medium (default) trigger height
+    selectTriggerLg: "52px", // $dimension.x13 — the large trigger height
+    selectIconLg: "20px", // $dimension.x5 — large trigger's chevron
 };
 // Typography — the measured UI runs entirely on Inter. Sizes measured in the sidebar
 // collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);

package/dist/cjs/tokens/semantic.js

@@ -4,6 +4,17 @@ exports.semantic = void 0;
 exports.semantic = {
     bgBrandSolid: "brand600",
     bgBrandSolidPressed: "brand700",
+    /** your-moon/crisp#897: the AA-safe darker sibling of `bgBrandSolid` — a
+     * SOLID fill carrying white text (Button primary, Badge solid+brand,
+     * Avatar's brand tone). `bgBrandSolid` itself stays the exact brand
+     * accent (focus rings, selected states, icons, tints), unpaired with
+     * white text anywhere that matters for contrast. */
+    bgBrandContrast: "brandContrast",
+    /** your-moon/crisp#897: brand-coloured TEXT sitting on a white page
+     * (TextLink/Text's `brand` tone) — same value as `bgBrandContrast`,
+     * named separately because one's a background and one's a foreground,
+     * matching every other fg/bg pair in this file. */
+    fgBrandContrast: "brandContrast",
     fgOnBrand: "white",
     // text on a solid success/warning/danger fill. Those tone tokens BRIGHTEN in
     // dark (they are tuned for tinted backgrounds and coloured text), so white on
@@ -41,6 +52,15 @@ exports.semantic = {
     shadowPopover2: "shadowPopover2",
     shadowPopover3: "shadowPopover3",
     fgPrimary: "gray900",
+    // seed-identity migration (your-moon/crisp#890): NOT touched here, on
+    // purpose. seed's closest analog (fg.neutral-subtle, #868b94) is lighter
+    // than crisp's current #71717a, and Badge's neutral-SOLID variant reuses
+    // this exact token as a BACKGROUND paired with white text
+    // (`badge.recipe.ts`'s compound variant) — #868b94 drops that pairing to
+    // 3.42:1, below AA. Retargeting `fgMuted` and fixing that one background
+    // choice belong together in Badge's own upcoming look PR, not split
+    // across two PRs where the token change alone would ship a known
+    // contrast regression.
     fgMuted: "gray400",
     bgDanger: "red600",
     /** Fill for a SOLID destructive control that carries white text. */
@@ -66,6 +86,10 @@ exports.semantic = {
     strokeFocusRing: "focusRing",
     bgSuccess: "green600",
     bgWarning: "amber600",
+    /** A SOLID warning fill (Badge's `variant="solid" tone="warning"`) — seed's
+     * own warning-solid is a distinct, paler yellow, not `bgWarning` tinted
+     * lighter. See `amberSolid` in palette.ts. */
+    bgWarningSolid: "amberSolid",
     bgOrange: "orange600",
     bgCyan: "cyan600",
     bgPurple: "purple600",
@@ -85,4 +109,22 @@ exports.semantic = {
     bgPurpleSoft: "purpleTint",
     fgPurpleSoft: "softPurpleText",
     ringPurpleSoft: "purpleRing",
+    /** Callout's bordered/banner look (crisp#869) — an opaque measured ring,
+     *  not a `color-mix` tint of `bgBrandSolid` (see palette.ts's own comment). */
+    ringBrandSoft: "ringBrandSoft",
+    /** Select rebuilt to seed-design parity (crisp/#867) — see palette.ts's
+     *  comment above `selectListboxBg` for why these are their own tokens
+     *  rather than a reuse of an Attio-measured one. */
+    /** Seed's neutral ink (gray-1000) used as TEXT/icon colour — same palette
+     *  entry as `strokeFieldFocus` (a ring), aliased separately because the
+     *  role here is content colour, not a focus ring. */
+    fgSelectNeutral: "fieldFocus",
+    bgSelectListbox: "selectListboxBg",
+    strokeSelectTrigger: "selectTriggerStroke",
+    bgSelectPressed: "selectPressedTint",
+    bgSelectDisabled: "selectDisabledBg",
+    strokeSelectInvalid: "selectInvalidStroke",
+    strokeSelectDivider: "selectDivider",
+    fgSelectPlaceholder: "selectPlaceholder",
+    shadowSelect: "selectShadow",
 };

package/dist/esm/components/accentpicker/accentpicker.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useRadioGroupKeyboard } from "../radiogroup/index.js";
+import { accentpickerRecipe } from "./accentpicker.recipe.js";
+/**
+ * A row of selectable colour swatches — Attio's own accent-colour picker
+ * (Settings > Appearance). Not a fixed palette: pass the colours (and the
+ * accent isn't crisp's concern to theme the app with — this only picks one).
+ * Same roving-focus/arrow-key model every other crisp radio-like control
+ * shares (`useRadioGroupKeyboard`, also used by `RadioGroup` and
+ * `Segmented`).
+ */
+export function AccentPicker({ colors, value, defaultValue, onValueChange, className, onKeyDown: onKeyDownProp, ...rest }) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const selected = value ?? internal;
+    const select = (v) => {
+        if (value === undefined)
+            setInternal(v);
+        onValueChange?.(v);
+    };
+    const { onKeyDown, groupRef } = useRadioGroupKeyboard({ select });
+    return (_jsx("div", { ref: groupRef, role: "radiogroup", className: accentpickerRecipe({ className }), ...rest, onKeyDown: (e) => {
+            onKeyDown(e);
+            onKeyDownProp?.(e);
+        }, children: colors.map((color) => {
+            const checked = selected === color;
+            return (_jsx("button", { type: "button", role: "radio", "aria-checked": checked, "aria-label": color, "data-value": color, tabIndex: checked ? 0 : -1, className: "crisp-accentpicker-swatch", style: { borderColor: checked ? color : "transparent" }, onClick: () => select(color), children: _jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", "aria-hidden": "true", children: _jsx("circle", { cx: "11", cy: "11", r: "9", fill: color }) }) }, color));
+        }) }));
+}
+AccentPicker.displayName = "AccentPicker";

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

@@ -0,0 +1,22 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A row of selectable colour swatches — measured live on Attio's Appearance
+// settings page (crisp#635): `role="radiogroup"`, `display: flex; gap: 8px`.
+// Each swatch is a 24x24 circular button, `border: 1px solid transparent`
+// at rest; the CHECKED swatch's border switches to its own colour (not a
+// fixed brand ring) — measured directly on the DOM (`border: 1px solid
+// rgb(38,109,240)` on the checked blue swatch, `1px solid rgba(0,0,0,0)` on
+// every unchecked one). That per-swatch colour is data, not a class, so it's
+// set inline by the component, not here. Inside sits a 22x22 SVG with one
+// solid r=9 (18px) circle -- no separate ring/dot layer, contrary to an
+// earlier, less precise read of this same control.
+const config = defineRecipe({
+    name: "accentpicker",
+    base: `display: flex; gap: ${c.space["2"]};
+    & .crisp-accentpicker-swatch { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 24px; height: 24px; padding: 0; margin: 0; border-radius: ${c.radius.full}; border: 1px solid transparent;
+      background: none; font-family: inherit; cursor: pointer; }
+    & .crisp-accentpicker-swatch:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 2px; }`,
+});
+export const accentpickerRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { AccentPicker } from "./accentpicker.js";
+export { accentpickerRecipe } from "./accentpicker.recipe.js";

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

@@ -36,7 +36,10 @@ const spec = defineSpec({
                 color: c.fgNeutralMuted,
                 boxShadow: `inset 0 0 0 1px ${c.borderDefault}`,
             },
-            brand: { background: c.bgBrandSolid, color: "#fff" },
+            // your-moon/crisp#897: `bgBrandContrast`, the darker AA-safe sibling
+            // of the accent blue (`bgBrandSolid`, #0298d9, only 3.23:1 with
+            // white) -- keeps white text, matching every other tone here.
+            brand: { background: c.bgBrandContrast, color: "#fff" },
             orange: { background: c.bgOrange, color: "#fff" },
             cyan: { background: c.bgCyan, color: "#fff" },
             purple: { background: c.bgPurple, color: "#fff" },