@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214

package/src/stories/.Button.stories.md

@@ -1,50 +1,53 @@
-<!-- source-hash: 181d6a36f1bd5081fe46a5e8768d75ae -->
-This file defines Storybook stories for the Button component, providing comprehensive examples and interactive controls for all button variants, sizes, states, and icon combinations used throughout the Flamingo platform.
+<!-- source-hash: da7a4cc8d96ad03653cebb8d1ec11d45 -->
+Storybook stories for the `Button` UI component, covering all variants, sizes, states, icon configurations, and link behaviors with interactive controls.
 
 ## Key Components
 
-**Story Configuration:**
-- `Meta` configuration with extensive argTypes for variant, size, disabled, loading, alignment, and styling options
-- 20+ button variants including primary, secondary, destructive, Flamingo-themed, and specialized variants (search, filter, device-action)
-- Multiple size options from small to touch-friendly with icon-specific sizing
+| Story | Description |
+|---|---|
+| `Accent` / `Outline` / `Transparent` / `Destructive` | Surface variant stories |
+| `SizeDefault` / `SizeSmall` | Size variant stories |
+| `IconOnly` / `WithLeftIcon` / `WithRightIcon` / `WithBothIcons` | Icon placement stories |
+| `Disabled` / `Loading` / `FullWidth` | State stories |
+| `SplitIcon` / `SplitIconOutline` / `SplitIconSmall` / `SplitIconAsLink` | Split-icon button variations |
+| `AsLink` / `ExternalLink` | Button rendered as anchor tag |
+| `AllVariants` / `AllSizes` / `IconButtonGrid` / `WithIconsShowcase` / `StatesShowcase` / `NotificationCounters` | Showcase/grid stories |
 
