@symbiote-native/vue 3.3.0 → 3.4.0

package/build/components/flat-list/index.d.ts

@@ -1,15 +1,16 @@
-import { type VNode } from '@vue/runtime-core';
+import { type Component, type VNode } from '@vue/runtime-core';
 import { type ISeparatorProps, type ISeparators, type IViewabilityConfigCallbackPair, type IViewableItemsChangedInfo, type IVirtualizedListHandle } from '@symbiote-native/components';
 import { type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
 export type IFlatListHandle = IVirtualizedListHandle;
-export interface IFlatListProps<ItemT> {
+export type IFlatListProps<ItemT> = {
     data: readonly ItemT[];
     keyExtractor?: (item: ItemT, index: number) => string;
+    listItemComponent?: Component;
     numColumns?: number;
     columnWrapperStyle?: IStyleProp<IViewStyle> | string;
     viewabilityConfigCallbackPairs?: IViewabilityConfigCallbackPair<ItemT>[];
     [key: string]: unknown;
-}
+};
 export type IFlatListSlots<ItemT> = {
     item: (info: {
         item: ItemT;

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

@@ -10,9 +10,10 @@
 // $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, removeClippedSubviewsOrDefault, rowKeyExtractor, } from '@symbiote-native/components';
+import { SINGLE_COLUMN, arrayLikeLength, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, removeClippedSubviewsOrDefault, routeScrollHandle, rowKeyExtractor, } from '@symbiote-native/components';
 import { Platform, dlog, resolveClassName, } from '@symbiote-native/engine';
 import { VirtualizedList } from '../virtualized-list/index.js';
+import { renderCellContent } from '../virtualized-list/list-elements.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 // 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
@@ -23,6 +24,7 @@ const VirtualizedListHost = VirtualizedList;
 const PROP_KEYS = [
     'data',
     'keyExtractor',
+    'listItemComponent',
     'numColumns',
     'columnWrapperStyle',
     'viewabilityConfigCallbackPairs',
@@ -40,6 +42,12 @@ function isRecord(value) {
 function isVirtualizedListHandle(value) {
     return isRecord(value) && typeof value.scrollToOffset === 'function';
 }
+// A bare string is a registered class name, an object or array is a style, anything else is none
+function wrapperStyleOf(style) {
+    if (typeof style === 'string')
+        return resolveClassName(style);
+    return isRecord(style) || Array.isArray(style) ? style : undefined;
+}
 // The handle FlatList exposes delegates to the inner VirtualizedList's handle (Vue resolves a
 // parent ref to the exposed object, so the wrapper must re-expose rather than forward the ref).
 function buildDelegateHandle(getInner) {
@@ -48,12 +56,7 @@ function buildDelegateHandle(getInner) {
         scrollToIndex: params => getInner()?.scrollToIndex(params),
         scrollToItem: params => getInner()?.scrollToItem(params),
         scrollToEnd: params => getInner()?.scrollToEnd(params),
-        flashScrollIndicators: () => getInner()?.flashScrollIndicators(),
-        getNativeScrollRef: () => getInner()?.getNativeScrollRef() ?? null,
-        getScrollableNode: () => getInner()?.getScrollableNode() ?? null,
-        getScrollResponder: () => getInner()?.getScrollResponder() ?? null,
-        getScrollNode: () => getInner()?.getScrollNode() ?? null,
-        recordInteraction: () => getInner()?.recordInteraction(),
+        ...routeScrollHandle(getInner),
     };
 }
 export const FlatList = defineComponent((props, { attrs, expose, emit, slots, }) => {
@@ -70,10 +73,10 @@ 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
-            : [];
+        // RN takes any array-like, and a null or a non-list as an empty one
+        const data = props.data;
         const keyExtractor = props.keyExtractor;
+        const listItemComponent = props.listItemComponent;
         const numColumns = typeof props.numColumns === 'number' ? props.numColumns : SINGLE_COLUMN;
         const viewabilityPairs = props.viewabilityConfigCallbackPairs;
         const chromeSlots = {
@@ -87,7 +90,7 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots, })
             ...normalizedAttrs,
             removeClippedSubviews: removeClippedSubviewsOrDefault(normalizedAttrs.removeClippedSubviews, Platform.OS),
         };
-        dlog(`Vue FlatList over ${data.length} items, ${numColumns} column(s)`);
+        dlog(`Vue FlatList over ${arrayLikeLength(data)} items, ${numColumns} column(s)`);
         const endReached = listens('onEndReached')
             ? (info) => emit('endReached', info)
             : undefined;
@@ -110,8 +113,9 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots, })
                 ref: setInner,
                 data,
                 getItem: (_source, index) => data[index],
-                getItemCount: () => data.length,
+                getItemCount: () => arrayLikeLength(data),
                 keyExtractor,
+                listItemComponent: props.listItemComponent,
                 onEndReached: endReached,
                 onStartReached: startReached,
                 onRefresh: refresh,
@@ -125,12 +129,7 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots, })
         const rows = chunkIntoRows(data, numColumns);
         const rowStyle = [
             { flexDirection: 'row' },
-            typeof props.columnWrapperStyle === 'string'
-                ? resolveClassName(props.columnWrapperStyle)
-                : isRecord(props.columnWrapperStyle) ||
-                    Array.isArray(props.columnWrapperStyle)
-                    ? props.columnWrapperStyle
-                    : undefined,
+            wrapperStyleOf(props.columnWrapperStyle),
         ];
         const rowItemSlot = (info) => {
             const cells = info.item.items.map((item, column) => {
@@ -138,9 +137,7 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots, })
                 const key = keyExtractor ? keyExtractor(item, index) : String(index);
                 // The row IS the virtualized cell, so every item in it shares the row's separators
                 // handle (the divider sits between rows, not columns), like RN's multi-column FlatList.
-                return h('view', { key, style: { flex: 1 } }, slots.item !== undefined
-                    ? slots.item({ item, index, separators: info.separators })
-                    : []);
+                return h('view', { key, style: { flex: 1 } }, renderCellContent({ renderItem: slots.item, listItemComponent }, { item, index, separators: info.separators }) ?? []);
             });
             return [h('view', { style: rowStyle }, cells)];
         };

