@mkbabb/value.js 0.4.5 → 0.5.0

package/dist/easing.d.ts

@@ -0,0 +1,112 @@
+export declare function linear(t: number): number;
+/**
+ * CSS Easing Level 2 `linear()` — piecewise-linear timing function.
+ *
+ * Each stop is `{ output: number, input?: number }`.
+ * - `output` is the easing output value (typically 0–1 but can overshoot).
+ * - `input` is the progress percentage (0–100). If omitted, stops are
+ *   evenly distributed.
+ *
+ * Syntax examples:
+ *   linear(0, 0.25, 1)          → three evenly-spaced stops
+ *   linear(0, 0.25 75%, 1)      → second stop at 75% input
+ *   linear(0, 0.5 25% 75%, 1)   → second stop spans 25%–75% (flat segment)
+ */
+export interface LinearStop {
+    output: number;
+    input?: number;
+}
+export declare function cssLinear(stops: LinearStop[]): (t: number) => number;
+export declare function easeInQuad(t: number): number;
+export declare function easeOutQuad(t: number): number;
+export declare function easeInOutQuad(t: number): number;
+export declare function easeInCubic(t: number): number;
+export declare function easeOutCubic(t: number): number;
+export declare function easeInOutCubic(t: number): number;
+export declare function smoothStep3(t: number): number;
+export declare const CSSCubicBezier: (x1: number, y1: number, x2: number, y2: number) => (x: number) => number;
+export declare function easeInBounce(t: number): number;
+export declare function bounceInEase(t: number): number;
+export declare function bounceInEaseHalf(t: number): number;
+export declare function bounceOutEase(t: number): number;
+export declare function bounceOutEaseHalf(t: number): number;
+export declare function bounceInOutEase(t: number): number;
+export declare function easeInSine(t: number): number;
+export declare function easeOutSine(t: number): number;
+export declare function easeInOutSine(t: number): number;
+export declare function easeInCirc(t: number): number;
+export declare function easeOutCirc(t: number): number;
+export declare function easeInOutCirc(t: number): number;
+export declare function easeInExpo(t: number): number;
+export declare function easeOutExpo(t: number): number;
+export declare function easeInOutExpo(t: number): number;
+export declare const jumpTerms: readonly ["jump-start", "jump-end", "jump-none", "jump-both", "start", "end", "both"];
+export declare function steppedEase(steps: number, jumpTerm?: (typeof jumpTerms)[number]): (t: number) => number;
+export declare function stepStart(): (t: number) => number;
+export declare function stepEnd(): (t: number) => number;
+export declare const bezierPresets: {
+    readonly ease: readonly [0.25, 0.1, 0.25, 1];
+    readonly "ease-in": readonly [0.42, 0, 1, 1];
+    readonly "ease-out": readonly [0, 0, 0.58, 1];
+    readonly "ease-in-out": readonly [0.42, 0, 0.58, 1];
+    readonly "ease-in-back": readonly [0.6, -0.28, 0.735, 0.045];
+    readonly "ease-out-back": readonly [0.175, 0.885, 0.32, 1.275];
+    readonly "ease-in-out-back": readonly [0.68, -0.55, 0.265, 1.55];
+};
+export declare const timingFunctions: {
+    readonly linear: typeof linear;
+    readonly easeInQuad: typeof easeInQuad;
+    readonly "ease-in-quad": typeof easeInQuad;
+    readonly easeOutQuad: typeof easeOutQuad;
+    readonly "ease-out-quad": typeof easeOutQuad;
+    readonly easeInOutQuad: typeof easeInOutQuad;
+    readonly "ease-in-out-quad": typeof easeInOutQuad;
+    readonly easeInCubic: typeof easeInCubic;
+    readonly "ease-in-cubic": typeof easeInCubic;
+    readonly easeOutCubic: typeof easeOutCubic;
+    readonly "ease-out-cubic": typeof easeOutCubic;
+    readonly easeInOutCubic: typeof easeInOutCubic;
+    readonly "ease-in-out-cubic": typeof easeInOutCubic;
+    readonly easeInBounce: typeof easeInBounce;
+    readonly "ease-in-bounce": typeof easeInBounce;
+    readonly bounceInEase: typeof bounceInEase;
+    readonly "bounce-in-ease": typeof bounceInEase;
+    readonly bounceInEaseHalf: typeof bounceInEaseHalf;
+    readonly "bounce-in-ease-half": typeof bounceInEaseHalf;
+    readonly bounceOutEase: typeof bounceOutEase;
+    readonly "bounce-out-ease": typeof bounceOutEase;
+    readonly bounceOutEaseHalf: typeof bounceOutEaseHalf;
+    readonly "bounce-out-ease-half": typeof bounceOutEaseHalf;
+    readonly bounceInOutEase: typeof bounceInOutEase;
+    readonly "bounce-in-out-ease": typeof bounceInOutEase;
+    readonly easeInSine: typeof easeInSine;
+    readonly "ease-in-sine": typeof easeInSine;
+    readonly easeOutSine: typeof easeOutSine;
+    readonly "ease-out-sine": typeof easeOutSine;
+    readonly easeInOutSine: typeof easeInOutSine;
+    readonly "ease-in-out-sine": typeof easeInOutSine;
+    readonly easeInCirc: typeof easeInCirc;
+    readonly "ease-in-circ": typeof easeInCirc;
+    readonly easeOutCirc: typeof easeOutCirc;
+    readonly "ease-out-circ": typeof easeOutCirc;
+    readonly easeInOutCirc: typeof easeInOutCirc;
+    readonly "ease-in-out-circ": typeof easeInOutCirc;
+    readonly easeInExpo: typeof easeInExpo;
+    readonly "ease-in-expo": typeof easeInExpo;
+    readonly easeOutExpo: typeof easeOutExpo;
+    readonly "ease-out-expo": typeof easeOutExpo;
+    readonly easeInOutExpo: typeof easeInOutExpo;
+    readonly "ease-in-out-expo": typeof easeInOutExpo;
+    readonly smoothStep3: typeof smoothStep3;
+    readonly "smooth-step-3": typeof smoothStep3;
+    readonly ease: (x: number) => number;
+    readonly "ease-in": (x: number) => number;
+    readonly "ease-out": (x: number) => number;
+    readonly "ease-in-out": (x: number) => number;
+    readonly "ease-in-back": (x: number) => number;
+    readonly "ease-out-back": (x: number) => number;
+    readonly "ease-in-out-back": (x: number) => number;
+    readonly steps: typeof steppedEase;
+    readonly "step-start": typeof stepStart;
+    readonly "step-end": typeof stepEnd;
+};

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+export { ValueUnit, FunctionValue, ValueArray } from './units';
+export type { InterpolatedVar } from './units';
+export { ABSOLUTE_LENGTH_UNITS, RELATIVE_LENGTH_UNITS, LENGTH_UNITS, TIME_UNITS, ANGLE_UNITS, PERCENTAGE_UNITS, FREQUENCY_UNITS, RESOLUTION_UNITS, FLEX_UNITS, COMPUTED_UNITS, STRING_UNITS, COLOR_UNITS, UNITS, BLACKLISTED_COALESCE_UNITS, STYLE_NAMES, } from './units/constants';
+export type { MatrixValues } from './units/constants';
+export { isColorUnit, flattenObject, unflattenObject, unflattenObjectToString, isCSSStyleName, unpackMatrixValues, convertAbsoluteUnitToPixels, convertToPixels, convertToMs, convertToDegrees, convertToHz, convertToDPI, convert2, } from './units/utils';
+export { getComputedValue, normalizeNumericUnits, normalizeValueUnits, } from './units/normalize';
+export { Color, RGBColor, HSLColor, HSVColor, HWBColor, LABColor, LCHColor, OKLABColor, OKLCHColor, XYZColor, KelvinColor, LinearSRGBColor, DisplayP3Color, AdobeRGBColor, ProPhotoRGBColor, Rec2020Color, } from './units/color';
+export type { ColorSpaceMap } from './units/color';
+export { RGBA_MAX, ALPHA_RANGE, RGB_RANGE, UNIT_RANGE, HUE_RANGE, COLOR_SPACE_RANGES, ALPHA_DENORM_UNIT, COLOR_SPACE_DENORM_UNITS, COLOR_SPACE_NAMES, WHITE_POINT_D65, WHITE_POINT_D50, WHITE_POINT_D65_D50, WHITE_POINT_D50_D65, WHITE_POINTS, XYZ_TO_LMS_MATRIX, LMS_TO_XYZ_MATRIX, LMS_TO_OKLAB_MATRIX, OKLAB_TO_LMS_MATRIX, LMS_TO_LINEAR_SRGB, LINEAR_SRGB_TO_LMS, OKLAB_TO_LMS_COEFF, GAMUT_SECTOR_COEFFICIENTS, COLOR_NAMES, } from './units/color/constants';
+export type { ColorSpace, WhitePoint } from './units/color/constants';
+export { transformMat3, transposeMat3, multiplyMat3, invertMat3, } from './units/color/matrix';
+export type { Vec3, Mat3 } from './units/color/matrix';
+export { getFormattedColorSpaceRange, hex2rgb, rgb2hex, kelvin2rgb, rgb2kelvin, hsv2hsl, hsl2hsv, hwb2hsl, hsl2hwb, rgb2hsl, hsl2rgb, xyz2lab, lab2xyz, srgbToLinear, linearToSrgb, rgb2xyz, xyz2rgb, lch2lab, lab2lch, oklab2xyz, xyz2oklab, oklab2lab, lab2oklab, oklab2oklch, oklch2oklab, oklch2lab, lab2oklch, hsl2xyz, xyz2hsl, hsv2xyz, xyz2hsv, hwb2xyz, xyz2hwb, lch2xyz, xyz2lch, oklch2xyz, xyz2oklch, kelvin2xyz, xyz2kelvin, adobeRgbToLinear, linearToAdobeRgb, proPhotoToLinear, linearToProPhoto, rec2020ToLinear, linearToRec2020, linearSrgb2xyz, xyz2linearSrgb, displayP32xyz, xyz2displayP3, adobeRgb2xyz, xyz2adobeRgb, proPhoto2xyz, xyz2proPhoto, rec20202xyz, xyz2rec2020, color2, gamutMap, interpolateHue, mixColors, CYLINDRICAL_HUE_COMPONENT, } from './units/color/utils';
+export type { HueInterpolationMethod } from './units/color/utils';
+export { normalizeColorUnitComponent, normalizeColor, normalizeColorUnit, colorUnit2, normalizeColorUnits, } from './units/color/normalize';
+export { DELTA_E_OK_JND, deltaEOK, oklabToLinearSRGB, isInSRGBGamut, computeMaxSaturation, findCusp, findGamutIntersection, gamutMapOKLab, srgbToOKLab, gamutMapSRGB, } from './units/color/gamut';
+export { clamp, scale, lerp, logerp, deCasteljau, cubicBezier, interpBezier, cubicBezierToSVG, cubicBezierToString, } from './math';
+export { FRAME_RATE, isObject, clone, arrayEquals, sleep, waitUntil, debounce, createHash, memoize, hyphenToCamelCase, camelCaseToHyphen, seekPreviousValue, requestAnimationFrame, cancelAnimationFrame, } from './utils';
+export type { MemoizeOptions } from './utils';
+export { rgb2ColorFilter, cssFiltersToString } from './units/color/colorFilter';
+export { linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, smoothStep3, CSSCubicBezier, easeInBounce, bounceInEase, bounceInEaseHalf, bounceOutEase, bounceOutEaseHalf, bounceInOutEase, easeInSine, easeOutSine, easeInOutSine, easeInCirc, easeOutCirc, easeInOutCirc, easeInExpo, easeOutExpo, easeInOutExpo, jumpTerms, steppedEase, stepStart, stepEnd, cssLinear, bezierPresets, timingFunctions, } from './easing';
+export type { LinearStop } from './easing';
+export { CSS_WIDE_KEYWORDS, CSSString, CSSFunction, CSSJSON, CSSValues, parseCSSValue, parseCSSPercent, parseCSSTime, } from './parsing';
+export { CSSValueUnit, parseCSSValueUnit } from './parsing/units';
+export { evaluateMathFunction } from './parsing/math';
+export { CSSColor, parseCSSColor } from './parsing/color';
+export { istring, identifier, none, integer, number, succeed, fail, tryParse, parseResult, } from './parsing/utils';
+export { decomposeMatrix2D, decomposeMatrix3D, recomposeMatrix3D, slerp, interpolateDecomposed, } from './transform/decompose';
+export type { DecomposedMatrix2D, DecomposedMatrix3D, Vec4, Mat4, } from './transform/decompose';

