@symbiote-native/solid 1.0.0 → 2.0.0

package/build/components/input-accessory-view.jsx

@@ -1,39 +0,0 @@
-// InputAccessoryView — the Solid lifecycle half (iOS). The host-node assembly (nativeID /
-// backgroundColor / style / passthrough forwarding onto `symbiote-input-accessory-view`) lives
-// framework-agnostic in @symbiote-native/components' renderInputAccessoryView and is shared
-// verbatim with React, Vue and Svelte; Solid supplies only the reactivity and the children.
-//
-// REAL JSX, NOT descriptorToSolid — the same rule View and SafeAreaView follow. The render fn
-// returns a host with ZERO structural children by contract; the toolbar content is a live Solid
-// subtree only the reconciler can reduce, so the tag stays literal and the shared fn contributes
-// its PROPS. The literal tag is safe because renderInputAccessoryView's `type` is a constant.
-//
-// NOTHING here destructures `props` at setup. Solid props are getters and a component body runs
-// ONCE; splitProps keeps both halves reactive, and every read happens inside the bag accessor
-// that `spread` re-runs as a render effect on the SAME host node.
-import { splitProps } from 'solid-js';
-import { renderInputAccessoryView, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { withStableKeys } from '../utils/stable-keys.js';
-export function InputAccessoryView(props) {
-    const [local, rest] = splitProps(props, [
-        'children',
-        'nativeID',
-        'backgroundColor',
-        'style',
-    ]);
-    // withStableKeys is load-bearing twice over: renderInputAccessoryView emits `nativeID` and
-    // `backgroundColor` CONDITIONALLY, and resolveAccessibilityProps has two branches with
-    // different key sets. Solid's `spread` has no removal pass, so a key that vanishes between
-    // runs would keep its last value on the native view forever (see utils/stable-keys.ts).
-    const bag = withStableKeys(() => renderInputAccessoryView({
-        nativeID: local.nativeID,
-        backgroundColor: local.backgroundColor,
-        style: local.style,
-        // This component owns its host element rather than rendering through a View, so folding
-        // aria/role into the canonical accessibility* props is its own job, like Image's.
-        passthrough: { ...resolveAccessibilityProps(rest) },
-    }).props);
-    return (<symbiote-input-accessory-view {...bag()}>
-      {local.children}
-    </symbiote-input-accessory-view>);
-}

package/build/components/pressable.jsx

@@ -1,211 +0,0 @@
-// 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.jsx

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

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

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

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

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

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

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

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

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

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