@symbiote-native/solid 0.0.1 → 0.1.0

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

@@ -0,0 +1,152 @@
+// KeyboardAvoidingView — the Solid lifecycle half. It composes a wrapper View and shifts it out of
+// the keyboard's way as the keyboard shows/hides. The inset math (readKeyboardFrame /
+// readLayoutFrame / computeInset) and the behavior → style/structure decision
+// (resolveKeyboardAvoidingLayout) are framework-agnostic and live in @symbiote-native/components,
+// shared verbatim with React, Vue, Svelte and Angular. Solid supplies only the reactivity: one
+// signal for the inset, three plain variables for the measured frame and the cross-fade setting, a
+// subscribe-at-setup / onCleanup pair over the Keyboard module, and the element assembly around its
+// own children.
+//
+// render-keyboard-avoiding-view.ts deliberately returns a layout DESCRIPTION rather than a
+// Descriptor tree — KAV wraps a live user subtree, which is the case the render-fn boundary rules
+// OUT of core (.claude/rules/component-render-fn-boundary.md). So descriptorToSolid has nothing to
+// do here, exactly as in View and Pressable; the two structural shapes ('nested' vs 'wrapper') are
+// written directly as the two branches at the bottom.
+//
+// NO whenCommitted anywhere: KAV issues no imperative native call. It only reads `onLayout`, and the
+// engine raises the native layout flag itself the moment a listener rides the prop bag — an event
+// cannot arrive before the view exists, so there is no pre-commit window to retry across.
+//
+// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE; every
+// read below sits inside an accessor, a memo, or an event handler — including
+// `keyboardVerticalOffset`, which is read at EVENT time so a changed offset applies to the next
+// 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 { Keyboard, Platform, dlog, } from '@symbiote-native/engine';
+import { View } from './view.jsx';
+// 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.
+const HANDLED_PROPS = [
+    'behavior',
+    'enabled',
+    'keyboardVerticalOffset',
+    'contentContainerStyle',
+    'style',
+    'onLayout',
+    'children',
+];
+export function KeyboardAvoidingView(props) {
+    const [local, rest] = splitProps(props, HANDLED_PROPS);
+    const [inset, setInset] = createSignal(0);
+    // Plain variables, not signals: a re-measure alone must not repaint anything. They only feed the
+    // NEXT keyboard event's math, which is what re-runs the layout memo. Same shape as React's
+    // frameRef/initialHeightRef, Vue's `let frame` and Svelte's non-$state pair.
+    let frame;
+    let initialHeight;
+    // A device accessibility setting, not state: it cannot change mid-session, and nothing should
+    // repaint when the promise lands. So a plain `let` rather than a signal — the same reason `frame`
+    // above is one. It is read at EVENT time, by which point the microtask has long resolved; a
+    // keyboard event that somehow beat it just sees the `false` default, which is the ordinary math.
+    //
+    // Through the shared reader, not AccessibilityInfo directly: the engine's getter REJECTS on a
+    // native error (RN parity), and nothing awaits this call, so a rejection here would surface as an
+    // unhandled promise. readPrefersCrossFadeTransitions owns that fallback once for all five adapters
+    // and answers false, which is also what a missing module and an Android host answer.
+    let prefersCrossFadeTransitions = false;
+    void readPrefersCrossFadeTransitions().then(enabled => {
+        prefersCrossFadeTransitions = enabled;
+    });
+    const onShow = (payload) => {
+        const keyboard = readKeyboardFrame(payload);
+        const offset = local.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET;
+        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
+            // it is live: in 'height' mode the wrapper is SHRUNK by it, so the next onLayout reports a
+            // 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(),
+            prefersCrossFadeTransitions,
+        });
+        dlog(`KeyboardAvoidingView show -> inset ${next}`);
+        setInset(next);
+    };
+    const onHide = () => {
+        dlog('KeyboardAvoidingView hide -> inset 0');
+        setInset(0);
+    };
+    // TWO listeners, never three, and their names come from the host (RN KeyboardAvoidingView.js):
+    // iOS takes the WILL pair so the view rides up with the keyboard animation instead of snapping
+    // into place after it; Android has no will-notifications and keeps the DID pair. The change-frame
+    // notification is deliberately absent — RN's own comment says an undocked, split or floating iOS
+    // keyboard emits it BEFORE the hide, so listening to it applies a frame captured mid-dismissal.
+    //
+    // Subscribed in the setup body, which runs once per mount — Solid's counterpart to React's
+    // mount-effect and Vue's onMounted. onCleanup runs on dispose (render.ts's teardown disposes the
+    // whole root), so an unmount removes exactly the listeners this mount added; leaking them would
+    // leave a dead closure calling setInset on a disposed signal on every keystroke.
+    const events = keyboardAvoidingEventNamesFor(Platform.OS);
+    const subscriptions = [
+        Keyboard.addListener(events.show, onShow),
+        Keyboard.addListener(events.hide, onHide),
+    ];
+    onCleanup(() => {
+        for (const subscription of subscriptions)
+            subscription.remove();
+    });
+    const handleLayout = (event) => {
+        const measured = readLayoutFrame(event.nativeEvent.layout);
+        if (measured !== undefined) {
+            frame = measured;
+            if (initialHeight === undefined)
+                initialHeight = measured.height;
+        }
+        local.onLayout?.(event);
+    };
+    const layout = createMemo(() => resolveKeyboardAvoidingLayout({
+        behavior: local.behavior,
+        // When disabled the inset is forced to 0, so every behavior mode renders untouched. `inset()`
+        // is not read at all on that branch, so a disabled KAV does not even subscribe to the signal;
+        // re-enabling re-runs this memo through the `local.enabled` getter and picks the value up.
+        effectiveInset: local.enabled === false ? 0 : inset(),
+        initialHeight,
+        style: local.style,
+        contentContainerStyle: local.contentContainerStyle,
+    }));
+    // What keeps the children alive across a keystroke. Solid has no reconciler between this file and
+    // the host nodes — `insert` REPLACES a subtree (.claude/rules/solid-descriptor-bridge.md §4) — and
+    // the branch below runs inside the wrapper's `insert` render effect. `layout()` returns a fresh
+    // object on every keyboard event, so anything that lets it reach that effect tears the wrapped
+    // subtree down and rebuilds it on every show/hide: typically the form the user is typing in, which
+    // loses focus mid-keystroke. createMemo's default `===` equality stops the churn at the BOOLEAN —
+    // it only notifies when the structure actually flips, i.e. when `behavior` moves in or out of
+    // 'position'.
+    //
+    // babel-preset-solid's `wrapConditionals` (on by default) would memoize the condition of the
+    // ternary below on its own, so the inline form happens to be safe too. Naming the memo makes that
+    // guarantee local instead of a compiler flag nobody reads, and it survives the refactor that
+    // actually breaks it — measured: moving the same branch into a plain `renderContent()` helper (the
+    // shape Pressable uses) defeats wrapConditionals and rebuilds the subtree on every keyboard event.
+    const isNested = createMemo(() => layout().kind === 'nested');
+    // The inset reaches the host as a PROP instead: `spread` runs a per-key diff on the SAME element,
+    // so nothing is rebuilt.
+    const innerStyle = () => {
+        const resolved = layout();
+        return resolved.kind === 'nested' ? resolved.innerStyle : undefined;
+    };
+    const wrapperProps = createMemo(() => ({
+        ...rest,
+        style: layout().wrapperStyle,
+        // Last, so KAV's own measure always runs; the caller's handler is invoked from inside it.
+        onLayout: handleLayout,
+    }));
+    // '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>);
+}

