@symbiote-native/angular 0.6.0 → 0.6.2

package/src/components/scroll-view/projection.ts

@@ -15,10 +15,13 @@ import {
   type ISymbioteNode,
 } from '@symbiote-native/engine';
 import {
-  computeStickyInterpolation,
+  createInitialStickyState,
   readLayoutNumber,
-  stickyDebounceMs,
+  reduceSticky,
   STICKY_HEADER_Z_INDEX,
+  type IStickyAction,
+  type IStickyEffect,
+  type IStickyReducerInputs,
 } from '@symbiote-native/components';
 import { descriptorFor } from '@symbiote-native/components';
 import { Platform } from '@symbiote-native/engine';
@@ -64,17 +67,20 @@ function isProjectedRefreshControl(node: ISymbioteNode): boolean {
   return isAnchor(node) && node.children.some(isProjectedRefreshControl);
 }
 
+// The SECOND Angular sticky effect-runner (auto-projected children can't be arbitrary Angular
+// component classes, so the controller drives engine nodes directly). It shares the ONE
+// reduceSticky state machine with ScrollViewStickyHeader — the DECISIONS (zero-swallow gate, debounce
+// delay, rebuild ranges, cross-talk record) live there; this runner only EXECUTES the effects on the
+// engine node (build interpolation + wire listener, hold the debounce timer, re-apply the node props).
+// Because it owns the child index, it consumes the reducer's record-header-y effect for cross-talk.
 class StickyProjectionWrapper {
-  private measured = false;
-  private layoutY = 0;
-  private layoutHeight = 0;
+  private readonly state = createInitialStickyState();
   private animatedTranslateY: AnimatedInterpolation;
+  private interpolation: AnimatedInterpolation | undefined;
   private animatedProps: AnimatedProps | undefined;
   private cancelBind: (() => void) | undefined;
   private listenerId: string | undefined;
   private debounceTimer: ReturnType<typeof setTimeout> | undefined;
-  private translateY: number | null = null;
-  private haveReceivedInitialZeroTranslateY = true;
 
   constructor(
     private readonly controller: ScrollViewProjectionController,
@@ -85,14 +91,14 @@ class StickyProjectionWrapper {
       inputRange: [-1, 0],
       outputRange: [0, 0],
     });
-    this.rebuild();
+    this.dispatch({ kind: 'inputs-changed' });
   }
 
   destroy(): void {
     this.cancelBind?.();
     this.cancelBind = undefined;
-    if (this.listenerId !== undefined) {
-      this.animatedTranslateY.removeListener(this.listenerId);
+    if (this.interpolation !== undefined && this.listenerId !== undefined) {
+      this.interpolation.removeListener(this.listenerId);
       this.listenerId = undefined;
     }
     if (this.debounceTimer !== undefined) {
@@ -105,53 +111,77 @@ class StickyProjectionWrapper {
     }
   }
 
+  // The controller calls this when a cross-talk input changed (a sibling recorded its y): rebuild the
+  // ranges off the new nextStickyHeaderY.
   rebuild(): void {
-    if (this.listenerId !== undefined) {
-      this.animatedTranslateY.removeListener(this.listenerId);
-      this.listenerId = undefined;
-    }
+    this.dispatch({ kind: 'inputs-changed' });
+  }
 
-    const { inputRange, outputRange } = computeStickyInterpolation({
-      measured: this.measured,
+  private inputs(): IStickyReducerInputs {
+    return {
+      os: Platform.OS,
       inverted: this.controller.config.invertStickyHeaders,
       scrollViewHeight: this.controller.config.scrollViewHeight,
-      layoutY: this.layoutY,
-      layoutHeight: this.layoutHeight,
       nextHeaderLayoutY: this.controller.nextStickyHeaderY(this.childIndex),
-    });
-    this.animatedTranslateY = this.controller.config.scrollAnimatedValue.interpolate({
-      inputRange,
-      outputRange,
-    });
-    this.listenerId = this.animatedTranslateY.addListener(this.animatedValueListener);
-    this.applyProps();
-    dlog(
-      `Angular ScrollView projection sticky index=${this.childIndex} measured=${this.measured} y=${this.layoutY}`,
-    );
+      index: this.childIndex,
+    };
+  }
+
+  private dispatch(action: IStickyAction): void {
+    this.runEffects(reduceSticky(this.state, action, this.inputs()).effects);
+  }
+
+  private runEffects(effects: IStickyEffect[]): void {
+    for (const effect of effects) {
+      switch (effect.kind) {
+        case 'rebuild-interpolation': {
+          if (this.interpolation !== undefined && this.listenerId !== undefined) {
+            this.interpolation.removeListener(this.listenerId);
+            this.listenerId = undefined;
+          }
+          const next = this.controller.config.scrollAnimatedValue.interpolate({
+            inputRange: effect.inputRange,
+            outputRange: effect.outputRange,
+          });
+          this.listenerId = next.addListener(this.animatedValueListener);
+          this.interpolation = next;
+          this.animatedTranslateY = next;
+          this.applyProps();
+          dlog(
+            `Angular ScrollView projection sticky index=${this.childIndex} measured=${this.state.measured} y=${this.state.layoutY}`,
+          );
+          break;
+        }
+        case 'schedule-debounce':
+          if (this.debounceTimer !== undefined) clearTimeout(this.debounceTimer);
+          this.debounceTimer = setTimeout(() => {
+            this.debounceTimer = undefined;
+            this.dispatch({ kind: 'debounce-fired', value: effect.value });
+          }, effect.delay);
+          break;
+        case 'apply-passthrough':
+          this.applyProps();
+          break;
+        case 'record-header-y':
+          this.controller.recordHeaderLayoutY(effect.index, effect.y);
+          break;
+      }
+    }
   }
 
   private readonly onLayout = (event: ISymbioteEvent): void => {
     const y = readLayoutNumber(event, 'y');
     const height = readLayoutNumber(event, 'height');
-    if (y !== undefined) this.layoutY = y;
-    if (height !== undefined) this.layoutHeight = height;
-    this.measured = true;
-    this.controller.recordHeaderLayoutY(this.childIndex, this.layoutY);
-    this.rebuild();
+    // Keep the previous value when a field is absent (RN sets state only on a defined read).
+    this.dispatch({
+      kind: 'layout',
+      y: y ?? this.state.layoutY,
+      height: height ?? this.state.layoutHeight,
+    });
   };
 
   private readonly animatedValueListener = ({ value }: { value: number | string }): void => {
-    if (typeof value !== 'number') return;
-    if (value === 0 && !this.haveReceivedInitialZeroTranslateY) {
-      this.haveReceivedInitialZeroTranslateY = true;
-      return;
-    }
-    if (this.debounceTimer !== undefined) clearTimeout(this.debounceTimer);
-    this.debounceTimer = setTimeout(() => {
-      this.translateY = value;
-      if (value !== 0) this.haveReceivedInitialZeroTranslateY = false;
-      this.applyProps();
-    }, stickyDebounceMs(Platform.OS));
+    if (typeof value === 'number') this.dispatch({ kind: 'animated-tick', value });
   };
 
   private props(): Record<string, unknown> {
@@ -160,9 +190,9 @@ class StickyProjectionWrapper {
       zIndex: STICKY_HEADER_Z_INDEX,
     };
     const passthrough =
-      this.translateY === null
+      this.state.translateY === null
         ? undefined
-        : { transform: [{ translateY: this.translateY }], zIndex: STICKY_HEADER_Z_INDEX };
+        : { transform: [{ translateY: this.state.translateY }], zIndex: STICKY_HEADER_Z_INDEX };
     return {
       style: passthrough === undefined ? style : [style, passthrough],
       onLayout: this.onLayout,

package/src/components/scroll-view/shared.ts

@@ -38,6 +38,7 @@ import {
   readLayoutDimension,
   resolveAccessibilityProps,
   resolveDecelerationRate,
+  resolveScrollForwarding,
   selectScrollIntrinsics,
   splitLayoutProps,
   type IAccessibilityProps,
@@ -566,27 +567,34 @@ export abstract class ScrollViewBase implements IAngularScrollViewInputs, AfterV
     // by the post-commit attach below, so onScroll forwards to the user with throttle 1
     // (ScrollView.js:1798). Without it, Animated.event drives the value each frame (the JS jitter)
     // and forwards the user handler as the listener passthrough.
+    // The scroll-forwarding DECISIONS (which onScroll path, the 1/16 throttle defaults, whether to
+    // capture the viewport height) are folded out to the shared resolveScrollForwarding; here Angular
+    // only EXECUTES them, keeping its stable-reference handlers (stickyOnScrollHandler /
+    // handleInvertedStickyLayout / emitterCallback) so a fresh closure never forces a re-clone cascade.
     const nativeStickyAvailable = this.hasStickyHeaders && isNativeAnimatedAvailable();
-    if (this.hasStickyHeaders) {
-      if (nativeStickyAvailable) {
-        if (this.onScroll !== undefined) bag.onScroll = this.onScroll;
-        bag.scrollEventThrottle = this.scrollEventThrottle ?? 1;
-      } else {
-        bag.onScroll = this.stickyOnScrollHandler(this.onScroll);
-        bag.scrollEventThrottle = this.scrollEventThrottle ?? 16;
-      }
-      // Inverted sticky headers need the viewport height (RN _handleLayout): capture it on the
-      // scroll-view onLayout, then call the user's handler. Non-inverted forwards onLayout as-is.
-      if (this.invertStickyHeaders === true) {
-        bag.onLayout = this.handleInvertedStickyLayout;
-      } else {
-        const layoutCallback = this.emitterCallback(this.layout);
-        if (layoutCallback !== undefined) bag.onLayout = layoutCallback;
-      }
+    const forwarding = resolveScrollForwarding({
+      hasStickyHeaders: this.hasStickyHeaders,
+      nativeStickyAvailable,
+      invertStickyHeaders: this.invertStickyHeaders,
+      scrollEventThrottle: this.scrollEventThrottle,
+      maintainVisibleContentPosition: this.maintainVisibleContentPosition,
+      snapToAlignment: this.snapToAlignment,
+    });
+    // onScroll: the JS-fallback path uses the cached Animated.event handler; the native + plain paths
+    // forward the user handler as-is (the native driver attaches the value on the UI thread).
+    if (forwarding.mode === 'sticky-js') {
+      bag.onScroll = this.stickyOnScrollHandler(this.onScroll);
+    } else if (this.onScroll !== undefined) {
+      bag.onScroll = this.onScroll;
+    }
+    if (forwarding.scrollEventThrottle !== undefined) {
+      bag.scrollEventThrottle = forwarding.scrollEventThrottle;
+    }
+    // Inverted sticky headers need the viewport height (RN _handleLayout): capture it on the
+    // scroll-view onLayout, then call the user's handler. Otherwise forward the layout emitter.
+    if (forwarding.capturesViewportHeight) {
+      bag.onLayout = this.handleInvertedStickyLayout;
     } else {
-      if (this.onScroll !== undefined) bag.onScroll = this.onScroll;
-      if (this.scrollEventThrottle !== undefined)
-        bag.scrollEventThrottle = this.scrollEventThrottle;
       const layoutCallback = this.emitterCallback(this.layout);
       if (layoutCallback !== undefined) bag.onLayout = layoutCallback;
     }

package/src/components/scroll-view/sticky-header.ts

@@ -37,11 +37,14 @@ import {
   type ISymbioteEvent,
 } from '@symbiote-native/engine';
 import {
-  computeStickyInterpolation,
+  createInitialStickyState,
   readLayoutNumber,
-  stickyDebounceMs,
+  reduceSticky,
   STICKY_HEADER_Z_INDEX,
+  type IStickyAction,
+  type IStickyEffect,
   type IStickyHeaderProps,
+  type IStickyReducerInputs,
 } from '@symbiote-native/components';
 import { AnimatedView } from '../../modules/animated';
 import { anchorHostStyle } from '../../primitives';
@@ -90,19 +93,21 @@ export class ScrollViewStickyHeader
   // previous header learns its collision point. Called after the header measures.
   @Output() readonly layout = new EventEmitter<ISymbioteEvent>();
 
-  private measured = false;
-  private layoutY = 0;
-  private layoutHeight = 0;
-  // The animated node driving the transform (RN's animatedTranslateY). When the scroll value is
-  // native (attachStickyScroll), this interpolation runs on the UI thread: the smooth pin.
+  // The one folded state cell, mutated in place by reduceSticky. The DECISIONS — zero-swallow gate,
+  // debounce delay, rebuild ranges — all live there; this component supplies only the Angular
+  // lifecycle (inputs + manual change detection), the interpolation-node + listener wiring, the
+  // debounce setTimeout, and the markForCheck re-render.
+  private readonly state = createInitialStickyState();
+  // The animated node driving the transform (RN's animatedTranslateY), replaced by the
+  // rebuild-interpolation effect. When the scroll value is native, this interpolation runs on the UI
+  // thread: the smooth pin.
   private animatedTranslateY: AnimatedInterpolation = new AnimatedValue(0).interpolate({
     inputRange: [-1, 0],
     outputRange: [0, 0],
   });
-  // The debounced EXPLICIT translateY pushed to the committed transform via the passthrough, so the
-  // Fabric ShadowTree (hit-testing) knows the pinned position while the native driver animates.
-  private translateY: number | null = null;
-  private haveReceivedInitialZeroTranslateY = true;
+  // The current interpolation node + its listener id, held so the next rebuild detaches the old
+  // listener (an engine call the reducer does not own) and ngOnDestroy cleans up.
+  private interpolation: AnimatedInterpolation | undefined;
   private debounceTimer: ReturnType<typeof setTimeout> | undefined;
   private listenerId: string | undefined;
 
@@ -113,21 +118,17 @@ export class ScrollViewStickyHeader
   private readonly elementRef = inject(ElementRef);
 
   ngOnInit(): void {
-    this.animatedTranslateY = this.scrollAnimatedValue.interpolate({
-      inputRange: [-1, 0],
-      outputRange: [0, 0],
-    });
-    this.rebuildInterpolation();
+    this.dispatch({ kind: 'inputs-changed' });
   }
 
   // Rebuild on any layout/collision input change (RN's effect deps: measured, layoutY, layoutHeight,
   // scrollViewHeight, nextHeaderLayoutY, inverted). scrollAnimatedValue is stable for one ScrollView.
   ngOnChanges(): void {
-    this.rebuildInterpolation();
+    this.dispatch({ kind: 'inputs-changed' });
   }
 
   ngOnDestroy(): void {
-    this.teardownInterpolation();
+    this.teardown();
   }
 
   get headerStyle(): unknown {
@@ -161,65 +162,89 @@ export class ScrollViewStickyHeader
   // The EXPLICIT debounced translateY overrides the committed transform for hit-testing while
   // animatedTranslateY does the smooth (native-driven) pin (RN ScrollViewStickyHeader.js).
   get passthrough(): { style: { transform: Array<{ translateY: number }> } } | null {
-    return this.translateY !== null
-      ? { style: { transform: [{ translateY: this.translateY }] } }
+    return this.state.translateY !== null
+      ? { style: { transform: [{ translateY: this.state.translateY }] } }
       : null;
   }
 
-  // Record own y/height, mark measured, rebuild the interpolation, then fire the parent's recorder
-  // (RN ScrollViewStickyHeader.js._onLayout order). The wrapped child keeps its own onLayout binding
-  // (it is projected with its bindings intact), so unlike React/Vue we do not forward to it here.
+  private inputs(): IStickyReducerInputs {
+    return {
+      os: Platform.OS,
+      inverted: this.inverted,
+      scrollViewHeight: this.scrollViewHeight,
+      nextHeaderLayoutY: this.nextHeaderLayoutY,
+    };
+  }
+
+  private dispatch(action: IStickyAction): void {
+    this.runEffects(reduceSticky(this.state, action, this.inputs()).effects);
+  }
+
+  private runEffects(effects: IStickyEffect[]): void {
+    for (const effect of effects) {
+      switch (effect.kind) {
+        case 'rebuild-interpolation': {
+          // Detach the old listener, build a fresh interpolation onto the shared scroll value, and
+          // wire the settled-value listener (symbiote is always Fabric; RN attaches it only there).
+          if (this.interpolation !== undefined && this.listenerId !== undefined) {
+            this.interpolation.removeListener(this.listenerId);
+            this.listenerId = undefined;
+          }
+          const next = this.scrollAnimatedValue.interpolate({
+            inputRange: effect.inputRange,
+            outputRange: effect.outputRange,
+          });
+          this.listenerId = next.addListener(this.animatedValueListener);
+          this.interpolation = next;
+          this.animatedTranslateY = next;
+          dlog(
+            `Angular ScrollViewStickyHeader interpolation measured=${this.state.measured} y=${this.state.layoutY}`,
+          );
+          break;
+        }
+        case 'schedule-debounce':
+          // The animated value updates several times per frame; debounce the settled value into the
+          // committed transform so hit detection stays current (a Fabric issue, worse on Android).
+          if (this.debounceTimer !== undefined) clearTimeout(this.debounceTimer);
+          this.debounceTimer = setTimeout(() => {
+            this.debounceTimer = undefined;
+            this.dispatch({ kind: 'debounce-fired', value: effect.value });
+          }, effect.delay);
+          break;
+        case 'apply-passthrough':
+          this.changeDetector.markForCheck();
+          break;
+        case 'record-header-y':
+          // The Angular header records through the `layout` EventEmitter (handleLayout below), the
+          // public recorder contract; the reducer emits no index for it.
+          break;
+      }
+    }
+  }
+
+  // Record own y/height, mark measured, rebuild the interpolation (all via the reducer), then fire
+  // the parent's recorder (RN ScrollViewStickyHeader.js._onLayout order). The wrapped child keeps its
+  // own onLayout binding (projected with its bindings intact), so unlike React/Vue we do not forward.
   private handleLayout(event: ISymbioteEvent): void {
     const y = readLayoutNumber(event, 'y');
     const height = readLayoutNumber(event, 'height');
-    if (y !== undefined) this.layoutY = y;
-    if (height !== undefined) this.layoutHeight = height;
-    this.measured = true;
-    this.rebuildInterpolation();
+    // Keep the previous value when a field is absent (RN sets state only on a defined read).
+    this.dispatch({
+      kind: 'layout',
+      y: y ?? this.state.layoutY,
+      height: height ?? this.state.layoutHeight,
+    });
     this.layout.emit(event);
     this.changeDetector.markForCheck();
   }
 
-  // The animated value updates several times per frame during scroll; debounce it and push the
-  // settled value into the committed transform so hit detection stays current (a Fabric-only issue,
-  // worse on Android). A freshly-rebuilt interpolation re-emits 0; swallow that first zero (RN).
   private readonly animatedValueListener = ({ value }: { value: number | string }): void => {
-    if (typeof value !== 'number') return;
-    if (value === 0 && !this.haveReceivedInitialZeroTranslateY) {
-      this.haveReceivedInitialZeroTranslateY = true;
-      return;
-    }
-    if (this.debounceTimer !== undefined) clearTimeout(this.debounceTimer);
-    this.debounceTimer = setTimeout(() => {
-      this.translateY = value;
-      if (value !== 0) this.haveReceivedInitialZeroTranslateY = false;
-      this.changeDetector.markForCheck();
-    }, stickyDebounceMs(Platform.OS));
+    if (typeof value === 'number') this.dispatch({ kind: 'animated-tick', value });
   };
 
-  private rebuildInterpolation(): void {
-    this.teardownInterpolation();
-    const { inputRange, outputRange } = computeStickyInterpolation({
-      measured: this.measured,
-      inverted: this.inverted,
-      scrollViewHeight: this.scrollViewHeight,
-      layoutY: this.layoutY,
-      layoutHeight: this.layoutHeight,
-      nextHeaderLayoutY: this.nextHeaderLayoutY,
-    });
-    const interpolation = this.scrollAnimatedValue.interpolate({ inputRange, outputRange });
-    // symbiote is always Fabric: listen to the settled value to keep the ShadowTree transform
-    // current for hit-testing (RN attaches this listener only under Fabric).
-    this.listenerId = interpolation.addListener(this.animatedValueListener);
-    this.animatedTranslateY = interpolation;
-    dlog(
-      `Angular ScrollViewStickyHeader interpolation measured=${this.measured} y=${this.layoutY}`,
-    );
-  }
-
-  private teardownInterpolation(): void {
-    if (this.listenerId !== undefined) {
-      this.animatedTranslateY.removeListener(this.listenerId);
+  private teardown(): void {
+    if (this.interpolation !== undefined && this.listenerId !== undefined) {
+      this.interpolation.removeListener(this.listenerId);
       this.listenerId = undefined;
     }
     if (this.debounceTimer !== undefined) {

package/src/components/touchable/index.ts

@@ -33,7 +33,9 @@ import {
   Output,
 } from '@angular/core';
 import {
-  computePressOutWait,
+  createTouchableFeedbackHandlers,
+  createTouchableFeedbackRuntime,
+  highlightPressedStyle,
   DEFAULT_ACTIVE_OPACITY,
   DEFAULT_HIGHLIGHT_CHILD_OPACITY,
   DEFAULT_MIN_PRESS_DURATION_MS,
@@ -48,13 +50,9 @@ import {
   type IPressState,
   type IPressTimingProps,
   type IRectOffset,
+  type ITouchableFeedbackHandlers,
 } from '@symbiote-native/components';
-import {
-  dlog,
-  type ISymbioteEvent,
-  type IStyleProp,
-  type IViewStyle,
-} from '@symbiote-native/engine';
+import { type ISymbioteEvent, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
 import { anchorHostStyle, anchorStyleProp } from '../../primitives';
 import { Pressable, type IAngularPressableInputs } from '../pressable';
 import { Animated, AnimatedView } from '../../modules/animated';
@@ -80,6 +78,13 @@ export type IAngularTouchableHighlightProps = IAngularTouchableBaseProps & {
 
 export type IAngularTouchableWithoutFeedbackProps = IAngularTouchableBaseProps;
 
+// The real setTimeout the shared feedback machine schedules its deferred activation/deactivation on
+// (core/components has no timer globals). Returns a canceller so an early release flushes the timer.
+function scheduleTimeout(callback: () => void, ms: number): () => void {
+  const id = setTimeout(callback, ms);
+  return () => clearTimeout(id);
+}
+
 @Component({
   selector: 'TouchableOpacity',
   standalone: true,
@@ -232,10 +237,9 @@ export class TouchableOpacity implements IAngularTouchableOpacityProps {
   // engine object, never an @Input / reactive wrap); the <symbiote-animated-view> leaf rasterizes
   // it for the first paint and drives it through setNativeProps every frame.
   private readonly opacity = new Animated.Value(RESTING_OPACITY);
-  // The pending delayPressIn timer, so a release before it fires can flush it.
-  private pressInTimer: ReturnType<typeof setTimeout> | undefined;
-  // When the active visual actually started, to floor onPressOut by minPressDuration.
-  private activatedAt: number | undefined;
+  // The shared press-scheduling cell (delayPressIn timer + activation clock), persisted on the
+  // instance; the machine's handlers are rebuilt per event over live @Input()s.
+  private readonly runtime = createTouchableFeedbackRuntime();
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) — NOT the <symbiote-animated-view> leaf one level down.
   private readonly elementRef = inject(ElementRef);
@@ -257,61 +261,43 @@ export class TouchableOpacity implements IAngularTouchableOpacityProps {
     }).start();
   }
 
-  private clearPressInTimer(): void {
-    if (this.pressInTimer !== undefined) {
-      clearTimeout(this.pressInTimer);
-      this.pressInTimer = undefined;
-    }
-  }
-
-  private activate(event: ISymbioteEvent): void {
-    this.activatedAt = Date.now();
-    this.setOpacityTo(this.activeOpacity ?? DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_DURATION_MS);
-    this.pressIn.emit(event);
-  }
-
-  private deactivate(event: ISymbioteEvent): void {
-    this.activatedAt = undefined;
-    this.setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
-    this.pressOut.emit(event);
+  // Built per event so the machine reads live @Input()s (delay/opacity); the runtime persists across
+  // calls. The shared machine owns the scheduling — the adapter supplies only the native seam: the
+  // Animated opacity fade + the @Output() emit, as activate/deactivate.
+  private feedbackHandlers(): ITouchableFeedbackHandlers {
+    return createTouchableFeedbackHandlers(
+      {
+        delayPressIn: this.delayPressIn ?? 0,
+        delayPressOut: this.delayPressOut ?? 0,
+        minPressDuration: this.minPressDuration ?? DEFAULT_MIN_PRESS_DURATION_MS,
+        schedule: scheduleTimeout,
+        now: Date.now,
+      },
+      this.runtime,
+      {
+        activate: (event: ISymbioteEvent): void => {
+          this.setOpacityTo(
+            this.activeOpacity ?? DEFAULT_ACTIVE_OPACITY,
+            OPACITY_ACTIVE_DURATION_MS,
+          );
+          this.pressIn.emit(event);
+        },
+        deactivate: (event: ISymbioteEvent): void => {
+          this.setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
+          this.pressOut.emit(event);
+        },
+      },
+    );
   }
 
   // Arrow fields (stable identity for OnPush, `this` intact when Pressable's `(pressIn)` invokes
-  // them). RN's _createPressabilityConfig forwards delayPressIn — defer the active visual and
-  // pressIn behind the delay (a release before it elapses flushes it synchronously).
+  // them). The delayPressIn defer + minPressDuration/delayPressOut hold live in the shared machine.
   handlePressIn = (event: ISymbioteEvent): void => {
-    const delayPressIn = this.delayPressIn ?? 0;
-    if (delayPressIn > 0) {
-      dlog(`TouchableOpacity pressIn deferred ${delayPressIn}ms`);
-      this.pressInTimer = setTimeout(() => {
-        this.pressInTimer = undefined;
-        this.activate(event);
-      }, delayPressIn);
-      return;
-    }
-    this.activate(event);
+    this.feedbackHandlers().handlePressIn(event);
   };
 
-  // delayPressOut + minPressDuration (RN _deactivate): the press-out waits at least minPressDuration
-  // past activation (so a fast tap holds the active visual) and at least delayPressOut, whichever is
-  // longer.
   handlePressOut = (event: ISymbioteEvent): void => {
-    if (this.pressInTimer !== undefined) {
-      this.clearPressInTimer();
-      this.activate(event);
-    }
-    const heldFor = this.activatedAt === undefined ? 0 : Date.now() - this.activatedAt;
-    const wait = computePressOutWait(
-      heldFor,
-      this.minPressDuration ?? DEFAULT_MIN_PRESS_DURATION_MS,
-      this.delayPressOut ?? 0,
-    );
-    if (wait > 0) {
-      dlog(`TouchableOpacity pressOut deferred ${wait}ms`);
-      setTimeout(() => this.deactivate(event), wait);
-      return;
-    }
-    this.deactivate(event);
+    this.feedbackHandlers().handlePressOut(event);
   };
 }
 
@@ -473,13 +459,13 @@ export class TouchableHighlight implements IAngularTouchableHighlightProps {
   // child opacity (RN drives this with setState, not Animated, so we mirror that faithfully
   // through Pressable's pressed flag, no tween) — the overlay always goes last so it wins.
   pressedStyle = (state: IPressState): IStyleProp<IViewStyle> => {
-    const anchorStyle = anchorStyleProp<IViewStyle>(this.elementRef);
-    if (!state.pressed) return [anchorStyle, this.style];
-    const overlay: IViewStyle = {
-      backgroundColor: this.underlayColor ?? DEFAULT_UNDERLAY_COLOR,
-      opacity: this.activeOpacity ?? DEFAULT_HIGHLIGHT_CHILD_OPACITY,
-    };
-    return [anchorStyle, this.style, overlay];
+    const base: IStyleProp<IViewStyle> = [anchorStyleProp<IViewStyle>(this.elementRef), this.style];
+    return highlightPressedStyle(
+      state.pressed,
+      base,
+      this.underlayColor ?? DEFAULT_UNDERLAY_COLOR,
+      this.activeOpacity ?? DEFAULT_HIGHLIGHT_CHILD_OPACITY,
+    );
   };
 }