@crispy-seed/data-table 0.7.0 → 0.9.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare interface DataTableVariant {
@@ -57,15 +57,18 @@ interface ToolbarFilter {
 }
 
 /**
- * The six aggregations DATATABLE-ATTIO-SPEC.md's ColumnCalc footer offers (crisp's own
- * `ColumnCalc` ships nine -- adding percent-empty/-filled and a "none" clearing op --
- * but this table's contract is exactly the six named in the spec doc: count /
- * countFilled / sum / average / min / max). `count`/`countFilled` apply to every
- * column; `sum`/`average`/`min`/`max` only make sense on a numeric column, so the
- * styled layer only offers those four when the column's cell type is number/currency
- * (see DataTable.tsx's `ColumnCalcMenu`).
+ * Live-review fix (Attio/GRC parity): the ColumnCalc footer's own aggregation set --
+ * three apply to every column, six more to numeric ones, one more to non-numeric ones.
+ * Distinct from crisp's own `ColumnCalc` (`countEmpty`/`countFilled`/`percentEmpty`/
+ * `percentFilled` + sum/average/min/max + "none") -- crisp's own set was read for the
+ * MENU/trigger interaction (`column-calc.tsx`'s own doc comment), not copied op-for-op;
+ * this table's contract is the ten named directly in DATATABLE-ATTIO-SPEC.md/the GRC
+ * feature contract: count / empty / not-empty everywhere, sum / average / median / min
+ * / max / range on a numeric column, count-unique on a non-numeric one. The styled
+ * layer picks which extra set to offer off the column's own cell type (`column-calc.tsx`'s
+ * `ColumnCalcCell`).
  */
-type DataTableCalcOp = "count" | "countFilled" | "sum" | "average" | "min" | "max";
+type DataTableCalcOp = "count" | "empty" | "notEmpty" | "sum" | "average" | "median" | "min" | "max" | "range" | "countUnique";
 
 /** Everything a saved view actually captures -- deliberately the same five controlled
  *  props `useDataTableColumns` + the toolbar sort/filter hooks already expose, so
@@ -135,7 +138,7 @@ interface DataTableColumn<TRow> {
      */
     key: string;
     /** 헤더 셀에 표시할 내용입니다. */
-    header: react.ReactNode;
+    header: React.ReactNode;
     /** 이 열을 클릭해 정렬할 수 있는지 여부입니다. */
     sortable?: boolean;
     /**
@@ -146,7 +149,7 @@ interface DataTableColumn<TRow> {
     /** 셀 내용을 직접 그립니다. 지정하면 `type`의 기본 렌더러 대신 이것을 사용합니다.
      *  `editable`이어도 편집/always-live 상태에는 영향이 없습니다 -- 이 필드는 REST
      *  상태의 표시만 바꿉니다. */
-    render?: (row: TRow) => react.ReactNode;
+    render?: (row: TRow) => React.ReactNode;
     /** `type: "currency"`의 통화 기호입니다. @default "$" */
     symbol?: string;
     /** `type: "rating"`의 별 개수입니다. @default 5 */
@@ -269,7 +272,7 @@ interface DataTableColumn<TRow> {
 }
 interface DataTableProps<TRow extends {
     id: string;
-}> extends DataTableVariantProps, Omit<PrimitiveProps, "asChild">, Omit<react.HTMLAttributes<HTMLDivElement>, "children"> {
+}> extends DataTableVariantProps, Omit<PrimitiveProps, "asChild">, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     columns: DataTableColumn<TRow>[];
     data: TRow[];
     /** `type`이 있는 열의 number/currency/date/datetime 표시에 쓰는 로캘입니다. @default "en-US" */
@@ -278,17 +281,18 @@ interface DataTableProps<TRow extends {
     sort?: DataTableSortState;
     /** 비제어 방식으로 사용할 때의 초기 정렬 상태입니다. */
     defaultSort?: DataTableSortState;
-    /** 정렬 가능한 열을 클릭해 정렬 상태가 바뀔 때 호출됩니다. */
-    onSortChange?: (sort: DataTableSortState) => void;
+    /** 정렬 가능한 열을 클릭해 정렬 상태가 바뀔 때, 그리고 열 메뉴의 "Clear sort"로
+     *  정렬이 지워질 때 호출됩니다 -- 지워진 상태는 `undefined`로 전달됩니다. */
+    onSortChange?: (sort: DataTableSortState | undefined) => void;
     /**
      * 정렬 아이콘입니다. `idle`은 정렬 가능하지만 아직 정렬되지 않은 열의 헤더에
      * (호버 시에만 드러나는) 기본 표시로 쓰이고, `asc`/`desc`는 실제로 정렬된 열에
      * 씁니다. 생략하면 karrot 아이콘 셋의 chevron을 씁니다.
      */
     sortIcon?: {
-        idle?: react.ReactNode;
-        asc?: react.ReactNode;
-        desc?: react.ReactNode;
+        idle?: React.ReactNode;
+        asc?: React.ReactNode;
+        desc?: React.ReactNode;
     };
     /** 왼쪽에 40px짜리 체크박스 선택 열을 추가합니다. */
     selectable?: boolean;
@@ -304,10 +308,10 @@ interface DataTableProps<TRow extends {
     getRowSelectionLabel?: (row: TRow) => string;
     /** 선택 체크박스가 checked일 때 표시할 아이콘입니다. 생략하면 karrot의 체크 아이콘을
      *  씁니다. */
-    selectionCheckedIcon?: react.ReactNode;
+    selectionCheckedIcon?: React.ReactNode;
     /** 전체 선택 체크박스가 일부만 선택됐을 때(indeterminate) 표시할 아이콘입니다.
      *  생략하면 karrot의 minus 아이콘을 씁니다. */
-    selectionIndeterminateIcon?: react.ReactNode;
+    selectionIndeterminateIcon?: React.ReactNode;
     /** 제어할 검색어입니다. */
     query?: string;
     /** 비제어 방식으로 사용할 때의 초기 검색어입니다. */
@@ -344,7 +348,7 @@ interface DataTableProps<TRow extends {
      * 행 개수 텍스트를 직접 만듭니다. 생략하면 crisp의 기본 형식을 씁니다: 검색/필터로
      * 줄지 않았으면 "N rows"(단수는 "row"), 줄었으면 "N of M".
      */
-    countLabel?: (shown: number, total: number) => react.ReactNode;
+    countLabel?: (shown: number, total: number) => React.ReactNode;
     /**
      * 툴바 오른쪽, 행 개수 옆에 렌더링할 커스텀 액션입니다(예: Download/내보내기 버튼).
      * 이전에는 이 자리에 넣을 공식 prop이 없어서 소비자가 `.seed-data-table__toolbar`
@@ -353,7 +357,7 @@ interface DataTableProps<TRow extends {
      * 렌더링됩니다). 검색/정렬/필터보다 뒤, 카운트보다 앞(같은 그룹 안에서 카운트
      * 왼쪽)에 옵니다.
      */
-    toolbarActions?: react.ReactNode;
+    toolbarActions?: React.ReactNode;
     /** 헤더의 열별 메뉴(이름 변경 / 숨기기 / 왼쪽·오른쪽으로 이동)를 켭니다, seed `Menu`. */
     columnMenu?: boolean;
     /** 헤더를 드래그해 열 순서를 바꿀 수 있게 합니다. @default true */
@@ -427,19 +431,19 @@ interface DataTableProps<TRow extends {
     /** 주어지면 맨 아래에 crisp가 측정한 "+ New" 추가 행 버튼을 렌더링합니다. */
     onAddRow?: () => void;
     /** 추가 행 버튼의 라벨입니다. @default "New record" */
-    addRowLabel?: react.ReactNode;
+    addRowLabel?: React.ReactNode;
     /** 전체 본문을 이 상태로 대체합니다(로딩 아이콘 + `loadingLabel`) -- 필터/정렬
      *  재조회나 최초 로드처럼 행 전체가 아직 없을 때를 위한 것입니다. `error`/빈 상태
      *  보다 우선합니다. 인라인 스크롤 로딩 표시기(`onLoadMore`)와는 별개입니다. */
     loading?: boolean;
     /** `loading`일 때 스피너 옆에 보이는 텍스트입니다. @default "Loading..." */
-    loadingLabel?: react.ReactNode;
+    loadingLabel?: React.ReactNode;
     /** 주어지면 행 대신 이 내용을 본문에 렌더링합니다(crisp의 `.crisp-datatable-empty`
      *  칸 재사용). `loading`보다는 아래, 빈 상태보다는 위 우선순위입니다. */
-    error?: react.ReactNode;
+    error?: React.ReactNode;
     /** 검색/필터를 거치고도 행이 하나도 없을 때 본문에 렌더링할 내용입니다.
      *  @default "No results." */
-    empty?: react.ReactNode;
+    empty?: React.ReactNode;
     /**
      * Attio 스타일 무한 스크롤: 스크롤 컨테이너 바닥 근처의 sentinel 행이 뷰에 들어오면
      * 호출됩니다. `Promise`를 반환하면 그동안 자동으로 `loadingMore`가 켜집니다(직접
@@ -463,7 +467,7 @@ interface DataTableProps<TRow extends {
      * `style={{ height: "100%" }}` 같은 바운드를 주는 것만으로도 "전체 높이" 모드가
      * 됩니다 -- 새 prop 없이 기존 `style` 전달만으로 두 모드 다 지원됩니다.
      */
-    scrollProps?: Omit<react.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
+    scrollProps?: Omit<React.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
 }
 /**
  * @see https://seed-design.io/react/components/data-table
@@ -471,8 +475,8 @@ interface DataTableProps<TRow extends {
 declare const DataTable: <TRow extends {
     id: string;
 }>(props: DataTableProps<TRow> & {
-    ref?: react.ForwardedRef<HTMLDivElement>;
-}) => react.ReactElement;
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
 
 interface DataTableViewsControlProps extends UseDataTableViewsProps {
     /** The trigger's label when no view is active. @default "Views" */
@@ -482,7 +486,7 @@ interface DataTableViewsControlProps extends UseDataTableViewsProps {
      *  meaningful "no view" state to switch back to. */
     showClearRow?: boolean;
     /** The clear row's own label, when `showClearRow` is on. @default "label" */
-    clearLabel?: react.ReactNode;
+    clearLabel?: React.ReactNode;
     /**
      * Reads the table's CURRENT column order/visibility/widths/pins + toolbar sort/
      * filter conditions -- called when the user picks "Save as new view" or "Update
@@ -518,7 +522,7 @@ declare namespace DataTableViewsControl {
 type ResizablePanelSide = "left" | "right";
 
 type ResizablePanelHandleVariant = "panel" | "column";
-type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
+type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
     /** Which edge of its container the panel is anchored to. @default "left" */
     side?: ResizablePanelSide;
     /** Controlled width, in px. */
@@ -538,11 +542,42 @@ type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children
      */
     max?: number | string;
     /**
-     * Layout model: "docked" (default) reserves flow width and sits in-line
-     * with a hairline border; "floating" takes the panel out of flow
-     * (`position: fixed`, an 8px gutter, r10, the measured floating shadow).
+     * Layout model. "docked" (default) is IN-FLOW: `spacer` reserves the
+     * panel's real width, shrinking a `flex: 1` sibling beside it (e.g. a
+     * table), flush with a hairline border -- unchanged since this
+     * primitive's own first version.
+     *
+     * "floating" is a true OVERLAY, not a bigger gutter on the docked look:
+     * this component's own outer element takes itself OUT of flow entirely
+     * (`position: absolute; inset: 0`) and renders no `spacer` at all -- it
+     * reserves ZERO layout width, so a sibling beside it (a table) never
+     * shrinks or reflows when this opens or resizes. The panel itself is
+     * pinned to one edge of that `inset: 0` box, spans its full height, and
+     * only the corners facing INTO the container are rounded (a left-edge
+     * shadow for `side="right"`, mirrored for `side="left"`) -- this is
+     * `RecordPreview`'s own peek panel (your-moon/crisp#448 reversed a
+     * docked/reflow attempt at this exact spot: "table's action buttons
+     * moving" when the panel opened).
+     *
+     * Because the outer element is now `position: absolute`, the consumer's
+     * own immediate parent (wherever this component -- or `RecordPreview` --
+     * is rendered) MUST itself be a positioned element (typically
+     * `position: relative`) with a real height, e.g. the table region's own
+     * wrapper div. No flex-row wrapper is needed or wanted: the table can be
+     * an ordinary 100%-width block and this panel a plain sibling.
      */
     floating?: boolean;
+    /**
+     * An optional dimming backdrop behind a `floating` panel, covering the
+     * same `inset: 0` container -- OFF by default: this is a peek panel, not
+     * a modal, and Attio's own peek never dims the table it floats over.
+     * Meaningful only together with `floating`; ignored otherwise.
+     * @default false
+     */
+    backdrop?: boolean;
+    /** Fires when the optional `backdrop` is clicked. Typically wired to the
+     *  same handler as the panel's own close control. */
+    onBackdropClick?: () => void;
     /** Resize-handle geometry -- "panel" (default) or "column" (table edges). */
     handleVariant?: ResizablePanelHandleVariant;
     /**
@@ -559,20 +594,42 @@ type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children
      * `width` is uncontrolled.
      */
     storageKey?: string;
+    /**
+     * Drives the floating panel's own enter/exit keyframe animation (only
+     * meaningful together with `floating`) -- "open" plays the slide-and-fade
+     * in on mount, "closed" plays it in reverse. A consumer that keeps this
+     * component mounted through its own close transition (e.g.
+     * `@seed-design/react-presence`'s `usePresence`, the same idiom Dialog/
+     * Drawer use) flips this once `open` goes false, then unmounts once that
+     * hook reports the exit animation finished. Omit for a panel that
+     * shouldn't animate at all.
+     */
+    animationState?: "open" | "closed";
+    /**
+     * Ref to the panel element itself (not the outer root/spacer wrapper this
+     * component's own `ref` targets) -- lets a consumer's presence hook
+     * observe `animationName` changes on the SAME node that carries
+     * `data-state`/the keyframe animation above.
+     */
+    panelElementRef?: React.Ref<HTMLDivElement>;
     className?: string;
-    children?: react.ReactNode;
+    children?: React.ReactNode;
 };
 /**
- * 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.
+ * An adjustable-panel primitive with two layout models (`floating`'s own doc
+ * comment above has the full contrast). Docked: a `spacer` reserves layout
+ * width and the panel overlays exactly that reservation, so a resize drag
+ * never causes a reflow glitch on the rest of the layout. Floating: no
+ * spacer at all -- this component's own outer element becomes a
+ * `position: absolute; inset: 0` overlay reserving zero width, with the
+ * panel itself pinned to one edge and spanning the full height of that box.
+ * 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.
  */
-declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onResize"> & {
+declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onResize"> & {
     /** Which edge of its container the panel is anchored to. @default "left" */
     side?: ResizablePanelSide;
     /** Controlled width, in px. */
@@ -592,11 +649,42 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
      */
     max?: number | string;
     /**
-     * Layout model: "docked" (default) reserves flow width and sits in-line
-     * with a hairline border; "floating" takes the panel out of flow
-     * (`position: fixed`, an 8px gutter, r10, the measured floating shadow).
+     * Layout model. "docked" (default) is IN-FLOW: `spacer` reserves the
+     * panel's real width, shrinking a `flex: 1` sibling beside it (e.g. a
+     * table), flush with a hairline border -- unchanged since this
+     * primitive's own first version.
+     *
+     * "floating" is a true OVERLAY, not a bigger gutter on the docked look:
+     * this component's own outer element takes itself OUT of flow entirely
+     * (`position: absolute; inset: 0`) and renders no `spacer` at all -- it
+     * reserves ZERO layout width, so a sibling beside it (a table) never
+     * shrinks or reflows when this opens or resizes. The panel itself is
+     * pinned to one edge of that `inset: 0` box, spans its full height, and
+     * only the corners facing INTO the container are rounded (a left-edge
+     * shadow for `side="right"`, mirrored for `side="left"`) -- this is
+     * `RecordPreview`'s own peek panel (your-moon/crisp#448 reversed a
+     * docked/reflow attempt at this exact spot: "table's action buttons
+     * moving" when the panel opened).
+     *
+     * Because the outer element is now `position: absolute`, the consumer's
+     * own immediate parent (wherever this component -- or `RecordPreview` --
+     * is rendered) MUST itself be a positioned element (typically
+     * `position: relative`) with a real height, e.g. the table region's own
+     * wrapper div. No flex-row wrapper is needed or wanted: the table can be
+     * an ordinary 100%-width block and this panel a plain sibling.
      */
     floating?: boolean;
+    /**
+     * An optional dimming backdrop behind a `floating` panel, covering the
+     * same `inset: 0` container -- OFF by default: this is a peek panel, not
+     * a modal, and Attio's own peek never dims the table it floats over.
+     * Meaningful only together with `floating`; ignored otherwise.
+     * @default false
+     */
+    backdrop?: boolean;
+    /** Fires when the optional `backdrop` is clicked. Typically wired to the
+     *  same handler as the panel's own close control. */
+    onBackdropClick?: () => void;
     /** Resize-handle geometry -- "panel" (default) or "column" (table edges). */
     handleVariant?: ResizablePanelHandleVariant;
     /**
@@ -613,9 +701,27 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
      * `width` is uncontrolled.
      */
     storageKey?: string;
+    /**
+     * Drives the floating panel's own enter/exit keyframe animation (only
+     * meaningful together with `floating`) -- "open" plays the slide-and-fade
+     * in on mount, "closed" plays it in reverse. A consumer that keeps this
+     * component mounted through its own close transition (e.g.
+     * `@seed-design/react-presence`'s `usePresence`, the same idiom Dialog/
+     * Drawer use) flips this once `open` goes false, then unmounts once that
+     * hook reports the exit animation finished. Omit for a panel that
+     * shouldn't animate at all.
+     */
+    animationState?: "open" | "closed";
+    /**
+     * Ref to the panel element itself (not the outer root/spacer wrapper this
+     * component's own `ref` targets) -- lets a consumer's presence hook
+     * observe `animationName` changes on the SAME node that carries
+     * `data-state`/the keyframe animation above.
+     */
+    panelElementRef?: React.Ref<HTMLDivElement>;
     className?: string;
-    children?: react.ReactNode;
-} & react.RefAttributes<HTMLDivElement>>;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 
 /** One Highlights card -- label, value and an optional icon, laid out the way
  *  Attio's own peek panel lays its own out (your-moon/crisp#448, measured
@@ -624,8 +730,8 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
 type RecordPreviewHighlight = {
     key: string;
     label: string;
-    value: react.ReactNode;
-    icon?: react.ComponentType<{
+    value: React.ReactNode;
+    icon?: React.ComponentType<{
         size?: number;
     }>;
 };
@@ -638,7 +744,24 @@ type RecordPreviewSection = {
     key: string;
     label: string;
     count: number;
-    content?: react.ReactNode;
+    content?: React.ReactNode;
+};
+/** One tab of the panel's own mini detail view (a "tabs" capability with no
+ *  your-moon/crisp equivalent -- crisp's own peek only ever shows Highlights
+ *  + Activity + sections, never a tab bar). Built on crispy-seed's own
+ *  `Tabs` primitive (`../Tabs`, itself built on seed's `tabs` recipe/
+ *  tokens) rather than a hand-rolled tab strip, so it matches every other
+ *  tabbed surface in this package. `content` is only rendered lazily in the
+ *  sense that `Tabs.Content` already handles (hidden, not unmounted, once a
+ *  tab has been visited) -- see `Tabs.tsx`. */
+type RecordPreviewTab = {
+    key: string;
+    label: React.ReactNode;
+    content: React.ReactNode;
+    /** Rendered right after `label` inside the tab trigger, e.g. an unread
+     *  count -- purely presentational, this component attaches no meaning to
+     *  it. */
+    badge?: React.ReactNode;
 };
 /** The record this panel previews. Only `name` is read directly here --
  *  everything else the panel shows comes from `highlights`/`activity`/
@@ -650,7 +773,7 @@ type RecordPreviewRecord = {
     name?: string;
     [key: string]: unknown;
 };
-type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" | "title" | "onResize"> & {
+type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title" | "onResize"> & {
     /** Whether the panel is mounted/visible. */
     open: boolean;
     onClose: () => void;
@@ -671,7 +794,7 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
     nextRecordLabel?: string;
     /** "2 of 37 in All Companies" (your-moon/crisp#413) -- a single
      *  pre-formatted string; omit for no counter at all. */
-    counterLabel?: react.ReactNode;
+    counterLabel?: React.ReactNode;
     /**
      * Lets a person drag the panel wider or narrower from its own left edge --
      * this port reuses `ResizablePanel`'s own handle (`side="right"`, whose
@@ -687,7 +810,7 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
     minWidth?: number;
     maxWidth?: number;
     /** The panel's heading, and so its accessible name. Defaults to `record.name`. */
-    title?: react.ReactNode;
+    title?: React.ReactNode;
     /** Avatar image URL beside the title. Omit for an initials tile built from
      *  `record.name`'s first character. */
     avatar?: string;
@@ -696,18 +819,49 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
     record: RecordPreviewRecord | null;
     /** Heading above the highlight cards (default "Highlights"). Omit the
      *  whole section by omitting `highlights`. */
-    highlightsLabel?: react.ReactNode;
+    highlightsLabel?: React.ReactNode;
     highlights?: RecordPreviewHighlight[];
     /** Heading above the activity feed (default "Activity"). */
-    activityLabel?: react.ReactNode;
-    viewAllActivityLabel?: react.ReactNode;
+    activityLabel?: React.ReactNode;
+    viewAllActivityLabel?: React.ReactNode;
     onViewAllActivity?: () => void;
-    activity?: react.ReactNode;
+    activity?: React.ReactNode;
     /** Collapsed sections below Activity (your-moon/crisp#413). Omit for no
      *  sections at all. */
     sections?: RecordPreviewSection[];
+    /**
+     * A "mini detail view" -- renders a seed-idiomatic tab bar under the
+     * header instead of (or ahead of) the plain Highlights/Activity/sections
+     * layout. Omit for no tabs at all (the default; existing consumers are
+     * unaffected). When `highlights`/`activity`/`sections` are ALSO given
+     * alongside `tabs`, they're combined rather than dropped: an extra
+     * `overviewTabLabel` tab (default "Overview") is prepended, ahead of
+     * these `tabs`, containing exactly what the non-tabs layout would have
+     * rendered -- so a consumer moving to tabs doesn't have to re-author its
+     * existing overview content as a tab by hand.
+     */
+    tabs?: RecordPreviewTab[];
+    /** Controlled active tab key. Pass with `onTabChange`; omit for
+     *  uncontrolled (`defaultActiveTab`). Only meaningful with `tabs`. */
+    activeTab?: string;
+    /** Initial active tab key when uncontrolled. Defaults to the first tab
+     *  (the synthesized "Overview" tab when highlights/activity/sections are
+     *  combined in, otherwise the first entry of `tabs` itself). */
+    defaultActiveTab?: string;
+    onTabChange?: (key: string) => void;
+    /** Label for the synthesized overview tab -- see `tabs`'s own doc
+     *  comment. @default "Overview" */
+    overviewTabLabel?: React.ReactNode;
     /** Rendered below the panel's content, e.g. an Edit button. */
-    footer?: react.ReactNode;
+    footer?: React.ReactNode;
+    /**
+     * An optional dimming backdrop behind the panel -- OFF by default (this
+     * is a peek, not a modal: Attio's own peek never dims the table it
+     * floats over). Forwarded to `ResizablePanel`'s own `backdrop`; clicking
+     * it calls `onClose`, same as the panel's own close button.
+     * @default false
+     */
+    backdrop?: boolean;
     className?: string;
 };
 /**
@@ -716,14 +870,44 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
  * `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 full-height overlay, the drag handle
  * itself) all come from that primitive; this component only renders the
  * CONTENT inside it.
+ *
+ * OVERLAY, not docked: `floating` (on the `ResizablePanel` this is built on)
+ * now means a real `position: absolute` overlay that reserves ZERO layout
+ * width -- opening this panel never shrinks or reflows a table beside it
+ * (your-moon/crisp#448 reversed an earlier in-flow/docked attempt at this
+ * exact spot, reported live as "table's action buttons moving"). Because of
+ * that, THIS COMPONENT OWNS ITS OWN POSITIONING -- a consumer does not wrap
+ * it in a flex row with the table; it renders `<RecordPreview>` as an
+ * ordinary sibling of the table. The one requirement: the shared parent
+ * (the table region's own wrapper) must itself be a positioned element
+ * (typically `position: relative`) with a real height, since that's the
+ * containing block this panel's `inset: 0` resolves against. See
+ * `DataTable.stories.tsx`'s own Showcase for the pattern:
+ *
+ * ```tsx
+ * <div style={{ position: "relative", flex: 1, minHeight: 0 }}>
+ *   <DataTable style={{ width: "100%", height: "100%" }} ... />
+ *   <RecordPreview open={open} record={record} onClose={onClose} ... />
+ * </div>
+ * ```
+ *
+ * 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.
  */
-declare function RecordPreview({ open, record, onClose, className, closeLabel, onOpenRecord, openRecordLabel, onPrevious, previousRecordLabel, onNext, nextRecordLabel, title, avatar, highlightsLabel, highlights, counterLabel, resizable, width, defaultWidth, onWidthChange, minWidth, maxWidth, activityLabel, viewAllActivityLabel, onViewAllActivity, activity, sections, footer, ...rest }: RecordPreviewProps): react_jsx_runtime.JSX.Element | null;
+declare function RecordPreview(props: RecordPreviewProps): react_jsx_runtime.JSX.Element | null;
 declare namespace RecordPreview {
     var displayName: string;
 }
 
 export { DataTable, DataTableViewsControl, RecordPreview, ResizablePanel };
-export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPreviewHighlight, RecordPreviewProps, RecordPreviewRecord, RecordPreviewSection, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };
+export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPreviewHighlight, RecordPreviewProps, RecordPreviewRecord, RecordPreviewSection, RecordPreviewTab, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };