@symbiote-native/react 1.0.0 → 3.0.0

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

@@ -1,4 +1,4 @@
-// VirtualizedList: real windowing over the existing ScrollView. Only the cells
+// VirtualizedList: real windowing over the `scroll-view` TAG. Only the cells
 // whose computed offset falls inside the visible window (plus a leading/trailing
 // buffer) are rendered; everything above and below is collapsed into two spacer
 // Views whose sizes sum to the off-screen extent, so the scroll thumb and total
@@ -14,14 +14,31 @@
 // from a `commit` dispatched in a layout effect (before paint, so MVCP's shift lands without a
 // visible jump). Lists have no Descriptor render fn — the cell content is React's own children.
 //
-// Imperative scrolling resolves to an offset in the reducer and rides the ScrollView's native
-// 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).
+// Imperative scrolling resolves to an offset in the reducer and rides the scroll node's native
+// scrollTo command, animated by default. The `contentOffset` prop is only a fallback for the
+// pre-mount window (the node not yet attached).
+//
+// WHAT IS STILL THIS COMPONENT'S, now that the scroll view is a tag and the engine owns its
+// content node, its sticky seam and its RefreshControl placement — checked rather than assumed,
+// because "the wrapper is gone" and "nothing is left" are different claims:
+//
+//   the WINDOW           `reduceList` decides which indices are in view, and this file is what
+//                        turns that into elements. The output SHAPE is decided in JS from the
+//                        app's own data through `renderItem` — the one disqualifier that no
+//                        engine seam removes (`.claude/rules/host-primitive-tier.md`, tier 3).
+//   the CELL WRAPPERS    a measuring `view` per cell with the inversion counter-flip, the two
+//                        spacers, the header/footer/empty slots, the separator INSIDE the cell.
+//   the LIFECYCLE        native events -> actions, effects run with React primitives (timers, a
+//                        forced re-render, a layout effect for MVCP), one state cell.
+//   the HANDLE           `buildScrollViewHandle` over the node a `ref` hands back, plus the list's
+//                        own imperative surface on top of it.
+//
+// What is NOT: the content node, `contentContainerStyle`'s routing, where a RefreshControl goes
+// per platform, and how a sticky header pins. The list names `sticky-header` on a cell and knows
+// nothing else about it.
 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, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