package/dist/math.d.ts

@@ -0,0 +1,9 @@
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function scale(value: number, fromMin: number, fromMax: number, toMin?: number, toMax?: number): number;
+export declare function lerp(t: number, start: number, end: number): number;
+export declare function logerp(t: number, start: number, end: number): number;
+export declare function deCasteljau(t: number, points: number[]): number;
+export declare function cubicBezier(t: number, x1: number, y1: number, x2: number, y2: number): number[];
+export declare function interpBezier(t: number, points: number[][]): number[];
+export declare function cubicBezierToSVG(x1: number, y1: number, x2: number, y2: number): string;
+export declare function cubicBezierToString(x1: number, y1: number, x2: number, y2: number): string;

package/dist/parsing/color.d.ts

@@ -0,0 +1,27 @@
+import { Parser } from '@mkbabb/parse-that';
+import { ValueUnit } from '../units';
+type ComponentExpr = {
+    type: "ref";
+    name: string;
+} | {
+    type: "calc";
+    expr: string;
+} | {
+    type: "literal";
+    value: number;
+} | {
+    type: "none";
+};
+export declare const CSSColor: {
+    Value: Parser<ValueUnit<any, string | undefined>>;
+    colorValue: Parser<ValueUnit<any, string | undefined>>;
+    componentExpr: Parser<ComponentExpr>;
+    sep: Parser<string>;
+    alphaSep: Parser<string>;
+    div: Parser<string>;
+};
+export declare function registerColorNames(names: Record<string, string>): void;
+export declare function clearCustomColorNames(): void;
+export declare function getCustomColorNames(): ReadonlyMap<string, string>;
+export declare function parseCSSColor(input: string): ValueUnit;
+export {};