-**Story Categories:**
-- **Variant Stories**: Primary, Secondary, White, Outline, Ghost, Destructive, Success, Warning, Info, Flamingo variants
-- **Size Stories**: Small, Default, Large, Touch, Icon-only, and specialized search sizes  
-- **Icon Stories**: Left, right, center, and combined icon placements with Lucide React icons
-- **State Stories**: Disabled, loading, link behaviors, and external link handling
-- **Layout Stories**: Alignment options, padding controls, and mobile responsiveness
-- **Showcase Stories**: Comprehensive displays of all variants, sizes, and icon combinations
+**Controls exposed via `argTypes`:** `variant`, `size`, `fullWidth`, `disabled`, `loading`
 
 ## Usage Example
 
 ```typescript
-// Basic button story with variant and icon
-export const Primary: Story = {
+// Minimal interactive story with controls
+import { Button } from '../components/ui/button';
+
+export const MyStory: Story = {
   args: {
-    children: 'Primary Button',
-    variant: 'primary',
+    children: 'Click me',
+    variant: 'accent',
+    size: 'default',
+    loading: false,
+    disabled: false,
   },
 };
 
-// Icon button with Lucide React icon
-export const WithLeftIcon: Story = {
+// Split-icon button as a navigation link
+export const SplitNav: Story = {
   args: {
-    children: 'Add Item',
-    leftIcon: <Plus />,
+    children: 'Docs',
+    href: '/docs',
+    splitIcon: <ExternalLinkIcon />,
+    variant: 'outline',
   },
 };
 
-// Complex showcase story with custom render function
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="destructive">Destructive</Button>
-    </div>
-  ),
+// Icon-only with accessible label
+export const IconAction: Story = {
+  args: {
+    size: 'icon',
+    variant: 'destructive',
+    leftIcon: <Trash2 />,
+    'aria-label': 'Delete item',
+  },
 };
-```
-
-The stories provide interactive controls for testing all button properties and include specialized showcases for icon buttons with numbers, external links, and comprehensive variant comparisons.
+```

package/src/stories/.ChatTicketList.stories.md

@@ -0,0 +1,33 @@
+<!-- source-hash: 995995dfe9715311703dcbbfc0fbba0b -->
+Storybook stories for the `ChatTicketList` component, providing visual test cases across different ticket counts, statuses, and scroll/fade behaviors.
+
+## Key Components
+
+- **`meta`** — Storybook metadata registering the component under `Chat/ChatTicketList` with autodocs and a `ticketClicked` action handler
+- **`mockTickets`** — 5-item fixture dataset covering all ticket statuses: `ACTIVE`, `ON_HOLD`, `TECH_REQUIRED`, and `RESOLVED`
+- **`manyTickets`** — 15-item extended dataset (includes `mockTickets`) for testing scroll and fade overflow scenarios
+- **`constrainedDecorator`** — Factory returning a story decorator that wraps the component in a max-width 600px container with an optional fixed height, used to simulate real layout constraints
+
+## Exported Stories
+
+| Story | Description |
+|---|---|
+| `Default` | 5 tickets, unconstrained height |
+| `SingleTicket` | Only the first ticket rendered |
+| `AllStatuses` | First 4 tickets showing each distinct status |
+| `ScrollFading` | 15 tickets in a 400px container to demonstrate scroll fade |
+| `ScrollFadingCompact` | 15 tickets in a 280px container for more pronounced fade |
+
+## Usage Example
+
+```typescript
+// Replicate the ScrollFading story manually
+import { ChatTicketList } from "../components/chat/chat-ticket-list";
+
+<div style={{ maxWidth: 600, height: 400 }}>
+  <ChatTicketList
+    tickets={manyTickets}
+    onTicketClick={(ticket) => console.log(ticket)}
+  />
+</div>
+```

package/src/stories/.CheckboxBlock.stories.md

@@ -1,47 +1,59 @@
-<!-- source-hash: 779ae7f91843f482308f472e8cad116a -->
-Storybook configuration file showcasing all variants and use cases of the CheckboxBlock component, including interactive examples for testing component behavior and visual states.
+<!-- source-hash: d29f5d2cc4bf17eb228a4dc4aebe30a3 -->
+Storybook stories for the `CheckboxBlock` UI component, covering all interactive states, variants, and theme configurations for visual testing and documentation.
 
 ## Key Components
 
-- **meta**: Main Storybook configuration object defining component metadata, parameters, and controls
-- **Story exports**: Multiple story variants demonstrating different states and configurations:
-  - `Default` - Basic unchecked state
-  - `RepeatScriptRun` - Figma design reference implementation
-  - `Checked` - Pre-checked state
-  - `Disabled/DisabledChecked` - Non-interactive states
-  - `Controlled` - Interactive state management example
-  - `WithDescription` variants - Taller layout with secondary text
-  - `AllVariants` - Comprehensive comparison view
+### Stories Exported
+
+| Story | Description |
+|---|---|
+| `Default` | Unchecked checkbox block baseline |
+| `Checked` / `Disabled` / `DisabledChecked` | State variants |
+| `Controlled` | Stateful example using `useState` with live feedback |
+| `WithDescription` | Taller `h-16` variant with secondary description text |
+| `Error` / `FlamingoError` | Red border validation failure state |
+| `FlamingoChecked` | Pink accent theme via `data-app-type="flamingo"` wrapper |
+| `AllVariants` | Side-by-side comparison of all variants |
+
+### Configured `argTypes`
+
+- `label` — checkbox label text
+- `checked` / `defaultChecked` — controlled vs. uncontrolled state
+- `description` — optional secondary text below label
+- `disabled` — disables interaction
+- `onCheckedChange` — action callback on state change
 
 ## Usage Example
 
 ```typescript
 import { CheckboxBlock } from '../components/ui/checkbox-block';
-import { useState } from 'react';
 
-// Basic usage
-<CheckboxBlock label="Enable notifications" />
-
-// Controlled state
-const [isEnabled, setIsEnabled] = useState(false);
-<CheckboxBlock
-  label="Controlled Option"
-  checked={isEnabled}
-  onCheckedChange={setIsEnabled}
-/>
+// Uncontrolled
+<CheckboxBlock label="Repeat Script Run" defaultChecked />
 
 // With description
 <CheckboxBlock
   label="Run as User"
   description="Windows Only"
-  defaultChecked={true}
+  disabled
+/>
+
+// Controlled
+const [checked, setChecked] = useState(false);
+<CheckboxBlock
+  label="Controlled Checkbox"
+  checked={checked}
+  onCheckedChange={setChecked}
 />
 
-// Disabled state
+// Error state
 <CheckboxBlock
-  label="Unavailable Option"
-  disabled={true}
+  label="Accept terms"
+  error="Please accept to continue."
 />
