@flamingo-stack/openframe-frontend-core 0.0.481 → 0.0.482

package/src/stories/.QuickActionChip.stories.md

@@ -0,0 +1,59 @@
+<!-- source-hash: e558dffab5bdef3a664d2fa964007300 -->
+Storybook stories for `QuickActionChipButton`, covering all visual variants, icon formats, and interaction states used across chat empty states, marketing marquee strips, and ROI table task cells.
+
+## Key Components
+
+| Export | Description |
+|---|---|
+| `Default` | Bordered `outline` chip with a config glyph tinted flamingo-pink |
+| `Primary` | Accent (yellow) `primary` variant chip |
+| `AccentTints` | Config glyphs using `pink`, `cyan`, and arbitrary CSS color `accent` values |
+| `AgentMarks` | Agent-format icons (`fae`, `mingo`) that carry their own colors |
+| `NoIcon` | Label-only chip with no icon |
+| `NonInteractive` | Decorative `<Tag>` (non-focusable) for marquee strips and ROI table cells |
+| `HoverCallbacks` | Demonstrates `onHoverStart`/`onHoverEnd` for prompt preview/restore behavior |
+| `Gallery` | All variants rendered side by side |
+
+## Usage Example
+
+```typescript
+import { QuickActionChipButton, type QuickActionIconSpec } from '../components/chat/quick-action-chip'
+
+// Config-format icon: name resolved by <EntityIcon>, tinted via accent
+const icon: QuickActionIconSpec = { name: 'search', accent: 'pink' }
+
+// Interactive chip (button, focusable, hover callbacks)
+<QuickActionChipButton
+  label="How to start"
+  icon={icon}
+  variant="outline"
+  onSelect={() => console.log('selected')}
+  onHoverStart={() => console.log('preview prompt')}
+  onHoverEnd={() => console.log('restore composer')}
+/>
+
+// Agent-format icon (self-colored, accent ignored)
+<QuickActionChipButton
+  label="Ask fae"
+  icon={{ name: 'fae' }}
+  onSelect={() => {}}
+/>
+
+// Decorative (non-interactive Tag, no button or focus ring)
+<QuickActionChipButton
+  label="Decorative"
+  icon={{ name: 'bug', accent: 'cyan' }}
+  interactive={false}
+/>
+```
+
+## Icon Format Reference
+
+| Format | Example | Behavior |
+|---|---|---|
+| Agent | `{ name: 'fae' \| 'mingo' }` | Renders packaged agent mark; `accent` ignored |
+| Config | `{ name, accent: 'pink' \| 'cyan' }` | Glyph tinted with brand token |
+| Config | `{ name, accent: '#8b5cf6' }` | Glyph tinted with arbitrary CSS color |
+| Config | `{ name, props: { color } }` | Explicit `props.color` wins over `accent` |
+
+**Source:** [`QuickActionChip.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/QuickActionChip.stories.tsx)

package/src/stories/.QuickActionMarquee.stories.md

@@ -0,0 +1,51 @@
+<!-- source-hash: a7d0aad0e28fe0e0c7562287e434d1b0 -->
+Storybook stories for the `QuickActionMarquee` component, showcasing horizontally-scrolling quick-action chip strips used in the OpenFrame chat interface — covering layout variants, scroll directions, interactivity modes, and edge cases.
+
+## Key Components
+
+| Export | Description |
+|---|---|
+| `Default` | Single fae-row marquee scrolling left with interactive chips |
+| `TwoRows` | Stacked fae (left) + mingo (right) rows mirroring the Figma design |
+| `ScrollRight` | Mingo-row marquee with reversed scroll direction |
+| `Decorative` | Non-interactive, non-focusable chip strip for marketing/display use |
+| `FewItems` | Edge case with fewer than 12 items — validates `minChips` auto-padding |
+| `FastNoPause` | High-speed (`120px/s`) marquee with hover-pause disabled |
+
+**Item Fixtures:**
+
+- `FAE_ITEMS` — 6 chips with `pink`-accented icons, mirrors the Figma fae row
+- `MINGO_ITEMS` — 6 chips with `cyan`-accented icons, mirrors the Figma mingo row
+
+## Usage Example
+
+```typescript
+import { QuickActionMarquee } from '../components/chat/quick-action-marquee'
+
+// Interactive strip
+<QuickActionMarquee
+  items={FAE_ITEMS}
+  direction="left"
+  speed={60}
+  pauseOnHover
+  onSelect={(item) => console.log(item.id)}
+/>
+
+// Decorative-only (no onSelect → non-focusable)
+<QuickActionMarquee items={MINGO_ITEMS} direction="right" />
+
+// Stacked two-row layout
+<div className="flex flex-col gap-[var(--spacing-system-mf)]">
+  <QuickActionMarquee items={FAE_ITEMS} direction="left" onSelect={handler} />
+  <QuickActionMarquee items={MINGO_ITEMS} direction="right" onSelect={handler} />
+</div>
+```
+
+## Notes
+
+- Scroll speed is constant in `px/s` regardless of item count
+- Strips automatically pause under `prefers-reduced-motion`
+- Omitting `onSelect` renders chips as plain decorative tags (not focusable)
+- Cloned track copies are `aria-hidden` for accessibility
+
+**Source:** [`QuickActionMarquee.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/QuickActionMarquee.stories.tsx)

