create-volt 0.41.0 → 0.42.0

package/templates/default/setup/setup.js

@@ -262,33 +262,82 @@ const aiSettings = () =>
     </div>
   </details>`;
 
-mount(
-  "#app",
-  available.length
-    ? html`<div class="card-x p-4 mb-3">
-        <h2 class="h6 mb-3">Features</h2>
-        ${available.map(addonRow)}
-        <p class="small text-muted mb-0">Enabling a feature wires its backend automatically. Frontend UI (login form, chat) is yours to build — or start from <code>--template guestbook</code>.</p>
-      </div>`
-    : null,
-  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>`,
+// --- Manage content (a second screen reached via "Manage content →") ---
+const view = signal("config"); // "config" | "manage"
+const items = signal({ pages: [], posts: [] });
+const editing = signal(null); // { type, slug, body, isNew } — set only on open/save/close, so typing doesn't re-render
+const loadItems = async () => items(await (await fetch("/setup/content")).json());
+async function editItem(type, slug) {
+  const d = await (await fetch(`/setup/content/raw?type=${type}&slug=${encodeURIComponent(slug)}`)).json();
+  editing({ type, slug, body: d.body || "", isNew: false });
+}
+function newItem(type) {
+  const body = type === "post" ? "---\ntitle: New Post\ndate: 2026-01-01\ncategory: \ntags: \n---\n\nWrite your post here.\n" : "---\ntitle: New Page\n---\n\nWrite your page here.\n";
+  editing({ type, slug: "", body, isNew: true });
+}
+async function saveItem() {
+  const e = editing();
+  const slug = (document.querySelector("#mg-slug").value || "").trim().toLowerCase();
+  const body = document.querySelector("#mg-body").value;
+  if (!/^[a-z0-9][a-z0-9-]*$/.test(slug)) return status("Slug must be lowercase letters, numbers, hyphens.");
+  const r = await (await fetch("/setup/content/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: e.type, slug, body }) })).json();
+  if (!r.ok) return status("Error: " + (r.error || "?"));
+  status("Saved → " + r.file);
+  editing(null);
+  loadItems();
+}
+async function delItem(type, slug) {
+  if (typeof confirm === "function" && !confirm(`Delete ${slug}?`)) return;
+  await fetch("/setup/content/delete", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type, slug }) });
+  status("Deleted " + slug);
+  loadItems();
+}
+
+const itemRow = (it) =>
+  html`<li class="list-group-item bg-transparent text-light d-flex justify-content-between align-items-center py-1 px-2">
+    <span><a href=${"http://localhost:" + state().port + (it.type === "post" ? "/blog/" : "/") + it.slug} target="_blank" rel="noopener">${it.title}</a> <span class="text-muted small">/${it.type === "post" ? "blog/" : ""}${it.slug}</span></span>
+    <span><button class="btn btn-sm btn-link p-0 me-3" onclick=${() => editItem(it.type, it.slug)}>edit</button><button class="btn btn-sm btn-link p-0 text-danger" onclick=${() => delItem(it.type, it.slug)}>delete</button></span>
+  </li>`;
+const section = (label, type, key) =>
+  html`<div class="mb-3">
+    <div class="d-flex justify-content-between align-items-center mb-1"><strong>${label}</strong><button class="btn btn-sm btn-outline-secondary" onclick=${() => newItem(type)}>+ New</button></div>
+    ${() => (items()[key].length ? html`<ul class="list-group">${items()[key].map(itemRow)}</ul>` : html`<div class="small text-muted">No ${key} yet.</div>`)}
+  </div>`;
+const editorPanel = () => {
+  const e = editing(); // inputs are uncontrolled (read on Save) so typing never re-renders
+  return html`<div class="p-3 mb-2" style="border:1px solid #232a36;border-radius:10px">
+    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
+    <textarea id="mg-body" class="form-control" rows="16" style="font-family:ui-monospace,monospace;font-size:13px">${e.body}</textarea>
+    <div class="mt-2 d-flex gap-2"><button class="btn btn-primary btn-sm" onclick=${saveItem}>Save</button><button class="btn btn-outline-secondary btn-sm" onclick=${() => editing(null)}>Cancel</button></div>
+  </div>`;
+};
+const manageView = () =>
   html`<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>
-      <button class="btn btn-primary btn-sm" onclick=${apply}>Apply & start →</button>
+    <div class="d-flex justify-content-between align-items-center mb-3"><h2 class="h6 mb-0">Manage content</h2><button class="btn btn-sm btn-outline-secondary" onclick=${() => view("config")}>← Settings</button></div>
+    ${() => (editing() ? editorPanel() : html`${section("Pages", "page", "pages")}${section("Posts", "post", "posts")}<p class="small text-muted mb-0">Pages → <code>/slug</code>, posts → <code>/blog/slug</code>; <code>index</code> page is your home. All rendered in your theme. Edits hot-reload the running app.</p>`)}
+  </div>`;
+
+const configView = () =>
+  html`${available.length ? html`<div class="card-x p-4 mb-3"><h2 class="h6 mb-3">Features</h2>${available.map(addonRow)}<p class="small text-muted mb-0">Enabling a feature wires its backend automatically. Frontend UI (login form, chat) is yours to build — or start from <code>--template guestbook</code>.</p></div>` : ""}
+    <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>
-    <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>`,
+    <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>
+      <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()),
   () => (status() ? html`<p class="small accent">${status}</p>` : null),
 );