package/build/components/modal.d.ts

@@ -0,0 +1,24 @@
+import type { JSX } from '../jsx-runtime';
+import { type IAccessibilityProps, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalPresentationStyle } from '@symbiote-native/components';
+import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
+export type { IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from '@symbiote-native/components';
+export interface IModalProps extends IAccessibilityProps, IAriaProps {
+    visible?: boolean;
+    transparent?: boolean;
+    backdropColor?: string;
+    animationType?: IModalAnimationType;
+    presentationStyle?: IModalPresentationStyle;
+    supportedOrientations?: ReadonlyArray<IModalOrientation>;
+    hardwareAccelerated?: boolean;
+    statusBarTranslucent?: boolean;
+    navigationBarTranslucent?: boolean;
+    allowSwipeDismissal?: boolean;
+    onShow?: () => void;
+    onDismiss?: () => void;
+    onRequestClose?: () => void;
+    onOrientationChange?: (event: ISymbioteEvent) => void;
+    style?: IStyleProp<IViewStyle>;
+    class?: IClassNameValue;
+    children?: JSX.Element;
+}
+export declare function Modal(props: IModalProps): JSX.Element;

package/build/components/modal.jsx

@@ -0,0 +1,125 @@
+// Modal — the Solid lifecycle half. RCTModalHostView is an ordinary Fabric host node committing
+// through the SAME childSet as the rest of the tree (no second JS surface, no portal). The style
+// math (the backdrop override, the container/host styles, the presentationStyle default), the
+// visible gate, and the keep-alive reducer all live framework-agnostic in
+// @symbiote-native/components (state/modal.ts + view/render-modal.ts) and are shared verbatim with
+// React, Vue and Svelte. Solid supplies only the reactivity: a signal over the keep-alive state, a
+// post-render effect driving the visible→hidden transition, and the two host tags renderModal's
+// fixed shape resolves to.
+//
+// A FLAT FILE, not a folder: Modal has no platform variant to select by filename. Every platform
+// difference it carries is a PROP (supportedOrientations/allowSwipeDismissal are iOS-read,
+// hardwareAccelerated/statusBarTranslucent/navigationBarTranslucent Android-read) forwarded by name
+// to the one host, exactly as React's, Vue's and Svelte's single-file Modals do — unlike Switch,
+// whose native prop NAMES and snap-back command genuinely differ per host (symbiote-file-layout:
+// only a real platform/shared group gets a folder).
+//
+// WHY HAND-AUTHORED JSX AND NOT descriptorToSolid. Modal takes `children` — a live subtree of the
+// 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
+// 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.
+//
+// `Show` IS IMPORTED FROM solid-js ON PURPOSE. babel-preset-solid resolves an un-imported control-
+// flow name against the renderer module instead, and renderer.ts exports no `Show` — the bundle
+// still builds and `createComponent(undefined, …)` throws at RUNTIME, far from the JSX that caused
+// it (.claude/rules/solid-descriptor-bridge.md §3).
+//
+// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE; every
+// read below sits inside an accessor or an effect. The single deliberate exception is the reducer
+// SEED, which is a mount-time value by definition (React's useReducer lazy init and Svelte's
+// $state(...) initializer read it exactly once too).
+import { createEffect, createSignal, Show, splitProps } from 'solid-js';
+import { createDescriptorShapeGuard, createInitialModalState, modalReducer, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
+import { dlog, } from '@symbiote-native/engine';
+import { withStableKeys } from '../utils/stable-keys.js';
+// Read by Modal itself; everything else (the four DirectEvents, testID/nativeID, every
+// accessibility* and aria-* field) forwards onto the host node through `passthrough`, exactly as
+// React's `...passthrough` rest does.
+const HANDLED_PROPS = [
+    'visible',
+    'transparent',
+    'backdropColor',
+    'animationType',
+    'presentationStyle',
+    'supportedOrientations',
+    'hardwareAccelerated',
+    'statusBarTranslucent',
+    'navigationBarTranslucent',
+    'allowSwipeDismissal',
+    'style',
+    'class',
+    'children',
+];
+const shape = createDescriptorShapeGuard('Modal');
+export function Modal(props) {
+    const [local, rest] = splitProps(props, HANDLED_PROPS);
+    const isVisible = () => local.visible === true;
+    // The keep-alive seed is a mount-time value by contract (createInitialModalState: a modal that
+    // starts visible is rendered, one that starts hidden contributes no node), so this one read
+    // outside an accessor is correct rather than the frozen-props bug.
+    const [state, setState] = createSignal(createInitialModalState(isVisible()));
+    // createEffect, not createRenderEffect: it runs AFTER the render that used the OLD state, which
+    // is the position React's useEffect, Vue's flush:'post' watch and Svelte's $effect all occupy —
+    // so a visible→hidden transition renders once more with isRendered still true (the keep-alive
+    // frame) before this drops it. A render effect would unmount immediately and kill the keep-alive.
+    // The reducer is identity-stable, so the mount run and any no-op transition write the same object
+    // back and nothing downstream recomputes.
+    //
+    // As on Svelte, and for the same reason: under this adapter's microtask-coalesced requestCommit()
+    // the whole cascade settles inside one flush, so the keep-alive frame is real but never lands as
+    // its own Fabric commit the way React's synchronous per-render commit makes it.
+    createEffect(() => {
+        setState(current => modalReducer(current, isVisible() ? { type: 'show' } : { type: 'hide' }));
+    });
+    const shouldRender = () => shouldRenderModal(isVisible(), state());
+    createEffect(() => {
+        if (!shouldRender())
+            dlog('Modal hidden -> no node committed');
+    });
+    // A plain accessor rather than a createMemo, unlike descriptor-to-solid.ts. A memo runs EAGERLY
+    // at creation, which would paint a descriptor (and emit renderModal's "committing" dlog) for a
+    // modal that is hidden and commits nothing. Read from inside the two `spread` render effects
+    // instead, it never runs at all while `Show` is closed; the cost is that a change recomputes this
+    // pure object literal twice, once per bag.
+    const descriptor = () => renderModal({
+        visible: local.visible,
+        transparent: local.transparent,
+        backdropColor: local.backdropColor,
+        animationType: local.animationType,
+        presentationStyle: local.presentationStyle,
+        supportedOrientations: local.supportedOrientations,
+        hardwareAccelerated: local.hardwareAccelerated,
+        statusBarTranslucent: local.statusBarTranslucent,
+        navigationBarTranslucent: local.navigationBarTranslucent,
+        allowSwipeDismissal: local.allowSwipeDismissal,
+        style: local.style,
+        passthrough: resolveAccessibilityProps(rest),
+    });
+    // root = symbiote-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;
+        if (first === undefined)
+            throw shape.error('the container child disappeared');
+        return shape.asElement(first);
+    };
+    // withStableKeys on both bags because `passthrough` goes through resolveAccessibilityProps, whose
+    // two branches emit DIFFERENT key sets — and Solid's `spread` walks only the CURRENT keys with no
+    // removal pass, so a vanished key would keep its last value on the native view forever
+    // (.claude/rules/solid-descriptor-bridge.md §1).
+    const hostBag = withStableKeys(() => descriptor().props);
+    const containerBag = withStableKeys(() => ({
+        ...container().props,
+        class: local.class,
+    }));
+    return (<Show when={shouldRender()}>
+      <symbiote-modal {...hostBag()}>
+        <symbiote-view {...containerBag()}>{local.children}</symbiote-view>
+      </symbiote-modal>
+    </Show>);
+}

package/build/components/pressable.d.ts

@@ -0,0 +1,30 @@
+import { type Accessor } 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';
+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;
+    onPressOut?: IPressHandler;
+    onPressMove?: IPressHandler;
+    onLongPress?: IPressHandler;
+    delayLongPress?: number;
+    disabled?: boolean;
+    cancelable?: boolean;
+    hitSlop?: IRectOffset;
+    pressRetentionOffset?: IRectOffset;
+    unstable_pressDelay?: number;
+    android_ripple?: IPressableAndroidRippleConfig;
+    android_disableSound?: boolean;
+    onHoverIn?: IPressHandler;
+    onHoverOut?: IPressHandler;
+    delayHoverIn?: number;
+    delayHoverOut?: number;
+    style?: IPressableStyle;
+    class?: IClassNameValue;
+    children?: IPressableChildren;
+}
+export declare function Pressable(props: IPressableProps): JSX.Element;

