@symbiote-native/react 0.2.1 → 0.2.3

package/README.md

@@ -85,7 +85,7 @@ canary ([`App.tsx`](../../examples/react/App.tsx)) exercises every block of the
 ## Surface — verified on device, iOS + Android
 
 Every interaction commits through `@symbiote-native/engine` into Fabric, with RN's renderer never in the
-path (R1 + R2 + R3 — decision record 0009):
+path:
 
 - **Primitives** — `View` · `Text` · `Image` · `ImageBackground` · `ScrollView` · `TextInput` ·
   `Pressable` · `Touchable*` · `Button` · `Switch` · `Modal` · `ActivityIndicator` ·
@@ -96,7 +96,7 @@ path (R1 + R2 + R3 — decision record 0009):
   bridgeless host.
 - **`Animated`, both drivers** — JS *and* native driver side by side (`timing` · `spring` · `loop` ·
   `interpolate` · `ValueXY` · tracking · `diffClamp`). Native offload is proven by jamming the JS
-  thread 1.5 s: the native-driven animations keep moving, the JS-driven one stalls (ADR 0016 · 0017).
+  thread 1.5 s: the native-driven animations keep moving, the JS-driven one stalls.
 - **Third-party native views** — `@react-native-community/slider` used straight from the package
   with zero SymbioteNative metadata; the engine derives its events and prop processors from the library's
   own ViewConfig at runtime — the "install the package, use its component" path.

package/build/bootstrap.js

@@ -6,7 +6,7 @@
 // @symbiote-native/components/bootstrap for the full reason).
 import { AppRegistry as RNAppRegistry } from 'react-native';
 import { bootstrapHost } from '@symbiote-native/components/bootstrap';
