@crisp-ui-kit/crisp 0.52.0 → 0.52.2

package/dist/cjs/components/datatable/datatable.js

@@ -254,12 +254,61 @@ const CREATE_REFERENCE_VALUE = "__crisp_create_reference__";
 function dataReferenceOptionLabel(o) {
     return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-refoption", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", className: "crisp-datatable-refoption-avatar", children: o.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: o.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleUserRound, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })) }), o.label] }));
 }
+/** `Select` owns its own closed-by-default `open` state with no prop or
+ * imperative way to start it open (see select.tsx) -- the only thing that
+ * opens it is a real click on its trigger button. Attio's own picker opens
+ * the instant a `select`/`reference` cell enters edit mode (measured live
+ * against a GRC test company, 2026-09-24), not after a second click on an
+ * already-mounted, still-closed trigger, so drive that click ourselves.
+ * Guarded against firing twice (StrictMode double-invokes effects) --
+ * `Select`'s own trigger toggles, so a second click would close what the
+ * first one opened. */
+function useAutoOpenSelect() {
+    const ref = React.useRef(null);
+    const opened = React.useRef(false);
+    React.useEffect(() => {
+        if (opened.current)
+            return;
+        opened.current = true;
+        ref.current
+            ?.querySelector(".crisp-select-trigger")
+            ?.click();
+    }, []);
+    return ref;
+}
+/** `select`/`reference` open crisp's own `Select`, which closes its own
+ * popover on Escape (see select.tsx's "document-level fallback for Escape")
+ * but has no callback telling the CELL to leave editing mode -- and, same
+ * problem that fallback exists for, DOM focus doesn't reliably end up
+ * inside the newly-opened popover, so a `TableCell`-level `onKeyDown` can't
+ * be trusted to see the key at all (#453). Mirror Select's own fix for
+ * that: a raw `document` listener, not a focus-dependent React one. */
+function useEscapeExitsEditing(onCancel) {
+    React.useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onCancel();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [onCancel]);
+}
+/** `editor: "select"`'s picker, its own component (not inline in the
+ * row-render loop, like `DataReferenceEditor` below) because it needs the
+ * open-on-mount and escape-exits-editing effects above (#453). */
+function DataSelectEditor({ col, value, isPending, onCommit, onCancel, }) {
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
+    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, style: { display: "contents" }, children: (0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: col.options ?? [], onValueChange: onCommit }) }));
+}
 /** `editor: "reference"`'s picker, its own component (not inline in the
  * row-render loop) because it needs its own `useState` for the search query
  * -- one instance per cell, same reasoning `select`/`switch` don't need a
  * component of their own but this does. */
-function DataReferenceEditor({ col, value, isPending, onCommit, }) {
+function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
     const [query, setQuery] = React.useState("");
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
     const options = (col.refOptions ?? []).map((o) => ({
         value: o.value,
         label: dataReferenceOptionLabel(o),
@@ -274,12 +323,12 @@ function DataReferenceEditor({ col, value, isPending, onCommit, }) {
             keywords: query,
         });
     }
-    return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
-            if (v === CREATE_REFERENCE_VALUE)
-                col.onCreateReference?.(query);
-            else
-                onCommit(v);
-        } }));
+    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, style: { display: "contents" }, children: (0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
+                if (v === CREATE_REFERENCE_VALUE)
+                    col.onCreateReference?.(query);
+                else
+                    onCommit(v);
+            } }) }));
 }
 function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
     ? `${total} ${total === 1 ? "row" : "rows"}`
@@ -502,10 +551,11 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
      *                     throughout, and the browser's own picker already
      *                     carries both a calendar and a time control.
      *   text/entity       a plain text field
