@symbiote-native/components 0.2.4 → 0.2.5

package/build/index.js

@@ -40,7 +40,7 @@ export { computeInset, readKeyboardFrame, readLayoutFrame, resolveKeyboardAvoidi
 // accessibilityState + ripple render decisions in view/render-pressable. Every adapter supplies
 // only its reactive `pressed` cell + the View's measure handle (see the 3-layer split).
 export { createPressHandlers, createPressRuntime, normalizeRect, maxEdge, isTouchWithinRegion, readPoint, computeRegion, rippleProps, DEFAULT_DELAY_LONG_PRESS_MS, DEFAULT_PRESS_RECT_OFFSETS, } from './state/pressable.js';
-export { buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, shouldSuppressPress, shouldClaimResponder, isTerminationAllowed, } from './view/render-pressable.js';
+export { buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, shouldSuppressPress, shouldClaimResponder, isTerminationAllowed, } from './view/render-pressable/index.js';
 // Touchable*: shared press-timing constants + the deactivation-floor math (the Animated feedback
 // itself stays per-adapter), and TouchableNativeFeedback's pure static factories + background map.
 export { computePressOutWait, DEFAULT_ACTIVE_OPACITY, OPACITY_ACTIVE_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_UNDERLAY_COLOR, DEFAULT_MIN_PRESS_DURATION_MS, } from './state/touchable.js';

package/build/state/scroll-routing-handle/index.d.ts

@@ -0,0 +1,10 @@
+import type { ISymbioteNode } from '@symbiote-native/engine';
+import type { IScrollViewHandle } from '../../scroll-view-commands';
+export interface IScrollRoutingHandle {
+    flashScrollIndicators(): void;
+    getNativeScrollRef(): IScrollViewHandle | null;
+    getScrollableNode(): IScrollViewHandle | null;
+    getScrollResponder(): IScrollViewHandle | null;
+    getScrollNode(): ISymbioteNode | null;
+    recordInteraction(): void;
+}

package/build/state/scroll-routing-handle/index.js

@@ -0,0 +1,6 @@
+// The inner-scroll routing tail every windowed-list imperative handle exposes
+// (VirtualizedList, VirtualizedSectionList, and via those FlatList/SectionList). Each
+// method forwards straight to the underlying ScrollView's own handle/node; neither list
+// adds behavior of its own, so the 6 members live here once and both list handle types
+// extend this instead of hand-duplicating (and risking drift in) the signatures.
+export {};

package/build/view/layout-event/index.d.ts

@@ -0,0 +1,2 @@
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+export declare function readLayoutField(event: ISymbioteEvent, key: 'width' | 'height' | 'y'): number | undefined;

package/build/view/layout-event/index.js

@@ -0,0 +1,12 @@
+// Shared across render-scroll-view's content/frame dimension read (width/height) and
+// render-scroll-sticky's header position read (y/height): both pull a single numeric field out of
+// an onLayout event's nativeEvent.layout. SymbioteEvent.nativeEvent is Record<string, unknown>, so
+// the layout box and the requested field are narrowed at runtime, no cast. A malformed event
+// yields undefined (no-op).
+export function readLayoutField(event, key) {
+    const layout = event.nativeEvent.layout;
+    if (typeof layout !== 'object' || layout === null)
+        return undefined;
+    const value = Reflect.get(layout, key);
+    return typeof value === 'number' ? value : undefined;
+}

package/build/view/render-image/index.d.ts

@@ -0,0 +1,56 @@
+import { type IImageSource, type IImageSourceProp, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps } from '../../accessibility-props';
+import { type IDescriptor } from '../../descriptor';
+export type { IImageSource, IImageSourceProp };
+type IImageEventHandler = (event: ISymbioteEvent) => void;
+export type IResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+export type IImageCapInsets = {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+};
+export type IResizeMethod = 'auto' | 'resize' | 'scale' | 'none';
+export type IImageProps = IAccessibilityProps & IAriaProps & {
+    source?: IImageSourceProp;
+    defaultSource?: IImageSourceProp;
+    loadingIndicatorSource?: IImageSourceProp;
+    style?: IStyleProp<IViewStyle>;
+    resizeMode?: IResizeMode;
+    resizeMethod?: IResizeMethod;
+    tintColor?: string;
+    blurRadius?: number;
+    capInsets?: IImageCapInsets;
+    fadeDuration?: number;
+    progressiveRenderingEnabled?: boolean;
+    src?: string;
+    srcSet?: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    referrerPolicy?: string;
+    onLoadStart?: IImageEventHandler;
+    onLoad?: IImageEventHandler;
+    onLoadEnd?: IImageEventHandler;
+    onError?: IImageEventHandler;
+    onProgress?: IImageEventHandler;
+    onPartialLoad?: IImageEventHandler;
+};
+export type IImageViewProps = {
+    source?: IImageSourceProp;
+    defaultSource?: IImageSourceProp;
+    loadingIndicatorSource?: IImageSourceProp;
+    style?: IStyleProp<IViewStyle>;
+    resizeMode?: IResizeMode;
+    tintColor?: string;
+    src?: string;
+    srcSet?: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    referrerPolicy?: string;
+    passthrough: Record<string, unknown>;
+};
+export declare function renderImage(view: IImageViewProps): IDescriptor;

package/build/view/render-image/index.js

@@ -0,0 +1,133 @@
+import { dlog, flattenStyle, resolveImageSource, } from '@symbiote-native/engine';
+import { el } from '../../descriptor.js';
+// 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 = resolveImageSource(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;
+}
+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-pressable.d.ts → render-pressable/index.d.ts}

@@ -1,5 +1,5 @@
-import type { IAccessibilityStateValue } from '../accessibility-props';
-import type { IPressHandlers } from '../state/pressable';
+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 shouldSuppressPress(disabled: boolean | undefined): boolean;
 export declare function shouldClaimResponder(disabled: boolean | undefined): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/components",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Framework-agnostic component logic (state machines + render functions) for SymbioteNative — written once, inherited by every adapter (React, Vue, Angular, ...).",
   "repository": {
     "type": "git",
@@ -22,8 +22,8 @@
       "default": "./build/index.js"
     },
     "./bootstrap": {
-      "types": "./build/bootstrap.d.ts",
-      "default": "./build/bootstrap.js"
+      "types": "./build/bootstrap/index.d.ts",
+      "default": "./build/bootstrap/index.js"
     }
   },
   "files": [
@@ -32,14 +32,13 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "@symbiote-native/engine": "0.1.5"
-  },
   "peerDependencies": {
+    "@symbiote-native/engine": ">=0.1.6",
     "react-native": ">=0.86"
   },
   "devDependencies": {
-    "@types/node": "^26.0.0"
+    "@types/node": "^26.0.0",
+    "@symbiote-native/engine": "0.1.6"
   },
   "scripts": {
     "typecheck": "tsc --build",