@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214-snapshot.20260528192313

package/src/components/ui/query-report-table/.index.md

@@ -0,0 +1,43 @@
+<!-- source-hash: 94508ea38910387838290c33043421e4 -->
+Barrel export file for the `QueryReportTable` component module, re-exporting all public components, utilities, and TypeScript types.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `QueryReportTable` | Component | Main table component for displaying query report results |
+| `QueryReportTableHeader` | Component | Header row component for the query report table |
+| `QueryReportTableRow` | Component | Individual data row component |
+| `QueryReportTableSkeleton` | Component | Loading skeleton placeholder for the table |
+| `deriveColumns` | Utility | Derives column definitions from query result data |
+| `exportToCSV` | Utility | Exports table data to a CSV file |
+
+## Types
+
+- `QueryReportTableProps`
+- `QueryReportTableHeaderProps`
+- `QueryReportTableRowProps`
+- `QueryReportTableSkeletonProps`
+- `QueryResultRow`
+
+## Usage Example
+
+```typescript
+import {
+  QueryReportTable,
+  QueryReportTableSkeleton,
+  deriveColumns,
+  exportToCSV,
+  type QueryResultRow,
+  type QueryReportTableProps
+} from './index'
+
+const rows: QueryResultRow[] = await fetchQueryResults()
+const columns = deriveColumns(rows)
+
+// Render table
+<QueryReportTable columns={columns} rows={rows} />
+
+// Export results
+exportToCSV(rows, 'report.csv')
+```

package/src/components/ui/query-report-table/.query-report-table-header.md

@@ -0,0 +1,36 @@
+<!-- source-hash: 51f59ce973c05b3bf63e194d662e8fdd -->
+Renders the header row for a query report table, displaying column names with overflow-aware tooltips for truncated labels.
+
+## Key Components
+
+- **`QueryReportTableHeader`** — Main exported component that renders a row of column header cells, supporting `default` and `compact` layout variants
+- **`TruncatedHeaderCell`** — Internal component that detects text overflow on hover and conditionally shows a tooltip with the full column name
+
+## Props (`QueryReportTableHeaderProps`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `columns` | `string[]` | List of column names to render |
+| `columnWidth` | `number` | Fixed pixel width applied to each header cell |
+| `variant` | `'default' \| 'compact'` | Layout variant; `compact` adds vertical padding and a bottom border |
+| `className` | `string` | Optional additional CSS classes |
+
+## Usage Example
+
+```typescript
+import { QueryReportTableHeader } from './query-report-table-header'
+
+<QueryReportTableHeader
+  columns={['hostname', 'ip_address', 'os_version', 'last_seen']}
+  columnWidth={160}
+  variant="compact"
+  className="bg-ods-surface"
+/>
+```
+
+## Behavior Notes
+
+- Column widths are fixed (`shrink-0`) to align with table body cells
+- Truncation is detected lazily on `mouseEnter` by comparing `scrollWidth` vs `clientWidth`, avoiding unnecessary DOM reads on render
+- Tooltips are suppressed (`open={false}`) when the text is not truncated, preventing empty tooltip flashes
+- Column labels are styled in uppercase monospace with secondary text color (`text-ods-text-secondary`)

package/src/components/ui/query-report-table/.query-report-table-row.md

@@ -0,0 +1,40 @@
+<!-- source-hash: 18d5b9d31dbc725bcee2ec71984e3fd7 -->
+Renders a single data row in a query report table, supporting `default` and `compact` visual variants with automatic tooltip display for truncated cell content.
+
+## Key Components
+
+- **`QueryReportTableRow`** — Main row component that maps over `columns` to render each cell with consistent width, spacing, and typography based on the active `variant`.
+- **`TruncatedCell`** — Internal component that detects text overflow on mouse enter and conditionally shows a tooltip with the full value when the content is truncated.
+
+## Usage Example
+
+```typescript
+import { QueryReportTableRow } from './query-report-table-row'
+
+const columns = ['name', 'status', 'ticket']
+const row = { name: 'Workstation backup failed', status: 'Open', ticket: 'TKT-4821' }
+
+// Default (card-style) variant
+<QueryReportTableRow
+  row={row}
+  columns={columns}
+  columnWidth="200px"
+  variant="default"
+/>
+
+// Compact (table-row-style) variant
+<QueryReportTableRow
+  row={row}
+  columns={columns}
+  columnWidth="200px"
+  variant="compact"
+  className="my-custom-class"
+/>
+```
+
+## Behavior Notes
+
+- `null` or `undefined` cell values render as `"-"`.
+- Truncation detection is lazy — checked only on `mouseEnter` to avoid unnecessary DOM reads on render.
+- Tooltip is suppressed entirely when text fits within its container (`open={false}`), preventing empty tooltip flashes.
+- Column widths are applied via inline `style` to support dynamic values from parent layout logic.

