@symbiote-native/vue 0.1.0

package/build/components/keyboard-avoiding-view.js

@@ -0,0 +1,121 @@
+// KeyboardAvoidingView: the Vue lifecycle half. The inset math + the behavior → style/structure
+// decision live in @symbiote-native/components (render-keyboard-avoiding-view), shared verbatim with the
+// React adapter; Vue supplies only the reactivity: a ref holds the inset, onMounted subscribes to
+// the now-core Keyboard module (show / changeFrame / hide), onUnmounted tears the subscriptions
+// down, and onLayout measures the wrapper frame that feeds the next event's inset. This is the Vue
+// twin of React's useState + useEffect + onLayout. Full parity: behavior 'height'|'position'|
+// 'padding', enabled, keyboardVerticalOffset, contentContainerStyle, onLayout.
+//
+// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard rather than a cast.
+// rawAttrs runs through normalizeVueAttrs (kebab→camel) so a template `:keyboard-vertical-offset`
+// and `:content-container-style` resolve; aria-*/data-* are preserved and forwarded to the host.
+import { defineComponent, h, ref, onMounted, onUnmounted } from '@vue/runtime-core';
+import { Keyboard, KEYBOARD_EVENT, dlog, } from '@symbiote-native/engine';
+import { computeInset, readKeyboardFrame, readLayoutFrame, resolveKeyboardAvoidingLayout, resolveAccessibilityProps, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+import { normalizeVueAttrs } from '../utils/normalize-attrs';
+// A style prop is an object (a style record) or an array of them; numbers/strings/null degrade
+// to undefined (the engine flattens what it gets). A runtime guard, not a cast.
+function isStyleProp(value) {
+    return typeof value === 'object' && value !== null;
+}
+function asBehavior(value) {
+    return value === 'height' || value === 'position' || value === 'padding' ? value : undefined;
+}
+// The prop/handler keys the lifecycle consumes itself; everything else (accessibility, testID,
+// aria-*/data-*) forwards onto the wrapper host node.
+const HANDLED_ATTRS = [
+    'behavior',
+    'enabled',
+    'keyboardVerticalOffset',
+    'contentContainerStyle',
+    'style',
+    'onLayout',
+];
+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 KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
+    // The inset is a number (plain data), so a plain ref is correct; no engine node is held here
+    // (onLayout delivers the frame, so no imperative measure / host-node capture is needed).
+    const inset = ref(0);
+    // Mutable, not reactive: changing the measured frame alone shouldn't re-render; it feeds the
+    // next keyboard event's inset math (React's frameRef / initialHeightRef).
+    let frame;
+    let initialHeight;
+    const verticalOffset = () => typeof rawAttrs.keyboardVerticalOffset === 'number'
+        ? rawAttrs.keyboardVerticalOffset
+        : DEFAULT_VERTICAL_OFFSET;
+    const onShow = (payload) => {
+        const keyboard = readKeyboardFrame(payload);
+        const next = computeInset(frame, keyboard, verticalOffset());
+        dlog(`KeyboardAvoidingView show -> inset ${next}`);
+        inset.value = next;
+    };
+    const onHide = () => {
+        dlog('KeyboardAvoidingView hide -> inset 0');
+        inset.value = 0;
+    };
+    let subscriptions = [];
+    onMounted(() => {
+        subscriptions = [
+            Keyboard.addListener(KEYBOARD_EVENT.didShow, onShow),
+            Keyboard.addListener(KEYBOARD_EVENT.didChangeFrame, onShow),
+            Keyboard.addListener(KEYBOARD_EVENT.didHide, onHide),
+        ];
+    });
+    onUnmounted(() => {
+        for (const subscription of subscriptions)
+            subscription.remove();
+        subscriptions = [];
+    });
+    const handleLayout = (event) => {
+        const measured = readLayoutFrame(event.nativeEvent.layout);
+        if (measured !== undefined) {
+            frame = measured;
+            if (initialHeight === undefined)
+                initialHeight = measured.height;
+        }
+        emit('layout', event);
+    };
+    return () => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const behavior = asBehavior(attrs.behavior);
+        // RN gates every inset on `enabled ?? true`; only an explicit `false` disables.
+        const isEnabled = attrs.enabled !== false;
+        const effectiveInset = isEnabled ? inset.value : 0;
+        const layout = resolveKeyboardAvoidingLayout({
+            behavior,
+            effectiveInset,
+            initialHeight,
+            style: isStyleProp(attrs.style) ? attrs.style : undefined,
+            contentContainerStyle: isStyleProp(attrs.contentContainerStyle)
+                ? attrs.contentContainerStyle
+                : undefined,
+        });
+        const childNodes = slots.default !== undefined ? slots.default() : undefined;
+        const wrapperProps = {
+            ...resolveAccessibilityProps(forwardAttrs(attrs)),
+            style: layout.wrapperStyle,
+            onLayout: handleLayout,
+        };
+        // 'nested' ('position') pushes the children in an inner view by `bottom: inset`; the wrapper
+        // modes adjust the single wrapper directly.
+        if (layout.kind === 'nested') {
+            return h('symbiote-view', wrapperProps, [
+                h('symbiote-view', { style: layout.innerStyle }, childNodes),
+            ]);
+        }
+        return h('symbiote-view', wrapperProps, childNodes);
+    };
+}, {
+    name: 'KeyboardAvoidingView',
+    inheritAttrs: false,
+    emits: {
+        layout: (_event) => true,
+    },
+});

