@symbiote-native/vue 0.1.0

package/build/components/flat-list/index.d.ts

@@ -0,0 +1,88 @@
+import { type VNode } from '@vue/runtime-core';
+import { type ISeparatorProps, type ISeparators, type IViewabilityConfigCallbackPair, type IViewableItemsChangedInfo, type IVirtualizedListHandle } from '@symbiote-native/components';
+import { type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+export type IFlatListHandle = IVirtualizedListHandle;
+export interface IFlatListProps<ItemT> {
+    data: readonly ItemT[];
+    keyExtractor?: (item: ItemT, index: number) => string;
+    numColumns?: number;
+    columnWrapperStyle?: IStyleProp<IViewStyle> | string;
+    viewabilityConfigCallbackPairs?: IViewabilityConfigCallbackPair<ItemT>[];
+    [key: string]: unknown;
+}
+export type IFlatListSlots<ItemT> = {
+    item: (info: {
+        item: ItemT;
+        index: number;
+        separators: ISeparators;
+    }) => VNode[] | VNode;
+    separator?: (props: ISeparatorProps<ItemT>) => VNode[] | VNode;
+    header?: () => VNode[] | VNode;
+    footer?: () => VNode[] | VNode;
+    empty?: () => VNode[] | VNode;
+};
+export type IFlatListEmits<ItemT> = {
+    viewableItemsChanged: (info: IViewableItemsChangedInfo<ItemT>) => void;
+    endReached: (info: {
+        distanceFromEnd: number;
+    }) => void;
+    startReached: (info: {
+        distanceFromStart: number;
+    }) => void;
+    refresh: () => void;
+    scrollToIndexFailed: (info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+    }) => void;
+};
+export declare const FlatList: new <ItemT>(props: (IFlatListProps<ItemT> & ({} | {
+    onRefresh?: (() => any) | undefined;
+    onViewableItemsChanged?: ((info: IViewableItemsChangedInfo<ItemT>) => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+    onScrollToIndexFailed?: ((info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+    }) => any) | undefined;
+})) & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<IFlatListProps<ItemT> & ({} | {
+    onRefresh?: (() => any) | undefined;
+    onViewableItemsChanged?: ((info: IViewableItemsChangedInfo<ItemT>) => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+    onScrollToIndexFailed?: ((info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+    }) => any) | undefined;
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} | IFlatListEmits<ItemT>, import("vue").PublicProps, {}, false, {}, import("vue").SlotsType<IFlatListSlots<ItemT>>, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, (IFlatListProps<ItemT> & {}) | (IFlatListProps<ItemT> & {
+    onRefresh?: (() => any) | undefined;
+    onViewableItemsChanged?: ((info: IViewableItemsChangedInfo<ItemT>) => any) | undefined;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => any) | undefined;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => any) | undefined;
+    onScrollToIndexFailed?: ((info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+    }) => any) | undefined;
+}), {}, {}, {}, {}, {}>;

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

