@symbiote-native/react 0.4.0 → 2.0.0

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

@@ -1,227 +0,0 @@
-// Sticky headers: the JS layer RN implements in ScrollView.js / ScrollViewStickyHeader.js.
-//
-// RN does stickiness purely in JS: ScrollView.js (~line 1690) wraps each flagged child in a
-// ScrollViewStickyHeader, fed by a single `_scrollAnimatedValue` that Animated.event drives
-// from `onScroll` (~line 1095). The native Fabric scroll view does not honor the index array,
-// so forwarding `stickyHeaderIndices` to native would be a silent no-op - we replicate the JS
-// layer instead. The interpolation mirrors ScrollViewStickyHeader.js and now lives,
-// framework-agnostic, in @symbiote-native/components (computeStickyInterpolation); this file
-// holds only the React component shell, layout state, and child-wrapping.
-import { Children, createElement, isValidElement, useCallback, useEffect, useImperativeHandle, useReducer, useRef, useState, } from 'react';
-import { AnimatedInterpolation, AnimatedValue, Platform, dlog, } from '@symbiote-native/engine';
-import { createInitialStickyState, nextStickyHeaderY, readLayoutNumber, reduceSticky, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
-import { Animated } from '../../modules/animated/index.js';
-function readChildOnLayout(child) {
-    const childProps = child.props;
-    if (typeof childProps !== 'object' || childProps === null)
-        return undefined;
-    const handler = Reflect.get(childProps, 'onLayout');
-    return typeof handler === 'function' ? handler : undefined;
-}
-function firstChild(children) {
-    const first = Children.toArray(children)[0];
-    return isValidElement(first) ? first : undefined;
-}
-// One sticky header. Measures its own y/height via onLayout, interpolates the shared scroll
-// offset into a translateY that keeps it pinned to the top (or bottom, inverted) until the next
-// header collides with it, and drives that translate through the native driver when available so
-// the pin tracks scroll on the UI thread (no JS jitter). The DECISIONS — the zero-swallow gate, the
-// debounce delay, the rebuild-on-input-change ranges — live in `reduceSticky`
-// (@symbiote-native/components); this component supplies only the React lifecycle: the ONE folded
-// state cell, the interpolation-node + listener wiring, the debounce setTimeout, and the re-render.
-export const ScrollViewStickyHeader = props => {
-    const { inverted, scrollViewHeight, scrollAnimatedValue, nextHeaderLayoutY, children, ref, } = props;
-    // The next header's y lives HERE, not in a prop the parent re-renders to update (RN keeps it in
-    // the child too, ScrollViewStickyHeader.js:65). The prop only seeds the first render; afterwards
-    // the ScrollView pushes updates through setNextHeaderY. That keeps the cost linear - a
-    // parent-state round trip re-renders every child on every header's layout, so N headers cost N
-    // re-renders of N children. At N=200 it churned enough native animated nodes to trip Fabric's view
-    // registry ("Attempt to dequeue already registered component") seconds after mount.
-    const [nextHeaderY, setNextHeaderY] = useState(nextHeaderLayoutY);
-    useImperativeHandle(ref, () => ({ setNextHeaderY }), []);
-    // The imperative push is a fast path, not the source of truth. When the parent DOES re-render
-    // with a different value the prop wins, because the successor may be gone: a VirtualizedList
-    // unmounts headers as they scroll out, and a value pushed in earlier would otherwise stick
-    // around as a collision point that no longer exists.
-    const lastNextHeaderProp = useRef(nextHeaderLayoutY);
-    if (lastNextHeaderProp.current !== nextHeaderLayoutY) {
-        lastNextHeaderProp.current = nextHeaderLayoutY;
-        setNextHeaderY(nextHeaderLayoutY);
-    }
-    // The one folded state cell (RN's scattered useState/useRef collapsed into IStickyHeaderState),
-    // mutated in place by reduceSticky. Lazily created once.
-    const stateRef = useRef(null);
-    const state = (stateRef.current ??= createInitialStickyState());
-    const [, forceRender] = useReducer((tick) => tick + 1, 0);
-    // The animated node that drives the transform (RN's animatedTranslateY), rebuilt by the
-    // rebuild-interpolation effect. When the scroll value is native, this interpolation runs on the
-    // UI thread: the smooth pin.
-    const [animatedTranslateY, setAnimatedTranslateY] = useState(() => scrollAnimatedValue.interpolate({
-        inputRange: [-1, 0],
-        outputRange: [0, 0],
-    }));
-    const debounceTimer = useRef(null);
-    // The current interpolation node + its settled-value listener id, held so the next rebuild can
-    // detach the old listener (engine calls the reducer does NOT own) and unmount can clean up.
-    const interpolationRef = useRef(null);
-    const listenerIdRef = useRef(null);
-    const inputsRef = useRef({
-        os: Platform.OS,
-        inverted,
-        scrollViewHeight,
-        nextHeaderLayoutY: nextHeaderY,
-    });
-    inputsRef.current = {
-        os: Platform.OS,
-        inverted,
-        scrollViewHeight,
-        nextHeaderLayoutY: nextHeaderY,
-    };
-    // dispatch reaches through a ref because the effect executors dispatch follow-up actions
-    // (the listener -> animated-tick, the debounce timer -> debounce-fired).
-    const dispatchRef = useRef(() => { });
-    const runEffects = useCallback((effects) => {
-        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).
-                    const previous = interpolationRef.current;
-                    if (previous !== null && listenerIdRef.current !== null) {
-                        previous.removeListener(listenerIdRef.current);
-                        listenerIdRef.current = null;
-                    }
-                    const next = scrollAnimatedValue.interpolate({
-                        inputRange: effect.inputRange,
-                        outputRange: effect.outputRange,
-                    });
-                    listenerIdRef.current = next.addListener(({ value }) => {
-                        if (typeof value === 'number')
-                            dispatchRef.current({ kind: 'animated-tick', value });
-                    });
-                    interpolationRef.current = next;
-                    setAnimatedTranslateY(next);
-                    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 (debounceTimer.current !== null)
-                        clearTimeout(debounceTimer.current);
-                    debounceTimer.current = setTimeout(() => {
-                        debounceTimer.current = null;
-                        dispatchRef.current({
-                            kind: 'debounce-fired',
-                            value: effect.value,
-                        });
-                    }, effect.delay);
-                    break;
-                }
-                case 'apply-passthrough':
-                    forceRender();
-                    break;
-                case 'record-header-y':
-                    // React records through the wrapper's onLayout closure (props.onLayout, below), which
-                    // honors the public IStickyHeaderProps contract; the reducer emits no index for it.
-                    break;
-            }
-        }
-    }, [scrollAnimatedValue]);
-    const dispatch = useCallback((action) => {
-        const current = stateRef.current;
-        if (current === null)
-            return;
-        runEffects(reduceSticky(current, action, inputsRef.current).effects);
-    }, [runEffects]);
-    dispatchRef.current = dispatch;
-    // Rebuild when the collision/viewport inputs change (RN effect deps minus the layout state, which
-    // dispatches 'layout' itself); also does the initial identity build on mount.
-    useEffect(() => {
-        dispatchRef.current({ kind: 'inputs-changed' });
-    }, [inverted, scrollViewHeight, nextHeaderY, scrollAnimatedValue]);
-    // Detach the listener + clear the debounce on unmount.
-    useEffect(() => () => {
-        const previous = interpolationRef.current;
-        if (previous !== null && listenerIdRef.current !== null)
-            previous.removeListener(listenerIdRef.current);
-        if (debounceTimer.current !== null)
-            clearTimeout(debounceTimer.current);
-    }, []);
-    const onLayout = (event) => {
-        const y = readLayoutNumber(event, 'y');
-        const height = readLayoutNumber(event, 'height');
-        // Keep the previous value when a field is absent (RN sets state only on a defined read).
-        dispatch({
-            kind: 'layout',
-            y: y ?? state.layoutY,
-            height: height ?? state.layoutHeight,
-        });
-        props.onLayout(event);
-        const child = firstChild(children);
-        const childOnLayout = child === undefined ? undefined : readChildOnLayout(child);
-        childOnLayout?.(event);
-    };
-    // The EXPLICIT debounced translateY overrides the committed transform for hit-testing, while
-    // `animatedTranslateY` does the smooth (native-driven) pin, per RN ScrollViewStickyHeader.js.
-    const passthroughAnimatedPropExplicitValues = state.translateY !== null
-        ? { style: { transform: [{ translateY: state.translateY }] } }
-        : null;
-    // collapsable:false keeps the wrapper a real Yoga node; zIndex makes the pinned header paint
-    // OVER the rows scrolling under it. `style` is `unknown` on Animated.View, so the interpolation
-    // transform passes with no cast.
-    return createElement(Animated.View, {
-        style: {
-            transform: [{ translateY: animatedTranslateY }],
-            zIndex: STICKY_HEADER_Z_INDEX,
-        },
-        onLayout,
-        collapsable: false,
-        passthroughAnimatedPropExplicitValues,
-    }, children);
-};
-ScrollViewStickyHeader.displayName = 'ScrollViewStickyHeader';
-// Wrap each child flagged by `stickyHeaderIndices` in the sticky header component, fed by the
-// shared scroll AnimatedValue. Mirrors ScrollView.js's render-time children.map (~line 1690).
-// Returns the children unchanged when no indices are flagged.
-//
-// Cross-talk plumbing (RN's _headerLayoutYs + _onStickyHeaderLayout, ScrollView.js:1115-1143):
-// `headerLayoutYs` is a child-index→measured-y map the parent keeps; each header reports its own
-// y through `onHeaderLayoutY` as it measures, and we feed every header the y of the NEXT flagged
-// header (the collision point past which it scrolls off) by looking up its successor's index in
-// `stickyHeaderIndices`. The LAST flagged header has no successor, so its `nextHeaderLayoutY`
-// stays undefined and it sticks indefinitely (correct).
-export function wrapStickyHeaders(children, stickyHeaderIndices, scrollAnimatedValue, invertStickyHeaders, scrollViewHeight, StickyHeaderComponent, crossTalk) {
-    const { headerLayoutYs, onHeaderLayoutY, onHeaderRef } = crossTalk;
-    if (stickyHeaderIndices === undefined || stickyHeaderIndices.length === 0)
-        return children;
-    const Wrapper = StickyHeaderComponent ?? ScrollViewStickyHeader;
-    return Children.toArray(children).map((child, index) => {
-        const indexOfIndex = stickyHeaderIndices.indexOf(index);
-        if (indexOfIndex === -1 || !isValidElement(child))
-            return child;
-        // The next flagged header's measured y, by index order in stickyHeaderIndices (RN
-        // ScrollView.js:1695 nextIndex). undefined until that header has measured (or for the last).
-        const nextIndex = stickyHeaderIndices[indexOfIndex + 1];
-        const nextHeaderLayoutY = nextStickyHeaderY(stickyHeaderIndices, indexOfIndex, headerLayoutYs);
-        dlog(`ScrollView sticky-header wrap index=${index} next=${nextIndex} nextY=${nextHeaderLayoutY}`);
-        return createElement(Wrapper, {
-            key: child.key ?? `sticky-${index}`,
-            // Registers this header so the ScrollView can push the NEXT header's y straight in
-            // (RN ScrollView.js:1109). Without it a measurement would have to travel through parent
-            // state, re-rendering every child.
-            ref: (handle) => onHeaderRef(index, handle),
-            nextHeaderLayoutY,
-            // RN _onStickyHeaderLayout: record this header's own y, then push it to the previous
-            // header as its nextHeaderLayoutY. We record into the parent map; the lookup above feeds
-            // it forward on the resulting re-render.
-            onLayout: (event) => {
-                const y = readLayoutNumber(event, 'y');
-                if (y !== undefined)
-                    onHeaderLayoutY(index, y);
-            },
-            scrollAnimatedValue,
-            inverted: invertStickyHeaders,
-            scrollViewHeight,
-        }, child);
-    });
-}

