@symbiote-native/engine 0.5.0 → 1.0.0

package/build/animated/event.js

@@ -14,7 +14,7 @@
 //     and registers the key path with the stock native module, so the event drives
 //     the view with zero JS per event.
 import { dlog } from '../debug.js';
-import { getNativeTag, whenCommitted } from '../commit.js';
+import { getNativeTag, whenCommitted } from '../imperative.js';
 import { isSymbioteNode } from '../node.js';
 import { AnimatedNode, flushValue } from './graph.js';
 import { isNativeAnimatedAvailable, nativeAnimated, } from './native/native-animated.js';
@@ -45,6 +45,11 @@ function collectMappedValues(mapping, path, out) {
         }
     }
 }
+// TODO(rn-parity, low priority): vendor's `AnimatedEvent.js` has `validateMapping`, a
+// `__DEV__`-only check that throws when an event's actual shape doesn't match the argMapping
+// structure. We have no equivalent — `extractAtPath` below silently no-ops on a mismatch instead.
+// Judged non-actionable (misuse-detection guard, no runtime-visible effect for a correct mapping,
+// same class as the `numColumns` invariant) — see the audit skill for the full reasoning.
 // Pull the numeric field at `path` out of one event argument. Returns undefined
 // when the path is absent or the leaf is not a number, so a malformed event is a
 // no-op rather than a throw inside an event dispatch.

package/build/animated/host-binding.d.ts

