@symbiote-native/components 0.4.0 → 1.0.0

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

@@ -9,7 +9,7 @@
 // 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.
-import { isRecord } from '@symbiote-native/engine';
+import { AccessibilityInfo, dlog, isRecord, KEYBOARD_EVENT, Platform, } from '@symbiote-native/engine';
 // 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.
@@ -38,13 +38,51 @@ export function readLayoutFrame(layout) {
         return undefined;
     return { y, height };
 }
+export function keyboardAvoidingEventNamesFor(os) {
+    if (os === 'ios')
+        return { show: KEYBOARD_EVENT.willShow, hide: KEYBOARD_EVENT.willHide };
+    return { show: KEYBOARD_EVENT.didShow, hide: KEYBOARD_EVENT.didHide };
+}
+// The iOS "Prefer Cross-Fade Transitions" setting, read once per mount and fed to computeInset.
+//
+// AccessibilityInfo's iOS getters REJECT when the native error callback fires. That is deliberate
+// RN parity and the engine must keep it — but this caller runs at mount and nobody awaits it, so a
+// rejection would surface as an unhandled promise. Five adapters would each need the same `.catch`,
+// which is five chances to forget one, so the fallback lives here instead. A failed read and "the
+// user does not prefer cross-fade" are indistinguishable to every caller, so false is the honest
+// answer, not a swallowed error.
+//
+// The query is injectable purely so both branches are unit-testable without a native-module fake;
+// adapters call it with no arguments.
+export function readPrefersCrossFadeTransitions(query = () => AccessibilityInfo.prefersCrossFadeTransitions()) {
+    return query().catch((error) => {
+        dlog(`KeyboardAvoidingView: prefersCrossFadeTransitions read failed -> false (${String(error)})`);
+        return false;
+    });
+}
 // 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) {
+export function computeInset(frame, keyboard, verticalOffset, options = {}) {
     if (frame === undefined || keyboard === undefined)
         return 0;
+    // With the iOS Prefer Cross-Fade Transitions setting on, the keyboard reports screenY as 0
+    // rather than its real top edge (RN:88-96). Run through the ordinary math that makes the overlap
+    // the view's ENTIRE y + height and pushes the content clean off screen, so RN answers 0.
+    const os = options.os ?? Platform.OS;
+    if (os === 'ios' &&
+        keyboard.screenY === 0 &&
+        options.prefersCrossFadeTransitions === true) {
+        return 0;
+    }
     const keyboardY = keyboard.screenY - verticalOffset;
+    // The 'height' fixpoint (RN:100-105). In this mode the wrapper is SHRUNK by the inset, so its
+    // next onLayout reports a frame shorter by exactly that much. Adding the previous inset back
+    // cancels the shrink; without it each subsequent keyboard event computes a smaller overlap and
+    // the view walks back down under the keyboard. A correction, not an accumulation.
+    if (options.behavior === 'height') {
+        return Math.max((options.previousInset ?? 0) + frame.y + frame.height - keyboardY, 0);
+    }
     return Math.max(frame.y + frame.height - keyboardY, 0);
 }
 // Map the behavior + effective inset onto the wrapper/inner styles and the nesting decision:
