@crisp-ui-kit/crisp 0.57.0 → 0.57.2

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

@@ -41,12 +41,14 @@ const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
 const checkbox_1 = require("../../components/checkbox");
+const drawer_1 = require("../../components/drawer");
 const menu_1 = require("../../components/menu");
 const select_1 = require("../../components/select");
 const spinner_1 = require("../../components/spinner");
 const switch_1 = require("../../components/switch");
 const tabs_1 = require("../../components/tabs");
 const core_1 = require("../../core");
+const comments_1 = require("../comments");
 const column_1 = require("./column");
 const editable_field_1 = require("./editable-field");
 const recordpage_recipe_1 = require("./recordpage.recipe");
@@ -71,9 +73,16 @@ exports.recordPageLabels = {
     breadcrumb: "Breadcrumb",
     editRecord: "Edit record",
     recordActions: "Record actions",
-    addToFavourites: "Add to favourites",
-    removeFromFavourites: "Remove from favourites",
+    // US spelling, matching Attio's own live text exactly (#621) — this string
+    // is shared with the entity header's favourite-star aria-label, so both
+    // read "favorites" now, not just the menu.
+    addToFavourites: "Add to favorites",
+    removeFromFavourites: "Remove from favorites",
     copyRecordLink: "Copy record link",
+    configurePage: "Configure page",
+    copyPageUrl: "Copy page URL",
+    copyRecordId: "Copy record ID",
+    mergeRecords: "Merge records",
     deleteRecord: "Delete record",
     linkRecords: "Link records",
     // Tooltip copy re-measured live for #865 (was "Log a note"/"Create a
@@ -88,6 +97,8 @@ exports.recordPageLabels = {
     composeEmail: "Compose email",
     askAttio: "Ask AI",
     addToList: "Add to list",
+    share: "Share",
+    comments: "Comments",
     noLists: "This record has not been added to any lists.",
     highlights: "Highlights",
     recordDetails: "Record Details",
@@ -300,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);
@@ -333,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);
@@ -376,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") {
@@ -450,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";
 /**
@@ -461,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, ...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
@@ -473,6 +535,11 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const [internalTasks, setInternalTasks] = React.useState([]);
     const notes = notesProp ?? internalNotes;
     const tasks = tasksProp ?? internalTasks;
+    // Comments follow the same controlled/self-contained duality (#864).
+    const [internalComments, setInternalComments] = React.useState([]);
+    const comments = commentsProp ?? internalComments;
+    const [commentsOpen, setCommentsOpen] = React.useState(false);
+    const me = currentUser ?? { id: "me", name: "You" };
     const [showAllActivity, setShowAllActivity] = React.useState(false);
     // Drag-resizable left details column.
     const [detailsW, setDetailsW] = React.useState(DETAILS_DEFAULT_W);
@@ -631,6 +698,31 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         }
         setInternalTasks((n) => n.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
     };
+    const postComment = (text, threadId) => {
+        if (commentsProp) {
+            onPostComment?.(text, threadId);
+            return;
+        }
+        if (threadId == null) {
+            setInternalComments((prev) => [
+                {
+                    id: nextId(),
+                    root: { id: nextId(), author: me, time: t.justNow, body: text },
+                },
+                ...prev,
+            ]);
+            return;
+        }
+        setInternalComments((prev) => prev.map((th) => th.id === threadId
+            ? {
+                ...th,
+                replies: [
+                    ...(th.replies ?? []),
+                    { id: nextId(), author: me, time: t.justNow, body: text },
+                ],
+            }
+            : th));
+    };
     // A small, plausible activity feed derived from the record's own fields.
     const domain = byKey.get("domain");
     const cats = byKey.get("categories");
@@ -687,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.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.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.
@@ -699,6 +791,6 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                             setDetailsW((w) => grow
                                 ? Math.min(DETAILS_MAX_W, w + 16)
                                 : Math.max(DETAILS_MIN_W, w - 16));
-                        } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] })] }));
+                        } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), (0, jsx_runtime_1.jsx)(drawer_1.Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(comments_1.CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
 }
 RecordPage.displayName = "RecordPage";

package/dist/cjs/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}`,
 };