@symbiote-native/components 0.1.0

package/build/state/text-input.js

@@ -0,0 +1,205 @@
+// TextInput: the logic half (framework-agnostic, zero render). TextInput is the controlled-
+// value / event-count handshake primitive. There is NO `value` Fabric prop: JS folds
+// value/defaultValue into a single private `text` prop plus a `mostRecentEventCount` counter.
+// Native increments its own counter per keystroke and rejects stale writes by
+// eventLag = nativeCount - mostRecentEventCount, so a controlled JS write must push the
+// ACKNOWLEDGED count (the one native last reported) through the setTextAndSelection view
+// command, never a plain prop re-push, which would fight the cursor.
+//
+// Unlike Switch this is NOT a single reducer: the handshake holds two pieces with different
+// reactivity needs: `mostRecentEventCount` must re-render so the imperative handle echoes the
+// latest count, while `lastNativeText` is bookkeeping the controlled-write effect mutates
+// without a render. So the logic layer is the pure folds/maps + the controlled-write predicate;
+// each adapter holds the two pieces in ITS own primitives (React useState/useRef, Vue ref/let).
+// The acknowledged count starts at 0, native has reported nothing yet, so the first
+// controlled write echoes 0 and lands on eventLag 0.
+export const INITIAL_EVENT_COUNT = 0;
+// RN's "no selection" sentinel for setTextAndSelection: a negative index tells native to
+// leave the caret where it is rather than move it (used on a controlled write with no
+// explicit selection).
+export const SELECTION_NONE = -1;
+// The W3C/alias → native lookup tables. Typed Record<string, string> (not Record<IInputMode,
+// string>) so the one safe-lookup helper (mapAutoComplete) serves every map without a cast;
+// the union types above still guard the app-facing prop contract.
+// RN's inputMode -> keyboardType map (TextInput.js:815). `search` is platform-split (iOS
+// 'web-search', else 'default'); we use the Android/default branch since the folded prop is
+// forwarded verbatim and the safe default avoids an unknown keyboardType on Android.
+const inputModeToKeyboardType = {
+    decimal: 'decimal-pad',
+    email: 'email-address',
+    none: 'default',
+    numeric: 'number-pad',
+    search: 'default',
+    tel: 'phone-pad',
+    text: 'default',
+    url: 'url',
+};
+// RN's enterKeyHint -> returnKeyType map (TextInput.js:805). Note `enter` -> 'default'.
+const enterKeyHintToReturnKeyType = {
+    done: 'done',
+    enter: 'default',
+    go: 'go',
+    next: 'next',
+    previous: 'previous',
+    search: 'search',
+    send: 'send',
+};
+// RN's W3C autocomplete -> Android `autoComplete` map (TextInput.js:828). A token with no
+// native equivalent passes through unchanged (RN's `?? autoComplete`).
+const autoCompleteWebToAndroid = {
+    'additional-name': 'name-middle',
+    'address-line1': 'postal-address-region',
+    'address-line2': 'postal-address-locality',
+    bday: 'birthdate-full',
+    'bday-day': 'birthdate-day',
+    'bday-month': 'birthdate-month',
+    'bday-year': 'birthdate-year',
+    'cc-csc': 'cc-csc',
+    'cc-exp': 'cc-exp',
+    'cc-exp-month': 'cc-exp-month',
+    'cc-exp-year': 'cc-exp-year',
+    'cc-number': 'cc-number',
+    country: 'postal-address-country',
+    'current-password': 'password',
+    email: 'email',
+    'family-name': 'name-family',
+    'given-name': 'name-given',
+    'honorific-prefix': 'name-prefix',
+    'honorific-suffix': 'name-suffix',
+    name: 'name',
+    'new-password': 'password-new',
+    off: 'off',
+    'one-time-code': 'sms-otp',
+    'postal-code': 'postal-code',
+    sex: 'gender',
+    'street-address': 'street-address',
+    tel: 'tel',
+    'tel-country-code': 'tel-country-code',
+    'tel-national': 'tel-national',
+    username: 'username',
+};
+// RN's W3C autocomplete -> iOS `textContentType` map (TextInput.js:862). A token absent here
+// leaves textContentType undefined on iOS (RN's `autoComplete in map` guard).
+const autoCompleteWebToTextContentType = {
+    'additional-name': 'middleName',
+    'address-line1': 'streetAddressLine1',
+    'address-line2': 'streetAddressLine2',
+    bday: 'birthdate',
+    'bday-day': 'birthdateDay',
+    'bday-month': 'birthdateMonth',
+    'bday-year': 'birthdateYear',
+    'cc-additional-name': 'creditCardMiddleName',
+    'cc-csc': 'creditCardSecurityCode',
+    'cc-exp': 'creditCardExpiration',
+    'cc-exp-month': 'creditCardExpirationMonth',
+    'cc-exp-year': 'creditCardExpirationYear',
+    'cc-family-name': 'creditCardFamilyName',
+    'cc-given-name': 'creditCardGivenName',
+    'cc-name': 'creditCardName',
+    'cc-number': 'creditCardNumber',
+    'cc-type': 'creditCardType',
+    country: 'countryName',
+    'current-password': 'password',
+    email: 'emailAddress',
+    'family-name': 'familyName',
+    'given-name': 'givenName',
+    'honorific-prefix': 'namePrefix',
+    'honorific-suffix': 'nameSuffix',
+    name: 'name',
+    'new-password': 'newPassword',
+    nickname: 'nickname',
+    off: 'none',
+    'one-time-code': 'oneTimeCode',
+    organization: 'organizationName',
+    'organization-title': 'jobTitle',
+    'postal-code': 'postalCode',
+    'street-address': 'fullStreetAddress',
+    tel: 'telephoneNumber',
+    url: 'URL',
+    username: 'username',
+};
+// Safe lookup into a W3C->native / alias->native map (no `as`): own-property guard, undefined
+// if the token has no native equivalent. The caller decides the per-platform fallback. Named
+// for its first user (autoComplete), but it is the one generic safe lookup every map shares.
+export function mapAutoComplete(map, token) {
+    return Object.prototype.hasOwnProperty.call(map, token) ? map[token] : undefined;
+}
+// RN folds W3C `autoComplete` per platform (TextInput.js:938): Android takes the mapped
+// `autoComplete` token (falling back to the raw token), iOS takes the mapped `textContentType`
+// (only when the token is in the map, else leaves it untouched). Symbiote is Metro-built per
+// platform but folds platform-agnostically, resolving BOTH native props from the one token:
+// the iOS-only `textContentType` is inert on Android and the Android `autoComplete` token is
+// inert on iOS, so emitting both is safe: same shape as the dual-keyed events.
+export function foldAutoComplete(token) {
+    if (token === undefined)
+        return { autoComplete: undefined, textContentType: undefined };
+    return {
+        autoComplete: mapAutoComplete(autoCompleteWebToAndroid, token) ?? token,
+        textContentType: mapAutoComplete(autoCompleteWebToTextContentType, token),
+    };
+}
+// RN's submitBehavior reconciliation (TextInput.js:559). Explicit submitBehavior wins (with
+// single-line 'newline' coerced to 'blurAndSubmit'); else it is derived from the legacy
+// blurOnSubmit per multiline. Input/output are plain strings: the result is forwarded to the
+// native prop verbatim, so no ISubmitBehavior union is needed at the seam.
+export function foldSubmitBehavior(submitBehavior, blurOnSubmit, multiline) {
+    if (submitBehavior !== undefined) {
+        if (!multiline && submitBehavior === 'newline')
+            return 'blurAndSubmit';
+        return submitBehavior;
+    }
+    if (multiline)
+        return blurOnSubmit === true ? 'blurAndSubmit' : 'newline';
+    return blurOnSubmit !== false ? 'blurAndSubmit' : 'submit';
+}
+// RN's fold: value wins, else defaultValue, else leave undefined (uncontrolled).
+export function foldText(value, defaultValue) {
+    if (typeof value === 'string')
+        return value;
+    if (typeof defaultValue === 'string')
+        return defaultValue;
+    return undefined;
+}
+// The change payload carries the new text + native event counter. nativeEvent is an untyped
+// Record, so narrow each.
+export function textFromChange(event) {
+    const text = event.nativeEvent.text;
+    return typeof text === 'string' ? text : undefined;
+}
+export function eventCountFromChange(event) {
+    const count = event.nativeEvent.eventCount;
+    return typeof count === 'number' ? count : undefined;
+}
+// Controlled-write decision: command native back only when JS-side `value` is a string that
+// diverges from what native last reported. A plain prop re-push would race the user's
+// keystrokes; the setTextAndSelection command is the only stale-safe path. The guard narrows
+// `value` to string so the caller can build the command args without re-checking.
+export function shouldCommandText(lastNativeText, value) {
+    return typeof value === 'string' && lastNativeText !== value;
+}
+// The whole per-platform-agnostic prop fold in one place (TextInput.js:928-946), shared by every
+// adapter: inputMode wins over keyboardType, enterKeyHint over returnKeyType, readOnly over
+// editable (inverted), the cursor/selection-handle colors default from selectionColor, the W3C
+// autoComplete token folds to the per-platform native prop (an explicit textContentType still
+// wins), inputMode forces softInput visibility, and underlineColorAndroid defaults to
+// 'transparent' to hide the Material EditText bar.
+export function resolveTextInputProps(input) {
+    const folded = foldAutoComplete(input.autoComplete);
+    return {
+        keyboardType: input.inputMode !== undefined
+            ? mapAutoComplete(inputModeToKeyboardType, input.inputMode)
+            : input.keyboardType,
+        returnKeyType: input.enterKeyHint !== undefined
+            ? mapAutoComplete(enterKeyHintToReturnKeyType, input.enterKeyHint)
+            : input.returnKeyType,
+        editable: input.readOnly !== undefined ? !input.readOnly : input.editable,
+        submitBehavior: foldSubmitBehavior(input.submitBehavior, input.blurOnSubmit, input.multiline),
+        selectionColor: input.selectionColor,
+        cursorColor: input.cursorColor !== undefined ? input.cursorColor : input.selectionColor,
+        selectionHandleColor: input.selectionHandleColor !== undefined ? input.selectionHandleColor : input.selectionColor,
+        underlineColorAndroid: input.underlineColorAndroid !== undefined ? input.underlineColorAndroid : 'transparent',
+        autoComplete: folded.autoComplete,
+        textContentType: input.textContentType !== undefined ? input.textContentType : folded.textContentType,
+        showSoftInputOnFocus: input.inputMode !== undefined ? input.inputMode !== 'none' : input.showSoftInputOnFocus,
+    };
+}

