@zvndev/darkmown 0.4.0 → 0.6.0

package/site/pages/docs/index.wd

@@ -61,6 +61,33 @@ The source decides how the loop behaves:
 
 Loops nest, and `{ card.title }` style dotted paths reach into each row.
 
+### Filtering with `where`
+
+Add `where <predicate>` to filter a loop. Conditions join with `and` / `or`:
+
+```wd
+@loop /products.json into p where p.featured == true and p.price < 80
+- { p.name }
+@endloop
+```
+
+Operators are `==` `!=` `<` `<=` `>` `>=` and `contains` (case-insensitive substring). Operands are item fields, declared `:state`, numbers, or `"strings"` — a validated whitelist, never arbitrary code.
+
+The predicate decides reactivity exactly like the source does: read only the row and the filter runs at build time (zero JS); read a `:state` value and the loop re-filters live. Pair it with `:bind` for a search box in pure Markdown:
+
+```wd
+:state products = [{"id":1,"name":"Aurora Lamp"},{"id":2,"name":"Briza Fan"}]
+:state q = ""
+
+:bind q placeholder="Search"
+
+@loop products into p where p.name contains q
+- { p.name }
+@endloop
+```
+
+`:bind <state>` renders an `<input>` wired two-way to a `:state` value — type and the list filters as you go.
+
 ## Interpolation
 
 One syntax everywhere: `{ name }` or `{ name.path }`.
@@ -75,7 +102,7 @@ One syntax everywhere: `{ name }` or `{ name.path }`.
 
 ## Reactive directives
 
