@symbiote-native/components 1.0.0 → 2.0.0

package/build/view/render-button.js

@@ -1,23 +1,112 @@
-// Button: shared render half (framework-agnostic), matching RN's iOS shape (Button.js): a
-// TouchableOpacity wrapping a Text. Each adapter composes its own TouchableOpacity + Text
-// around the pieces below.
+// Button: shared render half (framework-agnostic). Ported against RN's own
+// `Libraries/Components/Button.js` — a touchable wrapping a `View` wrapping a `Text`, where the
+// VIEW is what carries the look on Android and is empty on iOS.
+//
+// The inner view is not optional chrome. RN's Button is the one control in the library that ships
+// a finished appearance, and on Android that appearance — a filled, elevated, rounded Material
+// button with an uppercased label — lives entirely on that node. A port that renders only the
+// touchable and the text is an iOS port, which is what this file was until 2026-09-09: blue text on
+// nothing, wherever Android was.
+//
+// What is NOT here, because a layer below already does it: the `aria-*` -> `accessibilityState`
+// fold RN performs in `Button.js:326-331`. The engine folds those for every node
+// (`core/engine/src/accessibility-props.ts`), so repeating it here would fold twice.
+import { Platform } from '@symbiote-native/engine';
+// Button.js:394-437, one constant per literal so a value cannot drift silently.
 const IOS_BUTTON_BLUE = '#007AFF';
-const IOS_DISABLED_GREY = '#cdcdcd';
+const IOS_DISABLED_TEXT = '#cdcdcd';
+const ANDROID_BUTTON_BLUE = '#2196F3';
+const ANDROID_DISABLED_BACKGROUND = '#dfdfdf';
+const ANDROID_DISABLED_TEXT = '#a1a1a1';
+const ANDROID_TEXT = 'white';
+const ANDROID_ELEVATION = 4;
+const ANDROID_DISABLED_ELEVATION = 0;
+const ANDROID_BORDER_RADIUS = 2;
+const TEXT_MARGIN = 8;
+const IOS_FONT_SIZE = 18;
+const ANDROID_FONT_WEIGHT = '500';
 // RN's Button is accessibilityRole="button"; the role string is a native accessibility enum value.
 export const BUTTON_ACCESSIBILITY_ROLE = 'button';
+// `styles.text` — the platform-invariant half plus the platform's own. RN spells the margin as
+// MARGIN, not padding: the label pushes the button's edges outward rather than insetting itself,
+// so a background (Android) or a tap target (both) is 16pt taller than the glyphs.
 export const buttonTextStyle = {
-    color: IOS_BUTTON_BLUE,
     textAlign: 'center',
-    padding: 8,
-    fontSize: 18,
+    margin: TEXT_MARGIN,
+    ...Platform.select({
+        ios: { color: IOS_BUTTON_BLUE, fontSize: IOS_FONT_SIZE },
+        android: { color: ANDROID_TEXT, fontWeight: ANDROID_FONT_WEIGHT },
+        default: { color: IOS_BUTTON_BLUE, fontSize: IOS_FONT_SIZE },
+    }),
 };
