@symbiote-native/vue 0.3.8 → 0.5.0

package/README.md

@@ -1,7 +1,7 @@
 # @symbiote-native/vue
 
 The **Vue 3 adapter** for [SymbioteNative](../../README.md) — render real native iOS/Android views from
-Vue, on the *same* untouched core as React, with React Native's own renderer never in the path. It
+Vue, on the _same_ untouched core as React, with React Native's own renderer never in the path. It
 is a `@vue/runtime-core` `createRenderer` whose nodeOps map each mutation onto the engine's
 four-call API; `@symbiote-native/engine` does the clone-on-write commit into Fabric.
 
@@ -34,7 +34,7 @@ additionally needs a Metro transformer for `.vue` files (see
 
 ## Use it
 
-The native entry reaches the *same* `registerRunnable` seam as React — only the adapter changes. It
+The native entry reaches the _same_ `registerRunnable` seam as React — only the adapter changes. It
 hands the surface's `rootTag` to `mount` from `@symbiote-native/vue`, which drives the engine through Vue's
 `createRenderer`:
 
@@ -95,19 +95,19 @@ and each adapter supplies only its lifecycle (Vue's `ref`/`watch` + the descript
 The one deliberate gap is third-party **React component** packages such as
 `@react-native-community/slider` used directly. Their body calls React hooks off the React
 dispatcher, so they run only under the React adapter — under Vue the dispatcher is null and they
-throw. SymbioteNative makes the *native view* framework-agnostic, not the library's React *component*; such
+throw. SymbioteNative makes the _native view_ framework-agnostic, not the library's React _component_; such
 a view becomes reachable from Vue only through a thin wrapper over the same `createNode`-by-ViewConfig
 path SymbioteNative uses for its own primitives. `@symbiote-native/slider` (this repo's own wrapper around
-`@react-native-community/slider`) *does* ship a real Vue build (`@symbiote-native/slider/vue`) through
+`@react-native-community/slider`) _does_ ship a real Vue build (`@symbiote-native/slider/vue`) through
 exactly that path — it's what makes this one third-party native view usable from Vue at all; any
-*other* React-only component package stays React-adapter-only until it gets the same treatment.
+_other_ React-only component package stays React-adapter-only until it gets the same treatment.
 
 ---
 
 ## A Vue-specific gotcha — async commit timing
 
 Vue batches commits on a microtask (every mutation schedules one `completeRoot`), so a node's
-Fabric tag is assigned *after* `onMounted` / `watch(flush:'post')` runs. A native bind that reads
+Fabric tag is assigned _after_ `onMounted` / `watch(flush:'post')` runs. A native bind that reads
 the tag at lifecycle time (native-driver `Animated`, sticky-header scroll attach, `TextInput`
 autoFocus) would race the commit and silently no-op — while the JS-path headless test stays green.
 React doesn't hit this because `react-reconciler` commits synchronously.

package/build/bootstrap.js

@@ -3,7 +3,7 @@
 // AppRegistry actually get wired. Lives OUTSIDE the package's main barrel — see that file's
 // header for why anything importing react-native must stay there.
 import { AppRegistry as RNAppRegistry } from 'react-native';
-import { bootstrapHost } from '@symbiote-native/components/bootstrap';
+import { bootstrapHost, } from '@symbiote-native/components/bootstrap';
 import { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
 // Mirrors real Vue's createApp(App).mount(selector) two-step idiom.
 export function createApp(App, options = {}) {

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

@@ -1,30 +1,25 @@
-// FlatList, the Vue convenience surface over VirtualizedList. It takes a plain `data` array
-// and derives getItem/getItemCount; numColumns packs items into rows (a horizontal sub-View),
-// so the virtualized stream is rows, not items (RN's FlatList). All windowing / viewability /
-// batching / imperative scrolling are inherited from VirtualizedList; the data shaping and the
-// row/viewability/separator transforms are shared from @symbiote-native/components.
+// FlatList, the Vue convenience surface over VirtualizedList. Takes a plain `data` array and
+// derives getItem/getItemCount; numColumns packs items into rows (a horizontal sub-View), so the
+// virtualized stream is rows, not items. All windowing/viewability/batching/imperative scrolling
+// are inherited from VirtualizedList; the data shaping and row/viewability/separator transforms
+// are shared from @symbiote-native/components.
 //
-// This is the FIRST generic component on the typed-emits pattern (the symbiote port of pd-web-kit):
-// a GENERIC setup function `<ItemT,>(props, ctx: ICtx<IFlatListEmits<ItemT>>)` so the events emit
-// with ItemT-typed payloads (`@viewable-items-changed` carries `ItemT`, not `unknown`). For that to
-// infer at the call site, the generic INPUTS (data/renderItem/keyExtractor/…) must be typed `props`,
-// not `$attrs` — so they are declared in the runtime `props` array; the long passthrough tail
-// (horizontal/inverted/style/getItemLayout/raw scroll/…) still rides through `$attrs` onto the inner
-// VirtualizedList. The inner list still GATES RefreshControl + viewability on callback presence, so
-// each emit bridge is wired to it ONLY when the consumer actually listens (read off the instance
-// vnode props), keeping behavior identical to the prop-callback era.
+// Typed-emits generic component: a GENERIC setup function so events emit with ItemT-typed
+// payloads. For that to infer at the call site, the generic INPUTS must be typed `props`, not
+// $attrs - so they are declared in the runtime `props` array; the passthrough tail rides through
+// $attrs onto the inner VirtualizedList. The inner list still GATES RefreshControl + viewability
+// on callback presence, so each emit bridge is wired ONLY when the consumer actually listens.
 import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
 import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, rowKeyExtractor, } from '@symbiote-native/components';
 import { dlog, resolveClassName, } from '@symbiote-native/engine';
 import { VirtualizedList } from '../virtualized-list/index.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
-// VirtualizedList is itself a generic component (generic construct signature), which h()'s overloads
-// can't resolve. Drive it through a loose functional-component handle (generic-component h()
-// limitation — the ItemT surface is proven at the typed FlatList boundary above).
+// VirtualizedList's generic construct signature can't be resolved by h()'s overloads, so drive
+// it through a loose functional-component handle (the ItemT surface is proven at the typed
+// FlatList boundary above).
 const VirtualizedListHost = VirtualizedList;
-// The typed inputs FlatList reads off `props`; everything else falls through $attrs onto the inner
-// VirtualizedList. Listed for the runtime `props` declaration (keyof can't derive it: the index
-// signature widens keyof to `string`).
+// Listed for the runtime `props` declaration (keyof can't derive it: the index signature widens
+// keyof to `string`).
 const PROP_KEYS = [
     'data',
     'keyExtractor',
@@ -61,41 +56,42 @@ function buildDelegateHandle(getInner) {
         recordInteraction: () => getInner()?.recordInteraction(),
     };
 }
-export const FlatList = defineComponent((props, { attrs, expose, emit, slots }) => {
+export const FlatList = defineComponent((props, { attrs, expose, emit, slots, }) => {
     const inner = shallowRef(null);
     const setInner = (instance) => {
         inner.value = isVirtualizedListHandle(instance) ? instance : null;
     };
     expose(buildDelegateHandle(() => inner.value));
-    // VirtualizedList gates RefreshControl + viewability on callback presence, so a bridge is wired
-    // ONLY when the consumer actually listens. Declared emits are stripped from $attrs, so read the
-    // listener off the instance's own vnode props (what the parent passed) instead.
+    // Declared emits are stripped from $attrs, so read the listener off the instance's own vnode
+    // props instead, gating each bridge to when the consumer actually listens.
     const instance = getCurrentInstance();
     const listens = (onName) => {
         const vnodeProps = instance?.vnode.props;
         return vnodeProps != null && typeof vnodeProps[onName] === 'function';
     };
     return () => {
-        const data = Array.isArray(props.data) ? props.data : [];
+        const data = Array.isArray(props.data)
+            ? props.data
+            : [];
         const keyExtractor = props.keyExtractor;
         const numColumns = typeof props.numColumns === 'number' ? props.numColumns : SINGLE_COLUMN;
         const viewabilityPairs = props.viewabilityConfigCallbackPairs;
-        // The chrome slots ride straight down to the inner list; #item/#separator are forwarded as-is
-        // for a single column and re-wrapped per cell for multi-column below.
-        const chromeSlots = { header: slots.header, footer: slots.footer, empty: slots.empty };
-        // The passthrough tail: declared props + declared emits' onX are already removed from $attrs,
-        // so what's left is the VirtualizedList passthrough (kebab-folded for the inner list).
+        const chromeSlots = {
+            header: slots.header,
+            footer: slots.footer,
+            empty: slots.empty,
+        };
         const forwarded = normalizeVueAttrs(attrs);
         dlog(`Vue FlatList over ${data.length} items, ${numColumns} column(s)`);
-        // The synthesized list events become VL handlers ONLY when listened, so the inner list keeps
-        // gating (no parasitic RefreshControl / viewability work for an unlistened event).
         const endReached = listens('onEndReached')
             ? (info) => emit('endReached', info)
             : undefined;
         const startReached = listens('onStartReached')
             ? (info) => emit('startReached', info)
             : undefined;
-        const refresh = listens('onRefresh') ? () => emit('refresh') : undefined;
+        const refresh = listens('onRefresh')
+            ? () => emit('refresh')
+            : undefined;
         const scrollToIndexFailed = listens('onScrollToIndexFailed')
             ? (info) => emit('scrollToIndexFailed', info)
             : undefined;
@@ -117,20 +113,17 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
                 onScrollToIndexFailed: scrollToIndexFailed,
                 onViewableItemsChanged,
                 viewabilityConfigCallbackPairs: viewabilityPairs,
-            }, 
-            // A single column forwards the consumer's slots untouched (#item info shape is identical).
-            { ...chromeSlots, item: slots.item, separator: slots.separator });
+            }, { ...chromeSlots, item: slots.item, separator: slots.separator });
         }
         // Multi-column: the virtualized stream is rows. Each cell renders its items side by side
         // in a flex-row View so windowing accounts for whole rows.
         const rows = chunkIntoRows(data, numColumns);
-        // A class-name string resolves through the shared style registry; an object/array is
-        // already style-shaped and passes through as-is.
         const rowStyle = [
             { flexDirection: 'row' },
             typeof props.columnWrapperStyle === 'string'
                 ? resolveClassName(props.columnWrapperStyle)
-                : isRecord(props.columnWrapperStyle) || Array.isArray(props.columnWrapperStyle)
+                : isRecord(props.columnWrapperStyle) ||
+                    Array.isArray(props.columnWrapperStyle)
                     ? props.columnWrapperStyle
                     : undefined,
         ];

package/build/components/image-background.js

@@ -1,12 +1,10 @@
 // ImageBackground: the Vue lifecycle half. The composition (the absolute-fill Image behind the
 // children, the dimension-proxy + style-merge math) lives framework-agnostic in
-// @symbiote-native/components/renderImageBackground and is shared verbatim with React; here Vue only
-// narrows the untyped attrs into the typed Image view, folds aria/role, bridges the Descriptor to
-// vnodes, and appends the slot children ON TOP of the inner image.
+// @symbiote-native/components/renderImageBackground, shared verbatim with React; Vue narrows the
+// untyped attrs into the typed Image view, folds aria/role, bridges the Descriptor to vnodes, and
+// appends the slot children ON TOP of the inner image.
 //
-// FUNCTIONAL, not a stateful defineComponent: ImageBackground is render-only (no state). Inputs
-// arrive as attrs (untyped); the typed transform fields are narrowed with runtime guards, the
-// forward-only rest is folded so resolveAccessibilityProps lands aria-* onto the inner image.
+// FUNCTIONAL, not a stateful defineComponent: render-only, no state.
 import { h } from '@vue/runtime-core';
 import { renderImageBackground, resolveAccessibilityProps, } from '@symbiote-native/components';
 import { resolveClassName, } from '@symbiote-native/engine';
@@ -18,8 +16,6 @@ function asString(value) {
 function asNumber(value) {
     return typeof value === 'number' ? value : undefined;
 }
-// A source is a structured object/array or an opaque require() id (number) the engine's injected
-// resolver expands; any object/array/number is a valid source to forward.
 function asSource(value) {
     if (typeof value === 'number')
         return value;
@@ -38,18 +34,16 @@ function asResizeMode(value) {
     return isResizeMode(value) ? value : undefined;
 }
 function asCrossOrigin(value) {
-    return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
+    return value === 'anonymous' || value === 'use-credentials'
+        ? value
+        : undefined;
 }
-// Object OR array (a style list) passes through: the engine flattens either; primitives degrade
-// to undefined (parity with React, which preserves the StyleProp).
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
 }
 function toChildVNode(child) {
     return typeof child === 'string' ? child : descriptorToVue(child);
 }
-// `style` is the WRAPPER View style; `imageStyle` targets the inner Image. The image transform
-// fields are consumed by the source/style fold; everything else forwards onto the inner image.
 const HANDLED_ATTRS = [
     'style',
     'imageStyle',
@@ -79,8 +73,6 @@ const ImageBackgroundComponent = (_props, { attrs: rawAttrs, slots }) => {
     const attrs = normalizeVueAttrs(rawAttrs);
     const wrapper = renderImageBackground({
         style: isStyleProp(attrs.style) ? attrs.style : undefined,
-        // A class-name string resolves through the shared style registry, same as `class` above;
-        // an object/array is already style-shaped and passes through as-is.
         imageStyle: typeof attrs.imageStyle === 'string'
             ? resolveClassName(attrs.imageStyle)
             : isStyleProp(attrs.imageStyle)
@@ -104,10 +96,7 @@ const ImageBackgroundComponent = (_props, { attrs: rawAttrs, slots }) => {
     });
     // wrapper = symbiote-view > [imageDescriptor]; the slot children paint AFTER the image (on top).
     const slotChildren = slots.default !== undefined ? slots.default() : [];
-    return h(wrapper.type, { ...wrapper.props, key: wrapper.key, class: attrs.class }, [
-        ...wrapper.children.map(toChildVNode),
-        ...slotChildren,
-    ]);
+    return h(wrapper.type, { ...wrapper.props, key: wrapper.key, class: attrs.class }, [...wrapper.children.map(toChildVNode), ...slotChildren]);
 };
 ImageBackgroundComponent.displayName = 'ImageBackground';
 ImageBackgroundComponent.inheritAttrs = false;

package/build/components/image.js

@@ -1,17 +1,12 @@
-// Image: the Vue lifecycle half. The full fold (source / src / srcSet resolution, the
-// width/height → style fold, resizeMode/tintColor, alt → accessibility, and the native source
-// array) lives framework-agnostic in @symbiote-native/components and is shared verbatim with React;
-// here Vue only narrows the untyped attrs into renderImage's typed view, folds aria/role, bridges
-// the Descriptor to a vnode, and carries the Image statics (getSize / prefetch / queryCache / …).
+// Image: the Vue lifecycle half. The full fold (source/src/srcSet resolution, width/height ->
+// style fold, resizeMode/tintColor, alt -> accessibility, and the native source array) lives
+// framework-agnostic in @symbiote-native/components, shared verbatim with React; Vue narrows the
+// untyped attrs into renderImage's typed view, folds aria/role, bridges the Descriptor to a
+// vnode, and carries the Image statics (getSize/prefetch/queryCache/...).
 //
-// FUNCTIONAL, not a stateful defineComponent: Image is render-only, and Animated.Image wraps it
-// via createAnimatedComponent, which captures the host
-// node through a ref that only falls through on a functional component (a defineComponent's ref
-// resolves to a useless component proxy; see components.ts). So Image must stay functional.
-//
-// Inputs arrive as attrs (untyped). The typed transform fields are narrowed with runtime guards;
-// the forward-only rest (events, blurRadius, capInsets, testID, accessibility*) is typed as the
-// a11y intersection so resolveAccessibilityProps folds aria-* into accessibility* over it.
+// FUNCTIONAL, not a stateful defineComponent: Animated.Image wraps it via createAnimatedComponent,
+// which captures the host node through a ref that only falls through on a functional component
+// (a defineComponent's ref resolves to a useless component proxy; see components.ts).
 import { imageStatics, renderImage, resolveAccessibilityProps, } from '@symbiote-native/components';
 import { descriptorToVue } from '../descriptor-to-vue.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
@@ -22,8 +17,6 @@ function asString(value) {
 function asNumber(value) {
     return typeof value === 'number' ? value : undefined;
 }
-// A source is a structured object/array or an opaque require() id (number) the engine's injected
-// resolver expands; any object/array/number is a valid source to forward (IImageSource is all-optional).
 function asSource(value) {
     if (typeof value === 'number')
         return value;
@@ -42,14 +35,13 @@ function asResizeMode(value) {
     return isResizeMode(value) ? value : undefined;
 }
 function asCrossOrigin(value) {
-    return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
+    return value === 'anonymous' || value === 'use-credentials'
+        ? value
+        : undefined;
 }
-// Object OR array (a style list) passes through; readStyleString flattens either, and arrays must
-// survive so `style={[a, b]}` reaches Fabric (parity with React, which preserves the StyleProp).
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
 }
-// The typed transform fields renderImage folds; everything else forwards via passthrough.
 const HANDLED_ATTRS = [
     'source',
     'defaultSource',
@@ -94,6 +86,5 @@ const ImageComponent = (_props, { attrs: rawAttrs }) => {
 };
 ImageComponent.displayName = 'Image';
 ImageComponent.inheritAttrs = false;
-// Statics attached like RN (Image.getSize / prefetch / …), shared verbatim with React via
-// the engine-resolved imageStatics. The component value doubles as the statics namespace.
+// Statics attached like RN (Image.getSize/prefetch/...), shared verbatim with React.
 export const Image = Object.assign(ImageComponent, imageStatics);

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

@@ -1,28 +1,24 @@
-// KeyboardAvoidingView: the Vue lifecycle half. The inset math + the behavior → style/structure
-// decision live in @symbiote-native/components (render-keyboard-avoiding-view), shared verbatim with the
-// React adapter; Vue supplies only the reactivity: a ref holds the inset, onMounted subscribes to
-// the now-core Keyboard module (show / changeFrame / hide), onUnmounted tears the subscriptions
-// down, and onLayout measures the wrapper frame that feeds the next event's inset. This is the Vue
-// twin of React's useState + useEffect + onLayout. Full parity: behavior 'height'|'position'|
-// 'padding', enabled, keyboardVerticalOffset, contentContainerStyle, onLayout.
+// KeyboardAvoidingView: the Vue lifecycle half. The inset math + the behavior->style/structure
+// decision live in @symbiote-native/components (render-keyboard-avoiding-view), shared verbatim
+// with React; Vue supplies only the reactivity: a ref holds the inset, onMounted subscribes to
+// this host's two keyboard notifications (keyboardAvoidingEventNamesFor — will* on iOS, did* on
+// Android, and never changeFrame), onUnmounted tears the subscriptions down, and onLayout
+// measures the wrapper frame that feeds the next event's inset.
 //
-// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard rather than a cast.
-// rawAttrs runs through normalizeVueAttrs (kebab→camel) so a template `:keyboard-vertical-offset`
-// and `:content-container-style` resolve; aria-*/data-* are preserved and forwarded to the host.
-import { defineComponent, h, ref, onMounted, onUnmounted } from '@vue/runtime-core';
-import { Keyboard, KEYBOARD_EVENT, dlog, } from '@symbiote-native/engine';
-import { computeInset, readKeyboardFrame, readLayoutFrame, resolveKeyboardAvoidingLayout, resolveAccessibilityProps, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard, never a cast.
+// 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 { normalizeVueAttrs } from '../utils/normalize-attrs.js';
-// A style prop is an object (a style record) or an array of them; numbers/strings/null degrade
-// to undefined (the engine flattens what it gets). A runtime guard, not a cast.
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
 }
 function asBehavior(value) {
-    return value === 'height' || value === 'position' || value === 'padding' ? value : undefined;
+    return value === 'height' || value === 'position' || value === 'padding'
+        ? value
+        : undefined;
 }
-// The prop/handler keys the lifecycle consumes itself; everything else (accessibility, testID,
-// aria-*/data-*) forwards onto the wrapper host node.
 const HANDLED_ATTRS = [
     'behavior',
     'enabled',
@@ -40,19 +36,31 @@ function forwardAttrs(attrs) {
     return result;
 }
 export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
-    // The inset is a number (plain data), so a plain ref is correct; no engine node is held here
-    // (onLayout delivers the frame, so no imperative measure / host-node capture is needed).
     const inset = ref(0);
     // Mutable, not reactive: changing the measured frame alone shouldn't re-render; it feeds the
-    // next keyboard event's inset math (React's frameRef / initialHeightRef).
+    // next keyboard event's inset math.
     let frame;
     let initialHeight;
-    const verticalOffset = () => typeof rawAttrs.keyboardVerticalOffset === 'number'
-        ? rawAttrs.keyboardVerticalOffset
-        : DEFAULT_VERTICAL_OFFSET;
+    // A device accessibility setting, read once per mount. Deliberately a plain variable, not a
+    // ref: it cannot change during a session, so nothing should re-render when it resolves.
+    let prefersCrossFadeTransitions = false;
+    // Read at EVENT time rather than captured once: attrs is live, and both the offset and the
+    // behavior feed every keyboard notification's inset math.
+    const currentAttrs = () => normalizeVueAttrs(rawAttrs);
+    const verticalOffset = () => {
+        const offset = currentAttrs().keyboardVerticalOffset;
+        return typeof offset === 'number' ? offset : DEFAULT_VERTICAL_OFFSET;
+    };
     const onShow = (payload) => {
         const keyboard = readKeyboardFrame(payload);
-        const next = computeInset(frame, keyboard, verticalOffset());
+        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,
+            prefersCrossFadeTransitions,
+        });
         dlog(`KeyboardAvoidingView show -> inset ${next}`);
         inset.value = next;
     };
@@ -62,11 +70,19 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
     };
     let subscriptions = [];
     onMounted(() => {
+        // TWO notifications, per host: iOS takes the will* pair so the view rides up with the
+        // keyboard animation, Android the did* pair. changeFrame is deliberately absent — with an
+        // undocked/split/floating iOS keyboard it fires BEFORE the hide, mid-dismissal.
+        const events = keyboardAvoidingEventNamesFor(Platform.OS);
         subscriptions = [
-            Keyboard.addListener(KEYBOARD_EVENT.didShow, onShow),
-            Keyboard.addListener(KEYBOARD_EVENT.didChangeFrame, onShow),
-            Keyboard.addListener(KEYBOARD_EVENT.didHide, onHide),
+            Keyboard.addListener(events.show, onShow),
+            Keyboard.addListener(events.hide, onHide),
         ];
+        // Nobody awaits this, so it goes through the core wrapper, which answers false on a failed
+        // native read instead of leaving an unhandled rejection.
+        void readPrefersCrossFadeTransitions().then(enabled => {
+            prefersCrossFadeTransitions = enabled;
+        });
     });
     onUnmounted(() => {
         for (const subscription of subscriptions)
@@ -83,7 +99,7 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
         emit('layout', event);
     };
     return () => {
-        const attrs = normalizeVueAttrs(rawAttrs);
+        const attrs = currentAttrs();
         const behavior = asBehavior(attrs.behavior);
         // RN gates every inset on `enabled ?? true`; only an explicit `false` disables.
         const isEnabled = attrs.enabled !== false;
@@ -103,8 +119,8 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
             style: layout.wrapperStyle,
             onLayout: handleLayout,
         };
-        // 'nested' ('position') pushes the children in an inner view by `bottom: inset`; the wrapper
-        // modes adjust the single wrapper directly.
+        // 'nested' pushes the children in an inner view by `bottom: inset`; the wrapper modes
+        // adjust the single wrapper directly.
         if (layout.kind === 'nested') {
             return h('symbiote-view', wrapperProps, [
                 h('symbiote-view', { style: layout.innerStyle }, childNodes),

package/build/components/modal/index.d.ts

@@ -1,5 +1,5 @@
-import { type IAccessibilityProps, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalOrientationChangeEvent, type IModalPresentationStyle } from '@symbiote-native/components';
-import { type IClassNameValue, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import { type IAccessibilityProps, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalPresentationStyle } from '@symbiote-native/components';
+import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
 export type { IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from '@symbiote-native/components';
 export interface IModalProps extends IAccessibilityProps, IAriaProps {
     visible?: boolean;
@@ -19,11 +19,11 @@ export type IModalEmits = {
     show: () => boolean;
     dismiss: () => boolean;
     requestClose: () => boolean;
-    orientationChange: (event: IModalOrientationChangeEvent) => boolean;
+    orientationChange: (event: ISymbioteEvent) => boolean;
 };
 export declare const Modal: import("vue").DefineSetupFnComponent<IModalProps, IModalEmits, {}, IModalProps & {
     onShow?: (() => any) | undefined;
     onDismiss?: (() => any) | undefined;
     onRequestClose?: (() => any) | undefined;
-    onOrientationChange?: ((event: IModalOrientationChangeEvent) => any) | undefined;
+    onOrientationChange?: ((event: ISymbioteEvent) => any) | undefined;
 }, import("vue").PublicProps>;

package/build/components/modal/index.js

@@ -21,7 +21,9 @@ function asString(value) {
     return typeof value === 'string' ? value : undefined;
 }
 function asAnimationType(value) {
-    return value === 'none' || value === 'slide' || value === 'fade' ? value : undefined;
+    return value === 'none' || value === 'slide' || value === 'fade'
+        ? value
+        : undefined;
 }
 function asPresentationStyle(value) {
     return value === 'fullScreen' ||
@@ -41,7 +43,8 @@ const ORIENTATIONS = [
 function isOrientation(value) {
     // .includes() types its arg as IModalOrientation, so a bare string won't pass; .some keeps the
     // ORIENTATIONS list as the single source of truth without an `as` cast.
-    return typeof value === 'string' && ORIENTATIONS.some(orientation => orientation === value);
+    return (typeof value === 'string' &&
+        ORIENTATIONS.some(orientation => orientation === value));
 }
 function asSupportedOrientations(value) {
     if (!Array.isArray(value))

package/build/components/pressable.d.ts

@@ -1,7 +1,7 @@
 import { type EmitFn, type VNode } from '@vue/runtime-core';
 import { type IPressState, type IRectOffset, type IPressableAndroidRippleConfig, type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
 import { type IClassNameValue, type ISymbioteEvent, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
-export type { IPressState, IPressableAndroidRippleConfig } from '@symbiote-native/components';
+export type { IPressState, IPressableAndroidRippleConfig, } from '@symbiote-native/components';
 export type IPressableEmits = {
     press: (event: ISymbioteEvent) => boolean;
     pressIn: (event: ISymbioteEvent) => boolean;

package/build/components/pressable.js

@@ -1,24 +1,22 @@
-// Pressable, the Vue lifecycle half. The press lifecycle (the long-press timer, unstable_press-
-// Delay deferral, the pressRetentionOffset drift test, the suppression flags) lives in
-// @symbiote-native/components/state as a pure machine over a runtime + host; the render decisions (the
-// responder listeners, the disabled→accessibilityState fold, the ripple prop) in
-// @symbiote-native/components/view, both shared verbatim with the React adapter. Here Vue supplies the
+// Pressable, the Vue lifecycle half. The press lifecycle (long-press timer, unstable_press-
+// Delay deferral, pressRetentionOffset drift test, suppression flags) lives in
+// @symbiote-native/components/state as a pure machine over a runtime + host; the render
+// decisions (responder listeners, disabled->accessibilityState fold, ripple prop) in
+// @symbiote-native/components/view, both shared verbatim with React. Vue supplies the
 // reactivity: a `ref` holds `pressed`, a setup-scope object holds the press runtime, a function
-// ref grabs the responder View's host node, and the machine measures through it. This is the Vue
-// twin of the React adapter's useState + useRef(runtime) + useRef(viewRef).
+// ref grabs the responder View's host node.
 //
-// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard rather than a cast.
-// The user's onPress / onPressIn / … are consumed by the machine and MUST be stripped from the
-// forwarded attrs (they are pure-JS callbacks; the machine's SYNTHESIZED handlers go on the View,
-// where routeProp turns press/pressIn/pressOut + the responder events into listeners). Children
-// arrive as a (scoped) default slot so `v-slot="{ pressed }"` mirrors React's children-as-function.
-import { defineComponent, h, ref, shallowRef } from '@vue/runtime-core';
+// Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard, never a cast. The
+// user's onPress/onPressIn/... are consumed by the machine and MUST be stripped from the
+// forwarded attrs (pure-JS callbacks); the machine's SYNTHESIZED handlers go on the View instead.
+// Children arrive as a (scoped) default slot so `v-slot="{ pressed }"` mirrors React's
+// children-as-function.
+import { defineComponent, h, ref, shallowRef, } from '@vue/runtime-core';
 import { createPressHandlers, createPressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, resolveAccessibilityProps, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
 import { measure, isSymbioteNode, } from '@symbiote-native/engine';
 import { View } from '../components.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
-// The emits-options validator for the full press surface. Reused verbatim as the `emits` of every
-// Touchable* wrapper (they expose the same events), so the runtime list lives in exactly one place.
+// Reused verbatim as the `emits` of every Touchable* wrapper, so the runtime list lives once.
 export const PRESSABLE_EMITS = {
     press: (_event) => true,
     pressIn: (_event) => true,
@@ -29,9 +27,8 @@ export const PRESSABLE_EMITS = {
     hoverOut: (_event) => true,
 };
 // Bridge the whole press surface onto a child Pressable: each host onX callback re-emits the
-// matching event on the wrapper. Every Touchable* wraps Pressable, so spread this onto the child's
-// props. A wrapper that intercepts an event for its own state (e.g. TouchableOpacity's opacity
-// animation on press-in/out) overrides that one key AFTER the spread.
+// matching event on the wrapper. A wrapper that intercepts an event for its own state (e.g.
+// TouchableOpacity's opacity animation on press-in/out) overrides that one key AFTER the spread.
 export function emitPressableEvents(emit) {
     return {
         onPress: event => emit('press', event),
@@ -53,7 +50,7 @@ function numberOr(value, fallback) {
     return typeof value === 'number' ? value : fallback;
 }
 // A scalar offset, or the per-edge object; anything else is dropped (the machine reads undefined
-// as "no offset" → RN's defaults).
+// as "no offset" -> RN's defaults).
 function asRectOffset(value) {
     if (typeof value === 'number')
         return value;
@@ -107,9 +104,8 @@ function resolveStyle(value, state) {
         return value(state);
     return value;
 }
-// The prop/handler keys the lifecycle consumes itself; everything else (aria/accessibility/
-// testID/nativeID/native props) forwards onto the View. The user press callbacks are pure JS and
-// must never reach the host; the machine's synthesized handlers go on via buildPressableListeners.
+// Everything else forwards onto the View. User press callbacks are pure JS and must never reach
+// the host; the machine's synthesized handlers go on via buildPressableListeners.
 const HANDLED_ATTRS = [
     'onPress',
     'onPressIn',
@@ -141,16 +137,16 @@ function forwardAttrs(attrs) {
 export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit }) => {
     const pressed = ref(false);
     // The mutable press runtime (timers, suppression flags, measured region). A plain setup-scope
-    // object, never a ref: it is mutated by the machine, never reactively read.
+    // object, never a ref: mutated by the machine, never reactively read.
     const runtime = createPressRuntime();
-    // shallowRef, NOT ref: the engine node is held by IDENTITY so measure() hits the engine's
-    // WeakMap mirror (a plain ref would wrap it in a reactive Proxy → mirror miss → measure no-op).
+    // shallowRef, NOT ref: a plain ref would wrap the node in a reactive Proxy, missing the
+    // engine's WeakMap mirror and making measure() no-op.
     const nodeRef = shallowRef(null);
     const setNodeRef = (el) => {
         nodeRef.value = isSymbioteNode(el) ? el : null;
     };
     // The lifecycle seam the machine fills: flip the reactive `pressed`, and expose the responder
-    // View's raw frame-measure (or undefined before the node commits → radius fallback).
+    // View's raw frame-measure (or undefined before the node commits, a radius fallback).
     const host = {
         setPressed: next => {
             pressed.value = next;
@@ -184,9 +180,8 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
         const handlers = createPressHandlers(config, runtime, host);
         noteHoverNoop(undefined, undefined);
         const state = { pressed: pressed.value };
-        // Fold the disabled state into the user's accessibilityState, then fold aria/role over the
-        // forwarded attrs (the Vue View is a bare host primitive, so Pressable folds; React's View
-        // folds for it). resolveAccessibilityProps merges aria into the accessibilityState we set.
+        // Vue's View is a bare host primitive, so Pressable folds disabled into accessibilityState
+        // and aria/role itself, rather than the View folding it (as React's does).
         const forwarded = forwardAttrs(attrs);
         forwarded.accessibilityState = resolveDisabledAccessibilityState(asAccessibilityState(attrs.accessibilityState), disabled);
         const folded = resolveAccessibilityProps(forwarded);
@@ -198,11 +193,9 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
         if (typeof attrs.android_disableSound === 'boolean')
             viewProps.android_disableSound = attrs.android_disableSound;
         Object.assign(viewProps, buildPressableListeners(handlers, { disabled, cancelable }));
-        // Children come from the (scoped) default slot, receiving the press state so a render-prop
-        // child (`v-slot="{ pressed }"`) mirrors React's children-as-function.
         const content = slots.default !== undefined ? slots.default(state) : [];
         // android_ripple rides a dedicated inner View; on iOS the prop is undefined, so the child
-        // renders unwrapped, no extra node. Mirrors the React Pressable + touchable-native-feedback.
+        // renders unwrapped, no extra node.
         const ripple = isRecord(attrs.android_ripple)
             ? rippleProps(asRippleConfig(attrs.android_ripple) ?? {})
             : undefined;