@symbiote-native/angular 0.3.2 → 0.4.0

package/build/modules/animated/create-animated-component.js

@@ -52,12 +52,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, Directive, ElementRef, inject, ViewChild, } from '@angular/core';
-import { AnimatedProps, attachNativeEventHandler, dlog, isNativeAnimatedAvailable, isSymbioteNode, reduceProps, readPassthroughStyle, resolveHostNode, whenCommitted, } from '@symbiote-native/engine';
+import { isNativeAnimatedAvailable, isSymbioteNode, reduceProps, readPassthroughStyle, resolveHostNode, } from '@symbiote-native/engine';
+import { selectScrollIntrinsics } from '@symbiote-native/components';
 import { Image, ScrollView, Text, View } from '../../components';
 import { anchorHostStyle, ViewHost, TextHost, ImageHost, ScrollViewHost, SymbioteHostPropsDirective, } from '../../primitives';
 import { FlatList } from '../../components/flat-list';
 import { IMAGE_INPUTS, IMAGE_OUTPUTS, ImageBase, resolveImageProps, } from '../../components/image/shared';
 import { SectionList } from '../../components/section-list';
+import { AnimatedLeafBinder } from './animated-leaf-binder';
 // RN's prop carrying explicit (already-rasterized) values that override the animated prop in
 // the COMMITTED props (sticky-header passthrough). Named once so the directive input and the
 // reconcile agree.
