@symbiote-native/angular 0.6.2 → 0.7.0

package/src/components/scroll-view/index.android.ts

@@ -1,23 +1,22 @@
-// ScrollView on Android. An Android ScrollView accepts only ONE child, so a
-// RefreshControl can't be a sibling of the content the way iOS allows ("addViewAt: failed to insert
-// view ... at index 1"). RN solves this by having the RefreshControl (AndroidSwipeRefreshLayout)
-// WRAP the scroll view (cloneElement(refreshControl, {style}, scrollView)). Angular mirrors that
-// shape by querying a projected <RefreshControl>, re-rendering its native prop surface as the outer
-// wrapper, and projecting every non-RefreshControl child into the inner scroll content.
+// ScrollView on Android. An Android ScrollView accepts only ONE child, so a RefreshControl can't
+// be a sibling of the content the way iOS allows ("addViewAt: failed to insert view ... at index
+// 1"). RN solves this by having the RefreshControl (AndroidSwipeRefreshLayout) WRAP the scroll
+// view (cloneElement(refreshControl, {style}, scrollView)). Angular mirrors that shape by querying
+// a projected <RefreshControl>, re-rendering its native prop surface as the outer wrapper, and
+// projecting every non-RefreshControl child into the inner scroll content.
 //
-// Android genuinely needs a different Fabric view per
-// axis for BOTH the outer scroll container (RCTScrollView is vertical-only; AndroidHorizontalScrollView
-// is a dedicated ViewManager) AND the inner content view (vertical content is a plain Android View,
-// horizontal content is AndroidHorizontalScrollContentView, which carries its own ShadowNode::
-// layout() override). So the content tag differs by axis — but Angular only reliably projects into a
-// component's LAST-declared <ng-content> when 2+ DISTINCT declarations exist (angular/angular#22972),
-// which an earlier 4-call-site template (one <ng-content> per axis x refresh-control branch) tripped.
-// Fix: exactly ONE `<ng-content>` textually, inside a single top-level `<ng-template>`, re-instantiated
-// into whichever branch is active via a local template-outlet directive (SymbioteTemplateOutletDirective
-// below, `@angular/common`-free per this adapter's dependency policy — see package.json). Only one
-// branch is ever live at a time, and the `<ng-content>` DECLARATION COUNT stays at one, so the "last
-// one wins" limitation never triggers. Covered by `android-scroll-view-axis-projection.test.ts` (all
-// four axis x refresh combos, plus a runtime axis switch) and `flat-list-scroll-containment.test.ts`.
+// Android needs a different Fabric view per axis for both the outer scroll container
+// (RCTScrollView is vertical-only; AndroidHorizontalScrollView is a dedicated ViewManager) and the
+// inner content view (horizontal content is AndroidHorizontalScrollContentView, with its own
+// ShadowNode::layout() override) — but Angular only reliably projects into a component's
+// LAST-declared <ng-content> when 2+ DISTINCT declarations exist (angular/angular#22972), which an
+// earlier 4-call-site template (one <ng-content> per axis x refresh-control branch) tripped. Fix:
+// exactly ONE `<ng-content>` textually, inside a single top-level `<ng-template>`, re-instantiated
+// into whichever branch is active via a local template-outlet directive
+// (SymbioteTemplateOutletDirective below, `@angular/common`-free per this adapter's dependency
+// policy — see package.json). Only one branch is ever live, so the declaration count stays at one
+// and the "last one wins" limitation never triggers. Covered by
+// `android-scroll-view-axis-projection.test.ts` and `flat-list-scroll-containment.test.ts`.
 //
 // Metro picks this on an Android host; no Platform.OS read.
 
@@ -26,7 +25,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   Directive,
-  ElementRef,
   Input,
   TemplateRef,
   ViewContainerRef,
@@ -37,13 +35,13 @@ import {
 } from '@angular/core';
 import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
 import {
-  anchorHostStyle,
-  HorizontalScrollView,
   HorizontalScrollContentView,
+  HorizontalScrollView,
   RefreshControlHost,
   ScrollContentView,
   ScrollViewHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
 } from '../../primitives';
 import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS } from './shared';
 export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
