@symbiote-native/components 0.1.0

package/build/view/render-scroll-sticky.js

@@ -0,0 +1,81 @@
+// Sticky headers: the framework-agnostic math behind the JS layer RN implements in
+// ScrollView.js / ScrollViewStickyHeader.js. RN does stickiness PURELY IN JS: a single
+// scroll AnimatedValue drives each flagged header's translateY through an interpolation that
+// keeps it pinned to the top (or bottom, inverted) until the next header collides with it.
+// The native Fabric scroll view does NOT honor stickyHeaderIndices on its own. The load-bearing
+// piece, the top/inverted inputRange/outputRange math (computeStickyInterpolation), is ported
+// byte-for-byte from ScrollViewStickyHeader.js's effect. The adapter owns the component shell,
+// the layout state, and building the interpolation onto its Animated value.
+// RN gives the sticky wrapper zIndex:10 (ScrollViewStickyHeader.js styles.header) so the
+// pinned header paints OVER the rows that scroll up under it. Without it the next rows (later
+// siblings) paint on top and bleed through the header.
+export const STICKY_HEADER_Z_INDEX = 10;
+// RN debounces the Fabric ShadowTree transform sync (ScrollViewStickyHeader.js): the smooth pin
+// rides the native driver, but the committed transform must catch up for hit-testing. Android
+// needs the tighter window because its tap hit-detection moves to JS on finger-move.
+const STICKY_DEBOUNCE_ANDROID_MS = 15;
+const STICKY_DEBOUNCE_IOS_MS = 64;
+// The debounce window for pushing the settled translateY into the committed transform, by host.
+export function stickyDebounceMs(os) {
+    return os === 'android' ? STICKY_DEBOUNCE_ANDROID_MS : STICKY_DEBOUNCE_IOS_MS;
+}
+export function readLayoutNumber(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;
+}
+// Build the scroll-offset → translateY interpolation ranges that keep the header pinned.
+// Ported byte-for-byte from ScrollViewStickyHeader.js's effect (both branches). The base
+// [-1, 0] → [0, 0] stub is the un-measured identity; once measured, the top branch pins at
+// layoutY and tracks 1:1 until the next header pushes it off, while the inverted branch pins
+// at the viewport bottom (stickStartPoint) and tracks up to the collision point.
+export function computeStickyInterpolation(params) {
+    const { measured, inverted, scrollViewHeight, layoutY, layoutHeight, nextHeaderLayoutY } = params;
+    const inputRange = [-1, 0];
+    const outputRange = [0, 0];
+    if (measured) {
+        if (inverted === true) {
+            // Inverted: the header sticks at the BOTTOM of the viewport. It starts sticking once
+            // its bottom edge reaches the viewport bottom (stickStartPoint), then tracks scroll up
+            // to the next header's collision point.
+            if (scrollViewHeight !== undefined) {
+                const stickStartPoint = layoutY + layoutHeight - scrollViewHeight;
+                if (stickStartPoint > 0) {
+                    inputRange.push(stickStartPoint, stickStartPoint + 1);
+                    outputRange.push(0, 1);
+                    const collisionPoint = (nextHeaderLayoutY ?? 0) - layoutHeight - scrollViewHeight;
+                    if (collisionPoint > stickStartPoint) {
+                        inputRange.push(collisionPoint, collisionPoint + 1);
+                        outputRange.push(collisionPoint - stickStartPoint, collisionPoint - stickStartPoint);
+                    }
+                }
+            }
+        }
+        else {
+            // Top: no translation until the header reaches the top (layoutY), then it tracks the
+            // scroll 1:1 to stay pinned, until the next header pushes it back off.
+            inputRange.push(layoutY);
+            outputRange.push(0);
+            const collisionPoint = (nextHeaderLayoutY ?? 0) - layoutHeight;
+            if (collisionPoint >= layoutY) {
+                inputRange.push(collisionPoint, collisionPoint + 1);
+                outputRange.push(collisionPoint - layoutY, collisionPoint - layoutY);
+            }
+            else {
+                inputRange.push(layoutY + 1);
+                outputRange.push(1);
+            }
+        }
+    }
+    return { inputRange, outputRange };
+}
+// The cross-talk lookup (RN's _headerLayoutYs, ScrollView.js:1695 nextIndex): given this
+// header's position in `stickyHeaderIndices` (indexOfIndex), find the measured y of the NEXT
+// flagged header, its collision point. undefined until that header has measured (or for the
+// last flagged header, which has no successor and so sticks indefinitely).
+export function nextStickyHeaderY(stickyHeaderIndices, indexOfIndex, headerLayoutYs) {
+    const nextIndex = stickyHeaderIndices[indexOfIndex + 1];
+    return nextIndex === undefined ? undefined : headerLayoutYs.get(nextIndex);
+}

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

