@symbiote-native/components 0.1.0

package/build/view/render-image.js

@@ -0,0 +1,298 @@
+import { dlog, flattenStyle, getNativeModule, Platform, } from '@symbiote-native/engine';
+import { el } from '../descriptor';
+// Default resolver: identity. RN's resolveAssetSource (which turns a require()
+// number into {uri, scale, width, height}) is wired in by the app at startup.
+let resolveSource = source => source;
+export function setImageSourceResolver(resolve) {
+    resolveSource = resolve;
+}
+// Resolve the source, then normalize to the array shape native expects. A single
+// object/number becomes a one-element array; an already-array source passes through.
+function normalizeSource(source) {
+    const resolved = resolveSource(source);
+    const sources = Array.isArray(resolved) ? resolved : [resolved];
+    dlog(`Image source resolved to ${JSON.stringify(sources)}`);
+    return sources;
+}
+// The HTTP headers the W3C aliases (crossOrigin / referrerPolicy) contribute to
+// every folded source, mirroring ImageSourceUtils.js getImageSourcesFromImageProps:
+// 'use-credentials' adds the credentials header; referrerPolicy adds Referrer-Policy.
+function headersFromAliases(view) {
+    const headers = {};
+    if (view.crossOrigin === 'use-credentials') {
+        headers['Access-Control-Allow-Credentials'] = 'true';
+    }
+    if (view.referrerPolicy !== undefined) {
+        headers['Referrer-Policy'] = view.referrerPolicy;
+    }
+    return headers;
+}
+// Expand a `srcSet` descriptor list into scaled sources, falling back to `src` for
+// the 1x slot when srcSet omits it. Direct port of getImageSourcesFromImageProps'
+// srcSet branch (ImageSourceUtils.js:48). Invalid scale tokens are skipped, matching
+// RN's parse-and-warn behavior.
+function expandSrcSet(srcSet, view, headers) {
+    const sources = [];
+    let useSrcForDefaultScale = true;
+    for (const entry of srcSet.split(', ')) {
+        const [uri, xScale = '1x'] = entry.split(' ');
+        if (!xScale.endsWith('x')) {
+            dlog(`Image srcSet: unsupported scale token "${xScale}", skipping`);
+            continue;
+        }
+        const scale = parseInt(xScale.slice(0, -1), 10);
+        if (Number.isNaN(scale))
+            continue;
+        if (scale === 1)
+            useSrcForDefaultScale = false;
+        sources.push({ uri, scale, width: view.width, height: view.height, ...{ headers } });
+    }
+    if (useSrcForDefaultScale && view.src !== undefined) {
+        sources.push({
+            uri: view.src,
+            scale: 1,
+            width: view.width,
+            height: view.height,
+            ...{ headers },
+        });
+    }
+    if (sources.length === 0)
+        dlog('Image srcSet: produced no valid sources');
+    return sources;
+}
+// Resolve the native `source` array from whichever of source / src / srcSet the
+// caller provided. Mirrors ImageSourceUtils.js getImageSourcesFromImageProps:
+// srcSet wins, then src, then a header-decorated source, then the plain source.
+// Always returns the array shape native expects (the same contract normalizeSource
+// guarantees), so the component never sends a bare object.
+function resolveSourceArray(view) {
+    const headers = headersFromAliases(view);
+    if (view.srcSet !== undefined) {
+        return expandSrcSet(view.srcSet, view, headers);
+    }
+    if (view.src !== undefined) {
+        return [{ uri: view.src, width: view.width, height: view.height, ...{ headers } }];
+    }
+    if (view.source === undefined) {
+        dlog('Image: no source / src / srcSet provided');
+        return [];
+    }
+    const sources = normalizeSource(view.source);
+    // A header-decorated single object source gets the headers merged in, per RN's
+    // `source.uri && headers` branch; the array/number shapes pass through untouched.
+    if (Object.keys(headers).length > 0 && sources.length === 1) {
+        const [only] = sources;
+        if (typeof only === 'object' && only !== null && typeof Reflect.get(only, 'uri') === 'string') {
+            return [{ ...only, headers }];
+        }
+    }
+    return sources;
+}
+function readStyleString(style, key) {
+    if (style === undefined)
+        return undefined;
+    // style is a StyleProp (possibly a nested array), so flatten before reading a key.
+    const flat = flattenStyle(style);
+    const value = Object.hasOwn(flat, key) ? flat[key] : undefined;
+    return typeof value === 'string' ? value : undefined;
+}
+// Resolve an asset source and read its single uri. RN forwards the Android
+// loading indicator as a bare uri string (`loadingIndicatorSrc`), not the
+// array shape the main source uses, so we resolve and pluck the uri.
+function readSourceUri(source) {
+    const [resolved] = normalizeSource(source);
+    if (typeof resolved === 'object' && resolved !== null) {
+        const uri = Reflect.get(resolved, 'uri');
+        if (typeof uri === 'string')
+            return uri;
+    }
+    return undefined;
+}
+// The iOS native module name RN registers this under (NativeImageLoaderIOS.js
+// resolves `TurboModuleRegistry.getEnforcing<Spec>('ImageLoader')`). Per the
+// symbiote invariant, a module name is only provable on a real host (a headless
+// fake answers to any name); this iOS name is device-verify-pending. See
+// .docs/native-module-platform-routing.md.
+const IMAGE_LOADER_MODULE = 'ImageLoader';
+let imageLoaderModule;
+function getImageLoader() {
+    if (imageLoaderModule === undefined) {
+        imageLoaderModule = getNativeModule(IMAGE_LOADER_MODULE);
+        dlog(`Image: ImageLoader module ${imageLoaderModule ? 'resolved' : 'NOT resolved (null)'}`);
+    }
+    return imageLoaderModule;
+}
+function isNumber(value) {
+    return typeof value === 'number';
+}
+// Narrow native's getSize result. The spec resolves a `[width, height]` array,
+// but tolerate a `{width, height}` object too (getSizeWithHeaders uses that shape).
+function toImageSize(result) {
+    if (Array.isArray(result) && isNumber(result[0]) && isNumber(result[1])) {
+        return { width: result[0], height: result[1] };
+    }
+    if (typeof result === 'object' && result !== null) {
+        const width = Reflect.get(result, 'width');
+        const height = Reflect.get(result, 'height');
+        if (isNumber(width) && isNumber(height))
+            return { width, height };
+    }
+    throw new Error(`Image: unexpected size result from native: ${JSON.stringify(result)}`);
+}
+function requireLoader(method) {
+    const loader = getImageLoader();
+    if (loader === null) {
+        throw new Error(`Image.${method}: ImageLoader native module is not available ` +
+            '(running headless or not linked on this host).');
+    }
+    return loader;
+}
+// Resolve image dimensions, optionally via success/failure callbacks. Always
+// returns the Promise too (RN returns void when a callback is passed, but a
+// promise-and-callback shape is friendlier and a strict superset).
+function getSize(uri, success, failure) {
+    const promise = Promise.resolve()
+        .then(() => requireLoader('getSize').getSize(uri))
+        .then(toImageSize);
+    if (typeof success === 'function') {
+        promise
+            .then(size => success(size.width, size.height))
+            .catch((error) => {
+            if (typeof failure === 'function')
+                failure(error);
+            else
+                dlog(`Image.getSize failed for ${uri}: ${String(error)}`);
+        });
+    }
+    return promise;
+}
+function getSizeWithHeaders(uri, headers, success, failure) {
+    const promise = Promise.resolve()
+        .then(() => requireLoader('getSizeWithHeaders').getSizeWithHeaders(uri, headers))
+        .then(toImageSize);
+    if (typeof success === 'function') {
+        promise
+            .then(size => success(size.width, size.height))
+            .catch((error) => {
+            if (typeof failure === 'function')
+                failure(error);
+            else
+                dlog(`Image.getSizeWithHeaders failed for ${uri}: ${String(error)}`);
+        });
+    }
+    return promise;
+}
+// Android keys an in-flight prefetch by a monotonic requestId (so abortRequest can
+// cancel it); RN's Image.android.js generates the same way. iOS ignores the arg.
+let prefetchRequestId = 0;
+// Download a remote image into the disk cache. Resolves to whether it succeeded.
+// `callback` receives the requestId (RN's Image.android.js shape) so the caller
+// can later pass it to abortPrefetch.
+async function prefetch(uri, callback) {
+    prefetchRequestId += 1;
+    const requestId = prefetchRequestId;
+    if (typeof callback === 'function')
+        callback(requestId);
+    const loader = requireLoader('prefetch');
+    return (Promise.resolve()
+        // Android's prefetchImage keys an abortable request on requestId; iOS takes ONLY the uri and
+        // throws on an extra arg (bridgeless TurboModule arg-count check). Match RN's per-platform call.
+        .then(() => Platform.OS === 'android'
+        ? loader.prefetchImage(uri, requestId)
+        : loader.prefetchImage(uri))
+        .then(result => result === true)
+        .catch((error) => {
+        dlog(`Image.prefetch failed for ${uri}: ${String(error)}`);
+        throw error;
+    }));
+}
+// Cancel an in-flight prefetch by the requestId prefetch handed back. Android
+// only (mirrors Image.android.js -> NativeImageLoaderAndroid.abortRequest); a
+// missing abortRequest (iOS, headless) is a no-op rather than a throw.
+function abortPrefetch(requestId) {
+    const loader = getImageLoader();
+    if (loader === null || typeof loader.abortRequest !== 'function') {
+        dlog(`Image.abortPrefetch(${requestId}): no abortRequest on this host, ignoring`);
+        return;
+    }
+    loader.abortRequest(requestId);
+}
+// Narrow native's queryCache result: an object mapping each known uri to its
+// cache status. Unknown statuses are dropped rather than trusted blindly.
+const CACHE_STATUS = {
+    memory: 'memory',
+    disk: 'disk',
+    'disk/memory': 'disk/memory',
+};
+function toCacheRecord(result) {
+    const record = {};
+    if (typeof result !== 'object' || result === null)
+        return record;
+    for (const key of Object.keys(result)) {
+        const value = Reflect.get(result, key);
+        if (typeof value === 'string' && Object.hasOwn(CACHE_STATUS, value)) {
+            record[key] = CACHE_STATUS[value];
+        }
+    }
+    return record;
+}
+async function queryCache(uris) {
+    return Promise.resolve()
+        .then(() => {
+        const loader = requireLoader('queryCache');
+        // The native queryCache never rejects (RCTImageLoader resolves getImageCacheStatus), so a
+        // rejection here is a JS↔native boundary fault: log whether the method is even callable and
+        // the arg shape, to tell "not a function" (interop gap) from a marshalling reject.
+        dlog(`Image.queryCache: typeof loader.queryCache=${typeof loader.queryCache} uris=${uris.length}`);
+        return loader.queryCache(uris);
+    })
+        .then(toCacheRecord)
+        .catch((error) => {
+        dlog(`Image.queryCache failed: ${String(error)}`);
+        throw error;
+    });
+}
+// PURE JS: run the currently-installed source resolver (the same machinery the
+// Image component uses via normalizeSource). RN's resolveAssetSource turns a
+// require() asset id into {uri, scale, …}; the app injects the real one with
+// setImageSourceResolver, and this exposes its output to callers directly.
+function resolveAssetSource(source) {
+    return resolveSource(source);
+}
+export const imageStatics = {
+    getSize,
+    getSizeWithHeaders,
+    prefetch,
+    abortPrefetch,
+    queryCache,
+    resolveAssetSource,
+};
+export function renderImage(view) {
+    // `width` / `height` aliases fold into style (ImageProps.js:195,202); explicit
+    // style keys win, matching RN's `{width, height}, ...style` ordering.
+    const foldedStyle = view.width === undefined && view.height === undefined
+        ? view.style
+        : [{ width: view.width, height: view.height }, view.style];
+    const mapped = {
+        ...view.passthrough,
+        style: foldedStyle,
+        source: resolveSourceArray(view),
+        resizeMode: view.resizeMode ?? readStyleString(view.style, 'resizeMode'),
+        tintColor: view.tintColor ?? readStyleString(view.style, 'tintColor'),
+    };
+    // `alt` is the accessibility text: it sets accessibilityLabel and marks the image
+    // accessible (Image.ios.js / Image.android.js: alt -> accessibilityLabel + accessible).
+    // An explicit accessibilityLabel (already folded into passthrough) still wins.
+    if (view.alt !== undefined) {
+        if (mapped.accessibilityLabel === undefined)
+            mapped.accessibilityLabel = view.alt;
+        mapped.accessible = true;
+    }
+    if (view.defaultSource !== undefined)
+        mapped.defaultSource = normalizeSource(view.defaultSource);
+    if (view.loadingIndicatorSource !== undefined) {
+        mapped.loadingIndicatorSrc = readSourceUri(view.loadingIndicatorSource);
+    }
+    dlog('Image -> RCTImageView');
+    return el('symbiote-image', mapped);
+}

