@crispy-seed/data-table 0.6.0 → 0.8.0

package/dist/index.js

@@ -750,21 +750,31 @@ function isFunction$1(value) {
 
 const DATA_TABLE_UNIVERSAL_CALC_OPS = [
     "count",
-    "countFilled"
+    "empty",
+    "notEmpty"
 ];
 const DATA_TABLE_NUMERIC_CALC_OPS = [
     "sum",
     "average",
+    "median",
     "min",
-    "max"
+    "max",
+    "range"
+];
+/** Offered instead of `DATA_TABLE_NUMERIC_CALC_OPS` on a non-numeric column. */ const DATA_TABLE_NON_NUMERIC_CALC_OPS = [
+    "countUnique"
 ];
 const DATA_TABLE_CALC_LABEL = {
     count: "Count",
-    countFilled: "Count filled",
+    empty: "Empty",
+    notEmpty: "Not empty",
     sum: "Sum",
     average: "Average",
+    median: "Median",
     min: "Min",
-    max: "Max"
+    max: "Max",
+    range: "Range",
+    countUnique: "Count unique"
 };
 /** A value counts as empty when it is null/undefined, an empty string, or an empty
  *  array -- crisp's own `isEmptyValue` (columncalc.tsx), reused verbatim. */ function isEmptyValueForCalc(value) {
@@ -773,29 +783,50 @@ const DATA_TABLE_CALC_LABEL = {
     if (Array.isArray(value)) return value.length === 0;
     return false;
 }
+/** The middle value of a SORTED, non-empty numeric array -- the mean of the two
+ *  middle entries on an even-length array, same convention as every stats library. */ function median(sortedNumbers) {
+    const mid = Math.floor(sortedNumbers.length / 2);
+    return sortedNumbers.length % 2 === 0 ? (sortedNumbers[mid - 1] + sortedNumbers[mid]) / 2 : sortedNumbers[mid];
+}
 /**
  * Pure so the arithmetic is independently (and mutation-) testable without rendering a
- * table at all. `sum`/`average`/`min`/`max` skip empty values and non-numeric ones
- * (coerced via `Number`, dropping `NaN`); they return `null` -- render nothing, not a
- * misleading 0 -- when there is nothing numeric left to reduce over.
+ * table at all. The numeric ops (`sum`/`average`/`median`/`min`/`max`/`range`) skip
+ * empty values and non-numeric ones (coerced via `Number`, dropping `NaN`); they
+ * return `null` -- render nothing, not a misleading 0 -- when there is nothing
+ * numeric left to reduce over. `countUnique` counts distinct NON-EMPTY values
+ * (`JSON.stringify`-normalized, so two arrays/objects with the same shape count
+ * once) -- empties are already their own op (`empty`), so folding them into "one
+ * more unique value" here would double-count the same information two different
+ * ways in the same menu.
  */ function computeColumnCalc(values, op) {
     switch(op){
         case "count":
             return values.length;
-        case "countFilled":
+        case "empty":
+            return values.filter(isEmptyValueForCalc).length;
+        case "notEmpty":
             return values.filter((value)=>!isEmptyValueForCalc(value)).length;
+        case "countUnique":
+            {
+                const seen = new Set(values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>JSON.stringify(value)));
+                return seen.size;
+            }
     }
-    const numbers = values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>typeof value === "number" ? value : Number(value)).filter((value)=>Number.isFinite(value));
+    const numbers = values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>typeof value === "number" ? value : Number(value)).filter((value)=>Number.isFinite(value)).sort((a, b)=>a - b);
     if (numbers.length === 0) return null;
     switch(op){
         case "sum":
             return numbers.reduce((total, value)=>total + value, 0);
         case "average":
             return numbers.reduce((total, value)=>total + value, 0) / numbers.length;
+        case "median":
+            return median(numbers);
         case "min":
-            return Math.min(...numbers);
+            return numbers[0];
         case "max":
-            return Math.max(...numbers);
+            return numbers[numbers.length - 1];
+        case "range":
+            return numbers[numbers.length - 1] - numbers[0];
         default:
             return null;
     }
@@ -1200,31 +1231,48 @@ const EMPTY_RECORD = {};
     ]);
     const endColumnDrag = useCallback(()=>setDraggingColumnKey(null), []);
     // -- drag-to-resize ------------------------------------------------------------------
