create-muten 0.0.12 → 0.0.14

package/README.md

@@ -1,6 +1,7 @@
-# create-muten
+## ALPHA - STILL ON DEVELOPMENT
+Muten is still under active development. We are currently in the alpha stage and are working on training models with Muten. Please keep in mind that improvements are being made gradually, and version 1.0 has not been released yet.
 
-The official scaffolder for **[Muten](https://www.npmjs.com/package/@muten/core)** — an AI-first
+The official scaffolder for **[Muten](https://www.npmjs.com/package/@muten/core)**: an AI-first
 frontend framework. One command bootstraps a complete, ready-to-run Muten app, so you never copy
 boilerplate by hand.
 
@@ -10,11 +11,11 @@ npm create muten@latest
 
 ## Why this exists
 
-Muten ships as **two** packages — the same split as `vue` ↔ `create-vue`:
+Muten ships as **two** packages - the same split as `vue` ↔ `create-vue`:
 
-- **[`@muten/core`](https://www.npmjs.com/package/@muten/core)** — the engine (compiler + runtime +
+- **[`@muten/core`](https://www.npmjs.com/package/@muten/core)**: the engine (compiler + runtime +
   Vite plugin). Your app installs it as a normal dependency and it stays up to date on its own.
-- **`create-muten`** (this package) — a tiny, **zero-dependency** CLI whose only job is to generate a
+- **`create-muten`** (this package) - a tiny, **zero-dependency** CLI whose only job is to generate a
   new project already wired to the engine: `index.html`, the Vite config, a `theme.muten`, a first
   page and the right `package.json`.
 
@@ -67,36 +68,36 @@ In an interactive terminal it prompts for a few things (defaults in parentheses)
 | **Package manager** | `npm` / `pnpm` / `yarn` / `bun` | the one that launched it |
 | **Install deps and start dev now?** | `Y` / `n` | `Y` |
 
-**Styling is one explicit choice** — each is opt-in, nothing is bundled by default: `CSS` (plain) or `SCSS`
+**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:
+**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:
+- **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)
 
-Every flavor scaffolds the **same** welcome page and the same `.muten` workflow — the only difference is
+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 |
 |---|---|
-| **muten** | pure muten — the AI-first DSL, zero framework runtime |
+| **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"` →
+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 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("…")` —
+keeps the default scale. **DaisyUI** adds component classes (`btn`, `card`, `modal`) usable in `class("…")` -
 pure classes, no React; behavior is Muten state + `on()`.
 
-If you accept the last prompt it runs `<pm> install` followed by `<pm> run dev` — your app is live in a
+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.
 
 ## Non-interactive (CI / scripts)
@@ -117,9 +118,9 @@ create-muten my-app --css --no-install    # just scaffold, decide later
 | `--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) |
+| `--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 |
+| `--no-install` | scaffold only - don't install or start the dev server |
 | `--help` | print usage and exit |
 | `--version` | print the version and exit |
 
@@ -129,7 +130,7 @@ A minimal, conventional Muten app:
 
 ```
 my-app/
-├─ index.html              # entry — loads /src/app.muten through the Vite plugin
+├─ index.html              # entry - loads /src/app.muten through the Vite plugin
 ├─ vite.config.mjs         # the @muten/core Vite plugin (dev server, HMR, routing)
 ├─ theme.muten             # your design tokens: spacing, fonts, weights, breakpoints
 ├─ package.json            # depends on @muten/core + vite
@@ -137,7 +138,7 @@ my-app/
    ├─ app.muten            # the ROOT: routes (+ an optional persistent shell)
    ├─ styles.css           # your look (.scss if you chose SCSS)
    └─ pages/
-      └─ home/home.muten   # a page — the folder name is its route
+      └─ home/home.muten   # a page - the folder name is its route
 ```
 
 There is **no hand-written `main.js`**: the Vite plugin compiles `src/app.muten` into the app's entry,
@@ -145,16 +146,26 @@ so the whole app is `.muten` from the first line.
 
 ## What you can build
 
-A muten app reaches the whole web platform through bounded escapes — reach for the **lowest tier that works**:
-
-- **Pure muten** — CRUD / SaaS / catalog / dashboard / content: pages, routing, `state`/`store`, `query` over
-  REST, `Form` + validation, `DataTable`, `when`/`each`, SSG + SEO. The declarative 80%, zero extra deps.
-- **muten + the platform** *(no framework runtime)* — native HTML (`<input type="date">`, `<dialog>`) + `class()`,
+**Honest framing first.** muten isn't trying to beat React/Vue/Svelte at being general-purpose, they win there.
+muten wins when an **AI builds and maintains the app**: the whole language fits in context, a compiler (`muten
+check`) catches mistakes in milliseconds without a browser, edits stay tiny, and almost no JS ships. Best fit: the
+declarative 80% - CRUD, dashboards, catalogs, content, internal tools. For the rest, you don't fight it - you
+**couple in other tech** through bounded escapes. Reach for the **lowest tier that works**:
+
+- **Pure muten**: CRUD / SaaS / catalog / dashboard / content: pages, routing, `state`/`store` (with page→store
+  action composition), `query` over REST, `Form` (text/number/email/bool/enum + validation), `DataTable`,
+  `when`/`each`, SSG + SEO, and the bounded **list toolkit**: inline objects, `patch` in-place edit, `each…where`
+  filter, aggregates (`sum`/`count`/`avg`/`min`/`max`), `sort`/`sortDesc`. The declarative 80%, zero extra deps.
+- **muten + the platform** *(no framework runtime)* - native HTML (`<input type="date">`, `<dialog>`) + `class()`,
   CSS libs (Tailwind / DaisyUI), **vanilla JS via `Custom`** (charts, maps, date-pickers, rich-text, grids),
   `use fmt from "./lib.ts"` for any JS logic. Almost every "hard widget" lands here, *without React*.
-- **Svelte / React island** (`--svelte` / `--react`) — only when the component *is* a framework component
+- **Svelte / React island** (`--svelte` / `--react`) - only when the component *is* a framework component
   (shadcn/ui, a React-only lib). Ships that runtime, lazy + code-split. The narrow last resort.
 
+**Deploy, honestly:** `npm run dev` runs every tier. For production, pure-muten static content can ship via
+`muten build` (zero-JS HTML); the moment you use `use`/islands/shared cross-page state, deploy with a normal
+`vite build` (it bundles them - the static build doesn't). Most real apps use `vite build`.
+
 Full reference (every primitive, the three tiers, the roadmap): [`@muten/core`](https://www.npmjs.com/package/@muten/core).
 
 > **Status: pre-1.0.** The core (language, compiler, CLI, Vite plugin, extension, islands) is solid; the
@@ -168,10 +179,10 @@ Full reference (every primitive, the three tiers, the roadmap): [`@muten/core`](
 ## Cross-platform
 
 `create-muten` is a Node CLI (not a shell script), so the **exact same command** works on **Windows,
-macOS and Linux** — npm generates the right launcher on each OS.
+macOS and Linux**: npm generates the right launcher on each OS.
 
 ## Links
 
-- Engine — [`@muten/core`](https://www.npmjs.com/package/@muten/core)
-- Source — [github.com/karttofer/create-muten](https://github.com/karttofer/create-muten)
-- License — MIT
+- Engine - [`@muten/core`](https://www.npmjs.com/package/@muten/core)
+- Source - [github.com/karttofer/create-muten](https://github.com/karttofer/create-muten)
+- License - MIT

package/package.json

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

package/template/.claude/skills/muten/SKILL.md

@@ -15,7 +15,7 @@ A page with no reactivity compiles to plain zero-runtime HTML; a reactive one sh
 - **`src/app.muten` is the entry.** `index.html` loads it; the plugin boots it. **Never create `main.js`** or a `<script>` bootstrap.
 - Primitives are **PascalCase** (`Stack`, `Text`); keywords/control flow are **lowercase** (`when`, `each`, `state`).
 - `style(...)` = layout/typography **tokens** (Muten builds STRUCTURE). `class("...")` = **look** (your CSS / Tailwind); toggle reactively with `class(active when isOpen)`. Muten ships no skin.
-- `@name` = a state reference. `{expr}` = interpolation inside any string: `Text "Hi, {user.name}"`.
+- `@name` = a state reference. `{expr}` = interpolation inside a Text/label/path string: `Text "Hi, {user.name}"`. (NOT inside `class("…")` — for a dynamic class use `class(name when cond)`.)
 - Each page has **one root node**. Reactivity is automatic: reading a state in interpolation / `when` / `each` re-renders just that spot.
 
 ## 1. What you CAN install / use
@@ -85,10 +85,11 @@ const TAX = 0.21                 # compile-time immutable scalar (inlined, never
 
 action add mutates users <- item {   # mutation; `mutates` lists what it may change (enforced)
   users.push(item)               # ops: push | set | reset | remove
+  users.push({ name: item.name, role: "admin" })   # inline object literal — build a record inline
   if item.vip { rating.set(5) } else { rating.set(1) }   # if/else = the only branching in actions
 }
 
-mock    { listUsers: [ { name: "Ana", role: admin } ] }          # mock data for a query
+mock    { listUsers: [ { name: "Ana", role: "admin" } ] }        # mock data (quote text/enum values, like everywhere)
 sources { listUsers: { url: "https://api…", at: "results" } }    # real data source for a query
 ```
 
@@ -233,10 +234,17 @@ Responsive: prefix any token with a breakpoint → `md:cols.2`, `lg:cols.4` (`sm
 - `query` state is async → render with `when @x.loading { … }`, then use `@x.data`.
 - Mutate **only** through `action`s, and only the state in `mutates` (the linter enforces it):
   - `list.push(x)` (append; auto-fills uuid fields) · `s.set(v)` · `s.reset()` · `list.remove(x => x.id == id)`
+  - **Inline object literal** (build a record without leaving Muten): `posts.push({ title: draft.title, body: draft.body })`, `draft.set({ name: c.name })`. Keys must be real fields of the entity.
+  - **Edit / move / toggle an item in place**: `list.patch(x => x.id == c.id, { done: not x.done })` — position-preserving, list ONLY the changed fields. This is the right tool for toggle/update/move (NOT remove+push, which reorders the item to the end).
   - There is no `toggle`: `flag.set(not flag)`.
-- Control flow in the tree: `when <expr> { … }` (mount/unmount), `each <list> as item { … }` (item is a scope var).
+- Control flow in the tree: `when <expr> { … }` (mount/unmount), `each <list> as item { … }` (item is a scope var). Filter a list with `where`: `each posts as p where p.published { … }` renders only matching items.
 - Expressions: `== != < > <= >=`, `and or not`, `contains` (case-insensitive substring / list membership),
   `+ - * /`, ternary `c ? a : b`, parentheses, refs (`user.name`, `cart.total`, `$item.x`).
+- **List aggregates** (method + lambda, like `remove`) — for a cart total / KPI count / "N active", NO JS needed:
+  - `lines.sum(l => l.price * l.qty)` · `todos.count(t => not t.done)` · `reviews.avg(r => r.score)` · `min/max(x => …)`.
+  - `.length` is the count-all; `count(x => cond)` is the filtered count. Works in interpolation, `when`, and store `get`.
+- **Sort a list** (same method+lambda shape; returns a sorted COPY): `each contacts.sort(c => c.name) as c { … }` (ascending) ·
+  `each scores.sortDesc(s => s.points) as s { … }` (descending). Use in `each` or a store `get`.
 
 ## 9. Stores — app-global state
 A `.store` file = state shared across pages, **no prop drilling**. The file name is the domain.
@@ -249,6 +257,8 @@ effect { /* runs whenever the store state it reads changes */ }
 ```
 Use it from any page/shell by name: `when ui.menuOpen { … }`, `Button "☰" -> ui.toggleMenu`. The Vite
 plugin auto-detects every `.store` file. `get` = memoized; `effect` = reactive side-effect (Angular-style).
+**A page action can CALL a store action** (composition) — `action add <- d { cart.add(d)  draft.reset() }` does
+store work AND local work in one handler (e.g. add to the store, then clear the form). Wire it with `Form submit add`.
 
 ## 10. Routing — how it works
 `src/app.muten` maps URLs to pages. It uses **real paths** (`/about`, History API — client-side nav, no

package/template/package.json

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