@@ -0,0 +1,189 @@
+// FlatList, the Vue convenience surface over VirtualizedList. It takes a plain `data` array
+// and derives getItem/getItemCount; numColumns packs items into rows (a horizontal sub-View),
+// so the virtualized stream is rows, not items (RN's FlatList). All windowing / viewability /
+// batching / imperative scrolling are inherited from VirtualizedList; the data shaping and the
+// row/viewability/separator transforms are shared from @symbiote-native/components.
+//
+// This is the FIRST generic component on the typed-emits pattern (the symbiote port of pd-web-kit):
+// a GENERIC setup function `<ItemT,>(props, ctx: ICtx<IFlatListEmits<ItemT>>)` so the events emit
+// with ItemT-typed payloads (`@viewable-items-changed` carries `ItemT`, not `unknown`). For that to
+// infer at the call site, the generic INPUTS (data/renderItem/keyExtractor/…) must be typed `props`,
+// not `$attrs` — so they are declared in the runtime `props` array; the long passthrough tail
+// (horizontal/inverted/style/getItemLayout/raw scroll/…) still rides through `$attrs` onto the inner
+// VirtualizedList. The inner list still GATES RefreshControl + viewability on callback presence, so
+// each emit bridge is wired to it ONLY when the consumer actually listens (read off the instance
+// vnode props), keeping behavior identical to the prop-callback era.
+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';
+// 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).
+const VirtualizedListHost = VirtualizedList;
+// The typed inputs FlatList reads off `props`; everything else falls through $attrs onto the inner
+// VirtualizedList. Listed for the runtime `props` declaration (keyof can't derive it: the index
+// signature widens keyof to `string`).
+const PROP_KEYS = [
+    'data',
+    'keyExtractor',
+    'numColumns',
+    'columnWrapperStyle',
+    'viewabilityConfigCallbackPairs',
+];
+const EMIT_KEYS = [
+    'viewableItemsChanged',
+    'endReached',
+    'startReached',
+    'refresh',
+    'scrollToIndexFailed',
+];
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isVirtualizedListHandle(value) {
+    return isRecord(value) && typeof value.scrollToOffset === 'function';
+}
+// The handle FlatList exposes delegates to the inner VirtualizedList's handle (Vue resolves a
+// parent ref to the exposed object, so the wrapper must re-expose rather than forward the ref).
+function buildDelegateHandle(getInner) {
+    return {
+        scrollToOffset: params => getInner()?.scrollToOffset(params),
+        scrollToIndex: params => getInner()?.scrollToIndex(params),
+        scrollToItem: params => getInner()?.scrollToItem(params),
+        scrollToEnd: params => getInner()?.scrollToEnd(params),
+        flashScrollIndicators: () => getInner()?.flashScrollIndicators(),
+        getNativeScrollRef: () => getInner()?.getNativeScrollRef() ?? null,
+        getScrollableNode: () => getInner()?.getScrollableNode() ?? null,
+        getScrollResponder: () => getInner()?.getScrollResponder() ?? null,
+        getScrollNode: () => getInner()?.getScrollNode() ?? null,
+        recordInteraction: () => getInner()?.recordInteraction(),
+    };
+}
+export const FlatList = defineComponent((props, { attrs, expose, emit, slots }) => {
+    const inner = shallowRef(null);
+    const setInner = (instance) => {
+        inner.value = isVirtualizedListHandle(instance) ? instance : null;
+    };
+    expose(buildDelegateHandle(() => inner.value));
+    // VirtualizedList gates RefreshControl + viewability on callback presence, so a bridge is wired
+    // ONLY when the consumer actually listens. Declared emits are stripped from $attrs, so read the
+    // listener off the instance's own vnode props (what the parent passed) instead.
+    const instance = getCurrentInstance();
+    const listens = (onName) => {
+        const vnodeProps = instance?.vnode.props;
+        return vnodeProps != null && typeof vnodeProps[onName] === 'function';
+    };
+    return () => {
+        const data = Array.isArray(props.data) ? props.data : [];
+        const keyExtractor = props.keyExtractor;
+        const numColumns = typeof props.numColumns === 'number' ? props.numColumns : SINGLE_COLUMN;
+        const viewabilityPairs = props.viewabilityConfigCallbackPairs;
+        // The chrome slots ride straight down to the inner list; #item/#separator are forwarded as-is
+        // for a single column and re-wrapped per cell for multi-column below.
+        const chromeSlots = { header: slots.header, footer: slots.footer, empty: slots.empty };
+        // 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);
+        dlog(`Vue FlatList over ${data.length} items, ${numColumns} column(s)`);
+        // The synthesized list events become VL handlers ONLY when listened, so the inner list keeps
+        // gating (no parasitic RefreshControl / viewability work for an unlistened event).
+        const endReached = listens('onEndReached')
+            ? (info) => emit('endReached', info)
+            : undefined;
+        const startReached = listens('onStartReached')
+            ? (info) => emit('startReached', info)
+            : undefined;
+        const refresh = listens('onRefresh') ? () => emit('refresh') : undefined;
+        const scrollToIndexFailed = listens('onScrollToIndexFailed')
+            ? (info) => emit('scrollToIndexFailed', info)
+            : undefined;
+        const wantsViewability = listens('onViewableItemsChanged');
+        if (numColumns <= SINGLE_COLUMN) {
+            const onViewableItemsChanged = wantsViewability
+                ? (info) => emit('viewableItemsChanged', info)
+                : undefined;
+            return h(VirtualizedListHost, {
+                ...forwarded,
+                ref: setInner,
+                data,
+                getItem: (_source, index) => data[index],
+                getItemCount: () => data.length,
+                keyExtractor,
+                onEndReached: endReached,
+                onStartReached: startReached,
+                onRefresh: refresh,
+                onScrollToIndexFailed: scrollToIndexFailed,
+                onViewableItemsChanged,
+                viewabilityConfigCallbackPairs: viewabilityPairs,
+            }, 
+            // A single column forwards the consumer's slots untouched (#item info shape is identical).
+            { ...chromeSlots, item: slots.item, separator: slots.separator });
+        }
+        // Multi-column: the virtualized stream is rows. Each cell renders its items side by side
+        // in a flex-row View so windowing accounts for whole rows.
+        const rows = chunkIntoRows(data, numColumns);
+        // A class-name string resolves through the shared style registry; an object/array is
+        // already style-shaped and passes through as-is.
+        const rowStyle = [
+            { flexDirection: 'row' },
+            typeof props.columnWrapperStyle === 'string'
+                ? resolveClassName(props.columnWrapperStyle)
+                : isRecord(props.columnWrapperStyle) || Array.isArray(props.columnWrapperStyle)
+                    ? props.columnWrapperStyle
+                    : undefined,
+        ];
+        const rowItemSlot = (info) => {
+            const cells = info.item.items.map((item, column) => {
+                const index = info.item.startIndex + column;
+                const key = keyExtractor ? keyExtractor(item, index) : String(index);
+                // The row IS the virtualized cell, so every item in it shares the row's separators
+                // handle (the divider sits between rows, not columns), like RN's multi-column FlatList.
+                return h('symbiote-view', { key, style: { flex: 1 } }, slots.item !== undefined
+                    ? slots.item({ item, index, separators: info.separators })
+                    : []);
+            });
+            return [h('symbiote-view', { style: rowStyle }, cells)];
+        };
+        // Viewability over rows expands back to per-item tokens so the caller sees item-level
+        // visibility, not row-level (shared expandRowViewability).
+        const rowOnViewableItemsChanged = wantsViewability
+            ? (rowInfo) => emit('viewableItemsChanged', expandRowViewability(rowInfo, keyExtractor))
+            : undefined;
+        const rowViewabilityPairs = viewabilityPairs?.map(pair => ({
+            viewabilityConfig: pair.viewabilityConfig,
+            onViewableItemsChanged: (rowInfo) => {
+                pair.onViewableItemsChanged?.(expandRowViewability(rowInfo, keyExtractor));
+            },
+        }));
+        // The divider between rows shows real items (last of the row above, first of the row below),
+        // so the user's #separator slot, typed on ItemT, sees items rather than the IRow wrapper.
+        const rowSeparatorSlot = slots.separator === undefined
+            ? undefined
+            : (rowProps) => slots.separator({
+                ...rowProps,
+                leadingItem: lastItemOfRow(rowProps.leadingItem),
+                trailingItem: firstItemOfRow(rowProps.trailingItem),
+            });
+        return h(VirtualizedListHost, {
+            ...forwarded,
+            ref: setInner,
+            data: rows,
+            getItem: (_source, index) => rows[index],
+            getItemCount: () => rows.length,
+            keyExtractor: rowKeyExtractor,
+            onEndReached: endReached,
+            onStartReached: startReached,
+            onRefresh: refresh,
+            onScrollToIndexFailed: scrollToIndexFailed,
+            onViewableItemsChanged: rowOnViewableItemsChanged,
+            viewabilityConfigCallbackPairs: rowViewabilityPairs,
+        }, { ...chromeSlots, item: rowItemSlot, separator: rowSeparatorSlot });
+    };
+}, {
+    name: 'FlatList',
+    inheritAttrs: false,
+    props: PROP_KEYS,
+    emits: EMIT_KEYS,
+});

