@symbiote-native/solid 1.0.0 → 3.0.0

package/build/components/{scroll-view/shared.d.ts → scroll-view-props.d.ts}

@@ -1,14 +1,11 @@
-import { type Ref } from 'solid-js';
-import type { JSX } from '../../jsx-runtime';
-import { type IAccessibilityProps, type IAriaProps, type IScrollViewHandle } from '@symbiote-native/components';
-import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
-import { type IStickyHeaderComponentType } from './sticky-header';
+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 { IHostInstance } from '../host-instance';
 export type { IScrollViewHandle } from '@symbiote-native/components';
-export type { IStickyHeaderComponentType, IStickyHeaderComponentProps, } from './sticky-header';
 type IScrollHandler = (event: ISymbioteEvent) => void;
-export type IScrollViewHostPlatform = {
-    refreshControlMode: 'sibling' | 'wrap';
-};
 export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     style?: IStyleProp<IViewStyle>;
     class?: IClassNameValue;
@@ -31,7 +28,6 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
         x: number;
         y: number;
     };
-    refreshControl?: JSX.Element;
     removeClippedSubviews?: boolean;
     onContentSizeChange?: (width: number, height: number) => void;
     snapToInterval?: number;
@@ -42,7 +38,6 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     disableIntervalMomentum?: boolean;
     stickyHeaderIndices?: number[];
     invertStickyHeaders?: boolean;
-    StickyHeaderComponent?: IStickyHeaderComponentType;
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     maintainVisibleContentPosition?: {
@@ -79,7 +74,6 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     onMomentumScrollBegin?: IScrollHandler;
     onMomentumScrollEnd?: IScrollHandler;
     onScrollToTop?: IScrollHandler;
-    ref?: Ref<IScrollViewHandle>;
+    ref?: Ref<IHostInstance>;
     children?: JSX.Element;
 }
-export declare function createScrollView(platform: IScrollViewHostPlatform): (props: IScrollViewProps) => JSX.Element;

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

@@ -0,0 +1,29 @@
+// `<scroll-view>` / `<horizontal-scroll-view>`'s prop surface, for Solid. No component left to
+// type — the tag IS the element, and the engine owns everything the wrapper used to assemble:
+// `buildStructure` builds the content node, `slotProps` carries `contentContainerStyle` onto it,
+// `claimedChildren` places a `<refresh-control>` child (a sibling on iOS, an inverting wrap on
+// Android), and the sticky seam lives in `core/components/src/behaviors/scroll-view/`.
+// `../register` names it.
+//
+// `stickyHeaderIndices` works on a bare tag — the behavior walks the COMMITTED children rather
+// than pulling "child at index N" out of a render function, so it needs no wrapper at all. The
+// `sticky-header` TAG is the other spelling, better for markup you control directly since it pins
+// by document order and no index has to stay in step with the children.
+//
+// TWO PROPS ARE NOT WHAT THEY LOOK LIKE:
+//
+//   horizontal            DELETED from the payload and rewritten from the TAG (`ownerFold`,
+//                         behaviors/scroll-view/shared.ts). Horizontal scroll is a separate native
+//                         ViewManager on Android, so the axis is the tag; a prop contradicting it
+//                         is dropped with a dlog. Typed here for parity and for a ported app.
+//   nestedScrollEnabled   defaults to `true` in the behavior, on both platforms, which every
+//                         wrapper used to write by hand.
+//
+// NO `refreshControl` PROP, deliberately — write a `<refresh-control>` CHILD instead; the
+// behavior claims it and places it per platform. Nothing reads a prop by that name, so typing one
+// would compile and paint nothing; leaving it out fails loudly at `tsc` with this comment beside
+// it, same as React's and Vue's barrels.
+//
+// `children` is a Solid `JSX.Element`, so this type is per-adapter by construction
+// (<prop_types_split_agnostic_vs_per_adapter>).
+export {};

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

@@ -0,0 +1,6 @@
+import type { ISwitchProps as ISwitchBaseProps } from '@symbiote-native/components';
+import type { IClassNameValue } from '@symbiote-native/engine';
+export type { ISwitchTrackColor, ISwitchChangeEvent, } from '@symbiote-native/components';
+export type ISwitchProps = ISwitchBaseProps & {
+    class?: IClassNameValue;
+};

package/build/components/switch-props.js