@@ -89,6 +87,7 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
 @Component({
   selector: 'ScrollView',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     ScrollViewHost,
@@ -115,10 +114,10 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
         >
           <symbiote-horizontal-scroll-view
             #host="symbioteHost"
-            [symbioteHostProps]="androidWrappedScrollProps"
+            [symbioteHostProps]="androidWrappedScrollProps()"
           >
             <symbiote-horizontal-scroll-content
-              [symbioteHostProps]="contentProps"
+              [symbioteHostProps]="contentProps()"
               [symbioteScrollViewProjection]="projectionController"
             >
               <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
@@ -126,9 +125,9 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
           </symbiote-horizontal-scroll-view>
         </symbiote-refresh-control>
       } @else {
-        <symbiote-horizontal-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+        <symbiote-horizontal-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps()">
           <symbiote-horizontal-scroll-content
-            [symbioteHostProps]="contentProps"
+            [symbioteHostProps]="contentProps()"
             [symbioteScrollViewProjection]="projectionController"
           >
             <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
@@ -144,10 +143,10 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
         >
           <symbiote-scroll-view
             #host="symbioteHost"
-            [symbioteHostProps]="androidWrappedScrollProps"
+            [symbioteHostProps]="androidWrappedScrollProps()"
           >
             <symbiote-scroll-content
-              [symbioteHostProps]="contentProps"
+              [symbioteHostProps]="contentProps()"
               [symbioteScrollViewProjection]="projectionController"
             >
               <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
@@ -155,9 +154,9 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
           </symbiote-scroll-view>
         </symbiote-refresh-control>
       } @else {
-        <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+        <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps()">
           <symbiote-scroll-content
-            [symbioteHostProps]="contentProps"
+            [symbioteHostProps]="contentProps()"
             [symbioteScrollViewProjection]="projectionController"
           >
             <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
@@ -168,23 +167,17 @@ function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
   `,
 })
 export class ScrollView extends ScrollViewBase {
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment) — NOT `#host` in the template above, which targets
-  // the real inner `symbiote-scroll-view`/`symbiote-horizontal-scroll-view` one level down.
-  private readonly elementRef = inject(ElementRef);
-
-  override get scrollProps(): Record<string, unknown> {
-    const props = super.scrollProps;
-    return { ...props, style: [anchorHostStyle(this.elementRef), props.style] };
-  }
-
   // Feeds the anchor's class-derived style INTO the base class's own `splitLayoutProps` call
   // (shared.ts's `androidWrappedScrollProps`/`androidRefreshControlProps`), not tacked on after —
   // a class-only layout style (flex/height/gap/…) must be visible to the split itself, or the
   // Android outer refresh-control wrapper never receives its share and collapses to zero size
   // (a real device bug: the whole ScrollView renders nothing). See layoutSplitStyle's doc comment
   // in shared.ts and the identical fix already shipped in the Vue adapter's scroll-view.
+  //
+  // Reads the base's `anchorStyle` SIGNAL rather than calling anchorHostStyle() directly: this
+  // getter is evaluated inside the `androidWrappedScrollProps` computed, where a plain read would
+  // be untracked and leave the memoized bag holding a stale class.
   protected override get layoutSplitStyle(): IStyleProp<IViewStyle> {
-    return [asStyle(anchorHostStyle(this.elementRef)), this.style];
+    return [asStyle(this.anchorStyle()), this.style];
   }
 }

package/src/components/scroll-view/index.ios.ts

@@ -16,19 +16,13 @@
 // a horizontal FlatList's cells landed outside the ScrollView entirely. Fix: single unconditional
 // `<ng-content>` call site.
 
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
 import {
-  CUSTOM_ELEMENTS_SCHEMA,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  inject,
-} from '@angular/core';
-import {
-  anchorHostStyle,
   RefreshControlHost,
   ScrollContentView,
   ScrollViewHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
 } from '../../primitives';
 import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS } from './shared';
 export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
