@symbiote-native/angular 1.0.0 → 2.0.0

package/src/components.ts

@@ -4,11 +4,21 @@
 // real Angular input so RN `StyleProp` arrays/objects are flattened and forwarded through the
 // custom renderer, instead of being misinterpreted by Angular's CSS style engine.
 
-export { ActivityIndicator } from './components/activity-indicator';
-export type { IActivityIndicatorProps } from './components/activity-indicator';
-export { Image, setImageSourceResolver } from './components/image';
-export { InputAccessoryView } from './components/input-accessory-view';
-export type { IAngularInputAccessoryViewProps } from './components/input-accessory-view';
+// `ActivityIndicator` is a TAG — `<activity-indicator>`, matched by `ActivityIndicatorElement` — and there is nothing to import in its
+// place. RN's ActivityIndicator has no statics, so the name exports nothing at all now; the prop
+// type stays, for a component forwarding a bag.
+export type { IActivityIndicatorProps } from './components/activity-indicator-props';
+// `Image` is a TAG — `<image>`, matched by `ImageElement` — and the name now exports RN's Image
+// STATICS namespace (`Image.getSize` / `.prefetch` / `.queryCache`), which is what an app still
+// calls it for. `Animated.Image` keeps the component spelling; it is not a primitive.
+export { Image } from './modules/image';
+export type { IImageStatics } from './modules/image';
+export { setImageSourceResolver } from '@symbiote-native/components';
+// `InputAccessoryView` is a TAG — `<input-accessory-view>`, matched by
+// `InputAccessoryViewElement` — and there is nothing to import in its place. RN gives it no
+// statics, so the name exports nothing at all now; an app's `imports: [InputAccessoryView]` becomes
+// `imports: [InputAccessoryViewElement]`. Only the prop type stays.
+export type { IAngularInputAccessoryViewProps } from './components/input-accessory-view-props';
 export { Modal } from './components/modal';
 export type {
   IAngularModalProps,
@@ -24,56 +34,95 @@ export type {
   IResizeMode,
   IImageSize,
   IImageCacheStatus,
-} from './components/image';
-export { Pressable } from './components/pressable';
-export type { IAngularPressableProps } from './components/pressable';
-export { SafeAreaView } from './components/safe-area-view';
-export type { IAngularSafeAreaViewProps } from './components/safe-area-view';
-export { Switch } from './components/switch';
-export type { ISwitchProps, ISwitchTrackColor } from './components/switch';
-export { ImageBackground } from './components/image-background';
-export type { IAngularImageBackgroundProps } from './components/image-background';
+} from '@symbiote-native/components';
+// `Pressable` is a TAG — `<pressable>`, matched by `PressableElement` — and there is nothing to
+// import in its place. RN gives it no statics, so the name exports nothing at all now; the press
+// machine is an engine behavior on the node (`registerPressableBehavior`). An app's
+// `imports: [Pressable]` becomes `imports: [PressableElement]`. Only the prop types stay.
+export type {
+  IAngularPressableProps,
+  IAngularPressableInputs,
+} from './components/pressable-props';
+// `SafeAreaView` is a TAG — `<safe-area-view>`, matched by `SafeAreaViewElement` — and there is
+// nothing to import in its place. RN gives it no statics, so the name exports nothing at all now;
+// an app's `imports: [SafeAreaView]` becomes `imports: [SafeAreaViewElement]`. Only the prop type
+// stays.
+export type { IAngularSafeAreaViewProps } from './components/safe-area-view-props';
+// `Switch` is a TAG — `<switch>`, matched by `SwitchElement` — and there is nothing to import in
+// its place. RN gives it no statics, so the name exports nothing at all now; `[(value)]` is handled
+// by the renderer and `[(ngModel)]` by `SwitchValueAccessor` (`../elements`), which is where the
+// wrapper's `NG_VALUE_ACCESSOR` went. Only the prop types stay.
+export type {
+  ISwitchProps,
+  ISwitchTrackColor,
+  ISwitchChangeEvent,
+} from '@symbiote-native/components';
+// `ImageBackground` is a TAG — `<image-background>`, matched by `ImageBackgroundElement` in
+// `elements.ts` — and there is nothing to import in its place. The prop type stays, for a
+// component forwarding a bag and for that directive's own input types.
+export type { IAngularImageBackgroundProps } from './components/image-background-props';
 export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
 export type {
   IAngularKeyboardAvoidingViewProps,
   IKeyboardAvoidingBehavior,
 } from './components/keyboard-avoiding-view';
