@symbiote-native/solid 1.0.0 → 3.0.0

package/README.md

@@ -1,76 +1,101 @@
 # @symbiote-native/solid
 
-SolidJS adapter for SymbioteNative. Compiled Solid JSX drives real native iOS/Android views through
-the same `@symbiote-native/engine` every other adapter uses — React's renderer is never in the path.
-
-**Status: L4 done (parity phase complete).** The renderer seam, `mount`/`unmount`, the
-primitives, the stateful touch components, the Touchable family, Button / ImageBackground /
-InputAccessoryView, StatusBar and the list family all ship at full parity with the React
-reference — off `@symbiote-native/components`, via `descriptorToSolid` where the component has a
-shared render fn. The engine-owned runtime modules are re-exported from the barrel. `Portal`
-(same-surface content relocation, this adapter's twin of React's `createPortal`) and
-`createTunnel` (cross-surface) both ship, built over the universal renderer rather than
-`solid-js/web`'s DOM-bound `Portal`/`Dynamic`. `Dynamic` itself stays absent by design — nothing
-here needs it, and no other adapter ships a twin for parity to require one. See
-`symbiote-new-adapter` §7 for what each layer means.
+The **SolidJS adapter** for [SymbioteNative](../../README.md) — compiled Solid JSX drives real
+native iOS/Android views through the same `@symbiote-native/engine` every other adapter uses,
+with React's renderer never in the path. It targets `createRenderer` from `solid-js/universal`,
+Solid's own custom-renderer API — no shimming of private internals, no compiler running beside
+Metro, no custom Babel transformer path.
+
+<div align="center">
+
+![Solid driving real native iOS views through SymbioteNative](../../assets/solid-demo.gif)
+
+</div>
+
+> New to SymbioteNative? The [root README](../../README.md) has the architecture.
+
+---
+
+## Install
+
+```bash
+npm install @symbiote-native/solid react-native solid-js
+```
+
+`react-native` and `solid-js` stay your app's own top-level dependencies — this package only
+replaces the JS renderer that drives them. `npx @symbiote-native/cli new --framework solid` wires
+the Babel preset, Metro config, and `jsxImportSource` below for a new app; wiring them into an
+existing one still follows [`examples/solid`](../../examples/solid) rather than a generator.
 
-Solid's own control-flow `Switch`/`Match` are NOT re-exported from this package: `Switch` collides
-with RN's Switch component, which every adapter must export under that name. Import the control-flow
-pair from `solid-js` directly.
+Targets **Solid 1.9**, deliberately not 2.0 (RC as of 2026-08) — 2.0 moves the package to
+`@solidjs/universal`, changes `RendererOptions`, and changes the compiled-output shape. Moving to
+it is a rewrite of `src/renderer.ts`, not a range bump.
 
-The adapter is a regular publishable package (`@symbiote-native/solid` on npm, alongside React,
-Vue, Svelte and Angular) — it carries no `"private"` flag, so `changeset publish` and the
-pkg.pr.new canary cover it the same as every other adapter.
+---
 
-## Why Solid needs no DOM shim and no Metro transformer
+## Use it
 