package/src/components/ui/query-report-table/.query-report-table-skeleton.md

@@ -0,0 +1,44 @@
+<!-- source-hash: 65227a48925322cc0e025749aac5c49b -->
+A loading skeleton component for the `QueryReportTable`, rendering animated placeholder rows and columns while data is being fetched.
+
+## Key Components
+
+**`QueryReportTableSkeleton`** — Main export. Renders a configurable grid of pulsing skeleton cells mimicking the table's header and row structure.
+
+**Props (`QueryReportTableSkeletonProps`):**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `rows` | `number` | Number of skeleton rows to render |
+| `columns` | `number` | Number of skeleton columns per row |
+| `columnWidth` | `number \| string` | Fixed width applied to each column cell |
+| `variant` | `'default' \| 'compact'` | Controls row height, spacing, and border style |
+| `className` | `string` | Optional additional CSS classes |
+
+**Variants:**
+- **`default`** — Taller rows (`80px`), card-style bordered containers with rounded corners
+- **`compact`** — Shorter rows (`56px`), flat bottom-border separators with tighter spacing
+
+## Usage Example
+
+```typescript
+import { QueryReportTableSkeleton } from './query-report-table-skeleton'
+
+// Default variant — card-style table loading state
+<QueryReportTableSkeleton
+  rows={5}
+  columns={4}
+  columnWidth={180}
+/>
+
+// Compact variant — dense list loading state
+<QueryReportTableSkeleton
+  rows={10}
+  columns={3}
+  columnWidth={150}
+  variant="compact"
+  className="mt-4"
+/>
+```
+
+> **Note:** Cell placeholder widths vary pseudo-randomly per row/column using `(rowIndex * colIndex * 7) % 35` to produce a more natural-looking skeleton rather than uniform bars.

package/src/components/ui/query-report-table/.query-report-table.md

@@ -0,0 +1,47 @@
+<!-- source-hash: bedf0eba103ca6d913d9e320399c3706 -->
+A data table component for displaying query results with horizontal scrolling, CSV export, loading skeletons, and empty states.
+
+## Key Components
+
+- **`QueryReportTable`** — Main export. Renders a full-featured data table driven by an array of row objects, with automatic column derivation from data keys.
+- **`deriveColumns`** — Utility that infers column definitions from data and an optional `columnOrder` array.
+- **`exportToCSV`** — Utility that serializes table data to a downloadable CSV file.
+- **`useHorizontalScrollbar`** — Hook providing custom scrollbar state and event handlers (thumb drag, track click, edge fades).
+- **`QueryReportTableHeader`** / **`QueryReportTableRow`** / **`QueryReportTableSkeleton`** — Sub-components for the header, data rows, and loading state respectively.
+
+## Props Overview
+
+| Prop | Default | Description |
+|------|---------|-------------|
+| `data` | — | Array of row objects to display |
+| `loading` | `false` | Shows skeleton rows when `true` |
+| `variant` | `'default'` | `'default'` or `'compact'` — hides title bar, scrollbar, and edge fades in compact mode |
+| `columnOrder` | — | Optional array to control column ordering |
+| `showExport` | `true` | Renders an "Export CSV" button |
+| `columnWidth` | `160` | Per-column width in pixels |
+| `headerActions` | — | Slot for additional header controls |
+
+## Usage Example
+
+```typescript
+import { QueryReportTable } from './query-report-table'
+
+const rows = [
+  { device: 'DESKTOP-01', os: 'Windows 11', status: 'Online' },
+  { device: 'LAPTOP-22',  os: 'macOS 14',   status: 'Offline' },
+]
+
+export function ReportPage() {
+  return (
+    <QueryReportTable
+      title="Device Report"
+      data={rows}
+      columnOrder={['device', 'os', 'status']}
+      exportFilename="device-report"
+      onExport={() => console.log('exported')}
+    />
+  )
+}
+```
+
+In `compact` mode the title bar, custom scrollbar, and edge-fade overlays are suppressed — useful for embedding the table inside a card or modal without extra chrome.

