From d7d683a1fb2193e0a324ec6abb36ff4d389488ec Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Sat, 9 May 2026 02:16:57 -0700
Subject: [PATCH] docs(ui): add launch state matrix story

---
 .../components/OperationalPreview.stories.tsx | 171 ++++++++++++++++++
 1 file changed, 171 insertions(+)

diff --git a/packages/ui/src/components/OperationalPreview.stories.tsx b/packages/ui/src/components/OperationalPreview.stories.tsx
index e7dc8980..f87601bc 100644
--- a/packages/ui/src/components/OperationalPreview.stories.tsx
+++ b/packages/ui/src/components/OperationalPreview.stories.tsx
@@ -303,3 +303,174 @@ export const LaunchReadyConsole: Story = {
     </main>
   ),
 };
+
+export const LaunchStateMatrix: Story = {
+  render: () => (
+    <main className="min-h-screen bg-[var(--bl-bg-canvas)] p-6 text-[var(--bl-text-primary)]">
+      <div className="mx-auto grid max-w-6xl gap-6">
+        <PageHeader
+          eyebrow="Launch readiness"
+          title="State matrix"
+          description="Shared product states for checking loading, empty, warning, error, disabled, confirmation, and dense data behavior before a route ships."
+          metadata={
+            <>
+              <Badge variant="info" dot>
+                Reusable
+              </Badge>
+              <Badge variant="success" dot>
+                Accessible states
+              </Badge>
+            </>
+          }
+        />
+
+        <div className="grid gap-4 lg:grid-cols-2">
+          <Panel>
+            <PanelHeader>
+              <div>
+                <PanelTitle>Loading</PanelTitle>
+                <PanelDescription>Skeletons match the final rhythm and density.</PanelDescription>
+              </div>
+              <StatusBadge tone="info" dot>
+                Fetching
+              </StatusBadge>
+            </PanelHeader>
+            <PanelBody>
+              <div className="grid gap-3">
+                <div className="flex items-center gap-3">
+                  <Skeleton shape="circle" />
+                  <div className="grid flex-1 gap-2">
+                    <Skeleton shape="text" className="w-2/3" />
+                    <Skeleton shape="text" className="w-1/2" />
+                  </div>
+                </div>
+                <TableSkeleton rows={4} />
+              </div>
+            </PanelBody>
+          </Panel>
+
+          <Panel>
+            <PanelHeader>
+              <div>
+                <PanelTitle>Empty</PanelTitle>
+                <PanelDescription>Empty states provide a clear next action.</PanelDescription>
+              </div>
+            </PanelHeader>
+            <PanelBody>
+              <EmptyState
+                title="No setups need review"
+                description="When work is complete, the surface should still feel intentional."
+                icon={<ShieldCheck className="h-10 w-10" />}
+                action={
+                  <Button size="sm" variant="secondary">
+                    Create setup
+                  </Button>
+                }
+              />
+            </PanelBody>
+          </Panel>
+
+          <Panel>
+            <PanelHeader>
+              <div>
+                <PanelTitle>Alert stack</PanelTitle>
+                <PanelDescription>Warnings and errors use consistent semantics.</PanelDescription>
+              </div>
+            </PanelHeader>
+            <PanelBody>
+              <div className="grid gap-3">
+                <AlertBanner tone="warning" title="Data freshness degraded">
+                  Market data is delayed. Show the user what changed and whether action is safe.
+                </AlertBanner>
+                <AlertBanner tone="error" title="Execution blocked">
+                  Destructive or risky actions require a clear reason and recovery path.
+                </AlertBanner>
+              </div>
+            </PanelBody>
+          </Panel>
+
+          <Panel>
+            <PanelHeader>
+              <div>
+                <PanelTitle>Forms and disabled states</PanelTitle>
+                <PanelDescription>Controls remain readable when unavailable.</PanelDescription>
+              </div>
+              <Badge variant="neutral">Read-only</Badge>
+            </PanelHeader>
+            <PanelBody>
+              <FormSection
+                title="Risk limits"
+                description="Disabled controls explain state nearby."
+              >
+                <FieldGrid columns={2}>
+                  <Input label="Max daily loss" value="$250" readOnly />
+                  <Select
+                    label="Execution mode"
+                    value="paper"
+                    disabled
+                    options={[
+                      { value: 'paper', label: 'Paper trading' },
+                      { value: 'live', label: 'Live trading' },
+                    ]}
+                  />
+                </FieldGrid>
+                <AlertBanner tone="info">
+                  Live execution is locked until admin approval is complete.
+                </AlertBanner>
+              </FormSection>
+            </PanelBody>
+          </Panel>
+
+          <Panel className="lg:col-span-2">
+            <PanelHeader>
+              <div>
+                <PanelTitle>Destructive confirmation context</PanelTitle>
+                <PanelDescription>
+                  Danger actions should be visually distinct and isolated.
+                </PanelDescription>
+              </div>
+              <Button variant="destructive" size="sm">
+                <Trash2 className="h-4 w-4" aria-hidden="true" />
+                Delete setup
+              </Button>
+            </PanelHeader>
+            <PanelBody>
+              <DataTable>
+                <DataTableHeader>
+                  <DataTableRow>
+                    <DataTableHead>Resource</DataTableHead>
+                    <DataTableHead>State</DataTableHead>
+                    <DataTableHead>Owner</DataTableHead>
+                    <DataTableHead>Impact</DataTableHead>
+                  </DataTableRow>
+                </DataTableHeader>
+                <DataTableBody>
+                  <DataTableRow>
+                    <DataTableCell className="font-semibold">BTC managed setup</DataTableCell>
+                    <DataTableCell>
+                      <StatusBadge tone="warning" dot>
+                        Armed
+                      </StatusBadge>
+                    </DataTableCell>
+                    <DataTableCell>Trading operations</DataTableCell>
+                    <DataTableCell>Open automation will be cancelled</DataTableCell>
+                  </DataTableRow>
+                  <DataTableRow>
+                    <DataTableCell className="font-semibold">Audit trail</DataTableCell>
+                    <DataTableCell>
+                      <StatusBadge tone="success" dot>
+                        Retained
+                      </StatusBadge>
+                    </DataTableCell>
+                    <DataTableCell>Platform</DataTableCell>
+                    <DataTableCell>Historical events remain available</DataTableCell>
+                  </DataTableRow>
+                </DataTableBody>
+              </DataTable>
+            </PanelBody>
+          </Panel>
+        </div>
+      </div>
+    </main>
+  ),
+};