@symbiote-native/svelte 0.2.1 → 1.0.0

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,122 @@
 
 <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
+  __minPressDuration={0}
+  {...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,13 +32,15 @@
   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));
 </script>
 
-<Pressable {...rest}>
+<Pressable __minPressDuration={0} {...rest}>
   {#snippet children()}
     <symbiote-view p={nativeProps}>
       {@render content?.()}

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,68 @@
       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
+  __minPressDuration={0}
+  {...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>

package/build/components/touchable-without-feedback/index.svelte

@@ -1,18 +1,74 @@
 <script lang="ts" module>
-  // TouchableWithoutFeedback: built on Pressable, no visual feedback of its own — just the press
-  // wiring, exactly like React's and Vue's twins.
+  // TouchableWithoutFeedback: built on Pressable, no visual feedback of its own. Ported against
+  // RN's own source (.vendors/react-native/.../Components/Touchable/TouchableWithoutFeedback.js)
+  // after the 2026-08-19 audit.
+  //
+  // RN builds a FULL Pressability config here — delayPressIn / delayPressOut /
+  // minPressDuration: 0 — so "without feedback" means no VISUAL, not no TIMING. The previous port
+  // spread the delay props straight into Pressable, which both ignored them (Pressable owns no
+  // press-delay scheduling) and forwarded them to the host as unknown Fabric props. The same
+  // shared machine TouchableOpacity runs now runs here with the visual half left empty.
   import type { ITouchableWithoutFeedbackProps } from './touchable-without-feedback-props';
 
   export type { ITouchableWithoutFeedbackProps };
 </script>
 
 <script lang="ts">
+  import {
+    createTouchableFeedbackHandlers,
+    createTouchableFeedbackRuntime,
+    TOUCHABLE_MIN_PRESS_DURATION_MS,
+  } from '@symbiote-native/components';
+  import type { ISymbioteEvent } from '@symbiote-native/engine';
   import Pressable from '../pressable/index.svelte';
 
-  let { children: content, ...rest }: ITouchableWithoutFeedbackProps = $props();
+  function scheduleTimeout(callback: () => void, ms: number): () => void {
+    const id = setTimeout(callback, ms);
+    return () => clearTimeout(id);
+  }
+
+  let {
+    children: content,
+    onPressIn,
+    onPressOut,
+    delayPressIn = 0,
+    delayPressOut = 0,
+    // RN's Touchables override Pressability's own 130ms floor with 0.
+    minPressDuration = TOUCHABLE_MIN_PRESS_DURATION_MS,
+    ...rest
+  }: ITouchableWithoutFeedbackProps = $props();
+
+  // Setup-scope only, mutated by the machine — never `$state`.
+  const runtime = createTouchableFeedbackRuntime();
+
+  const handlers = $derived(
+    createTouchableFeedbackHandlers(
+      {
+        delayPressIn,
+        delayPressOut,
+        minPressDuration,
+        schedule: scheduleTimeout,
+        now: Date.now,
+      },
+      runtime,
+      {
+        activate(event: ISymbioteEvent): void {
+          onPressIn?.(event);
+        },
+        deactivate(event: ISymbioteEvent): void {
+          onPressOut?.(event);
+        },
+      },
+    ),
+  );
 </script>
 
-<Pressable {...rest}>
+<Pressable
+  __minPressDuration={0}
+  {...rest}
+  onPressIn={handlers.handlePressIn}
+  onPressOut={handlers.handlePressOut}
+>
   {#snippet children()}
     {@render content?.()}
   {/snippet}