package/build/state/touchable.d.ts

@@ -0,0 +1,15 @@
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+export declare const DEFAULT_ACTIVE_OPACITY = 0.2;
+export declare const OPACITY_ACTIVE_DURATION_MS = 150;
+export declare const OPACITY_INACTIVE_DURATION_MS = 250;
+export declare const RESTING_OPACITY = 1;
+export declare const DEFAULT_HIGHLIGHT_CHILD_OPACITY = 0.85;
+export declare const DEFAULT_UNDERLAY_COLOR = "black";
+export declare const DEFAULT_MIN_PRESS_DURATION_MS = 130;
+export type ITouchableHandler = (event: ISymbioteEvent) => void;
+export interface IPressTimingProps {
+    delayPressIn?: number;
+    delayPressOut?: number;
+    minPressDuration?: number;
+}
+export declare function computePressOutWait(heldFor: number, minPressDuration: number, delayPressOut: number): number;

package/build/state/touchable.js

@@ -0,0 +1,22 @@
+// Touchable*: the shared logic half (framework-agnostic). The Touchable family is built on
+// Pressable; what is identical across adapters is the press-timing config RN's Pressability reads
+// (delayPressIn/delayPressOut/minPressDuration) and the deactivation floor math. The Animated
+// feedback itself is framework (each adapter's Animated namespace), so it stays in the adapter;
+// only the timing constants + the pure wait computation live here.
+// TouchableOpacity.js: _opacityActive(150)/_opacityInactive(250), activeOpacity 0.2.
+export const DEFAULT_ACTIVE_OPACITY = 0.2;
+export const OPACITY_ACTIVE_DURATION_MS = 150;
+export const OPACITY_INACTIVE_DURATION_MS = 250;
+export const RESTING_OPACITY = 1;
+// TouchableHighlight.js: child opacity 0.85, underlay 'black' when unset.
+export const DEFAULT_HIGHLIGHT_CHILD_OPACITY = 0.85;
+export const DEFAULT_UNDERLAY_COLOR = 'black';
+// RN's Pressability DEFAULT_MIN_PRESS_DURATION, the floor a press visual is held, so a very fast
+// tap still flashes the active feedback (Pressability.js).
+export const DEFAULT_MIN_PRESS_DURATION_MS = 130;
+// RN's _deactivate floor: the press-out waits at least minPressDuration past activation (so a fast
+// tap holds the active visual) and at least delayPressOut, whichever is longer. `heldFor` is how
+// long the visual has already been active (0 when it never activated).
+export function computePressOutWait(heldFor, minPressDuration, delayPressOut) {
+    return Math.max(minPressDuration - heldFor, delayPressOut);
+}