package/build/components/pressable.jsx

@@ -0,0 +1,185 @@
+// Pressable — the Solid lifecycle half. The press lifecycle (the long-press timer, the
+// unstable_pressDelay deferral, the pressRetentionOffset drift test, the suppression flags) lives
+// in @symbiote-native/components/state as a pure machine over a runtime + host; the render
+// decisions (which responder listeners the View carries, the disabled→accessibilityState fold, the
+// ripple prop) in @symbiote-native/components/view. Both are shared verbatim with React, Vue and
+// Svelte. Solid supplies only the reactivity: a signal for `pressed`, a setup-scope object for the
+// press runtime, a plain variable for the responder node, and one memo that rebuilds the handler
+// bag when the caller's config changes.
+//
+// THE RESPONDER EVENTS ARE NEVER NAMED AS EVENTS HERE. buildPressableListeners returns a flat bag
+// (`onPress`, `onStartShouldSetResponder`, `onResponderMove`, …) which rides into View's prop bag
+// and reaches the engine through routeProp, which decides prop-vs-event from the node's ViewConfig
+// and attaches the responder protocol itself (symbiote-engine-core §2). An adapter-side `onX` check
+// would both duplicate that and get the edge cases wrong.
+//
+// Pressable composes View rather than painting its own host tag, exactly as React's and Vue's do —
+// so the aria/role fold, the class+style merge and the vanished-key widening (utils/stable-keys)
+// all happen once, in View. That also means there is no renderPressable() Descriptor to bridge:
+// `children` is a live Solid subtree, which is the case the render-fn boundary rules OUT of core
+// (.claude/rules/component-render-fn-boundary.md).
+//
+// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE, so a
+// destructure would freeze the Pressable at its mount-time config; every read below sits inside an
+// accessor, a memo or an event handler.
+import { createEffect, createMemo, createSignal, splitProps, untrack, } from 'solid-js';
+import { buildPressableListeners, createPressHandlers, createPressRuntime, noteHoverNoop, resolveDisabledAccessibilityState, rippleProps, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
+import { dlog, } from '@symbiote-native/engine';
+import { View } from './view.jsx';
+// Read by Pressable itself; everything else forwards onto View. The user's press callbacks MUST be
+// split off — they are pure JS, and it is the machine's SYNTHESIZED handlers that go on the host.
+const HANDLED_PROPS = [
+    'onPress',
+    'onPressIn',
+    'onPressOut',
+    'onPressMove',
+    'onLongPress',
+    'delayLongPress',
+    'disabled',
+    'cancelable',
+    'pressRetentionOffset',
+    'unstable_pressDelay',
+    'android_ripple',
+    'android_disableSound',
+    'onHoverIn',
+    'onHoverOut',
+    'delayHoverIn',
+    'delayHoverOut',
+    'accessibilityState',
+    'style',
+    'children',
+];
+// `hitSlop` is deliberately NOT in that list: the machine reads it for the retention test AND the
+// host needs it to enlarge the touch target, so it forwards through `rest` untouched.
+export function Pressable(props) {
+    const [local, rest] = splitProps(props, HANDLED_PROPS);
+    const [pressed, setPressed] = createSignal(false);
+    // The mutable press runtime (in-flight timers, suppression flags, measured region). A plain
+    // setup-scope object, never a signal: the machine mutates it on every event and nothing reads it
+    // reactively — same shape as Vue's setup-scope runtime and Svelte's plain `const`.
+    const runtime = createPressRuntime();
+    // The responder node, held by IDENTITY in a plain variable. A store or a deep proxy would become
+    // a different key than the one the engine's commit mirror holds, and measure() would silently
+    // no-op (symbiote-engine-core §3).
+    let responder = null;
+    const attachRef = (node) => {
+        responder = node;
+    };
+    // The lifecycle seam the machine fills: flip the reactive `pressed` cell, and expose the
+    // responder's raw frame-measure. Before the first commit the node has no Fabric tag, so measure()
+    // no-ops and the machine falls back to its radius test — the same degradation every adapter has,
+    // and not a whenCommitted case: the measure is triggered by a touch, which cannot arrive before
+    // the view exists.
+    const host = {
+        setPressed,
+        getMeasureFn: () => {
+            const node = responder;
+            if (node === null)
+                return undefined;
+            return callback => {
+                node.measure(callback);
+            };
+        },
+        schedule: (callback, ms) => {
+            const id = setTimeout(callback, ms);
+            return () => {
+                clearTimeout(id);
+            };
+        },
+    };
+    // Rebuilt when the caller's config changes (the closures capture live values); the runtime
+    // persists across rebuilds, so an in-flight timer or drift flag survives one. Deliberately does
+    // NOT read `pressed` — a press must not churn the handler identities the host node holds.
+    const handlers = createMemo(() => createPressHandlers({
+        onPress: local.onPress,
+        onPressIn: local.onPressIn,
+        onPressOut: local.onPressOut,
+        onPressMove: local.onPressMove,
+        onLongPress: local.onLongPress,
+        delayLongPress: local.delayLongPress ?? DEFAULT_DELAY_LONG_PRESS_MS,
+        unstable_pressDelay: local.unstable_pressDelay ?? 0,
+        hitSlop: rest.hitSlop,
+        pressRetentionOffset: local.pressRetentionOffset,
+    }, runtime, host));
+    createEffect(() => {
+        noteHoverNoop(local.onHoverIn, local.onHoverOut);
+    });
+    // Reading `pressed` sits INSIDE the function branch on purpose: a static style must not make the
+    // prop bag depend on the press signal, or every touch would re-diff and re-commit the whole bag
+    // for nothing. Unlike the children case below, reading it here is SAFE even in the function form
+    // — the value feeds viewProps, a prop bag, and a prop bag reaches the host through `spread`,
+    // which is a per-key diff on the SAME element. Nothing is rebuilt, so nothing can be rebuilt
+    // mid-gesture.
+    const pressStyle = () => {
+        const style = local.style;
+        if (typeof style !== 'function')
+            return style;
+        return style({ pressed: pressed() });
+    };
+    const viewProps = createMemo(() => {
+        const disabled = local.disabled;
+        const bag = {
+            ...rest,
+            style: pressStyle(),
+            accessibilityState: resolveDisabledAccessibilityState(local.accessibilityState, disabled),
+        };
+        // Forwarded under RN's own key; inert on iOS.
+        if (local.android_disableSound !== undefined) {
+            bag.android_disableSound = local.android_disableSound;
+        }
+        // Last, so the synthesized responder listeners win over anything of the same name in `rest`.
+        // When disabled the bag is EMPTY — every listener key vanishes, and View's withStableKeys
+        // widens it back to `undefined`, which routeProp treats as a delete. Without that widening a
+        // Pressable that became disabled would keep its old listeners on the native view forever
+        // (.claude/rules/solid-descriptor-bridge.md §1).
+        Object.assign(bag, buildPressableListeners(handlers(), {
+            disabled,
+            cancelable: local.cancelable,
+        }));
+        return bag;
+    });
+    // A memo, not a bare `() => ({ pressed: pressed() })`: two leaves reading `state()` in the same
+    // press must see the same object, and an unchanged press must not hand out a fresh one.
+    const pressState = createMemo(() => ({ pressed: pressed() }));
+    // WHY AN ACCESSOR AND NOT `{ pressed: pressed() }`. Solid has no reconciler between what this
+    // file returns and the host nodes — `insert` REPLACES a subtree, it never diffs one (the same
+    // fact descriptor-to-solid.ts opens with). resolveChildren runs inside View's `insert` render
+    // effect, so reading `pressed()` there put the press signal in that effect's dependency set:
+    // every touch tore the child subtree down and built a fresh one. On device that rebuild landed
+    // between `pressIn` and the native responder grant, the grant was lost, the gesture died, and
+    // `pressed` stayed true — the "fires on every other tap, label stuck on its pressed text"
+    // report. Vue diffs the slot's vnodes, Svelte patches a Snippet in place, Angular updates a
+    // template context; all three reuse the nodes underneath. Solid has no such layer, so the
+    // reactivity must cross the boundary as an accessor and only the leaf that reads it re-runs.
+    //
+    // The call is UNTRACKED and happens once, which is exactly how Solid core treats its own render
+    // props: `<For>` runs the map fn under createRoot, and createRoot nulls the Listener. A signal
+    // read at the top level of the child function therefore does not re-run it — nest it in the JSX
+    // (or a <Show>) like anywhere else in Solid.
+    const resolveChildren = () => {
+        const children = local.children;
+        if (typeof children !== 'function')
+            return children;
+        // A zero-argument accessor is an ordinary Solid JSX child (JSX.Element covers `() => Element`),
+        // not a render prop, and `typeof` cannot tell the two apart — arity can. Handing it back
+        // unread lets `insert` wrap it in its own render effect, which keeps it reactive; calling it
+        // here, under untrack, would freeze it at its first value.
+        if (children.length === 0)
+            return () => children(pressState);
+        return untrack(() => children(pressState));
+    };
+    // android_ripple rides a dedicated inner View — Android's ReactViewManager reads the ripple
+    // background off a child, not off the responder itself. rippleProps() returns undefined off
+    // Android, so the child renders unwrapped, no extra node (RN Pressable.js: "inert on iOS").
+    const renderContent = () => {
+        const config = local.android_ripple;
+        const ripple = config !== undefined ? rippleProps(config) : undefined;
+        if (ripple === undefined)
+            return resolveChildren();
+        dlog('Pressable wrapping children in an android_ripple View');
+        return <symbiote-view {...ripple}>{resolveChildren()}</symbiote-view>;
+    };
+    return (<View ref={attachRef} {...viewProps()}>
+      {renderContent()}
+    </View>);
+}

package/build/components/refresh-control.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from '../jsx-runtime';
+import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import { type IClassNameValue } from '@symbiote-native/engine';
+export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
+    refreshing: boolean;
+    onRefresh?: () => void | Promise<void>;
+    tintColor?: string;
+    title?: string;
+    titleColor?: string;
+    progressViewOffset?: number;
+    colors?: readonly string[];
+    progressBackgroundColor?: string;
+    size?: 'default' | 'large';
+    enabled?: boolean;
+    class?: IClassNameValue;
+    children?: JSX.Element;
+}
+export declare function RefreshControl(props: IRefreshControlProps): JSX.Element;