-// The label text style with the color folded in: an explicit `color` tints the label (iOS), and
-// `disabled` greys it out (disabled wins over color, matching RN's Button.js).
+// `styles.button` — empty on iOS, the whole Material look on Android.
+export const buttonViewStyle = Platform.select({
+    ios: {},
+    android: {
+        elevation: ANDROID_ELEVATION,
+        backgroundColor: ANDROID_BUTTON_BLUE,
+        borderRadius: ANDROID_BORDER_RADIUS,
+    },
+    default: {},
+}) ?? {};
+/**
+ * The label style with `color` and `disabled` folded in.
+ *
+ * `color` tints the TEXT on iOS and the BUTTON on Android (Button.js:318-324), so on Android this
+ * ignores it — see `resolveButtonViewStyle`, which is where it lands there. `disabled` wins over
+ * `color` on both, because RN pushes `textDisabled` after the tint.
+ */
 export function resolveButtonTextStyle(color, disabled) {
     const style = { ...buttonTextStyle };
-    if (color !== undefined)
+    if (color !== undefined && Platform.OS !== 'android')
         style.color = color;
-    if (disabled === true)
-        style.color = IOS_DISABLED_GREY;
+    if (disabled === true) {
+        style.color =
+            Platform.OS === 'android' ? ANDROID_DISABLED_TEXT : IOS_DISABLED_TEXT;
+    }
+    return style;
+}
+/**
+ * The inner view's style with `color` and `disabled` folded in — `{}` on iOS in every combination,
+ * which is RN's own answer there and the reason the node looked droppable.
+ */
+export function resolveButtonViewStyle(color, disabled) {
+    if (Platform.OS !== 'android')
+        return buttonViewStyle;
+    const style = { ...buttonViewStyle };
+    if (color !== undefined)
+        style.backgroundColor = color;
+    if (disabled === true) {
+        style.elevation = ANDROID_DISABLED_ELEVATION;
+        style.backgroundColor = ANDROID_DISABLED_BACKGROUND;
+    }
     return style;
 }
+/**
+ * The label as it is rendered: UPPERCASE on Android (Button.js:352-353).
+ *
+ * RN also asserts the title is a string one line above. Not reproduced: the assert is a dev-only
+ * `invariant`, and every adapter here types `title: string`.
+ */
+export function resolveButtonTitle(title) {
+    return Platform.OS === 'android' ? title.toUpperCase() : title;
+}
+/**
+ * Whether the button is disabled, which `aria-disabled` may decide on its own.
+ *
+ * Button.js:337-338 — `props.disabled != null ? props.disabled : accessibilityState.disabled`. The
+ * engine already folds `aria-disabled` into the committed `accessibilityState`, but that fold is a
+ * PAYLOAD fold: it cannot suppress the press or grey the label, which is what this is for.
+ */
+export function resolveButtonDisabled(disabled, ariaDisabled, accessibilityState) {
+    if (disabled !== undefined)
+        return disabled;
+    return ariaDisabled ?? accessibilityState?.disabled;
+}
+/**
+ * Button.js:356-359 — `'no'` becomes `'no-hide-descendants'`, so the label inside cannot take
+ * focus separately from the button that contains it.
+ */
+export function resolveButtonImportantForAccessibility(value) {
+    return value === 'no' ? 'no-hide-descendants' : value;
+}

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

@@ -132,7 +132,7 @@ export const IMAGE_VIEW_PROP_NAMES = [
     'referrerPolicy',
 ];
 // The whole of Image's prop mapping, with the `el()` wrap taken off. Split out because a LOWERED
-// `<symbiote-image>` has no component body to run it in: its behavior's `foldPayload` needs the same
+// `<image>` has no component body to run it in: its behavior's `foldPayload` needs the same
 // bag at commit time, and a second implementation of this is the exact drift this file already paid
 // for once (`adapters/svelte/src/components/image/image-logic.ts` reproduces it by hand, with a
 // comment saying it had to because nothing here was exported).
@@ -166,5 +166,5 @@ export function mapImageProps(view) {
 }
 export function renderImage(view) {
     dlog('Image -> RCTImageView');
-    return el('symbiote-image', mapImageProps(view));
+    return el('image', mapImageProps(view));
 }

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

