@ng-native/fabric 0.7.0 → 0.9.0

package/dist/background-layers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A `background` a token holds as text, where it is no single colour: the gradients a library
+ * works out as the app runs and sets as a custom property, a colour slider's track or a colour
+ * area's two fades over a colour. A stylesheet's gradient is compiled when the app is built; one
+ * set on an element is read here, into what a view's `experimental_backgroundImage` takes.
+ *
+ * ponytail: `linear-gradient()` with a side or an angle and colour stops at percentages, which
+ * is what such a library writes. A corner, a length or two positions on a stop, `radial-` and
+ * `repeating-` are not read, and the whole background is then nothing, as an invalid one is.
+ * Native has no conic gradient at all.
+ */
+export interface BackgroundLayers {
+    readonly images: readonly object[];
+    /** The colour under the images: the last layer, where it is one. */
+    readonly color?: string;
+}
+/** The layers a background's text holds, or nothing where any of it is not read. */
+export declare function backgroundLayers(text: string): BackgroundLayers | undefined;

package/dist/background-layers.js

@@ -0,0 +1,70 @@
+import { parseColor } from "./transition.js";
+const SIDES = {
+    'to top': 0,
+    'to right': 90,
+    'to bottom': 180,
+    'to left': 270,
+};
+/** Split at the commas that are not inside brackets. */
+function split(text) {
+    const parts = [];
+    let depth = 0;
+    let from = 0;
+    for (let at = 0; at < text.length; at++) {
+        const char = text[at];
+        if (char === '(')
+            depth++;
+        else if (char === ')')
+            depth--;
+        else if (char === ',' && depth === 0) {
+            parts.push(text.slice(from, at).trim());
+            from = at + 1;
+        }
+    }
+    parts.push(text.slice(from).trim());
+    return parts;
+}
+const rgba = (text) => {
+    const parsed = parseColor(text);
+    return parsed ? `rgba(${parsed[0]}, ${parsed[1]}, ${parsed[2]}, ${parsed[3]})` : undefined;
+};
+/** A direction in degrees, or nothing for a first argument that is a colour stop. */
+function direction(first) {
+    const side = SIDES[first.toLowerCase()];
+    if (side !== undefined)
+        return side;
+    const angle = /^(-?[\d.]+)deg$/i.exec(first);
+    return angle ? Number(angle[1]) : undefined;
+}
+/** `rgba(…) 40%` as a stop, or nothing for one this does not read. */
+function stop(text) {
+    const placed = /^(.*\S)\s+(-?[\d.]+%)$/.exec(text);
+    const color = rgba(placed ? placed[1] : text);
+    return color === undefined ? undefined : { color, position: placed ? placed[2] : null };
+}
+function linear(layer) {
+    const inside = /^linear-gradient\((.*)\)$/is.exec(layer)?.[1];
+    if (inside === undefined)
+        return undefined;
+    const parts = split(inside);
+    const angle = direction(parts[0]);
+    const stops = (angle === undefined ? parts : parts.slice(1)).map(stop);
+    if (stops.length < 2 || stops.some((each) => each === undefined))
+        return undefined;
+    return {
+        type: 'linear-gradient',
+        direction: { type: 'angle', value: angle ?? 180 },
+        colorStops: stops,
+    };
+}
+/** The layers a background's text holds, or nothing where any of it is not read. */
+export function backgroundLayers(text) {
+    const layers = split(text.trim());
+    const last = layers.at(-1);
+    const color = parseColor(last) ? last : undefined;
+    const images = (color === undefined ? layers : layers.slice(0, -1)).map(linear);
+    if (!images.length || images.some((each) => each === undefined))
+        return undefined;
+    return { images: images, color };
+}
+//# sourceMappingURL=background-layers.js.map