package/build/components/refresh-control.jsx

@@ -0,0 +1,36 @@
+// RefreshControl — the Solid lifecycle half, and there is barely any: the component owns one host
+// tag and forwards its props onto it. On iOS `symbiote-refresh-control` resolves to Fabric's
+// PullToRefreshView, which lives INSIDE a ScrollView as a childless sibling before the content
+// container; on Android it is AndroidSwipeRefreshLayout and WRAPS the scroll view instead (an
+// Android ScrollView hosts exactly one child). Which of the two shapes is built is ScrollView's
+// job, not this file's — see scroll-view/shared.tsx's `refreshControlMode`.
+//
+// `refreshing` is a CONTROLLED prop: the parent owns it and pushes it down, and native reports the
+// gesture back through the direct `topRefresh` event. `onRefresh` therefore rides in the forwarded
+// bag untouched — routeProp asks the node's ViewConfig whether `onRefresh` is an event and attaches
+// it as a listener, which is why nothing here inspects the `on` prefix itself
+// (symbiote-engine-core §2).
+//
+// FLAT, not a folder: the file-layout rule gives a module its own folder only when it has real
+// platform (`.ios`/`.android`) or `-shared` variants. There is no JS-side platform branch here —
+// every prop forwards to the native node, which reads what it understands and ignores the rest, so
+// the Android-only spinner props below are harmless on iOS and vice versa.
+import { splitProps } from 'solid-js';
+import { resolveAccessibilityProps, } from '@symbiote-native/components';
+import { dlog } from '@symbiote-native/engine';
+import { withStableKeys } from '../utils/stable-keys.js';
+export function RefreshControl(props) {
+    // `children` is pulled out rather than left in the bag: spread skips it anyway, but leaving it in
+    // would make the bag accessor re-run whenever the child subtree changed. Same split View makes.
+    const [local, rest] = splitProps(props, ['children']);
+    // withStableKeys because resolveAccessibilityProps has two branches with DIFFERENT key sets — it
+    // returns its input untouched while no aria-* alias holds a value, and a fully-blanked bag once
+    // one does. Solid's `spread` walks only the current keys and has no removal pass, so a key that
+    // vanishes would keep its last value on the native view forever
+    // (.claude/rules/solid-descriptor-bridge.md §1).
+    const bag = withStableKeys(() => ({ ...resolveAccessibilityProps(rest) }));
+    dlog('RefreshControl -> PullToRefreshView');
+    return (<symbiote-refresh-control {...bag()}>
+      {local.children}
+    </symbiote-refresh-control>);
+}

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

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