-Solid ships an official custom-renderer API, `createRenderer` from `solid-js/universal`. That is
-exactly the framework-agnostic seam this project looks for in every framework, so the adapter is
-`RendererOptions`' ten methods mapped onto the engine's mutation API — no shimming of private
-internals (the Svelte adapter's approach, forced by an unmerged upstream PR), no compiler running
-beside Metro (Angular's AOT), and no custom `babelTransformerPath` at all.
+The app is ordinary Solid — the native primitives are plain lowercase intrinsic tags, no import
+needed:
 
-Targets **Solid 1.9**, deliberately not 2.0 (RC as of 2026-08): 2.0 moved the package to
-`@solidjs/universal`, changed `RendererOptions` (added `createSentinel`/`cleanupNodes`, gave
-`createElement` a staticProps argument) and changed the compiled-output shape (`use()` →
-`applyRef`/`ref`, `effect(fn, init)` → `effect(fn, effectFn)`). Moving to it is a rewrite of
-`src/renderer.ts`, not a range bump.
+```jsx
+import { createSignal } from 'solid-js';
 
-## Wiring an app
+export default function App() {
+  const [count, setCount] = createSignal(0);
+  return (
+    <view style={{ padding: 24 }}>
+      <text>Taps: {count()}</text>
+      <pressable onPress={() => setCount(c => c + 1)}>
+        <text>Tap me</text>
+      </pressable>
+    </view>
+  );
+}
+```
 
-`babel.config.js` — the preset ships preconfigured, so the app can't get `moduleName` or `generate`
-wrong:
+The zero-config entry wires the RN-backed host seams and registers the app in one call — this is
+what [`examples/solid`](../../examples/solid) actually uses:
 
 ```js
-module.exports = {
-  presets: [
-    'module:@react-native/babel-preset',
-    // LAST on purpose: Babel applies presets in reverse order, so this runs FIRST and claims the
-    // JSX before the React Native preset's own React-JSX transform can.
-    '@symbiote-native/solid/babel-preset',
-  ],
-};
+// index.js
+import { createApp } from '@symbiote-native/solid/bootstrap';
+import App from './App';
+import { name as appName } from './app.json';
+
+createApp(App).mount(appName);
 ```
 
-`metro.config.js` needs `unstable_conditionNames: ['browser']` — `solid-js`'s export map has a `node`
-branch pointing at its SSR build, and resolving that into a native bundle is the same failure mode
-the Svelte example hit (`lifecycle_function_unavailable` on the first mount).
+For anything the defaults don't cover, drive the lower-level seam directly — the same
+`registerRunnable` seam every other adapter uses:
 
-Solid compiles a component to `function App(props)` — a function with an uppercase name, which is
-exactly what react-refresh's `isLikelyComponentType` heuristic looks for. It then tries to patch a
-React Fiber tree that does not exist in this path, and the update is swallowed with no error. Force a
-full reload instead: `unstable_forceFullRefreshPatterns: [/\.tsx$/]`.
+```js
+// index.js
+import { AppRegistry } from 'react-native';
+import { mount } from '@symbiote-native/solid';
+import App from './App';
+import { name as appName } from './app.json';
+
+AppRegistry.registerRunnable(appName, ({ rootTag }) => {
+  mount(rootTag, App);
+});
+```
 
-## Host-primitive lowering — `<View>`/`<Text>`/`<Pressable>` compile to intrinsics, not components
+`babel.config.js` needs the adapter's preset LAST — Babel applies presets in reverse order, so
+listing it last runs it first, claiming the JSX before RN's own React-JSX transform can:
 
-`babel-preset-solid` (wired above) runs `babel-lower-host-primitives.cjs` before compiling: a
-`<View>`/`<Text>` with no reactive prop, and a `<Pressable>` whose `style`/children don't need a
-component instance, rewrite to the engine's intrinsic tags (`symbiote-view`, `symbiote-text`,
-`symbiote-pressable`) instead of going through `createComponent` + a props Proxy. Nothing in app
-code has to opt in — the preset does it transparently, and a call site that can't be lowered
-(a spread, a render-prop child, an unreadable attribute) falls back to the component path
-unchanged. See root `CLAUDE.md`, "Where we stand against stock React Native", for the measured
-device numbers this bought — do not hand-copy them here, they move with every engine/adapter cut.
+```js
+module.exports = {
+  presets: ['module:@react-native/babel-preset', '@symbiote-native/solid/babel-preset'],
+};
+```
+
+## Primitives are plain intrinsic tags — `<view>`/`<text>`/`<pressable>`, no component involved
+
+An app writes the lowercase tags directly (`view`, `text`, `pressable`, …) — `babel-preset-solid`'s
+own `isComponent` check already treats a lowercase name as an element, so JSX compiles straight to
+`createElement`/`setProp` calls against `symbiote-view` etc., no import and nothing to opt into.
+Nothing rewrites the source on the way there, so this adapter carries no Babel plugin of its own.
 
 ## `./renderer` is a compiler target, not a convenience export
 
@@ -96,46 +121,94 @@ cite the runtime line that forces them.
    through those lookups, so hiding a node it inserted itself desyncs its bookkeeping from the tree.
    Anchors are invisible to Fabric, not to traversal.
 
-## Typing — the app points `jsxImportSource` here, and that is the whole setup
+`tsconfig.json` points `jsxImportSource` at this package — the whole typing setup, no
+`solid-env.d.ts`, no per-file pragma:
 
 ```jsonc
-// tsconfig.json
-"jsx": "preserve",
-"jsxImportSource": "@symbiote-native/solid"
+{ "jsx": "preserve", "jsxImportSource": "@symbiote-native/solid" }
 ```
 
-That is all an app needs. No `/// <reference types>` line, no `solid-env.d.ts`, no per-file pragma:
-TypeScript resolves the entire JSX namespace from this package's `./jsx-runtime` entry, which is
-type-only (the emitted JS is `export {};` and nothing ever imports it — JSX becomes calls on
-`./renderer` through babel-preset-solid's `moduleName`, a separate mechanism).
+Solid's own control-flow `Switch`/`Match` are **not** re-exported from this package — `Switch`
+collides with RN's `Switch` component, which every adapter must export under that name. Import
+the control-flow pair from `solid-js` directly.
+
+---
+
+## Parity — and the one gap
+
+Solid reaches the same primitives, runtime modules, `Animated` on both drivers, gestures,
+accessibility, and the `VirtualizedList` family as React, Vue, Svelte, and Angular, verified
+on-device on iOS and Android — the root README's ["How Fast, Against Stock React
+Native"](../../README.md#how-fast-against-stock-react-native) section has the measured numbers.
+That parity is **structural, not hand-copied**: the component logic (state machines +
+render functions) is written **once** in `@symbiote-native/components`, and Solid supplies only
+its lifecycle via `descriptorToSolid`. `Portal` (same-surface content relocation) and
+`createTunnel` (cross-surface) both ship, built over the universal renderer rather than
+`solid-js/web`'s DOM-bound equivalents; `Dynamic` stays absent by design — nothing here needs it.
+
+The one deliberate gap, same as every other non-React adapter — **third-party React component
+packages** (`@react-native-community/slider` used directly) run only under the React adapter:
+their body calls React hooks off the React dispatcher, which is null under Solid.
+`@symbiote-native/slider` (this repo's own wrapper) _does_ ship a real Solid build through the
+same `createNode`-by-ViewConfig path Solid uses for its own primitives.
+
+---
+
+## A Solid-specific gotcha — Fast Refresh, not Metro's export conditions
+
+A compiled Solid component is a function with an uppercase name (`function App(props)`) —
+exactly what react-refresh's `isLikelyComponentType` heuristic accepts as a React component.
+Metro's HMR then tries to patch a React Fiber tree that doesn't exist here (no `react-reconciler`
+in this path), and the update is silently swallowed: no error, no visible change.
+`metro.config.js` needs `unstable_forceFullRefreshPatterns: [/\.tsx$/]` to force every `.tsx`
+edit to a full reload instead.
 
-Two things follow that the earlier `declare module 'solid-js'` shim could not give:
+`solid-js`'s export map does have a `node` branch pointing at its SSR build — the same shape that
+broke the Svelte canary — but Metro's own default condition set (`['react-native']`, contributed
+by `@react-native/metro-config`) never includes `node`, so the SSR branch is unreachable and the
+client build resolves correctly with no extra `unstable_conditionNames` config. Adding one would
+not fix anything that's broken and would actively drop `'react-native'` from the condition set
+(`mergeConfig` replaces the array rather than extending it) — leave it alone.
 
-- **A web tag is a compile error.** `<div>` reports `TS2339: Property 'div' does not exist on type
-'JSX.IntrinsicElements'` instead of building fine and failing on device. Augmenting solid-js's
-  namespace merges into its HTML/SVG list, so `<div>` stayed legal there. The Svelte adapter needed
-  a whole preprocessor for the same guarantee.
-- **JSX children are type-checked at all.** solid-js's `JSX.Element` names the DOM's `Node`, which
-  does not resolve without a DOM lib — and `skipLibCheck` swallows that error rather than reporting
-  it, leaving `Element` as `any` and every JSX child position unchecked. The visible symptom was
-  small (a render-prop parameter needed an explicit annotation); the cause was not.
+---
 
-The risk recorded when this was deferred — that our `Element` must line up with what solid-js's own
-`<Show>`/`<For>` return — resolves for the same reason: solid's is `any` in the DOM-less programs we
-target, so it is assignable to anything of ours. `src/jsx-runtime.test.tsx` pins the runtime half;
-the type half rides on `examples/solid`'s typecheck. Full rationale, the measurements behind each
-claim, and the one config that would break it: `.claude/rules/solid-jsx-namespace.md`.
+## Run it
+
+[`examples/solid`](../../examples/solid) is a stock React Native 0.86 app — the steps are
+identical to the [React adapter](../react/README.md#run-it), just swap the directory:
+
+```bash
+cd examples/solid
+npm install
+bundle install                 # first time only — installs CocoaPods itself
+bundle exec pod install        # fetch native pods
+
+# terminal 1 — Metro (DEBUG=1 turns on diagnostic logs)
+DEBUG=1 npm start --reset-cache
+
+# terminal 2 — build + launch
+npm run ios                    # iOS simulator
+npm run android                # Android emulator
+```
+
+---
+
+## Test it
+
+```bash
+pnpm test                      # vitest, from the workspace root — headless, fake Fabric slot
+```
 
-## Single root per process
+The canary's own real-device verification is the perf benchmark run (see [Run
+it](#run-it) plus the root README's device numbers), not an automated on-device suite —
+`examples/solid` is the one canary without a Detox `e2e/` setup yet, unlike React/Vue/Svelte/
+Angular. Why headless testing comes for free otherwise: see
+[Testing](../../README.md#testing).
 
-Compiled JSX calls module-level functions with no surface argument, so there is nowhere to thread a
-per-surface renderer through — the active surface is module state, set by `mount`. The Svelte adapter
-reached the same single-root conclusion for its own reasons.
+---
 
 ## Reference
 
-- The canary app: `examples/solid` (its README covers running it and the checks it carries).
-- The engine API this targets: the `symbiote-engine-core` skill, `core/engine/src/node.ts`.
-- Building/porting an adapter: the `symbiote-new-adapter` skill.
+- The canary app: [`examples/solid`](../../examples/solid).
 - The nodeOps table this mirrors: `adapters/vue/src/renderer/index.ts`.
 - The same seam on an ANSI target: `wolf-tui/packages/solid/src/renderer/node-ops.ts`.

package/babel-preset.cjs

@@ -24,11 +24,6 @@
 // React-JSX transform gets a chance to claim the same JSX nodes.
 module.exports = function symbioteSolidBabelPreset(_api, options = {}) {
   return {
-    // Babel runs PLUGINS before PRESETS, which is exactly the order this needs: the lowering
-    // rewrites <View>/<Text> to their intrinsic tags while they are still JSX, so babel-preset-solid
-    // then compiles them as elements (createElement + setProp) instead of as components
-    // (createComponent + a props Proxy). Reversed, there would be nothing left to rewrite.
-    plugins: [require('./babel-lower-host-primitives.cjs')],
     presets: [
       [
         require('babel-preset-solid'),

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

@@ -0,0 +1,5 @@
+import type { IActivityIndicatorProps as IActivityIndicatorBaseProps } from '@symbiote-native/components';
+import type { IClassNameValue } from '@symbiote-native/engine';
+export type IActivityIndicatorProps = IActivityIndicatorBaseProps & {
+    class?: IClassNameValue;
+};

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

@@ -0,0 +1 @@
+export {};

package/build/components/button-props.d.ts

@@ -0,0 +1,5 @@
+import type { IClassNameValue } from '@symbiote-native/engine';
+import type { IButtonProps as IButtonBaseProps } from '@symbiote-native/components';
+export type IButtonProps = IButtonBaseProps & {
+    class?: IClassNameValue;
+};

package/build/components/button-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -66,7 +66,7 @@ export function FlatList(props) {
             : props.columnWrapperStyle,
     ]);
     function renderRow(info) {
-        return (<symbiote-view style={rowStyle()}>
+        return (<view style={rowStyle()}>
         <Index each={info().item.items}>
           {(item, column) => {
                 // Called ONCE and untracked, the shape VirtualizedList's own cell build uses: a
@@ -79,10 +79,10 @@ export function FlatList(props) {
                     // separators handle — the divider sits between rows, not between columns.
                     separators: info().separators,
                 })));
-                return (<symbiote-view style={COLUMN_STYLE}>{content}</symbiote-view>);
+                return <view style={COLUMN_STYLE}>{content}</view>;
             }}
         </Index>
-      </symbiote-view>);
+      </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.
@@ -113,6 +113,6 @@ export function FlatList(props) {
     // 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()}/>
+      <VirtualizedList {...passthrough} data={rows()} getItem={(_source, index) => rows()[index]} getItemCount={() => rows().length} renderItem={renderRow} keyExtractor={(row) => rowKeyExtractor(row, props.keyExtractor)} ItemSeparatorComponent={rowSeparatorComponent()} onViewableItemsChanged={rowViewability()} viewabilityConfigCallbackPairs={rowViewabilityPairs()}/>
     </Show>);
 }

package/build/components/{image-background.d.ts → image-background-props.d.ts}

@@ -1,10 +1,9 @@
+import type { IImageProps } from '@symbiote-native/components';
+import type { IClassNameValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
 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-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import type { IImageProps as IImageBaseProps } from '@symbiote-native/components';
+import type { IClassNameValue } from '@symbiote-native/engine';
+export type IImageProps = IImageBaseProps & {
+    class?: IClassNameValue;
+};

package/build/components/image-props.js

@@ -0,0 +1,6 @@
+// The `<image>` tag's prop surface. `renderImage`'s whole fold — 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 — runs in the tag's own behavior
+// (`registerImageBehavior`, wired by `../register`), so the wrapper that used to call it is gone.
+// The Image STATICS moved to `../modules/image`: an imperative API with no view.
+export {};

package/build/components/{input-accessory-view.d.ts → input-accessory-view-props.d.ts}

@@ -1,5 +1,5 @@
 import type { JSX } from '../jsx-runtime';
-import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
 import type { IClassNameValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
 export interface IInputAccessoryViewProps extends IAccessibilityProps, IAriaProps {
     nativeID?: string;
@@ -8,4 +8,3 @@ export interface IInputAccessoryViewProps extends IAccessibilityProps, IAriaProp
     class?: IClassNameValue;
     children?: JSX.Element;
 }
-export declare function InputAccessoryView(props: IInputAccessoryViewProps): JSX.Element;

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

@@ -0,0 +1,5 @@
+// The `<input-accessory-view>` tag's prop surface. The wrapper that used to carry it is gone —
+// `renderInputAccessoryView`'s nativeID / backgroundColor / style mapping runs in the tag's own
+// behavior (`registerInputAccessoryViewBehavior`, wired by `../register`), and the aria/role fold
+// runs in the engine's `fabricProps`.
+export {};

package/build/components/keyboard-avoiding-view.jsx

@@ -23,9 +23,9 @@
 // keyboard event without re-subscribing (React re-runs its useEffect for that; here the closure
 // already sees the live value).
 import { createMemo, createSignal, onCleanup, splitProps } from 'solid-js';
-import { computeInset, keyboardAvoidingEventNamesFor, readKeyboardFrame, readLayoutFrame, readPrefersCrossFadeTransitions, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+import { computeInset, configureKeyboardAvoidingAnimation, keyboardAvoidingEventNamesFor, readKeyboardAnimationTiming, readKeyboardFrame, readLayoutFrame, readPrefersCrossFadeTransitions, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
 import { Keyboard, Platform, dlog, } from '@symbiote-native/engine';
-import { View } from './view.jsx';
+import { withStableKeys } from '../utils/stable-keys.js';
 // Read by KeyboardAvoidingView itself; everything else (the aria/role aliases, accessibility*,
 // testID, class) forwards onto the wrapper View, which folds them once through
 // resolveAccessibilityProps and widens the vanished-key case with withStableKeys.
@@ -62,6 +62,7 @@ export function KeyboardAvoidingView(props) {
     const onShow = (payload) => {
         const keyboard = readKeyboardFrame(payload);
         const offset = local.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET;
+        const previousInset = inset();
         const next = computeInset(frame, keyboard, offset, {
             behavior: local.behavior,
             // The inset CURRENTLY applied (RN's this.state.bottom). Read from the signal at event time so
@@ -69,9 +70,12 @@ export function KeyboardAvoidingView(props) {
             // frame shorter by exactly that much and core adds it back to cancel the shrink. Without it
             // each further keyboard event computes a smaller overlap and the view walks back down under
             // the keyboard. Core gates the correction on 'height'; the other modes ignore the value.
-            previousInset: inset(),
+            previousInset,
             prefersCrossFadeTransitions,
         });
+        // RN's `_updateBottomIfNecessary` skips the animation when the inset did not change.
+        if (next !== previousInset)
+            configureKeyboardAvoidingAnimation(readKeyboardAnimationTiming(payload), local.enabled !== false);
         dlog(`KeyboardAvoidingView show -> inset ${next}`);
         setInset(next);
     };
@@ -144,9 +148,14 @@ export function KeyboardAvoidingView(props) {
         // Last, so KAV's own measure always runs; the caller's handler is invoked from inside it.
         onLayout: handleLayout,
     }));
+    // The half `View` used to supply, now that the wrapper is a bare tag: `spread` has no removal
+    // pass, so a key that stops being emitted (`rest` is a splitProps proxy, and `wrapperStyle` is
+    // absent in some behaviors) would keep its last value on the native view forever
+    // (.claude/rules/solid-descriptor-bridge.md §1).
+    const stableWrapperProps = withStableKeys(wrapperProps);
     // 'nested' ('position') pushes the children in an inner View by `bottom: inset`; the wrapper modes
     // ('padding' / 'height' / no behavior) adjust the single wrapper directly.
-    return (<View {...wrapperProps()}>
-      {isNested() ? (<View style={innerStyle()}>{local.children}</View>) : (local.children)}
-    </View>);
+    return (<view {...stableWrapperProps()}>
+      {isNested() ? (<view style={innerStyle()}>{local.children}</view>) : (local.children)}
+    </view>);
 }

package/build/components/modal.jsx

@@ -18,8 +18,8 @@
 // user's components, which is the case the render-fn boundary rules OUT of core
 // (.claude/rules/component-render-fn-boundary.md), so the bridge would have nothing to do with the
 // half that matters and would hand back a root whose container child we would then have to reach
-// into to `insert` into. renderModal always paints the SAME two-tag shape (one symbiote-modal host
-// wrapping one collapsable symbiote-view container; only prop VALUES vary), so the tags are written
+// into to `insert` into. renderModal always paints the SAME two-tag shape (one modal host
+// wrapping one collapsable view container; only prop VALUES vary), so the tags are written
 // out and the computed props read off the fixed positions — the same call React's createElement
 // chain, Vue's h() chain and Svelte's markup all make. `children` then reaches the container
 // through the compiler's own `insert`, which is the point of view.tsx's header.
@@ -100,7 +100,7 @@ export function Modal(props) {
         style: local.style,
         passthrough: resolveAccessibilityProps(rest),
     });
-    // root = symbiote-modal > [container]; the user children nest UNDER the container View, never as
+    // root = modal > [container]; the user children nest UNDER the container View, never as
     // a direct sibling of the host (RN's modal content layout, render-modal.ts).
     const container = () => {
         const [first] = descriptor().children;
@@ -118,8 +118,8 @@ export function Modal(props) {
         class: local.class,
     }));
     return (<Show when={shouldRender()}>
-      <symbiote-modal {...hostBag()}>
-        <symbiote-view {...containerBag()}>{local.children}</symbiote-view>
-      </symbiote-modal>
+      <modal {...hostBag()}>
+        <view {...containerBag()}>{local.children}</view>
+      </modal>
     </Show>);
 }

package/build/components/{pressable.d.ts → pressable-props.d.ts}

@@ -1,10 +1,10 @@
-import { type Accessor } from 'solid-js';
+import type { Ref } from 'solid-js';
 import type { JSX } from '../jsx-runtime';
-import { type IAccessibilityProps, type IAriaProps, type IPressHandler, type IPressState, type IPressableAndroidRippleConfig, type IRectOffset } from '@symbiote-native/components';
-import { type IClassNameValue, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps, IPressHandler, IPressState, IPressableAndroidRippleConfig, IRectOffset } from '@symbiote-native/components';
+import type { IClassNameValue, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IHostInstance } from '../host-instance';
 export type { IPressState, IPressableAndroidRippleConfig, } from '@symbiote-native/components';
 type IPressableStyle = IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
-type IPressableChildren = JSX.Element | ((state: Accessor<IPressState>) => JSX.Element);
 export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     onPress?: IPressHandler;
     onPressIn?: IPressHandler;
@@ -13,10 +13,14 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     onLongPress?: IPressHandler;
     delayLongPress?: number;
     disabled?: boolean;
+    focusable?: boolean;
     cancelable?: boolean;
+    blockNativeResponder?: boolean;
     hitSlop?: IRectOffset;
+    testOnly_pressed?: boolean;
     pressRetentionOffset?: IRectOffset;
     unstable_pressDelay?: number;
+    minPressDuration?: number;
     android_ripple?: IPressableAndroidRippleConfig;
     android_disableSound?: boolean;
     onHoverIn?: IPressHandler;
@@ -25,7 +29,6 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     delayHoverOut?: number;
     style?: IPressableStyle;
     class?: IClassNameValue;
-    children?: IPressableChildren;
+    ref?: Ref<IHostInstance>;
+    children?: JSX.Element;
 }
-export declare function Pressable(props: IPressableProps): JSX.Element;
-export declare function TouchablePressable(props: IPressableProps): JSX.Element;

package/build/components/pressable-props.js

@@ -0,0 +1,13 @@
+// The `<pressable>` tag's prop surface. The press machine — timers, the retention region, the
+// long-press and hover legs, the `disabled`/`focusable`/`accessible` folds and the Android ripple —
+// lives on the engine node as `core/components/src/behaviors/pressable.ts`, wired by
+// `../register`.
+//
+// THERE IS NO RENDER-PROP CHILD, and that is the one surface a tag cannot carry — same fact as
+// Vue's scoped slot (`adapters/vue/src/components/pressable-props.ts`), Solid's own version of it.
+// Press state lives on the engine node and never crosses back into Solid's reactivity as an
+// accessor, so `{state => …}` has no channel any more. A `style` CALLBACK still works — the engine
+// resolves it at both values of `pressed` (`isStyleCallback`, `core/engine/src/node.ts`) — and a
+// `:active` CSS rule is cheaper still. A CHILD that needs the state has to be given it: mirror
+// `onPressIn`/`onPressOut` into a local signal, which is what any app styling a descendant does.
+export {};

package/build/components/{refresh-control.d.ts → refresh-control-props.d.ts}

@@ -1,8 +1,9 @@
 import type { JSX } from '../jsx-runtime';
-import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
-import { type IClassNameValue } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IClassNameValue } from '@symbiote-native/engine';
 export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
     refreshing: boolean;
+    id?: string;
     onRefresh?: () => void | Promise<void>;
     tintColor?: string;
     title?: string;
@@ -15,4 +16,3 @@ export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
     class?: IClassNameValue;
     children?: JSX.Element;
 }
-export declare function RefreshControl(props: IRefreshControlProps): JSX.Element;

package/build/components/refresh-control-props.js

@@ -0,0 +1,7 @@
+// The `<refresh-control>` tag's prop surface. On iOS the tag resolves to Fabric's PullToRefreshView,
+// which lives INSIDE a scroll view as a childless sibling before the content container; on Android it
+// is AndroidSwipeRefreshLayout and WRAPS the scroll view instead. Which shape is built is the scroll
+// view's job, and the controlled-spinner handshake — mirror what native reported, command the value
+// back down when the app's `refreshing` disagrees — is the tag's own behavior
+// (`registerRefreshControlBehavior`, wired by `../register`).
+export {};

package/build/components/safe-area-view-props.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from '../jsx-runtime';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IClassNameValue, IStyleProp, ISymbioteEvent, IViewStyle } from '@symbiote-native/engine';
+export interface ISafeAreaViewProps extends IAccessibilityProps, IAriaProps {
+    style?: IStyleProp<IViewStyle>;
+    id?: string;
+    class?: IClassNameValue;
+    onLayout?: (event: ISymbioteEvent) => void;
+    children?: JSX.Element;
+}

package/build/components/safe-area-view-props.js

@@ -0,0 +1,5 @@
+// The `<safe-area-view>` tag's prop surface. The wrapper forwarded a bag and nothing else — the
+// host does all the inset math, there is no JS-side layout anywhere in this project, and the
+// `id -> nativeID` alias plus the aria/role fold both run below the adapter (`foldHostBag` and the
+// engine's `fabricProps`). So there was nothing left for a component to hold.
+export {};