@symbiote-native/angular 0.6.2 → 0.8.0

package/build/angular/components/scroll-view/index.ios.js

@@ -15,24 +15,24 @@
 // conditionally include <ng-content> with @if, @for, or @switch"). Symptom here was axis-specific:
 // a horizontal FlatList's cells landed outside the ScrollView entirely. Fix: single unconditional
 // `<ng-content>` call site.
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, ElementRef, inject, } from '@angular/core';
-import { anchorHostStyle, RefreshControlHost, ScrollContentView, ScrollViewHost, SymbioteHostPropsDirective, } from '../../primitives';
-import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS } from './shared';
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, } from '@angular/core';
+import { RefreshControlHost, ScrollContentView, ScrollViewHost, SymbioteHostPropsDirective, SymbioteStyleInputDirective, } from '../../primitives';
+import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS, } from './shared';
 import * as i0 from "@angular/core";
+import * as i1 from "../../primitives/shared";
 // The symbiote-* host elements are imported as standalone components; the props directive is
 // applied as a template directive and the projection directive manages sticky-header wrapping.
+// 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 {
-    // 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.
-    elementRef = inject(ElementRef);
-    get scrollProps() {
-        const props = super.scrollProps;
-        return { ...props, style: [anchorHostStyle(this.elementRef), props.style] };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollView, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ScrollView, isStandalone: true, selector: "ScrollView", inputs: { style: "style", contentContainerStyle: "contentContainerStyle", horizontal: "horizontal", scrollEnabled: "scrollEnabled", showsVerticalScrollIndicator: "showsVerticalScrollIndicator", showsHorizontalScrollIndicator: "showsHorizontalScrollIndicator", pagingEnabled: "pagingEnabled", bounces: "bounces", decelerationRate: "decelerationRate", scrollEventThrottle: "scrollEventThrottle", contentInset: "contentInset", contentOffset: "contentOffset", removeClippedSubviews: "removeClippedSubviews", snapToInterval: "snapToInterval", snapToOffsets: "snapToOffsets", snapToAlignment: "snapToAlignment", snapToStart: "snapToStart", snapToEnd: "snapToEnd", disableIntervalMomentum: "disableIntervalMomentum", stickyHeaderIndices: "stickyHeaderIndices", invertStickyHeaders: "invertStickyHeaders", StickyHeaderComponent: "StickyHeaderComponent", keyboardDismissMode: "keyboardDismissMode", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", maintainVisibleContentPosition: "maintainVisibleContentPosition", alwaysBounceHorizontal: "alwaysBounceHorizontal", alwaysBounceVertical: "alwaysBounceVertical", centerContent: "centerContent", scrollIndicatorInsets: "scrollIndicatorInsets", indicatorStyle: "indicatorStyle", directionalLockEnabled: "directionalLockEnabled", automaticallyAdjustKeyboardInsets: "automaticallyAdjustKeyboardInsets", contentInsetAdjustmentBehavior: "contentInsetAdjustmentBehavior", minimumZoomScale: "minimumZoomScale", maximumZoomScale: "maximumZoomScale", zoomScale: "zoomScale", bouncesZoom: "bouncesZoom", pinchGestureEnabled: "pinchGestureEnabled", nestedScrollEnabled: "nestedScrollEnabled", overScrollMode: "overScrollMode", fadingEdgeLength: "fadingEdgeLength", persistentScrollbar: "persistentScrollbar", endFillColor: "endFillColor", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", testID: "testID", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", role: "role", "aria-label": "aria-label", "aria-labelledby": "aria-labelledby", "aria-live": "aria-live", "aria-hidden": "aria-hidden", "aria-busy": "aria-busy", "aria-checked": "aria-checked", "aria-disabled": "aria-disabled", "aria-expanded": "aria-expanded", "aria-selected": "aria-selected", "aria-modal": "aria-modal", "aria-valuemax": "aria-valuemax", "aria-valuemin": "aria-valuemin", "aria-valuenow": "aria-valuenow", "aria-valuetext": "aria-valuetext" }, usesInheritance: true, ngImport: i0, template: `
-    <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollView, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ScrollView, isStandalone: true, selector: "ScrollView", inputs: { style: "style", contentContainerStyle: "contentContainerStyle", horizontal: "horizontal", scrollEnabled: "scrollEnabled", showsVerticalScrollIndicator: "showsVerticalScrollIndicator", showsHorizontalScrollIndicator: "showsHorizontalScrollIndicator", pagingEnabled: "pagingEnabled", bounces: "bounces", decelerationRate: "decelerationRate", scrollEventThrottle: "scrollEventThrottle", contentInset: "contentInset", contentOffset: "contentOffset", removeClippedSubviews: "removeClippedSubviews", snapToInterval: "snapToInterval", snapToOffsets: "snapToOffsets", snapToAlignment: "snapToAlignment", snapToStart: "snapToStart", snapToEnd: "snapToEnd", disableIntervalMomentum: "disableIntervalMomentum", stickyHeaderIndices: "stickyHeaderIndices", invertStickyHeaders: "invertStickyHeaders", StickyHeaderComponent: "StickyHeaderComponent", keyboardDismissMode: "keyboardDismissMode", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", maintainVisibleContentPosition: "maintainVisibleContentPosition", alwaysBounceHorizontal: "alwaysBounceHorizontal", alwaysBounceVertical: "alwaysBounceVertical", centerContent: "centerContent", scrollIndicatorInsets: "scrollIndicatorInsets", indicatorStyle: "indicatorStyle", directionalLockEnabled: "directionalLockEnabled", automaticallyAdjustKeyboardInsets: "automaticallyAdjustKeyboardInsets", contentInsetAdjustmentBehavior: "contentInsetAdjustmentBehavior", minimumZoomScale: "minimumZoomScale", maximumZoomScale: "maximumZoomScale", zoomScale: "zoomScale", bouncesZoom: "bouncesZoom", pinchGestureEnabled: "pinchGestureEnabled", nestedScrollEnabled: "nestedScrollEnabled", overScrollMode: "overScrollMode", fadingEdgeLength: "fadingEdgeLength", persistentScrollbar: "persistentScrollbar", endFillColor: "endFillColor", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", testID: "testID", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", role: "role", "aria-label": "aria-label", "aria-labelledby": "aria-labelledby", "aria-live": "aria-live", "aria-hidden": "aria-hidden", "aria-busy": "aria-busy", "aria-checked": "aria-checked", "aria-disabled": "aria-disabled", "aria-expanded": "aria-expanded", "aria-selected": "aria-selected", "aria-modal": "aria-modal", "aria-valuemax": "aria-valuemax", "aria-valuemin": "aria-valuemin", "aria-valuenow": "aria-valuenow", "aria-valuetext": "aria-valuetext" }, usesInheritance: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
+    <symbiote-scroll-view
+      #host="symbioteHost"
+      [symbioteHostProps]="scrollProps()"
+    >
       @if (hasProjectedRefreshControl) {
         <symbiote-refresh-control
           #refreshHost="symbioteHost"
@@ -41,7 +41,7 @@ export class ScrollView extends ScrollViewBase {
         ></symbiote-refresh-control>
       }
       <symbiote-scroll-content
-        [symbioteHostProps]="contentProps"
+        [symbioteHostProps]="contentProps()"
         [symbioteScrollViewProjection]="projectionController"
       >
         <ng-content></ng-content>
@@ -49,11 +49,14 @@ export class ScrollView extends ScrollViewBase {
     </symbiote-scroll-view>
   `, isInline: true, dependencies: [{ kind: "component", type: ScrollViewHost, selector: "symbiote-scroll-view" }, { kind: "component", type: ScrollContentView, selector: "symbiote-scroll-content" }, { kind: "component", type: RefreshControlHost, selector: "symbiote-refresh-control" }, { kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "directive", type: ScrollViewProjectionDirective, selector: "[symbioteScrollViewProjection]", inputs: ["symbioteScrollViewProjection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollView, decorators: [{
             type: Component,
             args: [{
                     selector: 'ScrollView',
                     standalone: true,
+                    hostDirectives: [
+                        { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+                    ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     imports: [
                         ScrollViewHost,
@@ -65,7 +68,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     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"
@@ -74,7 +80,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         ></symbiote-refresh-control>
       }
       <symbiote-scroll-content
-        [symbioteHostProps]="contentProps"
+        [symbioteHostProps]="contentProps()"
         [symbioteScrollViewProjection]="projectionController"
       >
         <ng-content></ng-content>

package/build/angular/components/scroll-view/index.ios.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../../src/components/scroll-view/index.ios.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,oGAAoG;AACpG,oGAAoG;AACpG,gGAAgG;AAChG,gGAAgG;AAChG,EAAE;AACF,+FAA+F;AAC/F,8FAA8F;AAC9F,iGAAiG;AACjG,kGAAkG;AAClG,6FAA6F;AAC7F,gGAAgG;AAChG,2FAA2F;AAC3F,6FAA6F;AAC7F,mGAAmG;AACnG,kGAAkG;AAClG,4BAA4B;AAE5B,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,SAAS,EACT,UAAU,EACV,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,0BAA0B,GAC3B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,6BAA6B,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;;AAG7F,6FAA6F;AAC7F,+FAA+F;AAgC/F,MAAM,OAAO,UAAW,SAAQ,cAAc;IAC5C,6FAA6F;IAC7F,8FAA8F;IAC9F,wDAAwD;IACvC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAEjD,IAAa,WAAW;QACtB,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC;QAChC,OAAO,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9E,CAAC;uGATU,UAAU;2FAAV,UAAU,+6GAlBX;;;;;;;;;;;;;;;;GAgBT,4DAxBC,cAAc,iEACd,iBAAiB,oEACjB,kBAAkB,qEAClB,0BAA0B,2HAC1B,6BAA6B;;2FAsBpB,UAAU;kBA/BtB,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,sBAAsB,CAAC;oBACjC,OAAO,EAAE;wBACP,cAAc;wBACd,iBAAiB;wBACjB,kBAAkB;wBAClB,0BAA0B;wBAC1B,6BAA6B;qBAC9B;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,MAAM,EAAE,kBAAkB;oBAC1B,QAAQ,EAAE;;;;;;;;;;;;;;;;GAgBT;iBACF"}
+{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../../src/components/scroll-view/index.ios.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,oGAAoG;AACpG,oGAAoG;AACpG,gGAAgG;AAChG,gGAAgG;AAChG,EAAE;AACF,+FAA+F;AAC/F,8FAA8F;AAC9F,iGAAiG;AACjG,kGAAkG;AAClG,6FAA6F;AAC7F,gGAAgG;AAChG,2FAA2F;AAC3F,6FAA6F;AAC7F,mGAAmG;AACnG,kGAAkG;AAClG,4BAA4B;AAE5B,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,SAAS,GACV,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,0BAA0B,EAC1B,2BAA2B,GAC5B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,cAAc,EACd,6BAA6B,EAC7B,kBAAkB,GACnB,MAAM,UAAU,CAAC;;;AAGlB,6FAA6F;AAC7F,+FAA+F;AAsC/F,iGAAiG;AACjG,6FAA6F;AAC7F,mGAAmG;AACnG,oDAAoD;AACpD,MAAM,OAAO,UAAW,SAAQ,cAAc;uGAAjC,UAAU;2FAAV,UAAU,4gHAzBX;;;;;;;;;;;;;;;;;;;GAmBT,4DA3BC,cAAc,iEACd,iBAAiB,oEACjB,kBAAkB,qEAClB,0BAA0B,2HAC1B,6BAA6B;;2FA6BpB,UAAU;kBAzCtB,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,UAAU,EAAE,IAAI;oBAChB,cAAc,EAAE;wBACd,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE;qBAC9D;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;oBACjC,OAAO,EAAE;wBACP,cAAc;wBACd,iBAAiB;wBACjB,kBAAkB;wBAClB,0BAA0B;wBAC1B,6BAA6B;qBAC9B;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,MAAM,EAAE,kBAAkB;oBAC1B,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;GAmBT;iBACF"}

package/build/angular/components/scroll-view/projection.d.ts

@@ -1,6 +1,13 @@
 import { type AnimatedValue, type ISymbioteNode } from '@symbiote-native/engine';
 type IInsert = (parent: ISymbioteNode, child: ISymbioteNode, beforeChild?: ISymbioteNode) => void;
 type IRemove = (parent: ISymbioteNode, child: ISymbioteNode) => void;
+/**
+ * Run every sticky reconcile owed by this change-detection pass. Wired to the renderer factory's
+ * `end()`, which Angular calls at the end of `ApplicationRef.tick` — after both channels that feed
+ * a projection controller have written (children through the renderer, `stickyHeaderIndices` through
+ * an `@Input`), and before the surface's microtask-coalesced commit runs.
+ */
+export declare function flushScrollViewProjections(): void;
 export interface IScrollViewProjectionConfig {
     stickyHeaderIndices: readonly number[] | undefined;
     invertStickyHeaders: boolean | undefined;
@@ -14,8 +21,34 @@ export declare class ScrollViewProjectionController {
     private contentNode;
     private readonly records;
     private readonly headerLayoutYs;
+    private readonly instanceId;
+    private reconcileSeq;
+    private isReconcilePending;
+    private shouldNotifyAll;
     constructor(config: IScrollViewProjectionConfig);
     update(config: IScrollViewProjectionConfig): void;
+    /**
+     * Coalesce every reconcile request of one change-detection pass into a SINGLE walk.
+     *
+     * Cost is half the reason: the walk is O(records), so running it per projected mutation makes
+     * mounting M children O(M^2) - 801 children on the benchmark screen's PATH A. Correctness is the
+     * worse half. A windowed list feeds the controller through TWO channels that land at different
+     * moments in the same pass: children arrive through the renderer (insert/remove), while
+     * `stickyHeaderIndices` arrive as an ordinary `@Input` via `update()` from ngOnChanges. Reconciling
+     * on each mutation therefore guarantees at least one walk matching the NEW children against the
+     * OLD indices - and those indices are positions in the rendered child array
+     * (`stickyChildPositions`), which shift by 1-3 the moment VirtualizedList grows a leading spacer or
+     * a forced sticky cell. Every mismatch re-labels a header and re-parents engine nodes for nothing.
+     *
+     * The flush point is `RendererFactory2.end()`: the end of the pass, still SYNCHRONOUS. It must not
+     * be a microtask - engine mutations only `markDirty`, the commit is microtask-coalesced by the
+     * surface, and a reconcile queued after that commit mutates a tree nobody commits again. Headless
+     * the sticky wrapper then never reaches Fabric at all (six tests caught exactly this); on device it
+     * lands a frame late or not at all. `end()` runs inside `ApplicationRef.tick`, so it precedes every
+     * microtask queued during the pass.
+     */
+    private scheduleReconcile;
+    flushReconcile(): void;
     bindContentNode(node: ISymbioteNode): void;
     appendProjectedChild(parent: ISymbioteNode, child: ISymbioteNode, insert: IInsert): void;
     insertProjectedChild(parent: ISymbioteNode, child: ISymbioteNode, beforeChild: ISymbioteNode | null, insert: IInsert): void;
@@ -24,7 +57,9 @@ export declare class ScrollViewProjectionController {
     recordHeaderLayoutY(index: number, y: number): void;
     private insertRecord;
     private reconcileStickyRecords;
+    private dropRecord;
     private wrapRecord;
+    private nextDirectAfter;
     private unwrapRecord;
 }
 export declare function getScrollViewProjection(node: ISymbioteNode): ScrollViewProjectionController | undefined;