package/build/components/safe-area-view.jsx

@@ -0,0 +1,24 @@
+// SafeAreaView — the native view that insets its children past the notch, the rounded corners and
+// the system bars. There is no JS-side inset math anywhere in this project: the host does it, and
+// every adapter's job is only to put style + children on the `symbiote-safe-area-view` intrinsic.
+//
+// So this is a View twin, and ./view.tsx carries the reasoning they share (why the file is real
+// JSX, why nothing is destructured at setup, why children and ref are pulled out of the bag).
+// The one thing worth repeating: there is no renderSafeAreaView() in @symbiote-native/components
+// and there must not be (.claude/rules/component-render-fn-boundary.md) — `children` is a live
+// Solid subtree that flows through the reconciler and is never reduced back to a Descriptor.
+//
+// The bag goes through withStableKeys because resolveAccessibilityProps has two branches with
+// DIFFERENT key sets, and Solid's `spread` has no removal pass — see utils/stable-keys.ts.
+import { splitProps } from 'solid-js';
+import { resolveAccessibilityProps, } from '@symbiote-native/components';
+import { dlog, } from '@symbiote-native/engine';
+import { withStableKeys } from '../utils/stable-keys.js';
+export function SafeAreaView(props) {
+    const [local, rest] = splitProps(props, ['children']);
+    dlog('SafeAreaView -> SafeAreaView');
+    const bag = withStableKeys(() => ({ ...resolveAccessibilityProps(rest) }));
+    return (<symbiote-safe-area-view {...bag()}>
+      {local.children}
+    </symbiote-safe-area-view>);
+}

