@crisp-ui-kit/crisp 0.57.1 → 0.57.2

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

@@ -311,7 +311,14 @@ function NotesSection({ notes, onAdd, labels, }) {
     return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.notes, count: notes.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-author", children: labels.you }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-time", children: n.time })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-note-text", children: n.text })] })] }, n.id))))] }));
+                } })), notes.length === 0 && !open ? ((0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-note-left", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), n.title && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-title", children: n.title })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-text", children: n.text })] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-time", children: n.time })] }, n.id))))] }));
 }
 function TasksSection({ tasks, onAdd, onToggle, labels, }) {
     const [open, setOpen] = React.useState(false);
@@ -344,13 +351,51 @@ function EmptyCard({ icon, children, }) {
  * `RecordPage`'s own root does: `<div className={recordpageRecipe()}>`
  * (also exported from this package).
  */
-function RecordDetails({ record, columns, sections, onEdit, labels, className, ...rest }) {
+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 } = (0, editable_field_1.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: (0, core_1.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);
@@ -387,7 +432,7 @@ function RecordDetails({ record, columns, sections, onEdit, labels, className, .
         groups = [{ title: undefined, fields: shown }];
     }
     const totalShown = groups.reduce((n, g) => n + g.fields.length, 0);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_1.cx)("crisp-recordpage-section", className), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.jsx)("input", { 
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_1.cx)("crisp-recordpage-section", className), "data-resizable": resizable ? "" : undefined, style: resizable ? { width } : undefined, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.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") {
@@ -461,7 +506,13 @@ function RecordDetails({ record, columns, sections, onEdit, labels, className, .
                                 setSearchOpen(next);
                                 if (!next)
                                     setFieldQuery("");
-                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-noresults", children: t.noFieldsMatch(fieldQuery) })))] }));
+                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-noresults", children: t.noFieldsMatch(fieldQuery) }))), resizable && ((0, jsx_runtime_1.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 = (0, core_1.isRtlElement)(e.currentTarget);
+                    const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                    setWidth(grow ? width + 16 : width - 16);
+                } }))] }));
 }
 RecordDetails.displayName = "RecordDetails";
 /**
@@ -472,7 +523,7 @@ RecordDetails.displayName = "RecordDetails";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, comments: commentsProp, onPostComment, currentUser, onShare, ...rest }) {
+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
@@ -728,7 +779,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", "data-peek": onClose ? "" : undefined, children: [onClose ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-peekbar", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-iconbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-peek-pager", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), counterLabel != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-peek-counter", children: counterLabel }))] })) : ((0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
                                 return;
                             // The pointer drag learned its direction in #212; this did not.

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

@@ -26,6 +26,21 @@ const config = (0, core_1.defineRecipe)({
     & * { box-sizing: border-box; }
 
     & .crisp-recordpage-topbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 44px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.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: ${tokens_1.contract.space["2"]} ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: transparent; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpage-peek-iconbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-peek-pager { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; margin-inline-start: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-recordpage-peek-navbtn:hover:not(:disabled) { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordpage-peek-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
+    & .crisp-recordpage-peek-counter { margin-inline-start: ${tokens_1.contract.space["3"]}; font-size: 12px; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-crumbs { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
     & .crisp-recordpage-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 ${tokens_1.contract.space["1.5"]}; margin: 0 calc(-1 * ${tokens_1.contract.space["1.5"]}) 0 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
     & .crisp-recordpage-crumb:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
@@ -45,6 +60,17 @@ const config = (0, core_1.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, ${tokens_1.contract.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, ${tokens_1.contract.bgBrandSolid} 55%, transparent); }
     & .crisp-recordpage-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; }
     & .crisp-recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }
     & .crisp-recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -178,12 +204,23 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-recordpage-btn--primary { box-shadow: none; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
-    & .crisp-recordpage-note { display: flex; gap: ${tokens_1.contract.space["2.5"]}; padding: ${tokens_1.contract.space["2.5"]} 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
-    & .crisp-recordpage-note-head { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; margin-bottom: ${tokens_1.contract.space["0.5"]}; }
-    & .crisp-recordpage-note-author { font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-recordpage-note-time { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
-    & .crisp-recordpage-note-text { font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.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: ${tokens_1.contract.space["3"]}; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius.xl}; }
+    & .crisp-recordpage-note + .crisp-recordpage-note { margin-top: ${tokens_1.contract.space["1.5"]}; }
+    & .crisp-recordpage-note-left { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-width: 0; overflow: hidden; }
+    & .crisp-recordpage-note-title { flex-shrink: 0; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-recordpage-note-time { flex-shrink: 0; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); }
 
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1.5"]} 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; padding-top: 1px; }

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspaceGeneralSettings = void 0;
+var workspacegeneralsettings_1 = require("./workspacegeneralsettings");
+Object.defineProperty(exports, "WorkspaceGeneralSettings", { enumerable: true, get: function () { return workspacegeneralsettings_1.WorkspaceGeneralSettings; } });

package/dist/cjs/product/workspacegeneralsettings/workspacegeneralsettings.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspaceGeneralSettings = WorkspaceGeneralSettings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const avatar_1 = require("../../components/avatar");
+const button_1 = require("../../components/button");
+const formfield_1 = require("../../components/formfield");
+const input_1 = require("../../components/input");
+const table_1 = require("../../components/table");
+const textlink_1 = require("../../components/textlink");
+const workspacegeneralsettings_recipe_1 = require("./workspacegeneralsettings.recipe");
+/**
+ * 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.
+ */
+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 ((0, jsx_runtime_1.jsx)("div", { className: (0, workspacegeneralsettings_recipe_1.workspacegeneralsettingsRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-page", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-heading", children: [(0, jsx_runtime_1.jsx)("h1", { className: "crisp-workspacegeneralsettings-title", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "crisp-workspacegeneralsettings-desc", children: [description, " ", (0, jsx_runtime_1.jsx)(textlink_1.TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-logorow", children: [logoSrc ? ((0, jsx_runtime_1.jsx)("img", { src: logoSrc, alt: "", width: 48, height: 48, style: { borderRadius: "30%", objectFit: "cover" } })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "xl", shape: "rounded", tone: "brand", children: workspaceInitial })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-logotext", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-workspacegeneralsettings-logohelp", children: logoHelpText }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", onClick: onUploadLogo, children: uploadLogoLabel })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-fieldrow", children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: nameFieldLabel, children: (0, jsx_runtime_1.jsx)(input_1.Input, { value: name, onChange: (e) => onNameChange(e.target.value) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: slugFieldLabel, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-slugfield", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: slug, readOnly: true }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-workspacegeneralsettings-copybtn", "aria-label": copySlugLabel, onClick: onCopySlug, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 16 }) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-sectionhead", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-sectionhead-text", children: [(0, jsx_runtime_1.jsx)("h2", { className: "crisp-workspacegeneralsettings-sectiontitle", children: exportSectionTitle }), (0, jsx_runtime_1.jsx)("p", { className: "crisp-workspacegeneralsettings-desc", children: exportSectionDescription })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", onClick: onStartExport, children: startExportLabel })] }), (0, jsx_runtime_1.jsxs)(table_1.Table, { children: [(0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(table_1.TableHead, { children: typeColumnLabel }), (0, jsx_runtime_1.jsx)(table_1.TableHead, { children: dateColumnLabel })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: exportRows.length === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: 2, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-workspacegeneralsettings-emptyrow", children: noExportsLabel }) }) })) : (exportRows.map((row) => ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(table_1.TableCell, { children: row.type }), (0, jsx_runtime_1.jsx)(table_1.TableCell, { children: row.date })] }, row.id)))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-section", children: [(0, jsx_runtime_1.jsx)("h2", { className: "crisp-workspacegeneralsettings-sectiontitle", children: dangerSectionTitle }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-dangerrow", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-workspacegeneralsettings-dangertext", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-workspacegeneralsettings-rowtitle", children: deleteWorkspaceTitle }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-workspacegeneralsettings-dangerwarning", children: deleteWorkspaceWarning })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "danger", size: "sm", onClick: onDeleteWorkspace, children: deleteWorkspaceLabel })] })] })] }) }));
+}
+WorkspaceGeneralSettings.displayName = "WorkspaceGeneralSettings";

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.workspacegeneralsettingsRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "workspacegeneralsettings",
+    base: `& .crisp-workspacegeneralsettings-page { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["6"]}; font-family: ${tokens_1.contract.font.sans}; }
+    & .crisp-workspacegeneralsettings-heading { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; }
+    & .crisp-workspacegeneralsettings-title { font-size: 24px; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.48px; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+    & .crisp-workspacegeneralsettings-desc { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgMuted}; margin: 0; }
+
+    & .crisp-workspacegeneralsettings-section { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-workspacegeneralsettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+    & .crisp-workspacegeneralsettings-sectionhead { display: flex; align-items: flex-start; justify-content: space-between; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-workspacegeneralsettings-sectionhead-text { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; }
+
+    /* Logo row: a tile + helper text + "Upload logo" button. */
+    & .crisp-workspacegeneralsettings-logorow { display: flex; align-items: center; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-workspacegeneralsettings-logohelp { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-workspacegeneralsettings-logotext { display: flex; flex-direction: column; align-items: flex-start; gap: ${tokens_1.contract.space["1"]}; }
+
+    /* Name + Slug sit side by side, each ~half the content width. */
+    & .crisp-workspacegeneralsettings-fieldrow { display: flex; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-workspacegeneralsettings-fieldrow > * { flex: 1; min-width: 0; }
+    & .crisp-workspacegeneralsettings-slugfield { display: flex; align-items: center; gap: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .crisp-workspacegeneralsettings-copybtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.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: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["4"]}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.space["6"]}; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; border: 1px solid color-mix(in srgb, ${tokens_1.contract.bgDanger} 30%, transparent); border-radius: 12px; background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 6%, transparent); }
+    & .crisp-workspacegeneralsettings-dangertext { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; }
+    & .crisp-workspacegeneralsettings-rowtitle { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-workspacegeneralsettings-dangerwarning { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.workspacegeneralsettingsRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/tokens/contract.js

@@ -19,4 +19,5 @@ exports.contract = Object.assign(colors, {
     font: mapScale("font", scale_1.font),
     text: mapScale("text", scale_1.text),
     weight: mapScale("weight", scale_1.weight),
+    tracking: mapScale("tracking", scale_1.tracking),
 });

package/dist/cjs/tokens/elevation.js

@@ -15,9 +15,11 @@ const contract_1 = require("./contract");
  */
 exports.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 ${contract_1.contract.ringPopover}, 0 0 0 1px ${contract_1.contract.shadowPopover1}, 0 4px 8px -4px ${contract_1.contract.shadowPopover2}, 0 4px 12px -2px ${contract_1.contract.shadowPopover3}`,
     /**
@@ -60,10 +62,11 @@ exports.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 ${contract_1.contract.shadowSelect}`,
 };

package/dist/cjs/tokens/palette.js

@@ -66,14 +66,34 @@ exports.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/cjs/tokens/scale.js

@@ -9,7 +9,7 @@
 // Recipes MUST reference these through the contract (`c.space[...]`), never a
 // literal px — this file is the only exception.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.weight = exports.text = exports.font = exports.size = exports.radius = exports.space = void 0;
+exports.tracking = exports.weight = exports.text = exports.font = exports.size = exports.radius = exports.space = void 0;
 // Spacing: gaps, padding, margins. Keys follow the Tailwind step convention
 // (0.5 = half a 4px step = 2px) so the numbers stay legible to consumers.
 exports.space = {
@@ -30,13 +30,22 @@ exports.space = {
 // (inputs, rows, tiles); full is the pill.
 exports.radius = {
     xs: "4px", // seed-design's $radius.r1 — small badge / checkbox box corner
-    chip: "7px", // tag / chip corner — the single most used radius
+    // 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
@@ -88,3 +97,36 @@ exports.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.
+exports.tracking = {
+    "18": "-0.36px",
+    "20": "-0.4px",
+    "24": "-0.48px",
+    "26": "-0.52px",
+    "28": "-0.56px",
+    "32": "-0.64px",
+};

package/dist/cjs/tokens/semantic.js

@@ -41,6 +41,8 @@ exports.semantic = {
     bgTileActive: "tileActive",
     shadowTileActive: "tileActiveShadow",
     bgScrim: "bgScrim",
+    bgOverlayStrong: "bgOverlayStrong",
+    strokeGroupDivider: "strokeGroupDivider",
     fgAlertDescription: "fgAlertDescription",
     bgOverlayFrost: "overlayFrost",
     shadowOverlay1: "shadowOverlay1",

package/dist/columncalc.css

@@ -1,30 +1,38 @@
 .crisp-columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would
+       shrink the button back to its text. Make the wrapper fill too, so the
+       whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
-    /* No radius: the trigger fills the cell, so rounding its own corners leaves the cell's background showing through at the four corners as
+    /* No radius: the trigger fills the cell, so rounding its own corners
+       leaves the cell's background showing through at the four corners as
        soon as the hover tint paints. Everything else that fills a grid cell
        agrees -- recordstable-sum-btn, the same summary trigger, declares no
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px
        radius survived the chip-to-full-cell conversion and shipped rounded
-       until #282, so the spec check now guards it. */
-        /* The hit target is the WHOLE summary cell -- measured 246x36 with
+       until #282, so the spec check now guards it. */ /* The hit target is the WHOLE summary cell -- measured 246x36 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
        opens the aggregation menu.
        No `min-height` (crisp#834, found reproducing the footer-row-38px-
-       not-36px bug in an isolated browser test, not table.recipe.ts's own border/box-sizing, the hypothesis the issue itself flagged as unconfirmed): the table cell's OWN `height: tableRow` (36px,
+       not-36px bug in an isolated browser test, not table.recipe.ts's own
+       border/box-sizing, the hypothesis the issue itself flagged as
+       unconfirmed): the table cell's OWN `height: tableRow` (36px,
        border-box) leaves 34px of content box once its 2px of top+bottom
        border are counted, and `min-height: tableRow` here demanded 36px
        of CONTENT height regardless -- overflowing the cell by 2px, which
        auto-height table layout resolves by growing the whole row to fit,
        landing at exactly the reported 38. `height: 100%` alone already
-       fills whatever the cell's real content box is (the doc comment above this rule's own stated intent), with nothing left demanding more. */
+       fills whatever the cell's real content box is (the doc comment above
+       this rule's own stated intent), with nothing left demanding more. */
     & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
     & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
     & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
     & .crisp-columncalc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
