create-volt 0.11.0 → 0.13.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.13.0] - 2026-06-28
+
+### Added
+- Opt-in **`admin`** add-on: a persistent, role-gated web admin (data browser)
+  for browser-only admins. Gated by auth **and** an `ADMIN_EMAILS` allowlist;
+  the panel is hidden for non-admins and `/admin/api/*` returns 403. Internal
+  collections (auth tokens/sessions) hidden. Wired into the default + starter
+  templates and the setup wizard (ADMIN_EMAILS field).
+- `SECURITY.md` documenting the ephemeral-admin model and secure defaults.
+
+### Note
+- Prefer the ephemeral `--studio` (shell-gated) for admins with server access;
+  the `admin` add-on is the explicit standing-surface opt-in for non-shell admins.
+
+## [0.12.0] - 2026-06-28
+
+### Added
+- **`--template starter`** — a complete, no-build app shell, fully wired and on
+  out of the box: top nav over **Home**, magic-link **Account**, per-user
+  **Notes** (auth-gated CRUD, db-backed), and **Chat** (realtime rooms + presence
+  + typing). Ships a default `.env` enabling db+mailer+auth+realtime; includes
+  the setup wizard (`--edit`) and Studio (`--studio`). The SaaS-style starting
+  point.
+- Templates can now ship a default `.env` (as `env`, renamed on scaffold).
+
 ## [0.11.0] - 2026-06-28
 
 ### Added
@@ -162,6 +187,8 @@ 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.13.0]: https://github.com/MIR-2025/volt/releases/tag/v0.13.0
+[0.12.0]: https://github.com/MIR-2025/volt/releases/tag/v0.12.0
 [0.11.0]: https://github.com/MIR-2025/volt/releases/tag/v0.11.0
 [0.10.0]: https://github.com/MIR-2025/volt/releases/tag/v0.10.0
 [0.9.0]: https://github.com/MIR-2025/volt/releases/tag/v0.9.0

package/README.md

@@ -28,8 +28,9 @@ Pick one with `--template` (default: `default`):
 
 | Template    | What you get                                                          |
 | ----------- | -------------------------------------------------------------------- |
-| `default`   | The Counter + Todos demo on the Volt signal engine. Minimal.        |
-| `guestbook` | A real app: magic-link auth, Socket.io real-time message board, and pluggable **MongoDB / MySQL / Postgres** storage (in-memory by default, so it runs with zero setup). |
+| `default`   | The Counter + Todos demo on the Volt signal engine. Minimal. Add-ons off; turn them on in the wizard. |
+| `starter`   | A full app shell, everything on out of the box: top nav + Home, magic-link **Account**, per-user **Notes** (CRUD), and **Chat** (realtime). The SaaS-style starting point. |
+| `guestbook` | A focused real app: magic-link auth + a Socket.io message board, over pluggable **MongoDB / MySQL / Postgres** storage (in-memory by default). |
 
 Then:
 
@@ -79,6 +80,18 @@ driver, and is **never** a route in the running app (no standing `/admin` to
 attack — shell/SSH access is the gate). Needs a persistent driver (MongoDB /
 MySQL / Postgres) to show data; the memory driver is per-process.
 
