@symbiote-native/svelte 0.2.0 → 0.3.0

package/build/components/scroll-view/sticky-header.svelte

@@ -29,7 +29,8 @@
   //
   // Native-Animated-driven, like React's ScrollViewStickyHeader.js: the pinned translateY rides
   // as the raw AnimatedInterpolation node in style.transform on a real Animated.View
-  // (AnimatedView.svelte), whose `__makeNative()` connects it straight to the native shadow tree,
+  // (createAnimatedComponent(View)), whose `__makeNative()` connects it straight to the native
+  // shadow tree,
   // so once native the pin tracks scroll on the UI thread with zero JS per frame - the
   // interpolation's own .addListener() below only drives the separate debounced
   // `passthroughAnimatedPropExplicitValues` (RN's own hit-testing sync).
@@ -51,9 +52,16 @@
   // why ScrollView/VirtualizedList force `nativeStickyAvailable = false`: the correct bootstrap
   // path, not a workaround.
   import type { IStickyHeaderComponentProps } from './sticky-header-props';
+  import View from '../View.svelte';
+  import { createAnimatedComponent } from '../../modules/animated/create-animated-component';
 
   export type { IStickyHeaderComponentProps };
 
+  // Wrapped here, not imported from modules/animated: that barrel imports ScrollView, which
+  // imports this file, so naming it would close a module cycle. Module scope, so every header
+  // instance shares one component identity.
+  const AnimatedView = createAnimatedComponent(View);
+
   // Diagnostic-only: a module-scope counter so every instance across every ScrollViewStickyHeader
   // in a device log is individually identifiable (see the mount/unmount dlog calls below).
   let stickyHeaderInstanceSeq = 0;
@@ -70,8 +78,13 @@
     type IStickyEffect,
     type IStickyReducerInputs,
   } from '@symbiote-native/components';
-  import { AnimatedValue, Platform, dlog, type AnimatedInterpolation, type ISymbioteEvent } from '@symbiote-native/engine';
-  import AnimatedView from '../../modules/animated/AnimatedView.svelte';
+  import {
+    AnimatedValue,
+    Platform,
+    dlog,
+    type AnimatedInterpolation,
+    type ISymbioteEvent,
+  } from '@symbiote-native/engine';
   import {
     SCROLL_VIEW_STICKY_CONTEXT_KEY,
     type IScrollViewStickyContext,
@@ -91,18 +104,26 @@
   // Resolve the scroll wiring from the parent ScrollView's context when not given explicitly.
   // A fresh standalone AnimatedValue is the fallback for a header used outside a ScrollView
   // (never sticks, but never crashes either).
-  const stickyContext = getContext<IScrollViewStickyContext | undefined>(SCROLL_VIEW_STICKY_CONTEXT_KEY);
+  const stickyContext = getContext<IScrollViewStickyContext | undefined>(
+    SCROLL_VIEW_STICKY_CONTEXT_KEY,
+  );
   $effect(() => {
     if (stickyContext === undefined && scrollAnimatedValueProp === undefined) {
-      dlog('ScrollViewStickyHeader used outside a ScrollView — sticky positioning is a no-op');
+      dlog(
+        'ScrollViewStickyHeader used outside a ScrollView — sticky positioning is a no-op',
+      );
     }
   });
   // svelte-ignore state_referenced_locally -- captured ONCE by identity; it does not change
   // after mount, so re-deriving it would be wrong.
   const scrollAnimatedValue =
-    scrollAnimatedValueProp ?? stickyContext?.scrollAnimatedValue ?? new AnimatedValue(0);
+    scrollAnimatedValueProp ??
+    stickyContext?.scrollAnimatedValue ??
+    new AnimatedValue(0);
   const inverted = $derived(invertedProp ?? stickyContext?.getInverted());
-  const scrollViewHeight = $derived(scrollViewHeightProp ?? stickyContext?.getViewportHeight());
+  const scrollViewHeight = $derived(
+    scrollViewHeightProp ?? stickyContext?.getViewportHeight(),
+  );
 
   // The one folded state cell (RN's scattered useState/useRef collapsed into IStickyHeaderState),
   // mutated in place by reduceSticky. Named `stickyState`, not `state`: a local binding literally
@@ -115,7 +136,10 @@
   // The interpolation node currently bound into style.transform — held by IDENTITY ($state.raw),
   // rebuilt on every 'rebuild-interpolation' effect.
   let animatedTranslateY = $state.raw<AnimatedInterpolation>(
-    scrollAnimatedValue.interpolate({ inputRange: [-1, 0], outputRange: [0, 0] }),
+    scrollAnimatedValue.interpolate({
+      inputRange: [-1, 0],
+      outputRange: [0, 0],
+    }),
   );
   let listenerId: string | undefined;
   let debounceTimer: ReturnType<typeof setTimeout> | undefined;
@@ -139,14 +163,18 @@
           // Detach the old listener, build a fresh interpolation onto the shared scroll value, and
           // wire the settled-value listener (drives ONLY the debounced hit-testing passthrough
           // below — the visible pin rides the native AnimatedProps connection in the markup).
-          if (listenerId !== undefined) animatedTranslateY.removeListener(listenerId);
+          if (listenerId !== undefined)
+            animatedTranslateY.removeListener(listenerId);
           const next = scrollAnimatedValue.interpolate({
             inputRange: effect.inputRange,
             outputRange: effect.outputRange,
           });
-          listenerId = next.addListener(({ value }: { value: number | string }): void => {
-            if (typeof value === 'number') dispatch({ kind: 'animated-tick', value });
-          });
+          listenerId = next.addListener(
+            ({ value }: { value: number | string }): void => {
+              if (typeof value === 'number')
+                dispatch({ kind: 'animated-tick', value });
+            },
+          );
           animatedTranslateY = next;
           break;
         }
