@symbiote-native/engine 0.1.7 → 0.2.0

package/build/alert/index.ios.js

@@ -43,6 +43,16 @@ function prompt(title, message, callbackOrButtons, type = 'plain-text', defaultV
             if (btn.isPreferred) {
                 preferredButtonKey = String(index);
             }
+            // UPSTREAM-BUG(react-native): Libraries/Alert/Alert.js:173 - a TRAILING button with no text
+            // is left out of the native buttons array while its onPress still occupies callbacks[index],
+            // so that handler can never fire: native has no id to return for a button it was never told
+            // about. Only the last button, only when textless, which reads more like leftover
+            // length - 1 bookkeeping than an intended "omit a blank trailing button" affordance.
+            // Ported for parity; do NOT fix without recording a deliberate divergence.
+            //
+            // The `!== undefined` here IS a deliberate divergence from upstream's truthy `btn.text`:
+            // an explicit `text: ''` is a caller asking for a blank label, not an omission, and this
+            // codebase treats falsy-vs-absent as distinct on principle. Upstream drops that button.
             if (btn.text !== undefined || index < callbackOrButtons.length - 1) {
                 buttons.push({ [index]: btn.text ?? '' });
             }

package/build/animated/color.d.ts

@@ -1,12 +1,8 @@
 import { AnimatedWithChildren } from './graph';
 import { AnimatedValue } from './value';
 import type { INativeNodeConfig, IPlatformConfig } from './native/native-animated';
-export interface IRgbaValue {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-}
+import { normalizeColor, type IRgbaValue } from './rgba';
+export { normalizeColor, type IRgbaValue };
 type IChannel = number | AnimatedValue;
 interface IRgbaInput {
     r: IChannel;
@@ -15,7 +11,6 @@ interface IRgbaInput {
     a: IChannel;
 }
 export type IColorInput = IRgbaInput | IRgbaValue | string | number;
-export declare function normalizeColor(color: string | number): IRgbaValue | undefined;
 export declare class AnimatedColor extends AnimatedWithChildren {
     readonly r: AnimatedValue;
     readonly g: AnimatedValue;
@@ -34,4 +29,3 @@ export declare class AnimatedColor extends AnimatedWithChildren {
     __makeNative(platformConfig?: IPlatformConfig): void;
     __getNativeConfig(): INativeNodeConfig;
 }
-export {};

package/build/animated/color.js

@@ -6,57 +6,16 @@
 // normalizeColor / processColorObject, which live outside shared).
 import { AnimatedWithChildren, flushValue } from './graph.js';
 import { AnimatedValue } from './value.js';
-const DEFAULT_COLOR = { r: 0, g: 0, b: 0, a: 1 };
+import { DEFAULT_COLOR, normalizeColor } from './rgba.js';
+// Re-exported so every existing `from './color'` import keeps working; the definitions now
+// live in the dependency-free ./rgba leaf (see its header for the cycle it breaks).
+export { normalizeColor };
 function isRgbaInput(value) {
     return typeof value === 'object' && value !== null && 'r' in value && 'g' in value;
 }
 function toChannel(value) {
     return value instanceof AnimatedValue ? value : new AnimatedValue(value);
 }
-// Decompose a #hex (3/4/6/8), rgb()/rgba(), or 0xRRGGBBAA number into channels.
-// undefined when unparseable (a named/platform color), so the caller falls back to
-// the default rather than throwing inside a render. Exported so interpolation's
-// color path parses through the same RGBA decoder (DRY) rather than duplicating it.
-export function normalizeColor(color) {
-    if (typeof color === 'number') {
-        const c = color >>> 0;
-        return { r: (c >>> 24) & 255, g: (c >>> 16) & 255, b: (c >>> 8) & 255, a: (c & 255) / 255 };
-    }
-    const trimmed = color.trim();
-    if (trimmed.startsWith('#'))
-        return parseHex(trimmed);
-    if (/^rgba?\(/i.test(trimmed))
-        return parseRgb(trimmed);
-    return undefined;
-}
-function parseHex(hex) {
-    let body = hex.slice(1);
-    if (body.length === 3 || body.length === 4) {
-        body = body
-            .split('')
-            .map(c => c + c)
-            .join('');
-    }
-    if (body.length !== 6 && body.length !== 8)
-        return undefined;
-    const int = Number.parseInt(body, 16);
-    if (Number.isNaN(int))
-        return undefined;
-    if (body.length === 6) {
-        return { r: (int >>> 16) & 255, g: (int >>> 8) & 255, b: int & 255, a: 1 };
-    }
-    const c = int >>> 0;
-    return { r: (c >>> 24) & 255, g: (c >>> 16) & 255, b: (c >>> 8) & 255, a: (c & 255) / 255 };
-}
-function parseRgb(str) {
-    const match = /^rgba?\(([^)]+)\)$/i.exec(str);
-    if (match === null)
-        return undefined;
-    const parts = match[1].split(',').map(part => Number.parseFloat(part.trim()));
-    if (parts.length < 3 || parts.some(n => Number.isNaN(n)))
-        return undefined;
-    return { r: parts[0], g: parts[1], b: parts[2], a: parts.length >= 4 ? parts[3] : 1 };
-}
 // Resolve any input form to four concrete channel values (numbers or pre-built
 // AnimatedValues), so the constructor can wrap each in an AnimatedValue.
 function resolveInput(value) {

package/build/animated/easing.js

@@ -4,15 +4,12 @@
 import { bezier } from './bezier.js';
 let cachedEase;
 export const Easing = {
-    // A stepping function: 1 for any positive n, else 0.
     step0(n) {
         return n > 0 ? 1 : 0;
     },
-    // A stepping function: 1 once n >= 1, else 0.
     step1(n) {
         return n >= 1 ? 1 : 0;
     },
-    // Linear, f(t) = t.
     linear(t) {
         return t;
     },
@@ -23,11 +20,9 @@ export const Easing = {
         }
         return cachedEase(t);
     },
-    // Quadratic, f(t) = t * t.
     quad(t) {
         return t * t;
     },
-    // Cubic, f(t) = t * t * t.
     cubic(t) {
         return t * t * t;
     },
@@ -35,15 +30,12 @@ export const Easing = {
     poly(n) {
         return t => Math.pow(t, n);
     },
-    // Sinusoidal.
     sin(t) {
         return 1 - Math.cos((t * Math.PI) / 2);
     },
-    // Circular.
     circle(t) {
         return 1 - Math.sqrt(1 - t * t);
     },
-    // Exponential.
     exp(t) {
         return Math.pow(2, 10 * (t - 1));
     },

package/build/animated/graph.d.ts

@@ -1,11 +1,8 @@
 import { type INativeNodeConfig, type IPlatformConfig } from './native/native-animated';
-import type { IInterpolationConfig } from './interpolation';
-import type { AnimatedInterpolation } from './interpolation-node';
+import { type IInterpolationConfig } from './interpolation';
 export type IValueListener = (state: {
     value: number | string;
 }) => void;
-type IInterpolationFactory = (parent: AnimatedNode, config: IInterpolationConfig) => AnimatedInterpolation;
-export declare function registerInterpolationFactory(factory: IInterpolationFactory): void;
 export declare class AnimatedNode {
     private readonly listeners;
     private suspendCallbacks;
@@ -41,4 +38,15 @@ export declare class AnimatedWithChildren extends AnimatedNode {
     __callListeners(value: number | string): void;
 }
 export declare function flushValue(rootNode: AnimatedNode): void;
-export {};
+export declare class AnimatedInterpolation extends AnimatedWithChildren {
+    private readonly parent;
+    private readonly config;
+    private interpolation;
+    constructor(parent: AnimatedNode, config: IInterpolationConfig);
+    private getInterpolation;
+    __getValue(): number | string;
+    __attach(): void;
+    __detach(): void;
+    __makeNative(platformConfig?: IPlatformConfig): void;
+    __getNativeConfig(): INativeNodeConfig;
+}

package/build/animated/graph.js

@@ -10,11 +10,9 @@
 //   B) bottom-up: each flagged leaf re-pulls its whole subtree via __getValue()
 //      to rebuild composite props (e.g. transform from many parents).
 import { generateNativeNodeTag, nativeAnimated, } from './native/native-animated.js';
+import { checkValidRanges, createInterpolation } from './interpolation.js';
+import { dlog } from '../debug.js';
 let nextListenerId = 1;
-let createInterpolationNode;
-export function registerInterpolationFactory(factory) {
-    createInterpolationNode = factory;
-}
 // Depth of the currently-active withSuspendedCallbacks blocks. While > 0, a
 // composite setter (AnimatedColor.setValue) is driving several channels in a row;
 // each channel's own flushValue is suppressed so the bound leaf commits ONCE (at
@@ -104,13 +102,10 @@ export class AnimatedNode {
     }
     // Map this node's value before it reaches a prop, e.g. 0..1 -> 0..10. Defined once
     // here (Information Expert: every node subclass wants the identical one-liner)
-    // instead of duplicated per subclass; see registerInterpolationFactory above for
-    // why the concrete constructor is injected rather than imported directly.
+    // instead of duplicated per subclass. AnimatedInterpolation lives at the bottom of
+    // THIS file rather than its own module on purpose — see the comment there.
     interpolate(config) {
-        if (createInterpolationNode === undefined) {
-            throw new Error('AnimatedNode.interpolate: interpolation factory not registered');
-        }
-        return createInterpolationNode(this, config);
+        return new AnimatedInterpolation(this, config);
     }
     __addChild(_child) { }
     __removeChild(_child) { }
@@ -199,8 +194,18 @@ export class AnimatedWithChildren extends AnimatedNode {
         super.__callListeners(value);
         // A native-driven node's children are updated natively; don't also walk them
         // here (their values aren't tracked in JS while native owns the animation).
-        if (this.isNative)
+        //
+        // Diagnostic seam, permanent: this early return is what silences a JS listener sitting on a
+        // CHILD of a value that was made native (a sticky header's interpolation under a natively
+        // attached scroll value). A consumer whose only driver is that listener then goes dead with no
+        // other symptom - see the sticky-header bootstrap notes. Logged only when children are
+        // actually being skipped, so a childless native value stays quiet.
+        if (this.isNative) {
+            if (this.children.length > 0) {
+                dlog(`STICKY[cascade] native value silences ${this.children.length} child JS listener(s) value=${String(value)}`);
+            }
             return;
+        }
         for (const child of this.children) {
             child.__callListeners(numericValueOf(child));
         }
@@ -238,3 +243,72 @@ export function flushValue(rootNode) {
     collect(rootNode);
     leaves.forEach(update => update());
 }
+// AnimatedInterpolation: a graph node that maps its parent's numeric value through an
+// interpolation. Ported from RN's AnimatedInterpolation.js (numeric, string-with-units and
+// color output ranges; platform colors stay out of scope, color.ts defers them).
+//
+// IT LIVES HERE, NOT IN ITS OWN MODULE, AND MUST STAY HERE. It used to sit in
+// `interpolation-node.ts` and hand its constructor back to `AnimatedNode.interpolate()` through
+// a `registerInterpolationFactory` call executed at module load — the usual trick for breaking
+// an import cycle (this module owns the base classes that module extended). That trick is
+// UNSOUND under Metro's production bundle: `inlineRequires` (production-only) defers a module's
+// `require()` to the first use of its binding, nothing in the codebase ever names
+// `AnimatedInterpolation` as a value, and a barrel's `export { X } from './x'` compiles to a
+// lazy getter — so the module never evaluated, the factory was never registered, and the first
+// `.interpolate()` on a device threw `interpolation factory not registered`, blanking the screen
+// in RELEASE builds only (dev was fine, every headless test was fine, and the code was even
+// present in the bundle — it just never ran). Adding a bare `import './interpolation-node'` to
+// the barrel does NOT fix it either: Babel merges that import with the adjacent re-export of the
+// same specifier, and the merged dependency stays lazy. Both were tried on device 2026-08-14.
+//
+// Keeping the class next to its base class removes the cycle, the factory, and the entire class
+// of load-order bug with it: `interpolate()` constructs it directly and there is nothing left to
+// register. Do not "tidy" it back into its own file.
+export class AnimatedInterpolation extends AnimatedWithChildren {
+    parent;
+    config;
+    interpolation;
+    constructor(parent, config) {
+        super();
+        this.parent = parent;
+        this.config = config;
+        // Validate eagerly so a bad range fails at construction, not first frame.
+        checkValidRanges(config.inputRange, config.outputRange);
+    }
+    getInterpolation() {
+        if (this.interpolation === undefined) {
+            this.interpolation = createInterpolation(this.config);
+        }
+        return this.interpolation;
+    }
+    __getValue() {
+        const parentValue = this.parent.__getValue();
+        if (typeof parentValue !== 'number') {
+            throw new Error('Cannot interpolate an input which is not a number');
+        }
+        return this.getInterpolation()(parentValue);
+    }
+    __attach() {
+        this.parent.__addChild(this);
+        super.__attach();
+    }
+    __detach() {
+        this.parent.__removeChild(this);
+        super.__detach();
+    }
+    // Make the upstream value native first, so the parent->interpolation edge can be
+    // wired when this node is reached from a leaf rather than from the value.
+    __makeNative(platformConfig) {
+        this.parent.__makeNative(platformConfig);
+        super.__makeNative(platformConfig);
+    }
+    __getNativeConfig() {
+        return {
+            type: 'interpolation',
+            inputRange: this.config.inputRange,
+            outputRange: this.config.outputRange,
+            extrapolateLeft: this.config.extrapolateLeft ?? this.config.extrapolate ?? 'extend',
+            extrapolateRight: this.config.extrapolateRight ?? this.config.extrapolate ?? 'extend',
+        };
+    }
+}

package/build/animated/index.d.ts

@@ -1,7 +1,6 @@
-export { AnimatedNode, AnimatedWithChildren, flushValue, type IValueListener } from './graph';
+export { AnimatedNode, AnimatedWithChildren, AnimatedInterpolation, flushValue, type IValueListener, } from './graph';
 export { AnimatedValue } from './value';
 export { AnimatedValueXY, type IValueXY } from './value-xy';
-export { AnimatedInterpolation } from './interpolation-node';
 export { AnimatedAddition, AnimatedSubtraction, AnimatedMultiplication, AnimatedDivision, AnimatedModulo, AnimatedDiffClamp, add, subtract, multiply, divide, modulo, diffClamp, } from './operators';
 export { AnimatedEvent, event, forkEvent, unforkEvent, attachNativeEvent, attachNativeEventHandler, type IEventConfig, type IEventListener, type IAnimatedEventHandler, type INativeEventAttachment, } from './event';
 export { AnimatedColor, type IRgbaValue, type IColorInput } from './color';
@@ -15,6 +14,7 @@ export { AnimatedTracking } from './animations/tracking';
 export { timing, spring, decay, parallel, sequence, stagger, loop, delay, type ICompositeAnimation, type ITimingConfig, type ISpringConfig, type IDecayConfig, type IParallelConfig, type ILoopAnimationConfig, } from './animations/composition';
 export { nativeAnimated, isNativeAnimatedAvailable, type INativeNodeConfig, type INativeAnimationConfig, type INativeEventMapping, type IPlatformConfig, } from './native/native-animated';
 export { AnimatedProps } from './props';
+export { createAnimatedLeafLifecycle, type IAnimatedLeafLifecycle } from './leaf-lifecycle';
 export { AnimatedStyle, AnimatedTransform } from './style';
 export { AnimatedMock } from './mock';
 export { reduceProps, isAnimatedNode, readPassthroughStyle, resolveHostNode } from './shared';

package/build/animated/index.js

@@ -1,10 +1,9 @@
 // @symbiote-native/engine/animated: the framework-agnostic, JS-driven Animated engine.
 // The value graph, easing, interpolation and drivers are pure JS with no React
 // and no native dependency; every adapter re-exports them.
-export { AnimatedNode, AnimatedWithChildren, flushValue } from './graph.js';
+export { AnimatedNode, AnimatedWithChildren, AnimatedInterpolation, flushValue, } from './graph.js';
 export { AnimatedValue } from './value.js';
 export { AnimatedValueXY } from './value-xy.js';
-export { AnimatedInterpolation } from './interpolation-node.js';
 export { AnimatedAddition, AnimatedSubtraction, AnimatedMultiplication, AnimatedDivision, AnimatedModulo, AnimatedDiffClamp, add, subtract, multiply, divide, modulo, diffClamp, } from './operators.js';
 export { AnimatedEvent, event, forkEvent, unforkEvent, attachNativeEvent, attachNativeEventHandler, } from './event.js';
 export { AnimatedColor } from './color.js';
@@ -22,6 +21,7 @@ export { nativeAnimated, isNativeAnimatedAvailable, } from './native/native-anim
 // no React/Vue). They live here with the rest of the graph; every adapter's
 // createAnimatedComponent + Animated namespace re-exports them.
 export { AnimatedProps } from './props.js';
+export { createAnimatedLeafLifecycle } from './leaf-lifecycle.js';
 export { AnimatedStyle, AnimatedTransform } from './style.js';
 export { AnimatedMock } from './mock.js';
 // Framework-agnostic createAnimatedComponent helpers. Both adapters import them.

package/build/animated/interpolation.js

@@ -4,7 +4,7 @@
 // extrapolation. A numeric output range stays number -> number; a string output
 // range (values-with-units like '0deg' or colors like '#000') is interpolated
 // per numeric token and reassembled. See createStringInterpolation below.
-import { normalizeColor } from './color.js';
+import { normalizeColor } from './rgba.js';
 import { Easing } from './easing.js';
 function interpolateSegment(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight) {
     let result = input;

package/build/animated/leaf-lifecycle.d.ts

@@ -0,0 +1,7 @@
+import type { ISymbioteNode } from '../node';
+export type IScheduleNativeBind = (bind: () => void) => (() => void) | void;
+export type IAnimatedLeafLifecycle = {
+    reconcile(props: Record<string, unknown>, node: ISymbioteNode | null, wantsNative: boolean, scheduleNativeBind?: IScheduleNativeBind): void;
+    teardown(): void;
+};
+export declare function createAnimatedLeafLifecycle(label: string): IAnimatedLeafLifecycle;

package/build/animated/leaf-lifecycle.js

@@ -0,0 +1,185 @@
+// The AnimatedProps leaf lifecycle every Animated.* wrapper needs: build a leaf from the current
+// props, swap it into the value graph, bind it to the committed node, go native when asked, and
+// rebind native event props. Framework-agnostic on purpose - it knows nothing about hooks,
+// effects, change detection or reactivity, only the engine's own Animated primitives.
+//
+// WHY THIS LIVES IN THE ENGINE. It used to live four times, once per adapter (React's
+// create-animated-component.tsx, Vue's create-animated-component.ts, Svelte's
+// animated-props-runtime.ts, Angular's animated-leaf-binder.ts). Each re-derived the same policy,
+// and they drifted: only Svelte ever grew the rebuild guard below, after a day of device
+// debugging in 2026-08. React's `useMemo(..., [rest])` LOOKS like the same guard but is not - its
+// dependency is a fresh rest-destructured object every render - and Vue's `pendingLeaf === null`
+// answers "has render run yet", not "did anything change". A fix landing in one copy is exactly
+// what <adapters_reach_full_feature_parity> forbids: parity has to be structural.
+//
+// What stays in the adapter: WHEN to call reconcile (an effect, onUpdated, ngOnChanges, a $effect)
+// and HOW to find the host node (a ref, a ViewChild, a shim). Everything below is the same for all.
+import { AnimatedProps } from './props.js';
+import { attachNativeEventHandler } from './event.js';
+import { dlog } from '../debug.js';
+// Diagnostic-only, DEBUG-gated: a process-wide sequence number so every reconcile call across
+// every Animated.* instance in a log dump is individually identifiable and orderable.
+let globalReconcileSeq = 0;
+// Per-key identity comparison, NOT deep equality. A style/handler/props object that is memoized
+// upstream stays `===` across ticks that did not touch it, which is what distinguishes "same
+// content" from a real change. Deep-comparing instead would walk live AnimatedNode graphs, which
+// are circular.
+//
+// The caller MUST pass a stored SNAPSHOT as `a` - see `lastProps` below. Handing this the same
+// live object on both sides compares it with itself and is unconditionally true.
+function shallowEqualProps(a, b) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    for (const key of aKeys) {
+        if (a[key] !== b[key])
+            return false;
+    }
+    return true;
+}
+// Diagnostic-only. `style` here is a raw prop value, so it can be anything the caller wrote -
+// an object, an array of them, a class name, undefined. Read the field, do not assume a shape.
+function readTransform(style) {
+    if (typeof style !== 'object' || style === null)
+        return undefined;
+    return Reflect.get(style, 'transform');
+}
+// Diagnostic-only: a SHALLOW, non-serializing description of a style.transform array. Props here
+// carry RAW values - an animated entry is a live AnimatedNode in a circular parent<->children
+// graph - so JSON.stringify throws "Converting circular structure to JSON". Describe by
+// constructor name instead of walking it.
+function describeTransform(value) {
+    if (!Array.isArray(value))
+        return String(value);
+    const entries = value.map(entry => {
+        if (typeof entry !== 'object' || entry === null)
+            return String(entry);
+        const [key] = Object.keys(entry);
+        const inner = key === undefined ? undefined : Reflect.get(entry, key);
+        const innerDesc = typeof inner === 'number' || typeof inner === 'string'
+            ? String(inner)
+            : `<${inner !== null && typeof inner === 'object' ? inner.constructor.name : typeof inner}>`;
+        return `${key}:${innerDesc}`;
+    });
+    return `[${entries.join(',')}]`;
+}
+export function createAnimatedLeafLifecycle(label) {
+    let attached = null;
+    let eventDetachers = [];
+    // Diagnostic-only: the last node identity, plus a reentrancy flag to catch reconcile() being
+    // called AGAIN from inside its own call stack - the smoking-gun shape for a synchronous
+    // same-flush loop, as opposed to merely "called often".
+    let lastNode = null;
+    let inReconcile = false;
+    // Last-seen props/wantsNative for the skip below - a real content check, not diagnostics.
+    let lastProps = null;
+    let lastWantsNative = false;
+    // Canceller for a native bind the caller deferred and that has not run yet.
+    let cancelPendingBind;
+    function detachEvents() {
+        for (const detach of eventDetachers)
+            detach();
+        eventDetachers = [];
+    }
+    return {
+        reconcile(props, node, wantsNative, scheduleNativeBind) {
+            const seq = ++globalReconcileSeq;
+            const reentrant = inReconcile;
+            const nodeChanged = node !== lastNode;
+            const wantsNativeChanged = wantsNative !== lastWantsNative;
+            const propsChanged = lastProps === null || !shallowEqualProps(lastProps, props);
+            lastNode = node;
+            lastWantsNative = wantsNative;
+            // A SNAPSHOT, never the reference. A caller can legitimately hand back the SAME object on
+            // every update, mutating what its keys resolve to rather than allocating (Svelte's rest
+            // proxy does exactly that, device-confirmed 2026-08-13); storing it would make the next
+            // call run shallowEqualProps on that object against ITSELF - reading the same current values
+            // through both sides - which is unconditionally true. `propsChanged` could then never be
+            // true again and reconcile would be skipped forever, so every rebuilt AnimatedInterpolation
+            // never reaches the native graph: the view stays wired to the FIRST interpolation, built
+            // before measurement with range [-1,0]->[0,0]. One pixel of travel, which on device reads as
+            // "the sticky header ignores scrolling entirely".
+            lastProps = { ...props };
+            // Thunk, not a string: reconcile runs on EVERY update of every Animated.* wrapper in the
+            // app (Angular re-reads it on each change-detection pass), and describeTransform allocates.
+            // Built eagerly it would cost its full price with logging off.
+            dlog(() => `AnimatedProps[${label}] reconcile#${seq} reentrant=${reentrant} wantsNative=${wantsNative} ` +
+                `hasNode=${node !== null} nodeChanged=${nodeChanged} propsChanged=${propsChanged} ` +
+                `transform=${describeTransform(readTransform(props.style))}`);
+            if (reentrant) {
+                dlog(`AnimatedProps[${label}] reconcile#${seq} *** RE-ENTRANT CALL DETECTED - see reconcile above ***`);
+            }
+            // Nothing meaningfully changed since the last call AND we are already natively connected
+            // (steady state) - skip tearing down and rebuilding the native AnimatedProps graph.
+            //
+            // Deliberately scoped to `attached.__isNative()` ONLY: before the first native connection,
+            // reconcile must run unconditionally on every tick - that cadence is what wires a rebuilt
+            // interpolation node into the shared value's children (AnimatedInterpolation.__attach ->
+            // parent.__addChild, cascaded from AnimatedProps.__attach); skipping there can leave a
+            // freshly rebuilt interpolation never attached, so its listener never fires. Once native and
+            // staying native, that bootstrap concern is moot - and rebuilding there was the
+            // collision-disappearance bug: every scroll-driven passthrough tick reconnected a brand new
+            // native node (restoreDefaultValues + connect) even though nothing animated-relevant had
+            // changed, and a reconnect landing exactly when scrolling stopped left the view frozen at
+            // its post-reset default until the next tick.
+            if (attached !== null &&
+                attached.__isNative() &&
+                !nodeChanged &&
+                !wantsNativeChanged &&
+                !propsChanged) {
+                dlog(`AnimatedProps[${label}] reconcile#${seq} skipped (no-op: already native, props/node unchanged)`);
+                return;
+            }
+            inReconcile = true;
+            try {
+                // Attach the NEW leaf BEFORE detaching the OLD one: a shared Value self-detaches (dropping
+                // its native node) the instant its child count hits zero, so detaching first would kill a
+                // running native animation on any unrelated update. Mirrors RN's
+                // AnimatedComponent._attachProps.
+                const newLeaf = new AnimatedProps(props);
+                newLeaf.__attach();
+                if (attached !== null && attached !== newLeaf)
+                    attached.__detach();
+                attached = newLeaf;
+                // The native half, which a caller may defer. Rebinds events each reconcile so a new inline
+                // event re-attaches, detaching first so the prior binding does not leak;
+                // attachNativeEventHandler no-ops unless the prop really is a native event handler on a
+                // committed node, so the JS path stays the fallback.
+                const bindNative = () => {
+                    if (node !== null)
+                        newLeaf.setNativeView(node);
+                    if (wantsNative)
+                        newLeaf.__makeNative();
+                    detachEvents();
+                    if (node === null)
+                        return;
+                    for (const key of Object.keys(props)) {
+                        const attachment = attachNativeEventHandler(node, key, props[key]);
+                        if (attachment !== undefined)
+                            eventDetachers.push(attachment.detach);
+                    }
+                };
+                cancelPendingBind?.();
+                cancelPendingBind = undefined;
+                if (scheduleNativeBind === undefined || node === null) {
+                    bindNative();
+                    return;
+                }
+                cancelPendingBind = scheduleNativeBind(bindNative) ?? undefined;
+            }
+            finally {
+                inReconcile = false;
+            }
+        },
+        teardown() {
+            cancelPendingBind?.();
+            cancelPendingBind = undefined;
+            detachEvents();
+            if (attached !== null) {
+                attached.__detach();
+                attached = null;
+            }
+        },
+    };
+}

package/build/animated/native/native-animated.js

@@ -101,6 +101,7 @@ export const nativeAnimated = {
         module()?.stopAnimation(animationId);
     },
     setAnimatedNodeValue(nodeTag, value) {
+        dlog(`native: setAnimatedNodeValue node=${nodeTag} value=${value}`);
         module()?.setAnimatedNodeValue(nodeTag, value);
     },
     setAnimatedNodeOffset(nodeTag, offset) {

package/build/animated/rgba.d.ts

@@ -0,0 +1,8 @@
+export interface IRgbaValue {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export declare const DEFAULT_COLOR: IRgbaValue;
+export declare function normalizeColor(color: string | number): IRgbaValue | undefined;

package/build/animated/rgba.js

@@ -0,0 +1,55 @@
+// Pure RGBA parsing — no graph node, no AnimatedValue, no imports from this package at all.
+//
+// It is split out of color.ts DELIBERATELY, and must stay dependency-free. `interpolation.ts`
+// needs `normalizeColor` for its color output ranges, and `graph.ts` needs `interpolation.ts`
+// (AnimatedInterpolation lives there). color.ts also defines `AnimatedColor extends
+// AnimatedWithChildren`, so leaving the parser there closes a cycle
+//   graph -> interpolation -> color -> graph
+// which surfaces at load time as `TypeError: Class extends value undefined is not a
+// constructor` — AnimatedWithChildren is still uninitialized when color.ts evaluates. Keeping
+// the pure half in its own leaf module breaks it structurally rather than by import ordering.
+export const DEFAULT_COLOR = { r: 0, g: 0, b: 0, a: 1 };
+// Decompose a #hex (3/4/6/8), rgb()/rgba(), or 0xRRGGBBAA number into channels.
+// undefined when unparseable (a named/platform color), so the caller falls back to
+// the default rather than throwing inside a render. Exported so interpolation's
+// color path parses through the same RGBA decoder (DRY) rather than duplicating it.
+export function normalizeColor(color) {
+    if (typeof color === 'number') {
+        const c = color >>> 0;
+        return { r: (c >>> 24) & 255, g: (c >>> 16) & 255, b: (c >>> 8) & 255, a: (c & 255) / 255 };
+    }
+    const trimmed = color.trim();
+    if (trimmed.startsWith('#'))
+        return parseHex(trimmed);
+    if (/^rgba?\(/i.test(trimmed))
+        return parseRgb(trimmed);
+    return undefined;
+}
+function parseHex(hex) {
+    let body = hex.slice(1);
+    if (body.length === 3 || body.length === 4) {
+        body = body
+            .split('')
+            .map(c => c + c)
+            .join('');
+    }
+    if (body.length !== 6 && body.length !== 8)
+        return undefined;
+    const int = Number.parseInt(body, 16);
+    if (Number.isNaN(int))
+        return undefined;
+    if (body.length === 6) {
+        return { r: (int >>> 16) & 255, g: (int >>> 8) & 255, b: int & 255, a: 1 };
+    }
+    const c = int >>> 0;
+    return { r: (c >>> 24) & 255, g: (c >>> 16) & 255, b: (c >>> 8) & 255, a: (c & 255) / 255 };
+}
+function parseRgb(str) {
+    const match = /^rgba?\(([^)]+)\)$/i.exec(str);
+    if (match === null)
+        return undefined;
+    const parts = match[1].split(',').map(part => Number.parseFloat(part.trim()));
+    if (parts.length < 3 || parts.some(n => Number.isNaN(n)))
+        return undefined;
+    return { r: parts[0], g: parts[1], b: parts[2], a: parts.length >= 4 ? parts[3] : 1 };
+}