@symbiote-native/engine 0.1.7 → 0.3.0

package/README.md

@@ -9,7 +9,7 @@ current one, clones only what changed, and calls `completeRoot` — the persiste
 dance Fabric requires, done **once**, for every framework.
 
 > New to SymbioteNative? The [root README](../../README.md) has the architecture and the one fact it
-> rests on — React is just *one client* of `nativeFabricUIManager`. This package is what sits
+> rests on — React is just _one client_ of `nativeFabricUIManager`. This package is what sits
 > between every adapter and that native slot.
 
 ---
@@ -48,17 +48,24 @@ The entire surface a renderer seam drives:
 
 ```ts
 import {
-  createElement, createRawText, createAnchor,
-  appendChild, insertBefore, removeChild,
-  routeProp, setEventListener, setProp, setText,
+  createElement,
+  createRawText,
+  createAnchor,
+  appendChild,
+  insertBefore,
+  removeChild,
+  routeProp,
+  setEventListener,
+  setProp,
+  setText,
 } from '@symbiote-native/engine';
 
-const node = createElement('RCTView');          // component IS the Fabric view name
+const node = createElement('RCTView'); // component IS the Fabric view name
 const text = createRawText('Hello');
 appendChild(node, text);
-routeProp(node, 'onPress', () => {});            // ← the flat-bag entry point (React/Vue/Solid):
-                                                  //   decides event-vs-prop via the ViewConfig,
-                                                  //   NOT by the "onX" naming convention
+routeProp(node, 'onPress', () => {}); // ← the flat-bag entry point (React/Vue/Solid):
+//   decides event-vs-prop via the ViewConfig,
+//   NOT by the "onX" naming convention
 ```
 
 `routeProp` is the one call a flat-bag adapter should route every prop through — a **structural**
@@ -72,7 +79,7 @@ import { createSurface } from '@symbiote-native/engine';
 
 const surface = createSurface(rootTag);
 surface.appendChild(root, node);
