@symbiote-native/solid 0.1.0 → 2.0.0

package/build/jsx-runtime.d.ts

@@ -1,9 +1,46 @@
-import type { ISymbioteIntrinsic } from '@symbiote-native/components';
+import type { ICrossTypedIntrinsics } from '@symbiote-native/components';
 import type { ISymbioteNode } from '@symbiote-native/engine';
+import type { IViewProps } from './components/view-props';
+import type { ITextProps } from './components/text-props';
+import type { IPressableProps } from './components/pressable-props';
+import type { IButtonProps } from './components/button-props';
+import type { IImageProps } from './components/image-props';
+import type { IImageBackgroundProps } from './components/image-background-props';
+import type { IInputAccessoryViewProps } from './components/input-accessory-view-props';
+import type { IRefreshControlProps } from './components/refresh-control-props';
+import type { ISafeAreaViewProps } from './components/safe-area-view-props';
+import type { ITouchableNativeFeedbackProps } from './components/touchable-native-feedback/touchable-native-feedback-props';
+import type { ITouchableOpacityProps, ITouchableHighlightProps } from './components/touchable-props';
+import type { ITouchableWithoutFeedbackProps } from './components/touchable-without-feedback/touchable-without-feedback-props';
+import type { IScrollViewProps } from './components/scroll-view-props';
+import type { ISwitchProps } from './components/switch-props';
+import type { ITextInputProps } from './components/text-input-props';
+import type { IModalProps } from './components/modal';
+import type { IActivityIndicatorProps } from './components/activity-indicator-props';
 type ISymbioteHostAttributes = {
     readonly children?: JSX.Element;
     readonly [attribute: string]: unknown;
 };
+interface ICrossedPrimitiveProps {
+    view: IViewProps;
+    text: ITextProps;
+    pressable: IPressableProps;
+    button: IButtonProps;
+    image: IImageProps;
+    'image-background': IImageBackgroundProps;
+    'input-accessory-view': IInputAccessoryViewProps;
+    'refresh-control': IRefreshControlProps;
+    'safe-area-view': ISafeAreaViewProps;
+    'touchable-native-feedback': ITouchableNativeFeedbackProps;
+    'touchable-opacity': ITouchableOpacityProps;
+    'touchable-highlight': ITouchableHighlightProps;
+    'touchable-without-feedback': ITouchableWithoutFeedbackProps;
+    'scroll-view': IScrollViewProps;
+    switch: ISwitchProps;
+    'text-input': ITextInputProps;
+    modal: IModalProps;
+    'activity-indicator': IActivityIndicatorProps;
+}
 export declare namespace JSX {
     type Element = ISymbioteNode | IArrayElement | IFunctionElement | (string & {}) | number | boolean | null | undefined;
     interface IArrayElement extends Array<Element> {
@@ -20,7 +57,7 @@ export declare namespace JSX {
     }
     interface IntrinsicAttributes {
     }
-    interface IntrinsicElements extends Record<ISymbioteIntrinsic, ISymbioteHostAttributes> {
+    interface IntrinsicElements extends ICrossTypedIntrinsics<ISymbioteHostAttributes, ICrossedPrimitiveProps> {
     }
 }
 export {};

package/build/modules/animated/create-animated-component.d.ts

@@ -7,4 +7,4 @@ export interface IAnimatedComponentProps {
     children?: JSX.Element;
     [key: string]: unknown;
 }
-export declare function createAnimatedComponent(Base: Component<any>): (props: IAnimatedComponentProps) => JSX.Element;
+export declare function createAnimatedComponent(Base: Component<any> | string): (props: IAnimatedComponentProps) => JSX.Element;

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

@@ -23,6 +23,7 @@
 // next reconcile drops.
 import { createEffect, mergeProps, onCleanup, splitProps, } from 'solid-js';
 import { createAnimatedLeafLifecycle, isNativeAnimatedAvailable, isSymbioteNode, readPassthroughStyle, reduceProps, resolveHostNode, whenCommitted, } from '@symbiote-native/engine';
+import { createElement, spread } from '../../renderer.js';
 import { withStableKeys } from '../../utils/stable-keys.js';
 // RN's prop carrying already-rasterized values that OVERRIDE the animated prop in the committed
 // props, so the ShadowTree (hit-testing) stays current while the native driver animates.
@@ -31,6 +32,15 @@ const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
 // from). A precise generic cannot work: the bag handed to the base is assembled at RUNTIME from a
 // key set that grows, so no static prop type describes it. The RETURN type stays precise, so a
 // caller of Animated.View still gets a real prop type.
+// `Base` accepts a TAG as well as a component, and the string branch is not symmetry — it is the
+// only shape that works once a primitive becomes a public intrinsic. `<Base {...props} />` on a
+// capitalized identifier compiles to `createComponent(Base, …)`, which is `untrack(() => Comp(props))`
+// in solid-js, so a string base is a `TypeError: Comp is not a function` at first paint. There is
+// nothing to widen INTO either: `createRenderer()` from solid-js/universal returns twelve names and
+// `Dynamic` is not among them (solid-js/web's Dynamic is DOM-only), so the element has to be built
+// through this renderer's own createElement + spread — the same two calls solid's own Dynamic makes
+// on its string branch. `spread` handles `ref` and `children` itself (universal's spreadExpression
+// skips both in its prop loop and drives them separately), which is why nothing is threaded by hand.
 export function createAnimatedComponent(Base) {
     return function AnimatedComponent(props) {
         // The passthrough is CONSUMED (it only overrides the committed style below); `children` and
@@ -100,6 +110,18 @@ export function createAnimatedComponent(Base) {
                 return local.children;
             },
         });
+        // Narrowed HERE and not around the whole factory: `Base` is a parameter captured by this inner
+        // function, so a check outside it does not reach the JSX below.
+        if (typeof Base === 'string') {
+            const element = createElement(Base);
+            spread(element, childProps, false);
+            // createElement's return type is the renderer's node union, which includes the SURFACE — a
+            // root the renderer is handed, never something a tag produces. Narrowed rather than cast, and
+            // thrown rather than defaulted: returning null here would paint nothing and stay green.
+            if (!isSymbioteNode(element))
+                throw new Error(`createAnimatedComponent: <${Base}> did not build a host node`);
+            return element;
+        }
         return <Base {...childProps}/>;
     };
 }