@@ -3,7 +3,7 @@ export declare function hasAnimatedBindings(): boolean;
 /**
  * Give a node a behavior-owned animated style layer, or drop it by passing `undefined`.
  *
- * The seam a lowered `TouchableOpacity` needs: RN runs its press fade from an `Animated.View` whose
+ * The seam `<touchable-opacity>` needs: RN runs its press fade from an `Animated.View` whose
  * style is `[props.style, {opacity: anim}]` (TouchableOpacity.js:302), and a tag has no such
  * wrapper. The layer is bound to the leaf, never folded into `node.props.style` — so the behavior
  * can still read the AUTHOR's resting opacity back without seeing its own fade.

package/build/animated/host-binding.js

@@ -31,6 +31,7 @@ import { AnimatedStyle } from './style.js';
 import { attachNativeEventHandler } from './event.js';
 import { createAnimatedLeafLifecycle, } from './leaf-lifecycle.js';
 import { setProp } from '../node.js';
+import { propOf, subtreesOf } from '../host-access.js';
 const bindings = new WeakMap();
 // Nodes the commit sweep tore down, whether or not they carried a binding — the twin of
 // host-behavior.ts's `tornDown`, and marked for every node for the same reason: the node a
@@ -124,7 +125,7 @@ function withBehaviorStyle(node, style) {
 /**
  * Give a node a behavior-owned animated style layer, or drop it by passing `undefined`.
  *
- * The seam a lowered `TouchableOpacity` needs: RN runs its press fade from an `Animated.View` whose
+ * The seam `<touchable-opacity>` needs: RN runs its press fade from an `Animated.View` whose
  * style is `[props.style, {opacity: anim}]` (TouchableOpacity.js:302), and a tag has no such
  * wrapper. The layer is bound to the leaf, never folded into `node.props.style` — so the behavior
  * can still read the AUTHOR's resting opacity back without seeing its own fade.
@@ -138,7 +139,7 @@ export function setAnimatedBehaviorStyle(node, style) {
     }
     // Re-register against the style standing right now, so the pair the leaf holds is always
     // (author, layer) whichever of the two moved last.
-    bindAnimatedValue(node, 'style', node.props.style);
+    bindAnimatedValue(node, 'style', propOf(node, 'style'));
 }
 /**
  * Resolve an animated value in a prop, returning what should be published for it.
@@ -251,6 +252,22 @@ export function detachAnimatedProps(node) {
  * runs ~9 000 times per benchmark create.
  */
 export function reattachAnimatedProps(node) {
+    if (!parked.has(node))
+        return;
+    // FLAT, one host read for the whole subtree — the twin of `reattachSubtree` in `host-behavior.ts`,
+    // which was converted when the teardown sweep turned out to be paying a JSI crossing per node.
+    // This one was missed then. It is reached far less often (the guard above is a WeakSet miss for
+    // every node of a freshly built tree) but costs the same per node when it does run, and a parked
+    // subtree is a whole screen's worth in the case it exists for — Svelte parking live nodes
+    // offscreen across commits.
+    //
+    // The recursion stopped at an unparked node where this skips it and carries on; the two agree
+    // because `parked` is filled by `detachAnimatedProps` over a whole detached subtree, so a node in
+    // it has its descendants in it.
+    for (const each of subtreesOf([node]))
+        reattachOneAnimated(each);
+}
+function reattachOneAnimated(node) {
     if (!parked.has(node))
         return;
     parked.delete(node);
@@ -258,6 +275,4 @@ export function reattachAnimatedProps(node) {
     if (binding !== undefined)
         reconcile(node, binding);
     reattachAnimatedEvents(node);
-    for (const child of node.children)
-        reattachAnimatedProps(child);
 }

package/build/animated/index.d.ts

@@ -4,7 +4,7 @@ export { AnimatedValueXY, type IValueXY } from './value-xy';
 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';
-export { Easing, type IEasingFunction } from './easing';
+export { Easing, type IEasing, type IEasingFunction } from './easing';
 export { createNumericInterpolation, createInterpolation, checkValidRanges, type IInterpolationConfig, type IExtrapolateType, } from './interpolation';
 export type { IAnimation, IEndCallback, IEndResult } from './animation';
 export { TimingAnimation } from './animations/timing';

package/build/animated/mock.d.ts

@@ -16,25 +16,7 @@ export declare const AnimatedMock: {
     Value: typeof AnimatedValue;
     ValueXY: typeof AnimatedValueXY;
     Color: typeof AnimatedColor;
-    Easing: {
-        step0(n: number): number;
-        step1(n: number): number;
-        linear(t: number): number;
-        ease(t: number): number;
-        quad(t: number): number;
-        cubic(t: number): number;
-        poly(n: number): import("./easing").IEasingFunction;
-        sin(t: number): number;
-        circle(t: number): number;
-        exp(t: number): number;
-        elastic(bounciness?: number): import("./easing").IEasingFunction;
-        back(s?: number): import("./easing").IEasingFunction;
-        bounce(t: number): number;
-        bezier(x1: number, y1: number, x2: number, y2: number): import("./easing").IEasingFunction;
-        in(easing: import("./easing").IEasingFunction): import("./easing").IEasingFunction;
-        out(easing: import("./easing").IEasingFunction): import("./easing").IEasingFunction;
-        inOut(easing: import("./easing").IEasingFunction): import("./easing").IEasingFunction;
-    };
+    Easing: import("./easing").IEasing;
     timing: typeof timing;
     spring: typeof spring;
     decay: typeof decay;

package/build/animated/props.js

@@ -12,7 +12,7 @@
 // a `update` function off the node, and under useDefineForClassFields a field
 // initialiser would shadow it and break subclassing. (See shared graph.ts leafUpdate.)
 import { AnimatedNode, AnimatedWithChildren } from './graph.js';
-import { setNativeProps, getNativeTag } from '../commit.js';
+import { setNativeProps, getNativeTag } from '../imperative.js';
 import { isSymbioteNode } from '../node.js';
 import { registerPostCommit } from '../post-commit.js';
 import { nativeAnimated, } from './native/native-animated.js';

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 { committedOf, isAnchor, isSymbioteNode, } from '../node.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;
 }
@@ -261,15 +266,14 @@ function findWantsResponder(path, captureName, bubbleName, nativeEvent, skip) {
 //
 // `blockNativeResponder` is the taker's own `onResponderGrant` return, exactly as RN reads it.
 function handOverNativeResponder(from, to, blockNativeResponder) {
-    const slot = getSlot();
-    const fromHandle = from === undefined ? undefined : committedOf(from)?.handle;
-    const toHandle = to === undefined ? undefined : committedOf(to)?.handle;
-    dlog(`setIsJSResponder from=${from === undefined ? 'none' : fromHandle === undefined ? 'UNCOMMITTED' : 'yes'} ` +
-        `to=${to === undefined ? 'none' : toHandle === undefined ? 'UNCOMMITTED' : 'yes'} block=${blockNativeResponder}`);
-    if (fromHandle !== undefined)
-        slot.setIsJSResponder(fromHandle, false, blockNativeResponder);
-    if (toHandle !== undefined)
-        slot.setIsJSResponder(toHandle, true, 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`.
@@ -286,12 +290,33 @@ 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)
@@ -299,16 +324,20 @@ function negotiateResponder(target, phase, nativeEvent) {
     // Every exit is logged: a negotiation that declines is indistinguishable from one that never
     // ran, and the two have opposite causes.
     if (!wants) {
-        dlog(`responder ${phase}: nobody wants it (path=${path.length}${skip === undefined ? '' : ', one skipped'})`);
+        if (isDebug()) {
+            dlog(`responder ${phase}: nobody wants it (path=${path.length}${skip === undefined ? '' : ', one skipped'})`);
+        }
         return;
     }
     if (wants === currentResponder) {
-        dlog(`responder ${phase}: ${wants.component} already holds it`);
+        if (isDebug())
+            dlog(`responder ${phase}: ${wants.component} already holds it`);
         return;
     }
     if (currentResponder === undefined) {
         currentResponder = wants;
-        dlog(`responder granted to ${wants.component}`);
+        if (isDebug())
+            dlog(`responder granted to ${wants.component}`);
         const granted = callOwnListener(wants, RESPONDER_GRANT, nativeEvent);
         handOverNativeResponder(undefined, wants, blocksNative(granted));
         return;
@@ -328,14 +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}`);
+        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);
     }
 }
@@ -347,7 +378,10 @@ export function installEventHandler() {
         if (!isSymbioteNode(instanceHandle))
             return;
         if (topLevelType === TOUCH_START) {
-            dlog(`event ${TOUCH_START} on ${isSymbioteNode(instanceHandle) ? instanceHandle.component : 'NON-NODE'}`);
+            // 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);
@@ -461,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)');
@@ -520,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;
         }
@@ -536,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));
@@ -547,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
@@ -559,7 +602,7 @@ function endsWithin(endTarget, start) {
     while (node) {
         if (node === start)
             return true;
-        node = node.parent;
+        node = parentOf(node);
     }
     return false;
 }
@@ -591,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,
@@ -605,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);
@@ -622,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;