rip-lang 3.15.4 → 3.16.1

package/src/components.js

@@ -17,7 +17,7 @@ import { HTML_TAGS, SVG_TAGS, TEMPLATE_TAGS } from './generated/dom-tags.js';
 const BIND_PREFIX = '__bind_';
 const BIND_SUFFIX = '__';
 
-const LIFECYCLE_HOOKS = new Set(['beforeMount', 'mounted', 'updated', 'beforeUnmount', 'unmounted', 'onError']);
+const LIFECYCLE_HOOKS = new Set(['beforeMount', 'mounted', 'beforeUnmount', 'unmounted', 'onError']);
 const BOOLEAN_ATTRS = new Set([
   'disabled', 'hidden', 'readonly', 'required', 'checked', 'selected',
   'autofocus', 'autoplay', 'controls', 'loop', 'muted', 'multiple',
@@ -79,6 +79,17 @@ function getMemberType(target) {
   return null;
 }
 
+/**
+ * Extract `?` optionality flag from s-expression target node.
+ * Set by the lexer as `.optional` on the prop-name String wrapper when
+ * the source wrote `@label?:: T` or similar.
+ */
+function getMemberOptional(target) {
+  if (target instanceof String && target.optional) return true;
+  if (Array.isArray(target) && target[2] instanceof String && target[2].optional) return true;
+  return false;
+}
+
 // ============================================================================
 // Prototype Installation
 // ============================================================================
@@ -575,9 +586,52 @@ export function installComponentSupport(CodeEmitter, Lexer) {
   const _transferMeta = (from, to) => {
     if (!(from instanceof String)) return to;
     const s = new String(to);
-    if (from.predicate) s.predicate = true;
-    if (from.await) s.await = true;
-    return (s.predicate || s.await) ? s : to;
+    if (from.optional) s.optional = true;
+    if (from.bang) s.bang = true;
+    return (s.optional || s.bang) ? s : to;
+  };
+
+  // Inject `// @rip-src:N` markers onto each statement line of a method body
+  // emitted into a component stub.  The emitter doesn't carry source-map data
+  // for stub method bodies, so without explicit markers, typecheck.js falls
+  // back to linear gap-fill interpolation which silently misaligns when stub
+  // sizes change.  Walks the body s-expression to recover statement source
+  // lines and pairs them with the rendered body's non-trivial lines.
+  proto.addBodyRipSrcMarkers = function(bodyCode, bodySexpr) {
+    if (typeof bodyCode !== 'string' || !bodyCode) return bodyCode;
+    const stmts = Array.isArray(bodySexpr) && bodySexpr[0] === 'block'
+      ? bodySexpr.slice(1)
+      : (Array.isArray(bodySexpr) ? [bodySexpr] : []);
+    if (stmts.length === 0) return bodyCode;
+    const getLoc = (s) => {
+      if (s == null) return null;
+      if (!Array.isArray(s)) return s?.loc?.r ?? null;
+      if (s.loc?.r) return s.loc.r;
+      if (s[0]?.loc?.r) return s[0].loc.r;
+      for (const child of s) {
+        if (child?.loc?.r) return child.loc.r;
+        if (Array.isArray(child)) {
+          const l = getLoc(child);
+          if (l != null) return l;
+        }
+      }
+      return null;
+    };
+    const srcLines = stmts.map(getLoc);
+    if (srcLines.every(l => l == null)) return bodyCode;
+    const lines = bodyCode.split('\n');
+    let si = 0;
+    for (let i = 0; i < lines.length && si < srcLines.length; i++) {
+      const trimmed = lines[i].trim();
+      if (!trimmed) continue;
+      if (trimmed === '{' || trimmed === '}' || trimmed.startsWith('//')) continue;
+      if (lines[i].includes('@rip-src:')) { si++; continue; }
+      if (srcLines[si] != null) {
+        lines[i] = `${lines[i]} // @rip-src:${srcLines[si]}`;
+      }
+      si++;
+    }
+    return lines.join('\n');
   };
 
   proto.transformComponentMembers = function(sexpr, localScope = new Set()) {
@@ -707,31 +761,35 @@ export function installComponentSupport(CodeEmitter, Lexer) {
           reactiveMembers.add(varName);
         }
       } else if (op === '.' && stmt[1] === 'this' && getMemberName(stmt)) {
-        // Required prop: (. this name) — no default value
+        // Bare prop form: `(. this name)` — no default value.
+        // `@name`     → required (caller must pass)
+        // `@name?`    → optional (caller may omit; value will be undefined)
+        // `@name?:: T`→ optional, typed
         const varName = (typeof stmt[2] === 'string' || stmt[2] instanceof String) ? stmt[2].valueOf() : null;
         if (varName) {
-          stateVars.push({ name: varName, value: undefined, isPublic: true, type: stmt[2]?.type || null, required: true });
+          const optional = getMemberOptional(stmt);
+          stateVars.push({ name: varName, value: undefined, isPublic: true, type: stmt[2]?.type || null, required: !optional, optional, srcLine: stmt.loc?.r });
           memberNames.add(varName);
           reactiveMembers.add(varName);
         }
       } else if (op === 'state') {
         const varName = getMemberName(stmt[1]);
         if (varName) {
-          stateVars.push({ name: varName, value: stmt[2], isPublic: isPublicProp(stmt[1]), type: getMemberType(stmt[1]) });
+          stateVars.push({ name: varName, value: stmt[2], isPublic: isPublicProp(stmt[1]), type: getMemberType(stmt[1]), optional: getMemberOptional(stmt[1]), srcLine: stmt.loc?.r });
           memberNames.add(varName);
           reactiveMembers.add(varName);
         }
       } else if (op === 'computed') {
         const varName = getMemberName(stmt[1]);
         if (varName) {
-          derivedVars.push({ name: varName, expr: stmt[2], type: getMemberType(stmt[1]) });
+          derivedVars.push({ name: varName, expr: stmt[2], type: getMemberType(stmt[1]), srcLine: stmt.loc?.r });
           memberNames.add(varName);
           reactiveMembers.add(varName);
         }
       } else if (op === 'readonly') {
         const varName = getMemberName(stmt[1]);
         if (varName) {
-          readonlyVars.push({ name: varName, value: stmt[2], isPublic: isPublicProp(stmt[1]), type: getMemberType(stmt[1]) });
+          readonlyVars.push({ name: varName, value: stmt[2], isPublic: isPublicProp(stmt[1]), type: getMemberType(stmt[1]), optional: getMemberOptional(stmt[1]), srcLine: stmt.loc?.r });
           memberNames.add(varName);
         }
       } else if (op === '=') {
@@ -745,7 +803,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
               methods.push({ name: varName, func: val });
               memberNames.add(varName);
             } else {
-              stateVars.push({ name: varName, value: val, isPublic: isPublicProp(stmt[1]) });
+              stateVars.push({ name: varName, value: val, isPublic: isPublicProp(stmt[1]), srcLine: stmt.loc?.r });
               memberNames.add(varName);
               reactiveMembers.add(varName);
             }
@@ -784,6 +842,14 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     for (const { name, isPublic } of stateVars) if (isPublic) publicPropNames.add(name);
     for (const { name, isPublic } of readonlyVars) if (isPublic) publicPropNames.add(name);
 
+    // When extends-ing a tag, expose `@rest` as a reactive view of caller props
+    // not consumed by declared @props. Reads (e.g. `@rest.disabled`) track via
+    // `this.rest.value`; `_setRestProp` mutates and calls `.touch()` to notify.
+    if (inheritsTag) {
+      memberNames.add('rest');
+      reactiveMembers.add('rest');
+    }
+
     // Save and set component context
     const prevComponentMembers = this.componentMembers;
     const prevReactiveMembers = this.reactiveMembers;
@@ -796,24 +862,44 @@ export function installComponentSupport(CodeEmitter, Lexer) {
 
     // --- Type-check stub: typed member declarations + body expressions, no DOM ---
     if (this.options.stubComponents) {
-      // Inline type suffix expansion (mirrors types.js expandSuffixes)
-      const expandType = (t) => t ? t.replace(/::/g, ':')
-        .replace(/(\w+(?:<[^>]+>)?)\?\?/g, '$1 | null | undefined')
-        .replace(/(\w+(?:<[^>]+>)?)\?(?![.:])/g, '$1 | undefined')
-        .replace(/(\w+(?:<[^>]+>)?)\!/g, 'NonNullable<$1>') : null;
+      // Strip Rip's `::` annotation sigil to TypeScript's `:` separator.
+      const expandType = (t) => t ? t.replace(/::/g, ':') : null;
 
       const sl = [];
       const componentTypeParams = this._componentTypeParams || '';
       sl.push(`class ${componentTypeParams}{`);
-      sl.push('  declare _root: Element | null; declare app: any;');
+      // Injected `this` shape for every component. The compiler stays
+      // context-free; `declare app: any` and `declare router: any` are
+      // rewritten by typecheck.js to typed shapes when the project anchor /
+      // stash file is discoverable. `params`, `query`, `children`, and the
+      // lifecycle hooks are stable across all projects, so they're typed
+      // here directly. User-defined hooks are emitted later as real methods;
+      // skip the optional-signature declaration for those names to avoid
+      // overload-optionality mismatches.
+      // Combine all injected declarations onto a single line to preserve the
+      // stub's prior line count.  Source-map gap-fill interpolates linearly
+      // between marker lines (e.g. between @rip-src markers from `@count`
+      // and a downstream method), so adding stub header lines pushes the
+      // method bodies past where interpolation expects them — breaking
+      // @ts-expect-error injection.  Keeping a single header line preserves
+      // the relative offsets.
+      sl.push('  declare _root: Element | null; declare app: any; declare router: any; declare params: Record<string, string>; declare query: URLSearchParams; declare children: any;');
+      const userHookNames = new Set(lifecycleHooks.map(h => h.name));
+      const hookDecls = [];
+      if (!userHookNames.has('beforeMount'))   hookDecls.push('beforeMount?(): void;');
+      if (!userHookNames.has('mounted'))       hookDecls.push('mounted?(): void;');
+      if (!userHookNames.has('beforeUnmount')) hookDecls.push('beforeUnmount?(): void;');
+      if (!userHookNames.has('unmounted'))     hookDecls.push('unmounted?(): void;');
+      if (!userHookNames.has('onError'))       hookDecls.push('onError?(err: { status?: number; message?: string; error?: Error; path?: string }): void;');
+      if (hookDecls.length) sl.push('  ' + hookDecls.join(' '));
       sl.push('  emit(_name: string, _detail?: any): void {}');
 
       // Constructor — typed props for public state/readonly (matches DTS)
       const propEntries = [];
-      for (const { name, type, isPublic, required } of stateVars) {
+      for (const { name, type, isPublic, required, optional } of stateVars) {
         if (!isPublic) continue;
         const ts = expandType(type);
-        const opt = required ? '' : '?';
+        const opt = (optional ?? !required) ? '?' : '';
         propEntries.push(`${name}${opt}: ${ts || 'any'}`);
         // Two-way binding: allow parent to pass Signal<T> for this prop
         propEntries.push(`__bind_${name}__?: Signal<${ts || 'any'}>`);
@@ -824,7 +910,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         propEntries.push(`${name}?: ${ts || 'any'}`);
       }
       {
-        const hasRequired = propEntries.length > 0 && stateVars.some(v => v.isPublic && v.required);
+        const hasRequired = propEntries.length > 0 && stateVars.some(v => v.isPublic && v.required && !v.optional);
         const propsOpt = hasRequired ? '' : '?';
         let propsType = propEntries.length > 0 ? `{${propEntries.join('; ')}}` : '{}';
         if (inheritsTag) propsType += ` & __RipProps<'${inheritsTag}'>`;
@@ -842,9 +928,18 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       };
 
       // Property declarations (declare avoids definite-assignment errors)
-      for (const { name, type, value } of stateVars) {
+      for (const { name, type, value, optional, srcLine } of stateVars) {
         const ts = expandType(type) || inferLiteralType(value);
-        sl.push(ts ? `  declare ${name}: Signal<${ts}>;` : `  declare ${name}: Signal<any>;`);
+        // Optional prop with no default: field can be undefined at runtime
+        // (we don't synthesize a `?? null` fallback below), so the Signal's
+        // payload type must include undefined.
+        const optNoDefault = optional && value === undefined;
+        const wrapped = ts ? (optNoDefault ? `${ts} | undefined` : ts) : null;
+        const marker = srcLine != null ? ` // @rip-src:${srcLine}` : '';
+        sl.push((wrapped ? `  declare ${name}: Signal<${wrapped}>;` : `  declare ${name}: Signal<any>;`) + marker);
+      }
+      if (inheritsTag) {
+        sl.push(`  declare rest: Signal<__RipProps<'${inheritsTag}'>>;`);
       }
       for (const { name, type, value } of readonlyVars) {
         const ts = expandType(type) || inferLiteralType(value);
@@ -865,19 +960,21 @@ export function installComponentSupport(CodeEmitter, Lexer) {
 
       // _init body — readonly, state, computed assignments (skip accepted/offered)
       sl.push('  _init(props) {');
-      for (const { name, value, isPublic } of readonlyVars) {
+      for (const { name, value, isPublic, srcLine } of readonlyVars) {
         const val = this.emitInComponent(value, 'value');
-        sl.push(isPublic ? `    this.${name} = props.${name} ?? ${val};` : `    this.${name} = ${val};`);
+        const marker = srcLine != null ? ` // @rip-src:${srcLine}` : '';
+        sl.push((isPublic ? `    this.${name} = props.${name} ?? ${val};` : `    this.${name} = ${val};`) + marker);
       }
-      for (const { name, value, isPublic, required, type } of stateVars) {
-        if (isPublic && required) {
-          sl.push(`    this.${name} = __state(props.__bind_${name}__ ?? props.${name});`);
+      for (const { name, value, isPublic, required, type, srcLine } of stateVars) {
+        const marker = srcLine != null ? ` // @rip-src:${srcLine}` : '';
+        if (isPublic && (required || value === undefined)) {
+          sl.push(`    this.${name} = __state(props.__bind_${name}__ ?? props.${name});` + marker);
         } else if (isPublic) {
           const val = this.emitInComponent(value, 'value');
-          sl.push(`    this.${name} = __state(props.__bind_${name}__ ?? props.${name} ?? ${val});`);
+          sl.push(`    this.${name} = __state(props.__bind_${name}__ ?? props.${name} ?? ${val});` + marker);
         } else {
           const val = this.emitInComponent(value, 'value');
-          sl.push(`    this.${name} = __state(${val});`);
+          sl.push(`    this.${name} = __state(${val});` + marker);
         }
       }
 
@@ -886,11 +983,16 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         const isAsync = this.containsAwait(effectBody) ? 'async ' : '';
         if (this.is(effectBody, 'block')) {
           const transformed = this.transformComponentMembers(effectBody);
-          const body = this.emitFunctionBody(transformed, [], true);
+          // sideEffectOnly: false so the body's last expression is
+          // returned. The reactive runtime treats a returned function as
+          // the effect's cleanup — that's how '~> ARIA.bindPopover ...'
+          // gets its disposer registered. Disposer is also auto-tracked
+          // via __getCurrentComponent for unmount cleanup.
+          const body = this.emitFunctionBody(transformed);
           sl.push(`    __effect(${isAsync}() => ${body});`);
         } else {
           const effectCode = this.emitInComponent(effectBody, 'value');
-          sl.push(`    __effect(${isAsync}() => { ${effectCode}; });`);
+          sl.push(`    __effect(${isAsync}() => { return ${effectCode}; });`);
         }
       }
       sl.push('  }');
@@ -956,7 +1058,12 @@ export function installComponentSupport(CodeEmitter, Lexer) {
           }
           const transformed = this.reactiveMembers ? this.transformComponentMembers(methodBody) : methodBody;
           const isAsync = this.containsAwait(methodBody);
-          const bodyCode = this.emitFunctionBody(transformed, params || []);
+          let bodyCode = this.emitFunctionBody(transformed, params || []);
+          // Inject @rip-src markers on each body statement line so that
+          // @ts-expect-error injection and hover/diagnostics resolve to the
+          // user's actual source line, instead of relying on linear gap-fill
+          // interpolation across the stub (which is brittle to stub size).
+          bodyCode = this.addBodyRipSrcMarkers(bodyCode, methodBody);
           sl.push(`  ${isAsync ? 'async ' : ''}${name}(${paramStr}) ${bodyCode}`);
         }
       }
@@ -968,7 +1075,8 @@ export function installComponentSupport(CodeEmitter, Lexer) {
           const paramStr = Array.isArray(params) ? params.map(p => this.formatParam(p)).join(', ') : '';
           const transformed = this.reactiveMembers ? this.transformComponentMembers(hookBody) : hookBody;
           const isAsync = this.containsAwait(hookBody);
-          const bodyCode = this.emitFunctionBody(transformed, params || []);
+          let bodyCode = this.emitFunctionBody(transformed, params || []);
+          bodyCode = this.addBodyRipSrcMarkers(bodyCode, hookBody);
           sl.push(`  ${isAsync ? 'async ' : ''}${name}(${paramStr}) ${bodyCode}`);
         }
       }
@@ -981,6 +1089,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         const sourceLines = this.options.source?.split('\n');
         const extractProps = (args) => {
           const props = [];
+          const sideExprs = [];
           for (const arg of args) {
             let obj = null;
             if (this.is(arg, 'object')) {
@@ -995,8 +1104,26 @@ export function installComponentSupport(CodeEmitter, Lexer) {
               for (let j = 1; j < obj.length; j++) {
                 const pair = obj[j];
                 const [, key, value] = pair;
-                if (typeof key === 'string' && !key.startsWith('@')) {
-                  const srcLine = pair.loc?.r ?? obj.loc?.r;
+                const srcLine = pair.loc?.r ?? obj.loc?.r;
+                // `@event` props on a component (parsed as `(. this name)`)
+                // — not part of the declared prop type, but emit the value
+                // as a bare expression so TS sees identifiers in the
+                // handler body (hover, completion, identifier resolution).
+                if (Array.isArray(key) && key[0] === '.' && key[1] === 'this') {
+                  try {
+                    const val = this.emitInComponent(value, 'value');
+                    sideExprs.push({ code: val, srcLine });
+                  } catch {}
+                  continue;
+                }
+                if (typeof key === 'string' && key.startsWith('@')) {
+                  try {
+                    const val = this.emitInComponent(value, 'value');
+                    sideExprs.push({ code: val, srcLine });
+                  } catch {}
+                  continue;
+                }
+                if (typeof key === 'string') {
                   if (key.startsWith('__bind_') && key.endsWith('__')) {
                     // Two-way binding: emit the Signal object (this.xxx), not this.xxx.value
                     const member = typeof value === 'string' && this.reactiveMembers?.has(value) ? `this.${value}` : this.emitInComponent(value, 'value');
@@ -1009,10 +1136,25 @@ export function installComponentSupport(CodeEmitter, Lexer) {
               }
             }
           }
+          props.sideExprs = sideExprs;
           return props;
         };
-        const extractIntrinsicProps = (args) => {
+        const extractIntrinsicProps = (args, tagName) => {
           const props = [];
+          // For <a href: ...>, wrap interpolated route literals (templates
+          // starting with `/...`) in __ripRoute so TS checks the dynamic
+          // template against __RipRoutes. Static literals fall through to
+          // the existing __ripEl Option-C conditional, which still gives
+          // the "Did you mean ..." hint. Variables and external URLs are
+          // left untouched.
+          const wrapHrefVal = (val) => {
+            if (tagName !== 'a') return val;
+            if (typeof val !== 'string') return val;
+            if (val.length < 2) return val;
+            if (val[0] !== '`') return val;
+            if (val[1] !== '/') return val;
+            return `__ripRoute(${val})`;
+          };
           for (const arg of args) {
             let obj = null;
             if (this.is(arg, 'object')) {
@@ -1049,7 +1191,8 @@ export function installComponentSupport(CodeEmitter, Lexer) {
                     props.push({ code: `${propName}: ${val}`, srcLine });
                   } else {
                     const val = this.emitInComponent(value, 'value');
-                    props.push({ code: `${key}: ${val}`, srcLine });
+                    const finalVal = key === 'href' ? wrapHrefVal(val) : val;
+                    props.push({ code: `${key}: ${finalVal}`, srcLine });
                   }
                 }
               }
@@ -1059,7 +1202,55 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         };
         const walkRender = (node) => {
           if (!Array.isArray(node)) return;
-          const head = node[0]?.valueOf?.() ?? node[0];
+          let head = node[0]?.valueOf?.() ?? node[0];
+
+          // Tag shorthand normalization: `button.outline` is parsed as a
+          // member-access s-expression `(. button outline)`. For render-block
+          // type-checking we want to treat it as a regular tag node with a
+          // string head `"button.outline"` so the existing intrinsic-tag
+          // logic (which splits on `[.#]`) picks it up. Without this the
+          // entire subtree (including @event handler bodies) is silently
+          // skipped from the type-check stub.
+          if (Array.isArray(head) && head[0] === '.') {
+            const parts = [];
+            const collect = (h) => {
+              if (typeof h === 'string') { parts.push(h); return true; }
+              if (Array.isArray(h) && h[0] === '.' && parts.length === 0) {
+                if (!collect(h[1])) return false;
+                if (typeof h[2] !== 'string' || !/^[\w-]+$/.test(h[2])) return false;
+                parts.push('.', h[2]);
+                return true;
+              }
+              return false;
+            };
+            if (collect(head) && parts.length >= 3 && /^[a-z][\w-]*$/.test(parts[0])) {
+              const flat = parts.join('');
+              const reshaped = [flat];
+              for (let i = 1; i < node.length; i++) reshaped.push(node[i]);
+              if (node.loc) reshaped.loc = node.loc;
+              // Carry an _astNode back-reference so emitBareIdent can attach
+              // anchors (used by recordSubMappings) on the original AST node
+              // rather than this throwaway reshape, since recordSubMappings
+              // walks the original tree.
+              reshaped._astNode = node;
+              // Strip .loc from the original tag-shorthand `(. tag class ...)`
+              // chain so collectSubExprs (used by recordSubMappings) does not
+              // anchor source identifiers (the class names) onto unrelated
+              // gen-side property accesses with the same name. The class
+              // segments (e.g. `image` in `div.image`) are CSS classes, not
+              // identifier references, and should not participate in
+              // identifier-name source-mapping heuristics.
+              const stripLoc = (h) => {
+                if (Array.isArray(h) && h[0] === '.') {
+                  if (h.loc) delete h.loc;
+                  stripLoc(h[1]);
+                }
+              };
+              stripLoc(head);
+              node = reshaped;
+              head = flat;
+            }
+          }
 
           // Object nodes are property bags (key-value pairs) — their values
           // are code expressions (event handlers, bindings, literals), not
@@ -1164,13 +1355,43 @@ export function installComponentSupport(CodeEmitter, Lexer) {
             if (CodeEmitter.GENERATORS[child]) return;
             if (child === 'null' || child === 'undefined' || child === 'true' || child === 'false') return;
             let srcLine = parentNode.loc?.r;
+            let srcCol = null;
             if (srcLine != null && sourceLines) {
-              const re = new RegExp(`\\b${child}\\b`);
+              const re = new RegExp(`\\b${child}\\b`, 'g');
               for (let ln = srcLine; ln < sourceLines.length; ln++) {
-                if (re.test(sourceLines[ln])) { srcLine = ln; break; }
+                const lineText = sourceLines[ln];
+                if (!lineText) continue;
+                let searchFrom = (ln === parentNode.loc.r) ? (parentNode.loc.c + 1) : 0;
+                re.lastIndex = searchFrom;
+                let m;
+                let found = -1;
+                while ((m = re.exec(lineText)) !== null) {
+                  // Skip tag-shorthand class/id matches like `.error`/`#id`
+                  // (e.g. the `error` in `p.error error` — the bare-ident
+                  // child is the *second* `error`, not the CSS class).
+                  const prev = m.index > 0 ? lineText[m.index - 1] : '';
+                  if (prev === '.' || prev === '#') continue;
+                  found = m.index;
+                  break;
+                }
+                if (found >= 0) {
+                  srcLine = ln;
+                  srcCol = found;
+                  break;
+                }
               }
             }
             const srcMarker = srcLine != null ? ` // @rip-src:${srcLine}` : '';
+            // Attach an anchor on the parent so collectSubExprs (used by
+            // recordSubMappings) can record a precise source-map entry for
+            // this bare identifier. Without this, source clicks/hovers on
+            // the bare ident never resolve to the generated `this.X;` /
+            // `X;` stub line, and the LSP can't route a semantic token here.
+            if (srcLine != null && srcCol != null) {
+              const anchorTarget = parentNode._astNode || parentNode;
+              if (!anchorTarget._anchors) anchorTarget._anchors = [];
+              anchorTarget._anchors.push({ name: child, origLine: srcLine, origCol: srcCol });
+            }
             if (this.componentMembers && this.componentMembers.has(child)) {
               constructions.push(`    this.${child};${srcMarker}`);
             } else if (isTextChild) {
@@ -1185,7 +1406,13 @@ export function installComponentSupport(CodeEmitter, Lexer) {
           // Bare lowercase identifiers inside a block or as children of tag nodes
           // — emit __ripEl so TS catches tag typos (e.g., slotz for slot), or
           // emit this.prop for component member text references.
-          const isTagHead = typeof head === 'string' && /^[a-z][\w-]*$/.test(head) &&
+          // Allow tag-shorthand heads like `div.image` or `button#submit` —
+          // split on `.`/`#` and check the bare tag name. Without the
+          // shorthand support here, expression children of `div.image x`
+          // were silently dropped from the type-check stub even though the
+          // lower `__ripEl` branch (which uses the same split) emitted the
+          // tag itself.
+          const isTagHead = typeof head === 'string' && /^[a-z][\w-]*(?:[.#][\w-]+)*$/.test(head) &&
               !CodeEmitter.GENERATORS[head] && TEMPLATE_TAGS.has(head.split(/[.#]/)[0]);
           if (head === 'block') {
             for (let i = 1; i < node.length; i++) emitBareIdent(node[i], node, false);
@@ -1238,10 +1465,18 @@ export function installComponentSupport(CodeEmitter, Lexer) {
                 constructions.push(`    };`);
               }
             }
+            // Emit @-event handler bodies as bare expression statements so
+            // TS can resolve identifiers inside them (hover, completion).
+            // They aren't part of the component's declared prop type.
+            if (props.sideExprs) {
+              for (const s of props.sideExprs) {
+                constructions.push(`    ${s.code};` + (s.srcLine != null ? ` // @rip-src:${s.srcLine}` : ''));
+              }
+            }
           } else if (typeof head === 'string' && !CodeEmitter.GENERATORS[head] && (TEMPLATE_TAGS.has(head.split(/[.#]/)[0]) ||
                      (/^[a-z][\w-]*$/.test(head) && node.length > 1))) {
             const tagName = head.split(/[.#]/)[0];
-            const iProps = extractIntrinsicProps(node.slice(1));
+            const iProps = extractIntrinsicProps(node.slice(1), tagName);
             const tagLine = node.loc?.r;
             const srcMarker = tagLine != null ? ` // @rip-src:${tagLine}` : '';
             if (iProps.length === 0) {
@@ -1309,7 +1544,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
 
     // State variables (__state handles signal passthrough)
     for (const { name, value, isPublic, required } of stateVars) {
-      if (isPublic && required) {
+      if (isPublic && (required || value === undefined)) {
         lines.push(`    this.${name} = __state(props.__bind_${name}__ ?? props.${name});`);
       } else if (isPublic) {
         const val = this.emitInComponent(value, 'value');
@@ -1330,6 +1565,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         lines.push("      if (!__k.startsWith('__bind_')) this._rest[__k] = props[__k];");
       }
       lines.push('    }');
+      lines.push('    this.rest = __state(this._rest);');
     }
 
     // Computed (derived)
@@ -1349,17 +1585,17 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       lines.push(`    setContext('${name}', this.${name});`);
     }
 
-    // Effects
+    // Effects (see comment on the parallel block above)
     for (const effect of effects) {
       const effectBody = effect[2];
       const isAsync = this.containsAwait(effectBody) ? 'async ' : '';
       if (this.is(effectBody, 'block')) {
         const transformed = this.transformComponentMembers(effectBody);
-        const body = this.emitFunctionBody(transformed, [], true);
+        const body = this.emitFunctionBody(transformed);
         lines.push(`    __effect(${isAsync}() => ${body});`);
       } else {
         const effectCode = this.emitInComponent(effectBody, 'value');
-        lines.push(`    __effect(${isAsync}() => { ${effectCode}; });`);
+        lines.push(`    __effect(${isAsync}() => { return ${effectCode}; });`);
       }
     }
 
@@ -1371,6 +1607,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       lines.push('    this._rest || (this._rest = {});');
       lines.push('    if (value == null) delete this._rest[key];');
       lines.push('    else this._rest[key] = value;');
+      lines.push('    this.rest.touch();');
       lines.push('    this._applyInheritedProp(this._inheritedEl, key, value);');
       lines.push('  }');
       lines.push('  _applyRestToInheritedEl() {');
@@ -1539,6 +1776,8 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     this._loopVarStack = [];
     this._factoryMode = false;
     this._factoryVars = null;
+    this._renderLocalScope = new Set();
+    this._renderTopLocals = new Set(); // class-mode (top-level _create) hoisted lets
     this._fragChildren = new Map();
     this._pendingAutoWire = false;
     this._autoWireEl = null;
@@ -1547,25 +1786,52 @@ export function installComponentSupport(CodeEmitter, Lexer) {
 
     const statements = this.is(body, 'block') ? body.slice(1) : [body];
 
+    // Pre-count renderable (non-binding) statements so the single-renderable
+    // optimization survives the presence of leading binding statements like
+    // `code = expr`. Bindings are emitted into _createLines as JS but
+    // produce no DOM child to append.
+    const renderableCount = statements.reduce(
+      (n, s) => n + (this._isRenderBinding(s) ? 0 : 1), 0);
+
     let rootVar;
     if (statements.length === 0 || (statements.length === 1 && statements[0] === 'null')) {
       rootVar = 'null';
-    } else if (statements.length === 1) {
+    } else if (renderableCount === 0) {
+      // All statements are bindings — emit them and return a comment placeholder
+      for (const stmt of statements) this.emitNode(stmt);
+      rootVar = this.newElementVar('empty');
+      this._createLines.push(`${rootVar} = document.createComment('');`);
+    } else if (renderableCount === 1) {
       this._pendingAutoWire = !!this._autoEventHandlers;
-      rootVar = this.emitNode(statements[0]);
+      let onlyRenderable = null;
+      for (const stmt of statements) {
+        const v = this.emitNode(stmt);
+        if (v != null) onlyRenderable = v;
+      }
       this._pendingAutoWire = false;
+      rootVar = onlyRenderable;
     } else {
       rootVar = this.newElementVar('frag');
       this._createLines.push(`${rootVar} = document.createDocumentFragment();`);
       const children = [];
       for (const stmt of statements) {
         const childVar = this.emitNode(stmt);
+        if (childVar == null) continue;
         this._createLines.push(`${rootVar}.appendChild(${childVar});`);
         children.push(childVar);
       }
       this._fragChildren.set(rootVar, children);
     }
 
+    // Hoist class-mode render-local declarations to the top of _create() so
+    // a) duplicate `name = ...` statements in source don't generate `let name`
+    //    twice (strict-mode redeclaration error), and b) reads inside any
+    //    enclosing IIFE/closure can see the binding.
+    if (this._renderTopLocals.size > 0) {
+      const decl = `let ${[...this._renderTopLocals].join(', ')};`;
+      this._createLines.unshift(decl);
+    }
+
     return {
       createLines: this._createLines,
       setupLines: this._setupLines,
@@ -1598,20 +1864,88 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     get() { return this._factoryMode ? 'ctx' : 'this'; }
   });
 
-  /** Push an effect line, wrapping with disposer tracking in factory mode */
+  /** Push an effect line, wrapping with disposer tracking in factory mode.
+   *
+   * Factory effects opt out of the runtime's auto-registration with the
+   * current component (skipRegister:true). The factory's own `disposers`
+   * array owns these — they're already cleaned up by d(detaching) when
+   * the block is removed. Without skipRegister, every block re-render
+   * would leak a stale disposer onto the parent's _disposers (the local
+   * factory disposers get overwritten on each p() call, but the parent
+   * keeps the stale references until parent unmount). */
   proto._pushEffect = function(body) {
     if (this._factoryMode) {
-      this._setupLines.push(`disposers.push(__effect(() => { ${body} }));`);
+      this._setupLines.push(`disposers.push(__effect(() => { ${body} }, {skipRegister: true}));`);
     } else {
       this._setupLines.push(`__effect(() => { ${body} });`);
     }
   };
 
+  // --------------------------------------------------------------------------
+  // Render-scope locals — declarations like `code = expr` inside render
+  // --------------------------------------------------------------------------
+  // Tracked per-factory so emitNode can (a) emit `code = expr` as a real JS
+  // local instead of a text node, and (b) treat subsequent `span code`
+  // references as value reads instead of `<code>` element emissions. Each
+  // block factory (loop body, conditional branch) is its own JS function,
+  // so render locals don't cross factory boundaries; only loop vars do
+  // (threaded via positional parameters from _loopVarStack).
+
+  const _isPlainIdentifier = (s) =>
+    typeof s === 'string' && /^[A-Za-z_$][\w$]*$/.test(s);
+
+  // Assignment-shape heads that emit as JS statements at render-block top
+  // level instead of being wrapped in createTextNode. `=` declares a new
+  // local; compound forms mutate an existing one.
+  const _ASSIGN_HEADS = new Set([
+    '=', '+=', '-=', '*=', '/=', '%=', '**=',
+    '&&=', '||=', '?=', '??=',
+  ]);
+
+  proto._isRenderBinding = function(stmt) {
+    return Array.isArray(stmt) && _ASSIGN_HEADS.has(stmt[0]) && _isPlainIdentifier(stmt[1]);
+  };
+
+  proto._addRenderLocal = function(name) {
+    if (this._renderLocalScope) this._renderLocalScope.add(name);
+  };
+
+  proto._isRenderLocal = function(name) {
+    if (!name || typeof name !== 'string') return false;
+    if (this._renderLocalScope && this._renderLocalScope.has(name)) return true;
+    if (this._loopVarStack) {
+      // Loop vars ARE threaded across nested factories as positional
+      // parameters, so any ancestor loop var is in scope inside any
+      // descendant factory function.
+      for (const v of this._loopVarStack) {
+        if (v.itemVar === name || v.indexVar === name) return true;
+      }
+    }
+    return false;
+  };
+
   // --------------------------------------------------------------------------
   // emitNode — main dispatch for all render tree nodes
   // --------------------------------------------------------------------------
 
   proto.emitNode = function(sexpr) {
+    // Render-scope assignment — `code = expr` and compound forms (`+=`,
+    // `-=`, etc.) become JS statements at this position rather than text
+    // nodes. Returning null tells the caller "no DOM child to append".
+    // `=` also declares the local: hoisted via _factoryVars (factory mode)
+    // or _renderTopLocals (class mode) and added to _renderLocalScope so
+    // subsequent references resolve to the local instead of an HTML tag.
+    if (this._isRenderBinding(sexpr)) {
+      const [op, name, expr] = sexpr;
+      const exprCode = this.emitInComponent(expr, 'value');
+      if (op === '=') {
+        (this._factoryMode ? this._factoryVars : this._renderTopLocals).add(name);
+        this._addRenderLocal(name);
+      }
+      this._createLines.push(`${name} ${op} ${exprCode};`);
+      return null;
+    }
+
     // String literal → text node (handle both primitive and String objects)
     if (typeof sexpr === 'string' || sexpr instanceof String) {
       const str = sexpr.valueOf();
@@ -1627,6 +1961,13 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         this._pushEffect(`${textVar}.data = ${this._self}.${str}.value;`);
         return textVar;
       }
+      // Render-scope local (binding from `code = expr` or a loop var) — emit
+      // as a value read, NOT a tag. Lexical bindings shadow HTML tag names.
+      if (this._isRenderLocal(str)) {
+        const textVar = this.newTextVar();
+        this._createLines.push(`${textVar} = document.createTextNode(String(${str}));`);
+        return textVar;
+      }
       // Slot projection — bare <slot> tag → project @children
       if (str === 'slot' && this.componentMembers) {
         const s = this._self;
@@ -1697,8 +2038,14 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       return cv;
     }
 
-    // HTML tag (possibly with #id, e.g. div#content)
-    if (headStr && this.isHtmlTag(headStr) && !meta(head, 'text')) {
+    // HTML tag (possibly with #id, e.g. div#content). A render-local with
+    // the same name as an HTML tag wins — `code "hi"` after `code = fn`
+    // is a function call, not a `<code>` element. Checking the full
+    // headStr (not just the part before `#id`) means `div#main` naturally
+    // dispatches as a tag even when a `div` local exists, since locals
+    // are plain identifiers and can't contain `#`.
+    if (headStr && this.isHtmlTag(headStr) && !meta(head, 'text') &&
+        !this._isRenderLocal(headStr)) {
       let [tagName, id] = headStr.split('#');
       return this.emitTag(tagName || 'div', [], rest, id);
     }
@@ -1721,9 +2068,11 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         return slotVar;
       }
 
-      // HTML tag with classes (div.class) — skip if base is marked .text by = prefix
+      // HTML tag with classes (div.class) — skip if base is marked .text by
+      // = prefix, and skip if the root is a render-local (so `code.value`
+      // after `code = obj` reads obj.value, not <code class="value">).
       const { tag, classes, id, base } = this.collectTemplateClasses(sexpr);
-      if (!meta(base, 'text') && tag && this.isHtmlTag(tag)) {
+      if (!meta(base, 'text') && tag && this.isHtmlTag(tag) && !this._isRenderLocal(tag)) {
         return this.emitTag(tag, classes, [], id);
       }
 
@@ -1754,7 +2103,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       }
 
       const { tag, classes, id } = this.collectTemplateClasses(head);
-      if (tag && this.isHtmlTag(tag)) {
+      if (tag && this.isHtmlTag(tag) && !this._isRenderLocal(tag)) {
         // Dynamic class syntax: div.("classes") or div.card.("classes")
         if (classes.length > 0 && classes[classes.length - 1] === '__clsx') {
           const staticClasses = classes.slice(0, -1);
@@ -1820,12 +2169,15 @@ export function installComponentSupport(CodeEmitter, Lexer) {
               this.emitAttributes(elVar, child);
             } else {
               const childVar = this.emitNode(child);
+              if (childVar == null) continue;
               this._createLines.push(`${elVar}.appendChild(${childVar});`);
             }
           }
         } else if (block) {
           const childVar = this.emitNode(block);
-          this._createLines.push(`${elVar}.appendChild(${childVar});`);
+          if (childVar != null) {
+            this._createLines.push(`${elVar}.appendChild(${childVar});`);
+          }
         }
       }
       else if (this.is(arg, 'object')) {
@@ -1833,9 +2185,15 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       }
       else if (typeof arg === 'string' || arg instanceof String) {
         const val = arg.valueOf();
-        // Template tag appearing as a string arg (e.g., slot after multi-line attrs)
+        // Template tag appearing as a string arg (e.g., slot after multi-line attrs).
+        // Render-scope locals (and loop vars) take precedence over the HTML tag
+        // sugar — `for code in items \n span code` should mean text content,
+        // not a nested <code> element. JSX-equivalent: if `code` is a let
+        // binding in scope, `<span>{code}</span>`, never `<span><code/></span>`.
+        // (Render-local names are plain identifiers — no `#id` or `.class`
+        // tail can ever be one — so checking the base name alone is enough.)
         const baseName = val.split(/[#.]/)[0];
-        if (this.isHtmlTag(baseName || 'div') || this.isComponent(baseName)) {
+        if (!this._isRenderLocal(baseName) && (this.isHtmlTag(baseName || 'div') || this.isComponent(baseName))) {
           const childVar = this.emitNode(arg);
           this._createLines.push(`${elVar}.appendChild(${childVar});`);
         } else {
@@ -1855,7 +2213,9 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       }
       else if (arg) {
         const childVar = this.emitNode(arg);
-        this._createLines.push(`${elVar}.appendChild(${childVar});`);
+        if (childVar != null) {
+          this._createLines.push(`${elVar}.appendChild(${childVar});`);
+        }
       }
     }
   };
@@ -2131,7 +2491,14 @@ export function installComponentSupport(CodeEmitter, Lexer) {
 
   proto.emitTemplateBlock = function(body) {
     if (!Array.isArray(body) || body[0] !== 'block') {
-      return this.emitNode(body);
+      const v = this.emitNode(body);
+      if (v != null) return v;
+      // Lone binding (e.g., `code = expr`) at the position where a child
+      // node was expected — emit a placeholder so the caller has something
+      // to insert. The binding itself was already pushed into _createLines.
+      const commentVar = this.newElementVar('empty');
+      this._createLines.push(`${commentVar} = document.createComment('');`);
+      return commentVar;
     }
 
     const statements = body.slice(1);
@@ -2140,8 +2507,24 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       this._createLines.push(`${commentVar} = document.createComment('');`);
       return commentVar;
     }
-    if (statements.length === 1) {
-      return this.emitNode(statements[0]);
+
+    const renderableCount = statements.reduce(
+      (n, s) => n + (this._isRenderBinding(s) ? 0 : 1), 0);
+
+    if (renderableCount === 0) {
+      for (const stmt of statements) this.emitNode(stmt);
+      const commentVar = this.newElementVar('empty');
+      this._createLines.push(`${commentVar} = document.createComment('');`);
+      return commentVar;
+    }
+
+    if (renderableCount === 1) {
+      let only = null;
+      for (const stmt of statements) {
+        const v = this.emitNode(stmt);
+        if (v != null) only = v;
+      }
+      return only;
     }
 
     const fragVar = this.newElementVar('frag');
@@ -2149,6 +2532,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     const children = [];
     for (const stmt of statements) {
       const childVar = this.emitNode(stmt);
+      if (childVar == null) continue;
       this._createLines.push(`${fragVar}.appendChild(${childVar});`);
       children.push(childVar);
     }
@@ -2199,8 +2583,12 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     setupLines.push(`  const anchor = ${anchorVar};`);
     setupLines.push(`  let currentBlock = null;`);
     setupLines.push(`  let showing = null;`);
+    // Factory effects skip auto-registration on the parent component
+    // (their disposers live in the local `disposers` array and are
+    // cleaned up by d(detaching)). Class-mode effects auto-register
+    // on `this` via the runtime's __getCurrentComponent bridge.
     const effOpen = this._factoryMode ? 'disposers.push(__effect(() => {' : '__effect(() => {';
-    const effClose = this._factoryMode ? '}));' : '});';
+    const effClose = this._factoryMode ? '}, {skipRegister: true}));' : '});';
     setupLines.push(`  ${effOpen}`);
     setupLines.push(`    const show = !!(${condCode});`);
     setupLines.push(`    const want = show ? 'then' : ${elseBlock ? "'else'" : 'null'};`);
@@ -2231,8 +2619,19 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       setupLines.push(`    }`);
     }
     setupLines.push(`  ${effClose}`);
+    // Block teardown: when this conditional's enclosing scope ends
+    // (factory block detach, or parent component unmount), destroy
+    // the currentBlock so its DOM, effects, and child components
+    // are fully cleaned up. Without this, parent unmount would
+    // dispose the reactive effect (preventing future re-runs) but
+    // leave currentBlock alive — its child components, signal
+    // subscriptions, and detached DOM stay pinned in memory.
     if (this._factoryMode) {
       setupLines.push(`  disposers.push(() => { if (currentBlock) { currentBlock.d(true); currentBlock = null; } });`);
+    } else {
+      // Class mode: register on parent component's _disposers via the
+      // __getCurrentComponent bridge (the same pathway __effect uses).
+      setupLines.push(`  { const __cur = globalThis.__ripComponent?.__getCurrentComponent?.(); if (__cur) (__cur._disposers ??= []).push(() => { if (currentBlock) { currentBlock.d(true); currentBlock = null; } }); }`);
     }
     setupLines.push(`}`);
 
@@ -2246,19 +2645,21 @@ export function installComponentSupport(CodeEmitter, Lexer) {
   // --------------------------------------------------------------------------
 
   proto.emitConditionBranch = function(blockName, block) {
-    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars];
+    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope];
 
     this._createLines = [];
     this._setupLines = [];
     this._factoryMode = true;
     this._factoryVars = new Set();
+    // Fresh render-local scope per factory function (see emitTemplateLoop).
+    this._renderLocalScope = new Set();
 
     const rootVar = this.emitTemplateBlock(block);
     const createLines = this._createLines;
     const setupLines = this._setupLines;
     const factoryVars = this._factoryVars;
 
-    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars] = saved;
+    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope] = saved;
 
     const outerParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
     const extraParams = outerParams ? `, ${outerParams}` : '';
@@ -2282,6 +2683,15 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     if (hasEffects) {
       factoryLines.push(`  let disposers = [];`);
     }
+    // Per-factory list of child-component instances created inside this
+    // block. d(detaching) calls .unmount() on each so child lifecycle
+    // hooks fire and child effects get cleaned up when the block is
+    // removed by reactive rendering (a `for` loop iteration changing,
+    // an `if` branch flipping, etc.). Without this, child instances
+    // were only ever unmounted when the OUTER component itself died,
+    // which silently broke the `beforeUnmount` / `unmounted` contract
+    // for any child rendered inside a conditional or loop.
+    factoryLines.push(`  let _factoryChildren = [];`);
 
     factoryLines.push(`  return {`);
 
@@ -2320,6 +2730,12 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     factoryLines.push(`    },`);
 
     factoryLines.push(`    d(detaching) {`);
+    // Unmount any child components inside this block FIRST, so their
+    // lifecycle hooks and effect disposers fire before we drop our own
+    // disposers and DOM. removeDOM:false because the parent DOM removal
+    // (below) will detach the whole subtree in one shot.
+    factoryLines.push(`      for (const __c of _factoryChildren) { try { __c.unmount?.({removeDOM: false}); } catch (__e) { console.error('[Rip] factory child unmount error:', __e); } }`);
+    factoryLines.push(`      _factoryChildren = [];`);
     if (hasEffects) {
       factoryLines.push(`      disposers.forEach(d => d());`);
     }
@@ -2355,12 +2771,27 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     const itemVar = varNames[0];
     let indexVar = varNames[1] || null;
     if (!indexVar) {
+      // Pick a name that won't collide with:
+      //   * outer loop vars (already in _loopVarStack)
+      //   * the current item var
+      //   * any explicit `for` var or render-local declaration ANYWHERE in
+      //     the body subtree (any depth, through conditionals and nested
+      //     loops alike)
+      // The third check is what closes the "duplicate-name" family of
+      // strict-mode errors: the outer loop's auto-index becomes a
+      // positional parameter of every nested factory's patch function, so
+      // any `let i;` (from `i = ...`) or any explicit `for v, i in ...`
+      // anywhere inside would clash with an auto-allocated `i`.
       const usedNames = new Set(this._loopVarStack.flatMap(v => [v.itemVar, v.indexVar]));
       usedNames.add(itemVar);
+      this._collectBodyBindings(body, usedNames);
       for (const candidate of ['i', 'j', 'k', 'l', 'm', 'n']) {
         if (!usedNames.has(candidate)) { indexVar = candidate; break; }
       }
-      indexVar = indexVar || `_i${this._loopVarStack.length}`;
+      // Last-resort fallback uses a mangled name no normal user identifier
+      // collides with (double underscore prefix matches the convention used
+      // by other compiler-internal names like __ripComponent, __reconcile).
+      indexVar = indexVar || `__rip_idx${this._loopVarStack.length}`;
     }
 
     const collectionCode = this.emitInComponent(collection, 'value');
@@ -2385,24 +2816,34 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       }
     }
 
-    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars];
+    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope];
 
     this._createLines = [];
     this._setupLines = [];
     this._factoryMode = true;
     this._factoryVars = new Set();
+    // Loop body is its own JS factory function — render locals from the
+    // surrounding scope are NOT visible here. Loop vars are explicitly
+    // threaded as positional parameters via _loopVarStack.
+    this._renderLocalScope = new Set();
 
     const outerParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
     const outerExtra = outerParams ? `, ${outerParams}` : '';
 
-    this._loopVarStack.push({ itemVar, indexVar });
+    // If the iterated collection is reactive, treat direct member access
+    // on the iter var (`item.qty`, `item[0]`, `item.a.b`) as reactive
+    // inside the loop body. hasReactiveDeps consults this flag, so the
+    // existing emit paths wrap those reads in __effect and the per-row
+    // patch function gets populated.
+    const reactiveSource = this.hasReactiveDeps(collection);
+    this._loopVarStack.push({ itemVar, indexVar, reactiveSource });
     const itemNode = this.emitTemplateBlock(body);
     this._loopVarStack.pop();
     const itemCreateLines = this._createLines;
     const itemSetupLines = this._setupLines;
     const itemFactoryVars = this._factoryVars;
 
-    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars] = saved;
+    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope] = saved;
 
     const isStatic = itemSetupLines.length === 0;
     const loopParams = `ctx, ${itemVar}, ${indexVar}${outerExtra}`;
@@ -2420,11 +2861,23 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     setupLines.push(`// Loop: ${blockName}`);
     setupLines.push(`{`);
     setupLines.push(`  const __s = { blocks: [], keys: [] };`);
+    // Same skipRegister contract as the conditional emitter above.
     const effOpen = this._factoryMode ? 'disposers.push(__effect(() => {' : '__effect(() => {';
-    const effClose = this._factoryMode ? '}));' : '});';
+    const effClose = this._factoryMode ? '}, {skipRegister: true}));' : '});';
     setupLines.push(`  ${effOpen}`);
     setupLines.push(`    __reconcile(${anchorVar}, __s, ${collectionCode}, ${this._self}, ${blockName}, ${keyFnCode}${outerArgs});`);
     setupLines.push(`  ${effClose}`);
+    // Loop teardown: destroy every block in state.blocks on parent
+    // unmount (or enclosing factory detach). __reconcile only destroys
+    // blocks that are removed mid-render; blocks that exist at the
+    // time the parent dies would otherwise leak their DOM, child
+    // components, and effect subscriptions. Same shape as the
+    // conditional emitter's block-teardown disposer.
+    if (this._factoryMode) {
+      setupLines.push(`  disposers.push(() => { for (const __b of __s.blocks) { try { __b.d(true); } catch {} } __s.blocks = []; __s.keys = []; __s.items = []; });`);
+    } else {
+      setupLines.push(`  { const __cur = globalThis.__ripComponent?.__getCurrentComponent?.(); if (__cur) (__cur._disposers ??= []).push(() => { for (const __b of __s.blocks) { try { __b.d(true); } catch {} } __s.blocks = []; __s.keys = []; __s.items = []; }); }`);
+    }
     setupLines.push(`}`);
 
     this._setupLines.push(setupLines.join('\n    '));
@@ -2443,21 +2896,97 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     const { propsCode, reactiveProps, eventBindings, childrenSetupLines } = this.buildComponentProps(args);
 
     const s = this._self;
+    // Push parent (s) so its constructor-time __pushComponent stack is
+    // preserved across child instantiation. Then push the CHILD around
+    // its _create() / _setup() calls so any __effect those methods
+    // create auto-registers on the child's _disposers, not the parent's.
+    //
+    // Partial-construction failure handling. Two cases produce a broken
+    // child whose _create/_setup would crash:
+    //   1. _init throws and a parent onError boundary handles it. The
+    //      constructor sets ._initFailed and returns the (broken)
+    //      instance. We detect via the flag.
+    //   2. _init throws and no boundary handles it. __handleComponentError
+    //      re-throws from the constructor; OR _create itself throws
+    //      after a successful _init. The outer try/catch handles both.
+    // In all failure modes we substitute a comment-node placeholder so
+    // the parent's appendChild later still finds a valid node, log the
+    // error, and don't push the broken instance onto _children (so the
+    // unmount cascade doesn't walk into it).
     this._createLines.push(`{ const __prev = __pushComponent(${s}); try {`);
+    this._createLines.push(`try {`);
     this._createLines.push(`${instVar} = new ${componentName}(${propsCode});`);
-    this._createLines.push(`${elVar} = ${instVar}._root = ${instVar}._create();`);
-    this._createLines.push(`(${s}._children || (${s}._children = [])).push(${instVar});`);
+    this._createLines.push(`if (${instVar} && ${instVar}._initFailed) {`);
+    // _init may have registered effects, contexts, or sub-children
+    // before throwing. unmount({removeDOM:false}) releases them; the
+    // instance never reached a usable state but its partial side
+    // effects need cleanup. Idempotent so safe even when nothing was
+    // registered yet.
+    this._createLines.push(`  try { ${instVar}.unmount({removeDOM: false}); } catch (__ue) { console.error('[Rip] partial-init unmount error:', __ue); }`);
+    this._createLines.push(`  ${instVar} = null;`);
+    this._createLines.push(`  ${elVar} = document.createComment('rip:child-init-failed: ${componentName}');`);
+    this._createLines.push(`} else {`);
+    this._createLines.push(`  { const __cprev = __pushComponent(${instVar}); try {`);
+    this._createLines.push(`    ${elVar} = ${instVar}._root = ${instVar}._create();`);
+    this._createLines.push(`  } finally { __popComponent(__cprev); } }`);
+    if (this._factoryMode) {
+      // Factory blocks (for/if in render) own their child instances
+      // exclusively. Don't pin them on the PARENT's _children — that
+      // array would grow unboundedly on loop churn (every removed
+      // iteration would leave a stale reference). The factory's
+      // d(detaching) iterates _factoryChildren and unmounts them; on
+      // parent unmount, the parent's own disposer chain destroys the
+      // factory block, which cascades to these children via d().
+      this._createLines.push(`  _factoryChildren.push(${instVar});`);
+    } else {
+      // Class-mode children: parent's _children is the canonical owner.
+      // Parent.unmount() cascades to _children for proper teardown.
+      this._createLines.push(`  (${s}._children || (${s}._children = [])).push(${instVar});`);
+    }
+    this._createLines.push(`}`);
+    this._createLines.push(`} catch (__childErr) {`);
+    this._createLines.push(`  console.error('[Rip] ${componentName} construction failed:', __childErr);`);
+    // If _init succeeded but _create threw, the partial instance has
+    // _init-time effects, contexts, and possibly children registered.
+    // Unmount it (with removeDOM:false; nothing was inserted into DOM
+    // yet) so those resources release. unmount is idempotent so
+    // redundant calls are safe.
+    this._createLines.push(`  if (${instVar}) { try { ${instVar}.unmount({removeDOM: false}); } catch (__ue) { console.error('[Rip] partial-child unmount error:', __ue); } }`);
+    this._createLines.push(`  ${instVar} = null;`);
+    this._createLines.push(`  ${elVar} = document.createComment('rip:child-error: ${componentName}');`);
+    this._createLines.push(`}`);
     this._createLines.push(`} finally { __popComponent(__prev); } }`);
 
     for (const { event, value } of eventBindings) {
       const handlerCode = this.emitInComponent(value, 'value');
-      this._createLines.push(`${elVar}.addEventListener('${event}', (e) => __batch(() => (${handlerCode})(e)));`);
-    }
-
-    this._setupLines.push(`try { if (${instVar}._setup) ${instVar}._setup(); if (${instVar}.mounted) ${instVar}.mounted(); } catch (__e) { __handleComponentError(__e, ${instVar}); }`);
+      this._createLines.push(`if (${instVar}) ${elVar}.addEventListener('${event}', (e) => __batch(() => (${handlerCode})(e)));`);
+    }
+
+    // Per-child push wrap for the full lifecycle invocation. ALL of
+    // beforeMount, _setup, and mounted run with the child as the
+    // current component, so any __effect they create auto-registers
+    // on the child's _disposers (via the __getCurrentComponent
+    // bridge), not the parent's. Guards:
+    //   - instVar null-check (failed-init placeholder branch above).
+    //   - _isSetup flag so the lifecycle runs ONCE even when this
+    //     setupLines block is re-executed by a factory's p() on every
+    //     reactive update. Class mode runs setupLines once anyway;
+    //     the flag is harmless there.
+    //   - Flag set BEFORE the calls so a recursive setup couldn't
+    //     re-enter and loop.
+    //   - beforeMount fires before _setup so user code has a hook
+    //     after construction but before reactive bindings activate
+    //     (matches the renderer's contract for page/layout
+    //     components).
+    this._setupLines.push(`if (${instVar} && !${instVar}._isSetup) { ${instVar}._isSetup = true; const __cprev = __pushComponent(${instVar}); try { try { if (${instVar}.beforeMount) ${instVar}.beforeMount(); if (${instVar}._setup) ${instVar}._setup(); if (${instVar}.mounted) ${instVar}.mounted(); } catch (__e) { __handleComponentError(__e, ${instVar}); } } finally { __popComponent(__cprev); } }`);
 
     for (const { key, valueCode } of reactiveProps) {
-      this._pushEffect(`if (${instVar}.${key} && typeof ${instVar}.${key} === 'object' && 'value' in ${instVar}.${key}) ${instVar}.${key}.value = ${valueCode}; else if (${instVar}._setRestProp) ${instVar}._setRestProp('${key}', ${valueCode});`);
+      // Outer instVar guard: if _init / _create failed and the
+      // placeholder branch substituted null for the instance, this
+      // prop-updater effect would otherwise dereference null on every
+      // signal change. The guard mirrors the event-listener emission
+      // a few lines above.
+      this._pushEffect(`if (${instVar}) { if (${instVar}.${key} && typeof ${instVar}.${key} === 'object' && 'value' in ${instVar}.${key}) ${instVar}.${key}.value = ${valueCode}; else if (${instVar}._setRestProp) ${instVar}._setRestProp('${key}', ${valueCode}); }`);
     }
 
     for (const line of childrenSetupLines) {
@@ -2512,9 +3041,24 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       }
     };
 
+    // Bare identifier args become boolean prop shorthand:
+    //   Button outline, link, "Save"
+    // is equivalent to:
+    //   Button outline: true, link: true, "Save"
+    // Matches JSX semantics — the bare identifier is ALWAYS a literal `true`
+    // prop key, never a variable reference, even if a same-named local
+    // binding exists in scope. To pass a variable, write `outline: outline`.
+    // Scoped to PascalCase component calls (this function's only caller is
+    // emitChildComponent), so DOM element calls and non-render imperative
+    // calls are unaffected.
+    const BARE_IDENT_RE = /^[a-zA-Z_$][\w$]*$/;
+    const isBareIdent = (a) => typeof a === 'string' && BARE_IDENT_RE.test(a);
+
     for (const arg of args) {
       if (this.is(arg, 'object')) {
         addObjectProps(arg);
+      } else if (isBareIdent(arg)) {
+        addProp(arg, 'true');
       } else if (Array.isArray(arg) && (arg[0] === '->' || arg[0] === '=>')) {
         let block = arg[2];
         if (block) {
@@ -2531,6 +3075,10 @@ export function installComponentSupport(CodeEmitter, Lexer) {
           }
 
           if (block) {
+            // Save _createLines/_setupLines only — _factoryVars and
+            // _renderLocalScope are intentionally shared because the
+            // children-block JS is spliced back into the parent factory's
+            // body (same JS function, same lexical scope).
             const savedCreateLines = this._createLines;
             const savedSetupLines = this._setupLines;
             this._createLines = [];
@@ -2558,7 +3106,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
           this._createLines.push(`${textVar} = document.createTextNode('');`);
           const body = `${textVar}.data = ${exprCode};`;
           const effect = this._factoryMode
-            ? `disposers.push(__effect(() => { ${body} }));`
+            ? `disposers.push(__effect(() => { ${body} }, {skipRegister: true}));`
             : `__effect(() => { ${body} });`;
           childrenSetupLines.push(effect);
         } else {
@@ -2598,6 +3146,16 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       return true;
     }
 
+    // Property chain rooted at a `for`-loop iter var whose source is
+    // reactive (e.g. `for item in cart.items` → `item.qty`, `item[0]`,
+    // `item.foo.bar`). Same rationale as the this-rooted case: the source
+    // proxy is reactive at runtime, so any member read may track. Limited
+    // to direct member access on the iter var — aliases and destructuring
+    // are explicitly out of scope.
+    if ((sexpr[0] === '.' || sexpr[0] === '[]') && this._rootsAtReactiveLoopVar(sexpr)) {
+      return true;
+    }
+
     // Method call on component: [['.', 'this', method], ...args]
     // Methods may read reactive state internally — treat as reactive so the
     // call gets wrapped in __effect and re-runs when dependencies change.
@@ -2613,6 +3171,32 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     return false;
   };
 
+  // _collectBodyBindings — gather every name bound inside a render subtree
+  // --------------------------------------------------------------------------
+  // Used by emitTemplateLoop to skip auto-allocating an outer index name
+  // that would later show up as either a positional parameter (explicit
+  // `for-in`/`for-of`/`for-as` var at any depth) or a hoisted `let`
+  // (`name = expr` at any depth) inside a descendant factory function. A
+  // collision at any nesting depth is real because the outer index is
+  // threaded as a positional parameter of EVERY descendant factory.
+
+  proto._collectBodyBindings = function(node, set) {
+    if (!Array.isArray(node)) return;
+    const head = node[0];
+    if (head === 'for-in' || head === 'for-of' || head === 'for-as') {
+      const vars = node[1];
+      const names = Array.isArray(vars) ? vars : [vars];
+      for (const n of names) {
+        if (typeof n === 'string') set.add(n);
+      }
+    } else if (head === '=' && _isPlainIdentifier(node[1])) {
+      set.add(node[1]);
+    }
+    for (let i = 1; i < node.length; i++) {
+      this._collectBodyBindings(node[i], set);
+    }
+  };
+
   // isSimpleAssignable — check if value is a plain reactive member (assignable target)
   // --------------------------------------------------------------------------
 
@@ -2653,6 +3237,26 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     return this._rootsAtThis(sexpr[1]);
   };
 
+  // _rootsAtReactiveLoopVar — true when a `.` / `[]` access chain bottoms
+  // out at a string identifier that matches the itemVar of some frame on
+  // _loopVarStack whose `reactiveSource` is true. See emitTemplateLoop.
+  proto._rootsAtReactiveLoopVar = function(sexpr) {
+    if (typeof sexpr === 'string') {
+      if (!this._loopVarStack || this._loopVarStack.length === 0) return false;
+      // Iterate innermost-first so a shadowed name resolves to its nearest
+      // binding: `for item in reactive` containing `for item in [1,2,3]`
+      // must treat inner reads of `item` as non-reactive.
+      for (let i = this._loopVarStack.length - 1; i >= 0; i--) {
+        const v = this._loopVarStack[i];
+        if (v.itemVar === sexpr) return !!v.reactiveSource;
+      }
+      return false;
+    }
+    if (!Array.isArray(sexpr)) return false;
+    if (sexpr[0] === '.' || sexpr[0] === '[]') return this._rootsAtReactiveLoopVar(sexpr[1]);
+    return false;
+  };
+
   // ==========================================================================
   // Component Runtime
   // ==========================================================================
@@ -2670,8 +3274,21 @@ export function installComponentSupport(CodeEmitter, Lexer) {
 let __currentComponent = null;
 
 function __pushComponent(component) {
-  component._parent = __currentComponent;
+  // The component stack tracks the currently-active scope (so __effect
+  // and friends can find it). Parent assignment happens ONCE — on the
+  // first push that has a non-self predecessor. Later pushes (mount,
+  // beforeMount, factory re-entry) preserve the existing chain.
+  //
+  // Without the "set once" guard, the renderer's careful threading of
+  // outer-layout -> inner-layout -> page would survive construction
+  // but get clobbered the moment any of those components got re-pushed
+  // for its own lifecycle — a subsequent push with prev=null would
+  // overwrite the construction-time parent. Cross-layout context
+  // (offer in outer / accept in page) was silently broken.
   const prev = __currentComponent;
+  if (component && component._parent == null && prev && prev !== component) {
+    component._parent = prev;
+  }
   __currentComponent = component;
   return prev;
 }
@@ -2680,6 +3297,13 @@ function __popComponent(prev) {
   __currentComponent = prev;
 }
 
+// Bridge for the reactive runtime in compiler.js. __effect calls this to
+// auto-register its disposer with the component currently being
+// constructed/mounted, so the disposer fires on component unmount.
+function __getCurrentComponent() {
+  return __currentComponent;
+}
+
 function setContext(key, value) {
   if (!__currentComponent) throw new Error('setContext must be called during component initialization');
   if (!__currentComponent._context) __currentComponent._context = new Map();
@@ -2688,7 +3312,11 @@ function setContext(key, value) {
 
 function getContext(key) {
   let component = __currentComponent;
-  while (component) {
+  // Cycle guard: see __handleComponentError above. A buggy _parent
+  // chain shouldn't hang lookup of a missing key.
+  const visited = new Set();
+  while (component && !visited.has(component)) {
+    visited.add(component);
     if (component._context && component._context.has(key)) return component._context.get(key);
     component = component._parent;
   }
@@ -2697,7 +3325,9 @@ function getContext(key) {
 
 function hasContext(key) {
   let component = __currentComponent;
-  while (component) {
+  const visited = new Set();
+  while (component && !visited.has(component)) {
+    visited.add(component);
     if (component._context && component._context.has(key)) return true;
     component = component._parent;
   }
@@ -2744,6 +3374,7 @@ function __reconcile(anchor, state, items, ctx, factory, keyFn, ...outer) {
   if (!parent) return;
 
   const oldKeys = state.keys;
+  const oldItems = state.items || [];
   const oldBlocks = state.blocks;
   const oldLen = oldKeys.length;
   const newLen = items.length;
@@ -2765,14 +3396,24 @@ function __reconcile(anchor, state, items, ctx, factory, keyFn, ...outer) {
       parent.insertBefore(frag, anchor);
     }
     state.keys = hasKeyFn ? newKeys : items.slice();
+    state.items = items.slice();
     state.blocks = newBlocks;
     return;
   }
 
-  // Phase 1: prefix scan — skip p() (item+index identical, effects already live)
+  // Phase 1: prefix scan — skip p() ONLY when key AND item identity
+  // match. With a custom keyFn, a stable key can be reused across
+  // different item references (e.g. when the user replaces an item
+  // object with a new one that has the same id but different fields);
+  // skipping p() in that case would leave the block displaying stale
+  // data. Reference identity guards this.
   let start = 0;
   const minLen = oldLen < newLen ? oldLen : newLen;
   while (start < minLen && oldKeys[start] === newKeys[start]) {
+    if (oldItems[start] !== items[start]) {
+      const block = oldBlocks[start];
+      if (!block._s) block.p(ctx, items[start], start, ...outer);
+    }
     newBlocks[start] = oldBlocks[start];
     start++;
   }
@@ -2842,6 +3483,7 @@ function __reconcile(anchor, state, items, ctx, factory, keyFn, ...outer) {
   }
 
   state.keys = hasKeyFn ? newKeys : items.slice();
+  state.items = items.slice();
   state.blocks = newBlocks;
 }
 
@@ -2886,7 +3528,13 @@ function __transition(el, name, dir, done) {
 
 function __handleComponentError(error, component) {
   let current = component;
-  while (current) {
+  // Defensive cycle guard: if the parent chain is corrupted (e.g. by
+  // a buggy _parent assignment), we still terminate. The fix is in
+  // __pushComponent above, but cycle detection here is cheap belt-
+  // and-suspenders so a bad _parent never hangs the runtime.
+  const visited = new Set();
+  while (current && !visited.has(current)) {
+    visited.add(current);
     if (current.onError) {
       try { current.onError(error, component); return; } catch (_) {}
     }
@@ -2900,13 +3548,36 @@ class __Component {
     Object.assign(this, props);
     if (!this.app && globalThis.__ripApp) this.app = globalThis.__ripApp;
     const prev = __pushComponent(this);
-    try { this._init(props); } catch (e) { __popComponent(prev); __handleComponentError(e, this); return; }
+    try {
+      this._init(props);
+    } catch (e) {
+      __popComponent(prev);
+      // Mark this instance as having failed initialization so parent
+      // emit-sites (emitChildComponent) can substitute a placeholder
+      // instead of running _create / _setup on a broken instance.
+      this._initFailed = true;
+      // Run the user's error hook (parent-onError walk). If a boundary
+      // handles it, control returns here and we leave the broken
+      // instance to be handled via _initFailed. If no boundary exists,
+      // __handleComponentError re-throws and the caller's outer
+      // try/catch in emitChildComponent will substitute the same
+      // placeholder.
+      __handleComponentError(e, this);
+      return;
+    }
     __popComponent(prev);
   }
   _init() {}
   mount(target) {
     if (typeof target === "string") target = document.querySelector(target);
     this._target = target;
+    // _create / _setup are wrapped with __pushComponent so any __effect
+    // created inside (reactive attribute bindings, reactive text nodes,
+    // child components, user '~>' effects) auto-registers its disposer
+    // with this component via __getCurrentComponent in the runtime.
+    // Without this wrapping, effects created here lived forever and
+    // their cleanup functions never fired on unmount.
+    const prev = __pushComponent(this);
     try {
       this._root = this._create();
       if (this._root) target.appendChild(this._root);
@@ -2914,17 +3585,52 @@ class __Component {
       if (this.mounted) this.mounted();
     } catch (error) {
       __handleComponentError(error, this);
+    } finally {
+      __popComponent(prev);
     }
     return this;
   }
-  unmount() {
+  unmount({ removeDOM = true } = {}) {
+    // Symmetric to mount: tear down lifecycle hooks, all auto-registered
+    // effect disposers, child components, and (optionally) the DOM.
+    //
+    //   beforeUnmount  - user hook; runs while signals/effects are still
+    //                    live, so user code can read final state.
+    //   children       - cascade BEFORE this instance's disposers so
+    //                    children can react to parent state during their
+    //                    own teardown.
+    //   _disposers     - effect disposers auto-registered by __effect
+    //                    (cleared eagerly so a re-mount starts fresh).
+    //   unmounted      - user hook; final notification.
+    //   DOM removal    - skipped when caller wants to keep the old DOM
+    //                    visible until replacement (route transitions).
+    //
+    // Idempotent: a child can be unmounted by its enclosing factory's
+    // d(detaching) AND later by the parent's unmount cascade. Without
+    // the _unmounted guard, beforeUnmount/unmounted hooks would re-fire
+    // and cleanup would walk an already-empty graph for no benefit.
+    if (this._unmounted) return;
+    this._unmounted = true;
+    try {
+      if (this.beforeUnmount) this.beforeUnmount();
+    } catch (e) { console.error('[Rip] beforeUnmount error:', e); }
     if (this._children) {
       for (const child of this._children) {
-        child.unmount();
+        try { child.unmount({ removeDOM }); }
+        catch (e) { console.error('[Rip] child unmount error:', e); }
       }
+      this._children = null;
     }
-    if (this.unmounted) this.unmounted();
-    if (this._root && this._root.parentNode) {
+    if (this._disposers) {
+      for (const d of this._disposers) {
+        try { d(); } catch (e) { console.error('[Rip] effect disposer error:', e); }
+      }
+      this._disposers = null;
+    }
+    try {
+      if (this.unmounted) this.unmounted();
+    } catch (e) { console.error('[Rip] unmounted error:', e); }
+    if (removeDOM && this._root && this._root.parentNode) {
       this._root.parentNode.removeChild(this._root);
     }
   }
@@ -2940,7 +3646,7 @@ class __Component {
 
 // Register on globalThis for runtime deduplication
 if (typeof globalThis !== 'undefined') {
-  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __transition, __handleComponentError, __Component };
+  globalThis.__ripComponent = { __pushComponent, __popComponent, __getCurrentComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __transition, __handleComponentError, __Component };
 }
 
 `;