@symbiote-native/vue 1.0.0 → 2.0.0

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/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/index.d.ts

@@ -1,30 +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';
@@ -33,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

@@ -2,10 +2,31 @@
 // 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 `<symbiote-pressable>` needs. `export * from './register'` or a bare
+// 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
@@ -15,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
@@ -43,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/index.d.ts

@@ -50,7 +50,9 @@ export declare const Animated: {
     Image: 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>;
-    ScrollView: ReturnType<typeof createAnimatedComponent>;
+    ScrollView: 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>;
     FlatList: ReturnType<typeof createAnimatedComponent>;
     SectionList: ReturnType<typeof createAnimatedComponent>;
     createAnimatedComponent: typeof createAnimatedComponent;

package/build/modules/animated/index.js

@@ -4,25 +4,29 @@
 // meet here so `Animated.timing(new Animated.Value(0), ...).start()` works against the
 // Vue-driven engine.
 import { AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedMock, Easing, Platform, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, } from '@symbiote-native/engine';
-import { View, Text } from '../../components.js';
-import { Image } from '../../components/image.js';
-import { ScrollView } from '../../components/scroll-view';
 import { FlatList } from '../../components/flat-list/index.js';
 import { SectionList } from '../../components/section-list/index.js';
 import { createAnimatedComponent } from './create-animated-component.js';
 export { createAnimatedComponent } from './create-animated-component.js';
-// View/Text are pure host primitives; Image is the functional renderImage wrapper, and all expose
-// their host node via ref fall-through, so wrap them eagerly.
-const AnimatedView = createAnimatedComponent(View);
-const AnimatedText = createAnimatedComponent(Text);
-const AnimatedImage = createAnimatedComponent(Image);
-// LAZY, memoized getters, mirroring RN's `get ScrollView()`. Every scrolling container reaches
-// scroll-view/sticky-header, which imports this Animated namespace back, so a wrap at module
-// scope captures whatever the half-evaluated cycle holds at that instant. Under a bundler's ESM
-// interop that is `undefined`, not a ReferenceError - the wrapper builds fine and then renders
-// nothing. Deferring past module init is what keeps it from firing. FlatList and SectionList
-// reach ScrollView through VirtualizedList, so they sit on the same cycle and take the same shape.
-let animatedScrollView;
+// The TAGS, not components — there are no View/Text/Image components left to alias, and a string
+// base is what `createAnimatedComponent` already handles (`animated-tag-base.test.ts`): it renders
+// the intrinsic and the ref falls through to the raw engine node, the same fall-through the
+// functional wrappers used to provide.
+//
+// Wrapping is itself vestigial — the engine resolves an AnimatedNode written into any prop of any
+// host node (`core/engine/src/animated/host-binding.ts`), so `<view :style="{ opacity: v }">` needs
+// no wrapper at all. These stay as RN-compatible aliases until the namespace is retired.
+const AnimatedView = createAnimatedComponent('view');
+const AnimatedText = createAnimatedComponent('text');
+const AnimatedImage = createAnimatedComponent('image');
+// `scroll-view` is a TAG now too (no more component, no more scroll-view/sticky-header cycle to
+// dodge), so it takes the same eager shape as View/Text/Image above.
+const AnimatedScrollView = createAnimatedComponent('scroll-view');
+// LAZY, memoized getters, mirroring RN's `get FlatList()`. Kept deferred past module init even
+// though the scroll-view cycle these once rode is gone (ScrollView above is eager now) — neither
+// FlatList nor VirtualizedList imports this module, so there is no proven cycle left, but nothing
+// forces one to stay absent either. Cheap insurance against a half-evaluated module handing back
+// `undefined` and rendering nothing.
 let animatedFlatList;
 let animatedSectionList;
 // The live, JS-driven driver namespace (real frames). RN's AnimatedImplementation.
@@ -58,10 +62,7 @@ export const Animated = {
     View: AnimatedView,
     Text: AnimatedText,
     Image: AnimatedImage,
-    get ScrollView() {
-        animatedScrollView ??= createAnimatedComponent(ScrollView);
-        return animatedScrollView;
-    },
+    ScrollView: AnimatedScrollView,
     get FlatList() {
         animatedFlatList ??= createAnimatedComponent(FlatList);
         return animatedFlatList;

package/build/modules/image/index.d.ts

@@ -0,0 +1,3 @@
+import { type IImageStatics } from '@symbiote-native/components';
+export type { IImageStatics };
+export declare const Image: IImageStatics;

package/build/modules/image/index.js

@@ -0,0 +1,13 @@
+// RN's Image STATICS — `getSize`, `prefetch`, `queryCache`, `abortPrefetch`, `resolveAssetSource`.
+//
+// IN `modules/`, NOT `components/`. The primitive is the `<image>` tag and its fold runs in the
+// engine (`behaviors/image.ts`); what is left under the name `Image` is an imperative API with no
+// view, which is what this bucket is for. Sitting in `components/` made a statics object read as a
+// component.
+//
+// A NAMESPACE OBJECT rather than five bare functions, deliberately: `Alert`, `Share`, `Linking`
+// and `Vibration` are all `export const X = {…}`, and an app porting from RN writes
+// `Image.getSize(...)` verbatim. Shared verbatim via `imageStatics`, the same source every other
+// adapter's Image uses.
+import { imageStatics } from '@symbiote-native/components';
+export const Image = imageStatics;

package/build/register.d.ts

@@ -1 +1 @@
-export {};
+import '@symbiote-native/components/register';