package/build/components/image-background.d.ts

@@ -0,0 +1,9 @@
+import { type FunctionalComponent } from '@vue/runtime-core';
+import { type IImageProps } from '@symbiote-native/components';
+import { type IClassNameValue, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+export interface IImageBackgroundProps extends Omit<IImageProps, 'style'> {
+    style?: IStyleProp<IViewStyle>;
+    imageStyle?: IStyleProp<IViewStyle> | string;
+    class?: IClassNameValue;
+}
+export declare const ImageBackground: FunctionalComponent<{}, {}, any, {}>;

package/build/components/image-background.js

@@ -0,0 +1,114 @@
+// ImageBackground: the Vue lifecycle half. The composition (the absolute-fill Image behind the
+// children, the dimension-proxy + style-merge math) lives framework-agnostic in
+// @symbiote-native/components/renderImageBackground and is shared verbatim with React; here Vue only
+// narrows the untyped attrs into the typed Image view, folds aria/role, bridges the Descriptor to
+// vnodes, and appends the slot children ON TOP of the inner image.
+//
+// FUNCTIONAL, not a stateful defineComponent: ImageBackground is render-only (no state). Inputs
+// arrive as attrs (untyped); the typed transform fields are narrowed with runtime guards, the
+// forward-only rest is folded so resolveAccessibilityProps lands aria-* onto the inner image.
+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';
+function asString(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+function asNumber(value) {
+    return typeof value === 'number' ? value : undefined;
+}
+// A source is a structured object/array or an opaque require() id (number) the engine's injected
+// resolver expands; any object/array/number is a valid source to forward.
+function asSource(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'object' && value !== null)
+        return value;
+    return undefined;
+}
+function isResizeMode(value) {
+    return (value === 'cover' ||
+        value === 'contain' ||
+        value === 'stretch' ||
+        value === 'repeat' ||
+        value === 'center');
+}
+function asResizeMode(value) {
+    return isResizeMode(value) ? value : undefined;
+}
+function asCrossOrigin(value) {
+    return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
+}
+// Object OR array (a style list) passes through: the engine flattens either; primitives degrade
+// to undefined (parity with React, which preserves the StyleProp).
+function isStyleProp(value) {
+    return typeof value === 'object' && value !== null;
+}
+function toChildVNode(child) {
+    return typeof child === 'string' ? child : descriptorToVue(child);
+}
+// `style` is the WRAPPER View style; `imageStyle` targets the inner Image. The image transform
+// fields are consumed by the source/style fold; everything else forwards onto the inner image.
+const HANDLED_ATTRS = [
+    'style',
+    'imageStyle',
+    'class',
+    'source',
+    'defaultSource',
+    'loadingIndicatorSource',
+    'resizeMode',
+    'tintColor',
+    'src',
+    'srcSet',
+    'alt',
+    'width',
+    'height',
+    'crossOrigin',
+    'referrerPolicy',
+];
+function forwardAttrs(attrs) {
+    const result = {};
+    for (const key of Object.keys(attrs)) {
+        if (!HANDLED_ATTRS.includes(key))
+            result[key] = attrs[key];
+    }
+    return result;
+}
+const ImageBackgroundComponent = (_props, { attrs: rawAttrs, slots }) => {
+    const attrs = normalizeVueAttrs(rawAttrs);
+    const wrapper = renderImageBackground({
+        style: isStyleProp(attrs.style) ? attrs.style : undefined,
+        // A class-name string resolves through the shared style registry, same as `class` above;
+        // an object/array is already style-shaped and passes through as-is.
+        imageStyle: typeof attrs.imageStyle === 'string'
+            ? resolveClassName(attrs.imageStyle)
+            : isStyleProp(attrs.imageStyle)
+                ? attrs.imageStyle
+                : undefined,
+        image: {
+            source: asSource(attrs.source),
+            defaultSource: asSource(attrs.defaultSource),
+            loadingIndicatorSource: asSource(attrs.loadingIndicatorSource),
+            resizeMode: asResizeMode(attrs.resizeMode),
+            tintColor: asString(attrs.tintColor),
+            src: asString(attrs.src),
+            srcSet: asString(attrs.srcSet),
+            alt: asString(attrs.alt),
+            width: asNumber(attrs.width),
+            height: asNumber(attrs.height),
+            crossOrigin: asCrossOrigin(attrs.crossOrigin),
+            referrerPolicy: asString(attrs.referrerPolicy),
+            passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
+        },
+    });
+    // wrapper = symbiote-view > [imageDescriptor]; the slot children paint AFTER the image (on top).
+    const slotChildren = slots.default !== undefined ? slots.default() : [];
+    return h(wrapper.type, { ...wrapper.props, key: wrapper.key, class: attrs.class }, [
+        ...wrapper.children.map(toChildVNode),
+        ...slotChildren,
+    ]);
+};
+ImageBackgroundComponent.displayName = 'ImageBackground';
+ImageBackgroundComponent.inheritAttrs = false;
+export const ImageBackground = ImageBackgroundComponent;

package/build/components/image.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionalComponent } from '@vue/runtime-core';
+import { type IImageProps as IImageBaseProps, type IImageStatics } from '@symbiote-native/components';
+import type { IClassNameValue } from '@symbiote-native/engine';
+export { setImageSourceResolver } from '@symbiote-native/components';
+export type { IImageSource, IImageSourceProp, IResizeMode, IImageSize, IImageCacheStatus, } from '@symbiote-native/components';
+export type IImageProps = IImageBaseProps & {
+    class?: IClassNameValue;
+};
+export declare const Image: FunctionalComponent<IImageProps> & IImageStatics;