-    // `resizeStartRef` holds the ONE thing that must survive across pointermove events
-    // without triggering a re-render on every pixel (the drag's origin) -- state
-    // (`resizingColumnKey`) is only for what the render actually needs: which column's
-    // handle should show its active/dragging look.
+    // `resizeStartRef` holds everything that must survive across pointermove events
+    // WITHOUT triggering a re-render on every pixel: the drag's origin, AND (as of the
+    // live-review fix below) the latest computed width, so `endColumnResize` has
+    // something to commit. State (`resizingColumnKey`) is only for what the render
+    // actually needs: which column's handle should show its active/dragging look.
+    //
+    // `updateColumnResize` used to call `setColumnWidth` on every single pointermove --
+    // a `setColumnWidths` state update (and therefore a full DataTable re-render) per
+    // PIXEL of drag, confirmed live as the stutter a column-border drag produced. It now
+    // only computes+returns the clamped width; the styled layer (`resize.tsx`) writes
+    // that directly to the dragged column's own `<col>` element (`col.style.width`,
+    // outside React), which is all a resize needs frame-to-frame -- table layout already
+    // recalculates from a `<col>`'s own inline style with no re-render involved. React
+    // state (and this hook's `onColumnWidthsChange` contract) is only touched ONCE, in
+    // `endColumnResize`, committing the final width exactly as a controlled consumer
+    // already expects.
     const resizeStartRef = useRef(null);
     const [resizingColumnKey, setResizingColumnKey] = useState(null);
     const beginColumnResize = useCallback((key, clientX, currentWidth)=>{
         resizeStartRef.current = {
             key,
             startX: clientX,
-            startWidth: currentWidth
+            startWidth: currentWidth,
+            currentWidth
         };
         setResizingColumnKey(key);
     }, []);
     const updateColumnResize = useCallback((clientX)=>{
         const start = resizeStartRef.current;
-        if (!start) return;
-        setColumnWidth(start.key, start.startWidth + (clientX - start.startX));
-    }, [
-        setColumnWidth
-    ]);
+        if (!start) return undefined;
+        const width = clampColumnWidth(start.startWidth + (clientX - start.startX));
+        start.currentWidth = width;
+        return width;
+    }, []);
     const endColumnResize = useCallback(()=>{
+        const start = resizeStartRef.current;
+        if (start) setColumnWidth(start.key, start.currentWidth);
         resizeStartRef.current = null;
         setResizingColumnKey(null);
-    }, []);
+    }, [
+        setColumnWidth
+    ]);
     return {
         columnOrder,
         visibleColumnOrder,
@@ -1574,11 +1622,16 @@ function useDataTableSort(props) {
     const [sort, setSort] = useControllableState$1({
         prop: sortProp,
         defaultProp: defaultSort,
-        onChange: (nextSort)=>{
-            // `toggleSort` never sets `sort` back to `undefined`, but the underlying state is
-            // typed as possibly-undefined so an uncontrolled table can start with no sort at all.
-            if (nextSort) onSortChange?.(nextSort);
-        }
+        // Live-review fix: this used to only fire for a DEFINED next sort ("`toggleSort`
+        // never clears it, so why would this ever see `undefined`") -- true until
+        // `clearSort` (below) existed. Guarding the callback on truthiness meant a
+        // consumer controlling `sort` had no way to ever learn the column sort was
+        // cleared: `setSort(undefined)` would run, but the controlled VALUE never moves
+        // without the consumer's own state updating from this callback, and the guard
+        // swallowed exactly the call that would have told it to. Every other value this
+        // hook contract carries (`onColumnWidthsChange`, `onColumnCalcOpsChange`, ...)
+        // already passes its "cleared" shape through unconditionally; this now matches.
+        onChange: onSortChange
     });
     const toggleSort = useCallback((key)=>{
         setSort((current)=>{
@@ -1594,6 +1647,12 @@ function useDataTableSort(props) {
     }, [
         setSort
     ]);
+    /** Attio/GRC's "Remove sort" -- the header click cycle (above) only ever toggles
+   *  asc/desc once a column has been clicked once; this is the only way back to no
+   *  sort at all. Exposed for a column's own header menu (`column-menu.tsx`'s
+   *  `ColumnMenu`) to offer as a "Clear sort" item when that column is the sorted one. */ const clearSort = useCallback(()=>setSort(undefined), [
+        setSort
+    ]);
     const getHeaderCellProps = useCallback((columnKey, sortable)=>{
         const isSorted = Boolean(columnKey) && sort?.key === columnKey;
         const canSort = Boolean(sortable && columnKey);
@@ -1623,6 +1682,7 @@ function useDataTableSort(props) {
     return {
         sort,
         toggleSort,
+        clearSort,
         getHeaderCellProps
     };
 }
@@ -4144,7 +4204,7 @@ function formatCalcValue(value) {
     ]);
     const ops = [
         ...DATA_TABLE_UNIVERSAL_CALC_OPS,
-        ...numeric ? DATA_TABLE_NUMERIC_CALC_OPS : []
+        ...numeric ? DATA_TABLE_NUMERIC_CALC_OPS : DATA_TABLE_NON_NUMERIC_CALC_OPS
     ];
     return /*#__PURE__*/ jsxs(MenuRoot, {
         children: [
@@ -4210,8 +4270,32 @@ function formatCalcValue(value) {
  * once captured, this SAME element keeps receiving `pointermove`/`pointerup` even
  * after the cursor leaves it, so the drag math can live entirely in this one
  * handler set with no effect/cleanup to get wrong.
+ *
+ * Live-review fix (stutter): `updateColumnResize` used to also commit the new width
+ * to React state on every `pointermove` -- a full DataTable re-render per pixel of
+ * drag, confirmed as the stutter. During the drag this component now writes the
+ * computed width straight to the dragged column's own `<col>` element (found once,
+ * at pointerdown, via its `data-column-key`, per `column-layout`'s `<colgroup>`
+ * comment: a `<col>`'s own inline `width` is the SINGLE place table layout reads a
+ * column's width from, so writing it directly reflows the table with no React
+ * render at all), coalesced to at most one write per animation frame so a fast
+ * mouse doesn't queue more layout work than the screen can show. React state (and
+ * a controlled consumer's `onColumnWidthsChange`) is only touched ONCE more, in
+ * `endColumnResize`, which is unchanged: it commits whatever `updateColumnResize`
+ * last computed.
  */ function ColumnResizeHandle({ columnKey, width }) {
     const { beginColumnResize, updateColumnResize, endColumnResize, isColumnResizing } = useDataTableContext();
+    // Survive across pointermove events without a re-render: the `<col>` this drag
+    // writes to (resolved once, at pointerdown) and the rAF coalescing the writes.
+    const colElementRef = useRef(null);
+    const pendingWidthRef = useRef(null);
+    const rafIdRef = useRef(null);
+    const flushPendingWidth = ()=>{
+        rafIdRef.current = null;
+        const col = colElementRef.current;
+        const pendingWidth = pendingWidthRef.current;
+        if (col && pendingWidth != null) col.style.width = `${pendingWidth}px`;
+    };
     return /*#__PURE__*/ jsx("span", {
         // Mouse/pointer-drag only for now (no keyboard equivalent yet) -- `aria-hidden`
         // rather than `role="separator"` + `aria-label`, which would otherwise fold
@@ -4227,16 +4311,32 @@ function formatCalcValue(value) {
             event.stopPropagation();
             event.preventDefault();
             event.currentTarget.setPointerCapture(event.pointerId);
-            const startWidth = width ?? event.currentTarget.closest('[role="columnheader"]')?.getBoundingClientRect().width ?? 150;
+            const headerCell = event.currentTarget.closest('[role="columnheader"]');
+            const startWidth = width ?? headerCell?.getBoundingClientRect().width ?? 150;
+            colElementRef.current = event.currentTarget.closest("table")?.querySelector(`col[data-column-key="${CSS.escape(columnKey)}"]`) ?? null;
             beginColumnResize(columnKey, event.clientX, startWidth);
         },
         onPointerMove: (event)=>{
-            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-                updateColumnResize(event.clientX);
+            if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+            const nextWidth = updateColumnResize(event.clientX);
+            if (nextWidth == null) return;
+            pendingWidthRef.current = nextWidth;
+            if (rafIdRef.current == null) {
+                rafIdRef.current = requestAnimationFrame(flushPendingWidth);
             }
         },
         onPointerUp: (event)=>{
             event.currentTarget.releasePointerCapture(event.pointerId);
+            if (rafIdRef.current != null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+            // Apply any not-yet-flushed width immediately so the `<col>` matches the
+            // exact value `endColumnResize` is about to commit to React state -- with
+            // no more pointermoves coming, nothing else would flush it.
+            flushPendingWidth();
+            pendingWidthRef.current = null;
+            colElementRef.current = null;
             endColumnResize();
         },
         children: /*#__PURE__*/ jsx("span", {
@@ -4427,68 +4527,100 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
  *  permanently, so this one carries its own marker attribute distinct from that
  *  slot's OTHER occupants (the sort chevron, the filter trigger), which stay visible
  *  under their own separate rules regardless of hover. */ function ColumnMenu({ column, onRename }) {
-    const { moveColumn, hideColumn, isColumnPinned, togglePinColumn } = useDataTableContext();
+    const { moveColumn, hideColumn, isColumnPinned, togglePinColumn, sort, clearSort } = useDataTableContext();
     const columnLabel = typeof column.header === "string" ? column.header : column.key;
     const pinned = isColumnPinned(column.key);
+    // Attio/GRC's "Remove sort" (live-review fix D) -- the header's own click-to-sort
+    // (`SortIndicator`/`toggleSort`, above) only cycles asc/desc once a column has been
+    // clicked; this is the only affordance back to no sort at all, so it only makes
+    // sense to show on the column that IS currently sorted.
+    const isSorted = sort?.key === column.key;
     const stopPropagation = (event)=>event.stopPropagation();
-    return /*#__PURE__*/ jsxs(MenuRoot, {
-        children: [
-            /*#__PURE__*/ jsx(DataTableHeaderCellIcon, {
-                asChild: true,
-                "data-column-menu": "",
-                onClick: stopPropagation,
-                onKeyDown: stopPropagation,
-                draggable: false,
-                children: /*#__PURE__*/ jsx(MenuTrigger, {
-                    "aria-label": `${columnLabel} column menu`,
-                    children: /*#__PURE__*/ jsx(IconDot3HorizontalLine_default, {
-                        size: 16
+    return(// Live-review fix (D): a `MenuItem` inside `MenuPositioner` renders through a
+    // `FloatingPortal` -- a REAL React portal (`ReactDOM.createPortal`), which
+    // bubbles a click/keydown up through the REACT TREE (this component, then the
+    // columnheader that renders it), NOT the DOM tree the portal actually appends
+    // to. Confirmed live: clicking ANY item here (not just "Clear sort" -- "Move
+    // left" on a column with no sort at all reproduced it too) also fired the
+    // COLUMNHEADER's own `toggleSort`, because nothing stopped that bubble before
+    // it reached the header's `onClick`/`onKeyDown` (`getHeaderCellProps`). The
+    // trigger's own `stopPropagation` (on `DataTableHeaderCellIcon` below) only
+    // covers clicks that start on the trigger itself -- a SIBLING of
+    // `MenuPositioner` in this tree, not an ancestor of it, so it never sees a
+    // menu-item event at all. This wrapper is a genuine DOM node sitting between
+    // BOTH of them and the header, so it catches the bubble from either one;
+    // `display: contents` keeps it invisible to `DataTableHeaderCellInner`'s own
+    // flex layout.
+    // biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this span never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the trigger button, the portaled menu items). No role fits it because it isn't a control.
+    /*#__PURE__*/ jsx("span", {
+        onClick: stopPropagation,
+        onKeyDown: stopPropagation,
+        style: {
+            display: "contents"
+        },
+        children: /*#__PURE__*/ jsxs(MenuRoot, {
+            children: [
+                /*#__PURE__*/ jsx(DataTableHeaderCellIcon, {
+                    asChild: true,
+                    "data-column-menu": "",
+                    draggable: false,
+                    children: /*#__PURE__*/ jsx(MenuTrigger, {
+                        "aria-label": `${columnLabel} column menu`,
+                        children: /*#__PURE__*/ jsx(IconDot3HorizontalLine_default, {
+                            size: 16
+                        })
                     })
-                })
-            }),
-            /*#__PURE__*/ jsx(MenuPositioner, {
-                children: /*#__PURE__*/ jsx(MenuContent, {
-                    style: {
-                        minWidth: 160
-                    },
-                    children: /*#__PURE__*/ jsxs(MenuScrollArea, {
-                        children: [
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: onRename,
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Rename"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>moveColumn(column.key, "left"),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Move left"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>moveColumn(column.key, "right"),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Move right"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>togglePinColumn(column.key),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: pinned ? "Unpin column" : "Pin column"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(MenuItem, {
-                                onClick: ()=>hideColumn(column.key),
-                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
-                                    children: "Hide column"
+                }),
+                /*#__PURE__*/ jsx(MenuPositioner, {
+                    children: /*#__PURE__*/ jsx(MenuContent, {
+                        style: {
+                            minWidth: 160
+                        },
+                        children: /*#__PURE__*/ jsxs(MenuScrollArea, {
+                            children: [
+                                /*#__PURE__*/ jsx(MenuItem, {
+                                    onClick: onRename,
+                                    children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                        children: "Rename"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(MenuItem, {
+                                    onClick: ()=>moveColumn(column.key, "left"),
+                                    children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                        children: "Move left"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(MenuItem, {
+                                    onClick: ()=>moveColumn(column.key, "right"),
+                                    children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                        children: "Move right"
+                                    })
+                                }),
+                                isSorted && /*#__PURE__*/ jsx(MenuItem, {
+                                    onClick: clearSort,
+                                    children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                        children: "Clear sort"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(MenuItem, {
+                                    onClick: ()=>togglePinColumn(column.key),
+                                    children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                        children: pinned ? "Unpin column" : "Pin column"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(MenuItem, {
+                                    onClick: ()=>hideColumn(column.key),
+                                    children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                        children: "Hide column"
+                                    })
                                 })
-                            })
-                        ]
+                            ]
+                        })
                     })
                 })
-            })
-        ]
-    });
+            ]
+        })
+    }));
 }
 
 /**
@@ -10205,6 +10337,25 @@ function DataTableInner(props, ref) {
     // column/direction is active. A consumer that pre-sorts server-side can pass
     // a controlled `sort`; this still sorts the rows it's given, which for
     // already-sorted data is a no-op.
+    //
+    // Live-review fix (D, "Clear sort"): the JSX below passes the RAW `sort` prop
+    // (not `resolvedSort`) on to `DataTablePrimitiveRoot`, plus `defaultSort` --
+    // passing `resolvedSort` used to feed the headless `useDataTableSort`'s own
+    // `useControllableState` a value that starts `undefined` (uncontrolled) and
+    // BECOMES defined the instant a header is first clicked (once `internalSort`
+    // picks it up), flipping that inner hook from uncontrolled to controlled
+    // mid-lifecycle -- `@radix-ui/react-use-controllable-state` warns about
+    // exactly this and, worse, silently misbehaves on it: its own internal
+    // uncontrolled state stops updating the moment it's controlled, so when
+    // `clearSort` later drove `resolvedSort` back to `undefined` (flipping BACK
+    // to uncontrolled), the hook fell through to that stale, never-updated
+    // internal state instead -- still the pre-clear value, confirmed live
+    // (`aria-sort` stayed "ascending" after "Clear sort"). The RAW `sort` prop
+    // never has this problem: for the common uncontrolled case it's simply
+    // always `undefined`, so the headless hook is uncontrolled for its entire
+    // lifetime and owns its state correctly; a consumer that genuinely controls
+    // `sort` behaves exactly as before (`resolvedSort === sort` whenever `sort`
+    // is defined, so nothing changes for that path).
     const [internalSort, setInternalSort] = React.useState(defaultSort);
     const resolvedSort = sort !== undefined ? sort : internalSort;
     const handleSortChange = React.useCallback((next)=>{
@@ -10310,7 +10461,8 @@ function DataTableInner(props, ref) {
             selectedIds: selectedIds,
             defaultSelectedIds: defaultSelectedIds,
             onSelectionChange: onSelectionChange,
-            sort: resolvedSort,
+            sort: sort,
+            defaultSort: defaultSort,
             onSortChange: handleSortChange,
             query: resolvedQuery,
             onQueryChange: handleQueryChange,
@@ -10573,6 +10725,10 @@ const DataTableTable = withContext$1(DataTableTable$1, "table");
                 }
             }),
             effective.map(({ column, width })=>/*#__PURE__*/ jsx("col", {
+                    // Read by `resize.tsx`'s own pointermove handler (`data-column-key`,
+                    // not a ref) to write the dragged width straight to this element
+                    // during a drag -- see that file's own comment for why.
+                    "data-column-key": column.key,
                     style: width === undefined ? undefined : {
                         width
                     }
@@ -11001,7 +11157,7 @@ DataTableViewsControl.displayName = "DataTableViewsControl";
     });
 }
 
-__insertCSS(".seed-resizable-panel__root{position:relative;display:flex;height:100%}.seed-resizable-panel__spacer{flex:0 0 auto;height:100%;transition:width .14s}.seed-resizable-panel__panel{position:absolute;top:0;bottom:0;box-sizing:border-box;overflow:hidden;background:var(--seed-color-bg-layer-default)}.seed-resizable-panel__panel[data-side=left]{left:0}.seed-resizable-panel__panel[data-side=right]{right:0}.seed-resizable-panel__panel[data-floating=false]{border-radius:0;box-shadow:none}.seed-resizable-panel__panel[data-floating=false][data-side=left]{border-inline-end:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=false][data-side=right]{border-inline-start:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=true]{position:fixed;top:8px;bottom:8px;border-inline-end:none;border-inline-start:none;border-radius:10px;box-shadow:inset 0 0 0 1px transparent,0 0 0 1px rgba(28,40,64,.04),0 4px 8px -4px rgba(28,40,64,.12),0 4px 12px -2px rgba(24,41,75,.16);transform:none;transition:transform .14s,padding .14s}.seed-resizable-panel__panel[data-floating=true][data-side=left]{padding:8px 0 8px 8px}[data-floating=true]>.seed-resizable-panel__inner{transition:opacity .14s}.seed-resizable-panel__handle[data-side=left]{right:0}.seed-resizable-panel__handle[data-side=right]{left:0}.seed-resizable-panel__handle::before{content:\"\";position:absolute;top:0;width:1px;height:100%;background:var(--seed-color-stroke-neutral-muted);transition:background-color .16s,height .16s}.seed-resizable-panel__handle[data-side=left]::before{right:0}.seed-resizable-panel__handle[data-side=right]::before{left:0}.seed-resizable-panel__handle:hover::before,.seed-resizable-panel__handle[data-dragging]::before{width:2px;background:#0298d9}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column{display:flex;align-items:center;justify-content:center;width:7px;left:-3px;right:-3px;z-index:1;cursor:col-resize}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column::before{content:none}.seed-resizable-panel__handleInner{width:3px;height:100%;border-radius:3px;background:#0298d9;opacity:0;transition:opacity .1s .1s}.seed-resizable-panel__handle:hover .seed-resizable-panel__handleInner,.seed-resizable-panel__handle[data-dragging] .seed-resizable-panel__handleInner{opacity:1}");
+__insertCSS(".seed-resizable-panel__root{position:relative;display:flex;height:100%}.seed-resizable-panel__spacer{flex:0 0 auto;height:100%;transition:width .14s}.seed-resizable-panel__panel{position:absolute;top:0;bottom:0;box-sizing:border-box;overflow:hidden;background:var(--seed-color-bg-layer-default)}.seed-resizable-panel__panel[data-side=left]{left:0}.seed-resizable-panel__panel[data-side=right]{right:0}.seed-resizable-panel__panel[data-floating=false]{border-radius:0;box-shadow:none}.seed-resizable-panel__panel[data-floating=false][data-side=left]{border-inline-end:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=false][data-side=right]{border-inline-start:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=true]{position:absolute;top:8px;bottom:8px;z-index:20;border-inline-end:none;border-inline-start:none;border-radius:12px;box-shadow:0 0 0 1px rgba(28,40,64,.04),0 4px 8px -4px rgba(28,40,64,.12),0 4px 12px -2px rgba(24,41,75,.16);transform:none;opacity:1}.seed-resizable-panel__panel[data-floating=true][data-side=left]{left:8px}.seed-resizable-panel__panel[data-floating=true][data-side=right]{right:8px}.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=open]{animation:seed-enter;animation-timing-function:cubic-bezier(0.16,1,0.3,1);animation-duration:.18s;--seed-enter-translate-x:calc(-100% - 8px);--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=open]{--seed-enter-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=closed]{animation:seed-exit;animation-timing-function:cubic-bezier(0.4,0,1,1);animation-duration:.14s;animation-fill-mode:forwards;--seed-exit-translate-x:calc(-100% - 8px);--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=closed]{--seed-exit-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=open]{animation:seed-enter;animation-timing-function:cubic-bezier(0.16,1,0.3,1);animation-duration:.18s;--seed-enter-translate-x:calc(100% + 8px);--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=open]{--seed-enter-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=closed]{animation:seed-exit;animation-timing-function:cubic-bezier(0.4,0,1,1);animation-duration:.14s;animation-fill-mode:forwards;--seed-exit-translate-x:calc(100% + 8px);--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=closed]{--seed-exit-translate-x:0}}.seed-resizable-panel__inner{height:100%}.seed-resizable-panel__handle{position:absolute;top:0;width:10px;height:100%;z-index:2;cursor:col-resize;background:0 0;touch-action:none}.seed-resizable-panel__handle[data-side=left]{right:0}.seed-resizable-panel__handle[data-side=right]{left:0}.seed-resizable-panel__handle::before{content:\"\";position:absolute;top:0;width:1px;height:100%;background:var(--seed-color-stroke-neutral-muted);transition:background-color .16s,height .16s}.seed-resizable-panel__handle[data-side=left]::before{right:0}.seed-resizable-panel__handle[data-side=right]::before{left:0}.seed-resizable-panel__handle:hover::before,.seed-resizable-panel__handle[data-dragging]::before{width:2px;background:#0298d9}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column{display:flex;align-items:center;justify-content:center;width:7px;left:-3px;right:-3px;z-index:1;cursor:col-resize}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column::before{content:none}.seed-resizable-panel__handleInner{width:3px;height:100%;border-radius:3px;background:#0298d9;opacity:0;transition:opacity .1s .1s}.seed-resizable-panel__handle:hover .seed-resizable-panel__handleInner,.seed-resizable-panel__handle[data-dragging] .seed-resizable-panel__handleInner{opacity:1}");
 
 const resizablePanelSlotNames = [
     [
@@ -11205,16 +11361,26 @@ Object.assign(resizablePanel, {
 // selector), so this component and that recipe stay in lockstep without a
 // second source of truth for the string.
 const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
+// Kept in lock-step with `resizable-panel.ts`'s own `FLOATING_GUTTER` (a
+// literal there too, for the same reason) -- the floating/inset-card variant
+// needs an outward-facing gutter that DOCKED never reserves. Read on at
+// `spacer`'s own render below for why this can't just be one more CSS rule.
+const FLOATING_GUTTER_PX = 8;
 /**
  * An adjustable-panel primitive: a spacer that reserves layout width plus a
- * panel that overlays it, so the panel can move between docked (in-flow) and
- * floating (`position: fixed`, an overlay) without a reflow glitch. Drag the
- * edge handle to resize; constraints are CSS `min-width`/`max-width`, never
- * re-clamped in JS. Ported from your-moon/crisp's `ResizablePanel`
- * (`components/resizablepanel/`); state/drag behavior lives in
- * `useResizablePanel` (`@seed-design/react-resizable-panel`), this component
- * owns the DOM + recipe classes on top of it.
- */ const ResizablePanel = /*#__PURE__*/ forwardRef(({ side = "left", width: sizeProp, defaultSize = 280, onWidthChange, min = 200, max, floating = false, handleVariant = "panel", resizable = true, storageKey, className, children, ...rest }, forwardedRef)=>{
+ * panel that overlays it, so it can resize (or animate open/closed) without
+ * a reflow glitch on the rest of the layout -- the spacer always reserves
+ * the panel's real width, in BOTH the docked and floating visual variants
+ * (floating changes only the panel's own look -- gutter, radius, shadow --
+ * never its `position`, so a consumer laying this out as a row-flex sibling
+ * of e.g. a table sees that table genuinely shrink to make room, matching
+ * Attio's own measured peek). Drag the edge handle to resize; constraints
+ * are CSS `min-width`/`max-width`, never re-clamped in JS. Ported from
+ * your-moon/crisp's `ResizablePanel` (`components/resizablepanel/`);
+ * state/drag behavior lives in `useResizablePanel`
+ * (`@seed-design/react-resizable-panel`), this component owns the DOM +
+ * recipe classes on top of it.
+ */ const ResizablePanel = /*#__PURE__*/ forwardRef(({ side = "left", width: sizeProp, defaultSize = 280, onWidthChange, min = 200, max, floating = false, handleVariant = "panel", resizable = true, storageKey, animationState, panelElementRef, className, children, ...rest }, forwardedRef)=>{
     const { width, dragging, containerRef, panelRef, handleHandlers } = useResizablePanel({
         side,
         size: sizeProp,
@@ -11222,9 +11388,29 @@ const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
         onSizeChange: onWidthChange,
         storageKey
     });
+    const composedPanelRef = useComposedRefs(panelRef, panelElementRef);
     const classNames = resizablePanel();
+    // The floating/inset-card variant sits INSET from `root`'s own outward
+    // edge by `FLOATING_GUTTER_PX`, flush against the inward edge (Attio's
+    // own peek: no gap on the side facing the table it shrinks). `width`
+    // (the prop a consumer sets, e.g. `RecordPreview`'s own 497px default)
+    // is the RESERVED FOOTPRINT -- what the table beside it actually gives
+    // up -- so the panel's own rendered card shrinks by the gutter INSIDE
+    // that footprint, rather than the footprint growing past it: reserving
+    // the panel's full width AND adding an outward gutter on top of it
+    // over-claims space the surrounding layout was never asked for --
+    // confirmed live, it pushed the whole page 8px into horizontal
+    // overflow. Docked (no gutter) keeps `width` as both the reservation
+    // and the render, as before.
+    const panelGutter = floating ? FLOATING_GUTTER_PX : 0;
     const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
+    const panelMaxStyle = panelGutter === 0 || maxStyle == null ? maxStyle : `calc(${maxStyle} - ${panelGutter}px)`;
     const panelSizeStyle = {
+        width: width - panelGutter,
+        minWidth: min - panelGutter,
+        maxWidth: panelMaxStyle
+    };
+    const spacerSizeStyle = {
         width,
         minWidth: min,
         maxWidth: maxStyle
@@ -11240,19 +11426,14 @@ const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
         children: [
             /*#__PURE__*/ jsx(Primitive.div, {
                 className: classNames.spacer,
-                style: floating ? {
-                    width: 0
-                } : {
-                    width,
-                    minWidth: min,
-                    maxWidth: maxStyle
-                }
+                style: spacerSizeStyle
             }),
             /*#__PURE__*/ jsxs(Primitive.div, {
-                ref: panelRef,
+                ref: composedPanelRef,
                 className: classNames.panel,
                 "data-side": side,
                 "data-floating": floating ? "true" : "false",
+                "data-state": animationState,
                 style: panelSizeStyle,
                 children: [
                     /*#__PURE__*/ jsx(Primitive.div, {
@@ -11277,132 +11458,276 @@ const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
 });
 ResizablePanel.displayName = "ResizablePanel";
 
-__insertCSS(".seed-record-panel__root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--seed-color-bg-layer-default);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-record-panel__toolbar{display:flex;align-items:center;height:49px;flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-panel__toolbarSpacer{flex:1}.seed-record-panel__pager{display:flex;align-items:center;gap:6px;margin-inline-start:12px}.seed-record-panel__counter{margin-inline-start:12px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seed-record-panel__iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;cursor:pointer;transition:background-color .12s}.seed-record-panel__iconbtn:hover{background:var(--seed-color-bg-layer-fill);color:var(--seed-color-fg-neutral)}.seed-record-panel__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 2px rgba(28,40,64,.18),0 1px 3px rgba(0,0,0,.04);color:var(--seed-color-fg-neutral);font-family:inherit;cursor:pointer}.seed-record-panel__navbtn:hover:not(:disabled){background:var(--seed-color-bg-layer-fill)}.seed-record-panel__navbtn:disabled{opacity:.4;cursor:not-allowed}.seed-record-panel__header{display:flex;align-items:center;gap:8px;height:52px;flex-shrink:0;padding:0 12px}.seed-record-panel__fav{width:22px;height:22px;border-radius:4px;flex-shrink:0;object-fit:cover;background:var(--seed-color-bg-layer-fill)}.seed-record-panel__title{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-panel__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-panel__section{padding:8px 4px 0}.seed-record-panel__sectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;margin-bottom:8px}.seed-record-panel__sectionLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-panel__sectionAction{border:none;background:0 0;padding:0;font-family:inherit;font-size:10px;font-weight:400;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer}.seed-record-panel__sectionAction:hover{color:var(--seed-color-fg-neutral)}.seed-record-panel__highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seed-record-panel__highlight{display:flex;flex-direction:column;gap:6px;min-width:0}.seed-record-panel__highlightLabel{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-panel__highlightLabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-panel__highlightLabel svg{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle)}.seed-record-panel__highlightValue{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis}.seed-record-panel__activity{font-size:14px}.seed-record-panel__sections{display:flex;flex-direction:column;padding-top:8px}.seed-record-panel__sectionTrigger{display:flex;align-items:center;gap:4px;width:100%;height:20px;padding:0 8px 0 12px;border:none;background:0 0;font-family:inherit;text-align:start;cursor:pointer}.seed-record-panel__sectionTrigger[data-inert]{cursor:default}.seed-record-panel__sectionRowLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral)}.seed-record-panel__sectionRowCount{font-size:14px;color:var(--seed-color-fg-neutral-subtle)}.seed-record-panel__sectionChevron{margin-inline-start:auto;flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);transition:transform .15s ease}.seed-record-panel__sectionChevron[data-open]{transform:rotate(180deg)}.seed-record-panel__sectionContent{padding:8px 8px 8px 12px}.seed-record-panel__footer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--seed-color-stroke-neutral-muted)}");
+__insertCSS(".seed-record-preview__root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--seed-color-bg-layer-default);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-record-preview__toolbar{display:flex;align-items:center;height:49px;flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-preview__toolbarSpacer{flex:1}.seed-record-preview__pager{display:flex;align-items:center;gap:6px;margin-inline-start:12px}.seed-record-preview__counter{margin-inline-start:12px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seed-record-preview__iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;cursor:pointer;transition:background-color .12s}.seed-record-preview__iconbtn:hover{background:var(--seed-color-bg-layer-fill);color:var(--seed-color-fg-neutral)}.seed-record-preview__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 2px rgba(28,40,64,.18),0 1px 3px rgba(0,0,0,.04);color:var(--seed-color-fg-neutral);font-family:inherit;cursor:pointer}.seed-record-preview__navbtn:hover:not(:disabled){background:var(--seed-color-bg-layer-fill)}.seed-record-preview__navbtn:disabled{opacity:.4;cursor:not-allowed}.seed-record-preview__header{display:flex;align-items:center;gap:8px;height:52px;flex-shrink:0;padding:0 12px}.seed-record-preview__fav{width:22px;height:22px;border-radius:4px;flex-shrink:0;object-fit:cover;background:var(--seed-color-bg-layer-fill)}.seed-record-preview__title{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-preview__section{padding:8px 4px 0}.seed-record-preview__sectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;margin-bottom:8px}.seed-record-preview__sectionLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionAction{border:none;background:0 0;padding:0;font-family:inherit;font-size:10px;font-weight:400;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer}.seed-record-preview__sectionAction:hover{color:var(--seed-color-fg-neutral)}.seed-record-preview__highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seed-record-preview__highlight{display:flex;flex-direction:column;gap:6px;min-width:0}.seed-record-preview__highlightLabel{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightLabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__highlightLabel svg{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightValue{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis}.seed-record-preview__activity{font-size:14px}.seed-record-preview__sections{display:flex;flex-direction:column;padding-top:8px}.seed-record-preview__sectionTrigger{display:flex;align-items:center;gap:4px;width:100%;height:20px;padding:0 8px 0 12px;border:none;background:0 0;font-family:inherit;text-align:start;cursor:pointer}.seed-record-preview__sectionTrigger[data-inert]{cursor:default}.seed-record-preview__sectionRowLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral)}.seed-record-preview__sectionRowCount{font-size:14px;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionChevron{margin-inline-start:auto;flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);transition:transform .15s ease}.seed-record-preview__sectionChevron[data-open]{transform:rotate(180deg)}.seed-record-preview__sectionContent{padding:8px 8px 8px 12px}.seed-record-preview__footer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--seed-color-stroke-neutral-muted)}");
 
-const recordPanelSlotNames = [
+const recordPreviewSlotNames = [
     [
         "root",
-        "seed-record-panel__root"
+        "seed-record-preview__root"
     ],
     [
         "toolbar",
-        "seed-record-panel__toolbar"
+        "seed-record-preview__toolbar"
     ],
     [
         "toolbarSpacer",
-        "seed-record-panel__toolbarSpacer"
+        "seed-record-preview__toolbarSpacer"
     ],
     [
         "pager",
-        "seed-record-panel__pager"
+        "seed-record-preview__pager"
     ],
     [
         "counter",
-        "seed-record-panel__counter"
+        "seed-record-preview__counter"
     ],
     [
         "iconbtn",
-        "seed-record-panel__iconbtn"
+        "seed-record-preview__iconbtn"
     ],
     [
         "navbtn",
-        "seed-record-panel__navbtn"
+        "seed-record-preview__navbtn"
     ],
     [
         "header",
-        "seed-record-panel__header"
+        "seed-record-preview__header"
     ],
     [
         "fav",
-        "seed-record-panel__fav"
+        "seed-record-preview__fav"
     ],
     [
         "title",
-        "seed-record-panel__title"
+        "seed-record-preview__title"
     ],
     [
         "body",
-        "seed-record-panel__body"
+        "seed-record-preview__body"
     ],
     [
         "section",
-        "seed-record-panel__section"
+        "seed-record-preview__section"
     ],
     [
         "sectionHead",
-        "seed-record-panel__sectionHead"
+        "seed-record-preview__sectionHead"
     ],
     [
         "sectionLabel",
-        "seed-record-panel__sectionLabel"
+        "seed-record-preview__sectionLabel"
     ],
     [
         "sectionAction",
-        "seed-record-panel__sectionAction"
+        "seed-record-preview__sectionAction"
     ],
     [
         "highlights",
-        "seed-record-panel__highlights"
+        "seed-record-preview__highlights"
     ],
     [
         "highlight",
-        "seed-record-panel__highlight"
+        "seed-record-preview__highlight"
     ],
     [
         "highlightLabel",
-        "seed-record-panel__highlightLabel"
+        "seed-record-preview__highlightLabel"
     ],
     [
         "highlightValue",
-        "seed-record-panel__highlightValue"
+        "seed-record-preview__highlightValue"
     ],
     [
         "activity",
-        "seed-record-panel__activity"
+        "seed-record-preview__activity"
     ],
     [
         "sections",
-        "seed-record-panel__sections"
+        "seed-record-preview__sections"
     ],
     [
         "sectionTrigger",
-        "seed-record-panel__sectionTrigger"
+        "seed-record-preview__sectionTrigger"
     ],
     [
         "sectionRowLabel",
-        "seed-record-panel__sectionRowLabel"
+        "seed-record-preview__sectionRowLabel"
     ],
     [
         "sectionRowCount",
-        "seed-record-panel__sectionRowCount"
+        "seed-record-preview__sectionRowCount"
     ],
     [
         "sectionChevron",
-        "seed-record-panel__sectionChevron"
+        "seed-record-preview__sectionChevron"
     ],
     [
         "sectionContent",
-        "seed-record-panel__sectionContent"
+        "seed-record-preview__sectionContent"
     ],
     [
         "footer",
-        "seed-record-panel__footer"
+        "seed-record-preview__footer"
     ]
 ];
 const defaultVariant = {};
 const compoundVariants = [];
-const recordPanelVariantMap = {};
-function recordPanel(props) {
-    return Object.fromEntries(recordPanelSlotNames.map(([slot, className])=>{
+const recordPreviewVariantMap = {};
+function recordPreview(props) {
+    return Object.fromEntries(recordPreviewSlotNames.map(([slot, className])=>{
         return [
             slot,
             createClassName(className, mergeVariants(defaultVariant, props), compoundVariants)
         ];
     }));
 }
-Object.assign(recordPanel, {
-    splitVariantProps: (props)=>splitVariantProps(props, recordPanelVariantMap)
-}); // @recipe(seed): record-panel
+Object.assign(recordPreview, {
+    splitVariantProps: (props)=>splitVariantProps(props, recordPreviewVariantMap)
+}); // @recipe(seed): record-preview
+
+// This code includes portions derived from radix-ui/primitives (https://github.com/radix-ui/primitives)
+// Used under the MIT License: https://opensource.org/licenses/MIT
+function usePresence(present) {
+    const [node, setNode] = React.useState();
+    const stylesRef = React.useRef(null);
+    const prevPresentRef = React.useRef(present);
+    const prevAnimationNameRef = React.useRef("none");
+    const initialState = present ? "mounted" : "unmounted";
+    const [state, send] = useStateMachine(initialState, {
+        mounted: {
+            UNMOUNT: "unmounted",
+            ANIMATION_OUT: "unmountSuspended"
+        },
+        unmountSuspended: {
+            MOUNT: "mounted",
+            ANIMATION_END: "unmounted"
+        },
+        unmounted: {
+            MOUNT: "mounted"
+        }
+    });
+    React.useEffect(()=>{
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+    }, [
+        state
+    ]);
+    useLayoutEffect2(()=>{
+        const styles = stylesRef.current;
+        const wasPresent = prevPresentRef.current;
+        const hasPresentChanged = wasPresent !== present;
+        if (hasPresentChanged) {
+            const prevAnimationName = prevAnimationNameRef.current;
+            const currentAnimationName = getAnimationName(styles);
+            if (present) {
+                send("MOUNT");
+            } else if (currentAnimationName === "none" || styles?.display === "none") {
+                // If there is no exit animation or the element is hidden, animations won't run
+                // so we unmount instantly
+                send("UNMOUNT");
+            } else {
+                /**
+         * When `present` changes to `false`, we check changes to animation-name to
+         * determine whether an animation has started. We chose this approach (reading
+         * computed styles) because there is no `animationrun` event and `animationstart`
+         * fires after `animation-delay` has expired which would be too late.
+         */ const isAnimating = prevAnimationName !== currentAnimationName;
+                if (wasPresent && isAnimating) {
+                    send("ANIMATION_OUT");
+                } else {
+                    send("UNMOUNT");
+                }
+            }
+            prevPresentRef.current = present;
+        }
+    }, [
+        present,
+        send
+    ]);
+    useLayoutEffect2(()=>{
+        if (node) {
+            let timeoutId;
+            const ownerWindow = node.ownerDocument.defaultView ?? window;
+            /**
+       * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+       * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+       * make sure we only trigger ANIMATION_END for the currently active animation.
+       */ const handleAnimationEnd = (event)=>{
+                const currentAnimationName = getAnimationName(stylesRef.current);
+                const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+                if (event.target === node && isCurrentAnimation) {
+                    // With React 18 concurrency this update is applied a frame after the
+                    // animation ends, creating a flash of visible content. By setting the
+                    // animation fill mode to "forwards", we force the node to keep the
+                    // styles of the last keyframe, removing the flash.
+                    //
+                    // Previously we flushed the update via ReactDom.flushSync, but with
+                    // exit animations this resulted in the node being removed from the
+                    // DOM before the synthetic animationEnd event was dispatched, meaning
+                    // user-provided event handlers would not be called.
+                    // https://github.com/radix-ui/primitives/pull/1849
+                    send("ANIMATION_END");
+                    if (!prevPresentRef.current) {
+                        const currentFillMode = node.style.animationFillMode;
+                        node.style.animationFillMode = "forwards";
+                        // Reset the style after the node had time to unmount (for cases
+                        // where the component chooses not to unmount). Doing this any
+                        // sooner than `setTimeout` (e.g. with `requestAnimationFrame`)
+                        // still causes a flash.
+                        timeoutId = ownerWindow.setTimeout(()=>{
+                            if (node.style.animationFillMode === "forwards") {
+                                node.style.animationFillMode = currentFillMode;
+                            }
+                        });
+                    }
+                }
+            };
+            const handleAnimationStart = (event)=>{
+                if (event.target === node) {
+                    // if animation occurred, store its name as the previous animation.
+                    prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+                }
+            };
+            node.addEventListener("animationstart", handleAnimationStart);
+            node.addEventListener("animationcancel", handleAnimationEnd);
+            node.addEventListener("animationend", handleAnimationEnd);
+            return ()=>{
+                ownerWindow.clearTimeout(timeoutId);
+                node.removeEventListener("animationstart", handleAnimationStart);
+                node.removeEventListener("animationcancel", handleAnimationEnd);
+                node.removeEventListener("animationend", handleAnimationEnd);
+            };
+        } else {
+            // Transition to the unmounted state if the node is removed prematurely.
+            // We avoid doing so during cleanup as the node may change but still exist.
+            send("ANIMATION_END");
+        }
+    }, [
+        node,
+        send
+    ]);
+    return {
+        isPresent: [
+            "mounted",
+            "unmountSuspended"
+        ].includes(state),
+        ref: React.useCallback((node)=>{
+            if (node) stylesRef.current = getComputedStyle(node);
+            setNode(node ?? undefined);
+        }, [])
+    };
+}
+/* -----------------------------------------------------------------------------------------------*/ function getAnimationName(styles) {
+    return styles?.animationName || "none";
+}
+function useStateMachine(initialState, machine) {
+    return React.useReducer((state, event)=>{
+        const nextState = machine[state][event];
+        return nextState ?? state;
+    }, initialState);
+}
+const PresenceContext = /*#__PURE__*/ createContext(null);
+PresenceContext.Provider;
 
 const RESIZE_MIN_WIDTH = 360;
 const RESIZE_MAX_WIDTH = 720;
@@ -11412,12 +11737,35 @@ const RESIZE_MAX_WIDTH = 720;
  * `RecordPanel` (`product/recordpanel/`), built ON `ResizablePanel`
  * (`side="right" floating`) rather than crisp's own duplicate absolute-
  * positioning/slide-in/resize-handle implementation -- the outer shell (the
- * `@starting-style` slide-in, the floating elevation, the drag handle
+ * enter/exit keyframe animation, the floating elevation, the drag handle
  * itself) all come from that primitive; this component only renders the
  * CONTENT inside it.
- */ function RecordPanel({ open, record, onClose, className, closeLabel = "Close panel", onOpenRecord, openRecordLabel = "Open record", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", title, avatar, highlightsLabel = "Highlights", highlights, counterLabel, resizable = false, width, defaultWidth = 420, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, footer, ...rest }) {
+ *
+ * Enter/exit: closing this panel is a state change (`open` -> false) that
+ * typically clears `record` in the SAME update (see the DataTable story's
+ * own `onClose={() => setPreviewRow(null)}`), so by the time an exit
+ * animation should play, the values this component would render are
+ * already gone. `usePresence` (`@seed-design/react-presence`, the same
+ * idiom Dialog/Drawer already use for their own floating layers) keeps the
+ * tree mounted for exactly the exit animation's duration; the snapshot
+ * below keeps the LAST visible props around for that same window, since
+ * without it the panel would animate out empty.
+ */ function RecordPreview(props) {
+    const shouldRender = props.open && props.record != null;
+    const { isPresent, ref: panelElementRef } = usePresence(shouldRender);
+    const lastVisiblePropsRef = useRef(props);
+    if (shouldRender) lastVisiblePropsRef.current = props;
+    if (!isPresent) return null;
+    return /*#__PURE__*/ jsx(RecordPreviewPanel, {
+        ...shouldRender ? props : lastVisiblePropsRef.current,
+        animationState: shouldRender ? "open" : "closed",
+        panelElementRef: panelElementRef
+    });
+}
+RecordPreview.displayName = "RecordPreview";
+function RecordPreviewPanel({ open: _open, record, onClose, className, animationState, panelElementRef, closeLabel = "Close panel", onOpenRecord, openRecordLabel = "Open record", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", title, avatar, highlightsLabel = "Highlights", highlights, counterLabel, resizable = false, width, defaultWidth = 497, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, footer, ...rest }) {
     const titleId = useId();
-    const classNames = recordPanel();
+    const classNames = recordPreview();
     // Which sections (your-moon/crisp#413) are expanded -- uncontrolled and
     // independent (Attio's own Emails/Notes/Tasks open without closing one
     // another): a plain `Set`, reset whenever the record itself changes so a
@@ -11435,28 +11783,31 @@ const RESIZE_MAX_WIDTH = 720;
             else next.add(key);
             return next;
         });
-    // Close on Escape while open. Simpler than crisp's own version (crisp
-    // additionally checks `hasOpenFloatingLayer()` so an Escape meant for a
-    // nested Menu/Select/Popover doesn't also close this panel) -- crispy-seed
-    // has no equivalent floating-stack registry to read, so a consumer nesting
-    // its own floating layers inside `footer`/`sections` content should stop
-    // propagation on its own Escape handler.
+    // Close on Escape. Simpler than crisp's own version (crisp additionally
+    // checks `hasOpenFloatingLayer()` so an Escape meant for a nested Menu/
+    // Select/Popover doesn't also close this panel) -- crispy-seed has no
+    // equivalent floating-stack registry to read, so a consumer nesting its
+    // own floating layers inside `footer`/`sections` content should stop
+    // propagation on its own Escape handler. This component is only ever
+    // mounted (by `RecordPreview`, above) while genuinely open or animating
+    // out, so there's no separate `open` flag to gate on here.
     useEffect(()=>{
-        if (!open) return;
         const onKey = (event)=>{
             if (event.key === "Escape") onClose();
         };
         document.addEventListener("keydown", onKey);
         return ()=>document.removeEventListener("keydown", onKey);
     }, [
-        open,
         onClose
     ]);
-    if (!open || !record) return null;
+    // Defensive only -- `RecordPreview` never mounts this without a record.
+    if (!record) return null;
     const heading = title ?? record.name ?? "Record";
     return /*#__PURE__*/ jsx(ResizablePanel, {
         side: "right",
         floating: true,
+        animationState: animationState,
+        panelElementRef: panelElementRef,
         resizable: resizable,
         width: width,
         defaultSize: defaultWidth,
@@ -11668,6 +12019,6 @@ const RESIZE_MAX_WIDTH = 720;
         })
     });
 }
-RecordPanel.displayName = "RecordPanel";
+RecordPreviewPanel.displayName = "RecordPreviewPanel";
 
-export { DataTable, DataTableViewsControl, RecordPanel, ResizablePanel };
+export { DataTable, DataTableViewsControl, RecordPreview, ResizablePanel };