@crisp-ui-kit/crisp 0.57.1 → 0.57.2

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

@@ -1,5 +1,5 @@
 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, Merge, MessageSquare, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Settings, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, Workflow, X, Zap, } from "lucide-react";
+import { Activity as ActivityIcon, CalendarClock, ChevronDown, ChevronUp, 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";
@@ -273,7 +273,14 @@ function NotesSection({ notes, onAdd, labels, }) {
     return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.notes, count: notes.length, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && (_jsx(Composer, { labels: labels, multiline: true, placeholder: labels.notePlaceholder, submitLabel: labels.saveNote, onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
-                } })), notes.length === 0 && !open ? (_jsx("div", { className: "crisp-recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => (_jsxs("div", { className: "crisp-recordpage-note", children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), _jsxs("div", { className: "crisp-recordpage-note-body", children: [_jsxs("div", { className: "crisp-recordpage-note-head", children: [_jsx("span", { className: "crisp-recordpage-note-author", children: labels.you }), _jsx("span", { className: "crisp-recordpage-note-time", children: n.time })] }), _jsx("div", { className: "crisp-recordpage-note-text", children: n.text })] })] }, n.id))))] }));
+                } })), notes.length === 0 && !open ? (_jsx("div", { className: "crisp-recordpage-emptystate", children: labels.noNotesYet })) : (
+            // #871: one line, not a two-row card -- measured live: avatar,
+            // then the note's own title and body run together inline, then a
+            // relative time at the far end of the SAME row. No author name at
+            // all (Attio's real preview never shows one here, only the note's
+            // own content) -- `labels.you` stays defined for a consumer that
+            // still wants it elsewhere, just unused in this exact spot now.
+            notes.map((n) => (_jsxs("div", { className: "crisp-recordpage-note", children: [_jsxs("span", { className: "crisp-recordpage-note-left", children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), n.title && (_jsx("span", { className: "crisp-recordpage-note-title", children: n.title })), _jsx("span", { className: "crisp-recordpage-note-text", children: n.text })] }), _jsx("span", { className: "crisp-recordpage-note-time", children: n.time })] }, n.id))))] }));
 }
 function TasksSection({ tasks, onAdd, onToggle, labels, }) {
     const [open, setOpen] = React.useState(false);
@@ -306,13 +313,51 @@ function EmptyCard({ icon, children, }) {
  * `RecordPage`'s own root does: `<div className={recordpageRecipe()}>`
  * (also exported from this package).
  */
-export function RecordDetails({ record, columns, sections, onEdit, labels, className, ...rest }) {
+export function RecordDetails({ record, columns, sections, onEdit, labels, className, resizable = false, width: controlledWidth, defaultWidth = DETAILS_DEFAULT_W, onWidthChange, minWidth = DETAILS_MIN_W, maxWidth = DETAILS_MAX_W, ...rest }) {
     const t = useRecordPageLabels(labels);
     const { editingKey, pendingKey, error, openEditing, closeEditing, commit } = useEditableField(onEdit);
     const [detailsOpen, setDetailsOpen] = React.useState(true);
     const [searchOpen, setSearchOpen] = React.useState(false);
     const [fieldQuery, setFieldQuery] = React.useState("");
     const [showAllValues, setShowAllValues] = React.useState(false);
+    // #930: controlled/uncontrolled width, same split as RecordPanel's own
+    // resizable width -- only read when `resizable`, same reasoning as
+    // RecordPanel's own (a non-resizing consumer has no business carrying
+    // width state at all).
+    const [internalWidth, setInternalWidth] = React.useState(defaultWidth);
+    const width = controlledWidth ?? internalWidth;
+    const setWidth = (next) => {
+        const clamped = Math.max(minWidth, Math.min(maxWidth, next));
+        if (controlledWidth === undefined)
+            setInternalWidth(clamped);
+        onWidthChange?.(clamped);
+    };
+    const [detailsResizing, setDetailsResizing] = React.useState(false);
+    const detailsDragRef = React.useRef(null);
+    const onDetailsResizeDown = (e) => {
+        // This column is a leading (left-docked) rail, the mirror image of
+        // RecordPanel's own trailing (right-docked) one -- a rightward pull
+        // grows it in LTR, the same direction RecordPage's own internal aside
+        // resize already uses (#212/#255).
+        detailsDragRef.current = {
+            x: e.clientX,
+            w: width,
+            dir: isRtlElement(e.currentTarget) ? -1 : 1,
+        };
+        setDetailsResizing(true);
+        e.target.setPointerCapture(e.pointerId);
+    };
+    const onDetailsResizeMove = (e) => {
+        const r = detailsDragRef.current;
+        if (!r)
+            return;
+        setWidth(r.w + r.dir * (e.clientX - r.x));
+    };
+    const onDetailsResizeUp = (e) => {
+        detailsDragRef.current = null;
+        setDetailsResizing(false);
+        e.target.releasePointerCapture(e.pointerId);
+    };
     const fields = columns.filter((col) => col.type !== "entity");
     const q = fieldQuery.trim().toLowerCase();
     const matches = (col) => !q || col.label.toLowerCase().includes(q);
@@ -349,7 +394,7 @@ export function RecordDetails({ record, columns, sections, onEdit, labels, class
         groups = [{ title: undefined, fields: shown }];
     }
     const totalShown = groups.reduce((n, g) => n + g.fields.length, 0);
-    return (_jsxs("div", { className: cx("crisp-recordpage-section", className), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
+    return (_jsxs("div", { className: cx("crisp-recordpage-section", className), "data-resizable": resizable ? "" : undefined, style: resizable ? { width } : undefined, ...rest, children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
                         // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
                         autoFocus: true, type: "text", className: "crisp-recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
                             if (e.key === "Escape") {
@@ -423,7 +468,13 @@ export function RecordDetails({ record, columns, sections, onEdit, labels, class
                                 setSearchOpen(next);
                                 if (!next)
                                     setFieldQuery("");
-                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsx("div", { className: "crisp-recordpage-noresults", children: t.noFieldsMatch(fieldQuery) })))] }));
+                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsx("div", { className: "crisp-recordpage-noresults", children: t.noFieldsMatch(fieldQuery) }))), resizable && (_jsx("div", { className: "crisp-recordpage-detailresize", "data-active": detailsResizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(width), "aria-valuemin": minWidth, "aria-valuemax": maxWidth, tabIndex: 0, onPointerDown: onDetailsResizeDown, onPointerMove: onDetailsResizeMove, onPointerUp: onDetailsResizeUp, onKeyDown: (e) => {
+                    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+                        return;
+                    const rtl = isRtlElement(e.currentTarget);
+                    const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                    setWidth(grow ? width + 16 : width - 16);
+                } }))] }));
 }
 RecordDetails.displayName = "RecordDetails";
 /**
@@ -434,7 +485,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, quickActions: quickActionsProp, comments: commentsProp, onPostComment, currentUser, onShare, ...rest }) {
+export function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, onClose, closeLabel = "Close", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", counterLabel, 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
@@ -690,7 +741,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: [_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) => {
+    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", "data-peek": onClose ? "" : undefined, children: [onClose ? (_jsxs("div", { className: "crisp-recordpage-peekbar", children: [_jsx("button", { type: "button", className: "crisp-recordpage-peek-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && (_jsxs("span", { className: "crisp-recordpage-peek-pager", children: [_jsx("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: _jsx(ChevronUp, { size: 16, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), counterLabel != null && (_jsx("span", { className: "crisp-recordpage-peek-counter", children: counterLabel }))] })) : (_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.

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

@@ -23,6 +23,21 @@ const config = defineRecipe({
     & * { box-sizing: border-box; }
 
     & .crisp-recordpage-topbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: 44px; flex-shrink: 0; padding: 0 ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    /* #624: expanding a peek to its full record keeps a hybrid header
+       (Close/Previous/Next/counter) instead of reverting to the plain
+       breadcrumb above -- measured live on a real expanded record: 49px
+       tall (not 44px), 8px/10px padding, same borderSubtle hairline. Same
+       tokens as product/recordpanel's own already-shipped toolbar, not
+       new values -- this is the same row, reused in a second component. */
+    & .crisp-recordpage-topbar[data-peek] { height: 49px; padding: ${c.space["2"]} ${c.space["2.5"]}; }
+    & .crisp-recordpage-peekbar { display: flex; align-items: center; }
+    & .crisp-recordpage-peek-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: transparent; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpage-peek-iconbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .crisp-recordpage-peek-pager { display: flex; align-items: center; gap: ${c.space["1.5"]}; margin-inline-start: ${c.space["3"]}; }
+    & .crisp-recordpage-peek-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; color: ${c.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-recordpage-peek-navbtn:hover:not(:disabled) { background: ${c.bgRaised}; }
+    & .crisp-recordpage-peek-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
+    & .crisp-recordpage-peek-counter { margin-inline-start: ${c.space["3"]}; font-size: 12px; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-crumbs { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
     & .crisp-recordpage-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 ${c.space["1.5"]}; margin: 0 calc(-1 * ${c.space["1.5"]}) 0 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; }
     & .crisp-recordpage-crumb:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
@@ -42,6 +57,17 @@ const config = defineRecipe({
     & .crisp-recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
     & .crisp-recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
     & .crisp-recordpage-resizer:hover::after, & .crisp-recordpage-resizer[data-active]::after { background: color-mix(in srgb, ${c.bgBrandSolid} 55%, transparent); }
+    /* #930: RecordDetails' own standalone resize handle -- same visible
+       hit-slop/line-highlight shape as .crisp-recordpage-resizer just above,
+       just absolutely positioned at the trailing edge instead of a 0-width
+       flex sibling, since RecordDetails always returns a single root (the
+       same internal-strip placement RecordPanel's own resize handle uses,
+       mirrored to the opposite edge -- this column is leading, RecordPanel
+       is trailing). */
+    & .crisp-recordpage-section[data-resizable] { position: relative; }
+    & .crisp-recordpage-detailresize { position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 9px; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .crisp-recordpage-detailresize::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 3px; width: 2px; background: transparent; transition: background-color .12s ease; }
+    & .crisp-recordpage-detailresize:hover::after, & .crisp-recordpage-detailresize[data-active]::after { background: color-mix(in srgb, ${c.bgBrandSolid} 55%, transparent); }
     & .crisp-recordpage-entity { display: flex; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["1"]} ${c.space["1"]} ${c.space["2"]}; }
     & .crisp-recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: ${c.bgRaised}; }
     & .crisp-recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -175,12 +201,23 @@ const config = defineRecipe({
     & .crisp-recordpage-btn--primary { box-shadow: none; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
-    & .crisp-recordpage-note { display: flex; gap: ${c.space["2.5"]}; padding: ${c.space["2.5"]} 0; border-top: 1px solid ${c.borderSubtle}; }
-    & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
-    & .crisp-recordpage-note-head { display: flex; align-items: center; gap: ${c.space["1.5"]}; margin-bottom: ${c.space["0.5"]}; }
-    & .crisp-recordpage-note-author { font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
-    & .crisp-recordpage-note-time { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .crisp-recordpage-note-text { font-size: ${c.text.lg}; color: ${c.fgPrimary}; white-space: pre-wrap; word-break: break-word; }
+    /* #871: one bordered card per note (border-radius.xl, borderSubtle),
+       not a flush divider-list row -- measured live on a real populated
+       note: the whole row is flex space-between, avatar+title+body on the
+       left (its own flex, gap.2), the relative time alone on the right.
+       The real DOM nests an inner clickable button (padding 6/8, radius.md)
+       inside an outer card (padding 4px, radius.xl) -- collapsed into this
+       one non-interactive div's own combined padding (2.5/3) since crisp's
+       NotesSection has no click-to-open behaviour to justify the extra
+       layer. The 6px gap between stacked cards is NOT independently
+       measured (this workspace only ever had one real note to check) --
+       a judgement call off the existing space scale, not a live value. */
+    & .crisp-recordpage-note { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["3"]}; padding: ${c.space["2.5"]} ${c.space["3"]}; border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius.xl}; }
+    & .crisp-recordpage-note + .crisp-recordpage-note { margin-top: ${c.space["1.5"]}; }
+    & .crisp-recordpage-note-left { display: flex; align-items: center; gap: ${c.space["2"]}; min-width: 0; overflow: hidden; }
+    & .crisp-recordpage-note-title { flex-shrink: 0; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-recordpage-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-recordpage-note-time { flex-shrink: 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
 
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: ${c.space["2"]}; padding: ${c.space["1.5"]} 0; border-top: 1px solid ${c.borderSubtle}; }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: ${c.text.lg}; color: ${c.fgPrimary}; padding-top: 1px; }

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

@@ -0,0 +1 @@
+export { WorkspaceGeneralSettings, } from "./workspacegeneralsettings.js";

package/dist/esm/product/workspacegeneralsettings/workspacegeneralsettings.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Copy } from "lucide-react";
+import { Avatar } from "../../components/avatar/index.js";
+import { Button } from "../../components/button/index.js";
+import { FormField } from "../../components/formfield/index.js";
+import { Input } from "../../components/input/index.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../../components/table/index.js";
+import { TextLink } from "../../components/textlink/index.js";
+import { workspacegeneralsettingsRecipe } from "./workspacegeneralsettings.recipe.js";
+/**
+ * Attio's Settings → Workspace → General page (crisp#638, P-128), measured
+ * live: a logo + Name/Slug section, an "Export workspace data" table, and a
+ * "Danger zone" delete-workspace row.
+ */
+export function WorkspaceGeneralSettings({ logoSrc, workspaceInitial, onUploadLogo, name, onNameChange, slug, onCopySlug, exports: exportRows, onStartExport, onDeleteWorkspace, className, title = "General", description = "Change the settings for your current workspace.", learnMoreLabel = "Learn more", learnMoreHref = "#", logoHelpText = "We only support PNGs, JPEGs and GIFs under 10MB", uploadLogoLabel = "Upload logo", nameFieldLabel = "Name", slugFieldLabel = "Slug", copySlugLabel = "Copy slug", exportSectionTitle = "Export workspace data", exportSectionDescription = "Exports are in CSV format and can be downloaded within 7 days", startExportLabel = "Start new export", typeColumnLabel = "Type", dateColumnLabel = "Date", noExportsLabel = "No exports yet", dangerSectionTitle = "Danger zone", deleteWorkspaceTitle = "Delete workspace", deleteWorkspaceWarning = "Once deleted, your workspace cannot be recovered", deleteWorkspaceLabel = "Delete workspace", ...rest }) {
+    return (_jsx("div", { className: workspacegeneralsettingsRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-workspacegeneralsettings-page", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-heading", children: [_jsx("h1", { className: "crisp-workspacegeneralsettings-title", children: title }), _jsxs("p", { className: "crisp-workspacegeneralsettings-desc", children: [description, " ", _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), _jsxs("div", { className: "crisp-workspacegeneralsettings-section", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-logorow", children: [logoSrc ? (_jsx("img", { src: logoSrc, alt: "", width: 48, height: 48, style: { borderRadius: "30%", objectFit: "cover" } })) : (_jsx(Avatar, { size: "xl", shape: "rounded", tone: "brand", children: workspaceInitial })), _jsxs("div", { className: "crisp-workspacegeneralsettings-logotext", children: [_jsx("span", { className: "crisp-workspacegeneralsettings-logohelp", children: logoHelpText }), _jsx(Button, { intent: "neutral", size: "sm", onClick: onUploadLogo, children: uploadLogoLabel })] })] }), _jsxs("div", { className: "crisp-workspacegeneralsettings-fieldrow", children: [_jsx(FormField, { label: nameFieldLabel, children: _jsx(Input, { value: name, onChange: (e) => onNameChange(e.target.value) }) }), _jsx(FormField, { label: slugFieldLabel, children: _jsxs("div", { className: "crisp-workspacegeneralsettings-slugfield", children: [_jsx(Input, { value: slug, readOnly: true }), _jsx("button", { type: "button", className: "crisp-workspacegeneralsettings-copybtn", "aria-label": copySlugLabel, onClick: onCopySlug, children: _jsx(Copy, { size: 16 }) })] }) })] })] }), _jsxs("div", { className: "crisp-workspacegeneralsettings-section", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-sectionhead", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-sectionhead-text", children: [_jsx("h2", { className: "crisp-workspacegeneralsettings-sectiontitle", children: exportSectionTitle }), _jsx("p", { className: "crisp-workspacegeneralsettings-desc", children: exportSectionDescription })] }), _jsx(Button, { intent: "neutral", size: "sm", onClick: onStartExport, children: startExportLabel })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: typeColumnLabel }), _jsx(TableHead, { children: dateColumnLabel })] }) }), _jsx(TableBody, { children: exportRows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, children: _jsx("div", { className: "crisp-workspacegeneralsettings-emptyrow", children: noExportsLabel }) }) })) : (exportRows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.type }), _jsx(TableCell, { children: row.date })] }, row.id)))) })] })] }), _jsxs("div", { className: "crisp-workspacegeneralsettings-section", children: [_jsx("h2", { className: "crisp-workspacegeneralsettings-sectiontitle", children: dangerSectionTitle }), _jsxs("div", { className: "crisp-workspacegeneralsettings-dangerrow", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-dangertext", children: [_jsx("span", { className: "crisp-workspacegeneralsettings-rowtitle", children: deleteWorkspaceTitle }), _jsx("span", { className: "crisp-workspacegeneralsettings-dangerwarning", children: deleteWorkspaceWarning })] }), _jsx(Button, { intent: "danger", size: "sm", onClick: onDeleteWorkspace, children: deleteWorkspaceLabel })] })] })] }) }));
+}
+WorkspaceGeneralSettings.displayName = "WorkspaceGeneralSettings";

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