package/build/view/render-input-accessory-view.d.ts

@@ -0,0 +1,9 @@
+import { type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import { type IDescriptor } from '../descriptor';
+export type IInputAccessoryViewViewProps = {
+    nativeID?: string;
+    backgroundColor?: string;
+    style?: IStyleProp<IViewStyle>;
+    passthrough: Record<string, unknown>;
+};
+export declare function renderInputAccessoryView(view: IInputAccessoryViewViewProps): IDescriptor;

package/build/view/render-input-accessory-view.js

@@ -0,0 +1,18 @@
+// InputAccessoryView: the render half (framework-agnostic, iOS). A real Fabric host node,
+// RCTInputAccessoryView, that docks its content above the keyboard. It is referenced by
+// `nativeID`, which a TextInput points at through its `inputAccessoryViewID` prop; native pairs
+// the two by id. There is no JS-side translation: style / nativeID / backgroundColor map straight
+// onto the intrinsic and the user children (injected by the adapter) nest under it. Shared
+// verbatim across adapters: React and Vue both bridge this Descriptor.
+import { dlog } from '@symbiote-native/engine';
+import { el } from '../descriptor';
+export function renderInputAccessoryView(view) {
+    const props = { ...view.passthrough, style: view.style };
+    if (view.nativeID !== undefined)
+        props.nativeID = view.nativeID;
+    if (view.backgroundColor !== undefined)
+        props.backgroundColor = view.backgroundColor;
+    dlog('InputAccessoryView -> RCTInputAccessoryView');
+    // Empty structural children: the adapter appends the user children directly under the host.
+    return el('symbiote-input-accessory-view', props, []);
+}

package/build/view/render-keyboard-avoiding-view.d.ts

@@ -0,0 +1,30 @@
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+export type IKeyboardAvoidingBehavior = 'height' | 'position' | 'padding';
+export declare const DEFAULT_VERTICAL_OFFSET = 0;
+export interface IMeasuredFrame {
+    y: number;
+    height: number;
+}
+export interface IKeyboardFrame {
+    screenY: number;
+    height: number;
+}
+export declare function readKeyboardFrame(payload: unknown): IKeyboardFrame | undefined;
+export declare function readLayoutFrame(layout: unknown): IMeasuredFrame | undefined;
+export declare function computeInset(frame: IMeasuredFrame | undefined, keyboard: IKeyboardFrame | undefined, verticalOffset: number): number;
+export type IKeyboardAvoidingLayout = {
+    kind: 'nested';
+    wrapperStyle?: IStyleProp<IViewStyle>;
+    innerStyle: IStyleProp<IViewStyle>;
+} | {
+    kind: 'wrapper';
+    wrapperStyle?: IStyleProp<IViewStyle>;
+};
+export interface IResolveKeyboardAvoidingLayoutParams {
+    behavior?: IKeyboardAvoidingBehavior;
+    effectiveInset: number;
+    initialHeight?: number;
+    style?: IStyleProp<IViewStyle>;
+    contentContainerStyle?: IStyleProp<IViewStyle>;
+}
+export declare function resolveKeyboardAvoidingLayout(params: IResolveKeyboardAvoidingLayoutParams): IKeyboardAvoidingLayout;

package/build/view/render-keyboard-avoiding-view.js

@@ -0,0 +1,75 @@
+// KeyboardAvoidingView: the pure logic + view-contract half (framework-agnostic). It owns
+// every piece that does NOT need a framework: the keyboard/frame inset math, the onLayout
+// frame read, and the behavior → style/structure decision. Each adapter supplies ONLY the
+// lifecycle (subscribe to the Keyboard module, measure via onLayout, hold the inset in its
+// reactive primitive) and assembles the wrapper element around its own opaque children.
+//
+// We do NOT emit a Descriptor tree here the way render-switch does, because KAV wraps
+// arbitrary user-provided children (React nodes / Vue slots) that the Descriptor model can't
+// carry. Instead we return a layout DESCRIPTION (which styles to apply and whether to nest)
+// and the adapter builds its own element tree with its children. Mirrors RN's
+// Libraries/Components/Keyboard/KeyboardAvoidingView.js inset/behavior logic.
+// RN's default keyboardVerticalOffset (KeyboardAvoidingView.js).
+export const DEFAULT_VERTICAL_OFFSET = 0;
+// RN rounds nothing here; 'height' mode collapses flex so the shrunk height holds.
+const COLLAPSED_FLEX = 0;
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+// Pull the keyboard's top edge (screenY) and height off the raw native payload. The shape is
+// the consumer's knowledge, so we narrow `unknown` here rather than trust a type, no `as`.
+// Returns undefined when the payload isn't a keyboard frame.
+export function readKeyboardFrame(payload) {
+    if (!isRecord(payload))
+        return undefined;
+    const end = payload.endCoordinates;
+    if (!isRecord(end))
+        return undefined;
+    const { screenY, height } = end;
+    if (typeof screenY !== 'number' || typeof height !== 'number')
+        return undefined;
+    return { screenY, height };
+}
+// Pull the measured wrapper frame ({ y, height }) off a raw onLayout layout object. Returns
+// undefined when the shape doesn't carry both numbers, so a bad payload never poisons the math.
+export function readLayoutFrame(layout) {
+    if (!isRecord(layout))
+        return undefined;
+    const { y, height } = layout;
+    if (typeof y !== 'number' || typeof height !== 'number')
+        return undefined;
+    return { y, height };
+}
+// RN's _relativeKeyboardHeight: how far up the view must move so it no longer overlaps the
+// keyboard. keyboardY is the keyboard's top edge minus the caller's vertical offset; the inset
+// is the overlap of the view's bottom past that edge, clamped at 0.
+export function computeInset(frame, keyboard, verticalOffset) {
+    if (frame === undefined || keyboard === undefined)
+        return 0;
+    const keyboardY = keyboard.screenY - verticalOffset;
+    return Math.max(frame.y + frame.height - keyboardY, 0);
+}
+// Map the behavior + effective inset onto the wrapper/inner styles and the nesting decision:
+// the framework-agnostic core of RN's render(). 'position' nests; the others adjust the
+// wrapper directly. 'height' shrinks the wrapper from its initial measured height (only while
+// the keyboard is up, matching RN).
+export function resolveKeyboardAvoidingLayout(params) {
+    const { behavior, effectiveInset, initialHeight, style, contentContainerStyle } = params;
+    if (behavior === 'position') {
+        return {
+            kind: 'nested',
+            wrapperStyle: style,
+            innerStyle: [contentContainerStyle, { bottom: effectiveInset }],
+        };
+    }
+    if (behavior === 'padding') {
+        return { kind: 'wrapper', wrapperStyle: [style, { paddingBottom: effectiveInset }] };
+    }
+    if (behavior === 'height' && effectiveInset > 0 && initialHeight !== undefined) {
+        return {
+            kind: 'wrapper',
+            wrapperStyle: [style, { height: initialHeight - effectiveInset, flex: COLLAPSED_FLEX }],
+        };
+    }
+    return { kind: 'wrapper', wrapperStyle: style };
+}

package/build/view/render-modal.d.ts

@@ -0,0 +1,23 @@
+import { type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
+import { type IDescriptor } from '../descriptor';
+export type IModalAnimationType = 'none' | 'slide' | 'fade';
+export type IModalPresentationStyle = 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';
+export type IModalOrientation = 'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right';
+export interface IModalOrientationChangeEvent {
+    orientation: 'portrait' | 'landscape';
+}
+export type IModalViewProps = {
+    visible?: boolean;
+    transparent?: boolean;
+    backdropColor?: string;
+    animationType?: IModalAnimationType;
+    presentationStyle?: IModalPresentationStyle;
+    supportedOrientations?: ReadonlyArray<IModalOrientation>;
+    hardwareAccelerated?: boolean;
+    statusBarTranslucent?: boolean;
+    navigationBarTranslucent?: boolean;
+    allowSwipeDismissal?: boolean;
+    style?: IStyleProp<IViewStyle>;
+    passthrough: Record<string, unknown>;
+};
+export declare function renderModal(view: IModalViewProps): IDescriptor;

package/build/view/render-modal.js

@@ -0,0 +1,70 @@
+// Modal: the render half (framework-agnostic). RCTModalHostView is an ordinary Fabric host
+// node: it lives in the SAME childSet and commits through the SAME completeRoot as the rest of
+// the tree. The native iOS/Android view presents its own window internally; there is no second
+// root or second surface on the JS side. So this is a thin render exactly like the others: it
+// maps to the `symbiote-modal` intrinsic the host config routes to ModalHostView, wrapping a
+// full-screen container View that holds the user children (injected by the adapter). Shared
+// verbatim: React and Vue both bridge this Descriptor; the keep-alive state lives in state/modal.ts.
+import { dlog } from '@symbiote-native/engine';
+import { el } from '../descriptor';
+// The full-screen box RN anchors the modal content in (Modal.js styles.container: [side]:0,
+// top:0, flex:1, backgroundColor:'white'). It is NOT position:absolute, it is a flex child that
+// fills the ModalHostView, whose shadow node self-sizes to the screen
+// (ModalHostViewComponentDescriptor sets the node size to screenSize). An absolute container with
+// only top/left would collapse to its content instead. The backdrop color is layered on at render
+// time so transparent/backdropColor win.
+const CONTAINER_STYLE = {
+    left: 0,
+    top: 0,
+    flex: 1,
+};
+// RN sets styles.modal (position:'absolute') on RCTModalHostView itself (Modal.js styles.modal +
+// style={styles.modal} on the host).
+const MODAL_HOST_STYLE = {
+    position: 'absolute',
+};
+const TRANSPARENT_BACKDROP = 'transparent';
+const OPAQUE_BACKDROP = 'white';
+const DEFAULT_ANIMATION_TYPE = 'none';
+// presentationStyle default (Modal.js: undefined -> 'fullScreen', but transparent flips it to
+// 'overFullScreen').
+const PRESENTATION_FULL_SCREEN = 'fullScreen';
+const PRESENTATION_OVER_FULL_SCREEN = 'overFullScreen';
+export function renderModal(view) {
+    // Only override backgroundColor when transparent or backdropColor are explicitly set, so these
+    // Modal-specific props take precedence over the generic style prop (Modal.js: containerStyles
+    // composed LAST in [styles.container, props.style, containerStyles]).
+    const backdropOverride = view.transparent === true
+        ? { backgroundColor: TRANSPARENT_BACKDROP }
+        : view.backdropColor !== undefined
+            ? { backgroundColor: view.backdropColor }
+            : {};
+    const containerStyle = [
+        { ...CONTAINER_STYLE, backgroundColor: OPAQUE_BACKDROP },
+        view.style,
+        backdropOverride,
+    ];
+    const resolvedPresentationStyle = view.presentationStyle ??
+        (view.transparent === true ? PRESENTATION_OVER_FULL_SCREEN : PRESENTATION_FULL_SCREEN);
+    dlog('Modal visible -> committing ModalHostView(container View)');
+    // collapsable:false keeps the container as a real shadow node (RN sets this so the wrapper is
+    // never flattened away under the host). Empty structural children: the adapter injects the
+    // user children UNDER this container, never as a direct sibling of the host.
+    const container = el('symbiote-view', { style: containerStyle, collapsable: false }, []);
+    return el('symbiote-modal', {
+        ...view.passthrough,
+        style: MODAL_HOST_STYLE,
+        transparent: view.transparent,
+        animationType: view.animationType ?? DEFAULT_ANIMATION_TYPE,
+        presentationStyle: resolvedPresentationStyle,
+        // Platform props named-forwarded to match RCTModalHostView (Modal.js ~336-350): iOS
+        // supportedOrientations/allowSwipeDismissal, Android hardwareAccelerated/
+        // statusBarTranslucent/navigationBarTranslucent.
+        supportedOrientations: view.supportedOrientations,
+        hardwareAccelerated: view.hardwareAccelerated,
+        statusBarTranslucent: view.statusBarTranslucent,
+        navigationBarTranslucent: view.navigationBarTranslucent,
+        allowSwipeDismissal: view.allowSwipeDismissal,
+        visible: view.visible,
+    }, [container]);
+}

package/build/view/render-pressable.d.ts

@@ -0,0 +1,8 @@
+import type { IAccessibilityStateValue } from '../accessibility-props';
+import type { IPressHandlers } from '../state/pressable';
+export declare function resolveDisabledAccessibilityState(accessibilityState: IAccessibilityStateValue | undefined, disabled: boolean | undefined): IAccessibilityStateValue | undefined;
+export declare function buildPressableListeners(handlers: IPressHandlers, options: {
+    disabled?: boolean;
+    cancelable?: boolean;
+}): Record<string, unknown>;
+export declare function noteHoverNoop(onHoverIn: unknown, onHoverOut: unknown): void;

package/build/view/render-pressable.js

@@ -0,0 +1,42 @@
+// Pressable: the render half (framework-agnostic). Pressable owns no host element of its own:
+// it composes the adapter's View (so children stay framework nodes), so this layer does not paint
+// a Descriptor. It resolves the two prop decisions that are identical across adapters: which
+// listeners the responder View carries (gated on disabled + cancelable), and how `disabled` folds
+// into accessibilityState. The adapter feeds these into its View element. Pure, no framework.
+import { dlog } from '@symbiote-native/engine';
+// RN merges `disabled` into the resolved accessibilityState so a disabled Pressable reports the
+// disabled state even if the caller passed none (Pressable.js: disabled != null ? {...state,
+// disabled} : state). Untouched when disabled is unset.
+export function resolveDisabledAccessibilityState(accessibilityState, disabled) {
+    return disabled !== undefined ? { ...accessibilityState, disabled } : accessibilityState;
+}
+// The listeners the responder View carries. When disabled, leave them off entirely. A press
+// never fires and pressed-state never flips, exactly as RN's disabled Pressable. cancelable ===
+// false refuses to yield the responder (RN routes cancelable to onResponderTerminationRequest,
+// default true when unset).
+export function buildPressableListeners(handlers, options) {
+    if (options.disabled === true) {
+        dlog('Pressable disabled — listeners suppressed');
+        return {};
+    }
+    const listeners = {
+        onPress: handlers.handlePress,
+        onPressIn: handlers.handlePressIn,
+        onPressOut: handlers.handlePressOut,
+        // Claim the responder so the move stream reaches this View; retention reads it.
+        onStartShouldSetResponder: () => true,
+        onResponderMove: handlers.handleResponderMove,
+    };
+    if (options.cancelable !== undefined) {
+        listeners.onResponderTerminationRequest = () => options.cancelable;
+    }
+    return listeners;
+}
+// Hover has no event on a touch host: there is no pointer-enter/leave. The adapter accepts and
+// types the RN hover props but forwards nothing; this records the no-op so a missing hover
+// callback on device is explained, not silent (RN onHoverIn/onHoverOut).
+export function noteHoverNoop(onHoverIn, onHoverOut) {
+    if (onHoverIn !== undefined || onHoverOut !== undefined) {
+        dlog('Pressable hover is a no-op on this host (no pointer-enter/leave event)');
+    }
+}

package/build/view/render-scroll-sticky.d.ts

@@ -0,0 +1,24 @@
+import type { AnimatedValue, ISymbioteEvent } from '@symbiote-native/engine';
+export declare const STICKY_HEADER_Z_INDEX = 10;
+export declare function stickyDebounceMs(os: string): number;
+export type IStickyHeaderProps = {
+    nextHeaderLayoutY: number | undefined;
+    onLayout: (event: ISymbioteEvent) => void;
+    scrollAnimatedValue: AnimatedValue;
+    inverted: boolean | undefined;
+    scrollViewHeight: number | undefined;
+};
+export declare function readLayoutNumber(event: ISymbioteEvent, key: 'y' | 'height'): number | undefined;
+export type IStickyInterpolationParams = {
+    measured: boolean;
+    inverted: boolean | undefined;
+    scrollViewHeight: number | undefined;
+    layoutY: number;
+    layoutHeight: number;
+    nextHeaderLayoutY: number | undefined;
+};
+export declare function computeStickyInterpolation(params: IStickyInterpolationParams): {
+    inputRange: number[];
+    outputRange: number[];
+};
+export declare function nextStickyHeaderY(stickyHeaderIndices: number[], indexOfIndex: number, headerLayoutYs: ReadonlyMap<number, number>): number | undefined;