@datum-cloud/datum-ui 2.9.1 → 2.11.0

package/dist/assistant/index.mjs

@@ -1,9 +1,11 @@
 import { t as cn } from "../utils-Bu32wN-x.mjs";
+import { t as Button } from "../button-DoMqfQLu.mjs";
 import { t as Icon } from "../icon-wrapper-DKfJlJd0.mjs";
+import { t as Dialog } from "../dialog-Gu70fban.mjs";
 import { a as DropdownMenuRadioGroup, c as DropdownMenuTrigger, i as DropdownMenuLabel, o as DropdownMenuRadioItem, r as DropdownMenuContent, s as DropdownMenuSeparator, t as DropdownMenu } from "../dropdown-menu-b8zY5Cs6.mjs";
 import { t as Tooltip } from "../tooltip-DhbN1BDK.mjs";
 import { n as EASE, t as DURATION } from "../motion-DvGRWdsm.mjs";
-import { ArrowDown, ArrowRight, ArrowUp, Brain, Check, ChevronDown, Copy, Download, MessagesSquare, Mic, MicOff, PanelLeft, Plus, RotateCw, Square, Trash2 } from "lucide-react";
+import { Archive, ArchiveRestore, ArrowDown, ArrowRight, ArrowUp, Brain, Check, ChevronDown, Copy, Download, MessagesSquare, Mic, MicOff, PanelLeft, Plus, RotateCw, Square, Trash2 } from "lucide-react";
 import { Fragment, createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
@@ -842,12 +844,32 @@ function downloadChat(chat) {
 	a.click();
 	URL.revokeObjectURL(url);
 }
-function HistoryPanel({ chatList, currentChatId, onLoadChat, onDeleteChat, header }) {
+const ROW_ACTION_CLASS = "text-muted-foreground/40 shrink-0 rounded p-0.5 opacity-0 transition-colors group-hover:opacity-100";
+function HistoryPanel({ chatList, currentChatId, onLoadChat, onDeleteChat, onArchiveChat, onUnarchiveChat, confirmDelete = false, header }) {
+	const archiveEnabled = Boolean(onArchiveChat);
 	const [query, setQuery] = useState("");
+	const [showArchived, setShowArchived] = useState(false);
+	const [pendingDelete, setPendingDelete] = useState(null);
+	const inArchivedView = archiveEnabled && showArchived;
 	const filtered = useMemo(() => {
+		const inView = archiveEnabled ? chatList.filter((c) => Boolean(c.archived) === showArchived) : chatList;
 		const q = query.trim().toLowerCase();
-		return q ? chatList.filter((c) => c.title.toLowerCase().includes(q)) : chatList;
-	}, [chatList, query]);
+		return q ? inView.filter((c) => c.title.toLowerCase().includes(q)) : inView;
+	}, [
+		archiveEnabled,
+		chatList,
+		query,
+		showArchived
+	]);
+	const emptyText = inArchivedView ? query ? "No matching archived chats" : "No archived chats" : query ? "No matching chats" : "No saved chats";
+	const handleDelete = (e, chat) => {
+		if (!confirmDelete) {
+			onDeleteChat(e, chat.id);
+			return;
+		}
+		e.stopPropagation();
+		setPendingDelete(chat);
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "bg-background flex h-full w-64 shrink-0 flex-col border-r",
 		children: [
@@ -855,36 +877,90 @@ function HistoryPanel({ chatList, currentChatId, onLoadChat, onDeleteChat, heade
 				className: "shrink-0 border-b px-3 py-2",
 				children: header
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "flex h-12 items-center border-b px-2",
-				children: /* @__PURE__ */ jsx("input", {
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-12 items-center gap-1 border-b px-2",
+				children: [/* @__PURE__ */ jsx("input", {
 					value: query,
 					onChange: (e) => setQuery(e.target.value),
-					placeholder: "Search chats…",
+					placeholder: inArchivedView ? "Search archived chats…" : "Search chats…",
 					className: "bg-muted text-foreground placeholder:text-muted-foreground/70 focus:ring-primary/40 w-full rounded-md px-2.5 py-1.5 text-xs focus:ring-1 focus:outline-none"
-				})
+				}), archiveEnabled && /* @__PURE__ */ jsx(Tooltip, {
+					message: showArchived ? "Show active chats" : "Show archived chats",
+					side: "bottom",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Archived",
+						"aria-pressed": showArchived,
+						onClick: () => setShowArchived((v) => !v),
+						className: cn("shrink-0 rounded-md p-1.5 transition-colors", showArchived ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: Archive,
+							className: "size-3.5"
+						})
+					})
+				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-1 flex-col gap-0.5 overflow-y-auto p-2",
 				children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground/60 px-2 py-1 text-xs",
-					children: query ? "No matching chats" : "No saved chats"
+					children: emptyText
 				}) : filtered.map((chat) => /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => onLoadChat(chat),
 					className: cn("group w-full rounded-lg px-2 py-1.5 text-left transition-colors", chat.id === currentChatId ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent/50"),
 					children: [/* @__PURE__ */ jsxs("span", {
 						className: "flex items-center gap-1",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "min-w-0 flex-1 truncate text-xs font-medium",
-							children: chat.title
-						}), /* @__PURE__ */ jsx("span", {
-							role: "button",
-							onClick: (e) => onDeleteChat(e, chat.id),
-							"aria-label": "Delete chat",
-							className: "text-muted-foreground/40 hover:text-destructive shrink-0 rounded p-0.5 opacity-0 transition-colors group-hover:opacity-100",
-							children: /* @__PURE__ */ jsx(Trash2, { className: "size-3" })
-						})]
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate text-xs font-medium",
+								children: chat.title
+							}),
+							archiveEnabled && !inArchivedView && /* @__PURE__ */ jsx(Tooltip, {
+								message: "Archive chat",
+								side: "top",
+								children: /* @__PURE__ */ jsx("span", {
+									role: "button",
+									onClick: (e) => {
+										e.stopPropagation();
+										onArchiveChat?.(e, chat.id);
+									},
+									"aria-label": "Archive chat",
+									className: cn(ROW_ACTION_CLASS, "hover:text-foreground"),
+									children: /* @__PURE__ */ jsx(Icon, {
+										icon: Archive,
+										className: "size-3"
+									})
+								})
+							}),
+							inArchivedView && onUnarchiveChat && /* @__PURE__ */ jsx(Tooltip, {
+								message: "Unarchive chat",
+								side: "top",
+								children: /* @__PURE__ */ jsx("span", {
+									role: "button",
+									onClick: (e) => {
+										e.stopPropagation();
+										onUnarchiveChat(e, chat.id);
+									},
+									"aria-label": "Unarchive chat",
+									className: cn(ROW_ACTION_CLASS, "hover:text-foreground"),
+									children: /* @__PURE__ */ jsx(Icon, {
+										icon: ArchiveRestore,
+										className: "size-3"
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								role: "button",
+								onClick: (e) => handleDelete(e, chat),
+								"aria-label": "Delete chat",
+								className: cn(ROW_ACTION_CLASS, "hover:text-destructive"),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: Trash2,
+									className: "size-3"
+								})
+							})
+						]
 					}), /* @__PURE__ */ jsxs("span", {
 						className: "flex items-center gap-1",
 						children: [/* @__PURE__ */ jsx("span", {
@@ -900,8 +976,11 @@ function HistoryPanel({ chatList, currentChatId, onLoadChat, onDeleteChat, heade
 									downloadChat(chat);
 								},
 								"aria-label": "Download chat as Markdown",
-								className: "text-muted-foreground/40 hover:text-foreground shrink-0 rounded p-0.5 opacity-0 transition-colors group-hover:opacity-100",
-								children: /* @__PURE__ */ jsx(Download, { className: "size-3" })
+								className: cn(ROW_ACTION_CLASS, "hover:text-foreground"),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: Download,
+									className: "size-3"
+								})
 							})
 						})]
 					})]