@@ -0,0 +1,48 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Measured live against app.attio.com/<workspace>/settings/workspace
+// (crisp#638, P-128). Logo tile + Name/Slug fields side by side, an
+// "Export workspace data" section (header row + Type/Date table + empty
+// state), and a "Danger zone" section (a red-tinted bordered row).
+const config = defineRecipe({
+    name: "workspacegeneralsettings",
+    base: `& .crisp-workspacegeneralsettings-page { display: flex; flex-direction: column; gap: ${c.space["6"]}; font-family: ${c.font.sans}; }
+    & .crisp-workspacegeneralsettings-heading { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; }
+    & .crisp-workspacegeneralsettings-title { font-size: 24px; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.48px; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-workspacegeneralsettings-desc { font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgMuted}; margin: 0; }
+
+    & .crisp-workspacegeneralsettings-section { display: flex; flex-direction: column; gap: ${c.space["4"]}; }
+    & .crisp-workspacegeneralsettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-workspacegeneralsettings-sectionhead { display: flex; align-items: flex-start; justify-content: space-between; gap: ${c.space["4"]}; }
+    & .crisp-workspacegeneralsettings-sectionhead-text { display: flex; flex-direction: column; gap: ${c.space["1"]}; }
+
+    /* Logo row: a tile + helper text + "Upload logo" button. */
+    & .crisp-workspacegeneralsettings-logorow { display: flex; align-items: center; gap: ${c.space["4"]}; }
+    & .crisp-workspacegeneralsettings-logohelp { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-workspacegeneralsettings-logotext { display: flex; flex-direction: column; align-items: flex-start; gap: ${c.space["1"]}; }
+
+    /* Name + Slug sit side by side, each ~half the content width. */
+    & .crisp-workspacegeneralsettings-fieldrow { display: flex; gap: ${c.space["4"]}; }
+    & .crisp-workspacegeneralsettings-fieldrow > * { flex: 1; min-width: 0; }
+    & .crisp-workspacegeneralsettings-slugfield { display: flex; align-items: center; gap: ${c.space["1.5"]}; }
+    & .crisp-workspacegeneralsettings-slugfield > :first-child { flex: 1; min-width: 0; }
+    & .crisp-workspacegeneralsettings-copybtn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; color: ${c.fgMuted}; cursor: pointer; }
+    & .crisp-workspacegeneralsettings-copybtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+
+    /* Export-data empty state -- measured: 14/500/63%-opacity, centred in a
+       40px row, no border of its own (the Table wrapper already draws it). */
+    & .crisp-workspacegeneralsettings-emptyrow { padding: ${c.space["2.5"]} ${c.space["4"]}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); text-align: center; }
+
+    /* Danger zone: a red-tinted bordered row, distinct from every other
+       card on the page. */
+    & .crisp-workspacegeneralsettings-dangerrow { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["6"]}; padding: ${c.space["3"]} ${c.space["4"]}; border: 1px solid color-mix(in srgb, ${c.bgDanger} 30%, transparent); border-radius: 12px; background: color-mix(in srgb, ${c.bgDanger} 6%, transparent); }
+    & .crisp-workspacegeneralsettings-dangertext { display: flex; flex-direction: column; gap: ${c.space["1"]}; }
+    & .crisp-workspacegeneralsettings-rowtitle { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-workspacegeneralsettings-dangerwarning { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const workspacegeneralsettingsRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/tokens/contract.js

@@ -1,5 +1,5 @@
 import { VAR_PREFIX } from "../core/namespace.js";
-import { font as fontScale, radius as radiusScale, size as sizeScale, space as spaceScale, text as textScale, weight as weightScale, } from "./scale.js";
+import { font as fontScale, radius as radiusScale, size as sizeScale, space as spaceScale, text as textScale, tracking as trackingScale, weight as weightScale, } from "./scale.js";
 import { semantic } from "./semantic.js";
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 const toVar = (key) => `var(--${VAR_PREFIX}${kebab(key)})`;
@@ -16,4 +16,5 @@ export const contract = Object.assign(colors, {
     font: mapScale("font", fontScale),
     text: mapScale("text", textScale),
     weight: mapScale("weight", weightScale),
+    tracking: mapScale("tracking", trackingScale),
 });

package/dist/esm/tokens/elevation.js

@@ -12,9 +12,11 @@ import { contract as c } from "./contract.js";
  */
 export const elevation = {
     /**
-     * Tier 1 — anything floating and *attached*: menus, popovers, dropdowns,
+     * Tier 1 — anything floating and *attached*: popovers, dropdowns,
      * hover-preview cards, the floating sidebar, the record peek, drawers, the
      * bulk bar. Pairs with a 10–12px radius and, for panels, an 8px gutter.
+     * NOT `Menu` (your-moon/crisp#934) -- that moved to
+     * `selectFloating`, seed-design's own flat shadow, below.
      */
     floating: `inset 0 0 0 1px ${c.ringPopover}, 0 0 0 1px ${c.shadowPopover1}, 0 4px 8px -4px ${c.shadowPopover2}, 0 4px 12px -2px ${c.shadowPopover3}`,
     /**
@@ -57,10 +59,11 @@ export const elevation = {
      */
     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.
+     * Seed-design's own `$shadow.s3`, a single flat layer, NOT `floating`
+     * above. Originally Select's own listbox shadow (crisp/#867); also `Menu`'s
+     * (your-moon/crisp#934) -- the raw seed dump confirms Menu
+     * is the one component seed's own spec gives a shadow to at all, and it's
+     * this exact value. Despite the name, not exclusive to Select.
      */
     selectFloating: `0 4px 16px ${c.shadowSelect}`,
 };

package/dist/esm/tokens/palette.js

@@ -63,14 +63,34 @@ export const palette = {
     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
-    // Create-attribute FormDialog, both themes: `rgba(0,0,0,.25)` light,
-    // `rgba(0,0,0,.55)` dark. `Dialog`'s own backdrop had shipped fully
-    // `transparent` (AUTHORING's Lesson 14 measured the command palette has
-    // NO dark backdrop and that got generalized to every `Dialog`, which this
-    // corrects — the palette is a different surface from a plain content
-    // dialog and really does dim the page).
-    bgScrim: { light: "rgba(0,0,0,0.25)", dark: "rgba(0,0,0,0.55)" },
+    // Dialog's page-dimming backdrop (crisp#677, Attio's own measured value:
+    // `rgba(0,0,0,.25)` light, `rgba(0,0,0,.55)` dark — `Dialog`'s own backdrop
+    // had shipped fully `transparent`, AUTHORING's Lesson 14 measured the
+    // command palette has NO dark backdrop and that got generalized to every
+    // `Dialog`, which this corrected).
+    //
+    // your-moon/crisp#934: light theme moved to seed-design's own scrim
+    // (`#00000074` ≈ 45% black, `bg.overlay`) — the owner's flat-dialog
+    // directive names "seed's own scrim" specifically, now that elevation is
+    // conveyed by the scrim alone (no more frosted-glass shadow/blur). Dark
+    // theme's `.55` is UNCHANGED: seed's own token system has no separate
+    // dark-theme scrim value to adopt, and `.55` wasn't found wrong -- only
+    // light had a sourced replacement value to move to.
+    bgScrim: { light: "rgba(0,0,0,0.45)", dark: "rgba(0,0,0,0.55)" },
+    // seed-design's `$color.bg.overlay` (BottomSheet/MenuSheet's own backdrop,
+    // crisp#911) — kept as its OWN token rather than folded into `bgScrim`
+    // above, even though #934 (landed after this one was added) moved
+    // `bgScrim`'s LIGHT value to the same `#00000074`: `bgOverlayStrong` is
+    // seed's literally theme-CONSTANT value (`color.yaml` gives the same hex
+    // for both `theme-light` and `theme-dark`), while `bgScrim` still differs
+    // by theme (`.45`/`.55`) -- the two tokens express different design
+    // decisions that currently coincide in one theme only.
+    bgOverlayStrong: { light: "#00000074", dark: "#00000074" },
+    // seed-design's `$color.stroke.neutral-muted` (MenuSheet group divider,
+    // crisp#911) -- a faint alpha hairline between grouped rows, theme-flipping
+    // (`color.yaml`: `static-black-alpha-300` light / `static-white-alpha-100`
+    // dark).
+    strokeGroupDivider: { light: "#00000010", dark: "#ffffff17" },
     // The discard-confirm's description line (crisp#677, `Dialog`'s new
     // `variant="alert"`) — measured live, both themes, over `popoverBg`: a
     // theme-relative alpha rather than a flat gray, so it stays legible if

package/dist/esm/tokens/scale.js

@@ -27,13 +27,22 @@ export const space = {
 // (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
+    // your-moon/crisp#919: was `7px` (Attio's own most-measured
+    // radius, 70 occurrences) -- now a pill, matching seed-design's own
+    // `chip.yaml` (`$radius.full` at every size, no size-based radius step at
+    // all, unlike Button/Badge). Same numeric value as `full` below, kept as
+    // its own named token because every one of this token's ~9 consumers
+    // (Chip, DataTable/RecordPage/RecordsTable/MultiSelect's own tag/mention
+    // rules, TableToolbar/DatePickerField's date-preset chips) reasons about
+    // "the chip corner" as its own concept, not literally "a generic pill".
+    chip: "999px",
     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)
+    "4xl": "24px", // seed-design's $radius.r6 — BottomSheet's top corner radius (crisp/#911)
     full: "999px", // pills
 };
 // Component sizing — recurring measured dimensions that are neither spacing nor
@@ -85,3 +94,36 @@ export const weight = {
     semibold: "600",
     bold: "700", // seed-design's font-weight-bold, for the seed-styled calendar
 };
+// Size-based letter-spacing ramp for DISPLAY/HEADING type (18px and up —
+// `text.*` above tops out at 16px and stays untracked). crisp's five
+// already-shipped headings tighten as they grow — authshell 20px/-0.4px (2%
+// of size), objectsettings 24px/-0.48px (2%), richtext 32px/-0.6px (1.875%)
+// — all Attio-measured (Inter) and left exactly as they are; this token
+// never touches them, or the button (-0.07px) / table-cell (-0.14px)
+// tracking, which are body sizes, not display type. (statcard's 28px/-0.4px,
+// 1.43%, is a looser outlier — it sets tabular numerals, not prose — and is
+// also left alone.)
+//
+// crisp#909: the study at docs/study/korean/ observed that Naver and Kakao
+// both tighten tracking as type gets bigger, and crisp's OWN large type
+// (EmptyState's 20px title, Dialog's 18px alert title, and any future
+// heading) had no tracking at all — it read as default, not set. The study
+// supplied the PATTERN only, never a number: Naver/Kakao's own values are
+// Korean-specific and were not copied. The numbers below come from rendering
+// real Mongolian Cyrillic ("Эрсдэлийн бүртгэл", "Хяналтын самбар") in VK Sans
+// Display — crisp's own font override, see `font.sans` above — at every
+// display size crisp uses today (18/20/24/26/28/32px), screenshotting six
+// candidates per size (0%, 1%, 1.5%, 2%, 2.5%, 3% of the font-size) and
+// checking for glyph collision. None collided even at 3%, so the pre-existing
+// 2%-of-size rule the five Attio headings already happen to follow was kept
+// as the ramp, rounded to the nearest 0.01px — it reads as deliberately set
+// with headroom to spare, and keeps new display type visually consistent
+// with the Attio-measured headings already shipped.
+export const tracking = {
+    "18": "-0.36px",
+    "20": "-0.4px",
+    "24": "-0.48px",
+    "26": "-0.52px",
+    "28": "-0.56px",
+    "32": "-0.64px",
+};

package/dist/esm/tokens/semantic.js

@@ -38,6 +38,8 @@ export const semantic = {
     bgTileActive: "tileActive",
     shadowTileActive: "tileActiveShadow",
     bgScrim: "bgScrim",
+    bgOverlayStrong: "bgOverlayStrong",
+    strokeGroupDivider: "strokeGroupDivider",
     fgAlertDescription: "fgAlertDescription",
     bgOverlayFrost: "overlayFrost",
     shadowOverlay1: "shadowOverlay1",

package/dist/fileupload.css

@@ -25,7 +25,9 @@
     & .crisp-fileupload-remove:hover { color: var(--crisp-fg-primary); }
     & .crisp-fileupload-remove:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); margin: 0; padding: 0; list-style: none; }