@@ -38,6 +32,7 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
 @Component({
   selector: 'ScrollView',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     ScrollViewHost,
@@ -49,7 +44,7 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: SCROLL_VIEW_INPUTS,
   template: `
-    <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+    <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps()">
       @if (hasProjectedRefreshControl) {
         <symbiote-refresh-control
           #refreshHost="symbioteHost"
@@ -58,7 +53,7 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
         ></symbiote-refresh-control>
       }
       <symbiote-scroll-content
-        [symbioteHostProps]="contentProps"
+        [symbioteHostProps]="contentProps()"
         [symbioteScrollViewProjection]="projectionController"
       >
         <ng-content></ng-content>
@@ -66,14 +61,8 @@ export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
     </symbiote-scroll-view>
   `,
 })
-export class ScrollView extends ScrollViewBase {
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment) — NOT `#host` in the template above, which targets
-  // the real inner `symbiote-scroll-view` one level down.
-  private readonly elementRef = inject(ElementRef);
-
-  override get scrollProps(): Record<string, unknown> {
-    const props = super.scrollProps;
-    return { ...props, style: [anchorHostStyle(this.elementRef), props.style] };
-  }
-}
+// Behavior lives entirely in ScrollViewBase; this class exists for the decorator + iOS template.
+// The anchor-style merge that used to be a `scrollProps` override here moved into the base's
+// `scrollProps` computed - a subclass getter cannot override a field, and both platforms merged it
+// identically anyway (see that computed's comment).
+export class ScrollView extends ScrollViewBase {}

package/src/components/scroll-view/projection.ts

@@ -73,6 +73,9 @@ function isProjectedRefreshControl(node: ISymbioteNode): boolean {
 // delay, rebuild ranges, cross-talk record) live there; this runner only EXECUTES the effects on the
 // engine node (build interpolation + wire listener, hold the debounce timer, re-apply the node props).
 // Because it owns the child index, it consumes the reducer's record-header-y effect for cross-talk.
+// Diagnostic-only: a process-wide counter so each controller's log lines are attributable.
+let projectionControllerSeq = 0;
+
 class StickyProjectionWrapper {
   private readonly state = createInitialStickyState();
   private animatedTranslateY: AnimatedInterpolation;
@@ -91,6 +94,9 @@ class StickyProjectionWrapper {
       inputRange: [-1, 0],
       outputRange: [0, 0],
     });
+    dlog(
+      `STICKY[wrap] created index=${childIndex} scrollValueIsNative=${this.controller.config.scrollAnimatedValue.__isNative()}`,
+    );
     this.dispatch({ kind: 'inputs-changed' });
   }
 
@@ -148,7 +154,7 @@ class StickyProjectionWrapper {
           this.animatedTranslateY = next;
           this.applyProps();
           dlog(
-            `Angular ScrollView projection sticky index=${this.childIndex} measured=${this.state.measured} y=${this.state.layoutY}`,
+            `STICKY[wrap] rebuilt index=${this.childIndex} measured=${this.state.measured} y=${this.state.layoutY}`,
           );
           break;
         }