@@ -0,0 +1,18 @@
+import type { IStyleProp, ISymbioteEvent, IViewStyle } from '@symbiote-native/engine';
+import type { ISymbioteIntrinsic } from '../component-names/shared';
+export declare function readLayoutDimension(event: ISymbioteEvent, key: 'width' | 'height'): number | undefined;
+export declare function resolveDecelerationRate(rate: 'normal' | 'fast' | number): number;
+export declare const SCROLL_VIEW_BASE_HORIZONTAL: IViewStyle;
+export declare const SCROLL_VIEW_BASE_VERTICAL: IViewStyle;
+export type IScrollIntrinsics = {
+    scrollViewIntrinsic: ISymbioteIntrinsic;
+    contentIntrinsic: ISymbioteIntrinsic;
+    scrollViewBaseStyle: IViewStyle;
+    contentStyle: IStyleProp<IViewStyle>;
+};
+export declare function selectScrollIntrinsics(isHorizontal: boolean, contentContainerStyle: IStyleProp<IViewStyle> | undefined): IScrollIntrinsics;
+export type IContentSize = {
+    width: number;
+    height: number;
+};
+export declare function didContentSizeChange(last: IContentSize | null, next: IContentSize): boolean;

package/build/view/render-scroll-view.js

@@ -0,0 +1,85 @@
+// ScrollView: the render half (framework-agnostic). The Fabric tree is nested: the scroll
+// view wraps a content view that holds the children (RN's own ScrollView.js shape). Resolving
+// decelerationRate, picking the per-axis intrinsics/base style, reading layout dimensions, and
+// the content-size dedupe are all platform- and framework-invariant, so they live here. The
+// adapter owns the lifecycle (refs/state/effects) and the element assembly; it calls these pure
+// helpers from prepareScrollView. What diverges per platform (ADR 0020), how a RefreshControl
+// integrates, stays in the adapter's .ios/.android files.
+import { Platform } from '@symbiote-native/engine';
+// Pull a numeric field out of an onLayout event's nativeEvent.layout without a cast:
+// SymbioteEvent.nativeEvent is Record<string, unknown>, so the layout box and its
+// width/height are narrowed at runtime. A malformed event yields undefined (no-op).
+export function readLayoutDimension(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;
+}
+// 'normal'/'fast' resolve to DIFFERENT friction constants per platform: RN's
+// processDecelerationRate.js Platform.select()s them: iOS glides longer (0.998/0.99),
+// Android sooner (0.985/0.9). Hardcoding the iOS pair made Android momentum scroll
+// glide far too long on 'fast'. This is the file's one Platform read: the header's
+// "no Platform.OS" rule governs component-intrinsic selection, not a value transform
+// RN itself platform-branches. `default` mirrors iOS so any non-ios/android host stays
+// defined (select would otherwise yield undefined). Numeric rates pass through unchanged.
+export function resolveDecelerationRate(rate) {
+    if (typeof rate === 'number')
+        return rate;
+    // select() types as `number | undefined`; the always-present `default` makes the
+    // `??` fallback unreachable, but it narrows the return to a plain `number` (no cast).
+    if (rate === 'normal')
+        return Platform.select({ ios: 0.998, android: 0.985, default: 0.998 }) ?? 0.998;
+    return Platform.select({ ios: 0.99, android: 0.9, default: 0.99 }) ?? 0.99;
+}
+// RN applies a base style to the scroll-view NODE itself, per axis (ScrollView.js
+// styles.baseHorizontal/baseVertical). Two parts carry weight:
+//   - `overflow: 'scroll'`: clips content to the scroll view's frame. On iOS Fabric the
+//     node only clips when this is set; without it a fixed-height ScrollView lets its
+//     content bleed out over siblings (Android's native ViewGroup clips regardless, which
+//     is why the bug showed only on iOS). RN sets it on BOTH axes, so we do too.
+//   - `flexDirection: 'row'` (horizontal only): makes the single content child a MAIN-axis
+//     item, so Yoga sizes it to its content width and the view overflows and scrolls.
+//     Without it the content is a CROSS-axis item, stretched to the viewport, nothing to
+//     scroll. Vertical keeps the default `column`.
+// Both axes match RN's baseHorizontal/baseVertical exactly. Composed UNDER the user style,
+// so an explicit value still wins.
+export const SCROLL_VIEW_BASE_HORIZONTAL = {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexDirection: 'row',
+    overflow: 'scroll',
+};
+export const SCROLL_VIEW_BASE_VERTICAL = {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexDirection: 'column',
+    overflow: 'scroll',
+};
+export function selectScrollIntrinsics(isHorizontal, contentContainerStyle) {
+    // Horizontal scroll resolves to a different native component on Android (its own
+    // ViewManager, not RCTScrollView+flag); on iOS both intrinsics map back to RCTScrollView.
+    // The name table does the per-platform mapping; here we only pick the intrinsic.
+    const scrollViewIntrinsic = isHorizontal
+        ? 'symbiote-horizontal-scroll-view'
+        : 'symbiote-scroll-view';
+    const contentIntrinsic = isHorizontal
+        ? 'symbiote-horizontal-scroll-content'
+        : 'symbiote-scroll-content';
+    const scrollViewBaseStyle = isHorizontal
+        ? SCROLL_VIEW_BASE_HORIZONTAL
+        : SCROLL_VIEW_BASE_VERTICAL;
+    const contentStyle = isHorizontal
+        ? [contentContainerStyle, { flexDirection: 'row' }]
+        : contentContainerStyle;
+    return { scrollViewIntrinsic, contentIntrinsic, scrollViewBaseStyle, contentStyle };
+}
+// Did the content view's measured size actually change since the last fire? RN synthesizes
+// onContentSizeChange from the inner content view's onLayout, but that fires on every layout
+// pass; RN dedupes so the user handler only sees real size changes (ScrollView.js). First
+// measurement (last === null) always counts as a change.
+export function didContentSizeChange(last, next) {
+    if (last === null)
+        return true;
+    return last.width !== next.width || last.height !== next.height;
+}

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

