feat: build dashboard design system

src/lib/ui/components/Panel.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let {
+    title,
+    density = "dense",
+    children,
+  }: {
+    title?: string;
+    density?: "compact" | "dense";
+    children?: Snippet;
+  } = $props();
+</script>
+
+<section class="panel" data-density={density}>
+  {#if title}
+    <header class="panel__header">
+      <h2>{title}</h2>
+    </header>
+  {/if}
+  <div class="panel__body">
+    {@render children?.()}
+  </div>
+</section>
+
+<style>
+  .panel {
+    position: relative;
+    min-width: 0;
+    border: var(--ui-border);
+    background: rgba(3, 4, 3, 0.86);
+    box-shadow: var(--ui-shadow-hard);
+  }
+
+  .panel::before,
+  .panel::after {
+    position: absolute;
+    width: 0.55rem;
+    height: 0.55rem;
+    border-color: var(--ui-color-line-strong);
+    content: "";
+  }
+
+  .panel::before {
+    top: 0.2rem;
+    right: 0.2rem;
+    border-top: 1px solid;
+    border-right: 1px solid;
+  }
+
+  .panel::after {
+    right: 0.2rem;
+    bottom: 0.2rem;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+  }
+
+  .panel__header {
+    padding: var(--ui-space-3) var(--ui-space-3) 0;
+  }
+
+  h2 {
+    margin: 0;
+    font-family: var(--ui-font-display);
+    font-size: clamp(1.75rem, 3vw, 2.5rem);
+    font-weight: 800;
+    letter-spacing: 0;
+    line-height: 0.9;
+    text-transform: uppercase;
+  }
+
+  .panel__body {
+    display: grid;
+    gap: var(--ui-space-2);
+    padding: var(--ui-space-3);
+  }
+
+  .panel[data-density="compact"] .panel__body {
+    padding: var(--ui-space-2);
+  }
+</style>