package/build/components/modal.d.ts

@@ -0,0 +1,29 @@
+import { type IAccessibilityProps, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalOrientationChangeEvent, type IModalPresentationStyle } from '@symbiote-native/components';
+import { type IClassNameValue, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+export type { IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from '@symbiote-native/components';
+export interface IModalProps extends IAccessibilityProps, IAriaProps {
+    visible?: boolean;
+    transparent?: boolean;
+    backdropColor?: string;
+    animationType?: IModalAnimationType;
+    presentationStyle?: IModalPresentationStyle;
+    supportedOrientations?: ReadonlyArray<IModalOrientation>;
+    hardwareAccelerated?: boolean;
+    statusBarTranslucent?: boolean;
+    navigationBarTranslucent?: boolean;
+    allowSwipeDismissal?: boolean;
+    style?: IStyleProp<IViewStyle>;
+    class?: IClassNameValue;
+}
+export type IModalEmits = {
+    show: () => boolean;
+    dismiss: () => boolean;
+    requestClose: () => boolean;
+    orientationChange: (event: IModalOrientationChangeEvent) => boolean;
+};
+export declare const Modal: import("vue").DefineSetupFnComponent<IModalProps, IModalEmits, {}, IModalProps & {
+    onShow?: (() => any) | undefined;
+    onDismiss?: (() => any) | undefined;
+    onRequestClose?: (() => any) | undefined;
+    onOrientationChange?: ((event: IModalOrientationChangeEvent) => any) | undefined;
+}, import("vue").PublicProps>;

package/build/components/modal.js

@@ -0,0 +1,134 @@
+// Modal: the Vue lifecycle half. RCTModalHostView is an ordinary Fabric host node committing
+// through the same childSet as the rest of the tree (no second JS surface). The style math (the
+// backdrop override, the container/host styles, the presentationStyle default), the visible gate,
+// and the iOS keep-alive reducer all live framework-agnostic in @symbiote-native/components and are shared
+// verbatim with React; here Vue supplies only the lifecycle: a ref over the keep-alive state +
+// a POST-flush watch that drives the visible→hidden transition AFTER render (so one keep-alive
+// frame survives, the Vue twin of React's useEffect-after-render), and the Descriptor bridge,
+// nesting the slot children UNDER the container View.
+//
+// Inputs arrive as attrs (untyped), each narrowed with a runtime guard rather than a cast. The
+// events (onShow/onDismiss/onRequestClose/onOrientationChange) are real ViewConfig DirectEvents,
+// so, unlike Switch's pure-JS onValueChange, they forward to the host raw via passthrough.
+import { defineComponent, h, ref, watch } from '@vue/runtime-core';
+import { createInitialModalState, modalReducer, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
+import { dlog, } from '@symbiote-native/engine';
+import { normalizeVueAttrs } from '../utils/normalize-attrs';
+function asBoolean(value) {
+    return typeof value === 'boolean' ? value : undefined;
+}
+function asString(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+function asAnimationType(value) {
+    return value === 'none' || value === 'slide' || value === 'fade' ? value : undefined;
+}
+function asPresentationStyle(value) {
+    return value === 'fullScreen' ||
+        value === 'pageSheet' ||
+        value === 'formSheet' ||
+        value === 'overFullScreen'
+        ? value
+        : undefined;
+}
+const ORIENTATIONS = [
+    'portrait',
+    'portrait-upside-down',
+    'landscape',
+    'landscape-left',
+    'landscape-right',
+];
+function isOrientation(value) {
+    // .includes() types its arg as IModalOrientation, so a bare string won't pass; .some keeps the
+    // ORIENTATIONS list as the single source of truth without an `as` cast.
+    return typeof value === 'string' && ORIENTATIONS.some(orientation => orientation === value);
+}
+function asSupportedOrientations(value) {
+    if (!Array.isArray(value))
+        return undefined;
+    return value.every(isOrientation) ? value : undefined;
+}
+function isStyleProp(value) {
+    return typeof value === 'object' && value !== null;
+}
+// The typed fields the render consumes and re-emits onto the host; everything else
+// (accessibility, testID, raw native passthrough) forwards via passthrough.
+const HANDLED_ATTRS = [
+    'visible',
+    'transparent',
+    'backdropColor',
+    'animationType',
+    'presentationStyle',
+    'supportedOrientations',
+    'hardwareAccelerated',
+    'statusBarTranslucent',
+    'navigationBarTranslucent',
+    'allowSwipeDismissal',
+    'style',
+    'class',
+];
+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 Modal = defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
+    const state = ref(createInitialModalState(rawAttrs.visible === true));
+    // POST-flush so the transition fires AFTER the render that used the OLD state: on visible→hidden
+    // the node renders once more (state.isRendered still true → the keep-alive frame), then this
+    // drops it and the next render unmounts. flush:'pre' would unmount immediately, killing the
+    // keep-alive. The reducer is identity-stable, so a no-op transition triggers no extra render.
+    watch(() => rawAttrs.visible === true, isVisible => {
+        state.value = modalReducer(state.value, isVisible ? { type: 'show' } : { type: 'hide' });
+    }, { flush: 'post' });
+    return () => {
+        const isVisible = rawAttrs.visible === true;
+        if (!shouldRenderModal(isVisible, state.value)) {
+            dlog('Modal hidden -> no node committed');
+            return null;
+        }
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const root = renderModal({
+            visible: asBoolean(attrs.visible),
+            transparent: asBoolean(attrs.transparent),
+            backdropColor: asString(attrs.backdropColor),
+            animationType: asAnimationType(attrs.animationType),
+            presentationStyle: asPresentationStyle(attrs.presentationStyle),
+            supportedOrientations: asSupportedOrientations(attrs.supportedOrientations),
+            hardwareAccelerated: asBoolean(attrs.hardwareAccelerated),
+            statusBarTranslucent: asBoolean(attrs.statusBarTranslucent),
+            navigationBarTranslucent: asBoolean(attrs.navigationBarTranslucent),
+            allowSwipeDismissal: asBoolean(attrs.allowSwipeDismissal),
+            style: isStyleProp(attrs.style) ? attrs.style : undefined,
+            passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
+        });
+        // root = symbiote-modal > [container]; the slot children nest UNDER the container View, never
+        // as a direct sibling of the host (RN's modal content layout).
+        const [container] = root.children;
+        if (typeof container === 'string')
+            return null;
+        const slotChildren = slots.default !== undefined ? slots.default() : [];
+        return h(root.type, {
+            ...root.props,
+            key: root.key,
+            onShow: () => emit('show'),
+            onDismiss: () => emit('dismiss'),
+            onRequestClose: () => emit('requestClose'),
+            onOrientationChange: (event) => emit('orientationChange', event),
+        }, [
+            h(container.type, { ...container.props, key: container.key, class: attrs.class }, slotChildren),
+        ]);
+    };
+}, {
+    name: 'Modal',
+    inheritAttrs: false,
+    emits: {
+        show: () => true,
+        dismiss: () => true,
+        requestClose: () => true,
+        orientationChange: (_event) => true,
+    },
+});

package/build/components/pressable.d.ts

@@ -0,0 +1,58 @@
+import { type EmitFn, type VNode } from '@vue/runtime-core';
+import { type IPressState, type IRectOffset, type IPressableAndroidRippleConfig, type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import { type IClassNameValue, type ISymbioteEvent, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+export type { IPressState, IPressableAndroidRippleConfig } from '@symbiote-native/components';
+export type IPressableEmits = {
+    press: (event: ISymbioteEvent) => boolean;
+    pressIn: (event: ISymbioteEvent) => boolean;
+    pressOut: (event: ISymbioteEvent) => boolean;
+    pressMove: (event: ISymbioteEvent) => boolean;
+    longPress: (event: ISymbioteEvent) => boolean;
+    hoverIn: (event: ISymbioteEvent) => boolean;
+    hoverOut: (event: ISymbioteEvent) => boolean;
+};
+export declare const PRESSABLE_EMITS: {
+    press: (_event: ISymbioteEvent) => boolean;
+    pressIn: (_event: ISymbioteEvent) => boolean;
+    pressOut: (_event: ISymbioteEvent) => boolean;
+    pressMove: (_event: ISymbioteEvent) => boolean;
+    longPress: (_event: ISymbioteEvent) => boolean;
+    hoverIn: (_event: ISymbioteEvent) => boolean;
+    hoverOut: (_event: ISymbioteEvent) => boolean;
+};
+export declare function emitPressableEvents(emit: EmitFn<IPressableEmits>): Record<string, (event: ISymbioteEvent) => void>;
+export interface IPressableProps extends IAccessibilityProps, IAriaProps {
+    delayLongPress?: number;
+    disabled?: boolean;
+    cancelable?: boolean;
+    hitSlop?: IRectOffset;
+    pressRetentionOffset?: IRectOffset;
+    unstable_pressDelay?: number;
+    android_ripple?: IPressableAndroidRippleConfig;
+    android_disableSound?: boolean;
+    delayHoverIn?: number;
+    delayHoverOut?: number;
+    testID?: string;
+    style?: IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
+    class?: IClassNameValue;
+}
+export type IPressableSlots = {
+    default?: (state: IPressState) => VNode[] | VNode;
+};
+export declare const Pressable: import("vue").DefineSetupFnComponent<IPressableProps, {
+    press: (_event: ISymbioteEvent) => boolean;
+    pressIn: (_event: ISymbioteEvent) => boolean;
+    pressOut: (_event: ISymbioteEvent) => boolean;
+    pressMove: (_event: ISymbioteEvent) => boolean;
+    longPress: (_event: ISymbioteEvent) => boolean;
+    hoverIn: (_event: ISymbioteEvent) => boolean;
+    hoverOut: (_event: ISymbioteEvent) => boolean;
+}, import("vue").SlotsType<IPressableSlots>, IPressableProps & {
+    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>;

package/build/components/pressable.js

@@ -0,0 +1,221 @@
+// Pressable, the Vue lifecycle half. The press lifecycle (the long-press timer, unstable_press-
+// Delay deferral, the pressRetentionOffset drift test, the suppression flags) lives in
+// @symbiote-native/components/state as a pure machine over a runtime + host; the render decisions (the
+// responder listeners, the disabled→accessibilityState fold, the ripple prop) in
+// @symbiote-native/components/view, both shared verbatim with the React adapter. Here Vue supplies the
+// reactivity: a `ref` holds `pressed`, a setup-scope object holds the press runtime, a function
+// ref grabs the responder View's host node, and the machine measures through it. This is the Vue
+// twin of the React adapter's useState + useRef(runtime) + useRef(viewRef).
+//
+// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard rather than a cast.
+// The user's onPress / onPressIn / … are consumed by the machine and MUST be stripped from the
+// forwarded attrs (they are pure-JS callbacks; the machine's SYNTHESIZED handlers go on the View,
+// where routeProp turns press/pressIn/pressOut + the responder events into listeners). Children
+// arrive as a (scoped) default slot so `v-slot="{ pressed }"` mirrors React's children-as-function.
+import { defineComponent, h, ref, shallowRef } from '@vue/runtime-core';
+import { createPressHandlers, createPressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, resolveAccessibilityProps, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
+import { measure, isSymbioteNode, } from '@symbiote-native/engine';
+import { View } from '../components';
+import { normalizeVueAttrs } from '../utils/normalize-attrs';
+// The emits-options validator for the full press surface. Reused verbatim as the `emits` of every
+// Touchable* wrapper (they expose the same events), so the runtime list lives in exactly one place.
+export const PRESSABLE_EMITS = {
+    press: (_event) => true,
+    pressIn: (_event) => true,
+    pressOut: (_event) => true,
+    pressMove: (_event) => true,
+    longPress: (_event) => true,
+    hoverIn: (_event) => true,
+    hoverOut: (_event) => true,
+};
+// Bridge the whole press surface onto a child Pressable: each host onX callback re-emits the
+// matching event on the wrapper. Every Touchable* wraps Pressable, so spread this onto the child's
+// props. A wrapper that intercepts an event for its own state (e.g. TouchableOpacity's opacity
+// animation on press-in/out) overrides that one key AFTER the spread.
+export function emitPressableEvents(emit) {
+    return {
+        onPress: event => emit('press', event),
+        onPressIn: event => emit('pressIn', event),
+        onPressOut: event => emit('pressOut', event),
+        onPressMove: event => emit('pressMove', event),
+        onLongPress: event => emit('longPress', event),
+        onHoverIn: event => emit('hoverIn', event),
+        onHoverOut: event => emit('hoverOut', event),
+    };
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isStyleFn(value) {
+    return typeof value === 'function';
+}
+function numberOr(value, fallback) {
+    return typeof value === 'number' ? value : fallback;
+}
+// A scalar offset, or the per-edge object; anything else is dropped (the machine reads undefined
+// as "no offset" → RN's defaults).
+function asRectOffset(value) {
+    if (typeof value === 'number')
+        return value;
+    if (!isRecord(value))
+        return undefined;
+    const rect = {};
+    if (typeof value.top === 'number')
+        rect.top = value.top;
+    if (typeof value.left === 'number')
+        rect.left = value.left;
+    if (typeof value.bottom === 'number')
+        rect.bottom = value.bottom;
+    if (typeof value.right === 'number')
+        rect.right = value.right;
+    return rect;
+}
+// android_ripple arrives untyped; keep only the fields the shared rippleProps reads.
+function asRippleConfig(value) {
+    if (!isRecord(value))
+        return undefined;
+    const config = {};
+    if (typeof value.color === 'string')
+        config.color = value.color;
+    if (typeof value.borderless === 'boolean')
+        config.borderless = value.borderless;
+    if (typeof value.radius === 'number')
+        config.radius = value.radius;
+    if (typeof value.foreground === 'boolean')
+        config.foreground = value.foreground;
+    return config;
+}
+// The user's accessibilityState, narrowed to the known fields (the disabled merge happens after).
+function asAccessibilityState(value) {
+    if (!isRecord(value))
+        return undefined;
+    const state = {};
+    if (typeof value.disabled === 'boolean')
+        state.disabled = value.disabled;
+    if (typeof value.selected === 'boolean')
+        state.selected = value.selected;
+    if (value.checked === 'mixed' || typeof value.checked === 'boolean')
+        state.checked = value.checked;
+    if (typeof value.busy === 'boolean')
+        state.busy = value.busy;
+    if (typeof value.expanded === 'boolean')
+        state.expanded = value.expanded;
+    return state;
+}
+function resolveStyle(value, state) {
+    if (isStyleFn(value))
+        return value(state);
+    return value;
+}
+// The prop/handler keys the lifecycle consumes itself; everything else (aria/accessibility/
+// testID/nativeID/native props) forwards onto the View. The user press callbacks are pure JS and
+// must never reach the host; the machine's synthesized handlers go on via buildPressableListeners.
+const HANDLED_ATTRS = [
+    'onPress',
+    'onPressIn',
+    'onPressOut',
+    'onPressMove',
+    'onLongPress',
+    'delayLongPress',
+    'disabled',
+    'cancelable',
+    'pressRetentionOffset',
+    'unstable_pressDelay',
+    'android_ripple',
+    'android_disableSound',
+    'onHoverIn',
+    'onHoverOut',
+    'delayHoverIn',
+    'delayHoverOut',
+    'style',
+    'accessibilityState',
+];
+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 Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit }) => {
+    const pressed = ref(false);
+    // The mutable press runtime (timers, suppression flags, measured region). A plain setup-scope
+    // object, never a ref: it is mutated by the machine, never reactively read.
+    const runtime = createPressRuntime();
+    // shallowRef, NOT ref: the engine node is held by IDENTITY so measure() hits the engine's
+    // WeakMap mirror (a plain ref would wrap it in a reactive Proxy → mirror miss → measure no-op).
+    const nodeRef = shallowRef(null);
+    const setNodeRef = (el) => {
+        nodeRef.value = isSymbioteNode(el) ? el : null;
+    };
+    // The lifecycle seam the machine fills: flip the reactive `pressed`, and expose the responder
+    // View's raw frame-measure (or undefined before the node commits → radius fallback).
+    const host = {
+        setPressed: next => {
+            pressed.value = next;
+        },
+        getMeasureFn: () => {
+            const node = nodeRef.value;
+            if (node === null)
+                return undefined;
+            return callback => measure(node, callback);
+        },
+        schedule: (callback, ms) => {
+            const id = setTimeout(callback, ms);
+            return () => clearTimeout(id);
+        },
+    };
+    return () => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        const disabled = attrs.disabled === true ? true : undefined;
+        const cancelable = typeof attrs.cancelable === 'boolean' ? attrs.cancelable : undefined;
+        const config = {
+            onPress: event => emit('press', event),
+            onPressIn: event => emit('pressIn', event),
+            onPressOut: event => emit('pressOut', event),
+            onPressMove: event => emit('pressMove', event),
+            onLongPress: event => emit('longPress', event),
+            delayLongPress: numberOr(attrs.delayLongPress, DEFAULT_DELAY_LONG_PRESS_MS),
+            unstable_pressDelay: numberOr(attrs.unstable_pressDelay, 0),
+            hitSlop: asRectOffset(attrs.hitSlop),
+            pressRetentionOffset: asRectOffset(attrs.pressRetentionOffset),
+        };
+        const handlers = createPressHandlers(config, runtime, host);
+        noteHoverNoop(undefined, undefined);
+        const state = { pressed: pressed.value };
+        // Fold the disabled state into the user's accessibilityState, then fold aria/role over the
+        // forwarded attrs (the Vue View is a bare host primitive, so Pressable folds; React's View
+        // folds for it). resolveAccessibilityProps merges aria into the accessibilityState we set.
+        const forwarded = forwardAttrs(attrs);
+        forwarded.accessibilityState = resolveDisabledAccessibilityState(asAccessibilityState(attrs.accessibilityState), disabled);
+        const folded = resolveAccessibilityProps(forwarded);
+        const viewProps = {
+            ...folded,
+            ref: setNodeRef,
+            style: resolveStyle(attrs.style, state),
+        };
+        if (typeof attrs.android_disableSound === 'boolean')
+            viewProps.android_disableSound = attrs.android_disableSound;
+        Object.assign(viewProps, buildPressableListeners(handlers, { disabled, cancelable }));
+        // Children come from the (scoped) default slot, receiving the press state so a render-prop
+        // child (`v-slot="{ pressed }"`) mirrors React's children-as-function.
+        const content = slots.default !== undefined ? slots.default(state) : [];
+        // android_ripple rides a dedicated inner View; on iOS the prop is undefined, so the child
+        // renders unwrapped, no extra node. Mirrors the React Pressable + touchable-native-feedback.
+        const ripple = isRecord(attrs.android_ripple)
+            ? rippleProps(asRippleConfig(attrs.android_ripple) ?? {})
+            : undefined;
+        const inner = ripple !== undefined ? [h(View, ripple, () => content)] : content;
+        // Children go to the host View as a FUNCTION slot, never a raw array: View is a
+        // functional component, and an array child makes Vue normalize it to a default
+        // slot with a dev warn ("Prefer function slots"). Benign under SFC, but in JSX the
+        // warn's trace formats the __self/__source dev props (native HostObjects) and that
+        // read throws, unwinding the whole mount → blank screen. A function slot skips it.
+        return h(View, viewProps, () => inner);
+    };
+}, {
+    name: 'Pressable',
+    inheritAttrs: false,
+    emits: PRESSABLE_EMITS,
+});

package/build/components/refresh-control.d.ts

@@ -0,0 +1,20 @@
+import { type IClassNameValue } from '@symbiote-native/engine';
+import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
+    refreshing: boolean;
+    tintColor?: string;
+    title?: string;
+    titleColor?: string;
+    progressViewOffset?: number;
+    colors?: readonly string[];
+    progressBackgroundColor?: string;
+    size?: 'default' | 'large';
+    enabled?: boolean;
+    class?: IClassNameValue;
+}
+export type IRefreshControlEmits = {
+    refresh: () => boolean;
+};
+export declare const RefreshControl: import("vue").DefineSetupFnComponent<IRefreshControlProps, IRefreshControlEmits, {}, IRefreshControlProps & {
+    onRefresh?: (() => any) | undefined;
+}, import("vue").PublicProps>;

package/build/components/refresh-control.js

@@ -0,0 +1,53 @@
+// RefreshControl, the Vue lifecycle half (ADR 0024 Phase 2). On iOS this is the PullToRefreshView
+// Fabric node that lives INSIDE a ScrollView (a sibling before the content container); on Android it
+// is AndroidSwipeRefreshLayout and WRAPS the scroll view (a ScrollView there hosts one child). The
+// Vue twin of the React adapter's RefreshControl. Vue takes the wrapped child via its DEFAULT SLOT
+// (the seam the Android scroll-view wrap re-invokes to host the scroll view inside it; iOS leaves the
+// slot empty), folds aria/role through the shared resolveAccessibilityProps, and forwards the native
+// props onto the symbiote-refresh-control host node.
+//
+// `refreshing` is a controlled prop: the parent owns it and pushes it down each commit; native
+// reports the gesture via the direct `topRefresh` event, which the engine routes to the host
+// onRefresh prop; the adapter turns that into the typed Vue `refresh` emit. Inputs arrive as attrs
+// (untyped), so the forwarded bag is BUILT at the a11y-intersection type (a genuine narrowing, not
+// a cast) before the aria fold.
+import { defineComponent, h } from '@vue/runtime-core';
+import { dlog } from '@symbiote-native/engine';
+import { resolveAccessibilityProps, } from '@symbiote-native/components';
+import { normalizeVueAttrs } from '../utils/normalize-attrs';
+// Copy every non-consumed attr into a bag typed as the a11y intersection (the accumulator is BUILT
+// at that type, a real narrowing, not a cast), then fold aria-*/role into the canonical
+// accessibility* props. Children cross via slots, never attrs. When the Android wrap re-invokes
+// this component, the injected `style` (the outer/layout half) rides through too.
+function foldAttrs(attrs) {
+    const bag = {};
+    for (const key of Object.keys(attrs)) {
+        if (key !== 'onRefresh')
+            bag[key] = attrs[key];
+    }
+    return resolveAccessibilityProps(bag);
+}
+export const RefreshControl = defineComponent((_props, { attrs: rawAttrs, emit, slots }) => {
+    return () => {
+        const nativeProps = foldAttrs(normalizeVueAttrs(rawAttrs));
+        dlog('RefreshControl -> PullToRefreshView');
+        dlog(`RefreshControl refreshing=${String(nativeProps.refreshing)}`);
+        if (nativeProps.enabled !== undefined)
+            dlog(`RefreshControl enabled=${String(nativeProps.enabled)} (Android-only)`);
+        dlog('RefreshControl refresh emit wired');
+        // The default slot is the seam: empty on iOS (childless sibling), but the Android scroll-view
+        // wrap re-invokes this component with the scroll view as its default slot, so it hosts it.
+        return h('symbiote-refresh-control', {
+            ...nativeProps,
+            onRefresh: () => {
+                emit('refresh');
+            },
+        }, slots.default !== undefined ? slots.default() : undefined);
+    };
+}, {
+    name: 'RefreshControl',
+    inheritAttrs: false,
+    emits: {
+        refresh: () => true,
+    },
+});

package/build/components/safe-area-view.d.ts

@@ -0,0 +1,8 @@
+import { type IClassNameValue } from '@symbiote-native/engine';
+import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+export type ISafeAreaViewProps = IAccessibilityProps & IAriaProps & {
+    class?: IClassNameValue;
+};
+export declare const SafeAreaView: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;