-```
 
-The stories provide comprehensive testing scenarios for the ODS design system checkbox component, including dark theme styling, text wrapping behavior, and state management patterns.
+// Flamingo theme
+<div data-app-type="flamingo">
+  <CheckboxBlock label="Accept terms" defaultChecked />
+</div>
+```

package/src/stories/.ContentLoader.stories.md

@@ -0,0 +1,47 @@
+<!-- source-hash: 060ea3cce7fdd7cdb79d215a50260791 -->
+Storybook stories for the `ContentLoader` UI component, showcasing all skeleton loading variants and configuration options.
+
+## Key Components
+
+| Export | Description |
+|--------|-------------|
+| `Card` | Default card-grid skeleton story |
+| `Form` | Form fields skeleton story |
+| `Detail` | Detail page with sidebar skeleton story |
+| `List` | List rows with avatars skeleton story |
+| `WithoutTitle` | Card variant without a title skeleton |
+| `ManyItems` | Stress test with 8 list items |
+| `SingleItem` | Single card skeleton |
+| `CustomContainer` | Form skeleton with custom container class |
+| `AllVariants` | Side-by-side showcase of all four variants using named loader components |
+| `ShortcutComponents` | Demonstrates `CardLoader`, `FormLoader`, `DetailLoader`, `ListLoader` shortcut components |
+
+## Usage Example
+
+```typescript
+import {
+  ContentLoader,
+  CardLoader,
+  FormLoader,
+  DetailLoader,
+  ListLoader,
+} from '@/components/ui/content-loader';
+
+// Generic loader with variant prop
+<ContentLoader variant="card" items={4} showTitle />
+
+// Shortcut components for common patterns
+<CardLoader items={3} showTitle />
+<FormLoader items={5} showTitle />
+<DetailLoader items={2} showTitle containerClassName="bg-bg-card rounded-lg" />
+<ListLoader items={8} />
+```
+
+## Controls
+
+| Prop | Type | Range/Options |
+|------|------|---------------|
+| `variant` | `select` | `card`, `form`, `detail`, `list` |
+| `items` | `number` | 1–12 |
+| `showTitle` | `boolean` | `true` / `false` |
+| `containerClassName` | `string` | Any Tailwind/CSS class string |

package/src/stories/.DashboardInfoCard.stories.md

@@ -0,0 +1,57 @@
+<!-- source-hash: 903a9f23525777b275b7f8c4003cd050 -->
+Storybook stories for the `DashboardInfoCard` UI component, covering all props and visual states used in dashboard layouts.
+
+## Key Components
+
+| Story | Description |
+|---|---|
+| `Default` | Basic card with title and numeric value |
+| `WithPercentage` | Card showing a percentage alongside the value |
+| `WithProgress` | Circular progress indicator with percentage |
+| `CustomProgressVariant` | Progress ring with `error`/`warning`/`success`/`info`/`accent` variants |
+| `WithTooltip` | Question-mark icon with tooltip text |
+| `WithHref` | Clickable card rendered as a Next.js `Link` |
+| `WarningWithTag` / `ErrorWithTag` | Overflow percentage displayed as a colored `Tag` component |
+| `OverflowWrap` / `OverflowComparison` | Demonstrates `progressOverflow="wrap"` vs `"clamp"` for values >100% |
+| `FullyLoaded` | All props enabled simultaneously |
+| `CardGrid` | Multi-card dashboard grid layout decorator |
+
+## Usage Example
+
+```typescript
+import { DashboardInfoCard } from '@/components/ui/dashboard-info-card'
+
+// Basic usage
+<DashboardInfoCard title="Total Devices" value={1284} />
+
+// With progress ring and navigation
+<DashboardInfoCard
+  title="Compliance Score"
+  value={92}
+  percentage={92}
+  showProgress
+  progressVariant="success"
+  tooltip="Based on the latest audit results"
+  href="/compliance"
+/>
+
+// Overflow handling for values exceeding 100%
+<DashboardInfoCard
+  title="Device Usage"
+  value={520}
+  percentage={104}
+  showProgress
+  progressVariant="warning"
+  progressOverflow="wrap"
+/>
+```
+
+### `progressVariant` options
+
+| Value | Use Case |
+|---|---|
+| `success` | Healthy / on-target metrics |
+| `warning` | Approaching limits |
+| `error` | Critical / over-limit |
+| `info` | Neutral informational |
+| `accent` | Brand highlight |

