From 76fe468df57618aca5d304e9e6bb37930da5ab16 Mon Sep 17 00:00:00 2001
From: vince <vince@linux-infra.dimensionlab.net>
Date: Fri, 19 Jun 2026 23:45:54 +0200
Subject: [PATCH] feat(storybook): migrate stories to react

---
 .storybook/main.ts                            |  7 +-
 .storybook/preview.ts                         |  2 +-
 src/lib/ui/stories/Badge.stories.svelte       | 21 -----
 src/lib/ui/stories/Badge.stories.tsx          | 16 ++++
 src/lib/ui/stories/Button.stories.svelte      | 19 -----
 src/lib/ui/stories/Button.stories.tsx         | 21 +++++
 .../stories/CornerBracketFrame.stories.svelte | 22 -----
 .../ui/stories/CornerBracketFrame.stories.tsx | 16 ++++
 .../ui/stories/DashboardFrame.stories.svelte  | 15 ----
 src/lib/ui/stories/DashboardFrame.stories.tsx | 21 +++++
 .../ui/stories/DashboardHeader.stories.svelte | 31 -------
 .../ui/stories/DashboardHeader.stories.tsx    | 19 +++++
 .../stories/DashboardOnePager.stories.svelte  | 18 ----
 .../ui/stories/DashboardOnePager.stories.tsx  | 16 ++++
 .../DiagonalStripeField.stories.svelte        | 23 -----
 .../stories/DiagonalStripeField.stories.tsx   | 16 ++++
 src/lib/ui/stories/FocusPreview.svelte        | 33 -------
 src/lib/ui/stories/FooterCell.stories.svelte  | 16 ----
 src/lib/ui/stories/FooterCell.stories.tsx     | 21 +++++
 .../stories/FooterStatusCell.stories.svelte   | 16 ----
 .../ui/stories/FooterStatusCell.stories.tsx   | 16 ++++
 src/lib/ui/stories/GridFrame.stories.svelte   | 37 --------
 src/lib/ui/stories/GridFrame.stories.tsx      | 25 ++++++
 src/lib/ui/stories/IconButton.stories.svelte  | 22 -----
 src/lib/ui/stories/IconButton.stories.tsx     | 16 ++++
 src/lib/ui/stories/IconGlyph.stories.svelte   | 21 -----
 src/lib/ui/stories/IconGlyph.stories.tsx      | 17 ++++
 src/lib/ui/stories/LineChart.stories.svelte   | 13 ---
 src/lib/ui/stories/LineChart.stories.tsx      | 17 ++++
 src/lib/ui/stories/ModuleCard.stories.svelte  | 15 ----
 src/lib/ui/stories/ModuleCard.stories.tsx     | 21 +++++
 src/lib/ui/stories/Panel.stories.svelte       | 42 ---------
 src/lib/ui/stories/Panel.stories.tsx          | 23 +++++
 .../ui/stories/ProgressMeter.stories.svelte   | 16 ----
 src/lib/ui/stories/ProgressMeter.stories.tsx  | 17 ++++
 .../ui/stories/ScanlineField.stories.svelte   | 20 -----
 src/lib/ui/stories/ScanlineField.stories.tsx  | 16 ++++
 src/lib/ui/stories/Separator.stories.svelte   | 21 -----
 src/lib/ui/stories/Separator.stories.tsx      | 15 ++++
 .../stories/ServiceGroupPanel.stories.svelte  | 16 ----
 .../ui/stories/ServiceGroupPanel.stories.tsx  | 16 ++++
 .../ui/stories/ServicePanel.stories.svelte    | 16 ----
 src/lib/ui/stories/ServicePanel.stories.tsx   | 16 ++++
 src/lib/ui/stories/ServiceRow.stories.svelte  | 24 ------
 src/lib/ui/stories/ServiceRow.stories.tsx     | 21 +++++
 src/lib/ui/stories/SignalTrace.stories.svelte | 21 -----
 src/lib/ui/stories/SignalTrace.stories.tsx    | 16 ++++
 src/lib/ui/stories/Sparkline.stories.svelte   | 16 ----
 src/lib/ui/stories/Sparkline.stories.tsx      | 16 ++++
 src/lib/ui/stories/StatusBadge.stories.svelte | 18 ----
 src/lib/ui/stories/StatusBadge.stories.tsx    | 16 ++++
 src/lib/ui/stories/StatusStrip.stories.svelte | 27 ------
 src/lib/ui/stories/StatusStrip.stories.tsx    | 17 ++++
 src/lib/ui/stories/SystemState.stories.svelte | 16 ----
 src/lib/ui/stories/SystemState.stories.tsx    | 18 ++++
 .../ui/stories/TelemetryCard.stories.svelte   | 21 -----
 src/lib/ui/stories/TelemetryCard.stories.tsx  | 21 +++++
 .../ui/stories/TelemetryGrid.stories.svelte   | 15 ----
 src/lib/ui/stories/TelemetryGrid.stories.tsx  | 21 +++++
 .../ui/stories/TelemetryStrip.stories.svelte  | 15 ----
 src/lib/ui/stories/TelemetryStrip.stories.tsx | 16 ++++
 .../ui/stories/WeatherModule.stories.svelte   | 16 ----
 src/lib/ui/stories/WeatherModule.stories.tsx  | 16 ++++
 src/lib/ui/storybook.test.ts                  | 85 ++++++++++---------
 64 files changed, 590 insertions(+), 685 deletions(-)
 delete mode 100644 src/lib/ui/stories/Badge.stories.svelte
 create mode 100644 src/lib/ui/stories/Badge.stories.tsx
 delete mode 100644 src/lib/ui/stories/Button.stories.svelte
 create mode 100644 src/lib/ui/stories/Button.stories.tsx
 delete mode 100644 src/lib/ui/stories/CornerBracketFrame.stories.svelte
 create mode 100644 src/lib/ui/stories/CornerBracketFrame.stories.tsx
 delete mode 100644 src/lib/ui/stories/DashboardFrame.stories.svelte
 create mode 100644 src/lib/ui/stories/DashboardFrame.stories.tsx
 delete mode 100644 src/lib/ui/stories/DashboardHeader.stories.svelte
 create mode 100644 src/lib/ui/stories/DashboardHeader.stories.tsx
 delete mode 100644 src/lib/ui/stories/DashboardOnePager.stories.svelte
 create mode 100644 src/lib/ui/stories/DashboardOnePager.stories.tsx
 delete mode 100644 src/lib/ui/stories/DiagonalStripeField.stories.svelte
 create mode 100644 src/lib/ui/stories/DiagonalStripeField.stories.tsx
 delete mode 100644 src/lib/ui/stories/FocusPreview.svelte
 delete mode 100644 src/lib/ui/stories/FooterCell.stories.svelte
 create mode 100644 src/lib/ui/stories/FooterCell.stories.tsx
 delete mode 100644 src/lib/ui/stories/FooterStatusCell.stories.svelte
 create mode 100644 src/lib/ui/stories/FooterStatusCell.stories.tsx
 delete mode 100644 src/lib/ui/stories/GridFrame.stories.svelte
 create mode 100644 src/lib/ui/stories/GridFrame.stories.tsx
 delete mode 100644 src/lib/ui/stories/IconButton.stories.svelte
 create mode 100644 src/lib/ui/stories/IconButton.stories.tsx
 delete mode 100644 src/lib/ui/stories/IconGlyph.stories.svelte
 create mode 100644 src/lib/ui/stories/IconGlyph.stories.tsx
 delete mode 100644 src/lib/ui/stories/LineChart.stories.svelte
 create mode 100644 src/lib/ui/stories/LineChart.stories.tsx
 delete mode 100644 src/lib/ui/stories/ModuleCard.stories.svelte
 create mode 100644 src/lib/ui/stories/ModuleCard.stories.tsx
 delete mode 100644 src/lib/ui/stories/Panel.stories.svelte
 create mode 100644 src/lib/ui/stories/Panel.stories.tsx
 delete mode 100644 src/lib/ui/stories/ProgressMeter.stories.svelte
 create mode 100644 src/lib/ui/stories/ProgressMeter.stories.tsx
 delete mode 100644 src/lib/ui/stories/ScanlineField.stories.svelte
 create mode 100644 src/lib/ui/stories/ScanlineField.stories.tsx
 delete mode 100644 src/lib/ui/stories/Separator.stories.svelte
 create mode 100644 src/lib/ui/stories/Separator.stories.tsx
 delete mode 100644 src/lib/ui/stories/ServiceGroupPanel.stories.svelte
 create mode 100644 src/lib/ui/stories/ServiceGroupPanel.stories.tsx
 delete mode 100644 src/lib/ui/stories/ServicePanel.stories.svelte
 create mode 100644 src/lib/ui/stories/ServicePanel.stories.tsx
 delete mode 100644 src/lib/ui/stories/ServiceRow.stories.svelte
 create mode 100644 src/lib/ui/stories/ServiceRow.stories.tsx
 delete mode 100644 src/lib/ui/stories/SignalTrace.stories.svelte
 create mode 100644 src/lib/ui/stories/SignalTrace.stories.tsx
 delete mode 100644 src/lib/ui/stories/Sparkline.stories.svelte
 create mode 100644 src/lib/ui/stories/Sparkline.stories.tsx
 delete mode 100644 src/lib/ui/stories/StatusBadge.stories.svelte
 create mode 100644 src/lib/ui/stories/StatusBadge.stories.tsx
 delete mode 100644 src/lib/ui/stories/StatusStrip.stories.svelte
 create mode 100644 src/lib/ui/stories/StatusStrip.stories.tsx
 delete mode 100644 src/lib/ui/stories/SystemState.stories.svelte
 create mode 100644 src/lib/ui/stories/SystemState.stories.tsx
 delete mode 100644 src/lib/ui/stories/TelemetryCard.stories.svelte
 create mode 100644 src/lib/ui/stories/TelemetryCard.stories.tsx
 delete mode 100644 src/lib/ui/stories/TelemetryGrid.stories.svelte
 create mode 100644 src/lib/ui/stories/TelemetryGrid.stories.tsx
 delete mode 100644 src/lib/ui/stories/TelemetryStrip.stories.svelte
 create mode 100644 src/lib/ui/stories/TelemetryStrip.stories.tsx
 delete mode 100644 src/lib/ui/stories/WeatherModule.stories.svelte
 create mode 100644 src/lib/ui/stories/WeatherModule.stories.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 6218a29..cfd3a61 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,15 +1,14 @@