-export { RefreshControl } from './components/refresh-control';
-export type { IAngularRefreshControlProps } from './components/refresh-control';
-export { TextInput } from './components/text-input';
+// `RefreshControl` is a TAG — `<refresh-control>`, matched by `RefreshControlElement` — and there
+// is nothing to import in its place. The controlled-spinner handshake is
+// `registerRefreshControlBehavior` (`../register.ts`); only the prop type stays.
+export type { IAngularRefreshControlProps } from './components/refresh-control-props';
+// `TextInput` is a TAG — `<text-input>` / `<text-input-multiline>`, matched by `TextInputElement`
+// and `MultilineTextInputElement` — and there is nothing to import in its place. RN gives it no
+// statics, so the name exports nothing at all now; `[(value)]` is handled by the renderer,
+// `[(ngModel)]` by `TextInputValueAccessor` (`../elements`), and the imperative handle by
+// `buildTextInputHandle` from `@symbiote-native/components` over the node a template ref hands back.
+export type { IAngularTextInputProps } from './components/text-input-props';
 export type {
-  IAngularTextInputProps,
   IEnterKeyHint,
   IInputMode,
   ISubmitBehavior,
   ITextInputHandle,
   ITextInputSelection,
-} from './components/text-input';
-export { TouchableNativeFeedback } from './components/touchable-native-feedback';
+  ITextInputChangeEvent,
+} from '@symbiote-native/components';
+// `TouchableNativeFeedback` is now RN's STATIC NAMESPACE, not a component: the element is the tag
+// `<touchable-native-feedback>`, matched by `TouchableNativeFeedbackElement` (../elements), which
+// commits no node of its own and clones onto its single child. `.Ripple(…)` /
+// `.SelectableBackground(…)` are unchanged; an app's `imports: [TouchableNativeFeedback]` becomes
+// `imports: [TouchableNativeFeedbackElement]`.
+export { TouchableNativeFeedback } from '@symbiote-native/components';
 export type {
-  IAngularTouchableNativeFeedbackProps,
   INativeFeedbackBackground,
   IRippleBackground,
   IThemeAttrBackground,
-} from './components/touchable-native-feedback';
-export {
-  TouchableHighlight,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-} from './components/touchable';
+} from '@symbiote-native/components';
+export type { IAngularTouchableNativeFeedbackProps } from './components/touchable-native-feedback/touchable-native-feedback-props';
+// `TouchableOpacity` and `TouchableHighlight` are TAGS — `<touchable-opacity>` and
+// `<touchable-highlight>`, matched by their element directives — and RN gives neither any statics,
+// so the names export nothing at all now. Both machines run on the engine node
+// (`registerTouchableOpacityBehavior` / `registerTouchableHighlightBehavior`). Only the prop types
+// stay.
 export type {
   IAngularTouchableHighlightProps,
   IAngularTouchableOpacityProps,
-  IAngularTouchableWithoutFeedbackProps,
-} from './components/touchable';
-export { ScrollView, ScrollViewStickyHeader } from './components/scroll-view';
+} from './components/touchable-props';
+// `TouchableWithoutFeedback` is a TAG — `<touchable-without-feedback>`, matched by
+// `TouchableWithoutFeedbackElement` (../elements) — and RN gives it no statics, so like `Button` the
+// name exports nothing now; an app's `imports: [TouchableWithoutFeedback]` becomes
+// `imports: [TouchableWithoutFeedbackElement]`. Only the prop type stays.
+export type { IAngularTouchableWithoutFeedbackProps } from './components/touchable-without-feedback/touchable-without-feedback-props';
+// `ScrollView` is a TAG — `<scroll-view>` / `<horizontal-scroll-view>`, matched by
+// `ScrollViewElement` / `HorizontalScrollViewElement` — and there is nothing to import in its
+// place. The engine owns the content node, sticky headers and the refresh-control claim
+// (`registerScrollViewBehavior`, `../register.ts`); the imperative handle comes from
+// `buildScrollViewHandle` over the node a template ref hands back. Only the prop types stay.
 export type {
   IAngularScrollViewProps,
   IScrollViewHandle,
-  IStickyHeaderComponentType,
-} from './components/scroll-view';
-export { Button } from './components/button';
-export type { IButtonProps } from './components/button';
+} from './components/scroll-view-props';
+// `Button` is a TAG — `<button>`, matched by `ButtonElement` — and there is nothing to import in
+// its place. RN's Button has no statics, so the name exports nothing at all now; the prop type
+// stays, for a component forwarding a bag.
+export type { IButtonProps } from './components/button-props';
 export {
   VirtualizedList,
   VListEmptyDirective,
@@ -154,6 +203,6 @@ export {
   stableAnchorStyle,
 } from './primitives/index';
 
-// Public ergonomic aliases: <View> and <Text> resolve directly to the primitive hosts
+// Public ergonomic aliases: <view> and <text> resolve directly to the primitive hosts
 // (no extra Angular bookkeeping anchor), while the internal symbiote-* selectors remain
 // available for composed adapter templates.

package/src/create-portal/index.ts

@@ -29,7 +29,7 @@
 //
 // THE MARKER GOES ON AN `<ng-container>` INSIDE THE TARGET, never on the target element. A
 // ViewContainerRef anchors AT its host and `createEmbeddedView` inserts after that anchor, so
-// `<View portalOutlet>` delivers a SIBLING where React's `createPortal(node, host)` and Vue's
+// `<view portalOutlet>` delivers a SIBLING where React's `createPortal(node, host)` and Vue's
 // `<Teleport to>` deliver a child. Device-reported 2026-09-02: a card portaled into an absolutely
 // positioned overlay laid out in the scroll flow, since the overlay cannot centre a node that is
 // not in it.
@@ -53,9 +53,9 @@ import { isAnchor, isSymbioteNode } from '@symbiote-native/engine';
  *  variable as `*portal`'s target:
  *
  *  ```html
- *  <View class="overlay-host">
+ *  <view class="overlay-host">
  *    <ng-container portalOutlet #overlayHost="portalOutlet"></ng-container>
- *  </View>
+ *  </view>
  *  ```
  */
 @Directive({
@@ -74,8 +74,8 @@ export class PortalOutletDirective {
       throw new Error(
         'portalOutlet must sit on an <ng-container> inside the target host, not on the host ' +
           'element: a ViewContainerRef anchored at an element inserts AFTER it, so the ported ' +
-          'content would become the host\'s sibling. Write <View class="…">' +
-          '<ng-container portalOutlet #x="portalOutlet"></ng-container></View>.',
+          'content would become the host\'s sibling. Write <view class="…">' +
+          '<ng-container portalOutlet #x="portalOutlet"></ng-container></view>.',
       );
     }
   }

package/src/create-tunnel/index.ts

@@ -22,7 +22,7 @@
 // `*tunnelIn` directly on the portable content, the same way `*ngIf` sits directly on an
 // element instead of wrapping it in a named `<ng-template>`:
 //   @if (toastVisible) {
-//     <View *tunnelIn="overlayTunnel"><Text>…</Text></View>
+//     <view *tunnelIn="overlayTunnel"><text>…</text></view>
 //   }
 //   …
 //   <tunnel-out [tunnel]="overlayTunnel" />

package/src/diagnostics.ts

@@ -16,7 +16,7 @@
 export interface IAngularProfile {
   // Change-detection passes: RendererFactory2.end() runs once per ApplicationRef.tick().
   cdPasses: number;
-  // Primitive host views (symbiote-view / symbiote-text / ...) Angular actually walked. Divided by
+  // Primitive host views (view / text / ...) Angular actually walked. Divided by
   // cdPasses this is the SIZE OF THE TREE one tick touches - the number that separates "the list is
   // expensive" from "every mounted screen is re-checked because a list scrolled". The primitives are
   // CheckAlways, and a Global tick refreshes every CheckAlways view in the application.

package/src/element-props.ts

@@ -0,0 +1,90 @@
+// The prop surface EVERY intrinsic tag accepts, and the type the element directives declare their
+// shared inputs from.
+//
+// It is not a new contract: it is the agnostic base every adapter's own `IViewProps` is built on
+// (`IAccessibilityProps` + `IAriaProps` + `IResponderProps`) plus RN's own View extras. Angular
+// declares its own rather than importing another adapter's, per
+// `<prop_types_split_agnostic_vs_per_adapter>` — and the fields below are the ones that genuinely
+// differ, since a bare tag takes children from the template and a handle from `#ref`, so neither
+// `children` nor `ref` appears here.
+//
+// `style` IS declared, reversing what this comment said until 2026-09-11. Leaving it to Angular's
+// styling engine was not the conservative choice it reads as: an array decomposes into
+// numeric-index keys there and a press-state CALLBACK throws out of `toStylingKeyValueArray`,
+// aborting the enclosing template update — which is what an app writes, and what every deleted
+// wrapper component accepted. The claim that a directive can reclaim it "solely by executing a
+// linked AOT artifact" was answered rather than assumed: `elements.test.ts` compiles the binding
+// through real ngtsc and runs the LINKED output. See `SymbioteElement.style`.
+//
+// `symbioteStyle` stays as an alias — it is public API and the renderer still folds it.
+import type {
+  IAccessibilityProps,
+  IAriaProps,
+  IPressState,
+  IRectOffset,
+  IResponderProps,
+} from '@symbiote-native/components';
+import type {
+  ISymbioteEvent,
+  IStyleProp,
+  ITextStyle,
+  IViewStyle,
+} from '@symbiote-native/engine';
+
+type IEventHandler = (event: ISymbioteEvent) => void;
+
+export interface IElementProps
+  extends IAccessibilityProps, IAriaProps, IResponderProps {
+  /** RN's modern W3C-named alias for `nativeID`; the renderer folds it (`PROP_ALIASES`). */
+  id?: string;
+  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
+  hitSlop?: IRectOffset | number;
+  focusable?: boolean;
+  collapsable?: boolean;
+  removeClippedSubviews?: boolean;
+  renderToHardwareTextureAndroid?: boolean;
+  shouldRasterizeIOS?: boolean;
+  needsOffscreenAlphaCompositing?: boolean;
+  /** The array-capable `[style]`, aliased to `style` in the renderer. */
+  symbioteStyle?: IStyleProp<IViewStyle>;
+  /**
+   * RN's own spelling. The press-state callback is in the union because a subclass cannot widen an
+   * inherited property and `<pressable>`/`<touchable-*>` are the tags that take one; on every other
+   * tag the engine resolves it at `pressed: false`.
+   */
+  style?:
+    IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
+  onPress?: IEventHandler;
+  onPressIn?: IEventHandler;
+  onPressOut?: IEventHandler;
+  onPressMove?: IEventHandler;
+  onLongPress?: IEventHandler;
+  onLayout?: IEventHandler;
+  onFocus?: IEventHandler;
+  onBlur?: IEventHandler;
+}
+
+/** Text's own surface on top of the shared one. `onTextLayout` is an event, so it is not here. */
+export interface ITextElementProps {
+  /** Narrows the shared `style` so `fontSize` / `fontWeight` type-check on a `<text>`. */
+  style?: IStyleProp<ITextStyle>;
+  numberOfLines?: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  selectable?: boolean;
+  adjustsFontSizeToFit?: boolean;
+  minimumFontScale?: number;
+  allowFontScaling?: boolean;
+  maxFontSizeMultiplier?: number | null;
+  selectionColor?: string;
+  // RN's Text carries it (Text.js) and Button hands it to the label so a screen reader announces
+  // the text as disabled along with the button holding it (Button.js:388).
+  disabled?: boolean;
+}
+
+/** The sticky-header wrapper RN builds in JS (ScrollViewStickyHeader.js). */
+export interface IStickyHeaderElementProps {
+  inverted?: boolean;
+  nextHeaderLayoutY?: number | null;
+  scrollAnimatedValue?: unknown;
+  scrollViewHeight?: number | null;
+}