@ng-native/fabric 0.1.3 → 0.3.0

package/dist/host.d.ts

@@ -104,6 +104,13 @@ export declare abstract class HostEngine {
      * that measures when content changes, as a browser does, there is nothing to do.
      */
     remeasure(_node: HostNode): void;
+    /**
+     * Style `node` as an element of the template `like` is written in, rather than of the one that
+     * created it, or as its own again when `like` is null: the content view a scroll view makes for
+     * its children, which the app styles through a class of its own and so from its own component
+     * styles.
+     */
+    adoptScope(_node: HostNode, _like: HostNode | null): 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.

package/dist/host.js

@@ -22,6 +22,13 @@ export class HostEngine {
      * that measures when content changes, as a browser does, there is nothing to do.
      */
     remeasure(_node) { }
+    /**
+     * Style `node` as an element of the template `like` is written in, rather than of the one that
+     * created it, or as its own again when `like` is null: the content view a scroll view makes for
+     * its children, which the app styles through a class of its own and so from its own component
+     * styles.
+     */
+    adoptScope(_node, _like) { }
     /**
      * 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.

package/dist/host.js.map

@@ -1 +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"]}
+{"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;;;;;OAKG;IACH,UAAU,CAAC,KAAe,EAAE,KAAsB,IAAS,CAAC;IAE5D;;;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   * Style `node` as an element of the template `like` is written in, rather than of the one that\n   * created it, or as its own again when `like` is null: the content view a scroll view makes for\n   * its children, which the app styles through a class of its own and so from its own component\n   * styles.\n   */\n  adoptScope(_node: HostNode, _like: HostNode | null): 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

@@ -13,7 +13,7 @@
 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 { faceName } from './font-faces.ts';
-export { Engine, SyntheticEvent, claimHost, declareNativeProps, fontsRegistered, markComponentHost, nativePlatform, onFontsRegistered, 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 { DIRECT_EVENTS, Engine, SyntheticEvent, claimHost, declareNativeProps, fontsRegistered, markComponentHost, nativePlatform, onFontsRegistered, registerHoist, registerPlatformComponents, registerViewName, type PlatformViewName, type ViewNameOptions, 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';

package/dist/index.js

@@ -13,7 +13,7 @@
 export { StyleResolver, matches, styleSheetOf, } from "./css.js";
 export { EngineIntersectionObserver, installDeferTriggers } from "./defer-triggers.js";
 export { faceName } from "./font-faces.js";
-export { Engine, SyntheticEvent, claimHost, declareNativeProps, fontsRegistered, markComponentHost, nativePlatform, onFontsRegistered, registerHoist, registerPlatformComponents, registerViewName, viewNameOf, } from "./engine.js";
+export { DIRECT_EVENTS, Engine, SyntheticEvent, claimHost, declareNativeProps, fontsRegistered, markComponentHost, nativePlatform, onFontsRegistered, registerHoist, registerPlatformComponents, registerViewName, viewNameOf, } from "./engine.js";
 export { reportUnboundFormsInput } from "./forms-inputs.js";
 export { HostEngine } from "./host.js";
 export { getFabricUIManager } from "./fabric.js";

package/dist/index.js.map

@@ -1 +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,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EACL,MAAM,EACN,cAAc,EACd,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,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 docs/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 { faceName } from './font-faces.ts';\nexport {\n  Engine,\n  SyntheticEvent,\n  claimHost,\n  declareNativeProps,\n  fontsRegistered,\n  markComponentHost,\n  nativePlatform,\n  onFontsRegistered,\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"]}
+{"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,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EACL,aAAa,EACb,MAAM,EACN,cAAc,EACd,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,0BAA0B,EAC1B,gBAAgB,EAGhB,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 docs/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 { faceName } from './font-faces.ts';\nexport {\n  DIRECT_EVENTS,\n  Engine,\n  SyntheticEvent,\n  claimHost,\n  declareNativeProps,\n  fontsRegistered,\n  markComponentHost,\n  nativePlatform,\n  onFontsRegistered,\n  registerHoist,\n  registerPlatformComponents,\n  registerViewName,\n  type PlatformViewName,\n  type ViewNameOptions,\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-derived-token.d.ts

@@ -0,0 +1,6 @@
+import type { TokenValue } from './css.ts';
+/**
+ * A value with a `var()` inside it, or a `color-mix()`, as a token made of others; undefined if it
+ * is no such shape.
+ */
+export declare function derivedToken(text: string): TokenValue | undefined;

package/dist/inline-derived-token.js

@@ -0,0 +1,487 @@
+/**
+ * A custom property set on an element to a value with a `var()` inside it,
+ * `[style.--size]="'calc(var(--gap) * 2)'"`, read into the form the same text in a stylesheet is
+ * compiled to, which the cascade then works out where it is set, as it does that one
+ * (`resolveAliases` in css.ts).
+ *
+ * The shapes are the build-time conversion's and no more (`deferCalcToken`, `deferHslToken`,
+ * `deferChannelsToken` and `deferMixToken` in `@ng-native/metro/css/compile.cjs`): `calc()`,
+ * `min()` or `max()` of numbers, lengths in `px` or `rem`, angles, times and `var()`, with + - * /
+ * and brackets; an `hsl()` with a `var()` for a channel; `rgb()` or `hsl()` of one channels token,
+ * with an alpha written or tokened; and a `color-mix()` of any of these colours, tokens and
+ * colours written out. Anything else is undefined, as a stylesheet refuses it.
+ */
+import { MIX_SPACES } from "./color-mix.js";
+import { tokenFromValue } from "./inline-token.js";
+const SPACE = /\s*/y;
+const FUNCTION = /([a-z][a-z-]*)\(\s*/iy;
+const VAR = /var\(\s*(--[\w-]+)\s*/iy;
+const LITERAL = /([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(%|[a-z]+)?/iy;
+const WORD = /[^\s,/()]+/y;
+/** A fallback that is a `var()` or arithmetic, rather than a value written out. */
+const NESTED = /^\s*(var|calc|min|max)\(/i;
+/** What one of each unit counts as: points, degrees, milliseconds, or itself. */
+const PER_UNIT = {
+    '': 1,
+    px: 1,
+    rem: 16,
+    deg: 1,
+    grad: 0.9,
+    rad: 180 / Math.PI,
+    turn: 360,
+    ms: 1,
+    s: 1000,
+};
+const PERCENTAGE = /([+-]?(?:\d+\.?\d*|\.\d+))%/y;
+const HUE_UNITS = new Set(['', 'deg', 'grad', 'rad', 'turn']);
+const HUE_METHODS = new Set(['shorter', 'longer', 'increasing', 'decreasing']);
+const MATH = new Set(['calc', 'min', 'max']);
+const SPACES = {
+    rgb: 'rgb',
+    rgba: 'rgb',
+    hsl: 'hsl',
+    hsla: 'hsl',
+};
+/** Thrown where the text stops being one of the shapes, and caught by `whole`. */
+const UNREADABLE = new Error('not a token made of others');
+const fail = () => {
+    throw UNREADABLE;
+};
+function match(cursor, pattern) {
+    pattern.lastIndex = cursor.at;
+    const found = pattern.exec(cursor.text);
+    if (found)
+        cursor.at = pattern.lastIndex;
+    return found;
+}
+/** Whether the next character, past any space, is `char`; taken, with the space after it, if so. */
+function take(cursor, char) {
+    match(cursor, SPACE);
+    if (cursor.text[cursor.at] !== char)
+        return false;
+    cursor.at++;
+    match(cursor, SPACE);
+    return true;
+}
+function expect(cursor, char) {
+    if (!take(cursor, char))
+        fail();
+}
+/** The whole text as `read` reads it, or undefined when it is not that shape. */
+function whole(text, read) {
+    const cursor = { text, at: 0 };
+    try {
+        const value = read(cursor);
+        match(cursor, SPACE);
+        return cursor.at === text.length ? value : undefined;
+    }
+    catch (error) {
+        if (error === UNREADABLE)
+            return undefined;
+        throw error;
+    }
+}
+/** A `var()` from its name on, to the bracket that closes it. */
+function reference(cursor, name) {
+    if (take(cursor, ')'))
+        return { reference: name };
+    expect(cursor, ',');
+    const start = cursor.at;
+    for (let depth = 0; cursor.at < cursor.text.length; cursor.at++) {
+        const char = cursor.text[cursor.at];
+        if (char === '(')
+            depth++;
+        else if (char === ')' && depth-- === 0)
+            break;
+    }
+    const fallback = cursor.text.slice(start, cursor.at);
+    expect(cursor, ')');
+    return { reference: name, fallback };
+}
+/** A fallback's token. One that is another `var()` is refused, as the compiler refuses it. */
+function fallbackToken(text) {
+    const token = text === undefined ? undefined : tokenFromValue(text);
+    return token?.alias ? fail() : token;
+}
+/** A number, length, angle or time, as the number its slot counts in. */
+function literal(cursor, units) {
+    const found = match(cursor, LITERAL) ?? fail();
+    return Number(found[1]) * (units((found[2] ?? '').toLowerCase()) ?? fail());
+}
+/** A number slot takes a percentage as a fraction, which a length slot cannot work out. */
+const unitsOf = (kind) => (unit) => unit === '%' ? (kind === 'number' ? 0.01 : undefined) : PER_UNIT[unit];
+function sum(cursor, kind) {
+    let value = product(cursor, kind);
+    for (let op; (op = ['+', '-'].find((char) => take(cursor, char)));) {
+        value = [op, value, product(cursor, kind)];
+    }
+    return value;
+}
+function product(cursor, kind) {
+    let value = factor(cursor, kind);
+    for (let op; (op = ['*', '/'].find((char) => take(cursor, char)));) {
+        value = [op, value, factor(cursor, kind)];
+    }
+    return value;
+}
+function factor(cursor, kind) {
+    if (take(cursor, '(')) {
+        const value = sum(cursor, kind);
+        expect(cursor, ')');
+        return value;
+    }
+    const name = match(cursor, VAR)?.[1];
+    if (name) {
+        const value = leafFallback(reference(cursor, name).fallback, kind);
+        return value === undefined ? { reference: name } : { reference: name, fallback: value };
+    }
+    const fn = match(cursor, FUNCTION)?.[1];
+    if (fn)
+        return math(cursor, fn, kind);
+    const value = literal(cursor, unitsOf(kind));
+    // A percentage, kept apart from a bare number, as `literal` in the compiler keeps it.
+    return cursor.text[cursor.at - 1] === '%' ? { percentage: value } : value;
+}
+/**
+ * A `var()` fallback in arithmetic, as its slot reads it: another `var()` or arithmetic of its
+ * own, read as a tree, `var(--a, calc(var(--gap) * 2))`, as `leaf` in the compiler reads it; a
+ * length in points, `rem` included as the compiler counts it; or a bare number.
+ */
+function leafFallback(text, kind) {
+    if (text !== undefined && NESTED.test(text)) {
+        return whole(text.trim(), (cursor) => factor(cursor, kind)) ?? fail();
+    }
+    const token = fallbackToken(text);
+    if (kind !== 'length')
+        return numberFallback(token, kind);
+    if (typeof token?.length === 'number')
+        return token.length;
+    const rem = text === undefined ? undefined : /^\s*(-?\d*\.?\d+)rem\s*$/i.exec(text);
+    return rem ? Number(rem[1]) * PER_UNIT['rem'] : undefined;
+}
+/** A fallback where a number is wanted: a percentage kept apart from a bare number. */
+function numberFallback(token, kind) {
+    const percentage = kind === 'number' && typeof token?.length === 'string' && token.number !== undefined;
+    return percentage ? { percentage: token.number } : token?.number;
+}
+/** The rest of a `calc()`, or of a `min()` or `max()` of sums, once its name is read. */
+function math(cursor, fn, kind) {
+    const name = fn.toLowerCase();
+    if (!MATH.has(name))
+        fail();
+    const sides = [sum(cursor, kind)];
+    while (name !== 'calc' && take(cursor, ','))
+        sides.push(sum(cursor, kind));
+    expect(cursor, ')');
+    return sides.reduce((a, b) => [name, a, b]);
+}
+/** Arithmetic of tokens, read as a length and as a number, whichever each reading makes of it. */
+function calcToken(text) {
+    const markers = ['length', 'number'].flatMap((kind) => {
+        const expression = whole(text, (cursor) => math(cursor, (match(cursor, FUNCTION) ?? fail())[1], kind));
+        return expression === undefined ? [] : [{ expression, kind }];
+    });
+    return markers.length ? { deferredCalc: markers } : undefined;
+}
+/**
+ * A colour function's arguments, with the commas and the slash between them gone, and whether
+ * commas were what separated them.
+ */
+function colourArguments(cursor) {
+    const space = SPACES[(match(cursor, FUNCTION) ?? fail())[1].toLowerCase()] ?? fail();
+    const args = [];
+    let legacy = false;
+    while (!take(cursor, ')')) {
+        if (take(cursor, ','))
+            legacy = true;
+        else if (!take(cursor, '/')) {
+            const name = match(cursor, VAR)?.[1];
+            args.push(name ? reference(cursor, name) : { word: (match(cursor, WORD) ?? fail())[0] });
+        }
+    }
+    return { space, args, legacy };
+}
+/** What each argument of an `hsl()` is: a hue, a saturation and a lightness, then an alpha. */
+const HSL_SLOTS = ['hue', 'percentage', 'percentage', 'alpha'];
+/**
+ * A written `hsl()` channel as its slot reads it, as `hslLiteral` in the compiler does: a hue in
+ * degrees; a saturation or a lightness as a fraction, from a percentage or, in the space syntax
+ * only, a bare number of percent; an alpha as a number or a fraction.
+ */
+function hslLiteral(text, slot, legacy) {
+    const perUnit = (unit) => {
+        if (slot === 'hue')
+            return HUE_UNITS.has(unit) ? PER_UNIT[unit] : undefined;
+        if (unit === '%')
+            return 0.01;
+        if (unit !== '')
+            return undefined;
+        return slot === 'alpha' ? 1 : legacy ? undefined : 0.01;
+    };
+    return whole(text, (cursor) => literal(cursor, perUnit));
+}
+function hslChannel(arg, index, legacy) {
+    const slot = HSL_SLOTS[index];
+    if ('word' in arg)
+        return hslLiteral(arg.word, slot, legacy) ?? fail();
+    const fallback = arg.fallback === undefined ? undefined : hslLiteral(arg.fallback, slot, legacy);
+    return fallback === undefined
+        ? { reference: arg.reference }
+        : { reference: arg.reference, fallback };
+}
+/** A channels colour's alpha: none, written as a number or a percentage, or a token of its own. */
+function alphaOf(arg) {
+    if (arg === undefined)
+        return undefined;
+    if ('word' in arg) {
+        return whole(arg.word, (cursor) => literal(cursor, unitsOf('number'))) ?? fail();
+    }
+    const fallback = fallbackToken(arg.fallback)?.number;
+    return fallback === undefined
+        ? { reference: arg.reference }
+        : { reference: arg.reference, fallback };
+}
+/** `rgba(var(--channels), <alpha>)`, as `deferChannelsToken` reads it. */
+function channelsToken(channels, alpha, space) {
+    const token = fallbackToken(channels.fallback);
+    const fallback = space === 'hsl' ? token?.hslChannels : token?.channels;
+    const opacity = alphaOf(alpha);
+    return {
+        deferredColour: {
+            channels: { reference: channels.reference, ...(fallback ? { fallback } : {}), space },
+            ...(opacity === undefined ? {} : { alpha: opacity }),
+        },
+    };
+}
+/** `hsl(var(--h) 100% 50%)` and the like, as `deferHslToken` reads it. */
+function hslToken(args, legacy) {
+    if (args.length !== 3 && args.length !== 4)
+        fail();
+    const [h, s, l, alpha] = args.map((arg, index) => hslChannel(arg, index, legacy));
+    const legacyFlag = legacy ? { legacy: true } : {};
+    return { hsl: { h: h, s: s, l: l, ...(alpha === undefined ? {} : { alpha }), ...legacyFlag } };
+}
+function colourToken(text) {
+    return whole(text, (cursor) => {
+        const { space, args, legacy } = colourArguments(cursor);
+        const [channels, alpha, ...rest] = args;
+        if (channels && 'reference' in channels && !rest.length) {
+            return channelsToken(channels, alpha, space);
+        }
+        return space === 'hsl' ? hslToken(args, legacy) : fail();
+    });
+}
+/** The index just past the bracket that closes the function the cursor is inside. */
+function closing(cursor) {
+    for (let at = cursor.at, depth = 0; at < cursor.text.length; at++) {
+        const char = cursor.text[at];
+        if (char === '(')
+            depth++;
+        else if (char === ')' && depth-- === 0)
+            return at + 1;
+    }
+    return fail();
+}
+/**
+ * A `var()` in a colour, as `reference` in the compiler's colour-expression.cjs reads it: the
+ * tokens its `var()` fallbacks name, tried in turn, then a colour, or one made of other tokens.
+ */
+function referenceColour({ reference: name, fallback }) {
+    const alternatives = [];
+    let rest = fallback?.trim();
+    for (let next; rest && (next = whole(rest, nextReference)); rest = next.fallback?.trim()) {
+        alternatives.push(next.reference);
+    }
+    return {
+        reference: name,
+        ...(alternatives.length ? { alternatives } : {}),
+        ...(rest ? colourFallback(rest) : {}),
+    };
+}
+/** The colour a `var()` falls back to, or one made of other tokens; refused when it is neither. */
+function colourFallback(text) {
+    const token = tokenFromValue(text);
+    if (token?.hsl || token?.deferredColour)
+        return { fallbackToken: token };
+    return { fallback: token?.color ?? fail() };
+}
+const nextReference = (cursor) => reference(cursor, (match(cursor, VAR) ?? fail())[1]);
+/**
+ * One colour in a `color-mix()`: a `var()`, another mix, an `rgb()` or `hsl()` of tokens, or a
+ * colour written out, which is kept as written for the mix to read.
+ */
+function mixColour(cursor) {
+    const name = match(cursor, VAR)?.[1];
+    if (name)
+        return referenceColour(reference(cursor, name));
+    const start = cursor.at;
+    const fn = match(cursor, FUNCTION)?.[1]?.toLowerCase();
+    if (fn === 'color-mix')
+        return mixExpression(cursor);
+    if (!fn)
+        return { color: (match(cursor, WORD) ?? fail())[0] };
+    if (RELATIVE[fn] && takeWord(cursor, 'from'))
+        return relativeExpression(cursor, RELATIVE[fn]);
+    cursor.at = closing(cursor);
+    return functionColour(cursor.text.slice(start, cursor.at));
+}
+/** A colour function in a mix: of tokens, as a token of it is read, or written out, as it is. */
+function functionColour(text) {
+    if (!text.includes('var('))
+        return { color: text };
+    const token = colourToken(text);
+    return token?.hsl ? { hsl: token.hsl } : (token?.deferredColour ?? fail());
+}
+/** One side of a mix: its colour, and the percentage written before or after it, if one is. */
+function mixSide(cursor) {
+    const percentage = () => {
+        const found = match(cursor, PERCENTAGE);
+        match(cursor, SPACE);
+        return found ? Number(found[1]) : undefined;
+    };
+    const before = percentage();
+    const colour = mixColour(cursor);
+    match(cursor, SPACE);
+    const after = before === undefined ? percentage() : undefined;
+    const written = before ?? after;
+    return written === undefined ? { colour } : { colour, percentage: written };
+}
+/**
+ * The rest of a `color-mix(in <space> [<method> hue], <colour> [p%], <colour> [q%])` once its name
+ * is read, as `mixExpression` in the compiler reads it.
+ */
+function mixExpression(cursor) {
+    const words = [];
+    while (!take(cursor, ',')) {
+        words.push((match(cursor, WORD) ?? fail())[0].toLowerCase());
+        match(cursor, SPACE);
+    }
+    const [keyword, space, method, hue, ...rest] = words;
+    if (keyword !== 'in' || !MIX_SPACES.has(space) || rest.length)
+        fail();
+    if (method !== undefined && (hue !== 'hue' || !HUE_METHODS.has(method)))
+        fail();
+    const a = mixSide(cursor);
+    expect(cursor, ',');
+    const b = mixSide(cursor);
+    expect(cursor, ')');
+    return {
+        mix: {
+            space: space,
+            ...(method ? { hue: method } : {}),
+            a: a.colour,
+            ...(a.percentage === undefined ? {} : { aPercentage: a.percentage }),
+            b: b.colour,
+            ...(b.percentage === undefined ? {} : { bPercentage: b.percentage }),
+        },
+    };
+}
+/** A whole `color-mix()`, worked out where it is set, as `deferMixToken` in the compiler reads it. */
+function mixToken(text) {
+    const deferredColour = whole(text, (cursor) => {
+        const colour = mixColour(cursor);
+        return 'mix' in colour || 'relative' in colour ? colour : fail();
+    });
+    return deferredColour && { deferredColour };
+}
+/** Each relative colour function, as `RELATIVE` in the compiler's colour-expression.cjs. */
+const RELATIVE = {
+    rgb: { space: 'srgb', keywords: ['r', 'g', 'b'], full: [255, 255, 255] },
+    rgba: { space: 'srgb', keywords: ['r', 'g', 'b'], full: [255, 255, 255] },
+    hsl: { space: 'hsl', keywords: ['h', 's', 'l'], full: [null, 100, 100] },
+    hsla: { space: 'hsl', keywords: ['h', 's', 'l'], full: [null, 100, 100] },
+    hwb: { space: 'hwb', keywords: ['h', 'w', 'b'], full: [null, 100, 100] },
+    lab: { space: 'lab', keywords: ['l', 'a', 'b'], full: [100, 125, 125] },
+    lch: { space: 'lch', keywords: ['l', 'c', 'h'], full: [100, 150, null] },
+    oklab: { space: 'oklab', keywords: ['l', 'a', 'b'], full: [1, 0.4, 0.4] },
+    oklch: { space: 'oklch', keywords: ['l', 'c', 'h'], full: [1, 0.4, null] },
+};
+/** Whether the next word is `word`, in any case; taken, with the space after it, if so. */
+function takeWord(cursor, word) {
+    const start = cursor.at;
+    if (match(cursor, WORD)?.[0].toLowerCase() === word) {
+        match(cursor, SPACE);
+        return true;
+    }
+    cursor.at = start;
+    return false;
+}
+/**
+ * The rest of `<space>(from <colour> <channel> <channel> <channel> [/ <alpha>])` once `from` is
+ * read, as `relativeExpression` in the compiler reads it.
+ */
+function relativeExpression(cursor, { space, keywords, full }) {
+    const from = mixColour(cursor);
+    const names = [...keywords, 'alpha'];
+    const channels = [0, 1, 2].map((index) => {
+        match(cursor, SPACE);
+        return relativeChannel(cursor, names, full[index]);
+    });
+    const alpha = take(cursor, '/') ? relativeChannel(cursor, names, 1) : undefined;
+    expect(cursor, ')');
+    return { relative: { space, from, channels, ...(alpha === undefined ? {} : { alpha }) } };
+}
+/**
+ * One channel: a `calc()` of numbers and keywords, a keyword, a number, a percentage of the
+ * channel's range, or an angle for a hue.
+ */
+function relativeChannel(cursor, keywords, full) {
+    const fn = match(cursor, FUNCTION)?.[1]?.toLowerCase();
+    if (fn) {
+        const value = fn === 'calc' ? channelSum(cursor, keywords) : fail();
+        expect(cursor, ')');
+        return value;
+    }
+    const found = match(cursor, LITERAL);
+    if (!found)
+        return channelOperand(cursor, keywords);
+    const value = Number(found[1]) * channelScale((found[2] ?? '').toLowerCase(), full);
+    return Number.isFinite(value) ? value : fail();
+}
+/** What one of a written channel's unit is: a share of its range, degrees of a hue, or itself. */
+function channelScale(unit, full) {
+    if (unit === '%')
+        return full === null ? NaN : full / 100;
+    if (full !== null)
+        return unit ? NaN : 1;
+    return HUE_UNITS.has(unit) ? PER_UNIT[unit] : NaN;
+}
+/** `a + b - c`, each side a product of numbers, keywords and bracketed sums. */
+function channelSum(cursor, keywords) {
+    let value = channelProduct(cursor, keywords);
+    for (let op; (op = ['+', '-'].find((char) => take(cursor, char)));) {
+        value = [op, value, channelProduct(cursor, keywords)];
+    }
+    return value;
+}
+function channelProduct(cursor, keywords) {
+    let value = channelFactor(cursor, keywords);
+    for (let op; (op = ['*', '/'].find((char) => take(cursor, char)));) {
+        value = [op, value, channelFactor(cursor, keywords)];
+    }
+    return value;
+}
+function channelFactor(cursor, keywords) {
+    if (take(cursor, '(')) {
+        const value = channelSum(cursor, keywords);
+        expect(cursor, ')');
+        return value;
+    }
+    const found = match(cursor, LITERAL);
+    // A percentage or an angle stands alone: inside arithmetic the keywords are numbers.
+    if (found)
+        return found[2] ? fail() : Number(found[1]);
+    return channelOperand(cursor, keywords);
+}
+function channelOperand(cursor, keywords) {
+    const word = (match(cursor, WORD) ?? fail())[0];
+    return keywords.includes(word) ? word : fail();
+}
+/**
+ * A value with a `var()` inside it, or a `color-mix()`, as a token made of others; undefined if it
+ * is no such shape.
+ */
+export function derivedToken(text) {
+    return calcToken(text) ?? colourToken(text) ?? mixToken(text);
+}
+//# sourceMappingURL=inline-derived-token.js.map