@ng-native/fabric 0.0.1 → 0.1.1

package/dist/native-drive.js

@@ -0,0 +1,318 @@
+/**
+ * A view moved by a scroll view's offset on the native side, with no JavaScript in between.
+ *
+ * A sticky header moved by a transform set from each scroll event lags the scroll: the event
+ * reaches JavaScript, the transform is committed, and by the time Fabric mounts it the content has
+ * moved on, so on a fast fling the header shudders and comes away from the edge it is pinned to.
+ * React Native's own sticky headers do not, because `ScrollViewStickyHeader` maps the offset onto
+ * an animated value on the native side and interpolates the header's translate from it there.
+ * This is that mapping, for the engine's nodes: the scroll view's offset along one axis feeds a
+ * value, the value an interpolation, the interpolation a translate, and native applies it on every
+ * frame the scroll view moves.
+ *
+ * It goes through React Native's own `NativeAnimatedHelper`, whose node tags every other animated
+ * value in the app also comes from, so none of them can collide.
+ */
+export class NativeScrollDriver {
+    native;
+    /** One value per source view and feed, by the feed's key. */
+    offsets = new Map();
+    pending = new Set();
+    constructor(native) {
+        this.native = native;
+    }
+    /**
+     * Move a view by a scroll. `tagOf` answers a node's view tag once it has been committed, and
+     * null before, which is why the connection may wait for a commit: `connect` is tried again by
+     * `afterCommit` until both views exist.
+     */
+    drive(view, source, feed, property, range, statics, tagOf, shift = null) {
+        const drive = { viewTag: null, range, shift, nodes: null, stopped: false };
+        const key = feedKey(feed);
+        const connect = () => {
+            if (drive.stopped)
+                return true;
+            const viewTag = tagOf(view);
+            const sourceTag = tagOf(source);
+            if (viewTag === null || sourceTag === null)
+                return false;
+            drive.viewTag = viewTag;
+            const offset = this.offset(source, sourceTag, feed, key);
+            drive.nodes = this.build(offset.value, viewTag, property, drive, statics);
+            this.flush();
+            return true;
+        };
+        if (!connect())
+            this.pending.add(connect);
+        return {
+            update: (next) => {
+                if (drive.stopped || sameRange(drive.range, next))
+                    return;
+                drive.range = next;
+                if (!drive.nodes || drive.viewTag === null)
+                    return;
+                this.tearDown(drive.nodes, drive.viewTag);
+                const offset = this.offsets.get(source).get(key);
+                drive.nodes = this.build(offset.value, drive.viewTag, property, drive, statics);
+                this.flush();
+            },
+            shift: (amount) => {
+                if (drive.stopped || drive.shift === null || drive.shift === amount)
+                    return;
+                drive.shift = amount;
+                if (drive.nodes?.shift == null)
+                    return;
+                this.native.API.setAnimatedNodeValue(drive.nodes.shift, amount);
+                this.flush();
+            },
+            stop: () => {
+                if (drive.stopped)
+                    return;
+                drive.stopped = true;
+                this.pending.delete(connect);
+                if (!drive.nodes || drive.viewTag === null)
+                    return;
+                this.tearDown(drive.nodes, drive.viewTag);
+                this.release(source, key);
+                this.flush();
+            },
+        };
+    }
+    /**
+     * Play a view's opacity and transform by a scroll: each channel an interpolation from the
+     * offset, as `scroll-animation.ts` lays a `@keyframes` animation along it. `update` rebuilds
+     * the channels, when the scroll view says how far it scrolls; `stop` lets the view go.
+     */
+    animate(view, source, feed, channels, tagOf) {
+        const state = {
+            channels,
+            viewTag: null,
+            nodes: null,
+            stopped: false,
+        };
+        const key = feedKey(feed);
+        const connect = () => {
+            if (state.stopped)
+                return true;
+            const viewTag = tagOf(view);
+            const sourceTag = tagOf(source);
+            if (viewTag === null || sourceTag === null)
+                return false;
+            state.viewTag = viewTag;
+            const offset = this.offset(source, sourceTag, feed, key);
+            state.nodes = this.buildChannels(offset.value, viewTag, state.channels);
+            this.flush();
+            return true;
+        };
+        if (!connect())
+            this.pending.add(connect);
+        return {
+            update: (next) => {
+                if (state.stopped)
+                    return;
+                state.channels = next;
+                if (!state.nodes || state.viewTag === null)
+                    return;
+                this.dropChannels(state.nodes, state.viewTag);
+                const offset = this.offsets.get(source).get(key);
+                state.nodes = this.buildChannels(offset.value, state.viewTag, next);
+                this.flush();
+            },
+            stop: () => {
+                if (state.stopped)
+                    return;
+                state.stopped = true;
+                this.pending.delete(connect);
+                if (!state.nodes || state.viewTag === null)
+                    return;
+                this.dropChannels(state.nodes, state.viewTag);
+                this.release(source, key);
+                this.flush();
+            },
+        };
+    }
+    /** The nodes for a set of channels, connected to the view; the props node first. */
+    buildChannels(value, viewTag, channels) {
+        const { API } = this.native;
+        const made = [];
+        const interpolation = (range) => {
+            const tag = this.native.generateNewNodeTag();
+            API.createAnimatedNode(tag, {
+                type: 'interpolation',
+                inputRange: [...range.input],
+                outputRange: [...range.output],
+                extrapolateLeft: 'clamp',
+                extrapolateRight: 'clamp',
+            });
+            API.connectAnimatedNodes(value, tag);
+            made.push(tag);
+            return tag;
+        };
+        const style = {};
+        if (channels.opacity)
+            style['opacity'] = interpolation(channels.opacity);
+        if (channels.transform.length) {
+            const transforms = channels.transform.map((channel) => 'range' in channel
+                ? { type: 'animated', property: channel.property, nodeTag: interpolation(channel.range) }
+                : { type: 'static', property: channel.property, value: channel.value });
+            const transform = this.native.generateNewNodeTag();
+            API.createAnimatedNode(transform, { type: 'transform', transforms });
+            for (const entry of transforms) {
+                if (entry.type === 'animated')
+                    API.connectAnimatedNodes(entry.nodeTag, transform);
+            }
+            style['transform'] = transform;
+            made.push(transform);
+        }
+        const styleTag = this.native.generateNewNodeTag();
+        API.createAnimatedNode(styleTag, { type: 'style', style });
+        for (const tag of Object.values(style))
+            API.connectAnimatedNodes(tag, styleTag);
+        const props = this.native.generateNewNodeTag();
+        API.createAnimatedNode(props, { type: 'props', props: { style: styleTag } });
+        API.connectAnimatedNodes(styleTag, props);
+        API.connectAnimatedNodeToView(props, viewTag);
+        return [props, styleTag, ...made.reverse()];
+    }
+    dropChannels(nodes, viewTag) {
+        const { API } = this.native;
+        API.disconnectAnimatedNodeFromView(nodes[0], viewTag);
+        for (const tag of nodes)
+            API.dropAnimatedNode(tag);
+    }
+    /** Connects every drive still waiting for its views, now that a commit may have made them. */
+    afterCommit() {
+        for (const connect of [...this.pending])
+            if (connect())
+                this.pending.delete(connect);
+    }
+    /** One value per source view and feed, fed by its events, shared by every view it drives. */
+    offset(source, viewTag, feed, key) {
+        let feeds = this.offsets.get(source);
+        if (!feeds)
+            this.offsets.set(source, (feeds = new Map()));
+        let offset = feeds.get(key);
+        if (!offset) {
+            const value = this.native.generateNewNodeTag();
+            this.native.API.createAnimatedNode(value, { type: 'value', value: 0, offset: 0 });
+            for (const event of feed.events) {
+                this.native.API.addAnimatedEventToView(viewTag, event, {
+                    nativeEventPath: [...feed.path],
+                    animatedValueTag: value,
+                });
+            }
+            offset = { value, viewTag, feed, users: 0 };
+            feeds.set(key, offset);
+        }
+        offset.users++;
+        return offset;
+    }
+    release(source, key) {
+        const feeds = this.offsets.get(source);
+        const offset = feeds?.get(key);
+        if (!feeds || !offset || --offset.users > 0)
+            return;
+        feeds.delete(key);
+        if (feeds.size === 0)
+            this.offsets.delete(source);
+        for (const event of offset.feed.events) {
+            this.native.API.removeAnimatedEventFromView(offset.viewTag, event, offset.value);
+        }
+        this.native.API.dropAnimatedNode(offset.value);
+    }
+    build(value, viewTag, property, drive, statics) {
+        const { API } = this.native;
+        const range = drive.range;
+        const interpolation = this.native.generateNewNodeTag();
+        API.createAnimatedNode(interpolation, {
+            type: 'interpolation',
+            inputRange: [...range.input],
+            outputRange: [...range.output],
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+        });
+        let shift = null;
+        let sum = null;
+        if (drive.shift !== null) {
+            shift = this.native.generateNewNodeTag();
+            API.createAnimatedNode(shift, { type: 'value', value: drive.shift, offset: 0 });
+            sum = this.native.generateNewNodeTag();
+            API.createAnimatedNode(sum, { type: 'addition', input: [interpolation, shift] });
+        }
+        const transform = this.native.generateNewNodeTag();
+        API.createAnimatedNode(transform, {
+            type: 'transform',
+            transforms: [
+                {
+                    type: 'animated',
+                    property,
+                    nodeTag: sum ?? interpolation,
+                },
+                ...statics.flatMap((entry) => Object.entries(entry).map(([property, amount]) => ({
+                    type: 'static',
+                    property,
+                    value: amount,
+                }))),
+            ],
+        });
+        // A style node between, as `Animated` builds it: RN's props node on iOS reads its values from
+        // a style node and ignores a transform node connected to it directly.
+        const style = this.native.generateNewNodeTag();
+        API.createAnimatedNode(style, { type: 'style', style: { transform } });
+        const props = this.native.generateNewNodeTag();
+        API.createAnimatedNode(props, { type: 'props', props: { style } });
+        API.connectAnimatedNodes(value, interpolation);
+        if (shift !== null && sum !== null) {
+            API.connectAnimatedNodes(interpolation, sum);
+            API.connectAnimatedNodes(shift, sum);
+            API.connectAnimatedNodes(sum, transform);
+        }
+        else {
+            API.connectAnimatedNodes(interpolation, transform);
+        }
+        API.connectAnimatedNodes(transform, style);
+        API.connectAnimatedNodes(style, props);
+        API.connectAnimatedNodeToView(props, viewTag);
+        return { interpolation, shift, sum, transform, style, props };
+    }
+    tearDown(nodes, viewTag) {
+        const { API } = this.native;
+        API.disconnectAnimatedNodeFromView(nodes.props, viewTag);
+        API.dropAnimatedNode(nodes.props);
+        API.dropAnimatedNode(nodes.style);
+        API.dropAnimatedNode(nodes.transform);
+        if (nodes.sum !== null)
+            API.dropAnimatedNode(nodes.sum);
+        if (nodes.shift !== null)
+            API.dropAnimatedNode(nodes.shift);
+        API.dropAnimatedNode(nodes.interpolation);
+    }
+    flush() {
+        this.native.API.flushQueue?.();
+    }
+}
+function feedKey(feed) {
+    return `${feed.events.join(',')}:${feed.path.join('.')}`;
+}
+/** A scroll view's offset along an axis, as `onScroll` carries it. */
+export function scrollFeed(axis) {
+    return { events: ['onScroll'], path: ['contentOffset', axis] };
+}
+function sameRange(a, b) {
+    return (a.input.length === b.input.length &&
+        a.input.every((value, i) => value === b.input[i]) &&
+        a.output.every((value, i) => value === b.output[i]));
+}
+/**
+ * The translate a pinned view needs at each scroll offset: none until the offset reaches where
+ * the view starts, then the offset past that, until `until`, where the next pinned view pushes it
+ * off and it stays. `start` and `until` are in the scroll view's own coordinates.
+ */
+export function pinnedRange(start, until = Infinity) {
+    if (!Number.isFinite(until) || until <= start) {
+        // A large finite end, since native interpolation takes numbers and extends nothing here.
+        return { input: [start, start + 1e7], output: [0, 1e7] };
+    }
+    return { input: [start, until], output: [0, until - start] };
+}
+//# sourceMappingURL=native-drive.js.map