package/src/stories/.QuickActionWall.stories.md

@@ -0,0 +1,58 @@
+<!-- source-hash: 1db7402ef79fc5e4ab16d7c9c2568bfa -->
+Storybook stories for `QuickActionWall`, demonstrating all rendering modes of the chat quick-action chip wall component across vertical, horizontal, brick-layout, and edge-case configurations.
+
+## Key Components
+
+- **`VerticalMixedStream`** — Vertical wall with bottom-fade marquee, interleaved IT/SEC chips with category lozenges
+- **`HorizontalInteractive`** — Horizontal wall with right-fade marquee, interactive Fae chips that pause on hover
+- **`Plain`** — Static layout with no marquee or blur effects (consumer opt-out mode)
+- **`Loading`** — Skeleton state with reserved lozenge slots, no chip content
+- **`BrickAgentCapped`** — Brick layout capped at 2 rows for `agentSlug="mingo"`, chips split evenly across rows
+- **`BrickFewActions`** — Brick layout collapse to single row when chip count is below one course
+- **`BrickNarrowComposer`** — Brick layout adapted to a ~420px container, reduced duplication
+- **`BrickSingleShortChip`** — Single narrow chip padded to overflow and scroll correctly
+- **`BrickNonAgent`** — Brick layout without `agentSlug`, keeps exact `rows` count
+
+## Usage Example
+
+```typescript
+import { QuickActionWall, interleave } from './components/chat/quick-action-wall'
+import type { QuickActionChip, QuickActionThemeSpec } from './components/chat/quick-action-chip'
+
+const MY_THEME: QuickActionThemeSpec = {
+  accent: 'var(--color-warning)',
+  lozenge: { label: 'IT', className: 'text-ods-warning' },
+}
+
+const chips: QuickActionChip[] = [
+  { id: 'reset-password', label: 'Reset a password', icon: { name: 'key' }, theme: MY_THEME },
+  { id: 'vpn', label: 'VPN will not connect', icon: { name: 'globe' }, theme: MY_THEME },
+]
+
+// Vertical scrolling wall with fade
+<QuickActionWall
+  chips={chips}
+  lozenges
+  fade="bottom"
+  fadeColor="var(--color-bg-card)"
+  className="max-h-[180px]"
+/>
+
+// Brick mode with drag-scroll and hover-pause
+<QuickActionWall
+  chips={chips}
+  agentSlug="mingo"
+  rows={4}
+  pauseOnHover
+  dragScroll
+  fade={['left', 'right']}
+  fadeColor="var(--color-bg)"
+  className="max-h-44"
+/>
+```
+
+> **Note:** Theme specs (`accent`, `lozenge`) are caller-supplied per chip — the library ships no theme registry or defaults.
+
+## Source
+
+[`QuickActionWall.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/QuickActionWall.stories.tsx)

package/src/stories/.RoadmapCard.stories.md

@@ -0,0 +1,41 @@
+<!-- source-hash: 72d41aa10f4798e2928e546b0358d618 -->
+Storybook stories for the `RoadmapCard` component, covering all three roadmap doc types (`roadmap_item`, `delivery_item`, `internal_task`) across both `sm` (chat-inline) and `default` (full rich card) size variants.
+
+## Key Components
+
+| Export | Size | Card Type | Description |
+|---|---|---|---|
+| `RoadmapItemSm` | `sm` | `roadmap_item` | Feature item in chat-inline variant |
+| `DeliveryItemSm` | `sm` | `delivery_item` | Delivery item in chat-inline variant |
+| `InternalTaskSm` | `sm` | `internal_task` | Internal task in chat-inline variant |
+| `RoadmapItemDefault` | `default` | `roadmap_item` | Full rich card with vote buttons and screenshot gallery |
+
+## Usage Example
+
+```typescript
+import { RoadmapCard } from '../components/chat/entity-cards'
+
+// Chat-inline (sm) — feature roadmap item
+<RoadmapCard
+  item={roadmapFeatureItem}
+  href={`/roadmap/${roadmapFeatureItem.id}`}
+  size="sm"
+  cardType="roadmap_item"
+  target="_blank"
+  rel="noopener noreferrer"
+/>
+
+// Full rich card (default) — public roadmap page
+<RoadmapCard
+  item={roadmapFeatureItem}
+  size="default"
+  cardType="roadmap_item"
+/>
+```
+
+## Notes
+
+- All stories are wrapped in `ChatColumnDecorator` to simulate the chat column layout context.
+- The `cardType` prop drives the icon shape in `sm` variant (Feature / Delivery / Bug-shaped task).
+- `default` size renders vote buttons and a screenshot gallery; vote handlers are stubbed in chat context.
+- Fixture data is sourced from [`./__fixtures__/chat-cards`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/src/stories/__fixtures__/chat-cards.ts).

package/src/stories/.ShellTypeBadge.stories.md

@@ -1,31 +1,51 @@
-<!-- source-hash: fe5ee5e74229fbc813833a5d6c81b725 -->
-Storybook configuration for the ShellTypeBadge component, defining visual documentation and interactive examples for all supported OpenFrame RMM shell types including PowerShell, CMD, Bash, Python, Nushell, Deno, and generic Shell.
+<!-- source-hash: 9148d72b6db0cfd294a2461f5793d1ce -->
+Storybook stories for the `ShellTypeBadge` component, providing interactive documentation and visual testing for all supported OpenFrame RMM shell/script type badges.
 
 ## Key Components
 
-- **Meta Configuration**: Storybook metadata with component description, layout settings, and argument controls
-- **Story Variants**: Individual stories for each shell type (PowerShell, CMD, Bash, Python, Nushell, Deno, Shell)
-- **AllShellTypes Story**: Composite story displaying all shell type badges for visual comparison
-- **ArgTypes**: Interactive controls for `shellType` selection and `className` customization
+| Export | Type | Description |
+|---|---|---|
+| `meta` | `Meta<ShellTypeBadge>` | Storybook metadata with `select` control for `shellType` and autodocs enabled |
+| `Default` | `Story` | Default story using `POWERSHELL` |
+| `PowerShell` | `Story` | PowerShell badge variant |
+| `Cmd` | `Story` | CMD/Batch badge variant |
+| `Bash` | `Story` | Bash badge variant |
+| `Python` | `Story` | Python badge variant |
+| `Nushell` | `Story` | Nushell badge variant |
+| `Deno` | `Story` | Deno badge variant |
+| `Shell` | `Story` | Generic shell badge variant |
+| `AllShellTypes` | `Story` | Composite story rendering all seven variants stacked for side-by-side comparison |
 
 ## Usage Example
 
 ```typescript
-// Import the stories for Storybook development
-import { Default, AllShellTypes } from './ShellTypeBadge.stories';
-
-// The component is documented with these story configurations:
-// - Individual shell type examples
-// - Interactive controls for testing different shell types
-// - Visual comparison of all supported shell types
-
-// Story structure provides:
-const exampleStory = {
-  args: {
-    shellType: 'POWERSHELL', // One of the supported ShellType values
-    className: 'custom-class' // Optional additional styling
-  }
-};
+// Render a single badge in your component
+import { ShellTypeBadge } from '../components/platform/ShellTypeBadge';
+
+<ShellTypeBadge shellType="PYTHON" />
+
+// Supported shellType values
+const shellTypes = [
+  'POWERSHELL',
+  'CMD',
+  'BASH',
+  'PYTHON',
+  'NUSHELL',
+  'DENO',
+  'SHELL',
+] as const;
 ```
 
-The stories provide comprehensive visual documentation for the ShellTypeBadge component, making it easy for developers to understand the available shell types and see how each badge renders with its appropriate icon and styling.
+## Supported Shell Types
+
+| `shellType` | Description |
+|---|---|
+| `POWERSHELL` | Windows PowerShell / PowerShell Core |
+| `CMD` | Windows CMD / Batch scripts |
+| `BASH` | Unix/Linux Bash shell |
+| `PYTHON` | Python scripts |
+| `NUSHELL` | Nushell modern shell |
+| `DENO` | Deno TypeScript runtime |
+| `SHELL` | Generic shell fallback |
+
+**Source:** [`ShellTypeBadge.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ShellTypeBadge.stories.tsx)

