rip-lang 3.17.4 → 3.17.5

package/src/components.js

@@ -221,6 +221,11 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     let renderIndentLevel = 0;
     let currentIndent = 0;
     let pendingCallEnds = [];
+    // Indent levels at which an element's attribute/child block is directly
+    // open. A bare `@event` at one of these levels (statement start) is a
+    // continuation directive of that element. Pushed when implicit nesting
+    // opens an element body; popped on OUTDENT past the level.
+    let elementBodyLevels = [];
 
     let isHtmlTag = (name) => {
       let tagPart = name.split('#')[0];
@@ -292,6 +297,53 @@ export function installComponentSupport(CodeEmitter, Lexer) {
          (j === 0 || tokens[j - 1][0] === 'INDENT' || tokens[j - 1][0] === 'TERMINATOR' || tokens[j - 1][0] === 'RENDER'));
     };
 
+    // Net unmatched-opener test: is token `at` nested inside an explicit
+    // ()/[]/{}/CALL/INDEX/interpolation/string group (depth > 0), or directly
+    // at the element-head level (depth 0)? Walks back to the line/block
+    // boundary at the current nesting level.
+    let explicitDepthAt = (tokens, at) => {
+      let depth = 0;
+      for (let k = at - 1; k >= 0; k--) {
+        let t = tokens[k][0];
+        if (t === ')' || t === 'CALL_END' || t === ']' || t === 'INDEX_END' ||
+            t === '}' || t === 'MAP_END' || t === 'INTERPOLATION_END' || t === 'STRING_END') {
+          depth++;
+        } else if (t === '(' || t === 'CALL_START' || t === '[' || t === 'INDEX_START' ||
+                   t === '{' || t === 'MAP_START' || t === 'INTERPOLATION_START' || t === 'STRING_START') {
+          if (depth === 0) return 1;
+          depth--;
+        } else if (t === 'TERMINATOR' || t === 'RENDER' || t === 'INDENT' || t === 'OUTDENT') {
+          break;
+        }
+      }
+      return 0;
+    };
+
+    // Is the `@` token at index `at` a bare event directive — i.e. a directive in
+    // its own right, NOT a `@member` buried inside an attribute value? It fires
+    // only at a genuine argument/attribute boundary, never inside a value
+    // expression. Requires explicit-bracket depth 0, and one of:
+    //   (1) tag-head argument: `@event` is a NEW arg, so its previous token is
+    //       the tag-expression end (IDENTIFIER like `button`/`div#id`, or a
+    //       `.class`/`#id` tail PROPERTY) or a `,` separator — AND startsWithTag
+    //       confirms tag context. A value token before it (`:`, `!`, `?`, an
+    //       operator, `(`, a string/number…) means it's an attribute VALUE
+    //       (e.g. `aria-pressed: !!@pressed`, `value: @x`) — NOT a directive.
+    //   (2) element-body statement start: a line beginning `@click` at the
+    //       direct attribute/child indent of an open element.
+    // Bare `@member` is no longer a text child anywhere — `= @member` renders
+    // text — so a bare `@name` in a directive slot is unconditionally a directive
+    // (the emitter errors if `name` isn't a real DOM event).
+    let isBareEventAttr = (tokens, at) => {
+      let prev = at > 0 ? tokens[at - 1] : null;
+      if (!prev) return false;
+      if (explicitDepthAt(tokens, at) !== 0) return false;
+      let pt = prev[0];
+      if ((pt === ',' || pt === 'IDENTIFIER' || pt === 'PROPERTY') && startsWithTag(tokens, at)) return true;
+      if ((pt === 'INDENT' || pt === 'TERMINATOR') && elementBodyLevels.includes(currentIndent)) return true;
+      return false;
+    };
+
     this.scanTokens(function(token, i, tokens) {
       let tag = token[0];
       let nextToken = i < tokens.length - 1 ? tokens[i + 1] : null;
@@ -312,6 +364,10 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       if (tag === 'OUTDENT') {
         currentIndent--;
 
+        while (elementBodyLevels.length > 0 && elementBodyLevels[elementBodyLevels.length - 1] > currentIndent) {
+          elementBodyLevels.pop();
+        }
+
         // Insert pending CALL_END(s) after this OUTDENT
         let inserted = 0;
         while (pendingCallEnds.length > 0 && pendingCallEnds[pendingCallEnds.length - 1] > currentIndent) {
@@ -467,10 +523,27 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       if (tag === '@') {
         let j = i + 1;
         if (j < tokens.length && tokens[j][0] === 'PROPERTY') {
+          let eventName = String(tokens[j][1]);
           j++;
           while (j + 1 < tokens.length && tokens[j][0] === '.' && tokens[j + 1][0] === 'PROPERTY') {
             j += 2;
           }
+          let hadChain = j > i + 2;  // a `.PROPERTY` chain — a member path (`@toast.title`) or modifier form
+          // Bare event shorthand: a plain `@click` (no `.` chain, no `: handler`)
+          // in a directive position (tag head or element-body statement) desugars
+          // to `@click: @onClick` — a `this`-member reference, so it resolves only
+          // to a component method, never a local. A `.`-chain is left untouched:
+          // `@toast.title` is a member path (use `= @toast.title` for text), and
+          // `@click.prevent: h` is the explicit modifier form handled below. Not
+          // DOM-gated here: any plain name desugars; the emitter validates it's a
+          // real DOM event (else a clear "use `= @name`" error) and that the
+          // on<Name> method exists. The generated handler name carries a marker.
+          if (!hadChain && (j >= tokens.length || tokens[j][0] !== ':') && isBareEventAttr(tokens, i)) {
+            let handlerName = 'on' + eventName[0].toUpperCase() + eventName.slice(1);
+            let nameObj = new String(handlerName);
+            nameObj.generatedBareEvent = eventName;
+            tokens.splice(j, 0, gen(':', ':', token), gen('@', '@', token), gen('PROPERTY', nameObj, token));
+          }
           if (j > i + 2 && j < tokens.length && tokens[j][0] === ':') {
             let openBracket = gen('[', '[', token);
             tokens.splice(i, 0, openBracket);
@@ -584,12 +657,14 @@ export function installComponentSupport(CodeEmitter, Lexer) {
             arrowToken.newLine = true;
             tokens.splice(i + 1, 0, callStartToken, arrowToken);
             pendingCallEnds.push(currentIndent + 1);
+            elementBodyLevels.push(currentIndent + 1);
             return 3;
           } else {
             let commaToken = gen(',', ',', token);
             let arrowToken = gen('->', '->', token);
             arrowToken.newLine = true;
             tokens.splice(i + 1, 0, commaToken, arrowToken);
+            elementBodyLevels.push(currentIndent + 1);
             return 3;
           }
         }
@@ -782,7 +857,12 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         const item = sexpr[i];
         if (Array.isArray(item) && item[0] === '=') {
           const targetName = _str(item[1]);
-          if (targetName && !(this.reactiveMembers && this.reactiveMembers.has(targetName))) {
+          // A bare `name = value` introduces a local ONLY when `name` is not a
+          // component member. Plain (`=`) members are componentMembers but not
+          // reactiveMembers — a write to one must become `this.name = value`
+          // (handled by the fallthrough map), not a shadowing local.
+          const isMember = targetName && this.componentMembers && this.componentMembers.has(targetName);
+          if (targetName && !isMember) {
             items.push(['=', item[1], this.transformComponentMembers(item[2], scope)]);
             scope.add(targetName);
             continue;
@@ -812,6 +892,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
 
     // Categorize statements
     const stateVars = [];
+    const plainVars = [];
     const derivedVars = [];
     const gateVars = [];
     const readonlyVars = [];
@@ -903,9 +984,15 @@ 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]), type: getMemberType(stmt[1]), optional: getMemberOptional(stmt[1]), srcLine: stmt.loc?.r });
+              // Uniform `=` semantics: a `=`-declared member is a PLAIN,
+              // non-reactive field (`this.name = value`), everywhere — including
+              // component members. Reactive state uses `:=`. A plain member is
+              // NOT a reactive member and NOT a valid `ref:` target.
+              //
+              // `@name = v` (public) is a rare plain public field sourced once
+              // from props; reactive props use `@name :=` or bare `@name`.
+              plainVars.push({ name: varName, value: val, isPublic: isPublicProp(stmt[1]), type: getMemberType(stmt[1]), node: stmt, srcLine: stmt.loc?.r });
               memberNames.add(varName);
-              reactiveMembers.add(varName);
             }
           }
         }
@@ -939,15 +1026,152 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       }
     }
 
