@octane-xplat/nativescript-mason-core 0.0.1 → 1.0.0-beta.0

package/css-colors.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Resolves CSS colour functions the native parsers don't read.
+ *
+ * String-valued properties (`box-shadow`, `background`, `border`, `filter`,
+ * `text-shadow`, ...) reach Android, iOS and Windows as the CSS text, and
+ * their parsers know hex, `rgb()`/`hsl()` and named colours only, so
+ * `0 2px 4px color-mix(in oklch, #000 4%, transparent)` would draw opaque
+ * black. Each colour function is replaced by its `rgba()` value first.
+ *
+ * Values that still hold a `var()` are left alone: there's nothing to resolve
+ * against yet.
+ */
+/**
+ * @param toRgba resolves one colour (`oklch(60% 0.2 240)`) to `rgba(...)`, or
+ * returns null when it can't.
+ */
+export declare function resolveCssColors(value: string, toRgba: (color: string) => string | null): string;

package/css-colors.js

@@ -0,0 +1,54 @@
+/**
+ * Resolves CSS colour functions the native parsers don't read.
+ *
+ * String-valued properties (`box-shadow`, `background`, `border`, `filter`,
+ * `text-shadow`, ...) reach Android, iOS and Windows as the CSS text, and
+ * their parsers know hex, `rgb()`/`hsl()` and named colours only, so
+ * `0 2px 4px color-mix(in oklch, #000 4%, transparent)` would draw opaque
+ * black. Each colour function is replaced by its `rgba()` value first.
+ *
+ * Values that still hold a `var()` are left alone: there's nothing to resolve
+ * against yet.
+ */
+const COLOR_FUNCTION = /(?<![\w-])(color-mix|oklch|oklab|lab|lch|hwb|color|rgba?|hsla?)\(/gi;
+// `rgb()`/`hsl()` only need resolving in their space-separated form.
+const LEGACY_FUNCTION = /^(rgba?|hsla?)$/i;
+const VAR = /var\(/i;
+/**
+ * @param toRgba resolves one colour (`oklch(60% 0.2 240)`) to `rgba(...)`, or
+ * returns null when it can't.
+ */
+export function resolveCssColors(value, toRgba) {
+    if (!value || !value.includes('(')) {
+        return value;
+    }
+    let out = '';
+    let last = 0;
+    COLOR_FUNCTION.lastIndex = 0;
+    let match;
+    while ((match = COLOR_FUNCTION.exec(value))) {
+        const open = match.index + match[0].length - 1;
+        const close = closingParen(value, open);
+        if (close === -1) {
+            break;
+        }
+        const call = value.slice(match.index, close + 1);
+        const skip = (LEGACY_FUNCTION.test(match[1]) && call.includes(',')) || VAR.test(call);
+        out += value.slice(last, match.index) + ((skip ? null : toRgba(call)) ?? call);
+        last = close + 1;
+        COLOR_FUNCTION.lastIndex = last;
+    }
+    return last === 0 ? value : out + value.slice(last);
+}
+function closingParen(value, open) {
+    let depth = 0;
+    for (let i = open; i < value.length; i++) {
+        if (value[i] === '(') {
+            depth++;
+        }
+        else if (value[i] === ')' && --depth === 0) {
+            return i;
+        }
+    }
+    return -1;
+}

package/css-filter.d.ts

@@ -0,0 +1,17 @@
+export type ColorMatrix = number[];
+export type FilterStep = {
+    kind: 'matrix';
+    matrix: ColorMatrix;
+} | {
+    kind: 'blur';
+    sigma: number;
+} | {
+    kind: 'shadow';
+    x: number;
+    y: number;
+    sigma: number;
+    color: string | null;
+};
+export declare function composeMatrices(first: ColorMatrix, second: ColorMatrix): ColorMatrix;
+export declare function parseCssFilter(value: string, toDip: (token: string) => number | undefined): FilterStep[];
+export declare function encodeCssFilter(steps: FilterStep[], argbOf: (color: string | null) => number): string;

package/css-filter.js

@@ -0,0 +1,140 @@
+import { parseBoxShadows } from './box-shadow';
+import { parseAngle } from './css-transform';
+const IDENTITY = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
+function amount(arg, fallback) {
+    const t = arg.trim();
+    if (!t)
+        return fallback;
+    const n = parseFloat(t);
+    if (!Number.isFinite(n))
+        return fallback;
+    return t.endsWith('%') ? n / 100 : n;
+}
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+function rgb(rows) {
+    return [...rows[0], 0, 0, ...rows[1], 0, 0, ...rows[2], 0, 0, 0, 0, 0, 1, 0];
+}
+function grayscale(a) {
+    const k = 1 - clamp01(a);
+    return rgb([
+        [0.2126 + 0.7874 * k, 0.7152 - 0.7152 * k, 0.0722 - 0.0722 * k],
+        [0.2126 - 0.2126 * k, 0.7152 + 0.2848 * k, 0.0722 - 0.0722 * k],
+        [0.2126 - 0.2126 * k, 0.7152 - 0.7152 * k, 0.0722 + 0.9278 * k],
+    ]);
+}
+function sepia(a) {
+    const k = 1 - clamp01(a);
+    return rgb([
+        [0.393 + 0.607 * k, 0.769 - 0.769 * k, 0.189 - 0.189 * k],
+        [0.349 - 0.349 * k, 0.686 + 0.314 * k, 0.168 - 0.168 * k],
+        [0.272 - 0.272 * k, 0.534 - 0.534 * k, 0.131 + 0.869 * k],
+    ]);
+}
+function saturate(s) {
+    return rgb([
+        [0.213 + 0.787 * s, 0.715 - 0.715 * s, 0.072 - 0.072 * s],
+        [0.213 - 0.213 * s, 0.715 + 0.285 * s, 0.072 - 0.072 * s],
+        [0.213 - 0.213 * s, 0.715 - 0.715 * s, 0.072 + 0.928 * s],
+    ]);
+}
+function hueRotate(radians) {
+    const c = Math.cos(radians);
+    const s = Math.sin(radians);
+    return rgb([
+        [0.213 + c * 0.787 - s * 0.213, 0.715 - c * 0.715 - s * 0.715, 0.072 - c * 0.072 + s * 0.928],
+        [0.213 - c * 0.213 + s * 0.143, 0.715 + c * 0.285 + s * 0.14, 0.072 - c * 0.072 - s * 0.283],
+        [0.213 - c * 0.213 - s * 0.787, 0.715 - c * 0.715 + s * 0.715, 0.072 + c * 0.928 + s * 0.072],
+    ]);
+}
+function linear(slope, intercept) {
+    return [slope, 0, 0, 0, intercept, 0, slope, 0, 0, intercept, 0, 0, slope, 0, intercept, 0, 0, 0, 1, 0];
+}
+function alpha(a) {
+    return [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, clamp01(a), 0];
+}
+export function composeMatrices(first, second) {
+    const out = new Array(20).fill(0);
+    for (let row = 0; row < 4; row++) {
+        for (let col = 0; col < 5; col++) {
+            let v = col === 4 ? second[row * 5 + 4] : 0;
+            for (let k = 0; k < 4; k++)
+                v += second[row * 5 + k] * first[k * 5 + col];
+            out[row * 5 + col] = v;
+        }
+    }
+    return out;
+}
+const FUNCTION = /([a-z-]+)\s*\(((?:[^()]|\([^()]*\))*)\)/gi;
+export function parseCssFilter(value, toDip) {
+    const steps = [];
+    const v = (value ?? '').trim();
+    if (!v || v === 'none')
+        return steps;
+    const push = (matrix) => {
+        const last = steps[steps.length - 1];
+        if (last && last.kind === 'matrix')
+            last.matrix = composeMatrices(last.matrix, matrix);
+        else
+            steps.push({ kind: 'matrix', matrix });
+    };
+    for (const match of v.matchAll(FUNCTION)) {
+        const name = match[1].toLowerCase();
+        const arg = match[2];
+        switch (name) {
+            case 'blur': {
+                const t = arg.trim();
+                const sigma = t ? (toDip(t) ?? parseFloat(t)) : 0;
+                if (Number.isFinite(sigma) && sigma > 0)
+                    steps.push({ kind: 'blur', sigma });
+                break;
+            }
+            case 'grayscale':
+                push(grayscale(amount(arg, 1)));
+                break;
+            case 'sepia':
+                push(sepia(amount(arg, 1)));
+                break;
+            case 'saturate':
+                push(saturate(Math.max(0, amount(arg, 1))));
+                break;
+            case 'hue-rotate':
+                push(hueRotate(arg.trim() ? parseAngle(arg) : 0));
+                break;
+            case 'invert': {
+                const a = clamp01(amount(arg, 1));
+                push(linear(1 - 2 * a, a));
+                break;
+            }
+            case 'opacity':
+                push(alpha(amount(arg, 1)));
+                break;
+            case 'brightness':
+                push(linear(Math.max(0, amount(arg, 1)), 0));
+                break;
+            case 'contrast': {
+                const c = Math.max(0, amount(arg, 1));
+                push(linear(c, 0.5 - 0.5 * c));
+                break;
+            }
+            case 'drop-shadow': {
+                const shadow = parseBoxShadows(arg, toDip)[0];
+                if (shadow)
+                    steps.push({ kind: 'shadow', x: shadow.offsetX, y: shadow.offsetY, sigma: shadow.blur / 2, color: shadow.color });
+                break;
+            }
+        }
+    }
+    return steps.filter((s) => s.kind !== 'matrix' || s.matrix.some((n, i) => Math.abs(n - IDENTITY[i]) > 1e-6));
+}
+export function encodeCssFilter(steps, argbOf) {
+    const round = (n) => Math.round(n * 1e6) / 1e6;
+    return steps
+        .map((s) => {
+        if (s.kind === 'matrix')
+            return 'm,' + s.matrix.map(round).join(',');
+        if (s.kind === 'blur')
+            return `b,${round(s.sigma)}`;
+        return `d,${round(s.x)},${round(s.y)},${round(s.sigma)},${argbOf(s.color) >>> 0}`;
+    })
+        .join(';');
+}

package/css-keyframes.d.ts

@@ -0,0 +1,41 @@
+import type { CssAnimationProperty, Style, View } from '@nativescript/core';
+/**
+ * CSS keyframes for properties MasonKit draws itself.
+ *
+ * Core plays each keyframe interval with its native Animation, which only knows opacity,
+ * background-color, transforms, width and height. MasonKit's animatable properties are taken
+ * out of core's keyframes and interpolated every frame on the same timeline instead: delay,
+ * duration, iterations, each interval's timing function and `animation-fill-mode`.
+ */
+type Interpolate = (from: string, to: string, t: number) => string;
+interface Track {
+    property: CssAnimationProperty<Style, string>;
+    interpolate: Interpolate;
+    /** [time in ms from the start of an iteration, value]; time-ordered. */
+    stops: [number, string][];
+}
+/** Lets keyframes animate [property] with [interpolate]; [initial] is its CSS initial value. */
+export declare function registerKeyframeProperty(property: CssAnimationProperty<Style, string>, interpolate: Interpolate, initial: string): void;
+/** Interpolates `<position>` lists (`mask-position`, `background-position`). */
+export declare const interpolatePositionList: Interpolate;
+/** Interpolates `<bg-size>` lists (`mask-size`, `background-size`). */
+export declare const interpolateSizeList: Interpolate;
+/** Core's keyframe curve as an easing function; `linear`, `spring` and unknown curves are linear. */
+export declare function easing(curve: any): (t: number) => number;
+/**
+ * The value of [track] at [time] ms into an iteration of [total] ms. [curveAt] gives the timing
+ * function of the interval starting at a time. A missing first or last keyframe uses [base], the
+ * element's own value, as CSS does.
+ */
+export declare function sampleTrack(track: Pick<Track, 'interpolate' | 'stops'>, base: string, total: number, time: number, curveAt: (start: number) => (t: number) => number): string;
+/**
+ * Windows: View.animate()'s scale, rotate and translate, played per frame on the View properties
+ * (core's storyboards target a transform that doesn't show on a Mason view).
+ */
+export declare function animateTransforms(view: View, options: any): {
+    done: Promise<void>;
+    cancel: () => void;
+};
+/** Installs the keyframe hooks once. */
+export declare function installKeyframes(): void;
+export {};