@symbiote-native/solid 1.0.0 → 2.0.0

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_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, 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.
@@ -542,13 +558,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 +591,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 +604,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 +635,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 +663,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 +670,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 +705,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;

package/build/components/{scroll-view → virtualized-list}/sticky-header.jsx

@@ -1,6 +1,16 @@
 // Sticky headers — the Solid lifecycle half of the JS layer RN implements in ScrollView.js /
 // ScrollViewStickyHeader.js.
 //
+// PRIVATE TO VIRTUALIZED-LIST since 2026-09-11. It used to live under `../scroll-view` and back
+// that component's `stickyHeaderIndices` too; the tag `<scroll-view>` now honors that prop through
+// the engine's own `sticky-header` intrinsic (`core/components/src/behaviors/scroll-view/sticky.ts`)
+// with no adapter code at all — see that primitive's props header. VirtualizedList still needs its
+// OWN implementation because it hand-builds its scroll host (`shared.tsx`'s own header explains
+// why) rather than emitting the tag, so it wraps a flagged CELL itself instead of leaning on the
+// engine's per-child walk. `wrapStickyHeaders`/`IStickyWrapInputs` — the generic child-array wrapper
+// ScrollView used and this file never called — were dropped with the move; `virtualized-list/
+// shared.tsx` wraps the cell it already owns directly.
+//
 // RN does stickiness PURELY IN JS: ScrollView wraps each flagged child in a ScrollViewStickyHeader
 // fed by ONE scroll AnimatedValue, and the native scroll view ignores `stickyHeaderIndices`
 // entirely — forwarding that array to Fabric is a silent no-op, so we replicate the JS layer
@@ -21,8 +31,7 @@
 // underneath; Solid does not (.claude/rules/solid-descriptor-bridge.md §4).
 import { createEffect, createMemo, createSignal, onCleanup } from 'solid-js';
 import { createInitialStickyState, readLayoutNumber, reduceSticky, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
-import { AnimatedInterpolation, Platform, dlog, isSymbioteNode, } from '@symbiote-native/engine';
-import { Animated } from '../../modules/animated/index.js';
+import { AnimatedInterpolation, Platform, dlog, } from '@symbiote-native/engine';
 // One sticky header. Measures its own y/height through onLayout, interpolates the shared scroll
 // offset into a translateY that pins it to the top (or the bottom, inverted) until the next header
 // collides with it, and drives that translate through the native driver when available so the pin
@@ -137,46 +146,29 @@ export function ScrollViewStickyHeader(props) {
         props.onLayout(event);
     };
     // The EXPLICIT debounced translateY overrides the committed transform for hit-testing, while
-    // animatedTranslateY does the smooth (native-driven) pin.
+    // animatedTranslateY does the smooth (native-driven) pin. It rides the style ARRAY now rather
+    // than `passthroughAnimatedPropExplicitValues`: that prop was read by `createAnimatedComponent`,
+    // and the host is a bare tag, where the engine ignores it
+    // (core/engine/src/animated/host-binding.ts calls it a wrapper-ism by name). The wrapper did
+    // exactly this merge — `[reduced.style, passthroughStyle]` — so a later array entry overriding
+    // the transform is the same semantics, one layer down, and the engine still binds the
+    // interpolation it finds in entry 0.
     const passthrough = createMemo(() => {
         // Read the bump so a committed translateY repaints.
         version();
         if (state.translateY === null)
-            return null;
-        return { style: { transform: [{ translateY: state.translateY }] } };
+            return undefined;
+        return { transform: [{ translateY: state.translateY }] };
     });
     // collapsable:false keeps the wrapper a real Yoga node; zIndex makes the pinned header paint OVER
     // the rows scrolling up under it.
-    return (<Animated.View style={{
-            transform: [{ translateY: animatedTranslateY() }],
-            zIndex: STICKY_HEADER_Z_INDEX,
-        }} onLayout={onLayout} collapsable={false} passthroughAnimatedPropExplicitValues={passthrough()}>
+    return (<view style={[
+            {
+                transform: [{ translateY: animatedTranslateY() }],
+                zIndex: STICKY_HEADER_Z_INDEX,
+            },
+            passthrough(),
+        ]} onLayout={onLayout} collapsable={false}>
       {props.children}
-    </Animated.View>);
-}
-// Wrap each child flagged by `stickyHeaderIndices` in the sticky header component, fed by the shared
-// scroll AnimatedValue (RN ScrollView.js's render-time children.map). Unflagged children pass
-// through untouched.
-//
-// Cross-talk (RN's _headerLayoutYs + _onStickyHeaderLayout): each header reports its own y through
-// `onHeaderLayoutY`, and every header is fed the y of the NEXT flagged one — the point past which it
-// gets pushed off. The LAST flagged header has no successor, so its nextHeaderLayoutY stays
-// undefined and it sticks indefinitely, which is correct.
-export function wrapStickyHeaders(children, inputs) {
-    const Wrapper = inputs.StickyHeaderComponent ?? ScrollViewStickyHeader;
-    return children.map((child, index) => {
-        const indexOfIndex = inputs.stickyHeaderIndices.indexOf(index);
-        // A non-node child (a bare string or number in a scroll view) has no frame to pin and cannot be
-        // wrapped meaningfully, so it passes through like an unflagged one.
-        if (indexOfIndex === -1 || !isSymbioteNode(child))
-            return child;
-        dlog(`Solid ScrollView sticky-header wrap index=${index}`);
-        return (<Wrapper nextHeaderLayoutY={inputs.readNextHeaderLayoutY(indexOfIndex)} onLayout={(event) => {
-                const y = readLayoutNumber(event, 'y');
-                if (y !== undefined)
-                    inputs.onHeaderLayoutY(index, y);
-            }} scrollAnimatedValue={inputs.scrollAnimatedValue} inverted={inputs.readInverted()} scrollViewHeight={inputs.readScrollViewHeight()}>
-        {child}
-      </Wrapper>);
-    });
+    </view>);
 }

