initial commit

src/components/common/Module.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  /**
+   * A bordered box with a caption bar — the unit every page is assembled from.
+   *
+   * `variant` picks the era-correct chrome:
+   *   panel  blue caption bar (left rail)
+   *   band   peach caption bar (main column)
+   *   plain  no chrome, just the heading
+   */
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    title?: string
+    variant?: 'panel' | 'band' | 'plain'
+    /** Right-aligned link in the caption bar, e.g. "[view all]". */
+    action?: Snippet
+    /** Remove body padding, for tables that should meet the border. */
+    flush?: boolean
+    /** Extra classes, so callers can add their own styling hook. */
+    class?: string
+    children: Snippet
+  }
+
+  let {
+    title,
+    variant = 'panel',
+    action,
+    flush = false,
+    class: extraClass = '',
+    children,
+  }: Props = $props()
+
+  const variantClass = $derived(
+    variant === 'band' ? 'module--band' : variant === 'plain' ? 'module--plain' : '',
+  )
+</script>
+
+<section class="module {variantClass} {extraClass}" data-variant={variant}>
+  {#if title}
+    <h2 class="module-header">
+      <span class="module-header-title">{title}</span>
+      {#if action}
+        <span class="module-header-action">{@render action()}</span>
+      {/if}
+    </h2>
+  {/if}
+  <div class="module-body" class:module-body--flush={flush}>
+    {@render children()}
+  </div>
+</section>