@@ -910,13 +989,40 @@ function HistoryPanel({ chatList, currentChatId, onLoadChat, onDeleteChat, heade
 			/* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground mt-auto shrink-0 border-t px-3 py-2 text-[10px]",
 				children: "Chats are saved to your browser's local storage."
+			}),
+			confirmDelete && /* @__PURE__ */ jsx(Dialog, {
+				open: pendingDelete !== null,
+				onOpenChange: (open) => !open && setPendingDelete(null),
+				children: /* @__PURE__ */ jsxs(Dialog.Content, {
+					className: "sm:max-w-md",
+					children: [/* @__PURE__ */ jsx(Dialog.Header, {
+						title: "Delete chat?",
+						description: pendingDelete ? `"${pendingDelete.title}" will be permanently deleted. This can't be undone.` : void 0
+					}), /* @__PURE__ */ jsxs(Dialog.Footer, {
+						className: "border-t-0",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "tertiary",
+							theme: "outline",
+							onClick: () => setPendingDelete(null),
+							children: "Cancel"
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "danger",
+							theme: "solid",
+							onClick: (e) => {
+								if (pendingDelete) onDeleteChat(e, pendingDelete.id);
+								setPendingDelete(null);
+							},
+							children: "Delete"
+						})]
+					})]
+				})
 			})
 		]
 	});
 }
 //#endregion
 //#region src/components/features/assistant/components/assistant-workspace.tsx
-function AssistantWorkspace({ config, userName, title, messages, status, error, isReady, chatList, currentChatId, sidebarHeader, editor, htmlByUserMsgIndex, bottomRef, containerRef, userScrolledUpRef, onSend, onStop, onRetry, onNewChat, onLoadChat, onDeleteChat, onSuggestion, modelId, effortId, onModelChange, onEffortChange, micSupported, micListening, micFrequencyData, onMicToggle, historyOpen, onToggleHistory }) {
+function AssistantWorkspace({ config, userName, title, messages, status, error, isReady, chatList, currentChatId, sidebarHeader, editor, htmlByUserMsgIndex, bottomRef, containerRef, userScrolledUpRef, onSend, onStop, onRetry, onNewChat, onLoadChat, onDeleteChat, onArchiveChat, onUnarchiveChat, confirmDelete, onSuggestion, modelId, effortId, onModelChange, onEffortChange, micSupported, micListening, micFrequencyData, onMicToggle, historyOpen, onToggleHistory }) {
 	const hasMessages = messages.length > 0;
 	const promptCard = /* @__PURE__ */ jsx(PromptCard, {
 		editor,
@@ -961,7 +1067,10 @@ function AssistantWorkspace({ config, userName, title, messages, status, error,
 							currentChatId,
 							header: sidebarHeader,
 							onLoadChat,
-							onDeleteChat
+							onDeleteChat,
+							onArchiveChat,
+							onUnarchiveChat,
+							confirmDelete
 						})
 					})
 				}),

package/dist/components/features/assistant/components/assistant-workspace.d.ts

