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 // Brick mode with drag-scroll and hover-pause ``` > **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)