@symbiote-native/vue 0.1.0

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

@@ -0,0 +1,257 @@
+// TextInput, the Vue 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 React
+// adapter. Here Vue supplies only the reactivity: a shallowRef holds the host node, a ref holds
+// the acknowledged event count (so the exposed handle echoes the latest), setup-scope `let`s
+// hold the last native text + focus flag, a post-flush watch runs the controlled-write command,
+// and expose() wires the imperative handle. The Vue twin of the React useState/useRef +
+// useLayoutEffect + useImperativeHandle.
+//
+// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard rather than a cast.
+// onValueChange MUST be stripped from the forwarded attrs: it is not a ViewConfig event (it's
+// derived from the native onChange), so leaking it would reach Fabric as a function prop and
+// crash Android's folly::dynamic. The imperative module (blurTextInput / setInput*) is imported
+// from @symbiote-native/engine, the same framework-agnostic singleton both adapters share.
+import { defineComponent, onBeforeUnmount, ref, shallowRef, watch } from '@vue/runtime-core';
+import { resolveAccessibilityProps, resolveTextInputProps, renderTextInput, foldText, textFromChange, eventCountFromChange, shouldCommandText, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
+import { dispatchViewCommand, isSymbioteNode, dlog, blurTextInput, setInputFocused, setInputBlurred, whenCommitted, } from '@symbiote-native/engine';
+import { descriptorToVue } from '../../descriptor-to-vue';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+import { resolveModelValue, emitModelUpdate } from '../../utils/model-binding';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asString(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+function isString(value) {
+    return typeof value === 'string';
+}
+function asBoolean(value) {
+    return typeof value === 'boolean' ? value : undefined;
+}
+// selection arrives untyped; keep only the numeric start/end the render fn + controlled write read.
+function normalizeSelection(value) {
+    if (!isRecord(value))
+        return undefined;
+    if (typeof value.start !== 'number')
+        return undefined;
+    const selection = { start: value.start };
+    if (typeof value.end === 'number')
+        selection.end = value.end;
+    return selection;
+}
+// The prop/handler keys the lifecycle consumes itself (mirrors the React adapter's destructure);
+// everything else (placeholder, secureTextEntry, the remaining native events, accessibility,
+// testID, style…) forwards onto the host node. onFocus/onBlur are re-supplied as our wrapped
+// handlers; onValueChange is pure JS and must never reach Fabric.
+const HANDLED_ATTRS = [
+    'value',
+    'modelValue',
+    'defaultValue',
+    'multiline',
+    'selection',
+    'inputMode',
+    'enterKeyHint',
+    'readOnly',
+    'submitBehavior',
+    'blurOnSubmit',
+    'cursorColor',
+    'selectionColor',
+    'selectionHandleColor',
+    'keyboardType',
+    'returnKeyType',
+    'editable',
+    'autoComplete',
+    'textContentType',
+    'autoFocus',
+    'showSoftInputOnFocus',
+    'underlineColorAndroid',
+    'onValueChange',
+    'onFocus',
+    'onBlur',
+];
+function forwardAttrs(attrs) {
+    const result = {};
+    for (const key of Object.keys(attrs)) {
+        if (!HANDLED_ATTRS.includes(key))
+            result[key] = attrs[key];
+    }
+    return result;
+}
+export const TextInput = defineComponent((_props, { attrs: rawAttrs, emit, expose }) => {
+    // shallowRef, NOT ref: the engine node must be held by IDENTITY. A plain ref() runs the node
+    // through Vue's toReactive(), handing back a reactive Proxy, a different object than the raw
+    // node the engine's WeakMap mirror is keyed on, so every imperative command
+    // (dispatchViewCommand / focus / blur / setTextAndSelection) would miss and silently no-op.
+    // See .claude/skills/vue-adapter-reactivity. Same rule as the Switch / ScrollView host node.
+    const nodeRef = shallowRef(null);
+    const setNodeRef = (el) => {
+        nodeRef.value = isSymbioteNode(el) ? el : null;
+    };
+    // The count native last acknowledged. A ref so the render echoes it back as
+    // mostRecentEventCount and the exposed handle reads the latest; the controlled write commands
+    // it so native's eventLag lands on 0.
+    const mostRecentEventCount = ref(INITIAL_EVENT_COUNT);
+    // The last text native holds, as far as JS knows. Seeded from the mount-time value (the `text`
+    // prop already carries it down via createNode, so the FIRST controlled value is not a
+    // divergence and must NOT re-command). A setup-scope `let`: no render needed when it changes.
+    let lastNativeText = foldText(resolveModelValue(rawAttrs, isString), asString(rawAttrs.defaultValue));
+    // JS-side focus state, mirrored from the focus/blur events for isFocused(): native exposes no
+    // synchronous focus getter (RN's TextInputState holds the same).
+    let focused = false;
+    // autoFocus fires once when the node first commits; guard so a later node identity change does
+    // not re-focus.
+    let autoFocused = false;
+    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.
+        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) {
+            // Record the text first, then the count, so the count never runs ahead of the text it
+            // stands for.
+            lastNativeText = text;
+            emit('valueChange', text, event);
+            emitModelUpdate(emit, text);
+        }
+        const count = eventCountFromChange(event);
+        if (count !== undefined)
+            mostRecentEventCount.value = count;
+    };
+    const handleFocus = (event) => {
+        focused = true;
+        // Track focus app-wide so Keyboard.dismiss can blur this input without a ref.
+        const node = nodeRef.value;
+        if (node !== null)
+            setInputFocused(node);
+        emit('focus', event);
+    };
+    const handleBlur = (event) => {
+        focused = false;
+        const node = nodeRef.value;
+        if (node !== null)
+            setInputBlurred(node);
+        emit('blur', event);
+    };
+    // 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. Watching `value` covers every divergence (the parent only rewrites `value` after
+    // a change). flush:'post' so the engine has committed the node before the command reads its
+    // Fabric handle; the predicate makes it a no-op on mount (value === the seed).
+    watch(() => resolveModelValue(rawAttrs, isString), value => {
+        const node = nodeRef.value;
+        if (node === null)
+            return;
+        if (!shouldCommandText(lastNativeText, value))
+            return;
+        const selection = normalizeSelection(rawAttrs.selection);
+        const selStart = selection?.start ?? SELECTION_NONE;
+        const selEnd = selection?.end ?? selection?.start ?? SELECTION_NONE;
+        dlog(`TextInput setTextAndSelection count=${mostRecentEventCount.value} text=${JSON.stringify(value)}`);
+        dispatchViewCommand(node, 'setTextAndSelection', [
+            mostRecentEventCount.value,
+            value,
+            selStart,
+            selEnd,
+        ]);
+        lastNativeText = value;
+    }, { flush: 'post' });
+    // autoFocus is driven in JS, not as a native prop: once the node first commits, command `focus`
+    // down once (RN does the same via TextInputState.focusInput). The watch fires when nodeRef is
+    // set (mount), but under Vue's async-batched commit the node has no Fabric tag yet at post-flush,
+    // so the focus command would be skipped with no retry. whenCommitted defers it to the commit that
+    // assigns the tag. Cancelled on unmount so an un-committed pending focus can't leak.
+    let cancelAutoFocus;
+    watch(nodeRef, node => {
+        if (autoFocused || node === null || rawAttrs.autoFocus !== true)
+            return;
+        autoFocused = true;
+        dlog('TextInput autoFocus -> focus command');
+        cancelAutoFocus = whenCommitted(node, () => dispatchViewCommand(node, 'focus', []));
+    }, { flush: 'post' });
+    onBeforeUnmount(() => cancelAutoFocus?.());
+    // The imperative API RN exposes on the ref. The methods read nodeRef.value / the count LIVE,
+    // so no stale capture: the Vue twin of React's useImperativeHandle. 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.
+    expose({
+        focus: () => {
+            const node = nodeRef.value;
+            if (node !== null)
+                dispatchViewCommand(node, 'focus', []);
+        },
+        blur: () => {
+            // Routes through TextInputState so the app-wide focus tracking clears too.
+            blurTextInput(nodeRef.value);
+        },
+        clear: () => {
+            const node = nodeRef.value;
+            if (node === null)
+                return;
+            dispatchViewCommand(node, 'setTextAndSelection', [mostRecentEventCount.value, '', 0, 0]);
+            lastNativeText = '';
+        },
+        isFocused: () => focused,
+        setSelection: (start, end) => {
+            const node = nodeRef.value;
+            if (node === null)
+                return;
+            const current = lastNativeText ?? '';
+            dispatchViewCommand(node, 'setTextAndSelection', [
+                mostRecentEventCount.value,
+                current,
+                start,
+                end,
+            ]);
+        },
+    });
+    return () => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const multiline = attrs.multiline === true;
+        const folded = resolveTextInputProps({
+            inputMode: asString(attrs.inputMode),
+            keyboardType: asString(attrs.keyboardType),
+            enterKeyHint: asString(attrs.enterKeyHint),
+            returnKeyType: asString(attrs.returnKeyType),
+            readOnly: asBoolean(attrs.readOnly),
+            editable: asBoolean(attrs.editable),
+            submitBehavior: asString(attrs.submitBehavior),
+            blurOnSubmit: asBoolean(attrs.blurOnSubmit),
+            multiline,
+            cursorColor: asString(attrs.cursorColor),
+            selectionColor: asString(attrs.selectionColor),
+            selectionHandleColor: asString(attrs.selectionHandleColor),
+            autoComplete: asString(attrs.autoComplete),
+            textContentType: asString(attrs.textContentType),
+            showSoftInputOnFocus: asBoolean(attrs.showSoftInputOnFocus),
+            underlineColorAndroid: asString(attrs.underlineColorAndroid),
+        });
+        const text = foldText(resolveModelValue(attrs, isString), asString(attrs.defaultValue));
+        return descriptorToVue(renderTextInput({
+            multiline,
+            text,
+            mostRecentEventCount: mostRecentEventCount.value,
+            selection: normalizeSelection(attrs.selection),
+            folded,
+            passthrough: {
+                ...resolveAccessibilityProps(forwardAttrs(attrs)),
+                ref: setNodeRef,
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+            },
+        }));
+    };
+}, {
+    name: 'TextInput',
+    inheritAttrs: false,
+    emits: {
+        valueChange: (_text, _event) => true,
+        focus: (_event) => true,
+        blur: (_event) => true,
+        'update:modelValue': (_text) => true,
+        'update:value': (_text) => true,
+    },
+});

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