package/dist/background-layers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-layers.js","sourceRoot":"","sources":["../src/background-layers.ts"],"names":[],"mappings":"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","sourcesContent":["import { parseColor } from './transition.ts';\n\n/**\n * A `background` a token holds as text, where it is no single colour: the gradients a library\n * works out as the app runs and sets as a custom property, a colour slider's track or a colour\n * area's two fades over a colour. A stylesheet's gradient is compiled when the app is built; one\n * set on an element is read here, into what a view's `experimental_backgroundImage` takes.\n *\n * ponytail: `linear-gradient()` with a side or an angle and colour stops at percentages, which\n * is what such a library writes. A corner, a length or two positions on a stop, `radial-` and\n * `repeating-` are not read, and the whole background is then nothing, as an invalid one is.\n * Native has no conic gradient at all.\n */\nexport interface BackgroundLayers {\n  readonly images: readonly object[];\n  /** The colour under the images: the last layer, where it is one. */\n  readonly color?: string;\n}\n\nconst SIDES: Readonly<Record<string, number>> = {\n  'to top': 0,\n  'to right': 90,\n  'to bottom': 180,\n  'to left': 270,\n};\n\n/** Split at the commas that are not inside brackets. */\nfunction split(text: string): string[] {\n  const parts: string[] = [];\n  let depth = 0;\n  let from = 0;\n  for (let at = 0; at < text.length; at++) {\n    const char = text[at];\n    if (char === '(') depth++;\n    else if (char === ')') depth--;\n    else if (char === ',' && depth === 0) {\n      parts.push(text.slice(from, at).trim());\n      from = at + 1;\n    }\n  }\n  parts.push(text.slice(from).trim());\n  return parts;\n}\n\nconst rgba = (text: string): string | undefined => {\n  const parsed = parseColor(text);\n  return parsed ? `rgba(${parsed[0]}, ${parsed[1]}, ${parsed[2]}, ${parsed[3]})` : undefined;\n};\n\n/** A direction in degrees, or nothing for a first argument that is a colour stop. */\nfunction direction(first: string): number | undefined {\n  const side = SIDES[first.toLowerCase()];\n  if (side !== undefined) return side;\n  const angle = /^(-?[\\d.]+)deg$/i.exec(first);\n  return angle ? Number(angle[1]) : undefined;\n}\n\n/** `rgba(…) 40%` as a stop, or nothing for one this does not read. */\nfunction stop(text: string): { color: string; position: string | null } | undefined {\n  const placed = /^(.*\\S)\\s+(-?[\\d.]+%)$/.exec(text);\n  const color = rgba(placed ? placed[1]! : text);\n  return color === undefined ? undefined : { color, position: placed ? placed[2]! : null };\n}\n\nfunction linear(layer: string): object | undefined {\n  const inside = /^linear-gradient\\((.*)\\)$/is.exec(layer)?.[1];\n  if (inside === undefined) return undefined;\n  const parts = split(inside);\n  const angle = direction(parts[0]!);\n  const stops = (angle === undefined ? parts : parts.slice(1)).map(stop);\n  if (stops.length < 2 || stops.some((each) => each === undefined)) return undefined;\n  return {\n    type: 'linear-gradient',\n    direction: { type: 'angle', value: angle ?? 180 },\n    colorStops: stops,\n  };\n}\n\n/** The layers a background's text holds, or nothing where any of it is not read. */\nexport function backgroundLayers(text: string): BackgroundLayers | undefined {\n  const layers = split(text.trim());\n  const last = layers.at(-1)!;\n  const color = parseColor(last) ? last : undefined;\n  const images = (color === undefined ? layers : layers.slice(0, -1)).map(linear);\n  if (!images.length || images.some((each) => each === undefined)) return undefined;\n  return { images: images as object[], color };\n}\n"]}

package/dist/css.d.ts

@@ -30,7 +30,7 @@ export interface Compound {
     readonly not?: readonly Compound[];
     /** `:host`: the node must be the host of the component whose sheet is being evaluated. */
     readonly host?: true;
-    /** `:host-context()`: the host, or one of its ancestors, must match one of these. */
+    /** `:host-context()`, once for each written: the host, or one of its ancestors, must match it. */
     readonly hostContext?: readonly Compound[];
     /**
      * `:is(<compound> *)`: every one of these must match some ancestor, the node itself excluded.
@@ -222,6 +222,11 @@ export interface DeferredDeclaration {
      * unambiguous given a single-valued token, so `padding: var(--gap)` writes all four.
      */
     readonly props: readonly string[];
+    /**
+     * `background: var()`: the token may hold gradients over a colour, so `props` names the image
+     * beside the colour and each is written from its own part of the token. See `layersOf`.
+     */
+    readonly layers?: true;
     /**
      * `inherit`, written for these props: each is the parent's value for it, or nothing where the
      * parent has none.
@@ -480,6 +485,18 @@ export interface StyleCache {
     context: object;
     /** The parent's `context` this was computed from. */
     parentContext: object;
+    /**
+     * Identity token standing for what an element under this node could match differently: minted
+     * when the node is styled for a change that can alter that, and kept when it is styled again
+     * for one that cannot, a custom property of its own or an inherited value from above. An
+     * element whose parent's is the one it was last styled under matches the rules it did, so it
+     * is styled from those it kept and they are not found again.
+     */
+    scope: object;
+    /** The parent's `scope` this was computed from. */
+    parentScope: object;
+    /** The rules the node matched, for a styling that finds its parent's `scope` as it was. */
+    rules?: readonly StyleRule[];
     /** The conditions version this was resolved under. */
     generation: number;
     style: Record<string, unknown>;
@@ -565,6 +582,12 @@ export interface StyleTarget {
     styleCache: StyleCache | null;
     /** Set when something that could change what this node matches has changed. */
     styleDirty: boolean;
+    /**
+     * Set when what this node matches, or a custom property it holds, may have changed, and nothing
+     * that an element under it is matched by: the node is matched and styled again, and those under
+     * it are styled from the rules they matched. Absent on a hand-built target.
+     */
+    ownDirty?: boolean;
     /**
      * Set when something beneath this node changed and a sheet uses `:has()`: the node is matched
      * again, and restyled only if the rules it matches came out different. Absent on a hand-built
@@ -698,6 +721,10 @@ interface IndexedEntry {
 export interface RuleIndex {
     readonly buckets: Map<string, IndexedEntry[]>;
     readonly universal: IndexedEntry[];
+    /** Whether any rule is filed under an attribute, which a node's props are then looked up for. */
+    attributes?: boolean;
+    /** Whether any is filed under the class of an element its own is inside. */
+    under?: boolean;
 }
 /**
  * File rules by key selector, each at `from` and on: its place among every rule there is, which
@@ -724,6 +751,11 @@ export interface Subjects {
     readonly inside: Set<string>;
     /** A rule for anything anywhere: no class, no name, and no such box to be in. */
     any: boolean;
+    /**
+     * In what a class reaches: a rule is for the element that has the class, `.on`, which is then
+     * matched again itself. Unset where the rules are only for elements under it.
+     */
+    own?: boolean;
 }
 /** Whether an inline style sets a property children inherit. Allocates nothing: it runs per set. */
 export declare function setsInherited(style: unknown): boolean;
