create-muten 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present, Muten
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# create-muten
+
+Scaffold a new [Muten](https://www.npmjs.com/package/muten) app.
+
+```sh
+npm create muten@latest      # or: npx create-muten
+```
+
+It prompts for the **project name**, the **stylesheet** (CSS/SCSS) and the **package manager**
+(default = the one you invoked it with), then scaffolds and — unless you decline — runs
+`<pm> install` + `<pm> run dev`. CI flags: `--css|--scss`, `--pm <npm|pnpm|yarn|bun>`, `--no-install`.
+
+The engine (`@muten/core`) is a separate package the app installs as a dependency — the same split as
+`create-vue` ↔ `vue`. It's a Node CLI (not a shell script), so it behaves the same on Windows and macOS.

package/index.js

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+// create-muten — scaffold a new Muten app. Zero runtime deps (Node built-ins only).
+//
+//   npm create muten@latest [name]              (when published to npm)
+//   npx github:karttofer/create-muten [name]    (from GitHub, not yet public)
+//   create-muten [name] [--css|--scss] [--pm npm|pnpm|yarn|bun] [--no-install]
+//
+// Interactive in a TTY (prompts for name, stylesheet, package manager); flags / non-TTY make it
+// scriptable. The package manager defaults to the one that invoked us. Then it scaffolds and,
+// unless --no-install, runs `<pm> install` + `<pm> run dev`.
+import { cpSync, existsSync, readFileSync, writeFileSync, renameSync } from 'node:fs';
+import { join, dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createInterface } from 'node:readline/promises';
+import { spawnSync } from 'node:child_process';
+
+const SELF = dirname(fileURLToPath(import.meta.url));
+const TEMPLATE = join(SELF, 'template');
+const PKG = JSON.parse(readFileSync(join(SELF, 'package.json'), 'utf8'));
+const PMS = ['npm', 'pnpm', 'yarn', 'bun'];
+
+const BANNER = [
+  '',
+  '                  _',
+  '  _ __ ___  _   _| |_ ___ _ __',
+  " | '_ ` _ \\| | | | __/ _ \\ '_ \\",
+  ' | | | | | | |_| | ||  __/ | | |',
+  ' |_| |_| |_|\\__,_|\\__\\___|_| |_|',
+  '',
+  ' AI-first frontend framework',
+  '',
+].join('\n');
+
+// Which PM launched us? npm/pnpm/yarn/bun all set npm_config_user_agent (e.g. "pnpm/8.6 ...").
+// Detecting it is what create-vue/vite do — the idiomatic default, no guessing.
+const detectPM = () => {
+  const ua = process.env.npm_config_user_agent || '';
+  return PMS.find((p) => ua.startsWith(p + '/')) || 'npm';
+};
+
+// Safe folder name: starts alphanumeric, then [A-Za-z0-9._-]. Blocks path traversal / odd input.
+const validName = (n) => /^[A-Za-z0-9][A-Za-z0-9._-]*$/.test(n);
+const die = (msg) => { console.error(msg); process.exit(1); };
+
+async function main() {
+  // args: one positional name + optional flags (so the CLI is also scriptable / CI-friendly)
+  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; }
+  console.log(BANNER);
+  if (has('-h') || has('--help')) { console.log('  Usage: create-muten [name] [--css|--scss] [--pm npm|pnpm|yarn|bun] [--no-install]\n'); return; }
+
+  let name = argv.filter((a, i) => !a.startsWith('-') && argv[i - 1] !== '--pm')[0];
+  let style = has('--scss') ? 'scss' : has('--css') ? 'css' : undefined;
+  let pm = val('--pm');
+  let install = has('--no-install') ? false : undefined;
+
+  if (name && !validName(name)) die(`Invalid name: "${name}" (letters, digits, . _ -)`);
+  if (pm && !PMS.includes(pm)) die(`Unknown package manager: "${pm}" (${PMS.join(', ')})`);
+
+  const dpm = detectPM();
+
+  // Prompt only with a real TTY — piped/CI input drops lines through readline, so there we use
+  // flags + defaults instead of hanging on a prompt.
+  if (process.stdin.isTTY) {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    const ask = async (q, def) => (await rl.question(q)).trim() || def;
+    const pick = async (q, opts, def) => {
+      for (;;) {
+        const v = (await ask(q, def)).toLowerCase();
+        if (opts.includes(v)) return v;
+        console.log(`  Choose: ${opts.join(', ')}.`);
+      }
+    };
+    while (!name) {
+      const a = await ask('Project name: (muten-app) ', 'muten-app');
+      if (validName(a)) name = a; else console.log('  Letters, digits, . _ - (start alphanumeric).');
+    }
+    if (!style) style = await pick('Stylesheet? [css/scss] (css) ', ['css', 'scss'], 'css');
+    if (!pm) pm = await pick(`Package manager? [${PMS.join('/')}] (${dpm}) `, PMS, dpm);
+    if (install === undefined) install = (await ask('Install deps and start the dev server now? [Y/n] ', 'y')).toLowerCase() !== 'n';
+    rl.close();
+  }
+  name = name || 'muten-app';
+  style = style || 'css';
+  pm = pm || dpm;
+  if (install === undefined) install = false;
+
+  const target = resolve(name);
+  if (existsSync(target)) die(`"${name}" already exists.`);
+
+  // scaffold from ./template
+  cpSync(TEMPLATE, target, { recursive: true });
+  const ignore = join(target, '_gitignore');                        // npm strips a real .gitignore on publish
+  if (existsSync(ignore)) renameSync(ignore, join(target, '.gitignore'));
+  if (style === 'scss') renameSync(join(target, 'src', 'styles.css'), join(target, 'src', 'styles.scss')); // plugin auto-detects
+
+  const pkgPath = join(target, 'package.json');
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+  pkg.name = name;
+  if (style === 'scss') pkg.devDependencies = { ...(pkg.devDependencies || {}), sass: '^1.101.0' };
+  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+
+  console.log(`\n  Created ${name}  (${style}, ${pm})\n`);
+
+  if (!install) { console.log(`  cd ${name}\n  ${pm} install\n  ${pm} run dev\n`); return; }
+
+  // PMs are .cmd shims on Windows → spawn needs shell:true to find them.
+  const run = (a) => spawnSync(pm, a, { cwd: target, stdio: 'inherit', shell: process.platform === 'win32' });
+  if (run(['install']).status === 0) run(['run', 'dev']);
+}
+
+main();

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "create-muten",
+  "version": "0.0.1",
+  "description": "Scaffold a new Muten app.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/karttofer/create-muten.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-muten": "index.js"
+  },
+  "keywords": ["muten", "create-muten", "scaffold", "starter", "cli", "frontend"],
+  "files": ["index.js", "template"]
+}

