create-volt 0.36.0 → 0.37.0

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.37.0] - 2026-06-29
+
+### Added
+- **Bundled themes + a wizard theme picker.** create-volt ships paper/midnight/
+  classic under `.volt/themes`; the setup wizard has a **Theme** dropdown (no npm
+  needed) with a **Customize** button that copies the chosen theme to
+  `pages/_theme.js` for editing. `THEME` now also resolves bundled themes.
+- **More wizard settings:** `SITE_NAME`, `SITE_URL`, `CONFIG_PORT`, and optional
+  **AI keys** (`AI_PROVIDER` + Anthropic/OpenAI/Gemini key — written to `.env`,
+  kept server-side).
+- **`CONFIG_PORT` defaults to 5050** for the `--edit`/`--studio` config UI, so it
+  never collides with a running app.
+- **Inject `<script>` tags** for third-party libs: per-page front-matter
+  `scripts:` (comma-separated URLs) and/or a site-wide `SITE_SCRIPTS` env, loaded
+  deferred (works on pages + posts).
+
 ## [0.36.0] - 2026-06-29
 
 ### Added
@@ -479,6 +495,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.37.0]: https://github.com/MIR-2025/volt/releases/tag/v0.37.0
 [0.36.0]: https://github.com/MIR-2025/volt/releases/tag/v0.36.0
 [0.35.0]: https://github.com/MIR-2025/volt/releases/tag/v0.35.0
 [0.34.0]: https://github.com/MIR-2025/volt/releases/tag/v0.34.0

package/addons/pages/files/lib/pages.js

@@ -77,6 +77,12 @@ export function metaHead(meta) {
     }
     if (ok) t.push(`<script type="application/ld+json">${meta.jsonld.replace(/</g, "\\u003c")}</script>`);
   }
+  // custom <script> tags for third-party libs: per-page front-matter `scripts:`
+  // (comma-separated URLs) and/or a site-wide SITE_SCRIPTS env. Loaded deferred.
+  const scripts = [process.env.SITE_SCRIPTS, meta.scripts].filter(Boolean).join(",");
+  for (const url of scripts.split(",").map((s) => s.trim()).filter(Boolean)) {
+    t.push(`<script src="${esc(url)}" defer></script>`);
+  }
   return t.join("\n");
 }
 