package/src/stories/.DataTable.stories.md

@@ -0,0 +1,41 @@
+<!-- source-hash: 4b92799da5c1a1952b02f5fb9273c343 -->
+Storybook showcase for the `DataTable` component, demonstrating all interactive features (sorting, filtering, row selection, column visibility, pagination, and row actions) using a mock device dataset built on TanStack Table.
+
+## Key Components
+
+- **`Basic`** — Minimal setup with data and columns; no extra state
+- **`WithSorting`** — Consumer-owned sort cycle with `DataTableSortState`, supporting server-side or in-memory sorting
+- **`useDataTable`** — Hook wrapping TanStack Table; accepts `data`, `columns`, and flags like `clientSideSorting` / `clientSideFiltering`
+- **`baseColumns()`** — Reusable `ColumnDef<Device>[]` factory shared across stories, with responsive `hideAt` breakpoints
+- **Cell renderers** — `StatusTag`, `OSBadge`, `OwnerCell`, `TagsCell`, `LoadCell`, `LastSeenCell` — composable display-only cells
+- **`multiSelectFilterFn`** — Column filter function for multi-value faceted filtering (OS, Status)
+- **`makeDevices(count, startId?)`** — Deterministic fake device data generator seeded by index
+
+## Usage Example
+
+```typescript
+import { DataTable, useDataTable, type ColumnDef } from '@/components/ui/data-table'
+
+const columns: ColumnDef<Device>[] = [
+  { accessorKey: 'hostname', header: 'Hostname', meta: { width: 'w-[200px]' } },
+  { accessorKey: 'status',   header: 'Status',   cell: ({ row }) => <StatusTag status={row.original.status} /> },
+]
+
+export function DevicesTable({ data }: { data: Device[] }) {
+  const table = useDataTable<Device>({
+    data,
+    columns,
+    clientSideSorting: true,
+    clientSideFiltering: true,
+  })
+
+  return (
+    <DataTable table={table}>
+      <DataTable.Header />
+      <DataTable.Body emptyMessage="No devices found" />
+    </DataTable>
+  )
+}
+```
+
+> **Note:** Row actions, checkboxes, and chevron links are regular `ColumnDef` entries — not magic props. Use `data-no-row-click` on interactive cell wrappers to prevent click-event bubbling to `onRowClick`.

package/src/stories/.DatePicker.stories.md

@@ -1,62 +1,76 @@
-<!-- source-hash: 2b92f85e98364061f3915eb05ec9e989 -->
-Comprehensive Storybook stories for the DatePicker component, demonstrating all variants including single date, date range, time selection, and input-style pickers with interactive examples.
+<!-- source-hash: 62c605b851ea957354fc89970178b5ca -->
+Storybook stories for the `DatePicker` UI component, covering single date, date range, input variants, time selection, constraints, and all-variants showcase.
 
 ## Key Components
 