package/template/_gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Muten app</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/app.muten"></script>
+</body>
+</html>

package/template/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "muten-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "muten lint"
+  },
+  "dependencies": {
+    "@muten/core": "^0.0.1",
+    "vite": "^8.0.16"
+  }
+}

package/template/src/app.muten

@@ -0,0 +1,6 @@
+# The app ROOT — the single source of truth the AI reads first.
+# `routes` maps a URL to a page (the folder under src/pages/). Add a persistent navbar/footer by
+# wrapping a `shell { … slot … }` around it; a `slot`-only shell (the default) just mounts the page.
+routes {
+  / -> home
+}

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

@@ -0,0 +1,9 @@
+# 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("…").
+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."
+}

package/template/src/styles.css

@@ -0,0 +1,9 @@
+/* Your look. Muten ships STRUCTURE (semantic tags) + LAYOUT (style tokens); the LOOK lives here,
+   referenced from .muten via class("…"). This base reset is all a fresh app needs to start. */
+* { box-sizing: border-box; }
+body { margin: 0; font: 15px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #111; }
+h1, h2, h3, h4, h5, h6, p { margin: 0; }
+h1 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
+.stack { display: flex; flex-direction: column; } /* the class Stack and column layouts emit */
+img { max-width: 100%; display: block; }
+a { color: inherit; text-decoration: none; }

package/template/theme.muten

@@ -0,0 +1,8 @@
+# The project's token SCALE — the values style() resolves against (the engine ships none).
+# Add/rename steps freely; the linter validates tokens against this.
+theme {
+  space       { xs "4px"  sm "8px"  md "16px"  lg "24px"  xl "32px" }
+  font        { sm "13px"  md "15px"  lg "20px"  xl "28px" }
+  weight      { medium "500"  bold "700" }
+  breakpoints { sm "640px"  md "768px"  lg "1024px" }
+}

package/template/vite.config.mjs

@@ -0,0 +1,5 @@
+import muten from '@muten/core/vite-plugin-muten.js';
+
+export default {
+  plugins: [muten()], // theme.muten is auto-loaded; everything else stays .muten
+};