-surface.commit();          // synchronous — for a framework that already batches (React)
+surface.commit(); // synchronous — for a framework that already batches (React)
 // surface.requestCommit(); // microtask-coalesced — for reactive frameworks (Vue/Svelte/Angular)
 ```
 
@@ -98,7 +105,7 @@ before a tag is guaranteed to exist.
 - **The style pipeline** — `flattenStyle`, the CSS-style processors RN itself runs in JS
   (`processBoxShadow`, `processFilter`, `processTransform`, `processTransformOrigin`,
   `processAspectRatio`, `processFontVariant`, `processBackgroundImage`), and the runtime
-  **class-name registry** (`registerStyles` / `resolveClassName` / `scopeClassName`) that
+  **class-name registry** (`registerRules` / `resolveClassName` / `renameClassTokens`) that
   `@symbiote-native/css-parser`'s build-time output resolves against — shared by every adapter's
   `class` / `className` / `addClass` prop path.
 - **`AppRegistry` core** (`createAppRegistry`) — registry bookkeeping + headless-task plumbing;

package/build/action-sheet-ios/index.js

@@ -41,7 +41,10 @@ export const ActionSheetIOS = {
         else if (typeof destructiveButtonIndex === 'number') {
             destructiveButtonIndices = [destructiveButtonIndex];
         }
-        const nativeOptions = { ...remainingOptions, destructiveButtonIndices };
+        const nativeOptions = {
+            ...remainingOptions,
+            destructiveButtonIndices,
+        };
         manager.showActionSheetWithOptions(nativeOptions, buttonIndex => {
             dlog(`ActionSheetIOS callback buttonIndex=${buttonIndex}`);
             callback(buttonIndex);

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/animations/composition.js

@@ -211,7 +211,9 @@ export function loop(animation, config = {}) {
                 return;
             }
             const restart = (result = { finished: true }) => {
-                if (isFinished || iterationsSoFar === iterations || result.finished === false) {
+                if (isFinished ||
+                    iterationsSoFar === iterations ||
+                    result.finished === false) {
                     callback?.(result);
                 }
                 else {

package/build/animated/animations/spring-config.js

@@ -34,7 +34,10 @@ export function fromBouncinessAndSpeed(bounciness, speed) {
         return 0.000044 * Math.pow(x, 3) - 0.006 * Math.pow(x, 2) + 0.36 * x + 2;
     }
     function b3Friction3(x) {
-        return 0.00000045 * Math.pow(x, 3) - 0.000332 * Math.pow(x, 2) + 0.1078 * x + 5.84;
+        return (0.00000045 * Math.pow(x, 3) -
+            0.000332 * Math.pow(x, 2) +
+            0.1078 * x +
+            5.84);
     }
     function b3Nobounce(tension) {
         if (tension <= 18)

package/build/animated/animations/spring.js

@@ -6,10 +6,12 @@
 // continuous. The native-config export is dropped.
 import { dlog } from '../../debug.js';
 import { BaseAnimation } from './base.js';
-import { cancelFrame, clearTimer, requestFrame, setTimer } from './raf.js';
-import { fromBouncinessAndSpeed, fromOrigamiTensionAndFriction } from './spring-config.js';
+import { cancelFrame, clearTimer, requestFrame, setTimer, } from './raf.js';
+import { fromBouncinessAndSpeed, fromOrigamiTensionAndFriction, } from './spring-config.js';
 function resolveStiffnessDampingMass(config) {
-    if (config.stiffness !== undefined || config.damping !== undefined || config.mass !== undefined) {
+    if (config.stiffness !== undefined ||
+        config.damping !== undefined ||
+        config.mass !== undefined) {
         return {
             stiffness: config.stiffness ?? 100,
             damping: config.damping ?? 10,
@@ -18,10 +20,18 @@ function resolveStiffnessDampingMass(config) {
     }
     if (config.bounciness !== undefined || config.speed !== undefined) {
         const springConfig = fromBouncinessAndSpeed(config.bounciness ?? 8, config.speed ?? 12);
-        return { stiffness: springConfig.stiffness, damping: springConfig.damping, mass: 1 };
+        return {
+            stiffness: springConfig.stiffness,
+            damping: springConfig.damping,
+            mass: 1,
+        };
     }
     const springConfig = fromOrigamiTensionAndFriction(config.tension ?? 40, config.friction ?? 7);
-    return { stiffness: springConfig.stiffness, damping: springConfig.damping, mass: 1 };
+    return {
+        stiffness: springConfig.stiffness,
+        damping: springConfig.damping,
+        mass: 1,
+    };
 }
 export class SpringAnimation extends BaseAnimation {
     overshootClamping;
@@ -141,7 +151,8 @@ export class SpringAnimation extends BaseAnimation {
             position =
                 this.toValue -
                     envelope *
-                        (((v0 + zeta * omega0 * x0) / omega1) * Math.sin(omega1 * t) + x0 * Math.cos(omega1 * t));
+                        (((v0 + zeta * omega0 * x0) / omega1) * Math.sin(omega1 * t) +
+                            x0 * Math.cos(omega1 * t));
             velocity =
                 zeta *
                     omega0 *
@@ -149,13 +160,15 @@ export class SpringAnimation extends BaseAnimation {
                     ((Math.sin(omega1 * t) * (v0 + zeta * omega0 * x0)) / omega1 +
                         x0 * Math.cos(omega1 * t)) -
                     envelope *
-                        (Math.cos(omega1 * t) * (v0 + zeta * omega0 * x0) - omega1 * x0 * Math.sin(omega1 * t));
+                        (Math.cos(omega1 * t) * (v0 + zeta * omega0 * x0) -
+                            omega1 * x0 * Math.sin(omega1 * t));
         }
         else {
             // Critically damped.
             const envelope = Math.exp(-omega0 * t);
             position = this.toValue - envelope * (x0 + (v0 + omega0 * x0) * t);
-            velocity = envelope * (v0 * (t * omega0 - 1) + t * x0 * (omega0 * omega0));
+            velocity =
+                envelope * (v0 * (t * omega0 - 1) + t * x0 * (omega0 * omega0));
         }
         this.lastTime = now;
         this.lastPosition = position;
@@ -177,7 +190,8 @@ export class SpringAnimation extends BaseAnimation {
         const isVelocity = Math.abs(velocity) <= this.restSpeedThreshold;
         let isDisplacement = true;
         if (this.stiffness !== 0) {
-            isDisplacement = Math.abs(this.toValue - position) <= this.restDisplacementThreshold;
+            isDisplacement =
+                Math.abs(this.toValue - position) <= this.restDisplacementThreshold;
         }
         if (isOvershooting || (isVelocity && isDisplacement)) {
             if (this.stiffness !== 0) {

package/build/animated/animations/timing.js

@@ -5,7 +5,7 @@
 import { Easing } from '../easing.js';
 import { dlog } from '../../debug.js';
 import { BaseAnimation } from './base.js';
-import { cancelFrame, clearTimer, requestFrame, setTimer } from './raf.js';
+import { cancelFrame, clearTimer, requestFrame, setTimer, } from './raf.js';
 let cachedEaseInOut;
 function easeInOut() {
     if (cachedEaseInOut === undefined) {
@@ -80,7 +80,8 @@ export class TimingAnimation extends BaseAnimation {
             return;
         }
         this.onUpdate(this.fromValue +
-            this.easing((now - this.startTime) / this.duration) * (this.toValue - this.fromValue));
+            this.easing((now - this.startTime) / this.duration) *
+                (this.toValue - this.fromValue));
         if (this.__active) {
             this.animationFrame = requestFrame(() => this.onFrame());
         }

package/build/animated/bezier.js

@@ -40,7 +40,8 @@ function binarySubdivide(x, lower, upper, mX1, mX2) {
         else {
             lo = currentT;
         }
-    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION &&
+        ++i < SUBDIVISION_MAX_ITERATIONS);
     return currentT;
 }
 function newtonRaphsonIterate(x, guess, mX1, mX2) {

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;
+    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) {
@@ -100,7 +59,9 @@ export class AnimatedColor extends AnimatedWithChildren {
     // pattern). flushValue dedupes by leaf identity, so a single flush rebuilds
     // every bound prop once even though four channels changed.
     setValue(value) {
-        const rgba = typeof value === 'object' ? value : (normalizeColor(value) ?? DEFAULT_COLOR);
+        const rgba = typeof value === 'object'
+            ? value
+            : (normalizeColor(value) ?? DEFAULT_COLOR);
         this.withSuspendedCallbacks(() => {
             this.r.setValue(rgba.r);
             this.g.setValue(rgba.g);

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/event.js

@@ -17,14 +17,16 @@ import { dlog } from '../debug.js';
 import { getNativeTag, whenCommitted } from '../commit.js';
 import { isSymbioteNode } from '../node.js';
 import { AnimatedNode, flushValue } from './graph.js';
-import { isNativeAnimatedAvailable, nativeAnimated } from './native/native-animated.js';
+import { isNativeAnimatedAvailable, nativeAnimated, } from './native/native-animated.js';
 import { isRecord } from '../type-guards.js';
 // A value node settable from an event field. AnimatedValue carries setValue; we
 // duck-type it (rather than importing AnimatedValue) to keep this leaf-agnostic
 // and avoid a value<->event import cycle.
 function settableValue(node) {
     const candidate = Reflect.get(node, 'setValue');
-    return typeof candidate === 'function' ? value => candidate.call(node, value) : undefined;
+    return typeof candidate === 'function'
+        ? value => candidate.call(node, value)
+        : undefined;
 }
 // Walk the mapping to every leaf AnimatedNode, recording its key path. Shared by
 // the JS handler (to set values) and the native attach (to register paths).
@@ -128,7 +130,9 @@ export class AnimatedEvent {
             if (!this.attachedNatively) {
                 // Paths are stored relative to `nativeEvent` (the native module excludes
                 // that prefix); the JS event arg still carries it, so re-add it here.
-                const nativeEvent = isRecord(args[0]) ? Reflect.get(args[0], 'nativeEvent') : undefined;
+                const nativeEvent = isRecord(args[0])
+                    ? Reflect.get(args[0], 'nativeEvent')
+                    : undefined;
                 for (const mapped of this.mappedValues) {
                     const extracted = extractAtPath(nativeEvent, mapped.path);
                     if (extracted === undefined)

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
@@ -83,7 +81,10 @@ export class AnimatedNode {
             // (AnimatedNode.js:146-148) rather than in each node's config method.
             const config = this.platformConfig === undefined
                 ? this.__getNativeConfig()
-                : { ...this.__getNativeConfig(), platformConfig: this.platformConfig };
+                : {
+                    ...this.__getNativeConfig(),
+                    platformConfig: this.platformConfig,
+                };
             nativeAnimated.createAnimatedNode(this.nativeTag, config);
         }
         return this.nativeTag;
@@ -104,13 +105,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 +197,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));
         }
@@ -216,7 +224,9 @@ function numericValueOf(node) {
 // under useDefineForClassFields. So leaves are detected structurally instead.
 function leafUpdate(node) {
     const candidate = Reflect.get(node, 'update');
-    return typeof candidate === 'function' ? () => candidate.call(node) : undefined;
+    return typeof candidate === 'function'
+        ? () => candidate.call(node)
+        : undefined;
 }
 // Top-down walk to the leaves, then re-pull each leaf (deduped by node identity,
 // so a diamond in the graph still updates a leaf once). Suppressed inside a
@@ -238,3 +248,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';
+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,7 +21,8 @@ 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.
-export { reduceProps, isAnimatedNode, readPassthroughStyle, resolveHostNode } from './shared.js';
+export { reduceProps, isAnimatedNode, readPassthroughStyle, resolveHostNode, } from './shared.js';

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;
@@ -171,7 +171,9 @@ function createStringInterpolation(config, outputRange) {
         return input => {
             const values = interpolations.map(interpolation => interpolation(input));
             let i = 0;
-            return template.map(c => (typeof c === 'number' ? values[i++] : c)).join('');
+            return template
+                .map(c => (typeof c === 'number' ? values[i++] : c))
+                .join('');
         };
     }
     // Colors: r,g,b must be integers, so round them; alpha stays continuous but is
@@ -195,5 +197,8 @@ export function createInterpolation(config) {
     if (isStringOutputRange(config.outputRange)) {
         return createStringInterpolation(config, config.outputRange);
     }
-    return createNumericInterpolation({ ...config, outputRange: config.outputRange });
+    return createNumericInterpolation({
+        ...config,
+        outputRange: config.outputRange,
+    });
 }