-    /* crisp#837: re-measured live against Attio's real footer calc label -- 14px (was 13px, `c.text.md`, fixed on the shared trigger rule above) and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this file's own -op label already should have used instead of the flatter
+    /* crisp#837: re-measured live against Attio's real footer calc label --
+       14px (was 13px, `c.text.md`, fixed on the shared trigger rule above)
+       and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this
+       file's own -op label already should have used instead of the flatter
        `fgMuted` token (a close but not measured match). */
     & .crisp-columncalc-op { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-columncalc-section { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/columncalc.layered.css

@@ -1,31 +1,39 @@
 @layer crisp-components {
 .crisp-columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would
+       shrink the button back to its text. Make the wrapper fill too, so the
+       whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
-    /* No radius: the trigger fills the cell, so rounding its own corners leaves the cell's background showing through at the four corners as
+    /* No radius: the trigger fills the cell, so rounding its own corners
+       leaves the cell's background showing through at the four corners as
        soon as the hover tint paints. Everything else that fills a grid cell
        agrees -- recordstable-sum-btn, the same summary trigger, declares no
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px
        radius survived the chip-to-full-cell conversion and shipped rounded
-       until #282, so the spec check now guards it. */
-        /* The hit target is the WHOLE summary cell -- measured 246x36 with
+       until #282, so the spec check now guards it. */ /* The hit target is the WHOLE summary cell -- measured 246x36 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
        opens the aggregation menu.
        No `min-height` (crisp#834, found reproducing the footer-row-38px-
-       not-36px bug in an isolated browser test, not table.recipe.ts's own border/box-sizing, the hypothesis the issue itself flagged as unconfirmed): the table cell's OWN `height: tableRow` (36px,
+       not-36px bug in an isolated browser test, not table.recipe.ts's own
+       border/box-sizing, the hypothesis the issue itself flagged as
+       unconfirmed): the table cell's OWN `height: tableRow` (36px,
        border-box) leaves 34px of content box once its 2px of top+bottom
        border are counted, and `min-height: tableRow` here demanded 36px
        of CONTENT height regardless -- overflowing the cell by 2px, which
        auto-height table layout resolves by growing the whole row to fit,
        landing at exactly the reported 38. `height: 100%` alone already
-       fills whatever the cell's real content box is (the doc comment above this rule's own stated intent), with nothing left demanding more. */
+       fills whatever the cell's real content box is (the doc comment above
+       this rule's own stated intent), with nothing left demanding more. */
     & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
     & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
     & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
     & .crisp-columncalc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
-    /* crisp#837: re-measured live against Attio's real footer calc label -- 14px (was 13px, `c.text.md`, fixed on the shared trigger rule above) and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this file's own -op label already should have used instead of the flatter
+    /* crisp#837: re-measured live against Attio's real footer calc label --
+       14px (was 13px, `c.text.md`, fixed on the shared trigger rule above)
+       and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this
+       file's own -op label already should have used instead of the flatter
        `fgMuted` token (a close but not measured match). */
     & .crisp-columncalc-op { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-columncalc-section { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }