@symbiote-native/vue 0.4.0 → 1.0.0

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

@@ -1,11 +1,10 @@
 // findNodeHandle, the Vue adapter twin of adapters/react/src/host-instance.ts. RN's
 // "ref/instance -> native reactTag" lookup, the seam imperative-interop libraries
 // (reanimated, gesture-handler, react-navigation) reach through. A Vue template/function ref
-// to a symbiote host element falls through to the raw engine SymbioteNode, and the Vue
-// renderer grafts the public-instance API onto it (toPublicInstance in renderer.ts), so the
-// node a ref receives carries measure / setNativeProps / focus exactly like React's
-// getPublicInstance. IHostInstance is therefore that grafted node — re-exported from the
-// engine so React and Vue share one definition.
+// to a symbiote host element falls through to the raw engine SymbioteNode, which already carries
+// measure / setNativeProps / focus on its prototype, exactly like React's getPublicInstance.
+// IHostInstance is therefore that node — re-exported from the engine so React and Vue share one
+// definition.
 //
 // The node -> tag resolution itself belongs to the engine (getNativeTag, keyed on the raw
 // node in the commit mirror); this only unwraps the Vue-shaped inputs (a Ref or a bare node)
@@ -13,7 +12,9 @@
 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,7 @@
-export { mount, unmount } from './render';
+import './register';
+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 +24,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 +36,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 +59,10 @@ 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, setDeviceEventSource } 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';

package/build/index.js

@@ -1,8 +1,19 @@
 // @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';
-// Teleport stays same-surface-only by design - see create-tunnel.ts for why.
+// 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
+// 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';
+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';
 // IHostInstance is the raw engine node (Vue host refs fall through to it; imperative methods
@@ -50,7 +61,7 @@ export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, }
 // 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.
 // setDeviceEventSource is the third seam of the same set and travels with them.
-export { setNativeViewConfigSource, setDeviceEventSource } from '@symbiote-native/engine';
+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.d.ts

@@ -1,4 +1,4 @@
 import { type Component } from '@vue/runtime-core';
-export declare function createAnimatedComponent(Component: Component): import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+export declare function createAnimatedComponent(Component: Component | string): import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -12,9 +12,13 @@ import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 // the COMMITTED props (sticky-header passthrough). Named once here so render/reconcile agree.
 const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
 // Reads either a functional component's or a stateful defineComponent's display name, without a
