@symbiote-native/angular 0.3.3 → 0.5.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/{render.js → render/index.js}

@@ -6,9 +6,9 @@
 // adapters/vue/src/render.ts.
 import { createElement as createEngineElement, createSurface, disposeRoot, dlog, toPublicInstance, } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
-import { ApplicationRef, createComponent, createEnvironmentInjector, DOCUMENT, RendererFactory2, ɵINJECTOR_SCOPE as INJECTOR_SCOPE, ɵprovideZonelessChangeDetectionInternal as provideZonelessChangeDetectionInternal, } from '@angular/core';
-import { SymbioteRendererFactory } from './renderer';
-import { ColorSchemeService, WindowDimensionsService } from './services';
+import { ApplicationRef, createComponent, createEnvironmentInjector, DOCUMENT, ErrorHandler, RendererFactory2, ɵINJECTOR_SCOPE as INJECTOR_SCOPE, ɵprovideZonelessChangeDetectionInternal as provideZonelessChangeDetectionInternal, } from '@angular/core';
+import { SymbioteRendererFactory } from '../renderer';
+import { ColorSchemeService, WindowDimensionsService } from '../services';
 // The two FFI-edge casts of this adapter, both confined here to bootstrap. Angular's core
 // types model a browser: the injector parent is a non-null EnvironmentInjector, the host is
 // a DOM Element. Our root has neither shape — a null parent IS a root injector, and the host
@@ -98,6 +98,17 @@ export function mount(rootTag, rootComponent, options) {
         // `@Component` boundary — SignalView-compiled children are skip-eligible regardless of
         // this scheduler.
         ...provideZonelessChangeDetectionInternal(),
+        // Angular's own INTERNAL_APPLICATION_ERROR_HANDLER (core.mjs) reports a tick()
+        // exception by calling `injector.get(ErrorHandler)` — a normal `bootstrapApplication`
+        // registers this token by default (platform-browser's BROWSER_MODULE_PROVIDERS), but
+        // our from-scratch environment injector never did, so that lookup itself threw
+        // NG0201 and REPLACED whatever the real error was with an unrelated "No provider
+        // found for ErrorHandler" — the real exception never got logged, and the NG0201 itself
+        // propagated out of a bare Timeout callback uncaught (nothing above it in the stack to
+        // catch it), i.e. any async tick() exception, anywhere in the app, crashed hard instead
+        // of being reported. Providing the default `ErrorHandler` (same one bootstrapApplication
+        // ships) restores the intended behavior: `console.error('ERROR', e)` and keep running.
+        { provide: ErrorHandler, useClass: ErrorHandler },
         ColorSchemeService,
         WindowDimensionsService,
     ], rootInjectorParent());

package/build/{angular/renderer.js → renderer/index.js}

@@ -6,7 +6,7 @@
 // that the same engine mutation API drives both frameworks.
 import { appendChild, createAnchor, createElement, createRawText, dlog, getExplicitStyle, insertBefore, isDebug, isSymbioteNode, removeChild, routeProp, setEventListener, setText, toPublicInstance, RAW_TEXT_COMPONENT, SymbioteSurface, } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
-import { getScrollViewProjection, removeScrollViewProjectedChild, } from './components/scroll-view/projection';
+import { getScrollViewProjection, removeScrollViewProjectedChild, } from '../components/scroll-view/projection';
 function isSurface(parent) {
     return parent instanceof SymbioteSurface;
 }
@@ -47,29 +47,27 @@ const PRIMITIVE_SELECTOR_ALIAS = {
 // anchor host (see the set comment below). Tests register their own child-component selectors
 // through this at module load; app-authored composed components can too.
 export function registerComposedComponent(selector) {
-    ANCHOR_HOST_COMPONENTS.add(selector);
+    ANCHOR_HOST_COMPONENTS.add(selector.toLowerCase());
 }
+// Lowercased at construction — createElement's lookup and registerComposedComponent's insert
+// both normalize to lowercase (Angular lowercases a dynamically-mounted component's selector at
+// runtime, see §11a), so the literal entries below must match that or every capitalized one
+// (all but the handful already written lowercase) silently never matches .has() and falls
+// through to a real Fabric createNode — the exact "Unimplemented component" / extra-wrapper-node
+// bug this Set exists to prevent.
 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',
@@ -103,7 +101,7 @@ const ANCHOR_HOST_COMPONENTS = new Set([
     'VirtualizedList',
     'VirtualizedSectionList',
     'symbiote-pressable',
-]);
+].map(selector => selector.toLowerCase()));
 // Inserting a bare raw-text node anywhere but inside a <Text> is invalid in Fabric (a
 // stray RCTRawText would paint). Angular's ɵɵtext only ever lands text inside a <Text>,
 // but guard anyway for parity with the Vue adapter and to fail loudly on a bad template.
