@crisp-ui-kit/crisp 0.51.0 → 0.52.1

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/core/caret-rect.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.caretRectInField = caretRectInField;
+/**
+ * The pixel position of a caret index inside a `<textarea>`/`<input>`, in
+ * viewport coordinates — where a mention picker anchors.
+ *
+ * Neither element exposes caret geometry directly, so this uses the standard
+ * mirror-div technique: an off-screen div replicating every computed style
+ * that affects text layout (font, padding, border, wrapping), holding the
+ * same text up to the caret plus a marker span. The marker's own
+ * `getBoundingClientRect()`, translated back onto the real field's box, is
+ * the caret's actual rendered position — nothing here guesses at line
+ * height or character width itself.
+ */
+function caretRectInField(field, index) {
+    const div = document.createElement("div");
+    const style = window.getComputedStyle(field);
+    const mirrored = [
+        "boxSizing",
+        "width",
+        "paddingTop",
+        "paddingRight",
+        "paddingBottom",
+        "paddingLeft",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth",
+        "fontFamily",
+        "fontSize",
+        "fontWeight",
+        "fontStyle",
+        "letterSpacing",
+        "lineHeight",
+        "textTransform",
+        "textIndent",
+        "textAlign",
+        "wordSpacing",
+        "tabSize",
+    ];
+    for (const prop of mirrored)
+        div.style.setProperty(prop, style[prop]);
+    div.style.position = "absolute";
+    div.style.visibility = "hidden";
+    div.style.top = "0";
+    div.style.left = "-9999px";
+    div.style.whiteSpace =
+        field instanceof HTMLTextAreaElement ? "pre-wrap" : "pre";
+    div.style.wordWrap = "break-word";
+    div.style.overflow = "hidden";
+    div.style.height = "auto";
+    const value = field.value;
+    div.textContent = value.slice(0, index);
+    const marker = document.createElement("span");
+    // a trailing empty span collapses to zero width and reports the wrong x —
+    // give it a hair of content so its box sits exactly at the caret
+    marker.textContent = value.slice(index, index + 1) || ".";
+    div.appendChild(marker);
+    document.body.appendChild(div);
+    div.scrollTop = field.scrollTop;
+    div.scrollLeft = field.scrollLeft;
+    const fieldRect = field.getBoundingClientRect();
+    const divRect = div.getBoundingClientRect();
+    const markerRect = marker.getBoundingClientRect();
+    const x = fieldRect.left + (markerRect.left - divRect.left) - div.scrollLeft;
+    const y = fieldRect.top +
+        (markerRect.top - divRect.top) -
+        div.scrollTop +
+        markerRect.height;
+    document.body.removeChild(div);
+    return { x, y };
+}

package/dist/cjs/core/index.js

@@ -14,7 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = void 0;
+exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
+var caret_rect_1 = require("./caret-rect");
+Object.defineProperty(exports, "caretRectInField", { enumerable: true, get: function () { return caret_rect_1.caretRectInField; } });
 var cell_date_1 = require("./cell-date");
 Object.defineProperty(exports, "cellDatePrecision", { enumerable: true, get: function () { return cell_date_1.cellDatePrecision; } });
 Object.defineProperty(exports, "formatCellDate", { enumerable: true, get: function () { return cell_date_1.formatCellDate; } });
