feat: add Storybook component explorer

src/lib/ui/stories/Badge.stories.svelte

@@ -0,0 +1,21 @@
+<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" }}
+/>

src/lib/ui/stories/Button.stories.svelte

@@ -0,0 +1,19 @@
+<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" }} />

src/lib/ui/stories/DashboardFrame.stories.svelte

@@ -0,0 +1,15 @@
+<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 }} />

src/lib/ui/stories/DashboardHeader.stories.svelte

@@ -0,0 +1,31 @@
+<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" }} />

src/lib/ui/stories/DashboardOnePager.stories.svelte

@@ -0,0 +1,18 @@
+<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>

src/lib/ui/stories/FooterCell.stories.svelte

@@ -0,0 +1,16 @@
+<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 }} />

src/lib/ui/stories/FooterStatusCell.stories.svelte

@@ -0,0 +1,16 @@
+<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 }} />

src/lib/ui/stories/GridFrame.stories.svelte

@@ -0,0 +1,37 @@
+<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>

src/lib/ui/stories/IconButton.stories.svelte

@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import IconButton from "../components/IconButton.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" args={{ icon: "mdi:keyboard", label: "Focus visible", active: true }} />

src/lib/ui/stories/IconGlyph.stories.svelte

@@ -0,0 +1,21 @@
+<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>

src/lib/ui/stories/ModuleCard.stories.svelte

@@ -0,0 +1,15 @@
+<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 }} />

src/lib/ui/stories/Panel.stories.svelte

@@ -0,0 +1,42 @@
+<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>

src/lib/ui/stories/ProgressMeter.stories.svelte

@@ -0,0 +1,16 @@
+<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" }} />

src/lib/ui/stories/Separator.stories.svelte

@@ -0,0 +1,21 @@
+<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>

src/lib/ui/stories/ServiceGroupPanel.stories.svelte

@@ -0,0 +1,16 @@
+<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 }} />

src/lib/ui/stories/ServicePanel.stories.svelte

@@ -0,0 +1,16 @@
+<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 }} />

src/lib/ui/stories/ServiceRow.stories.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ServiceRow from "../components/ServiceRow.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" args={{ service: serviceRows.normal }} />

src/lib/ui/stories/Sparkline.stories.svelte

@@ -0,0 +1,16 @@
+<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" }} />

src/lib/ui/stories/StatusBadge.stories.svelte

@@ -0,0 +1,18 @@
+<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" }} />

src/lib/ui/stories/StatusStrip.stories.svelte

@@ -0,0 +1,27 @@
+<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 }} />

src/lib/ui/stories/SystemState.stories.svelte

@@ -0,0 +1,16 @@
+<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" }} />

src/lib/ui/stories/TelemetryCard.stories.svelte

@@ -0,0 +1,21 @@
+<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 }} />

src/lib/ui/stories/TelemetryGrid.stories.svelte

@@ -0,0 +1,15 @@
+<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: [] }} />

src/lib/ui/stories/TelemetryStrip.stories.svelte

@@ -0,0 +1,15 @@
+<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 }} />

src/lib/ui/stories/WeatherModule.stories.svelte

@@ -0,0 +1,16 @@
+<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" } }} />

src/lib/ui/stories/story-data.ts