+## Security & admin model
+
+Volt is secure by default, and deliberately has **no standing admin route** —
+the config wizard (`--edit`) and data browser (`--studio`) are ephemeral,
+localhost-only processes; **shell/SSH access is the auth**. Several admins? Give
+each an SSH key — stronger than a shared web panel, with nothing public to
+attack. A persistent, role-gated web admin exists only as an **opt-in** add-on
+(`admin`, gated by auth + an `ADMIN_EMAILS` allowlist) for when you truly need
+browser-only admins. Plus: escaping by default (no XSS), server-side validation
++ caps, security headers, and `HttpOnly`+`SameSite` cookies. See
+[SECURITY.md](https://github.com/MIR-2025/volt/blob/main/SECURITY.md).
+
 ## Updating Volt
 
 Volt is vendored as a single file (`public/volt.js`), not an npm dependency.

package/addons/admin/files/lib/admin.js

@@ -0,0 +1,44 @@
+// admin.js — opt-in, role-gated web admin (data browser) for the running app.
+// This is the ONE deliberately-persistent privileged surface in Volt, for
+// browser-only admins. Every route requires a session AND membership in the
+// ADMIN_EMAILS allowlist. Internal collections (auth tokens/sessions) are hidden.
+// Prefer `npm run dev -- --studio` (ephemeral) unless you truly need this.
+
+import express from "express";
+
+const HIDDEN = new Set(["auth_tokens", "auth_sessions", "__voltcheck"]);
+const visible = (n) => n && !HIDDEN.has(n);
+
+export function adminRouter({ store, requireAuth, adminEmails }) {
+  const allow = new Set((adminEmails || []).map((e) => String(e).trim().toLowerCase()).filter(Boolean));
+  const isAdmin = (email) => allow.has(String(email || "").toLowerCase());
+
+  const r = express.Router();
+  r.use(requireAuth); // must be signed in for anything under /admin/api
+
+  // any signed-in user may ask whether *they* are an admin (drives the UI)
+  r.get("/admin/api/me", (req, res) => res.json({ email: req.user.email, isAdmin: isAdmin(req.user.email) }));
+
+  // everything below is admins-only
+  r.use((req, res, next) => (isAdmin(req.user.email) ? next() : res.status(403).json({ ok: false, error: "Admins only." })));
+
+  r.get("/admin/api/collections", async (_req, res) => {
+    const all = (await store.collections()) || [];
+    res.json({ driver: store.name, collections: all.filter(visible) });
+  });
+  r.get("/admin/api/collection", async (req, res) => {
+    const name = String(req.query.name || "");
+    if (!visible(name)) return res.status(403).json({ ok: false, error: "hidden" });
+    res.json({ ok: true, name, docs: (await store.collection(name).all()).slice(0, 500) });
+  });
+  r.delete("/admin/api/doc", async (req, res) => {
+    const name = String(req.query.name || "");
+    const id = String(req.query.id || "");
+    if (!visible(name)) return res.status(403).json({ ok: false, error: "hidden" });
+    if (!id) return res.status(400).json({ ok: false, error: "missing id" });
+    await store.collection(name).delete(id);
+    res.json({ ok: true });
+  });
+
+  return r;
+}

package/addons/admin/files/public/admin-ui.js

@@ -0,0 +1,62 @@
+// admin-ui.js — the role-gated admin panel (frontend for the admin add-on).
+// Renders nothing for non-admins; for admins, a data browser over /admin/api/*.
+// Mounted by the app when the admin add-on is enabled.
+import { signal, html } from "/volt.js";
+
+const j = async (url, opts) => {
+  const res = await fetch(url, opts);
+  return { status: res.status, body: await res.json().catch(() => ({})) };
+};
+
+export function adminPanel() {
+  const ready = signal(false);
+  const isAdmin = signal(false);
+  const driver = signal("");
+  const collections = signal([]);
+  const current = signal("");
+  const docs = signal([]);
+  const note = signal("");
+
+  async function init() {
+    const { status, body } = await j("/admin/api/me");
+    if (status === 200) isAdmin(!!body.isAdmin);
+    ready(true);
+    if (isAdmin()) load();
+  }
+  async function load() {
+    const { body } = await j("/admin/api/collections");
+    driver(body.driver || "");
+    collections(body.collections || []);
+    if (!current() && collections().length) open(collections()[0]);
+  }
+  async function open(name) {
+    current(name);
+    const { body } = await j(`/admin/api/collection?name=${encodeURIComponent(name)}`);
+    docs(body.ok ? body.docs : []);
+  }
+  async function del(id) {
+    await j(`/admin/api/doc?name=${encodeURIComponent(current())}&id=${encodeURIComponent(id)}`, { method: "DELETE" });
+    docs(docs().filter((d) => d.id !== id));
+    note("Deleted.");
+  }
+  init();
+
+  const tab = (name) =>
+    html`<button class=${() => "btn btn-sm " + (current() === name ? "btn-primary" : "btn-outline-secondary")} onclick=${() => open(name)}>${name}</button>`;
+  const row = (d) =>
+    html`<div class="d-flex justify-content-between align-items-start gap-2 py-1" style="border-top:1px solid #232a36">
+      <pre class="mb-0 small flex-grow-1" style="white-space:pre-wrap;color:#cfe3ff">${JSON.stringify(d, null, 2)}</pre>
+      <button class="btn btn-sm btn-outline-danger" onclick=${() => del(d.id)}>✕</button>
+    </div>`;
+
+  // hidden entirely for non-admins (and until we know)
+  return html`${() =>
+    !ready() || !isAdmin()
+      ? null
+      : html`<div class="card-x p-4 mb-4">
+          <h2 class="h6 mb-3">Admin <span class="text-muted small">— data ${() => (driver() ? "· " + driver() : "")}</span></h2>
+          <div class="d-flex flex-wrap gap-1 mb-2">${() => (collections().length ? collections().map(tab) : html`<span class="text-muted small">No collections yet.</span>`)}</div>
+          <div style="max-height:260px;overflow:auto">${() => (docs().length ? docs().map(row) : html`<span class="text-muted small">Empty.</span>`)}</div>
+          ${() => (note() ? html`<p class="small text-muted mb-0 mt-2">${note}</p>` : null)}
+        </div>`}`;
+}

package/addons/admin/meta.json

@@ -0,0 +1,8 @@
+{
+  "description": "Opt-in role-gated web admin: a persistent /admin data browser for browser-only admins (auth + ADMIN_EMAILS allowlist). Adds a standing surface — prefer `--studio` unless you need non-shell admins.",
+  "dependsOn": ["db", "auth"],
+  "sentinel": "lib/admin.js",
+  "install": ["express"],
+  "optional": {},
+  "wiring": "Set ADMIN_EMAILS in .env to a comma-separated allowlist of admin emails. Only those signed-in users see the admin panel and can reach /admin/api/*."
+}

package/index.js

@@ -39,7 +39,7 @@ ${bold("Usage")}
   npx create-volt@latest studio              # browse your data — ephemeral, localhost (like Prisma Studio)
 
 ${bold("Options")}
-  --template <name>  Starter template: default | guestbook  (default: default)
+  --template <name>  Template: default | starter | guestbook  (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
@@ -245,6 +245,11 @@ const shippedGitignore = path.join(targetDir, "gitignore");
 if (fs.existsSync(shippedGitignore)) {
   fs.renameSync(shippedGitignore, path.join(targetDir, ".gitignore"));
 }
+// some templates ship a default .env as "env" (a real .env is stripped from npm)
+const shippedEnv = path.join(targetDir, "env");
+if (fs.existsSync(shippedEnv)) {
+  fs.renameSync(shippedEnv, path.join(targetDir, ".env"));
+}
 
 // Bundle the add-on sources so the app's setup wizard can enable them later
 // (only for templates that ship the wizard, i.e. have a setup/ dir).

package/package.json

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

package/templates/default/public/app.js

@@ -86,4 +86,11 @@ if (enabled.includes("realtime")) {
     /* realtime UI unavailable */
   }
 }
+if (enabled.includes("admin")) {
+  try {
+    nodes.push((await import("/admin-ui.js")).adminPanel());
+  } catch {
+    /* admin UI unavailable */
+  }
+}
 mount("#app", ...nodes);

package/templates/default/server.js

@@ -22,7 +22,7 @@ const PKG_PATH = path.join(__dirname, "package.json");
 const ADDONS_DIR = path.join(__dirname, ".volt", "addons"); // bundled add-on sources
 const DEFAULT_PORT = 26628; // create-volt stamps this with the project's date-port
 const PKG_VERSIONS = { mongodb: "^6.8.0", mysql2: "^3.11.0", pg: "^8.12.0", nodemailer: "^6.9.0" };
-const LIB_FILE = { db: "store.js", mailer: "mailer.js", auth: "auth.js", realtime: "realtime.js" };
+const LIB_FILE = { db: "store.js", mailer: "mailer.js", auth: "auth.js", realtime: "realtime.js", admin: "admin.js" };
 
 // --- tiny .env loader (no dependency); never overrides an existing env var ---
 function readEnvFile() {
@@ -101,6 +101,11 @@ async function startApp() {
   if (enabled.has("db")) store = await (await addonMod("db")).createStore();
   if (enabled.has("mailer")) mailer = await (await addonMod("mailer")).createMailer();
   if (enabled.has("auth") && store && mailer) app.use((await addonMod("auth")).authRouter({ store, mailer }));
+  if (enabled.has("admin") && store && enabled.has("auth")) {
+    const adminEmails = String(process.env.ADMIN_EMAILS || "").split(",").map((s) => s.trim()).filter(Boolean);
+    const requireAuth = (await addonMod("auth")).requireAuth(store);
+    app.use((await addonMod("admin")).adminRouter({ store, requireAuth, adminEmails }));
+  }
 
   // expose which add-ons are on, and serve each enabled add-on's frontend assets
   app.get("/__volt/addons", (_req, res) => res.json([...enabled]));

package/templates/default/setup/setup.js

@@ -17,6 +17,7 @@ const state = signal({
   dbUrl: current.DATABASE_URL || "",
   smtpUrl: current.SMTP_URL || "",
   mailFrom: current.MAIL_FROM || "",
+  adminEmails: current.ADMIN_EMAILS || "",
   port: current.PORT || String(defaultPort),
 });
 const set = (patch) => state({ ...state(), ...patch });
@@ -53,6 +54,7 @@ function genEnv(s) {
     else out.push("# SMTP_URL=        # unset → emails print to the console");
     if (s.mailFrom) out.push(`MAIL_FROM=${clean(s.mailFrom)}`);
   }
+  if (eff.includes("admin")) out.push(`ADMIN_EMAILS=${clean(s.adminEmails)}`);
   return out.join("\n") + "\n";
 }
 const env = computed(() => genEnv(state()));
@@ -148,6 +150,7 @@ mount(
     ${field("PORT", "port", String(defaultPort))}
     ${() => (eff().includes("db") ? dbSettings() : null)}
     ${() => (eff().includes("mailer") ? html`${field("SMTP_URL (optional)", "smtpUrl", "smtp://user:pass@smtp.host:587")}${field("MAIL_FROM", "mailFrom", "App <no-reply@you.com>")}` : null)}
+    ${() => (eff().includes("admin") ? field("ADMIN_EMAILS (comma-separated)", "adminEmails", "you@example.com") : null)}
   </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/README.md

@@ -0,0 +1,47 @@
+# ⚡ Volt starter
+
+A complete, **no-build** app shell — auth, realtime chat, a per-user notes CRUD,
+and a database, all wired and turned on out of the box. Edit files and save;
+the page hot-reloads.
+
+## Run
+
+```bash
+npm install
+npm run dev        # → http://localhost:26628
+```
+
+It ships with `VOLT_ADDONS=db,mailer,auth,realtime` in `.env`, so it runs the
+full stack immediately (in-memory by default — magic-link emails print to the
+console). Sign in from the **Account** tab, then use **Notes** and **Chat**.
+
+## Sections
+
+- **Home** — a simple dashboard.
+- **Account** — magic-link sign-in (no passwords).
+- **Notes** — per-user CRUD, auth-gated, stored in the db.
+- **Chat** — Socket.io rooms with presence + typing.
+
+## Configure & inspect
+
+```bash
+npm run dev -- --edit    # ephemeral wizard: toggle add-ons, set DB/SMTP, etc.
+npm run dev -- --studio  # ephemeral data browser (like Prisma Studio)
+```
+
+Both are localhost-only and disappear when you close them — no standing admin
+surface. Switch to a real database (MongoDB / MySQL / Postgres) anytime in the
+wizard.
+
+## Layout
+
+```
+public/app.js      the shell — nav + sections (Home/Notes/Chat/Account)
+public/volt.js     the Volt library (no build step)
+views/index.html   the HTML shell
+server.js          dev server + wizard + studio; wires enabled add-ons + notes
+.volt/addons/      bundled add-on sources (enabled via .env)
+.env               which add-ons are on, + their settings
+```
+
+Scaffolded with [`create-volt`](https://www.npmjs.com/package/create-volt) — `--template starter`.

package/templates/starter/env

@@ -0,0 +1,2 @@
+VOLT_ADDONS=db,mailer,auth,realtime
+DB_DRIVER=memory

package/templates/starter/gitignore

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

package/templates/starter/package.json

@@ -0,0 +1,16 @@
+{
+  "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"
+  },
+  "dependencies": {
+    "express": "^4.19.2",
+    "socket.io": "^4.7.5"
+  }
+}

package/templates/starter/public/app.js

@@ -0,0 +1,169 @@
+// app.js — the starter app shell: a top nav over sections (Home, Notes, Chat,
+// Account). Built on Volt signals. Auth + realtime + db are wired server-side;
+// this is the UI. All dynamic text renders through Volt holes (text nodes,
+// HTML-escaped), so user content can't inject markup.
+import { signal, computed, el, html, mount } from "/volt.js";
+
+let enabled = [];
+try {
+  enabled = await (await fetch("/__volt/addons")).json();
+} catch {
+  /* ignore */
+}
+const hasAuth = enabled.includes("auth");
+const hasChat = enabled.includes("realtime");
+
+const api = async (url, body, method) => {
+  const res = await fetch(url, {
+    method: method || (body ? "POST" : "GET"),
+    headers: body ? { "Content-Type": "application/json" } : undefined,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  return res.json().catch(() => ({}));
+};
+const shortName = (e) => String(e || "").split("@")[0];
+
+const me = signal(null);
+const section = signal("home");
+api("/api/me").then((r) => me(r.email || null));
+
+// --- Account ---
+function accountSection() {
+  const email = signal("");
+  const notice = signal("");
+  async function sendLink(e) {
+    e?.preventDefault?.();
+    const addr = email().trim();
+    if (!addr) return;
+    notice("Sending…");
+    const r = await api("/api/login", { email: addr });
+    notice(r.ok ? (r.dev ? "Magic link printed to the server console — open it to sign in." : `Link sent to ${addr}.`) : r.error || "Failed.");
+  }
+  async function logout() {
+    await api("/api/logout", {});
+    me(null);
+  }
+  return html`<div class="card-x p-4">
+    <h2 class="h6 mb-3">Account</h2>
+    ${() =>
+      me()
+        ? html`<div class="d-flex justify-content-between align-items-center">
+            <span class="text-muted small">Signed in as <span class="accent fw-semibold">${() => me()}</span></span>
+            <button class="btn btn-sm btn-outline-secondary" onclick=${logout}>Sign out</button>
+          </div>`
+        : html`<form class="d-flex gap-2" onsubmit=${sendLink}>
+            <input class="form-control" type="email" name="email" placeholder="you@example.com" maxlength="320" autocomplete="email" required value=${email} oninput=${(e) => email(e.target.value)} />
+            <button class="btn btn-primary" type="submit">Send magic link</button>
+          </form>`}
+    ${() => (notice() ? html`<p class="small text-muted mb-0 mt-2">${notice}</p>` : null)}
+  </div>`;
+}
+
+// --- Notes (per-user CRUD, auth-gated) ---
+function notesSection() {
+  const notes = signal([]);
+  const draft = signal("");
+  const err = signal("");
+  async function load() {
+    if (!me()) return;
+    const r = await api("/api/notes");
+    notes(r.notes || []);
+  }
+  async function add() {
+    const text = draft().trim();
+    if (!text) return;
+    const r = await api("/api/notes", { text });
+    if (r.ok) {
+      draft("");
+      load();
+    } else err(r.error || "Failed.");
+  }
+  async function del(id) {
+    await api("/api/notes/" + encodeURIComponent(id), null, "DELETE");
+    load();
+  }
+  // reload whenever auth state flips to signed-in
+  let loadedFor = null;
+  const sync = computed(() => {
+    if (me() && loadedFor !== me()) {
+      loadedFor = me();
+      load();
+    }
+    return me();
+  });
+
+  return html`<div class="card-x p-4">
+    <h2 class="h6 mb-3">Notes</h2>
+    ${() =>
+      !sync()
+        ? html`<p class="text-muted small mb-0">Sign in (Account) to keep notes.</p>`
+        : html`<div class="input-group mb-3">
+              <input class="form-control" maxlength="2000" placeholder="Write a note…" value=${draft} oninput=${(e) => draft(e.target.value)} onkeydown=${(e) => e.key === "Enter" && add()} />
+              <button class="btn btn-primary" onclick=${add}>Add</button>
+            </div>
+            ${() =>
+              notes().length
+                ? notes().map(
+                    (n) => html`<div class="d-flex justify-content-between align-items-start gap-2 py-2" style="border-top:1px solid #232a36">
+                      <span>${n.text}</span>
+                      <button class="btn btn-sm btn-outline-danger" onclick=${() => del(n.id)}>✕</button>
+                    </div>`,
+                  )
+                : html`<span class="text-muted small">No notes yet.</span>`}
+            ${() => (err() ? html`<p class="small text-danger mb-0 mt-2">${err}</p>` : null)}`}
+  </div>`;
+}
+
+// --- Home ---
+function homeSection() {
+  return html`<div class="card-x p-4">
+    <h2 class="h5 mb-2">Welcome ${() => (me() ? html`back, <span class="accent">${() => shortName(me())}</span>` : "to your Volt app")}</h2>
+    <p class="text-muted mb-3">A no-build, signals-based app — auth, realtime, and a database, all wired and configured by file. Edit <code>public/app.js</code> and save; it hot-reloads.</p>
+    <div class="d-flex flex-wrap gap-2">
+      <button class="btn btn-sm btn-outline-secondary" onclick=${() => section("notes")}>📝 Notes</button>
+      ${hasChat ? html`<button class="btn btn-sm btn-outline-secondary" onclick=${() => section("chat")}>💬 Chat</button>` : ""}
+      <button class="btn btn-sm btn-outline-secondary" onclick=${() => section("account")}>${() => (me() ? "👤 Account" : "🔑 Sign in")}</button>
+    </div>
+  </div>`;
+}
+
+// --- build sections once; toggle visibility (keeps state + one chat socket) ---
+const sections = { home: homeSection(), account: accountSection() };
+if (hasAuth) sections.notes = notesSection();
+if (hasChat) {
+  try {
+    sections.chat = (await import("/chat-ui.js")).chatPanel();
+  } catch {
+    /* chat UI unavailable */
+  }
+}
+// Admin tab appears only for users in the ADMIN_EMAILS allowlist.
+if (enabled.includes("admin")) {
+  try {
+    const r = await (await fetch("/admin/api/me")).json();
+    if (r.isAdmin) sections.admin = (await import("/admin-ui.js")).adminPanel();
+  } catch {
+    /* not signed in / not admin */
+  }
+}
+
+const TABS = [
+  ["home", "Home"],
+  ...(hasAuth ? [["notes", "Notes"]] : []),
+  ...(sections.chat ? [["chat", "Chat"]] : []),
+  ...(sections.admin ? [["admin", "Admin"]] : []),
+  ["account", "Account"],
+];
+
+const nav = () =>
+  html`<nav class="navx py-2 mb-4">
+    <div class="container d-flex align-items-center" style="max-width:760px">
+      <span class="brand me-3"><span class="accent">⚡ Volt</span></span>
+      ${TABS.map(([key, label]) => html`<button class=${() => "btn btn-link btn-sm " + (section() === key ? "active" : "")} onclick=${() => section(key)}>${label}</button>`)}
+      <span class="ms-auto small text-muted">${() => (me() ? shortName(me()) : "guest")}</span>
+    </div>
+  </nav>`;
+
+const panel = (key) => el("div", { class: "container", style: () => "max-width:760px;display:" + (section() === key ? "block" : "none") }, sections[key]);
+
+mount("#app", nav(), ...Object.keys(sections).map(panel));