From 7caf22fe0c1963f95701b1dc05807f94329d341a Mon Sep 17 00:00:00 2001
From: Ahmed Yasin Koculu <koculu@gmail.com>
Date: Thu, 26 Feb 2026 03:23:07 +0100
Subject: [PATCH] Performance + Runtime Simplification

---
 README.md                                     |  59 +-
 benchmarks/index.html                         |  53 ++
 benchmarks/initial-load.html                  |  34 +
 benchmarks/src/index.ts                       | 752 +++++++++++++-----
 benchmarks/src/initial-load.ts                | 290 ++++---
 benchmarks/src/shared.ts                      | 110 +++
 docs-site/src/content/docs/api/drainUnbind.md |  48 ++
 docs-site/src/content/docs/api/index.md       |   1 +
 docs-site/src/content/docs/api/removeNode.md  |   1 +
 docs-site/src/content/docs/api/unbind.md      |   1 +
 docs-site/src/content/docs/getting-started.md |   3 +
 .../src/content/docs/guide/components.md      |  10 +-
 .../docs/guide/lifecycle-and-cleanup.md       |  13 +-
 docs-site/src/content/docs/guide/mounting.md  |   6 +-
 .../src/content/docs/guide/performance.md     | 181 +++--
 .../src/content/docs/guide/persisted-state.md |   6 +-
 .../src/content/docs/guide/reactivity.md      |  30 +-
 docs-site/src/content/docs/guide/templates.md |   8 +-
 .../src/content/docs/guide/typescript.md      |   6 +-
 docs-site/src/content/docs/index.mdx          |  16 +-
 docs-site/src/content/docs/overview.md        |  23 +
 package.json                                  |   2 +-
 src/api/types.ts                              |  50 +-
 src/app/ComponentHead.ts                      |   5 +-
 src/app/createComponent.ts                    |   4 +-
 src/bind/Binder.ts                            | 234 +++---
 src/bind/ComponentBinder.ts                   |  12 +-
 src/bind/DirectiveCollector.ts                |   5 +-
 src/bind/DynamicBinder.ts                     |  15 +-
 src/bind/ForBinder.ts                         |  61 +-
 src/bind/ForBinderFastPath.ts                 | 132 +++
 src/bind/ForBinderKeyedDiff.ts                | 207 +++++
 src/bind/IfBinder.ts                          |  30 +-
 src/cleanup/unbind.ts                         |   4 +-
 src/common/common.ts                          |  16 +-
 src/directives/attr.ts                        |  91 ++-
 src/directives/class.ts                       |  46 +-
 src/directives/context.ts                     |  45 +-
 src/directives/html.ts                        |  30 +-
 src/directives/model.ts                       |  24 +-
 src/directives/on.ts                          | 123 +--
 src/directives/prop.ts                        |  74 +-
 src/directives/ref.ts                         |   5 +-
 src/directives/show.ts                        |  26 +-
 src/directives/single-prop.ts                 |  85 +-
 src/directives/style.ts                       |  46 +-
 src/directives/teleport.ts                    |   4 +-
 src/directives/text.ts                        |  30 +-
 src/directives/value.ts                       |   8 +-
 src/parser/Parser.ts                          |  66 +-
 tests/bind/binder-edge.spec.ts                |  16 +-
 tests/bind/for-binder.spec.ts                 |  82 ++
 tests/coverage/utility-edge.spec.ts           |   9 +-
 tests/directive-test-utils.ts                 |  96 +++
 tests/directives/attr.spec.ts                 |  23 +-
 tests/directives/class.spec.ts                |   8 +-
 tests/directives/html.spec.ts                 |   7 +-
 tests/directives/model-edge.spec.ts           |  72 +-
 tests/directives/model.spec.ts                |  23 +-
 tests/directives/on-advanced.spec.ts          |  15 +-
 tests/directives/prop.spec.ts                 |   7 +-
 tests/directives/r-bind-mapping.spec.ts       |   5 +-
 tests/directives/ref.spec.ts                  |  34 +-
 tests/directives/single-prop.spec.ts          |  68 +-
 tests/directives/style.spec.ts                |  32 +-
 tests/directives/text.spec.ts                 |  11 +-
 tests/directives/value.spec.ts                |   5 +-
 tests/minidom/minidom.ts                      |  90 ++-
 vitest.config.ts                              |   5 +-
 69 files changed, 2658 insertions(+), 1081 deletions(-)
 create mode 100644 benchmarks/src/shared.ts
 create mode 100644 docs-site/src/content/docs/api/drainUnbind.md
 create mode 100644 src/bind/ForBinderFastPath.ts
 create mode 100644 src/bind/ForBinderKeyedDiff.ts
 create mode 100644 tests/directive-test-utils.ts

diff --git a/README.md b/README.md
index e924b50..c8fb200 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,9 @@
 
 # Regor
 
-Regor is a powerful UI framework designed to streamline the development of HTML5-based applications for both web and desktop environments. With a template syntax that closely follows Vue.js, transitioning from VueJS to Regor is seamless for developers familiar with Vue.
+Regor is a runtime-first UI framework for teams that want direct DOM control, strong TypeScript ergonomics, and precise reactivity behavior without being forced into a Virtual DOM architecture.
+
+Its template syntax is familiar to Vue users (`r-if`, `r-model`, `r-for`, `r-bind`), but its runtime model is intentionally different: Regor is built for progressive enhancement, mixed-rendering environments, and incremental adoption.
 
 ### [![Published on npm](https://img.shields.io/npm/v/regor.svg)](https://www.npmjs.com/package/regor)
 
@@ -10,9 +12,9 @@ Regor is a powerful UI framework designed to streamline the development of HTML5
 
 ## Key Features
 
-- **Simplicity:** Develop UIs without a Virtual DOM for a more straightforward implementation and easier debugging.
-- **TypeScript:** Enjoy native TypeScript support without workarounds.
-- **No Build Step Required:** Define components in TypeScript using tagged string templates, no build step needed.
+- **No VDOM Layer:** Bind directly to real DOM for transparent runtime behavior and straightforward debugging.
+- **TypeScript-Native:** Use standard TypeScript interfaces, classes, and generics without framework-specific file formats.
+- **No Build Step Required:** Define components in TypeScript using tagged string templates with npm, CDN ESM, or global build workflows.
 - **Secure Evaluation:** Regor's secure JavaScript VM ensures safe runtime compilation. You can enable security policy in your page without removing runtime compilation support.
 
 ```html
@@ -22,9 +24,9 @@ Regor is a powerful UI framework designed to streamline the development of HTML5
 />
 ```
 
-- **Flexible Reactivity:** Empowering developers with a highly flexible reactivity system.
-- **Non-JS SSR:** Bind to the existing DOM without removing already mounted HTML elements, suitable for non-JavaScript server-side rendering.
-- **Reentrance:** Regor supports multiple mountings in the previously mounted area using the same or different app contexts. This enables creating and mounting new directives dynamically.
+- **Flexible Reactivity:** Combine `ref`, `sref`, `batch`, `pause`, `resume`, and `entangle` for explicit state orchestration.
+- **Static-First + Islands:** Bind to existing DOM without removing server-rendered HTML, ideal for progressive enhancement.
+- **Reentrance:** Mount multiple times in already-mounted regions with same or different app contexts.
 - **Compatibility:** Rendered pages are designed for seamless integration with other libraries manipulating the DOM.
 
 ## Documentation
@@ -72,16 +74,13 @@ const template = html`<button @click="count++">
 
 const props = ['message']
 
-const myComponent = createComponent<MyComponent>(
-  template,
-  {
-    context: (head) => ({
-      message: head.props.message,
-      count: ref(0),
-    }),
-    props,
-  },
-)
+const myComponent = createComponent<MyComponent>(template, {
+  context: (head) => ({
+    message: head.props.message,
+    count: ref(0),
+  }),
+  props,
+})
 
 createApp({
   components: { myComponent },
@@ -161,7 +160,31 @@ or
 
 ## Comparison with VueJs
 
-Regor shares core functionality with VueJs but differs in implementation, TypeScript support, template evaluation, reactivity, server-side rendering support, compatibility.
+Regor is openly inspired by Vue’s concepts (even adopting a similar directive syntax like r-if / r-model instead of v-if / v-model), but it fundamentally diverges in its implementation. It prioritizes runtime flexibility, build-less environments, and strict TypeScript integration over the Virtual DOM (VDOM) paradigm.
+
+### Architecture and rendering model
+
+- **Vue:** Uses a Virtual DOM. This provides excellent performance for highly dynamic Single Page Applications (SPAs) because Vue calculates diffs in memory before updating the browser. However, it usually requires a compilation step to optimize templates, and hydrating existing server-rendered HTML can be notoriously strict (hydration mismatches).
+- **Regor:** Ditches the VDOM entirely. It binds directly to the actual DOM. Regor explicitly supports Static-first + dynamic islands and "Reentrance." You can mount an application multiple times over already-mounted regions or existing server-rendered HTML without destroying the elements.
+- **Verdict:** Regor is significantly more flexible for integrating into existing applications, multi-page applications (MPAs), or legacy backends.
+
+### Runtime and deployment model
+
+- **Vue:** Commonly paired with a build pipeline for SFCs and tooling depth.
+- **Regor:** Designed to require no build step. You can write standard TypeScript using tagged string templates (e.g., `html` tags for templates) and it will evaluate at runtime. Crucially, Regor features a Secure JavaScript VM for runtime compilation that adheres to strict Content Security Policies (CSP)—a common pain point when using Vue's runtime compiler in enterprise environments.
+- **Verdict:** Regor wins in deployment flexibility and zero-config setups. It respects modern security policies out of the box without demanding a bundler.
+
+### Reactivity control model
+
+- **Vue:** Uses ES6 Proxies for a highly automated, "magical" reactivity system. You update an object, and Vue figures out what to re-render. However, this magic can sometimes abstract away performance bottlenecks, leading to over-rendering if you aren't careful with deep reactivity.
+- **Regor:** Provides fine-tuned, manual control. It offers `ref` (deep reactivity) and `sref` (simple/shallow reactivity without nested observation). Furthermore, Regor provides advanced control APIs like `pause()` and `resume()` to stop a ref's auto-triggers, `entangle()` to sync two refs effortlessly, and `batch()` for precise state grouping.
+- **Verdict:** Vue's reactivity is easier for beginners.. Regor’s reactivity is more flexible and transparent, giving engineers exact tools to orchestrate update semantics and prevent unwanted DOM paints.
+
+### TypeScript ergonomics
+
+- **Vue:** TypeScript support in Vue has improved massively, but it still relies on heavy IDE plugins (Volar) and specialized compilers (vue-tsc) to understand .vue files. The separation between the `<template>` and `<script>` requires tooling to bridge the gap.
+- **Regor:** Offers native TypeScript support without workarounds. Because components and templates are defined using standard TypeScript functions, class-based contexts, and `ComponentHead<T>`, standard TypeScript compilers and IDEs understand 100% of the code immediately.
+- **Verdict:** Regor offers a purer, higher-quality TypeScript experience. It leverages the language itself rather than relying on framework-specific compiler magic to provide type safety.
 
 ## Supported Directives
 
diff --git a/benchmarks/index.html b/benchmarks/index.html
index 47752bd..9693e27 100644
--- a/benchmarks/index.html
+++ b/benchmarks/index.html
@@ -11,6 +11,7 @@
         --fg: #e5e7eb;
         --muted: #9ca3af;
         --accent: #22c55e;
+        --winner: #4ade80;
       }
       body {
         margin: 0;
@@ -60,6 +61,17 @@
         padding: 8px;
         text-align: left;
       }
+      #scenario-results tbody tr.scenario-pair-a {
+        background: #11243a;
+      }
+      #scenario-results tbody tr.scenario-pair-b {
+        background: #162f4b;
+      }
+      #results .winner-metric,
+      #scenario-results .winner-metric {
+        color: var(--winner);
+        font-weight: 700;
+      }
       .roots {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -92,6 +104,35 @@ <h1>DOM Benchmark: Regor vs Vue (latest)</h1>
         <button id="run-regor">Run Regor</button>
         <button id="run-vue">Run Vue</button>
         <button id="run">Run Both</button>
+        <label style="margin-left: 12px; color: var(--muted)">
+          Row count
+          <select id="row-count">
+            <option value="500" selected>500</option>
+            <option value="1000">1000</option>
+            <option value="2000">2000</option>
+            <option value="5000">5000</option>
+          </select>
+        </label>
+        <label style="margin-left: 12px; color: var(--muted)">
+          Warmups
+          <select id="warmup-runs">
+            <option value="0">0</option>
+            <option value="2">2</option>
+            <option value="4">4</option>
+            <option value="6" selected>6</option>
+            <option value="10">10</option>
+          </select>
+        </label>
+        <label style="margin-left: 12px; color: var(--muted)">
+          Samples
+          <select id="sample-runs">
+            <option value="1">1</option>
+            <option value="10">10</option>
+            <option value="20" selected>20</option>
+            <option value="30">30</option>
+            <option value="50">50</option>
+          </select>
+        </label>
         <table id="results">
           <thead>
             <tr>
@@ -108,6 +149,18 @@ <h1>DOM Benchmark: Regor vs Vue (latest)</h1>
           </thead>
           <tbody></tbody>
         </table>
+        <table id="scenario-results">
+          <thead>
+            <tr>
+              <th>Framework</th>
+              <th>Scenario</th>
+              <th>Median (ms)</th>
+              <th>P90 (ms)</th>
+              <th>Samples</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
         <div id="log" class="note"></div>
         <div class="roots">
           <div class="panel rootbox">
diff --git a/benchmarks/initial-load.html b/benchmarks/initial-load.html
index ad2e7d4..68dddfc 100644
--- a/benchmarks/initial-load.html
+++ b/benchmarks/initial-load.html
@@ -11,6 +11,7 @@
         --fg: #e5e7eb;
         --muted: #9ca3af;
         --accent: #22c55e;
+        --winner: #4ade80;
       }
       body {
         margin: 0;
@@ -60,6 +61,10 @@
         padding: 8px;
         text-align: left;
       }
+      #results .winner-metric {
+        color: var(--winner);
+        font-weight: 700;
+      }
       .roots {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -89,6 +94,35 @@ <h1>Initial Load Benchmark: Regor vs Vue</h1>
         <button id="run-regor">Run Regor</button>
         <button id="run-vue">Run Vue</button>
         <button id="run">Run Both</button>
+        <label style="margin-left: 12px; color: var(--muted)">
+          Row count
+          <select id="row-count">
+            <option value="500" selected>500</option>
+            <option value="1000">1000</option>
+            <option value="2000">2000</option>
+            <option value="5000">5000</option>
+          </select>
+        </label>
+        <label style="margin-left: 12px; color: var(--muted)">
+          Warmups
+          <select id="warmup-runs">
+            <option value="0">0</option>
+            <option value="2">2</option>
+            <option value="4">4</option>
+            <option value="6" selected>6</option>
+            <option value="10">10</option>
+          </select>
+        </label>
+        <label style="margin-left: 12px; color: var(--muted)">
+          Samples
+          <select id="sample-runs">
+            <option value="1">1</option>
+            <option value="10">10</option>
+            <option value="20" selected>20</option>
+            <option value="30">30</option>
+            <option value="50">50</option>
+          </select>
+        </label>
         <table id="results">
           <thead>
             <tr>
diff --git a/benchmarks/src/index.ts b/benchmarks/src/index.ts
index 41ed36e..80e55d3 100644
--- a/benchmarks/src/index.ts
+++ b/benchmarks/src/index.ts
@@ -1,4 +1,24 @@
-import { createApp as createRegorApp, html, ref } from '../../src'
+import {
+  createApp as createRegorApp,
+  html,
+  Ref,
+  ref,
+  RegorConfig,
+} from '../../src'
+import {
+  clearRoot,
+  formatMs,
+  getRowCount,
+  getSampleRuns,
+  getWarmupRuns,
+  loadVueModule,
+  nextFrame,
+  percentile,
+  runAlternating,
+  runSamples,
+  setButtonsDisabled,
+  setLog,
+} from './shared'
 
 type Row = {
   id: number
@@ -13,6 +33,7 @@ type BenchResult = {
   mutateMs: number
   totalMs: number
   rowsFinal: number
+  scenarioMs: Record<string, number>
 }
 
 type BenchSummary = {
@@ -27,22 +48,62 @@ type BenchSummary = {
   samples: number
 }
 
-const ROW_COUNT = 500
-const ROUNDS = 20
+type ScenarioSummary = {
+  framework: string
+  scenario: string
+  median: number
+  p90: number
+  samples: number
+}
+
 const STRIDE = 17
 const SPLICE_SIZE = 24
-const SAMPLE_RUNS = 20
-const WARMUP_RUNS = 6
-const VUE_ESM_URL =
-  'https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.esm-browser.prod.js'
-let vueModulePromise: Promise<any> | null = null
-let lastRegorApp: { unbind: () => void } | null = null
-let lastVueApp: { unmount: () => void } | null = null
+const INSERT_HEAD_SIZE = 32
+const REMOVE_EVERY_K = 5
+const SHUFFLE_SEED = 1337
+const SCENARIOS = [
+  'swap_second_last',
+  'reverse_rows',
+  'rotate_head_tail',
+  'splice_middle_replace',
+  'mutate_stride_fields',
+  'increment_odd_values_by_5',
+  'insert_head_32',
+  'remove_every_5th',
+  'shuffle_deterministic',
+  'replace_all_objects_same_keys',
+  'toggle_class_all_rows',
+] as const
+
+type ScenarioName = (typeof SCENARIOS)[number]
+
+type VueRuntime = {
+  createApp: (options: { data: () => { rows: Row[] }; template: string }) => {
+    mount: (root: HTMLElement) => void
+    unmount: () => void
+  }
+  reactive: <T extends object>(state: T) => T
+}
+
+type RegorScenarioRuntime = {
+  getRows: () => Ref<Row>[]
+  createInserts: (count: number) => Row[]
+}
 
-const nextFrame = async (): Promise<void> => {
-  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+type VueScenarioRuntime = {
+  getRows: () => Row[]
+  createInserts: (count: number) => Row[]
 }
 
+type PairedScenarioDefinition = {
+  name: ScenarioName
+  regor: (runtime: RegorScenarioRuntime) => void
+  vue: (runtime: VueScenarioRuntime) => void
+}
+
+let lastRegorApp: { unbind: () => void } | null = null
+let lastVueApp: { unmount: () => void } | null = null
+
 const makeRows = (count: number, startId = 0): Row[] => {
   const out: Row[] = []
   for (let i = 0; i < count; i++) {
@@ -57,32 +118,238 @@ const makeRows = (count: number, startId = 0): Row[] => {
   return out
 }
 
-const clearRoot = (root: HTMLElement): void => {
-  root.innerHTML = ''
+const getRegorLabel = (): string => 'Regor'
+
+const shuffleDeterministic = <T>(rows: T[]): void => {
+  let seed = SHUFFLE_SEED
+  for (let i = rows.length - 1; i > 0; i--) {
+    seed = (seed * 1664525 + 1013904223) >>> 0
+    const j = seed % (i + 1)
+    const tmp = rows[i]
+    rows[i] = rows[j]
+    rows[j] = tmp
+  }
 }
 
-const loadVueModule = async (): Promise<any> => {
-  if (!vueModulePromise) {
-    vueModulePromise = import(/* @vite-ignore */ VUE_ESM_URL)
+const SCENARIO_DEFINITIONS: readonly PairedScenarioDefinition[] = [
+  {
+    name: 'swap_second_last',
+    regor: ({ getRows }) => {
+      const rows = getRows()
+      if (rows.length < 3) return
+      const tmp = rows[1]
+      rows[1] = rows[rows.length - 1]
+      rows[rows.length - 1] = tmp
+    },
+    vue: ({ getRows }) => {
+      const rows = getRows()
+      if (rows.length < 3) return
+      const tmp = rows[1]
+      rows[1] = rows[rows.length - 1]
+      rows[rows.length - 1] = tmp
+    },
+  },
+  {
+    name: 'reverse_rows',
+    regor: ({ getRows }) => {
+      getRows().reverse()
+    },
+    vue: ({ getRows }) => {
+      getRows().reverse()
+    },
+  },
+  {
+    name: 'rotate_head_tail',
+    regor: ({ getRows }) => {
+      const rows = getRows()
+      const head = rows.shift()
+      if (head) rows.push(head)
+    },
+    vue: ({ getRows }) => {
+      const rows = getRows()
+      const head = rows.shift()
+      if (head) rows.push(head)
+    },
+  },
+  {
+    name: 'splice_middle_replace',
+    regor: ({ getRows, createInserts }) => {
+      const rows = getRows()
+      const mid = (rows.length / 2) | 0
+      rows.splice(mid, SPLICE_SIZE, ...ref(createInserts(SPLICE_SIZE))())
+    },
+    vue: ({ getRows, createInserts }) => {
+      const rows = getRows()
+      const mid = (rows.length / 2) | 0
+      rows.splice(mid, SPLICE_SIZE, ...createInserts(SPLICE_SIZE))
+    },
+  },
+  {
+    name: 'mutate_stride_fields',
+    regor: ({ getRows }) => {
+      const rows = getRows()
+      for (let i = 0; i < rows.length; i += STRIDE) {
+        const row = rows[i]()
+        row.value.value += 1
+        row.active.value = !row.active.value
+        row.label.value = `row-${row.id.value}-m`
+      }
+    },
+    vue: ({ getRows }) => {
+      const rows = getRows()
+      for (let i = 0; i < rows.length; i += STRIDE) {
+        const row = rows[i]
+        row.value += 1
+        row.active = !row.active
+        row.label = `row-${row.id}-m`
+      }
+    },
+  },
+  {
+    name: 'increment_odd_values_by_5',
+    regor: ({ getRows }) => {
+      const rows = getRows()
+      for (let i = 1; i < rows.length; i += 2) {
+        const row = rows[i]()
+        row.value.value += 5
+      }
+    },
+    vue: ({ getRows }) => {
+      const rows = getRows()
+      for (let i = 1; i < rows.length; i += 2) {
+        rows[i].value += 5
+      }
+    },
+  },
+  {
+    name: 'insert_head_32',
+    regor: ({ getRows, createInserts }) => {
+      const rows = getRows()
+      rows.unshift(...ref(createInserts(INSERT_HEAD_SIZE))())
+    },
+    vue: ({ getRows, createInserts }) => {
+      const rows = getRows()
+      rows.unshift(...createInserts(INSERT_HEAD_SIZE))
+    },
+  },
+  {
+    name: 'remove_every_5th',
+    regor: ({ getRows }) => {
+      const rows = getRows()
+      for (let i = rows.length - 1; i >= 0; i--) {
+        if (i % REMOVE_EVERY_K === 0) rows.splice(i, 1)
+      }
+    },
+    vue: ({ getRows }) => {
+      const rows = getRows()
+      for (let i = rows.length - 1; i >= 0; i--) {
+        if (i % REMOVE_EVERY_K === 0) rows.splice(i, 1)
+      }
+    },
+  },
+  {
+    name: 'shuffle_deterministic',
+    regor: ({ getRows }) => {
+      const rows = getRows()
+      shuffleDeterministic(rows)
+    },
+    vue: ({ getRows }) => {
+      const rows = getRows()
+      shuffleDeterministic(rows)
+    },
+  },
+  {
+    name: 'replace_all_objects_same_keys',
+    regor: ({ getRows }) => {
+      const rows = getRows()
+      const replacements = rows.map((rowRef) => {
+        const row = rowRef()
+        return {
+          id: row.id.value,
+          label: `${row.label.value}-r`,
+          value: row.value.value + 1,
+          active: !row.active.value,
+        }
+      })
+      for (let i = 0; i < rows.length; i++) {
+        rows[i] = ref(replacements[i])
+      }
+    },
+    vue: ({ getRows }) => {
+      const rows = getRows()
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i]
+        rows[i] = {
+          id: row.id,
+          label: `${row.label}-r`,
+          value: row.value + 1,
+          active: !row.active,
+        }
+      }
+    },
+  },
+  {
+    name: 'toggle_class_all_rows',
+    regor: ({ getRows }) => {
+      const rows = getRows()
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i]()
+        row.active.value = !row.active.value
+      }
+    },
+    vue: ({ getRows }) => {
+      const rows = getRows()
+      for (let i = 0; i < rows.length; i++) {
+        rows[i].active = !rows[i].active
+      }
+    },
+  },
+]
+
+const timeScenario = async (
+  name: ScenarioName,
+  resetRows: () => void,
+  mutate: () => void,
+): Promise<[ScenarioName, number]> => {
+  resetRows()
+  await nextFrame()
+  const t0 = performance.now()
+  mutate()
+  await nextFrame()
+  return [name, performance.now() - t0]
+}
+
+const measureScenarioDurations = async (
+  resetRows: () => void,
+  mutateForScenario: (scenario: PairedScenarioDefinition) => void,
+): Promise<Record<string, number>> => {
+  const scenarioMs: Record<string, number> = {}
+  for (const scenario of SCENARIO_DEFINITIONS) {
+    const [name, ms] = await timeScenario(scenario.name, resetRows, () =>
+      mutateForScenario(scenario),
+    )
+    scenarioMs[name] = ms
   }
-  return vueModulePromise
+  return scenarioMs
 }
 
+const sumScenarioDurations = (scenarioMs: Record<string, number>): number =>
+  SCENARIOS.reduce((sum, name) => sum + (scenarioMs[name] ?? 0), 0)
+
 const runRegor = async (root: HTMLElement): Promise<BenchResult> => {
   if (lastRegorApp) {
     lastRegorApp.unbind()
     lastRegorApp = null
   }
   clearRoot(root)
-  let nextId = ROW_COUNT
-  const initialRows = makeRows(ROW_COUNT)
+
+  const rowCount = getRowCount()
+  const config = new RegorConfig()
 
   await nextFrame()
   const mountT0 = performance.now()
   const app = createRegorApp(
-    {
-      rows: ref(initialRows),
-    },
+    { rows: ref(makeRows(rowCount)) },
     {
       element: root,
       template: html`<div>