package/build/modules/animated/index.d.ts

@@ -44,10 +44,6 @@ export declare const Animated: {
     event: typeof event;
     forkEvent: typeof forkEvent;
     unforkEvent: typeof unforkEvent;
-    View: (props: import("./create-animated-component").IAnimatedComponentProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;
-    Text: (props: import("./create-animated-component").IAnimatedComponentProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;
-    Image: (props: import("./create-animated-component").IAnimatedComponentProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;
-    ScrollView: IAnimatedComponent;
     FlatList: IAnimatedComponent;
     SectionList: IAnimatedComponent;
     createAnimatedComponent: typeof createAnimatedComponent;

package/build/modules/animated/index.js

@@ -1,19 +1,25 @@
-// The Animated namespace for @symbiote-native/solid. createAnimatedComponent applied to this
-// adapter's primitives gives the six animated components RN exposes; the value graph, easing and
-// imperative drivers come from @symbiote-native/engine (framework-agnostic), so both halves meet
-// here in one object and `Animated.timing(new Animated.Value(0), …).start()` reads as it does in
-// RN. Solid's JSX takes the dotted form directly — `<Animated.View/>` compiles to
-// createComponent(Animated.View, …), no local alias needed.
+// The Animated namespace for @symbiote-native/solid. The value graph, easing and imperative drivers
+// come from @symbiote-native/engine (framework-agnostic), so both halves meet here in one object and
+// `Animated.timing(new Animated.Value(0), …).start()` reads as it does in RN.
+//
+// THERE IS NO `Animated.View` / `Animated.Text` / `Animated.Image` / `Animated.ScrollView`, and
+// nothing replaced any of them: `<view style={{ opacity: someAnimatedValue }}>` is the whole API
+// for style, and `<scroll-view onScroll={Animated.event(…)}>` is the whole API for a native-driven
+// scroll listener. The engine resolves an AnimatedNode written into any prop of any host node
+// (`core/engine/src/animated/host-binding.ts`) — it publishes the current value, subscribes the
+// leaf, writes each frame through its own targeted setNativeProps commit, and releases at the
+// commit sweep; `setEventListener` calls `bindAnimatedEvent` on any `on*` prop for EVERY host node,
+// not just a scroll one. Those four were aliases of the wrappers, and a wrapper is a tag now, which
+// is not a value `<Animated.X>` can call.
+//
+// The two below REMAIN because they are tier 3: a render prop decides the list family's output
+// shape in JS, so there is no tag for `<Animated.X>` to be an alias of.
 //
 // The NATIVE DRIVER is not this module's doing and must not be re-derived here. A
 // useNativeDriver animation promotes the value graph itself (animations/base.ts ->
 // value.__startNativeAnimation -> graph.__makeNative), and the props leaf follows automatically
 // through graph.__addChild. This file only assembles the surface.
 import { AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedMock, Easing, Platform, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, } from '@symbiote-native/engine';
-import { View } from '../../components/view.jsx';
-import { Text } from '../../components/text.jsx';
-import { Image } from '../../components/image.js';
-import { ScrollView } from '../../components/scroll-view';
 import { FlatList } from '../../components/flat-list/index.jsx';
 import { SectionList } from '../../components/section-list/index.jsx';
 import { createAnimatedComponent } from './create-animated-component.jsx';
@@ -21,11 +27,6 @@ export { createAnimatedComponent } from './create-animated-component.jsx';
 // The pure graph leaves live in the engine (they extend AnimatedWithChildren, no framework);
 // re-exported so this adapter's Animated surface matches React's.
 export { AnimatedProps, AnimatedStyle, AnimatedTransform, } from '@symbiote-native/engine';
-// View/Text/Image are pure host primitives with no cycle back to here, so wrap them eagerly.
-const AnimatedView = createAnimatedComponent(View);
-const AnimatedText = createAnimatedComponent(Text);
-const AnimatedImage = createAnimatedComponent(Image);
-let animatedScrollView;
 let animatedFlatList;
 let animatedSectionList;
 // The live, JS-driven driver half. RN's AnimatedImplementation.
@@ -58,13 +59,6 @@ const liveDrivers = {
 // spreads `...Animated` over the same component getters.
 const drivers = Platform.isDisableAnimations ? AnimatedMock : liveDrivers;
 export const Animated = {
-    View: AnimatedView,
-    Text: AnimatedText,
-    Image: AnimatedImage,
-    get ScrollView() {
-        animatedScrollView ??= createAnimatedComponent(ScrollView);
-        return animatedScrollView;
-    },
     get FlatList() {
         animatedFlatList ??= createAnimatedComponent(FlatList);
         return animatedFlatList;

package/build/modules/image.d.ts

@@ -0,0 +1,3 @@
+import { type IImageStatics } from '@symbiote-native/components';
+export type { IImageStatics };
+export declare const Image: IImageStatics;

package/build/modules/image.js

@@ -0,0 +1,12 @@
+// RN's Image STATICS — `getSize`, `prefetch`, `queryCache`, `abortPrefetch`, `resolveAssetSource`.
+//
+// IN `modules/`, NOT `components/`. The primitive is the `<image>` tag and its fold runs in the
+// engine (`behaviors/image.ts`); what survives under the name `Image` is an imperative API with no
+// view, which is what this bucket is for. Sitting in `components/` was what made a statics object
+// read as a component.
+//
+// A NAMESPACE OBJECT rather than five bare functions, deliberately: `Alert`, `Share`, `Linking`
+// and `Vibration` all take that shape, and an app porting from RN writes `Image.getSize(...)`
+// verbatim. Shared verbatim via `imageStatics`, the same source every other adapter attaches.
+import { imageStatics } from '@symbiote-native/components';
+export const Image = imageStatics;

package/build/register.d.ts

@@ -0,0 +1 @@
+import '@symbiote-native/components/register';

package/build/register.js

@@ -0,0 +1,15 @@
+// Side-effect ONLY. Exports nothing, and must never be re-exported from the barrel.
+//
+// The fourteen calls live once, in `@symbiote-native/components/register` — they were identical in
+// all five adapters, and each copy carried a migration ledger justifying a call against a wrapper
+// that no longer exists. What is per-adapter is only the SPELLING of the import below: every
+// `*-tag.test.*` here reaches the registry through `import './register';`, and this adapter's own
+// barrel guard pins that line.
+//
+// WHY A SIDE-EFFECT SUBPATH AND NOT A BARREL EXPORT. Metro turns on `inlineRequires` for PRODUCTION
+// only: it moves a `require` down to the first place its binding is used as a VALUE, and
+// `export { X } from './x'` compiles to a lazy getter. A registration reached that way never
+// evaluates in a Release build — invisible to tsc, to vitest, and to grepping the bundle. A bare
+// `import` placed NEXT TO a re-export of the same specifier does not help either: Babel merges the
+// two into one dependency and the merged dependency stays lazy.
+import '@symbiote-native/components/register';

package/build/renderer.d.ts

@@ -2,6 +2,7 @@ import { SymbioteSurface, type ISymbioteNode } from '@symbiote-native/engine';
 type IHostNode = ISymbioteNode | SymbioteSurface;
 export declare function setActiveSurface(surface: SymbioteSurface | undefined): void;
 export declare function replaceText(textNode: IHostNode, value: string): void;
+export declare function setHostPressed(node: IHostNode, pressed: boolean): void;
 export declare function removeNode(parent: IHostNode, node: IHostNode): void;
 export declare const render: (code: () => IHostNode, node: IHostNode) => () => void, effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => IHostNode, props: T) => IHostNode, createElement: (tag: string) => IHostNode, createTextNode: (value: string) => IHostNode, insertNode: (parent: IHostNode, node: IHostNode, anchor?: IHostNode | undefined) => void, insert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => IHostNode, spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void, setProp: <T>(node: IHostNode, name: string, value: T, prev?: T | undefined) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: IHostNode, arg: A) => T, element: IHostNode, arg: A) => T;
 export {};

package/build/renderer.js

@@ -17,8 +17,8 @@
 // babel.transformSync over representative JSX (elements, dynamic text, <Show>, <For>, spread,
 // ref) rather than read off the docs.
 import { createRenderer } from 'solid-js/universal';
-import { appendChild, createAnchor, createElement as createEngineElement, createRawText, dlog, insertBefore, removeChild as removeEngineChild, routeProp, setText as setEngineText, toPublicInstance, RAW_TEXT_COMPONENT, SymbioteSurface, } from '@symbiote-native/engine';
-import { descriptorFor } from '@symbiote-native/components';
+import { appendChild, createAnchor, createElement as createEngineElement, createRawText, dlog, insertBefore, removeChild as removeEngineChild, routeProp, setNodePressed, setProp as setEngineProp, setText as setEngineText, toPublicInstance, RAW_TEXT_COMPONENT, SymbioteSurface, } from '@symbiote-native/engine';
+import { descriptorFor, TEXT_INPUT_MULTILINE_TAG, } from '@symbiote-native/components';
 function isSurface(node) {
     return node instanceof SymbioteSurface;
 }
@@ -84,6 +84,23 @@ function asText(value) {
 // has to DETACH its anchor host from the portal target on cleanup. Going through here rather than
 // calling the engine's removeChild directly is what keeps the mutation paired with requestCommit(),
 // and keeps the surface-vs-node branch in one place.
+// The REFUSED path's half of `:active`, and the reason a refusal costs the component instance
+// rather than the pressed styling. A `<Pressable>` the lowering left as a component still owns its
+// own press machine, and one call here puts the node into its pressed state so `.btn:active`
+// applies exactly as it would on a lowered tag.
+//
+// Exported paired with requestCommit() for the same reason removeNode below is: the press arrives
+// from a NATIVE EVENT, outside any renderer mutation, so nothing else schedules a commit. React's
+// twin (`setNodeHidden` from hideInstance) needs none because its reconciler is already mid-commit
+// when it calls; Solid's is not. Costs nothing when no `:active` rule is registered — the engine
+// hands back the same style object and `isAlreadyPublished` turns the re-push away without dirtying
+// the node.
+export function setHostPressed(node, pressed) {
+    if (isSurface(node))
+        return;
+    setNodePressed(node, pressed);
+    requestCommit();
+}
 export function removeNode(parent, node) {
     if (isSurface(node))
         return;
@@ -93,10 +110,89 @@ export function removeNode(parent, node) {
         removeEngineChild(parent, node);
     requestCommit();
 }
+const TEXT_FOLDS = new Map([
+    ['ellipsizeMode', value => value ?? 'tail'],
+    ['allowFontScaling', value => value !== false],
+]);
+function seedTextDefaults(node) {
+    for (const [key, fold] of TEXT_FOLDS)
+        setEngineProp(node, key, fold(undefined));
+}
+// Seeding at CREATE is not enough, and the gap is device-only. A framework that clears a prop it
+// set earlier hands us an explicit `undefined` at PATCH time, and the default has to come BACK
+// rather than stay cleared — RN treats a missing prop and an explicit undefined alike, and only a
+// literal `false` opts out of allowFontScaling. Two Map lookups on text nodes only, and none at
+// all on a View, so it stays off the hot path.
+function foldTextValue(node, key, value) {
+    if (!node.isText)
+        return value;
+    const fold = TEXT_FOLDS.get(key);
+    return fold === undefined ? value : fold(value);
+}
+// The alias fold, at the RENDERER — the only place it can live now that an app writes the tag
+// itself. A bare `<view id="x">` has no wrapper to inherit the fold from, and `id` is a key Fabric
+// does not know, so it committed nothing while the component committed `nativeID`. Measured by
+// mounting both forms and diffing committed key NAMES; totals were identical and said nothing.
+//
+// One string comparison rather than a Map lookup, because this sits on the per-prop write path —
+// 32 001 prop writes on a benchmark create, where a Map.get is the kind of cost the engine spent
+// this month removing. That is only safe while every primitive shares ONE alias pair, which is a
+// property of the shared spec and not of this file, so `renderer-alias-fold.test.ts` re-derives
+// both constants from `HOST_PRIMITIVES` and fails the moment a second pair appears.
+const ALIAS_FROM = 'id';
+const ALIAS_TO = 'nativeID';
+// `multiline` selects between TWO Fabric views, so the TAG decides and no prop write moves a node
+// between them. Two of the three paths that can build the node resolve it earlier — the wrapper
+// CONSUMES the prop to pick its intrinsic, a lowering transform reads a literal at compile time —
+// and an author writing the tag by hand has neither, which leaves two silent divergences.
+//
+// The shared behavior (`core/components/src/behaviors/text-input.ts`) already makes the PAYLOAD
+// follow the tag. The complaint has to live here instead of there: `foldPayload` runs inside the
+// commit, so a throw from it lands a tick later as an uncaught exception with no frame naming the
+// call site — measured, a test awaiting the mount sees `nothing committed` rather than the error.
+const MULTILINE_PROP = 'multiline';
+function assertMultilineMatchesTag(node, value) {
+    if ((value === true) === (node.props[MULTILINE_PROP] === true))
+        return;
+    throw new Error(`multiline={${String(value)}} contradicts the tag: <text-input> and ` +
+        `<text-input-multiline> are different Fabric views and no prop write moves a node ` +
+        `between them. Pick the tag (a runtime choice needs a <Show> around both).`);
+}
+// RN gives `id` UNCONDITIONAL priority when both are set (View.js:77-79,
+// `processedProps.nativeID = id`), and `foldHostBag` reproduces that by deleting the source key out
+// of a whole bag. This renderer never sees a bag — it folds one key at a time — so precedence would
+// otherwise come out as source order, and `<view id nativeID>` would keep the stale legacy value
+// while `<view nativeID id>` would not. The wrapper hid that; a bare tag does not.
+//
+// So the node remembers that its nativeID came from an `id`, and a later raw `nativeID` write loses
+// to it. Off the hot path in every ordinary case: nothing is touched unless the prop being written
+// is one of these two names.
+const aliasedNodes = new WeakSet();
+function foldAliasKey(node, name, value) {
+    if (name === ALIAS_FROM) {
+        if (value === undefined)
+            aliasedNodes.delete(node);
+        else
+            aliasedNodes.add(node);
+        return ALIAS_TO;
+    }
+    return name;
+}
 const nodeOps = {
     createElement(tag) {
         const descriptor = descriptorFor(tag);
-        const node = createEngineElement(descriptor.component, descriptor.isText);
+        // The TAG goes over as well, not just the resolved Fabric name. The host-behavior registry is
+        // keyed by intrinsic tag while a node only ever carries the resolved view name — `symbiote-
+        // pressable` resolves to `RCTView` — so without this the lookup asks for `RCTView` and finds
+        // nothing, and the press machine silently never attaches. Registering under the Fabric name
+        // instead would be worse: every plain `View` would get a press machine.
+        const node = createEngineElement(descriptor.component, descriptor.isText, tag);
+        if (descriptor.isText)
+            seedTextDefaults(node);
+        // Only the multiline tag is seeded: writing `multiline: false` on the single-line one would add
+        // a key the wrapper's payload does not carry, i.e. a divergence in the other direction.
+        if (tag === TEXT_INPUT_MULTILINE_TAG)
+            setEngineProp(node, MULTILINE_PROP, true);
         // Graft the imperative public-instance API (measure / setNativeProps / focus / …) onto the raw
         // node so a `ref` to a host element exposes it exactly like React's getPublicInstance.
         // toPublicInstance mutates in place and returns the SAME node identity, so the engine's commit
@@ -132,11 +228,15 @@ const nodeOps = {
     setProperty(node, name, value) {
         if (isSurface(node))
             return;
+        if (name === MULTILINE_PROP)
+            assertMultilineMatchesTag(node, value);
+        if (name === ALIAS_TO && aliasedNodes.has(node))
+            return;
         // routeProp makes the prop-vs-event decision from the node's ViewConfig (onPress on a View
         // becomes a listener; onTintColor on a Switch stays a prop), and centralizes the class+style
         // merge. Shared with React and Vue — never re-implement an `onX` check here
         // (symbiote-engine-core §2).
-        routeProp(node, name, value);
+        routeProp(node, foldAliasKey(node, name, value), foldTextValue(node, name, value));
         requestCommit();
     },
     insertNode(parent, node, anchor) {
@@ -168,10 +268,27 @@ const nodeOps = {
         requestCommit();
     },
     removeNode,
+    // Reverse of `getFirstChild`'s `childHost` redirect: a child under a composed primitive's slot
+    // has `node.parent` pointing at the SLOT, but `cleanChildren`'s `isParent = getParentNode(el)
+    // === parent` compares against the OWNER — the same reference the JSX-level `insert()` call was
+    // given. Left un-redirected, that comparison is false for every child of a bare `<scroll-view>`
+    // (or any other slotted primitive) with a following sibling, so `isParent` never fires,
+    // `removeNode` is never called on a full array clear, and the old children are orphaned: still
+    // committed to Fabric, still retained, and re-diffed against on the next reconciliation —
+    // reproduced as unbounded RAM growth and an increasingly slow "Clear" on the benchmark screen.
+    // One level up only: `childHost` is always a DIRECT child the owner built (see `buildStructure`),
+    // never a deeper descendant.
     getParentNode(node) {
         if (isSurface(node))
             return undefined;
-        return node.parent ?? activeSurface;
+        const parent = node.parent ?? activeSurface;
+        if (parent === undefined || isSurface(parent))
+            return parent;
+        const grandparent = parent.parent;
+        if (grandparent !== undefined && grandparent.childHost === parent) {
+            return grandparent;
+        }
+        return parent;
     },
     // Anchors are NOT filtered out of this or getNextSibling, deliberately. solid-js/universal keeps
     // its own record of which nodes it put where and re-derives positions through these two lookups
@@ -179,8 +296,18 @@ const nodeOps = {
     // getFirstChild(parent) to replace text in place). Hiding a node the runtime itself inserted
     // desyncs that record from the real tree. Anchors are invisible to FABRIC — the commit walk skips
     // them — not to tree traversal.
+    //
+    // `childHost` redirected, same as the engine's own `appendChild`/`insertBefore`/`removeChild`
+    // (`hostFor`, core/engine/src/node.ts): a composed primitive's real children live on the slot it
+    // built, not on the owner it was asked to insert into, and `insert()`'s reconciliation reads this
+    // to know what is ALREADY there before deciding what to insert/move/remove. Reading the owner's
+    // own (single-child) array here would have every dynamic child on a bare `<scroll-view>` diffed
+    // against the wrong node — invisible on VirtualizedList, which never calls `insert()` on the
+    // owner directly, and wrong for any app writing `<scroll-view>{dynamicChildren}</scroll-view>`.
     getFirstChild(node) {
-        return node.children[0];
+        if (isSurface(node))
+            return node.children[0];
+        return (node.childHost ?? node).children[0];
     },
     getNextSibling(node) {
         if (isSurface(node))

package/build/utils/stable-keys.d.ts

@@ -1 +1 @@
-export declare function withStableKeys(props: () => Record<string, unknown>): () => Record<string, unknown>;
+export declare function withStableKeys<TProps extends object>(props: () => TProps): () => Record<string, unknown>;

package/build/utils/stable-keys.js

@@ -12,9 +12,10 @@
 // the actual diffing. Never hand-roll that diff instead.
 //
 // Lives here rather than beside either caller because BOTH reach for it: descriptorToSolid wraps
-// a render fn's Descriptor props, and the host primitives (View, Text) wrap their own
-// resolveAccessibilityProps output — the same function, the same two-branch key set. Any future
-// Solid component that folds props through a whole-object transform belongs on this too.
+// a render fn's Descriptor props, and a component that spreads a folded bag onto a bare `<view>`
+// (Pressable, KeyboardAvoidingView) wraps its own — the same function, the same two-branch key
+// set. This is the one capability a bare tag does NOT inherit from the wrappers that used to own
+// it, so any Solid component folding props through a whole-object transform belongs on it too.
 export function withStableKeys(props) {
     const seen = new Set();
     return () => {
@@ -22,9 +23,9 @@ export function withStableKeys(props) {
         const widened = {};
         for (const key of seen)
             widened[key] = undefined;
-        for (const key of Object.keys(next)) {
+        for (const [key, value] of Object.entries(next)) {
             seen.add(key);
-            widened[key] = next[key];
+            widened[key] = value;
         }
         return widened;
     };

package/metro-css-parser.cjs

@@ -5,4 +5,5 @@
 // .cjs, not .js: this package is "type": "module", but Metro's babelTransformerPath loading needs
 // a require()-able file. createCssMetroTransformer() is a factory — Metro needs the actual
 // {transform, getCacheKey} object it returns, not the css-parser package barrel.
-module.exports = require('@symbiote-native/css-parser').createCssMetroTransformer();
+module.exports =
+  require('@symbiote-native/css-parser').createCssMetroTransformer();

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@symbiote-native/solid",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "description": "SymbioteNative's Solid adapter — a solid-js/universal createRenderer driving real native iOS/Android views through the same engine as every other adapter.",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "solid",
+    "solid-js",
+    "fabric",
+    "cross-platform",
+    "ios",
+    "android"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -52,18 +62,19 @@
   "dependencies": {
     "babel-preset-solid": "^1.9.12",
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "0.5.0",
-    "@symbiote-native/css-parser": "0.4.0"
+    "@symbiote-native/components": "2.0.0",
+    "@symbiote-native/css-parser": "0.5.0"
   },
   "peerDependencies": {
-    "@symbiote-native/engine": ">=0.1.7",
     "solid-js": ">=1.9.0",
-    "react-native": ">=0.86"
+    "react-native": ">=0.86",
+    "@symbiote-native/engine": "^0.5.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.25.2",
     "solid-js": "^1.9.14",
-    "@symbiote-native/engine": "0.3.0",
-    "@symbiote-native/test-utils": "0.2.0"
+    "@symbiote-native/engine": "0.5.0",
+    "@symbiote-native/test-utils": "0.3.0"
   },
   "scripts": {
     "typecheck": "tsc --build",

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

@@ -1,2 +0,0 @@
-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

@@ -1,11 +0,0 @@
-// 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

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

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

@@ -1,2 +0,0 @@
-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

@@ -1,10 +0,0 @@
-// 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

@@ -1,4 +0,0 @@
-// 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

@@ -1,8 +0,0 @@
-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

@@ -1,51 +0,0 @@
-// 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

@@ -1,7 +0,0 @@
-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;