@crisp-ui-kit/crisp 0.52.1 → 0.52.3

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/cjs/product/recordpanel/recordpanel.js

@@ -40,6 +40,8 @@ const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
 const core_1 = require("../../core");
 const recordpanel_recipe_1 = require("./recordpanel.recipe");
+const RESIZE_MIN_WIDTH = 360;
+const RESIZE_MAX_WIDTH = 720;
 /**
  * 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
@@ -50,8 +52,65 @@ const recordpanel_recipe_1 = require("./recordpanel.recipe");
  * 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, 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 }) {
+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, counterLabel, resizable = false, width: controlledWidth, defaultWidth = 420, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, footer, ...rest }) {
     const titleId = React.useId();
+    // Controlled/uncontrolled width (#413), the same split every other
+    // stateful crisp prop uses (see Accordion's own value/defaultValue). Only
+    // read when `resizable` — an immovable panel has no reason to carry width
+    // state at all, controlled or not.
+    const [internalWidth, setInternalWidth] = React.useState(defaultWidth);
+    const width = controlledWidth ?? internalWidth;
+    const setWidth = (next) => {
+        const clamped = Math.min(maxWidth, Math.max(minWidth, next));
+        if (controlledWidth === undefined)
+            setInternalWidth(clamped);
+        onWidthChange?.(clamped);
+    };
+    // Dragging reads/writes a ref, not state, mid-drag -- a `pointermove`
+    // firing dozens of times a second has no business going through a React
+    // re-render for each one; only the final clamped value needs to land in
+    // state (or a controlled consumer's own), via `setWidth` above. Mirrors
+    // DataTable's own column-resize ref shape (`resizeRef`) for the same
+    // reason, `dir` included.
+    const resizeRef = React.useRef(null);
+    const onResizeStart = (e) => {
+        if (e.button !== 0)
+            return;
+        // The panel sits at `inset-inline-end`, so its resize handle (at the
+        // panel's own inline-start edge) is physically on the LEFT in LTR and
+        // the RIGHT in RTL. Dragging it away from the panel's pinned edge must
+        // grow the panel either way -- physically LEFT in LTR (dir -1, so a
+        // negative `clientX` delta adds width), physically RIGHT in RTL (dir
+        // +1) -- the mirror image of DataTable's own column-resize grip, which
+        // is anchored at inset-inline-end instead (#214's own comment there).
+        const dir = (0, core_1.isRtlElement)(e.currentTarget) ? 1 : -1;
+        resizeRef.current = { x: e.clientX, width, dir };
+        e.target.setPointerCapture(e.pointerId);
+    };
+    const onResizeMove = (e) => {
+        const r = resizeRef.current;
+        if (!r)
+            return;
+        setWidth(r.width + r.dir * (e.clientX - r.x));
+    };
+    const onResizeEnd = (e) => {
+        resizeRef.current = null;
+        e.target.releasePointerCapture(e.pointerId);
+    };
+    // Which sections (#413) are expanded -- uncontrolled and independent
+    // (Attio's own Emails/Notes/Tasks open without closing one another, the
+    // same as Highlights cards never affecting each other): a plain `Set`,
+    // not modelled on Accordion's own single/multiple split, since a
+    // consumer here has no reason to want only one open at a time.
+    const [openSections, setOpenSections] = React.useState(() => new Set());
+    const toggleSection = (key) => setOpenSections((prev) => {
+        const next = new Set(prev);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        return next;
+    });
     // 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,
@@ -86,6 +145,10 @@ function RecordPanel({ record, onClose, className, closeLabel = "Close panel", o
     if (!record)
         return null;
     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 }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpanel_recipe_1.recordpanelRecipe)({ className }), style: resizable ? { width, maxWidth: "calc(92% - 8px)" } : undefined, ...rest, role: "dialog", "aria-labelledby": titleId, children: [resizable && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-resize-handle", onPointerDown: onResizeStart, onPointerMove: onResizeMove, onPointerUp: onResizeEnd })), (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 }) })] })), counterLabel != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-counter", children: counterLabel })), (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 })] })), sections && sections.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-sections", children: sections.map((s) => {
+                            const isOpen = openSections.has(s.key);
+                            const panelId = `${titleId}-section-${s.key}`;
+                            return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-section-row", children: [s.content ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpanel-section-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggleSection(s.key), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-section-row-label", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-section-row-count", children: s.count }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-recordpanel-section-chevron", size: 14, strokeWidth: 1.75, "data-open": isOpen ? "" : undefined, "aria-hidden": "true" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpanel-section-trigger crisp-recordpanel-section-trigger-inert", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-section-row-label", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpanel-section-row-count", children: s.count })] })), s.content && isOpen && ((0, jsx_runtime_1.jsx)("div", { id: panelId, className: "crisp-recordpanel-section-content", children: s.content }))] }, s.key));
+                        }) }))] }), footer != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
 }
 RecordPanel.displayName = "RecordPanel";

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

@@ -32,12 +32,27 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-recordpanel-toolbar { display: flex; align-items: center; height: 49px; flex-shrink: 0; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2.5"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
     & .crisp-recordpanel-toolbar-spacer { flex: 1; }
     & .crisp-recordpanel-pager { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; margin-inline-start: ${tokens_1.contract.space["3"]}; }
+    /* #413: "2 of 37 in All Companies" -- measured live, same toolbar row,
+       right after Prev/Next. 12px/500, the same 63%-of-fgPrimary mix every
+       other muted heading in this panel already uses. */
+    & .crisp-recordpanel-counter { margin-inline-start: ${tokens_1.contract.space["3"]}; font-size: 12px; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & .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: ${tokens_1.contract.radius.md}; background: transparent; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s; }
     & .crisp-recordpanel-iconbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; cursor: pointer; }
     & .crisp-recordpanel-navbtn:hover:not(:disabled) { background: ${tokens_1.contract.bgRaised}; }
     & .crisp-recordpanel-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
 
