@ng-native/fabric 0.17.1 → 0.18.0

package/dist/css.d.ts

@@ -186,13 +186,28 @@ export interface Conditions {
 /** A run of CSS whitespace: spaces, tabs, newlines, carriage returns and form feeds, and no other. */
 export declare const CSS_SPACE: RegExp;
 /** A custom property's value, in each form it can legally take. Absent forms are unusable. */
+/**
+ * A colour only the platform resolves, `platform-color(link)` or a system colour, held by its
+ * names, which the engine turns into the shape each platform reads (`Engine.color`). It has no
+ * channels here, so nothing can mix, fade or shade it, or draw it in a gradient or a shadow.
+ */
+export interface PlatformColour {
+    readonly platformColor: readonly string[];
+}
+export declare const isPlatformColour: (value: unknown) => value is PlatformColour;
 export interface TokenValue {
     readonly length?: number | string;
     /** An angle, in degrees whatever unit it was written in. */
     readonly angle?: number;
     /** A time, in milliseconds whatever unit it was written in. */
     readonly time?: number;
-    readonly color?: string;
+    /** A colour, or one only the platform resolves, by name: `platform-color(link)`, `LinkText`. */
+    readonly color?: string | PlatformColour;
+    /**
+     * The token holding a platform colour that one made of others, `color-mix(in srgb, var(--x)
+     * 50%, white)`, was worked out of, which leaves it with no value: what a warning names.
+     */
+    readonly platformColourIn?: string;
     readonly keyword?: string;
     readonly number?: number;
     /** A font weight, as the string `fontWeight` takes. */
@@ -329,6 +344,11 @@ export interface DeferredDeclaration {
      * gradient is not the class that supplies its colours.
      */
     readonly gradient?: GradientTemplate | readonly GradientTemplate[];
+    /**
+     * A band of the box from side to side whose edges are tokens, `clipBand` as a library's sheet
+     * writes it for a slider: each edge a percentage, or a token with the percentage beside it.
+     */
+    readonly band?: readonly BandEdge[];
     /**
      * Arithmetic around the reference, settled at build time. `value * scale + offset`, then no
      * smaller than `floor`. What `calc(var(--x) + 12px)` and `max(var(--x), 16px)` become.
@@ -690,6 +710,14 @@ export interface StyleTarget {
 }
 /** Whether a prop of a shape in a drawing is a paint it hands down: see `inheritFrom`. */
 export declare const handsDownPaint: (key: string) => boolean;
+/**
+ * A border's unsided width and colour, written beside the four sides once the cascade and every
+ * token have settled them, where they agree. Android strokes a rounded border, the only way it
+ * draws one dashed or dotted, from `borderWidth` and `borderColor` alone, and only when every
+ * side equals them; given the sides alone it fills each in solid. A border with no width strokes
+ * nothing, so preflight's `border: 0 solid` adds nothing to every element.
+ */
+export declare function settleUnsidedBorder(own: Record<string, unknown>): void;
 /**
  * Deterministic work counters for the matcher.
  *
@@ -1030,6 +1058,13 @@ export declare class StyleResolver {
      * compiler refuses the same value written out, but a token is only known here.
      */
     onUnreadDisplay: ((name: string, value: string | undefined) => void) | null;
+    /**
+     * Told of a declaration dropped for working a colour out of a token that holds a platform
+     * colour, which has no channels: a `color-mix()`, a relative colour, a gradient or a shadow.
+     * Set only in development: the compiler says so of a sheet that holds both, but only here is it
+     * known for a token one sheet sets and another reads.
+     */
+    onPlatformColour: ((name: string, props: readonly string[], on?: string) => void) | null;
     constructor(globalSheet: StyleSheet | null, conditions: Conditions);
     /**
      * Match `sheet` against every node from now on, as a global sheet, after the application's;
@@ -1317,8 +1352,12 @@ export declare class StyleResolver {
     private settled;
     /** A line's longhands from its tokens, with a width in `em` worked out against the font size. */
     private settledLine;
+    /** Why a declaration came to nothing, where something is told: in development. */
+    private reportUnsettled;
     /** A reference with nothing defined for it and nothing to fall back to. */
     private reportUndefined;
+    /** A colour worked out of a token holding a platform colour, which cannot be. */
+    private reportPlatformColour;
     /** A display token set to a value native has no display for. */
     private reportDisplay;
     /**
@@ -1326,7 +1365,10 @@ export declare class StyleResolver {
      * a colour in it cannot be: a shadow with no colour is not a shadow, as CSS reads it.
      */
     private settledWithin;
-    /** A structured value with every deferred length and colour inside it settled. */
+    /**
+     * A structured value with every deferred length and colour inside it settled. A platform colour
+     * is settled only as the `whole` value: inside a shadow or a filter native draws from channels.
+     */
     private filledIn;
     /**
      * A list's parts filled in, a whole shadow or filter token standing for however many entries it
@@ -1361,6 +1403,11 @@ export declare const isNegativeLineHeight: (prop: string, text: string) => boole
 export declare function boundRelativeLength(prop: string, text: string, on?: string): DeferredDeclaration | null;
 /** `hsl()` reads a channels token as hue, saturation and lightness; `rgb()` as sRGB. */
 type ChannelSpace = 'rgb' | 'hsl';
+/** An edge of a band: a percentage, or a token with the percentage beside it where one is. */
+type BandEdge = string | {
+    readonly reference: string;
+    readonly fallback?: string;
+};
 /**
  * Arithmetic with tokens in it, as the compiler leaves it: numbers, token references and
  * `[op, a, b]`, in points, degrees or plain numbers as the slot it fills counts. A percentage

package/dist/css.js

@@ -11,6 +11,9 @@ import { ELEMENT_STYLES } from "./element-styles.js";
 import { relativeColour } from "./relative-colour.js";
 /** A run of CSS whitespace: spaces, tabs, newlines, carriage returns and form feeds, and no other. */
 export const CSS_SPACE = /[ \t\n\r\f]+/;
+export const isPlatformColour = (value) => typeof value === 'object' &&
+    value !== null &&
+    Array.isArray(value.platformColor);
 /**
  * Where a form a token does not have can be read from instead. A length is already a
  * line-height and a single word is already a family, so neither is stored twice in every token
@@ -70,6 +73,9 @@ const INHERITED = new Set([
     'textShadowOffset',
     'textShadowRadius',
     'textShadowColor',
+    // `text-wrap` and `word-break`, which CSS inherits, as the paragraph props they are.
+    'lineBreakStrategyIOS',
+    'textBreakStrategy',
     'selectable',
     // CSS inherits it, and its `none` is the element alone: a descendant's `auto` takes touches
     // again. The engine commits a computed `none` as native's `box-none`, which means that.
@@ -82,10 +88,48 @@ const INHERITED = new Set([
 const INHERITED_POINTER_EVENTS = new Set(['none', 'auto']);
 /**
  * A shape's paint, which SVG hands down: a path under an `<svg>` with a `fill` has that fill.
- * Inherited only in a library's drawing (`StyleTarget.namespace`). An icon's shapes are left to
- * react-native-svg, which hands a group's paint down itself, from what the shape set as its own.
+ * Handed down through any element, as a browser does, `.btn { fill: currentColor }` to the
+ * icon in the button, and taken only by a library's drawing (`StyleTarget.namespace`). An icon's
+ * shapes are left to react-native-svg, which hands a group's paint down itself, from what the
+ * shape set as its own.
+ *
+ * ponytail: an inline style's paint is handed down by a drawing's node alone (`setsInherited`).
+ * Hand it down from any node as a rule's is if `[style.fill]` on a box around a drawing is seen.
  */
 const SHAPE_PAINT_INHERITED = new Set(['fill', 'stroke', 'strokeWidth']);
+/**
+ * Whether a node takes the shape's paint it is handed: a node of a library's drawing, or one a
+ * package makes in it, as web-compat makes the span a text's words are drawn by.
+ */
+const takesPaint = (node) => node.namespace !== undefined || node.parent?.namespace !== undefined;
+/** Whether a node is handed a shape's paint: see `SHAPE_PAINT_INHERITED`. */
+const handedPaint = (inherited) => inherited['fill'] !== undefined ||
+    inherited['stroke'] !== undefined ||
+    inherited['strokeWidth'] !== undefined;
+/** The styles of nodes outside a drawing with no rules, by the map they inherit: see `unpainted`. */
+const unpaintedStyles = new WeakMap();
+/**
+ * A style without the shape's paint it was handed, for a node outside a drawing: it hands the
+ * paint on and takes none, as an icon's shape commits only the paint it was given itself.
+ */
+function unpainted(style, own) {
+    if (!handedPaint(style))
+        return style;
+    if (own) {
+        for (const key of SHAPE_PAINT_INHERITED)
+            if (!(key in own))
+                delete style[key];
+        return style;
+    }
+    let bare = unpaintedStyles.get(style);
+    if (!bare) {
+        bare = { ...style };
+        for (const key of SHAPE_PAINT_INHERITED)
+            delete bare[key];
+        unpaintedStyles.set(style, bare);
+    }
+    return bare;
+}
 /** Whether a prop of a shape in a drawing is a paint it hands down: see `inheritFrom`. */
 export const handsDownPaint = (key) => key === 'propList' || SHAPE_PAINT_INHERITED.has(key);
 /**
@@ -126,6 +170,47 @@ function settleBorders(own) {
     else
         own['borderStyle'] = drawn;
 }
+/** A border's four sides and its logical ones, by the part of it they hold. */
+const BORDER_SIDES = Object.fromEntries(['Width', 'Color'].map((part) => [
+    part,
+    {
+        physical: ['Top', 'Right', 'Bottom', 'Left'].map((side) => `border${side}${part}`),
+        logical: ['Start', 'End', 'Block', 'BlockStart', 'BlockEnd'].map((side) => `border${side}${part}`),
+    },
+]));
+/**
+ * A border's unsided width and colour, written beside the four sides once the cascade and every
+ * token have settled them, where they agree. Android strokes a rounded border, the only way it
+ * draws one dashed or dotted, from `borderWidth` and `borderColor` alone, and only when every
+ * side equals them; given the sides alone it fills each in solid. A border with no width strokes
+ * nothing, so preflight's `border: 0 solid` adds nothing to every element.
+ */
+export function settleUnsidedBorder(own) {
+    // No top width, its own or unsided: no four sides that agree. Most views have no border.
+    if (own['borderTopWidth'] === undefined && own['borderWidth'] === undefined)
+        return;
+    const width = agreedSides(own, 'Width');
+    if (width === undefined || width === 0)
+        return;
+    own['borderWidth'] = width;
+    const colour = agreedSides(own, 'Color');
+    if (colour !== undefined)
+        own['borderColor'] = colour;
+}
+/**
+ * What the four sides of a border are, each read as native reads it, where they are the same,
+ * a colour held in an object by what is in it. A logical side, which a direction makes left or
+ * right, leaves it unsaid.
+ */
+function agreedSides(own, part) {
+    const { physical, logical } = BORDER_SIDES[part];
+    if (logical.some((key) => own[key] !== undefined))
+        return undefined;
+    const unsided = own[`border${part}`];
+    const [first, ...rest] = physical.map((key) => own[key] ?? unsided);
+    const same = (one) => one === first || JSON.stringify(one) === JSON.stringify(first);
+    return rest.every(same) ? first : undefined;
+}
 /**
  * Deterministic work counters for the matcher.
  *
@@ -2226,7 +2311,7 @@ function inheritFrom(parentInherited, own, node) {
     const drawing = node?.namespace !== undefined;
     let inherited = drawing ? ownPaint(node, parentInherited, own) : parentInherited;
     for (const key of Object.keys(own)) {
-        if (!(INHERITED.has(key) || (drawing && SHAPE_PAINT_INHERITED.has(key))))
+        if (!(INHERITED.has(key) || SHAPE_PAINT_INHERITED.has(key)))
             continue;
         // `pointer-events: inherit`, which only an inline style on an element no rule matches still
         // holds here: what the parent hands down stands.
@@ -2430,6 +2515,13 @@ export class StyleResolver {
      * compiler refuses the same value written out, but a token is only known here.
      */
     onUnreadDisplay = null;
+    /**
+     * Told of a declaration dropped for working a colour out of a token that holds a platform
+     * colour, which has no channels: a `color-mix()`, a relative colour, a gradient or a shadow.
+     * Set only in development: the compiler says so of a sheet that holds both, but only here is it
+     * known for a token one sheet sets and another reads.
+     */
+    onPlatformColour = null;
     constructor(globalSheet, conditions) {
         this.globalSheet = globalSheet;
         this.conditions = conditions;
@@ -2884,7 +2976,9 @@ export class StyleResolver {
             parentContext,
             scope: scope ?? context,
             parentScope,
-            style: unstyledStyle(parentInherited, inline),
+            style: takesPaint(node)
+                ? unstyledStyle(parentInherited, inline)
+                : unpainted(unstyledStyle(parentInherited, inline), null),
             inherited: handedOn(node, parentInherited, inline, drawing),
             tokens,
         };
@@ -3054,11 +3148,11 @@ export class StyleResolver {
         const drawing = node.namespace !== undefined;
         const inline = node.inlineInherits ? inlineInherited(node.props['style'], drawing) : null;
         // Nor one that takes a value from its parent's own style, which two parents differ in, nor
-        // a node of a drawing, which hands down paint another node with its rules does not.
+        // one that takes a drawing's paint, which another node with its rules does not.
         if (node.customProperties ||
             inline ||
             node.boundStyle ||
-            drawing ||
+            takesPaint(node) ||
             matched.some(takesParents)) {
             return this.style(node, matched, parentTokens, parentInherited, inline);
         }
@@ -3108,10 +3202,13 @@ export class StyleResolver {
             this.applyDeferred(result.deferred, own, tokens, parentInherited, result.important);
         }
         settleBorders(own);
+        settleUnsidedBorder(own);
         // `pointer-events: inherit` won the cascade: what the parent hands down stands.
         if (own['pointerEvents'] === 'inherit')
             delete own['pointerEvents'];
         const style = { ...parentInherited, ...own };
+        if (!takesPaint(node))
+            unpainted(style, own);
         settleLineHeight(style);
         const inherited = decorate(style, inheritFrom(parentInherited, own, node), own);
         const rtl = (style['direction'] ?? this.conditions.direction) === 'rtl';
@@ -3286,9 +3383,8 @@ export class StyleResolver {
                 continue;
             }
             const settled = this.settled(declaration, own, parentInherited, tokens);
-            if (settled === undefined && this.onUndefinedToken) {
-                this.reportUndefined(declaration, tokens);
-            }
+            if (settled === undefined)
+                this.reportUnsettled(declaration, tokens);
             const outranked = (prop) => !declaration.important && important !== null && prop in important;
             // Said only of a display that is written: an important one wins over the token's.
             const unread = settled === undefined && declaration.kind === 'display';
@@ -3390,6 +3486,13 @@ export class StyleResolver {
             values[prop] = Math.max(points, 0);
         return values;
     }
+    /** Why a declaration came to nothing, where something is told: in development. */
+    reportUnsettled(declaration, tokens) {
+        if (this.onUndefinedToken)
+            this.reportUndefined(declaration, tokens);
+        if (this.onPlatformColour)
+            this.reportPlatformColour(declaration, tokens);
+    }
     /** A reference with nothing defined for it and nothing to fall back to. */
     reportUndefined(declaration, tokens) {
         const name = declaration.reference;
@@ -3401,6 +3504,14 @@ export class StyleResolver {
             return;
         this.onUndefinedToken(name, declaration.props, declaration.on);
     }
+    /** A colour worked out of a token holding a platform colour, which cannot be. */
+    reportPlatformColour(declaration, tokens) {
+        if (declaration.kind !== undefined && !COLOURED_KINDS.has(declaration.kind))
+            return;
+        const name = platformColourRead(declaration, tokens, new Set());
+        if (name)
+            this.onPlatformColour(name, declaration.props, declaration.on);
+    }
     /** A display token set to a value native has no display for. */
     reportDisplay(declaration, tokens) {
         const names = [declaration.reference, ...(declaration.alternatives ?? [])];
@@ -3413,7 +3524,7 @@ export class StyleResolver {
      * a colour in it cannot be: a shadow with no colour is not a shadow, as CSS reads it.
      */
     settledWithin(value, declaration, own, parentInherited, tokens) {
-        const filled = this.filledIn(value, declaration, own, parentInherited, tokens);
+        const filled = this.filledIn(value, declaration, own, parentInherited, tokens, true);
         if (filled === UNSETTLED)
             return undefined;
         // As the compiler drops a shadow nobody can see: Tailwind composes five, four of them nothing.
@@ -3421,8 +3532,11 @@ export class StyleResolver {
             ? filled.filter((shadow) => !invisible(shadow.color))
             : filled;
     }
-    /** A structured value with every deferred length and colour inside it settled. */
-    filledIn(value, declaration, own, parentInherited, tokens) {
+    /**
+     * A structured value with every deferred length and colour inside it settled. A platform colour
+     * is settled only as the `whole` value: inside a shadow or a filter native draws from channels.
+     */
+    filledIn(value, declaration, own, parentInherited, tokens, whole = false) {
         if (!needsFilling(value))
             return value;
         const fill = (part) => this.filledIn(part, declaration, own, parentInherited, tokens);
@@ -3435,10 +3549,11 @@ export class StyleResolver {
             return (ownColour ?? parentInherited['color'] ?? 'black');
         };
         const marked = settledMarker(value, tokens, current);
-        if (marked === 'currentcolor')
-            return current();
+        const settled = marked === 'currentcolor' ? current() : marked;
+        if (isPlatformColour(settled) && !whole)
+            return UNSETTLED;
         if (marked !== NOT_A_MARKER)
-            return marked ?? UNSETTLED;
+            return settled ?? UNSETTLED;
         const pending = value.__defer;
         if (pending)
             return this.computed({ ...declaration, compute: pending }, own, parentInherited);
@@ -3649,7 +3764,14 @@ const INVALID = Object.freeze({});
  * percentage hue does, and unset only when a `var()` in it has nothing to be substituted with.
  */
 function workedOut(token, tokens) {
-    return derived(token, tokens) ?? (substitutable(token, tokens) ? INVALID : undefined);
+    const value = derived(token, tokens);
+    if (value)
+        return value;
+    if (!substitutable(token, tokens))
+        return undefined;
+    // Made of a platform colour, which has no channels: invalid, and kept to say why.
+    const from = platformColourRead(token, tokens, new Set());
+    return from ? { platformColourIn: from } : INVALID;
 }
 /** Whether each `var()` in a token made of others names a token that is set, or has a fallback. */
 function substitutable(token, tokens) {
@@ -3932,6 +4054,8 @@ function substituted(value, tokens, path, depth) {
 function referenced(declaration, tokens) {
     if (declaration.gradient)
         return paintLayers(declaration.gradient, tokens);
+    if (declaration.band)
+        return settledBand(declaration.band, tokens);
     // The first token set is substituted, whatever it holds: one of the wrong kind leaves the
     // property unset rather than trying the next, or the fallback.
     const names = [declaration.reference, ...(declaration.alternatives ?? [])];
@@ -4325,6 +4449,23 @@ function fromChannels(value, alpha, tokens, space) {
         ? `rgb(${r}, ${g}, ${b})`
         : `rgba(${r}, ${g}, ${b}, ${Math.round(opacity * 1000) / 1000})`;
 }
+/**
+ * A band's clip with its edges settled, as `clipBand` is written: none where an edge is a token
+ * that is no percentage of the box, or unset with nothing beside it, as CSS then has no clip.
+ */
+function settledBand(band, tokens) {
+    const [from, to] = band.map((edge) => percentOf(typeof edge === 'string' ? edge : substitute(edge, tokens, (token) => token.length)));
+    if (from === undefined || to === undefined)
+        return undefined;
+    return `polygon(${from}% 0%, ${to}% 0%, ${to}% 100%, ${from}% 100%)`;
+}
+/** A length as a percentage, 0 and one below it included, or undefined for any other. */
+function percentOf(length) {
+    if (length === 0)
+        return '0';
+    const share = typeof length === 'string' ? /^(-?\d*\.?\d+)%$/.exec(length) : null;
+    return share ? String(Number(share[1])) : undefined;
+}
 /** One template, or a layered background of several: every layer painted, or, as CSS would, none. */
 function paintLayers(gradient, tokens) {
     if (!Array.isArray(gradient))
@@ -4364,6 +4505,9 @@ function paintedStops(template, tokens) {
     for (const stop of template.colorStops) {
         const token = stop.colour ? undefined : tokens[stop.reference];
         const color = stop.colour ? resolveColour(stop.colour, tokens) : token?.color;
+        // A platform colour is no stop: a gradient is drawn from channels, which it has none of.
+        if (isPlatformColour(color))
+            return undefined;
         // `none` is how the Tailwind flattening writes `via-none`: the stop left out, not invalid.
         if (color === undefined && token && token.keyword !== 'none')
             return undefined;
@@ -4433,6 +4577,14 @@ function resolveColour(expression, tokens, current) {
 }
 /** A colour inside another: `currentColor` there, written or in a token, is the node's colour. */
 function innerColour(expression, tokens, current) {
+    return withChannels(colourWithin(expression, tokens, current));
+}
+/**
+ * A colour something works another out of, which a platform colour cannot be: it has no channels.
+ * Undefined for one, so what it was in is not settled either, as for a token that is not set.
+ */
+const withChannels = (colour) => isPlatformColour(colour) ? undefined : colour;
+function colourWithin(expression, tokens, current) {
     if (!current)
         return resolveColour(expression, tokens);
     if ('reference' in expression) {
@@ -4441,7 +4593,7 @@ function innerColour(expression, tokens, current) {
             return current();
     }
     const colour = resolveColour(expression, tokens, current);
-    return colour?.toLowerCase() === 'currentcolor' ? current() : colour;
+    return typeof colour === 'string' && colour.toLowerCase() === 'currentcolor' ? current() : colour;
 }
 /** A mix's two sides, a mix inside it unrounded, as CSS rounds only the colour at the end. */
 function mixSides(mix, tokens, current) {
@@ -4696,7 +4848,8 @@ function tokenColour(expression, tokens) {
     if (set)
         return formOf(set, 'color');
     const token = expression.fallbackToken;
-    return expression.fallback ?? (token && formOf(derived(token, tokens), 'color'));
+    return (expression.fallback ??
+        (token && formOf(derived(token, tokens), 'color')));
 }
 /**
  * A shadow's colour from a token that is the colour or the word `inset`: currentcolor, which the
@@ -4707,6 +4860,39 @@ function insetOrColour(token) {
         return 'currentcolor';
     return formOf(token, 'color');
 }
+/** The kinds of token a colour is part of. */
+const COLOURED_KINDS = new Set(['color', 'shadow', 'filter']);
+/**
+ * The first token a declaration or a token reads, at any depth and through the tokens those read,
+ * that holds a platform colour. Asked only of one that came to nothing, in development.
+ */
+function platformColourRead(value, tokens, seen) {
+    if (value === null || typeof value !== 'object')
+        return undefined;
+    const record = value;
+    const names = [record['reference'], record['alias'], ...[record['alternatives']].flat()];
+    for (const name of names) {
+        const found = typeof name === 'string' ? platformColourNamed(name, tokens, seen) : undefined;
+        if (found)
+            return found;
+    }
+    for (const part of Object.values(record)) {
+        const found = platformColourRead(part, tokens, seen);
+        if (found)
+            return found;
+    }
+    return undefined;
+}
+/** `platformColourRead` of the token `name`, which is the one when it holds a platform colour. */
+function platformColourNamed(name, tokens, seen) {
+    if (seen.has(name))
+        return undefined;
+    seen.add(name);
+    const token = tokens[name];
+    if (isPlatformColour(token?.color))
+        return name;
+    return token?.platformColourIn ?? platformColourRead(token, tokens, seen);
+}
 /** A marker the compiler leaves in a structured value for a colour only the device can settle. */
 function colourMarker(value) {
     return value?.__colour;
@@ -4737,8 +4923,9 @@ function withPercent(value, adjust) {
  * the app meant, and turning it into NaN would be a silent layout rather than a visible one.
  */
 function adjusted(value, adjust) {
+    // A platform colour has no alpha to fade: unset, where it was painted as it stood.
     if (adjust.alpha !== undefined)
-        return faded(value, adjust.alpha);
+        return isPlatformColour(value) ? undefined : faded(value, adjust.alpha);
     const em = value?.__defer;
     if (adjust.percent !== undefined)
         return withPercent(value, adjust);