@symbiote-native/vue 0.5.0 → 2.0.0

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

@@ -12,8 +12,11 @@ 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 (typeof component === 'string')
+        return component;
     if (component === null ||
         (typeof component !== 'function' && typeof component !== 'object')) {
         return 'Anonymous';
@@ -26,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)})`,
@@ -104,9 +109,18 @@ export function createAnimatedComponent(Component) {
                             : [reduced.style, passthroughStyle];
                 }
                 reduced.ref = captureRef;
-                // 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.
+                // 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

@@ -50,7 +50,9 @@ export declare const Animated: {
     Image: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-    ScrollView: ReturnType<typeof createAnimatedComponent>;
+    ScrollView: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     FlatList: ReturnType<typeof createAnimatedComponent>;
     SectionList: ReturnType<typeof createAnimatedComponent>;
     createAnimatedComponent: typeof createAnimatedComponent;

package/build/modules/animated/index.js

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

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

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

package/build/modules/image/index.js

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

package/build/register.d.ts

@@ -0,0 +1 @@
+import '@symbiote-native/components/register';

package/build/register.js

@@ -0,0 +1,15 @@
+// Side-effect ONLY. Exports nothing, and must never be re-exported from the barrel.
+//
+// The fourteen calls live once, in `@symbiote-native/components/register` — they were identical in
+// all five adapters, and each copy carried a migration ledger justifying a call against a wrapper
+// that no longer exists. What is per-adapter is only the SPELLING of the import below: every
+// `*-tag.test.*` here reaches the registry through `import './register';`, and this adapter's own
+// barrel guard pins that line.
+//
+// WHY A SIDE-EFFECT SUBPATH AND NOT A BARREL EXPORT. Metro turns on `inlineRequires` for PRODUCTION
+// only: it moves a `require` down to the first place its binding is used as a VALUE, and
+// `export { X } from './x'` compiles to a lazy getter. A registration reached that way never
+// evaluates in a Release build — invisible to tsc, to vitest, and to grepping the bundle. A bare
+// `import` placed NEXT TO a re-export of the same specifier does not help either: Babel merges the
+// two into one dependency and the merged dependency stays lazy.
+import '@symbiote-native/components/register';

package/build/renderer/index.js

@@ -2,15 +2,86 @@
 // the engine's tiny mutation API; the engine owns all Fabric clone-on-write, so Vue
 // 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 { callWithErrorHandling, createRenderer, ErrorCodes, markRaw, } from '@vue/runtime-core';
+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 `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('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']]);
+// RN-style event prop naming ('onPress', 'onValueChange', ...), the same convention JSX itself
+// uses to separate an event from a plain value prop — good enough to decide whether to wrap,
+// without duplicating routeProp's own ViewConfig-derived event lists here.
+const EVENT_PROP_NAME = /^on[A-Z]/;
+// A native event (a Fabric touch, a responder gesture) invokes a Pressable/TextInput/etc.
+// listener straight out of the engine's own event dispatch (core/engine/src/dispatch.ts,
+// core/components/src/behaviors/pressable.ts's `dispatch`), entirely outside anything Vue ever
+// wraps — no render, no watcher, no lifecycle hook sits between the native event and the app's
+// callback. So a throw inside `onPress={throwNow}` was a genuinely UNCAUGHT JS exception: it
+// skipped `onErrorCaptured`, skipped `app.config.errorHandler`, skipped even this adapter's own
+// default reporter (render.ts's `reportToHost`) and reached Hermes's own top-level handler
+// directly — the raw, component-stack-less redbox this was device-reported as, not the "vue
+// render (...)" framed one `reportToHost` produces. Real Vue DOM has the identical seam
+// (`patchEvent`'s `createInvoker`) for the identical reason: a DOM event is native too.
+//
+// Wrapping here, at `patchProp`, needs the OWNING instance — and `getCurrentInstance()` cannot
+// supply it: Vue resets `currentRenderingInstance` at the END of `renderComponentRoot`, BEFORE
+// the subsequent `patch()` call that actually reaches `mountElement`/`patchProp`, so by the time
+// this runs it always reads null (measured via a real thrown press listener — `handleError` never
+// found the `onErrorCaptured` ancestor because `if (instance)` was false). Real Vue DOM does not
+// use `getCurrentInstance()` for this either: `hostPatchProp` is called with an explicit 6th
+// argument, `parentComponent`, threaded down through `patch`/`mountElement` from the component
+// whose render produced the vnode — the same instance the DOM renderer's own `patchEvent` passes
+// to `callWithAsyncErrorHandling`. That parameter, not the global pointer, is the correct capture.
+//
+// `callWithErrorHandling` (the SYNC form, not `callWithAsyncErrorHandling`) is deliberate: a
+// responder-negotiation callback (`onStartShouldSetResponder`, ...) returns a boolean the engine
+// reads synchronously, and the sync form is the one that returns the call's result directly
+// rather than folding it into promise-handling for the multi-hook case.
+function wrapListenerForErrorHandling(listener, instance) {
+    const wrapper = (...args) => callWithErrorHandling(listener, instance, ErrorCodes.NATIVE_EVENT_HANDLER, args);
+    // Some listeners are marker-carrying functions, not plain callbacks — Animated.event's
+    // __getHandler() (core/engine/src/animated/event.ts) hands back exactly this shape,
+    // `Object.assign((...) => {...}, { __getEvent: () => this })`, and the engine's native-driver
+    // attach path reads `__getEvent` off the prop value it was given. A fresh closure with none of
+    // the original's own properties silently breaks that — carry them forward.
+    return Object.assign(wrapper, listener);
+}
+// 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,14 +90,33 @@ 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`);
-            return toPublicInstance(node);
+            // `type` as the third argument, not just `descriptor.component`: the behavior registry is
+            // keyed by the INTRINSIC TAG (`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`);
+            // markRaw is load-bearing, not an optimization: useTemplateRef()'s return value is
+            // `readonly(shallowRef(null))` (runtime-core.cjs.js), and Vue's readonly() wraps ANY
+            // `.value` whose Object.prototype.toString reads "[object Object]" — true of a plain class
+            // instance, unlike a real DOM Element, which fails that check for free. Unmarked, a node
+            // reached through useTemplateRef() (not a plain ref()/shallowRef(), both of which skip the
+            // wrap) came back as a deep-readonly Proxy: reads worked, so `committedOf`/`whenCommitted`
+            // saw a "committed" node, but `setNativeProps`'s `node.props.style = …` silently no-op'd
+            // with a dev-only "Set operation… target is readonly" warning — device-reported 2026-09-11
+            // as "flash the right chip" doing nothing on press.
+            return markRaw(toPublicInstance(node));
         },
         createText(text) {
             // Vue mounts Fragment boundaries (v-for / v-if lists / multi-root) as EMPTY text
@@ -107,14 +197,24 @@ export function createSymbioteRenderer(surface) {
             const index = siblings.indexOf(node);
             return index >= 0 ? (siblings[index + 1] ?? null) : null;
         },
-        patchProp(el, key, _prev, next) {
+        patchProp(el, key, _prev, next, _namespace, parentComponent) {
             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;
+            const value = next === undefined ? textDefaultFor(el, name) : next;
+            const routed = EVENT_PROP_NAME.test(name) && typeof value === 'function'
+                ? wrapListenerForErrorHandling(value, parentComponent ?? null)
+                : value;
             // 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, routed);
             surface.requestCommit();
         },
         // RN has no querySelector / scope-id / innerHTML. The first two are inert; static

package/build/runtime-helpers/index.d.ts

@@ -1,8 +1,11 @@
 export * from '@vue/runtime-core';
 import { type ObjectDirective } from '@vue/runtime-core';
 import { type ISymbioteNode } from '@symbiote-native/engine';
-export { Teleport, type ITeleportTarget } from '../create-portal';
+export declare function normalizeProps(props: Record<string, unknown> | null | undefined): Record<string, unknown> | null;
+export declare function normalizeStyle(value: unknown): unknown;
+export declare function mergeProps(...args: Record<string, unknown>[]): Record<string, unknown>;
 export declare const vShow: ObjectDirective<ISymbioteNode, boolean>;
+export declare const vModelText: ObjectDirective<ISymbioteNode, unknown>;
 type ISystemModifier = 'ctrl' | 'shift' | 'alt' | 'meta';
 type IEventModifier = ISystemModifier | 'stop' | 'prevent' | 'self' | 'left' | 'middle' | 'right' | 'exact';
 type IModifierGuardableEvent = {
@@ -24,6 +27,16 @@ type IEventHandler<TEvent> = ((event: TEvent, ...args: never[]) => unknown) & {
  * typed as required, matching upstream Vue's own declaration — its runtime-only `!fn` guard below
  * (for a compiler-generated call site that could pass a falsy handler) isn't reflected in the
  * type there either.
+ *
+ * `@press.self` on a LOWERED element reaches this, and both halves were measured 2026-09-11 rather
+ * than assumed — the question arose because a modifier on a COMPONENT takes Vue's own event path
+ * and only an element emits the helper. `<pressable @press.self>` compiles to
+ * `_withModifiers(fn, ["self"])` imported `from "@symbiote-native/vue/runtime-helpers"` (the Metro
+ * transformer retargets every compiled `from 'vue'`), so the compiler-emitted call lands here and
+ * not on @vue/runtime-dom's. And `ISymbioteEvent` (`core/engine/src/node.ts`) declares `target`,
+ * `currentTarget` and `stopPropagation` as REQUIRED fields with the DOM semantics these guards
+ * read, so `.self` genuinely filters a bubbled press instead of degenerating to
+ * `undefined !== undefined`.
  */
 export declare function withModifiers<TEvent extends IModifierGuardableEvent>(fn: IEventHandler<TEvent>, modifiers: readonly IEventModifier[]): IEventHandler<TEvent>;
 type IKeyedEvent = {

package/build/runtime-helpers/index.js

@@ -6,16 +6,110 @@
 // real HTMLElement - we have no DOM, so this module supplies our OWN implementation under the
 // same export name instead of leaving `v-show` a silent no-op.
 //
-// Scope: this covers only Vue's own template directives (v-show, Teleport); native-element
-// v-model is a separate, out-of-scope case.
+// Scope: Vue's own template directives (v-show, Teleport) and, since host-primitive lowering
+// landed, `v-model` on an ELEMENT — see vModelText below for why that stopped being out of scope.
 export * from '@vue/runtime-core';
-import { getCurrentInstance, warn, } from '@vue/runtime-core';
-import { setNativeProps, whenCommitted, } from '@symbiote-native/engine';
-// Shadows runtime-core's own Teleport for every compiled `from 'vue'` import (see the header):
-// same component, plus a runtime guard on `to`. Lives in ../create-portal so the adapter's portal
-// sits where every other adapter's does; re-exported here because THIS is the module Metro
-// rewrites `vue` to, and an `export *` alone would resolve `Teleport` to the unguarded original.
-export { Teleport } from '../create-portal/index.js';
+import { getCurrentInstance, mergeProps as baseMergeProps, normalizeClass, normalizeStyle as baseNormalizeStyle, warn, } from '@vue/runtime-core';
+import { requestCommitFor, setNativeProps, setProp, whenCommitted, } from '@symbiote-native/engine';
+import { descriptorFor, SWITCH_TAG } from '@symbiote-native/components';
+// Do NOT shadow runtime-core's own Teleport here, however tempting the guarded ../create-portal
+// wrapper looks (same reasoning that shadowed it in the first place, and it is wrong for this
+// file specifically). @vue/compiler-sfc recognises the literal tag name "Teleport" as one of
+// Vue's CORE built-ins at compile time — regardless of which value the name resolves to at
+// runtime — and compiles its children as a raw array with a PROPS-only patchFlag (`dynamicProps:
+// ["to"]`), never the DYNAMIC_SLOTS-flagged shape a real user component gets. Substituting a real
+// `defineComponent` under that name makes it go through Vue's ordinary component update path
+// (shouldUpdateComponent), which — for a PROPS-only patchFlag — checks ONLY the props named in
+// `dynamicProps` and never re-renders on a children/slot change at all. Confirmed by reproducing
+// through the real compiler (compileSfc) + a live mount: the wrapper's render() fires once at
+// mount and never again, so a Teleport whose content is gated by v-if (the ordinary "toast"/
+// "modal" shape) silently stops updating the moment `to` itself stays the same. `export *` above
+// already re-exports the real, unwrapped Teleport for this path — leave it there. The guarded
+// wrapper (../create-portal) is still exported from the adapter's main barrel for anyone who
+// constructs the vnode by hand (`h(Teleport, ...)`, e.g. in TSX), where no such codegen applies.
+// Shadows @vue/shared's own `normalizeProps` for every compiled `from 'vue'` import, for ONE
+// divergence: a FUNCTION-valued `style` survives it.
+//
+// `v-bind="obj"` compiles to `_normalizeProps(_guardReactiveProps(obj))`, and Vue's version runs
+// `normalizeStyle` over the style key. That helper knows array / string / object and returns
+// `undefined` for a function — so `style: ({ pressed }) => …` arriving inside a spread is destroyed
+// before any adapter code runs, with no error and nothing red. A functional style is a React Native
+// idiom the engine resolves in `routeProp` (`isStyleCallback`); Vue's normaliser is DOM-shaped and
+// cannot know that.
+//
+// Measured 2026-09-01 through the real SFC pipeline, which is the ONLY path that reaches this:
+// `h(Component, { ...bag })` skips `normalizeProps` entirely and shows the style arriving intact,
+// so a probe written that way reports the bug as absent.
+//
+//   <View v-bind="bag">       fn style   committed {testID}              <- style gone
+//   <Pressable v-bind="bag">  fn style   committed {testID}              <- style gone
+//   either, object style                 committed {testID, opacity}     <- fine
+//
+// EVERY primitive, not only the stateful ones — both arms measured. Only `style`: `normalizeClass`
+// has no equivalent hazard that anyone has shown, and an override wider than the measured defect is
+// how one adapter's problem becomes a shared law.
+//
+// MIRRORS Vue's four lines rather than delegating to them, because hiding the key from the original
+// and restoring it afterwards would mutate the caller's object twice. The normalisation itself is
+// still Vue's — only the dispatch is ours, and `normalize-props.test.ts` pins it against the
+// compiled path.
+export function normalizeProps(props) {
+    if (!props)
+        return null;
+    const { class: klass, style } = props;
+    if (klass && typeof klass !== 'string')
+        props.class = normalizeClass(klass);
+    if (style && typeof style !== 'function')
+        props.style = baseNormalizeStyle(style);
+    return props;
+}
+// The SECOND door to the same defect, and the one the first fix missed. `v-bind="rest"` standing
+// beside a separate `:style="fn"` does not compile to `normalizeProps` at all — it compiles to
+// `mergeProps`, whose own `style` branch is `ret.style = normalizeStyle([ret.style, toMerge.style])`.
+// The array branch of `normalizeStyle` drops a function element, so the callback dies here too:
+//
+//   <View v-bind="bag" />                  normalizeProps   <- fixed above
+//   <View v-bind="rest" :style="fn" />     mergeProps       <- fixed here
+//   <View :style="fn" />                   neither          <- was never broken
+//
+// Delegates the whole merge — classes, event-handler concatenation, key precedence — and only
+// rescues the callback afterwards, scanning the args in mergeProps' own order so LAST wins. A
+// later non-function `style` clears it again, which is that same precedence.
+//
+// The merge itself cannot be preserved when one side is a callback: a function returns a COMPLETE
+// style, so there is nothing to merge it into. It replaces, which is also how React Native's own
+// contract reads it (`Pressable.js`: `ViewStyleProp | ((state) => ViewStyleProp)` — the callback is
+// top-level, never an array element, so `:style="[a, fn]"` is out of contract here exactly as it is
+// there, and is deliberately NOT rescued).
+// The THIRD door, and the one that decides whether the state-style split can leave the transforms
+// at all. A `:style` binding on a lowered element compiles to `_normalizeStyle(expr)` whenever the
+// compiler cannot keep it on the cheap patch-flag path — an inline arrow and a call expression both
+// do, a bare identifier does not. So `<Pressable :style="({pressed}) => …" />` loses its callback
+// here, and today nothing notices because the lowering transform rewrites that attribute into a
+// resting/active pair before Vue ever emits the helper.
+//
+// A TOP-LEVEL function is preserved; one nested inside an array is not, and that asymmetry is the
+// contract rather than an omission. React Native types the prop
+// `ViewStyleProp | ((state) => ViewStyleProp)` (`Pressable.js`), so the callback is top-level or it
+// is not a callback, and the engine's `isStyleCallback` reads it the same way. Rescuing an array
+// element would invent a shape neither side supports.
+export function normalizeStyle(value) {
+    if (typeof value === 'function')
+        return value;
+    return baseNormalizeStyle(value);
+}
+export function mergeProps(...args) {
+    const merged = baseMergeProps(...args);
+    let callback;
+    for (const arg of args) {
+        if (arg === null || arg === undefined || !('style' in arg))
+            continue;
+        callback = typeof arg.style === 'function' ? arg.style : undefined;
+    }
+    if (callback !== undefined)
+        merged.style = callback;
+    return merged;
+}
 // whenCommitted, not a direct call: Vue's `mounted` hook fires synchronously during the patch
 // pass, but this renderer coalesces the actual Fabric commit onto a microtask
 // (surface.requestCommit()), so the node may have no committed tag yet - the same async-commit
@@ -33,6 +127,143 @@ export const vShow = {
     // Drop a still-pending first-commit wait if the element unmounts before it ever lands.
     unmounted: el => pendingShowCommits.get(el)?.(),
 };
+function textFromChangeEvent(event) {
+    const text = Reflect.get(event, 'text');
+    return typeof text === 'string' ? text : undefined;
+}
+function valueFromChangeEvent(event) {
+    const value = Reflect.get(event, 'value');
+    return typeof value === 'boolean' ? value : undefined;
+}
+const modelStates = new WeakMap();
+// Runtime guards, not casts: both slots are read out of untyped bags — `vnode.props` and
+// `node.props` are `Record<string, unknown>` — and `typeof x === 'function'` alone narrows to the
+// bare `Function`, which carries no signature.
+function isModelAssign(value) {
+    return typeof value === 'function';
+}
+function isValueChangeListener(value) {
+    return typeof value === 'function';
+}
+// Vue merges duplicate handlers into an array, so the assigner is either a function or a list of
+// them — the same shape upstream's `getModelAssigner` normalises.
+function modelAssigner(props) {
+    const bound = props?.['onUpdate:modelValue'] ?? props?.['onUpdate:value'];
+    if (isModelAssign(bound))
+        return bound;
+    if (!Array.isArray(bound))
+        return undefined;
+    const fns = bound.filter(isModelAssign);
+    return value => fns.forEach(fn => fn(value));
+}
+function modelText(value) {
+    if (typeof value === 'string')
+        return value;
+    return value === undefined || value === null ? '' : String(value);
+}
+// `.trim` and `.number` are pure transforms of the text and behave exactly as upstream. `.lazy` is
+// NOT: upstream implements it by listening to `change` instead of `input`, and this renderer has
+// only the one native stream (RN fires `onChange` per keystroke), so there is no second event to
+// switch to. It warns rather than silently behaving like the eager form.
+function applyModelModifiers(state, text) {
+    const trimmed = state.trim ? text.trim() : text;
+    if (!state.number)
+        return trimmed;
+    const parsed = Number.parseFloat(trimmed);
+    return Number.isNaN(parsed) ? trimmed : parsed;
+}
+function modelStateFor(el) {
+    const existing = modelStates.get(el);
+    if (existing !== undefined)
+        return existing;
+    const state = {
+        assign: undefined,
+        appListener: undefined,
+        trim: false,
+        number: false,
+        listener: event => {
+            state.appListener?.(event);
+            const text = textFromChangeEvent(event);
+            if (text !== undefined) {
+                state.assign?.(applyModelModifiers(state, text));
+                return;
+            }
+            const value = valueFromChangeEvent(event);
+            if (value !== undefined)
+                state.assign?.(value);
+        },
+    };
+    modelStates.set(el, state);
+    return state;
+}
+// Re-read every beat rather than installed once: the app's own `onValueChange` binding is written
+// by `patchProp` during the same patch, so anything captured earlier is either missing or stale. A
+// prop that is already OUR listener means nothing overwrote it and the app half is unchanged.
+function syncModelListener(el, state) {
+    const current = el.props.onValueChange;
+    if (current === state.listener)
+        return;
+    state.appListener = isValueChangeListener(current) ? current : undefined;
+    setProp(el, 'onValueChange', state.listener);
+}
+// Vue's compiler picks the directive by ELEMENT, and for anything it does not recognise as a DOM
+// input it emits `vModelText` — including a lowered `<switch>`. Stringifying there is what
+// upstream must do (a DOM input's value IS a string) and what we must not: the Switch behavior
+// reads `props.value === true`, so `String(true)` pins the control OFF and no tap can move it.
+// Device-confirmed on `examples/vue-sfc` 2026-09-02, both switches on `CanaryScreen`.
+//
+// Resolved through the shared descriptor table rather than a literal Fabric name, so the check
+// follows the platform the bundle actually loaded (iOS `Switch`, Android `AndroidSwitch`) instead
+// of carrying a copy of both.
+const SWITCH_COMPONENT = descriptorFor(SWITCH_TAG).component;
+function isSwitchNode(el) {
+    return el.component === SWITCH_COMPONENT;
+}
+function syncModelValue(el, value) {
+    // The READ half needs no branch: the behavior calls `onValueChange(event)` for both primitives
+    // with `text`/`value` carried on the event, and `applyModelModifiers` passes a non-string through
+    // untouched.
+    if (isSwitchNode(el)) {
+        setProp(el, 'value', value === true);
+        requestCommitFor(el);
+        return;
+    }
+    setProp(el, 'value', modelText(value));
+    // The behavior's `afterCommit` is what turns a changed `value` into the stale-safe
+    // setTextAndSelection command, and nothing else in this patch is going to ask for a commit — the
+    // template no longer carries a `value` binding at all once `v-model` owns it.
+    requestCommitFor(el);
+}
+export const vModelText = {
+    // `created` runs BEFORE props are patched, which is exactly what the value half needs: the
+    // behavior seeds its `lastNativeText` mirror from `value` on the FIRST commit, and a value that
+    // arrives after that seed reads as a divergence and commands redundant text down to native.
+    created(el, { value, modifiers }) {
+        const state = modelStateFor(el);
+        state.trim = modifiers.trim === true;
+        state.number = modifiers.number === true;
+        if (modifiers.lazy === true) {
+            warn('v-model.lazy has no effect here: this renderer has one native text stream, so there is no ' +
+                'second event to defer to.');
+        }
+        syncModelValue(el, value);
+    },
+    mounted(el, { value }, vnode) {
+        const state = modelStateFor(el);
+        state.assign = modelAssigner(vnode.props);
+        syncModelListener(el, state);
+        syncModelValue(el, value);
+    },
+    updated(el, { value }, vnode) {
+        const state = modelStateFor(el);
+        state.assign = modelAssigner(vnode.props);
+        syncModelListener(el, state);
+        syncModelValue(el, value);
+    },
+    unmounted(el) {
+        modelStates.delete(el);
+    },
+};
 const SYSTEM_MODIFIERS = [
     'ctrl',
     'shift',
@@ -63,6 +294,16 @@ const MODIFIER_GUARDS = {
  * typed as required, matching upstream Vue's own declaration — its runtime-only `!fn` guard below
  * (for a compiler-generated call site that could pass a falsy handler) isn't reflected in the
  * type there either.
+ *
+ * `@press.self` on a LOWERED element reaches this, and both halves were measured 2026-09-11 rather
+ * than assumed — the question arose because a modifier on a COMPONENT takes Vue's own event path
+ * and only an element emits the helper. `<pressable @press.self>` compiles to
+ * `_withModifiers(fn, ["self"])` imported `from "@symbiote-native/vue/runtime-helpers"` (the Metro
+ * transformer retargets every compiled `from 'vue'`), so the compiler-emitted call lands here and
+ * not on @vue/runtime-dom's. And `ISymbioteEvent` (`core/engine/src/node.ts`) declares `target`,
+ * `currentTarget` and `stopPropagation` as REQUIRED fields with the DOM semantics these guards
+ * read, so `.self` genuinely filters a bubbled press instead of degenerating to
+ * `undefined !== undefined`.
  */
 export function withModifiers(fn, modifiers) {
     if (!fn)