@symbiote-native/react 3.2.0 → 3.4.0

package/build/batched-updates.d.ts

@@ -0,0 +1,2 @@
+export declare function unstable_batchedUpdates<A, R>(callback: (a: A) => R, a: A): R;
+export declare function unstable_batchedUpdates<R>(callback: () => R): R;

package/build/batched-updates.js

@@ -0,0 +1,5 @@
+// RN's `unstable_batchedUpdates`, over this adapter's own reconciler instead of RN's renderer
+import reconciler from './host-config.js';
+export function unstable_batchedUpdates(callback, a) {
+    return reconciler.batchedUpdates(callback, a);
+}

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

@@ -0,0 +1,5 @@
+import type { ICheckboxProps as ICheckboxBaseProps } from '@symbiote-native/components';
+import type { IViewProps } from '../components';
+export type ICheckboxProps = ICheckboxBaseProps & Omit<IViewProps, keyof ICheckboxBaseProps | 'children'> & {
+    className?: string;
+};

package/build/components/checkbox-props.js

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

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

@@ -1,17 +1,13 @@
-import { type ComponentType, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type ComponentType, type ReactElement, type Ref } from 'react';
 import { type ISymbioteEvent } from '@symbiote-native/engine';
-import { type ISeparators, type ISeparatorProps, type IViewabilityConfig, type IViewabilityConfigCallbackPair, type IViewableItemsChangedInfo, type IVirtualizedListHandle } from '../virtualized-list';
-import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import { type ICellRendererComponent, type IListItemInfo, type IRenderItem, type ISeparatorComponent, type IViewabilityConfig, type IViewabilityConfigCallbackPair, type IViewableItemsChangedInfo, type IVirtualizedListHandle } from '../virtualized-list';
+import type { IAccessibilityProps, IAriaProps, IInnerViewRef } from '@symbiote-native/components';
 import type { IStyleProp, IViewStyle } from '../../utils/styles';
-type IRenderItem<ItemT> = (info: {
-    item: ItemT;
-    index: number;
-    separators: ISeparators;
-}) => ReactNode;
 export type IFlatListHandle = IVirtualizedListHandle;
