@crispy-seed/data-table 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -11296,132 +11296,132 @@ 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
 
 const RESIZE_MIN_WIDTH = 360;
 const RESIZE_MAX_WIDTH = 720;
@@ -11434,9 +11434,9 @@ const RESIZE_MAX_WIDTH = 720;
  * `@starting-style` slide-in, 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 }) {
+ */ function RecordPreview({ 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 }) {
     const titleId = React.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
@@ -11687,9 +11687,9 @@ const RESIZE_MAX_WIDTH = 720;
         })
     });
 }
-RecordPanel.displayName = "RecordPanel";
+RecordPreview.displayName = "RecordPreview";
 
 exports.DataTable = DataTable;
 exports.DataTableViewsControl = DataTableViewsControl;
-exports.RecordPanel = RecordPanel;
+exports.RecordPreview = RecordPreview;
 exports.ResizablePanel = ResizablePanel;

package/dist/index.d.ts

@@ -547,9 +547,9 @@ type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children
     handleVariant?: ResizablePanelHandleVariant;
     /**
      * Renders the drag handle. `false` gives a fixed-width, non-interactive
-     * panel (e.g. `RecordPanel`'s own `resizable={false}` default) -- not part
+     * panel (e.g. `RecordPreview`'s own `resizable={false}` default) -- not part
      * of crisp's own API, added here so a consumer built ON this primitive
-     * (like `RecordPanel`) can opt out of dragging entirely without crisp's
+     * (like `RecordPreview`) can opt out of dragging entirely without crisp's
      * duplicate resize-handle implementation. @default true
      */
     resizable?: boolean;
@@ -601,9 +601,9 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
     handleVariant?: ResizablePanelHandleVariant;
     /**
      * Renders the drag handle. `false` gives a fixed-width, non-interactive
-     * panel (e.g. `RecordPanel`'s own `resizable={false}` default) -- not part
+     * panel (e.g. `RecordPreview`'s own `resizable={false}` default) -- not part
      * of crisp's own API, added here so a consumer built ON this primitive
-     * (like `RecordPanel`) can opt out of dragging entirely without crisp's
+     * (like `RecordPreview`) can opt out of dragging entirely without crisp's
      * duplicate resize-handle implementation. @default true
      */
     resizable?: boolean;
@@ -621,7 +621,7 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
  *  Attio's own peek panel lays its own out (your-moon/crisp#448, measured
  *  live): a 2-column grid, no card chrome, a muted label row with a
  *  trailing icon, a filled-colour value below it. */
-type RecordPanelHighlight = {
+type RecordPreviewHighlight = {
     key: string;
     label: string;
     value: react.ReactNode;
@@ -634,7 +634,7 @@ type RecordPanelHighlight = {
  *  into the consumer's own content when clicked. Omitting `content` renders
  *  the row but not as a button, matching the live DOM measured on an empty
  *  section: no chevron, no click handler, nothing to expand into yet. */
-type RecordPanelSection = {
+type RecordPreviewSection = {
     key: string;
     label: string;
     count: number;
@@ -646,11 +646,11 @@ type RecordPanelSection = {
  *  (which reads `Row` from `product/recordpage/column`), this port has no
  *  such type to depend on -- crispy-seed has no RecordPage -- so this stays
  *  a minimal, consumer-extendable shape. */
-type RecordPanelRecord = {
+type RecordPreviewRecord = {
     name?: string;
     [key: string]: unknown;
 };
-type RecordPanelProps = 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;
@@ -693,11 +693,11 @@ type RecordPanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" |
     avatar?: string;
     /** The record to show; renders nothing when `open` is false or `record`
      *  is null. */
-    record: RecordPanelRecord | null;
+    record: RecordPreviewRecord | null;
     /** Heading above the highlight cards (default "Highlights"). Omit the
      *  whole section by omitting `highlights`. */
     highlightsLabel?: react.ReactNode;
-    highlights?: RecordPanelHighlight[];
+    highlights?: RecordPreviewHighlight[];
     /** Heading above the activity feed (default "Activity"). */
     activityLabel?: react.ReactNode;
     viewAllActivityLabel?: react.ReactNode;
@@ -705,7 +705,7 @@ type RecordPanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" |
     activity?: react.ReactNode;
     /** Collapsed sections below Activity (your-moon/crisp#413). Omit for no
      *  sections at all. */
-    sections?: RecordPanelSection[];
+    sections?: RecordPreviewSection[];
     /** Rendered below the panel's content, e.g. an Edit button. */
     footer?: react.ReactNode;
     className?: string;
@@ -720,10 +720,10 @@ type RecordPanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" |
  * itself) all come from that primitive; this component only renders the
  * CONTENT inside it.
  */
-declare function RecordPanel({ 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 }: RecordPanelProps): react_jsx_runtime.JSX.Element | null;
-declare namespace RecordPanel {
+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 namespace RecordPreview {
     var displayName: string;
 }
 
-export { DataTable, DataTableViewsControl, RecordPanel, ResizablePanel };
-export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPanelHighlight, RecordPanelProps, RecordPanelRecord, RecordPanelSection, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };
+export { DataTable, DataTableViewsControl, RecordPreview, ResizablePanel };
+export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPreviewHighlight, RecordPreviewProps, RecordPreviewRecord, RecordPreviewSection, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };

package/dist/index.js

@@ -11277,132 +11277,132 @@ 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
 
 const RESIZE_MIN_WIDTH = 360;
 const RESIZE_MAX_WIDTH = 720;
@@ -11415,9 +11415,9 @@ const RESIZE_MAX_WIDTH = 720;
  * `@starting-style` slide-in, 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 }) {
+ */ function RecordPreview({ 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 }) {
     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
@@ -11668,6 +11668,6 @@ const RESIZE_MAX_WIDTH = 720;
         })
     });
 }