@@ -0,0 +1,5 @@
+// The `<switch>` tag's prop surface. The controlled handshake the wrapper used to run — the
+// lastNativeReport mirror, the snap-back command when the parent rejects a toggle, the platform
+// track-colour mapping — is the tag's own behavior now (`registerSwitchBehavior`, wired by
+// `../register`), which is also where the iOS/Android command-name split lives.
+export {};

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

@@ -0,0 +1,8 @@
+import type { 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>;
+};

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

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

package/build/components/{text.d.ts → text-props.d.ts}

@@ -1,6 +1,6 @@
-import { type Ref } from 'solid-js';
+import type { Ref } from 'solid-js';
 import type { JSX } from '../jsx-runtime';
-import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { IAccessibilityProps, IAriaProps } 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 {
@@ -15,6 +15,7 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     numberOfLines?: number;
     ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
     selectable?: boolean;
+    disabled?: boolean;
     adjustsFontSizeToFit?: boolean;
     minimumFontScale?: number;
     allowFontScaling?: boolean;
@@ -23,4 +24,3 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     ref?: Ref<IHostInstance>;
     children?: JSX.Element;
 }
-export declare function Text(props: ITextProps): JSX.Element;

package/build/components/text-props.js

@@ -0,0 +1,11 @@
+// The `<text>` tag's prop surface. Same story as `./view-props.ts` — the wrapper forwarded a bag
+// and its two folds live below the adapter now, with one addition: RN's `Text` DEFAULTS
+// (`ellipsizeMode`, `allowFontScaling`) are seeded by the renderer at `createElement` and re-seeded
+// on a patch that clears them, so a bare tag carries them exactly as the component did.
+//
+// THE NESTING (`RCTText` vs `RCTVirtualText`) was never this file's job and still is not. React
+// Native tracks a TextAncestor context so a Text inside another Text renders as a virtual span;
+// here the engine's commit walk carries `hasTextAncestor` down and picks the view name itself
+// (`viewNameFor`, core/engine/src/commit.ts), re-creating the node when the kind flips. Every
+// adapter emits the same flat `text` and the engine resolves it for all of them.
+export {};

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

@@ -0,0 +1,9 @@
+import type { INativeFeedbackBackground } from '@symbiote-native/components';
+import type { JSX } from '../../jsx-runtime';
+import type { IPressableProps } from '../pressable-props';
+export interface ITouchableNativeFeedbackProps extends Omit<IPressableProps, 'style' | 'children'> {
+    background?: INativeFeedbackBackground;
+    useForeground?: boolean;
+    children?: JSX.Element;
+    touchSoundDisabled?: boolean;
+}

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

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

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

@@ -0,0 +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 { 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 {
+    activeOpacity?: number;
+}
+export interface ITouchableHighlightProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+    underlayColor?: string;
+    touchSoundDisabled?: boolean;
+    testOnly_pressed?: boolean;
+    onShowUnderlay?: () => void;
+    onHideUnderlay?: () => void;
+}

package/build/components/touchable-props.js

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

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

@@ -0,0 +1,7 @@
+import type { IPressTimingProps } from '@symbiote-native/components';
+import type { JSX } from '../../jsx-runtime';
+import type { IPressableProps } from '../pressable-props';
+export interface ITouchableWithoutFeedbackProps extends Omit<IPressableProps, 'style' | 'children'>, IPressTimingProps {
+    children?: JSX.Element;
+    touchSoundDisabled?: boolean;
+}

package/build/components/touchable-without-feedback/touchable-without-feedback-props.js

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

package/build/components/{view.d.ts → view-props.d.ts}

@@ -1,6 +1,6 @@
-import { type Ref } from 'solid-js';
+import type { Ref } from 'solid-js';
 import type { JSX } from '../jsx-runtime';
-import { type IAccessibilityProps, type IAriaProps, type IResponderProps } from '@symbiote-native/components';
+import type { IAccessibilityProps, IAriaProps, IResponderProps } from '@symbiote-native/components';
 import type { IClassNameValue, IStyleProp, ISymbioteEvent, IViewStyle } from '@symbiote-native/engine';
 import type { IHostInstance } from '../host-instance';
 export interface IViewProps extends IAccessibilityProps, IAriaProps, IResponderProps {
@@ -29,4 +29,3 @@ export interface IViewProps extends IAccessibilityProps, IAriaProps, IResponderP
     ref?: Ref<IHostInstance>;
     children?: JSX.Element;
 }