@@ -35,6 +37,8 @@ Object.defineProperty(exports, "isInsideLaterFloatingLayer", { enumerable: true,
 Object.defineProperty(exports, "registerFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.registerFloatingLayer; } });
 var form_value_1 = require("./form-value");
 Object.defineProperty(exports, "formValueStyle", { enumerable: true, get: function () { return form_value_1.formValueStyle; } });
+var mention_1 = require("./mention");
+Object.defineProperty(exports, "matchMentionTrigger", { enumerable: true, get: function () { return mention_1.matchMentionTrigger; } });
 var place_floating_1 = require("./place-floating");
 Object.defineProperty(exports, "placeFloating", { enumerable: true, get: function () { return place_floating_1.placeFloating; } });
 var primitive_1 = require("./primitive");
@@ -51,5 +55,7 @@ var use_form_reset_1 = require("./use-form-reset");
 Object.defineProperty(exports, "useFormReset", { enumerable: true, get: function () { return use_form_reset_1.useFormReset; } });
 var use_label_association_1 = require("./use-label-association");
 Object.defineProperty(exports, "useLabelAssociation", { enumerable: true, get: function () { return use_label_association_1.useLabelAssociation; } });
+var use_mention_trigger_1 = require("./use-mention-trigger");
+Object.defineProperty(exports, "useMentionTrigger", { enumerable: true, get: function () { return use_mention_trigger_1.useMentionTrigger; } });
 var use_prefers_reduced_motion_1 = require("./use-prefers-reduced-motion");
 Object.defineProperty(exports, "usePrefersReducedMotion", { enumerable: true, get: function () { return use_prefers_reduced_motion_1.usePrefersReducedMotion; } });

package/dist/cjs/core/mention.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchMentionTrigger = matchMentionTrigger;
+/**
+ * Is there an active "@query" mention trigger ending at the caret?
+ *
+ * Matches the rule every "@mention" implementation (GitHub, Slack, Linear)
+ * actually uses: the trigger character must start a word — the very first
+ * character, or preceded by whitespace — and nothing between it and the
+ * caret may contain whitespace. `foo@bar` is an email/handle stuck to a word,
+ * not a trigger; `@jo next` has already moved past the mention it typed.
+ *
+ * Takes plain text rather than a live DOM node so it is one pure function
+ * usable against a `<textarea>`'s `value` and a `contentEditable` text
+ * node's content alike, and is the one thing here worth unit-testing on its
+ * own — everything downstream of it (caret geometry, DOM insertion) needs a
+ * real browser to verify.
+ */
+function matchMentionTrigger(textBeforeCaret, trigger = "@") {
+    if (!trigger)
+        return null;
+    const start = textBeforeCaret.lastIndexOf(trigger);
+    if (start === -1)
+        return null;
+    const before = start > 0 ? textBeforeCaret[start - 1] : undefined;
+    if (before !== undefined && !/\s/.test(before))
+        return null;
+    const query = textBeforeCaret.slice(start + trigger.length);
+    if (/\s/.test(query))
+        return null;
+    return { query, start };
+}

package/dist/cjs/core/use-mention-trigger.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMentionTrigger = useMentionTrigger;
+const React = __importStar(require("react"));
+const caret_rect_1 = require("./caret-rect");
+const mention_1 = require("./mention");
+/**
+ * Watches a `<textarea>`/`<input>` for an "@query" mention trigger and
+ * reports where to anchor a consumer-supplied picker (#372).
+ *
+ * crisp draws no picker of its own here — GitHub/Slack/Linear-style @mention
+ * UI varies too much by app (avatars, groups, recent-first ordering, a
+ * "create new person" row) to have one measured shape, and this repo's rule
+ * is measure-first, never invented polish. What is shared and worth owning
+ * centrally is the fiddly, easy-to-get-wrong part: deciding when "@" is
+ * actually a trigger rather than part of a word or an email address (see
+ * `matchMentionTrigger`), and where its picker anchors on screen (see
+ * `caretRectInField`, since neither element exposes caret geometry itself).
+ *
+ * Does not close on blur: a picker built from this needs to survive the
+ * field losing focus to a `mousedown` on one of its own rows, the same
+ * problem every floating surface in this repo solves for itself (see
+ * `RichTextEditor`'s toolbar `keepSel`, or `Popover`'s own outside-pointer-
+ * down listener) — so closing on outside interaction is left to the
+ * consumer's picker, which already knows what counts as "outside" for its
+ * own markup.
+ */
+function useMentionTrigger(ref, { trigger = "@" } = {}) {
+    const [state, setState] = React.useState({
+        open: false,
+        query: "",
+        anchor: null,
+    });
+    const matchRef = React.useRef(null);
+    const recompute = React.useCallback(() => {
+        const el = ref.current;
+        if (!el || el.selectionStart == null) {
+            matchRef.current = null;
+            setState({ open: false, query: "", anchor: null });
+            return;
+        }
+        const caret = el.selectionStart;
+        const match = (0, mention_1.matchMentionTrigger)(el.value.slice(0, caret), trigger);
+        matchRef.current = match;
+        if (!match) {
+            setState({ open: false, query: "", anchor: null });
+            return;
+        }
+        setState({
+            open: true,
+            query: match.query,
+            anchor: (0, caret_rect_1.caretRectInField)(el, caret),
+        });
+    }, [ref, trigger]);
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        // "input" covers typing; "click"/"keyup" cover the caret moving without
+        // the text changing (arrow keys, clicking elsewhere on the same line).
+        el.addEventListener("input", recompute);
+        el.addEventListener("click", recompute);
+        el.addEventListener("keyup", recompute);
+        return () => {
+            el.removeEventListener("input", recompute);
+            el.removeEventListener("click", recompute);
+            el.removeEventListener("keyup", recompute);
+        };
+    }, [ref, recompute]);
+    const close = React.useCallback(() => {
+        matchRef.current = null;
+        setState({ open: false, query: "", anchor: null });
+    }, []);
+    const insert = React.useCallback((text) => {
+        const el = ref.current;
+        const match = matchRef.current;
+        if (!el || !match)
+            return;
+        const caret = el.selectionStart ?? el.value.length;
+        const before = el.value.slice(0, match.start);
+        const after = el.value.slice(caret);
+        el.value = before + text + after;
+        const cursor = before.length + text.length;
+        el.focus();
+        el.setSelectionRange(cursor, cursor);
+        // a controlled consumer listens on "input", the same event typing fires
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        close();
+    }, [ref, close]);
+    return { ...state, close, insert };
+}

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

@@ -38,37 +38,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
-const select_1 = require("../../components/select");
-const spinner_1 = require("../../components/spinner");
-const switch_1 = require("../../components/switch");
 const core_1 = require("../../core");
-const recordstable_1 = require("../recordstable");
 const recordpanel_recipe_1 = require("./recordpanel.recipe");
-function FieldValue({ col, row, emptyLabel, }) {
-    const v = row[col.key];
-    if (v == null || v === "" || (Array.isArray(v) && !v.length)) {
-        return (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-empty", children: emptyLabel });
-    }
-    switch (col.type) {
-        case "tags":
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: v.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-tag", "data-tone": (0, recordstable_1.tagTone)(t), children: t }, t))) }));
-        case "number":
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof v === "number" ? v.toLocaleString() : v });
-        case "url":
-            return ((0, jsx_runtime_1.jsx)("a", { className: "crisp-recordpanel-link", href: `https://${v}`, target: "_blank", rel: "noreferrer", children: v }));
-        default:
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: String(v) });
-    }
-}
 /**
- * Right-side record peek panel — shows one record's fields, opened from a
- * RecordsTable row (via `onOpenRecord`). Render it inside a `position:
- * relative` container (e.g. the app main area); it slides in from the right and
- * overlays the content.
+ * Right-side record peek panel — Attio's own peek shows a Highlights card
+ * area and an Activity feed (measured live: hover a Companies row, click its
+ * "Open preview" trigger), never an editable field list (#448 — a "Details"
+ * list was this component's own invention before, and #431's editable API
+ * had nothing real in this panel to attach to; that API stays on
+ * `RecordPage`'s own Details column, where Attio does let you edit in
+ * place). Render it inside a `position: relative` container (e.g. the app
+ * main area); it slides in from the right and overlays the content.
  */
