create-muten 0.0.9 → 0.0.11

package/README.md

@@ -61,14 +61,20 @@ In an interactive terminal it prompts for a few things (defaults in parentheses)
 |---|---|---|
 | **Project name** | any valid folder name | `muten-app` |
 | **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` |
+| **Styling** | `CSS` / `SCSS` / `Tailwind CSS` / `DaisyUI` (brings Tailwind) | `CSS` |
+| **Add Vercel deploy config?** | `Y` / `n` | `n` |
+| **Desktop app (Tauri)?** | `Y` / `n` | `n` |
 | **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.
+**Styling is one explicit choice** — each is opt-in, nothing is bundled by default: `CSS` (plain) or `SCSS`
+ship no framework; `Tailwind CSS` adds `@tailwindcss/vite` + `@import "tailwindcss"`; `DaisyUI` adds its
+component classes on top (and brings Tailwind). You always style via `class("…")`.
+
+**Targets are independent opt-ins** — web, desktop, both, or neither, from the same `.muten` source:
+- **Vercel** writes a `vercel.json` so muten's real-path routes don't 404 on a hard refresh (SPA fallback to `index.html`).
+- **Tauri** adds `src-tauri/` (a native desktop app — ships the OS webview, *not* a browser) + a `tauri` script:
+  `npm run tauri dev` / `tauri build`. Needs the [Rust toolchain](https://rustup.rs) installed (not auto-installed).
 
 ## Templates (flavors)
 
@@ -110,6 +116,8 @@ create-muten my-app --css --no-install    # just scaffold, decide later
 | `--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`) |
+| `--vercel` | add `vercel.json` (SPA fallback so real-path routes work on Vercel) |
+| `--tauri` | add `src-tauri/` — a native desktop app (needs the Rust toolchain) |
 | `--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

@@ -2,7 +2,7 @@
 // create-muten — scaffold a new Muten app, with modern interactive prompts (@clack/prompts).
 //
 //   npm create muten@latest [name]              (or: npx create-muten)
-//   create-muten [name] [--template basic|routing|full] [--css|--scss] [--tailwind] [--daisyui] [--svelte] [--react] [--pm npm|pnpm|yarn|bun] [--no-install]
+//   create-muten [name] [--template muten|react|svelte] [--css|--scss] [--tailwind] [--daisyui] [--vercel] [--tauri] [--pm npm|pnpm|yarn|bun] [--no-install]
 //
 // Stylesheet (CSS or SCSS) is the base; Tailwind is an optional add-on ON TOP of CSS (it's a styling
 // library, not a stylesheet replacement). Interactive in a TTY; flags / non-TTY make it scriptable.
@@ -15,6 +15,7 @@ import color from 'picocolors';
 
 const SELF = dirname(fileURLToPath(import.meta.url));
 const TEMPLATE = join(SELF, 'template');
+const TAURI_TEMPLATE = join(SELF, 'template-tauri'); // src-tauri/ overlay, copied only when --tauri
 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'];
@@ -53,7 +54,6 @@ const WELCOME_CSS = `
 .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; }
@@ -113,6 +113,25 @@ DaisyUI adds **component classes** on top of Tailwind — use them in \`class("
 \`@plugin "daisyui";\` is already in \`src/styles.css\`. Interactive behavior (toggle a modal/dropdown) you build
 with Muten: \`state\` + \`class(active when isOpen)\` + \`on(click: …)\`.
 `;