-export declare function View(props: IViewProps): JSX.Element;

package/build/components/view-props.js

@@ -0,0 +1,11 @@
+// The `<view>` tag's prop surface. The wrapper is gone: it forwarded a bag onto one host element
+// and did two folds, both of which now run below the adapter — `id -> nativeID` in the renderer's
+// `foldAliasKey` (which covers `createElement` and every later prop write, not just the wrapper's
+// one path) and the aria/role fold in the engine's `fabricProps`.
+//
+// ONE THING THE WRAPPER DID IS NOT INHERITED, and a consumer that builds a whole bag has to do it
+// itself: `withStableKeys`. Solid's `spread` walks only the CURRENT key set and has no removal
+// pass, so a key that stops being emitted keeps its last value on the native view forever
+// (`.claude/rules/solid-descriptor-bridge.md` §1). A bag whose keys are all statically present —
+// an ordinary attribute list, a `splitProps` rest proxy — is unaffected.
+export {};

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

@@ -2,8 +2,9 @@
 // cannot sit beside the content the way iOS allows ("addViewAt: failed to insert view … at index 1").
 // Instead the RefreshControl (AndroidSwipeRefreshLayout) WRAPS the scroll host, which nests inside it
 // so the inner scroll takes the gesture before the refresh parent — RN's own ScrollView.js android
-// branch. Metro picks this file on an Android host; no Platform.OS read.
+// branch, decided by the `<scroll-view>` tag's own engine behavior registered for this platform
+// (`core/components/src/behaviors/scroll-view/index.android.ts`). Metro picks this file on an
+// Android host; no Platform.OS read. iOS and Android share one `createVirtualizedList` now — nothing
+// here differs per platform any more except which file Metro resolves.
 import { createVirtualizedList } from './shared.jsx';
-export const VirtualizedList = createVirtualizedList({
-    refreshControlMode: 'wrap',
-});
+export const VirtualizedList = createVirtualizedList();

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

@@ -1,9 +1,9 @@
 // VirtualizedList on iOS. The RefreshControl (PullToRefreshView) is a CHILD of the scroll host,
 // rendered as a childless SIBLING BEFORE the content container — RN ScrollView.js's
-// `{refreshControl}{contentContainer}`, the same fact this adapter's ScrollView and adapters/react's,
-// adapters/vue's and adapters/svelte's iOS bindings encode. Metro picks this file on an iOS host; no
-// Platform.OS read.
+// `{refreshControl}{contentContainer}`, decided by the `<scroll-view>` tag's own engine behavior
+// registered for this platform (`core/components/src/behaviors/scroll-view/index.ios.ts`), the same
+// one every other adapter's iOS binding registers. Metro picks this file on an iOS host; no
+// Platform.OS read. iOS and Android share one `createVirtualizedList` now — nothing here differs
+// per platform any more except which file Metro resolves.
 import { createVirtualizedList } from './shared.jsx';
-export const VirtualizedList = createVirtualizedList({
-    refreshControlMode: 'sibling',
-});
+export const VirtualizedList = createVirtualizedList();

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

@@ -2,8 +2,6 @@ import { type Accessor, type Ref } from 'solid-js';
 import type { JSX } from '../../jsx-runtime';
 import { type IAccessibilityProps, type IAriaProps, type ICellLayout, type IViewabilityConfig, type IViewabilityConfigCallbackPair, type IViewableItemsChangedInfo, type ISeparatorProps, type ISeparators, type IViewToken, type IVirtualizedListHandle } from '@symbiote-native/components';
 import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
-import type { IScrollViewHostPlatform } from '../scroll-view/shared';
-export type { IScrollViewHostPlatform };
 export type { ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, IVirtualizedListHandle, };
 export interface IVirtualizedListCellInfo<ItemT> {
     item: ItemT;
@@ -72,4 +70,4 @@ export interface IVirtualizedListProps<ItemT> extends IAccessibilityProps, IAria
     }) => void;
 }
 export type IVirtualizedListComponent = <ItemT>(props: IVirtualizedListProps<ItemT>) => JSX.Element;
-export declare function createVirtualizedList(platform: IScrollViewHostPlatform): IVirtualizedListComponent;
+export declare function createVirtualizedList(): IVirtualizedListComponent;

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