-     * `status`, `reference` and `tags` are pickers in RecordsTable, not
-     * double-click editors, so they are not editable here either -- except
-     * `editor: "reference"` (#432), which is a picker for the same reason
-     * `select`/`switch` are: always live, no double-click gate.
+     * `editor: "select"`/`"reference"` open their own picker instead of this
+     * native-input family, but through the SAME double-click gate (#453) --
+     * see the row-render loop's `isEditing` branch for those, this function
+     * only covers the native-input-backed types. `editor: "switch"` is the
+     * one editor with no double-click gate at all (always live).
      */
     function editorFor(col) {
         switch (col.type) {
@@ -559,11 +609,12 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             return;
         }
         else if (e.key === "Enter") {
-            // select/switch columns have no separate editing mode to enter --
-            // they're already their own live widget (#385); Enter there is a
-            // no-op here, same as any other non-editable cell that isn't wired to
-            // onRowClick.
-            if (columns[c]?.editable && !columns[c]?.editor) {
+            // #453: `switch` has no separate editing mode to enter -- it's
+            // already its own live widget (#385); Enter there is a no-op, same
+            // as any other non-editable cell that isn't wired to onRowClick.
+            // `select`/`reference` DO have one now (like every other editor),
+            // so Enter opens them too.
+            if (columns[c]?.editable && columns[c]?.editor !== "switch") {
                 e.preventDefault();
                 openEditing(selCell.id, selCell.key);
             }
@@ -794,14 +845,37 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                             const errorHere = editError?.id === row.id && editError?.key === col.key
                                                 ? editError.message
                                                 : null;
-                                            // A select/switch editable column is ALWAYS its own
-                                            // live widget -- no double-click gate, no separate
-                                            // edit/view mode, the same convention RecordsTable's
-                                            // status/reference pickers already use: choosing a
-                                            // value or flipping a toggle IS the commit gesture
-                                            // (#385).
-                                            if (col.editable && col.editor) {
-                                                return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: col.options ?? [], onValueChange: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "reference" ? ((0, jsx_runtime_1.jsx)(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            // #453: a `switch` editable column IS always its own
+                                            // live widget -- flipping the toggle IS the commit
+                                            // gesture, there's no meaningfully different "rest"
+                                            // display for a boolean. `select`/`reference` are
+                                            // NOT this: at rest they must show the column's own
+                                            // render/format like every other editable type
+                                            // (#412 empty handling included), and only open on
+                                            // double-click (#411) -- this branch previously
+                                            // rendered them unconditionally, replacing every
+                                            // row's own render with a picker trigger, which is
+                                            // the regression #453 reported (also #432/#449,
+                                            // which never had a "rest" state of their own to get
+                                            // right). See the `isEditing` block below for their
+                                            // actual editor.
+                                            if (col.editable && col.editor === "switch") {
+                                                return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            }
+                                            if (isEditing &&
+                                                (col.editor === "select" || col.editor === "reference")) {
+                                                return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
+                                                    // Same as the plain text editor's own cell:
+                                                    // opening/using the picker must not also fire
+                                                    // the row's onRowClick. Escape is handled by
+                                                    // `DataSelectEditor`/`DataReferenceEditor`
+                                                    // themselves (a document-level listener, not a
+                                                    // `TableCell`-level `onKeyDown`) -- opening the
+                                                    // picker moves DOM focus into a floating,
+                                                    // portaled popover, so a handler here can't
+                                                    // rely on the key event ever bubbling through
+                                                    // this element (#453).
+                                                    onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : ((0, jsx_runtime_1.jsx)(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                             }
                                             if (isEditing) {
                                                 return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", 

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

@@ -125,6 +125,53 @@ exports.recordPageLabels = {
     recordCreated: (name) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { children: name }), " record was created"] })),
     noEmailsWith: (name) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["No emails logged with ", name, " yet."] }),
 };
+/** `Select` owns its own closed-by-default `open` state with no prop or
+ * imperative way to start it open -- the only thing that opens it is a real
+ * click on its trigger button. Mounting one on click (rather than rendering
+ * it already open) leaves the reader with a second click to make before
+ * they can pick anything, so drive that click ourselves the moment it
+ * mounts. Mirrors `DataTable`'s own `useAutoOpenSelect` (#453) -- kept as
+ * its own copy here rather than a shared import, the same "duplicated per
+ * product surface" choice already made for `EditableOption`/
+ * `editableInputType` above. Guarded against firing twice (StrictMode
+ * double-invokes effects): `Select`'s own trigger toggles, so a second
+ * click would close what the first one opened. */
+function useAutoOpenSelect() {
+    const ref = React.useRef(null);
+    const opened = React.useRef(false);
+    React.useEffect(() => {
+        if (opened.current)
+            return;
+        opened.current = true;
+        ref.current
+            ?.querySelector(".crisp-select-trigger")
+            ?.click();
+    }, []);
+    return ref;
+}
+/** `Select` closes its own popover on Escape but has no callback telling
+ * the FIELD to leave editing mode -- and DOM focus doesn't reliably end up
+ * inside the newly-opened popover either, so a focus-dependent React
+ * `onKeyDown` can't be trusted to see the key at all. Mirrors `Select`'s
+ * own "document-level fallback for Escape" (see select.tsx) and
+ * `DataTable`'s identical fix for the same problem (#453). */
+function useEscapeExitsEditing(onCancel) {
+    React.useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onCancel();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [onCancel]);
+}
+/** `editor: "select"`'s picker, its own component (not inline in the field
+ * loop) because it needs the two hooks above (#457). */
+function RecordPageSelectEditor({ col, value, isPending, onCommit, onCancel, }) {
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
+    return ((0, jsx_runtime_1.jsxs)("span", { ref: ref, className: "crisp-recordpage-edit-picker", children: [(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: onCommit }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-recordpage-edit-pending" }))] }));
+}
 function TagsValue({ values }) {
     const [expanded, setExpanded] = React.useState(false);
     const overflow = values.length - 1;
@@ -135,6 +182,21 @@ function FieldValue({ col, row, labels, }) {
     const v = row[col.key];
     if (valueEmpty(v))
         return (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-empty", children: labels.setAValue });
+    // `editor: "select"` at rest (#457) -- checked ahead of `col.type` since
+    // the editor is orthogonal to it. Same dot+label shape as RecordsTable's
+    // own measured status chip, but this component's own classes
+    // (`crisp-recordpage-status[-dot]`): RecordsTable's own pair is scoped
+    // under `.crisp-recordstable`'s recipe root, so reusing its classnames
+    // verbatim here would resolve to nothing. Shown when the matched option
+    // carries a `color`, same as every other status-shaped value in this
+    // codebase; a colourless option (or no match) falls back to plain text.
+    if (col.editor === "select") {
+        const opt = col.editOptions?.find((o) => o.value === v);
+        const text = opt?.label ?? String(v);
+        if (!opt?.color)
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: text });
+        return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-status", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-status-dot", style: { background: opt.color } }), text] }));
+    }
     switch (col.type) {
         case "tags":
             return (0, jsx_runtime_1.jsx)(TagsValue, { values: v });
@@ -455,14 +517,31 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                                                     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) {
+                                                    // `switch` is always its own live widget -- no
+                                                    // click-to-open, no separate edit/view mode: flipping the
+                                                    // toggle IS the commit gesture, and there's no
+                                                    // meaningfully different "rest" display for a boolean
+                                                    // (same exception `DataTable`'s own `editor` makes, #453).
+                                                    if (canEdit && col.editor === "switch") {
+                                                        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: [(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));
+                                                    }
+                                                    // `select` opens crisp's own `Select` on a SINGLE click
+                                                    // (#457, corrects #431/#385's original always-live
+                                                    // copy of the same regression #453 fixed on `DataTable`)
+                                                    // -- like every other editable type here, at rest it
+                                                    // shows its value (see `FieldValue`'s own `col.editor
+                                                    // === "select"` case) via the generic click-to-open
+                                                    // branch below, and only mounts `Select` once
+                                                    // `editingKey` matches. `DataTable`'s own double-click
+                                                    // gate doesn't apply: `RecordPage`'s plain text/date
+                                                    // fields already open on a single click (measured live
+                                                    // for #431), so `select` matches that, not `DataTable`.
+                                                    if (canEdit &&
+                                                        editingKey === col.key &&
+                                                        col.editor === "select") {
                                                         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));
+                                                        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)(RecordPageSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commit(record.id, col.key, v), onCancel: closeEditing }), 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];

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

