@symbiote-native/react 0.3.0 → 0.4.0

package/build/components/touchable/index.js

@@ -1,18 +1,20 @@
-// The Touchable* family, all built on Pressable. RN realizes their feedback with Animated, and so
-// do we. The press-timing constants and the deactivation-floor math are shared with every adapter
-// (@symbiote-native/components/state/touchable); here React owns only the Animated wiring + the press
-// scheduling refs:
-//   TouchableOpacity:   animate an Animated.Value opacity toward activeOpacity on press-in and
-//     back to 1 on press-out, driven imperatively from onPressIn/onPressOut.
-//   TouchableHighlight: paint underlayColor + lower child opacity while pressed, via Pressable's
-//     pressed-state style (RN drives this with setState, not Animated, faithfully).
-//   TouchableWithoutFeedback: no visual change, just the press wiring.
-import { createElement, useRef } from 'react';
-import { createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, highlightPressedStyle, DEFAULT_ACTIVE_OPACITY, DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_MIN_PRESS_DURATION_MS, DEFAULT_UNDERLAY_COLOR, OPACITY_ACTIVE_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, } from '@symbiote-native/components';
+// The Touchable* family, all built on Pressable. Ported against RN's own sources
+// (.vendors/react-native/.../Components/Touchable/*.js) after the 2026-08-19 audit found ten
+// divergences; the shared halves live in @symbiote-native/components and React owns only the
+// lifecycle — refs, effects, the real timers, the Animated wiring, and the child clone:
+//   TouchableOpacity:   an Animated.Value fades toward activeOpacity on press-in and back to the
+//     style's own resting opacity on press-out, driven from onPressIn/onPressOut.
+//   TouchableHighlight: the underlay machine drives a `shown` flag (NOT `pressed` — RN holds the
+//     underlay for delayPressOut past the tap); the container takes the underlay color and the
+//     child takes the lowered opacity, RN's split.
+//   TouchableWithoutFeedback: the same press-timing machine with the visual half left empty —
+//     "without feedback" means no VISUAL, not no timing.
+import { Children, cloneElement, createElement, isValidElement, useEffect, useRef, useState, } from 'react';
+import { createHighlightUnderlayHandlers, createHighlightUnderlayRuntime, createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, hasTouchablePressHandler, resolveHighlightExtraStyles, restingOpacityFromStyle, DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_GRANT_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, TOUCHABLE_MIN_PRESS_DURATION_MS, } from '@symbiote-native/components';
 import { Pressable } from '../pressable/index.js';
 import { Animated } from '../../modules/animated/index.js';
-// The real setTimeout the shared feedback machine schedules its deferred activation/deactivation on
-// (core/components has no timer globals). Returns a canceller so an early release flushes the timer.
+// The real setTimeout the shared machines schedule on (core/components has no timer globals).
+// Returns a canceller so an early release flushes the timer.
 function scheduleTimeout(callback, ms) {
     const id = setTimeout(callback, ms);
     return () => clearTimeout(id);
@@ -22,42 +24,142 @@ export const TouchableOpacity = props => {
     // className is pulled out here, like style, and applied to the inner Animated.View below —
     // left in ...rest it would land on the outer Pressable instead, which is not where `style`
     // (the opacity-fade node) goes.
-    className, children, onPressIn, onPressOut, delayPressIn = 0, delayPressOut = 0, minPressDuration = DEFAULT_MIN_PRESS_DURATION_MS, ...rest } = props;
-    // One Animated.Value per mount, resting at full opacity. The Animated.View leaf commits its
-    // current value every frame, so timing it animates the real view.
-    const opacity = useRef(new Animated.Value(RESTING_OPACITY)).current;
+    className, children, disabled, onPressIn, onPressOut, delayPressIn = 0, delayPressOut = 0, 
+    // RN's Touchables override Pressability's 130ms floor with 0 (TouchableOpacity.js:195); the
+    // active visual is held by the fade's own duration instead.
+    minPressDuration = TOUCHABLE_MIN_PRESS_DURATION_MS, ...rest } = props;
+    // RN's _getChildStyleOpacityWithDefault: the fade settles at the opacity the CALLER's style
+    // asks for, not at a hard 1 — and must START there, or the first paint jumps to fully opaque.
+    const restingOpacity = restingOpacityFromStyle(style);
+    // One Animated.Value per mount. The Animated.View leaf commits its current value every frame,
+    // so timing it animates the real view.
+    const opacity = useRef(new Animated.Value(restingOpacity)).current;
     // The shared press-scheduling cell (delayPressIn timer + activation clock), held across renders.
     const runtime = useRef(createTouchableFeedbackRuntime()).current;
     function setOpacityTo(toValue, duration) {
+        // useNativeDriver: true is RN's own (TouchableOpacity.js:242). opacity is natively drivable
+        // and the fade then survives a busy JS thread, which is the whole point of the feedback.
         Animated.timing(opacity, {
             toValue,
             duration,
             easing: Animated.Easing.inOut(Animated.Easing.quad),
-            useNativeDriver: false,
+            useNativeDriver: true,
         }).start();
     }
