create-volt 0.48.1 → 0.48.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/package.json +1 -1
  3. package/templates/blog/setup/index.html +3 -3
  4. package/templates/blog/setup/setup.js +6 -1
  5. package/templates/default/setup/index.html +3 -3
  6. package/templates/default/setup/setup.js +6 -1
  7. package/templates/docs/setup/index.html +3 -3
  8. package/templates/docs/setup/setup.js +6 -1
  9. package/templates/starter/setup/index.html +3 -3
  10. package/templates/starter/setup/setup.js +6 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,20 @@ All notable changes to `create-volt` are documented here. The format follows
4
4
  [Keep a Changelog](https://keepachangelog.com/), and this project adheres to
5
5
  [Semantic Versioning](https://semver.org/).
6
6
 
7
+ ## [0.48.3] - 2026-06-29
8
+
9
+ ### Fixed
10
+ - **Unreadable text in the dark config.** The wizard never set Bootstrap's
11
+ `data-bs-theme`, so muted/secondary text (feature descriptions, hints) was
12
+ colored for a light background and vanished on the dark cards. It now tracks the
13
+ light/dark toggle, so all Bootstrap text is readable in both modes.
14
+
15
+ ## [0.48.2] - 2026-06-29
16
+
17
+ ### Changed
18
+ - Config is desktop-only, so the **editor view is now much wider** (up to
19
+ `min(1200px, 95vw)`) while settings stay a readable 720px — view-responsive.
20
+
7
21
  ## [0.48.1] - 2026-06-29
8
22
 
9
23
  ### Changed
@@ -635,6 +649,8 @@ All notable changes to `create-volt` are documented here. The format follows
635
649
  watching and full-page hot reload. Supports `--skip-install` and `--force`,
636
650
  and auto-detects npm / pnpm / yarn / bun for the install step.
637
651
 
652
+ [0.48.3]: https://github.com/MIR-2025/volt/releases/tag/v0.48.3
653
+ [0.48.2]: https://github.com/MIR-2025/volt/releases/tag/v0.48.2
638
654
  [0.48.1]: https://github.com/MIR-2025/volt/releases/tag/v0.48.1
639
655
  [0.48.0]: https://github.com/MIR-2025/volt/releases/tag/v0.48.0
640
656
  [0.47.0]: https://github.com/MIR-2025/volt/releases/tag/v0.47.0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-volt",
3
- "version": "0.48.1",
3
+ "version": "0.48.3",
4
4
  "description": "Scaffold a new Volt app — no-build, signals-based UI with Socket.io hot reload.",
5
5
  "type": "module",
6
6
  "bin": {
package/templates/blog/setup/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html>
2
- <html lang="en">
2
+ <html lang="en" data-bs-theme="dark">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -20,7 +20,7 @@
20
20
  </head>
21
21
  <body>
22
22
  <button id="theme-toggle" class="btn btn-sm btn-outline-secondary">Light mode</button>
23
- <main class="container py-5" style="max-width: 640px;">
23
+ <main id="wrap" class="container py-5" style="max-width: 720px;">
24
24
  <header class="mb-4">
25
25
  <h1 class="h3"><span class="accent"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> Set up your Volt app</span></h1>
26
26
  <p class="text-muted mb-0">Fill these in and the app starts. This page is disposable — it disappears once you click Apply. Re-open it anytime with <code>npm run dev -- --edit</code>.</p>
@@ -31,7 +31,7 @@
31
31
  (function () {
32
32
  const root = document.documentElement;
33
33
  const btn = document.getElementById("theme-toggle");
34
- const apply = (t) => { root.setAttribute("data-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
34
+ const apply = (t) => { root.setAttribute("data-theme", t); root.setAttribute("data-bs-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
35
35
  apply(localStorage.getItem("volt-setup-theme") || "dark");
36
36
  btn.addEventListener("click", () => {
37
37
  const next = root.getAttribute("data-theme") === "light" ? "dark" : "light";
package/templates/blog/setup/setup.js CHANGED
@@ -2,7 +2,7 @@
2
2
  // settings → writes .env (a VOLT_ADDONS list + settings), adds any needed
3
3
  // packages, installs, and starts the app. Add-on code is bundled; enabling is
4
4
  // just config.
5
- import { signal, computed, html, mount } from "/volt.js";
5
+ import { signal, computed, effect, html, mount } from "/volt.js";
6
6
 
7
7
  const { available, themes = [], current, defaultPort, configDefaultPort = 5050 } = await (await fetch("/setup/state")).json();
8
8
  const depsOf = Object.fromEntries(available.map((a) => [a.name, a.dependsOn || []]));
@@ -271,6 +271,11 @@ const aiSettings = () =>
271
271
 
272
272
  // --- Manage content (a second screen reached via "Manage content →") ---
273
273
  const view = signal("config"); // "config" | "manage"
274
+ // Desktop-only config: keep settings readable, but let the editor go wide.
275
+ effect(() => {
276
+ const w = document.getElementById("wrap");
277
+ if (w) w.style.maxWidth = view() === "manage" ? "min(1200px, 95vw)" : "720px";
278
+ });
274
279
  // upgrade check: compare bundled version to npm latest; offer a one-click upgrade
275
280
  const upgrade = signal(null); // { current, latest, available }
276
281
  fetch("/setup/upgrade-check").then((r) => r.json()).then((u) => upgrade(u)).catch(() => {});
package/templates/default/setup/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html>
2
- <html lang="en">
2
+ <html lang="en" data-bs-theme="dark">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -20,7 +20,7 @@
20
20
  </head>
21
21
  <body>
22
22
  <button id="theme-toggle" class="btn btn-sm btn-outline-secondary">Light mode</button>
23
- <main class="container py-5" style="max-width: 640px;">
23
+ <main id="wrap" class="container py-5" style="max-width: 720px;">
24
24
  <header class="mb-4">
25
25
  <h1 class="h3"><span class="accent"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> Set up your Volt app</span></h1>
26
26
  <p class="text-muted mb-0">Fill these in and the app starts. This page is disposable — it disappears once you click Apply. Re-open it anytime with <code>npm run dev -- --edit</code>.</p>
@@ -31,7 +31,7 @@
31
31
  (function () {
32
32
  const root = document.documentElement;
33
33
  const btn = document.getElementById("theme-toggle");
34
- const apply = (t) => { root.setAttribute("data-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
34
+ const apply = (t) => { root.setAttribute("data-theme", t); root.setAttribute("data-bs-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
35
35
  apply(localStorage.getItem("volt-setup-theme") || "dark");
36
36
  btn.addEventListener("click", () => {
37
37
  const next = root.getAttribute("data-theme") === "light" ? "dark" : "light";
package/templates/default/setup/setup.js CHANGED
@@ -2,7 +2,7 @@
2
2
  // settings → writes .env (a VOLT_ADDONS list + settings), adds any needed
3
3
  // packages, installs, and starts the app. Add-on code is bundled; enabling is
4
4
  // just config.
5
- import { signal, computed, html, mount } from "/volt.js";
5
+ import { signal, computed, effect, html, mount } from "/volt.js";
6
6
 
7
7
  const { available, themes = [], current, defaultPort, configDefaultPort = 5050 } = await (await fetch("/setup/state")).json();
8
8
  const depsOf = Object.fromEntries(available.map((a) => [a.name, a.dependsOn || []]));
@@ -271,6 +271,11 @@ const aiSettings = () =>
271
271
 
272
272
  // --- Manage content (a second screen reached via "Manage content →") ---
273
273
  const view = signal("config"); // "config" | "manage"
274
+ // Desktop-only config: keep settings readable, but let the editor go wide.
275
+ effect(() => {
276
+ const w = document.getElementById("wrap");
277
+ if (w) w.style.maxWidth = view() === "manage" ? "min(1200px, 95vw)" : "720px";
278
+ });
274
279
  // upgrade check: compare bundled version to npm latest; offer a one-click upgrade
275
280
  const upgrade = signal(null); // { current, latest, available }
276
281
  fetch("/setup/upgrade-check").then((r) => r.json()).then((u) => upgrade(u)).catch(() => {});
package/templates/docs/setup/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html>
2
- <html lang="en">
2
+ <html lang="en" data-bs-theme="dark">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -20,7 +20,7 @@
20
20
  </head>
21
21
  <body>
22
22
  <button id="theme-toggle" class="btn btn-sm btn-outline-secondary">Light mode</button>
23
- <main class="container py-5" style="max-width: 640px;">
23
+ <main id="wrap" class="container py-5" style="max-width: 720px;">
24
24
  <header class="mb-4">
25
25
  <h1 class="h3"><span class="accent"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> Set up your Volt app</span></h1>
26
26
  <p class="text-muted mb-0">Fill these in and the app starts. This page is disposable — it disappears once you click Apply. Re-open it anytime with <code>npm run dev -- --edit</code>.</p>
@@ -31,7 +31,7 @@
31
31
  (function () {
32
32
  const root = document.documentElement;
33
33
  const btn = document.getElementById("theme-toggle");
34
- const apply = (t) => { root.setAttribute("data-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
34
+ const apply = (t) => { root.setAttribute("data-theme", t); root.setAttribute("data-bs-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
35
35
  apply(localStorage.getItem("volt-setup-theme") || "dark");
36
36
  btn.addEventListener("click", () => {
37
37
  const next = root.getAttribute("data-theme") === "light" ? "dark" : "light";
package/templates/docs/setup/setup.js CHANGED
@@ -2,7 +2,7 @@
2
2
  // settings → writes .env (a VOLT_ADDONS list + settings), adds any needed
3
3
  // packages, installs, and starts the app. Add-on code is bundled; enabling is
4
4
  // just config.
5
- import { signal, computed, html, mount } from "/volt.js";
5
+ import { signal, computed, effect, html, mount } from "/volt.js";
6
6
 
7
7
  const { available, themes = [], current, defaultPort, configDefaultPort = 5050 } = await (await fetch("/setup/state")).json();
8
8
  const depsOf = Object.fromEntries(available.map((a) => [a.name, a.dependsOn || []]));
@@ -271,6 +271,11 @@ const aiSettings = () =>
271
271
 
272
272
  // --- Manage content (a second screen reached via "Manage content →") ---
273
273
  const view = signal("config"); // "config" | "manage"
274
+ // Desktop-only config: keep settings readable, but let the editor go wide.
275
+ effect(() => {
276
+ const w = document.getElementById("wrap");
277
+ if (w) w.style.maxWidth = view() === "manage" ? "min(1200px, 95vw)" : "720px";
278
+ });
274
279
  // upgrade check: compare bundled version to npm latest; offer a one-click upgrade
275
280
  const upgrade = signal(null); // { current, latest, available }
276
281
  fetch("/setup/upgrade-check").then((r) => r.json()).then((u) => upgrade(u)).catch(() => {});
package/templates/starter/setup/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html>
2
- <html lang="en">
2
+ <html lang="en" data-bs-theme="dark">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -20,7 +20,7 @@
20
20
  </head>
21
21
  <body>
22
22
  <button id="theme-toggle" class="btn btn-sm btn-outline-secondary">Light mode</button>
23
- <main class="container py-5" style="max-width: 640px;">
23
+ <main id="wrap" class="container py-5" style="max-width: 720px;">
24
24
  <header class="mb-4">
25
25
  <h1 class="h3"><span class="accent"><img src="/logo.webp" alt="" style="height:1em;vertical-align:-.15em" /> Set up your Volt app</span></h1>
26
26
  <p class="text-muted mb-0">Fill these in and the app starts. This page is disposable — it disappears once you click Apply. Re-open it anytime with <code>npm run dev -- --edit</code>.</p>
@@ -31,7 +31,7 @@
31
31
  (function () {
32
32
  const root = document.documentElement;
33
33
  const btn = document.getElementById("theme-toggle");
34
- const apply = (t) => { root.setAttribute("data-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
34
+ const apply = (t) => { root.setAttribute("data-theme", t); root.setAttribute("data-bs-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
35
35
  apply(localStorage.getItem("volt-setup-theme") || "dark");
36
36
  btn.addEventListener("click", () => {
37
37
  const next = root.getAttribute("data-theme") === "light" ? "dark" : "light";
package/templates/starter/setup/setup.js CHANGED
@@ -2,7 +2,7 @@
2
2
  // settings → writes .env (a VOLT_ADDONS list + settings), adds any needed
3
3
  // packages, installs, and starts the app. Add-on code is bundled; enabling is
4
4
  // just config.
5
- import { signal, computed, html, mount } from "/volt.js";
5
+ import { signal, computed, effect, html, mount } from "/volt.js";
6
6
 
7
7
  const { available, themes = [], current, defaultPort, configDefaultPort = 5050 } = await (await fetch("/setup/state")).json();
8
8
  const depsOf = Object.fromEntries(available.map((a) => [a.name, a.dependsOn || []]));
@@ -271,6 +271,11 @@ const aiSettings = () =>
271
271
 
272
272
  // --- Manage content (a second screen reached via "Manage content →") ---
273
273
  const view = signal("config"); // "config" | "manage"
274
+ // Desktop-only config: keep settings readable, but let the editor go wide.
275
+ effect(() => {
276
+ const w = document.getElementById("wrap");
277
+ if (w) w.style.maxWidth = view() === "manage" ? "min(1200px, 95vw)" : "720px";
278
+ });
274
279
  // upgrade check: compare bundled version to npm latest; offer a one-click upgrade
275
280
  const upgrade = signal(null); // { current, latest, available }
276
281
  fetch("/setup/upgrade-check").then((r) => r.json()).then((u) => upgrade(u)).catch(() => {});