@@ -108,6 +108,13 @@ const config = (0, core_1.defineRecipe)({
     & .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}; }
+    /* #457: an \`editor: "select"\` field's at-rest chip -- same shape as
+       RecordsTable's own \`.crisp-recordstable-status[-dot]\` (already
+       measured against Attio there), but its own classes: that pair is
+       scoped under \`.crisp-recordstable\`'s own recipe root, so reusing the
+       classnames verbatim here would resolve to nothing. */
+    & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
+    & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; }
     & .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; }

package/dist/esm/components/datatable/datatable.js

@@ -218,12 +218,61 @@ const CREATE_REFERENCE_VALUE = "__crisp_create_reference__";
 function dataReferenceOptionLabel(o) {
     return (_jsxs("span", { className: "crisp-datatable-refoption", children: [_jsx(Avatar, { size: "sm", className: "crisp-datatable-refoption-avatar", children: o.avatar ? (_jsx("img", { src: o.avatar, alt: "" })) : (_jsx(CircleUserRound, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })) }), o.label] }));
 }
+/** `Select` owns its own closed-by-default `open` state with no prop or
+ * imperative way to start it open (see select.tsx) -- the only thing that
+ * opens it is a real click on its trigger button. Attio's own picker opens
+ * the instant a `select`/`reference` cell enters edit mode (measured live
+ * against a GRC test company, 2026-09-24), not after a second click on an
+ * already-mounted, still-closed trigger, so drive that click ourselves.
+ * Guarded against firing twice (StrictMode double-invokes effects) --
+ * `Select`'s own trigger toggles, so a second click would close what the
+ * first one opened. */
+function useAutoOpenSelect() {
+    const ref = React.useRef(null);
+    const opened = React.useRef(false);
+    React.useEffect(() => {
+        if (opened.current)
+            return;
+        opened.current = true;
+        ref.current
+            ?.querySelector(".crisp-select-trigger")
+            ?.click();
+    }, []);
+    return ref;
+}
+/** `select`/`reference` open crisp's own `Select`, which closes its own
+ * popover on Escape (see select.tsx's "document-level fallback for Escape")
+ * but has no callback telling the CELL to leave editing mode -- and, same
+ * problem that fallback exists for, DOM focus doesn't reliably end up
+ * inside the newly-opened popover, so a `TableCell`-level `onKeyDown` can't
+ * be trusted to see the key at all (#453). Mirror Select's own fix for
+ * that: a raw `document` listener, not a focus-dependent React one. */
+function useEscapeExitsEditing(onCancel) {
+    React.useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onCancel();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [onCancel]);
+}
+/** `editor: "select"`'s picker, its own component (not inline in the
+ * row-render loop, like `DataReferenceEditor` below) because it needs the
+ * open-on-mount and escape-exits-editing effects above (#453). */
+function DataSelectEditor({ col, value, isPending, onCommit, onCancel, }) {
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
+    return (_jsx("span", { ref: ref, style: { display: "contents" }, children: _jsx(Select, { variant: "ghost", "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: col.options ?? [], onValueChange: onCommit }) }));
+}
 /** `editor: "reference"`'s picker, its own component (not inline in the
  * row-render loop) because it needs its own `useState` for the search query
  * -- one instance per cell, same reasoning `select`/`switch` don't need a
  * component of their own but this does. */
-function DataReferenceEditor({ col, value, isPending, onCommit, }) {
+function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
     const [query, setQuery] = React.useState("");
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
     const options = (col.refOptions ?? []).map((o) => ({
         value: o.value,
         label: dataReferenceOptionLabel(o),
@@ -238,12 +287,12 @@ function DataReferenceEditor({ col, value, isPending, onCommit, }) {
             keywords: query,
         });
     }
-    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
-            if (v === CREATE_REFERENCE_VALUE)
-                col.onCreateReference?.(query);
-            else
-                onCommit(v);
-        } }));
+    return (_jsx("span", { ref: ref, style: { display: "contents" }, children: _jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
+                if (v === CREATE_REFERENCE_VALUE)
+                    col.onCreateReference?.(query);
+                else
+                    onCommit(v);
+            } }) }));
 }
 export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
     ? `${total} ${total === 1 ? "row" : "rows"}`