package/build/components/image.js

@@ -0,0 +1,99 @@
+// Image: the Vue lifecycle half. The full fold (source / src / srcSet resolution, the
+// width/height → style fold, resizeMode/tintColor, alt → accessibility, and the native source
+// array) lives framework-agnostic in @symbiote-native/components and is shared verbatim with React;
+// here Vue only narrows the untyped attrs into renderImage's typed view, folds aria/role, bridges
+// the Descriptor to a vnode, and carries the Image statics (getSize / prefetch / queryCache / …).
+//
+// FUNCTIONAL, not a stateful defineComponent: Image is render-only, and Animated.Image wraps it
+// via createAnimatedComponent, which captures the host
+// node through a ref that only falls through on a functional component (a defineComponent's ref
+// resolves to a useless component proxy; see components.ts). So Image must stay functional.
+//
+// Inputs arrive as attrs (untyped). The typed transform fields are narrowed with runtime guards;
+// 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';
+export { setImageSourceResolver } from '@symbiote-native/components';
+function asString(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+function asNumber(value) {
+    return typeof value === 'number' ? value : undefined;
+}
+// A source is a structured object/array or an opaque require() id (number) the engine's injected
+// resolver expands; any object/array/number is a valid source to forward (IImageSource is all-optional).
+function asSource(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'object' && value !== null)
+        return value;
+    return undefined;
+}
+function isResizeMode(value) {
+    return (value === 'cover' ||
+        value === 'contain' ||
+        value === 'stretch' ||
+        value === 'repeat' ||
+        value === 'center');
+}
+function asResizeMode(value) {
+    return isResizeMode(value) ? value : undefined;
+}
+function asCrossOrigin(value) {
+    return value === 'anonymous' || value === 'use-credentials' ? value : undefined;
+}
+// Object OR array (a style list) passes through; readStyleString flattens either, and arrays must
+// survive so `style={[a, b]}` reaches Fabric (parity with React, which preserves the StyleProp).
+function isStyleProp(value) {
+    return typeof value === 'object' && value !== null;
+}
+// The typed transform fields renderImage folds; everything else forwards via passthrough.
+const HANDLED_ATTRS = [
+    'source',
+    'defaultSource',
+    'loadingIndicatorSource',
+    'style',
+    'resizeMode',
+    'tintColor',
+    'src',
+    'srcSet',
+    'alt',
+    'width',
+    'height',
+    'crossOrigin',
+    'referrerPolicy',
+];
+function forwardAttrs(attrs) {
+    const result = {};
+    for (const key of Object.keys(attrs)) {
+        if (!HANDLED_ATTRS.includes(key))
+            result[key] = attrs[key];
+    }
+    return result;
+}
+const ImageComponent = (_props, { attrs: rawAttrs }) => {
+    const attrs = normalizeVueAttrs(rawAttrs);
+    return descriptorToVue(renderImage({
+        source: asSource(attrs.source),
+        defaultSource: asSource(attrs.defaultSource),
+        loadingIndicatorSource: asSource(attrs.loadingIndicatorSource),
+        style: isStyleProp(attrs.style) ? attrs.style : undefined,
+        resizeMode: asResizeMode(attrs.resizeMode),
+        tintColor: asString(attrs.tintColor),
+        src: asString(attrs.src),
+        srcSet: asString(attrs.srcSet),
+        alt: asString(attrs.alt),
+        width: asNumber(attrs.width),
+        height: asNumber(attrs.height),
+        crossOrigin: asCrossOrigin(attrs.crossOrigin),
+        referrerPolicy: asString(attrs.referrerPolicy),
+        passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
+    }));
+};
+ImageComponent.displayName = 'Image';
+ImageComponent.inheritAttrs = false;
+// Statics attached like RN (Image.getSize / prefetch / …), shared verbatim with React via
+// the engine-resolved imageStatics. The component value doubles as the statics namespace.
+export const Image = Object.assign(ImageComponent, imageStatics);