@@ -49,5 +49,5 @@ export function mapInputAccessoryViewProps(view) {
 export function renderInputAccessoryView(view) {
     dlog('InputAccessoryView -> RCTInputAccessoryView');
     // Empty structural children: the adapter appends the user children directly under the host.
-    return el('symbiote-input-accessory-view', mapInputAccessoryViewProps(view), []);
+    return el('input-accessory-view', mapInputAccessoryViewProps(view), []);
 }

package/build/view/render-modal.js

@@ -2,7 +2,7 @@
 // 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
+// maps to the `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';
@@ -52,8 +52,8 @@ export function renderModal(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', {
+    const container = el('view', { style: containerStyle, collapsable: false }, []);
+    return el('modal', {
         ...view.passthrough,
         style: MODAL_HOST_STYLE,
         transparent: view.transparent,

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

@@ -1,6 +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 resolvePressableFocusable(focusable: boolean | undefined): boolean;
+export declare function resolveTouchableFocusable(focusable: boolean | undefined, hasOnPress: boolean, disabled: boolean | undefined): boolean;
 export declare function shouldSuppressPress(disabled: boolean | undefined): boolean;
 export declare function shouldClaimResponder(disabled: boolean | undefined): boolean;
 export declare function isTerminationAllowed(cancelable: boolean | undefined): boolean;

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

@@ -12,6 +12,30 @@ export function resolveDisabledAccessibilityState(accessibilityState, disabled)
         ? { ...accessibilityState, disabled }
         : accessibilityState;
 }
+// RN computes `focusable` in all five touchables and we computed it nowhere until 2026-09-09, so a
+// DISABLED control stayed focusable — a keyboard, a TV remote or switch control could land on
+// something that cannot be pressed. There are TWO formulas, split by primitive and not by platform;
+// do not collapse them.
+//
+// Pressable defaults it ON (Pressable.js:258). `!== false`, not `?? true`: only a literal `false`
+// opts out, the same shape `accessible` uses one file over.
+export function resolvePressableFocusable(focusable) {
+    return focusable !== false;
+}
+// The four Touchable* additionally require a press handler and a non-disabled state —
+// TouchableOpacity.js:336-340, TouchableHighlight.js:370-374,
+// TouchableWithoutFeedback.js:263-266, TouchableNativeFeedback.js:369-372, one expression verbatim.
+//
+// `hasOnPress` is RN's `onPress !== undefined` and NOT `hasTouchablePressHandler`, which also counts
+// onPressIn/onPressOut/onLongPress — that gate is the underlay's, and reusing it here would make a
+// press-in-only Touchable focusable where RN leaves it out of the focus order.
+//
+// A Touchable that composes our Pressable passes the result DOWN as the `focusable` prop; Pressable
+// then applies `!== false` to a value that is already boolean, which is why the two compose without
+// either side knowing about the other.
+export function resolveTouchableFocusable(focusable, hasOnPress, disabled) {
+    return (resolvePressableFocusable(focusable) && hasOnPress && disabled !== true);
+}
 // 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/
 // pressable/index.ts), so they're exported and shared rather than folded back into

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

@@ -26,6 +26,7 @@ export interface IScrollForwarding {
     capturesViewportHeight: boolean;
     collapsableChildren: boolean;
 }
+export declare function preservesContentChildren(maintainVisibleContentPosition: unknown, snapToAlignment: unknown): boolean;
 export declare function resolveScrollForwarding(inputs: IScrollForwardingInputs): IScrollForwarding;
 export type IContentSize = {
     width: number;

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

@@ -58,11 +58,11 @@ export function selectScrollIntrinsics(isHorizontal, contentContainerStyle) {
     // 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';
+        ? 'horizontal-scroll-view'
+        : 'scroll-view';
     const contentIntrinsic = isHorizontal
-        ? 'symbiote-horizontal-scroll-content'
-        : 'symbiote-scroll-content';
+        ? 'horizontal-scroll-content'
+        : 'scroll-content';
     const scrollViewBaseStyle = isHorizontal
         ? SCROLL_VIEW_BASE_HORIZONTAL
         : SCROLL_VIEW_BASE_VERTICAL;
@@ -82,12 +82,21 @@ export function selectScrollIntrinsics(isHorizontal, contentContainerStyle) {
 // throttle passes through untouched. These two magic numbers were copied into all three adapters.
 const STICKY_NATIVE_SCROLL_THROTTLE = 1;
 const STICKY_JS_SCROLL_THROTTLE = 16;
+// 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:1731 `preserveChildren`).
+// No-op on iOS.
+//
+// Named and exported rather than inlined because the LOWERED path needs the same answer from a
+// different place — the host behavior's slot fold, which has the owner's raw props and none of the
+// sticky inputs `resolveScrollForwarding` also takes. A second inline copy would be invisible to
+// `tests/lowered-primitive-fold-parity.test.ts`, whose oracle is shared value IMPORTS.
+export function preservesContentChildren(maintainVisibleContentPosition, snapToAlignment) {
+    return (maintainVisibleContentPosition !== undefined ||
+        snapToAlignment !== undefined);
+}
 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 = preservesContentChildren(inputs.maintainVisibleContentPosition, inputs.snapToAlignment);
     if (!inputs.hasStickyHeaders) {
         return {
             mode: 'plain',

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

@@ -5,9 +5,12 @@ export type ISwitchTrackColor = {
     false?: string;
     true?: string;
 };
+export type ISwitchChangeEvent = ISymbioteEvent & {
+    value: boolean;
+};
 export interface ISwitchProps extends IAccessibilityProps, IAriaProps {
     value?: boolean;
-    onValueChange?: (value: boolean, event: ISymbioteEvent) => void;
+    onValueChange?: (event: ISwitchChangeEvent) => void;
     disabled?: boolean;
     trackColor?: ISwitchTrackColor;
     thumbColor?: string;

package/build/view/render-switch.js

@@ -1,5 +1,5 @@
 // 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
+// `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.
@@ -13,7 +13,7 @@ const IOS_BACKGROUND_BORDER_RADIUS = 16;
 // (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';
+const SWITCH_MANAGED_INTRINSIC = '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.

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

@@ -12,8 +12,8 @@ import { el } from '../descriptor.js';
 // 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';
+const SINGLELINE_INTRINSIC = 'text-input-managed';
+const MULTILINE_INTRINSIC = '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-native-feedback.d.ts

@@ -15,3 +15,22 @@ export declare function selectableBackground(rippleRadius?: number): IThemeAttrB
 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>;
+/**
+ * RN's four statics, under RN's own spelling — `TouchableNativeFeedback.Ripple(color, borderless)`.
+ *
+ * A NAMESPACE OBJECT rather than a component value, and that is the whole of what survived the
+ * wrapper: the element is a tag now, and a tag is a string, which cannot carry properties. Shared
+ * rather than copied five times because every member is a pure dict producer with no framework in
+ * it; each adapter re-exports it verbatim, as it does the background types beside it.
+ *
+ * NOT the spelling for NEW code, and not redundant either. RN's docs point at `Pressable`'s
+ * declarative `android_ripple={{ color, borderless }}`, which the pressable behavior resolves
+ * (`behaviors/pressable.ts`, `asRippleConfig`). These four stay because the
+ * `touchable-native-feedback` tag folds `background` and nothing else produces that value.
+ */
+export declare const TouchableNativeFeedback: {
+    SelectableBackground: typeof selectableBackground;
+    SelectableBackgroundBorderless: typeof selectableBackgroundBorderless;
+    Ripple: typeof rippleBackground;
+    canUseNativeForeground: typeof canUseNativeForeground;
+};

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

@@ -41,3 +41,22 @@ export function backgroundProps(background, useForeground) {
     }
     return { nativeBackgroundAndroid: background };
 }
+/**
+ * RN's four statics, under RN's own spelling — `TouchableNativeFeedback.Ripple(color, borderless)`.
+ *
+ * A NAMESPACE OBJECT rather than a component value, and that is the whole of what survived the
+ * wrapper: the element is a tag now, and a tag is a string, which cannot carry properties. Shared
+ * rather than copied five times because every member is a pure dict producer with no framework in
+ * it; each adapter re-exports it verbatim, as it does the background types beside it.
+ *
+ * NOT the spelling for NEW code, and not redundant either. RN's docs point at `Pressable`'s
+ * declarative `android_ripple={{ color, borderless }}`, which the pressable behavior resolves
+ * (`behaviors/pressable.ts`, `asRippleConfig`). These four stay because the
+ * `touchable-native-feedback` tag folds `background` and nothing else produces that value.
+ */
+export const TouchableNativeFeedback = {
+    SelectableBackground: selectableBackground,
+    SelectableBackgroundBorderless: selectableBackgroundBorderless,
+    Ripple: rippleBackground,
+    canUseNativeForeground,
+};