-function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, onEdit, ...rest }) {
+function RecordPanel({ record, onClose, className, closeLabel = "Close panel", onOpenRecord, openRecordLabel = "Open record", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", title, avatar, avatarTone = "brand", highlightsLabel = "Highlights", highlights, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, footer, ...rest }) {
     const titleId = React.useId();
-    const { editingKey, pendingKey, error, openEditing, closeEditing, commit } = (0, recordstable_1.useEditableField)(onEdit);
     // close on Escape while open -- but not when a Menu/Select/Popover/
     // ContextMenu opened from inside the panel (e.g. a footer "More actions"
     // menu) is itself open (#361): that Escape belongs to the nested layer,
@@ -93,67 +76,16 @@ function RecordPanel({ record, columns, onClose, className, closeLabel = "Close
         if (!record)
             return;
         const onKey = (e) => {
-            if (e.key !== "Escape")
-                return;
-            // #431: Escape while a field is open cancels JUST that field, the
-            // same way DataTable's own editable cells treat it -- not the whole
-            // panel. Checked ahead of `hasOpenFloatingLayer()` (capture phase, so
-            // this runs before the field's own bubble-phase onKeyDown would ever
-            // get a chance to stopPropagation -- same reasoning as the
-            // floating-layer check below).
-            if (editingKey) {
-                closeEditing();
-                return;
-            }
-            if ((0, core_1.hasOpenFloatingLayer)())
+            if (e.key !== "Escape" || (0, core_1.hasOpenFloatingLayer)())
                 return;
             onClose();
         };
         document.addEventListener("keydown", onKey, true);
         return () => document.removeEventListener("keydown", onKey, true);
-    }, [record, onClose, editingKey, closeEditing]);
+    }, [record, onClose]);
     if (!record)
         return null;
-    const entityCol = columns.find((c) => c.type === "entity");
-    const entity = entityCol
-        ? record[entityCol.key]
-        : undefined;
-    const fields = columns.filter((c) => c.type !== "entity");
-    const heading = title ?? entity?.name ?? "Record";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpanel_recipe_1.recordpanelRecipe)({ className }), ...rest, role: "dialog", "aria-labelledby": titleId, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-header", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, (0, jsx_runtime_1.jsx)("span", { id: titleId, className: "crisp-recordpanel-title", children: heading }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-sectionlabel", children: detailsLabel }), fields.map((col) => {
-                        // #431: a field only actually opens when there's an `onEdit` to
-                        // commit through -- `editable` with nothing to call would be a
-                        // dead click.
-                        const canEdit = Boolean(col.editable && onEdit);
-                        const isPending = pendingKey === col.key;
-                        const fieldError = error?.key === col.key ? error.message : null;
-                        // select/switch are always their own live widget -- no click-to-
-                        // open, no separate edit/view mode, the same convention
-                        // DataTable's identical `editor` columns use (#385): choosing a
-                        // value or flipping a toggle IS the commit gesture.
-                        if (canEdit && col.editor) {
-                            const value = record[col.key];
-                            return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-value", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": `Edit ${col.label}`, value: value != null ? String(value) : undefined, disabled: isPending, options: col.editOptions ?? [], onValueChange: (v) => commit(record.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-recordpanel-edit-pending" }))] }), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
-                        }
-                        if (canEdit && editingKey === col.key) {
-                            const value = record[col.key];
-                            const editor = (0, recordstable_1.editableInputType)(col.type);
-                            return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-value", children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-recordpanel-edit", 
-                                                // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
-                                                autoFocus: true, ...editor, disabled: isPending, defaultValue: value == null ? "" : String(value), "aria-label": `Edit ${col.label}`, onKeyDown: (e) => {
-                                                    if (isPending)
-                                                        return;
-                                                    if (e.key === "Enter")
-                                                        commit(record.id, col.key, e.currentTarget.value);
-                                                    else if (e.key === "Escape")
-                                                        closeEditing();
-                                                }, onBlur: (e) => {
-                                                    if (isPending)
-                                                        return;
-                                                    commit(record.id, col.key, e.currentTarget.value);
-                                                } }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-recordpanel-edit-pending" })), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
-                        }
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-edit-trigger", onClick: () => openEditing(col.key), children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })) : ((0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, emptyLabel: emptyLabel })), fieldError && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
-                    })] }), footer != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
+    const heading = title ?? record.name ?? "Record";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpanel_recipe_1.recordpanelRecipe)({ className }), ...rest, role: "dialog", "aria-labelledby": titleId, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-toolbar", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-pager", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-toolbar-spacer" }), onOpenRecord && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-navbtn", "aria-label": openRecordLabel, onClick: onOpenRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75 }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-header", children: [avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpanel-fav", src: avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", shape: "rounded", tone: avatarTone, children: (record.name ?? "?").charAt(0) })), (0, jsx_runtime_1.jsx)("span", { id: titleId, className: "crisp-recordpanel-title", children: heading })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-body", children: [highlights && highlights.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-section-head", children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-section-label", children: highlightsLabel }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-highlights", children: highlights.map((h) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-highlight", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpanel-highlight-label", children: [(0, jsx_runtime_1.jsx)("span", { children: h.label }), h.icon ? (0, jsx_runtime_1.jsx)(h.icon, { size: 16, strokeWidth: 1.75 }) : null] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-highlight-value", children: h.value })] }, h.key))) })] })), activity != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-section-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-section-label", children: activityLabel }), onViewAllActivity && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpanel-section-action", onClick: onViewAllActivity, children: viewAllActivityLabel }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-activity", children: activity })] }))] }), footer != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
 }
 RecordPanel.displayName = "RecordPanel";