package/build/components/input-accessory-view.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionalComponent } from '@vue/runtime-core';
+import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { IClassNameValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+export interface IInputAccessoryViewProps extends IAccessibilityProps, IAriaProps {
+    nativeID?: string;
+    backgroundColor?: string;
+    style?: IStyleProp<IViewStyle>;
+    class?: IClassNameValue;
+}
+export declare const InputAccessoryView: FunctionalComponent<{}, {}, any, {}>;

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

@@ -0,0 +1,41 @@
+// InputAccessoryView: the Vue lifecycle half (iOS). The host-node assembly (nativeID /
+// backgroundColor / style / accessibility forwarding) lives framework-agnostic in
+// @symbiote-native/components/renderInputAccessoryView and is shared verbatim with React; here Vue only
+// narrows the untyped attrs, folds aria/role, bridges the Descriptor, and nests the slot children
+// under the host.
+//
+// FUNCTIONAL, not a stateful defineComponent: render-only (no state). Inputs arrive as attrs
+// (untyped); the typed fields are narrowed with runtime guards, the forward-only rest is folded
+// 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';
+function asString(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+function isStyleProp(value) {
+    return typeof value === 'object' && value !== null;
+}
+const HANDLED_ATTRS = ['nativeID', 'backgroundColor', 'style'];
+function forwardAttrs(attrs) {
+    const result = {};
+    for (const key of Object.keys(attrs)) {
+        if (!HANDLED_ATTRS.includes(key))
+            result[key] = attrs[key];
+    }
+    return result;
+}
+const InputAccessoryViewComponent = (_props, { attrs: rawAttrs, slots }) => {
+    const attrs = normalizeVueAttrs(rawAttrs);
+    const host = renderInputAccessoryView({
+        nativeID: asString(attrs.nativeID),
+        backgroundColor: asString(attrs.backgroundColor),
+        style: isStyleProp(attrs.style) ? attrs.style : undefined,
+        passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
+    });
+    const slotChildren = slots.default !== undefined ? slots.default() : [];
+    return h(host.type, { ...host.props, key: host.key }, slotChildren);
+};
+InputAccessoryViewComponent.displayName = 'InputAccessoryView';
+InputAccessoryViewComponent.inheritAttrs = false;
+export const InputAccessoryView = InputAccessoryViewComponent;

package/build/components/keyboard-avoiding-view.d.ts

@@ -0,0 +1,18 @@
+import { type ISymbioteEvent, type IClassNameValue, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import { type IAccessibilityProps, type IAriaProps, type IKeyboardAvoidingBehavior } from '@symbiote-native/components';
+export interface IKeyboardAvoidingViewProps extends IAccessibilityProps, IAriaProps {
+    behavior?: IKeyboardAvoidingBehavior;
+    enabled?: boolean;
+    keyboardVerticalOffset?: number;
+    contentContainerStyle?: IStyleProp<IViewStyle>;
+    style?: IStyleProp<IViewStyle>;
+    class?: IClassNameValue;
+    testID?: string;
+}
+export type IKeyboardAvoidingViewEmits = {
+    layout: (event: ISymbioteEvent) => boolean;
+};
+export type { IKeyboardAvoidingBehavior } from '@symbiote-native/components';
+export declare const KeyboardAvoidingView: import("vue").DefineSetupFnComponent<IKeyboardAvoidingViewProps, IKeyboardAvoidingViewEmits, {}, IKeyboardAvoidingViewProps & {
+    onLayout?: ((event: ISymbioteEvent) => any) | undefined;
+}, import("vue").PublicProps>;