@@ -466,10 +515,11 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
      *                     throughout, and the browser's own picker already
      *                     carries both a calendar and a time control.
      *   text/entity       a plain text field
-     * `status`, `reference` and `tags` are pickers in RecordsTable, not
-     * double-click editors, so they are not editable here either -- except
-     * `editor: "reference"` (#432), which is a picker for the same reason
-     * `select`/`switch` are: always live, no double-click gate.
+     * `editor: "select"`/`"reference"` open their own picker instead of this
+     * native-input family, but through the SAME double-click gate (#453) --
+     * see the row-render loop's `isEditing` branch for those, this function
+     * only covers the native-input-backed types. `editor: "switch"` is the
+     * one editor with no double-click gate at all (always live).
      */
     function editorFor(col) {
         switch (col.type) {
@@ -523,11 +573,12 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             return;
         }
         else if (e.key === "Enter") {
-            // select/switch columns have no separate editing mode to enter --
-            // they're already their own live widget (#385); Enter there is a
-            // no-op here, same as any other non-editable cell that isn't wired to
-            // onRowClick.
-            if (columns[c]?.editable && !columns[c]?.editor) {
+            // #453: `switch` has no separate editing mode to enter -- it's
+            // already its own live widget (#385); Enter there is a no-op, same
+            // as any other non-editable cell that isn't wired to onRowClick.
+            // `select`/`reference` DO have one now (like every other editor),
+            // so Enter opens them too.
+            if (columns[c]?.editable && columns[c]?.editor !== "switch") {
                 e.preventDefault();
                 openEditing(selCell.id, selCell.key);
             }
@@ -758,14 +809,37 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                             const errorHere = editError?.id === row.id && editError?.key === col.key
                                                 ? editError.message
                                                 : null;
-                                            // A select/switch editable column is ALWAYS its own
-                                            // live widget -- no double-click gate, no separate
-                                            // edit/view mode, the same convention RecordsTable's
-                                            // status/reference pickers already use: choosing a
-                                            // value or flipping a toggle IS the commit gesture
-                                            // (#385).
-                                            if (col.editable && col.editor) {
-                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(Select, { variant: "ghost", "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: col.options ?? [], onValueChange: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "reference" ? (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : (_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            // #453: a `switch` editable column IS always its own
+                                            // live widget -- flipping the toggle IS the commit
+                                            // gesture, there's no meaningfully different "rest"
+                                            // display for a boolean. `select`/`reference` are
+                                            // NOT this: at rest they must show the column's own
+                                            // render/format like every other editable type
+                                            // (#412 empty handling included), and only open on
+                                            // double-click (#411) -- this branch previously
+                                            // rendered them unconditionally, replacing every
+                                            // row's own render with a picker trigger, which is
+                                            // the regression #453 reported (also #432/#449,
+                                            // which never had a "rest" state of their own to get
+                                            // right). See the `isEditing` block below for their
+                                            // actual editor.
+                                            if (col.editable && col.editor === "switch") {
+                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            }
+                                            if (isEditing &&
+                                                (col.editor === "select" || col.editor === "reference")) {
+                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
+                                                    // Same as the plain text editor's own cell:
+                                                    // opening/using the picker must not also fire
+                                                    // the row's onRowClick. Escape is handled by
+                                                    // `DataSelectEditor`/`DataReferenceEditor`
+                                                    // themselves (a document-level listener, not a
+                                                    // `TableCell`-level `onKeyDown`) -- opening the
+                                                    // picker moves DOM focus into a floating,
+                                                    // portaled popover, so a handler here can't
+                                                    // rely on the key event ever bubbling through
+                                                    // this element (#453).
+                                                    onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                             }
                                             if (isEditing) {
                                                 return (_jsxs(TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 

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

@@ -88,6 +88,53 @@ export const recordPageLabels = {
     recordCreated: (name) => (_jsxs(_Fragment, { children: [_jsx("b", { children: name }), " record was created"] })),
     noEmailsWith: (name) => _jsxs(_Fragment, { children: ["No emails logged with ", name, " yet."] }),
 };
+/** `Select` owns its own closed-by-default `open` state with no prop or
+ * imperative way to start it open -- the only thing that opens it is a real
+ * click on its trigger button. Mounting one on click (rather than rendering
+ * it already open) leaves the reader with a second click to make before
+ * they can pick anything, so drive that click ourselves the moment it
+ * mounts. Mirrors `DataTable`'s own `useAutoOpenSelect` (#453) -- kept as
+ * its own copy here rather than a shared import, the same "duplicated per
+ * product surface" choice already made for `EditableOption`/
+ * `editableInputType` above. Guarded against firing twice (StrictMode
+ * double-invokes effects): `Select`'s own trigger toggles, so a second
+ * click would close what the first one opened. */
+function useAutoOpenSelect() {
+    const ref = React.useRef(null);
+    const opened = React.useRef(false);
+    React.useEffect(() => {
+        if (opened.current)
+            return;
+        opened.current = true;
+        ref.current
+            ?.querySelector(".crisp-select-trigger")
+            ?.click();
+    }, []);
+    return ref;
+}
+/** `Select` closes its own popover on Escape but has no callback telling
+ * the FIELD to leave editing mode -- and DOM focus doesn't reliably end up
+ * inside the newly-opened popover either, so a focus-dependent React
+ * `onKeyDown` can't be trusted to see the key at all. Mirrors `Select`'s
+ * own "document-level fallback for Escape" (see select.tsx) and
+ * `DataTable`'s identical fix for the same problem (#453). */
+function useEscapeExitsEditing(onCancel) {
+    React.useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onCancel();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [onCancel]);
+}
+/** `editor: "select"`'s picker, its own component (not inline in the field
+ * loop) because it needs the two hooks above (#457). */
+function RecordPageSelectEditor({ col, value, isPending, onCommit, onCancel, }) {
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
+    return (_jsxs("span", { ref: ref, className: "crisp-recordpage-edit-picker", children: [_jsx(Select, { variant: "ghost", "aria-label": `Edit ${col.label}`, value: value != null ? String(value) : undefined, disabled: isPending, options: col.editOptions ?? [], onValueChange: onCommit }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-recordpage-edit-pending" }))] }));
+}
 function TagsValue({ values }) {
     const [expanded, setExpanded] = React.useState(false);
     const overflow = values.length - 1;
@@ -98,6 +145,21 @@ function FieldValue({ col, row, labels, }) {
     const v = row[col.key];
     if (valueEmpty(v))
         return _jsx("span", { className: "crisp-recordpage-empty", children: labels.setAValue });
+    // `editor: "select"` at rest (#457) -- checked ahead of `col.type` since
+    // the editor is orthogonal to it. Same dot+label shape as RecordsTable's
+    // own measured status chip, but this component's own classes
+    // (`crisp-recordpage-status[-dot]`): RecordsTable's own pair is scoped
+    // under `.crisp-recordstable`'s recipe root, so reusing its classnames
+    // verbatim here would resolve to nothing. Shown when the matched option
+    // carries a `color`, same as every other status-shaped value in this
+    // codebase; a colourless option (or no match) falls back to plain text.
+    if (col.editor === "select") {
+        const opt = col.editOptions?.find((o) => o.value === v);
+        const text = opt?.label ?? String(v);
+        if (!opt?.color)
+            return _jsx(_Fragment, { children: text });
+        return (_jsxs("span", { className: "crisp-recordpage-status", children: [_jsx("span", { className: "crisp-recordpage-status-dot", style: { background: opt.color } }), text] }));
+    }
     switch (col.type) {
         case "tags":
             return _jsx(TagsValue, { values: v });
@@ -418,14 +480,31 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                                                     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) {
+                                                    // `switch` is always its own live widget -- no
+                                                    // click-to-open, no separate edit/view mode: flipping the
+                                                    // toggle IS the commit gesture, and there's no
+                                                    // meaningfully different "rest" display for a boolean
+                                                    // (same exception `DataTable`'s own `editor` makes, #453).
+                                                    if (canEdit && col.editor === "switch") {
+                                                        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: [_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));
+                                                    }
+                                                    // `select` opens crisp's own `Select` on a SINGLE click
+                                                    // (#457, corrects #431/#385's original always-live
+                                                    // copy of the same regression #453 fixed on `DataTable`)
+                                                    // -- like every other editable type here, at rest it
+                                                    // shows its value (see `FieldValue`'s own `col.editor
+                                                    // === "select"` case) via the generic click-to-open
+                                                    // branch below, and only mounts `Select` once
+                                                    // `editingKey` matches. `DataTable`'s own double-click
+                                                    // gate doesn't apply: `RecordPage`'s plain text/date
+                                                    // fields already open on a single click (measured live
+                                                    // for #431), so `select` matches that, not `DataTable`.
+                                                    if (canEdit &&
+                                                        editingKey === col.key &&
+                                                        col.editor === "select") {
                                                         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));
+                                                        return (_jsxs("div", { className: "crisp-recordpage-field", children: [label, _jsxs("span", { className: "crisp-recordpage-field-value", children: [_jsx(RecordPageSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commit(record.id, col.key, v), onCancel: closeEditing }), fieldError && (_jsx("span", { className: "crisp-recordpage-edit-error", children: fieldError }))] })] }, col.key));
                                                     }
                                                     if (canEdit && editingKey === col.key) {
                                                         const value = record[col.key];

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

@@ -105,6 +105,13 @@ const config = defineRecipe({
     & .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}; }
+    /* #457: an \`editor: "select"\` field's at-rest chip -- same shape as
+       RecordsTable's own \`.crisp-recordstable-status[-dot]\` (already
+       measured against Attio there), but its own classes: that pair is
+       scoped under \`.crisp-recordstable\`'s own recipe root, so reusing the
+       classnames verbatim here would resolve to nothing. */
+    & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
+    & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${c.radius.full}; }
     & .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; }

package/dist/recordpage.css

@@ -83,23 +83,33 @@
     & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-recordpage-edit-pending { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
+    /* #457: an `editor: "select"` field's at-rest chip -- same shape as
+       RecordsTable's own `.crisp-recordstable-status[-dot]` (already measured against Attio there), but its own classes: that pair is scoped under `.crisp-recordstable`'s own recipe root, so reusing the
+       classnames verbatim here would resolve to nothing. */
+    & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
+    & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); }
     & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; }
     & .crisp-recordpage-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
     & .crisp-recordpage-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-link:hover { text-decoration: underline; }
     & .crisp-recordpage-emptystate { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--crisp-space-3) var(--crisp-space-5); }
+
     & .crisp-recordpage-panel { padding-top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
     & .crisp-recordpage-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.14px; color: var(--crisp-fg-primary); padding: var(--crisp-space-3) var(--crisp-space-3) var(--crisp-space-2); }
     & .crisp-recordpage-hl-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); overflow: hidden; }
-    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any column count, so the grid stays responsive (auto-fit) without per-cell nth-child border hacks that break when the column count changes. */
+    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
+       column count, so the grid stays responsive (auto-fit) without per-cell
+       nth-child border hacks that break when the column count changes. */
     & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--crisp-border-subtle); }
     & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--crisp-space-2-5) var(--crisp-space-3); background: var(--crisp-bg-surface); }
     & .crisp-recordpage-hl-icon { position: absolute; top: var(--crisp-space-2-5); inset-inline-end: var(--crisp-space-3); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
     & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
+
     & .crisp-recordpage-feed { display: flex; flex-direction: column; }
     & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
     & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
@@ -108,6 +118,7 @@
     & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
     & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
+
     & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
     & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
     & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -115,6 +126,7 @@
     & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
+
     & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
     & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
@@ -124,18 +136,23 @@
     & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
     & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
     & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
     & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
+
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
+
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
+
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
+
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }

package/dist/recordpage.layered.css

@@ -84,23 +84,33 @@
     & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-recordpage-edit-pending { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
+    /* #457: an `editor: "select"` field's at-rest chip -- same shape as
+       RecordsTable's own `.crisp-recordstable-status[-dot]` (already measured against Attio there), but its own classes: that pair is scoped under `.crisp-recordstable`'s own recipe root, so reusing the
+       classnames verbatim here would resolve to nothing. */
+    & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
+    & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); }
     & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; }
     & .crisp-recordpage-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
     & .crisp-recordpage-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-link:hover { text-decoration: underline; }
     & .crisp-recordpage-emptystate { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--crisp-space-3) var(--crisp-space-5); }
+
     & .crisp-recordpage-panel { padding-top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
     & .crisp-recordpage-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.14px; color: var(--crisp-fg-primary); padding: var(--crisp-space-3) var(--crisp-space-3) var(--crisp-space-2); }
     & .crisp-recordpage-hl-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); overflow: hidden; }