-    // Auto-event map: onClick → 'click', onKeydown → 'keydown', etc.
-    const autoEventHandlers = new Map();
-    for (const { name } of methods) {
-      if (/^on[A-Z]/.test(name) && !LIFECYCLE_HOOKS.has(name)) {
-        const eventName = name[2].toLowerCase() + name.slice(3);
-        if (DOM_EVENTS.has(eventName)) autoEventHandlers.set(eventName, name);
+    // ── Safety diagnostic: silent-freeze guard for now-plain `=` members ──
+    // Under uniform semantics a private `=` field is plain (non-reactive). If
+    // such a field is READ in a *display* position (render / `~=` computed)
+    // AND reassigned anywhere in the component, the UI would read it once and
+    // never update — the classic silent-freeze. Steer to `:=`. Reads inside
+    // `~>` effect bodies don't count: an effect re-runs on its own tracked
+    // deps and legitimately drives plain imperative fields.
+    if (plainVars.length > 0) {
+      const ASSIGN_OPS = new Set(['=', '+=', '-=', '*=', '/=', '%=', '**=', '//=', '%%=', '&&=', '||=', '??=', '?=', '&=', '|=', '^=', '<<=', '>>=', '>>>=']);
+      const occursRead = (node, name) => {
+        if (node == null) return false;
+        if (!Array.isArray(node)) {
+          const s = node.valueOf ? node.valueOf() : node;
+          return s === name;
+        }
+        const h = node[0]?.valueOf?.() ?? node[0];
+        // `@name` member access reads `name`.
+        if (h === '.' && node[1] === 'this') {
+          const p = node[2]?.valueOf?.() ?? node[2];
+          return p === name;
+        }
+        // A pure `=` writes its LHS (not a read); compound ops also read it.
+        if (ASSIGN_OPS.has(h)) {
+          const rhs = occursRead(node[2], name);
+          return h === '=' ? rhs : (rhs || occursRead(node[1], name));
+        }
+        return node.some(c => occursRead(c, name));
+      };
+      const collectAssigned = (node, out) => {
+        if (!Array.isArray(node)) return;
+        const h = node[0]?.valueOf?.() ?? node[0];
+        if (ASSIGN_OPS.has(h) || h === '++' || h === '--') {
+          const tn = getMemberName(node[1]);
+          if (tn) out.add(tn);
+        }
+        for (const c of node) collectAssigned(c, out);
+      };
+
+      // Reassignments anywhere EXCEPT the declarations themselves: scan method,
+      // effect, lifecycle, computed, and render (event-handler) bodies.
+      const reassigned = new Set();
+      for (const m of methods) collectAssigned(m.func, reassigned);
+      for (const e of effects) collectAssigned(e[2], reassigned);
+      for (const h of lifecycleHooks) collectAssigned(h.value, reassigned);
+      for (const d of derivedVars) collectAssigned(d.expr, reassigned);
+      if (renderBlock) collectAssigned(renderBlock, reassigned);
+
+      // Only render and `~=` computed bodies are true "reactive reads" — they
+      // produce values the DOM displays and must re-derive when the source
+      // changes. `~>` effects are deliberately EXCLUDED: an effect re-runs on
+      // its own tracked deps and legitimately reads/writes plain imperative
+      // fields (RAF handles, drag flags, memo caches), so a plain `=` field
+      // touched only in effects is not a silent-freeze.
+      const readReactively = (name) => {
+        if (renderBlock && occursRead(renderBlock, name)) return true;
+        for (const d of derivedVars) if (occursRead(d.expr, name)) return true;
+        return false;
+      };
+
+      for (const pv of plainVars) {
+        // Public `@name = v` is an explicit rare opt-in to a plain public field.
+        if (pv.isPublic) continue;
+        if (reassigned.has(pv.name) && readReactively(pv.name)) {
+          this.error(
+            `'${pv.name}' is declared with '=' (a plain, non-reactive field) but it is read in render/computed AND reassigned — the UI will read it once and never update.`,
+            pv.node,
+            { suggestion: `Declare it as reactive state: \`${pv.name} := ...\`` }
+          );
+        }
       }
     }
 
+    // ── Const-member diagnostic: `=!` members are genuine consts ──
+    // A `=!` member is a SHALLOW const (like JS `const`): rebinding the member
+    // is a compile error; content mutation (`c.push(...)`, `c.foo = 1`) is
+    // allowed. This Rip-native check is authoritative and runs in the erasure
+    // core — it does not depend on type-checking (the shadow-TS view also marks
+    // the member `readonly`, surfacing TS2540, but that's a redundant layer).
+    // A rebind is `@c = …` / `c = …` whose target *directly names* the member;
+    // `c.foo = 1` / `@c.foo = 1` target a property of the value, not the member,
+    // so they pass (getMemberName returns null for those).
+    if (readonlyVars.length > 0) {
+      const constNames = new Set(readonlyVars.map(r => r.name));
+      const CONST_ASSIGN_OPS = new Set(['=', '+=', '-=', '*=', '/=', '%=', '**=', '//=', '%%=', '&&=', '||=', '??=', '?=', '&=', '|=', '^=', '<<=', '>>=', '>>>=']);
+      const paramName = (p) => _str(Array.isArray(p) && (p[0] === 'default' || p[0] === 'rest') ? p[1] : p);
+      const reportConstAssign = (name, node) => this.error(
+        `cannot assign to const member '${name}' (declared with =!); use '=' for a mutable field or ':=' for reactive state`,
+        node
+      );
+      // Walk a body s-expression tracking local bindings (params + `=` locals)
+      // that legitimately SHADOW a member name — only an unshadowed bare write,
+      // or any `@member` write, is a member rebind.
+      const checkConst = (node, scope) => {
+        if (!Array.isArray(node)) return;
+        const h = node[0]?.valueOf?.() ?? node[0];
+        if (h === '->' || h === '=>') {
+          const child = new Set(scope);
+          const params = node[1];
+          if (Array.isArray(params)) for (const p of params) {
+            const pn = paramName(p);
+            if (pn) child.add(pn);
+          }
+          checkConst(node[2], child);
+          return;
+        }
+        if (h === 'block' || h === 'program') {
+          const child = new Set(scope);
+          for (let i = 1; i < node.length; i++) {
+            const item = node[i];
+            checkConst(item, child);
+            // A bare `name = value` introduces a shadowing local only when the
+            // name is NOT a const member (a write to a const member is the
+            // rebind we just flagged, never a new local).
+            if (Array.isArray(item) && item[0] === '=') {
+              const tn = _str(item[1]);
+              if (tn && !constNames.has(tn)) child.add(tn);
+            }
+          }
+          return;
+        }
+        if (CONST_ASSIGN_OPS.has(h) || h === '++' || h === '--') {
+          const target = node[1];
+          if (Array.isArray(target) && target[0] === '.' && target[1] === 'this') {
+            const mn = _str(target[2]);
+            if (mn && constNames.has(mn)) reportConstAssign(mn, node);
+          } else {
+            const tn = _str(target);
+            if (tn && constNames.has(tn) && !scope.has(tn)) reportConstAssign(tn, node);
+          }
+        }
+        for (let i = 1; i < node.length; i++) checkConst(node[i], scope);
+      };
+      // Scope model MUST mirror transformComponentMembers exactly: a method's
+      // own top-level params do NOT shadow members (only `methodBody` is
+      // member-transformed, not the whole arrow — a bare member-named read
+      // becomes `this.member`), so we walk the BODY with an empty scope. Nested
+      // `->`/`=>` params DO shadow (the walker's arrow branch seeds them), which
+      // matches the transform's own arrow recursion.
+      const bodyOf = (fn) => (Array.isArray(fn) && (fn[0] === '->' || fn[0] === '=>')) ? fn[2] : fn;
+      for (const m of methods) checkConst(bodyOf(m.func), new Set());
+      for (const e of effects) checkConst(e[2], new Set());
+      for (const h of lifecycleHooks) checkConst(bodyOf(h.value), new Set());
+      for (const d of derivedVars) checkConst(d.expr, new Set());
+      if (renderBlock) checkConst(renderBlock, new Set());
+    }
+
     const inheritsTag = rest[0]?.valueOf?.() ?? null;
     const publicPropNames = new Set();
     for (const { name, isPublic } of stateVars) if (isPublic) publicPropNames.add(name);
@@ -961,14 +1185,23 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       reactiveMembers.add('rest');
     }
 
+    // Writable state cells — the only valid `ref:` targets. stateVars covers
+    // `:=` state and bare `@props` (each emitted as a writable `__state(...)`
+    // signal). Computed (`~=`), readonly (`=!`), and plain (`=`) members are
+    // deliberately excluded: a computed has a get-only `.value`, a readonly is
+    // a plain const field, and a plain `=` member is a non-reactive property —
+    // none can hold a live reactive ref. (`rest` is reactive but not a cell.)
+    const refTargetMembers = new Set();
+    for (const { name } of stateVars) refTargetMembers.add(name);
+
     // Save and set component context
     const prevComponentMembers = this.componentMembers;
     const prevReactiveMembers = this.reactiveMembers;
-    const prevAutoEventHandlers = this._autoEventHandlers;
+    const prevRefTargetMembers = this.refTargetMembers;
     const prevInheritsTag = this._inheritsTag;
     this.componentMembers = memberNames;
     this.reactiveMembers = reactiveMembers;
-    this._autoEventHandlers = autoEventHandlers.size > 0 ? autoEventHandlers : null;
+    this.refTargetMembers = refTargetMembers;
     this._inheritsTag = inheritsTag || null;
 
     // --- Type-check stub: typed member declarations + body expressions, no DOM ---
@@ -1026,6 +1259,11 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         const ts = expandType(type) || 'any';
         baseEntries.push(`${name}?: ${ts}`);
       }
