feat: build dashboard design system

src/lib/ui/components/ModuleCard.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { UiModuleBlock } from "../types";
+  import IconGlyph from "./IconGlyph.svelte";
+
+  let { module }: { module: UiModuleBlock } = $props();
+</script>
+
+<aside class="module-card" data-severity={module.severity || "neutral"}>
+  <div>
+    {#if module.title}
+      <h2>{module.title}</h2>
+    {/if}
+    {#if module.value}
+      <strong>{module.value}</strong>
+    {/if}
+    {#if module.detail || module.label}
+      <p>{module.detail || module.label}</p>
+    {/if}
+  </div>
+  {#if module.icon}
+    <IconGlyph name={module.icon} size="lg" />
+  {/if}
+</aside>
+
+<style>
+  .module-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--ui-space-4);
+    align-items: start;
+    min-width: min(100%, 18rem);
+    border: var(--ui-border);
+    background: rgba(6, 8, 7, 0.82);
+    padding: var(--ui-space-3);
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  h2 {
+    color: var(--ui-color-muted);
+    font-size: 0.82rem;
+    text-transform: uppercase;
+  }
+
+  strong {
+    display: block;
+    margin-top: var(--ui-space-1);
+    font-family: var(--ui-font-display);
+    font-size: 2.25rem;
+    line-height: 0.9;
+  }
+
+  p {
+    margin-top: var(--ui-space-1);
+    color: var(--ui-color-muted);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+  }
+
+  .module-card[data-severity="ok"] :global(.icon-glyph) {
+    background: var(--ui-color-accent);
+    color: #050605;
+  }
+
+  .module-card[data-severity="warning"] {
+    border-color: color-mix(in srgb, var(--ui-color-warning), transparent 42%);
+    color: var(--ui-color-warning);
+  }
+
+  .module-card[data-severity="danger"] {
+    border-color: color-mix(in srgb, var(--ui-color-danger), transparent 32%);
+    color: var(--ui-color-danger);
+  }
+
+  .module-card[data-severity="stale"],
+  .module-card[data-severity="unavailable"] {
+    color: var(--ui-color-stale);
+  }
+
+  .module-card[data-severity="loading"] {
+    color: var(--ui-color-accent);
+  }
+</style>