-- **Meta Configuration**: Defines Storybook metadata with UI category, component documentation, and control configurations
-- **Story Variants**: 15+ interactive stories covering different DatePicker modes and configurations
-- **DatePicker Stories**: Basic picker variants (single, range, disabled, constraints)
-- **DatePickerInput Stories**: Input-style variants with time selection and formatting options
-- **Composite Stories**: All variants showcase and complex usage examples
+| Export | Description |
+|--------|-------------|
+| `Single` | Basic single-date picker, uncontrolled initial state |
+| `SingleWithValue` | Single picker pre-seeded with today's date |
+| `Range` | Date range picker (from/to selection) |
+| `RangeWithValue` | Range picker pre-filled with today + 7 days |
+| `RangeTwoMonths` | Range picker showing two calendar months simultaneously |
+| `Disabled` | Non-interactive picker in disabled state |
+| `WithLabel` / `WithLabelAndError` | Picker with ODS label and optional error message |
+| `RangeWithLabel` | Range picker with label |
+| `CustomFormat` | Single picker with custom `formatDate` callback (en-GB locale) |
+| `WithConstraints` | Single picker limited to the next 30 days via `fromDate`/`toDate` |
+| `InputStyle` | `DatePickerInput` — calendar-icon-styled input variant |
+| `InputWithLabel` / `InputWithLabelAndError` | Input variant with label/error |
+| `InputWithTimeEmpty` | `DatePickerInput` with `showTime`, no initial value |
+| `InputWithTime` | `DatePickerInput` with `showTime`, pre-seeded with today |
+| `InputWithTime24Hour` | `DatePickerInput` with `use24HourFormat` flag |
+| `AllVariants` | Side-by-side showcase of all major variants |
 
 ## Usage Example
 
 ```typescript
-// Basic single date picker story
-export const Single: Story = {
-  render: function Render() {
-    const [date, setDate] = useState<Date | undefined>();
-    return (
-      <DatePicker
-        mode="single"
-        placeholder="Select date"
-        value={date}
-        onChange={setDate}
-      />
-    );
-  },
-};
+import { useState } from "react";
+import {
+  DatePicker,
+  DatePickerInput,
+  type DateRange,
+} from "../components/ui/date-picker";
 
-// Date range picker with two months
-export const RangeTwoMonths: Story = {
-  render: function Render() {
-    const [range, setRange] = useState<DateRange | undefined>();
-    return (
-      <DatePicker
-        mode="range"
-        placeholder="Select date range"
-        value={range}
-        onChange={setRange}
-        numberOfMonths={2}
-      />
-    );
-  },
-};
+// Single date picker
+function SingleExample() {
+  const [date, setDate] = useState<Date | undefined>();
+  return (
+    <DatePicker
+      mode="single"
+      placeholder="Select date"
+      value={date}
+      onChange={setDate}
+      label="Start Date"
+    />
+  );
+}
 
-// Input-style picker with time selection
-export const InputWithTime: Story = {
-  render: function Render() {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-    return (
-      <DatePickerInput
-        placeholder="Select date"
-        value={date}
-        onChange={setDate}
-        showTime
-      />
-    );
-  },
-};
-```
+// Range picker with two months
+function RangeExample() {
+  const [range, setRange] = useState<DateRange | undefined>();
+  return (
+    <DatePicker
+      mode="range"
+      placeholder="Select date range"
+      value={range}
+      onChange={setRange}
+      numberOfMonths={2}
+    />
+  );
+}
 
-The stories provide comprehensive coverage of DatePicker functionality including state management, formatting, constraints, and different UI presentations for Storybook documentation.
+// Input variant with time (12h)
+function InputTimeExample() {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  return (
+    <DatePickerInput
+      placeholder="Select date and time"
+      value={date}
+      onChange={setDate}
+      showTime
+      label="Event Date"
+    />
+  );
+}
+```

package/src/stories/.DeviceCard.stories.md

@@ -1,50 +1,51 @@
-<!-- source-hash: 2dee21bf038d1057bc04d6d84a1ed675 -->
-A comprehensive Storybook configuration file that defines stories for the DeviceCard component, showcasing various device states, operating systems, and interaction patterns across different use cases.
+<!-- source-hash: 79398b1e78d30f30fbc2dcd2bf7f5787 -->
+Storybook stories for the `DeviceCard` UI component, covering all major display states, OS variants, action configurations, and status badges.
 
 ## Key Components
 
-- **Meta Configuration**: Storybook metadata with component info, parameter settings, and argument type definitions
-- **Base Device Template**: Reusable device object for consistent story data
-- **Story Variants**: Multiple stories covering different device types (Windows, Linux, macOS), status states, and feature combinations
-- **Interactive Examples**: Stories with custom actions, click handlers, and status badges
-- **Layout Stories**: Grid layout demonstration and fully-loaded device examples
+| Export | Type | Description |
+|--------|------|-------------|
+| `Default` | `Story` | Basic device card with minimal info |
+| `WindowsDevice` / `LinuxDevice` | `Story` | OS-specific rendering variants |
+| `WithTags` | `Story` | Device card with tag pills |
+| `WithCustomActions` | `Story` | Custom action buttons (Remote Access, Run Script) |
+| `WithDetailsButton` | `Story` | Inline details button via `detailsButton.component` |
+| `WithStatusBadge` / `WithWarningStatus` / `OfflineDevice` | `Story` | Status tag variants (`success`, `warning`, `grey`) |
+| `Minimal` | `Story` | Bare-minimum fields, no more button |
+| `FullyLoaded` | `Story` | All props populated including IP, version, location |
+| `CardGrid` | `Story` | Grid layout decorator showing 4 cards side-by-side |
 
 ## Usage Example
 
 ```typescript