package/dist/native-drive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-drive.js","sourceRoot":"","sources":["../src/native-drive.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * A view moved by a scroll view's offset on the native side, with no JavaScript in between.\n *\n * A sticky header moved by a transform set from each scroll event lags the scroll: the event\n * reaches JavaScript, the transform is committed, and by the time Fabric mounts it the content has\n * moved on, so on a fast fling the header shudders and comes away from the edge it is pinned to.\n * React Native's own sticky headers do not, because `ScrollViewStickyHeader` maps the offset onto\n * an animated value on the native side and interpolates the header's translate from it there.\n * This is that mapping, for the engine's nodes: the scroll view's offset along one axis feeds a\n * value, the value an interpolation, the interpolation a translate, and native applies it on every\n * frame the scroll view moves.\n *\n * It goes through React Native's own `NativeAnimatedHelper`, whose node tags every other animated\n * value in the app also comes from, so none of them can collide.\n */\n\n/** The part of React Native's `NativeAnimatedHelper` default export this uses. */\nexport interface NativeAnimated {\n  generateNewNodeTag(): number;\n  readonly API: {\n    createAnimatedNode(tag: number, config: object): void;\n    connectAnimatedNodes(parentTag: number, childTag: number): void;\n    disconnectAnimatedNodes(parentTag: number, childTag: number): void;\n    connectAnimatedNodeToView(nodeTag: number, viewTag: number): void;\n    disconnectAnimatedNodeFromView(nodeTag: number, viewTag: number): void;\n    dropAnimatedNode(tag: number): void;\n    addAnimatedEventToView(\n      viewTag: number,\n      eventName: string,\n      mapping: { nativeEventPath: string[]; animatedValueTag: number },\n    ): void;\n    removeAnimatedEventFromView(viewTag: number, eventName: string, nodeTag: number): void;\n    setAnimatedNodeValue(nodeTag: number, value: number): void;\n    flushQueue?(): void;\n  };\n}\n\nimport type { DrivenChannels } from './scroll-animation.ts';\n\nexport type ScrollAxis = 'x' | 'y';\n\n/** A native event that feeds a value: the events carrying it, and the path to it in each. */\nexport interface EventFeed {\n  readonly events: readonly string[];\n  readonly path: readonly string[];\n}\n\n/** What a driven view moves along. */\nexport type DrivenProperty = 'translateX' | 'translateY';\n\n/** Where a driven view sits for each scroll offset, as an interpolation clamped at both ends. */\nexport interface ScrollRange {\n  readonly input: readonly number[];\n  readonly output: readonly number[];\n}\n\n/** A transform native keeps beside the driven translate, such as an inverted list's flip. */\nexport type StaticTransform = Readonly<Record<string, number>>;\n\n/**\n * A view moved by a scroll. `update` moves it by a new range; `shift` adds an amount to where the\n * range puts it, for a drive made with one; `stop` lets it go.\n */\nexport interface ScrollDrive {\n  update(range: ScrollRange): void;\n  shift(amount: number): void;\n  stop(): void;\n}\n\ninterface Offset {\n  readonly value: number;\n  readonly viewTag: number;\n  readonly feed: EventFeed;\n  users: number;\n}\n\ninterface Nodes {\n  interpolation: number;\n  /** The shift JavaScript sets, and the sum of it and the interpolation, for a shifted drive. */\n  shift: number | null;\n  sum: number | null;\n  transform: number;\n  style: number;\n  props: number;\n}\n\ninterface Drive {\n  viewTag: number | null;\n  range: ScrollRange;\n  /** The amount added to the range's translate, or null for a drive without one. */\n  shift: number | null;\n  nodes: Nodes | null;\n  stopped: boolean;\n}\n\nexport class NativeScrollDriver {\n  private readonly native: NativeAnimated;\n  /** One value per source view and feed, by the feed's key. */\n  private readonly offsets = new Map<object, Map<string, Offset>>();\n  private readonly pending = new Set<() => boolean>();\n\n  constructor(native: NativeAnimated) {\n    this.native = native;\n  }\n\n  /**\n   * Move a view by a scroll. `tagOf` answers a node's view tag once it has been committed, and\n   * null before, which is why the connection may wait for a commit: `connect` is tried again by\n   * `afterCommit` until both views exist.\n   */\n  drive(\n    view: object,\n    source: object,\n    feed: EventFeed,\n    property: DrivenProperty,\n    range: ScrollRange,\n    statics: readonly StaticTransform[],\n    tagOf: (node: object) => number | null,\n    shift: number | null = null,\n  ): ScrollDrive {\n    const drive: Drive = { viewTag: null, range, shift, nodes: null, stopped: false };\n    const key = feedKey(feed);\n    const connect = (): boolean => {\n      if (drive.stopped) return true;\n      const viewTag = tagOf(view);\n      const sourceTag = tagOf(source);\n      if (viewTag === null || sourceTag === null) return false;\n      drive.viewTag = viewTag;\n      const offset = this.offset(source, sourceTag, feed, key);\n      drive.nodes = this.build(offset.value, viewTag, property, drive, statics);\n      this.flush();\n      return true;\n    };\n    if (!connect()) this.pending.add(connect);\n    return {\n      update: (next) => {\n        if (drive.stopped || sameRange(drive.range, next)) return;\n        drive.range = next;\n        if (!drive.nodes || drive.viewTag === null) return;\n        this.tearDown(drive.nodes, drive.viewTag);\n        const offset = this.offsets.get(source)!.get(key)!;\n        drive.nodes = this.build(offset.value, drive.viewTag, property, drive, statics);\n        this.flush();\n      },\n      shift: (amount) => {\n        if (drive.stopped || drive.shift === null || drive.shift === amount) return;\n        drive.shift = amount;\n        if (drive.nodes?.shift == null) return;\n        this.native.API.setAnimatedNodeValue(drive.nodes.shift, amount);\n        this.flush();\n      },\n      stop: () => {\n        if (drive.stopped) return;\n        drive.stopped = true;\n        this.pending.delete(connect);\n        if (!drive.nodes || drive.viewTag === null) return;\n        this.tearDown(drive.nodes, drive.viewTag);\n        this.release(source, key);\n        this.flush();\n      },\n    };\n  }\n\n  /**\n   * Play a view's opacity and transform by a scroll: each channel an interpolation from the\n   * offset, as `scroll-animation.ts` lays a `@keyframes` animation along it. `update` rebuilds\n   * the channels, when the scroll view says how far it scrolls; `stop` lets the view go.\n   */\n  animate(\n    view: object,\n    source: object,\n    feed: EventFeed,\n    channels: DrivenChannels,\n    tagOf: (node: object) => number | null,\n  ): { update(channels: DrivenChannels): void; stop(): void } {\n    const state = {\n      channels,\n      viewTag: null as number | null,\n      nodes: null as number[] | null,\n      stopped: false,\n    };\n    const key = feedKey(feed);\n    const connect = (): boolean => {\n      if (state.stopped) return true;\n      const viewTag = tagOf(view);\n      const sourceTag = tagOf(source);\n      if (viewTag === null || sourceTag === null) return false;\n      state.viewTag = viewTag;\n      const offset = this.offset(source, sourceTag, feed, key);\n      state.nodes = this.buildChannels(offset.value, viewTag, state.channels);\n      this.flush();\n      return true;\n    };\n    if (!connect()) this.pending.add(connect);\n    return {\n      update: (next) => {\n        if (state.stopped) return;\n        state.channels = next;\n        if (!state.nodes || state.viewTag === null) return;\n        this.dropChannels(state.nodes, state.viewTag);\n        const offset = this.offsets.get(source)!.get(key)!;\n        state.nodes = this.buildChannels(offset.value, state.viewTag, next);\n        this.flush();\n      },\n      stop: () => {\n        if (state.stopped) return;\n        state.stopped = true;\n        this.pending.delete(connect);\n        if (!state.nodes || state.viewTag === null) return;\n        this.dropChannels(state.nodes, state.viewTag);\n        this.release(source, key);\n        this.flush();\n      },\n    };\n  }\n\n  /** The nodes for a set of channels, connected to the view; the props node first. */\n  private buildChannels(value: number, viewTag: number, channels: DrivenChannels): number[] {\n    const { API } = this.native;\n    const made: number[] = [];\n    const interpolation = (range: ScrollRange): number => {\n      const tag = this.native.generateNewNodeTag();\n      API.createAnimatedNode(tag, {\n        type: 'interpolation',\n        inputRange: [...range.input],\n        outputRange: [...range.output],\n        extrapolateLeft: 'clamp',\n        extrapolateRight: 'clamp',\n      });\n      API.connectAnimatedNodes(value, tag);\n      made.push(tag);\n      return tag;\n    };\n    const style: Record<string, number> = {};\n    if (channels.opacity) style['opacity'] = interpolation(channels.opacity);\n    if (channels.transform.length) {\n      const transforms = channels.transform.map((channel) =>\n        'range' in channel\n          ? { type: 'animated', property: channel.property, nodeTag: interpolation(channel.range) }\n          : { type: 'static', property: channel.property, value: channel.value },\n      );\n      const transform = this.native.generateNewNodeTag();\n      API.createAnimatedNode(transform, { type: 'transform', transforms });\n      for (const entry of transforms) {\n        if (entry.type === 'animated') API.connectAnimatedNodes(entry.nodeTag!, transform);\n      }\n      style['transform'] = transform;\n      made.push(transform);\n    }\n    const styleTag = this.native.generateNewNodeTag();\n    API.createAnimatedNode(styleTag, { type: 'style', style });\n    for (const tag of Object.values(style)) API.connectAnimatedNodes(tag, styleTag);\n    const props = this.native.generateNewNodeTag();\n    API.createAnimatedNode(props, { type: 'props', props: { style: styleTag } });\n    API.connectAnimatedNodes(styleTag, props);\n    API.connectAnimatedNodeToView(props, viewTag);\n    return [props, styleTag, ...made.reverse()];\n  }\n\n  private dropChannels(nodes: readonly number[], viewTag: number): void {\n    const { API } = this.native;\n    API.disconnectAnimatedNodeFromView(nodes[0]!, viewTag);\n    for (const tag of nodes) API.dropAnimatedNode(tag);\n  }\n\n  /** Connects every drive still waiting for its views, now that a commit may have made them. */\n  afterCommit(): void {\n    for (const connect of [...this.pending]) if (connect()) this.pending.delete(connect);\n  }\n\n  /** One value per source view and feed, fed by its events, shared by every view it drives. */\n  private offset(source: object, viewTag: number, feed: EventFeed, key: string): Offset {\n    let feeds = this.offsets.get(source);\n    if (!feeds) this.offsets.set(source, (feeds = new Map()));\n    let offset = feeds.get(key);\n    if (!offset) {\n      const value = this.native.generateNewNodeTag();\n      this.native.API.createAnimatedNode(value, { type: 'value', value: 0, offset: 0 });\n      for (const event of feed.events) {\n        this.native.API.addAnimatedEventToView(viewTag, event, {\n          nativeEventPath: [...feed.path],\n          animatedValueTag: value,\n        });\n      }\n      offset = { value, viewTag, feed, users: 0 };\n      feeds.set(key, offset);\n    }\n    offset.users++;\n    return offset;\n  }\n\n  private release(source: object, key: string): void {\n    const feeds = this.offsets.get(source);\n    const offset = feeds?.get(key);\n    if (!feeds || !offset || --offset.users > 0) return;\n    feeds.delete(key);\n    if (feeds.size === 0) this.offsets.delete(source);\n    for (const event of offset.feed.events) {\n      this.native.API.removeAnimatedEventFromView(offset.viewTag, event, offset.value);\n    }\n    this.native.API.dropAnimatedNode(offset.value);\n  }\n\n  private build(\n    value: number,\n    viewTag: number,\n    property: DrivenProperty,\n    drive: Drive,\n    statics: readonly StaticTransform[],\n  ): Nodes {\n    const { API } = this.native;\n    const range = drive.range;\n    const interpolation = this.native.generateNewNodeTag();\n    API.createAnimatedNode(interpolation, {\n      type: 'interpolation',\n      inputRange: [...range.input],\n      outputRange: [...range.output],\n      extrapolateLeft: 'clamp',\n      extrapolateRight: 'clamp',\n    });\n    let shift: number | null = null;\n    let sum: number | null = null;\n    if (drive.shift !== null) {\n      shift = this.native.generateNewNodeTag();\n      API.createAnimatedNode(shift, { type: 'value', value: drive.shift, offset: 0 });\n      sum = this.native.generateNewNodeTag();\n      API.createAnimatedNode(sum, { type: 'addition', input: [interpolation, shift] });\n    }\n    const transform = this.native.generateNewNodeTag();\n    API.createAnimatedNode(transform, {\n      type: 'transform',\n      transforms: [\n        {\n          type: 'animated',\n          property,\n          nodeTag: sum ?? interpolation,\n        },\n        ...statics.flatMap((entry) =>\n          Object.entries(entry).map(([property, amount]) => ({\n            type: 'static',\n            property,\n            value: amount,\n          })),\n        ),\n      ],\n    });\n    // A style node between, as `Animated` builds it: RN's props node on iOS reads its values from\n    // a style node and ignores a transform node connected to it directly.\n    const style = this.native.generateNewNodeTag();\n    API.createAnimatedNode(style, { type: 'style', style: { transform } });\n    const props = this.native.generateNewNodeTag();\n    API.createAnimatedNode(props, { type: 'props', props: { style } });\n    API.connectAnimatedNodes(value, interpolation);\n    if (shift !== null && sum !== null) {\n      API.connectAnimatedNodes(interpolation, sum);\n      API.connectAnimatedNodes(shift, sum);\n      API.connectAnimatedNodes(sum, transform);\n    } else {\n      API.connectAnimatedNodes(interpolation, transform);\n    }\n    API.connectAnimatedNodes(transform, style);\n    API.connectAnimatedNodes(style, props);\n    API.connectAnimatedNodeToView(props, viewTag);\n    return { interpolation, shift, sum, transform, style, props };\n  }\n\n  private tearDown(nodes: Nodes, viewTag: number): void {\n    const { API } = this.native;\n    API.disconnectAnimatedNodeFromView(nodes.props, viewTag);\n    API.dropAnimatedNode(nodes.props);\n    API.dropAnimatedNode(nodes.style);\n    API.dropAnimatedNode(nodes.transform);\n    if (nodes.sum !== null) API.dropAnimatedNode(nodes.sum);\n    if (nodes.shift !== null) API.dropAnimatedNode(nodes.shift);\n    API.dropAnimatedNode(nodes.interpolation);\n  }\n\n  private flush(): void {\n    this.native.API.flushQueue?.();\n  }\n}\n\nfunction feedKey(feed: EventFeed): string {\n  return `${feed.events.join(',')}:${feed.path.join('.')}`;\n}\n\n/** A scroll view's offset along an axis, as `onScroll` carries it. */\nexport function scrollFeed(axis: ScrollAxis): EventFeed {\n  return { events: ['onScroll'], path: ['contentOffset', axis] };\n}\n\nfunction sameRange(a: ScrollRange, b: ScrollRange): boolean {\n  return (\n    a.input.length === b.input.length &&\n    a.input.every((value, i) => value === b.input[i]) &&\n    a.output.every((value, i) => value === b.output[i])\n  );\n}\n\n/**\n * The translate a pinned view needs at each scroll offset: none until the offset reaches where\n * the view starts, then the offset past that, until `until`, where the next pinned view pushes it\n * off and it stays. `start` and `until` are in the scroll view's own coordinates.\n */\nexport function pinnedRange(start: number, until = Infinity): ScrollRange {\n  if (!Number.isFinite(until) || until <= start) {\n    // A large finite end, since native interpolation takes numbers and extends nothing here.\n    return { input: [start, start + 1e7], output: [0, 1e7] };\n  }\n  return { input: [start, until], output: [0, until - start] };\n}\n"]}

package/dist/relative-colour.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A relative colour with a token in it, worked out on device: `oklch(from var(--brand) l c h /
+ * 0.2)`. The compiler settles a relative colour of literals itself; one with a `var()` in it waits
+ * for the token.
+ *
+ * The origin is converted into the function's space, each channel keyword is the number it is
+ * there, on CSS Color 5's scale for it (`r g b` 0 to 255, hsl and hwb's `s l w b` 0 to 100), and
+ * the channels written make the new colour, brought back into sRGB as a mix is.
+ */
+import { type MixSpace } from './color-mix.ts';
+/** A channel: a number, a keyword, or arithmetic on two channels. */
+export type Channel = number | string | readonly [op: '+' | '-' | '*' | '/', Channel, Channel];
+/**
+ * The colour the channels make from `origin`, as the `rgb()` or `rgba()` native reads. Undefined
+ * when the origin is not a colour this can read, such as a platform colour.
+ */
+export declare function relativeColour(space: MixSpace, origin: string, channels: readonly [Channel, Channel, Channel], alpha?: Channel): string | undefined;

package/dist/relative-colour.js

@@ -0,0 +1,71 @@
+/**
+ * A relative colour with a token in it, worked out on device: `oklch(from var(--brand) l c h /
+ * 0.2)`. The compiler settles a relative colour of literals itself; one with a `var()` in it waits
+ * for the token.
+ *
+ * The origin is converted into the function's space, each channel keyword is the number it is
+ * there, on CSS Color 5's scale for it (`r g b` 0 to 255, hsl and hwb's `s l w b` 0 to 100), and
+ * the channels written make the new colour, brought back into sRGB as a mix is.
+ */
+import { into, outOf } from "./color-mix.js";
+import { parseColor } from "./transition.js";
+/** What a keyword's number is, per unit of the space's own coordinate. */
+const SCALES = {
+    srgb: [255, 255, 255],
+    hsl: [1, 100, 100],
+    hwb: [1, 100, 100],
+    lab: [1, 1, 1],
+    lch: [1, 1, 1],
+    oklab: [1, 1, 1],
+    oklch: [1, 1, 1],
+};
+const KEYWORDS = {
+    srgb: ['r', 'g', 'b'],
+    hsl: ['h', 's', 'l'],
+    hwb: ['h', 'w', 'b'],
+    lab: ['l', 'a', 'b'],
+    lch: ['l', 'c', 'h'],
+    oklab: ['l', 'a', 'b'],
+    oklch: ['l', 'c', 'h'],
+};
+/**
+ * The colour the channels make from `origin`, as the `rgb()` or `rgba()` native reads. Undefined
+ * when the origin is not a colour this can read, such as a platform colour.
+ */
+export function relativeColour(space, origin, channels, alpha) {
+    const parsed = parseColor(origin);
+    if (!parsed)
+        return undefined;
+    const [r, g, b, originAlpha] = parsed;
+    const coords = into(space, [r / 255, g / 255, b / 255]);
+    const scale = SCALES[space];
+    const values = { alpha: originAlpha };
+    KEYWORDS[space].forEach((keyword, i) => {
+        // A missing component is zero in relative syntax: a grey has no hue.
+        values[keyword] = Number.isFinite(coords[i]) ? coords[i] * scale[i] : 0;
+    });
+    const made = channels.map((channel, i) => evaluate(channel, values) / scale[i]);
+    const opacity = Math.min(1, Math.max(0, alpha === undefined ? originAlpha : evaluate(alpha, values)));
+    const [red, green, blue] = outOf(space, made).map((c) => Math.round(c * 255));
+    const rounded = Math.round(opacity * 1000) / 1000;
+    return rounded >= 1
+        ? `rgb(${red}, ${green}, ${blue})`
+        : `rgba(${red}, ${green}, ${blue}, ${rounded})`;
+}
+function evaluate(channel, values) {
+    if (typeof channel === 'number')
+        return channel;
+    if (typeof channel === 'string')
+        return values[channel] ?? 0;
+    const [op, a, b] = channel;
+    const left = evaluate(a, values);
+    const right = evaluate(b, values);
+    if (op === '+')
+        return left + right;
+    if (op === '-')
+        return left - right;
+    if (op === '*')
+        return left * right;
+    return left / right;
+}
+//# sourceMappingURL=relative-colour.js.map

package/dist/relative-colour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-colour.js","sourceRoot":"","sources":["../src/relative-colour.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * A relative colour with a token in it, worked out on device: `oklch(from var(--brand) l c h /\n * 0.2)`. The compiler settles a relative colour of literals itself; one with a `var()` in it waits\n * for the token.\n *\n * The origin is converted into the function's space, each channel keyword is the number it is\n * there, on CSS Color 5's scale for it (`r g b` 0 to 255, hsl and hwb's `s l w b` 0 to 100), and\n * the channels written make the new colour, brought back into sRGB as a mix is.\n */\nimport { into, outOf, type MixSpace, type Vector } from './color-mix.ts';\nimport { parseColor } from './transition.ts';\n\n/** A channel: a number, a keyword, or arithmetic on two channels. */\nexport type Channel = number | string | readonly [op: '+' | '-' | '*' | '/', Channel, Channel];\n\n/** What a keyword's number is, per unit of the space's own coordinate. */\nconst SCALES: Record<MixSpace, Vector> = {\n  srgb: [255, 255, 255],\n  hsl: [1, 100, 100],\n  hwb: [1, 100, 100],\n  lab: [1, 1, 1],\n  lch: [1, 1, 1],\n  oklab: [1, 1, 1],\n  oklch: [1, 1, 1],\n};\n\nconst KEYWORDS: Record<MixSpace, readonly [string, string, string]> = {\n  srgb: ['r', 'g', 'b'],\n  hsl: ['h', 's', 'l'],\n  hwb: ['h', 'w', 'b'],\n  lab: ['l', 'a', 'b'],\n  lch: ['l', 'c', 'h'],\n  oklab: ['l', 'a', 'b'],\n  oklch: ['l', 'c', 'h'],\n};\n\n/**\n * The colour the channels make from `origin`, as the `rgb()` or `rgba()` native reads. Undefined\n * when the origin is not a colour this can read, such as a platform colour.\n */\nexport function relativeColour(\n  space: MixSpace,\n  origin: string,\n  channels: readonly [Channel, Channel, Channel],\n  alpha?: Channel,\n): string | undefined {\n  const parsed = parseColor(origin);\n  if (!parsed) return undefined;\n  const [r, g, b, originAlpha] = parsed;\n  const coords = into(space, [r / 255, g / 255, b / 255]);\n  const scale = SCALES[space];\n  const values: Record<string, number> = { alpha: originAlpha };\n  KEYWORDS[space].forEach((keyword, i) => {\n    // A missing component is zero in relative syntax: a grey has no hue.\n    values[keyword] = Number.isFinite(coords[i]) ? coords[i]! * scale[i]! : 0;\n  });\n  const made = channels.map((channel, i) => evaluate(channel, values) / scale[i]!) as Vector;\n  const opacity = Math.min(\n    1,\n    Math.max(0, alpha === undefined ? originAlpha : evaluate(alpha, values)),\n  );\n  const [red, green, blue] = outOf(space, made).map((c) => Math.round(c * 255));\n  const rounded = Math.round(opacity * 1000) / 1000;\n  return rounded >= 1\n    ? `rgb(${red}, ${green}, ${blue})`\n    : `rgba(${red}, ${green}, ${blue}, ${rounded})`;\n}\n\nfunction evaluate(channel: Channel, values: Readonly<Record<string, number>>): number {\n  if (typeof channel === 'number') return channel;\n  if (typeof channel === 'string') return values[channel] ?? 0;\n  const [op, a, b] = channel;\n  const left = evaluate(a, values);\n  const right = evaluate(b, values);\n  if (op === '+') return left + right;\n  if (op === '-') return left - right;\n  if (op === '*') return left * right;\n  return left / right;\n}\n"]}

package/dist/scroll-animation.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A `@keyframes` animation played by a scroll view's offset: `animation-timeline: scroll()`.
+ *
+ * Native interpolates linearly between the points it is given and clamps past both ends, which is
+ * all a scroll-driven animation needs from it once its keyframes are laid along the offset: each
+ * keyframe sits at its share of the range, a segment's timing function is sampled into points
+ * along it, and an unfilled end falls back to the resting value just outside the range. What
+ * native can animate this way is opacity and the transforms; anything else holds its first frame.
+ */
+import type { ScrollRange } from './native-drive.ts';
+import { type AnimationSpec } from './transition.ts';
+type Track = readonly {
+    offset: number;
+    value: unknown;
+}[];
+/** The channels a scroll-driven animation drives natively, in the order native applies them. */
+export interface DrivenChannels {
+    readonly opacity?: ScrollRange;
+    /** Every transform entry the view paints: driven by the scroll, or held as it is. */
+    readonly transform: readonly TransformChannel[];
+}
+export type TransformChannel = {
+    readonly property: string;
+    readonly range: ScrollRange;
+} | {
+    readonly property: string;
+    readonly value: number;
+};
+/** Where the range starts and ends on the scroll view's offset. */
+export declare function rangeOf(spec: AnimationSpec, extent: number | null): [number, number];
+/**
+ * The channels for an animation's tracks over a range, and the properties it cannot drive
+ * natively, which the caller holds at their first frame.
+ */
+export declare function scrollChannels(tracks: ReadonlyMap<string, Track>, spec: AnimationSpec, resting: Readonly<Record<string, unknown>>, range: readonly [number, number]): {
+    channels: DrivenChannels;
+    held: string[];
+};
+/** The values a scroll-driven animation commits: its frame at the offset the view starts at. */
+export declare function firstFrame(tracks: ReadonlyMap<string, Track>, spec: AnimationSpec, range: readonly [number, number]): Record<string, unknown>;
+export {};