create-volt 0.55.1 → 0.56.0

package/CHANGELOG.md

@@ -4,6 +4,31 @@ All notable changes to `create-volt` are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/), and this project adheres to
 [Semantic Versioning](https://semver.org/).
 
+## [0.56.0] - 2026-07-05
+
+### Added
+- **Full site templates.** `--template business` scaffolds a complete multi-page
+  site (Home, About, Products, Contact) with a sticky-nav theme, hero, product grid,
+  CTA, and swap-your-own media slots — the "install a theme with demo content, then
+  make it yours" experience.
+- **Media library in the config.** A new **Media** view uploads / browses / deletes
+  images and video (stored in `public/media/`, served at `/media/<name>`) — a
+  Bootstrap card grid with thumbnails, copy-URL, and delete.
+- **Editor media, de-base64'd on save.** RTEPro's built-in picker inlines "Choose
+  File" uploads as base64; on save they're extracted to `public/media/<hash>.<ext>`
+  (content-hash deduped) and the `src` rewritten to a `/media` URL, so pages stay
+  lean and editor uploads land in the library.
+
+### Fixed
+- **Boolean attributes.** `readonly=${false}` (and `required`/`multiple`/`hidden`/…)
+  now correctly turn the attribute OFF — any value, including the string `"false"`,
+  previously left it on. `readonly` also maps to the `readOnly` DOM property.
+- **Hosted-token button.** "Generate a free hosted token" shows its result inline
+  next to the button, with a clear message when the gateway isn't reachable (was a
+  silent failure buried in the status line).
+- `default/server.js` now imports `node:crypto` — it had relied on the global Web
+  Crypto, which has no `createHash`.
+
 ## [0.55.1] - 2026-07-05
 
 ### Security
@@ -720,6 +745,7 @@ All notable changes to `create-volt` are documented here. The format follows
   watching and full-page hot reload. Supports `--skip-install` and `--force`,
   and auto-detects npm / pnpm / yarn / bun for the install step.
 
+[0.56.0]: https://github.com/MIR-2025/volt/releases/tag/v0.56.0
 [0.55.1]: https://github.com/MIR-2025/volt/releases/tag/v0.55.1
 [0.55.0]: https://github.com/MIR-2025/volt/releases/tag/v0.55.0
 [0.54.0]: https://github.com/MIR-2025/volt/releases/tag/v0.54.0

package/index.js

@@ -40,7 +40,7 @@ ${bold("Usage")}
   npx create-volt@latest studio              # browse your data — ephemeral, localhost (like Prisma Studio)
 
 ${bold("Options")}
-  --template <name>  Template: default | blog | docs | starter | guestbook  (default: default)
+  --template <name>  Template: default | blog | docs | starter | guestbook | business  (default: default)
   --port <number>    Dev port for the app (default: derived from today's date)
   --skip-install   Don't run the package manager install step
   --no-git         Don't initialize a git repository

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.55.1",
+  "version": "0.56.0",
   "description": "Scaffold a new Volt app — no-build, signals-based UI with Socket.io hot reload.",
   "type": "module",
   "bin": {

package/templates/blog/public/volt.js

@@ -125,14 +125,19 @@ export function mount(target, ...children) {
   return parent;
 }
 
+// Boolean attributes: presence means "on", so a false/null/"false" value must turn
+// them OFF (readonly="false" is still readonly in HTML). Set via the DOM property;
+// readonly's property is readOnly, so map it.
+const BOOL_ATTRS = new Set(["checked", "disabled", "selected", "readonly", "required", "multiple", "hidden", "autofocus", "open"]);
+const BOOL_PROP = { readonly: "readOnly" };
 function setAttr(node, name, value) {
   if (name === "value") {
     const v = value ?? "";
     if (node.value !== v) node.value = v; // skip redundant writes — they reset the caret while typing
     return;
   }
-  if (name === "checked" || name === "disabled" || name === "selected") {
-    node[name] = !!value && value !== "false";
+  if (BOOL_ATTRS.has(name)) {
+    node[BOOL_PROP[name] || name] = !!value && value !== "false";
     return;
   }
   if (value === false || value == null) {

package/templates/blog/server.js

@@ -11,6 +11,7 @@
 import http from "node:http";
 import fs from "node:fs";
 import path from "node:path";
+import crypto from "node:crypto";
 import { spawn, spawnSync } from "node:child_process";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import os from "node:os";
@@ -350,9 +351,9 @@ function startSetup() {
       const env = readEnvFile();
       const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
       fetch(base + "/api/register", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ app: env.SITE_NAME || "volt-app" }) })
-        .then((r) => r.json())
+        .then((r) => (r.ok ? r.json() : { ok: false, error: `hosted AI gateway not available (HTTP ${r.status}) — is it deployed?` }))
         .then((j) => res.end(JSON.stringify(j)))
-        .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+        .catch(() => res.end(JSON.stringify({ ok: false, error: "hosted AI gateway unreachable" })));
       return;
     }
     // --- AI proxy for the in-config editor (RTEPro). Uses a local provider key
@@ -466,6 +467,71 @@ function startSetup() {
       })();
       return;
     }