-    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any column count, so the grid stays responsive (auto-fit) without per-cell nth-child border hacks that break when the column count changes. */
+    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
+       column count, so the grid stays responsive (auto-fit) without per-cell
+       nth-child border hacks that break when the column count changes. */
     & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--crisp-border-subtle); }
     & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--crisp-space-2-5) var(--crisp-space-3); background: var(--crisp-bg-surface); }
     & .crisp-recordpage-hl-icon { position: absolute; top: var(--crisp-space-2-5); inset-inline-end: var(--crisp-space-3); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
     & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
+
     & .crisp-recordpage-feed { display: flex; flex-direction: column; }
     & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
     & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
@@ -109,6 +119,7 @@
     & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
     & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
+
     & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
     & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
     & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -116,6 +127,7 @@
     & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
+
     & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
     & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
@@ -125,18 +137,23 @@
     & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
     & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
     & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
     & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
+
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
+
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
+
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
+
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }

package/dist/styles.css

@@ -2163,23 +2163,33 @@
     & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-recordpage-edit-pending { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
+    /* #457: an `editor: "select"` field's at-rest chip -- same shape as
+       RecordsTable's own `.crisp-recordstable-status[-dot]` (already measured against Attio there), but its own classes: that pair is scoped under `.crisp-recordstable`'s own recipe root, so reusing the
+       classnames verbatim here would resolve to nothing. */
+    & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
+    & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); }
     & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; }
     & .crisp-recordpage-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
     & .crisp-recordpage-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-link:hover { text-decoration: underline; }
     & .crisp-recordpage-emptystate { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--crisp-space-3) var(--crisp-space-5); }