package/src/components/ui/query-report-table/.types.md

@@ -0,0 +1,41 @@
+<!-- source-hash: 5a6b383ae7cf5e7be578872567e8a3e2 -->
+Defines the TypeScript types and interfaces for the `QueryReportTable` component family, covering data shapes, display configuration, and sub-component props.
+
+## Key Components
+
+| Export | Kind | Description |
+|--------|------|-------------|
+| `QueryResultRow` | Type | A single result row — a record mapping column keys to `string`, `number`, or `null` values |
+| `QueryReportTableVariant` | Type | Visual style toggle: `'default'` (card rows) or `'compact'` (flat rows with border separators) |
+| `QueryReportTableProps` | Interface | Full prop surface for the root table component, including data, loading state, export behavior, and layout options |
+| `QueryReportTableHeaderProps` | Interface | Props for the header row sub-component |
+| `QueryReportTableRowProps` | Interface | Props for individual data row rendering |
+| `QueryReportTableSkeletonProps` | Interface | Props for the skeleton loading state sub-component |
+
+## Usage Example
+
+```typescript
+import type {
+  QueryResultRow,
+  QueryReportTableProps,
+} from './types'
+
+const rows: QueryResultRow[] = [
+  { id: 1, name: 'Workstation-01', status: 'online' },
+  { id: 2, name: 'Workstation-02', status: null },
+]
+
+const tableProps: QueryReportTableProps = {
+  title: 'Device Inventory',
+  data: rows,
+  loading: false,
+  columnOrder: ['id', 'name', 'status'],
+  columnWidth: 200,
+  variant: 'compact',
+  showExport: true,
+  exportFilename: 'device-inventory',
+  onExport: () => console.log('CSV exported'),
+}
+```
+
+> **Note:** Column ordering is controlled via `columnOrder` — any keys not listed are automatically appended at the end, so you only need to specify the columns you want prioritized.

package/src/components/ui/query-report-table/.utils.md

@@ -0,0 +1,35 @@
+<!-- source-hash: 77a4199750d9e00b871e516902027707 -->
+Utility functions for deriving column order from query results and exporting tabular data to CSV files in the browser.
+
+## Key Components
+
+| Export | Description |
+|--------|-------------|
+| `deriveColumns(data, columnOrder?)` | Returns an ordered column list from query rows, respecting an optional explicit order while appending any unlisted keys |
+| `exportToCSV(data, columns, filename)` | Serializes rows to a CSV blob and triggers a browser download |
+| `escapeCSVCell` *(internal)* | Wraps cell values in double-quotes and escapes embedded quotes when the value contains commas, quotes, or newlines |
+
+## Usage Example
+
+```typescript
+import { deriveColumns, exportToCSV } from './utils'
+
+const rows = [
+  { id: 1, name: 'Alice', role: 'admin' },
+  { id: 2, name: 'Bob',   role: 'viewer' },
+]
+
+// Derive columns with a preferred order
+const columns = deriveColumns(rows, ['name', 'role'])
+// → ['name', 'role', 'id']
+
+// Trigger a browser CSV download
+exportToCSV(rows, columns, 'users-export')
+// Downloads: users-export.csv
+```
+
+## Notes
+
+- `deriveColumns` gracefully handles unknown keys in `columnOrder` — only keys present in the data are included.
+- `exportToCSV` is browser-only; it relies on `document`, `Blob`, and `URL.createObjectURL`.
+- The DOM `<a>` element used for the download is removed and the object URL revoked immediately after the click to prevent memory leaks.

package/src/components/ui/table/.index.md

@@ -1,65 +1,44 @@
-<!-- source-hash: 8e0a3f5b120d6c8a952649e5e0c4b545 -->
-A centralized export module for table-related components and utilities used in the Flamingo/OpenFrame interface system.
+<!-- source-hash: 852e7bdd625dee12d4fe54111326d8bf -->
+Barrel export file for the **deprecated `table` module**, re-exporting all table-related components, utilities, and TypeScript types. Use `data-table` instead.
 