-Reactive pages opt into `/__wd/runtime.js` (under 1 KB gzipped). Static pages do not.
+Reactive pages opt into `/__wd/runtime.js` (~2 KB gzipped, under a CI-enforced 5 KB budget). Static pages do not.
 
 ```wd
 :state count = 0
@@ -107,7 +134,7 @@ Directive actions are intentionally narrow and compile-time checked. Arbitrary J
 - `:form into name` captures submits straight into state — no backend. `:form action="/url"` emits a plain native form with zero JS instead.
 - `:input field placeholder="…" required` and `:submit "Label"` build the form body.
 - `:state cart = [] persist` survives reloads via localStorage.
-- `:if item.path` works inside reactive loops for per-row branches.
+- `:if item.path` works inside reactive loops for per-row branches, and conditionals nest — an inner `:if` resolves after the outer branch, staying reactive.
 - Reactive pages expose `window.wd` (`get`, `set`, `state`, `render`) so colocated `.js` can do anything directives can't. Section state is addressed as `sectionId:name`.
 
 See it all live on the [Data & Forms page](/data/).
@@ -120,6 +147,6 @@ See it all live on the [Data & Forms page](/data/).
 
 ## Spec status
 
-The implementation is faithful to the original core thesis: Markdown-first authoring, no component ceremony, zero runtime on static pages, and tiny direct-DOM reactivity only when declared. `:fetch`, `:form`, `:session`, `:cart`, and server-driven fragments remain roadmap work — see `docs/spec-alignment.md` in the package for the full audit.
+The implementation is faithful to the original core thesis: Markdown-first authoring, no component ceremony, zero runtime on static pages, and tiny direct-DOM reactivity only when declared. `:fetch`, `:form` (including server round-trips), `:computed`, and `persist` are all shipped and live — try them on the [Data & Forms page](/data/). Still on the roadmap: a first-party server runtime (`site/api/`), HTML-fragment swaps, and nested `:if` over loop items. See `docs/spec-alignment.md` in the package for the full audit.
 
 </main>

package/site/pages/index.wd

@@ -1,5 +1,6 @@
 ---
-title: Darkmown
+title: Darkmown — Markdown that runs
+description: Build full websites in plain Markdown. Routing, state, server calls, includes, and reactive islands — no JavaScript or CSS required. Your docs and your code are all just text.
 ---
 
 @include /nav.wd
@@ -7,25 +8,36 @@ title: Darkmown
 <main>
 
 <section class="hero">
-  <p class="eyebrow">Markdown-native framework</p>
+  <p class="eyebrow">The Markdown framework</p>
 
-# Darkmown
+# Markdown that runs
 
-Markdown pages that compile into fast, mostly-static websites, with tiny reactive islands only where the document asks for them.
+Not just pages — **full websites**. Routing, state, server calls, embeds, and reactive islands, all from plain Markdown files. No JavaScript or CSS required. Your docs and your code are all just text.
 
-<a class="btn primary" href="/docs/">Read the docs</a>
-<a class="btn" href="/reactive/">Try reactivity</a>
+<a class="btn primary" href="/app/">See a whole app in one file</a>
+<a class="btn" href="/docs/">Read the docs</a>
 </section>
 
-:note "Two formats, one rule: .md stays plain CommonMark forever, and renaming to .wd is what unlocks directives, includes, loops, and state."
+:note "Static pages ship zero JavaScript. The moment a page asks for reactivity, one ~2 KB runtime loads — never before. JS optional, CSS optional, always."
+
+## A whole framework, in text
+
+Everything a site needs, expressed as Markdown directives. No components, no config, no JSX, no special files:
+
+- **Routing** — folders are routes. Drop a file in, it's a page. Prefix with `.` or `-` to hide it.
+- **State & reactivity** — `:state`, `:button`, `:if`, and keyed `@loop`s patch the DOM directly. No virtual DOM.
+- **Server calls** — `:fetch` pulls JSON into state; `:form action=` round-trips to any backend and degrades to a native POST without JS.
+- **Composition** — `@include` embeds one Markdown file into another, passing values down Liquid-style.
+- **Styling, optional** — colocate a `.skin` file for design tokens, or ship none and let the browser default.
 
 ## What to try
 
-:try "Open the docs route, a .wd page full of includes" href="/docs/"
-:try "Open a plain .md page and see directives stay inert" href="/markdown/"
-:try "Open the reactive page: state, keyed loops, scoped sections" href="/reactive/"
-:try "Open the data page: :fetch, forms into state, persistence" href="/data/"
-:try "Open a hidden route and confirm it 404s" href="/-draft/"
+:try "A whole live app in one .wd file: fetch, loops, nested ifs, a form" href="/app/"
+:try "The docs route — a .wd page built from includes" href="/docs/"
+:try "A plain .md page where directives stay inert text" href="/markdown/"
+:try "Reactive page: state, keyed loops, scoped sections" href="/reactive/"
+:try "Data page: fetch, forms, server round-trips, persistence" href="/data/"
+:try "A hidden route, to confirm it 404s" href="/-draft/"
 
 ## Loops that read like prose
 
@@ -47,15 +59,19 @@ This button is powered by `site/pages/index.js`, discovered by matching the page
 
 <button class="pulse-button" data-wd-demo>Script is waiting</button>
 
+<span id="deploy"></span>
+
 ## Deploy in one click
 
-This repo doubles as a template — `npm run build` emits a plain static `dist/`, so it deploys anywhere that serves files:
+`npm run build` emits a plain static `dist/` — no server, no special runtime — so it deploys anywhere that serves files. This very site is a Darkmown build:
 
 <a class="btn primary" href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FZVN-DEV%2Fdarkmown">Deploy to Vercel</a>
 <a class="btn" href="https://deploy.workers.cloudflare.com/?url=https%3A%2F%2Fgithub.com%2FZVN-DEV%2Fdarkmown">Deploy to Cloudflare</a>
 <a class="btn" href="https://github.com/ZVN-DEV/darkmown">Star on GitHub</a>
 
-## Sprint board
+## Built in the open
+
+Darkmown itself was built by a small agent team. The board below is a live `@loop` over real data — itself a demo of the framework rendering this page:
 
 :sprint min=4 max=6 roles="PM, Development, Research, Testing, Review"
 

package/site/pages/reactive.wd

@@ -39,6 +39,46 @@ The same `@loop` that unrolls static data also drives reactive lists. Items are
 
 :button "Add todo" -> todos += {"id": 3, "title": "Live compile", "owner": "Testing"}
 
+## Conditionals inside a loop, nested
+
+`:if` works per row, and conditionals nest — the inner branch is decided after the outer one, for every item, and stays reactive. Add a "done" task and watch which badge each row shows:
+
+:state tasks = [{"id": 1, "title": "Draft the spec", "done": true, "blocked": false}, {"id": 2, "title": "Wire the runtime", "done": false, "blocked": true}, {"id": 3, "title": "Write the demo", "done": false, "blocked": false}]
+
+@loop tasks into task
+::: card .task-row
+**{ task.title }** —
+:if task.done
+done ✓
+:else
+:if task.blocked
+blocked ✗
+:else
+in progress …
+:endif
+:endif
+:::
+@endloop
+
+:button "Add a finished task" -> tasks += {"id": 4, "title": "Ship it", "done": true, "blocked": false}
+
+Each row picks one of three states from two nested conditionals, all in plain Markdown — no component, no ternary, no JavaScript.
+
+## Live filtering — search in pure Markdown
+
+`@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 q = ""
+
+:bind q placeholder="Search products…"
+
+@loop products into p where p.name contains q
+- **{ p.name }** — ${ p.price }
+@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.
+
 ## 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