@@ -0,0 +1,29 @@
+import type { IStyleProp, IViewStyle, ISymbioteEvent } from '@symbiote-native/engine';
+import type { IDescriptor } from '../descriptor';
+import type { IAccessibilityProps, IAriaProps } from '../accessibility-props';
+export type ISwitchTrackColor = {
+    false?: string;
+    true?: string;
+};
+export interface ISwitchProps extends IAccessibilityProps, IAriaProps {
+    value?: boolean;
+    onValueChange?: (value: boolean, event: ISymbioteEvent) => void;
+    disabled?: boolean;
+    trackColor?: ISwitchTrackColor;
+    thumbColor?: string;
+    ios_backgroundColor?: string;
+    style?: IStyleProp<IViewStyle>;
+}
+export type ISwitchPlatform = {
+    trackColorProps: (value: boolean, trackColor?: ISwitchTrackColor) => Record<string, unknown>;
+};
+export type ISwitchViewProps = {
+    value: boolean;
+    disabled?: boolean;
+    trackColor?: ISwitchTrackColor;
+    thumbColor?: string;
+    ios_backgroundColor?: string;
+    style?: IStyleProp<IViewStyle>;
+    passthrough: Record<string, unknown>;
+};
+export declare function renderSwitch(view: ISwitchViewProps, platform: ISwitchPlatform): IDescriptor;

package/build/view/render-switch.js