-## Key Components
-
-**Core Table Components:**
-- `Table` - Main table container component
-- `TableRow` - Individual table row component
-- `TableCell` - Basic table cell component
-- `TableHeader` - Table header with sorting/filtering capabilities
+> ⚠️ **Deprecated:** This module is deprecated. Migrate to the `data-table` module.
 
-**Specialized Cell Types:**
-- `TableDescriptionCell` - Cell for displaying descriptive content
-- `TableTimestampCell` - Cell for formatted timestamp display
+## Key Components
 
-**UI Enhancement Components:**
-- `TableEmptyState` - Placeholder when table has no data
-- `TableCardSkeleton` - Loading skeleton for table cards
-- `ROW_HEIGHT_DESKTOP`, `ROW_HEIGHT_MOBILE` - Responsive height constants
+| Export | Type | Description |
+|--------|------|-------------|
+| `Table` | Component | Root table container |
+| `TableCell` | Component | Individual cell renderer |
+| `TableRow` | Component | Table row wrapper |
+| `TableHeader` | Component | Column header row |
+| `TableDescriptionCell` | Component | Cell with descriptive text layout |
+| `TableTimestampCell` | Component | Cell formatted for timestamps |
+| `TableEmptyState` | Component | Empty state placeholder |
+| `TableColumnFilterDropdown` | Component | Column filter dropdown UI |
+| `TableCardSkeleton` | Component | Loading skeleton for table cards |
+| `ROW_HEIGHT_DESKTOP` / `ROW_HEIGHT_MOBILE` | Constant | Row height tokens per breakpoint |
+| `getHideClasses` / `isHiddenOnMobile` | Utility | Tailwind responsive visibility helpers |
 
-**Utility Functions:**
-- `getHideClasses` - Generates responsive visibility classes
-- `isHiddenOnMobile` - Checks if element should be hidden on mobile
+## Key Types
 
-**TypeScript Types:**
-- Table configuration types (`TableProps`, `TableColumn`)
-- Action types (`BulkAction`, `RowAction`)
-- Pagination types (`CursorPagination`, `PagePagination`)
-- Filter types (`FilterOption`, `FilterSection`, `TableFilters`)
+`TableProps`, `TableColumn`, `TableCellProps`, `TableRowProps`, `TableHeaderProps`, `BulkAction`, `RowAction`, `FilterOption`, `FilterSection`, `TableFilters`, `CursorPagination`, `PagePagination`, `InfiniteScrollConfig`, `TableEmptyStateProps`, `TableCardSkeletonProps`, `TailwindBreakpoint`
 
 ## Usage Example
 
 ```typescript
-import { 
-  Table, 
-  TableRow, 
-  TableCell, 
-  TableTimestampCell,
+// ⚠️ Deprecated — prefer `data-table`
+import {
+  Table,
+  TableRow,
+  TableCell,
+  TableHeader,
   TableEmptyState,
   type TableProps,
-  type TableColumn 
+  type TableColumn,
 } from './table'
 
 const columns: TableColumn[] = [
   { key: 'name', label: 'Name' },
-  { key: 'created', label: 'Created' }
+  { key: 'status', label: 'Status' },
 ]
-
-function DataTable({ data }: { data: any[] }) {
-  return (
-    <Table columns={columns}>
-      {data.length === 0 ? (
-        <TableEmptyState message="No data available" />
-      ) : (
-        data.map(item => (
-          <TableRow key={item.id}>
-            <TableCell>{item.name}</TableCell>
-            <TableTimestampCell timestamp={item.created} />
-          </TableRow>
-        ))
-      )}
-    </Table>
-  )
-}
 ```

package/src/components/ui/table/.table-cell.md

@@ -1,41 +1,32 @@
-<!-- source-hash: b8d687e9a6d39b8b3b6d276470c2cea2 -->
-A flexible table cell component that provides text alignment options and responsive width handling for table layouts.
+<!-- source-hash: 9a8bcbead08417ce1e15c4b4f2518997 -->
+Renders an individual cell within a deprecated table row component, handling text alignment, width constraints, and automatic text styling for primitive values.
 
 ## Key Components
 