@@ -52,7 +90,7 @@ export function computeInset(frame, keyboard, verticalOffset) {
 // 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;
+    const { behavior, effectiveInset, initialHeight, style, contentContainerStyle, } = params;
     if (behavior === 'position') {
         return {
             kind: 'nested',
@@ -61,12 +99,20 @@ export function resolveKeyboardAvoidingLayout(params) {
         };
     }
     if (behavior === 'padding') {
-        return { kind: 'wrapper', wrapperStyle: [style, { paddingBottom: effectiveInset }] };
+        return {
+            kind: 'wrapper',
+            wrapperStyle: [style, { paddingBottom: effectiveInset }],
+        };
     }
-    if (behavior === 'height' && effectiveInset > 0 && initialHeight !== undefined) {
+    if (behavior === 'height' &&
+        effectiveInset > 0 &&
+        initialHeight !== undefined) {
         return {
             kind: 'wrapper',
-            wrapperStyle: [style, { height: initialHeight - effectiveInset, flex: COLLAPSED_FLEX }],
+            wrapperStyle: [
+                style,
+                { height: initialHeight - effectiveInset, flex: COLLAPSED_FLEX },
+            ],
         };
     }
     return { kind: 'wrapper', wrapperStyle: style };

package/build/view/render-modal.js

@@ -5,7 +5,7 @@
 // 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 { dlog, } from '@symbiote-native/engine';
 import { el } from '../descriptor.js';
 // 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
@@ -45,7 +45,9 @@ export function renderModal(view) {
         backdropOverride,
     ];
     const resolvedPresentationStyle = view.presentationStyle ??
-        (view.transparent === true ? PRESENTATION_OVER_FULL_SCREEN : PRESENTATION_FULL_SCREEN);
+        (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

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

@@ -8,7 +8,9 @@ import { dlog } from '@symbiote-native/engine';
 // 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;
+    return disabled !== undefined
+        ? { ...accessibilityState, disabled }
+        : accessibilityState;
 }
 // The 3 agnostic gating predicates behind the listener bag below. Angular has no bag to spread -
 // it binds these directly onto template event outputs (see adapters/angular/src/components/

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

@@ -32,7 +32,7 @@ export function readLayoutNumber(event, key) {
 // 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 { measured, inverted, scrollViewHeight, layoutY, layoutHeight, nextHeaderLayoutY, } = params;
     const inputRange = [-1, 0];
     const outputRange = [0, 0];
     if (measured) {

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

@@ -26,7 +26,7 @@ export function resolveDecelerationRate(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.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
@@ -69,7 +69,12 @@ export function selectScrollIntrinsics(isHorizontal, contentContainerStyle) {
     const contentStyle = isHorizontal
         ? [contentContainerStyle, { flexDirection: 'row' }]
         : contentContainerStyle;
-    return { scrollViewIntrinsic, contentIntrinsic, scrollViewBaseStyle, contentStyle };
+    return {
+        scrollViewIntrinsic,
+        contentIntrinsic,
+        scrollViewBaseStyle,
+        contentStyle,
+    };
 }
 // When sticky headers are active the scroll offset must reach the AnimatedValue; RN raises the scroll
 // event rate for it (ScrollView.js:1798): throttle 1 on the native driver (it can afford every frame),
@@ -81,7 +86,8 @@ export function resolveScrollForwarding(inputs) {
     // maintainVisibleContentPosition (and Android snapToAlignment) anchor against MOUNTED cell views;
     // Android Fabric view-flattens layout-only cells away, so RN keeps them as real views with
     // collapsableChildren={false} on the content container (ScrollView.js preserveChildren). No-op on iOS.
-    const collapsableChildren = inputs.maintainVisibleContentPosition !== undefined || inputs.snapToAlignment !== undefined;
+    const collapsableChildren = inputs.maintainVisibleContentPosition !== undefined ||
+        inputs.snapToAlignment !== undefined;
     if (!inputs.hasStickyHeaders) {
         return {
             mode: 'plain',

package/build/view/render-switch.js

@@ -8,13 +8,22 @@ import { dlog } from '@symbiote-native/engine';
 import { el } from '../descriptor.js';
 // RN rounds the iOS background pill to this radius when ios_backgroundColor is set.
 const IOS_BACKGROUND_BORDER_RADIUS = 16;
+// The `-managed` spelling, NOT the plain one the engine's Switch behavior registers under
+// (`core/components/src/behaviors/switch.ts`) — the wrapper still runs its own lifecycle
+// (lastNativeReport, the snap-back effect), so it may not share a tag the behavior registry would
+// also attach to; see that behavior's module header and `.claude/rules/host-primitive-tier.md`,
+// "A lowered element and its wrapper must not share an intrinsic tag" (the TextInput precedent).
+const SWITCH_MANAGED_INTRINSIC = 'symbiote-switch-managed';
 // 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 }];
+    return [
+        style,
+        { backgroundColor: color, borderRadius: IOS_BACKGROUND_BORDER_RADIUS },
+    ];
 }
 export function renderSwitch(view, platform) {
     dlog(`Switch render value=${view.value} disabled=${String(view.disabled)}`);
@@ -29,5 +38,5 @@ export function renderSwitch(view, platform) {
         thumbTintColor: view.thumbColor,
         style: foldIosBackground(view.style, view.ios_backgroundColor),
     };
-    return el('symbiote-switch', props);
+    return el(SWITCH_MANAGED_INTRINSIC, props);
 }

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

@@ -8,8 +8,12 @@ import { dlog } from '@symbiote-native/engine';
 import { el } from '../descriptor.js';
 // 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';
+// The `-managed` spelling, NOT the plain one the lowering transforms emit. Both resolve to the
+// same native view; the tag is what decides whether the engine's TextInput machine attaches, and
+// on this path the adapter's own lifecycle already owns that state. Sharing the tag would run both
+// copies at once. Full reasoning in `component-names/shared.ts`.
+const SINGLELINE_INTRINSIC = 'symbiote-text-input-managed';
+const MULTILINE_INTRINSIC = 'symbiote-text-input-multiline-managed';
 export function renderTextInput(view) {
     const intrinsic = view.multiline ? MULTILINE_INTRINSIC : SINGLELINE_INTRINSIC;
     dlog(`TextInput render multiline=${String(view.multiline)} ` +

package/build/view/render-touchable-highlight.d.ts

@@ -1,2 +1,12 @@
 import type { IViewStyle } from '@symbiote-native/engine';
-export declare function highlightPressedStyle<TStyle>(pressed: boolean, style: TStyle, underlayColor: string, activeOpacity: number): TStyle | [TStyle, IViewStyle];
+export interface ITouchableHighlightExtraStyles {
+    underlay: IViewStyle;
+    child: IViewStyle;
+}
+export interface ITouchableHighlightUnderlayView {
+    shown: boolean;
+    hasPressHandler: boolean;
+    underlayColor?: string;
+    activeOpacity?: number;
+}
+export declare function resolveHighlightExtraStyles(view: ITouchableHighlightUnderlayView): ITouchableHighlightExtraStyles | undefined;

package/build/view/render-touchable-highlight.js

@@ -1,12 +1,13 @@
 // TouchableHighlight underlay: the shared render decision (framework-agnostic). RN drives the
-// highlight with setState (not Animated) — while pressed it paints underlayColor + lowers the child
-// opacity, at rest it is the bare style (TouchableHighlight.js). This 3-line gating was triplicated
-// verbatim across adapters; it lives here once, prop-driven. Each adapter passes its own resolved
-// style base (React the raw style, Angular the anchor+style array, Vue the untyped attrs style) plus
-// the live `pressed`, so the base is generic — the overlay is layered on top when pressed.
-export function highlightPressedStyle(pressed, style, underlayColor, activeOpacity) {
-    if (!pressed)
-        return style;
-    const overlay = { backgroundColor: underlayColor, opacity: activeOpacity };
-    return [style, overlay];
+// highlight with setState, not Animated — while shown it paints underlayColor and lowers the child
+// opacity; at rest it is the bare style (TouchableHighlight.js).
+import { DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_UNDERLAY_COLOR, } from '../state/touchable.js';
+// undefined = paint nothing extra, which is RN's `extraStyles: null` state.
+export function resolveHighlightExtraStyles(view) {
+    if (!view.shown || !view.hasPressHandler)
+        return undefined;
+    return {
+        underlay: { backgroundColor: view.underlayColor ?? DEFAULT_UNDERLAY_COLOR },
+        child: { opacity: view.activeOpacity ?? DEFAULT_HIGHLIGHT_CHILD_OPACITY },
+    };
 }

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

@@ -14,7 +14,11 @@ export function canUseNativeForeground() {
         Platform.Version >= ANDROID_FOREGROUND_MIN_VERSION);
 }
 export function selectableBackground(rippleRadius) {
-    return { type: 'ThemeAttrAndroid', attribute: 'selectableItemBackground', rippleRadius };
+    return {
+        type: 'ThemeAttrAndroid',
+        attribute: 'selectableItemBackground',
+        rippleRadius,
+    };
 }
 export function selectableBackgroundBorderless(rippleRadius) {
     return {