-    /* out of flow while empty, so the always-mounted live region costs no layout: display:none would take it out of the accessibility tree, which is the one thing it exists to be in */
+    /* out of flow while empty, so the always-mounted live region costs no
+       layout: display:none would take it out of the accessibility tree, which
+       is the one thing it exists to be in */
     & .crisp-fileupload-errors:empty { position: absolute; }
     & .crisp-fileupload-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
 }

package/dist/fileupload.layered.css

@@ -26,7 +26,9 @@
     & .crisp-fileupload-remove:hover { color: var(--crisp-fg-primary); }
     & .crisp-fileupload-remove:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); margin: 0; padding: 0; list-style: none; }
-    /* out of flow while empty, so the always-mounted live region costs no layout: display:none would take it out of the accessibility tree, which is the one thing it exists to be in */
+    /* out of flow while empty, so the always-mounted live region costs no
+       layout: display:none would take it out of the accessibility tree, which
+       is the one thing it exists to be in */
     & .crisp-fileupload-errors:empty { position: absolute; }
     & .crisp-fileupload-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
 }

package/dist/input.css

@@ -1,5 +1,5 @@
 .crisp-input {
-  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
+  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); border: 1px solid var(--crisp-border-default); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
     &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
     &:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
     & .crisp-input-value { box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; align-self: stretch; margin: 0; border: none; background: none; outline: none; font: inherit; color: var(--crisp-fg-primary); }
