@symbiote-native/engine 0.4.0 → 1.0.0

package/build/animated/rgba.js

@@ -8,45 +8,25 @@
 // 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.
+// No types are published for this package, and an ambient .d.ts is not picked up by another
+// package's separate TS program (see symbiote-rn-import-testability) - so the suppression is
+// local, at the import site.
+// @ts-expect-error - untyped, @noflow plain JS that every toolchain here parses as-is.
+import normalizeColorUpstream from '@react-native/normalize-colors';
 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.
+// Decompose any color RN itself accepts into channels: #hex, rgb()/rgba(), hsl()/hsla(), hwb(),
+// the 150 CSS names, `transparent`, and a 0xRRGGBBAA number. undefined when unparseable, so the
+// caller falls back to the default rather than throwing inside a render. Exported so
+// interpolation's color path decodes through this one decoder rather than duplicating it.
+//
+// The parsing is upstream's. A hand-rolled version lived here and knew hex and rgb() only, so
+// `new AnimatedColor('red')` animated from BLACK - the fallback, not an error, and nothing was
+// red anywhere. Its packed output is rrggbbaa, which is the order the shifts below assume.
 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)
+    const packed = normalizeColorUpstream(color);
+    if (typeof packed !== 'number')
         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;
+    const c = packed >>> 0;
     return {
         r: (c >>> 24) & 255,
         g: (c >>> 16) & 255,
@@ -54,17 +34,3 @@ function parseHex(hex) {
         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,
-    };
-}

package/build/events/index.js

@@ -5,11 +5,13 @@
 // node it started on (or a descendant). Bubbling events walk target -> root,
 // invoking each ancestor's listener until one calls stopPropagation. Layout is a
 // direct event in RN and is delivered only to its own target.
-import { dlog } from '../debug.js';
+import { dlog, isDebug } from '../debug.js';
 import { runWrapped } from '../dispatch.js';
 import { getSlot } from '../fabric.js';
 import { isAnchor, isSymbioteNode, } from '../node.js';
 import { registeredNativeEvent } from '../registry.js';
+import { ancestorsOf, parentOf } from '../host-access.js';
+import { setIsJSResponder } from '../imperative.js';
 import { attachTouchHistory, recordTouchTrack, resetTouchHistory, touchHistory, } from '../touch-history.js';
 import { isRecord } from '../type-guards.js';
 // Raw Fabric event -> listener name, split by dispatch phase. Press is synthesized
