@crisp-ui-kit/crisp 0.49.0 → 0.51.0

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

@@ -4,9 +4,12 @@ import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
 import { Checkbox } from "../../components/checkbox/index.js";
 import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
+import { Select } from "../../components/select/index.js";
+import { Spinner } from "../../components/spinner/index.js";
+import { Switch } from "../../components/switch/index.js";
 import { Tabs } from "../../components/tabs/index.js";
 import { isRtlElement } from "../../core/index.js";
-import { tagTone, } from "../recordstable/index.js";
+import { editableInputType, tagTone, useEditableField, } from "../recordstable/index.js";
 import { recordpageRecipe } from "./recordpage.recipe.js";
 function valueEmpty(v) {
     return v == null || v === "" || (Array.isArray(v) && v.length === 0);
@@ -153,7 +156,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.
  */
-export function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, ...rest }) {
+export 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 } = useEditableField(onEdit);
     const t = React.useMemo(() => ({
         ...recordPageLabels,
         ...labels,
@@ -168,8 +172,15 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
         },
     }), [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);
@@ -279,7 +290,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
         },
     ];
     const ti = { size: 15, strokeWidth: 1.75 };
-    const tabs = [
+    const builtinTabs = [
         { value: "overview", label: t.tabs.overview, icon: _jsx(LayoutGrid, { ...ti }) },
         {
             value: "activity",
@@ -309,9 +320,27 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
             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");
@@ -339,7 +368,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
     const activityFeed = (_jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? (_jsx("button", { type: "button", className: "crisp-recordpage-viewall crisp-recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), _jsx("div", { className: "crisp-recordpage-feed", children: shownActivity.map((a) => (_jsxs("div", { className: "crisp-recordpage-feed-item", children: [_jsx("span", { className: "crisp-recordpage-feed-dot", children: _jsx(ActivityIcon, { size: 13, strokeWidth: 2 }) }), _jsxs("div", { className: "crisp-recordpage-feed-body", children: [a.text, _jsx("div", { className: "crisp-recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
     const emailsEmpty = (_jsx(EmptyCard, { icon: _jsx(Inbox, { size: 22, strokeWidth: 1.5 }), children: t.noEmailsWith(name) }));
-    const panel = (active) => {
+    const builtinPanel = (active) => {
         switch (active) {
             case "overview":
                 return (_jsxs("div", { className: "crisp-recordpage-panel", children: [_jsxs("section", { children: [_jsx("div", { className: "crisp-recordpage-section-title", children: t.highlights }), _jsx("div", { className: "crisp-recordpage-hl-card", children: _jsx("div", { className: "crisp-recordpage-hl-grid", children: highlights.map((h) => (_jsxs("div", { className: "crisp-recordpage-hl-cell", children: [_jsx(h.icon, { className: "crisp-recordpage-hl-icon", size: 15, strokeWidth: 1.75 }), _jsx("div", { className: "crisp-recordpage-hl-label", children: h.label }), _jsx("div", { className: "crisp-recordpage-hl-value", children: h.value ?? (_jsx("span", { className: "crisp-recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] }), activityFeed, _jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }), _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
@@ -355,6 +384,19 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                 return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(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 (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
                                                 autoFocus: true, type: "text", className: "crisp-recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
@@ -368,7 +410,43 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                                                     if (!searchOpen)
                                                         setDetailsOpen(true);
                                                 }, children: searchOpen ? (_jsx(X, { size: 14, strokeWidth: 1.75 })) : (_jsx(Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
-                                        (shownFields.length > 0 ? (_jsxs(_Fragment, { children: [shownFields.map((col) => (_jsxs("div", { className: "crisp-recordpage-field", children: [_jsxs("span", { className: "crisp-recordpage-field-label", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, _jsx("span", { className: "crisp-recordpage-field-label-text", children: col.label })] }), _jsx("span", { className: "crisp-recordpage-field-value", children: _jsx(FieldValue, { col: col, row: record, labels: t }) })] }, col.key))), canRevealFields && (_jsx("button", { type: "button", className: "crisp-recordpage-viewall crisp-recordpage-viewall--section", onClick: () => {
+                                        (shownFields.length > 0 ? (_jsxs(_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 = (_jsxs("span", { className: "crisp-recordpage-field-label", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, _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 (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", children: [_jsxs("span", { className: "crisp-recordpage-edit-picker", children: [col.editor === "select" ? (_jsx(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) })) : (_jsx(Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-recordpage-edit-pending" }))] }), fieldError && (_jsx("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                                    }
+                                                    if (canEdit && editingKey === col.key) {
+                                                        const value = record[col.key];
+                                                        const editor = editableInputType(col.type);
+                                                        return (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", children: [_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 && (_jsx(Spinner, { size: 14, className: "crisp-recordpage-edit-pending" })), fieldError && (_jsx("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                                    }
+                                                    return (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit ? (_jsx("button", { type: "button", className: "crisp-recordpage-edit-trigger", onClick: () => openEditing(col.key), children: _jsx(FieldValue, { col: col, row: record, labels: t }) })) : (_jsx(FieldValue, { col: col, row: record, labels: t })), fieldError && (_jsx("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
+                                                }), canRevealFields && (_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;
@@ -386,6 +464,6 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                             const rtl = isRtlElement(e.currentTarget);
                             const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
                             setDetailsW((w) => grow ? Math.min(560, w + 16) : Math.max(300, w - 16));
-                        } }), _jsx("main", { className: "crisp-recordpage-main", children: _jsx(Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
+                        } }), _jsx("main", { className: "crisp-recordpage-main", children: _jsx(Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] })] }));
 }
 RecordPage.displayName = "RecordPage";

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

@@ -76,7 +76,37 @@ const config = defineRecipe({
     & .crisp-recordpage-field-label svg { flex-shrink: 0; color: ${c.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: ${c.space["1"]}; padding-top: 2px; line-height: 20px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.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: ${c.space["1"]}; margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
     & .crisp-recordpage-empty { color: ${c.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: ${c.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 ${c.bgBrandSolid}; }
+    & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-recordpage-edit-pending { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: ${c.space["0.5"]}; font-size: ${c.text.sm}; color: ${c.bgDanger}; }
+    & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; }
+    & .crisp-recordpage-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
     & .crisp-recordpage-link { color: ${c.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-link:hover { text-decoration: underline; }
     & .crisp-recordpage-emptystate { padding: ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.md}; color: ${c.fgMuted}; }

package/dist/esm/product/recordpanel/recordpanel.js

@@ -2,8 +2,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { X } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
+import { Select } from "../../components/select/index.js";
+import { Spinner } from "../../components/spinner/index.js";
+import { Switch } from "../../components/switch/index.js";
 import { hasOpenFloatingLayer } from "../../core/index.js";
-import { tagTone, } from "../recordstable/index.js";
+import { editableInputType, tagTone, useEditableField, } from "../recordstable/index.js";
 import { recordpanelRecipe } from "./recordpanel.recipe.js";
 function FieldValue({ col, row, emptyLabel, }) {
     const v = row[col.key];
@@ -27,8 +30,9 @@ function FieldValue({ col, row, emptyLabel, }) {
  * relative` container (e.g. the app main area); it slides in from the right and
  * overlays the content.
  */
-export function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, ...rest }) {
+export 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 } = 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,
@@ -53,13 +57,25 @@ export function RecordPanel({ record, columns, onClose, className, closeLabel =
         if (!record)
             return;
         const onKey = (e) => {
-            if (e.key !== "Escape" || 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 (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");
@@ -68,6 +84,40 @@ export function RecordPanel({ record, columns, onClose, className, closeLabel =
         : undefined;
     const fields = columns.filter((c) => c.type !== "entity");
     const heading = title ?? entity?.name ?? "Record";
-    return (_jsxs("div", { className: recordpanelRecipe({ className }), ...rest, role: "dialog", "aria-labelledby": titleId, children: [_jsxs("div", { className: "crisp-recordpanel-header", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? (_jsx(Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, _jsx("span", { id: titleId, className: "crisp-recordpanel-title", children: heading }), _jsx("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 18, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpanel-body", children: [_jsx("div", { className: "crisp-recordpanel-sectionlabel", children: detailsLabel }), fields.map((col) => (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsx("span", { className: "crisp-recordpanel-field-value", children: _jsx(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })] }, col.key)))] }), footer != null && (_jsx("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
+    return (_jsxs("div", { className: recordpanelRecipe({ className }), ...rest, role: "dialog", "aria-labelledby": titleId, children: [_jsxs("div", { className: "crisp-recordpanel-header", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? (_jsx(Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, _jsx("span", { id: titleId, className: "crisp-recordpanel-title", children: heading }), _jsx("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 18, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpanel-body", children: [_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 (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsxs("span", { className: "crisp-recordpanel-field-value", children: [_jsxs("span", { className: "crisp-recordpanel-edit-picker", children: [col.editor === "select" ? (_jsx(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) })) : (_jsx(Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-recordpanel-edit-pending" }))] }), fieldError && (_jsx("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
+                        }
+                        if (canEdit && editingKey === col.key) {
+                            const value = record[col.key];
+                            const editor = editableInputType(col.type);
+                            return (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsxs("span", { className: "crisp-recordpanel-field-value", children: [_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 && (_jsx(Spinner, { size: 14, className: "crisp-recordpanel-edit-pending" })), fieldError && (_jsx("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
+                        }
+                        return (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsxs("span", { className: "crisp-recordpanel-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit ? (_jsx("button", { type: "button", className: "crisp-recordpanel-edit-trigger", onClick: () => openEditing(col.key), children: _jsx(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })) : (_jsx(FieldValue, { col: col, row: record, emptyLabel: emptyLabel })), fieldError && (_jsx("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
+                    })] }), footer != null && (_jsx("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
 }
 RecordPanel.displayName = "RecordPanel";

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

@@ -31,8 +31,37 @@ const config = defineRecipe({
     & .crisp-recordpanel-field-label { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 132px; flex-shrink: 0; padding-top: 3px; color: ${c.fgMuted}; font-size: ${c.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: ${c.space["1"]}; padding-top: 3px; font-size: ${c.text.lg}; color: ${c.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: ${c.space["1"]}; margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
     & .crisp-recordpanel-empty { color: ${c.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: ${c.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 ${c.bgBrandSolid}; }
+    & .crisp-recordpanel-edit:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-recordpanel-edit-pending { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-recordpanel-edit-error { flex-basis: 100%; margin-top: ${c.space["0.5"]}; font-size: ${c.text.sm}; color: ${c.bgDanger}; }
+    & .crisp-recordpanel-edit-picker { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; }
+    & .crisp-recordpanel-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
+
     ${recordTagCss}
     & .crisp-recordpanel-link { color: ${c.bgBrandSolid}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpanel-link:hover { text-decoration: underline; }

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

@@ -0,0 +1,73 @@
+import * as React from "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.
+ */
+export 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.
+ */
+export 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/esm/product/recordstable/index.js

@@ -1,2 +1,3 @@
+export { editableInputType, useEditableField, } from "./editable-field.js";
 export { defaultColumns, defaultRows, RecordsTable, tagTone, } from "./recordstable.js";
 export { recordstableRecipe } from "./recordstable.recipe.js";

package/dist/esm/product/recordstable/recordstable.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, Copy, CopyPlus, Download, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plus, Star, Tag, Trash2, TrendingUp, Users, Workflow, X, } from "lucide-react";
+import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, CircleUserRound, Copy, CopyPlus, CornerDownLeft, Download, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plus, Star, Tag, Trash2, TrendingUp, Users, Workflow, X, } from "lucide-react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Avatar } from "../../components/avatar/index.js";
@@ -224,15 +224,17 @@ function EntityCell({ value, pinned, onOpenPage, avatarTone = "brand", labels, }
 }
 function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", labels, }) {
     const value = row[column.key];
-    // `render` fully owns the cell's content — no empty-dash fallback, no
-    // type renderer; it's the only thing drawn here (see the doc comment on
+    // `render` fully owns the cell's content — no empty fallback, no type
+    // renderer; it's the only thing drawn here (see the doc comment on
     // `Column.render`).
     if (column.render)
         return _jsx(_Fragment, { children: column.render(value, row) });
     if (value == null ||
         value === "" ||
         (Array.isArray(value) && !value.length)) {
-        return _jsx("span", { className: "crisp-recordstable-muted", children: "\u2014" });
+        // Attio's own empty cell is genuinely blank -- no placeholder character
+        // at all (#412).
+        return null;
     }
     // `format` keeps the type renderer's chrome below and only replaces the
     // text it displays.
@@ -275,11 +277,40 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
 function StatusCell({ column, row, onChange, }) {
     return (_jsx(Select, { variant: "ghost", "aria-label": column.label, placeholder: "\u2014", value: row[column.key] ?? undefined, onValueChange: onChange, options: column.options ?? [] }));
 }
+// A sentinel that can't collide with a real record id (crisp never generates
+// one, and a consumer's own ids come from their own data store) -- picking
+// this row calls `onCreateReference`, not `onChange` (#449).
+const CREATE_REFERENCE_VALUE = "__crisp_create_reference__";
+/** The 16px avatar Attio's own reference picker draws before every option's
+ * label -- a photo when the option carries one, a generic person glyph
+ * otherwise (measured live, #449: Attio's own fallback is an icon, not
+ * initials -- a different, deliberate choice from the entity cell's own
+ * initials fallback elsewhere in this file). */
+function referenceOptionLabel(o) {
+    return (_jsxs("span", { className: "crisp-recordstable-refoption", children: [_jsx(Avatar, { size: "sm", className: "crisp-recordstable-refoption-avatar", children: o.avatar ? (_jsx("img", { src: o.avatar, alt: "" })) : (_jsx(CircleUserRound, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })) }), o.label] }));
+}
 function ReferenceCell({ column, row, onChange, labels, }) {
-    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: labels.searchRecordsPlaceholder, "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
-            value: o.value,
-            label: o.label,
-        })) }));
+    const [query, setQuery] = React.useState("");
+    const options = (column.refOptions ?? []).map((o) => ({
+        value: o.value,
+        label: referenceOptionLabel(o),
+        keywords: o.label,
+    }));
+    if (column.onCreateReference) {
+        options.push({
+            value: CREATE_REFERENCE_VALUE,
+            label: (_jsxs("span", { className: "crisp-recordstable-refoption crisp-recordstable-refoption--create", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), `Create ${column.createLabel ?? "record"}`] })),
+            // always reachable regardless of the typed query -- it's an action,
+            // not a record to filter away
+            keywords: query,
+        });
+    }
+    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: labels.searchRecordsPlaceholder, onSearchChange: setQuery, "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: (v) => {
+            if (v === CREATE_REFERENCE_VALUE)
+                column.onCreateReference?.(query);
+            else
+                onChange(v);
+        }, options: options }));
 }
 function TagsCell({ column, row, options, onChange, labels, }) {
     const value = row[column.key] ?? [];
@@ -302,12 +333,37 @@ function TagsCell({ column, row, options, onChange, labels, }) {
 // reachable from this module's public surface.
 // imported for use here AND re-exported, because a bare `export ... from` does
 // not bind the names locally
-import { formatCellDate, parseCellDate } from "../../core/index.js";
+import { cellDatePrecision, formatCellDate, parseCellDate, } from "../../core/index.js";
 export { formatCellDate, parseCellDate };
+// "1998" for a year-only raw value, "Sep 1998" for year-month, and the full
+// "Sep 4, 1998" only once the raw value actually named a day (#312) --
+// DatePickerField's own default format always prints full precision, since
+// as a general calendar field it has no raw string to read a precision from.
+function formatByPrecision(d, precision) {
+    if (precision === "year")
+        return String(d.getFullYear());
+    return d.toLocaleDateString(undefined, {
+        month: "short",
+        day: precision === "month" ? undefined : "numeric",
+        year: "numeric",
+    });
+}
 function DateCell({ column, row, onChange, }) {
     const raw = row[column.key];
     const value = parseCellDate(raw);
-    return (_jsx(DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange(formatCellDate(d)) }));
+    const precision = raw ? cellDatePrecision(raw) : "day";
+    return (_jsx(DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, 
+        // Out of scope for #394 (which added Clear to DatePickerField itself):
+        // a cell's OWN clear-to-empty affordance is a different, unmeasured
+        // question, and this callback's `string` contract has no "empty" of
+        // its own to report yet. Keeps this cell's exact pre-#394 behavior.
+        clearable: false, 
+        // #417: the trigger displays the value at its stored precision
+        // (year-only stays year-only) rather than always a full date.
+        format: (d) => formatByPrecision(d, precision), onChange: (d) => {
+            if (d)
+                onChange(formatCellDate(d));
+        } }));
 }
 /**
  * The "New <object>" create modal — measured from a create-record dialog:
@@ -335,7 +391,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
                 row[col.key] = { name: raw || labels.untitled };
             }
             else if (!raw) {
-                // leave empty fields unset so the cell renders its "—" placeholder
+                // leave empty fields unset so the cell renders blank (#412)
             }
             else if (col.type === "tags") {
                 row[col.key] = raw
@@ -367,7 +423,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
     return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, title: labels.newRecordTitle(entityLabel), icon: EntityIcon ? _jsx(EntityIcon, { size: 16, strokeWidth: 1.75 }) : undefined, width: 720, children: [_jsx(DialogBody, { children: columns.map((col, i) => (_jsxs("div", { className: "crisp-dialog-field", children: [_jsx("label", { className: "crisp-dialog-field-label", htmlFor: `create-${col.key}`, children: col.label }), _jsx(Input, { id: `create-${col.key}`, ref: i === 0 ? firstRef : undefined, value: values[col.key] ?? "", onChange: (e) => set(col.key, e.currentTarget.value), placeholder: labels.setFieldPlaceholder(col.label), onKeyDown: (e) => {
                                 if (e.key === "Enter" && (e.metaKey || e.ctrlKey))
                                     submit();
-                            } })] }, col.key))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "crisp-dialog-more", children: [labels.createMore, _jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), _jsxs("button", { type: "button", className: "crisp-dialog-submit", onClick: submit, children: [labels.createRecord, _jsx("span", { className: "crisp-dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
+                            } })] }, col.key))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "crisp-dialog-more", children: [_jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore }), labels.createMore] }), _jsxs("button", { type: "button", className: "crisp-dialog-submit", onClick: submit, children: [labels.createRecord, _jsxs("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: _jsx(CornerDownLeft, { size: 10, strokeWidth: 2 }) })] })] })] })] }));
 }
 /**
  * A measured-style record grid — fully featured. Toolbar (search / sort status /
@@ -1034,7 +1090,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                                 setDragCol(col.key);
                                                                 e.dataTransfer.effectAllowed = "move";
                                                             }
-                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-recordstable-th-label", children: col.label }), _jsx("span", { className: "crisp-recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
+                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-recordstable-th-label", children: col.label }), _jsx("span", { className: "crisp-recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
                                                         createPortal(_jsxs("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "crisp-recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);

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

@@ -71,6 +71,14 @@ ${toolbarChromeBody("recordstable")}
     & .crisp-recordstable-td--picker .crisp-multiselect-chips .crisp-recordstable-tag { flex-shrink: 0; max-width: none; }
     & .crisp-recordstable-td--picker .crisp-multiselect-chevron { display: none; }
     & .crisp-recordstable-td--picker .crisp-multiselect-placeholder { color: ${c.fgMuted}; }
+    /* reference picker: a leading 16px avatar per option, plus a trailing
+       "Create X" row when the consumer supplies one (#449) -- measured live
+       against Attio's own picker (16px circular avatar, 16px plain icon for
+       the create row, both sitting in the option's existing 8px gap, no new
+       gap value invented). */
+    & .crisp-recordstable-refoption { display: flex; align-items: center; gap: ${c.space["2"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-recordstable-refoption-avatar { flex-shrink: 0; }
+    & .crisp-recordstable-refoption--create { color: ${c.fgMuted}; }
     & .crisp-recordstable-status { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
     & .crisp-recordstable-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${c.radius.full}; }
     & .crisp-recordstable-cell { display: flex; align-items: center; gap: ${c.space["2"]}; height: 100%; min-width: 0; }
@@ -129,7 +137,7 @@ ${toolbarChromeBody("recordstable")}
     & .crisp-recordstable-empty { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: ${c.space["8"]} ${c.space["4"]}; }
 
     /* summary footer — per-column aggregation, sticky to the bottom */
-    & .crisp-recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${c.size.tableRow}; padding: 0; border-top: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; }
+    & .crisp-recordstable-sum { position: sticky; bottom: 0; z-index: 2; height: ${c.size.tableRow}; padding: 0; border-top: 1px solid ${c.borderSubtle}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; }
     & tfoot .crisp-recordstable-col-check, & tfoot .crisp-recordstable-col-entity { position: sticky; bottom: 0; z-index: 3; }
     & .crisp-recordstable-sum:last-child { border-inline-end: none; }
     & .crisp-recordstable-sum-btn { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["1.5"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${c.space["3"]}; border: none; background: none; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; cursor: pointer; white-space: nowrap; overflow: hidden; }