Start the rebuild: note schema, vault kit and data migration

Phase 1 of the functional design plan.

- Move the old site into legacy/, unchanged, for reference. It still
  builds from there until cutover.
- Add packages/schema: the one definition of all 20 note types, with
  field titles and descriptions, note and vault checks, and JSON Schema
  export so later editing tools and the MCP server share it.
- Add vault-kit: Obsidian templates generated from the schema, and the
  Site guide for 24.01_PersonalWebsite.
- Add tools/migrate: turns the legacy JSON, collections, store data and
  page text into 545 Site folder notes and 84 images, and checks the
  result with the schema.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx

legacy/public/images/deckboxes-example-1.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" role="img" aria-label="Placeholder image: deck box open showing card capacity">
+  <defs>
+    <linearGradient id="bg3" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#170f24"/>
+      <stop offset="1" stop-color="#221630"/>
+    </linearGradient>
+    <radialGradient id="glow3" cx="0.5" cy="0.4" r="0.6">
+      <stop offset="0" stop-color="#e8b54a" stop-opacity="0.16"/>
+      <stop offset="1" stop-color="#e8b54a" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="640" height="480" fill="url(#bg3)"/>
+  <rect width="640" height="480" fill="url(#glow3)"/>
+  <!-- open deck box, lid back, cards inside -->
+  <g transform="translate(150 150)">
+    <!-- base -->
+    <rect x="0" y="80" width="340" height="180" rx="14" fill="#221630" stroke="#3e2f4a" stroke-width="2"/>
+    <!-- lid (hinged back) -->
+    <rect x="0" y="0" width="340" height="90" rx="14" fill="#2c2050" stroke="#3e2f4a" stroke-width="2"/>
+    <!-- cards stack -->
+    <rect x="30" y="40" width="200" height="130" rx="8" fill="#f4f1e8" opacity="0.9"/>
+    <rect x="40" y="30" width="200" height="130" rx="8" fill="#e8b54a" opacity="0.35"/>
+    <rect x="50" y="20" width="200" height="130" rx="8" fill="#8b7bd8" opacity="0.35"/>
+    <text x="270" y="180" font-family="monospace" font-size="14" fill="#c4ab8e">100+</text>
+  </g>
+  <text x="320" y="450" text-anchor="middle" font-family="monospace" font-size="16" fill="#c4ab8e" letter-spacing="2">PLACEHOLDER &#183; SWAP IN /images/store-products.ts</text>
+</svg>

legacy/public/images/deckboxes-example-2.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" role="img" aria-label="Placeholder image: counter close-up with life totals">
+  <defs>
+    <linearGradient id="bg4" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#170f24"/>
+      <stop offset="1" stop-color="#221630"/>
+    </linearGradient>
+    <radialGradient id="glow4" cx="0.5" cy="0.4" r="0.6">
+      <stop offset="0" stop-color="#6fb6ad" stop-opacity="0.16"/>
+      <stop offset="1" stop-color="#6fb6ad" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="640" height="480" fill="url(#bg4)"/>
+  <rect width="640" height="480" fill="url(#glow4)"/>
+  <!-- spinner-style counter -->
+  <g transform="translate(220 110)">
+    <circle cx="100" cy="130" r="110" fill="#221630" stroke="#3e2f4a" stroke-width="2"/>
+    <circle cx="100" cy="130" r="86" fill="none" stroke="#e8b54a" stroke-width="3" opacity="0.5"/>
+    <text x="100" y="120" text-anchor="middle" font-family="monospace" font-size="13" fill="#c4ab8e" letter-spacing="2">LIFE</text>
+    <text x="100" y="165" text-anchor="middle" font-family="sans-serif" font-size="46" font-weight="700" fill="#f4f1e8">40</text>
+    <!-- dial nubs -->
+    <circle cx="100" cy="24" r="6" fill="#8b7bd8"/>
+    <circle cx="100" cy="236" r="6" fill="#8b7bd8"/>
+  </g>
+  <text x="320" y="450" text-anchor="middle" font-family="monospace" font-size="16" fill="#c4ab8e" letter-spacing="2">PLACEHOLDER &#183; SWAP IN /images/store-products.ts</text>
+</svg>

legacy/public/images/proxies-example-1.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" role="img" aria-label="Placeholder image: close-up of card finish and cut">
+  <defs>
+    <linearGradient id="bg1" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#170f24"/>
+      <stop offset="1" stop-color="#221630"/>
+    </linearGradient>
+    <radialGradient id="glow1" cx="0.5" cy="0.4" r="0.6">
+      <stop offset="0" stop-color="#e8b54a" stop-opacity="0.18"/>
+      <stop offset="1" stop-color="#e8b54a" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="640" height="480" fill="url(#bg1)"/>
+  <rect width="640" height="480" fill="url(#glow1)"/>
+  <!-- stylized card -->
+  <g transform="translate(170 70) rotate(-6)">
+    <rect width="300" height="420" rx="18" fill="#0b1026" stroke="#3e2f4a" stroke-width="2"/>
+    <rect x="22" y="22" width="256" height="100" rx="8" fill="#221630"/>
+    <rect x="22" y="140" width="256" height="180" rx="8" fill="#2c2050" opacity="0.5"/>
+    <rect x="22" y="336" width="180" height="14" rx="4" fill="#8b7bd8" opacity="0.5"/>
+    <rect x="22" y="360" width="120" height="14" rx="4" fill="#8b7bd8" opacity="0.3"/>
+    <!-- sparkle -->
+    <path d="M150 60 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4 z" fill="#e8b54a" opacity="0.8"/>
+  </g>
+  <text x="320" y="450" text-anchor="middle" font-family="monospace" font-size="16" fill="#c4ab8e" letter-spacing="2">PLACEHOLDER &#183; SWAP IN /images/store-products.ts</text>
+</svg>

legacy/public/images/proxies-example-2.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" role="img" aria-label="Placeholder image: white card back showing the proxy marking">
+  <defs>
+    <linearGradient id="bg2" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#170f24"/>
+      <stop offset="1" stop-color="#221630"/>
+    </linearGradient>
+    <radialGradient id="glow2" cx="0.5" cy="0.4" r="0.6">
+      <stop offset="0" stop-color="#8b7bd8" stop-opacity="0.16"/>
+      <stop offset="1" stop-color="#8b7bd8" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="640" height="480" fill="url(#bg2)"/>
+  <rect width="640" height="480" fill="url(#glow2)"/>
+  <!-- white-backed card -->
+  <g transform="translate(170 70) rotate(5)">
+    <rect width="300" height="420" rx="18" fill="#f4f1e8" stroke="#3e2f4a" stroke-width="2"/>
+    <rect x="30" y="30" width="240" height="360" rx="10" fill="none" stroke="#d2c6a2" stroke-width="2" stroke-dasharray="6 6"/>
+    <text x="150" y="210" text-anchor="middle" font-family="sans-serif" font-size="34" font-weight="700" fill="#1b1730">PROXY</text>
+    <text x="150" y="248" text-anchor="middle" font-family="monospace" font-size="13" fill="#4a445e" letter-spacing="2">NOT TOURNAMENT LEGAL</text>
+  </g>
+  <text x="320" y="450" text-anchor="middle" font-family="monospace" font-size="16" fill="#c4ab8e" letter-spacing="2">PLACEHOLDER &#183; SWAP IN /images/store-products.ts</text>
+</svg>