+      for (const { name, type, isPublic } of plainVars) {
+        if (!isPublic) continue;
+        const ts = expandType(type) || 'any';
+        baseEntries.push(`${name}?: ${ts}`);
+      }
       {
         const propsOpt = requiredBindUnions.length > 0 ? '' : '?';
         const parts = [];
@@ -1033,7 +1271,25 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         parts.push(...requiredBindUnions);
         let propsType = parts.length ? parts.join(' & ') : '{}';
         if (inheritsTag) propsType += ` & __RipProps<'${inheritsTag}'>`;
-        sl.push(`  constructor(_props${propsOpt}: ${propsType}) {}`);
+        // Synthetic constructor — the ONLY place TypeScript permits assigning a
+        // `readonly` member. The runtime keeps the real readonly inits in `_init`
+        // (unchanged); we mirror JUST the readonly assignments here so that
+        // `declare readonly name: T` is satisfied without tripping TS2540, and we
+        // deliberately do NOT re-emit them in the shadow `_init` below (that would
+        // re-trigger TS2540 — assignment to a readonly outside the constructor).
+        const ctorInits = [];
+        for (const { name, value, isPublic, srcLine } of readonlyVars) {
+          const val = this.emitInComponent(value, 'value');
+          const marker = srcLine != null ? ` // @rip-src:${srcLine}` : '';
+          ctorInits.push((isPublic ? `    this.${name} = _props?.${name} ?? ${val};` : `    this.${name} = ${val};`) + marker);
+        }
+        if (ctorInits.length) {
+          sl.push(`  constructor(_props${propsOpt}: ${propsType}) {`);
+          for (const line of ctorInits) sl.push(line);
+          sl.push('  }');
+        } else {
+          sl.push(`  constructor(_props${propsOpt}: ${propsType}) {}`);
+        }
       }
 
       // Infer type from literal initializer when no explicit annotation
