@ng-native/components 0.0.1 → 0.1.0

package/dist/sticky-headers.js

@@ -0,0 +1,118 @@
+import { pinnedRange } from '@ng-native/fabric';
+/**
+ * `stickyHeaderIndices` for `<scroll-view>`, done the way RN's `ScrollView.js` does it.
+ *
+ * There is no native prop for it on either platform. RN wraps each sticky child in
+ * `ScrollViewStickyHeader`, which translates it by the scroll offset past its own position and
+ * stops where the next sticky child would push it off. The same sums run here, over the content
+ * view's element children: control-flow anchors are not children in RN's sense and are skipped,
+ * so an index counts what is committed.
+ *
+ * Each sticky child's position comes from its own layout event, and the translation is written
+ * as its `transform` prop, with RN's `zIndex: 10` so it draws over the content scrolling under
+ * it. A style of the caller's own that sets either wins, as it would in RN.
+ *
+ * Where the host can, native moves each one on every frame the scroll view moves, as RN's
+ * animated interpolation does, and the translation is written only once scrolling pauses: a
+ * translate written from each scroll event lands late, and on a fast fling the header shudders.
+ */
+export class StickyHeaders {
+    engine;
+    horizontal;
+    headers = [];
+    extents = new Map();
+    listening = new Map();
+    /** The translation last written per header, so an unchanged one is not written again. */
+    written = new Map();
+    drives = new Map();
+    settleTimer;
+    offset = 0;
+    constructor(engine, scroll, horizontal) {
+        this.engine = engine;
+        this.scroll = scroll;
+        this.horizontal = horizontal;
+    }
+    scroll;
+    /** Find the sticky children again, after a pass that may have changed them. */
+    track(content, indices) {
+        const children = (content?.children ?? []).filter((child) => child.kind === 'element');
+        const headers = indices.flatMap((index) => children[index] ?? []);
+        for (const node of this.headers) {
+            if (!headers.includes(node))
+                this.release(node);
+        }
+        for (const node of headers) {
+            if (this.listening.has(node))
+                continue;
+            this.engine.setProp(node, 'zIndex', 10);
+            this.listening.set(node, this.engine.setEventListener(node, 'topLayout', (event) => this.measured(node, event)));
+        }
+        this.headers = headers;
+        this.apply();
+    }
+    scrolled(offset) {
+        this.offset = offset;
+        if (!this.engine.drivesScroll)
+            return this.apply();
+        // RN's sticky header commits its translate after 64 ms without a scroll event.
+        clearTimeout(this.settleTimer);
+        this.settleTimer = setTimeout(() => this.apply(), 64);
+    }
+    destroy() {
+        clearTimeout(this.settleTimer);
+        for (const node of this.headers)
+            this.release(node);
+        this.headers = [];
+    }
+    measured(node, event) {
+        const layout = event.nativeEvent?.layout;
+        if (!layout)
+            return;
+        const horizontal = this.horizontal();
+        this.extents.set(node, {
+            start: (horizontal ? layout.x : layout.y) ?? 0,
+            size: (horizontal ? layout.width : layout.height) ?? 0,
+        });
+        this.apply();
+    }
+    release(node) {
+        this.listening.get(node)?.();
+        this.listening.delete(node);
+        this.extents.delete(node);
+        this.written.delete(node);
+        this.drives.get(node)?.stop();
+        this.drives.delete(node);
+        this.engine.setProp(node, 'zIndex', undefined);
+        this.engine.setProp(node, 'transform', undefined);
+    }
+    drive(node, start, stop) {
+        if (!this.engine.drivesScroll)
+            return;
+        const range = pinnedRange(start, stop);
+        const drive = this.drives.get(node);
+        if (drive)
+            return drive.update(range);
+        const axis = this.horizontal() ? 'x' : 'y';
+        const next = this.engine.driveByScroll(node, this.scroll, axis, range);
+        if (next)
+            this.drives.set(node, next);
+    }
+    /** `ScrollViewStickyHeader`'s interpolation, as plain arithmetic. */
+    apply() {
+        const key = this.horizontal() ? 'translateX' : 'translateY';
+        this.headers.forEach((node, at) => {
+            const own = this.extents.get(node);
+            if (!own)
+                return;
+            const next = this.extents.get(this.headers[at + 1]);
+            const stop = next ? next.start - own.size : Infinity;
+            this.drive(node, own.start, stop);
+            const shift = Math.min(Math.max(0, this.offset - own.start), Math.max(0, stop - own.start));
+            if (this.written.get(node) === shift)
+                return;
+            this.written.set(node, shift);
+            this.engine.setProp(node, 'transform', shift > 0 ? [{ [key]: shift }] : undefined);
+        });
+    }
+}
+//# sourceMappingURL=sticky-headers.js.map

