@symbiote-native/vue 0.1.0

package/build/index.js

@@ -0,0 +1,90 @@
+// @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';
+// createTunnel: cross-surface content sharing (Teleport stays same-surface-only by design —
+// see create-tunnel.ts and the vue-adapter-directives skill for why).
+export { createTunnel } from './create-tunnel';
+export { View, Text } from './components';
+// 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).
+export { findNodeHandle } from './host-instance';
+// 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';
+// 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 (ADR 0024): vertical + horizontal, every pass-through prop, the
+// synthesized onContentSizeChange, the imperative handle via expose() + shallowRef, RefreshControl
+// (iOS sibling / Android wrap, Phase 2), and sticky headers (Phase 3: 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';
+export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable';
+export { TouchableNativeFeedback } from './components/touchable-native-feedback';
+export { Button } from './components/button';
+// 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';
+// 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';
+export { FlatList } from './components/flat-list';
+export { VirtualizedSectionList } from './components/virtualized-section-list';
+export { SectionList } from './components/section-list';
+// Phase 2 (ADR 0024): SafeAreaView + RefreshControl, wired into ScrollView with the iOS-sibling /
+// Android-wrap platform split. RefreshControl hosts the wrapped scroll view via its default slot.
+export { SafeAreaView } from './components/safe-area-view';
+export { RefreshControl } from './components/refresh-control';
+export { descriptorToVue } from './descriptor-to-vue';
+// 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.
+export { normalizeVueAttrs } from './utils/normalize-attrs';
+// resolveModelValue/emitModelUpdate: the v-model (Rule 6, vue-adapter-events skill) 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';
+export { createSymbioteRenderer } from './renderer';
+// Animated (ADR 0024 Phase 3a): 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';
+// Visual components off the shared @symbiote-native/components layer (wave: simple-visual).
+export { ImageBackground } from './components/image-background';
+export { InputAccessoryView } from './components/input-accessory-view';
+export { Modal } from './components/modal';
+// KeyboardAvoidingView: full parity via the shared inset math; Vue owns the Keyboard subscription.
+export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
+// StatusBar: declarative component + the shared imperative API.
+export { StatusBar } from './modules/status-bar';
+// 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.
+export { AppRegistry, setHostRegistrar } from './modules/app-registry';
+// Vue composables over the core device-state modules.
+export { useColorScheme } from './composables/use-color-scheme';
+export { useWindowDimensions } from './composables/use-window-dimensions';
+// Imperative runtime modules: the SAME module both adapters share, re-exported from @symbiote-native/engine.
+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';
+// Re-export the framework-agnostic engine surface (pure utilities + diagnostics).
+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';
+// 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.d.ts

@@ -0,0 +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, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,169 @@
+// 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 (ADR 0016). 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).
+import { defineComponent, h, onBeforeUnmount, onMounted, onUpdated, shallowRef, } from '@vue/runtime-core';
+import { AnimatedProps, attachNativeEventHandler, isNativeAnimatedAvailable, reduceProps, readPassthroughStyle, resolveHostNode, } from '@symbiote-native/engine';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+// 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.
+function baseName(component) {
+    if (component === null || (typeof component !== 'function' && typeof component !== 'object')) {
+        return 'Anonymous';
+    }
+    const display = Reflect.get(component, 'displayName');
+    if (typeof display === 'string')
+        return display;
+    const name = Reflect.get(component, 'name');
+    if (typeof name === 'string')
+        return name;
+    return 'Anonymous';
+}
+export function createAnimatedComponent(Component) {
+    return defineComponent({
+        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).
+            // See .claude/skills/vue-adapter-reactivity. 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.
+            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.
+            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();
+            }
+            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.
+            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.
+            expose(new Proxy(Object.create(null), {
+                get: (_target, key) => {
+                    const instance = instanceRef.value;
+                    if (instance === null || typeof instance !== 'object')
+                        return undefined;
+                    return Reflect.get(instance, key);
+                },
+                has: (_target, key) => {
+                    const instance = instanceRef.value;
+                    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.
+                const rest = {};
+                let passthrough;
+                for (const key of Object.keys(attrs)) {
+                    if (key === PASSTHROUGH_PROP) {
+                        passthrough = attrs[key];
+                        continue;
+                    }
+                    rest[key] = attrs[key];
+                }
+                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).
+                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.
+                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.
+                const passthroughStyle = readPassthroughStyle(passthrough);
+                if (passthroughStyle !== undefined) {
+                    reduced.style =
+                        reduced.style === undefined ? passthroughStyle : [reduced.style, passthroughStyle];
+                }
+                reduced.ref = captureRef;
+                return h(Component, reduced, slots.default !== undefined ? { default: slots.default } : undefined);
+            };
+        },
+    });
+}

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

