@crisp-ui-kit/crisp 0.49.0 → 0.51.0

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

@@ -41,6 +41,9 @@ const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
 const checkbox_1 = require("../../components/checkbox");
 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 recordstable_1 = require("../recordstable");
@@ -190,7 +193,8 @@ function EmptyCard({ icon, children, }) {
  * 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, ...rest }) {
+function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, ...rest }) {
+    const { editingKey, pendingKey, error, openEditing, closeEditing, commit } = (0, recordstable_1.useEditableField)(onEdit);
     const t = React.useMemo(() => ({
         ...exports.recordPageLabels,
         ...labels,
@@ -205,8 +209,15 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         },
     }), [labels]);
     const [favorite, setFavorite] = React.useState(false);
-    const [notes, setNotes] = React.useState([]);
-    const [tasks, setTasks] = React.useState([]);
+    // Notes/Tasks are controlled when the caller supplies `notes`/`tasks` (even
+    // `[]`) -- otherwise RecordPage keeps its own self-contained state, as
+    // before (#379). "Controlled" here means the array prop alone decides the
+    // mode; there's no meaningful "default seed" worth a separate
+    // defaultNotes/defaultTasks prop the way Tabs' defaultValue is.
+    const [internalNotes, setInternalNotes] = React.useState([]);
+    const [internalTasks, setInternalTasks] = React.useState([]);
+    const notes = notesProp ?? internalNotes;
+    const tasks = tasksProp ?? internalTasks;
     const [showAllActivity, setShowAllActivity] = React.useState(false);
     // Collapsible + searchable Record Details.
     const [detailsOpen, setDetailsOpen] = React.useState(true);
@@ -316,7 +327,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         },
     ];
     const ti = { size: 15, strokeWidth: 1.75 };
-    const tabs = [
+    const builtinTabs = [
         { value: "overview", label: t.tabs.overview, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { ...ti }) },
         {
             value: "activity",
@@ -346,9 +357,27 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
             badge: 0,
         },
     ];
-    const addNote = (text) => setNotes((n) => [{ id: nextId(), text, time: t.justNow }, ...n]);
-    const addTask = (text) => setTasks((t) => [{ id: nextId(), text, done: false }, ...t]);
-    const toggleTask = (id) => setTasks((t) => t.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
+    const addNote = (text) => {
+        if (notesProp) {
+            onAddNote?.(text);
+            return;
+        }
+        setInternalNotes((n) => [{ id: nextId(), text, time: t.justNow }, ...n]);
+    };
+    const addTask = (text) => {
+        if (tasksProp) {
+            onAddTask?.(text);
+            return;
+        }
+        setInternalTasks((n) => [{ id: nextId(), text, done: false }, ...n]);
+    };
+    const toggleTask = (id) => {
+        if (tasksProp) {
+            onToggleTask?.(id);
+            return;
+        }
+        setInternalTasks((n) => n.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
+    };
     // A small, plausible activity feed derived from the record's own fields.
     const domain = byKey.get("domain");
     const cats = byKey.get("categories");
@@ -376,7 +405,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
     const activityFeed = ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-viewall crisp-recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-feed", children: shownActivity.map((a) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-feed-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-feed-dot", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { size: 13, strokeWidth: 2 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-feed-body", children: [a.text, (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
     const emailsEmpty = ((0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 22, strokeWidth: 1.5 }), children: t.noEmailsWith(name) }));
-    const panel = (active) => {
+    const builtinPanel = (active) => {
         switch (active) {
             case "overview":
                 return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-panel", children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-section-title", children: t.highlights }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-card", children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-grid", children: highlights.map((h) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-hl-cell", children: [(0, jsx_runtime_1.jsx)(h.icon, { className: "crisp-recordpage-hl-icon", size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-label", children: h.label }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-value", children: h.value ?? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] }), activityFeed, (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), (0, jsx_runtime_1.jsx)(NotesSection, { notes: notes, onAdd: addNote, labels: t }), (0, jsx_runtime_1.jsx)(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
@@ -392,6 +421,19 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                 return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
     };
+    // #379: `tabs` (consumer-supplied) replaces the CRM set wholesale, rather
+    // than merging with it — a mixed set would leave a caller unable to ever
+    // drop a built-in tab it doesn't want. `count` maps to Tabs' own `badge`.
+    const effectiveTabs = tabsProp
+        ? tabsProp.map((tb) => ({
+            value: tb.id,
+            label: tb.label,
+            badge: tb.count,
+        }))
+        : builtinTabs;
+    const effectivePanel = tabsProp
+        ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
+        : builtinPanel;
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", 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) => {
@@ -405,7 +447,43 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                                                     if (!searchOpen)
                                                         setDetailsOpen(true);
                                                 }, children: searchOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