package/build/state/virtualized-list.d.ts

@@ -0,0 +1,161 @@
+import type { IViewStyle } from '@symbiote-native/engine';
+import type { ISymbioteEvent, ISymbioteNode } from '@symbiote-native/engine';
+import type { IScrollViewHandle } from '../scroll-view-commands';
+export declare const DEFAULT_WINDOW_SIZE = 21;
+export declare const DEFAULT_INITIAL_NUM_TO_RENDER = 10;
+export declare const DEFAULT_END_REACHED_THRESHOLD = 2;
+export declare const DEFAULT_MAX_TO_RENDER_PER_BATCH = 10;
+export declare const DEFAULT_UPDATE_CELLS_BATCHING_PERIOD = 50;
+export declare const DEFAULT_VIEW_AREA_COVERAGE_PERCENT_THRESHOLD = 0;
+export declare const DEFAULT_START_REACHED_THRESHOLD = 2;
+export declare const FIRST_INDEX = 0;
+export declare const EMPTY_OFFSET = 0;
+export declare const NO_INDEX = -1;
+export declare const FULLY_VISIBLE_PERCENT = 100;
+export declare const ON_EDGE_REACHED_EPSILON = 0.001;
+export declare const NO_CONTENT_LENGTH_SENT = -1;
+export declare const INVERTED_Y_STYLE: IViewStyle;
+export declare const INVERTED_X_STYLE: IViewStyle;
+export interface ICellLayout {
+    length: number;
+    offset: number;
+}
+export interface ISeparatorProps<ItemT> {
+    highlighted: boolean;
+    leadingItem?: ItemT;
+    trailingItem?: ItemT;
+    section?: unknown;
+    [key: string]: unknown;
+}
+export interface ISeparators {
+    highlight(): void;
+    unhighlight(): void;
+    updateProps(select: 'leading' | 'trailing', newProps: Record<string, unknown>): void;
+}
+export interface IViewToken<ItemT> {
+    item: ItemT;
+    key: string;
+    index: number;
+    isViewable: boolean;
+}
+export interface IViewableItemsChangedInfo<ItemT> {
+    viewableItems: IViewToken<ItemT>[];
+    changed: IViewToken<ItemT>[];
+}
+export interface IViewabilityConfig {
+    minimumViewTime?: number;
+    viewAreaCoveragePercentThreshold?: number;
+    itemVisiblePercentThreshold?: number;
+    waitForInteraction?: boolean;
+}
+export interface IViewabilityConfigCallbackPair<ItemT> {
+    viewabilityConfig: IViewabilityConfig;
+    onViewableItemsChanged: (info: IViewableItemsChangedInfo<ItemT>) => void;
+}
+export interface IVirtualizedListHandle {
+    scrollToOffset(params: {
+        offset: number;
+        animated?: boolean;
+    }): void;
+    scrollToIndex(params: {
+        index: number;
+        animated?: boolean;
+        viewOffset?: number;
+        viewPosition?: number;
+    }): void;
+    scrollToItem(params: {
+        item: unknown;
+        animated?: boolean;
+        viewPosition?: number;
+    }): void;
+    scrollToEnd(params?: {
+        animated?: boolean;
+    }): void;
+    flashScrollIndicators(): void;
+    getNativeScrollRef(): IScrollViewHandle | null;
+    getScrollableNode(): IScrollViewHandle | null;
+    getScrollResponder(): IScrollViewHandle | null;
+    getScrollNode(): ISymbioteNode | null;
+    recordInteraction(): void;
+}
+export declare function readScrollOffset(event: ISymbioteEvent, horizontal: boolean): number | undefined;
+export declare function readLayoutLength(event: ISymbioteEvent, horizontal: boolean): number | undefined;
+export declare function buildOffsets(count: number, measured: Map<number, number>, fixedLayout: ((index: number) => ICellLayout) | undefined, averageLength: number): {
+    offsets: number[];
+    lengths: number[];
+    total: number;
+};
+export declare function computeWindow(count: number, offsets: number[], lengths: number[], scrollOffset: number, viewportLength: number, windowSize: number, initialNumToRender: number): {
+    first: number;
+    last: number;
+};
+export declare function throttleWindow(target: {
+    first: number;
+    last: number;
+}, previous: {
+    first: number;
+    last: number;
+}, maxToRenderPerBatch: number): {
+    first: number;
+    last: number;
+};
+export declare function visiblePercent(cellOffset: number, cellLength: number, scrollOffset: number, viewportLength: number): number;
+export declare function isCellViewable(percent: number, config: IViewabilityConfig): boolean;
+export declare function offsetForIndex(index: number, viewPosition: number, viewOffset: number, count: number, offsets: number[], lengths: number[], viewportLength: number): number;
+export declare function averageMeasuredLength(measured: Map<number, number>): number;
+export declare function highestMeasuredIndex(measured: Map<number, number>): number;
+export declare function computeEndReached(total: number, scrollOffset: number, viewportLength: number, thresholdMultiplier: number): {
+    distanceFromEnd: number;
+    withinThreshold: boolean;
+};
+export declare function computeStartReached(scrollOffset: number, viewportLength: number, thresholdMultiplier: number): {
+    distanceFromStart: number;
+    withinThreshold: boolean;
+};
+export declare function buildViewabilityPairs<ItemT>(onViewableItemsChanged: ((info: IViewableItemsChangedInfo<ItemT>) => void) | undefined, viewabilityConfig: IViewabilityConfig | undefined, pairs: IViewabilityConfigCallbackPair<ItemT>[] | undefined): IViewabilityConfigCallbackPair<ItemT>[];
+export interface IViewableSetParams<ItemT> {
+    first: number;
+    last: number;
+    count: number;
+    offsets: number[];
+    lengths: number[];
+    scrollOffset: number;
+    viewportLength: number;
+    data: unknown;
+    getItem: (data: unknown, index: number) => ItemT;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    pairs: IViewabilityConfigCallbackPair<ItemT>[];
+    hasInteracted: boolean;
+}
+export declare function computeViewableSet<ItemT>(params: IViewableSetParams<ItemT>): {
+    tokens: IViewToken<ItemT>[];
+    map: Map<string, IViewToken<ItemT>>;
+};
+export declare function diffViewable<ItemT>(previous: Map<string, IViewToken<ItemT>>, current: Map<string, IViewToken<ItemT>>, currentTokens: IViewToken<ItemT>[]): {
+    changed: IViewToken<ItemT>[];
+    hasChanged: boolean;
+};
+export declare function maxMinimumViewTime<ItemT>(pairs: IViewabilityConfigCallbackPair<ItemT>[]): number;
+export interface IListCellPlan {
+    index: number;
+    key: string;
+}
+export interface IListPlan {
+    leadingExtent: number;
+    trailingExtent: number;
+    cells: IListCellPlan[];
+    stickyChildPositions: number[];
+}
+export interface IListPlanParams {
+    count: number;
+    first: number;
+    last: number;
+    offsets: number[];
+    lengths: number[];
+    total: number;
+    keyFor: (index: number) => string;
+    stickyIndices?: ReadonlySet<number>;
+    hasHeader: boolean;
+    hasSeparators: boolean;
+}
+export declare function buildListPlan(params: IListPlanParams): IListPlan;