@@ -0,0 +1,55 @@
+import { AnimatedValue, AnimatedValueXY, AnimatedColor, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent } from '@symbiote-native/engine';
+import { createAnimatedComponent } from './create-animated-component';
+export { createAnimatedComponent } from './create-animated-component';
+export declare const Animated: {
+    Value: typeof AnimatedValue;
+    ValueXY: typeof AnimatedValueXY;
+    Color: typeof AnimatedColor;
+    Easing: {
+        step0(n: number): number;
+        step1(n: number): number;
+        linear(t: number): number;
+        ease(t: number): number;
+        quad(t: number): number;
+        cubic(t: number): number;
+        poly(n: number): import("@symbiote-native/engine").IEasingFunction;
+        sin(t: number): number;
+        circle(t: number): number;
+        exp(t: number): number;
+        elastic(bounciness?: number): import("@symbiote-native/engine").IEasingFunction;
+        back(s?: number): import("@symbiote-native/engine").IEasingFunction;
+        bounce(t: number): number;
+        bezier(x1: number, y1: number, x2: number, y2: number): import("@symbiote-native/engine").IEasingFunction;
+        in(easing: import("@symbiote-native/engine").IEasingFunction): import("@symbiote-native/engine").IEasingFunction;
+        out(easing: import("@symbiote-native/engine").IEasingFunction): import("@symbiote-native/engine").IEasingFunction;
+        inOut(easing: import("@symbiote-native/engine").IEasingFunction): import("@symbiote-native/engine").IEasingFunction;
+    };
+    timing: typeof timing;
+    spring: typeof spring;
+    decay: typeof decay;
+    parallel: typeof parallel;
+    sequence: typeof sequence;
+    stagger: typeof stagger;
+    loop: typeof loop;
+    delay: typeof delay;
+    add: typeof add;
+    subtract: typeof subtract;
+    multiply: typeof multiply;
+    divide: typeof divide;
+    modulo: typeof modulo;
+    diffClamp: typeof diffClamp;
+    event: typeof event;
+    forkEvent: typeof forkEvent;
+    unforkEvent: typeof unforkEvent;
+    View: 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>;
+    Text: 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>;
+    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>;
+    createAnimatedComponent: typeof createAnimatedComponent;
+};

package/build/modules/animated/index.js

