@symbiote-native/components 0.5.0 → 2.0.0

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

@@ -112,7 +112,31 @@ function readSourceUri(source) {
     }
     return undefined;
 }
-export function renderImage(view) {
+// The names `renderImage` CONSUMES rather than forwards — the fold's input list, and the reason it
+// is exported: an adapter that splits props before calling renderImage was copying this list by
+// hand, and a name added here reached the copy only if someone remembered. The Image behavior's
+// `foldPayload` reads it too, so the flat path and the view path cannot drift apart.
+export const IMAGE_VIEW_PROP_NAMES = [
+    'source',
+    'defaultSource',
+    'loadingIndicatorSource',
+    'style',
+    'resizeMode',
+    'tintColor',
+    'src',
+    'srcSet',
+    'alt',
+    'width',
+    'height',
+    'crossOrigin',
+    'referrerPolicy',
+];
+// The whole of Image's prop mapping, with the `el()` wrap taken off. Split out because a LOWERED
+// `<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).
+export function mapImageProps(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
@@ -138,6 +162,9 @@ export function renderImage(view) {
     if (view.loadingIndicatorSource !== undefined) {
         mapped.loadingIndicatorSrc = readSourceUri(view.loadingIndicatorSource);
     }
+    return mapped;
+}
+export function renderImage(view) {
     dlog('Image -> RCTImageView');
-    return el('symbiote-image', mapped);
+    return el('image', mapImageProps(view));
 }

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

@@ -6,4 +6,6 @@ export type IInputAccessoryViewViewProps = {
     style?: IStyleProp<IViewStyle>;
     passthrough: Record<string, unknown>;
 };
+export declare const INPUT_ACCESSORY_VIEW_PROP_NAMES: readonly ["nativeID", "backgroundColor", "style"];
+export declare function mapInputAccessoryViewProps(view: IInputAccessoryViewViewProps): Record<string, unknown>;
 export declare function renderInputAccessoryView(view: IInputAccessoryViewViewProps): IDescriptor;

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

@@ -6,16 +6,48 @@
 // verbatim across adapters: React and Vue both bridge this Descriptor.
 import { dlog, } from '@symbiote-native/engine';
 import { el } from '../descriptor.js';
-export function renderInputAccessoryView(view) {
-    const props = {
+// The names this fold CONSUMES, exported so an adapter splitting props before calling the render fn
+// reads the list instead of copying it — the drift `render-image.ts` records paying for once.
+export const INPUT_ACCESSORY_VIEW_PROP_NAMES = [
+    'nativeID',
+    'backgroundColor',
+    'style',
+];
+// The whole mapping, so the wrapper path and the lowered path share ONE implementation. There is no
+// aliasing here at all: every consumed name leaves under the same name, which is what makes the
+// fold idempotent by construction (asserted in `behaviors/input-accessory-view.test.ts`, not
+// assumed).
+//
+// The `undefined` guards on `nativeID` / `backgroundColor` are LOAD-BEARING, and the asymmetry with
+// the unguarded `style` above is not the tell it looks like.
+//
+// They were removed on 2026-09-01 on the reasoning `.claude/rules/fabric-boolean-event-gates.md`
+// states — `setProp` collapses an undefined value to an absent key, so a conditional write in a
+// shared render fn is cosmetic — and that reasoning was checked against a payload carrying no `id`,
+// which is exactly the case where it holds. The equivalence oracle caught it on its first run:
+//
+//   authored <InputAccessoryView id="p" testID="p" />
+//   guarded    RCTInputAccessoryView{testID, nativeID:"p"}
+//   unguarded  RCTInputAccessoryView{testID}              <- the alias result, deleted
+//
+// `nativeID` has an ALIAS SOURCE. The wrapper leaves `id` in `passthrough`, the renderer's
+// PROP_ALIASES renames it to `nativeID`, and a `nativeID: undefined` written afterwards deletes what
+// the rename just produced — last write wins, and `undefined` collapsing to "absent" is precisely
+// what makes it destructive rather than inert. So the guard is cosmetic for a key nothing else can
+// produce, and required for a key an alias also targets.
+export function mapInputAccessoryViewProps(view) {
+    const out = {
         ...view.passthrough,
         style: view.style,
     };
     if (view.nativeID !== undefined)
-        props.nativeID = view.nativeID;
+        out.nativeID = view.nativeID;
     if (view.backgroundColor !== undefined)
-        props.backgroundColor = view.backgroundColor;
+        out.backgroundColor = view.backgroundColor;
+    return out;
+}
+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', props, []);
+    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.
@@ -8,6 +8,12 @@ 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 = '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.
@@ -32,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 = '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,
+};