@@ -1,25 +1,43 @@
-// VirtualizedList — real windowing over a hand-authored scroll host. Only the cells whose computed
-// offset falls inside the visible window (plus a leading/trailing buffer) exist as native views;
-// everything above and below collapses into spacers whose sizes sum to the off-screen extent, so the
-// scroll thumb and total content size stay right without mounting all N rows.
+// VirtualizedList — real windowing over the `<scroll-view>` tag's own engine-owned scroll host.
+// Only the cells whose computed offset falls inside the visible window (plus a leading/trailing
+// buffer) exist as native views; everything above and below collapses into spacers whose sizes sum
+// to the off-screen extent, so the scroll thumb and total content size stay right without mounting
+// all N rows.
 //
 // The orchestration — window recompute, edge-reached, viewability, batch fill, MVCP, the imperative
 // scrolls — is the framework-agnostic `reduceList` state machine in @symbiote-native/components,
 // shared verbatim with React, Vue, Svelte and Angular. So is every geometry leaf (`buildListPlan`,
 // `computeWindow`, `resolveItemKey`, …) and every scroll-host helper ScrollView also uses
-// (`selectScrollIntrinsics`, `resolveScrollForwarding`, `splitLayoutProps`, `buildScrollViewHandle`,
+// (`selectScrollIntrinsics`, `resolveScrollForwarding`, `buildScrollViewHandle`,
 // `attachStickyScroll`, `forwardScrollEvent`). Solid supplies ONLY its lifecycle: it turns native
 // events into ACTIONS, holds ONE plain state cell, runs the returned EFFECTS with Solid primitives,
 // and assembles the host elements. Lists have no Descriptor render fn — the cell content is the
 // user's own subtree (`symbiote-add-component` §0, category 2).
 //
-// WHY THIS FILE HAND-AUTHORS THE SCROLL INTRINSICS INSTEAD OF RENDERING <ScrollView>, which is what
-// adapters/react and adapters/vue do. ScrollView takes an OPAQUE children slot, so its sticky path
-// has to resolve those children through solid's `children()` helper and re-wrap the whole list every
-// time any of them changes — and here "any of them changes" is every scroll event, which would tear
-// down and rebuild every sticky header mid-scroll (losing its measured layout each time). Walking
-// `plan.cells` instead lets this file wrap the flagged CELL itself, once, inside the keyed <For> row
-// that owns it. Same conclusion, same reason, as adapters/svelte's index.svelte.
+// SINCE 2026-09-11 THIS FILE NO LONGER BUILDS THE CONTENT NODE ITSELF. `registerScrollViewBehavior()`
+// makes the tag's own `buildStructure` do that (the same content node ScrollView's bare tag gets
+// anywhere else), and this file reads it back off `scroll.childHost` rather than constructing a
+// second one — building one here too would nest a content view inside the behavior's own
+// (`core/components/src/behaviors/scroll-view/shared.ts`'s header names this precondition). The
+// RefreshControl placement (a sibling on iOS, an inverting wrap on Android) moved the same way: it is
+// an ordinary child now, and the behavior's `claimedChildren` decides where it lands.
+//
+// WHY THIS FILE STILL HAND-AUTHORS THE SCROLL TAG VIA `createElement` INSTEAD OF PLAIN JSX
+// (`<scroll-view>{listBody}</scroll-view>`), unlike a component with no dynamic children. Solid's
+// own `insert()` reconciles a parent's children by walking that SAME node's `getFirstChild`/
+// `getNextSibling` — which read `node.children` directly and know nothing about `childHost`
+// redirection. Calling `insert` on the SCROLL node itself would have it diff against the scroll
+// node's own (single) child rather than the content node's list items. So this file keeps an
+// explicit reference to the content node and calls `insert(content, listBody)` on THAT, exactly the
+// node Solid's own diffing needs to see.
+//
+// WHY THE SCROLL CELLS ARE WALKED FOR STICKY HEADERS RATHER THAN LEFT TO THE ENGINE'S GENERIC
+// `stickyHeaderIndices` WALK OF COMMITTED CHILDREN (what a bare `<scroll-view>` gets for free
+// elsewhere): the flagged CELL here needs wrapping ONCE, inside the keyed <For> row that owns it, or
+// every scroll event would tear the wrapper down and rebuild it (losing its measured layout each
+// time) the moment a naive re-render tried to resolve which child is sticky. Same conclusion, same
+// reason, as adapters/svelte's index.svelte. This is independent of the content-node question above
+// — it is about the LIST's own cells, not about how the scroll host itself is built.
 //
 // THREE SOLID FACTS DRIVE THE REST, and none of them is cosmetic (.claude/rules/
 // solid-descriptor-bridge.md):