-export interface IFlatListProps<ItemT> extends IAccessibilityProps, IAriaProps {
+export type IFlatListProps<ItemT> = IAccessibilityProps & IAriaProps & {
     data: readonly ItemT[];
-    renderItem: IRenderItem<ItemT>;
+    renderItem?: IRenderItem<ItemT>;
+    ListItemComponent?: ComponentType<IListItemInfo<ItemT>>;
     keyExtractor?: (item: ItemT, index: number) => string;
     getItemLayout?: (data: unknown, index: number) => {
         length: number;
@@ -20,10 +16,13 @@ export interface IFlatListProps<ItemT> extends IAccessibilityProps, IAriaProps {
     };
     numColumns?: number;
     columnWrapperStyle?: IStyleProp<IViewStyle> | string;
-    ItemSeparatorComponent?: ComponentType<ISeparatorProps<ItemT>>;
+    ItemSeparatorComponent?: ISeparatorComponent<ItemT>;
+    CellRendererComponent?: ICellRendererComponent<unknown>;
     ListHeaderComponent?: ComponentType<Record<string, never>> | ReactElement;
     ListFooterComponent?: ComponentType<Record<string, never>> | ReactElement;
     ListEmptyComponent?: ComponentType<Record<string, never>> | ReactElement;
+    ListHeaderComponentStyle?: IStyleProp<IViewStyle>;
+    ListFooterComponentStyle?: IStyleProp<IViewStyle>;
     horizontal?: boolean;
     inverted?: boolean;
     extraData?: unknown;
@@ -51,6 +50,8 @@ export interface IFlatListProps<ItemT> extends IAccessibilityProps, IAriaProps {
     maxToRenderPerBatch?: number;
     updateCellsBatchingPeriod?: number;
     windowSize?: number;
+    disableVirtualization?: boolean;
+    stickyHeaderIndices?: number[];
     maintainVisibleContentPosition?: {
         minIndexForVisible: number;
         autoscrollToTopThreshold?: number;
@@ -60,6 +61,7 @@ export interface IFlatListProps<ItemT> extends IAccessibilityProps, IAriaProps {
     onScrollEndDrag?: (event: ISymbioteEvent) => void;
     onMomentumScrollBegin?: (event: ISymbioteEvent) => void;
     onMomentumScrollEnd?: (event: ISymbioteEvent) => void;
+    onContentSizeChange?: (width: number, height: number) => void;
     scrollEventThrottle?: number;
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
@@ -68,8 +70,9 @@ export interface IFlatListProps<ItemT> extends IAccessibilityProps, IAriaProps {
     className?: string;
     removeClippedSubviews?: boolean;
     nestedScrollEnabled?: boolean;
-}
+    stickyHeaderHiddenOnScroll?: boolean;
+    innerViewRef?: IInnerViewRef;
+};
 export declare function FlatList<ItemT>(props: IFlatListProps<ItemT> & {
     ref?: Ref<IFlatListHandle>;
 }): ReactElement;
-export {};

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

@@ -5,90 +5,104 @@
 // scrolling are inherited from VirtualizedList; the data shaping and the row/viewability/separator
 // transforms are shared from @symbiote-native/components. This file only adapts to React's lifecycle
 // (element creation + ref threading).
-import { createElement, } from 'react';
+import { createElement, isValidElement, } from 'react';
 import { Platform, dlog, resolveClassName, } from '@symbiote-native/engine';
-import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, removeClippedSubviewsOrDefault, rowKeyExtractor, } from '@symbiote-native/components';
+import { SINGLE_COLUMN, arrayLikeLength, chunkIntoRows, expandRowToken, expandRowViewability, firstItemOfRow, lastItemOfRow, removeClippedSubviewsOrDefault, rowKeyExtractor, } from '@symbiote-native/components';
 import { VirtualizedList, } from '../virtualized-list/index.js';
-export function FlatList(props) {
-    const { ref, data, renderItem, keyExtractor, numColumns = SINGLE_COLUMN, columnWrapperStyle, 
-    // onViewableItemsChanged/viewability are typed against ItemT here; in the multi-column path
-    // the underlying stream is IRow<ItemT>, so they are dropped from `rest` and pulled out.
-    onViewableItemsChanged, viewabilityConfigCallbackPairs, 
-    // ItemSeparatorComponent is typed on ItemT; the multi-column stream is IRow<ItemT>, so it is
-    // wrapped there to unwrap rows back to items, exactly like viewability above.
-    ItemSeparatorComponent, removeClippedSubviews: authoredRemoveClippedSubviews, ...ownRest } = props;
-    // FlatList.js always sends it, defaulted per platform.
-    const rest = {
-        ...ownRest,
-        removeClippedSubviews: removeClippedSubviewsOrDefault(authoredRemoveClippedSubviews, Platform.OS),
-    };
-    dlog(`FlatList over ${data.length} items, ${numColumns} column(s)`);
-    if (numColumns <= SINGLE_COLUMN) {
-        return createElement((VirtualizedList), {
-            ref,
-            data,
-            getItem: (_source, index) => data[index],
-            getItemCount: () => data.length,
-            renderItem,
-            keyExtractor,
-            onViewableItemsChanged,
-            viewabilityConfigCallbackPairs,
-            ItemSeparatorComponent,
-            ...rest,
-        });
-    }
-    // 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);
-    const resolvedColumnWrapperStyle = typeof columnWrapperStyle === 'string'
-        ? resolveClassName(columnWrapperStyle)
-        : columnWrapperStyle;
+import { renderItemElement } from '../virtualized-list/list-elements.js';
+function singleColumnList(typed, rest, ref) {
+    const { data } = typed;
+    return createElement((VirtualizedList), {
+        ref,
+        getItem: (_source, index) => data[index],
+        getItemCount: () => arrayLikeLength(data),
+        renderItem: typed.renderItem,
+        ListItemComponent: typed.ListItemComponent,
+        keyExtractor: typed.keyExtractor,
+        onViewableItemsChanged: typed.onViewableItemsChanged,
+        viewabilityConfigCallbackPairs: typed.viewabilityConfigCallbackPairs,
+        ItemSeparatorComponent: typed.ItemSeparatorComponent,
+        data,
+        ...rest,
+    });
+}
+// The row is the virtualized cell, so its items share one `separators` handle, as in RN
+function rowRenderer(typed) {
+    const { renderItem, ListItemComponent, keyExtractor, columnWrapperStyle } = typed;
     const rowStyle = [
         { flexDirection: 'row' },
-        resolvedColumnWrapperStyle,
+        typeof columnWrapperStyle === 'string'
+            ? resolveClassName(columnWrapperStyle)
+            : columnWrapperStyle,
     ];
-    const renderRow = (info) => {
-        const cells = info.item.items.map((item, column) => {
-            const index = info.item.startIndex + column;
-            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 createElement('view', { key, style: { flex: 1 } }, renderItem({ item, index, separators: info.separators }));
-        });
+    return info => {
+        const cells = expandRowToken({ item: info.item, key: '', index: info.index, isViewable: true }, keyExtractor).map(({ item, index, key }) => createElement('view', { key, style: { flex: 1 } }, renderItemElement({ renderItem, ListItemComponent }, { item, index, separators: info.separators })));
         return createElement('view', { style: rowStyle }, ...cells);
     };
-    // Viewability over rows expands back to per-item tokens so the caller sees item-level
-    // visibility, not row-level (shared expandRowViewability).
-    const rowOnViewableItemsChanged = onViewableItemsChanged !== undefined
-        ? (rowInfo) => {
-            onViewableItemsChanged(expandRowViewability(rowInfo, keyExtractor));
-        }
-        : undefined;
-    const rowViewabilityPairs = viewabilityConfigCallbackPairs?.map(pair => ({
-        viewabilityConfig: pair.viewabilityConfig,
-        onViewableItemsChanged: (rowInfo) => {
-            pair.onViewableItemsChanged(expandRowViewability(rowInfo, keyExtractor));
-        },
-    }));
-    // The divider between rows shows real items (last of the row above, first of the row below), so
-    // the user's separator, typed on ItemT, sees items rather than the IRow wrapper.
-    const rowSeparatorComponent = ItemSeparatorComponent === undefined
-        ? undefined
-        : (rowProps) => createElement(ItemSeparatorComponent, {
-            ...rowProps,
-            leadingItem: lastItemOfRow(rowProps.leadingItem),
-            trailingItem: firstItemOfRow(rowProps.trailingItem),
-        });
+}
+// Row reports expand back to per-item tokens through `expandRowViewability`
+function rowViewability(typed) {
+    const { keyExtractor, onViewableItemsChanged } = typed;
+    const expand = (report) => (rowInfo) => {
+        report(expandRowViewability(rowInfo, keyExtractor));
+    };
+    return {
+        onViewableItemsChanged: onViewableItemsChanged === undefined
+            ? undefined
+            : expand(onViewableItemsChanged),
+        pairs: typed.viewabilityConfigCallbackPairs?.map(pair => ({
+            viewabilityConfig: pair.viewabilityConfig,
+            onViewableItemsChanged: expand(pair.onViewableItemsChanged),
+        })),
+    };
+}
+// The divider between rows shows the last item above and the first below, not the `IRow`
+function rowSeparator(separator) {
+    if (separator === undefined || isValidElement(separator))
+        return separator;
+    return (rowProps) => createElement(separator, {
+        ...rowProps,
+        leadingItem: lastItemOfRow(rowProps.leadingItem),
+        trailingItem: firstItemOfRow(rowProps.trailingItem),
+    });
+}
+// The virtualized stream is rows, each cell lays its items out side by side in a flex row
+function multiColumnList(typed, numColumns, rest, ref) {
+    const rows = chunkIntoRows(typed.data, numColumns);
+    const viewability = rowViewability(typed);
     return createElement((VirtualizedList), {
         ref,
         data: rows,
         getItem: (_source, index) => rows[index],
         getItemCount: () => rows.length,
-        renderItem: renderRow,
-        keyExtractor: (row) => rowKeyExtractor(row, keyExtractor),
-        onViewableItemsChanged: rowOnViewableItemsChanged,
-        viewabilityConfigCallbackPairs: rowViewabilityPairs,
-        ItemSeparatorComponent: rowSeparatorComponent,
+        renderItem: rowRenderer(typed),
+        keyExtractor: (row) => rowKeyExtractor(row, typed.keyExtractor),
+        onViewableItemsChanged: viewability.onViewableItemsChanged,
+        viewabilityConfigCallbackPairs: viewability.pairs,
+        ItemSeparatorComponent: rowSeparator(typed.ItemSeparatorComponent),
         ...rest,
     });
 }
+export function FlatList(props) {
+    const { ref, data, renderItem, ListItemComponent, keyExtractor, numColumns = SINGLE_COLUMN, columnWrapperStyle, onViewableItemsChanged, viewabilityConfigCallbackPairs, ItemSeparatorComponent, removeClippedSubviews: authoredRemoveClippedSubviews, ...ownRest } = props;
+    // `FlatList.js` always sends it, defaulted per platform
+    const rest = {
+        ...ownRest,
+        removeClippedSubviews: removeClippedSubviewsOrDefault(authoredRemoveClippedSubviews, Platform.OS),
+    };
+    const typed = {
+        data,
+        renderItem,
+        ListItemComponent,
+        keyExtractor,
+        numColumns,
+        columnWrapperStyle,
+        onViewableItemsChanged,
+        viewabilityConfigCallbackPairs,
+        ItemSeparatorComponent,
+    };
+    dlog(`FlatList over ${arrayLikeLength(data)} items, ${numColumns} column(s)`);
+    return numColumns <= SINGLE_COLUMN
+        ? singleColumnList(typed, rest, ref)
+        : multiColumnList(typed, numColumns, rest, ref);
+}

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

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
 import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IColorValue } from '@symbiote-native/engine';
 import type { IStyleProp, IViewStyle } from '../utils/styles';
-export interface IInputAccessoryViewProps extends IAccessibilityProps, IAriaProps {
+export type IInputAccessoryViewProps = IAccessibilityProps & IAriaProps & {
     nativeID?: string;
-    backgroundColor?: string;
+    backgroundColor?: IColorValue;
     style?: IStyleProp<IViewStyle>;
     className?: string;
     children?: ReactNode;
-}
+};

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

@@ -4,7 +4,7 @@ import { type IKeyboardAvoidingBehavior } from '@symbiote-native/components';
 import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
 import type { IStyleProp, IViewStyle } from '../../utils/styles';
 export type { IKeyboardAvoidingBehavior } from '@symbiote-native/components';
-export interface IKeyboardAvoidingViewProps extends IAccessibilityProps, IAriaProps {
+export type IKeyboardAvoidingViewProps = IAccessibilityProps & IAriaProps & {
     behavior?: IKeyboardAvoidingBehavior;
     enabled?: boolean;
     keyboardVerticalOffset?: number;
@@ -13,5 +13,5 @@ export interface IKeyboardAvoidingViewProps extends IAccessibilityProps, IAriaPr
     className?: string;
     children?: ReactNode;
     onLayout?: (event: ISymbioteEvent) => void;
-}
+};
 export declare const KeyboardAvoidingView: FC<IKeyboardAvoidingViewProps>;

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

@@ -1,110 +1,71 @@
-// KeyboardAvoidingView: composes the host View and shifts it out of the keyboard's way as
-// the keyboard shows/hides. It subscribes to the Keyboard module (native->JS events) and
-// recomputes a bottom inset from the keyboard frame and the view's own measured frame.
-// Mirrors RN's Libraries/Components/Keyboard/KeyboardAvoidingView.js, as a function component.
-//
-// The inset math + the behavior → style/structure decision are framework-agnostic and live in
-// @symbiote-native/components (render-keyboard-avoiding-view), shared verbatim with the Vue adapter.
-// React supplies only the lifecycle: useState for the inset, useRef for the measured frame and
-// the cross-fade setting, the useEffect subscriptions, and the descriptor-free element assembly
-// around its children.
+// KeyboardAvoidingView over the shared `createKeyboardAvoidingModel`, which holds the frame, the
+// last keyboard event and the inset rules of RN's class
+// React supplies the inset state, the keyboard subscriptions and the element assembly
 import { createElement, useEffect, useRef, useState, } from 'react';
-import { dlog, Keyboard, Platform, } from '@symbiote-native/engine';
-import { computeInset, configureKeyboardAvoidingAnimation, keyboardAvoidingEventNamesFor, readKeyboardAnimationTiming, readKeyboardFrame, readLayoutFrame, readPrefersCrossFadeTransitions, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+import { Keyboard, Platform, } from '@symbiote-native/engine';
+import { createKeyboardAvoidingModel, keyboardAvoidingEventNamesFor, readPrefersCrossFadeTransitions, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
 import {} from '../../components.js';
-// The two notifications to subscribe to, per host (iOS takes the `will` pair so the view rides
-// up with the keyboard animation; Android has no will-notifications). Resolved ONCE at module
-// scope: Platform.OS is fixed for the process, so recomputing it per render buys nothing.
+// Resolved once: Platform.OS is fixed for the process
 const KEYBOARD_EVENTS = keyboardAvoidingEventNamesFor(Platform.OS);
-export const KeyboardAvoidingView = props => {
-    const { behavior, enabled = true, keyboardVerticalOffset = DEFAULT_VERTICAL_OFFSET, contentContainerStyle, style, children, onLayout, 
-    // The wrapper is the View FC, which runs resolveAccessibilityProps itself, so
-    // the raw aria/role + accessibility* props pass through untouched here and fold
-    // there once.
-    ...accessibilityRest } = props;
+// The model, its inset state and the keyboard subscriptions, kept apart so the component reads as
+// the element assembly
+function useKeyboardAvoidingModel(options) {
     const [inset, setInset] = useState(0);
-    // Mutable, not state: changing the frame alone shouldn't re-render; it feeds the
-    // next keyboard event's inset math.
-    const frameRef = useRef(undefined);
-    const initialHeightRef = useRef(undefined);
-    // A device accessibility setting, not component state: it cannot change mid-session, and
-    // learning it must not re-render. Read once per mount, then fed to every computeInset call.
+    // The model reads the options at event time, so a changed prop needs no new subscription
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    // A device setting that cannot change mid-session, learning it must not re-render
     const prefersCrossFadeRef = useRef(false);
+    const [model] = useState(() => createKeyboardAvoidingModel({
+        options: () => optionsRef.current,
+        setInset,
+        prefersCrossFade: () => prefersCrossFadeRef.current,
+    }));
     useEffect(() => {
         void readPrefersCrossFadeTransitions().then(prefers => {
             prefersCrossFadeRef.current = prefers;
         });
     }, []);
     useEffect(() => {
-        const onShow = (payload) => {
-            const keyboard = readKeyboardFrame(payload);
-            // Functional update, not a read of `inset`: this handler is built inside the effect, so a
-            // direct read would freeze the value from the render that created it — and 'height' mode
-            // feeds the LIVE inset back in to cancel the wrapper's own shrink.
-            setInset(previousInset => {
-                const next = computeInset(frameRef.current, keyboard, keyboardVerticalOffset, {
-                    behavior,
-                    previousInset,
-                    prefersCrossFadeTransitions: prefersCrossFadeRef.current,
-                });
-                // RN's `_updateBottomIfNecessary` skips the animation entirely when the inset did not
-                // change (`if (this._bottom === height) return;`) — arming a transition for a value that
-                // moves nowhere would only ever animate other props the app changed this frame.
-                if (next !== previousInset)
-                    configureKeyboardAvoidingAnimation(readKeyboardAnimationTiming(payload), enabled);
-                dlog(`KeyboardAvoidingView show -> inset ${next}`);
-                return next;
-            });
-        };
-        const onHide = () => {
-            dlog('KeyboardAvoidingView hide -> inset 0');
-            setInset(0);
-        };
         const subscriptions = [
-            Keyboard.addListener(KEYBOARD_EVENTS.show, onShow),
-            Keyboard.addListener(KEYBOARD_EVENTS.hide, onHide),
+            Keyboard.addListener(KEYBOARD_EVENTS.show, model.keyboardShown),
+            Keyboard.addListener(KEYBOARD_EVENTS.hide, model.keyboardHidden),
         ];
         return () => {
             for (const subscription of subscriptions)
                 subscription.remove();
         };
-    }, [behavior, keyboardVerticalOffset, enabled]);
+    }, [model]);
+    return { inset, model };
+}
+// `onLayout` is widened through a typed variable (no `as`), View's public type lacks it
+function wrapperElement(rest, wrapStyle, onLayout, content) {
+    const wrapperProps = { ...rest, style: wrapStyle, onLayout, children: content };
+    return createElement('view', wrapperProps);
+}
+export const KeyboardAvoidingView = props => {
+    const { behavior, enabled = true, keyboardVerticalOffset = DEFAULT_VERTICAL_OFFSET, contentContainerStyle, style, children, onLayout, 
+    // The wrapper is the View FC, which folds aria/role and accessibility* once itself
+    ...accessibilityRest } = props;
+    const { inset, model } = useKeyboardAvoidingModel({
+        behavior,
+        enabled,
+        keyboardVerticalOffset,
+    });
     const handleLayout = (event) => {
-        const frame = readLayoutFrame(event.nativeEvent.layout);
-        if (frame !== undefined) {
-            frameRef.current = frame;
-            if (initialHeightRef.current === undefined)
-                initialHeightRef.current = frame.height;
-        }
+        model.laidOut(event.nativeEvent.layout);
         onLayout?.(event);
     };
-    // When disabled the inset is forced to 0, so every behavior mode renders the view
-    // untouched (RN gates each bottomHeight/height computation on `enabled ?? true`).
-    const effectiveInset = enabled ? inset : 0;
+    // Disabled forces the inset to 0, so every behavior mode renders the view untouched
     const layout = resolveKeyboardAvoidingLayout({
         behavior,
-        effectiveInset,
-        initialHeight: initialHeightRef.current,
+        effectiveInset: enabled ? inset : 0,
+        initialHeight: model.initialHeight(),
         style,
         contentContainerStyle,
     });
-    // 'nested' ('position') pushes the content in an inner View by `bottom: inset`; the wrapper
-    // modes adjust the single wrapper directly.
-    if (layout.kind === 'nested') {
-        return renderWrapper(layout.wrapperStyle, createElement('view', { style: layout.innerStyle }, children));
-    }
-    return renderWrapper(layout.wrapperStyle, children);
-    // The wrapper carries onLayout. The View FC's public props don't surface it, but
-    // `view` routes the base layout event at runtime; widen the props through
-    // a typed variable (no inline-literal excess-property check, no `as`) so the
-    // onLayout reaches the host without editing View's public type.
-    function renderWrapper(wrapStyle, content) {
-        const wrapperProps = {
-            ...accessibilityRest,
-            style: wrapStyle,
-            onLayout: handleLayout,
-            children: content,
-        };
-        return createElement('view', wrapperProps);
-    }
+    const content = layout.kind === 'nested'
+        ? createElement('view', { style: layout.innerStyle }, children)
+        : children;
+    return wrapperElement(accessibilityRest, layout.wrapperStyle, handleLayout, content);
 };

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { ILayoutConformanceMode } from '@symbiote-native/components';
+export type ILayoutConformanceProps = {
+    mode: ILayoutConformanceMode;
+    children?: ReactNode;
+};

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

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

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

@@ -1,12 +1,12 @@
 import { type FC, type ReactNode } from 'react';
-import { type ISymbioteEvent } from '@symbiote-native/engine';
+import { type IColorValue, type ISymbioteEvent } from '@symbiote-native/engine';
 import { type IAccessibilityProps, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalPresentationStyle } from '@symbiote-native/components';
 import type { IStyleProp, IViewStyle } from '../../utils/styles';
 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>;
@@ -21,5 +21,5 @@ export interface IModalProps extends IAccessibilityProps, IAriaProps {
     style?: IStyleProp<IViewStyle>;
     className?: string;
     children?: ReactNode;
-}
+};
 export declare const Modal: FC<IModalProps>;

package/build/components/modal/index.js

@@ -12,17 +12,21 @@
 // through the exit transition. The native exit-animation timing is what's deferred, not the
 // callback contract.
 import { createElement, useEffect, useReducer, } from 'react';
-import { dlog, Platform } from '@symbiote-native/engine';
-import { createInitialModalState, isModalVisible, modalReducer, modalVisibilityAction, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
-export const Modal = rawProps => {
-    // Modal owns its host element (modal), so it folds aria/role here; the resolved fields
-    // ride the host node via `...passthrough`. The events (onShow/onDismiss/onRequestClose/
-    // onOrientationChange) are real ViewConfig DirectEvents, so they too ride passthrough raw.
-    // className is pulled out here, like style, and applied to the CONTAINER element below — left in
-    // ...passthrough it would land on the outer modal host instead (renderModal composes
-    // `style` into the container's style, not the host's).
-    const { visible, transparent, backdropColor, animationType, presentationStyle, supportedOrientations, hardwareAccelerated, statusBarTranslucent, navigationBarTranslucent, allowSwipeDismissal, style, className, children, onDismiss, ...passthrough } = resolveAccessibilityProps(rawProps);
-    // The iOS keep-alive (state/modal.ts): armed on show, dropped only by the native dismiss below.
+import { dlog, Platform, } from '@symbiote-native/engine';
+import { createInitialModalState, isModalVisible, modalReducer, modalVisibilityAction, renderModal, resolveAccessibilityProps, shouldRenderModal, warnAboutModalProps, } from '@symbiote-native/components';
+import { VirtualizedListScopeResetter } from '../virtualized-list/nested-scope.js';
+// The user children nest UNDER the container View, never beside the host, as RN lays a modal out
+// They sit outside the list above, so a list in them is not nested in it
+function modalTreeOf(input) {
+    const { className, children, ...renderInput } = input;
+    const root = renderModal(renderInput);
+    const [container] = root.children;
+    if (typeof container === 'string')
+        return null;
+    return createElement(root.type, { key: root.key, ...root.props }, createElement(container.type, { key: container.key, ...container.props, className }, createElement(VirtualizedListScopeResetter, null, children)));
+}
+// The iOS keep-alive: armed on show, dropped only by the native dismiss
+function useKeepAlive(visible) {
     const isVisible = isModalVisible(visible);
     const [state, dispatch] = useReducer(modalReducer, isVisible, createInitialModalState);
     useEffect(() => {
@@ -30,6 +34,35 @@ export const Modal = rawProps => {
         if (action !== undefined)
             dispatch(action);
     }, [isVisible]);
+    return { isVisible, state, dispatch };
+}
+// RN checks on mount and on every update, a dev build only
+function useModalWarnings(props) {
+    const { presentationStyle, transparent, navigationBarTranslucent, statusBarTranslucent, allowSwipeDismissal, onRequestClose, } = props;
+    useEffect(() => {
+        warnAboutModalProps({
+            presentationStyle,
+            transparent,
+            navigationBarTranslucent,
+            statusBarTranslucent,
+            allowSwipeDismissal,
+            onRequestClose,
+        });
+    }, [
+        presentationStyle,
+        transparent,
+        navigationBarTranslucent,
+        statusBarTranslucent,
+        allowSwipeDismissal,
+        onRequestClose,
+    ]);
+}
+export const Modal = rawProps => {
+    useModalWarnings(rawProps);
+    // Aria and role fold here, the events are real DirectEvents and ride `passthrough` raw
+    // `className` is pulled out to land on the container, in `passthrough` it would reach the host
+    const { visible, transparent, backdropColor, animationType, presentationStyle, supportedOrientations, hardwareAccelerated, statusBarTranslucent, navigationBarTranslucent, allowSwipeDismissal, style, className, children, onDismiss, ...passthrough } = resolveAccessibilityProps(rawProps);
+    const { isVisible, state, dispatch } = useKeepAlive(visible);
     if (!shouldRenderModal(isVisible, state)) {
         dlog('Modal hidden -> no node committed');
         return null;
@@ -41,7 +74,7 @@ export const Modal = rawProps => {
         dispatch({ type: 'hide' });
         onDismiss?.();
     };
-    const root = renderModal({
+    return modalTreeOf({
         visible,
         transparent,
         backdropColor,
@@ -54,11 +87,7 @@ export const Modal = rawProps => {
         allowSwipeDismissal,
         style,
         passthrough: { ...passthrough, onDismiss: handleDismiss },
+        className,
+        children,
     });
-    // root = modal > [container]; the user 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;
-    return createElement(root.type, { key: root.key, ...root.props }, createElement(container.type, { key: container.key, ...container.props, className }, children));
 };

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

@@ -1,17 +1,18 @@
 import type { ReactNode } from 'react';
 import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
-export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
+import type { IColorValue } from '@symbiote-native/engine';
+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;
     children?: ReactNode;
     className?: string;
-}
+};