diff --git a/README.md b/README.md
index 0fa693c8..023962c4 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ zo (pronounced `/zuː/` just like "zoo") iS A PRACTiCAL, LiGHTWEiGHT, CROSS-PLAT
 
 **JOiN THE DEVOLUTiON.**
 
-[home](https://zo.compilords.house) — [install](./crates/compiler/zo-notes/public/guidelines/01-install.md) — [initiation](https://zo.compilords.house/initiation) — [spec](https://zo.compilords.house/spec) — [news](https://zo.compilords.house/news) — [benchmark](crates/compiler/zo-benches) — [discord](https://discord.gg/JaNc4Nk5xw)
+[home](https://zo.compilords.house) — [install](./crates/compiler/zo-notes/public/guidelines/01-install.md) — [initiation](https://zo.compilords.house/initiation) — [how-to](https://zo.compilords.house/how-to) — [spec](https://zo.compilords.house/spec) — [news](https://zo.compilords.house/news) — [benchmark](crates/compiler/zo-benches) — [discord](https://discord.gg/JaNc4Nk5xw)
 
 ## usage.
 
diff --git a/apps/site-tasks/build-how-to.mjs b/apps/site-tasks/build-how-to.mjs
index 85e122ea..5184f405 100644
--- a/apps/site-tasks/build-how-to.mjs
+++ b/apps/site-tasks/build-how-to.mjs
@@ -1,12 +1,20 @@
 // Generates the `how-to` content collection from the single source of
-// truth at `crates/compiler/zo-how-to/`. Each example is a `.zo` (code)
-// plus an optional sibling `.md` (explanation). The site never reads the
-// crate directly — this prebuild step mirrors every example into
-// `apps/site/src/content/how-to/<category>/<group?>/<name>.md`, embedding
-// the raw code as a YAML literal block scalar and the explanation as the
-// body. Run from `prebuild`.
-
-import { readdir, readFile, writeFile, mkdir, rm } from "node:fs/promises";
+// truth at `crates/compiler/zo-how-to/`. Each example is a `.zo` (code),
+// an optional sibling `.md` (explanation), an optional
+// `-- EXPECTED OUTPUT:` block (stdout programs), and an optional sibling
+// image (visual programs). The site never reads the crate directly —
+// this prebuild step mirrors everything into
+// `apps/site/src/content/how-to/...` and copies sibling images into
+// `public/how-to/...`. Run from `prebuild` / `predev`.
+
+import {
+  readdir,
+  readFile,
+  writeFile,
+  mkdir,
+  rm,
+  copyFile,
+} from "node:fs/promises";
 import { existsSync } from "node:fs";
 import { join, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -14,14 +22,17 @@ import { fileURLToPath } from "node:url";
 const ROOT = dirname(fileURLToPath(import.meta.url));
 const HOWTO = join(ROOT, "..", "..", "crates", "compiler", "zo-how-to");
 const OUT = join(ROOT, "..", "site", "src", "content", "how-to");
+const PUBLIC = join(ROOT, "..", "site", "public", "how-to");
 
 // Subdirs that may sit next to sources but aren't examples (build
 // artifacts, shared fixtures) — never walked.
 const SKIP_DIRS = new Set(["deps", "samples"]);
 
+// Sibling preview formats for visual examples, in preference order.
+const IMAGE_EXTS = ["gif", "webp", "png", "jpg", "jpeg", "svg"];
+
 // `001_hello` -> { order: 1, name: "hello" }. No prefix keeps the bare
-// stem and sorts last. The prefix is for on-disk ordering only; it never
-// reaches the slug or title.
+// stem and sorts last.
 function parsePrefix(stem) {
   const match = stem.match(/^(\d+)_(.+)$/);
 
@@ -30,10 +41,10 @@ function parsePrefix(stem) {
   return { order: Number.POSITIVE_INFINITY, name: stem };
 }
 
-// Indent every line by 2 spaces so the raw `.zo` is a valid YAML literal
-// block scalar — consistent indentation greater than the `code:` key is
-// all YAML needs, so blank lines and `--` comments can't break the parse.
-function indentCode(source) {
+// Indent every line by 2 spaces so a multi-line string is a valid YAML
+// literal block scalar — consistent indent is all YAML needs, so blank
+// lines and `--` comments can't break the parse.
+function indentBlock(source) {
   return source
     .replace(/\s+$/, "")
     .split("\n")
@@ -41,8 +52,36 @@ function indentCode(source) {
     .join("\n");
 }
 
+// Split a `.zo` into its code and the `-- EXPECTED OUTPUT:` block (the
+// same directive the test runner verifies). The output lines are `-- `
+// comments; strip the prefix. The block is removed from the code so the
+// rendered source never shows the trailer.
+function splitOutput(raw) {
+  const expectedIdx = raw.indexOf("-- EXPECTED OUTPUT:");
+  const stdinIdx = raw.indexOf("-- @stdin:");
+
+  // The shown code stops at the first trailing test directive
+  // (`-- @stdin:` or `-- EXPECTED OUTPUT:`) — both are runner-only and
+  // shouldn't appear in the code pane.
+  const markers = [expectedIdx, stdinIdx].filter((idx) => idx !== -1);
+  const code = markers.length ? raw.slice(0, Math.min(...markers)) : raw;
+
+  if (expectedIdx === -1) return { code, output: null };
+
+  const output = raw
+    .slice(expectedIdx)
+    .split("\n")
+    .slice(1)
+    .map((line) => line.replace(/^\s*--\s?/, ""))
+    .join("\n")
+    .replace(/^\n+/, "")
+    .replace(/\n+$/, "");
+
+  return { code, output: output.length ? output : null };
+}
+
 // Lifts a `title:` from the explanation's optional frontmatter and
-// returns the body without it. Tiny on purpose — only `title` matters.
+// returns the body without it.
 function splitExplanation(raw) {
   if (!raw.startsWith("---\n")) return { title: null, body: raw.trim() };
 
@@ -61,8 +100,25 @@ function humanize(name) {
   return name.replace(/[_-]+/g, " ");
 }
 
-// Collect `{ category, group, name, order, title, code, body }` for every
-// `.zo` under each category root and its one level of group subdirs.
+// A sibling `<stem>.<ext>` image, copied to `public/how-to/<rel>.<ext>`
+// and returned as a site URL. `null` when none exists.
+async function siblingImage(dir, stem, rel) {
+  for (const ext of IMAGE_EXTS) {
+    const source = join(dir, `${stem}.${ext}`);
+
+    if (existsSync(source)) {
+      const dest = join(PUBLIC, `${rel}.${ext}`);
+
+      await mkdir(dirname(dest), { recursive: true });
+      await copyFile(source, dest);
+
+      return `/how-to/${rel}.${ext}`;
+    }
+  }
+
+  return null;
+}
+
 async function collectExamples() {
   const examples = [];
 
@@ -96,7 +152,13 @@ async function collectExamples() {
     for (const source of sources) {
       const stem = source.file.slice(0, -".zo".length);
       const { order, name } = parsePrefix(stem);
-      const code = await readFile(join(source.dir, source.file), "utf8");
+      const rel = source.group
+        ? `${category}/${source.group}/${name}`
+        : `${category}/${name}`;
+
+      const { code, output } = splitOutput(
+        await readFile(join(source.dir, source.file), "utf8"),
+      );
 
       const explanationPath = join(source.dir, `${stem}.md`);
       let title = null;
@@ -111,6 +173,8 @@ async function collectExamples() {
         body = explanation.body;
       }
 
+      const image = await siblingImage(source.dir, stem, rel);
+
       examples.push({
         category,
         group: source.group,
@@ -118,6 +182,8 @@ async function collectExamples() {
         order,
         title: title ?? humanize(name),
         code,
+        output,
+        image,
         body,
       });
     }
@@ -126,10 +192,13 @@ async function collectExamples() {
   return examples;
 }
 
-const examples = await collectExamples();
-
-// Rebuild from scratch so deleted/renamed examples never linger.
+// Rebuild both trees from scratch so deleted/renamed examples and their
+// images never linger. Clear BEFORE collecting — collectExamples copies
+// sibling images into PUBLIC, so wiping it afterwards would delete them.
 await rm(OUT, { recursive: true, force: true });
+await rm(PUBLIC, { recursive: true, force: true });
+
+const examples = await collectExamples();
 
 for (const example of examples) {
   const dir = example.group
@@ -144,8 +213,11 @@ for (const example of examples) {
     example.group ? `group: ${example.group}` : null,
     `title: ${JSON.stringify(example.title)}`,
     Number.isFinite(example.order) ? `order: ${example.order}` : null,
+    example.image ? `image: ${JSON.stringify(example.image)}` : null,
     "code: |",
-    indentCode(example.code),
+    indentBlock(example.code),
+    example.output ? "output: |" : null,
+    example.output ? indentBlock(example.output) : null,
     "---",
     "",
     example.body,
diff --git a/apps/site/.gitignore b/apps/site/.gitignore
index 4e4f97cf..84a39688 100644
--- a/apps/site/.gitignore
+++ b/apps/site/.gitignore
@@ -10,6 +10,7 @@ public/install.sh
 public/docs/llms.txt
 # generated by site-tasks/build-how-to.mjs — source is crates/compiler/zo-how-to/
 src/content/how-to/
+public/how-to/
 
 # dependencies
 node_modules/
diff --git a/apps/site/src/components/atoms/link.astro b/apps/site/src/components/atoms/link.astro
index 98bdfc92..b2c344ee 100644
--- a/apps/site/src/components/atoms/link.astro
+++ b/apps/site/src/components/atoms/link.astro
@@ -3,12 +3,13 @@ interface Props {
   class?: string;
   href: string;
   label: string;
+  target?: string;
 }
 
-const { href, label, class: className } = Astro.props;
+const { href, label, class: className, target } = Astro.props;
 ---
 
-<a class={className} href={href}>{label}</a>
+<a class={className} href={href} target={target}>{label}</a>
 
 <style>
   a {
diff --git a/apps/site/src/components/structure/reachout.astro b/apps/site/src/components/structure/reachout.astro
index ba06b5f1..67a94301 100644
--- a/apps/site/src/components/structure/reachout.astro
+++ b/apps/site/src/components/structure/reachout.astro
@@ -41,6 +41,7 @@ const socials = [
             class="socials-item"
             href={social.link}
             label={social.name}
+            target="_blank"
           />)
         }
       </div>
@@ -58,6 +59,11 @@ const socials = [
   content="For Ai agents: <a href='llms.txt'>llms.txt</a> (curated index) and <a href='docs/llms-full.txt'>llms-full.txt</a> (full docs)."
 />
 
+<Paragraph
+  class="privacy"
+  content=" Privacy: No cookies, no ads, no tracking. It's like you were never here."
+/>
+
 <script>
   import { watcher } from "../../core/watcher";
   import { observer } from "../../core/observer";
@@ -139,16 +145,20 @@ const socials = [
     }
   }
 
+  :global(.privacy),
   :global(.human-faq),
   :global(.ai-llm) {
     margin: 32px 0;
     font-size: calc(var(--base) * 3);
   }
 
+  :global(.privacy),
+  :global(.ai-llm),
   :global(.human-faq) {
     margin-bottom: 8px;
   }
 
+  :global(.privacy),
   :global(.ai-llm) {
     margin-top: 8px;
   }
diff --git a/apps/site/src/content.config.ts b/apps/site/src/content.config.ts
index 7a64cc8a..f781eb1b 100644
--- a/apps/site/src/content.config.ts
+++ b/apps/site/src/content.config.ts
@@ -54,6 +54,8 @@ const howto = defineCollection({
     title: z.string().optional(),
     order: z.number().optional(),
     code: z.string(),
+    output: z.string().optional(),
+    image: z.string().optional(),
   }),
 });
 
diff --git a/apps/site/src/pages/how-to/[...slug].astro b/apps/site/src/pages/how-to/[...slug].astro
index 310b4f96..de573f2c 100644
--- a/apps/site/src/pages/how-to/[...slug].astro
+++ b/apps/site/src/pages/how-to/[...slug].astro
@@ -6,6 +6,7 @@ import NavBar, { type Item } from "../../components/navigation/navbar.astro";
 import Header from "../../components/structure/header.astro";
 import Screen from "../../components/structure/screen.astro";
 import Editor from "../../components/interactive/editor.astro";
+import Reachout from "../../components/structure/reachout.astro";
 
 const slug = Astro.params.slug;
 const examples = await loadHowTo();
@@ -20,6 +21,7 @@ const crumb = example.group
   : example.category;
 
 const { Content } = await render(example.entry);
+const { code, output, image } = example.entry.data;
 const items: Item[] = await getHowToNavItems();
 
 const title = `zo — ${example.title}.`;
@@ -38,14 +40,31 @@ const description = `A zo ${crumb} example: ${example.title}.`;
       </header>
 
       <div class="example__split">
-        <div class="example__code">
-          <Editor code={example.entry.data.code} />
+        <div class="example__main">
+          <div class="example__code">
+            <span class="example__code-label f-cirka">program</span>
+            <Editor code={code} />
+          </div>
+
+          {image
+            ? <img
+                class="example__image"
+                src={image}
+                alt={`${example.title} preview`}
+              />
+            : output
+              ? <div class="example__output">
+                  <span class="example__output-label f-cirka">output</span>
+                  <pre class="example__output-pre f-iosevka">{output}</pre>
+                </div>
+              : null}
         </div>
         <div class="example__doc">
           <Content />
         </div>
       </div>
     </article>
+    <Reachout />
   </Screen>
 </Base>
 
@@ -69,6 +88,7 @@ const description = `A zo ${crumb} example: ${example.title}.`;
   .example__title {
     font-size: 1.75rem;
     margin: 0 0 2px;
+    text-transform: capitalize;
   }
 
   .example__title::before { content: "# "; }
@@ -85,19 +105,55 @@ const description = `A zo ${crumb} example: ${example.title}.`;
     align-items: start;
   }
 
-  .example__code pre {
-    margin: 0;
-    padding: 16px;
-    overflow-x: auto;
+  /* Left column: code stacked over its result (output / image). */
+  .example__main {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+  }
+
+  /* Code and output share one labeled dark-panel look: a small
+     uppercase header (`program` / `output`) over the content. */
+  .example__code,
+  .example__output {
     background: #000;
     border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .example__code-label,
+  .example__output-label {
+    display: block;
+    padding: 6px 12px;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.5;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .example__code pre,
+  .example__output-pre {
+    margin: 0;
+    padding: 12px;
+    overflow-x: auto;
+    background: transparent;
+    white-space: pre;
+  }
+
+  /* Preview image for visual examples. */
+  .example__image {
+    display: block;
+    width: 100%;
+    height: auto;
   }
 
-  /* Mobile / narrow: stack — explanation on top, code below — so code
-     is never squeezed into an unreadable column. */
+  /* Mobile / narrow: stack — explanation on top, then code + result —
+     so code is never squeezed into an unreadable column. */
   @media (max-width: 1023px) {
     .example__doc { order: 1; }
-    .example__code { order: 2; }
+    .example__main { order: 2; }
   }
 
   /* Desktop: side-by-side, code left, explanation right. */
diff --git a/apps/site/src/pages/how-to/index.astro b/apps/site/src/pages/how-to/index.astro
index 95cb7e02..3f241a80 100644
--- a/apps/site/src/pages/how-to/index.astro
+++ b/apps/site/src/pages/how-to/index.astro
@@ -5,6 +5,8 @@ import Base from "../../layouts/base.astro";
 import NavBar, { type Item } from "../../components/navigation/navbar.astro";
 import Header from "../../components/structure/header.astro";
 import Screen from "../../components/structure/screen.astro";
+import Paragraph from "../../components/atoms/paragraph.astro";
+import Reachout from "../../components/structure/reachout.astro";
 
 const title = "zo — How-to.";
 const description = "Browse, sample, and modify real zo programs.";
@@ -63,7 +65,12 @@ const flat = tree.filter(isFlat);
           </div>)}
         </div>
       </div>}
+      <Paragraph
+        class="how-to__note"
+        content="New to zo? The <a href='/initiation'>initiation</a> covers the fundamentals these programs build on."
+      />
     </section>
+    <Reachout />
   </Screen>
 </Base>
 
@@ -101,6 +108,7 @@ const flat = tree.filter(isFlat);
     font-size: 0.95rem;
     margin: 0 0 8px;
     opacity: 0.75;
+    text-transform: capitalize;
   }
 
   .how-to__category--flat
@@ -120,12 +128,19 @@ const flat = tree.filter(isFlat);
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: border-color 0.15s ease;
+    text-transform: capitalize;
   }
 
   .how-to__link:hover {
     border-bottom-color: var(--green-100, currentColor);
   }
 
+  /* Closing footnote: separated from the catalog, muted. */
+  .how-to__note {
+    margin-top: 32px;
+    font-size: 0.95rem;
+  }
+
   @media (max-width: 768px) {
     .how-to__columns { gap: 14px 32px; }
   }
diff --git a/crates/compiler/zo-codegen-arm/src/codegen.rs b/crates/compiler/zo-codegen-arm/src/codegen.rs
index 830433f9..93817ab1 100644
--- a/crates/compiler/zo-codegen-arm/src/codegen.rs
+++ b/crates/compiler/zo-codegen-arm/src/codegen.rs
@@ -245,6 +245,13 @@ const SYM_STATE_SET_STR: &str = "_zo_state_set_str";
 // the runtime's `ARR_STATE`; `arr.push(x)` lowers to this.
 const SYM_STATE_ARR_PUSH: &str = "_zo_state_arr_push";
 const SYM_STATE_ARR_SET: &str = "_zo_state_arr_set";
+// Struct-typed reactive slots (a `mut S` a handler mutates through a
+// `mut self` method, e.g. `Rng`) live in the runtime's `STRUCT_STATE`.
+// The get returns the slot's *address* — handed to the method as its
+// receiver so it mutates the cell in place; the set seeds the bytes
+// from a by-value (<= 8 byte) struct register.
+const SYM_STATE_GET_STRUCT: &str = "_zo_state_get_struct";
+const SYM_STATE_SET_STRUCT_WORD: &str = "_zo_state_set_struct_word";
 
 /// Synthetic-symbol base for per-list item-recipe blobs embedded
 /// in `template_data`. Sits below the enum-synthetic base
@@ -2300,6 +2307,78 @@ impl<'a> ARM64Gen<'a> {
       }
     }
 
+    // Unbound reactive mutables: a `mut` an event handler reaches that
+    // has no UI binding — e.g. a captured `Rng` the handler advances
+    // with `rng.range(…)`. The executor keeps such a mutable free (a
+    // `Load Local`, not a capture param) only for event handlers, so it
+    // must route through state; here it gets a slot so the load/store
+    // rewrites fire. Scoped strictly to event-handler closures — a
+    // concurrency or `.map` closure captures by value, and slotting its
+    // locals would wrongly route them through state.
+    let mut event_handlers: HashSet<&str> = HashSet::default();
+
+    for insn in insns.iter() {
+      if let Insn::Template { commands, .. } = insn {
+        for cmd in commands {
+          if let UiCommand::Event { handler, .. } = cmd {
+            event_handlers.insert(handler.as_str());
+          }
+        }
+      }
+    }
+
+    let mut unbound_reactive: Vec<Symbol> = Vec::new();
+    let mut in_handler = false;
+    let mut inner: HashSet<Symbol> = HashSet::default();
+
+    for (i, insn) in insns.iter().enumerate() {
+      match insn {
+        Insn::FunDef { name, kind, .. } => {
+          in_handler = matches!(kind, FunctionKind::Closure { .. })
+            && event_handlers.contains(self.interner.get(*name));
+
+          if in_handler {
+            inner.clear();
+
+            // A var declared OR written inside the closure is local to
+            // it — including synthetic temps a `match` stores
+            // (`__match_scrut__`, `__match_result__`), which carry no
+            // `VarDef`. Only a var stored *elsewhere* (main) and merely
+            // read here is an outer reactive mutable like `rng`.
+            for body in &insns[i + 1..] {
+              match body {
+                Insn::FunDef { .. } => break,
+                Insn::VarDef { name, .. }
+                | Insn::ConstDef { name, .. }
+                | Insn::Store { name, .. } => {
+                  inner.insert(*name);
+                }
+                _ => {}
+              }
+            }
+          }
+        }
+        Insn::Load {
+          src: LoadSource::Local(sym),
+          ..
+        }
+        | Insn::Store { name: sym, .. }
+          if in_handler
+            && !inner.contains(sym)
+            && sym_first_store_ty.contains_key(sym)
+            && !self.reactive_slots.contains_key(sym)
+            && !unbound_reactive.contains(sym) =>
+        {
+          unbound_reactive.push(*sym);
+        }
+        _ => {}
+      }
+    }
+
+    for sym in unbound_reactive {
+      self.reactive_slot_for(sym);
+    }
+
     // Pre-pass companion: find every function whose body
     // touches a reactive symbol. The inserted state-helper
     // `bl`s clobber X30, so those functions need a
@@ -3151,7 +3230,15 @@ impl<'a> ARM64Gen<'a> {
             && !self.reactive_arr_slots.contains(sym)
           {
             if let Some(dst_reg) = self.alloc_reg(*dst) {
-              self.emit_state_load(dst_reg, state_slot, ty_id.0 == STR_TYPE_ID);
+              if self.is_struct_ty(*ty_id) {
+                self.emit_state_load_struct(dst_reg, state_slot);
+              } else {
+                self.emit_state_load(
+                  dst_reg,
+                  state_slot,
+                  ty_id.0 == STR_TYPE_ID,
+                );
+              }
             }
 
             return;
@@ -4326,7 +4413,11 @@ impl<'a> ARM64Gen<'a> {
             None => return,
           };
 
-          self.emit_state_store(slot, value_reg, ty_id.0 == STR_TYPE_ID);
+          if self.is_struct_ty(*ty_id) {
+            self.emit_state_store_struct(slot, value_reg);
+          } else {
+            self.emit_state_store(slot, value_reg, ty_id.0 == STR_TYPE_ID);
+          }
 
           return;
         }
@@ -9483,6 +9574,39 @@ impl<'a> ARM64Gen<'a> {
     });
   }
 
+  /// Emit `mov w0, slot; bl _zo_state_get_struct; mov dst, x0` — the
+  /// read side of a reactive struct `mut`. Unlike a scalar, this
+  /// returns the slot's *address*: the value is handed to a `mut self`
+  /// method as its receiver (and to field reads as the base), so the
+  /// method mutates the cell in place. Mirrors how a struct local
+  /// loads its stack-slot address rather than a value.
+  fn emit_state_load_struct(&mut self, dst: Register, slot: u32) {
+    self.ensure_runtime_dylib_registered();
+    self.emitter.emit_mov_imm(X0, slot as u16);
+    self.emit_extern_call(SYM_STATE_GET_STRUCT);
+
+    if dst != X0 {
+      self.emitter.emit_mov_reg(dst, X0);
+    }
+  }
+
+  /// Emit `mov x1, value; mov w0, slot; bl _zo_state_set_struct_word`
+  /// — the write side of a reactive struct `mut` whose value fits a
+  /// register (a struct up to 8 bytes, AAPCS64-returned by value, like
+  /// `Rng`). Seeds the cell from `main`'s initialiser so the slot owns
+  /// the bytes before any event reads them. Mirrors `emit_state_store`'s
+  /// X1-first ordering.
+  fn emit_state_store_struct(&mut self, slot: u32, value: Register) {
+    self.ensure_runtime_dylib_registered();
+
+    if value != X1 {
+      self.emitter.emit_mov_reg(X1, value);
+    }
+
+    self.emitter.emit_mov_imm(X0, slot as u16);
+    self.emit_extern_call(SYM_STATE_SET_STRUCT_WORD);
+  }
+
   /// Emit `mov x1, value; mov w0, slot; bl _zo_state_arr_push` —
   /// the reactive `[]str` push. `value` is a zo `str` pointer
   /// (length-prefixed); the runtime copies its bytes onto
diff --git a/crates/compiler/zo-codegen-web/src/lib.rs b/crates/compiler/zo-codegen-web/src/lib.rs
index 9aba0616..fa55679b 100644
--- a/crates/compiler/zo-codegen-web/src/lib.rs
+++ b/crates/compiler/zo-codegen-web/src/lib.rs
@@ -10,6 +10,7 @@
 //! reuses [`WebGen`] for its live rendering.
 
 mod reactive;
+mod transpile;
 
 use reactive::ReactiveJs;
 
diff --git a/crates/compiler/zo-codegen-web/src/reactive.rs b/crates/compiler/zo-codegen-web/src/reactive.rs
index ba180acb..608a74a7 100644
--- a/crates/compiler/zo-codegen-web/src/reactive.rs
+++ b/crates/compiler/zo-codegen-web/src/reactive.rs
@@ -7,6 +7,8 @@
 //! **compile-time binding graph** — a write fires only the bindings its
 //! slot drives. No signals, no whole-stream diff, no re-render.
 
+use crate::transpile::{FnTranspiler, js_name};
+
 use zo_interner::{Interner, Symbol};
 use zo_sir::{
   BinOp, Insn, ListItemCmd, LoadSource, Sir, TemplateBindings, UnOp,
@@ -47,6 +49,8 @@ impl<'a> ReactiveJs<'a> {
     // lists are unreliable: a second closure over the same var records
     // none.
     let mut_vars = self.mut_vars();
+    // User functions the handlers call — they ship as JS alongside.
+    let mut handler_roots: Vec<Symbol> = Vec::new();
 
     for cmd in commands {
       let UiCommand::Event {
@@ -69,6 +73,14 @@ impl<'a> ReactiveJs<'a> {
         for var in written {
           push_unique(&mut state_vars, var);
         }
+
+        if let Some((start, end, _)) = self.closure_body(handler) {
+          for insn in &self.sir.instructions[start..end] {
+            if let Insn::Call { name, .. } = insn {
+              push_unique(&mut handler_roots, *name);
+            }
+          }
+        }
       }
     }
 
@@ -76,6 +88,23 @@ impl<'a> ReactiveJs<'a> {
       return None;
     }
 
+    // Transpile every user function the handlers and reactive
+    // initialisers reach (`glyph`, `card_of`, the `Rng` methods) to JS.
+    // `None` → a reachable call has no transpilable body (an FFI): fall
+    // back to a static page rather than emit a call to a function that
+    // doesn't exist in the browser.
+    let transpiler = FnTranspiler::new(self.sir, self.interner);
+    let main_range = transpiler.main_range();
+    let mut roots = handler_roots;
+
+    if let Some(range) = main_range {
+      for sym in transpiler.init_roots(range) {
+        push_unique(&mut roots, sym);
+      }
+    }
+
+    let functions = transpiler.emit_reachable(&roots)?;
+
     // The compile-time binding graph: each reactive var → the DOM patch
     // ops its writes drive. Op encodings: `["t",cmd]` text content,
     // `["a",cmd,name]` attribute, `["c",cmd]` computed text, `["l",cmd]`
@@ -134,7 +163,8 @@ impl<'a> ReactiveJs<'a> {
       ));
     }
 
-    let state_init = self.state_init(&state_vars, &array_vars);
+    let state_init =
+      self.state_init(&state_vars, &array_vars, &transpiler, main_range);
     let binds = self.binding_object(&ops);
     let computed = fn_table(&computed);
     let lists = fn_table(&lists);
@@ -146,6 +176,7 @@ impl<'a> ReactiveJs<'a> {
 
     Some(format!(
       "(function(){{\
+       {functions}\
        var state={{{state_init}}};\
        var binds={{{binds}}};\
        var computed={{{computed}}};\
@@ -166,8 +197,7 @@ impl<'a> ReactiveJs<'a> {
        document.addEventListener('click',function(e){{\
        var b=e.target.closest&&e.target.closest('button[data-id]');\
        if(b&&handlers[b.dataset.id])handlers[b.dataset.id](e);}});\
-       for(var c in computed){{var ce=q(c);if(ce)ce.textContent=computed[c]();}}\
-       for(var l in lists){{var le=q(l);if(le)le.innerHTML=lists[l]();}}\
+       for(var s in binds)fire(s);\
        }})();"
     ))
   }
@@ -175,14 +205,20 @@ impl<'a> ReactiveJs<'a> {
   /// `"var":initial, …` for the state object. A var in `array_vars`
   /// (a list's backing `[]T`) seeds to an empty array; the rest take
   /// their scalar `VarDef` initial.
-  fn state_init(&self, vars: &[Symbol], array_vars: &[Symbol]) -> String {
+  fn state_init(
+    &self,
+    vars: &[Symbol],
+    array_vars: &[Symbol],
+    transpiler: &FnTranspiler,
+    main_range: Option<(usize, usize)>,
+  ) -> String {
     vars
       .iter()
       .map(|v| {
         let init = if array_vars.contains(v) {
           "[]".to_string()
         } else {
-          self.initial(*v)
+          self.initial(*v, transpiler, main_range)
         };
 
         format!("{}:{init}", js_str(self.interner.get(*v)))
@@ -293,6 +329,10 @@ impl<'a> ReactiveJs<'a> {
 
     let mut js = String::new();
     let mut dirty: Vec<Symbol> = Vec::new();
+    // State vars the handler reads (not necessarily writes) — they must
+    // be seeded so `state[…]` exists, e.g. a captured `rng` the body
+    // threads through `Rng::range`.
+    let mut reads: Vec<Symbol> = Vec::new();
 
     for insn in &self.sir.instructions[start..end] {
       match insn {
@@ -322,6 +362,10 @@ impl<'a> ReactiveJs<'a> {
             dst.0,
             js_str(self.interner.get(*sym)),
           ));
+
+          if !reads.contains(sym) {
+            reads.push(*sym);
+          }
         }
         // A captured reactive var reads through its `Param` slot —
         // e.g. an array a handler mutates before its list binding is
@@ -340,6 +384,10 @@ impl<'a> ReactiveJs<'a> {
             dst.0,
             js_str(self.interner.get(*sym)),
           ));
+
+          if !reads.contains(sym) {
+            reads.push(*sym);
+          }
         }
         Insn::BinOp {
           dst, op, lhs, rhs, ..
@@ -384,6 +432,23 @@ impl<'a> ReactiveJs<'a> {
             dirty.push(*owner);
           }
         }
+        // A call to a user function — `glyph`, `card_of`, a `Rng`
+        // method. The callee ships as JS via the function transpiler
+        // (reachability is gathered alongside in `emit`), so the handler
+        // just invokes it by its `js_name`.
+        Insn::Call {
+          dst, name, args, ..
+        } => {
+          let passed: Vec<String> =
+            args.iter().map(|v| format!("v{}", v.0)).collect();
+
+          js.push_str(&format!(
+            "var v{}={}({});",
+            dst.0,
+            js_name(self.interner, *name),
+            passed.join(","),
+          ));
+        }
         // The closure body ends at its `Return`. The body range can
         // run to EOF for the last closure (no following `FunDef`), so
         // stop here rather than walk into the template instructions.
@@ -399,7 +464,17 @@ impl<'a> ReactiveJs<'a> {
       js.push_str(&format!("fire({});", js_str(self.interner.get(*var))));
     }
 
-    Some((js, dirty))
+    // Seed every state var the handler touches — writes (which also
+    // fire) and reads alike.
+    let mut seed = dirty;
+
+    for sym in reads {
+      if !seed.contains(&sym) {
+        seed.push(sym);
+      }
+    }
+
+    Some((js, seed))
   }
 
   /// A closure's body range `[start, end)` plus its param symbols in
@@ -523,41 +598,34 @@ impl<'a> ReactiveJs<'a> {
     None
   }
 
-  /// The JS literal for a state var's initial value.
-  fn initial(&self, var: Symbol) -> String {
-    for insn in &self.sir.instructions {
-      let Insn::VarDef {
+  /// A state var's initial value as a JS expression. Resolved within
+  /// `main`'s range (where the reactive `VarDef`s live), through the
+  /// function transpiler so a non-literal initialiser — `face =
+  /// glyph(Card::Three)` — becomes a real call (`f$..glyph([2])`), not
+  /// the `0` an int-only scan would leave. Falls back to `0` when the
+  /// initialiser can't be lowered.
+  fn initial(
+    &self,
+    var: Symbol,
+    transpiler: &FnTranspiler,
+    main_range: Option<(usize, usize)>,
+  ) -> String {
+    let Some(range) = main_range else {
+      return "0".to_string();
+    };
+
+    for insn in &self.sir.instructions[range.0..range.1] {
+      if let Insn::VarDef {
         name,
         init: Some(init),
         ..
       } = insn
-      else {
-        continue;
-      };
-
-      if *name != var {
-        continue;
-      }
-
-      for prev in &self.sir.instructions {
-        match prev {
-          Insn::ConstInt { dst, value, .. } if dst == init => {
-            return format!("{}", *value as i64);
-          }
-          Insn::ConstFloat { dst, value, .. } if dst == init => {
-            return format!("{value}");
-          }
-          Insn::ConstBool { dst, value, .. } if dst == init => {
-            return format!("{value}");
-          }
-          Insn::ConstString { dst, symbol, .. } if dst == init => {
-            return js_str(self.interner.get(*symbol));
-          }
-          _ => {}
-        }
+        && *name == var
+      {
+        return transpiler
+          .init_expr(init.0, range)
+          .unwrap_or_else(|| "0".to_string());
       }
-
-      return "0".to_string();
     }
 
     "0".to_string()
@@ -593,7 +661,7 @@ fn add_op(ops: &mut Vec<(Symbol, Vec<String>)>, var: Symbol, op: String) {
 }
 
 /// The JS operator for a zo binary op.
-fn binop_js(op: &BinOp) -> &'static str {
+pub(crate) fn binop_js(op: &BinOp) -> &'static str {
   match op {
     BinOp::Add | BinOp::Concat => "+",
     BinOp::Sub => "-",
@@ -617,7 +685,7 @@ fn binop_js(op: &BinOp) -> &'static str {
 }
 
 /// The JS operator for a zo unary op.
-fn unop_js(op: &UnOp) -> &'static str {
+pub(crate) fn unop_js(op: &UnOp) -> &'static str {
   match op {
     UnOp::Neg => "-",
     UnOp::Not => "!",
@@ -627,7 +695,7 @@ fn unop_js(op: &UnOp) -> &'static str {
 
 /// Escape `s` as a JS string literal (incl. `<`/`>` to keep it safe
 /// inside an inline `<script>`).
-fn js_str(s: &str) -> String {
+pub(crate) fn js_str(s: &str) -> String {
   let mut out = String::with_capacity(s.len() + 2);
 
   out.push('"');
diff --git a/crates/compiler/zo-codegen-web/src/transpile.rs b/crates/compiler/zo-codegen-web/src/transpile.rs
new file mode 100644
index 00000000..54183dcb
--- /dev/null
+++ b/crates/compiler/zo-codegen-web/src/transpile.rs
@@ -0,0 +1,381 @@
+//! General zo→JS transpiler for the user functions a web program's
+//! reactive handlers and initial values reach. The browser has no host
+//! runtime, so a handler like `face = glyph(card_of(rng.range(…)))` must
+//! ship `glyph`, `card_of`, and the `Rng` methods as JS too — not just
+//! the closure itself.
+//!
+//! Lowered SIR is unstructured (labels + branches), so each function
+//! body becomes a label-dispatch loop (`for(;;)switch(pc){…}`): a `jmp`
+//! or taken branch sets `pc` and re-enters the switch, sequential blocks
+//! fall through. Every aggregate — struct, enum, tuple — is a JS array;
+//! `field .N` is `[N]` and an enum's tag is index 0. `ValueId`s are
+//! per-function, so each body is read only within its own range.
+
+use super::reactive::{binop_js, js_str, unop_js};
+
+use zo_interner::{Interner, Symbol};
+use zo_sir::{Insn, LoadSource, Sir};
+use zo_value::FunctionKind;
+
+use std::collections::{HashMap, HashSet};
+
+/// A transpilable function body: param count and the `[start, end)`
+/// instruction range (after the `FunDef` marker, up to the next one).
+struct Body {
+  params: usize,
+  start: usize,
+  end: usize,
+}
+
+/// Transpiles the user functions reachable from a web program's
+/// reactive entry points (handlers + initial values) into JS.
+pub(crate) struct FnTranspiler<'a> {
+  sir: &'a Sir,
+  interner: &'a Interner,
+  defs: HashMap<Symbol, Body>,
+}
+
+impl<'a> FnTranspiler<'a> {
+  /// Index every transpilable `FunDef` (skips `Intrinsic` — those are
+  /// FFI with no zo body) by name.
+  pub(crate) fn new(sir: &'a Sir, interner: &'a Interner) -> Self {
+    let insns = &sir.instructions;
+    let mut defs = HashMap::new();
+
+    for (i, insn) in insns.iter().enumerate() {
+      let Insn::FunDef {
+        name, params, kind, ..
+      } = insn
+      else {
+        continue;
+      };
+
+      if matches!(kind, FunctionKind::Intrinsic) {
+        continue;
+      }
+
+      defs.insert(
+        *name,
+        Body {
+          params: params.len(),
+          start: i + 1,
+          end: next_fundef(insns, i + 1),
+        },
+      );
+    }
+
+    Self {
+      sir,
+      interner,
+      defs,
+    }
+  }
+
+  /// JS definitions for every function transitively reachable from
+  /// `roots`. `None` when a reachable call has no transpilable body (an
+  /// FFI/intrinsic) — the caller then falls back to a static page.
+  pub(crate) fn emit_reachable(&self, roots: &[Symbol]) -> Option<String> {
+    let mut seen: HashSet<Symbol> = HashSet::new();
+    let mut queue: Vec<Symbol> = roots.to_vec();
+    let mut out = String::new();
+
+    while let Some(sym) = queue.pop() {
+      if !seen.insert(sym) {
+        continue;
+      }
+
+      let body = self.defs.get(&sym)?;
+
+      out.push_str(&self.transpile_fn(sym, body)?);
+
+      for insn in &self.sir.instructions[body.start..body.end] {
+        if let Insn::Call { name, .. } = insn {
+          queue.push(*name);
+        }
+      }
+    }
+
+    Some(out)
+  }
+
+  /// The call targets a reactive var's initialiser reaches (so they
+  /// seed the reachable set). Only transpilable defs are returned; an
+  /// FFI call in an initialiser is skipped here and surfaces later as a
+  /// failed `init_expr`.
+  pub(crate) fn init_roots(&self, range: (usize, usize)) -> Vec<Symbol> {
+    self.sir.instructions[range.0..range.1]
+      .iter()
+      .filter_map(|insn| match insn {
+        Insn::Call { name, .. } if self.defs.contains_key(name) => Some(*name),
+        _ => None,
+      })
+      .collect()
+  }
+
+  /// One function as `function NAME(a0,…){ … label-dispatch … }`.
+  fn transpile_fn(&self, sym: Symbol, body: &Body) -> Option<String> {
+    let insns = &self.sir.instructions[body.start..body.end];
+
+    // Locals: every symbol a store/def writes or a local load reads.
+    // Declared up front so a write in one block is visible in another.
+    let mut locals: Vec<u32> = Vec::new();
+
+    for insn in insns {
+      let local = match insn {
+        Insn::Store { name, .. }
+        | Insn::VarDef { name, .. }
+        | Insn::ConstDef { name, .. } => name.0,
+        Insn::Load {
+          src: LoadSource::Local(s),
+          ..
+        } => s.0,
+        _ => continue,
+      };
+
+      if !locals.contains(&local) {
+        locals.push(local);
+      }
+    }
+
+    // Label id → block index; the entry block (no label) is 0.
+    let mut block_of: HashMap<u32, usize> = HashMap::new();
+    let mut block = 0usize;
+
+    for insn in insns {
+      if let Insn::Label { id } = insn {
+        block += 1;
+        block_of.insert(*id, block);
+      }
+    }
+
+    let args: Vec<String> = (0..body.params).map(|i| format!("a{i}")).collect();
+    let mut out =
+      format!("function {}({}){{", js_name(self.interner, sym), args.join(","));
+
+    if !locals.is_empty() {
+      let decls: Vec<String> = locals.iter().map(|n| format!("l{n}")).collect();
+      out.push_str(&format!("var {};", decls.join(",")));
+    }
+
+    out.push_str("var pc=0;for(;;){switch(pc){case 0:");
+
+    // `dead` skips instructions after an unconditional terminator
+    // (`jmp`/`ret`) until the next label opens a fresh block.
+    let mut dead = false;
+
+    for insn in insns {
+      match insn {
+        Insn::Label { id } => {
+          dead = false;
+          out.push_str(&format!("case {}:", block_of.get(id)?));
+        }
+        _ if dead => {}
+        Insn::Jump { target } => {
+          out.push_str(&format!("pc={};break;", block_of.get(target)?));
+          dead = true;
+        }
+        Insn::BranchIfNot { cond, target } => {
+          out.push_str(&format!(
+            "if(!v{}){{pc={};break;}}",
+            cond.0,
+            block_of.get(target)?,
+          ));
+        }
+        Insn::Return { value, .. } => {
+          match value {
+            Some(v) => out.push_str(&format!("return v{};", v.0)),
+            None => out.push_str("return;"),
+          }
+          dead = true;
+        }
+        other => out.push_str(&self.stmt(other)?),
+      }
+    }
+
+    out.push_str("default:return;}}}");
+
+    Some(out)
+  }
+
+  /// One straight-line instruction as a JS statement. `None` for an
+  /// instruction the web backend can't lower (bails the whole bundle).
+  fn stmt(&self, insn: &Insn) -> Option<String> {
+    Some(match insn {
+      Insn::ConstInt { dst, value, .. } => {
+        format!("var v{}={};", dst.0, *value as i64)
+      }
+      Insn::ConstFloat { dst, value, .. } => format!("var v{}={value};", dst.0),
+      Insn::ConstBool { dst, value, .. } => format!("var v{}={value};", dst.0),
+      Insn::ConstString { dst, symbol, .. } => {
+        format!("var v{}={};", dst.0, js_str(self.interner.get(*symbol)))
+      }
+      Insn::Load {
+        dst,
+        src: LoadSource::Param(i),
+        ..
+      } => format!("var v{}=a{i};", dst.0),
+      Insn::Load {
+        dst,
+        src: LoadSource::Local(s),
+        ..
+      } => format!("var v{}=l{};", dst.0, s.0),
+      Insn::Store { name, value, .. } => format!("l{}=v{};", name.0, value.0),
+      Insn::TupleIndex {
+        dst, tuple, index, ..
+      } => format!("var v{}=v{}[{index}];", dst.0, tuple.0),
+      Insn::FieldStore {
+        base, index, value, ..
+      } => format!("v{}[{index}]=v{};", base.0, value.0),
+      Insn::EnumConstruct {
+        dst, variant, fields, ..
+      } => {
+        let mut parts = vec![variant.to_string()];
+        parts.extend(fields.iter().map(|f| format!("v{}", f.0)));
+        format!("var v{}=[{}];", dst.0, parts.join(","))
+      }
+      Insn::StructConstruct { dst, fields, .. } => {
+        let parts: Vec<String> =
+          fields.iter().map(|f| format!("v{}", f.0)).collect();
+        format!("var v{}=[{}];", dst.0, parts.join(","))
+      }
+      Insn::TupleLiteral { dst, elements, .. } => {
+        let parts: Vec<String> =
+          elements.iter().map(|e| format!("v{}", e.0)).collect();
+        format!("var v{}=[{}];", dst.0, parts.join(","))
+      }
+      Insn::BinOp {
+        dst, op, lhs, rhs, ..
+      } => format!("var v{}=(v{}{}v{});", dst.0, lhs.0, binop_js(op), rhs.0),
+      Insn::UnOp { dst, op, rhs, .. } => {
+        format!("var v{}=({}v{});", dst.0, unop_js(op), rhs.0)
+      }
+      Insn::Call {
+        dst, name, args, ..
+      } => {
+        let passed: Vec<String> =
+          args.iter().map(|v| format!("v{}", v.0)).collect();
+
+        format!(
+          "var v{}={}({});",
+          dst.0,
+          js_name(self.interner, *name),
+          passed.join(","),
+        )
+      }
+      // Declarations are no-ops (the matching `Store` assigns); scope
+      // drops and nops carry no runtime effect.
+      Insn::VarDef { .. }
+      | Insn::ConstDef { .. }
+      | Insn::Drop { .. }
+      | Insn::Nop => String::new(),
+      _ => return None,
+    })
+  }
+
+  /// A reactive var's initial value as a JS expression, resolved within
+  /// `range` (`main`'s body — `ValueId`s are per-function). Handles
+  /// literals, enum/struct construction, and calls, recursively:
+  /// `face = glyph(Card::Three)` becomes `f$..glyph([2])`. `None` when
+  /// the chain hits an instruction it can't lower.
+  pub(crate) fn init_expr(&self, vid: u32, range: (usize, usize)) -> Option<String> {
+    for insn in &self.sir.instructions[range.0..range.1] {
+      match insn {
+        Insn::ConstInt { dst, value, .. } if dst.0 == vid => {
+          return Some(format!("{}", *value as i64));
+        }
+        Insn::ConstFloat { dst, value, .. } if dst.0 == vid => {
+          return Some(format!("{value}"));
+        }
+        Insn::ConstBool { dst, value, .. } if dst.0 == vid => {
+          return Some(format!("{value}"));
+        }
+        Insn::ConstString { dst, symbol, .. } if dst.0 == vid => {
+          return Some(js_str(self.interner.get(*symbol)));
+        }
+        Insn::EnumConstruct {
+          dst, variant, fields, ..
+        } if dst.0 == vid => {
+          let mut parts = vec![variant.to_string()];
+
+          for f in fields {
+            parts.push(self.init_expr(f.0, range)?);
+          }
+
+          return Some(format!("[{}]", parts.join(",")));
+        }
+        Insn::StructConstruct { dst, fields, .. } if dst.0 == vid => {
+          let mut parts = Vec::new();
+
+          for f in fields {
+            parts.push(self.init_expr(f.0, range)?);
+          }
+
+          return Some(format!("[{}]", parts.join(",")));
+        }
+        Insn::Call {
+          dst, name, args, ..
+        } if dst.0 == vid => {
+          let mut passed = Vec::new();
+
+          for arg in args {
+            passed.push(self.init_expr(arg.0, range)?);
+          }
+
+          return Some(format!(
+            "{}({})",
+            js_name(self.interner, *name),
+            passed.join(","),
+          ));
+        }
+        _ => {}
+      }
+    }
+
+    None
+  }
+
+  /// The `[start, end)` range of `main`'s body, where the reactive
+  /// `VarDef`s and their initialisers live.
+  pub(crate) fn main_range(&self) -> Option<(usize, usize)> {
+    let insns = &self.sir.instructions;
+
+    for (i, insn) in insns.iter().enumerate() {
+      if let Insn::FunDef { name, .. } = insn {
+        let name = self.interner.get(*name);
+
+        if name == "main" || name.ends_with("::main") {
+          return Some((i + 1, next_fundef(insns, i + 1)));
+        }
+      }
+    }
+
+    None
+  }
+}
+
+/// The index of the next `FunDef` at or after `from`, or the end of the
+/// stream — the exclusive upper bound of a function's body.
+fn next_fundef(insns: &[Insn], from: usize) -> usize {
+  insns[from..]
+    .iter()
+    .position(|insn| matches!(insn, Insn::FunDef { .. }))
+    .map_or(insns.len(), |offset| from + offset)
+}
+
+/// A JS-safe function name for a zo symbol: `f$` + the symbol text with
+/// every non-identifier byte replaced by `_`. The `f$` prefix avoids a
+/// digit-leading name (`001_cards::glyph`) and collisions with the
+/// reactive runtime's own identifiers.
+pub(crate) fn js_name(interner: &Interner, sym: Symbol) -> String {
+  let mut out = String::from("f$");
+
+  for ch in interner.get(sym).chars() {
+    if ch.is_ascii_alphanumeric() || ch == '_' {
+      out.push(ch);
+    } else {
+      out.push('_');
+    }
+  }
+
+  out
+}
diff --git a/crates/compiler/zo-driver/src/cmd/build.rs b/crates/compiler/zo-driver/src/cmd/build.rs
index c47bf921..8b56dde0 100644
--- a/crates/compiler/zo-driver/src/cmd/build.rs
+++ b/crates/compiler/zo-driver/src/cmd/build.rs
@@ -82,82 +82,98 @@ impl Build {
     source_files: &[(&PathBuf, String)],
     source: &Path,
   ) -> Result<(), Error> {
-    let app = self.app_path(source);
+    let app =
+      bundle_webview_app(compiler, &self.args, source, &source_files[0].1)?;
 
-    let Some(name) = app.file_stem().and_then(|s| s.to_str()) else {
-      eprintln!("Error: cannot derive an app name from {}", app.display());
+    if !self.args.quiet {
+      eprintln!("zo — built {}", app.display());
+    }
 
-      std::process::exit(crate::constants::EXIT_CODE_USAGE);
-    };
+    Ok(())
+  }
+}
 
-    compiler.set_webviewing(Webviewing::Yes);
+/// Compile the program for the webview runtime and package it into a
+/// double-clickable `.app`, returning the bundle's path. Shared by
+/// `build --target webview` and `run --target webview`. Sets the
+/// `webviewing` flag and analyzes here (the webview codegen differs),
+/// so the caller passes raw source rather than a prior analysis.
+pub(crate) fn bundle_webview_app(
+  compiler: &mut Compiler,
+  args: &args::Args,
+  source: &Path,
+  source_code: &str,
+) -> Result<PathBuf, Error> {
+  let app = webview_app_path(args, source);
+
+  let Some(name) = app.file_stem().and_then(|s| s.to_str()) else {
+    eprintln!("Error: cannot derive an app name from {}", app.display());
+
+    std::process::exit(crate::constants::EXIT_CODE_USAGE);
+  };
 
-    let (semantic, tokenization, parsing, session, file_table) =
-      compiler.analyze_source(&source_files[0].1, source);
+  compiler.set_webviewing(Webviewing::Yes);
 
-    // Collect referenced local images before the analysis is consumed —
-    // resolved against the source's directory, the same base the
-    // in-process run path uses.
-    let base_dir = source.parent().unwrap_or_else(|| Path::new("."));
-    let assets = webview_assets(&semantic.sir, &session.interner, base_dir);
+  let (semantic, tokenization, parsing, session, file_table) =
+    compiler.analyze_source(source_code, source);
 
-    let analyzed = Analyzed {
-      semantic,
-      tokenization,
-      parsing,
-      session,
-      file_table,
-    };
+  // Collect referenced local images before the analysis is consumed —
+  // resolved against the source's directory.
+  let base_dir = source.parent().unwrap_or_else(|| Path::new("."));
+  let assets = webview_assets(&semantic.sir, &session.interner, base_dir);
 
-    let staging = std::env::temp_dir()
-      .join(format!("zo_build_webview_{}", std::process::id()));
-    let binary = staging.join(name);
+  let analyzed = Analyzed {
+    semantic,
+    tokenization,
+    parsing,
+    session,
+    file_table,
+  };
 
-    let _ = std::fs::create_dir_all(&staging);
+  let staging = std::env::temp_dir()
+    .join(format!("zo_build_webview_{}", std::process::id()));
+  let binary = staging.join(name);
 
-    compiler.compile_analyzed(&analyzed, self.args.target.into(), &binary)?;
+  let _ = std::fs::create_dir_all(&staging);
 
-    let runtime_dylib = staging.join("deps").join("libzo_runtime.dylib");
-    let bundle_id = zo_bundler::bundle_id(name);
+  compiler.compile_analyzed(&analyzed, args.target.into(), &binary)?;
 
-    let spec = macos::BundleSpec {
-      binary: &binary,
-      runtime_dylib: &runtime_dylib,
-      app_dir: &app,
-      name,
-      bundle_id: &bundle_id,
-      assets: &assets,
-    };
+  let runtime_dylib = staging.join("deps").join("libzo_runtime.dylib");
+  let bundle_id = zo_bundler::bundle_id(name);
 
-    if let Err(error) = macos::bundle(&spec) {
-      eprintln!("Error bundling webview app: {error}");
+  let spec = macos::BundleSpec {
+    binary: &binary,
+    runtime_dylib: &runtime_dylib,
+    app_dir: &app,
+    name,
+    bundle_id: &bundle_id,
+    assets: &assets,
+  };
 
-      std::process::exit(crate::constants::EXIT_CODE_BUNDLE);
-    }
+  if let Err(error) = macos::bundle(&spec) {
+    eprintln!("Error bundling webview app: {error}");
 
-    let _ = std::fs::remove_dir_all(&staging);
+    std::process::exit(crate::constants::EXIT_CODE_BUNDLE);
+  }
 
-    if !self.args.quiet {
-      eprintln!("zo — built {}", app.display());
-    }
+  let _ = std::fs::remove_dir_all(&staging);
 
-    Ok(())
-  }
+  Ok(app)
+}
 
-  /// Where the `.app` lands: `-o` names it, else
-  /// `<--out-dir>/<source-stem>.app`, else next to the source.
-  fn app_path(&self, source: &Path) -> PathBuf {
-    let base = match (&self.args.output, self.args.out_dir.as_deref()) {
-      (Some(out), _) => out.clone(),
-      (None, Some(dir)) => {
-        let stem = source.file_stem().unwrap_or(source.as_os_str());
-        dir.join(stem)
-      }
-      (None, None) => source.with_extension(""),
-    };
+/// Where the `.app` lands: `-o` names it, else
+/// `<--out-dir>/<source-stem>.app`, else next to the source.
+fn webview_app_path(args: &args::Args, source: &Path) -> PathBuf {
+  let base = match (&args.output, args.out_dir.as_deref()) {
+    (Some(out), _) => out.clone(),
+    (None, Some(dir)) => {
+      let stem = source.file_stem().unwrap_or(source.as_os_str());
+      dir.join(stem)
+    }
+    (None, None) => source.with_extension(""),
+  };
 
-    base.with_extension("app")
-  }
+  base.with_extension("app")
 }
 
 /// The program's referenced local image files — `<img>` srcs and CSS
diff --git a/crates/compiler/zo-driver/src/cmd/run.rs b/crates/compiler/zo-driver/src/cmd/run.rs
index a6136390..ca928334 100644
--- a/crates/compiler/zo-driver/src/cmd/run.rs
+++ b/crates/compiler/zo-driver/src/cmd/run.rs
@@ -1,53 +1,12 @@
 use crate::args;
 use crate::cmd::Handle;
+use crate::cmd::build::bundle_webview_app;
 use crate::constants::{EXIT_CODE_ERROR, EXIT_CODE_USAGE};
 
 use zo_bundler::ios::simulator::Simulator;
 use zo_compiler::{Analyzed, Compiler};
-use zo_error::{Error, ErrorKind};
-use zo_interner::Symbol;
-use zo_runtime::{Runtime, Server};
-use zo_runtime_render::reactive::{
-  ResolvedComputedBindings, ResolvedConditional, apply_computed_bindings,
-  apply_conditional_bindings, apply_list_bindings, shift_for_deltas,
-};
-use zo_runtime_render::render::{EventRegistry, Graphics, RuntimeConfig};
-use zo_runtime_render::render::{StateCell, StateValue};
-use zo_sir::{ComputedBinding, Insn, ListBinding, ListItemCmd};
-use zo_span::Span;
-use zo_ui_protocol::{Ui, UiCommand};
-use zo_value::FunctionKind;
-use zo_value::ValueId;
-
-/// Parameters for building reactive event handlers.
-struct ReactiveContext<'a> {
-  instructions: &'a [Insn],
-  interner: &'a zo_interner::Interner,
-  handler_names: &'a [String],
-  /// Reactive bindings that target `UiCommand::Text(_)`
-  /// content at the given command index.
-  text_bindings: &'a [(usize, Symbol)],
-  /// Reactive bindings that target a named attribute on a
-  /// `UiCommand::Element` at the given command index. The
-  /// `Attr` entries are always `Attr::Dynamic` — the runtime
-  /// calls `UiCommand::set_attr` to apply each patch.
-  attr_bindings: &'a [(usize, zo_ui_protocol::Attr)],
-  /// Computed text bindings: `(cmd_idx, ComputedBinding)`
-  /// pointing at a `UiCommand::Text(_)` whose value is
-  /// recomputed by invoking the binding's closure over the
-  /// captured locals on every reactive update.
-  computed_bindings: &'a [(usize, ComputedBinding)],
-  /// List bindings: `(cmd_idx, ListBinding)`. Each entry
-  /// targets a placeholder `UiCommand::Text(_)` slot that
-  /// the runtime replaces with the rendered list items
-  /// (one item per element of `items_var`'s state cell)
-  /// on every reactive update.
-  list_bindings: &'a [(usize, ListBinding)],
-  /// Tier-2 conditional regions, rebased like their siblings.
-  conditional_bindings: &'a [zo_sir::ConditionalBinding],
-  commands: &'a [UiCommand],
-  shared_cmds: std::sync::Arc<std::sync::Mutex<Vec<UiCommand>>>,
-}
+use zo_error::Error;
+use zo_runtime::Server;
 
 #[derive(clap::Args, Debug)]
 pub(crate) struct Run {
@@ -81,276 +40,83 @@ impl Run {
       quiet: self.args.quiet,
     });
 
+    // The webview bundler sets the `webviewing` flag and owns its own
+    // analysis (its codegen differs), so it runs before the shared
+    // analysis below.
+    if self.args.target.is_webview() {
+      return self.run_webview(&mut compiler, input_path, &source);
+    }
+
     let (semantic, tokenization, parsing, session, file_table) =
       compiler.analyze_source(&source, input_path);
 
-    // iOS/watchOS and web all build an artifact and hand off to a
-    // Runtimer — the Simulator for iOS/watchOS, a local server +
-    // browser for web. None uses the in-process command/event runtime
-    // below, so they branch out here on the shared analysis.
-    if self.args.target.is_ios()
-      || self.args.target.is_watchos()
-      || self.args.target.is_web()
-    {
-      let analyzed = Analyzed {
-        semantic,
-        tokenization,
-        parsing,
-        session,
-        file_table,
-      };
+    let analyzed = Analyzed {
+      semantic,
+      tokenization,
+      parsing,
+      session,
+      file_table,
+    };
 
-      return if self.args.target.is_web() {
-        self.run_web(&mut compiler, &analyzed)
-      } else {
-        self.run_simulator(&mut compiler, &analyzed, input_path)
-      };
+    // Every target runs the compiled artifact — `zo run` and `zo build`
+    // share one execution semantics. iOS/watchOS and web hand the
+    // artifact to their own Runtimer; native compiles to a temp binary
+    // and execs it. A `#render` program opens its own window from that
+    // binary; a CLI program runs to completion.
+    if self.args.target.is_ios() || self.args.target.is_watchos() {
+      return self.run_simulator(&mut compiler, &analyzed, input_path);
     }
 
-    // Collect the set of template ValueIds targeted by `#render`
-    // directives. Templates are component definitions —
-    // rendering every `Insn::Template` indiscriminately would
-    // also render intermediate components that are only meant
-    // to be inlined into a parent via `<nested />`.
-    let mut dom_targets: Vec<ValueId> = Vec::new();
-    let mut has_dom_directive = false;
-
-    for insn in &semantic.sir.instructions {
-      if let Insn::Directive { name, value, .. } = insn
-        && zo_ui_protocol::is_render_directive(session.interner.get(*name))
-      {
-        has_dom_directive = true;
-        dom_targets.push(*value);
-      }
+    if self.args.target.is_web() {
+      return self.run_web(&mut compiler, &analyzed);
     }
 
-    // Extract UI commands and bindings only from templates
-    // that are actually targeted by a `#render` directive.
-    let mut ui_commands = Vec::new();
-    let mut text_bindings: Vec<(usize, Symbol)> = Vec::new();
-    let mut attr_bindings: Vec<(usize, zo_ui_protocol::Attr)> = Vec::new();
-    let mut computed_bindings: Vec<(usize, ComputedBinding)> = Vec::new();
-    // List bindings flow through the same offset-rebase as
-    // their siblings so per-template index spaces compose
-    // without collisions. Reactive expansion (re-rendering
-    // when the bound `mut []T` changes) lands behind the
-    // runtime's array-StateCell support — until that arrives,
-    // the placeholder text emitted by the executor renders
-    // as an empty slot, which is correct for the empty-array
-    // initial frame.
-    let mut list_bindings: Vec<(usize, ListBinding)> = Vec::new();
-    let mut conditional_bindings: Vec<zo_sir::ConditionalBinding> = Vec::new();
-
-    for insn in &semantic.sir.instructions {
-      if let Insn::Template {
-        id,
-        commands,
-        bindings,
-        ..
-      } = insn
-        && dom_targets.contains(id)
-      {
-        let base = ui_commands.len();
-
-        ui_commands.extend_from_slice(commands);
-
-        for (cmd_idx, sym) in &bindings.text {
-          text_bindings.push((base + cmd_idx, *sym));
-        }
-
-        for (cmd_idx, attr) in &bindings.attrs {
-          attr_bindings.push((base + cmd_idx, attr.clone()));
-        }
+    // Native: compile to a per-run isolated dir, then exec. The
+    // isolation matters — codegen emits `LC_LOAD_DYLIB
+    // @loader_path/deps/libzo_runtime.dylib` and the compiler stages
+    // the dylib into a sibling `deps/`. A flat shared `temp_dir()`
+    // would let one run overwrite the dylib while an earlier run (or a
+    // dyld-stuck zombie) still holds it open — wedging the new run in
+    // `dyld3::MachOFile::compatibleSlice` indefinitely. A fresh
+    // subdirectory per run sidesteps the whole class.
+    let run_dir =
+      std::env::temp_dir().join(format!("zo_run_{}", std::process::id()));
 
-        for (cmd_idx, cb) in &bindings.computed {
-          computed_bindings.push((base + cmd_idx, cb.clone()));
-        }
+    let _ = std::fs::create_dir_all(&run_dir);
 
-        for (cmd_idx, lb) in &bindings.list {
-          list_bindings.push((base + cmd_idx, lb.clone()));
-        }
+    let temp_path = run_dir.join("a.out");
 
-        for cond in &bindings.conditional {
-          let mut rebased = cond.clone();
+    compiler.compile_analyzed(&analyzed, self.args.target.into(), &temp_path)?;
 
-          rebased.cmd_idx += base;
-          conditional_bindings.push(rebased);
-        }
-      }
-    }
+    // Run with cwd set to the source file's parent so relative paths in
+    // `read_file(...)` etc. resolve against the program's own directory
+    // regardless of where `zo run` was invoked from.
+    let mut cmd = std::process::Command::new(&temp_path);
 
-    // Resolve relative image paths to absolute paths using
-    // the source file's parent directory as the base. Both
-    // native and web runtimes need absolute paths — native
-    // for filesystem reads, web for the `zo://localhost`
-    // custom protocol. Remote URLs pass through untouched.
-    let mut ui = Ui::new(ui_commands);
+    cmd
+      .stdin(std::process::Stdio::inherit())
+      .stdout(std::process::Stdio::inherit())
+      .stderr(std::process::Stdio::inherit());
 
-    if let Some(base_dir) = input_path.parent() {
-      ui.resolve_image_paths(base_dir);
+    if let Some(parent) = input_path.parent()
+      && !parent.as_os_str().is_empty()
+    {
+      cmd.current_dir(parent);
     }
 
-    let ui_commands = ui.into_commands();
-
-    // Template path: launch runtime.
-    if has_dom_directive && !ui_commands.is_empty() {
-      let graphics = if self.args.target.is_webview() {
-        Graphics::Web
-      } else {
-        Graphics::Native
-      };
-
-      if !self.args.quiet {
-        eprintln!(
-          "Running template with {} UI commands \
-           ({graphics:?} mode)...",
-          ui_commands.len(),
-        );
-      }
-
-      // Collect handler names from Event commands.
-      let mut handler_names: Vec<String> = Vec::new();
-
-      for cmd in &ui_commands {
-        if let UiCommand::Event { handler, .. } = cmd
-          && !handler.is_empty()
-          && !handler_names.contains(handler)
-        {
-          handler_names.push(handler.clone());
-        }
-      }
-
-      // Detect reactive template. A template with only
-      // computed bindings (no `mut`-driven simple text or
-      // attr bindings) still needs the reactive path so the
-      // computed closures fire on each event.
-      let has_bindings = !text_bindings.is_empty()
-        || !attr_bindings.is_empty()
-        || !computed_bindings.is_empty()
-        || !list_bindings.is_empty()
-        || !conditional_bindings.is_empty();
-      let is_reactive = has_bindings
-        && handler_names.iter().any(|h| h.starts_with("__closure_"));
-
-      let config = RuntimeConfig {
-        library_path: None,
-        title: format!(
-          "{}",
-          input_path.file_name().unwrap_or_default().to_string_lossy()
-        ),
-        size: (800.0, 600.0),
-        graphics,
-      };
-
-      let mut runtime = Runtime::with_config(config);
-
-      runtime.set_commands(ui_commands.clone());
-
-      // Get shared command buffer for reactive handlers.
-      let shared_cmds = runtime.shared_commands();
-
-      let mut event_registry = EventRegistry::new();
-
-      if is_reactive {
-        let ctx = ReactiveContext {
-          instructions: &semantic.sir.instructions,
-          interner: &session.interner,
-          handler_names: &handler_names,
-          text_bindings: &text_bindings,
-          attr_bindings: &attr_bindings,
-          computed_bindings: &computed_bindings,
-          list_bindings: &list_bindings,
-          conditional_bindings: &conditional_bindings,
-          commands: &ui_commands,
-          shared_cmds,
-        };
-
-        self.build_reactive_handlers(&ctx, &mut event_registry);
-      } else {
-        self.build_static_handlers(
-          &semantic.sir.instructions,
-          &session.interner,
-          &handler_names,
-          &mut event_registry,
-        );
-      }
-
-      runtime.set_events(event_registry);
+    let status = cmd.status();
 
-      runtime.run().map_err(|_| {
-        Error::new(ErrorKind::InternalCompilerError, Span::ZERO)
-      })?;
-    } else {
-      // Programming path: compile to a per-run isolated
-      // dir, execute. The isolation matters: the codegen
-      // emits `LC_LOAD_DYLIB @loader_path/deps/libzo_runtime
-      // .dylib` and the compiler stages the dylib into a
-      // sibling `deps/` directory. A flat shared `temp_dir()`
-      // setup means every run overwrites the same dylib path
-      // while earlier runs (or zombie dyld-stuck processes)
-      // may still hold the file open — which on macOS leaves
-      // the new run wedged in `dyld3::MachOFile::compatible
-      // Slice` indefinitely. A fresh subdirectory per run
-      // sidesteps the whole class.
-      let run_dir =
-        std::env::temp_dir().join(format!("zo_run_{}", std::process::id()));
-
-      let _ = std::fs::create_dir_all(&run_dir);
-
-      let temp_path = run_dir.join("a.out");
-
-      // Reuse the single analysis from above — codegen and
-      // link the program we already analyzed for template
-      // detection, instead of re-analyzing it through
-      // `compile`. One analysis per program, one diagnostic
-      // report.
-      let analyzed = Analyzed {
-        semantic,
-        tokenization,
-        parsing,
-        session,
-        file_table,
-      };
+    let _ = std::fs::remove_dir_all(&run_dir);
 
-      compiler.compile_analyzed(
-        &analyzed,
-        self.args.target.into(),
-        &temp_path,
-      )?;
-
-      // Run with cwd set to the source file's parent so
-      // relative paths in `read_file(...)` etc. resolve
-      // against the program's own directory regardless of
-      // where `zo run` was invoked from. Mirrors zo-test-
-      // runner's behaviour and keeps `zo run path/to.zo`
-      // identical from any shell cwd.
-      let mut cmd = std::process::Command::new(&temp_path);
-
-      cmd
-        .stdin(std::process::Stdio::inherit())
-        .stdout(std::process::Stdio::inherit())
-        .stderr(std::process::Stdio::inherit());
-
-      if let Some(parent) = input_path.parent()
-        && !parent.as_os_str().is_empty()
-      {
-        cmd.current_dir(parent);
+    match status {
+      Ok(s) if !s.success() => {
+        std::process::exit(s.code().unwrap_or(EXIT_CODE_ERROR));
       }
-
-      let status = cmd.status();
-
-      let _ = std::fs::remove_dir_all(&run_dir);
-
-      match status {
-        Ok(s) if !s.success() => {
-          std::process::exit(s.code().unwrap_or(EXIT_CODE_ERROR));
-        }
-        Err(e) => {
-          eprintln!("Error executing program: {e}");
-          std::process::exit(EXIT_CODE_ERROR);
-        }
-        _ => {}
+      Err(e) => {
+        eprintln!("Error executing program: {e}");
+        std::process::exit(EXIT_CODE_ERROR);
       }
+      _ => {}
     }
 
     Ok(())
@@ -467,484 +233,28 @@ impl Run {
     Ok(())
   }
 
-  /// Register static event handlers (non-reactive path).
-  fn build_static_handlers(
-    &self,
-    instructions: &[Insn],
-    interner: &zo_interner::Interner,
-    handler_names: &[String],
-    registry: &mut EventRegistry,
-  ) {
-    for insn in instructions {
-      if let Insn::FunDef { name, .. } = insn {
-        let fun_name = interner.get(*name).to_string();
-
-        if handler_names.contains(&fun_name) {
-          let handler_name = fun_name.clone();
-
-          registry.register(
-            fun_name,
-            Box::new(move |payload| {
-              println!("[zo] event handler '{handler_name}' called");
-              println!("[zo] event payload '{payload}' passed");
-            }),
-          );
-        }
-      }
-    }
-  }
-
-  /// Build reactive event handlers with shared state.
-  fn build_reactive_handlers(
+  /// Build the webview `.app` from this program, then launch it. Shares
+  /// the bundler with `build --target webview`; `run` opens the app
+  /// once it is built.
+  fn run_webview(
     &self,
-    ctx: &ReactiveContext<'_>,
-    registry: &mut EventRegistry,
-  ) {
-    let instructions = ctx.instructions;
-    let interner = ctx.interner;
-    let handler_names = ctx.handler_names;
-    let text_bindings = ctx.text_bindings;
-    let attr_bindings = ctx.attr_bindings;
-    let computed_bindings = ctx.computed_bindings;
-    let commands = ctx.commands;
-    let shared_cmds = &ctx.shared_cmds;
-    // Shared SIR instructions for all handler closures
-    // (avoids cloning per handler).
-    let sir_arc = std::sync::Arc::new(instructions.to_vec());
-    // Per-symbol string snapshot for the evaluator's
-    // `Insn::ConstString` resolution. Cloned by `Arc` into
-    // each handler closure — `Interner` itself isn't
-    // `Clone`-friendly across threads.
-    let strings_arc = std::sync::Arc::new(interner.snapshot());
-
-    // Create state cells for each bound variable. Both text
-    // and attribute bindings can reference the same variable,
-    // so we dedupe by symbol.
-    let mut state_slots: Vec<(Symbol, String, StateCell)> = Vec::new();
-
-    let register_slot =
-      |sym: Symbol, slots: &mut Vec<(Symbol, String, StateCell)>| {
-        if slots.iter().any(|(s, _, _)| *s == sym) {
-          return;
-        }
-
-        let var_name = interner.get(sym).to_string();
-        let initial = Self::find_initial_value(instructions, sym, interner);
-
-        slots.push((sym, var_name, StateCell::new(initial)));
-      };
-
-    for (_cmd_idx, sym) in text_bindings {
-      register_slot(*sym, &mut state_slots);
-    }
-
-    for (_cmd_idx, attr) in attr_bindings {
-      if let zo_ui_protocol::Attr::Dynamic { var, .. } = attr {
-        // `Attr::Dynamic.var` carries the raw interner id
-        // (u32) so ui-protocol doesn't depend on zo-interner.
-        let sym = Symbol(*var);
-
-        register_slot(sym, &mut state_slots);
-      }
-    }
-
-    // Computed-binding captures drive their closures; each
-    // capture needs a state cell so the evaluator can
-    // resolve `Load Local(sym)` against shared state.
-    for (_cmd_idx, cb) in computed_bindings {
-      for sym in &cb.captures {
-        register_slot(*sym, &mut state_slots);
-      }
-    }
-
-    // List-binding `items_var`s back the per-event list
-    // re-render. The cell carries `StateValue::Strs(...)`
-    // initialized from the SIR's `ArrayLiteral` (empty for
-    // `mut todos: []str = []`).
-    for (_cmd_idx, lb) in ctx.list_bindings {
-      register_slot(lb.items_var, &mut state_slots);
-    }
-
-    // Conditional regions read their condition var, and each
-    // branch's text interps read theirs at splice time.
-    for cond in ctx.conditional_bindings {
-      register_slot(cond.var, &mut state_slots);
-
-      for (_, sym) in cond.true_text.iter().chain(&cond.false_text) {
-        register_slot(*sym, &mut state_slots);
-      }
-    }
-
-    // Every reactive var keyed to its cell slot, so a handler that
-    // mutates a template mutable without capturing it (the `+` of a
-    // counter — the executor leaves a post-binding closure's mutable
-    // free) still writes the right cell.
-    let state_syms: Vec<(Symbol, usize)> = state_slots
-      .iter()
-      .enumerate()
-      .map(|(slot_idx, (sym, _, _))| (*sym, slot_idx))
-      .collect();
-
-    // Register closure handlers.
-    for insn in instructions {
-      let (name, capture_count, params) = match insn {
-        Insn::FunDef {
-          name,
-          kind: FunctionKind::Closure { capture_count },
-          params,
-          ..
-        } => (name, *capture_count, params),
-        _ => continue,
-      };
-
-      let fun_name = interner.get(*name).to_string();
-
-      if !handler_names.contains(&fun_name) {
-        continue;
-      }
-
-      // Build capture map: param index → state slot index.
-      let cc = capture_count as usize;
-      let mut capture_map: Vec<(usize, usize)> = Vec::new();
-
-      for (pi, &(cap_name, _)) in params.iter().enumerate().take(cc) {
-        if let Some(slot_idx) =
-          state_slots.iter().position(|(s, _, _)| *s == cap_name)
-        {
-          capture_map.push((pi, slot_idx));
-        }
-      }
-
-      // Clone data for the handler closure.
-      let cells: Vec<StateCell> = state_slots
-        .iter()
-        .map(|(_, _, cell)| cell.clone())
-        .collect();
-
-      // Text bindings — (cmd_idx, slot_idx) pairs.
-      let text_binds: Vec<(usize, usize)> = text_bindings
-        .iter()
-        .filter_map(|(cmd_idx, sym)| {
-          state_slots
-            .iter()
-            .position(|(s, _, _)| s == sym)
-            .map(|slot_idx| (*cmd_idx, slot_idx))
-        })
-        .collect();
-
-      // Attribute bindings — (cmd_idx, attr_name, slot_idx)
-      // triples. `attr_name` is pre-extracted from the Dynamic
-      // attr so the patch closure doesn't need to re-match the
-      // enum on every invocation.
-      let attr_binds: Vec<(usize, String, usize)> = attr_bindings
-        .iter()
-        .filter_map(|(cmd_idx, attr)| {
-          if let zo_ui_protocol::Attr::Dynamic { name, var, .. } = attr {
-            let sym = Symbol(*var);
-
-            state_slots
-              .iter()
-              .position(|(s, _, _)| *s == sym)
-              .map(|slot_idx| (*cmd_idx, name.clone(), slot_idx))
-          } else {
-            None
-          }
-        })
-        .collect();
-
-      let computed_binds =
-        Self::resolve_computed_bindings(computed_bindings, &state_slots);
-
-      let list_binds: Vec<(usize, usize, Vec<ListItemCmd>)> = ctx
-        .list_bindings
-        .iter()
-        .filter_map(|(cmd_idx, lb)| {
-          state_slots
-            .iter()
-            .position(|(s, _, _)| *s == lb.items_var)
-            .map(|slot_idx| (*cmd_idx, slot_idx, lb.item_template.clone()))
-        })
-        .collect();
-
-      let conditional_binds = Self::resolve_conditional_bindings(
-        ctx.conditional_bindings,
-        &state_slots,
-      );
-
-      let commands_copy = commands.to_vec();
-      let shared = shared_cmds.clone();
-      let sir = sir_arc.clone();
-      let strings = strings_arc.clone();
-      let closure_sym = *name;
-      let computed_binds_clone = computed_binds.clone();
-      let conditional_binds_clone = conditional_binds.clone();
-      let list_binds_clone = list_binds.clone();
-      let state_syms_clone = state_syms.clone();
-
-      registry.register(
-        fun_name,
-        Box::new(move |payload| {
-          let mut eval = zo_runtime_render::evaluator::HandlerEvaluator::new()
-            .with_state_syms(state_syms_clone.clone());
-
-          eval.execute(
-            &sir,
-            closure_sym,
-            &cells,
-            &capture_map,
-            &strings,
-            Some(payload),
-          );
-
-          let mut new_cmds = commands_copy.clone();
-
-          for &(cmd_idx, slot_idx) in &text_binds {
-            let value = cells[slot_idx].get().display();
-
-            if let Some(UiCommand::Text(s)) = new_cmds.get_mut(cmd_idx) {
-              *s = value;
-            }
-          }
-
-          // Conditional regions splice first: a swap can change
-          // the stream length, so every later binding shifts its
-          // target by the returned deltas.
-          let deltas = apply_conditional_bindings(
-            &mut new_cmds,
-            &conditional_binds_clone,
-            &cells,
-          );
-
-          // Element attribute patches dispatch through
-          // `UiCommand::set_attr` which handles the per-variant
-          // field updates uniformly.
-          for (cmd_idx, attr_name, slot_idx) in &attr_binds {
-            let value = cells[*slot_idx].get().display();
-            let at = shift_for_deltas(*cmd_idx, &deltas);
-
-            if let Some(cmd) = new_cmds.get_mut(at) {
-              cmd.set_attr(attr_name, &value);
-            }
-          }
-
-          let computed_shifted: ResolvedComputedBindings = computed_binds_clone
-            .iter()
-            .map(|(idx, name, caps)| {
-              (shift_for_deltas(*idx, &deltas), *name, caps.clone())
-            })
-            .collect();
-
-          apply_computed_bindings(
-            &mut new_cmds,
-            &computed_shifted,
-            &cells,
-            &sir,
-            &strings,
-          );
-
-          // List re-render runs LAST — `splice` shifts
-          // tail indices, but no other binding sits past
-          // a list anchor in the wip's shape. When more
-          // complex layouts appear, the binding-index
-          // remap belongs in the executor's
-          // `optimize_with_indices`-style pass.
-          let lists_shifted: Vec<(usize, usize, Vec<ListItemCmd>)> =
-            list_binds_clone
-              .iter()
-              .map(|(idx, slot, recipe)| {
-                (shift_for_deltas(*idx, &deltas), *slot, recipe.clone())
-              })
-              .collect();
-
-          apply_list_bindings(&mut new_cmds, &lists_shifted, &cells);
-
-          *shared.lock().unwrap() = new_cmds;
-        }),
-      );
-    }
-
-    // Initial render: invoke each computed/list binding
-    // once before the runtime starts so the first frame
-    // shows the correct content instead of the empty
-    // placeholders the executor pushed.
-    if !computed_bindings.is_empty()
-      || !ctx.list_bindings.is_empty()
-      || !ctx.conditional_bindings.is_empty()
-    {
-      let mut new_cmds = commands.to_vec();
-      let cells: Vec<StateCell> = state_slots
-        .iter()
-        .map(|(_, _, cell)| cell.clone())
-        .collect();
-
-      let conditional_binds = Self::resolve_conditional_bindings(
-        ctx.conditional_bindings,
-        &state_slots,
-      );
-      let deltas =
-        apply_conditional_bindings(&mut new_cmds, &conditional_binds, &cells);
-
-      let computed_binds =
-        Self::resolve_computed_bindings(computed_bindings, &state_slots);
-      let computed_shifted: ResolvedComputedBindings = computed_binds
-        .iter()
-        .map(|(idx, name, caps)| {
-          (shift_for_deltas(*idx, &deltas), *name, caps.clone())
-        })
-        .collect();
-
-      apply_computed_bindings(
-        &mut new_cmds,
-        &computed_shifted,
-        &cells,
-        &sir_arc,
-        &strings_arc,
-      );
+    compiler: &mut Compiler,
+    input_path: &std::path::Path,
+    source: &str,
+  ) -> Result<(), Error> {
+    let app = bundle_webview_app(compiler, &self.args, input_path, source)?;
 
-      let list_binds: Vec<(usize, usize, Vec<ListItemCmd>)> = ctx
-        .list_bindings
-        .iter()
-        .filter_map(|(cmd_idx, lb)| {
-          state_slots
-            .iter()
-            .position(|(s, _, _)| *s == lb.items_var)
-            .map(|slot_idx| {
-              (
-                shift_for_deltas(*cmd_idx, &deltas),
-                slot_idx,
-                lb.item_template.clone(),
-              )
-            })
-        })
-        .collect();
-
-      apply_list_bindings(&mut new_cmds, &list_binds, &cells);
-
-      *shared_cmds.lock().unwrap() = new_cmds;
+    if !self.args.quiet {
+      eprintln!("Launching {}...", app.display());
     }
-  }
 
-  /// Resolve each conditional's symbols against the state-slot
-  /// table into the slot-indexed shape
-  /// `apply_conditional_bindings` consumes.
-  fn resolve_conditional_bindings(
-    conds: &[zo_sir::ConditionalBinding],
-    state_slots: &[(Symbol, String, StateCell)],
-  ) -> Vec<ResolvedConditional> {
-    let slot_of =
-      |sym: Symbol| state_slots.iter().position(|(s, _, _)| *s == sym);
-
-    conds
-      .iter()
-      .filter_map(|cond| {
-        let resolve_texts = |texts: &[(usize, Symbol)]| {
-          texts
-            .iter()
-            .filter_map(|(idx, sym)| slot_of(*sym).map(|s| (*idx, s)))
-            .collect::<Vec<_>>()
-        };
-
-        Some(ResolvedConditional {
-          cmd_idx: cond.cmd_idx,
-          len: cond.len,
-          slot: slot_of(cond.var)?,
-          on_true: cond.on_true.clone(),
-          true_text: resolve_texts(&cond.true_text),
-          on_false: cond.on_false.clone(),
-          false_text: resolve_texts(&cond.false_text),
-        })
-      })
-      .collect()
-  }
-
-  /// Resolve each `ComputedBinding`'s capture list against
-  /// the state-slot table into the `(cmd_idx, closure_name,
-  /// capture_map)` triple shape `apply_computed_bindings`
-  /// consumes — same shape as click handlers' capture_map.
-  fn resolve_computed_bindings(
-    computed_bindings: &[(usize, ComputedBinding)],
-    state_slots: &[(Symbol, String, StateCell)],
-  ) -> ResolvedComputedBindings {
-    computed_bindings
-      .iter()
-      .map(|(cmd_idx, cb)| {
-        let cap_map = cb
-          .captures
-          .iter()
-          .enumerate()
-          .filter_map(|(pi, sym)| {
-            state_slots
-              .iter()
-              .position(|(s, _, _)| s == sym)
-              .map(|slot_idx| (pi, slot_idx))
-          })
-          .collect();
-
-        (*cmd_idx, cb.closure_name, cap_map)
-      })
-      .collect()
-  }
+    if let Err(error) = std::process::Command::new("open").arg(&app).status() {
+      eprintln!("Error launching webview app: {error}");
 
-  /// Find the initial value of a variable from VarDef in SIR.
-  fn find_initial_value(
-    instructions: &[Insn],
-    var_sym: Symbol,
-    interner: &zo_interner::Interner,
-  ) -> StateValue {
-    for insn in instructions {
-      if let Insn::VarDef { name, init, .. } = insn
-        && *name == var_sym
-      {
-        if let Some(init_id) = init {
-          for prev in instructions {
-            match prev {
-              Insn::ConstInt { dst, value, .. } if dst == init_id => {
-                return StateValue::Int(*value as i64);
-              }
-              Insn::ConstFloat { dst, value, .. } if dst == init_id => {
-                return StateValue::Float(*value);
-              }
-              Insn::ConstBool { dst, value, .. } if dst == init_id => {
-                return StateValue::Bool(*value);
-              }
-              Insn::ConstString { dst, symbol, .. } if dst == init_id => {
-                let s = interner.get(*symbol).to_string();
-
-                return StateValue::Str(s);
-              }
-              Insn::ArrayLiteral { dst, elements, .. } if dst == init_id => {
-                // `mut items: []str = ["a", "b"]` —
-                // resolve each element through its
-                // ConstString to seed the initial array
-                // contents. Non-string element types fall
-                // through to the empty `Strs` default.
-                let mut items: Vec<String> = Vec::with_capacity(elements.len());
-
-                for elem_id in elements {
-                  let resolved = instructions.iter().find_map(|i| match i {
-                    Insn::ConstString { dst, symbol, .. } if dst == elem_id => {
-                      Some(interner.get(*symbol).to_string())
-                    }
-                    _ => None,
-                  });
-
-                  if let Some(s) = resolved {
-                    items.push(s);
-                  }
-                }
-
-                return StateValue::Strs(items);
-              }
-              _ => {}
-            }
-          }
-        }
-
-        return StateValue::Int(0);
-      }
+      std::process::exit(EXIT_CODE_ERROR);
     }
 
-    StateValue::Int(0)
+    Ok(())
   }
 }
 
diff --git a/crates/compiler/zo-executor/src/executor.rs b/crates/compiler/zo-executor/src/executor.rs
index 2424c2bf..91517613 100644
--- a/crates/compiler/zo-executor/src/executor.rs
+++ b/crates/compiler/zo-executor/src/executor.rs
@@ -8296,6 +8296,27 @@ impl<'a> Executor<'a> {
             note(sym, &mut written);
           }
         }
+        // A method call on a mutable receiver (`rng.range(…)`) can
+        // mutate it in place through `mut self`, so the receiver counts
+        // as written — otherwise the handler captures it by copy (the
+        // mutation is lost) or, for a struct receiver, the capture
+        // register is never set and the method dereferences garbage.
+        // In the postorder tree a method call lays out as
+        // `receiver method Dot LParen …`, so at the `Dot` the receiver
+        // is two nodes back and a following `LParen` marks it a call
+        // (not a field read). Over-approximates (a read-only method
+        // counts too); a redundant reactive slot is harmless.
+        Token::Dot
+          if idx >= body_start + 2
+            && idx + 1 < body_end
+            && self.tree.nodes[idx - 2].token == Token::Ident
+            && self.tree.nodes[idx - 1].token == Token::Ident
+            && self.tree.nodes[idx + 1].token == Token::LParen =>
+        {
+          if let Some(NodeValue::Symbol(sym)) = self.node_value(idx - 2) {
+            note(sym, &mut written);
+          }
+        }
         // Indexed write (`arr[i] = v`, `arr[i] += v`): the target
         // ident sits before the bracket pair. Walk back over the
         // matching brackets so `arr` counts as written — without
diff --git a/crates/compiler/zo-how-to/providers/json/001_serialize_attribute.zo b/crates/compiler/zo-how-to/providers/json/001_serialize_attribute.zo
new file mode 100644
index 00000000..3a4ad453
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/json/001_serialize_attribute.zo
@@ -0,0 +1,3 @@
+-- Generating to_json() methods automatically using %% serialize 
+
+fun main() {}
diff --git a/crates/compiler/zo-how-to/providers/json/002_deserialize_attribute.zo b/crates/compiler/zo-how-to/providers/json/002_deserialize_attribute.zo
new file mode 100644
index 00000000..c1351bad
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/json/002_deserialize_attribute.zo
@@ -0,0 +1,3 @@
+-- Generating from_json() methods automatically using %% deserialize
+
+fun main() {}
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/providers/json/003_struct_to_json.zo b/crates/compiler/zo-how-to/providers/json/003_struct_to_json.zo
new file mode 100644
index 00000000..33a50643
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/json/003_struct_to_json.zo
@@ -0,0 +1,3 @@
+-- Converting structs and nested fields into clean JSON strings.
+
+fun main() {}
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/providers/json/004_json_to_struct.zo b/crates/compiler/zo-how-to/providers/json/004_json_to_struct.zo
new file mode 100644
index 00000000..56f7b535
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/json/004_json_to_struct.zo
@@ -0,0 +1,3 @@
+-- Parsing configuration files or HTTP payloads into type-safe zo structures.
+
+fun main() {}
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/providers/3d/001_cube.zo b/crates/compiler/zo-how-to/providers/raylib/001_window.zo
similarity index 100%
rename from crates/compiler/zo-how-to/providers/3d/001_cube.zo
rename to crates/compiler/zo-how-to/providers/raylib/001_window.zo
diff --git a/crates/compiler/zo-how-to/providers/raylib/arkanoid.gif b/crates/compiler/zo-how-to/providers/raylib/arkanoid.gif
new file mode 100644
index 00000000..703cdf01
Binary files /dev/null and b/crates/compiler/zo-how-to/providers/raylib/arkanoid.gif differ
diff --git a/crates/compiler/zo-how-to/providers/raylib/arkanoid.zo b/crates/compiler/zo-how-to/providers/raylib/arkanoid.zo
new file mode 100644
index 00000000..93d1b876
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/raylib/arkanoid.zo
@@ -0,0 +1,281 @@
+load core::c::*;
+load provider::raylib;
+
+val WIDTH: float = 800.0;
+val HEIGHT: float = 600.0;
+val FPS: int = 60;
+
+-- The black color.
+val COLOR_BLACK: int = 0xFF000000;
+-- The white color.
+val COLOR_WHITE: int = 0xFFFFFFFF;
+-- The red color.
+val COLOR_RED: int = 0xFF4D4DFF;
+-- The blue color.
+val COLOR_BLUE: int = 0xFFEFD966;
+-- The green color.
+val COLOR_GREEN: int = 0xFF3EFDCC;
+
+-- raylib `KEY_*` codes.
+val KEY_RIGHT: int = 262;
+val KEY_LEFT: int = 263;
+val KEY_ENTER: int = 257;
+
+struct Vec2 {
+  x: float,
+  y: float,
+}
+
+struct Ball {
+  pos: Vec2,
+  vel: Vec2,
+  radius: float,
+}
+
+struct Paddle {
+  pos: Vec2,
+  w: float,
+  h: float,
+  speed: float,
+}
+
+struct Brick {
+  pos: Vec2,
+  w: float,
+  h: float,
+  active: bool,
+  color: int,
+}
+
+-- Clamp `value` into `[min, max]`.
+fun clamp(value: float, min: float, max: float) -> float {
+  if value < min {
+    min
+  } else if value > max {
+    max
+  } else {
+    value
+  }
+}
+
+-- Absolute value.
+fun abs(value: float) -> float {
+  if value < 0.0 {
+    -value
+  } else {
+    value
+  }
+}
+
+-- Circle-vs-AABB test. 0 = no hit, 1 = flip Y (top/bottom edge),
+-- 2 = flip X (side edge). The smaller penetration axis is the
+-- edge the ball crossed.
+fun check_collision(ball: Ball, brick: Brick) -> int {
+  imu closest_x: float =
+    clamp(ball.pos.x, brick.pos.x, brick.pos.x + brick.w);
+  imu closest_y: float =
+    clamp(ball.pos.y, brick.pos.y, brick.pos.y + brick.h);
+
+  imu distance_x: float = ball.pos.x - closest_x;
+  imu distance_y: float = ball.pos.y - closest_y;
+  imu dist_sq: float = distance_x * distance_x + distance_y * distance_y;
+
+  if dist_sq < ball.radius * ball.radius {
+    imu overlap_x: float = ball.radius - abs(distance_x);
+    imu overlap_y: float = ball.radius - abs(distance_y);
+
+    if overlap_x < overlap_y {
+      2
+    } else {
+      1
+    }
+  } else {
+    0
+  }
+}
+
+-- A fresh 5×10 brick grid, rows alternating red and blue.
+fun spawn_bricks() -> Vec<Brick> {
+  mut bricks: Vec<Brick> = Vec::new();
+
+  for r := 0..5 {
+    imu even_row: bool = r % 2 == 0;
+    imu row_color: int = when even_row ? COLOR_RED : COLOR_BLUE;
+
+    for c := 0..10 {
+      bricks.push(Brick {
+        pos = Vec2 {
+          x = 45.0 + (c as float) * 72.0,
+          y = 50.0 + (r as float) * 25.0,
+        },
+        w = 70.0,
+        h = 20.0,
+        active = true,
+        color = row_color,
+      });
+    }
+  }
+
+  bricks
+}
+
+-- The ball's starting state: centered, drifting up-left.
+fun new_ball() -> Ball {
+  Ball {
+    pos = Vec2 { x = 400.0, y = 300.0 },
+    vel = Vec2 { x = 3.0, y = -4.0 },
+    radius = 8.0,
+  }
+}
+
+fun main() {
+  raylib::init_window(WIDTH as int, HEIGHT as int, CStr::new("zo arkanoid"));
+  raylib::set_target_fps(FPS);
+
+  mut paddle: Paddle = Paddle {
+    pos = Vec2 { x = 360.0, y = 550.0 },
+    w = 80.0,
+    h = 15.0,
+    speed = 360.0,
+  };
+
+  mut ball: Ball = new_ball();
+  mut bricks: Vec<Brick> = spawn_bricks();
+  mut game_over: bool = false;
+
+  loop {
+    if raylib::window_should_close() { break }
+
+    imu dt: float = raylib::get_frame_time();
+
+    if !game_over {
+      -- move the paddle, clamped inside the screen.
+      if raylib::is_key_down(KEY_LEFT) { paddle.pos.x -= paddle.speed * dt }
+      if raylib::is_key_down(KEY_RIGHT) { paddle.pos.x += paddle.speed * dt }
+
+      paddle.pos.x = clamp(paddle.pos.x, 0.0, WIDTH - paddle.w);
+
+      -- advance the ball, bounce off the walls, die at the floor.
+      ball.pos.x += ball.vel.x;
+      ball.pos.y += ball.vel.y;
+
+      if ball.pos.x - ball.radius < 0.0 || ball.pos.x + ball.radius > WIDTH {
+        ball.vel.x = -ball.vel.x;
+      }
+
+      if ball.pos.y - ball.radius < 0.0 {
+        ball.vel.y = -ball.vel.y;
+      }
+
+      if ball.pos.y + ball.radius > HEIGHT {
+        game_over = true;
+      }
+
+      -- ball vs paddle: bounce up, steer by where it landed.
+      imu paddle_box: Brick = Brick {
+        pos = paddle.pos,
+        w = paddle.w,
+        h = paddle.h,
+        active = true,
+        color = 0,
+      };
+
+      if check_collision(ball, paddle_box) > 0 {
+        imu paddle_center: float = paddle.pos.x + paddle.w / 2.0;
+
+        ball.vel.y = -abs(ball.vel.y);
+        ball.vel.x += (ball.pos.x - paddle_center) * 0.15;
+      }
+
+      -- ball vs bricks: break the first one hit, bounce off it.
+      mut brick_index: int = 0;
+
+      while brick_index < bricks.len() {
+        mut hit: bool = false;
+
+        match bricks.get(brick_index) {
+          Option::Some(brick) => {
+            if brick.active {
+              imu hit_type: int = check_collision(ball, brick);
+
+              if hit_type > 0 {
+                imu broken: Brick = Brick {
+                  pos = brick.pos,
+                  w = brick.w,
+                  h = brick.h,
+                  active = false,
+                  color = brick.color,
+                };
+
+                bricks.set(brick_index, broken);
+
+                if hit_type == 1 { ball.vel.y = -ball.vel.y; }
+                if hit_type == 2 { ball.vel.x = -ball.vel.x; }
+
+                hit = true;
+              }
+            }
+          }
+          Option::None => {}
+        }
+
+        if hit { break } else { brick_index += 1; }
+      }
+    } else if raylib::is_key_pressed(KEY_ENTER) {
+      -- restart: recenter the ball, respawn the grid.
+      game_over = false;
+      ball = new_ball();
+      bricks.free();
+      bricks = spawn_bricks();
+    }
+
+    raylib::begin_drawing();
+      raylib::clear_background(COLOR_BLACK);
+
+      -- bricks: the active ones in their row color.
+      for draw_index := 0..bricks.len() {
+        match bricks.get(draw_index) {
+          Option::Some(brick) => {
+            if brick.active {
+              raylib::draw_rectangle(
+                brick.pos.x as int,
+                brick.pos.y as int,
+                brick.w as int,
+                brick.h as int,
+                brick.color,
+              );
+            }
+          }
+          Option::None => {}
+        }
+      }
+
+      -- paddle: a green bar.
+      raylib::draw_rectangle(
+        paddle.pos.x as int,
+        paddle.pos.y as int,
+        paddle.w as int,
+        paddle.h as int,
+        COLOR_GREEN,
+      );
+
+      -- ball: a white dot.
+      raylib::draw_circle(
+        ball.pos.x as int,
+        ball.pos.y as int,
+        ball.radius,
+        COLOR_WHITE,
+      );
+
+      if game_over {
+        raylib::draw_text(CStr::new("GAME OVER"), 300, 260, 40, COLOR_RED);
+        raylib::draw_text(CStr::new("PRESS ENTER"), 312, 312, 20, COLOR_WHITE);
+      }
+
+      raylib::draw_fps(10, 10);
+    raylib::end_drawing();
+  }
+
+  bricks.free();
+  raylib::close_window();
+}
diff --git a/crates/compiler/zo-how-to/providers/raylib/asteroids.gif b/crates/compiler/zo-how-to/providers/raylib/asteroids.gif
new file mode 100644
index 00000000..514fff90
Binary files /dev/null and b/crates/compiler/zo-how-to/providers/raylib/asteroids.gif differ
diff --git a/crates/compiler/zo-how-to/providers/raylib/asteroids.zo b/crates/compiler/zo-how-to/providers/raylib/asteroids.zo
new file mode 100644
index 00000000..74091331
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/raylib/asteroids.zo
@@ -0,0 +1,378 @@
+load core::c::*;
+load core::random::*;
+load provider::raylib;
+
+-- The screen width.
+val WIDTH: float = 800.0;
+-- The screen height.
+val HEIGHT: float = 600.0;
+
+-- The frame per second number.
+val FPS: int = 60;
+
+-- The black color.
+val COLOR_BLACK: int = 0xFF000000;
+-- The blue color.
+val COLOR_BLUE: int = 0xFFEFD966;
+-- The green color.
+val COLOR_GREEN: int = 0xFF3EFDCC;
+-- The grey color.
+val COLOR_GREY: int = 0xFFAAAAAA;
+-- The white color.
+val COLOR_WHITE: int = 0xFFFFFFFF;
+
+-- raylib `KEY_*` codes.
+val KEY_SPACE: int = 32;
+val KEY_ENTER: int = 257;
+val KEY_RIGHT: int = 262;
+val KEY_LEFT: int = 263;
+val KEY_DOWN: int = 264;
+val KEY_UP: int = 265;
+
+struct Size {
+  width: int,
+  height: int,
+}
+
+struct Position {
+  x: float,
+  y: float,
+}
+
+struct Velocity {
+  x: float,
+  y: float,
+}
+
+struct Laser {
+  position: Position,
+  speed: float,
+  color: int,
+}
+
+struct Ship {
+  position: Position,
+  speed: float,
+  alive: bool,
+  color: int,
+  size: Size,
+}
+
+struct Asteroid {
+  position: Position,
+  velocity: Velocity,
+  size: float,
+  color: int,
+}
+
+struct Text {
+  content: CStr,
+  position: Position,
+  font_size: int,
+  color: int,
+}
+
+-- Squared distance between two points — avoids a `sqrt`, compared against a
+-- squared radius at the call site.
+fun squared_distance(
+  first_x: float,
+  first_y: float,
+  second_x: float,
+  second_y: float,
+) -> float {
+  imu delta_x: float = first_x - second_x;
+  imu delta_y: float = first_y - second_y;
+
+  delta_x * delta_x + delta_y * delta_y
+}
+
+-- Wrap a coordinate around `[0, limit)` so a body that drifts off one edge
+-- reappears on the opposite one.
+fun wrap(value: float, limit: float) -> float {
+  if value < 0.0 {
+    value + limit
+  } else if value > limit {
+    value - limit
+  } else {
+    value
+  }
+}
+
+-- Draw a `Text` label with `draw_text` at its position.
+fun draw_label(label: Text) {
+  raylib::draw_text(
+    label.content,
+    label.position.x as int,
+    label.position.y as int,
+    label.font_size,
+    label.color,
+  );
+}
+
+-- The ship's starting state: centered low, full speed, alive.
+fun new_ship() -> Ship {
+  Ship {
+    position = Position { x = 384.0, y = 520.0 },
+    speed = 320.0,
+    alive = true,
+    color = COLOR_GREEN,
+    size = Size { width = 30, height = 30 },
+  }
+}
+
+-- A fresh asteroid field in the upper screen, away from the ship's start, with
+-- small drift velocities. Reused for the first round and every restart, so the
+-- layout is the same each time.
+fun spawn_asteroids() -> Vec<Asteroid> {
+  mut asteroids: Vec<Asteroid> = Vec::new();
+  mut rng: Rng = Rng::new(42);
+
+  for i := 0..6 {
+    asteroids.push(Asteroid {
+      position = Position {
+        x = rng.range(0, WIDTH as int) as float,
+        y = rng.range(0, 280) as float,
+      },
+      velocity = Velocity {
+        x = (rng.range(0, 7) as float) - 3.0,
+        y = (rng.range(0, 7) as float) - 3.0,
+      },
+      size = 30.0,
+      color = COLOR_GREY,
+    });
+  }
+
+  asteroids
+}
+
+fun main() {
+  raylib::init_window(WIDTH as int, HEIGHT as int, CStr::new("zo asteroids"));
+  raylib::set_target_fps(FPS);
+
+  mut ship: Ship = new_ship();
+  mut lasers: Vec<Laser> = Vec::new();
+  mut asteroids: Vec<Asteroid> = spawn_asteroids();
+
+  loop {
+    if raylib::window_should_close() { break }
+
+    imu delta_time: float = raylib::get_frame_time();
+    imu step: float = ship.speed * delta_time;
+
+    if ship.alive && asteroids.len() > 0 {
+      imu ship_half: float = (ship.size.width as float) / 2.0;
+
+      if raylib::is_key_down(KEY_LEFT) { ship.position.x -= step }
+      if raylib::is_key_down(KEY_RIGHT) { ship.position.x += step }
+      if raylib::is_key_down(KEY_UP) { ship.position.y -= step }
+      if raylib::is_key_down(KEY_DOWN) { ship.position.y += step }
+
+      -- fire a laser from the ship's nose.
+      if raylib::is_key_pressed(KEY_SPACE) {
+        imu shot: Laser = Laser {
+          position = Position {
+            x = ship.position.x + ship_half,
+            y = ship.position.y,
+          },
+          speed = 10.0,
+          color = COLOR_WHITE,
+        };
+
+        lasers.push(shot);
+      }
+
+      -- advance lasers upward; drop the ones off the top.
+      for laser_index := 0..lasers.len() {
+        match lasers.get(laser_index) {
+          Option::Some(laser) => {
+            imu next_y: float = laser.position.y - laser.speed;
+
+            if next_y < 0.0 {
+              lasers.remove(laser_index);
+            } else {
+              imu moved: Laser = Laser {
+                position = Position { x = laser.position.x, y = next_y },
+                speed = laser.speed,
+                color = laser.color,
+              };
+
+              lasers.set(laser_index, moved);
+            }
+          }
+          Option::None => {}
+        }
+      }
+
+      -- drift asteroids and wrap them at the edges.
+
+      for asteroid_index := 0..asteroids.len() {
+        match asteroids.get(asteroid_index) {
+          Option::Some(asteroid) => {
+            imu moved: Asteroid = Asteroid {
+              position = Position {
+                x = wrap(asteroid.position.x + asteroid.velocity.x, WIDTH),
+                y = wrap(asteroid.position.y + asteroid.velocity.y, HEIGHT),
+              },
+              velocity = asteroid.velocity,
+              size = asteroid.size,
+              color = asteroid.color,
+            };
+
+            asteroids.set(asteroid_index, moved);
+          }
+          Option::None => {}
+        }
+      }
+
+      -- laser hits asteroid: remove both.
+      mut collision_index: int = 0;
+
+      while collision_index < asteroids.len() {
+        mut hit: bool = false;
+
+        match asteroids.get(collision_index) {
+          Option::Some(asteroid) => {
+            mut laser_hit_index: int = 0;
+
+            while laser_hit_index < lasers.len() {
+              match lasers.get(laser_hit_index) {
+                Option::Some(laser) => {
+                  imu hit_distance: float = squared_distance(
+                    laser.position.x,
+                    laser.position.y,
+                    asteroid.position.x,
+                    asteroid.position.y,
+                  );
+
+                  if hit_distance < asteroid.size * asteroid.size {
+                    hit = true;
+                  }
+                }
+                Option::None => {}
+              }
+
+              if hit {
+                lasers.remove(laser_hit_index);
+                break;
+              } else {
+                laser_hit_index += 1;
+              }
+            }
+
+            -- asteroid touches the ship: end the game.
+            imu ship_distance: float = squared_distance(
+              ship.position.x + ship_half,
+              ship.position.y + ship_half,
+              asteroid.position.x,
+              asteroid.position.y,
+            );
+
+            imu reach: float = asteroid.size + ship_half;
+
+            if ship_distance < reach * reach {
+              ship.alive = false;
+            }
+          }
+          Option::None => {}
+        }
+
+        if hit {
+          asteroids.remove(collision_index);
+        } else {
+          collision_index += 1;
+        }
+      }
+    } else if raylib::is_key_pressed(KEY_ENTER) {
+      -- refresh the game.
+      ship = new_ship();
+      lasers.free();
+      lasers = Vec::new();
+      asteroids.free();
+      asteroids = spawn_asteroids();
+    }
+
+    raylib::begin_drawing();
+      raylib::clear_background(COLOR_BLACK);
+
+      -- asteroids: grey filled circles.
+
+      for asteroid_index := 0..asteroids.len() {
+        match asteroids.get(asteroid_index) {
+          Option::Some(asteroid) => {
+            raylib::draw_circle(
+              asteroid.position.x as int,
+              asteroid.position.y as int,
+              asteroid.size,
+              asteroid.color,
+            );
+          }
+          Option::None => {}
+        }
+      }
+
+      -- lasers: small white dots.
+
+      for laser_index := 0..lasers.len() {
+        match lasers.get(laser_index) {
+          Option::Some(laser) => {
+            raylib::draw_circle(
+              laser.position.x as int,
+              laser.position.y as int,
+              3.0,
+              laser.color,
+            );
+          }
+          Option::None => {}
+        }
+      }
+
+      -- ship: a green rectangle.
+      raylib::draw_rectangle(
+        ship.position.x as int,
+        ship.position.y as int,
+        ship.size.width,
+        ship.size.height,
+        ship.color,
+      );
+
+      imu over: bool = !ship.alive;
+      imu won: bool = asteroids.len() == 0;
+
+      if over {
+        imu label: Text = Text {
+          content = CStr::new("GAME OVER"),
+          position = Position { x = 300.0, y = 260.0 },
+          font_size = 40,
+          color = COLOR_BLUE,
+        };
+
+        draw_label(label);
+      } else if won {
+        imu label: Text = Text {
+          content = CStr::new("YOU WIN"),
+          position = Position { x = 323.0, y = 260.0 },
+          font_size = 40,
+          color = COLOR_BLUE,
+        };
+
+        draw_label(label);
+      }
+
+      if over || won {
+        imu hint: Text = Text {
+          content = CStr::new("PRESS ENTER"),
+          position = Position { x = 312.0, y = 312.0 },
+          font_size = 20,
+          color = COLOR_WHITE,
+        };
+
+        draw_label(hint);
+      }
+      raylib::draw_fps(10, 10);
+    raylib::end_drawing();
+  }
+
+  lasers.free();
+  asteroids.free();
+  raylib::close_window();
+}
diff --git a/crates/compiler/zo-how-to/providers/raylib/cube.zo b/crates/compiler/zo-how-to/providers/raylib/cube.zo
new file mode 100644
index 00000000..d44a1616
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/raylib/cube.zo
@@ -0,0 +1 @@
+fun main() {}
diff --git a/crates/compiler/zo-how-to/providers/raylib/parallel_game_of_life.gif b/crates/compiler/zo-how-to/providers/raylib/parallel_game_of_life.gif
new file mode 100644
index 00000000..f42afc29
Binary files /dev/null and b/crates/compiler/zo-how-to/providers/raylib/parallel_game_of_life.gif differ
diff --git a/crates/compiler/zo-how-to/providers/raylib/parallel_game_of_life.zo b/crates/compiler/zo-how-to/providers/raylib/parallel_game_of_life.zo
new file mode 100644
index 00000000..78e3db27
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/raylib/parallel_game_of_life.zo
@@ -0,0 +1 @@
+fun main() {}
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/providers/raylib/parallel_mandelbrot.gif b/crates/compiler/zo-how-to/providers/raylib/parallel_mandelbrot.gif
new file mode 100644
index 00000000..1ffeff6e
Binary files /dev/null and b/crates/compiler/zo-how-to/providers/raylib/parallel_mandelbrot.gif differ
diff --git a/crates/compiler/zo-how-to/providers/raylib/parallel_mandelbrot.zo b/crates/compiler/zo-how-to/providers/raylib/parallel_mandelbrot.zo
new file mode 100644
index 00000000..78e3db27
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/raylib/parallel_mandelbrot.zo
@@ -0,0 +1 @@
+fun main() {}
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/providers/2d/snake.zo b/crates/compiler/zo-how-to/providers/raylib/snake.zo
similarity index 100%
rename from crates/compiler/zo-how-to/providers/2d/snake.zo
rename to crates/compiler/zo-how-to/providers/raylib/snake.zo
diff --git a/crates/compiler/zo-how-to/providers/sqlite/001_connection.zo b/crates/compiler/zo-how-to/providers/sqlite/001_connection.zo
new file mode 100644
index 00000000..3fa920ce
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/sqlite/001_connection.zo
@@ -0,0 +1,3 @@
+-- Opening an on-disk database via Sqlite::open and closing handles.
+
+fun main() {}
diff --git a/crates/compiler/zo-how-to/providers/sqlite/002_execute_schemas.zo b/crates/compiler/zo-how-to/providers/sqlite/002_execute_schemas.zo
new file mode 100644
index 00000000..1594d481
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/sqlite/002_execute_schemas.zo
@@ -0,0 +1,3 @@
+-- Writing SQL schemas (creating tables) directly via .exec().
+
+fun main() {}
diff --git a/crates/compiler/zo-how-to/providers/sqlite/003_inserting_rows.zo b/crates/compiler/zo-how-to/providers/sqlite/003_inserting_rows.zo
new file mode 100644
index 00000000..78e3db27
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/sqlite/003_inserting_rows.zo
@@ -0,0 +1 @@
+fun main() {}
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/providers/sqlite/004_query_mapping.zo b/crates/compiler/zo-how-to/providers/sqlite/004_query_mapping.zo
new file mode 100644
index 00000000..2f84e4c7
--- /dev/null
+++ b/crates/compiler/zo-how-to/providers/sqlite/004_query_mapping.zo
@@ -0,0 +1,3 @@
+-- Reading rows and mapping columns directly into type-safe zo structs.
+
+fun main() {}
diff --git a/crates/compiler/zo-how-to/zo/basic/001_hello.md b/crates/compiler/zo-how-to/zo/basic/001_hello.md
new file mode 100644
index 00000000..47172c44
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/basic/001_hello.md
@@ -0,0 +1,3 @@
+This program calls a function (`showln`) to displayed the message `"hello, hacker!"` passed as argument.
+
+> *Each zo program should declare an entry function (`main`). Without it the compiler raised an error.*
diff --git a/crates/compiler/zo-how-to/zo/basic/001_hello.zo b/crates/compiler/zo-how-to/zo/basic/001_hello.zo
index d9f29ec9..71b725c1 100644
--- a/crates/compiler/zo-how-to/zo/basic/001_hello.zo
+++ b/crates/compiler/zo-how-to/zo/basic/001_hello.zo
@@ -1,3 +1,6 @@
 fun main() {
   showln("hello, hacker!");
 }
+
+-- EXPECTED OUTPUT:
+-- hello, hacker!
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/zo/basic/002_variables.zo b/crates/compiler/zo-how-to/zo/basic/002_variables.zo
new file mode 100644
index 00000000..fa79676d
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/basic/002_variables.zo
@@ -0,0 +1,14 @@
+fun main() {
+  imu language: str = "zo";
+  mut version: int = 0;
+
+  version = 1;
+  version += 1;
+
+  showln(language);
+  showln(version);
+}
+
+-- EXPECTED OUTPUT:
+-- zo
+-- 2
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/zo/basic/003_values_and_types.zo b/crates/compiler/zo-how-to/zo/basic/003_values_and_types.zo
new file mode 100644
index 00000000..6a35cd4a
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/basic/003_values_and_types.zo
@@ -0,0 +1,20 @@
+fun main() {
+  imu count: int = 42;
+  imu pi: float = 3.14;
+  imu ready: bool = true;
+  imu letter: char = 'z';
+  imu name: str = "zo";
+
+  showln(count);
+  showln(pi);
+  showln(ready);
+  showln(letter);
+  showln(name);
+}
+
+-- EXPECTED OUTPUT:
+-- 42
+-- 3.14
+-- true
+-- z
+-- zo
diff --git a/crates/compiler/zo-how-to/zo/basic/004_comments.zo b/crates/compiler/zo-how-to/zo/basic/004_comments.zo
new file mode 100644
index 00000000..0e0fb6b3
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/basic/004_comments.zo
@@ -0,0 +1,14 @@
+-! `main` is where every zo program starts.
+fun main() {
+  -- A line comment: a quick note on one line.
+
+  -*
+    A block comment spans multiple lines — handy for longer
+    notes or temporarily switching off a chunk of code.
+  *-
+
+  showln("JOiN THE DEVOLUTiON.");
+}
+
+-- EXPECTED OUTPUT:
+-- JOiN THE DEVOLUTiON.
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/zo/basic/005_if_else.zo b/crates/compiler/zo-how-to/zo/basic/005_if_else.zo
new file mode 100644
index 00000000..70b56e73
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/basic/005_if_else.zo
@@ -0,0 +1,20 @@
+fun main() {
+  imu hour: int = 14;
+
+  if hour < 12 {
+    showln("good morning");
+  } else if hour < 18 {
+    showln("good afternoon");
+  } else {
+    showln("good evening");
+  }
+
+  imu temperature: int = 30;
+  imu label: str = if temperature >= 25 { "hot" } else { "mild" };
+
+  showln(label);
+}
+
+-- EXPECTED OUTPUT:
+-- good afternoon
+-- hot
diff --git a/crates/compiler/zo-how-to/zo/interactive/todos.zo b/crates/compiler/zo-how-to/zo/interactive/todos.zo
index 3ab8bfcf..4d03ff22 100644
--- a/crates/compiler/zo-how-to/zo/interactive/todos.zo
+++ b/crates/compiler/zo-how-to/zo/interactive/todos.zo
@@ -1,6 +1,87 @@
--- cli commands: add, toggle done, delete, delete all, quit.
--- cli get the command + todo content.
--- dispatch actions.
--- each commands as an equivalent function.
+struct Todo {
+  text: str,
+  done: bool,
+}
 
-fun main() {}
+fun add(mut todos: Vec<Todo>, text: str) {
+  todos.push(Todo { text = text, done = false });
+}
+
+fun toggle(mut todos: Vec<Todo>, index: int) {
+  match todos.get(index) {
+    Option::Some(todo) => {
+      todos.set(index, Todo { text = todo.text, done = !todo.done });
+    }
+    Option::None => {}
+  }
+}
+
+fun delete(mut todos: Vec<Todo>, index: int) {
+  todos.remove(index);
+}
+
+fun render(todos: Vec<Todo>) {
+  for i := 0..todos.len() {
+    match todos.get(i) {
+      Option::Some(todo) => {
+        imu box: str = when todo.done ? "[x]" : "[ ]";
+
+        showln(i.to_str() ++ " " ++ box ++ " " ++ todo.text);
+      }
+      Option::None => {}
+    }
+  }
+}
+
+fun index_of(argument: str) -> int {
+  match argument.parse_int() {
+    Option::Some(value) => value,
+    Option::None => -1,
+  }
+}
+
+fun main() {
+  mut todos: Vec<Todo> = Vec::new();
+  mut running: bool = true;
+
+  while running {
+    match readln() {
+      Result::Pass(input) => {
+        imu line: str = input.trim();
+        imu space: int = line.index_of(" ");
+        imu command: str = when space < 0 ? line : line[0..space];
+        imu argument: str = when space < 0 ? "" : line[space + 1..line.len];
+
+        if command == "add" {
+          add(todos, argument);
+        } else if command == "toggle" {
+          toggle(todos, index_of(argument));
+        } else if command == "delete" {
+          delete(todos, index_of(argument));
+        } else if command == "list" {
+          render(todos);
+        } else if command == "quit" {
+          running = false;
+        }
+      }
+      Result::Fail(_) => {
+        running = false;
+      }
+    }
+  }
+
+  todos.free();
+}
+
+-- @stdin:
+-- add learn zo
+-- add build a ui
+-- add ship it
+-- toggle 0
+-- delete 1
+-- list
+-- quit
+
+-- EXPECTED OUTPUT:
+-- 0 [x] learn zo
+-- 1 [ ] ship it
diff --git a/crates/compiler/zo-how-to/zo/practical/word_count.zo b/crates/compiler/zo-how-to/zo/practical/word_count.zo
deleted file mode 100644
index ee30b6e4..00000000
--- a/crates/compiler/zo-how-to/zo/practical/word_count.zo
+++ /dev/null
@@ -1,64 +0,0 @@
-load core::cli;
-
-fun count_words(text: str) -> int {
-  mut count: int = 0;
-  imu lines: []str = text.lines();
-
-  for line := lines {
-    imu words: []str = line.trim().split(" ");
-
-    for word := words {
-      if word != "" {
-        count += 1;
-      }
-    }
-  }
-
-  count
-}
-
-fun main() {
-  imu cli: Cli = Cli::new("wc", "count lines, words, and bytes")
-    .flag("l", "lines", "count lines")
-    .flag("w", "words", "count words")
-    .flag("c", "bytes", "count bytes");
-
-  imu parsed: Parsed = cli.parse(args());
-  imu files: []str = parsed.positionals();
-
-  if files.len() == 0 {
-    showln(cli.help());
-  } else {
-    imu want_lines: bool = parsed.has("lines");
-    imu want_words: bool = parsed.has("words");
-    imu want_bytes: bool = parsed.has("bytes");
-    imu want_all: bool = !want_lines && !want_words && !want_bytes;
-
-    for path := files {
-      match read_file(path) {
-        Result::Pass(text) => {
-          imu line_count: int = text.lines().len();
-          imu word_count: int = count_words(text);
-          imu byte_count: int = text.len;
-
-          mut report: str = "";
-
-          if want_all || want_lines {
-            report = report ++ line_count.to_str() ++ "\t";
-          }
-
-          if want_all || want_words {
-            report = report ++ word_count.to_str() ++ "\t";
-          }
-
-          if want_all || want_bytes {
-            report = report ++ byte_count.to_str() ++ "\t";
-          }
-
-          showln(report ++ path);
-        },
-        Result::Fail(_) => eshowln("wc: {path}: cannot read"),
-      }
-    }
-  }
-}
diff --git a/crates/compiler/zo-how-to/zo/tasks/002_threading.zo b/crates/compiler/zo-how-to/zo/tasks/002_threading.zo
new file mode 100644
index 00000000..7b833e70
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/tasks/002_threading.zo
@@ -0,0 +1,54 @@
+load core::process;
+
+val NODES: int = 503;
+
+fun ring(rx: Rx<int>, tx: Tx<int>, label: int) {
+  loop {
+    imu token: int = rx.recv();
+
+    if token == 0 {
+      showln(label);
+      flush();
+
+      process::exit(0);
+    }
+
+    tx.send(token - 1);
+  }
+}
+
+fun main() {
+  imu argv: []str = args();
+
+  imu passes: int = if argv.len > 0 {
+    match argv[0].parse_int() {
+      Option::Some(value) => value,
+      Option::None => 1000,
+    }
+  } else {
+    1000
+  };
+
+  imu (entry_tx, entry_rx) := channel();
+
+  nursery {
+    mut prev_rx: Rx<int> = entry_rx;
+    mut label: int = 1;
+
+    while label < NODES {
+      imu (next_tx, next_rx) := channel();
+
+      spawn ring(prev_rx, next_tx, label);
+
+      prev_rx = next_rx;
+      label = label + 1;
+    }
+
+    spawn ring(prev_rx, entry_tx, NODES);
+
+    entry_tx.send(passes);
+  }
+}
+
+-- EXPECTED OUTPUT:
+-- 498
diff --git a/crates/compiler/zo-how-to/zo/tasks/003_mandelbrot.zo b/crates/compiler/zo-how-to/zo/tasks/003_mandelbrot.zo
new file mode 100644
index 00000000..b3c0caf4
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/tasks/003_mandelbrot.zo
@@ -0,0 +1,35 @@
+val WIDTH: int = 800;
+val HEIGHT: int = 600;
+val MAX_ITER: int = 100;
+
+fun main() {
+  imu width_f := WIDTH as float;
+  imu height_f := HEIGHT as float;
+
+  mut checksum: int = 0;
+
+  for y := 0..HEIGHT {
+    for x := 0..WIDTH {
+      imu cr := (x as float) / width_f * 3.0 - 2.0;
+      imu ci := (y as float) / height_f * 2.24 - 1.12;
+
+      mut zr: float = 0.0;
+      mut zi: float = 0.0;
+      mut iter: int = 0;
+
+      while zr * zr + zi * zi <= 4.0 && iter < MAX_ITER {
+        imu temp := zr * zr - zi * zi + cr;
+        zi = 2.0 * zr * zi + ci;
+        zr = temp;
+        iter += 1;
+      }
+
+      checksum += iter;
+    }
+  }
+
+  showln(checksum);
+}
+
+-- EXPECTED OUTPUT:
+-- 13167508
diff --git a/crates/compiler/zo-how-to/zo/tasks/004_n_body.zo b/crates/compiler/zo-how-to/zo/tasks/004_n_body.zo
new file mode 100644
index 00000000..5339e516
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/tasks/004_n_body.zo
@@ -0,0 +1,162 @@
+load core::math::sqrt;
+
+val NBODIES: int = 5;
+val SOLAR_MASS: float = 39.47841760435743;
+val DAYS_PER_YEAR: float = 365.24;
+
+struct System {
+  x: []float,
+  y: []float,
+  z: []float,
+  vx: []float,
+  vy: []float,
+  vz: []float,
+  mass: []float,
+}
+
+apply System {
+
+  fun offset_momentum(mut self) {
+    mut px: float = 0.0;
+    mut py: float = 0.0;
+    mut pz: float = 0.0;
+
+    for i := 0..NBODIES {
+      px += self.vx[i] * self.mass[i];
+      py += self.vy[i] * self.mass[i];
+      pz += self.vz[i] * self.mass[i];
+    }
+
+    self.vx[0] = -px / SOLAR_MASS;
+    self.vy[0] = -py / SOLAR_MASS;
+    self.vz[0] = -pz / SOLAR_MASS;
+  }
+
+  fun energy(self) -> float {
+    mut e: float = 0.0;
+
+    for i := 0..NBODIES {
+      e += 0.5 * self.mass[i] *
+        (self.vx[i] * self.vx[i] +
+         self.vy[i] * self.vy[i] +
+         self.vz[i] * self.vz[i]);
+
+      imu lo := i + 1;
+
+      for j := lo..NBODIES {
+        imu dx := self.x[i] - self.x[j];
+        imu dy := self.y[i] - self.y[j];
+        imu dz := self.z[i] - self.z[j];
+        imu dist := sqrt(dx * dx + dy * dy + dz * dz);
+
+        e -= (self.mass[i] * self.mass[j]) / dist;
+      }
+    }
+
+    e
+  }
+
+  fun advance(mut self, dt: float) {
+    for i := 0..NBODIES {
+      imu lo := i + 1;
+
+      for j := lo..NBODIES {
+        imu dx := self.x[i] - self.x[j];
+        imu dy := self.y[i] - self.y[j];
+        imu dz := self.z[i] - self.z[j];
+        imu d2 := dx * dx + dy * dy + dz * dz;
+        imu mag := dt / (d2 * sqrt(d2));
+
+        self.vx[i] = self.vx[i] - dx * self.mass[j] * mag;
+        self.vy[i] = self.vy[i] - dy * self.mass[j] * mag;
+        self.vz[i] = self.vz[i] - dz * self.mass[j] * mag;
+        self.vx[j] = self.vx[j] + dx * self.mass[i] * mag;
+        self.vy[j] = self.vy[j] + dy * self.mass[i] * mag;
+        self.vz[j] = self.vz[j] + dz * self.mass[i] * mag;
+      }
+    }
+
+    for i := 0..NBODIES {
+      self.x[i] = self.x[i] + dt * self.vx[i];
+      self.y[i] = self.y[i] + dt * self.vy[i];
+      self.z[i] = self.z[i] + dt * self.vz[i];
+    }
+  }
+}
+
+fun main() {
+  imu argv: []str = args();
+  imu n: int = if argv.len > 0 {
+    match argv[0].parse_int() {
+      Option::Some(steps) => steps,
+      Option::None => 1000,
+    }
+  } else {
+    1000
+  };
+
+  mut sys: System = System {
+    x = [
+      0.0,
+      4.84143144246472090e+00,
+      8.34336671824457987e+00,
+      1.28943695621391310e+01,
+      1.53796971148509165e+01,
+    ],
+    y = [
+      0.0,
+      -1.16032004402742839e+00,
+      4.12479856412430479e+00,
+      -1.51111514016986312e+01,
+      -2.59193146099879641e+01,
+    ],
+    z = [
+      0.0,
+      -1.03622044471123109e-01,
+      -4.03523417114321381e-01,
+      -2.23307578892655734e-01,
+      1.79258772950371181e-01,
+    ],
+    vx = [
+      0.0,
+      1.66007664274403694e-03 * DAYS_PER_YEAR,
+      -2.76742510726862411e-03 * DAYS_PER_YEAR,
+      2.96460137564761618e-03 * DAYS_PER_YEAR,
+      2.68067772490389322e-03 * DAYS_PER_YEAR,
+    ],
+    vy = [
+      0.0,
+      7.69901118419740425e-03 * DAYS_PER_YEAR,
+      4.99852801234917238e-03 * DAYS_PER_YEAR,
+      2.37847173959480950e-03 * DAYS_PER_YEAR,
+      1.62824170038242295e-03 * DAYS_PER_YEAR,
+    ],
+    vz = [
+      0.0,
+      -6.90460016972063023e-05 * DAYS_PER_YEAR,
+      2.30417297573763929e-05 * DAYS_PER_YEAR,
+      -2.96589568540237556e-05 * DAYS_PER_YEAR,
+      -9.51592254519715870e-05 * DAYS_PER_YEAR,
+    ],
+    mass = [
+      SOLAR_MASS,
+      9.54791938424326609e-04 * SOLAR_MASS,
+      2.85885980666130812e-04 * SOLAR_MASS,
+      4.36624404335156298e-05 * SOLAR_MASS,
+      5.15138902046611451e-05 * SOLAR_MASS,
+    ],
+  };
+
+  sys.offset_momentum();
+  showln(sys.energy());
+
+  for _ := 0..n {
+    sys.advance(0.01);
+  }
+
+  showln(sys.energy());
+}
+
+-- EXPECTED OUTPUT:
+-- -0.16907516382852447
+-- -0.169087605234606
diff --git a/crates/compiler/zo-how-to/zo/tasks/005_k_nucleotide.zo b/crates/compiler/zo-how-to/zo/tasks/005_k_nucleotide.zo
new file mode 100644
index 00000000..71b6228b
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/tasks/005_k_nucleotide.zo
@@ -0,0 +1,181 @@
+fun encode(base: str) -> int {
+  if base == "A" {
+    0
+  } else if base == "C" {
+    1
+  } else if base == "T" {
+    2
+  } else {
+    3
+  }
+}
+
+fun code_of(seq: str) -> int {
+  mut code: int = 0;
+
+  for i := 0..seq.len {
+    code = code * 4 + encode(seq[i..i + 1]);
+  }
+
+  code
+}
+
+fun pad3(value: int) -> str {
+  if value >= 100 {
+    value.to_str()
+  } else if value >= 10 {
+    "0" ++ value.to_str()
+  } else {
+    "00" ++ value.to_str()
+  }
+}
+
+fun occurrences(strand: str, pattern: str) -> int {
+  mut count: int = 0;
+  imu span: int =
+    when strand.len >= pattern.len ? strand.len - pattern.len + 1 : 0;
+
+  for start := 0..span {
+    if strand[start..start + pattern.len] == pattern {
+      count += 1;
+    }
+  }
+
+  count
+}
+
+fun frequencies(strand: str, frame: int) {
+  imu total: int = when strand.len >= frame ? strand.len - frame + 1 : 0;
+
+  mut seqs: []str = [];
+  mut counts: []int = [];
+  mut codes: []int = [];
+
+  for start := 0..total {
+    imu seq: str = strand[start..start + frame];
+    mut index: int = -1;
+
+    for i := 0..seqs.len {
+      if seqs[i] == seq {
+        index = i;
+      }
+    }
+
+    if index < 0 {
+      seqs.push(seq);
+      counts.push(1);
+      codes.push(code_of(seq));
+    } else {
+      counts[index] += 1;
+    }
+  }
+
+  for i := 0..seqs.len {
+    mut best: int = i;
+
+    for j := i + 1..seqs.len {
+      imu better: bool = counts[j] > counts[best]
+        || (counts[j] == counts[best] && codes[j] > codes[best]);
+
+      if better {
+        best = j;
+      }
+    }
+
+    imu seq: str = seqs[i];
+    imu count: int = counts[i];
+    imu code: int = codes[i];
+
+    seqs[i] = seqs[best];
+    counts[i] = counts[best];
+    codes[i] = codes[best];
+    seqs[best] = seq;
+    counts[best] = count;
+    codes[best] = code;
+  }
+
+  for i := 0..seqs.len {
+    imu seq: str = seqs[i];
+    imu milli: int = (counts[i] * 100000 + total / 2) / total;
+    imu whole: int = milli / 1000;
+    imu frac: str = pad3(milli % 1000);
+
+    showln("{seq} {whole}.{frac}");
+  }
+}
+
+fun main() {
+  mut strand: str = "";
+  mut reading: bool = false;
+  mut done: bool = false;
+
+  while !done {
+    match readln() {
+      Result::Pass(line) => {
+        imu text: str = line.trim();
+
+        if text.len >= 6 && text[0..6] == ">THREE" {
+          reading = true;
+        } else if reading && text.len >= 1 && text[0..1] == ">" {
+          done = true;
+        } else if reading {
+          strand = strand ++ text;
+        }
+      }
+      Result::Fail(_) => {
+        done = true;
+      }
+    }
+  }
+
+  frequencies(strand, 1);
+  frequencies(strand, 2);
+
+  imu patterns: []str = [
+    "GGT",
+    "GGTA",
+    "GGTATT",
+    "GGTATTTTAATT",
+    "GGTATTTTAATTTATAGT",
+  ];
+
+  for i := 0..patterns.len {
+    imu pattern: str = patterns[i];
+
+    showln(occurrences(strand, pattern).to_str() ++ " " ++ pattern);
+  }
+}
+
+-- @stdin:
+-- >ONE Homo sapiens alu
+-- GGCCGGGCGCGGTGGCTCAC
+-- >THREE Homo sapiens frequency
+-- GGTATTTTAATTTATAGTGGTAGG
+-- TATTCCGGTAACGTGCATGCATGC
+-- >TWO IUB ambiguity codes
+-- CGATCGATCGATCGAT
+
+-- EXPECTED OUTPUT:
+-- T 37.500
+-- G 27.083
+-- A 22.917
+-- C 12.500
+-- TA 14.894
+-- GT 12.766
+-- TT 12.766
+-- AT 12.766
+-- GG 8.511
+-- TG 8.511
+-- GC 6.383
+-- CG 4.255
+-- CA 4.255
+-- AG 4.255
+-- AA 4.255
+-- TC 2.128
+-- CC 2.128
+-- AC 2.128
+-- 4 GGT
+-- 4 GGTA
+-- 2 GGTATT
+-- 1 GGTATTTTAATT
+-- 1 GGTATTTTAATTTATAGT
diff --git a/crates/compiler/zo-how-to/zo/tasks/008_fannkuch_redux.zo b/crates/compiler/zo-how-to/zo/tasks/008_fannkuch_redux.zo
new file mode 100644
index 00000000..013cdc37
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/tasks/008_fannkuch_redux.zo
@@ -0,0 +1,118 @@
+fun main() {
+  imu argv: []str = args();
+  imu n: int = if argv.len > 0 {
+    match argv[0].parse_int() {
+      Option::Some(value) => value,
+      Option::None => 7,
+    }
+  } else {
+    7
+  };
+
+  mut perm_max: int = 1;
+
+  for i := 1..n + 1 {
+    perm_max *= i;
+  }
+
+  mut current: []int = [];
+  mut temp: []int = [];
+  mut count: []int = [];
+
+  for i := 0..n {
+    current.push(i);
+    temp.push(0);
+    count.push(0);
+  }
+
+  current.push(0);
+  temp.push(0);
+  count.push(0);
+
+  mut checksum: int = 0;
+  mut maxflips: int = 0;
+  mut perm_index: int = 0;
+
+  loop {
+
+    if current[0] > 0 {
+      for i := 0..n {
+        temp[i] = current[i];
+      }
+
+      mut flip_count: int = 1;
+      mut first_value: int = current[0];
+
+      while temp[first_value] != 0 {
+        imu new_first := temp[first_value];
+
+        temp[first_value] = first_value;
+
+        if first_value > 2 {
+          mut lo: int = 1;
+          mut hi: int = first_value - 1;
+
+          while lo < hi {
+            imu swap := temp[lo];
+
+            temp[lo] = temp[hi];
+            temp[hi] = swap;
+            lo += 1;
+            hi -= 1;
+          }
+        }
+
+        first_value = new_first;
+        flip_count += 1;
+      }
+
+      if perm_index % 2 == 0 {
+        checksum += flip_count;
+      } else {
+        checksum -= flip_count;
+      }
+
+      if flip_count > maxflips {
+        maxflips = flip_count;
+      }
+    }
+
+    if perm_index >= perm_max - 1 {
+      break;
+    }
+
+    perm_index += 1;
+
+    mut first_value: int = current[1];
+
+    current[1] = current[0];
+    current[0] = first_value;
+
+    mut i: int = 1;
+
+    while count[i] >= i {
+      count[i] = 0;
+      i += 1;
+
+      imu new_first := current[1];
+
+      current[0] = new_first;
+
+      for j := 1..i {
+        current[j] = current[j + 1];
+      }
+
+      current[i] = first_value;
+      first_value = new_first;
+    }
+
+    count[i] += 1;
+  }
+
+  showln(checksum);
+  showln("Pfannkuchen({n}) = {maxflips}");
+}
+
+-- EXPECTED OUTPUT:
+-- 228
+-- Pfannkuchen(7) = 16
diff --git a/crates/compiler/zo-how-to/zo/tasks/009_word_count.zo b/crates/compiler/zo-how-to/zo/tasks/009_word_count.zo
new file mode 100644
index 00000000..0e268009
--- /dev/null
+++ b/crates/compiler/zo-how-to/zo/tasks/009_word_count.zo
@@ -0,0 +1,89 @@
+load core::cli;
+
+struct Counts {
+  lines: bool,
+  words: bool,
+  size: bool,
+}
+
+fun count_words(text: str) -> int {
+  mut count: int = 0;
+  imu lines: []str = text.lines();
+
+  for line := lines {
+    imu words: []str = line.trim().split(" ");
+
+    for word := words {
+      if word != "" {
+        count += 1;
+      }
+    }
+  }
+
+  count
+}
+
+fun report(text: str, label: str, want: Counts) -> str {
+  imu line_count: int = text.lines().len();
+  imu word_count: int = count_words(text);
+  imu byte_count: int = text.len;
+
+  mut out: str = "";
+
+  if want.lines {
+    out = out ++ line_count.to_str() ++ "\t";
+  }
+
+  if want.words {
+    out = out ++ word_count.to_str() ++ "\t";
+  }
+
+  if want.size {
+    out = out ++ byte_count.to_str() ++ "\t";
+  }
+
+  out ++ label
+}
+
+fun main() {
+  imu cli: Cli = Cli::new("wc", "count lines, words, and bytes")
+    .flag("l", "lines", "count lines")
+    .flag("w", "words", "count words")
+    .flag("c", "bytes", "count bytes");
+
+  imu parsed: Parsed = cli.parse(args());
+  imu files: []str = parsed.positionals();
+
+  imu has_lines: bool = parsed.has("lines");
+  imu has_words: bool = parsed.has("words");
+  imu has_bytes: bool = parsed.has("bytes");
+  imu all: bool = !has_lines && !has_words && !has_bytes;
+
+  imu want: Counts = Counts {
+    lines = all || has_lines,
+    words = all || has_words,
+    size = all || has_bytes,
+  };
+
+  -- No file named — read stdin, the way `wc` does for a pipe.
+  if files.len() == 0 {
+    match read() {
+      Result::Pass(text) => showln(report(text, "", want)),
+      Result::Fail(_) => eshowln("wc: stdin: cannot read"),
+    }
+  } else {
+    for path := files {
+      match read_file(path) {
+        Result::Pass(text) => showln(report(text, path, want)),
+        Result::Fail(_) => eshowln("wc: {path}: cannot read"),
+      }
+    }
+  }
+}
+
+-- @stdin:
+-- hello world
+-- zo is fast
+
+-- EXPECTED OUTPUT:
+-- 2	5	23
diff --git a/crates/compiler/zo-how-to/zsx/7guis/002_temperature_converter.zo b/crates/compiler/zo-how-to/zsx/7guis/002_temperature_converter.zo
new file mode 100644
index 00000000..d44a1616
--- /dev/null
+++ b/crates/compiler/zo-how-to/zsx/7guis/002_temperature_converter.zo
@@ -0,0 +1 @@
+fun main() {}
diff --git a/crates/compiler/zo-how-to/zsx/basic/003.styling.zo b/crates/compiler/zo-how-to/zsx/basic/003.styling.zo
new file mode 100644
index 00000000..d44a1616
--- /dev/null
+++ b/crates/compiler/zo-how-to/zsx/basic/003.styling.zo
@@ -0,0 +1 @@
+fun main() {}
diff --git a/crates/compiler/zo-how-to/zsx/basic/004_nested_component.zo b/crates/compiler/zo-how-to/zsx/basic/004_nested_component.zo
new file mode 100644
index 00000000..78e3db27
--- /dev/null
+++ b/crates/compiler/zo-how-to/zsx/basic/004_nested_component.zo
@@ -0,0 +1 @@
+fun main() {}
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/zsx/basic/005_raw_html.zo b/crates/compiler/zo-how-to/zsx/basic/005_raw_html.zo
new file mode 100644
index 00000000..78e3db27
--- /dev/null
+++ b/crates/compiler/zo-how-to/zsx/basic/005_raw_html.zo
@@ -0,0 +1 @@
+fun main() {}
\ No newline at end of file
diff --git a/crates/compiler/zo-how-to/zsx/basic/conditional_rendering.zo b/crates/compiler/zo-how-to/zsx/basic/conditional_rendering.zo
new file mode 100644
index 00000000..9f9bf436
--- /dev/null
+++ b/crates/compiler/zo-how-to/zsx/basic/conditional_rendering.zo
@@ -0,0 +1,3 @@
+-- Showing or hiding UI nodes using if expressions inside zsx.
+
+fun main() {}
diff --git a/crates/compiler/zo-how-to/zsx/basic/list_rendering.zo b/crates/compiler/zo-how-to/zsx/basic/list_rendering.zo
new file mode 100644
index 00000000..c3415892
--- /dev/null
+++ b/crates/compiler/zo-how-to/zsx/basic/list_rendering.zo
@@ -0,0 +1,3 @@
+-- Generating dynamic DOM lists by mapping over arrays/vectors.
+
+fun main() {}
diff --git a/crates/compiler/zo-how-to/zsx/interactive/001_cards.zo b/crates/compiler/zo-how-to/zsx/interactive/001_cards.zo
new file mode 100644
index 00000000..2061c3b8
--- /dev/null
+++ b/crates/compiler/zo-how-to/zsx/interactive/001_cards.zo
@@ -0,0 +1,78 @@
+load core::random;
+
+$: {
+  .card {
+    font-size: 12em;
+  }
+}
+
+enum Card {
+  Ace,
+  Two,
+  Three,
+  Four,
+  Five,
+  Six,
+  Seven,
+  Eight,
+  Nine,
+  Ten,
+  Jack,
+  Queen,
+  King,
+}
+
+-- A uniform random card — zo's take on Elm's `Random.uniform`.
+fun card_of(n: int) -> Card {
+  match n {
+    0 => Card::Ace,
+    1 => Card::Two,
+    2 => Card::Three,
+    3 => Card::Four,
+    4 => Card::Five,
+    5 => Card::Six,
+    6 => Card::Seven,
+    7 => Card::Eight,
+    8 => Card::Nine,
+    9 => Card::Ten,
+    10 => Card::Jack,
+    11 => Card::Queen,
+    _ => Card::King,
+  }
+}
+
+-- Elm's `viewCard`: each rank to its glyph. The Knight (🂬) has
+-- no rank in a 52-card deck, so Queen jumps straight to 🂭.
+fun glyph(card: Card) -> str {
+  match card {
+    Card::Ace => "🂡",
+    Card::Two => "🂢",
+    Card::Three => "🂣",
+    Card::Four => "🂤",
+    Card::Five => "🂥",
+    Card::Six => "🂦",
+    Card::Seven => "🂧",
+    Card::Eight => "🂨",
+    Card::Nine => "🂩",
+    Card::Ten => "🂪",
+    Card::Jack => "🂫",
+    Card::Queen => "🂭",
+    Card::King => "🂮",
+  }
+}
+
+fun main() {
+  mut rng: Rng = Rng::new(20260616);
+  mut face: str = glyph(Card::Three);
+
+  imu card_view: </> ::= <div class="card">{face}</div>;
+
+  imu app: </> ::= <>
+    <button @click={fn() => face = glyph(card_of(rng.range(0, 13)))}>
+      Draw
+    </button>
+    <card_view />
+  </>;
+
+  #render app;
+}
diff --git a/crates/compiler/zo-how-to/zsx/interactive/002_user_inputs.zo b/crates/compiler/zo-how-to/zsx/interactive/002_user_inputs.zo
new file mode 100644
index 00000000..d44a1616
--- /dev/null
+++ b/crates/compiler/zo-how-to/zsx/interactive/002_user_inputs.zo
@@ -0,0 +1 @@
+fun main() {}
diff --git a/crates/compiler/zo-how-to/zsx/interactive/003_forms.zo b/crates/compiler/zo-how-to/zsx/interactive/003_forms.zo
new file mode 100644
index 00000000..d44a1616
--- /dev/null
+++ b/crates/compiler/zo-how-to/zsx/interactive/003_forms.zo
@@ -0,0 +1 @@
+fun main() {}
diff --git a/crates/compiler/zo-how-to/zsx/interactive/todos.zo b/crates/compiler/zo-how-to/zsx/interactive/004_todos.zo
similarity index 100%
rename from crates/compiler/zo-how-to/zsx/interactive/todos.zo
rename to crates/compiler/zo-how-to/zsx/interactive/004_todos.zo
diff --git a/crates/compiler/zo-notes/public/assets/preview/preview-zo-templating-counter.png b/crates/compiler/zo-notes/public/assets/preview/preview-zo-templating-counter.png
index 32123b1e..06258f97 100644
Binary files a/crates/compiler/zo-notes/public/assets/preview/preview-zo-templating-counter.png and b/crates/compiler/zo-notes/public/assets/preview/preview-zo-templating-counter.png differ
diff --git a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-desktop-counter.png b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-desktop-counter.png
index ce5b4824..56cf7c91 100644
Binary files a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-desktop-counter.png and b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-desktop-counter.png differ
diff --git a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-desktop-hello.png b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-desktop-hello.png
index 396ac4d1..da1047dc 100644
Binary files a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-desktop-hello.png and b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-desktop-hello.png differ
diff --git a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-iphone-counter.png b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-iphone-counter.png
index b8e61778..f9b54a3f 100644
Binary files a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-iphone-counter.png and b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-iphone-counter.png differ
diff --git a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-iphone-home.png b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-iphone-home.png
index e76d23a0..e5b4c1f3 100644
Binary files a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-iphone-home.png and b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-iphone-home.png differ
diff --git a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-watch-counter.png b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-watch-counter.png
index c961151c..fdde7c2e 100644
Binary files a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-watch-counter.png and b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-watch-counter.png differ
diff --git a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-watch-home.png b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-watch-home.png
index c77a129c..53a9c80e 100644
Binary files a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-watch-home.png and b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-watch-home.png differ
diff --git a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-webview-counter.png b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-webview-counter.png
index 4e38c3d2..2fe5aa2e 100644
Binary files a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-webview-counter.png and b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-webview-counter.png differ
diff --git a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-webview-hello.png b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-webview-hello.png
index fbfce992..0b6af12c 100644
Binary files a/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-webview-hello.png and b/crates/compiler/zo-notes/public/assets/preview/preview-zo-zsx-webview-hello.png differ
diff --git a/crates/compiler/zo-runtime-render/src/aot.rs b/crates/compiler/zo-runtime-render/src/aot.rs
index cc8c203d..776183a7 100644
--- a/crates/compiler/zo-runtime-render/src/aot.rs
+++ b/crates/compiler/zo-runtime-render/src/aot.rs
@@ -37,6 +37,16 @@ static STR_STATE: OnceLock<Mutex<Vec<Vec<u8>>>> = OnceLock::new();
 /// `STR_STATE`; a given slot is only ever one kind.
 static ARR_STATE: OnceLock<Mutex<Vec<Vec<String>>>> = OnceLock::new();
 
+/// The struct-typed reactive state — the raw bytes of one struct
+/// value per slot, backing a `mut S` (a user struct) that a handler
+/// captures and mutates through a `mut self` method (e.g. a `Rng` the
+/// handler advances with `rng.range(…)`). Unlike a scalar, the value
+/// has no UI binding; `zo_state_get_struct` hands back a *stable*
+/// pointer into the slot so the method mutates it in place and the
+/// next event sees the advanced state. Slots share the one id space
+/// with `STATE` / `STR_STATE` / `ARR_STATE`.
+static STRUCT_STATE: OnceLock<Mutex<Vec<Vec<u8>>>> = OnceLock::new();
+
 /// Slots written since the last drain. A state write marks its
 /// slot here; `drain_dirty` empties it after each event so the
 /// runtime refreshes only the bindings that actually changed.
@@ -54,6 +64,10 @@ fn arr_state() -> &'static Mutex<Vec<Vec<String>>> {
   ARR_STATE.get_or_init(|| Mutex::new(Vec::new()))
 }
 
+fn struct_state() -> &'static Mutex<Vec<Vec<u8>>> {
+  STRUCT_STATE.get_or_init(|| Mutex::new(Vec::new()))
+}
+
 fn dirty() -> &'static Mutex<DirtySet> {
   DIRTY.get_or_init(|| Mutex::new(DirtySet::default()))
 }
@@ -266,6 +280,12 @@ pub extern "C" fn zo_state_init(count: u32) {
     arr_state.resize_with(count as usize, Vec::new);
   }
 
+  let mut struct_state = struct_state().lock().unwrap();
+
+  if struct_state.len() < count as usize {
+    struct_state.resize_with(count as usize, Vec::new);
+  }
+
   // Size the dirty set in lockstep (grow-only) so every
   // declared slot has a bit before the first write.
   dirty().lock().unwrap().ensure(count as usize);
@@ -356,6 +376,49 @@ pub extern "C" fn zo_state_get_str(slot: u32) -> *const u8 {
   }
 }
 
+/// Write the 8 bytes of `val` into struct slot `slot` — the seed
+/// write for a reactive `mut S` whose value lives in a register
+/// (a struct up to 8 bytes, like `Rng { bits }`, which AAPCS64
+/// returns by value). `main`'s `mut rng = Rng::new(seed)` lowers
+/// to this so the cell owns the bytes before any event reads them;
+/// the slot's address (from `zo_state_get_struct`) is then handed
+/// to the `mut self` method, which mutates these bytes in place.
+#[unsafe(no_mangle)]
+pub extern "C" fn zo_state_set_struct_word(slot: u32, val: i64) {
+  {
+    let mut struct_state = struct_state().lock().unwrap();
+    let Some(slot_buf) = struct_state.get_mut(slot as usize) else {
+      return;
+    };
+
+    slot_buf.clear();
+    slot_buf.extend_from_slice(&val.to_le_bytes());
+  }
+
+  dirty().lock().unwrap().mark(slot);
+}
+
+/// Return a *stable* pointer to struct slot `slot`'s bytes. Unlike a
+/// scalar read, the caller mutates the struct in place through this
+/// pointer — a `mut self` method (`rng.range(…)`) writes the slot's
+/// fields directly, so the next event sees the advanced state. The
+/// slot Vec is pre-sized and never reallocated between events (only
+/// `set_struct` resizes it, and that runs in `main` before any
+/// event), so the pointer stays valid for the handler's duration.
+/// Out-of-range / unseeded reads return a static zeroed buffer so a
+/// stray dereference reads zeros instead of crashing.
+#[unsafe(no_mangle)]
+pub extern "C" fn zo_state_get_struct(slot: u32) -> *const u8 {
+  static EMPTY: [u8; 16] = [0; 16];
+
+  let struct_state = struct_state().lock().unwrap();
+
+  match struct_state.get(slot as usize) {
+    Some(buf) if !buf.is_empty() => buf.as_ptr(),
+    _ => EMPTY.as_ptr(),
+  }
+}
+
 /// Push the length-prefixed string at `ptr` onto array slot
 /// `slot`, marking the slot dirty. The compiled `todos.push(x)`
 /// on a reactive `[]str` lowers to this — the runtime copies the
@@ -1457,6 +1520,41 @@ mod tests {
     assert_eq!(bytes, b"");
   }
 
+  #[test]
+  fn state_struct_round_trip_and_in_place_mutation() {
+    let _serial = state_lock();
+    zo_state_init(303);
+
+    // Seed slot 302 with an 8-byte struct value (a single `i64`
+    // field, like `Rng { bits }`).
+    let seed: i64 = 20260616;
+
+    zo_state_set_struct_word(302, seed);
+
+    // The read returns a stable pointer into the slot; mutating
+    // through it (as a `mut self` method does) must persist to the
+    // next read — that is what keeps a reactive `Rng` advancing
+    // across events.
+    let p = zo_state_get_struct(302) as *mut i64;
+
+    assert_eq!(unsafe { p.read_unaligned() }, seed);
+
+    let advanced = seed ^ (seed << 13);
+
+    unsafe { p.write_unaligned(advanced) };
+
+    let again = zo_state_get_struct(302) as *const i64;
+
+    assert_eq!(
+      unsafe { again.read_unaligned() },
+      advanced,
+      "a mutation through the slot pointer must persist",
+    );
+
+    // Out-of-range reads return a non-null zeroed buffer.
+    assert_eq!(unsafe { *zo_state_get_struct(99999) }, 0);
+  }
+
   #[test]
   fn state_get_set_round_trip() {
     let _serial = state_lock();
diff --git a/crates/compiler/zo-runtime-render/src/layout.rs b/crates/compiler/zo-runtime-render/src/layout.rs
index c217f6fb..9d255a60 100644
--- a/crates/compiler/zo-runtime-render/src/layout.rs
+++ b/crates/compiler/zo-runtime-render/src/layout.rs
@@ -129,7 +129,7 @@ impl LayoutTree {
     );
 
     let mut builder = Builder::new(author);
-    let children = builder.children(commands, None);
+    let children = builder.children(commands, None, ComputedStyle::ROOT);
 
     // Synthetic root: a flex container whose direction follows the
     // inline-vs-block nature of its children (ports the desktop
@@ -555,6 +555,7 @@ impl Builder {
     &mut self,
     cmds: &[UiCommand],
     parent: Option<usize>,
+    parent_style: ComputedStyle,
   ) -> Vec<NodeId> {
     let mut children = Vec::new();
 
@@ -570,15 +571,17 @@ impl Builder {
           self.cursor += 1;
         }
 
-        // Free-standing text (`{count}`) → a measured leaf with root
-        // typography (no tag to key the cascade on, no author patch).
+        // Free-standing text (`{count}`) → a measured leaf carrying its
+        // container's inherited typography (CSS font/colour inherit), so
+        // `<div class="card">{face}</div>` renders `face` at the card's
+        // font size, not the 16px root.
         UiCommand::Text(text) => {
           let idx = self.cursor;
           let text = text.clone();
           let node = self.leaf(LeafPlacement {
             idx,
             text,
-            style: ComputedStyle::ROOT,
+            style: parent_style.inherited(),
             author: StylePatch::EMPTY,
             interactions: InteractionAuthors::default(),
             size: None,
@@ -665,7 +668,7 @@ impl Builder {
                 } else {
                   parent
                 };
-                let kids = self.children(cmds, inner);
+                let kids = self.children(cmds, inner, style);
 
                 self
                   .tree
@@ -681,7 +684,7 @@ impl Builder {
               let kids = if self_closing {
                 Vec::new()
               } else {
-                self.children(cmds, parent)
+                self.children(cmds, parent, style)
               };
               let node = self
                 .tree
diff --git a/crates/compiler/zo-ui-protocol/src/style/computed.rs b/crates/compiler/zo-ui-protocol/src/style/computed.rs
index 3d9194f5..c33f72c9 100644
--- a/crates/compiler/zo-ui-protocol/src/style/computed.rs
+++ b/crates/compiler/zo-ui-protocol/src/style/computed.rs
@@ -297,6 +297,24 @@ impl ComputedStyle {
     border_radius: 0.0,
     box_shadow: None,
   };
+
+  /// A child's starting style: the root box defaults carrying only the
+  /// inherited typography from `self`. CSS inheritance — font and
+  /// colour cross the box boundary; background, border, and layout do
+  /// not — so a bare `{text}` node renders at its container's font, not
+  /// the 16px root default.
+  pub fn inherited(&self) -> Self {
+    Self {
+      font_family: self.font_family,
+      font_size: self.font_size,
+      font_weight: self.font_weight,
+      font_style: self.font_style,
+      text_align: self.text_align,
+      line_height: self.line_height,
+      color: self.color,
+      ..Self::ROOT
+    }
+  }
 }
 
 impl Default for ComputedStyle {
diff --git a/crates/compiler/zo-ui-protocol/src/style/css.rs b/crates/compiler/zo-ui-protocol/src/style/css.rs
index f21d4d97..6403f389 100644
--- a/crates/compiler/zo-ui-protocol/src/style/css.rs
+++ b/crates/compiler/zo-ui-protocol/src/style/css.rs
@@ -374,9 +374,27 @@ fn selector_key(selector: &str) -> (String, Option<Interaction>, bool) {
   (key, state, known)
 }
 
-/// Parse a CSS length (`16px`, `8`) into pixels. The unit suffix is
-/// dropped; only `px` is modelled at v1.
+/// The root font size, in pixels — the base `em`/`rem` resolve
+/// against. Matches `ComputedStyle::default`'s 16px.
+const ROOT_FONT_PX: f32 = 16.0;
+
+/// Parse a CSS length (`16px`, `8`, `12em`, `1.5rem`) into pixels.
+/// `px` and unitless are absolute; `em`/`rem` scale the 16px root font
+/// size — a v1 approximation, since there's no per-element `em` base
+/// (a nested `em` resolves against root, not its parent). Without this,
+/// `font-size: 12em` failed to parse and silently fell back to 16px.
 fn parse_length(value: &str) -> Option<f32> {
+  let value = value.trim();
+
+  // `rem` ends in `em`, so test it first.
+  if let Some(rem) = value.strip_suffix("rem") {
+    return rem.trim().parse::<f32>().ok().map(|n| n * ROOT_FONT_PX);
+  }
+
+  if let Some(em) = value.strip_suffix("em") {
+    return em.trim().parse::<f32>().ok().map(|n| n * ROOT_FONT_PX);
+  }
+
   value.trim_end_matches("px").trim().parse().ok()
 }
 
@@ -682,6 +700,15 @@ mod tests {
     );
   }
 
+  #[test]
+  fn length_units() {
+    // `px` and unitless are absolute; `em`/`rem` scale the 16px root.
+    assert_eq!(parse_length("16px"), Some(16.0));
+    assert_eq!(parse_length("8"), Some(8.0));
+    assert_eq!(parse_length("12em"), Some(192.0));
+    assert_eq!(parse_length("1.5rem"), Some(24.0));
+  }
+
   #[test]
   fn size_units() {
     assert_eq!(parse_size("auto"), Some(Size::Auto));