package/dist/sticky-headers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-headers.js","sourceRoot":"","sources":["../src/sticky-headers.ts"],"names":[],"mappings":"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","sourcesContent":["import { type HostEngine, type HostNode, type ScrollDrive, pinnedRange } from '@ng-native/fabric';\n\ninterface Extent {\n  readonly start: number;\n  readonly size: number;\n}\n\ntype LayoutEvent = {\n  nativeEvent?: { layout?: { x?: number; y?: number; width?: number; height?: number } };\n};\n\n/**\n * `stickyHeaderIndices` for `<scroll-view>`, done the way RN's `ScrollView.js` does it.\n *\n * There is no native prop for it on either platform. RN wraps each sticky child in\n * `ScrollViewStickyHeader`, which translates it by the scroll offset past its own position and\n * stops where the next sticky child would push it off. The same sums run here, over the content\n * view's element children: control-flow anchors are not children in RN's sense and are skipped,\n * so an index counts what is committed.\n *\n * Each sticky child's position comes from its own layout event, and the translation is written\n * as its `transform` prop, with RN's `zIndex: 10` so it draws over the content scrolling under\n * it. A style of the caller's own that sets either wins, as it would in RN.\n *\n * Where the host can, native moves each one on every frame the scroll view moves, as RN's\n * animated interpolation does, and the translation is written only once scrolling pauses: a\n * translate written from each scroll event lands late, and on a fast fling the header shudders.\n */\nexport class StickyHeaders {\n  private readonly engine: HostEngine;\n  private readonly horizontal: () => boolean;\n  private headers: HostNode[] = [];\n  private readonly extents = new Map<HostNode, Extent>();\n  private readonly listening = new Map<HostNode, () => void>();\n  /** The translation last written per header, so an unchanged one is not written again. */\n  private readonly written = new Map<HostNode, number>();\n  private readonly drives = new Map<HostNode, ScrollDrive>();\n  private settleTimer: ReturnType<typeof setTimeout> | undefined;\n  private offset = 0;\n\n  constructor(engine: HostEngine, scroll: HostNode, horizontal: () => boolean) {\n    this.engine = engine;\n    this.scroll = scroll;\n    this.horizontal = horizontal;\n  }\n\n  private readonly scroll: HostNode;\n\n  /** Find the sticky children again, after a pass that may have changed them. */\n  track(content: HostNode | undefined, indices: readonly number[]): void {\n    const children = (content?.children ?? []).filter((child) => child.kind === 'element');\n    const headers = indices.flatMap((index) => children[index] ?? []);\n    for (const node of this.headers) {\n      if (!headers.includes(node)) this.release(node);\n    }\n    for (const node of headers) {\n      if (this.listening.has(node)) continue;\n      this.engine.setProp(node, 'zIndex', 10);\n      this.listening.set(\n        node,\n        this.engine.setEventListener(node, 'topLayout', (event) => this.measured(node, event)),\n      );\n    }\n    this.headers = headers;\n    this.apply();\n  }\n\n  scrolled(offset: number): void {\n    this.offset = offset;\n    if (!this.engine.drivesScroll) return this.apply();\n    // RN's sticky header commits its translate after 64 ms without a scroll event.\n    clearTimeout(this.settleTimer);\n    this.settleTimer = setTimeout(() => this.apply(), 64);\n  }\n\n  destroy(): void {\n    clearTimeout(this.settleTimer);\n    for (const node of this.headers) this.release(node);\n    this.headers = [];\n  }\n\n  private measured(node: HostNode, event: unknown): void {\n    const layout = (event as LayoutEvent).nativeEvent?.layout;\n    if (!layout) return;\n    const horizontal = this.horizontal();\n    this.extents.set(node, {\n      start: (horizontal ? layout.x : layout.y) ?? 0,\n      size: (horizontal ? layout.width : layout.height) ?? 0,\n    });\n    this.apply();\n  }\n\n  private release(node: HostNode): void {\n    this.listening.get(node)?.();\n    this.listening.delete(node);\n    this.extents.delete(node);\n    this.written.delete(node);\n    this.drives.get(node)?.stop();\n    this.drives.delete(node);\n    this.engine.setProp(node, 'zIndex', undefined);\n    this.engine.setProp(node, 'transform', undefined);\n  }\n\n  private drive(node: HostNode, start: number, stop: number): void {\n    if (!this.engine.drivesScroll) return;\n    const range = pinnedRange(start, stop);\n    const drive = this.drives.get(node);\n    if (drive) return drive.update(range);\n    const axis = this.horizontal() ? 'x' : 'y';\n    const next = this.engine.driveByScroll(node, this.scroll, axis, range);\n    if (next) this.drives.set(node, next);\n  }\n\n  /** `ScrollViewStickyHeader`'s interpolation, as plain arithmetic. */\n  private apply(): void {\n    const key = this.horizontal() ? 'translateX' : 'translateY';\n    this.headers.forEach((node, at) => {\n      const own = this.extents.get(node);\n      if (!own) return;\n      const next = this.extents.get(this.headers[at + 1]!);\n      const stop = next ? next.start - own.size : Infinity;\n      this.drive(node, own.start, stop);\n      const shift = Math.min(Math.max(0, this.offset - own.start), Math.max(0, stop - own.start));\n      if (this.written.get(node) === shift) return;\n      this.written.set(node, shift);\n      this.engine.setProp(node, 'transform', shift > 0 ? [{ [key]: shift }] : undefined);\n    });\n  }\n}\n"]}

package/dist/swipe-refresh-layout.d.ts

@@ -0,0 +1,51 @@
+import type { Engine, EngineNode } from '@ng-native/fabric';
+/**
+ * The Android half of `<refresh-control>`: make its swipe layout the scroll view's parent.
+ *
+ * `ScrollView.js` does it with `cloneElement(refreshControl, {style: outer}, <NativeScrollView
+ * style={inner}>)`. `AndroidSwipeRefreshLayout` is a `ViewGroup` that pulls on its one child;
+ * committed inside the scroll view instead, it has no child to pull on and a pull does nothing.
+ *
+ * The templates cannot say it, because the refresh control is content of the scroll view, so the
+ * engine nodes are moved instead: the swipe layout goes where the scroll view was, the scroll view
+ * goes inside it, and an anchor, which never reaches Fabric, marks the spot to put it back.
+ *
+ * `sync` is idempotent and cheap when nothing moved, so it runs after every pass. That is also
+ * what repairs the shape when Angular moves the scroll view itself, say in a reordered `@for`:
+ * Angular re-inserts the node it knows about, and the next pass wraps it again where it landed.
+ *
+ * The style is split the same way RN splits it. The inline style Angular writes to the scroll view
+ * is read, the layout keys go to the swipe layout over the scroll view's base style, and the
+ * scroll view keeps the rest. A moved key is left on the scroll view as `null`, or as its base
+ * value for `flexGrow` and `flexShrink`, rather than deleted: Angular only removes a style key
+ * that is still there, so a deleted one could never be taken off the swipe layout again.
+ *
+ * ponytail: only inline style is split. Layout that reaches the scroll view from a class stays on
+ * the scroll view inside the swipe layout, which fills it anyway.
+ */
+export declare class SwipeRefreshLayout {
+    private readonly engine;
+    private readonly layout;
+    private scroll;
+    private readonly anchor;
+    /** The style object last written to the scroll view, to tell Angular's writes from ours. */
+    private written;
+    /** What was written in place of each moved key. */
+    private placeholders;
+    /** The caller's own values for the moved keys. */
+    private outer;
+    /** Whether `nestedScrollEnabled` was ours to set, so that unwrapping can take it back. */
+    private nested;
+    constructor(engine: Engine, layout: EngineNode);
+    sync(): void;
+    /** Put the scroll view back where the swipe layout is, with its whole style. */
+    unwrap(): void;
+    /**
+     * The scroll view this control is content of: the nearest ancestor that is one. Looked up once,
+     * before the first wrap moves the control out from under it.
+     */
+    private findScroll;
+    /** The style as the caller wrote it: the placeholders swapped back for the values they hide. */
+    private callerStyle;
+    private split;
+}

package/dist/swipe-refresh-layout.js

@@ -0,0 +1,162 @@
+/**
+ * RN's `splitLayoutProps`: the style keys that size and place a view, rather than paint it. On
+ * Android these move from the scroll view to the swipe layout that wraps it.
+ */
+const OUTER = new Set([
+    'margin',
+    'marginHorizontal',
+    'marginVertical',
+    'marginBottom',
+    'marginTop',
+    'marginLeft',
+    'marginRight',
+    'flex',
+    'flexGrow',
+    'flexShrink',
+    'flexBasis',
+    'alignSelf',
+    'height',
+    'minHeight',
+    'maxHeight',
+    'width',
+    'minWidth',
+    'maxWidth',
+    'position',
+    'left',
+    'right',
+    'bottom',
+    'top',
+    'transform',
+    'transformOrigin',
+    'rowGap',
+    'columnGap',
+    'gap',
+]);
+/** The element names whose host is a native scroll view a refresh control can belong to. */
+const SCROLL_HOSTS = new Set(['scroll-view', 'virtual-list']);
+/**
+ * The Android half of `<refresh-control>`: make its swipe layout the scroll view's parent.
+ *
+ * `ScrollView.js` does it with `cloneElement(refreshControl, {style: outer}, <NativeScrollView
+ * style={inner}>)`. `AndroidSwipeRefreshLayout` is a `ViewGroup` that pulls on its one child;
+ * committed inside the scroll view instead, it has no child to pull on and a pull does nothing.
+ *
+ * The templates cannot say it, because the refresh control is content of the scroll view, so the
+ * engine nodes are moved instead: the swipe layout goes where the scroll view was, the scroll view
+ * goes inside it, and an anchor, which never reaches Fabric, marks the spot to put it back.
+ *
+ * `sync` is idempotent and cheap when nothing moved, so it runs after every pass. That is also
+ * what repairs the shape when Angular moves the scroll view itself, say in a reordered `@for`:
+ * Angular re-inserts the node it knows about, and the next pass wraps it again where it landed.
+ *
+ * The style is split the same way RN splits it. The inline style Angular writes to the scroll view
+ * is read, the layout keys go to the swipe layout over the scroll view's base style, and the
+ * scroll view keeps the rest. A moved key is left on the scroll view as `null`, or as its base
+ * value for `flexGrow` and `flexShrink`, rather than deleted: Angular only removes a style key
+ * that is still there, so a deleted one could never be taken off the swipe layout again.
+ *
+ * ponytail: only inline style is split. Layout that reaches the scroll view from a class stays on
+ * the scroll view inside the swipe layout, which fills it anyway.
+ */
+export class SwipeRefreshLayout {
+    engine;
+    layout;
+    scroll = null;
+    anchor;
+    /** The style object last written to the scroll view, to tell Angular's writes from ours. */
+    written;
+    /** What was written in place of each moved key. */
+    placeholders = {};
+    /** The caller's own values for the moved keys. */
+    outer = {};
+    /** Whether `nestedScrollEnabled` was ours to set, so that unwrapping can take it back. */
+    nested = false;
+    constructor(engine, layout) {
+        this.engine = engine;
+        this.layout = layout;
+        this.anchor = engine.createAnchor();
+    }
+    sync() {
+        const scroll = (this.scroll ??= this.findScroll());
+        const parent = scroll?.parent;
+        if (!scroll || !parent)
+            return;
+        if (parent !== this.layout) {
+            this.engine.insertBefore(parent, this.anchor, scroll);
+            this.engine.insertBefore(parent, this.layout, scroll);
+            this.engine.appendChild(this.layout, scroll);
+        }
+        // RN's `nestedScrollEnabled ?? true`. `<scroll-view>` and `<virtual-list>` bind it themselves
+        // when they can see the control; this covers one they cannot, projected through another
+        // component such as `<section-list>`.
+        if (scroll.props['nestedScrollEnabled'] === undefined) {
+            this.engine.setProp(scroll, 'nestedScrollEnabled', true);
+            this.nested = true;
+        }
+        const style = scroll.props['style'];
+        if (style !== this.written || this.layout.props['style'] === undefined)
+            this.split(scroll);
+    }
+    /** Put the scroll view back where the swipe layout is, with its whole style. */
+    unwrap() {
+        const scroll = this.scroll;
+        if (scroll) {
+            const home = this.anchor.parent;
+            if (scroll.parent === this.layout && home)
+                this.engine.insertBefore(home, scroll, this.anchor);
+            const style = scroll.props['style'];
+            if (style === this.written)
+                this.engine.setProp(scroll, 'style', this.callerStyle(style));
+            if (this.nested)
+                this.engine.setProp(scroll, 'nestedScrollEnabled', undefined);
+        }
+        this.engine.removeChild(null, this.layout);
+        this.engine.removeChild(null, this.anchor);
+    }
+    /**
+     * The scroll view this control is content of: the nearest ancestor that is one. Looked up once,
+     * before the first wrap moves the control out from under it.
+     */
+    findScroll() {
+        for (let node = this.layout.parent; node; node = node.parent) {
+            if (SCROLL_HOSTS.has(node.name))
+                return node;
+        }
+        return null;
+    }
+    /** The style as the caller wrote it: the placeholders swapped back for the values they hide. */
+    callerStyle(style) {
+        const caller = {};
+        for (const [key, value] of Object.entries(style ?? {})) {
+            const hidden = key in this.placeholders && value === this.placeholders[key];
+            caller[key] = hidden ? this.outer[key] : value;
+        }
+        return caller;
+    }
+    split(scroll) {
+        const outer = {};
+        const inner = {};
+        const placeholders = {};
+        for (const [key, value] of Object.entries(this.callerStyle(scroll.props['style']))) {
+            if (!OUTER.has(key)) {
+                inner[key] = value;
+                continue;
+            }
+            outer[key] = value;
+            placeholders[key] = key === 'flexGrow' || key === 'flexShrink' ? 1 : null;
+        }
+        this.outer = outer;
+        this.placeholders = placeholders;
+        this.written = { ...inner, ...placeholders };
+        this.engine.setProp(scroll, 'style', this.written);
+        // RN's `compose(baseStyle, outer)`; the direction is the one the scroll view was given.
+        this.engine.setProp(this.layout, 'style', {
+            flexGrow: 1,
+            flexShrink: 1,
+            flexDirection: scroll.props['flexDirection'] ?? 'column',
+            overflow: 'scroll',
+            ...outer,
+        });
+    }
+}
+//# sourceMappingURL=swipe-refresh-layout.js.map

package/dist/swipe-refresh-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe-refresh-layout.js","sourceRoot":"","sources":["../src/swipe-refresh-layout.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Engine, EngineNode } from '@ng-native/fabric';\n\n/**\n * RN's `splitLayoutProps`: the style keys that size and place a view, rather than paint it. On\n * Android these move from the scroll view to the swipe layout that wraps it.\n */\nconst OUTER = new Set([\n  'margin',\n  'marginHorizontal',\n  'marginVertical',\n  'marginBottom',\n  'marginTop',\n  'marginLeft',\n  'marginRight',\n  'flex',\n  'flexGrow',\n  'flexShrink',\n  'flexBasis',\n  'alignSelf',\n  'height',\n  'minHeight',\n  'maxHeight',\n  'width',\n  'minWidth',\n  'maxWidth',\n  'position',\n  'left',\n  'right',\n  'bottom',\n  'top',\n  'transform',\n  'transformOrigin',\n  'rowGap',\n  'columnGap',\n  'gap',\n]);\n\n/** The element names whose host is a native scroll view a refresh control can belong to. */\nconst SCROLL_HOSTS = new Set(['scroll-view', 'virtual-list']);\n\ntype Style = Record<string, unknown>;\n\n/**\n * The Android half of `<refresh-control>`: make its swipe layout the scroll view's parent.\n *\n * `ScrollView.js` does it with `cloneElement(refreshControl, {style: outer}, <NativeScrollView\n * style={inner}>)`. `AndroidSwipeRefreshLayout` is a `ViewGroup` that pulls on its one child;\n * committed inside the scroll view instead, it has no child to pull on and a pull does nothing.\n *\n * The templates cannot say it, because the refresh control is content of the scroll view, so the\n * engine nodes are moved instead: the swipe layout goes where the scroll view was, the scroll view\n * goes inside it, and an anchor, which never reaches Fabric, marks the spot to put it back.\n *\n * `sync` is idempotent and cheap when nothing moved, so it runs after every pass. That is also\n * what repairs the shape when Angular moves the scroll view itself, say in a reordered `@for`:\n * Angular re-inserts the node it knows about, and the next pass wraps it again where it landed.\n *\n * The style is split the same way RN splits it. The inline style Angular writes to the scroll view\n * is read, the layout keys go to the swipe layout over the scroll view's base style, and the\n * scroll view keeps the rest. A moved key is left on the scroll view as `null`, or as its base\n * value for `flexGrow` and `flexShrink`, rather than deleted: Angular only removes a style key\n * that is still there, so a deleted one could never be taken off the swipe layout again.\n *\n * ponytail: only inline style is split. Layout that reaches the scroll view from a class stays on\n * the scroll view inside the swipe layout, which fills it anyway.\n */\nexport class SwipeRefreshLayout {\n  private readonly engine: Engine;\n  private readonly layout: EngineNode;\n  private scroll: EngineNode | null = null;\n  private readonly anchor: EngineNode;\n  /** The style object last written to the scroll view, to tell Angular's writes from ours. */\n  private written: Style | undefined;\n  /** What was written in place of each moved key. */\n  private placeholders: Style = {};\n  /** The caller's own values for the moved keys. */\n  private outer: Style = {};\n  /** Whether `nestedScrollEnabled` was ours to set, so that unwrapping can take it back. */\n  private nested = false;\n\n  constructor(engine: Engine, layout: EngineNode) {\n    this.engine = engine;\n    this.layout = layout;\n    this.anchor = engine.createAnchor();\n  }\n\n  sync(): void {\n    const scroll = (this.scroll ??= this.findScroll());\n    const parent = scroll?.parent;\n    if (!scroll || !parent) return;\n\n    if (parent !== this.layout) {\n      this.engine.insertBefore(parent, this.anchor, scroll);\n      this.engine.insertBefore(parent, this.layout, scroll);\n      this.engine.appendChild(this.layout, scroll);\n    }\n    // RN's `nestedScrollEnabled ?? true`. `<scroll-view>` and `<virtual-list>` bind it themselves\n    // when they can see the control; this covers one they cannot, projected through another\n    // component such as `<section-list>`.\n    if (scroll.props['nestedScrollEnabled'] === undefined) {\n      this.engine.setProp(scroll, 'nestedScrollEnabled', true);\n      this.nested = true;\n    }\n    const style = scroll.props['style'] as Style | undefined;\n    if (style !== this.written || this.layout.props['style'] === undefined) this.split(scroll);\n  }\n\n  /** Put the scroll view back where the swipe layout is, with its whole style. */\n  unwrap(): void {\n    const scroll = this.scroll;\n    if (scroll) {\n      const home = this.anchor.parent;\n      if (scroll.parent === this.layout && home)\n        this.engine.insertBefore(home, scroll, this.anchor);\n      const style = scroll.props['style'] as Style | undefined;\n      if (style === this.written) this.engine.setProp(scroll, 'style', this.callerStyle(style));\n      if (this.nested) this.engine.setProp(scroll, 'nestedScrollEnabled', undefined);\n    }\n    this.engine.removeChild(null, this.layout);\n    this.engine.removeChild(null, this.anchor);\n  }\n\n  /**\n   * The scroll view this control is content of: the nearest ancestor that is one. Looked up once,\n   * before the first wrap moves the control out from under it.\n   */\n  private findScroll(): EngineNode | null {\n    for (let node = this.layout.parent; node; node = node.parent) {\n      if (SCROLL_HOSTS.has(node.name)) return node;\n    }\n    return null;\n  }\n\n  /** The style as the caller wrote it: the placeholders swapped back for the values they hide. */\n  private callerStyle(style: Style | undefined): Style {\n    const caller: Style = {};\n    for (const [key, value] of Object.entries(style ?? {})) {\n      const hidden = key in this.placeholders && value === this.placeholders[key];\n      caller[key] = hidden ? this.outer[key] : value;\n    }\n    return caller;\n  }\n\n  private split(scroll: EngineNode): void {\n    const outer: Style = {};\n    const inner: Style = {};\n    const placeholders: Style = {};\n    for (const [key, value] of Object.entries(this.callerStyle(scroll.props['style'] as Style))) {\n      if (!OUTER.has(key)) {\n        inner[key] = value;\n        continue;\n      }\n      outer[key] = value;\n      placeholders[key] = key === 'flexGrow' || key === 'flexShrink' ? 1 : null;\n    }\n    this.outer = outer;\n    this.placeholders = placeholders;\n    this.written = { ...inner, ...placeholders };\n    this.engine.setProp(scroll, 'style', this.written);\n    // RN's `compose(baseStyle, outer)`; the direction is the one the scroll view was given.\n    this.engine.setProp(this.layout, 'style', {\n      flexGrow: 1,\n      flexShrink: 1,\n      flexDirection: scroll.props['flexDirection'] ?? 'column',\n      overflow: 'scroll',\n      ...outer,\n    });\n  }\n}\n"]}

package/dist/switch.d.ts

@@ -0,0 +1,54 @@
+import { type SimpleChanges } from '@angular/core';
+import { type NativeSyntheticEvent } from '@ng-native/fabric';
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+/**
+ * A toggle, wired for signal forms as a `FormCheckboxControl` (`checked`, not `value`). Commits
+ * as `Switch` on iOS and `AndroidSwitch` on Android.
+ *
+ * The two platforms spell the same props differently, so both spellings are sent and each
+ * native side reads its own; a prop it does not know is ignored.
+ *
+ * Controlled as React Native's `Switch` is: bind `checked` and the app's value is what the switch
+ * shows. The user flips it, the app keeps the old value, and a prop diff has nothing to send,
+ * because the prop never changed; native is the only side that moved. So once the pass the flip
+ * started has rendered, the switch compares the model with what native reported and, if they
+ * differ, sends the command RN's wrapper sends - `setValue` on iOS, `setNativeValue` on Android.
+ * See `ControlledModel` for how the model comes to say what the app says.
+ */
+export declare class Switch extends ViewBase {
+    readonly checked: import("@angular/core").ModelSignal<boolean>;
+    /** Ignore touches and grey out. */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** `Switch.js`: `accessibilityRole={props.accessibilityRole ?? 'switch'}`. */
+    protected roleByDefault(): 'switch';
+    protected disabledForAccessibility(): boolean | undefined;
+    protected checkedForAccessibility(): boolean;
+    /** The colour of the knob. */
+    readonly thumbColor: import("@angular/core").InputSignal<string | undefined>;
+    /** The track colour for each state. */
+    readonly trackColor: import("@angular/core").InputSignal<{
+        readonly false?: string;
+        readonly true?: string;
+    } | undefined>;
+    /** iOS: the colour behind the track when off, seen where the track is transparent. */
+    readonly iosBackgroundColor: import("@angular/core").InputSignal<string | undefined>;
+    protected readonly enabled: import("@angular/core").Signal<boolean | undefined>;
+    private readonly injector;
+    private readonly control;
+    /** What native reported last, until the pass it started has rendered and been compared. */
+    private nativeValue;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    protected onNativeChange(event: NativeSyntheticEvent<{
+        value?: boolean;
+    }>): void;
+    /**
+     * After the app's bindings have settled, not before: a flip the app accepts reaches the model
+     * during change detection, and comparing any earlier would send native back the value it is
+     * about to be given. A value set from code later needs none of this, as the prop changes.
+     */
+    private reconcile;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Switch, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Switch, "switch", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "thumbColor": { "alias": "thumbColor"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "iosBackgroundColor": { "alias": "ios_backgroundColor"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+}

package/dist/switch.js

@@ -0,0 +1,110 @@
+import { Directive, Injector, afterNextRender, computed, effect, inject, input, model, } from '@angular/core';
+import { nativePlatform } from '@ng-native/fabric';
+import { ControlledModel } from "./controlled-model.js";
+import { optionalBoolean } from "./transforms.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/**
+ * A toggle, wired for signal forms as a `FormCheckboxControl` (`checked`, not `value`). Commits
+ * as `Switch` on iOS and `AndroidSwitch` on Android.
+ *
+ * The two platforms spell the same props differently, so both spellings are sent and each
+ * native side reads its own; a prop it does not know is ignored.
+ *
+ * Controlled as React Native's `Switch` is: bind `checked` and the app's value is what the switch
+ * shows. The user flips it, the app keeps the old value, and a prop diff has nothing to send,
+ * because the prop never changed; native is the only side that moved. So once the pass the flip
+ * started has rendered, the switch compares the model with what native reported and, if they
+ * differ, sends the command RN's wrapper sends - `setValue` on iOS, `setNativeValue` on Android.
+ * See `ControlledModel` for how the model comes to say what the app says.
+ */
+export class Switch extends ViewBase {
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Ignore touches and grey out. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** `Switch.js`: `accessibilityRole={props.accessibilityRole ?? 'switch'}`. */
+    roleByDefault() {
+        return 'switch';
+    }
+    disabledForAccessibility() {
+        return this.disabled();
+    }
+    checkedForAccessibility() {
+        return this.checked();
+    }
+    /** The colour of the knob. */
+    thumbColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "thumbColor" }] : /* istanbul ignore next */ []));
+    /** The track colour for each state. */
+    trackColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "trackColor" }] : /* istanbul ignore next */ []));
+    /** iOS: the colour behind the track when off, seen where the track is transparent. */
+    iosBackgroundColor = input(undefined, { ...(ngDevMode ? { debugName: "iosBackgroundColor" } : /* istanbul ignore next */ {}), alias: 'ios_backgroundColor' });
+    enabled = computed(() => {
+        const disabled = this.disabled();
+        return disabled === undefined ? undefined : !disabled;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    control = new ControlledModel(this.checked, 'checked');
+    /** What native reported last, until the pass it started has rendered and been compared. */
+    nativeValue = null;
+    constructor() {
+        super();
+        effect(() => {
+            // Android spells the value `on` and iOS the on-track colour `onTintColor`. Angular refuses
+            // both as host bindings because they read as event handlers, so they go to the node.
+            this.engine.setProp(this.node, 'on', this.checked());
+            this.engine.setProp(this.node, 'onTintColor', this.trackColor()?.true);
+        });
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        this.control.noteChanges(changes);
+    }
+    onNativeChange(event) {
+        this.nativeValue = event.nativeEvent?.value ?? false;
+        this.control.propose(this.nativeValue);
+        afterNextRender({ write: () => this.reconcile() }, { injector: this.injector });
+    }
+    /**
+     * After the app's bindings have settled, not before: a flip the app accepts reaches the model
+     * during change detection, and comparing any earlier would send native back the value it is
+     * about to be given. A value set from code later needs none of this, as the prop changes.
+     */
+    reconcile() {
+        const native = this.nativeValue;
+        this.nativeValue = null;
+        const desired = this.checked();
+        if (native === null || native === desired)
+            return;
+        const command = nativePlatform() === 'android' ? 'setNativeValue' : 'setValue';
+        this.engine.dispatchCommand(this.node, command, [desired]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Switch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: Switch, isStandalone: true, selector: "switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, thumbColor: { classPropertyName: "thumbColor", publicName: "thumbColor", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, iosBackgroundColor: { classPropertyName: "iosBackgroundColor", publicName: "ios_backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { listeners: { "change": "onNativeChange($event)" }, properties: { "accessibilityState": "accessibilityStateProp()", "value": "checked()", "disabled": "disabled()", "enabled": "enabled()", "thumbTintColor": "thumbColor()", "tintColor": "trackColor()?.false", "trackColorForTrue": "trackColor()?.true", "trackColorForFalse": "trackColor()?.false", "trackTintColor": "checked() ? trackColor()?.true : trackColor()?.false", "style.backgroundColor": "iosBackgroundColor()", "style.borderRadius": "iosBackgroundColor() ? 16 : undefined" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Switch, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'switch',
+                    host: {
+                        // `disabled` is an input of ours, so it cannot reach `ngOnChanges` on the base; this is
+                        // the one binding that keeps the announced state in step with it.
+                        '[accessibilityState]': 'accessibilityStateProp()',
+                        '[value]': 'checked()',
+                        '[disabled]': 'disabled()',
+                        '[enabled]': 'enabled()',
+                        '[thumbTintColor]': 'thumbColor()',
+                        '[tintColor]': 'trackColor()?.false',
+                        '[trackColorForTrue]': 'trackColor()?.true',
+                        '[trackColorForFalse]': 'trackColor()?.false',
+                        '[trackTintColor]': 'checked() ? trackColor()?.true : trackColor()?.false',
+                        '[style.backgroundColor]': 'iosBackgroundColor()',
+                        '[style.borderRadius]': 'iosBackgroundColor() ? 16 : undefined',
+                        '(change)': 'onNativeChange($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], thumbColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbColor", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], iosBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ios_backgroundColor", required: false }] }] } });
+//# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../src/switch.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Directive,\n  Injector,\n  type SimpleChanges,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n} from '@angular/core';\nimport { type NativeSyntheticEvent, nativePlatform } from '@ng-native/fabric';\nimport { ControlledModel } from './controlled-model.ts';\nimport { optionalBoolean } from './transforms.ts';\nimport { ViewBase } from './view-base.ts';\n\n/**\n * A toggle, wired for signal forms as a `FormCheckboxControl` (`checked`, not `value`). Commits\n * as `Switch` on iOS and `AndroidSwitch` on Android.\n *\n * The two platforms spell the same props differently, so both spellings are sent and each\n * native side reads its own; a prop it does not know is ignored.\n *\n * Controlled as React Native's `Switch` is: bind `checked` and the app's value is what the switch\n * shows. The user flips it, the app keeps the old value, and a prop diff has nothing to send,\n * because the prop never changed; native is the only side that moved. So once the pass the flip\n * started has rendered, the switch compares the model with what native reported and, if they\n * differ, sends the command RN's wrapper sends - `setValue` on iOS, `setNativeValue` on Android.\n * See `ControlledModel` for how the model comes to say what the app says.\n */\n@Directive({\n  selector: 'switch',\n  host: {\n    // `disabled` is an input of ours, so it cannot reach `ngOnChanges` on the base; this is\n    // the one binding that keeps the announced state in step with it.\n    '[accessibilityState]': 'accessibilityStateProp()',\n    '[value]': 'checked()',\n    '[disabled]': 'disabled()',\n    '[enabled]': 'enabled()',\n    '[thumbTintColor]': 'thumbColor()',\n    '[tintColor]': 'trackColor()?.false',\n    '[trackColorForTrue]': 'trackColor()?.true',\n    '[trackColorForFalse]': 'trackColor()?.false',\n    '[trackTintColor]': 'checked() ? trackColor()?.true : trackColor()?.false',\n    '[style.backgroundColor]': 'iosBackgroundColor()',\n    '[style.borderRadius]': 'iosBackgroundColor() ? 16 : undefined',\n    '(change)': 'onNativeChange($event)',\n  },\n})\nexport class Switch extends ViewBase {\n  readonly checked = model<boolean>(false);\n  /** Ignore touches and grey out. */\n  readonly disabled = input(undefined, { transform: optionalBoolean });\n\n  /** `Switch.js`: `accessibilityRole={props.accessibilityRole ?? 'switch'}`. */\n  protected override roleByDefault(): 'switch' {\n    return 'switch';\n  }\n\n  protected override disabledForAccessibility(): boolean | undefined {\n    return this.disabled();\n  }\n\n  protected override checkedForAccessibility(): boolean {\n    return this.checked();\n  }\n  /** The colour of the knob. */\n  readonly thumbColor = input<string>();\n  /** The track colour for each state. */\n  readonly trackColor = input<{ readonly false?: string; readonly true?: string }>();\n  /** iOS: the colour behind the track when off, seen where the track is transparent. */\n  readonly iosBackgroundColor = input<string>(undefined, { alias: 'ios_backgroundColor' });\n\n  protected readonly enabled = computed(() => {\n    const disabled = this.disabled();\n    return disabled === undefined ? undefined : !disabled;\n  });\n\n  private readonly injector = inject(Injector);\n  private readonly control = new ControlledModel(this.checked, 'checked');\n  /** What native reported last, until the pass it started has rendered and been compared. */\n  private nativeValue: boolean | null = null;\n\n  constructor() {\n    super();\n    effect(() => {\n      // Android spells the value `on` and iOS the on-track colour `onTintColor`. Angular refuses\n      // both as host bindings because they read as event handlers, so they go to the node.\n      this.engine.setProp(this.node, 'on', this.checked());\n      this.engine.setProp(this.node, 'onTintColor', this.trackColor()?.true);\n    });\n  }\n\n  override ngOnChanges(changes: SimpleChanges): void {\n    super.ngOnChanges(changes);\n    this.control.noteChanges(changes);\n  }\n\n  protected onNativeChange(event: NativeSyntheticEvent<{ value?: boolean }>): void {\n    this.nativeValue = event.nativeEvent?.value ?? false;\n    this.control.propose(this.nativeValue);\n    afterNextRender({ write: () => this.reconcile() }, { injector: this.injector });\n  }\n\n  /**\n   * After the app's bindings have settled, not before: a flip the app accepts reaches the model\n   * during change detection, and comparing any earlier would send native back the value it is\n   * about to be given. A value set from code later needs none of this, as the prop changes.\n   */\n  private reconcile(): void {\n    const native = this.nativeValue;\n    this.nativeValue = null;\n    const desired = this.checked();\n    if (native === null || native === desired) return;\n    const command = nativePlatform() === 'android' ? 'setNativeValue' : 'setValue';\n    this.engine.dispatchCommand(this.node, command, [desired]);\n  }\n}\n"]}

package/dist/template-slot.d.ts

@@ -0,0 +1,18 @@
+import { type OnChanges, type SimpleChanges, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Stamp out a caller's `<ng-template>` with a context, which is `NgTemplateOutlet` without
+ * depending on `@angular/common` for it.
+ *
+ * The view is made once per template and its context updated in place after that, so a list that
+ * re-renders with new neighbours for a separator does not rebuild the separator.
+ */
+export declare class TemplateSlot<C extends object> implements OnChanges {
+    readonly template: import("@angular/core").InputSignal<TemplateRef<C>>;
+    readonly context: import("@angular/core").InputSignal<C>;
+    private readonly container;
+    private view;
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TemplateSlot<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TemplateSlot<any>, "[templateSlot]", never, { "template": { "alias": "templateSlot"; "required": true; "isSignal": true; }; "context": { "alias": "templateSlotContext"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/template-slot.js

@@ -0,0 +1,30 @@
+import { Directive, TemplateRef, ViewContainerRef, inject, input, } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Stamp out a caller's `<ng-template>` with a context, which is `NgTemplateOutlet` without
+ * depending on `@angular/common` for it.
+ *
+ * The view is made once per template and its context updated in place after that, so a list that
+ * re-renders with new neighbours for a separator does not rebuild the separator.
+ */
+export class TemplateSlot {
+    template = input.required({ ...(ngDevMode ? { debugName: "template" } : /* istanbul ignore next */ {}), alias: 'templateSlot' });
+    context = input.required({ ...(ngDevMode ? { debugName: "context" } : /* istanbul ignore next */ {}), alias: 'templateSlotContext' });
+    container = inject(ViewContainerRef);
+    view = null;
+    ngOnChanges(changes) {
+        if (this.view && !changes['template']) {
+            Object.assign(this.view.context, this.context());
+            return;
+        }
+        this.container.clear();
+        this.view = this.container.createEmbeddedView(this.template(), { ...this.context() });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TemplateSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: TemplateSlot, isStandalone: true, selector: "[templateSlot]", inputs: { template: { classPropertyName: "template", publicName: "templateSlot", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "templateSlotContext", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TemplateSlot, decorators: [{
+            type: Directive,
+            args: [{ selector: '[templateSlot]' }]
+        }], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateSlot", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateSlotContext", required: true }] }] } });
+//# sourceMappingURL=template-slot.js.map

package/dist/template-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-slot.js","sourceRoot":"","sources":["../src/template-slot.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAIT,WAAW,EACX,gBAAgB,EAChB,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;;AAEvB;;;;;;GAMG;AAEH,MAAM,OAAO,YAAY;IACd,QAAQ,GAAG,KAAK,CAAC,QAAQ,+EAAmB,KAAK,EAAE,cAAc,GAAG,CAAC;IACrE,OAAO,GAAG,KAAK,CAAC,QAAQ,8EAAM,KAAK,EAAE,qBAAqB,GAAG,CAAC;IAEtD,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAC9C,IAAI,GAA8B,IAAI,CAAC;IAE/C,WAAW,CAAC,OAAsB;QAChC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;YACjD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IACxF,CAAC;uGAdU,YAAY;2FAAZ,YAAY;;2FAAZ,YAAY;kBADxB,SAAS;mBAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE","sourcesContent":["import {\n  Directive,\n  type EmbeddedViewRef,\n  type OnChanges,\n  type SimpleChanges,\n  TemplateRef,\n  ViewContainerRef,\n  inject,\n  input,\n} from '@angular/core';\n\n/**\n * Stamp out a caller's `<ng-template>` with a context, which is `NgTemplateOutlet` without\n * depending on `@angular/common` for it.\n *\n * The view is made once per template and its context updated in place after that, so a list that\n * re-renders with new neighbours for a separator does not rebuild the separator.\n */\n@Directive({ selector: '[templateSlot]' })\nexport class TemplateSlot<C extends object> implements OnChanges {\n  readonly template = input.required<TemplateRef<C>>({ alias: 'templateSlot' });\n  readonly context = input.required<C>({ alias: 'templateSlotContext' });\n\n  private readonly container = inject(ViewContainerRef);\n  private view: EmbeddedViewRef<C> | null = null;\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (this.view && !changes['template']) {\n      Object.assign(this.view.context, this.context());\n      return;\n    }\n    this.container.clear();\n    this.view = this.container.createEmbeddedView(this.template(), { ...this.context() });\n  }\n}\n"]}