@symbiote-native/angular 0.1.0

package/src/modules/app-registry/index.ts

@@ -0,0 +1,60 @@
+// AppRegistry: the JS entry point RN apps already use:
+//   AppRegistry.registerComponent(appKey, () => App)
+// The registry bookkeeping (sections, host-registrar bridge, headless tasks) is
+// framework-agnostic and lives in @symbiote-native/engine's createAppRegistry; this file supplies
+// only the one Angular-specific seam — building a runnable from a component provider via
+// `mount`'s wrapper/initialProps support (render.ts) — so examples/angular's own
+// registerRunnable + mount call can move onto the same entry point React/Vue already have.
+
+import type { Type } from '@angular/core';
+import {
+  createAppRegistry,
+  dlog,
+  type IAppParameters,
+  type IRunnable,
+} from '@symbiote-native/engine';
+import { mount } from '../../render';
+
+// RN's IComponentProvider: a thunk returning the root component (lazy so the module
+// graph stays cheap until the app actually runs).
+export type IComponentProvider = () => Type<unknown>;
+
+// RN's IWrapperComponentProvider: given the surface's parameters, returns a
+// component to wrap the app root in (e.g. a context provider). Optional. Angular has no
+// runtime template synthesis (no JIT under AOT/Metro — see create-animated-component.ts),
+// so the wrapper must be a pre-authored standalone @Component whose template renders
+// `<ng-content>` — the Angular idiom for "render my children" (mount() projects the root's
+// host node into it, the twin of React's createElement(Wrapper, null, rootElement)).
+export type IWrapperComponentProvider = (appParameters: IAppParameters) => Type<unknown>;
+
+function runnableFor(
+  componentProvider: IComponentProvider,
+  getWrapperComponentProvider: () => IWrapperComponentProvider | undefined,
+): IRunnable {
+  return appParameters => {
+    dlog(`AppRegistry: mounting on rootTag ${String(appParameters.rootTag)}`);
+    // Read live (not at registration time) so setWrapperComponentProvider affects every
+    // runnable's next run, not just future ones.
+    mount(appParameters.rootTag, componentProvider(), {
+      initialProps: appParameters.initialProps,
+      wrapperComponent: getWrapperComponentProvider()?.(appParameters),
+    });
+  };
+}
+
+const { AppRegistry, setHostRegistrar } = createAppRegistry<
+  IComponentProvider,
+  IWrapperComponentProvider
+>(runnableFor);
+
+export { AppRegistry, setHostRegistrar };
+export type {
+  IAppParameters,
+  IRunnable,
+  IHostRegistrar,
+  IRegistry,
+  IHeadlessTask,
+  ITaskProvider,
+  ITaskCanceller,
+  ITaskCancelProvider,
+} from '@symbiote-native/engine';

package/src/modules/status-bar.test.ts

@@ -0,0 +1,50 @@
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import * as engine from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../render';
+import { StatusBar } from './status-bar';
+
+const ROOT_TAG = 901;
+const fabric = installFabric();
+
+@Component({
+  selector: 'symbiote-status-bar-host',
+  standalone: true,
+  imports: [StatusBar],
+  template: ` <StatusBar [barStyle]="'dark-content'" [hidden]="true" [animated]="false" /> `,
+})
+class StatusBarHost {}
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+describe('StatusBar', () => {
+  it('applies status bar props on mount and renders no Fabric node', async () => {
+    const spy = vi.spyOn(engine, 'applyStatusBarProps').mockReturnValue(undefined);
+
+    mount(ROOT_TAG, StatusBarHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        barStyle: 'dark-content',
+        hidden: true,
+        animated: false,
+      }),
+    );
+
+    const root = fabric.appRoot();
+    expect(root.children).toHaveLength(0);
+  });
+
+  it('exposes imperative statics on the component value', () => {
+    expect(typeof StatusBar.setHidden).toBe('function');
+    expect(typeof StatusBar.setBarStyle).toBe('function');
+    expect(typeof StatusBar.setNetworkActivityIndicatorVisible).toBe('function');
+    expect(typeof StatusBar.setBackgroundColor).toBe('function');
+    expect(typeof StatusBar.setTranslucent).toBe('function');
+  });
+});

