@symbiote-native/vue 0.2.0 → 0.3.1

package/build/bootstrap.js

@@ -4,7 +4,7 @@
 // header for why anything importing react-native must stay there.
 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 real Vue's createApp(App).mount(selector) two-step idiom.
 export function createApp(App, options = {}) {
     return {

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

@@ -2,7 +2,7 @@
 // ProgressBar's setStyle(); without it the view throws "setStyle() not called") and
 // `indeterminate: true`, and its default color is the theme (null). Metro picks this on an
 // Android host; no Platform.OS read. Mirrors the React adapter's Android binding. See ADR 0020.
-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. Mirrors the React adapter's iOS binding. 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
 // 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

@@ -9,8 +9,8 @@
 // indeterminate) are supplied by the .ios/.android files via `IActivityIndicatorPlatform`.
 import { defineComponent } from '@vue/runtime-core';
 import { renderActivityIndicator } from '@symbiote-native/components';
-import { descriptorToVue } from '../../descriptor-to-vue';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+import { descriptorToVue } from '../../descriptor-to-vue.js';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 function normalizeSize(size) {
     if (size === 'large')
         return 'large';

package/build/components/button.js

@@ -4,9 +4,9 @@
 // forwards the native-only props. The Vue twin of the React adapter's Button.
 import { defineComponent, h } from '@vue/runtime-core';
 import { BUTTON_ACCESSIBILITY_ROLE, resolveButtonTextStyle, } from '@symbiote-native/components';
-import { Text } from '../components';
-import { TouchableOpacity } from './touchable';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { Text } from '../components.js';
+import { TouchableOpacity } from './touchable.js';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 // The props Button consumes / re-maps itself; everything else (accessibility, aria, TV-focus,
 // testID, nativeID) forwards to the TouchableOpacity. `title` becomes the Text child; onPress and
 // disabled re-map; touchSoundDisabled maps to the pressable's android_disableSound.

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

@@ -16,8 +16,8 @@
 import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
 import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, rowKeyExtractor, } from '@symbiote-native/components';
 import { dlog, resolveClassName, } from '@symbiote-native/engine';
-import { VirtualizedList } from '../virtualized-list';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+import { VirtualizedList } from '../virtualized-list/index.js';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 // VirtualizedList is itself a generic component (generic construct signature), which h()'s overloads
 // can't resolve. Drive it through a loose functional-component handle (generic-component h()
 // limitation — the ItemT surface is proven at the typed FlatList boundary above).

package/build/components/image-background.js

@@ -10,8 +10,8 @@
 import { h } from '@vue/runtime-core';
 import { renderImageBackground, resolveAccessibilityProps, } from '@symbiote-native/components';
 import { resolveClassName, } from '@symbiote-native/engine';
-import { descriptorToVue } from '../descriptor-to-vue';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { descriptorToVue } from '../descriptor-to-vue.js';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function asString(value) {
     return typeof value === 'string' ? value : undefined;
 }

package/build/components/image.js

@@ -13,8 +13,8 @@
 // the forward-only rest (events, blurRadius, capInsets, testID, accessibility*) is typed as the
 // a11y intersection so resolveAccessibilityProps folds aria-* into accessibility* over it.
 import { imageStatics, renderImage, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { descriptorToVue } from '../descriptor-to-vue';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { descriptorToVue } from '../descriptor-to-vue.js';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 export { setImageSourceResolver } from '@symbiote-native/components';
 function asString(value) {
     return typeof value === 'string' ? value : undefined;

package/build/components/input-accessory-view.js

@@ -9,7 +9,7 @@
 // so resolveAccessibilityProps lands aria-* onto the host node.
 import { h } from '@vue/runtime-core';
 import { renderInputAccessoryView, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function asString(value) {
     return typeof value === 'string' ? value : undefined;
 }

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

@@ -12,7 +12,7 @@
 import { defineComponent, h, ref, onMounted, onUnmounted } from '@vue/runtime-core';
 import { Keyboard, KEYBOARD_EVENT, dlog, } from '@symbiote-native/engine';
 import { computeInset, readKeyboardFrame, readLayoutFrame, resolveKeyboardAvoidingLayout, resolveAccessibilityProps, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 // A style prop is an object (a style record) or an array of them; numbers/strings/null degrade
 // to undefined (the engine flattens what it gets). A runtime guard, not a cast.
 function isStyleProp(value) {

package/build/components/modal.js

@@ -13,7 +13,7 @@
 import { defineComponent, h, ref, watch } from '@vue/runtime-core';
 import { createInitialModalState, modalReducer, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
 import { dlog, } from '@symbiote-native/engine';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function asBoolean(value) {
     return typeof value === 'boolean' ? value : undefined;
 }

package/build/components/pressable.js

@@ -15,8 +15,8 @@
 import { defineComponent, h, ref, shallowRef } from '@vue/runtime-core';
 import { createPressHandlers, createPressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, resolveAccessibilityProps, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
 import { measure, isSymbioteNode, } from '@symbiote-native/engine';
-import { View } from '../components';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { View } from '../components.js';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 // The emits-options validator for the full press surface. Reused verbatim as the `emits` of every
 // Touchable* wrapper (they expose the same events), so the runtime list lives in exactly one place.
 export const PRESSABLE_EMITS = {

package/build/components/refresh-control.js

@@ -14,7 +14,7 @@
 import { defineComponent, h } from '@vue/runtime-core';
 import { dlog } from '@symbiote-native/engine';
 import { resolveAccessibilityProps, } from '@symbiote-native/components';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 // Copy every non-consumed attr into a bag typed as the a11y intersection (the accumulator is BUILT
 // at that type, a real narrowing, not a cast), then fold aria-*/role into the canonical
 // accessibility* props. Children cross via slots, never attrs. When the Android wrap re-invokes

package/build/components/safe-area-view.js

@@ -10,7 +10,7 @@
 import { defineComponent, h } from '@vue/runtime-core';
 import { dlog } from '@symbiote-native/engine';
 import { resolveAccessibilityProps, } from '@symbiote-native/components';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 // Copy every attr into a bag typed as the a11y intersection (the accumulator is BUILT at that
 // type, a real narrowing, not a cast), then fold aria-*/role into the canonical accessibility*
 // props before they reach the host. style / onLayout / testID forward unchanged.

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

@@ -15,7 +15,7 @@
 import { h, isVNode } from '@vue/runtime-core';
 import { dlog } from '@symbiote-native/engine';
 import { splitLayoutProps } from '@symbiote-native/components';
-import { createScrollView } from './shared';
+import { createScrollView } from './shared.js';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }

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

@@ -4,7 +4,7 @@
 // childless sibling. Also the base (scroll-view.ts re-exports it) for headless / web. Metro picks
 // this on an iOS host; no Platform.OS read. Mirrors the React adapter's iOS binding.
 import { h } from '@vue/runtime-core';
-import { createScrollView } from './shared';
+import { createScrollView } from './shared.js';
 export const ScrollView = createScrollView({
     assemble: input => {
         // Sibling placement: RefreshControl before content (RN iOS). The node ref stays on the scroll

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 / scroll-view.android.ts on a real host; under tsx / tsc / web the host
 // resolves here. Filename is the selector, no Platform.OS read. See ADR 0020 / 0024.
-export * from './index.ios';
+export * from './index.ios.js';

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

@@ -21,8 +21,8 @@
 import { defineComponent, h, isVNode, markRaw, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
 import { attachStickyScroll, buildScrollViewHandle, didContentSizeChange, forwardScrollEvent, readLayoutDimension, resolveAccessibilityProps, resolveDecelerationRate, selectScrollIntrinsics, } from '@symbiote-native/components';
 import { AnimatedValue, dlog, event as animatedEvent, isClassNameValue, isNativeAnimatedAvailable, isSymbioteNode, resolveClassName, } from '@symbiote-native/engine';
-import { wrapStickyHeaders } from './sticky-header';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+import { wrapStickyHeaders } from './sticky-header.js';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 function isHandler(value) {
     return typeof value === 'function';
 }

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

@@ -14,7 +14,7 @@
 import { defineComponent, h, isVNode, ref, shallowRef, watch, watchEffect, markRaw, } from '@vue/runtime-core';
 import { AnimatedValue, AnimatedInterpolation, 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 isHandler(value) {
     return typeof value === 'function';
 }

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

@@ -12,8 +12,8 @@
 // synthesized events (endReached/startReached/refresh) are bridged, gated on listener presence so
 // the inner list keeps its RefreshControl / edge-reached gating.
 import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
-import { VirtualizedSectionList, } from '../virtualized-section-list';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+import { VirtualizedSectionList, } from '../virtualized-section-list/index.js';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 // VirtualizedSectionList is a generic component (generic construct signature), which h()'s overloads
 // can't resolve. Drive it through a loose functional-component handle (generic-component h() limit).
 const VirtualizedSectionListHost = VirtualizedSectionList;

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

@@ -2,7 +2,7 @@
 // trackTintColor (the color for the CURRENT value), and snaps native back via the
 // `setNativeValue` command. Metro picks this on an Android host; no Platform.OS read.
 // Mirrors the React adapter's Android binding. See ADR 0020.
-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,7 +1,7 @@
 // Switch on iOS: the native Switch takes onTintColor (ON-track) / tintColor (OFF-track) and
 // snaps native back via the `setValue` command. Also the base (switch.ts re-exports it) for
 // headless / web. Mirrors the React adapter's iOS binding. See ADR 0020.
-import { createSwitch } from './shared';
+import { createSwitch } from './shared.js';
 export const Switch = createSwitch({
     snapBackCommand: 'setValue',
     trackColorProps: (_value, trackColor) => ({

package/build/components/switch/index.js

@@ -2,4 +2,4 @@
 // switch.android.ts on a real host; under tsx / tsc / web the host resolves here. Filename is
 // the selector, no Platform.OS read. See ADR 0020. Switch is the first component to bring the
 // state half (the reducer) into the Vue adapter: render-and-state, not render-only.
-export * from './index.ios';
+export * from './index.ios.js';

package/build/components/switch/shared.js

@@ -12,9 +12,9 @@
 import { defineComponent, ref, shallowRef, watch } from '@vue/runtime-core';
 import { renderSwitch, switchReducer, createInitialSwitchState, shouldSnapBack, valueFromChange, } from '@symbiote-native/components';
 import { dispatchViewCommand, isSymbioteNode, dlog, } from '@symbiote-native/engine';
-import { descriptorToVue } from '../../descriptor-to-vue';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
-import { resolveModelValue, emitModelUpdate } from '../../utils/model-binding';
+import { descriptorToVue } from '../../descriptor-to-vue.js';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
+import { resolveModelValue, emitModelUpdate } from '../../utils/model-binding.js';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }

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

@@ -15,9 +15,9 @@
 import { defineComponent, onBeforeUnmount, ref, shallowRef, watch } from '@vue/runtime-core';
 import { resolveAccessibilityProps, resolveTextInputProps, renderTextInput, foldText, textFromChange, eventCountFromChange, shouldCommandText, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
 import { dispatchViewCommand, isSymbioteNode, dlog, blurTextInput, setInputFocused, setInputBlurred, whenCommitted, } from '@symbiote-native/engine';
-import { descriptorToVue } from '../../descriptor-to-vue';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
-import { resolveModelValue, emitModelUpdate } from '../../utils/model-binding';
+import { descriptorToVue } from '../../descriptor-to-vue.js';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
+import { resolveModelValue, emitModelUpdate } from '../../utils/model-binding.js';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }

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

@@ -6,9 +6,9 @@
 import { defineComponent, h } from '@vue/runtime-core';
 import { backgroundProps, canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, } from '@symbiote-native/components';
 import { dlog } from '@symbiote-native/engine';
-import { View } from '../components';
-import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { View } from '../components.js';
+import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable.js';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 const HANDLED = ['background', 'useForeground'];
 function forwardAttrs(attrs) {
     const result = {};

package/build/components/touchable.js

@@ -13,9 +13,9 @@
 import { defineComponent, h } from '@vue/runtime-core';
 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 { dlog, } from '@symbiote-native/engine';
-import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable';
-import { Animated } from '../modules/animated';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable.js';
+import { Animated } from '../modules/animated/index.js';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function numberOr(value, fallback) {
     return typeof value === 'number' ? value : fallback;
 }

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

@@ -27,10 +27,10 @@
 import { computed, defineComponent, getCurrentInstance, h, isVNode, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
 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, maxMinimumViewTime, offsetForIndex, readLayoutLength, readScrollOffset, throttleWindow, } from '@symbiote-native/components';
 import { dlog, } from '@symbiote-native/engine';
-import { ScrollView } from '../scroll-view';
-import { RefreshControl } from '../refresh-control';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
-import { componentFromSlot } from '../../utils/slots-to-render-props';
+import { ScrollView } from '../scroll-view/index.js';
+import { RefreshControl } from '../refresh-control.js';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
+import { componentFromSlot } from '../../utils/slots-to-render-props.js';
 // The typed inputs VirtualizedList reads off `props`; everything else (raw scroll, keyboard*,
 // accessibility, testID, …) falls through $attrs onto the inner ScrollView. Listed for the runtime
 // `props` declaration (keyof can't derive it: the index signature widens keyof to `string`). The

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

@@ -18,8 +18,8 @@
 import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
 import { flattenSections, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
 import { Platform, dlog, } from '@symbiote-native/engine';
-import { VirtualizedList } from '../virtualized-list';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+import { VirtualizedList } from '../virtualized-list/index.js';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 // VirtualizedList is a generic component (generic construct signature), which h()'s overloads can't
 // resolve. Drive it through a loose functional-component handle (generic-component h() limitation).
 const VirtualizedListHost = VirtualizedList;

package/build/components.js

@@ -9,7 +9,7 @@
 // stateful component's ref would resolve to a useless component proxy, which is why
 // createAnimatedComponent (which captures the host node via that ref) needs the fall-through.
 import { h } from '@vue/runtime-core';
-import { normalizeVueAttrs } from './utils/normalize-attrs';
+import { normalizeVueAttrs } from './utils/normalize-attrs.js';
 function hostComponent(intrinsic, name) {
     // A functional component's ctx is Omit<SetupContext, 'expose'> (no instance to expose); let the
     // FunctionalComponent target infer the param types rather than annotate SetupContext.

package/build/index.js

@@ -1,83 +1,83 @@
 // @symbiote-native/vue: a thin Vue 3 reconciler over @symbiote-native/engine. createRenderer maps
 // each RendererOptions call onto the engine's mutation API; all Fabric clone-on-write
 // lives in the engine, shared with every other adapter. App code names only @symbiote-native/vue.
-export { mount, unmount } from './render';
+export { mount, unmount } from './render.js';
 // createTunnel: cross-surface content sharing (Teleport stays same-surface-only by design —
 // see create-tunnel.ts and the vue-adapter-directives skill for why).
-export { createTunnel } from './create-tunnel';
-export { View, Text } from './components';
+export { createTunnel } from './create-tunnel.js';
+export { View, Text } from './components.js';
 // findNodeHandle: RN's ref -> native reactTag lookup, the Vue twin of the React adapter's
 // host-instance resolution. IHostInstance is the raw engine node (Vue host refs fall
 // through to it; imperative methods live on each component's expose() handle).
-export { findNodeHandle } from './host-instance';
+export { findNodeHandle } from './host-instance/index.js';
 // Image. Full parity with React: source/src/srcSet resolution, the width/height → style fold,
 // alt → accessibility, and the Image statics (getSize / prefetch / queryCache / …) are shared
 // verbatim from @symbiote-native/components via renderImage; Vue supplies only the functional bridge.
-export { Image, setImageSourceResolver } from './components/image';
+export { Image, setImageSourceResolver } from './components/image.js';
 // First component off the shared @symbiote-native/components layer: render-only, drives the
 // agnostic renderActivityIndicator through descriptorToVue. Proof the layer is reusable:
 // the render fn is shared verbatim with React; Vue supplies only the bridge.
-export { ActivityIndicator } from './components/activity-indicator';
+export { ActivityIndicator } from './components/activity-indicator/index.js';
 // First component to bring the state half into Vue (the lastNativeReport reducer + the
 // snap-back watch); render shared verbatim with React, Vue supplies the reactive lifecycle.
-export { Switch } from './components/switch';
+export { Switch } from './components/switch/index.js';
 // ScrollView. Full parity (ADR 0024): vertical + horizontal, every pass-through prop, the
 // synthesized onContentSizeChange, the imperative handle via expose() + shallowRef, RefreshControl
 // (iOS sibling / Android wrap, Phase 2), and sticky headers (Phase 3: the scroll AnimatedValue,
 // the headerLayoutYs cross-talk, and the per-header Animated.View wrap). The pure math (intrinsics,
 // decelerationRate, content-size dedupe, the handle, the sticky interpolation) is shared verbatim
 // with React from @symbiote-native/components.
-export { ScrollView } from './components/scroll-view';
+export { ScrollView } from './components/scroll-view/index.js';
 // Pressable family. Full parity with React (the 3-layer split): the press state machine + render
 // decisions are shared in @symbiote-native/components; Vue supplies the reactivity + descriptor bridge.
-export { Pressable } from './components/pressable';
-export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable';
-export { TouchableNativeFeedback } from './components/touchable-native-feedback';
-export { Button } from './components/button';
+export { Pressable } from './components/pressable.js';
+export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable.js';
+export { TouchableNativeFeedback } from './components/touchable-native-feedback.js';
+export { Button } from './components/button.js';
 // TextInput. Full parity with React (the 3-layer split): the value/selection folds + the
 // controlled-write predicate live in @symbiote-native/components; Vue supplies the reactivity
 // (shallowRef host node, post-flush watch) + the imperative handle via expose().
-export { TextInput } from './components/text-input';
+export { TextInput } from './components/text-input/index.js';
 // VirtualizedList family. Full parity with React: the windowing math (visible range, cell
 // keys, viewability token diffing, edge-reached, the list plan) is shared in
 // @symbiote-native/components; Vue supplies the reactive lifecycle + the per-cell element.
-export { VirtualizedList } from './components/virtualized-list';
-export { FlatList } from './components/flat-list';
-export { VirtualizedSectionList } from './components/virtualized-section-list';
-export { SectionList } from './components/section-list';
+export { VirtualizedList } from './components/virtualized-list/index.js';
+export { FlatList } from './components/flat-list/index.js';
+export { VirtualizedSectionList } from './components/virtualized-section-list/index.js';
+export { SectionList } from './components/section-list/index.js';
 // Phase 2 (ADR 0024): SafeAreaView + RefreshControl, wired into ScrollView with the iOS-sibling /
 // Android-wrap platform split. RefreshControl hosts the wrapped scroll view via its default slot.
-export { SafeAreaView } from './components/safe-area-view';
-export { RefreshControl } from './components/refresh-control';
-export { descriptorToVue } from './descriptor-to-vue';
+export { SafeAreaView } from './components/safe-area-view.js';
+export { RefreshControl } from './components/refresh-control.js';
+export { descriptorToVue } from './descriptor-to-vue.js';
 // normalizeVueAttrs: the kebab→camel attr fold every component applies at entry. Exported so an
 // external wrapper package (e.g. @symbiote-native/slider/vue over a third-party native view) can fold
 // its incoming attrs through the SAME transform rather than reimplementing it.
-export { normalizeVueAttrs } from './utils/normalize-attrs';
+export { normalizeVueAttrs } from './utils/normalize-attrs.js';
 // resolveModelValue/emitModelUpdate: the v-model (Rule 6, vue-adapter-events skill) helper every
 // controlled-value component uses. Exported for the same external-package reason as
 // normalizeVueAttrs above (e.g. @symbiote-native/slider/vue).
-export { resolveModelValue, emitModelUpdate } from './utils/model-binding';
-export { createSymbioteRenderer } from './renderer';
+export { resolveModelValue, emitModelUpdate } from './utils/model-binding.js';
+export { createSymbioteRenderer } from './renderer.js';
 // Animated (ADR 0024 Phase 3a): Animated.View/Text/Image + the lazy Animated.ScrollView over the
 // Vue primitives, with the value graph / easing / drivers spread from @symbiote-native/engine. The wrap
 // mechanism (createAnimatedComponent) is the Vue twin of React's; the pure leaves live in the
 // engine.
-export { Animated, createAnimatedComponent } from './modules/animated';
+export { Animated, createAnimatedComponent } from './modules/animated/index.js';
 // Visual components off the shared @symbiote-native/components layer (wave: simple-visual).
-export { ImageBackground } from './components/image-background';
-export { InputAccessoryView } from './components/input-accessory-view';
-export { Modal } from './components/modal';
+export { ImageBackground } from './components/image-background.js';
+export { InputAccessoryView } from './components/input-accessory-view.js';
+export { Modal } from './components/modal.js';
 // KeyboardAvoidingView: full parity via the shared inset math; Vue owns the Keyboard subscription.
-export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
+export { KeyboardAvoidingView } from './components/keyboard-avoiding-view.js';
 // StatusBar: declarative component + the shared imperative API.
-export { StatusBar } from './modules/status-bar';
+export { StatusBar } from './modules/status-bar.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';
 // Vue composables over the core device-state modules.
-export { useColorScheme } from './composables/use-color-scheme';
-export { useWindowDimensions } from './composables/use-window-dimensions';
+export { useColorScheme } from './composables/use-color-scheme.js';
+export { useWindowDimensions } from './composables/use-window-dimensions.js';
 // Imperative runtime modules: the SAME module both adapters share, re-exported from @symbiote-native/engine.
 export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
 // Re-export the framework-agnostic engine surface (pure utilities + diagnostics).

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

@@ -13,7 +13,7 @@
 // value.setValue / animation -> flushValue -> AnimatedProps.update() -> setNativeProps(node).
 import { defineComponent, h, onBeforeUnmount, onMounted, onUpdated, shallowRef, } from '@vue/runtime-core';
 import { AnimatedProps, attachNativeEventHandler, isNativeAnimatedAvailable, reduceProps, readPassthroughStyle, resolveHostNode, } from '@symbiote-native/engine';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
+import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 // RN's prop carrying explicit (already-rasterized) values that override the animated prop in
 // the COMMITTED props (sticky-header passthrough). Named once here so render/reconcile agree.
 const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';

package/build/modules/animated/index.js

@@ -4,11 +4,11 @@
 // JS-driven, ADR 0016), spread in verbatim. Both halves meet here so the familiar surface,
 // `Animated.timing(new Animated.Value(0), …).start()`, works against the Vue-driven engine.
 import { AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedMock, 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 { createAnimatedComponent } from './create-animated-component';
-export { createAnimatedComponent } from './create-animated-component';
+import { View, Text } from '../../components.js';
+import { Image } from '../../components/image.js';
+import { ScrollView } from '../../components/scroll-view/index.js';
+import { createAnimatedComponent } from './create-animated-component.js';
+export { createAnimatedComponent } from './create-animated-component.js';
 // View/Text are pure host primitives; Image is the functional renderImage wrapper, and all expose
 // their host node via ref fall-through, so wrap them eagerly.
 const AnimatedView = createAnimatedComponent(View);

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

@@ -9,7 +9,7 @@
 // React already has.
 import { h } from '@vue/runtime-core';
 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.js

@@ -11,7 +11,7 @@
 // (untyped) and run through normalizeVueAttrs (kebab→camel) before each is narrowed by a guard.
 import { defineComponent, watchEffect } from '@vue/runtime-core';
 import { applyStatusBarProps, statusBarImperative, statusBarCurrentHeight, isOpaqueColorValue, } from '@symbiote-native/engine';
-import { normalizeVueAttrs } from '../utils/normalize-attrs';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function asBoolean(value) {
     return typeof value === 'boolean' ? value : undefined;
 }

package/build/render.js

@@ -2,7 +2,7 @@
 // a surface for it and let the Vue renderer drive the engine, which commits into
 // nativeFabricUIManager; RN's own renderer never in the path.
 import { createSurface, disposeRoot, dlog, } from '@symbiote-native/engine';
-import { createSymbioteRenderer } from './renderer';
+import { createSymbioteRenderer } from './renderer.js';
 // One Vue app per surface, so a surface can be torn down (unmount) or cleanly
 // re-mounted on the same rootTag: the bridgeless host stops and restarts a surface on
 // Fast Refresh and on lifecycle/focus changes, reusing the rootTag.

package/metro-css-parser.cjs

@@ -6,7 +6,12 @@
 // 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. Used by
-// examples/vue-sfc/metro-vue-transformer.js for BOTH its inline <style> block compilation and
-// standalone .css/.module.css file imports. See the symbiote-sfc-style-compiler skill.
-module.exports = require('@symbiote-native/css-parser');
+// and Metro's babelTransformerPath loading expects a require()-able module. Used as
+// vue-tsx's babelTransformerPath for standalone .css/.module.css file imports —
+// metro-vue-transformer.cjs (the .vue SFC transformer) requires @symbiote-native/css-parser
+// directly instead, since it needs the individual parse/compile functions, not a Metro
+// transformer object. See the symbiote-sfc-style-compiler skill.
+// 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.
+module.exports = require('@symbiote-native/css-parser').createCssMetroTransformer();

package/metro-vue-transformer.cjs

@@ -0,0 +1,313 @@
+// Metro babel transformer that teaches the bundler to read Vue SFCs (.vue). Metro has no
+// Vue plugin (unplugin-vue ships vite/webpack/esbuild/rollup adapters, not Metro), so we do
+// the single-pass compile here: parse the SFC, compile <script setup> + <template> into one
+// component module, then hand the JS to RN's own babel transformer. This is the Metro twin
+// of what @vitejs/plugin-vue does for Vite; the 'vue'→runtime-core rewrite is wolf-tui's
+// pattern (a custom, non-DOM renderer needs the compiler helpers from @vue/runtime-core,
+// not from vue/runtime-dom).
+//
+// Retargeted at @symbiote-native/vue/runtime-helpers rather than bare @vue/runtime-core: that shim
+// re-exports runtime-core verbatim PLUS supplies our own `vShow` (compiled v-show imports it by
+// name, and only @vue/runtime-dom's DOM-based version exists otherwise — see the
+// vue-adapter-directives skill).
+//
+// Ships as a package-level export (`@symbiote-native/vue/metro-vue-transformer`) rather than living
+// in each consuming app: a consumer's own metro.config.js just points babelTransformerPath at it —
+// see the symbiote-sfc-style-compiler skill.
+
+const { parse, compileScript } = require('@vue/compiler-sfc');
+const { createCompoundExpression } = require('@vue/compiler-core');
+// @symbiote-native/css-parser is a real dependency of THIS package, so requiring it directly here
+// (rather than through the ./metro-css-parser public subpath, which exists for CONSUMERS) resolves
+// straight from this package's own node_modules under pnpm.
+const {
+  compile: compilePreprocessor,
+  compileCssFile,
+  globalClassNamesIn,
+  hashFilePath,
+  isStyleFile,
+  kebabToCamel,
+  parseCSS,
+  resolveUpstreamTransformer,
+} = require('@symbiote-native/css-parser');
+
+const upstreamTransformer = resolveUpstreamTransformer();
+
+// Rewrites a Vue template AST so every `class`/`:class` binding on an element resolves
+// against this file's scoped class names at the compiled call site, via @symbiote-native/engine's
+// scopeClassName(value, localNames, scopeId) — see the symbiote-sfc-style-compiler skill for
+// the full design (why AST-level, not a raw-text regex: Vue itself merges a static `class=`
+// and a dynamic `:class=` on the same element into ONE codegen entry, and text substitution
+// can't reproduce that merge safely; letting Vue's own transformElement do the merge on our
+// already-rewritten nodes reuses that logic instead of reimplementing it).
+//
+// A static class="foo bar" attribute is a plain AttributeNode (prop.type === 6): its value is
+// resolved to the final string directly here, at compile time — no runtime call needed for the
+// purely-static case, since every token is already known. Each token is normalized kebab->camel
+// FIRST (kebabToCamel) — a template may write class="section-label" (idiomatic CSS) instead of
+// class="sectionLabel"; the css-parser always registers the CAMEL form, and localNames (built
+// from that same registration) is camelCase-keyed, so the scoping check below only recognizes a
+// token once it is in that form. The emitted string is always camelCase, suffixed or not.
+//
+// A dynamic :class="expr" is a `bind` DirectiveNode (prop.type === 7) targeting the `class`
+// arg. Vue's own transformExpression has ALREADY run by the time our transform sees it (node
+// transforms are appended after the built-in preset, per @vue/compiler-core's TransformOptions
+// merge order), so prop.exp is usually a COMPOUND_EXPRESSION (type 8, a `children` array mixing
+// literal source chunks with resolved identifier nodes), not a plain string — a bare identifier
+// binding (`:class="dynamicClass"`) is the one case that stays a SIMPLE_EXPRESSION (type 4).
+// Either way, `createCompoundExpression` wraps the ORIGINAL exp node (whichever shape it is) as
+// a single child inside `scopeClassName(<original>, __localScopedClassNames, __scopeId)`, so
+// codegen emits the call with the original expression source reproduced unchanged inside it —
+// this needs no per-shape branching, and correctly defers even a fully opaque runtime value
+// (`:class="dynamicClass"`) to scopeClassName's own runtime token-matching, so there is no
+// unresolved gap for dynamic scoped classes.
+function createScopeClassNodeTransform(localNames, scopeId) {
+  return function scopeClassNodeTransform(node) {
+    if (node.type !== 1 /* NodeTypes.ELEMENT */) return;
+
+    for (const prop of node.props) {
+      if (prop.type === 6 /* NodeTypes.ATTRIBUTE */ && prop.name === 'class' && prop.value) {
+        prop.value.content = prop.value.content
+          .split(/\s+/)
+          .filter(Boolean)
+          .map((token) => {
+            const camelToken = kebabToCamel(token);
+            return localNames.has(camelToken) ? `${camelToken}__${scopeId}` : camelToken;
+          })
+          .join(' ');
+        continue;
+      }
+
+      if (
+        prop.type === 7 /* NodeTypes.DIRECTIVE */ &&
+        prop.name === 'bind' &&
+        prop.arg &&
+        prop.arg.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */ &&
+        prop.arg.content === 'class' &&
+        prop.exp
+      ) {
+        prop.exp = createCompoundExpression(
+          ['__scopeClass(', prop.exp, ', __localScopedClassNames, __scopeId)'],
+          prop.exp.loc,
+        );
+      }
+    }
+  };
+}
+
+// A short, stable id per file, used as the SFC scope id (compileScript wants one regardless of
+// whether the file has scoped styles) — Vue's own `data-v-hash` naming convention, built on
+// @symbiote-native/css-parser's shared hashFilePath so the algorithm isn't duplicated against the
+// standalone .module.css compiler's identical need (metro-css-module.ts).
+function scopeIdFor(filename) {
+  return 'data-v-' + hashFilePath(filename);
+}
+
+// An SFC style block's `lang` attribute names a preprocessor language directly (`lang="scss"`),
+// unlike a standalone file, which is identified by its extension — so this is its own small
+// lookup rather than reusing detectLanguage(), which is extension-keyed.
+const SFC_STYLE_LANG_TO_PREPROCESSOR = new Map([
+  ['scss', 'scss'],
+  ['sass', 'scss'],
+  ['less', 'less'],
+  ['stylus', 'stylus'],
+]);
+
+// Reduces one <style> block down to plain CSS text. A lang-less or lang="css" block passes
+// through unchanged, exactly as before. Anything outside the four recognized preprocessor langs
+// (a typo, or a genuinely unsupported lang) still throws, same message as before this feature
+// existed.
+async function compileStyleBlockContent(style, filename) {
+  if (style.lang == null || style.lang === 'css') return style.content;
+
+  const preprocessorLang = SFC_STYLE_LANG_TO_PREPROCESSOR.get(style.lang);
+  if (!preprocessorLang) {
+    throw new Error(`SFC style lang="${style.lang}" not supported yet — plain CSS only`);
+  }
+
+  // Sass' `.sass` indented syntax and `.scss` syntax share one compiler entry point that picks
+  // between them off the file extension (see preprocessors.ts's compileScss) — an inline SFC
+  // style block has no file of its own, so a synthetic `.sass`-suffixed path is the only way to
+  // select the indented syntax. Every other preprocessor only uses the path for relative-import
+  // resolution (dirname), where the real .vue file's own path is correct as-is.
+  const syntheticPath = style.lang === 'sass' ? `${filename}.sass` : filename;
+  return compilePreprocessor(style.content, preprocessorLang, syntheticPath);
+}
+
+async function compileSfc(src, filename) {
+  const { descriptor, errors } = parse(src, { filename });
+  if (errors && errors.length > 0) {
+    throw new Error(`Vue SFC parse error in ${filename}:\n${errors.map(String).join('\n')}`);
+  }
+  if (descriptor.scriptSetup == null && descriptor.script == null) {
+    throw new Error(`Vue SFC ${filename} has no <script> / <script setup> block`);
+  }
+
+  const scopeId = scopeIdFor(filename);
+
+  // `descriptor.styles` is already parsed by @vue/compiler-sfc itself (one entry per <style>
+  // block, `.content` pre-trimmed, `.scoped` already a plain boolean flag), so there's no need
+  // to re-extract style blocks with a regex the way wolf-tui's Vite plugin does.
+  //
+  // A scoped block's classes get their key SUFFIXED with this file's scopeId before
+  // registration (`card` -> `card__data-v-xxxxxxxx`), so two components can each define their
+  // own `.card` without colliding in the shared global registry — mirroring what Vue's own
+  // `data-v-hash` attribute does for DOM targets, just as a name suffix instead of an attribute
+  // selector (we have neither DOM nor attribute-selector matching). An unscoped block's classes
+  // register exactly as before: no suffix, globally shared. `:global(...)` selectors inside a
+  // scoped block are the one exception — @symbiote-native/css-parser already unwraps them to their
+  // plain class name (`:global(.reset)` parses like `.reset`), so `globalClassNamesIn` re-scans
+  // the block's own raw text to find which specific keys should be exempted from suffixing.
+  //
+  // Cascade multiple blocks last-block-wins, same as CSS — this holds across scoped/unscoped
+  // blocks too: only each block's OWN css-parser output is scoped independently, then merged.
+  //
+  // <style module> (CSS Modules) reuses this exact suffixing machinery instead of a separate
+  // pipeline: `.card` still goes through parseCSS unchanged and still registers via the same
+  // registerStyles() call, just under a suffixed key — the only new output is a plain name->
+  // scopedName object (`$style` by default, or the block's `module="name"` value) emitted as a
+  // preamble const, so `:class="$style.card"` passes the already-scoped string straight to
+  // resolveClassName's existing exact-match path (no registry changes needed, see the
+  // symbiote-sfc-style-compiler skill). Unlike `scoped`, a module block's classes are NEVER
+  // auto-applied to a literal class="..." attribute — CSS Modules is opt-in per usage via
+  // `$style.x`, so module classes are kept out of `localScopedNames` (the nodeTransform only
+  // rewrites literal class strings for `scoped` blocks). The registry key gets an extra
+  // `module` tag (`card__module__<scopeId>`, vs scoped's plain `card__<scopeId>`) so a file
+  // that happens to mix `<style scoped>` and `<style module>` with the same class name can't
+  // collide in the shared registry.
+  const styles = {};
+  const localScopedNames = new Set();
+  const cssModuleBindings = new Map();
+
+  for (const style of descriptor.styles) {
+    // Reduces a preprocessor block down to plain CSS text BEFORE any of the scoping logic
+    // below runs — that logic is entirely language-agnostic, it only ever sees parseCSS's
+    // plain-CSS output, same as it always did for a lang-less/lang="css" block. Anything other
+    // than the four recognized preprocessor langs (a typo, or a genuinely unsupported lang)
+    // still throws, unchanged from before.
+    const content = await compileStyleBlockContent(style, filename);
+    const parsed = parseCSS(content, { filename });
+
+    if (style.module) {
+      const bindingName = typeof style.module === 'string' ? style.module : '$style';
+      // Scanned against the COMPILED content, not style.content: :global(...) isn't native
+      // SCSS/Less/Stylus syntax (each preprocessor passes an unrecognized selector through
+      // unchanged), but scanning the compiler's actual output can't drift under nesting/
+      // interpolation the way assuming source-and-output stay textually identical could.
+      const exemptFromScope = globalClassNamesIn(content);
+      const classMap = cssModuleBindings.get(bindingName) ?? {};
+      for (const [className, props] of Object.entries(parsed)) {
+        const isExempt = exemptFromScope.has(className);
+        const registeredName = isExempt ? className : `${className}__module__${scopeId}`;
+        classMap[className] = registeredName;
+        styles[registeredName] = { ...styles[registeredName], ...props };
+      }
+      cssModuleBindings.set(bindingName, classMap);
+    } else if (style.scoped) {
+      const exemptFromScope = globalClassNamesIn(content);
+      for (const [className, props] of Object.entries(parsed)) {
+        const isExempt = exemptFromScope.has(className);
+        const registeredName = isExempt ? className : `${className}__${scopeId}`;
+        if (!isExempt) localScopedNames.add(className);
+        styles[registeredName] = { ...styles[registeredName], ...props };
+      }
+    } else {
+      for (const [className, props] of Object.entries(parsed)) {
+        styles[className] = { ...styles[className], ...props };
+      }
+    }
+  }
+
+  // The nodeTransform rewrites every class/:class binding's compiled output to route through
+  // scopeClassName() at the scoped names this file actually defines — skipped entirely (not
+  // even passed to the compiler) when nothing in this file is scoped, so a .vue with only
+  // unscoped/no styles compiles exactly as before, zero added runtime cost or behavior change.
+  const templateOptions =
+    localScopedNames.size > 0
+      ? {
+          compilerOptions: {
+            nodeTransforms: [createScopeClassNodeTransform(localScopedNames, scopeId)],
+          },
+        }
+      : undefined;
+
+  // inlineTemplate folds the <template> render fn into setup(): one module, one `export
+  // default`. Only valid with <script setup>, which the canary uses.
+  const compiled = compileScript(descriptor, {
+    id: scopeId,
+    inlineTemplate: true,
+    templateOptions,
+  });
+  // Point every Vue import (the compiler's injected helpers AND the user's own
+  // `import { ref } from 'vue'`) at the runtime-helpers shim, which re-exports the same
+  // @vue/runtime-core singleton the @symbiote-native/vue adapter builds its custom renderer on, plus
+  // our own directive implementations. No vue/runtime-dom in a native bundle.
+  const code = compiled.content.replace(/from\s*(['"])vue\1/g, 'from "@symbiote-native/vue/runtime-helpers"');
+
+  if (Object.keys(styles).length === 0) return code;
+
+  // Only a scoped file needs scopeClassName + its two per-file constants — the nodeTransform
+  // above only ever emits calls to `__scopeClass`/`__localScopedClassNames`/`__scopeId` when
+  // localScopedNames is non-empty, so these stay unimported/undeclared (and absent from the
+  // bundle) for every non-scoped .vue file.
+  const engineImports =
+    localScopedNames.size > 0 ? 'registerStyles, scopeClassName as __scopeClass' : 'registerStyles';
+
+  const preamble = [`registerStyles(${JSON.stringify(styles)});`];
+  if (localScopedNames.size > 0) {
+    preamble.push(
+      `const __localScopedClassNames = new Set(${JSON.stringify([...localScopedNames])});`,
+      `const __scopeId = ${JSON.stringify(scopeId)};`,
+    );
+  }
+  // Each <style module> binding becomes a plain top-level const holding its name->scopedName
+  // map. Placed before the compiled `export default {...}`, so it's just a closed-over module
+  // scope variable inside setup() — same trick registerStyles/__scopeId already rely on — and
+  // usable both from the inlined template (`:class="$style.card"`) and from <script setup> code
+  // itself (`$style.card`), no extra wiring needed on either side.
+  for (const [bindingName, classMap] of cssModuleBindings) {
+    preamble.push(`const ${bindingName} = ${JSON.stringify(classMap)};`);
+  }
+
+  return [`import { ${engineImports} } from '@symbiote-native/engine';`, ...preamble, code].join('\n') + '\n';
+}
+
+// Exported separately from `transform` so tests can assert on the compiled SFC output
+// (imports, injected `registerStyles` call) without driving the full upstream RN Babel preset.
+module.exports.compileSfc = compileSfc;
+
+// Async uniformly, including the `.vue` and plain-passthrough branches that never touch a
+// preprocessor: compileSfc() itself is async now (a scss/sass/less/stylus <style> block awaits
+// preprocessors.ts's compile()), and Metro's own metro-transform-worker already
+// `await transformer.transform(...)` before touching the result (confirmed by reading the
+// installed metro-transform-worker source — see metro-transformer.ts for the fuller writeup),
+// so returning a Promise here is a supported, exercised shape, not a hack. A sync fast-path for
+// the no-preprocessor branches would fork this function into two shapes to save a single
+// microtask on a call that only ever runs at Metro build time, content-hash-cached — not worth
+// the duplication.
+module.exports.transform = async function transform(params) {
+  if (params.filename.endsWith('.vue')) {
+    const code = await compileSfc(params.src, params.filename);
+    // Re-label as .tsx so RN's transformer strips any TS from <script setup lang="ts"> and
+    // processes the module exactly like app source. Metro tracks the real path separately.
+    return upstreamTransformer.transform({
+      ...params,
+      src: code,
+      filename: params.filename + '.tsx',
+    });
+  }
+  // A standalone style file (as opposed to a `.vue` file's own inline <style> block above) —
+  // the framework-agnostic path (core/css-parser's compileCssFile), usable from this example's
+  // .vue files exactly like from any other adapter's example. isStyleFile recognizes
+  // .css/.scss/.sass/.less/.styl/.stylus (+ each .module.* twin) — see the
+  // symbiote-sfc-style-compiler skill.
+  if (isStyleFile(params.filename)) {
+    const { code } = await compileCssFile(params.src, params.filename);
+    return upstreamTransformer.transform({ ...params, src: code, filename: params.filename + '.js' });
+  }
+  return upstreamTransformer.transform(params);
+};
+
+// Surface the upstream cache key so RN preset changes still bust Metro's cache. The SFC
+// step itself is invalidated by `--reset-cache` (mirrors the babel DEBUG-inline note).
+module.exports.getCacheKey = upstreamTransformer.getCacheKey;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "SymbioteNative's Vue adapter — a @vue/runtime-core createRenderer driving real native iOS/Android views through the same engine as the React adapter.",
   "repository": {
     "type": "git",
@@ -29,20 +29,24 @@
       "types": "./build/runtime-helpers.d.ts",
       "default": "./build/runtime-helpers.js"
     },
-    "./metro-css-parser": "./metro-css-parser.cjs"
+    "./metro-css-parser": "./metro-css-parser.cjs",
+    "./metro-vue-transformer": "./metro-vue-transformer.cjs"
   },
   "files": [
     "build",
-    "metro-css-parser.cjs"
+    "metro-css-parser.cjs",
+    "metro-vue-transformer.cjs"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@vue/compiler-core": "^3.5.13",
+    "@vue/compiler-sfc": "^3.5.13",
     "@vue/runtime-core": "^3.5.13",
-    "@symbiote-native/css-parser": "0.1.1",
-    "@symbiote-native/components": "0.2.0",
-    "@symbiote-native/engine": "0.1.1"
+    "@symbiote-native/components": "0.2.1",
+    "@symbiote-native/css-parser": "0.2.0",
+    "@symbiote-native/engine": "0.1.2"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",