@symbiote-native/angular 0.8.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,
@@ -130,6 +179,8 @@ export {
   HorizontalScrollContentView,
   TextInputHost,
   MultilineTextInputHost,
+  ManagedTextInputHost,
+  ManagedMultilineTextInputHost,
   SwitchHost,
   ActivityIndicatorHost,
   SafeAreaViewHost,
@@ -152,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

@@ -20,16 +20,23 @@
 //
 // The safe, fully-public-API mechanism: create the embedded view DIRECTLY inside a
 // ViewContainerRef anchored at the destination, so there is nothing to move at all. That
-// ViewContainerRef comes from `PortalOutletDirective`, a marker placed on the target host
-// (`<View portalOutlet #overlayHost="portalOutlet">`) purely to expose its ViewContainerRef, the
-// same export-as-template-variable idiom `#form="ngForm"` uses. This also replaces the
-// `isSymbioteNode` runtime guard React/Vue need (there `to` is an arbitrary JS value until
-// validated): here `to` is typed as `PortalOutletDirective` — the only way to construct one is
-// Angular's own template compiler resolving a template reference variable, so `strictTemplates`
-// rejects anything else at compile time and there is nothing left to guard at runtime.
+// ViewContainerRef comes from `PortalOutletDirective`, exported to a template variable with the
+// same idiom `#form="ngForm"` uses. This also replaces the `isSymbioteNode` runtime guard
+// React/Vue need (there `to` is an arbitrary JS value until validated): here `to` is typed as
+// `PortalOutletDirective` — the only way to construct one is Angular's own template compiler
+// resolving a template reference variable, so `strictTemplates` rejects anything else at compile
+// time and there is nothing left to guard at runtime.
+//
+// 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
+// `<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.
 
 import {
   Directive,
+  ElementRef,
   inject,
   Input,
   TemplateRef,
@@ -38,10 +45,19 @@ import {
   type OnChanges,
   type OnDestroy,
 } from '@angular/core';
+import { isAnchor, isSymbioteNode } from '@symbiote-native/engine';
 
 /** Marks the destination for `*portal` — place it on whichever already-mounted host should
- *  paint the portaled content (e.g. a persistent overlay-host View near the app root), then
- *  export it to a template variable and pass that variable as `*portal`'s target. */
+ *  paint the portaled content — on an `<ng-container>` INSIDE that host, never on the host
+ *  element itself (see the file header) — then export it to a template variable and pass that
+ *  variable as `*portal`'s target:
+ *
+ *  ```html
+ *  <view class="overlay-host">
+ *    <ng-container portalOutlet #overlayHost="portalOutlet"></ng-container>
+ *  </view>
+ *  ```
+ */
 @Directive({
   selector: '[portalOutlet]',
   standalone: true,
@@ -49,6 +65,20 @@ import {
 })
 export class PortalOutletDirective {
   readonly viewContainerRef = inject(ViewContainerRef);
+
+  constructor() {
+    // The wrong placement commits a valid tree that simply differs from React's, so nothing
+    // downstream can catch it. It has to fail where it is written.
+    const host: unknown = inject(ElementRef).nativeElement;
+    if (!isSymbioteNode(host) || !isAnchor(host)) {
+      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>.',
+      );
+    }
+  }
 }
 
 /** `*portal="overlayHost"` — renders the host element into whichever `PortalOutletDirective`

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;
+}