@@ -10,6 +10,14 @@ const pageIncludeExtensions = [".md", ".wd"];
 export function compilePage(file, context) {
   const compiled = compileDocument(file, context);
   const title = compiled.meta.title || "Darkmown";
+  const description = compiled.meta.description || "";
+  const descriptionTag = description
+    ? `\n  <meta name="description" content="${escapeHtml(description)}">
+  <meta property="og:title" content="${escapeHtml(title)}">
+  <meta property="og:description" content="${escapeHtml(description)}">
+  <meta property="og:type" content="website">
+  <meta name="twitter:card" content="summary">`
+    : "";
   const favicon = "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Crect%20width='32'%20height='32'%20rx='6'%20fill='%2318221d'/%3E%3Ctext%20x='16'%20y='23'%20text-anchor='middle'%20font-family='Georgia,serif'%20font-size='19'%20font-weight='bold'%20fill='%23f7f3ea'%3ED%3C/text%3E%3C/svg%3E";
   const cssLinks = [...compiled.assets.skins].map((href) => `<link rel="stylesheet" href="${href}">`).join("\n");
   const scriptSrcs = compiled.assets.runtime ? ["/__wd/runtime.js", ...compiled.assets.scripts] : [...compiled.assets.scripts];
@@ -26,7 +34,7 @@ export function compilePage(file, context) {
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>${escapeHtml(title)}</title>
+  <title>${escapeHtml(title)}</title>${descriptionTag}
   <link rel="icon" href="${favicon}">
   ${cssLinks}${transitions}
 </head>
@@ -170,6 +178,11 @@ function compileBody(lines, ctx) {
       out.push(handleInput(line, ctx));
       continue;
     }
+    if (/^:bind\s/.test(line)) {
+      flush();
+      out.push(handleBind(line, ctx));
+      continue;
+    }
     if (/^:submit\s/.test(line)) {
       flush();
       out.push(handleSubmit(line, ctx));
@@ -500,6 +513,38 @@ function handleInput(line, ctx) {
   return `<input type="${escapeHtml(type)}" ${attrs.join(" ")}>`;
 }
 
+// :bind <state> [placeholder="…"] [type=…] — a live two-way input bound to a
+// declared :state. Updates state on every keystroke; reflects state back when
+// not focused. The state must be declared first (with :state).
+function handleBind(line, ctx) {
+  const match = line.match(/^:bind\s+([A-Za-z_$][\w$]*)\s*(.*)$/);
+  if (!match) throw new Error(`Malformed :bind in ${ctx.file}: ${line}. Use: :bind query placeholder="Search"`);
+  const key = resolveStateKey(match[1], ctx);
+  if (!key) {
+    throw new Error(`:bind ${match[1]} in ${ctx.file} has no matching state. Declare it first: :state ${match[1]} = ""`);
+  }
+  ctx.comp.assets.runtime = true;
+  let type = "text";
+  const attrs = [];
+  const re = /([A-Za-z-]+)=("[^"]*"|\S+)|([A-Za-z-]+)/g;
+  for (const token of (match[2] || "").matchAll(re)) {
+    if (token[3]) {
+      if (!["required", "autofocus"].includes(token[3])) throw new Error(`Unknown :bind flag "${token[3]}" in ${ctx.file}`);
+      attrs.push(token[3]);
+      continue;
+    }
+    const value = stripQuotes(token[2]);
+    if (token[1] === "type") { type = value; continue; }
+    if (!["placeholder", "autocomplete"].includes(token[1])) {
+      throw new Error(`Unknown :bind attribute "${token[1]}" in ${ctx.file}`);
+    }
+    attrs.push(`${token[1]}="${escapeHtml(value)}"`);
+  }
+  const initial = ctx.comp.state.get(key);
+  const valueAttr = initial === undefined || initial === null ? "" : ` value="${escapeHtml(String(initial))}"`;
+  return `<input type="${escapeHtml(type)}" data-wd-bind-input="${key}"${valueAttr} ${attrs.join(" ")}>`;
+}
+
 function handleSubmit(line, ctx) {
   const match = line.match(/^:submit\s+"([^"]+)"\s*$/);
   if (!match) throw new Error(`Malformed :submit in ${ctx.file}: ${line}. Use: :submit "Label"`);
@@ -530,9 +575,6 @@ function handleIf(line, truthyLines, falsyLines, ctx) {
   if (ctx.loopItem && head === ctx.loopItem) {
     const truthy = compileBody(truthyLines, ctx).trim();
     const falsy = compileBody(falsyLines, ctx).trim();
-    if (truthy.includes("data-wd-each-if") || falsy.includes("data-wd-each-if")) {
-      throw new Error(`Nested :if over loop items is not supported yet (${ctx.file})`);
-    }
     const rest = segs.slice(1).join(".");
     const pathAttr = ` data-wd-path="${escapeHtml(rest)}"`;
     return `<span data-wd-each-if${pathAttr}><template data-wd-if-true>${truthy}</template><template data-wd-if-false>${falsy}</template><span data-wd-each-if-out></span></span>`;
@@ -553,16 +595,17 @@ function handleIf(line, truthyLines, falsyLines, ctx) {
 }
 
 function handleLoop(line, bodyLines, ctx) {
-  const match = line.match(/^@loop\s+(.+?)\s+into\s+([A-Za-z_$][\w$]*)\s*$/);
-  if (!match) throw new Error(`Malformed @loop in ${ctx.file}: ${line}. Use: @loop <things> into <thing>`);
+  const match = line.match(/^@loop\s+(.+?)\s+into\s+([A-Za-z_$][\w$]*)(?:\s+where\s+(.+?))?\s*$/);
+  if (!match) throw new Error(`Malformed @loop in ${ctx.file}: ${line}. Use: @loop <things> into <thing> [where <predicate>]`);
   const source = stripQuotes(match[1].trim());
   const itemName = match[2];
+  const where = match[3] ? compilePredicate(match[3].trim(), itemName, ctx) : null;
 
   if (source.startsWith("/") || source.startsWith("./") || source.startsWith("../") || source.endsWith(".json")) {
     const dataFile = resolveInclude(source, ctx.file, ctx.context, true);
     const rows = JSON.parse(fs.readFileSync(dataFile, "utf8"));
     if (!Array.isArray(rows)) throw new Error(`@loop data must be a JSON array: ${dataFile}`);
-    return staticUnroll(rows, itemName, bodyLines, ctx);
+    return loopOverData(rows, itemName, bodyLines, ctx, where);
   }
 
   const resolved = lookupPath(source, ctx);
@@ -570,12 +613,12 @@ function handleLoop(line, bodyLines, ctx) {
     if (!Array.isArray(resolved.value)) {
       throw new Error(`@loop ${source} in ${ctx.file} found an in-scope value, but it is not a list`);
     }
-    return staticUnroll(resolved.value, itemName, bodyLines, ctx);
+    return loopOverData(resolved.value, itemName, bodyLines, ctx, where);
   }
 
   if (/^[A-Za-z_$][\w$]*$/.test(source)) {
     const key = resolveStateKey(source, ctx);
-    if (key) return reactiveLoop(key, itemName, bodyLines, ctx);
+    if (key) return reactiveLoop(key, itemName, bodyLines, ctx, where ? { where } : null);
   }
 
   throw new Error(
@@ -583,6 +626,74 @@ function handleLoop(line, bodyLines, ctx) {
   );
 }
 
+// A static source (JSON file / in-scope value). No `where`, or a `where` that
+// only reads the loop item → filter at build time and stay zero-JS. A `where`
+// that reads :state → becomes a reactive filtered loop with the rows baked in.
+function loopOverData(rows, itemName, bodyLines, ctx, where) {
+  if (!where) return staticUnroll(rows, itemName, bodyLines, ctx);
+  if (!where.refsState) return staticUnroll(rows.filter((row) => evalPredicate(where.body, row, ctx)), itemName, bodyLines, ctx);
+  return reactiveLoop(null, itemName, bodyLines, ctx, { where, data: rows });
+}
+
+// Compile a `where` predicate to a safe JS boolean expression over I()/S()/C().
+// Conditions (operand <op> operand) join with `and`/`or`; operands are loop-item
+// paths, declared :state, numbers, or strings. No identifiers survive un-mapped.
+function compilePredicate(raw, itemName, ctx) {
+  const parts = raw.split(/\s+(and|or)\s+/i);
+  const pieces = [];
+  let refsState = false;
+  for (let i = 0; i < parts.length; i++) {
+    if (i % 2 === 1) { pieces.push(parts[i].toLowerCase() === "and" ? "&&" : "||"); continue; }
+    const cond = compileCondition(parts[i].trim(), itemName, ctx);
+    refsState = refsState || cond.usesState;
+    pieces.push(`(${cond.expr})`);
+  }
+  return { body: pieces.join(" "), refsState };
+}
+
+function compileCondition(cond, itemName, ctx) {
+  const m = cond.match(/^(.+?)\s+(contains|==|!=|>=|<=|>|<)\s+(.+)$/i);
+  if (!m) throw new Error(`Malformed where-condition "${cond}" in ${ctx.file}. Use: ${itemName}.field contains state, or ${itemName}.field <op> value.`);
+  const left = compileOperand(m[1].trim(), itemName, ctx);
+  const right = compileOperand(m[3].trim(), itemName, ctx);
+  const usesState = left.usesState || right.usesState;
+  const op = m[2].toLowerCase();
+  if (op === "contains") return { expr: `C(${left.code}, ${right.code})`, usesState };
+  return { expr: `${left.code} ${op} ${right.code}`, usesState };
+}
+
+function compileOperand(tok, itemName, ctx) {
+  if (/^"[^"]*"$/.test(tok) || /^'[^']*'$/.test(tok)) return { code: JSON.stringify(tok.slice(1, -1)), usesState: false };
+  if (/^-?\d+(?:\.\d+)?$/.test(tok)) return { code: tok, usesState: false };
+  if (["true", "false", "null"].includes(tok)) return { code: tok, usesState: false };
+  if (!/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/.test(tok)) {
+    throw new Error(`Unsupported operand "${tok}" in @loop where (${ctx.file}). Use ${itemName}.field, a :state name, a number, or a "string".`);
+  }
+  const segs = tok.split(".");
+  if (segs.some((seg) => ["constructor", "prototype", "__proto__"].includes(seg))) {
+    throw new Error(`Path "${tok}" is not allowed in @loop where (${ctx.file})`);
+  }
+  if (segs[0] === itemName) return { code: `I(${JSON.stringify(segs.slice(1).join("."))})`, usesState: false };
+  const key = resolveStateKey(segs[0], ctx);
+  if (!key) {
+    throw new Error(`@loop where references unknown name "${segs[0]}" in ${ctx.file}. Use the loop item (${itemName}.field) or a declared :state.`);
+  }
+  const rest = segs.slice(1).join(".");
+  return { code: `S(${JSON.stringify(key)}${rest ? `, ${JSON.stringify(rest)}` : ""})`, usesState: true };
+}
+
+const containsHelper = (a, b) => String(a ?? "").toLowerCase().includes(String(b ?? "").toLowerCase());
+
+function evalPredicate(body, item, ctx) {
+  try {
+    const I = (p) => getPath(item, p ? p.split(".") : []);
+    const S = (k, r) => getPath(ctx.comp.state.get(k), r ? r.split(".") : []);
+    return Boolean(new Function("I", "S", "C", `return (${body});`)(I, S, containsHelper));
+  } catch {
+    return false;
+  }
+}
+
 function staticUnroll(rows, itemName, bodyLines, ctx) {
   const out = [];
   for (const row of rows) {
@@ -592,7 +703,7 @@ function staticUnroll(rows, itemName, bodyLines, ctx) {
   return out.join("\n");
 }
 
-function reactiveLoop(key, 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 templateHtml = compileBody(bodyLines, templateCtx).trim();
@@ -607,7 +718,10 @@ function reactiveLoop(key, itemName, bodyLines, ctx) {
     itemTemplate = `<div data-wd-loop-piece>${templateHtml}</div>`;
   }
 
-  const rows = Array.isArray(ctx.comp.state.get(key)) ? ctx.comp.state.get(key) : [];
+  const where = opts?.where || null;
+  const baked = opts?.data || null;       // rows for a static source filtered by state
+  const allRows = key ? (Array.isArray(ctx.comp.state.get(key)) ? ctx.comp.state.get(key) : []) : (baked || []);
+  const rows = where ? allRows.filter((row) => evalPredicate(where.body, row, ctx)) : allRows;
   const counts = new Map();
   const initial = rows
     .map((item) => {
@@ -616,7 +730,9 @@ function reactiveLoop(key, itemName, bodyLines, ctx) {
     })
     .join("");
 
-  return `<div data-wd-loop="${key}"><template data-wd-loop-template>${itemTemplate}</template><${wrapperTag} data-wd-loop-out>${initial}</${wrapperTag}></div>`;
+  const whereAttr = where ? ` data-wd-loop-where="${escapeHtml(where.body)}"` : "";
+  const dataAttr = baked ? ` data-wd-loop-data="${escapeHtml(JSON.stringify(baked))}"` : "";
+  return `<div data-wd-loop="${key || ""}"${whereAttr}${dataAttr}><template data-wd-loop-template>${itemTemplate}</template><${wrapperTag} data-wd-loop-out>${initial}</${wrapperTag}></div>`;
 }
 
 function withLoopKey(template, itemKey) {
@@ -624,20 +740,75 @@ function withLoopKey(template, itemKey) {
 }
 
 function fillTemplateString(template, item) {
-  const withConditionals = template.replace(
-    /<span data-wd-each-if data-wd-path="([^"]*)"><template data-wd-if-true>([\s\S]*?)<\/template><template data-wd-if-false>([\s\S]*?)<\/template><span data-wd-each-if-out><\/span><\/span>/g,
-    (region, p, truthy, falsy) => {
-      const branch = getPath(item, p ? p.split(".") : []) ? truthy : falsy;
-      return region.replace("<span data-wd-each-if-out></span>", `<span data-wd-each-if-out>${branch}</span>`);
-    }
-  );
-  return withConditionals.replace(/<span data-wd-each(?: data-wd-path="([^"]*)")?><\/span>/g, (_, p) => {
+  // Resolve per-item :if regions first (recursively, so nested conditionals are
+  // pre-rendered for the initial paint), then fill the plain text bindings.
+  return fillEachText(fillEachIfRegions(template, item), item);
+}
+
+// Walk the string resolving only the OUTERMOST data-wd-each-if regions; each
+// chosen branch is recursed so nested conditionals resolve too. The <template>
+// markup is left pristine so the runtime can keep toggling branches.
+function fillEachIfRegions(str, item) {
+  const marker = '<span data-wd-each-if ';
+  let result = "";
+  let i = 0;
+  for (;;) {
+    const start = str.indexOf(marker, i);
+    if (start === -1) return result + str.slice(i);
+    result += str.slice(i, start);
+    const end = matchElement(str, start, "span");
+    result += fillOneEachIf(str.slice(start, end), item);
+    i = end;
+  }
+}
+
+function fillOneEachIf(region, item) {
+  const path = (region.match(/^<span data-wd-each-if data-wd-path="([^"]*)">/) || [, ""])[1];
+  const trueStart = region.indexOf("<template data-wd-if-true>");
+  const trueEnd = matchElement(region, trueStart, "template");
+  const falseStart = region.indexOf("<template data-wd-if-false>", trueEnd);
+  const falseEnd = matchElement(region, falseStart, "template");
+  const open = "<template data-wd-if-true>".length;
+  const close = "</template>".length;
+  const truthy = region.slice(trueStart + open, trueEnd - close);
+  const falsy = region.slice(falseStart + "<template data-wd-if-false>".length, falseEnd - close);
+  const branch = getPath(item, path ? path.split(".") : []) ? truthy : falsy;
+  const head = region.slice(0, falseEnd);
+  return `${head}<span data-wd-each-if-out>${fillEachIfRegions(branch, item)}</span></span>`;
+}
+
+function fillEachText(str, item) {
+  return str.replace(/<span data-wd-each(?: data-wd-path="([^"]*)")?><\/span>/g, (_, p) => {
     const value = p ? getPath(item, p.split(".")) : item;
     const pathAttr = p ? ` data-wd-path="${p}"` : "";
     return `<span data-wd-each${pathAttr}>${escapeHtml(value ?? "")}</span>`;
   });
 }
 
+// Return the index just past the balanced close of the element of `tag` that
+// begins at `start`. Counts nested same-tag opens/closes so regions that embed
+// their own spans/templates (nested :if) match correctly.
+function matchElement(str, start, tag) {
+  const openPrefix = `<${tag}`;
+  const closeTag = `</${tag}>`;
+  let depth = 0;
+  let i = start;
+  while (i < str.length) {
+    if (str.startsWith(openPrefix, i) && (str[i + openPrefix.length] === " " || str[i + openPrefix.length] === ">")) {
+      depth++;
+      const gt = str.indexOf(">", i);
+      i = gt === -1 ? str.length : gt + 1;
+    } else if (str.startsWith(closeTag, i)) {
+      depth--;
+      i += closeTag.length;
+      if (depth === 0) return i;
+    } else {
+      i++;
+    }
+  }
+  return str.length;
+}
+
 export function loopKeyOf(item, counts) {
   const base =
     item && typeof item === "object"

package/src/runtime.js

@@ -50,6 +50,17 @@ function recompute() {
   }
 }
 
+const containsFn = (a, b) => String(a ?? "").toLowerCase().includes(String(b ?? "").toLowerCase());
+const predicateCache = new Map();
+function loopPredicate(body) {
+  let fn = predicateCache.get(body);
+  if (!fn) {
+    fn = new Function("I", "S", "C", `return (${body});`);
+    predicateCache.set(body, fn);
+  }
+  return fn;
+}
+
 function loopKeyOf(item, counts) {
   const base =
     item && typeof item === "object"
@@ -61,11 +72,14 @@ function loopKeyOf(item, counts) {
 }
 
 function fillItem(node, item) {
+  // querySelectorAll does not descend into <template> content, so this only sees
+  // the outermost regions; recursing into each injected branch fills the rest.
   for (const region of node.querySelectorAll("[data-wd-each-if]")) {
     const value = getPath(item, region.getAttribute("data-wd-path"));
     const output = region.querySelector("[data-wd-each-if-out]");
     const template = region.querySelector(value ? "template[data-wd-if-true]" : "template[data-wd-if-false]");
     output.innerHTML = template?.innerHTML || "";
+    fillItem(output, item);
   }
   const targets = node.matches("[data-wd-each]")
     ? [node, ...node.querySelectorAll("[data-wd-each]")]
@@ -88,11 +102,20 @@ function render() {
   }
 
   for (const region of document.querySelectorAll("[data-wd-loop]")) {
-    const rows = state[region.getAttribute("data-wd-loop")];
+    const key = region.getAttribute("data-wd-loop");
+    const data = region.getAttribute("data-wd-loop-data");
+    const rows = key ? state[key] : (data ? JSON.parse(data) : []);
     const template = region.querySelector("template[data-wd-loop-template]");
     const out = region.querySelector("[data-wd-loop-out]");
     if (!template || !out) continue;
-    const list = Array.isArray(rows) ? rows : [];
+    let list = Array.isArray(rows) ? rows : [];
+    const where = region.getAttribute("data-wd-loop-where");
+    if (where) {
+      const predicate = loopPredicate(where);
+      list = list.filter((item) =>
+        predicate((path) => getPath(item, path), (k, r) => getPath(state[k], r || ""), containsFn)
+      );
+    }
 
     const existing = new Map();
     for (const child of [...out.children]) {
@@ -119,8 +142,20 @@ function render() {
   for (const node of document.querySelectorAll("[data-wd-bind]")) {
     node.textContent = getPath(state[node.getAttribute("data-wd-bind")], node.getAttribute("data-wd-path")) ?? "";
   }
+
+  for (const input of document.querySelectorAll("[data-wd-bind-input]")) {
+    if (document.activeElement !== input) input.value = state[input.getAttribute("data-wd-bind-input")] ?? "";
+  }
 }
 
+document.addEventListener("input", (event) => {
+  const input = event.target.closest("[data-wd-bind-input]");
+  if (!input) return;
+  state[input.getAttribute("data-wd-bind-input")] = input.value;
+  savePersisted();
+  render();
+});
+
 document.addEventListener("click", (event) => {
   const action = event.target.closest("[data-wd-action]");
   if (!action) return;

package/src/scaffold.js

@@ -62,6 +62,31 @@ export function initProject(root) {
     "  margin 0 auto",
     "  padding 3rem 1.5rem",
     "",
+    "nav",
+    "  display flex",
+    "  align-items center",
+    "  justify-content space-between",
+    "  gap 1rem",
+    "  max-width 760px",
+    "  margin 0 auto",
+    "  padding 1.25rem 1.5rem",
+    "",
+    "nav strong",
+    "  font-size 1.1rem",
+    "",
+    "nav .links",
+    "  display flex",
+    "  gap 1.25rem",
+    "",
+    "nav a",
+    "  color $ink",
+    "  text-decoration none",
+    "  opacity .8",
+    "",
+    "nav a:hover",
+    "  opacity 1",
+    "  color $accent",
+    "",
     "button",
     "  bg $accent",
     "  color white",
@@ -71,9 +96,25 @@ export function initProject(root) {
   ].join("\n"));
   writeNew(root, "site/_/nav.wd", [
     "<nav>",
-    "  <a href=\"/\">Home</a>",
+    "  <strong>My site</strong>",
+    "  <span class=\"links\">",
+    "    <a href=\"/\">Home</a>",
+    "    <a href=\"/about/\">About</a>",
+    "  </span>",
     "</nav>"
   ].join("\n"));
+  writeNew(root, "site/pages/about.md", [
+    "---",
+    "title: About",
+    "---",
+    "",
+    "# About",
+    "",
+    "This page is plain Markdown (`.md`) — strict CommonMark, zero framework JavaScript.",
+    "Rename it to `.wd` when you want directives like state, loops, or forms.",
+    "",
+    "[Back home](/)"
+  ].join("\n"));
   writeNew(root, "README.md", [
     "# My Darkmown site",
     "",