@@ -123,6 +129,12 @@ export async function loadTheme(dir, env) {
     return layout ? { layout, css: m.css || themeCss(dir) } : null;
   };
   if (env.THEME) {
+    // a theme bundled by create-volt (.volt/themes/<name>/index.js) — no npm needed
+    const bundled = path.resolve(dir, "..", ".volt", "themes", env.THEME, "index.js");
+    if (fs.existsSync(bundled)) {
+      const t = wrap(await import(pathToFileURL(bundled).href));
+      if (t) return t;
+    }
     for (const id of [`volt-theme-${env.THEME}`, env.THEME]) {
       try {
         const t = wrap(await import(id));

package/index.js

@@ -466,6 +466,7 @@ if (fs.existsSync(shippedDockerignore)) {
 // (only for templates that ship the wizard, i.e. have a setup/ dir).
 if (fs.existsSync(path.join(targetDir, "setup"))) {
   fs.cpSync(path.join(__dirname, "addons"), path.join(targetDir, ".volt", "addons"), { recursive: true });
+  fs.cpSync(path.join(__dirname, "themes"), path.join(targetDir, ".volt", "themes"), { recursive: true }); // bundled themes the wizard can pick
 }
 
 // --- stamp the project name into package.json ---
@@ -549,7 +550,7 @@ console.log(`\n${green("✔")} ${bold("Done!")} Next steps:\n`);
 console.log(`  ${cyan("cd")} ${projectName}`);
 if (!installed) console.log(`  ${cyan(installCmd)}`);
 console.log(`  ${cyan(runCmd)}`);
-console.log(`\nFirst run opens a quick ${bold("setup")} page at ${cyan("http://localhost:" + port)}, then your app starts.\n`);
+console.log(`\nFirst run opens a quick ${bold("setup")} page at ${cyan("http://localhost:5050")}; your app then runs at ${cyan("http://localhost:" + port)}.\n`);
 
 if (flags.has("--start")) {
   if (!installed) {

package/package.json

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

package/templates/blog/server.js

@@ -20,7 +20,9 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const ENV_PATH = path.join(__dirname, ".env");
 const PKG_PATH = path.join(__dirname, "package.json");
 const ADDONS_DIR = path.join(__dirname, ".volt", "addons"); // bundled add-on sources
+const THEMES_DIR = path.join(__dirname, ".volt", "themes"); // bundled themes the wizard can pick
 const DEFAULT_PORT = 26628; // create-volt stamps this with the project's date-port
+const CONFIG_DEFAULT_PORT = 5050; // the --edit/--studio config UI's default port (its own, so it never clashes with a running app)
 
 // `--port <n>` (or --port=<n>) overrides the listen port for this run — lets
 // --edit/--studio dodge a port the running app already holds, and runs the app
@@ -37,7 +39,7 @@ function cliPort() {
 // then the app's PORT, then the date-port.
 function configPort() {
   const env = readEnvFile(); // --edit runs before loadEnv(), so read the file too
-  return cliPort() || Number(process.env.CONFIG_PORT) || Number(env.CONFIG_PORT) || Number(process.env.PORT) || Number(env.PORT) || DEFAULT_PORT;
+  return cliPort() || Number(process.env.CONFIG_PORT) || Number(env.CONFIG_PORT) || CONFIG_DEFAULT_PORT;
 }
 const PKG_VERSIONS = { mongodb: "^6.21.0", mysql2: "^3.22.5", pg: "^8.22.0", nodemailer: "^6.10.1", marked: "^18.0.5", busboy: "^1.6.0", "@aws-sdk/client-s3": "^3.1075.0" };
 const LIB_FILE = { db: "store.js", mailer: "mailer.js", auth: "auth.js", realtime: "realtime.js", pages: "pages.js", posts: "posts.js", media: "media.js" };
@@ -68,6 +70,23 @@ function availableAddons() {
     });
 }
 
+// Themes bundled by create-volt (under .volt/themes), pickable in the wizard.
+function availableThemes() {
+  if (!fs.existsSync(THEMES_DIR)) return [];
+  return fs
+    .readdirSync(THEMES_DIR, { withFileTypes: true })
+    .filter((e) => e.isDirectory() && fs.existsSync(path.join(THEMES_DIR, e.name, "index.js")))
+    .map((e) => {
+      let description = "";
+      try {
+        description = JSON.parse(fs.readFileSync(path.join(THEMES_DIR, e.name, "meta.json"), "utf8")).description;
+      } catch {
+        /* no meta */
+      }
+      return { name: e.name, description };
+    });
+}
+
 // Which add-ons does VOLT_ADDONS turn on (dependencies expanded)?
 function enabledFrom(env) {
   const metas = Object.fromEntries(availableAddons().map((a) => [a.name, a]));
@@ -266,7 +285,27 @@ function startSetup() {
     }
     if (req.method === "GET" && p === "/setup/state") {
       res.setHeader("Content-Type", "application/json");
-      return res.end(JSON.stringify({ available: availableAddons(), current: readEnvFile(), defaultPort: DEFAULT_PORT }));
+      return res.end(JSON.stringify({ available: availableAddons(), themes: availableThemes(), current: readEnvFile(), defaultPort: DEFAULT_PORT, configDefaultPort: CONFIG_DEFAULT_PORT }));
+    }
+    // "Customize": copy a bundled theme into pages/_theme.js so it can be edited.
+    if (req.method === "POST" && p === "/setup/eject-theme") {
+      let body = "";
+      req.on("data", (c) => (body += c));
+      req.on("end", () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const { theme } = JSON.parse(body || "{}");
+          const src = path.join(THEMES_DIR, String(theme || ""), "index.js");
+          if (!theme || !/^[a-z0-9-]+$/i.test(theme) || !fs.existsSync(src)) return res.end(JSON.stringify({ ok: false, error: "unknown theme" }));
+          const dest = path.join(__dirname, "pages", "_theme.js");
+          fs.mkdirSync(path.dirname(dest), { recursive: true });
+          fs.copyFileSync(src, dest);
+          res.end(JSON.stringify({ ok: true, path: "pages/_theme.js" }));
+        } catch (e) {
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
     }
     if (req.method === "POST" && p === "/setup/test-db") {
       let body = "";

package/templates/blog/setup/setup.js

@@ -4,7 +4,7 @@
 // just config.
 import { signal, computed, html, mount } from "/volt.js";
 
-const { available, current, defaultPort } = await (await fetch("/setup/state")).json();
+const { available, themes = [], current, defaultPort, configDefaultPort = 5050 } = await (await fetch("/setup/state")).json();
 const depsOf = Object.fromEntries(available.map((a) => [a.name, a.dependsOn || []]));
 const order = available.map((a) => a.name);
 const enabledNow = new Set(String(current.VOLT_ADDONS || "").split(",").map((s) => s.trim()).filter(Boolean));
@@ -28,6 +28,12 @@ const state = signal({
   // detect the admin's timezone from their browser (the wizard runs here), so
   // dates render in their zone — not the server's (usually UTC on a host).
   tz: current.SITE_TZ || Intl.DateTimeFormat().resolvedOptions().timeZone || "",
+  siteName: current.SITE_NAME || "",
+  siteUrl: current.SITE_URL || "",
+  configPort: current.CONFIG_PORT || "",
+  theme: current.THEME || "",
+  aiProvider: current.AI_PROVIDER || "anthropic",
+  aiKey: current.ANTHROPIC_API_KEY || current.OPENAI_API_KEY || current.GEMINI_API_KEY || "",
 });
 const set = (patch) => state({ ...state(), ...patch });
 const toggle = (n) => state({ ...state(), addons: { ...state().addons, [n]: !state().addons[n] } });
@@ -67,6 +73,15 @@ function genEnv(s) {
   const eff = effective(s);
   const out = [`VOLT_ADDONS=${eff.join(",")}`, `PORT=${clean(s.port)}`];
   if (s.tz) out.push(`SITE_TZ=${clean(s.tz)}`); // admin's timezone, for date display
+  if (s.siteName) out.push(`SITE_NAME=${clean(s.siteName)}`);
+  if (s.siteUrl) out.push(`SITE_URL=${clean(s.siteUrl)}`);
+  if (s.configPort) out.push(`CONFIG_PORT=${clean(s.configPort)}`);
+  if ((eff.includes("pages") || eff.includes("posts")) && s.theme) out.push(`THEME=${clean(s.theme)}`);
+  if (s.aiKey) {
+    out.push(`AI_PROVIDER=${clean(s.aiProvider)}`);
+    const keyVar = { anthropic: "ANTHROPIC_API_KEY", openai: "OPENAI_API_KEY", gemini: "GEMINI_API_KEY" }[s.aiProvider] || "ANTHROPIC_API_KEY";
+    out.push(`${keyVar}=${clean(s.aiKey)}`);
+  }
   if (eff.includes("db")) {
     out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
     if (s.dbDriver === "mongodb") {
@@ -104,6 +119,24 @@ const mediaDriver = computed(() => state().mediaDriver);
 const hasDb = computed(() => eff().includes("db"));
 const hasMailer = computed(() => eff().includes("mailer"));
 const hasMedia = computed(() => eff().includes("media"));
+const hasContent = computed(() => eff().includes("pages") || eff().includes("posts")); // themes apply to pages/posts
+
+// "Customize": copy the selected bundled theme to pages/_theme.js, then use it
+// locally (THEME cleared) so edits take effect.
+async function ejectTheme() {
+  const theme = state().theme;
+  if (!theme) return;
+  status("Copying theme…");
+  try {
+    const r = await (await fetch("/setup/eject-theme", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ theme }) })).json();
+    if (r.ok) {
+      set({ theme: "" });
+      status(`Copied ${theme} → ${r.path}. Edit it freely; THEME was cleared so your local copy is used.`);
+    } else status("Error: " + (r.error || "?"));
+  } catch {
+    status("Network error copying theme.");
+  }
+}
 
 async function testDb() {
   const s = state();
@@ -201,6 +234,34 @@ const mediaSettings = () =>
         ? html`${field("S3_ENDPOINT", "s3Endpoint", "https://nyc3.digitaloceanspaces.com")}${field("S3_REGION", "s3Region", "us-east-1")}${field("S3_BUCKET", "s3Bucket", "my-space")}${field("S3_KEY", "s3Key", "access key")}${field("S3_SECRET", "s3Secret", "secret key")}${field("S3_PUBLIC_BASE (optional CDN base)", "s3PublicBase", "https://cdn.example.com")}`
         : null}`;
 
+// theme chooser: a bundled theme (or the built-in/local one), with Customize
+const themePicker = () =>
+  html`<div class="mb-2">
+    <label class="form-label small mb-1">Theme (THEME)</label>
+    <select class="form-select" value=${() => state().theme} onchange=${(e) => set({ theme: e.target.value })}>
+      <option value="">default — built-in, or your pages/_theme.js</option>
+      ${themes.map((t) => html`<option value=${t.name}>${t.name}${t.description ? " — " + t.description : ""}</option>`)}
+    </select>
+    ${() =>
+      state().theme
+        ? html`<button class="btn btn-sm btn-outline-secondary mt-1" onclick=${ejectTheme}>Customize → copy to pages/_theme.js</button>`
+        : html`<div class="small text-muted mt-1">Pick a starter theme, or keep the built-in / your local <code>pages/_theme.js</code>.</div>`}
+  </div>`;
+
+// AI keys (optional) — used by the WYSIWYG editor's assistant. Kept server-side.
+const aiSettings = () =>
+  html`<details class="mb-2"><summary class="form-label small mb-0" style="cursor:pointer">AI keys (optional) — for the editor's assistant</summary>
+    <div class="mt-2">
+      <label class="form-label small mb-1">Provider (AI_PROVIDER)</label>
+      <select class="form-select mb-2" value=${() => state().aiProvider} onchange=${(e) => set({ aiProvider: e.target.value })}>
+        <option value="anthropic">Anthropic (Claude)</option>
+        <option value="openai">OpenAI</option>
+        <option value="gemini">Google Gemini</option>
+      </select>
+      ${field("API key — stays server-side, written to .env", "aiKey", "sk-…")}
+    </div>
+  </details>`;
+
 mount(
   "#app",
   available.length
@@ -213,9 +274,14 @@ mount(
   html`<div class="card-x p-4 mb-3">
     <h2 class="h6 mb-3">Settings</h2>
     ${field("PORT", "port", String(defaultPort))}
+    ${field("SITE_NAME", "siteName", "My Site")}
+    ${() => (hasContent() ? themePicker() : null)}
     ${() => (hasDb() ? dbSettings() : null)}
     ${() => (hasMailer() ? html`${field("SMTP_URL (optional)", "smtpUrl", "smtp://user:pass@smtp.host:587")}${field("MAIL_FROM", "mailFrom", "App <no-reply@you.com>")}` : null)}
     ${() => (hasMedia() ? mediaSettings() : null)}
+    ${aiSettings()}
+    ${field("SITE_URL (optional — absolute links, RSS, canonical)", "siteUrl", "https://example.com")}
+    ${field("CONFIG_PORT (this wizard's own port)", "configPort", String(configDefaultPort))}
   </div>`,
   html`<div class="card-x p-4 mb-3">
     <div class="d-flex justify-content-between align-items-center mb-2">

package/templates/default/server.js

@@ -20,7 +20,9 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const ENV_PATH = path.join(__dirname, ".env");
 const PKG_PATH = path.join(__dirname, "package.json");
 const ADDONS_DIR = path.join(__dirname, ".volt", "addons"); // bundled add-on sources
+const THEMES_DIR = path.join(__dirname, ".volt", "themes"); // bundled themes the wizard can pick
 const DEFAULT_PORT = 26628; // create-volt stamps this with the project's date-port
+const CONFIG_DEFAULT_PORT = 5050; // the --edit/--studio config UI's default port (its own, so it never clashes with a running app)
 
 // `--port <n>` (or --port=<n>) overrides the listen port for this run — lets
 // --edit/--studio dodge a port the running app already holds, and runs the app
@@ -37,7 +39,7 @@ function cliPort() {
 // then the app's PORT, then the date-port.
 function configPort() {
   const env = readEnvFile(); // --edit runs before loadEnv(), so read the file too
-  return cliPort() || Number(process.env.CONFIG_PORT) || Number(env.CONFIG_PORT) || Number(process.env.PORT) || Number(env.PORT) || DEFAULT_PORT;
+  return cliPort() || Number(process.env.CONFIG_PORT) || Number(env.CONFIG_PORT) || CONFIG_DEFAULT_PORT;
 }
 const PKG_VERSIONS = { mongodb: "^6.21.0", mysql2: "^3.22.5", pg: "^8.22.0", nodemailer: "^6.10.1", marked: "^18.0.5", busboy: "^1.6.0", "@aws-sdk/client-s3": "^3.1075.0" };
 const LIB_FILE = { db: "store.js", mailer: "mailer.js", auth: "auth.js", realtime: "realtime.js", pages: "pages.js", posts: "posts.js", media: "media.js" };
@@ -68,6 +70,23 @@ function availableAddons() {
     });
 }
 
+// Themes bundled by create-volt (under .volt/themes), pickable in the wizard.
+function availableThemes() {
+  if (!fs.existsSync(THEMES_DIR)) return [];
+  return fs
+    .readdirSync(THEMES_DIR, { withFileTypes: true })
+    .filter((e) => e.isDirectory() && fs.existsSync(path.join(THEMES_DIR, e.name, "index.js")))
+    .map((e) => {
+      let description = "";
+      try {
+        description = JSON.parse(fs.readFileSync(path.join(THEMES_DIR, e.name, "meta.json"), "utf8")).description;
+      } catch {
+        /* no meta */
+      }
+      return { name: e.name, description };
+    });
+}
+
 // Which add-ons does VOLT_ADDONS turn on (dependencies expanded)?
 function enabledFrom(env) {
   const metas = Object.fromEntries(availableAddons().map((a) => [a.name, a]));
@@ -266,7 +285,27 @@ function startSetup() {
     }
     if (req.method === "GET" && p === "/setup/state") {
       res.setHeader("Content-Type", "application/json");
-      return res.end(JSON.stringify({ available: availableAddons(), current: readEnvFile(), defaultPort: DEFAULT_PORT }));
+      return res.end(JSON.stringify({ available: availableAddons(), themes: availableThemes(), current: readEnvFile(), defaultPort: DEFAULT_PORT, configDefaultPort: CONFIG_DEFAULT_PORT }));
+    }
+    // "Customize": copy a bundled theme into pages/_theme.js so it can be edited.
+    if (req.method === "POST" && p === "/setup/eject-theme") {
+      let body = "";
+      req.on("data", (c) => (body += c));
+      req.on("end", () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const { theme } = JSON.parse(body || "{}");
+          const src = path.join(THEMES_DIR, String(theme || ""), "index.js");
+          if (!theme || !/^[a-z0-9-]+$/i.test(theme) || !fs.existsSync(src)) return res.end(JSON.stringify({ ok: false, error: "unknown theme" }));
+          const dest = path.join(__dirname, "pages", "_theme.js");
+          fs.mkdirSync(path.dirname(dest), { recursive: true });
+          fs.copyFileSync(src, dest);
+          res.end(JSON.stringify({ ok: true, path: "pages/_theme.js" }));
+        } catch (e) {
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
     }
     if (req.method === "POST" && p === "/setup/test-db") {
       let body = "";

package/templates/default/setup/setup.js

@@ -4,7 +4,7 @@
 // just config.
 import { signal, computed, html, mount } from "/volt.js";
 
-const { available, current, defaultPort } = await (await fetch("/setup/state")).json();
+const { available, themes = [], current, defaultPort, configDefaultPort = 5050 } = await (await fetch("/setup/state")).json();
 const depsOf = Object.fromEntries(available.map((a) => [a.name, a.dependsOn || []]));
 const order = available.map((a) => a.name);
 const enabledNow = new Set(String(current.VOLT_ADDONS || "").split(",").map((s) => s.trim()).filter(Boolean));
@@ -28,6 +28,12 @@ const state = signal({
   // detect the admin's timezone from their browser (the wizard runs here), so
   // dates render in their zone — not the server's (usually UTC on a host).
   tz: current.SITE_TZ || Intl.DateTimeFormat().resolvedOptions().timeZone || "",
+  siteName: current.SITE_NAME || "",
+  siteUrl: current.SITE_URL || "",
+  configPort: current.CONFIG_PORT || "",
+  theme: current.THEME || "",
+  aiProvider: current.AI_PROVIDER || "anthropic",
+  aiKey: current.ANTHROPIC_API_KEY || current.OPENAI_API_KEY || current.GEMINI_API_KEY || "",
 });
 const set = (patch) => state({ ...state(), ...patch });
 const toggle = (n) => state({ ...state(), addons: { ...state().addons, [n]: !state().addons[n] } });
@@ -67,6 +73,15 @@ function genEnv(s) {
   const eff = effective(s);
   const out = [`VOLT_ADDONS=${eff.join(",")}`, `PORT=${clean(s.port)}`];
   if (s.tz) out.push(`SITE_TZ=${clean(s.tz)}`); // admin's timezone, for date display
+  if (s.siteName) out.push(`SITE_NAME=${clean(s.siteName)}`);
+  if (s.siteUrl) out.push(`SITE_URL=${clean(s.siteUrl)}`);
+  if (s.configPort) out.push(`CONFIG_PORT=${clean(s.configPort)}`);
+  if ((eff.includes("pages") || eff.includes("posts")) && s.theme) out.push(`THEME=${clean(s.theme)}`);
+  if (s.aiKey) {
+    out.push(`AI_PROVIDER=${clean(s.aiProvider)}`);
+    const keyVar = { anthropic: "ANTHROPIC_API_KEY", openai: "OPENAI_API_KEY", gemini: "GEMINI_API_KEY" }[s.aiProvider] || "ANTHROPIC_API_KEY";
+    out.push(`${keyVar}=${clean(s.aiKey)}`);
+  }
   if (eff.includes("db")) {
     out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
     if (s.dbDriver === "mongodb") {
@@ -104,6 +119,24 @@ const mediaDriver = computed(() => state().mediaDriver);
 const hasDb = computed(() => eff().includes("db"));
 const hasMailer = computed(() => eff().includes("mailer"));
 const hasMedia = computed(() => eff().includes("media"));
+const hasContent = computed(() => eff().includes("pages") || eff().includes("posts")); // themes apply to pages/posts
+
+// "Customize": copy the selected bundled theme to pages/_theme.js, then use it
+// locally (THEME cleared) so edits take effect.
+async function ejectTheme() {
+  const theme = state().theme;
+  if (!theme) return;
+  status("Copying theme…");
+  try {
+    const r = await (await fetch("/setup/eject-theme", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ theme }) })).json();
+    if (r.ok) {
+      set({ theme: "" });
+      status(`Copied ${theme} → ${r.path}. Edit it freely; THEME was cleared so your local copy is used.`);
+    } else status("Error: " + (r.error || "?"));
+  } catch {
+    status("Network error copying theme.");
+  }
+}
 
 async function testDb() {
   const s = state();
@@ -201,6 +234,34 @@ const mediaSettings = () =>
         ? html`${field("S3_ENDPOINT", "s3Endpoint", "https://nyc3.digitaloceanspaces.com")}${field("S3_REGION", "s3Region", "us-east-1")}${field("S3_BUCKET", "s3Bucket", "my-space")}${field("S3_KEY", "s3Key", "access key")}${field("S3_SECRET", "s3Secret", "secret key")}${field("S3_PUBLIC_BASE (optional CDN base)", "s3PublicBase", "https://cdn.example.com")}`
         : null}`;
 
+// theme chooser: a bundled theme (or the built-in/local one), with Customize
+const themePicker = () =>
+  html`<div class="mb-2">
+    <label class="form-label small mb-1">Theme (THEME)</label>
+    <select class="form-select" value=${() => state().theme} onchange=${(e) => set({ theme: e.target.value })}>
+      <option value="">default — built-in, or your pages/_theme.js</option>
+      ${themes.map((t) => html`<option value=${t.name}>${t.name}${t.description ? " — " + t.description : ""}</option>`)}
+    </select>
+    ${() =>
+      state().theme
+        ? html`<button class="btn btn-sm btn-outline-secondary mt-1" onclick=${ejectTheme}>Customize → copy to pages/_theme.js</button>`
+        : html`<div class="small text-muted mt-1">Pick a starter theme, or keep the built-in / your local <code>pages/_theme.js</code>.</div>`}
+  </div>`;
+
+// AI keys (optional) — used by the WYSIWYG editor's assistant. Kept server-side.
+const aiSettings = () =>
+  html`<details class="mb-2"><summary class="form-label small mb-0" style="cursor:pointer">AI keys (optional) — for the editor's assistant</summary>
+    <div class="mt-2">
+      <label class="form-label small mb-1">Provider (AI_PROVIDER)</label>
+      <select class="form-select mb-2" value=${() => state().aiProvider} onchange=${(e) => set({ aiProvider: e.target.value })}>
+        <option value="anthropic">Anthropic (Claude)</option>
+        <option value="openai">OpenAI</option>
+        <option value="gemini">Google Gemini</option>
+      </select>
+      ${field("API key — stays server-side, written to .env", "aiKey", "sk-…")}
+    </div>
+  </details>`;
+
 mount(
   "#app",
   available.length
@@ -213,9 +274,14 @@ mount(
   html`<div class="card-x p-4 mb-3">
     <h2 class="h6 mb-3">Settings</h2>
     ${field("PORT", "port", String(defaultPort))}
+    ${field("SITE_NAME", "siteName", "My Site")}
+    ${() => (hasContent() ? themePicker() : null)}
     ${() => (hasDb() ? dbSettings() : null)}
     ${() => (hasMailer() ? html`${field("SMTP_URL (optional)", "smtpUrl", "smtp://user:pass@smtp.host:587")}${field("MAIL_FROM", "mailFrom", "App <no-reply@you.com>")}` : null)}
     ${() => (hasMedia() ? mediaSettings() : null)}
+    ${aiSettings()}
+    ${field("SITE_URL (optional — absolute links, RSS, canonical)", "siteUrl", "https://example.com")}
+    ${field("CONFIG_PORT (this wizard's own port)", "configPort", String(configDefaultPort))}
   </div>`,
   html`<div class="card-x p-4 mb-3">
     <div class="d-flex justify-content-between align-items-center mb-2">

package/templates/docs/server.js

@@ -20,7 +20,9 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const ENV_PATH = path.join(__dirname, ".env");
 const PKG_PATH = path.join(__dirname, "package.json");
 const ADDONS_DIR = path.join(__dirname, ".volt", "addons"); // bundled add-on sources
+const THEMES_DIR = path.join(__dirname, ".volt", "themes"); // bundled themes the wizard can pick
 const DEFAULT_PORT = 26628; // create-volt stamps this with the project's date-port
+const CONFIG_DEFAULT_PORT = 5050; // the --edit/--studio config UI's default port (its own, so it never clashes with a running app)
 
 // `--port <n>` (or --port=<n>) overrides the listen port for this run — lets
 // --edit/--studio dodge a port the running app already holds, and runs the app
@@ -37,7 +39,7 @@ function cliPort() {
 // then the app's PORT, then the date-port.
 function configPort() {
   const env = readEnvFile(); // --edit runs before loadEnv(), so read the file too
-  return cliPort() || Number(process.env.CONFIG_PORT) || Number(env.CONFIG_PORT) || Number(process.env.PORT) || Number(env.PORT) || DEFAULT_PORT;
+  return cliPort() || Number(process.env.CONFIG_PORT) || Number(env.CONFIG_PORT) || CONFIG_DEFAULT_PORT;
 }
 const PKG_VERSIONS = { mongodb: "^6.21.0", mysql2: "^3.22.5", pg: "^8.22.0", nodemailer: "^6.10.1", marked: "^18.0.5", busboy: "^1.6.0", "@aws-sdk/client-s3": "^3.1075.0" };
 const LIB_FILE = { db: "store.js", mailer: "mailer.js", auth: "auth.js", realtime: "realtime.js", pages: "pages.js", posts: "posts.js", media: "media.js" };
@@ -68,6 +70,23 @@ function availableAddons() {
     });
 }
 
+// Themes bundled by create-volt (under .volt/themes), pickable in the wizard.
+function availableThemes() {
+  if (!fs.existsSync(THEMES_DIR)) return [];
+  return fs
+    .readdirSync(THEMES_DIR, { withFileTypes: true })
+    .filter((e) => e.isDirectory() && fs.existsSync(path.join(THEMES_DIR, e.name, "index.js")))
+    .map((e) => {
+      let description = "";
+      try {
+        description = JSON.parse(fs.readFileSync(path.join(THEMES_DIR, e.name, "meta.json"), "utf8")).description;
+      } catch {
+        /* no meta */
+      }
+      return { name: e.name, description };
+    });
+}
+
 // Which add-ons does VOLT_ADDONS turn on (dependencies expanded)?
 function enabledFrom(env) {
   const metas = Object.fromEntries(availableAddons().map((a) => [a.name, a]));
@@ -266,7 +285,27 @@ function startSetup() {
     }
     if (req.method === "GET" && p === "/setup/state") {
       res.setHeader("Content-Type", "application/json");
-      return res.end(JSON.stringify({ available: availableAddons(), current: readEnvFile(), defaultPort: DEFAULT_PORT }));
+      return res.end(JSON.stringify({ available: availableAddons(), themes: availableThemes(), current: readEnvFile(), defaultPort: DEFAULT_PORT, configDefaultPort: CONFIG_DEFAULT_PORT }));
+    }
+    // "Customize": copy a bundled theme into pages/_theme.js so it can be edited.
+    if (req.method === "POST" && p === "/setup/eject-theme") {
+      let body = "";
+      req.on("data", (c) => (body += c));
+      req.on("end", () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const { theme } = JSON.parse(body || "{}");
+          const src = path.join(THEMES_DIR, String(theme || ""), "index.js");
+          if (!theme || !/^[a-z0-9-]+$/i.test(theme) || !fs.existsSync(src)) return res.end(JSON.stringify({ ok: false, error: "unknown theme" }));
+          const dest = path.join(__dirname, "pages", "_theme.js");
+          fs.mkdirSync(path.dirname(dest), { recursive: true });
+          fs.copyFileSync(src, dest);
+          res.end(JSON.stringify({ ok: true, path: "pages/_theme.js" }));
+        } catch (e) {
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
     }
     if (req.method === "POST" && p === "/setup/test-db") {
       let body = "";

package/templates/docs/setup/setup.js

@@ -4,7 +4,7 @@
 // just config.
 import { signal, computed, html, mount } from "/volt.js";
 
-const { available, current, defaultPort } = await (await fetch("/setup/state")).json();
+const { available, themes = [], current, defaultPort, configDefaultPort = 5050 } = await (await fetch("/setup/state")).json();
 const depsOf = Object.fromEntries(available.map((a) => [a.name, a.dependsOn || []]));
 const order = available.map((a) => a.name);
 const enabledNow = new Set(String(current.VOLT_ADDONS || "").split(",").map((s) => s.trim()).filter(Boolean));
@@ -28,6 +28,12 @@ const state = signal({
   // detect the admin's timezone from their browser (the wizard runs here), so
   // dates render in their zone — not the server's (usually UTC on a host).
   tz: current.SITE_TZ || Intl.DateTimeFormat().resolvedOptions().timeZone || "",
+  siteName: current.SITE_NAME || "",
+  siteUrl: current.SITE_URL || "",
+  configPort: current.CONFIG_PORT || "",
+  theme: current.THEME || "",
+  aiProvider: current.AI_PROVIDER || "anthropic",
+  aiKey: current.ANTHROPIC_API_KEY || current.OPENAI_API_KEY || current.GEMINI_API_KEY || "",
 });
 const set = (patch) => state({ ...state(), ...patch });
 const toggle = (n) => state({ ...state(), addons: { ...state().addons, [n]: !state().addons[n] } });
@@ -67,6 +73,15 @@ function genEnv(s) {
   const eff = effective(s);
   const out = [`VOLT_ADDONS=${eff.join(",")}`, `PORT=${clean(s.port)}`];
   if (s.tz) out.push(`SITE_TZ=${clean(s.tz)}`); // admin's timezone, for date display
+  if (s.siteName) out.push(`SITE_NAME=${clean(s.siteName)}`);
+  if (s.siteUrl) out.push(`SITE_URL=${clean(s.siteUrl)}`);
+  if (s.configPort) out.push(`CONFIG_PORT=${clean(s.configPort)}`);
+  if ((eff.includes("pages") || eff.includes("posts")) && s.theme) out.push(`THEME=${clean(s.theme)}`);
+  if (s.aiKey) {
+    out.push(`AI_PROVIDER=${clean(s.aiProvider)}`);
+    const keyVar = { anthropic: "ANTHROPIC_API_KEY", openai: "OPENAI_API_KEY", gemini: "GEMINI_API_KEY" }[s.aiProvider] || "ANTHROPIC_API_KEY";
+    out.push(`${keyVar}=${clean(s.aiKey)}`);
+  }
   if (eff.includes("db")) {
     out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
     if (s.dbDriver === "mongodb") {
@@ -104,6 +119,24 @@ const mediaDriver = computed(() => state().mediaDriver);
 const hasDb = computed(() => eff().includes("db"));
 const hasMailer = computed(() => eff().includes("mailer"));
 const hasMedia = computed(() => eff().includes("media"));
+const hasContent = computed(() => eff().includes("pages") || eff().includes("posts")); // themes apply to pages/posts
+
+// "Customize": copy the selected bundled theme to pages/_theme.js, then use it
+// locally (THEME cleared) so edits take effect.
+async function ejectTheme() {
+  const theme = state().theme;
+  if (!theme) return;
+  status("Copying theme…");
+  try {
+    const r = await (await fetch("/setup/eject-theme", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ theme }) })).json();
+    if (r.ok) {
+      set({ theme: "" });
+      status(`Copied ${theme} → ${r.path}. Edit it freely; THEME was cleared so your local copy is used.`);
+    } else status("Error: " + (r.error || "?"));
+  } catch {
+    status("Network error copying theme.");
+  }
+}
 
 async function testDb() {
   const s = state();
@@ -201,6 +234,34 @@ const mediaSettings = () =>
         ? html`${field("S3_ENDPOINT", "s3Endpoint", "https://nyc3.digitaloceanspaces.com")}${field("S3_REGION", "s3Region", "us-east-1")}${field("S3_BUCKET", "s3Bucket", "my-space")}${field("S3_KEY", "s3Key", "access key")}${field("S3_SECRET", "s3Secret", "secret key")}${field("S3_PUBLIC_BASE (optional CDN base)", "s3PublicBase", "https://cdn.example.com")}`
         : null}`;
 
+// theme chooser: a bundled theme (or the built-in/local one), with Customize
+const themePicker = () =>
+  html`<div class="mb-2">
+    <label class="form-label small mb-1">Theme (THEME)</label>
+    <select class="form-select" value=${() => state().theme} onchange=${(e) => set({ theme: e.target.value })}>
+      <option value="">default — built-in, or your pages/_theme.js</option>
+      ${themes.map((t) => html`<option value=${t.name}>${t.name}${t.description ? " — " + t.description : ""}</option>`)}
+    </select>
+    ${() =>
+      state().theme
+        ? html`<button class="btn btn-sm btn-outline-secondary mt-1" onclick=${ejectTheme}>Customize → copy to pages/_theme.js</button>`
+        : html`<div class="small text-muted mt-1">Pick a starter theme, or keep the built-in / your local <code>pages/_theme.js</code>.</div>`}
+  </div>`;
+
+// AI keys (optional) — used by the WYSIWYG editor's assistant. Kept server-side.
+const aiSettings = () =>
+  html`<details class="mb-2"><summary class="form-label small mb-0" style="cursor:pointer">AI keys (optional) — for the editor's assistant</summary>
+    <div class="mt-2">
+      <label class="form-label small mb-1">Provider (AI_PROVIDER)</label>
+      <select class="form-select mb-2" value=${() => state().aiProvider} onchange=${(e) => set({ aiProvider: e.target.value })}>
+        <option value="anthropic">Anthropic (Claude)</option>
+        <option value="openai">OpenAI</option>
+        <option value="gemini">Google Gemini</option>
+      </select>
+      ${field("API key — stays server-side, written to .env", "aiKey", "sk-…")}
+    </div>
+  </details>`;
+
 mount(
   "#app",
   available.length
@@ -213,9 +274,14 @@ mount(
   html`<div class="card-x p-4 mb-3">
     <h2 class="h6 mb-3">Settings</h2>
     ${field("PORT", "port", String(defaultPort))}
+    ${field("SITE_NAME", "siteName", "My Site")}
+    ${() => (hasContent() ? themePicker() : null)}
     ${() => (hasDb() ? dbSettings() : null)}
     ${() => (hasMailer() ? html`${field("SMTP_URL (optional)", "smtpUrl", "smtp://user:pass@smtp.host:587")}${field("MAIL_FROM", "mailFrom", "App <no-reply@you.com>")}` : null)}
     ${() => (hasMedia() ? mediaSettings() : null)}
+    ${aiSettings()}
+    ${field("SITE_URL (optional — absolute links, RSS, canonical)", "siteUrl", "https://example.com")}
+    ${field("CONFIG_PORT (this wizard's own port)", "configPort", String(configDefaultPort))}
   </div>`,
   html`<div class="card-x p-4 mb-3">
     <div class="d-flex justify-content-between align-items-center mb-2">

package/templates/starter/server.js

@@ -21,7 +21,9 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const ENV_PATH = path.join(__dirname, ".env");
 const PKG_PATH = path.join(__dirname, "package.json");
 const ADDONS_DIR = path.join(__dirname, ".volt", "addons"); // bundled add-on sources
+const THEMES_DIR = path.join(__dirname, ".volt", "themes"); // bundled themes the wizard can pick
 const DEFAULT_PORT = 26628; // create-volt stamps this with the project's date-port
+const CONFIG_DEFAULT_PORT = 5050; // the --edit/--studio config UI's default port (its own, so it never clashes with a running app)
 
 // `--port <n>` (or --port=<n>) overrides the listen port for this run — lets
 // --edit/--studio dodge a port the running app already holds, and runs the app
@@ -38,7 +40,7 @@ function cliPort() {
 // then the app's PORT, then the date-port.
 function configPort() {
   const env = readEnvFile(); // --edit runs before loadEnv(), so read the file too
-  return cliPort() || Number(process.env.CONFIG_PORT) || Number(env.CONFIG_PORT) || Number(process.env.PORT) || Number(env.PORT) || DEFAULT_PORT;
+  return cliPort() || Number(process.env.CONFIG_PORT) || Number(env.CONFIG_PORT) || CONFIG_DEFAULT_PORT;
 }
 const PKG_VERSIONS = { mongodb: "^6.21.0", mysql2: "^3.22.5", pg: "^8.22.0", nodemailer: "^6.10.1", marked: "^18.0.5", busboy: "^1.6.0", "@aws-sdk/client-s3": "^3.1075.0" };
 const LIB_FILE = { db: "store.js", mailer: "mailer.js", auth: "auth.js", realtime: "realtime.js", pages: "pages.js", posts: "posts.js", media: "media.js" };
@@ -69,6 +71,23 @@ function availableAddons() {
     });
 }
 
+// Themes bundled by create-volt (under .volt/themes), pickable in the wizard.
+function availableThemes() {
+  if (!fs.existsSync(THEMES_DIR)) return [];
+  return fs
+    .readdirSync(THEMES_DIR, { withFileTypes: true })
+    .filter((e) => e.isDirectory() && fs.existsSync(path.join(THEMES_DIR, e.name, "index.js")))
+    .map((e) => {
+      let description = "";
+      try {
+        description = JSON.parse(fs.readFileSync(path.join(THEMES_DIR, e.name, "meta.json"), "utf8")).description;
+      } catch {
+        /* no meta */
+      }
+      return { name: e.name, description };
+    });
+}
+
 // Which add-ons does VOLT_ADDONS turn on (dependencies expanded)?
 function enabledFrom(env) {
   const metas = Object.fromEntries(availableAddons().map((a) => [a.name, a]));
@@ -292,7 +311,27 @@ function startSetup() {
     }
     if (req.method === "GET" && p === "/setup/state") {
       res.setHeader("Content-Type", "application/json");
-      return res.end(JSON.stringify({ available: availableAddons(), current: readEnvFile(), defaultPort: DEFAULT_PORT }));
+      return res.end(JSON.stringify({ available: availableAddons(), themes: availableThemes(), current: readEnvFile(), defaultPort: DEFAULT_PORT, configDefaultPort: CONFIG_DEFAULT_PORT }));
+    }
+    // "Customize": copy a bundled theme into pages/_theme.js so it can be edited.
+    if (req.method === "POST" && p === "/setup/eject-theme") {
+      let body = "";
+      req.on("data", (c) => (body += c));
+      req.on("end", () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const { theme } = JSON.parse(body || "{}");
+          const src = path.join(THEMES_DIR, String(theme || ""), "index.js");
+          if (!theme || !/^[a-z0-9-]+$/i.test(theme) || !fs.existsSync(src)) return res.end(JSON.stringify({ ok: false, error: "unknown theme" }));
+          const dest = path.join(__dirname, "pages", "_theme.js");
+          fs.mkdirSync(path.dirname(dest), { recursive: true });
+          fs.copyFileSync(src, dest);
+          res.end(JSON.stringify({ ok: true, path: "pages/_theme.js" }));
+        } catch (e) {
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
     }
     if (req.method === "POST" && p === "/setup/test-db") {
       let body = "";

package/templates/starter/setup/setup.js

@@ -4,7 +4,7 @@
 // just config.
 import { signal, computed, html, mount } from "/volt.js";
 
-const { available, current, defaultPort } = await (await fetch("/setup/state")).json();
+const { available, themes = [], current, defaultPort, configDefaultPort = 5050 } = await (await fetch("/setup/state")).json();
 const depsOf = Object.fromEntries(available.map((a) => [a.name, a.dependsOn || []]));
 const order = available.map((a) => a.name);
 const enabledNow = new Set(String(current.VOLT_ADDONS || "").split(",").map((s) => s.trim()).filter(Boolean));
@@ -28,6 +28,12 @@ const state = signal({
   // detect the admin's timezone from their browser (the wizard runs here), so
   // dates render in their zone — not the server's (usually UTC on a host).
   tz: current.SITE_TZ || Intl.DateTimeFormat().resolvedOptions().timeZone || "",
+  siteName: current.SITE_NAME || "",
+  siteUrl: current.SITE_URL || "",
+  configPort: current.CONFIG_PORT || "",
+  theme: current.THEME || "",
+  aiProvider: current.AI_PROVIDER || "anthropic",
+  aiKey: current.ANTHROPIC_API_KEY || current.OPENAI_API_KEY || current.GEMINI_API_KEY || "",
 });
 const set = (patch) => state({ ...state(), ...patch });
 const toggle = (n) => state({ ...state(), addons: { ...state().addons, [n]: !state().addons[n] } });
@@ -67,6 +73,15 @@ function genEnv(s) {
   const eff = effective(s);
   const out = [`VOLT_ADDONS=${eff.join(",")}`, `PORT=${clean(s.port)}`];
   if (s.tz) out.push(`SITE_TZ=${clean(s.tz)}`); // admin's timezone, for date display
+  if (s.siteName) out.push(`SITE_NAME=${clean(s.siteName)}`);
+  if (s.siteUrl) out.push(`SITE_URL=${clean(s.siteUrl)}`);
+  if (s.configPort) out.push(`CONFIG_PORT=${clean(s.configPort)}`);
+  if ((eff.includes("pages") || eff.includes("posts")) && s.theme) out.push(`THEME=${clean(s.theme)}`);
+  if (s.aiKey) {
+    out.push(`AI_PROVIDER=${clean(s.aiProvider)}`);
+    const keyVar = { anthropic: "ANTHROPIC_API_KEY", openai: "OPENAI_API_KEY", gemini: "GEMINI_API_KEY" }[s.aiProvider] || "ANTHROPIC_API_KEY";
+    out.push(`${keyVar}=${clean(s.aiKey)}`);
+  }
   if (eff.includes("db")) {
     out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
     if (s.dbDriver === "mongodb") {
@@ -104,6 +119,24 @@ const mediaDriver = computed(() => state().mediaDriver);
 const hasDb = computed(() => eff().includes("db"));
 const hasMailer = computed(() => eff().includes("mailer"));
 const hasMedia = computed(() => eff().includes("media"));
+const hasContent = computed(() => eff().includes("pages") || eff().includes("posts")); // themes apply to pages/posts
+
+// "Customize": copy the selected bundled theme to pages/_theme.js, then use it
+// locally (THEME cleared) so edits take effect.
+async function ejectTheme() {
+  const theme = state().theme;
+  if (!theme) return;
+  status("Copying theme…");
+  try {
+    const r = await (await fetch("/setup/eject-theme", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ theme }) })).json();
+    if (r.ok) {
+      set({ theme: "" });
+      status(`Copied ${theme} → ${r.path}. Edit it freely; THEME was cleared so your local copy is used.`);
+    } else status("Error: " + (r.error || "?"));
+  } catch {
+    status("Network error copying theme.");
+  }
+}
 
 async function testDb() {
   const s = state();
@@ -201,6 +234,34 @@ const mediaSettings = () =>
         ? html`${field("S3_ENDPOINT", "s3Endpoint", "https://nyc3.digitaloceanspaces.com")}${field("S3_REGION", "s3Region", "us-east-1")}${field("S3_BUCKET", "s3Bucket", "my-space")}${field("S3_KEY", "s3Key", "access key")}${field("S3_SECRET", "s3Secret", "secret key")}${field("S3_PUBLIC_BASE (optional CDN base)", "s3PublicBase", "https://cdn.example.com")}`
         : null}`;
 
+// theme chooser: a bundled theme (or the built-in/local one), with Customize
+const themePicker = () =>
+  html`<div class="mb-2">
+    <label class="form-label small mb-1">Theme (THEME)</label>
+    <select class="form-select" value=${() => state().theme} onchange=${(e) => set({ theme: e.target.value })}>
+      <option value="">default — built-in, or your pages/_theme.js</option>
+      ${themes.map((t) => html`<option value=${t.name}>${t.name}${t.description ? " — " + t.description : ""}</option>`)}
+    </select>
+    ${() =>
+      state().theme
+        ? html`<button class="btn btn-sm btn-outline-secondary mt-1" onclick=${ejectTheme}>Customize → copy to pages/_theme.js</button>`
+        : html`<div class="small text-muted mt-1">Pick a starter theme, or keep the built-in / your local <code>pages/_theme.js</code>.</div>`}
+  </div>`;
+
+// AI keys (optional) — used by the WYSIWYG editor's assistant. Kept server-side.
+const aiSettings = () =>
+  html`<details class="mb-2"><summary class="form-label small mb-0" style="cursor:pointer">AI keys (optional) — for the editor's assistant</summary>
+    <div class="mt-2">
+      <label class="form-label small mb-1">Provider (AI_PROVIDER)</label>
+      <select class="form-select mb-2" value=${() => state().aiProvider} onchange=${(e) => set({ aiProvider: e.target.value })}>
+        <option value="anthropic">Anthropic (Claude)</option>
+        <option value="openai">OpenAI</option>
+        <option value="gemini">Google Gemini</option>
+      </select>
+      ${field("API key — stays server-side, written to .env", "aiKey", "sk-…")}
+    </div>
+  </details>`;
+
 mount(
   "#app",
   available.length
@@ -213,9 +274,14 @@ mount(
   html`<div class="card-x p-4 mb-3">
     <h2 class="h6 mb-3">Settings</h2>
     ${field("PORT", "port", String(defaultPort))}
+    ${field("SITE_NAME", "siteName", "My Site")}
+    ${() => (hasContent() ? themePicker() : null)}
     ${() => (hasDb() ? dbSettings() : null)}
     ${() => (hasMailer() ? html`${field("SMTP_URL (optional)", "smtpUrl", "smtp://user:pass@smtp.host:587")}${field("MAIL_FROM", "mailFrom", "App <no-reply@you.com>")}` : null)}
     ${() => (hasMedia() ? mediaSettings() : null)}
+    ${aiSettings()}
+    ${field("SITE_URL (optional — absolute links, RSS, canonical)", "siteUrl", "https://example.com")}
+    ${field("CONFIG_PORT (this wizard's own port)", "configPort", String(configDefaultPort))}
   </div>`,
   html`<div class="card-x p-4 mb-3">
     <div class="d-flex justify-content-between align-items-center mb-2">