+    // RN's componentDidUpdate: a changed `disabled` or a changed style opacity re-settles the view,
+    // so a Touchable disabled mid-press does not stay stuck at its active opacity.
+    const hasRendered = useRef(false);
+    useEffect(() => {
+        // RN runs this on UPDATE only. Firing at mount would animate over the value the
+        // Animated.Value was just constructed with.
+        if (!hasRendered.current) {
+            hasRendered.current = true;
+            return;
+        }
+        setOpacityTo(restingOpacity, OPACITY_INACTIVE_DURATION_MS);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- setOpacityTo is re-made per render
+    }, [disabled, restingOpacity]);
+    // RN's componentWillUnmount: stop the fade so a teardown mid-animation leaves no driver running
+    // against a node that is gone.
+    useEffect(() => () => {
+        opacity.resetAnimation();
+    }, [opacity]);
     // The shared machine owns the delayPressIn/minPressDuration scheduling; the adapter supplies only
     // the native seam — the Animated opacity fade + the framework emit — as activate/deactivate.
-    const { handlePressIn, handlePressOut } = createTouchableFeedbackHandlers({ delayPressIn, delayPressOut, minPressDuration, schedule: scheduleTimeout, now: Date.now }, runtime, {
+    const { handlePressIn, handlePressOut } = createTouchableFeedbackHandlers({
+        delayPressIn,
+        delayPressOut,
+        minPressDuration,
+        schedule: scheduleTimeout,
+        now: Date.now,
+    }, runtime, {
         activate(event) {
-            setOpacityTo(activeOpacity, OPACITY_ACTIVE_DURATION_MS);
+            setOpacityTo(activeOpacity, OPACITY_ACTIVE_GRANT_DURATION_MS);
             onPressIn?.(event);
         },
         deactivate(event) {
-            setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
+            setOpacityTo(restingOpacity, OPACITY_INACTIVE_DURATION_MS);
             onPressOut?.(event);
         },
     });
-    return createElement(Pressable, { ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut }, createElement(Animated.View, { style: [style, { opacity }], className }, children));
+    return createElement(Pressable, { ...rest, disabled, onPressIn: handlePressIn, onPressOut: handlePressOut }, createElement(Animated.View, { style: [style, { opacity }], className }, children));
 };
+// RN's render: the lowered opacity is cloned onto the CHILD while the container keeps an opaque
+// underlay (TouchableHighlight.js). Fold both onto the container instead and the opacity fades the
+// very underlay it is meant to reveal — `underlayColor: 'black'` paints grey. React is the one
+// adapter that can reach the child without a wrapper view perturbing the flex chain.
+// A non-element child (text, a fragment, nothing at all) has no style prop to compose onto, so it
+// passes through untouched rather than throwing the way RN's Children.only would.
+function withChildStyle(children, extra) {
+    const child = Children.count(children) === 1 ? children : undefined;
+    if (!isValidElement(child))
+        return children;
+    return cloneElement(child, { style: [child.props.style, extra] });
+}
 export const TouchableHighlight = props => {
-    const { activeOpacity = DEFAULT_HIGHLIGHT_CHILD_OPACITY, underlayColor = DEFAULT_UNDERLAY_COLOR, style, children, ...rest } = props;
-    function pressedStyle({ pressed }) {
-        return highlightPressedStyle(pressed, style, underlayColor, activeOpacity);
+    const { activeOpacity, underlayColor, style, children, onPress, onPressIn, onPressOut, onShowUnderlay, onHideUnderlay, delayPressOut = 0, ...rest } = props;
+    // `shown` is NOT `pressed`: RN holds the underlay for delayPressOut past the tap so a press too
+    // fast to see still flashes, and the pressed flag is already false by then.
+    const [shown, setShown] = useState(false);
+    const runtime = useRef(createHighlightUnderlayRuntime()).current;
+    // RN's _hasPressHandler gate: no press handler, no underlay. onLongPress is only READ here —
+    // it stays in `rest` for Pressable to fire directly.
+    const hasPressHandler = hasTouchablePressHandler({
+        onPress,
+        onPressIn,
+        onPressOut,
+        onLongPress: rest.onLongPress,
+    });
+    const underlay = createHighlightUnderlayHandlers({ delayPressOut, hasPressHandler, schedule: scheduleTimeout }, runtime, { setShown, onShowUnderlay, onHideUnderlay });
+    const extraStyles = resolveHighlightExtraStyles({
+        shown,
+        hasPressHandler,
+        underlayColor,
+        activeOpacity,
+    });
+    // Visual first, then the caller's callback — RN's order in _createPressabilityConfig.
+    function handlePressIn(event) {
+        underlay.handlePressIn(event);
+        onPressIn?.(event);
+    }
+    function handlePress(event) {
+        underlay.handlePress(event);
+        onPress?.(event);
     }
-    return createElement(Pressable, { ...rest, style: pressedStyle }, children);
+    function handlePressOut(event) {
+        underlay.handlePressOut(event);
+        onPressOut?.(event);
+    }
+    return createElement(Pressable, {
+        ...rest,
+        style: extraStyles === undefined ? style : [style, extraStyles.underlay],
+        onPress: handlePress,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+    }, extraStyles === undefined
+        ? children
+        : withChildStyle(children, extraStyles.child));
 };
 export const TouchableWithoutFeedback = props => {
-    const { children, ...rest } = props;
-    return createElement(Pressable, rest, children);
+    const { children, onPressIn, onPressOut, delayPressIn = 0, delayPressOut = 0, minPressDuration = TOUCHABLE_MIN_PRESS_DURATION_MS, ...rest } = props;
+    // RN's TouchableWithoutFeedback builds a FULL Pressability config with delayPressIn /
+    // delayPressOut / minPressDuration: 0 — the same shared machine TouchableOpacity uses, with the
+    // visual half left empty. Spreading the delay props onto Pressable instead did nothing: it does
+    // not read them, and they leaked to the host as unknown props.
+    const runtime = useRef(createTouchableFeedbackRuntime()).current;
+    const { handlePressIn, handlePressOut } = createTouchableFeedbackHandlers({
+        delayPressIn,
+        delayPressOut,
+        minPressDuration,
+        schedule: scheduleTimeout,
+        now: Date.now,
+    }, runtime, {
+        activate(event) {
+            onPressIn?.(event);
+        },
+        deactivate(event) {
+            onPressOut?.(event);
+        },
+    });
+    return createElement(Pressable, { ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut }, children);
 };

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

@@ -18,9 +18,9 @@
 // scrollTo command via its handle ref, animated by default. The `contentOffset` prop is only a
 // fallback for the pre-mount window (handle not yet attached).
 import { createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, } from 'react';
-import { dlog } from '@symbiote-native/engine';
-import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
-import { ScrollView } from '../scroll-view';
+import { dlog, } from '@symbiote-native/engine';
+import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
+import { ScrollView, } from '../scroll-view';
 import { RefreshControl } from '../refresh-control/index.js';
 function resolveElement(component) {
     if (component === undefined)
@@ -88,7 +88,12 @@ export function VirtualizedList(props) {
         onScrollToIndexFailed,
         viewabilityPairs,
     });
-    handlersRef.current = { onEndReached, onStartReached, onScrollToIndexFailed, viewabilityPairs };
+    handlersRef.current = {
+        onEndReached,
+        onStartReached,
+        onScrollToIndexFailed,
+        viewabilityPairs,
+    };
     // The one folded state cell (RN's scattered refs collapsed into IListState). Lazily created once.
     const stateRef = useRef(null);
     const state = (stateRef.current ??= createInitialListState());
@@ -109,7 +114,9 @@ export function VirtualizedList(props) {
     const scrollToPixel = useCallback((offset, animated) => {
         const clamped = Math.max(EMPTY_OFFSET, offset);
         const isHorizontal = inputsRef.current.horizontal;
-        const target = isHorizontal ? { x: clamped, y: EMPTY_OFFSET } : { x: EMPTY_OFFSET, y: clamped };
+        const target = isHorizontal
+            ? { x: clamped, y: EMPTY_OFFSET }
+            : { x: EMPTY_OFFSET, y: clamped };
         if (scrollViewRef.current !== null) {
             dlog(`VirtualizedList scrollTo offset=${clamped} animated=${animated} (horizontal=${isHorizontal})`);
             scrollViewRef.current.scrollTo({ x: target.x, y: target.y, animated });
@@ -129,10 +136,14 @@ export function VirtualizedList(props) {
                     scrollToPixel(effect.offset, effect.animated);
                     break;
                 case 'fire-end-reached':
-                    handlers.onEndReached?.({ distanceFromEnd: effect.distanceFromEnd });
+                    handlers.onEndReached?.({
+                        distanceFromEnd: effect.distanceFromEnd,
+                    });
                     break;
                 case 'fire-start-reached':
-                    handlers.onStartReached?.({ distanceFromStart: effect.distanceFromStart });
+                    handlers.onStartReached?.({
+                        distanceFromStart: effect.distanceFromStart,
+                    });
                     break;
                 case 'fire-scroll-to-index-failed':
                     handlers.onScrollToIndexFailed?.({
@@ -217,8 +228,9 @@ export function VirtualizedList(props) {
         const length = readLayoutLength(event, horizontal);
         if (length === undefined)
             return;
-        dlog(`VirtualizedList cell ${index} measured length=${length}`);
-        dispatch({ kind: 'measure', index, length });
+        const offset = readLayoutOffset(event, horizontal);
+        dlog(`VirtualizedList cell ${index} measured length=${length} offset=${offset ?? 'none'}`);
+        dispatch({ kind: 'measure', index, length, offset });
     }, [horizontal, dispatch]);
     // Merge an override onto the separator at a given gap and request a re-render. A gap index
     // outside [0, count-2] has no separator, so the write is a no-op (RN bails the same way).
@@ -313,7 +325,9 @@ export function VirtualizedList(props) {
     // extraData) already re-renders and re-runs renderItem. Voided to mark the deliberate no-op.
     void extraData;
     const children = [];
-    const stickySet = stickyHeaderIndices !== undefined ? new Set(stickyHeaderIndices) : undefined;
+    const stickySet = stickyHeaderIndices !== undefined
+        ? new Set(stickyHeaderIndices)
+        : undefined;
     let renderedStickyIndices = [];
     const header = resolveElement(ListHeaderComponent);
     if (header !== undefined) {
@@ -337,13 +351,14 @@ export function VirtualizedList(props) {
             keyFor: keyForIndex,
             stickyIndices: stickySet,
             hasHeader: header !== undefined,
-            hasSeparators: ItemSeparatorComponent !== undefined,
         });
         renderedStickyIndices = plan.stickyChildPositions;
         if (plan.leadingExtent > EMPTY_OFFSET) {
             children.push(createElement('symbiote-view', {
                 key: 'spacer-leading',
-                style: horizontal ? { width: plan.leadingExtent } : { height: plan.leadingExtent },
+                style: horizontal
+                    ? { width: plan.leadingExtent }
+                    : { height: plan.leadingExtent },
             }));
         }
         // The force-mounted sticky cell (RN _ensureClosestStickyHeader): the nearest sticky index
@@ -362,13 +377,19 @@ export function VirtualizedList(props) {
             children.push(createElement('symbiote-view', {
                 key: `cell-${plan.forcedStickyCell.key}`,
                 onLayout: makeCellMeasure(forcedIndex),
-                style: inverted ? (horizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE) : undefined,
+                style: inverted
+                    ? horizontal
+                        ? INVERTED_X_STYLE
+                        : INVERTED_Y_STYLE
+                    : undefined,
             }, forcedCell));
         }
         if (plan.gapExtent > EMPTY_OFFSET) {
             children.push(createElement('symbiote-view', {
                 key: 'spacer-gap',
-                style: horizontal ? { width: plan.gapExtent } : { height: plan.gapExtent },
+                style: horizontal
+                    ? { width: plan.gapExtent }
+                    : { height: plan.gapExtent },
             }));
         }
         for (const planCell of plan.cells) {
@@ -379,24 +400,42 @@ export function VirtualizedList(props) {
                 index: planCell.index,
                 separators: makeSeparators(planCell.index),
             });
+            // RN renders the separator INSIDE the cell's own measuring wrapper
+            // (VirtualizedListCellRenderer.js:218-221), and that placement is load-bearing rather than
+            // cosmetic. As a SIBLING it is an extra flex child, so the chrome between two cells becomes
+            // gap + separator + gap while a spacer collapsing that region replaces it with one gap — the
+            // leading spacer then lands every cell below it short by (separator + gap), and the content
+            // visibly jumps by that amount each time the window's first index moves. Measured at exactly
+            // 17px on device 2026-08-19 (a 1px divider under a 16px container gap); see
+            // .claude/rules/list-geometry-feedback-loop.md. Inside the wrapper it is part of the cell's
+            // measured length instead, and every cell stays exactly one child.
+            const separator = 
+            // RN gates the separator on the last index of the DATA, not of the WINDOW
+            // (VirtualizedList.js:793 `const end = getItemCount(data) - 1`), and now that the separator
+            // lives INSIDE the measuring wrapper that distinction is load-bearing: gating on the window
+            // would make a cell's own measured height change as the window slides past it. Device-measured
+            // 2026-08-19 as a run of cells all shifting by exactly the divider's 1px.
+            planCell.index < count - 1
+                ? renderSeparatorElement(ItemSeparatorComponent, item, getItem(data, planCell.index + 1), separatorOverridesRef.current.get(planCell.index))
+                : undefined;
             // Wrap each cell in a measuring View. When inverted, each cell carries the counter-flip so
             // its content reads upright inside the flipped content container.
             children.push(createElement('symbiote-view', {
                 key: `cell-${planCell.key}`,
                 onLayout: makeCellMeasure(planCell.index),
-                style: inverted ? (horizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE) : undefined,
-            }, cell));
-            const separator = planCell.index < last
-                ? renderSeparatorElement(ItemSeparatorComponent, item, getItem(data, planCell.index + 1), separatorOverridesRef.current.get(planCell.index))
-                : undefined;
-            if (separator !== undefined) {
-                children.push(createElement('symbiote-view', { key: `sep-${planCell.key}` }, separator));
-            }
+                style: inverted
+                    ? horizontal
+                        ? INVERTED_X_STYLE
+                        : INVERTED_Y_STYLE
+                    : undefined,
+            }, cell, separator));
         }
         if (plan.trailingExtent > EMPTY_OFFSET) {
             children.push(createElement('symbiote-view', {
                 key: 'spacer-trailing',
-                style: horizontal ? { width: plan.trailingExtent } : { height: plan.trailingExtent },
+                style: horizontal
+                    ? { width: plan.trailingExtent }
+                    : { height: plan.trailingExtent },
             }));
         }
     }
@@ -448,7 +487,8 @@ export function VirtualizedList(props) {
     if (maintainVisibleContentPosition !== undefined) {
         scrollProps.maintainVisibleContentPosition = {
             ...maintainVisibleContentPosition,
-            minIndexForVisible: maintainVisibleContentPosition.minIndexForVisible + (header !== undefined ? 1 : 0),
+            minIndexForVisible: maintainVisibleContentPosition.minIndexForVisible +
+                (header !== undefined ? 1 : 0),
         };
     }
     // Pull-to-refresh: when onRefresh is set, build a RefreshControl for the ScrollView's

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

@@ -22,6 +22,11 @@ export interface IVirtualizedSectionListProps<ItemT> extends IAccessibilityProps
     }) => ReactNode;
     SectionSeparatorComponent?: ComponentType<Record<string, never>> | ReactElement;
     keyExtractor?: (item: ItemT, index: number) => string;
+    getItemLayout?: (data: ReadonlyArray<ISection<ItemT>> | null, index: number) => {
+        length: number;
+        offset: number;
+        index: number;
+    };
     stickySectionHeadersEnabled?: boolean;
     extraData?: unknown;
     ItemSeparatorComponent?: ComponentType<ISeparatorProps<ItemT>>;

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

@@ -6,7 +6,7 @@
 // useImperativeHandle + the per-entry render dispatch). Lower layer in RN's
 // SectionList -> VirtualizedSectionList -> VirtualizedList stack.
 import { createElement, useImperativeHandle, useRef, } from 'react';
-import { dlog, Platform } from '@symbiote-native/engine';
+import { dlog, Platform, } from '@symbiote-native/engine';
 import { flattenSections, resolveStickySectionHeaders, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
 import { VirtualizedList, } from '../virtualized-list/index.js';
 function resolveSeparator(component) {
@@ -20,7 +20,10 @@ export function VirtualizedSectionList(props) {
     const { ref, sections, renderItem, renderSectionHeader, renderSectionFooter, SectionSeparatorComponent, 
     // Pulled out of `rest`: the user's separator is typed on ItemT, but the inner VirtualizedList
     // streams ISectionEntry<ItemT>, so we wrap it to unwrap each entry back to its ItemT.
-    ItemSeparatorComponent, keyExtractor, stickySectionHeadersEnabled, ...rest } = props;
+    ItemSeparatorComponent, keyExtractor, 
+    // Also pulled out of `rest`: the inner list streams entries, the user's callback expects
+    // sections. See entryItemLayout below.
+    getItemLayout, stickySectionHeadersEnabled, ...rest } = props;
     const { entries, headerIndices } = flattenSections(sections, SectionSeparatorComponent !== undefined);
     // RN sticks section headers by default only on iOS; Android does not unless asked. headerIndices
     // are the flat positions of every section header; VirtualizedList forwards the in-window ones.
@@ -58,10 +61,14 @@ export function VirtualizedSectionList(props) {
     const renderEntry = (info) => {
         const entry = info.item;
         if (entry.kind === 'header') {
-            return renderSectionHeader ? renderSectionHeader({ section: entry.section }) : undefined;
+            return renderSectionHeader
+                ? renderSectionHeader({ section: entry.section })
+                : undefined;
         }
         if (entry.kind === 'footer') {
-            return renderSectionFooter ? renderSectionFooter({ section: entry.section }) : undefined;
+            return renderSectionFooter
+                ? renderSectionFooter({ section: entry.section })
+                : undefined;
         }
         if (entry.kind === 'section-separator') {
             return resolveSeparator(SectionSeparatorComponent);
@@ -83,6 +90,18 @@ export function VirtualizedSectionList(props) {
             trailingItem: unwrapEntryItem(entryProps.trailingItem),
         });
     const entryKeyExtractor = (entry, index) => sectionEntryKey(entry, index, keyExtractor);
+    // Hand the callback `sections`, not the entries: RN's inner VirtualizedList gets
+    // `data={this.props.sections}` (VirtualizedSectionList.js:216) while ours streams the FLATTENED
+    // entries, so the same user code would otherwise see a different argument here than on RN.
+    //
+    // UPSTREAM-DIVERGENCE(react-native): the flat INDEX matches RN's (two rows per section, header
+    // and footer) only while SectionSeparatorComponent is unset. With it, flattenSections emits an
+    // extra 'section-separator' row per boundary that RN renders inside the neighbouring cell, so
+    // indices shift by one per boundary from the second section on. Deliberate - that row is how this
+    // adapter paints the separator; a caller combining the two must account for it.
+    const entryItemLayout = getItemLayout === undefined
+        ? undefined
+        : (_entries, index) => getItemLayout(sections, index);
     return createElement((VirtualizedList), {
         ref: listRef,
         data: entries,
@@ -90,6 +109,7 @@ export function VirtualizedSectionList(props) {
         getItemCount: () => entries.length,
         renderItem: renderEntry,
         keyExtractor: entryKeyExtractor,
+        getItemLayout: entryItemLayout,
         stickyHeaderIndices,
         ItemSeparatorComponent: entrySeparatorComponent,
         ...rest,

package/build/components.js

@@ -3,7 +3,7 @@
 // reconciler maps those to shared's mutation API, which resolves them to Fabric
 // view names at commit.
 import { createElement } from 'react';
-import { resolveAccessibilityProps, } from '@symbiote-native/components';
+import { resolveAccessibilityProps, resolveTextProps, } from '@symbiote-native/components';
 // RN's modern `id` is just a W3C-named alias for `nativeID`: View.js copies it over
 // (`processedProps.nativeID = id`), so `id` wins when both are set. We fold it here and
 // blank the alias so a raw `id` never reaches Fabric (every non-function prop passes
@@ -14,4 +14,4 @@ function resolveId({ id, ...rest }) {
     return { ...rest, nativeID: id };
 }
 export const View = props => createElement('symbiote-view', resolveAccessibilityProps(resolveId(props)));
-export const Text = props => createElement('symbiote-text', resolveAccessibilityProps(props));
+export const Text = props => createElement('symbiote-text', resolveTextProps(resolveAccessibilityProps(props)));

package/build/create-portal/index.js

@@ -10,7 +10,7 @@
 // call site (e.g. a ref to a persistent "overlay host" View near your app root) — not a second,
 // independently-mounted SymbioteSurface. Cross-surface targets aren't wired: resetAfterCommit only
 // fires for the primary root's own container, so a different surface's tree would never repaint.
-import { isSymbioteNode, SymbioteSurface } from '@symbiote-native/engine';
+import { isSymbioteNode, SymbioteSurface, } from '@symbiote-native/engine';
 import reconciler from '../host-config.js';
 export function createPortal(children, container, key) {
     if (!(container instanceof SymbioteSurface) && !isSymbioteNode(container)) {

package/build/create-tunnel/index.js

@@ -15,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // nowhere to bounce back to. `Out` lives in whichever surface should PAINT the content; `In`
 // lives anywhere - same surface or a different one - and never touches a Fabric node
 // directly, so there's no "target must already be mounted" guard to satisfy.
-import { Fragment, useEffect, useId, useSyncExternalStore } from 'react';
+import { Fragment, useEffect, useId, useSyncExternalStore, } from 'react';
 export function createTunnel() {
     const items = new Map();
     const listeners = new Set();

package/build/hooks/use-window-dimensions.js

@@ -4,7 +4,7 @@
 // subscribing to close the gap between the render-time get and the effect-time
 // listener. Only the window metrics changing triggers a re-render.
 import { useEffect, useState } from 'react';
-import { Dimensions } from '@symbiote-native/engine';
+import { Dimensions, } from '@symbiote-native/engine';
 export function useWindowDimensions() {
     const [dimensions, setDimensions] = useState(() => Dimensions.get('window'));
     useEffect(() => {

package/build/host-config.js

@@ -4,7 +4,7 @@
 // canary: a known-good driver exercising shared end to end.
 import createReconciler from 'react-reconciler';
 import { createContext } from 'react';
-import { appendChild, createElement, createRawText, insertBefore, removeChild, routeProp, setText, SymbioteSurface, } from '@symbiote-native/engine';
+import { appendChild, createElement, createRawText, insertBefore, removeChild, routeProp, setNodeHidden, setText, SymbioteSurface, } from '@symbiote-native/engine';
 import { DefaultEventPriority, DiscreteEventPriority, NoEventPriority, } from './reconciler-constants.js';
 import { toPublicInstance } from './host-instance.js';
 // Intrinsic JSX type -> Fabric component name. The name table + resolver live once in
@@ -70,7 +70,9 @@ const reconciler = createReconciler({
     getRootHostContext: () => ({ isInsideText: false }),
     getChildHostContext(parentHostContext, type) {
         const isInsideText = descriptorFor(type).isText;
-        return parentHostContext.isInsideText === isInsideText ? parentHostContext : { isInsideText };
+        return parentHostContext.isInsideText === isInsideText
+            ? parentHostContext
+            : { isInsideText };
     },
     getPublicInstance: instance => toPublicInstance(instance),
     prepareForCommit: () => null,
@@ -134,8 +136,12 @@ const reconciler = createReconciler({
     resetTextContent: () => { },
     hideTextInstance: node => setText(node, ''),
     unhideTextInstance: (node, text) => setText(node, text),
-    hideInstance: () => { },
-    unhideInstance: () => { },
+    // `Activity mode="hidden"` and a re-suspending `Suspense` both reach the tree through these.
+    // They were no-ops, so hidden content went on painting — stacked on top of whatever replaced
+    // it — and only the mount/unmount half of Activity appeared to work. The engine owns the
+    // reversible half (see setNodeHidden): the author's own style stays untouched underneath.
+    hideInstance: node => setNodeHidden(node, true),
+    unhideInstance: node => setNodeHidden(node, false),
     beforeActiveInstanceBlur: () => { },
     afterActiveInstanceBlur: () => { },
     detachDeletedInstance: () => { },
@@ -146,7 +152,9 @@ const reconciler = createReconciler({
         currentUpdatePriority = priority;
     },
     getCurrentUpdatePriority: () => currentUpdatePriority,
-    resolveUpdatePriority: () => currentUpdatePriority !== NoEventPriority ? currentUpdatePriority : DefaultEventPriority,
+    resolveUpdatePriority: () => currentUpdatePriority !== NoEventPriority
+        ? currentUpdatePriority
+        : DefaultEventPriority,
     maySuspendCommit: () => false,
     NotPendingTransition: null,
     // react's Context IS the runtime value react-reconciler's ReactContext wants

package/build/index.d.ts

@@ -7,9 +7,9 @@ export type { IImageProps, IImageSource, IImageSourceProp, IResizeMode, IImageSi
 export { ImageBackground } from './components/image-background';
 export type { IImageBackgroundProps } from './components/image-background';
 export { ScrollView } from './components/scroll-view';
-export type { IScrollViewProps, IScrollViewHandle } from './components/scroll-view';
+export type { IScrollViewProps, IScrollViewHandle, } from './components/scroll-view';
 export { TextInput } from './components/text-input';
-export type { ITextInputProps, ITextInputHandle } from './components/text-input';
+export type { ITextInputProps, ITextInputHandle, } from './components/text-input';
 export { InputAccessoryView } from './components/input-accessory-view';
 export type { IInputAccessoryViewProps } from './components/input-accessory-view';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
@@ -35,12 +35,12 @@ export type { IButtonProps } from './components/button';
 export { FlatList } from './components/flat-list';
 export type { IFlatListProps, IFlatListHandle } from './components/flat-list';
 export { SectionList } from './components/section-list';
-export type { ISectionListProps, ISectionListHandle, ISection } from './components/section-list';
+export type { ISectionListProps, ISectionListHandle, ISection, } from './components/section-list';
 export { VirtualizedSectionList } from './components/virtualized-section-list';
 export type { IVirtualizedSectionListProps, IVirtualizedSectionListHandle, } from './components/virtualized-section-list';
 export { VirtualizedList } from './components/virtualized-list';
 export type { IVirtualizedListProps, IVirtualizedListHandle, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, } from './components/virtualized-list';
-export type { IViewStyle, ITextStyle, IFlexAlign, IFlexJustify } from './utils/styles';
+export type { IViewStyle, ITextStyle, IFlexAlign, IFlexJustify, } from './utils/styles';
 export { mount, unmount } from './render';
 export { createPortal, type IPortalContainer } from './create-portal';
 export { createTunnel, type ITunnel } from './create-tunnel';
@@ -51,11 +51,11 @@ export { AppRegistry, setHostRegistrar } from './modules/app-registry';
 export type { IComponentProvider, IAppParameters, IRunnable, IHostRegistrar, IWrapperComponentProvider, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from './modules/app-registry';
 export { Animated, createAnimatedComponent } from './modules/animated';
 export { Platform, StyleSheet } from '@symbiote-native/engine';
-export { PlatformColor, DynamicColorIOS, processColor } from '@symbiote-native/engine';
+export { PlatformColor, DynamicColorIOS, processColor, } from '@symbiote-native/engine';
 export type { IColorValue, IOpaqueColorValue, IDynamicColorIOSTuple, } from '@symbiote-native/engine';
 export { setNativeViewConfigSource, setColorProcessor, setDeviceEventSource, } from '@symbiote-native/engine';
 export { dlog, isDebug } from '@symbiote-native/engine';
-export type { INativeViewConfig, INativeViewConfigSource } from '@symbiote-native/engine';
+export type { INativeViewConfig, INativeViewConfigSource, } from '@symbiote-native/engine';
 export type { IPlatformStatic, IPlatformOSType, IPlatformConstantsIOS, IPlatformConstantsAndroid, IPlatformSelectSpec, } from '@symbiote-native/engine';
 export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, LayoutAnimation, PixelRatio, } from '@symbiote-native/engine';
 export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, IPixelRatioStatic, } from '@symbiote-native/engine';
@@ -69,5 +69,5 @@ export { InteractionManager } from '@symbiote-native/engine';
 export type { IInteractionEvent, ISimpleTask, IPromiseTask, ITask, IHandle, } from '@symbiote-native/engine';
 export { TouchableNativeFeedback } from './components/touchable-native-feedback';
 export type { ITouchableNativeFeedbackProps, INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from './components/touchable-native-feedback';
-export type { ISymbioteEvent, ISymbioteNode, IRootTag } from '@symbiote-native/engine';
+export type { ISymbioteEvent, ISymbioteNode, IRootTag, } from '@symbiote-native/engine';
 export type { ICellLayout, ISeparatorProps, ISeparators, IModalOrientationChangeEvent, IPressableAndroidRippleConfig, IEnterKeyHint, IInputMode, ISubmitBehavior, ITextInputSelection, IImageStatics, } from '@symbiote-native/components';

package/build/index.js

@@ -49,7 +49,7 @@ export { Platform, StyleSheet } from '@symbiote-native/engine';
 // Color utilities: PlatformColor / DynamicColorIOS build opaque platform colors;
 // processColor runs a color through the injected platform processor. All pure /
 // seam-backed, so they live in shared and the adapter re-exports them.
-export { PlatformColor, DynamicColorIOS, processColor } from '@symbiote-native/engine';
+export { PlatformColor, DynamicColorIOS, processColor, } from '@symbiote-native/engine';
 // The three app-entry seams, wired once on a real host, so the barrel exposes them together.
 // setNativeViewConfigSource hands the engine RN's ViewConfig registry, which is how third-party
 // Fabric views auto-derive their metadata:

package/build/modules/animated/create-animated-component.js

@@ -74,7 +74,9 @@ export function createAnimatedComponent(Component) {
         const passthroughStyle = readPassthroughStyle(passthrough);
         if (passthroughStyle !== undefined) {
             reduced.style =
-                reduced.style === undefined ? passthroughStyle : [reduced.style, passthroughStyle];
+                reduced.style === undefined
+                    ? passthroughStyle
+                    : [reduced.style, passthroughStyle];
         }
         const childProps = Object.assign(Object.create(null), reduced, { ref: captureRef });
         return createElement(Component, childProps);

package/build/modules/animated/index.d.ts

@@ -1,7 +1,7 @@
 import { AnimatedValue, AnimatedValueXY, AnimatedColor, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent } from '@symbiote-native/engine';
 import { createAnimatedComponent } from './create-animated-component';
 export { createAnimatedComponent } from './create-animated-component';
-export { AnimatedProps, AnimatedStyle, AnimatedTransform } from '@symbiote-native/engine';
+export { AnimatedProps, AnimatedStyle, AnimatedTransform, } from '@symbiote-native/engine';
 export declare const Animated: {
     Value: typeof AnimatedValue;
     ValueXY: typeof AnimatedValueXY;