@@ -0,0 +1,33 @@
+// Switch: the render half (framework-agnostic). Maps the resolved props onto the single
+// `symbiote-switch` host node: the strict value fold lands as the `value` Fabric prop, the
+// track colors take platform-specific prop NAMES (iOS onTintColor/tintColor vs Android
+// trackColorFor*/trackTintColor, supplied via `platform`), thumbColor → thumbTintColor, and
+// ios_backgroundColor folds into the style as the pill that shows through the shrunken track.
+// Pure and prop-driven; no hooks, no events. The adapter owns those.
+import { dlog } from '@symbiote-native/engine';
+import { el } from '../descriptor';
+// RN rounds the iOS background pill to this radius when ios_backgroundColor is set.
+const IOS_BACKGROUND_BORDER_RADIUS = 16;
+// Fold ios_backgroundColor into the style, matching RN's iOS branch: it paints the
+// background that shows through the shrunken track. Untouched when unset, so a caller's own
+// backgroundColor wins by simply not passing ios_backgroundColor.
+function foldIosBackground(style, color) {
+    if (color === undefined)
+        return style;
+    return [style, { backgroundColor: color, borderRadius: IOS_BACKGROUND_BORDER_RADIUS }];
+}
+export function renderSwitch(view, platform) {
+    dlog(`Switch render value=${view.value} disabled=${String(view.disabled)}`);
+    // These color props reach Fabric as ordinary props: the shared ViewConfig declares
+    // Switch's only event as `change`, so routeProp sends the on*-prefixed color names through
+    // setProp rather than mistaking them for listeners.
+    const props = {
+        ...view.passthrough,
+        value: view.value,
+        disabled: view.disabled,
+        ...platform.trackColorProps(view.value, view.trackColor),
+        thumbTintColor: view.thumbColor,
+        style: foldIosBackground(view.style, view.ios_backgroundColor),
+    };
+    return el('symbiote-switch', props);
+}

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

@@ -0,0 +1,11 @@
+import type { IDescriptor } from '../descriptor';
+import type { IFoldedTextInputProps, ITextInputSelection } from '../state/text-input';
+export type ITextInputViewProps = {
+    multiline: boolean;
+    text: string | undefined;
+    mostRecentEventCount: number;
+    selection?: ITextInputSelection;
+    folded: IFoldedTextInputProps;
+    passthrough: Record<string, unknown>;
+};
+export declare function renderTextInput(view: ITextInputViewProps): IDescriptor;

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

@@ -0,0 +1,35 @@
+// TextInput: the render half (framework-agnostic). Picks the intrinsic (single- vs multiline)
+// and maps the resolved props onto it: the controlled value rides as the private `text` prop
+// plus `mostRecentEventCount`, the W3C/alias folds arrive pre-resolved in `folded`, and the
+// ref + the change/focus/blur handlers + every pass-through prop (accessibility, testID, the
+// remaining native events) arrive folded into `passthrough` and land on the host untouched.
+// Pure and prop-driven; no hooks, no events. The adapter owns those.
+import { dlog } from '@symbiote-native/engine';
+import { el } from '../descriptor';
+// One host element per native input class. Text carries the only non-trivial nesting elsewhere;
+// here the choice is binary and runtime (the `multiline` prop), so the module stays flat.
+const SINGLELINE_INTRINSIC = 'symbiote-text-input';
+const MULTILINE_INTRINSIC = 'symbiote-text-input-multiline';
+export function renderTextInput(view) {
+    const intrinsic = view.multiline ? MULTILINE_INTRINSIC : SINGLELINE_INTRINSIC;
+    dlog(`TextInput render multiline=${String(view.multiline)} ` +
+        `text=${JSON.stringify(view.text)} count=${view.mostRecentEventCount}`);
+    const props = {
+        ...view.passthrough,
+        text: view.text,
+        mostRecentEventCount: view.mostRecentEventCount,
+        selection: view.selection,
+        keyboardType: view.folded.keyboardType,
+        returnKeyType: view.folded.returnKeyType,
+        editable: view.folded.editable,
+        submitBehavior: view.folded.submitBehavior,
+        selectionColor: view.folded.selectionColor,
+        cursorColor: view.folded.cursorColor,
+        selectionHandleColor: view.folded.selectionHandleColor,
+        underlineColorAndroid: view.folded.underlineColorAndroid,
+        autoComplete: view.folded.autoComplete,
+        textContentType: view.folded.textContentType,
+        showSoftInputOnFocus: view.folded.showSoftInputOnFocus,
+    };
+    return el(intrinsic, props);
+}