package/src/stories/.SlackMessageCard.stories.md

@@ -0,0 +1,42 @@
+<!-- source-hash: c2739c86036e406bd419b03f561d1e70 -->
+Storybook stories for `SlackMessageCard`, a chat entity card component that renders inline previews of Slack messages (`slack_message` doc type) in two layout variants.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `Compact` | `Story` | Card rendered inline within a chat message bubble |
+| `RowVariant` | `Story` | Card rendered in list/row contexts |
+
+## Usage Example
+
+```typescript
+import { SlackMessageCard } from '../components/chat/entity-cards'
+import { makeAnchorProps } from './__fixtures__/chat-card-decorator'
+import { slackMessageItem } from './__fixtures__/chat-cards'
+
+// Compact — inline chat usage
+<SlackMessageCard
+  item={slackMessageItem}
+  variant="compact"
+  anchorProps={makeAnchorProps(slackMessageItem.url ?? '#')}
+/>
+
+// Row — list context usage
+<SlackMessageCard
+  item={slackMessageItem}
+  variant="row"
+  anchorProps={makeAnchorProps(slackMessageItem.url ?? '#')}
+/>
+```
+
+## Notes
+
+- Previews are **PII-sanitized server-side** before reaching this component — it is purely presentational.
+- Both stories are wrapped in `ChatColumnDecorator` to simulate the chat column layout context.
+- `anchorProps` is generated via `makeAnchorProps`, which derives link behavior from the item's URL.
+- Stories are grouped under `Chat/EntityCards/SlackMessageCard` in the Storybook sidebar.
+
+## Source
+
+[`SlackMessageCard.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/SlackMessageCard.stories.tsx)

package/src/stories/.SlashCommandSuggestions.stories.md

@@ -1,41 +1,31 @@
-<!-- source-hash: 1c7447069bb7b63321514a5ef06052ac -->
-Storybook stories for the `SlashCommandSuggestions` chat autocomplete component, providing visual test cases for the `/`-triggered command dropdown used in the Flamingo/OpenFrame chat interface.
+<!-- source-hash: 1a5069303b8ed13eb9814a0faafa1f13 -->
+Storybook stories for the `SlashCommandSuggestions` chat autocomplete dropdown, covering static, interactive, filtered, and no-action variants.
 
 ## Key Components
 
-### Stories
-
-| Story | Description |
-|-------|-------------|
-| `Default` | Full command list with the first row statically highlighted |
-| `Interactive` | Live hover-driven highlight via `useState`, mimics keyboard navigation |
-| `FilteredSingle` | Single result row, simulates typing `/road` to filter |
-| `NoActions` | Hides action chips when `onAction` is `undefined`, row becomes click-only |
-
-### Sample Data (`SAMPLE_COMMANDS`)
-
-14 `SlashCommandSummary` entries covering all production `/api/docs/commands` sources: ClickUp (`roadmap`, `delivery`), GitHub (`commits`, `pull-requests`, `pr-reviews`), Slack (`slack`), and OpenFrame content types (`docs`, `blogs`, `releases`, `case-studies`, `getting-started`, `webinars`, `events`, `podcasts`). Each entry includes `iconName` keys wired to the `resolveOnboardingIcon` registry.
+- **`Default`** — Full command list rendered with the first row highlighted; logs `select` and `action` events to the console.
+- **`Interactive`** — Stateful story using `useState` to track `highlightedIdx`; hover over rows to drive keyboard-style highlight changes.
+- **`FilteredSingle`** — Renders only the first command, simulating a typed filter such as `/road`.
+- **`NoActions`** — Omits the `onAction` handler, causing each row's chip rail to collapse to click-only behavior.
+- **`SAMPLE_COMMANDS`** — Fixture array of 14 `SlashCommandSummary` objects using live icon keys (`clickup`, `github`, `slack`, `openframe`, `rocket`, `briefcase`, `graduation-cap`, `video`, `headphones`, `calendar`, `newspaper`) that match the production `/api/docs/commands` contract.
 
 ## Usage Example
 
 ```typescript
-// Render the interactive story manually outside Storybook
 import { SlashCommandSuggestions } from '../components/chat/slash-command-suggestions'
-import { useState } from 'react'
-
-export function Demo() {
-  const [idx, setIdx] = useState(0)
-
-  return (
-    <SlashCommandSuggestions
-      commands={SAMPLE_COMMANDS}
-      highlightedIdx={idx}
-      onHover={setIdx}
-      onSelect={(cmd) => console.log('selected:', cmd.id)}
-      onAction={(cmd, actionId) => console.log('action:', cmd.id, actionId)}
-    />
-  )
-}
+
+// Minimal controlled usage matching the story pattern
+const [highlightedIdx, setHighlightedIdx] = useState(0)
+
+<SlashCommandSuggestions
+  commands={filteredCommands}
+  highlightedIdx={highlightedIdx}
+  onHover={setHighlightedIdx}
+  onSelect={(cmd) => handleSelect(cmd)}
+  onAction={(cmd, actionId) => handleAction(cmd, actionId)}
+/>
 ```
 
-The decorator wraps every story in a `640px` container with a mock chat input row below, replicating the `absolute bottom-full` anchor behavior of the real `ChatInput` component.
+The decorator wraps every story in a `640px` container with a mock chat input row (`/`) so the dropdown's `absolute bottom-full` positioning anchors correctly, replicating the in-app `ChatInput` context.
+
+**Source:** [`SlashCommandSuggestions.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/SlashCommandSuggestions.stories.tsx)