package/dist/parsing/index.d.ts

@@ -0,0 +1,32 @@
+import { Parser } from '@mkbabb/parse-that';
+import { FunctionValue, ValueArray, ValueUnit } from '../units';
+export declare const CSS_WIDE_KEYWORDS: readonly ["inherit", "initial", "unset", "revert", "revert-layer"];
+export declare const CSSString: Parser<ValueUnit<string, string | undefined>>;
+export declare const CSSFunction: {
+    Function: Parser<any>;
+    Value: Parser<any>;
+    FunctionArgs: Parser<ValueArray<any>>;
+};
+export declare const CSSJSON: Parser<ValueUnit<any, string>>;
+export declare const CSSValues: {
+    Value: Parser<any>;
+    Values: Parser<any[]>;
+};
+export declare const parseCSSValue: ((input: string) => ValueUnit | FunctionValue) & {
+    cache: Map<string, {
+        value: ValueUnit<any, string | undefined> | FunctionValue<any, string>;
+        timestamp: number;
+    }>;
+};
+export declare const parseCSSPercent: ((input: string | number) => number) & {
+    cache: Map<string, {
+        value: number;
+        timestamp: number;
+    }>;
+};
+export declare const parseCSSTime: ((input: string) => number) & {
+    cache: Map<string, {
+        value: number;
+        timestamp: number;
+    }>;
+};