-import type { StorybookConfig } from "@storybook/sveltekit";
+import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|ts|svelte)"],
+  stories: ["../src/**/*.stories.@(js|ts|tsx)"],
   staticDirs: ["../static"],
   addons: [
-    "@storybook/addon-svelte-csf",
     "@storybook/addon-a11y",
     "@storybook/addon-vitest",
   ],
   framework: {
-    name: "@storybook/sveltekit",
+    name: "@storybook/react-vite",
     options: {},
   },
   docs: {
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 54b1eac..59d663d 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,5 +1,5 @@
 import "../src/app.css";
-import type { Preview } from "@storybook/sveltekit";
+import type { Preview } from "@storybook/react-vite";
 import { setupWorker } from "msw/browser";
 import { externalApiHandlers } from "../src/lib/testing/external-api-mocks";
 
diff --git a/src/lib/ui/stories/Badge.stories.svelte b/src/lib/ui/stories/Badge.stories.svelte
deleted file mode 100644
index ac557ff..0000000
--- a/src/lib/ui/stories/Badge.stories.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Badge from "../components/Badge.svelte";
-
-  const { Story } = defineMeta({
-    title: "Base UI/Badge",
-    component: Badge,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Neutral" args={{ label: "Neutral", severity: "neutral" }} />
-<Story name="Ok" args={{ label: "Operational", severity: "ok" }} />
-<Story name="Warning" args={{ label: "Warning", severity: "warning" }} />
-<Story name="Danger" args={{ label: "Incident", severity: "danger" }} />
-<Story name="Stale" args={{ label: "Stale", severity: "stale" }} />
-<Story name="Unavailable" args={{ label: "Unavailable", severity: "unavailable" }} />
-<Story
-  name="Long Label"
-  args={{ label: "Long generic operational label", severity: "warning" }}
-/>
diff --git a/src/lib/ui/stories/Badge.stories.tsx b/src/lib/ui/stories/Badge.stories.tsx
new file mode 100644
index 0000000..d33394d
--- /dev/null
+++ b/src/lib/ui/stories/Badge.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge } from "../components/Badge";
+
+const meta = {
+  title: "UI/Badge",
+  component: Badge,
+  args: {
+    label: "Ready",
+    severity: "ok",
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/lib/ui/stories/Button.stories.svelte b/src/lib/ui/stories/Button.stories.svelte
deleted file mode 100644
index 7c34c3e..0000000
--- a/src/lib/ui/stories/Button.stories.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Button from "../components/Button.svelte";
-
-  const { Story } = defineMeta({
-    title: "Base UI/Button",
-    component: Button,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Default" args={{ label: "Refresh" }} />
-<Story name="Secondary" args={{ label: "Preview", variant: "secondary" }} />
-<Story name="Danger" args={{ label: "Stop", variant: "danger" }} />
-<Story name="Ghost Outline" args={{ label: "Inspect", variant: "ghost" }} />
-<Story name="Disabled" args={{ label: "Publish", disabled: true }} />
-<Story name="Loading" args={{ label: "Sync", loading: true }} />
-<Story name="Icon Leading" args={{ label: "Open", icon: "mdi:open-in-new" }} />
-<Story name="Compact" args={{ label: "Apply", size: "compact" }} />
diff --git a/src/lib/ui/stories/Button.stories.tsx b/src/lib/ui/stories/Button.stories.tsx
new file mode 100644
index 0000000..c207233
--- /dev/null
+++ b/src/lib/ui/stories/Button.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../components/Button";
+
+const meta = {
+  title: "UI/Button",
+  component: Button,
+  args: {
+    label: "Refresh",
+    icon: "mdi:refresh",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+  },
+};
diff --git a/src/lib/ui/stories/CornerBracketFrame.stories.svelte b/src/lib/ui/stories/CornerBracketFrame.stories.svelte
deleted file mode 100644
index 70b8b2a..0000000
--- a/src/lib/ui/stories/CornerBracketFrame.stories.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import CornerBracketFrame from "../components/CornerBracketFrame.svelte";
-  import GridFrame from "../components/GridFrame.svelte";
-
-  const { Story } = defineMeta({
-    title: "Style Primitives/CornerBracketFrame",
-    component: CornerBracketFrame,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Neutral Medium" args={{ tone: "neutral", size: "md" }} />
-<Story name="Accent Tight" args={{ tone: "accent", density: "tight" }} />
-<Story name="Large Danger" args={{ tone: "danger", size: "lg" }} />
-<Story name="Grid Set" asChild>
-  <GridFrame density="compact">
-    <CornerBracketFrame tone="neutral" size="sm" />
-    <CornerBracketFrame tone="accent" size="sm" />
-    <CornerBracketFrame tone="danger" size="sm" density="tight" />
-  </GridFrame>
-</Story>
diff --git a/src/lib/ui/stories/CornerBracketFrame.stories.tsx b/src/lib/ui/stories/CornerBracketFrame.stories.tsx
new file mode 100644
index 0000000..dd7efbf
--- /dev/null
+++ b/src/lib/ui/stories/CornerBracketFrame.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CornerBracketFrame } from "../components/CornerBracketFrame";
+
+const meta = {
+  title: "UI/CornerBracketFrame",
+  component: CornerBracketFrame,
+  args: {
+    tone: "accent",
+    size: "md",
+  },
+} satisfies Meta<typeof CornerBracketFrame>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/lib/ui/stories/DashboardFrame.stories.svelte b/src/lib/ui/stories/DashboardFrame.stories.svelte
deleted file mode 100644
index c31627b..0000000
--- a/src/lib/ui/stories/DashboardFrame.stories.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import DashboardFrame from "../components/DashboardFrame.svelte";
-  import { emptyDashboard, fullCompositionDashboard, primaryDashboard } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Composition/DashboardFrame",
-    component: DashboardFrame,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Generic Runtime" args={{ dashboard: primaryDashboard }} />
-<Story name="Dense Generic Runtime" args={{ dashboard: fullCompositionDashboard }} />
-<Story name="Empty Regions" args={{ dashboard: emptyDashboard }} />
diff --git a/src/lib/ui/stories/DashboardFrame.stories.tsx b/src/lib/ui/stories/DashboardFrame.stories.tsx
new file mode 100644
index 0000000..e1963af
--- /dev/null
+++ b/src/lib/ui/stories/DashboardFrame.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DashboardFrame } from "../components/DashboardFrame";
+import { fullCompositionDashboard, secondaryDashboard } from "./story-data";
+
+const meta = {
+  title: "UI/DashboardFrame",
+  component: DashboardFrame,
+  args: {
+    dashboard: fullCompositionDashboard,
+  },
+} satisfies Meta<typeof DashboardFrame>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FullComposition: Story = {};
+export const Secondary: Story = {
+  args: {
+    dashboard: secondaryDashboard,
+  },
+};
diff --git a/src/lib/ui/stories/DashboardHeader.stories.svelte b/src/lib/ui/stories/DashboardHeader.stories.svelte
deleted file mode 100644
index 10d2133..0000000
--- a/src/lib/ui/stories/DashboardHeader.stories.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import DashboardHeader from "../components/DashboardHeader.svelte";
-  import { moduleBlocks } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Composition/DashboardHeader",
-    component: DashboardHeader,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story
-  name="Title Subtitle Module"
-  args={{
-    eyebrow: "Command Surface",
-    title: "Operations Console",
-    subtitle: "Capacity and queue health",
-    module: moduleBlocks.compact,
-  }}
-/>
-<Story
-  name="Long Title"
-  args={{
-    eyebrow: "Preview Surface",
-    title: "Long Generic Dashboard Title That Must Wrap",
-    subtitle: "Secondary status text wraps independently",
-    module: moduleBlocks.long,
-  }}
-/>
-<Story name="No Module" args={{ title: "Standalone Console", subtitle: "Header without side module" }} />
diff --git a/src/lib/ui/stories/DashboardHeader.stories.tsx b/src/lib/ui/stories/DashboardHeader.stories.tsx
new file mode 100644
index 0000000..8263dd1
--- /dev/null
+++ b/src/lib/ui/stories/DashboardHeader.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DashboardHeader } from "../components/DashboardHeader";
+import { moduleBlocks } from "./story-data";
+
+const meta = {
+  title: "UI/DashboardHeader",
+  component: DashboardHeader,
+  args: {
+    eyebrow: "Preview Surface",
+    title: "Operations Console",
+    subtitle: "Generic dashboard header",
+    module: moduleBlocks.compact,
+  },
+} satisfies Meta<typeof DashboardHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithModule: Story = {};
diff --git a/src/lib/ui/stories/DashboardOnePager.stories.svelte b/src/lib/ui/stories/DashboardOnePager.stories.svelte
deleted file mode 100644
index 8af2c5e..0000000
--- a/src/lib/ui/stories/DashboardOnePager.stories.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import DashboardFrame from "../components/DashboardFrame.svelte";
-  import { fullCompositionDashboard } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Composition/DashboardOnePager",
-    component: DashboardFrame,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Desktop Generic Dashboard" args={{ dashboard: fullCompositionDashboard }} />
-<Story name="Mobile Generic Dashboard" asChild>
-  <div style="max-width: 390px">
-    <DashboardFrame dashboard={fullCompositionDashboard} />
-  </div>
-</Story>
diff --git a/src/lib/ui/stories/DashboardOnePager.stories.tsx b/src/lib/ui/stories/DashboardOnePager.stories.tsx
new file mode 100644
index 0000000..c44364b
--- /dev/null
+++ b/src/lib/ui/stories/DashboardOnePager.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DashboardFrame } from "../components/DashboardFrame";
+import { fullCompositionDashboard } from "./story-data";
+
+const meta = {
+  title: "UI/DashboardOnePager",
+  component: DashboardFrame,
+  args: {
+    dashboard: fullCompositionDashboard,
+  },
+} satisfies Meta<typeof DashboardFrame>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OnePager: Story = {};
diff --git a/src/lib/ui/stories/DiagonalStripeField.stories.svelte b/src/lib/ui/stories/DiagonalStripeField.stories.svelte
deleted file mode 100644
index f1dcb77..0000000
--- a/src/lib/ui/stories/DiagonalStripeField.stories.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import DiagonalStripeField from "../components/DiagonalStripeField.svelte";
-  import Panel from "../components/Panel.svelte";
-  import SignalTrace from "../components/SignalTrace.svelte";
-
-  const { Story } = defineMeta({
-    title: "Style Primitives/DiagonalStripeField",
-    component: DiagonalStripeField,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Accent Regular" args={{ density: "regular", tone: "accent", size: "md" }} />
-<Story name="Tight Warning" args={{ density: "tight", tone: "warning", direction: "backward" }} />
-<Story name="Large Danger" args={{ density: "open", tone: "danger", size: "lg" }} />
-<Story name="Composed Divider" asChild>
-  <Panel title="Generic Surface">
-    <DiagonalStripeField density="tight" size="sm" />
-    <SignalTrace tone="accent" />
-    <DiagonalStripeField direction="backward" tone="neutral" />
-  </Panel>
-</Story>
diff --git a/src/lib/ui/stories/DiagonalStripeField.stories.tsx b/src/lib/ui/stories/DiagonalStripeField.stories.tsx
new file mode 100644
index 0000000..4ca01f2
--- /dev/null
+++ b/src/lib/ui/stories/DiagonalStripeField.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DiagonalStripeField } from "../components/DiagonalStripeField";
+
+const meta = {
+  title: "UI/DiagonalStripeField",
+  component: DiagonalStripeField,
+  args: {
+    tone: "accent",
+    density: "regular",
+  },
+} satisfies Meta<typeof DiagonalStripeField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/lib/ui/stories/FocusPreview.svelte b/src/lib/ui/stories/FocusPreview.svelte
deleted file mode 100644
index 514691f..0000000
--- a/src/lib/ui/stories/FocusPreview.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { onMount, tick, type Snippet } from "svelte";
-
-  let {
-    children,
-    selector = "button, a[href]",
-  }: {
-    children?: Snippet;
-    selector?: string;
-  } = $props();
-
-  let root: HTMLDivElement;
-
-  onMount(async () => {
-    await tick();
-    root.querySelector<HTMLElement>(selector)?.focus();
-  });
-</script>
-
-<div class="focus-preview" bind:this={root}>
-  {@render children?.()}
-</div>
-
-<style>
-  .focus-preview {
-    display: inline-grid;
-    padding: var(--ui-space-2);
-  }
-
-  .focus-preview :global(:is(a, button)) {
-    box-shadow: var(--ui-focus-ring);
-  }
-</style>
diff --git a/src/lib/ui/stories/FooterCell.stories.svelte b/src/lib/ui/stories/FooterCell.stories.svelte
deleted file mode 100644
index cb4a08e..0000000
--- a/src/lib/ui/stories/FooterCell.stories.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import FooterCell from "../components/FooterCell.svelte";
-  import { statusItems } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/FooterCell",
-    component: FooterCell,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Label Value" args={{ item: statusItems.ok }} />
-<Story name="Action Cell" args={{ item: statusItems.action }} />
-<Story name="Stale" args={{ item: statusItems.stale }} />
-<Story name="Long Value" args={{ item: statusItems.long }} />
diff --git a/src/lib/ui/stories/FooterCell.stories.tsx b/src/lib/ui/stories/FooterCell.stories.tsx
new file mode 100644
index 0000000..3ba26c7
--- /dev/null
+++ b/src/lib/ui/stories/FooterCell.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FooterCell } from "../components/FooterCell";
+import { statusItems } from "./story-data";
+
+const meta = {
+  title: "UI/FooterCell",
+  component: FooterCell,
+  args: {
+    item: statusItems.ok,
+  },
+} satisfies Meta<typeof FooterCell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Operational: Story = {};
+export const Linked: Story = {
+  args: {
+    item: statusItems.action,
+  },
+};
diff --git a/src/lib/ui/stories/FooterStatusCell.stories.svelte b/src/lib/ui/stories/FooterStatusCell.stories.svelte
deleted file mode 100644
index 578cb11..0000000
--- a/src/lib/ui/stories/FooterStatusCell.stories.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import FooterStatusCell from "../components/FooterStatusCell.svelte";
-  import { statusItems } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/FooterStatusCell",
-    component: FooterStatusCell,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Label Value" args={{ item: statusItems.ok }} />
-<Story name="Action Cell" args={{ item: statusItems.action }} />
-<Story name="Stale" args={{ item: statusItems.stale }} />
-<Story name="Long Value" args={{ item: statusItems.long }} />
diff --git a/src/lib/ui/stories/FooterStatusCell.stories.tsx b/src/lib/ui/stories/FooterStatusCell.stories.tsx
new file mode 100644
index 0000000..8097ba3
--- /dev/null
+++ b/src/lib/ui/stories/FooterStatusCell.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FooterStatusCell } from "../components/FooterStatusCell";
+import { statusItems } from "./story-data";
+
+const meta = {
+  title: "UI/FooterStatusCell",
+  component: FooterStatusCell,
+  args: {
+    item: statusItems.degraded,
+  },
+} satisfies Meta<typeof FooterStatusCell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Warning: Story = {};
diff --git a/src/lib/ui/stories/GridFrame.stories.svelte b/src/lib/ui/stories/GridFrame.stories.svelte
deleted file mode 100644
index d8be595..0000000
--- a/src/lib/ui/stories/GridFrame.stories.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import GridFrame from "../components/GridFrame.svelte";
-  import SystemState from "../components/SystemState.svelte";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/GridFrame",
-    component: GridFrame,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Desktop Grid" asChild>
-  <GridFrame>
-    <SystemState title="Cell One" />
-    <SystemState title="Cell Two" />
-    <SystemState title="Cell Three" />
-    <SystemState title="Cell Four" />
-  </GridFrame>
-</Story>
-<Story name="Tablet Wrap" asChild>
-  <div style="max-width: 760px">
-    <GridFrame density="dense">
-      <SystemState title="Cell One" />
-      <SystemState title="Cell Two" />
-      <SystemState title="Cell Three" />
-    </GridFrame>
-  </div>
-</Story>
-<Story name="Mobile Stack" asChild>
-  <div style="max-width: 390px">
-    <GridFrame density="compact">
-      <SystemState title="Cell One" />
-      <SystemState title="Cell Two" />
-    </GridFrame>
-  </div>
-</Story>
diff --git a/src/lib/ui/stories/GridFrame.stories.tsx b/src/lib/ui/stories/GridFrame.stories.tsx
new file mode 100644
index 0000000..a43ad22
--- /dev/null
+++ b/src/lib/ui/stories/GridFrame.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { GridFrame } from "../components/GridFrame";
+import { ModuleCard } from "../components/ModuleCard";
+import { moduleBlocks } from "./story-data";
+
+const meta = {
+  title: "UI/GridFrame",
+  component: GridFrame,
+  render: (args) => (
+    <GridFrame {...args}>
+      <ModuleCard module={moduleBlocks.compact} />
+      <ModuleCard module={moduleBlocks.unavailable} />
+      <ModuleCard module={moduleBlocks.long} />
+    </GridFrame>
+  ),
+} satisfies Meta<typeof GridFrame>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Dense: Story = {
+  args: {
+    density: "dense",
+  },
+};
diff --git a/src/lib/ui/stories/IconButton.stories.svelte b/src/lib/ui/stories/IconButton.stories.svelte
deleted file mode 100644
index faa05b6..0000000
--- a/src/lib/ui/stories/IconButton.stories.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import IconButton from "../components/IconButton.svelte";
-  import FocusPreview from "./FocusPreview.svelte";
-
-  const { Story } = defineMeta({
-    title: "Base UI/IconButton",
-    component: IconButton,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Refresh" args={{ icon: "mdi:refresh", label: "Refresh" }} />
-<Story name="Open" args={{ icon: "mdi:open-in-new", label: "Open" }} />
-<Story name="Inspect" args={{ icon: "mdi:magnify-scan", label: "Inspect" }} />
-<Story name="Disabled" args={{ icon: "mdi:refresh", label: "Disabled", disabled: true }} />
-<Story name="Active" args={{ icon: "mdi:refresh", label: "Active", active: true }} />
-<Story name="Focus Visible" asChild>
-  <FocusPreview>
-    <IconButton icon="mdi:keyboard" label="Focus visible" />
-  </FocusPreview>
-</Story>
diff --git a/src/lib/ui/stories/IconButton.stories.tsx b/src/lib/ui/stories/IconButton.stories.tsx
new file mode 100644
index 0000000..35b58b9
--- /dev/null
+++ b/src/lib/ui/stories/IconButton.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { IconButton } from "../components/IconButton";
+
+const meta = {
+  title: "UI/IconButton",
+  component: IconButton,
+  args: {
+    icon: "mdi:refresh",
+    label: "Refresh status",
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/lib/ui/stories/IconGlyph.stories.svelte b/src/lib/ui/stories/IconGlyph.stories.svelte
deleted file mode 100644
index 043e7b3..0000000
--- a/src/lib/ui/stories/IconGlyph.stories.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import IconGlyph from "../components/IconGlyph.svelte";
-
-  const { Story } = defineMeta({
-    title: "Base UI/IconGlyph",
-    component: IconGlyph,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Valid Icon" args={{ name: "mdi:server-network" }} />
-<Story name="Missing Icon Fallback" args={{ name: undefined }} />
-<Story name="Small" args={{ name: "mdi:radar", size: "sm" }} />
-<Story name="Medium" args={{ name: "mdi:radar", size: "md" }} />
-<Story name="Large" args={{ name: "mdi:radar", size: "lg" }} />
-<Story name="Severity Color" asChild>
-  <div style="color: var(--ui-color-warning)">
-    <IconGlyph name="mdi:alert-outline" size="lg" />
-  </div>
-</Story>
diff --git a/src/lib/ui/stories/IconGlyph.stories.tsx b/src/lib/ui/stories/IconGlyph.stories.tsx
new file mode 100644
index 0000000..3f1715a
--- /dev/null
+++ b/src/lib/ui/stories/IconGlyph.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { IconGlyph } from "../components/IconGlyph";
+
+const meta = {
+  title: "UI/IconGlyph",
+  component: IconGlyph,
+  args: {
+    name: "mdi:server-network",
+    label: "Generic service",
+    size: "md",
+  },
+} satisfies Meta<typeof IconGlyph>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/lib/ui/stories/LineChart.stories.svelte b/src/lib/ui/stories/LineChart.stories.svelte
deleted file mode 100644
index ef1ad22..0000000
--- a/src/lib/ui/stories/LineChart.stories.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import LineChart from "../components/LineChart.svelte";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/LineChart",
-    component: LineChart,
-  });
-</script>
-
-<Story name="Neutral Trend" args={{ values: [12, 18, 15, 28, 24, 32] }} />
-<Story name="Warning Trend" args={{ values: [22, 34, 48, 62, 74, 70], severity: "warning" }} />
-<Story name="Danger Trend" args={{ values: [20, 40, 64, 82, 90, 94], severity: "danger" }} />
diff --git a/src/lib/ui/stories/LineChart.stories.tsx b/src/lib/ui/stories/LineChart.stories.tsx
new file mode 100644
index 0000000..bbf8690
--- /dev/null
+++ b/src/lib/ui/stories/LineChart.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LineChart } from "../components/LineChart";
+
+const meta = {
+  title: "UI/LineChart",
+  component: LineChart,
+  args: {
+    values: [12, 18, 24, 20, 36, 44],
+    severity: "ok",
+    label: "Generic trend",
+  },
+} satisfies Meta<typeof LineChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Trend: Story = {};
diff --git a/src/lib/ui/stories/ModuleCard.stories.svelte b/src/lib/ui/stories/ModuleCard.stories.svelte
deleted file mode 100644
index 890a3ca..0000000
--- a/src/lib/ui/stories/ModuleCard.stories.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ModuleCard from "../components/ModuleCard.svelte";
-  import { moduleBlocks } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/ModuleCard",
-    component: ModuleCard,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Compact Summary" args={{ module: moduleBlocks.compact }} />
-<Story name="Unavailable" args={{ module: moduleBlocks.unavailable }} />
-<Story name="Long Value" args={{ module: moduleBlocks.long }} />
diff --git a/src/lib/ui/stories/ModuleCard.stories.tsx b/src/lib/ui/stories/ModuleCard.stories.tsx
new file mode 100644
index 0000000..3366a55
--- /dev/null
+++ b/src/lib/ui/stories/ModuleCard.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ModuleCard } from "../components/ModuleCard";
+import { moduleBlocks } from "./story-data";
+
+const meta = {
+  title: "UI/ModuleCard",
+  component: ModuleCard,
+  args: {
+    module: moduleBlocks.compact,
+  },
+} satisfies Meta<typeof ModuleCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Compact: Story = {};
+export const Long: Story = {
+  args: {
+    module: moduleBlocks.long,
+  },
+};
diff --git a/src/lib/ui/stories/Panel.stories.svelte b/src/lib/ui/stories/Panel.stories.svelte
deleted file mode 100644
index c3d3a80..0000000
--- a/src/lib/ui/stories/Panel.stories.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Panel from "../components/Panel.svelte";
-  import SystemState from "../components/SystemState.svelte";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/Panel",
-    component: Panel,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Default" asChild>
-  <Panel title="Generic Panel">
-    <p>Reusable panel content.</p>
-  </Panel>
-</Story>
-<Story name="Dense" asChild>
-  <Panel title="Dense Panel" density="compact">
-    <p>Compact repeated content.</p>
-  </Panel>
-</Story>
-<Story name="Warning" asChild>
-  <Panel title="Warning Panel">
-    <SystemState title="Warning" detail="Generic warning state" severity="warning" />
-  </Panel>
-</Story>
-<Story name="Danger" asChild>
-  <Panel title="Danger Panel">
-    <SystemState title="Danger" detail="Generic danger state" severity="danger" />
-  </Panel>
-</Story>
-<Story name="Empty" asChild>
-  <Panel title="Empty Panel">
-    <SystemState title="Empty" detail="No generic records available" severity="neutral" />
-  </Panel>
-</Story>
-<Story name="Nested Content Guard" asChild>
-  <Panel title="Outer Panel">
-    <SystemState title="Nested content" detail="No nested card styling required" />
-  </Panel>
-</Story>
diff --git a/src/lib/ui/stories/Panel.stories.tsx b/src/lib/ui/stories/Panel.stories.tsx
new file mode 100644
index 0000000..730c2d9
--- /dev/null
+++ b/src/lib/ui/stories/Panel.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Panel } from "../components/Panel";
+import { ServiceRow } from "../components/ServiceRow";
+import { serviceRows } from "./story-data";
+
+const meta = {
+  title: "UI/Panel",
+  component: Panel,
+  render: (args) => (
+    <Panel {...args}>
+      <ServiceRow service={serviceRows.normal} />
+      <ServiceRow service={serviceRows.degraded} />
+    </Panel>
+  ),
+  args: {
+    title: "Generic Panel",
+  },
+} satisfies Meta<typeof Panel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Dense: Story = {};
diff --git a/src/lib/ui/stories/ProgressMeter.stories.svelte b/src/lib/ui/stories/ProgressMeter.stories.svelte
deleted file mode 100644
index 861009f..0000000
--- a/src/lib/ui/stories/ProgressMeter.stories.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ProgressMeter from "../components/ProgressMeter.svelte";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/ProgressMeter",
-    component: ProgressMeter,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Low" args={{ value: 12, label: "Low progress" }} />
-<Story name="Normal" args={{ value: 63, severity: "ok", label: "Normal progress" }} />
-<Story name="Warn" args={{ value: 76, severity: "warning", label: "Warning progress" }} />
-<Story name="Danger" args={{ value: 94, severity: "danger", label: "Danger progress" }} />
-<Story name="Empty" args={{ value: undefined, label: "Missing progress" }} />
diff --git a/src/lib/ui/stories/ProgressMeter.stories.tsx b/src/lib/ui/stories/ProgressMeter.stories.tsx
new file mode 100644
index 0000000..d3bfdac
--- /dev/null
+++ b/src/lib/ui/stories/ProgressMeter.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ProgressMeter } from "../components/ProgressMeter";
+
+const meta = {
+  title: "UI/ProgressMeter",
+  component: ProgressMeter,
+  args: {
+    value: 72,
+    severity: "ok",
+    label: "Capacity",
+  },
+} satisfies Meta<typeof ProgressMeter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Filled: Story = {};
diff --git a/src/lib/ui/stories/ScanlineField.stories.svelte b/src/lib/ui/stories/ScanlineField.stories.svelte
deleted file mode 100644
index cc993f7..0000000
--- a/src/lib/ui/stories/ScanlineField.stories.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ScanlineField from "../components/ScanlineField.svelte";
-  import Panel from "../components/Panel.svelte";
-
-  const { Story } = defineMeta({
-    title: "Style Primitives/ScanlineField",
-    component: ScanlineField,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Soft Neutral" args={{ intensity: "soft", tone: "neutral", size: "md" }} />
-<Story name="Medium Accent" args={{ intensity: "medium", tone: "accent", size: "md" }} />
-<Story name="Hard Warning" args={{ intensity: "hard", tone: "warning", size: "lg" }} />
-<Story name="Panel Backdrop" asChild>
-  <Panel title="Signal Surface">
-    <ScanlineField intensity="hard" tone="accent" />
-  </Panel>
-</Story>
diff --git a/src/lib/ui/stories/ScanlineField.stories.tsx b/src/lib/ui/stories/ScanlineField.stories.tsx
new file mode 100644
index 0000000..89e554e
--- /dev/null
+++ b/src/lib/ui/stories/ScanlineField.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ScanlineField } from "../components/ScanlineField";
+
+const meta = {
+  title: "UI/ScanlineField",
+  component: ScanlineField,
+  args: {
+    tone: "accent",
+    intensity: "medium",
+  },
+} satisfies Meta<typeof ScanlineField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/lib/ui/stories/Separator.stories.svelte b/src/lib/ui/stories/Separator.stories.svelte
deleted file mode 100644
index 3f2f6e3..0000000
--- a/src/lib/ui/stories/Separator.stories.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Separator from "../components/Separator.svelte";
-  import Panel from "../components/Panel.svelte";
-
-  const { Story } = defineMeta({
-    title: "Base UI/Separator",
-    component: Separator,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Horizontal" args={{ orientation: "horizontal" }} />
-<Story name="Vertical" args={{ orientation: "vertical" }} />
-<Story name="Dense Panel Use" asChild>
-  <Panel title="Dense Panel">
-    <p>Generic section one</p>
-    <Separator dense />
-    <p>Generic section two</p>
-  </Panel>
-</Story>
diff --git a/src/lib/ui/stories/Separator.stories.tsx b/src/lib/ui/stories/Separator.stories.tsx
new file mode 100644
index 0000000..e261f52
--- /dev/null
+++ b/src/lib/ui/stories/Separator.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Separator } from "../components/Separator";
+
+const meta = {
+  title: "UI/Separator",
+  component: Separator,
+  args: {
+    orientation: "horizontal",
+  },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {};
diff --git a/src/lib/ui/stories/ServiceGroupPanel.stories.svelte b/src/lib/ui/stories/ServiceGroupPanel.stories.svelte
deleted file mode 100644
index 51c48bd..0000000
--- a/src/lib/ui/stories/ServiceGroupPanel.stories.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ServiceGroupPanel from "../components/ServiceGroupPanel.svelte";
-  import { serviceGroups } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/ServiceGroupPanel",
-    component: ServiceGroupPanel,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Short List" args={{ group: serviceGroups.short }} />
-<Story name="Long List" args={{ group: serviceGroups.long }} />
-<Story name="Empty Group" args={{ group: serviceGroups.empty }} />
-<Story name="Mixed Statuses" args={{ group: serviceGroups.mixed }} />
diff --git a/src/lib/ui/stories/ServiceGroupPanel.stories.tsx b/src/lib/ui/stories/ServiceGroupPanel.stories.tsx
new file mode 100644
index 0000000..7183771
--- /dev/null
+++ b/src/lib/ui/stories/ServiceGroupPanel.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ServiceGroupPanel } from "../components/ServiceGroupPanel";
+import { serviceGroups } from "./story-data";
+
+const meta = {
+  title: "UI/ServiceGroupPanel",
+  component: ServiceGroupPanel,
+  args: {
+    group: serviceGroups.mixed,
+  },
+} satisfies Meta<typeof ServiceGroupPanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Mixed: Story = {};
diff --git a/src/lib/ui/stories/ServicePanel.stories.svelte b/src/lib/ui/stories/ServicePanel.stories.svelte
deleted file mode 100644
index 059b63b..0000000
--- a/src/lib/ui/stories/ServicePanel.stories.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ServicePanel from "../components/ServicePanel.svelte";
-  import { serviceGroups } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/ServicePanel",
-    component: ServicePanel,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Short List" args={{ group: serviceGroups.short }} />
-<Story name="Long List" args={{ group: serviceGroups.long }} />
-<Story name="Empty Group" args={{ group: serviceGroups.empty }} />
-<Story name="Mixed Statuses" args={{ group: serviceGroups.mixed }} />
diff --git a/src/lib/ui/stories/ServicePanel.stories.tsx b/src/lib/ui/stories/ServicePanel.stories.tsx
new file mode 100644
index 0000000..750c428
--- /dev/null
+++ b/src/lib/ui/stories/ServicePanel.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ServicePanel } from "../components/ServicePanel";
+import { serviceGroups } from "./story-data";
+
+const meta = {
+  title: "UI/ServicePanel",
+  component: ServicePanel,
+  args: {
+    group: serviceGroups.long,
+  },
+} satisfies Meta<typeof ServicePanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LongList: Story = {};
diff --git a/src/lib/ui/stories/ServiceRow.stories.svelte b/src/lib/ui/stories/ServiceRow.stories.svelte
deleted file mode 100644
index 7be9f19..0000000
--- a/src/lib/ui/stories/ServiceRow.stories.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ServiceRow from "../components/ServiceRow.svelte";
-  import FocusPreview from "./FocusPreview.svelte";
-  import { serviceRows } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/ServiceRow",
-    component: ServiceRow,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Normal" args={{ service: serviceRows.normal }} />
-<Story name="Down" args={{ service: serviceRows.down }} />
-<Story name="Degraded" args={{ service: serviceRows.degraded }} />
-<Story name="Stale" args={{ service: serviceRows.stale }} />
-<Story name="No Link" args={{ service: serviceRows.noLink }} />
-<Story name="Long Title Description" args={{ service: serviceRows.long }} />
-<Story name="Keyboard Focus" asChild>
-  <FocusPreview selector="a">
-    <ServiceRow service={serviceRows.normal} />
-  </FocusPreview>
-</Story>
diff --git a/src/lib/ui/stories/ServiceRow.stories.tsx b/src/lib/ui/stories/ServiceRow.stories.tsx
new file mode 100644
index 0000000..9513d2c
--- /dev/null
+++ b/src/lib/ui/stories/ServiceRow.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ServiceRow } from "../components/ServiceRow";
+import { serviceRows } from "./story-data";
+
+const meta = {
+  title: "UI/ServiceRow",
+  component: ServiceRow,
+  args: {
+    service: serviceRows.normal,
+  },
+} satisfies Meta<typeof ServiceRow>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Normal: Story = {};
+export const Warning: Story = {
+  args: {
+    service: serviceRows.degraded,
+  },
+};
diff --git a/src/lib/ui/stories/SignalTrace.stories.svelte b/src/lib/ui/stories/SignalTrace.stories.svelte
deleted file mode 100644
index 0130817..0000000
--- a/src/lib/ui/stories/SignalTrace.stories.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import SignalTrace from "../components/SignalTrace.svelte";
-  import Panel from "../components/Panel.svelte";
-
-  const { Story } = defineMeta({
-    title: "Style Primitives/SignalTrace",
-    component: SignalTrace,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Horizontal Accent" args={{ tone: "accent", orientation: "horizontal" }} />
-<Story name="Horizontal Warning Tight" args={{ tone: "warning", density: "tight" }} />
-<Story name="Vertical Neutral" args={{ tone: "neutral", orientation: "vertical" }} />
-<Story name="Panel Trace" asChild>
-  <Panel title="Generic Flow">
-    <SignalTrace tone="accent" />
-    <SignalTrace tone="warning" density="tight" />
-  </Panel>
-</Story>
diff --git a/src/lib/ui/stories/SignalTrace.stories.tsx b/src/lib/ui/stories/SignalTrace.stories.tsx
new file mode 100644
index 0000000..ae8785b
--- /dev/null
+++ b/src/lib/ui/stories/SignalTrace.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SignalTrace } from "../components/SignalTrace";
+
+const meta = {
+  title: "UI/SignalTrace",
+  component: SignalTrace,
+  args: {
+    tone: "accent",
+    orientation: "horizontal",
+  },
+} satisfies Meta<typeof SignalTrace>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {};
diff --git a/src/lib/ui/stories/Sparkline.stories.svelte b/src/lib/ui/stories/Sparkline.stories.svelte
deleted file mode 100644
index 62744bd..0000000
--- a/src/lib/ui/stories/Sparkline.stories.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Sparkline from "../components/Sparkline.svelte";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/Sparkline",
-    component: Sparkline,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Flat" args={{ values: [20, 20, 20, 20, 20, 20] }} />
-<Story name="Rising" args={{ values: [4, 12, 18, 28, 38, 54], severity: "ok" }} />
-<Story name="Spiky" args={{ values: [8, 50, 12, 64, 18, 72], severity: "warning" }} />
-<Story name="Missing Data" args={{ values: [] }} />
-<Story name="Stale" args={{ values: [32, 31, 31, 30, 30, 30], severity: "stale" }} />
diff --git a/src/lib/ui/stories/Sparkline.stories.tsx b/src/lib/ui/stories/Sparkline.stories.tsx
new file mode 100644
index 0000000..efecfbd
--- /dev/null
+++ b/src/lib/ui/stories/Sparkline.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Sparkline } from "../components/Sparkline";
+
+const meta = {
+  title: "UI/Sparkline",
+  component: Sparkline,
+  args: {
+    values: [8, 14, 12, 24, 18, 30],
+    severity: "ok",
+  },
+} satisfies Meta<typeof Sparkline>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/lib/ui/stories/StatusBadge.stories.svelte b/src/lib/ui/stories/StatusBadge.stories.svelte
deleted file mode 100644
index 1429ceb..0000000
--- a/src/lib/ui/stories/StatusBadge.stories.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import StatusBadge from "../components/StatusBadge.svelte";
-
-  const { Story } = defineMeta({
-    title: "Base UI/StatusBadge",
-    component: StatusBadge,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Neutral" args={{ label: "Neutral" }} />
-<Story name="Ok" args={{ label: "Operational", severity: "ok" }} />
-<Story name="Warning" args={{ label: "Warning", severity: "warning" }} />
-<Story name="Danger" args={{ label: "Danger", severity: "danger" }} />
-<Story name="Stale" args={{ label: "Stale", severity: "stale" }} />
-<Story name="Unavailable" args={{ label: "Unavailable", severity: "unavailable" }} />
-<Story name="Long Label" args={{ label: "Long Generic Badge Label", severity: "neutral" }} />
diff --git a/src/lib/ui/stories/StatusBadge.stories.tsx b/src/lib/ui/stories/StatusBadge.stories.tsx
new file mode 100644
index 0000000..4513a08
--- /dev/null
+++ b/src/lib/ui/stories/StatusBadge.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StatusBadge } from "../components/StatusBadge";
+
+const meta = {
+  title: "UI/StatusBadge",
+  component: StatusBadge,
+  args: {
+    label: "Ready",
+    severity: "ok",
+  },
+} satisfies Meta<typeof StatusBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Ready: Story = {};
diff --git a/src/lib/ui/stories/StatusStrip.stories.svelte b/src/lib/ui/stories/StatusStrip.stories.svelte
deleted file mode 100644
index 7b6d22d..0000000
--- a/src/lib/ui/stories/StatusStrip.stories.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import StatusStrip from "../components/StatusStrip.svelte";
-  import { mixedStatusStrip, statusItems } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/StatusStrip",
-    component: StatusStrip,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story
-  name="All Operational"
-  args={{
-    items: [
-      { ...statusItems.ok, id: "status-ok-a" },
-      { ...statusItems.ok, id: "status-ok-b", label: "Queue" },
-      { ...statusItems.ok, id: "status-ok-c", label: "Sync" },
-    ],
-  }}
-/>
-<Story name="Degraded" args={{ items: [statusItems.ok, statusItems.degraded, statusItems.stale] }} />
-<Story name="Incident" args={{ items: [statusItems.ok, statusItems.incident, statusItems.degraded] }} />
-<Story name="Syncing" args={{ items: [statusItems.syncing, statusItems.ok, statusItems.action] }} />
-<Story name="Stale" args={{ items: [statusItems.stale, statusItems.long] }} />
-<Story name="Mixed Compact" args={{ items: mixedStatusStrip, compact: true }} />
diff --git a/src/lib/ui/stories/StatusStrip.stories.tsx b/src/lib/ui/stories/StatusStrip.stories.tsx
new file mode 100644
index 0000000..7b808fa
--- /dev/null
+++ b/src/lib/ui/stories/StatusStrip.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StatusStrip } from "../components/StatusStrip";
+import { mixedStatusStrip } from "./story-data";
+
+const meta = {
+  title: "UI/StatusStrip",
+  component: StatusStrip,
+  args: {
+    id: "generic-status",
+    items: mixedStatusStrip,
+  },
+} satisfies Meta<typeof StatusStrip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Mixed: Story = {};
diff --git a/src/lib/ui/stories/SystemState.stories.svelte b/src/lib/ui/stories/SystemState.stories.svelte
deleted file mode 100644
index 0e28282..0000000
--- a/src/lib/ui/stories/SystemState.stories.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import SystemState from "../components/SystemState.svelte";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/SystemState",
-    component: SystemState,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Loading" args={{ title: "Loading", detail: "Waiting for records", severity: "loading", icon: "mdi:progress-clock" }} />
-<Story name="Empty" args={{ title: "Empty", detail: "No generic records available", icon: "mdi:tray" }} />
-<Story name="Error" args={{ title: "Error", detail: "Generic request failed", severity: "danger", icon: "mdi:alert-octagon-outline" }} />
-<Story name="Unavailable" args={{ title: "Unavailable", detail: "External signal unavailable", severity: "unavailable", icon: "mdi:cloud-off-outline" }} />
-<Story name="Validation Failure" args={{ title: "Validation Failure", detail: "Document did not match schema", severity: "warning", icon: "mdi:file-alert-outline" }} />
diff --git a/src/lib/ui/stories/SystemState.stories.tsx b/src/lib/ui/stories/SystemState.stories.tsx
new file mode 100644
index 0000000..585540e
--- /dev/null
+++ b/src/lib/ui/stories/SystemState.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SystemState } from "../components/SystemState";
+
+const meta = {
+  title: "UI/SystemState",
+  component: SystemState,
+  args: {
+    title: "Loading Dashboard",
+    detail: "Fetching active model",
+    severity: "loading",
+    icon: "mdi:progress-clock",
+  },
+} satisfies Meta<typeof SystemState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Loading: Story = {};
diff --git a/src/lib/ui/stories/TelemetryCard.stories.svelte b/src/lib/ui/stories/TelemetryCard.stories.svelte
deleted file mode 100644
index 004f47b..0000000
--- a/src/lib/ui/stories/TelemetryCard.stories.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import TelemetryCard from "../components/TelemetryCard.svelte";
-  import { telemetryCards } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/TelemetryCard",
-    component: TelemetryCard,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Percent" args={{ card: telemetryCards.percent }} />
-<Story name="Bytes" args={{ card: telemetryCards.bytes }} />
-<Story name="Temperature" args={{ card: telemetryCards.temperature }} />
-<Story name="Latency" args={{ card: telemetryCards.latency }} />
-<Story name="No Data" args={{ card: telemetryCards.unavailable }} />
-<Story name="Stale" args={{ card: telemetryCards.stale }} />
-<Story name="Warning" args={{ card: telemetryCards.latency }} />
-<Story name="Danger" args={{ card: telemetryCards.danger }} />
-<Story name="Long Source Label" args={{ card: telemetryCards.long }} />
diff --git a/src/lib/ui/stories/TelemetryCard.stories.tsx b/src/lib/ui/stories/TelemetryCard.stories.tsx
new file mode 100644
index 0000000..dbdf301
--- /dev/null
+++ b/src/lib/ui/stories/TelemetryCard.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TelemetryCard } from "../components/TelemetryCard";
+import { telemetryCards } from "./story-data";
+
+const meta = {
+  title: "UI/TelemetryCard",
+  component: TelemetryCard,
+  args: {
+    card: telemetryCards.percent,
+  },
+} satisfies Meta<typeof TelemetryCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Percent: Story = {};
+export const Danger: Story = {
+  args: {
+    card: telemetryCards.danger,
+  },
+};
diff --git a/src/lib/ui/stories/TelemetryGrid.stories.svelte b/src/lib/ui/stories/TelemetryGrid.stories.svelte
deleted file mode 100644
index 8054cc9..0000000
--- a/src/lib/ui/stories/TelemetryGrid.stories.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import TelemetryGrid from "../components/TelemetryGrid.svelte";
-  import { eightTelemetryCards, sixteenTelemetryCards } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/TelemetryGrid",
-    component: TelemetryGrid,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Eight Card Density" args={{ cards: eightTelemetryCards }} />
-<Story name="Sixteen Card Density" args={{ cards: sixteenTelemetryCards }} />
-<Story name="Empty" args={{ cards: [] }} />
diff --git a/src/lib/ui/stories/TelemetryGrid.stories.tsx b/src/lib/ui/stories/TelemetryGrid.stories.tsx
new file mode 100644
index 0000000..6b0166e
--- /dev/null
+++ b/src/lib/ui/stories/TelemetryGrid.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TelemetryGrid } from "../components/TelemetryGrid";
+import { eightTelemetryCards, sixteenTelemetryCards } from "./story-data";
+
+const meta = {
+  title: "UI/TelemetryGrid",
+  component: TelemetryGrid,
+  args: {
+    cards: eightTelemetryCards,
+  },
+} satisfies Meta<typeof TelemetryGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EightCards: Story = {};
+export const SixteenCards: Story = {
+  args: {
+    cards: sixteenTelemetryCards,
+  },
+};
diff --git a/src/lib/ui/stories/TelemetryStrip.stories.svelte b/src/lib/ui/stories/TelemetryStrip.stories.svelte
deleted file mode 100644
index 5eb01b5..0000000
--- a/src/lib/ui/stories/TelemetryStrip.stories.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import TelemetryStrip from "../components/TelemetryStrip.svelte";
-  import { eightTelemetryCards, sixteenTelemetryCards } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Composition/TelemetryStrip",
-    component: TelemetryStrip,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Eight Card Density" args={{ cards: eightTelemetryCards }} />
-<Story name="Sixteen Card Density" args={{ cards: sixteenTelemetryCards }} />
-<Story name="Mixed Severity Wrap" args={{ cards: eightTelemetryCards }} />
diff --git a/src/lib/ui/stories/TelemetryStrip.stories.tsx b/src/lib/ui/stories/TelemetryStrip.stories.tsx
new file mode 100644
index 0000000..76fc983
--- /dev/null
+++ b/src/lib/ui/stories/TelemetryStrip.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TelemetryStrip } from "../components/TelemetryStrip";
+import { eightTelemetryCards } from "./story-data";
+
+const meta = {
+  title: "UI/TelemetryStrip",
+  component: TelemetryStrip,
+  args: {
+    cards: eightTelemetryCards,
+  },
+} satisfies Meta<typeof TelemetryStrip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/lib/ui/stories/WeatherModule.stories.svelte b/src/lib/ui/stories/WeatherModule.stories.svelte
deleted file mode 100644
index de86e73..0000000
--- a/src/lib/ui/stories/WeatherModule.stories.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import WeatherModule from "../components/WeatherModule.svelte";
-  import { moduleBlocks } from "./story-data";
-
-  const { Story } = defineMeta({
-    title: "Dashboard Primitives/WeatherModule",
-    component: WeatherModule,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Compact Summary" args={{ module: moduleBlocks.compact }} />
-<Story name="Unavailable" args={{ module: moduleBlocks.unavailable }} />
-<Story name="Long Location Value" args={{ module: moduleBlocks.long }} />
-<Story name="Generic Module Variant" args={{ module: { ...moduleBlocks.compact, title: "Signal Module", icon: "mdi:radar" } }} />
diff --git a/src/lib/ui/stories/WeatherModule.stories.tsx b/src/lib/ui/stories/WeatherModule.stories.tsx
new file mode 100644
index 0000000..6429de2
--- /dev/null
+++ b/src/lib/ui/stories/WeatherModule.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { WeatherModule } from "../components/WeatherModule";
+import { moduleBlocks } from "./story-data";
+
+const meta = {
+  title: "UI/WeatherModule",
+  component: WeatherModule,
+  args: {
+    module: moduleBlocks.compact,
+  },
+} satisfies Meta<typeof WeatherModule>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/lib/ui/storybook.test.ts b/src/lib/ui/storybook.test.ts
index 172526e..1b524ed 100644
--- a/src/lib/ui/storybook.test.ts
+++ b/src/lib/ui/storybook.test.ts
@@ -7,35 +7,36 @@ const componentsDir = join(root, "src/lib/ui/components");
 const storiesDir = join(root, "src/lib/ui/stories");
 
 const requiredStoryFiles = [
-  "Badge.stories.svelte",
-  "Button.stories.svelte",
-  "DashboardFrame.stories.svelte",
-  "DashboardHeader.stories.svelte",
-  "DashboardOnePager.stories.svelte",
-  "CornerBracketFrame.stories.svelte",
-  "DiagonalStripeField.stories.svelte",
-  "FooterCell.stories.svelte",
-  "FooterStatusCell.stories.svelte",
-  "GridFrame.stories.svelte",
-  "IconButton.stories.svelte",
-  "IconGlyph.stories.svelte",
-  "ModuleCard.stories.svelte",
-  "Panel.stories.svelte",
-  "ProgressMeter.stories.svelte",
-  "Separator.stories.svelte",
-  "ServiceGroupPanel.stories.svelte",
-  "ServicePanel.stories.svelte",
-  "ServiceRow.stories.svelte",
-  "SignalTrace.stories.svelte",
-  "Sparkline.stories.svelte",
-  "StatusBadge.stories.svelte",
-  "StatusStrip.stories.svelte",
-  "SystemState.stories.svelte",
-  "ScanlineField.stories.svelte",
-  "TelemetryCard.stories.svelte",
-  "TelemetryGrid.stories.svelte",
-  "TelemetryStrip.stories.svelte",
-  "WeatherModule.stories.svelte",
+  "Badge.stories.tsx",
+  "Button.stories.tsx",
+  "DashboardFrame.stories.tsx",
+  "DashboardHeader.stories.tsx",
+  "DashboardOnePager.stories.tsx",
+  "CornerBracketFrame.stories.tsx",
+  "DiagonalStripeField.stories.tsx",
+  "FooterCell.stories.tsx",
+  "FooterStatusCell.stories.tsx",
+  "GridFrame.stories.tsx",
+  "IconButton.stories.tsx",
+  "IconGlyph.stories.tsx",
+  "LineChart.stories.tsx",
+  "ModuleCard.stories.tsx",
+  "Panel.stories.tsx",
+  "ProgressMeter.stories.tsx",
+  "Separator.stories.tsx",
+  "ServiceGroupPanel.stories.tsx",
+  "ServicePanel.stories.tsx",
+  "ServiceRow.stories.tsx",
+  "SignalTrace.stories.tsx",
+  "Sparkline.stories.tsx",
+  "StatusBadge.stories.tsx",
+  "StatusStrip.stories.tsx",
+  "SystemState.stories.tsx",
+  "ScanlineField.stories.tsx",
+  "TelemetryCard.stories.tsx",
+  "TelemetryGrid.stories.tsx",
+  "TelemetryStrip.stories.tsx",
+  "WeatherModule.stories.tsx",
 ] as const;
 
 const forbiddenStoryContent = [
@@ -64,8 +65,8 @@ describe("Storybook inventory", () => {
 
   test("keeps component and story files paired as the UI inventory changes", () => {
     const componentStoryFiles = readdirSync(componentsDir)
-      .filter((filename) => filename.endsWith(".svelte"))
-      .map((filename) => filename.replace(".svelte", ".stories.svelte"));
+      .filter((filename) => filename.endsWith(".tsx") && !filename.endsWith(".test.tsx"))
+      .map((filename) => filename.replace(".tsx", ".stories.tsx"));
 
     for (const filename of componentStoryFiles) {
       expect(existsSync(join(storiesDir, filename)), `${filename} is missing`).toBe(true);
@@ -74,7 +75,7 @@ describe("Storybook inventory", () => {
 
   test("keeps Storybook fixtures generic and content-free", () => {
     const storyText = readdirSync(storiesDir)
-      .filter((filename) => filename.endsWith(".svelte") || filename.endsWith(".ts"))
+      .filter((filename) => filename.endsWith(".tsx") || filename.endsWith(".ts"))
       .map((filename) => readFileSync(join(storiesDir, filename), "utf8").toLowerCase())
       .join("\n");
 
@@ -90,12 +91,12 @@ describe("Storybook inventory", () => {
       "ScanlineField",
       "SignalTrace",
     ]) {
-      expect(existsSync(join(componentsDir, `${component}.svelte`)), `${component} is missing`).toBe(
+      expect(existsSync(join(componentsDir, `${component}.tsx`)), `${component} is missing`).toBe(
         true,
       );
       expect(
-        existsSync(join(storiesDir, `${component}.stories.svelte`)),
-        `${component}.stories.svelte is missing`,
+        existsSync(join(storiesDir, `${component}.stories.tsx`)),
+        `${component}.stories.tsx is missing`,
       ).toBe(true);
     }
   });
@@ -107,7 +108,7 @@ describe("Storybook inventory", () => {
       "ScanlineField",
       "SignalTrace",
     ]) {
-      const source = readFileSync(join(componentsDir, `${component}.svelte`), "utf8");
+      const source = readFileSync(join(componentsDir, `${component}.tsx`), "utf8");
 
       expect(source).toContain('aria-hidden="true"');
     }
@@ -115,8 +116,16 @@ describe("Storybook inventory", () => {
 
   test("does not add deferred form/navigation primitives", () => {
     for (const component of ["Input", "ToggleGroup", "ScrollArea"]) {
-      expect(existsSync(join(root, `src/lib/ui/components/${component}.svelte`))).toBe(false);
-      expect(existsSync(join(storiesDir, `${component}.stories.svelte`))).toBe(false);
+      expect(existsSync(join(root, `src/lib/ui/components/${component}.tsx`))).toBe(false);
+      expect(existsSync(join(storiesDir, `${component}.stories.tsx`))).toBe(false);
     }
   });
+
+  test("does not keep Svelte stories in the React Storybook inventory", () => {
+    const svelteStories = readdirSync(storiesDir).filter((filename) =>
+      filename.endsWith(".stories.svelte"),
+    );
+
+    expect(svelteStories).toEqual([]);
+  });
 });