@symbiote-native/engine 0.3.0 → 0.4.0

package/build/debug.js

@@ -12,11 +12,17 @@
 // logging off. On a hot path (a getter Angular re-reads every change-detection
 // pass, an Animated reconcile, a scroll-driven apply) pass a THUNK instead:
 // `dlog(() => \`…\`)` - it is only called once the switch is on.
-function envEnabled() {
-    return typeof process !== 'undefined' && process.env.DEBUG === '1';
-}
+// Read ONCE, at module load. `process.env` is not a plain object in Node - each property read
+// crosses into the host environment - and isDebug() is called on the per-node commit path, so the
+// per-call read showed up as 17% of self time in a create-path CPU profile (headless; on a native
+// host `process` is a shim and the read is cheap, so treat that figure as a Node one).
+//
+// Safe to freeze because nothing toggles the ENV switch mid-process: every runtime toggle in the
+// repo goes through __SYMBIOTE_DEBUG__ below, which stays dynamic, and bootstrap mirrors the env
+// onto it at start anyway.
+const envDebug = typeof process !== 'undefined' && process.env.DEBUG === '1';
 export function isDebug() {
-    return globalThis.__SYMBIOTE_DEBUG__ === true || envEnabled();
+    return envDebug || globalThis.__SYMBIOTE_DEBUG__ === true;
 }
 export function dlog(message) {
     if (!isDebug())

package/build/events/index.js

@@ -92,32 +92,34 @@ const DEFAULT_LONG_PRESS_MS = 500;
 // points from where it started (Pressability.DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE).
 const LONG_PRESS_DEACTIVATION_DISTANCE = 10;
 let installed = false;
-// Target of the in-flight touch, remembered at topTouchStart and consumed (or
-// cleared) at topTouchEnd / topTouchCancel.
-let pressStart;
+// Each unrelated target owns an independent press. Additional fingers under the same owner join
+// that press, so one target still receives exactly one pressIn/press/pressOut lifecycle.
+const activePresses = new Set();
 // The node that claimed the responder for the in-flight touch (PanResponder), or
 // undefined when nobody claimed it. Receives move and release/terminate.
 let currentResponder;
-// Long-press synthesis: armed at touch start when some node in the press path listens
-// for it, fired once after the hold delay, disarmed on end/cancel; the same arm/clear
-// lifecycle Pressable runs in JS. Pressability ALSO cancels the timer when the touch
-// drifts past LONG_PRESS_DEACTIVATION_DISTANCE, so we record the start point at touch
-// start and clear the timer on a move that exceeds it.
-let longPressTimer;
-let longPressFired = false;
-// Touch coordinate at touch start (pageX/pageY), or undefined when the native event
-// carried no coords; then the move-distance cancel is simply skipped.
-let longPressStart;
-function clearLongPress() {
-    if (longPressTimer !== undefined) {
-        clearTimeout(longPressTimer);
-        longPressTimer = undefined;
+function clearLongPress(press) {
+    if (press.longPressTimer !== undefined) {
+        clearTimeout(press.longPressTimer);
+        press.longPressTimer = undefined;
     }
 }
-// Read the gesture's page coordinate from a raw native touch event, defensively: RN
-// puts pageX/pageY on the event for a single touch, or on the first entry of a
-// `touches` array for multi-touch. Returns undefined when neither shape carries
-// numbers, so callers skip any coordinate-dependent logic rather than guess.
+function takeAllPresses() {
+    const presses = [...activePresses];
+    activePresses.clear();
+    for (const press of presses)
+        clearLongPress(press);
+    return presses;
+}
+function findActivePress(target) {
+    for (const press of activePresses) {
+        if (endsWithin(target, press.owner))
+            return press;
+    }
+    return undefined;
+}
+// Read the changed finger's page coordinate from a raw native touch event, falling back to the
+// active-touch list and then undefined. Callers skip coordinate-dependent logic rather than guess.
 function readTouchPoint(nativeEvent) {
     const fromPair = (source) => {
         if (!source)
@@ -130,21 +132,27 @@ function readTouchPoint(nativeEvent) {
     const direct = fromPair(nativeEvent);
     if (direct)
         return direct;
-    const touches = nativeEvent.touches;
-    if (Array.isArray(touches)) {
-        const first = touches[0];
-        if (isRecord(first))
-            return fromPair(first);
+    // `changedTouches` identifies the finger for this frame. Read it before the full active-touch
+    // list, whose first entry may belong to another simultaneously pressed target.
+    for (const key of ['changedTouches', 'touches']) {
+        const touches = nativeEvent[key];
+        if (!Array.isArray(touches))
+            continue;
+        for (const touch of touches) {
+            if (!isRecord(touch))
+                continue;
+            const point = fromPair(touch);
+            if (point)
+                return point;
+        }
     }
     return undefined;
 }
-// Whether any touch still down started inside the responder (its target IS the
-// responder or a descendant). RN's noResponderTouches walks nativeEvent.touches and
-// returns false the moment one is found; a release fires only when none remain. The
-// headless smokes fire with an empty `{}` event (no `touches`) -> no remaining touch ->
-// release fires, preserving single-touch behavior. (ResponderEventPlugin.noResponder-
-// Touches + isAncestor.)
-function hasRemainingResponderTouch(responder, nativeEvent) {
+// Whether any touch still down started inside an owner (its target IS the owner or a descendant).
+// RN's noResponderTouches walks nativeEvent.touches and returns false the moment one is found; a
+// responder release and our synthesized press completion both wait until none remain. The headless
+// smokes fire with an empty `{}` event -> no remaining touch -> preserve single-touch behavior.
+function hasRemainingTouchWithin(owner, nativeEvent) {
     const touches = nativeEvent.touches;
     if (!Array.isArray(touches))
         return false;
@@ -152,7 +160,7 @@ function hasRemainingResponderTouch(responder, nativeEvent) {
         if (!isRecord(touch))
             continue;
         const target = touch.target;
-        if (isSymbioteNode(target) && endsWithin(target, responder))
+        if (isSymbioteNode(target) && endsWithin(target, owner))
             return true;
     }
     return false;
@@ -306,23 +314,41 @@ export function installEventHandler() {
             // read each touch's own previous->current delta; RN records before dispatch.
             recordTouchTrack('start', nativeEvent);
             attachTouchHistory(nativeEvent);
-            pressStart = instanceHandle;
-            // Arm long-press synthesis: only when a listener exists in the path, fired once
-            // after the hold delay, then suppresses the tap (longPressFired) on release.
-            longPressFired = false;
-            clearLongPress();
-            longPressStart = readTouchPoint(nativeEvent);
-            if (hasListenerInPath(instanceHandle, LONG_PRESS)) {
-                const longPressTarget = instanceHandle;
-                longPressTimer = setTimeout(() => {
-                    longPressTimer = undefined;
-                    longPressFired = true;
-                    dlog('synthesized longPress -> dispatch');
-                    runWrapped(() => bubble(longPressTarget, LONG_PRESS, nativeEvent));
-                }, DEFAULT_LONG_PRESS_MS);
+            const canJoinExistingPress = Array.isArray(nativeEvent.touches) && nativeEvent.touches.length > 1;
+            const joinedPress = canJoinExistingPress
+                ? findActivePress(instanceHandle)
+                : undefined;
+            // A one-touch or identifier-less frame starts a new physical gesture. Any surviving press
+            // is stale (its end/cancel was lost), so release it instead of letting it suppress this start.
+            const stalePresses = canJoinExistingPress ? [] : takeAllPresses();
+            let startedPress;
+            if (joinedPress === undefined) {
+                startedPress = {
+                    owner: instanceHandle,
+                    longPressTimer: undefined,
+                    longPressFired: false,
+                    longPressStart: readTouchPoint(nativeEvent),
+                };
+                activePresses.add(startedPress);
+                if (hasListenerInPath(instanceHandle, LONG_PRESS)) {
+                    const press = startedPress;
+                    press.longPressTimer = setTimeout(() => {
+                        if (!activePresses.has(press))
+                            return;
+                        press.longPressTimer = undefined;
+                        press.longPressFired = true;
+                        dlog('synthesized longPress -> dispatch');
+                        runWrapped(() => bubble(press.owner, LONG_PRESS, nativeEvent));
+                    }, DEFAULT_LONG_PRESS_MS);
+                }
             }
             runWrapped(() => {
-                bubble(instanceHandle, PRESS_IN, nativeEvent);
+                for (const stale of stalePresses)
+                    bubble(stale.owner, PRESS_OUT, nativeEvent);
+                if (startedPress)
+                    bubble(startedPress.owner, PRESS_IN, nativeEvent);
+                else
+                    dlog('pressIn retained (another touch joined the active press)');
                 // Responder negotiation runs alongside press synthesis: a View can be both
                 // a Pressable (press) and a PanResponder target (responder).
                 negotiateResponder(instanceHandle, 'start', nativeEvent);
@@ -335,16 +361,18 @@ export function installEventHandler() {
         if (topLevelType === TOUCH_MOVE) {
             recordTouchTrack('move', nativeEvent);
             attachTouchHistory(nativeEvent);
-            // Cancel the pending long press if the touch drifted too far (Pressability's
-            // deactivation-distance check). Skipped when either coord is unknown.
-            if (longPressTimer !== undefined && longPressStart) {
+            // Only the press owning this move can lose its long-press timer; movement on an unrelated
+            // simultaneously held Pressable must not disturb another target's clock.
+            const movedPress = findActivePress(instanceHandle);
+            if (movedPress?.longPressTimer !== undefined &&
+                movedPress.longPressStart) {
                 const here = readTouchPoint(nativeEvent);
                 if (here) {
-                    const dx = here.x - longPressStart.x;
-                    const dy = here.y - longPressStart.y;
+                    const dx = here.x - movedPress.longPressStart.x;
+                    const dy = here.y - movedPress.longPressStart.y;
                     if (Math.hypot(dx, dy) > LONG_PRESS_DEACTIVATION_DISTANCE) {
                         dlog('longPress cancelled (moved past deactivation distance)');
-                        clearLongPress();
+                        clearLongPress(movedPress);
                     }
                 }
             }
@@ -361,40 +389,45 @@ export function installEventHandler() {
         if (topLevelType === TOUCH_END) {
             recordTouchTrack('end', nativeEvent);
             attachTouchHistory(nativeEvent);
-            const start = pressStart;
-            pressStart = undefined;
+            const hadActivePress = activePresses.size > 0;
+            const completedPresses = [];
+            for (const press of activePresses) {
+                if (hasRemainingTouchWithin(press.owner, nativeEvent))
+                    continue;
+                activePresses.delete(press);
+                clearLongPress(press);
+                completedPresses.push(press);
+            }
             const responder = currentResponder;
             // RN releases (and clears) the responder only when no remaining touch still down
             // started inside it; lifting ONE finger in a multi-touch gesture must NOT release.
             // onResponderEnd still fires on every finger-up. (ResponderEventPlugin: responderEnd
             // is unconditional, responderRelease is gated on noResponderTouches.)
             const releases = responder !== undefined &&
-                !hasRemainingResponderTouch(responder, nativeEvent);
+                !hasRemainingTouchWithin(responder, nativeEvent);
             if (releases)
                 currentResponder = undefined;
-            // A completed long press eats the tap (RN), but pressOut still fires below.
-            const wasLongPress = longPressFired;
-            longPressFired = false;
-            longPressStart = undefined;
-            clearLongPress();
             runWrapped(() => {
-                if (start) {
-                    // press fires only on an honest tap (ended within the responder); pressOut
-                    // always fires on the responder so its pressed-state can release.
-                    if (endsWithin(instanceHandle, start)) {
-                        if (wasLongPress) {
+                for (const press of completedPresses) {
+                    // Each target completes independently. An honest tap ends inside that target; pressOut
+                    // always releases its pressed state, including a drag-away end.
+                    if (endsWithin(instanceHandle, press.owner)) {
+                        if (press.longPressFired) {
                             dlog('press suppressed (longPress already fired)');
                         }
                         else {
                             dlog('event press -> dispatch');
-                            bubble(start, PRESS, nativeEvent);
+                            bubble(press.owner, PRESS, nativeEvent);
                         }
                     }
-                    bubble(start, PRESS_OUT, nativeEvent);
+                    bubble(press.owner, PRESS_OUT, nativeEvent);
                 }
-                else {
+                if (!hadActivePress) {
                     dlog(`event ${TOUCH_END} ignored (no matching start)`);
                 }
+                else if (completedPresses.length === 0) {
+                    dlog('press retained (another touch remains inside its owner)');
+                }
                 // onResponderEnd fires on every finger-up; onResponderRelease (the final
                 // release) only when the last responder touch lifted.
                 if (responder) {
@@ -413,20 +446,30 @@ export function installEventHandler() {
         if (topLevelType === TOUCH_CANCEL) {
             recordTouchTrack('end', nativeEvent);
             attachTouchHistory(nativeEvent);
-            const start = pressStart;
-            pressStart = undefined;
+            // A cancel is scoped to the finger(s) removed from `touches`, just like an end. An unrelated
+            // Pressable—or another finger under the same owner—must keep its press and long-press state.
+            const cancelledPresses = [];
+            for (const press of activePresses) {
+                if (hasRemainingTouchWithin(press.owner, nativeEvent))
+                    continue;
+                activePresses.delete(press);
+                clearLongPress(press);
+                cancelledPresses.push(press);
+            }
             const responder = currentResponder;
-            currentResponder = undefined;
-            longPressFired = false;
-            longPressStart = undefined;
-            clearLongPress();
+            const terminatesResponder = responder !== undefined &&
+                !hasRemainingTouchWithin(responder, nativeEvent);
+            if (terminatesResponder)
+                currentResponder = undefined;
             runWrapped(() => {
-                if (start)
-                    bubble(start, PRESS_OUT, nativeEvent);
-                // A cancelled gesture ends then terminates (the responder was taken away).
+                for (const press of cancelledPresses)
+                    bubble(press.owner, PRESS_OUT, nativeEvent);
                 if (responder) {
+                    // Like touch-end, every finger leaving emits responderEnd. Termination is final only
+                    // when no touch remains inside the responder.
                     callOwnListener(responder, RESPONDER_END, nativeEvent);
-                    callOwnListener(responder, RESPONDER_TERMINATE, nativeEvent);
+                    if (terminatesResponder)
+                        callOwnListener(responder, RESPONDER_TERMINATE, nativeEvent);
                 }
             });
             if (touchHistory.numberActiveTouches === 0)

package/build/fabric-props.js

@@ -4,8 +4,8 @@
 // responsibilities stop sharing one 300+ line file. Color processing itself lives in
 // ./platform-color (the stable leaf every color-touching module imports from); this file only
 // decides WHICH props are color props and wires the structured CSS-style processors.
+import { foldAriaProps } from './accessibility-props.js';
 import { RAW_TEXT_COMPONENT } from './node.js';
-import { flattenStyle } from './style/index.js';
 import { registeredProcessor } from './registry.js';
 import { isProcessableColor, processColor } from './platform-color/index.js';
 import { processBoxShadow } from './process-box-shadow/index.js';
@@ -164,29 +164,183 @@ function processValue(component, key, value) {
         return processColor(value);
     return value;
 }
+// A style object is SHARED, and that is the one place this file has a complexity problem rather
+// than a constant-factor one. StyleSheet.create hands out one frozen object per rule, and the CSS
+// class registry resolves a class name to one cached object - so 1 000 rows carry the SAME handful
+// of style objects, and resolving each one per node costs O(nodes x styleKeys) to compute an
+// answer that only varies with O(distinct styles). Cache it on the style object's identity.
+//
+// Keyed by component as well: processValue consults that component's ViewConfig processors, so one
+// style object can legitimately resolve differently under two view names.
+//
+// The cache assumes a style object is not MUTATED IN PLACE, which is already the engine's contract:
+// setProp compares with Object.is and skips a same-identity write, so an in-place style edit never
+// marks the node dirty and never reaches Fabric today either. What narrows slightly is the case
+// where some OTHER prop on the same node changed in the same commit - that used to pick the
+// mutation up as a side effect, and now does not.
+//
+// KEEPING undefined-valued keys is deliberate: the resolved object is a faithful picture of ONE
+// style entry, and addStyle below needs to see an explicit `undefined` to let a later entry clear
+// an earlier one. Dropping them here would silently turn `[{flex:1},{flex:undefined}]` into
+// `flex: 1`.
+const styleCache = new Map();
+function processedStyle(component, style) {
+    let perComponent = styleCache.get(component);
+    if (perComponent === undefined) {
+        perComponent = new WeakMap();
+        styleCache.set(component, perComponent);
+    }
+    const cached = perComponent.get(style);
+    if (cached !== undefined)
+        return cached;
+    const resolved = {};
+    for (const key of Object.keys(style)) {
+        const value = style[key];
+        resolved[key] =
+            value === undefined ? undefined : processValue(component, key, value);
+    }
+    perComponent.set(style, resolved);
+    return resolved;
+}
+/**
+ * Hoist one style slot's keys into the payload being built, recursing on POSITION only - the same
+ * rule flattenStyle follows, and for the same reason: `transform: [{translateX: 5}]` is an
+ * array-VALUED prop, not a nested style.
+ *
+ * The point is that there is no intermediate object. Every style entry's resolution is memoized on
+ * its own identity and its keys are written straight into `out`, so a thousand rows sharing one
+ * class-resolved style resolve it ONCE and each node pays a copy loop.
+ *
+ * This is also the shape React Native itself uses. `ReactNativeAttributePayload.addNestedProperty`
+ * (.vendors/react/packages/react-native-renderer/src/ReactNativeAttributePayload.js:208) recurses
+ * over the style array writing into a single `updatePayload`; upstream's `flattenStyle` appears
+ * ONLY in `diffNestedProperty`, i.e. the update path where an array meets an object - never on
+ * create. Our previous version flattened first and hoisted second, which allocated one merged
+ * object per node per commit that nothing else ever read.
+ *
+ * It also fixed a dead cache. `processedStyle` used to be reachable only when `props.style` was a
+ * bare object, and it never is: `commitClassStyle` (node.ts) always writes the two-element
+ * `[classStyle, explicitStyle]` array, by design. So the memo existed, was correct, and never ran.
+ *
+ * Later entries win, because a later write overwrites the same key on `out`. An explicit
+ * `undefined` CLEARS the key instead, matching the flatten path it replaces. One narrow
+ * divergence, recorded rather than hidden: the `delete` also clears a same-named TOP-LEVEL prop
+ * hoisted before the style pass, which flattening did not. Style keys and native prop keys do not
+ * overlap in practice (one is Yoga/visual, the other is testID/accessibility/source), so this is
+ * theoretical - but it is a difference, and `fabric-props.test.ts` pins both halves.
+ */
+function addStyle(out, component, style) {
+    if (Array.isArray(style)) {
+        for (const entry of style)
+            addStyle(out, component, entry);
+        return;
+    }
+    if (!isRecord(style))
+        return;
+    const resolved = processedStyle(component, style);
+    for (const key of Object.keys(resolved)) {
+        const value = resolved[key];
+        if (value === undefined)
+            delete out[key];
+        else
+            out[key] = value;
+    }
+}
 // Translate the retained node's logical props into the flat payload Fabric's C++
 // props expect: `style` keys are hoisted to the top level, event handlers and
 // undefined values are dropped.
+// RN HAS NO `value` FABRIC PROP. A TextInput's controlled value rides as the private `text` prop,
+// and the fold that produces it — `value ?? defaultValue` — lives in the component wrapper
+// (`core/components/src/view/render-text-input.ts`, whose own comment says "There is no `value`
+// Fabric prop; this is the whole controlled surface"). A LOWERED element has no wrapper, so a
+// transform printing the author's `value={x}` yields a key no ViewConfig declares: silently dropped,
+// `text` never set, and the field renders EMPTY. Nothing red anywhere — found 2026-08-31 by an agent
+// reading what the render function actually emits rather than trusting a header comment.
+//
+// So the fold moves to the layer every path goes through, exactly like the aria fold above it. This
+// is the third instance of one rule: a lowered element inherits NOTHING its wrapper did, and the
+// repair belongs below the fork, never in the transform.
+//
+// GATED ON THE COMPONENT, NOT ON THE PROP. `value` is also a prop of `Switch` and `Slider`; a fold
+// keyed on the prop name would write a bogus `text` onto both. Two string comparisons rather than a
+// Set lookup — this runs per node per commit, and the set has exactly two members.
+//
+// The engine may hold this because both views are in `BUILTIN_COMPONENTS`, whose hand-tuned tables
+// (`view-config.ts`'s TEXT_INPUT_EVENTS, commit's COLOR_PROPS) already live here for the same
+// reason. Routing it through `registerComponent` was tried first and is WRONG: `resolve()`
+// short-circuits every builtin to EMPTY, so the registration would have been accepted and never
+// applied.
+const SINGLELINE_TEXT_INPUT = 'RCTSinglelineTextInputView';
+const MULTILINE_TEXT_INPUT = 'RCTMultilineTextInputView';
+function foldTextInputValue(props) {
+    const hasValue = props.value !== undefined;
+    const hasDefault = props.defaultValue !== undefined;
+    if (!hasValue && !hasDefault)
+        return props;
+    const folded = { ...props };
+    // `value` WINS over `defaultValue` — `foldText`'s rule, kept identical rather than re-derived.
+    // An explicit `text` is left alone: that is the component path, where the wrapper already folded,
+    // and re-folding there would let a stale `value` overwrite what the wrapper computed.
+    if (folded.text === undefined) {
+        folded.text = hasValue ? props.value : props.defaultValue;
+    }
+    // Blanked, not deleted: `fabricProps` skips undefined, and neither name is a real Fabric prop.
+    folded.value = undefined;
+    folded.defaultValue = undefined;
+    return folded;
+}
 export function fabricProps(node) {
     if (node.component === RAW_TEXT_COMPONENT) {
         return { text: node.props.text };
     }
+    // This runs once per node per commit - 9 000 times on one benchmark press - so the two loops
+    // below iterate with Object.keys rather than Object.entries: entries allocates a fresh
+    // two-element array PER KEY on top of the outer array, and the resulting garbage was 18% of the
+    // create path in a CPU profile.
+    //
+    // Do NOT "improve" this to `for...in`. It was tried and reverted 2026-08-23. On paper it is the
+    // strictly cheaper shape - Object.keys allocates one array per call, 10 007 of them on a
+    // 1 000-row create (counted), and for...in allocates none - and the headless V8 bench agreed,
+    // 12-13% off create/replace `min`. On DEVICE it lost: with the Fabric call counts and prop-key
+    // payload byte-identical either way (9000/5000/1009, 32001 keys), Release Create went 217.8 ->
+    // 243.2 ms while stock moved only inside its 4% noise floor. Hermes' for-in is not V8's enum
+    // cache. The general rule this bought: an allocation-count win measured on V8 is not a Hermes
+    // win, and only the on-device number decides (`perf-claims-need-numbers`).
     const out = {};
-    for (const [key, value] of Object.entries(node.props)) {
+    // THE ONE POINT WHERE THE WHOLE BAG IS KNOWN ON EVERY PATH, which is what the aria fold needs:
+    // `aria-checked` has to be folded against a sibling `accessibilityState`, and `routeProp` sees
+    // one key at a time. Both commit paths — create and update — reach here, so a lowered element
+    // gets the fold it has no wrapper to run.
+    //
+    // NOT memoised on `node.props` identity. That object is stable and mutated IN PLACE, so an
+    // identity-keyed cache (the `processedStyle` pattern below) would be stale forever. The gate is
+    // the node's sticky flag instead: one boolean read for a node with no alias, which is nearly all
+    // of them, and the fold's own fast path returns by identity for the rest.
+    const aliasFolded = node.hasAriaAlias
+        ? foldAriaProps(node.props)
+        : node.props;
+    // The behavior's own fold, for a LOWERED element only — the two folds above are keyed on the
+    // component name, which a wrapper and its lowered twin share, so neither could carry a
+    // per-primitive fold without running it twice on the wrapper. See IPayloadFold.
+    const behaviorFolded = node.payloadFold !== undefined
+        ? node.payloadFold(aliasFolded)
+        : aliasFolded;
+    const props = node.component === SINGLELINE_TEXT_INPUT ||
+        node.component === MULTILINE_TEXT_INPUT
+        ? foldTextInputValue(behaviorFolded)
+        : behaviorFolded;
+    for (const key of Object.keys(props)) {
         if (key === 'style')
             continue;
+        const value = props[key];
         if (typeof value === 'function')
             continue;
         if (value === undefined)
             continue;
         out[key] = processValue(node.component, key, value);
     }
-    // Collapse style (object | array | nested arrays) into one flat payload before
-    // hoisting: `style={[base, override]}` is RN's idiom and Fabric wants it flat.
-    const style = flattenStyle(node.props.style);
-    for (const [key, value] of Object.entries(style)) {
-        if (value !== undefined)
-            out[key] = processValue(node.component, key, value);
-    }
+    // Hoist the style slot (object | array | nested arrays) into the SAME payload object - no
+    // intermediate flatten. See addStyle for the shape and for the two things this fixed.
+    addStyle(out, node.component, props.style);
     return out;
 }

package/build/fabric.d.ts

@@ -13,8 +13,9 @@ export type IMeasureLayoutOnSuccess = (left: number, top: number, width: number,
 export interface IFabricSlot {
     createNode(reactTag: number, viewName: string, rootTag: IRootTag, props: IFabricProps, instanceHandle: unknown): IFabricNode;
     cloneNodeWithNewProps(node: IFabricNode, newProps: IFabricProps): IFabricNode;
-    cloneNodeWithNewChildren(node: IFabricNode): IFabricNode;
-    cloneNodeWithNewChildrenAndProps(node: IFabricNode, newProps: IFabricProps): IFabricNode;
+    cloneNodeWithNewChildren(node: IFabricNode, children?: readonly IFabricNode[]): IFabricNode;
+    cloneNodeWithNewChildrenAndProps(node: IFabricNode, newProps: IFabricProps, children?: readonly IFabricNode[]): IFabricNode;
+    supportsCloneWithChildren: boolean;
     createChildSet(rootTag: IRootTag): IFabricChildSet;
     appendChild(parent: IFabricNode, child: IFabricNode): IFabricNode;
     appendChildToSet(childSet: IFabricChildSet, child: IFabricNode): void;
@@ -26,7 +27,13 @@ export interface IFabricSlot {
     measureInWindow(node: IFabricNode, callback: IMeasureInWindowOnSuccess): void;
     measureLayout(node: IFabricNode, relativeToNode: IFabricNode, onFail: () => void, onSuccess: IMeasureLayoutOnSuccess): void;
 }
+interface IFabricHost extends Omit<IFabricSlot, 'cloneNodeWithNewChildren' | 'cloneNodeWithNewChildrenAndProps' | 'supportsCloneWithChildren'> {
+    cloneNodeWithNewChildren(node: IFabricNode, children?: readonly IFabricNode[]): IFabricNode;
+    cloneNodeWithNewChildrenAndProps(node: IFabricNode, newProps: IFabricProps): IFabricNode;
+    cloneNodeWithNewChildrenAndProps(node: IFabricNode, children: readonly IFabricNode[], newProps: IFabricProps): IFabricNode;
+}
 declare global {
-    var nativeFabricUIManager: IFabricSlot | undefined;
+    var nativeFabricUIManager: IFabricHost | undefined;
 }
 export declare function getSlot(): IFabricSlot;
+export {};

package/build/fabric.js

@@ -35,8 +35,17 @@ export function getSlot() {
     cached = {
         createNode: (reactTag, viewName, rootTag, props, instanceHandle) => createNode(reactTag, viewName, rootTag, props, instanceHandle),
         cloneNodeWithNewProps: (node, newProps) => cloneNodeWithNewProps(node, newProps),
-        cloneNodeWithNewChildren: node => cloneNodeWithNewChildren(node),
-        cloneNodeWithNewChildrenAndProps: (node, newProps) => cloneNodeWithNewChildrenAndProps(node, newProps),
+        // The host's 3-arg form is (node, children, props); ours keeps props second.
+        cloneNodeWithNewChildren: (node, children) => children === undefined
+            ? cloneNodeWithNewChildren(node)
+            : cloneNodeWithNewChildren(node, children),
+        cloneNodeWithNewChildrenAndProps: (node, newProps, children) => children === undefined
+            ? cloneNodeWithNewChildrenAndProps(node, newProps)
+            : cloneNodeWithNewChildrenAndProps(node, children, newProps),
+        supportsCloneWithChildren: typeof cloneNodeWithNewChildren === 'function' &&
+            cloneNodeWithNewChildren.length >= 2 &&
+            typeof cloneNodeWithNewChildrenAndProps === 'function' &&
+            cloneNodeWithNewChildrenAndProps.length >= 3,
         createChildSet: rootTag => createChildSet(rootTag),
         appendChild: (parent, child) => appendChild(parent, child),
         appendChildToSet: (childSet, child) => appendChildToSet(childSet, child),

package/build/host-behavior.d.ts

@@ -0,0 +1,47 @@
+import type { ISymbioteNode } from './node';
+/**
+ * A pure props -> props mapping a behavior applies on the way to the Fabric payload.
+ *
+ * It exists because a lowered element has no component body, and a wrapper's body is where the
+ * per-primitive prop FOLDS live — TextInput's W3C aliases (`inputMode` -> `keyboardType`,
+ * `readOnly` -> `editable`), Pressable's `disabled` -> `accessibilityState`. Every one of those was
+ * silently dropped the moment the primitive lowered: the raw alias reached Fabric as a key no
+ * ViewConfig declares, so nothing threw and nothing rendered differently in a headless test —
+ * only the device showed a numeric keyboard that never appeared.
+ *
+ * NOT a hook on `setProp`, for the same reason `afterCommit` is not: `setProp` is the hottest path
+ * in the engine. This runs once per node per payload build, and only for a node whose behavior
+ * supplied one.
+ *
+ * MUST be pure and MUST NOT mutate its input — `node.props` is the live bag, and the folds beside
+ * this one return their input by identity when there is nothing to do.
+ */
+export type IPayloadFold = (props: Readonly<Record<string, unknown>>) => Record<string, unknown>;
+export interface IHostBehavior {
+    readonly ownedListeners?: readonly string[];
+    attach(node: ISymbioteNode): void;
+    attachAfterCommit?(node: ISymbioteNode): void;
+    afterCommit?(node: ISymbioteNode): void;
+    detach(node: ISymbioteNode): void;
+    readonly foldPayload?: IPayloadFold;
+}
+export declare function registerHostBehavior(component: string, behavior: IHostBehavior): void;
+export declare function hostBehaviorFor(tag: string): IHostBehavior | undefined;
+export declare function hasHostBehaviors(): boolean;
+export declare function ownsListener(node: ISymbioteNode, name: string): boolean;
+export declare function stashAppListener(node: ISymbioteNode, name: string, listener: unknown): void;
+export declare function appListenerFor(node: ISymbioteNode, name: string): unknown;
+export declare function attachHostBehavior(node: ISymbioteNode, tag: string): void;
+/**
+ * Run the deferred half of every behavior whose node has now been committed. Called from the commit
+ * path immediately after `completeRoot`, where fresh Fabric tags have just been assigned.
+ *
+ * `isCommitted` is passed in for the same no-cycle reason — `committedOf` lives in `commit.ts`. A
+ * still-uncommitted node stays in the set: a create superseded before it ever reached Fabric waits
+ * for the commit that lands it, and `detachSubtree` drops it if that commit never comes.
+ */
+export declare function runDeferredAttaches(isCommitted: (node: ISymbioteNode) => boolean): void;
+export declare function markDetachCandidate(node: ISymbioteNode): void;
+export declare function sweepDetachedBehaviors(topLevel: readonly ISymbioteNode[]): void;
+export declare function reattachHostBehaviors(node: ISymbioteNode): void;
+export declare function clearHostBehaviors(): void;