webstudio 0.255.0 → 0.258.0

package/lib/cli.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _declarations, _dirtyBreakpoints, _a, _selector, _descendantSuffix, _mixinRules, _mixins, _declarations2, _cache, _NestingRule_instances, getDeclarations_fn, _b, _name, _c, _cached, _options, _d, _element, _name2, _e, _cssText, _mediaRules, _plainRules, _mixinRules2, _fontFaceRules, _transformValue, _element2, _f;
+var _a, _b, _c, _declarations, _dirtyBreakpoints, _d, _selector, _descendantSuffix, _mixinRules, _mixins, _declarations2, _cache, _NestingRule_instances, getDeclarations_fn, _e, _name, _f, _cached, _options, _g, _element, _name2, _h, _cssText, _mediaRules, _plainRules, _mixinRules2, _fontFaceRules, _transformValue, _element2, _i;
 import { exit, cwd, chdir, argv } from "node:process";
 import { hideBin } from "yargs/helpers";
 import { join, dirname, normalize, basename, relative } from "node:path";
@@ -738,6 +738,1801 @@ new Map(
     return weightData.names.map((name2) => [name2, weight]);
   }).flat()
 );
+function dot3(a2, b2) {
+  return a2[0] * b2[0] + a2[1] * b2[1] + a2[2] * b2[2];
+}
+function multiply_v3_m3x3(input2, matrix, out = [0, 0, 0]) {
+  const x2 = dot3(input2, matrix[0]);
+  const y2 = dot3(input2, matrix[1]);
+  const z2 = dot3(input2, matrix[2]);
+  out[0] = x2;
+  out[1] = y2;
+  out[2] = z2;
+  return out;
+}
+function isString(str) {
+  return type$1(str) === "string";
+}
+function type$1(o2) {
+  let str = Object.prototype.toString.call(o2);
+  return (str.match(/^\[object\s+(.*?)\]$/)[1] || "").toLowerCase();
+}
+function serializeNumber(n2, { precision = 16, unit }) {
+  if (isNone(n2)) {
+    return "none";
+  }
+  n2 = +toPrecision(n2, precision);
+  return n2 + (unit ?? "");
+}
+function isNone(n2) {
+  return n2 === null;
+}
+function toPrecision(n2, precision) {
+  if (n2 === 0) {
+    return 0;
+  }
+  let integer = ~~n2;
+  let digits = 0;
+  if (integer && precision) {
+    digits = ~~Math.log10(Math.abs(integer)) + 1;
+  }
+  const multiplier = 10 ** (precision - digits);
+  return Math.floor(n2 * multiplier + 0.5) / multiplier;
+}
+function interpolate(start, end, p2) {
+  if (isNaN(start)) {
+    return end;
+  }
+  if (isNaN(end)) {
+    return start;
+  }
+  return start + (end - start) * p2;
+}
+function interpolateInv(start, end, value) {
+  return (value - start) / (end - start);
+}
+function mapRange(from, to, value) {
+  if (!from || !to || from === to || from[0] === to[0] && from[1] === to[1] || isNaN(value) || value === null) {
+    return value;
+  }
+  return interpolate(to[0], to[1], interpolateInv(from[0], from[1], value));
+}
+function clamp(min, val, max) {
+  return Math.max(Math.min(max, val), min);
+}
+function isInstance(arg, constructor) {
+  var _a2;
+  if (arg instanceof constructor) {
+    return true;
+  }
+  const targetName = constructor.name;
+  while (arg) {
+    const proto = Object.getPrototypeOf(arg);
+    const constructorName = (_a2 = proto == null ? void 0 : proto.constructor) == null ? void 0 : _a2.name;
+    if (constructorName === targetName) {
+      return true;
+    }
+    if (!constructorName || constructorName === "Object") {
+      return false;
+    }
+    arg = proto;
+  }
+  return false;
+}
+class Type {
+  /**
+   * @param {any} type
+   * @param {import("./types.js").CoordMeta} coordMeta
+   */
+  constructor(type2, coordMeta) {
+    // Class properties - declared here so that type inference works
+    __publicField(this, "type");
+    __publicField(this, "coordMeta");
+    __publicField(this, "coordRange");
+    /** @type {[number, number]} */
+    __publicField(this, "range");
+    if (typeof type2 === "object") {
+      this.coordMeta = type2;
+    }
+    if (coordMeta) {
+      this.coordMeta = coordMeta;
+      this.coordRange = coordMeta.range ?? coordMeta.refRange;
+    }
+    if (typeof type2 === "string") {
+      let params = type2.trim().match(/^(?<type><[a-z]+>)(\[(?<min>-?[.\d]+),\s*(?<max>-?[.\d]+)\])?$/);
+      if (!params) {
+        throw new TypeError(`Cannot parse ${type2} as a type definition.`);
+      }
+      this.type = params.groups.type;
+      let { min, max } = params.groups;
+      if (min || max) {
+        this.range = [+min, +max];
+      }
+    }
+  }
+  /** @returns {[number, number]} */
+  get computedRange() {
+    if (this.range) {
+      return this.range;
+    }
+    if (this.type === "<percentage>") {
+      return this.percentageRange();
+    } else if (this.type === "<angle>") {
+      return [0, 360];
+    }
+    return null;
+  }
+  get unit() {
+    if (this.type === "<percentage>") {
+      return "%";
+    } else if (this.type === "<angle>") {
+      return "deg";
+    }
+    return "";
+  }
+  /**
+   * Map a number to the internal representation
+   * @param {number} number
+   */
+  resolve(number) {
+    if (this.type === "<angle>") {
+      return number;
+    }
+    let fromRange = this.computedRange;
+    let toRange = this.coordRange;
+    if (this.type === "<percentage>") {
+      toRange ?? (toRange = this.percentageRange());
+    }
+    return mapRange(fromRange, toRange, number);
+  }
+  /**
+   * Serialize a number from the internal representation to a string
+   * @param {number} number
+   * @param {number} [precision]
+   */
+  serialize(number, precision) {
+    let toRange = this.type === "<percentage>" ? this.percentageRange(100) : this.computedRange;
+    let unit = this.unit;
+    number = mapRange(this.coordRange, toRange, number);
+    return serializeNumber(number, { unit, precision });
+  }
+  toString() {
+    let ret = this.type;
+    if (this.range) {
+      let [min = "", max = ""] = this.range;
+      ret += `[${min},${max}]`;
+    }
+    return ret;
+  }
+  /**
+   * Returns a percentage range for values of this type
+   * @param {number} scale
+   * @returns {[number, number]}
+   */
+  percentageRange(scale = 1) {
+    let range;
+    if (this.coordMeta && this.coordMeta.range || this.coordRange && this.coordRange[0] >= 0) {
+      range = [0, 1];
+    } else {
+      range = [-1, 1];
+    }
+    return [range[0] * scale, range[1] * scale];
+  }
+  static get(type2, coordMeta) {
+    if (isInstance(type2, this)) {
+      return type2;
+    }
+    return new this(type2, coordMeta);
+  }
+}
+const instance = Symbol("instance");
+class Format {
+  /**
+   * @param {FormatInterface} format
+   * @param {ColorSpace} space
+   */
+  constructor(format, space = format.space) {
+    // Class properties - declared here so that type inference works
+    __publicField(this, "type");
+    __publicField(this, "name");
+    __publicField(this, "spaceCoords");
+    /** @type {Type[][]} */
+    __publicField(this, "coords");
+    /** @type {string | undefined} */
+    __publicField(this, "id");
+    /** @type {boolean | undefined} */
+    __publicField(this, "alpha");
+    format[instance] = this;
+    this.type = "function";
+    this.name = "color";
+    Object.assign(this, format);
+    this.space = space;
+    if (this.type === "custom") {
+      return;
+    }
+    this.spaceCoords = Object.values(space.coords);
+    if (!this.coords) {
+      this.coords = this.spaceCoords.map((coordMeta) => {
+        let ret = ["<number>", "<percentage>"];
+        if (coordMeta.type === "angle") {
+          ret.push("<angle>");
+        }
+        return ret;
+      });
+    }
+    this.coords = this.coords.map(
+      /** @param {string | string[] | Type[]} types */
+      (types, i2) => {
+        let coordMeta = this.spaceCoords[i2];
+        if (typeof types === "string") {
+          types = types.trim().split(/\s*\|\s*/);
+        }
+        return types.map((type2) => Type.get(type2, coordMeta));
+      }
+    );
+  }
+  /**
+   * @param {Coords} coords
+   * @param {number} precision
+   * @param {Type[]} types
+   */
+  serializeCoords(coords, precision, types) {
+    types = coords.map((_, i2) => Type.get((types == null ? void 0 : types[i2]) ?? this.coords[i2][0], this.spaceCoords[i2]));
+    return coords.map((c2, i2) => types[i2].serialize(c2, precision));
+  }
+  /**
+   * Validates the coordinates of a color against a format's coord grammar and
+   * maps the coordinates to the range or refRange of the coordinates.
+   * @param {Coords} coords
+   * @param {[string, string, string]} types
+   */
+  coerceCoords(coords, types) {
+    return Object.entries(this.space.coords).map(([id, coordMeta], i2) => {
+      let arg = coords[i2];
+      if (isNone(arg) || isNaN(arg)) {
+        return arg;
+      }
+      let providedType = types[i2];
+      let type2 = this.coords[i2].find((c2) => c2.type == providedType);
+      if (!type2) {
+        let coordName = coordMeta.name || id;
+        throw new TypeError(
+          `${providedType ?? /** @type {any} */
+          (arg == null ? void 0 : arg.raw) ?? arg} not allowed for ${coordName} in ${this.name}()`
+        );
+      }
+      arg = type2.resolve(arg);
+      if (type2.range) {
+        types[i2] = type2.toString();
+      }
+      return arg;
+    });
+  }
+  /**
+   * @returns {boolean | Required<FormatInterface>["serialize"]}
+   */
+  canSerialize() {
+    return this.type === "function" || /** @type {any} */
+    this.serialize;
+  }
+  /**
+   * @param {string} str
+   * @returns {(import("./types.js").ColorConstructor) | undefined | null}
+   */
+  parse(str) {
+    return null;
+  }
+  /**
+   * @param {Format | FormatInterface} format
+   * @param {RemoveFirstElement<ConstructorParameters<typeof Format>>} args
+   * @returns {Format}
+   */
+  static get(format, ...args) {
+    if (!format || isInstance(format, this)) {
+      return (
+        /** @type {Format} */
+        format
+      );
+    }
+    if (format[instance]) {
+      return format[instance];
+    }
+    return new Format(format, ...args);
+  }
+}
+class Hooks {
+  add(name2, callback, first) {
+    if (typeof arguments[0] != "string") {
+      for (var name2 in arguments[0]) {
+        this.add(name2, arguments[0][name2], arguments[1]);
+      }
+      return;
+    }
+    (Array.isArray(name2) ? name2 : [name2]).forEach(function(name3) {
+      this[name3] = this[name3] || [];
+      if (callback) {
+        this[name3][first ? "unshift" : "push"](callback);
+      }
+    }, this);
+  }
+  run(name2, env) {
+    this[name2] = this[name2] || [];
+    this[name2].forEach(function(callback) {
+      callback.call(env && env.context ? env.context : env, env);
+    });
+  }
+}
+const hooks = new Hooks();
+const WHITES = {
+  // for compatibility, the four-digit chromaticity-derived ones everyone else uses
+  D50: [0.3457 / 0.3585, 1, (1 - 0.3457 - 0.3585) / 0.3585],
+  D65: [0.3127 / 0.329, 1, (1 - 0.3127 - 0.329) / 0.329]
+};
+function getWhite(name2) {
+  if (Array.isArray(name2)) {
+    return name2;
+  }
+  return WHITES[name2];
+}
+function adapt(W1, W2, XYZ, options = {}) {
+  W1 = getWhite(W1);
+  W2 = getWhite(W2);
+  if (!W1 || !W2) {
+    throw new TypeError(
+      `Missing white point to convert ${!W1 ? "from" : ""}${!W1 && !W2 ? "/" : ""}${!W2 ? "to" : ""}`
+    );
+  }
+  if (W1 === W2) {
+    return XYZ;
+  }
+  let env = { W1, W2, XYZ, options };
+  hooks.run("chromatic-adaptation-start", env);
+  if (!env.M) {
+    if (env.W1 === WHITES.D65 && env.W2 === WHITES.D50) {
+      env.M = [
+        [1.0479297925449969, 0.022946870601609652, -0.05019226628920524],
+        [0.02962780877005599, 0.9904344267538799, -0.017073799063418826],
+        [-0.009243040646204504, 0.015055191490298152, 0.7518742814281371]
+      ];
+    } else if (env.W1 === WHITES.D50 && env.W2 === WHITES.D65) {
+      env.M = [
+        [0.955473421488075, -0.02309845494876471, 0.06325924320057072],
+        [-0.0283697093338637, 1.0099953980813041, 0.021041441191917323],
+        [0.012314014864481998, -0.020507649298898964, 1.330365926242124]
+      ];
+    }
+  }
+  hooks.run("chromatic-adaptation-end", env);
+  if (env.M) {
+    return multiply_v3_m3x3(env.XYZ, env.M);
+  } else {
+    throw new TypeError("Only Bradford CAT with white points D50 and D65 supported for now.");
+  }
+}
+const defaults = {
+  gamut_mapping: "css",
+  precision: 5,
+  deltaE: "76",
+  // Default deltaE method
+  verbose: ((_c = (_b = (_a = globalThis == null ? void 0 : globalThis.process) == null ? void 0 : _a.env) == null ? void 0 : _b.NODE_ENV) == null ? void 0 : _c.toLowerCase()) !== "test",
+  warn: function warn(msg) {
+    var _a2, _b2;
+    if (this.verbose) {
+      (_b2 = (_a2 = globalThis == null ? void 0 : globalThis.console) == null ? void 0 : _a2.warn) == null ? void 0 : _b2.call(_a2, msg);
+    }
+  }
+};
+function parse(str, options) {
+  var _a2, _b2, _c2;
+  let env = {
+    str: (_a2 = String(str)) == null ? void 0 : _a2.trim(),
+    options
+  };
+  hooks.run("parse-start", env);
+  if (env.color) {
+    return env.color;
+  }
+  env.parsed = parseFunction(env.str);
+  let ret;
+  let meta = env.options ? env.options.parseMeta ?? env.options.meta : null;
+  if (env.parsed) {
+    let name2 = env.parsed.name;
+    let format;
+    let space;
+    let coords = env.parsed.args;
+    let types = coords.map((c2, i2) => {
+      var _a3;
+      return (_a3 = env.parsed.argMeta[i2]) == null ? void 0 : _a3.type;
+    });
+    if (name2 === "color") {
+      let id = coords.shift();
+      types.shift();
+      let alternateId = id.startsWith("--") ? id.substring(2) : `--${id}`;
+      let ids = [id, alternateId];
+      format = ColorSpace.findFormat({ name: name2, id: ids, type: "function" });
+      if (!format) {
+        let didYouMean;
+        let registryId = id in ColorSpace.registry ? id : alternateId;
+        if (registryId in ColorSpace.registry) {
+          let cssId = (_c2 = (_b2 = ColorSpace.registry[registryId].formats) == null ? void 0 : _b2.color) == null ? void 0 : _c2.id;
+          if (cssId) {
+            let altColor = str.replace("color(" + id, "color(" + cssId);
+            didYouMean = `Did you mean ${altColor}?`;
+          }
+        }
+        throw new TypeError(
+          `Cannot parse ${env.str}. ` + (didYouMean ?? "Missing a plugin?")
+        );
+      }
+      space = format.space;
+      if (format.id.startsWith("--") && !id.startsWith("--")) {
+        defaults.warn(
+          `${space.name} is a non-standard space and not currently supported in the CSS spec. Use prefixed color(${format.id}) instead of color(${id}).`
+        );
+      }
+      if (id.startsWith("--") && !format.id.startsWith("--")) {
+        defaults.warn(
+          `${space.name} is a standard space and supported in the CSS spec. Use color(${format.id}) instead of prefixed color(${id}).`
+        );
+      }
+    } else {
+      format = ColorSpace.findFormat({ name: name2, type: "function" });
+      space = format.space;
+    }
+    if (meta) {
+      Object.assign(meta, {
+        format,
+        formatId: format.name,
+        types,
+        commas: env.parsed.commas
+      });
+    }
+    let alpha = 1;
+    if (env.parsed.lastAlpha) {
+      alpha = env.parsed.args.pop();
+      if (meta) {
+        meta.alphaType = types.pop();
+      }
+    }
+    let coordCount = format.coords.length;
+    if (coords.length !== coordCount) {
+      throw new TypeError(
+        `Expected ${coordCount} coordinates for ${space.id} in ${env.str}), got ${coords.length}`
+      );
+    }
+    coords = format.coerceCoords(coords, types);
+    ret = { spaceId: space.id, coords, alpha };
+  } else {
+    spaceloop: for (let space of ColorSpace.all) {
+      for (let formatId in space.formats) {
+        let format = space.formats[formatId];
+        if (format.type !== "custom") {
+          continue;
+        }
+        if (format.test && !format.test(env.str)) {
+          continue;
+        }
+        let formatObject = space.getFormat(format);
+        let color = formatObject.parse(env.str);
+        if (color) {
+          if (meta) {
+            Object.assign(meta, { format: formatObject, formatId });
+          }
+          ret = color;
+          break spaceloop;
+        }
+      }
+    }
+  }
+  if (!ret) {
+    throw new TypeError(`Could not parse ${str} as a color. Missing a plugin?`);
+  }
+  ret.alpha = isNone(ret.alpha) ? ret.alpha : ret.alpha === void 0 ? 1 : clamp(0, ret.alpha, 1);
+  return ret;
+}
+const units = {
+  "%": 0.01,
+  deg: 1,
+  grad: 0.9,
+  rad: 180 / Math.PI,
+  turn: 360
+};
+const regex = {
+  // Need to list calc(NaN) explicitly as otherwise its ending paren would terminate the function call
+  function: /^([a-z]+)\(((?:calc\(NaN\)|.)+?)\)$/i,
+  number: /^([-+]?(?:[0-9]*\.)?[0-9]+(e[-+]?[0-9]+)?)$/i,
+  unitValue: RegExp(`(${Object.keys(units).join("|")})$`),
+  // NOTE The -+ are not just for prefix, but also for idents, and e+N notation!
+  singleArgument: /\/?\s*(none|NaN|calc\(NaN\)|[-+\w.]+(?:%|deg|g?rad|turn)?)/g
+};
+function parseArgument(rawArg) {
+  var _a2;
+  let meta = {};
+  let unit = (_a2 = rawArg.match(regex.unitValue)) == null ? void 0 : _a2[0];
+  let value = meta.raw = rawArg;
+  if (unit) {
+    meta.type = unit === "%" ? "<percentage>" : "<angle>";
+    meta.unit = unit;
+    meta.unitless = Number(value.slice(0, -unit.length));
+    value = meta.unitless * units[unit];
+  } else if (regex.number.test(value)) {
+    value = Number(value);
+    meta.type = "<number>";
+  } else if (value === "none") {
+    value = null;
+  } else if (value === "NaN" || value === "calc(NaN)") {
+    value = NaN;
+    meta.type = "<number>";
+  } else {
+    meta.type = "<ident>";
+  }
+  return { value: (
+    /** @type {number} */
+    value
+  ), meta: (
+    /** @type {ArgumentMeta} */
+    meta
+  ) };
+}
+function parseFunction(str) {
+  if (!str) {
+    return;
+  }
+  str = str.trim();
+  let parts = str.match(regex.function);
+  if (parts) {
+    let args = [];
+    let argMeta = [];
+    let lastAlpha = false;
+    let name2 = parts[1].toLowerCase();
+    let separators = parts[2].replace(regex.singleArgument, ($0, rawArg) => {
+      let { value, meta } = parseArgument(rawArg);
+      if (
+        // If there's a slash here, it's modern syntax
+        $0.startsWith("/") || // If there's still elements to process after there's already 3 in `args` (and the we're not dealing with "color()"), it's likely to be a legacy color like "hsl(0, 0%, 0%, 0.5)"
+        name2 !== "color" && args.length === 3
+      ) {
+        lastAlpha = true;
+      }
+      args.push(value);
+      argMeta.push(meta);
+      return "";
+    });
+    return {
+      name: name2,
+      args,
+      argMeta,
+      lastAlpha,
+      commas: separators.includes(","),
+      rawName: parts[1],
+      rawArgs: parts[2]
+    };
+  }
+}
+function getColor(color, options) {
+  if (Array.isArray(color)) {
+    return color.map((c2) => getColor(c2, options));
+  }
+  if (!color) {
+    throw new TypeError("Empty color reference");
+  }
+  if (isString(color)) {
+    color = parse(color, options);
+  }
+  let space = color.space || color.spaceId;
+  if (typeof space === "string") {
+    color.space = ColorSpace.get(space);
+  }
+  if (color.alpha === void 0) {
+    color.alpha = 1;
+  }
+  return color;
+}
+const ε$1 = 75e-6;
+const _ColorSpace = class _ColorSpace {
+  constructor(options) {
+    var _a2;
+    this.id = options.id;
+    this.name = options.name;
+    this.base = options.base ? _ColorSpace.get(options.base) : null;
+    this.aliases = options.aliases;
+    if (this.base) {
+      this.fromBase = options.fromBase;
+      this.toBase = options.toBase;
+    }
+    let coords = options.coords ?? this.base.coords;
+    for (let name2 in coords) {
+      if (!("name" in coords[name2])) {
+        coords[name2].name = name2;
+      }
+    }
+    this.coords = coords;
+    let white2 = options.white ?? this.base.white ?? "D65";
+    this.white = getWhite(white2);
+    this.formats = options.formats ?? {};
+    for (let name2 in this.formats) {
+      let format = this.formats[name2];
+      format.type || (format.type = "function");
+      format.name || (format.name = name2);
+    }
+    if (!((_a2 = this.formats.color) == null ? void 0 : _a2.id)) {
+      this.formats.color = {
+        ...this.formats.color ?? {},
+        id: options.cssId || this.id
+      };
+    }
+    if (options.gamutSpace) {
+      this.gamutSpace = options.gamutSpace === "self" ? this : _ColorSpace.get(options.gamutSpace);
+    } else {
+      if (this.isPolar) {
+        this.gamutSpace = this.base;
+      } else {
+        this.gamutSpace = this;
+      }
+    }
+    if (this.gamutSpace.isUnbounded) {
+      this.inGamut = (coords2, options2) => {
+        return true;
+      };
+    }
+    this.referred = options.referred;
+    Object.defineProperty(this, "path", {
+      value: getPath(this).reverse(),
+      writable: false,
+      enumerable: true,
+      configurable: true
+    });
+    hooks.run("colorspace-init-end", this);
+  }
+  inGamut(coords, { epsilon = ε$1 } = {}) {
+    if (!this.equals(this.gamutSpace)) {
+      coords = this.to(this.gamutSpace, coords);
+      return this.gamutSpace.inGamut(coords, { epsilon });
+    }
+    let coordMeta = Object.values(this.coords);
+    return coords.every((c2, i2) => {
+      let meta = coordMeta[i2];
+      if (meta.type !== "angle" && meta.range) {
+        if (isNone(c2)) {
+          return true;
+        }
+        let [min, max] = meta.range;
+        return (min === void 0 || c2 >= min - epsilon) && (max === void 0 || c2 <= max + epsilon);
+      }
+      return true;
+    });
+  }
+  get isUnbounded() {
+    return Object.values(this.coords).every((coord) => !("range" in coord));
+  }
+  get cssId() {
+    var _a2, _b2;
+    return ((_b2 = (_a2 = this.formats) == null ? void 0 : _a2.color) == null ? void 0 : _b2.id) || this.id;
+  }
+  get isPolar() {
+    for (let id in this.coords) {
+      if (this.coords[id].type === "angle") {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Lookup a format in this color space
+   * @param {string | object | Format} format - Format id if string. If object, it's converted to a `Format` object and returned.
+   * @returns {Format}
+   */
+  getFormat(format) {
+    if (!format) {
+      return null;
+    }
+    if (format === "default") {
+      format = Object.values(this.formats)[0];
+    } else if (typeof format === "string") {
+      format = this.formats[format];
+    }
+    let ret = Format.get(format, this);
+    if (ret !== format && format.name in this.formats) {
+      this.formats[format.name] = ret;
+    }
+    return ret;
+  }
+  /**
+   * Check if this color space is the same as another color space reference.
+   * Allows proxying color space objects and comparing color spaces with ids.
+   * @param {string | ColorSpace} space ColorSpace object or id to compare to
+   * @returns {boolean}
+   */
+  equals(space) {
+    if (!space) {
+      return false;
+    }
+    return this === space || this.id === space || this.id === space.id;
+  }
+  to(space, coords) {
+    if (arguments.length === 1) {
+      const color = getColor(space);
+      [space, coords] = [color.space, color.coords];
+    }
+    space = _ColorSpace.get(space);
+    if (this.equals(space)) {
+      return coords;
+    }
+    coords = coords.map((c2) => isNone(c2) ? 0 : c2);
+    let myPath = this.path;
+    let otherPath = space.path;
+    let connectionSpace, connectionSpaceIndex;
+    for (let i2 = 0; i2 < myPath.length; i2++) {
+      if (myPath[i2].equals(otherPath[i2])) {
+        connectionSpace = myPath[i2];
+        connectionSpaceIndex = i2;
+      } else {
+        break;
+      }
+    }
+    if (!connectionSpace) {
+      throw new Error(
+        `Cannot convert between color spaces ${this} and ${space}: no connection space was found`
+      );
+    }
+    for (let i2 = myPath.length - 1; i2 > connectionSpaceIndex; i2--) {
+      coords = myPath[i2].toBase(coords);
+    }
+    for (let i2 = connectionSpaceIndex + 1; i2 < otherPath.length; i2++) {
+      coords = otherPath[i2].fromBase(coords);
+    }
+    return coords;
+  }
+  from(space, coords) {
+    if (arguments.length === 1) {
+      const color = getColor(space);
+      [space, coords] = [color.space, color.coords];
+    }
+    space = _ColorSpace.get(space);
+    return space.to(this, coords);
+  }
+  toString() {
+    return `${this.name} (${this.id})`;
+  }
+  getMinCoords() {
+    let ret = [];
+    for (let id in this.coords) {
+      let meta = this.coords[id];
+      let range = meta.range || meta.refRange;
+      ret.push((range == null ? void 0 : range.min) ?? 0);
+    }
+    return ret;
+  }
+  // Returns array of unique color spaces
+  static get all() {
+    return [...new Set(Object.values(_ColorSpace.registry))];
+  }
+  static register(id, space) {
+    if (arguments.length === 1) {
+      space = arguments[0];
+      id = space.id;
+    }
+    space = this.get(space);
+    if (this.registry[id] && this.registry[id] !== space) {
+      throw new Error(`Duplicate color space registration: '${id}'`);
+    }
+    this.registry[id] = space;
+    if (arguments.length === 1 && space.aliases) {
+      for (let alias of space.aliases) {
+        this.register(alias, space);
+      }
+    }
+    return space;
+  }
+  /**
+   * Lookup ColorSpace object by name
+   * @param {ColorSpace | string} name
+   */
+  static get(space, ...alternatives) {
+    if (!space || isInstance(space, this)) {
+      return space;
+    }
+    let argType = type$1(space);
+    if (argType === "string") {
+      let ret = _ColorSpace.registry[space.toLowerCase()];
+      if (!ret) {
+        throw new TypeError(`No color space found with id = "${space}"`);
+      }
+      return ret;
+    }
+    if (alternatives.length) {
+      return _ColorSpace.get(...alternatives);
+    }
+    throw new TypeError(`${space} is not a valid color space`);
+  }
+  /**
+   * Look up all color spaces for a format that matches certain criteria
+   * @param {object | string} filters
+   * @param {Array<ColorSpace>} [spaces=ColorSpace.all]
+   * @returns {Format | null}
+   */
+  static findFormat(filters, spaces = _ColorSpace.all) {
+    if (!filters) {
+      return null;
+    }
+    if (typeof filters === "string") {
+      filters = { name: filters };
+    }
+    for (let space of spaces) {
+      for (let [name2, format] of Object.entries(space.formats)) {
+        format.name ?? (format.name = name2);
+        format.type ?? (format.type = "function");
+        let matches = (!filters.name || format.name === filters.name) && (!filters.type || format.type === filters.type);
+        if (filters.id) {
+          let ids = format.ids || [format.id];
+          let filterIds = Array.isArray(filters.id) ? filters.id : [filters.id];
+          matches && (matches = filterIds.some((id) => ids.includes(id)));
+        }
+        if (matches) {
+          let ret = Format.get(format, space);
+          if (ret !== format) {
+            space.formats[format.name] = ret;
+          }
+          return ret;
+        }
+      }
+    }
+    return null;
+  }
+  /**
+   * Get metadata about a coordinate of a color space
+   *
+   * @static
+   * @param {Array | string} ref
+   * @param {ColorSpace | string} [workingSpace]
+   * @return {Object}
+   */
+  static resolveCoord(ref, workingSpace) {
+    var _a2;
+    let coordType = type$1(ref);
+    let space, coord;
+    if (coordType === "string") {
+      if (ref.includes(".")) {
+        [space, coord] = ref.split(".");
+      } else {
+        [space, coord] = [, ref];
+      }
+    } else if (Array.isArray(ref)) {
+      [space, coord] = ref;
+    } else {
+      space = ref.space;
+      coord = ref.coordId;
+    }
+    space = _ColorSpace.get(space);
+    if (!space) {
+      space = workingSpace;
+    }
+    if (!space) {
+      throw new TypeError(
+        `Cannot resolve coordinate reference ${ref}: No color space specified and relative references are not allowed here`
+      );
+    }
+    coordType = type$1(coord);
+    if (coordType === "number" || coordType === "string" && coord >= 0) {
+      let meta = Object.entries(space.coords)[coord];
+      if (meta) {
+        return { space, id: meta[0], index: coord, ...meta[1] };
+      }
+    }
+    space = _ColorSpace.get(space);
+    let normalizedCoord = coord.toLowerCase();
+    let i2 = 0;
+    for (let id in space.coords) {
+      let meta = space.coords[id];
+      if (id.toLowerCase() === normalizedCoord || ((_a2 = meta.name) == null ? void 0 : _a2.toLowerCase()) === normalizedCoord) {
+        return { space, id, index: i2, ...meta };
+      }
+      i2++;
+    }
+    throw new TypeError(
+      `No "${coord}" coordinate found in ${space.name}. Its coordinates are: ${Object.keys(space.coords).join(", ")}`
+    );
+  }
+};
+__publicField(_ColorSpace, "registry", {});
+__publicField(_ColorSpace, "DEFAULT_FORMAT", {
+  type: "functions",
+  name: "color"
+});
+let ColorSpace = _ColorSpace;
+function getPath(space) {
+  let ret = [space];
+  for (let s2 = space; s2 = s2.base; ) {
+    ret.push(s2);
+  }
+  return ret;
+}
+const xyz_d65 = new ColorSpace({
+  id: "xyz-d65",
+  name: "XYZ D65",
+  coords: {
+    x: {
+      refRange: [0, 1],
+      name: "X"
+    },
+    y: {
+      refRange: [0, 1],
+      name: "Y"
+    },
+    z: {
+      refRange: [0, 1],
+      name: "Z"
+    }
+  },
+  white: "D65",
+  formats: {
+    color: {
+      ids: ["xyz-d65", "xyz"]
+    }
+  },
+  aliases: ["xyz"]
+});
+class RGBColorSpace extends ColorSpace {
+  /**
+   * Creates a new RGB ColorSpace.
+   * If coords are not specified, they will use the default RGB coords.
+   * Instead of `fromBase()` and `toBase()` functions,
+   * you can specify to/from XYZ matrices and have `toBase()` and `fromBase()` automatically generated.
+   * @param {RGBOptions} options
+   */
+  constructor(options) {
+    if (!options.coords) {
+      options.coords = {
+        r: {
+          range: [0, 1],
+          name: "Red"
+        },
+        g: {
+          range: [0, 1],
+          name: "Green"
+        },
+        b: {
+          range: [0, 1],
+          name: "Blue"
+        }
+      };
+    }
+    if (!options.base) {
+      options.base = xyz_d65;
+    }
+    if (options.toXYZ_M && options.fromXYZ_M) {
+      options.toBase ?? (options.toBase = (rgb) => {
+        let xyz = multiply_v3_m3x3(rgb, options.toXYZ_M);
+        if (this.white !== this.base.white) {
+          xyz = adapt(this.white, this.base.white, xyz);
+        }
+        return xyz;
+      });
+      options.fromBase ?? (options.fromBase = (xyz) => {
+        xyz = adapt(this.base.white, this.white, xyz);
+        return multiply_v3_m3x3(xyz, options.fromXYZ_M);
+      });
+    }
+    options.referred ?? (options.referred = "display");
+    super(options);
+  }
+}
+const XYZ_D50 = new ColorSpace({
+  id: "xyz-d50",
+  name: "XYZ D50",
+  white: "D50",
+  base: xyz_d65,
+  fromBase: (coords) => adapt(xyz_d65.white, "D50", coords),
+  toBase: (coords) => adapt("D50", xyz_d65.white, coords)
+});
+const ε = 216 / 24389;
+const ε3 = 24 / 116;
+const κ = 24389 / 27;
+let white = WHITES.D50;
+const lab = new ColorSpace({
+  id: "lab",
+  name: "Lab",
+  coords: {
+    l: {
+      refRange: [0, 100],
+      name: "Lightness"
+    },
+    a: {
+      refRange: [-125, 125]
+    },
+    b: {
+      refRange: [-125, 125]
+    }
+  },
+  // Assuming XYZ is relative to D50, convert to CIE Lab
+  // from CIE standard, which now defines these as a rational fraction
+  white,
+  base: XYZ_D50,
+  // Convert D50-adapted XYX to Lab
+  // CIE 15.3:2004 section 8.2.1.1
+  fromBase(XYZ) {
+    let xyz = XYZ.map((value, i2) => value / white[i2]);
+    let f2 = xyz.map((value) => value > ε ? Math.cbrt(value) : (κ * value + 16) / 116);
+    let L2 = 116 * f2[1] - 16;
+    let a2 = 500 * (f2[0] - f2[1]);
+    let b2 = 200 * (f2[1] - f2[2]);
+    return [L2, a2, b2];
+  },
+  // Convert Lab to D50-adapted XYZ
+  // Same result as CIE 15.3:2004 Appendix D although the derivation is different
+  // http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+  toBase(Lab) {
+    let [L2, a2, b2] = Lab;
+    let f2 = [];
+    f2[1] = (L2 + 16) / 116;
+    f2[0] = a2 / 500 + f2[1];
+    f2[2] = f2[1] - b2 / 200;
+    let xyz = [
+      f2[0] > ε3 ? Math.pow(f2[0], 3) : (116 * f2[0] - 16) / κ,
+      Lab[0] > 8 ? Math.pow((Lab[0] + 16) / 116, 3) : Lab[0] / κ,
+      f2[2] > ε3 ? Math.pow(f2[2], 3) : (116 * f2[2] - 16) / κ
+    ];
+    return xyz.map((value, i2) => value * white[i2]);
+  },
+  formats: {
+    lab: {
+      coords: [
+        "<percentage> | <number>",
+        "<number> | <percentage>",
+        "<number> | <percentage>"
+      ]
+    }
+  }
+});
+function constrain(angle) {
+  if (typeof angle !== "number") {
+    return angle;
+  }
+  return (angle % 360 + 360) % 360;
+}
+const lch = new ColorSpace({
+  id: "lch",
+  name: "LCH",
+  coords: {
+    l: {
+      refRange: [0, 100],
+      name: "Lightness"
+    },
+    c: {
+      refRange: [0, 150],
+      name: "Chroma"
+    },
+    h: {
+      refRange: [0, 360],
+      type: "angle",
+      name: "Hue"
+    }
+  },
+  base: lab,
+  fromBase(Lab) {
+    if (this.ε === void 0) {
+      let range = Object.values(this.base.coords)[1].refRange;
+      let extent = range[1] - range[0];
+      this.ε = extent / 1e5;
+    }
+    let [L2, a2, b2] = Lab;
+    let isAchromatic = Math.abs(a2) < this.ε && Math.abs(b2) < this.ε;
+    let h7 = isAchromatic ? null : constrain(Math.atan2(b2, a2) * 180 / Math.PI);
+    let C2 = isAchromatic ? 0 : Math.sqrt(a2 ** 2 + b2 ** 2);
+    return [L2, C2, h7];
+  },
+  toBase(lch2) {
+    let [L2, C2, h7] = lch2;
+    let a2 = null, b2 = null;
+    if (!isNone(h7)) {
+      C2 = C2 < 0 ? 0 : C2;
+      a2 = C2 * Math.cos(h7 * Math.PI / 180);
+      b2 = C2 * Math.sin(h7 * Math.PI / 180);
+    }
+    return [L2, a2, b2];
+  },
+  formats: {
+    lch: {
+      coords: ["<percentage> | <number>", "<number> | <percentage>", "<number> | <angle>"]
+    }
+  }
+});
+const XYZtoLMS_M = [
+  [0.819022437996703, 0.3619062600528904, -0.1288737815209879],
+  [0.0329836539323885, 0.9292868615863434, 0.0361446663506424],
+  [0.0481771893596242, 0.2642395317527308, 0.6335478284694309]
+];
+const LMStoXYZ_M = [
+  [1.2268798758459243, -0.5578149944602171, 0.2813910456659647],
+  [-0.0405757452148008, 1.112286803280317, -0.0717110580655164],
+  [-0.0763729366746601, -0.4214933324022432, 1.5869240198367816]
+];
+const LMStoLab_M = [
+  [0.210454268309314, 0.7936177747023054, -0.0040720430116193],
+  [1.9779985324311684, -2.42859224204858, 0.450593709617411],
+  [0.0259040424655478, 0.7827717124575296, -0.8086757549230774]
+];
+const LabtoLMS_M = [
+  [1, 0.3963377773761749, 0.2158037573099136],
+  [1, -0.1055613458156586, -0.0638541728258133],
+  [1, -0.0894841775298119, -1.2914855480194092]
+];
+const Oklab = new ColorSpace({
+  id: "oklab",
+  name: "Oklab",
+  coords: {
+    l: {
+      refRange: [0, 1],
+      name: "Lightness"
+    },
+    a: {
+      refRange: [-0.4, 0.4]
+    },
+    b: {
+      refRange: [-0.4, 0.4]
+    }
+  },
+  // Note that XYZ is relative to D65
+  white: "D65",
+  base: xyz_d65,
+  fromBase(XYZ) {
+    let LMS = multiply_v3_m3x3(XYZ, XYZtoLMS_M);
+    LMS[0] = Math.cbrt(LMS[0]);
+    LMS[1] = Math.cbrt(LMS[1]);
+    LMS[2] = Math.cbrt(LMS[2]);
+    return multiply_v3_m3x3(LMS, LMStoLab_M, LMS);
+  },
+  toBase(OKLab) {
+    let LMSg = multiply_v3_m3x3(OKLab, LabtoLMS_M);
+    LMSg[0] = LMSg[0] ** 3;
+    LMSg[1] = LMSg[1] ** 3;
+    LMSg[2] = LMSg[2] ** 3;
+    return multiply_v3_m3x3(LMSg, LMStoXYZ_M, LMSg);
+  },
+  formats: {
+    oklab: {
+      coords: [
+        "<percentage> | <number>",
+        "<number> | <percentage>",
+        "<number> | <percentage>"
+      ]
+    }
+  }
+});
+const toXYZ_M$4 = [
+  [0.6369580483012914, 0.14461690358620832, 0.1688809751641721],
+  [0.2627002120112671, 0.6779980715188708, 0.05930171646986196],
+  [0, 0.028072693049087428, 1.060985057710791]
+];
+const fromXYZ_M$4 = [
+  [1.716651187971268, -0.355670783776392, -0.25336628137366],
+  [-0.666684351832489, 1.616481236634939, 0.0157685458139111],
+  [0.017639857445311, -0.042770613257809, 0.942103121235474]
+];
+const REC_2020_Linear = new RGBColorSpace({
+  id: "rec2020-linear",
+  cssId: "--rec2020-linear",
+  name: "Linear REC.2020",
+  white: "D65",
+  toXYZ_M: toXYZ_M$4,
+  fromXYZ_M: fromXYZ_M$4
+});
+const REC2020 = new RGBColorSpace({
+  id: "rec2020",
+  name: "REC.2020",
+  base: REC_2020_Linear,
+  //  Reference electro-optical transfer function from Rec. ITU-R BT.1886 Annex 1
+  //  with b (black lift) = 0 and a (user gain) = 1
+  //  defined over the extended range, not clamped
+  toBase(RGB) {
+    return RGB.map(function(val) {
+      let sign = val < 0 ? -1 : 1;
+      let abs = val * sign;
+      return sign * Math.pow(abs, 2.4);
+    });
+  },
+  fromBase(RGB) {
+    return RGB.map(function(val) {
+      let sign = val < 0 ? -1 : 1;
+      let abs = val * sign;
+      return sign * Math.pow(abs, 1 / 2.4);
+    });
+  }
+});
+const toXYZ_M$3 = [
+  [0.4865709486482162, 0.26566769316909306, 0.1982172852343625],
+  [0.2289745640697488, 0.6917385218365064, 0.079286914093745],
+  [0, 0.04511338185890264, 1.043944368900976]
+];
+const fromXYZ_M$3 = [
+  [2.493496911941425, -0.9313836179191239, -0.40271078445071684],
+  [-0.8294889695615747, 1.7626640603183463, 0.023624685841943577],
+  [0.03584583024378447, -0.07617238926804182, 0.9568845240076872]
+];
+const P3Linear = new RGBColorSpace({
+  id: "p3-linear",
+  cssId: "display-p3-linear",
+  name: "Linear P3",
+  white: "D65",
+  toXYZ_M: toXYZ_M$3,
+  fromXYZ_M: fromXYZ_M$3
+});
+const toXYZ_M$2 = [
+  [0.41239079926595934, 0.357584339383878, 0.1804807884018343],
+  [0.21263900587151027, 0.715168678767756, 0.07219231536073371],
+  [0.01933081871559182, 0.11919477979462598, 0.9505321522496607]
+];
+const fromXYZ_M$2 = [
+  [3.2409699419045226, -1.537383177570094, -0.4986107602930034],
+  [-0.9692436362808796, 1.8759675015077202, 0.04155505740717559],
+  [0.05563007969699366, -0.20397695888897652, 1.0569715142428786]
+];
+const sRGBLinear = new RGBColorSpace({
+  id: "srgb-linear",
+  name: "Linear sRGB",
+  white: "D65",
+  toXYZ_M: toXYZ_M$2,
+  fromXYZ_M: fromXYZ_M$2
+});
+const KEYWORDS = {
+  aliceblue: [240 / 255, 248 / 255, 1],
+  antiquewhite: [250 / 255, 235 / 255, 215 / 255],
+  aqua: [0, 1, 1],
+  aquamarine: [127 / 255, 1, 212 / 255],
+  azure: [240 / 255, 1, 1],
+  beige: [245 / 255, 245 / 255, 220 / 255],
+  bisque: [1, 228 / 255, 196 / 255],
+  black: [0, 0, 0],
+  blanchedalmond: [1, 235 / 255, 205 / 255],
+  blue: [0, 0, 1],
+  blueviolet: [138 / 255, 43 / 255, 226 / 255],
+  brown: [165 / 255, 42 / 255, 42 / 255],
+  burlywood: [222 / 255, 184 / 255, 135 / 255],
+  cadetblue: [95 / 255, 158 / 255, 160 / 255],
+  chartreuse: [127 / 255, 1, 0],
+  chocolate: [210 / 255, 105 / 255, 30 / 255],
+  coral: [1, 127 / 255, 80 / 255],
+  cornflowerblue: [100 / 255, 149 / 255, 237 / 255],
+  cornsilk: [1, 248 / 255, 220 / 255],
+  crimson: [220 / 255, 20 / 255, 60 / 255],
+  cyan: [0, 1, 1],
+  darkblue: [0, 0, 139 / 255],
+  darkcyan: [0, 139 / 255, 139 / 255],
+  darkgoldenrod: [184 / 255, 134 / 255, 11 / 255],
+  darkgray: [169 / 255, 169 / 255, 169 / 255],
+  darkgreen: [0, 100 / 255, 0],
+  darkgrey: [169 / 255, 169 / 255, 169 / 255],
+  darkkhaki: [189 / 255, 183 / 255, 107 / 255],
+  darkmagenta: [139 / 255, 0, 139 / 255],
+  darkolivegreen: [85 / 255, 107 / 255, 47 / 255],
+  darkorange: [1, 140 / 255, 0],
+  darkorchid: [153 / 255, 50 / 255, 204 / 255],
+  darkred: [139 / 255, 0, 0],
+  darksalmon: [233 / 255, 150 / 255, 122 / 255],
+  darkseagreen: [143 / 255, 188 / 255, 143 / 255],
+  darkslateblue: [72 / 255, 61 / 255, 139 / 255],
+  darkslategray: [47 / 255, 79 / 255, 79 / 255],
+  darkslategrey: [47 / 255, 79 / 255, 79 / 255],
+  darkturquoise: [0, 206 / 255, 209 / 255],
+  darkviolet: [148 / 255, 0, 211 / 255],
+  deeppink: [1, 20 / 255, 147 / 255],
+  deepskyblue: [0, 191 / 255, 1],
+  dimgray: [105 / 255, 105 / 255, 105 / 255],
+  dimgrey: [105 / 255, 105 / 255, 105 / 255],
+  dodgerblue: [30 / 255, 144 / 255, 1],
+  firebrick: [178 / 255, 34 / 255, 34 / 255],
+  floralwhite: [1, 250 / 255, 240 / 255],
+  forestgreen: [34 / 255, 139 / 255, 34 / 255],
+  fuchsia: [1, 0, 1],
+  gainsboro: [220 / 255, 220 / 255, 220 / 255],
+  ghostwhite: [248 / 255, 248 / 255, 1],
+  gold: [1, 215 / 255, 0],
+  goldenrod: [218 / 255, 165 / 255, 32 / 255],
+  gray: [128 / 255, 128 / 255, 128 / 255],
+  green: [0, 128 / 255, 0],
+  greenyellow: [173 / 255, 1, 47 / 255],
+  grey: [128 / 255, 128 / 255, 128 / 255],
+  honeydew: [240 / 255, 1, 240 / 255],
+  hotpink: [1, 105 / 255, 180 / 255],
+  indianred: [205 / 255, 92 / 255, 92 / 255],
+  indigo: [75 / 255, 0, 130 / 255],
+  ivory: [1, 1, 240 / 255],
+  khaki: [240 / 255, 230 / 255, 140 / 255],
+  lavender: [230 / 255, 230 / 255, 250 / 255],
+  lavenderblush: [1, 240 / 255, 245 / 255],
+  lawngreen: [124 / 255, 252 / 255, 0],
+  lemonchiffon: [1, 250 / 255, 205 / 255],
+  lightblue: [173 / 255, 216 / 255, 230 / 255],
+  lightcoral: [240 / 255, 128 / 255, 128 / 255],
+  lightcyan: [224 / 255, 1, 1],
+  lightgoldenrodyellow: [250 / 255, 250 / 255, 210 / 255],
+  lightgray: [211 / 255, 211 / 255, 211 / 255],
+  lightgreen: [144 / 255, 238 / 255, 144 / 255],
+  lightgrey: [211 / 255, 211 / 255, 211 / 255],
+  lightpink: [1, 182 / 255, 193 / 255],
+  lightsalmon: [1, 160 / 255, 122 / 255],
+  lightseagreen: [32 / 255, 178 / 255, 170 / 255],
+  lightskyblue: [135 / 255, 206 / 255, 250 / 255],
+  lightslategray: [119 / 255, 136 / 255, 153 / 255],
+  lightslategrey: [119 / 255, 136 / 255, 153 / 255],
+  lightsteelblue: [176 / 255, 196 / 255, 222 / 255],
+  lightyellow: [1, 1, 224 / 255],
+  lime: [0, 1, 0],
+  limegreen: [50 / 255, 205 / 255, 50 / 255],
+  linen: [250 / 255, 240 / 255, 230 / 255],
+  magenta: [1, 0, 1],
+  maroon: [128 / 255, 0, 0],
+  mediumaquamarine: [102 / 255, 205 / 255, 170 / 255],
+  mediumblue: [0, 0, 205 / 255],
+  mediumorchid: [186 / 255, 85 / 255, 211 / 255],
+  mediumpurple: [147 / 255, 112 / 255, 219 / 255],
+  mediumseagreen: [60 / 255, 179 / 255, 113 / 255],
+  mediumslateblue: [123 / 255, 104 / 255, 238 / 255],
+  mediumspringgreen: [0, 250 / 255, 154 / 255],
+  mediumturquoise: [72 / 255, 209 / 255, 204 / 255],
+  mediumvioletred: [199 / 255, 21 / 255, 133 / 255],
+  midnightblue: [25 / 255, 25 / 255, 112 / 255],
+  mintcream: [245 / 255, 1, 250 / 255],
+  mistyrose: [1, 228 / 255, 225 / 255],
+  moccasin: [1, 228 / 255, 181 / 255],
+  navajowhite: [1, 222 / 255, 173 / 255],
+  navy: [0, 0, 128 / 255],
+  oldlace: [253 / 255, 245 / 255, 230 / 255],
+  olive: [128 / 255, 128 / 255, 0],
+  olivedrab: [107 / 255, 142 / 255, 35 / 255],
+  orange: [1, 165 / 255, 0],
+  orangered: [1, 69 / 255, 0],
+  orchid: [218 / 255, 112 / 255, 214 / 255],
+  palegoldenrod: [238 / 255, 232 / 255, 170 / 255],
+  palegreen: [152 / 255, 251 / 255, 152 / 255],
+  paleturquoise: [175 / 255, 238 / 255, 238 / 255],
+  palevioletred: [219 / 255, 112 / 255, 147 / 255],
+  papayawhip: [1, 239 / 255, 213 / 255],
+  peachpuff: [1, 218 / 255, 185 / 255],
+  peru: [205 / 255, 133 / 255, 63 / 255],
+  pink: [1, 192 / 255, 203 / 255],
+  plum: [221 / 255, 160 / 255, 221 / 255],
+  powderblue: [176 / 255, 224 / 255, 230 / 255],
+  purple: [128 / 255, 0, 128 / 255],
+  rebeccapurple: [102 / 255, 51 / 255, 153 / 255],
+  red: [1, 0, 0],
+  rosybrown: [188 / 255, 143 / 255, 143 / 255],
+  royalblue: [65 / 255, 105 / 255, 225 / 255],
+  saddlebrown: [139 / 255, 69 / 255, 19 / 255],
+  salmon: [250 / 255, 128 / 255, 114 / 255],
+  sandybrown: [244 / 255, 164 / 255, 96 / 255],
+  seagreen: [46 / 255, 139 / 255, 87 / 255],
+  seashell: [1, 245 / 255, 238 / 255],
+  sienna: [160 / 255, 82 / 255, 45 / 255],
+  silver: [192 / 255, 192 / 255, 192 / 255],
+  skyblue: [135 / 255, 206 / 255, 235 / 255],
+  slateblue: [106 / 255, 90 / 255, 205 / 255],
+  slategray: [112 / 255, 128 / 255, 144 / 255],
+  slategrey: [112 / 255, 128 / 255, 144 / 255],
+  snow: [1, 250 / 255, 250 / 255],
+  springgreen: [0, 1, 127 / 255],
+  steelblue: [70 / 255, 130 / 255, 180 / 255],
+  tan: [210 / 255, 180 / 255, 140 / 255],
+  teal: [0, 128 / 255, 128 / 255],
+  thistle: [216 / 255, 191 / 255, 216 / 255],
+  tomato: [1, 99 / 255, 71 / 255],
+  turquoise: [64 / 255, 224 / 255, 208 / 255],
+  violet: [238 / 255, 130 / 255, 238 / 255],
+  wheat: [245 / 255, 222 / 255, 179 / 255],
+  white: [1, 1, 1],
+  whitesmoke: [245 / 255, 245 / 255, 245 / 255],
+  yellow: [1, 1, 0],
+  yellowgreen: [154 / 255, 205 / 255, 50 / 255]
+};
+let coordGrammar = Array(3).fill("<percentage> | <number>[0, 255]");
+let coordGrammarNumber = Array(3).fill("<number>[0, 255]");
+const sRGB = new RGBColorSpace({
+  id: "srgb",
+  name: "sRGB",
+  base: sRGBLinear,
+  fromBase: (rgb) => {
+    return rgb.map((val) => {
+      let sign = val < 0 ? -1 : 1;
+      let abs = val * sign;
+      if (abs > 31308e-7) {
+        return sign * (1.055 * abs ** (1 / 2.4) - 0.055);
+      }
+      return 12.92 * val;
+    });
+  },
+  toBase: (rgb) => {
+    return rgb.map((val) => {
+      let sign = val < 0 ? -1 : 1;
+      let abs = val * sign;
+      if (abs <= 0.04045) {
+        return val / 12.92;
+      }
+      return sign * ((abs + 0.055) / 1.055) ** 2.4;
+    });
+  },
+  formats: {
+    rgb: {
+      coords: coordGrammar
+    },
+    rgb_number: {
+      name: "rgb",
+      commas: true,
+      coords: coordGrammarNumber,
+      alpha: false
+    },
+    color: {
+      /* use defaults */
+    },
+    rgba: {
+      coords: coordGrammar,
+      commas: true,
+      alpha: true
+    },
+    rgba_number: {
+      name: "rgba",
+      commas: true,
+      coords: coordGrammarNumber
+    },
+    hex: {
+      type: "custom",
+      toGamut: true,
+      test: (str) => /^#(([a-f0-9]{2}){3,4}|[a-f0-9]{3,4})$/i.test(str),
+      parse(str) {
+        if (str.length <= 5) {
+          str = str.replace(/[a-f0-9]/gi, "$&$&");
+        }
+        let rgba = [];
+        str.replace(/[a-f0-9]{2}/gi, (component) => {
+          rgba.push(parseInt(component, 16) / 255);
+        });
+        return {
+          spaceId: "srgb",
+          coords: (
+            /** @type {Coords} */
+            rgba.slice(0, 3)
+          ),
+          alpha: (
+            /** @type {number} */
+            rgba.slice(3)[0]
+          )
+        };
+      },
+      serialize: (coords, alpha, {
+        collapse = true,
+        // collapse to 3-4 digit hex when possible?
+        alpha: alphaFormat
+      } = {}) => {
+        if (alphaFormat !== false && alpha < 1 || alphaFormat === true) {
+          coords.push(alpha);
+        }
+        coords = /** @type {[number, number, number]} */
+        coords.map((c2) => Math.round(c2 * 255));
+        let collapsible = collapse && coords.every((c2) => c2 % 17 === 0);
+        let hex = coords.map((c2) => {
+          if (collapsible) {
+            return (c2 / 17).toString(16);
+          }
+          return c2.toString(16).padStart(2, "0");
+        }).join("");
+        return "#" + hex;
+      }
+    },
+    keyword: {
+      type: "custom",
+      test: (str) => /^[a-z]+$/i.test(str),
+      parse(str) {
+        str = str.toLowerCase();
+        let ret = { spaceId: "srgb", coords: null, alpha: 1 };
+        if (str === "transparent") {
+          ret.coords = KEYWORDS.black;
+          ret.alpha = 0;
+        } else {
+          ret.coords = KEYWORDS[str];
+        }
+        if (ret.coords) {
+          return ret;
+        }
+      }
+    }
+  }
+});
+const P3 = new RGBColorSpace({
+  id: "p3",
+  cssId: "display-p3",
+  name: "P3",
+  base: P3Linear,
+  // Gamma encoding/decoding is the same as sRGB
+  fromBase: sRGB.fromBase,
+  toBase: sRGB.toBase
+});
+const hsl = new ColorSpace({
+  id: "hsl",
+  name: "HSL",
+  coords: {
+    h: {
+      refRange: [0, 360],
+      type: "angle",
+      name: "Hue"
+    },
+    s: {
+      range: [0, 100],
+      name: "Saturation"
+    },
+    l: {
+      range: [0, 100],
+      name: "Lightness"
+    }
+  },
+  base: sRGB,
+  // Adapted from https://drafts.csswg.org/css-color-4/better-rgbToHsl.js
+  fromBase: (rgb) => {
+    let max = Math.max(...rgb);
+    let min = Math.min(...rgb);
+    let [r2, g2, b2] = rgb;
+    let [h7, s2, l2] = [null, 0, (min + max) / 2];
+    let d2 = max - min;
+    if (d2 !== 0) {
+      s2 = l2 === 0 || l2 === 1 ? 0 : (max - l2) / Math.min(l2, 1 - l2);
+      switch (max) {
+        case r2:
+          h7 = (g2 - b2) / d2 + (g2 < b2 ? 6 : 0);
+          break;
+        case g2:
+          h7 = (b2 - r2) / d2 + 2;
+          break;
+        case b2:
+          h7 = (r2 - g2) / d2 + 4;
+      }
+      h7 = h7 * 60;
+    }
+    if (s2 < 0) {
+      h7 += 180;
+      s2 = Math.abs(s2);
+    }
+    if (h7 >= 360) {
+      h7 -= 360;
+    }
+    return [h7, s2 * 100, l2 * 100];
+  },
+  // Adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
+  toBase: (hsl2) => {
+    let [h7, s2, l2] = hsl2;
+    h7 = h7 % 360;
+    if (h7 < 0) {
+      h7 += 360;
+    }
+    s2 /= 100;
+    l2 /= 100;
+    function f2(n2) {
+      let k2 = (n2 + h7 / 30) % 12;
+      let a2 = s2 * Math.min(l2, 1 - l2);
+      return l2 - a2 * Math.max(-1, Math.min(k2 - 3, 9 - k2, 1));
+    }
+    return [f2(0), f2(8), f2(4)];
+  },
+  formats: {
+    hsl: {
+      coords: ["<number> | <angle>", "<percentage> | <number>", "<percentage> | <number>"]
+    },
+    hsla: {
+      coords: ["<number> | <angle>", "<percentage> | <number>", "<percentage> | <number>"],
+      commas: true,
+      alpha: true
+    }
+  }
+});
+const HSV = new ColorSpace({
+  id: "hsv",
+  name: "HSV",
+  coords: {
+    h: {
+      refRange: [0, 360],
+      type: "angle",
+      name: "Hue"
+    },
+    s: {
+      range: [0, 100],
+      name: "Saturation"
+    },
+    v: {
+      range: [0, 100],
+      name: "Value"
+    }
+  },
+  base: sRGB,
+  // https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
+  fromBase(rgb) {
+    let max = Math.max(...rgb);
+    let min = Math.min(...rgb);
+    let [r2, g2, b2] = rgb;
+    let [h7, s2, v2] = [null, 0, max];
+    let d2 = max - min;
+    if (d2 !== 0) {
+      switch (max) {
+        case r2:
+          h7 = (g2 - b2) / d2 + (g2 < b2 ? 6 : 0);
+          break;
+        case g2:
+          h7 = (b2 - r2) / d2 + 2;
+          break;
+        case b2:
+          h7 = (r2 - g2) / d2 + 4;
+      }
+      h7 = h7 * 60;
+    }
+    if (v2) {
+      s2 = d2 / v2;
+    }
+    if (h7 >= 360) {
+      h7 -= 360;
+    }
+    return [h7, s2 * 100, v2 * 100];
+  },
+  // Adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative
+  toBase(hsv) {
+    let [h7, s2, v2] = hsv;
+    h7 = h7 % 360;
+    if (h7 < 0) {
+      h7 += 360;
+    }
+    s2 /= 100;
+    v2 /= 100;
+    function f2(n2) {
+      let k2 = (n2 + h7 / 60) % 6;
+      return v2 - v2 * s2 * Math.max(0, Math.min(k2, 4 - k2, 1));
+    }
+    return [f2(5), f2(3), f2(1)];
+  },
+  formats: {
+    color: {
+      id: "--hsv",
+      coords: ["<number> | <angle>", "<percentage> | <number>", "<percentage> | <number>"]
+    }
+  }
+});
+const hwb = new ColorSpace({
+  id: "hwb",
+  name: "HWB",
+  coords: {
+    h: {
+      refRange: [0, 360],
+      type: "angle",
+      name: "Hue"
+    },
+    w: {
+      range: [0, 100],
+      name: "Whiteness"
+    },
+    b: {
+      range: [0, 100],
+      name: "Blackness"
+    }
+  },
+  base: HSV,
+  fromBase(hsv) {
+    let [h7, s2, v2] = hsv;
+    return [h7, v2 * (100 - s2) / 100, 100 - v2];
+  },
+  toBase(hwb2) {
+    let [h7, w2, b2] = hwb2;
+    w2 /= 100;
+    b2 /= 100;
+    let sum = w2 + b2;
+    if (sum >= 1) {
+      let gray = w2 / sum;
+      return [h7, 0, gray * 100];
+    }
+    let v2 = 1 - b2;
+    let s2 = v2 === 0 ? 0 : 1 - w2 / v2;
+    return [h7, s2 * 100, v2 * 100];
+  },
+  formats: {
+    hwb: {
+      coords: ["<number> | <angle>", "<percentage> | <number>", "<percentage> | <number>"]
+    }
+  }
+});
+const toXYZ_M$1 = [
+  [0.5766690429101305, 0.1855582379065463, 0.1882286462349947],
+  [0.29734497525053605, 0.6273635662554661, 0.07529145849399788],
+  [0.02703136138641234, 0.07068885253582723, 0.9913375368376388]
+];
+const fromXYZ_M$1 = [
+  [2.0415879038107465, -0.5650069742788596, -0.34473135077832956],
+  [-0.9692436362808795, 1.8759675015077202, 0.04155505740717557],
+  [0.013444280632031142, -0.11836239223101838, 1.0151749943912054]
+];
+const A98Linear = new RGBColorSpace({
+  id: "a98rgb-linear",
+  cssId: "--a98-rgb-linear",
+  name: "Linear Adobe® 98 RGB compatible",
+  white: "D65",
+  toXYZ_M: toXYZ_M$1,
+  fromXYZ_M: fromXYZ_M$1
+});
+const a98rgb = new RGBColorSpace({
+  id: "a98rgb",
+  cssId: "a98-rgb",
+  name: "Adobe® 98 RGB compatible",
+  base: A98Linear,
+  toBase: (RGB) => RGB.map((val) => Math.pow(Math.abs(val), 563 / 256) * Math.sign(val)),
+  fromBase: (RGB) => RGB.map((val) => Math.pow(Math.abs(val), 256 / 563) * Math.sign(val))
+});
+const toXYZ_M = [
+  [0.7977666449006423, 0.13518129740053308, 0.0313477341283922],
+  [0.2880748288194013, 0.711835234241873, 8993693872564e-17],
+  [0, 0, 0.8251046025104602]
+];
+const fromXYZ_M = [
+  [1.3457868816471583, -0.25557208737979464, -0.05110186497554526],
+  [-0.5446307051249019, 1.5082477428451468, 0.02052744743642139],
+  [0, 0, 1.2119675456389452]
+];
+const ProPhotoLinear = new RGBColorSpace({
+  id: "prophoto-linear",
+  cssId: "--prophoto-rgb-linear",
+  name: "Linear ProPhoto",
+  white: "D50",
+  base: XYZ_D50,
+  toXYZ_M,
+  fromXYZ_M
+});
+const Et = 1 / 512;
+const Et2 = 16 / 512;
+const prophoto = new RGBColorSpace({
+  id: "prophoto",
+  cssId: "prophoto-rgb",
+  name: "ProPhoto",
+  base: ProPhotoLinear,
+  toBase(RGB) {
+    return RGB.map((v2) => {
+      let sign = v2 < 0 ? -1 : 1;
+      let abs = v2 * sign;
+      if (abs < Et2) {
+        return v2 / 16;
+      }
+      return sign * abs ** 1.8;
+    });
+  },
+  fromBase(RGB) {
+    return RGB.map((v2) => {
+      let sign = v2 < 0 ? -1 : 1;
+      let abs = v2 * sign;
+      if (abs >= Et) {
+        return sign * abs ** (1 / 1.8);
+      }
+      return 16 * v2;
+    });
+  }
+});
+const oklch = new ColorSpace({
+  id: "oklch",
+  name: "OkLCh",
+  coords: {
+    l: {
+      refRange: [0, 1],
+      name: "Lightness"
+    },
+    c: {
+      refRange: [0, 0.4],
+      name: "Chroma"
+    },
+    h: {
+      refRange: [0, 360],
+      type: "angle",
+      name: "Hue"
+    }
+  },
+  white: "D65",
+  base: Oklab,
+  fromBase: lch.fromBase,
+  toBase: lch.toBase,
+  formats: {
+    oklch: {
+      coords: ["<percentage> | <number>", "<number> | <percentage>", "<number> | <angle>"]
+    }
+  }
+});
 var prefixStyles = (styleMap) => {
   const newStyleMap = /* @__PURE__ */ new Map();
   for (const [property, value] of styleMap) {
@@ -822,8 +2617,14 @@ var toValue = (styleValue, transformValue) => {
   }
   if (value.type === "color") {
     let [c1, c2, c3] = value.components;
-    const alpha = value.alpha;
+    const alpha = typeof value.alpha === "number" ? value.alpha : toValue(value.alpha);
     switch (value.colorSpace) {
+      case "hex": {
+        const toHex = (v2) => Math.round(Math.min(Math.max(v2, 0), 1) * 255).toString(16).padStart(2, "0");
+        const hex = `#${toHex(c1)}${toHex(c2)}${toHex(c3)}`;
+        const alphaNum = typeof alpha === "number" ? alpha : 1;
+        return alphaNum < 1 ? hex + toHex(alphaNum) : hex;
+      }
       case "srgb": {
         c1 = Math.round(c1 * 255);
         c2 = Math.round(c2 * 255);
@@ -842,11 +2643,15 @@ var toValue = (styleValue, transformValue) => {
         return `oklab(${c1} ${c2} ${c3} / ${alpha})`;
       case "oklch":
         return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
-      // Fall back to color() function for less common color spaces
+      // Fall back to color() function for less common color spaces.
+      // colorjs uses internal short names that differ from CSS predefined color space identifiers.
       case "p3":
-      case "srgb-linear":
+        return `color(display-p3 ${c1} ${c2} ${c3} / ${alpha})`;
       case "a98rgb":
+        return `color(a98-rgb ${c1} ${c2} ${c3} / ${alpha})`;
       case "prophoto":
+        return `color(prophoto-rgb ${c1} ${c2} ${c3} / ${alpha})`;
+      case "srgb-linear":
       case "rec2020":
       case "xyz-d65":
       case "xyz-d50":
@@ -939,6 +2744,7 @@ var ColorValue = z.object({
   type: z.literal("color"),
   // all these color spaces are defined by design tokens specification
   colorSpace: z.union([
+    z.literal("hex"),
     z.literal("srgb"),
     z.literal("p3"),
     z.literal("srgb-linear"),
@@ -955,7 +2761,7 @@ var ColorValue = z.object({
     z.literal("xyz-d50")
   ]),
   components: z.tuple([z.number(), z.number(), z.number()]),
-  alpha: z.number(),
+  alpha: z.union([z.number(), z.lazy(() => VarValue)]),
   hidden: z.boolean().optional()
 });
 var FunctionValue = z.object({
@@ -1087,12 +2893,12 @@ var isLonghandValue = (value) => {
 var mergeBorder = (styleMap, base) => {
   const width = styleMap.get(`${base}-width`);
   const style = styleMap.get(`${base}-style`);
-  const color = styleMap.get(`${base}-color`);
-  if (isLonghandValue(width) && isLonghandValue(style) && isLonghandValue(color)) {
+  const color2 = styleMap.get(`${base}-color`);
+  if (isLonghandValue(width) && isLonghandValue(style) && isLonghandValue(color2)) {
     styleMap.delete(`${base}-width`);
     styleMap.delete(`${base}-style`);
     styleMap.delete(`${base}-color`);
-    styleMap.set(base, { type: "tuple", value: [width, style, color] });
+    styleMap.set(base, { type: "tuple", value: [width, style, color2] });
   }
 };
 var mergeBox = (styleMap, base) => {
@@ -1250,7 +3056,7 @@ var getDeclarationKey = (declaraionKey) => {
   const { breakpoint, selector, property } = declaraionKey;
   return `${breakpoint}:${selector}:${property}`;
 };
-var MixinRule = (_a = class {
+var MixinRule = (_d = class {
   constructor() {
     // use map to avoid duplicated properties
     __privateAdd(this, _declarations, /* @__PURE__ */ new Map());
@@ -1281,8 +3087,8 @@ var MixinRule = (_a = class {
   getDeclarations() {
     return __privateGet(this, _declarations).values();
   }
-}, _declarations = new WeakMap(), _dirtyBreakpoints = new WeakMap(), _a);
-var NestingRule = (_b = class {
+}, _declarations = new WeakMap(), _dirtyBreakpoints = new WeakMap(), _d);
+var NestingRule = (_e = class {
   constructor(mixinRules, selector, descendantSuffix) {
     __privateAdd(this, _NestingRule_instances);
     __privateAdd(this, _selector);
@@ -1391,8 +3197,8 @@ ${spaces}}
     declarations.set(getDeclarationKey(declaration), declaration);
   }
   return declarations.values();
-}, _b);
-var MediaRule = (_c = class {
+}, _e);
+var MediaRule = (_f = class {
   constructor(name2, options = {}) {
     __privateAdd(this, _name);
     __publicField(this, "options");
@@ -1451,7 +3257,7 @@ var MediaRule = (_c = class {
 ${rules.join("\n")}
 }`;
   }
-}, _name = new WeakMap(), _c);
+}, _name = new WeakMap(), _f);
 var PlaintextRule = class {
   constructor(cssText) {
     __publicField(this, "cssText");
@@ -1461,7 +3267,7 @@ var PlaintextRule = class {
     return this.cssText;
   }
 };
-var FontFaceRule = (_d = class {
+var FontFaceRule = (_g = class {
   constructor(options) {
     __privateAdd(this, _cached);
     __privateAdd(this, _options);
@@ -1491,7 +3297,7 @@ var FontFaceRule = (_d = class {
 }`);
     return __privateGet(this, _cached);
   }
-}, _cached = new WeakMap(), _options = new WeakMap(), _d);
+}, _cached = new WeakMap(), _options = new WeakMap(), _g);
 var isSimulatedCondition = (options) => options.mediaType !== void 0 && options.condition === void 0 && options.minWidth === void 0 && options.maxWidth === void 0;
 var isCondition = (options) => options.condition !== void 0 || isSimulatedCondition(options);
 var compareMedia = (optionA, optionB) => {
@@ -1526,7 +3332,7 @@ var compareMedia = (optionA, optionB) => {
   }
   return "minWidth" in optionA ? 1 : -1;
 };
-var StyleElement = (_e = class {
+var StyleElement = (_h = class {
   constructor(name2 = "") {
     __privateAdd(this, _element);
     __privateAdd(this, _name2);
@@ -1565,8 +3371,8 @@ var StyleElement = (_e = class {
       return __privateGet(this, _element).getAttribute(name2);
     }
   }
-}, _element = new WeakMap(), _name2 = new WeakMap(), _e);
-var StyleSheet = (_f = class {
+}, _element = new WeakMap(), _name2 = new WeakMap(), _h);
+var StyleSheet = (_i = class {
   constructor(element) {
     __privateAdd(this, _cssText, "");
     __privateAdd(this, _mediaRules, /* @__PURE__ */ new Map());
@@ -1676,7 +3482,7 @@ var StyleSheet = (_f = class {
   getAttribute(name2) {
     return __privateGet(this, _element2).getAttribute(name2);
   }
-}, _cssText = new WeakMap(), _mediaRules = new WeakMap(), _plainRules = new WeakMap(), _mixinRules2 = new WeakMap(), _fontFaceRules = new WeakMap(), _transformValue = new WeakMap(), _element2 = new WeakMap(), _f);
+}, _cssText = new WeakMap(), _mediaRules = new WeakMap(), _plainRules = new WeakMap(), _mixinRules2 = new WeakMap(), _fontFaceRules = new WeakMap(), _transformValue = new WeakMap(), _element2 = new WeakMap(), _i);
 var StyleSheetRegular = class extends StyleSheet {
 };
 var createRegularStyleSheet = (options) => {
@@ -1723,6 +3529,23 @@ var generateAtomic = (sheet, options) => {
   });
   return { cssText, classes };
 };
+ColorSpace.register(sRGB);
+ColorSpace.register(sRGBLinear);
+ColorSpace.register(hsl);
+ColorSpace.register(hwb);
+ColorSpace.register(lab);
+ColorSpace.register(lch);
+ColorSpace.register(Oklab);
+ColorSpace.register(oklch);
+ColorSpace.register(P3);
+ColorSpace.register(a98rgb);
+ColorSpace.register(prophoto);
+ColorSpace.register(REC2020);
+ColorSpace.register(xyz_d65);
+ColorSpace.register(XYZ_D50);
+ColorSpace.registry["display-p3"] = P3;
+ColorSpace.registry["a98-rgb"] = a98rgb;
+ColorSpace.registry["prophoto-rgb"] = prophoto;
 var AccordionIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.056 8H14.5V4.101a1.3 1.3 0 0 0-1.3-1.299H2.8a1.3 1.3 0 0 0-1.3 1.3V8H13.056ZM13.056 13.198h.145a1.3 1.3 0 0 0 1.299-1.3V8h-13v3.899a1.3 1.3 0 0 0 1.3 1.299h10.256Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.026 4.913.975.976.976-.976M10.026 10.111l.975.976.976-.976"/></svg>`;
 var AddTemplateInstanceIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.5 2H3.333A1.333 1.333 0 0 0 2 3.333V4.5M14 12.667c0 .021 0 .042-.002.063M11.5 14h1.167a1.333 1.333 0 0 0 1.331-1.27m0 0V11.5M2 11.5v1.167A1.333 1.333 0 0 0 3.333 14H4.5M7 14h2M2 7v2M8.461 4.77H14M11.23 2v5.538"/></svg>`;
 var AnimationGroupIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.5 8.3C6.3 7.7 7.8 8 9.3 11c.3-1.8 1.2-4.5 2.1-6M4.208 1.5H2.944A1.444 1.444 0 0 0 1.5 2.944v1.264m13 0V2.944A1.444 1.444 0 0 0 13.056 1.5h-1.264M14.5 13.056c0 .023 0 .046-.002.069M11.792 14.5h1.264a1.444 1.444 0 0 0 1.442-1.375m0 0v-1.333m-12.998 0v1.264A1.444 1.444 0 0 0 2.944 14.5h1.264m2.709-13h2.166m-2.166 13h2.166M1.5 6.917v2.166m13-2.166v2.166"/></svg>`;
@@ -2339,12 +4162,11 @@ var Breakpoint = z.object({
   if (condition !== void 0) {
     return minWidth === void 0 && maxWidth === void 0;
   }
-  return (
-    // Either min or max width have to be defined
-    minWidth !== void 0 && maxWidth === void 0 || minWidth === void 0 && maxWidth !== void 0 || // This is a base breakpoint
-    minWidth === void 0 && maxWidth === void 0
-  );
-}, "Either minWidth, maxWidth, or condition should be defined, but not both");
+  if (minWidth !== void 0 && maxWidth !== void 0) {
+    return minWidth < maxWidth;
+  }
+  return true;
+}, "Width-based (minWidth/maxWidth) and condition are mutually exclusive, and minWidth must be less than maxWidth");
 z.map(BreakpointId, Breakpoint);
 var StyleSourceId = z.string();
 var StyleSourceToken = z.object({
@@ -2427,7 +4249,7 @@ var Tag = z.object({
   defaultValue: z.undefined().optional(),
   options: z.array(z.string())
 });
-var Number = z.object({
+var Number$1 = z.object({
   ...common,
   control: z.literal("number"),
   type: z.literal("number"),
@@ -2571,7 +4393,7 @@ var AnimationAction = z.object({
 });
 var PropMeta = z.union([
   Tag,
-  Number,
+  Number$1,
   Range,
   Text,
   Resource2,
@@ -2900,6 +4722,11 @@ var span$1 = div$1;
 var html = [
   { property: "display", value: { type: "keyword", value: "grid" } },
   { property: "min-height", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "grid-template-rows", value: { type: "keyword", value: "auto" } },
+  {
+    property: "grid-template-columns",
+    value: { type: "unit", unit: "fr", value: 1 }
+  },
   {
     property: "font-family",
     value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
@@ -3334,7 +5161,7 @@ var tags = [
 ];
 var rootComponent = "ws:root";
 var rootMeta = {
-  label: "Global Root",
+  label: "Global root",
   icon: SettingsIcon,
   presetStyle: {
     html
@@ -3447,15 +5274,15 @@ var coreMetas = {
 var isCoreComponent = (component) => component === rootComponent || component === elementComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
 var ROOT_INSTANCE_ID = ":root";
 var traverseInstances = (instances, instanceId, callback) => {
-  const instance = instances.get(instanceId);
-  if (instance === void 0) {
+  const instance2 = instances.get(instanceId);
+  if (instance2 === void 0) {
     return;
   }
-  const skipTraversingChildren = callback(instance);
+  const skipTraversingChildren = callback(instance2);
   if (skipTraversingChildren === false) {
     return;
   }
-  for (const child of instance.children) {
+  for (const child of instance2.children) {
     if (child.type === "id") {
       traverseInstances(instances, child.value, callback);
     }
@@ -3463,8 +5290,8 @@ var traverseInstances = (instances, instanceId, callback) => {
 };
 var findTreeInstanceIds = (instances, rootInstanceId) => {
   const ids = /* @__PURE__ */ new Set([rootInstanceId]);
-  traverseInstances(instances, rootInstanceId, (instance) => {
-    ids.add(instance.id);
+  traverseInstances(instances, rootInstanceId, (instance2) => {
+    ids.add(instance2.id);
   });
   return ids;
 };
@@ -3488,16 +5315,16 @@ var getIndexesWithinAncestors = (metas, instances, rootIds) => {
   }
   const indexes = /* @__PURE__ */ new Map();
   const traverseInstances2 = (instances2, instanceId, latestIndexes2 = /* @__PURE__ */ new Map()) => {
-    const instance = instances2.get(instanceId);
-    if (instance === void 0) {
+    const instance2 = instances2.get(instanceId);
+    if (instance2 === void 0) {
       return;
     }
-    const meta = metas.get(instance.component);
-    if (ancestors.has(instance.component)) {
+    const meta = metas.get(instance2.component);
+    if (ancestors.has(instance2.component)) {
       latestIndexes2 = new Map(latestIndexes2);
-      latestIndexes2.set(instance.component, /* @__PURE__ */ new Map());
+      latestIndexes2.set(instance2.component, /* @__PURE__ */ new Map());
     }
-    if (instance.component === blockTemplateComponent) {
+    if (instance2.component === blockTemplateComponent) {
       latestIndexes2 = new Map(latestIndexes2);
       for (const key of latestIndexes2.keys()) {
         latestIndexes2.set(key, /* @__PURE__ */ new Map());
@@ -3506,13 +5333,13 @@ var getIndexesWithinAncestors = (metas, instances, rootIds) => {
     if ((meta == null ? void 0 : meta.indexWithinAncestor) !== void 0) {
       const ancestorIndexes = latestIndexes2.get(meta.indexWithinAncestor);
       if (ancestorIndexes) {
-        let index = ancestorIndexes.get(instance.component) ?? -1;
+        let index = ancestorIndexes.get(instance2.component) ?? -1;
         index += 1;
-        ancestorIndexes.set(instance.component, index);
-        indexes.set(instance.id, index);
+        ancestorIndexes.set(instance2.component, index);
+        indexes.set(instance2.id, index);
       }
     }
-    for (const child of instance.children) {
+    for (const child of instance2.children) {
       if (child.type === "id") {
         traverseInstances2(instances2, child.value, latestIndexes2);
       }
@@ -4104,16 +5931,16 @@ var generateCss = ({
       tagByInstanceId.set(prop.instanceId, prop.value);
     }
   }
-  for (const instance of instances.values()) {
-    const propTag = tagByInstanceId.get(instance.id);
-    const meta = componentMetas.get(instance.component);
+  for (const instance2 of instances.values()) {
+    const propTag = tagByInstanceId.get(instance2.id);
+    const meta = componentMetas.get(instance2.component);
     const metaTag = Object.keys((meta == null ? void 0 : meta.presetStyle) ?? {}).at(0);
-    let componentTags = tagsByComponent.get(instance.component);
+    let componentTags = tagsByComponent.get(instance2.component);
     if (componentTags === void 0) {
       componentTags = /* @__PURE__ */ new Set();
-      tagsByComponent.set(instance.component, componentTags);
+      tagsByComponent.set(instance2.component, componentTags);
     }
-    const tag = instance.tag ?? propTag ?? metaTag;
+    const tag = instance2.tag ?? propTag ?? metaTag;
     if (tag) {
       componentTags.add(tag);
     }
@@ -4160,14 +5987,14 @@ var generateCss = ({
   }
   const classes = /* @__PURE__ */ new Map();
   const parentIdByInstanceId = /* @__PURE__ */ new Map();
-  for (const instance of instances.values()) {
-    const presetClass = presetClasses.get(instance.component);
+  for (const instance2 of instances.values()) {
+    const presetClass = presetClasses.get(instance2.component);
     if (presetClass) {
-      classes.set(instance.id, [presetClass]);
+      classes.set(instance2.id, [presetClass]);
     }
-    for (const child of instance.children) {
+    for (const child of instance2.children) {
       if (child.type === "id") {
-        parentIdByInstanceId.set(child.value, instance.id);
+        parentIdByInstanceId.set(child.value, instance2.id);
       }
     }
   }
@@ -4187,11 +6014,11 @@ var generateCss = ({
       continue;
     }
     let descendantSuffix = "";
-    const instance = instances.get(instanceId);
-    if (instance === void 0) {
+    const instance2 = instances.get(instanceId);
+    if (instance2 === void 0) {
       continue;
     }
-    if (instance.component === descendantComponent) {
+    if (instance2.component === descendantComponent) {
       const parentId = parentIdByInstanceId.get(instanceId);
       const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
       if (parentId && descendantSelector) {
@@ -4199,9 +6026,9 @@ var generateCss = ({
         instanceId = parentId;
       }
     }
-    const meta = componentMetas.get(instance.component);
-    const [_namespace, shortName] = parseComponentName(instance.component);
-    const baseName = instance.label ?? (meta == null ? void 0 : meta.label) ?? shortName;
+    const meta = componentMetas.get(instance2.component);
+    const [_namespace, shortName] = parseComponentName(instance2.component);
+    const baseName = instance2.label ?? (meta == null ? void 0 : meta.label) ?? shortName;
     const className = `w-${scope.getName(instanceId, baseName)}`;
     if (atomic === false) {
       let classList = classes.get(instanceId);
@@ -4620,7 +6447,7 @@ var generateJsxElement = ({
   scope,
   metas,
   tagsOverrides,
-  instance,
+  instance: instance2,
   props,
   dataSources,
   usedDataSources,
@@ -4629,20 +6456,20 @@ var generateJsxElement = ({
   classesMap
 }) => {
   var _a2;
-  if (instance.component === descendantComponent) {
+  if (instance2.component === descendantComponent) {
     return "";
   }
-  const meta = metas.get(instance.component);
+  const meta = metas.get(instance2.component);
   const hasTags = Object.keys((meta == null ? void 0 : meta.presetStyle) ?? {}).length > 0;
   let generatedProps = "";
-  const index = indexesWithinAncestors.get(instance.id);
+  const index = indexesWithinAncestors.get(instance2.id);
   if (index !== void 0) {
     generatedProps += `
 ${indexProperty}="${index}"`;
   }
-  if (instance.tag !== void 0 && instance.component !== elementComponent) {
+  if (instance2.tag !== void 0 && instance2.component !== elementComponent) {
     generatedProps += `
-${tagProperty}=${JSON.stringify(instance.tag)}`;
+${tagProperty}=${JSON.stringify(instance2.tag)}`;
   }
   let conditionValue;
   let collectionDataValue;
@@ -4650,7 +6477,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
   let collectionItemKeyValue;
   let classNameValue;
   for (const prop of props.values()) {
-    if (prop.instanceId !== instance.id) {
+    if (prop.instanceId !== instance2.id) {
       continue;
     }
     const propValue = generatePropValue({
@@ -4676,7 +6503,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
       conditionValue = propValue;
       continue;
     }
-    if (instance.component === collectionComponent) {
+    if (instance2.component === collectionComponent) {
       if (prop.name === "data") {
         collectionDataValue = propValue;
       }
@@ -4697,7 +6524,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
 ${name2}={${propValue}}`;
     }
   }
-  const classMapArray = classesMap == null ? void 0 : classesMap.get(instance.id);
+  const classMapArray = classesMap == null ? void 0 : classesMap.get(instance2.id);
   if (classMapArray || classNameValue) {
     let classNameTemplate = classMapArray ? classMapArray.join(" ") : "";
     if (classNameValue) {
@@ -4709,14 +6536,14 @@ ${name2}={${propValue}}`;
     generatedProps += "\nclassName={`" + classNameTemplate + "`}";
   }
   let generatedElement = "";
-  if (instance.component === blockTemplateComponent) {
+  if (instance2.component === blockTemplateComponent) {
     return "";
   }
-  if (instance.component === collectionComponent) {
+  if (instance2.component === collectionComponent) {
     if (collectionDataValue === void 0 || collectionItemValue === void 0) {
       return "";
     }
-    const indexVariable = scope.getName(`${instance.id}-index`, "index");
+    const indexVariable = scope.getName(`${instance2.id}-index`, "index");
     const keyVariable = collectionItemKeyValue ?? indexVariable;
     generatedElement += `{${generateCollectionIterationCode({
       dataExpression: collectionDataValue,
@@ -4735,22 +6562,22 @@ ${name2}={${propValue}}`;
 `;
     generatedElement += `}
 `;
-  } else if (instance.component === blockComponent) {
+  } else if (instance2.component === blockComponent) {
     generatedElement += children;
   } else {
     let componentVariable;
-    if (instance.component === elementComponent) {
-      componentVariable = instance.tag ?? "div";
+    if (instance2.component === elementComponent) {
+      componentVariable = instance2.tag ?? "div";
       const componentDescriptor = tagsOverrides == null ? void 0 : tagsOverrides[componentVariable];
       if (componentDescriptor !== void 0) {
         const [_importSource, importSpecifier] = componentDescriptor.split(":");
         componentVariable = scope.getName(componentDescriptor, importSpecifier);
       }
     } else {
-      const [_namespace, shortName] = parseComponentName(instance.component);
-      componentVariable = scope.getName(instance.component, shortName);
+      const [_namespace, shortName] = parseComponentName(instance2.component);
+      componentVariable = scope.getName(instance2.component, shortName);
     }
-    if (instance.children.length === 0) {
+    if (instance2.children.length === 0) {
       generatedElement += `<${componentVariable}${generatedProps} />
 `;
     } else {
@@ -4771,7 +6598,7 @@ ${name2}={${propValue}}`;
     }
     conditionalElement += `${before}(${conditionValue}) &&
 `;
-    if (instance.component === collectionComponent) {
+    if (instance2.component === collectionComponent) {
       conditionalElement += "<>\n";
       conditionalElement += generatedElement;
       conditionalElement += "</>\n";
@@ -4821,8 +6648,8 @@ var generateJsxChildren = ({
     }
     if (child.type === "id") {
       const instanceId = child.value;
-      const instance = instances.get(instanceId);
-      if (instance === void 0) {
+      const instance2 = instances.get(instanceId);
+      if (instance2 === void 0) {
         continue;
       }
       generatedChildren += generateJsxElement({
@@ -4830,7 +6657,7 @@ var generateJsxChildren = ({
         scope,
         metas,
         tagsOverrides,
-        instance,
+        instance: instance2,
         props,
         dataSources,
         usedDataSources,
@@ -4841,7 +6668,7 @@ var generateJsxChildren = ({
           scope,
           metas,
           tagsOverrides,
-          children: instance.children,
+          children: instance2.children,
           instances,
           props,
           dataSources,
@@ -4867,19 +6694,19 @@ var generateWebstudioComponent = ({
   tagsOverrides,
   classesMap
 }) => {
-  const instance = instances.get(rootInstanceId);
+  const instance2 = instances.get(rootInstanceId);
   const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
     rootInstanceId
   ]);
   const usedDataSources = /* @__PURE__ */ new Map();
   let generatedJsx = "<></>\n";
-  if (instance) {
+  if (instance2) {
     generatedJsx = generateJsxElement({
       context: "expression",
       scope,
       metas,
       tagsOverrides,
-      instance,
+      instance: instance2,
       props,
       dataSources,
       usedDataSources,
@@ -4889,7 +6716,7 @@ var generateWebstudioComponent = ({
         scope,
         metas,
         tagsOverrides,
-        children: instance.children,
+        children: instance2.children,
         instances,
         props,
         dataSources,
@@ -8459,7 +10286,7 @@ audit=false
 fund=false
 `;
 const prebuild = async (options) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g, _h, _i, _j, _k;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j, _k;
   if (options.template.length === 0) {
     log.error(
       `Template is not provided
@@ -8527,12 +10354,12 @@ Please check webstudio --help for more details`
     );
     pageInstanceSet.add(ROOT_INSTANCE_ID);
     const instances = [];
-    for (const [_instanceId, instance] of siteData.build.instances) {
-      if (pageInstanceSet.has(instance.id)) {
-        instances.push([instance.id, instance]);
-        const meta = framework.metas[instance.component];
+    for (const [_instanceId, instance2] of siteData.build.instances) {
+      if (pageInstanceSet.has(instance2.id)) {
+        instances.push([instance2.id, instance2]);
+        const meta = framework.metas[instance2.component];
         if (meta) {
-          usedMetas.set(instance.component, meta);
+          usedMetas.set(instance2.component, meta);
         }
       }
     }
@@ -8625,7 +10452,7 @@ Please check webstudio --help for more details`
     // pass only used metas to not generate unused preset styles
     componentMetas: usedMetas,
     assetBaseUrl,
-    atomic: ((_g = siteData.build.pages.compiler) == null ? void 0 : _g.atomicStyles) ?? true
+    atomic: ((_g2 = siteData.build.pages.compiler) == null ? void 0 : _g2.atomicStyles) ?? true
   });
   await createFileIfNotExists(join(generatedDir, "index.css"), cssText);
   for (const page of Object.values(siteData.pages)) {
@@ -8648,22 +10475,22 @@ Please check webstudio --help for more details`
       if ((firstChild == null ? void 0 : firstChild.type) === "id") {
         rootInstanceId = firstChild.value;
       }
-      for (const instance of instances.values()) {
-        if (isCoreComponent(instance.component)) {
+      for (const instance2 of instances.values()) {
+        if (isCoreComponent(instance2.component)) {
           continue;
         }
-        if (((_h = usedMetas.get(instance.component)) == null ? void 0 : _h.category) === "xml") {
+        if (((_h2 = usedMetas.get(instance2.component)) == null ? void 0 : _h2.category) === "xml") {
           continue;
         }
-        instances.delete(instance.id);
+        instances.delete(instance2.id);
       }
     }
     const imports2 = /* @__PURE__ */ new Map();
-    for (const instance of instances.values()) {
-      let descriptor = framework.components[instance.component];
-      let id = instance.component;
-      if (instance.component === elementComponent && instance.tag) {
-        descriptor = framework.tags[instance.tag];
+    for (const instance2 of instances.values()) {
+      let descriptor = framework.components[instance2.component];
+      let id = instance2.component;
+      if (instance2.component === elementComponent && instance2.tag) {
+        descriptor = framework.tags[instance2.tag];
         id = descriptor;
       }
       if (descriptor === void 0) {
@@ -8725,7 +10552,7 @@ Please check webstudio --help for more details`
     const projectMeta = siteData.build.pages.meta;
     const contactEmail = (
       // fallback to user email when contact email is empty string
-      (projectMeta == null ? void 0 : projectMeta.contactEmail) || ((_i = siteData.user) == null ? void 0 : _i.email) || void 0
+      (projectMeta == null ? void 0 : projectMeta.contactEmail) || ((_i2 = siteData.user) == null ? void 0 : _i2.email) || void 0
     );
     const favIconAsset = (_j = assets.get((projectMeta == null ? void 0 : projectMeta.faviconAssetId) ?? "")) == null ? void 0 : _j.name;
     const pagePath = getPagePath(page.id, siteData.build.pages);
@@ -9041,7 +10868,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.255.0";
+const version = "0.258.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";