package/templates/docs/server.js

@@ -1,9 +1,9 @@
-// server.js — dev server with a built-in first-run setup wizard.
+// server.js — dev server with a built-in first-run setup wizard.
 //
 // First run (no .env) or `node server.js --edit` (-e) opens a disposable, local
 // config page: tick add-ons, fill settings, Apply. Apply writes .env (a
 // VOLT_ADDONS list + settings) and adds any needed packages to package.json,
-// runs npm install, then starts the app — which wires whatever .env enables.
+// runs npm install, then starts the app — which wires whatever .env enables.
 // Add-on code is bundled under .volt/addons; nothing is copied into your code.
 //
 // No build step, no env-file flag: .env is auto-loaded below.
@@ -24,7 +24,7 @@ const THEMES_DIR = path.join(__dirname, ".volt", "themes"); // bundled themes th
 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
+// `--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
 // itself on a one-off port. Explicit flag wins over PORT in .env.
 function cliPort() {
@@ -104,7 +104,7 @@ const imp = (rel) => import(pathToFileURL(path.join(__dirname, rel)).href);
 const addonMod = (n) => imp(path.join(".volt", "addons", n, "files", "lib", LIB_FILE[n]));
 
 // Built-in add-ons are wired explicitly below; everything else in VOLT_ADDONS is
-// a third-party add-on — a local .volt/addons/<name>/index.js or an installed
+// a third-party add-on — a local .volt/addons/<name>/index.js or an installed
 // npm package "volt-addon-<name>" exporting register(ctx). See /docs/plugins.
 const BUILTINS = new Set(Object.keys(LIB_FILE));
 async function loadAddon(name) {
@@ -128,7 +128,7 @@ function openBrowser(url) {
   const args = plat === "win32" ? ["/c", "start", "", url] : [url];
   try {
     const child = spawn(cmd, args, { stdio: "ignore", detached: true });
-    child.on("error", () => {}); // launcher missing — emits async, don't crash
+    child.on("error", () => {}); // launcher missing — emits async, don't crash
     child.unref();
     return true;
   } catch {
@@ -175,8 +175,8 @@ async function startApp() {
     app.use(await (await addonMod("media")).mediaRouter({ requireAuth, dir: path.join(__dirname, "media") }));
   }
 
-  // markdown pages (/<slug> ← pages/<slug>.md) — mounted last, so app routes win
-  // blog posts (/blog, /blog/<slug>, /category, /tag, /feed.xml) — before pages so /blog wins; renders in the same theme.
+  // markdown pages (/<slug> → pages/<slug>.md) — mounted last, so app routes win
+  // blog posts (/blog, /blog/<slug>, /category, /tag, /feed.xml) — before pages so /blog wins; renders in the same theme.
   if (enabled.has("posts")) app.use(await (await addonMod("posts")).postsRouter({ dir: path.join(__dirname, "posts"), themeDir: path.join(__dirname, "pages") }));
   if (enabled.has("pages")) app.use(await (await addonMod("pages")).pagesRouter({ dir: path.join(__dirname, "pages") }));
 
@@ -191,7 +191,7 @@ async function startApp() {
     res.json({ ok: true });
   });
 
-  // third-party add-ons — register(ctx). When auth is on, requireAuth/sessionFromReq
+  // third-party add-ons — register(ctx). When auth is on, requireAuth/sessionFromReq
   // are provided so add-ons can gate routes by login.
   let requireAuth = null;
   let sessionFromReq = null;
@@ -207,7 +207,7 @@ async function startApp() {
     if (typeof register === "function") {
       await register({ app, express, io, store, mailer, env: process.env, requireAuth, sessionFromReq, log: (...a) => console.log(`[${name}]`, ...a) });
     } else {
-      console.warn(`[volt] add-on "${name}" not found or missing a register() export — skipped`);
+      console.warn(`[volt] add-on "${name}" not found or missing a register() export — skipped`);
     }
   }
 
@@ -215,7 +215,7 @@ async function startApp() {
   const onChange = (file) => {
     clearTimeout(timer);
     timer = setTimeout(() => {
-      console.log(`[volt] change: ${file ?? "?"} → reload`);
+      console.log(`[volt] change: ${file ?? "?"} → reload`);
       io.emit("volt:reload", { file });
     }, 80);
   };
@@ -258,7 +258,7 @@ async function startApp() {
     }
     throw e;
   });
-  server.listen(PORT, () => console.log(`⚡ Volt → http://localhost:${PORT}${on.length ? "  (add-ons: " + on.join(", ") + ")" : ""}`));
+  server.listen(PORT, () => console.log(`Volt at http://localhost:${PORT}${on.length ? "  (add-ons: " + on.join(", ") + ")" : ""}`));
 }
 
 // Packages an .env's selections need, beyond what package.json already has.
@@ -282,7 +282,7 @@ function neededPackages(env) {
 function ensureDriverInstalled(driver) {
   const pkg = { mongodb: "mongodb", mongo: "mongodb", mysql: "mysql2", postgres: "pg", postgresql: "pg", pg: "pg" }[String(driver || "").toLowerCase()];
   if (!pkg || fs.existsSync(path.join(__dirname, "node_modules", pkg))) return;
-  console.log(`[volt] installing ${pkg} for the connection test…`);
+  console.log(`[volt] installing ${pkg} for the connection test…`);
   spawnSync("npm", ["install", `${pkg}@${PKG_VERSIONS[pkg] || "latest"}`], { cwd: __dirname, stdio: "inherit", shell: process.platform === "win32" });
 }
 
@@ -312,6 +312,55 @@ function startSetup() {
       res.setHeader("Content-Type", "application/json");
       return res.end(JSON.stringify({ available: availableAddons(), themes: availableThemes(), current: readEnvFile(), defaultPort: DEFAULT_PORT, configDefaultPort: CONFIG_DEFAULT_PORT }));
     }
+    // --- content manager: list / read / write / delete pages + posts ---
+    if (req.method === "GET" && p === "/setup/content") {
+      const list = (type) => {
+        const dir = path.join(__dirname, type === "post" ? "posts" : "pages");
+        if (!fs.existsSync(dir)) return [];
+        return fs
+          .readdirSync(dir)
+          .filter((f) => f.endsWith(".md") && !f.startsWith("_"))
+          .map((f) => {
+            const slug = f.replace(/\.md$/, "");
+            const title = (fs.readFileSync(path.join(dir, f), "utf8").match(/^title:\s*(.+)$/m) || [])[1];
+            return { type, slug, title: (title || slug).trim() };
+          });
+      };
+      res.setHeader("Content-Type", "application/json");
+      return res.end(JSON.stringify({ pages: list("page"), posts: list("post") }));
+    }
+    if (req.method === "GET" && p === "/setup/content/raw") {
+      const type = u.searchParams.get("type") === "post" ? "posts" : "pages";
+      const slug = u.searchParams.get("slug") || "";
+      res.setHeader("Content-Type", "application/json");
+      if (!/^[a-z0-9][a-z0-9-]*$/i.test(slug)) return res.end(JSON.stringify({ ok: false, error: "invalid slug" }));
+      const file = path.join(__dirname, type, slug + ".md");
+      return res.end(JSON.stringify({ ok: true, body: fs.existsSync(file) ? fs.readFileSync(file, "utf8") : "" }));
+    }
+    if (req.method === "POST" && (p === "/setup/content/save" || p === "/setup/content/delete")) {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const { type, slug, body } = JSON.parse(cbody || "{}");
+          if (!/^[a-z0-9][a-z0-9-]*$/i.test(slug || "")) throw new Error("slug: lowercase letters, numbers, hyphens");
+          const dir = path.join(__dirname, type === "post" ? "posts" : "pages");
+          const file = path.join(dir, slug + ".md");
+          if (p === "/setup/content/delete") {
+            if (fs.existsSync(file)) fs.unlinkSync(file);
+            return res.end(JSON.stringify({ ok: true }));
+          }
+          fs.mkdirSync(dir, { recursive: true });
+          fs.writeFileSync(file, String(body ?? ""));
+          res.end(JSON.stringify({ ok: true, file: (type === "post" ? "posts/" : "pages/") + slug + ".md" }));
+        } catch (e) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
+    }
     // "Customize": copy a bundled theme into pages/_theme.js so it can be edited.
     if (req.method === "POST" && p === "/setup/eject-theme") {
       let body = "";
@@ -405,15 +454,15 @@ function startSetup() {
               server.closeIdleConnections?.();
             };
             if (added.length) {
-              console.log(`[volt] installing ${added.join(", ")}…`);
+              console.log(`[volt] installing ${added.join(", ")}…`);
               const npm = spawn("npm", ["install"], { cwd: __dirname, stdio: "inherit", shell: process.platform === "win32" });
               npm.on("error", () => handoff());
               npm.on("close", () => {
-                console.log("[volt] saved .env — starting the app…");
+                console.log("[volt] saved .env — starting the app…");
                 handoff();
               });
             } else {
-              console.log("[volt] saved .env — starting the app…");
+              console.log("[volt] saved .env — starting the app…");
               handoff();
             }
           });