@@ -105,12 +107,11 @@ let AnimatedComponentBase = (() => {
         // The directive sitting on the inner host primitive; its `node` is the committed SymbioteNode
         // the leaf binds to. Inherited by the decorated subclass (Angular collects base-class queries).
         hostDirective = __runInitializers(this, _hostDirective_initializers, void 0);
-        // The leaf currently wired into the value graph. Null until the first reconcile.
-        attached = (__runInitializers(this, _hostDirective_extraInitializers), null);
-        // The whenCommitted waiter for the current leaf's node binding, cancelled before the next.
-        cancelBind;
-        // Detachers for any Animated.event prop bound natively to the committed node (JS path: none).
-        eventDetachers = [];
+        // The leaf-lifecycle orchestration (build/attach/swap/bind/detach an AnimatedProps leaf) is a
+        // Pure Fabrication shared with AnimatedImage, which cannot extend this class (it must extend
+        // ImageBase — see the file header). `resolveNode` stays a resolver, not a captured node: the
+        // committed node only exists after `hostDirective` is populated post-view-init.
+        leafBinder = (__runInitializers(this, _hostDirective_extraInitializers), new AnimatedLeafBinder(() => this.hostNode(), this.constructor.name));
         // Set once the view (and the inner host directive) exists; ngOnChanges before then is a no-op.
         viewReady = false;
         // The concrete props for the host element each change-detection pass: animated entries reduced
@@ -134,73 +135,21 @@ let AnimatedComponentBase = (() => {
             this.reconcile();
         }
         ngOnDestroy() {
-            this.cancelBind?.();
-            this.cancelBind = undefined;
-            this.detachEvents();
-            if (this.attached !== null) {
-                this.attached.__detach();
-                this.attached = null;
-            }
+            this.leafBinder.destroy();
         }
-        // Build a fresh AnimatedProps leaf from the current props (the React/Vue per-render
-        // useMemo(rest)), wire it into the graph, and swap the previous one out. Attach the NEW leaf
-        // BEFORE detaching the OLD one: a shared Value self-detaches (dropping its native node) the
-        // instant its child count hits zero, so detaching first would kill a running native animation
-        // on any unrelated re-render (mirrors RN's AnimatedComponent._attachProps). Then bind the
-        // committed node, go native if wanted, and rebind native events.
+        // A non-stable [animatedProps]/[style] input (a fresh object literal in the template) pushes
+        // a new reference on every change-detection pass of the HOST view, re-triggering this on every
+        // unrelated interaction elsewhere in the app — DEBUG=1 turns this into a visible tick count in
+        // AnimatedLeafBinder.reconcile, so an unexpectedly high rate for a component nobody is
+        // animating is the tell (see AnimatedScrollView's stable-reference fix in examples/angular/App.ts).
         reconcile() {
             if (!this.viewReady)
                 return;
-            // A non-stable [animatedProps]/[style] input (a fresh object literal in the template)
-            // pushes a new reference on every change-detection pass of the HOST view, re-triggering
-            // this on every unrelated interaction elsewhere in the app — DEBUG=1 turns this into a
-            // visible tick count, so an unexpectedly high rate for a component nobody is animating
-            // is the tell (see AnimatedScrollView's stable-reference fix in examples/angular/App.ts).
-            dlog(`AnimatedComponentBase reconcile (${this.constructor.name})`);
             const props = this.mergedProps();
             const hasPassthroughAnimatedValues = this.passthroughAnimatedPropExplicitValues !== null &&
                 this.passthroughAnimatedPropExplicitValues !== undefined;
             const wantsNative = hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
-            const newLeaf = new AnimatedProps(props);
-            newLeaf.__attach();
-            if (this.attached !== null && this.attached !== newLeaf)
-                this.attached.__detach();
-            this.attached = newLeaf;
-            this.bindNode(newLeaf, props, wantsNative);
-        }
-        // Bind the leaf to the host's Fabric node THROUGH whenCommitted: under Angular's zoneless
-        // batched change detection the inner host's tag does not exist yet at ngAfterViewInit time
-        // (the same async-commit gotcha Vue documents), so binding eagerly would no-op. whenCommitted
-        // runs the action now if already committed, else after the commit that assigns the tag.
-        bindNode(leaf, props, wantsNative) {
-            this.cancelBind?.();
-            this.cancelBind = undefined;
-            const node = this.hostNode();
-            if (node === null)
-                return;
-            this.cancelBind = whenCommitted(node, () => {
-                leaf.setNativeView(node);
-                if (wantsNative)
-                    leaf.__makeNative();
-                this.attachEvents(node, props);
-            });
-        }
-        // Native-attach any Animated.event prop (e.g. onScroll={Animated.event(…,{useNativeDriver:true})})
-        // to the committed node. attachNativeEventHandler no-ops (returns undefined) unless the prop is a
-        // native event handler with a committed tag, so the JS path stays the fallback. Rebound each
-        // reconcile so a new inline event re-attaches; detached first to avoid leaking the prior binding.
-        attachEvents(node, props) {
-            this.detachEvents();
-            for (const key of Object.keys(props)) {
-                const attachment = attachNativeEventHandler(node, key, props[key]);
-                if (attachment !== undefined)
-                    this.eventDetachers.push(attachment.detach);
-            }
-        }
-        detachEvents() {
-            for (const detach of this.eventDetachers)
-                detach();
-            this.eventDetachers = [];
+            this.leafBinder.reconcile(props, wantsNative);
         }
         // Merge the dedicated `style` input over the generic `animatedProps` bag into one props map —
         // the equivalent of React/Vue `rest`. `style` wins so `[style]` and `[animatedProps].style`
@@ -333,9 +282,10 @@ let AnimatedImage = (() => {
         // comment on AnimatedComponentBase.elementRef.
         elementRef = inject(ElementRef);
         hostDirective = __runInitializers(this, _hostDirective_initializers, void 0);
-        attached = (__runInitializers(this, _hostDirective_extraInitializers), null);
-        cancelBind;
-        eventDetachers = [];
+        // Same Pure Fabrication AnimatedComponentBase holds — see its matching comment. AnimatedImage
+        // can't extend AnimatedComponentBase (it must extend ImageBase, see the file header), so it
+        // gets the leaf-lifecycle via composition instead of duplicating it.
+        leafBinder = (__runInitializers(this, _hostDirective_extraInitializers), new AnimatedLeafBinder(() => this.hostNode(), this.constructor.name));
         viewReady = false;
         get animatedImageProps() {
             const reduced = reduceProps(this.mergedProps());
@@ -356,13 +306,7 @@ let AnimatedImage = (() => {
             this.reconcile();
         }
         ngOnDestroy() {
-            this.cancelBind?.();
-            this.cancelBind = undefined;
-            this.detachEvents();
-            if (this.attached !== null) {
-                this.attached.__detach();
-                this.attached = null;
-            }
+            this.leafBinder.destroy();
         }
         reconcile() {
             if (!this.viewReady)
@@ -371,38 +315,7 @@ let AnimatedImage = (() => {
             const hasPassthroughAnimatedValues = this.passthroughAnimatedPropExplicitValues !== null &&
                 this.passthroughAnimatedPropExplicitValues !== undefined;
             const wantsNative = hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
-            const newLeaf = new AnimatedProps(props);
-            newLeaf.__attach();
-            if (this.attached !== null && this.attached !== newLeaf)
-                this.attached.__detach();
-            this.attached = newLeaf;
-            this.bindNode(newLeaf, props, wantsNative);
-        }
-        bindNode(leaf, props, wantsNative) {
-            this.cancelBind?.();
-            this.cancelBind = undefined;
-            const node = this.hostNode();
-            if (node === null)
-                return;
-            this.cancelBind = whenCommitted(node, () => {
-                leaf.setNativeView(node);
-                if (wantsNative)
-                    leaf.__makeNative();
-                this.attachEvents(node, props);
-            });
-        }
-        attachEvents(node, props) {
-            this.detachEvents();
-            for (const key of Object.keys(props)) {
-                const attachment = attachNativeEventHandler(node, key, props[key]);
-                if (attachment !== undefined)
-                    this.eventDetachers.push(attachment.detach);
-            }
-        }
-        detachEvents() {
-            for (const detach of this.eventDetachers)
-                detach();
-            this.eventDetachers = [];
+            this.leafBinder.reconcile(props, wantsNative);
         }
         mergedProps() {
             const props = { ...(this.animatedProps ?? {}) };
@@ -429,7 +342,7 @@ let AnimatedScrollView = (() => {
             inputs: ANIMATED_INPUTS,
             template: `
     <symbiote-scroll-view [symbioteHostProps]="reducedProps">
-      <symbiote-scroll-content [collapsable]="false">
+      <symbiote-scroll-content [symbioteHostProps]="contentProps">
         <ng-content></ng-content>
       </symbiote-scroll-content>
     </symbiote-scroll-view>
@@ -454,11 +367,33 @@ let AnimatedScrollView = (() => {
         // receives touch (swallowed by the outer scroll view; iOS doesn't gate on this). The real
         // ScrollView component already defaults this (scroll-view/shared.ts), but AnimatedScrollView
         // talks to the raw primitive directly and has no such defaulting, so it must apply it too.
+        //
+        // scrollViewBaseStyle (overflow: 'scroll' + the per-axis flexDirection) is the OTHER thing
+        // the real ScrollView applies that this bespoke template used to skip entirely — without it,
+        // iOS Fabric never clips the scroll view's content to its own frame (Android's native
+        // ViewGroup clips regardless of the style prop, which is why this was invisible there). This
+        // wrapper has no dedicated `horizontal` input (only the generic `animatedProps`/`style`
+        // surface), and its template is hardcoded to the vertical intrinsics
+        // (symbiote-scroll-view/symbiote-scroll-content, not the horizontal variants), so
+        // selectScrollIntrinsics is always called with isHorizontal=false here — matching what the
+        // template can actually render.
         get reducedProps() {
             const reduced = super.reducedProps;
-            return reduced.nestedScrollEnabled === undefined
-                ? { ...reduced, nestedScrollEnabled: true }
-                : reduced;
+            const { scrollViewBaseStyle } = selectScrollIntrinsics(false, undefined);
+            const withScrollBase = {
+                ...reduced,
+                style: [scrollViewBaseStyle, reduced.style],
+            };
+            return withScrollBase.nestedScrollEnabled === undefined
+                ? { ...withScrollBase, nestedScrollEnabled: true }
+                : withScrollBase;
+        }
+        // The content (inner) view's props: contentStyle from the same intrinsics selection, plus
+        // `collapsable: false` (the Android multi-child fix this file's tests already cover) — mirrors
+        // the real ScrollView's own `contentProps` getter (scroll-view/shared.ts).
+        get contentProps() {
+            const { contentStyle } = selectScrollIntrinsics(false, undefined);
+            return { style: contentStyle, collapsable: false };
         }
     };
     return AnimatedScrollView = _classThis;

package/build/renderer.js

@@ -53,23 +53,15 @@ const ANCHOR_HOST_COMPONENTS = new Set([
     // Composed Angular components render their real Fabric descriptor tree from the template;
     // their Angular host element is only a framework bookkeeping node and must not paint. This
     // is NOT limited to adapter-authored components — ANY custom composed @Component used as a
-    // plain <Tag> inside another template needs its selector listed here too, adapter or app
-    // code alike, or Angular's automatic host-element creation for it falls through to a raw
-    // Fabric createNode call with an unrecognized view name, which paints RN's own "Unimplemented
-    // component: <Tag>" fallback view instead (a real device-visible bug, not a silent no-op —
-    // discovered when examples/angular's own new demo components hit this).
-    'AccessibilityDemo',
+    // plain <Tag> inside another template needs its selector listed here too, or Angular's
+    // automatic host-element creation for it falls through to a raw Fabric createNode call with
+    // an unrecognized view name, which paints RN's own "Unimplemented component: <Tag>" fallback
+    // view instead (a real device-visible bug, not a silent no-op). This Set holds only
+    // adapter/engine-owned selectors; app code and third-party packages self-register their own
+    // composed components through registerComposedComponent instead of being hardcoded here.
     'ActivityIndicator',
-    'AnimatedDemo',
-    'AnimatedParityDemo',
     'Button',
     'FlatList',
-    'NativeModulesDemo',
-    'ParityDemo',
-    'PlatformColorDemo',
-    'RefApiDemo',
-    'ResponderDemo',
-    'Slider',
     'AnimatedView',
     'symbiote-animated-view',
     'AnimatedText',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/angular",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "SymbioteNative's Angular adapter — a Renderer2/RendererFactory2 with DOM-less bootstrap driving real native iOS/Android views through the same engine as the other adapters.",
   "repository": {
     "type": "git",
@@ -30,6 +30,7 @@
     "./metro-css-parser": "./metro-css-parser.cjs",
     "./metro-config": "./metro-config.cjs",
     "./babel-linker": "./babel-linker.cjs",
+    "./babel-register-composed": "./babel-register-composed.cjs",
     "./tsconfig.angular.base.json": "./tsconfig.angular.base.json"
   },
   "files": [
@@ -39,6 +40,7 @@
     "metro-css-parser.cjs",
     "metro-config.cjs",
     "babel-linker.cjs",
+    "babel-register-composed.cjs",
     "tsconfig.angular.base.json"
   ],
   "bin": {
@@ -50,9 +52,9 @@
   "dependencies": {
     "@angular/compiler-cli": "^22",
     "@react-native/typescript-config": "0.86.0",
-    "@symbiote-native/components": "0.2.2",
-    "@symbiote-native/engine": "0.1.3",
-    "@symbiote-native/css-parser": "0.2.1"
+    "@symbiote-native/components": "0.2.4",
+    "@symbiote-native/css-parser": "0.2.1",
+    "@symbiote-native/engine": "0.1.5"
   },
   "peerDependencies": {
     "@angular/core": ">=20",
@@ -61,9 +63,11 @@
   "devDependencies": {
     "@angular/compiler": "^22",
     "@angular/core": "^22",
+    "@babel/core": "^7.25.2",
+    "@types/babel__core": "^7.20.5",
     "@types/node": "^26.0.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/test-utils": "0.1.3"
+    "@symbiote-native/test-utils": "0.1.5"
   },
   "scripts": {
     "ng:build": "ngc -p tsconfig.angular.json",

package/src/components/image/shared.ts

@@ -9,7 +9,12 @@ import {
   type IImageSourceProp,
   type IResizeMode,
 } from '@symbiote-native/components';
-import type { IStyleProp, ISymbioteEvent, IViewStyle } from '@symbiote-native/engine';
+import {
+  isSymbioteEvent,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
 
 export { setImageSourceResolver } from '@symbiote-native/components';
 export type {
@@ -153,10 +158,6 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
   return typeof value === 'object' && value !== null ? value : undefined;
 }
 
-function isSymbioteEvent(value: unknown): value is ISymbioteEvent {
-  return typeof value === 'object' && value !== null && Reflect.has(value, 'nativeEvent');
-}
-
 export function resolveImageProps(input: Record<string, unknown>): Record<string, unknown> {
   const passthrough: IImagePassthroughProps = {
     resizeMethod: input['resizeMethod'] as IImageProps['resizeMethod'],

package/src/components/input-accessory-view.ts

@@ -21,15 +21,14 @@ import {
   type IAccessibilityStateValue,
   type IAriaProps,
 } from '@symbiote-native/components';
-import type { IStyleProp, ISymbioteEvent, IViewStyle } from '@symbiote-native/engine';
+import {
+  isSymbioteEvent,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
 import { anchorHostStyle, InputAccessoryViewHost, SymbioteHostPropsDirective } from '../primitives';
 
-// Angular infers an `(event)` binding's $event as the DOM Event for a custom-schema element,
-// so each handler enters as `unknown` and is narrowed here before reaching a typed callback.
-function isSymbioteEvent(value: unknown): value is ISymbioteEvent {
-  return typeof value === 'object' && value !== null && 'nativeEvent' in value;
-}
-
 // Mirrors React's IInputAccessoryViewProps minus children (Angular takes children via
 // <ng-content>), declared per-adapter over the shared a11y base.
 export interface IAngularInputAccessoryViewProps extends IAccessibilityProps, IAriaProps {

package/src/components/keyboard-avoiding-view.ts

@@ -42,6 +42,7 @@ import {
   Keyboard,
   KEYBOARD_EVENT,
   dlog,
+  isSymbioteEvent,
   type IEventSubscription,
   type IStyleProp,
   type ISymbioteEvent,
@@ -51,12 +52,6 @@ import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../primit
 
 export type { IKeyboardAvoidingBehavior } from '@symbiote-native/components';
 
-// Angular infers an `(event)` binding's $event as the DOM Event for a custom-schema element,
-// so each handler enters as `unknown` and is narrowed here before reaching a typed callback.
-function isSymbioteEvent(value: unknown): value is ISymbioteEvent {
-  return typeof value === 'object' && value !== null && 'nativeEvent' in value;
-}
-
 // Mirrors React's IKeyboardAvoidingViewProps minus children (Angular takes children via
 // <ng-content>), declared per-adapter over the shared accessibility base since a framework-specific
 // children field keeps it from being fully shared across adapters.

package/src/components/modal.ts

@@ -39,6 +39,7 @@ import {
 } from '@symbiote-native/components';
 import {
   dlog,
+  isSymbioteEvent,
   type IStyleProp,
   type ISymbioteEvent,
   type IViewStyle,
@@ -52,12 +53,6 @@ export type {
   IModalOrientationChangeEvent,
 } from '@symbiote-native/components';
 
-// Angular infers an `(event)` binding's $event as the DOM Event for a custom-schema element,
-// so each handler enters as `unknown` and is narrowed here before reaching a typed callback.
-function isSymbioteEvent(value: unknown): value is ISymbioteEvent {
-  return typeof value === 'object' && value !== null && 'nativeEvent' in value;
-}
-
 const ORIENTATIONS: ReadonlyArray<IModalOrientation> = ['portrait', 'landscape'];
 
 function readOrientation(event: ISymbioteEvent): IModalOrientationChangeEvent | undefined {

package/src/components/pressable/index.ts

@@ -14,9 +14,12 @@ import {
   createPressHandlers,
   createPressRuntime,
   DEFAULT_DELAY_LONG_PRESS_MS,
+  isTerminationAllowed,
   resolveAccessibilityProps,
   resolveDisabledAccessibilityState,
   rippleProps,
+  shouldClaimResponder,
+  shouldSuppressPress,
   type IAccessibilityProps,
   type IAccessibilityStateValue,
   type IAriaProps,
@@ -43,7 +46,7 @@ export type { IPressState, IPressableAndroidRippleConfig } from '@symbiote-nativ
 
 // The full logical Pressable surface, callback-shaped press/hover events included. Touchable* and
 // TouchableNativeFeedback still take their OWN onPress/onPressIn/... as @Input() callbacks (that is
-// a separate, not-yet-converted decision) and derive their public prop types from this — so it keeps
+// a separate, not-yet-converted decision) and derive their public prop types from this - so it keeps
 // the callback fields even though the Pressable component below no longer implements them directly.
 export interface IAngularPressableProps extends IAccessibilityProps, IAriaProps {
   onPress?: IPressHandler;
@@ -76,7 +79,7 @@ export interface IAngularPressableProps extends IAccessibilityProps, IAriaProps
 
 // What the Pressable component itself takes as plain @Input()s: the full surface minus the press/
 // hover events and the four accessibility callbacks, all of which it exposes as real @Output()
-// EventEmitters instead (see the class below) — the one place in the family where the
+// EventEmitters instead (see the class below) - the one place in the family where the
 // callback-vs-EventEmitter tradeoff is actually fixed.
 export type IAngularPressableInputs = Omit<
   IAngularPressableProps,
@@ -131,7 +134,7 @@ function asSymbioteEvent(event: unknown): ISymbioteEvent | undefined {
 export class Pressable implements IAngularPressableInputs {
   // The press/hover lifecycle as real Angular events: `(press)="onTap($event)"`, not
   // `[onPress]="onTap"`. createPressHandlers still wants plain IPressHandler callbacks, so
-  // emitterHandler() below adapts each EventEmitter into one — only while something is actually
+  // emitterHandler() below adapts each EventEmitter into one - only while something is actually
   // subscribed (`.observed`), so an unbound onLongPress still skips arming the timer, exactly as
   // the old @Input()-absent case did.
   @Output() readonly press = new EventEmitter<ISymbioteEvent>();
@@ -223,8 +226,8 @@ export class Pressable implements IAngularPressableInputs {
   };
 
   private readonly changeDetector = inject(ChangeDetectorRef);
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment) — NOT `hostElement` above, which targets the real
+  // This component's OWN host - the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) - NOT `hostElement` above, which targets the real
   // inner `symbiote-view` one level down.
   private readonly elementRef = inject(ElementRef);
 
@@ -275,8 +278,7 @@ export class Pressable implements IAngularPressableInputs {
     return this.android_ripple === undefined ? undefined : rippleProps(this.android_ripple);
   }
 
-  // Assembles the SAME resolved values the template used to bind one-by-one into a single
-  // flat bag for `[symbioteHostProps]` (Renderer2.setProperty per key) — see primitives/shared.ts.
+  // Flat bag for `[symbioteHostProps]` (Renderer2.setProperty per key) - see primitives/shared.ts.
   get hostProps(): Record<string, unknown> {
     return {
       testID: this.testID,
@@ -298,34 +300,34 @@ export class Pressable implements IAngularPressableInputs {
 
   handlePressIn(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (this.disabled === true || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
     this.handlers.handlePressIn(symbioteEvent);
   }
 
   handlePressOut(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (this.disabled === true || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
     this.handlers.handlePressOut(symbioteEvent);
   }
 
   handlePress(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (this.disabled === true || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
     this.handlers.handlePress(symbioteEvent);
   }
 
   handleResponderMove(event: unknown): void {
     const symbioteEvent = asSymbioteEvent(event);
-    if (this.disabled === true || symbioteEvent === undefined) return;
+    if (shouldSuppressPress(this.disabled) || symbioteEvent === undefined) return;
     this.handlers.handleResponderMove(symbioteEvent);
   }
 
   claimResponder(): boolean {
-    return this.disabled !== true;
+    return shouldClaimResponder(this.disabled);
   }
 
   allowTermination(): boolean {
-    return this.cancelable !== false;
+    return isTerminationAllowed(this.cancelable);
   }
 
   emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
@@ -342,8 +344,8 @@ export class Pressable implements IAngularPressableInputs {
   }
 
   // Wraps an @Output() as an IPressHandler only while it has a subscriber, so an unbound
-  // (longPress) still skips arming the timer — the same "undefined means nobody cares" contract
-  // createPressHandlers had with the old @Input() callbacks.
+  // (longPress) still skips arming the timer, matching createPressHandlers' "undefined means
+  // nobody cares" contract.
   private emitterHandler(emitter: EventEmitter<ISymbioteEvent>): IPressHandler | undefined {
     return emitter.observed ? event => emitter.emit(event) : undefined;
   }

package/src/components/refresh-control.ts

@@ -36,6 +36,7 @@ import {
 import {
   dispatchViewCommand,
   dlog,
+  isSymbioteEvent,
   isSymbioteNode,
   type IStyleProp,
   type ISymbioteEvent,
@@ -47,12 +48,6 @@ import { anchorHostStyle, RefreshControlHost, SymbioteHostPropsDirective } from
 // array anchorHostStyle's merge produces (see hostProps below) — no widening needed.
 type IHostProps = Record<string, unknown>;
 
-// Angular infers an `(event)` binding's $event as the DOM Event for a custom-schema element,
-// so each handler enters as `unknown` and is narrowed here before reaching a typed callback.
-function isSymbioteEvent(value: unknown): value is ISymbioteEvent {
-  return typeof value === 'object' && value !== null && 'nativeEvent' in value;
-}
-
 // Mirrors React's IRefreshControlProps minus children (Angular takes the Android-wrapped scroll view
 // via <ng-content>), declared per-adapter over the shared accessibility base since the framework-specific
 // children slot keeps it from being fully shared across adapters. Read the React reference for the

package/src/components/safe-area-view.ts

@@ -22,15 +22,14 @@ import {
   type IAccessibilityStateValue,
   type IAriaProps,
 } from '@symbiote-native/components';
-import type { IStyleProp, ISymbioteEvent, IViewStyle } from '@symbiote-native/engine';
+import {
+  isSymbioteEvent,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
 import { anchorHostStyle, SafeAreaViewHost, SymbioteHostPropsDirective } from '../primitives';
 
-// Angular infers an `(event)` binding's $event as the DOM Event for a custom-schema element,
-// so each handler enters as `unknown` and is narrowed here before reaching a typed callback.
-function isSymbioteEvent(value: unknown): value is ISymbioteEvent {
-  return typeof value === 'object' && value !== null && 'nativeEvent' in value;
-}
-
 // Mirrors React's ISafeAreaViewProps minus children (Angular takes children via <ng-content>),
 // declared per-adapter over the shared accessibility base since the framework-specific children
 // slot keeps it from being fully shared across adapters.

package/src/components/text-input.ts

@@ -65,6 +65,7 @@ import {
   blurTextInput,
   dispatchViewCommand,
   dlog,
+  isSymbioteEvent,
   isSymbioteNode,
   setInputBlurred,
   setInputFocused,
@@ -83,12 +84,6 @@ import {
 
 export type { ITextInputHandle, ITextInputSelection, IInputMode, IEnterKeyHint, ISubmitBehavior };
 
-// Angular infers an (event) binding's $event as the DOM Event for a custom-schema element, so
-// each handler enters as `unknown` and is narrowed here before reaching a typed callback.
-function isSymbioteEvent(value: unknown): value is ISymbioteEvent {
-  return typeof value === 'object' && value !== null && 'nativeEvent' in value;
-}
-
 // Mirrors React's ITextInputProps minus nothing (TextInput has no children) — declared
 // per-adapter over the shared accessibility base because Angular's input surface aliases the
 // aria-* keys to camelCase @Inputs, unlike the plain agnostic fields shared across adapters.

package/src/components/touchable-native-feedback.ts

@@ -44,7 +44,7 @@ import {
   type IPressableAndroidRippleConfig,
   type IRectOffset,
 } from '@symbiote-native/components';
-import { dlog, type ISymbioteEvent } from '@symbiote-native/engine';
+import { dlog, isSymbioteEvent, type ISymbioteEvent } from '@symbiote-native/engine';
 import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../primitives';
 import { Pressable, type IAngularPressableInputs } from './pressable';
 
@@ -63,12 +63,6 @@ export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs,
   useForeground?: boolean;
 };
 
-// Angular infers an `(event)` binding's $event as the DOM Event for a custom-schema element,
-// so each handler enters as `unknown` and is narrowed here before reaching a typed callback.
-function isSymbioteEvent(value: unknown): value is ISymbioteEvent {
-  return typeof value === 'object' && value !== null && 'nativeEvent' in value;
-}
-
 @Component({
   selector: 'TouchableNativeFeedback',
   standalone: true,

package/src/index.ts

@@ -135,7 +135,7 @@ export { DescriptorOutlet } from './descriptor-to-angular';
 // call.
 export { PortalDirective, PortalOutletDirective } from './create-portal';
 export { createTunnel, TunnelInDirective, TunnelOut, type ITunnelStore } from './create-tunnel';
-export { SymbioteRenderer, SymbioteRendererFactory } from './renderer';
+export { registerComposedComponent, SymbioteRenderer, SymbioteRendererFactory } from './renderer';
 export { findNodeHandle } from './host-instance';
 export type { IHostInstance } from './host-instance';
 export { StatusBar } from './modules/status-bar';