+    // --- media library: list / upload / delete files in public/media (served at
+    // /media/<name>). Shell-gated (config only). ---
+    if (req.method === "GET" && p === "/setup/media") {
+      res.setHeader("Content-Type", "application/json");
+      const dir = path.join(__dirname, "public", "media");
+      let items = [];
+      try {
+        items = fs
+          .readdirSync(dir)
+          .filter((f) => !f.startsWith("."))
+          .map((f) => ({ name: f, url: "/media/" + f, size: fs.statSync(path.join(dir, f)).size }))
+          .sort((a, b) => a.name.localeCompare(b.name));
+      } catch {
+        /* no media dir yet */
+      }
+      return res.end(JSON.stringify({ items }));
+    }
+    if (req.method === "POST" && p === "/setup/media/upload") {
+      res.setHeader("Content-Type", "application/json");
+      const name = (u.searchParams.get("name") || "").replace(/[^A-Za-z0-9._-]/g, "_").replace(/^\.+/, "").slice(0, 120);
+      if (!name || !/\.[A-Za-z0-9]+$/.test(name)) return res.end(JSON.stringify({ ok: false, error: "bad filename" }));
+      const dir = path.join(__dirname, "public", "media");
+      fs.mkdirSync(dir, { recursive: true });
+      const chunks = [];
+      let size = 0;
+      let tooBig = false;
+      req.on("data", (c) => {
+        if (tooBig) return;
+        size += c.length;
+        if (size > 100 * 1024 * 1024) tooBig = true;
+        else chunks.push(c);
+      });
+      req.on("end", () => {
+        if (tooBig) {
+          res.statusCode = 413;
+          return res.end(JSON.stringify({ ok: false, error: "file too large (max 100MB)" }));
+        }
+        try {
+          fs.writeFileSync(path.join(dir, name), Buffer.concat(chunks));
+          res.end(JSON.stringify({ ok: true, url: "/media/" + name, name }));
+        } catch (e) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
+    }
+    if (req.method === "POST" && p === "/setup/media/delete") {
+      let mbody = "";
+      req.on("data", (c) => (mbody += c));
+      req.on("end", () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const { name } = JSON.parse(mbody || "{}");
+          if (!/^[A-Za-z0-9][A-Za-z0-9._-]*$/.test(name || "")) throw new Error("bad name");
+          const f = path.join(__dirname, "public", "media", name);
+          if (fs.existsSync(f)) fs.unlinkSync(f);
+          res.end(JSON.stringify({ ok: true }));
+        } catch (e) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
+    }
     // --- content manager: list / read / write / delete pages + posts ---
     if (req.method === "GET" && p === "/setup/content") {
       const list = (type) => {
@@ -506,7 +572,25 @@ function startSetup() {
             return res.end(JSON.stringify({ ok: true }));
           }
           fs.mkdirSync(dir, { recursive: true });
-          fs.writeFileSync(file, String(body ?? ""));
+          // RTEPro's media picker inlines "Choose File" uploads as base64 data URLs.
+          // Extract them to public/media/<hash>.<ext> and rewrite the src, so pages
+          // stay lean and the uploads land in the media library.
+          const mediaDir = path.join(__dirname, "public", "media");
+          const extFor = (mime) =>
+            ({ "image/jpeg": "jpg", "image/jpg": "jpg", "image/png": "png", "image/gif": "gif", "image/webp": "webp", "image/avif": "avif", "image/svg+xml": "svg", "video/mp4": "mp4", "video/webm": "webm", "video/ogg": "ogv", "audio/mpeg": "mp3", "audio/ogg": "ogg", "audio/wav": "wav" }[mime.toLowerCase()] || (mime.split("/")[1] || "bin").replace(/[^a-z0-9]+/gi, "").slice(0, 8) || "bin");
+          const finalBody = String(body ?? "").replace(/(<(?:img|video|audio|source)\b[^>]*?\ssrc=")data:([\w.+-]+\/[\w.+-]+);base64,([^"]+)(")/gi, (m, pre, mime, b64, post) => {
+            try {
+              const buf = Buffer.from(b64, "base64");
+              const name = crypto.createHash("sha1").update(buf).digest("hex").slice(0, 16) + "." + extFor(mime);
+              fs.mkdirSync(mediaDir, { recursive: true });
+              const dest = path.join(mediaDir, name);
+              if (!fs.existsSync(dest)) fs.writeFileSync(dest, buf);
+              return pre + "/media/" + name + post;
+            } catch {
+              return m;
+            }
+          });
+          fs.writeFileSync(file, finalBody);
           res.end(JSON.stringify({ ok: true, file: (type === "post" ? "posts/" : "pages/") + slug + ".md" }));
         } catch (e) {
           res.statusCode = 400;

package/templates/blog/setup/setup.js

@@ -43,6 +43,7 @@ const status = signal("");
 const dbTest = signal("");
 const smtpTest = signal("");
 const aiTest = signal("");
+const genMsg = signal("");
 const testResult = (m) => (m ? html`<span class="small ms-2 ${m.startsWith("✓") ? "text-success" : m.startsWith("✗") ? "text-danger" : "text-muted"}">${m}</span>` : "");
 const envObj = () => Object.fromEntries(env().split("\n").filter((l) => /^[A-Za-z0-9_]+=/.test(l)).map((l) => { const i = l.indexOf("="); return [l.slice(0, i), l.slice(i + 1)]; }));
 
@@ -293,18 +294,66 @@ const aiSettings = () =>
       ${() => html`<a class="small d-inline-block mb-1" href=${AI_KEY_URL[state().aiProvider] || AI_KEY_URL.anthropic} target="_blank" rel="noopener">Get a ${state().aiProvider} key → paste it below (stays server-side in .env)</a>`}
       ${field("API key", "aiKey", "sk-…")}
       <div class="small text-muted mt-2 mb-1">— or — no key? Use the hosted tier (free, capped, then pay-as-you-go):</div>
-      ${() => (state().aiToken ? html`<div class="small">Hosted token: <code>${state().aiToken.slice(0, 14)}…</code> <button class="btn btn-sm btn-link p-0 ms-1" onclick=${() => set({ aiToken: "" })}>clear</button></div>` : html`<button class="btn btn-sm btn-outline-secondary" onclick=${genToken}>Generate a free hosted token</button>`)}
+      ${() => (state().aiToken ? html`<div class="small">Hosted token: <code>${state().aiToken.slice(0, 14)}…</code> <button class="btn btn-sm btn-link p-0 ms-1" onclick=${() => set({ aiToken: "" })}>clear</button></div>` : html`<button class="btn btn-sm btn-outline-secondary" onclick=${genToken}>Generate a free hosted token</button>${() => testResult(genMsg())}`)}
       <div class="mt-2"><button class="btn btn-sm btn-outline-secondary" onclick=${testAi}>Test AI</button>${() => testResult(aiTest())}</div>
     </div>
   </details>`;
 
 // --- Manage content (a second screen reached via "Manage content →") ---
-const view = signal("config"); // "config" | "manage"
-// Desktop-only config: keep settings readable, but let the editor go wide.
+const view = signal("config"); // "config" | "manage" | "media"
+// Desktop-only config: keep settings readable, but let the editor + library go wide.
 effect(() => {
   const w = document.getElementById("wrap");
-  if (w) w.style.maxWidth = view() === "manage" ? "min(1200px, 95vw)" : "720px";
+  if (w) w.style.maxWidth = view() !== "config" ? "min(1200px, 95vw)" : "720px";
 });
+// --- media library: upload / browse / delete files served at /media/<name> ---
+const media = signal([]);
+const loadMedia = async () => media(((await (await fetch("/setup/media")).json()).items) || []);
+async function uploadMedia(file) {
+  status(`Uploading ${file.name}…`);
+  try {
+    const r = await (await fetch("/setup/media/upload?name=" + encodeURIComponent(file.name), { method: "POST", body: file })).json();
+    status(r.ok ? `Uploaded → ${r.url}` : `Upload failed: ${r.error || "?"}`);
+  } catch {
+    status("Upload failed.");
+  }
+  loadMedia();
+}
+async function delMedia(name) {
+  if (typeof confirm === "function" && !confirm(`Delete ${name}?`)) return;
+  await fetch("/setup/media/delete", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name }) });
+  loadMedia();
+}
+const isImg = (n) => /\.(png|jpe?g|gif|webp|svg|avif|bmp|ico)$/i.test(n);
+const isVid = (n) => /\.(mp4|webm|mov|ogg|ogv|m4v)$/i.test(n);
+const kb = (n) => (n < 1024 ? n + " B" : n < 1048576 ? Math.round(n / 1024) + " KB" : (n / 1048576).toFixed(1) + " MB");
+const mediaThumb = (m) =>
+  isImg(m.name)
+    ? html`<img src=${m.url} loading="lazy" class="object-fit-cover" alt=${m.name} />`
+    : isVid(m.name)
+      ? html`<video src=${m.url} muted class="object-fit-cover"></video>`
+      : html`<div class="d-flex align-items-center justify-content-center text-white-50 small text-uppercase">${m.name.split(".").pop()}</div>`;
+const mediaTile = (m) =>
+  html`<div class="col"><div class="card h-100 shadow-sm">
+    <div class="ratio ratio-4x3 bg-dark rounded-top overflow-hidden">${mediaThumb(m)}</div>
+    <div class="card-body p-2">
+      <div class="small text-truncate" title=${m.name}>${m.name}</div>
+      <div class="small text-muted mb-2">${kb(m.size)}</div>
+      <div class="btn-group btn-group-sm w-100" role="group">
+        <button type="button" class="btn btn-outline-secondary" onclick=${() => (navigator.clipboard && navigator.clipboard.writeText(m.url), status(`Copied ${m.url}`))}>Copy URL</button>
+        <button type="button" class="btn btn-outline-danger flex-grow-0" title="Delete" onclick=${() => delMedia(m.name)}>✕</button>
+      </div>
+    </div>
+  </div></div>`;
+const mediaView = () =>
+  html`<div class="card">
+    <div class="card-header d-flex justify-content-between align-items-center"><h2 class="h6 mb-0">Media library</h2><button class="btn btn-sm btn-outline-secondary" onclick=${() => view("config")}>← Settings</button></div>
+    <div class="card-body">
+      <input type="file" class="form-control mb-2" accept="image/*,video/*" multiple onchange=${(e) => { for (const f of e.target.files) uploadMedia(f); e.target.value = ""; }} />
+      <p class="small text-muted">Uploads are stored in <code>public/media/</code> and served at <code>/media/&lt;name&gt;</code>. Copy a URL and paste it into a page's image slot in the editor. (Max 100&nbsp;MB per file.)</p>
+      ${() => (media().length ? html`<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 g-3">${media().map(mediaTile)}</div>` : html`<div class="text-muted small border rounded p-4 text-center">No media yet — upload above.</div>`)}
+    </div>
+  </div>`;
 // upgrade check: compare bundled version to npm latest; offer a one-click upgrade
 const upgrade = signal(null); // { current, latest, available }
 fetch("/setup/upgrade-check").then((r) => r.json()).then((u) => upgrade(u)).catch(() => {});
@@ -334,15 +383,15 @@ async function buyCredits(amountUsd) {
   }
 }
 async function genToken() {
-  status("Requesting a hosted token…");
+  genMsg("Requesting…");
   try {
     const r = await (await fetch("/setup/gen-token", { method: "POST" })).json();
     if (r.ok && r.token) {
       set({ aiToken: r.token });
-      status("Hosted token generated — click Apply to save it.");
-    } else status("Could not get a token: " + (r.error || "?"));
+      genMsg("✓ token generated — Apply to save");
+    } else genMsg("✗ " + (r.error || "no token"));
   } catch {
-    status("Token request failed.");
+    genMsg("✗ request failed");
   }
 }
 const items = signal({ pages: [], posts: [] });
@@ -449,12 +498,12 @@ const configView = () =>
       ${field("CONFIG_PORT (this wizard's own port)", "configPort", String(configDefaultPort))}
     </div>
     <div class="card-x p-4 mb-3">
-      <div class="d-flex justify-content-between align-items-center mb-2"><h2 class="h6 mb-0">.env</h2><div class="d-flex gap-2">${() => (hasContent() ? html`<button class="btn btn-outline-light btn-sm" onclick=${() => (view("manage"), loadItems())}>Manage content →</button>` : "")}<button class="btn btn-primary btn-sm" onclick=${apply}>Apply & start →</button></div></div>
+      <div class="d-flex justify-content-between align-items-center mb-2"><h2 class="h6 mb-0">.env</h2><div class="d-flex gap-2">${() => (hasContent() ? html`<button class="btn btn-outline-light btn-sm" onclick=${() => (view("manage"), loadItems())}>Manage content →</button>` : "")}<button class="btn btn-outline-light btn-sm" onclick=${() => (view("media"), loadMedia())}>Media →</button><button class="btn btn-primary btn-sm" onclick=${apply}>Apply & start →</button></div></div>
       <pre class="mb-0" style="background:#0b0d11;border:1px solid #232a36;border-radius:10px;padding:12px;color:#cfe3ff;white-space:pre-wrap">${env}</pre>
     </div>`;
 
 mount(
   "#app",
-  () => (view() === "config" ? configView() : manageView()),
+  () => (view() === "config" ? configView() : view() === "media" ? mediaView() : manageView()),
   () => (status() ? html`<p class="small accent">${status}</p>` : null),
 );

package/templates/business/Dockerfile

@@ -0,0 +1,20 @@
+# Volt app — production container. Runs on Render, Fly.io, Railway, DO App
+# Platform, and any container host. They handle the server, DNS, and TLS; you
+# just set config as env vars.
+#
+# Configure via the platform's env vars (NOT a committed .env):
+#   VOLT_ADDONS=db,auth,...      DB_DRIVER=...   MONGODB_URI / DATABASE_URL
+#   MEDIA_DRIVER=s3   S3_ENDPOINT/S3_REGION/S3_BUCKET/S3_KEY/S3_SECRET   etc.
+#
+# Tip: run the local wizard first (`npm run dev`) so the add-on packages are
+# saved into package.json; commit package.json, then deploy and set the same
+# config as env vars here. NODE_ENV=production makes the app boot straight up
+# (no setup wizard).
+FROM node:22-alpine
+WORKDIR /app
+ENV NODE_ENV=production
+COPY package*.json ./
+RUN npm install --omit=dev
+COPY . .
+EXPOSE 8080
+CMD ["node", "server.js"]

package/templates/business/Procfile

@@ -0,0 +1 @@
+web: node server.js

package/templates/business/README.md

@@ -0,0 +1,25 @@
+# Northwind — a full Volt site template
+
+A complete, multi-page business/store site: **Home, About, Products, Contact**, a
+sticky nav, hero, feature + product grids, and a call-to-action band — all in your
+site theme.
+
+```
+npm create volt@latest my-site -- --template business
+cd my-site && npm run dev
+```
+
+## Make it yours
+
+Everything is editable content, no code required:
+
+- **Text** — open the config (`npm run dev -- --edit`) → **Manage content**, and edit
+  each page in the visual editor.
+- **Images & video** — every `.slot` block (`📷 / 🎬`) is a placeholder. Drop your own
+  image or video in via the editor; the media add-on stores it and swaps it in.
+- **Brand** — set `SITE_NAME` in the config; the nav, footer, and titles pick it up.
+- **Theme** — colors, spacing, and layout live in `pages/_theme.js` (CSS variables at
+  the top). Edit there, or pick a different theme in the config.
+
+Pages are `pages/*.md` with `format: html` for rich layouts; add or remove pages by
+adding/removing files in `pages/`.

package/templates/business/dockerignore

@@ -0,0 +1,6 @@
+node_modules
+.git
+.env
+*.log
+npm-debug.log*
+.DS_Store

package/templates/business/ecosystem.config.cjs

@@ -0,0 +1,5 @@
+// PM2 process config. Start under pm2 with `npm run pm2` (pm2 is fetched via npx
+// if you don't have it installed); reload cleanly with `npm run pm2:restart` (no
+// port clash), tail logs with `npm run pm2:logs`, remove with `npm run pm2:stop`.
+const { name } = require("./package.json");
+module.exports = { apps: [{ name, script: "server.js" }] };

package/templates/business/env

@@ -0,0 +1,2 @@
+VOLT_ADDONS=pages
+SITE_NAME=Northwind Co

package/templates/business/fly.toml

@@ -0,0 +1,15 @@
+# Fly.io — run `fly launch` (it uses the Dockerfile), then set config:
+#   fly secrets set VOLT_ADDONS=db,auth DB_DRIVER=mongodb MONGODB_URI=...
+app = "volt-app"
+
+[build]
+
+[http_service]
+  internal_port = 8080
+  force_https = true
+  auto_stop_machines = true
+  auto_start_machines = true
+
+[env]
+  PORT = "8080"
+  NODE_ENV = "production"

package/templates/business/gitignore

@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log*
+.DS_Store
+.env
+*.local

package/templates/business/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "volt-app",
+  "version": "0.1.0",
+  "private": true,
+  "description": "A Volt app — no-build, signals-based UI with Socket.io hot reload.",
+  "type": "module",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js",
+    "pm2": "npx --yes pm2 start ecosystem.config.cjs",
+    "pm2:restart": "npx --yes pm2 restart ecosystem.config.cjs",
+    "pm2:stop": "npx --yes pm2 delete ecosystem.config.cjs",
+    "pm2:logs": "npx --yes pm2 logs",
+    "logs": "node server.js --logs"
+  },
+  "dependencies": {
+    "express": "^4.22.2",
+    "socket.io": "^4.8.3"
+  }
+}

package/templates/business/pages/_theme.js

@@ -0,0 +1,65 @@
+// pages/_theme.js — "Northwind" full-site theme: sticky nav, hero, feature +
+// product grids, CTA band, footer. Content pages (format: html) provide the
+// sections. Media slots (.slot) are placeholders you swap your own image/video
+// into from the config editor.
+const NAME = process.env.SITE_NAME || "Northwind Co";
+const NAV = [
+  ["/", "Home"],
+  ["/about", "About"],
+  ["/products", "Products"],
+  ["/contact", "Contact"],
+];
+
+export const css = `
+:root{--ink:#141a1f;--bg:#fff;--soft:#f4f6f8;--line:#e6eaef;--brand:#0e7c66;--brand2:#0b5d4c;--muted:#5c6a76;--radius:16px}
+*{box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
+a{color:var(--brand);text-decoration:none}
+img,video{max-width:100%;display:block}
+.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}
+header.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
+header.nav .wrap{display:flex;align-items:center;gap:1.5rem;height:64px}
+header.nav .brand{font-weight:800;font-size:1.15rem;color:var(--ink)}
+header.nav nav{margin-left:auto;display:flex;gap:1.5rem;align-items:center}
+header.nav nav a{color:var(--muted);font-weight:500}
+header.nav nav a:hover{color:var(--ink)}
+header.nav .cta{background:var(--brand);color:#fff;padding:.5rem 1rem;border-radius:999px;font-weight:600}
+header.nav .cta:hover{background:var(--brand2)}
+section{padding:4.5rem 0}
+section.alt{background:var(--soft)}
+.eyebrow{color:var(--brand);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;margin:0}
+h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.02em;margin:.4rem 0}
+h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;letter-spacing:-.01em;margin:.3rem 0 1.2rem}
+p.lead{font-size:1.2rem;color:var(--muted);max-width:46ch}
+.btn{display:inline-block;background:var(--brand);color:#fff;font-weight:600;padding:.8rem 1.4rem;border-radius:999px}
+.btn:hover{background:var(--brand2)}
+.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
+.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
+@media(max-width:820px){.hero{grid-template-columns:1fr}}
+.grid{display:grid;gap:1.5rem}
+.grid.c3{grid-template-columns:repeat(3,1fr)}
+.grid.c2{grid-template-columns:repeat(2,1fr)}
+@media(max-width:820px){.grid.c3,.grid.c2{grid-template-columns:1fr}}
+.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
+.card h3{margin:.2rem 0 .4rem}
+.card .price{color:var(--brand);font-weight:700}
+.slot{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#0e7c66 0%,#0b5d4c 55%,#134e4a 100%);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#dff5ee;text-align:center;margin-bottom:1rem}
+.slot.wide{aspect-ratio:16/9}.slot.tall{aspect-ratio:3/4}
+.slot span{font-size:.85rem;opacity:.92;padding:.5rem 1rem;border:1px dashed rgba(255,255,255,.45);border-radius:8px}
+.slot img,.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
+.cta-band{background:var(--brand);color:#fff;border-radius:var(--radius);padding:3rem;text-align:center}
+.cta-band h2{color:#fff}.cta-band .btn{background:#fff;color:var(--brand)}
+footer.site{border-top:1px solid var(--line);color:var(--muted);padding:2.5rem 0;font-size:.92rem}
+footer.site .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
+`;
+
+export function layout({ title, head, content }) {
+  const nav = NAV.map(([h, l], i) => (i === NAV.length - 1 ? `<a class="cta" href="${h}">${l}</a>` : `<a href="${h}">${l}</a>`)).join("");
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>${title}</title>${head}<link rel="stylesheet" href="/_theme.css"/></head><body>
+<header class="nav"><div class="wrap"><a class="brand" href="/">${NAME}</a><nav>${nav}</nav></div></header>
+${content}
+<footer class="site"><div class="wrap"><span>© ${NAME}</span><span>Built with <a href="https://voltjs.com">Volt</a></span></div></footer>
+</body></html>`;
+}

package/templates/business/pages/about.md

@@ -0,0 +1,30 @@
+---
+title: About — Northwind Co
+description: Our story, our people, our promise. Edit this page in the Volt config.
+format: html
+---
+<section><div class="wrap hero">
+  <div>
+    <p class="eyebrow">About us</p>
+    <h1>A small team with a big standard</h1>
+    <p class="lead">Tell your story here — how you started, what you believe, and why customers keep coming back. Replace every word with your own.</p>
+  </div>
+  <div class="slot tall"><span>📷 Team or founder photo</span></div>
+</div></section>
+
+<section class="alt"><div class="wrap">
+  <h2>What we stand for</h2>
+  <div class="grid c3">
+    <div class="card"><h3>Our mission</h3><p>One or two sentences on the difference you set out to make.</p></div>
+    <div class="card"><h3>How we work</h3><p>Your process, materials, or approach — what customers should know.</p></div>
+    <div class="card"><h3>Our promise</h3><p>The guarantee or commitment that stands behind everything you sell.</p></div>
+  </div>
+</div></section>
+
+<section><div class="wrap" style="max-width:720px">
+  <h2>The long version</h2>
+  <p>This is a normal content area — write as much as you like. Add paragraphs, headings, images, or a video. In the Volt config editor you can format it visually or drop in Markdown, and swap any image or video for your own.</p>
+  <div class="slot wide"><span>🎬 A short brand video works great here</span></div>
+  <p>Close with what happens next: an invitation to browse your products or get in touch.</p>
+  <p><a class="btn" href="/contact">Say hello</a></p>
+</div></section>

package/templates/business/pages/contact.md

@@ -0,0 +1,23 @@
+---
+title: Contact — Northwind Co
+description: Get in touch. Swap in your own details, map, or photo.
+format: html
+---
+<section><div class="wrap hero">
+  <div>
+    <p class="eyebrow">Contact</p>
+    <h1>Let's talk</h1>
+    <p class="lead">Questions, custom orders, or wholesale — reach out and we'll get back to you.</p>
+    <p><a class="btn" href="mailto:hello@example.com">Email us</a></p>
+  </div>
+  <div class="slot"><span>📷 Storefront photo or a map</span></div>
+</div></section>
+
+<section class="alt"><div class="wrap">
+  <div class="grid c3">
+    <div class="card"><h3>Email</h3><p><a href="mailto:hello@example.com">hello@example.com</a></p></div>
+    <div class="card"><h3>Phone</h3><p><a href="tel:+15555550123">+1 (555) 555-0123</a></p></div>
+    <div class="card"><h3>Visit</h3><p>123 Market Street<br/>Your City, ST 00000</p></div>
+  </div>
+  <p style="margin-top:1.5rem;color:var(--muted)">Want a working contact form? Enable the <code>mailer</code> add-on in the config and wire a POST route — see the docs.</p>
+</div></section>

package/templates/business/pages/index.md

@@ -0,0 +1,41 @@
+---
+title: Northwind Co — Quality goods, thoughtfully made
+description: A full site template built with Volt. Swap in your own text, images, and video — no code.
+format: html
+---
+<section><div class="wrap hero">
+  <div>
+    <p class="eyebrow">Northwind Co</p>
+    <h1>Quality goods, thoughtfully made</h1>
+    <p class="lead">Every word, image, and video on this site is yours to edit. Make it your brand in minutes — right from the Volt config.</p>
+    <p><a class="btn" href="/products">Shop products</a> &nbsp; <a class="btn ghost" href="/about">Our story</a></p>
+  </div>
+  <div class="slot wide"><span>📷 / 🎬 Hero image or video — upload yours</span></div>
+</div></section>
+
+<section class="alt"><div class="wrap">
+  <p class="eyebrow">Why us</p>
+  <h2>Built for people who sweat the details</h2>
+  <div class="grid c3">
+    <div class="card"><h3>Made to last</h3><p>Say what makes your product or service stand out. Edit this copy in the config editor.</p></div>
+    <div class="card"><h3>Fast, careful delivery</h3><p>Swap this for your own promise — shipping, turnaround, support, guarantees.</p></div>
+    <div class="card"><h3>Loved by many</h3><p>Add a stat, a short testimonial, or social proof here to build trust.</p></div>
+  </div>
+</div></section>
+
+<section><div class="wrap">
+  <p class="eyebrow">Featured</p>
+  <h2>Popular products</h2>
+  <div class="grid c3">
+    <div class="card"><div class="slot"><span>📷 Product photo</span></div><h3>Product one</h3><p class="price">$49</p></div>
+    <div class="card"><div class="slot"><span>📷 Product photo</span></div><h3>Product two</h3><p class="price">$79</p></div>
+    <div class="card"><div class="slot"><span>📷 Product photo</span></div><h3>Product three</h3><p class="price">$120</p></div>
+  </div>
+  <p style="margin-top:1.5rem"><a class="btn ghost" href="/products">See all products →</a></p>
+</div></section>
+
+<section class="alt"><div class="wrap"><div class="cta-band">
+  <h2>Ready to make it yours?</h2>
+  <p>Edit every page and swap the media in the Volt config — no code required.</p>
+  <p><a class="btn" href="/contact">Get in touch</a></p>
+</div></div></section>

package/templates/business/pages/products.md

@@ -0,0 +1,27 @@
+---
+title: Products — Northwind Co
+description: Browse the collection. Replace each product's photo, name, and price with your own.
+format: html
+---
+<section><div class="wrap">
+  <p class="eyebrow">Shop</p>
+  <h1>Products</h1>
+  <p class="lead">Replace each card with your own item — photo, name, price, and a short line of copy.</p>
+</div></section>
+
+<section class="alt"><div class="wrap">
+  <div class="grid c3">
+    <div class="card"><div class="slot"><span>📷 Product photo</span></div><h3>Everyday tote</h3><p class="price">$49</p><p>One line about the product — material, size, or the problem it solves.</p></div>
+    <div class="card"><div class="slot"><span>📷 Product photo</span></div><h3>Field jacket</h3><p class="price">$129</p><p>One line about the product — material, size, or the problem it solves.</p></div>
+    <div class="card"><div class="slot"><span>📷 Product photo</span></div><h3>Ceramic mug</h3><p class="price">$24</p><p>One line about the product — material, size, or the problem it solves.</p></div>
+    <div class="card"><div class="slot"><span>📷 Product photo</span></div><h3>Wool throw</h3><p class="price">$89</p><p>One line about the product — material, size, or the problem it solves.</p></div>
+    <div class="card"><div class="slot"><span>📷 Product photo</span></div><h3>Leather wallet</h3><p class="price">$59</p><p>One line about the product — material, size, or the problem it solves.</p></div>
+    <div class="card"><div class="slot"><span>📷 Product photo</span></div><h3>Canvas print</h3><p class="price">$39</p><p>One line about the product — material, size, or the problem it solves.</p></div>
+  </div>
+</div></section>
+
+<section><div class="wrap"><div class="cta-band">
+  <h2>Not sure where to start?</h2>
+  <p>Tell us what you're after and we'll point you to the right piece.</p>
+  <p><a class="btn" href="/contact">Contact us</a></p>
+</div></div></section>