-import { ScrollView, } from '../scroll-view';
-import { RefreshControl } from '../refresh-control/index.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, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
 function resolveElement(component) {
     if (component === undefined)
         return undefined;
@@ -48,7 +65,7 @@ function renderSeparatorElement(component, leadingItem, trailingItem, overrides)
 // generic). The ref is destructured here and wired through useImperativeHandle.
 export function VirtualizedList(props) {
     const forwardedRef = props.ref;
-    const { data, getItem, getItemCount, renderItem, keyExtractor, getItemLayout, ItemSeparatorComponent, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, horizontal = false, inverted = false, extraData, onEndReached, onEndReachedThreshold = DEFAULT_END_REACHED_THRESHOLD, onStartReached, onStartReachedThreshold = DEFAULT_START_REACHED_THRESHOLD, onRefresh, refreshing, progressViewOffset, onViewableItemsChanged, viewabilityConfig, viewabilityConfigCallbackPairs, onScrollToIndexFailed, initialNumToRender = DEFAULT_INITIAL_NUM_TO_RENDER, initialScrollIndex, maxToRenderPerBatch = DEFAULT_MAX_TO_RENDER_PER_BATCH, updateCellsBatchingPeriod = DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, windowSize = DEFAULT_WINDOW_SIZE, stickyHeaderIndices, maintainVisibleContentPosition, style, contentContainerStyle, 
+    const { data, getItem, getItemCount, renderItem, keyExtractor, getItemLayout, ItemSeparatorComponent, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, horizontal = false, inverted = false, extraData, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, onRefresh, refreshing, progressViewOffset, onViewableItemsChanged, viewabilityConfig, viewabilityConfigCallbackPairs, onScrollToIndexFailed, initialNumToRender = DEFAULT_INITIAL_NUM_TO_RENDER, initialScrollIndex, maxToRenderPerBatch = DEFAULT_MAX_TO_RENDER_PER_BATCH, updateCellsBatchingPeriod = DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, windowSize = DEFAULT_WINDOW_SIZE, stickyHeaderIndices, maintainVisibleContentPosition, style, contentContainerStyle, 
     // Pulled out of the rest so the user's onScroll does NOT arrive raw via
     // ...accessibilityRest and overwrite the internal windowing handler. Composed below.
     onScroll: userOnScroll, onScrollBeginDrag, onScrollEndDrag, onMomentumScrollBegin, onMomentumScrollEnd, scrollEventThrottle, keyboardShouldPersistTaps, keyboardDismissMode, 
@@ -101,7 +118,12 @@ export function VirtualizedList(props) {
     // The offset we are imperatively driving native to (scrollTo* before the handle attaches). Pushed
     // down as the ScrollView's contentOffset prop; fresh object identity each time. undefined = none.
     const [commandedOffset, setCommandedOffset] = useState(undefined);
-    const scrollViewRef = useRef(null);
+    // The engine node of the scroll TAG. A `ref` on an intrinsic hands back the host instance, so
+    // there is no wrapper left to run a `useImperativeHandle` — `buildScrollViewHandle` is what turns
+    // the node into RN's scroll surface, and it is the same function every other adapter feeds from
+    // its own host-instance accessor. Lazy getter: the node is null until commit.
+    const scrollNodeRef = useRef(null);
+    const scrollHandle = useMemo(() => buildScrollViewHandle(() => scrollNodeRef.current), []);
     // Pending minimumViewTime debounce timer / the incremental-fill timer (adapter owns the timers;
     // the reducer only asks for a delay).
     const viewableTimerRef = useRef(null);
@@ -117,9 +139,9 @@ export function VirtualizedList(props) {
         const target = isHorizontal
             ? { x: clamped, y: EMPTY_OFFSET }
             : { x: EMPTY_OFFSET, y: clamped };
-        if (scrollViewRef.current !== null) {
+        if (scrollNodeRef.current !== null) {
             dlog(`VirtualizedList scrollTo offset=${clamped} animated=${animated} (horizontal=${isHorizontal})`);
-            scrollViewRef.current.scrollTo({ x: target.x, y: target.y, animated });
+            scrollHandle.scrollTo({ x: target.x, y: target.y, animated });
             return;
         }
         dlog(`VirtualizedList scrollTo offset=${clamped} pending-ref (horizontal=${isHorizontal})`);
@@ -166,8 +188,12 @@ export function VirtualizedList(props) {
                     const info = effect.info;
                     const map = effect.map;
                     const fire = () => {
-                        for (const pair of pairs)
-                            pair.onViewableItemsChanged(info);
+                        for (const pair of pairs) {
+                            pair.onViewableItemsChanged({
+                                ...info,
+                                viewabilityConfig: pair.viewabilityConfig,
+                            });
+                        }
                         dispatchRef.current({ kind: 'viewable-fired', map });
                     };
                     if (viewableTimerRef.current !== null) {
@@ -289,18 +315,20 @@ export function VirtualizedList(props) {
             dispatch({ kind: 'scroll-to-end', animated: params?.animated ?? true });
         },
         flashScrollIndicators: () => {
-            scrollViewRef.current?.flashScrollIndicators?.();
+            scrollHandle.flashScrollIndicators?.();
         },
-        getNativeScrollRef: () => scrollViewRef.current,
-        getScrollableNode: () => scrollViewRef.current,
-        getScrollResponder: () => scrollViewRef.current,
-        getScrollNode: () => scrollViewRef.current?.getScrollNode() ?? null,
+        // Null until the tag commits, so these keep RN's "no scroll view yet" answer rather than
+        // handing back a handle that would silently no-op.
+        getNativeScrollRef: () => scrollNodeRef.current !== null ? scrollHandle : null,
+        getScrollableNode: () => scrollNodeRef.current !== null ? scrollHandle : null,
+        getScrollResponder: () => scrollNodeRef.current !== null ? scrollHandle : null,
+        getScrollNode: () => scrollNodeRef.current,
         // Manual trigger for RN's recordInteraction: flip the interaction flag so
         // waitForInteraction viewability configs start reporting.
         recordInteraction: () => {
             dispatch({ kind: 'record-interaction' });
         },
-    }), [dispatch]);
+    }), [dispatch, scrollHandle]);
     // After-commit pass: run the deferred effects (batch fill, edge-reached, viewability,
     // initial-scroll, MVCP) in a LAYOUT effect so MVCP's shift lands before paint. Re-runs only when
     // the windowing signature changed — the same dedup key every adapter shares.
@@ -328,15 +356,14 @@ export function VirtualizedList(props) {
     const stickySet = stickyHeaderIndices !== undefined
         ? new Set(stickyHeaderIndices)
         : undefined;
-    let renderedStickyIndices = [];
     const header = resolveElement(ListHeaderComponent);
     if (header !== undefined) {
-        children.push(createElement('symbiote-view', { key: 'list-header' }, header));
+        children.push(createElement('view', { key: 'list-header' }, header));
     }
     if (count === FIRST_INDEX) {
         const empty = resolveElement(ListEmptyComponent);
         if (empty !== undefined) {
-            children.push(createElement('symbiote-view', { key: 'list-empty' }, empty));
+            children.push(createElement('view', { key: 'list-empty' }, empty));
         }
     }
     else {
@@ -352,9 +379,14 @@ export function VirtualizedList(props) {
             stickyIndices: stickySet,
             hasHeader: header !== undefined,
         });
-        renderedStickyIndices = plan.stickyChildPositions;
+        // `plan.stickyChildPositions` is deliberately NOT read. It was the input to the wrapper's own
+        // JS sticky pass, and the behavior honours `stickyHeaderIndices` by numbering the OWNER's paint
+        // children — which a windowed list cannot supply: it paints a header, a spacer and a slice, so
+        // data index 3 is almost never paint child 3, and the positions would have to be recomputed
+        // every time the window slides. The cells that should pin carry the `sticky-header` TAG
+        // instead, which pins by document order and survives windowing.
         if (plan.leadingExtent > EMPTY_OFFSET) {
-            children.push(createElement('symbiote-view', {
+            children.push(createElement('view', {
                 key: 'spacer-leading',
                 style: horizontal
                     ? { width: plan.leadingExtent }
@@ -374,7 +406,11 @@ export function VirtualizedList(props) {
                 index: forcedIndex,
                 separators: makeSeparators(forcedIndex),
             });
-            children.push(createElement('symbiote-view', {
+            children.push(createElement(
+            // Sticky by construction — `forcedStickyCell` exists only for an index in `stickySet` —
+            // and the SAME tag the in-window branch below uses, so a cell crossing between the two
+            // keeps its element type as well as its key and never remounts.
+            'sticky-header', {
                 key: `cell-${plan.forcedStickyCell.key}`,
                 onLayout: makeCellMeasure(forcedIndex),
                 style: inverted
@@ -385,7 +421,7 @@ export function VirtualizedList(props) {
             }, forcedCell));
         }
         if (plan.gapExtent > EMPTY_OFFSET) {
-            children.push(createElement('symbiote-view', {
+            children.push(createElement('view', {
                 key: 'spacer-gap',
                 style: horizontal
                     ? { width: plan.gapExtent }
@@ -420,7 +456,13 @@ export function VirtualizedList(props) {
                 : 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', {
+            //
+            // A cell the app flagged sticky is wrapped in the `sticky-header` TAG instead — same
+            // position, same key, same `onLayout` (the behavior forwards it rather than replacing it),
+            // and the engine finds this scroll view by walking up. Nothing here computes a child index:
+            // the collision point comes from the owner's DOCUMENT order, which is the one form that
+            // survives windowing.
+            children.push(createElement(stickySet?.has(planCell.index) === true ? 'sticky-header' : 'view', {
                 key: `cell-${planCell.key}`,
                 onLayout: makeCellMeasure(planCell.index),
                 style: inverted
@@ -431,7 +473,7 @@ export function VirtualizedList(props) {
             }, cell, separator));
         }
         if (plan.trailingExtent > EMPTY_OFFSET) {
-            children.push(createElement('symbiote-view', {
+            children.push(createElement('view', {
                 key: 'spacer-trailing',
                 style: horizontal
                     ? { width: plan.trailingExtent }
@@ -441,7 +483,7 @@ export function VirtualizedList(props) {
     }
     const footer = resolveElement(ListFooterComponent);
     if (footer !== undefined) {
-        children.push(createElement('symbiote-view', { key: 'list-footer' }, footer));
+        children.push(createElement('view', { key: 'list-footer' }, footer));
     }
     // A horizontal list pins the content container to the full row width so the row overflows for
     // iOS to scroll. The inversion flip rides ONLY the outer ScrollView style and each cell, never
@@ -458,10 +500,13 @@ export function VirtualizedList(props) {
         ...accessibilityRest,
         style: resolvedStyle,
         contentContainerStyle: resolvedContentContainerStyle,
-        horizontal,
         onScroll,
         onLayout: onViewportLayout,
     };
+    // `horizontal` is NOT in the bag: the axis is the TAG (`horizontal-scroll-view`), because Android
+    // scrolls the two axes with different native ViewManagers. The behavior's own fold deletes the
+    // prop and rewrites it from the tag, so passing it would be at best redundant and at worst a
+    // contradiction it has to warn about.
     if (onScrollBeginDrag !== undefined)
         scrollProps.onScrollBeginDrag = onScrollBeginDrag;
     if (onScrollEndDrag !== undefined)
@@ -479,9 +524,6 @@ export function VirtualizedList(props) {
     // A pending imperative/initial scroll rides down as contentOffset (fresh identity each push).
     if (commandedOffset !== undefined)
         scrollProps.contentOffset = commandedOffset;
-    // Headers in the window stick; an empty list leaves the prop off entirely.
-    if (renderedStickyIndices.length > 0)
-        scrollProps.stickyHeaderIndices = renderedStickyIndices;
     // Forward maintainVisibleContentPosition to the native ScrollView so it anchors in-window cells.
     // minIndexForVisible is bumped by 1 when a ListHeaderComponent occupies child 0.
     if (maintainVisibleContentPosition !== undefined) {
@@ -491,16 +533,23 @@ export function VirtualizedList(props) {
                 (header !== undefined ? 1 : 0),
         };
     }
-    // Pull-to-refresh: when onRefresh is set, build a RefreshControl for the ScrollView's
-    // refreshControl prop. refreshing is RN-required alongside onRefresh, default false when nullish.
-    if (onRefresh !== undefined) {
-        dlog('VirtualizedList wiring RefreshControl (onRefresh provided)');
-        scrollProps.refreshControl = createElement(RefreshControl, {
+    // Pull-to-refresh: when onRefresh is set, the RefreshControl is an ordinary FIRST CHILD on both
+    // platforms rather than a prop. The scroll behavior CLAIMS it, so the engine keeps it beside the
+    // content view on iOS and inverts the tree on Android; everything after it lands in the content
+    // node the behavior built. refreshing is RN-required alongside onRefresh, default false.
+    const refreshControl = onRefresh !== undefined
+        ? createElement('refresh-control', {
+            key: 'refresh-control',
             refreshing: refreshing ?? false,
             onRefresh,
             progressViewOffset,
-        });
+        })
+        : undefined;
+    if (refreshControl !== undefined) {
+        dlog('VirtualizedList wiring RefreshControl (onRefresh provided)');
     }
-    // The ScrollView handle (ref) backs animated imperative scrolls via its native command.
-    return createElement(ScrollView, { ...scrollProps, ref: scrollViewRef }, ...children);
+    // The scroll TAG, not a wrapper: the engine builds the content node, carries
+    // `contentContainerStyle` onto it and places the refresh control. `ref` hands back the engine
+    // node, which is what `buildScrollViewHandle` drives for the imperative scrolls.
+    return createElement(horizontal ? 'horizontal-scroll-view' : 'scroll-view', { ...scrollProps, ref: scrollNodeRef }, refreshControl, ...children);
 }

package/build/components.d.ts

@@ -42,6 +42,7 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     numberOfLines?: number;
     ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
     selectable?: boolean;
+    disabled?: boolean;
     adjustsFontSizeToFit?: boolean;
     minimumFontScale?: number;
     allowFontScaling?: boolean;
@@ -50,5 +51,3 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     ref?: Ref<IHostInstance>;
     children?: ReactNode;
 }
-export declare const View = "symbiote-view";
-export declare const Text = "symbiote-text";

package/build/components.js

@@ -1,19 +1,5 @@
-// Host primitives exposed to user code. They ARE the intrinsic tags — a capitalized export whose
-// value is the tag string — so an app writes `<View>` and React commits a host element directly,
-// with no component instance in between. The reconciler maps the tag through
-// `descriptorFor` to a Fabric view name at commit.
-// `View` and `Text` are the intrinsic TAGS, not components wrapping them. JSX resolves a
-// capitalized tag to the value in scope, and a value that is a STRING is a host element to React —
-// so `<View/>` compiles to `_jsx('symbiote-view', …)` with no component instance, while
-// `JSX.IntrinsicElements['symbiote-view']` still supplies the strict props (a bad prop is TS2322).
-//
-// The two folds their component bodies used to apply both moved down a layer, which is what let
-// the bodies go:
-//
-//   aria / accessibility   the engine folds every node in `fabricProps` (accessibility-props.ts)
-//   id -> nativeID,        the renderer folds by spec in `host-config`'s createInstance
-//   Text's defaults        (`foldHostBag`, driven by HOST_PRIMITIVES)
-//
-// A type annotation rather than `as const`: same literal type, no cast (`ts-js-best-practices`).
-export const View = 'symbiote-view';
-export const Text = 'symbiote-text';
+// The public PROP TYPES for the two strict intrinsics, and nothing else. There is no component and
+// no capitalized alias: an app writes `<view>` / `<text>`, React commits a host element directly,
+// and `JSX.IntrinsicElements` (jsx-runtime.ts) is what supplies these types to it. The reconciler
+// maps the tag through `descriptorFor` to a Fabric view name at commit.
+export {};

package/build/create-portal/index.js

@@ -14,7 +14,7 @@ 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)) {
-        throw new Error('createPortal target must be an already-mounted host node (e.g. a ref to a rendered <View>) — got something else. Did you forget `.current`/`.value`, or pass a CSS-selector-style string?');
+        throw new Error('createPortal target must be an already-mounted host node (e.g. a ref to a rendered <view>) — got something else. Did you forget `.current`/`.value`, or pass a CSS-selector-style string?');
     }
     // @ts-expect-error @types/react-reconciler's ReactPortal (containerInfo/implementation) and
     // react's own ReactPortal (type/props, a ReactElement) are different interfaces describing the

package/build/create-tunnel/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@symbiote-native/react/jsx-runtime";
 // createTunnel - the cross-surface answer to createPortal's same-surface-only scope. A real
 // createPortal cannot reach across two separate reconciler roots (see
 // github.com/facebook/react/issues/17147); the fix, same as pmndrs/tunnel-rat, is to not

package/build/descriptor-to-react/index.js

@@ -1,6 +1,6 @@
 // The descriptor→element bridge. A render function in @symbiote-native/components returns a
 // framework-agnostic `Descriptor` tree; this maps it onto React elements. The resulting
-// host element (`symbiote-view`, `symbiote-activity-indicator`, …) flows on through the
+// host element (`view`, `activity-indicator`, …) flows on through the
 // react-reconciler host config → engine → Fabric, exactly like a hand-written JSX host
 // element.
 import { createElement } from 'react';

package/build/host-config.js

@@ -16,10 +16,9 @@ import { descriptorFor } from '@symbiote-native/components';
 // A bare intrinsic tag has no wrapper to apply RN's per-primitive prop folds (id -> nativeID,
 // Text's ellipsizeMode / allowFontScaling defaults), so the renderer is the layer that must.
 // Shared with every other adapter, driven by the same HOST_PRIMITIVES spec.
-import { foldHostBag } from '@symbiote-native/components/fold-host-bag';
-// WHICH native view a primitive commits can depend on a prop (TextInput's `multiline`). A lowering
-// transform decides that from source text; a bare tag has no transform, so the choice is made here,
-// where the runtime value is known. Identity for every primitive that declares no alternative.
+// WHICH native view a primitive commits can depend on a prop (TextInput's `multiline`), and that
+// prop can be a runtime value — so the choice is made here, where it is known. Identity for every
+// primitive that declares no alternative.
 import { resolveIntrinsicTag } from '@symbiote-native/components/resolve-intrinsic';
 // React-reserved prop keys that must never reach Fabric. `children` is the element
 // tree (handled via appendChild). `ref`/`key` are React 19 plain props: the reconciler
@@ -99,17 +98,31 @@ const reconciler = createReconciler({
     },
     shouldSetTextContent: () => false,
     createInstance(type, props, _container, hostContext) {
-        const descriptor = descriptorFor(resolveIntrinsicTag(type, props));
+        // The INTRINSIC tag, kept in a binding rather than inlined, because it is needed twice: once
+        // to resolve the Fabric view name and once to hand the engine below. The host-behavior
+        // registry is keyed by TAG and never by Fabric name — `pressable` and a plain `View`
+        // both resolve to `RCTView`, so keying by the resolved name would put a press machine on every
+        // view in the app (`core/engine/src/host-behavior.ts`).
+        const tag = resolveIntrinsicTag(type, props);
+        const descriptor = descriptorFor(tag);
         if (hostContext.isInsideText && !descriptor.isText) {
-            throw new Error(`<${type}> can't be nested inside <Text>`);
+            throw new Error(`<${type}> can't be nested inside <text>`);
         }
-        const node = createElement(descriptor.component, descriptor.isText);
-        applyProps(node, foldHostBag(type, props));
+        // The third argument is what makes a host behavior reachable AT ALL on this adapter. Dropping
+        // it degrades silently: `createElement`'s default is `tag = component`, so the lookup runs
+        // against `RCTView` / `RCTImageView`, matches nothing, and every behavior simply never
+        // attaches — no throw, no log, and no test goes red, because React ships no `register` entry
+        // today and so has never had a behavior to lose. That absence is exactly what hid this: the
+        // other four adapters all pass it (vue `renderer/index.ts`, svelte `dom-shim/element.ts`,
+        // solid `renderer.ts`, angular `renderer/index.ts`), and React is the one that did not.
+        //
+        const node = createElement(descriptor.component, descriptor.isText, tag);
+        applyProps(node, props);
         return node;
     },
     createTextInstance(text, _container, hostContext) {
         if (!hostContext.isInsideText) {
-            throw new Error(`Text string "${text}" must be rendered inside a <Text>`);
+            throw new Error(`Text string "${text}" must be rendered inside a <text>`);
         }
         return createRawText(text);
     },
@@ -141,9 +154,7 @@ const reconciler = createReconciler({
         // an update. The node keeps its identity — an app's ref stays live — and the commit walk
         // re-creates the Fabric node because its viewName no longer matches the committed one.
         setNodeComponent(node, descriptorFor(resolveIntrinsicTag(type, newProps)).component);
-        // BOTH sides folded, or the diff compares a raw `id` against a folded `nativeID` and writes
-        // the alias twice while never clearing the raw key.
-        applyUpdate(node, foldHostBag(type, oldProps), foldHostBag(type, newProps));
+        applyUpdate(node, oldProps, newProps);
     },
     commitTextUpdate(node, _oldText, newText) {
         setText(node, newText);

package/build/index.d.ts

@@ -1,38 +1,32 @@
-export type { ISymbioteIntrinsicTag } from './jsx';
-export { View, Text } from './components';
+import './register';
+export type { ISymbioteIntrinsicTag } from './jsx-runtime';
 export type { IViewProps, ITextProps } from './components';
 export type { IAccessibilityProps, IAriaProps, IAccessibilityRole, IRole, IAccessibilityStateValue, IAccessibilityValue, IAccessibilityActionInfo, } from '@symbiote-native/components';
 export type { IResponderProps } from './utils/responder-props';
-export { Image, setImageSourceResolver } from './components/image';
-export type { IImageProps, IImageSource, IImageSourceProp, IResizeMode, IImageSize, IImageCacheStatus, } from './components/image';
-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 { TextInput } 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 { Image } from './modules/image';
+export { setImageSourceResolver } from '@symbiote-native/components';
+export type { IImageProps } from './components/image/image-props';
+export type { IImageSource, IImageSourceProp, IResizeMode, IImageSize, IImageCacheStatus, } from '@symbiote-native/components';
+export type { IImageBackgroundProps } from './components/image-background-props';
+export type { IScrollViewProps, IScrollViewHandle, } from './components/scroll-view/scroll-view-props';
+export type { ITextInputProps } from './components/text-input/text-input-props';
+export type { ITextInputHandle, ITextInputChangeEvent, } from '@symbiote-native/components';
+export type { IInputAccessoryViewProps } from './components/input-accessory-view-props';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
 export type { IKeyboardAvoidingViewProps, IKeyboardAvoidingBehavior, } from './components/keyboard-avoiding-view';
 export { StatusBar } from './modules/status-bar';
 export type { IStatusBarProps, IStatusBarStyle } from './modules/status-bar';
-export { Switch } from './components/switch';
-export type { ISwitchProps, ISwitchTrackColor } from './components/switch';
-export { ActivityIndicator } from './components/activity-indicator';
-export type { IActivityIndicatorProps } from './components/activity-indicator';
-export { SafeAreaView } from './components/safe-area-view';
-export type { ISafeAreaViewProps } from './components/safe-area-view';
-export { RefreshControl } from './components/refresh-control';
-export type { IRefreshControlProps } from './components/refresh-control';
+export type { ISwitchProps } from './components/switch/switch-props';
+export type { ISwitchTrackColor, ISwitchChangeEvent, } from '@symbiote-native/components';
+export type { IActivityIndicatorProps } from './components/activity-indicator-props';
+export type { ISafeAreaViewProps } from './components/safe-area-view-props';
+export type { IRefreshControlProps } from './components/refresh-control-props';
 export { Modal } from './components/modal';
 export type { IModalProps, IModalAnimationType, IModalPresentationStyle, IModalOrientation, } from './components/modal';
-export { Pressable } from './components/pressable';
-export type { IPressableProps, IPressState } from './components/pressable';
-export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable';
-export type { ITouchableOpacityProps, ITouchableHighlightProps, ITouchableWithoutFeedbackProps, } from './components/touchable';
-export { Button } from './components/button';
-export type { IButtonProps } from './components/button';
+export type { IPressableProps, IPressState, } from './components/pressable/pressable-props';
+export type { ITouchableOpacityProps, ITouchableHighlightProps, } from './components/touchable/touchable-props';
+export type { ITouchableWithoutFeedbackProps } from './components/touchable-without-feedback/touchable-without-feedback-props';
+export type { IButtonProps } from './components/button-props';
 export { FlatList } from './components/flat-list';
 export type { IFlatListProps, IFlatListHandle } from './components/flat-list';
 export { SectionList } from './components/section-list';
@@ -68,7 +62,8 @@ export { PanResponder } from '@symbiote-native/engine';
 export type { IPanResponderGestureState, IPanResponderCallbacks, IGestureResponderHandlers, IPanResponderInstance, } from '@symbiote-native/engine';
 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 { 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 { 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

@@ -1,22 +1,19 @@
 // @symbiote-native/react: a react-reconciler host config (mutation mode) over
 // @symbiote-native/engine. React is a known-good driver: it proves the native pipe
 // and the shared clone-on-write engine before any non-React adapter has to.
-export { View, Text } from './components.js';
-export { Image, setImageSourceResolver } from './components/image/index.js';
-export { ImageBackground } from './components/image-background/index.js';
-export { ScrollView } from './components/scroll-view';
-export { TextInput } from './components/text-input/index.js';
-export { InputAccessoryView } from './components/input-accessory-view/index.js';
+// Bare side-effect import, deliberately NOT a re-export and deliberately not beside one of the
+// same specifier: it installs the engine's host behaviors, which is what makes a bare
+// `<pressable>` / `<text-input>` / `<switch>` carry its machine. Any other shape is dropped by
+// Metro's inlineRequires in a release build — see register.ts.
+import './register.js';
+// `Image` is a TAG — `<image>` — and the name now carries only RN's STATICS
+// (`Image.getSize(...)`), an imperative API with no view. The wrapper's whole source/style
+// translation runs on the tag as the engine's `registerImageBehavior`.
+export { Image } from './modules/image/index.js';
+export { setImageSourceResolver } from '@symbiote-native/components';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view/index.js';
 export { StatusBar } from './modules/status-bar';
-export { Switch } from './components/switch';
-export { ActivityIndicator } from './components/activity-indicator';
-export { SafeAreaView } from './components/safe-area-view/index.js';
-export { RefreshControl } from './components/refresh-control/index.js';
 export { Modal } from './components/modal/index.js';
-export { Pressable } from './components/pressable/index.js';
-export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable/index.js';
-export { Button } from './components/button.js';
 export { FlatList } from './components/flat-list/index.js';
 export { SectionList } from './components/section-list/index.js';
 export { VirtualizedSectionList } from './components/virtualized-section-list/index.js';
@@ -74,4 +71,7 @@ export { InteractionManager } from '@symbiote-native/engine';
 // Android-only surface (the second-platform pass): a thin JS shim over an Android Fabric view,
 // inert on iOS (no native view -> degrades to a plain container). The Android-only MODULES
 // (ToastAndroid, PermissionsAndroid, BackHandler) sit in the engine block above.
-export { TouchableNativeFeedback } from './components/touchable-native-feedback/index.js';
+// `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.
+// `TouchableNativeFeedback.Ripple(…)` / `.SelectableBackground(…)` are unchanged.
+export { TouchableNativeFeedback } from '@symbiote-native/components';

package/build/jsx-dev-runtime.d.ts

@@ -0,0 +1,3 @@
+export { jsxDEV } from 'react/jsx-dev-runtime';
+export { Fragment } from 'react/jsx-runtime';
+export type { JSX } from './jsx-runtime';

package/build/jsx-dev-runtime.js

@@ -0,0 +1,10 @@
+// The dev twin of `./jsx-runtime`, and it has to be its own file rather than an alias of it.
+//
+// TypeScript resolves the namespace from `<jsxImportSource>/jsx-dev-runtime` whenever `jsx` is
+// `react-jsxdev`, and Babel's automatic runtime imports `jsxDEV` — not `jsx`/`jsxs` — from that
+// same path in a development build. Solid points both subpaths at one file because its emitted
+// runtime is empty either way; ours carries real factories, so the two entries export different
+// names and pointing them at one file would leave a dev build importing a `jsxDEV` that is not
+// there.
+export { jsxDEV } from 'react/jsx-dev-runtime';
+export { Fragment } from 'react/jsx-runtime';

package/build/jsx-namespace.type-check.d.ts

@@ -0,0 +1 @@
+export declare const JSX_NAMESPACE_CHECK: number;

package/build/jsx-namespace.type-check.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "@symbiote-native/react/jsx-runtime";
+const strictIntrinsicAcceptsItsOwnProp = (_jsx("view", { testID: "jsx-namespace-check" }));
+const strictIntrinsicRejectsAnUnknownProp = (_jsx("view", { definitelyNotAViewProp: 1 }));
+export const JSX_NAMESPACE_CHECK = [
+    strictIntrinsicAcceptsItsOwnProp,
+    strictIntrinsicRejectsAnUnknownProp,
+].length;

package/build/jsx-runtime.d.ts

@@ -0,0 +1,62 @@
+import type { ICrossTypedIntrinsics } from '@symbiote-native/components';
+import type { Key } from 'react';
+import type { IViewProps, ITextProps } from './components';
+import type { IPressableProps } from './components/pressable/pressable-props';
+import type { IButtonProps } from './components/button-props';
+import type { IImageProps } from './components/image/image-props';
+import type { IImageBackgroundProps } from './components/image-background-props';
+import type { IInputAccessoryViewProps } from './components/input-accessory-view-props';
+import type { IRefreshControlProps } from './components/refresh-control-props';
+import type { ISafeAreaViewProps } from './components/safe-area-view-props';
+import type { ITouchableNativeFeedbackProps } from './components/touchable-native-feedback/touchable-native-feedback-props';
+import type { ITouchableOpacityProps, ITouchableHighlightProps } from './components/touchable/touchable-props';
+import type { ITouchableWithoutFeedbackProps } from './components/touchable-without-feedback/touchable-without-feedback-props';
+import type { IScrollViewProps } from './components/scroll-view/scroll-view-props';
+import type { ISwitchProps } from './components/switch/switch-props';
+import type { ITextInputProps } from './components/text-input/text-input-props';
+import type { IModalProps } from './components/modal';
+import type { IActivityIndicatorProps } from './components/activity-indicator-props';
+export { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+interface IHostProps {
+    style?: unknown;
+    children?: import('react').ReactNode;
+    [key: string]: unknown;
+}
+export interface ICrossedPrimitiveProps {
+    view: IViewProps;
+    text: ITextProps;
+    pressable: IPressableProps;
+    button: IButtonProps;
+    image: IImageProps;
+    'image-background': IImageBackgroundProps;
+    'input-accessory-view': IInputAccessoryViewProps;
+    'refresh-control': IRefreshControlProps;
+    'safe-area-view': ISafeAreaViewProps;
+    'touchable-native-feedback': ITouchableNativeFeedbackProps;
+    'touchable-opacity': ITouchableOpacityProps;
+    'touchable-highlight': ITouchableHighlightProps;
+    'touchable-without-feedback': ITouchableWithoutFeedbackProps;
+    'scroll-view': IScrollViewProps;
+    switch: ISwitchProps;
+    'text-input': ITextInputProps;
+    modal: IModalProps;
+    'activity-indicator': IActivityIndicatorProps;
+}
+type IWithKey<Props> = Props & {
+    key?: Key | null;
+};
+export declare namespace JSX {
+    type ElementType = import('react').JSX.ElementType;
+    type Element = import('react').JSX.Element;
+    type ElementClass = import('react').JSX.ElementClass;
+    type ElementAttributesProperty = import('react').JSX.ElementAttributesProperty;
+    type ElementChildrenAttribute = import('react').JSX.ElementChildrenAttribute;
+    type LibraryManagedAttributes<C, P> = import('react').JSX.LibraryManagedAttributes<C, P>;
+    type IntrinsicAttributes = import('react').JSX.IntrinsicAttributes;
+    type IntrinsicClassAttributes<T> = import('react').JSX.IntrinsicClassAttributes<T>;
+    interface IntrinsicElements extends ICrossTypedIntrinsics<IHostProps, {
+        [K in keyof ICrossedPrimitiveProps]: IWithKey<ICrossedPrimitiveProps[K]>;
+    }> {
+    }
+}
+export type ISymbioteIntrinsicTag = keyof JSX.IntrinsicElements;

package/build/jsx-runtime.js

@@ -0,0 +1 @@
+export { Fragment, jsx, jsxs } from 'react/jsx-runtime';