-import { AppRegistry, setHostRegistrar } from './modules/app-registry';
+import { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
 // Mirrors bare RN's own `AppRegistry.registerComponent(appName, () => App)` idiom, minus the
 // manual host wiring in front of it.
 export function registerApp(App, options) {

package/build/components/activity-indicator/index.android.js

@@ -2,10 +2,10 @@
 // ProgressBar's setStyle(); without it the view throws "setStyle() not called") and
 // `indeterminate: true`, and its default color is the theme (null), per RN's
 // ActivityIndicator.js android branch ({styleAttr:'Normal', indeterminate:true}). Metro
-// picks this on an Android host; no Platform.OS read. See ADR 0020.
+// picks this on an Android host; no Platform.OS read.
 // device-verify-pending: prop names mirror RN's AndroidProgressBar, proven on a real
 // host by the absence of the "setStyle() not called" red box.
-import { createActivityIndicator } from './shared';
+import { createActivityIndicator } from './shared.js';
 export const ActivityIndicator = createActivityIndicator({
     // RN: `color = Platform.OS === 'ios' ? GRAY : null`; Android lets the theme color it.
     defaultColor: null,

package/build/components/activity-indicator/index.ios.js

@@ -1,7 +1,7 @@
 // ActivityIndicator on iOS: RCTActivityIndicatorView takes the size enum + a GRAY
 // default color and no extra native props. Also the base (activity-indicator.ts
-// re-exports it) for headless / web. See ADR 0020.
-import { createActivityIndicator } from './shared';
+// re-exports it) for headless / web.
+import { createActivityIndicator } from './shared.js';
 // RN's iOS default spinner color (Libraries/.../ActivityIndicator.js GRAY).
 const IOS_DEFAULT_COLOR = '#999999';
 export const ActivityIndicator = createActivityIndicator({

package/build/components/activity-indicator/index.js

@@ -1,4 +1,4 @@
 // Base / default ActivityIndicator: re-exports the iOS build. Metro overrides this with
 // activity-indicator.ios.ts / .android.ts on a real host; under tsx / tsc / web the host
-// config resolves here. Filename is the selector, no Platform.OS read. See ADR 0020.
-export * from './index.ios';
+// config resolves here. Filename is the selector, no Platform.OS read.
+export * from './index.ios.js';

package/build/components/activity-indicator/shared.js

@@ -6,7 +6,7 @@
 // The per-platform bits (iOS GRAY default + no extras; Android theme/null + styleAttr +
 // indeterminate) are supplied by the .ios/.android files via `IActivityIndicatorPlatform`.
 import { renderActivityIndicator, resolveAccessibilityProps } from '@symbiote-native/components';
-import { descriptorToReact } from '../../descriptor-to-react';
+import { descriptorToReact } from '../../descriptor-to-react/index.js';
 export function createActivityIndicator(platform) {
     return rawProps => {
         // The wrapper is a raw symbiote-view, not the View FC, so it never runs

package/build/components/button.js

@@ -3,8 +3,8 @@
 // (caller color tints the label; disabled greys it) are shared in @symbiote-native/components/view; here
 // React only composes its TouchableOpacity + Text and forwards the native-only props.
 import { createElement } from 'react';
-import { Text } from '../components';
-import { TouchableOpacity } from './touchable';
+import { Text } from '../components.js';
+import { TouchableOpacity } from './touchable/index.js';
 import { BUTTON_ACCESSIBILITY_ROLE, resolveButtonTextStyle } from '@symbiote-native/components';
 export const Button = props => {
     const { title, onPress, color, disabled, touchSoundDisabled, testID, hasTVPreferredFocus, nextFocusDown, nextFocusForward, nextFocusLeft, nextFocusRight, nextFocusUp, ...accessibilityRest } = props;

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

@@ -8,7 +8,7 @@
 import { createElement, } from 'react';
 import { dlog, resolveClassName } from '@symbiote-native/engine';
 import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, rowKeyExtractor, } from '@symbiote-native/components';
-import { VirtualizedList, } from '../virtualized-list';
+import { VirtualizedList, } from '../virtualized-list/index.js';
 export function FlatList(props) {
     const { ref, data, renderItem, keyExtractor, numColumns = SINGLE_COLUMN, columnWrapperStyle, 
     // onViewableItemsChanged/viewability are typed against ItemT here; in the multi-column path

package/build/components/image/index.js

@@ -1,6 +1,6 @@
 import {} from 'react';
 import { imageStatics, renderImage, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { descriptorToReact } from '../../descriptor-to-react';
+import { descriptorToReact } from '../../descriptor-to-react/index.js';
 // renderImage takes a pre-resolved view + passthrough (the ISwitchViewProps shape), so the
 // adapter folds aria/role and splits the typed transform fields from the forward-only rest.
 // The W3C source aliases (src/srcSet/crossOrigin/referrerPolicy) and width/height become typed

package/build/components/image-background/index.js

@@ -6,7 +6,7 @@
 import { createElement } from 'react';
 import { resolveClassName } from '@symbiote-native/engine';
 import { renderImageBackground, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { descriptorToReact } from '../../descriptor-to-react';
+import { descriptorToReact } from '../../descriptor-to-react/index.js';
 function toChild(child) {
     return typeof child === 'string' ? child : descriptorToReact(child);
 }

package/build/components/keyboard-avoiding-view/index.js

@@ -10,8 +10,8 @@
 import { createElement, useEffect, useRef, useState, } from 'react';
 import { dlog } from '@symbiote-native/engine';
 import { computeInset, readKeyboardFrame, readLayoutFrame, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
-import { View } from '../../components';
-import { Keyboard, KEYBOARD_EVENT } from '../../modules/keyboard';
+import { View } from '../../components.js';
+import { Keyboard, KEYBOARD_EVENT } from '../../modules/keyboard.js';
 export const KeyboardAvoidingView = props => {
     const { behavior, enabled = true, keyboardVerticalOffset = DEFAULT_VERTICAL_OFFSET, contentContainerStyle, style, children, onLayout, 
     // The wrapper is the View FC, which runs resolveAccessibilityProps itself, so

package/build/components/pressable/index.js

@@ -13,7 +13,7 @@
 // shared machine; here we only wire its host + render the View.
 import { createElement, useMemo, useRef, useState } from 'react';
 import { createPressHandlers, createPressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
-import { View } from '../../components';
+import { View } from '../../components.js';
 function resolveStyle(style, state) {
     if (typeof style === 'function')
         return style(state);

package/build/components/scroll-view/index.android.js

@@ -5,20 +5,20 @@
 // scroll handles the gesture before the refresh parent, which mirrors RN's ScrollView.js
 // android branch (cloneElement(refreshControl, {style}, <ScrollView nestedScrollEnabled
 // style={flex:1}>{content}</ScrollView>)). Metro picks this on an Android host; no
-// Platform.OS read. See ADR 0020.
+// Platform.OS read.
 // device-verify-pending: the wrap shape mirrors RN, proven on a real host by the absence
 // of the "addViewAt: failed to insert" crash.
 import { cloneElement, createElement, forwardRef, useImperativeHandle, useRef } from 'react';
 import { dlog } from '@symbiote-native/engine';
 import { buildScrollViewHandle, splitLayoutProps } from '@symbiote-native/components';
-import { usePreparedScrollView, useNativeStickyScrollAttach, } from './shared';
+import { usePreparedScrollView, useNativeStickyScrollAttach, } from './shared.js';
 export const ScrollView = forwardRef((props, forwardedRef) => {
     const { scrollViewIntrinsic, scrollViewBaseStyle, outerProps, style, layoutSplitStyle, content, refreshControl, scrollAnimatedValue, nativeStickyAvailable, } = usePreparedScrollView(props);
     // The node ref backs the imperative handle; it attaches to the inner scroll-view element
     // (the wrap shape leaves the scroll view as the command target, not the RefreshControl).
     const ref = useRef(null);
     // Lazy getter, not the ref itself: the node is null until the element commits, so the handle
-    // must read ref.current on each command (ADR 0024 §3), an eager capture would freeze null.
+    // must read ref.current on each command, an eager capture would freeze null.
     useImperativeHandle(forwardedRef, () => buildScrollViewHandle(() => ref.current), []);
     // Drive the sticky scroll value on the native UI thread (RN attachNativeEvent). No-op on a
     // host without the native animated module. The JS sticky path stays in effect.

package/build/components/scroll-view/index.ios.js

@@ -1,16 +1,16 @@
 // ScrollView on iOS: the RefreshControl is a CHILD of the scroll view, rendered as a
 // sibling BEFORE the content container (RN ScrollView.js: {refreshControl}{contentContainer}).
-// Also the base (scroll-view.ts re-exports it) for headless / web. See ADR 0020.
+// Also the base (scroll-view.ts re-exports it) for headless / web.
 import { createElement, forwardRef, useImperativeHandle, useRef } from 'react';
 import { buildScrollViewHandle } from '@symbiote-native/components';
-import { usePreparedScrollView, useNativeStickyScrollAttach, } from './shared';
+import { usePreparedScrollView, useNativeStickyScrollAttach, } from './shared.js';
 export const ScrollView = forwardRef((props, forwardedRef) => {
     const { scrollViewIntrinsic, scrollViewBaseStyle, outerProps, style, content, refreshControl, scrollAnimatedValue, nativeStickyAvailable, } = usePreparedScrollView(props);
     // The node ref backs the imperative handle; it attaches to the scroll-view element below
     // (passing `ref` through createElement props binds it to the SymbioteNode, as TextInput does).
     const ref = useRef(null);
     // Lazy getter, not the ref itself: the node is null until the element commits, so the handle
-    // must read ref.current on each command (ADR 0024 §3), an eager capture would freeze null.
+    // must read ref.current on each command, an eager capture would freeze null.
     useImperativeHandle(forwardedRef, () => buildScrollViewHandle(() => ref.current), []);
     // Drive the sticky scroll value on the native UI thread (RN attachNativeEvent). No-op on a
     // host without the native animated module. The JS sticky path stays in effect.

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

@@ -1,4 +1,4 @@
 // Base / default ScrollView: re-exports the iOS build. Metro overrides this with
 // scroll-view.ios.ts / .android.ts on a real host; under tsx / tsc / web the host config
-// resolves here. Filename is the selector, no Platform.OS read. See ADR 0020.
-export * from './index.ios';
+// resolves here. Filename is the selector, no Platform.OS read.
+export * from './index.ios.js';

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

@@ -1,20 +1,20 @@
 // ScrollView: shared core. The Fabric tree is nested: the scroll view wraps a content
 // view that holds the children (RN's own ScrollView.js shape). Building that content
 // node, resolving decelerationRate, and the prop plumbing are platform-invariant and
-// live here. What diverges (ADR 0020) is how a RefreshControl integrates: on iOS it is a
+// live here. What diverges is how a RefreshControl integrates: on iOS it is a
 // CHILD of the scroll view (sibling of the content), on Android it WRAPS the scroll view
 // (AndroidSwipeRefreshLayout is the parent, ScrollView nested inside). So the .ios/.android
 // files assemble the final element; the filename selects, no Platform.OS read.
 //
 // The framework-agnostic pieces (decelerationRate, the per-axis intrinsics/base style, the
 // content-size dedupe, the imperative handle, splitLayoutProps, the sticky math, the native
-// scroll-attach) live in @symbiote-native/components (ADR 0024); this file holds only the React
+// scroll-attach) live in @symbiote-native/components; this file holds only the React
 // lifecycle (refs/state/effects) and the element assembly that consumes them.
 import { createElement, useEffect, useRef, useState, } from 'react';
 import { AnimatedValue, dlog, event as animatedEvent, isClassNameValue, isNativeAnimatedAvailable, resolveClassName, } from '@symbiote-native/engine';
 import { attachStickyScroll, didContentSizeChange, forwardScrollEvent, readLayoutDimension, resolveDecelerationRate, selectScrollIntrinsics, } from '@symbiote-native/components';
 import { resolveAccessibilityProps, } from '@symbiote-native/components';
-import { wrapStickyHeaders } from './sticky-header';
+import { wrapStickyHeaders } from './sticky-header.js';
 export function usePreparedScrollView(rawProps) {
     // ScrollView forwards its outer props straight to the native scroll view (not a View
     // wrapper), so it folds aria/role into accessibility* here before forwarding.

package/build/components/scroll-view/sticky-header.js

@@ -7,12 +7,12 @@
 // its own. Forwarding `stickyHeaderIndices` to native is a silent no-op. So we replicate the
 // JS layer: subscribe each flagged child to the scroll offset and translate it to stay pinned.
 // The interpolation mirrors ScrollViewStickyHeader.js (non-inverted + inverted branches) and now
-// lives, framework-agnostic, in @symbiote-native/components (computeStickyInterpolation, ADR 0024); this
+// lives, framework-agnostic, in @symbiote-native/components (computeStickyInterpolation); this
 // file holds the React component shell, the layout state, and the child-wrapping.
 import { Children, createElement, isValidElement, useCallback, useEffect, useRef, useState, } from 'react';
 import { AnimatedInterpolation, AnimatedValue, Platform, dlog, } from '@symbiote-native/engine';
 import { computeStickyInterpolation, nextStickyHeaderY, readLayoutNumber, stickyDebounceMs, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
-import { Animated } from '../../modules/animated';
+import { Animated } from '../../modules/animated/index.js';
 function readChildOnLayout(child) {
     const childProps = child.props;
     if (typeof childProps !== 'object' || childProps === null)

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

@@ -6,7 +6,7 @@
 // SectionList name so existing consumers and the canary keep importing it from
 // here, threading the imperative ref straight through.
 import { createElement } from 'react';
-import { VirtualizedSectionList, } from '../virtualized-section-list';
+import { VirtualizedSectionList, } from '../virtualized-section-list/index.js';
 export function SectionList(props) {
     return createElement((VirtualizedSectionList), props);
 }

package/build/components/switch/index.android.js

@@ -1,7 +1,7 @@
 // Switch, Android host binding. AndroidSwitch takes trackColorForTrue / trackColorForFalse
 // plus trackTintColor (the color for the CURRENT value, which RN computes as value ? true :
 // false), and snaps native back via the `setNativeValue` command (Switch.js:221-225).
-import { createSwitch } from './shared';
+import { createSwitch } from './shared.js';
 export const Switch = createSwitch({
     snapBackCommand: 'setNativeValue',
     trackColorProps: (value, trackColor) => ({

package/build/components/switch/index.ios.js

@@ -1,6 +1,6 @@
 // Switch, iOS host binding. iOS's native Switch takes onTintColor (ON-track) / tintColor
 // (OFF-track), and snaps native back via the `setValue` command (Switch.js:221-225).
-import { createSwitch } from './shared';
+import { createSwitch } from './shared.js';
 export const Switch = createSwitch({
     snapBackCommand: 'setValue',
     trackColorProps: (_value, trackColor) => ({

package/build/components/switch/index.js

@@ -1,6 +1,6 @@
 // Base / default Switch: re-exports the iOS build. Metro overrides this with switch.ios.ts /
 // switch.android.ts on a real host; under tsx / tsc / web the host config resolves here.
-// Filename is the selector, no Platform.OS read. See ADR 0020. The three-layer split (logic
-// in @symbiote-native/components/state, render in @symbiote-native/components/view, hook in switch-shared)
-// replaced the former monolithic Platform.OS-branching component.
-export * from './index.ios';
+// Filename is the selector, no Platform.OS read. The logic lives in
+// @symbiote-native/components/state, the render in @symbiote-native/components/view, and the
+// hook in switch-shared.
+export * from './index.ios.js';

package/build/components/switch/shared.js

@@ -13,7 +13,7 @@ import { useCallback, useLayoutEffect, useReducer, useRef } from 'react';
 import { renderSwitch, switchReducer, createInitialSwitchState, shouldSnapBack, valueFromChange, } from '@symbiote-native/components';
 import { dispatchViewCommand, dlog, } from '@symbiote-native/engine';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
-import { descriptorToReact } from '../../descriptor-to-react';
+import { descriptorToReact } from '../../descriptor-to-react/index.js';
 export function createSwitch(platform) {
     return rawProps => {
         // Switch owns its host element rather than rendering through a symbiote View, so it folds

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

@@ -10,9 +10,9 @@
 // (setTextAndSelection), never a plain prop re-push. See @symbiote-native/components/state/text-input.
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import { dispatchViewCommand, dlog, } from '@symbiote-native/engine';
-import { blurTextInput, setInputBlurred, setInputFocused } from '../../modules/text-input-state';
+import { blurTextInput, setInputBlurred, setInputFocused } from '../../modules/text-input-state.js';
 import { resolveAccessibilityProps, resolveTextInputProps, renderTextInput, foldText, textFromChange, eventCountFromChange, shouldCommandText, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
-import { descriptorToReact } from '../../descriptor-to-react';
+import { descriptorToReact } from '../../descriptor-to-react/index.js';
 export const TextInput = forwardRef((rawProps, forwardedRef) => {
     // TextInput is its own host element (not a View wrapper), so it folds aria/role here.
     const props = resolveAccessibilityProps(rawProps);

package/build/components/touchable/index.js

@@ -10,8 +10,8 @@
 import { createElement, useRef } from 'react';
 import { dlog } from '@symbiote-native/engine';
 import { computePressOutWait, DEFAULT_ACTIVE_OPACITY, DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_MIN_PRESS_DURATION_MS, DEFAULT_UNDERLAY_COLOR, OPACITY_ACTIVE_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, } from '@symbiote-native/components';
-import { Pressable } from '../pressable';
-import { Animated } from '../../modules/animated';
+import { Pressable } from '../pressable/index.js';
+import { Animated } from '../../modules/animated/index.js';
 export const TouchableOpacity = props => {
     const { activeOpacity = DEFAULT_ACTIVE_OPACITY, style, 
     // className is pulled out here, like style, and applied to the inner Animated.View below —

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

@@ -9,8 +9,8 @@
 import { createElement } from 'react';
 import { dlog } from '@symbiote-native/engine';
 import { backgroundProps, canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, } from '@symbiote-native/components';
-import { View } from '../../components';
-import { Pressable } from '../pressable';
+import { View } from '../../components.js';
+import { Pressable } from '../pressable/index.js';
 const TouchableNativeFeedbackImpl = props => {
     const { background, useForeground = false, children, ...rest } = props;
     // RN defaults a missing background to SelectableBackground() so the touchable always has

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

@@ -10,7 +10,7 @@
 // viewability bug is fixed once for all adapters (<adapters_reach_full_feature_parity>).
 // React supplies only its lifecycle (state/refs/effects), the imperative-handle wiring,
 // and the per-cell element creation (createElement). Lists have no Descriptor render fn
-// (the cell content is React's own children); see core/components/.docs-note-lists.md.
+// (the cell content is React's own children).
 //
 // Imperative scrolling (scrollToIndex / scrollToOffset / scrollToItem / scrollToEnd)
 // resolves to an offset and rides the ScrollView's native scrollTo command via its handle
@@ -19,8 +19,8 @@
 import { createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, 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, NO_CONTENT_LENGTH_SENT, averageMeasuredLength, buildListPlan, buildOffsets, buildViewabilityPairs, computeEndReached, computeStartReached, computeViewableSet, computeWindow, diffViewable, highestMeasuredIndex as findHighestMeasuredIndex, maxMinimumViewTime, offsetForIndex as resolveOffsetForIndex, readLayoutLength, readScrollOffset, throttleWindow, } from '@symbiote-native/components';
-import { ScrollView } from '../scroll-view';
-import { RefreshControl } from '../refresh-control';
+import { ScrollView } from '../scroll-view/index.js';
+import { RefreshControl } from '../refresh-control/index.js';
 function resolveElement(component) {
     if (component === undefined)
         return undefined;

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

@@ -8,7 +8,7 @@
 import { createElement, useImperativeHandle, useRef, } from 'react';
 import { dlog, Platform } from '@symbiote-native/engine';
 import { flattenSections, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
-import { VirtualizedList, } from '../virtualized-list';
+import { VirtualizedList, } from '../virtualized-list/index.js';
 function resolveSeparator(component) {
     if (component === undefined)
         return undefined;

package/build/create-portal.js

@@ -11,7 +11,7 @@
 // independently-mounted SymbioteSurface. Cross-surface targets aren't wired: resetAfterCommit only
 // fires for the primary root's own container, so a different surface's tree would never repaint.
 import { isSymbioteNode, SymbioteSurface } from '@symbiote-native/engine';
-import reconciler from './host-config';
+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?');

package/build/create-tunnel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// createTunnel — the cross-surface answer to createPortal's same-surface-only v1 scope
-// (react-adapter-portal skill). Prior art: pmndrs/tunnel-rat exists precisely because a real
+// createTunnel — the cross-surface answer to createPortal's same-surface-only scope.
+// Prior art: pmndrs/tunnel-rat exists precisely because a real
 // createPortal cannot reach across two genuinely separate reconciler roots — see
 // github.com/facebook/react/issues/17147 ("react-reconciler & portals: missing root
 // instance"). The fix is the one the ecosystem already settled on: don't reach into a

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

@@ -2,7 +2,7 @@
 // framework-agnostic `Descriptor` tree; this maps it onto React elements. The resulting
 // host element (`symbiote-view`, `symbiote-activity-indicator`, …) flows on through the
 // react-reconciler host config → engine → Fabric, exactly like a hand-written JSX host
-// element. The wolf-tui twin is `packages/react/src/wnode/wnode-to-react.tsx`.
+// element.
 import { createElement } from 'react';
 export function descriptorToReact(node, index) {
     const children = node.children.map(toChild);

package/build/hooks/use-color-scheme.js

@@ -2,7 +2,7 @@
 // on change. Mirrors RN's Libraries/Utilities/useColorScheme.js: a thin
 // useSyncExternalStore over Appearance's change event + current scheme read.
 import { useSyncExternalStore } from 'react';
-import { Appearance } from '../modules/appearance';
+import { Appearance } from '../modules/appearance.js';
 const subscribe = (onStoreChange) => {
     const subscription = Appearance.addChangeListener(onStoreChange);
     return () => subscription.remove();

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

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

package/build/host-config.js

@@ -5,12 +5,12 @@
 import createReconciler from 'react-reconciler';
 import { createContext } from 'react';
 import { appendChild, createElement, createRawText, insertBefore, removeChild, routeProp, setText, SymbioteSurface, } from '@symbiote-native/engine';
-import { DefaultEventPriority, DiscreteEventPriority, NoEventPriority, } from './reconciler-constants';
-import { toPublicInstance } from './host-instance';
+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
 // @symbiote-native/components, shared by every adapter so the names can't drift (one engine, one
-// Fabric). The table is Metro-split (.ios/.android, filename selects, no Platform.OS read,
-// per ADR 0020). Adding a primitive is one entry in each name table there, plus its thin
+// Fabric). The table is Metro-split (.ios/.android, filename selects, no Platform.OS read).
+// 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';
 // React-reserved prop keys that must never reach Fabric. `children` is the element

package/build/index.js

@@ -1,47 +1,49 @@
 // @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
-// (R1) and shared's clone-on-write engine (R2) before any non-React adapter.
-export { View, Text } from './components';
-export { Image, setImageSourceResolver } from './components/image';
-export { ImageBackground } from './components/image-background';
-export { ScrollView } from './components/scroll-view';
-export { TextInput } from './components/text-input';
-export { InputAccessoryView } from './components/input-accessory-view';
-export { Keyboard, KEYBOARD_EVENT } from './modules/keyboard';
-export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
-export { StatusBar } from './modules/status-bar';
-export { Switch } from './components/switch';
-export { ActivityIndicator } from './components/activity-indicator';
-export { SafeAreaView } from './components/safe-area-view';
-export { RefreshControl } from './components/refresh-control';
-export { Modal } from './components/modal';
-export { Pressable } from './components/pressable';
-export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable';
-export { Button } from './components/button';
-export { FlatList } from './components/flat-list';
-export { SectionList } from './components/section-list';
-export { VirtualizedSectionList } from './components/virtualized-section-list';
-export { VirtualizedList } from './components/virtualized-list';
-export { mount, unmount } from './render';
+// 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/index.js';
+export { TextInput } from './components/text-input/index.js';
+export { InputAccessoryView } from './components/input-accessory-view/index.js';
+export { Keyboard, KEYBOARD_EVENT } from './modules/keyboard.js';
+export { KeyboardAvoidingView } from './components/keyboard-avoiding-view/index.js';
+export { StatusBar } from './modules/status-bar/index.js';
+export { Switch } from './components/switch/index.js';
+export { ActivityIndicator } from './components/activity-indicator/index.js';
+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';
+export { VirtualizedList } from './components/virtualized-list/index.js';
+export { mount, unmount } from './render.js';
 // createPortal: react-reconciler's Fiber-level portal, working here because @symbiote-native/react is
 // mutation-mode (unlike stock RN's persistent-mode Fabric renderer, which doesn't support it —
 // see create-portal.ts). v1 scope: target must be an already-mounted node in the SAME surface.
-export { createPortal } from './create-portal';
-// createTunnel: cross-surface content sharing (createPortal/Teleport stay same-surface-only
-// by design — see create-tunnel.tsx and the react-adapter-portal skill for why).
-export { createTunnel } from './create-tunnel';
+export { createPortal } from './create-portal.js';
+// createTunnel: cross-surface content sharing. createPortal/Teleport stay same-surface-only
+// by design — a real React portal can't reach across two separate reconciler roots either
+// (see github.com/facebook/react/issues/17147), so reaching a different surface means letting
+// that surface commit its own content by reading from a shared store instead.
+export { createTunnel } from './create-tunnel.js';
 // descriptorToReact: the @symbiote-native/components Descriptor → React.createElement bridge. Exported so
 // an external wrapper package (e.g. @symbiote-native/slider/react over a third-party native view) can map
 // a shared render fn's Descriptor onto React elements through the SAME bridge the adapter uses.
-export { descriptorToReact } from './descriptor-to-react';
-export { findNodeHandle } from './host-instance';
+export { descriptorToReact } from './descriptor-to-react/index.js';
+export { findNodeHandle } from './host-instance.js';
 // AppRegistry: RN's app entry point over `mount`. setHostRegistrar wires RN's own
 // registrar so the native Fabric host finds our runnable by app key.
-export { AppRegistry, setHostRegistrar } from './modules/app-registry';
+export { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
 // Animated bridge: createAnimatedComponent + Animated.View/Text/Image, driving the
-// shared JS Animated engine (ADR 0016). Imperative timing/spring drivers merge into
-// this namespace once they land in shared.
-export { Animated, createAnimatedComponent } from './modules/animated';
+// shared JS Animated engine. Imperative timing/spring drivers merge into this
+// namespace once they land in shared.
+export { Animated, createAnimatedComponent } from './modules/animated/index.js';
 // Framework-agnostic runtime utilities live in shared; the adapter re-exports them
 // so app code names only @symbiote-native/react (RN's surface, one import root).
 export { Platform, StyleSheet } from '@symbiote-native/engine';
@@ -55,31 +57,31 @@ export { PlatformColor, DynamicColorIOS, processColor } from '@symbiote-native/e
 export { setNativeViewConfigSource } from '@symbiote-native/engine';
 // Runtime modules: native-bridge consumers, same shape as Keyboard/StatusBar:
 // thin JS over getNativeModule + device events, no Fabric component of their own.
-export { Dimensions } from './modules/dimensions';
+export { Dimensions } from './modules/dimensions.js';
 export { PixelRatio } from '@symbiote-native/engine';
-export { useWindowDimensions } from './hooks/use-window-dimensions';
-export { Appearance } from './modules/appearance';
-export { useColorScheme } from './hooks/use-color-scheme';
-export { AppState } from './modules/app-state';
-export { Alert } from './modules/alert';
-export { ActionSheetIOS } from './modules/action-sheet-ios';
-export { Linking } from './modules/linking';
-export { Vibration } from './modules/vibration';
-export { Share } from './modules/share';
-export { AccessibilityInfo } from './modules/accessibility-info';
-export { I18nManager } from './modules/i18n-manager';
-export { Settings } from './modules/settings';
+export { useWindowDimensions } from './hooks/use-window-dimensions.js';
+export { Appearance } from './modules/appearance.js';
+export { useColorScheme } from './hooks/use-color-scheme.js';
+export { AppState } from './modules/app-state.js';
+export { Alert } from './modules/alert.js';
+export { ActionSheetIOS } from './modules/action-sheet-ios.js';
+export { Linking } from './modules/linking.js';
+export { Vibration } from './modules/vibration.js';
+export { Share } from './modules/share.js';
+export { AccessibilityInfo } from './modules/accessibility-info/index.js';
+export { I18nManager } from './modules/i18n-manager.js';
+export { Settings } from './modules/settings.js';
 // Interaction subsystems: gestures, deferred work, and layout transitions.
 export { PanResponder } from '@symbiote-native/engine';
-export { LayoutAnimation } from './modules/layout-animation';
+export { LayoutAnimation } from './modules/layout-animation.js';
 // InteractionManager is pure JS, so it lives in shared; re-exported here so app code
 // names only @symbiote-native/react (RN's single import root).
 export { InteractionManager } from '@symbiote-native/engine';
 // Android-only surface (the second-platform pass). Each is a thin JS shim over an
 // Android native module / Fabric view, inert on iOS (no module → graceful no-op,
-// no native view → degrade to a plain container). Native module names are
-// device-verify-pending; see .docs/native-module-platform-routing.md.
-export { BackHandler } from './modules/back-handler';
-export { ToastAndroid } from './modules/toast-android';
-export { PermissionsAndroid, PERMISSIONS, RESULTS } from './modules/permissions-android';
-export { TouchableNativeFeedback } from './components/touchable-native-feedback';
+// no native view → degrade to a plain container). Native module name correctness
+// can only be confirmed on a real device/simulator, not headless tests.
+export { BackHandler } from './modules/back-handler.js';
+export { ToastAndroid } from './modules/toast-android.js';
+export { PermissionsAndroid, PERMISSIONS, RESULTS } from './modules/permissions-android.js';
+export { TouchableNativeFeedback } from './components/touchable-native-feedback/index.js';

package/build/modules/accessibility-info/index.js

@@ -1,5 +1,5 @@
 // Base / default AccessibilityInfo: re-exports the iOS build. Metro overrides this with
 // accessibility-info.ios.ts / .android.ts on a real host; under tsx / tsc / web the host
 // config resolves here. Filename is the selector, no Platform.OS read. See
-// accessibility-info-shared.ts.
-export * from './index.ios';
+// shared.ts.
+export * from './index.ios.js';

package/build/modules/action-sheet-ios.js

@@ -1,4 +1,4 @@
-// ActionSheetIOS now lives framework-agnostic in @symbiote-native/engine (imperative
+// ActionSheetIOS lives framework-agnostic in @symbiote-native/engine (imperative
 // native-bridge module, no visual, no lifecycle). The React adapter re-exports it
-// verbatim so the public surface is unchanged. See ADR 0019.
+// verbatim so the public surface is unchanged.
 export { ActionSheetIOS } from '@symbiote-native/engine';

package/build/modules/alert.js

@@ -1,5 +1,5 @@
-// Alert now lives framework-agnostic in @symbiote-native/engine (imperative native-bridge
+// Alert lives framework-agnostic in @symbiote-native/engine (imperative native-bridge
 // module, no visual, no lifecycle). The React adapter re-exports it verbatim so the
 // public surface is unchanged; the platform split (alert.ios/alert.android) lives
-// inside engine. See ADR 0019 + the engine relocation.
+// inside engine.
 export { Alert } from '@symbiote-native/engine';

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

@@ -1,7 +1,7 @@
 // createAnimatedComponent wraps a base component (View / Text / Image / any) so
 // it can take AnimatedNodes in its props. Reimplemented thin against symbiote's
 // shared primitive: NO native driver, NO scheduleUpdate fallback. A frame is the
-// scoped commit setNativeProps drives from the AnimatedProps leaf (ADR 0016). RN's
+// scoped commit setNativeProps drives from the AnimatedProps leaf. RN's
 // createAnimatedComponent + useAnimatedProps + createAnimatedPropsHook are the
 // structural reference, but their native helpers are deliberately not imported.
 //
@@ -58,7 +58,7 @@ export function createAnimatedComponent(Component) {
                 previous.__detach();
             }
         }, [animatedProps]);
-        // Native-driver trigger (ADR 0017). Runs after attach: push the leaf -> style -> transform
+        // Native-driver trigger. Runs after attach: push the leaf -> style -> transform
         // -> interpolation -> value chain native so the props animate on the UI thread (no JS lag).
         // Cascades down to the source value; the scroll event attaches to that same value
         // (idempotent). __makeNative is idempotent, so re-firing on a leaf swap is safe.

package/build/modules/animated/index.js

@@ -1,17 +1,17 @@
 // The Animated namespace for @symbiote-native/react. createAnimatedComponent applied to
 // the adapter's primitives gives Animated.View / Text / Image; the value graph,
 // easing and imperative drivers come from @symbiote-native/engine (framework-agnostic,
-// JS-driven, ADR 0016). Both halves meet here in one `Animated` object so the
+// JS-driven). Both halves meet here in one `Animated` object so the
 // familiar surface (`Animated.timing(new Animated.Value(0), …).start()`) works.
 import { AnimatedValue, AnimatedValueXY, AnimatedColor, Easing, Platform, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, } from '@symbiote-native/engine';
-import { View, Text } from '../../components';
-import { Image } from '../../components/image';
-import { ScrollView } from '../../components/scroll-view';
-import { FlatList } from '../../components/flat-list';
-import { SectionList } from '../../components/section-list';
-import { createAnimatedComponent } from './create-animated-component';
+import { View, Text } from '../../components.js';
+import { Image } from '../../components/image/index.js';
+import { ScrollView } from '../../components/scroll-view/index.js';
+import { FlatList } from '../../components/flat-list/index.js';
+import { SectionList } from '../../components/section-list/index.js';
+import { createAnimatedComponent } from './create-animated-component.js';
 import { AnimatedMock } from '@symbiote-native/engine';
-export { createAnimatedComponent } from './create-animated-component';
+export { createAnimatedComponent } from './create-animated-component.js';
 // The pure graph leaves now live in @symbiote-native/engine (they extend AnimatedWithChildren,
 // no React); re-exported here so @symbiote-native/react's Animated surface is unchanged.
 export { AnimatedProps, AnimatedStyle, AnimatedTransform } from '@symbiote-native/engine';
@@ -26,7 +26,7 @@ const AnimatedImage = createAnimatedComponent(Image);
 // back, and a static `createAnimatedComponent(ScrollView)` at init would read ScrollView
 // inside its own TDZ. A memoized getter defers the wrap past module init, so the
 // cycle never fires. The wrappers carry no per-component animation logic; they only
-// add animated-prop support, so the adapter stays thin (invariant adapters_stay_thin).
+// add animated-prop support, keeping the adapter a thin layer over the engine.
 // The native scroll-event attach (Animated.event onto contentOffset) is owned by
 // ScrollView itself.
 let animatedScrollView;

package/build/modules/app-registry/index.js

@@ -6,7 +6,7 @@
 // createElement + mount — so existing RN app-entry code ports verbatim.
 import { createElement } from 'react';
 import { createAppRegistry, dlog, } from '@symbiote-native/engine';
-import { mount } from '../../render';
+import { mount } from '../../render.js';
 function runnableFor(componentProvider, getWrapperComponentProvider) {
     return appParameters => {
         dlog(`AppRegistry: mounting on rootTag ${String(appParameters.rootTag)}`);

package/build/modules/i18n-manager.js

@@ -1,4 +1,4 @@
 // I18nManager now lives framework-agnostic in @symbiote-native/engine (imperative
 // native-bridge module, no visual, no lifecycle). The React adapter re-exports it
-// verbatim so the public surface is unchanged. See ADR 0019.
+// verbatim so the public surface is unchanged.
 export { I18nManager } from '@symbiote-native/engine';

package/build/modules/linking.js

@@ -1,4 +1,4 @@
 // Linking now lives framework-agnostic in @symbiote-native/engine (imperative native-bridge
 // module, no visual, no lifecycle). The React adapter re-exports it verbatim; the
-// platform split (linking.ios/linking.android) lives inside engine. See ADR 0019.
+// platform split (linking.ios/linking.android) lives inside engine.
 export { Linking } from '@symbiote-native/engine';

package/build/modules/settings.js

@@ -1,4 +1,4 @@
 // Settings now lives framework-agnostic in @symbiote-native/engine (imperative native-bridge
 // module, no visual, no lifecycle). The React adapter re-exports it verbatim so the
-// public surface is unchanged. See ADR 0019.
+// public surface is unchanged.
 export { Settings } from '@symbiote-native/engine';

package/build/modules/share.js

@@ -1,4 +1,4 @@
 // Share now lives framework-agnostic in @symbiote-native/engine (imperative native-bridge
 // module, no visual, no lifecycle). The React adapter re-exports it verbatim; the
-// platform split (share.ios/share.android) lives inside engine. See ADR 0019.
+// platform split (share.ios/share.android) lives inside engine.
 export { Share } from '@symbiote-native/engine';

package/build/modules/status-bar/index.android.js

@@ -13,7 +13,7 @@
 // not installed" because RN installs global.RN$stopSurface from its own renderer, which this
 // renderer replaces. Now that render.ts installs RN$stopSurface and tears surfaces down cleanly, the
 // relayout survives and the bar updates without blanking (verified on device: show/hide +
-// light/dark text). See render.ts installStopSurfaceGlobal + native-module-platform-routing.
+// light/dark text).
 import { useEffect } from 'react';
 import { dlog, getNativeModule, processColor, STATUS_BAR_MANAGER, } from '@symbiote-native/engine';
 // processColor returns `unknown` (its result is platform-dependent); narrow to the

package/build/modules/status-bar/index.ios.js

@@ -1,6 +1,6 @@
 // StatusBar on iOS: drives the iOS `StatusBarManager` TurboModule from its props
-// (and from static methods). The native contract is RN's spec at
-// .vendors/react-native/.../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerIOS.js:
+// (and from static methods). The native contract matches React Native's own
+// NativeStatusBarManagerIOS spec:
 //   setStyle(statusBarStyle?: string, animated: boolean)
 //   setHidden(hidden: boolean, withAnimation: 'none' | 'fade' | 'slide')
 //   setNetworkActivityIndicatorVisible(visible: boolean)

package/build/modules/status-bar/index.js

@@ -1,4 +1,4 @@
 // Base / default StatusBar: re-exports the iOS build. Metro overrides this with
 // status-bar.ios.ts / .android.ts on a real host; under tsx / tsc / web the host config
 // resolves here. Filename is the selector, no Platform.OS read. See status-bar-shared.ts.
-export * from './index.ios';
+export * from './index.ios.js';

package/build/modules/toast-android.js

@@ -1,4 +1,4 @@
-// ToastAndroid now lives framework-agnostic in @symbiote-native/engine (imperative
+// ToastAndroid lives framework-agnostic in @symbiote-native/engine (imperative
 // native-bridge module, no visual, no lifecycle). The React adapter re-exports it
-// verbatim so the public surface is unchanged. See ADR 0019.
+// verbatim so the public surface is unchanged.
 export { ToastAndroid } from '@symbiote-native/engine';

package/build/modules/vibration.js

@@ -1,4 +1,4 @@
-// Vibration now lives framework-agnostic in @symbiote-native/engine (imperative native-bridge
+// Vibration lives framework-agnostic in @symbiote-native/engine (imperative native-bridge
 // module, no visual, no lifecycle). The React adapter re-exports it verbatim; the
-// platform split (vibration.ios/vibration.android) lives inside engine. See ADR 0019.
+// platform split (vibration.ios/vibration.android) lives inside the engine.
 export { Vibration } from '@symbiote-native/engine';

package/build/render.js

@@ -2,8 +2,8 @@
 // rootTag (via AppRegistry.registerRunnable); we create a surface for it and let
 // the reconciler drive shared, which commits into nativeFabricUIManager.
 import { createSurface, disposeRoot, setEventDispatcher, dlog, } from '@symbiote-native/engine';
-import reconciler, { withDiscretePriority } from './host-config';
-import { LegacyRoot } from './reconciler-constants';
+import reconciler, { withDiscretePriority } from './host-config.js';
+import { LegacyRoot } from './reconciler-constants.js';
 const noop = () => { };
 // A native event runs the listener (which may call setState) outside React's
 // loop. Run it at discrete priority so the update takes the sync lane, then

package/metro-css-parser.cjs

@@ -6,8 +6,7 @@
 // requiring FILE's own location, so this indirection is what actually removes the extra install
 // step, not pnpm hoisting (which does not propagate this transitively across workspace packages
 // the way a flat classic node_modules would). .cjs, not .js: this package is "type": "module",
-// and Metro's babelTransformerPath loading expects a require()-able module. See the
-// symbiote-sfc-style-compiler skill.
+// and Metro's babelTransformerPath loading expects a require()-able module.
 // createCssMetroTransformer is a factory, not a ready transformer — Metro's
 // babelTransformerPath needs the actual {transform, getCacheKey} object it returns,
 // not the css-parser package barrel.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/react",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "SymbioteNative's React adapter — a react-reconciler host config (mutation mode) driving real native iOS/Android views through stock React Native Fabric.",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
   },
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@symbiote-native/components": "0.2.0",
-    "@symbiote-native/css-parser": "0.2.0",
-    "@symbiote-native/engine": "0.1.1"
+    "@symbiote-native/components": "0.2.2",
+    "@symbiote-native/css-parser": "0.2.1",
+    "@symbiote-native/engine": "0.1.3"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -48,7 +48,7 @@
     "@types/react": "^19.2.0",
     "@types/react-reconciler": "^0.32.2",
     "react": "19.2.3",
-    "@symbiote-native/test-utils": "0.1.1"
+    "@symbiote-native/test-utils": "0.1.3"
   },
   "scripts": {
     "typecheck": "tsc --build",