@symbiote-native/solid 0.1.0 → 2.0.0

package/build/components/text-input.js

@@ -1,268 +0,0 @@
-// TextInput — the Solid lifecycle half. The folds/maps (value→text, the W3C/alias resolution) and
-// the controlled-write predicate live in @symbiote-native/components/state; the render (intrinsic +
-// native-prop mapping) in @symbiote-native/components/view. Both are shared verbatim with React,
-// Vue and Svelte. Solid supplies only the reactivity: a signal for the acknowledged event count,
-// setup-scope variables for the host node / the last text native holds / the focus flag, one effect
-// for the controlled write, and the imperative handle handed to `ref`.
-//
-// THE CONTROLLED HANDSHAKE IS NOT A PROP RE-PUSH, and that is the whole subtlety. Native owns its
-// own text and has already changed it by the time the change event arrives. When JS REFUSES that
-// change the `value` prop never changes — so nothing re-commits, and the only thing that can
-// correct native is an imperative setTextAndSelection carrying the ACKNOWLEDGED event count (the
-// one native last reported), which native's eventLag check accepts. Same shape as Switch's
-// snap-back; the counter arithmetic is documented in @symbiote-native/components/state/text-input.
-//
-// A FLAT MODULE, NOT A FOLDER: TextInput has no platform variant to select by filename. The
-// iOS/Android differences (keyboardType, autoComplete vs textContentType, underlineColorAndroid)
-// are resolved platform-AGNOSTICALLY by resolveTextInputProps, which emits both platforms' native
-// props and lets the inert one ride — see its header. Only genuine platform/shared groups get a
-// folder (symbiote-file-layout), so Switch has one and this does not.
-//
-// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE, so a
-// destructure would freeze the input at its mount-time config; splitProps is the idiomatic split
-// that keeps the rest reactive, and every read below sits inside an accessor, an effect or an event
-// handler. The two deliberate exceptions are marked where they happen.
-import { createEffect, createMemo, createSignal, onCleanup, splitProps, untrack, } from 'solid-js';
-import { eventCountFromChange, foldText, renderTextInput, resolveAccessibilityProps, resolveTextInputProps, shouldCommandText, textFromChange, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
-import { blurTextInput, dispatchViewCommand, dlog, setInputBlurred, setInputFocused, whenCommitted, } from '@symbiote-native/engine';
-import { descriptorToSolid } from '../descriptor-to-solid.js';
-// Read by the component itself; everything else forwards onto the host node. onValueChange/onFocus/
-// onBlur must be split off — they are pure JS, and it is our WRAPPED handlers that go on the host
-// (a raw function prop that is not a ViewConfig event crashes Android's folly::dynamic serializer).
-// The alias props (inputMode, enterKeyHint, readOnly, submitBehavior, blurOnSubmit) are inert at
-// the native layer and must be folded, never forwarded raw. Same list as React's destructure.
-const HANDLED_PROPS = [
-    'ref',
-    'value',
-    'defaultValue',
-    'multiline',
-    'selection',
-    'onValueChange',
-    'onFocus',
-    'onBlur',
-    'inputMode',
-    'enterKeyHint',
-    'readOnly',
-    'submitBehavior',
-    'blurOnSubmit',
-    'cursorColor',
-    'selectionColor',
-    'selectionHandleColor',
-    'keyboardType',
-    'returnKeyType',
-    'editable',
-    'autoComplete',
-    'textContentType',
-    'autoFocus',
-    'showSoftInputOnFocus',
-    'underlineColorAndroid',
-];
-export function TextInput(props) {
-    const [local, rest] = splitProps(props, HANDLED_PROPS);
-    // The count native last acknowledged. A signal because two readers need it live: the render (it
-    // rides down as mostRecentEventCount) and the controlled-write effect, which echoes it so
-    // native's eventLag lands on 0 and the write applies instead of being dropped as stale.
-    const [mostRecentEventCount, setMostRecentEventCount] = createSignal(INITIAL_EVENT_COUNT);
-    // The host node, held by IDENTITY in a plain variable — never a store or a deep proxy, which
-    // would be a different key than the one the engine's commit mirror holds, and every command below
-    // would silently no-op (symbiote-engine-core §3). Null only before the first build and after a
-    // multiline swap disposes the old one.
-    let host = null;
-    // The last text native holds, as far as JS knows. Deliberately NOT reactive: the controlled-write
-    // effect both reads and writes it, and a signal would make that a loop. Seeded by a one-time
-    // setup read of the mount-time value — the `text` prop already carries that value down via
-    // createNode, so the FIRST controlled value is not a divergence and must NOT re-command.
-    let lastNativeText = foldText(local.value, local.defaultValue);
-    // Mirrored from the focus/blur pair for isFocused(): native exposes no synchronous focus getter,
-    // so RN's own TextInputState keeps the same flag.
-    let focused = false;
-    // autoFocus fires once, on the first host node that commits; guarded so a later multiline swap
-    // does not steal focus back.
-    let autoFocused = false;
-    // The acknowledged count, read WITHOUT subscribing. The imperative handle can be called from
-    // anywhere, including inside a caller's effect or memo — a tracked read there would silently
-    // enroll their computation in our keystroke counter. React's handle closes over a render value
-    // and has the same non-reactive contract.
-    const acknowledgedCount = () => untrack(mostRecentEventCount);
-    const handleChange = (event) => {
-        // Event seam: the controlled handshake hinges on the change payload carrying `text`
-        // (+ `eventCount`). iOS and Android Fabric can key these differently, so log the actual shape
-        // here; a missing `text` means onValueChange never fires.
-        dlog(`TextInput change keys=[${Object.keys(event.nativeEvent).join(',')}] ` +
-            `text=${JSON.stringify(event.nativeEvent.text)} count=${JSON.stringify(event.nativeEvent.eventCount)}`);
-        const text = textFromChange(event);
-        if (text !== undefined) {
-            // Ordering matters: record the text first, then bump the acknowledged count, so the count
-            // never runs ahead of the text it stands for.
-            lastNativeText = text;
-            local.onValueChange?.(text, event);
-        }
-        const count = eventCountFromChange(event);
-        if (count !== undefined)
-            setMostRecentEventCount(count);
-    };
-    const handleFocus = (event) => {
-        focused = true;
-        // Track focus app-wide so Keyboard.dismiss can blur this input without a ref.
-        if (host !== null)
-            setInputFocused(host);
-        local.onFocus?.(event);
-    };
-    const handleBlur = (event) => {
-        focused = false;
-        if (host !== null)
-            setInputBlurred(host);
-        local.onBlur?.(event);
-    };
-    // One host node for one intrinsic. `multiline` arrives as an ARGUMENT, not as a prop read, so the
-    // descriptor's type is constant for this node's whole lifetime — descriptorToSolid builds the
-    // element once and only diffs prop VALUES afterwards, and a type that changed under it would
-    // throw rather than paint.
-    const buildHost = (multiline) => {
-        const node = descriptorToSolid(() => renderTextInput({
-            multiline,
-            text: foldText(local.value, local.defaultValue),
-            mostRecentEventCount: mostRecentEventCount(),
-            selection: local.selection,
-            folded: resolveTextInputProps({
-                inputMode: local.inputMode,
-                keyboardType: local.keyboardType,
-                enterKeyHint: local.enterKeyHint,
-                returnKeyType: local.returnKeyType,
-                readOnly: local.readOnly,
-                editable: local.editable,
-                submitBehavior: local.submitBehavior,
-                blurOnSubmit: local.blurOnSubmit,
-                multiline,
-                cursorColor: local.cursorColor,
-                selectionColor: local.selectionColor,
-                selectionHandleColor: local.selectionHandleColor,
-                autoComplete: local.autoComplete,
-                textContentType: local.textContentType,
-                showSoftInputOnFocus: local.showSoftInputOnFocus,
-                underlineColorAndroid: local.underlineColorAndroid,
-            }),
-            // TextInput owns its host element rather than rendering through a symbiote View, so it
-            // folds aria/role into the canonical accessibility* props here. The vanished-key widening
-            // that fold needs is descriptorToSolid's job (utils/stable-keys), applied to the whole
-            // Descriptor prop bag — nothing to repeat here.
-            passthrough: {
-                ...resolveAccessibilityProps(rest),
-                onChange: handleChange,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-            },
-        }));
-        host = node;
-        // Dropped together with the computations this build owns, so a command can never aim at a node
-        // that was swapped out and is no longer mounted.
-        onCleanup(() => {
-            if (host === node)
-                host = null;
-        });
-        // autoFocus is driven in JS, not as a native prop (RN does the same via TextInputState.focusInput,
-        // TextInput.js:538). The engine commits on a microtask here (renderer.ts's requestCommit), so at
-        // this point the node has no Fabric tag and a bare dispatchViewCommand would silently no-op —
-        // whenCommitted defers it to the commit that assigns the tag. Cancelled on cleanup so an
-        // un-committed pending focus cannot outlive the node.
-        if (local.autoFocus === true && !autoFocused) {
-            autoFocused = true;
-            dlog('TextInput autoFocus -> focus command');
-            const cancel = whenCommitted(node, () => {
-                dispatchViewCommand(node, 'focus', []);
-            });
-            onCleanup(cancel);
-        }
-        return node;
-    };
-    // Controlled write: when JS-side `value` diverges from what native reported, command the new text
-    // down with the acknowledged count. A plain prop re-push would race the user's keystrokes.
-    //
-    // READING THE COUNT IS LOAD-BEARING, not bookkeeping — it is what makes a REFUSED change snap
-    // back. On a refusal `value` never changes, so a value-only dependency (Vue's watch shape) would
-    // never re-run and native would keep the text JS rejected. The count bumps on every native
-    // change, which is React's `useLayoutEffect` with no deps expressed in Solid's terms.
-    createEffect(() => {
-        const value = local.value;
-        const count = mostRecentEventCount();
-        const selection = local.selection;
-        if (host === null)
-            return;
-        if (!shouldCommandText(lastNativeText, value))
-            return;
-        const selStart = selection?.start ?? SELECTION_NONE;
-        const selEnd = selection?.end ?? selection?.start ?? SELECTION_NONE;
-        dlog(`TextInput setTextAndSelection count=${count} text=${JSON.stringify(value)}`);
-        dispatchViewCommand(host, 'setTextAndSelection', [
-            count,
-            value,
-            selStart,
-            selEnd,
-        ]);
-        lastNativeText = value;
-    });
-    // The imperative API RN exposes on a TextInput ref. focus/blur drive native view commands; clear
-    // and setSelection reuse setTextAndSelection (the same stale-safe path as a controlled write),
-    // echoing the acknowledged count so native applies them. Every method reads `host` LIVE, so a
-    // multiline swap cannot leave the handle pointing at a dead node.
-    const handle = {
-        focus: () => {
-            if (host !== null)
-                dispatchViewCommand(host, 'focus', []);
-        },
-        blur: () => {
-            // Routes through TextInputState so the app-wide focus tracking clears too.
-            blurTextInput(host);
-        },
-        clear: () => {
-            if (host === null)
-                return;
-            dispatchViewCommand(host, 'setTextAndSelection', [
-                acknowledgedCount(),
-                '',
-                0,
-                0,
-            ]);
-            lastNativeText = '';
-        },
-        isFocused: () => focused,
-        setSelection: (start, end) => {
-            if (host === null)
-                return;
-            const current = lastNativeText ?? '';
-            dispatchViewCommand(host, 'setTextAndSelection', [
-                acknowledgedCount(),
-                current,
-                start,
-                end,
-            ]);
-        },
-    };
-    // Single- and multiline are DIFFERENT native views (RCTSinglelineTextInputView vs
-    // RCTMultilineTextInputView), so a runtime flip has to build a new host node rather than re-prop
-    // the old one — React remounts, Vue h()s a new type, Svelte swaps an {#if} branch. The memo is
-    // that swap: `insert` replaces the previous node with the new one and disposes the old build.
-    //
-    // The untrack is load-bearing. Building reads descriptorToSolid's own memo, so without it THIS
-    // memo would subscribe to every prop the render fn touches and rebuild the entire input — new
-    // native view, lost cursor and keyboard — on every keystroke. (Solid's own `createComponent`
-    // untracks for exactly this reason; there is no component here to inherit it from.)
-    const hostTree = createMemo(() => {
-        const multiline = local.multiline === true;
-        return untrack(() => buildHost(multiline));
-    });
-    // Solid's `ref` is a compile-time construct: on a component the compiler has already rewritten
-    // `ref={handle}` into a callback prop by the time we read it, so calling what we were handed is
-    // the whole job (utils/host-ref.ts explains the rewrite). Not applyHostRef, which is typed for a
-    // host node — this ref receives the handle, matching React's forwardRef contract.
-    //
-    // Called AFTER `hostTree` has built at least once, not right after `handle` is constructed -
-    // same reasoning as ScrollView's ref-ordering fix (scroll-view/shared.tsx). `handle`'s methods
-    // read `host` LIVE on every call, so calling ref early never caused a visible bug here (unlike
-    // ScrollView, whose handle a consumer - createAnimatedComponent's resolveHostNode - unwrapped
-    // eagerly, once, at ref-call time). Reordered anyway: a future Animated.TextInput would hit the
-    // same permanently-null capture, and matching the safe ordering now costs nothing.
-    if (typeof local.ref === 'function')
-        local.ref(handle);
-    return hostTree;
-}

package/build/components/text.jsx

@@ -1,27 +0,0 @@
-// Text — the Solid host primitive for RN's <Text>. Same children/ref idiom as ./view.tsx; read
-// that file's header first, it carries the reasoning both share.
-//
-// THE NESTING (`RCTText` vs `RCTVirtualText`) IS NOT THIS FILE'S JOB, and that is worth stating
-// because it is the one place React's own renderer needs a context. React Native tracks a
-// TextAncestor context so a <Text> inside another <Text> renders as a virtual span instead of a
-// paragraph host. Here the retained tree already knows: the engine's commit walk carries a
-// `hasTextAncestor` flag down and picks the view name itself
-// (`viewNameFor` in core/engine/src/commit.ts — `node.isText && hasTextAncestor` -> RCTVirtualText),
-// and it re-creates the node from scratch when that kind flips. So there is no Solid context, no
-// provider, and nothing for an adapter to thread; every adapter emits the same flat
-// `symbiote-text` and the engine resolves the position-dependent name for all of them. The
-// Solid equivalent of TextAncestorContext is deliberately ABSENT, not missing.
-import { splitProps } from 'solid-js';
-import { resolveAccessibilityProps, resolveTextProps, } from '@symbiote-native/components';
-import { applyHostRef } from '../utils/host-ref.js';
-import { withStableKeys } from '../utils/stable-keys.js';
-export function Text(props) {
-    const [local, rest] = splitProps(props, ['children', 'ref']);
-    const bag = withStableKeys(() => resolveTextProps({ ...resolveAccessibilityProps(rest) }));
-    const attachRef = (node) => {
-        applyHostRef(local.ref, node);
-    };
-    return (<symbiote-text ref={attachRef} {...bag()}>
-      {local.children}
-    </symbiote-text>);
-}

package/build/components/touchable/index.d.ts

@@ -1,22 +0,0 @@
-import type { JSX } from '../../jsx-runtime';
-import { type IPressTimingProps } from '@symbiote-native/components';
-import { type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
-import { type IPressableProps } from '../pressable';
-type ITouchableBaseProps = Omit<IPressableProps, 'style' | 'children'> & IPressTimingProps & {
-    style?: IStyleProp<IViewStyle>;
-    children?: JSX.Element;
-};
-export interface ITouchableOpacityProps extends ITouchableBaseProps {
-    activeOpacity?: number;
-}
-export declare function TouchableOpacity(props: ITouchableOpacityProps): JSX.Element;
-export interface ITouchableHighlightProps extends ITouchableBaseProps {
-    activeOpacity?: number;
-    underlayColor?: string;
-    onShowUnderlay?: () => void;
-    onHideUnderlay?: () => void;
-}
-export declare function TouchableHighlight(props: ITouchableHighlightProps): JSX.Element;
-export type ITouchableWithoutFeedbackProps = ITouchableBaseProps;
-export declare function TouchableWithoutFeedback(props: ITouchableWithoutFeedbackProps): JSX.Element;
-export {};

package/build/components/touchable/index.jsx

@@ -1,247 +0,0 @@
-// The Touchable* family for Solid, all built on Pressable. Ported against RN's own sources
-// (.vendors/react-native/.../Components/Touchable/*.js), NOT against this repo's React adapter —
-// an audit on 2026-08-19 found the React/Vue/Svelte/Angular ports diverge from RN in ten places.
-// This adapter is the first on the RN-accurate shared API; the other four migrate in phase two,
-// which is why @symbiote-native/components carries both forms for now.
-//
-// Shared (framework-agnostic) half: the press-scheduling machine, the underlay machine, the resting
-// opacity math, the press-handler gate, the extra-style split. Solid owns only the lifecycle —
-// signals, memos, the real timers, and the Animated wiring.
-//
-// NOTHING here destructures `props`. A Solid component body runs ONCE and props are getters, so a
-// destructure would freeze the component at its mount-time config; every read below sits inside an
-// accessor, a memo or an event handler.
-//
-// No conditional picks a branch in any of the three trees. Solid's `insert` REPLACES a subtree
-// rather than diffing it, and a rebuild landing mid-gesture costs the native responder grant
-// (.claude/rules/solid-descriptor-bridge.md §4). Every per-press value here is a prop-bag value,
-// and a prop bag reaches the host through `spread` — a per-key diff on the SAME element.
-import { createEffect, createMemo, createSignal, onCleanup, splitProps, untrack, } from 'solid-js';
-import { createHighlightUnderlayHandlers, createHighlightUnderlayRuntime, createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, hasTouchablePressHandler, resolveHighlightExtraStyles, restingOpacityFromStyle, DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_GRANT_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, TOUCHABLE_MIN_PRESS_DURATION_MS, } from '@symbiote-native/components';
-import { dlog, } from '@symbiote-native/engine';
-import { Animated } from '../../modules/animated/index.js';
-import { Pressable } from '../pressable.jsx';
-// The real timers both shared machines schedule on — core/components carries no timer globals, so
-// scheduling is the adapter's half. Every canceller is retained so unmount cancels what is still in
-// flight: a Solid body runs once, so there is no re-render that would otherwise drop a stale timer,
-// and a fired timer would call back into a disposed scope.
-function createTimeoutScheduler() {
-    const pending = new Set();
-    onCleanup(() => {
-        for (const cancel of [...pending])
-            cancel();
-        pending.clear();
-    });
-    return (callback, ms) => {
-        const id = setTimeout(() => {
-            pending.delete(cancel);
-            callback();
-        }, ms);
-        const cancel = () => {
-            clearTimeout(id);
-            pending.delete(cancel);
-        };
-        pending.add(cancel);
-        return cancel;
-    };
-}
-// `class` is split off with `style`: both describe the FEEDBACK node (the inner Animated.View),
-// not the outer Pressable that owns the responder. Left in `rest` they would land on the wrong one.
-const TOUCHABLE_OPACITY_HANDLED = [
-    'activeOpacity',
-    'style',
-    'class',
-    'children',
-    'onPressIn',
-    'onPressOut',
-    'delayPressIn',
-    'delayPressOut',
-    'minPressDuration',
-];
-export function TouchableOpacity(props) {
-    const [local, rest] = splitProps(props, TOUCHABLE_OPACITY_HANDLED);
-    // RN's _getChildStyleOpacityWithDefault: the fade settles at the opacity the CALLER's style asks
-    // for, not at a hard 1.
-    const restingOpacity = createMemo(() => restingOpacityFromStyle(local.style));
-    // One Animated.Value per mount, held by IDENTITY in a plain variable — a signal or store would
-    // wrap this engine object in a proxy, and the graph's bookkeeping is keyed on the raw instance
-    // (symbiote-engine-core §3). untrack because the body must not subscribe to the initial read.
-    const opacity = new Animated.Value(untrack(restingOpacity));
-    // The shared press-scheduling cell (delayPressIn canceller + activation clock). A setup-scope
-    // object, never reactive: the machine mutates it on every event and nothing reads it reactively.
-    const runtime = createTouchableFeedbackRuntime();
-    const schedule = createTimeoutScheduler();
-    function setOpacityTo(toValue, duration) {
-        dlog(`TouchableOpacity opacity -> ${toValue} over ${duration}ms`);
-        // useNativeDriver: true is RN's own (TouchableOpacity.js:242). opacity is natively drivable and
-        // the fade then survives a busy JS thread, which is the whole point of the feedback.
-        Animated.timing(opacity, {
-            toValue,
-            duration,
-            easing: Animated.Easing.inOut(Animated.Easing.quad),
-            useNativeDriver: true,
-        }).start();
-    }
-    // Rebuilt only when the TIMING config changes — the callbacks read activeOpacity / onPressIn /
-    // onPressOut when they fire, so a re-supplied callback is honored without churning the handler
-    // identities the host node holds. The runtime persists across rebuilds, so an in-flight
-    // delayPressIn timer survives one.
-    const handlers = createMemo(() => createTouchableFeedbackHandlers({
-        delayPressIn: local.delayPressIn ?? 0,
-        delayPressOut: local.delayPressOut ?? 0,
-        // RN's Touchables override Pressability's 130ms floor with 0; the active visual is held by
-        // the fade's own duration instead.
-        minPressDuration: local.minPressDuration ?? TOUCHABLE_MIN_PRESS_DURATION_MS,
-        schedule,
-        now: Date.now,
-    }, runtime, {
-        activate(event) {
-            setOpacityTo(local.activeOpacity ?? DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_GRANT_DURATION_MS);
-            local.onPressIn?.(event);
-        },
-        deactivate(event) {
-            setOpacityTo(restingOpacity(), OPACITY_INACTIVE_DURATION_MS);
-            local.onPressOut?.(event);
-        },
-    }));
-    // 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. Skipped on the
-    // first run — RN does this on UPDATE only, and firing at mount would animate over the initial
-    // value the Animated.Value already holds.
-    createEffect(previous => {
-        const current = { disabled: rest.disabled, resting: restingOpacity() };
-        if (previous !== undefined &&
-            (previous.disabled !== current.disabled ||
-                previous.resting !== current.resting)) {
-            setOpacityTo(current.resting, OPACITY_INACTIVE_DURATION_MS);
-        }
-        return current;
-    }, undefined);
-    // 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.
-    onCleanup(() => {
-        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 value.setValue -> AnimatedProps.update ->
-    // setNativeProps, which never re-enters this component.
-    const feedbackStyle = createMemo(() => [local.style, { opacity }]);
-    // A spread followed by explicit props is safe here only because neither override can be
-    // `undefined` — mergeProps takes the first NON-undefined value scanning back-to-front, so an
-    // optional override after a spread would silently lose (.claude/rules/solid-descriptor-bridge.md
-    // §6). handlers() always returns both functions.
-    return (<Pressable {...rest} onPressIn={handlers().handlePressIn} onPressOut={handlers().handlePressOut}>
-      <Animated.View style={feedbackStyle()} class={local.class}>
-        {local.children}
-      </Animated.View>
-    </Pressable>);
-}
-// onPress/onPressIn/onPressOut are INTERCEPTED, not forwarded: RN drives the underlay from those
-// three callbacks and then calls the caller's. onLongPress stays in `rest` (Pressable fires it
-// directly) and is only READ here, for the has-press-handler gate.
-const TOUCHABLE_HIGHLIGHT_HANDLED = [
-    'activeOpacity',
-    'underlayColor',
-    'style',
-    'children',
-    'onPress',
-    'onPressIn',
-    'onPressOut',
-    'onShowUnderlay',
-    'onHideUnderlay',
-    'delayPressOut',
-];
-export function TouchableHighlight(props) {
-    const [local, rest] = splitProps(props, TOUCHABLE_HIGHLIGHT_HANDLED);
-    // `shown` is NOT `pressed`: RN holds the underlay for delayPressOut past the tap so a fast press
-    // still flashes, and the pressed flag is already false by then.
-    const [shown, setShown] = createSignal(false);
-    const runtime = createHighlightUnderlayRuntime();
-    const schedule = createTimeoutScheduler();
-    const hasPressHandler = createMemo(() => hasTouchablePressHandler({
-        onPress: local.onPress,
-        onPressIn: local.onPressIn,
-        onPressOut: local.onPressOut,
-        onLongPress: rest.onLongPress,
-    }));
-    const underlay = createMemo(() => createHighlightUnderlayHandlers({
-        delayPressOut: local.delayPressOut ?? 0,
-        hasPressHandler: hasPressHandler(),
-        schedule,
-    }, runtime, {
-        setShown,
-        onShowUnderlay: () => local.onShowUnderlay?.(),
-        onHideUnderlay: () => local.onHideUnderlay?.(),
-    }));
-    const extraStyles = createMemo(() => resolveHighlightExtraStyles({
-        shown: shown(),
-        hasPressHandler: hasPressHandler(),
-        underlayColor: local.underlayColor,
-        activeOpacity: local.activeOpacity,
-    }));
-    // POINT 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. Solid has no cloneElement, so the only way to reach the
-    // child is a permanent wrapper view — which inserts a node into the flex chain between this
-    // container and the children, silently re-parenting any `flex` a child declares. The fake Fabric
-    // runs no Yoga, so no headless test can measure that damage, only assert the extra node exists.
-    // Shipping an unmeasurable layout change is worse than the visual approximation, so both styles
-    // stay on the container (the pre-audit behavior) and the child style is folded in last.
-    // resolveHighlightExtraStyles keeps them SEPARATE regardless, so React's cloneElement path and a
-    // future Solid fix are both unblocked. A layout-safe fix needs a real device check, not a test.
-    const containerStyle = createMemo(() => {
-        const extra = extraStyles();
-        if (extra === undefined)
-            return local.style;
-        return [local.style, extra.underlay, extra.child];
-    });
-    // Visual first, then the caller's callback — RN's order in _createPressabilityConfig.
-    const handlePressIn = (event) => {
-        underlay().handlePressIn(event);
-        local.onPressIn?.(event);
-    };
-    const handlePress = (event) => {
-        underlay().handlePress(event);
-        local.onPress?.(event);
-    };
-    const handlePressOut = (event) => {
-        underlay().handlePressOut(event);
-        local.onPressOut?.(event);
-    };
-    return (<Pressable {...rest} style={containerStyle()} onPress={handlePress} onPressIn={handlePressIn} onPressOut={handlePressOut}>
-      {local.children}
-    </Pressable>);
-}
-const TOUCHABLE_WITHOUT_FEEDBACK_HANDLED = [
-    'children',
-    'onPressIn',
-    'onPressOut',
-    'delayPressIn',
-    'delayPressOut',
-    'minPressDuration',
-];
-export function TouchableWithoutFeedback(props) {
-    const [local, rest] = splitProps(props, TOUCHABLE_WITHOUT_FEEDBACK_HANDLED);
-    // RN's TouchableWithoutFeedback builds a FULL Pressability config with delayPressIn /
-    // delayPressOut / minPressDuration: 0 — "without feedback" means no VISUAL, not no timing. The
-    // same shared machine TouchableOpacity uses runs here with the visual half left empty.
-    const runtime = createTouchableFeedbackRuntime();
-    const schedule = createTimeoutScheduler();
-    const handlers = createMemo(() => createTouchableFeedbackHandlers({
-        delayPressIn: local.delayPressIn ?? 0,
-        delayPressOut: local.delayPressOut ?? 0,
-        minPressDuration: local.minPressDuration ?? TOUCHABLE_MIN_PRESS_DURATION_MS,
-        schedule,
-        now: Date.now,
-    }, runtime, {
-        activate(event) {
-            local.onPressIn?.(event);
-        },
-        deactivate(event) {
-            local.onPressOut?.(event);
-        },
-    }));
-    return (<Pressable {...rest} onPressIn={handlers().handlePressIn} onPressOut={handlers().handlePressOut}>
-      {local.children}
-    </Pressable>);
-}

package/build/components/touchable-native-feedback/index.d.ts

@@ -1,16 +0,0 @@
-import type { JSX } from '../../jsx-runtime';
-import { canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, type INativeFeedbackBackground } from '@symbiote-native/components';
-import { type IPressableProps } from '../pressable';
-export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from '@symbiote-native/components';
-export interface ITouchableNativeFeedbackProps extends Omit<IPressableProps, 'style' | 'children'> {
-    background?: INativeFeedbackBackground;
-    useForeground?: boolean;
-    children?: JSX.Element;
-}
-declare function TouchableNativeFeedbackImpl(props: ITouchableNativeFeedbackProps): JSX.Element;
-export declare const TouchableNativeFeedback: typeof TouchableNativeFeedbackImpl & {
-    SelectableBackground: typeof selectableBackground;
-    SelectableBackgroundBorderless: typeof selectableBackgroundBorderless;
-    Ripple: typeof rippleBackground;
-    canUseNativeForeground: typeof canUseNativeForeground;
-};

package/build/components/touchable-native-feedback/index.jsx

@@ -1,68 +0,0 @@
-// TouchableNativeFeedback — Android's ripple / state-drawable touchable, built on Pressable like
-// the rest of the family. RN clones its child into an RCTView carrying the native ripple props;
-// we nest the child under a feedback view that carries them, inside a Pressable that owns the
-// press wiring. `nativeBackgroundAndroid` / `nativeForegroundAndroid` are read by Android's
-// ReactViewManager; on iOS they are inert props, so the component still renders its child with
-// working press wiring — exactly what React's and Vue's do.
-//
-// EVERYTHING NON-LIFECYCLE IS SHARED. The static factories (selectableBackground,
-// selectableBackgroundBorderless, rippleBackground), the platform gate (canUseNativeForeground)
-// and the background→native-prop mapping (backgroundProps) all live in
-// @symbiote-native/components; this file only attaches them to the component value and nests the
-// feedback view. Press timing is Pressable's, which is the shared state machine.
-//
-// The feedback carrier is a raw `symbiote-view`, not the `View` component — the same choice
-// Pressable already makes for its android_ripple wrapper. It carries native props and nothing
-// else: no accessibility surface, no class, no ref, so View's aria fold and nativeID resolution
-// would be pure overhead. The committed node is `RCTView` either way.
-//
-// NOTHING here destructures `props`. A Solid component body runs ONCE, so a destructure would
-// freeze the background at its mount-time value; every read below sits inside an accessor.
-import { splitProps } from 'solid-js';
-import { backgroundProps, canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, } from '@symbiote-native/components';
-import { dlog } from '@symbiote-native/engine';
-import { withStableKeys } from '../../utils/stable-keys.js';
-import { Pressable } from '../pressable.jsx';
-function TouchableNativeFeedbackImpl(props) {
-    const [local, rest] = splitProps(props, [
-        'background',
-        'useForeground',
-        'children',
-    ]);
-    // ONE bag, and it goes through withStableKeys. backgroundProps returns a DIFFERENT single key
-    // per branch (nativeForegroundAndroid vs nativeBackgroundAndroid), and Solid's `spread` walks
-    // only the current key set with no removal pass — so flipping `useForeground` on an Android
-    // host would leave the abandoned key painting its old drawable forever. Widening restores what
-    // React and Vue get from their reconcilers: the vanished key arrives as `undefined`, which
-    // routeProp treats as a delete, and `spread` still does the actual diffing
-    // (.claude/rules/solid-descriptor-bridge.md §1).
-    const feedbackProps = withStableKeys(() => {
-        // RN never leaves a TouchableNativeFeedback without feedback: a missing background defaults
-        // to SelectableBackground().
-        const resolved = local.background ?? selectableBackground();
-        const useForeground = local.useForeground === true;
-        dlog(`TouchableNativeFeedback render ${resolved.type} useForeground ${useForeground}`);
-        // The no-op seam: RN silently routes a requested foreground back to the background slot off
-        // Android / below API 23, and a missing ripple on device looks like a broken component.
-        if (useForeground && !canUseNativeForeground()) {
-            dlog('TouchableNativeFeedback useForeground ignored: no native foreground here');
-        }
-        return backgroundProps(resolved, useForeground);
-    });
-    // Two single spreads, never spread-then-override: `mergeProps` (which the compiler uses for a
-    // spread followed by an explicit prop) keeps the FIRST non-undefined value, so an explicit
-    // `undefined` after a spread silently loses — the opposite of React's JSX spread
-    // (.claude/rules/solid-descriptor-bridge.md §6). `rest` and `feedbackProps()` are each the sole
-    // source for their element, so there is nothing to merge.
-    return (<Pressable {...rest}>
-      <symbiote-view {...feedbackProps()}>{local.children}</symbiote-view>
-    </Pressable>);
-}
-// The statics ride on the component value so callers reach TouchableNativeFeedback.Ripple(…)
-// exactly like RN. They are the shared functions themselves, not wrappers.
-export const TouchableNativeFeedback = Object.assign(TouchableNativeFeedbackImpl, {
-    SelectableBackground: selectableBackground,
-    SelectableBackgroundBorderless: selectableBackgroundBorderless,
-    Ripple: rippleBackground,
-    canUseNativeForeground,
-});