@symbiote-native/solid 0.0.1 → 0.1.0

package/build/components/virtualized-section-list/index.d.ts

@@ -0,0 +1,62 @@
+import { type Accessor, type Ref } from 'solid-js';
+import type { JSX } from '../../jsx-runtime';
+import { type ISection, type IAccessibilityProps, type IAriaProps, type ISeparatorProps, type ISeparators, type IVirtualizedSectionListHandle } from '@symbiote-native/components';
+import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
+export type { ISection, IVirtualizedSectionListHandle };
+export interface ISectionHeaderInfo<ItemT> {
+    section: ISection<ItemT>;
+}
+export interface ISectionCellInfo<ItemT> {
+    item: ItemT;
+    index: number;
+    section: ISection<ItemT>;
+    separators: ISeparators;
+}
+export interface IVirtualizedSectionListProps<ItemT> extends IAccessibilityProps, IAriaProps {
+    sections: ReadonlyArray<ISection<ItemT>>;
+    renderItem: (info: Accessor<ISectionCellInfo<ItemT>>) => JSX.Element;
+    renderSectionHeader?: (info: Accessor<ISectionHeaderInfo<ItemT>>) => JSX.Element;
+    renderSectionFooter?: (info: Accessor<ISectionHeaderInfo<ItemT>>) => JSX.Element;
+    stickySectionHeadersEnabled?: boolean;
+    SectionSeparatorComponent?: () => JSX.Element;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    ItemSeparatorComponent?: (props: ISeparatorProps<ItemT>) => JSX.Element;
+    ref?: Ref<IVirtualizedSectionListHandle>;
+    ListHeaderComponent?: JSX.Element;
+    ListFooterComponent?: JSX.Element;
+    ListEmptyComponent?: JSX.Element;
+    extraData?: unknown;
+    onEndReached?: (info: {
+        distanceFromEnd: number;
+    }) => void;
+    onEndReachedThreshold?: number;
+    onStartReached?: (info: {
+        distanceFromStart: number;
+    }) => void;
+    onStartReachedThreshold?: number;
+    onRefresh?: () => void;
+    refreshing?: boolean | null;
+    progressViewOffset?: number;
+    initialNumToRender?: number;
+    initialScrollIndex?: number;
+    maxToRenderPerBatch?: number;
+    updateCellsBatchingPeriod?: number;
+    windowSize?: number;
+    inverted?: boolean;
+    maintainVisibleContentPosition?: {
+        minIndexForVisible: number;
+        autoscrollToTopThreshold?: number;
+    };
+    onScroll?: (event: ISymbioteEvent) => void;
+    onScrollBeginDrag?: (event: ISymbioteEvent) => void;
+    onScrollEndDrag?: (event: ISymbioteEvent) => void;
+    onMomentumScrollBegin?: (event: ISymbioteEvent) => void;
+    onMomentumScrollEnd?: (event: ISymbioteEvent) => void;
+    scrollEventThrottle?: number;
+    keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
+    keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    style?: IStyleProp<IViewStyle>;
+    contentContainerStyle?: IStyleProp<IViewStyle> | string;
+    class?: IClassNameValue;
+}
+export declare function VirtualizedSectionList<ItemT>(props: IVirtualizedSectionListProps<ItemT>): JSX.Element;

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

