@symbiote-native/solid 0.0.1 → 1.0.0

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,31 @@
+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;
+export declare function TouchablePressable(props: IPressableProps): JSX.Element;

package/build/components/pressable.jsx

@@ -0,0 +1,211 @@
+// 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, onCleanup, createSignal, splitProps, untrack, } from 'solid-js';
+import { buildPressableListeners, createPressHandlers, createPressRuntime, disposePressRuntime, noteHoverNoop, resolveDisabledAccessibilityState, rippleProps, DEFAULT_DELAY_LONG_PRESS_MS, DEFAULT_MIN_PRESS_DURATION_MS, } from '@symbiote-native/components';
+import { dlog, } from '@symbiote-native/engine';
+import { setHostPressed } from '../renderer.js';
+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.
+function PressableImpl(props, minPressDuration) {
+    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 = {
+        // Two sinks for one fact, and both are needed. The signal drives the FRAMEWORK-visible half —
+        // a functional `style`, a render-prop child — which is what forces this element to stay a
+        // component at all. `setHostPressed` drives the ENGINE-visible half, so `.btn:active` applies
+        // to a refused Pressable exactly as it would to a lowered `symbiote-pressable`. That is what
+        // makes a refusal cost the component instance and NOT the pressed styling
+        // (`.claude/rules/host-primitive-tier.md`).
+        //
+        // Before the first commit `responder` is null and the engine call is skipped: nothing is
+        // painted yet, and a press cannot arrive before the view exists.
+        setPressed: next => {
+            setPressed(next);
+            if (responder !== null)
+                setHostPressed(responder, next);
+        },
+        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);
+            };
+        },
+        now: Date.now,
+    };
+    onCleanup(() => {
+        disposePressRuntime(runtime);
+    });
+    // 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,
+        minPressDuration,
+        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>);
+}
+export function Pressable(props) {
+    return PressableImpl(props, DEFAULT_MIN_PRESS_DURATION_MS);
+}
+// Relative-only composition seam; the public component barrel exports Pressable, never this.
+export function TouchablePressable(props) {
+    return PressableImpl(props, 0);
+}

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,11 @@
+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>;
+    id?: string;
+    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;

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

@@ -0,0 +1,8 @@
+// ScrollView on iOS. The RefreshControl (PullToRefreshView) is a CHILD of the scroll view, rendered
+// as a childless SIBLING BEFORE the content container — RN ScrollView.js's
+// `{refreshControl}{contentContainer}`, the same fact adapters/react's, adapters/vue's and
+// adapters/svelte's iOS bindings encode. Metro picks this file on an iOS host; no Platform.OS read.
+import { createScrollView } from './shared.jsx';
+export const ScrollView = createScrollView({
+    refreshControlMode: 'sibling',
+});

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

@@ -0,0 +1,9 @@
+// Base / default ScrollView: 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.
+//
+// ScrollViewStickyHeader is exported from here rather than from the platform files: it has no
+// platform branch of its own, and an app may compose it directly around a section instead of going
+// through `stickyHeaderIndices`.
+export * from './index.ios.js';
+export { ScrollViewStickyHeader } from './sticky-header.jsx';

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

@@ -0,0 +1,85 @@
+import { type Ref } from 'solid-js';
+import type { JSX } from '../../jsx-runtime';
+import { type IAccessibilityProps, type IAriaProps, type IScrollViewHandle } from '@symbiote-native/components';
+import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
+import { type IStickyHeaderComponentType } from './sticky-header';
+export type { IScrollViewHandle } from '@symbiote-native/components';
+export type { IStickyHeaderComponentType, IStickyHeaderComponentProps, } from './sticky-header';
+type IScrollHandler = (event: ISymbioteEvent) => void;
+export type IScrollViewHostPlatform = {
+    refreshControlMode: 'sibling' | 'wrap';
+};
+export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
+    style?: IStyleProp<IViewStyle>;
+    class?: IClassNameValue;
+    contentContainerStyle?: IStyleProp<IViewStyle> | string;
+    horizontal?: boolean;
+    scrollEnabled?: boolean;
+    showsVerticalScrollIndicator?: boolean;
+    showsHorizontalScrollIndicator?: boolean;
+    pagingEnabled?: boolean;
+    bounces?: boolean;
+    decelerationRate?: 'normal' | 'fast' | number;
+    scrollEventThrottle?: number;
+    contentInset?: {
+        top?: number;
+        left?: number;
+        bottom?: number;
+        right?: number;
+    };
+    contentOffset?: {
+        x: number;
+        y: number;
+    };
+    refreshControl?: JSX.Element;
+    removeClippedSubviews?: boolean;
+    onContentSizeChange?: (width: number, height: number) => void;
+    snapToInterval?: number;
+    snapToOffsets?: number[];
+    snapToAlignment?: 'start' | 'center' | 'end';
+    snapToStart?: boolean;
+    snapToEnd?: boolean;
+    disableIntervalMomentum?: boolean;
+    stickyHeaderIndices?: number[];
+    invertStickyHeaders?: boolean;
+    StickyHeaderComponent?: IStickyHeaderComponentType;
+    keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
+    maintainVisibleContentPosition?: {
+        minIndexForVisible: number;
+        autoscrollToTopThreshold?: number;
+    };
+    alwaysBounceHorizontal?: boolean;
+    alwaysBounceVertical?: boolean;
+    centerContent?: boolean;
+    scrollIndicatorInsets?: {
+        top?: number;
+        left?: number;
+        bottom?: number;
+        right?: number;
+    };
+    indicatorStyle?: 'default' | 'black' | 'white';
+    directionalLockEnabled?: boolean;
+    automaticallyAdjustKeyboardInsets?: boolean;
+    contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';
+    minimumZoomScale?: number;
+    maximumZoomScale?: number;
+    zoomScale?: number;
+    bouncesZoom?: boolean;
+    pinchGestureEnabled?: boolean;
+    nestedScrollEnabled?: boolean;
+    overScrollMode?: 'auto' | 'always' | 'never';
+    fadingEdgeLength?: number;
+    persistentScrollbar?: boolean;
+    endFillColor?: string;
+    onLayout?: IScrollHandler;
+    onScroll?: IScrollHandler;
+    onScrollBeginDrag?: IScrollHandler;
+    onScrollEndDrag?: IScrollHandler;
+    onMomentumScrollBegin?: IScrollHandler;
+    onMomentumScrollEnd?: IScrollHandler;
+    onScrollToTop?: IScrollHandler;
+    ref?: Ref<IScrollViewHandle>;
+    children?: JSX.Element;
+}
+export declare function createScrollView(platform: IScrollViewHostPlatform): (props: IScrollViewProps) => JSX.Element;