@symbiote-native/vue 0.3.8 → 0.5.0

package/build/components.js

@@ -9,18 +9,21 @@
 // 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 { resolveTextProps } from '@symbiote-native/components';
 import { normalizeVueAttrs } from './utils/normalize-attrs.js';
-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.
+function hostComponent(intrinsic, name, 
+// An optional last fold over the normalized attrs. Text needs one (RN's ellipsizeMode /
+// allowFontScaling defaults); View does not, so it stays a straight pass-through.
+fold = attrs => attrs) {
     // 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);
+    const component = (_props, { slots, attrs }) => h(intrinsic, fold(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');
+export const Text = hostComponent('symbiote-text', 'Text', resolveTextProps);
+// Text is no longer bare either — it carries RN's Text.js defaults through resolveTextProps.
 // 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
+// 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/create-portal/index.d.ts

@@ -0,0 +1,28 @@
+import { SymbioteSurface, type ISymbioteNode } from '@symbiote-native/engine';
+/** Anything already mounted in THIS surface: a host-node ref, or the surface root itself. */
+export type ITeleportTarget = ISymbioteNode | SymbioteSurface;
+export declare function isTeleportTarget(target: unknown): target is ITeleportTarget;
+export declare const Teleport: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    to: {
+        type: null;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: null;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    to: any;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/create-portal/index.js

@@ -0,0 +1,42 @@
+// The Vue adapter's portal — Vue's OWN `<Teleport>`, not a parallel API. Teleport lives in
+// @vue/runtime-core, not @vue/runtime-dom, and resolves its target through the RendererOptions we
+// already supply: `resolveTarget` only consults `querySelector` for the STRING form of `to`, and
+// returns an object target untouched. So stock Teleport drives this renderer as-is — target
+// change, unmount, disabled, call-site provide/inject and reactive updates all measured working
+// over the engine (create-portal.test.ts). This module adds exactly one thing on top: a runtime
+// guard on `to`.
+//
+// Why the guard: `to` is untyped at the template boundary, and a wrong value (a CSS selector
+// copied from web code, a forgotten `.value` on a ref, a plain object) would otherwise sink into
+// insert/remove deep in the engine and corrupt the retained tree silently. Vue's own dev warning
+// for the string form only fires in a dev build and still returns null, which paints nothing.
+//
+// Scope — same-surface targets only, the same PERMANENT boundary as React's createPortal
+// (adapters/react/src/create-portal/index.ts): a portal MOVES host nodes, and only the surface
+// that owns them ever commits them. Content whose target lives in a second, independently
+// mount()ed surface needs createTunnel instead, which copies rather than moves.
+import { defineComponent, h, Teleport as VueTeleport } from '@vue/runtime-core';
+import { isSymbioteNode, SymbioteSurface, } from '@symbiote-native/engine';
+export function isTeleportTarget(target) {
+    return target instanceof SymbioteSurface || isSymbioteNode(target);
+}
+export const Teleport = defineComponent({
+    name: 'Teleport',
+    inheritAttrs: false,
+    props: {
+        to: { type: null, default: null },
+        disabled: { type: Boolean, default: false },
+    },
+    setup(props, { slots }) {
+        return () => {
+            const { to } = props;
+            if (typeof to === 'string') {
+                throw new Error(`Teleport target must be a host node ref, not a CSS-selector string ("${to}") — symbiote has no querySelector. Pass a ref to an already-rendered element instead (e.g. <View ref="overlayHost" />, then :to="overlayHost").`);
+            }
+            if (to != null && !isTeleportTarget(to)) {
+                throw new Error('Teleport target is not a real host node — did you forget `.value` on a ref, or pass something symbiote never rendered?');
+            }
+            return h(VueTeleport, { to, disabled: props.disabled }, slots);
+        };
+    },
+});

package/build/host-instance/index.js

@@ -8,14 +8,14 @@
 // 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.
+// node in the commit mirror); this only unwraps the Vue-shaped inputs (a Ref or a bare node)
+// onto it. 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;
+    const candidate = isRef(componentOrHandle)
+        ? componentOrHandle.value
+        : componentOrHandle;
     if (candidate === null || candidate === undefined)
         return null;
     if (typeof candidate === 'number')

package/build/index.d.ts

@@ -1,4 +1,6 @@
-export { mount, unmount } from './render';
+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 { IAccessibilityProps, IAriaProps, IAccessibilityRole, IRole, IAccessibilityStateValue, IAccessibilityValue, IAccessibilityActionInfo, IResponderProps, } from '@symbiote-native/components';
@@ -21,7 +23,7 @@ export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground
 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 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';
@@ -33,7 +35,7 @@ export type { ISection, ISectionListProps, ISectionListSlots, ISectionListEmits,
 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 { 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';
@@ -56,10 +58,11 @@ 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 { 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 { setNativeViewConfigSource, setDeviceEventSource, } from '@symbiote-native/engine';
+export type { INativeViewConfig, INativeViewConfigSource, } from '@symbiote-native/engine';
+export type { IEnterKeyHint, IInputMode, ISubmitBehavior, ITextInputSelection, IImageStatics, } from '@symbiote-native/components';
 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';

package/build/index.js

@@ -1,79 +1,50 @@
 // @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.
-export { mount, unmount } from './render.js';
-// createTunnel: cross-surface content sharing (Teleport stays same-surface-only by design —
-// see create-tunnel.ts for why).
+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
+// target in the SAME surface — including one you only hold a ref to — and keeps the content's
+// reactive owner at the call site (provide/inject resolve from where it was written). Reaching a
+// second, independently mount()ed surface is a different mechanism: createTunnel, which copies
+// 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';
-// findNodeHandle: RN's ref -> native reactTag lookup, the Vue twin of the React adapter's
-// host-instance resolution. IHostInstance is the raw engine node (Vue host refs fall
-// through to it; imperative methods live on each component's expose() handle).
+// 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';
-// Image. Full parity with React: source/src/srcSet resolution, the width/height → style fold,
-// alt → accessibility, and the Image statics (getSize / prefetch / queryCache / …) are shared
-// verbatim from @symbiote-native/components via renderImage; Vue supplies only the functional bridge.
 export { Image, setImageSourceResolver } from './components/image.js';
-// First component off the shared @symbiote-native/components layer: render-only, drives the
-// agnostic renderActivityIndicator through descriptorToVue. Proof the layer is reusable:
-// the render fn is shared verbatim with React; Vue supplies only the bridge.
 export { ActivityIndicator } from './components/activity-indicator';
-// First component to bring the state half into Vue (the lastNativeReport reducer + the
-// snap-back watch); render shared verbatim with React, Vue supplies the reactive lifecycle.
 export { Switch } from './components/switch';
-// ScrollView. Full parity: vertical + horizontal, every pass-through prop, the
-// synthesized onContentSizeChange, the imperative handle via expose() + shallowRef, RefreshControl
-// (iOS sibling / Android wrap), and sticky headers (the scroll AnimatedValue,
-// the headerLayoutYs cross-talk, and the per-header Animated.View wrap). The pure math (intrinsics,
-// decelerationRate, content-size dedupe, the handle, the sticky interpolation) is shared verbatim
-// with React from @symbiote-native/components.
 export { ScrollView } from './components/scroll-view';
-// Pressable family. Full parity with React (the 3-layer split): the press state machine + render
-// decisions are shared in @symbiote-native/components; Vue supplies the reactivity + descriptor bridge.
 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';
-// TextInput. Full parity with React (the 3-layer split): the value/selection folds + the
-// controlled-write predicate live in @symbiote-native/components; Vue supplies the reactivity
-// (shallowRef host node, post-flush watch) + the imperative handle via expose().
 export { TextInput } from './components/text-input/index.js';
-// VirtualizedList family. Full parity with React: the windowing math (visible range, cell
-// keys, viewability token diffing, edge-reached, the list plan) is shared in
-// @symbiote-native/components; Vue supplies the reactive lifecycle + the per-cell element.
 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';
-// SafeAreaView + RefreshControl, wired into ScrollView with the iOS-sibling /
-// Android-wrap platform split. RefreshControl hosts the wrapped scroll view via its default slot.
+// 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';
-// normalizeVueAttrs: the kebab→camel attr fold every component applies at entry. Exported so an
-// external wrapper package (e.g. @symbiote-native/slider/vue over a third-party native view) can fold
-// its incoming attrs through the SAME transform rather than reimplementing it.
+// 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
+// reimplementing it.
 export { normalizeVueAttrs } from './utils/normalize-attrs.js';
-// resolveModelValue/emitModelUpdate: the v-model helper every
-// controlled-value component uses. Exported for the same external-package reason as
-// normalizeVueAttrs above (e.g. @symbiote-native/slider/vue).
 export { resolveModelValue, emitModelUpdate } from './utils/model-binding.js';
 export { createSymbioteRenderer } from './renderer/index.js';
-// Animated: Animated.View/Text/Image + the lazy Animated.ScrollView over the
-// Vue primitives, with the value graph / easing / drivers spread from @symbiote-native/engine. The wrap
-// mechanism (createAnimatedComponent) is the Vue twin of React's; the pure leaves live in the
-// engine.
 export { Animated, createAnimatedComponent } from './modules/animated/index.js';
-// Visual components off the shared @symbiote-native/components layer (wave: simple-visual).
 export { ImageBackground } from './components/image-background.js';
 export { InputAccessoryView } from './components/input-accessory-view.js';
 export { Modal } from './components/modal/index.js';
-// KeyboardAvoidingView: full parity via the shared inset math; Vue owns the Keyboard subscription.
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view.js';
-// StatusBar: declarative component + the shared imperative API.
 export { StatusBar } from './modules/status-bar.js';
-// AppRegistry: RN's app entry point over `mount`. setHostRegistrar wires RN's own
-// registrar so the native Fabric host finds our runnable by app key.
+// RN's app entry point over `mount`. setHostRegistrar wires RN's own registrar so the native
+// Fabric host finds our runnable by app key.
 export { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
 // Vue composables over the core device-state modules.
 export { useColorScheme } from './composables/use-color-scheme.js';
@@ -84,7 +55,8 @@ export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Setting
 export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, } from '@symbiote-native/engine';
 // Wired once by the app entry on a real host (like setColorProcessor): hands the engine
 // RN's ViewConfig registry so third-party Fabric views auto-derive their metadata.
-export { setNativeViewConfigSource } from '@symbiote-native/engine';
+// setDeviceEventSource is the third seam of the same set and travels with them.
+export { setNativeViewConfigSource, setDeviceEventSource, } from '@symbiote-native/engine';
 // Pure utilities that moved to the engine (single source, both adapters re-export):
 // PixelRatio + PanResponder, plus the color builders and the interaction scheduler.
 export { PixelRatio, PanResponder, PlatformColor, DynamicColorIOS, InteractionManager, } from '@symbiote-native/engine';

package/build/modules/animated/create-animated-component.js

@@ -1,27 +1,21 @@
-// createAnimatedComponent: the Vue twin of the React wrapper. It wraps a base component
-// (View / Text / Image / ScrollView / any) so it accepts AnimatedNodes in its props.
-// Same JS-driven path, NO native driver in the hot loop: a frame is the scoped commit
-// setNativeProps drives from the AnimatedProps leaf. The framework-agnostic
-// pieces (reduceProps / readPassthroughStyle / resolveHostNode / isAnimatedNode + the
-// AnimatedProps leaf itself) live in @symbiote-native/engine, shared verbatim with React; here
-// Vue supplies only the lifecycle.
-//
-// React → hooks: useMemo(leaf) + three useEffects + a callback ref. Vue → reactivity:
-// a render that rebuilds the leaf each pass (like React's per-render useMemo(rest)) + a
-// post-commit reconcile (onMounted/onUpdated, the Vue twin of a post-commit useEffect) +
-// a function ref. The per-frame path is unchanged and NEVER goes through Vue render:
-// value.setValue / animation -> flushValue -> AnimatedProps.update() -> setNativeProps(node).
+// createAnimatedComponent: the Vue twin of the React wrapper. Wraps a base component
+// (View/Text/Image/ScrollView/any) so it accepts AnimatedNodes in its props. Framework-agnostic
+// pieces (reduceProps/readPassthroughStyle/resolveHostNode/isAnimatedNode + the AnimatedProps
+// leaf) live in @symbiote-native/engine, shared verbatim with React; Vue supplies only the
+// lifecycle: a render that rebuilds the leaf each pass + a post-commit reconcile (onMounted/
+// onUpdated) + a function ref. The per-frame path is unchanged and NEVER goes through Vue
+// render: value.setValue / animation -> flushValue -> AnimatedProps.update() -> setNativeProps(node).
 import { defineComponent, h, onBeforeUnmount, onMounted, onUpdated, shallowRef, } from '@vue/runtime-core';
-import { AnimatedProps, attachNativeEventHandler, isNativeAnimatedAvailable, reduceProps, readPassthroughStyle, resolveHostNode, } from '@symbiote-native/engine';
+import { createAnimatedLeafLifecycle, isNativeAnimatedAvailable, isSymbioteNode, reduceProps, readPassthroughStyle, resolveHostNode, } from '@symbiote-native/engine';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 // RN's prop carrying explicit (already-rasterized) values that override the animated prop in
 // the COMMITTED props (sticky-header passthrough). Named once here so render/reconcile agree.
 const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
-// A base component is either a functional component (View / Text / Image, a function) or a
-// stateful defineComponent (ScrollView, an object). Read its display name without a cast for
-// the wrapper's devtools name.
+// Reads either a functional component's or a stateful defineComponent's display name, without a
+// cast, for the wrapper's devtools name.
 function baseName(component) {
-    if (component === null || (typeof component !== 'function' && typeof component !== 'object')) {
+    if (component === null ||
+        (typeof component !== 'function' && typeof component !== 'object')) {
         return 'Anonymous';
     }
     const display = Reflect.get(component, 'displayName');
@@ -37,86 +31,35 @@ export function createAnimatedComponent(Component) {
         name: `Animated(${baseName(Component)})`,
         inheritAttrs: false,
         setup(_props, { attrs: rawAttrs, slots, expose }) {
-            // The committed host node, held by IDENTITY in a shallowRef (the reactivity rule: a deep
-            // ref() would run it through toReactive() and hand back a Proxy, so AnimatedProps.setNativeView
-            // / attachNativeEventHandler would miss the engine's WeakMap mirror, keyed on the raw node).
-            // Same rule as Switch / ScrollView host nodes.
+            // shallowRef, not ref: a deep ref() would run it through toReactive() and hand back a
+            // Proxy, missing the engine's WeakMap mirror. Same rule as Switch / ScrollView host nodes.
             const nodeRef = shallowRef(null);
-            // The base component's public instance (a ScrollView handle, or the host node for View).
-            // Forwarded to a parent ref via expose(). shallowRef: it may itself BE an engine node.
+            // The base component's public instance (a ScrollView handle, or the host node for View),
+            // forwarded to a parent ref via expose(). shallowRef: it may itself BE an engine node.
             const instanceRef = shallowRef(null);
-            // The AnimatedProps leaf the next reconcile should wire in, rebuilt by render each pass
-            // (like React's per-render useMemo(rest)). Plain (non-reactive) so writing it in render
-            // triggers no reactive effect. `attached` is the leaf currently in the value graph.
-            let pendingLeaf = null;
-            let attached = null;
-            // The current non-passthrough props, kept so the post-commit event-attach can re-scan them.
+            // The leaf lifecycle - build/swap/bind/detach, and the rebuild-vs-skip decision - is the
+            // engine's, shared by every adapter (core/engine/src/animated/leaf-lifecycle.ts). Vue owns
+            // only WHEN to run it: after mount and after every re-render, which is when `currentRest`
+            // has just been refreshed by the render function below.
+            const lifecycle = createAnimatedLeafLifecycle('vue');
+            // The props the next reconcile should wire in, refreshed by render each pass.
             let currentRest = {};
             let wantsNative = false;
-            // Detachers for any Animated.event prop bound natively to the committed node (JS path: none).
-            let eventDetachers = [];
-            function detachEvents() {
-                for (const detach of eventDetachers)
-                    detach();
-                eventDetachers = [];
-            }
-            // Native-attach any Animated.event prop (e.g. onScroll={Animated.event(…,{useNativeDriver:true})})
-            // to the committed node. attachNativeEventHandler no-ops (returns undefined) unless the prop is a
-            // native event handler with a committed tag, so the JS path stays the fallback. Rebound on every
-            // reconcile so a new inline event re-attaches; detached first to avoid leaking the prior binding.
-            function attachEvents() {
-                detachEvents();
-                const node = nodeRef.value;
-                if (node === null)
-                    return;
-                for (const key of Object.keys(currentRest)) {
-                    const attachment = attachNativeEventHandler(node, key, currentRest[key]);
-                    if (attachment !== undefined)
-                        eventDetachers.push(attachment.detach);
-                }
-            }
-            // Post-commit reconcile (onMounted first paint, onUpdated every re-render, the Vue twin of a
-            // post-commit useEffect). Attach the NEW leaf BEFORE detaching the OLD one: order is load-bearing.
-            // A shared Value self-detaches (and drops its native node) the instant its child count hits
-            // zero, so detaching first would kill a running native animation on any unrelated re-render
-            // (mirrors RN's AnimatedComponent._attachProps). Then bind the captured node, go native if wanted,
-            // and rebind native events.
             function reconcile() {
-                const newLeaf = pendingLeaf;
-                if (newLeaf === null)
-                    return;
-                newLeaf.__attach();
-                if (attached !== null && attached !== newLeaf)
-                    attached.__detach();
-                attached = newLeaf;
-                const node = nodeRef.value;
-                if (node !== null)
-                    newLeaf.setNativeView(node);
-                if (wantsNative)
-                    newLeaf.__makeNative();
-                attachEvents();
+                lifecycle.reconcile(currentRest, isSymbioteNode(nodeRef.value) ? nodeRef.value : null, wantsNative);
             }
             onMounted(reconcile);
             onUpdated(reconcile);
-            // Final teardown: detach the last-attached leaf and any native events on unmount.
-            onBeforeUnmount(() => {
-                detachEvents();
-                if (attached !== null) {
-                    attached.__detach();
-                    attached = null;
-                }
-            });
-            // Function ref (held stably, so Vue doesn't re-invoke it per patch). On mount the base hands
-            // back its public instance; resolve it to the underlying host node (unwrapping a scroll-container
-            // handle via getScrollNode), record THAT for the leaf binding / event attach, and keep the
-            // ORIGINAL instance for ref forwarding. Vue calls it with null on unmount, node clears.
+            onBeforeUnmount(() => lifecycle.teardown());
+            // On mount the base hands back its public instance; resolve it to the underlying host node
+            // (unwrapping a scroll-container handle via getScrollNode) for the leaf binding / event
+            // attach, and keep the ORIGINAL instance for ref forwarding.
             const captureRef = (instance) => {
                 instanceRef.value = instance;
                 nodeRef.value = resolveHostNode(instance);
             };
-            // Forward the caller's ref to the base instance: a parent ref on Animated.ScrollView still gets
-            // scrollTo (the exposed handle), on Animated.View the host node. A delegating proxy because the
-            // instance is captured async (after mount), so a snapshot exposed at setup time would be null.
+            // A delegating proxy because the instance is captured async (after mount), so a snapshot
+            // exposed at setup time would be null.
             expose(new Proxy(Object.create(null), {
                 get: (_target, key) => {
                     const instance = instanceRef.value;
@@ -126,15 +69,15 @@ export function createAnimatedComponent(Component) {
                 },
                 has: (_target, key) => {
                     const instance = instanceRef.value;
-                    return instance !== null && typeof instance === 'object' && Reflect.has(instance, key);
+                    return (instance !== null &&
+                        typeof instance === 'object' &&
+                        Reflect.has(instance, key));
                 },
             }));
             return () => {
-                // Fold kebab template props to camelCase before splitting (idempotent: the base component
-                // normalizes too, but keep `rest`/reduceProps on the RN contract here as well).
                 const attrs = normalizeVueAttrs(rawAttrs);
-                // Split the incoming attrs into the passthrough (consumed) and the rest (forwarded). The
-                // passthrough never reaches the base as a prop; it only overrides the committed style below.
+                // Split into the passthrough (consumed) and the rest (forwarded). The passthrough never
+                // reaches the base as a prop; it only overrides the committed style below.
                 const rest = {};
                 let passthrough;
                 for (const key of Object.keys(attrs)) {
@@ -146,23 +89,25 @@ export function createAnimatedComponent(Component) {
                 }
                 currentRest = rest;
                 // Native driving is opt-in per the passthrough prop AND requires a real native module;
-                // headless / unsupported hosts keep the JS flush path (and the JS smokes green).
+                // headless/unsupported hosts keep the JS flush path.
                 wantsNative = passthrough != null && isNativeAnimatedAvailable();
-                // One AnimatedProps leaf per render pass (rebuilt like React's useMemo(rest)); the post-commit
-                // reconcile wires it into the graph and swaps the previous one out.
-                pendingLeaf = new AnimatedProps(rest);
-                // Reduced props are concrete (animated nodes replaced by their current values) so the first
-                // paint carries real values, exactly like React's first render.
+                // Reduced props are concrete (animated nodes replaced by their current values) so the
+                // first paint carries real values.
                 const reduced = reduceProps(rest);
-                // Override the committed style with the explicit passthrough values (last wins via the style
-                // array, which the commit layer flattens) so the ShadowTree carries the current transform.
+                // Override the committed style with the explicit passthrough values (last wins via the
+                // style array) so the ShadowTree carries the current transform.
                 const passthroughStyle = readPassthroughStyle(passthrough);
                 if (passthroughStyle !== undefined) {
                     reduced.style =
-                        reduced.style === undefined ? passthroughStyle : [reduced.style, passthroughStyle];
+                        reduced.style === undefined
+                            ? passthroughStyle
+                            : [reduced.style, passthroughStyle];
                 }
                 reduced.ref = captureRef;
-                return h(Component, reduced, slots.default !== undefined ? { default: slots.default } : undefined);
+                // Forward the WHOLE slots object, not just `default`: the list containers take their
+                // content through named scoped slots (`item`, `sectionHeader`, ...), which a default-only
+                // forward drops silently - Animated.FlatList would commit empty cells.
+                return h(Component, reduced, slots);
             };
         },
     });

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

@@ -51,5 +51,7 @@ export declare const Animated: {
         [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>;
+    FlatList: ReturnType<typeof createAnimatedComponent>;
+    SectionList: ReturnType<typeof createAnimatedComponent>;
     createAnimatedComponent: typeof createAnimatedComponent;
 };

package/build/modules/animated/index.js

@@ -1,12 +1,14 @@
-// The Animated namespace for @symbiote-native/vue: the Vue twin of adapters/react/src/animated/index.ts.
-// createAnimatedComponent applied to the Vue primitives gives Animated.View / Text / Image; the
-// value graph, easing and imperative drivers come from @symbiote-native/engine (framework-agnostic,
-// JS-driven), spread in verbatim. Both halves meet here so the familiar surface,
-// `Animated.timing(new Animated.Value(0), …).start()`, works against the Vue-driven engine.
+// The Animated namespace for @symbiote-native/vue. createAnimatedComponent applied to the Vue
+// primitives gives Animated.View/Text/Image; the value graph, easing and imperative drivers come
+// from @symbiote-native/engine (framework-agnostic, JS-driven), spread in verbatim. Both halves
+// 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
@@ -14,15 +16,15 @@ export { createAnimatedComponent } from './create-animated-component.js';
 const AnimatedView = createAnimatedComponent(View);
 const AnimatedText = createAnimatedComponent(Text);
 const AnimatedImage = createAnimatedComponent(Image);
-// ScrollView is wrapped behind a LAZY, memoized getter, mirroring RN's `get ScrollView()` and the
-// React adapter: ScrollView's module chain imports this Animated namespace back (sticky headers,
-// Phase 3), so a static createAnimatedComponent(ScrollView) at init could read ScrollView inside
-// its own TDZ. A memoized getter defers the wrap past module init, so the cycle never fires.
+// 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;
-// FlatList / SectionList: DEFERRED. The Vue adapter has no FlatList/SectionList base component yet
-// (the React adapter does), so there is nothing to wrap; Animated.FlatList / Animated.SectionList
-// are intentionally OMITTED, not faked. They land once those base components exist (you cannot wrap
-// a component that does not exist). This is a named gap, not a silent drop.
+let animatedFlatList;
+let animatedSectionList;
 // The live, JS-driven driver namespace (real frames). RN's AnimatedImplementation.
 const liveDrivers = {
     Value: AnimatedValue,
@@ -48,10 +50,9 @@ const liveDrivers = {
     unforkEvent,
 };
 // RN swaps the WHOLE driver namespace for the mock when the host reports isDisableAnimations
-// (reduced motion / test env): the mock keeps the same surface but jumps each animation to its
-// final value synchronously, no frames. The animated COMPONENTS (View/Text/Image + the lazy
-// ScrollView getter) are live in both branches; only the drivers/value/operators/events half is
-// swapped, exactly like RN spreading `...Animated` (impl or mock) over the same component getters.
+// (reduced motion/test env): the mock keeps the same surface but jumps each animation to its
+// final value synchronously, no frames. The animated COMPONENTS stay live in both branches; only
+// the drivers/value/operators/events half is swapped.
 const drivers = Platform.isDisableAnimations ? AnimatedMock : liveDrivers;
 export const Animated = {
     View: AnimatedView,
@@ -61,6 +62,14 @@ export const Animated = {
         animatedScrollView ??= createAnimatedComponent(ScrollView);
         return animatedScrollView;
     },
+    get FlatList() {
+        animatedFlatList ??= createAnimatedComponent(FlatList);
+        return animatedFlatList;
+    },
+    get SectionList() {
+        animatedSectionList ??= createAnimatedComponent(SectionList);
+        return animatedSectionList;
+    },
     createAnimatedComponent,
     ...drivers,
 };

package/build/modules/app-registry/index.js

@@ -2,12 +2,10 @@
 //   AppRegistry.registerComponent(appKey, () => App)
 // The registry bookkeeping (sections, host-registrar bridge, headless tasks) is
 // framework-agnostic and lives in @symbiote-native/engine's createAppRegistry; this file supplies
-// only the one Vue-specific seam — building a runnable from a component provider via a
-// synthetic functional root (h() has no createElement-style prop/children spread of its
-// own targets, so the wrap step is a render function rather than an object merge) — so
-// examples/vue-sfc's own registerRunnable + mount call can move onto the same entry point
-// React already has.
-import { h } from '@vue/runtime-core';
+// only the one Vue-specific seam - building a runnable from a component provider via a synthetic
+// functional root (h() has no createElement-style prop/children spread of its own targets, so
+// the wrap step is a render function rather than an object merge).
+import { h, } from '@vue/runtime-core';
 import { createAppRegistry, dlog, } from '@symbiote-native/engine';
 import { mount } from '../../render.js';
 function runnableFor(componentProvider, getWrapperComponentProvider) {
@@ -15,16 +13,16 @@ function runnableFor(componentProvider, getWrapperComponentProvider) {
         dlog(`AppRegistry: mounting on rootTag ${String(appParameters.rootTag)}`);
         const rootComponent = componentProvider();
         const renderRoot = () => h(rootComponent, appParameters.initialProps);
-        // Wrap the root when a provider is set, mirroring RN's `registerComponent` passing
-        // `wrapperComponentProvider && wrapperComponentProvider(...)` into renderApplication
-        // (AppRegistryImpl.js:80) — Vue's equivalent of React's createElement(Wrapper, null,
-        // element) is a default-slot render, since Vue has no standalone element value to nest.
-        // Read live (not at registration time) so setWrapperComponentProvider affects every
-        // runnable's next run, not just future ones.
+        // Wrap the root when a provider is set, mirroring RN's `registerComponent`. Vue's equivalent
+        // of React's createElement(Wrapper, null, element) is a default-slot render, since Vue has
+        // no standalone element value to nest. Read live so setWrapperComponentProvider affects
+        // every runnable's next run, not just future ones.
         const wrapperComponentProvider = getWrapperComponentProvider();
         const mounted = wrapperComponentProvider === undefined
             ? renderRoot
-            : () => h(wrapperComponentProvider(appParameters), null, { default: renderRoot });
+            : () => h(wrapperComponentProvider(appParameters), null, {
+                default: renderRoot,
+            });
         mount(appParameters.rootTag, mounted);
     };
 }