@ng-native/fabric 0.14.0 → 0.16.0

package/dist/defer-triggers.js

@@ -11,6 +11,7 @@
  * `installDeferTriggers` runs once, from `mount()`, before anything renders.
  */
 import { isEngineNode, viewNameOf } from "./engine.js";
+import { letEngineNodesPass } from "./node-global.js";
 /** The views a node scrolls inside of, and whose scrolling can bring it into view. */
 const SCROLLERS = new Set(['ScrollView', 'AndroidHorizontalScrollView']);
 /**
@@ -137,14 +138,7 @@ export function installDeferTriggers() {
     const scope = globalThis;
     const existing = scope['Element'];
     if (existing) {
-        // Its own check if it defines one, and the ordinary prototype walk if not.
-        const own = existing[Symbol.hasInstance];
-        Object.defineProperty(existing, Symbol.hasInstance, {
-            configurable: true,
-            value(value) {
-                return (this === existing && isEngineNode(value)) || own.call(this, value);
-            },
-        });
+        letEngineNodesPass(existing);
     }
     else {
         scope['Element'] = class Element {

package/dist/defer-triggers.js.map

@@ -1 +1 @@
-{"version":3,"file":"defer-triggers.js","sourceRoot":"","sources":["../src/defer-triggers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * What Angular's `@defer (on interaction | hover | viewport)` asks of a trigger element, for the\n * engine's nodes.\n *\n * Angular registers those three triggers on the element itself rather than through `Renderer2`:\n * it asserts in development that the element is an `Element`, listens with `addEventListener`,\n * and watches for visibility with a global `IntersectionObserver`. An engine node was none of\n * those, so the placeholder stayed forever and every render logged an assertion. The listeners\n * are on the node (`addEventListener` in `engine.ts`); this is the other two.\n *\n * `installDeferTriggers` runs once, from `mount()`, before anything renders.\n */\nimport { isEngineNode, viewNameOf, type EngineNode, type WindowFrame } from './engine.ts';\n\n/** The views a node scrolls inside of, and whose scrolling can bring it into view. */\nconst SCROLLERS = new Set(['ScrollView', 'AndroidHorizontalScrollView']);\n\ninterface Entry {\n  readonly target: EngineNode;\n  readonly isIntersecting: boolean;\n  readonly intersectionRatio: number;\n}\n\ntype Callback = (entries: Entry[], observer: EngineIntersectionObserver) => void;\n\ninterface Options {\n  readonly threshold?: number | readonly number[];\n}\n\ninterface Watched {\n  readonly stops: (() => void)[];\n}\n\n/**\n * Visibility for engine nodes, from the layout and scroll events native already sends.\n *\n * A node is checked when it is observed, when it is laid out, and whenever a scroll view it sits\n * in scrolls. The check measures the node in window coordinates, clips it by each scroll view\n * around it and by the window, and reports it intersecting once the visible share reaches the\n * threshold: any of it by default, as the web does, and a node of no size counts once its position\n * is inside. `root` and `rootMargin` are not applied; the root is always the window.\n */\nexport class EngineIntersectionObserver {\n  private readonly callback: Callback;\n  private readonly threshold: number;\n  private readonly watched = new Map<EngineNode, Watched>();\n\n  constructor(callback: Callback, options?: Options) {\n    this.callback = callback;\n    const threshold = options?.threshold;\n    this.threshold = Array.isArray(threshold)\n      ? Math.min(...(threshold as number[]))\n      : ((threshold as number | undefined) ?? 0);\n  }\n\n  observe(target: EngineNode): void {\n    if (this.watched.has(target)) return;\n    const check = () => this.check(target);\n    const stops = [target.host!.setEventListener(target, 'topLayout', check)];\n    for (let at = target.parent; at; at = at.parent) {\n      if (!SCROLLERS.has(viewNameOf(at))) continue;\n      stops.push(at.host!.setEventListener(at, 'topScroll', check));\n    }\n    this.watched.set(target, { stops });\n    // A node laid out before it was observed sends no layout event of its own. Measured now,\n    // after the commit that mounted it, and in a microtask, as an observer never calls back from\n    // inside `observe`.\n    queueMicrotask(check);\n  }\n\n  unobserve(target: EngineNode): void {\n    const watched = this.watched.get(target);\n    if (!watched) return;\n    for (const stop of watched.stops) stop();\n    this.watched.delete(target);\n  }\n\n  disconnect(): void {\n    for (const target of [...this.watched.keys()]) this.unobserve(target);\n  }\n\n  takeRecords(): Entry[] {\n    return [];\n  }\n\n  private check(target: EngineNode): void {\n    if (!this.watched.has(target)) return;\n    const ratio = visibleShare(target);\n    if (ratio === null) return;\n    const isIntersecting = this.threshold > 0 ? ratio >= this.threshold : ratio >= 0;\n    if (isIntersecting) this.callback([{ target, isIntersecting, intersectionRatio: ratio }], this);\n  }\n}\n\n/** A frame as its four edges. */\ninterface Box {\n  left: number;\n  top: number;\n  right: number;\n  bottom: number;\n}\n\nconst box = (frame: WindowFrame): Box => ({\n  left: frame.x,\n  top: frame.y,\n  right: frame.x + frame.width,\n  bottom: frame.y + frame.height,\n});\n\nfunction measured(node: EngineNode): Box | null {\n  let found: Box | null = null;\n  node.host!.measure(node, (frame) => (found = box(frame)));\n  return found;\n}\n\nfunction clip(into: Box, by: Box): void {\n  into.left = Math.max(into.left, by.left);\n  into.top = Math.max(into.top, by.top);\n  into.right = Math.min(into.right, by.right);\n  into.bottom = Math.min(into.bottom, by.bottom);\n}\n\n/**\n * How much of the node is on screen, from 0 to 1; below 0 when none of it is, and null when it\n * has not been measured. Measuring is synchronous on the new architecture.\n */\nfunction visibleShare(target: EngineNode): number | null {\n  const frame = measured(target);\n  if (!frame) return null;\n  const visible = { ...frame };\n  for (let at = target.parent; at; at = at.parent) {\n    if (!SCROLLERS.has(viewNameOf(at))) continue;\n    const scroller = measured(at);\n    if (scroller) clip(visible, scroller);\n  }\n  const window = (target.host as { viewport?: { width: number; height: number } }).viewport;\n  if (window && window.width > 0 && window.height > 0) {\n    clip(visible, { left: 0, top: 0, right: window.width, bottom: window.height });\n  }\n  const width = visible.right - visible.left;\n  const height = visible.bottom - visible.top;\n  if (width < 0 || height < 0) return -1;\n  const area = (frame.right - frame.left) * (frame.bottom - frame.top);\n  return area > 0 ? (width * height) / area : 1;\n}\n\ntype Constructor = abstract new (...args: never[]) => object;\n\n/** React Native's own `IntersectionObserver`, when its feature flag has installed one. */\ninterface NativeObserver {\n  observe(target: unknown): void;\n  unobserve(target: unknown): void;\n  disconnect(): void;\n}\ntype NativeObserverClass = new (callback: unknown, options?: unknown) => NativeObserver;\n\n// Never reset: the globals it patches stay patched for the life of the process.\nlet installed = false;\n\n/**\n * Let an engine node pass Angular's development check that a trigger is an `Element`, and give\n * `@defer (on viewport)` an `IntersectionObserver` that can watch one.\n *\n * React Native defines a global `Element` for its own DOM-like nodes, so an engine node is made to\n * answer `instanceof Element` as well, and nothing else about that class changes. Node has none,\n * and gets one that only engine nodes are instances of. An `IntersectionObserver` React Native\n * already has is kept for its own nodes; engine nodes are watched by the one above.\n */\nexport function installDeferTriggers(): void {\n  if (installed) return;\n  installed = true;\n  const scope = globalThis as unknown as Record<string, unknown>;\n\n  const existing = scope['Element'] as Constructor | undefined;\n  if (existing) {\n    // Its own check if it defines one, and the ordinary prototype walk if not.\n    const own = existing[Symbol.hasInstance];\n    Object.defineProperty(existing, Symbol.hasInstance, {\n      configurable: true,\n      value(this: Constructor, value: unknown): boolean {\n        return (this === existing && isEngineNode(value)) || own.call(this, value);\n      },\n    });\n  } else {\n    scope['Element'] = class Element {\n      static [Symbol.hasInstance](value: unknown): boolean {\n        return isEngineNode(value);\n      }\n    };\n  }\n\n  const native = scope['IntersectionObserver'] as NativeObserverClass | undefined;\n  if (!native) {\n    scope['IntersectionObserver'] = EngineIntersectionObserver;\n    return;\n  }\n  scope['IntersectionObserver'] = class extends EngineIntersectionObserver {\n    private readonly args: [unknown, unknown];\n    private other: NativeObserver | null = null;\n\n    constructor(callback: Callback, options?: Options) {\n      super(callback, options);\n      this.args = [callback, options];\n    }\n\n    override observe(target: EngineNode): void {\n      if (isEngineNode(target)) super.observe(target);\n      else (this.other ??= new native(...this.args)).observe(target);\n    }\n\n    override unobserve(target: EngineNode): void {\n      if (isEngineNode(target)) super.unobserve(target);\n      else this.other?.unobserve(target);\n    }\n\n    override disconnect(): void {\n      super.disconnect();\n      this.other?.disconnect();\n    }\n  };\n}\n"]}
+{"version":3,"file":"defer-triggers.js","sourceRoot":"","sources":["../src/defer-triggers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,YAAY,EAAE,UAAU,EAAqC,MAAM,aAAa,CAAC;AAC1F,OAAO,EAAE,kBAAkB,EAAoB,MAAM,kBAAkB,CAAC;AAExE,sFAAsF;AACtF,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,6BAA6B,CAAC,CAAC,CAAC;AAkBzE;;;;;;;;GAQG;AACH,MAAM,OAAO,0BAA0B;IACpB,QAAQ,CAAW;IACnB,SAAS,CAAS;IAClB,OAAO,GAAG,IAAI,GAAG,EAAuB,CAAC;IAE1D,YAAY,QAAkB,EAAE,OAAiB;QAC/C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,CAAC;QACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;YACvC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAI,SAAsB,CAAC;YACtC,CAAC,CAAC,CAAE,SAAgC,IAAI,CAAC,CAAC,CAAC;IAC/C,CAAC;IAED,OAAO,CAAC,MAAkB;QACxB,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,OAAO;QACrC,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,IAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;QAC1E,KAAK,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC;YAChD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;gBAAE,SAAS;YAC7C,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAK,CAAC,gBAAgB,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;QAChE,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QACpC,yFAAyF;QACzF,6FAA6F;QAC7F,oBAAoB;QACpB,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,SAAS,CAAC,MAAkB;QAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACzC,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,KAAK,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK;YAAE,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC;IAED,UAAU;QACR,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACxE,CAAC;IAED,WAAW;QACT,OAAO,EAAE,CAAC;IACZ,CAAC;IAEO,KAAK,CAAC,MAAkB;QAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,OAAO;QACtC,MAAM,KAAK,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;QACnC,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO;QAC3B,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;QACjF,IAAI,cAAc;YAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IAClG,CAAC;CACF;AAUD,MAAM,GAAG,GAAG,CAAC,KAAkB,EAAO,EAAE,CAAC,CAAC;IACxC,IAAI,EAAE,KAAK,CAAC,CAAC;IACb,GAAG,EAAE,KAAK,CAAC,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;IAC5B,MAAM,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM;CAC/B,CAAC,CAAC;AAEH,SAAS,QAAQ,CAAC,IAAgB;IAChC,IAAI,KAAK,GAAe,IAAI,CAAC;IAC7B,IAAI,CAAC,IAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC1D,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,IAAI,CAAC,IAAS,EAAE,EAAO;IAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;IACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;IAC5C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;AACjD,CAAC;AAED;;;GAGG;AACH,SAAS,YAAY,CAAC,MAAkB;IACtC,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,MAAM,OAAO,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC;IAC7B,KAAK,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC;QAChD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;YAAE,SAAS;QAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC9B,IAAI,QAAQ;YAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACxC,CAAC;IACD,MAAM,MAAM,GAAI,MAAM,CAAC,IAAyD,CAAC,QAAQ,CAAC;IAC1F,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACpD,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IACjF,CAAC;IACD,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAC3C,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;IAC5C,IAAI,KAAK,GAAG,CAAC,IAAI,MAAM,GAAG,CAAC;QAAE,OAAO,CAAC,CAAC,CAAC;IACvC,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IACrE,OAAO,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAChD,CAAC;AAUD,gFAAgF;AAChF,IAAI,SAAS,GAAG,KAAK,CAAC;AAEtB;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB;IAClC,IAAI,SAAS;QAAE,OAAO;IACtB,SAAS,GAAG,IAAI,CAAC;IACjB,MAAM,KAAK,GAAG,UAAgD,CAAC;IAE/D,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAA4B,CAAC;IAC7D,IAAI,QAAQ,EAAE,CAAC;QACb,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;SAAM,CAAC;QACN,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,OAAO;YAC9B,MAAM,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,KAAc;gBACxC,OAAO,YAAY,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;SACF,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,sBAAsB,CAAoC,CAAC;IAChF,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,KAAK,CAAC,sBAAsB,CAAC,GAAG,0BAA0B,CAAC;QAC3D,OAAO;IACT,CAAC;IACD,KAAK,CAAC,sBAAsB,CAAC,GAAG,KAAM,SAAQ,0BAA0B;QACrD,IAAI,CAAqB;QAClC,KAAK,GAA0B,IAAI,CAAC;QAE5C,YAAY,QAAkB,EAAE,OAAiB;YAC/C,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAClC,CAAC;QAEQ,OAAO,CAAC,MAAkB;YACjC,IAAI,YAAY,CAAC,MAAM,CAAC;gBAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;;gBAC3C,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC;QAEQ,SAAS,CAAC,MAAkB;YACnC,IAAI,YAAY,CAAC,MAAM,CAAC;gBAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;;gBAC7C,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;QAEQ,UAAU;YACjB,KAAK,CAAC,UAAU,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC;QAC3B,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["/**\n * What Angular's `@defer (on interaction | hover | viewport)` asks of a trigger element, for the\n * engine's nodes.\n *\n * Angular registers those three triggers on the element itself rather than through `Renderer2`:\n * it asserts in development that the element is an `Element`, listens with `addEventListener`,\n * and watches for visibility with a global `IntersectionObserver`. An engine node was none of\n * those, so the placeholder stayed forever and every render logged an assertion. The listeners\n * are on the node (`addEventListener` in `engine.ts`); this is the other two.\n *\n * `installDeferTriggers` runs once, from `mount()`, before anything renders.\n */\nimport { isEngineNode, viewNameOf, type EngineNode, type WindowFrame } from './engine.ts';\nimport { letEngineNodesPass, type Constructor } from './node-global.ts';\n\n/** The views a node scrolls inside of, and whose scrolling can bring it into view. */\nconst SCROLLERS = new Set(['ScrollView', 'AndroidHorizontalScrollView']);\n\ninterface Entry {\n  readonly target: EngineNode;\n  readonly isIntersecting: boolean;\n  readonly intersectionRatio: number;\n}\n\ntype Callback = (entries: Entry[], observer: EngineIntersectionObserver) => void;\n\ninterface Options {\n  readonly threshold?: number | readonly number[];\n}\n\ninterface Watched {\n  readonly stops: (() => void)[];\n}\n\n/**\n * Visibility for engine nodes, from the layout and scroll events native already sends.\n *\n * A node is checked when it is observed, when it is laid out, and whenever a scroll view it sits\n * in scrolls. The check measures the node in window coordinates, clips it by each scroll view\n * around it and by the window, and reports it intersecting once the visible share reaches the\n * threshold: any of it by default, as the web does, and a node of no size counts once its position\n * is inside. `root` and `rootMargin` are not applied; the root is always the window.\n */\nexport class EngineIntersectionObserver {\n  private readonly callback: Callback;\n  private readonly threshold: number;\n  private readonly watched = new Map<EngineNode, Watched>();\n\n  constructor(callback: Callback, options?: Options) {\n    this.callback = callback;\n    const threshold = options?.threshold;\n    this.threshold = Array.isArray(threshold)\n      ? Math.min(...(threshold as number[]))\n      : ((threshold as number | undefined) ?? 0);\n  }\n\n  observe(target: EngineNode): void {\n    if (this.watched.has(target)) return;\n    const check = () => this.check(target);\n    const stops = [target.host!.setEventListener(target, 'topLayout', check)];\n    for (let at = target.parent; at; at = at.parent) {\n      if (!SCROLLERS.has(viewNameOf(at))) continue;\n      stops.push(at.host!.setEventListener(at, 'topScroll', check));\n    }\n    this.watched.set(target, { stops });\n    // A node laid out before it was observed sends no layout event of its own. Measured now,\n    // after the commit that mounted it, and in a microtask, as an observer never calls back from\n    // inside `observe`.\n    queueMicrotask(check);\n  }\n\n  unobserve(target: EngineNode): void {\n    const watched = this.watched.get(target);\n    if (!watched) return;\n    for (const stop of watched.stops) stop();\n    this.watched.delete(target);\n  }\n\n  disconnect(): void {\n    for (const target of [...this.watched.keys()]) this.unobserve(target);\n  }\n\n  takeRecords(): Entry[] {\n    return [];\n  }\n\n  private check(target: EngineNode): void {\n    if (!this.watched.has(target)) return;\n    const ratio = visibleShare(target);\n    if (ratio === null) return;\n    const isIntersecting = this.threshold > 0 ? ratio >= this.threshold : ratio >= 0;\n    if (isIntersecting) this.callback([{ target, isIntersecting, intersectionRatio: ratio }], this);\n  }\n}\n\n/** A frame as its four edges. */\ninterface Box {\n  left: number;\n  top: number;\n  right: number;\n  bottom: number;\n}\n\nconst box = (frame: WindowFrame): Box => ({\n  left: frame.x,\n  top: frame.y,\n  right: frame.x + frame.width,\n  bottom: frame.y + frame.height,\n});\n\nfunction measured(node: EngineNode): Box | null {\n  let found: Box | null = null;\n  node.host!.measure(node, (frame) => (found = box(frame)));\n  return found;\n}\n\nfunction clip(into: Box, by: Box): void {\n  into.left = Math.max(into.left, by.left);\n  into.top = Math.max(into.top, by.top);\n  into.right = Math.min(into.right, by.right);\n  into.bottom = Math.min(into.bottom, by.bottom);\n}\n\n/**\n * How much of the node is on screen, from 0 to 1; below 0 when none of it is, and null when it\n * has not been measured. Measuring is synchronous on the new architecture.\n */\nfunction visibleShare(target: EngineNode): number | null {\n  const frame = measured(target);\n  if (!frame) return null;\n  const visible = { ...frame };\n  for (let at = target.parent; at; at = at.parent) {\n    if (!SCROLLERS.has(viewNameOf(at))) continue;\n    const scroller = measured(at);\n    if (scroller) clip(visible, scroller);\n  }\n  const window = (target.host as { viewport?: { width: number; height: number } }).viewport;\n  if (window && window.width > 0 && window.height > 0) {\n    clip(visible, { left: 0, top: 0, right: window.width, bottom: window.height });\n  }\n  const width = visible.right - visible.left;\n  const height = visible.bottom - visible.top;\n  if (width < 0 || height < 0) return -1;\n  const area = (frame.right - frame.left) * (frame.bottom - frame.top);\n  return area > 0 ? (width * height) / area : 1;\n}\n\n/** React Native's own `IntersectionObserver`, when its feature flag has installed one. */\ninterface NativeObserver {\n  observe(target: unknown): void;\n  unobserve(target: unknown): void;\n  disconnect(): void;\n}\ntype NativeObserverClass = new (callback: unknown, options?: unknown) => NativeObserver;\n\n// Never reset: the globals it patches stay patched for the life of the process.\nlet installed = false;\n\n/**\n * Let an engine node pass Angular's development check that a trigger is an `Element`, and give\n * `@defer (on viewport)` an `IntersectionObserver` that can watch one.\n *\n * React Native defines a global `Element` for its own DOM-like nodes, so an engine node is made to\n * answer `instanceof Element` as well, and nothing else about that class changes. Node has none,\n * and gets one that only engine nodes are instances of. An `IntersectionObserver` React Native\n * already has is kept for its own nodes; engine nodes are watched by the one above.\n */\nexport function installDeferTriggers(): void {\n  if (installed) return;\n  installed = true;\n  const scope = globalThis as unknown as Record<string, unknown>;\n\n  const existing = scope['Element'] as Constructor | undefined;\n  if (existing) {\n    letEngineNodesPass(existing);\n  } else {\n    scope['Element'] = class Element {\n      static [Symbol.hasInstance](value: unknown): boolean {\n        return isEngineNode(value);\n      }\n    };\n  }\n\n  const native = scope['IntersectionObserver'] as NativeObserverClass | undefined;\n  if (!native) {\n    scope['IntersectionObserver'] = EngineIntersectionObserver;\n    return;\n  }\n  scope['IntersectionObserver'] = class extends EngineIntersectionObserver {\n    private readonly args: [unknown, unknown];\n    private other: NativeObserver | null = null;\n\n    constructor(callback: Callback, options?: Options) {\n      super(callback, options);\n      this.args = [callback, options];\n    }\n\n    override observe(target: EngineNode): void {\n      if (isEngineNode(target)) super.observe(target);\n      else (this.other ??= new native(...this.args)).observe(target);\n    }\n\n    override unobserve(target: EngineNode): void {\n      if (isEngineNode(target)) super.unobserve(target);\n      else this.other?.unobserve(target);\n    }\n\n    override disconnect(): void {\n      super.disconnect();\n      this.other?.disconnect();\n    }\n  };\n}\n"]}

package/dist/engine.d.ts

@@ -307,8 +307,18 @@ export interface EngineNode extends HostNode {
     nativeView?: true;
     /** Props kept for selectors to match and left out of what is committed. See `keepAsAttribute`. */
     attributeOnly?: Set<string>;
+    /**
+     * Set by whoever needs to know which props have been written: each `setProp` with a value adds
+     * its key, even one equal to the value already there, and one with `undefined` or `null` takes
+     * it out. The native stack outlet tells a page's own binding from a value it carried this way.
+     */
+    writes?: Set<string>;
     /** The child this node's background is painted on instead of itself. See `paintOn`. */
     paintsOn?: EngineNode;
+    /** What this node's background colour is handed to instead of painted. See `takePaint`. */
+    paintTaker?: (color: unknown) => void;
+    /** The background colour `paintTaker` was last handed, or is about to be. */
+    paintTaken?: unknown;
     /**
      * Style weaker than every sheet, where no rule and no inline style says otherwise. What lets the
      * root component's host fill the surface by default and still give way to its own `:host`. See
@@ -831,8 +841,10 @@ export declare class Engine implements HostEngine {
      * element matched again, and one named as what a rule's element is inside, `.animating .close`
      * or `.close:is(.animating *)`, the elements under the node that such rules are for. What is
      * under any of those is styled again from the rules it matched, for what it inherits: a `dark`
-     * class on the root finds no rule again for an element no `dark` rule is for. Any other class
-     * has the node and everything under it matched again, as any other change to it does.
+     * class on the root finds no rule again for an element no `dark` rule is for. One named in
+     * `:has()`, or answering a test of the class attribute there, has the boxes above the node
+     * asked again, and one named only in `:has(> )` the box right above it. Any other class has the node and everything under it matched again, as any
+     * other change to it does.
      *
      * A sheet that names a class later restyles what it is for as it arrives, and a node not yet
      * committed is styled when it is, with the class as it is then.
@@ -969,6 +981,17 @@ export declare class Engine implements HostEngine {
      * needs, as `<gradient-text>` is.
      */
     paintOn(node: EngineNode, child: EngineNode): void;
+    /**
+     * Hand a node's background colour to `listener` instead of painting it: what its stylesheets,
+     * tokens and inline style resolve `background-color` to, or undefined for none. Called after
+     * each commit that changes it, the first one included. What a component needs whose colour is
+     * drawn by a native view the node is not, from a prop of that view's, as a bottom sheet's is.
+     * The function returned stops it, and the node paints its own background again.
+     */
+    takePaint(node: EngineNode, listener: (color: unknown) => void): () => void;
+    /** Nodes whose background colour is to be handed over once the commit running ends. */
+    private readonly paintReports;
+    private reportPaint;
     /**
      * Keep a prop the node already has as an attribute: on the node for a selector such as
      * `:host([variant='primary'])` to match, and left out of what is committed to the native view.
@@ -1018,8 +1041,9 @@ export declare class Engine implements HostEngine {
     private watchHas;
     /**
      * Something at or beneath `from` changed: every node from there up may match a `:has()` rule
-     * it did not, or stop matching one. They are matched again rather than marked for restyling,
-     * which would restyle everything under them. Only sheets that use `:has()` pay.
+     * it did not, or stop matching one, up to `upTo` and not it. They are matched again rather than
+     * marked for restyling, which would restyle everything under them. Only sheets that use
+     * `:has()` pay.
      */
     private markBeneath;
     /**
@@ -1033,8 +1057,18 @@ export declare class Engine implements HostEngine {
      * Have matched again what is under each box that changed beneath and that such a rule could
      * be asking: the nodes the rule is for, and no other. Once for a commit, however many changes
      * there were beneath the box: a table gains its rows one at a time.
+     *
+     * A rule asked of a box above is walked under the highest box that asks it, which reaches what
+     * is under the boxes beneath that one as well: a rule `:has()` asks of any box is asked by every
+     * box from the change up to the root, and walked once, from the root. The rules a box asks are
+     * walked together, the tree beneath it once.
      */
     private markUnderHas;
+    /**
+     * `markUnderHas` for one box: the rules it asks that no box above it was walked for, walked
+     * together. What was walked under it and above it, which is `above` where it asks no more.
+     */
+    private markUnderBox;
     /**
      * What `node` matches changed, which the elements after it can read: as many of them as a rule
      * steps along from one, every one for a `~`, and none where no sheet steps at all.
@@ -1097,14 +1131,14 @@ export declare class Engine implements HostEngine {
     /** The first commit whose new views have not been drawn yet, while `commitUnseen` runs. */
     private unseen;
     /**
-     * A commit for what changed in the same turn as earlier commits, before a frame was drawn.
-     * `since` is how many commits there had been before the first of them (`stats.commits`).
+     * A commit for what changed after earlier commits, before a frame has drawn them. `since` is
+     * how many commits there had been before the first of them (`stats.commits`).
      *
      * A view those commits created has not been seen in the style they gave it, so what this one
-     * gives it is where it starts, and no transition runs toward it. That is what a browser
-     * does with a class added to an element in the turn that inserted it, and what `animate.enter`
-     * is built on: Angular adds the enter class after the render pass that created the element, and
-     * takes it off a frame later, which is the one change the transition is for.
+     * gives it is where it starts, and no transition runs toward it. That is what a browser does
+     * with a class added to an element before the frame after it was inserted, and what
+     * `animate.enter` is built on: Angular adds the enter class after the render pass that created
+     * the element, and takes it off a frame later, which is the one change the transition is for.
      */
     commitUnseen(since: number): boolean;
     /** Nodes that asked for `@keyframes` this commit had not met, by the name they asked for. */
@@ -1211,6 +1245,8 @@ export declare class Engine implements HostEngine {
      * its parent's: the cascade's, and over it the parent's inline style.
      */
     private movePaint;
+    /** Note the background colour a node that hands it over resolves to, where it changed. */
+    private takenPaint;
     /**
      * A container whose direction or alignment changed since a child with a `fit-content` size
      * read it, or whose height stopped or started being one a percentage is taken of since a child
@@ -1462,7 +1498,8 @@ export declare class Engine implements HostEngine {
     /**
      * Commit where it ends each transition of a size or a place that just started, for native to
      * move the view there: a layout animation, which the commit asks for once it is known that
-     * nothing else in it moves. One still on its way is committed where it ends too.
+     * nothing else in it moves. One still on its way is committed where it ends too. On a host
+     * with no layout animation they are eased from JavaScript, but for one sent on again and again.
      *
      * A width eased from JavaScript is a commit a frame, and a commit lays the whole screen out.
      */
@@ -1472,10 +1509,11 @@ export declare class Engine implements HostEngine {
     /**
      * Whether a transition of a size is one sent on again and again, each before the last had
      * ended: a progress bar that steps every 50ms and eases each step over 150. Native moves the
-     * view, and lays the screen out, every frame while a layout animation runs, so one started at
-     * every step is one that never stops. The first, and one sent back before it ends, are
-     * played; from the second sent on in a row, each is committed where it ends, and the steps
-     * are the motion. Played again once the size has been left alone for as long as it lasts.
+     * view, and lays the screen out, every frame while a layout animation runs, and JavaScript
+     * commits every frame while it eases one, so one started at every step is one that never
+     * stops. The first, and one sent back before it ends, are played; from the second sent on in
+     * a row, each is committed where it ends, and the steps are the motion. Played again once the
+     * size has been left alone for as long as it lasts.
      */
     private sentOnAgain;
     /** The animations this commit lays out at their last frame, for native to move the views to. */
@@ -1564,7 +1602,11 @@ export declare class Engine implements HostEngine {
      * device the platform pumps this from `requestAnimationFrame` for as long as it returns true.
      */
     advanceAnimations(now?: number): boolean;
-    /** The host's conversions, applied to a copy. A removed prop travels as null and stays null. */
+    /**
+     * The host's conversions, applied to a copy. A removed prop travels as `cleared` says, null for
+     * nearly every one. On an update a colour dropped as unreadable is null too: JSI leaves out an
+     * undefined key, and Fabric keeps what a clone leaves out.
+     */
     private processed;
     /** Copy a list of shadow-like objects, running each `color` through the host's converter. */
     private processNestedColors;
@@ -1876,9 +1918,12 @@ export declare class Engine implements HostEngine {
     private isAttached;
     /** The host's `resolveAssetSource`, for a component that needs an asset's size up front. */
     resolveAsset(value: unknown): unknown;
+    /** A colour prop as `processed` sends it: one dropped as unreadable is null on an update. */
+    private colourProp;
     /**
      * A colour prop as native takes it. A shape's `fill` or `stroke` the cascade settled from a
-     * token is the solid brush react-native-svg takes, and `none` no paint at all.
+     * token is the solid brush react-native-svg takes, `none` no paint at all, and one the host
+     * reads no colour in no paint of the shape's own.
      */
     private painted;
     /**