@symbiote-native/react 0.2.1 → 0.2.2

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

@@ -5,7 +5,7 @@
 // picks this on an Android host; no Platform.OS read. See ADR 0020.
 // 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';
+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';
+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

@@ -11,7 +11,7 @@
 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

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

@@ -3,7 +3,7 @@
 // Also the base (scroll-view.ts re-exports it) for headless / web. See ADR 0020.
 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

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';
+export * from './index.ios.js';

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

@@ -14,7 +14,7 @@ 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

@@ -12,7 +12,7 @@
 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

@@ -3,4 +3,4 @@
 // 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';
+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

@@ -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/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,8 +5,8 @@
 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,

package/build/index.js

@@ -1,47 +1,47 @@
 // @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';
+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';
+export { createPortal } from './create-portal.js';
 // 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 { 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';
+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,23 +55,23 @@ 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';
@@ -79,7 +79,7 @@ export { InteractionManager } from '@symbiote-native/engine';
 // 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';
+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

@@ -2,4 +2,4 @@
 // 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';
+export * from './index.ios.js';

package/build/modules/animated/index.js

@@ -4,14 +4,14 @@
 // JS-driven, ADR 0016). 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';

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/react",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "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/components": "0.2.1",
     "@symbiote-native/css-parser": "0.2.0",
-    "@symbiote-native/engine": "0.1.1"
+    "@symbiote-native/engine": "0.1.2"
   },
   "peerDependencies": {
     "react": ">=19.0.0",