chore: initial scaffold

src/App.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const appName = "meadows"
+</script>
+
+<template>
+  <main class="min-h-screen bg-base-200 flex items-center justify-center p-6">
+    <div class="card w-full max-w-md bg-base-100 shadow-xl">
+      <div class="card-body items-center text-center">
+        <img src="/favicon.svg" alt="" class="size-12" />
+        <h1 class="card-title text-3xl font-semibold">{{ appName }}</h1>
+        <p class="text-base-content/70">
+          A canvas for thinking in systems — stocks, flows, faucets, and feedback loops.
+        </p>
+        <div class="card-actions mt-4">
+          <button class="btn btn-primary" disabled>Start a system</button>
+        </div>
+        <p class="text-xs text-base-content/40 mt-2">Scaffold ready. Editor coming next.</p>
+      </div>
+    </div>
+  </main>
+</template>

src/assets/icons/README.md

@@ -0,0 +1,37 @@
+# Icons
+
+Reusable in-app icons. Source: https://tabler.io/icons (outline variant by default).
+
+## Add an icon
+
+1. Find the icon on https://tabler.io/icons, click it, copy the SVG (or download).
+2. Save it here as `<slug>.svg` — same slug Tabler uses (`bolt.svg`, `qrcode.svg`).
+3. Keep `stroke="currentColor"` in the SVG so colour follows Tailwind classes.
+
+## Use an icon
+
+Static colour (cheapest, no extra component):
+
+```vue
+<img src="@/assets/icons/bolt.svg" alt="" class="size-5" />
+```
+
+Dynamic colour (needs `currentColor` to flow through — paste the SVG inline as a component):
+
+```vue
+<template>
+  <svg
+    class="size-5 text-primary"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <!-- paste paths from the Tabler SVG here -->
+  </svg>
+</template>
+```
+
+The favicon at `public/favicon.svg` was generated from this same icon set with `currentColor` replaced by the app's primary hex at scaffold time.

src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from "vue"
+import "./style.css"
+import App from "./App.vue"
+
+createApp(App).mount("#app")

src/style.css

@@ -0,0 +1,17 @@
+/* The font @import MUST come first — before @import "tailwindcss" — because
+   Tailwind inlines its import into real CSS rules, and the CSS spec requires
+   @import to precede all other rules. If it comes second, the production build
+   warns ("@import must precede all rules…") and browsers silently DROP the
+   font import, so the custom font never loads. */
+@import url("https://fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700&display=swap");
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true;
+  --color-primary: #16a34a;
+}
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+}