create-muten 0.0.8 → 0.0.9

package/README.md

@@ -60,35 +60,36 @@ In an interactive terminal it prompts for a few things (defaults in parentheses)
 | Prompt | Options | Default |
 |---|---|---|
 | **Project name** | any valid folder name | `muten-app` |
-| **Template** | `basic` / `routing` / `full` | `basic` |
-| **Stylesheet** | `css` / `scss` | `css` |
+| **Template** | `muten` / `muten + React` / `muten + Svelte` | `muten` |
+| **Styling** | `css` / `scss` | `css` |
 | **Add Tailwind CSS?** | `Y` / `n` (CSS only) | `n` |
 | **Add DaisyUI?** | `Y` / `n` (needs Tailwind) | `n` |
-| **Framework islands?** | `none` / `svelte` / `react` / `both` | `none` |
 | **Package manager** | `npm` / `pnpm` / `yarn` / `bun` | the one that launched it |
 | **Install deps and start dev now?** | `Y` / `n` | `Y` |
 
 Tailwind is an optional add-on **on top of** CSS (the look layer; you still style via `class("…")`) — it
 wires `@tailwindcss/vite` + an `@import "tailwindcss"` and notes the setup in the app's `.claude/` guide.
 
-## Templates
+## Templates (flavors)
+
+Every flavor scaffolds the **same** welcome page and the same `.muten` workflow — the only difference is
+whether a framework's island plugin is pre-wired:
 
 | Template | What you get |
 |---|---|
-| **basic** | one page — the minimal starter |
-| **routing** | a persistent shell (navbar + footer) + multiple real-path routes + a static `about` page |
-| **full** | routing + a `.store` + an `api` block + a source-backed products page + Tailwind — a real data app |
+| **muten** | pure muten — the AI-first DSL, zero framework runtime |
+| **muten + React** | same, plus `@vitejs/plugin-react` + React, so you can drop in a **React island** (shadcn/Radix, any React lib) |
+| **muten + Svelte** | same, plus `@sveltejs/vite-plugin-svelte` + Svelte, for **Svelte islands** (a lighter runtime) |
+
+An *island* is a real framework component used as a node — `use X from "react:./X.jsx"` →
+`X(value: @s, onChange: act) client:visible` (props ↓ + events ↑, lazy + code-split). Default to `.muten`;
+reach for an island only for a widget muten can't express.
 
-When **Tailwind or DaisyUI** is selected, `theme.muten` is centralized to **match Tailwind's scale** (so
+When **Tailwind or DaisyUI** is added, `theme.muten` is centralized to **match Tailwind's scale** (so
 `style()` tokens and Tailwind utilities share one scale, e.g. `style(gap.md)` == `gap-4`); plain CSS/SCSS
 keeps the default scale. **DaisyUI** adds component classes (`btn`, `card`, `modal`) usable in `class("…")` —
 pure classes, no React; behavior is Muten state + `on()`.
 
-**Framework islands** (`svelte` / `react` / `both`) wire `@sveltejs/vite-plugin-svelte` / `@vitejs/plugin-react`
-into `vite.config.mjs` so you can drop a real Svelte/React component (incl. React libs like **shadcn/Radix**)
-into a page as an *island* — `use X from "react:./X.jsx"` → `X(value: @s, onChange: act) client:visible`
-(props ↓ + events ↑, lazy + code-split). Default to `.muten`; reach for an island only for the hard widget.
-
 If you accept the last prompt it runs `<pm> install` followed by `<pm> run dev` — your app is live in a
 single step. Choosing SCSS also adds `sass` and switches the stylesheet to `.scss` automatically.
 
@@ -105,11 +106,10 @@ create-muten my-app --css --no-install    # just scaffold, decide later
 | Flag | Effect |
 |---|---|
 | `<name>` | the project folder (positional argument) |
