@crisp-ui-kit/crisp 0.51.0 → 0.52.0

package/dist/esm/core/caret-rect.js

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+export 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/esm/core/index.js

@@ -1,3 +1,4 @@
+export { caretRectInField } from "./caret-rect.js";
 export { cellDatePrecision, formatCellDate, parseCellDate, } from "./cell-date.js";
 export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
@@ -6,6 +7,7 @@ export { isRtlElement } from "./direction.js";
 export { FloatingPortal } from "./floating-portal.js";
 export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
+export { matchMentionTrigger, } from "./mention.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
@@ -14,4 +16,5 @@ export { defineSpec, specToRecipe } from "./spec.js";
 export { useFocusAfterRemoval } from "./use-focus-after-removal.js";
 export { useFormReset } from "./use-form-reset.js";
 export { useLabelAssociation } from "./use-label-association.js";
+export { useMentionTrigger, } from "./use-mention-trigger.js";
 export { usePrefersReducedMotion } from "./use-prefers-reduced-motion.js";

package/dist/esm/core/mention.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+export 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/esm/core/use-mention-trigger.js

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { caretRectInField } from "./caret-rect.js";
+import { matchMentionTrigger, } from "./mention.js";
+/**
+ * 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.
+ */
+export 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 = 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: 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/esm/product/recordpanel/index.js

@@ -1,2 +1,2 @@
-export { RecordPanel } from "./recordpanel.js";
+export { RecordPanel, } from "./recordpanel.js";
 export { recordpanelRecipe } from "./recordpanel.recipe.js";

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

@@ -1,38 +1,21 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRight, ChevronDown, ChevronUp, X } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
-import { Select } from "../../components/select/index.js";
-import { Spinner } from "../../components/spinner/index.js";
-import { Switch } from "../../components/switch/index.js";
 import { hasOpenFloatingLayer } from "../../core/index.js";
-import { editableInputType, tagTone, useEditableField, } from "../recordstable/index.js";
 import { recordpanelRecipe } from "./recordpanel.recipe.js";