-                                        (shownFields.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shownFields.map((col) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-label", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-field-label-text", children: col.label })] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-field-value", children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t }) })] }, col.key))), canRevealFields && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-viewall crisp-recordpage-viewall--section", onClick: () => {
+                                        (shownFields.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shownFields.map((col) => {
+                                                    // #431: a field only actually opens when there's an
+                                                    // `onEdit` to commit through -- `editable` with nothing
+                                                    // to call would be a dead click.
+                                                    const canEdit = Boolean(col.editable && onEdit);
+                                                    const isPending = pendingKey === col.key;
+                                                    const fieldError = error?.key === col.key ? error.message : null;
+                                                    const label = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-label", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-field-label-text", children: col.label })] }));
+                                                    // select/switch are always their own live widget -- no
+                                                    // click-to-open, no separate edit/view mode, the same
+                                                    // convention DataTable's identical `editor` columns use
+                                                    // (#385): choosing a value or flipping a toggle IS the
+                                                    // commit gesture.
+                                                    if (canEdit && col.editor) {
+                                                        const value = record[col.key];
+                                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-field", children: [label, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-value", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": `Edit ${col.label}`, value: value != null ? String(value) : undefined, disabled: isPending, options: col.editOptions ?? [], onValueChange: (v) => commit(record.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-recordpage-edit-pending" }))] }), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                                    }
+                                                    if (canEdit && editingKey === col.key) {
+                                                        const value = record[col.key];
+                                                        const editor = (0, recordstable_1.editableInputType)(col.type);
+                                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-field", children: [label, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-value", children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-recordpage-edit", 
+                                                                            // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
+                                                                            autoFocus: true, ...editor, disabled: isPending, defaultValue: value == null ? "" : String(value), "aria-label": `Edit ${col.label}`, onKeyDown: (e) => {
+                                                                                if (isPending)
+                                                                                    return;
+                                                                                if (e.key === "Enter")
+                                                                                    commit(record.id, col.key, e.currentTarget.value);
+                                                                                else if (e.key === "Escape")
+                                                                                    closeEditing();
+                                                                            }, onBlur: (e) => {
+                                                                                if (isPending)
+                                                                                    return;
+                                                                                commit(record.id, col.key, e.currentTarget.value);
+                                                                            } }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-recordpage-edit-pending" })), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                                    }
+                                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-field", children: [label, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-edit-trigger", onClick: () => openEditing(col.key), children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t }) })) : ((0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t })), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                                }), canRevealFields && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-viewall crisp-recordpage-viewall--section", onClick: () => {
                                                         // Revealing all fields also opens the (focused)
                                                         // field search; collapsing closes it.
                                                         const next = !showAllValues;
@@ -423,6 +501,6 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                             const rtl = (0, core_1.isRtlElement)(e.currentTarget);
                             const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
                             setDetailsW((w) => grow ? Math.min(560, w + 16) : Math.max(300, w - 16));
-                        } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
+                        } }), (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 }) })] })] }));
 }
 RecordPage.displayName = "RecordPage";

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

@@ -79,7 +79,37 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-recordpage-field-label svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; padding-top: 2px; line-height: 20px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpage-field-value[data-editable] { cursor: pointer; }
+    /* the click-to-edit trigger is a real <button> (keyboard-operable),
+       reset back to plain inline text and made a flex-wrap container of its
+       own -- FieldValue can render several chips (tags), which still need
+       to wrap the way they did before this had a button around them at
+       all. It wraps only FieldValue, never the error slot beside it (see
+       the component's own comment) -- NOT \`display: contents\`, which
+       drops a button's accessible semantics in some engines. */
+    & .crisp-recordpage-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
     & .crisp-recordpage-empty { color: ${tokens_1.contract.fgMuted}; }