package/src/stories/.SplitButton.stories.md

@@ -1,21 +1,26 @@
-<!-- source-hash: b262c529e121e8f3f9e9aa107480cd1a -->
-Storybook stories for the `SplitButton` component, showcasing all supported variants, sizes, states, and icon configurations for visual testing and documentation.
+<!-- source-hash: 454a0a0b449298a9b90b4299b2cca4e2 -->
+Storybook stories for the `SplitButton` component, covering all visual variants, sizes, states, and interaction patterns available in the UI library.
 
 ## Key Components
 
 | Export | Description |
-|--------|-------------|
-| `Accent` | Default accent variant with external link icon action |
-| `Outline` | Outline variant with new-tab icon action |
-| `Transparent` | Transparent variant with new-tab icon action |
-| `Destructive` | Destructive variant with trash icon and overflow menu |
-| `SizeSmall` | Small size variant demonstration |
-| `AsLink` | Button rendered as an anchor (`href`) with icon action |
-| `WithLeftIcon` | Main button with a left-side icon and dropdown action |
-| `Disabled` | Fully disabled state for the entire component |
+|---|---|
+| `Accent` | Default accent-colored split button with external link icon action |
+| `Outline` | Outline-styled split button with new-tab action |
+| `Transparent` | Ghost-style split button |
+| `Destructive` | Red destructive variant with trash icon and overflow menu |
+| `Warning` | Warning variant for cautious actions |
+| `SizeSmall` | Compact `small` size variant |
+| `AsLink` | Main button rendered as an anchor (`href`) |
+| `WithLeftIcon` | Split button with a leading icon on the primary label |
+| `Disabled` | Fully disabled state |
 | `IconActionDisabled` | Only the secondary icon action is disabled |
