@ape-egg/vibe 4.0.0 → 4.1.1

package/runtime/state.js

@@ -1,46 +1,23 @@
 import { recordRead, recordAbsentRead, isTracking } from './tracking.js';
 
-// Track which objects are already proxied to avoid double-wrapping
 const proxyCache = new WeakMap();
 
-// Reading this symbol off any of our reactive proxies returns its raw
-// (unproxied) target; on anything else it's undefined. `unwrap` uses it to
-// collapse a proxy back to its raw object. This keeps object identity stable
-// across mutations: array methods (splice/push) and assignments read an element
-// — which `get` hands back as a proxy — and write it back into the tree; if we
-// stored the proxy, the next read would wrap it AGAIN, minting a fresh proxy
-// identity for the same underlying object. That would break reference identity
-// (a loop item would no longer be `=== $.arr[i]` after a splice) and make change
-// detection fire forever (a stored proxy never `===` the raw it's compared to).
 const RAW = Symbol('vibeRaw');
 
 const unwrap = (value) =>
   value !== null && typeof value === 'object' && value[RAW] !== undefined ? value[RAW] : value;
 
-// Write a property onto the proxy's raw target without waking the reactive
-// pipeline — no changedProps, no flush. For writes that reactivity can prove
-// irrelevant: a freshly generated component id has no live bindings yet (its
-// subtree hydrates later in the same batch by reading state directly), so
-// flushing on registration re-walks the whole live tree for nothing. Reads
-// through the proxy see the value immediately; later writes through the
-// proxy flush normally.
 export const silentSet = (proxy, prop, value) => {
   const raw = proxy !== null && typeof proxy === 'object' ? (proxy[RAW] ?? proxy) : proxy;
   raw[prop] = unwrap(value);
 };
 
-// Mark a batch of already-written keys changed and schedule one flush — the
-// commit half of silentSet. A mount registers N component states silently as
-// its scripts settle (staggered by module fetches), then notifies ONCE, so
-// whole-`$` observers (`@[Object.keys($)...]`) still see every fresh key
-// with a single tree walk instead of N.
 export const notifyChanged = (props) => {
   if (!props || props.length === 0) return;
   for (const prop of props) changedProps.add(prop);
   scheduleFlush();
 };
 
-// Batching: collect mutations and flush once per microtask
 let pendingFlush = false;
 let flushCallback = null;
 const changedProps = new Set();
@@ -57,54 +34,36 @@ const scheduleFlush = () => {
   }
 };
 