-RecordPanel.displayName = "RecordPanel";
+RecordPreview.displayName = "RecordPreview";
 
-export { DataTable, DataTableViewsControl, RecordPanel, ResizablePanel };
+export { DataTable, DataTableViewsControl, RecordPreview, ResizablePanel };

package/dist/{record-panel-recipe.css → record-preview-recipe.css}

@@ -1,4 +1,4 @@
-.seed-record-panel__root {
+.seed-record-preview__root {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -6,7 +6,7 @@
     background: var(--seed-color-bg-layer-default);
     font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
-.seed-record-panel__toolbar {
+.seed-record-preview__toolbar {
     display: flex;
     align-items: center;
     height: 49px;
@@ -14,16 +14,16 @@
     padding: 8px 10px;
     border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
 }
-.seed-record-panel__toolbarSpacer {
+.seed-record-preview__toolbarSpacer {
     flex: 1;
 }
-.seed-record-panel__pager {
+.seed-record-preview__pager {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-inline-start: 12px;
 }
-.seed-record-panel__counter {
+.seed-record-preview__counter {
     margin-inline-start: 12px;
     font-size: 12px;
     font-weight: 500;
@@ -32,7 +32,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.seed-record-panel__iconbtn {
+.seed-record-preview__iconbtn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -48,11 +48,11 @@
     cursor: pointer;
     transition: background-color .12s;
 }
-.seed-record-panel__iconbtn:hover {
+.seed-record-preview__iconbtn:hover {
     background: var(--seed-color-bg-layer-fill);
     color: var(--seed-color-fg-neutral);
 }
-.seed-record-panel__navbtn {
+.seed-record-preview__navbtn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -68,14 +68,14 @@
     font-family: inherit;
     cursor: pointer;
 }
-.seed-record-panel__navbtn:hover:not(:disabled) {
+.seed-record-preview__navbtn:hover:not(:disabled) {
     background: var(--seed-color-bg-layer-fill);
 }
-.seed-record-panel__navbtn:disabled {
+.seed-record-preview__navbtn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
 }
-.seed-record-panel__header {
+.seed-record-preview__header {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -83,7 +83,7 @@
     flex-shrink: 0;
     padding: 0 12px;
 }
-.seed-record-panel__fav {
+.seed-record-preview__fav {
     width: 22px;
     height: 22px;
     border-radius: 4px;
@@ -91,7 +91,7 @@
     object-fit: cover;
     background: var(--seed-color-bg-layer-fill);
 }
-.seed-record-panel__title {
+.seed-record-preview__title {
     flex: 1;
     min-width: 0;
     font-size: 16px;
@@ -102,16 +102,16 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.seed-record-panel__body {
+.seed-record-preview__body {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
     padding: 8px 12px;
 }
-.seed-record-panel__section {
+.seed-record-preview__section {
     padding: 8px 4px 0;
 }
-.seed-record-panel__sectionHead {
+.seed-record-preview__sectionHead {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -119,12 +119,12 @@
     height: 20px;
     margin-bottom: 8px;
 }
-.seed-record-panel__sectionLabel {
+.seed-record-preview__sectionLabel {
     font-size: 14px;
     font-weight: 500;
     color: var(--seed-color-fg-neutral-subtle);
 }
-.seed-record-panel__sectionAction {
+.seed-record-preview__sectionAction {
     border: none;
     background: none;
     padding: 0;
@@ -134,21 +134,21 @@
     color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
     cursor: pointer;
 }
-.seed-record-panel__sectionAction:hover {
+.seed-record-preview__sectionAction:hover {
     color: var(--seed-color-fg-neutral);
 }
-.seed-record-panel__highlights {
+.seed-record-preview__highlights {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
 }
-.seed-record-panel__highlight {
+.seed-record-preview__highlight {
     display: flex;
     flex-direction: column;
     gap: 6px;
     min-width: 0;
 }
-.seed-record-panel__highlightLabel {
+.seed-record-preview__highlightLabel {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -156,31 +156,31 @@
     font-weight: 500;
     color: var(--seed-color-fg-neutral-subtle);
 }
-.seed-record-panel__highlightLabel span {
+.seed-record-preview__highlightLabel span {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.seed-record-panel__highlightLabel svg {
+.seed-record-preview__highlightLabel svg {
     flex-shrink: 0;
     color: var(--seed-color-fg-neutral-subtle);
 }
-.seed-record-panel__highlightValue {
+.seed-record-preview__highlightValue {
     font-size: 14px;
     font-weight: 500;
     color: var(--seed-color-fg-neutral);
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.seed-record-panel__activity {
+.seed-record-preview__activity {
     font-size: 14px;
 }
-.seed-record-panel__sections {
+.seed-record-preview__sections {
     display: flex;
     flex-direction: column;
     padding-top: 8px;
 }
-.seed-record-panel__sectionTrigger {
+.seed-record-preview__sectionTrigger {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -193,31 +193,31 @@
     text-align: start;
     cursor: pointer;
 }
-.seed-record-panel__sectionTrigger[data-inert] {
+.seed-record-preview__sectionTrigger[data-inert] {
     cursor: default;
 }
-.seed-record-panel__sectionRowLabel {
+.seed-record-preview__sectionRowLabel {
     font-size: 14px;
     font-weight: 500;
     color: var(--seed-color-fg-neutral);
 }
-.seed-record-panel__sectionRowCount {
+.seed-record-preview__sectionRowCount {
     font-size: 14px;
     color: var(--seed-color-fg-neutral-subtle);
 }
-.seed-record-panel__sectionChevron {
+.seed-record-preview__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] {
+.seed-record-preview__sectionChevron[data-open] {
     transform: rotate(180deg);
 }
-.seed-record-panel__sectionContent {
+.seed-record-preview__sectionContent {
     padding: 8px 8px 8px 12px;
 }
-.seed-record-panel__footer {
+.seed-record-preview__footer {
     flex-shrink: 0;
     display: flex;
     align-items: center;

package/dist/{record-panel-recipe.layered.css → record-preview-recipe.layered.css}

@@ -1,5 +1,5 @@
 @layer seed-components {
-  .seed-record-panel__root {
+  .seed-record-preview__root {
     background: var(--seed-color-bg-layer-default);
     flex-direction: column;
     height: 100%;
@@ -8,7 +8,7 @@
     overflow: hidden;
   }
 
-  .seed-record-panel__toolbar {
+  .seed-record-preview__toolbar {
     border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
     flex-shrink: 0;
     align-items: center;
@@ -17,18 +17,18 @@
     display: flex;
   }
 
-  .seed-record-panel__toolbarSpacer {
+  .seed-record-preview__toolbarSpacer {
     flex: 1;
   }
 
-  .seed-record-panel__pager {
+  .seed-record-preview__pager {
     align-items: center;
     gap: 6px;
     margin-inline-start: 12px;
     display: flex;
   }
 
-  .seed-record-panel__counter {
+  .seed-record-preview__counter {
     color: var(--seed-color-fg-neutral-subtle);
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -38,7 +38,7 @@
     overflow: hidden;
   }
 
-  .seed-record-panel__iconbtn {
+  .seed-record-preview__iconbtn {
     width: 28px;
     height: 28px;
     color: var(--seed-color-fg-neutral-subtle);
@@ -55,12 +55,12 @@
     display: inline-flex;
   }
 
-  .seed-record-panel__iconbtn:hover {
+  .seed-record-preview__iconbtn:hover {
     background: var(--seed-color-bg-layer-fill);
     color: var(--seed-color-fg-neutral);
   }
 
-  .seed-record-panel__navbtn {
+  .seed-record-preview__navbtn {
     background: var(--seed-color-bg-layer-default);
     width: 28px;
     height: 28px;
@@ -77,16 +77,16 @@
     box-shadow: inset 0 0 0 1px #0000000f, 0 0 2px #1c28402e, 0 1px 3px #0000000a;
   }
 
-  .seed-record-panel__navbtn:hover:not(:disabled) {
+  .seed-record-preview__navbtn:hover:not(:disabled) {
     background: var(--seed-color-bg-layer-fill);
   }
 
-  .seed-record-panel__navbtn:disabled {
+  .seed-record-preview__navbtn:disabled {
     opacity: .4;
     cursor: not-allowed;
   }
 
-  .seed-record-panel__header {
+  .seed-record-preview__header {
     flex-shrink: 0;
     align-items: center;
     gap: 8px;
@@ -95,7 +95,7 @@
     display: flex;
   }
 
-  .seed-record-panel__fav {
+  .seed-record-preview__fav {
     object-fit: cover;
     background: var(--seed-color-bg-layer-fill);
     border-radius: 4px;
@@ -104,7 +104,7 @@
     height: 22px;
   }
 
-  .seed-record-panel__title {
+  .seed-record-preview__title {
     letter-spacing: -.2px;
     min-width: 0;
     color: var(--seed-color-fg-neutral);
@@ -116,18 +116,18 @@
     overflow: hidden;
   }
 
-  .seed-record-panel__body {
+  .seed-record-preview__body {
     flex: 1;
     min-height: 0;
     padding: 8px 12px;
     overflow-y: auto;
   }
 
-  .seed-record-panel__section {
+  .seed-record-preview__section {
     padding: 8px 4px 0;
   }
 
-  .seed-record-panel__sectionHead {
+  .seed-record-preview__sectionHead {
     justify-content: space-between;
     align-items: center;
     gap: 8px;
@@ -136,13 +136,13 @@
     display: flex;
   }
 
-  .seed-record-panel__sectionLabel {
+  .seed-record-preview__sectionLabel {
     color: var(--seed-color-fg-neutral-subtle);
     font-size: 14px;
     font-weight: 500;
   }
 
-  .seed-record-panel__sectionAction {
+  .seed-record-preview__sectionAction {
     color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
     cursor: pointer;
     background: none;
@@ -153,24 +153,24 @@
     font-weight: 400;
   }
 
-  .seed-record-panel__sectionAction:hover {
+  .seed-record-preview__sectionAction:hover {
     color: var(--seed-color-fg-neutral);
   }
 
-  .seed-record-panel__highlights {
+  .seed-record-preview__highlights {
     grid-template-columns: 1fr 1fr;
     gap: 8px;
     display: grid;
   }
 
-  .seed-record-panel__highlight {
+  .seed-record-preview__highlight {
     flex-direction: column;
     gap: 6px;
     min-width: 0;
     display: flex;
   }
 
-  .seed-record-panel__highlightLabel {
+  .seed-record-preview__highlightLabel {
     color: var(--seed-color-fg-neutral-subtle);
     align-items: center;
     gap: 4px;
@@ -179,18 +179,18 @@
     display: flex;
   }
 
-  .seed-record-panel__highlightLabel span {
+  .seed-record-preview__highlightLabel span {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
 
-  .seed-record-panel__highlightLabel svg {
+  .seed-record-preview__highlightLabel svg {
     color: var(--seed-color-fg-neutral-subtle);
     flex-shrink: 0;
   }
 
-  .seed-record-panel__highlightValue {
+  .seed-record-preview__highlightValue {
     color: var(--seed-color-fg-neutral);
     text-overflow: ellipsis;
     font-size: 14px;
@@ -198,17 +198,17 @@
     overflow: hidden;
   }
 
-  .seed-record-panel__activity {
+  .seed-record-preview__activity {
     font-size: 14px;
   }
 
-  .seed-record-panel__sections {
+  .seed-record-preview__sections {
     flex-direction: column;
     padding-top: 8px;
     display: flex;
   }
 
-  .seed-record-panel__sectionTrigger {
+  .seed-record-preview__sectionTrigger {
     text-align: start;
     cursor: pointer;
     background: none;
@@ -222,37 +222,37 @@
     display: flex;
   }
 
-  .seed-record-panel__sectionTrigger[data-inert] {
+  .seed-record-preview__sectionTrigger[data-inert] {
     cursor: default;
   }
 
-  .seed-record-panel__sectionRowLabel {
+  .seed-record-preview__sectionRowLabel {
     color: var(--seed-color-fg-neutral);
     font-size: 14px;
     font-weight: 500;
   }
 
-  .seed-record-panel__sectionRowCount {
+  .seed-record-preview__sectionRowCount {
     color: var(--seed-color-fg-neutral-subtle);
     font-size: 14px;
   }
 
-  .seed-record-panel__sectionChevron {
+  .seed-record-preview__sectionChevron {
     color: var(--seed-color-fg-neutral-subtle);
     flex-shrink: 0;
     margin-inline-start: auto;
     transition: transform .15s;
   }
 
-  .seed-record-panel__sectionChevron[data-open] {
+  .seed-record-preview__sectionChevron[data-open] {
     transform: rotate(180deg);
   }
 
-  .seed-record-panel__sectionContent {
+  .seed-record-preview__sectionContent {
     padding: 8px 8px 8px 12px;
   }
 
-  .seed-record-panel__footer {
+  .seed-record-preview__footer {
     border-top: 1px solid var(--seed-color-stroke-neutral-muted);
     flex-shrink: 0;
     align-items: center;

package/dist/styles.css

@@ -10023,7 +10023,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   --seed-prefix-icon-size: 18px;
 }
 
-.seed-record-panel__root {
+.seed-record-preview__root {
   background: var(--seed-color-bg-layer-default);
   flex-direction: column;
   height: 100%;
@@ -10032,7 +10032,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   overflow: hidden;
 }
 
-.seed-record-panel__toolbar {
+.seed-record-preview__toolbar {
   border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
   flex-shrink: 0;
   align-items: center;
@@ -10041,18 +10041,18 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__toolbarSpacer {
+.seed-record-preview__toolbarSpacer {
   flex: 1;
 }
 
-.seed-record-panel__pager {
+.seed-record-preview__pager {
   align-items: center;
   gap: 6px;
   margin-inline-start: 12px;
   display: flex;
 }
 
-.seed-record-panel__counter {
+.seed-record-preview__counter {
   color: var(--seed-color-fg-neutral-subtle);
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -10062,7 +10062,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   overflow: hidden;
 }
 
-.seed-record-panel__iconbtn {
+.seed-record-preview__iconbtn {
   width: 28px;
   height: 28px;
   color: var(--seed-color-fg-neutral-subtle);
@@ -10079,12 +10079,12 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: inline-flex;
 }
 
-.seed-record-panel__iconbtn:hover {
+.seed-record-preview__iconbtn:hover {
   background: var(--seed-color-bg-layer-fill);
   color: var(--seed-color-fg-neutral);
 }
 
-.seed-record-panel__navbtn {
+.seed-record-preview__navbtn {
   background: var(--seed-color-bg-layer-default);
   width: 28px;
   height: 28px;
@@ -10101,16 +10101,16 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   box-shadow: inset 0 0 0 1px #0000000f, 0 0 2px #1c28402e, 0 1px 3px #0000000a;
 }
 
-.seed-record-panel__navbtn:hover:not(:disabled) {
+.seed-record-preview__navbtn:hover:not(:disabled) {
   background: var(--seed-color-bg-layer-fill);
 }
 
-.seed-record-panel__navbtn:disabled {
+.seed-record-preview__navbtn:disabled {
   opacity: .4;
   cursor: not-allowed;
 }
 
-.seed-record-panel__header {
+.seed-record-preview__header {
   flex-shrink: 0;
   align-items: center;
   gap: 8px;
@@ -10119,7 +10119,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__fav {
+.seed-record-preview__fav {
   object-fit: cover;
   background: var(--seed-color-bg-layer-fill);
   border-radius: 4px;
@@ -10128,7 +10128,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   height: 22px;
 }
 
-.seed-record-panel__title {
+.seed-record-preview__title {
   letter-spacing: -.2px;
   min-width: 0;
   color: var(--seed-color-fg-neutral);
@@ -10140,18 +10140,18 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   overflow: hidden;
 }
 
-.seed-record-panel__body {
+.seed-record-preview__body {
   flex: 1;
   min-height: 0;
   padding: 8px 12px;
   overflow-y: auto;
 }
 
-.seed-record-panel__section {
+.seed-record-preview__section {
   padding: 8px 4px 0;
 }
 
-.seed-record-panel__sectionHead {
+.seed-record-preview__sectionHead {
   justify-content: space-between;
   align-items: center;
   gap: 8px;
@@ -10160,13 +10160,13 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__sectionLabel {
+.seed-record-preview__sectionLabel {
   color: var(--seed-color-fg-neutral-subtle);
   font-size: 14px;
   font-weight: 500;
 }
 
-.seed-record-panel__sectionAction {
+.seed-record-preview__sectionAction {
   color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
   cursor: pointer;
   background: none;
@@ -10177,24 +10177,24 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   font-weight: 400;
 }
 
-.seed-record-panel__sectionAction:hover {
+.seed-record-preview__sectionAction:hover {
   color: var(--seed-color-fg-neutral);
 }
 
-.seed-record-panel__highlights {
+.seed-record-preview__highlights {
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   display: grid;
 }
 
-.seed-record-panel__highlight {
+.seed-record-preview__highlight {
   flex-direction: column;
   gap: 6px;
   min-width: 0;
   display: flex;
 }
 
-.seed-record-panel__highlightLabel {
+.seed-record-preview__highlightLabel {
   color: var(--seed-color-fg-neutral-subtle);
   align-items: center;
   gap: 4px;
@@ -10203,18 +10203,18 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__highlightLabel span {
+.seed-record-preview__highlightLabel span {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
-.seed-record-panel__highlightLabel svg {
+.seed-record-preview__highlightLabel svg {
   color: var(--seed-color-fg-neutral-subtle);
   flex-shrink: 0;
 }
 
-.seed-record-panel__highlightValue {
+.seed-record-preview__highlightValue {
   color: var(--seed-color-fg-neutral);
   text-overflow: ellipsis;
   font-size: 14px;
@@ -10222,17 +10222,17 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   overflow: hidden;
 }
 
-.seed-record-panel__activity {
+.seed-record-preview__activity {
   font-size: 14px;
 }
 
-.seed-record-panel__sections {
+.seed-record-preview__sections {
   flex-direction: column;
   padding-top: 8px;
   display: flex;
 }
 
-.seed-record-panel__sectionTrigger {
+.seed-record-preview__sectionTrigger {
   text-align: start;
   cursor: pointer;
   background: none;
@@ -10246,37 +10246,37 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__sectionTrigger[data-inert] {
+.seed-record-preview__sectionTrigger[data-inert] {
   cursor: default;
 }
 
-.seed-record-panel__sectionRowLabel {
+.seed-record-preview__sectionRowLabel {
   color: var(--seed-color-fg-neutral);
   font-size: 14px;
   font-weight: 500;
 }
 
-.seed-record-panel__sectionRowCount {
+.seed-record-preview__sectionRowCount {
   color: var(--seed-color-fg-neutral-subtle);
   font-size: 14px;
 }
 
-.seed-record-panel__sectionChevron {
+.seed-record-preview__sectionChevron {
   color: var(--seed-color-fg-neutral-subtle);
   flex-shrink: 0;
   margin-inline-start: auto;
   transition: transform .15s;
 }
 
-.seed-record-panel__sectionChevron[data-open] {
+.seed-record-preview__sectionChevron[data-open] {
   transform: rotate(180deg);
 }
 
-.seed-record-panel__sectionContent {
+.seed-record-preview__sectionContent {
   padding: 8px 8px 8px 12px;
 }
 
-.seed-record-panel__footer {
+.seed-record-preview__footer {
   border-top: 1px solid var(--seed-color-stroke-neutral-muted);
   flex-shrink: 0;
   align-items: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.6.0",
-  "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPanel — one install, one CSS import.",
+  "version": "0.7.0",
+  "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -23,8 +23,8 @@
     "./data-table-recipe.layered.css": "./dist/data-table-recipe.layered.css",
     "./resizable-panel-recipe.css": "./dist/resizable-panel-recipe.css",
     "./resizable-panel-recipe.layered.css": "./dist/resizable-panel-recipe.layered.css",
-    "./record-panel-recipe.css": "./dist/record-panel-recipe.css",
-    "./record-panel-recipe.layered.css": "./dist/record-panel-recipe.layered.css",
+    "./record-preview-recipe.css": "./dist/record-preview-recipe.css",
+    "./record-preview-recipe.layered.css": "./dist/record-preview-recipe.layered.css",
     "./package.json": "./package.json"
   },
   "main": "./dist/index.cjs",