@crisp-ui-kit/crisp 0.56.0 → 0.57.1

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

@@ -33,13 +33,14 @@ const spec = defineSpec({
             muted: { color: c.fgNeutralMuted },
             // #858: no new measurement -- both reuse tokens already measured
             // against Attio for the same colours in a different arrangement.
-            // `brand` is `textlink`'s own reused brand-text colour (`bgBrandSolid`,
-            // the same alias GRC's own `--color-fg-brand` resolves to). `danger`
-            // is `fgDanger` ("solid critical/destructive TEXT... an overdue
-            // due-date, a destructive menu item's label" -- see its own doc in
-            // tokens/semantic.ts), not `fgDangerSoft` (that one's a soft Badge
-            // pill's text, a different measured hex).
-            brand: { color: c.bgBrandSolid },
+            // `brand` is `textlink`'s own reused brand-text colour, now
+            // `fgBrandContrast` (your-moon/crisp#897: the plain accent,
+            // `bgBrandSolid`, only clears 3.23:1 as text on a white page).
+            // `danger` is `fgDanger` ("solid critical/destructive TEXT... an
+            // overdue due-date, a destructive menu item's label" -- see its own
+            // doc in tokens/semantic.ts), not `fgDangerSoft` (that one's a soft
+            // Badge pill's text, a different measured hex).
+            brand: { color: c.fgBrandContrast },
             danger: { color: c.fgDanger },
         },
     },

package/dist/esm/components/textarea/textarea.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Progress } from "../progress/index.js";
 import { textareaRecipe } from "./textarea.recipe.js";
 /**
  * A multiline text field — measured from settings. Forwards every native
  * `<textarea>` prop; pass `showCount` with `maxLength` to render a live
  * character counter (which turns red if the value exceeds the limit).
  */
-export const Textarea = React.forwardRef(({ showCount, maxLength, className, wrapperClassName, value, defaultValue, onChange, 
+export const Textarea = React.forwardRef(({ showCount, showProgress, maxLength, className, wrapperClassName, value, defaultValue, onChange, 
 // `style` is pulled out and put on the ROOT, the way Input does it.
 // Everything else belongs on the <textarea> -- id, name, form
 // association, aria -- but `style` sizes the visual box, and the box is
@@ -22,6 +23,6 @@ style, ...props }, ref) => {
                         if (value === undefined)
                             setCount(e.target.value.length);
                         onChange?.(e);
-                    }, ...props }) }), counted && (_jsxs("span", { className: "crisp-textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [len, " / ", maxLength] }))] }));
+                    }, ...props }) }), counted && (_jsxs("span", { className: "crisp-textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [showProgress && (_jsx(Progress, { variant: "circular", value: len, max: maxLength ?? 0, className: "crisp-textarea-progress" })), len, " / ", maxLength] }))] }));
 });
 Textarea.displayName = "Textarea";

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

@@ -46,8 +46,9 @@ const config = defineRecipe({
     &[data-invalid] .crisp-textarea-wrap::after { border-color: ${c.bgDanger}; }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: ${c.bgDanger}; }
     &[data-counted] .crisp-textarea-field { padding-bottom: ${c.space["5"]}; }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: ${c.space["2.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: ${c.space["2.5"]}; display: flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: ${c.bgDanger}; }
+    & .crisp-textarea-progress { flex-shrink: 0; }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -7,7 +7,7 @@ import { textlinkRecipe } from "./textlink.recipe.js";
  * `event.preventDefault()` pairs it with client-side routing (e.g.
  * react-router's own `Link`).
  */
-export function TextLink({ tone = "muted", className, ...rest }) {
-    return _jsx("a", { className: textlinkRecipe({ tone, className }), ...rest });
+export function TextLink({ tone = "muted", size, className, ...rest }) {
+    return _jsx("a", { className: textlinkRecipe({ tone, size, className }), ...rest });
 }
 TextLink.displayName = "TextLink";

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

@@ -18,11 +18,32 @@ const config = defineRecipe({
     variants: {
         tone: {
             // The bold, always-brand-coloured trailing link a Card's own `action`
-            // slot uses ("View all →", "All registers →").
-            brand: `font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.bgBrandSolid};`,
+            // 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: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgBrandContrast};`,
             // A quieter in-context reference (a sample record under a finding)
             // that only goes brand on hover.
-            muted: `font-size: ${c.text.md}; font-weight: ${c.weight.regular}; color: ${c.fgMuted}; &:hover { color: ${c.bgBrandSolid}; }`,
+            muted: `font-size: ${c.text.md}; font-weight: ${c.weight.regular}; color: ${c.fgMuted}; &:hover { color: ${c.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: ${c.text.sm};`,
+            md: `font-size: ${c.text.md};`,
+            lg: `font-size: ${c.text.lg};`,
         },
     },
     defaultVariants: { tone: "muted" },

package/dist/esm/index.js

@@ -2,6 +2,7 @@
 // component, the design tokens, and the recipe core. Consumers also import the
 // stylesheet once:  import "@crisp-ui-kit/crisp/styles.css";
 // primitives (components/)
+export * from "./components/accentpicker/index.js";
 export * from "./components/accordion/index.js";
 export * from "./components/avatar/index.js";
 export * from "./components/avatargroup/index.js";

package/dist/esm/product/recordpage/recordpage.js

@@ -1,14 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Activity as ActivityIcon, CalendarClock, ChevronDown, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, Mail, Maximize2, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Share2, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, X, Zap, } from "lucide-react";
+import { Activity as ActivityIcon, CalendarClock, ChevronDown, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, Mail, Maximize2, Merge, MessageSquare, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Settings, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, Workflow, X, Zap, } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
 import { Checkbox } from "../../components/checkbox/index.js";
+import { Drawer } from "../../components/drawer/index.js";
 import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
 import { Select } from "../../components/select/index.js";
 import { Spinner } from "../../components/spinner/index.js";
 import { Switch } from "../../components/switch/index.js";
 import { Tabs } from "../../components/tabs/index.js";
 import { cx, isRtlElement, useCrispComponentDefaults } from "../../core/index.js";
+import { CommentsPanel, } from "../comments/index.js";
 import { tagTone } from "./column.js";
 import { editableInputType, useEditableField } from "./editable-field.js";
 import { recordpageRecipe } from "./recordpage.recipe.js";
@@ -33,19 +35,32 @@ export const 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",
@@ -419,7 +434,7 @@ RecordDetails.displayName = "RecordDetails";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export 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 }) {
+export 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
@@ -431,6 +446,11 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     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);
@@ -528,6 +548,15 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
         },
     ];
     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: FileText },
+        { label: t.runWorkflow, icon: Workflow },
+        { label: t.createATask, icon: SquareCheck },
+    ];
+    const quickActions = quickActionsProp ?? defaultQuickActions;
     const ti = { size: 15, strokeWidth: 1.75 };
     const builtinTabs = [
         { value: "overview", label: t.tabs.overview, icon: _jsx(LayoutGrid, { ...ti }) },
@@ -580,6 +609,31 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
         }
         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");
@@ -636,7 +690,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _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: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsx(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), _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 (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: _jsx(MessageSquare, { size: 15, strokeWidth: 1.75 }) }), _jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), _jsx(MenuItem, { icon: _jsx(Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), _jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), _jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _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: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => (_jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: _jsx(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), _jsx(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), _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.
@@ -648,6 +702,6 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                             setDetailsW((w) => grow
                                 ? Math.min(DETAILS_MAX_W, w + 16)
                                 : Math.max(DETAILS_MIN_W, w - 16));
-                        } }), _jsx("main", { className: "crisp-recordpage-main", children: _jsx(Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] })] }));
+                        } }), _jsx("main", { className: "crisp-recordpage-main", children: _jsx(Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), _jsx(Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: _jsx(CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
 }
 RecordPage.displayName = "RecordPage";

package/dist/esm/tokens/elevation.js

@@ -56,4 +56,11 @@ export const 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 ${c.shadowSelect}`,
 };

package/dist/esm/tokens/palette.js

@@ -5,9 +5,14 @@ export const 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 /
@@ -19,8 +24,11 @@ export const 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
@@ -44,6 +52,15 @@ export const 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
@@ -72,25 +89,54 @@ export const 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.
@@ -110,8 +156,25 @@ export const 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" },
@@ -159,4 +222,36 @@ export const 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/esm/tokens/scale.js

@@ -17,6 +17,7 @@ export const 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",
@@ -25,12 +26,14 @@ export const space = {
 // Corner radius. sm/md/lg are the three used on stacked surfaces
 // (inputs, rows, tiles); full is the pill.
 export const 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
@@ -49,6 +52,12 @@ export const 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/esm/tokens/semantic.js

@@ -1,6 +1,17 @@
 export const 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
@@ -38,6 +49,15 @@ export const 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. */
@@ -63,6 +83,10 @@ export const 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",
@@ -82,4 +106,22 @@ export const 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/input.css

@@ -6,6 +6,17 @@
     & .crisp-input-value::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-input-value:disabled { opacity: 0.5; cursor: not-allowed; }
     &:has(.crisp-input-value:disabled) { opacity: 1; }
+    /* crisp#634: measured live on Attio's own Settings > Profile read-only
+       primary-email field -- a tinted field, not just muted text, driven off
+       the native `readOnly` attribute. `ringField` (rgba(0,0,0,.06)) is an
+       exact match for the measured ring; the 2%-fgPrimary tint reuses the
+       same color-mix idiom every other soft crisp surface already uses. */
+    &[data-readonly] { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); }
+    & .crisp-input-suffix { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); }
+}
+.crisp-input--size_sm {
+  height: var(--crisp-size-row); border-radius: var(--crisp-radius-md);
+    & .crisp-input-value { padding-inline: var(--crisp-space-2-5); }
 }
 .crisp-input--size_medium {
   height: 32px; border-radius: var(--crisp-radius-md);

package/dist/input.d.ts

@@ -1,8 +1,8 @@
 import type { RecipeFn } from "../core/types";
 
 export interface InputVariants {
-  size?: "medium" | "large";
+  size?: "sm" | "medium" | "large";
   invalid?: boolean;
 }
 
-export declare const inputRecipe: RecipeFn<{ size: { medium: string; large: string }; invalid: { true: string; false: string } }>;
+export declare const inputRecipe: RecipeFn<{ size: { sm: string; medium: string; large: string }; invalid: { true: string; false: string } }>;