-- **`TableCell`** - Main component that renders a table cell with configurable alignment and styling
-- **`getAlignment()`** - Internal helper function that maps alignment props to Tailwind CSS classes
-- **`TableCellProps`** - Type interface imported from `./types` defining component props
+- **`TableCell`** *(deprecated)* — A `div`-based cell component that wraps content with configurable alignment and overflow handling. Primitive `string`/`number` children are automatically wrapped in a styled `<span>` with truncation; React node children render as-is.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | Cell content |
+| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Text and flex alignment |
+| `className` | `string` | — | Additional CSS classes |
+| `width` | `string` | — | Tailwind width class; falls back to `flex-1 min-w-0` |
 
 ## Usage Example
 
 ```typescript
+// ⚠️ Deprecated — use DataTable from data-table instead
 import { TableCell } from './table-cell'
 
-// Basic usage with text content
-<TableCell>
-  User Name
-</TableCell>
-
-// Right-aligned cell with custom width
-<TableCell align="right" width="w-32">
-  $1,234.56
-</TableCell>
-
-// Center-aligned cell with custom styling
-<TableCell 
-  align="center" 
-  className="bg-blue-100"
->
-  Active
+<TableCell align="right" width="w-24">
+  42
 </TableCell>
 
-// Cell with custom React content
-<TableCell>
-  <button className="text-blue-500">
-    Edit User
-  </button>
+<TableCell align="left">
+  <Badge variant="success">Active</Badge>
 </TableCell>
 ```
 
-The component automatically applies appropriate text styling for string/number content and supports custom React elements. It uses flexbox layout with responsive width handling and text truncation for overflow scenarios.
+> ⚠️ **Deprecated** — This component is no longer recommended. Use `DataTable` from the `data-table` module for new implementations.

package/src/components/ui/table/.table-column-filter-dropdown.md

@@ -0,0 +1,40 @@
+<!-- source-hash: 24edd509d1d4422049647e46332e05ae -->
+A deprecated column-level filter dropdown component that renders a clickable label with a filter icon, wiring a `FiltersDropdown` to manage checkbox-based filter state for a single table column.
+
+## Key Components
+
+### `TableColumnFilterDropdownProps`
+| Prop | Type | Description |
+|------|------|-------------|
+| `columnKey` | `string` | Key used to read/write filter state |
+| `columnLabel` | `string` | Display label and accessibility text |
+| `filterOptions` | `FilterOption[]` | Available checkbox options |
+| `filters` | `TableFilters` | Current filter state across all columns |
+| `onFilterChange` | `(filters: TableFilters) => void` | Callback fired on apply or reset |
+| `placement` | `'bottom-start' \| 'bottom-end' \| 'bottom'` | Dropdown anchor position |
+| `dropdownClassName` | `string` | Extra class on the dropdown panel |
+
+### `TableColumnFilterDropdown`
+Renders a trigger button (label + `Filter02Icon`) that turns accent-colored when filters are active (`activeCount > 0`). Delegates to `FiltersDropdown` with a single `checkbox` section, forwarding `onApply` and `onReset` handlers that merge or remove the column's filter entries from the shared `TableFilters` state.
+
+## Usage Example
+
+```typescript
+import { TableColumnFilterDropdown } from './table-column-filter-dropdown'
+
+const [filters, setFilters] = useState<TableFilters>({})
+
+<TableColumnFilterDropdown
+  columnKey="status"
+  columnLabel="Status"
+  filterOptions={[
+    { label: 'Active', value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+  ]}
+  filters={filters}
+  onFilterChange={setFilters}
+  placement="bottom-start"
+/>
+```
+
+> **Deprecated:** Use `DataTableColumnFilter` from `data-table` instead.

package/src/components/ui/table/.table-description-cell.md

@@ -1,31 +1,41 @@
-<!-- source-hash: 294b5f1bfe96162463b97333e2305e78 -->
-A React component for displaying truncated description text in table cells with configurable line clamping and consistent typography using ODS design tokens.
+<!-- source-hash: 3f4c3ea11c22967d350372a28c7b33d3 -->
+A deprecated table cell component for displaying truncated description text with configurable line clamping. Use `data-table` instead.
 
 ## Key Components
 