-function FieldValue({ col, row, emptyLabel, }) {
-    const v = row[col.key];
-    if (v == null || v === "" || (Array.isArray(v) && !v.length)) {
-        return _jsx("span", { className: "crisp-recordpanel-empty", children: emptyLabel });
-    }
-    switch (col.type) {
-        case "tags":
-            return (_jsx(_Fragment, { children: v.map((t) => (_jsx("span", { className: "crisp-recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
-        case "number":
-            return _jsx(_Fragment, { children: typeof v === "number" ? v.toLocaleString() : v });
-        case "url":
-            return (_jsx("a", { className: "crisp-recordpanel-link", href: `https://${v}`, target: "_blank", rel: "noreferrer", children: v }));
-        default:
-            return _jsx(_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.
  */
-export function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, onEdit, ...rest }) {
+export 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 } = 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,
@@ -57,67 +40,16 @@ export function RecordPanel({ record, columns, onClose, className, closeLabel =
         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 (hasOpenFloatingLayer())
+            if (e.key !== "Escape" || 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 (_jsxs("div", { className: recordpanelRecipe({ className }), ...rest, role: "dialog", "aria-labelledby": titleId, children: [_jsxs("div", { className: "crisp-recordpanel-header", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? (_jsx(Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, _jsx("span", { id: titleId, className: "crisp-recordpanel-title", children: heading }), _jsx("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 18, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpanel-body", children: [_jsx("div", { className: "crisp-recordpanel-sectionlabel", children: detailsLabel }), fields.map((col) => {
-                        // #431: a field only actually opens when there's an `onEdit` to
-                        // commit through -- `editable` with nothing to call would be a
-                        // dead click.
-                        const canEdit = Boolean(col.editable && onEdit);
-                        const isPending = pendingKey === col.key;
-                        const fieldError = error?.key === col.key ? error.message : null;
-                        // select/switch are always their own live widget -- no click-to-
-                        // open, no separate edit/view mode, the same convention
-                        // DataTable's identical `editor` columns use (#385): choosing a
-                        // value or flipping a toggle IS the commit gesture.
-                        if (canEdit && col.editor) {
-                            const value = record[col.key];
-                            return (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsxs("span", { className: "crisp-recordpanel-field-value", children: [_jsxs("span", { className: "crisp-recordpanel-edit-picker", children: [col.editor === "select" ? (_jsx(Select, { variant: "ghost", "aria-label": `Edit ${col.label}`, value: value != null ? String(value) : undefined, disabled: isPending, options: col.editOptions ?? [], onValueChange: (v) => commit(record.id, col.key, v) })) : (_jsx(Switch, { "aria-label": `Edit ${col.label}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commit(record.id, col.key, String(checked)) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-recordpanel-edit-pending" }))] }), fieldError && (_jsx("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
-                        }
-                        if (canEdit && editingKey === col.key) {
-                            const value = record[col.key];
-                            const editor = editableInputType(col.type);
-                            return (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsxs("span", { className: "crisp-recordpanel-field-value", children: [_jsx("input", { className: "crisp-recordpanel-edit", 
-                                                // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
-                                                autoFocus: true, ...editor, disabled: isPending, defaultValue: value == null ? "" : String(value), "aria-label": `Edit ${col.label}`, onKeyDown: (e) => {
-                                                    if (isPending)
-                                                        return;
-                                                    if (e.key === "Enter")
-                                                        commit(record.id, col.key, e.currentTarget.value);
-                                                    else if (e.key === "Escape")
-                                                        closeEditing();
-                                                }, onBlur: (e) => {
-                                                    if (isPending)
-                                                        return;
-                                                    commit(record.id, col.key, e.currentTarget.value);
-                                                } }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-recordpanel-edit-pending" })), fieldError && (_jsx("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
-                        }
-                        return (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsxs("span", { className: "crisp-recordpanel-field-value", "data-editable": canEdit ? "" : undefined, children: [canEdit ? (_jsx("button", { type: "button", className: "crisp-recordpanel-edit-trigger", onClick: () => openEditing(col.key), children: _jsx(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })) : (_jsx(FieldValue, { col: col, row: record, emptyLabel: emptyLabel })), fieldError && (_jsx("span", { className: "crisp-recordpanel-edit-error", children: fieldError }))] })] }, col.key));
-                    })] }), footer != null && (_jsx("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
+    const heading = title ?? record.name ?? "Record";
+    return (_jsxs("div", { className: recordpanelRecipe({ className }), ...rest, role: "dialog", "aria-labelledby": titleId, children: [_jsxs("div", { className: "crisp-recordpanel-toolbar", children: [_jsx("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && (_jsxs("span", { className: "crisp-recordpanel-pager", children: [_jsx("button", { type: "button", className: "crisp-recordpanel-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: _jsx(ChevronUp, { size: 16, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpanel-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), _jsx("span", { className: "crisp-recordpanel-toolbar-spacer" }), onOpenRecord && (_jsx("button", { type: "button", className: "crisp-recordpanel-navbtn", "aria-label": openRecordLabel, onClick: onOpenRecord, children: _jsx(ArrowUpRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("div", { className: "crisp-recordpanel-header", children: [avatar ? (_jsx("img", { className: "crisp-recordpanel-fav", src: avatar, alt: "" })) : (_jsx(Avatar, { size: "md", shape: "rounded", tone: avatarTone, children: (record.name ?? "?").charAt(0) })), _jsx("span", { id: titleId, className: "crisp-recordpanel-title", children: heading })] }), _jsxs("div", { className: "crisp-recordpanel-body", children: [highlights && highlights.length > 0 && (_jsxs("div", { className: "crisp-recordpanel-section", children: [_jsx("div", { className: "crisp-recordpanel-section-head", children: _jsx("span", { className: "crisp-recordpanel-section-label", children: highlightsLabel }) }), _jsx("div", { className: "crisp-recordpanel-highlights", children: highlights.map((h) => (_jsxs("div", { className: "crisp-recordpanel-highlight", children: [_jsxs("span", { className: "crisp-recordpanel-highlight-label", children: [_jsx("span", { children: h.label }), h.icon ? _jsx(h.icon, { size: 16, strokeWidth: 1.75 }) : null] }), _jsx("span", { className: "crisp-recordpanel-highlight-value", children: h.value })] }, h.key))) })] })), activity != null && (_jsxs("div", { className: "crisp-recordpanel-section", children: [_jsxs("div", { className: "crisp-recordpanel-section-head", children: [_jsx("span", { className: "crisp-recordpanel-section-label", children: activityLabel }), onViewAllActivity && (_jsx("button", { type: "button", className: "crisp-recordpanel-section-action", onClick: onViewAllActivity, children: viewAllActivityLabel }))] }), _jsx("div", { className: "crisp-recordpanel-activity", children: activity })] }))] }), footer != null && (_jsx("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
 }
 RecordPanel.displayName = "RecordPanel";

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

@@ -1,9 +1,9 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
-import { recordTagCss } from "../recordstable/recordstable.tag.js";
 // A right-side record peek panel — slides in over the main content to show one
-// record's fields, the way a row peek panel opens. Positioned absolutely inside a
-// relative container (the app main area); slides in via @starting-style.
+// record's Highlights and Activity, the way Attio's own peek does. Positioned
+// absolutely inside a relative container (the app main area); slides in via
+// @starting-style.
 const config = defineRecipe({
     name: "recordpanel",
     base: `
@@ -18,53 +18,60 @@ const config = defineRecipe({
     @starting-style { transform: translateX(calc(100% + ${c.space["2"]})); }
     & * { box-sizing: border-box; }
 
-    & .crisp-recordpanel-header { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    /* #448: measured live on app.attio.com's peek -- a toolbar row above
+       the identity header: Close, then Previous/Next, on the left; "Open
+       record" on the right. 49px tall, 8px/10px padding, a hairline border
+       beneath (the same borderSubtle every other panel/row edge here
+       already uses). Close keeps the existing transparent ghost button;
+       Previous/Next/Open record are a distinct field-elevation style
+       (white fill, e.field's own ring+shadow, solid icon) -- measured as
+       genuinely different chrome from Close, not a reuse. */
+    & .crisp-recordpanel-toolbar { display: flex; align-items: center; height: 49px; flex-shrink: 0; padding: ${c.space["2"]} ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-recordpanel-toolbar-spacer { flex: 1; }
+    & .crisp-recordpanel-pager { display: flex; align-items: center; gap: ${c.space["1.5"]}; margin-inline-start: ${c.space["3"]}; }
+    & .crisp-recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: transparent; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpanel-iconbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .crisp-recordpanel-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; color: ${c.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-recordpanel-navbtn:hover:not(:disabled) { background: ${c.bgRaised}; }
+    & .crisp-recordpanel-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    & .crisp-recordpanel-header { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
     & .crisp-recordpanel-fav { width: 22px; height: ${c.size.chip}; border-radius: ${c.radius.sm}; flex-shrink: 0; object-fit: cover; background: ${c.bgRaised}; }
     & .crisp-recordpanel-title { flex: 1; min-width: 0; font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; letter-spacing: -0.2px; color: ${c.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .crisp-recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
-    & .crisp-recordpanel-iconbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
 
     & .crisp-recordpanel-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["2"]} ${c.space["3"]}; }
-    & .crisp-recordpanel-sectionlabel { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; padding: ${c.space["2"]} ${c.space["1"]} ${c.space["1"]}; }
-    & .crisp-recordpanel-field { display: flex; align-items: flex-start; gap: ${c.space["2"]}; min-height: 32px; padding: ${c.space["1"]} ${c.space["1"]}; border-radius: ${c.radius.md}; }
-    & .crisp-recordpanel-field:hover { background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); }
-    & .crisp-recordpanel-field-label { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 132px; flex-shrink: 0; padding-top: 3px; color: ${c.fgMuted}; font-size: ${c.text.md}; }
-    & .crisp-recordpanel-field-label svg { flex-shrink: 0; }
-    & .crisp-recordpanel-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${c.space["1"]}; padding-top: 3px; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
-    & .crisp-recordpanel-field-value[data-editable] { cursor: pointer; }
-    /* the click-to-edit trigger is a real <button> (keyboard-operable),
-       reset back to plain inline text and made a flex-wrap container of its
-       own -- FieldValue can render several chips (tags), which still need
-       to wrap the way they did before this had a button around them at
-       all. It wraps only FieldValue, never the error slot beside it (see
-       the component's own comment) -- NOT \`display: contents\`, which
-       drops a button's accessible semantics in some engines. */
-    & .crisp-recordpanel-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: ${c.space["1"]}; margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
-    & .crisp-recordpanel-empty { color: ${c.fgMuted}; }
 
-    /* #431: measured live on app.attio.com's record side panel -- clicking a
-       field's value opens a plain, borderless field exactly filling the
-       value's own box (no border, no background, no box-shadow), same font
-       as the value it replaces (hence \`font: inherit\`, not a restated
-       size/weight). A field row's own hover tint above already carries the
-       "this is interactive" affordance; the pending/error treatment isn't
-       Attio-measured -- it reuses the same tokens DataTable's identical
-       states already use (opacity 0.5, \`bgDanger\`), per #385/#430. */
-    & .crisp-recordpanel-edit { display: block; width: 100%; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; box-shadow: none; outline: none; font: inherit; color: inherit; }
-    /* not Attio-measured (its own field shows no focus ring either, caret
-       only) -- kept for real keyboard users, the same brand ring every
-       other crisp field already shows on focus (DataTable's identical
-       .crisp-datatable-edit:focus, e.g.). */
-    & .crisp-recordpanel-edit:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
-    & .crisp-recordpanel-edit:disabled { opacity: 0.5; cursor: not-allowed; }
-    & .crisp-recordpanel-edit-pending { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .crisp-recordpanel-edit-error { flex-basis: 100%; margin-top: ${c.space["0.5"]}; font-size: ${c.text.sm}; color: ${c.bgDanger}; }
-    & .crisp-recordpanel-edit-picker { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; }
-    & .crisp-recordpanel-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
+    /* #448: measured live on app.attio.com's peek (hover a Companies row,
+       click "Open preview"). Section label reads identically for both
+       Highlights and Activity: 14px/500, the same 63%-of-fgPrimary mix
+       RecordPage's own field-label already uses (product/recordpage's
+       .crisp-recordpage-field-label) -- one more surface landing on the
+       same measured "muted section heading" colour. */
+    & .crisp-recordpanel-section { padding: ${c.space["2"]} ${c.space["1"]} 0; }
+    & .crisp-recordpanel-section-head { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; height: 20px; margin-bottom: ${c.space["2"]}; }
+    & .crisp-recordpanel-section-label { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    /* "View all" -- measured 10px/400, a lighter mix than the section label
+       (55%, not 63%) -- its own distinct, honestly-measured value, not a
+       reuse of a nearby one that happened to be close. */
+    & .crisp-recordpanel-section-action { border: none; background: none; padding: 0; font-family: inherit; font-size: 10px; font-weight: ${c.weight.regular}; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; }
+    & .crisp-recordpanel-section-action:hover { color: ${c.fgPrimary}; }
 
-    ${recordTagCss}
-    & .crisp-recordpanel-link { color: ${c.bgBrandSolid}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
-    & .crisp-recordpanel-link:hover { text-decoration: underline; }
+    /* Highlights: a 2-column grid of label+icon+value cards, no card
+       chrome at all (no border/background/radius/shadow -- confirmed on
+       the live DOM: every highlight's computed style is fully transparent).
+       8px row/column gap; two rows measured "233x86" inside 473px content
+       width is exactly (473 - 8) / 2. */
+    & .crisp-recordpanel-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: ${c.space["2"]}; }
+    & .crisp-recordpanel-highlight { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; min-width: 0; }
+    & .crisp-recordpanel-highlight-label { display: flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-recordpanel-highlight-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-recordpanel-highlight-label svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-recordpanel-highlight-value { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; overflow: hidden; text-overflow: ellipsis; }
+
+    /* Activity is a consumer-supplied slot (crisp has no activity-feed
+       model of its own to render) -- this only wraps it with the measured
+       section heading above. */
+    & .crisp-recordpanel-activity { font-size: ${c.text.lg}; }
 
     /* #329: an optional slot for record actions (e.g. Edit). Reuses the
        header's own measured values rather than inventing new ones -- the
@@ -73,6 +80,8 @@ const config = defineRecipe({
        edge), and the header/body gap (space.2) for its own vertical padding
        and for spacing between whatever it's given. */
     & .crisp-recordpanel-footer { flex-shrink: 0; display: flex; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["2"]} ${c.space["3"]}; border-top: 1px solid ${c.borderSubtle}; }
+
+    ${rtlFlipCss}
   `,
     variants: {},
     defaultVariants: {},

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

@@ -1,17 +1,20 @@
 import * as React from "react";
 /**
- * The async-commit state machine behind `RecordPanel`/`RecordPage`'s
- * editable fields (#431) — the same shape `DataTable`'s own `commitEdit`
- * uses (#385/#430): a sync `onEdit` (returns `undefined`) commits and closes
+ * The async-commit state machine behind `RecordPage`'s editable Details
+ * column (#431) — the same shape `DataTable`'s own `commitEdit` uses
+ * (#385/#430): a sync `onEdit` (returns `undefined`) commits and closes
  * immediately; a Promise-returning `onEdit` keeps the field open and pending
  * while it settles, then either closes it (resolve) or closes it AND
  * reverts while showing the rejection's message (reject). The revert needs
- * no extra code here either: neither `RecordPanel` nor `RecordPage` mutates
- * `record` itself, so once `editingKey` clears, the field simply renders
- * `record[key]` again — whatever it still says.
+ * no extra code here either: `RecordPage` never mutates `record` itself, so
+ * once `editingKey` clears, the field simply renders `record[key]` again —
+ * whatever it still says.
  *
- * One hook shared by both consumers rather than two copies of the same
- * three `useState`s and the same `.then` branching.
+ * `RecordPanel` (the peek panel) used to share this hook too, before #448
+ * found that Attio's own peek has no editable field at all to attach it to
+ * — only `RecordPage`'s Details column does. Kept as its own module rather
+ * than folded back into `recordpage.tsx`: a second consumer turning up
+ * again is a smaller change than re-extracting it would be.
  */
 export function useEditableField(onEdit) {
     const [editingKey, setEditingKey] = React.useState(null);

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

@@ -4,9 +4,14 @@ import { contract as c } from "../../tokens/index.js";
  * `border-radius: ${c.radius.chip}`, 14px/20px at weight 500, and a 1px inset ring in the
  * tone's colour.
  *
- * Shared because RecordsTable and RecordPanel render the *same* chip. It used
- * to be pasted into both recipes, and the two copies had already started to
- * drift — adding the measured inset ring meant patching the same rules twice.
+ * Its own module (not pasted into `recordstable.recipe.ts`) because it used
+ * to be shared with `RecordPanel`'s own Details field list too, and the two
+ * copies had already started to drift before that sharing existed — adding
+ * the measured inset ring meant patching the same rules twice. `RecordPanel`
+ * no longer renders a Details list (#448, Attio's own peek doesn't have
+ * one), so `RecordsTable` is this module's only consumer now; kept as its
+ * own file rather than folded back in, since a second consumer showing up
+ * again is exactly how the drift happened the first time.
  */
 export const recordTagCss = `& .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent); }

package/dist/esm/product/richtext/index.js

@@ -1,2 +1,2 @@
-export { RichTextEditor, } from "./richtext.js";
+export { RICHTEXT_COLOR_TONES, RichTextEditor, } from "./richtext.js";
 export { richtextRecipe } from "./richtext.recipe.js";