@@ -431,18 +480,18 @@ function startSetup() {
   server.on("error", (e) => { if (e.code === "EADDRINUSE") { console.error(`\n[volt] Config UI port ${PORT} is in use (is the app already running?). Set CONFIG_PORT in .env or pass --port <n>.\n`); process.exit(1); } throw e; });
   server.listen(PORT, "127.0.0.1", () => {
     const url = `http://localhost:${PORT}`;
-    console.log(`\n⚡ Volt setup → ${url}`);
+    console.log(`\nVolt setup at ${url}`);
     console.log("  Configure your app; it starts automatically on Apply. (reopen later: npm run dev -- --edit)");
     const ssh = process.env.SSH_CONNECTION;
     if (ssh) {
       const host = ssh.split(" ")[2];
       const user = process.env.USER || process.env.USERNAME || "you";
-      console.log("  Remote box — the server is up here; bridge it from your LOCAL machine:");
+      console.log("  Remote box — the server is up here; bridge it from your LOCAL machine:");
       console.log(`    ssh -N -L 127.0.0.1:${PORT}:localhost:${PORT} ${user}@${host}`);
-      console.log(`  …then open ${url} on your machine (the tunnel points it here).`);
+      console.log(`  …then open ${url} on your machine (the tunnel points it here).`);
     }
     console.log("");
-    if (openBrowser(url)) console.log("  (opening your browser…)\n");
+    if (openBrowser(url)) console.log("  (opening your browser…)\n");
   });
 }
 