@@ -92,37 +359,37 @@ const runRegor = async (root: HTMLElement): Promise<BenchResult> => {
         </div>
       </div>`,
     },
+    config,
   )
   lastRegorApp = app
+
   await nextFrame()
   const mountMs = performance.now() - mountT0
 
-  const mutateT0 = performance.now()
-  for (let round = 0; round < ROUNDS; round++) {
-    const rows = app.context.rows()
-    for (let i = 0; i < rows.length; i += STRIDE) {
-      const row = rows[i]()
-      row.value.value += round + 1
-      row.active.value = !row.active.value
-      row.label.value = `row-${row.id.value}-${round}`
-    }
-    const mid = (rows.length / 2) | 0
-    const inserts = makeRows(SPLICE_SIZE, nextId).map((x) => ref(x))
-    nextId += SPLICE_SIZE
-    rows.splice(mid, SPLICE_SIZE, ...inserts)
-    rows.push(ref(makeRows(1, nextId++)[0]))
-    rows.shift()
-  }
-  await nextFrame()
-  const mutateMs = performance.now() - mutateT0
-  const totalMs = mountMs + mutateMs
+  let nextScenarioId = rowCount * 10
+  const scenarioMs = await measureScenarioDurations(
+    () => {
+      app.context.rows(ref(makeRows(rowCount)))
+    },
+    (scenario) =>
+      scenario.regor({
+        getRows: () => app.context.rows(),
+        createInserts: (count: number) => {
+          const inserts = makeRows(count, nextScenarioId)
+          nextScenarioId += count
+          return inserts
+        },
+      }),
+  )
 
+  const mutateMs = sumScenarioDurations(scenarioMs)
   return {
-    framework: 'Regor',
+    framework: getRegorLabel(),
     mountMs,
     mutateMs,
-    totalMs,
+    totalMs: mountMs + mutateMs,
     rowsFinal: app.context.rows().length,
+    scenarioMs,
   }
 }
 
@@ -132,13 +399,11 @@ const runVue = async (root: HTMLElement): Promise<BenchResult> => {
     lastVueApp = null
   }
   clearRoot(root)
-  const vue = await loadVueModule()
-  const { createApp, reactive } = vue
-  let nextId = ROW_COUNT
 
-  const state = reactive({
-    rows: makeRows(ROW_COUNT),
-  })
+  const vue = (await loadVueModule()) as VueRuntime
+  const { createApp, reactive } = vue
+  const rowCount = getRowCount()
+  const state = reactive({ rows: makeRows(rowCount) })
 
   await nextFrame()
   const mountT0 = performance.now()
@@ -156,49 +421,37 @@ const runVue = async (root: HTMLElement): Promise<BenchResult> => {
   })
   app.mount(root)
   lastVueApp = app
+
   await nextFrame()
   const mountMs = performance.now() - mountT0
 
-  const mutateT0 = performance.now()
-  for (let round = 0; round < ROUNDS; round++) {
-    const rows = state.rows
-    for (let i = 0; i < rows.length; i += STRIDE) {
-      const row = rows[i]
-      row.value += round + 1
-      row.active = !row.active
-      row.label = `row-${row.id}-${round}`
-    }
-    const mid = (rows.length / 2) | 0
-    const inserts = makeRows(SPLICE_SIZE, nextId)
-    nextId += SPLICE_SIZE
-    rows.splice(mid, SPLICE_SIZE, ...inserts)
-    rows.push(makeRows(1, nextId++)[0])
-    rows.shift()
-  }
-  await nextFrame()
-  const mutateMs = performance.now() - mutateT0
-  const totalMs = mountMs + mutateMs
+  let nextScenarioId = rowCount * 10
+  const scenarioMs = await measureScenarioDurations(
+    () => {
+      state.rows = makeRows(rowCount)
+    },
+    (scenario) =>
+      scenario.vue({
+        getRows: () => state.rows,
+        createInserts: (count: number) => {
+          const inserts = makeRows(count, nextScenarioId)
+          nextScenarioId += count
+          return inserts
+        },
+      }),
+  )
 
+  const mutateMs = sumScenarioDurations(scenarioMs)
   return {
     framework: 'Vue@latest',
     mountMs,
     mutateMs,
-    totalMs,
+    totalMs: mountMs + mutateMs,
     rowsFinal: state.rows.length,
+    scenarioMs,
   }
 }
 
-const formatMs = (n: number): string => n.toFixed(2)
-
-const percentile = (sorted: number[], p: number): number => {
-  if (!sorted.length) return 0
-  const idx = Math.min(
-    sorted.length - 1,
-    Math.max(0, Math.ceil((p / 100) * sorted.length) - 1),
-  )
-  return sorted[idx]
-}
-
 const summarize = (framework: string, samples: BenchResult[]): BenchSummary => {
   const mount = samples.map((x) => x.mountMs).sort((a, b) => a - b)
   const mutate = samples.map((x) => x.mutateMs).sort((a, b) => a - b)
@@ -216,21 +469,121 @@ const summarize = (framework: string, samples: BenchResult[]): BenchSummary => {
   }
 }
 
+const summarizeScenarios = (
+  framework: string,
+  samples: BenchResult[],
+): ScenarioSummary[] =>
+  SCENARIOS.map((scenario) => {
+    const values = samples
+      .map((x) => x.scenarioMs[scenario] ?? 0)
+      .sort((a, b) => a - b)
+    return {
+      framework,
+      scenario,
+      median: percentile(values, 50),
+      p90: percentile(values, 90),
+      samples: samples.length,
+    }
+  })
+
+const winnerByDisplayedValue = (
+  left: number,
+  leftFramework: string,
+  right: number,
+  rightFramework: string,
+): string => {
+  const leftShown = Number(left.toFixed(2))
+  const rightShown = Number(right.toFixed(2))
+  if (leftShown === rightShown) return ''
+  return leftShown < rightShown ? leftFramework : rightFramework
+}
+
 const renderResults = (rows: BenchSummary[]): void => {
   const tbody =
     document.querySelector<HTMLTableSectionElement>('#results tbody')
   if (!tbody) return
+
+  const mountMedianWinner =
+    rows.length === 2
+      ? winnerByDisplayedValue(
+          rows[0].mountMedian,
+          rows[0].framework,
+          rows[1].mountMedian,
+          rows[1].framework,
+        )
+      : ''
+  const mountP90Winner =
+    rows.length === 2
+      ? winnerByDisplayedValue(
+          rows[0].mountP90,
+          rows[0].framework,
+          rows[1].mountP90,
+          rows[1].framework,
+        )
+      : ''
+  const mutateMedianWinner =
+    rows.length === 2
+      ? winnerByDisplayedValue(
+          rows[0].mutateMedian,
+          rows[0].framework,
+          rows[1].mutateMedian,
+          rows[1].framework,
+        )
+      : ''
+  const mutateP90Winner =
+    rows.length === 2
+      ? winnerByDisplayedValue(
+          rows[0].mutateP90,
+          rows[0].framework,
+          rows[1].mutateP90,
+          rows[1].framework,
+        )
+      : ''
+  const totalMedianWinner =
+    rows.length === 2
+      ? winnerByDisplayedValue(
+          rows[0].totalMedian,
+          rows[0].framework,
+          rows[1].totalMedian,
+          rows[1].framework,
+        )
+      : ''
+  const totalP90Winner =
+    rows.length === 2
+      ? winnerByDisplayedValue(
+          rows[0].totalP90,
+          rows[0].framework,
+          rows[1].totalP90,
+          rows[1].framework,
+        )
+      : ''
+  const labelWinner =
+    totalMedianWinner !== '' && totalMedianWinner === totalP90Winner
+      ? totalMedianWinner
+      : ''
+
   tbody.innerHTML = ''
   for (const r of rows) {
+    const frameworkClass = labelWinner === r.framework ? 'winner-metric' : ''
+    const mountMedianClass =
+      mountMedianWinner === r.framework ? 'winner-metric' : ''
+    const mountP90Class = mountP90Winner === r.framework ? 'winner-metric' : ''
+    const mutateMedianClass =
+      mutateMedianWinner === r.framework ? 'winner-metric' : ''
+    const mutateP90Class =
+      mutateP90Winner === r.framework ? 'winner-metric' : ''
+    const totalMedianClass =
+      totalMedianWinner === r.framework ? 'winner-metric' : ''
+    const totalP90Class = totalP90Winner === r.framework ? 'winner-metric' : ''
     const tr = document.createElement('tr')
     tr.innerHTML = `
-      <td>${r.framework}</td>
-      <td>${formatMs(r.mountMedian)}</td>
-      <td>${formatMs(r.mountP90)}</td>
-      <td>${formatMs(r.mutateMedian)}</td>
-      <td>${formatMs(r.mutateP90)}</td>
-      <td>${formatMs(r.totalMedian)}</td>
-      <td>${formatMs(r.totalP90)}</td>
+      <td class="${frameworkClass}">${r.framework}</td>
+      <td class="${mountMedianClass}">${formatMs(r.mountMedian)}</td>
+      <td class="${mountP90Class}">${formatMs(r.mountP90)}</td>
+      <td class="${mutateMedianClass}">${formatMs(r.mutateMedian)}</td>
+      <td class="${mutateP90Class}">${formatMs(r.mutateP90)}</td>
+      <td class="${totalMedianClass}">${formatMs(r.totalMedian)}</td>
+      <td class="${totalP90Class}">${formatMs(r.totalP90)}</td>
       <td>${r.rowsFinal}</td>
       <td>${r.samples}</td>
     `
@@ -238,149 +591,177 @@ const renderResults = (rows: BenchSummary[]): void => {
   }
 }
 
-const setLog = (msg: string): void => {
-  const log = document.getElementById('log')
-  if (log) log.textContent = msg
-}
+const renderScenarioResults = (rows: ScenarioSummary[]): void => {
+  const tbody = document.querySelector<HTMLTableSectionElement>(
+    '#scenario-results tbody',
+  )
+  if (!tbody) return
 
-const setButtonsDisabled = (disabled: boolean): void => {
-  const ids = ['run', 'run-regor', 'run-vue']
-  for (const id of ids) {
-    const button = document.getElementById(id) as HTMLButtonElement | null
-    if (button) button.disabled = disabled
+  const byScenario = new Map<string, ScenarioSummary[]>()
+  for (const row of rows) {
+    const existing = byScenario.get(row.scenario)
+    if (existing) existing.push(row)
+    else byScenario.set(row.scenario, [row])
   }
-}
 
-const runRegorSamples = async (
-  root: HTMLElement,
-  count: number,
-): Promise<BenchResult[]> => {
-  const out: BenchResult[] = []
-  for (let i = 0; i < count; i++) {
-    out.push(await runRegor(root))
-  }
-  return out
-}
-
-const runVueSamples = async (
-  root: HTMLElement,
-  count: number,
-): Promise<BenchResult[]> => {
-  const out: BenchResult[] = []
-  for (let i = 0; i < count; i++) {
-    out.push(await runVue(root))
+  tbody.innerHTML = ''
+  let rowIndex = 0
+  for (const scenario of SCENARIOS) {
+    const pairs = (byScenario.get(scenario) ?? []).sort((a, b) => {
+      const aRegor = a.framework.startsWith('Regor')
+      const bRegor = b.framework.startsWith('Regor')
+      if (aRegor === bRegor) return a.framework.localeCompare(b.framework)
+      return aRegor ? -1 : 1
+    })
+    const medianWinner =
+      pairs.length === 2
+        ? winnerByDisplayedValue(
+            pairs[0].median,
+            pairs[0].framework,
+            pairs[1].median,
+            pairs[1].framework,
+          )
+        : ''
+    const p90Winner =
+      pairs.length === 2
+        ? winnerByDisplayedValue(
+            pairs[0].p90,
+            pairs[0].framework,
+            pairs[1].p90,
+            pairs[1].framework,
+          )
+        : ''
+    const labelWinner =
+      medianWinner !== '' && medianWinner === p90Winner ? medianWinner : ''
+    for (const r of pairs) {
+      const tr = document.createElement('tr')
+      const pairGroupClass =
+        Math.floor(rowIndex / 2) % 2 === 0
+          ? 'scenario-pair-a'
+          : 'scenario-pair-b'
+      tr.className = pairGroupClass
+      const frameworkClass = labelWinner === r.framework ? 'winner-metric' : ''
+      const medianClass = medianWinner === r.framework ? 'winner-metric' : ''
+      const p90Class = p90Winner === r.framework ? 'winner-metric' : ''
+      tr.innerHTML = `
+        <td class="${frameworkClass}">${r.framework}</td>
+        <td>${r.scenario}</td>
+        <td class="${medianClass}">${formatMs(r.median)}</td>
+        <td class="${p90Class}">${formatMs(r.p90)}</td>
+        <td>${r.samples}</td>
+      `
+      tbody.appendChild(tr)
+      rowIndex += 1
+    }
   }
-  return out
 }
 
-const runComparativeSamples = async (
-  regorRoot: HTMLElement,
-  vueRoot: HTMLElement,
-  samples: number,
-): Promise<{ regor: BenchResult[]; vue: BenchResult[] }> => {
-  const regor: BenchResult[] = []
-  const vue: BenchResult[] = []
-  for (let i = 0; i < samples; i++) {
-    const regorFirst = (i & 1) === 0
-    if (regorFirst) {
-      regor.push(await runRegor(regorRoot))
-      vue.push(await runVue(vueRoot))
-    } else {
-      vue.push(await runVue(vueRoot))
-      regor.push(await runRegor(regorRoot))
-    }
-    setLog(`Measured sample ${i + 1}/${samples}...`)
+const withButtonsDisabled = async (
+  onFailure: string,
+  action: () => Promise<void>,
+): Promise<void> => {
+  setButtonsDisabled(true)
+  try {
+    await action()
+  } catch (e) {
+    console.error(e)
+    setLog(`${onFailure}: ${(e as Error).message}`)
+  } finally {
+    setButtonsDisabled(false)
   }
-  return { regor, vue }
 }
 
 const run = async (): Promise<void> => {
-  setButtonsDisabled(true)
-  try {
+  await withButtonsDisabled('Benchmark failed', async () => {
+    const rowCount = getRowCount()
+    const warmupRuns = getWarmupRuns()
+    const sampleRuns = getSampleRuns()
     setLog(
-      `Warmup ${WARMUP_RUNS} rounds (unmeasured), then ${SAMPLE_RUNS} measured samples (A/B alternating)...`,
+      `rows=${rowCount}, warmup ${warmupRuns} rounds (unmeasured), then ${sampleRuns} measured samples (A/B alternating)...`,
     )
+
     const regorRoot = document.getElementById('regor-root')
     const vueRoot = document.getElementById('vue-root')
     if (!regorRoot || !vueRoot) {
       setLog('Missing benchmark roots in DOM.')
       return
     }
-    for (let i = 0; i < WARMUP_RUNS; i++) {
-      if ((i & 1) === 0) {
-        await runRegor(regorRoot)
-        await runVue(vueRoot)
-      } else {
-        await runVue(vueRoot)
-        await runRegor(regorRoot)
-      }
-    }
-    const measured = await runComparativeSamples(
-      regorRoot,
-      vueRoot,
-      SAMPLE_RUNS,
+
+    await runAlternating(
+      warmupRuns,
+      () => runRegor(regorRoot),
+      () => runVue(vueRoot),
+    )
+    const measured = await runAlternating(
+      sampleRuns,
+      () => runRegor(regorRoot),
+      () => runVue(vueRoot),
+      (i) => setLog(`Measured sample ${i + 1}/${sampleRuns}...`),
     )
-    const regorSummary = summarize('Regor', measured.regor)
-    const vueSummary = summarize('Vue@latest', measured.vue)
+
+    const regorSummary = summarize(getRegorLabel(), measured.a)
+    const vueSummary = summarize('Vue@latest', measured.b)
+    const regorScenarios = summarizeScenarios(getRegorLabel(), measured.a)
+    const vueScenarios = summarizeScenarios('Vue@latest', measured.b)
+
     renderResults([regorSummary, vueSummary])
+    renderScenarioResults([...regorScenarios, ...vueScenarios])
+
     setLog('Done. Showing median + p90. Warmups excluded.')
     console.table([regorSummary, vueSummary])
-  } catch (e) {
-    console.error(e)
-    setLog(`Benchmark failed: ${(e as Error).message}`)
-  } finally {
-    setButtonsDisabled(false)
-  }
+  })
 }
 
 const runOnlyRegor = async (): Promise<void> => {
-  setButtonsDisabled(true)
-  try {
+  await withButtonsDisabled('Regor benchmark failed', async () => {
+    const rowCount = getRowCount()
+    const warmupRuns = getWarmupRuns()
+    const sampleRuns = getSampleRuns()
     setLog(
-      `Regor: warmup ${WARMUP_RUNS} rounds (unmeasured), ${SAMPLE_RUNS} measured samples...`,
+      `${getRegorLabel()}: rows=${rowCount}, warmup ${warmupRuns} rounds (unmeasured), ${sampleRuns} measured samples...`,
     )
+
     const regorRoot = document.getElementById('regor-root')
     if (!regorRoot) {
       setLog('Missing Regor root in DOM.')
       return
     }
-    await runRegorSamples(regorRoot, WARMUP_RUNS)
-    const samples = await runRegorSamples(regorRoot, SAMPLE_RUNS)
-    const summary = summarize('Regor', samples)
+
+    await runSamples(warmupRuns, () => runRegor(regorRoot))
+    const samples = await runSamples(sampleRuns, () => runRegor(regorRoot))
+    const summary = summarize(getRegorLabel(), samples)
+
     renderResults([summary])
-    setLog('Regor done. Showing median + p90.')
+    renderScenarioResults(summarizeScenarios(getRegorLabel(), samples))
+    setLog(`${getRegorLabel()} done. Showing median + p90.`)
     console.table([summary])
-  } catch (e) {
-    console.error(e)
-    setLog(`Regor benchmark failed: ${(e as Error).message}`)
-  } finally {
-    setButtonsDisabled(false)
-  }
+  })
 }
 
 const runOnlyVue = async (): Promise<void> => {
-  setButtonsDisabled(true)
-  try {
+  await withButtonsDisabled('Vue benchmark failed', async () => {
+    const rowCount = getRowCount()
+    const warmupRuns = getWarmupRuns()
+    const sampleRuns = getSampleRuns()
     setLog(
-      `Vue: warmup ${WARMUP_RUNS} rounds (unmeasured), ${SAMPLE_RUNS} measured samples...`,
+      `Vue: rows=${rowCount}, warmup ${warmupRuns} rounds (unmeasured), ${sampleRuns} measured samples...`,
     )
+
     const vueRoot = document.getElementById('vue-root')
     if (!vueRoot) {
       setLog('Missing Vue root in DOM.')
       return
     }
-    await runVueSamples(vueRoot, WARMUP_RUNS)
-    const samples = await runVueSamples(vueRoot, SAMPLE_RUNS)
+
+    await runSamples(warmupRuns, () => runVue(vueRoot))
+    const samples = await runSamples(sampleRuns, () => runVue(vueRoot))
     const summary = summarize('Vue@latest', samples)
+
     renderResults([summary])
+    renderScenarioResults(summarizeScenarios('Vue@latest', samples))
     setLog('Vue done. Showing median + p90.')
     console.table([summary])
-  } catch (e) {
-    console.error(e)
-    setLog(`Vue benchmark failed: ${(e as Error).message}`)
-  } finally {
-    setButtonsDisabled(false)
-  }
+  })
 }
 
 const wire = (): void => {
@@ -391,13 +772,14 @@ const wire = (): void => {
     'run-vue',
   ) as HTMLButtonElement | null
   const runButton = document.getElementById('run') as HTMLButtonElement | null
+
   setButtonsDisabled(true)
   setLog('Loading Vue runtime (excluded from benchmark timing)...')
   void loadVueModule()
     .then(() => {
       setButtonsDisabled(false)
       setLog(
-        `Ready. Default run uses ${WARMUP_RUNS} warmups + ${SAMPLE_RUNS} samples (median/p90).`,
+        `Ready. rows=${getRowCount()}, warmups=${getWarmupRuns()}, samples=${getSampleRuns()} (median/p90).`,
       )
     })
     .catch((e) => {
@@ -407,11 +789,9 @@ const wire = (): void => {
   runRegorButton?.addEventListener('click', () => {
     void runOnlyRegor()
   })
-
   runVueButton?.addEventListener('click', () => {
     void runOnlyVue()
   })
-
   runButton?.addEventListener('click', () => {
     void run()
   })
diff --git a/benchmarks/src/initial-load.ts b/benchmarks/src/initial-load.ts
index 2888902..537710a 100644
--- a/benchmarks/src/initial-load.ts
+++ b/benchmarks/src/initial-load.ts
@@ -1,4 +1,18 @@
 import { createApp as createRegorApp, html, RegorConfig, sref } from '../../src'
+import {
+  clearRoot,
+  formatMs,
+  getRowCount,
+  getSampleRuns,
+  getWarmupRuns,
+  loadVueModule,
+  nextFrame,
+  percentile,
+  runAlternating,
+  runSamples,
+  setButtonsDisabled,
+  setLog,
+} from './shared'
 
 type Row = {
   id: number
@@ -21,23 +35,23 @@ type BenchSummary = {
   samples: number
 }
 
-const ROW_COUNT = 500
-const SAMPLE_RUNS = 20
-const WARMUP_RUNS = 6
-const VUE_ESM_URL =
-  'https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.esm-browser.prod.js'
+type VueRuntime = {
+  createApp: (options: { data: () => { rows: Row[] }; template: string }) => {
+    mount: (root: HTMLElement) => void
+    unmount: () => void
+  }
+  reactive: <T extends object>(state: T) => T
+}
 
-let vueModulePromise: Promise<any> | null = null
 let lastRegorApp: { unbind: () => void } | null = null
 let lastVueApp: { unmount: () => void } | null = null
-const regorBenchConfig = (() => {
+
+const getRegorLabel = (): string => 'Regor'
+
+const createRegorBenchConfig = (): RegorConfig => {
   const config = new RegorConfig()
   config.useInterpolation = true
   return config
-})()
-
-const nextFrame = async (): Promise<void> => {
-  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
 }
 
 const makeRows = (count: number, startId = 0): Row[] => {
@@ -54,30 +68,19 @@ const makeRows = (count: number, startId = 0): Row[] => {
   return out
 }
 
-const clearRoot = (root: HTMLElement): void => {
-  root.innerHTML = ''
-}
-
-const loadVueModule = async (): Promise<any> => {
-  if (!vueModulePromise) {
-    vueModulePromise = import(/* @vite-ignore */ VUE_ESM_URL)
-  }
-  return vueModulePromise
-}
-
 const runRegor = async (root: HTMLElement): Promise<BenchResult> => {
   if (lastRegorApp) {
     lastRegorApp.unbind()
     lastRegorApp = null
   }
   clearRoot(root)
-  const rows = makeRows(ROW_COUNT)
+
+  const rows = makeRows(getRowCount())
   await nextFrame()
+
   const t0 = performance.now()
   const app = createRegorApp(
-    {
-      rows: sref(rows),
-    },
+    { rows: sref(rows) },
     {
       element: root,
       template: html`<div>
@@ -87,14 +90,14 @@ const runRegor = async (root: HTMLElement): Promise<BenchResult> => {
         </div>
       </div>`,
     },
-    regorBenchConfig,
+    createRegorBenchConfig(),
   )
   lastRegorApp = app
+
   await nextFrame()
-  const mountMs = performance.now() - t0
   return {
-    framework: 'Regor',
-    mountMs,
+    framework: getRegorLabel(),
+    mountMs: performance.now() - t0,
     rowsFinal: app.context.rows().length,
   }
 }
@@ -105,12 +108,10 @@ const runVue = async (root: HTMLElement): Promise<BenchResult> => {
     lastVueApp = null
   }
   clearRoot(root)
-  const vue = await loadVueModule()
-  const { createApp, reactive } = vue
 
-  const state = reactive({
-    rows: makeRows(ROW_COUNT),
-  })
+  const vue = (await loadVueModule()) as VueRuntime
+  const { createApp, reactive } = vue
+  const state = reactive({ rows: makeRows(getRowCount()) })
 
   await nextFrame()
   const t0 = performance.now()
@@ -128,27 +129,15 @@ const runVue = async (root: HTMLElement): Promise<BenchResult> => {
   })
   app.mount(root)
   lastVueApp = app
-  await nextFrame()
-  const mountMs = performance.now() - t0
 
+  await nextFrame()
   return {
     framework: 'Vue@latest',
-    mountMs,
+    mountMs: performance.now() - t0,
     rowsFinal: state.rows.length,
   }
 }
 
-const formatMs = (n: number): string => n.toFixed(2)
-
-const percentile = (sorted: number[], p: number): number => {
-  if (!sorted.length) return 0
-  const idx = Math.min(
-    sorted.length - 1,
-    Math.max(0, Math.ceil((p / 100) * sorted.length) - 1),
-  )
-  return sorted[idx]
-}
-
 const summarize = (framework: string, samples: BenchResult[]): BenchSummary => {
   const mount = samples.map((x) => x.mountMs).sort((a, b) => a - b)
   return {
@@ -160,17 +149,57 @@ const summarize = (framework: string, samples: BenchResult[]): BenchSummary => {
   }
 }
 
+const winnerByDisplayedValue = (
+  left: number,
+  leftFramework: string,
+  right: number,
+  rightFramework: string,
+): string => {
+  const leftShown = Number(left.toFixed(2))
+  const rightShown = Number(right.toFixed(2))
+  if (leftShown === rightShown) return ''
+  return leftShown < rightShown ? leftFramework : rightFramework
+}
+
 const renderResults = (rows: BenchSummary[]): void => {
   const tbody =
     document.querySelector<HTMLTableSectionElement>('#results tbody')
   if (!tbody) return
+
+  const mountMedianWinner =
+    rows.length === 2
+      ? winnerByDisplayedValue(
+          rows[0].mountMedian,
+          rows[0].framework,
+          rows[1].mountMedian,
+          rows[1].framework,
+        )
+      : ''
+  const mountP90Winner =
+    rows.length === 2
+      ? winnerByDisplayedValue(
+          rows[0].mountP90,
+          rows[0].framework,
+          rows[1].mountP90,
+          rows[1].framework,
+        )
+      : ''
+  const labelWinner =
+    mountMedianWinner !== '' && mountMedianWinner === mountP90Winner
+      ? mountMedianWinner
+      : ''
+
   tbody.innerHTML = ''
   for (const r of rows) {
+    const frameworkClass = labelWinner === r.framework ? 'winner-metric' : ''
+    const mountMedianClass =
+      mountMedianWinner === r.framework ? 'winner-metric' : ''
+    const mountP90Class = mountP90Winner === r.framework ? 'winner-metric' : ''
     const tr = document.createElement('tr')
     tr.innerHTML = `
-      <td>${r.framework}</td>
-      <td>${formatMs(r.mountMedian)}</td>
-      <td>${formatMs(r.mountP90)}</td>
+      <td class="${frameworkClass}">${r.framework}</td>
+      <td class="${mountMedianClass}">${formatMs(r.mountMedian)}</td>
+      <td class="${mountP90Class}">${formatMs(r.mountP90)}</td>
       <td>${r.rowsFinal}</td>
       <td>${r.samples}</td>
     `
@@ -178,145 +207,106 @@ const renderResults = (rows: BenchSummary[]): void => {
   }
 }
 
-const setLog = (msg: string): void => {
-  const log = document.getElementById('log')
-  if (log) log.textContent = msg
-}
-
-const setButtonsDisabled = (disabled: boolean): void => {
-  const ids = ['run', 'run-regor', 'run-vue']
-  for (const id of ids) {
-    const button = document.getElementById(id) as HTMLButtonElement | null
-    if (button) button.disabled = disabled
-  }
-}
-
-const runRegorSamples = async (
-  root: HTMLElement,
-  count: number,
-): Promise<BenchResult[]> => {
-  const out: BenchResult[] = []
-  for (let i = 0; i < count; i++) out.push(await runRegor(root))
-  return out
-}
-
-const runVueSamples = async (
-  root: HTMLElement,
-  count: number,
-): Promise<BenchResult[]> => {
-  const out: BenchResult[] = []
-  for (let i = 0; i < count; i++) out.push(await runVue(root))
-  return out
-}
-
-const runComparativeSamples = async (
-  regorRoot: HTMLElement,
-  vueRoot: HTMLElement,
-  samples: number,
-): Promise<{ regor: BenchResult[]; vue: BenchResult[] }> => {
-  const regor: BenchResult[] = []
-  const vue: BenchResult[] = []
-  for (let i = 0; i < samples; i++) {
-    const regorFirst = (i & 1) === 0
-    if (regorFirst) {
-      regor.push(await runRegor(regorRoot))
-      vue.push(await runVue(vueRoot))
-    } else {
-      vue.push(await runVue(vueRoot))
-      regor.push(await runRegor(regorRoot))
-    }
-    setLog(`Measured sample ${i + 1}/${samples}...`)
+const withButtonsDisabled = async (
+  onFailure: string,
+  action: () => Promise<void>,
+): Promise<void> => {
+  setButtonsDisabled(true)
+  try {
+    await action()
+  } catch (e) {
+    console.error(e)
+    setLog(`${onFailure}: ${(e as Error).message}`)
+  } finally {
+    setButtonsDisabled(false)
   }
-  return { regor, vue }
 }
 
 const run = async (): Promise<void> => {
-  setButtonsDisabled(true)
-  try {
+  await withButtonsDisabled('Benchmark failed', async () => {
+    const rowCount = getRowCount()
+    const warmupRuns = getWarmupRuns()
+    const sampleRuns = getSampleRuns()
     setLog(
-      `Warmup ${WARMUP_RUNS} rounds (unmeasured), then ${SAMPLE_RUNS} measured samples (A/B alternating)...`,
+      `rows=${rowCount}, warmup ${warmupRuns} rounds (unmeasured), then ${sampleRuns} measured samples (A/B alternating)...`,
     )
+
     const regorRoot = document.getElementById('regor-root')
     const vueRoot = document.getElementById('vue-root')
     if (!regorRoot || !vueRoot) {
       setLog('Missing benchmark roots in DOM.')
       return
     }
-    for (let i = 0; i < WARMUP_RUNS; i++) {
-      if ((i & 1) === 0) {
-        await runRegor(regorRoot)
-        await runVue(vueRoot)
-      } else {
-        await runVue(vueRoot)
-        await runRegor(regorRoot)
-      }
-    }
-    const measured = await runComparativeSamples(
-      regorRoot,
-      vueRoot,
-      SAMPLE_RUNS,
+
+    await runAlternating(
+      warmupRuns,
+      () => runRegor(regorRoot),
+      () => runVue(vueRoot),
+    )
+    const measured = await runAlternating(
+      sampleRuns,
+      () => runRegor(regorRoot),
+      () => runVue(vueRoot),
+      (i) => setLog(`Measured sample ${i + 1}/${sampleRuns}...`),
     )
-    const regorSummary = summarize('Regor', measured.regor)
-    const vueSummary = summarize('Vue@latest', measured.vue)
+
+    const regorSummary = summarize(getRegorLabel(), measured.a)
+    const vueSummary = summarize('Vue@latest', measured.b)
     renderResults([regorSummary, vueSummary])
+
     setLog('Done. Showing mount median + p90 only.')
     console.table([regorSummary, vueSummary])
-  } catch (e) {
-    console.error(e)
-    setLog(`Benchmark failed: ${(e as Error).message}`)
-  } finally {
-    setButtonsDisabled(false)
-  }
+  })
 }
 
 const runOnlyRegor = async (): Promise<void> => {
-  setButtonsDisabled(true)
-  try {
+  await withButtonsDisabled('Regor benchmark failed', async () => {
+    const rowCount = getRowCount()
+    const warmupRuns = getWarmupRuns()
+    const sampleRuns = getSampleRuns()
     setLog(
-      `Regor: warmup ${WARMUP_RUNS} rounds (unmeasured), ${SAMPLE_RUNS} measured samples...`,
+      `${getRegorLabel()}: rows=${rowCount}, warmup ${warmupRuns} rounds (unmeasured), ${sampleRuns} measured samples...`,
     )
+
     const regorRoot = document.getElementById('regor-root')
     if (!regorRoot) {
       setLog('Missing Regor root in DOM.')
       return
     }
-    await runRegorSamples(regorRoot, WARMUP_RUNS)
-    const samples = await runRegorSamples(regorRoot, SAMPLE_RUNS)
-    const summary = summarize('Regor', samples)
+
+    await runSamples(warmupRuns, () => runRegor(regorRoot))
+    const samples = await runSamples(sampleRuns, () => runRegor(regorRoot))
+    const summary = summarize(getRegorLabel(), samples)
+
     renderResults([summary])
-    setLog('Regor done. Showing mount median + p90.')
+    setLog(`${getRegorLabel()} done. Showing mount median + p90.`)
     console.table([summary])
-  } catch (e) {
-    console.error(e)
-    setLog(`Regor benchmark failed: ${(e as Error).message}`)
-  } finally {
-    setButtonsDisabled(false)
-  }
+  })
 }
 
 const runOnlyVue = async (): Promise<void> => {
-  setButtonsDisabled(true)
-  try {
+  await withButtonsDisabled('Vue benchmark failed', async () => {
+    const rowCount = getRowCount()
+    const warmupRuns = getWarmupRuns()
+    const sampleRuns = getSampleRuns()
     setLog(
-      `Vue: warmup ${WARMUP_RUNS} rounds (unmeasured), ${SAMPLE_RUNS} measured samples...`,
+      `Vue: rows=${rowCount}, warmup ${warmupRuns} rounds (unmeasured), ${sampleRuns} measured samples...`,
     )
+
     const vueRoot = document.getElementById('vue-root')
     if (!vueRoot) {
       setLog('Missing Vue root in DOM.')
       return
     }
-    await runVueSamples(vueRoot, WARMUP_RUNS)
-    const samples = await runVueSamples(vueRoot, SAMPLE_RUNS)
+
+    await runSamples(warmupRuns, () => runVue(vueRoot))
+    const samples = await runSamples(sampleRuns, () => runVue(vueRoot))
     const summary = summarize('Vue@latest', samples)
+
     renderResults([summary])
     setLog('Vue done. Showing mount median + p90.')
     console.table([summary])
-  } catch (e) {
-    console.error(e)
-    setLog(`Vue benchmark failed: ${(e as Error).message}`)
-  } finally {
-    setButtonsDisabled(false)
-  }
+  })
 }
 
 const wire = (): void => {
@@ -334,7 +324,7 @@ const wire = (): void => {
     .then(() => {
       setButtonsDisabled(false)
       setLog(
-        `Ready. Initial-load benchmark with ${ROW_COUNT} rows, ${WARMUP_RUNS} warmups, ${SAMPLE_RUNS} samples.`,
+        `Ready. Initial-load benchmark with rows=${getRowCount()}, warmups=${getWarmupRuns()}, samples=${getSampleRuns()}.`,
       )
     })
     .catch((e) => {
diff --git a/benchmarks/src/shared.ts b/benchmarks/src/shared.ts
new file mode 100644
index 0000000..7f541e8
--- /dev/null
+++ b/benchmarks/src/shared.ts
@@ -0,0 +1,110 @@
+export const DEFAULT_ROW_COUNT = 500
+export const SAMPLE_RUNS = 20
+export const WARMUP_RUNS = 6
+export const VUE_ESM_URL =
+  'https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.esm-browser.prod.js'
+
+let vueModulePromise: Promise<unknown> | null = null
+
+export const nextFrame = async (): Promise<void> => {
+  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+}
+
+export const clearRoot = (root: HTMLElement): void => {
+  root.innerHTML = ''
+}
+
+export const getRowCount = (): number => {
+  const select = document.getElementById(
+    'row-count',
+  ) as HTMLSelectElement | null
+  const value = Number(select?.value ?? DEFAULT_ROW_COUNT)
+  return Number.isFinite(value) && value > 0 ? value : DEFAULT_ROW_COUNT
+}
+
+const getIntFromSelect = (
+  id: string,
+  min: number,
+  fallback: number,
+): number => {
+  const select = document.getElementById(id) as HTMLSelectElement | null
+  const value = Number(select?.value ?? fallback)
+  return Number.isInteger(value) && value >= min ? value : fallback
+}
+
+export const getWarmupRuns = (): number =>
+  getIntFromSelect('warmup-runs', 0, WARMUP_RUNS)
+
+export const getSampleRuns = (): number =>
+  getIntFromSelect('sample-runs', 1, SAMPLE_RUNS)
+
+export const loadVueModule = async (): Promise<unknown> => {
+  if (!vueModulePromise) {
+    vueModulePromise = import(/* @vite-ignore */ VUE_ESM_URL)
+  }
+  return vueModulePromise
+}
+
+export const formatMs = (n: number): string => n.toFixed(2)
+
+export const percentile = (sorted: number[], p: number): number => {
+  if (!sorted.length) return 0
+  const idx = Math.min(
+    sorted.length - 1,
+    Math.max(0, Math.ceil((p / 100) * sorted.length) - 1),
+  )
+  return sorted[idx]
+}
+
+export const setLog = (msg: string): void => {
+  const log = document.getElementById('log')
+  if (log) log.textContent = msg
+}
+
+export const setButtonsDisabled = (disabled: boolean): void => {
+  const ids = [
+    'run',
+    'run-regor',
+    'run-vue',
+    'row-count',
+    'warmup-runs',
+    'sample-runs',
+  ]
+  for (const id of ids) {
+    const button = document.getElementById(id) as
+      | HTMLButtonElement
+      | HTMLInputElement
+      | null
+    if (button) button.disabled = disabled
+  }
+}
+
+export const runSamples = async <T>(
+  count: number,
+  runOne: () => Promise<T>,
+): Promise<T[]> => {
+  const out: T[] = []
+  for (let i = 0; i < count; i++) out.push(await runOne())
+  return out
+}
+
+export const runAlternating = async <A, B>(
+  runs: number,
+  runA: () => Promise<A>,
+  runB: () => Promise<B>,
+  onEachRun?: (runIndex: number) => void,
+): Promise<{ a: A[]; b: B[] }> => {
+  const a: A[] = []
+  const b: B[] = []
+  for (let i = 0; i < runs; i++) {
+    if ((i & 1) === 0) {
+      a.push(await runA())
+      b.push(await runB())
+    } else {
+      b.push(await runB())
+      a.push(await runA())
+    }
+    onEachRun?.(i)
+  }
+  return { a, b }
+}
diff --git a/docs-site/src/content/docs/api/drainUnbind.md b/docs-site/src/content/docs/api/drainUnbind.md
new file mode 100644
index 0000000..01de715
--- /dev/null
+++ b/docs-site/src/content/docs/api/drainUnbind.md
@@ -0,0 +1,48 @@
+---
+title: drainUnbind
+---
+
+## Overview
+
+`drainUnbind` flushes Regor's pending unbind queue immediately.
+
+Regor defers some unbind work after `removeNode(...)` for better runtime behavior. Use `drainUnbind()` when you need deterministic cleanup timing.
+
+## Usage
+
+```ts
+import { createApp, drainUnbind, html, ref } from 'regor'
+
+const root = document.createElement('div')
+const show = ref(true)
+
+const app = createApp({
+  template: html`<div><span r-if="show">Hello</span></div>`,
+  setup: { show },
+})
+
+app.mount(root)
+show(false) // schedules node removal + deferred unbind
+
+await drainUnbind() // force pending unbind cleanup now
+```
+
+## Signature
+
+```ts
+drainUnbind(): Promise<void>
+```
+
+## Notes
+
+- Safe to call when there is nothing pending.
+- Useful in tests when you need cleanup completed before assertions.
+- Complements `removeNode` and `unbind`; it does not replace app lifecycle (`app.unmount()`).
+
+## See Also
+
+- [removeNode](/api/removeNode)
+- [unbind](/api/unbind)
+- [addUnbinder](/api/addUnbinder)
+
+[Back to the API list](/api/)
diff --git a/docs-site/src/content/docs/api/index.md b/docs-site/src/content/docs/api/index.md
index 4864e9c..e7951db 100644
--- a/docs-site/src/content/docs/api/index.md
+++ b/docs-site/src/content/docs/api/index.md
@@ -58,6 +58,7 @@ Use this page as an index, then open each API page for signature details and exa
 2. [`getBindData`](./getBindData)
 3. [`removeNode`](./removeNode)
 4. [`unbind`](./unbind)
+5. [`drainUnbind`](./drainUnbind)
 
 ## Utilities
 
diff --git a/docs-site/src/content/docs/api/removeNode.md b/docs-site/src/content/docs/api/removeNode.md
index 8c6fc38..83aab36 100644
--- a/docs-site/src/content/docs/api/removeNode.md
+++ b/docs-site/src/content/docs/api/removeNode.md
@@ -42,6 +42,7 @@ removeNode(someElement)
 
 - [addUnbinder](/api/addUnbinder)
 - [unbind](/api/unbind)
+- [drainUnbind](/api/drainUnbind)
 - [getBindData](/api/getBindData)
 
 [Back to the API list](/api/)
diff --git a/docs-site/src/content/docs/api/unbind.md b/docs-site/src/content/docs/api/unbind.md
index c360bc1..00ca269 100644
--- a/docs-site/src/content/docs/api/unbind.md
+++ b/docs-site/src/content/docs/api/unbind.md
@@ -44,6 +44,7 @@ unbind(someElement)
 
 - [addUnbinder](/api/addUnbinder)
 - [removeNode](/api/removeNode)
+- [drainUnbind](/api/drainUnbind)
 - [getBindData](/api/getBindData)
 
 [Back to the API list](/api/)
diff --git a/docs-site/src/content/docs/getting-started.md b/docs-site/src/content/docs/getting-started.md
index 3174702..1d110ea 100644
--- a/docs-site/src/content/docs/getting-started.md
+++ b/docs-site/src/content/docs/getting-started.md
@@ -7,6 +7,9 @@ sidebar:
 Regor binds runtime behavior directly to DOM you already have, or to template
 content you provide at mount time.
 
+This means you can start from static HTML, mount only where needed, and scale
+to multiple independent runtime islands on the same page.
+
 ## Install
 
 ```sh
diff --git a/docs-site/src/content/docs/guide/components.md b/docs-site/src/content/docs/guide/components.md
index 524751e..56d67f3 100644
--- a/docs-site/src/content/docs/guide/components.md
+++ b/docs-site/src/content/docs/guide/components.md
@@ -200,8 +200,8 @@ Unmount cleans child component bindings and observers.
 
 ## See Also
 
-1. [createComponent API](../api/createComponent)
-2. [Directive: :is](../directives/is)
-3. [Directive: :context](../directives/context)
-4. [TypeScript Guide](./typescript)
-5. [Directive: r-for](../directives/r-for)
+1. [createComponent API](/api/createComponent)
+2. [Directive: :is](/directives/is)
+3. [Directive: :context](/directives/context)
+4. [TypeScript Guide](/guide/typescript)
+5. [Directive: r-for](/directives/r-for)
diff --git a/docs-site/src/content/docs/guide/lifecycle-and-cleanup.md b/docs-site/src/content/docs/guide/lifecycle-and-cleanup.md
index 940f4eb..2d46ac3 100644
--- a/docs-site/src/content/docs/guide/lifecycle-and-cleanup.md
+++ b/docs-site/src/content/docs/guide/lifecycle-and-cleanup.md
@@ -114,9 +114,10 @@ Use only when component wants to self-remove its rendered block.
 
 ## See Also
 
-1. [API: createApp](../api/createApp)
-2. [API: useScope](../api/useScope)
-3. [API: onMounted](../api/onMounted)
-4. [API: onUnmounted](../api/onUnmounted)
-5. [API: removeNode / drainUnbind](../api/removeNode)
-6. [API: unbind](../api/unbind)
+1. [API: createApp](/api/createApp)
+2. [API: useScope](/api/useScope)
+3. [API: onMounted](/api/onMounted)
+4. [API: onUnmounted](/api/onUnmounted)
+5. [API: removeNode](/api/removeNode)
+6. [API: drainUnbind](/api/drainUnbind)
+7. [API: unbind](/api/unbind)
diff --git a/docs-site/src/content/docs/guide/mounting.md b/docs-site/src/content/docs/guide/mounting.md
index 2f0c853..c19a84b 100644
--- a/docs-site/src/content/docs/guide/mounting.md
+++ b/docs-site/src/content/docs/guide/mounting.md
@@ -92,6 +92,6 @@ Use in-place mode whenever markup is already present and you only need reactive
 
 ## See Also
 
-1. [Guide: Components](./components)
-2. [Guide: Lifecycle and Cleanup](./lifecycle-and-cleanup)
-3. [Performance Guide](./performance)
+1. [Guide: Components](/guide/components)
+2. [Guide: Lifecycle and Cleanup](/guide/lifecycle-and-cleanup)
+3. [Performance Guide](/guide/performance)
diff --git a/docs-site/src/content/docs/guide/performance.md b/docs-site/src/content/docs/guide/performance.md
index 7f03649..8ce0dfe 100644
--- a/docs-site/src/content/docs/guide/performance.md
+++ b/docs-site/src/content/docs/guide/performance.md
@@ -4,76 +4,161 @@ sidebar:
   order: 80
 ---
 
-This guide focuses on practical, reliable performance work for Regor applications.
+This guide shows how to measure Regor performance with stable, repeatable workflows:
 
-## Performance Priorities
+1. Browser DOM benchmark (real rendering path)
+2. Minidom benchmark (engine-only, no paint/layout noise)
+3. CPU profiling (find real hotspots before changing code)
 
-Real-world cost is mostly driven by:
+## Regor Wins Where It Matters
 
-1. Number of DOM nodes created/updated.
-2. Number of active bindings per node.
-3. Work performed by each binding expression.
-4. List scale and mutation pattern (`r-for` + key strategy).
+In this repo’s benchmark suite, Regor is the update-throughput winner in many real mutation patterns.
 
-Many small costs add up. Always profile the full path, not one isolated helper.
+Highlights:
 
-## Benchmark Correctness Checklist
+1. Regor is consistently strong in mutation-heavy scenarios.
+2. Regor often leads total update cost when interaction drives many list changes.
+3. Regor can outperform even when mount is not the absolute fastest metric.
 
-When comparing Regor with any other framework:
+In the 1000-row snapshot on this page, Regor wins 10 of 11 scenario medians.
 
-1. Same rendered output and same feature set on both sides.
-2. Same timing boundaries for both sides.
-3. Warmup rounds are excluded from measurements.
-4. A/B alternating order is used per sample to reduce bias.
-5. Median and P90 are reported, not single-run results.
+Regor median wins:
 
-If timing boundaries differ, results are not comparable.
+1. `swap_second_last`
+2. `rotate_head_tail`
+3. `splice_middle_replace`
+4. `mutate_stride_fields`
+5. `increment_odd_values_by_5`
+6. `insert_head_32`
+7. `remove_every_5th`
+8. `shuffle_deterministic`
+9. `replace_all_objects_same_keys`
+10. `toggle_class_all_rows`
 
-## Interpreting Results
+Verification paths:
 
-Use this practical UX scale:
+1. `/benchmarks/index.html` for mount + mutation totals
+2. Scenario table in the same page for per-pattern winners
 
-1. Under `100ms`: typically instant.
-2. `100ms` to `300ms`: noticeable, usually acceptable.
-3. Over `300ms`: likely perceived as slow.
+## Latest Benchmark Snapshot (1000 rows)
 
-Absolute user-visible latency matters more than synthetic rank.
+Benchmark settings:
 
-## Large List Guidance (`r-for`)
+1. Row count: `1000`
+2. Warmups: `6`
+3. Samples: `20`
 
-For large datasets:
+### Mount + Mutate Total
 
-1. Prefer windowing, chunking, or pagination.
-2. Keep per-row template/binding footprint minimal.
-3. Use stable keys.
-4. Avoid expensive per-item object construction in template expressions.
-5. Consider domain-specific rendering shortcuts in known hot paths.
+| Framework  | Mount Median | Mount P90 | Mutate Median | Mutate P90 | Total Median | Total P90 |
+| ---------- | -----------: | --------: | ------------: | ---------: | -----------: | --------: |
+| Regor      |     49.40 ms |  60.20 ms |     217.40 ms |  256.40 ms |    270.60 ms | 312.20 ms |
+| Vue@latest |     27.20 ms |  34.70 ms |     325.10 ms |  343.70 ms |    354.10 ms | 371.90 ms |
 
-## Regor-Specific Advantage
+### Scenario Table Snapshot
 
-Regor enables runtime optimization strategies that are hard to apply in rigid pipelines:
+| Scenario                        | Regor Median (ms) | Vue Median (ms) |
+| ------------------------------- | ----------------: | --------------: |
+| `swap_second_last`              |              5.20 |           16.60 |
+| `reverse_rows`                  |             26.00 |           25.90 |
+| `rotate_head_tail`              |             10.30 |           14.20 |
+| `splice_middle_replace`         |              9.90 |           16.60 |
+| `mutate_stride_fields`          |              8.00 |           16.60 |
+| `increment_odd_values_by_5`     |             13.50 |           16.60 |
+| `insert_head_32`                |              8.50 |           16.70 |
+| `remove_every_5th`              |            106.10 |          124.50 |
+| `shuffle_deterministic`         |              4.20 |           28.60 |
+| `replace_all_objects_same_keys` |              8.00 |           30.80 |
+| `toggle_class_all_rows`         |             14.30 |           14.40 |
 
-1. Bind to existing HTML markup in place.
-2. Use directives for most UI, and direct DOM/JS for selected hotspots.
-3. Keep one runtime model instead of splitting between template compiler assumptions and runtime behavior.
+Interpretation:
 
-## Profiling Workflow
+Regor shows strong wins on several real mutation patterns.
 
-Use repeatable tooling:
+## Browser DOM Benchmarks
 
-1. Run browser benchmark for end-user behavior (`yarn perf`).
-2. Run minidom perf suite for runtime isolation (`yarn perf <rows>`).
-3. Run profile capture (`yarn perf:profile`) and inspect top self-time stacks.
-4. Optimize only top hotspots with clear measured deltas.
+Use this when you care about user-visible page performance.
 
-## Optimization Order
+1. Run: `yarn bench:serve`
+2. Open:
+   1. `/benchmarks/index.html` for mount + mutation benchmarks
+   2. `/benchmarks/initial-load.html` for mount-only benchmarks
+3. Use the controls:
+   1. row count dropdown (`500`, `1000`, `2000`, `5000`)
+   2. warmups
+   3. samples
 
-1. Reduce nodes.
-2. Reduce bindings.
-3. Simplify expressions.
-4. Fix one hotspot at a time with before/after measurements.
-5. Protect gains with perf baselines.
+Interpretation:
 
-## When to Stop
+1. `Median` is your primary number.
+2. `P90` reflects tail behavior and jitter.
+3. Compare scenario tables, not only one aggregate total.
 
-If interaction latency is already in acceptable user-perceived range, stop micro-tuning and prioritize product work. Optimize only when the user can feel the difference.
+## Minidom Perf Suite (Regression Gate)
+
+Use this for fast local iteration and CI-like guardrails.
+
+Commands:
+
+1. Run suite: `yarn perf` (default rows: `500`)
+2. Run with rows: `yarn perf 1000`
+3. Record baseline: `yarn perf:record 1000`
+4. Check against baseline: `yarn perf:check 1000`
+
+Notes:
+
+1. Baselines are row-specific (`benchmarks/minidom/perf-baseline.<rows>.json`).
+2. Output includes run metrics and unmount metrics (`UnmMed`, `UnmP90`).
+3. In interactive `run` mode: `Enter` reruns, `q` quits.
+
+Useful environment variables:
+
+1. `PERF_SAMPLES` (default `20`)
+2. `PERF_WARMUPS` (default `5`)
+3. `PERF_MAX_REGRESSION_PCT` (default `5`)
+4. `PERF_FAIL_ON_REGRESSION` (`1` fail, `0` warn)
+
+Example:
+
+```bash
+PERF_SAMPLES=30 PERF_WARMUPS=8 PERF_MAX_REGRESSION_PCT=3 yarn perf:check 1000
+```
+
+## Run Profiler (CPU Hotspot Workflow)
+
+Use this before optimization work. It prevents random tuning and points to real hotspots.
+
+Quick start:
+
+1. `yarn perf:profile` (default rows: `2000`, top lines: `30`)
+2. `yarn perf:profile 2000 40` (custom rows + hotspot line count)
+
+What the command does:
+
+1. Bundles `benchmarks/minidom/perf.ts` to plain Node JS.
+2. Runs Node CPU profiler on that bundle.
+3. Produces:
+   1. `.cpuprofile` file for Chrome DevTools
+   2. `.summary.txt` hotspot summary
+4. Saves artifacts under `benchmarks/minidom/profiles/`.
+
+Profile artifacts:
+
+1. `benchmarks/minidom/profiles/perf-<rows>-<timestamp>.cpuprofile`
+2. `benchmarks/minidom/profiles/perf-<rows>-<timestamp>.summary.txt`
+
+## Recommended Optimization Loop
+
+1. Reproduce with `yarn perf <rows>` and browser benchmark.
+2. Capture profile with `yarn perf:profile <rows>`.
+3. Change one thing only.
+4. Re-run `yarn perf:check <rows>`.
+5. Validate functional correctness with tests.
+6. Re-check browser benchmark to confirm user-visible impact.
+
+## Practical Rules
+
+1. Optimize measured hotspots, not assumptions.
+2. Prefer algorithmic wins over micro-tweaks.
+3. Keep median and p90 both healthy.
+4. Use row counts that match your real product usage.
diff --git a/docs-site/src/content/docs/guide/persisted-state.md b/docs-site/src/content/docs/guide/persisted-state.md
index 9e84c8f..617d631 100644
--- a/docs-site/src/content/docs/guide/persisted-state.md
+++ b/docs-site/src/content/docs/guide/persisted-state.md
@@ -108,6 +108,6 @@ Avoid collisions across islands/features.
 
 ## See Also
 
-1. [API: persist](../api/persist)
-2. [Guide: Mounting](./mounting)
-3. [Guide: Reactivity](./reactivity)
+1. [API: persist](/api/persist)
+2. [Guide: Mounting](/guide/mounting)
+3. [Guide: Reactivity](/guide/reactivity)
diff --git a/docs-site/src/content/docs/guide/reactivity.md b/docs-site/src/content/docs/guide/reactivity.md
index 826e615..72ac4d6 100644
--- a/docs-site/src/content/docs/guide/reactivity.md
+++ b/docs-site/src/content/docs/guide/reactivity.md
@@ -136,8 +136,28 @@ Manual `trigger(ref)` still works while paused.
 1. `unref(x)` unwraps one ref level.
 2. `isRef(x)` checks any ref (`ref` or `sref`).
 3. `isDeepRef(x)` checks whether value was created as deep `ref`.
-4. `entangle(a, b)` creates two-way sync and initializes `b` with `a`.
-5. `persist(ref, key)` syncs ref data with `localStorage`.
+4. `flatten(x)` recursively unwraps refs in objects/arrays/Map/Set into plain data.
+5. `entangle(a, b)` creates two-way sync and initializes `b` with `a`.
+6. `persist(ref, key)` syncs ref data with `localStorage`.
+
+### `flatten` sample
+
+Use `flatten` when you need a plain snapshot for logging, serialization, or transport.
+
+```ts
+const state = ref({
+  user: ref({ name: 'Ada' }),
+  tags: new Set([ref('core')]),
+  meta: new Map([['count', ref(2)]]),
+})
+
+const plain = flatten(state)
+// {
+//   user: { name: 'Ada' },
+//   tags: Set { 'core' },
+//   meta: Map { 'count' => 2 }
+// }
+```
 
 ## Collections and caveats
 
@@ -147,6 +167,6 @@ Manual `trigger(ref)` still works while paused.
 
 ## See Also
 
-1. [API Reference](../api)
-2. [Lifecycle and Cleanup](./lifecycle-and-cleanup)
-3. [Templates and Expressions](./templates)
+1. [API Reference](/api)
+2. [Lifecycle and Cleanup](/guide/lifecycle-and-cleanup)
+3. [Templates and Expressions](/guide/templates)
diff --git a/docs-site/src/content/docs/guide/templates.md b/docs-site/src/content/docs/guide/templates.md
index 8d25b4b..f194da0 100644
--- a/docs-site/src/content/docs/guide/templates.md
+++ b/docs-site/src/content/docs/guide/templates.md
@@ -220,7 +220,7 @@ Use these when docs/snippets must display `{{ ... }}` without binding.
 
 ## See Also
 
-1. [Directives](../directives)
-2. [Reactivity](./reactivity)
-3. [Components](./components)
-4. [r-for](../directives/r-for)
+1. [Directives](/directives)
+2. [Reactivity](/guide/reactivity)
+3. [Components](/guide/components)
+4. [r-for](/directives/r-for)
diff --git a/docs-site/src/content/docs/guide/typescript.md b/docs-site/src/content/docs/guide/typescript.md
index abb18ab..e84a8d5 100644
--- a/docs-site/src/content/docs/guide/typescript.md
+++ b/docs-site/src/content/docs/guide/typescript.md
@@ -105,6 +105,6 @@ You can type `head` in class constructors and use runtime behavior flags intenti
 
 ## See Also
 
-1. [Components](./components)
-2. [createComponent API](../api/createComponent)
-3. [createApp API](../api/createApp)
+1. [Components](/guide/components)
+2. [createComponent API](/api/createComponent)
+3. [createApp API](/api/createApp)
diff --git a/docs-site/src/content/docs/index.mdx b/docs-site/src/content/docs/index.mdx
index 458da3b..51f8be1 100644
--- a/docs-site/src/content/docs/index.mdx
+++ b/docs-site/src/content/docs/index.mdx
@@ -6,8 +6,8 @@ sidebar:
 hero:
   title: "Reactive UI without framework lock-in"
   tagline: |
-    Regor gives you direct DOM control, strong reactivity primitives,
-    and runtime-first flexibility for real applications.
+    Regor gives you direct DOM binding, precise reactivity primitives,
+    and TypeScript-native workflows for real applications.
   image:
     file: ../../assets/regor-logo.svg
   actions:
@@ -31,10 +31,10 @@ Regor is a modern reactive UI library for teams that want **power and control**
 
 It supports:
 
-1. Runtime binding over existing markup.
-2. Fine-grained reactive primitives (`ref`, `sref`, computed, observers).
-3. Component and context models that stay flexible.
-4. Direct JavaScript/DOM escape hatches where performance or integration requires it.
+1. Direct DOM binding over existing markup (no Virtual DOM dependency).
+2. Fine-grained reactive primitives (`ref`, `sref`, `computed`, `observe`, `batch`, `pause`, `resume`, `entangle`).
+3. Component and context models that stay flexible in mixed rendering stacks.
+4. Build-less and CSP-friendly runtime workflows when deployment constraints require them.
 
 <CardGrid stagger>
   <Card title="Runtime-First" icon="rocket">
@@ -42,7 +42,7 @@ It supports:
   </Card>
 
   <Card title="Strong Reactivity Core" icon="random">
-    Use `ref`, `sref`, `computed`, `watchEffect`, observers, and batch updates to model state precisely.
+    Use `ref`, `sref`, `computed`, `watchEffect`, observers, batch updates, and pause/resume controls to model state precisely.
   </Card>
 
   <Card title="Directive Power" icon="list-format">
@@ -62,7 +62,7 @@ It supports:
   </Card>
 
   <Card title="Progressive Enhancement" icon="star">
-    Adopt Regor incrementally in legacy or mixed-stack applications.
+    Adopt Regor incrementally in legacy or mixed-stack applications, including static-first pages with dynamic islands.
   </Card>
 
   <Card title="Library-Friendly" icon="puzzle">
diff --git a/docs-site/src/content/docs/overview.md b/docs-site/src/content/docs/overview.md
index 75ca31f..cbf2249 100644
--- a/docs-site/src/content/docs/overview.md
+++ b/docs-site/src/content/docs/overview.md
@@ -13,6 +13,15 @@ Regor is a reactive UI library designed for engineers who want:
 
 Regor is intentionally practical. It does not force one rigid rendering architecture for every use case.
 
+## Architecture Positioning
+
+Regor is Vue-inspired in directive syntax, but different by architecture.
+
+1. Regor does not rely on a Virtual DOM layer.
+2. Regor can bind existing server-rendered/static markup in place.
+3. Regor supports runtime composition and reentrance across already-mounted regions.
+4. Regor keeps optimization escape hatches close to plain DOM and JavaScript.
+
 ## Why Teams Choose Regor
 
 ### 1. Runtime flexibility without lock-in
@@ -23,6 +32,8 @@ Regor can bind existing markup and progressively enhance real pages. You can ado
 
 You get `ref`, `sref`, `computed`, `watchEffect`, `observe`, and batching primitives. State flows are explicit and composable.
 
+Control APIs like `pause`, `resume`, and `entangle` help you shape update behavior intentionally in complex flows.
+
 ### 3. Directive model with real depth
 
 Regor supports rich directive workflows:
@@ -36,6 +47,10 @@ Regor supports rich directive workflows:
 
 Regor works well when part of your DOM is owned by other systems, or when performance-critical sections need custom handling.
 
+### 5. TypeScript without framework-only indirection
+
+Regor uses plain TypeScript code paths for app and component contexts (`createApp<T>`, `ComponentHead<TProps>`, interfaces/classes). You keep normal TS ergonomics without relying on custom file format compilers.
+
 ## Core Philosophy
 
 Regor’s philosophy is:
@@ -58,6 +73,14 @@ If your app needs:
 
 Regor is a strong fit.
 
+## Regor vs Vue (Practical Lens)
+
+1. Vue is a strong default for framework-owned SPA architecture.
+2. Regor is a strong default for progressive enhancement and static-first plus dynamic-island architectures.
+3. Vue commonly centers build tooling for peak DX/perf in SPA workflows.
+4. Regor keeps build-less and CSP-constrained runtime options first-class.
+5. Both are capable; pick based on rendering ownership and deployment constraints.
+
 ## Practical Tradeoffs
 
 Regor favors flexibility and control. In very binding-dense paths, runtime cost can grow with total DOM + binding volume. This is normal for highly dynamic runtime systems.
diff --git a/package.json b/package.json
index 9f0384b..fd100ab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "regor",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "A modern UI framework for web and desktop applications, inspired by Vue's concepts and powered by simplicity and flexibility.",
   "author": "Ahmed Yasin Koculu",
   "license": "MIT",
diff --git a/src/api/types.ts b/src/api/types.ts
index f47e260..7d3fa8d 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -169,34 +169,38 @@ export type IsLazy = (i: number, d: number) => boolean
 
 export type IsLazyKey = (key: string, d: number) => boolean
 
+export interface DirectiveUpdatePayload {
+  el: HTMLElement
+  expr: string
+  values: unknown[]
+  previousValues?: unknown[]
+  option?: unknown
+  previousOption?: unknown
+  flags?: string[]
+  parseResult: ParseResult
+  dynamicOption?: ParseResult
+}
+
+export interface MountedDirective {
+  update?: (payload: DirectiveUpdatePayload) => void
+  unmount?: Unbinder
+}
+
 export interface Directive {
   isLazy?: IsLazy
   isLazyKey?: IsLazyKey
   collectRefObj?: boolean
 
-  /** if once is enabled, the onChange is never triggered.
-   * The refs in parseResult are still reactive. */
+  /** If once is enabled, updates are not re-triggered after initial mount. */
   once?: boolean
 
-  /** Called on every value change. */
-  onChange?: (
-    el: HTMLElement,
-    values: unknown[],
-    previousValues?: unknown[],
-    option?: unknown,
-    previousOption?: unknown,
-    flags?: string[],
-  ) => void
-
-  /** Called on binding. Returns unbinder.  */
-  onBind?: (
-    el: HTMLElement,
-    parseResult: ParseResult,
-    expr: string,
-    option?: string,
-    dynamicOption?: ParseResult,
-    flags?: string[],
-  ) => Unbinder
+  /**
+   * Called once at bind time.
+   * Returns either:
+   * - unmount function
+   * - mounted object with `update` and/or `unmount`
+   */
+  mount: (payload: DirectiveUpdatePayload) => Unbinder | MountedDirective | void
 }
 
 export interface BindData {
@@ -207,9 +211,9 @@ export interface BindData {
 export type Unbinder = () => void
 
 export interface ParseResult {
-  value: SRef<unknown[]>
+  value: () => unknown[]
   stop: StopObserving
-  subscribe?: (
+  subscribe: (
     observer: ObserveCallback<unknown[]>,
     init?: boolean,
   ) => StopObserving
diff --git a/src/app/ComponentHead.ts b/src/app/ComponentHead.ts
index 926b8f8..96e92c7 100644
--- a/src/app/ComponentHead.ts
+++ b/src/app/ComponentHead.ts
@@ -13,8 +13,9 @@ import { callUnmounted } from '../composition/callUnmounted'
  *
  * Typical usage:
  * ```ts
- * const Card = createComponent({
- *   template: `<article><h3 r-text="title"></h3></article>`,
+ * const Card = createComponent(
+ *  `<article><h3 r-text="title"></h3></article>`,
+ *  {
  *   props: ['title'],
  *   context(head) {
  *     // read parent values
diff --git a/src/app/createComponent.ts b/src/app/createComponent.ts
index fbab18f..8d45c44 100644
--- a/src/app/createComponent.ts
+++ b/src/app/createComponent.ts
@@ -20,10 +20,10 @@ import { toJsonTemplate } from './toJsonTemplate'
  * component instance in the app.
  *
  * @typeParam TContext - Component context type.
- * @param template Component template source:
+ * @param template - Component template source:
  * - inline HTML string
  * - `Template` object (`template`, `element`, `selector`, or `json`)
- * @param options Component options (`context`, `props`, `inheritAttrs`, etc.).
+ * @param options - Component options (`context`, `props`, `inheritAttrs`, etc.).
  * You can also pass `string[]` as shorthand for `props`.
  *
  * @returns Component definition usable in app/component `components`.
diff --git a/src/bind/Binder.ts b/src/bind/Binder.ts
index d150883..d0631e1 100644
--- a/src/bind/Binder.ts
+++ b/src/bind/Binder.ts
@@ -1,4 +1,9 @@
-import type { Directive, ParseResult, StopObserving } from '../api/types'
+import type {
+  Directive,
+  DirectiveUpdatePayload,
+  ParseResult,
+  StopObserving,
+} from '../api/types'
 import { type RegorConfig } from '../app/RegorConfig'
 import { addUnbinder } from '../cleanup/addUnbinder'
 import { removeNode } from '../cleanup/removeNode'
@@ -163,108 +168,151 @@ export class Binder {
   ): void {
     if (el.nodeType !== Node.ELEMENT_NODE || valueExpression == null) return
     if (this.__handleTeleport(config, el, valueExpression)) return
-    const result = this.__parser.__parse(
+
+    const dynamicOption = this.__parseDynamicOption(option, config.once)
+    const result = this.__parseExpression(config, valueExpression)
+
+    const stops = this.__createBindStops(result, dynamicOption)
+    addUnbinder(el, stops.stop)
+
+    const payload = this.__createDirectivePayload(
+      el,
+      valueExpression,
+      result,
+      dynamicOption,
+      option,
+      flags,
+    )
+
+    const mountedUpdate = this.__mountDirective(config, payload, stops)
+    if (!mountedUpdate) return
+
+    const emitChange = this.__createEmitter(
+      payload,
+      result,
+      dynamicOption,
+      option,
+      mountedUpdate,
+    )
+    emitChange()
+    if (!config.once) {
+      stops.result = result.subscribe(emitChange)
+      if (dynamicOption) {
+        stops.dynamic = dynamicOption.subscribe(emitChange)
+      }
+    }
+  }
+
+  __parseDynamicOption(
+    option: string | undefined,
+    once?: boolean,
+  ): ParseResult | undefined {
+    const dynamicOptionExpression = isOptionDynamic(option, this.__dynamic)
+    if (!dynamicOptionExpression) return undefined
+    return this.__parser.__parse(
+      camelize(dynamicOptionExpression),
+      undefined,
+      undefined,
+      undefined,
+      once,
+    )
+  }
+
+  __parseExpression(config: Directive, valueExpression: string): ParseResult {
+    return this.__parser.__parse(
       valueExpression,
       config.isLazy,
       config.isLazyKey,
       config.collectRefObj,
       config.once,
     )
-    const stopObserverList = [] as StopObserving[]
-    const hasOnChange = !!config.onChange
-    const unbinder = (): void => {
-      result.stop()
-      dynamicOption?.stop()
-      for (let i = 0; i < stopObserverList.length; ++i) {
-        stopObserverList[i]()
-      }
-      stopObserverList.length = 0
-    }
-    addUnbinder(el, unbinder)
+  }
 
-    const dynamicOptionExpression = isOptionDynamic(option, this.__dynamic)
-    let dynamicOption: ParseResult | undefined
-    if (dynamicOptionExpression) {
-      dynamicOption = this.__parser.__parse(
-        camelize(dynamicOptionExpression),
-        undefined,
-        undefined,
-        undefined,
-        config.once,
-      )
+  __createBindStops(
+    result: ParseResult,
+    dynamicOption?: ParseResult,
+  ): {
+    result?: StopObserving
+    dynamic?: StopObserving
+    mounted?: StopObserving
+    stop: () => void
+  } {
+    const stops: {
+      result?: StopObserving
+      dynamic?: StopObserving
+      mounted?: StopObserving
+      stop: () => void
+    } = {
+      stop: () => {
+        result.stop()
+        dynamicOption?.stop()
+        stops.result?.()
+        stops.dynamic?.()
+        stops.mounted?.()
+        stops.result = undefined
+        stops.dynamic = undefined
+        stops.mounted = undefined
+      },
     }
-    const dynamicOpt = dynamicOption
-    const hasDynamicOption = dynamicOpt != null
-    let previousValues: any[] = result.value()
-    let previousOption: any = hasDynamicOption
-      ? dynamicOption!.value()[0]
-      : option
+    return stops
+  }
 
-    if (!config.once && hasOnChange) {
-      const stopObserving = (
-        result.subscribe
-          ? result.subscribe(() => {
-              const preValues = previousValues
-              const preOption = previousOption
-              const nextValues = result.value()
-              const nextOption = hasDynamicOption
-                ? dynamicOpt.value()[0]
-                : option
-              previousValues = nextValues
-              previousOption = nextOption
-              config.onChange?.(
-                el,
-                nextValues,
-                preValues,
-                nextOption,
-                preOption,
-                flags,
-              )
-            })
-          : () => {}
-      ) as StopObserving
-      stopObserverList.push(stopObserving)
-      if (dynamicOpt) {
-        const stopObserving = (
-          dynamicOpt.subscribe
-            ? dynamicOpt.subscribe(() => {
-                const preOption = previousOption
-                const nextValues = result.value()
-                const nextOption = dynamicOpt.value()[0]
-                previousValues = nextValues
-                previousOption = nextOption
-                config.onChange?.(
-                  el,
-                  nextValues,
-                  preOption,
-                  nextOption,
-                  preOption,
-                  flags,
-                )
-              })
-            : () => {}
-        ) as StopObserving
-        stopObserverList.push(stopObserving)
-      }
-    }
-    if (config.onBind)
-      stopObserverList.push(
-        config.onBind(
-          el,
-          result,
-          valueExpression,
-          option,
-          dynamicOption,
-          flags,
-        ),
-      )
-    config.onChange?.(
+  __createDirectivePayload(
+    el: HTMLElement,
+    expr: string,
+    result: ParseResult,
+    dynamicOption: ParseResult | undefined,
+    option: string | undefined,
+    flags: string[] | undefined,
+  ): DirectiveUpdatePayload {
+    return {
       el,
-      previousValues,
-      undefined,
-      previousOption,
-      undefined,
+      expr,
+      values: result.value(),
+      previousValues: undefined,
+      option: dynamicOption ? dynamicOption.value()[0] : option,
+      previousOption: undefined,
       flags,
-    )
+      parseResult: result,
+      dynamicOption,
+    }
+  }
+
+  __mountDirective(
+    config: Directive,
+    payload: DirectiveUpdatePayload,
+    stops: { mounted?: StopObserving },
+  ): ((payload: DirectiveUpdatePayload) => void) | undefined {
+    const mounted = config.mount(payload)
+    if (typeof mounted === 'function') {
+      stops.mounted = mounted
+      return undefined
+    }
+    if (mounted?.unmount) {
+      stops.mounted = mounted.unmount
+    }
+    return mounted?.update
+  }
+
+  __createEmitter(
+    payload: DirectiveUpdatePayload,
+    result: ParseResult,
+    dynamicOption: ParseResult | undefined,
+    option: string | undefined,
+    mountedUpdate: (payload: DirectiveUpdatePayload) => void,
+  ): () => void {
+    let previousValues: unknown[] | undefined
+    let previousOption: unknown
+    return () => {
+      const nextValues = result.value()
+      const nextOption = dynamicOption ? dynamicOption.value()[0] : option
+      payload.values = nextValues
+      payload.previousValues = previousValues
+      payload.option = nextOption
+      payload.previousOption = previousOption
+      previousValues = nextValues
+      previousOption = nextOption
+      mountedUpdate(payload)
+    }
   }
 }
diff --git a/src/bind/ComponentBinder.ts b/src/bind/ComponentBinder.ts
index f7eb819..4b4425c 100644
--- a/src/bind/ComponentBinder.ts
+++ b/src/bind/ComponentBinder.ts
@@ -47,9 +47,10 @@ export class ComponentBinder {
   ): string {
     if (this.__registeredComponentSize !== registeredComponents.size) {
       const names = [...registeredComponents.keys()]
-      this.__registeredComponentSelector = names
-        .concat(names.map(hyphenate))
-        .join(',')
+      this.__registeredComponentSelector = [
+        ...names,
+        ...names.map(hyphenate),
+      ].join(',')
       this.__registeredComponentSize = registeredComponents.size
     }
     return this.__registeredComponentSelector
@@ -140,7 +141,10 @@ export class ComponentBinder {
               definedProp,
             ]),
           )
-          for (const name of definedProps.concat(definedProps.map(hyphenate))) {
+          for (const name of [
+            ...definedProps,
+            ...definedProps.map(hyphenate),
+          ]) {
             const value = component.getAttribute(name)
             if (value === null) continue
             props[camelize(name)] = value
diff --git a/src/bind/DirectiveCollector.ts b/src/bind/DirectiveCollector.ts
index e61a5ff..35b03e3 100644
--- a/src/bind/DirectiveCollector.ts
+++ b/src/bind/DirectiveCollector.ts
@@ -101,15 +101,14 @@ export class DirectiveCollector {
     const processNode = (node: HTMLElement): void => {
       const attrs = node.attributes
       if (!attrs || attrs.length === 0) return
-      const attrsAny = attrs as any
       for (let i = 0; i < attrs.length; ++i) {
-        const name = (attrsAny[i] ?? attrs.item(i))?.name
+        const name = attrs.item(i)?.name
         if (!name) continue
         appendDirective(node, name)
       }
     }
     processNode(element)
-    if (!isRecursive) return map
+    if (!isRecursive || !element.firstElementChild) return map
     // IMPORTANT:
     // Keep this on native `querySelectorAll('*')`.
     // Browser engines optimize this traversal heavily and it is faster than
diff --git a/src/bind/DynamicBinder.ts b/src/bind/DynamicBinder.ts
index a59d7fa..4c5dda7 100644
--- a/src/bind/DynamicBinder.ts
+++ b/src/bind/DynamicBinder.ts
@@ -12,6 +12,8 @@ import { isNullOrWhitespace, isObject, isString } from '../common/is-what'
 import { type Binder } from './Binder'
 import { setSwitchOwner } from './switch'
 
+const noopStopObserving: StopObserving = () => {}
+
 const mount = (nodes: ChildNode[], parent: HTMLElement): void => {
   for (const x of nodes) {
     const node = x.cloneNode(true)
@@ -153,20 +155,15 @@ export class DynamicBinder {
       })
     }
 
-    const stopObserverList = [] as StopObserving[]
+    let stopObserver = noopStopObserving
     const unbinder = (): void => {
       parseResult.stop()
-      for (const stopObserver of stopObserverList) {
-        stopObserver()
-      }
-      stopObserverList.length = 0
+      stopObserver()
+      stopObserver = noopStopObserving
     }
     addUnbinder(commentBegin, unbinder)
 
     refresh()
-    const stopObserving = (
-      parseResult.subscribe ? parseResult.subscribe(refresh) : () => {}
-    ) as StopObserving
-    stopObserverList.push(stopObserving)
+    stopObserver = parseResult.subscribe(refresh)
   }
 }
diff --git a/src/bind/ForBinder.ts b/src/bind/ForBinder.ts
index cb7f305..00748a6 100644
--- a/src/bind/ForBinder.ts
+++ b/src/bind/ForBinder.ts
@@ -13,11 +13,14 @@ import { warning, WarningType } from '../log/warnings'
 import { sref } from '../reactivity/sref'
 import { unref } from '../reactivity/unref'
 import { type Binder } from './Binder'
+import { ForBinderFastPath } from './ForBinderFastPath'
+import { ForBinderKeyedDiff } from './ForBinderKeyedDiff'
 import { MountList } from './MountList'
 import { setSwitchOwner } from './switch'
 
 const forMarker = Symbol('r-for')
 const noIndexRef = ((_: number) => -1) as SRef<number>
+const noopStopObserving: StopObserving = () => {}
 
 /**
  * @internal
@@ -117,6 +120,7 @@ export class ForBinder {
     el.removeAttribute(nameKeyBind)
 
     const nodes = getNodes(el)
+    const fastPath = ForBinderFastPath.__create(this.__binder, nodes)
     const parent = el.parentNode as HTMLElement
     if (!parent) return
     const title = `${this.__for} => ${forPath}`
@@ -139,6 +143,7 @@ export class ForBinder {
       : undefined
     const getKey = this.__createKeyGetter(keyExpression)
     const areEqual = (a: any, b: any): boolean => getKey(a) === getKey(b)
+    const isSameValue = (a: unknown, b: unknown): boolean => a === b
     const mountNewValue = (
       i: number,
       newValue: any,
@@ -158,7 +163,8 @@ export class ForBinder {
           insertParent.insertBefore(node, nextSibling)
           childNodes.push(node)
         }
-        bindChildNodes(binder, childNodes)
+        if (fastPath) fastPath.__bind(binder, childNodes)
+        else bindChildNodes(binder, childNodes)
         start = start.nextSibling as ChildNode
         while (start !== nextSibling) {
           mountItem.items.push(start)
@@ -216,6 +222,40 @@ export class ForBinder {
         mountList.__removeAllAfter(0)
         return
       }
+      const iterableValues: unknown[] = []
+      for (const value of this.__getIterable(newValues[0])) {
+        iterableValues.push(value)
+      }
+
+      const patched = ForBinderKeyedDiff.__patch({
+        oldItems: mountList.__list,
+        newValues: iterableValues,
+        getKey,
+        isSameValue,
+        mountNewValue: (index, value, nextSibling) =>
+          mountNewValue(index, value, nextSibling),
+        removeMountItem: (item) => {
+          for (let k = 0; k < item.items.length; ++k) {
+            removeNode(item.items[k])
+          }
+        },
+        endAnchor: commentEnd,
+      })
+      if (patched) {
+        mountList.__list = patched
+        mountList.__valueMap.clear()
+        for (let k = 0; k < patched.length; ++k) {
+          const item = patched[k]
+          item.order = k
+          item.index(k)
+          const key = getKey(item.value)
+          if (key !== undefined) {
+            mountList.__valueMap.set(key, item)
+          }
+        }
+        return
+      }
+
       let i = 0
       let firstRemovalOrInsertionIndex = Number.MAX_SAFE_INTEGER
       // shouldGrowList defines maximum number of inserts
@@ -224,11 +264,15 @@ export class ForBinder {
       const forGrowThreshold = this.__binder.__config.forGrowThreshold
       const shouldGrowList = (): boolean =>
         mountList.__length < initialLength + forGrowThreshold
-      for (const newValue of this.__getIterable(newValues[0])) {
+      for (const newValue of iterableValues) {
         const modify = (): void => {
           if (i < len) {
             const mountItem = mountList.__get(i++)
-            if (areEqual(mountItem.value, newValue)) return
+            if (areEqual(mountItem.value, newValue)) {
+              if (isSameValue(mountItem.value, newValue)) return
+              replace(i - 1, newValue)
+              return
+            }
             const newValueMountPosition = mountList.__lookupValueOrderIfMounted(
               getKey(newValue),
             )
@@ -291,21 +335,16 @@ export class ForBinder {
       updateIndexes(firstRemovalOrInsertionIndex)
     }
 
-    const observeTailChanges = (): void => {
-      stopObserving = (
-        parseResult.subscribe ? parseResult.subscribe(updateDom) : () => {}
-      ) as StopObserving
-    }
-
     const unbinder = (): void => {
       parseResult.stop()
       stopObserving()
+      stopObserving = noopStopObserving
     }
 
     const parseResult = parser.__parse(config.list)
     const value = parseResult.value
 
-    let stopObserving: StopObserving
+    let stopObserving: StopObserving = noopStopObserving
 
     let i = 0
     const mountList = new MountList(getKey)
@@ -313,7 +352,7 @@ export class ForBinder {
       mountList.__push(mountNewValue(i++, item, commentEnd))
     }
     addUnbinder(commentBegin, unbinder)
-    observeTailChanges()
+    stopObserving = parseResult.subscribe(updateDom)
   }
 
   static __forPathRegex =
diff --git a/src/bind/ForBinderFastPath.ts b/src/bind/ForBinderFastPath.ts
new file mode 100644
index 0000000..1672c0f
--- /dev/null
+++ b/src/bind/ForBinderFastPath.ts
@@ -0,0 +1,132 @@
+import { type Directive } from '../api/types'
+import { camelize } from '../common/common'
+import { htmlDirective } from '../directives/html'
+import { type Binder } from './Binder'
+
+type PlannedBinding = {
+  nodeIndex: number
+  attrName: string
+  directive: Directive
+  option?: string
+  flags?: string[]
+}
+
+/**
+ * r-for fast path for non-structural templates:
+ * - no components
+ * - no template nodes
+ * - all directive bindings are allowed except structural loop/branch directives
+ */
+export class ForBinderFastPath {
+  __bindings: PlannedBinding[]
+
+  constructor(bindings: PlannedBinding[]) {
+    this.__bindings = bindings
+  }
+
+  static __create(
+    binder: Binder,
+    nodes: ChildNode[],
+  ): ForBinderFastPath | undefined {
+    const parser = binder.__parser
+    const config = binder.__config
+    const builtInNames = config.__builtInNames
+    const blockedBuiltIns = new Set<string>([
+      builtInNames.for,
+      builtInNames.if,
+      builtInNames.else,
+      builtInNames.elseif,
+      builtInNames.pre,
+    ])
+    const directiveMap = config.__directiveMap
+    const contextComponents = parser.__getComponents()
+    if (
+      Object.keys(contextComponents).length > 0 ||
+      config.__componentsUpperCase.size > 0
+    ) {
+      return undefined
+    }
+    const collector = binder.__directiveCollector
+
+    const bindings: PlannedBinding[] = []
+    let nodeIndex = 0
+
+    const stack: Node[] = []
+    for (let i = nodes.length - 1; i >= 0; --i) {
+      stack.push(nodes[i])
+    }
+    while (stack.length > 0) {
+      const node = stack.pop() as Node
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node as HTMLElement
+        if (el.tagName === 'TEMPLATE') return undefined
+        if (el.tagName.includes('-')) return undefined
+        const tagNameUpper = camelize(el.tagName).toUpperCase()
+        if (
+          config.__componentsUpperCase.has(tagNameUpper) ||
+          contextComponents[tagNameUpper]
+        ) {
+          return undefined
+        }
+        const attrs = el.attributes
+        for (let i = 0; i < attrs.length; ++i) {
+          const attrName = attrs.item(i)?.name
+          if (!attrName) continue
+          if (blockedBuiltIns.has(attrName)) return undefined
+          const { terms, flags } = collector.__parseName(attrName)
+          const [name, option] = terms
+          const directive = directiveMap[attrName] ?? directiveMap[name]
+          if (!directive) continue
+          if (directive === htmlDirective) return undefined
+          bindings.push({
+            nodeIndex,
+            attrName,
+            directive,
+            option,
+            flags,
+          })
+        }
+        ++nodeIndex
+      }
+
+      const children = node.childNodes
+      for (let i = children.length - 1; i >= 0; --i) {
+        stack.push(children[i])
+      }
+    }
+
+    if (bindings.length === 0) return undefined
+    return new ForBinderFastPath(bindings)
+  }
+
+  __bind(binder: Binder, nodes: ChildNode[]): void {
+    const elements: HTMLElement[] = []
+    const stack: Node[] = []
+    for (let i = nodes.length - 1; i >= 0; --i) {
+      stack.push(nodes[i])
+    }
+    while (stack.length > 0) {
+      const node = stack.pop() as Node
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        elements.push(node as HTMLElement)
+      }
+      const children = node.childNodes
+      for (let i = children.length - 1; i >= 0; --i) {
+        stack.push(children[i])
+      }
+    }
+    for (let i = 0; i < this.__bindings.length; ++i) {
+      const binding = this.__bindings[i]
+      const el = elements[binding.nodeIndex]
+      if (!el) continue
+      binder.__bind(
+        binding.directive,
+        el,
+        binding.attrName,
+        false,
+        binding.option,
+        binding.flags,
+      )
+    }
+  }
+}
diff --git a/src/bind/ForBinderKeyedDiff.ts b/src/bind/ForBinderKeyedDiff.ts
new file mode 100644
index 0000000..267b4cb
--- /dev/null
+++ b/src/bind/ForBinderKeyedDiff.ts
@@ -0,0 +1,207 @@
+import { type MountListItem } from '../api/types'
+
+/**
+ * Keyed r-for patcher used by ForBinder.
+ *
+ * What it does:
+ * - Runs a keyed diff between old mounted items and next iterable values.
+ * - Uses head/tail sync for cheap prefix/suffix matches.
+ * - Builds key `->` newIndex map for middle section lookup.
+ * - Builds newIndexToOldIndex map and applies LIS to minimize DOM moves.
+ * - Reuses/moves existing mounted blocks when safe.
+ * - Mounts only truly new items and removes only missing items.
+ *
+ * Safety expectations:
+ * - Keys must be defined and unique for full keyed mode.
+ * - If keys are unusable (undefined / duplicates), returns `undefined` so
+ *   caller can fallback to legacy non-keyed behavior.
+ * - Reuse requires both key match and value identity match; same key with
+ *   different value identity is remounted to keep bindings/reactivity correct.
+ */
+type PatchOptions = {
+  oldItems: MountListItem[]
+  newValues: unknown[]
+  getKey: (value: unknown) => unknown
+  isSameValue: (a: unknown, b: unknown) => boolean
+  mountNewValue: (
+    index: number,
+    value: unknown,
+    nextSibling: Node,
+  ) => MountListItem
+  removeMountItem: (item: MountListItem) => void
+  endAnchor: Node
+}
+
+const moveMountItemBefore = (item: MountListItem, anchor: Node): void => {
+  const parent = anchor.parentNode as Node | null
+  if (!parent) return
+  for (let i = 0; i < item.items.length; ++i) {
+    parent.insertBefore(item.items[i], anchor)
+  }
+}
+
+const getSequence = (arr: number[]): number[] => {
+  const len = arr.length
+  const p = arr.slice()
+  const result: number[] = []
+  let u: number
+  let v: number
+  let c: number
+
+  for (let i = 0; i < len; ++i) {
+    const value = arr[i]
+    if (value === 0) continue
+    const j = result[result.length - 1]
+    if (j === undefined || arr[j] < value) {
+      p[i] = j ?? -1
+      result.push(i)
+      continue
+    }
+    u = 0
+    v = result.length - 1
+    while (u < v) {
+      c = (u + v) >> 1
+      if (arr[result[c]] < value) u = c + 1
+      else v = c
+    }
+    if (value < arr[result[u]]) {
+      if (u > 0) p[i] = result[u - 1]
+      result[u] = i
+    }
+  }
+
+  u = result.length
+  v = result[u - 1] ?? -1
+  while (u-- > 0) {
+    result[u] = v
+    v = p[v]
+  }
+  return result
+}
+
+/**
+ * @internal
+ */
+export class ForBinderKeyedDiff {
+  /**
+   * Applies keyed patch and returns the next ordered mount list.
+   * Returns `undefined` when keyed mode is not safe for this update.
+   */
+  static __patch(options: PatchOptions): MountListItem[] | undefined {
+    const {
+      oldItems,
+      newValues,
+      getKey,
+      isSameValue,
+      mountNewValue,
+      removeMountItem,
+      endAnchor,
+    } = options
+    const oldLen = oldItems.length
+    const newLen = newValues.length
+
+    const newKeys = new Array<unknown>(newLen)
+    const keySeen = new Set<unknown>()
+    for (let i = 0; i < newLen; ++i) {
+      const key = getKey(newValues[i])
+      if (key === undefined || keySeen.has(key)) return undefined
+      keySeen.add(key)
+      newKeys[i] = key
+    }
+
+    const newMountItems = new Array<MountListItem>(newLen)
+    let i = 0
+    let e1 = oldLen - 1
+    let e2 = newLen - 1
+
+    while (i <= e1 && i <= e2) {
+      const oldItem = oldItems[i]
+      if (getKey(oldItem.value) !== newKeys[i]) break
+      if (!isSameValue(oldItem.value, newValues[i])) break
+      oldItem.value = newValues[i]
+      newMountItems[i] = oldItem
+      ++i
+    }
+
+    while (i <= e1 && i <= e2) {
+      const oldItem = oldItems[e1]
+      if (getKey(oldItem.value) !== newKeys[e2]) break
+      if (!isSameValue(oldItem.value, newValues[e2])) break
+      oldItem.value = newValues[e2]
+      newMountItems[e2] = oldItem
+      --e1
+      --e2
+    }
+
+    if (i > e1) {
+      for (let k = e2; k >= i; --k) {
+        const anchor =
+          k + 1 < newLen ? newMountItems[k + 1].items[0] : endAnchor
+        newMountItems[k] = mountNewValue(k, newValues[k], anchor)
+      }
+      return newMountItems
+    }
+
+    if (i > e2) {
+      for (let k = i; k <= e1; ++k) removeMountItem(oldItems[k])
+      return newMountItems
+    }
+
+    const s1 = i
+    const s2 = i
+    const toBePatched = e2 - s2 + 1
+    const newIndexToOldIndexMap = new Array<number>(toBePatched).fill(0)
+    const keyToNewIndexMap = new Map<unknown, number>()
+    for (let k = s2; k <= e2; ++k) {
+      keyToNewIndexMap.set(newKeys[k], k)
+    }
+
+    let moved = false
+    let maxNewIndexSoFar = 0
+    for (let k = s1; k <= e1; ++k) {
+      const oldItem = oldItems[k]
+      const newIndex = keyToNewIndexMap.get(getKey(oldItem.value))
+      if (newIndex === undefined) {
+        removeMountItem(oldItem)
+        continue
+      }
+      if (!isSameValue(oldItem.value, newValues[newIndex])) {
+        removeMountItem(oldItem)
+        continue
+      }
+      oldItem.value = newValues[newIndex]
+      newMountItems[newIndex] = oldItem
+      newIndexToOldIndexMap[newIndex - s2] = k + 1
+      if (newIndex >= maxNewIndexSoFar) maxNewIndexSoFar = newIndex
+      else moved = true
+    }
+
+    const increasingNewIndexSequence = moved
+      ? getSequence(newIndexToOldIndexMap)
+      : []
+    let seqIdx = increasingNewIndexSequence.length - 1
+
+    for (let k = toBePatched - 1; k >= 0; --k) {
+      const newIndex = s2 + k
+      const anchor =
+        newIndex + 1 < newLen ? newMountItems[newIndex + 1].items[0] : endAnchor
+      if (newIndexToOldIndexMap[k] === 0) {
+        newMountItems[newIndex] = mountNewValue(
+          newIndex,
+          newValues[newIndex],
+          anchor,
+        )
+        continue
+      }
+      const item = newMountItems[newIndex]
+      if (!moved) continue
+      if (seqIdx >= 0 && increasingNewIndexSequence[seqIdx] === k) {
+        --seqIdx
+      } else if (item) {
+        moveMountItemBefore(item, anchor)
+      }
+    }
+
+    return newMountItems
+  }
+}
diff --git a/src/bind/IfBinder.ts b/src/bind/IfBinder.ts
index 87591b9..cf37887 100644
--- a/src/bind/IfBinder.ts
+++ b/src/bind/IfBinder.ts
@@ -18,6 +18,7 @@ interface CollectedElses {
   isTrue: () => boolean
   isMounted: boolean
 }
+const noopStopObserving: StopObserving = () => {}
 const mount = (
   nodes: ChildNode[],
   binder: Binder,
@@ -182,20 +183,15 @@ export class IfBinder {
       const value = parseResult.value
       const remainingElses = this.__collectElses(nextElement, refresh)
 
-      const stopObserverList = [] as StopObserving[]
+      let stopObserver = noopStopObserving
       const unbinder = (): void => {
         parseResult.stop()
-        for (const stopObserver of stopObserverList) {
-          stopObserver()
-        }
-        stopObserverList.length = 0
+        stopObserver()
+        stopObserver = noopStopObserving
       }
       addUnbinder(commentBegin, unbinder)
 
-      const stopObserving = (
-        parseResult.subscribe ? parseResult.subscribe(refresh) : () => {}
-      ) as StopObserving
-      stopObserverList.push(stopObserving)
+      stopObserver = parseResult.subscribe(refresh)
 
       return [
         {
@@ -208,7 +204,8 @@ export class IfBinder {
           isTrue: () => !!value()[0],
           isMounted: false,
         },
-      ].concat(remainingElses)
+        ...remainingElses,
+      ]
     }
   }
 
@@ -258,20 +255,15 @@ export class IfBinder {
 
     const collectedElses = this.__collectElses(nextElement, refresh)
 
-    const stopObserverList = [] as StopObserving[]
+    let stopObserver = noopStopObserving
     const unbinder = (): void => {
       parseResult.stop()
-      for (const stopObserver of stopObserverList) {
-        stopObserver()
-      }
-      stopObserverList.length = 0
+      stopObserver()
+      stopObserver = noopStopObserving
     }
     addUnbinder(commentBegin, unbinder)
 
     refresh()
-    const stopObserving = (
-      parseResult.subscribe ? parseResult.subscribe(refresh) : () => {}
-    ) as StopObserving
-    stopObserverList.push(stopObserving)
+    stopObserver = parseResult.subscribe(refresh)
   }
 }
diff --git a/src/cleanup/unbind.ts b/src/cleanup/unbind.ts
index 26f6c24..06613f5 100644
--- a/src/cleanup/unbind.ts
+++ b/src/cleanup/unbind.ts
@@ -2,8 +2,8 @@ import { bindDataSymbol } from './bindDataSymbol'
 
 export const unbind = (node: Node): void => {
   const stack: Node[] = [node]
-  while (stack.length > 0) {
-    const currentNode = stack.pop() as Node
+  for (let i = 0; i < stack.length; ++i) {
+    const currentNode = stack[i]
     unbindSingle(currentNode)
     for (
       let child = currentNode.lastChild;
diff --git a/src/common/common.ts b/src/common/common.ts
index 8dbd0db..5091bff 100644
--- a/src/common/common.ts
+++ b/src/common/common.ts
@@ -8,11 +8,17 @@ import { removeNode } from '../cleanup/removeNode'
  * @internal
  */
 export const getNodes = (el: HTMLElement): ChildNode[] => {
-  const childNodes = isTemplate(el) ? el.content.childNodes : [el as ChildNode]
-  return Array.from(childNodes).filter((x) => {
-    const tagName = (x as Element)?.tagName
-    return tagName !== 'SCRIPT' && tagName !== 'STYLE'
-  })
+  const source = isTemplate(el) ? el.content.childNodes : [el as ChildNode]
+  const result: ChildNode[] = []
+  for (let i = 0; i < source.length; ++i) {
+    const node = source[i]
+    if (node.nodeType === 1) {
+      const tagName = (node as Element | undefined)?.tagName
+      if (tagName === 'SCRIPT' || tagName === 'STYLE') continue
+    }
+    result.push(node)
+  }
+  return result
 }
 
 /**
diff --git a/src/directives/attr.ts b/src/directives/attr.ts
index 45811dd..dfaab44 100644
--- a/src/directives/attr.ts
+++ b/src/directives/attr.ts
@@ -46,48 +46,61 @@ function includeBooleanAttr(value: unknown): boolean {
 /**
  * @internal
  */
-export const attrDirective: Directive = {
-  onChange: (
-    el: HTMLElement,
-    values: any[],
-    previousValues?: any[],
-    option?: any,
-    previousOption?: any,
-    flags?: string[],
-  ) => {
-    if (option) {
-      if (flags && flags.includes('camel')) option = camelize(option)
-      patchAttribute(el, option, values[0], previousOption)
-      return
-    }
-    // supports
-    // k,v,k,v
-    // [k,v],[k,v]...
-    // {k,v},{k,v}...
-    const len = values.length
-    for (let i = 0; i < len; ++i) {
-      const next = values[i]
-      if (isArray(next)) {
-        const previousKey = previousValues?.[i]?.[0]
-        const key = next[0]
-        const value = next[1]
-        patchAttribute(el, key, value, previousKey)
-      } else if (isObject(next)) {
-        for (const item of Object.entries(next)) {
-          const key = item[0]
-          const value = item[1]
-          const p = previousValues?.[i]
-          const previousKey = p && key in p ? key : undefined
-          patchAttribute(el, key, value, previousKey)
-        }
-      } else {
-        const previousKey = previousValues?.[i]
-        const key = values[i++]
-        const value = values[i]
+const updateAttr = (
+  el: HTMLElement,
+  values: any[],
+  previousValues?: any[],
+  option?: any,
+  previousOption?: any,
+  flags?: string[],
+): void => {
+  if (option) {
+    if (flags && flags.includes('camel')) option = camelize(option as string)
+    patchAttribute(el, option as string, values[0], previousOption as string)
+    return
+  }
+  // supports
+  // k,v,k,v
+  // [k,v],[k,v]...
+  // {k,v},{k,v}...
+  const len = values.length
+  for (let i = 0; i < len; ++i) {
+    const next = values[i]
+    if (isArray(next)) {
+      const previousKey = previousValues?.[i]?.[0]
+      const key = next[0]
+      const value = next[1]
+      patchAttribute(el, key, value, previousKey)
+    } else if (isObject(next)) {
+      for (const item of Object.entries(next)) {
+        const key = item[0]
+        const value = item[1]
+        const p = previousValues?.[i]
+        const previousKey = p && key in p ? key : undefined
         patchAttribute(el, key, value, previousKey)
       }
+    } else {
+      const previousKey = previousValues?.[i]
+      const key = values[i++]
+      const value = values[i]
+      patchAttribute(el, key, value, previousKey)
     }
-  },
+  }
+}
+
+export const attrDirective: Directive = {
+  mount: () => ({
+    update: ({ el, values, previousValues, option, previousOption, flags }) => {
+      updateAttr(
+        el,
+        values as any[],
+        previousValues as any[] | undefined,
+        option,
+        previousOption,
+        flags,
+      )
+    },
+  }),
 }
 
 const patchAttribute = (
diff --git a/src/directives/class.ts b/src/directives/class.ts
index da128b5..fd2b949 100644
--- a/src/directives/class.ts
+++ b/src/directives/class.ts
@@ -4,26 +4,36 @@ import { isArray, isString } from '../common/is-what'
 /**
  * @internal
  */
-export const classDirective: Directive = {
-  onChange: (el: HTMLElement, values: any[], previousValues?: any[]) => {
-    // supports
-    // s1,s2,s3,s4
-    // [s1,s2],[s3,s4]...
-    // {k:v,...},{k:v,...}...
-    const len = values.length
-    for (let i = 0; i < len; ++i) {
-      const next = values[i]
-      const previous = previousValues?.[i]
-      if (isArray(next)) {
-        const len2 = next.length
-        for (let j = 0; j < len2; ++j) {
-          patchClass(el, next[j], previous?.[j])
-        }
-      } else {
-        patchClass(el, next, previous)
+const updateClass = (
+  el: HTMLElement,
+  values: any[],
+  previousValues?: any[],
+): void => {
+  // supports
+  // s1,s2,s3,s4
+  // [s1,s2],[s3,s4]...
+  // {k:v,...},{k:v,...}...
+  const len = values.length
+  for (let i = 0; i < len; ++i) {
+    const next = values[i]
+    const previous = previousValues?.[i]
+    if (isArray(next)) {
+      const len2 = next.length
+      for (let j = 0; j < len2; ++j) {
+        patchClass(el, next[j], previous?.[j])
       }
+    } else {
+      patchClass(el, next, previous)
     }
-  },
+  }
+}
+
+export const classDirective: Directive = {
+  mount: () => ({
+    update: ({ el, values, previousValues }) => {
+      updateClass(el, values as any[], previousValues as any[] | undefined)
+    },
+  }),
 }
 
 type Class = string | Record<string, string | string[]> | null
diff --git a/src/directives/context.ts b/src/directives/context.ts
index 8c197a8..8b2c824 100644
--- a/src/directives/context.ts
+++ b/src/directives/context.ts
@@ -1,6 +1,5 @@
-import { type Directive, type ParseResult, type Unbinder } from '../api/types'
+import { type Directive } from '../api/types'
 import { isObject } from '../common/is-what'
-import { observe } from '../observer/observe'
 import { isRef } from '../reactivity/isRef'
 
 /**
@@ -8,30 +7,22 @@ import { isRef } from '../reactivity/isRef'
  */
 export const contextDirective: Directive = {
   collectRefObj: true,
-  onBind: (_: HTMLElement, parseResult: ParseResult): Unbinder => {
-    const stopObserving = observe(
-      parseResult.value,
-      () => {
-        const value = parseResult.value()
-        const ctx = parseResult.context
-        const obj = value[0]
-        if (!isObject(obj)) {
-          return
+  mount: ({ parseResult }) => ({
+    update: ({ values }) => {
+      const ctx = parseResult.context
+      const obj = values[0]
+      if (!isObject(obj)) return
+      for (const item of Object.entries(obj)) {
+        const key = item[0]
+        const nextValue = item[1]
+        const ctxKey = ctx[key]
+        if (ctxKey === nextValue) continue
+        if (isRef(ctxKey)) {
+          ctxKey(nextValue)
+        } else {
+          ctx[key] = nextValue
         }
-        for (const item of Object.entries(obj)) {
-          const key = item[0]
-          const value = item[1]
-          const ctxKey = ctx[key]
-          if (ctxKey === value) continue
-          if (isRef(ctxKey)) {
-            ctxKey(value)
-          } else {
-            ctx[key] = value
-          }
-        }
-      },
-      true,
-    )
-    return stopObserving
-  },
+      }
+    },
+  }),
 }
diff --git a/src/directives/html.ts b/src/directives/html.ts
index 4a7cd72..eb8f18d 100644
--- a/src/directives/html.ts
+++ b/src/directives/html.ts
@@ -4,17 +4,23 @@ import { isFunction } from '../common/is-what'
 /**
  * @internal
  */
-export const htmlDirective: Directive = {
-  onChange: (el: HTMLElement, values: any[]) => {
-    /*
-    trusted security policy with sanitizer
-    sample: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for
+const updateHtml = (el: HTMLElement, values: any[]): void => {
+  /*
+  trusted security policy with sanitizer
+  sample: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for
+
+  enable CSP: require-trusted-types-for:
+  <meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script';">
+   */
+  const [value, replacer] = values
+  if (isFunction(replacer)) replacer(el, value)
+  else el.innerHTML = value?.toString()
+}
 
-    enable CSP: require-trusted-types-for:
-    <meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script';">
-     */
-    const [value, replacer] = values
-    if (isFunction(replacer)) replacer(el, value)
-    else el.innerHTML = value?.toString()
-  },
+export const htmlDirective: Directive = {
+  mount: () => ({
+    update: ({ el, values }) => {
+      updateHtml(el, values as any[])
+    },
+  }),
 }
diff --git a/src/directives/model.ts b/src/directives/model.ts
index 7752fb5..c456a5d 100644
--- a/src/directives/model.ts
+++ b/src/directives/model.ts
@@ -2,7 +2,6 @@ import {
   type AnyRef,
   type Directive,
   type ParseResult,
-  type SRef,
   type Unbinder,
 } from '../api/types'
 import { isArray, isFunction, isSet, isString } from '../common/is-what'
@@ -17,19 +16,12 @@ import { trigger } from '../reactivity/trigger'
  * @internal
  */
 export const modelDirective: Directive = {
-  onChange: (el: HTMLElement, values: any[]) => {
-    updateDomElementValue(el, values[0])
-  },
-  onBind: (
-    el: HTMLElement,
-    parseResult: ParseResult,
-    _expr: string,
-    _option?: string,
-    _dynamicOption?: ParseResult,
-    flags?: string[],
-  ): Unbinder => {
-    return attachDOMChangeListener(el, parseResult, flags)
-  },
+  mount: ({ el, parseResult, flags }) => ({
+    update: ({ values }) => {
+      updateDomElementValue(el, values[0])
+    },
+    unmount: attachDOMChangeListener(el, parseResult, flags),
+  }),
 }
 
 const updateDomElementValue = (el: HTMLElement, value: any): void => {
@@ -172,7 +164,7 @@ const handleInputAndTextArea = (
   el: HTMLInputElement | HTMLTextAreaElement,
   flags: ModelFlags,
   getModelRef: () => AnyRef | undefined,
-  parsedValue: SRef<unknown[]>,
+  parsedValue: () => unknown[],
 ): Unbinder => {
   const isLazy = flags.lazy
   const eventType = isLazy ? 'change' : 'input'
@@ -343,7 +335,7 @@ const handleRadio = (
 const handleSelect = (
   el: HTMLSelectElement,
   getModelRef: () => AnyRef | undefined,
-  parsedValue: SRef<unknown[]>,
+  parsedValue: () => unknown[],
 ): Unbinder => {
   const eventType = 'change'
   const unbinder = (): void => {
diff --git a/src/directives/on.ts b/src/directives/on.ts
index 0b9fce6..d73c6df 100644
--- a/src/directives/on.ts
+++ b/src/directives/on.ts
@@ -37,67 +37,76 @@ const getFlags = (flags: string): EventFlags | undefined => {
 /**
  * @internal
  */
+const bindOn = (
+  el: HTMLElement,
+  parseResult: ParseResult,
+  option?: string,
+  dynamicOption?: ParseResult,
+  flags?: string[],
+): Unbinder => {
+  if (dynamicOption) {
+    const values = parseResult.value()
+    const option = unref(dynamicOption.value()[0])
+    if (!isString(option)) return () => {}
+    return attachEventListener(
+      el,
+      camelize(option),
+      () => parseResult.value()[0],
+      flags?.join(',') ?? values[1],
+    )
+  } else if (option) {
+    const values = parseResult.value()
+    return attachEventListener(
+      el,
+      camelize(option),
+      () => parseResult.value()[0],
+      flags?.join(',') ?? values[1],
+    )
+  }
+  // object syntax
+  // {k,v,f,...},{k,v,f,...},...
+  const unbinders: Unbinder[] = []
+  const unbinder = (): void => {
+    unbinders.forEach((x) => x())
+  }
+  const values = parseResult.value()
+  const len = values.length
+  for (let i = 0; i < len; ++i) {
+    let next = values[i]
+    if (isFunction(next)) next = next()
+    if (isObject(next)) {
+      for (const item of Object.entries(next)) {
+        const eventType = item[0]
+        const method = (): any => {
+          let obj = parseResult.value()[i] as any
+          if (isFunction(obj)) obj = obj()
+          obj = obj[eventType]
+          if (isFunction(obj)) obj = obj()
+          return obj
+        }
+        const flags = (next as any)[eventType + '_flags']
+        unbinders.push(attachEventListener(el, eventType, method, flags))
+      }
+    } else {
+      warning(WarningType.BindingRequiresObjectExpressions, 'r-on', el)
+    }
+  }
+  return unbinder
+}
+
 export const onDirective: Directive = {
   isLazy: (i: number, d: number) => d === -1 && i % 2 === 0,
   isLazyKey: (key: string, d: number) => d === 0 && !key.endsWith('_flags'),
   once: false,
   collectRefObj: true,
-  onBind: (
-    el: HTMLElement,
-    parseResult: ParseResult,
-    _expr: string,
-    option?: string,
-    dynamicOption?: ParseResult,
-    flags?: string[],
-  ): Unbinder => {
-    if (dynamicOption) {
-      const values = parseResult.value()
-      const option = unref(dynamicOption.value()[0])
-      if (!isString(option)) return () => {}
-      return attachEventListener(
-        el,
-        camelize(option),
-        () => parseResult.value()[0],
-        flags?.join(',') ?? values[1],
-      )
-    } else if (option) {
-      const values = parseResult.value()
-      return attachEventListener(
-        el,
-        camelize(option),
-        () => parseResult.value()[0],
-        flags?.join(',') ?? values[1],
-      )
-    }
-    // object syntax
-    // {k,v,f,...},{k,v,f,...},...
-    const unbinders: Unbinder[] = []
-    const unbinder = (): void => {
-      unbinders.forEach((x) => x())
-    }
-    const values = parseResult.value()
-    const len = values.length
-    for (let i = 0; i < len; ++i) {
-      let next = values[i]
-      if (isFunction(next)) next = next()
-      if (isObject(next)) {
-        for (const item of Object.entries(next)) {
-          const eventType = item[0]
-          const method = (): any => {
-            let obj = parseResult.value()[i] as any
-            if (isFunction(obj)) obj = obj()
-            obj = obj[eventType]
-            if (isFunction(obj)) obj = obj()
-            return obj
-          }
-          const flags = (next as any)[eventType + '_flags']
-          unbinders.push(attachEventListener(el, eventType, method, flags))
-        }
-      } else {
-        warning(WarningType.BindingRequiresObjectExpressions, 'r-on', el)
-      }
-    }
-    return unbinder
+  mount: ({ el, parseResult, option, dynamicOption, flags }) => {
+    return bindOn(
+      el,
+      parseResult,
+      option as string | undefined,
+      dynamicOption,
+      flags,
+    )
   },
 }
 
@@ -111,7 +120,7 @@ const getShouldExecuteEvent = (
     eventType.startsWith('keypress')
   ) {
     flags ??= ''
-    const parts = eventType.split('.').concat(flags.split(','))
+    const parts = [...eventType.split('.'), ...flags.split(',')]
     eventType = parts[0]
     const keyType = parts[1]
     const isCtrl = parts.includes('ctrl')
diff --git a/src/directives/prop.ts b/src/directives/prop.ts
index 1b481c0..a120bde 100644
--- a/src/directives/prop.ts
+++ b/src/directives/prop.ts
@@ -7,44 +7,48 @@ import { warning, WarningType } from '../log/warnings'
 /**
  * @internal
  */
-export const propDirective: Directive = {
-  onChange: (
-    el: HTMLElement,
-    values: any[],
-    _previousValues?: any[],
-    option?: any,
-    _previousOption?: any,
-    flags?: string[],
-  ) => {
-    if (option) {
-      if (flags && flags.includes('camel')) option = camelize(option)
-      patchProp(el, option, values[0])
-      return
-    }
-    // supports
-    // k,v,k,v
-    // [k,v],[k,v]...
-    // {k,v},{k,v}...
-    const len = values.length
-    for (let i = 0; i < len; ++i) {
-      const next = values[i]
-      if (isArray(next)) {
-        const key = next[0]
-        const value = next[1]
-        patchProp(el, key, value)
-      } else if (isObject(next)) {
-        for (const item of Object.entries(next)) {
-          const key = item[0]
-          const value = item[1]
-          patchProp(el, key, value)
-        }
-      } else {
-        const key = values[i++]
-        const value = values[i]
+const updatePropBinding = (
+  el: HTMLElement,
+  values: any[],
+  option?: any,
+  flags?: string[],
+): void => {
+  if (option) {
+    if (flags && flags.includes('camel')) option = camelize(option as string)
+    patchProp(el, option as string, values[0])
+    return
+  }
+  // supports
+  // k,v,k,v
+  // [k,v],[k,v]...
+  // {k,v},{k,v}...
+  const len = values.length
+  for (let i = 0; i < len; ++i) {
+    const next = values[i]
+    if (isArray(next)) {
+      const key = next[0]
+      const value = next[1]
+      patchProp(el, key, value)
+    } else if (isObject(next)) {
+      for (const item of Object.entries(next)) {
+        const key = item[0]
+        const value = item[1]
         patchProp(el, key, value)
       }
+    } else {
+      const key = values[i++]
+      const value = values[i]
+      patchProp(el, key, value)
     }
-  },
+  }
+}
+
+export const propDirective: Directive = {
+  mount: () => ({
+    update: ({ el, values, option, flags }) => {
+      updatePropBinding(el, values as any[], option, flags)
+    },
+  }),
 }
 // The following property patch logic is copied from vuejs/core.
 // using the license: The MIT License (MIT)
diff --git a/src/directives/ref.ts b/src/directives/ref.ts
index 3ac7872..e50a65f 100644
--- a/src/directives/ref.ts
+++ b/src/directives/ref.ts
@@ -1,4 +1,4 @@
-import { type Directive, type ParseResult, type Unbinder } from '../api/types'
+import { type Directive, type Unbinder } from '../api/types'
 import { isArray } from '../common/is-what'
 
 /**
@@ -6,7 +6,8 @@ import { isArray } from '../common/is-what'
  */
 export const refDirective: Directive = {
   once: true,
-  onBind: (el: HTMLElement, result: ParseResult, expr: string): Unbinder => {
+  mount: ({ el, parseResult, expr }): Unbinder => {
+    const result = parseResult
     const value = result.value()[0]
     const isAnArray = isArray(value)
     const sref = result.refs[0]
diff --git a/src/directives/show.ts b/src/directives/show.ts
index 1d30c78..fab5173 100644
--- a/src/directives/show.ts
+++ b/src/directives/show.ts
@@ -5,15 +5,21 @@ import { isUndefined } from '../common/is-what'
 /**
  * @internal
  */
+const updateShow = (el: HTMLElement, values: any[]): void => {
+  const data = getBindData(el).data
+  let originalDisplay = data._ord as string
+  if (isUndefined(originalDisplay)) {
+    originalDisplay = data._ord = el.style.display
+  }
+  const isVisible = !!values[0]
+  if (isVisible) el.style.display = originalDisplay
+  else el.style.display = 'none'
+}
+
 export const showDirective: Directive = {
-  onChange: (el: HTMLElement, values: any[]) => {
-    const data = getBindData(el).data
-    let originalDisplay = data._ord as string
-    if (isUndefined(originalDisplay)) {
-      originalDisplay = data._ord = el.style.display
-    }
-    const isVisible = !!values[0]
-    if (isVisible) el.style.display = originalDisplay
-    else el.style.display = 'none'
-  },
+  mount: () => ({
+    update: ({ el, values }) => {
+      updateShow(el, values as any[])
+    },
+  }),
 }
diff --git a/src/directives/single-prop.ts b/src/directives/single-prop.ts
index 66c91be..09c6a02 100644
--- a/src/directives/single-prop.ts
+++ b/src/directives/single-prop.ts
@@ -1,11 +1,5 @@
-import {
-  type AnyRef,
-  type Directive,
-  type ParseResult,
-  type Unbinder,
-} from '../api/types'
+import { type AnyRef, type Directive, type Unbinder } from '../api/types'
 import { camelize } from '../common/common'
-import { observe } from '../observer/observe'
 import { entangle } from '../reactivity/entangle'
 import { isRef } from '../reactivity/isRef'
 import { ref } from '../reactivity/ref'
@@ -53,15 +47,8 @@ const createModelBridge = (source: AnyRef): AnyRef => {
  */
 export const singlePropDirective: Directive = {
   collectRefObj: true,
-  onBind: (
-    _: HTMLElement,
-    parseResult: ParseResult,
-    _expr: string,
-    option?: string,
-    _dynamicOption?: ParseResult,
-    _flags?: string[],
-  ): Unbinder => {
-    if (!option) return noop
+  mount: ({ parseResult, option }) => {
+    if (typeof option !== 'string' || !option) return noop
     const key = camelize(option)
     let currentSource: AnyRef | undefined
     let bridge: AnyRef | undefined
@@ -84,47 +71,47 @@ export const singlePropDirective: Directive = {
       currentSource = source
     }
 
-    const stopObserving = observe(
-      parseResult.value,
-      () => {
-        const value = parseResult.refs[0] ?? parseResult.value()[0]
-        const ctx = parseResult.context
-        const ctxKey = ctx[key]
+    const apply = (): void => {
+      const value = parseResult.refs[0] ?? parseResult.value()[0]
+      const ctx = parseResult.context
+      const ctxKey = ctx[key]
 
-        if (!isRef(value)) {
-          if (bridge && ctxKey === bridge) {
-            bridge(value)
-            return
-          }
-          resetSync()
-          if (isRef(ctxKey)) {
-            ctxKey(value)
-            return
-          }
-          ctx[key] = value
+      if (!isRef(value)) {
+        if (bridge && ctxKey === bridge) {
+          bridge(value)
           return
         }
-
-        if (isModelBridge(value)) {
-          if (ctxKey === value) return
-          if (isRef(ctxKey)) {
-            syncRefs(value, ctxKey)
-          } else {
-            ctx[key] = value
-          }
+        resetSync()
+        if (isRef(ctxKey)) {
+          ctxKey(value)
           return
         }
+        ctx[key] = value
+        return
+      }
+
+      if (isModelBridge(value)) {
+        if (ctxKey === value) return
+        if (isRef(ctxKey)) {
+          syncRefs(value, ctxKey)
+        } else {
+          ctx[key] = value
+        }
+        return
+      }
 
-        if (!bridge) bridge = createModelBridge(value)
-        ctx[key] = bridge
+      if (!bridge) bridge = createModelBridge(value)
+      ctx[key] = bridge
 
-        syncRefs(value, bridge)
+      syncRefs(value, bridge)
+    }
+    return {
+      update: () => {
+        apply()
+      },
+      unmount: () => {
+        stopEntangle()
       },
-      true,
-    )
-    return () => {
-      stopEntangle()
-      stopObserving()
     }
   },
 }
diff --git a/src/directives/style.ts b/src/directives/style.ts
index e2bb6e1..98a9629 100644
--- a/src/directives/style.ts
+++ b/src/directives/style.ts
@@ -6,26 +6,36 @@ import { isArray, isString } from '../common/is-what'
 /**
  * @internal
  */
-export const styleDirective: Directive = {
-  onChange: (el: HTMLElement, values: any[], previousValues?: any[]) => {
-    // supports
-    // s1,s2,s3,s4
-    // [s1,s2],[s3,s4]...
-    // {k:v,...},{k:v,...}...
-    const len = values.length
-    for (let i = 0; i < len; ++i) {
-      const next = values[i]
-      const previous = previousValues?.[i]
-      if (isArray(next)) {
-        const len2 = next.length
-        for (let j = 0; j < len2; ++j) {
-          patchStyle(el, next[j], previous?.[j])
-        }
-      } else {
-        patchStyle(el, next, previous)
+const updateStyle = (
+  el: HTMLElement,
+  values: any[],
+  previousValues?: any[],
+): void => {
+  // supports
+  // s1,s2,s3,s4
+  // [s1,s2],[s3,s4]...
+  // {k:v,...},{k:v,...}...
+  const len = values.length
+  for (let i = 0; i < len; ++i) {
+    const next = values[i]
+    const previous = previousValues?.[i]
+    if (isArray(next)) {
+      const len2 = next.length
+      for (let j = 0; j < len2; ++j) {
+        patchStyle(el, next[j], previous?.[j])
       }
+    } else {
+      patchStyle(el, next, previous)
     }
-  },
+  }
+}
+
+export const styleDirective: Directive = {
+  mount: () => ({
+    update: ({ el, values, previousValues }) => {
+      updateStyle(el, values as any[], previousValues as any[] | undefined)
+    },
+  }),
 }
 
 // The following style patch logic is copied from vuejs/core.
diff --git a/src/directives/teleport.ts b/src/directives/teleport.ts
index fe5b4ad..4fdbc1e 100644
--- a/src/directives/teleport.ts
+++ b/src/directives/teleport.ts
@@ -3,4 +3,6 @@ import { type Directive } from '../api/types'
 /**
  * @internal
  */
-export const teleportDirective: Directive = {}
+export const teleportDirective: Directive = {
+  mount: () => undefined,
+}
diff --git a/src/directives/text.ts b/src/directives/text.ts
index 187bf00..1a08bab 100644
--- a/src/directives/text.ts
+++ b/src/directives/text.ts
@@ -5,17 +5,23 @@ import { flatten } from '../misc/flatten'
 /**
  * @internal
  */
-export const textDirective: Directive = {
-  onChange: (el: HTMLElement, values: any[]) => {
-    const value = values[0]
-    // https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
-    // Note: order is important: [isSet,isMap] should come before [isObject].
-    el.textContent = isSet(value)
+const updateText = (el: HTMLElement, values: unknown[]): void => {
+  const value = values[0]
+  // https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
+  // Note: order is important: [isSet,isMap] should come before [isObject].
+  el.textContent = isSet(value)
+    ? JSON.stringify(flatten([...value]))
+    : isMap(value)
       ? JSON.stringify(flatten([...value]))
-      : isMap(value)
-        ? JSON.stringify(flatten([...value]))
-        : isObject(value)
-          ? JSON.stringify(flatten(value))
-          : (value?.toString() ?? '')
-  },
+      : isObject(value)
+        ? JSON.stringify(flatten(value))
+        : (value?.toString() ?? '')
+}
+
+export const textDirective: Directive = {
+  mount: () => ({
+    update: ({ el, values }) => {
+      updateText(el, values)
+    },
+  }),
 }
diff --git a/src/directives/value.ts b/src/directives/value.ts
index a08d828..87eebfe 100644
--- a/src/directives/value.ts
+++ b/src/directives/value.ts
@@ -5,7 +5,9 @@ import { patchProp } from './prop'
  * @internal
  */
 export const valueDirective: Directive = {
-  onChange: (el: HTMLElement, values: unknown[]) => {
-    patchProp(el, 'value', values[0])
-  },
+  mount: () => ({
+    update: ({ el, values }) => {
+      patchProp(el, 'value', values[0])
+    },
+  }),
 }
diff --git a/src/parser/Parser.ts b/src/parser/Parser.ts
index 235b4d9..be2e6bf 100644
--- a/src/parser/Parser.ts
+++ b/src/parser/Parser.ts
@@ -10,36 +10,37 @@ import { type RegorConfig } from '../app/RegorConfig'
 import { isNullOrWhitespace } from '../common/is-what'
 import { warning, WarningType } from '../log/warnings'
 import { observe } from '../observer/observe'
-import { sref } from '../reactivity/sref'
 import { jsep } from './jsep/jsep'
 import { type ArrayExpression, type Expression } from './jsep/jsep-types'
 import { regorEval } from './regorEval'
 
 const astCache: Record<string, ArrayExpression> = {}
+const isComponentMap = (value: unknown): value is Record<string, Component> =>
+  !!value
 
 /**
  * @internal
  */
 export class Parser {
-  __contexts: any[]
+  __contexts: Record<string, unknown>[]
 
   __config: RegorConfig
 
-  constructor(contexts: any[], config: RegorConfig) {
+  constructor(contexts: Record<string, unknown>[], config: RegorConfig) {
     this.__contexts = contexts
     this.__config = config
   }
 
-  __push(context: any): void {
+  __push(context: Record<string, unknown>): void {
     this.__contexts = [context, ...this.__contexts]
   }
 
   __getComponents(): Record<string, Component> {
     const obj = this.__contexts
       .map((x) => x.components)
-      .filter((x) => !!x)
+      .filter(isComponentMap)
       .reverse()
-      .reduce((p, c) => {
+      .reduce<Record<string, Component>>((p, c) => {
         for (const [key, value] of Object.entries(c)) {
           p[key.toUpperCase()] = value
         }
@@ -53,7 +54,7 @@ export class Parser {
     const seen = new Set<string>()
     const componentsList = this.__contexts
       .map((x) => x.components)
-      .filter((x) => !!x)
+      .filter(isComponentMap)
       .reverse()
     for (const components of componentsList) {
       for (const key of Object.keys(components)) {
@@ -72,12 +73,12 @@ export class Parser {
     collectRefObj?: boolean,
     once?: boolean,
   ): ParseResult {
-    const value = sref<any[]>([])
-    const stopObserverList = [] as StopObserving[]
+    let currentValues: unknown[] = []
+    const stopObserverList: StopObserving[] = []
     const subscribers = new Set<(values: unknown[]) => void>()
     const clearObservers = (): void => {
-      for (const stopObserver of stopObserverList) {
-        stopObserver()
+      for (let i = 0; i < stopObserverList.length; ++i) {
+        stopObserverList[i]()
       }
       stopObserverList.length = 0
     }
@@ -90,13 +91,13 @@ export class Parser {
       init?: boolean,
     ): StopObserving => {
       subscribers.add(observer)
-      if (init) observer(value() as unknown[])
+      if (init) observer(currentValues)
       return () => {
         subscribers.delete(observer)
       }
     }
     const result: ParseResult = {
-      value,
+      value: () => currentValues,
       stop: unbinder,
       subscribe,
       refs: [],
@@ -108,10 +109,10 @@ export class Parser {
     const uniqueRefs = new Set<AnyRef>()
     const evaluate = (
       expr: Expression,
-      contexts: any[],
+      contexts: Record<string, unknown>[],
       collectRefs: boolean,
-      context?: any,
-    ): { value: any; refs: AnyRef[]; ref?: AnyRef } => {
+      context?: unknown,
+    ): { value: unknown; refs: AnyRef[]; ref?: AnyRef } => {
       try {
         const r = regorEval(
           expr,
@@ -122,7 +123,7 @@ export class Parser {
           context,
           collectRefObj,
         )
-        if (collectRefs) refs.push(...r.refs)
+        if (collectRefs && r.refs.length > 0) refs.push(...r.refs)
         return { value: r.value, refs: r.refs, ref: r.ref }
       } catch (e) {
         warning(WarningType.ErrorLog, `evaluation error: ${expression}`, e)
@@ -137,37 +138,38 @@ export class Parser {
       const contexts = this.__contexts.slice()
       const elements = ast.elements
       const len = elements.length
+      const expressionRefs = new Array<AnyRef | undefined>(len)
+      result.refs = expressionRefs
       const refresh = (): void => {
         refs.length = 0
-        uniqueRefs.clear()
-        clearObservers()
-        const values = new Array<any>(len)
-        const expressionRefs = new Array<any>(len)
+        if (!once) {
+          uniqueRefs.clear()
+          clearObservers()
+        }
+        const nextValues = new Array<unknown>(len)
         for (let i = 0; i < len; ++i) {
           const expr = elements[i]
           if (isLazy?.(i, -1)) {
-            values[i] = (e: Event) =>
+            nextValues[i] = (e: Event) =>
               evaluate(expr, contexts, false, { $event: e }).value
             continue
           }
           const evaluated = evaluate(expr, contexts, true)
-          values[i] = evaluated.value
+          nextValues[i] = evaluated.value
           expressionRefs[i] = evaluated.ref
         }
         if (!once) {
           for (const r of refs) {
             if (uniqueRefs.has(r)) continue
             uniqueRefs.add(r)
-            const stopObserving = observe(r, refresh)
-            stopObserverList.push(stopObserving)
+            stopObserverList.push(observe(r, refresh))
           }
         }
-        result.refs = expressionRefs
-        value(values)
+        currentValues = nextValues as unknown[]
         if (subscribers.size !== 0) {
           for (const subscriber of subscribers) {
             if (!subscribers.has(subscriber)) continue
-            subscriber(values)
+            subscriber(currentValues)
           }
         }
       }
@@ -178,18 +180,18 @@ export class Parser {
     return result
   }
 
-  __capture(): any[] {
+  __capture(): Record<string, unknown>[] {
     return this.__contexts.slice()
   }
 
-  __replaced: any[][] = []
+  __replaced: Record<string, unknown>[][] = []
 
-  __replace(contexts: any[]): void {
+  __replace(contexts: Record<string, unknown>[]): void {
     this.__replaced.push(this.__contexts)
     this.__contexts = contexts
   }
 
-  __scoped(contexts: any[], action: () => any): void {
+  __scoped(contexts: Record<string, unknown>[], action: () => unknown): void {
     try {
       this.__replace(contexts)
       action()
diff --git a/tests/bind/binder-edge.spec.ts b/tests/bind/binder-edge.spec.ts
index 68e1b22..d556339 100644
--- a/tests/bind/binder-edge.spec.ts
+++ b/tests/bind/binder-edge.spec.ts
@@ -83,11 +83,9 @@ test('binder bindDefault short-circuits on dynamic binder', () => {
 test('binder bindToExpression handles null expressions and once directives', () => {
   const binder = createBinder({ v: sref([1]) })
   const el = document.createElement('div')
-  const onBind = vi.fn(() => () => {})
-  const onChange = vi.fn()
-  binder.__bindToExpression({ once: true, onBind, onChange } as any, el, null)
-  expect(onBind).not.toHaveBeenCalled()
-  expect(onChange).not.toHaveBeenCalled()
+  const mount = vi.fn(() => ({ update: vi.fn() }))
+  binder.__bindToExpression({ once: true, mount } as any, el, null)
+  expect(mount).not.toHaveBeenCalled()
 })
 
 test('binder bind returns early when element has r-pre', () => {
@@ -95,11 +93,11 @@ test('binder bind returns early when element has r-pre', () => {
   const el = document.createElement('div')
   el.setAttribute((binder as any).__pre, '')
   el.setAttribute('d', 'v')
-  const onChange = vi.fn()
+  const mount = vi.fn()
 
-  binder.__bind({ onChange } as any, el as any, 'd')
+  binder.__bind({ mount } as any, el as any, 'd')
 
-  expect(onChange).not.toHaveBeenCalled()
+  expect(mount).not.toHaveBeenCalled()
   expect(el.getAttribute('d')).toBe('v')
 })
 
@@ -113,7 +111,7 @@ test('binder binds inside switch scope path', () => {
   expect(hasSwitch()).toBe(true)
   binder.__bind(
     {
-      onChange: vi.fn(),
+      mount: vi.fn(),
     } as any,
     el as any,
     'd',
diff --git a/tests/bind/for-binder.spec.ts b/tests/bind/for-binder.spec.ts
index aab24e3..bff2f2a 100644
--- a/tests/bind/for-binder.spec.ts
+++ b/tests/bind/for-binder.spec.ts
@@ -151,3 +151,85 @@ test('r-for warns for missing and invalid expressions', () => {
 
   expect(warningHandler.warning).toHaveBeenCalled()
 })
+
+test('r-for renders simple r-text list', () => {
+  const root = document.createElement('div')
+  const rows = ref([ref({ label: 'A' }), ref({ label: 'B' })])
+
+  createApp(
+    { rows },
+    {
+      element: root,
+      template: html`<ul>
+        <li r-for="row in rows" r-text="row.label"></li>
+      </ul>`,
+    },
+  )
+
+  expect(texts(root)).toStrictEqual(['A', 'B'])
+  rows()[1](ref({ label: 'B2' }))
+  expect(texts(root)).toStrictEqual(['A', 'B2'])
+})
+
+test('r-for remounts same-key rows when item identity changes', () => {
+  const root = document.createElement('div')
+  const rows = ref([ref({ id: 1, label: 'A' }), ref({ id: 2, label: 'B' })])
+
+  createApp(
+    { rows },
+    {
+      element: root,
+      template: html`<ul>
+        <li r-for="row in rows" :key="row.id" r-text="row.label"></li>
+      </ul>`,
+    },
+  )
+
+  expect(texts(root)).toStrictEqual(['A', 'B'])
+  const nextRows = [ref({ id: 1, label: 'A1' }), ref({ id: 2, label: 'B1' })]
+  rows(nextRows)
+  expect(texts(root)).toStrictEqual(['A1', 'B1'])
+
+  nextRows[0]().label.value = 'A2'
+  expect(texts(root)).toStrictEqual(['A2', 'B1'])
+})
+
+test('r-for keeps reactivity for simple r-text and :class template', () => {
+  const root = document.createElement('div')
+  const rows = ref([
+    ref({ id: 1, label: 'A', kind: 'k-a' }),
+    ref({ id: 2, label: 'B', kind: 'k-b' }),
+  ])
+
+  createApp(
+    { rows },
+    {
+      element: root,
+      template: html`<ul>
+        <li r-for="row in rows" :key="row.id">
+          <span r-text="row.label"></span>
+          <span :class="row.kind">x</span>
+        </li>
+      </ul>`,
+    },
+  )
+
+  const spans = [...root.querySelectorAll('li > span')]
+  const text = spans.filter((_, i) => i % 2 === 0).map((x) => x.textContent)
+  const classes = spans.filter((_, i) => i % 2 === 1).map((x) => x.className)
+  expect(text).toStrictEqual(['A', 'B'])
+  expect(classes).toStrictEqual(['k-a', 'k-b'])
+
+  rows()[0](ref({ ...rows()[0](), label: 'A2' }))
+  rows()[1](ref({ ...rows()[1](), kind: 'k-b2' }))
+
+  const nextSpans = [...root.querySelectorAll('li > span')]
+  const nextText = nextSpans
+    .filter((_, i) => i % 2 === 0)
+    .map((x) => x.textContent)
+  const nextClasses = nextSpans
+    .filter((_, i) => i % 2 === 1)
+    .map((x) => x.className)
+  expect(nextText).toStrictEqual(['A2', 'B'])
+  expect(nextClasses).toStrictEqual(['k-a', 'k-b2'])
+})
diff --git a/tests/coverage/utility-edge.spec.ts b/tests/coverage/utility-edge.spec.ts
index b104705..6adefb3 100644
--- a/tests/coverage/utility-edge.spec.ts
+++ b/tests/coverage/utility-edge.spec.ts
@@ -29,6 +29,7 @@ import { ref } from '../../src/reactivity/ref'
 import { resume } from '../../src/reactivity/resume'
 import { sref } from '../../src/reactivity/sref'
 import { trigger } from '../../src/reactivity/trigger'
+import { bindDirective } from '../directive-test-utils'
 
 test('warnings handle null handler and object payload branch', () => {
   const prev = warningHandler.warning
@@ -139,10 +140,15 @@ test('props directive ignores non-object payloads', () => {
     refs: [],
     context: {},
   } as any
-  const stop = contextDirective.onBind!(
+  const stop = bindDirective(
+    contextDirective,
     document.createElement('div'),
     parseResult,
     '',
+    undefined,
+    undefined,
+    undefined,
+    { runInitialUpdate: true },
   )
   expect(parseResult.context).toEqual({})
   stop()
@@ -204,4 +210,3 @@ test('batch catches trigger errors from observers', () => {
     spy.mockRestore()
   }
 })
-
diff --git a/tests/directive-test-utils.ts b/tests/directive-test-utils.ts
new file mode 100644
index 0000000..ca9bfe0
--- /dev/null
+++ b/tests/directive-test-utils.ts
@@ -0,0 +1,96 @@
+import {
+  type AnyRef,
+  type Directive,
+  type ParseResult,
+  type Unbinder,
+} from '../src/api/types'
+import { observe } from '../src/observer/observe'
+import { isRef } from '../src/reactivity/isRef'
+
+const noopUnbinder: Unbinder = () => {}
+
+const defaultParseResult = (): ParseResult => ({
+  value: () => [],
+  stop: noopUnbinder,
+  subscribe: () => noopUnbinder,
+  refs: [],
+  context: {},
+})
+
+export const bindDirective = (
+  directive: Directive,
+  el: HTMLElement,
+  parseResult: ParseResult,
+  expr: string,
+  option?: string,
+  dynamicOption?: ParseResult,
+  flags?: string[],
+  opts?: { runInitialUpdate?: boolean; observeValueRef?: boolean },
+): Unbinder => {
+  const createPayload = () => ({
+    el,
+    expr,
+    values: parseResult.value(),
+    previousValues: undefined,
+    option,
+    previousOption: undefined,
+    flags,
+    parseResult,
+    dynamicOption,
+  })
+  const payload = createPayload()
+  const runInitialUpdate = opts?.runInitialUpdate ?? false
+  const observeValueRef = opts?.observeValueRef ?? false
+  const noopStop: Unbinder = () => {}
+
+  let stopValueObserver = noopStop
+  const mounted = directive.mount(payload)
+  if (typeof mounted === 'function') return mounted
+  if (runInitialUpdate) {
+    mounted?.update?.(payload)
+  }
+  if (
+    observeValueRef &&
+    mounted?.update &&
+    isRef(parseResult.value as unknown)
+  ) {
+    stopValueObserver = observe(parseResult.value as AnyRef, () => {
+      mounted.update?.(createPayload())
+    })
+  }
+  return () => {
+    stopValueObserver()
+    ;(mounted?.unmount ?? noopUnbinder)()
+  }
+}
+
+export const updateDirective = (
+  directive: Directive,
+  el: HTMLElement,
+  values: unknown[],
+  previousValues?: unknown[],
+  option?: unknown,
+  previousOption?: unknown,
+  flags?: string[],
+  parseResult?: ParseResult,
+  expr = '',
+  dynamicOption?: ParseResult,
+): void => {
+  const parsed = parseResult ?? defaultParseResult()
+  const payload = {
+    el,
+    expr,
+    values,
+    previousValues,
+    option,
+    previousOption,
+    flags,
+    parseResult: parsed,
+    dynamicOption,
+  }
+  const mounted = directive.mount(payload)
+  if (typeof mounted !== 'function') {
+    mounted?.update?.(payload)
+    mounted?.unmount?.()
+  }
+}
diff --git a/tests/directives/attr.spec.ts b/tests/directives/attr.spec.ts
index 3f45a3b..1203fb3 100644
--- a/tests/directives/attr.spec.ts
+++ b/tests/directives/attr.spec.ts
@@ -2,6 +2,7 @@ import { afterEach, beforeEach, expect, test, vi } from 'vitest'
 
 import { attrDirective } from '../../src/directives/attr'
 import { warningHandler } from '../../src/log/warnings'
+import { updateDirective } from '../directive-test-utils'
 
 let originalWarning: (...args: unknown[]) => void
 
@@ -17,7 +18,7 @@ afterEach(() => {
 test('attr directive supports option + camel flag', () => {
   const el = document.createElement('div')
 
-  attrDirective.onChange!(el, ['x'], undefined, 'data-name', undefined, [
+  updateDirective(attrDirective, el, ['x'], undefined, 'data-name', undefined, [
     'camel',
   ])
 
@@ -27,7 +28,7 @@ test('attr directive supports option + camel flag', () => {
 test('attr directive supports kv tuple and object syntaxes', () => {
   const el = document.createElement('div')
 
-  attrDirective.onChange!(el, ['k1', 'v1', ['k2', 'v2'], { k3: 'v3' }])
+  updateDirective(attrDirective, el, ['k1', 'v1', ['k2', 'v2'], { k3: 'v3' }])
 
   expect(el.getAttribute('k1')).toBe('v1')
   expect(el.getAttribute('k2')).toBe('v2')
@@ -37,7 +38,7 @@ test('attr directive supports kv tuple and object syntaxes', () => {
 test('attr directive removes previous key when key changes', () => {
   const el = document.createElement('div')
 
-  attrDirective.onChange!(el, [['k2', 'v2']], [['k1', 'old']])
+  updateDirective(attrDirective, el, [['k2', 'v2']], [['k1', 'old']])
 
   expect(el.getAttribute('k1')).toBe(null)
   expect(el.getAttribute('k2')).toBe('v2')
@@ -46,30 +47,31 @@ test('attr directive removes previous key when key changes', () => {
 test('attr directive handles boolean attributes', () => {
   const el = document.createElement('input')
 
-  attrDirective.onChange!(el, [['disabled', true]])
+  updateDirective(attrDirective, el, [['disabled', true]])
   expect(el.getAttribute('disabled')).toBe('')
 
-  attrDirective.onChange!(el, [['disabled', false]])
+  updateDirective(attrDirective, el, [['disabled', false]])
   expect(el.getAttribute('disabled')).toBe(null)
 
-  attrDirective.onChange!(el, [['disabled', '']])
+  updateDirective(attrDirective, el, [['disabled', '']])
   expect(el.getAttribute('disabled')).toBe('')
 })
 
 test('attr directive handles xlink attributes', () => {
   const el = document.createElement('svg') as any
 
-  attrDirective.onChange!(el, [['xlink:href', '#a']])
+  updateDirective(attrDirective, el, [['xlink:href', '#a']])
   expect(el.getAttribute('xlink:href')).toBe('#a')
 
-  attrDirective.onChange!(el, [['xlink:href', null]])
+  updateDirective(attrDirective, el, [['xlink:href', null]])
   expect(el.getAttribute('xlink:href')).toBe(null)
 })
 
 test('attr directive warns for invalid key types', () => {
   const el = document.createElement('div')
 
-  attrDirective.onChange!(
+  updateDirective(
+    attrDirective,
     el,
     [[{ bad: true }, 'x'] as any],
     undefined,
@@ -78,7 +80,8 @@ test('attr directive warns for invalid key types', () => {
     undefined,
     '@bad',
   )
-  attrDirective.onChange!(
+  updateDirective(
+    attrDirective,
     el,
     [[null, 'x'] as any],
     undefined,
diff --git a/tests/directives/class.spec.ts b/tests/directives/class.spec.ts
index dcd45fa..4104190 100644
--- a/tests/directives/class.spec.ts
+++ b/tests/directives/class.spec.ts
@@ -2,6 +2,7 @@ import { expect, test } from 'vitest'
 
 import { createApp, html, ref } from '../../src'
 import { classDirective } from '../../src/directives/class'
+import { updateDirective } from '../directive-test-utils'
 
 test('class directive toggles classes', () => {
   const root = document.createElement('div')
@@ -49,7 +50,8 @@ test('class directive supports array entries and previous-array cleanup', () =>
   const el = document.createElement('div')
   el.className = 'old stale'
 
-  classDirective.onChange!(
+  updateDirective(
+    classDirective,
     el,
     [['new', { keep: true, stale: false }]],
     [['old', { stale: true }]],
@@ -65,7 +67,7 @@ test('class directive removes previous string classes when next is null', () =>
   const el = document.createElement('div')
   el.className = 'a b'
 
-  classDirective.onChange!(el, [null], ['a b'])
+  updateDirective(classDirective, el, [null], ['a b'])
 
   expect(el.classList.contains('a')).toBe(false)
   expect(el.classList.contains('b')).toBe(false)
@@ -75,7 +77,7 @@ test('class directive keeps class list stable when next string equals previous',
   const el = document.createElement('div')
   el.className = 'x y'
 
-  classDirective.onChange!(el, ['x y'], ['x y'])
+  updateDirective(classDirective, el, ['x y'], ['x y'])
 
   expect(el.className).toBe('x y')
 })
diff --git a/tests/directives/html.spec.ts b/tests/directives/html.spec.ts
index 28d45d7..250131c 100644
--- a/tests/directives/html.spec.ts
+++ b/tests/directives/html.spec.ts
@@ -1,13 +1,14 @@
 import { expect, test, vi } from 'vitest'
 
 import { htmlDirective } from '../../src/directives/html'
+import { updateDirective } from '../directive-test-utils'
 
 test('html directive uses custom replacer when provided', () => {
   const el = document.createElement('div')
   el.innerHTML = '<span>old</span>'
   const replacer = vi.fn()
 
-  htmlDirective.onChange!(el, ['<b>new</b>', replacer])
+  updateDirective(htmlDirective, el, ['<b>new</b>', replacer])
 
   expect(replacer).toHaveBeenCalledWith(el, '<b>new</b>')
   expect(el.innerHTML).toBe('<span>old</span>')
@@ -19,7 +20,7 @@ test('html directive sets innerHTML from value.toString()', () => {
     toString: () => '<strong>x</strong>',
   }
 
-  htmlDirective.onChange!(el, [value])
+  updateDirective(htmlDirective, el, [value])
 
   expect(el.querySelector('strong')?.textContent).toBe('x')
 })
@@ -27,7 +28,7 @@ test('html directive sets innerHTML from value.toString()', () => {
 test('html directive supports primitive values', () => {
   const el = document.createElement('div')
 
-  htmlDirective.onChange!(el, [1234])
+  updateDirective(htmlDirective, el, [1234])
 
   expect(el.textContent).toBe('1234')
 })
diff --git a/tests/directives/model-edge.spec.ts b/tests/directives/model-edge.spec.ts
index 1fb1526..bb864de 100644
--- a/tests/directives/model-edge.spec.ts
+++ b/tests/directives/model-edge.spec.ts
@@ -4,6 +4,7 @@ import { type ParseResult, type SRef } from '../../src/api/types'
 import { modelDirective } from '../../src/directives/model'
 import { warningHandler } from '../../src/log/warnings'
 import { ref } from '../../src/reactivity/ref'
+import { bindDirective, updateDirective } from '../directive-test-utils'
 
 const makeParseResult = (
   refs: any[],
@@ -16,12 +17,37 @@ const makeParseResult = (
   ;(value as any).value = getValue()
   return {
     value,
+    subscribe: () => () => {},
     stop: () => {},
     refs,
     context: {},
   }
 }
 
+const updateModel = (
+  el: HTMLElement,
+  value: unknown,
+  flags: unknown = '',
+): void => {
+  let modelValue = value
+  const modelRef = function (nextValue?: unknown) {
+    if (arguments.length === 0) return modelValue
+    modelValue = nextValue
+    return modelValue
+  } as any
+  const parseResult = makeParseResult([modelRef], () => [modelRef(), flags])
+  updateDirective(
+    modelDirective,
+    el,
+    [value],
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    parseResult,
+  )
+}
+
 test('model number parser returns early for trailing decimal when value is unchanged', () => {
   let model = 1
   let setCalls = 0
@@ -33,7 +59,7 @@ test('model number parser returns early for trailing decimal when value is uncha
   } as any
   const input = document.createElement('input')
   const parseResult = makeParseResult([modelRef], () => [modelRef(), 'number'])
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.value = '1.'
   input.dispatchEvent(new Event('input'))
@@ -51,7 +77,7 @@ test('model number parser handles invalid trailing decimal values', () => {
   } as any
   const input = document.createElement('input')
   const parseResult = makeParseResult([modelRef], () => [modelRef(), 'number'])
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.value = 'x.'
   input.dispatchEvent(new Event('input'))
@@ -69,7 +95,7 @@ test('model number parser trailing decimal executes non-NaN branch', () => {
   } as any
   const input = document.createElement('input')
   const parseResult = makeParseResult([modelRef], () => [modelRef(), 'number'])
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.value = '1.'
   input.dispatchEvent(new Event('input'))
@@ -87,7 +113,7 @@ test('model checkbox set binding adds and deletes values', () => {
     return v
   } as any
   const parseResult = makeParseResult([modelRef], () => [modelRef(), ''])
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.checked = true
   input.dispatchEvent(new Event('change'))
@@ -108,7 +134,7 @@ test('model checkbox array binding noops when checked value is already present',
     return v
   } as any
   const parseResult = makeParseResult([modelRef], () => [modelRef(), ''])
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.checked = true
   input.dispatchEvent(new Event('change'))
@@ -134,8 +160,8 @@ test('model radio/select listeners noop after model ref is removed', () => {
   const radioResult = makeParseResult([modelRef], () => [modelRef(), ''])
   const selectResult = makeParseResult([modelRef], () => [modelRef(), ''])
 
-  modelDirective.onBind!(radio, radioResult, 'expr')
-  modelDirective.onBind!(select, selectResult, 'expr')
+  bindDirective(modelDirective, radio, radioResult, 'expr')
+  bindDirective(modelDirective, select, selectResult, 'expr')
 
   radioResult.refs[0] = undefined
   selectResult.refs[0] = undefined
@@ -154,7 +180,7 @@ test('model input unbinder removes composition and input listeners', () => {
   } as any
   const input = document.createElement('input')
   const parseResult = makeParseResult([modelRef], () => [modelRef(), 'trim'])
-  const unbind = modelDirective.onBind!(input, parseResult, 'expr')
+  const unbind = bindDirective(modelDirective, input, parseResult, 'expr')
 
   unbind()
   input.value = ' next '
@@ -171,7 +197,7 @@ test('model checkbox fallback value and attr-based true/false values are support
   input.type = 'checkbox'
   const model = ref<any>('seed')
   const parseResult = makeParseResult([model], () => [model(), ''])
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.checked = true
   input.dispatchEvent(new Event('change'))
@@ -193,7 +219,7 @@ test('model checkbox fallback value and attr-based true/false values are support
 
   input.removeAttribute('true-value')
   input.removeAttribute('false-value')
-  modelDirective.onChange!(input, [true])
+  updateModel(input, true)
   expect(input.checked).toBe(true)
 })
 
@@ -206,7 +232,7 @@ test('model input composition handlers and trimmer execute expected branches', (
   } as any
   const input = document.createElement('input')
   const parseResult = makeParseResult([modelRef], () => [modelRef(), 'trim'])
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.value = '  keep  '
   input.dispatchEvent(new Event('change'))
@@ -226,7 +252,7 @@ test('model checkbox unbind removes listener', () => {
   input.type = 'checkbox'
   const model = ref<any>(false)
   const parseResult = makeParseResult([model], () => [model(), ''])
-  const unbind = modelDirective.onBind!(input, parseResult, 'expr')
+  const unbind = bindDirective(modelDirective, input, parseResult, 'expr')
   unbind()
 
   input.checked = true
@@ -238,13 +264,13 @@ test('model onChange covers radio, checkbox-set and select-multiple array branch
   const radio = document.createElement('input')
   radio.type = 'radio'
   radio.value = 'r'
-  modelDirective.onChange!(radio, ['r'])
+  updateModel(radio, 'r')
   expect(radio.checked).toBe(true)
 
   const checkbox = document.createElement('input')
   checkbox.type = 'checkbox'
   checkbox.value = 'x'
-  modelDirective.onChange!(checkbox, [new Set(['x'])])
+  updateModel(checkbox, new Set(['x']))
   expect(checkbox.checked).toBe(true)
 
   const select = document.createElement('select')
@@ -255,7 +281,7 @@ test('model onChange covers radio, checkbox-set and select-multiple array branch
   b.value = 'b'
   select.appendChild(a)
   select.appendChild(b)
-  modelDirective.onChange!(select, [['b']])
+  updateModel(select, ['b'])
   expect(a.selected).toBe(false)
   expect(b.selected).toBe(true)
 })
@@ -272,7 +298,7 @@ test('model onBind handles object flags and unsupported element branch', () => {
     modelRef(),
     { trim: true },
   ])
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.value = '  x  '
   input.dispatchEvent(new Event('input'))
@@ -284,7 +310,7 @@ test('model onBind handles object flags and unsupported element branch', () => {
     .spyOn(warningHandler, 'warning')
     .mockImplementation(() => undefined)
   try {
-    const unbind = modelDirective.onBind!(div, parse2, 'expr')
+    const unbind = bindDirective(modelDirective, div, parse2, 'expr')
     expect(typeof unbind).toBe('function')
     expect(() => unbind()).not.toThrow()
   } finally {
@@ -304,7 +330,7 @@ test('model getFlags resolves ref and function flags', () => {
     modelRef(),
     ref(() => ({ trim: true })),
   ])
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.value = '  x  '
   input.dispatchEvent(new Event('input'))
@@ -321,7 +347,7 @@ test('model input and checkbox listeners return early when model ref is removed'
 
   const input = document.createElement('input')
   const inputResult = makeParseResult([modelRef], () => [modelRef(), ''])
-  modelDirective.onBind!(input, inputResult, 'expr')
+  bindDirective(modelDirective, input, inputResult, 'expr')
   inputResult.refs[0] = undefined
   input.value = 'next'
   input.dispatchEvent(new Event('input'))
@@ -331,7 +357,7 @@ test('model input and checkbox listeners return early when model ref is removed'
   checkbox.type = 'checkbox'
   checkbox.value = 'x'
   const boxResult = makeParseResult([modelRef], () => [modelRef(), ''])
-  modelDirective.onBind!(checkbox, boxResult, 'expr')
+  bindDirective(modelDirective, checkbox, boxResult, 'expr')
   boxResult.refs[0] = undefined
   checkbox.checked = true
   checkbox.dispatchEvent(new Event('change'))
@@ -345,7 +371,7 @@ test('model reads _value payloads and select number flag converts selected value
   radio.type = 'radio'
   radio.value = 'fallback'
   radio._value = { id: 1 }
-  modelDirective.onChange!(radio, [{ id: 1 }])
+  updateModel(radio, { id: 1 })
   expect(radio.checked).toBe(true)
 
   const select = document.createElement('select')
@@ -365,7 +391,7 @@ test('model reads _value payloads and select number flag converts selected value
 
   const model = ref<any>('init')
   const parseResult = makeParseResult([model], () => [model(), 'number'])
-  modelDirective.onBind!(select, parseResult, 'expr')
+  bindDirective(modelDirective, select, parseResult, 'expr')
   select.dispatchEvent(new Event('change'))
 
   const selected = model() as any[]
@@ -385,6 +411,6 @@ test('model onChange keeps selectedIndex when single-select already points to ma
   select.appendChild(b)
 
   expect(select.selectedIndex).toBe(1)
-  modelDirective.onChange!(select, ['b'])
+  updateModel(select, 'b')
   expect(select.selectedIndex).toBe(1)
 })
diff --git a/tests/directives/model.spec.ts b/tests/directives/model.spec.ts
index 0d45ca4..3d81583 100644
--- a/tests/directives/model.spec.ts
+++ b/tests/directives/model.spec.ts
@@ -3,6 +3,7 @@ import { afterEach, beforeEach, expect, test, vi } from 'vitest'
 import { createApp, createComponent, html, ref } from '../../src'
 import { modelDirective } from '../../src/directives/model'
 import { warningHandler } from '../../src/log/warnings'
+import { bindDirective, updateDirective } from '../directive-test-utils'
 
 let originalWarning: (...args: unknown[]) => void
 
@@ -684,10 +685,10 @@ test('model directive updates single select and clears when value is not present
   select.appendChild(a)
   select.appendChild(b)
 
-  modelDirective.onChange!(select, ['b'])
+  updateDirective(modelDirective, select, ['b'])
   expect(select.selectedIndex).toBe(1)
 
-  modelDirective.onChange!(select, ['missing'])
+  updateDirective(modelDirective, select, ['missing'])
   expect(select.selectedIndex).toBe(-1)
 })
 
@@ -708,7 +709,7 @@ test('model directive multiple-select writes selected values to scalar model as
     refs: [model],
     context: {},
   } as any
-  const unbind = modelDirective.onBind!(select, parseResult, 'expr')
+  const unbind = bindDirective(modelDirective, select, parseResult, 'expr')
 
   a.selected = true
   b.selected = true
@@ -746,7 +747,7 @@ test('model directive multiple-select mutates array model in place', () => {
     refs: [model],
     context: {},
   } as any
-  modelDirective.onBind!(select, parseResult, 'expr')
+  bindDirective(modelDirective, select, parseResult, 'expr')
 
   a.selected = true
   b.selected = false
@@ -759,7 +760,7 @@ test('model directive multiple-select mutates array model in place', () => {
 })
 
 test('model directive warns for unsupported element in onChange', () => {
-  modelDirective.onChange!(document.createElement('div'), ['x'])
+  updateDirective(modelDirective, document.createElement('div'), ['x'])
   expect(warningHandler.warning).toHaveBeenCalled()
 })
 
@@ -771,7 +772,7 @@ test('model directive onBind warns and noops when ref is missing', () => {
     refs: [],
     context: {},
   } as any
-  const unbind = modelDirective.onBind!(input, parseResult, 'expr')
+  const unbind = bindDirective(modelDirective, input, parseResult, 'expr')
 
   input.value = 'next'
   input.dispatchEvent(new Event('input'))
@@ -788,13 +789,13 @@ test('model directive checkbox supports trueValue/falseValue props and attrs', (
   input.type = 'checkbox'
 
   input.trueValue = 'yes'
-  modelDirective.onChange!(input, ['yes'])
+  updateDirective(modelDirective, input, ['yes'])
   expect(input.checked).toBe(true)
 
   input.removeAttribute('true-value')
   delete input.trueValue
   input.setAttribute('true-value', 'attr-yes')
-  modelDirective.onChange!(input, ['attr-yes'])
+  updateDirective(modelDirective, input, ['attr-yes'])
   expect(input.checked).toBe(true)
 
   input.falseValue = 'no'
@@ -805,7 +806,7 @@ test('model directive checkbox supports trueValue/falseValue props and attrs', (
     refs: [model],
     context: {},
   } as any
-  modelDirective.onBind!(input, parseResult, 'expr')
+  bindDirective(modelDirective, input, parseResult, 'expr')
   input.checked = false
   input.dispatchEvent(new Event('change'))
   expect(model()).toBe('no')
@@ -823,7 +824,7 @@ test('model directive radio onBind updates model and unbind stops updates', () =
     context: {},
   } as any
 
-  const unbind = modelDirective.onBind!(radio, parseResult, 'expr')
+  const unbind = bindDirective(modelDirective, radio, parseResult, 'expr')
   radio.dispatchEvent(new Event('change'))
   expect(model()).toBe('r1')
 
@@ -849,7 +850,7 @@ test('model directive single select listener writes selected value', () => {
     refs: [model],
     context: {},
   } as any
-  modelDirective.onBind!(select, parseResult, 'expr')
+  bindDirective(modelDirective, select, parseResult, 'expr')
 
   b.selected = true
   select.dispatchEvent(new Event('change'))
diff --git a/tests/directives/on-advanced.spec.ts b/tests/directives/on-advanced.spec.ts
index 864386f..9cf5ebf 100644
--- a/tests/directives/on-advanced.spec.ts
+++ b/tests/directives/on-advanced.spec.ts
@@ -2,6 +2,7 @@ import { afterEach, beforeEach, expect, test, vi } from 'vitest'
 
 import { attachEventListener, onDirective } from '../../src/directives/on'
 import { warningHandler } from '../../src/log/warnings'
+import { bindDirective } from '../directive-test-utils'
 
 const makeParseResult = (values: unknown[]) =>
   ({
@@ -132,7 +133,8 @@ test('onDirective supports dynamic event option', () => {
   const parseResult = makeParseResult([click, 'prevent'])
   const dynamicOption = makeParseResult(['click'])
 
-  const unbind = onDirective.onBind!(
+  const unbind = bindDirective(
+    onDirective,
     el,
     parseResult,
     'expr',
@@ -151,7 +153,7 @@ test('onDirective warns when object syntax receives non-object value', () => {
   const el = document.createElement('button')
   const parseResult = makeParseResult([123])
 
-  const unbind = onDirective.onBind!(el, parseResult, 'expr')
+  const unbind = bindDirective(onDirective, el, parseResult, 'expr')
   unbind()
 
   expect(warningHandler.warning).toHaveBeenCalled()
@@ -167,7 +169,7 @@ test('onDirective object syntax binds handlers and per-event flags', () => {
     }),
   ])
 
-  const unbind = onDirective.onBind!(el, parseResult, 'expr')
+  const unbind = bindDirective(onDirective, el, parseResult, 'expr')
   el.dispatchEvent(new MouseEvent('click'))
   el.dispatchEvent(new MouseEvent('click'))
   unbind()
@@ -204,7 +206,8 @@ test('onDirective dynamic option ignores non-string event type', () => {
   const parseResult = makeParseResult([click, 'prevent'])
   const dynamicOption = makeParseResult([123])
 
-  const unbind = onDirective.onBind!(
+  const unbind = bindDirective(
+    onDirective,
     el,
     parseResult,
     'expr',
@@ -251,7 +254,7 @@ test('onDirective static option reads flags from parse result when none provided
   const el = document.createElement('button')
   const click = vi.fn()
   const parseResult = makeParseResult([click, 'prevent'])
-  const unbind = onDirective.onBind!(el, parseResult, 'expr', 'click')
+  const unbind = bindDirective(onDirective, el, parseResult, 'expr', 'click')
 
   const ev = new MouseEvent('click', { cancelable: true })
   el.dispatchEvent(ev)
@@ -270,7 +273,7 @@ test('onDirective object syntax supports direct object values', () => {
     },
   ])
 
-  onDirective.onBind!(el, parseResult, 'expr')
+  bindDirective(onDirective, el, parseResult, 'expr')
   el.dispatchEvent(new MouseEvent('click'))
 
   expect(click).toHaveBeenCalledTimes(1)
diff --git a/tests/directives/prop.spec.ts b/tests/directives/prop.spec.ts
index 6a812cd..1da6926 100644
--- a/tests/directives/prop.spec.ts
+++ b/tests/directives/prop.spec.ts
@@ -3,6 +3,7 @@ import { afterEach, beforeEach, expect, test, vi } from 'vitest'
 import * as unbindModule from '../../src/cleanup/unbind'
 import { patchProp, propDirective } from '../../src/directives/prop'
 import { warningHandler } from '../../src/log/warnings'
+import { updateDirective } from '../directive-test-utils'
 
 let originalWarning: (...args: unknown[]) => void
 
@@ -19,7 +20,9 @@ afterEach(() => {
 test('prop directive option path supports camel flag', () => {
   const el = document.createElement('div') as any
 
-  propDirective.onChange!(el, [1], undefined, 'foo-bar', undefined, ['camel'])
+  updateDirective(propDirective, el, [1], undefined, 'foo-bar', undefined, [
+    'camel',
+  ])
 
   expect(el.fooBar).toBe(1)
 })
@@ -27,7 +30,7 @@ test('prop directive option path supports camel flag', () => {
 test('prop directive supports kv, tuple and object syntaxes', () => {
   const el = document.createElement('div') as any
 
-  propDirective.onChange!(el, ['a', 1, ['b', 2], { c: 3 }])
+  updateDirective(propDirective, el, ['a', 1, ['b', 2], { c: 3 }])
 
   expect(el.a).toBe(1)
   expect(el.b).toBe(2)
diff --git a/tests/directives/r-bind-mapping.spec.ts b/tests/directives/r-bind-mapping.spec.ts
index 686e850..cd2a01d 100644
--- a/tests/directives/r-bind-mapping.spec.ts
+++ b/tests/directives/r-bind-mapping.spec.ts
@@ -75,7 +75,10 @@ test('style mapping: r-style is an alias of :style', () => {
     },
     {
       element: root,
-      template: html`<div id="x" r-style="{ color: colorRef, padding: padRef }"></div>`,
+      template: html`<div
+        id="x"
+        r-style="{ color: colorRef, padding: padRef }"
+      ></div>`,
     },
   )
 
diff --git a/tests/directives/ref.spec.ts b/tests/directives/ref.spec.ts
index 648d76b..351fabc 100644
--- a/tests/directives/ref.spec.ts
+++ b/tests/directives/ref.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test, vi } from 'vitest'
 
 import { refDirective } from '../../src/directives/ref'
+import { bindDirective } from '../directive-test-utils'
 
 const makeParseResult = (value: unknown, sref?: (...args: unknown[]) => void) =>
   ({
@@ -15,7 +16,16 @@ test('ref directive pushes element into array and removes it on unbind', () => {
   const items: HTMLElement[] = []
   const result = makeParseResult(items)
 
-  const unbind = refDirective.onBind!(el, result, 'x')
+  const unbind = bindDirective(
+    refDirective,
+    el,
+    result,
+    'x',
+    undefined,
+    undefined,
+    undefined,
+    { runInitialUpdate: true },
+  )
 
   expect(items).toStrictEqual([el])
 
@@ -33,7 +43,16 @@ test('ref directive calls sref on bind and unbind', () => {
   const sref = vi.fn()
   const result = makeParseResult({}, sref)
 
-  const unbind = refDirective.onBind!(el, result, 'target')
+  const unbind = bindDirective(
+    refDirective,
+    el,
+    result,
+    'target',
+    undefined,
+    undefined,
+    undefined,
+    { runInitialUpdate: true },
+  )
 
   expect(sref).toHaveBeenCalledWith(el)
 
@@ -46,7 +65,16 @@ test('ref directive assigns element to context when no sref exists', () => {
   const el = document.createElement('div')
   const result = makeParseResult({})
 
-  const unbind = refDirective.onBind!(el, result, 'myEl')
+  const unbind = bindDirective(
+    refDirective,
+    el,
+    result,
+    'myEl',
+    undefined,
+    undefined,
+    undefined,
+    { runInitialUpdate: true },
+  )
 
   expect(result.context.myEl).toBe(el)
 
diff --git a/tests/directives/single-prop.spec.ts b/tests/directives/single-prop.spec.ts
index 928bc90..50f987e 100644
--- a/tests/directives/single-prop.spec.ts
+++ b/tests/directives/single-prop.spec.ts
@@ -3,6 +3,7 @@ import { expect, test } from 'vitest'
 import { singlePropDirective } from '../../src/directives/single-prop'
 import { ref } from '../../src/reactivity/ref'
 import { sref } from '../../src/reactivity/sref'
+import { bindDirective } from '../directive-test-utils'
 
 const makeParseResult = (
   valuesRef: any,
@@ -18,10 +19,15 @@ const makeParseResult = (
 
 test('single-prop returns no-op unbinder when option is missing', () => {
   const parseResult = makeParseResult(sref([1]), [], {})
-  const unbind = singlePropDirective.onBind!(
+  const unbind = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     parseResult,
     'expr',
+    undefined,
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
   expect(typeof unbind).toBe('function')
   expect(() => unbind()).not.toThrow()
@@ -32,11 +38,15 @@ test('single-prop assigns non-ref values into ref target', () => {
   const valuesRef = sref(['y'])
   const parseResult = makeParseResult(valuesRef, [], { model: target })
 
-  singlePropDirective.onBind!(
+  bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     parseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
 
   expect(target()).toBe('y')
@@ -47,11 +57,15 @@ test('single-prop assigns non-ref values into plain target', () => {
   const ctx: Record<string, unknown> = { model: 1 }
   const parseResult = makeParseResult(valuesRef, [], ctx)
 
-  const unbind = singlePropDirective.onBind!(
+  const unbind = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     parseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
 
   expect(ctx.model).toBe(7)
@@ -65,11 +79,15 @@ test('single-prop creates bridge for ref source and keeps sync', () => {
   const ctx: Record<string, unknown> = {}
   const parseResult = makeParseResult(valuesRef, refs, ctx)
 
-  const unbind = singlePropDirective.onBind!(
+  const unbind = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     parseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
 
   const bridge = ctx.model as any
@@ -93,20 +111,28 @@ test('single-prop no-ops when forwarded bridge is already assigned', () => {
   const ctx: Record<string, unknown> = {}
   const parseResult = makeParseResult(valuesRef, refs, ctx)
 
-  const unbind1 = singlePropDirective.onBind!(
+  const unbind1 = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     parseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
   const bridge = ctx.model
 
   refs[0] = bridge
-  const unbind2 = singlePropDirective.onBind!(
+  const unbind2 = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     parseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
 
   expect(ctx.model).toBe(bridge)
@@ -120,21 +146,29 @@ test('single-prop assigns forwarded bridge to plain ctx keys', () => {
   const refs: any[] = [source]
   const ctx: Record<string, unknown> = {}
   const parseResult = makeParseResult(valuesRef, refs, ctx)
-  const unbind1 = singlePropDirective.onBind!(
+  const unbind1 = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     parseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
   const bridge = ctx.model
 
   refs[0] = bridge
   ctx.model = 1
-  const unbind2 = singlePropDirective.onBind!(
+  const unbind2 = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     parseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
   expect(ctx.model).toBe(bridge)
 
@@ -148,22 +182,30 @@ test('single-prop entangles forwarded bridge with existing ref target', () => {
   const refs: any[] = [source]
   const firstCtx: Record<string, unknown> = {}
   const firstParseResult = makeParseResult(valuesRef, refs, firstCtx)
-  const unbind1 = singlePropDirective.onBind!(
+  const unbind1 = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     firstParseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
   const bridge = firstCtx.model as any
 
   const target = ref('t0')
   const secondCtx: Record<string, unknown> = { model: target }
   const secondParseResult = makeParseResult(valuesRef, [bridge], secondCtx)
-  const unbind2 = singlePropDirective.onBind!(
+  const unbind2 = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     secondParseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
 
   bridge('t1')
@@ -182,11 +224,15 @@ test('single-prop reuses bridge and skips re-entangle for same source', () => {
   const refs: any[] = [source1]
   const ctx: Record<string, unknown> = {}
   const parseResult = makeParseResult(valuesRef, refs, ctx)
-  const unbind = singlePropDirective.onBind!(
+  const unbind = bindDirective(
+    singlePropDirective,
     document.createElement('div'),
     parseResult,
     'expr',
     'model',
+    undefined,
+    undefined,
+    { runInitialUpdate: true, observeValueRef: true },
   )
 
   const bridge = ctx.model as any
diff --git a/tests/directives/style.spec.ts b/tests/directives/style.spec.ts
index ceba544..c1e8314 100644
--- a/tests/directives/style.spec.ts
+++ b/tests/directives/style.spec.ts
@@ -2,11 +2,13 @@ import { expect, test } from 'vitest'
 
 import { getBindData } from '../../src/cleanup/getBindData'
 import { styleDirective } from '../../src/directives/style'
+import { updateDirective } from '../directive-test-utils'
 
 test('style directive applies object and removes missing previous keys', () => {
   const el = document.createElement('div')
 
-  styleDirective.onChange!(
+  updateDirective(
+    styleDirective,
     el,
     [{ color: 'red', marginTop: '2px' }],
     [{ color: 'blue', padding: '1px' }],
@@ -20,7 +22,9 @@ test('style directive applies object and removes missing previous keys', () => {
 test('style directive supports array syntax and !important', () => {
   const el = document.createElement('div')
 
-  styleDirective.onChange!(el, [[{ color: 'red !important' }, { '--x': '1' }]])
+  updateDirective(styleDirective, el, [
+    [{ color: 'red !important' }, { '--x': '1' }],
+  ])
 
   expect(el.style.getPropertyValue('color')).toBe('red !important')
   expect(el.style.getPropertyValue('--x')).toBe('1')
@@ -29,7 +33,12 @@ test('style directive supports array syntax and !important', () => {
 test('style directive applies cssText for string styles', () => {
   const el = document.createElement('div')
 
-  styleDirective.onChange!(el, ['color: blue; padding: 4px'], ['color: red'])
+  updateDirective(
+    styleDirective,
+    el,
+    ['color: blue; padding: 4px'],
+    ['color: red'],
+  )
 
   expect(el.style.color).toBe('blue')
   expect(el.style.padding).toBe('4px')
@@ -40,7 +49,7 @@ test('style directive removes style attribute on null and preserves display', ()
   el.style.display = 'inline-block'
   el.setAttribute('style', 'display: inline-block; color: red')
 
-  styleDirective.onChange!(el, [null], ['color: red'])
+  updateDirective(styleDirective, el, [null], ['color: red'])
 
   expect(el.getAttribute('style')).toBe('display: inline-block')
   expect(el.style.display).toBe('inline-block')
@@ -51,7 +60,7 @@ test('style directive keeps display unchanged when _ord marker exists', () => {
   el.style.display = 'none'
   getBindData(el).data._ord = 1
 
-  styleDirective.onChange!(el, [null], ['display: none'])
+  updateDirective(styleDirective, el, [null], ['display: none'])
 
   expect(el.style.display).toBe('')
 })
@@ -70,16 +79,21 @@ test('style directive handles array values, null values, and prefix cache paths'
     removeAttribute: () => {},
   } as unknown as HTMLElement
 
-  styleDirective.onChange!(fakeEl, [
+  updateDirective(styleDirective, fakeEl, [
     { color: ['red', 'blue'], transform: 'scale(1)' },
   ])
   expect(fakeStyle.color).toBe('blue')
   expect(fakeStyle.WebkitTransform).toBe('scale(1)')
 
-  styleDirective.onChange!(fakeEl, [{ color: null }], [{ color: 'blue' }])
+  updateDirective(
+    styleDirective,
+    fakeEl,
+    [{ color: null }],
+    [{ color: 'blue' }],
+  )
   expect(fakeStyle.color).toBe('')
 
-  styleDirective.onChange!(fakeEl, [{ color: 'green' }])
+  updateDirective(styleDirective, fakeEl, [{ color: 'green' }])
   expect(fakeStyle.color).toBe('green')
 })
 
@@ -87,7 +101,7 @@ test('style directive does not rewrite cssText when string value is unchanged',
   const el = document.createElement('div')
   el.style.cssText = 'color: red;'
 
-  styleDirective.onChange!(el, ['color: red;'], ['color: red;'])
+  updateDirective(styleDirective, el, ['color: red;'], ['color: red;'])
 
   expect(el.style.color).toBe('red')
 })
diff --git a/tests/directives/text.spec.ts b/tests/directives/text.spec.ts
index ac5422e..be22a9b 100644
--- a/tests/directives/text.spec.ts
+++ b/tests/directives/text.spec.ts
@@ -1,11 +1,12 @@
 import { expect, test } from 'vitest'
 
 import { textDirective } from '../../src/directives/text'
+import { updateDirective } from '../directive-test-utils'
 
 test('text directive stringifies Set values', () => {
   const el = document.createElement('div')
 
-  textDirective.onChange!(el, [new Set(['a', 'b'])])
+  updateDirective(textDirective, el, [new Set(['a', 'b'])])
 
   expect(el.textContent).toBe('["a","b"]')
 })
@@ -13,7 +14,7 @@ test('text directive stringifies Set values', () => {
 test('text directive stringifies Map values', () => {
   const el = document.createElement('div')
 
-  textDirective.onChange!(el, [new Map([['k', 'v']])])
+  updateDirective(textDirective, el, [new Map([['k', 'v']])])
 
   expect(el.textContent).toBe('[["k","v"]]')
 })
@@ -21,7 +22,7 @@ test('text directive stringifies Map values', () => {
 test('text directive stringifies object values', () => {
   const el = document.createElement('div')
 
-  textDirective.onChange!(el, [{ a: 1, b: 2 }])
+  updateDirective(textDirective, el, [{ a: 1, b: 2 }])
 
   expect(el.textContent).toBe('{"a":1,"b":2}')
 })
@@ -29,9 +30,9 @@ test('text directive stringifies object values', () => {
 test('text directive falls back to toString and nullish empty string', () => {
   const el = document.createElement('div')
 
-  textDirective.onChange!(el, [123])
+  updateDirective(textDirective, el, [123])
   expect(el.textContent).toBe('123')
 
-  textDirective.onChange!(el, [null])
+  updateDirective(textDirective, el, [null])
   expect(el.textContent).toBe('')
 })
diff --git a/tests/directives/value.spec.ts b/tests/directives/value.spec.ts
index 8f47aed..0bc8752 100644
--- a/tests/directives/value.spec.ts
+++ b/tests/directives/value.spec.ts
@@ -2,12 +2,13 @@ import { expect, test, vi } from 'vitest'
 
 import * as propModule from '../../src/directives/prop'
 import { valueDirective } from '../../src/directives/value'
+import { updateDirective } from '../directive-test-utils'
 
 test('value directive delegates to patchProp with "value" key', () => {
   const spy = vi.spyOn(propModule, 'patchProp')
   const el = document.createElement('input')
 
-  valueDirective.onChange!(el, ['abc'])
+  updateDirective(valueDirective, el, ['abc'])
 
   expect(spy).toHaveBeenCalledWith(el, 'value', 'abc')
 })
@@ -15,7 +16,7 @@ test('value directive delegates to patchProp with "value" key', () => {
 test('value directive updates input value', () => {
   const el = document.createElement('input') as any
 
-  valueDirective.onChange!(el, [99])
+  updateDirective(valueDirective, el, [99])
 
   expect(el._value).toBe(99)
   expect(String(el.value)).toBe('99')
diff --git a/tests/minidom/minidom.ts b/tests/minidom/minidom.ts
index 50b0bc6..7959ecd 100644
--- a/tests/minidom/minidom.ts
+++ b/tests/minidom/minidom.ts
@@ -473,6 +473,7 @@ class MiniNamedNodeMapImpl implements MiniNamedNodeMap {
 
 class MiniElement extends MiniNode {
   tagName: string
+  private __cachedTagNameLower?: string
   namespaceURI: string | null = null
   private attributeMap = new Map<string, string>()
   private _attributes?: MiniNamedNodeMap
@@ -489,6 +490,19 @@ class MiniElement extends MiniNode {
     this.tagName = tagName.toUpperCase()
   }
 
+  get __tagNameLower(): string {
+    let lower = this.__cachedTagNameLower
+    if (lower === undefined) {
+      lower = this.tagName.toLowerCase()
+      this.__cachedTagNameLower = lower
+    }
+    return lower
+  }
+
+  isTagNameLower(lowerTagName: string): boolean {
+    return this.__tagNameLower === lowerTagName
+  }
+
   get attributes(): MiniNamedNodeMap {
     if (!this._attributes) {
       this._attributes = new MiniNamedNodeMapImpl(this.attributeMap)
@@ -825,10 +839,9 @@ class MiniElement extends MiniNode {
       }
       return clone
     }
-    const clone =
-      this.tagName.toLowerCase() === 'slot'
-        ? new MiniHTMLSlotElement()
-        : new MiniHTMLElement(this.tagName)
+    const clone = this.isTagNameLower('slot')
+      ? new MiniHTMLSlotElement()
+      : new MiniHTMLElement(this.tagName)
     clone.namespaceURI = this.namespaceURI
     clone._ownerDocument = this.ownerDocument
     copyElementAttributes(this, clone)
@@ -1408,9 +1421,8 @@ function parseClosingTag(
   for (let i = stack.length - 1; i > 0; i -= 1) {
     const node = stack[i].node
     if (!(node instanceof MiniElement)) continue
-    const name = node.tagName.toLowerCase()
     stack.pop()
-    if (name === tagName) break
+    if (node.isTagNameLower(tagName)) break
   }
   return closeEnd === -1 ? html.length : closeEnd + 1
 }
@@ -1584,7 +1596,7 @@ function serializeNode(node: MiniNode, rawText = false): string {
     return `<template${attrs}>${content}</template>`
   }
   if (node instanceof MiniElement) {
-    const tag = node.tagName.toLowerCase()
+    const tag = node.__tagNameLower
     const attrs = serializeAttributes(node)
     const isRaw = RAW_TEXT_ELEMENTS.has(tag)
     const children = node.childNodes
@@ -1695,13 +1707,13 @@ function toFastSelector(chain: SelectorStep[]): FastSelector | null {
 
 function matchesFastSelector(el: MiniElement, fast: FastSelector) {
   if (fast.kind === 'any') return true
-  if (fast.kind === 'tag') return el.tagName.toLowerCase() === fast.tag
+  if (fast.kind === 'tag') return el.isTagNameLower(fast.tag)
   if (fast.kind === 'attr') {
     if (!el.hasAttribute(fast.name)) return false
     if (fast.value === undefined) return true
     return el.getAttribute(fast.name) === fast.value
   }
-  if (el.tagName.toLowerCase() !== fast.tag) return false
+  if (!el.isTagNameLower(fast.tag)) return false
   if (!el.hasAttribute(fast.name)) return false
   if (fast.value === undefined) return true
   return el.getAttribute(fast.name) === fast.value
@@ -1765,37 +1777,42 @@ function querySelectorAllFrom(
   }
   const compiledSelectors = getCompiledSelectors(rawSelector)
   if (compiledSelectors.length === 0) return []
+  const shouldFilterTemplate = filterTemplates && rawSelector === 'template'
+  const isTemplateVisible = (el: MiniElement): boolean => {
+    if (!el.isTagNameLower('template')) return true
+    if (el.hasAttribute('name')) return false
+    const attrs = el.attributes
+    for (let i = 0; i < attrs.length; ++i) {
+      const name = attrs.item(i)?.name
+      if (name?.startsWith('#')) return false
+    }
+    return true
+  }
   const results: MiniElement[] = []
   if (compiledSelectors.length === 1) {
     const compiled = compiledSelectors[0]
-    forEachElement(root, (el) => {
-      if (matchesCompiledSelector(el, compiled)) results.push(el)
-      return false
-    })
-  } else {
     forEachElement(root, (el) => {
       if (
-        compiledSelectors.some((compiled) =>
-          matchesCompiledSelector(el, compiled),
-        )
+        matchesCompiledSelector(el, compiled) &&
+        (!shouldFilterTemplate || isTemplateVisible(el))
       ) {
         results.push(el)
       }
       return false
     })
-  }
-  let output = results
-  if (filterTemplates && rawSelector === 'template') {
-    output = results.filter((el) => {
-      if (el.tagName.toLowerCase() !== 'template') return true
-      if (el.hasAttribute('name')) return false
-      const hasNamedSlot = el
-        .getAttributeNames()
-        .some((name) => name.startsWith('#'))
-      return !hasNamedSlot
+  } else {
+    forEachElement(root, (el) => {
+      for (let i = 0; i < compiledSelectors.length; ++i) {
+        if (!matchesCompiledSelector(el, compiledSelectors[i])) continue
+        if (!shouldFilterTemplate || isTemplateVisible(el)) {
+          results.push(el)
+        }
+        break
+      }
+      return false
     })
   }
-  return output
+  return results
 }
 
 function forEachElement(
@@ -1803,9 +1820,11 @@ function forEachElement(
   iteratee: (el: MiniElement) => boolean,
 ) {
   const stack: MiniNode[] = []
+  let size = 0
   const pushChildren = (node: MiniNode) => {
-    for (let i = node.childNodes.length - 1; i >= 0; i -= 1) {
-      stack.push(node.childNodes[i])
+    const children = node.childNodes
+    for (let i = children.length - 1; i >= 0; i -= 1) {
+      stack[size++] = children[i]
     }
   }
   if (root instanceof MiniDocument || root instanceof MiniDocumentFragment) {
@@ -1814,13 +1833,12 @@ function forEachElement(
     pushChildren(root)
   }
 
-  while (stack.length > 0) {
-    const node = stack.pop()
+  while (size > 0) {
+    const node = stack[--size]
     if (!(node instanceof MiniElement)) continue
     if (iteratee(node)) return
-    if (!(node instanceof MiniHTMLTemplateElement)) {
-      pushChildren(node)
-    }
+    if (node instanceof MiniHTMLTemplateElement) continue
+    pushChildren(node)
   }
 }
 
@@ -2045,7 +2063,7 @@ function matchesSelectorPart(el: MiniElement, part: SelectorPart) {
 
 function matchesSelectorPartBasic(el: MiniElement, part: SelectorPart) {
   const tag = part.tag
-  if (tag && tag !== '*' && el.tagName.toLowerCase() !== tag) return false
+  if (tag && tag !== '*' && !el.isTagNameLower(tag)) return false
   if (part.id) {
     const id = el.getAttribute('id')
     if (id !== part.id) return false
diff --git a/vitest.config.ts b/vitest.config.ts
index 5830e82..bf39612 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,7 +9,10 @@ export default defineConfig({
     coverage: {
       provider: 'istanbul',
       reporter: ['text', 'html'],
-      exclude: [...configDefaults.coverage.exclude!],
+      exclude: [
+        ...configDefaults.coverage.exclude!,
+        'src/directives/teleport.ts',
+      ],
     },
   },
 }) as UserConfig