-// Basic device story
-export const Default: Story = {
-  args: {
-    device: {
-      id: '1',
-      name: 'MacBook Pro',
-      operatingSystem: 'darwin',
-      organization: 'Engineering Team',
-      status: 'active',
-      lastSeen: new Date().toISOString(),
-    },
-  },
-}
+import { DeviceCard } from '../components/ui/device-card'
 
-// Device with custom actions and status badge
-export const WithCustomFeatures: Story = {
-  args: {
-    device: baseDevice,
-    actions: {
-      moreButton: { visible: true },
-      customActions: [
-        { label: 'Remote Access', visible: true },
-        { label: 'Run Script', visible: true },
-      ],
-    },
-    statusBadgeComponent: (
-      <div className="bg-green-500/20 text-green-500 px-2 py-1 rounded text-sm">
-        Online
-      </div>
-    ),
-    onDeviceClick: (device) => console.log('Device clicked:', device),
-  },
-}
+<DeviceCard
+  device={{
+    id: '1',
+    name: 'MacBook Pro',
+    operatingSystem: 'darwin',
+    organization: 'Engineering Team',
+    status: 'active',
+    lastSeen: new Date().toISOString(),
+    tags: ['Production', 'Critical'],
+  }}
+  actions={{
+    moreButton: { visible: true },
+    customActions: [
+      { label: 'Remote Access', visible: true },
+    ],
+  }}
+  statusTag={{ label: 'Online', variant: 'success' }}
+  onDeviceClick={(device) => console.log('Clicked:', device)}
+/>
 ```
 
-The stories cover essential testing scenarios including different operating systems, status states, custom actions, tags, and interactive behaviors for comprehensive component documentation and testing.
+## Controlled Props (argTypes)
+
+| Prop | Control | Description |
+|------|---------|-------------|
+| `device` | `object` | Device data including OS, org, status, tags |
+| `actions` | `object` | `moreButton`, `customActions`, `detailsButton` config |
+| `statusTag` | `object` | `label`, `variant`, `icon`, `onClose`, `className` |
+| `onDeviceClick` | `action` | Fired when the card is clicked |

package/src/stories/.DeviceCardCompact.stories.md

@@ -0,0 +1,41 @@
+<!-- source-hash: 6fc9c281d1bf67add13a5a334f1d1bf3 -->
+Storybook stories for the `DeviceCardCompact` component, providing interactive documentation and visual test cases for its compact device card variant used in table cells.
+
+## Key Components
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `Default` | `Story` | Both `deviceName` and `organization` populated |
+| `NameOnly` | `Story` | Only `deviceName` provided |
+| `OrganizationOnly` | `Story` | Only `organization` provided |
+| `Empty` | `Story` | No props — renders empty fragment |
+| `NullValues` | `Story` | Explicit `null` props — renders empty fragment |
+| `DashValues` | `Story` | Dash placeholder (`"-"`) props — renders empty fragment |
+| `StringNullValues` | `Story` | String `"null"` props — renders empty fragment |
+| `LongName` | `Story` | Truncation behavior with long strings |
+| `InTableContext` | `Story` | Multiple stacked cards simulating a table column |
+
+## Usage Example
+
+```typescript
+import { DeviceCardCompact } from '../components/ui/device-card-compact'
+
+// Typical table cell usage
+<DeviceCardCompact
+  deviceName="MacBook Pro"
+  organization="Engineering Team"
+/>
+
+// Name only — organization row is omitted
+<DeviceCardCompact deviceName="Dell XPS 15" />
+
+// Gracefully handles empty/null/dash/string-null values
+<DeviceCardCompact deviceName={null} organization="-" />
+// → renders nothing (empty fragment)
+```
+
+## Notes
+
+- The meta decorator wraps every story in a `300px` container to simulate a realistic table cell width.
+- `InTableContext` overrides the decorator to render a full bordered list of four cards, demonstrating stacked row rendering.
+- `argTypes` exposes `deviceName` and `organization` as text controls in the Storybook UI for live editing.