package/build/components/switch/index.android.d.ts

@@ -1,3 +0,0 @@
-import type { ISwitchProps } from './shared';
-export type { ISwitchProps, ISwitchTrackColor } from './shared';
-export declare function Switch(rawProps: ISwitchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/build/components/switch/index.android.js

@@ -1,18 +0,0 @@
-// Switch, Android host binding. AndroidSwitch takes trackColorForTrue / trackColorForFalse
-// plus trackTintColor (the color for the CURRENT value, which RN computes as value ? true :
-// false), and snaps native back via the `setNativeValue` command (Switch.js:221-225).
-import { descriptorToReact } from '../../descriptor-to-react/index.js';
-import { useSwitchLogic } from './shared.js';
-const PLATFORM = {
-    snapBackCommand: 'setNativeValue',
-    trackColorProps: (value, trackColor) => ({
-        trackColorForFalse: trackColor?.false,
-        trackColorForTrue: trackColor?.true,
-        trackTintColor: value ? trackColor?.true : trackColor?.false,
-    }),
-};
-// A top-level named function, not a factory-returned closure: React Compiler's
-// component detection only walks top-level declarations (see shared.ts).
-export function Switch(rawProps) {
-    return descriptorToReact(useSwitchLogic(rawProps, PLATFORM));
-}

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

@@ -1 +0,0 @@
-export * from './index.ios';

package/build/components/switch/index.ios.d.ts

@@ -1,3 +0,0 @@
-import type { ISwitchProps } from './shared';
-export type { ISwitchProps, ISwitchTrackColor } from './shared';
-export declare function Switch(rawProps: ISwitchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/build/components/switch/index.ios.js

@@ -1,16 +0,0 @@
-// Switch, iOS host binding. iOS's native Switch takes onTintColor (ON-track) / tintColor
-// (OFF-track), and snaps native back via the `setValue` command (Switch.js:221-225).
-import { descriptorToReact } from '../../descriptor-to-react/index.js';
-import { useSwitchLogic } from './shared.js';
-const PLATFORM = {
-    snapBackCommand: 'setValue',
-    trackColorProps: (_value, trackColor) => ({
-        onTintColor: trackColor?.true,
-        tintColor: trackColor?.false,
-    }),
-};
-// A top-level named function, not a factory-returned closure: React Compiler's
-// component detection only walks top-level declarations (see shared.ts).
-export function Switch(rawProps) {
-    return descriptorToReact(useSwitchLogic(rawProps, PLATFORM));
-}

package/build/components/switch/index.js

@@ -1,6 +0,0 @@
-// Base / default Switch: re-exports the iOS build. Metro overrides this with switch.ios.ts /
-// switch.android.ts on a real host; under tsx / tsc / web the host config resolves here.
-// Filename is the selector, no Platform.OS read. The logic lives in
-// @symbiote-native/components/state, the render in @symbiote-native/components/view, and the
-// hook in switch-shared.
-export * from './index.ios.js';

package/build/components/switch/shared.d.ts

@@ -1,9 +0,0 @@
-import type { ISwitchPlatform, ISwitchProps as ISwitchBaseProps } from '@symbiote-native/components';
-export type { ISwitchTrackColor } from '@symbiote-native/components';
-export type ISwitchProps = ISwitchBaseProps & {
-    className?: string;
-};
-export type ISwitchHostPlatform = ISwitchPlatform & {
-    snapBackCommand: string;
-};
-export declare function useSwitchLogic(rawProps: ISwitchProps, platform: ISwitchHostPlatform): import("@symbiote-native/components").IDescriptor;

package/build/components/switch/shared.js

@@ -1,60 +0,0 @@
-// Switch is the React lifecycle half. The logic (the lastNativeReport reducer, valueFromChange,
-// the snap-back decision) lives in @symbiote-native/components/state, the render (value fold, track
-// colors, ios_backgroundColor) in @symbiote-native/components/view; here the adapter only owns the
-// hook: useReducer over the shared reducer, a ref for the imperative command, and the
-// useLayoutEffect that snaps native back when the parent rejects a toggle.
-//
-// Switch is controlled exactly like RN's: the parent's onValueChange MUST update `value` for
-// the toggle to stick. If the handler is a no-op, native has already flipped its own grip, so
-// JS commands the old value back down (a plain prop re-push cannot cover the no-op case: the
-// prop never changes, so the retained tree never diverges). The command name is platform-
-// specific (iOS setValue / Android setNativeValue) and arrives via `platform`.
-//
-// useSwitchLogic is a plain hook, not a component factory returning a closure: React Compiler's
-// component/hook detection only walks top-level declarations, so index.ios.ts / index.android.ts
-// each declare their OWN top-level `Switch` function that calls this hook, rather than exporting
-// whatever a factory here returns.
-import { useCallback, useLayoutEffect, useReducer, useRef } from 'react';
-import { renderSwitch, switchReducer, createInitialSwitchState, shouldSnapBack, valueFromChange, } from '@symbiote-native/components';
-import { dispatchViewCommand, dlog, } from '@symbiote-native/engine';
-import { resolveAccessibilityProps } from '@symbiote-native/components';
-export function useSwitchLogic(rawProps, platform) {
-    // Switch owns its host element rather than rendering through a symbiote View, so it folds
-    // aria/role into accessibility* here; the resolved accessibility* fields (plus testID etc.)
-    // ride down to the host node via `passthrough`.
-    const props = resolveAccessibilityProps(rawProps);
-    const { value, onValueChange, disabled, trackColor, thumbColor, ios_backgroundColor, style, ...passthrough } = props;
-    const ref = useRef(null);
-    const [state, dispatch] = useReducer(switchReducer, undefined, createInitialSwitchState);
-    const handleChange = useCallback((event) => {
-        const next = valueFromChange(event);
-        dlog(`Switch onChange value=${String(next)} eventCount=${String(event.nativeEvent.eventCount)}`);
-        if (next === undefined)
-            return;
-        onValueChange?.(next, event);
-        dispatch({ type: 'native-reported', value: next });
-    }, [onValueChange]);
-    // value is a real Fabric prop, folded to a strict boolean: RN sends `value === true`, so
-    // an undefined prop reads as "off" rather than absent.
-    const fabricValue = value === true;
-    useLayoutEffect(() => {
-        const node = ref.current;
-        if (node === null)
-            return;
-        if (!shouldSnapBack(state, fabricValue)) {
-            dlog(`Switch snap-back no-op reported=${String(state.lastNativeReport)} value=${fabricValue}`);
-            return;
-        }
-        dlog(`Switch ${platform.snapBackCommand} snap-back reported=${String(state.lastNativeReport)} value=${fabricValue}`);
-        dispatchViewCommand(node, platform.snapBackCommand, [fabricValue]);
-    }, [fabricValue, state]);
-    return renderSwitch({
-        value: fabricValue,
-        disabled,
-        trackColor,
-        thumbColor,
-        ios_backgroundColor,
-        style,
-        passthrough: { ...passthrough, ref, onChange: handleChange },
-    }, platform);
-}

package/build/components/text-input/index.d.ts

@@ -1,50 +0,0 @@
-import { type ISymbioteEvent } from '@symbiote-native/engine';
-import type { ITextInputProps as ITextInputBaseProps, ITextInputHandle } from '@symbiote-native/components';
-export type { ITextInputHandle } from '@symbiote-native/components';
-export type ITextInputProps = ITextInputBaseProps & {
-    className?: string;
-};
-export declare const TextInput: import("react").ForwardRefExoticComponent<import("@symbiote-native/components").IAccessibilityProps & import("@symbiote-native/components").IAriaProps & {
-    value?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    placeholderTextColor?: string;
-    editable?: boolean;
-    keyboardType?: string;
-    secureTextEntry?: boolean;
-    maxLength?: number;
-    multiline?: boolean;
-    selection?: import("@symbiote-native/components").ITextInputSelection;
-    autoCapitalize?: "none" | "sentences" | "words" | "characters";
-    autoCorrect?: boolean;
-    autoComplete?: string;
-    textContentType?: string;
-    autoFocus?: boolean;
-    showSoftInputOnFocus?: boolean;
-    returnKeyType?: string;
-    selectTextOnFocus?: boolean;
-    scrollEnabled?: boolean;
-    numberOfLines?: number;
-    textAlign?: "left" | "center" | "right";
-    blurOnSubmit?: boolean;
-    inputMode?: import("@symbiote-native/components").IInputMode;
-    enterKeyHint?: import("@symbiote-native/components").IEnterKeyHint;
-    readOnly?: boolean;
-    submitBehavior?: import("@symbiote-native/components").ISubmitBehavior;
-    cursorColor?: string;
-    selectionColor?: string;
-    selectionHandleColor?: string;
-    underlineColorAndroid?: string;
-    inputAccessoryViewID?: string;
-    style?: import("@symbiote-native/engine").ITextStyle;
-    onValueChange?: (text: string, event: ISymbioteEvent) => void;
-    onFocus?: import("@symbiote-native/components").ITextInputEventHandler;
-    onBlur?: import("@symbiote-native/components").ITextInputEventHandler;
-    onEndEditing?: import("@symbiote-native/components").ITextInputEventHandler;
-    onSubmitEditing?: import("@symbiote-native/components").ITextInputEventHandler;
-    onKeyPress?: import("@symbiote-native/components").ITextInputEventHandler;
-    onSelectionChange?: import("@symbiote-native/components").ITextInputEventHandler;
-    onContentSizeChange?: import("@symbiote-native/components").ITextInputEventHandler;
-} & {
-    className?: string;
-} & import("react").RefAttributes<ITextInputHandle>>;

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

@@ -1,172 +0,0 @@
-// TextInput: the React 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 shared verbatim with the Vue
-// adapter. Here React supplies only the lifecycle: useState for the acknowledged event count
-// (it must re-render so the imperative handle echoes the latest), a ref for the host node and
-// the last text native holds, the useLayoutEffect controlled-write, the mount autoFocus, and
-// useImperativeHandle for focus/blur/clear/isFocused/setSelection.
-//
-// The controlled handshake hinges on commanding native back with the ACKNOWLEDGED event count
-// (setTextAndSelection), never a plain prop re-push. See @symbiote-native/components/state/text-input.
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
-import { dispatchViewCommand, dlog, } from '@symbiote-native/engine';
-import { blurTextInput, setInputBlurred, setInputFocused, } from '@symbiote-native/engine';
-import { resolveAccessibilityProps, resolveTextInputProps, renderTextInput, foldText, textFromChange, eventCountFromChange, shouldCommandText, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
-import { descriptorToReact } from '../../descriptor-to-react/index.js';
-export const TextInput = forwardRef((rawProps, forwardedRef) => {
-    // TextInput is its own host element (not a View wrapper), so it folds aria/role here.
-    const props = resolveAccessibilityProps(rawProps);
-    // Pull out the fields the lifecycle owns (controlled value, the wrapped handlers, the folded
-    // aliases) so they don't reach Fabric raw; everything else rides down via `passthrough`.
-    const { value, defaultValue, multiline, selection, onValueChange, onFocus, onBlur, inputMode, enterKeyHint, readOnly, submitBehavior, blurOnSubmit, cursorColor, selectionColor, selectionHandleColor, keyboardType, returnKeyType, editable, autoComplete, textContentType, autoFocus, showSoftInputOnFocus, underlineColorAndroid, ...passthrough } = props;
-    const isMultiline = multiline === true;
-    const folded = resolveTextInputProps({
-        inputMode,
-        keyboardType,
-        enterKeyHint,
-        returnKeyType,
-        readOnly,
-        editable,
-        submitBehavior,
-        blurOnSubmit,
-        multiline: isMultiline,
-        cursorColor,
-        selectionColor,
-        selectionHandleColor,
-        autoComplete,
-        textContentType,
-        showSoftInputOnFocus,
-        underlineColorAndroid,
-    });
-    const ref = useRef(null);
-    // JS-side focus state, mirrored from the focus/blur events for isFocused(). RN's
-    // TextInputState holds the same; native exposes no synchronous focus getter.
-    const focused = useRef(false);
-    // The count native last acknowledged. We echo it back on every controlled write so native's
-    // eventLag lands on 0 and the write applies.
-    const [mostRecentEventCount, setMostRecentEventCount] = useState(INITIAL_EVENT_COUNT);
-    // The last text native holds, as far as JS knows. Seeded from the mount-time value because the
-    // `text` prop already carries that value down via createNode, so the FIRST controlled value is
-    // not a divergence and must NOT re-command. Only later, post-keystroke divergences flow through
-    // setTextAndSelection.
-    const lastNativeText = useRef(foldText(value, defaultValue));
-    const handleChange = useCallback((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) {
-            lastNativeText.current = text;
-            onValueChange?.(text, event);
-        }
-        // Ordering matters: record the text first, then bump the acknowledged count, so the count
-        // never runs ahead of the text it stands for.
-        const count = eventCountFromChange(event);
-        if (count !== undefined)
-            setMostRecentEventCount(count);
-    }, [onValueChange]);
-    const text = foldText(value, defaultValue);
-    // 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;
-    // the command is the only stale-safe path. No deps; it runs after every render and the
-    // predicate makes it a no-op unless the text diverged.
-    useLayoutEffect(() => {
-        const node = ref.current;
-        if (node === null)
-            return;
-        if (!shouldCommandText(lastNativeText.current, value))
-            return;
-        const selStart = selection?.start ?? SELECTION_NONE;
-        const selEnd = selection?.end ?? selection?.start ?? SELECTION_NONE;
-        dlog(`TextInput setTextAndSelection count=${mostRecentEventCount} text=${JSON.stringify(value)}`);
-        dispatchViewCommand(node, 'setTextAndSelection', [
-            mostRecentEventCount,
-            value,
-            selStart,
-            selEnd,
-        ]);
-        lastNativeText.current = value;
-    });
-    // autoFocus is driven in JS, not as a native prop: on mount, command `focus` down once (RN does
-    // the same via TextInputState.focusInput, TextInput.js:538). Empty deps so it fires only on
-    // mount; the native `focus` command is idempotent if already focused.
-    useEffect(() => {
-        if (autoFocus !== true)
-            return;
-        const node = ref.current;
-        if (node === null)
-            return;
-        dlog('TextInput autoFocus -> focus command');
-        dispatchViewCommand(node, 'focus', []);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const handleFocus = useCallback((event) => {
-        focused.current = true;
-        // Track focus app-wide so Keyboard.dismiss can blur this input without a ref.
-        if (ref.current !== null)
-            setInputFocused(ref.current);
-        onFocus?.(event);
-    }, [onFocus]);
-    const handleBlur = useCallback((event) => {
-        focused.current = false;
-        if (ref.current !== null)
-            setInputBlurred(ref.current);
-        onBlur?.(event);
-    }, [onBlur]);
-    // The imperative API RN exposes on the ref. focus/blur drive native view commands; clear and
-    // setSelection reuse setTextAndSelection (the same stale-safe path as a controlled write),
-    // echoing the acknowledged event count so native applies them.
-    useImperativeHandle(forwardedRef, () => ({
-        focus: () => {
-            const node = ref.current;
-            if (node !== null)
-                dispatchViewCommand(node, 'focus', []);
-        },
-        blur: () => {
-            // Routes through TextInputState so the app-wide focus tracking clears too.
-            blurTextInput(ref.current);
-        },
-        clear: () => {
-            const node = ref.current;
-            if (node === null)
-                return;
-            dispatchViewCommand(node, 'setTextAndSelection', [
-                mostRecentEventCount,
-                '',
-                0,
-                0,
-            ]);
-            lastNativeText.current = '';
-        },
-        isFocused: () => focused.current,
-        setSelection: (start, end) => {
-            const node = ref.current;
-            if (node === null)
-                return;
-            const current = lastNativeText.current ?? '';
-            dispatchViewCommand(node, 'setTextAndSelection', [
-                mostRecentEventCount,
-                current,
-                start,
-                end,
-            ]);
-        },
-    }), [mostRecentEventCount]);
-    return descriptorToReact(renderTextInput({
-        multiline: isMultiline,
-        text,
-        mostRecentEventCount,
-        selection,
-        folded,
-        passthrough: {
-            ...passthrough,
-            ref,
-            onChange: handleChange,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-        },
-    }));
-});
-TextInput.displayName = 'TextInput';

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

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