@@ -160,7 +188,9 @@
         case 'apply-passthrough':
           // The actual committed translateY — a freeze at a huge/wrong number here is the
           // visible-disappearance symptom to watch for.
-          dlog(`ScrollViewStickyHeader[y=${stickyState.layoutY}] apply-passthrough translateY=${effect.translateY}`);
+          dlog(
+            `ScrollViewStickyHeader[y=${stickyState.layoutY}] apply-passthrough translateY=${effect.translateY}`,
+          );
           version += 1;
           break;
         case 'record-header-y':
@@ -192,8 +222,11 @@
   // Detach the listener + clear the debounce on unmount.
   $effect(() => {
     return (): void => {
-      dlog(`ScrollViewStickyHeader#${instanceId}[y=${stickyState.layoutY}] unmount`);
-      if (listenerId !== undefined) animatedTranslateY.removeListener(listenerId);
+      dlog(
+        `ScrollViewStickyHeader#${instanceId}[y=${stickyState.layoutY}] unmount`,
+      );
+      if (listenerId !== undefined)
+        animatedTranslateY.removeListener(listenerId);
       if (debounceTimer !== undefined) clearTimeout(debounceTimer);
     };
   });
@@ -213,7 +246,7 @@
 
   // The EXPLICIT debounced translateY overrides the committed transform for hit-testing, while
   // `animatedTranslateY` (in the markup below) does the smooth native-driven pin — per RN