package/build/components.d.ts

@@ -1,28 +1,20 @@
-export { View } from './components/view';
-export type { IViewProps } from './components/view';
-export { Text } from './components/text';
-export type { ITextProps } from './components/text';
-export { SafeAreaView } from './components/safe-area-view';
-export type { ISafeAreaViewProps } from './components/safe-area-view';
-export { Image } from './components/image';
-export type { IImageProps } from './components/image';
-export { Pressable } from './components/pressable';
-export type { IPressableProps } from './components/pressable';
-export { ActivityIndicator } from './components/activity-indicator';
-export type { IActivityIndicatorProps } from './components/activity-indicator';
+export type { IViewProps } from './components/view-props';
+export type { ITextProps } from './components/text-props';
+export type { ISafeAreaViewProps } from './components/safe-area-view-props';
+export type { IImageProps } from './components/image-props';
+export type { IPressableProps } from './components/pressable-props';
+export type { IActivityIndicatorProps } from './components/activity-indicator-props';
 export type { IImageStatics, IPressState, IPressableAndroidRippleConfig, } from '@symbiote-native/components';
-export { Switch } from './components/switch';
-export type { ISwitchProps, ISwitchTrackColor } from './components/switch';
-export { TextInput } from './components/text-input';
-export type { ITextInputProps, ITextInputHandle, ITextInputSelection, } from './components/text-input';
+export type { ISwitchProps, ISwitchTrackColor, ISwitchChangeEvent, } from './components/switch-props';
+export type { ITextInputProps } from './components/text-input-props';
+export type { ITextInputHandle, ITextInputSelection, ITextInputChangeEvent, } from '@symbiote-native/components';
 export { Modal } from './components/modal';
 export type { IModalProps, IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from './components/modal';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
 export type { IKeyboardAvoidingViewProps, IKeyboardAvoidingBehavior, } from './components/keyboard-avoiding-view';
-export { RefreshControl } from './components/refresh-control';
-export type { IRefreshControlProps } from './components/refresh-control';
-export { ScrollView } from './components/scroll-view';
-export type { IScrollViewProps, IScrollViewHandle, } from './components/scroll-view';
+export type { IRefreshControlProps } from './components/refresh-control-props';
+export type { IScrollViewProps } from './components/scroll-view-props';
+export type { IScrollViewHandle } from '@symbiote-native/components';
 export { VirtualizedList } from './components/virtualized-list';
 export type { IVirtualizedListProps, IVirtualizedListHandle, IVirtualizedListCellInfo, IVirtualizedListRenderItem, ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, } from './components/virtualized-list';
 export { FlatList } from './components/flat-list';
@@ -31,13 +23,11 @@ export { VirtualizedSectionList } from './components/virtualized-section-list';
 export type { IVirtualizedSectionListProps, IVirtualizedSectionListHandle, ISectionHeaderInfo, ISectionCellInfo, ISection, } from './components/virtualized-section-list';
 export { SectionList } from './components/section-list';
 export type { ISectionListProps, ISectionListHandle, } from './components/section-list';
-export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable';
-export type { ITouchableOpacityProps, ITouchableHighlightProps, ITouchableWithoutFeedbackProps, } from './components/touchable';
-export { TouchableNativeFeedback } from './components/touchable-native-feedback';
-export type { ITouchableNativeFeedbackProps, INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from './components/touchable-native-feedback';
-export { Button } from './components/button';
-export type { IButtonProps } from './components/button';
-export { ImageBackground } from './components/image-background';
-export type { IImageBackgroundProps } from './components/image-background';
-export { InputAccessoryView } from './components/input-accessory-view';
-export type { IInputAccessoryViewProps } from './components/input-accessory-view';
+export type { ITouchableOpacityProps, ITouchableHighlightProps, } from './components/touchable-props';
+export type { ITouchableWithoutFeedbackProps } from './components/touchable-without-feedback/touchable-without-feedback-props';
+export { TouchableNativeFeedback } from '@symbiote-native/components';
+export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from '@symbiote-native/components';
+export type { ITouchableNativeFeedbackProps } from './components/touchable-native-feedback/touchable-native-feedback-props';
+export type { IButtonProps } from './components/button-props';
+export type { IImageBackgroundProps } from './components/image-background-props';
+export type { IInputAccessoryViewProps } from './components/input-accessory-view-props';

package/build/components.js

@@ -1,31 +1,12 @@
 // The component re-export barrel, flat at the package root like every other adapter's. Grouping
 // under components/ is internal; this file plus src/index.ts is the whole public surface.
-export { View } from './components/view.jsx';
-export { Text } from './components/text.jsx';
-export { SafeAreaView } from './components/safe-area-view.jsx';
-export { Image } from './components/image.js';
-export { Pressable } from './components/pressable.jsx';
-export { ActivityIndicator } from './components/activity-indicator';
-export { Switch } from './components/switch';
-export { TextInput } from './components/text-input.js';
 export { Modal } from './components/modal.jsx';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view.jsx';
-export { RefreshControl } from './components/refresh-control.jsx';
-// ScrollViewStickyHeader is NOT exported, matching react-native itself: it lives at
-// Libraries/Components/ScrollView/ScrollViewStickyHeader.js and is absent from RN's public
-// index.js, so it is ScrollView's internal, not part of the public surface. React's and Vue's
-// barrels agree. Svelte's and Angular's do export it, but as a WORKAROUND rather than an API
-// decision — Svelte documents `stickyHeaderIndices` as a KNOWN GAP, so its apps have to compose the
-// wrapper by hand. This adapter auto-wraps flagged children the way React and Vue do, so the escape
-// hatch has nothing to escape. `IStickyHeaderComponentType` stays internal for the same reason even
-// though `IScrollViewProps.StickyHeaderComponent` is typed by it — React has the identical shape.
-export { ScrollView } from './components/scroll-view';
 // The shared list detail types (ISeparators, IViewToken, IViewabilityConfig…) come through the
 // component module rather than straight from '@symbiote-native/components', matching React's own
 // virtualized-list barrel: a consumer typing a renderItem callback or a viewability config reaches
 // for the same import as the component. `IVirtualizedListComponent` stays internal — it is the
-// platform factory's return type, not API, exactly as ScrollView keeps `IScrollViewHostPlatform`
-// out of this barrel.
+// platform factory's return type, not API.
 export { VirtualizedList } from './components/virtualized-list';
 // FlatList carries no platform split of its own — the iOS/Android divergence is
 // VirtualizedList's refreshControlMode, inherited by importing that folder, so Metro picks the
@@ -39,16 +20,8 @@ export { VirtualizedSectionList } from './components/virtualized-section-list/in
 // SectionList declares no input of its own — it is the preset over VirtualizedSectionList, the same
 // relation React's 25-line section-list has to its 262-line virtualized twin.
 export { SectionList } from './components/section-list/index.jsx';
-// The Touchable family, all composed over Pressable exactly as React's and Vue's are — so the
-// press machine, the aria fold and the class+style merge each happen once, in Pressable/View.
-export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable/index.jsx';
-// Android's native ripple/theme-attr feedback. The background factories are the SHARED functions
-// hung on the component value, not adapter wrappers, so every adapter offers the identical set.
-export { TouchableNativeFeedback } from './components/touchable-native-feedback/index.jsx';
-// IButtonProps is agnostic and lives in @symbiote-native/components; this re-exports it rather
-// than redeclaring it, matching react/vue/svelte/angular (CLAUDE.md prop-type split).
-export { Button } from './components/button.jsx';
-// Both take `children`, a framework value, so their public prop types are declared per-adapter
-// over the shared agnostic field base — never imported from another adapter.
-export { ImageBackground } from './components/image-background.jsx';
-export { InputAccessoryView } from './components/input-accessory-view.jsx';
+// Android's native ripple/theme-attr feedback. `TouchableNativeFeedback` is now RN's STATIC
+// NAMESPACE, not a component: the element is the tag `<touchable-native-feedback>`, which commits no
+// node of its own and clones onto its single child. `.Ripple(…)` / `.SelectableBackground(…)` are
+// unchanged, and are the SHARED functions every adapter already offered.
+export { TouchableNativeFeedback } from '@symbiote-native/components';

package/build/create-portal/index.jsx

@@ -45,7 +45,7 @@ import { insert, insertNode, removeNode } from '../renderer.js';
 function assertPortalTarget(target) {
     if (target instanceof SymbioteSurface || isSymbioteNode(target))
         return target;
-    throw new Error('Portal `mount` must be an already-mounted host node (a ref off a rendered <View>) or a surface — got something else. Did you pass the signal instead of CALLING it (`mount={overlay()}`), read it before the target element existed (gate the Portal behind <Show when={overlay()}>), or pass a CSS-selector-style string?');
+    throw new Error('Portal `mount` must be an already-mounted host node (a ref off a rendered <view>) or a surface — got something else. Did you pass the signal instead of CALLING it (`mount={overlay()}`), read it before the target element existed (gate the Portal behind <Show when={overlay()}>), or pass a CSS-selector-style string?');
 }
 export function Portal(props) {
     // One engine ANCHOR per Portal instance, used as a fragment host: it is a real retained node, so

package/build/descriptor-to-solid.js

@@ -14,7 +14,7 @@
 // So the tree is built ONCE and every node's props are wired through the renderer's own `spread`,
 // which is a render effect that diffs prop-by-prop against the previous values and calls
 // setProperty -> routeProp only for the ones that actually changed. Same mechanism, same node
-// identity, as compiled `<symbiote-switch value={v()} />`.
+// identity, as compiled `<switch value={v()} />`.
 //
 // This relies on `render-*.ts` producing a SHAPE-STABLE Descriptor: same type, same child count,
 // text where text was — only prop VALUES vary between calls. That is already the contract the

package/build/index.d.ts

@@ -10,6 +10,7 @@ export { AppRegistry, setHostRegistrar } from './modules/app-registry';
 export type { IComponentProvider, IWrapperComponentProvider, IAppParameters, IRunnable, IHostRegistrar, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from './modules/app-registry';
 export { StatusBar } from './modules/status-bar';
 export type { IStatusBarProps, IStatusBarStyle } from './modules/status-bar';
+export { Image } from './modules/image';
 export { Portal } from './create-portal';
 export type { IPortalProps, IPortalTarget } from './create-portal';
 export { createTunnel } from './create-tunnel';

package/build/index.js

@@ -36,11 +36,19 @@ export { descriptorToSolid } from './descriptor-to-solid.js';
 // Safe in the barrel (unlike ./bootstrap, which imports react-native): the registry seam itself
 // only reaches the engine and solid-js.
 export { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
-// Animated: the six animated components RN exposes, over the engine's framework-agnostic value
-// graph. Solid's JSX takes the dotted form directly — `<Animated.View/>` compiles to
-// createComponent(Animated.View, …) — so no local alias is needed, unlike Angular, whose AOT
+// Animated: the three list/scroll components that are still components, over the engine's
+// framework-agnostic value graph. There is no `Animated.View` / `Animated.Text` / `Animated.Image`
+// — those primitives are tags, and `<view style={{ opacity: someAnimatedValue }}>` is the whole
+// API (.claude/rules/animated-values-resolve-in-the-engine.md). Solid's JSX takes the dotted form
+// of what remains directly — `<Animated.ScrollView/>` compiles to
+// createComponent(Animated.ScrollView, …) — so no local alias is needed, unlike Angular, whose AOT
 // compiler cannot trace a class through property access (.claude/rules/dotted-component-tags.md).
 export { StatusBar } from './modules/status-bar.js';
+// What survives of `Image` once the primitive is the `<image>` tag: RN's statics namespace, no
+// view. Grouped with the runtime modules rather than the components for exactly that reason.
+// `IImageStatics` is not re-exported here — `./components` already carries it, straight from the
+// shared package, and a second export of one name is a build error rather than a convenience.
+export { Image } from './modules/image.js';
 // Portal: same-surface content relocation, the twin of React's createPortal and Angular's
 // PortalDirective/PortalOutletDirective. `mount` takes an already-mounted host node in THIS
 // surface (a ref off a rendered component) or the surface itself; reaching a second, separately