@@ -1099,7 +1355,18 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       if (inheritsTag) {
         sl.push(`  declare rest: Signal<__RipProps<'${inheritsTag}'>>;`);
       }
+      // `=!` members are genuine consts: surface them as `readonly` so a
+      // reassignment in a method/effect/handler is TS2540 (the Rip-native check
+      // above is authoritative; this keeps editors/consumers consistent). The
+      // single init assignment lives in the synthetic constructor above — NOT in
+      // the shadow `_init` — because TS only allows writing a readonly there.
       for (const { name, type, value } of readonlyVars) {
+        const ts = expandType(type) || inferLiteralType(value);
+        sl.push(ts ? `  declare readonly ${name}: ${ts};` : `  declare readonly ${name}: any;`);
+      }
+      // Plain (`=`) fields: reassignable, non-reactive. Declared like readonly
+      // (no Signal wrapper); assigned in `_init` below.
+      for (const { name, type, value } of plainVars) {
         const ts = expandType(type) || inferLiteralType(value);
         sl.push(ts ? `  declare ${name}: ${ts};` : `  declare ${name}: any;`);
       }
@@ -1136,9 +1403,12 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         sl.push(`  ${name} = __state(${val});` + marker);
       }
 
-      // _init body — readonly, state, computed assignments (skip accepted/offered)
+      // _init body — plain, state, computed assignments (skip accepted/offered).
+      // Readonly (`=!`) inits are emitted in the synthetic constructor above, NOT
+      // here: assigning a `readonly` member outside the constructor is TS2540.
+      // (The RUNTIME `_init` still assigns them — see the non-stub path below.)
       sl.push('  _init(props) {');
