feat: add Storybook component explorer

src/lib/ui/components/SystemState.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { UiSeverity } from "../types";
+  import IconGlyph from "./IconGlyph.svelte";
+
+  let {
+    title,
+    detail,
+    icon = "mdi:information-outline",
+    severity = "neutral",
+  }: {
+    title: string;
+    detail?: string;
+    icon?: string;
+    severity?: UiSeverity;
+  } = $props();
+</script>
+
+<section class="system-state" data-severity={severity}>
+  <IconGlyph name={icon} size="lg" />
+  <div>
+    <h2>{title}</h2>
+    {#if detail}
+      <p>{detail}</p>
+    {/if}
+  </div>
+</section>
+
+<style>
+  .system-state {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--ui-space-3);
+    align-items: center;
+    border: var(--ui-border);
+    background: rgba(6, 8, 7, 0.82);
+    padding: var(--ui-space-4);
+  }
+
+  .system-state[data-severity="warning"] {
+    color: var(--ui-color-warning);
+  }
+
+  .system-state[data-severity="danger"],
+  .system-state[data-severity="unavailable"] {
+    color: var(--ui-color-danger);
+  }
+
+  .system-state[data-severity="loading"] {
+    color: var(--ui-color-accent);
+  }
+
+  h2,
+  p {
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+  h2 {
+    font-size: 1rem;
+  }
+
+  p {
+    margin-top: var(--ui-space-1);
+    color: var(--ui-color-muted);
+    font-size: 0.72rem;
+  }
+</style>