@symbiote-native/vue 0.1.0

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

@@ -0,0 +1,96 @@
+import { type VNode } from '@vue/runtime-core';
+import { type ISection, type ISeparatorProps, type ISeparators, type IVirtualizedSectionListHandle } from '@symbiote-native/components';
+import { type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
+export type { ISection } from '@symbiote-native/components';
+export type { IVirtualizedSectionListHandle };
+export interface IVirtualizedSectionListProps<ItemT> {
+    sections: ReadonlyArray<ISection<ItemT>>;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    stickySectionHeadersEnabled?: boolean;
+    extraData?: unknown;
+    onEndReachedThreshold?: number;
+    onStartReachedThreshold?: number;
+    refreshing?: boolean | null;
+    progressViewOffset?: number;
+    initialNumToRender?: number;
+    initialScrollIndex?: number;
+    maxToRenderPerBatch?: number;
+    updateCellsBatchingPeriod?: number;
+    windowSize?: number;
+    inverted?: boolean;
+    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 IVirtualizedSectionListSlots<ItemT> = {
+    item: (info: {
+        item: ItemT;
+        index: number;
+        section: ISection<ItemT>;
+        separators: ISeparators;
+    }) => VNode[] | VNode;
+    sectionHeader?: (info: {
+        section: ISection<ItemT>;
+    }) => VNode[] | VNode;
+    sectionFooter?: (info: {
+        section: ISection<ItemT>;
+    }) => VNode[] | VNode;
+    sectionSeparator?: () => VNode[] | VNode;
+    separator?: (props: ISeparatorProps<ItemT>) => VNode[] | VNode;
+    header?: () => VNode[] | VNode;
+    footer?: () => VNode[] | VNode;
+    empty?: () => VNode[] | VNode;
+};
+export type IVirtualizedSectionListEmits = {
+    endReached: (info: {
+        distanceFromEnd: number;
+    }) => void;
+    startReached: (info: {
+        distanceFromStart: number;
+    }) => void;
+    refresh: () => void;
+};
+export declare const VirtualizedSectionList: new <ItemT>(props: (IVirtualizedSectionListProps<ItemT> & ({} | {
+    onRefresh?: (() => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+})) & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<IVirtualizedSectionListProps<ItemT> & ({} | {
+    onRefresh?: (() => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} | IVirtualizedSectionListEmits, import("vue").PublicProps, {}, false, {}, import("vue").SlotsType<IVirtualizedSectionListSlots<ItemT>>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, (IVirtualizedSectionListProps<ItemT> & {}) | (IVirtualizedSectionListProps<ItemT> & {
+    onRefresh?: (() => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+}), {}, {}, {}, {}, {}>;

package/build/components/virtualized-section-list/index.js

@@ -0,0 +1,160 @@
+// VirtualizedSectionList, the Vue wrapper that flattens sections into one virtualized stream
+// over VirtualizedList. Each section contributes a header row, its item rows, then a footer row
+// (RN counts 2 per section); the flattened tagged sequence is fed to VirtualizedList as one list,
+// so headers/items/footers are all windowed by the same machinery. The flattening, entry keying,
+// separator-item unwrap, and scrollToLocation mapping are shared from @symbiote-native/components; this
+// file wires Vue lifecycle (typed-prop inputs + handle re-expose + the per-entry render dispatch).
+// The Vue twin of the React adapter's VirtualizedSectionList.
+//
+// Typed-emits generic component (mirrors FlatList / VirtualizedList): a GENERIC setup function
+// `<ItemT,>(props: IVirtualizedSectionListProps<ItemT>, ctx: ICtx<IVirtualizedSectionListEmits>)`
+// so the section inputs (sections/renderItem/renderSectionHeader/…) infer ItemT at the call site.
+// For that, those inputs are read from typed `props` (declared in the runtime `props` array); the
+// VirtualizedList passthrough tail (refreshing/style/raw scroll/…) rides through `$attrs` onto the
+// inner list. The three adapter-synthesized events (endReached/startReached/refresh — the exact set
+// React's section list exposes) stay GATED on listener presence: each emit bridge is wired ONLY
+// when the consumer listens (read off the instance vnode props), so the inner VirtualizedList keeps
+// building RefreshControl / computing edge-reached strictly on demand.
+import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
+import { flattenSections, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
+import { Platform, dlog, } from '@symbiote-native/engine';
+import { VirtualizedList } from '../virtualized-list';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+// VirtualizedList is a generic component (generic construct signature), which h()'s overloads can't
+// resolve. Drive it through a loose functional-component handle (generic-component h() limitation).
+const VirtualizedListHost = VirtualizedList;
+// The typed inputs VSL reads off `props`; everything else (the VirtualizedList passthrough tail and
+// raw scroll) falls through $attrs onto the inner list. Listed for the runtime `props` declaration
+// (keyof can't derive it: the index signature widens keyof to `string`). The three emit events are
+// deliberately absent (declared as emits below).
+const PROP_KEYS = ['sections', 'keyExtractor', 'stickySectionHeadersEnabled'];
+const EMIT_KEYS = ['endReached', 'startReached', 'refresh'];
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isVirtualizedListHandle(value) {
+    return isRecord(value) && typeof value.scrollToOffset === 'function';
+}
+function buildSectionDelegate(getInner, getHeaderIndices) {
+    return {
+        scrollToLocation: (params) => {
+            const flatIndex = scrollLocationToFlatIndex(getHeaderIndices(), params.sectionIndex, params.itemIndex);
+            if (flatIndex === undefined) {
+                dlog(`Vue VirtualizedSectionList scrollToLocation: section ${params.sectionIndex} out of range`);
+                return;
+            }
+            dlog(`Vue VirtualizedSectionList scrollToLocation section=${params.sectionIndex} ` +
+                `item=${params.itemIndex} -> flat ${flatIndex}`);
+            getInner()?.scrollToIndex({
+                index: flatIndex,
+                viewOffset: params.viewOffset,
+                viewPosition: params.viewPosition,
+                animated: params.animated,
+            });
+        },
+        flashScrollIndicators: () => getInner()?.flashScrollIndicators(),
+        getNativeScrollRef: () => getInner()?.getNativeScrollRef() ?? null,
+        getScrollableNode: () => getInner()?.getScrollableNode() ?? null,
+        getScrollResponder: () => getInner()?.getScrollResponder() ?? null,
+        getScrollNode: () => getInner()?.getScrollNode() ?? null,
+        recordInteraction: () => getInner()?.recordInteraction(),
+    };
+}
+export const VirtualizedSectionList = defineComponent((props, { attrs, expose, emit, slots, }) => {
+    const inner = shallowRef(null);
+    const setInner = (instance) => {
+        inner.value = isVirtualizedListHandle(instance) ? instance : null;
+    };
+    // headerIndices change each render (sections may change); the delegate reads them lazily.
+    let headerIndices = [];
+    expose(buildSectionDelegate(() => inner.value, () => headerIndices));
+    // The three section-list events are emits, so Vue strips their onX listeners from $attrs. Detect
+    // listener presence off the instance's own vnode props (what the parent passed), exactly like
+    // FlatList/VirtualizedList, so an emit bridge is wired ONLY when the consumer actually listens
+    // (preserving the inner list's RefreshControl / edge-reached gating).
+    const instance = getCurrentInstance();
+    const listens = (onName) => {
+        const vnodeProps = instance?.vnode.props;
+        return vnodeProps != null && typeof vnodeProps[onName] === 'function';
+    };
+    return () => {
+        const sections = Array.isArray(props.sections)
+            ? props.sections
+            : [];
+        const keyExtractor = props.keyExtractor;
+        // The passthrough tail: declared props + declared emits' onX are already removed from $attrs,
+        // so what's left is the VirtualizedList passthrough (kebab-folded for the inner list).
+        const forwarded = normalizeVueAttrs(attrs);
+        const { entries, headerIndices: indices } = flattenSections(sections, slots.sectionSeparator !== undefined);
+        headerIndices = indices;
+        // RN sticks section headers by default only on iOS; Android does not unless asked.
+        const stickyDefault = Platform.OS === 'ios';
+        const stickyEnabled = props.stickySectionHeadersEnabled ?? stickyDefault;
+        const stickyHeaderIndices = stickyEnabled ? indices : undefined;
+        dlog(`Vue VirtualizedSectionList: ${sections.length} sections flattened to ${entries.length} entries`);
+        // The inner list's #item slot: dispatch each flattened entry to the matching consumer slot,
+        // returning its VNode[] (empty when the consumer left that slot off).
+        const renderEntry = (info) => {
+            const entry = info.item;
+            if (entry.kind === 'header') {
+                return slots.sectionHeader ? slots.sectionHeader({ section: entry.section }) : [];
+            }
+            if (entry.kind === 'footer') {
+                return slots.sectionFooter ? slots.sectionFooter({ section: entry.section }) : [];
+            }
+            if (entry.kind === 'section-separator') {
+                return slots.sectionSeparator ? slots.sectionSeparator() : [];
+            }
+            return slots.item
+                ? slots.item({
+                    item: entry.item,
+                    index: entry.itemIndex,
+                    section: entry.section,
+                    separators: info.separators,
+                })
+                : [];
+        };
+        // The user's #separator is typed on ItemT, but the inner stream is the entry wrapper; unwrap
+        // each entry back to its ItemT (shared unwrapEntryItem) before the inner list invokes it.
+        const entrySeparatorSlot = slots.separator === undefined
+            ? undefined
+            : (entryProps) => slots.separator({
+                ...entryProps,
+                leadingItem: unwrapEntryItem(entryProps.leadingItem),
+                trailingItem: unwrapEntryItem(entryProps.trailingItem),
+            });
+        const entryKeyExtractor = (entry, index) => sectionEntryKey(entry, index, keyExtractor);
+        // The three synthesized events become inner-VL handlers ONLY when listened, so the inner list
+        // keeps gating (no parasitic RefreshControl / edge-reached work for an unlistened event).
+        const endReached = listens('onEndReached')
+            ? (eventInfo) => emit('endReached', eventInfo)
+            : undefined;
+        const startReached = listens('onStartReached')
+            ? (eventInfo) => emit('startReached', eventInfo)
+            : undefined;
+        const refresh = listens('onRefresh') ? () => emit('refresh') : undefined;
+        return h(VirtualizedListHost, {
+            ...forwarded,
+            ref: setInner,
+            data: entries,
+            getItem: (_source, index) => entries[index],
+            getItemCount: () => entries.length,
+            keyExtractor: entryKeyExtractor,
+            stickyHeaderIndices,
+            onEndReached: endReached,
+            onStartReached: startReached,
+            onRefresh: refresh,
+        }, {
+            item: renderEntry,
+            separator: entrySeparatorSlot,
+            header: slots.header,
+            footer: slots.footer,
+            empty: slots.empty,
+        });
+    };
+}, {
+    name: 'VirtualizedSectionList',
+    inheritAttrs: false,
+    props: PROP_KEYS,
+    emits: EMIT_KEYS,
+});

package/build/components.d.ts

@@ -0,0 +1,51 @@
+import { type FunctionalComponent, type VNodeRef } from '@vue/runtime-core';
+import type { ISymbioteEvent, IClassNameValue, IStyleProp, ITextStyle, IViewStyle } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps, IResponderProps } from '@symbiote-native/components';
+export interface IViewProps extends IAccessibilityProps, IAriaProps, IResponderProps {
+    style?: IStyleProp<IViewStyle>;
+    class?: IClassNameValue;
+    onPress?: (event: ISymbioteEvent) => void;
+    onPressIn?: (event: ISymbioteEvent) => void;
+    onPressOut?: (event: ISymbioteEvent) => void;
+    onLayout?: (event: ISymbioteEvent) => void;
+    onFocus?: (event: ISymbioteEvent) => void;
+    onBlur?: (event: ISymbioteEvent) => void;
+    pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
+    hitSlop?: number | {
+        top?: number;
+        left?: number;
+        bottom?: number;
+        right?: number;
+    };
+    id?: string;
+    focusable?: boolean;
+    collapsable?: boolean;
+    removeClippedSubviews?: boolean;
+    renderToHardwareTextureAndroid?: boolean;
+    shouldRasterizeIOS?: boolean;
+    needsOffscreenAlphaCompositing?: boolean;
+    ref?: VNodeRef;
+    key?: string | number | symbol;
+}
+export interface ITextProps extends IAccessibilityProps, IAriaProps {
+    style?: IStyleProp<ITextStyle>;
+    class?: IClassNameValue;
+    onPress?: (event: ISymbioteEvent) => void;
+    onLongPress?: (event: ISymbioteEvent) => void;
+    onPressIn?: (event: ISymbioteEvent) => void;
+    onPressOut?: (event: ISymbioteEvent) => void;
+    onLayout?: (event: ISymbioteEvent) => void;
+    onTextLayout?: (event: ISymbioteEvent) => void;
+    numberOfLines?: number;
+    ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+    selectable?: boolean;
+    adjustsFontSizeToFit?: boolean;
+    minimumFontScale?: number;
+    allowFontScaling?: boolean;
+    maxFontSizeMultiplier?: number | null;
+    selectionColor?: string;
+    ref?: VNodeRef;
+    key?: string | number | symbol;
+}
+export declare const View: FunctionalComponent<IViewProps, {}, any, {}>;
+export declare const Text: FunctionalComponent<ITextProps, {}, any, {}>;

package/build/components.js

@@ -0,0 +1,26 @@
+// Host primitives for app code. Thin FUNCTIONAL components over the intrinsic tags the
+// renderer maps to Fabric: `inheritAttrs: false` + a manual attr spread passes every
+// prop and `@event` (onX) straight through to patchProp -> routeProp. The full prop
+// surface (typed ViewProps/TextProps, a11y folding) arrives with @symbiote-native/components.
+//
+// FUNCTIONAL, not a stateful defineComponent: a functional component has no instance, so
+// a template/function ref on it falls through to its single root host element (the raw
+// SymbioteNode), exactly like React's functional View hands back its host instance. A
+// stateful component's ref would resolve to a useless component proxy, which is why
+// createAnimatedComponent (which captures the host node via that ref) needs the fall-through.
+import { h } from '@vue/runtime-core';
+import { normalizeVueAttrs } from './utils/normalize-attrs';
+function hostComponent(intrinsic, name) {
+    // A functional component's ctx is Omit<SetupContext, 'expose'> (no instance to expose); let the
+    // FunctionalComponent target infer the param types rather than annotate SetupContext.
+    // normalizeVueAttrs folds kebab template props (:accessibility-label) to the RN camelCase contract.
+    const component = (_props, { slots, attrs }) => h(intrinsic, normalizeVueAttrs(attrs), slots.default !== undefined ? slots.default() : undefined);
+    component.displayName = name;
+    component.inheritAttrs = false;
+    return component;
+}
+export const View = hostComponent('symbiote-view', 'View');
+export const Text = hostComponent('symbiote-text', 'Text');
+// Image is NOT a bare host primitive: it needs the shared fold (source/src/srcSet resolution,
+// width/height → style, alt → accessibility) + the Image statics, so it lives in ./image as a
+// functional component over renderImage. View/Text stay bare; they forward attrs verbatim.

package/build/composables/use-color-scheme.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from '@vue/runtime-core';
+import { type IColorSchemeName } from '@symbiote-native/engine';
+export declare function useColorScheme(): Ref<IColorSchemeName | null>;

package/build/composables/use-color-scheme.js

@@ -0,0 +1,24 @@
+// useColorScheme, the Vue twin of React's hook. It subscribes a component to the device
+// color scheme and updates a reactive ref on change, over the now-core Appearance module
+// (@symbiote-native/engine). Idiomatic Vue: returns a Ref the template unwraps, seeded from the
+// current scheme and kept fresh by an Appearance change listener torn down on unmount.
+// React's useColorScheme returns the bare value via useSyncExternalStore; the underlying
+// Appearance module is shared verbatim; only the lifecycle differs.
+import { ref, onMounted, onUnmounted } from '@vue/runtime-core';
+import { Appearance, } from '@symbiote-native/engine';
+export function useColorScheme() {
+    // A plain ref: the value is a string|null, not an engine node, so no shallowRef needed.
+    const colorScheme = ref(Appearance.getColorScheme());
+    let subscription;
+    onMounted(() => {
+        // Re-read on mount in case the scheme changed between setup() and mount.
+        colorScheme.value = Appearance.getColorScheme();
+        subscription = Appearance.addChangeListener(preferences => {
+            colorScheme.value = preferences.colorScheme;
+        });
+    });
+    onUnmounted(() => {
+        subscription?.remove();
+    });
+    return colorScheme;
+}

package/build/composables/use-window-dimensions.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from '@vue/runtime-core';
+import { type IDisplayMetrics } from '@symbiote-native/engine';
+export declare function useWindowDimensions(): Ref<IDisplayMetrics>;

package/build/composables/use-window-dimensions.js

@@ -0,0 +1,34 @@
+// useWindowDimensions, the Vue twin of React's hook, over the now-core Dimensions module
+// (@symbiote-native/engine). It seeds from Dimensions.get('window'), subscribes to 'change', and
+// re-checks once after subscribing to close the gap between the setup-time get and the
+// mount-time listener. Only a real window-metric change updates the ref. React returns the
+// bare value via useState; the underlying Dimensions module is shared verbatim; only the
+// lifecycle differs (returns a Ref the template unwraps).
+import { ref, onMounted, onUnmounted } from '@vue/runtime-core';
+import { Dimensions, } from '@symbiote-native/engine';
+export function useWindowDimensions() {
+    // A plain ref: the value is a metrics record (plain data), not an engine node.
+    const dimensions = ref(Dimensions.get('window'));
+    let subscription;
+    onMounted(() => {
+        const handleChange = (window) => {
+            const current = dimensions.value;
+            if (current.width !== window.width ||
+                current.height !== window.height ||
+                current.scale !== window.scale ||
+                current.fontScale !== window.fontScale) {
+                dimensions.value = window;
+            }
+        };
+        subscription = Dimensions.addEventListener('change', (set) => {
+            handleChange(set.window);
+        });
+        // We may have missed an update between the setup-time `get` and subscribing here;
+        // re-check now. If nothing changed, the equality guard filters the no-op.
+        handleChange(Dimensions.get('window'));
+    });
+    onUnmounted(() => {
+        subscription?.remove();
+    });
+    return dimensions;
+}

package/build/create-tunnel.d.ts

@@ -0,0 +1,9 @@
+import { defineComponent } from 'vue';
+export interface ITunnel {
+    /** Register the default slot's content under the tunnel — mount this anywhere, any surface. */
+    In: ReturnType<typeof defineComponent>;
+    /** Renders everything currently tunneled in, in registration order. Mount this in the
+     *  component that should actually paint the content. */
+    Out: ReturnType<typeof defineComponent>;
+}
+export declare function createTunnel(): ITunnel;

package/build/create-tunnel.js

@@ -0,0 +1,37 @@
+// createTunnel — the Vue twin of the React adapter's create-tunnel.ts (see its header, plus
+// the react-adapter-portal / vue-adapter-directives skills, for the full "why not just
+// extend Teleport across surfaces" rationale). `Out` lives in whichever component should
+// PAINT the content; its own reactive read makes THAT surface's normal render/commit pick it
+// up — no cross-surface reach-in, no rootTag lookup, works whether In and Out share a
+// surface or not.
+//
+// Both In and Out are COMPONENTS, not composables: a composable can't accept template
+// markup (slots only exist on components), so app code writes ordinary <template> —
+// <tunnel.In>…</tunnel.In> / <tunnel.Out /> — exactly like the existing Teleport wrapper.
+// h()/render functions stay inside THIS file; they never leak into app-level SFC script.
+import { defineComponent, onUnmounted, reactive } from 'vue';
+export function createTunnel() {
+    const items = reactive(new Map());
+    let nextId = 0;
+    const In = defineComponent({
+        name: 'TunnelIn',
+        setup(_props, { slots }) {
+            const id = nextId++;
+            onUnmounted(() => items.delete(id));
+            // Runs on every render of In — Vue's own reactivity picks up the Map mutation (the
+            // slot function itself re-reads whatever reactive state it closes over), no manual
+            // notify needed, unlike the React twin's useSyncExternalStore.
+            return () => {
+                items.set(id, slots.default ?? (() => []));
+                return null;
+            };
+        },
+    });
+    const Out = defineComponent({
+        name: 'TunnelOut',
+        setup() {
+            return () => Array.from(items.values()).flatMap(slot => slot());
+        },
+    });
+    return { In, Out };
+}

package/build/descriptor-to-vue.d.ts

@@ -0,0 +1,3 @@
+import { type VNode } from '@vue/runtime-core';
+import type { IDescriptor } from '@symbiote-native/components';
+export declare function descriptorToVue(node: IDescriptor): VNode;

package/build/descriptor-to-vue.js

@@ -0,0 +1,14 @@
+// The descriptor→element bridge for Vue. A render function in @symbiote-native/components returns
+// a framework-agnostic `Descriptor` tree; this maps it onto Vue vnodes via h(). The host
+// vnode (`symbiote-view`, `symbiote-activity-indicator`, …) flows on through the Vue custom
+// renderer → engine → Fabric, exactly like a hand-written h('symbiote-view'). The React
+// twin is `adapters/react/src/descriptor-to-react.ts`.
+import { h } from '@vue/runtime-core';
+export function descriptorToVue(node) {
+    // String type → host element (the Vue renderer's createElement → descriptorFor maps it to
+    // a Fabric name); array children, since these are host elements, not slotted components.
+    return h(node.type, { ...node.props, key: node.key }, node.children.map(toChild));
+}
+function toChild(child) {
+    return typeof child === 'string' ? child : descriptorToVue(child);
+}

package/build/host-instance/index.d.ts

@@ -0,0 +1,2 @@
+export type { IHostInstance } from '@symbiote-native/engine';
+export declare function findNodeHandle(componentOrHandle: unknown): number | null;

package/build/host-instance/index.js

@@ -0,0 +1,34 @@
+// findNodeHandle, the Vue adapter twin of adapters/react/src/host-instance.ts. RN's
+// "ref/instance -> native reactTag" lookup, the seam imperative-interop libraries
+// (reanimated, gesture-handler, react-navigation) reach through. A Vue template/function ref
+// to a symbiote host element falls through to the raw engine SymbioteNode, and the Vue
+// renderer grafts the public-instance API onto it (toPublicInstance in renderer.ts), so the
+// node a ref receives carries measure / setNativeProps / focus exactly like React's
+// getPublicInstance. IHostInstance is therefore that grafted node — re-exported from the
+// engine so React and Vue share one definition.
+//
+// The node -> tag resolution itself belongs to the engine (getNativeTag, keyed on the raw
+// node in the commit mirror); this only adapts the Vue-shaped inputs onto it. Accepts, in
+// RN's idempotent spirit: a bare number (passes through), an engine host node (a ref's
+// .value), a Vue Ref carrying either (unwrapped), or null / undefined (-> null). An
+// uncommitted or unknown input has no tag yet and surfaces as null.
+import { isRef, toRaw } from '@vue/runtime-core';
+import { getNativeTag, isSymbioteNode, dlog } from '@symbiote-native/engine';
+export function findNodeHandle(componentOrHandle) {
+    const candidate = isRef(componentOrHandle) ? componentOrHandle.value : componentOrHandle;
+    if (candidate === null || candidate === undefined)
+        return null;
+    if (typeof candidate === 'number')
+        return candidate;
+    // A plain ref() would have wrapped the node in a reactive Proxy; the engine mirror is
+    // keyed on the RAW node, so recover it before the lookup or getNativeTag misses. See
+    // the vue-adapter-reactivity skill.
+    const node = toRaw(candidate);
+    if (isSymbioteNode(node)) {
+        const tag = getNativeTag(node) ?? null;
+        dlog(`findNodeHandle: component=${node.component} tag=${tag}`);
+        return tag;
+    }
+    dlog('findNodeHandle: input did not resolve to a symbiote host node');
+    return null;
+}

package/build/index.d.ts

@@ -0,0 +1,67 @@
+export { mount, unmount } from './render';
+export { createTunnel, type ITunnel } from './create-tunnel';
+export { View, Text } from './components';
+export type { IAccessibilityProps, IAriaProps, IAccessibilityRole, IRole, IAccessibilityStateValue, IAccessibilityValue, IAccessibilityActionInfo, IResponderProps, } from '@symbiote-native/components';
+export { findNodeHandle } from './host-instance';
+export type { IHostInstance } from './host-instance';
+export { Image, setImageSourceResolver } from './components/image';
+export type { IImageProps, IImageSource, IImageSourceProp, IResizeMode, IImageSize, IImageCacheStatus, } from './components/image';
+export { ActivityIndicator } from './components/activity-indicator';
+export type { IActivityIndicatorProps } from './components/activity-indicator';
+export { Switch } from './components/switch';
+export type { ISwitchProps, ISwitchTrackColor } from './components/switch';
+export { ScrollView } from './components/scroll-view';
+export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle, } from './components/scroll-view';
+export { Pressable } from './components/pressable';
+export type { IPressableProps, IPressableSlots, IPressState, IPressableAndroidRippleConfig, } from './components/pressable';
+export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable';
+export type { ITouchableOpacityProps, ITouchableHighlightProps, ITouchableWithoutFeedbackProps, } from './components/touchable';
+export { TouchableNativeFeedback } from './components/touchable-native-feedback';
+export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, ITouchableNativeFeedbackProps, } from './components/touchable-native-feedback';
+export { Button } from './components/button';
+export type { IButtonProps } from './components/button';
+export { TextInput } from './components/text-input';
+export type { ITextInputProps, ITextInputHandle } from './components/text-input';
+export { VirtualizedList } from './components/virtualized-list';
+export type { IVirtualizedListProps, IVirtualizedListSlots, IVirtualizedListEmits, IVirtualizedListHandle, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, ICellLayout, } from './components/virtualized-list';
+export { FlatList } from './components/flat-list';
+export type { IFlatListProps, IFlatListSlots, IFlatListEmits, IFlatListHandle, } from './components/flat-list';
+export { VirtualizedSectionList } from './components/virtualized-section-list';
+export type { IVirtualizedSectionListProps, IVirtualizedSectionListSlots, IVirtualizedSectionListEmits, IVirtualizedSectionListHandle, } from './components/virtualized-section-list';
+export { SectionList } from './components/section-list';
+export type { ISection, ISectionListProps, ISectionListSlots, ISectionListEmits, ISectionListHandle, } from './components/section-list';
+export { SafeAreaView } from './components/safe-area-view';
+export type { ISafeAreaViewProps } from './components/safe-area-view';
+export { RefreshControl } from './components/refresh-control';
+export type { IRefreshControlProps, IRefreshControlEmits } from './components/refresh-control';
+export { descriptorToVue } from './descriptor-to-vue';
+export { normalizeVueAttrs } from './utils/normalize-attrs';
+export { resolveModelValue, emitModelUpdate } from './utils/model-binding';
+export { createSymbioteRenderer } from './renderer';
+export { Animated, createAnimatedComponent } from './modules/animated';
+export { ImageBackground } from './components/image-background';
+export type { IImageBackgroundProps } from './components/image-background';
+export { InputAccessoryView } from './components/input-accessory-view';
+export type { IInputAccessoryViewProps } from './components/input-accessory-view';
+export { Modal } from './components/modal';
+export type { IModalProps, IModalEmits, IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from './components/modal';
+export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
+export type { IKeyboardAvoidingBehavior, IKeyboardAvoidingViewProps, IKeyboardAvoidingViewEmits, } from './components/keyboard-avoiding-view';
+export { StatusBar } from './modules/status-bar';
+export type { IStatusBarProps, IStatusBarStyle } from './modules/status-bar';
+export { AppRegistry, setHostRegistrar } from './modules/app-registry';
+export type { IComponentProvider, IAppParameters, IRunnable, IHostRegistrar, IWrapperComponentProvider, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from './modules/app-registry';
+export { useColorScheme } from './composables/use-color-scheme';
+export { useWindowDimensions } from './composables/use-window-dimensions';
+export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
+export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, IAccessibilityChangeEvent, IAccessibilityChangeEventName, IAccessibilityChangeEventHandler, IAccessibilityAnnouncementFinishedEvent, IAnnounceForAccessibilityOptions, IAccessibilityEventType, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, } from '@symbiote-native/engine';
+export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, } from '@symbiote-native/engine';
+export type { ISymbioteEvent, ISymbioteNode, IRootTag } from '@symbiote-native/engine';
+export type { IViewStyle, ITextStyle, IFlexAlign, IFlexJustify, IPlatformStatic, IPlatformOSType, IPlatformConstantsIOS, IPlatformConstantsAndroid, IPlatformSelectSpec, } from '@symbiote-native/engine';
+export { setNativeViewConfigSource } from '@symbiote-native/engine';
+export type { INativeViewConfig, INativeViewConfigSource } from '@symbiote-native/engine';
+export { PixelRatio, PanResponder, PlatformColor, DynamicColorIOS, InteractionManager, } from '@symbiote-native/engine';
+export type { IPixelRatioStatic } from '@symbiote-native/engine';
+export type { IPanResponderGestureState, IPanResponderCallbacks, IGestureResponderHandlers, IPanResponderInstance, } from '@symbiote-native/engine';
+export type { IColorValue, IOpaqueColorValue, IDynamicColorIOSTuple, } from '@symbiote-native/engine';
+export type { IInteractionEvent, ISimpleTask, IPromiseTask, ITask, IHandle, } from '@symbiote-native/engine';