@zvndev/darkmown 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to Darkmown are documented here. Versions follow [semver](https://semver.org); pre-1.0 minor versions may contain breaking changes.
 
+## 0.5.0 — 2026-06-12
+
+- **Nested `:if` over loop items.** Conditionals inside a reactive `@loop` now nest — an inner `:if` resolves after the outer branch, per row, both at build time (balanced-region pre-render) and at runtime (recursive fill). Previously the compiler threw "not supported yet"; the loop-template fill no longer relies on a non-greedy regex that broke on nesting.
+- **VS Code extension** (`editors/vscode`): syntax highlighting, snippets, and folding for `.wd` and `.skin` files. Grammars are tested through the real VS Code tokenizer (vscode-textmate) in CI.
+- New `/app/` demo — a whole live app in one `.wd` file: static build-time loop, fetched data looped with nested conditionals, a persistent counter with a computed milestone, and a form that round-trips to a real server. It is the framework's elevator pitch as a single page.
+- Site: landing page repositioned around the core wedge ("Markdown that runs" — full reactive websites in plain Markdown). `description`/Open Graph/Twitter meta tags now emit from frontmatter. Runtime-size claims corrected to the true ~2 KB; mobile nav wraps instead of overflowing.
+
 ## 0.4.0 — 2026-06-11
 
 - **Renamed**: the framework is now **Darkmown** (formerly Markie). Package `@zvndev/darkmown` (npm's typosquat guard reserves bare `darkmown` as too similar to `markdown`), CLI `darkmown`. The `.wd` format and `/__wd/` asset paths are unchanged.

package/README.md

@@ -2,7 +2,7 @@
 
 **[darkmown.com](https://darkmown.com)** · markdown, rearranged.
 
-Darkmown is a Markdown-native web framework. Two formats, one rule: `.md` stays plain CommonMark forever, and renaming a file to `.wd` ("whateverdown") is what unlocks directives — includes, loops, state, conditionals, and sections. Static pages ship **zero** framework JavaScript; reactive pages share one runtime under 2 KB gzipped.
+Darkmown is a Markdown-native web framework. Two formats, one rule: `.md` stays plain CommonMark forever, and renaming a file to `.wd` ("whateverdown") is what unlocks directives — includes, loops, state, conditionals, and sections. Static pages ship **zero** framework JavaScript; reactive pages share one runtime around 2 KB gzipped (CI-enforced under 5 KB).
 
 ## Quick start
 
@@ -45,7 +45,7 @@ npm run dev    # live demo site — the same site that runs darkmown.com
 - Files or folders starting with `.`, `-`, or `_` are hidden from routing.
 - `site/_` is the include shelf for `@include /name.wd`.
 - Matching `page.skin` and `page.js` colocate styling and behavior by basename.
-- Static pages ship zero Darkmown runtime. Reactive pages share `/__wd/runtime.js` (currently ~1.6 KB gzipped).
+- Static pages ship zero Darkmown runtime. Reactive pages share `/__wd/runtime.js` (currently ~2 KB gzipped, CI-enforced under 5 KB).
 - Shelf `.json` files are published at `/__wd/data/` so `:fetch` works on any static host.
 
 ## Interpolation
@@ -132,12 +132,16 @@ Loading…
 - `:form into name` captures submits straight into state (no backend). `:form action="/url"` emits a plain native form instead — zero JS, full progressive enhancement.
 - `:form action="/url" into reply` does both: with JS the submit posts urlencoded via fetch and the JSON reply lands in state `reply` (`reply_error` on failure); without JS it is the same native POST. Darkmown adapts to any backend — it does not own one. `darkmown dev` ships a `/__wd/echo` endpoint for demos.
 - `:state x = [] persist` keeps that state in localStorage across reloads.
-- `:if item.path` works inside reactive loops for per-row branches.
+- `:if item.path` works inside reactive loops for per-row branches, and nests — an inner `:if` resolves after the outer branch and stays reactive.
 
 ## The escape hatch
 
 Reactive pages expose `window.wd` — `wd.get(key)`, `wd.set(key, value)`, `wd.state`, `wd.render()` — so colocated `.js` can do anything the directives can't. Section-scoped keys are addressed as `sectionId:name`.
 
+## Editor support
+
+A VS Code extension in [`editors/vscode`](editors/vscode) gives `.wd` and `.skin` files syntax highlighting, snippets, and folding — so a `.wd` file reads as Markdown-plus-directives, never as broken Markdown. Build it with `cd editors/vscode && npx @vscode/vsce package`, or install the published extension from the Marketplace (search "Darkmown").
+
 ## Spec status
 
 See [docs/spec-alignment.md](docs/spec-alignment.md) for the deep alignment audit against the original vision.

package/docs/spec-alignment.md

@@ -20,7 +20,7 @@ This audit compares the current Darkmown implementation with the original MARROW
 - **`:fetch name from "url"`:** declarative data loading into reactive state, with `name_error` for failures. Shelf `.json` publishes to `/__wd/data/` so it works on static hosts.
 - **`:form` two ways:** `:form into name` captures submits into client state with zero backend; `:form action="/url"` emits a plain native form and ships no JS — the progressive-enhancement story from the original doc.
 - **`:state x = v persist`:** localStorage-backed state. This is the honest client-side slice of the original `:cart` primitive; server sync remains future work.
-- **`:if item.path` inside reactive loops:** per-row conditional branches, filled at compile time and re-filled by the keyed patcher.
+- **`:if item.path` inside reactive loops:** per-row conditional branches, filled at compile time and re-filled by the keyed patcher. Conditionals **nest** — an inner `:if` is resolved after the outer branch, both at build time (balanced-region pre-render) and at runtime (recursive fill).
 - **`window.wd` escape hatch:** `get`/`set`/`state`/`render` exposed to colocated `.js` — the adapted form of the original `<script scope>` "infinite extension" idea, aligned with Darkmown's colocation model instead of inline scripts.
 
 ## Deliberate adaptations
@@ -49,7 +49,7 @@ This audit compares the current Darkmown implementation with the original MARROW
 ## Still missing from the full vision
 
 - First-party server runtime (`site/api/`), HTML-fragment `swap` semantics, and cart server sync — parked behind the adapter decision until a real project needs them.
-- Nested `:if` over loop items, and `@loop` over fetch sub-paths.
+- `@loop` over fetch sub-paths (looping a path *inside* fetched state rather than top-level state).
 - `@starting-style` emission and browser fallbacks for older engines.
 - Editor tooling, richer diagnostics, and an actual npm publish (needs a license decision).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zvndev/darkmown",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
   "scripts": {
     "build": "node src/cli.js build",
     "dev": "node src/cli.js dev",
-    "test": "node --test"
+    "test": "node --test tests/*.test.js"
   },
   "files": [
     "src",

package/site/_/nav.skin

@@ -11,7 +11,8 @@ tokens
 
 .topnav
   display flex
-  gap 1rem
+  flex-wrap wrap
+  gap .5rem 1rem
   align-items center
   padding 1rem 2rem
   border-bottom 1px solid $line

package/site/_/nav.wd

@@ -5,4 +5,5 @@
   <a href="/markdown/">Plain Markdown</a>
   <a href="/reactive/">Reactive</a>
   <a href="/data/">Data &amp; Forms</a>
+  <a href="/app/">Live app</a>
 </nav>

package/site/_/roadmap.json

@@ -0,0 +1,7 @@
+[
+  { "id": "loops", "title": "Nested conditionals in loops", "shipped": true, "blocked": false },
+  { "id": "editor", "title": "VS Code syntax highlighting", "shipped": true, "blocked": false },
+  { "id": "filter", "title": "State-driven list filtering", "shipped": false, "blocked": false },
+  { "id": "api", "title": "First-party site/api/ runtime", "shipped": false, "blocked": true },
+  { "id": "swap", "title": "HTML-fragment swap responses", "shipped": false, "blocked": false }
+]

package/site/pages/app.skin

@@ -0,0 +1,76 @@
+tokens
+  ink #171717
+  paper #fbfaf7
+  panel #ffffff
+  line #e4e1d8
+  accent #16645a
+  warm #a83f2a
+  radius 10px
+
+main
+  max-width 760px
+  margin 0 auto
+  padding 2.5rem 1.5rem 4rem
+  font ui-sans-serif, system-ui, sans-serif
+  color $ink
+
+h1
+  font-size 2.1rem
+  letter-spacing -0.02em
+
+.boundary
+  margin 1.5rem 0
+  padding 1rem 1.2rem
+  border-left 3px solid $warm
+  background #fcf4ef
+  border-radius $radius
+  font-size .95rem
+
+.roadmap-row
+  display flex
+  align-items center
+  justify-content space-between
+  gap 1rem
+  padding .75rem 1rem
+  margin .5rem 0
+  background $panel
+  border 1px solid $line
+  border-radius $radius
+
+.badge
+  font-size .8rem
+  font-weight 600
+  padding .2rem .6rem
+  border-radius 999px
+  white-space nowrap
+
+.badge.shipped
+  background #e3f3ec
+  color $accent
+
+.badge.wip
+  background #fef0e6
+  color $warm
+
+.badge.blocked
+  background #f3e3e3
+  color #9a2a2a
+
+button
+  background $accent
+  color white
+  border 0
+  padding .55rem .9rem
+  margin .25rem .4rem .25rem 0
+  border-radius 8px
+  font-size .95rem
+  cursor pointer
+
+input
+  font-size 1rem
+  padding .6rem .7rem
+  border 1px solid $line
+  border-radius 8px
+  width 100%
+  max-width 22rem
+  margin .3rem 0

package/site/pages/app.wd

@@ -0,0 +1,92 @@
+---
+title: A live app in one Markdown file
+description: One .wd file — static prose, fetched data, looped results with nested conditionals, a persistent counter, and a form that round-trips to a real server. No JavaScript written, no components, no build config.
+---
+
+@include /nav.wd
+
+<main>
+
+# A live app, in one Markdown file
+
+Everything on this page — the prose, the fetched list, the badges, the form, the counter — is a single `.wd` file. No components. No JSX. No build config. Watch where JavaScript actually enters.
+
+## Static until proven reactive
+
+This whole section is plain Markdown. The list below is unrolled **at build time** from a JSON file — it renders into HTML with no runtime at all:
+
+@loop /features.json into feature
+- **{ feature.name }** — { feature.detail }
+@endloop
+
+<aside class="boundary">If you deleted everything below this line, this page would ship <strong>zero</strong> bytes of JavaScript. Everything above is static HTML. Below is where the one ~2&nbsp;KB runtime loads — and only because the document asks for it.</aside>
+
+## Fetched data, looped, with nested conditions
+
+`:fetch` pulls JSON over the network into reactive state — from a static file here, or any API. Until it lands, the page shows a fallback. Each row then decides its own badge from **nested** conditionals, in plain Markdown:
+
+:fetch roadmap from "/__wd/data/roadmap.json"
+
+:if roadmap
+@loop roadmap into item
+::: card .roadmap-row
+**{ item.title }**
+:if item.blocked
+<span class="badge blocked">blocked</span>
+:else
+:if item.shipped
+<span class="badge shipped">shipped ✓</span>
+:else
+<span class="badge wip">in progress</span>
+:endif
+:endif
+:::
+@endloop
+:else
+Loading the roadmap…
+:endif
+
+No ternaries, no `.map()`, no framework — the outer `:if` checks `blocked`, the inner one checks `shipped`, per row, and both stay reactive.
+
+## A counter that survives reload
+
+`:state … persist` keeps this in `localStorage`, and `:computed` derives from it. Star a few, reload the page, and it holds:
+
+::: section #watch
+:state stars = 0 persist
+:computed milestone = stars >= 3
+
+You are watching { stars } item(s).
+
+:button "★ Watch one" -> stars++
+:button "Reset" -> stars = 0
+
+:if milestone
+Nice — you are tracking the whole near-term roadmap.
+:endif
+:::
+
+## A form that talks to a real server
+
+This form posts to a live serverless function and shows the reply. With JavaScript it is a `fetch`; without it, the exact same markup is a native POST — Darkmown adapts to your backend instead of owning one:
+
+:form action="/__wd/echo" into reply
+:input note placeholder="Tell us what you'd build with this"
+:submit "Send to the server"
+:endform
+
+:if reply
+The server got it and answered at **{ reply.at }**.
+:else
+Your reply will appear here.
+:endif
+
+:if reply_error
+Something went wrong: { reply_error }
+:endif
+
+---
+
+That was one file. Static prose, build-time loops, fetched data, nested conditionals, persistent state, computed values, and a server round-trip — and the only JavaScript on the page is the shared runtime Darkmown loads for you. [Read the docs](/docs/) or [deploy your own](/#deploy).
+
+</main>

package/site/pages/docs/index.wd

@@ -75,7 +75,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 +107,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 +120,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,31 @@ 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.
+
 ## 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>
@@ -530,9 +538,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>`;
@@ -624,20 +629,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

@@ -61,11 +61,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]")]