-| `AllVariants` | Grid showcasing all 4 variants × default/disabled × default/small sizes |
-| `TwoActions` | Composite example combining link navigation and dropdown actions |
+| `AllVariants` | Grid rendering all 5 variants × 2 sizes × enabled/disabled |
+| `TwoActions` | Side-by-side real-world usage examples |
+
+**Shared action presets:**
+- `newTabAction` — icon action that navigates to an external URL in a new tab
+- `dropdownAction` — icon action that triggers a dropdown menu callback
 
 ## Usage Example
 
@@ -23,21 +28,21 @@ Storybook stories for the `SplitButton` component, showcasing all supported vari
 import { SplitButton } from '../components/ui/button'
 import { FloppyDiscIcon as Save, Chevron01DownIcon as ChevronDown } from '../components/icons-v2-generated'
 
-// Main action button with a secondary icon action
+// Primary action + secondary dropdown toggle
 <SplitButton
   variant="accent"
   leftIcon={<Save />}
   onClick={() => handleSave()}
   iconAction={{
     icon: <ChevronDown />,
-    'aria-label': 'More save options',
-    onClick: () => openMenu(),
+    'aria-label': 'Save options',
+    onClick: () => openSaveMenu(),
   }}
 >
   Save
 </SplitButton>
 
-// Rendered as a link with external open icon action
+// Link-based split button opening a new tab
 <SplitButton
   variant="outline"
   href="/docs"
