@symbiote-native/angular 0.0.0-canary-20260724081123

package/build/angular/services/window-dimensions.service.js

@@ -0,0 +1,42 @@
+import { DestroyRef, inject, Injectable, signal } from '@angular/core';
+import { Dimensions } from '@symbiote-native/engine';
+import * as i0 from "@angular/core";
+/**
+ * Angular twin of React's `useWindowDimensions` and Vue's `useWindowDimensions` composable. The
+ * service holds a Signal that tracks window metrics; consumers read it via `inject`:
+ *
+ *   readonly dimensions = inject(WindowDimensionsService).dimensions;
+ *
+ * State and lifecycle live in DI, not in a function closure.
+ */
+export class WindowDimensionsService {
+    dimensions = signal(Dimensions.get('window'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dimensions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        const handleChange = (window) => {
+            const current = this.dimensions();
+            if (current.width !== window.width ||
+                current.height !== window.height ||
+                current.scale !== window.scale ||
+                current.fontScale !== window.fontScale) {
+                this.dimensions.set(window);
+            }
+        };
+        const subscription = Dimensions.addEventListener('change', (set) => {
+            handleChange(set.window);
+        });
+        // Re-check once after subscribing to close the gap between construction and the listener.
+        handleChange(Dimensions.get('window'));
+        destroyRef.onDestroy(() => {
+            subscription.remove();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WindowDimensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WindowDimensionsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WindowDimensionsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=window-dimensions.service.js.map

package/build/angular/services/window-dimensions.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"window-dimensions.service.js","sourceRoot":"","sources":["../../../src/services/window-dimensions.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,UAAU,EAA6C,MAAM,yBAAyB,CAAC;;AAEhG;;;;;;;GAOG;AAEH,MAAM,OAAO,uBAAuB;IACzB,UAAU,GAAG,MAAM,CAAkB,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC;mFAAC,CAAC;IAExE;QACE,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAEtC,MAAM,YAAY,GAAG,CAAC,MAAuB,EAAQ,EAAE;YACrD,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,IACE,OAAO,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;gBAC9B,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;gBAChC,OAAO,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;gBAC9B,OAAO,CAAC,SAAS,KAAK,MAAM,CAAC,SAAS,EACtC,CAAC;gBACD,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,GAAmB,EAAE,EAAE;YACjF,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QACH,0FAA0F;QAC1F,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEvC,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE;YACxB,YAAY,CAAC,MAAM,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;uGA3BU,uBAAuB;2GAAvB,uBAAuB,cADV,MAAM;;2FACnB,uBAAuB;kBADnC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE"}

package/metro-config.cjs

@@ -0,0 +1,48 @@
+// Angular's AOT pipeline needs ONE Metro-side accommodation beyond the plain css-parser
+// transformer: ngc mirrors this app's whole source tree into its own outDir (see
+// tsconfig.angular.base.json's `outDir` convention, "build/angular" by default) but only ever
+// compiles .ts — a relative style import (`import './App.css'`) survives untouched in the
+// compiled .js, still pointing at the ORIGINAL source location, which ngc never copies there.
+// Metro resolves that relative specifier against the COMPILED file's own location
+// (<outDir>/...), so without this it 404s on a file that was never created there. This redirects
+// such an import back to the real source file instead of copying it — a copy would need its own
+// re-copy on every CSS edit during `ngc --watch` (which only re-runs on .ts changes), while this
+// redirect lets Metro's own watchFolders pick up a source-file CSS edit for free. Applies
+// identically to a release `react-native bundle`, which resolves through this same config.
+//
+// watchFolders/extraNodeModules are intentionally NOT included here — those are monorepo-only
+// pnpm-workspace concerns (deduping a single react/@angular/core copy across packages), not
+// relevant to an external app installing @symbiote-native/angular from npm; a consumer keeps
+// those local to their own metro.config.js if it needs them at all.
+const fs = require('node:fs');
+const path = require('node:path');
+
+function withSymbioteAngularMetroConfig(defaultConfig, projectRoot, { outDir = 'build/angular' } = {}) {
+  const buildRoot = path.join(projectRoot, ...outDir.split('/'));
+
+  return {
+    resolver: {
+      // Teach Metro that a style file is a source file (the transformer above turns it into a
+      // module). scss/sass/less/styl are optional preprocessor sources, reduced to plain CSS
+      // before the same transformer runs.
+      sourceExts: [...defaultConfig.resolver.sourceExts, 'css', 'scss', 'sass', 'less', 'styl'],
+      resolveRequest: (context, moduleName, platform) => {
+        const isRelativeStyleImport =
+          /^\.\.?\//.test(moduleName) && /\.(css|scss|sass|less|styl)$/.test(moduleName);
+        if (isRelativeStyleImport) {
+          const originDir = path.dirname(context.originModulePath);
+          if (originDir === buildRoot || originDir.startsWith(buildRoot + path.sep)) {
+            const sourceDir = path.join(projectRoot, path.relative(buildRoot, originDir));
+            const sourceFile = path.resolve(sourceDir, moduleName);
+            if (fs.existsSync(sourceFile)) {
+              return { type: 'sourceFile', filePath: sourceFile };
+            }
+          }
+        }
+        return context.resolveRequest(context, moduleName, platform);
+      },
+    },
+  };
+}
+
+module.exports = { withSymbioteAngularMetroConfig };

package/metro-css-parser.cjs

@@ -0,0 +1,13 @@
+// Re-exports @symbiote-native/css-parser verbatim from INSIDE this package, so a consuming app's own
+// require('@symbiote-native/angular/metro-css-parser') resolves css-parser relative to THIS file's
+// location (adapters/angular/node_modules, where css-parser IS a real dependency — see
+// package.json), not relative to the app's own node_modules, which does not and should not
+// need to declare @symbiote-native/css-parser itself. Node resolves each require() relative to the
+// requiring FILE's own location, so this indirection is what actually removes the extra install
+// step, not pnpm hoisting (which does not propagate this transitively across workspace packages
+// the way a flat classic node_modules would). .cjs, not .js: this package is "type": "module",
+// and Metro's babelTransformerPath loading expects a require()-able module.
+// createCssMetroTransformer is a factory, not a ready transformer — Metro's
+// babelTransformerPath needs the actual {transform, getCacheKey} object it returns,
+// not the css-parser package barrel.
+module.exports = require('@symbiote-native/css-parser').createCssMetroTransformer();

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@symbiote-native/angular",
+  "version": "0.0.0-canary-20260724081123",
+  "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.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "adapters/angular"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/adapters/angular#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "type": "module",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./build/angular/index.d.ts",
+      "react-native": "./build/angular/index.js",
+      "default": "./src/index.ts"
+    },
+    "./bootstrap": {
+      "types": "./build/angular/bootstrap.d.ts",
+      "react-native": "./build/angular/bootstrap.js",
+      "default": "./src/bootstrap.ts"
+    },
+    "./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": [
+    "src",
+    "build",
+    "bin",
+    "metro-css-parser.cjs",
+    "metro-config.cjs",
+    "babel-linker.cjs",
+    "babel-register-composed.cjs",
+    "tsconfig.angular.base.json"
+  ],
+  "bin": {
+    "symbiote-angular-dev": "./bin/symbiote-angular-dev.cjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@angular/compiler-cli": "^22",
+    "@react-native/typescript-config": "0.86.0",
+    "@symbiote-native/components": "0.3.0",
+    "@symbiote-native/css-parser": "0.2.3"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20",
+    "@symbiote-native/engine": ">=0.1.7",
+    "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/engine": "0.1.7",
+    "@symbiote-native/test-utils": "0.1.6"
+  },
+  "scripts": {
+    "clean": "rm -rf build",
+    "ng:build": "pnpm run clean && ngc -p tsconfig.angular.json",
+    "typecheck": "tsc --build",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
+}

package/src/__tests__/responder-change-detection.test.ts

@@ -0,0 +1,102 @@
+// A flat-bag `onX` responder callback is invoked by the engine's event dispatch, entirely
+// outside Angular. In Angular 20 components compile as SignalView (not CheckAlways), so a plain
+// state mutation inside such a callback dirties nothing and the template stays stale — the "pan
+// does nothing" bug, while React/Vue repainted the same demo. SymbioteHostPropsDirective now
+// calls `cdr.markForCheck()` after each such callback (flags the component + ancestors with
+// RefreshView and notifies the scheduler), so the mutation repaints. This is the flat-root case;
+// responder-nested-cd.test.ts covers the App→child nesting the real app has.
+
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../render';
+import { ViewHost as View, TextHost as Text, SymbioteHostPropsDirective } from '../primitives';
+
+const ROOT_TAG = 970;
+const TOUCH_START = 'topTouchStart';
+const TOUCH_MOVE = 'topTouchMove';
+const TOUCH_END = 'topTouchEnd';
+
+const fabric = installFabric();
+
+// Fabric is clone-on-write: a prop update yields a NEW node object in the committed tree,
+// never in `created`. Walk the live committed child-set for post-mutation assertions.
+function findCommitted(predicate: (node: IFakeNode) => boolean): IFakeNode | undefined {
+  const stack = [...fabric.committed];
+  while (stack.length > 0) {
+    const node = stack.pop();
+    if (node === undefined) continue;
+    if (predicate(node)) return node;
+    stack.push(...node.children);
+  }
+  return undefined;
+}
+
+function statusText(testID: string): string | undefined {
+  const node = findCommitted(n => n.props.testID === testID);
+  const raw = node?.children[0];
+  return typeof raw?.props.text === 'string' ? raw.props.text : undefined;
+}
+
+// The stable SymbioteNode (event target). Its identity and listener map survive clone-on-
+// write, so firing on the first-created handle reaches the live listeners.
+function handleFor(testID: string): unknown {
+  const node = fabric.find(n => n.props.testID === testID);
+  if (!node) throw new Error(`no node created with testID=${testID}`);
+  return node.instanceHandle;
+}
+
+const flush = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+@Component({
+  selector: 'symbiote-responder-cd-host',
+  standalone: true,
+  imports: [View, Text, SymbioteHostPropsDirective],
+  template: `
+    <View [symbioteHostProps]="handlers"></View>
+    <Text [symbioteHostProps]="statusProps">{{ status }}</Text>
+  `,
+})
+class ResponderCdHost {
+  status = 'idle';
+  statusProps = { testID: 'status' };
+  handlers = {
+    testID: 'chip',
+    onStartShouldSetResponder: () => true,
+    onResponderGrant: () => {
+      this.status = 'granted';
+    },
+    onResponderMove: () => {
+      this.status = 'moving';
+    },
+    onResponderRelease: () => {
+      this.status = 'released';
+    },
+  };
+}
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+describe('Angular responder callback triggers change detection', () => {
+  it('re-renders bound state mutated inside a flat-bag responder callback', async () => {
+    mount(ROOT_TAG, ResponderCdHost);
+    await flush();
+    expect(statusText('status')).toBe('idle');
+
+    const chip = handleFor('chip');
+    fabric.fireEvent(chip, TOUCH_START);
+    await flush();
+    expect(statusText('status')).toBe('granted');
+
+    fabric.fireEvent(chip, TOUCH_MOVE);
+    await flush();
+    expect(statusText('status')).toBe('moving');
+
+    fabric.fireEvent(chip, TOUCH_END);
+    await flush();
+    expect(statusText('status')).toBe('released');
+  });
+});

package/src/__tests__/responder-nested-cd.test.ts

@@ -0,0 +1,113 @@
+// The device-faithful shape: a ROOT component whose template embeds a CHILD component that
+// owns the responder state + the {{status}} binding (App -> ResponderDemo). Angular 20 compiles
+// components as SignalView (not CheckAlways), so a plain (non-signal) state mutation inside a
+// flat-bag responder callback does NOT dirty the child's reactive consumer, and the scheduler's
+// root detectChanges() will NOT descend into it — the child's {{status}} used to stay stale
+// ("pan does nothing"). SymbioteHostPropsDirective now refreshes its own host component's view
+// right after the callback runs, so the nested child repaints.
+
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../render';
+import { ViewHost as View, TextHost as Text, SymbioteHostPropsDirective } from '../primitives';
+import { registerComposedComponent } from '../anchor-host-registry';
+
+const ROOT_TAG = 972;
+const TOUCH_START = 'topTouchStart';
+const TOUCH_MOVE = 'topTouchMove';
+const TOUCH_END = 'topTouchEnd';
+
+registerComposedComponent('nested-responder-inner');
+
+const fabric = installFabric();
+
+function findCommitted(predicate: (node: IFakeNode) => boolean): IFakeNode | undefined {
+  const stack = [...fabric.committed];
+  while (stack.length > 0) {
+    const node = stack.pop();
+    if (node === undefined) continue;
+    if (predicate(node)) return node;
+    stack.push(...node.children);
+  }
+  return undefined;
+}
+
+function statusText(testID: string): string | undefined {
+  const node = findCommitted(n => n.props.testID === testID);
+  const raw = node?.children[0];
+  return typeof raw?.props.text === 'string' ? raw.props.text : undefined;
+}
+
+function handleFor(testID: string): unknown {
+  const node = fabric.find(n => n.props.testID === testID);
+  if (!node) throw new Error(`no node created with testID=${testID}`);
+  return node.instanceHandle;
+}
+
+const flush = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+@Component({
+  selector: 'nested-responder-inner',
+  standalone: true,
+  imports: [View, Text, SymbioteHostPropsDirective],
+  template: `
+    <View [symbioteHostProps]="handlers"></View>
+    <Text [symbioteHostProps]="statusProps">{{ status }}</Text>
+  `,
+})
+class NestedResponderInner {
+  status = 'idle';
+  statusProps = { testID: 'nested-status' };
+  handlers = {
+    testID: 'nested-chip',
+    onStartShouldSetResponder: () => true,
+    onResponderGrant: () => {
+      this.status = 'granted';
+    },
+    onResponderMove: () => {
+      this.status = 'moving';
+    },
+    onResponderRelease: () => {
+      this.status = 'released';
+    },
+  };
+}
+
+@Component({
+  selector: 'nested-responder-outer',
+  standalone: true,
+  imports: [View, NestedResponderInner],
+  template: `
+    <View>
+      <nested-responder-inner></nested-responder-inner>
+    </View>
+  `,
+})
+class NestedResponderOuter {}
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+describe('Angular nested-child responder CD', () => {
+  it('re-renders a nested child component`s state mutated in a flat-bag responder callback', async () => {
+    mount(ROOT_TAG, NestedResponderOuter);
+    await flush();
+    expect(statusText('nested-status')).toBe('idle');
+
+    const chip = handleFor('nested-chip');
+    fabric.fireEvent(chip, TOUCH_START);
+    await flush();
+    expect(statusText('nested-status')).toBe('granted');
+
+    fabric.fireEvent(chip, TOUCH_MOVE);
+    await flush();
+    expect(statusText('nested-status')).toBe('moving');
+
+    fabric.fireEvent(chip, TOUCH_END);
+    await flush();
+    expect(statusText('nested-status')).toBe('released');
+  });
+});

package/src/anchor-host-registry.ts

@@ -0,0 +1,88 @@
+// Registry of composed-component selectors that must NOT paint a native view of their own.
+//
+// A dependency-free LEAF module (imports nothing from the adapter barrel `./index` or
+// `./components`, both deeply require-cyclic). Both consumers reach it by RELATIVE path — the
+// renderer imports `isAnchorHostComponent` from `../anchor-host-registry`, the barrel re-exports
+// `registerComposedComponent` from `./anchor-host-registry` — so Metro keys it to ONE module
+// instance / ONE Set. Do NOT give it a package `exports` subpath and inject THAT bare specifier
+// into app code: a subpath resolves via a different path than the relative imports under pnpm
+// symlinks, which splits the Set in two.
+//
+// Housing the registry here rather than inline in `renderer/index.ts` keeps it out of the require
+// cycle (cheap insurance against a load-order strand). The bug that actually surfaced this,
+// though, was STALE BUILD ARTIFACTS, not the cycle: `ngc -p` never deletes orphaned outputs, so
+// after the renderer moved `renderer.ts` → `renderer/index.ts` the orphaned `build/angular/
+// renderer.js` lingered and SHADOWED `build/angular/renderer/index.js` (a file beats a folder in
+// Node/Metro resolution), giving the bundle a second, stale registry Set — fixed by cleaning
+// `build/` before every ngc build (see each Angular package's `clean` script). Full record:
+// angular-adapter §11c, symbiote-dev-examples §5e.
+
+// Lowercased at construction — isAnchorHostComponent and registerComposedComponent both normalize
+// to lowercase (Angular lowercases a dynamically-mounted component's selector at runtime, see
+// angular-adapter §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: Set<string> = 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, 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',
+    'Button',
+    'FlatList',
+    'AnimatedView',
+    'symbiote-animated-view',
+    'AnimatedText',
+    'symbiote-animated-text',
+    'AnimatedImage',
+    'symbiote-animated-image',
+    'AnimatedScrollView',
+    'symbiote-animated-scroll-view',
+    'symbiote-descriptor-outlet',
+    'tunnel-out',
+    'Image',
+    'ImageBackground',
+    'InputAccessoryView',
+    'KeyboardAvoidingView',
+    'Modal',
+    'Pressable',
+    'RefreshControl',
+    'SafeAreaView',
+    'ScrollView',
+    'ScrollViewStickyHeader',
+    'SectionList',
+    'symbiote-sticky-header',
+    'StatusBar',
+    'Switch',
+    'Text',
+    'TextInput',
+    'TouchableHighlight',
+    'TouchableNativeFeedback',
+    'TouchableOpacity',
+    'TouchableWithoutFeedback',
+    'VirtualizedList',
+    'VirtualizedSectionList',
+    'symbiote-pressable',
+  ].map(selector => selector.toLowerCase()),
+);
+
+// A composed component's selector must be registered so createElement gives it a non-painting
+// anchor host (see the Set comment above). Tests register their own child-component selectors
+// through this at module load; app-authored composed components self-register the same way via
+// the babel-register-composed plugin.
+export function registerComposedComponent(selector: string): void {
+  ANCHOR_HOST_COMPONENTS.add(selector.toLowerCase());
+}
+
+// True when `engineName` is a composed selector that must anchor-host (not paint). Case-
+// insensitive — the Set is lowercased at construction, so callers pass the raw selector.
+export function isAnchorHostComponent(engineName: string): boolean {
+  return ANCHOR_HOST_COMPONENTS.has(engineName.toLowerCase());
+}

package/src/angular-gaps.test.ts

@@ -0,0 +1,142 @@
+/// <reference types="node" />
+
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+const readSource = (path: string): string => readFileSync(path, 'utf8');
+
+describe('Angular adapter gap regressions', () => {
+  it('VirtualizedList exposes accessibility and aria inputs and forwards them to ScrollView', () => {
+    const source = readSource('adapters/angular/src/components/virtualized-list/index.ts');
+
+    expect(source).toContain('@Input() accessibilityLabel?: string');
+    expect(source).toContain('@Input() ariaBusy?: boolean');
+    expect(source).toContain('[accessibilityLabel]="foldedAccessibility.accessibilityLabel"');
+    expect(source).toContain('[accessibilityState]="foldedAccessibility.accessibilityState"');
+    expect(source).toContain('[accessibilityRole]="foldedAccessibility.accessibilityRole"');
+  });
+
+  it('Animated namespace exposes AOT-safe built-in entries and documents runtime HOC as a non-goal', () => {
+    const animatedSource = readSource('adapters/angular/src/modules/animated/index.ts');
+    const componentSource = readSource(
+      'adapters/angular/src/modules/animated/create-animated-component.ts',
+    );
+
+    expect(componentSource).toContain('export const AnimatedFlatList');
+    expect(componentSource).toContain('export const AnimatedSectionList');
+    expect(componentSource).toContain('if (base === View) return AnimatedView');
+    expect(componentSource).toContain('if (base === Text) return AnimatedText');
+    expect(componentSource).toContain('if (base === Image) return AnimatedImage');
+    expect(componentSource).toContain('if (base === ScrollView) return AnimatedScrollView');
+    expect(componentSource).toContain('Angular cannot synthesize a component at runtime');
+    expect(componentSource).toContain('no JIT under AOT/Metro');
+    expect(componentSource).toContain(
+      'Author an explicit standalone @Component extending AnimatedComponentBase',
+    );
+    expect(animatedSource).toContain('View: AnimatedView');
+    expect(animatedSource).toContain('Text: AnimatedText');
+    expect(animatedSource).toContain('Image: AnimatedImage');
+    expect(animatedSource).toContain('ScrollView: AnimatedScrollView');
+    expect(animatedSource).toContain('FlatList: AnimatedFlatList');
+    expect(animatedSource).toContain('SectionList: AnimatedSectionList');
+  });
+
+  it('AnimatedImage uses composed Image props and normalized load events', () => {
+    const source = readSource('adapters/angular/src/modules/animated/create-animated-component.ts');
+
+    expect(source).toContain('export class AnimatedImage extends ImageBase');
+    expect(source).toContain('inputs: ANIMATED_IMAGE_INPUTS');
+    expect(source).toContain('outputs: IMAGE_OUTPUTS');
+    expect(source).toContain('const resolved = resolveImageProps(reduced)');
+    expect(source).toContain('(load)="handleLoad($event)"');
+    expect(source).toContain('(error)="handleError($event)"');
+  });
+
+  it('Image prop resolution is shared with AnimatedImage', () => {
+    const imageSource = readSource('adapters/angular/src/components/image/shared.ts');
+
+    expect(imageSource).toContain('export function resolveImageProps');
+    expect(imageSource).toContain('get imageProps(): Record<string, unknown>');
+    expect(imageSource).toContain('return resolveImageProps(this.imageInputProps)');
+  });
+
+  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/index.ts');
+    const pressableSource = readSource('adapters/angular/src/components/pressable/index.ts');
+
+    for (const binding of [
+      '[accessible]="true"',
+      '[accessibilityLabelledBy]="accessibilityLabelledBy"',
+      '[importantForAccessibility]="importantForAccessibility"',
+      '[accessibilityLiveRegion]="accessibilityLiveRegion"',
+      '[screenReaderFocusable]="screenReaderFocusable"',
+      '[accessibilityViewIsModal]="accessibilityViewIsModal"',
+      '[accessibilityElementsHidden]="accessibilityElementsHidden"',
+      '[accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"',
+      '[accessibilityLanguage]="accessibilityLanguage"',
+      '[accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"',
+      '[accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"',
+      '[accessibilityLargeContentTitle]="accessibilityLargeContentTitle"',
+      '(accessibilityAction)="accessibilityAction.emit($event)"',
+      '(accessibilityTap)="accessibilityTap.emit($event)"',
+      '(magicTap)="magicTap.emit($event)"',
+      '(accessibilityEscape)="accessibilityEscape.emit($event)"',
+      '[ariaModal]="ariaModal"',
+      '[ariaValueMax]="ariaValueMax"',
+      '[ariaValueMin]="ariaValueMin"',
+      '[ariaValueNow]="ariaValueNow"',
+      '[ariaValueText]="ariaValueText"',
+      '[hasTVPreferredFocus]="hasTVPreferredFocus"',
+      '[nextFocusDown]="nextFocusDown"',
+      '[nextFocusForward]="nextFocusForward"',
+      '[nextFocusLeft]="nextFocusLeft"',
+      '[nextFocusRight]="nextFocusRight"',
+      '[nextFocusUp]="nextFocusUp"',
+    ]) {
+      expect(buttonSource).toContain(binding);
+    }
+
+    for (const binding of [
+      '[accessible]="accessible"',
+      '[accessibilityLabelledBy]="accessibilityLabelledBy"',
+      '[importantForAccessibility]="importantForAccessibility"',
+      '[accessibilityLiveRegion]="accessibilityLiveRegion"',
+      '[screenReaderFocusable]="screenReaderFocusable"',
+      '[accessibilityViewIsModal]="accessibilityViewIsModal"',
+      '[accessibilityElementsHidden]="accessibilityElementsHidden"',
+      '[accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"',
+      '[accessibilityLanguage]="accessibilityLanguage"',
+      '[accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"',
+      '[accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"',
+      '[accessibilityLargeContentTitle]="accessibilityLargeContentTitle"',
+      '(accessibilityAction)="accessibilityAction.emit($event)"',
+      '(accessibilityTap)="accessibilityTap.emit($event)"',
+      '(magicTap)="magicTap.emit($event)"',
+      '(accessibilityEscape)="accessibilityEscape.emit($event)"',
+      '[ariaModal]="ariaModal"',
+      '[ariaValueMax]="ariaValueMax"',
+      '[ariaValueMin]="ariaValueMin"',
+      '[ariaValueNow]="ariaValueNow"',
+      '[ariaValueText]="ariaValueText"',
+      '[hasTVPreferredFocus]="hasTVPreferredFocus"',
+      '[nextFocusDown]="nextFocusDown"',
+      '[nextFocusForward]="nextFocusForward"',
+      '[nextFocusLeft]="nextFocusLeft"',
+      '[nextFocusRight]="nextFocusRight"',
+      '[nextFocusUp]="nextFocusUp"',
+    ]) {
+      expect(touchableSource).toContain(binding);
+    }
+
+    // Pressable forwards its resolved props through the shared SymbioteHostPropsDirective
+    // (adapters/angular/src/primitives/shared.ts) rather than one `[prop]="x"` binding per
+    // key, so the contract to check is: the binding exists, and the `hostProps` getter it
+    // reads from actually assembles `accessible` / the folded accessibility bag / TV-focus.
+    expect(pressableSource).toContain('[symbioteHostProps]="hostProps"');
+    expect(pressableSource).toContain('accessible: this.accessible');
+    expect(pressableSource).toContain('...this.foldedAccessibility');
+    expect(pressableSource).toContain('hasTVPreferredFocus: this.hasTVPreferredFocus');
+    expect(pressableSource).toContain('(accessibilityAction)="emit(accessibilityAction, $event)"');
+  });
+});