@@ -35,18 +53,12 @@
 // 3. The scroll AXIS picks a different host TAG and Solid cannot swap a tag under a live node — so
 //    the flip is an explicit rebuild boundary (trap 5), with the build untracked so every other prop
 //    re-props the SAME nodes through `spread`.
-//
-// The ONE thing that differs per platform is where the RefreshControl sits: a childless SIBLING
-// before the content on iOS, WRAPPING the whole scroll host on Android (an Android ScrollView takes
-// exactly one child). That is `IScrollViewHostPlatform.refreshControlMode`, the same fact this
-// adapter's ScrollView encodes, so the two platform barrels feed it in.
-import { For, Show, createEffect, createMemo, createRenderEffect, createSignal, on, onCleanup, splitProps, untrack, } from 'solid-js';
-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, NO_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, nextStickyHeaderY, isSeparatorGapInRange, listEffectSignature, attachStickyScroll, forwardScrollEvent, resolveAccessibilityProps, resolveScrollForwarding, splitLayoutProps, selectScrollIntrinsics, createInitialListState, readLayoutLength, readLayoutOffset, readLayoutNumber, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
+import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, splitProps, untrack, } from 'solid-js';
+import { DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, NO_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, nextStickyHeaderY, isSeparatorGapInRange, listEffectSignature, attachStickyScroll, forwardScrollEvent, resolveAccessibilityProps, resolveScrollForwarding, selectScrollIntrinsics, createInitialListState, readLayoutLength, readLayoutOffset, readLayoutNumber, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
 import { AnimatedValue, dlog, event as animatedEvent, getNativeTag, isNativeAnimatedAvailable, isSymbioteNode, whenCommitted, resolveClassName, } from '@symbiote-native/engine';
-import { createElement, insert, insertNode, setProp, spread, } from '../../renderer.js';
+import { createElement, insert, insertNode, spread } from '../../renderer.js';
 import { withStableKeys } from '../../utils/stable-keys.js';
-import { RefreshControl } from '../refresh-control.jsx';
-import { ScrollViewStickyHeader } from '../scroll-view/sticky-header.jsx';
+import { ScrollViewStickyHeader } from './sticky-header.jsx';
 // Consumed by the lifecycle itself; everything LEFT OVER is the accessibility surface, which rides
 // down onto the scroll host exactly as React spreads `...accessibilityRest` onto its ScrollView.
 const HANDLED_PROPS = [
@@ -97,7 +109,11 @@ const HANDLED_PROPS = [
 // A ListHeaderComponent occupies child 0 of the content container, which shifts every data index
 // native MVCP anchors against by one (RN VirtualizedList.js does the same bump).
 const HEADER_CHILD_COUNT = 1;
-export function createVirtualizedList(platform) {
+// No platform parameter any more: the RefreshControl placement per platform (a sibling on iOS, an
+// inverting wrap on Android) is entirely the tag's own engine behavior's concern now
+// (`core/components/src/behaviors/scroll-view/index.{ios,android}.ts`) — this factory used to take
+// an `IScrollViewHostPlatform` only to re-decide the same thing by hand.
+export function createVirtualizedList() {
     return function VirtualizedList(props) {
         // The ONE folded state cell (RN's scattered refs collapsed into IListState). A plain object, never
         // a signal: nothing reads it reactively.
@@ -174,8 +190,8 @@ export function createVirtualizedList(platform) {
                 maxToRenderPerBatch: props.maxToRenderPerBatch ?? DEFAULT_MAX_TO_RENDER_PER_BATCH,
                 updateCellsBatchingPeriod: props.updateCellsBatchingPeriod ??
                     DEFAULT_UPDATE_CELLS_BATCHING_PERIOD,
-                onEndReachedThreshold: props.onEndReachedThreshold ?? DEFAULT_END_REACHED_THRESHOLD,
-                onStartReachedThreshold: props.onStartReachedThreshold ?? DEFAULT_START_REACHED_THRESHOLD,
+                onEndReachedThreshold: props.onEndReachedThreshold,
+                onStartReachedThreshold: props.onStartReachedThreshold,
                 maintainVisibleContentPosition: props.maintainVisibleContentPosition,
                 initialScrollIndex: props.initialScrollIndex,
                 onEndReachedActive: props.onEndReached !== undefined,
@@ -226,8 +242,12 @@ export function createVirtualizedList(platform) {
                         // lastViewable is folded back only when the fire actually LANDS, so a debounce superseded
                         // mid-flight still diffs against the last committed set.
                         const fire = () => {
-                            for (const pair of pairs)
-                                pair.onViewableItemsChanged(info);
+                            for (const pair of pairs) {
+                                pair.onViewableItemsChanged({
+                                    ...info,
+                                    viewabilityConfig: pair.viewabilityConfig,
+                                });
+                            }
                             dispatch({ kind: 'viewable-fired', map });
                         };
                         if (viewableTimer !== null) {
@@ -542,13 +562,13 @@ export function createVirtualizedList(platform) {
             // 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.
             const separator = (<Show when={hasSeparatorAfter(index())}>
-          <symbiote-view>{separatorElement(index())}</symbiote-view>
+          <view>{separatorElement(index())}</view>
         </Show>);
             if (!sticky) {
-                return (<symbiote-view onLayout={makeCellMeasure(index)} style={invertedStyle()}>
+                return (<view onLayout={makeCellMeasure(index)} style={invertedStyle()}>
             {content}
             {separator}
-          </symbiote-view>);
+          </view>);
             }
             // The sticky wrapper measures the cell itself, so it REPLACES the plain measuring view rather
             // than nesting inside it. Every reactive input is written as a CALL, which makes the compiler
@@ -575,7 +595,7 @@ export function createVirtualizedList(platform) {
                 cell,
                 // The gap between the force-mounted sticky cell and the window's first cell.
                 <Show when={forcedStickyIndex() === index() && gapExtent() > EMPTY_OFFSET}>
-          <symbiote-view style={spacerStyle(gapExtent())}/>
+          <view style={spacerStyle(gapExtent())}/>
         </Show>,
             ];
         }
@@ -588,33 +608,30 @@ export function createVirtualizedList(platform) {
             return typeof style === 'string' ? resolveClassName(style) : style;
         };
         const intrinsics = createMemo(() => selectScrollIntrinsics(isHorizontal(), contentContainerStyleInput()));
-        const wrapsRefreshControl = () => platform.refreshControlMode === 'wrap' && props.onRefresh !== undefined;
-        // Under the Android wrap the class has to be resolved BEFORE the layout/visual split, or a
-        // class-only layout prop (flex, height, gap, …) never reaches the wrapper and it collapses to
-        // nothing. Same reasoning as ScrollView's.
-        const splitStyles = createMemo(() => splitLayoutProps([
-            resolveClassName(props.class),
-            props.style,
-            invertedStyle(),
-        ]));
+        // The composed content style RN's ScrollView carries: the app's contentContainerStyle plus the
+        // one thing only THIS list knows — the total content extent along the scroll axis, which pins
+        // the content to its measured width so a horizontal row has something to scroll (RN's own
+        // ScrollView never needs this; it never virtualizes). The behavior's own `contentFold` appends
+        // the row-direction style on top of whatever this resolves to (`core/components/src/behaviors/
+        // scroll-view/shared.ts`), same composition `intrinsics().contentStyle` used to build by hand.
+        const contentContainerStyleForContent = () => isHorizontal()
+            ? [contentContainerStyleInput(), { width: metrics().total }]
+            : contentContainerStyleInput();
         // withStableKeys because several keys below are conditional and Solid's `spread` walks only the
         // CURRENT key set with no removal pass — a key that vanished would keep its last value on the
         // native view forever (.claude/rules/solid-descriptor-bridge.md §1).
+        //
+        // No `wrapsRefreshControl`/`splitStyles`/base-style composition here any more: the tag's own
+        // engine behavior owns the content node, the base-style-under-the-app's-style composition, the
+        // Android-wrap style split (`splitScrollViewStyle`, read off exactly the `style` written below),
+        // `nestedScrollEnabled`'s default and the `horizontal` axis fold — this file only supplies what
+        // the behavior cannot know (the windowing metrics).
         const outerBag = withStableKeys(() => {
             const bag = {
                 ...resolveAccessibilityProps(accessibilityRest),
-                // Base style UNDER the user style, so an explicit height / flexDirection still wins. Under
-                // the Android wrap only the VISUAL half stays here; the LAYOUT half moved to the wrapper.
-                style: wrapsRefreshControl()
-                    ? [intrinsics().scrollViewBaseStyle, splitStyles().inner]
-                    : [intrinsics().scrollViewBaseStyle, props.style, invertedStyle()],
-                // Load-bearing on iOS (it flips RCTScrollView's own axis); ignored by Android's dedicated
-                // horizontal manager.
-                horizontal: isHorizontal(),
-                // RN's ScrollView default (`nestedScrollEnabled ?? true`): Android needs it for a list nested
-                // inside another scrollable to scroll at all, and the Android RefreshControl wrap needs the
-                // inner scroll to take the gesture before the refresh parent.
-                nestedScrollEnabled: true,
+                style: [props.style, invertedStyle()],
+                class: props.class,
+                contentContainerStyle: contentContainerStyleForContent(),
                 onLayout: onViewportLayout,
                 onScroll: scrollHandler(),
             };
@@ -622,10 +639,6 @@ export function createVirtualizedList(platform) {
             // JS-fallback), without which a header rebuilt off too-sparse scroll events pins late.
             if (forwarding().scrollEventThrottle !== undefined)
                 bag.scrollEventThrottle = forwarding().scrollEventThrottle;
-            // Stripped under the wrap: splitStyles already folded the resolved class into outer/inner, so
-            // forwarding it raw too would re-apply its LAYOUT half a second time.
-            if (!wrapsRefreshControl())
-                bag.class = props.class;
             if (props.onScrollBeginDrag !== undefined)
                 bag.onScrollBeginDrag = props.onScrollBeginDrag;
             if (props.onScrollEndDrag !== undefined)
@@ -654,24 +667,6 @@ export function createVirtualizedList(platform) {
             }
             return bag;
         });
-        // `collapsable: false` keeps the content container a real Yoga node: Android Fabric would otherwise
-        // flatten it away and hoist the cells up as DIRECT children of the scroll view, which hosts exactly
-        // one. A horizontal list also pins the container to the full content WIDTH, or the row is stretched
-        // to the viewport and there is nothing to scroll.
-        const contentBag = withStableKeys(() => {
-            const bag = {
-                style: isHorizontal()
-                    ? [intrinsics().contentStyle, { width: metrics().total }]
-                    : intrinsics().contentStyle,
-                collapsable: false,
-            };
-            // maintainVisibleContentPosition anchors against the metrics of MOUNTED cell views, and Android
-            // Fabric flattens layout-only cells away — so the native helper would have nothing to anchor to
-            // and the list jumps on prepend. RN keeps the cells real the same way. iOS never flattens.
-            if (props.maintainVisibleContentPosition !== undefined)
-                bag.collapsableChildren = false;
-            return bag;
-        });
         // Every reactive read below sits inside a <Show>/<For> prop getter, so this accessor itself has no
         // dependencies and the content view's `insert` effect runs exactly ONCE. Moving one of those
         // conditions into a plain helper called from here would put it in that effect's dependency set and
@@ -679,23 +674,23 @@ export function createVirtualizedList(platform) {
         function listBody() {
             return [
                 <Show when={headerElement !== undefined}>
-          <symbiote-view>{headerElement}</symbiote-view>
+          <view>{headerElement}</view>
         </Show>,
                 <Show when={isEmpty()} fallback={<>
               <Show when={leadingExtent() > EMPTY_OFFSET}>
-                <symbiote-view style={spacerStyle(leadingExtent())}/>
+                <view style={spacerStyle(leadingExtent())}/>
               </Show>
               <For each={cellKeys()}>{buildRow}</For>
               <Show when={trailingExtent() > EMPTY_OFFSET}>
-                <symbiote-view style={spacerStyle(trailingExtent())}/>
+                <view style={spacerStyle(trailingExtent())}/>
               </Show>
             </>}>
           <Show when={emptyElement !== undefined}>
-            <symbiote-view>{emptyElement}</symbiote-view>
+            <view>{emptyElement}</view>
           </Show>
         </Show>,
                 <Show when={footerElement !== undefined}>
-          <symbiote-view>{footerElement}</symbiote-view>
+          <view>{footerElement}</view>
         </Show>,
             ];
         }
@@ -714,38 +709,36 @@ export function createVirtualizedList(platform) {
             if (onRefresh === undefined)
                 return undefined;
             dlog('VirtualizedList wiring RefreshControl (onRefresh provided)');
-            const element = (<RefreshControl refreshing={props.refreshing ?? false} onRefresh={onRefresh} progressViewOffset={props.progressViewOffset}/>);
+            const element = (<refresh-control refreshing={props.refreshing ?? false} onRefresh={onRefresh} progressViewOffset={props.progressViewOffset}/>);
             return isSymbioteNode(element) ? element : undefined;
         }
-        // The nested scroll-view / content-view pair RN's ScrollView commits.
+        // The scroll host, wired to the ENGINE-OWNED content node rather than a hand-built one. Once
+        // `registerScrollViewBehavior()` is live, `createElement(scrollViewIntrinsic)` already ran the
+        // behavior's `buildStructure` and appended its own content child as `childHost` — building a
+        // second one here would nest `RCTScrollContentView > RCTScrollContentView`
+        // (`core/components/src/behaviors/scroll-view/shared.ts`'s own header names this precondition).
         function buildTree() {
-            const { scrollViewIntrinsic, contentIntrinsic } = intrinsics();
+            const { scrollViewIntrinsic } = intrinsics();
             dlog(`VirtualizedList -> ${scrollViewIntrinsic}`);
-            const content = hostElement(contentIntrinsic);
-            spread(content, contentBag, true);
-            insert(content, listBody);
             const scroll = hostElement(scrollViewIntrinsic);
             hostNode = scroll;
             spread(scroll, outerBag, true);
-            // iOS: the RefreshControl is a childless SIBLING placed BEFORE the content container (RN
-            // ScrollView.js: {refreshControl}{contentContainer}).
+            const content = scroll.childHost;
+            if (content === undefined)
+                throw new Error(`VirtualizedList: ${scrollViewIntrinsic} built no content node — is ` +
+                    'registerScrollViewBehavior() wired?');
+            insert(content, listBody);
+            // An ordinary child on both platforms now, not a hand-branched sibling/wrap: the behavior's
+            // own `claimedChildren` places it (a sibling of the content view on iOS, an inverting wrap on
+            // Android) and puts it BEFORE the content view regardless of insertion order.
             const refresh = buildRefreshControl();
-            if (refresh !== undefined && platform.refreshControlMode === 'sibling') {
+            if (refresh !== undefined)
                 insertNode(scroll, refresh);
-            }
-            insertNode(scroll, content);
-            if (refresh === undefined || !wrapsRefreshControl())
-                return scroll;
-            // Android: the RefreshControl WRAPS the scroll host. React does this with cloneElement and Vue
-            // by re-invoking the VNode's type; Solid has neither, because the element arrived already
-            // built — so the scroll host is nested into the existing node and the outer (layout) half of
-            // the style is written onto it. A render effect, not a one-shot set, so a later style change
-            // still moves.
-            createRenderEffect(() => {
-                setProp(refresh, 'style', splitStyles().outer);
-            });
-            insertNode(refresh, scroll);
-            return refresh;
+            // A wrap claim re-parents `scroll` under the RefreshControl and records it as `scroll.wrapper`
+            // (`core/engine/src/node.ts`'s `placedNode`) — the wrapper, not `scroll`, is what actually
+            // occupies this subtree's place once claimed, so returning `scroll` on Android would hand back
+            // a node that is no longer the tree's root.
+            return scroll.wrapper ?? scroll;
         }
         // Drive the sticky scroll value on the native UI thread (RN's attachNativeEvent) so the header
         // interpolations ride scroll natively with no JS per frame. `tree()` is read for its dependency:

package/build/components/virtualized-list/sticky-header.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from '../../jsx-runtime';
+import { type IStickyHeaderProps } from '@symbiote-native/components';
+export type IStickyHeaderComponentProps = IStickyHeaderProps & {
+    children?: JSX.Element;
+};
+export declare function ScrollViewStickyHeader(props: IStickyHeaderComponentProps): JSX.Element;