@symbiote-native/solid 0.0.1 → 0.1.0

package/build/bootstrap.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'solid-js';
+import { type IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
+export type { IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
+export type ISymbioteSolidApp = {
+    mount(appName: string): void;
+};
+export declare function createApp(RootComponent: Component, options?: IBootstrapHostOptions): ISymbioteSolidApp;

package/build/bootstrap.js

@@ -0,0 +1,18 @@
+// Zero-config app entry, the Solid twin of adapters/vue/src/bootstrap.ts and
+// adapters/svelte/src/bootstrap.ts. Lives OUTSIDE the package's main barrel — react-native's own
+// source is Flow syntax Vitest's transform can't parse, so anything importing it directly must stay
+// unreachable from the tested main index.ts.
+import { AppRegistry as RNAppRegistry } from 'react-native';
+import { bootstrapHost, } from '@symbiote-native/components/bootstrap';
+import { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
+// Mirrors the Vue/React/Svelte adapters' createApp(App).mount(appName) two-step idiom: createApp
+// stays inert, and mount(appName) is where the RN host seams and AppRegistry get wired.
+export function createApp(RootComponent, options = {}) {
+    return {
+        mount(appName) {
+            bootstrapHost(options);
+            setHostRegistrar(RNAppRegistry);
+            AppRegistry.registerComponent(appName, () => RootComponent);
+        },
+    };
+}

package/build/components/activity-indicator/index.android.d.ts

@@ -0,0 +1,2 @@
+export type { IActivityIndicatorProps, IActivityIndicatorSize } from './shared';
+export declare const ActivityIndicator: (props: import("./shared").IActivityIndicatorProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+// ActivityIndicator on Android: AndroidProgressBar needs `styleAttr` (it drives its setStyle();
+// without it the view throws "setStyle() not called") plus `indeterminate: true`, and its default
+// color is the theme (null), which the render fn turns into an OMITTED color prop — a literal null
+// would be rejected by Fabric's color parser. Same facts the other adapters' Android bindings
+// encode. Metro picks this on an Android host; no Platform.OS read.
+import { createActivityIndicator } from './shared.js';
+export const ActivityIndicator = createActivityIndicator({
+    // RN: `color = Platform.OS === 'ios' ? GRAY : null`; Android lets the theme color it.
+    defaultColor: null,
+    nativeExtras: { styleAttr: 'Normal', indeterminate: true },
+});

package/build/components/activity-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from './index.ios';

package/build/components/activity-indicator/index.ios.d.ts

@@ -0,0 +1,2 @@
+export type { IActivityIndicatorProps, IActivityIndicatorSize } from './shared';
+export declare const ActivityIndicator: (props: import("./shared").IActivityIndicatorProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+// ActivityIndicator on iOS: RCTActivityIndicatorView takes the size enum plus a GRAY default color
+// and no extra native props — the same facts adapters/react's, adapters/vue's and adapters/svelte's
+// iOS bindings encode. Metro selects this file on an iOS host, no Platform.OS read.
+import { createActivityIndicator } from './shared.js';
+// RN's iOS default spinner color (Libraries/.../ActivityIndicator.js GRAY).
+const IOS_DEFAULT_COLOR = '#999999';
+export const ActivityIndicator = createActivityIndicator({
+    defaultColor: IOS_DEFAULT_COLOR,
+    nativeExtras: {},
+});

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

@@ -0,0 +1,4 @@
+// Base / default ActivityIndicator: re-exports the iOS build. Metro overrides this with
+// index.ios.ts / index.android.ts on a real host; under vitest / tsc the resolution lands here.
+// Filename is the selector, no Platform.OS read.
+export * from './index.ios.js';

package/build/components/activity-indicator/shared.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from '../../jsx-runtime';
+import { type IActivityIndicatorPlatform, type IActivityIndicatorProps as IActivityIndicatorBaseProps } from '@symbiote-native/components';
+import type { IClassNameValue } from '@symbiote-native/engine';
+export type { IActivityIndicatorPlatform, IActivityIndicatorSize, } from '@symbiote-native/components';
+export type IActivityIndicatorProps = IActivityIndicatorBaseProps & {
+    class?: IClassNameValue;
+};
+export declare function createActivityIndicator(platform: IActivityIndicatorPlatform): (props: IActivityIndicatorProps) => JSX.Element;

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

@@ -0,0 +1,51 @@
+// ActivityIndicator, the Solid lifecycle half. The render (the 'small'/'large' -> native size enum
+// translation, the fixed size boxes, the centering wrapper, the color omission) lives in
+// @symbiote-native/components/view and is shared verbatim with React, Vue and Svelte. There is no
+// state machine: the spinner animates natively, so Solid supplies only prop resolution and the
+// descriptor bridge.
+//
+// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE;
+// destructuring reads them at setup and freezes the component at its mount-time values. Every read
+// below happens inside the descriptor accessor, which descriptorToSolid re-runs as a render effect
+// on the SAME host nodes.
+//
+// The per-platform bits (iOS's GRAY default and no extras; Android's theme/null default plus
+// styleAttr + indeterminate) arrive via `platform` from index.ios.ts / index.android.ts.
+import { renderActivityIndicator, resolveAccessibilityProps, } from '@symbiote-native/components';
+import { descriptorToSolid } from '../../descriptor-to-solid.js';
+// Read by the component itself; everything else (testID, nativeID, the accessibility surface,
+// onLayout, class) forwards onto the centering wrapper View, which is where RN spreads `...props`.
+const HANDLED_PROPS = [
+    'animating',
+    'color',
+    'hidesWhenStopped',
+    'size',
+    'style',
+];
+// The wrapper is a raw symbiote-view emitted by the render fn, not the View component, so it never
+// runs resolveAccessibilityProps itself — the fold happens here, exactly like React's hook does.
+// The two branches of that fold emit DIFFERENT key sets; descriptorToSolid runs the resulting bag
+// through withStableKeys, so a vanished key still reaches routeProp as a delete
+// (.claude/rules/solid-descriptor-bridge.md §1).
+function forwardProps(props) {
+    const forwarded = {
+        ...resolveAccessibilityProps(props),
+    };
+    for (const key of HANDLED_PROPS)
+        delete forwarded[key];
+    return forwarded;
+}
+export function createActivityIndicator(platform) {
+    return function ActivityIndicator(props) {
+        // `?? 'small'` / `?? true` rather than a `!== false` coercion: props are typed here, so this is
+        // the exact semantics of React's destructuring defaults (only `undefined` falls back).
+        return descriptorToSolid(() => renderActivityIndicator({
+            animating: props.animating ?? true,
+            hidesWhenStopped: props.hidesWhenStopped ?? true,
+            size: props.size ?? 'small',
+            color: props.color,
+            style: props.style,
+            passthrough: forwardProps(props),
+        }, platform));
+    };
+}

package/build/components/button.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from '../jsx-runtime';
+import { type IButtonProps as IButtonBaseProps } from '@symbiote-native/components';
+import type { IClassNameValue } from '@symbiote-native/engine';
+export type IButtonProps = IButtonBaseProps & {
+    class?: IClassNameValue;
+};
+export declare function Button(props: IButtonProps): JSX.Element;

package/build/components/button.jsx

@@ -0,0 +1,45 @@
+// Button — the minimal cross-platform button, rendered in its iOS shape per RN's Button.js: a
+// TouchableOpacity wrapping a Text. The base text style, the role constant and the color fold
+// (a caller `color` tints the label; `disabled` greys it, disabled winning) are shared in
+// @symbiote-native/components' render-button and are called, never re-derived; Solid only composes
+// its own TouchableOpacity + Text and forwards the native-only props.
+//
+// NO descriptorToSolid here, and none in React/Vue/Svelte either: the tree is two COMPONENTS, not
+// a Descriptor. There is no renderButton() to bridge — the shared half is the style/role math.
+//
+// NOTHING here destructures `props` at setup. Solid props are getters and a component body runs
+// ONCE; splitProps keeps both halves reactive and every read sits inside an accessor or a memo.
+import { createMemo, splitProps } from 'solid-js';
+import { BUTTON_ACCESSIBILITY_ROLE, resolveButtonTextStyle, } from '@symbiote-native/components';
+import { Text } from './text.jsx';
+import { TouchableOpacity } from './touchable/index.jsx';
+export function Button(props) {
+    // Only what Button CONSUMES or re-maps is split off. Everything else — onPress, disabled,
+    // testID, the TV-focus props, the accessibility/aria surface, `class` — stays in `rest` and
+    // rides the single bag below onto the TouchableOpacity. The TV-focus props are real Fabric
+    // props the pressable forwards without typing; a JSX spread carries them through unchecked
+    // (they are inert on a phone host).
+    const [local, rest] = splitProps(props, [
+        'title',
+        'color',
+        'touchSoundDisabled',
+    ]);
+    const textStyle = createMemo(() => resolveButtonTextStyle(local.color, rest.disabled));
+    // ONE bag, not a spread followed by explicit props on the tag: Solid's mergeProps (which the
+    // compiler uses for that shape) takes the first NON-undefined value scanning back to front, so
+    // an override that can be undefined silently loses (.claude/rules/solid-descriptor-bridge.md
+    // §6). A plain object is last-wins — the React semantics this is ported from, and what pins RN's
+    // fixed role / accessible / disabled-state OVER the caller's own. touchSoundDisabled is RE-MAPPED
+    // here, not forwarded: the pressable spells it android_disableSound. Return type left INFERRED;
+    // widening to Record<string, unknown> would stop typing `onPress` too.
+    const touchableProps = () => ({
+        ...rest,
+        android_disableSound: local.touchSoundDisabled,
+        accessibilityRole: BUTTON_ACCESSIBILITY_ROLE,
+        accessible: true,
+        accessibilityState: { disabled: rest.disabled },
+    });
+    return (<TouchableOpacity {...touchableProps()}>
+      <Text style={textStyle()}>{local.title}</Text>
+    </TouchableOpacity>);
+}

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

@@ -0,0 +1,10 @@
+import type { JSX } from '../../jsx-runtime';
+import { type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import { type IVirtualizedListHandle, type IVirtualizedListProps } from '../virtualized-list';
+export type IFlatListHandle = IVirtualizedListHandle;
+export type IFlatListProps<ItemT> = Omit<IVirtualizedListProps<ItemT>, 'data' | 'getItem' | 'getItemCount'> & {
+    data: readonly ItemT[];
+    numColumns?: number;
+    columnWrapperStyle?: IStyleProp<IViewStyle> | string;
+};
+export declare function FlatList<ItemT>(props: IFlatListProps<ItemT>): JSX.Element;

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

@@ -0,0 +1,118 @@
+// FlatList — the convenience surface over VirtualizedList. It takes a plain `data` array and
+// derives the getItem/getItemCount access protocol itself, so a caller never writes them, and
+// `numColumns` packs that many items into each row so the virtualized stream is ROWS rather than
+// items (RN's FlatList). Everything else — windowing, spacers, viewability, batching, sticky
+// headers, pull-to-refresh, the imperative scrolls — is inherited from VirtualizedList; the data
+// shaping and the row/viewability/separator transforms come from @symbiote-native/components and
+// are shared verbatim with React, Vue, Svelte and Angular. This file adds Solid's lifecycle and
+// nothing else.
+//
+// TWO SOLID FACTS SHAPE IT (.claude/rules/solid-descriptor-bridge.md):
+//
+// 1. `renderItem` takes an ACCESSOR, matching this adapter's VirtualizedList and diverging from
+//    React's snapshot signature. Solid has no reconciler under the render prop, so a value would
+//    freeze the row at its mount-time item.
+// 2. The columns inside a packed row ride an <Index>, not a <For>. That is the exact MIRROR of
+//    VirtualizedList's choice and for the same reason read the other way round: a cell key moves
+//    between rows as the window slides, so the CELLS are keyed by value; a column is a fixed
+//    positional slot inside its row — column 1 of row 3 is always column 1 of row 3 — so keying it
+//    by value would destroy and rebuild the whole column subtree every time the data array is
+//    replaced with fresh item objects. <Index> keys by position and hands the item down as an
+//    accessor, so only the leaf that reads it re-runs.
+//
+// The imperative handle needs no delegation layer here, unlike Vue's and Svelte's. `ref` is an
+// ordinary prop in the passthrough tail, so it lands on the inner VirtualizedList directly and the
+// caller receives that list's own handle — FlatList's handle IS VirtualizedList's (RN says the
+// same).
+import { Index, Show, createMemo, splitProps, untrack, } from 'solid-js';
+import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, rowKeyExtractor, } from '@symbiote-native/components';
+import { dlog, resolveClassName, } from '@symbiote-native/engine';
+import { VirtualizedList, } from '../virtualized-list';
+// What FlatList itself consumes or re-shapes. Everything NOT listed here is passthrough and rides
+// down onto the inner list untouched — `ref` among it, which is why no delegate handle is needed.
+const OWN_PROPS = [
+    'data',
+    'numColumns',
+    'columnWrapperStyle',
+    'renderItem',
+    'keyExtractor',
+    'ItemSeparatorComponent',
+    'onViewableItemsChanged',
+    'viewabilityConfigCallbackPairs',
+];
+const ROW_STYLE = { flexDirection: 'row' };
+// Equal weight per column, so `numColumns` columns split the row evenly (RN's own multi-column
+// FlatList). A cell that sized itself would leave ragged columns.
+const COLUMN_STYLE = { flex: 1 };
+export function FlatList(props) {
+    const [, passthrough] = splitProps(props, OWN_PROPS);
+    const columnCount = () => props.numColumns ?? SINGLE_COLUMN;
+    // RN treats anything at or below one column as an ordinary single-column list rather than an
+    // error, and so does adapters/react.
+    const isMultiColumn = () => columnCount() > SINGLE_COLUMN;
+    const rows = createMemo(() => {
+        const columns = columnCount();
+        // Logged from inside the memo, not from the body: a Solid body runs ONCE, so a line emitted
+        // there would report the mount-time shape forever and be actively misleading on a data change.
+        dlog(`Solid FlatList over ${props.data.length} items, ${columns} column(s)`);
+        return columns > SINGLE_COLUMN ? chunkIntoRows(props.data, columns) : [];
+    });
+    // A bare string is a registered class name and has to be resolved here — the row view's style
+    // prop takes objects/arrays, so an unresolved string would silently paint nothing.
+    const rowStyle = createMemo(() => [
+        ROW_STYLE,
+        typeof props.columnWrapperStyle === 'string'
+            ? resolveClassName(props.columnWrapperStyle)
+            : props.columnWrapperStyle,
+    ]);
+    function renderRow(info) {
+        return (<symbiote-view style={rowStyle()}>
+        <Index each={info().item.items}>
+          {(item, column) => {
+                // Called ONCE and untracked, the shape VirtualizedList's own cell build uses: a
+                // tracked call would put every signal renderItem reads into this column's insert
+                // effect and rebuild the subtree instead of updating its leaf.
+                const content = untrack(() => props.renderItem(() => ({
+                    item: item(),
+                    index: info().item.startIndex + column,
+                    // The row IS the virtualized cell, so every column in it shares the row's
+                    // separators handle — the divider sits between rows, not between columns.
+                    separators: info().separators,
+                })));
+                return (<symbiote-view style={COLUMN_STYLE}>{content}</symbiote-view>);
+            }}
+        </Index>
+      </symbiote-view>);
+    }
+    // The divider between rows shows real items (last of the row above, first of the row below), so
+    // the caller's separator, typed on ItemT, never sees the IRow wrapper.
+    const rowSeparatorComponent = createMemo(() => {
+        const Separator = props.ItemSeparatorComponent;
+        if (Separator === undefined)
+            return undefined;
+        return (rowProps) => (<Separator {...rowProps} leadingItem={lastItemOfRow(rowProps.leadingItem)} trailingItem={firstItemOfRow(rowProps.trailingItem)}/>);
+    });
+    // Viewability over rows expands back to per-item tokens, so the caller sees item-level
+    // visibility rather than row-level (shared expandRowViewability).
+    const rowViewability = createMemo(() => {
+        const onChanged = props.onViewableItemsChanged;
+        if (onChanged === undefined)
+            return undefined;
+        return (rowInfo) => onChanged(expandRowViewability(rowInfo, props.keyExtractor));
+    });
+    const rowViewabilityPairs = createMemo(() => props.viewabilityConfigCallbackPairs?.map(pair => ({
+        viewabilityConfig: pair.viewabilityConfig,
+        onViewableItemsChanged: (rowInfo) => {
+            pair.onViewableItemsChanged(expandRowViewability(rowInfo, props.keyExtractor));
+        },
+    })));
+    // The two paths instantiate VirtualizedList over DIFFERENT item types — ItemT vs IRow<ItemT> —
+    // so they are two elements, not one with switching props: a single instantiation would have to
+    // union the two and narrow ItemT | IRow<ItemT> back apart at runtime, which nothing can do
+    // soundly for an arbitrary ItemT. <Show> memoizes on the flip alone, so a numColumns change
+    // rebuilds (RN documents changing it live as unsupported — "change the key prop" — which is the
+    // same fresh start) while every other prop change re-props the live list.
+    return (<Show when={isMultiColumn()} fallback={<VirtualizedList {...passthrough} data={props.data} getItem={(_source, index) => props.data[index]} getItemCount={() => props.data.length} renderItem={props.renderItem} keyExtractor={props.keyExtractor} ItemSeparatorComponent={props.ItemSeparatorComponent} onViewableItemsChanged={props.onViewableItemsChanged} viewabilityConfigCallbackPairs={props.viewabilityConfigCallbackPairs}/>}>
+      <VirtualizedList {...passthrough} data={rows()} getItem={(_source, index) => rows()[index]} getItemCount={() => rows().length} renderItem={renderRow} keyExtractor={rowKeyExtractor} ItemSeparatorComponent={rowSeparatorComponent()} onViewableItemsChanged={rowViewability()} viewabilityConfigCallbackPairs={rowViewabilityPairs()}/>
+    </Show>);
+}

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

@@ -0,0 +1,10 @@
+import type { JSX } from '../jsx-runtime';
+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;
+    children?: JSX.Element;
+}
+export declare function ImageBackground(props: IImageBackgroundProps): JSX.Element;

package/build/components/image-background.jsx

@@ -0,0 +1,74 @@
+// ImageBackground — the Solid lifecycle half. The composition (the absolute-fill Image behind the
+// children, the wrapper-dimension proxy onto that Image, the imageStyle-last merge) lives
+// framework-agnostic in @symbiote-native/components' renderImageBackground and is shared verbatim
+// with React, Vue and Svelte. Solid supplies only the reactivity, the class-name resolution and
+// the child order.
+//
+// SPLIT DOWN THE MIDDLE, and the seam is the children rule. The wrapper hosts a live Solid subtree
+// (the overlay content), which only the reconciler can reduce, so it stays a literal
+// `symbiote-view` carrying the shared fn's own props — the same shape View and SafeAreaView use,
+// and the same one Svelte's ImageBackground lands on. The inner image is a leaf built entirely
+// from VALUES, so it goes through descriptorToSolid, which builds it once and re-props it in place
+// (replacing it would restart the download and drop the decoded bitmap).
+//
+// FLAT FILE, no folder: there are no platform or shared variants to group
+// (`symbiote-file-layout` — only genuine groups get a folder).
+//
+// NOTHING here destructures `props` at setup. Solid props are getters and a component body runs
+// ONCE; splitProps keeps every bucket reactive, and each read happens inside an accessor.
+import { createMemo, splitProps } from 'solid-js';
+import { createDescriptorShapeGuard, renderImageBackground, resolveAccessibilityProps, } from '@symbiote-native/components';
+import { resolveClassName, } from '@symbiote-native/engine';
+import { descriptorToSolid } from '../descriptor-to-solid.js';
+// renderImage's typed view fields — the props it CONSUMES rather than forwards. Split off so they
+// never also ride through `passthrough`: the W3C aliases in particular must not reach Fabric raw,
+// since native sees only the resolved `source` array they fold into. `style` is absent on purpose
+// — the inner image's style is computed by renderImageBackground, never taken from the caller.
+const IMAGE_VIEW_PROPS = [
+    'source',
+    'defaultSource',
+    'loadingIndicatorSource',
+    'resizeMode',
+    'tintColor',
+    'src',
+    'srcSet',
+    'alt',
+    'width',
+    'height',
+    'crossOrigin',
+    'referrerPolicy',
+];
+const shape = createDescriptorShapeGuard('ImageBackground');
+export function ImageBackground(props) {
+    const [local, view, rest] = splitProps(props, ['children', 'style', 'imageStyle', 'class'], IMAGE_VIEW_PROPS);
+    // One memo, so the wrapper bag and the inner image derive from a SINGLE call per change.
+    const wrapper = createMemo(() => renderImageBackground({
+        style: local.style,
+        // A bare string is a registered class name and has to become a style object here, before
+        // it reaches the shared fn — which merges it, and knows nothing about the registry.
+        imageStyle: typeof local.imageStyle === 'string'
+            ? resolveClassName(local.imageStyle)
+            : local.imageStyle,
+        image: {
+            ...view,
+            // The wrapper is a raw host, not the View component, so the aria/role fold is this
+            // component's own job; the resolved surface rides the IMAGE, matching every other adapter.
+            passthrough: { ...resolveAccessibilityProps(rest) },
+        },
+    }));
+    const backgroundImage = descriptorToSolid(() => shape.asElement(wrapper().children[0]));
+    // ONE object literal rather than a spread-then-override on the tag: `class` is legitimately
+    // undefined, and Solid's mergeProps (which the compiler uses for a spread followed by an
+    // explicit prop) would discard that undefined instead of applying it
+    // (.claude/rules/solid-descriptor-bridge.md §6). No withStableKeys — renderImageBackground's
+    // wrapper props are `{ style }` unconditionally, so no key can vanish between runs.
+    const wrapperBag = () => ({
+        ...wrapper().props,
+        class: local.class,
+    });
+    // The user children come AFTER the image in child order, which is what makes them paint on top.
+    return (<symbiote-view {...wrapperBag()}>
+      {backgroundImage}
+      {local.children}
+    </symbiote-view>);
+}

package/build/components/image.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from '../jsx-runtime';
+import { type IImageProps as IImageBaseProps, type IImageStatics } from '@symbiote-native/components';
+import type { IClassNameValue } from '@symbiote-native/engine';
+export type { IImageStatics } from '@symbiote-native/components';
+export type IImageProps = IImageBaseProps & {
+    class?: IClassNameValue;
+};
+export type IImageWithStatics = ((props: IImageProps) => JSX.Element) & IImageStatics;
+export declare const Image: IImageWithStatics;

package/build/components/image.js

@@ -0,0 +1,75 @@
+// Image — the Solid lifecycle half. Everything that turns props into a native prop bag (the
+// source / src / srcSet resolution, the width+height fold into style, resizeMode and tintColor
+// read back off the style, alt -> accessibilityLabel, the array shape native expects) lives
+// framework-agnostic in @symbiote-native/components' renderImage, shared verbatim with React, Vue
+// and Svelte. Solid supplies only the reactivity and the Descriptor bridge.
+//
+// PLAIN .ts, NOT .tsx, unlike ./view.tsx and ./text.tsx — and the difference is the children rule,
+// not a style choice. View and Text take a live subtree of the user's components, which only the
+// framework's own reconciler can reduce, so they emit real JSX. An image is a leaf built entirely
+// from VALUES, so it goes through renderImage + descriptorToSolid exactly like Switch does
+// (.claude/rules/component-render-fn-boundary.md).
+//
+// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE;
+// splitProps is the idiomatic split that keeps both halves reactive, and every read below happens
+// inside the descriptor accessor descriptorToSolid re-runs.
+//
+// ASSET RESOLUTION IS LAZY BY CONSTRUCTION, and that is what lets an app drop the hand-rolled
+// resolveImageSource() call it needed while this component did not exist. renderImage calls
+// resolveImageSource at RENDER time, and the resolver behind it is installed by bootstrapHost,
+// which createApp().mount() runs before AppRegistry ever renders a root. So a `require('./x.png')`
+// asset id handed to `source` is resolved by RN's own resolveAssetSource on the way to Fabric,
+// with no ordering hazard: a module-scope resolve would run one step too early, an accessor-time
+// one cannot.
+import { splitProps } from 'solid-js';
+import { imageStatics, renderImage, resolveAccessibilityProps, } from '@symbiote-native/components';
+import { descriptorToSolid } from '../descriptor-to-solid.js';
+// renderImage's typed view fields — the props it CONSUMES rather than forwards. Split off here so
+// they never also ride through `passthrough`: the W3C aliases in particular must not reach Fabric
+// raw, since native sees only the resolved `source` array they fold into. Everything else (the
+// load events, blurRadius, capInsets, resizeMethod, fadeDuration, testID, `class`, a caller's own
+// `ref`, the accessibility props) stays in `rest` and lands on the host image untouched.
+const VIEW_PROPS = [
+    'source',
+    'defaultSource',
+    'loadingIndicatorSource',
+    'style',
+    'resizeMode',
+    'tintColor',
+    'src',
+    'srcSet',
+    'alt',
+    'width',
+    'height',
+    'crossOrigin',
+    'referrerPolicy',
+];
+function ImageComponent(props) {
+    const [view, rest] = splitProps(props, VIEW_PROPS);
+    // The node is created once and kept by identity — descriptorToSolid wires every prop through a
+    // render effect on that same node, so a later source/style/alt change re-commits the existing
+    // image rather than replacing it (which would restart the download and drop the decoded bitmap).
+    return descriptorToSolid(() => renderImage({
+        source: view.source,
+        defaultSource: view.defaultSource,
+        loadingIndicatorSource: view.loadingIndicatorSource,
+        style: view.style,
+        resizeMode: view.resizeMode,
+        tintColor: view.tintColor,
+        src: view.src,
+        srcSet: view.srcSet,
+        alt: view.alt,
+        width: view.width,
+        height: view.height,
+        crossOrigin: view.crossOrigin,
+        referrerPolicy: view.referrerPolicy,
+        // Image owns its host element rather than rendering through a symbiote View, so folding
+        // aria/role into the canonical accessibility* props is its own job, like Switch's.
+        // renderImage's own `alt` fold then defers to an explicit accessibilityLabel found here.
+        passthrough: { ...resolveAccessibilityProps(rest) },
+    }));
+}
+// Statics attached like RN's own `Image.getSize` / `prefetch` / `queryCache` / `abortPrefetch` /
+// `getSizeWithHeaders` / `resolveAssetSource`, by identity off the same @symbiote-native/engine
+// module React, Vue and Svelte attach — never a Solid-side reimplementation.
+export const Image = Object.assign(ImageComponent, imageStatics);

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

@@ -0,0 +1,11 @@
+import type { JSX } from '../jsx-runtime';
+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;
+    children?: JSX.Element;
+}
+export declare function InputAccessoryView(props: IInputAccessoryViewProps): JSX.Element;

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

@@ -0,0 +1,39 @@
+// InputAccessoryView — the Solid lifecycle half (iOS). The host-node assembly (nativeID /
+// backgroundColor / style / passthrough forwarding onto `symbiote-input-accessory-view`) lives
+// framework-agnostic in @symbiote-native/components' renderInputAccessoryView and is shared
+// verbatim with React, Vue and Svelte; Solid supplies only the reactivity and the children.
+//
+// REAL JSX, NOT descriptorToSolid — the same rule View and SafeAreaView follow. The render fn
+// returns a host with ZERO structural children by contract; the toolbar content is a live Solid
+// subtree only the reconciler can reduce, so the tag stays literal and the shared fn contributes
+// its PROPS. The literal tag is safe because renderInputAccessoryView's `type` is a constant.
+//
+// NOTHING here destructures `props` at setup. Solid props are getters and a component body runs
+// ONCE; splitProps keeps both halves reactive, and every read happens inside the bag accessor
+// that `spread` re-runs as a render effect on the SAME host node.
+import { splitProps } from 'solid-js';
+import { renderInputAccessoryView, resolveAccessibilityProps, } from '@symbiote-native/components';
+import { withStableKeys } from '../utils/stable-keys.js';
+export function InputAccessoryView(props) {
+    const [local, rest] = splitProps(props, [
+        'children',
+        'nativeID',
+        'backgroundColor',
+        'style',
+    ]);
+    // withStableKeys is load-bearing twice over: renderInputAccessoryView emits `nativeID` and
+    // `backgroundColor` CONDITIONALLY, and resolveAccessibilityProps has two branches with
+    // different key sets. Solid's `spread` has no removal pass, so a key that vanishes between
+    // runs would keep its last value on the native view forever (see utils/stable-keys.ts).
+    const bag = withStableKeys(() => renderInputAccessoryView({
+        nativeID: local.nativeID,
+        backgroundColor: local.backgroundColor,
+        style: local.style,
+        // This component owns its host element rather than rendering through a View, so folding
+        // aria/role into the canonical accessibility* props is its own job, like Image's.
+        passthrough: { ...resolveAccessibilityProps(rest) },
+    }).props);
+    return (<symbiote-input-accessory-view {...bag()}>
+      {local.children}
+    </symbiote-input-accessory-view>);
+}

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

@@ -0,0 +1,15 @@
+import type { JSX } from '../jsx-runtime';
+import { type IAccessibilityProps, type IAriaProps, type IKeyboardAvoidingBehavior } from '@symbiote-native/components';
+import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
+export 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;
+    onLayout?: (event: ISymbioteEvent) => void;
+    children?: JSX.Element;
+}
+export declare function KeyboardAvoidingView(props: IKeyboardAvoidingViewProps): JSX.Element;