@@ -52,11 +57,4 @@ import { FloppyDiscIcon as Save, Chevron01DownIcon as ChevronDown } from '../com
 </SplitButton>
 ```
 
-## Controls
-
-| Prop | Type | Options |
-|------|------|---------|
-| `variant` | select | `accent`, `outline`, `transparent`, `destructive` |
-| `size` | select | `default`, `small` |
-| `fullWidth` | boolean | — |
-| `disabled` | boolean | — |
+**Source:** [`SplitButton.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/SplitButton.stories.tsx)

package/src/stories/.StackedRowsPanel.stories.md

@@ -0,0 +1,65 @@
+<!-- source-hash: be32aae0da53559f0ef6e07a329fe02d -->
+Storybook stories for the `StackedRowsPanel` component, demonstrating its key layout variants including header cards, standard tables, single rows, info banners, and panels with nested data tables.
+
+## Key Components
+
+| Export | Description |
+|---|---|
+| `HeaderCard` | Full-width title/description row paired with a multi-column metadata row |
+| `StandardTable` | Uniform multi-column rows with avatar, name/email, role, and status tag |
+| `SingleRow` | Single row that rounds all four corners |
+| `InfoBanner` | Row with a leading icon aligned against two text lines |
+| `WithNestedTable` | Panel row hosting an arbitrary node — in this case a nested `DataTable` |
+| `NestedDevicesTable` | Internal helper rendering a `DataTable` with device name and compliance status |
+
+## Usage Example
+
+```typescript
+import { StackedRowsPanel } from '../components/ui/stacked-rows-panel'
+import { Tag } from '../components/ui/tag'
+
+// Simple header card
+<StackedRowsPanel
+  rows={[
+    {
+      id: 'title',
+      columns: [
+        {
+          key: 'description',
+          value: 'Monitors sustained high CPU utilization',
+          label: 'Description',
+        },
+      ],
+    },
+    {
+      id: 'meta',
+      columns: [
+        { key: 'severity', value: 'Critical', label: 'Severity' },
+        {
+          key: 'status',
+          value: <Tag label="Failing" variant="error" />,
+          label: 'Status',
+        },
+      ],
+    },
+  ]}
+/>
+
+// Single row — all four corners rounded
+<StackedRowsPanel
+  rows={[
+    { id: 'only', columns: [{ key: 'policy', value: 'High CPU Usage >85%', label: 'Policy' }] },
+  ]}
+/>
+```
+
+## Notes
+
+- **Corner rounding** is automatic: a single row rounds all corners; multiple rows round only the first row's top and last row's bottom corners.
+- **Column slots** accept either `value`/`label` text pairs or an arbitrary `content` node.
+- The `hideAt` prop on a column controls responsive visibility (e.g., `hideAt: 'md'`).
+- The `leadingIcon` prop centers a glyph vertically against both value and label lines.
+
+## Source
+
+[`StackedRowsPanel.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/StackedRowsPanel.stories.tsx)

package/src/stories/.TabSelector.stories.md

@@ -1,35 +1,21 @@
-<!-- source-hash: eea14186773eb206e54d1ffb8e785935 -->
-Storybook stories for the `TabSelector` UI component, showcasing all supported variants, states, and composition patterns.
+<!-- source-hash: 60b03abb76c9523e1bee39c6f559e738 -->
+Storybook stories for the `TabSelector` UI component, covering all visual variants, states, and real-world usage patterns.
 
 ## Key Components
 
-### Exported Stories
-
-| Story | Description |
-|-------|-------------|
-| `Primary` | Accent background on active tab (default variant) |
-| `Secondary` | Soft grey background on active tab |
-| `FiveTabs` | Full 5-tab layout matching Figma spec |
-| `WithIcons` | Tabs with Lucide icon prefixes |
-| `WithLabel` | Optional label rendered above the selector |
-| `WithDisabled` | Single tab disabled via `disabled` item property |
+| Export | Description |
+|---|---|
+| `Primary` | Active tab with accent background (primary variant) |
+| `Secondary` | Active tab with soft grey background (secondary variant) |
+| `FiveTabs` | Full five-tab layout matching Figma design spec |
+| `WithIcons` | Tabs rendered with Lucide icon elements |
+| `WithLabel` | Selector with an optional label rendered above |
+| `WithDisabled` | Single tab item marked as `disabled: true` |
 | `Disabled` | Entire selector disabled via top-level `disabled` prop |
 | `TwoTabs` | Minimal two-tab configuration |
-| `PlatformExample` | Real-world OS platform picker with icons and label |
-| `VariantComparison` | Side-by-side `accent` vs `secondary` rendering |
-| `WithBadges` | Tabs with badge slots (e.g., "Soon" pill on Enterprise) |
-
-### `TabSelectorItem` Shape
-
-```typescript
-interface TabSelectorItem {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  disabled?: boolean;
-  badge?: React.ReactNode;
-}
-```
+| `PlatformExample` | Real-world OS picker with icons and a label |
+| `VariantComparison` | Side-by-side `primary` and `secondary` variant display |
+| `WithBadges` | Tabs with inline badge elements (e.g. "Soon" label on a disabled tab) |
 
 ## Usage Example
 
@@ -37,22 +23,22 @@ interface TabSelectorItem {
 import { TabSelector, type TabSelectorItem } from '../components/ui/tab-selector';
 import { useState } from 'react';
 
-const platforms: TabSelectorItem[] = [
-  { id: 'windows', label: 'Windows', icon: <Monitor className="w-5 h-5" /> },
-  { id: 'macos',   label: 'macOS',   icon: <Apple   className="w-5 h-5" /> },
-  { id: 'linux',   label: 'Linux',   icon: <Globe   className="w-5 h-5" />, disabled: true },
+const items: TabSelectorItem[] = [
+  { id: 'windows', label: 'Windows' },
+  { id: 'macos',   label: 'macOS' },
+  { id: 'linux',   label: 'Linux', disabled: true },
 ];
 
 export function PlatformPicker() {
-  const [platform, setPlatform] = useState('macos');
+  const [platform, setPlatform] = useState('windows');
 
   return (
     <TabSelector
-      label="Select Platform"
-      variant="primary"       // 'primary' | 'secondary'
       value={platform}
       onValueChange={setPlatform}
-      items={platforms}
+      items={items}
+      variant="primary"
+      label="Select Platform"
     />
   );
 }
@@ -60,6 +46,8 @@ export function PlatformPicker() {
 
 ## Notes
 
-- All stories use a controlled `useState` render function to ensure interactive tab switching works correctly in Storybook.
-- The decorator wraps every story in a `600px` wide container to match typical usage contexts.
-- Badge content accepts any `React.ReactNode`, allowing custom pills, icons, or counters per tab.
+- All stories use a stateful `Render` wrapper so tab selection is interactive inside Storybook.
+- The `WithBadges` story demonstrates the `badge` prop on `TabSelectorItem`, which accepts any React node and is suitable for status indicators.
+- The decorator wraps every story in a `600px` container to match typical usage widths.
+
+**Source:** [`TabSelector.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/TabSelector.stories.tsx)