@symbiote-native/solid 3.2.0 → 3.4.0

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

@@ -1,9 +1,10 @@
 import type { JSX } from '../../jsx-runtime';
 import { type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
-import { type IVirtualizedListHandle, type IVirtualizedListProps } from '../virtualized-list';
+import { type ICellRendererComponent, type IVirtualizedListHandle, type IVirtualizedListProps } from '../virtualized-list';
 export type IFlatListHandle = IVirtualizedListHandle;
-export type IFlatListProps<ItemT> = Omit<IVirtualizedListProps<ItemT>, 'data' | 'getItem' | 'getItemCount'> & {
+export type IFlatListProps<ItemT> = Omit<IVirtualizedListProps<ItemT>, 'data' | 'getItem' | 'getItemCount' | 'CellRendererComponent'> & {
     data: readonly ItemT[];
+    CellRendererComponent?: ICellRendererComponent<unknown>;
     numColumns?: number;
     columnWrapperStyle?: IStyleProp<IViewStyle> | string;
 };

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

@@ -25,8 +25,9 @@
 // caller receives that list's own handle — FlatList's handle IS VirtualizedList's (RN says the
 // same).
 import { Index, Show, createMemo, splitProps, untrack, } from 'solid-js';
-import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, removeClippedSubviewsOrDefault, rowKeyExtractor, } from '@symbiote-native/components';
+import { SINGLE_COLUMN, arrayLikeLength, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, removeClippedSubviewsOrDefault, rowKeyExtractor, } from '@symbiote-native/components';
 import { Platform, dlog, resolveClassName, } from '@symbiote-native/engine';
+import { renderItemContent } from '../virtualized-list/item-content.jsx';
 import { VirtualizedList, } from '../virtualized-list';
 // What FlatList itself consumes or re-shapes. Everything NOT listed here is passthrough and rides
 // down onto the inner list untouched — `ref` among it, which is why no delegate handle is needed.
@@ -35,6 +36,7 @@ const OWN_PROPS = [
     'numColumns',
     'columnWrapperStyle',
     'renderItem',
+    'ListItemComponent',
     'keyExtractor',
     'ItemSeparatorComponent',
     'onViewableItemsChanged',
@@ -56,7 +58,7 @@ export function FlatList(props) {
         const columns = columnCount();
         // Logged from inside the memo, not from the body: a Solid body runs ONCE, so a line emitted
         // there would report the mount-time shape forever and be actively misleading on a data change.
-        dlog(`Solid FlatList over ${props.data.length} items, ${columns} column(s)`);
+        dlog(`Solid FlatList over ${arrayLikeLength(props.data)} items, ${columns} column(s)`);
         return columns > SINGLE_COLUMN ? chunkIntoRows(props.data, columns) : [];
     });
     // A bare string is a registered class name and has to be resolved here — the row view's style
@@ -74,7 +76,7 @@ export function FlatList(props) {
                 // Called ONCE and untracked, the shape VirtualizedList's own cell build uses: a
                 // tracked call would put every signal renderItem reads into this column's insert
                 // effect and rebuild the subtree instead of updating its leaf.
-                const content = untrack(() => props.renderItem(() => ({
+                const content = untrack(() => renderItemContent(props, () => ({
                     item: item(),
                     index: info().item.startIndex + column,
                     // The row IS the virtualized cell, so every column in it shares the row's
@@ -108,13 +110,9 @@ export function FlatList(props) {
             pair.onViewableItemsChanged(expandRowViewability(rowInfo, props.keyExtractor));
         },
     })));
-    // The two paths instantiate VirtualizedList over DIFFERENT item types — ItemT vs IRow<ItemT> —
-    // so they are two elements, not one with switching props: a single instantiation would have to
-    // union the two and narrow ItemT | IRow<ItemT> back apart at runtime, which nothing can do
-    // soundly for an arbitrary ItemT. <Show> memoizes on the flip alone, so a numColumns change
-    // rebuilds (RN documents changing it live as unsupported — "change the key prop" — which is the
-    // same fresh start) while every other prop change re-props the live list.
-    return (<Show when={isMultiColumn()} fallback={<VirtualizedList {...passthrough} removeClippedSubviews={removeClippedSubviews()} data={props.data} getItem={(_source, index) => props.data[index]} getItemCount={() => props.data.length} renderItem={props.renderItem} keyExtractor={props.keyExtractor} ItemSeparatorComponent={props.ItemSeparatorComponent} onViewableItemsChanged={props.onViewableItemsChanged} viewabilityConfigCallbackPairs={props.viewabilityConfigCallbackPairs}/>}>
+    // Два списка с разными типами элементов, `ItemT` и `IRow<ItemT>`, одним элементом их не выразить
+    // `<Show>` пересобирает список только при смене `numColumns`, остальные props обновляют живой
+    return (<Show when={isMultiColumn()} fallback={<VirtualizedList {...passthrough} removeClippedSubviews={removeClippedSubviews()} data={props.data} getItem={(_source, index) => props.data[index]} getItemCount={() => arrayLikeLength(props.data)} renderItem={props.renderItem} ListItemComponent={props.ListItemComponent} keyExtractor={props.keyExtractor} ItemSeparatorComponent={props.ItemSeparatorComponent} onViewableItemsChanged={props.onViewableItemsChanged} viewabilityConfigCallbackPairs={props.viewabilityConfigCallbackPairs}/>}>
       <VirtualizedList {...passthrough} removeClippedSubviews={removeClippedSubviews()} data={rows()} getItem={(_source, index) => rows()[index]} getItemCount={() => rows().length} renderItem={renderRow} keyExtractor={(row) => rowKeyExtractor(row, props.keyExtractor)} ItemSeparatorComponent={rowSeparatorComponent()} onViewableItemsChanged={rowViewability()} viewabilityConfigCallbackPairs={rowViewabilityPairs()}/>
     </Show>);
 }

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

@@ -1,10 +1,10 @@
 import type { JSX } from '../jsx-runtime';
 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;
     children?: JSX.Element;
-}
+};

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

@@ -2,7 +2,7 @@ import type { JSX } from '../jsx-runtime';
 import { type IAccessibilityProps, type IAriaProps, type IKeyboardAvoidingBehavior } from '@symbiote-native/components';
 import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
 export type { IKeyboardAvoidingBehavior } from '@symbiote-native/components';
-export interface IKeyboardAvoidingViewProps extends IAccessibilityProps, IAriaProps {
+export type IKeyboardAvoidingViewProps = IAccessibilityProps & IAriaProps & {
     behavior?: IKeyboardAvoidingBehavior;
     enabled?: boolean;
     keyboardVerticalOffset?: number;
@@ -11,5 +11,5 @@ export interface IKeyboardAvoidingViewProps extends IAccessibilityProps, IAriaPr
     class?: IClassNameValue;
     onLayout?: (event: ISymbioteEvent) => void;
     children?: JSX.Element;
-}
+};
 export declare function KeyboardAvoidingView(props: IKeyboardAvoidingViewProps): JSX.Element;

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

@@ -1,34 +1,10 @@
-// KeyboardAvoidingView — the Solid lifecycle half. It composes a wrapper View and shifts it out of
-// the keyboard's way as the keyboard shows/hides. The inset math (readKeyboardFrame /
-// readLayoutFrame / computeInset) and the behavior → style/structure decision
-// (resolveKeyboardAvoidingLayout) are framework-agnostic and live in @symbiote-native/components,
-// shared verbatim with React, Vue, Svelte and Angular. Solid supplies only the reactivity: one
-// signal for the inset, three plain variables for the measured frame and the cross-fade setting, a
-// subscribe-at-setup / onCleanup pair over the Keyboard module, and the element assembly around its
-// own children.
-//
-// render-keyboard-avoiding-view.ts deliberately returns a layout DESCRIPTION rather than a
-// Descriptor tree — KAV wraps a live user subtree, which is the case the render-fn boundary rules
-// OUT of core (.claude/rules/component-render-fn-boundary.md). So descriptorToSolid has nothing to
-// do here, exactly as in View and Pressable; the two structural shapes ('nested' vs 'wrapper') are
-// written directly as the two branches at the bottom.
-//
-// NO whenCommitted anywhere: KAV issues no imperative native call. It only reads `onLayout`, and the
-// engine raises the native layout flag itself the moment a listener rides the prop bag — an event
-// cannot arrive before the view exists, so there is no pre-commit window to retry across.
-//
-// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE; every
-// read below sits inside an accessor, a memo, or an event handler — including
-// `keyboardVerticalOffset`, which is read at EVENT time so a changed offset applies to the next
-// keyboard event without re-subscribing (React re-runs its useEffect for that; here the closure
-// already sees the live value).
+// KeyboardAvoidingView, the Solid lifecycle half over the shared `createKeyboardAvoidingModel`
+// Nothing destructures `props`: they are getters, read at event time or inside an accessor
 import { createMemo, createSignal, onCleanup, splitProps } from 'solid-js';
-import { computeInset, configureKeyboardAvoidingAnimation, keyboardAvoidingEventNamesFor, readKeyboardAnimationTiming, readKeyboardFrame, readLayoutFrame, readPrefersCrossFadeTransitions, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
-import { Keyboard, Platform, dlog, } from '@symbiote-native/engine';
+import { createKeyboardAvoidingModel, keyboardAvoidingEventNamesFor, readPrefersCrossFadeTransitions, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+import { Keyboard, Platform, } from '@symbiote-native/engine';
 import { withStableKeys } from '../utils/stable-keys.js';
-// Read by KeyboardAvoidingView itself; everything else (the aria/role aliases, accessibility*,
-// testID, class) forwards onto the wrapper View, which folds them once through
-// resolveAccessibilityProps and widens the vanished-key case with withStableKeys.
+// Read here, the rest forwards onto the wrapper which folds aria/role and accessibility* once
 const HANDLED_PROPS = [
     'behavior',
     'enabled',
@@ -38,106 +14,55 @@ const HANDLED_PROPS = [
     'onLayout',
     'children',
 ];
-export function KeyboardAvoidingView(props) {
-    const [local, rest] = splitProps(props, HANDLED_PROPS);
+// The model with its inset signal and keyboard subscriptions, kept apart so the component reads as
+// the element assembly
+function createKeyboardModel(props) {
     const [inset, setInset] = createSignal(0);
-    // Plain variables, not signals: a re-measure alone must not repaint anything. They only feed the
-    // NEXT keyboard event's math, which is what re-runs the layout memo. Same shape as React's
-    // frameRef/initialHeightRef, Vue's `let frame` and Svelte's non-$state pair.
-    let frame;
-    let initialHeight;
-    // A device accessibility setting, not state: it cannot change mid-session, and nothing should
-    // repaint when the promise lands. So a plain `let` rather than a signal — the same reason `frame`
-    // above is one. It is read at EVENT time, by which point the microtask has long resolved; a
-    // keyboard event that somehow beat it just sees the `false` default, which is the ordinary math.
-    //
-    // Through the shared reader, not AccessibilityInfo directly: the engine's getter REJECTS on a
-    // native error (RN parity), and nothing awaits this call, so a rejection here would surface as an
-    // unhandled promise. readPrefersCrossFadeTransitions owns that fallback once for all five adapters
-    // and answers false, which is also what a missing module and an Android host answer.
+    // A device setting, not state: nothing should repaint when the promise lands
     let prefersCrossFadeTransitions = false;
     void readPrefersCrossFadeTransitions().then(enabled => {
         prefersCrossFadeTransitions = enabled;
     });
-    const onShow = (payload) => {
-        const keyboard = readKeyboardFrame(payload);
-        const offset = local.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET;
-        const previousInset = inset();
-        const next = computeInset(frame, keyboard, offset, {
-            behavior: local.behavior,
-            // The inset CURRENTLY applied (RN's this.state.bottom). Read from the signal at event time so
-            // it is live: in 'height' mode the wrapper is SHRUNK by it, so the next onLayout reports a
-            // frame shorter by exactly that much and core adds it back to cancel the shrink. Without it
-            // each further keyboard event computes a smaller overlap and the view walks back down under
-            // the keyboard. Core gates the correction on 'height'; the other modes ignore the value.
-            previousInset,
-            prefersCrossFadeTransitions,
-        });
-        // RN's `_updateBottomIfNecessary` skips the animation when the inset did not change.
-        if (next !== previousInset)
-            configureKeyboardAvoidingAnimation(readKeyboardAnimationTiming(payload), local.enabled !== false);
-        dlog(`KeyboardAvoidingView show -> inset ${next}`);
-        setInset(next);
-    };
-    const onHide = () => {
-        dlog('KeyboardAvoidingView hide -> inset 0');
-        setInset(0);
-    };
-    // TWO listeners, never three, and their names come from the host (RN KeyboardAvoidingView.js):
-    // iOS takes the WILL pair so the view rides up with the keyboard animation instead of snapping
-    // into place after it; Android has no will-notifications and keeps the DID pair. The change-frame
-    // notification is deliberately absent — RN's own comment says an undocked, split or floating iOS
-    // keyboard emits it BEFORE the hide, so listening to it applies a frame captured mid-dismissal.
-    //
-    // Subscribed in the setup body, which runs once per mount — Solid's counterpart to React's
-    // mount-effect and Vue's onMounted. onCleanup runs on dispose (render.ts's teardown disposes the
-    // whole root), so an unmount removes exactly the listeners this mount added; leaking them would
-    // leave a dead closure calling setInset on a disposed signal on every keystroke.
+    const model = createKeyboardAvoidingModel({
+        options: () => ({
+            behavior: props.behavior,
+            enabled: props.enabled !== false,
+            keyboardVerticalOffset: props.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET,
+        }),
+        setInset,
+        prefersCrossFade: () => prefersCrossFadeTransitions,
+    });
+    // Subscribed in the setup body, which runs once per mount, and removed when the root is disposed
     const events = keyboardAvoidingEventNamesFor(Platform.OS);
     const subscriptions = [
-        Keyboard.addListener(events.show, onShow),
-        Keyboard.addListener(events.hide, onHide),
+        Keyboard.addListener(events.show, model.keyboardShown),
+        Keyboard.addListener(events.hide, model.keyboardHidden),
     ];
     onCleanup(() => {
         for (const subscription of subscriptions)
             subscription.remove();
     });
+    return { inset, model };
+}
+export function KeyboardAvoidingView(props) {
+    const [local, rest] = splitProps(props, HANDLED_PROPS);
+    const { inset, model } = createKeyboardModel(props);
     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);
         local.onLayout?.(event);
     };
     const layout = createMemo(() => resolveKeyboardAvoidingLayout({
         behavior: local.behavior,
-        // When disabled the inset is forced to 0, so every behavior mode renders untouched. `inset()`
-        // is not read at all on that branch, so a disabled KAV does not even subscribe to the signal;
-        // re-enabling re-runs this memo through the `local.enabled` getter and picks the value up.
+        // `inset()` is not read when disabled, so a disabled view does not subscribe to the signal
         effectiveInset: local.enabled === false ? 0 : inset(),
-        initialHeight,
+        initialHeight: model.initialHeight(),
         style: local.style,
         contentContainerStyle: local.contentContainerStyle,
     }));
-    // What keeps the children alive across a keystroke. Solid has no reconciler between this file and
-    // the host nodes — `insert` REPLACES a subtree (.claude/rules/solid-descriptor-bridge.md §4) — and
-    // the branch below runs inside the wrapper's `insert` render effect. `layout()` returns a fresh
-    // object on every keyboard event, so anything that lets it reach that effect tears the wrapped
-    // subtree down and rebuilds it on every show/hide: typically the form the user is typing in, which
-    // loses focus mid-keystroke. createMemo's default `===` equality stops the churn at the BOOLEAN —
-    // it only notifies when the structure actually flips, i.e. when `behavior` moves in or out of
-    // 'position'.
-    //
-    // babel-preset-solid's `wrapConditionals` (on by default) would memoize the condition of the
-    // ternary below on its own, so the inline form happens to be safe too. Naming the memo makes that
-    // guarantee local instead of a compiler flag nobody reads, and it survives the refactor that
-    // actually breaks it — measured: moving the same branch into a plain `renderContent()` helper (the
-    // shape Pressable uses) defeats wrapConditionals and rebuilds the subtree on every keyboard event.
+    // Named so the children survive a keystroke: `layout()` is a fresh object per keyboard event,
+    // and this boolean only notifies when the structure flips, `insert` would rebuild the subtree
     const isNested = createMemo(() => layout().kind === 'nested');
-    // The inset reaches the host as a PROP instead: `spread` runs a per-key diff on the SAME element,
-    // so nothing is rebuilt.
+    // The inset reaches the host as a prop, `spread` diffs it on the same element
     const innerStyle = () => {
         const resolved = layout();
         return resolved.kind === 'nested' ? resolved.innerStyle : undefined;
@@ -145,16 +70,11 @@ export function KeyboardAvoidingView(props) {
     const wrapperProps = createMemo(() => ({
         ...rest,
         style: layout().wrapperStyle,
-        // Last, so KAV's own measure always runs; the caller's handler is invoked from inside it.
+        // Last, so the model always measures, the caller's handler is invoked from inside
         onLayout: handleLayout,
     }));
-    // The half `View` used to supply, now that the wrapper is a bare tag: `spread` has no removal
-    // pass, so a key that stops being emitted (`rest` is a splitProps proxy, and `wrapperStyle` is
-    // absent in some behaviors) would keep its last value on the native view forever
-    // (.claude/rules/solid-descriptor-bridge.md §1).
+    // `spread` has no removal pass, so a key that stops being emitted would keep its last value
     const stableWrapperProps = withStableKeys(wrapperProps);
-    // 'nested' ('position') pushes the children in an inner View by `bottom: inset`; the wrapper modes
-    // ('padding' / 'height' / no behavior) adjust the single wrapper directly.
     return (<view {...stableWrapperProps()}>
       {isNested() ? (<view style={innerStyle()}>{local.children}</view>) : (local.children)}
     </view>);

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

@@ -0,0 +1,6 @@
+import type { ILayoutConformanceMode } from '@symbiote-native/components';
+import type { JSX } from '../jsx-runtime';
+export type ILayoutConformanceProps = {
+    mode: ILayoutConformanceMode;
+    children?: JSX.Element;
+};

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

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

package/build/components/modal.d.ts

@@ -1,11 +1,11 @@
 import type { JSX } from '../jsx-runtime';
 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>;
@@ -20,5 +20,5 @@ export interface IModalProps extends IAccessibilityProps, IAriaProps {
     style?: IStyleProp<IViewStyle>;
     class?: IClassNameValue;
     children?: JSX.Element;
-}
+};
 export declare function Modal(props: IModalProps): JSX.Element;

package/build/components/modal.jsx

@@ -34,9 +34,10 @@
 // SEED, which is a mount-time value by definition (React's useReducer lazy init and Svelte's
 // $state(...) initializer read it exactly once too).
 import { createEffect, createSignal, Show, splitProps } from 'solid-js';
-import { createDescriptorShapeGuard, createInitialModalState, isModalVisible, modalReducer, modalVisibilityAction, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
+import { createDescriptorShapeGuard, createInitialModalState, isModalVisible, modalReducer, modalVisibilityAction, renderModal, resolveAccessibilityProps, shouldRenderModal, warnAboutModalProps, } from '@symbiote-native/components';
 import { dlog, Platform, } from '@symbiote-native/engine';
 import { withStableKeys } from '../utils/stable-keys.js';
+import { VirtualizedListScopeResetter } from './virtualized-list/nested-scope.js';
 // Read by Modal itself; everything else (the four DirectEvents, testID/nativeID, every
 // accessibility* and aria-* field) forwards onto the host node through `passthrough`, exactly as
 // React's `...passthrough` rest does.
@@ -58,6 +59,8 @@ const HANDLED_PROPS = [
 ];
 const shape = createDescriptorShapeGuard('Modal');
 export function Modal(props) {
+    // RN checks on mount and on every update, a dev build only
+    createEffect(() => warnAboutModalProps(props));
     const [local, rest] = splitProps(props, HANDLED_PROPS);
     const isVisible = () => isModalVisible(local.visible);
     // The keep-alive seed is a mount-time value by contract (createInitialModalState: a modal that
@@ -83,11 +86,7 @@ export function Modal(props) {
         if (!shouldRender())
             dlog('Modal hidden -> no node committed');
     });
-    // A plain accessor rather than a createMemo, unlike descriptor-to-solid.ts. A memo runs EAGERLY
-    // at creation, which would paint a descriptor (and emit renderModal's "committing" dlog) for a
-    // modal that is hidden and commits nothing. Read from inside the two `spread` render effects
-    // instead, it never runs at all while `Show` is closed; the cost is that a change recomputes this
-    // pure object literal twice, once per bag.
+    // An accessor, not a memo: a memo runs eagerly and would build a descriptor for a hidden modal
     const descriptor = () => renderModal({
         visible: local.visible,
         transparent: local.transparent,
@@ -113,10 +112,7 @@ export function Modal(props) {
             throw shape.error('the container child disappeared');
         return shape.asElement(first);
     };
-    // withStableKeys on both bags because `passthrough` goes through resolveAccessibilityProps, whose
-    // two branches emit DIFFERENT key sets — and Solid's `spread` walks only the CURRENT keys with no
-    // removal pass, so a vanished key would keep its last value on the native view forever
-    // (.claude/rules/solid-descriptor-bridge.md §1).
+    // `resolveAccessibilityProps` emits different key sets per branch and `spread` never removes one
     const hostBag = withStableKeys(() => descriptor().props);
     const containerBag = withStableKeys(() => ({
         ...container().props,
@@ -124,7 +120,11 @@ export function Modal(props) {
     }));
     return (<Show when={shouldRender()}>
       <modal {...hostBag()}>
-        <view {...containerBag()}>{local.children}</view>
+        <view {...containerBag()}>
+          <VirtualizedListScopeResetter>
+            {local.children}
+          </VirtualizedListScopeResetter>
+        </view>
       </modal>
     </Show>);
 }

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

@@ -1,18 +1,18 @@
 import type { JSX } from '../jsx-runtime';
 import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
-import type { IClassNameValue } from '@symbiote-native/engine';
-export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
+import type { IClassNameValue, 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;
     class?: IClassNameValue;
     children?: JSX.Element;
-}
+};

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

@@ -1,12 +1,12 @@
 import type { Ref } from 'solid-js';
 import type { JSX } from '../jsx-runtime';
 import type { ISymbioteEvent } from '@symbiote-native/engine';
-import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
-import type { IClassNameValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps, IInnerViewRef, IScrollViewNativeOnlyProps } from '@symbiote-native/components';
+import type { IClassNameValue, IColorValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
 import type { IHostInstance } from '../host-instance';
 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>;
     class?: IClassNameValue;
     contentContainerStyle?: IStyleProp<IViewStyle> | string;
@@ -36,8 +36,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?: {
@@ -66,7 +69,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;
@@ -76,4 +79,4 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     onScrollToTop?: IScrollHandler;
     ref?: Ref<IHostInstance>;
     children?: JSX.Element;
-}
+};

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

@@ -1,8 +1,9 @@
-import type { Ref } from 'solid-js';
+import type { JSX, Ref } from 'solid-js';
 import type { ITextInputProps as ITextInputBaseProps } from '@symbiote-native/components';
 import type { IClassNameValue } from '@symbiote-native/engine';
 import type { IHostInstance } from '../host-instance';
 export type ITextInputProps = ITextInputBaseProps & {
     class?: IClassNameValue;
     ref?: Ref<IHostInstance>;
+    children?: JSX.Element;
 };

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

@@ -1,9 +1,9 @@
 import type { Ref } from 'solid-js';
 import type { JSX } from '../jsx-runtime';
-import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IAccessibilityProps, IAriaProps, ITextNativeOnlyProps } from '@symbiote-native/components';
 import type { IClassNameValue, IStyleProp, ISymbioteEvent, ITextStyle } from '@symbiote-native/engine';
 import type { IHostInstance } from '../host-instance';
-export interface ITextProps extends IAccessibilityProps, IAriaProps {
+export type ITextProps = IAccessibilityProps & IAriaProps & ITextNativeOnlyProps & {
     style?: IStyleProp<ITextStyle>;
     class?: IClassNameValue;
     onPress?: (event: ISymbioteEvent) => void;
@@ -23,4 +23,4 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     selectionColor?: string;
     ref?: Ref<IHostInstance>;
     children?: JSX.Element;
-}
+};

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

@@ -1,20 +1,20 @@
 import type { JSX } from '../jsx-runtime';
 import type { IPressTimingProps } from '@symbiote-native/components';
-import type { IClassNameValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IClassNameValue, IColorValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
 import type { IPressableProps } from './pressable-props';
 export type ITouchableBaseProps = Omit<IPressableProps, 'style' | 'class' | 'children'> & IPressTimingProps & {
     style?: IStyleProp<IViewStyle>;
     class?: IClassNameValue;
     children?: JSX.Element;
 };
-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;
-}
+};

package/build/components/virtualized-list/index.android.d.ts

@@ -1,2 +1,2 @@
-export type { IVirtualizedListProps, IVirtualizedListComponent, IVirtualizedListCellInfo, IVirtualizedListRenderItem, IVirtualizedListHandle, ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, } from './shared';
-export declare const VirtualizedList: import("./shared").IVirtualizedListComponent;
+export type { IVirtualizedListProps, IVirtualizedListComponent, ICellRendererComponent, ICellRendererProps, IVirtualizedListCellInfo, IVirtualizedListRenderItem, IVirtualizedListHandle, ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, } from './shared';
+export declare const VirtualizedList: import("./virtualized-list-props").IVirtualizedListComponent;

package/build/components/virtualized-list/index.ios.d.ts

@@ -1,2 +1,2 @@
-export type { IVirtualizedListProps, IVirtualizedListComponent, IVirtualizedListCellInfo, IVirtualizedListRenderItem, IVirtualizedListHandle, ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, } from './shared';
-export declare const VirtualizedList: import("./shared").IVirtualizedListComponent;
+export type { IVirtualizedListProps, IVirtualizedListComponent, ICellRendererComponent, ICellRendererProps, IVirtualizedListCellInfo, IVirtualizedListRenderItem, IVirtualizedListHandle, ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, } from './shared';
+export declare const VirtualizedList: import("./virtualized-list-props").IVirtualizedListComponent;

package/build/components/virtualized-list/item-content.d.ts

@@ -0,0 +1,6 @@
+import type { Accessor } from 'solid-js';
+import type { JSX } from '../../jsx-runtime';
+import type { IVirtualizedListCellInfo, IVirtualizedListProps } from './virtualized-list-props';
+type IItemRenderers<ItemT> = Pick<IVirtualizedListProps<ItemT>, 'renderItem' | 'ListItemComponent'>;
+export declare function renderItemContent<ItemT>(renderers: IItemRenderers<ItemT>, info: Accessor<IVirtualizedListCellInfo<ItemT>>): JSX.Element;
+export {};

package/build/components/virtualized-list/item-content.jsx

@@ -0,0 +1,9 @@
+// One cell's content: `ListItemComponent` or `renderItem`, RN's `_renderElement`
+import { drawItem } from '@symbiote-native/components';
+// The component takes the info as plain props, reactive getters over the accessor
+export function renderItemContent(renderers, info) {
+    return drawItem({
+        renderItem: renderers.renderItem,
+        component: renderers.ListItemComponent,
+    }, info, (Component, given) => (<Component item={given().item} index={given().index} separators={given().separators}/>));
+}

package/build/components/virtualized-list/list-body.d.ts

@@ -0,0 +1,15 @@
+import { type Accessor } from 'solid-js';
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { JSX } from '../../jsx-runtime';
+export type IListBodyDeps = {
+    header: JSX.Element;
+    footer: JSX.Element;
+    empty: JSX.Element;
+    headerStyle: () => IStyleProp<IViewStyle> | undefined;
+    footerStyle: () => IStyleProp<IViewStyle> | undefined;
+    emptyStyle: () => IStyleProp<IViewStyle> | undefined;
+    isEmpty: () => boolean;
+    rowKeys: Accessor<string[]>;
+    renderRow: (rowKey: string) => JSX.Element;
+};
+export declare function listBody(deps: IListBodyDeps): JSX.Element;

package/build/components/virtualized-list/list-body.jsx

@@ -0,0 +1,20 @@
+// The children of the content node: header, the keyed rows (or the empty slot), footer
+import { For, Show } from 'solid-js';
+// Every reactive read sits inside a `<Show>` or `<For>` prop getter, so this function has no
+// dependencies and the content view's `insert` effect runs exactly once, a condition moved into a
+// plain helper called from here would rebuild the whole list on the next scroll
+export function listBody(deps) {
+    return [
+        <Show when={deps.header !== undefined}>
+      <view style={deps.headerStyle()}>{deps.header}</view>
+    </Show>,
+        <Show when={deps.isEmpty()} fallback={<For each={deps.rowKeys()}>{deps.renderRow}</For>}>
+      <Show when={deps.empty !== undefined}>
+        <view style={deps.emptyStyle()}>{deps.empty}</view>
+      </Show>
+    </Show>,
+        <Show when={deps.footer !== undefined}>
+      <view style={deps.footerStyle()}>{deps.footer}</view>
+    </Show>,
+    ];
+}

package/build/components/virtualized-list/list-parts.d.ts

@@ -0,0 +1,14 @@
+import { type IListNesting } from '@symbiote-native/components';
+import { createListWindow } from './list-window';
+import { type IScrollHandlers } from './scroll-handlers';
+import { createStickyState } from './sticky-state';
+import { type IListDriver } from './use-list-driver';
+import type { IVirtualizedListProps } from './virtualized-list-props';
+export type IListParts<ItemT> = {
+    driver: IListDriver<ItemT>;
+    nesting: IListNesting<ItemT>;
+    sticky: ReturnType<typeof createStickyState>;
+    listWindow: ReturnType<typeof createListWindow>;
+    handlers: IScrollHandlers;
+};
+export declare function createListParts<ItemT>(props: IVirtualizedListProps<ItemT>): IListParts<ItemT>;