+// Tauri = the SAME web build wrapped in a native OS-webview window (no browser bundled). Desktop target.
+const TAURI_NOTE = (pm) => `
+## Desktop app (Tauri)
+This app also ships as a native desktop app via Tauri (\`src-tauri/\`). The SAME \`.muten\` frontend runs in
+an OS-webview window — build the UI exactly like the web app (routing works as-is: the webview runs the SPA,
+no server, no URL bar, no fallback needed).
+- \`${pm} run tauri:dev\` — run the desktop app (opens the native window; hot-reloads the frontend).
+- \`${pm} run tauri:build\` — standalone native installer in \`src-tauri/target/release/bundle/\` (frontend embedded, no server).
+- (\`${pm} run tauri\` alone does nothing — the Tauri CLI needs a subcommand like \`dev\`/\`build\`.)
+- Needs the **Rust toolchain** on the machine (https://rustup.rs) — Tauri compiles a small native shell. Not auto-installed.
+- Custom icon: \`${pm} run tauri icon path/to/logo.png\` regenerates \`src-tauri/icons/\`.
+`;
+
+// Deploy on Vercel: muten routes are real paths (History API), so an unmatched path must fall back to
+// index.html (else a hard refresh of /about 404s). Static assets are served first; only routes rewrite.
+const VERCEL_JSON = `{
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}
+`;
 
 // Which PM launched us? npm/pnpm/yarn/bun set npm_config_user_agent — the idiomatic default.
 const detectPM = () => { const ua = process.env.npm_config_user_agent || ''; return PMS.find((p) => ua.startsWith(p + '/')) || 'npm'; };
@@ -132,13 +151,15 @@ async function main() {
   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 muten|react|svelte] [--css|--scss] [--tailwind] [--daisyui] [--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] [--vercel] [--tauri] [--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('--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 vercel = has('--vercel') ? true : undefined;                            // a vercel.json with the SPA fallback rewrite
+  let tauri = has('--tauri') ? true : undefined;                              // src-tauri/ → native desktop app
   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); }
