create-muten 0.0.11 → 0.0.13

package/README.md

@@ -1,4 +1,5 @@
-# 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
 frontend framework. One command bootstraps a complete, ready-to-run Muten app, so you never copy
@@ -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**:
+**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`, `query` over
-  REST, `Form` + validation, `DataTable`, `when`/`each`, SSG + SEO. The declarative 80%, zero extra deps.
+- **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
   (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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-muten",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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.8"
+    "@muten/core": "^0.0.10"
   },
   "devDependencies": {
     "vite": "^8.0.16"