@@ -134,7 +132,7 @@ export class SymbioteRenderer {
         // ViewConfig). toPublicInstance grafts the imperative API (measure / setNativeProps /
         // focus) onto the raw node in place, returning the SAME identity the commit mirror keys on.
         const engineName = PRIMITIVE_SELECTOR_ALIAS[name] ?? name;
-        if (ANCHOR_HOST_COMPONENTS.has(engineName)) {
+        if (ANCHOR_HOST_COMPONENTS.has(engineName.toLowerCase())) {
             const anchor = tagAnchorForDebug(createAnchor());
             dlog(`angular createElement ${name} -> anchor host ${describeHost(anchor)}`);
             return anchor;
@@ -355,4 +353,3 @@ export class SymbioteRendererFactory {
         return (this.renderer ??= new SymbioteRenderer(this.surface));
     }
 }
-//# sourceMappingURL=renderer.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/angular",
-  "version": "0.3.3",
+  "version": "0.5.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,20 +52,23 @@
   "dependencies": {
     "@angular/compiler-cli": "^22",
     "@react-native/typescript-config": "0.86.0",
-    "@symbiote-native/components": "0.2.3",
-    "@symbiote-native/engine": "0.1.4",
-    "@symbiote-native/css-parser": "0.2.1"
+    "@symbiote-native/components": "0.2.5",
+    "@symbiote-native/css-parser": "0.2.2"
   },
   "peerDependencies": {
     "@angular/core": ">=20",
+    "@symbiote-native/engine": ">=0.1.6",
     "react-native": ">=0.86"
   },
   "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.5"
+    "@symbiote-native/test-utils": "0.1.5",
+    "@symbiote-native/engine": "0.1.6"
   },
   "scripts": {
     "ng:build": "ngc -p tsconfig.angular.json",

package/src/angular-gaps.test.ts

@@ -62,7 +62,7 @@ describe('Angular adapter gap regressions', () => {
 
   it('Button forwards its full accessibility and TV-focus surface through TouchableOpacity', () => {
     const buttonSource = readSource('adapters/angular/src/components/button.ts');
-    const touchableSource = readSource('adapters/angular/src/components/touchable.ts');
+    const touchableSource = readSource('adapters/angular/src/components/touchable/index.ts');
     const pressableSource = readSource('adapters/angular/src/components/pressable/index.ts');
 
     for (const binding of [

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 → input-accessory-view/index.ts}

@@ -21,14 +21,17 @@ import {
   type IAccessibilityStateValue,
   type IAriaProps,
 } from '@symbiote-native/components';
-import type { IStyleProp, ISymbioteEvent, 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;
-}
+import {
+  isSymbioteEvent,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
+import {
+  anchorHostStyle,
+  InputAccessoryViewHost,
+  SymbioteHostPropsDirective,
+} from '../../primitives';
 
 // Mirrors React's IInputAccessoryViewProps minus children (Angular takes children via
 // <ng-content>), declared per-adapter over the shared a11y base.

package/src/components/{input-accessory-view.test.ts → input-accessory-view/input-accessory-view.test.ts}

@@ -4,8 +4,8 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
 import { installFabric } from '@symbiote-native/test-utils';
 
-import { mount, unmount } from '../render';
-import { InputAccessoryView } from './input-accessory-view';
+import { mount, unmount } from '../../render';
+import { InputAccessoryView } from './index';
 
 const ROOT_TAG = 913;
 const fabric = installFabric();

package/src/components/{keyboard-avoiding-view.ts → keyboard-avoiding-view/index.ts}

@@ -42,21 +42,16 @@ import {
   Keyboard,
   KEYBOARD_EVENT,
   dlog,
+  isSymbioteEvent,
   type IEventSubscription,
   type IStyleProp,
   type ISymbioteEvent,
   type IViewStyle,
 } from '@symbiote-native/engine';
-import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../primitives';
+import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
 
 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/{keyboard-avoiding-view.test.ts → keyboard-avoiding-view/keyboard-avoiding-view.test.ts}

@@ -4,8 +4,8 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
 import { installFabric } from '@symbiote-native/test-utils';
 
-import { mount, unmount } from '../render';
-import { KeyboardAvoidingView } from './keyboard-avoiding-view';
+import { mount, unmount } from '../../render';
+import { KeyboardAvoidingView } from './index';
 
 const ROOT_TAG = 911;
 const fabric = installFabric();

package/src/components/{modal.ts → modal/index.ts}

@@ -39,11 +39,12 @@ import {
 } from '@symbiote-native/components';
 import {
   dlog,
+  isSymbioteEvent,
   type IStyleProp,
   type ISymbioteEvent,
   type IViewStyle,
 } from '@symbiote-native/engine';
-import { anchorHostStyle, ModalHost, SymbioteHostPropsDirective, ViewHost } from '../primitives';
+import { anchorHostStyle, ModalHost, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
 
 export type {
   IModalAnimationType,
@@ -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/{modal.test.ts → modal/modal.test.ts}

@@ -4,8 +4,8 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
 import { installFabric } from '@symbiote-native/test-utils';
 
-import { mount, unmount } from '../render';
-import { Modal } from './modal';
+import { mount, unmount } from '../../render';
+import { Modal } from './index';
 
 const ROOT_TAG = 912;
 const fabric = installFabric();