@symbiote-native/react 0.4.0 → 2.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_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, buildScrollViewHandle, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
 function resolveElement(component) {
     if (component === undefined)
         return undefined;
@@ -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})`);
@@ -289,18 +311,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 +352,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 +375,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 +402,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 +417,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 +452,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 +469,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 +479,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 +496,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 +520,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 +529,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

@@ -1,7 +1,7 @@
-import { type FC, type Ref, type ReactNode } from 'react';
+import type { Ref, ReactNode } from 'react';
 import type { ISymbioteEvent } from '@symbiote-native/engine';
 import type { IHostInstance } from './host-instance';
-import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
 import type { IResponderProps } from './utils/responder-props';
 import type { IStyleProp, ITextStyle, IViewStyle } from './utils/styles';
 export interface IViewProps extends IAccessibilityProps, IAriaProps, IResponderProps {
@@ -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: FC<IViewProps>;
-export declare const Text: FC<ITextProps>;

package/build/components.js

@@ -1,17 +1,5 @@
-// Host primitives exposed to user code. They are thin wrappers that produce the
-// lowercase host elements the reconciler understands (`view` / `text`); the
-// reconciler maps those to shared's mutation API, which resolves them to Fabric
-// view names at commit.
-import { createElement } from 'react';
-import { resolveAccessibilityProps, resolveTextProps, } from '@symbiote-native/components';
-// RN's modern `id` is just a W3C-named alias for `nativeID`: View.js copies it over
-// (`processedProps.nativeID = id`), so `id` wins when both are set. We fold it here and
-// blank the alias so a raw `id` never reaches Fabric (every non-function prop passes
-// through to the slot otherwise).
-function resolveId({ id, ...rest }) {
-    if (id === undefined)
-        return rest;
-    return { ...rest, nativeID: id };
-}
-export const View = props => createElement('symbiote-view', resolveAccessibilityProps(resolveId(props)));
-export const Text = props => createElement('symbiote-text', resolveTextProps(resolveAccessibilityProps(props)));
+// 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.d.ts

@@ -1,7 +1,7 @@
 import createReconciler from 'react-reconciler';
 import { SymbioteSurface, type ISymbioteNode } from '@symbiote-native/engine';
-import { type IHostInstance } from './host-instance';
 type IContainer = SymbioteSurface | ISymbioteNode;
 export declare function withDiscretePriority(run: () => void): void;
-declare const reconciler: createReconciler.Reconciler<IContainer, ISymbioteNode, ISymbioteNode, never, unknown, IHostInstance>;
+declare const reconciler: createReconciler.Reconciler<IContainer, ISymbioteNode, ISymbioteNode, never, unknown, ISymbioteNode>;
+export declare function flushExternalUpdate(run: () => void): void;
 export default reconciler;

package/build/host-config.js

@@ -4,7 +4,7 @@
 // canary: a known-good driver exercising shared end to end.
 import createReconciler from 'react-reconciler';
 import { createContext } from 'react';
-import { appendChild, createElement, createRawText, insertBefore, removeChild, routeProp, setNodeHidden, setText, SymbioteSurface, } from '@symbiote-native/engine';
+import { appendChild, createElement, createRawText, insertBefore, removeChild, routeProp, setNodeComponent, setNodeHidden, setText, SymbioteSurface, } from '@symbiote-native/engine';
 import { DefaultEventPriority, DiscreteEventPriority, NoEventPriority, } from './reconciler-constants.js';
 import { toPublicInstance } from './host-instance.js';
 // Intrinsic JSX type -> Fabric component name. The name table + resolver live once in
@@ -13,6 +13,14 @@ import { toPublicInstance } from './host-instance.js';
 // Adding a primitive is one entry in each name table there, plus its thin
 // component in components.ts: no host-config logic per primitive.
 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.
+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
 // reads `props.ref` for commitAttachRef but does NOT strip it from the props it hands a
@@ -47,8 +55,9 @@ function isSurfaceContainer(container) {
     return container instanceof SymbioteSurface;
 }
 let currentUpdatePriority = NoEventPriority;
-// Run an externally-triggered update (a native event) at discrete priority so it
-// lands on the sync lane and flushSyncWork paints it immediately.
+// Run the callback at discrete priority. Native events and component-owned timers both enter
+// React outside its render loop; callers pair this with flushExternalUpdate when the result must
+// paint synchronously.
 export function withDiscretePriority(run) {
     const previous = currentUpdatePriority;
     currentUpdatePriority = DiscreteEventPriority;
@@ -90,17 +99,35 @@ const reconciler = createReconciler({
     },
     shouldSetTextContent: () => false,
     createInstance(type, props, _container, hostContext) {
-        const descriptor = descriptorFor(type);
+        // 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, 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.
+        //
+        // Inert on landing and deliberately so — nothing registers a behavior under a tag React emits.
+        // The `-managed` split is what keeps it inert once something does: React's TextInput and
+        // Switch wrappers emit `text-input-managed` / `switch-managed`, so a machine
+        // registered on the lowered tag cannot also attach to a wrapper-built node and run twice.
+        const node = createElement(descriptor.component, descriptor.isText, tag);
+        applyProps(node, foldHostBag(type, 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);
     },
@@ -127,8 +154,14 @@ const reconciler = createReconciler({
             removeChild(container, child);
     },
     finalizeInitialChildren: () => false,
-    commitUpdate(node, _type, oldProps, newProps) {
-        applyUpdate(node, oldProps, newProps);
+    commitUpdate(node, type, oldProps, newProps) {
+        // A primitive whose native view depends on a prop (TextInput's `multiline`) can change view on
+        // 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));
     },
     commitTextUpdate(node, _oldText, newText) {
         setText(node, newText);
@@ -174,4 +207,12 @@ const reconciler = createReconciler({
     suspendInstance: () => { },
     waitForCommitToBeReady: () => null,
 });
+// Native-event and timer callbacks both update React from outside the reconciler. Put the update
+// on the discrete lane and synchronously commit it; otherwise a delayed Pressable transition can
+// mutate state but remain visually stale until some unrelated later event flushes React work.
+export function flushExternalUpdate(run) {
+    withDiscretePriority(run);
+    // @ts-expect-error flushSyncWork exists at runtime in react-reconciler 0.33
+    reconciler.flushSyncWork();
+}
 export default reconciler;

package/build/host-instance.js

@@ -1,7 +1,7 @@
 // The public instance a host ref hands back, and the ref -> tag lookup. toPublicInstance and
 // IHostInstance live in @symbiote-native/engine (every adapter inherits the same public instance);
 // this module re-exports them so the React surface (findNodeHandle + IHostInstance, host-config's
-// toPublicInstance graft) is unchanged. findNodeHandle stays React-specific: it is the
+// getPublicInstance) is unchanged. findNodeHandle stays React-specific: it is the
 // RN-shaped "ref -> native tag" lookup over the engine's getNativeTag.
 import { getNativeTag, isSymbioteNode, toPublicInstance, } from '@symbiote-native/engine';
 export { toPublicInstance };

package/build/index.d.ts

@@ -1,37 +1,32 @@
-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';
@@ -67,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;