+    /* #413: measured live -- a 10px strip at the panel's own left edge,
+       cursor: col-resize (the issue's own repro calls it "ew-resize";
+       the actual computed value read off the live DOM is col-resize, the
+       same cursor family under a different keyword). Kept fully inside the
+       panel's own box, not extending past inset-inline-start: 0, so the
+       panel's own overflow: hidden (there for its rounded corners) never
+       clips it. touch-action: none stops a touchscreen's own pan gesture
+       from fighting the drag. */
+    & .crisp-recordpanel-resize-handle { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 10px; cursor: col-resize; z-index: 1; touch-action: none; }
+    & .crisp-recordpanel-resize-handle:hover, & .crisp-recordpanel-resize-handle:active { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
+
     & .crisp-recordpanel-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; }
     & .crisp-recordpanel-fav { width: 22px; height: ${tokens_1.contract.size.chip}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }
     & .crisp-recordpanel-title { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -76,6 +91,28 @@ const config = (0, core_1.defineRecipe)({
        section heading above. */
     & .crisp-recordpanel-activity { font-size: ${tokens_1.contract.text.lg}; }
 
+    /* #413: collapsed Emails/Notes/Tasks below Activity -- measured live: a
+       473px-wide row (the panel's own content width, 497 minus its 12px/8px
+       side insets), 20px tall, 14px/500 solid fgPrimary label (NOT the 63%
+       mix Highlights/Activity headings use -- this is body text, not a
+       muted heading), a trailing count. padding "0 8px 0 12px" measured on
+       the row itself; reproduced here as the trigger's own padding, since
+       the trigger IS the row (a plain div, not a button, when there's no
+       content to expand into -- matches the empty ("Emails 0") row
+       measured live, which has no expand affordance at all). */
+    & .crisp-recordpanel-sections { display: flex; flex-direction: column; padding-top: ${tokens_1.contract.space["2"]}; }
+    & .crisp-recordpanel-section-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; height: 20px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["3"]}; border: none; background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-recordpanel-section-trigger-inert { cursor: default; }
+    & .crisp-recordpanel-section-row-label { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    /* The count wasn't captured with its own background/pill chrome in the
+       live measurement (only its text: 14px, a "tertiary" internal variant
+       name that doesn't map to anything crisp defines) -- muted text next
+       to the label, not an invented badge shape. */
+    & .crisp-recordpanel-section-row-count { font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpanel-section-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; transition: transform .15s ease; }
+    & .crisp-recordpanel-section-chevron[data-open] { transform: rotate(180deg); }
+    & .crisp-recordpanel-section-content { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; }
+
     /* #329: an optional slot for record actions (e.g. Edit). Reuses the
        header's own measured values rather than inventing new ones -- the
        same horizontal inset (space.3), the same hairline border token

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/esm/product/recordpanel/recordpanel.js

@@ -2,8 +2,10 @@ 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 { hasOpenFloatingLayer } from "../../core/index.js";
+import { hasOpenFloatingLayer, isRtlElement } from "../../core/index.js";
 import { recordpanelRecipe } from "./recordpanel.recipe.js";
+const RESIZE_MIN_WIDTH = 360;
+const RESIZE_MAX_WIDTH = 720;
 /**
  * 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
@@ -14,8 +16,65 @@ import { recordpanelRecipe } from "./recordpanel.recipe.js";
  * 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, 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 }) {
+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, counterLabel, resizable = false, width: controlledWidth, defaultWidth = 420, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, footer, ...rest }) {
     const titleId = React.useId();
+    // Controlled/uncontrolled width (#413), the same split every other
+    // stateful crisp prop uses (see Accordion's own value/defaultValue). Only
+    // read when `resizable` — an immovable panel has no reason to carry width
+    // state at all, controlled or not.
+    const [internalWidth, setInternalWidth] = React.useState(defaultWidth);
+    const width = controlledWidth ?? internalWidth;
+    const setWidth = (next) => {
+        const clamped = Math.min(maxWidth, Math.max(minWidth, next));
+        if (controlledWidth === undefined)
+            setInternalWidth(clamped);
+        onWidthChange?.(clamped);
+    };
+    // Dragging reads/writes a ref, not state, mid-drag -- a `pointermove`
+    // firing dozens of times a second has no business going through a React
+    // re-render for each one; only the final clamped value needs to land in
+    // state (or a controlled consumer's own), via `setWidth` above. Mirrors
+    // DataTable's own column-resize ref shape (`resizeRef`) for the same
+    // reason, `dir` included.
+    const resizeRef = React.useRef(null);
+    const onResizeStart = (e) => {
+        if (e.button !== 0)
+            return;
+        // The panel sits at `inset-inline-end`, so its resize handle (at the
+        // panel's own inline-start edge) is physically on the LEFT in LTR and
+        // the RIGHT in RTL. Dragging it away from the panel's pinned edge must
+        // grow the panel either way -- physically LEFT in LTR (dir -1, so a
+        // negative `clientX` delta adds width), physically RIGHT in RTL (dir
+        // +1) -- the mirror image of DataTable's own column-resize grip, which
+        // is anchored at inset-inline-end instead (#214's own comment there).
+        const dir = isRtlElement(e.currentTarget) ? 1 : -1;
+        resizeRef.current = { x: e.clientX, width, dir };
+        e.target.setPointerCapture(e.pointerId);
+    };
+    const onResizeMove = (e) => {
+        const r = resizeRef.current;
+        if (!r)
+            return;
+        setWidth(r.width + r.dir * (e.clientX - r.x));
+    };
+    const onResizeEnd = (e) => {
+        resizeRef.current = null;
+        e.target.releasePointerCapture(e.pointerId);
+    };
+    // Which sections (#413) are expanded -- uncontrolled and independent
+    // (Attio's own Emails/Notes/Tasks open without closing one another, the
+    // same as Highlights cards never affecting each other): a plain `Set`,
+    // not modelled on Accordion's own single/multiple split, since a
+    // consumer here has no reason to want only one open at a time.
+    const [openSections, setOpenSections] = React.useState(() => new Set());
+    const toggleSection = (key) => setOpenSections((prev) => {
+        const next = new Set(prev);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        return next;
+    });
     // 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,
@@ -50,6 +109,10 @@ export function RecordPanel({ record, onClose, className, closeLabel = "Close pa
     if (!record)
         return null;
     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 }))] }));
+    return (_jsxs("div", { className: recordpanelRecipe({ className }), style: resizable ? { width, maxWidth: "calc(92% - 8px)" } : undefined, ...rest, role: "dialog", "aria-labelledby": titleId, children: [resizable && (_jsx("div", { className: "crisp-recordpanel-resize-handle", onPointerDown: onResizeStart, onPointerMove: onResizeMove, onPointerUp: onResizeEnd })), _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 }) })] })), counterLabel != null && (_jsx("span", { className: "crisp-recordpanel-counter", children: counterLabel })), _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 })] })), sections && sections.length > 0 && (_jsx("div", { className: "crisp-recordpanel-sections", children: sections.map((s) => {
+                            const isOpen = openSections.has(s.key);
+                            const panelId = `${titleId}-section-${s.key}`;
+                            return (_jsxs("div", { className: "crisp-recordpanel-section-row", children: [s.content ? (_jsxs("button", { type: "button", className: "crisp-recordpanel-section-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggleSection(s.key), children: [_jsx("span", { className: "crisp-recordpanel-section-row-label", children: s.label }), _jsx("span", { className: "crisp-recordpanel-section-row-count", children: s.count }), _jsx(ChevronDown, { className: "crisp-recordpanel-section-chevron", size: 14, strokeWidth: 1.75, "data-open": isOpen ? "" : undefined, "aria-hidden": "true" })] })) : (_jsxs("div", { className: "crisp-recordpanel-section-trigger crisp-recordpanel-section-trigger-inert", children: [_jsx("span", { className: "crisp-recordpanel-section-row-label", children: s.label }), _jsx("span", { className: "crisp-recordpanel-section-row-count", children: s.count })] })), s.content && isOpen && (_jsx("div", { id: panelId, className: "crisp-recordpanel-section-content", children: s.content }))] }, s.key));
+                        }) }))] }), footer != null && (_jsx("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
 }
 RecordPanel.displayName = "RecordPanel";

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

@@ -29,12 +29,27 @@ const config = defineRecipe({
     & .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"]}; }
+    /* #413: "2 of 37 in All Companies" -- measured live, same toolbar row,
+       right after Prev/Next. 12px/500, the same 63%-of-fgPrimary mix every
+       other muted heading in this panel already uses. */
+    & .crisp-recordpanel-counter { margin-inline-start: ${c.space["3"]}; font-size: 12px; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & .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; }
 
+    /* #413: measured live -- a 10px strip at the panel's own left edge,
+       cursor: col-resize (the issue's own repro calls it "ew-resize";
+       the actual computed value read off the live DOM is col-resize, the
+       same cursor family under a different keyword). Kept fully inside the
+       panel's own box, not extending past inset-inline-start: 0, so the
+       panel's own overflow: hidden (there for its rounded corners) never
+       clips it. touch-action: none stops a touchscreen's own pan gesture
+       from fighting the drag. */
+    & .crisp-recordpanel-resize-handle { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 10px; cursor: col-resize; z-index: 1; touch-action: none; }
+    & .crisp-recordpanel-resize-handle:hover, & .crisp-recordpanel-resize-handle:active { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
+
     & .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; }
@@ -73,6 +88,28 @@ const config = defineRecipe({
        section heading above. */
     & .crisp-recordpanel-activity { font-size: ${c.text.lg}; }
 
+    /* #413: collapsed Emails/Notes/Tasks below Activity -- measured live: a
+       473px-wide row (the panel's own content width, 497 minus its 12px/8px
+       side insets), 20px tall, 14px/500 solid fgPrimary label (NOT the 63%
+       mix Highlights/Activity headings use -- this is body text, not a
+       muted heading), a trailing count. padding "0 8px 0 12px" measured on
+       the row itself; reproduced here as the trigger's own padding, since
+       the trigger IS the row (a plain div, not a button, when there's no
+       content to expand into -- matches the empty ("Emails 0") row
+       measured live, which has no expand affordance at all). */
+    & .crisp-recordpanel-sections { display: flex; flex-direction: column; padding-top: ${c.space["2"]}; }
+    & .crisp-recordpanel-section-trigger { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; height: 20px; padding: 0 ${c.space["2"]} 0 ${c.space["3"]}; border: none; background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-recordpanel-section-trigger-inert { cursor: default; }
+    & .crisp-recordpanel-section-row-label { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    /* The count wasn't captured with its own background/pill chrome in the
+       live measurement (only its text: 14px, a "tertiary" internal variant
+       name that doesn't map to anything crisp defines) -- muted text next
+       to the label, not an invented badge shape. */
+    & .crisp-recordpanel-section-row-count { font-size: ${c.text.lg}; color: ${c.fgMuted}; }
+    & .crisp-recordpanel-section-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${c.fgMuted}; transition: transform .15s ease; }
+    & .crisp-recordpanel-section-chevron[data-open] { transform: rotate(180deg); }
+    & .crisp-recordpanel-section-content { padding: ${c.space["2"]} ${c.space["2"]} ${c.space["2"]} ${c.space["3"]}; }
+
     /* #329: an optional slot for record actions (e.g. Edit). Reuses the
        header's own measured values rather than inventing new ones -- the
        same horizontal inset (space.3), the same hairline border token