+
+    /* #431: measured live on app.attio.com's record page Details column --
+       clicking a field's value opens a plain, borderless field exactly
+       filling the value's own box (no border, no background, no
+       box-shadow), same font as the value it replaces (hence \`font:
+       inherit\`, not a restated size/weight). A field row's own hover tint
+       above already carries the "this is interactive" affordance; the
+       pending/error treatment isn't Attio-measured -- it reuses the same
+       tokens DataTable's identical states already use (opacity 0.5,
+       \`bgDanger\`), per #385/#430. */
+    & .crisp-recordpage-edit { display: block; width: 100%; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; box-shadow: none; outline: none; font: inherit; color: inherit; }
+    /* not Attio-measured (its own field shows no focus ring either, caret
+       only) -- kept for real keyboard users, the same brand ring every
+       other crisp field already shows on focus (DataTable's identical
+       .crisp-datatable-edit:focus, e.g.). */
+    & .crisp-recordpage-edit:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-recordpage-edit-pending { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; }
+    & .crisp-recordpage-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
     & .crisp-recordpage-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-link:hover { text-decoration: underline; }
     & .crisp-recordpage-emptystate { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }

package/dist/cjs/product/recordpanel/recordpanel.js

@@ -38,6 +38,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
+const select_1 = require("../../components/select");
+const spinner_1 = require("../../components/spinner");
+const switch_1 = require("../../components/switch");
 const core_1 = require("../../core");
 const recordstable_1 = require("../recordstable");
 const recordpanel_recipe_1 = require("./recordpanel.recipe");