package/build/components/scroll-view/index.android.d.ts

@@ -0,0 +1,2 @@
+export type { IScrollViewProps, IScrollViewHandle, IScrollViewHostPlatform, IStickyHeaderComponentType, IStickyHeaderComponentProps, } from './shared';
+export declare const ScrollView: (props: import("./shared").IScrollViewProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;

package/build/components/scroll-view/index.android.js

@@ -0,0 +1,11 @@
+// ScrollView on Android. An Android ScrollView accepts only ONE child, so a RefreshControl cannot
+// sit beside the content the way iOS allows ("addViewAt: failed to insert view … at index 1").
+// Instead the RefreshControl (AndroidSwipeRefreshLayout) WRAPS the scroll view, which nests inside
+// it with nestedScrollEnabled so the inner scroll takes the gesture before the refresh parent —
+// RN's own ScrollView.js android branch, and the same fact adapters/react's, adapters/vue's and
+// adapters/svelte's Android bindings encode. Metro picks this file on an Android host; no
+// Platform.OS read.
+import { createScrollView } from './shared.jsx';
+export const ScrollView = createScrollView({
+    refreshControlMode: 'wrap',
+});

package/build/components/scroll-view/index.d.ts

@@ -0,0 +1,2 @@
+export * from './index.ios';
+export { ScrollViewStickyHeader } from './sticky-header';

package/build/components/scroll-view/index.ios.d.ts

@@ -0,0 +1,2 @@
+export type { IScrollViewProps, IScrollViewHandle, IScrollViewHostPlatform, IStickyHeaderComponentType, IStickyHeaderComponentProps, } from './shared';
+export declare const ScrollView: (props: import("./shared").IScrollViewProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;