create-zoijs 0.1.3 → 0.2.0

package/templates/app/src/style.css

@@ -1,241 +1,241 @@
-/* A small, polished dashboard theme — plain CSS, no framework.
-   Adapts to light/dark automatically and stays readable on mobile. */
-
-:root {
-  color-scheme: light dark;
-  --bg: #f6f7fb;
-  --panel: #ffffff;
-  --text: #1e2230;
-  --muted: #6b7280;
-  --border: #e6e8ef;
-  --accent: #6366f1;
-  --accent-2: #8b5cf6;
-  --radius: 14px;
-  --shadow: 0 1px 2px rgba(20, 22, 40, 0.04), 0 8px 24px rgba(20, 22, 40, 0.06);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #0e1016;
-    --panel: #171a22;
-    --text: #e7e9f0;
-    --muted: #9aa1b1;
-    --border: #262a36;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-  line-height: 1.5;
-  color: var(--text);
-  background:
-    radial-gradient(1200px 500px at 50% -200px, rgba(99, 102, 241, 0.18), transparent 70%),
-    var(--bg);
-}
-
-.app {
-  width: min(56rem, 92vw);
-  margin: 0 auto;
-  padding: clamp(1.5rem, 4vw, 3rem) 0 3rem;
-}
-
-/* --- hero ------------------------------------------------------------------ */
-.hero {
-  text-align: center;
-  margin-bottom: 1.75rem;
-}
-.badge {
-  display: inline-block;
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: #fff;
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
-  padding: 0.3rem 0.7rem;
-  border-radius: 999px;
-}
-.hero h1 {
-  margin: 0.7rem 0 0.25rem;
-  font-size: clamp(1.8rem, 5vw, 2.6rem);
-  letter-spacing: -0.02em;
-}
-.tagline {
-  margin: 0 auto;
-  max-width: 34rem;
-  color: var(--muted);
-}
-.summary {
-  margin: 0.6rem 0 0;
-  color: var(--muted);
-}
-
-/* --- cards & stats --------------------------------------------------------- */
-.card {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-}
-
-.stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
-  gap: 0.9rem;
-  margin-bottom: 1.25rem;
-}
-.stat {
-  padding: 1rem 1.1rem;
-  border-left: 3px solid var(--accent);
-}
-.stat-indigo { border-left-color: #6366f1; }
-.stat-green  { border-left-color: #10b981; }
-.stat-amber  { border-left-color: #f59e0b; }
-.stat-slate  { border-left-color: #64748b; }
-.stat-value {
-  font-size: 1.7rem;
-  font-weight: 700;
-  text-transform: capitalize;
-}
-.stat-label {
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-/* --- task panel ------------------------------------------------------------ */
-.panel {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: 1.25rem;
-}
-
-.add {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.9rem;
-}
-.add input {
-  flex: 1;
-  font: inherit;
-  padding: 0.6rem 0.8rem;
-  color: var(--text);
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-}
-.add input:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-button {
-  font: inherit;
-  cursor: pointer;
-  border-radius: 10px;
-  border: 1px solid transparent;
-}
-.add button {
-  padding: 0.6rem 1.1rem;
-  color: #fff;
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
-}
-
-.filters {
-  display: flex;
-  gap: 0.4rem;
-  margin-bottom: 0.9rem;
-}
-.chip {
-  padding: 0.35rem 0.85rem;
-  color: var(--muted);
-  background: transparent;
-  border: 1px solid var(--border);
-}
-.chip-on {
-  color: var(--text);
-  border-color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
-}
-
-.tasks {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.45rem;
-}
-.task {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.6rem;
-  padding: 0.6rem 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-}
-.task label {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  cursor: pointer;
-}
-.task input[type="checkbox"] {
-  width: 1.1rem;
-  height: 1.1rem;
-  accent-color: var(--accent);
-}
-.task.done span {
-  text-decoration: line-through;
-  color: var(--muted);
-}
-.delete {
-  border: none;
-  background: transparent;
-  color: var(--muted);
-  padding: 0.2rem 0.5rem;
-  font-size: 1rem;
-}
-.delete:hover {
-  color: #ef4444;
-}
-
-.empty {
-  text-align: center;
-  color: var(--muted);
-  padding: 1.5rem 0 0.5rem;
-}
-
-/* --- dev hint -------------------------------------------------------------- */
-.hint {
-  text-align: center;
-  color: var(--muted);
-  font-size: 0.9rem;
-  margin-top: 1.5rem;
-}
-.hint p {
-  margin: 0.2rem 0;
-}
-code {
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 0.85em;
-  padding: 0.1rem 0.35rem;
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
-}
-
-@media (max-width: 30rem) {
-  .add {
-    flex-direction: column;
-  }
-  .add button {
-    width: 100%;
-  }
-}
+/* A small, polished dashboard theme — plain CSS, no framework.
+   Adapts to light/dark automatically and stays readable on mobile. */
+
+:root {
+  color-scheme: light dark;
+  --bg: #f6f7fb;
+  --panel: #ffffff;
+  --text: #1e2230;
+  --muted: #6b7280;
+  --border: #e6e8ef;
+  --accent: #6366f1;
+  --accent-2: #8b5cf6;
+  --radius: 14px;
+  --shadow: 0 1px 2px rgba(20, 22, 40, 0.04), 0 8px 24px rgba(20, 22, 40, 0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0e1016;
+    --panel: #171a22;
+    --text: #e7e9f0;
+    --muted: #9aa1b1;
+    --border: #262a36;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  line-height: 1.5;
+  color: var(--text);
+  background:
+    radial-gradient(1200px 500px at 50% -200px, rgba(99, 102, 241, 0.18), transparent 70%),
+    var(--bg);
+}
+
+.app {
+  width: min(56rem, 92vw);
+  margin: 0 auto;
+  padding: clamp(1.5rem, 4vw, 3rem) 0 3rem;
+}
+
+/* --- hero ------------------------------------------------------------------ */
+.hero {
+  text-align: center;
+  margin-bottom: 1.75rem;
+}
+.badge {
+  display: inline-block;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  padding: 0.3rem 0.7rem;
+  border-radius: 999px;
+}
+.hero h1 {
+  margin: 0.7rem 0 0.25rem;
+  font-size: clamp(1.8rem, 5vw, 2.6rem);
+  letter-spacing: -0.02em;
+}
+.tagline {
+  margin: 0 auto;
+  max-width: 34rem;
+  color: var(--muted);
+}
+.summary {
+  margin: 0.6rem 0 0;
+  color: var(--muted);
+}
+
+/* --- cards & stats --------------------------------------------------------- */
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+  gap: 0.9rem;
+  margin-bottom: 1.25rem;
+}
+.stat {
+  padding: 1rem 1.1rem;
+  border-left: 3px solid var(--accent);
+}
+.stat-indigo { border-left-color: #6366f1; }
+.stat-green  { border-left-color: #10b981; }
+.stat-amber  { border-left-color: #f59e0b; }
+.stat-slate  { border-left-color: #64748b; }
+.stat-value {
+  font-size: 1.7rem;
+  font-weight: 700;
+  text-transform: capitalize;
+}
+.stat-label {
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+/* --- task panel ------------------------------------------------------------ */
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 1.25rem;
+}
+
+.add {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.9rem;
+}
+.add input {
+  flex: 1;
+  font: inherit;
+  padding: 0.6rem 0.8rem;
+  color: var(--text);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.add input:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+button {
+  font: inherit;
+  cursor: pointer;
+  border-radius: 10px;
+  border: 1px solid transparent;
+}
+.add button {
+  padding: 0.6rem 1.1rem;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+}
+
+.filters {
+  display: flex;
+  gap: 0.4rem;
+  margin-bottom: 0.9rem;
+}
+.chip {
+  padding: 0.35rem 0.85rem;
+  color: var(--muted);
+  background: transparent;
+  border: 1px solid var(--border);
+}
+.chip-on {
+  color: var(--text);
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.tasks {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.45rem;
+}
+.task {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.task label {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  cursor: pointer;
+}
+.task input[type="checkbox"] {
+  width: 1.1rem;
+  height: 1.1rem;
+  accent-color: var(--accent);
+}
+.task.done span {
+  text-decoration: line-through;
+  color: var(--muted);
+}
+.delete {
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  padding: 0.2rem 0.5rem;
+  font-size: 1rem;
+}
+.delete:hover {
+  color: #ef4444;
+}
+
+.empty {
+  text-align: center;
+  color: var(--muted);
+  padding: 1.5rem 0 0.5rem;
+}
+
+/* --- dev hint -------------------------------------------------------------- */
+.hint {
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin-top: 1.5rem;
+}
+.hint p {
+  margin: 0.2rem 0;
+}
+code {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.85em;
+  padding: 0.1rem 0.35rem;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+@media (max-width: 30rem) {
+  .add {
+    flex-direction: column;
+  }
+  .add button {
+    width: 100%;
+  }
+}

package/templates/basic/README.md

@@ -1,30 +1,50 @@
-# {{APP_TITLE}}
-
-A [Zoijs](https://zoijs.dev) app — plain HTML, CSS, and JavaScript. **No build step.**
-
-## Develop
-
-```bash
-npm install
-npm run dev
-```
-
-```text
-  Zoijs dev server
-
-  - Local:  http://localhost:7310
-```
-
-Open the printed URL (it falls back to 7311–7313 if the port is busy).
-
-## How it works
-
-- **`index.html`** — an import map points `@zoijs/core` at `node_modules`, then loads `src/app.js`.
-- **`dev-server.mjs`** — a tiny zero-dependency static server (Node built-ins only) that `npm run dev` runs.
-- **`src/app.js`** — your app: `createState` for state, `html` for markup, `mount` to render.
-- **`src/style.css`** — plain CSS.
-
-There's no bundler and no build step. Open the files and read them — that's the
-whole app. Edit `src/app.js` and reload.
-
-Learn more at [zoijs.dev](https://zoijs.dev).
+# {{APP_TITLE}}
+
+A [Zoijs](https://zoijs.dev) app — plain HTML, CSS, and JavaScript. **No build step.**
+
+## Develop
+
+```bash
+npm install
+npm run dev
+```
+
+```text
+  Zoijs dev server
+
+  - Local:  http://localhost:7310
+```
+
+Open the printed URL (it falls back to 7311–7313 if the port is busy).
+
+The dev server is for **development only**: it listens on `127.0.0.1` (this machine),
+never serves dotfiles (`.env`, `.git/`, …) or anything outside the project folder, and is
+not meant for hosting. To try the app from a phone on your network, opt in explicitly with
+`ZOIJS_HOST=0.0.0.0 npm run dev` — while it runs, anyone on that network can read the
+project's files.
+
+## Deploy
+
+This page loads the **development** entry of `@zoijs/core` (helpful warnings, devtools).
+When you deploy, change the import map in `index.html` to the **production** entry —
+same API, warnings and the devtools hook off:
+
+```html
+"@zoijs/core": "./node_modules/@zoijs/core/src/prod.js"
+```
+
+Then deploy the files to a static host (not the dev server) and go through the
+[production security checklist](https://zoijs.dev/production-security) — security headers,
+a Content-Security-Policy with your import map's hash, CSRF, and more.
+
+## How it works
+
+- **`index.html`** — an import map points `@zoijs/core` at `node_modules`, then loads `src/app.js`.
+- **`dev-server.mjs`** — a tiny zero-dependency static server (Node built-ins only) that `npm run dev` runs.
+- **`src/app.js`** — your app: `createState` for state, `html` for markup, `mount` to render.
+- **`src/style.css`** — plain CSS.
+
+There's no bundler and no build step. Open the files and read them — that's the
+whole app. Edit `src/app.js` and reload.
+
+Learn more at [zoijs.dev](https://zoijs.dev).

package/templates/basic/_gitignore

@@ -1 +1 @@
-node_modules
+node_modules

package/templates/basic/_vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "bierner.lit-html",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}