@ng-native/fabric 0.0.1 → 0.1.1

package/dist/fabric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fabric.js","sourceRoot":"","sources":["../src/fabric.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,YAAY;IACZ,0BAA0B;IAC1B,uBAAuB;IACvB,kCAAkC;IAClC,aAAa;IACb,gBAAgB;IAChB,kBAAkB;IAClB,cAAc;IACd,sBAAsB;IACtB,kBAAkB;IAClB,iBAAiB;IACjB,iBAAiB;CACoC,CAAC;AAexD,MAAM,UAAU,kBAAkB;IAChC,MAAM,GAAG,GAAI,UAAkE;SAC5E,qBAAqB,CAAC;IAEzB,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,gFAAgF;YAC9E,sDAAsD,CACzD,CAAC;IACJ,CAAC;IAED,gGAAgG;IAChG,4FAA4F;IAC5F,MAAM,MAAM,GAAqE,EAAE,CAAC;IACpF,KAAK,MAAM,IAAI,IAAI,cAAc,EAAE,CAAC;QAClC,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,OAAO,KAAK,KAAK,UAAU;YAAE,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,MAAoC,CAAC;AAC9C,CAAC","sourcesContent":["/**\n * `global.nativeFabricUIManager` is a lazy caching proxy: every property access mints a\n * fresh host function. Read each method exactly once into a plain object (this is what\n * RN's own `FabricUIManager.js` does with its CACHED_PROPERTIES list).\n */\nimport type { FabricUIManager } from './engine.ts';\n\n/**\n * Every method of `FabricUIManager`, and nothing else.\n *\n * A name missing here is `undefined` on device and nowhere else, because the fake the suite runs\n * against implements the interface directly - so every test passes and every device fails. That\n * is not hypothetical: `measureInWindow` was added to the interface and to the engine and left out\n * here, and the anchored overlays it was built for could never have worked.\n *\n * `AllMethodsListed` below is what makes that impossible now rather than merely tested for.\n * Exported because the facade test iterates it: there was a second copy of this list in that file,\n * which is how the two managed to be wrong in the same way at the same time.\n */\nexport const FABRIC_METHODS = [\n  'createNode',\n  'cloneNodeWithNewChildren',\n  'cloneNodeWithNewProps',\n  'cloneNodeWithNewChildrenAndProps',\n  'appendChild',\n  'createChildSet',\n  'appendChildToSet',\n  'completeRoot',\n  'registerEventHandler',\n  'setIsJSResponder',\n  'dispatchCommand',\n  'measureInWindow',\n] as const satisfies readonly (keyof FabricUIManager)[];\n\n/**\n * A method the interface declares and the list above forgets.\n *\n * `satisfies` already checks that every name in the list is a real method. This is the other\n * direction, which is the one that bites: it resolves to `never` when the list is complete, and to\n * the missing name when it is not - so forgetting one is a compile error naming it rather than a\n * silent no-op on every phone.\n */\ntype AssertNever<T extends never> = T;\ntype AllMethodsListed = AssertNever<\n  Exclude<keyof FabricUIManager, (typeof FABRIC_METHODS)[number]>\n>;\n\nexport function getFabricUIManager(): FabricUIManager {\n  const raw = (globalThis as { nativeFabricUIManager?: Record<string, unknown> })\n    .nativeFabricUIManager;\n\n  if (!raw) {\n    throw new Error(\n      'nativeFabricUIManager is not available. The New Architecture must be enabled, ' +\n        'and mount() must run inside an AppRegistry runnable.',\n    );\n  }\n\n  // Typed with the check above, which is `never` when the list is complete and so adds nothing; a\n  // check nothing refers to is an unused local to a consumer compiling with `noUnusedLocals`.\n  const facade: Record<string, unknown> & { [name in AllMethodsListed]?: never } = {};\n  for (const name of FABRIC_METHODS) {\n    const value = raw[name];\n    if (typeof value === 'function') facade[name] = value.bind(raw);\n  }\n  return facade as unknown as FabricUIManager;\n}\n"]}

package/dist/forms-inputs.d.ts

@@ -0,0 +1,15 @@
+/** Whether a name is a forms directive's input, which `reportUnboundFormsInput` reports. */
+export declare function isFormsInput(name: string): boolean;
+/** An element, as far as this report needs one: enough to name it. */
+export interface NamedHostNode {
+    readonly name: string;
+}
+/**
+ * Reports `name` on `el` as an unbound forms directive input, once per `owner`/element/input
+ * triple. A no-op when `name` is not one of `FORMS_INPUTS`, so a caller can run this unconditionally
+ * from `setProperty` without checking first.
+ *
+ * `owner` keys the "already reported" set - each adapter passes its own engine, so two mounted
+ * apps (or two tests) never suppress each other's first report.
+ */
+export declare function reportUnboundFormsInput(owner: object, el: NamedHostNode, name: string): void;

package/dist/forms-inputs.js

@@ -0,0 +1,54 @@
+/**
+ * Inputs of Angular's forms directives, by the directive that takes each and where it comes from,
+ * and the report both `Renderer2` adapters make when one reaches them unclaimed.
+ *
+ * The names and package paths below are the one piece of Angular-specific knowledge in this
+ * package - everything else here stays framework-agnostic, per `ARCHITECTURE.md`. It lives here
+ * anyway, rather than duplicated in `@ng-native/platform` and `@ng-native/web`, because both of
+ * their `Renderer2`s hit exactly the same failure for exactly the same reason and neither imports
+ * the other: a binding reaches `setProperty` only when no directive on the element took it, and
+ * none of these names is a native prop or a DOM one, so one arriving there means the directive
+ * was never imported. Angular would say so on a real `platform-browser` bootstrap - its template
+ * type-checker is not in this build, and neither adapter's runtime check can help, because one
+ * takes any hyphenated element for a web component that may have any property and the other has
+ * no DOM to run its own check against. So `<text-input [formField]>` without `FormField` compiles,
+ * renders, and binds nothing, and the form sits empty and invalid without a word - unless
+ * something says so here.
+ */
+const FORMS_INPUTS = {
+    formField: ['FormField', '@angular/forms/signals'],
+    ngModel: ['FormsModule', '@angular/forms'],
+    formControl: ['ReactiveFormsModule', '@angular/forms'],
+    formControlName: ['ReactiveFormsModule', '@angular/forms'],
+    formGroup: ['ReactiveFormsModule', '@angular/forms'],
+};
+/** Whether a name is a forms directive's input, which `reportUnboundFormsInput` reports. */
+export function isFormsInput(name) {
+    return Object.hasOwn(FORMS_INPUTS, name);
+}
+/** Elements and inputs already reported, per caller, so a list of fields says it once. */
+const reportedInputs = new WeakMap();
+/**
+ * Reports `name` on `el` as an unbound forms directive input, once per `owner`/element/input
+ * triple. A no-op when `name` is not one of `FORMS_INPUTS`, so a caller can run this unconditionally
+ * from `setProperty` without checking first.
+ *
+ * `owner` keys the "already reported" set - each adapter passes its own engine, so two mounted
+ * apps (or two tests) never suppress each other's first report.
+ */
+export function reportUnboundFormsInput(owner, el, name) {
+    const directiveEntry = FORMS_INPUTS[name];
+    if (!directiveEntry)
+        return;
+    const seen = reportedInputs.get(owner) ?? new Set();
+    reportedInputs.set(owner, seen);
+    const key = `${el.name} ${name}`;
+    if (seen.has(key))
+        return;
+    seen.add(key);
+    const [directive, from] = directiveEntry;
+    console.error(`[angular-native] Can't bind to '${name}' on <${el.name}>: no directive in its template ` +
+        `takes it, so it binds nothing. Add ${directive} from '${from}' to the component's ` +
+        `\`imports\`.`);
+}
+//# sourceMappingURL=forms-inputs.js.map

package/dist/forms-inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms-inputs.js","sourceRoot":"","sources":["../src/forms-inputs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,YAAY,GAAyE;IACzF,SAAS,EAAE,CAAC,WAAW,EAAE,wBAAwB,CAAC;IAClD,OAAO,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC;IAC1C,WAAW,EAAE,CAAC,qBAAqB,EAAE,gBAAgB,CAAC;IACtD,eAAe,EAAE,CAAC,qBAAqB,EAAE,gBAAgB,CAAC;IAC1D,SAAS,EAAE,CAAC,qBAAqB,EAAE,gBAAgB,CAAC;CACrD,CAAC;AAEF,4FAA4F;AAC5F,MAAM,UAAU,YAAY,CAAC,IAAY;IACvC,OAAO,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;AAC3C,CAAC;AAOD,0FAA0F;AAC1F,MAAM,cAAc,GAAG,IAAI,OAAO,EAAuB,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAa,EAAE,EAAiB,EAAE,IAAY;IACpF,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAI,CAAC,cAAc;QAAE,OAAO;IAC5B,MAAM,IAAI,GAAG,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,GAAG,EAAU,CAAC;IAC5D,cAAc,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAChC,MAAM,GAAG,GAAG,GAAG,EAAE,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;IACjC,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,OAAO;IAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,cAAc,CAAC;IACzC,OAAO,CAAC,KAAK,CACX,mCAAmC,IAAI,SAAS,EAAE,CAAC,IAAI,kCAAkC;QACvF,sCAAsC,SAAS,UAAU,IAAI,uBAAuB;QACpF,cAAc,CACjB,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Inputs of Angular's forms directives, by the directive that takes each and where it comes from,\n * and the report both `Renderer2` adapters make when one reaches them unclaimed.\n *\n * The names and package paths below are the one piece of Angular-specific knowledge in this\n * package - everything else here stays framework-agnostic, per `ARCHITECTURE.md`. It lives here\n * anyway, rather than duplicated in `@ng-native/platform` and `@ng-native/web`, because both of\n * their `Renderer2`s hit exactly the same failure for exactly the same reason and neither imports\n * the other: a binding reaches `setProperty` only when no directive on the element took it, and\n * none of these names is a native prop or a DOM one, so one arriving there means the directive\n * was never imported. Angular would say so on a real `platform-browser` bootstrap - its template\n * type-checker is not in this build, and neither adapter's runtime check can help, because one\n * takes any hyphenated element for a web component that may have any property and the other has\n * no DOM to run its own check against. So `<text-input [formField]>` without `FormField` compiles,\n * renders, and binds nothing, and the form sits empty and invalid without a word - unless\n * something says so here.\n */\nconst FORMS_INPUTS: Readonly<Record<string, readonly [directive: string, from: string]>> = {\n  formField: ['FormField', '@angular/forms/signals'],\n  ngModel: ['FormsModule', '@angular/forms'],\n  formControl: ['ReactiveFormsModule', '@angular/forms'],\n  formControlName: ['ReactiveFormsModule', '@angular/forms'],\n  formGroup: ['ReactiveFormsModule', '@angular/forms'],\n};\n\n/** Whether a name is a forms directive's input, which `reportUnboundFormsInput` reports. */\nexport function isFormsInput(name: string): boolean {\n  return Object.hasOwn(FORMS_INPUTS, name);\n}\n\n/** An element, as far as this report needs one: enough to name it. */\nexport interface NamedHostNode {\n  readonly name: string;\n}\n\n/** Elements and inputs already reported, per caller, so a list of fields says it once. */\nconst reportedInputs = new WeakMap<object, Set<string>>();\n\n/**\n * Reports `name` on `el` as an unbound forms directive input, once per `owner`/element/input\n * triple. A no-op when `name` is not one of `FORMS_INPUTS`, so a caller can run this unconditionally\n * from `setProperty` without checking first.\n *\n * `owner` keys the \"already reported\" set - each adapter passes its own engine, so two mounted\n * apps (or two tests) never suppress each other's first report.\n */\nexport function reportUnboundFormsInput(owner: object, el: NamedHostNode, name: string): void {\n  const directiveEntry = FORMS_INPUTS[name];\n  if (!directiveEntry) return;\n  const seen = reportedInputs.get(owner) ?? new Set<string>();\n  reportedInputs.set(owner, seen);\n  const key = `${el.name} ${name}`;\n  if (seen.has(key)) return;\n  seen.add(key);\n  const [directive, from] = directiveEntry;\n  console.error(\n    `[angular-native] Can't bind to '${name}' on <${el.name}>: no directive in its template ` +\n      `takes it, so it binds nothing. Add ${directive} from '${from}' to the component's ` +\n      `\\`imports\\`.`,\n  );\n}\n"]}

package/dist/host.d.ts

@@ -0,0 +1,133 @@
+/**
+ * The contract the shared packages actually depend on, rather than the Fabric implementation.
+ *
+ * `@ng-native/components` is meant to be renderer-agnostic: it describes a view and a press,
+ * and leaves the drawing to a host. In practice they were coupled to Fabric twice over - `inject(Engine)`, which is a concrete
+ * class whose constructor wants a `FabricUIManager`, and `EngineNode`, which is a Fabric tree
+ * node. A web prototype could only satisfy both by casting a hand-written object through
+ * `as unknown as Engine`, which typechecks and tells you nothing.
+ *
+ * So this is the seam, measured rather than guessed: every `engine.*` call and every `node.*`
+ * field those three packages actually make, and nothing else. `Engine` implements `HostEngine` and
+ * `EngineNode` extends `HostNode`, so nothing about the native path changes; a browser host
+ * implements the same two and needs no cast.
+ *
+ * It lives in this package because everything already imports from here and importing it costs a
+ * web build nothing - the Fabric bindings are reached lazily, through a global the browser does
+ * not have. If that stops being true, moving these two declarations to a package of their own is
+ * mechanical: nothing here refers to Fabric.
+ *
+ * ## What is deliberately not in it
+ *
+ * `tagOf` and `shadowNodeOf` hand out Fabric's own handles, for Reanimated worklets and
+ * react-native-gesture-handler. The three components that use them - `worklet-style`,
+ * `worklet-scroll` and `native-gesture` - inject the concrete `Engine` and are native-only by
+ * nature, which is the honest place to draw that line rather than pretending a browser could
+ * answer.
+ */
+import type { DrivenProperty, EventFeed, ScrollAxis, ScrollDrive, ScrollRange, StaticTransform } from './native-drive.ts';
+import type { ResponderHandlers, WindowFrame } from './engine.ts';
+/** What a host node has to be able to answer. `EngineNode` and a DOM element both can. */
+export interface HostNode {
+    /** `element` or `text`, so a caller can tell a node from the words inside it. */
+    readonly kind: string;
+    /**
+     * The props the host is holding for this node.
+     *
+     * A real bag rather than an accessor, because `ViewBase` deletes from it: an input that a
+     * directive consumes has to stop being an attribute the host writes through.
+     */
+    props: Record<string, unknown>;
+    /** The text, when `kind` is `text`. Empty otherwise. */
+    text: string;
+    children: readonly HostNode[];
+    parent: HostNode | null;
+    /**
+     * Set by `claimHost` from every host primitive's constructor, so a host can tell an element a
+     * component owns from a bare one somebody wrote by hand.
+     *
+     * Part of the contract rather than a Fabric detail, because the shared packages are what set
+     * it: `ViewBase`'s constructor calls `claimHost` on every element it hosts. What a host does
+     * with it is its own business - Fabric warns about an unclaimed primitive name, and a browser
+     * has nothing to warn about.
+     */
+    claimed?: true;
+    /**
+     * The engine that made this node, when the host can say. A primitive reads it rather than
+     * injecting `HostEngine`, because that lookup walks every element injector up to the root and
+     * runs once per element on screen. A host whose nodes cannot carry it leaves it out, and the
+     * primitive injects as before.
+     */
+    readonly host?: HostEngine;
+}
+/** Something that writes its node's props once it has its inputs. See `HostEngine.settle`. */
+export interface Settling {
+    settleProps(): void;
+}
+/**
+ * What a host has to be able to do.
+ *
+ * An abstract class rather than an interface plus an `InjectionToken`, because Angular can inject
+ * an abstract class directly and the alternative is two names for one thing.
+ */
+export declare abstract class HostEngine {
+    /** Write a prop. `undefined` and `null` both clear it, which is how native says "default". */
+    abstract setProp(node: HostNode, key: string, value: unknown): void;
+    /** Listen for one of the host's own events. Returns its own teardown. */
+    abstract setEventListener(node: HostNode, topLevelType: string, fn: (event: unknown) => void): () => void;
+    /** Claim gestures on a node, through whatever arbitration the host has. */
+    abstract setResponder(node: HostNode, handlers: ResponderHandlers): () => void;
+    /** Where the node is on screen, asynchronously, because native answers on its own thread. */
+    abstract measure(node: HostNode, into: (frame: WindowFrame) => void): void;
+    /** Tell a native view to do something imperative: scroll, focus, blur. */
+    abstract dispatchCommand(node: HostNode, name: string, args?: readonly unknown[]): void;
+    /** Flush pending work. Native batches; a browser may not need to. */
+    abstract commit(): boolean;
+    /** The node holding focus, or null. Verified to still be attached before it is handed back. */
+    abstract get focused(): HostNode | null;
+    /** Turn whatever an app passed as an image source into what the host wants. */
+    abstract resolveAsset(value: unknown): unknown;
+    /** Turn a colour the app wrote into whatever the host draws with. */
+    abstract color(value: unknown): unknown;
+    /**
+     * Call `target.settleProps()` before the next commit, once the element's static inputs are set.
+     *
+     * A host primitive writes its props from `ngOnChanges` and `ngOnInit`, which run in its parent
+     * view's update pass. A parent that detaches itself before its first check never has one, so
+     * without this its pressables would take no press and carry no role or `testID`, where on the
+     * web a listener and an attribute are there from creation. The default settles in a microtask,
+     * for a host with no commit of its own to hang it on.
+     */
+    settle(target: Settling): void;
+    /**
+     * Measure a node again from what native now holds for it, in a commit of its own. For a host
+     * that measures when content changes, as a browser does, there is nothing to do.
+     */
+    remeasure(_node: HostNode): void;
+    /**
+     * Take the user to a node: a text input gets the cursor, and anything else is brought on
+     * screen. What a DOM element's own `focus()` does, for code that calls it on an element.
+     */
+    focus(_node: HostNode): void;
+    /**
+     * Scroll whatever the node is in just far enough to show all of it; `visibleBottom` is where in
+     * the window the visible area ends, when something such as the keyboard covers its bottom.
+     */
+    reveal(_node: HostNode, _options?: {
+        visibleBottom?: number;
+        margin?: number;
+    }): void;
+    /** Whether `driveByScroll` moves views on the native side. A host without it moves nothing. */
+    get drivesScroll(): boolean;
+    /**
+     * Move `view` by `scroll`'s offset along `axis` on the native side, through `range`, keeping
+     * `statics` in its transform. Null when the host cannot, and the caller moves the view itself.
+     */
+    driveByScroll(_view: HostNode, _scroll: HostNode, _axis: ScrollAxis, _range: ScrollRange, _statics?: readonly StaticTransform[]): ScrollDrive | null;
+    /**
+     * Move `view` by a value `source`'s native events carry, such as a keyboard's height, on the
+     * native side, plus `shift` when one is given, which `ScrollDrive.shift` changes. Null when the
+     * host cannot. See `driveByScroll`.
+     */
+    driveByEvent(_view: HostNode, _source: HostNode, _feed: EventFeed, _property: DrivenProperty, _range: ScrollRange, _statics?: readonly StaticTransform[], _shift?: number | null): ScrollDrive | null;
+}

package/dist/host.js

@@ -0,0 +1,55 @@
+/**
+ * What a host has to be able to do.
+ *
+ * An abstract class rather than an interface plus an `InjectionToken`, because Angular can inject
+ * an abstract class directly and the alternative is two names for one thing.
+ */
+export class HostEngine {
+    /**
+     * Call `target.settleProps()` before the next commit, once the element's static inputs are set.
+     *
+     * A host primitive writes its props from `ngOnChanges` and `ngOnInit`, which run in its parent
+     * view's update pass. A parent that detaches itself before its first check never has one, so
+     * without this its pressables would take no press and carry no role or `testID`, where on the
+     * web a listener and an attribute are there from creation. The default settles in a microtask,
+     * for a host with no commit of its own to hang it on.
+     */
+    settle(target) {
+        queueMicrotask(() => target.settleProps());
+    }
+    /**
+     * Measure a node again from what native now holds for it, in a commit of its own. For a host
+     * that measures when content changes, as a browser does, there is nothing to do.
+     */
+    remeasure(_node) { }
+    /**
+     * Take the user to a node: a text input gets the cursor, and anything else is brought on
+     * screen. What a DOM element's own `focus()` does, for code that calls it on an element.
+     */
+    focus(_node) { }
+    /**
+     * Scroll whatever the node is in just far enough to show all of it; `visibleBottom` is where in
+     * the window the visible area ends, when something such as the keyboard covers its bottom.
+     */
+    reveal(_node, _options) { }
+    /** Whether `driveByScroll` moves views on the native side. A host without it moves nothing. */
+    get drivesScroll() {
+        return false;
+    }
+    /**
+     * Move `view` by `scroll`'s offset along `axis` on the native side, through `range`, keeping
+     * `statics` in its transform. Null when the host cannot, and the caller moves the view itself.
+     */
+    driveByScroll(_view, _scroll, _axis, _range, _statics) {
+        return null;
+    }
+    /**
+     * Move `view` by a value `source`'s native events carry, such as a keyboard's height, on the
+     * native side, plus `shift` when one is given, which `ScrollDrive.shift` changes. Null when the
+     * host cannot. See `driveByScroll`.
+     */
+    driveByEvent(_view, _source, _feed, _property, _range, _statics, _shift) {
+        return null;
+    }
+}
+//# sourceMappingURL=host.js.map

package/dist/host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.js","sourceRoot":"","sources":["../src/host.ts"],"names":[],"mappings":"AA4EA;;;;;GAKG;AACH,MAAM,OAAgB,UAAU;IAwB9B;;;;;;;;OAQG;IACH,MAAM,CAAC,MAAgB;QACrB,cAAc,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,CAAC;IAED;;;OAGG;IACH,SAAS,CAAC,KAAe,IAAS,CAAC;IAEnC;;;OAGG;IACH,KAAK,CAAC,KAAe,IAAS,CAAC;IAE/B;;;OAGG;IACH,MAAM,CAAC,KAAe,EAAE,QAAsD,IAAS,CAAC;IAExF,+FAA+F;IAC/F,IAAI,YAAY;QACd,OAAO,KAAK,CAAC;IACf,CAAC;IAED;;;OAGG;IACH,aAAa,CACX,KAAe,EACf,OAAiB,EACjB,KAAiB,EACjB,MAAmB,EACnB,QAAqC;QAErC,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,YAAY,CACV,KAAe,EACf,OAAiB,EACjB,KAAgB,EAChB,SAAyB,EACzB,MAAmB,EACnB,QAAqC,EACrC,MAAsB;QAEtB,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["/**\n * The contract the shared packages actually depend on, rather than the Fabric implementation.\n *\n * `@ng-native/components` is meant to be renderer-agnostic: it describes a view and a press,\n * and leaves the drawing to a host. In practice they were coupled to Fabric twice over - `inject(Engine)`, which is a concrete\n * class whose constructor wants a `FabricUIManager`, and `EngineNode`, which is a Fabric tree\n * node. A web prototype could only satisfy both by casting a hand-written object through\n * `as unknown as Engine`, which typechecks and tells you nothing.\n *\n * So this is the seam, measured rather than guessed: every `engine.*` call and every `node.*`\n * field those three packages actually make, and nothing else. `Engine` implements `HostEngine` and\n * `EngineNode` extends `HostNode`, so nothing about the native path changes; a browser host\n * implements the same two and needs no cast.\n *\n * It lives in this package because everything already imports from here and importing it costs a\n * web build nothing - the Fabric bindings are reached lazily, through a global the browser does\n * not have. If that stops being true, moving these two declarations to a package of their own is\n * mechanical: nothing here refers to Fabric.\n *\n * ## What is deliberately not in it\n *\n * `tagOf` and `shadowNodeOf` hand out Fabric's own handles, for Reanimated worklets and\n * react-native-gesture-handler. The three components that use them - `worklet-style`,\n * `worklet-scroll` and `native-gesture` - inject the concrete `Engine` and are native-only by\n * nature, which is the honest place to draw that line rather than pretending a browser could\n * answer.\n */\nimport type {\n  DrivenProperty,\n  EventFeed,\n  ScrollAxis,\n  ScrollDrive,\n  ScrollRange,\n  StaticTransform,\n} from './native-drive.ts';\nimport type { ResponderHandlers, WindowFrame } from './engine.ts';\n\n/** What a host node has to be able to answer. `EngineNode` and a DOM element both can. */\nexport interface HostNode {\n  /** `element` or `text`, so a caller can tell a node from the words inside it. */\n  readonly kind: string;\n  /**\n   * The props the host is holding for this node.\n   *\n   * A real bag rather than an accessor, because `ViewBase` deletes from it: an input that a\n   * directive consumes has to stop being an attribute the host writes through.\n   */\n  props: Record<string, unknown>;\n  /** The text, when `kind` is `text`. Empty otherwise. */\n  text: string;\n  children: readonly HostNode[];\n  parent: HostNode | null;\n  /**\n   * Set by `claimHost` from every host primitive's constructor, so a host can tell an element a\n   * component owns from a bare one somebody wrote by hand.\n   *\n   * Part of the contract rather than a Fabric detail, because the shared packages are what set\n   * it: `ViewBase`'s constructor calls `claimHost` on every element it hosts. What a host does\n   * with it is its own business - Fabric warns about an unclaimed primitive name, and a browser\n   * has nothing to warn about.\n   */\n  claimed?: true;\n  /**\n   * The engine that made this node, when the host can say. A primitive reads it rather than\n   * injecting `HostEngine`, because that lookup walks every element injector up to the root and\n   * runs once per element on screen. A host whose nodes cannot carry it leaves it out, and the\n   * primitive injects as before.\n   */\n  readonly host?: HostEngine;\n}\n\n/** Something that writes its node's props once it has its inputs. See `HostEngine.settle`. */\nexport interface Settling {\n  settleProps(): void;\n}\n\n/**\n * What a host has to be able to do.\n *\n * An abstract class rather than an interface plus an `InjectionToken`, because Angular can inject\n * an abstract class directly and the alternative is two names for one thing.\n */\nexport abstract class HostEngine {\n  /** Write a prop. `undefined` and `null` both clear it, which is how native says \"default\". */\n  abstract setProp(node: HostNode, key: string, value: unknown): void;\n  /** Listen for one of the host's own events. Returns its own teardown. */\n  abstract setEventListener(\n    node: HostNode,\n    topLevelType: string,\n    fn: (event: unknown) => void,\n  ): () => void;\n  /** Claim gestures on a node, through whatever arbitration the host has. */\n  abstract setResponder(node: HostNode, handlers: ResponderHandlers): () => void;\n  /** Where the node is on screen, asynchronously, because native answers on its own thread. */\n  abstract measure(node: HostNode, into: (frame: WindowFrame) => void): void;\n  /** Tell a native view to do something imperative: scroll, focus, blur. */\n  abstract dispatchCommand(node: HostNode, name: string, args?: readonly unknown[]): void;\n  /** Flush pending work. Native batches; a browser may not need to. */\n  abstract commit(): boolean;\n  /** The node holding focus, or null. Verified to still be attached before it is handed back. */\n  abstract get focused(): HostNode | null;\n  /** Turn whatever an app passed as an image source into what the host wants. */\n  abstract resolveAsset(value: unknown): unknown;\n  /** Turn a colour the app wrote into whatever the host draws with. */\n  abstract color(value: unknown): unknown;\n\n  /**\n   * Call `target.settleProps()` before the next commit, once the element's static inputs are set.\n   *\n   * A host primitive writes its props from `ngOnChanges` and `ngOnInit`, which run in its parent\n   * view's update pass. A parent that detaches itself before its first check never has one, so\n   * without this its pressables would take no press and carry no role or `testID`, where on the\n   * web a listener and an attribute are there from creation. The default settles in a microtask,\n   * for a host with no commit of its own to hang it on.\n   */\n  settle(target: Settling): void {\n    queueMicrotask(() => target.settleProps());\n  }\n\n  /**\n   * Measure a node again from what native now holds for it, in a commit of its own. For a host\n   * that measures when content changes, as a browser does, there is nothing to do.\n   */\n  remeasure(_node: HostNode): void {}\n\n  /**\n   * Take the user to a node: a text input gets the cursor, and anything else is brought on\n   * screen. What a DOM element's own `focus()` does, for code that calls it on an element.\n   */\n  focus(_node: HostNode): void {}\n\n  /**\n   * Scroll whatever the node is in just far enough to show all of it; `visibleBottom` is where in\n   * the window the visible area ends, when something such as the keyboard covers its bottom.\n   */\n  reveal(_node: HostNode, _options?: { visibleBottom?: number; margin?: number }): void {}\n\n  /** Whether `driveByScroll` moves views on the native side. A host without it moves nothing. */\n  get drivesScroll(): boolean {\n    return false;\n  }\n\n  /**\n   * Move `view` by `scroll`'s offset along `axis` on the native side, through `range`, keeping\n   * `statics` in its transform. Null when the host cannot, and the caller moves the view itself.\n   */\n  driveByScroll(\n    _view: HostNode,\n    _scroll: HostNode,\n    _axis: ScrollAxis,\n    _range: ScrollRange,\n    _statics?: readonly StaticTransform[],\n  ): ScrollDrive | null {\n    return null;\n  }\n\n  /**\n   * Move `view` by a value `source`'s native events carry, such as a keyboard's height, on the\n   * native side, plus `shift` when one is given, which `ScrollDrive.shift` changes. Null when the\n   * host cannot. See `driveByScroll`.\n   */\n  driveByEvent(\n    _view: HostNode,\n    _source: HostNode,\n    _feed: EventFeed,\n    _property: DrivenProperty,\n    _range: ScrollRange,\n    _statics?: readonly StaticTransform[],\n    _shift?: number | null,\n  ): ScrollDrive | null {\n    return null;\n  }\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The engine's public surface.
+ *
+ * Nothing here imports Angular, and nothing here may start to: the engine stays
+ * framework-agnostic (see ARCHITECTURE.md), which is what keeps the commit logic testable without Angular in
+ * the loop and a second adapter possible later.
+ *
+ * The CSS runtime lives here rather than in a package of its own because the cascade is driven
+ * from the commit walk - the resolver runs per node, per tick - and because it is as
+ * framework-agnostic as the rest of the engine. The build-time half of CSS is a different
+ * animal and lives in `@ng-native/metro`.
+ */
+export { StyleResolver, matches, styleSheetOf, type AttributeTest, type Combinator, type Compound, type Conditions, type DeferredDeclaration, type GradientTemplate, type HslChannel, type MediaCondition, type NthTest, type RuleIndex, type StyleCache, type StyleRule, type StyleSheet, type StyleTarget, type TokenKind, type TokenValue, } from './css.ts';
+export { EngineIntersectionObserver, installDeferTriggers } from './defer-triggers.ts';
+export { Engine, SyntheticEvent, claimHost, declareNativeProps, markComponentHost, nativePlatform, registerHoist, registerPlatformComponents, registerViewName, type PlatformViewName, viewNameOf, type EngineNode, type EngineOptions, type EngineStats, type FabricNode, type FabricNodeSet, type FabricUIManager, type HoistOptions, type NativeSyntheticEvent, type NodeKind, type ResponderEvent, type ResponderHandlers, type TouchPayload, type ViewNameNode, type WindowFrame, } from './engine.ts';
+export { reportUnboundFormsInput, type NamedHostNode } from './forms-inputs.ts';
+export { HostEngine, type HostNode, type Settling } from './host.ts';
+export { getFabricUIManager } from './fabric.ts';
+export { pinnedRange, type DrivenProperty, type EventFeed, type NativeAnimated, type ScrollAxis, type ScrollDrive, type ScrollRange, type StaticTransform, } from './native-drive.ts';
+export { bezier, interpolate, redirect, sample, settled, step, tracksOf, tween, type AnimationSpec, type Keyframe, type RunningAnimation, type Transition, type TransitionSpec, } from './transition.ts';

package/dist/index.js

@@ -0,0 +1,21 @@
+/**
+ * The engine's public surface.
+ *
+ * Nothing here imports Angular, and nothing here may start to: the engine stays
+ * framework-agnostic (see ARCHITECTURE.md), which is what keeps the commit logic testable without Angular in
+ * the loop and a second adapter possible later.
+ *
+ * The CSS runtime lives here rather than in a package of its own because the cascade is driven
+ * from the commit walk - the resolver runs per node, per tick - and because it is as
+ * framework-agnostic as the rest of the engine. The build-time half of CSS is a different
+ * animal and lives in `@ng-native/metro`.
+ */
+export { StyleResolver, matches, styleSheetOf, } from "./css.js";
+export { EngineIntersectionObserver, installDeferTriggers } from "./defer-triggers.js";
+export { Engine, SyntheticEvent, claimHost, declareNativeProps, markComponentHost, nativePlatform, registerHoist, registerPlatformComponents, registerViewName, viewNameOf, } from "./engine.js";
+export { reportUnboundFormsInput } from "./forms-inputs.js";
+export { HostEngine } from "./host.js";
+export { getFabricUIManager } from "./fabric.js";
+export { pinnedRange, } from "./native-drive.js";
+export { bezier, interpolate, redirect, sample, settled, step, tracksOf, tween, } from "./transition.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EACL,aAAa,EACb,OAAO,EACP,YAAY,GAiBb,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACvF,OAAO,EACL,MAAM,EACN,cAAc,EACd,SAAS,EACT,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,0BAA0B,EAC1B,gBAAgB,EAEhB,UAAU,GAeX,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,uBAAuB,EAAsB,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,UAAU,EAAgC,MAAM,WAAW,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EACL,WAAW,GAQZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,MAAM,EACN,WAAW,EACX,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,GAMN,MAAM,iBAAiB,CAAC","sourcesContent":["/**\n * The engine's public surface.\n *\n * Nothing here imports Angular, and nothing here may start to: the engine stays\n * framework-agnostic (see ARCHITECTURE.md), which is what keeps the commit logic testable without Angular in\n * the loop and a second adapter possible later.\n *\n * The CSS runtime lives here rather than in a package of its own because the cascade is driven\n * from the commit walk - the resolver runs per node, per tick - and because it is as\n * framework-agnostic as the rest of the engine. The build-time half of CSS is a different\n * animal and lives in `@ng-native/metro`.\n */\nexport {\n  StyleResolver,\n  matches,\n  styleSheetOf,\n  type AttributeTest,\n  type Combinator,\n  type Compound,\n  type Conditions,\n  type DeferredDeclaration,\n  type GradientTemplate,\n  type HslChannel,\n  type MediaCondition,\n  type NthTest,\n  type RuleIndex,\n  type StyleCache,\n  type StyleRule,\n  type StyleSheet,\n  type StyleTarget,\n  type TokenKind,\n  type TokenValue,\n} from './css.ts';\nexport { EngineIntersectionObserver, installDeferTriggers } from './defer-triggers.ts';\nexport {\n  Engine,\n  SyntheticEvent,\n  claimHost,\n  declareNativeProps,\n  markComponentHost,\n  nativePlatform,\n  registerHoist,\n  registerPlatformComponents,\n  registerViewName,\n  type PlatformViewName,\n  viewNameOf,\n  type EngineNode,\n  type EngineOptions,\n  type EngineStats,\n  type FabricNode,\n  type FabricNodeSet,\n  type FabricUIManager,\n  type HoistOptions,\n  type NativeSyntheticEvent,\n  type NodeKind,\n  type ResponderEvent,\n  type ResponderHandlers,\n  type TouchPayload,\n  type ViewNameNode,\n  type WindowFrame,\n} from './engine.ts';\nexport { reportUnboundFormsInput, type NamedHostNode } from './forms-inputs.ts';\nexport { HostEngine, type HostNode, type Settling } from './host.ts';\nexport { getFabricUIManager } from './fabric.ts';\nexport {\n  pinnedRange,\n  type DrivenProperty,\n  type EventFeed,\n  type NativeAnimated,\n  type ScrollAxis,\n  type ScrollDrive,\n  type ScrollRange,\n  type StaticTransform,\n} from './native-drive.ts';\nexport {\n  bezier,\n  interpolate,\n  redirect,\n  sample,\n  settled,\n  step,\n  tracksOf,\n  tween,\n  type AnimationSpec,\n  type Keyframe,\n  type RunningAnimation,\n  type Transition,\n  type TransitionSpec,\n} from './transition.ts';\n"]}

package/dist/inline-token.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A custom property's value set on an element at run time, `[style.--tint]="tint()"` or
+ * `style="--gap: 4px"`, as a token the cascade can read.
+ *
+ * A stylesheet's custom properties are converted when the app is built, where there is a CSS
+ * parser (`@ng-native/metro/css/values.cjs`). A bound one only exists here, where there is not,
+ * so this takes the shapes a binding actually holds and nothing more: a length in `px` or `%`, a
+ * number, a colour as React Native writes one, and a word. Anything else is kept as a word, which
+ * a use site that wants a length or a colour ignores, as it ignores an undefined token.
+ */
+import type { TokenValue } from './css.ts';
+export declare function tokenFromValue(value: unknown): TokenValue | undefined;

package/dist/inline-token.js

@@ -0,0 +1,52 @@
+import { isNamedColor } from "./transition.js";
+const PX = /^(-?\d*\.?\d+)px$/;
+const PERCENT = /^-?\d*\.?\d+%$/;
+const NUMBER = /^-?\d*\.?\d+$/;
+/** `#fff`, `rgb()`, `rgba()`, `hsl()`, `hsla()` and `hwb()`: what React Native's `processColor` reads. */
+const COLOR_FUNCTION = /^(#[\da-f]{3,8}|(rgba?|hsla?|hwb)\(.*\))$/i;
+const WORD = /^-?[a-z][\w-]*$/i;
+const WEIGHTS = { normal: '400', bold: '700' };
+/**
+ * CSS takes a bare 0 wherever it takes a length, and no other bare number. A number from 1 to 1000
+ * is a weight as well, at the nearest hundred, which is every weight native draws.
+ */
+function fromNumber(value) {
+    if (!Number.isFinite(value))
+        return undefined;
+    const weight = value >= 1 && value <= 1000
+        ? { weight: String(Math.min(900, Math.max(100, Math.round(value / 100) * 100))) }
+        : {};
+    return value === 0 ? { number: 0, length: 0 } : { number: value, ...weight };
+}
+/**
+ * A word is a keyword, `row`, and may be a colour, `red`, or a weight, `bold`, as well: every form
+ * it can take, as the build-time conversion gives, and a use site reads the one it needs.
+ */
+function fromWord(text) {
+    const weight = WEIGHTS[text.toLowerCase()];
+    return {
+        keyword: text,
+        ...(isNamedColor(text) ? { color: text } : {}),
+        ...(weight ? { weight } : {}),
+    };
+}
+export function tokenFromValue(value) {
+    if (typeof value === 'number')
+        return fromNumber(value);
+    if (typeof value !== 'string')
+        return undefined;
+    const text = value.trim();
+    if (!text)
+        return undefined;
+    const px = PX.exec(text);
+    if (px)
+        return { length: Number(px[1]) };
+    if (PERCENT.test(text))
+        return { length: text };
+    if (NUMBER.test(text))
+        return fromNumber(Number(text));
+    if (COLOR_FUNCTION.test(text))
+        return { color: text };
+    return WORD.test(text) ? fromWord(text) : { keyword: text };
+}
+//# sourceMappingURL=inline-token.js.map

package/dist/inline-token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-token.js","sourceRoot":"","sources":["../src/inline-token.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,EAAE,GAAG,mBAAmB,CAAC;AAC/B,MAAM,OAAO,GAAG,gBAAgB,CAAC;AACjC,MAAM,MAAM,GAAG,eAAe,CAAC;AAC/B,0GAA0G;AAC1G,MAAM,cAAc,GAAG,4CAA4C,CAAC;AACpE,MAAM,IAAI,GAAG,kBAAkB,CAAC;AAChC,MAAM,OAAO,GAA2B,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAEvE;;;GAGG;AACH,SAAS,UAAU,CAAC,KAAa;IAC/B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,SAAS,CAAC;IAC9C,MAAM,MAAM,GACV,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI;QACzB,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE;QACjF,CAAC,CAAC,EAAE,CAAC;IACT,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,EAAE,CAAC;AAC/E,CAAC;AAED;;;GAGG;AACH,SAAS,QAAQ,CAAC,IAAY;IAC5B,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IAC3C,OAAO;QACL,OAAO,EAAE,IAAI;QACb,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9C,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC9B,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAc;IAC3C,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IACxD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,SAAS,CAAC;IAChD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC1B,IAAI,CAAC,IAAI;QAAE,OAAO,SAAS,CAAC;IAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzB,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IAChD,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QAAE,OAAO,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IACvD,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;QAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IACtD,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC9D,CAAC","sourcesContent":["/**\n * A custom property's value set on an element at run time, `[style.--tint]=\"tint()\"` or\n * `style=\"--gap: 4px\"`, as a token the cascade can read.\n *\n * A stylesheet's custom properties are converted when the app is built, where there is a CSS\n * parser (`@ng-native/metro/css/values.cjs`). A bound one only exists here, where there is not,\n * so this takes the shapes a binding actually holds and nothing more: a length in `px` or `%`, a\n * number, a colour as React Native writes one, and a word. Anything else is kept as a word, which\n * a use site that wants a length or a colour ignores, as it ignores an undefined token.\n */\nimport type { TokenValue } from './css.ts';\nimport { isNamedColor } from './transition.ts';\n\nconst PX = /^(-?\\d*\\.?\\d+)px$/;\nconst PERCENT = /^-?\\d*\\.?\\d+%$/;\nconst NUMBER = /^-?\\d*\\.?\\d+$/;\n/** `#fff`, `rgb()`, `rgba()`, `hsl()`, `hsla()` and `hwb()`: what React Native's `processColor` reads. */\nconst COLOR_FUNCTION = /^(#[\\da-f]{3,8}|(rgba?|hsla?|hwb)\\(.*\\))$/i;\nconst WORD = /^-?[a-z][\\w-]*$/i;\nconst WEIGHTS: Record<string, string> = { normal: '400', bold: '700' };\n\n/**\n * CSS takes a bare 0 wherever it takes a length, and no other bare number. A number from 1 to 1000\n * is a weight as well, at the nearest hundred, which is every weight native draws.\n */\nfunction fromNumber(value: number): TokenValue | undefined {\n  if (!Number.isFinite(value)) return undefined;\n  const weight =\n    value >= 1 && value <= 1000\n      ? { weight: String(Math.min(900, Math.max(100, Math.round(value / 100) * 100))) }\n      : {};\n  return value === 0 ? { number: 0, length: 0 } : { number: value, ...weight };\n}\n\n/**\n * A word is a keyword, `row`, and may be a colour, `red`, or a weight, `bold`, as well: every form\n * it can take, as the build-time conversion gives, and a use site reads the one it needs.\n */\nfunction fromWord(text: string): TokenValue {\n  const weight = WEIGHTS[text.toLowerCase()];\n  return {\n    keyword: text,\n    ...(isNamedColor(text) ? { color: text } : {}),\n    ...(weight ? { weight } : {}),\n  };\n}\n\nexport function tokenFromValue(value: unknown): TokenValue | undefined {\n  if (typeof value === 'number') return fromNumber(value);\n  if (typeof value !== 'string') return undefined;\n  const text = value.trim();\n  if (!text) return undefined;\n  const px = PX.exec(text);\n  if (px) return { length: Number(px[1]) };\n  if (PERCENT.test(text)) return { length: text };\n  if (NUMBER.test(text)) return fromNumber(Number(text));\n  if (COLOR_FUNCTION.test(text)) return { color: text };\n  return WORD.test(text) ? fromWord(text) : { keyword: text };\n}\n"]}

package/dist/inline-transform.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A CSS transform string, as the list React Native's Fabric reads.
+ *
+ * A class's transform is compiled to this list at build time. A bound style -
+ * `[style.transform]="'rotate(' + angle + 'deg)'"` - has no build step, and Fabric drops a string
+ * without a word. React Native's JavaScript would have run `processTransform` over it first; there
+ * is none of that JavaScript between this engine and Fabric, so this does the same job.
+ *
+ * Lengths in pixels become numbers, angles and percentages stay strings, as React Native keeps
+ * them. A two-argument `translate`, `scale` or `skew` is split into its axes, and a 2D `matrix()`
+ * is widened to the sixteen values native wants.
+ */
+export type TransformEntry = Readonly<Record<string, number | string | readonly number[]>>;
+export declare function transformList(value: string): TransformEntry[];

package/dist/inline-transform.js

@@ -0,0 +1,41 @@
+const AXES = {
+    translate: ['translateX', 'translateY'],
+    scale: ['scaleX', 'scaleY'],
+    skew: ['skewX', 'skewY'],
+};
+const PX = /^-?\d*\.?\d+(px)?$/;
+function argument(raw) {
+    return PX.test(raw) ? parseFloat(raw) : raw;
+}
+export function transformList(value) {
+    const out = [];
+    if (value.trim() === 'none')
+        return out;
+    for (const [, name, body] of value.matchAll(/([a-zA-Z0-9]+)\(([^)]*)\)/g)) {
+        const args = body
+            .split(/[\s,]+/)
+            .filter(Boolean)
+            .map(argument);
+        const axes = AXES[name];
+        if (axes && args.length === 2) {
+            out.push({ [axes[0]]: args[0] }, { [axes[1]]: args[1] });
+        }
+        else if (axes && name !== 'scale') {
+            // `translate(4px)` and `skew(10deg)` move along the first axis only; `scale(2)` is both,
+            // which React Native spells as a key of its own and falls through to below.
+            out.push({ [axes[0]]: args[0] });
+        }
+        else if (name === 'matrix' && args.length === 6) {
+            const [a, b, c, d, e, f] = args;
+            out.push({ matrix: [a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1] });
+        }
+        else if (name === 'matrix3d') {
+            out.push({ matrix: args });
+        }
+        else {
+            out.push({ [name]: args[0] });
+        }
+    }
+    return out;
+}
+//# sourceMappingURL=inline-transform.js.map

package/dist/inline-transform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-transform.js","sourceRoot":"","sources":["../src/inline-transform.ts"],"names":[],"mappings":"AAcA,MAAM,IAAI,GAAwD;IAChE,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;IACvC,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC3B,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,EAAE,GAAG,oBAAoB,CAAC;AAEhC,SAAS,QAAQ,CAAC,GAAW;IAC3B,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC9C,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAa;IACzC,MAAM,GAAG,GAAqB,EAAE,CAAC;IACjC,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,MAAM;QAAE,OAAO,GAAG,CAAC;IACxC,KAAK,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,4BAA4B,CAAC,EAAE,CAAC;QAC1E,MAAM,IAAI,GAAG,IAAK;aACf,KAAK,CAAC,QAAQ,CAAC;aACf,MAAM,CAAC,OAAO,CAAC;aACf,GAAG,CAAC,QAAQ,CAAC,CAAC;QACjB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAK,CAAC,CAAC;QACzB,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAE,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC;QAC7D,CAAC;aAAM,IAAI,IAAI,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACpC,yFAAyF;YACzF,4EAA4E;YAC5E,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC;QACpC,CAAC;aAAM,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClD,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAgB,CAAC;YAC5C,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAE,EAAE,CAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAE,EAAE,CAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAE,EAAE,CAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/E,CAAC;aAAM,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YAC/B,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAgB,EAAE,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAK,CAAC,EAAE,IAAI,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["/**\n * A CSS transform string, as the list React Native's Fabric reads.\n *\n * A class's transform is compiled to this list at build time. A bound style -\n * `[style.transform]=\"'rotate(' + angle + 'deg)'\"` - has no build step, and Fabric drops a string\n * without a word. React Native's JavaScript would have run `processTransform` over it first; there\n * is none of that JavaScript between this engine and Fabric, so this does the same job.\n *\n * Lengths in pixels become numbers, angles and percentages stay strings, as React Native keeps\n * them. A two-argument `translate`, `scale` or `skew` is split into its axes, and a 2D `matrix()`\n * is widened to the sixteen values native wants.\n */\nexport type TransformEntry = Readonly<Record<string, number | string | readonly number[]>>;\n\nconst AXES: Readonly<Record<string, readonly [string, string]>> = {\n  translate: ['translateX', 'translateY'],\n  scale: ['scaleX', 'scaleY'],\n  skew: ['skewX', 'skewY'],\n};\n\nconst PX = /^-?\\d*\\.?\\d+(px)?$/;\n\nfunction argument(raw: string): number | string {\n  return PX.test(raw) ? parseFloat(raw) : raw;\n}\n\nexport function transformList(value: string): TransformEntry[] {\n  const out: TransformEntry[] = [];\n  if (value.trim() === 'none') return out;\n  for (const [, name, body] of value.matchAll(/([a-zA-Z0-9]+)\\(([^)]*)\\)/g)) {\n    const args = body!\n      .split(/[\\s,]+/)\n      .filter(Boolean)\n      .map(argument);\n    const axes = AXES[name!];\n    if (axes && args.length === 2) {\n      out.push({ [axes[0]]: args[0]! }, { [axes[1]]: args[1]! });\n    } else if (axes && name !== 'scale') {\n      // `translate(4px)` and `skew(10deg)` move along the first axis only; `scale(2)` is both,\n      // which React Native spells as a key of its own and falls through to below.\n      out.push({ [axes[0]]: args[0]! });\n    } else if (name === 'matrix' && args.length === 6) {\n      const [a, b, c, d, e, f] = args as number[];\n      out.push({ matrix: [a!, b!, 0, 0, c!, d!, 0, 0, 0, 0, 1, 0, e!, f!, 0, 1] });\n    } else if (name === 'matrix3d') {\n      out.push({ matrix: args as number[] });\n    } else {\n      out.push({ [name!]: args[0]! });\n    }\n  }\n  return out;\n}\n"]}

package/dist/native-drive.d.ts

@@ -0,0 +1,100 @@
+/**
+ * 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.
+ */
+/** The part of React Native's `NativeAnimatedHelper` default export this uses. */
+export interface NativeAnimated {
+    generateNewNodeTag(): number;
+    readonly API: {
+        createAnimatedNode(tag: number, config: object): void;
+        connectAnimatedNodes(parentTag: number, childTag: number): void;
+        disconnectAnimatedNodes(parentTag: number, childTag: number): void;
+        connectAnimatedNodeToView(nodeTag: number, viewTag: number): void;
+        disconnectAnimatedNodeFromView(nodeTag: number, viewTag: number): void;
+        dropAnimatedNode(tag: number): void;
+        addAnimatedEventToView(viewTag: number, eventName: string, mapping: {
+            nativeEventPath: string[];
+            animatedValueTag: number;
+        }): void;
+        removeAnimatedEventFromView(viewTag: number, eventName: string, nodeTag: number): void;
+        setAnimatedNodeValue(nodeTag: number, value: number): void;
+        flushQueue?(): void;
+    };
+}
+import type { DrivenChannels } from './scroll-animation.ts';
+export type ScrollAxis = 'x' | 'y';
+/** A native event that feeds a value: the events carrying it, and the path to it in each. */
+export interface EventFeed {
+    readonly events: readonly string[];
+    readonly path: readonly string[];
+}
+/** What a driven view moves along. */
+export type DrivenProperty = 'translateX' | 'translateY';
+/** Where a driven view sits for each scroll offset, as an interpolation clamped at both ends. */
+export interface ScrollRange {
+    readonly input: readonly number[];
+    readonly output: readonly number[];
+}
+/** A transform native keeps beside the driven translate, such as an inverted list's flip. */
+export type StaticTransform = Readonly<Record<string, number>>;
+/**
+ * A view moved by a scroll. `update` moves it by a new range; `shift` adds an amount to where the
+ * range puts it, for a drive made with one; `stop` lets it go.
+ */
+export interface ScrollDrive {
+    update(range: ScrollRange): void;
+    shift(amount: number): void;
+    stop(): void;
+}
+export declare class NativeScrollDriver {
+    private readonly native;
+    /** One value per source view and feed, by the feed's key. */
+    private readonly offsets;
+    private readonly pending;
+    constructor(native: NativeAnimated);
+    /**
+     * 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: object, source: object, feed: EventFeed, property: DrivenProperty, range: ScrollRange, statics: readonly StaticTransform[], tagOf: (node: object) => number | null, shift?: number | null): ScrollDrive;
+    /**
+     * 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: object, source: object, feed: EventFeed, channels: DrivenChannels, tagOf: (node: object) => number | null): {
+        update(channels: DrivenChannels): void;
+        stop(): void;
+    };
+    /** The nodes for a set of channels, connected to the view; the props node first. */
+    private buildChannels;
+    private dropChannels;
+    /** Connects every drive still waiting for its views, now that a commit may have made them. */
+    afterCommit(): void;
+    /** One value per source view and feed, fed by its events, shared by every view it drives. */
+    private offset;
+    private release;
+    private build;
+    private tearDown;
+    private flush;
+}
+/** A scroll view's offset along an axis, as `onScroll` carries it. */
+export declare function scrollFeed(axis: ScrollAxis): EventFeed;
+/**
+ * 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 declare function pinnedRange(start: number, until?: number): ScrollRange;