-  // ScrollViewStickyHeader.js, and AnimatedView.svelte's own passthroughAnimatedPropExplicitValues
+  // ScrollViewStickyHeader.js, and createAnimatedComponent's own passthroughAnimatedPropExplicitValues
   // contract (readPassthroughStyle).
   const passthroughAnimatedPropExplicitValues = $derived.by(() => {
     void version;

package/build/components/section-list/index.svelte

@@ -6,7 +6,11 @@
   // (a Svelte `bind:this` on THIS component resolves to whatever THIS component exports, so the
   // wrapper must re-declare + delegate rather than re-exporting the child's exports directly) —
   // the Svelte twin of the React/Vue SectionList.
-  import type { ISectionListProps, ISectionListHandle, ISection } from './section-list-props';
+  import type {
+    ISectionListProps,
+    ISectionListHandle,
+    ISection,
+  } from './section-list-props';
 
   export type { ISectionListProps, ISectionListHandle, ISection };
 </script>
@@ -77,6 +81,7 @@
   footer={props.footer}
   empty={props.empty}
   keyExtractor={props.keyExtractor}
+  getItemLayout={props.getItemLayout}
   stickySectionHeadersEnabled={props.stickySectionHeadersEnabled}
   inverted={props.inverted}
   extraData={props.extraData}

package/build/components/switch/index.svelte

@@ -27,7 +27,11 @@
     valueFromChange,
     renderSwitch,
   } from '@symbiote-native/components';
-  import { dispatchViewCommand, dlog, type ISymbioteEvent } from '@symbiote-native/engine';
+  import {
+    dispatchViewCommand,
+    dlog,
+    type ISymbioteEvent,
+  } from '@symbiote-native/engine';
   import { PLATFORM } from './switch-platform';
   import { createDescriptorChildrenSync } from '../../descriptor-to-svelte';
   import { createAttachmentsSync } from '../../runes/attachments';
@@ -67,7 +71,10 @@
     // accept/reject control via the snap-back effect below — see TextInput's identical
     // mechanism (text-input/index.svelte) for why echoing unconditionally would break that.
     if (onValueChange === undefined) value = next;
-    switchState = switchReducer(switchState, { type: 'native-reported', value: next });
+    switchState = switchReducer(switchState, {
+      type: 'native-reported',
+      value: next,
+    });
   }
 
   // Snap-back: when native reported a value the parent rejected (the value prop did not
@@ -102,7 +109,11 @@
         thumbColor,
         ios_backgroundColor,
         style,
-        passthrough: { ...passthrough, class: className, onChange: handleChange },
+        passthrough: {
+          ...passthrough,
+          class: className,
+          onChange: handleChange,
+        },
       },
       PLATFORM,
     ),

package/build/components/text-input/index.svelte

@@ -89,7 +89,9 @@
   // plain, direct property read on the raw `$props()` proxy. `source` is a closed interface (no
   // index signature), so `Object.keys` + bracket-indexing would need an `as` cast; `Object.entries`
   // falls onto TS's `entries(o: {}): [string, any][]` overload instead, which needs no cast.