package/src/modules/status-bar.ts

@@ -0,0 +1,57 @@
+// StatusBar, the Angular lifecycle half. The native StatusBarManager driving, the imperative
+// statics, and the Android bar-height constant all live in @symbiote-native/engine, shared verbatim with
+// React and Vue; Metro selects the engine's platform variant. Angular supplies only the
+// declarative shape: a component that renders nothing and re-applies the props through
+// ngOnChanges on mount + every prop change. Imperative statics are attached to the component
+// object the same way RN does.
+
+import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
+import {
+  applyStatusBarProps,
+  statusBarImperative,
+  statusBarCurrentHeight,
+  type IColorValue,
+  type IStatusBarProps,
+  type IStatusBarStyle,
+} from '@symbiote-native/engine';
+
+export type { IStatusBarProps, IStatusBarStyle } from '@symbiote-native/engine';
+
+@Component({
+  selector: 'StatusBar',
+  standalone: true,
+  template: '',
+})
+class StatusBarComponent implements OnChanges {
+  @Input() barStyle?: IStatusBarStyle;
+  @Input() hidden?: boolean;
+  @Input() animated?: boolean;
+  @Input() networkActivityIndicatorVisible?: boolean;
+  @Input() backgroundColor?: IColorValue;
+  @Input() translucent?: boolean;
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    applyStatusBarProps(this.buildProps());
+  }
+
+  private buildProps(): IStatusBarProps {
+    return {
+      barStyle: this.barStyle,
+      hidden: this.hidden,
+      animated: this.animated,
+      networkActivityIndicatorVisible: this.networkActivityIndicatorVisible,
+      backgroundColor: this.backgroundColor,
+      translucent: this.translucent,
+    };
+  }
+}
+
+const StatusBarWithStatics = Object.assign(StatusBarComponent, statusBarImperative);
+
+Object.defineProperty(StatusBarWithStatics, 'currentHeight', {
+  get: statusBarCurrentHeight,
+  enumerable: true,
+});
+
+export const StatusBar: typeof StatusBarWithStatics & { readonly currentHeight?: number } =
+  StatusBarWithStatics;

package/src/primitives/index.ts

