@symbiote-native/vue 3.2.0 → 3.4.0

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

@@ -12,10 +12,11 @@
 // refresh) stay GATED on listener presence so the inner VirtualizedList keeps building
 // RefreshControl / computing edge-reached strictly on demand.
 import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
-import { flattenSections, resolveStickySectionHeaders, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
+import { cellGapsFor, createSeparatorBoard, flattenSections, layoutOverSections, renderSectionEntry, resolveScrollLocation, resolveStickySectionHeaders, routeScrollHandle, sectionEntryKey, } from '@symbiote-native/components';
 import { Platform, dlog, } from '@symbiote-native/engine';
 import { VirtualizedList } from '../virtualized-list/index.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
+import { SectionItemCell } from './section-item-cell.js';
 // VirtualizedList's generic construct signature can't be resolved by h()'s overloads, so drive
 // it through a loose functional-component handle instead.
 const VirtualizedListHost = VirtualizedList;
@@ -36,39 +37,85 @@ function isRecord(value) {
 function isVirtualizedListHandle(value) {
     return isRecord(value) && typeof value.scrollToOffset === 'function';
 }
-function buildSectionDelegate(getInner, getHeaderIndices) {
+function buildSectionDelegate(getInner, locate) {
     return {
         scrollToLocation: (params) => {
-            const flatIndex = scrollLocationToFlatIndex(getHeaderIndices(), params.sectionIndex, params.itemIndex);
-            if (flatIndex === undefined) {
+            const target = locate(params);
+            if (target === undefined) {
                 dlog(`Vue VirtualizedSectionList scrollToLocation: section ${params.sectionIndex} out of range`);
                 return;
             }
             dlog(`Vue VirtualizedSectionList scrollToLocation section=${params.sectionIndex} ` +
-                `item=${params.itemIndex} -> flat ${flatIndex}`);
-            getInner()?.scrollToIndex({
-                index: flatIndex,
-                viewOffset: params.viewOffset,
-                viewPosition: params.viewPosition,
-                animated: params.animated,
+                `item=${params.itemIndex} -> flat ${target.index}`);
+            getInner()?.scrollToIndex(target);
+        },
+        ...routeScrollHandle(getInner),
+    };
+}
+// The separator slot for a gap: the section one, or the item one where a section's own beats
+// the list's
+function separatorRenderFor(gap, slots) {
+    if (gap.props === undefined)
+        return undefined;
+    const { props } = gap;
+    const slot = gap.kind === 'section'
+        ? slots.sectionSeparator
+        : (props.section.ItemSeparatorComponent ?? slots.separator);
+    if (slot === undefined)
+        return undefined;
+    return ({ isHighlighted, override }) => slot({ highlighted: isHighlighted, ...props, ...override });
+}
+// The inner list's #item slot: each flattened entry goes to the matching consumer slot, an item
+// to a cell that paints its own separators. A slot the consumer left off renders nothing
+function entryRendererFor(rendering) {
+    const { slots, entries, board, keyOf } = rendering;
+    return info => renderSectionEntry({
+        header: ({ section }) => slots.sectionHeader?.({ section }) ?? [],
+        footer: ({ section }) => slots.sectionFooter?.({ section }) ?? [],
+        item: entry => {
+            const gaps = cellGapsFor(entries, info.index);
+            const previous = entries[info.index - 1];
+            const render = entry.section.renderItem ?? slots.item;
+            return h(SectionItemCell, {
+                board,
+                cellKey: keyOf(entry),
+                prevCellKey: previous === undefined ? undefined : keyOf(previous),
+                renderItem: separators => render?.({
+                    item: entry.item,
+                    index: entry.itemIndex,
+                    section: entry.section,
+                    separators,
+                }) ?? [],
+                leadingSeparator: separatorRenderFor(gaps.leading, slots),
+                trailingSeparator: separatorRenderFor(gaps.trailing, slots),
+                inverted: rendering.isInverted,
             });
         },
-        flashScrollIndicators: () => getInner()?.flashScrollIndicators(),
-        getNativeScrollRef: () => getInner()?.getNativeScrollRef() ?? null,
-        getScrollableNode: () => getInner()?.getScrollableNode() ?? null,
-        getScrollResponder: () => getInner()?.getScrollResponder() ?? null,
-        getScrollNode: () => getInner()?.getScrollNode() ?? null,
-        recordInteraction: () => getInner()?.recordInteraction(),
+    }, info.item);
+}
+// The three synthesized events become inner-list handlers ONLY when listened, so the inner list
+// keeps gating (no parasitic RefreshControl / edge-reached work for an unlistened event)
+function synthesizedEvents(listens, emit) {
+    return {
+        onEndReached: listens('onEndReached')
+            ? (eventInfo) => emit('endReached', eventInfo)
+            : undefined,
+        onStartReached: listens('onStartReached')
+            ? (eventInfo) => emit('startReached', eventInfo)
+            : undefined,
+        onRefresh: listens('onRefresh') ? () => emit('refresh') : undefined,
     };
 }
-export const VirtualizedSectionList = defineComponent((props, { attrs, expose, emit, slots, }) => {
+export const VirtualizedSectionList = defineComponent((props, { attrs, expose, emit, slots }) => {
+    const board = createSeparatorBoard();
     const inner = shallowRef(null);
     const setInner = (instance) => {
         inner.value = isVirtualizedListHandle(instance) ? instance : null;
     };
-    // headerIndices change each render (sections may change); the delegate reads them lazily.
+    // Both change every render (sections may change), the delegate reads them lazily
     let headerIndices = [];
-    expose(buildSectionDelegate(() => inner.value, () => headerIndices));
+    let stickyHeaderIndices;
+    expose(buildSectionDelegate(() => inner.value, params => resolveScrollLocation(headerIndices, stickyHeaderIndices, params)));
     // Emits are stripped from $attrs by Vue; detect listener presence off the instance's own
     // vnode props instead, so an emit bridge is wired ONLY when the consumer actually listens.
     const instance = getCurrentInstance();
@@ -80,92 +127,31 @@ export const VirtualizedSectionList = defineComponent((props, { attrs, expose, e
         const sections = Array.isArray(props.sections)
             ? props.sections
             : [];
-        const keyExtractor = props.keyExtractor;
-        // The passthrough tail: declared props + declared emits' onX are already removed from $attrs,
-        // so what's left is the VirtualizedList passthrough (kebab-folded for the inner list).
-        const forwarded = normalizeVueAttrs(attrs);
-        const { entries, headerIndices: indices } = flattenSections(sections, slots.sectionSeparator !== undefined);
+        const { entries, headerIndices: indices } = flattenSections(sections);
         headerIndices = indices;
+        const keyOf = (entry) => sectionEntryKey(entry, props.keyExtractor);
         // RN sticks section headers by default only on iOS; Android does not unless asked.
-        const stickyHeaderIndices = resolveStickySectionHeaders(props.stickySectionHeadersEnabled, indices, Platform.OS);
+        stickyHeaderIndices = resolveStickySectionHeaders(props.stickySectionHeadersEnabled, indices, Platform.OS);
         dlog(`Vue VirtualizedSectionList: ${sections.length} sections flattened to ${entries.length} entries`);
-        // The inner list's #item slot: dispatch each flattened entry to the matching consumer slot,
-        // returning its VNode[] (empty when the consumer left that slot off).
-        const renderEntry = (info) => {
-            const entry = info.item;
-            if (entry.kind === 'header') {
-                return slots.sectionHeader
-                    ? slots.sectionHeader({ section: entry.section })
-                    : [];
-            }
-            if (entry.kind === 'footer') {
-                return slots.sectionFooter
-                    ? slots.sectionFooter({ section: entry.section })
-                    : [];
-            }
-            if (entry.kind === 'section-separator') {
-                return slots.sectionSeparator ? slots.sectionSeparator() : [];
-            }
-            return slots.item
-                ? slots.item({
-                    item: entry.item,
-                    index: entry.itemIndex,
-                    section: entry.section,
-                    separators: info.separators,
-                })
-                : [];
-        };
-        // The user's #separator is typed on ItemT, but the inner stream is the entry wrapper; unwrap
-        // each entry back to its ItemT (shared unwrapEntryItem) before the inner list invokes it.
-        const entrySeparatorSlot = slots.separator === undefined
-            ? undefined
-            : (entryProps) => slots.separator({
-                ...entryProps,
-                leadingItem: unwrapEntryItem(entryProps.leadingItem),
-                trailingItem: unwrapEntryItem(entryProps.trailingItem),
-            });
-        const entryKeyExtractor = (entry, index) => sectionEntryKey(entry, index, keyExtractor);
-        // Hand the callback `sections`, not the entries: RN's inner VirtualizedList gets
-        // `data={this.props.sections}` (VirtualizedSectionList.js:216) while ours streams the
-        // FLATTENED entries, so the same user code would otherwise see a different argument here
-        // than on RN.
-        //
-        // UPSTREAM-DIVERGENCE(react-native): the flat INDEX matches RN's (two rows per section,
-        // header and footer) only while the #sectionSeparator slot is unset. With it,
-        // flattenSections emits an extra 'section-separator' row per boundary that RN renders inside
-        // the neighbouring cell, so indices shift by one per boundary from the second section on.
-        // Deliberate - that row is how this adapter paints the separator; a caller combining the two
-        // must account for it.
-        const getItemLayout = props.getItemLayout;
-        const entryItemLayout = getItemLayout === undefined
-            ? undefined
-            : (_entries, index) => getItemLayout(sections, index);
-        // The three synthesized events become inner-VL handlers ONLY when listened, so the inner list
-        // keeps gating (no parasitic RefreshControl / edge-reached work for an unlistened event).
-        const endReached = listens('onEndReached')
-            ? (eventInfo) => emit('endReached', eventInfo)
-            : undefined;
-        const startReached = listens('onStartReached')
-            ? (eventInfo) => emit('startReached', eventInfo)
-            : undefined;
-        const refresh = listens('onRefresh')
-            ? () => emit('refresh')
-            : undefined;
         return h(VirtualizedListHost, {
-            ...forwarded,
+            // The passthrough tail: declared props and emits are already out of $attrs
+            ...normalizeVueAttrs(attrs),
             ref: setInner,
             data: entries,
             getItem: (_source, index) => entries[index],
             getItemCount: () => entries.length,
-            keyExtractor: entryKeyExtractor,
-            getItemLayout: entryItemLayout,
+            keyExtractor: keyOf,
+            getItemLayout: layoutOverSections(props.getItemLayout, sections),
             stickyHeaderIndices,
-            onEndReached: endReached,
-            onStartReached: startReached,
-            onRefresh: refresh,
+            ...synthesizedEvents(listens, emit),
         }, {
-            item: renderEntry,
-            separator: entrySeparatorSlot,
+            item: entryRendererFor({
+                slots,
+                entries,
+                board,
+                keyOf,
+                isInverted: attrs.inverted === true,
+            }),
             header: slots.header,
             footer: slots.footer,
             empty: slots.empty,

package/build/components/virtualized-section-list/section-item-cell.d.ts

@@ -0,0 +1,18 @@
+import { type VNode } from '@vue/runtime-core';
+import { type ISeparatorBoard, type ISeparators } from '@symbiote-native/components';
+type IRendered = VNode[] | VNode;
+export type ISeparatorState = {
+    isHighlighted: boolean;
+    override: Record<string, unknown> | undefined;
+};
+export type ISectionItemCellProps = {
+    board: ISeparatorBoard<Record<string, unknown>>;
+    cellKey: string;
+    prevCellKey: string | undefined;
+    renderItem: (separators: ISeparators) => IRendered;
+    leadingSeparator: ((state: ISeparatorState) => IRendered) | undefined;
+    trailingSeparator: ((state: ISeparatorState) => IRendered) | undefined;
+    inverted: boolean;
+};
+export declare const SectionItemCell: import("vue").DefineSetupFnComponent<ISectionItemCellProps, {}, {}, ISectionItemCellProps & {}, import("vue").PublicProps>;
+export {};

package/build/components/virtualized-section-list/section-item-cell.js

@@ -0,0 +1,52 @@
+// Item cell with its separators around it, as in RN's `ItemWithSeparator`
+// Their state sits in a shared board, т.к. `highlight()` also lights the previous cell's one
+import { defineComponent, Fragment, h, shallowRef, watch, } from '@vue/runtime-core';
+import { createCellSeparators, } from '@symbiote-native/components';
+const CELL_PROPS = [
+    'board',
+    'cellKey',
+    'prevCellKey',
+    'renderItem',
+    'leadingSeparator',
+    'trailingSeparator',
+    'inverted',
+];
+export const SectionItemCell = defineComponent((props) => {
+    const state = shallowRef(props.board.read(props.cellKey));
+    watch(() => [props.board, props.cellKey], ([board, cellKey], _previous, onCleanup) => {
+        state.value = board.read(cellKey);
+        const unsubscribe = board.subscribe(cellKey, () => {
+            state.value = board.read(cellKey);
+        });
+        onCleanup(() => {
+            unsubscribe();
+            board.release(cellKey);
+        });
+    }, { immediate: true, flush: 'sync' });
+    const separators = createCellSeparators(props.board, () => ({
+        cellKey: props.cellKey,
+        prevCellKey: props.prevCellKey,
+        has: {
+            leading: props.leadingSeparator !== undefined,
+            trailing: props.trailingSeparator !== undefined,
+        },
+    }));
+    return () => {
+        const { leadingHighlighted, leadingOverride } = state.value;
+        const { trailingHighlighted, trailingOverride } = state.value;
+        const leading = props.leadingSeparator?.({
+            isHighlighted: leadingHighlighted,
+            override: leadingOverride,
+        }) ?? [];
+        const trailing = props.trailingSeparator?.({
+            isHighlighted: trailingHighlighted,
+            override: trailingOverride,
+        }) ?? [];
+        const element = props.renderItem(separators);
+        return h(Fragment, [
+            props.inverted ? trailing : leading,
+            element,
+            props.inverted ? leading : trailing,
+        ]);
+    };
+}, { name: 'SectionItemCell', props: CELL_PROPS });

package/build/composables/define-native-view-component.d.ts

@@ -0,0 +1,3 @@
+import { type VNode } from '@vue/runtime-core';
+import type { ICreateNativeViewController } from '@symbiote-native/components';
+export declare function defineNativeViewComponent<THandle extends object>(name: string, createController: ICreateNativeViewController<THandle>): import("vue").DefineComponent<{}, () => VNode | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/composables/define-native-view-component.js

@@ -0,0 +1,23 @@
+import { defineComponent, onUnmounted } from '@vue/runtime-core';
+import { createHostNodeHolder } from '@symbiote-native/components';
+import { descriptorToVue } from '../descriptor-to-vue.js';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
+// A Vue component over a package's native view: every attr is a prop of the native view, the
+// handle of its controller is exposed to a template ref
+export function defineNativeViewComponent(name, createController) {
+    return defineComponent({
+        name,
+        // Nothing may leak onto the wrapper, the attrs are the props of the native view
+        inheritAttrs: false,
+        setup(_props, { attrs, expose }) {
+            const host = createHostNodeHolder();
+            const controller = createController(host.getNode);
+            expose(controller.handle);
+            onUnmounted(() => controller.dispose?.());
+            return () => {
+                const descriptor = controller.render(normalizeVueAttrs(attrs));
+                return descriptor ? descriptorToVue(host.capture(descriptor)) : null;
+            };
+        },
+    });
+}

package/build/composables/use-animated-value.d.ts

@@ -0,0 +1,7 @@
+import { type AnimatedColor, type AnimatedValue, type AnimatedValueXY, type IAnimatedValueConfig, type IColorInput } from '@symbiote-native/engine';
+export declare function useAnimatedValue(initialValue: number, config?: IAnimatedValueConfig): AnimatedValue;
+export declare function useAnimatedValueXY(initialValue: {
+    x: number;
+    y: number;
+}, config?: IAnimatedValueConfig): AnimatedValueXY;
+export declare function useAnimatedColor(inputValue?: IColorInput, config?: IAnimatedValueConfig): AnimatedColor;

package/build/composables/use-animated-value.js

@@ -0,0 +1,14 @@
+// RN's `useAnimatedValue`, `useAnimatedValueXY` and `useAnimatedColor` as composables: `setup()`
+// runs once per component, so each call is the one instance. `markRaw` keeps `reactive()` from
+// wrapping the node in a Proxy
+import { markRaw } from '@vue/runtime-core';
+import { createAnimatedColor, createAnimatedValue, createAnimatedValueXY, } from '@symbiote-native/engine';
+export function useAnimatedValue(initialValue, config) {
+    return markRaw(createAnimatedValue(initialValue, config));
+}
+export function useAnimatedValueXY(initialValue, config) {
+    return markRaw(createAnimatedValueXY(initialValue, config));
+}
+export function useAnimatedColor(inputValue, config) {
+    return markRaw(createAnimatedColor(inputValue, config));
+}

package/build/composables/use-color-scheme.d.ts

@@ -1,3 +1,3 @@
 import { type Ref } from '@vue/runtime-core';
 import { type IColorSchemeName } from '@symbiote-native/engine';
-export declare function useColorScheme(): Ref<IColorSchemeName | null>;
+export declare function useColorScheme(): Ref<IColorSchemeName | null | undefined>;

package/build/composables/use-event.d.ts

@@ -0,0 +1,6 @@
+import type { MaybeRef, MaybeRefOrGetter, ShallowRef } from '@vue/runtime-core';
+import type { IEventEmitterOf, IEventName, IEventPayload, IEventsMap } from '@symbiote-native/engine';
+/** Calls the listener for each event, the latest one, and stops when the owner unmounts */
+export declare function useEventListener<TEventsMap extends IEventsMap, TName extends IEventName<TEventsMap>>(emitter: MaybeRefOrGetter<IEventEmitterOf<TEventsMap>>, eventName: MaybeRefOrGetter<TName>, listener: MaybeRef<TEventsMap[TName]>): void;
+/** The payload of the last event, `initialValue` (or `null`) until the first one */
+export declare function useEvent<TEventsMap extends IEventsMap, TName extends IEventName<TEventsMap>>(emitter: MaybeRefOrGetter<IEventEmitterOf<TEventsMap>>, eventName: MaybeRefOrGetter<TName>, initialValue?: IEventPayload<TEventsMap, TName> | null): Readonly<ShallowRef<IEventPayload<TEventsMap, TName> | null>>;

package/build/composables/use-event.js

@@ -0,0 +1,22 @@
+// Vue twins of `useEvent` and `useEventListener` of the `expo` package, for any emitter
+import { shallowRef, toValue, unref, watch } from '@vue/runtime-core';
+import { bindEventListener } from '@symbiote-native/engine';
+/** Calls the listener for each event, the latest one, and stops when the owner unmounts */
+export function useEventListener(emitter, eventName, 
+// A ref, not a getter: a function here is the listener itself
+listener) {
+    watch([() => toValue(emitter), () => toValue(eventName)], ([source, name], _previous, onCleanup) => {
+        // The listener is read at each event, a new one is not a new subscription
+        onCleanup(bindEventListener(source, name, () => unref(listener)));
+    }, { immediate: true });
+}
+/** The payload of the last event, `initialValue` (or `null`) until the first one */
+export function useEvent(emitter, eventName, initialValue = null) {
+    const event = shallowRef(initialValue);
+    watch([() => toValue(emitter), () => toValue(eventName)], ([source, name], _previous, onCleanup) => {
+        onCleanup(bindEventListener(source, name, () => (next) => {
+            event.value = next;
+        }));
+    }, { immediate: true });
+    return event;
+}

package/build/create-transition/index.d.ts

@@ -1,8 +1,8 @@
 import { type VNode } from '@vue/runtime-core';
-export interface ITransitionProps {
+export type ITransitionProps = {
     duration?: number;
     appear?: boolean;
-}
+};
 export declare const Transition: import("vue").DefineComponent<{
     duration: number;
     appear: boolean;

package/build/create-transition/index.js

@@ -21,7 +21,7 @@ function animatedOpacity(el, initial) {
 }
 function fadeTo(el, toValue, duration, done) {
     const value = opacityOf.get(el) ?? animatedOpacity(el, toValue === 1 ? 0 : 1);
-    timing(value, { toValue, duration }).start(({ finished }) => {
+    timing(value, { toValue, duration, useNativeDriver: false }).start(({ finished }) => {
         if (finished)
             done();
     });

package/build/descriptor-to-vue.d.ts

@@ -1,3 +1,3 @@
 import { type VNode } from '@vue/runtime-core';
 import type { IDescriptor } from '@symbiote-native/components';
-export declare function descriptorToVue(node: IDescriptor): VNode;
+export declare function descriptorToVue(node: IDescriptor, extraChildren?: readonly VNode[]): VNode;

package/build/descriptor-to-vue.js

@@ -4,10 +4,14 @@
 // renderer → engine → Fabric, exactly like a hand-written h('view'). The React
 // twin is `adapters/react/src/descriptor-to-react.ts`.
 import { h } from '@vue/runtime-core';
-export function descriptorToVue(node) {
+// `extraChildren` are caller vnodes (a component's slot) that go after the descriptor's own
+export function descriptorToVue(node, extraChildren = []) {
     // String type → host element (the Vue renderer's createElement → descriptorFor maps it to
     // a Fabric name); array children, since these are host elements, not slotted components.
-    return h(node.type, { ...node.props, key: node.key }, node.children.map(toChild));
+    return h(node.type, { ...node.props, key: node.key }, [
+        ...node.children.map(toChild),
+        ...extraChildren,
+    ]);
 }
 function toChild(child) {
     return typeof child === 'string' ? child : descriptorToVue(child);

package/build/index.d.ts

@@ -25,9 +25,12 @@ export { TouchableNativeFeedback } from '@symbiote-native/components';
 export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from '@symbiote-native/components';
 export type { ITouchableNativeFeedbackProps } from './components/touchable-native-feedback-props';
 export type { IButtonProps } from './components/button-props';
+export type { ICheckboxProps } from './components/checkbox-props';
 export type { ITextInputProps } from './components/text-input/text-input-props';
 export type { ITextInputHandle, ITextInputChangeEvent, } from '@symbiote-native/components';
 export { VirtualizedList } from './components/virtualized-list';
+export { useVirtualizedListScope } from './components/virtualized-list/nested-scope';
+export type { IListScope } from '@symbiote-native/components';
 export type { IVirtualizedListProps, IVirtualizedListSlots, IVirtualizedListEmits, IVirtualizedListHandle, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, ICellLayout, } from './components/virtualized-list';
 export { FlatList } from './components/flat-list';
 export type { IFlatListProps, IFlatListSlots, IFlatListEmits, IFlatListHandle, } from './components/flat-list';
@@ -36,6 +39,8 @@ export type { IVirtualizedSectionListProps, IVirtualizedSectionListSlots, IVirtu
 export { SectionList } from './components/section-list';
 export type { ISection, ISectionListProps, ISectionListSlots, ISectionListEmits, ISectionListHandle, } from './components/section-list';
 export type { ISafeAreaViewProps } from './components/safe-area-view-props';
+export type { ILayoutConformanceProps } from './components/layout-conformance-props';
+export type { ILayoutConformanceMode } from '@symbiote-native/components';
 export type { IRefreshControlProps } from './components/refresh-control-props';
 export { descriptorToVue } from './descriptor-to-vue';
 export { normalizeVueAttrs } from './utils/normalize-attrs';
@@ -50,19 +55,22 @@ export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
 export type { IKeyboardAvoidingBehavior, IKeyboardAvoidingViewProps, IKeyboardAvoidingViewEmits, } from './components/keyboard-avoiding-view';
 export { StatusBar } from './modules/status-bar';
 export type { IStatusBarProps, IStatusBarStyle } from './modules/status-bar';
-export { AppRegistry, setHostRegistrar } from './modules/app-registry';
-export type { IComponentProvider, IAppParameters, IRunnable, IHostRegistrar, IWrapperComponentProvider, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from './modules/app-registry';
+export { AppRegistry, HeadlessJsTaskError, setHostRegistrar, } from './modules/app-registry';
+export type { IComponentProvider, IAppConfig, IAppParameters, IRunnable, IHostRegistrar, IWrapperComponentProvider, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from './modules/app-registry';
 export { useColorScheme } from './composables/use-color-scheme';
+export { useAnimatedColor, useAnimatedValue, useAnimatedValueXY, } from './composables/use-animated-value';
 export { useWindowDimensions } from './composables/use-window-dimensions';
 export { createPermissionHook } from './composables/create-permission-hook';
 export { createResourceHook } from './composables/create-resource-hook';
+export { defineNativeViewComponent } from './composables/define-native-view-component';
 export { createEventValueHook } from './composables/create-event-value-hook';
-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';
+export { useEvent, useEventListener } from './composables/use-event';
+export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, TextInputState, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
 export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, IAccessibilityChangeEvent, IAccessibilityChangeEventName, IAccessibilityChangeEventHandler, IAccessibilityAnnouncementFinishedEvent, IAnnounceForAccessibilityOptions, IAccessibilityEventType, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, } from '@symbiote-native/engine';
 export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, } from '@symbiote-native/engine';
 export type { ISymbioteEvent, ISymbioteNode, IRootTag, } from '@symbiote-native/engine';
 export type { IViewStyle, ITextStyle, IFlexAlign, IFlexJustify, IPlatformStatic, IPlatformOSType, IPlatformConstantsIOS, IPlatformConstantsAndroid, IPlatformSelectSpec, } from '@symbiote-native/engine';
-export { setNativeViewConfigSource, setDeviceEventSource, } from '@symbiote-native/engine';
+export { setNativeViewConfigSource } from '@symbiote-native/engine';
 export type { INativeViewConfig, INativeViewConfigSource, } from '@symbiote-native/engine';
 export type { IEnterKeyHint, IInputMode, ISubmitBehavior, ITextInputSelection, IImageStatics, } from '@symbiote-native/components';
 export { PixelRatio, PanResponder, PlatformColor, DynamicColorIOS, InteractionManager, } from '@symbiote-native/engine';
@@ -70,3 +78,7 @@ export type { IPixelRatioStatic } from '@symbiote-native/engine';
 export type { IPanResponderGestureState, IPanResponderCallbacks, IGestureResponderHandlers, IPanResponderInstance, } from '@symbiote-native/engine';
 export type { IColorValue, IOpaqueColorValue, IDynamicColorIOSTuple, } from '@symbiote-native/engine';
 export type { IInteractionEvent, ISimpleTask, IPromiseTask, ITask, IHandle, } from '@symbiote-native/engine';
+export { DeviceEventEmitter, Easing, EventEmitter, NativeAppEventEmitter, NativeEventEmitter, } from '@symbiote-native/engine';
+export type { IEasing, IEasingFunction, IEmitterSubscription, IEventEmitter, IEventEmitterModule, IEventSubscription, INativeEventListener, } from '@symbiote-native/engine';
+export { codegenNativeCommands, codegenNativeComponent, DevMenu, DevSettings, LogBox, NativeComponentRegistry, NativeModules, Networking, PushNotificationIOS, ReactNativeVersion, registerCallableModule, requireNativeComponent, Systrace, Touchable, TurboModuleRegistry, UIManager, UTFSequence, } from '@symbiote-native/engine';
+export type { IDevSettings } from '@symbiote-native/engine';

package/build/index.js

@@ -6,34 +6,13 @@
 // import sitting beside a re-export of the same specifier both go lazy under Metro's production
 // `inlineRequires` and the registration silently never runs in a release build. See register.ts.
 import './register.js';
-// Re-exports Vue's ENTIRE public API (ref, computed, defineComponent, unref, …), which looks like
-// scope creep on an otherwise carefully curated barrel — it is not ergonomics, it is what makes
-// `vueCompilerOptions.lib: "@symbiote-native/vue"` (examples/*/tsconfig.typecheck.json) safe to
-// set. Volar/`@vue/language-core` generates virtual TS referencing `import(lib).unref`,
-// `import(lib).GlobalComponents`, `.GlobalDirectives`, `.ShallowRef`, `.ObjectDirective` — always
-// off `lib`'s ROOT import, never a subpath — so pointing `lib` at us without this line breaks
-// EVERY `.vue` SFC's template check with `Cannot find name` the moment Volar's codegen touches any
-// of them. `lib`'s other consumer, `optionsWrapper`'s `(await import(lib)).defineComponent(...)`,
-// only fires for a plain `<script>` `export default {}` block (`isExportRawObject`,
-// `@vue/language-core/lib/codegen/script/index.js`) — every `.vue` file in this repo uses
-// `<script setup>`, so that branch never runs and defineComponent needing to resolve from here too
-// is moot in practice, not something this wildcard has to get right on its own.
-//
-// WHY `lib` NEEDS TO BE US AT ALL: plain `"vue"` (Volar's default) types `__VLS_IntrinsicElements`
-// and `GlobalComponents` off `vue`'s own `jsx-runtime`/ambient augmentation — the SAME
-// `view`/`text`/`image`/`switch`-collide-with-real-SVG-elements problem documented in
-// `jsx-runtime.ts` and `intrinsic-elements.ts`, but for `.vue` TEMPLATES rather than TSX. Volar's
-// native-vs-component branch (`!isNativeTag(tag)`) reads `IntrinsicElements` from
-// `import('${lib}/jsx-runtime')`, so redirecting `lib` to our own package is what finally reaches
-// OUR jsx-runtime.ts (real `IViewProps`/`ITextProps`/… on all 4 collision tags) for those four.
+// Volar reads `unref`, `GlobalComponents` and the rest off the ROOT import of `lib`, which is this
+// package (`vueCompilerOptions.lib`), so the barrel re-exports all of `vue`
+// Pointing `lib` here also routes `.vue` template tags to our `jsx-runtime.ts` and its prop types
 export * from 'vue';
 export { mount, unmount, setAppConfigurator } from './render.js';
-// The portal: Vue's own <Teleport>, guarded so `to` must be a node/surface this renderer actually
-// mounted (there is no querySelector). It MOVES host nodes, so it reaches any already-mounted
-// target in the SAME surface — including one you only hold a ref to — and keeps the content's
-// reactive owner at the call site (provide/inject resolve from where it was written). Reaching a
-// second, independently mount()ed surface is a different mechanism: createTunnel, which copies
-// into an <Out/> the destination has to render. See create-portal/index.ts.
+// Vue's `Teleport` moves host nodes within one surface, `to` must be a node this renderer mounted
+// Another `mount()`ed surface is the job of `createTunnel`, see create-portal/index.ts
 export { Teleport } from './create-portal/index.js';
 export { createTunnel } from './create-tunnel/index.js';
 // Vue's own Transition/TransitionGroup are runtime-dom-only (CSS class toggling) and
@@ -53,6 +32,7 @@ export { setImageSourceResolver } from '@symbiote-native/components';
 // `TouchableNativeFeedback.Ripple(…)` / `.SelectableBackground(…)` are unchanged.
 export { TouchableNativeFeedback } from '@symbiote-native/components';
 export { VirtualizedList } from './components/virtualized-list/index.js';
+export { useVirtualizedListScope } from './components/virtualized-list/nested-scope.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';
@@ -69,21 +49,28 @@ export { KeyboardAvoidingView } from './components/keyboard-avoiding-view.js';
 export { StatusBar } from './modules/status-bar.js';
 // 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/index.js';
+export { AppRegistry, HeadlessJsTaskError, setHostRegistrar, } from './modules/app-registry/index.js';
 // Vue composables over the core device-state modules.
 export { useColorScheme } from './composables/use-color-scheme.js';
+export { useAnimatedColor, useAnimatedValue, useAnimatedValueXY, } from './composables/use-animated-value.js';
 export { useWindowDimensions } from './composables/use-window-dimensions.js';
 export { createPermissionHook } from './composables/create-permission-hook.js';
 export { createResourceHook } from './composables/create-resource-hook.js';
+export { defineNativeViewComponent } from './composables/define-native-view-component.js';
 export { createEventValueHook } from './composables/create-event-value-hook.js';
+export { useEvent, useEventListener } from './composables/use-event.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';
+export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, TextInputState, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
 // Re-export the framework-agnostic engine surface (pure utilities + diagnostics).
 export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, } from '@symbiote-native/engine';
 // Wired once by the app entry on a real host (like setColorProcessor): hands the engine
-// RN's ViewConfig registry so third-party Fabric views auto-derive their metadata.
-// setDeviceEventSource is the third seam of the same set and travels with them.
-export { setNativeViewConfigSource, setDeviceEventSource, } from '@symbiote-native/engine';
+// RN's ViewConfig registry so third-party Fabric views auto-derive their metadata
+export { setNativeViewConfigSource } from '@symbiote-native/engine';
 // Pure utilities that moved to the engine (single source, both adapters re-export):
 // PixelRatio + PanResponder, plus the color builders and the interaction scheduler.
 export { PixelRatio, PanResponder, PlatformColor, DynamicColorIOS, InteractionManager, } from '@symbiote-native/engine';
+// The device event bus and the easing curves, shared verbatim from the engine
+export { DeviceEventEmitter, Easing, EventEmitter, NativeAppEventEmitter, NativeEventEmitter, } from '@symbiote-native/engine';
+// RN's dev and native-module utilities, shared verbatim from the engine. The ones RN owns forward
+// to its own module, which `registerApp` hands over
+export { codegenNativeCommands, codegenNativeComponent, DevMenu, DevSettings, LogBox, NativeComponentRegistry, NativeModules, Networking, PushNotificationIOS, ReactNativeVersion, registerCallableModule, requireNativeComponent, Systrace, Touchable, TurboModuleRegistry, UIManager, UTFSequence, } from '@symbiote-native/engine';

package/build/jsx-runtime.d.ts

@@ -4,6 +4,7 @@ import type { IViewProps } from './components/view-props';
 import type { ITextProps } from './components/text-props';
 import type { IPressableProps } from './components/pressable-props';
 import type { IButtonProps } from './components/button-props';
+import type { ICheckboxProps } from './components/checkbox-props';
 import type { IImageProps } from './components/image-props';
 import type { IImageBackgroundProps } from './components/image-background-props';
 import type { IInputAccessoryViewProps } from './components/input-accessory-view-props';
@@ -23,6 +24,7 @@ export interface ICrossedPrimitiveProps {
     text: ITextProps;
     pressable: IPressableProps;
     button: IButtonProps;
+    checkbox: ICheckboxProps;
     image: IImageProps;
     'image-background': IImageBackgroundProps;
     'input-accessory-view': IInputAccessoryViewProps;