@@ -0,0 +1,145 @@
+// VirtualizedSectionList: sections flattened into one virtualized stream. Each section contributes
+// a header row, its item rows, then a footer row; the flattened tagged sequence feeds
+// VirtualizedList as a single list, so headers, items and footers are windowed by the same
+// machinery. The flattening, entry keying, separator-item unwrap and scrollToLocation mapping are
+// shared verbatim from @symbiote-native/components; this file wires only Solid's lifecycle.
+import { createMemo, splitProps } from 'solid-js';
+import { flattenSections, resolveStickySectionHeaders, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
+import { Platform, dlog, } from '@symbiote-native/engine';
+import { VirtualizedList, } from '../virtualized-list';
+// Consumed by this layer; everything LEFT OVER is VirtualizedList's own surface (the scroll host,
+// the list chrome, the windowing knobs, the accessibility props) and rides down untouched, exactly
+// as React's VirtualizedSectionList spreads its `...rest` onto the inner list.
+const HANDLED_PROPS = [
+    'sections',
+    'renderItem',
+    'renderSectionHeader',
+    'renderSectionFooter',
+    'SectionSeparatorComponent',
+    'ItemSeparatorComponent',
+    'keyExtractor',
+    'stickySectionHeadersEnabled',
+    'ref',
+];
+export function VirtualizedSectionList(props) {
+    const [, listRest] = splitProps(props, HANDLED_PROPS);
+    const flattened = createMemo(() => flattenSections(props.sections, props.SectionSeparatorComponent !== undefined));
+    const entries = () => flattened().entries;
+    // RN sticks section headers by default only on iOS; Android does not unless asked. The
+    // headerIndices are the flat positions of every section header, which the inner list wraps.
+    const stickyHeaderIndices = () => resolveStickySectionHeaders(props.stickySectionHeadersEnabled, flattened().headerIndices, Platform.OS);
+    // The entry under a row keeps its KIND for as long as the row lives — sectionEntryKey namespaces
+    // header/footer/separator keys away from item keys, so <For> never hands a row an entry of a
+    // different kind. `previous` covers only the tick where new sections have landed but the row has
+    // not been disposed yet, during which the row's index can point at a neighbouring entry.
+    function sectionInfo(info, initial) {
+        return createMemo((previous) => {
+            const entry = info().item;
+            return entry.kind === 'section-separator'
+                ? previous
+                : { section: entry.section };
+        }, { section: initial });
+    }
+    function cellInfo(info, initial) {
+        return createMemo((previous) => {
+            const entry = info().item;
+            if (entry.kind !== 'item')
+                return previous;
+            return {
+                item: entry.item,
+                index: entry.itemIndex,
+                section: entry.section,
+                separators: info().separators,
+            };
+        }, initial);
+    }
+    // The inner list, held by identity in a plain variable: everything this handle adds over
+    // VirtualizedList's own is the (section, item) -> flat index resolution, and the rest routes
+    // straight through — the shared IScrollRoutingHandle tail both list handles extend.
+    let inner;
+    const handle = {
+        scrollToLocation: (params) => {
+            const flatIndex = scrollLocationToFlatIndex(flattened().headerIndices, params.sectionIndex, params.itemIndex);
+            if (flatIndex === undefined) {
+                dlog(`VirtualizedSectionList scrollToLocation: section ${params.sectionIndex} out of range`);
+                return;
+            }
+            dlog(`VirtualizedSectionList scrollToLocation section=${params.sectionIndex} ` +
+                `item=${params.itemIndex} -> flat ${flatIndex}`);
+            inner?.scrollToIndex({
+                index: flatIndex,
+                viewOffset: params.viewOffset,
+                viewPosition: params.viewPosition,
+                animated: params.animated,
+            });
+        },
+        flashScrollIndicators: () => {
+            inner?.flashScrollIndicators();
+        },
+        getNativeScrollRef: () => inner?.getNativeScrollRef() ?? null,
+        getScrollableNode: () => inner?.getScrollableNode() ?? null,
+        getScrollResponder: () => inner?.getScrollResponder() ?? null,
+        getScrollNode: () => inner?.getScrollNode() ?? null,
+        recordInteraction: () => {
+            inner?.recordInteraction();
+        },
+    };
+    if (typeof props.ref === 'function')
+        props.ref(handle);
+    // Section chrome keys off its section (and never reaches the user's extractor, which is typed on
+    // ItemT); an item keys off the user's extractor with its index INSIDE its section.
+    function entryKeyExtractor(entry, index) {
+        return sectionEntryKey(entry, index, props.keyExtractor);
+    }
+    function entrySeparatorProps(entryProps) {
+        return {
+            ...entryProps,
+            leadingItem: unwrapEntryItem(entryProps.leadingItem),
+            trailingItem: unwrapEntryItem(entryProps.trailingItem),
+        };
+    }
+    // The user's separator is typed on ItemT while the inner stream carries the entry wrapper, so
+    // each side is unwrapped back to its item — undefined for a gap next to section chrome, which has
+    // no item on that side.
+    const entrySeparatorComponent = createMemo(() => {
+        const ItemSeparator = props.ItemSeparatorComponent;
+        if (ItemSeparator === undefined)
+            return undefined;
+        // ONE bag, not a spread plus two overriding attributes: Solid's mergeProps resolves a key by
+        // scanning its sources back to front and taking the first NON-undefined value, so an override
+        // that unwraps to `undefined` (every gap next to section chrome) falls back to the raw entry
+        // instead of clearing it, and the user's `leadingItem` reads as the wrapper object. Building the
+        // whole bag in one function keeps a single source — and, being a spread of a CALL, it compiles
+        // to mergeProps(() => …) so the separator's props stay live.
+        return (entryProps) => (<ItemSeparator {...entrySeparatorProps(entryProps)}/>);
+    });
+    // Called ONCE per cell and already untracked by VirtualizedList's buildCell.
+    function renderEntry(info) {
+        const entry = info().item;
+        if (entry.kind === 'header') {
+            const header = props.renderSectionHeader;
+            return header === undefined
+                ? undefined
+                : header(sectionInfo(info, entry.section));
+        }
+        if (entry.kind === 'footer') {
+            const footer = props.renderSectionFooter;
+            return footer === undefined
+                ? undefined
+                : footer(sectionInfo(info, entry.section));
+        }
+        if (entry.kind === 'section-separator') {
+            const SectionSeparator = props.SectionSeparatorComponent;
+            return SectionSeparator === undefined ? undefined : <SectionSeparator />;
+        }
+        return props.renderItem(cellInfo(info, {
+            item: entry.item,
+            index: entry.itemIndex,
+            section: entry.section,
+            separators: info().separators,
+        }));
+    }
+    return (<VirtualizedList {...listRest} data={entries()} getItem={(_source, index) => entries()[index]} getItemCount={() => entries().length} renderItem={renderEntry} stickyHeaderIndices={stickyHeaderIndices()} keyExtractor={entryKeyExtractor} ItemSeparatorComponent={entrySeparatorComponent()} ref={list => {
+            inner = list;
+        }}/>);
+}

package/build/components.d.ts

@@ -0,0 +1,43 @@
+export { View } from './components/view';
+export type { IViewProps } from './components/view';
+export { Text } from './components/text';
+export type { ITextProps } from './components/text';
+export { SafeAreaView } from './components/safe-area-view';
+export type { ISafeAreaViewProps } from './components/safe-area-view';
+export { Image } from './components/image';
+export type { IImageProps } from './components/image';
+export { Pressable } from './components/pressable';
+export type { IPressableProps } from './components/pressable';
+export { ActivityIndicator } from './components/activity-indicator';
+export type { IActivityIndicatorProps } from './components/activity-indicator';
+export type { IImageStatics, IPressState, IPressableAndroidRippleConfig, } from '@symbiote-native/components';
+export { Switch } from './components/switch';
+export type { ISwitchProps, ISwitchTrackColor } from './components/switch';
+export { TextInput } from './components/text-input';
+export type { ITextInputProps, ITextInputHandle, ITextInputSelection, } from './components/text-input';
+export { Modal } from './components/modal';
+export type { IModalProps, IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from './components/modal';
+export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
+export type { IKeyboardAvoidingViewProps, IKeyboardAvoidingBehavior, } from './components/keyboard-avoiding-view';
+export { RefreshControl } from './components/refresh-control';
+export type { IRefreshControlProps } from './components/refresh-control';
+export { ScrollView } from './components/scroll-view';
+export type { IScrollViewProps, IScrollViewHandle, } from './components/scroll-view';
+export { VirtualizedList } from './components/virtualized-list';
+export type { IVirtualizedListProps, IVirtualizedListHandle, IVirtualizedListCellInfo, IVirtualizedListRenderItem, ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, } from './components/virtualized-list';
+export { FlatList } from './components/flat-list';
+export type { IFlatListProps, IFlatListHandle } from './components/flat-list';
+export { VirtualizedSectionList } from './components/virtualized-section-list';
+export type { IVirtualizedSectionListProps, IVirtualizedSectionListHandle, ISectionHeaderInfo, ISectionCellInfo, ISection, } from './components/virtualized-section-list';
+export { SectionList } from './components/section-list';
+export type { ISectionListProps, ISectionListHandle, } from './components/section-list';
+export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable';
+export type { ITouchableOpacityProps, ITouchableHighlightProps, ITouchableWithoutFeedbackProps, } from './components/touchable';
+export { TouchableNativeFeedback } from './components/touchable-native-feedback';
+export type { ITouchableNativeFeedbackProps, INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from './components/touchable-native-feedback';
+export { Button } from './components/button';
+export type { IButtonProps } from './components/button';
+export { ImageBackground } from './components/image-background';
+export type { IImageBackgroundProps } from './components/image-background';
+export { InputAccessoryView } from './components/input-accessory-view';
+export type { IInputAccessoryViewProps } from './components/input-accessory-view';

package/build/components.js

@@ -0,0 +1,54 @@
+// The component re-export barrel, flat at the package root like every other adapter's. Grouping
+// under components/ is internal; this file plus src/index.ts is the whole public surface.
+export { View } from './components/view.jsx';
+export { Text } from './components/text.jsx';
+export { SafeAreaView } from './components/safe-area-view.jsx';
+export { Image } from './components/image.js';
+export { Pressable } from './components/pressable.jsx';
+export { ActivityIndicator } from './components/activity-indicator';
+export { Switch } from './components/switch';
+export { TextInput } from './components/text-input.js';
+export { Modal } from './components/modal.jsx';
+export { KeyboardAvoidingView } from './components/keyboard-avoiding-view.jsx';
+export { RefreshControl } from './components/refresh-control.jsx';
+// ScrollViewStickyHeader is NOT exported, matching react-native itself: it lives at
+// Libraries/Components/ScrollView/ScrollViewStickyHeader.js and is absent from RN's public
+// index.js, so it is ScrollView's internal, not part of the public surface. React's and Vue's
+// barrels agree. Svelte's and Angular's do export it, but as a WORKAROUND rather than an API
+// decision — Svelte documents `stickyHeaderIndices` as a KNOWN GAP, so its apps have to compose the
+// wrapper by hand. This adapter auto-wraps flagged children the way React and Vue do, so the escape
+// hatch has nothing to escape. `IStickyHeaderComponentType` stays internal for the same reason even
+// though `IScrollViewProps.StickyHeaderComponent` is typed by it — React has the identical shape.
+export { ScrollView } from './components/scroll-view';
+// The shared list detail types (ISeparators, IViewToken, IViewabilityConfig…) come through the
+// component module rather than straight from '@symbiote-native/components', matching React's own
+// virtualized-list barrel: a consumer typing a renderItem callback or a viewability config reaches
+// for the same import as the component. `IVirtualizedListComponent` stays internal — it is the
+// platform factory's return type, not API, exactly as ScrollView keeps `IScrollViewHostPlatform`
+// out of this barrel.
+export { VirtualizedList } from './components/virtualized-list';
+// FlatList carries no platform split of its own — the iOS/Android divergence is
+// VirtualizedList's refreshControlMode, inherited by importing that folder, so Metro picks the
+// right variant with nothing here to switch on. IFlatListProps is an Omit over
+// IVirtualizedListProps rather than a fresh declaration, so the two cannot drift apart.
+export { FlatList } from './components/flat-list/index.jsx';
+// The section family. ISection rides the virtualized-section-list module here, where the type is
+// declared; React re-exports it from its section-list module instead. Either way the barrel's NAME
+// set is what parity is measured on — which module a type is re-exported through is internal.
+export { VirtualizedSectionList } from './components/virtualized-section-list/index.jsx';
+// SectionList declares no input of its own — it is the preset over VirtualizedSectionList, the same
+// relation React's 25-line section-list has to its 262-line virtualized twin.
+export { SectionList } from './components/section-list/index.jsx';
+// The Touchable family, all composed over Pressable exactly as React's and Vue's are — so the
+// press machine, the aria fold and the class+style merge each happen once, in Pressable/View.
+export { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from './components/touchable/index.jsx';
+// Android's native ripple/theme-attr feedback. The background factories are the SHARED functions
+// hung on the component value, not adapter wrappers, so every adapter offers the identical set.
+export { TouchableNativeFeedback } from './components/touchable-native-feedback/index.jsx';
+// IButtonProps is agnostic and lives in @symbiote-native/components; this re-exports it rather
+// than redeclaring it, matching react/vue/svelte/angular (CLAUDE.md prop-type split).
+export { Button } from './components/button.jsx';
+// Both take `children`, a framework value, so their public prop types are declared per-adapter
+// over the shared agnostic field base — never imported from another adapter.
+export { ImageBackground } from './components/image-background.jsx';
+export { InputAccessoryView } from './components/input-accessory-view.jsx';

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

@@ -0,0 +1,11 @@
+import { SymbioteSurface, type ISymbioteNode } from '@symbiote-native/engine';
+import type { JSX } from '../jsx-runtime';
+/** Where portaled content lands. React's `IPortalContainer` twin, same two members. */
+export type IPortalTarget = ISymbioteNode | SymbioteSurface;
+export interface IPortalProps {
+    /** An already-mounted host node in this surface — a `ref` off a rendered component — or the
+     *  surface itself. Reactive: pointing it at a different target moves the content. */
+    mount: IPortalTarget;
+    children?: JSX.Element;
+}
+export declare function Portal(props: IPortalProps): JSX.Element;

package/build/create-portal/index.jsx

@@ -0,0 +1,88 @@
+// Portal — the Solid adapter's same-surface portal, the twin of React's createPortal
+// (adapters/react/src/create-portal/index.ts) and Angular's PortalDirective/PortalOutletDirective
+// pair. Those two are the only other adapters that ship this capability at all; Vue and Svelte
+// have none, in any spelling.
+//
+// WHY IT IS SPELLED `<Portal mount={…}>` AND NOT `createPortal(children, target)`. Three reasons,
+// in order of weight. (1) Solid evaluates JSX eagerly at the position it is written, so a
+// `createPortal(<Toast/>, target)` call would BUILD the toast's host nodes before anything could
+// decide whether to portal them — a component's `children` prop is the only lazily-evaluated
+// shape in the language (verified below). (2) It is the exact signature solid-js/web ships for
+// the same job (`<Portal mount={node}>`), so a Solid author already knows it. (3) The per-adapter
+// spelling is already the rule here, not the exception: Angular's answer to the same capability is
+// a structural directive. <adapter_src_follows_framework_idioms>.
+//
+// WHY solid-js/web's OWN Portal CANNOT BE RE-EXPORTED. It is built on real DOM — it allocates a
+// container with `document.createElement` (or a ShadowRoot) and appends it to `document.body` by
+// default. A React Native program has no `document`. Everything ELSE in Solid's control flow (For,
+// Show, Index, ErrorBoundary, Suspense) is pure reactivity and IS re-exported by this package's
+// barrel; Portal and Dynamic were the two exceptions, and this file closes the first of them.
+//
+// IMPORT IT EXPLICITLY — a bare `<Portal>` with no import in scope does NOT reach this file.
+// `Portal` is one of babel-plugin-jsx-dom-expressions' ten `builtIns` (For, Show, Switch, Match,
+// Suspense, SuspenseList, Portal, Index, Dynamic, ErrorBoundary): for an UNDECLARED identifier the
+// compiler injects `import { Portal } from '<moduleName>'`, which here is ../renderer, which does
+// not export it. Measured against the installed babel-preset-solid 1.9.12 — with `import { Portal }
+// from '@symbiote-native/solid'` present, the compiler emits `createComponent(Portal, …)` against
+// that local binding and injects nothing. Same rule already governs For and Show in this adapter,
+// so this is one convention, not a new one.
+//
+// SCOPE — same-surface only, matching React's boundary exactly. `mount` must be an
+// already-mounted host node WITHIN THE SAME SURFACE as the Portal's call site (typically a `ref`
+// to a persistent overlay-host View near the app root), or that surface itself. It is not a way to
+// reach a second, independently-mount()-ed surface: the renderer commits ONE surface per process
+// (renderer.ts's activeSurface), so mutating a foreign surface's tree would never repaint it —
+// structurally the same silent no-paint React documents for its own resetAfterCommit. Cross-
+// surface content sharing is a different mechanism entirely: `createTunnel` (../create-tunnel).
+import { createMemo, createRenderEffect, onCleanup } from 'solid-js';
+import { createAnchor, dlog, isSymbioteNode, SymbioteSurface, } from '@symbiote-native/engine';
+import { insert, insertNode, removeNode } from '../renderer.js';
+// The Solid flavour of React's isSymbioteNode guard, and it needs its own wording: React tells the
+// caller to check for a forgotten `.current`, which does not exist here. A Solid `ref` is a plain
+// variable the compiler assigns into, and the idiomatic way to hold one across a re-render is a
+// signal — whose accessor must be CALLED. `mount={overlay}` (the accessor itself) and
+// `mount={overlay()}` read before the target element exists are the two real mistakes.
+function assertPortalTarget(target) {
+    if (target instanceof SymbioteSurface || isSymbioteNode(target))
+        return target;
+    throw new Error('Portal `mount` must be an already-mounted host node (a ref off a rendered <View>) or a surface — got something else. Did you pass the signal instead of CALLING it (`mount={overlay()}`), read it before the target element existed (gate the Portal behind <Show when={overlay()}>), or pass a CSS-selector-style string?');
+}
+export function Portal(props) {
+    // One engine ANCHOR per Portal instance, used as a fragment host: it is a real retained node, so
+    // the children have a stable exclusive parent to be reconciled under, and the commit walk
+    // FLATTENS an anchor's children into its parent (renderableChildren in core/engine/src/commit.ts)
+    // so nothing extra paints. That is what keeps portaled content a DIRECT Fabric child of the
+    // target, matching React's createPortal, instead of gaining the wrapper element solid-js/web's
+    // Portal creates because the DOM has no such flattening node.
+    //
+    // It is also what makes teardown one call: removing the anchor from the target removes the whole
+    // portaled subtree with it, so nothing has to track which nodes `insert` put where.
+    const host = createAnchor();
+    // Validated in a memo rather than at the top of the body: `mount` is a props getter, so reading
+    // it here would freeze the first target, and a component body runs once. The memo re-validates
+    // whenever the caller points the Portal somewhere else.
+    const target = createMemo(() => assertPortalTarget(props.mount));
+    // createRenderEffect, not createEffect: this must attach the host DURING the render pass that
+    // created it, so the portaled content reaches the SAME microtask commit as everything else the
+    // pass touched (renderer.ts's requestCommit coalesces them). solid-js/web can afford the
+    // deferred createEffect because a DOM append IS the paint.
+    createRenderEffect(() => {
+        const to = target();
+        dlog(`solid portal -> ${to instanceof SymbioteSurface ? 'surface' : to.component}`);
+        insertNode(to, host);
+        // Runs both on a `mount` change (before the effect re-attaches elsewhere) and on the Portal's
+        // own disposal — the content leaves the target either way.
+        onCleanup(() => {
+            removeNode(to, host);
+        });
+    });
+    // The same call compiled JSX emits for a component's children (see components/view.tsx): the
+    // accessor is handed to the renderer's own insert, which owns the render effect that keeps the
+    // subtree in sync. `marker` is deliberately omitted — the anchor host is exclusively ours, so
+    // insert may own its entire child list.
+    insert(host, () => props.children);
+    // Nothing paints at the call site. React's createPortal returns a ReactPortal that renders
+    // nothing there for the same reason; solid-js/web returns a DOM marker text node only because
+    // it needs to hold a position it might later hydrate.
+    return undefined;
+}

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

@@ -0,0 +1,13 @@
+import type { JSX } from '../jsx-runtime';
+export interface ITunnelInProps {
+    children?: JSX.Element;
+}
+export interface ITunnel {
+    /** Registers its children under the tunnel from wherever it is mounted — any surface — and
+     *  paints nothing itself. */
+    In: (props: ITunnelInProps) => JSX.Element;
+    /** Renders everything currently tunneled in, in registration order. Mount this in the component
+     *  that should actually paint the content. */
+    Out: () => JSX.Element;
+}
+export declare function createTunnel(): ITunnel;

package/build/create-tunnel/index.jsx

@@ -0,0 +1,53 @@
+// createTunnel — the Solid twin of adapters/react/src/create-tunnel/index.tsx, and of the Vue,
+// Svelte and Angular versions. It answers the case `Portal` (../create-portal) deliberately does
+// not: content authored in one place painting on a GENUINELY different, independently mounted
+// surface. The mechanism is the one pmndrs/tunnel-rat settled on and every adapter here copies —
+// a plain shared store, never a reach into a foreign surface's tree. `Out` renders from whichever
+// surface it is mounted on, through that surface's own ordinary render/commit; `In` only writes to
+// the store and never touches a host node, so it needs no target, no ref, and no guard.
+//
+// SHAPE. `In`/`Out` are per-call COMPONENTS closed over this tunnel's own registry, the same shape
+// React and Vue use — Solid components are ordinary functions, so a factory can mint a fresh pair
+// per createTunnel() call. Svelte's version has to differ (a `.svelte` file compiles to one fixed
+// top-level component, so its tunnel is a data object passed as a prop) and Angular's has to
+// differ again (no runtime component synthesis without JIT). Solid needs neither workaround.
+//
+// React's In/Out had to be separate components to avoid a real infinite render loop:
+// useSyncExternalStore's only lever is "re-render the whole component that subscribed", so a hook
+// version re-entered its own writer. Solid cannot reproduce that bug — a component body runs ONCE
+// and a signal write re-runs only the computations that READ it, which here is `Out`'s <For> and
+// nothing else. Separate components remain the right shape anyway, because `In` takes markup and
+// only a component has a children slot. The regression guard lives in create-tunnel.test.tsx all
+// the same, pinned to In's body running exactly once.
+import { createSignal, For, onCleanup } from 'solid-js';
+import { dlog } from '@symbiote-native/engine';
+export function createTunnel() {
+    // A signal over a frozen array, not createStore: every write replaces the whole list, and the
+    // only consumer is a keyed <For> that already diffs by row identity — a store's deep proxy would
+    // buy nothing and would wrap the entries.
+    const [entries, setEntries] = createSignal([]);
+    function In(props) {
+        // `() => props.children` and NOT `props.children`. The compiler emits children as a lazy
+        // getter (`{ get children() { … } }`, verified against babel-preset-solid 1.9.12), so reading
+        // it here would build the content under THIS component's owner, on the source surface, only
+        // for `Out` to adopt orphan nodes. Deferring the read means the content is created where it is
+        // rendered — and re-created honestly if a second `Out` renders the same tunnel.
+        const content = () => props.children;
+        // Registered synchronously in the body, not from onMount: an `Out` mounted LATER (a second
+        // surface, mounted after the source) must find the entry already there on its first render.
+        setEntries(current => [...current, content]);
+        // Logged WITHOUT reading entries() back: a component body runs inside untrack(), so a read here
+        // is harmless today, but it is one refactor away from making In a reader of the signal it
+        // writes — the self-notify shape that cost the React adapter an infinite render loop.
+        dlog('solid tunnel: entry registered');
+        onCleanup(() => {
+            setEntries(current => current.filter(item => item !== content));
+            dlog('solid tunnel: entry released');
+        });
+        return undefined;
+    }
+    function Out() {
+        return <For each={entries()}>{content => content()}</For>;
+    }
+    return { In, Out };
+}

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

@@ -0,0 +1,3 @@
+import { type ISymbioteNode } from '@symbiote-native/engine';
+import type { IDescriptor } from '@symbiote-native/components';
+export declare function descriptorToSolid(descriptor: () => IDescriptor): ISymbioteNode;

package/build/descriptor-to-solid.js

@@ -0,0 +1,91 @@
+// The Descriptor -> element bridge for Solid. A render function in @symbiote-native/components
+// returns a framework-agnostic `Descriptor` tree; this materializes it as real engine nodes that
+// flow on through the universal renderer -> engine -> Fabric, exactly like compiled JSX would.
+//
+// IT TAKES AN ACCESSOR, not a Descriptor — and that is the whole design, not a convenience.
+// React's and Vue's bridges are plain recursive walkers that rebuild the element tree on every
+// render because those frameworks re-run a component's body and diff the result. Solid runs a
+// component body ONCE; there is no re-render and no diff. So a `descriptorToSolid(descriptor)`
+// taking a value would paint the mount-time props and then freeze — every later `value` change
+// invisible. Returning a fresh tree from an accessor instead is worse than frozen: Solid's
+// insertExpression would REPLACE the node, destroying the identity that dispatchViewCommand, the
+// commit mirror and native-owned state (a Switch's own grip, a TextInput's cursor) all key on.
+//
+// So the tree is built ONCE and every node's props are wired through the renderer's own `spread`,
+// which is a render effect that diffs prop-by-prop against the previous values and calls
+// setProperty -> routeProp only for the ones that actually changed. Same mechanism, same node
+// identity, as compiled `<symbiote-switch value={v()} />`.
+//
+// This relies on `render-*.ts` producing a SHAPE-STABLE Descriptor: same type, same child count,
+// text where text was — only prop VALUES vary between calls. That is already the contract the
+// Svelte bridge depends on (svelte-adapter-dom-shim skill §15/§19); a violation throws here rather
+// than silently painting a half-updated tree.
+import { createMemo, createRenderEffect } from 'solid-js';
+import { isSymbioteNode } from '@symbiote-native/engine';
+import { createDescriptorShapeGuard } from '@symbiote-native/components';
+import { createElement, createTextNode, insertNode, replaceText, spread, } from './renderer.js';
+// The vanished-key widening the render effect below stands on. Shared with the host primitives
+// (components/view, components/text), which fold their props through the same two-branch
+// resolveAccessibilityProps — see that module's header.
+import { withStableKeys } from './utils/stable-keys.js';
+// The predicates belong to @symbiote-native/components, next to the Descriptor whose contract they
+// guard — this bridge and Svelte's had each grown a private copy, and the two had already drifted
+// to different coverage.
+const shape = createDescriptorShapeGuard('descriptorToSolid');
+function childAt(children, index) {
+    const child = children[index];
+    if (child === undefined)
+        throw shape.error(`child ${index} disappeared`);
+    return child;
+}
+// The tree's shape is read ONCE, at build, so every later run has to be re-checked against that
+// first reading. Skipping this fails silently both ways: a changed `type` lands the new
+// descriptor's props on the OLD host element, and a grown child list is simply never mounted.
+// The Svelte bridge's syncChild guards these same two cases — matching its coverage is
+// deliberate, since both bridges stand on the identical shape-stability contract.
+function assertSameShape(initial, next) {
+    shape.assertType(initial.type, next.type);
+    shape.assertChildCount(initial.children.length, next.children.length);
+    return next;
+}
+// `spread(node, accessor, true)`: skipChildren, because a Descriptor keeps its children in
+// `.children`, never in `.props.children`. spread also calls a `ref` found in the bag with the
+// node — which is how a caller's own `ref={…}` on a component reaches the host element, since it
+// rides down inside `passthrough` untouched.
+function buildNode(descriptor) {
+    const initial = descriptor();
+    const node = createElement(initial.type);
+    // Narrowing, not defensive: createElement is typed over the renderer's IHostNode union (which
+    // includes the surface), while everything below needs a real host node.
+    if (!isSymbioteNode(node)) {
+        throw new Error(`descriptorToSolid: ${initial.type} did not create a host node`);
+    }
+    spread(node, withStableKeys(() => assertSameShape(initial, descriptor()).props), true);
+    mountChildren(node, () => descriptor().children);
+    return node;
+}
+function mountChildren(parent, children) {
+    children().forEach((initial, index) => {
+        const child = () => childAt(children(), index);
+        if (typeof initial === 'string') {
+            const textNode = createTextNode(initial);
+            insertNode(parent, textNode);
+            // The `previous` accumulator is why this is a render effect with a seed rather than a plain
+            // one: the first run must NOT re-write text createTextNode already carries, and a later run
+            // must skip a recomputed-but-unchanged string instead of paying a commit for it.
+            createRenderEffect(previous => {
+                const value = shape.asText(child());
+                if (value !== previous)
+                    replaceText(textNode, value);
+                return value;
+            }, initial);
+            return;
+        }
+        insertNode(parent, buildNode(() => shape.asElement(child())));
+    });
+}
+// The memo is what keeps the render fn running ONCE per change no matter how many accessors read
+// it — the root's props, every child's props, every text child all derive from the same call.
+export function descriptorToSolid(descriptor) {
+    return buildNode(createMemo(descriptor));
+}

package/build/host-instance.d.ts

@@ -0,0 +1,2 @@
+export type { IHostInstance } from '@symbiote-native/engine';
+export declare function findNodeHandle(componentOrHandle: unknown): number | null;

package/build/host-instance.js

@@ -0,0 +1,36 @@
+// findNodeHandle, the Solid adapter twin of adapters/react/src/host-instance.ts and
+// adapters/vue/src/host-instance. RN's "ref/instance -> native reactTag" lookup, the seam
+// imperative-interop libraries (reanimated, gesture-handler, react-navigation) reach through.
+//
+// A Solid `ref={el}` on a symbiote host tag assigns the raw engine SymbioteNode, and the renderer
+// grafts the public-instance API onto it (toPublicInstance in renderer.ts), so the node a ref
+// receives carries measure / setNativeProps / focus exactly like React's getPublicInstance.
+//
+// The node -> tag resolution itself belongs to the engine (getNativeTag, keyed on the raw node in the
+// commit mirror); this only unwraps the Solid-shaped inputs onto it. An uncommitted or unknown input
+// has no tag yet and surfaces as null.
+import { getNativeTag, isSymbioteNode, dlog } from '@symbiote-native/engine';
+// Solid's counterpart to Vue's isRef branch. Solid has no ref wrapper — `ref={el}` writes the node
+// straight into a variable — but holding that node in a signal is idiomatic, and a signal reads as a
+// zero-argument accessor. Calling it is the only way to unwrap one (there is no isSignal predicate:
+// an accessor is an ordinary function). Note this UNWRAPS ONE LEVEL only, deliberately: recursing
+// would turn a component that happens to be passed here into a call chain.
+function isAccessor(value) {
+    return typeof value === 'function' && value.length === 0;
+}
+export function findNodeHandle(componentOrHandle) {
+    const candidate = isAccessor(componentOrHandle)
+        ? componentOrHandle()
+        : componentOrHandle;
+    if (candidate === null || candidate === undefined)
+        return null;
+    if (typeof candidate === 'number')
+        return candidate;
+    if (isSymbioteNode(candidate)) {
+        const tag = getNativeTag(candidate) ?? null;
+        dlog(`findNodeHandle: component=${candidate.component} tag=${tag}`);
+        return tag;
+    }
+    dlog('findNodeHandle: input did not resolve to a symbiote host node');
+    return null;
+}