Compact device card component designed for use in table cells, displaying device name and organization in a stacked vertical layout with graceful empty-state handling. ## Key Components ### `DeviceCardCompact` A lightweight React component that renders device identity information. Returns an empty fragment when both `deviceName` and `organization` are absent, null, `'-'`, or the string `'null'`. ### `DeviceCardCompactProps` Extends `React.HTMLAttributes` with: | Prop | Type | Description | |---|---|---| | `deviceName` | `string \| null` | Primary label shown in `text-ods-text-primary` | | `organization` | `string \| null` | Secondary label shown in `text-ods-text-secondary` | | `className` | `string` | Merged via `cn()` for custom overrides | ## Usage Example ```typescript import { DeviceCardCompact } from '@openframe/ui' // Renders both rows // Renders only device name // Returns empty fragment — safe for sparse table data ``` ## Notes - **Empty-state guard:** Values of `null`, `undefined`, `'-'`, or `'null'` (string) are treated as absent. - **Truncation:** Both labels truncate with `truncate` and expose the full value via the `title` attribute on hover. - **Layout:** Uses a `flex-col` container with `min-h-[60px]` to maintain consistent row height in tables. **Source:** [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/device-card-compact.tsx)