-| `--template <basic\|routing\|full>` | which starter (default: `basic`; `full` implies Tailwind) |
+| `--template <muten\|react\|svelte>` | flavor (default: `muten`); `--react` / `--svelte` are shortcuts |
 | `--css` / `--scss` | pick the stylesheet (default: `css`) |
 | `--tailwind` | add Tailwind CSS v4 on top of CSS (forces `--css`) |
 | `--daisyui` | add DaisyUI component classes (implies `--tailwind`) |
-| `--svelte` / `--react` | wire the Svelte / React island plugin (drop in framework components, e.g. shadcn) |
 | `--pm <npm\|pnpm\|yarn\|bun>` | package manager to use (default: detected) |
 | `--no-install` | scaffold only — don't install or start the dev server |
 | `--help` | print usage and exit |

package/index.js

@@ -15,8 +15,7 @@ import color from 'picocolors';
 
 const SELF = dirname(fileURLToPath(import.meta.url));
 const TEMPLATE = join(SELF, 'template');
-const OVERLAYS = join(SELF, 'overlays');   // additive layers per template variant (routing, full)
-const TEMPLATES = ['basic', 'routing', 'full'];
+const TEMPLATES = ['muten', 'react', 'svelte']; // the "template" IS the flavor: pure muten, or muten + a framework for islands
 const PKG = JSON.parse(readFileSync(join(SELF, 'package.json'), 'utf8'));
 const PMS = ['npm', 'pnpm', 'yarn', 'bun'];
 
@@ -37,6 +36,31 @@ const tailwindStyles = (daisyui) => `@import "tailwindcss";${daisyui ? '\n@plugi
 /* Muten layout primitive Tailwind doesn't define */
 .stack { display: flex; flex-direction: column; }
 `;
