feat(ui): render the Macroplan grid, editor and app shell

src/App.vue

@@ -1,19 +1,39 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useMacroplan } from './composables/useMacroplan'
+import PlanEditor from './components/PlanEditor.vue'
+import MacroplanGrid from './components/MacroplanGrid.vue'
+
+const { source, plan, error, resetToSample } = useMacroplan()
+</script>
 
 <template>
-  <main class="font-sans min-h-screen bg-base-200 flex items-center justify-center p-4">
-    <div class="card w-full max-w-md bg-base-100 shadow-xl">
-      <div class="card-body items-center text-center gap-3">
-        <img src="/favicon.svg" alt="" class="size-12" />
-        <h1 class="card-title text-3xl">Macroplan</h1>
-        <p class="text-base-content/70">
-          A week-granular, learning-oriented view of the features a team has
-          committed to deliver.
+  <div class="flex h-screen flex-col bg-base-200 font-sans text-base-content">
+    <header class="navbar min-h-0 gap-2 border-b border-base-300 bg-base-100 px-4 py-2">
+      <img src="/favicon.svg" alt="" class="size-6" />
+      <div class="flex-1">
+        <h1 class="text-lg font-semibold leading-tight">Macroplan</h1>
+        <p class="text-xs text-base-content/60 leading-tight">
+          A week-granular, learning-oriented record of what we committed to deliver.
         </p>
-        <div class="card-actions mt-2">
-          <button class="btn btn-primary">Get started</button>
-        </div>
       </div>
-    </div>
-  </main>
+      <button class="btn btn-ghost btn-sm" @click="resetToSample">Reset to sample</button>
+    </header>
+
+    <main class="flex min-h-0 flex-1 flex-col md:flex-row">
+      <section
+        class="flex min-h-0 flex-col border-base-300 max-md:h-2/5 max-md:border-b md:w-2/5 md:max-w-xl md:border-r"
+      >
+        <div class="px-4 py-2 text-xs font-semibold uppercase tracking-wide text-base-content/50">
+          Source (TOML)
+        </div>
+        <PlanEditor v-model="source" :error="error" class="min-h-0 flex-1" />
+      </section>
+
+      <section class="min-h-0 flex-1 overflow-auto p-4">
+        <h2 v-if="plan" class="mb-3 text-sm font-semibold text-base-content/70">{{ plan.title }}</h2>
+        <MacroplanGrid v-if="plan" :plan="plan" />
+        <p v-else class="text-sm text-base-content/60">Nothing to render yet — fix the source on the left.</p>
+      </section>
+    </main>
+  </div>
 </template>