@@ -0,0 +1,119 @@
+// Angular primitive host components over Symbiote engine intrinsics. These are the only
+// components that directly own the `symbiote-*` selectors; every composed adapter
+// component imports them and renders them in its template. Declaring `style` as a real
+// Angular input prevents Angular's CSS style engine from decomposing RN `StyleProp` arrays.
+
+import { Component } from '@angular/core';
+import { SymbiotePrimitiveHost } from './shared';
+
+export {
+  anchorHostStyle,
+  anchorStyleProp,
+  stableAnchorStyle,
+  SymbioteHostPropsDirective,
+} from './shared';
+
+@Component({
+  selector: 'symbiote-view, View',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ViewHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-text, Text',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class TextHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-image',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ImageHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-scroll-view',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ScrollViewHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-scroll-content',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ScrollContentView extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-horizontal-scroll-view',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class HorizontalScrollView extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-horizontal-scroll-content',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class HorizontalScrollContentView extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-text-input',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class TextInputHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-text-input-multiline',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class MultilineTextInputHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-switch',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SwitchHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-activity-indicator',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ActivityIndicatorHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-safe-area-view',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SafeAreaViewHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-modal',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ModalHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-refresh-control',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class RefreshControlHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-input-accessory-view',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class InputAccessoryViewHost extends SymbiotePrimitiveHost {}

package/src/primitives/shared.ts

@@ -0,0 +1,191 @@
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  inject,
+  Input,
+  type OnChanges,
+  Renderer2,
+  type SimpleChanges,
+} from '@angular/core';
+import {
+  flattenStyle,
+  isSymbioteNode,
+  type IHostInstance,
+  type IStyleProp,
+} from '@symbiote-native/engine';
+
+/**
+ * A composed Angular component (Pressable, SafeAreaView, ScrollView, ...) is created as a
+ * non-painting ANCHOR host (`ANCHOR_HOST_COMPONENTS` in renderer.ts) so it doesn't paint an
+ * extra native view over its own template's real content. `class="..."`/`[class.x]`/`[ngClass]`
+ * at the component's use site ALWAYS resolves through the renderer's addClass/removeClass onto
+ * that anchor — Angular gives no `@Input()` interception hook for `class` the way it does for
+ * `[style]` (which is why `style` alone was declared as an `@Input()` in the first place, see
+ * `SymbiotePrimitiveHost` above) — so the anchor ends up holding the fully-resolved class-derived
+ * style (`routeProp`'s `commitClassStyle` already wrote it to `anchor.props.style`) while the
+ * REAL native node the component's own template creates never sees it.
+ *
+ * Call this from a composed component's own `hostProps`/style getter and merge the result AHEAD
+ * of its own explicit `style` @Input, e.g. `style: [anchorHostStyle(this.elementRef),
+ * this.resolvedStyle]` — array order matters: `flattenStyle`'s later-wins collapse is what makes
+ * an explicit `[style]` on the component still beat its ambient class, mirroring the
+ * class-loses-to-explicit-style cascade `commitClassStyle` already enforces for a direct
+ * primitive. `this.elementRef` must be this component's OWN injected `ElementRef` (its anchor
+ * host), not a `@ViewChild` into its template's inner primitive.
+ *
+ * Skipping this call for a new `ANCHOR_HOST_COMPONENTS` entry compiles clean under `tsc` AND a
+ * real `ngc` AOT build — no type error, no template error — it just silently drops `class="..."`
+ * forever; only a device/simulator render (or a committed-node style assertion) catches it. See
+ * the `angular-adapter` skill §21 for the device-confirmed incident and the full checklist.
+ */
+export function anchorHostStyle(elementRef: ElementRef<unknown>): unknown {
+  const node = elementRef.nativeElement;
+  return isSymbioteNode(node) ? node.props.style : undefined;
+}
+
+// anchorHostStyle returns `unknown` (it reads whatever already resolved onto the anchor node's
+// props bag); a style prop's fields are all optional so any object structurally satisfies it —
+// this narrows just enough (falsy-per-IStyleProp, or an object/array) to fold it into a
+// strictly-typed IStyleProp<T> array without an `as` cast, for a composed component whose own
+// inner primitive declares a real `@Input() style: IStyleProp<SomeConcreteStyle>` (e.g.
+// TouchableOpacity's Pressable, Button's TouchableOpacity) rather than the loosely-typed
+// `symbioteHostProps` bag most composed components merge anchorHostStyle into directly.
+function isStyleValue<T>(value: unknown): value is IStyleProp<T> {
+  return (
+    value === undefined ||
+    value === null ||
+    value === false ||
+    value === '' ||
+    typeof value === 'object'
+  );
+}
+
+export function anchorStyleProp<T>(elementRef: ElementRef<unknown>): IStyleProp<T> | undefined {
+  const value = anchorHostStyle(elementRef);
+  return isStyleValue<T>(value) ? value : undefined;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function shallowStyleEqual(a: Record<string, unknown>, b: Record<string, unknown>): boolean {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  return aKeys.every(key => a[key] === b[key]);
+}
+
+/**
+ * `anchorHostStyle` must be re-read on every check (a bare `class="x"` with no matching
+ * `[style]` binding never appears in Angular's `SimpleChanges`/dirty-check inputs, so nothing
+ * else signals "the anchor's class-derived style may have changed"). But `flattenStyle([...])`
+ * always allocates a FRESH object, even when its content is byte-for-byte identical to last
+ * time — and a windowed list component (FlatList/VirtualizedList/SectionList/
+ * VirtualizedSectionList) binds its resolved style into a structural-directive-bound `@Input()`
+ * chain where a fresh reference on an UNRELATED CD pass is mistaken for a real change, which
+ * reschedules ANOTHER CD tick (`VListOutletDirective`'s `context` `@Input()` calling
+ * `markForCheck()`) — free-running forever. See the `flat-list-array-style.test.ts` regression
+ * this fixes (and the near-identical `lastRecompute` dedup guard in `virtualized-list/index.ts`,
+ * which this mirrors at the style-merge call site instead of a whole recompute step). Returns
+ * `previous` unchanged when the freshly-flattened merge is shallow-equal to it, so a downstream
+ * `@Input() style` binding sees NO change and skips its own update on an unrelated tick.
+ */
+export function stableAnchorStyle(
+  elementRef: ElementRef<unknown>,
+  explicitStyle: unknown,
+  previous: unknown,
+): Record<string, unknown> {
+  const next = flattenStyle([anchorHostStyle(elementRef), explicitStyle]);
+  return isRecord(previous) && shallowStyleEqual(previous, next) ? previous : next;
+}
+
+const ON_PREFIX = /^on[A-Z]/;
+
+/**
+ * Base for all Angular primitive host components (`symbiote-view`, `symbiote-text`, ...).
+ * RN's `StyleProp` can be an object, an array, nested arrays, falsy entries, and Animated
+ * values. Angular's raw `[style]` binding on a custom element routes through the CSS style
+ * engine (`setStyle` per key), which crashes on numeric array keys. By declaring `style` as
+ * an Angular `@Input()` on a known component, we intercept it here and forward a flattened
+ * style object through `Renderer2.setProperty`, bypassing Angular's CSS styling path.
+ *
+ * Other props (source, pointerEvents, ...) are intentionally *not* declared as inputs.
+ * Angular then treats them as host property bindings and still dispatches them through the
+ * custom renderer's `setProperty`, so the engine's `routeProp` handles them as usual.
+ */
+@Directive()
+export abstract class SymbiotePrimitiveHost implements OnChanges {
+  private readonly renderer = inject(Renderer2);
+  private readonly elementRef = inject(ElementRef);
+
+  @Input() style?: IStyleProp<unknown>;
+
+  /**
+   * The underlying engine host node (public instance). Exposed so `findNodeHandle` can resolve
+   * an Angular template ref (`#ref`) on a primitive host to its native reactTag.
+   */
+  get nativeElement(): IHostInstance {
+    return this.elementRef.nativeElement;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!('style' in changes)) return;
+    const value = this.style === undefined ? undefined : flattenStyle(this.style);
+    this.renderer.setProperty(this.elementRef.nativeElement, 'style', value);
+  }
+}
+
+/**
+ * Applies a whole resolved props record (a shared `renderX(...).props` bag) onto a host
+ * element via `Renderer2.setProperty`, one call per key. Angular templates compile bindings
+ * ahead of time — there is no `v-bind="obj"` equivalent for a custom element — so a component
+ * whose props come from a shared render function would otherwise have to declare every key as
+ * its own static `[prop]="hostProps['x']"` binding. This generalizes the pattern
+ * `SwitchHostPropsDirective` proved first: `<symbiote-x [symbioteHostProps]="hostProps" #ref="symbioteHost">`,
+ * with `ref.node` exposing the native element for any imperative follow-up call.
+ */
+@Directive({
+  selector: '[symbioteHostProps]',
+  standalone: true,
+  exportAs: 'symbioteHost',
+  inputs: ['symbioteHostProps'],
+})
+export class SymbioteHostPropsDirective {
+  private readonly renderer = inject(Renderer2);
+  private readonly elementRef = inject<ElementRef<unknown>>(ElementRef);
+  // The directive lives in its HOST component's template, so its injected ChangeDetectorRef IS
+  // that component's own view detector — the one thing that can refresh it (see wrapCallback).
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  get node(): unknown {
+    return this.elementRef.nativeElement;
+  }
+
+  set symbioteHostProps(props: Record<string, unknown>) {
+    for (const [key, value] of Object.entries(props)) {
+      this.renderer.setProperty(this.elementRef.nativeElement, key, this.wrapCallback(key, value));
+    }
+  }
+
+  // A flat-bag `onX` callback (responder negotiation, onLongPress, …) is invoked by the engine's
+  // event dispatch — a plain JS call, entirely outside Angular. In Angular 20 a component compiles
+  // as a SignalView (not CheckAlways), so a plain (non-signal) state mutation inside such a callback
+  // does NOT dirty the view's reactive consumer, and the scheduler's root detectChanges() will NOT
+  // descend into it (a Global pass only refreshes CheckAlways / Dirty / RefreshView views) — the
+  // "pan does nothing" bug on a nested component. `markForCheck()` flags THIS component's view AND
+  // all its ancestors with RefreshView (which survives the descent) and notifies the CD scheduler,
+  // so the next root tick repaints the mutation. It targets the directive's injecting view
+  // (`_cdRefInjectingView`, i.e. the host component), unlike `detectChanges()` which acts on a
+  // resolved `_lView` that is NOT the host component here. The Angular twin of what React/Vue get
+  // for free (setState / proxy reactivity). See the `angular-adapter` skill §17.
+  private wrapCallback(key: string, value: unknown): unknown {
+    if (!ON_PREFIX.test(key) || typeof value !== 'function') return value;
+    const handler = value as (...args: unknown[]) => unknown;
+    return (...args: unknown[]): unknown => {
+      const result = handler(...args);
+      this.cdr.markForCheck();
+      return result;
+    };
+  }
+}

package/src/render.test.ts

@@ -0,0 +1,147 @@
+// Integration coverage: run the real Angular runtime (createComponent + RendererFactory2)
+// over the headless fake Fabric slot. Unlike renderer.test.ts, this proves mount() wires
+// Angular's bootstrap to the Symbiote renderer, so a standalone template paints and updates
+// through the engine.
+
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { installFabric } from '@symbiote-native/test-utils';
+import { mount, unmount } from './render';
+
+const ROOT_TAG = 808;
+
+const fabric = installFabric();
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+const drainAngularAndCommit = async (): Promise<void> => {
+  await tick();
+  await tick();
+};
+
+class TestView {}
+Component({
+  selector: 'symbiote-view',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})(TestView);
+
+class TestText {}
+Component({
+  selector: 'symbiote-text',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})(TestText);
+
+class SmokeComponent {
+  name = 'Angular';
+  count = 0;
+  boxStyle = { padding: 12 };
+
+  increment(): void {
+    this.count += 1;
+  }
+}
+
+Component({
+  selector: 'symbiote-angular-smoke',
+  standalone: true,
+  imports: [TestView, TestText],
+  template: `<symbiote-view [style]="boxStyle"><symbiote-text>Hello {{ name }}</symbiote-text><symbiote-view testID="counter" (press)="increment()"><symbiote-text>tapped {{ count }}×</symbiote-text></symbiote-view></symbiote-view>`,
+})(SmokeComponent);
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+// A plain (non-OnPush) child component compiles as SignalView in Angular 20+, so an UNTOUCHED
+// sibling child is skipped by the per-view CheckAlways/Dirty/RefreshView gate inside
+// detectChangesInView — true with or without ApplicationRef (the gate lives inside
+// detectChangesInView regardless of who calls it). This is NOT a claim that the root's own
+// template is spared: markViewDirty (used by both native (event) bindings and
+// ChangeDetectorRef.markForCheck(), see SymbioteHostPropsDirective) unconditionally sets
+// RefreshView on every ancestor up to the root — a press anywhere always re-runs the root's
+// own template, in every Angular app, regardless of scheduler. What this guards is narrower
+// but still real: a SIBLING component with no dirty descendant of its own must not be dragged
+// along for the ride.
+let unrelatedRenderCount = 0;
+class CounterChild {
+  count = 0;
+
+  increment(): void {
+    this.count += 1;
+  }
+}
+Component({
+  selector: 'counter-child',
+  standalone: true,
+  imports: [TestView, TestText],
+  template:
+    '<symbiote-view testID="counter" (press)="increment()"><symbiote-text>tapped {{ count }}×</symbiote-text></symbiote-view>',
+})(CounterChild);
+
+class UnrelatedSiblingChild {
+  trackRender(): number {
+    unrelatedRenderCount++;
+    return unrelatedRenderCount;
+  }
+}
+Component({
+  selector: 'unrelated-sibling-child',
+  standalone: true,
+  template: '<symbiote-text>unrelated {{ trackRender() }}</symbiote-text>',
+})(UnrelatedSiblingChild);
+
+class TargetedComponent {}
+Component({
+  selector: 'symbiote-angular-targeted',
+  standalone: true,
+  imports: [TestView, CounterChild, UnrelatedSiblingChild],
+  template: `<symbiote-view><counter-child /><unrelated-sibling-child /></symbiote-view>`,
+})(TargetedComponent);
+
+describe('Angular mount', () => {
+  it('bootstraps a standalone component into a committed Fabric tree', async () => {
+    mount(ROOT_TAG, SmokeComponent);
+    await tick();
+
+    const root = fabric.appRoot();
+    expect(fabric.serialize(root.children)).toBe(
+      'RCTView(RCTText(RCTRawText "Hello Angular")RCTView(RCTText(RCTRawText "tapped 0×")))',
+    );
+    expect(root.children[0]?.props).toMatchObject({ padding: 12 });
+  });
+
+  it('runs Angular change detection after a native press and recommits text', async () => {
+    mount(ROOT_TAG, SmokeComponent);
+    await tick();
+
+    const counter = fabric.find(node => node.props.testID === 'counter');
+    expect(counter).toBeDefined();
+
+    fabric.fireEvent(counter?.instanceHandle, 'topTouchStart');
+    fabric.fireEvent(counter?.instanceHandle, 'topTouchEnd');
+    await drainAngularAndCommit();
+
+    expect(fabric.serialize(fabric.appRoot().children)).toContain('RCTRawText "tapped 1×"');
+  });
+
+  it('does not re-check a sibling child component on a press inside a different child', async () => {
+    unrelatedRenderCount = 0;
+    mount(ROOT_TAG, TargetedComponent);
+    await tick();
+
+    const afterFirstPaint = unrelatedRenderCount;
+    expect(afterFirstPaint).toBeGreaterThan(0);
+
+    const counter = fabric.find(node => node.props.testID === 'counter');
+    fabric.fireEvent(counter?.instanceHandle, 'topTouchStart');
+    fabric.fireEvent(counter?.instanceHandle, 'topTouchEnd');
+    await drainAngularAndCommit();
+
+    expect(fabric.serialize(fabric.appRoot().children)).toContain('RCTRawText "tapped 1×"');
+    // UnrelatedSiblingChild has no dirty descendant of its own, so it must not be re-checked
+    // just because CounterChild (a completely separate branch) got pressed. See the
+    // `angular-adapter` skill §20 for the full investigation, including what this test does
+    // NOT prove (the root's own template still re-runs on every press — see render.ts).
+    expect(unrelatedRenderCount).toBe(afterFirstPaint);
+  });
+});