-- **`TableDescriptionCell`** - Main component that renders description text with line clamping
-- **`TableDescriptionCellProps`** - TypeScript interface defining component props including text, styling, and line limits
+### `TableDescriptionCell` *(deprecated)*
+A React component that renders description text within a table cell, supporting multi-line truncation via CSS `line-clamp` utilities.
+
+### `TableDescriptionCellProps` *(deprecated)*
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `string` | — | The description text to display |
+| `className` | `string` | — | Optional additional CSS classes |
+| `maxLines` | `1-6` | `3` | Maximum lines before truncating |
 
 ## Usage Example
 
 ```typescript
 import { TableDescriptionCell } from './table-description-cell'
 
-// Basic usage with default 3-line limit
-<TableDescriptionCell text="This is a long description that will be truncated after three lines of text to maintain consistent table row heights." />
+// Default 3-line clamp
+<TableDescriptionCell
+  text="This is a long description that may span multiple lines in the table cell."
+/>
 
-// Custom line limit
-<TableDescriptionCell 
-  text="Short description" 
-  maxLines={1} 
+// Single-line truncation
+<TableDescriptionCell
+  text="Short truncated description"
+  maxLines={1}
 />
 
-// With additional styling
-<TableDescriptionCell 
+// Custom styling with 2-line clamp
+<TableDescriptionCell
   text="Custom styled description text"
   maxLines={2}
-  className="text-blue-600"
+  className="text-red-500"
 />
 ```
 
-The component automatically applies appropriate Tailwind CSS line-clamp utilities based on the `maxLines` prop (1-6 lines supported) and uses the DM Sans font with ODS secondary text color for consistent styling across table interfaces.
+> **⚠️ Deprecated:** This component is deprecated. Migrate to `data-table` for new implementations.

package/src/components/ui/table/.table-empty-state.md

@@ -1,38 +1,37 @@
-<!-- source-hash: 76e439a8184ba2614b7fe61e148cb472 -->
-A React component that renders an empty state display for data tables, providing users with feedback when no data is available and optionally offering an action to remedy the situation.
+<!-- source-hash: 646e60a86ac75ae22a638fb221c00ad2 -->
+Renders a centered empty state UI within a table or data container, displaying an icon, message, and optional action button when no data is available.
 
 ## Key Components
 
-- **TableEmptyState**: Main functional component that displays an empty state with icon, message, and optional action button
-- **Props**: Accepts `message` (custom text), `icon` (custom icon element), `action` (button configuration), and `className` for styling
-- **Default Icon**: Uses Lucide React's `FileX2` icon when no custom icon is provided
-- **Styling**: Dark theme optimized with rounded borders and consistent spacing
+- **`TableEmptyState`** *(deprecated)* — Main exported component. Use `DataTableEmpty` from `data-table` instead.
+
+## Props (`TableEmptyStateProps`)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `message` | `string` | `'No data available'` | Text displayed below the icon |
+| `icon` | `ReactNode` | `<FileX2 />` | Custom icon override |
+| `action` | `{ label: string; onClick: () => void }` | `undefined` | Optional action button |
+| `className` | `string` | `undefined` | Additional CSS classes |
 
 ## Usage Example
 
 ```typescript
+// ⚠️ Deprecated — prefer DataTableEmpty from data-table
 import { TableEmptyState } from './table-empty-state'
-import { Plus, Database } from 'lucide-react'
 
-// Basic usage with default message and icon
-<TableEmptyState />
-
-// Custom message and icon
-<TableEmptyState 
-  message="No users found"
-  icon={<Database className="w-12 h-12" />}
-/>
+// Basic usage
+<TableEmptyState message="No records found" />
 
-// With action button
+// With custom icon and action
 <TableEmptyState
-  message="No projects available"
-  icon={<Plus className="w-12 h-12" />}
+  message="No devices available"
+  icon={<ServerOff className="w-12 h-12" />}
   action={{
-    label: "Create Project",
-    onClick: () => handleCreateProject()
+    label: "Add Device",
+    onClick: () => router.push('/devices/new')
   }}
-  className="min-h-[300px]"
 />
 ```
 
-The component follows a centered layout pattern with consistent typography using DM Sans font family and maintains the dark theme aesthetic with appropriate hover states for interactive elements.
+> **Deprecated:** This component is superseded by `DataTableEmpty` from the `data-table` package, which provides enhanced features and consistent data table integration. Migrate existing usages when possible.