@@ -172,6 +178,7 @@ class StickyProjectionWrapper {
   private readonly onLayout = (event: ISymbioteEvent): void => {
     const y = readLayoutNumber(event, 'y');
     const height = readLayoutNumber(event, 'height');
+    dlog(`STICKY[wrap] index=${this.childIndex} onLayout y=${y} height=${height}`);
     // Keep the previous value when a field is absent (RN sets state only on a defined read).
     this.dispatch({
       kind: 'layout',
@@ -180,7 +187,12 @@ class StickyProjectionWrapper {
     });
   };
 
+  // The ONLY thing that drives the committed pin on this path: applyProps has no __makeNative(),
+  // so the wrapper is JS-driven end to end. If the scroll value has been made native up front the
+  // cascade to child listeners stops (AnimatedWithChildren.__callListeners skips children once
+  // isNative) and this never fires - the header then renders in place and never moves.
   private readonly animatedValueListener = ({ value }: { value: number | string }): void => {
+    dlog(() => `STICKY[wrap] index=${this.childIndex} animated-tick value=${String(value)}`);
     if (typeof value === 'number') this.dispatch({ kind: 'animated-tick', value });
   };
 
@@ -203,14 +215,37 @@ class StickyProjectionWrapper {
   private applyProps(): void {
     const props = this.props();
     const reduced = reduceProps(props);
+    // Thunk: applyProps is on the scroll-driven path (every animated-tick while the pin is
+    // JS-driven), and JSON.stringify of a reduced transform is not free.
+    dlog(
+      () =>
+        `STICKY[wrap] index=${this.childIndex} applyProps translateY=${String(this.state.translateY)} ` +
+        `measured=${this.state.measured} layoutY=${this.state.layoutY} ` +
+        `scrollValueIsNative=${this.controller.config.scrollAnimatedValue.__isNative()} ` +
+        `reducedTransform=${JSON.stringify(reduced.transform ?? reduced.style)}`,
+    );
     for (const [key, value] of Object.entries(reduced)) routeProp(this.node, key, value);
 
     const next = new AnimatedProps(props);
     next.__attach();
+    // No explicit __makeNative() here on purpose: __attach joins the leaf to the interpolation,
+    // which sits under the shared scroll value, and AnimatedWithChildren.__addChild promotes a
+    // child joining an ALREADY-native parent (graph.ts). So the pin is native exactly when the
+    // scroll value is - logged below, because "is this actually on the UI thread" is otherwise
+    // invisible until you read three files.
+    dlog(
+      () =>
+        `STICKY[wrap] index=${this.childIndex} leaf attached isNative=${next.__isNative()} ` +
+        `interpolationIsNative=${this.animatedTranslateY.__isNative()} ` +
+        `scrollValueIsNative=${this.controller.config.scrollAnimatedValue.__isNative()}`,
+    );
     if (this.animatedProps !== undefined) this.animatedProps.__detach();
     this.animatedProps = next;
     this.cancelBind?.();
-    this.cancelBind = whenCommitted(this.node, () => next.setNativeView(this.node));
+    this.cancelBind = whenCommitted(this.node, () => {
+      next.setNativeView(this.node);
+      dlog(`STICKY[wrap] index=${this.childIndex} setNativeView isNative=${next.__isNative()}`);
+    });
   }
 }
 
@@ -220,6 +255,13 @@ export class ScrollViewProjectionController {
   private readonly records: IProjectedRecord[] = [];
   private readonly headerLayoutYs = new Map<number, number>();
 
+  // Diagnostic-only: one ScrollView can host several projection controllers over its lifetime,
+  // and an app has several ScrollViews at once. Without an id every log line below is
+  // indistinguishable between instances, which is what made a "logs never stop" report
+  // impossible to read as either a real loop or two lists warming up in turn.
+  private readonly instanceId = ++projectionControllerSeq;
+  private reconcileSeq = 0;
+
   constructor(config: IScrollViewProjectionConfig) {
     this.config = config;
   }
@@ -305,10 +347,13 @@ export class ScrollViewProjectionController {
   nextStickyHeaderY(index: number): number | undefined {
     const stickyIndices = this.config.stickyHeaderIndices ?? [];
     const next = stickyIndices.find(entry => entry > index);
-    return next === undefined ? undefined : this.headerLayoutYs.get(next);
+    const y = next === undefined ? undefined : this.headerLayoutYs.get(next);
+    dlog(`STICKY[proj] nextStickyHeaderY(index=${index}) next=${next} y=${y}`);
+    return y;
   }
 
   recordHeaderLayoutY(index: number, y: number): void {
+    dlog(`STICKY[proj] recordHeaderLayoutY index=${index} y=${y}`);
     if (this.headerLayoutYs.get(index) === y) return;
     this.headerLayoutYs.set(index, y);
     for (const record of this.records) record.sticky?.rebuild();
@@ -322,7 +367,8 @@ export class ScrollViewProjectionController {
   ): void {
     const before = beforeRecord === undefined ? undefined : directNode(beforeRecord);
     dlog(
-      `Angular ScrollView projection insertRecord physicalParent=${parent.component} child=${record.child.component} before=${before ? before.component : 'undefined(append)'} parentIsContentNode=${parent === this.contentNode}`,
+      `STICKY[proj#${this.instanceId}] insertRecord child=${record.child.component} ` +
+        `before=${before ? before.component : 'append'} parentIsContentNode=${parent === this.contentNode}`,
     );
     if (before === undefined) insert(parent, record.child);
     else insert(parent, record.child, before);
@@ -330,26 +376,36 @@ export class ScrollViewProjectionController {
 
   private reconcileStickyRecords(): void {
     if (this.contentNode === undefined) return;
+    const seq = ++this.reconcileSeq;
     dlog(
-      `Angular ScrollView projection reconcile contentNode=${this.contentNode.component} records=${this.records.length} contentNodeActualChildren=${this.contentNode.children.length}`,
+      () =>
+        `STICKY[proj#${this.instanceId}] reconcile#${seq} records=${this.records.length} ` +
+        `children=${this.contentNode?.children.length} sticky=${JSON.stringify(this.config.stickyHeaderIndices ?? [])}`,
     );
     const stickyIndices = new Set(this.config.stickyHeaderIndices ?? []);
     if (this.config.customStickyHeaderComponent !== undefined && stickyIndices.size > 0) {
       dlog(
-        'Angular ScrollView projection uses built-in sticky wrapper; custom StickyHeaderComponent is explicit-composition only',
+        'STICKY[proj] uses built-in sticky wrapper; custom StickyHeaderComponent is explicit-composition only',
       );
     }
 
     let paintIndex = 0;
     for (const record of [...this.records]) {
       if (this.config.excludeRefreshControl && isProjectedRefreshControl(record.child)) {
-        this.removeProjectedChild(record.child, (parent, child) => removeChild(parent, child));
+        // Removed INLINE, not through removeProjectedChild: that method ends with its own
+        // reconcileStickyRecords(), so calling it from inside this walk re-enters the walk while
+        // this.records is being spliced under it - one refresh control could then drive an
+        // unbounded recursion. Same removal, without the re-entry.
+        this.dropRecord(record);
         continue;
       }
       const countsAsChild = !isAnchor(record.child) && !isProjectedRefreshControl(record.child);
       const childIndex = paintIndex;
       if (countsAsChild) paintIndex += 1;
       const shouldWrap = countsAsChild && stickyIndices.has(childIndex);
+      // Deliberately NOT logged per child per walk: reconcile runs on every projected insert, so
+      // that shape is O(children x inserts) and buries the few lines that carry information. Only
+      // a state TRANSITION is logged, below.
       if (shouldWrap && record.wrapper === undefined) this.wrapRecord(record, childIndex);
       else if (!shouldWrap && record.wrapper !== undefined) this.unwrapRecord(record);
       else if (shouldWrap && record.stickyIndex !== childIndex) {
@@ -360,6 +416,18 @@ export class ScrollViewProjectionController {
     }
   }
 
+  // The removal half of removeProjectedChild, without its trailing reconcile - safe to call from
+  // inside the reconcile walk itself.
+  private dropRecord(record: IProjectedRecord): void {
+    if (this.contentNode === undefined) return;
+    record.sticky?.destroy();
+    projectedWrappers.delete(record.child);
+    const direct = directNode(record);
+    if (direct.parent === this.contentNode) removeChild(this.contentNode, direct);
+    const index = this.records.indexOf(record);
+    if (index !== -1) this.records.splice(index, 1);
+  }
+
   // Auto projection runs after Angular has already created projected child host nodes. At this
   // renderer boundary we can AOT-safely rearrange engine nodes, but we cannot instantiate an
   // arbitrary Angular component class as a wrapper without owning a ViewContainerRef/injector and
@@ -383,10 +451,14 @@ export class ScrollViewProjectionController {
     record.sticky = new StickyProjectionWrapper(this, childIndex, wrapper);
     record.stickyIndex = childIndex;
     projectedWrappers.set(record.child, record);
+    dlog(
+      `STICKY[proj#${this.instanceId}] WRAP child=${record.child.component} paintIndex=${childIndex}`,
+    );
   }
 
   private unwrapRecord(record: IProjectedRecord): void {
     if (this.contentNode === undefined || record.wrapper === undefined) return;
+    dlog(`STICKY[proj#${this.instanceId}] UNWRAP child=${record.child.component}`);
     record.sticky?.destroy();
     record.sticky = undefined;
     record.stickyIndex = undefined;