@symbiote-native/vue 0.4.0 → 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

@@ -56,7 +56,7 @@ 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;
@@ -70,11 +70,17 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
         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;
-        const chromeSlots = { header: slots.header, footer: slots.footer, empty: slots.empty };
+        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)`);
         const endReached = listens('onEndReached')
@@ -83,7 +89,9 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
         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;
@@ -114,7 +122,8 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots })
             { 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

@@ -34,7 +34,9 @@ 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;
 }
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;
@@ -94,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

@@ -35,7 +35,9 @@ 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;
 }
 function isStyleProp(value) {
     return typeof value === 'object' && value !== null;

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

@@ -1,20 +1,23 @@
 // 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
-// the Keyboard module (show/changeFrame/hide), onUnmounted tears the subscriptions down, and
-// onLayout measures the wrapper frame that feeds the next event's inset.
+// 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, 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, KEYBOARD_EVENT, dlog, } from '@symbiote-native/engine';
-import { computeInset, readKeyboardFrame, readLayoutFrame, resolveKeyboardAvoidingLayout, resolveAccessibilityProps, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+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';
 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;
 }
 const HANDLED_ATTRS = [
     'behavior',
@@ -38,12 +41,26 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
     // 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;
     };
@@ -53,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)
@@ -74,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;

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

@@ -11,7 +11,7 @@
 // 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 { 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';

package/build/components/scroll-view/index.android.d.ts

@@ -1,4 +1,4 @@
-export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle } from './shared';
+export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle, } from './shared';
 export declare const ScrollView: import("vue").DefineSetupFnComponent<import("./shared").IScrollViewProps, import("./shared").IScrollViewEmits, {}, import("./shared").IScrollViewProps & {
     onContentSizeChange?: ((width: number, height: number) => any) | undefined;
 }, import("vue").PublicProps>;

package/build/components/scroll-view/index.android.js

@@ -23,7 +23,9 @@ function isRecord(value) {
 function isHostType(type) {
     if (typeof type === 'string')
         return true;
-    return ((typeof type === 'object' || typeof type === 'function') && type !== null && !isVNode(type));
+    return ((typeof type === 'object' || typeof type === 'function') &&
+        type !== null &&
+        !isVNode(type));
 }
 export const ScrollView = createScrollView({
     assemble: input => {

package/build/components/scroll-view/index.ios.d.ts

@@ -1,4 +1,4 @@
-export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle } from './shared';
+export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle, } from './shared';
 export declare const ScrollView: import("vue").DefineSetupFnComponent<import("./shared").IScrollViewProps, import("./shared").IScrollViewEmits, {}, import("./shared").IScrollViewProps & {
     onContentSizeChange?: ((width: number, height: number) => any) | undefined;
 }, import("vue").PublicProps>;

package/build/components/scroll-view/index.ios.js

@@ -9,7 +9,9 @@ export const ScrollView = createScrollView({
     assemble: input => {
         // Sibling placement: RefreshControl before content (RN iOS). The node ref stays on the scroll
         // view via input.scrollProps, so the imperative handle targets it whether or not refresh is on.
-        const children = input.refreshControl === undefined ? [input.content] : [input.refreshControl, input.content];
+        const children = input.refreshControl === undefined
+            ? [input.content]
+            : [input.refreshControl, input.content];
         return h(input.scrollViewIntrinsic, input.scrollProps, children);
     },
 });

package/build/components/scroll-view/shared.js

@@ -15,7 +15,7 @@
 import { defineComponent, h, isVNode, markRaw, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
 import { attachStickyScroll, buildScrollViewHandle, didContentSizeChange, forwardScrollEvent, readLayoutDimension, resolveAccessibilityProps, resolveDecelerationRate, resolveScrollForwarding, selectScrollIntrinsics, } from '@symbiote-native/components';
 import { AnimatedValue, dlog, event as animatedEvent, isClassNameValue, isNativeAnimatedAvailable, isSymbioteNode, resolveClassName, } from '@symbiote-native/engine';
-import { wrapStickyHeaders } from './sticky-header.js';
+import { wrapStickyHeaders, } from './sticky-header.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 function isHandler(value) {
     return typeof value === 'function';
@@ -37,10 +37,10 @@ function asDecelerationRate(value) {
     return undefined;
 }
 function isNumberArray(value) {
-    return Array.isArray(value) && value.every(entry => typeof entry === 'number');
+    return (Array.isArray(value) && value.every(entry => typeof entry === 'number'));
 }
 function isComponent(value) {
-    return typeof value === 'function' || (typeof value === 'object' && value !== null);
+    return (typeof value === 'function' || (typeof value === 'object' && value !== null));
 }
 // Prop/handler keys the lifecycle consumes itself; everything else forwards onto the scroll-view
 // node. onContentSizeChange is consumed (synthesized from the content onLayout); refreshControl
@@ -126,8 +126,13 @@ export function createScrollView(platform) {
             const attrs = normalizeVueAttrs(rawAttrs);
             const isHorizontal = attrs.horizontal === true;
             const userStyle = isStyleProp(attrs.style) ? attrs.style : undefined;
-            const classProp = isClassNameProp(attrs.class) ? attrs.class : undefined;
-            const layoutSplitStyle = [resolveClassName(classProp), userStyle];
+            const classProp = isClassNameProp(attrs.class)
+                ? attrs.class
+                : undefined;
+            const layoutSplitStyle = [
+                resolveClassName(classProp),
+                userStyle,
+            ];
             const contentContainerStyle = typeof attrs.contentContainerStyle === 'string'
                 ? resolveClassName(attrs.contentContainerStyle)
                 : isStyleProp(attrs.contentContainerStyle)
@@ -141,14 +146,16 @@ export function createScrollView(platform) {
             const stickyHeaderComponent = isComponent(attrs.StickyHeaderComponent)
                 ? attrs.StickyHeaderComponent
                 : undefined;
-            const { scrollViewIntrinsic, contentIntrinsic, scrollViewBaseStyle, contentStyle } = selectScrollIntrinsics(isHorizontal, contentContainerStyle);
+            const { scrollViewIntrinsic, contentIntrinsic, scrollViewBaseStyle, contentStyle, } = selectScrollIntrinsics(isHorizontal, contentContainerStyle);
             // RN defaults nested scrolling ON (ScrollView.js `nestedScrollEnabled ?? true`);
             // horizontal forwards only when defined (load-bearing on iOS's RCTScrollView axis).
             const outerProps = {
                 ...resolveAccessibilityProps(forwardAttrs(attrs)),
             };
             outerProps.nestedScrollEnabled =
-                typeof attrs.nestedScrollEnabled === 'boolean' ? attrs.nestedScrollEnabled : true;
+                typeof attrs.nestedScrollEnabled === 'boolean'
+                    ? attrs.nestedScrollEnabled
+                    : true;
             if (attrs.horizontal !== undefined)
                 outerProps.horizontal = attrs.horizontal;
             const decel = asDecelerationRate(attrs.decelerationRate);
@@ -160,7 +167,9 @@ export function createScrollView(platform) {
             // decisions (which path, throttle default, inverted capture).
             const nativeStickyAvailable = hasStickyHeaders && isNativeAnimatedAvailable();
             nativeStickyWanted = nativeStickyAvailable;
-            const userThrottle = typeof attrs.scrollEventThrottle === 'number' ? attrs.scrollEventThrottle : undefined;
+            const userThrottle = typeof attrs.scrollEventThrottle === 'number'
+                ? attrs.scrollEventThrottle
+                : undefined;
             const forwarding = resolveScrollForwarding({
                 hasStickyHeaders,
                 nativeStickyAvailable,
@@ -170,13 +179,17 @@ export function createScrollView(platform) {
                 snapToAlignment: attrs.snapToAlignment,
             });
             if (hasStickyHeaders) {
-                const userOnScroll = isHandler(attrs.onScroll) ? attrs.onScroll : undefined;
+                const userOnScroll = isHandler(attrs.onScroll)
+                    ? attrs.onScroll
+                    : undefined;
                 if (forwarding.mode === 'sticky-js') {
                     // JS fallback (no native module): correct, but lags a frame under fast scroll, which
                     // the native path removes on a real host.
                     outerProps.onScroll = animatedEvent([{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }], userOnScroll === undefined
                         ? undefined
-                        : { listener: (...args) => forwardScrollEvent(userOnScroll, args) });
+                        : {
+                            listener: (...args) => forwardScrollEvent(userOnScroll, args),
+                        });
                 }
                 // Native path: the value is driven on the UI thread by the post-commit watch above, so
                 // onScroll forwards untouched.
@@ -186,7 +199,9 @@ export function createScrollView(platform) {
                 // Capture the viewport height for inverted sticky headers (RN _handleLayout), then call
                 // the user's handler.
                 if (forwarding.capturesViewportHeight) {
-                    const userOnLayout = isHandler(attrs.onLayout) ? attrs.onLayout : undefined;
+                    const userOnLayout = isHandler(attrs.onLayout)
+                        ? attrs.onLayout
+                        : undefined;
                     outerProps.onLayout = (event) => {
                         const height = readLayoutDimension(event, 'height');
                         if (height !== undefined)
@@ -200,7 +215,10 @@ export function createScrollView(platform) {
             // `collapsable: false` keeps the layout-only content view as a real native view: Android
             // Fabric view-flattens it away otherwise, hoisting the cells as direct children of the
             // scroll view (which hosts exactly one) - an addViewAt crash. iOS never flattens.
-            const contentProps = { style: contentStyle, collapsable: false };
+            const contentProps = {
+                style: contentStyle,
+                collapsable: false,
+            };
             if (forwarding.collapsableChildren) {
                 contentProps.collapsableChildren = false;
             }
@@ -228,7 +246,9 @@ export function createScrollView(platform) {
                 style: [scrollViewBaseStyle, userStyle],
                 ref: setNodeRef,
             };
-            const refreshControl = isVNode(attrs.refreshControl) ? attrs.refreshControl : undefined;
+            const refreshControl = isVNode(attrs.refreshControl)
+                ? attrs.refreshControl
+                : undefined;
             return platform.assemble({
                 scrollViewIntrinsic,
                 scrollProps,

package/build/components/scroll-view/sticky-header.js

@@ -52,7 +52,10 @@ export const ScrollViewStickyHeader = defineComponent({
         const version = ref(0);
         // Engine node -> shallowRef (identity rule); the un-measured identity stub until the
         // rebuild-interpolation effect below replaces it.
-        const animatedTranslateY = shallowRef(scrollAnimatedValue.interpolate({ inputRange: [-1, 0], outputRange: [0, 0] }));
+        const animatedTranslateY = shallowRef(scrollAnimatedValue.interpolate({
+            inputRange: [-1, 0],
+            outputRange: [0, 0],
+        }));
         let debounceTimer;
         // Held so the next rebuild detaches the old listener and onBeforeUnmount cleans up.
         let interpolation;
@@ -60,8 +63,12 @@ export const ScrollViewStickyHeader = defineComponent({
         const inputs = () => ({
             os: Platform.OS,
             inverted: typeof attrs.inverted === 'boolean' ? attrs.inverted : undefined,
-            scrollViewHeight: typeof attrs.scrollViewHeight === 'number' ? attrs.scrollViewHeight : undefined,
-            nextHeaderLayoutY: typeof attrs.nextHeaderLayoutY === 'number' ? attrs.nextHeaderLayoutY : undefined,
+            scrollViewHeight: typeof attrs.scrollViewHeight === 'number'
+                ? attrs.scrollViewHeight
+                : undefined,
+            nextHeaderLayoutY: typeof attrs.nextHeaderLayoutY === 'number'
+                ? attrs.nextHeaderLayoutY
+                : undefined,
         });
         const runEffects = (effects) => {
             for (const effect of effects) {
@@ -124,13 +131,19 @@ export const ScrollViewStickyHeader = defineComponent({
             const y = readLayoutNumber(event, 'y');
             const height = readLayoutNumber(event, 'height');
             // Keep the previous value when a field is absent (RN sets state only on a defined read).
-            dispatch({ kind: 'layout', y: y ?? state.layoutY, height: height ?? state.layoutHeight });
+            dispatch({
+                kind: 'layout',
+                y: y ?? state.layoutY,
+                height: height ?? state.layoutHeight,
+            });
             const recorder = attrs.onLayout;
             if (isHandler(recorder))
                 recorder(event);
             const children = slots.default !== undefined ? slots.default() : [];
             const child = children[0];
-            const childOnLayout = isVNode(child) ? readChildOnLayout(child) : undefined;
+            const childOnLayout = isVNode(child)
+                ? readChildOnLayout(child)
+                : undefined;
             if (childOnLayout !== undefined)
                 childOnLayout(event);
         };

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

@@ -34,7 +34,7 @@ function buildDelegate(getInner) {
 }
 export const SectionList = defineComponent(
 // _props is read only by the type system, to let ItemT infer at the call site.
-(_props, { attrs, expose, emit, slots }) => {
+(_props, { attrs, expose, emit, slots, }) => {
     const inner = shallowRef(null);
     const setInner = (instance) => {
         inner.value = isSectionHandle(instance) ? instance : null;
@@ -54,7 +54,9 @@ export const SectionList = defineComponent(
         const startReached = listens('onStartReached')
             ? (info) => emit('startReached', info)
             : undefined;
-        const refresh = listens('onRefresh') ? () => emit('refresh') : undefined;
+        const refresh = listens('onRefresh')
+            ? () => emit('refresh')
+            : undefined;
         return h(VirtualizedSectionListHost, {
             ...normalizeVueAttrs(attrs),
             ref: setInner,

package/build/components/switch/shared.js

@@ -73,7 +73,10 @@ export function createSwitch(platform) {
                 return;
             emit('valueChange', next, event);
             emitModelUpdate(emit, next);
-            state.value = switchReducer(state.value, { type: 'native-reported', value: next });
+            state.value = switchReducer(state.value, {
+                type: 'native-reported',
+                value: next,
+            });
         };
         // Snap-back: when native reported a value the parent rejected, command the JS value back
         // down (the controlled-Switch correction RN does via SwitchCommands.setValue). The
@@ -97,12 +100,18 @@ export function createSwitch(platform) {
             const attrs = normalizeVueAttrs(rawAttrs);
             return descriptorToVue(renderSwitch({
                 value: resolveModelValue(attrs, isBoolean) === true,
-                disabled: typeof attrs.disabled === 'boolean' ? attrs.disabled : undefined,
+                disabled: typeof attrs.disabled === 'boolean'
+                    ? attrs.disabled
+                    : undefined,
                 trackColor: normalizeTrackColor(attrs.trackColor),
                 thumbColor: asString(attrs.thumbColor),
                 ios_backgroundColor: asString(attrs.ios_backgroundColor),
                 style: isViewStyleObject(attrs.style) ? attrs.style : undefined,
-                passthrough: { ...forwardAttrs(attrs), ref: setNodeRef, onChange: handleChange },
+                passthrough: {
+                    ...forwardAttrs(attrs),
+                    ref: setNodeRef,
+                    onChange: handleChange,
+                },
             }, platform));
         };
     }, {

package/build/components/text-input/index.js

@@ -8,7 +8,7 @@
 // Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard, never a cast.
 // onValueChange MUST be stripped from the forwarded attrs: it is not a ViewConfig event, so
 // leaking it would reach Fabric as a function prop and crash Android's folly::dynamic.
-import { defineComponent, onBeforeUnmount, ref, shallowRef, watch } from '@vue/runtime-core';
+import { defineComponent, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
 import { resolveAccessibilityProps, resolveTextInputProps, renderTextInput, foldText, textFromChange, eventCountFromChange, shouldCommandText, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
 import { dispatchViewCommand, isSymbioteNode, dlog, blurTextInput, setInputFocused, setInputBlurred, whenCommitted, } from '@symbiote-native/engine';
 import { descriptorToVue } from '../../descriptor-to-vue.js';
@@ -170,7 +170,12 @@ export const TextInput = defineComponent((_props, { attrs: rawAttrs, emit, expos
             const node = nodeRef.value;
             if (node === null)
                 return;
-            dispatchViewCommand(node, 'setTextAndSelection', [mostRecentEventCount.value, '', 0, 0]);
+            dispatchViewCommand(node, 'setTextAndSelection', [
+                mostRecentEventCount.value,
+                '',
+                0,
+                0,
+            ]);
             lastNativeText = '';
         },
         isFocused: () => focused,

package/build/components/touchable-native-feedback.js

@@ -32,7 +32,9 @@ function asBackground(value) {
             return {
                 type: 'ThemeAttrAndroid',
                 attribute: value.attribute,
-                rippleRadius: typeof value.rippleRadius === 'number' ? value.rippleRadius : undefined,
+                rippleRadius: typeof value.rippleRadius === 'number'
+                    ? value.rippleRadius
+                    : undefined,
             };
         }
         return undefined;

package/build/components/touchable.d.ts

@@ -12,6 +12,10 @@ export interface ITouchableHighlightProps extends ITouchableBaseProps {
     underlayColor?: string;
 }
 export type ITouchableWithoutFeedbackProps = ITouchableBaseProps;
+export type ITouchableHighlightEmits = IPressableEmits & {
+    showUnderlay: () => boolean;
+    hideUnderlay: () => boolean;
+};
 export declare const TouchableOpacity: import("vue").DefineSetupFnComponent<ITouchableOpacityProps, IPressableEmits, {}, ITouchableOpacityProps & {
     onPress?: ((event: ISymbioteEvent) => any) | undefined;
     onPressIn?: ((event: ISymbioteEvent) => any) | undefined;
@@ -21,7 +25,7 @@ export declare const TouchableOpacity: import("vue").DefineSetupFnComponent<ITou
     onHoverIn?: ((event: ISymbioteEvent) => any) | undefined;
     onHoverOut?: ((event: ISymbioteEvent) => any) | undefined;
 }, import("vue").PublicProps>;
-export declare const TouchableHighlight: import("vue").DefineSetupFnComponent<ITouchableHighlightProps, IPressableEmits, {}, ITouchableHighlightProps & {
+export declare const TouchableHighlight: import("vue").DefineSetupFnComponent<ITouchableHighlightProps, ITouchableHighlightEmits, {}, ITouchableHighlightProps & {
     onPress?: ((event: ISymbioteEvent) => any) | undefined;
     onPressIn?: ((event: ISymbioteEvent) => any) | undefined;
     onPressOut?: ((event: ISymbioteEvent) => any) | undefined;
@@ -29,6 +33,8 @@ export declare const TouchableHighlight: import("vue").DefineSetupFnComponent<IT
     onLongPress?: ((event: ISymbioteEvent) => any) | undefined;
     onHoverIn?: ((event: ISymbioteEvent) => any) | undefined;
     onHoverOut?: ((event: ISymbioteEvent) => any) | undefined;
+    onShowUnderlay?: (() => any) | undefined;
+    onHideUnderlay?: (() => any) | undefined;
 }, import("vue").PublicProps>;
 export declare const TouchableWithoutFeedback: import("vue").DefineSetupFnComponent<ITouchableBaseProps, IPressableEmits, {}, Omit<IPressableProps, "style"> & IPressTimingProps & {
     style?: IStyleProp<IViewStyle>;