@zvndev/darkmown 0.6.0 → 0.7.0

package/AGENTS.md

@@ -41,7 +41,17 @@ Count: { count }
 :button "Add item" -> cart += {"id": 1, "name": "Sticker"}
 :button "Reset" -> count = 0
 ```
-Button actions are a **fixed whitelist**: `x++`, `x--`, `x += <number>`, `list += <json>`, `x = <json>`. Target must be declared `:state`. Values are JSON literals — they cannot reference loop items or other state. **`:button` is for state actions only** — for a link styled as a button, write raw HTML `<a class="btn" href="…">`.
+Button actions are a **fixed whitelist**: `x++`, `x--`, `x += <number>`, `list += <json>`, `x = <json>`. Target must be declared `:state`. Literal values are JSON. **`:button` is for state actions only** — for a link styled as a button, write raw HTML `<a class="btn" href="…">`.
+
+**Per-row actions (inside a reactive `@loop … into item`):** two actions reference the current row instead of a JSON literal —
+```wd
+@loop products into product
+:button "Add to cart" -> cart += product   ← append a COPY of this row to another :state list
+:::
+@loop cart into line
+:button "Remove" -> cart remove line        ← drop this row from the list being looped
+```
+`cart += product` is the only way to carry a loop item into another list (literals still can't reference rows). `<list> remove <item>`: `<list>` must be the loop's own `:state` source and `<item>` the loop variable (both compile-checked). This is the canonical add-to-cart / remove-line / delete-todo pattern — no `.js` needed. Removal targets the exact row, so it is correct even under a `where` filter.
 
 ### Conditionals
 ```wd

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to Darkmown are documented here. Versions follow [semver](https://semver.org); pre-1.0 minor versions may contain breaking changes.
 
+## 0.7.0 — 2026-06-13
+
+- **Per-row actions in reactive loops.** A `:button` inside `@loop … into item` can now act on its own row — the canonical add-to-cart / remove-line / delete-todo pattern, with no hand-written JavaScript:
+  - `cart += item` appends a **copy** of the current row to another `:state` list. This is the only way to carry a loop item into another list (literal action values still can't reference rows); the copy means adding the same source row twice yields two independent lines.
+  - `<list> remove <item>` removes the current row from the list being looped. `<list>` must be that loop's own `:state` source and `<item>` the loop variable — both validated at compile time.
+  The runtime resolves the clicked row by stamping each reconciled node with its item, so removal targets the exact row and stays correct even when the loop is filtered with `where` (index-based removal would not). Closes the last gap blocking a real store demo.
+- Live demo: the reactive page's filtering section is now a full mini-shop — search products, add to cart, remove lines — all composing on one page.
+
 ## 0.6.0 — 2026-06-13
 
 - **State-driven list filtering — `@loop … where <predicate>`.** Filter any loop with conditions that join via `and` / `or`. Operators: `==` `!=` `<` `<=` `>` `>=` and `contains` (case-insensitive substring). Operands are item paths, declared `:state`, numbers, or `"strings"` — a compile-time whitelist (no expressions, no `eval`; `constructor`/`prototype`/`__proto__` rejected in compiler and runtime). **The predicate decides reactivity:** an item-only predicate filters at build time and the page stays zero-JS; a predicate that reads `:state` compiles to a reactive filtered loop driven by the keyed reconciler (rows are baked in for static JSON sources). This replaces the fragile DOM-toggle escape hatch — the #1 gap surfaced by the agent-eval benchmark.

package/README.md

@@ -101,6 +101,34 @@ Operators: `==` `!=` `<` `<=` `>` `>=`, plus `contains` for case-insensitive sub
 
 `:bind <state>` renders an `<input>` wired two-way to a `:state` value — typing updates the state, and the state reflects back into the field. It accepts `type=` (default `text`), `placeholder=`, `autocomplete=`, and the `required` / `autofocus` flags.
 
+### Editable lists — per-row actions
+
+A `:button` inside a reactive `@loop` can act on its own row. Two row actions exist:
+
+```wd
+:state products = [{"id": 1, "name": "Aurora", "price": 49}]
+:state cart = []
+
+@loop products into product
+::: card
+**{ product.name }** — ${ product.price }
+:button "Add to cart" -> cart += product    <- carry this row into another list
+:::
+@endloop
+
+@loop cart into line
+::: card
+{ line.name }
+:button "Remove" -> cart remove line          <- drop this row from the looped list
+:::
+@endloop
+```
+
+- `cart += <item>` appends a **copy** of the current row to another `:state` list, so adding the same product twice gives two independent lines.
+- `<list> remove <item>` removes the current row from the list being looped. The `<list>` must be that loop's own `:state` source and `<item>` must be the loop variable — both checked at compile time. Removal targets the exact row, so it stays correct even when the loop is filtered with `where`.
+
+That is a full add-to-cart / remove-line flow — and a to-do list with delete — in plain Markdown, no JavaScript.
+
 ## Sections
 
 ```wd

package/docs/spec-alignment.md

@@ -51,6 +51,7 @@ This audit compares the current Darkmown implementation with the original MARROW
 - **Nested `:if` over loop items (v0.5.0):** conditionals nest inside reactive `@loop`, per row. Both fill paths fixed — build-time balanced `matchElement` recursion and runtime `fillItem` recursion.
 - **State-driven list filtering — `@loop … where <predicate>`:** the #1 need surfaced by the agent-eval benchmark. Conditions (`field <op> value`, plus `contains`) join with `and` / `or` over a compile-time-validated whitelist — item paths, declared `:state`, numbers, strings; `constructor`/`prototype`/`__proto__` rejected, no `eval`. The source decides reactivity, matching the loop itself: an item-only predicate filters at build time and stays zero-JS; a predicate that reads `:state` compiles to a reactive filtered loop (rows baked in for static sources). This replaces the fragile DOM-toggle escape hatch with the keyed reconciler.
 - **`:bind <state>`:** two-way `<input>` bound to a `:state` value — the input primitive that powers live search. Accepts `type=`, `placeholder=`, `autocomplete=`, `required`, `autofocus`.
+- **Per-row actions in reactive loops:** a `:button` inside `@loop … into item` can act on its own row — `cart += item` appends a copy of the row to another `:state` list (the only way to carry a loop item into another list), and `list remove item` removes the row from the looped `:state` source (both names compile-checked against the enclosing loop). The runtime resolves the clicked row by stamping each reconciled node with its item, so removal is exact even under a `where` filter. This closes the last "store demo" gap noted in the design memory (per-row `:button` couldn't carry row data); `:if` string-equality remains the only listed gap, now partly covered by `@loop … where`.
 - **`.skin` robustness:** `@media`/`@supports` at-rules wrap nested rules; the `font` shorthand passes through (size-led or containing `/`) while `font <stack>` still aliases to `font-family`; `/* … */` block comments and decorative divider lines are skipped.
 - **Editor tooling:** VS Code extension (`editors/vscode`) ships `.wd` + `.skin` TextMate grammars, snippets, and folding, grammar-tested in CI.
 - **`AGENTS.md`:** a model-facing build guide (shipped in the npm files array), tuned over a 5-round agent-eval benchmark that lifted build quality from 2.78→4.51/5.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zvndev/darkmown",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "publishConfig": {
     "access": "public"

package/site/pages/docs/index.wd

@@ -88,6 +88,21 @@ The predicate decides reactivity exactly like the source does: read only the row
 
 `:bind <state>` renders an `<input>` wired two-way to a `:state` value — type and the list filters as you go.
 
+### Editable lists with per-row actions
+
+A `:button` inside a reactive loop can act on its own row — the basis for carts and to-do lists:
+
+```wd
+@loop products into product
+:button "Add to cart" -> cart += product
+:::
+@loop cart into line
+:button "Remove" -> cart remove line
+:::
+```
+
+`cart += product` appends a copy of the current row to another `:state` list; `cart remove line` removes the current row from the list being looped. Both are checked against the enclosing loop at compile time — no JavaScript.
+
 ## Interpolation
 
 One syntax everywhere: `{ name }` or `{ name.path }`.

package/site/pages/reactive.skin

@@ -60,3 +60,33 @@ ul
 
 .tally-card h3
   color $warm
+
+.card.product
+  display flex
+  align-items center
+  justify-content space-between
+  gap 1rem
+  border 1px solid $line
+  bg $panel
+  padding .6rem 1rem
+  margin .5rem 0
+  radius $radius
+
+.card.product p
+  margin 0
+
+.card.line
+  display flex
+  align-items center
+  justify-content space-between
+  gap 1rem
+  border 1px solid $line
+  padding .5rem 1rem
+  margin .4rem 0
+  radius $radius
+
+.card.line button
+  bg transparent
+  color $warm
+  border 1px solid $line
+  padding .35rem .8rem

package/site/pages/reactive.wd

@@ -69,16 +69,31 @@ Each row picks one of three states from two nested conditionals, all in plain Ma
 `@loop … where` filters a list, and because the predicate reads a `:state` value, the loop re-filters live as you type. `:bind` is the input bound two-way to that state. Type below and watch the list narrow — no event handlers, no JavaScript:
 
 :state products = [{"id": 1, "name": "Aurora Lamp", "price": 49}, {"id": 2, "name": "Briza Fan", "price": 39}, {"id": 3, "name": "Cove Speaker", "price": 89}, {"id": 4, "name": "Dune Mug", "price": 12}, {"id": 5, "name": "Ember Kettle", "price": 64}]
+:state cart = []
 :state q = ""
 
 :bind q placeholder="Search products…"
 
 @loop products into p where p.name contains q
-- **{ p.name }** — ${ p.price }
+::: card .product
+**{ p.name }** — ${ p.price }
+:button "Add to cart" -> cart += p
+:::
 @endloop
 
 The predicate whitelist is compile-time validated — item fields, declared state, numbers, and strings only. An item-only predicate (say `where p.price < 50`) would instead filter at build time and ship zero JavaScript.
 
+### …and an editable cart
+
+A `:button` inside a loop can act on its own row. **Add to cart** carries the row into another list; **Remove** drops a line — a whole add/remove flow with no JavaScript:
+
+@loop cart into line
+::: card .line
+{ line.name } — ${ line.price }
+:button "Remove" -> cart remove line
+:::
+@endloop
+
 ## Section-scoped state
 
 Two sections can each own a state value named `tally` without colliding. Buttons resolve to the nearest scope:

package/src/compiler.js

@@ -705,7 +705,7 @@ function staticUnroll(rows, itemName, bodyLines, ctx) {
 
 function reactiveLoop(key, itemName, bodyLines, ctx, opts = null) {
   ctx.comp.assets.runtime = true;
-  const templateCtx = { ...ctx, loopItem: itemName, scope: createScope(ctx.scope) };
+  const templateCtx = { ...ctx, loopItem: itemName, loopKey: key, scope: createScope(ctx.scope) };
   const templateHtml = compileBody(bodyLines, templateCtx).trim();
 
   let wrapperTag = "div";
@@ -933,17 +933,41 @@ function parseAction(raw, ctx) {
   if (increment) return { op: "inc", target: resolveTarget(increment[1]) };
   const decrement = expression.match(/^([A-Za-z_$][\w$]*)--$/);
   if (decrement) return { op: "dec", target: resolveTarget(decrement[1]) };
+  // Per-row: carry the current loop item into another list — `cart += product`.
+  // Only inside a reactive @loop; the runtime resolves the row from the DOM.
   const add = expression.match(/^([A-Za-z_$][\w$]*)\s*\+=\s*(.+)$/);
   if (add) {
+    const rhs = add[2].trim();
+    if (ctx.loopItem && rhs === ctx.loopItem) {
+      const target = resolveTarget(add[1]);
+      if (!Array.isArray(ctx.comp.state.get(target))) {
+        throw new Error(`Button action "${raw}" needs ${add[1]} to be a :state list (declare it "${add[1]} = []") in ${ctx.file}.`);
+      }
+      return { op: "append-row", target };
+    }
     const target = resolveTarget(add[1]);
-    const value = parseActionLiteral(add[2]);
+    const value = parseActionLiteral(rhs);
     if (Array.isArray(ctx.comp.state.get(target))) return { op: "append", target, value };
     if (typeof value === "number") return { op: "add", target, value };
     throw new Error(`Unsupported button action "${raw}". += with non-number values requires a list state target.`);
   }
+  // Per-row: remove the current row from the list being looped — `todos remove todo`.
+  const remove = expression.match(/^([A-Za-z_$][\w$]*)\s+remove\s+([A-Za-z_$][\w$]*)$/);
+  if (remove) {
+    if (!ctx.loopItem) {
+      throw new Error(`Button action "${raw}" is only valid inside a reactive @loop in ${ctx.file}. Use: :button "Remove" -> list remove item`);
+    }
+    if (remove[2] !== ctx.loopItem) {
+      throw new Error(`Button action "${raw}" must remove the loop item "${ctx.loopItem}" in ${ctx.file}, not "${remove[2]}".`);
+    }
+    if (!ctx.loopKey || resolveStateKey(remove[1], ctx) !== ctx.loopKey) {
+      throw new Error(`Button action "${raw}" must target the :state list being looped (@loop ${remove[1]} into ${ctx.loopItem}) in ${ctx.file}.`);
+    }
+    return { op: "remove", target: ctx.loopKey };
+  }
   const assign = expression.match(/^([A-Za-z_$][\w$]*)\s*=\s*(.+)$/);
   if (assign) return { op: "set", target: resolveTarget(assign[1]), value: parseActionLiteral(assign[2]) };
-  throw new Error(`Unsupported button action "${raw}". Supported actions: count++, count--, count += 1, items += "value", name = "value".`);
+  throw new Error(`Unsupported button action "${raw}". Supported actions: count++, count--, count += 1, items += "value", name = "value", list remove item (in a loop), cart += item (in a loop).`);
 }
 
 function parseActionLiteral(raw) {

package/src/runtime.js

@@ -132,6 +132,7 @@ function render() {
       }
       used.add(key);
       fillItem(node, item);
+      node.__wdItem = item; // let per-row actions resolve which row was clicked
       out.appendChild(node);
     }
     for (const [key, node] of existing) {
@@ -156,6 +157,14 @@ document.addEventListener("input", (event) => {
   render();
 });
 
+// The clicked button's row: the nearest reconciled loop node carries its item.
+function clickedRow(el) {
+  const row = el.closest("[data-wd-loop-key]");
+  const region = el.closest("[data-wd-loop]");
+  if (!row || !region) return null;
+  return { srcKey: region.getAttribute("data-wd-loop"), item: row.__wdItem };
+}
+
 document.addEventListener("click", (event) => {
   const action = event.target.closest("[data-wd-action]");
   if (!action) return;
@@ -169,6 +178,20 @@ document.addEventListener("click", (event) => {
   if (op === "add") state[target] = Number(state[target] ?? 0) + Number(value);
   if (op === "append") state[target] = [...(Array.isArray(state[target]) ? state[target] : []), value];
   if (op === "set") state[target] = value;
+  if (op === "remove") {
+    const row = clickedRow(action);
+    if (row && row.srcKey) state[row.srcKey] = (Array.isArray(state[row.srcKey]) ? state[row.srcKey] : []).filter((x) => x !== row.item);
+  }
+  if (op === "append-row") {
+    const row = clickedRow(action);
+    // Clone the row so each appended line is a distinct object — otherwise adding
+    // the same source row twice yields two identical references and a later
+    // remove (filter by !== ref) would delete both lines.
+    if (row && row.item !== undefined) {
+      const copy = row.item && typeof row.item === "object" ? structuredClone(row.item) : row.item;
+      state[target] = [...(Array.isArray(state[target]) ? state[target] : []), copy];
+    }
+  }
   savePersisted();
   render();
 });