@@ -0,0 +1,258 @@
+import { dashboardPreviewFixtures } from "../fixtures";
+import type {
+  UiDashboardPreview,
+  UiModuleBlock,
+  UiServiceGroup,
+  UiServiceRow,
+  UiSeverity,
+  UiStatusItem,
+  UiTelemetryCard,
+} from "../types";
+
+export const primaryDashboard = dashboardPreviewFixtures.primary;
+export const secondaryDashboard = dashboardPreviewFixtures.secondary;
+
+export const emptyDashboard: UiDashboardPreview = {
+  eyebrow: "Preview Surface",
+  title: "Empty Console",
+  subtitle: "No records available",
+  telemetry: [],
+  modules: [],
+  serviceGroups: [],
+  statusItems: [],
+};
+
+export const moduleBlocks: Record<string, UiModuleBlock> = {
+  compact: {
+    id: "module-compact",
+    title: "Local Node",
+    value: "21.4 C",
+    detail: "static sample",
+    icon: "mdi:weather-partly-cloudy",
+    severity: "ok",
+  },
+  unavailable: {
+    id: "module-unavailable",
+    title: "External Signal",
+    value: "n/a",
+    detail: "fallback value",
+    icon: "mdi:cloud-off-outline",
+    severity: "unavailable",
+  },
+  long: {
+    id: "module-long",
+    title: "Regional Aggregate Signal",
+    value: "manual review queued",
+    detail: "long generic label wraps without layout shift",
+    icon: "mdi:map-marker-radius-outline",
+    severity: "warning",
+  },
+};
+
+export const telemetryCards: Record<string, UiTelemetryCard> = {
+  percent: {
+    id: "telemetry-percent",
+    label: "Capacity Used",
+    value: { kind: "percent", value: 82 },
+    progress: 82,
+    icon: "mdi:gauge",
+    severity: "ok",
+    detail: "static sample",
+    sparkline: [24, 36, 28, 44, 52, 82],
+  },
+  bytes: {
+    id: "telemetry-bytes",
+    label: "Data Volume",
+    value: { kind: "bytes", value: 982451653, precision: 1 },
+    icon: "mdi:database",
+    severity: "neutral",
+    detail: "static sample",
+    sparkline: [8, 12, 20, 18, 24, 29],
+  },
+  temperature: {
+    id: "telemetry-temperature",
+    label: "Node Temperature",
+    value: { kind: "temperature", value: 21.4, precision: 1 },
+    icon: "mdi:thermometer",
+    severity: "neutral",
+    detail: "static sample",
+    sparkline: [18, 20, 19, 21, 20, 21.4],
+  },
+  latency: {
+    id: "telemetry-latency",
+    label: "Median Latency",
+    value: { kind: "latency", value: 87 },
+    icon: "mdi:timer-outline",
+    severity: "warning",
+    detail: "static sample",
+    sparkline: [45, 51, 72, 63, 80, 87],
+  },
+  unavailable: {
+    id: "telemetry-unavailable",
+    label: "Remote Signal",
+    value: { kind: "text", value: "n/a" },
+    icon: "mdi:cloud-off-outline",
+    severity: "unavailable",
+    detail: "fallback value",
+  },
+  stale: {
+    id: "telemetry-stale",
+    label: "Sync Age",
+    value: { kind: "text", value: "stale" },
+    icon: "mdi:clock-alert-outline",
+    severity: "stale",
+    detail: "cached sample",
+    sparkline: [22, 22, 22, 22, 22, 22],
+  },
+  danger: {
+    id: "telemetry-danger",
+    label: "Error Budget",
+    value: { kind: "percent", value: 7 },
+    progress: 7,
+    icon: "mdi:alert-octagon-outline",
+    severity: "danger",
+    detail: "threshold breached",
+    sparkline: [56, 41, 34, 20, 13, 7],
+  },
+  loading: {
+    id: "telemetry-loading",
+    label: "Pending Refresh",
+    value: { kind: "text", value: "sync" },
+    icon: "mdi:progress-clock",
+    severity: "loading",
+    detail: "waiting for update",
+  },
+  long: {
+    id: "telemetry-long",
+    label: "Very Long Generic Source Label That Must Wrap",
+    value: { kind: "percent", value: 63 },
+    progress: 63,
+    icon: "mdi:chart-box-outline",
+    severity: "neutral",
+    detail: "long source label",
+    sparkline: [14, 20, 28, 31, 49, 63],
+  },
+};
+
+export const serviceRows: Record<string, UiServiceRow> = {
+  normal: row("service-normal", "Ingest", "Event intake pipeline", "mdi:arrow-collapse-down", "ok", "1.252 ms", {
+    href: "#ingest",
+    label: "Open ingest",
+  }),
+  down: row("service-down", "Replica", "Replica traffic cell", "mdi:access-point-off", "danger", "down"),
+  degraded: row("service-degraded", "Scheduler", "Timed job coordinator", "mdi:calendar-clock", "warning", "1.487 ms"),
+  stale: row("service-stale", "Archive", "Cold storage transfer", "mdi:archive-clock", "stale", "paused"),
+  noLink: row("service-no-link", "Policy", "Rules evaluation", "mdi:shield-check", "neutral", "manual"),
+  long: row(
+    "service-long",
+    "Long Generic Service Name That Wraps Cleanly",
+    "Long generic service description with enough detail to exercise wrapping in constrained panels",
+    "mdi:text-box-search-outline",
+    "warning",
+    "review queued",
+  ),
+};
+
+export const serviceGroups: Record<string, UiServiceGroup> = {
+  short: {
+    id: "group-short",
+    title: "Short List",
+    services: [serviceRows.normal, serviceRows.degraded],
+  },
+  long: {
+    id: "group-long",
+    title: "Long List",
+    services: [
+      serviceRows.normal,
+      serviceRows.degraded,
+      serviceRows.stale,
+      serviceRows.down,
+      serviceRows.noLink,
+      serviceRows.long,
+    ],
+  },
+  empty: {
+    id: "group-empty",
+    title: "Empty Group",
+    services: [],
+  },
+  mixed: {
+    id: "group-mixed",
+    title: "Mixed Statuses",
+    services: [serviceRows.normal, serviceRows.down, serviceRows.degraded, serviceRows.stale],
+    summary: [
+      { id: "summary-ok", label: "Ok", value: "3", severity: "ok" },
+      { id: "summary-warn", label: "Warn", value: "1", severity: "warning" },
+      { id: "summary-down", label: "Down", value: "1", severity: "danger" },
+    ],
+  },
+};
+
+export const statusItems: Record<string, UiStatusItem> = {
+  ok: { id: "status-ok", label: "System", value: "Operational", severity: "ok" },
+  degraded: { id: "status-degraded", label: "Routing", value: "Degraded", severity: "warning" },
+  incident: { id: "status-incident", label: "Incident", value: "Active", severity: "danger" },
+  syncing: { id: "status-syncing", label: "Refresh", value: "Syncing", severity: "loading" },
+  stale: { id: "status-stale", label: "Last Sync", value: "18 minutes ago", severity: "stale" },
+  action: {
+    id: "status-action",
+    label: "Action",
+    value: "Inspect",
+    severity: "neutral",
+    link: { href: "#inspect", label: "Inspect status" },
+  },
+  long: {
+    id: "status-long",
+    label: "Long Generic Status Label",
+    value: "long generic status value wraps",
+    severity: "neutral",
+  },
+};
+
+export const eightTelemetryCards = [
+  telemetryCards.percent,
+  telemetryCards.bytes,
+  telemetryCards.temperature,
+  telemetryCards.latency,
+  telemetryCards.unavailable,
+  telemetryCards.stale,
+  telemetryCards.danger,
+  telemetryCards.loading,
+];
+
+export const sixteenTelemetryCards = Array.from({ length: 16 }, (_, index) => {
+  const card = eightTelemetryCards[index % eightTelemetryCards.length];
+  return {
+    ...card,
+    id: `${card.id}-${index}`,
+    label: `${card.label} ${index + 1}`,
+  };
+});
+
+export const mixedStatusStrip = [
+  statusItems.ok,
+  statusItems.degraded,
+  statusItems.incident,
+  statusItems.syncing,
+  statusItems.stale,
+];
+
+export const fullCompositionDashboard: UiDashboardPreview = {
+  ...primaryDashboard,
+  telemetry: eightTelemetryCards,
+  modules: [moduleBlocks.compact, moduleBlocks.unavailable],
+  serviceGroups: [serviceGroups.mixed, serviceGroups.short, serviceGroups.long],
+  statusItems: mixedStatusStrip,
+};
+
+function row(
+  id: string,
+  label: string,
+  description: string,
+  icon: string,
+  severity: UiSeverity,
+  detail: string,
+  link?: UiServiceRow["link"],
+): UiServiceRow {
+  return { id, label, description, icon, severity, detail, link };
+}