-// Deep proxy: recursively wrap nested objects and arrays
 const createDeepProxy = (target, rerender, rootState = null, rootProp = null) => {
-  // Never wrap one of our own proxies — collapse to its raw target so the cache
-  // returns the single canonical proxy. Covers a proxy that slipped into the
-  // tree nested inside an assigned object literal (set only unwraps the
-  // top-level value), which would otherwise double-wrap on read.
   target = unwrap(target);
 
-  // For root level, rootState is the target itself
   if (rootState === null) {
     rootState = target;
     flushCallback = typeof rerender === 'function' ? (props) => rerender(props) : null;
   }
 
-  // Check cache first
   if (proxyCache.has(target)) {
     return proxyCache.get(target);
   }
 
   const proxy = new Proxy(target, {
     set(obj, prop, value) {
-      // Never store one of our proxies in the raw tree — store its raw target,
-      // so element identity stays stable across mutations (see RAW comment).
       value = unwrap(value);
       const oldValue = obj[prop];
 
-      // Only trigger rerender if value actually changed
       if (oldValue !== value) {
         const ref = Reflect.set(obj, prop, value);
 
-        // Track which root-level property changed (for selective extraction)
         changedProps.add(rootProp || prop);
         scheduleFlush();
 
         return ref;
       }
 
-      // No change, just set
       return Reflect.set(obj, prop, value);
     },
 
     deleteProperty(obj, prop) {
-      // Without notifying changedProps + scheduleFlush, `delete $.foo` is
-      // invisible to the reactive pipeline — bindings depending on `foo` (or
-      // on `Object.keys($)`) keep showing the deleted value. Critical for
-      // component state cleanup: releaseOrphanedComponentState calls
-      // `delete window.$[id]` and downstream consumers (e.g. a state
-      // inspector iterating root keys) need to re-render.
       if (!(prop in obj)) return Reflect.deleteProperty(obj, prop);
 
       const ref = Reflect.deleteProperty(obj, prop);
@@ -116,21 +75,8 @@ const createDeepProxy = (target, rerender, rootState = null, rootProp = null) =>
     },
 
     get(target, prop) {
-      // Expose the raw target so `unwrap` (and external identity checks) can
-      // recover the unproxied object from any of our proxies.
       if (prop === RAW) return target;
 
-      // Subscription tracking: a read inside an open tracking window records
-      // the ROOT key it descended from. This is what makes helper bodies
-      // truthful dependencies — `isPremium()` reading `$.premiumUntil` via
-      // closure lands here mid-evaluation. One null check when inactive.
-      // A root-level read of a key the state does NOT have is an ABSENT read
-      // — same discipline as dollarFor's snapshot wrapper. Counting it live
-      // denies the subscriber the always-bucket and indexes it under a key
-      // that may never change: resolvePath fed a whole call expression
-      // (`literalRangeCells(2, 6)` — the eval-failed fallback treats it as a
-      // path) records one garbage "live" dep and the iteration is never
-      // re-selected (the game's "# Teams" BoxRange stranding empty).
       if (rootProp === null && isTracking() && typeof prop === 'string' && !(prop in target)) {
         recordAbsentRead(prop);
       } else {
@@ -139,17 +85,10 @@ const createDeepProxy = (target, rerender, rootState = null, rootProp = null) =>
 
       const value = Reflect.get(target, prop);
 
-      // Don't proxy non-objects, functions, null, or Promises.
-      // Promises aren't reactive state; wrapping them would also violate
-      // the Proxy invariant when exposed as non-writable/non-configurable
-      // properties (e.g. $.ready).
       if (value === null || typeof value !== 'object' || typeof value === 'function' || value instanceof Promise) {
         return value;
       }
 
-      // Recursively wrap nested objects/arrays
-      // If rootProp is null (we're at root level), set it to current prop
-      // Otherwise keep passing down the same rootProp
       const topProp = rootProp === null ? prop : rootProp;
       return createDeepProxy(value, rerender, rootState, topProp);
     },

package/runtime/this-scope.js

@@ -1,20 +1,3 @@
-// Event-handler `this.` resolution.
-//
-// parse.js rewrites `this.` in on* handlers inside a component scope to
-// `$this(this).` — this module is that `$this`. The returned proxy decides at
-// FIRE time, per access: a key declared in the component's state routes to
-// the state bucket; anything else routes to the native element (functions
-// bound so DOM methods keep their receiver, state methods left raw so `this`
-// inside them stays the proxy and nested writes stay reactive).
-//
-// The decision must happen at fire time, not parse time: compiled pages
-// register component state AFTER the initial parse (boot runs
-// executeCompiledComponentScripts post-parse, pre-hydrate), so a parse-time
-// key check would see empty buckets and mis-route every handler.
-//
-// Same delivery pattern as loop-scope's `$scope`: a global resolver keeps the
-// handler a readable native `on*` attribute.
-
 import { findComponentIdForElement } from './utils.js';
 
 const bucketFor = (element) => {

package/runtime/tracking.js

@@ -1,42 +1,10 @@
-// Auto-tracked reactive subscriptions — the knowledge half of the update
-// engine. Each reactive obligation (a text-binding span, an attribute or name
-// binding, a conditional, an iteration) is a SUBSCRIBER; during its
-// evaluation a tracking window is open and every genuine state read that
-// happens inside it — proxy get traps, evalInScope's state-first parameter
-// resolution, `$.key` reads on snapshots, scoped-state global fallthrough —
-// records the ROOT state key into the window. Closing the window commits the
-// read set to a reverse index (rootKey → Set<subscriber>), replacing the
-// subscriber's previous deps wholesale so conditional branches self-heal
-// (`a ? $.x : $.y` re-subscribes as it flips). A write then answers "who
-// cares?" from the index instead of walking the world.
-//
-// Granularity is deliberately root-key only — the same granularity as
-// state.js's changedProps. Recording is active ONLY inside a window: app
-// code (handlers, boot scripts, intervals) never tracks, and the inactive
-// path is a single null check.
-
-// Stack of open windows — nesting is tolerated (a subscriber's eval that
-// transitively evaluates another registers each read against the window that
-// was open when it happened), though engine call sites keep windows tight
-// around single evaluations.
 let windows = [];
 let active = null;
 
-// rootKey → Set<subscriber>
 const keyIndex = new Map();
-// Conservative bucket: subscribers whose evaluation read NO tracked key at
-// all (module-level caches, Date.now(), Object.keys($) enumeration). Can't
-// prove what they depend on, so they re-evaluate on every flush — the same
-// contract the walk's "no known state key ⇒ affected" check gives today.
 const alwaysSubs = new Set();
-// subscriber → its committed dep Set (empty Set = scope-only, owned by its
-// iteration's diff; absent = never tracked/unsubscribed)
 const subDeps = new Map();
 
-// Open a window for `sub`. `skipKeys` names the scope-alias keys of the
-// evaluation state (loop `item`/`index` overlays) — reads of those are the
-// row's own scope, owned by the iteration's diff lifecycle, so they mark the
-// window scope-touched instead of subscribing.
 export const beginTracking = (sub, skipKeys = null) => {
   active = { sub, skipKeys, reads: new Set(), absent: new Set(), sawScope: false };
   windows.push(active);
@@ -58,23 +26,13 @@ const dropFromBuckets = (sub, deps) => {
   }
 };
 
-
 const commit = ({ sub, reads, absent, sawScope }) => {
   const prev = subDeps.get(sub);
   if (prev) dropFromBuckets(sub, prev);
   alwaysSubs.delete(sub);
 
-  // Only LIVE reads count toward "this subscriber has provable deps" — an
-  // eval that read no present state key keeps the walk's re-evaluate-on-any-
-  // flush contract even when absent identifiers were seen (they may be plain
-  // globals forever). Scope-only evals stay out of the always-bucket: the
-  // row's iteration is subscribed and owns the row.
   if (reads.size === 0 && !sawScope) alwaysSubs.add(sub);
 
-  // Absent identifiers still index: if the key is ever CREATED, that flush
-  // must select this subscriber — the walk got this by token-matching against
-  // the NEW state's key set every cycle. Same for delete-then-recreate: the
-  // post-delete re-eval keeps the key as an absent dep.
   const deps = absent.size === 0 ? reads : new Set([...reads, ...absent]);
   for (const key of deps) {
     let bucket = keyIndex.get(key);
@@ -84,14 +42,8 @@ const commit = ({ sub, reads, absent, sawScope }) => {
   subDeps.set(sub, deps);
 };
 
-// Whether a tracking window is open — state.js's get trap consults this so
-// its own-key presence test (recordRead vs recordAbsentRead) only runs while
-// an evaluation is actually being tracked.
 export const isTracking = () => active !== null;
 
-// The single recording entry point — called from state.js's get trap,
-// evalInScope's parameter resolution, dollarFor's snapshot wrapper, and
-// createScopedState's global fallthrough. One null check when inactive.
 export const recordRead = (key) => {
   if (active === null || typeof key !== 'string') return;
   if (active.skipKeys !== null && active.skipKeys.has(key)) {
@@ -101,10 +53,6 @@ export const recordRead = (key) => {
   active.reads.add(key);
 };
 
-// A read that MISSED the state (identifier absent at evaluation time —
-// evalInScope's global fallback, dollarFor's non-key miss). Indexed so the
-// key's later creation dispatches this subscriber, but not counted as a live
-// dep — see commit.
 export const recordAbsentRead = (key) => {
   if (active === null || typeof key !== 'string') return;
   if (active.skipKeys !== null && active.skipKeys.has(key)) {
@@ -114,8 +62,6 @@ export const recordAbsentRead = (key) => {
   active.absent.add(key);
 };
 
-// Union of subscribers for a set of changed root keys, plus the conservative
-// always-bucket. Callers filter liveness (anchor.isConnected) at use time.
 export const subscribersOf = (keys) => {
   const out = new Set(alwaysSubs);
   for (const key of keys) {
@@ -127,10 +73,6 @@ export const subscribersOf = (keys) => {
 
 export const depsOf = (sub) => subDeps.get(sub);
 
-// Force a subscriber into the conservative always-bucket. Batch/compiled
-// iterations use this: their row HTML is produced by a compiled function
-// closing over every state key, so "re-evaluate on any change" is exactly
-// the walk's contract for them (the identical-HTML guard absorbs no-ops).
 export const markAlways = (sub) => {
   const prev = subDeps.get(sub);
   if (prev) dropFromBuckets(sub, prev);
@@ -145,19 +87,12 @@ export const unsubscribe = (sub) => {
   subDeps.delete(sub);
 };
 
-// Drop every subscriber whose anchor node has left the document. Called on
-// teardown batches (mutation removals, iteration row release, branch
-// unmount) — O(subscribers), same cost class as the manifest sweep.
 export const pruneDisconnected = () => {
   for (const sub of subDeps.keys()) {
     if (sub.anchor && !sub.anchor.isConnected) unsubscribe(sub);
   }
 };
 
-// Called at the top of a state flush with the changed root keys. Returns the
-// dirty set — every live subscriber of those keys plus the conservative
-// always-bucket. Dead subscribers found here unsubscribe on the spot (the
-// lazy self-prune).
 export const beginFlush = (changedKeys) => {
   const dirty = new Set();
   for (const sub of subscribersOf(changedKeys)) {

package/runtime/utils.js

@@ -2,22 +2,10 @@ import { THIS_PROP_REGEX } from './constants.js';
 import { recordRead, recordAbsentRead } from './tracking.js';
 import { reportEvalError } from './debug.js';
 
-// Fast incrementing counter instead of expensive random hash
 let hashCounter = 0;
 export const hash = () => `_${hashCounter++}`;
 
-// Scoped-state proxy -> its precomputed key list. The affected-walk needs the
-// key set per tree node on every frame; calling Object.keys() on a scoped-state
-// proxy fires its getOwnPropertyDescriptor trap for every key — a measurable
-// combat hot spot. createScopedState records the keys here via
-// rememberScopedKeys; ownKeysOf reads them, falling back to Object.keys for
-// plain (non-scoped) states.
 const scopedKeys = new WeakMap();
-// Scoped-state proxy -> its local overlay (loop aliases item/index + any parent
-// aliases). affected's iteration descent rebuilds a plain merged snapshot per
-// instance; spreading the proxy to recover the aliases fires its traps over
-// every global key. Recording the small overlay lets the descent do a cheap
-// plain merge (`{...currentGlobals, ...overlay}`) instead.
 const scopedOverlay = new WeakMap();
 export const rememberScopedKeys = (state, keys, overlay) => {
   scopedKeys.set(state, keys);
@@ -27,16 +15,11 @@ export const rememberScopedKeys = (state, keys, overlay) => {
 export const ownKeysOf = (state) => scopedKeys.get(state) || Object.keys(state);
 export const scopedOverlayOf = (state) => scopedOverlay.get(state);
 
-// Register just the overlay for a merged PLAIN row snapshot (affected's
-// iteration descent builds those without going through createScopedState).
-// Tracking uses it to tell alias reads from global reads.
 export const rememberOverlay = (state, overlay) => {
   if (overlay) scopedOverlay.set(state, overlay);
   return state;
 };
 
-// The overlay's key set, cached per state object — the skipKeys a tracking
-// window needs so loop-alias reads don't subscribe.
 const overlayKeySets = new WeakMap();
 export const overlayKeysOf = (state) => {
   if (state === null || typeof state !== 'object') return null;
@@ -50,33 +33,11 @@ export const overlayKeysOf = (state) => {
   return set;
 };
 
-// The live root reactive proxy, wired once at boot by index.js. Used ONLY to
-// reach the root's non-enumerable helper methods (`$.unsafe`, `$.on`, …) — NOT
-// for state reads.
 let rootProxy = null;
 export const setRootState = (proxy) => { rootProxy = proxy; };
 
-// Resolve the `$` identifier for an expression. `$` must read from the SAME
-// state object the diff cycle is evaluating — affected.js / iterate.js compare
-// an expression's value against an old snapshot and a new snapshot, so binding
-// `$` to the live root instead would make both reads identical and defeat
-// change detection (the whole reactivity engine). So state reads stay on the
-// passed `state`.
-//
-// The catch: the root's reserved methods (`unsafe`, `on`, `reconcile`, …) are
-// non-enumerable and don't survive the plain `{...state}` snapshots, so a
-// plain snapshot can't reach `$.unsafe`. Wrap such a state in a thin proxy that
-// serves its own keys (snapshot reads, fully diffable) and falls back to the
-// live root only for keys it lacks (the helper methods). Scoped states already
-// delegate to the live root (their target is `$`), so they need no wrapper.
 const dollarCache = new WeakMap();
-const RESERVED_PROBE = 'unsafe'; // reserved method present on root-backed states, absent on plain snapshots
-// The fallback serves ONLY the root's non-enumerable helper methods. A state
-// key that is merely missing from this snapshot must read as undefined — the
-// old/new snapshot diff depends on it. Letting it leak through to the live
-// root would make both sides of the diff read the same current value (e.g. a
-// component state bucket registered mid-cycle), silently defeating change
-// detection.
+const RESERVED_PROBE = 'unsafe';
 const rootHelper = (k) => {
   const desc = Object.getOwnPropertyDescriptor(rootProxy, k);
   return desc && !desc.enumerable;
@@ -86,10 +47,6 @@ const dollarFor = (state) => {
   let wrapped = dollarCache.get(state);
   if (!wrapped) {
     wrapped = new Proxy(state, {
-      // A `$.key` read on a plain snapshot never touches the live proxy, so
-      // the tracking trap can't see it — record it here. The helper fallback
-      // isn't a state read; a genuine miss records absent-tier so the key's
-      // later creation dispatches this subscriber.
       get: (t, k) =>
         k in t ? (recordRead(k), t[k]) : rootHelper(k) ? rootProxy[k] : (recordAbsentRead(k), undefined),
       has: (t, k) => k in t || rootHelper(k),
@@ -99,25 +56,10 @@ const dollarFor = (state) => {
   return wrapped;
 };
 
-// Function compilation cache: avoids creating new Function() for repeated
-// expressions. Keyed by the CANONICALIZED expression alone — params derive
-// from the expression's own free identifiers (state-first, live global
-// fallback at call time), and per-mount component ids (`_cN`) canonicalize
-// into parameters — so the cache is bounded by the app's distinct template
-// expressions, not by state shape or mount count. The previous key included
-// the full state-key signature: every SPA navigation mints fresh `_cN` keys,
-// so each navigation recompiled every expression and left the dead entries
-// cached forever (~1,300 per navigation cycle in the game).
 const fnCache = new Map();
 export const evalCacheSize = () => fnCache.size;
 
-// Canonicalize + compile one normalized expression. One regex pass: skips
-// string literals and object-literal keys, folds `$['_cN']` and bare `_cN`
-// references into `$[__vibeCidK]` parameters, and collects every remaining
-// free identifier (minus locals declared by arrow params, reserved words,
-// and known globals) as a parameter of the compiled function.
 const compileExpression = (normalized) => {
-  // Arrow-function parameters are locally bound — never parameters of ours.
   const locals = new Set();
   normalized.replace(/\(([^()]*)\)\s*=>/g, (_, paramList) => {
     for (const p of paramList.split(',')) {
@@ -169,46 +111,24 @@ const compileExpression = (normalized) => {
     };
     fnCache.set(canonical, entry);
   }
-  // Params/cids are derived deterministically from the expression text, so a
-  // cache hit from a DIFFERENT original spelling (another mount's `_cN`)
-  // reuses the compiled fn with THIS call's ids.
   return { fn: entry.fn, params: entry.params, cids };
 };
 
-// Built-ins and reserved words that must NEVER be pre-declared as `var`
-// inside a compiled expression — they're either real globals we want to
-// reach, or JS keywords that would be a SyntaxError to shadow.
 const EVAL_IDENT_EXCLUDE = new Set([
-  // Primitive literals / special identifiers
   'true', 'false', 'null', 'undefined', 'NaN', 'Infinity', 'this',
-  // JS reserved words (shadowing any of these is a SyntaxError) — plus
-  // `arguments`/`eval`, which are legal identifiers but illegal PARAMETER
-  // names in strict mode.
   'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger',
   'default', 'delete', 'do', 'else', 'export', 'extends', 'finally',
   'for', 'function', 'if', 'import', 'in', 'instanceof', 'let', 'new',
   'of', 'return', 'super', 'switch', 'throw', 'try', 'typeof', 'var',
   'void', 'while', 'with', 'yield', 'async', 'await', 'arguments', 'eval',
-  // Common runtime globals authors reach for
   'Math', 'Array', 'Object', 'String', 'Number', 'Boolean', 'Date',
   'JSON', 'RegExp', 'Error', 'Map', 'Set', 'WeakMap', 'WeakSet',
   'Promise', 'Symbol', 'parseInt', 'parseFloat', 'isNaN', 'isFinite',
   'window', 'document', 'console', 'globalThis',
 ]);
 
-// Match free identifiers (not property accesses like `obj.foo` or keys
-// inside strings). The `(?<![.\w$'"])` lookbehind skips tokens preceded
-// by a dot (property access), an identifier char (mid-identifier), or
-// a quote (inside a string literal).
 const FREE_IDENT_REGEX = /(?<![.\w$'"])[a-zA-Z_$][\w$]*/g;
 
-// Resolve a global identifier through the SCOPE CHAIN, not the globalThis
-// object — top-level let/const/class helpers in classic scripts live in the
-// global declarative record, which `globalThis[p]` can't see. A cached
-// per-identifier probe compiled at global scope reaches both records with
-// the typeof-guard the compiled expressions themselves used pre-3.0.0.
-// `p` is always a regex-validated non-reserved identifier (compileExpression
-// filters keywords via EVAL_IDENT_EXCLUDE), so the probe source is inert.
 const globalProbeCache = new Map();
 const readGlobal = (p) => {
   let probe = globalProbeCache.get(p);
@@ -219,46 +139,25 @@ const readGlobal = (p) => {
   return probe();
 };
 
-// Evaluate expression in the context of state
-// Handles @[this.property] for component state and @[property] for global state
 export const evalInScope = (expr, state, element = null) => {
   try {
-    // Normalize whitespace - collapse newlines/spaces to single space (resilient to IDE formatting)
     let normalized = expr.replace(/\s+/g, ' ').trim();
 
-    // If expression contains 'this.', replace with component state path
     if (normalized.includes('this.') && element) {
       const componentId = findComponentIdForElement(element);
       if (componentId) {
-        // Replace this.property with $['componentId'].property
         normalized = normalized.replace(THIS_PROP_REGEX, `$['${componentId}'].$1`);
       }
     }
 
     const { fn, params, cids } = compileExpression(normalized);
 
-    // Build values matching the compiled parameter order: the expression's
-    // free identifiers, the canonicalized component-id strings, and `$` via
-    // dollarFor — the same state for reads (so old/new diffing works), with
-    // helper-method fallback to the live root. An identifier resolves state-
-    // first by ENUMERABLE OWN KEY presence — ownKeysOf, the exact reach the
-    // old key-signature params had: snapshots and scoped states expose their
-    // keys there (a key holding undefined still shadows a global), while the
-    // root's non-enumerable helpers ($.on, $.unsafe) stay invisible — a state
-    // key named `on` must never resolve the hook method. `in` would see
-    // those helpers and the prototype chain; ownKeysOf is computed per call,
-    // so a live root proxy mutated between evals stays accurate. Everything
-    // else resolves through the scope-chain probe (readGlobal) and records
-    // an absent-tier read, so the key's later creation re-renders this
-    // binding instead of being silently missed.
     const stateObj = state == null ? {} : state;
     const values = new Array(params.length + cids.length + 1);
     const keys = params.length ? ownKeysOf(stateObj) : null;
     let v = 0;
     for (let i = 0; i < params.length; i++) {
       const p = params[i];
-      // State-first resolution IS a root-key read — record it for the open
-      // tracking window (snapshot evals never reach the proxy trap).
       values[v++] = keys.includes(p) ? (recordRead(p), stateObj[p]) : (recordAbsentRead(p), readGlobal(p));
     }
     for (let i = 0; i < cids.length; i++) values[v++] = cids[i];
@@ -266,15 +165,12 @@ export const evalInScope = (expr, state, element = null) => {
 
     const result = fn(...values);
 
-    // If result is undefined and we're accessing a component property, try case-insensitive match
-    // This handles HTML lowercasing attribute names like @[this.iconName] -> @[this.iconname]
     if (result === undefined) {
       const componentMatch = normalized.match(/\$\['([^']+)'\]\.(\w+)/);
       if (componentMatch) {
         const [, componentId, propName] = componentMatch;
         const componentState = state[componentId];
         if (componentState) {
-          // Try case-insensitive property lookup
           const actualKey = Object.keys(componentState).find(k => k.toLowerCase() === propName.toLowerCase());
           if (actualKey) {
             return componentState[actualKey];
@@ -290,32 +186,14 @@ export const evalInScope = (expr, state, element = null) => {
   }
 };
 
-// Walk a dotted path against a state-like object, falling back to
-// case-insensitive key matching at each segment. Used by name-binding
-// hydration (clone + batch) to recover camelCase property names that the
-// HTML parser lowercased — `<icon @[fx.convertsIcon]>` arrives at the
-// runtime as `@[fx.convertsicon]`, which doesn't match `convertsIcon` on
-// `fx`. Bails on bracket/call expressions because those need a real
-// evaluator (and `evalInScope` already handled them).
 export const resolveCaseInsensitivePath = (state, path) => {
   if (path.includes('[')) return undefined;
-  // Component prop substitution wraps the source in grouping parens, e.g.
-  // `props.element` inside a reused component becomes `(equipmentDetailProps).element`.
-  // The HTML parser lowercases name-binding attribute names, so strip the grouping
-  // parens to recover a plain dotted path; bail if anything but identifiers + dots
-  // survives (a real function call like `selectedEquipProps(uuid)` can't be recovered).
   if (path.includes('(')) {
     path = path.replace(/[()]/g, '');
     if (!/^[A-Za-z_$][\w$]*(\.[A-Za-z_$][\w$]*)*$/.test(path)) return undefined;
   }
   let segments = path.split('.');
 
-  // Resolve the root against the SAME scope evalInScope reaches, in its order:
-  // the diff state (including scoped loop aliases — see ownKeysOf below), then
-  // globals. A name-binding inside an iteration reads its props from a global
-  // stash — `window.__vibe.iterProps._p0.statusKey` — so a state-only walk can
-  // never reach it, and the camelCase leaf the parser lowercased stays lost
-  // (the status-chip gray-icon parity bug: resolved in compiled, not runtime).
   const root = segments[0];
   const rootInState =
     state != null &&
@@ -335,15 +213,11 @@ export const resolveCaseInsensitivePath = (state, path) => {
 
   for (const seg of segments) {
     if (current == null) return undefined;
-    // Direct first — handles proxies (scoped iteration state) and plain objects.
     if (Reflect.has(Object(current), seg)) {
       current = current[seg];
       continue;
     }
     if (typeof current !== 'object' && typeof current !== 'function') return undefined;
-    // Read keys from the SAME source evalInScope does (ownKeysOf), so a scoped
-    // loop alias — present in the proxy's precomputed key list but hidden from
-    // Object.keys/Reflect.has — resolves here too.
     const ci = ownKeysOf(current).find((k) => k.toLowerCase() === seg.toLowerCase());
     if (!ci) return undefined;
     current = current[ci];
@@ -351,26 +225,17 @@ export const resolveCaseInsensitivePath = (state, path) => {
   return current;
 };
 
-// Helper to find component ID for an element
-// Walks up DOM tree to find nearest component wrapper
 export const findComponentIdForElement = (element) => {
   if (!element || !element.closest) return null;
 
   const wrapper = element.closest('[data-vibe-component-id]');
   if (wrapper) return wrapper.getAttribute('data-vibe-component-id');
-  // Detached fallback: cloned-but-not-yet-attached subtrees (iteration row
-  // construction in `initializeBlock` parses + hydrates inside a fresh
-  // parseContainer before insertion). Walk back to the root and consult
-  // _vibeComponentId, which iteration code can stash on the parseContainer
-  // when it knows the row's owning component up front.
   let root = element;
   while (root.parentNode) root = root.parentNode;
   if (root._vibeComponentId) return root._vibeComponentId;
   return null;
 };
 
-// Helper to resolve this.property paths to componentId.property
-// Used for component-scoped iterations, conditionals, etc.
 export const resolveThisPath = (path, element) => {
   if (!path.startsWith('this.')) {
     return path;
@@ -385,28 +250,21 @@ export const resolveThisPath = (path, element) => {
   return path;
 };
 
-// Instead of using lodash-es as a dependency, we run our own deepMerge (mergeWith in lodash)
 export const deepMerge = (target, source) => {
-  // Handle null/undefined
   if (source == null) return target;
   if (target == null) return source;
 
-  // If source is not an object, return it
   if (typeof source !== 'object') return source;
 
-  // If source is an array, replace target array (don't merge arrays)
   if (Array.isArray(source)) return source;
 
-  // Clone target to avoid mutation
   const result = { ...target };
 
-  // Merge each property from source
   for (const key in source) {
     if (source.hasOwnProperty(key)) {
       const targetValue = result[key];
       const sourceValue = source[key];
 
-      // If both are objects (but not arrays), merge recursively
       if (
         targetValue != null &&
         sourceValue != null &&
@@ -417,7 +275,6 @@ export const deepMerge = (target, source) => {
       ) {
         result[key] = deepMerge(targetValue, sourceValue);
       } else {
-        // Otherwise, replace with source value (handles arrays and primitives)
         result[key] = sourceValue;
       }
     }