@symbiote-native/vue 0.5.0 → 2.0.0

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

@@ -70,7 +70,6 @@ export type IVirtualizedListEmits<ItemT> = {
     }) => void;
 };
 export declare const VirtualizedList: new <ItemT>(props: (IVirtualizedListProps<ItemT> & ({} | {
-    onRefresh?: (() => any) | undefined;
     onViewableItemsChanged?: ((info: IViewableItemsChangedInfo<ItemT>) => any) | undefined;
     onEndReached?: ((info: {
         distanceFromEnd: number;
@@ -78,13 +77,13 @@ export declare const VirtualizedList: new <ItemT>(props: (IVirtualizedListProps<
     onStartReached?: ((info: {
         distanceFromStart: number;
     }) => any) | undefined;
+    onRefresh?: (() => 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;
@@ -92,6 +91,7 @@ export declare const VirtualizedList: new <ItemT>(props: (IVirtualizedListProps<
     onStartReached?: ((info: {
         distanceFromStart: number;
     }) => any) | undefined;
+    onRefresh?: (() => any) | undefined;
     onScrollToIndexFailed?: ((info: {
         index: number;
         highestMeasuredFrameIndex: number;
@@ -105,7 +105,6 @@ export declare const VirtualizedList: new <ItemT>(props: (IVirtualizedListProps<
     M: {};
     Defaults: {};
 }, (IVirtualizedListProps<ItemT> & {}) | (IVirtualizedListProps<ItemT> & {
-    onRefresh?: (() => any) | undefined;
     onViewableItemsChanged?: ((info: IViewableItemsChangedInfo<ItemT>) => any) | undefined;
     onEndReached?: ((info: {
         distanceFromEnd: number;
@@ -113,6 +112,7 @@ export declare const VirtualizedList: new <ItemT>(props: (IVirtualizedListProps<
     onStartReached?: ((info: {
         distanceFromStart: number;
     }) => any) | undefined;
+    onRefresh?: (() => any) | undefined;
     onScrollToIndexFailed?: ((info: {
         index: number;
         highestMeasuredFrameIndex: number;

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

@@ -27,10 +27,8 @@
 // scroll commands would silently no-op. The folded listState is a PLAIN object (not reactive) —
 // mutating it never triggers Vue; the `version` ref is bumped when a transition changes render state.
 import { computed, defineComponent, getCurrentInstance, h, isVNode, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
-import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
-import { dlog, } from '@symbiote-native/engine';
-import { ScrollView } from '../scroll-view';
-import { RefreshControl } from '../refresh-control.js';
+import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
+import { dlog, isSymbioteNode, } from '@symbiote-native/engine';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 import { componentFromSlot } from '../../utils/slots-to-render-props.js';
 // The typed inputs VirtualizedList reads off `props`; everything else (raw scroll, keyboard*,
@@ -74,9 +72,6 @@ const EMIT_KEYS = [
 function isHandler(value) {
     return typeof value === 'function';
 }
-function isRecord(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
 function isComponent(value) {
     return (typeof value === 'function' || (typeof value === 'object' && value !== null));
 }
@@ -118,9 +113,6 @@ function renderSeparatorElement(component, leadingItem, trailingItem, overrides)
     };
     return h(component, props);
 }
-function isScrollViewHandle(value) {
-    return isRecord(value) && typeof value.scrollTo === 'function';
-}
 export const VirtualizedList = defineComponent((props, { attrs, expose, emit, slots, }) => {
     // Bumped when a transition changes render-relevant state, so the `metrics` computed and the
     // render fn re-run (listState is plain, non-reactive, so mutating it triggers nothing itself).
@@ -129,13 +121,17 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
     // The offset we are imperatively driving native to. A fresh object identity each push so the
     // commit path re-applies it even when the numeric value repeats. undefined = none pending.
     const commandedOffset = ref(undefined);
-    // shallowRef, NOT ref: the ScrollView handle closes over the engine scroll node, reached by
-    // identity through the engine's WeakMap mirror. A deep ref would proxy the object and every
-    // imperative scroll (scrollToOffset/Index/…) would miss the node and silently no-op.
-    const scrollHandle = shallowRef(null);
-    const setScrollHandle = (instance) => {
-        scrollHandle.value = isScrollViewHandle(instance) ? instance : null;
+    // shallowRef, NOT ref: `<scroll-view>` is a tag now, so its `ref` hands back the raw engine
+    // node directly, reached by identity through the engine's WeakMap mirror. A deep ref would
+    // proxy the object and every imperative scroll (scrollToOffset/Index/…) would miss the node
+    // and silently no-op.
+    const scrollNodeRef = shallowRef(null);
+    const setScrollNodeRef = (el) => {
+        scrollNodeRef.value = isSymbioteNode(el) ? el : null;
     };
+    // Built once: `getNode` is lazy, read on every call, so this stays valid across the ref
+    // transitioning from null to the committed node.
+    const scrollHandle = buildScrollViewHandle(() => scrollNodeRef.value);
     // The five 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, so
     // an emit bridge is wired ONLY when the consumer actually listens (preserving the RefreshControl /
@@ -243,10 +239,13 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         const targetOffset = p.horizontal
             ? { x: clamped, y: EMPTY_OFFSET }
             : { x: EMPTY_OFFSET, y: clamped };
-        const handle = scrollHandle.value;
-        if (handle !== null) {
+        if (scrollNodeRef.value !== null) {
             dlog(`Vue VirtualizedList scrollTo offset=${clamped} animated=${animated} (horizontal=${p.horizontal})`);
-            handle.scrollTo({ x: targetOffset.x, y: targetOffset.y, animated });
+            scrollHandle.scrollTo({
+                x: targetOffset.x,
+                y: targetOffset.y,
+                animated,
+            });
             return;
         }
         dlog(`Vue VirtualizedList scrollTo offset=${clamped} pending-ref`);
@@ -411,12 +410,12 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
             dispatch({ kind: 'scroll-to-end', animated: params?.animated ?? true });
         },
         flashScrollIndicators: () => {
-            scrollHandle.value?.flashScrollIndicators();
+            scrollHandle.flashScrollIndicators();
         },
-        getNativeScrollRef: () => scrollHandle.value,
-        getScrollableNode: () => scrollHandle.value,
-        getScrollResponder: () => scrollHandle.value,
-        getScrollNode: () => scrollHandle.value?.getScrollNode() ?? null,
+        getNativeScrollRef: () => scrollNodeRef.value !== null ? scrollHandle : null,
+        getScrollableNode: () => scrollNodeRef.value !== null ? scrollHandle : null,
+        getScrollResponder: () => scrollNodeRef.value !== null ? scrollHandle : null,
+        getScrollNode: () => scrollNodeRef.value,
         recordInteraction: () => {
             dispatch({ kind: 'record-interaction' });
         },
@@ -451,13 +450,13 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
             : undefined;
         const header = resolveElement(p.listHeaderComponent);
         if (header !== undefined) {
-            children.push(h('symbiote-view', { key: 'list-header' }, [header]));
+            children.push(h('view', { key: 'list-header' }, [header]));
         }
         let renderedStickyIndices = [];
         if (m.count === FIRST_INDEX) {
             const empty = resolveElement(p.listEmptyComponent);
             if (empty !== undefined) {
-                children.push(h('symbiote-view', { key: 'list-empty' }, [empty]));
+                children.push(h('view', { key: 'list-empty' }, [empty]));
             }
         }
         else {
@@ -474,7 +473,7 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
             });
             renderedStickyIndices = plan.stickyChildPositions;
             if (plan.leadingExtent > EMPTY_OFFSET) {
-                children.push(h('symbiote-view', {
+                children.push(h('view', {
                     key: 'spacer-leading',
                     style: p.horizontal
                         ? { width: plan.leadingExtent }
@@ -512,7 +511,7 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
                 cell.index < m.count - 1
                     ? renderSeparatorElement(p.itemSeparatorComponent, item, p.getItem(p.data, cell.index + 1), separatorOverrides.get(cell.index))
                     : undefined;
-                children.push(h('symbiote-view', {
+                children.push(h('view', {
                     key: `cell-${cell.key}`,
                     onLayout: makeCellMeasure(cell.index),
                     style: cellInverted,
@@ -524,7 +523,7 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
             if (plan.forcedStickyCell !== undefined) {
                 pushCell(plan.forcedStickyCell);
                 if (plan.gapExtent > EMPTY_OFFSET) {
-                    children.push(h('symbiote-view', {
+                    children.push(h('view', {
                         key: 'spacer-gap',
                         style: p.horizontal
                             ? { width: plan.gapExtent }
@@ -536,7 +535,7 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
                 pushCell(plan.cells[cellPos]);
             }
             if (plan.trailingExtent > EMPTY_OFFSET) {
-                children.push(h('symbiote-view', {
+                children.push(h('view', {
                     key: 'spacer-trailing',
                     style: p.horizontal
                         ? { width: plan.trailingExtent }
@@ -546,7 +545,7 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         }
         const footer = resolveElement(p.listFooterComponent);
         if (footer !== undefined) {
-            children.push(h('symbiote-view', { key: 'list-footer' }, [footer]));
+            children.push(h('view', { key: 'list-footer' }, [footer]));
         }
         const resolvedContentContainerStyle = p.horizontal
             ? [p.contentContainerStyle, { width: m.total }]
@@ -554,14 +553,15 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         const resolvedStyle = p.inverted
             ? [p.style, p.horizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE]
             : p.style;
+        // `horizontal` is NOT in the bag: the axis is the TAG (`horizontal-scroll-view`), so passing
+        // it would be redundant at best and a contradiction the behavior has to warn about at worst.
         const scrollProps = {
             ...p.forwarded,
             style: resolvedStyle,
             contentContainerStyle: resolvedContentContainerStyle,
-            horizontal: p.horizontal,
             onScroll,
             onLayout: onViewportLayout,
-            ref: setScrollHandle,
+            ref: setScrollNodeRef,
         };
         // The raw scroll-lifecycle callbacks (onScrollBeginDrag/…) and scrollEventThrottle are NOT in
         // PROP_KEYS, so they already ride through via ...p.forwarded. The keyboard props come from
@@ -588,18 +588,23 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
                     (header !== undefined ? 1 : 0),
             };
         }
-        // Pull-to-refresh: when a @refresh listener is present, build a RefreshControl for the
-        // ScrollView's refreshControl prop (iOS sibling / Android wrap, owned by ScrollView). The
+        // Pull-to-refresh: when a @refresh listener is present, the RefreshControl is an ordinary
+        // FIRST CHILD on both platforms rather than a prop — the scroll behavior CLAIMS it, so the
+        // engine keeps it beside the content view on iOS and inverts the tree on Android. The
         // onRefresh bridge is gated on the listener, so an unlistened list builds no control.
+        let refreshControl;
         if (p.onRefresh !== undefined) {
             dlog('Vue VirtualizedList wiring RefreshControl (@refresh listened)');
-            scrollProps.refreshControl = h(RefreshControl, {
+            refreshControl = h('refresh-control', {
                 refreshing: p.refreshing,
                 onRefresh: p.onRefresh,
                 progressViewOffset: p.progressViewOffset,
             });
         }
-        return h(ScrollView, scrollProps, { default: () => children });
+        // The scroll TAG, not a wrapper: the engine builds the content node, carries
+        // `contentContainerStyle` onto it and places the refresh control. `ref` hands back the
+        // engine node, which is what `buildScrollViewHandle` drives for the imperative scrolls.
+        return h(p.horizontal ? 'horizontal-scroll-view' : 'scroll-view', scrollProps, refreshControl === undefined ? children : [refreshControl, ...children]);
     };
 }, {
     name: 'VirtualizedList',

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

@@ -68,21 +68,21 @@ export type IVirtualizedSectionListEmits = {
     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;
+})) & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<IVirtualizedSectionListProps<ItemT> & ({} | {
     onEndReached?: ((info: {
         distanceFromEnd: number;
     }) => any) | undefined;
     onStartReached?: ((info: {
         distanceFromStart: number;
     }) => any) | undefined;
+    onRefresh?: (() => 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: {};
@@ -91,11 +91,11 @@ export declare const VirtualizedSectionList: new <ItemT>(props: (IVirtualizedSec
     M: {};
     Defaults: {};
 }, (IVirtualizedSectionListProps<ItemT> & {}) | (IVirtualizedSectionListProps<ItemT> & {
-    onRefresh?: (() => any) | undefined;
     onEndReached?: ((info: {
         distanceFromEnd: number;
     }) => any) | undefined;
     onStartReached?: ((info: {
         distanceFromStart: number;
     }) => any) | undefined;
+    onRefresh?: (() => any) | undefined;
 }), {}, {}, {}, {}, {}>;

package/build/composables/use-raw-attrs.d.ts

@@ -0,0 +1 @@
+export declare function useRawAttrs(contextAttrs: Record<string, unknown>): Record<string, unknown>;

package/build/composables/use-raw-attrs.js

@@ -0,0 +1,26 @@
+// The unproxied twin of a setup context's `attrs`.
+//
+// Vue hands `setupContext.attrs` out as `new Proxy(instance.attrs, attrsProxyHandlers)`, and in
+// PRODUCTION as well as dev that proxy's only trap is `get(target, key) { track(target, "get", "");
+// return target[key]; }` (runtime-core.esm-bundler.js:8357). So every attribute read costs a
+// WeakMap get, a Map get and a `dep.track()`, and the first read of each instance also allocates
+// a Map and a Dep into the module-global `targetMap` that live as long as the component does.
+// Pressable reads ~16 attrs per render and a benchmark create mounts 2 000 of them.
+//
+// `instance.attrs` is the raw object behind that proxy. Capturing it is safe because its identity
+// never changes: `initProps` assigns it once (:4907) and `updateProps` mutates that same object in
+// place (`attrs[key] = value` / `delete attrs[key]`), so a reference taken at setup always reads
+// current values. The tracking the proxy performs is for reads in a setup BODY; a render fn does
+// not need it, because the parent's patch re-runs the child render through `updateComponentPreRender`
+// whether or not the child subscribed.
+//
+// CALL THIS FROM A SETUP BODY ONLY, never from a render fn, a `computed`, or any other deferred
+// callback. `getCurrentInstance()` resolves to `currentInstance || currentRenderingInstance`, so in
+// a callback that runs while a DIFFERENT component is rendering it returns that component and this
+// would silently hand back the wrong bag. `virtualized-list/index.ts` calls normalizeVueAttrs
+// inside a `computed` for exactly that reason and must keep using the context attrs.
+import { getCurrentInstance } from '@vue/runtime-core';
+export function useRawAttrs(contextAttrs) {
+    const instance = getCurrentInstance();
+    return instance === null ? contextAttrs : instance.attrs;
+}

package/build/descriptor-to-vue.js

@@ -1,7 +1,7 @@
 // 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
+// vnode (`view`, `activity-indicator`, …) flows on through the Vue custom
+// renderer → engine → Fabric, exactly like a hand-written h('view'). The React
 // twin is `adapters/react/src/descriptor-to-react.ts`.
 import { h } from '@vue/runtime-core';
 export function descriptorToVue(node) {

package/build/host-instance/index.js

@@ -1,11 +1,10 @@
 // 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.
+// to a symbiote host element falls through to the raw engine SymbioteNode, which already carries
+// measure / setNativeProps / focus on its prototype, exactly like React's getPublicInstance.
+// IHostInstance is therefore that 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 unwraps the Vue-shaped inputs (a Ref or a bare node)

package/build/index.d.ts

@@ -1,29 +1,31 @@
+import './register';
+export * from 'vue';
 export { mount, unmount, setAppConfigurator } from './render';
 export type { IAppConfigurator } from './render';
 export { Teleport, type ITeleportTarget } from './create-portal';
 export { createTunnel, type ITunnel } from './create-tunnel';
-export { View, Text } from './components';
+export type { IViewProps } from './components/view-props';
+export type { ITextProps } from './components/text-props';
+export type { ISymbioteIntrinsicTag, ISymbioteHostAttributes, } from './intrinsic-elements';
 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 { Image } from './modules/image';
+export { setImageSourceResolver } from '@symbiote-native/components';
+export type { IImageProps } from './components/image-props';
+export type { IImageSource, IImageSourceProp, IResizeMode, IImageSize, IImageCacheStatus, } from '@symbiote-native/components';
+export type { IActivityIndicatorProps } from './components/activity-indicator-props';
+export type { ISwitchProps, ISwitchTrackColor, ISwitchChangeEvent, } from './components/switch/switch-props';
+export type { IScrollViewProps, IScrollViewHandle, } from './components/scroll-view/scroll-view-props';
+export type { IPressableProps, IPressState, IPressableAndroidRippleConfig, } from './components/pressable-props';
+export type { ITouchableOpacityProps, ITouchableHighlightProps, } from './components/touchable-props';
+export type { ITouchableWithoutFeedbackProps } from './components/touchable-without-feedback-props';
+export { TouchableNativeFeedback } from '@symbiote-native/components';
+export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from '@symbiote-native/components';
+export type { ITouchableNativeFeedbackProps } from './components/touchable-native-feedback-props';
+export type { IButtonProps } from './components/button-props';
+export type { ITextInputProps } from './components/text-input/text-input-props';
+export type { ITextInputHandle, ITextInputChangeEvent, } from '@symbiote-native/components';
 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';
@@ -32,19 +34,15 @@ 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 type { ISafeAreaViewProps } from './components/safe-area-view-props';
+export type { IRefreshControlProps } from './components/refresh-control-props';
 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 type { IImageBackgroundProps } from './components/image-background-props';
+export type { IInputAccessoryViewProps } from './components/input-accessory-view-props';
 export { Modal } from './components/modal';
 export type { IModalProps, IModalEmits, IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from './components/modal';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';

package/build/index.js

@@ -1,6 +1,32 @@
 // @symbiote-native/vue: a thin Vue 3 reconciler over @symbiote-native/engine. createRenderer maps
 // each RendererOptions call onto the engine's mutation API; all Fabric clone-on-write
 // lives in the engine, shared with every other adapter. App code names only @symbiote-native/vue.
+// Side-effect import, FIRST and deliberately not a re-export: it installs the engine-side press
+// machine that a lowered `<pressable>` needs. `export * from './register'` or a bare
+// import sitting beside a re-export of the same specifier both go lazy under Metro's production
+// `inlineRequires` and the registration silently never runs in a release build. See register.ts.
+import './register.js';
+// Re-exports Vue's ENTIRE public API (ref, computed, defineComponent, unref, …), which looks like
+// scope creep on an otherwise carefully curated barrel — it is not ergonomics, it is what makes
+// `vueCompilerOptions.lib: "@symbiote-native/vue"` (examples/*/tsconfig.typecheck.json) safe to
+// set. Volar/`@vue/language-core` generates virtual TS referencing `import(lib).unref`,
+// `import(lib).GlobalComponents`, `.GlobalDirectives`, `.ShallowRef`, `.ObjectDirective` — always
+// off `lib`'s ROOT import, never a subpath — so pointing `lib` at us without this line breaks
+// EVERY `.vue` SFC's template check with `Cannot find name` the moment Volar's codegen touches any
+// of them. `lib`'s other consumer, `optionsWrapper`'s `(await import(lib)).defineComponent(...)`,
+// only fires for a plain `<script>` `export default {}` block (`isExportRawObject`,
+// `@vue/language-core/lib/codegen/script/index.js`) — every `.vue` file in this repo uses
+// `<script setup>`, so that branch never runs and defineComponent needing to resolve from here too
+// is moot in practice, not something this wildcard has to get right on its own.
+//
+// WHY `lib` NEEDS TO BE US AT ALL: plain `"vue"` (Volar's default) types `__VLS_IntrinsicElements`
+// and `GlobalComponents` off `vue`'s own `jsx-runtime`/ambient augmentation — the SAME
+// `view`/`text`/`image`/`switch`-collide-with-real-SVG-elements problem documented in
+// `jsx-runtime.ts` and `intrinsic-elements.ts`, but for `.vue` TEMPLATES rather than TSX. Volar's
+// native-vs-component branch (`!isNativeTag(tag)`) reads `IntrinsicElements` from
+// `import('${lib}/jsx-runtime')`, so redirecting `lib` to our own package is what finally reaches
+// OUR jsx-runtime.ts (real `IViewProps`/`ITextProps`/… on all 4 collision tags) for those four.
+export * from 'vue';
 export { mount, unmount, setAppConfigurator } from './render.js';
 // The portal: Vue's own <Teleport>, guarded so `to` must be a node/surface this renderer actually
 // mounted (there is no querySelector). It MOVES host nodes, so it reaches any already-mounted
@@ -10,26 +36,22 @@ export { mount, unmount, setAppConfigurator } from './render.js';
 // into an <Out/> the destination has to render. See create-portal/index.ts.
 export { Teleport } from './create-portal/index.js';
 export { createTunnel } from './create-tunnel/index.js';
-export { View, Text } from './components.js';
 // IHostInstance is the raw engine node (Vue host refs fall through to it; imperative methods
 // live on each component's expose() handle).
 export { findNodeHandle } from './host-instance/index.js';
-export { Image, setImageSourceResolver } from './components/image.js';
-export { ActivityIndicator } from './components/activity-indicator';
-export { Switch } from './components/switch';
-export { ScrollView } from './components/scroll-view';
-export { Pressable } from './components/pressable.js';
-export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable.js';
-export { TouchableNativeFeedback } from './components/touchable-native-feedback.js';
-export { Button } from './components/button.js';
-export { TextInput } from './components/text-input/index.js';
+// `Image` is a TAG — `<image>`. What survives the name is the STATICS namespace, and it lives in
+// `modules/` beside Alert/Share because it carries no view; the prop type stays, for a component
+// forwarding a bag.
+export { Image } from './modules/image/index.js';
+export { setImageSourceResolver } from '@symbiote-native/components';
+// `TouchableNativeFeedback` is now RN's STATIC NAMESPACE, not a component: the element is the tag
+// `<touchable-native-feedback>`, which commits no node of its own and clones onto its single child.
+// `TouchableNativeFeedback.Ripple(…)` / `.SelectableBackground(…)` are unchanged.
+export { TouchableNativeFeedback } from '@symbiote-native/components';
 export { VirtualizedList } from './components/virtualized-list/index.js';
 export { FlatList } from './components/flat-list/index.js';
 export { VirtualizedSectionList } from './components/virtualized-section-list/index.js';
 export { SectionList } from './components/section-list/index.js';
-// RefreshControl hosts the wrapped scroll view via its default slot.
-export { SafeAreaView } from './components/safe-area-view.js';
-export { RefreshControl } from './components/refresh-control.js';
 export { descriptorToVue } from './descriptor-to-vue.js';
 // Exported so an external wrapper package (e.g. @symbiote-native/slider/vue over a third-party
 // native view) can fold its incoming attrs/v-model through the SAME transform rather than
@@ -38,8 +60,6 @@ export { normalizeVueAttrs } from './utils/normalize-attrs.js';
 export { resolveModelValue, emitModelUpdate } from './utils/model-binding.js';
 export { createSymbioteRenderer } from './renderer/index.js';
 export { Animated, createAnimatedComponent } from './modules/animated/index.js';
-export { ImageBackground } from './components/image-background.js';
-export { InputAccessoryView } from './components/input-accessory-view.js';
 export { Modal } from './components/modal/index.js';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view.js';
 export { StatusBar } from './modules/status-bar.js';

package/build/intrinsic-elements.d.ts

@@ -0,0 +1,19 @@
+import type { PublicProps } from '@vue/runtime-core';
+import type { ISymbioteIntrinsic, ICrossTypedIntrinsics } from '@symbiote-native/components';
+import type { ICrossedPrimitiveProps } from './jsx-runtime';
+export interface ISymbioteHostAttributes {
+    [attribute: string]: unknown;
+}
+type IDefineIntrinsic<Props> = new () => {
+    /** @deprecated Template prop types only — this property does not exist at runtime. */
+    $props: Props & PublicProps;
+};
+type IDefineIntrinsicMap<M> = {
+    [K in keyof M]: IDefineIntrinsic<M[K]>;
+};
+declare module 'vue' {
+    interface GlobalComponents extends ICrossTypedIntrinsics<IDefineIntrinsic<ISymbioteHostAttributes>, IDefineIntrinsicMap<ICrossedPrimitiveProps>> {
+    }
+}
+export type ISymbioteIntrinsicTag = ISymbioteIntrinsic;
+export {};

package/build/intrinsic-elements.js

@@ -0,0 +1 @@
+export {};

package/build/jsx-runtime.d.ts

@@ -0,0 +1,67 @@
+import type { VNode } from '@vue/runtime-core';
+import type { ICrossTypedIntrinsics } from '@symbiote-native/components';
+import type { IViewProps } from './components/view-props';
+import type { ITextProps } from './components/text-props';
+import type { IPressableProps } from './components/pressable-props';
+import type { IButtonProps } from './components/button-props';
+import type { IImageProps } from './components/image-props';
+import type { IImageBackgroundProps } from './components/image-background-props';
+import type { IInputAccessoryViewProps } from './components/input-accessory-view-props';
+import type { IRefreshControlProps } from './components/refresh-control-props';
+import type { ISafeAreaViewProps } from './components/safe-area-view-props';
+import type { ITouchableNativeFeedbackProps } from './components/touchable-native-feedback-props';
+import type { ITouchableOpacityProps, ITouchableHighlightProps } from './components/touchable-props';
+import type { ITouchableWithoutFeedbackProps } from './components/touchable-without-feedback-props';
+import type { IScrollViewProps } from './components/scroll-view/scroll-view-props';
+import type { ISwitchProps } from './components/switch/switch-props';
+import type { ITextInputProps } from './components/text-input/text-input-props';
+import type { IModalProps } from './components/modal';
+import type { IActivityIndicatorProps } from './components/activity-indicator-props';
+export {};
+export interface ICrossedPrimitiveProps {
+    view: IViewProps;
+    text: ITextProps;
+    pressable: IPressableProps;
+    button: IButtonProps;
+    image: IImageProps;
+    'image-background': IImageBackgroundProps;
+    'input-accessory-view': IInputAccessoryViewProps;
+    'refresh-control': IRefreshControlProps;
+    'safe-area-view': ISafeAreaViewProps;
+    'touchable-native-feedback': ITouchableNativeFeedbackProps;
+    'touchable-opacity': ITouchableOpacityProps;
+    'touchable-highlight': ITouchableHighlightProps;
+    'touchable-without-feedback': ITouchableWithoutFeedbackProps;
+    'scroll-view': IScrollViewProps;
+    switch: ISwitchProps;
+    'text-input': ITextInputProps;
+    modal: IModalProps;
+    'activity-indicator': IActivityIndicatorProps;
+}
+interface IHostAttributes {
+    [attribute: string]: unknown;
+}
+export declare namespace JSX {
+    export interface Element extends VNode {
+    }
+    export interface ElementClass {
+        $props: {};
+    }
+    export interface ElementAttributesProperty {
+        $props: {};
+    }
+    export interface IntrinsicAttributes {
+        key?: string | number | symbol;
+        [name: string]: unknown;
+    }
+    type IWithJsxAttrs<Props> = Props & {
+        key?: string | number | symbol;
+        ref?: import('@vue/runtime-core').VNodeRef;
+    };
+    export interface IntrinsicElements extends ICrossTypedIntrinsics<IHostAttributes, {
+        [K in keyof ICrossedPrimitiveProps]: IWithJsxAttrs<ICrossedPrimitiveProps[K]>;
+    }> {
+    }
+    export {};
+}
+export type ISymbioteIntrinsicTag = keyof JSX.IntrinsicElements;

package/build/jsx-runtime.js

@@ -0,0 +1 @@
+export {};

package/build/modules/animated/create-animated-component.d.ts

@@ -1,4 +1,4 @@
 import { type Component } from '@vue/runtime-core';
-export declare function createAnimatedComponent(Component: Component): import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+export declare function createAnimatedComponent(Component: Component | string): 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>;