@@ -848,11 +880,21 @@ export declare class StyleResolver {
     private readonly noted;
     /** Read the classes a sheet names, once, as soon as any node is given it. */
     noteSheet(sheet: StyleSheet | null | undefined): void;
+    /** The props a selector of some sheet asks about: an id, and each attribute by its name. */
+    private readonly named;
+    /**
+     * Whether a prop changing can change what any element matches: only where a selector of a
+     * sheet that was ever loaded names it. A sheet loaded later has every element matched again.
+     */
+    reads(prop: string): boolean;
     private noteReach;
+    /** Whether a class's reach names any element under the one that has it. */
+    reachesUnder(subjects: Subjects): boolean;
     /**
      * What classes coming to an element or going from it can restyle: `true` for it and all
-     * under it and after it, as any change to it does; the elements under it to restyle, by what
-     * rules are for; or null, where no rule names any of them and nothing is styled again.
+     * under it and after it, as any change to it does; the element itself, where `own`, and the
+     * elements under it to match again, by what rules are for; or null, where no rule names any
+     * of them and nothing is styled again.
      */
     reachOf(classes: Iterable<string>): true | Subjects | null;
     /** Whether one of the rules `subjects` stands for could be for a node. */
@@ -873,6 +915,15 @@ export declare class StyleResolver {
      * resolves at most once however many descendants ask for its inherited values.
      */
     resolve(node: StyleTarget, epoch: number): StyleCache;
+    /** A node styled now, from the rules found for it or from those it kept: see `matchesStand`. */
+    private styledAgain;
+    /**
+     * Whether what an element could match is as it was when it was last styled: nothing that can
+     * change it was marked on the element, its parent's `scope` is the one it was styled under,
+     * and no sheet that could match it has come since. It is being styled again all the same, for
+     * a change of its own that alters nothing under it, or for what it inherits.
+     */
+    private matchesStand;
     /**
      * A cache of a node just styled, with a context of its own. It keeps the rules the node
      * matched, for the node to be compared with, once a sheet has a use for them: see `tracksHas`.
@@ -909,6 +960,12 @@ export declare class StyleResolver {
      * without resolving it. What lets a commit step over a clean child in one comparison.
      */
     holds(node: StyleTarget, parentContext: object): boolean;
+    /**
+     * Whether a node was last styled under a box holding the one cache shared by every box with
+     * nothing to style. Such boxes hand the same `context` down, so the node cannot tell one from
+     * another by it: moved under another box, it has to be told.
+     */
+    styledUnderShared(node: StyleTarget): boolean;
     /**
      * Whether a previous result still stands: nothing about the node changed, nothing above it
      * moved, and the conditions have not.
@@ -929,6 +986,8 @@ export declare class StyleResolver {
      * token the device had seeded.
      */
     private unstyled;
+    /** The one cache of every node with nothing to style and nothing to hand down, given to one more. */
+    private sharedEmpty;
     /**
      * The rules worth trying against a node, in cascade order.
      *
@@ -1014,6 +1073,11 @@ export declare class StyleResolver {
      * A declaration with no token and no usable fallback is dropped rather than written as
      * undefined, which is what a browser does with a value it cannot resolve.
      */
+    /**
+     * What declarations that wait for a node's tokens come to on it, where no rule of the node's
+     * carries them: a keyframe's, which is settled against the element that plays it.
+     */
+    settleFor(node: StyleTarget, deferred: readonly DeferredDeclaration[], epoch: number): Record<string, unknown>;
     private applyDeferred;
     /** Note what the node being resolved takes an `inherit` from, and that its parent has an heir. */
     private heir;