@@ -0,0 +1,66 @@
+// 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, ADR 0016), spread in verbatim. Both halves meet here so the familiar surface,
+// `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';
+import { Image } from '../../components/image';
+import { ScrollView } from '../../components/scroll-view';
+import { createAnimatedComponent } from './create-animated-component';
+export { createAnimatedComponent } from './create-animated-component';
+// 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);
+// 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.
+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.
+// The live, JS-driven driver namespace (real frames). RN's AnimatedImplementation.
+const liveDrivers = {
+    Value: AnimatedValue,
+    ValueXY: AnimatedValueXY,
+    Color: AnimatedColor,
+    Easing,
+    timing,
+    spring,
+    decay,
+    parallel,
+    sequence,
+    stagger,
+    loop,
+    delay,
+    add,
+    subtract,
+    multiply,
+    divide,
+    modulo,
+    diffClamp,
+    event,
+    forkEvent,
+    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.
+const drivers = Platform.isDisableAnimations ? AnimatedMock : liveDrivers;
+export const Animated = {
+    View: AnimatedView,
+    Text: AnimatedText,
+    Image: AnimatedImage,
+    get ScrollView() {
+        animatedScrollView ??= createAnimatedComponent(ScrollView);
+        return animatedScrollView;
+    },
+    createAnimatedComponent,
+    ...drivers,
+};

package/build/modules/app-registry/index.d.ts

@@ -0,0 +1,7 @@
+import { type Component } from '@vue/runtime-core';
+import { type IAppParameters } from '@symbiote-native/engine';
+export type IComponentProvider = () => Component;
+export type IWrapperComponentProvider = (appParameters: IAppParameters) => Component;
+declare const AppRegistry: import("@symbiote-native/engine").IAppRegistry<IComponentProvider, IWrapperComponentProvider>, setHostRegistrar: (registrar: import("@symbiote-native/engine").IHostRegistrar) => void;
+export { AppRegistry, setHostRegistrar };
+export type { IAppParameters, IRunnable, IHostRegistrar, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from '@symbiote-native/engine';

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

@@ -0,0 +1,32 @@
+// AppRegistry: the JS entry point RN apps already use:
+//   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';
+import { createAppRegistry, dlog, } from '@symbiote-native/engine';
+import { mount } from '../../render';
+function runnableFor(componentProvider, getWrapperComponentProvider) {
+    return appParameters => {
+        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.
+        const wrapperComponentProvider = getWrapperComponentProvider();
+        const mounted = wrapperComponentProvider === undefined
+            ? renderRoot
+            : () => h(wrapperComponentProvider(appParameters), null, { default: renderRoot });
+        mount(appParameters.rootTag, mounted);
+    };
+}
+const { AppRegistry, setHostRegistrar } = createAppRegistry(runnableFor);
+export { AppRegistry, setHostRegistrar };

package/build/modules/status-bar.d.ts

@@ -0,0 +1,17 @@
+export type { IStatusBarProps, IStatusBarStyle } from '@symbiote-native/engine';
+declare const StatusBarWithStatics: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, () => null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, () => null, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, () => null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@symbiote-native/engine").IStatusBarImperative;
+export declare const StatusBar: typeof StatusBarWithStatics & {
+    readonly currentHeight?: number;
+};

package/build/modules/status-bar.js

@@ -0,0 +1,65 @@
+// StatusBar, the Vue lifecycle half. The native StatusBarManager driving (applyStatusBarProps),
+// the imperative statics (statusBarImperative), and the Android bar-height constant all live in
+// @symbiote-native/engine, shared verbatim with React; Metro selects the engine's status-bar.ios.ts /
+// status-bar.android.ts per host, so the platform divergence never reaches this file. Vue supplies
+// only the declarative shape: a component that renders NOTHING and re-applies the props through a
+// watchEffect on mount + every prop change, with the imperative statics attached to the component
+// object (RN's StatusBar: the value doubles as the imperative namespace, like the Vue Image).
+//
+// Renders null (no Fabric view), so it follows neither the descriptor split nor a host-node ref:
+// the "else keep its current shape" path of the StatusBar component. Inputs arrive as attrs
+// (untyped) and run through normalizeVueAttrs (kebab→camel) before each is narrowed by a guard.
+import { defineComponent, watchEffect } from '@vue/runtime-core';
+import { applyStatusBarProps, statusBarImperative, statusBarCurrentHeight, isOpaqueColorValue, } from '@symbiote-native/engine';
+import { normalizeVueAttrs } from '../utils/normalize-attrs';
+function asBoolean(value) {
+    return typeof value === 'boolean' ? value : undefined;
+}
+function asBarStyle(value) {
+    return value === 'default' || value === 'light-content' || value === 'dark-content'
+        ? value
+        : undefined;
+}
+// backgroundColor is a string / int / opaque PlatformColor; any other shape is dropped. A runtime
+// guard at the untyped-attrs boundary, not a cast.
+function asColorValue(value) {
+    if (typeof value === 'string')
+        return value;
+    if (isOpaqueColorValue(value))
+        return value;
+    return undefined;
+}
+function buildProps(attrs) {
+    return {
+        barStyle: asBarStyle(attrs.barStyle),
+        hidden: asBoolean(attrs.hidden),
+        animated: asBoolean(attrs.animated),
+        networkActivityIndicatorVisible: asBoolean(attrs.networkActivityIndicatorVisible),
+        backgroundColor: asColorValue(attrs.backgroundColor),
+        translucent: asBoolean(attrs.translucent),
+    };
+}
+const StatusBarComponent = defineComponent({
+    name: 'StatusBar',
+    inheritAttrs: false,
+    setup(_props, { attrs: rawAttrs }) {
+        // watchEffect tracks rawAttrs (reactive), so reading it here re-applies on every prop change:
+        // the Vue twin of React's useEffect over the prop deps. Resolution is lazy inside the engine
+        // (a missing StatusBarManager is a no-op), so this never crashes a render.
+        watchEffect(() => {
+            applyStatusBarProps(buildProps(normalizeVueAttrs(rawAttrs)));
+        });
+        // Renders nothing: StatusBar has no Fabric view, exactly like React's `return null`.
+        return () => null;
+    },
+});
+const StatusBarWithStatics = Object.assign(StatusBarComponent, statusBarImperative);
+// Android exposes the bar height as a native constant; undefined on iOS / when absent. Read lazily
+// (getter) so nothing touches native at import time; the Android engine impl resolves on access.
+Object.defineProperty(StatusBarWithStatics, 'currentHeight', {
+    get: statusBarCurrentHeight,
+    enumerable: true,
+});
+// currentHeight is optional, so the defineProperty-added accessor doesn't need to appear on the
+// runtime object's inferred type for this assignment to hold (no cast).
+export const StatusBar = StatusBarWithStatics;

package/build/render.d.ts

@@ -0,0 +1,7 @@
+import { type IRootTag, type SymbioteSurface } from '@symbiote-native/engine';
+import type { Component } from '@vue/runtime-core';
+export declare function mount(rootTag: IRootTag, rootComponent: Component): SymbioteSurface;
+export declare function unmount(rootTag: IRootTag): void;
+declare global {
+    var RN$stopSurface: ((surfaceId: number) => void) | undefined;
+}

package/build/render.js

@@ -0,0 +1,43 @@
+// Mount a Vue app onto a Fabric surface. The native host hands us a rootTag; we create
+// a surface for it and let the Vue renderer drive the engine, which commits into
+// nativeFabricUIManager; RN's own renderer never in the path.
+import { createSurface, disposeRoot, dlog, } from '@symbiote-native/engine';
+import { createSymbioteRenderer } from './renderer';
+// One Vue app per surface, so a surface can be torn down (unmount) or cleanly
+// re-mounted on the same rootTag: the bridgeless host stops and restarts a surface on
+// Fast Refresh and on lifecycle/focus changes, reusing the rootTag.
+const apps = new Map();
+function teardown(rootTag) {
+    const app = apps.get(rootTag);
+    if (app === undefined)
+        return;
+    app.unmount();
+    apps.delete(rootTag);
+    disposeRoot(rootTag);
+}
+export function mount(rootTag, rootComponent) {
+    // A re-mount on a live rootTag starts clean; otherwise the stale app double-drives
+    // the surface.
+    teardown(rootTag);
+    const surface = createSurface(rootTag);
+    const renderer = createSymbioteRenderer(surface);
+    const app = renderer.createApp(rootComponent);
+    apps.set(rootTag, app);
+    // The surface IS the Vue container: a top-level mutation routes to surface.appendChild
+    // (renderer.ts), and the engine wraps surface.children in its synthetic flex root.
+    app.mount(surface);
+    return surface;
+}
+// Tear down a surface by rootTag: the public pair of `mount`, and the JS half of the
+// bridgeless `RN$stopSurface` contract (see installStopSurfaceGlobal).
+export function unmount(rootTag) {
+    dlog(`unmount root=${rootTag}`);
+    teardown(rootTag);
+}
+function installStopSurfaceGlobal() {
+    globalThis.RN$stopSurface = (surfaceId) => {
+        unmount(surfaceId);
+    };
+    dlog('installed global.RN$stopSurface');
+}
+installStopSurfaceGlobal();

package/build/renderer.d.ts

@@ -0,0 +1,4 @@
+import { SymbioteSurface, type ISymbioteNode } from '@symbiote-native/engine';
+type IHostElement = ISymbioteNode | SymbioteSurface;
+export declare function createSymbioteRenderer(surface: SymbioteSurface): import("vue").Renderer<IHostElement>;
+export {};