-// cast, for the wrapper's devtools name.
+// cast, for the wrapper's devtools name. A string base IS its own name — an intrinsic tag carries
+// no displayName to read.
 function baseName(component) {
-    if (component === null || (typeof component !== 'function' && typeof component !== 'object')) {
+    if (typeof component === 'string')
+        return component;
+    if (component === null ||
+        (typeof component !== 'function' && typeof component !== 'object')) {
         return 'Anonymous';
     }
     const display = Reflect.get(component, 'displayName');
@@ -25,6 +29,8 @@ function baseName(component) {
         return name;
     return 'Anonymous';
 }
+// The base may be an intrinsic TAG, not only a component: `Animated.View` is built over `View`,
+// and a primitive that becomes a public tag hands this a string. `h()` takes either.
 export function createAnimatedComponent(Component) {
     return defineComponent({
         name: `Animated(${baseName(Component)})`,
@@ -68,7 +74,9 @@ 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 () => {
@@ -96,10 +104,24 @@ export function createAnimatedComponent(Component) {
                 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);
+                // The WHOLE slots object, for a component base AND for a tag base. 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.
+                //
+                // A string base needs no branch here, and the reason is worth recording because the code
+                // that reads it looks like it does. For an element Vue unwraps the object itself, calling
+                // `children.default()` and recursing on the RESULT rather than going back through `h`
+                // (`normalizeChildren`, the `shapeFlag & (1 | 64)` branch) — so a slot returning a lone
+                // VNode would be re-read as an object, found to have no `.default`, and dropped, with no
+                // error. That case cannot arise: Vue wraps every slot at initSlots so `slots.default()`
+                // returns an ARRAY whatever the author's function returned. Measured both spellings.
+                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

@@ -7,6 +7,8 @@ import { AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedMock, Easing, Pl
 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,12 +16,15 @@ export { createAnimatedComponent } from './create-animated-component.js';
 const AnimatedView = createAnimatedComponent(View);
 const AnimatedText = createAnimatedComponent(Text);
 const AnimatedImage = createAnimatedComponent(Image);
-// LAZY, memoized getter, mirroring RN's `get ScrollView()`: ScrollView's module chain imports
-// this Animated namespace back (sticky headers), so a static createAnimatedComponent(ScrollView)
-// at init could read ScrollView inside its own TDZ. Deferring the wrap past module init avoids the cycle.
+// 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;
-// Animated.FlatList / Animated.SectionList are intentionally OMITTED, not faked - 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,
@@ -57,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

@@ -5,7 +5,7 @@
 // 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 { h, } from '@vue/runtime-core';
 import { createAppRegistry, dlog, } from '@symbiote-native/engine';
 import { mount } from '../../render.js';
 function runnableFor(componentProvider, getWrapperComponentProvider) {
@@ -20,7 +20,9 @@ function runnableFor(componentProvider, getWrapperComponentProvider) {
         const wrapperComponentProvider = getWrapperComponentProvider();
         const mounted = wrapperComponentProvider === undefined
             ? renderRoot
-            : () => h(wrapperComponentProvider(appParameters), null, { default: renderRoot });
+            : () => h(wrapperComponentProvider(appParameters), null, {
+                default: renderRoot,
+            });
         mount(appParameters.rootTag, mounted);
     };
 }

package/build/modules/status-bar.js

@@ -6,14 +6,16 @@
 // prop change, with the imperative statics attached to the component object.
 //
 // Inputs arrive as attrs (untyped) and run through normalizeVueAttrs before each is narrowed by a guard.
-import { defineComponent, watchEffect } from '@vue/runtime-core';
+import { defineComponent, watchEffect, } from '@vue/runtime-core';
 import { applyStatusBarProps, statusBarImperative, statusBarCurrentHeight, isOpaqueColorValue, } from '@symbiote-native/engine';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function asBoolean(value) {
     return typeof value === 'boolean' ? value : undefined;
 }
 function asBarStyle(value) {
-    return value === 'default' || value === 'light-content' || value === 'dark-content'
+    return value === 'default' ||
+        value === 'light-content' ||
+        value === 'dark-content'
         ? value
         : undefined;
 }

package/build/register.d.ts

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

package/build/register.js

@@ -0,0 +1,35 @@
+// Side-effect ONLY. This module exports nothing, on purpose.
+//
+// A lowered `<symbiote-pressable>` is an element, so the press machine lives on the engine node
+// instead of inside a component — and it gets there by `registerPressableBehavior()` having run
+// before the first node of that tag is created. The entry imports this file as a bare
+// `import './register';`.
+//
+// WHY IT CANNOT BE A RE-EXPORT, and why this file has no exports to re-export in the first place.
+// Metro turns on `inlineRequires` for production only: it moves a `require()` down to the first
+// place its binding is USED, and a barrel's `export { X } from './x'` compiles to a lazy getter. A
+// module reached only that way never evaluates unless something names X as a VALUE, so its
+// registration silently never happens — in RELEASE builds only, invisible to tsc, to vitest, and
+// even to grepping the bundle, because the code IS bundled and simply never runs. A bare
+// `import './register';` placed NEXT TO a re-export of the same specifier does not help either:
+// Babel merges the two into one dependency and the merged one stays lazy. See CLAUDE.md, "Never
+// make correctness depend on a module's load-time side effect".
+//
+// `adapters/vue/src/index.test.ts` pins the barrel against both halves of that.
+import { registerImageBehavior, registerInputAccessoryViewBehavior, registerPressableBehavior, registerSwitchBehavior, registerTextInputBehavior, } from '@symbiote-native/components';
+registerPressableBehavior();
+// Only the LOWERED tags carry this — the wrapper renders `symbiote-text-input-managed` and
+// keeps running its own lifecycle. One owner per node; see `component-names/shared.ts`.
+registerTextInputBehavior();
+// Same reason as TextInput: the wrapper renders `symbiote-switch-managed` and runs its own
+// lastNativeReport/snap-back lifecycle, so the engine's copy attaches only to the bare tag.
+registerSwitchBehavior();
+// Image owns no runtime — its behavior is a prop FOLD and nothing else, and it is registered on the
+// same `symbiote-image` the wrapper already emits rather than on a `-managed` twin. That is safe
+// only because the mapping is idempotent, which `core/components/src/behaviors/image.test.ts`
+// asserts rather than assumes; a wrapper-built node simply folds a second time and nothing moves.
+registerImageBehavior();
+// Fold-only, and it shares the wrapper's tag for the same reason Image does: the mapping has no
+// aliasing at all, so a wrapper-built node folding a second time moves nothing.
+// `core/components/src/behaviors/input-accessory-view.test.ts` asserts that rather than assuming it.
+registerInputAccessoryViewBehavior();

package/build/render.d.ts

@@ -1,5 +1,7 @@
 import { type IRootTag, type SymbioteSurface } from '@symbiote-native/engine';
-import type { Component } from '@vue/runtime-core';
+import type { App, Component } from '@vue/runtime-core';
+export type IAppConfigurator = (app: App) => void;
+export declare function setAppConfigurator(configure: IAppConfigurator | undefined): void;
 export declare function mount(rootTag: IRootTag, rootComponent: Component): SymbioteSurface;
 export declare function unmount(rootTag: IRootTag): void;
 declare global {

package/build/render.js

@@ -1,12 +1,71 @@
 // 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 { createSurface, disposeRoot, dlog, reportUncaughtError, } from '@symbiote-native/engine';
 import { createSymbioteRenderer } from './renderer/index.js';
 // 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();
+// A stack this deep already names the screen; the rest is noise in a redbox.
+const MAX_STACK_FRAMES = 20;
+// SFC components carry their name on `__name` (the compiler's), plain ones on `name`; neither is
+// on Vue's public `ConcreteComponent` type, hence the guarded read rather than a cast.
+function displayName(type) {
+    for (const key of ['name', '__name']) {
+        const value = Reflect.get(type, key);
+        if (typeof value === 'string' && value.length > 0)
+            return value;
+    }
+    return 'Anonymous';
+}
+// Vue's own component trace (getComponentTrace, used by `warn`) is internal, so the frames are
+// walked off the public instance's parent chain. LogBox renders whatever string it is handed;
+// React's shape is `\n    in <Name>`, and matching it keeps the redbox reading the same in an
+// app that mixes adapters' errors in one console.
+function componentStack(instance) {
+    if (instance === null)
+        return null;
+    const frames = [];
+    let current = instance.$;
+    while (current !== null && frames.length < MAX_STACK_FRAMES) {
+        frames.push(`\n    in ${displayName(current.type)}`);
+        current = current.parent;
+    }
+    return frames.length === 0 ? null : frames.join('');
+}
+// The app-level error seam. Without it, an unclaimed error fell through to Vue's own `logError`
+// (runtime-core errorHandling.ts), which does neither useful thing: in a dev bundle it RE-THROWS
+// out of `app.mount()`, so it escapes this function, aborts the AppRegistry runnable and leaves
+// the surface half-brought-up; in a release bundle it console.errors a bare error with no origin
+// and no component context, never touching `global.ErrorUtils`, so nothing reaches the host.
+// Setting a handler suppresses both branches and routes to the engine's shared channel instead —
+// the native redbox on a device, console.error off one.
+//
+// CAUGHT vs UNCAUGHT — the asymmetry is Vue's own, and it costs us no code. `handleError` walks
+// the `onErrorCaptured` chain BEFORE consulting `config.errorHandler`, and a hook returning
+// `false` stops propagation and returns early (runtime-core 3.5 errorHandling.ts), so a boundary
+// that claims the error never reaches this function at all. That is the behaviour we want and
+// the same split the React adapter makes by hand: writing a boundary IS the developer saying
+// "I am handling this", and answering it with a full-screen redbox over the fallback the app
+// just rendered contradicts what the app asked for.
+//
+// So do NOT "fix" this to report from inside an `onErrorCaptured` of our own — that would
+// re-report exactly the errors a boundary claimed. A hook that returns undefined instead of
+// `false` still lands here, and correctly: Vue treats that error as still propagating.
+function reportToHost(error, instance, info) {
+    // `info` is Vue's own phase label ('render function', 'setup function', 'native event
+    // handler'), which is the closest thing it has to React's "no error boundary" / "recovered"
+    // qualifier. Off a native host it prefixes the log line, where there is no redbox to carry it.
+    reportUncaughtError(error, {
+        origin: `vue render (${String(info)})`,
+        componentStack: componentStack(instance),
+    });
+}
+let configurator;
+export function setAppConfigurator(configure) {
+    configurator = configure;
+}
 function teardown(rootTag) {
     const app = apps.get(rootTag);
     if (app === undefined)
@@ -22,6 +81,8 @@ export function mount(rootTag, rootComponent) {
     const surface = createSurface(rootTag);
     const renderer = createSymbioteRenderer(surface);
     const app = renderer.createApp(rootComponent);
+    app.config.errorHandler = reportToHost;
+    configurator?.(app);
     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.

package/build/renderer/index.js

@@ -3,14 +3,47 @@
 // drives the exact same retained tree React does: the proof the core is framework-
 // agnostic.
 import { createRenderer } from '@vue/runtime-core';
-import { appendChild, createAnchor, createElement, createRawText, dlog, insertBefore, removeChild, routeProp, setText, toPublicInstance, RAW_TEXT_COMPONENT, SymbioteSurface, } from '@symbiote-native/engine';
+import { appendChild, createAnchor, createElement, createRawText, dlog, insertBefore, removeChild, routeProp, setProp, setText, toPublicInstance, RAW_TEXT_COMPONENT, SymbioteSurface, } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
+import { normalizeVueAttrKey } from '../utils/normalize-attrs.js';
 function isSurface(parent) {
     return parent instanceof SymbioteSurface;
 }
 function isRawText(node) {
     return node.component === RAW_TEXT_COMPONENT;
 }
+// RN's Text.js applies two defaults on the way to native (core/components/src/text-props.ts:
+// ellipsizeMode 'tail', allowFontScaling true unless literally false). The Vue <Text> wrapper
+// folded them with resolveTextProps; a template that the SFC transformer lowered to the
+// intrinsic `symbiote-text` has no wrapper, so the renderer seeds them instead. Without this a
+// numberOfLines={1} line clips mid-word with no ellipsis — device-observed, and silent.
+const TEXT_DEFAULTS = new Map([
+    ['ellipsizeMode', 'tail'],
+    ['allowFontScaling', true],
+]);
+function seedTextDefaults(node) {
+    for (const [key, value] of TEXT_DEFAULTS)
+        setProp(node, key, value);
+}
+// RN's `id` is the modern W3C-named alias for `nativeID` — View.js copies it over
+// (`processedProps.nativeID = id`), so the two name ONE native prop. React folds it in its
+// component wrapper and Svelte and Solid in their transforms; Vue had it nowhere, so `<View
+// id="x">` reached Fabric with an unknown `id` and no `nativeID`, silently and on device only.
+// It lives in the renderer rather than in a transform because that covers all four Vue paths at
+// once — lowered SFC, lowered TSX, the component wrapper, and a hand-written
+// `h('symbiote-view', { id })` no compiler ever sees.
+//
+// Caveat, and it matches what Solid's compile-time rename already does: with BOTH `id` and
+// `nativeID` on one element the last patchProp wins, where upstream gives `id` priority
+// unconditionally. Honouring that needs per-node state to remember an `id` arrived; no example or
+// test sets both, so the state is not worth carrying.
+const PROP_ALIASES = new Map([['id', 'nativeID']]);
+// An explicit `undefined` must NOT clear one of those defaults: RN treats a missing prop and an
+// explicit undefined alike, and only a literal `false` opts out of allowFontScaling. Reached
+// only when a value is already undefined, so it costs nothing on the hot path.
+function textDefaultFor(node, key) {
+    return node.isText ? TEXT_DEFAULTS.get(key) : undefined;
+}
 // One renderer per mounted surface: the options close over the surface so every mutation
 // can ask it to (microtask-coalesced) recommit. Vue has no resetAfterCommit; instead
 // requestCommit() collapses a burst of insert/patchProp within one tick into a single
@@ -19,13 +52,23 @@ export function createSymbioteRenderer(surface) {
     const options = {
         createElement(type) {
             const descriptor = descriptorFor(type);
-            const node = createElement(descriptor.component, descriptor.isText);
-            // Graft the imperative public-instance API (measure / setNativeProps / focus / …) onto
-            // the raw node so a template/function ref to a host element exposes it exactly like
-            // React's getPublicInstance. toPublicInstance mutates in place and returns the SAME node
-            // identity, so the engine commit mirror (keyed on the raw node) still resolves it — the
-            // ref must keep holding this raw node by identity (shallowRef), never a deep ref.
-            dlog(`vue createElement ${descriptor.component} -> public instance`);
+            // `type` as the third argument, not just `descriptor.component`: the behavior registry is
+            // keyed by the INTRINSIC TAG (`symbiote-pressable`), while a node only ever carries the
+            // resolved Fabric name (`RCTView`). This is the one place that still holds both, so a
+            // lowered primitive whose machine lives on the engine node can be matched at all.
+            const node = createElement(descriptor.component, descriptor.isText, type);
+            if (descriptor.isText)
+                seedTextDefaults(node);
+            // The imperative public-instance API (measure / setNativeProps / focus / …) is already on
+            // the node's prototype, so a template/function ref to a host element exposes it exactly
+            // like React's getPublicInstance and toPublicInstance is the identity. The ref must keep
+            // holding this raw node by identity (shallowRef), never a deep ref — the engine commit
+            // mirror is keyed on it.
+            //
+            // The message is a THUNK, not a template literal: this runs once per node — 9 000 times on
+            // one benchmark press — and a literal is built at the call site before dlog can decide
+            // anything (see core/engine/src/debug.ts).
+            dlog(() => `vue createElement ${descriptor.component} -> public instance`);
             return toPublicInstance(node);
         },
         createText(text) {
@@ -110,11 +153,17 @@ export function createSymbioteRenderer(surface) {
         patchProp(el, key, _prev, next) {
             if (isSurface(el))
                 return;
+            // Kebab -> camel happens HERE, not only inside a component wrapper: the SFC transformer
+            // lowers View/Text to their intrinsic tags (metro-vue-transformer.cjs), so those props
+            // arrive one key at a time with no component to fold the bag. Idempotent for the wrapped
+            // path, which already normalized.
+            const normalized = normalizeVueAttrKey(key);
+            const name = PROP_ALIASES.get(normalized) ?? normalized;
             // routeProp makes the prop-vs-event decision from the node's ViewConfig (onPress on a
             // View becomes a listener; onTintColor on a Switch stays a prop), shared with React. The
             // class/style merge (explicit :style always winning, regardless of which of Vue's two
             // independent patchProp calls lands last) is centralized there too (core/engine/src/node.ts).
-            routeProp(el, key, next);
+            routeProp(el, name, next === undefined ? textDefaultFor(el, name) : next);
             surface.requestCommit();
         },
         // RN has no querySelector / scope-id / innerHTML. The first two are inert; static