@@ -450,8 +499,8 @@ function readEnvFileLines() {
   return fs.existsSync(ENV_PATH) ? fs.readFileSync(ENV_PATH, "utf8").split("\n") : [];
 }
 
-// --- Studio: an ephemeral, localhost-only data browser (à la Prisma Studio).
-// Not a route in the running app — it only exists while you run `--studio`, on
+// --- Studio: an ephemeral, localhost-only data browser (— la Prisma Studio).
+// Not a route in the running app — it only exists while you run `--studio`, on
 // loopback, and disappears on Ctrl-C. Shell/SSH access is the auth. ---
 const HIDDEN_COLLECTIONS = new Set(["auth_tokens", "auth_sessions", "__voltcheck"]);
 async function startStudio() {
@@ -464,7 +513,7 @@ async function startStudio() {
   try {
     store = await (await addonMod("db")).createStore();
   } catch (e) {
-    console.error("Studio: couldn't connect the store — " + e.message);
+    console.error("Studio: couldn't connect the store — " + e.message);
     process.exit(1);
   }
   const PORT = configPort();
@@ -522,15 +571,15 @@ async function startStudio() {
   server.on("error", (e) => { if (e.code === "EADDRINUSE") { console.error(`\n[volt] Config UI port ${PORT} is in use (is the app already running?). Set CONFIG_PORT in .env or pass --port <n>.\n`); process.exit(1); } throw e; });
   server.listen(PORT, "127.0.0.1", () => {
     const url = `http://localhost:${PORT}`;
-    console.log(`\n⚡ Volt Studio → ${url}   (${store.name})`);
-    console.log("  Browse your data. localhost-only, disposable — Ctrl-C when done.");
+    console.log(`\nVolt Studio at ${url}   (${store.name})`);
+    console.log("  Browse your data. localhost-only, disposable — Ctrl-C when done.");
     const ssh = process.env.SSH_CONNECTION;
     if (ssh) {
       const host = ssh.split(" ")[2];
       const user = process.env.USER || process.env.USERNAME || "you";
-      console.log("  Remote box — from your LOCAL machine:");
+      console.log("  Remote box — from your LOCAL machine:");
       console.log(`    ssh -N -L 127.0.0.1:${PORT}:localhost:${PORT} ${user}@${host}`);
-      console.log(`  …then open ${url}.`);
+      console.log(`  …then open ${url}.`);
     }
     console.log("");
     openBrowser(url);

package/templates/docs/setup/setup.js

@@ -262,33 +262,82 @@ const aiSettings = () =>
     </div>
   </details>`;
 
-mount(
-  "#app",
-  available.length
-    ? html`<div class="card-x p-4 mb-3">
-        <h2 class="h6 mb-3">Features</h2>
-        ${available.map(addonRow)}
-        <p class="small text-muted mb-0">Enabling a feature wires its backend automatically. Frontend UI (login form, chat) is yours to build — or start from <code>--template guestbook</code>.</p>
-      </div>`
-    : null,
-  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>`,
+// --- Manage content (a second screen reached via "Manage content →") ---
+const view = signal("config"); // "config" | "manage"
+const items = signal({ pages: [], posts: [] });
+const editing = signal(null); // { type, slug, body, isNew } — set only on open/save/close, so typing doesn't re-render
+const loadItems = async () => items(await (await fetch("/setup/content")).json());
+async function editItem(type, slug) {
+  const d = await (await fetch(`/setup/content/raw?type=${type}&slug=${encodeURIComponent(slug)}`)).json();
+  editing({ type, slug, body: d.body || "", isNew: false });
+}
+function newItem(type) {
+  const body = type === "post" ? "---\ntitle: New Post\ndate: 2026-01-01\ncategory: \ntags: \n---\n\nWrite your post here.\n" : "---\ntitle: New Page\n---\n\nWrite your page here.\n";
+  editing({ type, slug: "", body, isNew: true });
+}
+async function saveItem() {
+  const e = editing();
+  const slug = (document.querySelector("#mg-slug").value || "").trim().toLowerCase();
+  const body = document.querySelector("#mg-body").value;
+  if (!/^[a-z0-9][a-z0-9-]*$/.test(slug)) return status("Slug must be lowercase letters, numbers, hyphens.");
+  const r = await (await fetch("/setup/content/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: e.type, slug, body }) })).json();
+  if (!r.ok) return status("Error: " + (r.error || "?"));
+  status("Saved → " + r.file);
+  editing(null);
+  loadItems();
+}
+async function delItem(type, slug) {
+  if (typeof confirm === "function" && !confirm(`Delete ${slug}?`)) return;
+  await fetch("/setup/content/delete", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type, slug }) });
+  status("Deleted " + slug);
+  loadItems();
+}
+
+const itemRow = (it) =>
+  html`<li class="list-group-item bg-transparent text-light d-flex justify-content-between align-items-center py-1 px-2">
+    <span><a href=${"http://localhost:" + state().port + (it.type === "post" ? "/blog/" : "/") + it.slug} target="_blank" rel="noopener">${it.title}</a> <span class="text-muted small">/${it.type === "post" ? "blog/" : ""}${it.slug}</span></span>
+    <span><button class="btn btn-sm btn-link p-0 me-3" onclick=${() => editItem(it.type, it.slug)}>edit</button><button class="btn btn-sm btn-link p-0 text-danger" onclick=${() => delItem(it.type, it.slug)}>delete</button></span>
+  </li>`;
+const section = (label, type, key) =>
+  html`<div class="mb-3">
+    <div class="d-flex justify-content-between align-items-center mb-1"><strong>${label}</strong><button class="btn btn-sm btn-outline-secondary" onclick=${() => newItem(type)}>+ New</button></div>
+    ${() => (items()[key].length ? html`<ul class="list-group">${items()[key].map(itemRow)}</ul>` : html`<div class="small text-muted">No ${key} yet.</div>`)}
+  </div>`;
+const editorPanel = () => {
+  const e = editing(); // inputs are uncontrolled (read on Save) so typing never re-renders
+  return html`<div class="p-3 mb-2" style="border:1px solid #232a36;border-radius:10px">
+    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
+    <textarea id="mg-body" class="form-control" rows="16" style="font-family:ui-monospace,monospace;font-size:13px">${e.body}</textarea>
+    <div class="mt-2 d-flex gap-2"><button class="btn btn-primary btn-sm" onclick=${saveItem}>Save</button><button class="btn btn-outline-secondary btn-sm" onclick=${() => editing(null)}>Cancel</button></div>
+  </div>`;
+};
+const manageView = () =>
   html`<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>
-      <button class="btn btn-primary btn-sm" onclick=${apply}>Apply & start →</button>
+    <div class="d-flex justify-content-between align-items-center mb-3"><h2 class="h6 mb-0">Manage content</h2><button class="btn btn-sm btn-outline-secondary" onclick=${() => view("config")}>← Settings</button></div>
+    ${() => (editing() ? editorPanel() : html`${section("Pages", "page", "pages")}${section("Posts", "post", "posts")}<p class="small text-muted mb-0">Pages → <code>/slug</code>, posts → <code>/blog/slug</code>; <code>index</code> page is your home. All rendered in your theme. Edits hot-reload the running app.</p>`)}
+  </div>`;
+
+const configView = () =>
+  html`${available.length ? html`<div class="card-x p-4 mb-3"><h2 class="h6 mb-3">Features</h2>${available.map(addonRow)}<p class="small text-muted mb-0">Enabling a feature wires its backend automatically. Frontend UI (login form, chat) is yours to build — or start from <code>--template guestbook</code>.</p></div>` : ""}
+    <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>
-    <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>`,
+    <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>
+      <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()),
   () => (status() ? html`<p class="small accent">${status}</p>` : null),
 );