@@ -156,12 +177,19 @@ async function main() {
       { 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 (!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?', initialValue: false })) : false;
-    if (tailwind && daisyui === undefined) daisyui = keep(await confirm({ message: 'Add DaisyUI? (component classes: btn, card, modal…)', initialValue: false }));
+    if (!style && tailwind === undefined) { // ONE explicit styling choice — each is opt-in, "CSS" = nothing extra
+      const styling = keep(await select({ message: 'Styling', options: [
+        { value: 'css', label: 'CSS', hint: 'plain — no framework, zero deps' },
+        { value: 'scss', label: 'SCSS', hint: 'adds sass' },
+        { value: 'tailwind', label: 'Tailwind CSS', hint: 'utility classes on top of CSS' },
+        { value: 'daisyui', label: 'DaisyUI', hint: 'component classes (btn, card, modal) — brings Tailwind with it' },
+      ] }));
+      style = styling === 'scss' ? 'scss' : 'css';
+      tailwind = styling === 'tailwind' || styling === 'daisyui';
+      daisyui = styling === 'daisyui';
+    }
+    if (vercel === undefined) vercel = keep(await confirm({ message: 'Add Vercel deploy config? (vercel.json — fixes real-path routing on Vercel)', initialValue: false }));
+    if (tauri === undefined) tauri = keep(await confirm({ message: 'Desktop app? (Tauri — native window, ships the OS webview, needs Rust)', initialValue: false }));
   }
   name = name || 'muten-app';
   template = template || 'muten';
@@ -169,6 +197,8 @@ async function main() {
   if (daisyui) tailwind = true;                 // DaisyUI is a Tailwind plugin
   if (tailwind === undefined) tailwind = false;
   if (daisyui === undefined) daisyui = false;
+  if (vercel === undefined) vercel = false;
+  if (tauri === undefined) tauri = false;
   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';
@@ -183,6 +213,7 @@ async function main() {
   cpSync(TEMPLATE, target, { recursive: true });
   const ignore = join(target, '_gitignore');
   if (existsSync(ignore)) renameSync(ignore, join(target, '.gitignore'));
+  if (vercel) writeFileSync(join(target, 'vercel.json'), VERCEL_JSON); // SPA fallback so real-path routes work on Vercel
 
   const pkgPath = join(target, 'package.json');
   const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
@@ -204,10 +235,26 @@ async function main() {
   if (svelte) { addDep({ svelte: '^5.0.0' }); addDev({ '@sveltejs/vite-plugin-svelte': '^7.0.0' }); }
   if (react) { addDep({ react: '^19.0.0', 'react-dom': '^19.0.0' }); addDev({ '@vitejs/plugin-react': '^6.0.0' }); }
   if (svelte || react) appendAgents(ISLANDS_NOTE({ svelte, react }));
+  if (tauri) {                                  // native desktop wrapper around the same web build (dist)
+    cpSync(join(TAURI_TEMPLATE, 'src-tauri'), join(target, 'src-tauri'), { recursive: true });
+    writeFileSync(join(target, 'src-tauri', '.gitignore'), '/target\n/gen/schemas\n'); // npm strips real .gitignore from packages
+    const confPath = join(target, 'src-tauri', 'tauri.conf.json');
+    const conf = JSON.parse(readFileSync(confPath, 'utf8'));
+    conf.productName = name;
+    conf.identifier = `com.muten.${name.replace(/[^a-z0-9]/gi, '').toLowerCase() || 'app'}`; // reverse-DNS, no dashes/underscores
+    conf.app.windows[0].title = name;
+    conf.build.beforeDevCommand = `${pm} run dev`;
+    conf.build.beforeBuildCommand = `${pm} run build`;
+    writeFileSync(confPath, JSON.stringify(conf, null, 2) + '\n');
+    addDev({ '@tauri-apps/cli': '^2.0.0' });
+    // `tauri` alone errors (it needs a subcommand) → ship explicit run scripts so `tauri dev`/`build` are obvious.
+    pkg.scripts = { ...pkg.scripts, tauri: 'tauri', 'tauri:dev': 'tauri dev', 'tauri:build': 'tauri build' };
+    appendAgents(TAURI_NOTE(pm));
+  }
   writeFileSync(join(target, 'vite.config.mjs'), viteConfig({ tailwind, svelte, react })); // composed: muten + chosen plugins
   writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
 
-  const desc = `${template}, ${style}${tailwind ? ' + Tailwind' : ''}${daisyui ? ' + DaisyUI' : ''}`;
+  const desc = `${template}, ${style}${tailwind ? ' + Tailwind' : ''}${daisyui ? ' + DaisyUI' : ''}${vercel ? ' + Vercel' : ''}${tauri ? ' + Tauri' : ''}`;
   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.9",
+  "version": "0.0.11",
   "description": "Scaffold a new Muten app.",
   "repository": {
     "type": "git",
@@ -19,5 +19,5 @@
     "picocolors": "^1.0.1"
   },
   "keywords": ["muten", "create-muten", "scaffold", "starter", "cli", "frontend"],
-  "files": ["index.js", "template", "overlays"]
+  "files": ["index.js", "template", "template-tauri"]
 }

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

@@ -1,6 +1,5 @@
 # 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.
+# ask your AI assistant; it has the full muten reference in .claude/. Pure muten — no JS, no escape hatch.
 screen home
 
 Page class("welcome") {
@@ -19,12 +18,6 @@ Page class("welcome") {
       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") {

package/template-tauri/src-tauri/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "muten-app"
+version = "0.1.0"
+description = "A muten desktop app"
+edition = "2021"
+
+[lib]
+name = "app_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }

package/template-tauri/src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

package/template-tauri/src-tauri/capabilities/default.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "enables the default permissions",
+  "windows": ["main"],
+  "permissions": ["core:default"]
+}

package/template-tauri/src-tauri/src/lib.rs

@@ -0,0 +1,6 @@
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

package/template-tauri/src-tauri/src/main.rs

@@ -0,0 +1,6 @@
+// Prevents an extra console window on Windows in release, do NOT remove!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    app_lib::run()
+}

package/template-tauri/src-tauri/tauri.conf.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "muten-app",
+  "version": "0.1.0",
+  "identifier": "com.muten.app",
+  "build": {
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:5173",
+    "beforeDevCommand": "npm run dev",
+    "beforeBuildCommand": "npm run build"
+  },
+  "app": {
+    "windows": [
+      { "title": "muten-app", "width": 1000, "height": 700 }
+    ],
+    "security": { "csp": null }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}

package/overlays/full/src/app.muten

@@ -1,21 +0,0 @@
-# The app ROOT. `api` is the backend config (one place: base URL + default headers) — every `sources`
-# inherits it. The shell's navbar reads the cart store (global) and shows a live count.
-api {
-  base: "https://fakestoreapi.com"
-}
-
-shell {
-  Header style(row, between, center) class("p-4 shadow bg-white") {
-    Link "Shop" -> / class("text-xl font-bold")
-    Nav "Main" style(row, gap.md, center) {
-      Link "Products" -> /products
-      Span "🛒 {cart.count}" class("font-medium")
-    }
-  }
-  slot
-}
-
-routes {
-  /         -> home
-  /products -> products
-}

package/overlays/full/src/cart.store

@@ -1,9 +0,0 @@
-# An app-global store (any `*.store` under src/). State is shared across pages + the shell, no imports.
-# `get` is a derived value; `action`s are the only way to mutate.
-state { items = [] : list<text> }
-
-get count = items.length
-
-action add mutates items <- id {
-  items.push(id)
-}

package/overlays/full/src/pages/products/products.muten

@@ -1,26 +0,0 @@
-# A real data page: `query` state backed by a `sources` URL (relative → joined to the app's `api.base`).
-# `muten build` fetches it at build and bakes the rows into the HTML (SSG); the runtime then takes over.
-# Clicking "Add" calls the cart store action — the navbar count updates reactively.
-screen products
-
-meta { title "Products" }
-
-entity Product { title text  price text }
-
-state { products = query products : list<Product> }
-
-sources { products: "/products" }
-
-Page style(padding.lg, gap.md) {
-  Title "Products" class("text-2xl font-bold")
-  when products.loading { Text "Loading…" class("opacity-60") }
-  each products as p {
-    Stack style(gap.sm) class("p-4 rounded-lg shadow bg-white") {
-      Text "{p.title}" class("font-semibold")
-      Stack style(row, between, center) {
-        Span "$ {p.price}" class("text-lg")
-        Button "Add to cart" -> cart.add(p.id) class("px-3 py-1 rounded bg-black text-white")
-      }
-    }
-  }
-}

package/overlays/routing/src/app.muten

@@ -1,19 +0,0 @@
-# The app ROOT. A persistent `shell { … slot … }` wraps every page (navbar here); `slot` is where the
-# active page mounts. `routes` maps a real-path URL to a page (the folder under src/pages/).
-shell {
-  Header style(row, between, center) class("nav") {
-    Link "Home" -> /
-    Nav "Main" {
-      Link "About" -> /about
-    }
-  }
-  slot
-  Footer style(padding.md) {
-    Text "Built with Muten"
-  }
-}
-
-routes {
-  /      -> home
-  /about -> about
-}

package/overlays/routing/src/pages/about/about.muten

@@ -1,15 +0,0 @@
-# A second page. `meta { … }` sets the <head> title/description (og:* auto-derived) — applied on
-# navigation and baked into the static HTML at build. This page has no reactivity, so `muten build`
-# pre-renders it to zero-JS HTML (crawlable).
-screen about
-
-meta {
-  title "About"
-  description "About this Muten app."
-}
-
-Page style(padding.lg, gap.md) {
-  Title "About"
-  Text "Static pages compile to zero-JS HTML at build — crawlable and instant."
-  Link "← Home" -> /
-}

package/template/src/components/Snippet.js

@@ -1,19 +0,0 @@
-// 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);
-}