@symbiote-native/components 3.1.2 → 3.1.3

package/build/behaviors/pressable.d.ts

@@ -1,4 +1,4 @@
-import { type IHostBehavior, type ISymbioteNode } from '@symbiote-native/engine';
+import { type IEventDispatch, type IHostBehavior, type ISymbioteNode } from '@symbiote-native/engine';
 import { type IPressMachineConfig } from '../state/pressable';
 import type { IAccessibilityStateValue } from '../accessibility-props';
 export declare const PRESSABLE_TAG = "pressable";
@@ -9,12 +9,14 @@ export declare function booleanOr(value: unknown): boolean | undefined;
 export declare function asAccessibilityState(value: unknown): IAccessibilityStateValue | undefined;
 export declare function accessibleUnlessOptedOut(props: Readonly<Record<string, unknown>>): boolean;
 export declare function withNativeFeedbackCommands(node: ISymbioteNode, config: IPressMachineConfig): IPressMachineConfig;
-export declare function attachPressMachine(node: ISymbioteNode, options?: {
+export declare const PRESS_DISPATCH: IEventDispatch;
+export type IAttachOptions = {
     readonly refine?: IPressConfigRefinement;
     readonly disabledOf?: IDisabledResolver;
     readonly cancelableOf?: ICancelableResolver;
     readonly source?: ISymbioteNode;
-}): void;
+};
+export declare function attachPressMachine(node: ISymbioteNode, options?: IAttachOptions): void;
 /** See `attachPressMachine`: the same teardown `createPressBehavior` registers as its `detach`. */
 export declare function detachPressMachine(node: ISymbioteNode): void;
 export declare function createPressBehavior(refine?: IPressConfigRefinement, disabledOf?: IDisabledResolver): Pick<IHostBehavior, 'attach' | 'detach' | 'ownedListeners'>;

package/build/behaviors/pressable.js

@@ -4,7 +4,7 @@
 // Registration, not the machine, is the hazard: Metro's inlineRequires makes a barrel re-export of
 // a side-effect-only module never run in a release build. Each adapter keeps its own
 // `src/register.ts` calling registerPressableBehavior(), reached only by a bare side-effect import.
-import { appListenerFor, dispatchViewCommand, dlog, Platform, propOf, registerHostBehavior, requestCommitFor, setBehaviorListener, setNodePressed, propsOf, } from '@symbiote-native/engine';
+import { appListenerFor, dispatchViewCommand, dlog, Platform, propOf, registerHostBehavior, requestCommitFor, setNodeDispatch, setNodePressed, propsOf, } from '@symbiote-native/engine';
 import { createPressHandlers, createPressRuntime, disposePressRuntime, DEFAULT_DELAY_LONG_PRESS_MS, DEFAULT_MIN_PRESS_DURATION_MS, } from '../state/pressable.js';
 import { buildPressableListeners } from '../view/render-pressable/index.js';
 export const PRESSABLE_TAG = 'pressable';
@@ -196,7 +196,8 @@ const GESTURE_END_KEYS = new Set([
     'onPressOut',
     'onResponderTerminationRequest',
 ]);