+
     & .crisp-recordpage-panel { padding-top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
     & .crisp-recordpage-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.14px; color: var(--crisp-fg-primary); padding: var(--crisp-space-3) var(--crisp-space-3) var(--crisp-space-2); }
     & .crisp-recordpage-hl-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); overflow: hidden; }
-    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any column count, so the grid stays responsive (auto-fit) without per-cell nth-child border hacks that break when the column count changes. */
+    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
+       column count, so the grid stays responsive (auto-fit) without per-cell
+       nth-child border hacks that break when the column count changes. */
     & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--crisp-border-subtle); }
     & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--crisp-space-2-5) var(--crisp-space-3); background: var(--crisp-bg-surface); }
     & .crisp-recordpage-hl-icon { position: absolute; top: var(--crisp-space-2-5); inset-inline-end: var(--crisp-space-3); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
     & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
+
     & .crisp-recordpage-feed { display: flex; flex-direction: column; }
     & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
     & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
@@ -2188,6 +2198,7 @@
     & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
     & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
+
     & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
     & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
     & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -2195,6 +2206,7 @@
     & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
+
     & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
     & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
@@ -2204,18 +2216,23 @@
     & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
     & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
     & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
     & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
+
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
+
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
+
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
+
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }

package/dist/styles.layered.css