@@ -63,8 +66,9 @@ function FieldValue({ col, row, emptyLabel, }) {
  * relative` container (e.g. the app main area); it slides in from the right and
  * overlays the content.
  */
-function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, ...rest }) {
+function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, onEdit, ...rest }) {
     const titleId = React.useId();
+    const { editingKey, pendingKey, error, openEditing, closeEditing, commit } = (0, recordstable_1.useEditableField)(onEdit);
     // close on Escape while open -- but not when a Menu/Select/Popover/
     // ContextMenu opened from inside the panel (e.g. a footer "More actions"
     // menu) is itself open (#361): that Escape belongs to the nested layer,
@@ -89,13 +93,25 @@ function RecordPanel({ record, columns, onClose, className, closeLabel = "Close
         if (!record)
             return;
         const onKey = (e) => {
-            if (e.key !== "Escape" || (0, core_1.hasOpenFloatingLayer)())
+            if (e.key !== "Escape")
+                return;
+            // #431: Escape while a field is open cancels JUST that field, the
+            // same way DataTable's own editable cells treat it -- not the whole
+            // panel. Checked ahead of `hasOpenFloatingLayer()` (capture phase, so
+            // this runs before the field's own bubble-phase onKeyDown would ever
+            // get a chance to stopPropagation -- same reasoning as the
+            // floating-layer check below).
+            if (editingKey) {
+                closeEditing();
+                return;
+            }
+            if ((0, core_1.hasOpenFloatingLayer)())
                 return;
             onClose();
         };
         document.addEventListener("keydown", onKey, true);
         return () => document.removeEventListener("keydown", onKey, true);
-    }, [record, onClose]);
+    }, [record, onClose, editingKey, closeEditing]);
     if (!record)
         return null;
     const entityCol = columns.find((c) => c.type === "entity");
@@ -104,6 +120,40 @@ function RecordPanel({ record, columns, onClose, className, closeLabel = "Close
         : undefined;
     const fields = columns.filter((c) => c.type !== "entity");
     const heading = title ?? entity?.name ?? "Record";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpanel_recipe_1.recordpanelRecipe)({ className }), ...rest, role: "dialog", "aria-labelledby": titleId, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-header", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, (0, jsx_runtime_1.jsx)("span", { id: titleId, className: "crisp-recordpanel-title", children: heading }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-sectionlabel", children: detailsLabel }), fields.map((col) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-field-value", children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })] }, col.key)))] }), footer != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpanel_recipe_1.recordpanelRecipe)({ className }), ...rest, role: "dialog", "aria-labelledby": titleId, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-header", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, (0, jsx_runtime_1.jsx)("span", { id: titleId, className: "crisp-recordpanel-title", children: heading }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-sectionlabel", children: detailsLabel }), fields.map((col) => {
+                        // #431: a field only actually opens when there's an `onEdit` to
+                        // commit through -- `editable` with nothing to call would be a
+                        // dead click.
+                        const canEdit = Boolean(col.editable && onEdit);
+                        const isPending = pendingKey === col.key;
+                        const fieldError = error?.key === col.key ? error.message : null;
+                        // select/switch are always their own live widget -- no click-to-
+                        // open, no separate edit/view mode, the same convention
+                        // DataTable's identical `editor` columns use (#385): choosing a
+                        // value or flipping a toggle IS the commit gesture.
+                        if (canEdit && col.editor) {
+                            const value = record[col.key];
+                            return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-value", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": `Edit ${col.label}`, value: value != null ? String(value) : undefined, disabled: isPending, options: col.editOptions ?? [], onValueChange: (v) => commit(record.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-recordpanel-edit-pending" }))] }), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
+                        }
+                        if (canEdit && editingKey === col.key) {
+                            const value = record[col.key];
+                            const editor = (0, recordstable_1.editableInputType)(col.type);
+                            return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-value", children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-recordpanel-edit", 
+                                                // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
+                                                autoFocus: true, ...editor, disabled: isPending, defaultValue: value == null ? "" : String(value), "aria-label": `Edit ${col.label}`, onKeyDown: (e) => {
+                                                    if (isPending)
+                                                        return;
+                                                    if (e.key === "Enter")
+                                                        commit(record.id, col.key, e.currentTarget.value);
+                                                    else if (e.key === "Escape")
+                                                        closeEditing();
+                                                }, onBlur: (e) => {
+                                                    if (isPending)
+                                                        return;
+                                                    commit(record.id, col.key, e.currentTarget.value);
+                                                } }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-recordpanel-edit-pending" })), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
+                        }
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-edit-trigger", onClick: () => openEditing(col.key), children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })) : ((0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, emptyLabel: emptyLabel })), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
+                    })] }), footer != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
 }
 RecordPanel.displayName = "RecordPanel";

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

@@ -34,8 +34,37 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-recordpanel-field-label { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 132px; flex-shrink: 0; padding-top: 3px; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; }
     & .crisp-recordpanel-field-label svg { flex-shrink: 0; }
     & .crisp-recordpanel-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; padding-top: 3px; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpanel-field-value[data-editable] { cursor: pointer; }
+    /* the click-to-edit trigger is a real <button> (keyboard-operable),
+       reset back to plain inline text and made a flex-wrap container of its
+       own -- FieldValue can render several chips (tags), which still need
+       to wrap the way they did before this had a button around them at
+       all. It wraps only FieldValue, never the error slot beside it (see
+       the component's own comment) -- NOT \`display: contents\`, which
+       drops a button's accessible semantics in some engines. */
+    & .crisp-recordpanel-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
     & .crisp-recordpanel-empty { color: ${tokens_1.contract.fgMuted}; }
 
+    /* #431: measured live on app.attio.com's record side panel -- clicking a
+       field's value opens a plain, borderless field exactly filling the
+       value's own box (no border, no background, no box-shadow), same font
+       as the value it replaces (hence \`font: inherit\`, not a restated
+       size/weight). A field row's own hover tint above already carries the
+       "this is interactive" affordance; the pending/error treatment isn't
+       Attio-measured -- it reuses the same tokens DataTable's identical
+       states already use (opacity 0.5, \`bgDanger\`), per #385/#430. */
+    & .crisp-recordpanel-edit { display: block; width: 100%; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; box-shadow: none; outline: none; font: inherit; color: inherit; }
+    /* not Attio-measured (its own field shows no focus ring either, caret
+       only) -- kept for real keyboard users, the same brand ring every
+       other crisp field already shows on focus (DataTable's identical
+       .crisp-datatable-edit:focus, e.g.). */
+    & .crisp-recordpanel-edit:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-recordpanel-edit:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-recordpanel-edit-pending { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpanel-edit-error { flex-basis: 100%; margin-top: ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-recordpanel-edit-picker { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; }
+    & .crisp-recordpanel-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
+
     ${recordstable_tag_1.recordTagCss}
     & .crisp-recordpanel-link { color: ${tokens_1.contract.bgBrandSolid}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpanel-link:hover { text-decoration: underline; }

package/dist/cjs/product/recordstable/editable-field.js

@@ -0,0 +1,110 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditableField = useEditableField;
+exports.editableInputType = editableInputType;
+const React = __importStar(require("react"));
+/**
+ * The async-commit state machine behind `RecordPanel`/`RecordPage`'s
+ * editable fields (#431) — the same shape `DataTable`'s own `commitEdit`
+ * uses (#385/#430): a sync `onEdit` (returns `undefined`) commits and closes
+ * immediately; a Promise-returning `onEdit` keeps the field open and pending
+ * while it settles, then either closes it (resolve) or closes it AND
+ * reverts while showing the rejection's message (reject). The revert needs
+ * no extra code here either: neither `RecordPanel` nor `RecordPage` mutates
+ * `record` itself, so once `editingKey` clears, the field simply renders
+ * `record[key]` again — whatever it still says.
+ *
+ * One hook shared by both consumers rather than two copies of the same
+ * three `useState`s and the same `.then` branching.
+ */
+function useEditableField(onEdit) {
+    const [editingKey, setEditingKey] = React.useState(null);
+    // Set only while an async `onEdit` is in flight -- a sync `onEdit` never
+    // touches this.
+    const [pendingKey, setPendingKey] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    // Opening a field's editor also clears any stale error left over from a
+    // PREVIOUS failed commit on it -- otherwise a rejection from three edits
+    // ago would still be sitting there while the reader tries again.
+    const openEditing = React.useCallback((key) => {
+        setError(null);
+        setEditingKey(key);
+    }, []);
+    const closeEditing = React.useCallback(() => setEditingKey(null), []);
+    const commit = React.useCallback((id, key, value) => {
+        setError(null);
+        const result = onEdit?.(id, key, value);
+        if (result && typeof result.then === "function") {
+            setPendingKey(key);
+            result.then(() => {
+                setPendingKey(null);
+                setEditingKey(null);
+            }, (err) => {
+                setPendingKey(null);
+                setEditingKey(null);
+                setError({
+                    key,
+                    message: err instanceof Error
+                        ? err.message
+                        : typeof err === "string"
+                            ? err
+                            : "Could not save",
+                });
+            });
+            return;
+        }
+        setEditingKey(null);
+    }, [onEdit]);
+    return { editingKey, pendingKey, error, openEditing, closeEditing, commit };
+}
+/**
+ * Which plain editor a column gets when it's `editable` without an
+ * `editor: "select" | "switch"` — identical to `DataTable`'s own
+ * `editorFor` (#385): number/currency get a numeric field, date a native
+ * date field, everything else (text, entity, tags, url, status, reference)
+ * a plain text field. Kept as one function so the two never drift apart.
+ */
+function editableInputType(colType) {
+    switch (colType) {
+        case "number":
+        case "currency":
+            return { type: "number", inputMode: "decimal" };
+        case "date":
+            return { type: "date" };
+        default:
+            return { type: "text", inputMode: "text" };
+    }
+}

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

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recordstableRecipe = exports.tagTone = exports.RecordsTable = exports.defaultRows = exports.defaultColumns = void 0;
+exports.recordstableRecipe = exports.tagTone = exports.RecordsTable = exports.defaultRows = exports.defaultColumns = exports.useEditableField = exports.editableInputType = void 0;
+var editable_field_1 = require("./editable-field");
+Object.defineProperty(exports, "editableInputType", { enumerable: true, get: function () { return editable_field_1.editableInputType; } });
+Object.defineProperty(exports, "useEditableField", { enumerable: true, get: function () { return editable_field_1.useEditableField; } });
 var recordstable_1 = require("./recordstable");
 Object.defineProperty(exports, "defaultColumns", { enumerable: true, get: function () { return recordstable_1.defaultColumns; } });
 Object.defineProperty(exports, "defaultRows", { enumerable: true, get: function () { return recordstable_1.defaultRows; } });