feat: add Storybook component explorer

src/lib/ui/components/GridFrame.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let {
+    children,
+    density = "dense",
+  }: {
+    children?: Snippet;
+    density?: "compact" | "dense";
+  } = $props();
+</script>
+
+<section class="grid-frame" data-density={density}>
+  {@render children?.()}
+</section>
+
+<style>
+  .grid-frame {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+    gap: var(--ui-space-3);
+    padding: var(--ui-space-3);
+  }
+
+  .grid-frame[data-density="compact"] {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+    gap: var(--ui-space-2);
+    padding: var(--ui-space-2);
+  }
+</style>