@@ -2164,23 +2164,33 @@
     & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-recordpage-edit-pending { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
+    /* #457: an `editor: "select"` field's at-rest chip -- same shape as
+       RecordsTable's own `.crisp-recordstable-status[-dot]` (already measured against Attio there), but its own classes: that pair is scoped under `.crisp-recordstable`'s own recipe root, so reusing the
+       classnames verbatim here would resolve to nothing. */
+    & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
+    & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); }
     & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; }
     & .crisp-recordpage-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
     & .crisp-recordpage-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-link:hover { text-decoration: underline; }
     & .crisp-recordpage-emptystate { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--crisp-space-3) var(--crisp-space-5); }
+
     & .crisp-recordpage-panel { padding-top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
     & .crisp-recordpage-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.14px; color: var(--crisp-fg-primary); padding: var(--crisp-space-3) var(--crisp-space-3) var(--crisp-space-2); }
     & .crisp-recordpage-hl-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); overflow: hidden; }
-    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any column count, so the grid stays responsive (auto-fit) without per-cell nth-child border hacks that break when the column count changes. */
+    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
+       column count, so the grid stays responsive (auto-fit) without per-cell
+       nth-child border hacks that break when the column count changes. */
     & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--crisp-border-subtle); }
     & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--crisp-space-2-5) var(--crisp-space-3); background: var(--crisp-bg-surface); }
     & .crisp-recordpage-hl-icon { position: absolute; top: var(--crisp-space-2-5); inset-inline-end: var(--crisp-space-3); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
     & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
+
     & .crisp-recordpage-feed { display: flex; flex-direction: column; }
     & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
     & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
@@ -2189,6 +2199,7 @@
     & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
     & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
+
     & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
     & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
     & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -2196,6 +2207,7 @@
     & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
+
     & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
     & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
@@ -2205,18 +2217,23 @@
     & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
     & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
     & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
     & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
+
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
+
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
+
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
+
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }

package/dist/types/components/datatable/datatable.d.ts

@@ -45,16 +45,17 @@ export type DataTableColumn<T> = {
      * commits) — see `editor` for `select`/`switch`/`reference`. */
     editable?: boolean;
     /** The inline editor an `editable` column opens. Omitted: a plain field
-     * inferred from `type` (number/date/datetime/text), gated behind the
-     * double-click `editable` opens today. `"select"`/`"switch"`/`"reference"`
-     * instead render crisp's own `Select`/`Switch` as the cell's live content,
-     * ALWAYS interactive — no double-click gate, no separate edit/view mode —
-     * the same convention RecordsTable's `status`/`reference` pickers already
-     * use, since choosing an option or flipping a toggle IS the commit
-     * gesture; there is nothing for a second click to open. `select` reads
-     * `options`; `reference` reads `refOptions` and is search-enabled, the
-     * same searchable-`Select` shape as `RecordsTable`'s own
-     * `ReferenceCell`. */
+     * inferred from `type` (number/date/datetime/text). `"select"`/
+     * `"reference"` render crisp's own `Select` the same way — at rest the
+     * cell shows the column's `render`/formatted value like every other
+     * editable type (#453), and double-click (or Enter on the selected
+     * cell) opens the picker; choosing a value commits and closes it,
+     * Escape cancels. `select` reads `options`; `reference` reads
+     * `refOptions` and is search-enabled, the same searchable-`Select`
+     * shape as `RecordsTable`'s own `ReferenceCell`. `"switch"` is the one
+     * exception — ALWAYS its own live widget, no double-click gate, since
+     * flipping the toggle IS the commit gesture and there's no meaningfully
+     * different "rest" display for a boolean. */
     editor?: "select" | "switch" | "reference";
     /** Options for `editor: "select"` (value/label, an optional `color` a
      * caller's own `render` can read) — same shape as RecordsTable's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.52.0",
+  "version": "0.52.2",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",