+// Starter welcome page styles (used by the scaffolded home.muten). Self-contained plain CSS — looks good
+// with or without Tailwind; delete it (and the page) when you build your own.
+const WELCOME_CSS = `
+/* — starter welcome page (src/pages/home/home.muten) — delete when you build your own — */
+.welcome { background: #fafafa; color: #18181b; padding: 64px 24px; }
+.wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 52px; }
+.hero { text-align: center; }
+.logo { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto; box-shadow: 0 6px 20px rgba(255,94,0,.28); }
+.brand { font-size: clamp(40px, 8vw, 58px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 22px; background: linear-gradient(135deg, #ff5e00, #ff9a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.tagline { font-size: 18px; font-weight: 600; color: #27272a; margin-top: 10px; }
+.lead { max-width: 580px; margin: 14px auto 0; color: #52525b; font-size: 16px; line-height: 1.65; }
+.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.stat { border: 1px solid #e4e4e7; border-radius: 14px; padding: 22px 16px; text-align: center; background: #fff; }
+.stat-n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #ff5e00; }
+.stat-l { color: #71717a; font-size: 12px; line-height: 1.45; margin-top: 6px; }
+.section { display: flex; flex-direction: column; gap: 14px; }
+.h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
+.snippet { background: #18181b; color: #e4e4e7; border-radius: 14px; padding: 20px 22px; margin: 0; overflow-x: auto; white-space: pre; font: 13px/1.7 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
+.note { color: #71717a; font-size: 13px; line-height: 1.55; }
+.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
+.card { border: 1px solid #e4e4e7; border-radius: 14px; padding: 18px; background: #fff; }
+.card-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
+.card-text { color: #71717a; font-size: 13px; line-height: 1.5; }
+@media (max-width: 560px) { .stats, .cards { grid-template-columns: 1fr; } }
+`;
 // vite.config composed from the chosen options — muten always; svelte/react add island plugins; tailwind last.
 const viteConfig = ({ tailwind, svelte, react }) => {
   const imports = [`import muten from '@muten/core/vite-plugin-muten.js';`];
@@ -95,20 +119,26 @@ const detectPM = () => { const ua = process.env.npm_config_user_agent || ''; ret
 const validName = (n) => /^[A-Za-z0-9][A-Za-z0-9._-]*$/.test(n);
 const keep = (v) => { if (isCancel(v)) { cancel('Cancelled.'); process.exit(0); } return v; };
 
+// The muten mark + wordmark, in the brand orange (#FF5E00) — shown before the prompts. Truecolor ANSI
+// (modern terminals); degrades to plain text where unsupported.
+const logo = () => {
+  const o = '\x1b[38;2;255;94;0m', tile = '\x1b[48;2;255;94;0m\x1b[1m\x1b[97m', b = '\x1b[1m', d = '\x1b[2m', r = '\x1b[0m';
+  console.log(`\n  ${tile} M ${r}  ${b}${o}muten${r}`);
+  console.log(`  ${d}     the AI-first frontend framework${r}\n`);
+};
+
 async function main() {
   const argv = process.argv.slice(2);
   const has = (f) => argv.includes(f);
   const val = (f) => { const i = argv.indexOf(f); return i >= 0 ? argv[i + 1] : undefined; };
   if (has('-v') || has('--version')) { console.log(PKG.version); return; }
-  if (has('-h') || has('--help')) { console.log('Usage: create-muten [name] [--template basic|routing|full] [--css|--scss] [--tailwind] [--daisyui] [--svelte] [--react] [--pm npm|pnpm|yarn|bun] [--no-install]'); return; }
+  if (has('-h') || has('--help')) { console.log('Usage: create-muten [name] [--template muten|react|svelte] [--css|--scss] [--tailwind] [--daisyui] [--pm npm|pnpm|yarn|bun] [--no-install]'); return; }
 
   let name = argv.filter((a, i) => !a.startsWith('-') && argv[i - 1] !== '--pm' && argv[i - 1] !== '--template')[0];
-  let template = val('--template') || (has('--full') ? 'full' : has('--routing') ? 'routing' : has('--basic') ? 'basic' : undefined);
+  let template = val('--template') || (has('--react') ? 'react' : has('--svelte') ? 'svelte' : has('--muten') ? 'muten' : undefined); // flavor: muten | react | svelte
   let style = has('--scss') ? 'scss' : has('--css') ? 'css' : undefined;     // the base stylesheet
   let tailwind = has('--tailwind') ? true : undefined;                        // optional add-on (CSS only)
   let daisyui = has('--daisyui') ? true : undefined;                          // component classes on Tailwind
-  let svelte = has('--svelte') ? true : undefined;                            // island: Svelte components
-  let react = has('--react') ? true : undefined;                              // island: React components (shadcn/Radix)
   let pm = val('--pm');
   let install = has('--no-install') ? false : undefined;
   if (name && !validName(name)) { console.error(`Invalid name: "${name}" (letters, digits, . _ -)`); process.exit(1); }
@@ -118,51 +148,39 @@ async function main() {
 
   // Styled prompts only with a real TTY (piped/CI input would hang); otherwise use flags + defaults.
   if (process.stdin.isTTY) {
-    intro(color.bgCyan(color.black(' create-muten ')) + color.dim('  the AI-first frontend framework'));
+    logo();
+    intro(color.dim(`create-muten v${PKG.version}`));
     if (!name) name = keep(await text({ message: 'Project name', placeholder: 'muten-app', defaultValue: 'muten-app', validate: (v) => (v && !validName(v)) ? 'Use letters, digits, . _ - (start alphanumeric).' : undefined }));
     if (!template) template = keep(await select({ message: 'Template', options: [
-      { value: 'basic', label: 'Basic', hint: 'one page' },
-      { value: 'routing', label: 'Routing', hint: 'shell + multiple pages' },
-      { value: 'full', label: 'Routing + store + API + Tailwind', hint: 'a real data app' },
+      { value: 'muten', label: 'muten', hint: 'pure — the AI-first DSL, zero framework runtime' },
+      { value: 'react', label: 'muten + React', hint: 'React islands: shadcn, Radix, any React lib' },
+      { value: 'svelte', label: 'muten + Svelte', hint: 'Svelte islands: a lighter runtime' },
     ] }));
-    if (template === 'full') tailwind = true;   // the full template implies Tailwind
-    // Tailwind is an add-on on top of CSS (Tailwind v4 is CSS-native; Sass isn't recommended).
-    if (!style && !tailwind) style = keep(await select({ message: 'Stylesheet', options: [
+    if (!style) style = keep(await select({ message: 'Styling', options: [
       { value: 'css', label: 'CSS', hint: 'plain, zero deps' },
       { value: 'scss', label: 'SCSS', hint: 'adds sass' },
     ] }));
-    if (tailwind === undefined) tailwind = style === 'css' ? keep(await confirm({ message: 'Add Tailwind CSS? (utility classes via class("…"))', initialValue: false })) : false;
-    if (tailwind && daisyui === undefined) daisyui = keep(await confirm({ message: 'Add DaisyUI? (component classes: btn, card, modal…)', initialValue: template === 'full' }));
-    if (svelte === undefined && react === undefined) {
-      const islands = keep(await select({ message: 'Framework islands? (drop in Svelte/React components for hard widgets)', options: [
-        { value: 'none', label: 'None', hint: 'pure Muten' },
-        { value: 'svelte', label: 'Svelte', hint: 'lighter to embed' },
-        { value: 'react', label: 'React', hint: 'shadcn / Radix ecosystem' },
-        { value: 'both', label: 'Both' },
-      ] }));
-      svelte = islands === 'svelte' || islands === 'both';
-      react = islands === 'react' || islands === 'both';
-    }
+    if (tailwind === undefined) tailwind = style === 'css' ? keep(await confirm({ message: 'Add Tailwind CSS?', initialValue: false })) : false;
+    if (tailwind && daisyui === undefined) daisyui = keep(await confirm({ message: 'Add DaisyUI? (component classes: btn, card, modal…)', initialValue: false }));
   }
   name = name || 'muten-app';
-  template = template || 'basic';
-  if (template === 'full') tailwind = true;     // full implies Tailwind
-  if (daisyui) tailwind = true;                 // DaisyUI is a Tailwind plugin
+  template = template || 'muten';
   style = style || 'css';
+  if (daisyui) tailwind = true;                 // DaisyUI is a Tailwind plugin
   if (tailwind === undefined) tailwind = false;
   if (daisyui === undefined) daisyui = false;
-  if (svelte === undefined) svelte = false;
-  if (react === undefined) react = false;
-  if (tailwind) style = 'css';            // Tailwind implies a CSS base (not SCSS)
+  if (tailwind) style = 'css';                  // Tailwind v4 is CSS-native (not SCSS)
+  const svelte = template === 'svelte';         // the flavor IS the islands choice
+  const react = template === 'react';
   pm = pm || dpm;
   if (install === undefined) install = false;
 
   const target = resolve(name);
   if (existsSync(target)) { (process.stdin.isTTY ? cancel : console.error)(`"${name}" already exists.`); process.exit(1); }
 
-  // scaffold from ./template (the basic base) + layer the chosen variant's overlay + the stylesheet/add-ons
+  // EVERY flavor scaffolds the SAME base template (identical welcome page); react/svelte only add the
+  // island plugin + deps below, and tailwind/daisyui only swap the stylesheet.
   cpSync(TEMPLATE, target, { recursive: true });
-  if (template !== 'basic') cpSync(join(OVERLAYS, template), target, { recursive: true });  // routing / full overlay
   const ignore = join(target, '_gitignore');
   if (existsSync(ignore)) renameSync(ignore, join(target, '.gitignore'));
 
@@ -174,13 +192,13 @@ async function main() {
   const appendAgents = (text) => { const f = join(target, '.claude', 'AGENTS.md'); if (existsSync(f)) writeFileSync(f, readFileSync(f, 'utf8') + text); };
 
   if (tailwind) {
-    writeFileSync(join(target, 'src', 'styles.css'), tailwindStyles(daisyui));
+    writeFileSync(join(target, 'src', 'styles.css'), tailwindStyles(daisyui) + WELCOME_CSS);
     writeFileSync(join(target, 'theme.muten'), TAILWIND_THEME);          // scale centralized to Tailwind's
     addDev({ tailwindcss: '^4.0.0', '@tailwindcss/vite': '^4.0.0' });
     if (daisyui) addDev({ daisyui: '^5.0.0' });
     appendAgents(TAILWIND_NOTE + (daisyui ? DAISY_NOTE : ''));           // tell the AI what styling is available
   } else {
-    writeFileSync(join(target, 'src', style === 'scss' ? 'styles.scss' : 'styles.css'), RESET);
+    writeFileSync(join(target, 'src', style === 'scss' ? 'styles.scss' : 'styles.css'), RESET + WELCOME_CSS);
   }
   if (style === 'scss') addDev({ sass: '^1.101.0' });
   if (svelte) { addDep({ svelte: '^5.0.0' }); addDev({ '@sveltejs/vite-plugin-svelte': '^7.0.0' }); }
@@ -189,8 +207,7 @@ async function main() {
   writeFileSync(join(target, 'vite.config.mjs'), viteConfig({ tailwind, svelte, react })); // composed: muten + chosen plugins
   writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
 
-  const islandDesc = [svelte && 'Svelte', react && 'React'].filter(Boolean).join('+');
-  const desc = `${template}, ${style}${tailwind ? ' + Tailwind' : ''}${daisyui ? ' + DaisyUI' : ''}${islandDesc ? ' + ' + islandDesc + ' islands' : ''}`;
+  const desc = `${template}, ${style}${tailwind ? ' + Tailwind' : ''}${daisyui ? ' + DaisyUI' : ''}`;
   if (!install) {
     if (process.stdin.isTTY) { note(`cd ${name}\n${pm} install\n${pm} run dev`, 'Next steps'); outro(color.green(`Created ${name}  (${desc})`)); }
     else console.log(`\n  Created ${name} (${desc}, ${pm})\n  cd ${name} && ${pm} install && ${pm} run dev\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-muten",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Scaffold a new Muten app.",
   "repository": {
     "type": "git",

package/template/package.json

@@ -8,7 +8,7 @@
     "lint": "muten lint"
   },
   "dependencies": {
-    "@muten/core": "^0.0.7"
+    "@muten/core": "^0.0.8"
   },
   "devDependencies": {
     "vite": "^8.0.16"

package/template/public/muten.svg

@@ -0,0 +1,4 @@
+<svg width="157" height="157" viewBox="0 0 157 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12C0 5.37258 5.37258 0 12 0H145C151.627 0 157 5.37258 157 12V145C157 151.627 151.627 157 145 157H12C5.37258 157 0 151.627 0 145V12Z" fill="#FF5E00"/>
+<path d="M73.2841 144V91.6364H89.1364V101.25H89.7159C90.8068 98.0682 92.6477 95.5568 95.2386 93.7159C97.8295 91.875 100.92 90.9545 104.511 90.9545C108.148 90.9545 111.261 91.8864 113.852 93.75C116.443 95.6136 118.091 98.1136 118.795 101.25H119.341C120.318 98.1364 122.227 95.6477 125.068 93.7841C127.909 91.8977 131.261 90.9545 135.125 90.9545C140.08 90.9545 144.102 92.5455 147.193 95.7273C150.284 98.8864 151.83 103.227 151.83 108.75V144H135.159V112.568C135.159 109.955 134.489 107.966 133.148 106.602C131.807 105.216 130.068 104.523 127.932 104.523C125.636 104.523 123.83 105.273 122.511 106.773C121.216 108.25 120.568 110.239 120.568 112.739V144H104.545V112.398C104.545 109.966 103.886 108.045 102.568 106.636C101.25 105.227 99.5114 104.523 97.3523 104.523C95.8977 104.523 94.6136 104.875 93.5 105.58C92.3864 106.261 91.5114 107.239 90.875 108.511C90.2614 109.784 89.9545 111.284 89.9545 113.011V144H73.2841Z" fill="white"/>
+</svg>

package/template/src/components/Snippet.js

@@ -0,0 +1,19 @@
+// Welcome-page code block (a `Custom` host component — the escape hatch for anything muten can't express).
+// The snippet lives here in JS so it can contain quotes and { } that a .muten string can't. Delete with
+// the welcome page. Used from home.muten as: Custom Snippet
+const CODE = `screen home
+
+state { count = 0 : number }
+action inc mutates count { count.set(count + 1) }
+
+Page style(padding.lg, gap.md) {
+  Title "Count: {count}"
+  Button "+1" -> inc
+}`;
+
+function mount(el) {
+  const pre = document.createElement('pre');
+  pre.className = 'snippet';
+  pre.textContent = CODE;
+  el.appendChild(pre);
+}

package/template/src/pages/home/home.muten

@@ -1,9 +1,45 @@
-# A page = one .muten file; its folder name (home) is the route target from app.muten.
-# `Page` is the <main> landmark; lay it out with style() tokens, skin it with class("…").
+# The starter welcome page. Skin with class(…) + src/styles.css. Delete it and build your own — or just
+# ask your AI assistant; it has the full muten reference in .claude/. The code sample is a Custom component
+# (src/components/Snippet.js) because a .muten string can't hold the quotes/braces of muten source.
 screen home
 
-Page style(padding.xl, gap.md) {
-  Title "Hello, Muten"
-  Text "Edit src/pages/home/home.muten to build your first page."
-  Text "Add routes in src/app.muten; define your token scale in theme.muten."
+Page class("welcome") {
+  Stack class("wrap") {
+
+    Stack class("hero") {
+      Image "/muten.svg" alt "muten logo" class("logo")
+      Title "muten" class("brand")
+      Text "An AI-first frontend framework." class("tagline")
+      Text "You write small .muten files. muten compiles them to vanilla JS plus fine-grained signals — no virtual DOM, no runtime to ship. The language stays small and analyzable, so an AI can locate and mutate your app cheaply." class("lead")
+    }
+
+    Stack class("stats") {
+      Stack class("stat") { Title "2.8 KB" h3 class("stat-n")  Text "muten ships, gzipped" class("stat-l") }
+      Stack class("stat") { Title "5 to 21x" h3 class("stat-n")  Text "less JS than React, Vue, Svelte" class("stat-l") }
+      Stack class("stat") { Title "0 KB" h3 class("stat-n")  Text "on a static page" class("stat-l") }
+    }
+
+    Stack class("section") {
+      Title "A whole page, in muten" h2 class("h2")
+      Custom Snippet
+      Text "Reactivity is automatic — read a state and only that spot re-renders. No hooks, no effects to wire." class("note")
+    }
+
+    Stack class("section") {
+      Title "Where to go next" h2 class("h2")
+      Stack class("cards") {
+        Stack class("card") { Title "Edit this page" h3 class("card-title")  Text "src/pages/home/home.muten" class("card-text") }
+        Stack class("card") { Title "Add a route" h3 class("card-title")  Text "Map URLs to pages in src/app.muten" class("card-text") }
+        Stack class("card") { Title "Style it" h3 class("card-title")  Text "class(…) plus your CSS in src/styles.css — Tailwind optional" class("card-text") }
+        Stack class("card") { Title "Need React or Svelte?" h3 class("card-title")  Text "Drop a real component in as an island, lazy and code-split" class("card-text") }
+      }
+    }
+
+    Stack class("section") {
+      Title "Your AI already knows muten" h2 class("h2")
+      Text "The full language reference ships in this project under .claude — an AGENTS guide plus a Claude skill. Ask your assistant to build a page; it reads that instead of guessing." class("lead")
+      Text "More Claude skills: docs.claude.com — Claude Code, Skills." class("note")
+    }
+
+  }
 }