@symbiote-native/vue 2.0.0 → 3.0.1

package/README.md

@@ -27,8 +27,8 @@ npm install @symbiote-native/vue react-native vue
 `react-native` and `vue` stay your app's own top-level dependencies — this package only replaces
 the JS renderer that drives them. **TSX** needs nothing beyond the install above; **SFC**
 additionally needs a Metro transformer for `.vue` files (see
-[`examples/vue-sfc`](../../examples/vue-sfc)'s `metro.config.js`), since there's no
-`create-symbiote` scaffolder yet to wire it for you.
+[`examples/vue-sfc`](../../examples/vue-sfc)'s `metro.config.js`) — `npx @symbiote-native/cli new`
+wires this for a new app; an existing app still needs it copied in by hand.
 
 ---
 
@@ -102,7 +102,8 @@ the demo above is the first one running on the iOS simulator:
 ## Parity — and the one gap
 
 Both adapters reach the same primitives, runtime modules, `Animated` on both drivers, gestures,
-accessibility, and the `VirtualizedList` family. That parity is **structural, not hand-copied**: the
+accessibility, and the `VirtualizedList` family, verified on-device on iOS and Android. That
+parity is **structural, not hand-copied**: the
 component logic (state machines + render functions) is written **once** in `@symbiote-native/components`,
 and each adapter supplies only its lifecycle (Vue's `ref`/`watch` + the descriptor→`h()` bridge).
 

package/babel-jsx.cjs

@@ -11,20 +11,27 @@
 // so it has to stay in the app's plugins array, where the app also controls its position relative
 // to its own plugins. A preset would move it after every plugin and silently change that order.
 //
-// The two entries are handed out together because either alone is broken:
-//
-//   lowering only        -> `view` compiles to resolveComponent("view"), a
-//                           component that resolves to nothing, with SLOT children an element path
-//                           never mounts. Blank subtree, no error.
-//   isCustomElement only -> nothing was rewritten, so <View> is still a Vue component and the whole
-//                           point (one component instance per node on ~73% of the tree) is unpaid.
-//
-// Same "both halves or nothing" invariant the SFC path states in metro-vue-transformer.cjs, and the
-// reason it is expressed as one require() here rather than two lines of documentation.
+// `isCustomElement` is the load-bearing option: without it `<view>` compiles to
+// `resolveComponent("view")`, a component that resolves to nothing, with SLOT children an element
+// path never mounts. Blank subtree, no error.
 //
 // @vue/babel-plugin-jsx is OUR dependency and require() resolves relative to this file, so the app
 // declares no extra devDependency — same reasoning as ./metro-css-parser.cjs.
-
+//
+// `optimize: true` defaults ON, an app may override it. The plugin's own README calls it
+// experimental ("the optimized code may skip certain re-renders... we strongly recommend thorough
+// testing") because it generates PatchFlags/dynamicProps from JSX's syntax alone, without the
+// template compiler's data-flow analysis. `.vue` SFCs get the equivalent from `@vue/compiler-sfc`
+// unconditionally already (`metro-vue-transformer.cjs`) — this closes the same gap for TSX, which
+// had none. `vue-row-component-shape-cost.itest.ts` measured why it matters: a stateful component
+// re-render pays for `hasPropsChanged`'s full `Object.keys(nextProps)` walk on every patch, even
+// when nothing changed; a patchFlag lets Vue check only the flagged dynamic keys instead.
+// Correctness (a changed prop still recommits, a conditional branch still flips, a keyed list still
+// reorders, and — the shape that actually matters here — a child COMPONENT still re-renders when a
+// nested prop field changes) is pinned in `optimize-flag-safety.test.ts`, including the exact
+// stateful-row shape the itest above measures; that file also confirms a measurable, reproducible
+// JS-side speedup on the identical partial-relabel pattern. NOT verified on-device/Hermes — only
+// headless, through this adapter's real renderer.
 const vueJsx = require('@vue/babel-plugin-jsx');
 
 // An intrinsic the renderer resolves through descriptorFor, never a Vue component — including one
@@ -42,6 +49,8 @@ module.exports = function symbioteVueJsx(options = {}) {
     [
       vueJsx,
       {
+        // A default an app may override — see the file-level comment above for what backs it.
+        optimize: true,
         ...options,
         // Last, deliberately: an app may pass other @vue/babel-plugin-jsx options through, but
         // overriding this one silently produces output this adapter cannot render.

package/build/components/flat-list/index.js

@@ -165,7 +165,7 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots, })
             data: rows,
             getItem: (_source, index) => rows[index],
             getItemCount: () => rows.length,
-            keyExtractor: rowKeyExtractor,
+            keyExtractor: (row) => rowKeyExtractor(row, keyExtractor),
             onEndReached: endReached,
             onStartReached: startReached,
             onRefresh: refresh,

package/build/components/keyboard-avoiding-view.js

@@ -9,7 +9,7 @@
 // rawAttrs runs through normalizeVueAttrs so a template `:keyboard-vertical-offset` resolves.
 import { defineComponent, h, ref, onMounted, onUnmounted, } from '@vue/runtime-core';
 import { Keyboard, Platform, dlog, } from '@symbiote-native/engine';
-import { computeInset, keyboardAvoidingEventNamesFor, readKeyboardFrame, readPrefersCrossFadeTransitions, readLayoutFrame, resolveKeyboardAvoidingLayout, resolveAccessibilityProps, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+import { computeInset, configureKeyboardAvoidingAnimation, keyboardAvoidingEventNamesFor, readKeyboardAnimationTiming, readKeyboardFrame, readPrefersCrossFadeTransitions, readLayoutFrame, resolveKeyboardAvoidingLayout, resolveAccessibilityProps, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
@@ -53,14 +53,18 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
     };
     const onShow = (payload) => {
         const keyboard = readKeyboardFrame(payload);
+        const previousInset = inset.value;
         const next = computeInset(frame, keyboard, verticalOffset(), {
             behavior: asBehavior(currentAttrs().behavior),
             // The inset CURRENTLY applied (RN's this.state.bottom), read live off the reactive cell:
             // in 'height' mode the wrapper is shrunk by it, so the next onLayout under-reports the
             // frame by exactly that much and core adds it back.
-            previousInset: inset.value,
+            previousInset,
             prefersCrossFadeTransitions,
         });
+        // RN's `_updateBottomIfNecessary` skips the animation when the inset did not change.
+        if (next !== previousInset)
+            configureKeyboardAvoidingAnimation(readKeyboardAnimationTiming(payload), currentAttrs().enabled !== false);
         dlog(`KeyboardAvoidingView show -> inset ${next}`);
         inset.value = next;
     };

package/build/components/pressable-props.d.ts

@@ -12,7 +12,9 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     disabled?: boolean;
     focusable?: boolean;
     cancelable?: boolean;
+    blockNativeResponder?: boolean;
     hitSlop?: IRectOffset;
+    testOnly_pressed?: boolean;
     pressRetentionOffset?: IRectOffset;
     unstable_pressDelay?: number;
     minPressDuration?: number;

package/build/components/touchable-native-feedback-props.d.ts

@@ -3,4 +3,5 @@ import type { IPressableProps } from './pressable-props';
 export type ITouchableNativeFeedbackProps = Omit<IPressableProps, 'style'> & {
     background?: INativeFeedbackBackground;
     useForeground?: boolean;
+    touchSoundDisabled?: boolean;
 };

package/build/components/touchable-props.d.ts

@@ -10,6 +10,8 @@ export interface ITouchableOpacityProps extends ITouchableBaseProps {
 export interface ITouchableHighlightProps extends ITouchableBaseProps {
     activeOpacity?: number;
     underlayColor?: string;
+    touchSoundDisabled?: boolean;
+    testOnly_pressed?: boolean;
     onShowUnderlay?: () => void;
     onHideUnderlay?: () => void;
 }

package/build/components/touchable-without-feedback-props.d.ts

@@ -1,3 +1,5 @@
 import type { IPressTimingProps } from '@symbiote-native/components';
 import type { IPressableProps } from './pressable-props';
-export type ITouchableWithoutFeedbackProps = Omit<IPressableProps, 'style'> & IPressTimingProps;
+export type ITouchableWithoutFeedbackProps = Omit<IPressableProps, 'style'> & IPressTimingProps & {
+    touchSoundDisabled?: boolean;
+};

package/build/components/virtualized-list/index.js

@@ -27,7 +27,7 @@
 // scroll commands would silently no-op. The folded listState is a PLAIN object (not reactive) —
 // mutating it never triggers Vue; the `version` ref is bumped when a transition changes render state.
 import { computed, defineComponent, getCurrentInstance, h, isVNode, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
-import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
+import { DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
 import { dlog, isSymbioteNode, } from '@symbiote-native/engine';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 import { componentFromSlot } from '../../utils/slots-to-render-props.js';
@@ -172,11 +172,15 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
             onEndReached: listens('onEndReached')
                 ? (info) => emit('endReached', info)
                 : undefined,
-            onEndReachedThreshold: asNumber(props.onEndReachedThreshold, DEFAULT_END_REACHED_THRESHOLD),
+            onEndReachedThreshold: typeof props.onEndReachedThreshold === 'number'
+                ? props.onEndReachedThreshold
+                : undefined,
             onStartReached: listens('onStartReached')
                 ? (info) => emit('startReached', info)
                 : undefined,
-            onStartReachedThreshold: asNumber(props.onStartReachedThreshold, DEFAULT_START_REACHED_THRESHOLD),
+            onStartReachedThreshold: typeof props.onStartReachedThreshold === 'number'
+                ? props.onStartReachedThreshold
+                : undefined,
             onRefresh: listens('onRefresh')
                 ? () => emit('refresh')
                 : undefined,
@@ -287,8 +291,12 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
                     const info = effect.info;
                     const map = effect.map;
                     const fire = () => {
-                        for (const pair of pairs)
-                            pair.onViewableItemsChanged(info);
+                        for (const pair of pairs) {
+                            pair.onViewableItemsChanged({
+                                ...info,
+                                viewabilityConfig: pair.viewabilityConfig,
+                            });
+                        }
                         dispatch({ kind: 'viewable-fired', map });
                     };
                     if (viewableTimer !== null) {
@@ -452,7 +460,6 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         if (header !== undefined) {
             children.push(h('view', { key: 'list-header' }, [header]));
         }
-        let renderedStickyIndices = [];
         if (m.count === FIRST_INDEX) {
             const empty = resolveElement(p.listEmptyComponent);
             if (empty !== undefined) {
@@ -471,7 +478,7 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
                 stickyIndices: stickySet,
                 hasHeader: header !== undefined,
             });
-            renderedStickyIndices = plan.stickyChildPositions;
+            // `plan.stickyChildPositions` is deliberately NOT read — it was the input to the index form.
             if (plan.leadingExtent > EMPTY_OFFSET) {
                 children.push(h('view', {
                     key: 'spacer-leading',
@@ -511,7 +518,12 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
                 cell.index < m.count - 1
                     ? renderSeparatorElement(p.itemSeparatorComponent, item, p.getItem(p.data, cell.index + 1), separatorOverrides.get(cell.index))
                     : undefined;
-                children.push(h('view', {
+                children.push(h(
+                // A cell the app flagged sticky IS the `sticky-header` tag — same position, same key,
+                // same `onLayout` (the behavior forwards it rather than replacing it). The collision
+                // point then comes from the owner's DOCUMENT order, which is the one form that
+                // survives windowing; `stickyHeaderIndices` numbers paint children and does not.
+                stickySet?.has(cell.index) === true ? 'sticky-header' : 'view', {
                     key: `cell-${cell.key}`,
                     onLayout: makeCellMeasure(cell.index),
                     style: cellInverted,
@@ -576,9 +588,10 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         // pre-mount window before the handle attaches).
         if (commandedOffset.value !== undefined)
             scrollProps.contentOffset = commandedOffset.value;
-        // Headers in the window stick; an empty list leaves the prop off entirely.
-        if (renderedStickyIndices.length > 0)
-            scrollProps.stickyHeaderIndices = renderedStickyIndices;
+        // `stickyHeaderIndices` is deliberately NOT forwarded — see `pushCell`. It numbers the scroll
+        // view's PAINT children, and a windowed list paints a header, a spacer and a slice, so the
+        // positions move every time the window slides and the behavior re-wraps a different child
+        // each pass. The cells carry the tag instead.
         // Forward maintainVisibleContentPosition to the ScrollView so it anchors the in-window cells.
         // minIndexForVisible is bumped by 1 when a ListHeaderComponent occupies child 0.
         if (p.maintainVisibleContentPosition !== undefined) {

package/build/host-instance/index.js

@@ -10,7 +10,7 @@
 // node in the commit mirror); this only unwraps the Vue-shaped inputs (a Ref or a bare node)
 // onto it. An uncommitted or unknown input has no tag yet and surfaces as null.
 import { isRef, toRaw } from '@vue/runtime-core';
-import { getNativeTag, isSymbioteNode, dlog } from '@symbiote-native/engine';
+import { componentOf, getNativeTag, isSymbioteNode, dlog, } from '@symbiote-native/engine';
 export function findNodeHandle(componentOrHandle) {
     const candidate = isRef(componentOrHandle)
         ? componentOrHandle.value
@@ -24,7 +24,7 @@ export function findNodeHandle(componentOrHandle) {
     const node = toRaw(candidate);
     if (isSymbioteNode(node)) {
         const tag = getNativeTag(node) ?? null;
-        dlog(`findNodeHandle: component=${node.component} tag=${tag}`);
+        dlog(`findNodeHandle: component=${componentOf(node)} tag=${tag}`);
         return tag;
     }
     dlog('findNodeHandle: input did not resolve to a symbiote host node');

package/build/index.js

@@ -2,7 +2,7 @@
 // each RendererOptions call onto the engine's mutation API; all Fabric clone-on-write
 // lives in the engine, shared with every other adapter. App code names only @symbiote-native/vue.
 // Side-effect import, FIRST and deliberately not a re-export: it installs the engine-side press
-// machine that a lowered `<pressable>` needs. `export * from './register'` or a bare
+// machine that `<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';

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

@@ -5,25 +5,7 @@ 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;
-    };
+    Easing: import("@symbiote-native/engine").IEasing;
     timing: typeof timing;
     spring: typeof spring;
     decay: typeof decay;
@@ -56,4 +38,41 @@ export declare const Animated: {
     FlatList: ReturnType<typeof createAnimatedComponent>;
     SectionList: ReturnType<typeof createAnimatedComponent>;
     createAnimatedComponent: typeof createAnimatedComponent;
+} | {
+    Value: typeof AnimatedValue;
+    ValueXY: typeof AnimatedValueXY;
+    Color: typeof AnimatedColor;
+    Easing: import("@symbiote-native/engine").IEasing;
+    timing: (value: AnimatedValue, config: import("@symbiote-native/engine").ITimingConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    spring: (value: AnimatedValue, config: import("@symbiote-native/engine").ISpringConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    decay: (_value: AnimatedValue, _config: import("@symbiote-native/engine").IDecayConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    parallel: (animations: import("@symbiote-native/engine").ICompositeAnimation[], _config?: import("@symbiote-native/engine").IParallelConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    sequence: (animations: import("@symbiote-native/engine").ICompositeAnimation[]) => import("@symbiote-native/engine").ICompositeAnimation;
+    stagger: (_time: number, animations: import("@symbiote-native/engine").ICompositeAnimation[]) => import("@symbiote-native/engine").ICompositeAnimation;
+    loop: (_animation: import("@symbiote-native/engine").ICompositeAnimation) => import("@symbiote-native/engine").ICompositeAnimation;
+    delay: (_time: number) => import("@symbiote-native/engine").ICompositeAnimation;
+    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: 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/renderer/index.js

@@ -3,41 +3,29 @@
 // drives the exact same retained tree React does: the proof the core is framework-
 // agnostic.
 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 { appendChild, createAnchor, createElement, createRawText, childrenOf, dlog, insertBefore, isRawTextNode, isTextContainer, nextSiblingOf, parentOf, removeChild, routeProp, setProp, setText, textOf, toPublicInstance, 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;
+    return isRawTextNode(node);
 }
-// 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.
+// RN's two Text defaults left this renderer entirely on 2026-09-18, in two steps a month apart. The
+// CREATE seed went first, because writing them as props cost a crossing every time the app authored
+// the same value — 6 000 per 1 000-row create, measured with `writesOfUnchanged`. What stayed was a
+// clear-back: an explicit `undefined` at patch time was substituted for the default, since RN treats
+// a missing prop and an explicit `undefined` alike.
 //
-// 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']]);
+// That substitution is gone too, and it was redundant rather than wrong. The rule reads the AUTHORED
+// bag at payload time (`foldTextDefaults`, `SymbioteFabricProps.cpp`), so it cannot tell a cleared
+// prop from one never written — both are absent by the time it looks, and both get the default. The
+// adapter was re-supplying an answer the layer below already had.
+// `PROP_ALIASES` (`id` -> `nativeID`) left this renderer on 2026-09-18 — `routeProp` resolves it
+// for every adapter now, and carries the per-node state the caveat here said was not worth it: with
+// both names on one element upstream gives `id` unconditional priority, where a per-key rename
+// resolved it by write order.
 // 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.
@@ -76,12 +64,6 @@ function wrapListenerForErrorHandling(listener, instance) {
     // 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
@@ -92,11 +74,9 @@ export function createSymbioteRenderer(surface) {
             const descriptor = descriptorFor(type);
             // `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.
+            // resolved Fabric name (`RCTView`). This is the one place that holds both, so a 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
@@ -145,25 +125,26 @@ export function createSymbioteRenderer(surface) {
             // this instead of insert() when an element's children collapse to a single string, so
             // without the check a raw text lands under a non-Text parent - an invalid Fabric tree
             // built silently, which is worse than the throw insert() would have given.
-            if (!el.isText) {
+            if (!isTextContainer(el)) {
                 throw new Error(`Text string "${text}" must be rendered inside a <Text>`);
             }
             // An RCTText carries its string as a single raw-text child. Reuse a lone existing
             // one to avoid churn; otherwise replace all children with a fresh raw-text node.
-            const [first] = el.children;
-            if (el.children.length === 1 && first !== undefined && isRawText(first)) {
+            const existing = childrenOf(el);
+            const [first] = existing;
+            if (existing.length === 1 && first !== undefined && isRawText(first)) {
                 setText(first, text);
             }
             else {
-                for (const child of el.children.slice())
+                for (const child of existing.slice())
                     removeChild(el, child);
                 appendChild(el, createRawText(text));
             }
             surface.requestCommit();
         },
         insert(child, parent, anchor) {
-            if (isRawText(child) && (isSurface(parent) || !parent.isText)) {
-                throw new Error(`Text string "${String(child.props.text)}" must be rendered inside a <Text>`);
+            if (isRawText(child) && (isSurface(parent) || !isTextContainer(parent))) {
+                throw new Error(`Text string "${textOf(child) ?? ''}" must be rendered inside a <Text>`);
             }
             if (isSurface(parent)) {
                 if (anchor)
@@ -182,7 +163,7 @@ export function createSymbioteRenderer(surface) {
         remove(child) {
             // A top-level node has no parent (it lives in surface.children); everything else
             // detaches from its retained parent.
-            const parent = child.parent;
+            const parent = parentOf(child);
             if (parent !== undefined)
                 removeChild(parent, child);
             else
@@ -190,23 +171,22 @@ export function createSymbioteRenderer(surface) {
             surface.requestCommit();
         },
         parentNode(node) {
-            return node.parent ?? surface;
+            return parentOf(node) ?? surface;
         },
         nextSibling(node) {
-            const siblings = node.parent !== undefined ? node.parent.children : surface.children;
-            const index = siblings.indexOf(node);
-            return index >= 0 ? (siblings[index + 1] ?? null) : null;
+            // `?? null` because Vue's RendererOptions types the miss as null, not undefined; the
+            // engine answers undefined uniformly and the surface fallback lives there now.
+            return nextSiblingOf(node, surface) ?? null;
         },
-        patchProp(el, key, _prev, next, _namespace, parentComponent) {
+        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 name = normalizeVueAttrKey(key);
+            const value = next;
             const routed = EVENT_PROP_NAME.test(name) && typeof value === 'function'
                 ? wrapListenerForErrorHandling(value, parentComponent ?? null)
                 : value;
@@ -214,7 +194,30 @@ export function createSymbioteRenderer(surface) {
             // 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, name, routed);
+            //
+            // `value` REACHES HERE UNCHANGED, on every re-render, and that is upstream by design:
+            // `patchProps` excludes it from its own diff and then patches it on its own line
+            // (@vue/runtime-core 3.5.39 — `if (next !== prev && key !== "value")`, then
+            // `if ("value" in newProps)`). The reason is a DOM one: typing mutates `el.value` directly,
+            // so what Vue last SET is not what the element now HOLDS, and only the element can say.
+            // Upstream pairs it with a guard in the patcher, and that half we did not have — `patchDOMProp`
+            // writes only on a difference against the element's live value (@vue/runtime-dom,
+            // `if (oldValue !== newValue || !("_value" in el))`). So every `<text-input>` re-routed its
+            // value on every re-render of its parent: 1 000 writes and ~6 000 wire slots per relabel of
+            // the benchmark list, against solid's 0 for the identical tree.
+            //
+            // On `prev` rather than on the node's own prop: the divergence upstream protects against is
+            // not visible from here — native text lives on the far side and TextInput's behavior owns the
+            // mirror — and asking the host would cost a crossing per input per render to be told the
+            // declarative value, which is what `prev` already is.
+            //
+            // The COMMIT REQUEST still goes out, which is why this skips the route and does not return.
+            // The controlled handshake hangs off the commit beat, not off the write: `afterCommit` reads
+            // the node's own `value` against its native mirror. An idle commit is O(1) (F-12) and its
+            // post-commit hooks run whether or not the commit reached the host (F-7).
+            if (key !== 'value' || prev !== 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

@@ -28,7 +28,7 @@ type IEventHandler<TEvent> = ((event: TEvent, ...args: never[]) => unknown) & {
  * (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
+ * `@press.self` on an 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

package/build/runtime-helpers/index.js

@@ -6,11 +6,11 @@
 // 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: 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.
+// Scope: Vue's own template directives (v-show, Teleport) and `v-model` on an ELEMENT — see
+// vModelText below for why that is in scope.
 export * from '@vue/runtime-core';
 import { getCurrentInstance, mergeProps as baseMergeProps, normalizeClass, normalizeStyle as baseNormalizeStyle, warn, } from '@vue/runtime-core';
-import { requestCommitFor, setNativeProps, setProp, whenCommitted, } from '@symbiote-native/engine';
+import { componentOf, propOf, 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
@@ -81,12 +81,10 @@ export function normalizeProps(props) {
 // 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.
+// The THIRD door. A `:style` binding 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}) => …">` would lose its callback here
+// without the rescue below.
 //
 // 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
@@ -200,14 +198,14 @@ function modelStateFor(el) {
 // 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;
+    const current = propOf(el, '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
+// input it emits `vModelText` — `<switch>` included. 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`.
@@ -217,7 +215,7 @@ function syncModelListener(el, state) {
 // of carrying a copy of both.
 const SWITCH_COMPONENT = descriptorFor(SWITCH_TAG).component;
 function isSwitchNode(el) {
-    return el.component === SWITCH_COMPONENT;
+    return componentOf(el) === SWITCH_COMPONENT;
 }
 function syncModelValue(el, value) {
     // The READ half needs no branch: the behavior calls `onValueChange(event)` for both primitives
@@ -295,7 +293,7 @@ const MODIFIER_GUARDS = {
  * (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
+ * `@press.self` on an 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

package/build/utils/normalize-attrs.js

@@ -12,9 +12,9 @@ const KEBAB_SEGMENT = /-([a-z])/g;
 function toCamel(key) {
     return key.replace(KEBAB_SEGMENT, (_match, char) => char.toUpperCase());
 }
-// The per-KEY half, for the path that never sees a whole attrs bag: a host primitive lowered to
-// its intrinsic tag by the SFC transformer reaches the renderer one patchProp call at a time,
-// with no component in between to fold the bag. Returns the key unchanged (same string identity)
+// The per-KEY half, for the path that never sees a whole attrs bag: an intrinsic tag reaches the
+// renderer one patchProp call at a time, with no component in between to fold the bag. Returns the
+// key unchanged (same string identity)
 // whenever there is nothing to convert, which is every key on the hot path.
 export function normalizeVueAttrKey(key) {
     if (!key.includes('-'))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "description": "SymbioteNative's Vue adapter — a @vue/runtime-core createRenderer driving real native iOS/Android views through the same engine as the React adapter.",
   "license": "MIT",
   "repository": {
@@ -70,18 +70,18 @@
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/runtime-core": "^3.5.13",
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "2.0.0",
+    "@symbiote-native/components": "3.0.1",
     "@symbiote-native/css-parser": "0.5.0"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^0.5.0"
+    "@symbiote-native/engine": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@symbiote-native/engine": "0.5.0",
-    "@symbiote-native/test-utils": "0.3.0"
+    "@symbiote-native/engine": "1.2.0",
+    "@symbiote-native/test-utils": "0.4.1"
   },
   "scripts": {
     "typecheck": "tsc --build",

package/build/composables/use-raw-attrs.d.ts

@@ -1 +0,0 @@
-export declare function useRawAttrs(contextAttrs: Record<string, unknown>): Record<string, unknown>;

package/build/composables/use-raw-attrs.js

@@ -1,26 +0,0 @@
-// The unproxied twin of a setup context's `attrs`.
-//
-// Vue hands `setupContext.attrs` out as `new Proxy(instance.attrs, attrsProxyHandlers)`, and in
-// PRODUCTION as well as dev that proxy's only trap is `get(target, key) { track(target, "get", "");
-// return target[key]; }` (runtime-core.esm-bundler.js:8357). So every attribute read costs a
-// WeakMap get, a Map get and a `dep.track()`, and the first read of each instance also allocates
-// a Map and a Dep into the module-global `targetMap` that live as long as the component does.
-// Pressable reads ~16 attrs per render and a benchmark create mounts 2 000 of them.
-//
-// `instance.attrs` is the raw object behind that proxy. Capturing it is safe because its identity
-// never changes: `initProps` assigns it once (:4907) and `updateProps` mutates that same object in
-// place (`attrs[key] = value` / `delete attrs[key]`), so a reference taken at setup always reads
-// current values. The tracking the proxy performs is for reads in a setup BODY; a render fn does
-// not need it, because the parent's patch re-runs the child render through `updateComponentPreRender`
-// whether or not the child subscribed.
-//
-// CALL THIS FROM A SETUP BODY ONLY, never from a render fn, a `computed`, or any other deferred
-// callback. `getCurrentInstance()` resolves to `currentInstance || currentRenderingInstance`, so in
-// a callback that runs while a DIFFERENT component is rendering it returns that component and this
-// would silently hand back the wrong bag. `virtualized-list/index.ts` calls normalizeVueAttrs
-// inside a `computed` for exactly that reason and must keep using the context attrs.
-import { getCurrentInstance } from '@vue/runtime-core';
-export function useRawAttrs(contextAttrs) {
-    const instance = getCurrentInstance();
-    return instance === null ? contextAttrs : instance.attrs;
-}