package/build/components/input-accessory-view-props.d.ts

@@ -1,8 +1,8 @@
 import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
-import type { IClassNameValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
-export interface IInputAccessoryViewProps extends IAccessibilityProps, IAriaProps {
+import type { IClassNameValue, IColorValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+export type IInputAccessoryViewProps = IAccessibilityProps & IAriaProps & {
     nativeID?: string;
-    backgroundColor?: string;
+    backgroundColor?: IColorValue;
     style?: IStyleProp<IViewStyle>;
     class?: IClassNameValue;
-}
+};

package/build/components/keyboard-avoiding-view.d.ts

@@ -1,6 +1,6 @@
 import { type ISymbioteEvent, type IClassNameValue, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
 import { type IAccessibilityProps, type IAriaProps, type IKeyboardAvoidingBehavior } from '@symbiote-native/components';
-export interface IKeyboardAvoidingViewProps extends IAccessibilityProps, IAriaProps {
+export type IKeyboardAvoidingViewProps = IAccessibilityProps & IAriaProps & {
     behavior?: IKeyboardAvoidingBehavior;
     enabled?: boolean;
     keyboardVerticalOffset?: number;
@@ -8,11 +8,19 @@ export interface IKeyboardAvoidingViewProps extends IAccessibilityProps, IAriaPr
     style?: IStyleProp<IViewStyle>;
     class?: IClassNameValue;
     testID?: string;
-}
+};
 export type IKeyboardAvoidingViewEmits = {
     layout: (event: ISymbioteEvent) => boolean;
 };
 export type { IKeyboardAvoidingBehavior } from '@symbiote-native/components';
-export declare const KeyboardAvoidingView: import("vue").DefineSetupFnComponent<IKeyboardAvoidingViewProps, IKeyboardAvoidingViewEmits, {}, IKeyboardAvoidingViewProps & {
+export declare const KeyboardAvoidingView: import("vue").DefineSetupFnComponent<IKeyboardAvoidingViewProps, IKeyboardAvoidingViewEmits, {}, IAccessibilityProps & IAriaProps & {
+    behavior?: IKeyboardAvoidingBehavior;
+    enabled?: boolean;
+    keyboardVerticalOffset?: number;
+    contentContainerStyle?: IStyleProp<IViewStyle>;
+    style?: IStyleProp<IViewStyle>;
+    class?: IClassNameValue;
+    testID?: string;
+} & {
     onLayout?: ((event: ISymbioteEvent) => any) | undefined;
 }, import("vue").PublicProps>;

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

@@ -1,15 +1,8 @@
-// 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, never a cast.
-// rawAttrs runs through normalizeVueAttrs so a template `:keyboard-vertical-offset` resolves.
+// KeyboardAvoidingView: the Vue lifecycle half over the shared `createKeyboardAvoidingModel`
+// Inputs arrive as attrs and are narrowed with runtime guards, never a cast
 import { defineComponent, h, ref, onMounted, onUnmounted, } from '@vue/runtime-core';
-import { Keyboard, Platform, dlog, } from '@symbiote-native/engine';
-import { computeInset, configureKeyboardAvoidingAnimation, keyboardAvoidingEventNamesFor, readKeyboardAnimationTiming, readKeyboardFrame, readPrefersCrossFadeTransitions, readLayoutFrame, resolveKeyboardAvoidingLayout, resolveAccessibilityProps, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+import { Keyboard, Platform, } from '@symbiote-native/engine';
+import { createKeyboardAvoidingModel, keyboardAvoidingEventNamesFor, readPrefersCrossFadeTransitions, 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;
@@ -35,55 +28,31 @@ function forwardAttrs(attrs) {
     }
     return result;
 }
-export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
-    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.
-    let frame;
-    let initialHeight;
-    // 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.
+// The model with its keyboard subscriptions, kept apart so the setup reads as the render
+function useKeyboardModel(currentAttrs, setInset) {
+    // A device setting read once per mount, a plain variable since nothing should re-render for it
     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 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,
-            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;
-    };
-    const onHide = () => {
-        dlog('KeyboardAvoidingView hide -> inset 0');
-        inset.value = 0;
-    };
+    const model = createKeyboardAvoidingModel({
+        options: () => {
+            const attrs = currentAttrs();
+            const offset = attrs.keyboardVerticalOffset;
+            return {
+                behavior: asBehavior(attrs.behavior),
+                enabled: attrs.enabled !== false,
+                keyboardVerticalOffset: typeof offset === 'number' ? offset : DEFAULT_VERTICAL_OFFSET,
+            };
+        },
+        setInset,
+        prefersCrossFade: () => prefersCrossFadeTransitions,
+    });
     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(events.show, onShow),
-            Keyboard.addListener(events.hide, onHide),
+            Keyboard.addListener(events.show, model.keyboardShown),
+            Keyboard.addListener(events.hide, model.keyboardHidden),
         ];
-        // Nobody awaits this, so it goes through the core wrapper, which answers false on a failed
-        // native read instead of leaving an unhandled rejection.
+        // Nobody awaits this, the core wrapper answers false on a failed native read
         void readPrefersCrossFadeTransitions().then(enabled => {
             prefersCrossFadeTransitions = enabled;
         });
@@ -93,38 +62,38 @@ export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs,
             subscription.remove();
         subscriptions = [];
     });
+    return model;
+}
+export const KeyboardAvoidingView = defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
+    const inset = ref(0);
+    // Read at event time, the attrs are live
+    const currentAttrs = () => normalizeVueAttrs(rawAttrs);
+    const model = useKeyboardModel(currentAttrs, value => {
+        inset.value = value;
+    });
     const handleLayout = (event) => {
-        const measured = readLayoutFrame(event.nativeEvent.layout);
-        if (measured !== undefined) {
-            frame = measured;
-            if (initialHeight === undefined)
-                initialHeight = measured.height;
-        }
+        model.laidOut(event.nativeEvent.layout);
         emit('layout', event);
     };
     return () => {
         const attrs = currentAttrs();
-        const behavior = asBehavior(attrs.behavior);
-        // RN gates every inset on `enabled ?? true`; only an explicit `false` disables.
+        // RN gates every inset on `enabled ?? true`, only an explicit `false` disables
         const isEnabled = attrs.enabled !== false;
-        const effectiveInset = isEnabled ? inset.value : 0;
         const layout = resolveKeyboardAvoidingLayout({
-            behavior,
-            effectiveInset,
-            initialHeight,
+            behavior: asBehavior(attrs.behavior),
+            effectiveInset: isEnabled ? inset.value : 0,
+            initialHeight: model.initialHeight(),
             style: isStyleProp(attrs.style) ? attrs.style : undefined,
             contentContainerStyle: isStyleProp(attrs.contentContainerStyle)
                 ? attrs.contentContainerStyle
                 : undefined,
         });
-        const childNodes = slots.default !== undefined ? slots.default() : undefined;
+        const childNodes = slots.default?.();
         const wrapperProps = {
             ...resolveAccessibilityProps(forwardAttrs(attrs)),
             style: layout.wrapperStyle,
             onLayout: handleLayout,
         };
-        // '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('view', wrapperProps, [
                 h('view', { style: layout.innerStyle }, childNodes),

package/build/components/layout-conformance-props.d.ts

@@ -0,0 +1,4 @@
+import type { ILayoutConformanceMode } from '@symbiote-native/components';
+export type ILayoutConformanceProps = {
+    mode: ILayoutConformanceMode;
+};

package/build/components/layout-conformance-props.js

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

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

@@ -1,10 +1,10 @@
 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';
+import { type IClassNameValue, type IColorValue, 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 {
+export type IModalProps = IAccessibilityProps & IAriaProps & {
     visible?: boolean;
     transparent?: boolean;
-    backdropColor?: string;
+    backdropColor?: IColorValue;
     animationType?: IModalAnimationType;
     presentationStyle?: IModalPresentationStyle;
     supportedOrientations?: ReadonlyArray<IModalOrientation>;
@@ -14,14 +14,27 @@ export interface IModalProps extends IAccessibilityProps, IAriaProps {
     allowSwipeDismissal?: boolean;
     style?: IStyleProp<IViewStyle>;
     class?: IClassNameValue;
-}
+};
 export type IModalEmits = {
     show: () => boolean;
     dismiss: () => boolean;
     requestClose: () => boolean;
     orientationChange: (event: ISymbioteEvent) => boolean;
 };
-export declare const Modal: import("vue").DefineSetupFnComponent<IModalProps, IModalEmits, {}, IModalProps & {
+export declare const Modal: import("vue").DefineSetupFnComponent<IModalProps, IModalEmits, {}, IAccessibilityProps & IAriaProps & {
+    visible?: boolean;
+    transparent?: boolean;
+    backdropColor?: IColorValue;
+    animationType?: IModalAnimationType;
+    presentationStyle?: IModalPresentationStyle;
+    supportedOrientations?: ReadonlyArray<IModalOrientation>;
+    hardwareAccelerated?: boolean;
+    statusBarTranslucent?: boolean;
+    navigationBarTranslucent?: boolean;
+    allowSwipeDismissal?: boolean;
+    style?: IStyleProp<IViewStyle>;
+    class?: IClassNameValue;
+} & {
     onShow?: (() => any) | undefined;
     onDismiss?: (() => any) | undefined;
     onRequestClose?: (() => any) | undefined;

package/build/components/modal/index.js

@@ -10,16 +10,14 @@
 // Inputs arrive as attrs (untyped), each narrowed with a runtime guard rather than a cast. The
 // events (onShow/onDismiss/onRequestClose/onOrientationChange) are real ViewConfig DirectEvents,
 // so, unlike Switch's pure-JS onValueChange, they forward to the host raw via passthrough.
-import { defineComponent, h, ref, watch } from '@vue/runtime-core';
-import { createInitialModalState, isModalVisible, modalReducer, modalVisibilityAction, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
-import { dlog, Platform, } from '@symbiote-native/engine';
+import { defineComponent, getCurrentInstance, h, ref, watch, watchEffect, } from '@vue/runtime-core';
+import { createInitialModalState, isModalVisible, modalReducer, modalVisibilityAction, renderModal, resolveAccessibilityProps, shouldRenderModal, warnAboutModalProps, } from '@symbiote-native/components';
+import { dlog, isProcessableColor, Platform, } from '@symbiote-native/engine';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
+import { provideVirtualizedListScope } from '../virtualized-list/nested-scope.js';
 function asBoolean(value) {
     return typeof value === 'boolean' ? value : undefined;
 }
-function asString(value) {
-    return typeof value === 'string' ? value : undefined;
-}
 function asAnimationType(value) {
     return value === 'none' || value === 'slide' || value === 'fade'
         ? value
@@ -78,15 +76,59 @@ function forwardAttrs(attrs) {
     }
     return result;
 }
-export const Modal = defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
+// Arms the iOS keep-alive on show; a hide is left to the native dismiss (state/modal.ts). The
+// reducer is identity-stable, so a no-op transition triggers no extra render.
+function useKeepAlive(rawAttrs) {
     const state = ref(createInitialModalState(isModalVisible(rawAttrs.visible)));
-    // Arms the iOS keep-alive on show; a hide is left to the native dismiss (state/modal.ts). The
-    // reducer is identity-stable, so a no-op transition triggers no extra render.
     watch(() => isModalVisible(rawAttrs.visible), isVisible => {
         const action = modalVisibilityAction(isVisible);
         if (action !== undefined)
             state.value = modalReducer(state.value, action);
     }, { flush: 'post' });
+    return state;
+}
+// The attrs the render and the dev warnings both read
+function modalFlagsOf(attrs) {
+    return {
+        transparent: asBoolean(attrs.transparent),
+        presentationStyle: asPresentationStyle(attrs.presentationStyle),
+        statusBarTranslucent: asBoolean(attrs.statusBarTranslucent),
+        navigationBarTranslucent: asBoolean(attrs.navigationBarTranslucent),
+        allowSwipeDismissal: asBoolean(attrs.allowSwipeDismissal),
+    };
+}
+// Kept apart so the setup reads as lifecycle: the attrs narrowed into what `renderModal` takes
+function modalRootOf(attrs) {
+    return renderModal({
+        ...modalFlagsOf(attrs),
+        visible: asBoolean(attrs.visible),
+        backdropColor: isProcessableColor(attrs.backdropColor)
+            ? attrs.backdropColor
+            : undefined,
+        animationType: asAnimationType(attrs.animationType),
+        supportedOrientations: asSupportedOrientations(attrs.supportedOrientations),
+        hardwareAccelerated: asBoolean(attrs.hardwareAccelerated),
+        style: isStyleProp(attrs.style) ? attrs.style : undefined,
+        passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
+    });
+}
+// RN checks on mount and on every update, a dev build only
+// The `requestClose` emit is stripped from the attrs, so the vnode props tell if it is listened to
+function useModalWarnings(rawAttrs) {
+    const listeners = getCurrentInstance()?.vnode.props;
+    watchEffect(() => {
+        const attrs = normalizeVueAttrs(rawAttrs);
+        warnAboutModalProps({
+            ...modalFlagsOf(attrs),
+            onRequestClose: typeof listeners?.onRequestClose === 'function',
+        });
+    });
+}
+export const Modal = defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
+    // The content sits outside the list's scroll, so a list in it is not nested in that list
+    provideVirtualizedListScope(null);
+    useModalWarnings(rawAttrs);
+    const state = useKeepAlive(rawAttrs);
     // Modal.js: onDismiss is iOS-only — it drops the keep-alive, then tells the app.
     const handleDismiss = () => {
         if (Platform.OS !== 'ios')
@@ -101,26 +143,13 @@ export const Modal = defineComponent((_props, { attrs: rawAttrs, slots, emit })
             return null;
         }
         const attrs = normalizeVueAttrs(rawAttrs);
-        const root = renderModal({
-            visible: asBoolean(attrs.visible),
-            transparent: asBoolean(attrs.transparent),
-            backdropColor: asString(attrs.backdropColor),
-            animationType: asAnimationType(attrs.animationType),
-            presentationStyle: asPresentationStyle(attrs.presentationStyle),
-            supportedOrientations: asSupportedOrientations(attrs.supportedOrientations),
-            hardwareAccelerated: asBoolean(attrs.hardwareAccelerated),
-            statusBarTranslucent: asBoolean(attrs.statusBarTranslucent),
-            navigationBarTranslucent: asBoolean(attrs.navigationBarTranslucent),
-            allowSwipeDismissal: asBoolean(attrs.allowSwipeDismissal),
-            style: isStyleProp(attrs.style) ? attrs.style : undefined,
-            passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
-        });
+        const root = modalRootOf(attrs);
         // root = modal > [container]; the slot children nest UNDER the container View, never
         // as a direct sibling of the host (RN's modal content layout).
         const [container] = root.children;
         if (typeof container === 'string')
             return null;
-        const slotChildren = slots.default !== undefined ? slots.default() : [];
+        const slotChildren = slots.default?.() ?? [];
         return h(root.type, {
             ...root.props,
             key: root.key,

package/build/components/refresh-control-props.d.ts

@@ -1,16 +1,16 @@
-import type { IClassNameValue } from '@symbiote-native/engine';
+import type { IClassNameValue, IColorValue } from '@symbiote-native/engine';
 import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
-export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
+export type IRefreshControlProps = IAccessibilityProps & IAriaProps & {
     refreshing: boolean;
     id?: string;
     onRefresh?: () => void | Promise<void>;
-    tintColor?: string;
+    tintColor?: IColorValue;
     title?: string;
-    titleColor?: string;
+    titleColor?: IColorValue;
     progressViewOffset?: number;
-    colors?: readonly string[];
-    progressBackgroundColor?: string;
+    colors?: readonly IColorValue[];
+    progressBackgroundColor?: IColorValue;
     size?: 'default' | 'large';
     enabled?: boolean;
     class?: IClassNameValue;
-}
+};

package/build/components/scroll-view/scroll-view-props.d.ts

@@ -1,8 +1,8 @@
-import type { IClassNameValue, ISymbioteEvent, IStyleProp, IViewStyle } from '@symbiote-native/engine';
-import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IClassNameValue, IColorValue, ISymbioteEvent, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps, IInnerViewRef, IScrollViewNativeOnlyProps } from '@symbiote-native/components';
 export type { IScrollViewHandle } from '@symbiote-native/components';
 type IScrollHandler = (event: ISymbioteEvent) => void;
-export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
+export type IScrollViewProps = IAccessibilityProps & IAriaProps & IScrollViewNativeOnlyProps & {
     style?: IStyleProp<IViewStyle>;
     contentContainerStyle?: IStyleProp<IViewStyle> | string;
     horizontal?: boolean;
@@ -31,8 +31,11 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     snapToStart?: boolean;
     snapToEnd?: boolean;
     disableIntervalMomentum?: boolean;
+    experimental_endDraggingSensitivityMultiplier?: number;
     stickyHeaderIndices?: number[];
     invertStickyHeaders?: boolean;
+    stickyHeaderHiddenOnScroll?: boolean;
+    innerViewRef?: IInnerViewRef;
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     maintainVisibleContentPosition?: {
@@ -61,7 +64,7 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     overScrollMode?: 'auto' | 'always' | 'never';
     fadingEdgeLength?: number;
     persistentScrollbar?: boolean;
-    endFillColor?: string;
+    endFillColor?: IColorValue;
     onLayout?: IScrollHandler;
     onScroll?: IScrollHandler;
     onScrollBeginDrag?: IScrollHandler;
@@ -70,4 +73,4 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     onMomentumScrollEnd?: IScrollHandler;
     onScrollToTop?: IScrollHandler;
     class?: IClassNameValue;
-}
+};

package/build/components/section-list/index.d.ts

@@ -1,4 +1,4 @@
-import type { IVirtualizedSectionListHandle } from '@symbiote-native/components';
+import { type IVirtualizedSectionListHandle } from '@symbiote-native/components';
 import { type IVirtualizedSectionListEmits, type IVirtualizedSectionListProps, type IVirtualizedSectionListSlots } from '../virtualized-section-list';
 export type { ISection } from '../virtualized-section-list';
 export type ISectionListHandle = IVirtualizedSectionListHandle;

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

@@ -9,6 +9,7 @@
 // straight onto VirtualizedSectionList; only the three synthesized events are bridged, gated on
 // listener presence so the inner list keeps its RefreshControl/edge-reached gating.
 import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
+import { routeScrollHandle, } from '@symbiote-native/components';
 import { VirtualizedSectionList, } from '../virtualized-section-list/index.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 // VirtualizedSectionList's generic construct signature can't be resolved by h()'s overloads, so
@@ -24,12 +25,7 @@ const EMIT_KEYS = ['endReached', 'startReached', 'refresh'];
 function buildDelegate(getInner) {
     return {
         scrollToLocation: params => getInner()?.scrollToLocation(params),
-        flashScrollIndicators: () => getInner()?.flashScrollIndicators(),
-        getNativeScrollRef: () => getInner()?.getNativeScrollRef() ?? null,
-        getScrollableNode: () => getInner()?.getScrollableNode() ?? null,
-        getScrollResponder: () => getInner()?.getScrollResponder() ?? null,
-        getScrollNode: () => getInner()?.getScrollNode() ?? null,
-        recordInteraction: () => getInner()?.recordInteraction(),
+        ...routeScrollHandle(getInner),
     };
 }
 export const SectionList = defineComponent(

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

@@ -1,7 +1,7 @@
 import type { IClassNameValue, IStyleProp, ISymbioteEvent, ITextStyle } from '@symbiote-native/engine';
-import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IAccessibilityProps, IAriaProps, ITextNativeOnlyProps } from '@symbiote-native/components';
 import type { VNodeRef } from '@vue/runtime-core';
-export interface ITextProps extends IAccessibilityProps, IAriaProps {
+export type ITextProps = IAccessibilityProps & IAriaProps & ITextNativeOnlyProps & {
     style?: IStyleProp<ITextStyle>;
     class?: IClassNameValue;
     onPress?: (event: ISymbioteEvent) => void;
@@ -21,4 +21,4 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     selectionColor?: string;
     ref?: VNodeRef;
     key?: string | number | symbol;
-}
+};

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

@@ -1,17 +1,17 @@
-import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IColorValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
 import type { IPressTimingProps } from '@symbiote-native/components';
 import type { IPressableProps } from './pressable-props';
 export type ITouchableBaseProps = Omit<IPressableProps, 'style'> & IPressTimingProps & {
     style?: IStyleProp<IViewStyle>;
 };
-export interface ITouchableOpacityProps extends ITouchableBaseProps {
+export type ITouchableOpacityProps = ITouchableBaseProps & {
     activeOpacity?: number;
-}
-export interface ITouchableHighlightProps extends ITouchableBaseProps {
+};
+export type ITouchableHighlightProps = ITouchableBaseProps & {
     activeOpacity?: number;
-    underlayColor?: string;
+    underlayColor?: IColorValue;
     touchSoundDisabled?: boolean;
     testOnly_pressed?: boolean;
     onShowUnderlay?: () => void;
     onHideUnderlay?: () => void;
-}
+};