-function dispatch(node, state, key, args) {
+function dispatch(node, options, key, args) {
+    const state = stateOf(node, options);
     if (!state.isBuilt)
         rebuild(node, state);
     const listener = state.listeners[key];
@@ -209,15 +210,10 @@ function dispatch(node, state, key, args) {
         state.isBuilt = false;
     return result;
 }
-// Installed straight into the listener slot, not through routeProp: the behavior OWNS these
-// names, and setEventListener diverts an owned name into the app stash — routing the dispatcher
-// through there would stash it and leave the slot empty.
-// Engine event name -> the app-facing callback key its dispatcher routes to. An array of pairs
-// rather than a Map: installListeners runs once per node carrying a press machine, and a `for…of`
-// over a Map allocates a fresh pair per entry where these tuples already exist.
-// NOT the same list as createPressBehavior's ownedListeners — that's every name the machine takes
-// as an INPUT, this is only the names it installs a dispatcher for.
-const EVENT_KEY_PAIRS = [
+// Engine event name -> the app-facing callback key it routes to. NOT the same list as
+// `createPressBehavior`'s `ownedListeners`, which is every name the machine takes as an INPUT;
+// this is only what it answers when Fabric fires
+const DISPATCH_KEYS = new Map([
     ['press', 'onPress'],
     ['pressIn', 'onPressIn'],
     ['pressOut', 'onPressOut'],
@@ -225,24 +221,55 @@ const EVENT_KEY_PAIRS = [
     ['responderMove', 'onResponderMove'],
     ['responderTerminationRequest', 'onResponderTerminationRequest'],
     ['responderGrant', 'onResponderGrant'],
-];
-function installListeners(node, state) {
-    for (const [event, key] of EVENT_KEY_PAIRS) {
-        setBehaviorListener(node, event, symbioteEvent => dispatch(node, state, key, [symbioteEvent]));
-    }
-}
+]);
+// The per-node half of what the seven dispatcher closures used to capture. A behavior that
+// registered no refinement leaves its nodes out of here entirely
+const attached = new WeakMap();
+// ONE object for every pressable in the app, where seven closures plus the `Map` holding them used
+// to sit per node. `attach` runs inside `createElement`, so what it allocates every list item pays
+// Exported for a tag that is a pressable PLUS something with names of its own (`./text-input`): it
+// composes a union and delegates here, since a node holds exactly one dispatch
+export const PRESS_DISPATCH = {
+    names: new Set(DISPATCH_KEYS.keys()),
+    deliver(node, name, event) {
+        const key = DISPATCH_KEYS.get(name);
+        if (key === undefined)
+            return undefined;
+        return dispatch(node, attached.get(node) ?? NO_OPTIONS, key, [event]);
+    },
+};
 function attachWith(refine, disabledOf) {
-    return node => attach(node, { refine, disabledOf });
+    // One bag per BEHAVIOR, not per node: `refine` and `disabledOf` are fixed at registration, and a
+    // behavior with neither shares the empty one so a plain `<pressable>` stores nothing
+    const options = refine === undefined && disabledOf === undefined
+        ? NO_OPTIONS
+        : { refine, disabledOf };
+    return node => attach(node, options);
 }
+const NO_OPTIONS = {};
 // The machine on `node`, reading props and callbacks off `options.source` when different.
 // Exported for touchable-native-feedback, whose tag commits nothing and adopts the app's single
 // child as the responder; every other caller goes through createPressBehavior where they're equal.
 // Re-callable on the same node: a second call replaces the state and dispatchers, which is what
 // re-arming after detachPressMachine needs.
-export function attachPressMachine(node, options = {}) {
+export function attachPressMachine(node, options = NO_OPTIONS) {
     attach(node, options);
 }
+// One pointer, plus one map slot for a refined behavior: everything below is read from `dispatch`
+// alone, so a pressable nobody touches never builds a gesture runtime
+// A re-attach drops the old state so the new options take effect on the next gesture
 function attach(node, options) {
+    states.delete(node);
+    if (options === NO_OPTIONS)
+        attached.delete(node);
+    else
+        attached.set(node, options);
+    setNodeDispatch(node, PRESS_DISPATCH);
+}
+function stateOf(node, options) {
+    const existing = states.get(node);
+    if (existing !== undefined)
+        return existing;
     const timers = new Set();
     const runtime = createPressRuntime();
     const host = {
@@ -285,14 +312,17 @@ function attach(node, options) {
         isBuilt: false,
     };
     states.set(node, state);
-    installListeners(node, state);
+    return state;
 }
 /** See `attachPressMachine`: the same teardown `createPressBehavior` registers as its `detach`. */
 export function detachPressMachine(node) {
     detach(node);
 }
 function detach(node) {
+    setNodeDispatch(node, undefined);
+    attached.delete(node);
     const state = states.get(node);
+    // A pressable nobody touched has no state at all, and the two releases above are all it owes
     if (state === undefined)
         return;
     // The machine's own teardown. Not load-bearing here: host.schedule puts every timer the machine

package/build/behaviors/refresh-control.js

@@ -29,7 +29,7 @@
 // `behaviors/switch.ts`'s module header, verbatim. Same shape, same two triggers, same reasons —
 // an ACCEPTING app's state reaches `node.props` only after its own reconciliation, and a REJECTING
 // app writes no prop at all, so the commit that `afterCommit` waits for never comes.
-import { appListenerFor, dispatchViewCommand, dlog, registerHostBehavior, setBehaviorListener, propOf, } from '@symbiote-native/engine';
+import { appListenerFor, dispatchViewCommand, dlog, registerHostBehavior, setNodeDispatch, propOf, } from '@symbiote-native/engine';
 export const REFRESH_CONTROL_TAG = 'refresh-control';
 // RN's own name for the command, sent to whichever of the two native views the platform resolved.
 const SET_NATIVE_REFRESHING = 'setNativeRefreshing';
@@ -75,10 +75,16 @@ function onRefresh(node, event) {
         listener(event);
     queueMicrotask(() => evaluateSnapBack(node));
 }
+// ONE object for every RefreshControl in the app, where a closure per node used to be
+const REFRESH_DISPATCH = {
+    names: new Set(['refresh']),
+    deliver: (node, _name, event) => onRefresh(node, event),
+};
 function attach(node) {
-    setBehaviorListener(node, 'refresh', event => onRefresh(node, event));
+    setNodeDispatch(node, REFRESH_DISPATCH);
 }
 function detach(node) {
+    setNodeDispatch(node, undefined);
     reported.delete(node);
 }
 // Idempotent: an adapter entry may be imported more than once in a bundle, and re-registering the

package/build/behaviors/scroll-view/responder.d.ts

@@ -1,4 +1,5 @@
-import { type ISymbioteNode } from '@symbiote-native/engine';
+import { type ISymbioteEvent, type ISymbioteNode } from '@symbiote-native/engine';
 export declare function markScrollObserved(owner: ISymbioteNode): void;
 export declare const RESPONDER_OWNED_LISTENERS: readonly string[];
-export declare function installResponderPredicates(owner: ISymbioteNode): void;
+export declare const RESPONDER_DISPATCHED_NAMES: ReadonlySet<string>;
+export declare function deliverResponderEvent(owner: ISymbioteNode, name: string, event: ISymbioteEvent): unknown;

package/build/behaviors/scroll-view/responder.js

@@ -5,7 +5,7 @@
 // Ported line-for-line from `ScrollView.js:1263-1546` — the negotiation engine itself and the
 // `IResponderProps` prop surface already exist and needed no change; this file is ScrollView opting
 // into the same mechanism Pressable already uses (`../pressable.ts:329-384`).
-import { appListenerFor, currentlyFocusedInput, blurTextInput, dlog, isDebug, isRecord, isSymbioteNode, Keyboard, Platform, propOf, setBehaviorListener, } from '@symbiote-native/engine';
+import { appListenerFor, currentlyFocusedInput, blurTextInput, dlog, isDebug, isRecord, isSymbioteNode, Keyboard, Platform, propOf, } from '@symbiote-native/engine';
 import { descriptorFor } from '../../component-names';
 import { TEXT_INPUT_MULTILINE_TAG, TEXT_INPUT_TAG } from '../text-input.js';
 // RN's `IS_ANIMATING_TOUCH_START_THRESHOLD_MS` (ScrollView.js:695) — a momentum end inside this
@@ -208,24 +208,22 @@ export const RESPONDER_OWNED_LISTENERS = [
     'momentumScrollBegin',
     'momentumScrollEnd',
 ];
-// Installed once per owner, in `attach` — same beat Pressable wires its own responder pair.
-export function installResponderPredicates(owner) {
-    setBehaviorListener(owner, 'startShouldSetResponderCapture', event => startShouldSetResponderCapture(owner, event));
-    setBehaviorListener(owner, 'startShouldSetResponder', event => startShouldSetResponder(owner, event));
-    setBehaviorListener(owner, 'responderTerminationRequest', () => responderTerminationRequest(owner));
-    setBehaviorListener(owner, 'responderGrant', event => {
-        handleResponderGrant(owner, event);
-    });
-    setBehaviorListener(owner, 'responderRelease', event => {
-        handleResponderRelease(owner, event);
-    });
-    setBehaviorListener(owner, 'momentumScrollBegin', event => {
-        handleMomentumScrollBegin(owner, event);
-    });
-    setBehaviorListener(owner, 'scrollBeginDrag', event => {
-        handleScrollBeginDrag(owner, event);
-    });
-    setBehaviorListener(owner, 'momentumScrollEnd', event => {
-        handleMomentumScrollEnd(owner, event);
-    });
+// The eight names an owner answers, as ONE module-level table where eight closures per node used to
+// be. `./shared` composes it with its own `scroll` into the owner's `IEventDispatch`
+const HANDLERS = new Map([
+    ['startShouldSetResponderCapture', startShouldSetResponderCapture],
+    ['startShouldSetResponder', startShouldSetResponder],
+    [
+        'responderTerminationRequest',
+        (owner) => responderTerminationRequest(owner),
+    ],
+    ['responderGrant', handleResponderGrant],
+    ['responderRelease', handleResponderRelease],
+    ['momentumScrollBegin', handleMomentumScrollBegin],
+    ['scrollBeginDrag', handleScrollBeginDrag],
+    ['momentumScrollEnd', handleMomentumScrollEnd],
+]);
+export const RESPONDER_DISPATCHED_NAMES = new Set(HANDLERS.keys());
+export function deliverResponderEvent(owner, name, event) {
+    return HANDLERS.get(name)?.(owner, event);
 }

package/build/behaviors/scroll-view/shared.js

@@ -20,10 +20,10 @@
 // `contentContainerStyle` travels through `slotProps` as a pure RENAME onto the slot's `style`;
 // the row-direction CONSTANT is a `payloadFold` instead, assigned to the slot node inside
 // `buildStructure` since `IHostBehavior.foldPayload` is only ever the OWNER's.
-import { appendChild, appListenerFor, createElement, dlog, registerHostBehavior, setBehaviorListener, setEventListener, } from '@symbiote-native/engine';
+import { appendChild, appListenerFor, createElement, dlog, registerHostBehavior, setNodeDispatch, setEventListener, } from '@symbiote-native/engine';
 import { descriptorFor } from '../../component-names';
 import { didContentSizeChange, readLayoutDimension, } from '../../view/render-scroll-view.js';
-import { installResponderPredicates, RESPONDER_OWNED_LISTENERS, } from './responder.js';
+import { deliverResponderEvent, RESPONDER_DISPATCHED_NAMES, RESPONDER_OWNED_LISTENERS, } from './responder.js';
 import { handleOwnerScroll, markScrollOwner, reconcileStickyIndices, releaseStickyOwner, stickyHeaderBehavior, STICKY_HEADER_TAG, syncOwnerLayout, } from './sticky.js';
 export const SCROLL_VIEW_TAG = 'scroll-view';
 export const HORIZONTAL_SCROLL_VIEW_TAG = 'horizontal-scroll-view';
@@ -105,6 +105,17 @@ function syncContentSizeWiring(owner, wired) {
         setEventListener(slot, 'layout', undefined);
     }
 }
+// The nine names an owner answers, as ONE object for every ScrollView in the app. `scroll` is in
+// here unconditionally т.к. it drives the sticky `AnimatedValue`, and a header may register long
+// after the node was created
+const OWNER_DISPATCH = {
+    names: new Set([...RESPONDER_DISPATCHED_NAMES, 'scroll']),
+    deliver(node, name, event) {
+        if (name === 'scroll')
+            return handleOwnerScroll(node, event);
+        return deliverResponderEvent(node, name, event);
+    },
+};
 // Two owned names answer to a flip, and they answer on DIFFERENT nodes: `contentSizeChange` wires
 // the SLOT's layout, `layout` wires the owner's own — which an inverted sticky header also wants,
 // so the two claims are resolved in one place (`syncOwnerLayout`) rather than by whoever wrote last.
@@ -133,14 +144,14 @@ function scrollBehavior(contentIntrinsic, rowStyle, platform) {
         // a header can register long after this node was created.
         attach(node) {
             markScrollOwner(node);
-            setBehaviorListener(node, 'scroll', event => handleOwnerScroll(node, event));
-            installResponderPredicates(node);
+            setNodeDispatch(node, OWNER_DISPATCH);
         },
         onOwnedListenerChange: syncOwnedListener,
         // The one beat where the app's children are all present — no hook reports a children CHANGE,
         // and reconcileStickyIndices returns on a WeakSet miss for any that never used the prop.
         afterCommit: reconcileStickyIndices,
         detach(node) {
+            setNodeDispatch(node, undefined);
             lastContentSize.delete(node);
             releaseStickyOwner(node);
         },

package/build/behaviors/switch.js

@@ -36,7 +36,7 @@
 // unresolved. `afterCommit` costs nothing extra (it fires only on a commit that already changed
 // something) and closes that one case; the microtask path is what the no-op-handler case actually
 // needs.
-import { appListenerFor, dispatchViewCommand, dlog, Platform, propOf, registerHostBehavior, setBehaviorListener, } from '@symbiote-native/engine';
+import { appListenerFor, dispatchViewCommand, dlog, Platform, propOf, registerHostBehavior, setNodeDispatch, } from '@symbiote-native/engine';
 import { createInitialSwitchState, shouldSnapBack, switchReducer, valueFromChange, } from '../state/switch.js';
 export const SWITCH_TAG = 'switch';
 const states = new WeakMap();
@@ -120,13 +120,27 @@ function alwaysClaimsResponder() {
 function neverYieldsResponder() {
     return false;
 }
+// ONE object for every Switch in the app, where three closures per node used to be
+const SWITCH_DISPATCH = {
+    names: new Set([
+        'change',
+        'startShouldSetResponder',
+        'responderTerminationRequest',
+    ]),
+    deliver(node, name, event) {
+        if (name === 'change')
+            return onChange(node, event);
+        return name === 'startShouldSetResponder'
+            ? alwaysClaimsResponder()
+            : neverYieldsResponder();
+    },
+};
 function attach(node) {
     states.set(node, createInitialSwitchState());
-    setBehaviorListener(node, 'change', event => onChange(node, event));
-    setBehaviorListener(node, 'startShouldSetResponder', alwaysClaimsResponder);
-    setBehaviorListener(node, 'responderTerminationRequest', neverYieldsResponder);
+    setNodeDispatch(node, SWITCH_DISPATCH);
 }
 function detach(node) {
+    setNodeDispatch(node, undefined);
     states.delete(node);
 }
 // Idempotent: an adapter entry may be imported more than once in a bundle, and re-registering the

package/build/behaviors/text-input.js

@@ -6,8 +6,8 @@
 // The order of the two commit hooks is load-bearing, pinned by a test: attachAfterCommit seeds
 // lastNativeText from mount-time props, afterCommit compares against that seed. Reversed, the
 // first beat would see an empty mirror and command a redundant write on every input.
-import { appListenerFor, blurTextInput, dispatchViewCommand, dlog, focusTextInput, Platform, propOf, propsOf, registerHostBehavior, requestCommitFor, setBehaviorListener, setInputBlurred, setInputFocused, setProp, } from '@symbiote-native/engine';
-import { attachPressMachine, detachPressMachine, } from './pressable.js';
+import { appListenerFor, blurTextInput, dispatchViewCommand, dlog, focusTextInput, Platform, propOf, propsOf, registerHostBehavior, requestCommitFor, setInputBlurred, setInputFocused, setNodeDispatch, setProp, } from '@symbiote-native/engine';
+import { attachPressMachine, detachPressMachine, PRESS_DISPATCH, } from './pressable.js';
 import { eventCountFromChange, foldText, INITIAL_EVENT_COUNT, SELECTION_NONE, shouldCommandText, textFromChange, } from '../state/text-input.js';
 // Both spellings, because `multiline` picks between two Fabric views and the TAG is what decides.
 // The behavior is registered for both so it does not care which one the app wrote.
@@ -186,15 +186,29 @@ function attach(node) {
     // No `requestCommitFor` here: at create the renderer commits anyway, and on a re-attach the key
     // is already at this value, so `setProp`'s identity guard makes the write a no-op.
     setProp(node, 'mostRecentEventCount', INITIAL_EVENT_COUNT);
-    setBehaviorListener(node, 'change', event => onChange(node, event));
-    setBehaviorListener(node, 'focus', event => onFocus(node, event));
-    setBehaviorListener(node, 'blur', event => onBlur(node, event));
-    setBehaviorListener(node, 'selectionChange', event => onSelectionChange(node, event));
     attachPressMachine(node, {
         refine: focusOnPress,
         cancelableOf: textInputCancelable,
     });
+    // AFTER the machine, which points the node at its own: a node holds exactly one dispatch, and
+    // `TEXT_INPUT_DISPATCH` is the union that delegates the machine's seven back to it
+    setNodeDispatch(node, TEXT_INPUT_DISPATCH);
 }
+const OWN_HANDLERS = new Map([
+    ['change', onChange],
+    ['focus', onFocus],
+    ['blur', onBlur],
+    ['selectionChange', onSelectionChange],
+]);
+const TEXT_INPUT_DISPATCH = {
+    names: new Set([...OWN_HANDLERS.keys(), ...PRESS_DISPATCH.names]),
+    deliver(node, name, event) {
+        const own = OWN_HANDLERS.get(name);
+        if (own !== undefined)
+            return own(node, event);
+        return PRESS_DISPATCH.deliver(node, name, event);
+    },
+};
 // TextInput.js:597 with its `rejectResponderTermination = true` default (:905): iOS keeps the
 // gesture unless the app opts in; Android hands Pressability `null`, i.e. its own default (yield).
 function textInputCancelable(source) {

package/build/behaviors/touchable-opacity.d.ts

@@ -1,12 +1,5 @@
 import { type IHostBehavior } from '@symbiote-native/engine';
 import { type IDisabledResolver } from './pressable';
 export declare const TOUCHABLE_OPACITY_TAG = "touchable-opacity";
-/**
- * The behavior as PARTS, so a tag that is a TouchableOpacity plus something — `button`, which RN
- * builds as exactly that (Button.js:283) — composes the fade instead of re-implementing it.
- *
- * Safe to hand to two tags: every piece of runtime is keyed by NODE (`states`), and `press` is
- * itself already shared that way.
- */
 export declare function createTouchableOpacityBehavior(disabledOf?: IDisabledResolver): IHostBehavior;
 export declare function registerTouchableOpacityBehavior(): void;

package/build/behaviors/touchable-opacity.js

@@ -25,12 +25,32 @@
 // event props. Deliberately not implemented — dead on every device this project targets (no tvOS
 // build, no example app; iOS/Android are the only targets). Audit skill, "Found, NOT fixed: TV
 // (Platform.isTV) focus/blur feedback on TouchableOpacity/Highlight".
-import { AnimatedMock, AnimatedValue, Easing, Platform, dlog, getExplicitStyle, markPropsDirty, registerHostBehavior, requestCommitFor, setAnimatedBehaviorStyle, timing, propOf, propsOf, } from '@symbiote-native/engine';
+import { AnimatedMock, AnimatedValue, Easing, Platform, dlog, getExplicitStyle, markPropsDirty, registerHostBehavior, requestCommitFor, setAnimatedBehaviorStyle, setProp, timing, propOf, propsOf, } from '@symbiote-native/engine';
 import { resolveButtonDisabled } from '../view/render-button.js';
 import { asAccessibilityState, booleanOr, createPressBehavior, } from './pressable.js';
-import { createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_DURATION_MS, OPACITY_ACTIVE_GRANT_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, restingOpacityFromStyle, TOUCHABLE_MIN_PRESS_DURATION_MS, } from '../state/touchable.js';
+import { createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_DURATION_MS, OPACITY_ACTIVE_GRANT_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, restingOpacityFromStyle, TOUCHABLE_MIN_PRESS_DURATION_MS, } from '../state/touchable.js';
 export const TOUCHABLE_OPACITY_TAG = 'touchable-opacity';
 const states = new WeakMap();
+// Built on the FIRST FADE, not at attach: the three together read 1 343 B per node
+// (`touchable-attach-cost.itest.ts`) and nothing reads them until a finger lands
+function stateOf(node) {
+    const existing = states.get(node);
+    if (existing !== undefined)
+        return existing;
+    // Seeded at the CURRENT resting opacity, which the first `afterCommit` used to set
+    const state = {
+        opacity: new AnimatedValue(restingOpacityOf(node)),
+        runtime: createTouchableFeedbackRuntime(),
+        timers: new Set(),
+        isBound: false,
+    };
+    states.set(node, state);
+    return state;
+}
+// What the last commit settled at, apart from the state above т.к. `afterCommit` runs for every
+// mounted node while that state is owed only by one that actually fades
+// `undefined` is the mount, where RN re-settles nothing (it is `componentDidUpdate` only)
+const settledAt = new WeakMap();
 // `modules/animated`'s barrel swaps the whole driver namespace for the mock when the host reports
 // reduced motion; the one driver used here is swapped on the same flag.
 const startTiming = Platform.isDisableAnimations ? AnimatedMock.timing : timing;
@@ -46,7 +66,16 @@ function numberOr(value, fallback) {
 function restingOpacityOf(node) {
     return restingOpacityFromStyle(getExplicitStyle(node));
 }
-function fadeTo(state, toValue, ms) {
+// Registered on FIRST FADE, not at attach: the leaf costs 9.8 us and 5.9 KB per node
+// (`touchable-attach-cost.itest.ts`) and a list nobody presses pays it for a value that never moves
+function ensureLayer(node, state) {
+    if (state.isBound)
+        return;
+    state.isBound = true;
+    setAnimatedBehaviorStyle(node, { opacity: state.opacity });
+}
+function fadeTo(node, state, toValue, ms) {
+    ensureLayer(node, state);
     dlog(`touchable-opacity opacity -> ${toValue} over ${ms}ms`);
     // useNativeDriver is RN's own (TouchableOpacity.js:242): opacity is natively drivable, so the
     // fade survives a busy JS thread, which is the whole point of press feedback.
@@ -61,9 +90,7 @@ function fadeTo(state, toValue, ms) {
 // hold when a finger lands, and the handlers it builds are discarded with the gesture. The runtime
 // that must outlive one — an in-flight delayPressIn timer, the activation clock — is on the node.
 const refine = (node, config) => {
-    const state = states.get(node);
-    if (state === undefined)
-        return config;
+    const state = stateOf(node);
     const resting = restingOpacityOf(node);
     const activeOpacity = numberOr(propOf(node, 'activeOpacity'), DEFAULT_ACTIVE_OPACITY);
     const handlers = createTouchableFeedbackHandlers({
@@ -86,18 +113,16 @@ const refine = (node, config) => {
         now: Date.now,
     }, state.runtime, {
         activate(event) {
-            // TouchableOpacity.js:215-220 picks the duration from WHERE the press-in came from: our
-            // engine's own 'pressIn' event (an ordinary grant, or its delayed replay) is the 0ms leg;
-            // a drift-out/drift-back-in reactivation arrives as 'responderMove'
-            // (`state/pressable.ts`'s `handleResponderMove`) and gets the 150ms ease-back-in instead.
+            // TouchableOpacity.js:215-220 picks the duration from WHERE the press-in came from: a
+            // plain grant fades instantly, a drift-back-in arrives as `responderMove` and eases
             const duration = event.type === 'responderMove'
                 ? OPACITY_ACTIVE_DURATION_MS
                 : OPACITY_ACTIVE_GRANT_DURATION_MS;
-            fadeTo(state, activeOpacity, duration);
+            fadeTo(node, state, activeOpacity, duration);
             config.onPressIn?.(event);
         },
         deactivate(event) {
-            fadeTo(state, resting, OPACITY_INACTIVE_DURATION_MS);
+            fadeTo(node, state, resting, OPACITY_INACTIVE_DURATION_MS);
             config.onPressOut?.(event);
         },
     });
@@ -115,13 +140,9 @@ const refine = (node, config) => {
 // Without it, a caller who sets only `accessibilityState={{disabled: true}}` (no `disabled` prop)
 // gets the greyed-out RN look but a press that still fires here — RN suppresses it.
 const touchableOpacityDisabled = props => resolveButtonDisabled(booleanOr(props.disabled), booleanOr(props['aria-disabled']), asAccessibilityState(props.accessibilityState));
-/**
- * The behavior as PARTS, so a tag that is a TouchableOpacity plus something — `button`, which RN
- * builds as exactly that (Button.js:283) — composes the fade instead of re-implementing it.
- *
- * Safe to hand to two tags: every piece of runtime is keyed by NODE (`states`), and `press` is
- * itself already shared that way.
- */
+// The behavior as PARTS, so a tag that is a TouchableOpacity plus something composes the fade
+// instead of re-implementing it (`button` is exactly that, Button.js:283)
+// Safe to hand to two tags: every piece of runtime is keyed by NODE, `press` included
 export function createTouchableOpacityBehavior(disabledOf) {
     // Its own machine rather than the module-level `press`, so a composing tag can say what
     // `disabled` MEANS to it — the answer feeds the machine, not a payload: the props half of that
@@ -130,72 +151,50 @@ export function createTouchableOpacityBehavior(disabledOf) {
     return {
         ...machine,
         attach(node) {
-            const state = {
-                opacity: new AnimatedValue(RESTING_OPACITY),
-                runtime: createTouchableFeedbackRuntime(),
-                timers: new Set(),
-                settled: undefined,
-            };
-            states.set(node, state);
-            // Bound at ATTACH rather than at the first press, matching RN: the binding is what forces
-            // `collapsable: false`, and a view Fabric un-flattens mid-gesture would lose the responder.
-            // Nothing is published until a fade runs — the leaf writes only when its value moves.
-            setAnimatedBehaviorStyle(node, { opacity: state.opacity });
+            // The half of the binding that CANNOT wait for the first press: a view Fabric flattens
+            // mid-gesture loses the tag the responder lands on. Everything else follows in `stateOf`
+            setProp(node, 'collapsable', false);
             machine.attach(node);
         },
         // RN's componentDidUpdate: a changed `disabled` or a changed style opacity re-settles the view,
         // so a Touchable disabled mid-press does not stay stuck at its active opacity.
         afterCommit(node) {
-            const state = states.get(node);
-            if (state === undefined)
-                return;
             const resting = restingOpacityOf(node);
-            // Through the SAME resolver the press machine uses, not the raw prop: on Button `disabled` is
-            // the three-way answer of `props.disabled ?? aria-disabled ?? accessibilityState.disabled`
-            // (Button.js:331,337), so reading the prop here left an aria-only flip un-settled — the view
-            // stayed at its active opacity while the press was already suppressed. RN's Button has no
-            // such gap because it passes the resolved value DOWN as its touchable's prop.
+            // Through the SAME resolver the press machine uses, not the raw prop: on `button` `disabled`
+            // also answers to `aria-disabled` / `accessibilityState` (Button.js:331,337), and reading the
+            // prop alone left an aria-only flip un-settled at its active opacity
             const props = propsOf(node);
             const disabled = disabledOf?.(props) ?? props.disabled;
-            const previous = state.settled;
-            state.settled = { disabled, resting };
-            if (previous === undefined) {
-                // NOT vendor parity, despite this comment's old claim: `TouchableOpacity-itest.js` ("does
-                // not render explicit opacity when using default") proves a resting, untouched
-                // TouchableOpacity commits no `opacity` key at all. Vendor's native-animated leaf is a
-                // separate channel from the ordinary style diff, so forcing non-flattening never implies
-                // publishing a value. Ours publishes anyway: `setAnimatedBehaviorStyle`/`bindAnimatedValue`
-                // (`host-binding.ts`) force `collapsable: false` and resolve+write the leaf's value in the
-                // SAME call. Untangling that is a change to shared animation infrastructure, not a one-line
-                // fix here — deferred, see the audit skill. Set rather than animate: this is the mount, and
-                // RN re-settles on componentDidUpdate only.
-                //
-                // TODO(rn-parity): skip this initial publish when `resting === RESTING_OPACITY` (1, Fabric's
-                // own opacity default) and no authored `style.opacity` needs another route to Fabric, so a
-                // resting default TouchableOpacity commits no `opacity` key — matching vendor. Needs
-                // `bindAnimatedValue`/`host-binding.ts` to separate "force collapsable:false" from "publish
-                // the leaf's value" (shared by every animated-behavior consumer, not just this tag), plus a
-                // new test for the untouched-default case (no existing case in touchable-opacity.test.ts
-                // covers it — every case authors an explicit style.opacity first).
-                state.opacity.setValue(resting);
+            const previous = settledAt.get(node);
+            settledAt.set(node, { disabled, resting });
+            // The mount, where RN re-settles nothing. An untouched node holds no `AnimatedValue` yet, and
+            // `stateOf` seeds the one it eventually builds at whatever `resting` is by then
+            if (previous === undefined)
                 return;
-            }
             if (previous.disabled === disabled && previous.resting === resting)
                 return;
-            fadeTo(state, resting, OPACITY_INACTIVE_DURATION_MS);
+            fadeTo(node, stateOf(node), resting, OPACITY_INACTIVE_DURATION_MS);
         },
         detach(node) {
             machine.detach(node);
+            settledAt.delete(node);
             const state = states.get(node);
-            if (state === undefined)
+            // Never faded, so the flatten guard `attach` wrote is the only thing owed back
+            if (state === undefined) {
+                setProp(node, 'collapsable', undefined);
                 return;
+            }
             for (const id of state.timers)
                 clearTimeout(id);
             state.timers.clear();
             // RN's componentWillUnmount: stop the animation so a teardown mid-fade leaves no driver
             // running against a node that is gone.
             state.opacity.resetAnimation();
-            setAnimatedBehaviorStyle(node, undefined);
+            // Dropping the layer clears `collapsable` on its way out, so only an unbound node still owes
+            if (state.isBound)
+                setAnimatedBehaviorStyle(node, undefined);
+            else
+                setProp(node, 'collapsable', undefined);
             states.delete(node);
             dlog('touchable-opacity behavior detached');
         },

package/build/behaviors/touchable-without-feedback.js

@@ -71,15 +71,22 @@ function numberOr(value, fallback) {
 // The clone is `foldCloneOntoChild` in C++, keyed on the PARENT'S tag; TWF's passthrough half
 // copies only when SET, unlike TNF's unconditional list. One upstream quirk it reproduces:
 // `nativeID` wins over `id` here (`node.nativeIdWinsOverId`, `clone-onto-child-payload.itest.ts`).
-/**
- * `delayPressIn` / `delayPressOut` (:186-188) plus RN's unconditional `minPressDuration: 0` (:190).
- *
- * The scheduler is `../state/touchable`'s — the one `./touchable-opacity` drives its fade with,
- * here with `activate` / `deactivate` forwarding and painting nothing. It reads the OWNER, so the
- * owner is closed over rather than taken from the refinement's argument, which is the CHILD.
- */
-function refinementFor(owner, state) {
+// Built on the FIRST GESTURE, not at arm: nothing reads the runtime or the timer set until a
+// finger lands, and a list of touchables nobody presses paid ~500 B per item for them
+function stateOf(owner) {
+    const existing = states.get(owner);
+    if (existing !== undefined)
+        return existing;
+    const state = {
+        runtime: createTouchableFeedbackRuntime(),
+        timers: new Set(),
+    };
+    states.set(owner, state);
+    return state;
+}
+function refinementFor(owner) {
     return (_node, config) => {
+        const state = stateOf(owner);
         const handlers = createTouchableFeedbackHandlers({
             delayPressIn: numberOr(propOf(owner, 'delayPressIn'), 0),
             delayPressOut: numberOr(propOf(owner, 'delayPressOut'), 0),
@@ -127,18 +134,13 @@ function trampolineFor(owner, name) {
 function forwardListener(owner, child, name, wired) {
     setBehaviorListener(child, name, wired ? trampolineFor(owner, name) : undefined);
 }
-// The machine plus the forwarded listeners. Split from adoption because a parked subtree comes back
-// with its child and its fold intact but its machine torn down — `attach` re-runs this, and must
-// NOT re-chain the fold.
+// The machine plus the forwarded listeners. Split from adoption т.к. a parked subtree comes back
+// with its child and its fold intact but its machine torn down, so `attach` re-runs this and must
+// NOT re-chain the fold
 function arm(owner, child) {
-    let state = states.get(owner);
-    if (state === undefined) {
-        state = { runtime: createTouchableFeedbackRuntime(), timers: new Set() };
-        states.set(owner, state);
-    }
     attachPressMachine(child, {
         source: owner,
-        refine: refinementFor(owner, state),
+        refine: refinementFor(owner),
     });
     for (const name of FORWARDED_LISTENERS) {
         forwardListener(owner, child, name, appListenerFor(owner, name) !== undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/components",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Framework-agnostic component logic (state machines + render functions) for SymbioteNative — written once, inherited by every adapter (React, Vue, Angular, ...).",
   "license": "MIT",
   "repository": {
@@ -59,11 +59,11 @@
   },
   "peerDependencies": {
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.3.1"
+    "@symbiote-native/engine": "^1.4.0"
   },
   "devDependencies": {
     "@types/node": "^26.0.0",
-    "@symbiote-native/engine": "1.3.1"
+    "@symbiote-native/engine": "1.4.0"
   },
   "scripts": {
     "typecheck": "tsc --build",