@@ -0,0 +1,24 @@
+import { canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, type INativeFeedbackBackground } from '@symbiote-native/components';
+import { type IPressableEmits, type IPressableProps } from './pressable';
+export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from '@symbiote-native/components';
+export type ITouchableNativeFeedbackProps = Omit<IPressableProps, 'style'> & {
+    background?: INativeFeedbackBackground;
+    useForeground?: boolean;
+};
+export declare const TouchableNativeFeedback: import("vue").DefineSetupFnComponent<ITouchableNativeFeedbackProps, IPressableEmits, {}, Omit<IPressableProps, "style"> & {
+    background?: INativeFeedbackBackground;
+    useForeground?: boolean;
+} & {
+    onPress?: ((event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
+    onPressIn?: ((event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
+    onPressOut?: ((event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
+    onPressMove?: ((event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
+    onLongPress?: ((event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
+    onHoverIn?: ((event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
+    onHoverOut?: ((event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps> & {
+    SelectableBackground: typeof selectableBackground;
+    SelectableBackgroundBorderless: typeof selectableBackgroundBorderless;
+    Ripple: typeof rippleBackground;
+    canUseNativeForeground: typeof canUseNativeForeground;
+};

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

@@ -0,0 +1,75 @@
+// TouchableNativeFeedback for Vue: Android's ripple/state-drawable touchable, built on Pressable
+// like the rest of the family (the Vue twin of the React adapter). The native ripple props
+// (nativeBackgroundAndroid / nativeForegroundAndroid) ride a dedicated feedback View nested under
+// the Pressable; on iOS they are inert. The static factories + background mapping are shared in
+// @symbiote-native/components/view; Vue only attaches them onto the component value and nests the View.
+import { defineComponent, h } from '@vue/runtime-core';
+import { backgroundProps, canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, } from '@symbiote-native/components';
+import { dlog } from '@symbiote-native/engine';
+import { View } from '../components';
+import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable';
+import { normalizeVueAttrs } from '../utils/normalize-attrs';
+const HANDLED = ['background', 'useForeground'];
+function forwardAttrs(attrs) {
+    const result = {};
+    for (const key of Object.keys(attrs)) {
+        if (!HANDLED.includes(key))
+            result[key] = attrs[key];
+    }
+    return result;
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+// `background` arrives untyped; narrow it to the discriminated union the mapping reads, else
+// undefined (the impl then defaults to SelectableBackground, like RN).
+function asBackground(value) {
+    if (!isRecord(value))
+        return undefined;
+    if (value.type === 'ThemeAttrAndroid') {
+        if (value.attribute === 'selectableItemBackground' ||
+            value.attribute === 'selectableItemBackgroundBorderless') {
+            return {
+                type: 'ThemeAttrAndroid',
+                attribute: value.attribute,
+                rippleRadius: typeof value.rippleRadius === 'number' ? value.rippleRadius : undefined,
+            };
+        }
+        return undefined;
+    }
+    if (value.type === 'RippleAndroid') {
+        return {
+            type: 'RippleAndroid',
+            color: typeof value.color === 'string' ? value.color : null,
+            borderless: value.borderless === true,
+            rippleRadius: typeof value.rippleRadius === 'number' ? value.rippleRadius : undefined,
+        };
+    }
+    return undefined;
+}
+const TouchableNativeFeedbackImpl = defineComponent((_props, { slots, attrs: rawAttrs, emit }) => {
+    return () => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const useForeground = attrs.useForeground === true;
+        // RN defaults a missing background to SelectableBackground() so the touchable always shows
+        // feedback; mirror that here.
+        const resolved = asBackground(attrs.background) ?? selectableBackground();
+        dlog(`TouchableNativeFeedback render ${resolved.type} useForeground ${useForeground}`);
+        const nativeProps = backgroundProps(resolved, useForeground);
+        const children = slots.default !== undefined ? slots.default() : [];
+        const feedback = h(View, nativeProps, () => children);
+        return h(Pressable, { ...forwardAttrs(attrs), ...emitPressableEvents(emit) }, { default: () => [feedback] });
+    };
+}, {
+    name: 'TouchableNativeFeedback',
+    inheritAttrs: false,
+    emits: PRESSABLE_EMITS,
+});
+// The static factories live on the component value so callers reach TouchableNativeFeedback.Ripple(…)
+// exactly like RN. Object.assign onto the defineComponent return (a plain object) keeps the typing.
+export const TouchableNativeFeedback = Object.assign(TouchableNativeFeedbackImpl, {
+    SelectableBackground: selectableBackground,
+    SelectableBackgroundBorderless: selectableBackgroundBorderless,
+    Ripple: rippleBackground,
+    canUseNativeForeground,
+});

package/build/components/touchable.d.ts

@@ -0,0 +1,44 @@
+import { type IPressTimingProps } from '@symbiote-native/components';
+import { type ISymbioteEvent, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import { type IPressableEmits, type IPressableProps } from './pressable';
+type ITouchableBaseProps = Omit<IPressableProps, 'style'> & IPressTimingProps & {
+    style?: IStyleProp<IViewStyle>;
+};
+export interface ITouchableOpacityProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+}
+export interface ITouchableHighlightProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+    underlayColor?: string;
+}
+export type ITouchableWithoutFeedbackProps = ITouchableBaseProps;
+export declare const TouchableOpacity: import("vue").DefineSetupFnComponent<ITouchableOpacityProps, IPressableEmits, {}, ITouchableOpacityProps & {
+    onPress?: ((event: ISymbioteEvent) => any) | undefined;
+    onPressIn?: ((event: ISymbioteEvent) => any) | undefined;
+    onPressOut?: ((event: ISymbioteEvent) => any) | undefined;
+    onPressMove?: ((event: ISymbioteEvent) => any) | undefined;
+    onLongPress?: ((event: ISymbioteEvent) => any) | undefined;
+    onHoverIn?: ((event: ISymbioteEvent) => any) | undefined;
+    onHoverOut?: ((event: ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+export declare const TouchableHighlight: import("vue").DefineSetupFnComponent<ITouchableHighlightProps, IPressableEmits, {}, ITouchableHighlightProps & {
+    onPress?: ((event: ISymbioteEvent) => any) | undefined;
+    onPressIn?: ((event: ISymbioteEvent) => any) | undefined;
+    onPressOut?: ((event: ISymbioteEvent) => any) | undefined;
+    onPressMove?: ((event: ISymbioteEvent) => any) | undefined;
+    onLongPress?: ((event: ISymbioteEvent) => any) | undefined;
+    onHoverIn?: ((event: ISymbioteEvent) => any) | undefined;
+    onHoverOut?: ((event: ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+export declare const TouchableWithoutFeedback: import("vue").DefineSetupFnComponent<ITouchableBaseProps, IPressableEmits, {}, Omit<IPressableProps, "style"> & IPressTimingProps & {
+    style?: IStyleProp<IViewStyle>;
+} & {
+    onPress?: ((event: ISymbioteEvent) => any) | undefined;
+    onPressIn?: ((event: ISymbioteEvent) => any) | undefined;
+    onPressOut?: ((event: ISymbioteEvent) => any) | undefined;
+    onPressMove?: ((event: ISymbioteEvent) => any) | undefined;
+    onLongPress?: ((event: ISymbioteEvent) => any) | undefined;
+    onHoverIn?: ((event: ISymbioteEvent) => any) | undefined;
+    onHoverOut?: ((event: ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+export {};

package/build/components/touchable.js

@@ -0,0 +1,150 @@
+// The Touchable* family for Vue, all built on Pressable, the Vue twin of the React adapter. The
+// press-timing constants and the deactivation-floor math are shared with React
+// (@symbiote-native/components/state/touchable); here Vue owns only the Animated wiring + the press
+// scheduling state:
+//   TouchableOpacity: animate an Animated.Value opacity toward activeOpacity on press-in, back
+//     to 1 on press-out, driven from Pressable's onPressIn/onPressOut.
+//   TouchableHighlight: paint underlayColor + lower child opacity while pressed, via Pressable's
+//     style-as-function (the pressed state RN drives with setState).
+//   TouchableWithoutFeedback: no visual change, just the press wiring.
+//
+// Inputs arrive as attrs (untyped), narrowed with runtime guards. The handlers read attrs LIVE
+// (they fire on events, not render) so a re-supplied callback / timing is always honored.
+import { defineComponent, h } from '@vue/runtime-core';
+import { computePressOutWait, DEFAULT_ACTIVE_OPACITY, DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_MIN_PRESS_DURATION_MS, DEFAULT_UNDERLAY_COLOR, OPACITY_ACTIVE_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, } from '@symbiote-native/components';
+import { dlog, } from '@symbiote-native/engine';
+import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable';
+import { Animated } from '../modules/animated';
+import { normalizeVueAttrs } from '../utils/normalize-attrs';
+function numberOr(value, fallback) {
+    return typeof value === 'number' ? value : fallback;
+}
+function forwardExcept(attrs, handled) {
+    const result = {};
+    for (const key of Object.keys(attrs)) {
+        if (!handled.includes(key))
+            result[key] = attrs[key];
+    }
+    return result;
+}
+const TOUCHABLE_OPACITY_HANDLED = [
+    'activeOpacity',
+    'style',
+    'class',
+    'onPressIn',
+    'onPressOut',
+    'delayPressIn',
+    'delayPressOut',
+    'minPressDuration',
+];
+export const TouchableOpacity = defineComponent((_props, { slots, attrs: rawAttrs, emit }) => {
+    // One Animated.Value per mount, resting at full opacity. Held by identity in setup scope (an
+    // engine object, never a reactive ref). The Animated.View leaf commits it every frame.
+    const opacity = new Animated.Value(RESTING_OPACITY);
+    let pressInTimer;
+    let activatedAt;
+    function setOpacityTo(toValue, duration) {
+        Animated.timing(opacity, {
+            toValue,
+            duration,
+            easing: Animated.Easing.inOut(Animated.Easing.quad),
+            useNativeDriver: false,
+        }).start();
+    }
+    function clearPressInTimer() {
+        if (pressInTimer !== undefined) {
+            clearTimeout(pressInTimer);
+            pressInTimer = undefined;
+        }
+    }
+    function activate(event) {
+        activatedAt = Date.now();
+        setOpacityTo(numberOr(rawAttrs.activeOpacity, DEFAULT_ACTIVE_OPACITY), OPACITY_ACTIVE_DURATION_MS);
+        emit('pressIn', event);
+    }
+    function deactivate(event) {
+        activatedAt = undefined;
+        setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
+        emit('pressOut', event);
+    }
+    function handlePressIn(event) {
+        const delayPressIn = numberOr(rawAttrs.delayPressIn, 0);
+        if (delayPressIn > 0) {
+            dlog(`TouchableOpacity pressIn deferred ${delayPressIn}ms`);
+            pressInTimer = setTimeout(() => {
+                pressInTimer = undefined;
+                activate(event);
+            }, delayPressIn);
+            return;
+        }
+        activate(event);
+    }
+    function handlePressOut(event) {
+        if (pressInTimer !== undefined) {
+            clearPressInTimer();
+            activate(event);
+        }
+        const heldFor = activatedAt === undefined ? 0 : Date.now() - activatedAt;
+        const wait = computePressOutWait(heldFor, numberOr(rawAttrs.minPressDuration, DEFAULT_MIN_PRESS_DURATION_MS), numberOr(rawAttrs.delayPressOut, 0));
+        if (wait > 0) {
+            dlog(`TouchableOpacity pressOut deferred ${wait}ms`);
+            setTimeout(() => deactivate(event), wait);
+            return;
+        }
+        deactivate(event);
+    }
+    return () => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const style = attrs.style;
+        const pressableProps = {
+            ...forwardExcept(attrs, TOUCHABLE_OPACITY_HANDLED),
+            ...emitPressableEvents(emit),
+            onPressIn: handlePressIn,
+            onPressOut: handlePressOut,
+        };
+        const children = slots.default !== undefined ? slots.default() : [];
+        const feedback = h(Animated.View, { style: [style, { opacity }], class: attrs.class }, () => children);
+        return h(Pressable, pressableProps, { default: () => [feedback] });
+    };
+}, {
+    name: 'TouchableOpacity',
+    inheritAttrs: false,
+    emits: PRESSABLE_EMITS,
+});
+const TOUCHABLE_HIGHLIGHT_HANDLED = ['activeOpacity', 'underlayColor', 'style'];
+export const TouchableHighlight = defineComponent((_props, { slots, attrs: rawAttrs, emit }) => {
+    return () => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const activeOpacity = numberOr(attrs.activeOpacity, DEFAULT_HIGHLIGHT_CHILD_OPACITY);
+        const underlayColor = typeof attrs.underlayColor === 'string' ? attrs.underlayColor : DEFAULT_UNDERLAY_COLOR;
+        const style = attrs.style;
+        function pressedStyle({ pressed }) {
+            if (!pressed)
+                return style;
+            const overlay = { backgroundColor: underlayColor, opacity: activeOpacity };
+            return [style, overlay];
+        }
+        const pressableProps = {
+            ...forwardExcept(attrs, TOUCHABLE_HIGHLIGHT_HANDLED),
+            ...emitPressableEvents(emit),
+            style: pressedStyle,
+        };
+        const children = slots.default !== undefined ? slots.default() : [];
+        return h(Pressable, pressableProps, { default: () => children });
+    };
+}, {
+    name: 'TouchableHighlight',
+    inheritAttrs: false,
+    emits: PRESSABLE_EMITS,
+});
+export const TouchableWithoutFeedback = defineComponent((_props, { slots, attrs: rawAttrs, emit }) => {
+    return () => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const children = slots.default !== undefined ? slots.default() : [];
+        return h(Pressable, { ...attrs, ...emitPressableEvents(emit) }, { default: () => children });
+    };
+}, {
+    name: 'TouchableWithoutFeedback',
+    inheritAttrs: false,
+    emits: PRESSABLE_EMITS,
+});

package/build/components/virtualized-list/index.d.ts

@@ -0,0 +1,121 @@
+import { type VNode } from '@vue/runtime-core';
+import { type ISeparatorProps, type ISeparators, type IViewabilityConfig, type IViewabilityConfigCallbackPair, type IViewableItemsChangedInfo } from '@symbiote-native/components';
+import { type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
+export type { ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, IVirtualizedListHandle, } from '@symbiote-native/components';
+export interface IVirtualizedListProps<ItemT> {
+    data: unknown;
+    getItem: (data: unknown, index: number) => ItemT;
+    getItemCount: (data: unknown) => number;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    getItemLayout?: (data: unknown, index: number) => {
+        length: number;
+        offset: number;
+        index: number;
+    };
+    horizontal?: boolean;
+    inverted?: boolean;
+    extraData?: unknown;
+    onEndReachedThreshold?: number;
+    onStartReachedThreshold?: number;
+    refreshing?: boolean | null;
+    progressViewOffset?: number;
+    viewabilityConfig?: IViewabilityConfig;
+    viewabilityConfigCallbackPairs?: IViewabilityConfigCallbackPair<ItemT>[];
+    initialNumToRender?: number;
+    initialScrollIndex?: number;
+    maxToRenderPerBatch?: number;
+    updateCellsBatchingPeriod?: number;
+    windowSize?: number;
+    stickyHeaderIndices?: number[];
+    maintainVisibleContentPosition?: {
+        minIndexForVisible: number;
+        autoscrollToTopThreshold?: number;
+    };
+    onScroll?: (event: ISymbioteEvent) => void;
+    onScrollBeginDrag?: (event: ISymbioteEvent) => void;
+    onScrollEndDrag?: (event: ISymbioteEvent) => void;
+    onMomentumScrollBegin?: (event: ISymbioteEvent) => void;
+    onMomentumScrollEnd?: (event: ISymbioteEvent) => void;
+    scrollEventThrottle?: number;
+    keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
+    keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    style?: IStyleProp<IViewStyle>;
+    contentContainerStyle?: IStyleProp<IViewStyle>;
+    [key: string]: unknown;
+}
+export type IVirtualizedListSlots<ItemT> = {
+    item: (info: {
+        item: ItemT;
+        index: number;
+        separators: ISeparators;
+    }) => VNode[] | VNode;
+    separator?: (props: ISeparatorProps<ItemT>) => VNode[] | VNode;
+    header?: () => VNode[] | VNode;
+    footer?: () => VNode[] | VNode;
+    empty?: () => VNode[] | VNode;
+};
+export type IVirtualizedListEmits<ItemT> = {
+    viewableItemsChanged: (info: IViewableItemsChangedInfo<ItemT>) => void;
+    endReached: (info: {
+        distanceFromEnd: number;
+    }) => void;
+    startReached: (info: {
+        distanceFromStart: number;
+    }) => void;
+    refresh: () => void;
+    scrollToIndexFailed: (info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+    }) => void;
+};
+export declare const VirtualizedList: new <ItemT>(props: (IVirtualizedListProps<ItemT> & ({} | {
+    onRefresh?: (() => any) | undefined;
+    onViewableItemsChanged?: ((info: IViewableItemsChangedInfo<ItemT>) => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+    onScrollToIndexFailed?: ((info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+    }) => any) | undefined;
+})) & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<IVirtualizedListProps<ItemT> & ({} | {
+    onRefresh?: (() => any) | undefined;
+    onViewableItemsChanged?: ((info: IViewableItemsChangedInfo<ItemT>) => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+    onScrollToIndexFailed?: ((info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+    }) => any) | undefined;
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} | IVirtualizedListEmits<ItemT>, import("vue").PublicProps, {}, false, {}, import("vue").SlotsType<IVirtualizedListSlots<ItemT>>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, (IVirtualizedListProps<ItemT> & {}) | (IVirtualizedListProps<ItemT> & {
+    onRefresh?: (() => any) | undefined;
+    onViewableItemsChanged?: ((info: IViewableItemsChangedInfo<ItemT>) => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+    onScrollToIndexFailed?: ((info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+    }) => any) | undefined;
+}), {}, {}, {}, {}, {}>;