-      for (const { name, value, isPublic, srcLine } of readonlyVars) {
+      for (const { name, value, isPublic, srcLine } of plainVars) {
         const val = this.emitInComponent(value, 'value');
         const marker = srcLine != null ? ` // @rip-src:${srcLine}` : '';
         sl.push((isPublic ? `    this.${name} = props.${name} ?? ${val};` : `    this.${name} = ${val};`) + marker);
@@ -1178,9 +1448,6 @@ export function installComponentSupport(CodeEmitter, Lexer) {
 
       // Pre-scan render block for @event: @method bindings to type method params
       const eventMethodTypes = new Map();
-      for (const [eventName, methodName] of autoEventHandlers) {
-        eventMethodTypes.set(methodName, eventName);
-      }
       if (renderBlock) {
         const scanEvents = (node) => {
           if (!Array.isArray(node)) return;
@@ -1199,10 +1466,18 @@ export function installComponentSupport(CodeEmitter, Lexer) {
                 const pair = obj[j];
                 if (!Array.isArray(pair) || pair.length < 2) continue;
                 const [, key, value] = pair;
-                if (Array.isArray(key) && key[0] === '.' && key[1] === 'this' &&
-                    Array.isArray(value) && value[0] === '.' && value[1] === 'this') {
+                if (Array.isArray(key) && key[0] === '.' && key[1] === 'this') {
                   const eventName = typeof key[2] === 'string' ? key[2] : key[2]?.valueOf?.();
-                  const methodName = typeof value[2] === 'string' ? value[2] : value[2]?.valueOf?.();
+                  // Handler ref may be `@event: @handler` (this-member) or the bare
+                  // `@event: handler` (member identifier) — accept either form.
+                  let methodName = null;
+                  if (Array.isArray(value) && value[0] === '.' && value[1] === 'this') {
+                    methodName = typeof value[2] === 'string' ? value[2] : value[2]?.valueOf?.();
+                  } else {
+                    const ident = (typeof value === 'string') ? value
+                                : (value instanceof String) ? value.valueOf() : null;
+                    if (ident && this.componentMembers?.has(ident)) methodName = ident;
+                  }
                   if (eventName && methodName && !eventMethodTypes.has(methodName)) {
                     eventMethodTypes.set(methodName, eventName);
                   }
@@ -1455,6 +1730,18 @@ export function installComponentSupport(CodeEmitter, Lexer) {
                     constructions.push(`    (${val});${marker}`);
                     continue;
                   }
+                  if (key === 'ref') {
+                    // ref: binds the element into a state cell. Type-check the
+                    // cell (the Signal OBJECT, not its `.value`) against the
+                    // tag's element type via __ripRef — mismatched element
+                    // types, non-nullable cells, computed (`~=`) and readonly
+                    // (`=!`) targets all error here.
+                    const refName = (typeof value === 'string' || value instanceof String) ? value.valueOf() : null;
+                    if (refName && /^[A-Za-z_$][\w$]*$/.test(refName) && this.reactiveMembers?.has(refName)) {
+                      (props.refChecks ??= []).push({ code: `__ripRef('${tagName}', this.${refName})`, srcLine });
+                    }
+                    continue;
+                  }
                   if (key.startsWith('__bind_') && key.endsWith('__')) {
                     const propName = key.slice(7, -2);
                     const val = this.emitInComponent(value, 'value');
@@ -1820,6 +2107,18 @@ export function installComponentSupport(CodeEmitter, Lexer) {
             const iProps = extractIntrinsicProps(node.slice(1), tagName, node.loc?.r);
             const tagLine = node.loc?.r;
             const srcMarker = tagLine != null ? ` // @rip-src:${tagLine}` : '';
+            // Element refs check the cell against the element type separately
+            // (the cell is the Signal object, not an HTML attribute value).
+            // Emitted BEFORE the __ripEl call so that, when the ref shares its
+            // source line with the element tag, the FIRST @rip-src marker for
+            // that line is the __ripRef line — that's the statement that can
+            // error, so a `@ts-expect-error` directive lands on it (not on the
+            // never-erroring __ripEl).
+            if (iProps.refChecks) {
+              for (const r of iProps.refChecks) {
+                constructions.push(`    ${r.code};` + (r.srcLine != null ? ` // @rip-src:${r.srcLine}` : ''));
+              }
+            }
             if (iProps.length === 0) {
               constructions.push(`    ${elFn}('${tagName}');${srcMarker}`);
             } else if (iProps.length === 1) {
@@ -1854,7 +2153,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
 
       this.componentMembers = prevComponentMembers;
       this.reactiveMembers = prevReactiveMembers;
-      this._autoEventHandlers = prevAutoEventHandlers;
+      this.refTargetMembers = prevRefTargetMembers;
       this._inheritsTag = prevInheritsTag;
       return sl.join('\n');
     }
@@ -1897,6 +2196,16 @@ export function installComponentSupport(CodeEmitter, Lexer) {
         : `    this.${name} = ${val};`);
     }
 
+    // Plain fields (=) — non-reactive, reassignable properties. A public
+    // `@name = v` field reads its initial value from props once (parent
+    // updates won't re-render — reactive props use `@name :=`/bare `@name`).
+    for (const { name, value, isPublic } of plainVars) {
+      const val = this.emitInComponent(value, 'value');
+      lines.push(isPublic
+        ? `    this.${name} = props.${name} ?? ${val};`
+        : `    this.${name} = ${val};`);
+    }
+
     // Accepted vars (from ancestor context via getContext)
     for (const name of acceptedVars) {
       lines.push(`    this.${name} = getContext('${name}');`);
@@ -2084,7 +2393,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     // Restore context
     this.componentMembers = prevComponentMembers;
     this.reactiveMembers = prevReactiveMembers;
-    this._autoEventHandlers = prevAutoEventHandlers;
+    this.refTargetMembers = prevRefTargetMembers;
     this._inheritsTag = prevInheritsTag;
 
     // If block factories exist, wrap in IIFE so they're in scope
@@ -2148,9 +2457,6 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     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;
-    this._autoWireExplicit = null;
     this._inheritsTargetBound = false;
 
     const statements = this.is(body, 'block') ? body.slice(1) : [body];
@@ -2171,13 +2477,11 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       rootVar = this.newElementVar('empty');
       this._createLines.push(`${rootVar} = document.createComment('');`);
     } else if (renderableCount === 1) {
-      this._pendingAutoWire = !!this._autoEventHandlers;
       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');
@@ -2439,18 +2743,13 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     if (headStr === '.') {
       const [, obj, prop] = sexpr;
 
-      // Property access on this (e.g., @prop, @children)
+      // Property access on this (e.g., @prop) standing alone as a render child.
+      // A bare `@prop` is no longer an implicit text child — `= @prop` renders
+      // text (and `slot` projects children). Directive-position `@event` shorthand
+      // is rewritten to an attribute before reaching here, so anything that lands
+      // here is a bare member in a non-directive child slot: error, never silent.
       if (obj === 'this' && typeof prop === 'string') {
-        const s = this._self;
-        if (this.reactiveMembers && this.reactiveMembers.has(prop)) {
-          const textVar = this.newTextVar();
-          this._createLines.push(`${textVar} = document.createTextNode('');`);
-          this._pushEffect(`${textVar}.data = ${s}.${prop}.value;`);
-          return textVar;
-        }
-        const slotVar = this.newElementVar('slot');
-        this._createLines.push(`${slotVar} = ${s}.${prop} instanceof Node ? ${s}.${prop} : (${s}.${prop} != null ? document.createTextNode(String(${s}.${prop})) : document.createComment(''));`);
-        return slotVar;
+        this.error(`Bare \`@${prop}\` is not rendered as text — use \`= @${prop}\` to render it, or \`slot\` to project children`, sexpr);
       }
 
       // HTML tag with classes (div.class) — skip if base is marked .text by
@@ -2610,29 +2909,6 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     }
   };
 
-  // --------------------------------------------------------------------------
-  // Auto-wire event handlers — claim/emit helpers for on* convention
-  // --------------------------------------------------------------------------
-
-  proto._claimAutoWire = function(elVar) {
-    if (!this._pendingAutoWire || !this._autoEventHandlers?.size) return false;
-    this._pendingAutoWire = false;
-    this._autoWireEl = elVar;
-    this._autoWireExplicit = new Set();
-    return true;
-  };
-
-  proto._emitAutoWire = function(elVar, claimed) {
-    if (!claimed) return;
-    for (const [eventName, methodName] of this._autoEventHandlers) {
-      if (!this._autoWireExplicit.has(eventName)) {
-        this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => __batch(() => ${this._self}.${methodName}(e)));`);
-      }
-    }
-    this._autoWireEl = null;
-    this._autoWireExplicit = null;
-  };
-
   proto._bindInheritedTarget = function(tag, elVar) {
     if (!this._inheritsTag || this._factoryMode || this._inheritsTargetBound) return;
     if (tag !== this._inheritsTag) return;
@@ -2663,8 +2939,6 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       this._createLines.push(`${elVar}.setAttribute('data-part', '${this._componentName}');`);
     }
 
-    const autoWireClaimed = this._claimAutoWire(elVar);
-
     // Defer class emission when selector classes exist so class: attributes merge
     const prevClassArgs = this._pendingClassArgs;
     const prevClassEl = this._pendingClassEl;
@@ -2697,8 +2971,6 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       this._pendingClassEl = prevClassEl;
     }
 
-    this._emitAutoWire(elVar, autoWireClaimed);
-
     return elVar;
   };
 
@@ -2716,8 +2988,6 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     if (id) this._createLines.push(`${elVar}.id = '${id}';`);
     this._bindInheritedTarget(tag, elVar);
 
-    const autoWireClaimed = this._claimAutoWire(elVar);
-
     // Defer className emission so class: attributes can merge with .() classes
     const classArgs = [...(staticClassArgs || []), ...classExprs.map(e => this.emitInComponent(e, 'value'))];
     const prevClassArgs = this._pendingClassArgs;
@@ -2741,11 +3011,38 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     this._pendingClassArgs = prevClassArgs;
     this._pendingClassEl = prevClassEl;
 
-    this._emitAutoWire(elVar, autoWireClaimed);
-
     return elVar;
   };
 
+  // --------------------------------------------------------------------------
+  // Bare event shorthand validation
+  //
+  // `button @click` desugars (in rewriteRender) to `button @click: @onClick`,
+  // marking the generated `onClick` so resolution is method-only: it must name
+  // a real component method, never a local. This is the single choke point that
+  // enforces that contract and rejects the `@error`/onError-lifecycle clash.
+  // --------------------------------------------------------------------------
+
+  proto._checkBareEventHandler = function(value, node) {
+    if (!this.is(value, '.') || value[1] !== 'this') return;
+    const handler = value[2];
+    const bareEvent = (handler instanceof String) ? handler.generatedBareEvent : null;
+    if (!bareEvent) return;  // only generated bare shorthand is policed here
+    const ev = String(bareEvent);
+    if (!DOM_EVENTS.has(ev)) {
+      this.error(`\`@${ev}\` is not a DOM event — use \`= @${ev}\` to render text, or \`@${ev}: handler\` for an explicit handler`, node);
+      return;
+    }
+    if (ev === 'error') {
+      this.error('Bare `@error` is ambiguous with the onError lifecycle hook — write `@error: handler` to bind a DOM error listener explicitly', node);
+      return;
+    }
+    const name = String(handler);
+    if (this.componentMembers && !this.componentMembers.has(name)) {
+      this.error(`Bare \`@${ev}\` requires a component method \`${name}\` — define \`${name}\`, or use \`@${ev}: handler\` for an explicit handler`, node);
+    }
+  };
+
   // --------------------------------------------------------------------------
   // emitAttributes — attributes, events, and bindings on an element
   // --------------------------------------------------------------------------
@@ -2759,9 +3056,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       // Event handler: @click or (. this eventName)
       if (this.is(key, '.') && key[1] === 'this') {
         const eventName = key[2];
-        if (this._autoWireExplicit && this._autoWireEl === elVar) {
-          this._autoWireExplicit.add(eventName);
-        }
+        this._checkBareEventHandler(value, objExpr[i]);
         if (typeof value === 'string' && this.componentMembers?.has(value)) {
           this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => __batch(() => ${this._self}.${value}(e)));`);
         } else {
@@ -2813,10 +3108,46 @@ export function installComponentSupport(CodeEmitter, Lexer) {
           continue;
         }
 
-        // Element ref: ref: "name" → this.name = element
+        // Element ref: ref: cell → bind the live element into a STATE cell.
+        // `cell` is a state member declared `name := null`; we pass the signal
+        // OBJECT (never its .value) and write the element on mount / null on
+        // detach, so effects reading the ref re-run as it appears/disappears.
         if (key === 'ref') {
-          const refName = String(value).replace(/^["']|["']$/g, '');
-          this._createLines.push(`${this._self}.${refName} = ${elVar};`);
+          const refName = _str(value);
+          if (!refName || !/^[A-Za-z_$][\w$]*$/.test(refName)) {
+            this.error(
+              'ref: expects a state cell — declare `el := null` then write `ref: el` (string-name refs were removed)',
+              value
+            );
+          }
+          if (!(this.refTargetMembers && this.refTargetMembers.has(refName))) {
+            // A computed (`~=`) has a get-only `.value`; a readonly (`=!`) is a
+            // frozen plain field — neither can receive the live element.
+            const isComputedOrReadonly = this.reactiveMembers && this.reactiveMembers.has(refName);
+            this.error(
+              isComputedOrReadonly
+                ? `ref: target '${refName}' is not a writable state cell — declare it with ':=' (computed '~=' and readonly '=!' members can't hold a ref)`
+                : `ref: target '${refName}' must be a state cell declared with ':=' (e.g. \`${refName} := null\`)`,
+              value
+            );
+          }
+          // The signal object itself — `this.name` / `ctx.name`, NOT `.value`.
+          const cellExpr = `${this._self}.${refName}`;
+          if (this._factoryMode) {
+            // Dynamic ref (inside if/for): defer the write to AFTER the block
+            // is inserted (the m() phase) so a synchronous flush can never let
+            // an outer effect observe a not-yet-connected node. The enclosing
+            // reconcile / branch-swap pass is wrapped in __batch by the
+            // factory caller. Cleared on real detach (d(detaching)) only —
+            // never on a keyed move.
+            (this._refMounts ??= []).push({ cellExpr, elVar });
+          } else {
+            // Static ref: by mount order the whole subtree is built in
+            // _create(), connected to the document, and only THEN do any
+            // effects first run — so writing here is glitch-free.
+            this._createLines.push(`${cellExpr}.value = ${elVar};`);
+            this._createLines.push(`(this._refCleanups ??= []).push(() => __detachRef(${cellExpr}, ${elVar}));`);
+          }
           continue;
         }
 
@@ -2942,8 +3273,6 @@ export function installComponentSupport(CodeEmitter, Lexer) {
   // --------------------------------------------------------------------------
 
   proto.emitConditional = function(sexpr) {
-    this._pendingAutoWire = false;
-
     // Fold flat else-if chains into nested structure.
     // Parser emits: ['if', c1, t1, ['if', c2, t2], ..., finalElse]
     // We need:      ['if', c1, t1, ['if', c2, t2, [..., finalElse]]]
@@ -2966,12 +3295,12 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     const outerExtra = outerParams ? `, ${outerParams}` : '';
 
     const thenBlockName = this.newBlockVar();
-    this.emitConditionBranch(thenBlockName, thenBlock);
+    let hasDynamicRef = this.emitConditionBranch(thenBlockName, thenBlock);
 
     let elseBlockName = null;
     if (elseBlock) {
       elseBlockName = this.newBlockVar();
-      this.emitConditionBranch(elseBlockName, elseBlock);
+      hasDynamicRef = this.emitConditionBranch(elseBlockName, elseBlock) || hasDynamicRef;
     }
 
     const setupLines = [];
@@ -2987,6 +3316,11 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     const effOpen = this._factoryMode ? 'disposers.push(__effect(() => {' : '__effect(() => {';
     const effClose = this._factoryMode ? '}, {skipRegister: true}));' : '});';
     setupLines.push(`  ${effOpen}`);
+    // A dynamic ref inside a branch writes its cell in the block's m() phase.
+    // Batching the whole create/insert/destroy pass means observers see only
+    // the final cell value and the state setter's `notifying` guard can't drop
+    // a framework write made while another subscriber is mid-flush.
+    if (hasDynamicRef) setupLines.push(`    __batch(() => {`);
     setupLines.push(`    const show = !!(${condCode});`);
     setupLines.push(`    const want = show ? 'then' : ${elseBlock ? "'else'" : 'null'};`);
     setupLines.push(`    if (want === showing) return;`);
@@ -3015,6 +3349,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       setupLines.push(`      if (currentBlock._t) __transition(currentBlock._first, currentBlock._t, 'enter');`);
       setupLines.push(`    }`);
     }
+    if (hasDynamicRef) setupLines.push(`    });`);
     setupLines.push(`  ${effClose}`);
     // Block teardown: when this conditional's enclosing scope ends
     // (factory block detach, or parent component unmount), destroy
@@ -3042,7 +3377,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
   // --------------------------------------------------------------------------
 
   proto.emitConditionBranch = function(blockName, block) {
-    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope];
+    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope, this._refMounts];
 
     this._createLines = [];
     this._setupLines = [];
@@ -3050,25 +3385,29 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     this._factoryVars = new Set();
     // Fresh render-local scope per factory function (see emitTemplateLoop).
     this._renderLocalScope = new Set();
+    this._refMounts = [];
 
     const rootVar = this.emitTemplateBlock(block);
     const createLines = this._createLines;
     const setupLines = this._setupLines;
     const factoryVars = this._factoryVars;
+    const refMounts = this._refMounts;
 
-    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope] = saved;
+    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope, this._refMounts] = saved;
 
     const outerParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
     const extraParams = outerParams ? `, ${outerParams}` : '';
 
-    this.emitBlockFactory(blockName, `ctx${extraParams}`, rootVar, createLines, setupLines, factoryVars);
+    this.emitBlockFactory(blockName, `ctx${extraParams}`, rootVar, createLines, setupLines, factoryVars, false, refMounts);
+    // Report dynamic-ref presence so emitConditional can __batch the swap.
+    return refMounts.length > 0;
   };
 
   // --------------------------------------------------------------------------
   // emitBlockFactory — shared factory generation for conditionals and loops
   // --------------------------------------------------------------------------
 
-  proto.emitBlockFactory = function(blockName, params, rootVar, createLines, setupLines, factoryVars, isStatic) {
+  proto.emitBlockFactory = function(blockName, params, rootVar, createLines, setupLines, factoryVars, isStatic, refMounts) {
     const factoryLines = [];
     factoryLines.push(`function ${blockName}(${params}) {`);
 
@@ -3114,6 +3453,16 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     } else {
       factoryLines.push(`      if (target) target.insertBefore(${rootVar}, anchor);`);
     }
+    // Dynamic refs: write the live element into its cell AFTER insertion, so
+    // the node is connected before any subscriber observes it. The enclosing
+    // reconcile / branch-swap pass is __batch-wrapped (see emitConditional /
+    // emitTemplateLoop). Idempotent on keyed-move re-inserts (the state setter
+    // no-ops when newValue === value).
+    if (refMounts && refMounts.length) {
+      for (const r of refMounts) {
+        factoryLines.push(`      ${r.cellExpr}.value = ${r.elVar};`);
+      }
+    }
     factoryLines.push(`    },`);
 
     factoryLines.push(`    p(${params}) {`);
@@ -3140,6 +3489,17 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     if (hasEffects) {
       factoryLines.push(`      disposers.forEach(d => d());`);
     }
+    // Dynamic refs: compare-and-clear only on a real destroy (detaching===true),
+    // never on a keyed move (which reinserts via m() without calling d()). Runs
+    // AFTER this block's own effects are disposed; batched so any live parent
+    // subscriber (a forwarded ref) is notified exactly once.
+    if (refMounts && refMounts.length) {
+      factoryLines.push(`      if (detaching) __batch(() => {`);
+      for (const r of refMounts) {
+        factoryLines.push(`        __detachRef(${r.cellExpr}, ${r.elVar});`);
+      }
+      factoryLines.push(`      });`);
+    }
     if (fragChildren) {
       for (const child of fragChildren) {
         factoryLines.push(`      if (detaching) __detach(${child});`);
@@ -3160,7 +3520,6 @@ export function installComponentSupport(CodeEmitter, Lexer) {
   // --------------------------------------------------------------------------
 
   proto.emitTemplateLoop = function(sexpr) {
-    this._pendingAutoWire = false;
     const [head, vars, collection, guard, step, body] = sexpr;
 
     const blockName = this.newBlockVar();
@@ -3217,7 +3576,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
       }
     }
 
-    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope];
+    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope, this._refMounts];
 
     this._createLines = [];
     this._setupLines = [];
@@ -3227,6 +3586,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     // surrounding scope are NOT visible here. Loop vars are explicitly
     // threaded as positional parameters via _loopVarStack.
     this._renderLocalScope = new Set();
+    this._refMounts = [];
 
     const outerParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
     const outerExtra = outerParams ? `, ${outerParams}` : '';
@@ -3243,12 +3603,14 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     const itemCreateLines = this._createLines;
     const itemSetupLines = this._setupLines;
     const itemFactoryVars = this._factoryVars;
+    const itemRefMounts = this._refMounts;
 
-    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope] = saved;
+    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars, this._renderLocalScope, this._refMounts] = saved;
 
     const isStatic = itemSetupLines.length === 0;
     const loopParams = `ctx, ${itemVar}, ${indexVar}${outerExtra}`;
-    this.emitBlockFactory(blockName, loopParams, itemNode, itemCreateLines, itemSetupLines, itemFactoryVars, isStatic);
+    this.emitBlockFactory(blockName, loopParams, itemNode, itemCreateLines, itemSetupLines, itemFactoryVars, isStatic, itemRefMounts);
+    const hasDynamicRef = itemRefMounts.length > 0;
 
     // Build key function argument (null = use item as key)
     const hasCustomKey = keyExpr !== itemVar;
@@ -3266,7 +3628,15 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     const effOpen = this._factoryMode ? 'disposers.push(__effect(() => {' : '__effect(() => {';
     const effClose = this._factoryMode ? '}, {skipRegister: true}));' : '});';
     setupLines.push(`  ${effOpen}`);
-    setupLines.push(`    __reconcile(${anchorVar}, __s, ${collectionCode}, ${this._self}, ${blockName}, ${keyFnCode}${outerArgs});`);
+    // Dynamic refs inside the loop body write their cells in each block's m()
+    // phase. Batch the whole reconcile so create/insert/destroy settle to one
+    // flush and the state setter's `notifying` guard can't drop a framework
+    // ref write made while another subscriber is mid-flush.
+    if (hasDynamicRef) {
+      setupLines.push(`    __batch(() => __reconcile(${anchorVar}, __s, ${collectionCode}, ${this._self}, ${blockName}, ${keyFnCode}${outerArgs}));`);
+    } else {
+      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
@@ -3291,7 +3661,6 @@ export function installComponentSupport(CodeEmitter, Lexer) {
   // --------------------------------------------------------------------------
 
   proto.emitChildComponent = function(componentName, args) {
-    this._pendingAutoWire = false;
     const instVar = this.newElementVar('inst');
     const elVar = this.newElementVar('el');
     const { propsCode, reactiveProps, eventBindings, childrenSetupLines } = this.buildComponentProps(args);
@@ -3359,6 +3728,7 @@ export function installComponentSupport(CodeEmitter, Lexer) {
     this._createLines.push(`} finally { __popComponent(__prev); } }`);
 
     for (const { event, value } of eventBindings) {
+      this._checkBareEventHandler(value, value);
       const handlerCode = this.emitInComponent(value, 'value');
       this._createLines.push(`if (${instVar}) ${elVar}.addEventListener('${event}', (e) => __batch(() => (${handlerCode})(e)));`);
     }
@@ -4074,6 +4444,21 @@ class __Component {
       }
       this._disposers = null;
     }
+    // Static template-ref cleanups run AFTER this component's own effects
+    // are disposed (nulling a ref before disposing the effects that read it
+    // could re-run them mid-teardown under the synchronous scheduler) but
+    // before the DOM detaches. Batched so a forwarded ref (a parent-owned
+    // cell filled by a child element) notifies the still-live parent
+    // subscribers exactly once.
+    if (this._refCleanups) {
+      const __cleanups = this._refCleanups;
+      this._refCleanups = null;
+      __batch(() => {
+        for (const c of __cleanups) {
+          try { c(); } catch (e) { console.error('[Rip] ref cleanup error:', e); }
+        }
+      });
+    }
     try {
       if (this.unmounted) this.unmounted();
     } catch (e) { console.error('[Rip] unmounted error:', e); }