package/dist/parsing/math.d.ts

@@ -0,0 +1,28 @@
+import { Parser } from '@mkbabb/parse-that';
+import { FunctionValue, ValueUnit } from '../units';
+/**
+ * Parse a calc() expression into a proper AST.
+ *
+ * Grammar (CSS Values L4 §10):
+ *   <calc-sum>     = <calc-product> [ ['+' | '-'] <calc-product> ]*
+ *   <calc-product> = <calc-value>   [ ['*' | '/'] <calc-value>   ]*
+ *   <calc-value>   = <number> | <dimension> | <percentage> | '(' <calc-sum> ')' | <math-function>
+ */
+export declare function createCalcParser(valueParser: Parser<any>, mathFunctionParser: Parser<any>): Parser<any>;
+/**
+ * Create the complete math function parser.
+ * Returns a parser that handles calc(), min(), max(), clamp(), etc.
+ */
+export declare function createMathFunctionParsers(valueParser: Parser<any>): {
+    calcFn: Parser<FunctionValue<any, "calc">>;
+    mathFunction: Parser<any>;
+    calcSum: Parser<any>;
+};
+/**
+ * Evaluate a math FunctionValue to a numeric ValueUnit.
+ * Returns null if the expression can't be fully resolved.
+ *
+ * The result unit is determined by the first resolvable argument's unit,
+ * since CSS requires type-compatible arguments.
+ */
+export declare function evaluateMathFunction(fn: FunctionValue): ValueUnit | null;

package/dist/parsing/units.d.ts

@@ -0,0 +1,19 @@
+import { Parser } from '@mkbabb/parse-that';
+import { ValueUnit } from '../units';
+import { CSSColor, parseCSSColor, registerColorNames, clearCustomColorNames, getCustomColorNames } from './color';
+export { CSSColor, parseCSSColor, registerColorNames, clearCustomColorNames, getCustomColorNames };
+export declare const CSSValueUnit: {
+    Length: Parser<ValueUnit<number, string>>;
+    Angle: Parser<ValueUnit<number, string>>;
+    Time: Parser<ValueUnit<number, string>>;
+    TimePercentage: Parser<ValueUnit<any, string | undefined>>;
+    Frequency: Parser<ValueUnit<number, string>>;
+    Resolution: Parser<ValueUnit<number, string>>;
+    Flex: Parser<ValueUnit<number, string>>;
+    Percentage: Parser<ValueUnit<any, string | undefined>>;
+    Color: Parser<ValueUnit<any, string | undefined>>;
+    Slash: Parser<ValueUnit<string, string>>;
+    Value: Parser<ValueUnit<any, string | undefined>>;
+    sep: Parser<string>;
+};
+export declare function parseCSSValueUnit(input: string): ValueUnit;