package/build/view/render-touchable-native-feedback.d.ts

@@ -0,0 +1,17 @@
+export interface IThemeAttrBackground {
+    type: 'ThemeAttrAndroid';
+    attribute: 'selectableItemBackground' | 'selectableItemBackgroundBorderless';
+    rippleRadius?: number;
+}
+export interface IRippleBackground {
+    type: 'RippleAndroid';
+    color: string | null;
+    borderless: boolean;
+    rippleRadius?: number;
+}
+export type INativeFeedbackBackground = IThemeAttrBackground | IRippleBackground;
+export declare function canUseNativeForeground(): boolean;
+export declare function selectableBackground(rippleRadius?: number): IThemeAttrBackground;
+export declare function selectableBackgroundBorderless(rippleRadius?: number): IThemeAttrBackground;
+export declare function rippleBackground(color: string, borderless: boolean, rippleRadius?: number): IRippleBackground;
+export declare function backgroundProps(background: INativeFeedbackBackground, useForeground: boolean): Record<string, INativeFeedbackBackground>;

package/build/view/render-touchable-native-feedback.js

@@ -0,0 +1,39 @@
+// TouchableNativeFeedback: the shared render half (framework-agnostic). The static background
+// factories (SelectableBackground / Ripple / …) are pure dict producers, and the mapping of a
+// resolved background + useForeground onto the native prop Android reads is platform-invariant,
+// both live here so every adapter inherits the exact same surface. The adapter only attaches these
+// statics onto its component value and nests the feedback View under its Pressable.
+import { Platform } from '@symbiote-native/engine';
+// Native foreground ripple is Android-only (API 23+). RN gates this on Platform.OS === 'android'
+// && Platform.Version >= 23. Version is a string on iOS (where the gate is irrelevant) and a
+// number on Android, so guard the type at runtime before the numeric compare, no cast.
+const ANDROID_FOREGROUND_MIN_VERSION = 23;
+export function canUseNativeForeground() {
+    return (Platform.OS === 'android' &&
+        typeof Platform.Version === 'number' &&
+        Platform.Version >= ANDROID_FOREGROUND_MIN_VERSION);
+}
+export function selectableBackground(rippleRadius) {
+    return { type: 'ThemeAttrAndroid', attribute: 'selectableItemBackground', rippleRadius };
+}
+export function selectableBackgroundBorderless(rippleRadius) {
+    return {
+        type: 'ThemeAttrAndroid',
+        attribute: 'selectableItemBackgroundBorderless',
+        rippleRadius,
+    };
+}
+// RN runs the color string through processColor (→ a native int); we have no native bridge here,
+// so we keep the string and let Android resolve it. A null color is the documented "no tint".
+export function rippleBackground(color, borderless, rippleRadius) {
+    return { type: 'RippleAndroid', color, borderless, rippleRadius };
+}
+// Maps the resolved background + useForeground onto the native prop Android reads. useForeground
+// only paints the foreground when the platform supports it (canUseNativeForeground); otherwise it
+// falls back to the background slot, matching RN. On iOS both props are inert.
+export function backgroundProps(background, useForeground) {
+    if (useForeground && canUseNativeForeground()) {
+        return { nativeForegroundAndroid: background };
+    }
+    return { nativeBackgroundAndroid: background };
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@symbiote-native/components",
+  "version": "0.1.0",
+  "description": "Framework-agnostic component logic (state machines + render functions) for SymbioteJS — written once, inherited by every adapter (React, Vue, Angular, ...).",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "core/components"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/core/components#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "type": "module",
+  "main": "./build/index.js",
+  "module": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    }
+  },
+  "files": [
+    "build"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@symbiote-native/engine": "0.1.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
+}