-  function forwardProps(source: Omit<ITextInputProps, 'value'>): Record<string, unknown> {
+  function forwardProps(
+    source: Omit<ITextInputProps, 'value'>,
+  ): Record<string, unknown> {
     const resolved = resolveAccessibilityProps(source);
     const result: Record<string, unknown> = {};
     for (const [key, propValue] of Object.entries(resolved)) {
@@ -205,9 +207,17 @@
     if (engineNode === undefined) return;
     if (!shouldCommandText(lastNativeText, currentValue)) return;
     const selStart = rest.selection?.start ?? SELECTION_NONE;
-    const selEnd = rest.selection?.end ?? rest.selection?.start ?? SELECTION_NONE;
-    dlog(`TextInput setTextAndSelection count=${count} text=${JSON.stringify(currentValue)}`);
-    dispatchViewCommand(engineNode, 'setTextAndSelection', [count, currentValue, selStart, selEnd]);
+    const selEnd =
+      rest.selection?.end ?? rest.selection?.start ?? SELECTION_NONE;
+    dlog(
+      `TextInput setTextAndSelection count=${count} text=${JSON.stringify(currentValue)}`,
+    );
+    dispatchViewCommand(engineNode, 'setTextAndSelection', [
+      count,
+      currentValue,
+      selStart,
+      selEnd,
+    ]);
     lastNativeText = currentValue;
   });
 
@@ -217,7 +227,8 @@
   // controlled-write effect above relies on.
   $effect(() => {
     const engineNode = hostShim?.engineNode;
-    if (autoFocused || engineNode === undefined || rest.autoFocus !== true) return;
+    if (autoFocused || engineNode === undefined || rest.autoFocus !== true)
+      return;
     autoFocused = true;
     dlog('TextInput autoFocus -> focus command');
     dispatchViewCommand(engineNode, 'focus', []);
@@ -241,7 +252,12 @@
   export function clear(): void {
     const engineNode = hostShim?.engineNode;
     if (engineNode === undefined) return;
-    dispatchViewCommand(engineNode, 'setTextAndSelection', [mostRecentEventCount, '', 0, 0]);
+    dispatchViewCommand(engineNode, 'setTextAndSelection', [
+      mostRecentEventCount,
+      '',
+      0,
+      0,
+    ]);
     lastNativeText = '';
   }
 

package/build/components/touchable-highlight/index.svelte

@@ -1,9 +1,15 @@
 <script lang="ts" module>
-  // TouchableHighlight: built on Pressable. RN drives the underlay with setState (not Animated —
-  // TouchableHighlight.js), so unlike TouchableOpacity this needs no tween: `highlightPressedStyle`
-  // (@symbiote-native/components/view/render-touchable-highlight) is a pure function of the live
-  // `pressed` flag, fed through Pressable's own style-as-function-of-state prop — the same
-  // mechanism React's `pressedStyle` callback and Vue's style-as-function attr use.
+  // TouchableHighlight: built on Pressable. Ported against RN's own source
+  // (.vendors/react-native/.../Components/Touchable/TouchableHighlight.js) after the 2026-08-19
+  // audit; Solid migrated first, then React, Vue and Angular, and this is Svelte.
+  //
+  // RN drives the underlay from THREE Pressability callbacks, not from a `pressed` flag, and the
+  // difference is visible: onPress re-shows the underlay and holds it for delayPressOut, so a tap
+  // too fast to see still flashes. The previous port derived the highlight from Pressable's
+  // `pressed` through `highlightPressedStyle`, which cannot express that hold — the flag is
+  // already false by then. The machine itself
+  // (createHighlightUnderlayHandlers) is shared; Svelte owns the reactive `shown` cell and the
+  // real timers.
   import type { ITouchableHighlightProps } from './touchable-highlight-props';
 
   export type { ITouchableHighlightProps };
@@ -11,28 +17,121 @@
 
 <script lang="ts">
   import {
-    highlightPressedStyle,
-    DEFAULT_HIGHLIGHT_CHILD_OPACITY,
-    DEFAULT_UNDERLAY_COLOR,
-    type IPressState,
+    createHighlightUnderlayHandlers,
+    createHighlightUnderlayRuntime,
+    hasTouchablePressHandler,
+    resolveHighlightExtraStyles,
   } from '@symbiote-native/components';
-  import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+  import type {
+    ISymbioteEvent,
+    IStyleProp,
+    IViewStyle,
+  } from '@symbiote-native/engine';
   import Pressable from '../pressable/index.svelte';
 
+  function scheduleTimeout(callback: () => void, ms: number): () => void {
+    const id = setTimeout(callback, ms);
+    return () => clearTimeout(id);
+  }
+
+  // onPress/onPressIn/onPressOut are INTERCEPTED, not forwarded: RN drives the underlay from
+  // those three and then calls the caller's. delayPressOut is CONSUMED (it is the underlay hold),
+  // so it must not also reach the host as an unknown Fabric prop. onLongPress deliberately stays
+  // in `rest` — Pressable fires it directly — and is only READ here, for the has-handler gate.
   let {
-    activeOpacity = DEFAULT_HIGHLIGHT_CHILD_OPACITY,
-    underlayColor = DEFAULT_UNDERLAY_COLOR,
+    activeOpacity,
+    underlayColor,
     style,
+    delayPressOut = 0,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onShowUnderlay,
+    onHideUnderlay,
     children: content,
     ...rest
   }: ITouchableHighlightProps = $props();
 
-  function pressedStyle({ pressed }: IPressState): IStyleProp<IViewStyle> {
-    return highlightPressedStyle(pressed, style, underlayColor, activeOpacity);
+  // `shown` is NOT `pressed`: RN holds the underlay past the tap for delayPressOut.
+  let shown = $state(false);
+  // Setup-scope only, mutated by the machine on every event and never read reactively — same as
+  // Pressable's own runtime, never `$state`.
+  const runtime = createHighlightUnderlayRuntime();
+
+  // RN's _hasPressHandler gate: a TouchableHighlight with no press callback is decorative, and
+  // flashing an underlay under a touch passing through it is wrong.
+  const hasPressHandler = $derived(
+    hasTouchablePressHandler({
+      onPress,
+      onPressIn,
+      onPressOut,
+      onLongPress: rest.onLongPress,
+    }),
+  );
+
+  // Rebuilt whenever the config changes; the runtime persists across rebuilds so an in-flight
+  // hide timer survives one.
+  const underlay = $derived(
+    createHighlightUnderlayHandlers(
+      { delayPressOut, hasPressHandler, schedule: scheduleTimeout },
+      runtime,
+      {
+        setShown(next: boolean): void {
+          shown = next;
+        },
+        onShowUnderlay: () => onShowUnderlay?.(),
+        onHideUnderlay: () => onHideUnderlay?.(),
+      },
+    ),
+  );
+
+  const extra = $derived(
+    resolveHighlightExtraStyles({
+      shown,
+      hasPressHandler,
+      underlayColor,
+      activeOpacity,
+    }),
+  );
+
+  // ITEM 7 IS DELIBERATELY NOT FIXED HERE, and this is the whole of the divergence from RN. RN
+  // clones its single child with `extra.child`, so the lowered opacity lands on the CHILD while
+  // the container keeps an opaque underlay; React does that with cloneElement and Vue with
+  // cloneVNode. Svelte hands a component an opaque `Snippet` — a function that renders into an
+  // anchor. It cannot be introspected, cloned, or given a prop, and it may have several roots, so
+  // there is NO way to reach the child short of a permanent wrapper View. That wrapper would sit
+  // in the flex chain between this container and the children and silently re-parent any `flex`
+  // they declare; the fake Fabric runs no Yoga, so no headless test can measure the damage.
+  // Shipping an unmeasurable layout change is worse than the visual approximation, so both styles
+  // stay on the container (the child style folded in LAST), exactly as Solid and Angular decided.
+  // resolveHighlightExtraStyles keeps them separate regardless, so a future fix — which needs a
+  // real device, not a test — is unblocked.
+  const containerStyle = $derived<IStyleProp<IViewStyle>>(
+    extra === undefined ? style : [style, extra.underlay, extra.child],
+  );
+
+  // Visual first, then the caller's callback — RN's order in _createPressabilityConfig.
+  function handlePressIn(event: ISymbioteEvent): void {
+    underlay.handlePressIn(event);
+    onPressIn?.(event);
+  }
+  function handlePress(event: ISymbioteEvent): void {
+    underlay.handlePress(event);
+    onPress?.(event);
+  }
+  function handlePressOut(event: ISymbioteEvent): void {
+    underlay.handlePressOut(event);
+    onPressOut?.(event);
   }
 </script>
 
-<Pressable {...rest} style={pressedStyle}>
+<Pressable
+  {...rest}
+  style={containerStyle}
+  onPress={handlePress}
+  onPressIn={handlePressIn}
+  onPressOut={handlePressOut}
+>
   {#snippet children()}
     {@render content?.()}
   {/snippet}

package/build/components/touchable-highlight/touchable-highlight-props.d.ts

@@ -2,4 +2,6 @@ import type { ITouchableBaseProps } from '../touchable-base-props';
 export interface ITouchableHighlightProps extends ITouchableBaseProps {
     activeOpacity?: number;
     underlayColor?: string;
+    onShowUnderlay?: () => void;
+    onHideUnderlay?: () => void;
 }

package/build/components/touchable-native-feedback/touchable-native-feedback.svelte

@@ -13,7 +13,10 @@
 </script>
 
 <script lang="ts">
-  import { backgroundProps, selectableBackground } from '@symbiote-native/components';
+  import {
+    backgroundProps,
+    selectableBackground,
+  } from '@symbiote-native/components';
   import { dlog } from '@symbiote-native/engine';
   import Pressable from '../pressable/index.svelte';
 
@@ -29,7 +32,9 @@
   const resolved = $derived(background ?? selectableBackground());
 
   $effect(() => {
-    dlog(`TouchableNativeFeedback render ${resolved.type} useForeground ${useForeground}`);
+    dlog(
+      `TouchableNativeFeedback render ${resolved.type} useForeground ${useForeground}`,
+    );
   });
 
   const nativeProps = $derived(backgroundProps(resolved, useForeground));

package/build/components/touchable-opacity/index.svelte

@@ -1,22 +1,29 @@
 <script lang="ts" module>
-  // TouchableOpacity: built on Pressable, like the rest of the family. RN realizes its feedback
-  // with Animated (an opacity fade to activeOpacity on press-in, back to 1 on press-out); the
-  // press-timing constants and the deactivation-floor math are shared with every adapter
-  // (@symbiote-native/components/state/touchable). No `Animated.View` binding exists yet for
-  // this adapter — core/engine/src/animated is the framework-agnostic value-graph plumbing, but
-  // React and Vue each wrote their OWN reactive binding on top of it
-  // (adapters/react/src/modules/animated, adapters/vue/src/modules/animated); porting that
-  // binding to Svelte runes is separate, standalone work, out of scope for this Pressable/
-  // Touchable/Button pass. `tweenOpacity` below is a deliberate, documented stand-in: it
-  // reproduces Animated.timing's quad-inOut curve over the SAME shared duration constants
-  // directly onto the style bag via `$state`, using `setTimeout` (not `requestAnimationFrame`,
-  // which this adapter must never patch globally per the dom-shim skill §6c, and which a bare
-  // headless test sandbox does not provide) so TouchableOpacity still visibly fades. It is not
-  // wired into the native Animated node graph — `useNativeDriver`-style native-thread driving is
-  // NOT available here until a real Animated adapter binding lands.
+  // TouchableOpacity: built on Pressable, like the rest of the family. Ported against RN's own
+  // source (.vendors/react-native/.../Components/Touchable/TouchableOpacity.js) after the
+  // 2026-08-19 audit found ten divergences shared by every adapter; Solid migrated first, then
+  // React, Vue and Angular, and this is Svelte.
+  //
+  // Shared (framework-agnostic) half: the press-scheduling machine and the resting-opacity math
+  // (@symbiote-native/components). Svelte owns only the lifecycle — runes, the real timers, and
+  // the Animated wiring.
+  //
+  // The interim `tweenOpacity` stand-in this file used to carry is GONE. Its header claimed no
+  // Animated binding existed for this adapter; that stopped being true when
+  // modules/animated landed, and a setTimeout tween can never be native-driven — which is
+  // exactly what RN asks for here (useNativeDriver: true, TouchableOpacity.js:242).
   import type { ITouchableOpacityProps } from './touchable-opacity-props';
+  import View from '../View.svelte';
+  import { createAnimatedComponent } from '../../modules/animated/create-animated-component';
 
   export type { ITouchableOpacityProps };
+
+  // Wrapped here, not imported from modules/animated: that barrel pulls in six `.svelte`
+  // components (View/Text/Image/ScrollView/FlatList/SectionList), and this package's vitest has
+  // no `.svelte` loader — a smoke test would have to pre-compile the whole tree to reach one
+  // Animated.View. Same reasoning, different cause, as sticky-header.svelte's own local wrap.
+  // Module scope, so every TouchableOpacity instance shares one component identity.
+  const AnimatedView = createAnimatedComponent(View);
 </script>
 
 <script lang="ts">
@@ -24,37 +31,28 @@
     createTouchableFeedbackHandlers,
     createTouchableFeedbackRuntime,
     DEFAULT_ACTIVE_OPACITY,
-    DEFAULT_MIN_PRESS_DURATION_MS,
-    OPACITY_ACTIVE_DURATION_MS,
+    OPACITY_ACTIVE_GRANT_DURATION_MS,
     OPACITY_INACTIVE_DURATION_MS,
-    RESTING_OPACITY,
+    TOUCHABLE_MIN_PRESS_DURATION_MS,
+    restingOpacityFromStyle,
   } from '@symbiote-native/components';
-  import type { ISymbioteEvent } from '@symbiote-native/engine';
+  import {
+    AnimatedMock,
+    AnimatedValue,
+    Easing,
+    Platform,
+    dlog,
+    timing,
+    type ISymbioteEvent,
+  } from '@symbiote-native/engine';
   import Pressable from '../pressable/index.svelte';
 
-  const TWEEN_FRAME_MS = 16;
-
-  // See the module header above: the interim substitute for a real Animated.View driver.
-  function tweenOpacity(
-    from: number,
-    to: number,
-    durationMs: number,
-    onFrame: (value: number) => void,
-  ): () => void {
-    const start = Date.now();
-    let cancelled = false;
-    function step(): void {
-      if (cancelled) return;
-      const t = Math.min(1, (Date.now() - start) / durationMs);
-      const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
-      onFrame(from + (to - from) * eased);
-      if (t < 1) setTimeout(step, TWEEN_FRAME_MS);
-    }
-    step();
-    return () => {
-      cancelled = true;
-    };
-  }
+  // modules/animated's barrel swaps the WHOLE driver namespace for the mock when the host
+  // reports reduced motion; reaching it here would close the import the module block above
+  // avoids, so the one driver this component uses is swapped locally on the same flag.
+  const startTiming = Platform.isDisableAnimations
+    ? AnimatedMock.timing
+    : timing;
 
   function scheduleTimeout(callback: () => void, ms: number): () => void {
     const id = setTimeout(callback, ms);
@@ -70,21 +68,36 @@
     onPressOut,
     delayPressIn = 0,
     delayPressOut = 0,
-    minPressDuration = DEFAULT_MIN_PRESS_DURATION_MS,
+    // RN's Touchables override Pressability's own 130ms floor with 0 (TouchableOpacity.js:195);
+    // what holds the active visual is the fade's duration, not a press-duration floor.
+    minPressDuration = TOUCHABLE_MIN_PRESS_DURATION_MS,
     ...rest
   }: ITouchableOpacityProps = $props();
 
-  let opacity = $state(RESTING_OPACITY);
-  let cancelTween: (() => void) | undefined;
+  // RN's _getChildStyleOpacityWithDefault: the fade settles at the opacity the CALLER's style
+  // asks for, not at a hard 1.
+  const restingOpacity = $derived(restingOpacityFromStyle(style));
+
+  // One Animated.Value per mount, held by IDENTITY in a plain `const` — never `$state`, which
+  // would deep-proxy an engine object whose graph bookkeeping is keyed on the raw instance
+  // (same concern as Pressable's `$state.raw` hostShim).
+  // svelte-ignore state_referenced_locally -- the SEED is a one-shot read of the initial style;
+  // later changes are re-settled by the update effect below, not by re-seeding.
+  const opacity = new AnimatedValue(restingOpacity);
+
   // Setup-scope only, mutated by the machine — same as Pressable's own runtime, never `$state`.
   const runtime = createTouchableFeedbackRuntime();
 
   function setOpacityTo(toValue: number, duration: number): void {
-    cancelTween?.();
-    const from = opacity;
-    cancelTween = tweenOpacity(from, toValue, duration, value => {
-      opacity = value;
-    });
+    dlog(`TouchableOpacity opacity -> ${toValue} over ${duration}ms`);
+    // useNativeDriver: true is RN's own (TouchableOpacity.js:242). opacity is natively drivable,
+    // so the fade survives a busy JS thread — the whole point of press feedback.
+    startTiming(opacity, {
+      toValue,
+      duration,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: true,
+    }).start();
   }
 
   // Rebuilt whenever the timing config changes (mirrors Vue's per-render rebuild); the runtime
@@ -101,24 +114,67 @@
       runtime,
       {
         activate(event: ISymbioteEvent): void {
-          setOpacityTo(activeOpacity, OPACITY_ACTIVE_DURATION_MS);
+          // 0, not 150 (TouchableOpacity.js:215-220): the duration is chosen by where the
+          // press-in came from, and Pressability re-dispatches the GRANT event as the delay
+          // signal when delayPressIn is 0 — so an ordinary tap darkens instantly in RN. The 150ms
+          // branch is a re-activation (finger returning inside after leaving the bounds), which
+          // our engine never emits — it sends pressIn from one place, on topTouchStart.
+          setOpacityTo(activeOpacity, OPACITY_ACTIVE_GRANT_DURATION_MS);
           onPressIn?.(event);
         },
         deactivate(event: ISymbioteEvent): void {
-          setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
+          setOpacityTo(restingOpacity, OPACITY_INACTIVE_DURATION_MS);
           onPressOut?.(event);
         },
       },
     ),
   );
 
-  const foldedStyle = $derived([style, { opacity }]);
+  // Two SEPARATE deriveds, not one object: each memoizes by value, so an unrelated prop change
+  // cannot re-settle the opacity — the Svelte form of Vue's deliberate two-getter watch source.
+  const disabledInput = $derived(rest.disabled);
+
+  // 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. The first run is
+  // skipped — RN does this on UPDATE only, and firing at mount would animate over the value the
+  // Animated.Value was just seeded with.
+  let settled: { disabled: unknown; resting: number } | undefined;
+  $effect(() => {
+    const current = { disabled: disabledInput, resting: restingOpacity };
+    const previous = settled;
+    settled = current;
+    if (previous === undefined) return;
+    if (
+      previous.disabled === current.disabled &&
+      previous.resting === current.resting
+    ) {
+      return;
+    }
+    setOpacityTo(current.resting, OPACITY_INACTIVE_DURATION_MS);
+  });
+
+  // RN's componentWillUnmount: stop the animation and drop the value back, so a teardown
+  // mid-fade leaves no driver running against a node that is gone.
+  $effect(() => {
+    return () => {
+      opacity.resetAnimation();
+    };
+  });
+
+  // Depends on `style` alone. `opacity` is a stable graph node, so a press changes what the node
+  // HOLDS, never this array — the per-frame path is setValue -> AnimatedProps.update ->
+  // setNativeProps, which never re-renders this component.
+  const feedbackStyle = $derived([style, { opacity }]);
 </script>
 
-<Pressable {...rest} onPressIn={handlers.handlePressIn} onPressOut={handlers.handlePressOut}>
+<Pressable
+  {...rest}
+  onPressIn={handlers.handlePressIn}
+  onPressOut={handlers.handlePressOut}
+>
   {#snippet children()}
-    <symbiote-view p={{ style: foldedStyle, class: className }}>
+    <AnimatedView style={feedbackStyle} class={className}>
       {@render content?.()}
-    </symbiote-view>
+    </AnimatedView>
   {/snippet}
 </Pressable>