@@ -10,8 +10,10 @@
        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); }
+       same color-mix idiom every other soft crisp surface already uses.
+       `border-color: transparent` neutralises #910's new real rest border
+       so this measured ring isn't drawn twice. */
+    &[data-readonly] { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); border-color: 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 {
@@ -23,7 +25,7 @@
     & .crisp-input-value { padding-inline: var(--crisp-space-2-5); }
 }
 .crisp-input--size_large {
-  height: 36px; border-radius: 10px;
+  height: 36px; border-radius: var(--crisp-radius-xl);
     & .crisp-input-value { padding-inline: var(--crisp-space-3); }
 }
 .crisp-input--invalid_true {

package/dist/input.layered.css

@@ -1,6 +1,6 @@
 @layer crisp-components {
 .crisp-input {
-  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
+  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); border: 1px solid var(--crisp-border-default); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
     &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
     &:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
     & .crisp-input-value { box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; align-self: stretch; margin: 0; border: none; background: none; outline: none; font: inherit; color: var(--crisp-fg-primary); }
@@ -11,8 +11,10 @@
        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); }
+       same color-mix idiom every other soft crisp surface already uses.
+       `border-color: transparent` neutralises #910's new real rest border
+       so this measured ring isn't drawn twice. */
+    &[data-readonly] { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); border-color: 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 {
@@ -24,7 +26,7 @@
     & .crisp-input-value { padding-inline: var(--crisp-space-2-5); }
 }
 .crisp-input--size_large {
-  height: 36px; border-radius: 10px;
+  height: 36px; border-radius: var(--crisp-radius-xl);
     & .crisp-input-value { padding-inline: var(--crisp-space-3); }
 }
 .crisp-input--invalid_true {

package/dist/listpage.css

@@ -5,7 +5,9 @@
     & .crisp-listpage-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); white-space: nowrap; }
     /* #641: trailing (View settings / New) has to reach the toolbar's own
        inline-end edge on its own -- the only thing pushing it there used
-       to be .crisp-listpage-count's margin-inline-start: auto, which a consumer with no count badge (TasksTable, measured live: trailing sat right after leading, nowhere near the row's own right edge)
+       to be .crisp-listpage-count's margin-inline-start: auto, which a
+       consumer with no count badge (TasksTable, measured live: trailing
+       sat right after leading, nowhere near the row's own right edge)
        never renders. A bare margin-inline-start: auto here is safely
        overridden by the more specific rule right below whenever count IS
        present, so the two cases don't fight -- count's own auto margin

package/dist/listpage.layered.css

@@ -6,7 +6,9 @@
     & .crisp-listpage-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); white-space: nowrap; }
     /* #641: trailing (View settings / New) has to reach the toolbar's own
        inline-end edge on its own -- the only thing pushing it there used
-       to be .crisp-listpage-count's margin-inline-start: auto, which a consumer with no count badge (TasksTable, measured live: trailing sat right after leading, nowhere near the row's own right edge)
+       to be .crisp-listpage-count's margin-inline-start: auto, which a
+       consumer with no count badge (TasksTable, measured live: trailing
+       sat right after leading, nowhere near the row's own right edge)
        never renders. A bare margin-inline-start: auto here is safely
        overridden by the more specific rule right below whenever count IS
        present, so the two cases don't fight -- count's own auto margin