@@ -38,6 +38,16 @@ export interface AssistantWorkspaceProps {
     onNewChat: () => void;
     onLoadChat: (chat: ChatSummary) => void;
     onDeleteChat: (e: ReactMouseEvent, chatId: string) => void;
+    /**
+     * Opt-in archive support. When provided, `chatList` may mix archived and
+     * active chats; the history panel lists active chats by default and adds an
+     * "Archived" view toggle plus per-row archive actions.
+     */
+    onArchiveChat?: (e: ReactMouseEvent, chatId: string) => void;
+    /** Restores an archived chat from the history panel's archived view. */
+    onUnarchiveChat?: (e: ReactMouseEvent, chatId: string) => void;
+    /** Confirm (deletion can't be undone) before calling `onDeleteChat`. */
+    confirmDelete?: boolean;
     onSuggestion: (text: string) => void;
     modelId: string;
     effortId: EffortId;
@@ -50,4 +60,4 @@ export interface AssistantWorkspaceProps {
     historyOpen: boolean;
     onToggleHistory: () => void;
 }
-export declare function AssistantWorkspace({ config, userName, title, messages, status, error, isReady, chatList, currentChatId, sidebarHeader, editor, htmlByUserMsgIndex, bottomRef, containerRef, userScrolledUpRef, onSend, onStop, onRetry, onNewChat, onLoadChat, onDeleteChat, onSuggestion, modelId, effortId, onModelChange, onEffortChange, micSupported, micListening, micFrequencyData, onMicToggle, historyOpen, onToggleHistory, }: AssistantWorkspaceProps): import("react").JSX.Element;
+export declare function AssistantWorkspace({ config, userName, title, messages, status, error, isReady, chatList, currentChatId, sidebarHeader, editor, htmlByUserMsgIndex, bottomRef, containerRef, userScrolledUpRef, onSend, onStop, onRetry, onNewChat, onLoadChat, onDeleteChat, onArchiveChat, onUnarchiveChat, confirmDelete, onSuggestion, modelId, effortId, onModelChange, onEffortChange, micSupported, micListening, micFrequencyData, onMicToggle, historyOpen, onToggleHistory, }: AssistantWorkspaceProps): import("react").JSX.Element;

package/dist/components/features/assistant/components/sidebar/history-panel.d.ts

@@ -1,10 +1,24 @@
 import type { ReactNode } from 'react';
 import type { ChatSummary } from '../../types';
-interface HistoryPanelProps {
+export interface HistoryPanelProps {
     chatList: ChatSummary[];
     currentChatId: string;
     onLoadChat: (chat: ChatSummary) => void;
     onDeleteChat: (e: React.MouseEvent, chatId: string) => void;
+    /**
+     * Opt-in archive support. When provided, `chatList` may mix archived and
+     * active chats: the panel lists active chats by default, adds an "Archived"
+     * view toggle next to the search input, and gives active rows an archive
+     * action. When omitted, the `archived` flag is ignored and no archive UI renders.
+     */
+    onArchiveChat?: (e: React.MouseEvent, chatId: string) => void;
+    /** Restores an archived chat. Rendered on rows in the archived view. */
+    onUnarchiveChat?: (e: React.MouseEvent, chatId: string) => void;
+    /**
+     * Ask for confirmation (deletion can't be undone) before calling
+     * `onDeleteChat`. Defaults to false, which deletes immediately.
+     */
+    confirmDelete?: boolean;
     /**
      * Optional host-supplied block pinned above the search input, naming the scope
      * the listed chats belong to — cloud-portal shows the current project. Hosts
@@ -12,5 +26,4 @@ interface HistoryPanelProps {
      */
     header?: ReactNode;
 }
-export declare function HistoryPanel({ chatList, currentChatId, onLoadChat, onDeleteChat, header, }: HistoryPanelProps): import("react").JSX.Element;
-export {};
+export declare function HistoryPanel({ chatList, currentChatId, onLoadChat, onDeleteChat, onArchiveChat, onUnarchiveChat, confirmDelete, header, }: HistoryPanelProps): import("react").JSX.Element;

package/dist/components/features/assistant/types.d.ts

@@ -63,4 +63,9 @@ export interface ChatSummary {
     title: string;
     updatedAt: number;
     messages: UIMessage[];
+    /**
+     * Archived (hidden but restorable). Only honoured when the host passes
+     * `onArchiveChat`; otherwise every chat is listed regardless of this flag.
+     */
+    archived?: boolean;
 }

package/dist/components/features/data-table/components/column-header.d.ts

@@ -1,3 +1,3 @@
 import type { RowData } from '@tanstack/react-table';
 import type { ColumnHeaderProps } from '../types';
-export declare function DataTableColumnHeader<TData extends RowData, TValue>({ column, title, className, }: ColumnHeaderProps<TData, TValue>): import("react").JSX.Element;
+export declare function DataTableColumnHeader<TData extends RowData, TValue>({ column, title, className, density, }: ColumnHeaderProps<TData, TValue>): import("react").JSX.Element;

package/dist/components/features/data-table/components/content.d.ts

@@ -1,2 +1,3 @@
+import type { RowData } from '@tanstack/react-table';
 import type { ContentProps } from '../types';
-export declare function DataTableContent({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName, }: ContentProps): import("react").JSX.Element;
+export declare function DataTableContent<TData extends RowData = Record<string, any>>({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName, density, onRowClick, }: ContentProps<TData>): import("react").JSX.Element;

package/dist/components/features/data-table/components/list-pagination.d.ts

@@ -0,0 +1,7 @@
+import type { ListPaginationProps } from '../types';
+/**
+ * Compact list-page footer: `[pageSize ▾] Rows per page … 1-100 of N [resource]`
+ * + joined prev/next buttons. Pass `labels` to localize — this package ships no
+ * i18n of its own.
+ */
+export declare function DataTableListPagination({ pageSizes, resourceLabel, hideWhenSinglePage, labels, className, }: ListPaginationProps): import("react").JSX.Element | null;

package/dist/components/features/data-table/components/list-panel.d.ts

@@ -0,0 +1,10 @@
+import type { RowData } from '@tanstack/react-table';
+import type { ListPanelProps } from '../types';
+/**
+ * Compact "list table" card: search row + dense sticky-header table, matching
+ * staff-portal's Figma org-list pattern. Renders inside `DataTable.Client` /
+ * `DataTable.Server`, same as every other `DataTable.*` part. Pagination is
+ * deliberately not included — render `DataTable.ListPagination` as a sibling,
+ * below the panel.
+ */
+export declare function DataTableListPanel<TData extends RowData = Record<string, any>>({ search, searchSlot, toolbar, emptyMessage, loading, onRowClick, className, panelClassName, }: ListPanelProps<TData>): import("react").JSX.Element;

package/dist/components/features/data-table/data-table.d.ts

@@ -2,6 +2,8 @@ import { DataTableBulkActions } from './components/bulk-actions';
 import { DataTableColumnHeader } from './components/column-header';
 import { DataTableContent } from './components/content';
 import { DataTableInlineContent } from './components/inline-content';
+import { DataTableListPagination } from './components/list-pagination';
+import { DataTableListPanel } from './components/list-panel';
 import { DataTableLoading } from './components/loading';
 import { DataTablePagination } from './components/pagination';
 import { DataTableRowActions } from './components/row-actions';
@@ -19,6 +21,8 @@ export declare const DataTable: {
     readonly InlineContent: typeof DataTableInlineContent;
     readonly ColumnHeader: typeof DataTableColumnHeader;
     readonly Pagination: typeof DataTablePagination;
+    readonly ListPanel: typeof DataTableListPanel;
+    readonly ListPagination: typeof DataTableListPagination;
     readonly Search: typeof DataTableSearch;
     readonly RowActions: typeof DataTableRowActions;
     readonly BulkActions: typeof DataTableBulkActions;

package/dist/components/features/data-table/index.d.ts

@@ -11,4 +11,4 @@ export type { SearchConfig } from './core/filter-engine';
 export { createDataTableStore } from './core/store';
 export { DataTable } from './data-table';
 export { useDataTableFilters, useDataTableInlineContents, useDataTableLoading, useDataTablePagination, useDataTableRows, useDataTableSearch, useDataTableSelection, useDataTableSorting, } from './hooks/use-selectors';
-export type { ActionItem, ActiveFiltersProps, BulkActionsProps, ClientPaginationControls, ClientPaginationState, ColumnHeaderProps, ContentProps, CreateStoreOptions, DataTableClientProps, DataTableContextValue, DataTableServerProps, DataTableState, DataTableStore, DataTableStoreState, FilterCheckboxProps, FilterDatePickerProps, FilterFn, FilterFnMap, FilterOption, FilterSelectProps, FilterStrategy, FilterValue, InlineContentEntry, InlineContentProps, InlineContentRenderParams, LoadingProps, PaginationProps, PaginationState, RowActionsProps, SearchProps, SelectionColumnOptions, ServerFetchArgs, ServerPaginationControls, ServerPaginationState, ServerTransformResult, StateAdapter, UseDataTableClientOptions, UseDataTableServerOptions, } from './types';
+export type { ActionItem, ActiveFiltersProps, BulkActionsProps, ClientPaginationControls, ClientPaginationState, ColumnHeaderProps, ContentProps, CreateStoreOptions, DataTableClientProps, DataTableContextValue, DataTableServerProps, DataTableState, DataTableStore, DataTableStoreState, FilterCheckboxProps, FilterDatePickerProps, FilterFn, FilterFnMap, FilterOption, FilterSelectProps, FilterStrategy, FilterValue, InlineContentEntry, InlineContentProps, InlineContentRenderParams, ListPaginationProps, ListPanelProps, ListPanelSearchConfig, LoadingProps, PaginationProps, PaginationState, RowActionsProps, SearchProps, SelectionColumnOptions, ServerFetchArgs, ServerPaginationControls, ServerPaginationState, ServerTransformResult, StateAdapter, UseDataTableClientOptions, UseDataTableServerOptions, } from './types';

package/dist/components/features/data-table/types.d.ts

@@ -229,6 +229,8 @@ export interface ColumnHeaderProps<TData extends RowData, TValue> {
     readonly column: Column<DataTableFeatures, TData, TValue>;
     readonly title: string;
     readonly className?: string;
+    /** `'compact'` swaps in the dense uppercase header label + dual-caret sort icon used by list pages. Default `'default'` renders unchanged. */
+    readonly density?: 'default' | 'compact';
 }
 export interface RowActionsProps<TData extends RowData> {
     readonly row: Row<DataTableFeatures, TData>;
@@ -252,6 +254,10 @@ export interface ContentProps<TData extends RowData = Record<string, any>> {
     readonly bodyClassName?: string;
     readonly rowClassName?: string | ((row: Row<DataTableFeatures, TData>) => string);
     readonly cellClassName?: string | ((cell: Cell<DataTableFeatures, TData, unknown>) => string);
+    /** `'compact'` applies the sticky mist header, dense rows, and borderless dividers used by list pages. Default `'default'` renders unchanged. */
+    readonly density?: 'default' | 'compact';
+    /** Fires on row click. Skipped when the click lands on a link, button, checkbox, form control, or the row-actions menu, so nested interactive elements keep working. */
+    readonly onRowClick?: (row: TData) => void;
 }
 export interface PaginationProps {
     readonly pageSizes?: readonly number[];
@@ -282,6 +288,49 @@ export interface LoadingProps {
     readonly columns?: number;
     readonly className?: string;
 }
+/** Search-row config for {@link ListPanelProps}. */
+export interface ListPanelSearchConfig {
+    readonly placeholder?: string;
+    /**
+     * Set together with `onChange` to drive the search input externally (server-side
+     * search). When set, the built-in store search is not read — the panel renders
+     * whatever rows the caller already scoped.
+     */
+    readonly value?: string;
+    readonly onChange?: (value: string) => void;
+}
+export interface ListPanelProps<TData extends RowData = Record<string, any>> {
+    /** `false` hides the search row entirely. Defaults to the built-in (client-filtered) search. */
+    readonly search?: false | ListPanelSearchConfig;
+    /** Rendered to the right of the search input, inside the search row (e.g. a mobile filter trigger). */
+    readonly searchSlot?: ReactNode;
+    /** Rendered between the search row and the table (e.g. active-filter chips). */
+    readonly toolbar?: ReactNode;
+    readonly emptyMessage?: ReactNode;
+    /** Renders a skeleton in place of the table body. */
+    readonly loading?: boolean;
+    /** See {@link ContentProps.onRowClick}. */
+    readonly onRowClick?: (row: TData) => void;
+    /** Class on the panel's outer element. */
+    readonly className?: string;
+    /** Class on the card container (border/rounding/background) — merges with, and can override, the default chrome. */
+    readonly panelClassName?: string;
+}
+export interface ListPaginationProps {
+    readonly pageSizes?: readonly number[];
+    /** Appended to the row-count summary, e.g. `"1-20 of 42 organizations"`. */
+    readonly resourceLabel?: string;
+    /** Hides the whole control when there's one page or fewer. */
+    readonly hideWhenSinglePage?: boolean;
+    /** English defaults; pass translated strings to localize. */
+    readonly labels?: {
+        readonly rowsPerPage?: string;
+        readonly of?: string;
+        readonly previousPage?: string;
+        readonly nextPage?: string;
+    };
+    readonly className?: string;
+}
 export type FilterStrategy = 'checkbox' | 'select' | 'date-gte' | 'date-lte' | FilterFn;
 export interface DataTableStoreState<TData extends RowData> {
     readonly data: TData[];

package/dist/data-table/index.mjs

@@ -1,2 +1,2 @@
-import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "../data-table-CW3-xqkg.mjs";
+import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "../data-table-DrSsRKRi.mjs";
 export { DEFAULT_DEBOUNCE_MS, DEFAULT_LOADING_ROWS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, DataTable, DataTableColumnHeader, DataTableRowActions, createDataTableStore, createSelectionColumn, dataTableFeatures, resolvePath, rowMatchesSearch, useDataTableFilters, useDataTableInlineContents, useDataTableLoading, useDataTablePagination, useDataTableRows, useDataTableSearch, useDataTableSelection, useDataTableSorting, useNuqsAdapter };

package/dist/{data-table-CW3-xqkg.mjs → data-table-DrSsRKRi.mjs}

@@ -12,7 +12,7 @@ import { t as CalendarDatePicker } from "./calendar-date-picker-DW31tDSa.mjs";
 import { t as ActionRow } from "./action-row-DTvs91_3.mjs";
 import { n as useDebouncedSearchInput } from "./use-debounced-search-input-yu_F0QBt.mjs";
 import { t as MultiSelect } from "./multi-select-CH8KERkt.mjs";
-import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal, X } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal, Search, X } from "lucide-react";
 import { createContext, memo, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
@@ -151,13 +151,54 @@ function withSelectionColumn(columns, options = {}) {
 }
 //#endregion
 //#region src/components/features/data-table/components/column-header.tsx
-function DataTableColumnHeader({ column, title, className }) {
+/** Figma `Datum App UI/Tables/Header/Dropdown` — two carets, one dimmed to show sort direction. */
+function CompactSortIcon({ sorted }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "text-muted-foreground relative h-[15px] w-[5px] shrink-0",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 5.28572 3.25",
+			fill: "none",
+			className: cn("absolute inset-[26.66%_6.67%_58.34%_7.62%] overflow-visible", sorted === "desc" ? "opacity-35" : "opacity-100"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0.5 2.75L2.64286 0.5L4.78571 2.75",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}), /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 5.28572 3.25",
+			fill: "none",
+			className: cn("absolute inset-[61.66%_6.67%_23.34%_7.62%] overflow-visible", sorted === "asc" ? "opacity-35" : "opacity-100"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0.5 0.5L2.64286 2.75L4.78571 0.5",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+}
+function DataTableColumnHeader({ column, title, className, density = "default" }) {
+	const isCompact = density === "compact";
 	if (!column.getCanSort()) return /* @__PURE__ */ jsx("div", {
-		className: cn(className),
+		className: cn(isCompact && "text-xs leading-4 font-normal tracking-normal text-inherit uppercase", className),
 		"data-slot": "dt-column-header",
 		children: title
 	});
 	const sorted = column.getIsSorted();
+	const sortLabel = `Sort by ${title}${sorted === "asc" ? ", sorted ascending" : sorted === "desc" ? ", sorted descending" : ""}`;
+	if (isCompact) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center", className),
+		"data-slot": "dt-column-header",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "hover:text-foreground inline-flex h-9 cursor-pointer items-center gap-2 text-xs leading-4 font-normal tracking-normal text-inherit uppercase",
+			onClick: column.getToggleSortingHandler(),
+			"aria-label": sortLabel,
+			children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx(CompactSortIcon, { sorted })]
+		})
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex items-center gap-2", className),
 		"data-slot": "dt-column-header",
@@ -165,7 +206,7 @@ function DataTableColumnHeader({ column, title, className }) {
 			type: "button",
 			className: "flex items-center gap-1 hover:text-foreground -ml-3 h-8 px-3 cursor-pointer",
 			onClick: column.getToggleSortingHandler(),
-			"aria-label": `Sort by ${title}${sorted === "asc" ? ", sorted ascending" : sorted === "desc" ? ", sorted descending" : ""}`,
+			"aria-label": sortLabel,
 			children: [/* @__PURE__ */ jsx("span", { children: title }), sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" }) : sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-4" })]
 		})
 	});
@@ -870,10 +911,33 @@ function DataTableBulkActions({ children, className }) {
 }
 //#endregion
 //#region src/components/features/data-table/components/content.tsx
+/**
+* Per-slot class presets keyed by `density`. `'default'` is intentionally empty
+* so omitting `density` (or passing `'default'`) renders identically to before
+* this prop existed. Every preset only ever *adds* to what a caller passes via
+* the matching `*ClassName` prop — `cn(preset, callerClassName)` below lets the
+* caller's own classes win on conflict.
+*/
+const DENSITY_PRESETS = {
+	default: {},
+	compact: {
+		className: "overflow-auto [&>div]:overflow-visible",
+		headerClassName: "[&_tr]:border-0",
+		headerRowClassName: "border-0 hover:bg-transparent",
+		headerCellClassName: cn("sticky top-0 z-10 h-9 border-b border-border bg-table-header-background px-4", "text-xs leading-4 font-normal tracking-normal text-table-header-foreground uppercase"),
+		bodyClassName: "[&_tr:last-child]:border-b-0",
+		rowClassName: "border-0 hover:bg-muted/30",
+		cellClassName: "border-b border-border px-4 py-0.5 text-sm"
+	}
+};
 function resolveClassName(value, item) {
 	if (typeof value === "function") return value(item);
 	return value;
 }
+/** Clicks inside these should drive their own control, not the row's `onRowClick`. */
+function isInteractiveTarget(target) {
+	return target instanceof HTMLElement && target.closest("a, button, [role=\"checkbox\"], input, textarea, select, [data-slot=\"dt-row-actions\"]") != null;
+}
 function renderInlineContentRow(entry, colSpan, rows) {
 	return /* @__PURE__ */ jsx(TableRow, {
 		"data-slot": "dt-inline-content",
@@ -888,7 +952,7 @@ function renderInlineContentRow(entry, colSpan, rows) {
 		})
 	}, entry.id);
 }
-function DataTableContent({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName }) {
+function DataTableContent({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName, density = "default", onRowClick }) {
 	const { rows, headerGroups, totalColumns } = useDataTableRows();
 	const { isLoading, columnCount } = useDataTableLoading();
 	const { pageSize } = useDataTablePagination();
@@ -896,38 +960,42 @@ function DataTableContent({ emptyMessage, className, tableClassName, headerClass
 	const openInlineContents = useMemo(() => inlineContents.filter((e) => e.open), [inlineContents]);
 	const colSpan = totalColumns;
 	const skeletonColumns = totalColumns || columnCount || 5;
+	const preset = DENSITY_PRESETS[density];
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("datum-ui-data-table", className),
+		className: cn("datum-ui-data-table", preset.className, className),
 		"data-slot": "dt",
 		style: { overflowX: "auto" },
 		children: /* @__PURE__ */ jsxs(Table, {
 			className: cn(tableClassName),
 			"data-slot": "dt-table",
 			children: [/* @__PURE__ */ jsx(TableHeader, {
-				className: cn(headerClassName),
+				className: cn(preset.headerClassName, headerClassName),
 				"data-slot": "dt-header",
 				children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
-					className: cn(headerRowClassName),
+					className: cn(preset.headerRowClassName, headerRowClassName),
 					"data-slot": "dt-header-row",
 					children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
-						className: cn(headerCellClassName),
+						className: cn(preset.headerCellClassName, headerCellClassName),
 						"data-slot": "dt-header-cell",
 						children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
 					}, header.id))
 				}, headerGroup.id))
 			}), /* @__PURE__ */ jsxs(TableBody, {
-				className: cn(bodyClassName),
+				className: cn(preset.bodyClassName, bodyClassName),
 				"data-slot": "dt-body",
 				children: [openInlineContents.filter((e) => e.position === "top").map((entry) => renderInlineContentRow(entry, colSpan, rows)), rows.length > 0 ? rows.map((row) => {
 					const rowEntry = openInlineContents.find((e) => e.position === "row" && e.rowId === row.id);
 					if (rowEntry) return renderInlineContentRow(rowEntry, colSpan, rows);
 					return /* @__PURE__ */ jsx(TableRow, {
-						className: cn(resolveClassName(rowClassName, row)),
+						className: cn(preset.rowClassName, resolveClassName(rowClassName, row), onRowClick && "cursor-pointer"),
 						style: { transitionProperty: "none" },
 						"data-slot": "dt-row",
 						"data-state": row.getIsSelected() ? "selected" : void 0,
+						onClick: onRowClick ? (e) => {
+							if (!isInteractiveTarget(e.target)) onRowClick(row.original);
+						} : void 0,
 						children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
-							className: cn(resolveClassName(cellClassName, cell)),
+							className: cn(preset.cellClassName, resolveClassName(cellClassName, cell)),
 							"data-slot": "dt-cell",
 							children: flexRender(cell.column.columnDef.cell, cell.getContext())
 						}, cell.id))
@@ -1002,6 +1070,168 @@ function DataTableInlineContent({ position, rowId, open, onClose, className, chi
 	return null;
 }
 //#endregion
+//#region src/components/features/data-table/components/list-pagination.tsx
+const DEFAULT_LIST_PAGE_SIZES = [
+	10,
+	20,
+	50,
+	100
+];
+const DEFAULT_LABELS = {
+	rowsPerPage: "Rows per page",
+	of: "of",
+	previousPage: "Previous page",
+	nextPage: "Next page"
+};
+/**
+* Compact list-page footer: `[pageSize ▾] Rows per page … 1-100 of N [resource]`
+* + joined prev/next buttons. Pass `labels` to localize — this package ships no
+* i18n of its own.
+*/
+function DataTableListPagination({ pageSizes = DEFAULT_LIST_PAGE_SIZES, resourceLabel, hideWhenSinglePage = false, labels, className }) {
+	const { canNextPage, canPrevPage, nextPage, prevPage, pageIndex, pageCount, pageSize, setPageSize, totalRows } = useDataTablePagination();
+	const t = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	if (hideWhenSinglePage && pageCount <= 1) return null;
+	const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+	const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-7 w-full items-center justify-between gap-3", className),
+		"data-slot": "dt-list-pagination",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsxs(Select, {
+				value: String(pageSize),
+				onValueChange: (value) => setPageSize(Number(value)),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					className: cn("border-border text-muted-foreground h-7 w-[4.5rem] gap-1.5 rounded-md px-2.5 py-0", "min-h-0 text-xs font-normal shadow-none"),
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: String(pageSize) })
+				}), /* @__PURE__ */ jsx(SelectContent, {
+					side: "top",
+					children: pageSizes.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+						value: String(size),
+						children: size
+					}, size))
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs leading-4 whitespace-nowrap",
+				children: t.rowsPerPage
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs leading-4 whitespace-nowrap tabular-nums",
+				children: `${startRow}-${endRow} ${t.of} ${totalRows}${resourceLabel ? ` ${resourceLabel}` : ""}`
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "border-border flex items-center overflow-hidden rounded-md border",
+				children: [/* @__PURE__ */ jsx(Button, {
+					theme: "outline",
+					size: "icon",
+					className: "border-border size-7 rounded-none border-0 border-r shadow-none",
+					onClick: prevPage,
+					disabled: !canPrevPage,
+					"aria-label": t.previousPage,
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })
+				}), /* @__PURE__ */ jsx(Button, {
+					theme: "outline",
+					size: "icon",
+					className: "size-7 rounded-none border-0 shadow-none",
+					onClick: nextPage,
+					disabled: !canNextPage,
+					"aria-label": t.nextPage,
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" })
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/data-table/components/search.tsx
+function DataTableSearch({ placeholder = "Search...", debounceMs = 300, className, disabled }) {
+	const { search, setSearch } = useDataTableSearch();
+	const [inputValue, setInputValue] = useDebouncedSearchInput(search, setSearch, debounceMs);
+	return /* @__PURE__ */ jsx(Input, {
+		placeholder,
+		value: inputValue,
+		onChange: (e) => setInputValue(e.target.value),
+		className,
+		disabled,
+		"aria-label": placeholder,
+		"data-slot": "dt-search"
+	});
+}
+//#endregion
+//#region src/components/features/data-table/components/list-panel.tsx
+const LOADING_SKELETON_ROWS = 8;
+const SEARCH_INPUT_CLASS = "h-10 border-0 bg-transparent pl-9 shadow-none focus-visible:shadow-none focus-visible:ring-0";
+function ListPanelSkeleton({ columnCount }) {
+	const cols = Math.max(columnCount, 1);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-h-0 flex-1 overflow-hidden",
+		"data-slot": "dt-list-panel-loading",
+		"aria-busy": "true",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "border-border bg-table-header-background flex h-9 items-center border-b px-4",
+			children: Array.from({ length: cols }, (_, i) => /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 px-2 first:pl-0 last:pr-0",
+				children: /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-16" })
+			}, i))
+		}), Array.from({ length: LOADING_SKELETON_ROWS }, (_, row) => /* @__PURE__ */ jsx("div", {
+			className: "border-border flex h-8 items-center border-b px-4",
+			"data-slot": "dt-list-panel-skeleton-row",
+			children: Array.from({ length: cols }, (_, col) => /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 px-2 first:pl-0 last:pr-0",
+				children: /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3", col % 3 === 0 ? "w-3/4" : col % 3 === 1 ? "w-1/2" : "w-2/3") })
+			}, col))
+		}, row))]
+	});
+}
+/**
+* Compact "list table" card: search row + dense sticky-header table, matching
+* staff-portal's Figma org-list pattern. Renders inside `DataTable.Client` /
+* `DataTable.Server`, same as every other `DataTable.*` part. Pagination is
+* deliberately not included — render `DataTable.ListPagination` as a sibling,
+* below the panel.
+*/
+function DataTableListPanel({ search = {}, searchSlot, toolbar, emptyMessage, loading = false, onRowClick, className, panelClassName }) {
+	const { totalColumns } = useDataTableRows();
+	const showSearch = search !== false;
+	const isControlledSearch = showSearch && (search.value !== void 0 || search.onChange !== void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-card text-card-foreground border-card-border flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border", panelClassName, className),
+		"data-slot": "dt-list-panel",
+		children: [
+			showSearch && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1 border-b pr-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx(Search, {
+						className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2",
+						"aria-hidden": "true"
+					}), isControlledSearch ? /* @__PURE__ */ jsx(Input, {
+						placeholder: search.placeholder,
+						value: search.value,
+						onChange: (e) => search.onChange?.(e.target.value),
+						className: SEARCH_INPUT_CLASS
+					}) : /* @__PURE__ */ jsx(DataTableSearch, {
+						placeholder: search.placeholder,
+						className: SEARCH_INPUT_CLASS
+					})]
+				}), searchSlot]
+			}),
+			toolbar,
+			loading ? /* @__PURE__ */ jsx(ListPanelSkeleton, { columnCount: totalColumns }) : /* @__PURE__ */ jsx(DataTableContent, {
+				density: "compact",
+				emptyMessage,
+				onRowClick,
+				className: "min-h-0 flex-1"
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/features/data-table/components/loading.tsx
 function DataTableLoading({ rows = 5, columns = 4, className }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -1135,21 +1365,6 @@ function DataTablePagination({ pageSizes = DEFAULT_PAGE_SIZES, className }) {
 	});
 }
 //#endregion
-//#region src/components/features/data-table/components/search.tsx
-function DataTableSearch({ placeholder = "Search...", debounceMs = 300, className, disabled }) {
-	const { search, setSearch } = useDataTableSearch();
-	const [inputValue, setInputValue] = useDebouncedSearchInput(search, setSearch, debounceMs);
-	return /* @__PURE__ */ jsx(Input, {
-		placeholder,
-		value: inputValue,
-		onChange: (e) => setInputValue(e.target.value),
-		className,
-		disabled,
-		"aria-label": placeholder,
-		"data-slot": "dt-search"
-	});
-}
-//#endregion
 //#region src/components/features/data-table/hooks/use-data-table-client.ts
 /**
 * Creates a TanStack Table instance from an existing store.
@@ -1622,6 +1837,8 @@ const DataTable = {
 	InlineContent: DataTableInlineContent,
 	ColumnHeader: DataTableColumnHeader,
 	Pagination: DataTablePagination,
+	ListPanel: DataTableListPanel,
+	ListPagination: DataTableListPagination,
 	Search: DataTableSearch,
 	RowActions: DataTableRowActions,
 	BulkActions: DataTableBulkActions,

package/dist/grouped-table/index.mjs

@@ -1,2 +1,2 @@
-import { t as GroupedTable } from "../grouped-table-DKUsSHpe.mjs";
+import { t as GroupedTable } from "../grouped-table-DIFPMKLL.mjs";
 export { GroupedTable };

package/dist/{grouped-table-DKUsSHpe.mjs → grouped-table-DIFPMKLL.mjs}

@@ -6,7 +6,7 @@ import { t as useControllableState } from "./use-controllable-state-Dna7u3r9.mjs
 import { Skeleton } from "./skeleton/index.mjs";
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table/index.mjs";
 import { n as EASE } from "./motion-DvGRWdsm.mjs";
-import { f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, m as DataTableRowActions, p as dataTableFeatures } from "./data-table-CW3-xqkg.mjs";
+import { f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, m as DataTableRowActions, p as dataTableFeatures } from "./data-table-DrSsRKRi.mjs";
 import { n as useDebouncedSearchInput } from "./use-debounced-search-input-yu_F0QBt.mjs";
 import { InputWithAddons } from "./input-with-addons/index.mjs";
 import { ChevronRight, Search, X } from "lucide-react";

package/dist/index.mjs

@@ -55,7 +55,7 @@ import { i as ClientOnly, n as useTheme, r as ThemeScript, t as ThemeProvider }
 import { a as formatJson, c as isValidYaml, d as CodeEditor, i as CodeEditorTabs, l as jsonToYaml, n as jsonSchema, o as formatYaml, r as yamlSchema, s as isValidJson, t as createCodeEditorSchema, u as yamlToJson } from "./types-agDpVXBG.mjs";
 import { t as toast } from "./toast-BUPlDkN3.mjs";
 import { n as Toaster, t as useToast } from "./use-toast-Bpq0yJIT.mjs";
-import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "./data-table-CW3-xqkg.mjs";
+import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "./data-table-DrSsRKRi.mjs";
 import { t as ActionRow } from "./action-row-DTvs91_3.mjs";
 import { n as useDebouncedSearchInput, t as DEFAULT_SEARCH_DEBOUNCE_MS } from "./use-debounced-search-input-yu_F0QBt.mjs";
 import { t as MultiSelect } from "./multi-select-CH8KERkt.mjs";
@@ -71,7 +71,7 @@ import { InputWithAddons } from "./input-with-addons/index.mjs";
 import { t as TimePicker } from "./time-picker-BzNSUazl.mjs";
 import { t as Transfer } from "./transfer-DsshYgIk.mjs";
 import { a as getResponsiveValue, c as GRID_COLUMNS, d as RESPONSIVE_MAP, i as getGutter, l as GRID_PREFIX, n as Row, o as registerMediaQuery, r as RowContext, s as GRID_BREAKPOINTS, t as Col, u as RESPONSIVE_ARRAY } from "./col-BYGWTB4j.mjs";
-import { t as GroupedTable } from "./grouped-table-DKUsSHpe.mjs";
+import { t as GroupedTable } from "./grouped-table-DIFPMKLL.mjs";
 import { t as InputNumber } from "./input-number-TXmW-X9o.mjs";
 import { a as logoStyles, i as LogoFlat, n as LogoStacked, r as LogoIcon, t as LogoText } from "./logo-text-Dpm5O6Kg.mjs";
 import { t as Logo } from "./logo-C3FxD7jb.mjs";

package/dist/styles/themes/alpha.css

@@ -118,6 +118,9 @@ Light-mode tokens on :root, dark-mode tokens on .dark
   --table-accent: var(--glacier-mist-800);
   --table-cell: hsl(0 0% 100%);
   --table-cell-hover: var(--glacier-mist-700);
+  /* Sticky "mist" list-table header (DataTable.Content density="compact" / DataTable.ListPanel) */
+  --table-header-background: var(--glacier-mist-700);
+  --table-header-foreground: color-mix(in oklch, var(--midnight-fjord) 60%, transparent);
 
   /* Badge */
   --badge-primary: var(--primary);
@@ -320,6 +323,8 @@ Light-mode tokens on :root, dark-mode tokens on .dark
   --table-accent: var(--app-dark-utility-1);
   --table-cell: var(--midnight-fjord);
   --table-cell-hover: var(--app-dark-utility-1);
+  --table-header-background: var(--muted);
+  --table-header-foreground: var(--muted-foreground);
 
   /* Badge */
   --badge-primary: var(--primary);
@@ -425,6 +430,15 @@ TAILWIND CUSTOM UTILITIES FOR THEME
   /* Custom base shadow */
   --shadow: 0 2px 4px 2px rgba(12, 29, 49, 0.03);
   --shadow-tooltip: 0 4px 16px 0 rgba(0, 0, 0, 0.05), 1px 8px 8px 0 rgba(0, 0, 0, 0.02);
+  /**
+   * Section-card shadow (Figma org-overview cards). Aliases the base `--shadow`
+   * rather than a standalone value — applies identically in light and dark since
+   * `--shadow` itself isn't theme-split. Consumers reference it directly via
+   * `shadow-(--section-card-shadow)` (e.g. staff-portal's `SECTION_CARD_CHROME`),
+   * which previously pointed at an undefined custom property and rendered no
+   * shadow at all.
+   */
+  --section-card-shadow: var(--shadow);
 
   --color-tertiary: var(--tertiary);
   --color-tertiary-foreground: var(--tertiary-foreground);
@@ -445,6 +459,8 @@ TAILWIND CUSTOM UTILITIES FOR THEME
   --color-table-accent: var(--table-accent);
   --color-table-cell: var(--table-cell);
   --color-table-cell-hover: var(--table-cell-hover);
+  --color-table-header-background: var(--table-header-background);
+  --color-table-header-foreground: var(--table-header-foreground);
 
   --color-dialog-overlay: var(--dialog-overlay);
   --color-dialog-border: var(--dialog-border);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "2.9.1",
+  "version": "2.11.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"