@@ -168,7 +170,7 @@ function hasRemainingTouchWithin(owner, nativeEvent) {
 // Whether any node from `target` up to the root listens for `listenerName`, used to
 // arm the long-press timer only when a handler would actually receive it.
 function hasListenerInPath(target, listenerName) {
-    for (let node = target; node; node = node.parent) {
+    for (let node = target; node; node = parentOf(node)) {
         if (node.listeners?.has(listenerName) === true)
             return true;
     }
@@ -190,17 +192,20 @@ function callOwnListener(node, listenerName, nativeEvent) {
 }
 // The node chain from `from` up to the root, deepest first. The single allocation
 // the two-phase walk indexes both ways (capture reads it reversed).
+//
+// ONE CROSSING, not one per level. This used to climb `parentOf`, which crosses the host boundary
+// each step — 18 questions per event on a depth-8 chain, and again on every frame of every drag for
+// the responder's scope. The host holds the tree, so the chain is one answer it can give: the same
+// argument `parentsOf` / `subtreesOf` won for the teardown sweep (F-2) and `nextSiblingOf` for Vue's
+// quadratic (F-19).
 function pathToRoot(from) {
-    const path = [];
-    for (let node = from; node; node = node.parent)
-        path.push(node);
-    return path;
+    return [...ancestorsOf(from)];
 }
 // Depth of a node below the root (root = 0). Aligns two nodes before the lockstep
 // climb to their lowest common ancestor.
 function depthOf(node) {
     let depth = 0;
-    for (let n = node.parent; n; n = n.parent)
+    for (let n = parentOf(node); n; n = parentOf(n))
         depth++;
     return depth;
 }
@@ -213,18 +218,18 @@ function lowestCommonAncestor(a, b) {
     let na = a;
     let nb = b;
     while (na && da > db) {
-        na = na.parent;
+        na = parentOf(na);
         da--;
     }
     while (nb && db > da) {
-        nb = nb.parent;
+        nb = parentOf(nb);
         db--;
     }
     while (na && nb) {
         if (na === nb)
             return na;
-        na = na.parent;
-        nb = nb.parent;
+        na = parentOf(na);
+        nb = parentOf(nb);
     }
     return undefined;
 }
@@ -248,6 +253,33 @@ function findWantsResponder(path, captureName, bubbleName, nativeEvent, skip) {
     }
     return undefined;
 }
+// Tell native which node owns the gesture, RN's `injectGlobalResponderHandler`
+// (ReactFabric-dev.js:18862) — the OLD owner first, then the new one, both in one call so no
+// site can do half of it.
+//
+// WITHOUT THIS A JS RESPONDER LOSES TO ANY SCROLL VIEW ABOVE IT, and it is invisible from JS:
+// `onStartShouldSetResponder` returns true, the native UIScrollView never learns the gesture was
+// claimed, and every subsequent move arrives as `topScroll` instead of `topTouchMove` — so the
+// negotiation never even gets a move to grant on. Device-diagnosed 2026-09-08 on a PanResponder
+// drag box inside the canary's ScrollView: `startShouldSet -> true` followed by
+// `topScrollBeginDrag` and twenty `topScroll`, with no grant and no move.
+//
+// `blockNativeResponder` is the taker's own `onResponderGrant` return, exactly as RN reads it.
+function handOverNativeResponder(from, to, blockNativeResponder) {
+    if (isDebug()) {
+        dlog(`setIsJSResponder from=${from === undefined ? 'none' : 'yes'} ` +
+            `to=${to === undefined ? 'none' : 'yes'} block=${blockNativeResponder}`);
+    }
+    if (from !== undefined)
+        setIsJSResponder(from, false, blockNativeResponder);
+    if (to !== undefined)
+        setIsJSResponder(to, true, blockNativeResponder);
+}
+// Whether the taker asked native to stand down. RN reads this off the grant dispatch's return;
+// an absent listener means no claim, which is RN's `blockNativeResponder || false`.
+function blocksNative(result) {
+    return result === true;
+}
 // Negotiate (or re-negotiate) the responder for a touch start/move. If nobody holds
 // it, the winner is granted. If someone does, the incumbent is asked to relinquish
 // via onResponderTerminationRequest (absent listener = implicit yes); on yes it is
@@ -258,22 +290,56 @@ function negotiateResponder(target, phase, nativeEvent) {
     // the responder) and skips the deepest node when it IS the responder (Responder-
     // EventPlugin.setResponderAndExtractTransfer). At touch start currentResponder is
     // cleared, so this collapses to the plain target->root start walk.
+    //
+    // ONE WALK, and the common case never needs a second. `pathToRoot` crosses the host boundary per
+    // level, and the previous shape paid `lowestCommonAncestor` — `depthOf(a)` plus `depthOf(b)` plus
+    // a lockstep climb — BEFORE walking again from the answer. Measured on a depth-8 chain: 19
+    // crossings per move, of which 18 were the ancestor search, on a path that runs 60 times a second
+    // for the whole of a drag (`__tests__/touch-crossing-cost.test.ts`).
+    //
+    // The scope RN computes is the lowest common ancestor of responder and target, and while a finger
+    // stays inside the view that claimed it — which is what a drag IS — the responder is an ANCESTOR
+    // of the target, so the LCA is the responder itself and it is already in the target's own path.
+    // An index lookup answers it with nothing crossed, and the scoped path is that path's suffix.
+    // The genuine cross-subtree case (the finger left the responder's subtree) still falls back to
+    // the full search, and it is a rare frame rather than every frame.
+    const targetPath = pathToRoot(target);
+    const heldAt = currentResponder === undefined ? -1 : targetPath.indexOf(currentResponder);
     const from = currentResponder === undefined
         ? target
-        : lowestCommonAncestor(currentResponder, target);
+        : heldAt >= 0
+            ? currentResponder
+            : lowestCommonAncestor(currentResponder, target);
     if (!from)
         return;
-    const path = pathToRoot(from);
+    const path = from === target
+        ? targetPath
+        : heldAt >= 0
+            ? targetPath.slice(heldAt)
+            : pathToRoot(from);
     const skip = from === currentResponder ? from : undefined;
     const wants = phase === 'start'
         ? findWantsResponder(path, START_SHOULD_SET_CAPTURE, START_SHOULD_SET, nativeEvent, skip)
         : findWantsResponder(path, MOVE_SHOULD_SET_CAPTURE, MOVE_SHOULD_SET, nativeEvent, skip);
-    if (!wants || wants === currentResponder)
+    // Every exit is logged: a negotiation that declines is indistinguishable from one that never
+    // ran, and the two have opposite causes.
+    if (!wants) {
+        if (isDebug()) {
+            dlog(`responder ${phase}: nobody wants it (path=${path.length}${skip === undefined ? '' : ', one skipped'})`);
+        }
         return;
+    }
+    if (wants === currentResponder) {
+        if (isDebug())
+            dlog(`responder ${phase}: ${wants.component} already holds it`);
+        return;
+    }
     if (currentResponder === undefined) {
         currentResponder = wants;
-        dlog(`responder granted to ${wants.component}`);
-        callOwnListener(wants, RESPONDER_GRANT, nativeEvent);
+        if (isDebug())
+            dlog(`responder granted to ${wants.component}`);
+        const granted = callOwnListener(wants, RESPONDER_GRANT, nativeEvent);
+        handOverNativeResponder(undefined, wants, blocksNative(granted));
         return;
     }
     const incumbent = currentResponder;
@@ -291,13 +357,16 @@ function negotiateResponder(target, phase, nativeEvent) {
         // visible no-op event with no behavioral counterpart. We therefore fire grant
         // before terminate on the consent path (matching RN's grant<terminate ordering) and
         // omit it on reject; the consent OUTCOME is unchanged either way.
-        dlog(`responder transferred ${incumbent.component} -> ${wants.component}`);
-        callOwnListener(wants, RESPONDER_GRANT, nativeEvent);
+        if (isDebug())
+            dlog(`responder transferred ${incumbent.component} -> ${wants.component}`);
+        const granted = callOwnListener(wants, RESPONDER_GRANT, nativeEvent);
         callOwnListener(incumbent, RESPONDER_TERMINATE, nativeEvent);
         currentResponder = wants;
+        handOverNativeResponder(incumbent, wants, blocksNative(granted));
     }
     else {
-        dlog(`responder takeover of ${incumbent.component} rejected`);
+        if (isDebug())
+            dlog(`responder takeover of ${incumbent.component} rejected`);
         callOwnListener(wants, RESPONDER_REJECT, nativeEvent);
     }
 }
@@ -309,7 +378,10 @@ export function installEventHandler() {
         if (!isSymbioteNode(instanceHandle))
             return;
         if (topLevelType === TOUCH_START) {
-            dlog(`event ${TOUCH_START}`);
+            // The ternary is gone with the gate: `isSymbioteNode(instanceHandle)` was re-asked here
+            // three lines after the early return above already proved it.
+            if (isDebug())
+                dlog(`event ${TOUCH_START} on ${instanceHandle.component}`);
             // Update the touch bank, then attach it so responder handlers (PanResponder)
             // read each touch's own previous->current delta; RN records before dispatch.
             recordTouchTrack('start', nativeEvent);
@@ -423,7 +495,8 @@ export function installEventHandler() {
                     bubble(press.owner, PRESS_OUT, nativeEvent);
                 }
                 if (!hadActivePress) {
-                    dlog(`event ${TOUCH_END} ignored (no matching start)`);
+                    if (isDebug())
+                        dlog(`event ${TOUCH_END} ignored (no matching start)`);
                 }
                 else if (completedPresses.length === 0) {
                     dlog('press retained (another touch remains inside its owner)');
@@ -432,8 +505,10 @@ export function installEventHandler() {
                 // release) only when the last responder touch lifted.
                 if (responder) {
                     callOwnListener(responder, RESPONDER_END, nativeEvent);
-                    if (releases)
+                    if (releases) {
                         callOwnListener(responder, RESPONDER_RELEASE, nativeEvent);
+                        handOverNativeResponder(responder, undefined, false);
+                    }
                     else
                         dlog('responderEnd without release (touches remain inside responder)');
                 }
@@ -468,8 +543,10 @@ export function installEventHandler() {
                     // Like touch-end, every finger leaving emits responderEnd. Termination is final only
                     // when no touch remains inside the responder.
                     callOwnListener(responder, RESPONDER_END, nativeEvent);
-                    if (terminatesResponder)
+                    if (terminatesResponder) {
                         callOwnListener(responder, RESPONDER_TERMINATE, nativeEvent);
+                        handOverNativeResponder(responder, undefined, false);
+                    }
                 }
             });
             if (touchHistory.numberActiveTouches === 0)
@@ -478,13 +555,17 @@ export function installEventHandler() {
         }
         const direct = DIRECT_EVENTS[topLevelType];
         if (direct !== undefined) {
-            dlog(`event ${topLevelType} -> ${direct} (direct)`);
+            if (isDebug()) {
+                dlog(`event ${topLevelType} -> ${direct} (direct)`);
+            }
             runWrapped(() => deliverDirect(instanceHandle, direct, nativeEvent));
             return;
         }
         const bubbling = BUBBLING_EVENTS[topLevelType];
         if (bubbling !== undefined) {
-            dlog(`event ${topLevelType} -> ${bubbling} (bubble)`);
+            if (isDebug()) {
+                dlog(`event ${topLevelType} -> ${bubbling} (bubble)`);
+            }
             runWrapped(() => bubble(instanceHandle, bubbling, nativeEvent));
             return;
         }
@@ -494,8 +575,10 @@ export function installEventHandler() {
         // bubble: same split as the built-ins.
         const registered = registeredNativeEvent(instanceHandle.component, topLevelType);
         if (registered !== undefined) {
-            const phase = registered.direct ? 'direct' : 'bubble';
-            dlog(`event ${topLevelType} -> ${registered.listener} (${phase}, registered)`);
+            if (isDebug()) {
+                const phase = registered.direct ? 'direct' : 'bubble';
+                dlog(`event ${topLevelType} -> ${registered.listener} (${phase}, registered)`);
+            }
             runWrapped(() => registered.direct
                 ? deliverDirect(instanceHandle, registered.listener, nativeEvent)
                 : bubble(instanceHandle, registered.listener, nativeEvent));
@@ -505,7 +588,9 @@ export function installEventHandler() {
         // config. A permanent diagnostic seam: if a native view fires something we drop
         // on the floor (an event the ViewConfig didn't surface, or a name mismatch),
         // this is where it shows up. Keeps "the handler silently did nothing" debuggable.
-        dlog(`event ${topLevelType} UNMATCHED on ${instanceHandle.component} (dropped)`);
+        if (isDebug()) {
+            dlog(`event ${topLevelType} UNMATCHED on ${instanceHandle.component} (dropped)`);
+        }
     });
 }
 // A press is honest only if the touch ends on the node it started on, or a
@@ -517,7 +602,7 @@ function endsWithin(endTarget, start) {
     while (node) {
         if (node === start)
             return true;
-        node = node.parent;
+        node = parentOf(node);
     }
     return false;
 }
@@ -549,7 +634,8 @@ function bubble(target, listenerName, nativeEvent) {
             ? undefined
             : node.listeners?.get(captureName);
         if (listener) {
-            dlog(`event ${listenerName} capture on ${node.component}`);
+            if (isDebug())
+                dlog(`event ${listenerName} capture on ${node.component}`);
             listener({
                 type: listenerName,
                 target,
@@ -563,8 +649,13 @@ function bubble(target, listenerName, nativeEvent) {
     }
     // Bubble phase: target -> root, invoking each ancestor's plain listener. Anchors are
     // transparent here too, same reason (see the capture-phase comment above).
-    let node = target;
-    while (node) {
+    //
+    // THE SAME ARRAY, read forward. This used to re-walk `parentOf` from the target, which is a
+    // CROSSING of the host boundary per level — so one event asked the host for its ancestors twice,
+    // measured at 18 questions on a depth-8 chain where 9 is the floor. The comment above already
+    // says the path is built once "without a second allocation"; the second WALK is the expensive
+    // half, and it was the one left in. Every touch and every frame of every drag pays it.
+    for (const node of path) {
         const listener = isAnchor(node)
             ? undefined
             : node.listeners?.get(listenerName);
@@ -580,7 +671,6 @@ function bubble(target, listenerName, nativeEvent) {
             if (stopped)
                 return;
         }
-        node = node.parent;
     }
 }
 // Direct (non-bubbling) delivery: only the target's own listener fires.

package/build/fabric-props.d.ts

@@ -1,3 +1,3 @@
 import type { IFabricProps } from './fabric';
 import { type ISymbioteNode } from './node';
-export declare function fabricProps(node: ISymbioteNode): IFabricProps;
+export declare function fabricProps(node: ISymbioteNode, nodeProps: Readonly<Record<string, unknown>>): IFabricProps;