package/dist/parsing/utils.d.ts

@@ -0,0 +1,24 @@
+import { Parser } from '@mkbabb/parse-that';
+/** Case-insensitive string match. Returns the matched portion of the input. */
+export declare const istring: (str: string) => Parser<string>;
+export declare const identifier: Parser<string>;
+export declare const none: Parser<string>;
+export declare const integer: Parser<number>;
+export declare const number: Parser<number>;
+/** Parser that always succeeds with the given value without consuming input. */
+export declare function succeed<T>(value: T): Parser<T>;
+/** Parser that always fails with the given message. */
+export declare function fail(message: string): Parser<never>;
+/**
+ * Try to parse; return the result or throw on failure.
+ * Equivalent to Parsimmon's `.tryParse()`.
+ */
+export declare function tryParse<T>(parser: Parser<T>, input: string): T;
+/**
+ * Parse and return a result object with `.status` and `.value`.
+ * Equivalent to Parsimmon's `.parse()` return shape.
+ */
+export declare function parseResult<T>(parser: Parser<T>, input: string): {
+    status: boolean;
+    value: T;
+};

package/dist/transform/decompose.d.ts

@@ -0,0 +1,61 @@
+/**
+ * CSS Transform Matrix Decomposition and Recomposition.
+ *
+ * Implements the CSSOM View spec algorithm (§15.1) for 2D matrices
+ * and polar decomposition for 3D matrices.
+ * Also includes quaternion slerp for smooth rotation interpolation.
+ */
+export type Vec4 = [number, number, number, number];
+export type Mat4 = number[];
+export interface DecomposedMatrix2D {
+    translateX: number;
+    translateY: number;
+    scaleX: number;
+    scaleY: number;
+    angle: number;
+    skew: number;
+}
+export interface DecomposedMatrix3D {
+    translate: [number, number, number];
+    scale: [number, number, number];
+    skew: [number, number, number];
+    quaternion: Vec4;
+    perspective: Vec4;
+}
+/**
+ * Decompose a 2D CSS matrix(a, b, c, d, e, f) into translate, scale, rotation, and skew.
+ *
+ * The matrix maps like:
+ *   | a c e |
+ *   | b d f |
+ *   | 0 0 1 |
+ */
+export declare function decomposeMatrix2D(a: number, b: number, c: number, d: number, e: number, f: number): DecomposedMatrix2D;
+/**
+ * Decompose a CSS matrix3d (16 values in column-major CSS order) into
+ * translate, scale, skew, rotation (quaternion), and perspective.
+ *
+ * CSS `matrix3d(a1,b1,c1,d1, a2,b2,c2,d2, a3,b3,c3,d3, a4,b4,c4,d4)` maps to:
+ *   | a1 a2 a3 a4 |
+ *   | b1 b2 b3 b4 |
+ *   | c1 c2 c3 c4 |
+ *   | d1 d2 d3 d4 |
+ * The parameter order is already column-major: [a1,b1,c1,d1, a2,b2,c2,d2, ...].
+ *
+ * Based on the "unmatrix" algorithm from the CSS Transforms spec.
+ */
+export declare function decomposeMatrix3D(cssValues: number[]): DecomposedMatrix3D | null;
+/**
+ * Spherical linear interpolation between two quaternions.
+ * Both quaternions should be normalized.
+ */
+export declare function slerp(qa: Vec4, qb: Vec4, t: number): Vec4;
+/**
+ * Recompose a 3D decomposed matrix back into a CSS matrix3d() value array (16 values, column-major CSS order).
+ */
+export declare function recomposeMatrix3D(d: DecomposedMatrix3D): number[];
+/**
+ * Interpolate between two decomposed 3D matrices at parameter t.
+ * Uses slerp for rotation, lerp for everything else.
+ */
+export declare function interpolateDecomposed(a: DecomposedMatrix3D, b: DecomposedMatrix3D, t: number): DecomposedMatrix3D;

package/dist/units/color/colorFilter.d.ts

@@ -0,0 +1,7 @@
+import { RGBColor } from '.';
+export declare function cssFiltersToString(filters: number[]): string;
+export declare function rgb2ColorFilter(color: RGBColor<number>): {
+    values: number[];
+    loss: number;
+    filter: string;
+};