@symbiote-native/engine 0.4.0 → 0.5.0

package/build/node.js

@@ -8,7 +8,7 @@ import { isAriaAliasKey } from './accessibility-props.js';
 import { isEventFor } from './view-config.js';
 import { canonicalClassName, isClassNameValue, resolveActiveClassName, resolveClassName, } from './style-registry/index.js';
 import { dlog } from './debug.js';
-import { attachHostBehavior, hasHostBehaviors, markDetachCandidate, ownsListener, reattachHostBehaviors, stashAppListener, } from './host-behavior.js';
+import { appListenerFor, attachHostBehavior, claimModeFor, hasHostBehaviors, markDetachCandidate, notifyChildInserted, notifyOwnedListenerChange, notifyWrapChange, ownsListener, reattachHostBehaviors, derivedNodesOf, slotDerivesFrom, slotPropNameFor, slotTakesChildren, stashAppListener, } from './host-behavior.js';
 // A cycle, deliberately: commit.ts imports this module for the node shape, and the imperative
 // methods below call back into it. Neither side touches the other at module-evaluation time -
 // only inside a function body - so every loader (tsc, vitest, Metro) resolves it fine. The
@@ -17,6 +17,11 @@ import { attachHostBehavior, hasHostBehaviors, markDetachCandidate, ownsListener
 // release builds (see CLAUDE.md, "Never make correctness depend on a module's load-time side
 // effect").
 import { measure as engineMeasure, measureInWindow as engineMeasureInWindow, measureLayout as engineMeasureLayout, setNativeProps as engineSetNativeProps, dispatchViewCommand, } from './commit.js';
+// The same deliberate cycle, for the same reason: `routeProp` resolves an AnimatedNode written
+// into a prop, and the module that owns that resolution reaches back here for `setProp`. See
+// `animated/host-binding.ts`'s header.
+import { hasAnimatedNodes } from './animated/graph.js';
+import { bindAnimatedEvent, bindAnimatedValue, hasAnimatedBindings, reattachAnimatedProps, } from './animated/host-binding.js';
 const BRAND = Symbol('symbiote.node');
 // A node carries the Fabric view name directly, so adding a primitive (Image,
 // ScrollView, TextInput) is just a new string from the adapter, no core change.
@@ -37,6 +42,10 @@ export function isSymbioteEvent(value) {
 }
 const FOCUS_COMMAND = 'focus';
 const BLUR_COMMAND = 'blur';
+// Names and arg order mirror RN's ScrollViewCommands.
+const SCROLL_TO_COMMAND = 'scrollTo';
+const SCROLL_TO_END_COMMAND = 'scrollToEnd';
+const FLASH_SCROLL_INDICATORS_COMMAND = 'flashScrollIndicators';
 // The one shape every retained node has. A class, not an object literal, for two reasons: the six
 // imperative methods live on the shared prototype instead of being allocated per node (see
 // ISymbioteNode above), and both factories below mint the same hidden class.
@@ -75,6 +84,11 @@ class SymbioteNode {
         // Assigned here for the same hidden-class reason as `hasAriaAlias` above; `attachHostBehavior`
         // overwrites it a few lines later for the rare node that has a behavior.
         this.payloadFold = undefined;
+        // Same reason again, and here it is load-bearing rather than tidy: the redirect below is read
+        // on every append, so the slot must be a stable slot on one hidden class, not a property added
+        // to a few nodes after the fact.
+        this.childHost = undefined;
+        this.wrapper = undefined;
     }
     measure(callback) {
         engineMeasure(this, callback);
@@ -98,6 +112,25 @@ class SymbioteNode {
     blur() {
         dispatchViewCommand(this, BLUR_COMMAND, []);
     }
+    // The defaults live HERE and nowhere else. `buildScrollViewHandle`
+    // (`@symbiote-native/components`) used to own them and now delegates, so the wrapper's handle and
+    // a lowered element's node cannot drift on what `scrollTo()` with no argument means.
+    scrollTo(options) {
+        const x = options?.x ?? 0;
+        const y = options?.y ?? 0;
+        const animated = options?.animated ?? true;
+        dlog(`ScrollView.scrollTo x=${x} y=${y} animated=${animated}`);
+        dispatchViewCommand(this, SCROLL_TO_COMMAND, [x, y, animated]);
+    }
+    scrollToEnd(options) {
+        const animated = options?.animated ?? true;
+        dlog(`ScrollView.scrollToEnd animated=${animated}`);
+        dispatchViewCommand(this, SCROLL_TO_END_COMMAND, [animated]);
+    }
+    flashScrollIndicators() {
+        dlog('ScrollView.flashScrollIndicators');
+        dispatchViewCommand(this, FLASH_SCROLL_INDICATORS_COMMAND, []);
+    }
 }
 /**
  * The committed record for `node`, or `undefined` if it has never been committed - or if `node` is
@@ -331,6 +364,22 @@ export function setProp(node, key, value) {
     // `role` / `aria-*` write in the engine passes through this line.
     if (!node.hasAriaAlias && isAriaAliasKey(key))
         node.hasAriaAlias = true;
+    // A composed primitive's slot — and its wrapper, where it has one — can carry a value DERIVED
+    // from an owner prop, and `markPropsDirty` bubbles up, so neither ever learns. Here rather than
+    // in `routeProp` because this is the one choke point every writer passes (a structural adapter's
+    // `setProperty` does not go through routeProp), and past the identity guard so a re-render
+    // writing an unchanged value costs them nothing. See `IHostBehavior.slotDerived`.
+    if (node.childHost !== undefined && slotDerivesFrom(node, key)) {
+        markPropsDirty(node.childHost);
+        // Past the slot: a `buildStructure` that builds a CHAIN registers the deeper nodes here, and
+        // each keeps its own pure fold reading the owner. See `addDerivedNode`.
+        const derived = derivedNodesOf(node);
+        if (derived !== undefined)
+            for (const each of derived)
+                markPropsDirty(each);
+        if (node.wrapper !== undefined)
+            markPropsDirty(node.wrapper);
+    }
     propStats.writes += 1;
     markPropsDirty(node);
 }
@@ -371,12 +420,20 @@ const GATED_EVENT_PROPS = new Map([
  * `setEventListener` diverts an owned name into the stash, which is right for an app listener and
  * circular for the behavior's own dispatcher — it would stash itself and never occupy the slot it
  * exists to hold. This is the one writer allowed past that gate.
+ *
+ * `undefined` removes it, gate flag included. A behavior whose dispatcher is conditional needs
+ * that as much as it needs the install: ScrollView takes the owner's `layout` only while the app
+ * or an inverted sticky header wants it, and a one-way installer leaves `onLayout: true` standing
+ * in the payload of a ScrollView that no longer reads the event.
  */
 export function setBehaviorListener(node, name, listener) {
-    (node.listeners ??= new Map()).set(name, listener);
+    if (listener === undefined)
+        node.listeners?.delete(name);
+    else
+        (node.listeners ??= new Map()).set(name, listener);
     const flagProp = GATED_EVENT_PROPS.get(name);
     if (flagProp !== undefined)
-        setProp(node, flagProp, true);
+        setProp(node, flagProp, listener === undefined ? undefined : true);
 }
 export function setEventListener(node, name, value) {
     const isHandler = typeof value === 'function';
@@ -388,7 +445,13 @@ export function setEventListener(node, name, value) {
     // reached the node; lowering removes the mediator. Gated on the boolean first, so an app with no
     // behavior registered pays one read.
     if (hasHostBehaviors() && ownsListener(node, name)) {
+        // The PRESENCE only, never the identity: listeners deliberately do not notify (a framework
+        // hands a fresh closure nearly every render — see `markDirty`'s note on why that must stay
+        // free). A flip is a mount-time event, not a per-render one.
+        const wasWired = appListenerFor(node, name) !== undefined;
         stashAppListener(node, name, isHandler ? value : undefined);
+        if (wasWired !== isHandler)
+            notifyOwnedListenerChange(node, name, isHandler);
         const flagged = GATED_EVENT_PROPS.get(name);
         if (flagged !== undefined)
             setProp(node, flagged, isHandler ? true : undefined);
@@ -635,12 +698,46 @@ const CLASS_PROP_KEYS = new Set(['class', 'className']);
 export function routeProp(node, key, value) {
     if (REACT_JSX_DEV_PROPS.has(key))
         return;
+    // The prop twin of the child redirect in `appendChild`. A composed primitive's owner is written
+    // with props that belong to its internal slot — `contentContainerStyle` on a ScrollView styles
+    // the content view — and the adapter names the OWNER for a prop for the same reason it names the
+    // owner for a child: that is where the app wrote it.
+    //
+    // Gated on the FIELD, so a node with no slot pays one load and one branch and never touches the
+    // registry. The redirected write recurses into the slot's own `routeProp`, which is single-hop
+    // by construction: a slot has no slot of its own (`childHost` is documented single-hop, and
+    // `buildStructure` is what would have to nest one).
+    if (node.childHost !== undefined) {
+        const slotKey = slotPropNameFor(node, key);
+        if (slotKey !== undefined) {
+            // A class NAME is a legal spelling of `contentContainerStyle` — every canary writes
+            // `contentContainerStyle="scroll-content"` — so a string has to land on the slot as a
+            // CLASS. Only the class branch consults the registry; renaming it verbatim would publish a
+            // `style` holding a string, which is not a style and is dropped with nothing red. React's
+            // wrapper resolves the name itself (components/scroll-view/shared.ts), so this gap could
+            // only ever show on the tag path.
+            routeProp(node.childHost, slotKey === 'style' && typeof value === 'string' ? 'class' : slotKey, value);
+            return;
+        }
+    }
+    // An AnimatedNode written straight into a prop — `<view style={{opacity: value}}/>` — is
+    // resolved here into the value to PUBLISH, with the engine holding the subscription. Same
+    // shape as the `style` callback below: a value the engine interprets rather than forwards.
+    // Returns its input by identity when nothing is animated, so every branch under this line is
+    // unchanged. See `animated/host-binding.ts`; the gate is one boolean for an app that animates
+    // nothing.
+    //
+    // AFTER the slot redirect, so an animated `contentContainerStyle` binds on the node that
+    // actually carries the style.
+    const resolved = hasAnimatedNodes()
+        ? bindAnimatedValue(node, key, value)
+        : value;
     if (CLASS_PROP_KEYS.has(key)) {
         const parts = stylePartsOf(node);
         // Canonicalised HERE so the stored value is what everything downstream keys on: an all-string
         // array becomes one string, and then the pressed variant and isAlreadyPublished work on it
         // exactly as on an authored string. One `typeof` for the common case.
-        parts.className = canonicalClassName(isClassNameValue(value) ? value : undefined);
+        parts.className = canonicalClassName(isClassNameValue(resolved) ? resolved : undefined);
         parts.classStyle = resolveClassName(parts.className);
         pushClassStyle(node, parts);
         return;
@@ -660,13 +757,13 @@ export function routeProp(node, key, value) {
         //
         // The callback must be PURE in `pressed`: its result is read once per state, here and under
         // every transform's emission (`core/components/src/state-style.ts` carries the same contract).
-        if (isStyleCallback(value)) {
-            parts.explicitStyle = value({ pressed: false });
-            parts.activeStyle = value({ pressed: true });
+        if (isStyleCallback(resolved)) {
+            parts.explicitStyle = resolved({ pressed: false });
+            parts.activeStyle = resolved({ pressed: true });
             parts.activeStyleFromCallback = true;
         }
         else {
-            parts.explicitStyle = value;
+            parts.explicitStyle = resolved;
             // Only a variant WE derived is stale now. `style` switching from a callback to a plain value
             // must not leave the old pressed look standing, and an `activeStyle` the transform wrote must
             // survive a `style` write, because the two arrive as independent props in an unspecified
@@ -683,7 +780,7 @@ export function routeProp(node, key, value) {
     // in the app carries an unknown key to native.
     if (key === 'activeStyle') {
         const parts = stylePartsOf(node);
-        parts.activeStyle = value;
+        parts.activeStyle = resolved;
         // Slot 1 is no longer ours, by definition — whatever a callback derived earlier has just been
         // replaced. Without this the flag outlives the value it describes: a callback sets it, this
         // branch overwrites the slot silently, and a later plain `style` then clears a variant the
@@ -695,6 +792,10 @@ export function routeProp(node, key, value) {
         return;
     }
     if (ON_PREFIX.test(key)) {
+        // A native-driven `Animated.event` needs the native module as well as the listener map, and
+        // registers under the PROP name — see `bindAnimatedEvent`, which no-ops for anything else.
+        if (hasAnimatedNodes())
+            bindAnimatedEvent(node, key, resolved);
         const name = listenerName(key);
         const isRegisteredEvent = RESPONDER_EVENTS.has(name) || isEventFor(node.component, name);
         // Investigation instrumentation (HeaderOptionsScreen unresponsive-buttons bug): RNS* views
@@ -707,11 +808,11 @@ export function routeProp(node, key, value) {
                 `registered=${isRegisteredEvent} at t=${Date.now()}`);
         }
         if (isRegisteredEvent) {
-            setEventListener(node, name, value);
+            setEventListener(node, name, resolved);
             return;
         }
     }
-    setProp(node, key, value);
+    setProp(node, key, resolved);
 }
 // The same no-op guard as setProp, and here it is strictly stronger: `text` is a string, so
 // `Object.is` is a real value comparison rather than the reference check it degrades to for a style
@@ -749,33 +850,183 @@ function detach(child) {
         parent.children.splice(index, 1);
     child.parent = undefined;
 }
-export function appendChild(parent, child) {
+// The one place a composed primitive's slot is honoured. See `ISymbioteNode.childHost`: the adapter
+// always names the OWNER, and a node whose behavior built an internal subtree redirects the app's
+// children into it.
+//
+// SINGLE HOP, not a loop, and the field's own comment says why — a chain would put a walk on the
+// engine's hottest path to express a depth no primitive has. A behavior needing depth points
+// `childHost` at the innermost node itself.
+//
+// Reads a field that is `undefined` on every node in every app that registers no composed
+// primitive, so the cost is one load and one branch — deliberately NOT behind `hasHostBehaviors()`,
+// which would be a second read to save nothing.
+// Which node a child actually lands on. See `ISymbioteNode.childHost`: the adapter always names the
+// OWNER, and a node whose behavior built an internal subtree redirects the app's children into it —
+// unless the behavior CLAIMS this particular child, which keeps it on the owner (`claimedChildren`).
+//
+// SINGLE HOP, not a loop, and the field's own comment says why — a chain would put a walk on the
+// engine's hottest path to express a depth no primitive has. A behavior needing depth points
+// `childHost` at the innermost node itself.
+//
+// Reads a field that is `undefined` on every node in every app that registers no composed
+// primitive, so the cost is one load and one branch — deliberately NOT behind `hasHostBehaviors()`,
+// which would be a second read to save nothing. The claim check sits BEHIND that branch, so only a
+// slot-bearing node ever pays the registry probe.
+function hostFor(parent, child) {
+    const slot = parent.childHost;
+    if (slot === undefined)
+        return parent;
+    // A slot that is a built SIBLING rather than a container — ImageBackground's absolutely-filled
+    // image — keeps the app's children on the owner. See `IHostBehavior.slotTakesNoChildren`.
+    if (!slotTakesChildren(parent))
+        return parent;
+    return claimModeFor(parent, child.component) === undefined ? slot : parent;
+}
+// What actually occupies this node's place in its parent's child list. See `ISymbioteNode.wrapper`:
+// a wrapped owner is what the adapter names and the wrapper is what the tree holds, so every
+// structural op takes the owner and moves the wrapper.
+function placedNode(node) {
+    return node.wrapper ?? node;
+}
+// Make `child` the owner's parent, in place. Returns false when this is not a wrap claim, so the
+// two inserts fall through to the ordinary path on one call.
+//
+// The owner being UNATTACHED is the normal case rather than the edge one: every adapter fills a
+// node's children before appending it to its own parent, so the wrap usually happens while
+// `owner.parent` is undefined and the swap below is skipped. The later `appendChild(root, owner)`
+// then inserts the wrapper instead, because `placedNode` says so.
+function wrapsOwner(owner, child) {
+    if (owner.childHost === undefined)
+        return false;
+    if (claimModeFor(owner, child.component) !== 'wrap')
+        return false;
+    if (hasHostBehaviors())
+        reattachHostBehaviors(child);
+    if (hasAnimatedBindings())
+        reattachAnimatedProps(child);
+    detach(child);
+    const outerParent = owner.parent;
+    if (outerParent !== undefined) {
+        markStructureDirty(outerParent);
+        outerParent.children[outerParent.children.indexOf(owner)] = child;
+        child.parent = outerParent;
+    }
+    owner.wrapper = child;
+    owner.parent = child;
+    markStructureDirty(child);
+    child.children.push(owner);
+    notifyWrapChange(owner, child);
+    return true;
+}
+// Put the owner back where its wrapper stood — the mirror of `wrapsOwner`. It must leave the owner
+// ATTACHED: the framework is removing the RefreshControl, not the ScrollView.
+function unwrapsOwner(owner, child) {
+    if (owner.wrapper !== child)
+        return false;
+    const outerParent = child.parent;
+    owner.wrapper = undefined;
+    if (outerParent !== undefined) {
+        markStructureDirty(outerParent);
+        outerParent.children[outerParent.children.indexOf(child)] = owner;
+    }
+    owner.parent = outerParent;
+    child.parent = undefined;
+    child.children.length = 0;
+    notifyWrapChange(owner, undefined);
+    return true;
+}
+// Where the child goes in its host's list.
+//
+// A host that STILL has a slot at this point is an owner taking a CLAIMED child, and that child
+// goes before the slot whatever the framework asked for. RN renders `{refreshControl}{content}` in
+// that order, and the node a framework names as `beforeChild` lives inside the slot, so `indexOf`
+// could not find it here anyway.
+function indexFor(host, beforeChild) {
+    const slot = host.childHost;
+    // A sibling slot is the OPPOSITE placement: RN paints the background image first and the app's
+    // children over it (ImageBackground.js:80-102), so they append past it rather than in front of
+    // it. Falls through to the ordinary index below, which is what leaves their relative order alone.
+    if (slot !== undefined && slotTakesChildren(host))
+        return host.children.indexOf(slot);
+    // `null` is Solid's spelling of "append"; `undefined` is `appendChild`'s own. Both end up here.
+    if (beforeChild === undefined || beforeChild === null)
+        return host.children.length;
+    const index = host.children.indexOf(beforeChild);
+    return index < 0 ? host.children.length : index;
+}
+export function appendChild(requestedParent, child) {
+    if (wrapsOwner(requestedParent, child))
+        return;
+    const parent = hostFor(requestedParent, child);
     // A node the sweep tore down can be put back — Svelte parks live subtrees offscreen across
     // commits. A WeakSet miss for anything freshly built, so the create path pays nothing.
     if (hasHostBehaviors())
         reattachHostBehaviors(child);
-    detach(child);
+    if (hasAnimatedBindings())
+        reattachAnimatedProps(child);
+    const placed = placedNode(child);
+    detach(placed);
     markStructureDirty(parent);
-    child.parent = parent;
-    parent.children.push(child);
+    placed.parent = parent;
+    if (parent.childHost !== undefined) {
+        parent.children.splice(indexFor(parent, undefined), 0, placed);
+    }
+    else {
+        parent.children.push(placed);
+    }
+    if (hasHostBehaviors())
+        notifyChildInserted(parent, placed);
 }
-export function insertBefore(parent, child, beforeChild) {
+// `beforeChild` is genuinely nullable and the signature used to say otherwise: Solid's renderer
+// spells "append" as `insertBefore(parent, child, null)`, which worked by accident because
+// `indexOf(null)` is -1 and the old fallback appended. Reading a field off it is what made the lie
+// fatal, so the type now says what the callers do.
+export function insertBefore(requestedParent, child, beforeChild) {
+    if (wrapsOwner(requestedParent, child))
+        return;
+    const parent = hostFor(requestedParent, child);
     if (hasHostBehaviors())
         reattachHostBehaviors(child);
-    detach(child);
+    if (hasAnimatedBindings())
+        reattachAnimatedProps(child);
+    const placed = placedNode(child);
+    detach(placed);
     markStructureDirty(parent);
-    child.parent = parent;
-    const index = parent.children.indexOf(beforeChild);
-    parent.children.splice(index < 0 ? parent.children.length : index, 0, child);
+    placed.parent = parent;
+    parent.children.splice(indexFor(parent, beforeChild === null ? null : placedNode(beforeChild)), 0, placed);
+    if (hasHostBehaviors())
+        notifyChildInserted(parent, placed);
 }
 // Removal only NOMINATES a behavior for teardown; the commit sweep decides. A framework may spell
 // a move as remove-then-reinsert (Solid does), so tearing down here kills the machine of a node
 // that comes back alive in the same batch — see host-behavior.ts's markDetachCandidate.
-export function removeChild(parent, child) {
-    if (hasHostBehaviors())
+export function removeChild(requestedParent, child) {
+    // Redirected for the same reason the two inserts are: the adapter removes from the node it
+    // appended to, which is the OWNER, while the child actually lives in the slot. Without this the
+    // `indexOf` misses, the splice no-ops, and the child stays committed under the slot forever
+    // while the framework believes it is gone — a leak with nothing red anywhere.
+    //
+    // A wrap claim leaving: the owner takes its own place back and stays in the tree. Nominated for
+    // teardown like any other removed node, because the wrapper IS leaving.
+    if (unwrapsOwner(requestedParent, child)) {
+        if (hasHostBehaviors() || hasAnimatedBindings())
+            markDetachCandidate(child);
+        return;
+    }
+    // A slot that IS the child being removed stops being one. Only a behavior that adopts an APP
+    // child as its slot can reach this (`onChildInserted`); a `buildStructure` slot is internal and
+    // no framework removes it. Without the clear, `hostFor` below redirects the removal INTO the very
+    // node being removed, `indexOf` misses, the splice no-ops, and the child stays committed under a
+    // parent the framework believes it left — and the NEXT child appended nests inside the orphan.
+    if (requestedParent.childHost === child)
+        requestedParent.childHost = undefined;
+    const parent = hostFor(requestedParent, child);
+    if (hasHostBehaviors() || hasAnimatedBindings())
         markDetachCandidate(child);
     markStructureDirty(parent);
-    const index = parent.children.indexOf(child);
+    const placed = placedNode(child);
+    const index = parent.children.indexOf(placed);
     if (index >= 0)
         parent.children.splice(index, 1);
     child.parent = undefined;

package/build/pan-responder/index.d.ts

@@ -29,7 +29,7 @@ export interface IPanResponderCallbacks {
     onPanResponderTerminationRequest?: IActiveCallback;
     onShouldBlockNativeResponder?: IActiveCallback;
 }
-export interface IGestureResponderHandlers {
+export type IGestureResponderHandlers = {
     onStartShouldSetResponder: (event: ISymbioteEvent) => boolean;
     onStartShouldSetResponderCapture: (event: ISymbioteEvent) => boolean;
     onMoveShouldSetResponder: (event: ISymbioteEvent) => boolean;
@@ -42,7 +42,7 @@ export interface IGestureResponderHandlers {
     onResponderRelease: (event: ISymbioteEvent) => void;
     onResponderTerminate: (event: ISymbioteEvent) => void;
     onResponderTerminationRequest: (event: ISymbioteEvent) => boolean;
-}
+};
 export interface IPanResponderInstance {
     panHandlers: IGestureResponderHandlers;
     getInteractionHandle: () => number | null;

package/build/pan-responder/index.js

@@ -250,9 +250,11 @@ const PanResponder = {
         };
         const panHandlers = {
             onStartShouldSetResponder(event) {
-                return config.onStartShouldSetPanResponder === undefined
+                const wants = config.onStartShouldSetPanResponder === undefined
                     ? false
                     : config.onStartShouldSetPanResponder(event, gestureState);
+                dlog(`PanResponder startShouldSet -> ${wants}`);
+                return wants;
             },
             onMoveShouldSetResponder(event) {
                 return config.onMoveShouldSetPanResponder === undefined
@@ -320,12 +322,16 @@ const PanResponder = {
             },
             onResponderMove(event) {
                 const touches = readTouches(event);
-                // Same duplicate-frame guard as the capture path.
-                if (gestureState._accountsForMovesUpTo ===
-                    frameTimestampOf(event, touches)) {
+                const frame = frameTimestampOf(event, touches);
+                // Same duplicate-frame guard as the capture path. Logged on BOTH sides: a frame
+                // stamp that never advances swallows every move while the handlers themselves keep
+                // firing, so the app looks inert with nothing to see from the outside.
+                if (gestureState._accountsForMovesUpTo === frame) {
+                    dlog(`PanResponder move SWALLOWED frame=${frame} touches=${touches.length} history=${touchHistoryOf(event) === undefined ? 'none' : 'yes'}`);
                     return;
                 }
                 updateGestureStateOnMove(gestureState, event, touches);
+                dlog(`PanResponder move frame=${frame} dx=${gestureState.dx} dy=${gestureState.dy}`);
                 config.onPanResponderMove?.(event, gestureState);
             },
             onResponderEnd(event) {

package/build/styles.d.ts

@@ -1,3 +1,4 @@
+import type { AnimatedNode } from './animated/graph';
 import type { IColorValue } from './platform-color';
 export type IDimensionValue = number | string;
 export type IFlexAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
@@ -223,7 +224,10 @@ export interface ITextStyle extends IViewStyle {
 }
 type IStyleFalsy = false | null | undefined | '';
 type IRecursiveArray<T> = ReadonlyArray<T | IRecursiveArray<T>>;
-export type IStyleProp<T> = T | IStyleFalsy | IRecursiveArray<T | IStyleFalsy>;
+type IWithAnimated<T> = T extends AnimatedNode ? T : T extends string | number | boolean | null | undefined ? T | AnimatedNode : T extends ReadonlyArray<infer TItem> ? ReadonlyArray<IWithAnimated<TItem>> : T extends object ? {
+    [K in keyof T]: IWithAnimated<T[K]>;
+} : T;
+export type IStyleProp<T> = IWithAnimated<T> | IStyleFalsy | IRecursiveArray<IWithAnimated<T> | IStyleFalsy>;
 export type INamedStyles<T> = {
     [P in keyof T]: IViewStyle | ITextStyle;
 };

package/build/surface.js

@@ -5,6 +5,8 @@ import { commitChildren } from './commit.js';
 import { dlog } from './debug.js';
 import { installEventHandler } from './events/index.js';
 import { markStructureDirty } from './node.js';
+import { hasHostBehaviors, markDetachCandidate } from './host-behavior.js';
+import { hasAnimatedBindings } from './animated/host-binding.js';
 export class SymbioteSurface {
     rootTag;
     children = [];
@@ -23,12 +25,24 @@ export class SymbioteSurface {
         const index = this.children.indexOf(beforeChild);
         this.children.splice(index < 0 ? this.children.length : index, 0, child);
     }
+    // Nominates for teardown exactly as `node.ts`'s `removeChild` does, and for the same reason it
+    // only NOMINATES: a framework may spell a move as remove-then-reinsert, so the commit sweep
+    // decides. Without this the surface is the one removal path that never reaches the sweep, and a
+    // node's behavior — its timers included — outlives the surface with nothing red.
+    //
+    // `detach` above is deliberately NOT nominated: the two inserts call it to reposition a child
+    // that is staying.
     removeChild(child) {
         const index = this.children.indexOf(child);
         if (index >= 0)
             this.children.splice(index, 1);
+        if (hasHostBehaviors() || hasAnimatedBindings())
+            markDetachCandidate(child);
     }
     clear() {
+        if (hasHostBehaviors() || hasAnimatedBindings())
+            for (const child of this.children)
+                markDetachCandidate(child);
         this.children.length = 0;
     }
     // Synchronous commit: used by React's resetAfterCommit, which already

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/engine",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "SymbioteNative's retained shadow-tree engine — clone-on-write commit path + event normalization over React Native Fabric, shared by every framework adapter.",
   "license": "MIT",
   "repository": {