create-volt 0.55.1 → 0.56.1

package/templates/guestbook/public/volt.js

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

package/templates/starter/public/volt.js

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

package/templates/starter/server.js

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

package/templates/starter/setup/setup.js

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