@cortex-js/compute-engine 0.55.6 → 0.57.0

package/dist/compile.umd.cjs

@@ -1,4 +1,4 @@
-/** Compile 0.55.6 */
+/** Compile 0.57.0 */
     (function(global,factory){typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'],factory):(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Compile = {}));})(this, (function (exports) { 'use strict';
 var Compile = (() => {
   var __defProp = Object.defineProperty;
@@ -1544,6 +1544,7 @@ var Compile = (() => {
   ];
   var VALUE_TYPES = [
     "value",
+    "color",
     ...COLLECTION_TYPES,
     ...SCALAR_TYPES
   ];
@@ -3239,6 +3240,7 @@ var Compile = (() => {
     symbol: [],
     boolean: [],
     string: [],
+    color: [],
     expression: EXPRESSION_TYPES
   };
   function isPrimitiveSubtype(lhs, rhs) {
@@ -5209,6 +5211,64 @@ var Compile = (() => {
   }
 
   // src/compute-engine/latex-syntax/dictionary/definitions-core.ts
+  var COMPONENT_ACCESS_HEADS = {
+    x: "First",
+    y: "Second",
+    z: "Third",
+    real: "Real",
+    re: "Real",
+    imag: "Imaginary",
+    im: "Imaginary",
+    count: "Length",
+    total: "Sum",
+    max: "Max",
+    min: "Min"
+  };
+  function memberHead(name) {
+    return COMPONENT_ACCESS_HEADS[name] ?? null;
+  }
+  function parseComponentAccess(parser, lhs) {
+    parser.skipVisualSpace();
+    if (parser.match("\\operatorname")) {
+      const name = parser.parseStringGroup();
+      if (name === null) return null;
+      const head = memberHead(name.trim());
+      if (head === null) return null;
+      return [head, lhs];
+    }
+    const tok = parser.peek;
+    if (typeof tok === "string" && tok.startsWith("\\")) {
+      const bare = tok.slice(1);
+      const head = memberHead(bare);
+      if (head !== null) {
+        parser.nextToken();
+        return [head, lhs];
+      }
+      return null;
+    }
+    if (typeof tok === "string" && /^[a-zA-Z]$/.test(tok)) {
+      const head = memberHead(tok);
+      if (head === null) return null;
+      parser.nextToken();
+      return [head, lhs];
+    }
+    return null;
+  }
+  function parseWhenRestriction(parser, lhs, close) {
+    parser.addBoundary(close);
+    parser.skipVisualSpace();
+    const cond = parser.parseExpression({ minPrec: 0 });
+    if (cond === null) {
+      parser.removeBoundary();
+      return null;
+    }
+    parser.skipVisualSpace();
+    if (!parser.matchBoundary()) {
+      parser.removeBoundary();
+      return null;
+    }
+    return ["When", lhs, cond];
+  }
   function parseSequence(parser, terminator, lhs, prec, sep) {
     if (terminator && terminator.minPrec >= prec) return null;
     const result = lhs ? [lhs] : ["Nothing"];
@@ -5680,6 +5740,15 @@ var Compile = (() => {
       }
     },
     { name: "LatexTokens", serialize: serializeLatexTokens },
+    // Component-access postfix: expr.member  (C3)
+    // The '.' trigger is consumed before the parse function is called.
+    // Precedence 850 > 810 (At/indexing) so .x chains tightly.
+    {
+      kind: "postfix",
+      precedence: 850,
+      latexTrigger: ["."],
+      parse: parseComponentAccess
+    },
     {
       name: "At",
       kind: "postfix",
@@ -5700,6 +5769,29 @@ var Compile = (() => {
       latexTrigger: ["\\left", "\\lbrack"],
       parse: parseAt("\\right", "\\rbrack")
     },
+    // When-restriction: `expr\left\{cond\right\}` → `When(expr, cond)` (D3)
+    {
+      name: "When",
+      kind: "postfix",
+      precedence: 800,
+      latexTrigger: ["\\left", "\\{"],
+      parse: (parser, lhs) => parseWhenRestriction(parser, lhs, ["\\right", "\\}"]),
+      serialize: (serializer, expr) => {
+        const e = operand(expr, 1);
+        const cond = operand(expr, 2);
+        if (!e || !cond) return "";
+        const clauses = operator(cond) === "And" ? operands(cond) ?? [] : [cond];
+        const inner = clauses.map((c) => `\\left\\{${serializer.serialize(c)}\\right\\}`).join("");
+        return `${serializer.serialize(e)}${inner}`;
+      }
+    },
+    // When-restriction: bare `expr\{cond\}` → `When(expr, cond)`
+    {
+      kind: "postfix",
+      precedence: 800,
+      latexTrigger: ["\\{"],
+      parse: (parser, lhs) => parseWhenRestriction(parser, lhs, ["\\}"])
+    },
     {
       kind: "postfix",
       latexTrigger: ["_"],
@@ -5782,6 +5874,29 @@ var Compile = (() => {
         return "";
       }
     },
+    // Additional triggers for Range: `...`, `\ldots`, and `\dots` are
+    // equivalent to `..` when used as infix operators (e.g. `[1...9]`).
+    // No `name` field here — names must be unique per the dictionary rules;
+    // the first Range entry owns the name. When there is no LHS the symbol
+    // entries near the top of the file still fire (ContinuationPlaceholder).
+    {
+      latexTrigger: [".", ".", "."],
+      kind: "infix",
+      precedence: 800,
+      parse: parseRange
+    },
+    {
+      latexTrigger: ["\\ldots"],
+      kind: "infix",
+      precedence: 800,
+      parse: parseRange
+    },
+    {
+      latexTrigger: ["\\dots"],
+      kind: "infix",
+      precedence: 800,
+      parse: parseRange
+    },
     {
       latexTrigger: [";"],
       kind: "infix",
@@ -5966,13 +6081,24 @@ var Compile = (() => {
         const args = operands(expr);
         if (!args || args.length < 2) return "";
         const body = args[0];
-        const indexing = args[1];
-        if (operator(indexing) === "Element") {
-          const index = operand(indexing, 1);
-          const range2 = operand(indexing, 2);
-          if (operator(range2) === "Range") {
-            const lo = operand(range2, 1);
-            const hi = operand(range2, 2);
+        const elements = args.slice(1);
+        const allElements = elements.every((e) => operator(e) === "Element");
+        if (!allElements) {
+          return joinLatex([
+            "\\operatorname{Loop}(",
+            serializer.serialize(body),
+            ", ",
+            serializer.serialize(elements[0]),
+            ")"
+          ]);
+        }
+        if (elements.length === 1) {
+          const elem = elements[0];
+          const index = operand(elem, 1);
+          const coll = operand(elem, 2);
+          if (operator(coll) === "Range") {
+            const lo = operand(coll, 1);
+            const hi = operand(coll, 2);
             return joinLatex([
               "\\text{for }",
               serializer.serialize(index),
@@ -5984,13 +6110,27 @@ var Compile = (() => {
               serializer.serialize(body)
             ]);
           }
+          return joinLatex([
+            serializer.serialize(body),
+            " \\operatorname{for} ",
+            serializer.serialize(index),
+            " = ",
+            serializer.serialize(coll)
+          ]);
         }
+        const bindings = elements.map((elem) => {
+          const name = operand(elem, 1);
+          const coll = operand(elem, 2);
+          return joinLatex([
+            serializer.serialize(name),
+            " = ",
+            serializer.serialize(coll)
+          ]);
+        }).join(", ");
         return joinLatex([
-          "\\operatorname{Loop}(",
           serializer.serialize(body),
-          ", ",
-          serializer.serialize(indexing),
-          ")"
+          " \\operatorname{for} ",
+          bindings
         ]);
       }
     },
@@ -6023,6 +6163,18 @@ var Compile = (() => {
       precedence: 245,
       parse: (parser, until) => parseForExpression(parser, until)
     },
+    // \operatorname{for} as postfix infix (list comprehension):
+    //   `body \operatorname{for} x = L_1, y = L_2`
+    // Precedence 19 — just below comma (20) so the body is allowed to use
+    // any operator (including comma sequencing) up to the keyword, and the
+    // bindings can be comma-separated below us.
+    {
+      symbolTrigger: "for",
+      kind: "infix",
+      associativity: "none",
+      precedence: 19,
+      parse: (parser, lhs, until) => parseForComprehension(parser, lhs, until)
+    },
     // \operatorname{break}
     {
       symbolTrigger: "break",
@@ -6227,7 +6379,10 @@ var Compile = (() => {
         if (!sym2 || !parser.getSymbolType(sym2).matches("function")) return null;
         parser.addBoundary([")"]);
         const expr = parser.parseExpression(until);
-        if (!parser.matchBoundary()) return null;
+        if (!parser.matchBoundary()) {
+          parser.removeBoundary();
+          return null;
+        }
         if (!parser.match("<}>")) return null;
         return ["Derivative", lhs, expr];
       }
@@ -6668,7 +6823,12 @@ var Compile = (() => {
     if (isEmptySequence(body)) return ["List"];
     const h = operator(body);
     if (h === "Range" || h === "Linspace") return body;
-    if (h === "Sequence") return ["List", ...operands(body)];
+    if (h === "Sequence") {
+      const elems = operands(body);
+      const inferred = tryInferRangeFromElements(elems, parser);
+      if (inferred) return inferred;
+      return ["List", ...elems];
+    }
     if (h === "Delimiter") {
       const delim = stringValue(operand(body, 2)) ?? "...";
       if (delim === ";" || delim === ".;.") {
@@ -6681,12 +6841,37 @@ var Compile = (() => {
       }
       if (delim === "," || delim === ".,.") {
         body = operand(body, 1);
-        if (operator(body) === "Sequence") return ["List", ...operands(body)];
+        if (operator(body) === "Sequence") {
+          const elems = operands(body);
+          const inferred = tryInferRangeFromElements(elems, parser);
+          if (inferred) return inferred;
+          return ["List", ...elems];
+        }
         return ["List", body ?? "Nothing"];
       }
     }
     return ["List", body];
   }
+  function tryInferRangeFromElements(elems, parser) {
+    if (elems.length < 4) return null;
+    const penultimate = elems[elems.length - 2];
+    if (symbol(penultimate) !== "ContinuationPlaceholder") return null;
+    const samples = elems.slice(0, -2);
+    const endExpr = elems[elems.length - 1];
+    if (samples.length < 2) return null;
+    const sampleNums = samples.map(machineValue);
+    if (sampleNums.some((n) => n === null)) return null;
+    const nums = sampleNums;
+    const step = nums[nums.length - 1] - nums[nums.length - 2];
+    const tol = parser.options.tolerance;
+    if (Math.abs(step) < tol)
+      return parser.error("degenerate-range-step", parser.index);
+    for (let i = 1; i < nums.length; i++) {
+      if (Math.abs(nums[i] - nums[i - 1] - step) > tol)
+        return parser.error("inconsistent-range-samples", parser.index);
+    }
+    return ["Range", nums[0], endExpr, step];
+  }
   function serializeList(serializer, expr) {
     if (nops(expr) > 1 && operands(expr).every((x) => {
       const op = operator(x);
@@ -6938,6 +7123,35 @@ var Compile = (() => {
       ["Element", index, ["Range", lower, upper]]
     ];
   }
+  function parseForComprehension(parser, lhs, until) {
+    const bindingTerminator = {
+      minPrec: 21,
+      // Above comma (20) and ; (19), so `x = L_1` is captured whole
+      condition: (p) => {
+        if (until?.condition?.(p)) return true;
+        const saved = p.index;
+        p.skipVisualSpace();
+        const isComma = p.peek === ",";
+        p.index = saved;
+        return isComma;
+      }
+    };
+    const elements = [];
+    do {
+      parser.skipVisualSpace();
+      const binding = parser.parseExpression(bindingTerminator);
+      if (binding === null) break;
+      const op = operator(binding);
+      if (op !== "Equal" && op !== "Assign") return null;
+      const name = operand(binding, 1);
+      const list = operand(binding, 2);
+      if (!name || !list) return null;
+      elements.push(["Element", name, list]);
+      parser.skipVisualSpace();
+    } while (parser.match(","));
+    if (elements.length === 0) return null;
+    return ["Loop", lhs, ...elements];
+  }
   function parseWhereExpression(parser, lhs, until) {
     const bindingTerminator = {
       minPrec: 21,
@@ -8826,6 +9040,8 @@ var Compile = (() => {
       precedence: DIVISION_PRECEDENCE,
       parse: "Mod"
     },
+    // Function-style alias: `\operatorname{mod}(a, b)`
+    { latexTrigger: "\\operatorname{mod}", parse: "Mod" },
     {
       latexTrigger: "\\pmod",
       kind: "prefix",
@@ -9066,6 +9282,13 @@ var Compile = (() => {
         const rhs = serializer.wrap(operand(expr, 2), ADDITION_PRECEDENCE + 3);
         return joinLatex([lhs, "-", rhs]);
       }
+    },
+    // Euclidean distance between two points (tuples of numbers).
+    {
+      name: "Distance",
+      latexTrigger: ["\\operatorname{distance}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{distance}" + serializer.wrapArguments(expr)
     }
   ];
   function getIndexAssignment(expr, upper) {
@@ -10490,7 +10713,9 @@ var Compile = (() => {
         if (!expr || !symbol(expr)) return null;
         return ["Mean", expr];
       }
-    }
+    },
+    // Function-style alias: `\operatorname{var}(...)`
+    { latexTrigger: "\\operatorname{var}", parse: "Variance" }
   ];
 
   // src/compute-engine/numerics/unit-data.ts
@@ -11498,7 +11723,7 @@ var Compile = (() => {
           36: "\\qquad"
         }[v] ?? "";
       }
-    }
+    },
     // if (
     //   [
     //     '\\!',
@@ -11522,6 +11747,121 @@ var Compile = (() => {
     //     name: '',
     //     trigger: '\\check',
     // },
+    // ---------------------------------------------------------------------------
+    // Function-style aliases for collection / random operators that some
+    // notations write in lowercase (e.g. `\operatorname{shuffle}(L)`).
+    // The capitalized library entries already exist; these are pure parse
+    // aliases so the lowercase names don't land in `unsupported-operator`.
+    // ---------------------------------------------------------------------------
+    { latexTrigger: "\\operatorname{random}", parse: "Random" },
+    { latexTrigger: "\\operatorname{shuffle}", parse: "Shuffle" },
+    { latexTrigger: "\\operatorname{repeat}", parse: "Repeat" },
+    { latexTrigger: "\\operatorname{join}", parse: "Join" },
+    // ---------------------------------------------------------------------------
+    // Geometric primitive heads. Registered as known typed heads so consumers
+    // can branch on the operator name; CE itself doesn't render them. The
+    // library entries (with no evaluator) live in `library/core.ts`.
+    // ---------------------------------------------------------------------------
+    {
+      name: "Triangle",
+      latexTrigger: ["\\operatorname{triangle}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{triangle}" + serializer.wrapArguments(expr)
+    },
+    // Desmos's geometric `vector(p1, p2)` — a directed segment between two
+    // points. Routed to a dedicated head (not the existing column-vector
+    // `Vector`, which has a narrower `(number+) -> vector` signature).
+    {
+      name: "GeometricVector",
+      latexTrigger: ["\\operatorname{vector}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{vector}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "Sphere",
+      latexTrigger: ["\\operatorname{sphere}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{sphere}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "Segment",
+      latexTrigger: ["\\operatorname{segment}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{segment}" + serializer.wrapArguments(expr)
+    }
+  ];
+
+  // src/compute-engine/latex-syntax/dictionary/definitions-colors.ts
+  var DEFINITIONS_COLORS = [
+    // Color constructors (one per colorspace, preserves space on evaluation)
+    {
+      name: "Rgb",
+      latexTrigger: ["\\operatorname{rgb}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{rgb}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "Hsv",
+      latexTrigger: ["\\operatorname{hsv}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{hsv}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "Hsl",
+      latexTrigger: ["\\operatorname{hsl}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{hsl}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "Oklab",
+      latexTrigger: ["\\operatorname{oklab}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{oklab}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "Oklch",
+      latexTrigger: ["\\operatorname{oklch}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{oklch}" + serializer.wrapArguments(expr)
+    },
+    // Conversion functions (color → color in the named space)
+    {
+      name: "AsRgb",
+      latexTrigger: ["\\operatorname{asRgb}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{asRgb}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "AsHsv",
+      latexTrigger: ["\\operatorname{asHsv}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{asHsv}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "AsHsl",
+      latexTrigger: ["\\operatorname{asHsl}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{asHsl}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "AsOklab",
+      latexTrigger: ["\\operatorname{asOklab}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{asOklab}" + serializer.wrapArguments(expr)
+    },
+    {
+      name: "AsOklch",
+      latexTrigger: ["\\operatorname{asOklch}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{asOklch}" + serializer.wrapArguments(expr)
+    },
+    // Perceptual difference (returns a scalar in [0, ~1])
+    {
+      name: "ColorDelta",
+      latexTrigger: ["\\operatorname{colorDelta}"],
+      kind: "function",
+      serialize: (serializer, expr) => "\\operatorname{colorDelta}" + serializer.wrapArguments(expr)
+    }
   ];
 
   // src/compute-engine/latex-syntax/dictionary/default-dictionary.ts
@@ -11552,7 +11892,8 @@ var Compile = (() => {
     ...DEFINITIONS_STATISTICS,
     ...DEFINITIONS_UNITS,
     ...DEFINITIONS_OTHERS,
-    ...DEFINITIONS_PHYSICS
+    ...DEFINITIONS_PHYSICS,
+    ...DEFINITIONS_COLORS
   ];
 
   // src/math-json/symbols.ts
@@ -12707,7 +13048,11 @@ ${lines.join("\n")}`;
     //
     Range: {
       complexity: 8200,
-      signature: "(number, number?, step: number?) -> indexed_collection<integer>",
+      signature: "(number, number?, step: number?) -> indexed_collection<number>",
+      type: (ops) => {
+        const allInt = ops.every((op) => op.isInteger);
+        return allInt ? parseType("indexed_collection<integer>") : parseType("indexed_collection<number>");
+      },
       canonical: (ops, { engine: ce }) => {
         if (ops.length === 0) return null;
         if (ops.length === 1) return ce._fn("Range", [ce.One, ops[0].canonical]);
@@ -12731,19 +13076,26 @@ ${lines.join("\n")}`;
           const [lower, upper, step] = range(expr);
           if (step === 0) return 0;
           if (!isFinite(lower) || !isFinite(upper)) return Infinity;
-          return 1 + Math.max(0, Math.floor((upper - lower) / step));
+          return Math.max(0, Math.floor((upper - lower) / step) + 1);
         },
         contains: (expr, target) => {
-          if (!target.type.matches("integer")) return false;
           const t = target.re;
+          if (!isFinite(t)) return false;
           const [lower, upper, step] = range(expr);
           if (step === 0) return false;
-          if (step > 0) return t >= lower && t <= upper;
-          return t <= lower && t >= upper;
+          if (step > 0) {
+            if (t < lower || t > upper) return false;
+          } else {
+            if (t > lower || t < upper) return false;
+          }
+          const k = (t - lower) / step;
+          const tol = expr.engine.tolerance;
+          const kRounded = Math.round(k);
+          return kRounded >= 0 && Math.abs(k - kRounded) < tol;
         },
         iterator: (expr) => {
           const [lower, upper, step] = range(expr);
-          const maxCount = step === 0 ? 0 : Math.floor((upper - lower) / step) + 1;
+          const maxCount = step === 0 ? 0 : Math.max(0, Math.floor((upper - lower) / step) + 1);
           let index = 1;
           return {
             next: () => {
@@ -12761,7 +13113,9 @@ ${lines.join("\n")}`;
         at: (expr, index) => {
           if (typeof index !== "number") return void 0;
           const [lower, upper, step] = range(expr);
-          if (index < 1 || index > 1 + (upper - lower) / step) return void 0;
+          if (step === 0) return void 0;
+          const maxCount = Math.max(0, Math.floor((upper - lower) / step) + 1);
+          if (index < 1 || index > maxCount) return void 0;
           return expr.engine.number(lower + step * (index - 1));
         },
         indexWhere: void 0,
@@ -12786,7 +13140,13 @@ ${lines.join("\n")}`;
           if (step > 0) return lower <= upper ? "positive" : "negative";
           return lower >= upper ? "positive" : "negative";
         },
-        elttype: (_expr) => "finite_integer"
+        elttype: (expr) => {
+          if (!isFunction2(expr)) return "finite_integer";
+          for (let i = 1; i <= expr.nops; i++) {
+            if (!expr[`op${i}`].isInteger) return "finite_real";
+          }
+          return "finite_integer";
+        }
       }
     },
     Interval: {
@@ -13384,15 +13744,45 @@ ${lines.join("\n")}`;
     },
     First: {
       complexity: 8200,
-      signature: "(collection) -> any",
+      signature: "(any) -> any",
       type: ([xs]) => xs.operatorDefinition?.collection?.elttype?.(xs) ?? "any",
-      evaluate: ([xs], { engine: ce }) => xs.at(1) ?? ce.Nothing
+      evaluate: ([xs], { engine: ce }) => {
+        if (!xs.isCollection)
+          return ce.error([
+            "incompatible-type",
+            `'collection'`,
+            xs.type.toString()
+          ]);
+        return xs.at(1) ?? ce.Nothing;
+      }
     },
     Second: {
       complexity: 8200,
-      signature: "(collection) -> any",
+      signature: "(any) -> any",
+      type: ([xs]) => xs.operatorDefinition?.collection?.elttype?.(xs) ?? "any",
+      evaluate: ([xs], { engine: ce }) => {
+        if (!xs.isCollection)
+          return ce.error([
+            "incompatible-type",
+            `'collection'`,
+            xs.type.toString()
+          ]);
+        return xs.at(2) ?? ce.Nothing;
+      }
+    },
+    Third: {
+      complexity: 8200,
+      signature: "(any) -> any",
       type: ([xs]) => xs.operatorDefinition?.collection?.elttype?.(xs) ?? "any",
-      evaluate: ([xs], { engine: ce }) => xs.at(2) ?? ce.Nothing
+      evaluate: ([xs], { engine: ce }) => {
+        if (!xs.isCollection)
+          return ce.error([
+            "incompatible-type",
+            `'collection'`,
+            xs.type.toString()
+          ]);
+        return xs.at(3) ?? ce.Nothing;
+      }
     },
     Last: {
       complexity: 8200,
@@ -14371,17 +14761,14 @@ ${lines.join("\n")}`;
     if (!isFunction2(expr)) return [1, 0, 0];
     if (expr.nops === 0) return [1, 0, 0];
     let op1 = expr.op1.re;
-    if (!isFinite(op1)) op1 = 1;
-    else op1 = Math.round(op1);
+    if (!isFinite(op1) && !op1) op1 = 1;
     if (expr.nops === 1) return [1, op1, 1];
     let op2 = expr.op2.re;
     if (!isFinite(op2) && !op2) op2 = 1;
-    else if (isFinite(op2)) op2 = Math.round(op2);
-    if (expr.nops === 2) return [op1, op2, op2 > op1 ? 1 : -1];
+    if (expr.nops === 2) return [op1, op2, op2 >= op1 ? 1 : -1];
     let op3 = expr.op3.re;
-    if (!isFinite(op3)) op3 = 1;
-    else op3 = Math.abs(Math.round(op3));
-    return [op1, op2, op1 < op2 ? op3 : -op3];
+    if (!isFinite(op3) && !op3) op3 = 1;
+    return [op1, op2, op3];
   }
   function canonicalList(ops, { engine: ce }) {
     const op1 = ops[0];
@@ -14730,6 +15117,23 @@ ${lines.join("\n")}`;
         };
         return compilePair(0);
       }
+      if (h === "When") {
+        if (args.length !== 2)
+          throw new Error("When: expected exactly 2 arguments (expr, cond)");
+        const fn2 = target.functions?.(h);
+        if (fn2) {
+          if (typeof fn2 === "function") {
+            return fn2(args, (expr) => _BaseCompiler.compile(expr, target), target);
+          }
+          return `${fn2}(${args.map((x) => _BaseCompiler.compile(x, target)).join(", ")})`;
+        }
+        if (isSymbol2(args[1], "True"))
+          return `(${_BaseCompiler.compile(args[0], target)})`;
+        if (isSymbol2(args[1], "False")) return "NaN";
+        const val = _BaseCompiler.compile(args[0], target);
+        const cond = _BaseCompiler.compile(args[1], target);
+        return `((${cond}) ? (${val}) : NaN)`;
+      }
       if (h === "Block") {
         return _BaseCompiler.compileBlock(args, target);
       }
@@ -14804,17 +15208,91 @@ ${lines.join("\n")}`;
       )}${target.ws("\n")}})()`;
     }
     /**
-     * Compile a Loop expression with Element(index, Range(lo, hi)) indexing.
-     * Generates: (() => { for (let i = lo; i <= hi; i++) { body } })()
+     * Compile a Loop expression.
+     *
+     * Two forms are supported:
+     *
+     * 1. **Imperative / single-Element form** (existing behaviour):
+     *    `Loop(body, Element(i, Range(lo, hi)))`
+     *    Generates a raw `for (let i = lo; i <= hi; i++) { body }` loop wrapped
+     *    in an IIFE.  The loop counter is always a plain number.  For targets
+     *    that wrap numeric values (e.g. interval-js uses `_IA.point()`),
+     *    references to the loop index inside the body are re-wrapped via
+     *    `target.number`.  `break` / `continue` / `return` are preserved.
+     *
+     * 2. **Comprehension / variadic-Element form** (new):
+     *    `Loop(body, Element(x, coll1), Element(y, coll2), …)`
+     *    When two or more `Element` clauses are present — or when the single
+     *    Element's collection is not a `Range` — the loop is compiled as a
+     *    comprehension that collects results into an array.  Each clause
+     *    produces a `for (const name of collection)` loop, nested
+     *    outermost-to-innermost, and the innermost body pushes into `result`.
+     *
+     *    Example output (JS):
+     *    ```js
+     *    (() => { const result = [];
+     *      for (const x of [1,2]) { for (const y of [3,4]) { result.push(body); } }
+     *      return result; })()
+     *    ```
      *
-     * The loop counter is always a raw number. For targets that wrap numeric
-     * values (e.g. interval-js wraps with `_IA.point()`), references to the
-     * loop index inside the body are wrapped via `target.number`.
+     *    GLSL: multi-Element comprehension is not trivially representable in
+     *    GLSL (no dynamic arrays, no push).  A compile-time error is thrown.
+     *    TODO(E3-GLSL): support GLSL multi-Element via a pre-declared fixed-size
+     *    array or by unrolling when bounds are known at compile time.
      */
     static compileForLoop(args, target) {
       if (!args[0]) throw new Error("Loop: no body");
       if (!args[1]) throw new Error("Loop: no indexing set");
-      const indexing = args[1];
+      const body = args[0];
+      const elements = args.slice(1);
+      const useComprehension = elements.length > 1 || elements.length === 1 && isFunction2(elements[0], "Element") && !_BaseCompiler.isLegacyCompatibleRange(elements[0].ops[1]);
+      if (useComprehension) {
+        const lang = target.language ?? "";
+        if (lang === "glsl" || lang === "wgsl") {
+          throw new Error(
+            `${lang.toUpperCase()}: multi-Element Loop comprehension is not yet supported. TODO(E3-GLSL): unroll or use a fixed-size array.`
+          );
+        }
+        const narrowedElements = [];
+        for (let i = 0; i < elements.length; i++) {
+          const elem = elements[i];
+          if (!isFunction2(elem, "Element"))
+            throw new Error(
+              `Loop: argument ${i + 1} must be an Element clause, got ${elem.operator ?? "?"}`
+            );
+          if (!isSymbol2(elem.ops[0]))
+            throw new Error(
+              `Loop: Element index (argument ${i + 1}) must be a symbol`
+            );
+          narrowedElements.push(elem);
+        }
+        const loopVarSet = new Set(
+          narrowedElements.map(
+            (e) => e.ops[0].symbol
+          )
+        );
+        const needsWrap2 = target.number(0) !== "0";
+        const bodyTarget2 = needsWrap2 ? {
+          ...target,
+          var: (id) => loopVarSet.has(id) ? target.number(0).replace("0", id) : target.var(id)
+        } : target;
+        const bodyCode = _BaseCompiler.compile(body, bodyTarget2);
+        let inner = `result.push(${bodyCode});`;
+        for (let i = narrowedElements.length - 1; i >= 0; i--) {
+          const elem = narrowedElements[i];
+          const name = elem.ops[0].symbol;
+          const collExpr = elem.ops[1];
+          let collection;
+          if (isFunction2(collExpr, "Range")) {
+            collection = _BaseCompiler.compileRangeIterable(collExpr, bodyTarget2);
+          } else {
+            collection = _BaseCompiler.compile(collExpr, bodyTarget2);
+          }
+          inner = `for (const ${name} of ${collection}) { ${inner} }`;
+        }
+        return `(() => { const result = []; ${inner} return result; })()`;
+      }
+      const indexing = elements[0];
       if (!isFunction2(indexing, "Element"))
         throw new Error("Loop: expected Element(index, Range(lo, hi))");
       const indexExpr = indexing.ops[0];
@@ -14832,13 +15310,72 @@ ${lines.join("\n")}`;
         ...target,
         var: (id) => id === index ? needsWrap ? target.number(0).replace("0", index) : index : target.var(id)
       };
-      const bodyStmts = _BaseCompiler.compileLoopBody(args[0], bodyTarget);
+      const bodyStmts = _BaseCompiler.compileLoopBody(body, bodyTarget);
       return `(() => {${target.ws(
         "\n"
       )}for (let ${index} = ${lower}; ${index} <= ${upper}; ${index}++) {${target.ws(
         "\n"
       )}${bodyStmts}${target.ws("\n")}}${target.ws("\n")}})()`;
     }
+    /**
+     * Returns `true` when the given collection expression is a `Range` whose
+     * runtime semantics match the legacy imperative for-loop shape
+     * `for (let i = lo; i <= hi; i++)`.
+     *
+     * Concretely: integer-ascending bounds and step omitted-or-1. When bounds
+     * are not statically numeric we accept the Range (the historical
+     * behaviour) — runtime mismatch in the descending-unknown-bounds case is
+     * left as a known limitation; callers can force the iterable path by
+     * supplying an explicit step.
+     */
+    static isLegacyCompatibleRange(coll) {
+      if (!isFunction2(coll, "Range")) return false;
+      if (coll.ops.length >= 3) {
+        const stepExpr = coll.ops[2];
+        if (!isNumber(stepExpr) || stepExpr.re !== 1) return false;
+      }
+      const lo = coll.ops[0];
+      const hi = coll.ops[1];
+      if (isNumber(lo) && !Number.isInteger(lo.re)) return false;
+      if (isNumber(hi) && !Number.isInteger(hi.re)) return false;
+      if (isNumber(lo) && isNumber(hi) && lo.re > hi.re) return false;
+      return true;
+    }
+    /**
+     * Compile a `Range(lo, hi)` or `Range(lo, hi, step)` expression into a JS
+     * iterable expression. Mirrors the runtime semantics in
+     * `library/collections.ts` Range:
+     *     count    = step === 0 ? 0 : max(0, floor((hi - lo) / step) + 1)
+     *     element  = lo + step * k          (0-indexed)
+     * Default step is 1 when omitted. Bounds and step may be fractional.
+     *
+     * Only used from the comprehension path in `compileForLoop`.
+     * Caller must have already verified `isFunction(rangeExpr, 'Range')`.
+     */
+    static compileRangeIterable(rangeExpr, target) {
+      const loExpr = rangeExpr.ops[0];
+      const hiExpr = rangeExpr.ops[1];
+      const stepExpr = rangeExpr.ops[2];
+      if (isNumber(loExpr) && isNumber(hiExpr) && (stepExpr === void 0 || isNumber(stepExpr))) {
+        const lo2 = loExpr.re;
+        const hi2 = hiExpr.re;
+        const step2 = stepExpr === void 0 ? hi2 >= lo2 ? 1 : -1 : stepExpr.re;
+        if (step2 === 0) return "[]";
+        const len = Math.max(0, Math.floor((hi2 - lo2) / step2) + 1);
+        if (step2 === 1) {
+          if (lo2 === 0) return `Array.from({length:${len}},(_,k)=>k)`;
+          return `Array.from({length:${len}},(_,k)=>${lo2}+k)`;
+        }
+        return `Array.from({length:${len}},(_,k)=>${lo2}+(${step2})*k)`;
+      }
+      const lo = _BaseCompiler.compile(loExpr, target);
+      const hi = _BaseCompiler.compile(hiExpr, target);
+      if (stepExpr === void 0) {
+        return `((_lo,_hi)=>{const _st=_hi>=_lo?1:-1;return Array.from({length:Math.max(0,Math.floor((_hi-_lo)/_st)+1)},(_,k)=>_lo+_st*k);})(${lo},${hi})`;
+      }
+      const step = _BaseCompiler.compile(stepExpr, target);
+      return `((_lo,_hi,_st)=>_st===0?[]:Array.from({length:Math.max(0,Math.floor((_hi-_lo)/_st)+1)},(_,k)=>_lo+_st*k))(${lo},${hi},${step})`;
+    }
     /**
      * Compile a loop body expression as statements (not wrapped in IIFE).
      * Handles Break, Continue, Return as statements, and If as if-else when
@@ -15187,8 +15724,7 @@ ${lines.join("\n")}`;
           ce.pushScope();
           try {
             if (vars && typeof vars === "object") {
-              for (const [k, v] of Object.entries(vars))
-                ce.assign(k, v);
+              for (const [k, v] of Object.entries(vars)) ce.assign(k, v);
             }
             return expr.evaluate().re;
           } finally {
@@ -15275,8 +15811,7 @@ ${lines.join("\n")}`;
           return { re: null, im: formatFloat(iScale) };
         }
         const compiledFactors = remaining.map((r) => compile2(r));
-        if (iScale !== 1)
-          compiledFactors.unshift(formatFloat(iScale));
+        if (iScale !== 1) compiledFactors.unshift(formatFloat(iScale));
         const imCode = foldTerms(compiledFactors, "1.0", "*");
         return { re: null, im: imCode };
       }
@@ -15341,6 +15876,40 @@ ${lines.join("\n")}`;
     else h = ((r - g) / d + 4) / 6;
     return { h: h * 360, s, l };
   }
+  function hsvToRgb(h, s, v) {
+    h = (h % 360 + 360) % 360;
+    s = Math.max(0, Math.min(1, s));
+    v = Math.max(0, Math.min(1, v));
+    const c = v * s;
+    const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+    const m = v - c;
+    let r = 0, g = 0, b = 0;
+    if (h < 60) [r, g, b] = [c, x, 0];
+    else if (h < 120) [r, g, b] = [x, c, 0];
+    else if (h < 180) [r, g, b] = [0, c, x];
+    else if (h < 240) [r, g, b] = [0, x, c];
+    else if (h < 300) [r, g, b] = [x, 0, c];
+    else [r, g, b] = [c, 0, x];
+    return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 };
+  }
+  function rgbToHsv(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max2 = Math.max(r, g, b);
+    const min2 = Math.min(r, g, b);
+    const d = max2 - min2;
+    let h = 0;
+    if (d > 0) {
+      if (max2 === r) h = (g - b) / d % 6;
+      else if (max2 === g) h = (b - r) / d + 2;
+      else h = (r - g) / d + 4;
+      h *= 60;
+      if (h < 0) h += 360;
+    }
+    const s = max2 === 0 ? 0 : d / max2;
+    return { h, s, v: max2 };
+  }
   function parseHexColor(s) {
     const hex = s.startsWith("#") ? s.substring(1) : s;
     let r, g, b;
@@ -15796,6 +16365,13 @@ ${lines.join("\n")}`;
   };
   function parseColor(s, darkMode) {
     const str = s.trim().toLowerCase();
+    const opacityMatch = str.match(/^(.+?)\s*\/\s*(\d+(?:\.\d+)?)%?\s*$/);
+    if (opacityMatch) {
+      const base = parseColor(opacityMatch[1].trim(), darkMode);
+      const opacity = Math.max(0, Math.min(100, parseFloat(opacityMatch[2])));
+      const alpha = Math.round(opacity / 100 * 255);
+      return base & 4294967040 | alpha;
+    }
     if (str.startsWith("#")) {
       const hex = str.substring(1);
       let r, g, b, a = 255;
@@ -15928,14 +16504,6 @@ ${lines.join("\n")}`;
     console.warn(`parseColor: unrecognized color "${s}"`);
     return 0;
   }
-  function parseColorToRgb01(s, darkMode) {
-    const color = parseColor(s, darkMode);
-    return [
-      (color >>> 24 & 255) / 255,
-      (color >>> 16 & 255) / 255,
-      (color >>> 8 & 255) / 255
-    ];
-  }
   function apca(bgColor, fgColor) {
     const bgRgb = asRgb(bgColor);
     const fgRgb = asRgb(fgColor);
@@ -15994,6 +16562,12 @@ ${lines.join("\n")}`;
     const contrast2 = Math.abs(apca(fg2, bg));
     return contrast1 >= contrast2 ? asColorNumber(fg1) : asColorNumber(fg2);
   }
+  function oklabDeltaE(a, b) {
+    const dL = a.L - b.L;
+    const da = a.a - b.a;
+    const db = a.b - b.b;
+    return Math.sqrt(dL * dL + da * da + db * db);
+  }
   var TYCHO_11 = [
     "#4e79a7",
     // Blue
@@ -20205,39 +20779,130 @@ ${lines.join("\n")}`;
       if (args.length >= 2)
         return `_SYS.colormap(${compile2(args[0])}, ${compile2(args[1])})`;
       return `_SYS.colormap(${compile2(args[0])})`;
+    },
+    // -----------------------------------------------------------------------
+    // Color constructor heads. All compile to OKLCh arrays at runtime — the
+    // canonical color representation in this target. The constructors take
+    // their own colorspace's components and convert internally.
+    // (Mirrors the GPU target's design: color values are vec3 OKLCh.)
+    // -----------------------------------------------------------------------
+    Rgb: (args, compile2) => {
+      if (args.length < 3) throw new Error("Rgb: need 3 components");
+      return `_SYS.rgb(${args.map(compile2).join(", ")})`;
+    },
+    Hsv: (args, compile2) => {
+      if (args.length < 3) throw new Error("Hsv: need 3 components");
+      return `_SYS.hsv(${args.map(compile2).join(", ")})`;
+    },
+    Hsl: (args, compile2) => {
+      if (args.length < 3) throw new Error("Hsl: need 3 components");
+      return `_SYS.hsl(${args.map(compile2).join(", ")})`;
+    },
+    Oklab: (args, compile2) => {
+      if (args.length < 3) throw new Error("Oklab: need 3 components");
+      return `_SYS.oklab(${args.map(compile2).join(", ")})`;
+    },
+    Oklch: (args, compile2) => {
+      if (args.length < 3) throw new Error("Oklch: need 3 components");
+      return `_SYS.oklch(${args.map(compile2).join(", ")})`;
+    },
+    // -----------------------------------------------------------------------
+    // As* converters. Compile-time output convention matches the engine and
+    // the GPU target: each returns components in the named space as a 3- or
+    // 4-element array. `AsRgb` uses 0-1 sRGB channels (consistent across all
+    // layers). `AsOklch` is the identity (canonical form).
+    // -----------------------------------------------------------------------
+    AsRgb: ([c], compile2) => {
+      if (c === null) throw new Error("AsRgb: no argument");
+      return `_SYS.asRgb(${compile2(c)})`;
+    },
+    AsHsv: ([c], compile2) => {
+      if (c === null) throw new Error("AsHsv: no argument");
+      return `_SYS.asHsv(${compile2(c)})`;
+    },
+    AsHsl: ([c], compile2) => {
+      if (c === null) throw new Error("AsHsl: no argument");
+      return `_SYS.asHsl(${compile2(c)})`;
+    },
+    AsOklab: ([c], compile2) => {
+      if (c === null) throw new Error("AsOklab: no argument");
+      return `_SYS.asOklab(${compile2(c)})`;
+    },
+    AsOklch: ([c], compile2) => {
+      if (c === null) throw new Error("AsOklch: no argument");
+      return compile2(c);
+    },
+    // Perceptual color difference (ΔE_OK).
+    ColorDelta: ([a, b], compile2) => {
+      if (a === null || b === null)
+        throw new Error("ColorDelta: need two colors");
+      return `_SYS.colorDelta(${compile2(a)}, ${compile2(b)})`;
+    },
+    // Euclidean distance between two tuples (any positive dimension).
+    // The GPU target maps `Distance` to the GLSL/WGSL `distance()` builtin
+    // (vec-only); this JS handler works on plain arrays of any length.
+    Distance: ([a, b], compile2) => {
+      if (a === null || b === null) throw new Error("Distance: need two points");
+      return `_SYS.distance(${compile2(a)}, ${compile2(b)})`;
     }
   };
   function toRI(c) {
     return { re: c.re, im: c.im };
   }
+  function normalizeAlpha(a) {
+    if (a === void 0) return void 0;
+    if (!Number.isFinite(a)) return void 0;
+    if (Math.abs(a - 1) < 1e-9) return void 0;
+    return a;
+  }
   function toRgb255(input) {
     if (typeof input === "string") {
       const c = parseColor(input);
-      return {
+      const rgb2 = {
         r: c >>> 24 & 255,
         g: c >>> 16 & 255,
-        b: c >>> 8 & 255,
-        alpha: (c & 255) / 255
+        b: c >>> 8 & 255
       };
+      const alpha = normalizeAlpha((c & 255) / 255);
+      if (alpha !== void 0) rgb2.alpha = alpha;
+      return rgb2;
+    }
+    const rgb = oklchToRgb({ L: input[0], C: input[1], H: input[2] });
+    if (input.length >= 4) {
+      const alpha = normalizeAlpha(input[3]);
+      if (alpha !== void 0) rgb.alpha = alpha;
     }
-    const rgb = {
-      r: input[0] * 255,
-      g: input[1] * 255,
-      b: input[2] * 255
-    };
-    if (input.length >= 4) rgb.alpha = input[3];
     return rgb;
   }
-  function packedToArray(c) {
-    const r = (c >>> 24 & 255) / 255;
-    const g = (c >>> 16 & 255) / 255;
-    const b = (c >>> 8 & 255) / 255;
-    const a = (c & 255) / 255;
-    return Math.abs(a - 1) < 1e-4 ? [r, g, b] : [r, g, b, a];
+  function toOklch(input) {
+    if (typeof input === "string") {
+      const c = parseColor(input);
+      const r = c >>> 24 & 255;
+      const g = c >>> 16 & 255;
+      const b = c >>> 8 & 255;
+      const oklch2 = rgbToOklch({ r, g, b });
+      const alpha = normalizeAlpha((c & 255) / 255);
+      if (alpha !== void 0) oklch2.alpha = alpha;
+      return oklch2;
+    }
+    return {
+      L: input[0],
+      C: input[1],
+      H: input[2],
+      alpha: input.length >= 4 ? normalizeAlpha(input[3]) : void 0
+    };
+  }
+  function packedToOklch(c) {
+    const r = c >>> 24 & 255;
+    const g = c >>> 16 & 255;
+    const b = c >>> 8 & 255;
+    const oklch2 = rgbToOklch({ r, g, b });
+    const alpha = normalizeAlpha((c & 255) / 255);
+    return alpha !== void 0 ? [oklch2.L, oklch2.C, oklch2.H, alpha] : [oklch2.L, oklch2.C, oklch2.H];
   }
   var colorHelpers = {
     color(input) {
-      return packedToArray(parseColor(input));
+      return packedToOklch(parseColor(input));
     },
     colorToString(input, format) {
       const rgb = toRgb255(input);
@@ -20248,7 +20913,7 @@ ${lines.join("\n")}`;
           const g = Math.round(Math.max(0, Math.min(255, rgb.g)));
           const b = Math.round(Math.max(0, Math.min(255, rgb.b)));
           let hex = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-          if (rgb.alpha !== void 0 && Math.abs(rgb.alpha - 1) > 1e-4) {
+          if (rgb.alpha !== void 0) {
             const a = Math.round(Math.max(0, Math.min(255, rgb.alpha * 255)));
             hex += a.toString(16).padStart(2, "0");
           }
@@ -20258,7 +20923,7 @@ ${lines.join("\n")}`;
           const r = Math.round(rgb.r);
           const g = Math.round(rgb.g);
           const b = Math.round(rgb.b);
-          if (rgb.alpha !== void 0 && Math.abs(rgb.alpha - 1) > 1e-4)
+          if (rgb.alpha !== void 0)
             return `rgb(${r} ${g} ${b} / ${rgb.alpha})`;
           return `rgb(${r} ${g} ${b})`;
         }
@@ -20267,7 +20932,7 @@ ${lines.join("\n")}`;
           const h = Math.round(hsl.h * 10) / 10;
           const s = Math.round(hsl.s * 1e3) / 10;
           const l = Math.round(hsl.l * 1e3) / 10;
-          if (rgb.alpha !== void 0 && Math.abs(rgb.alpha - 1) > 1e-4)
+          if (rgb.alpha !== void 0)
             return `hsl(${h} ${s}% ${l}% / ${rgb.alpha})`;
           return `hsl(${h} ${s}% ${l}%)`;
         }
@@ -20276,7 +20941,7 @@ ${lines.join("\n")}`;
           const L = Math.round(c.L * 1e3) / 1e3;
           const C = Math.round(c.C * 1e3) / 1e3;
           const H = Math.round(c.H * 10) / 10;
-          if (rgb.alpha !== void 0 && Math.abs(rgb.alpha - 1) > 1e-4)
+          if (rgb.alpha !== void 0)
             return `oklch(${L} ${C} ${H} / ${rgb.alpha})`;
           return `oklch(${L} ${C} ${H})`;
         }
@@ -20285,29 +20950,29 @@ ${lines.join("\n")}`;
       }
     },
     colorMix(input1, input2, ratio = 0.5) {
-      const rgb1 = toRgb255(input1);
-      const rgb2 = toRgb255(input2);
+      const c1 = toOklch(input1);
+      const c2 = toOklch(input2);
       ratio = Math.max(0, Math.min(1, ratio));
-      const c1 = rgbToOklch(rgb1);
-      const c2 = rgbToOklch(rgb2);
-      let dh = c2.H - c1.H;
-      if (dh > 180) dh -= 360;
-      if (dh < -180) dh += 360;
-      let H = c1.H + dh * ratio;
-      if (H < 0) H += 360;
-      if (H >= 360) H -= 360;
-      const mixed = oklchToRgb({
-        L: c1.L + (c2.L - c1.L) * ratio,
-        C: c1.C + (c2.C - c1.C) * ratio,
-        H
-      });
-      const r = mixed.r / 255;
-      const g = mixed.g / 255;
-      const b = mixed.b / 255;
-      const a1 = rgb1.alpha ?? 1;
-      const a2 = rgb2.alpha ?? 1;
-      const alpha = a1 + (a2 - a1) * ratio;
-      return Math.abs(alpha - 1) > 1e-4 ? [r, g, b, alpha] : [r, g, b];
+      const c1Achromatic = c1.C < 1e-6;
+      const c2Achromatic = c2.C < 1e-6;
+      let H;
+      if (c1Achromatic && c2Achromatic) H = c1.H;
+      else if (c1Achromatic) H = c2.H;
+      else if (c2Achromatic) H = c1.H;
+      else {
+        let dh = c2.H - c1.H;
+        if (dh > 180) dh -= 360;
+        if (dh < -180) dh += 360;
+        H = c1.H + dh * ratio;
+        if (H < 0) H += 360;
+        if (H >= 360) H -= 360;
+      }
+      const L = c1.L + (c2.L - c1.L) * ratio;
+      const C = c1.C + (c2.C - c1.C) * ratio;
+      const a1 = c1.alpha ?? 1;
+      const a2 = c2.alpha ?? 1;
+      const alpha = normalizeAlpha(a1 + (a2 - a1) * ratio);
+      return alpha !== void 0 ? [L, C, H, alpha] : [L, C, H];
     },
     colorContrast(bg, fg) {
       return apca(toRgb255(bg), toRgb255(fg));
@@ -20315,11 +20980,11 @@ ${lines.join("\n")}`;
     contrastingColor(bg, fg1, fg2) {
       const bgRgb = toRgb255(bg);
       if (fg1 !== void 0 && fg2 !== void 0) {
-        return packedToArray(
+        return packedToOklch(
           contrastingColor({ bg: bgRgb, fg1: toRgb255(fg1), fg2: toRgb255(fg2) })
         );
       }
-      return packedToArray(contrastingColor(bgRgb));
+      return packedToOklch(contrastingColor(bgRgb));
     },
     colorToColorspace(input, space) {
       const rgb = toRgb255(input);
@@ -20348,7 +21013,7 @@ ${lines.join("\n")}`;
         default:
           throw new Error(`Unknown color space: ${space}`);
       }
-      if (alpha !== void 0 && Math.abs(alpha - 1) > 1e-4) result.push(alpha);
+      if (alpha !== void 0) result.push(alpha);
       return result;
     },
     colormap(name, arg) {
@@ -20360,7 +21025,7 @@ ${lines.join("\n")}`;
       const palette = allPalettes[name];
       if (!palette) throw new Error(`Unknown palette: ${name}`);
       const colors = palette.map(
-        (hex) => parseColorToRgb01(hex)
+        (hex) => packedToOklch(parseColor(hex))
       );
       if (arg === void 0) return colors;
       if (Number.isInteger(arg) && arg >= 2) {
@@ -20384,62 +21049,128 @@ ${lines.join("\n")}`;
       const frac = pos - i;
       if (frac === 0 || i >= colors.length - 1)
         return [...colors[Math.min(i, colors.length - 1)]];
-      const rgb1 = {
-        r: colors[i][0] * 255,
-        g: colors[i][1] * 255,
-        b: colors[i][2] * 255
-      };
-      const rgb2 = {
-        r: colors[i + 1][0] * 255,
-        g: colors[i + 1][1] * 255,
-        b: colors[i + 1][2] * 255
-      };
-      const c1 = rgbToOklch(rgb1);
-      const c2 = rgbToOklch(rgb2);
-      let dh = c2.H - c1.H;
-      if (dh > 180) dh -= 360;
-      if (dh < -180) dh += 360;
-      let H = c1.H + dh * frac;
-      if (H < 0) H += 360;
-      if (H >= 360) H -= 360;
-      const mixed = oklchToRgb({
-        L: c1.L + (c2.L - c1.L) * frac,
-        C: c1.C + (c2.C - c1.C) * frac,
-        H
-      });
-      return [mixed.r / 255, mixed.g / 255, mixed.b / 255];
+      const [L1, C1, H1] = colors[i];
+      const [L2, C2, H2] = colors[i + 1];
+      const c1Achromatic = C1 < 1e-6;
+      const c2Achromatic = C2 < 1e-6;
+      let H;
+      if (c1Achromatic && c2Achromatic) H = H1;
+      else if (c1Achromatic) H = H2;
+      else if (c2Achromatic) H = H1;
+      else {
+        let dh = H2 - H1;
+        if (dh > 180) dh -= 360;
+        if (dh < -180) dh += 360;
+        H = H1 + dh * frac;
+        if (H < 0) H += 360;
+        if (H >= 360) H -= 360;
+      }
+      return [L1 + (L2 - L1) * frac, C1 + (C2 - C1) * frac, H];
     },
     colorFromColorspace(components, space) {
       const c0 = components[0];
       const c1 = components[1];
       const c2 = components[2];
       const alpha = components.length >= 4 ? components[3] : void 0;
-      let result;
+      let oklch2;
       switch (space.toLowerCase()) {
         case "rgb":
-          result = [c0, c1, c2];
+          oklch2 = rgbToOklch({ r: c0 * 255, g: c1 * 255, b: c2 * 255 });
           break;
         case "hsl": {
-          const r = hslToRgb(c0, c1, c2);
-          result = [r.r / 255, r.g / 255, r.b / 255];
+          const rgb = hslToRgb(c0, c1, c2);
+          oklch2 = rgbToOklch(rgb);
           break;
         }
-        case "oklch": {
-          const r = oklchToRgb({ L: c0, C: c1, H: c2 });
-          result = [r.r / 255, r.g / 255, r.b / 255];
+        case "oklch":
+          oklch2 = { L: c0, C: c1, H: c2 };
           break;
-        }
         case "oklab":
-        case "lab": {
-          const r = oklabToRgb({ L: c0, a: c1, b: c2 });
-          result = [r.r / 255, r.g / 255, r.b / 255];
+        case "lab":
+          oklch2 = oklabToOklch({ L: c0, a: c1, b: c2 });
           break;
-        }
         default:
           throw new Error(`Unknown color space: ${space}`);
       }
-      if (alpha !== void 0 && Math.abs(alpha - 1) > 1e-4) result.push(alpha);
-      return result;
+      return alpha !== void 0 ? [oklch2.L, oklch2.C, oklch2.H, alpha] : [oklch2.L, oklch2.C, oklch2.H];
+    },
+    // -----------------------------------------------------------------------
+    // Color constructors. Each accepts components in its colorspace's natural
+    // units and returns the canonical OKLCh array `[L, C, H]` (or with alpha).
+    // -----------------------------------------------------------------------
+    rgb(r, g, b, alpha) {
+      const c = rgbToOklch({ r: r * 255, g: g * 255, b: b * 255 });
+      const a = normalizeAlpha(alpha);
+      return a !== void 0 ? [c.L, c.C, c.H, a] : [c.L, c.C, c.H];
+    },
+    hsv(h, s, v, alpha) {
+      const rgb = hsvToRgb(h, s, v);
+      const c = rgbToOklch(rgb);
+      const a = normalizeAlpha(alpha);
+      return a !== void 0 ? [c.L, c.C, c.H, a] : [c.L, c.C, c.H];
+    },
+    hsl(h, s, l, alpha) {
+      const rgb = hslToRgb(h, s, l);
+      const c = rgbToOklch({ r: rgb.r, g: rgb.g, b: rgb.b });
+      const a = normalizeAlpha(alpha);
+      return a !== void 0 ? [c.L, c.C, c.H, a] : [c.L, c.C, c.H];
+    },
+    oklab(L, a, b, alpha) {
+      const c = oklabToOklch({ L, a, b });
+      const al = normalizeAlpha(alpha);
+      return al !== void 0 ? [c.L, c.C, c.H, al] : [c.L, c.C, c.H];
+    },
+    oklch(L, C, H, alpha) {
+      const a = normalizeAlpha(alpha);
+      return a !== void 0 ? [L, C, H, a] : [L, C, H];
+    },
+    // -----------------------------------------------------------------------
+    // As* converters. Inputs are anything `toOklch` accepts (string, packed
+    // int, or OKLCh array). Outputs are 3- or 4-element arrays in the named
+    // space. sRGB-based outputs (asRgb/asHsv/asHsl) use 0-1 channels for
+    // consistency with the GPU target's shader convention.
+    // -----------------------------------------------------------------------
+    asRgb(input) {
+      const rgb = toRgb255(input);
+      const r = rgb.r / 255;
+      const g = rgb.g / 255;
+      const b = rgb.b / 255;
+      return rgb.alpha !== void 0 ? [r, g, b, rgb.alpha] : [r, g, b];
+    },
+    asHsv(input) {
+      const rgb = toRgb255(input);
+      const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+      return rgb.alpha !== void 0 ? [hsv.h, hsv.s, hsv.v, rgb.alpha] : [hsv.h, hsv.s, hsv.v];
+    },
+    asHsl(input) {
+      const rgb = toRgb255(input);
+      const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+      return rgb.alpha !== void 0 ? [hsl.h, hsl.s, hsl.l, rgb.alpha] : [hsl.h, hsl.s, hsl.l];
+    },
+    asOklab(input) {
+      const c = toOklch(input);
+      const lab = oklchToOklab({ L: c.L, C: c.C, H: c.H });
+      return c.alpha !== void 0 ? [lab.L, lab.a, lab.b, c.alpha] : [lab.L, lab.a, lab.b];
+    },
+    // asOklch is identity — handled at compile time as a pass-through
+    // Perceptual color difference (ΔE_OK).
+    colorDelta(a, b) {
+      const labA = oklchToOklab(toOklch(a));
+      const labB = oklchToOklab(toOklch(b));
+      return oklabDeltaE(labA, labB);
+    },
+    // Euclidean distance between two tuples. Plain numeric — not a color
+    // operation despite living in the same helpers block.
+    distance(a, b) {
+      if (!Array.isArray(a) || !Array.isArray(b))
+        throw new Error("Distance: expected two arrays");
+      if (a.length !== b.length) throw new Error("Distance: dimension mismatch");
+      let sumSq = 0;
+      for (let i = 0; i < a.length; i++) {
+        const d = a[i] - b[i];
+        sumSq += d * d;
+      }
+      return Math.sqrt(sumSq);
     }
   };
   var SYS_HELPERS = {
@@ -20878,6 +21609,13 @@ ${lines.join("\n")}`;
   function gpuVec2(target) {
     return target?.language === "wgsl" ? "vec2f" : "vec2";
   }
+  function gpuVec3(target) {
+    return target?.language === "wgsl" ? "vec3f" : "vec3";
+  }
+  function readStringLiteral(expr) {
+    if (!isString(expr)) return null;
+    return expr.string?.toLowerCase() ?? null;
+  }
   function compileIntArg(expr, compile2, target) {
     const c = tryGetConstant(expr);
     if (c !== void 0 && Number.isInteger(c)) return c.toString();
@@ -20936,7 +21674,7 @@ ${lines.join("\n")}`;
       `for (${indexDecl} = ${lowerStr}; ${index} <= ${upperStr}; ${index}++) {`,
       `  ${acc} ${op}= ${body};`,
       `}`,
-      `return ${acc}`
+      `return ${acc};`
     ];
     return lines.join("\n");
   }
@@ -20990,8 +21728,7 @@ ${lines.join("\n")}`;
         const iScale = isSymbol2(iFactor, "ImaginaryUnit") ? 1 : iFactor.im;
         const realFactors = args.filter((_, i) => i !== iIndex);
         const v2 = gpuVec2(target);
-        if (realFactors.length === 0)
-          return `${v2}(0.0, ${formatFloat(iScale)})`;
+        if (realFactors.length === 0) return `${v2}(0.0, ${formatFloat(iScale)})`;
         const factors = realFactors.map((f) => compile2(f));
         if (iScale !== 1) factors.unshift(formatFloat(iScale));
         const imCode = foldTerms(factors, "1.0", "*");
@@ -21044,8 +21781,7 @@ ${lines.join("\n")}`;
       if (isNumber(x) && x.im !== 0) {
         return `${gpuVec2(target)}(${formatFloat(-x.re)}, ${formatFloat(-x.im)})`;
       }
-      if (isSymbol2(x, "ImaginaryUnit"))
-        return `${gpuVec2(target)}(0.0, -1.0)`;
+      if (isSymbol2(x, "ImaginaryUnit")) return `${gpuVec2(target)}(0.0, -1.0)`;
       return `(-${compile2(x)})`;
     },
     // Standard math functions with complex dispatch
@@ -21418,17 +22154,127 @@ ${lines.join("\n")}`;
       }
       const isWGSL = target?.language === "wgsl";
       const v3 = isWGSL ? "vec3f" : "vec3";
-      return `((_gpu_apca(${bg}, ${v3}(0.0)) > 50.0) ? ${v3}(0.0) : ${v3}(1.0))`;
+      const black = `${v3}(0.0)`;
+      const white = `${v3}(1.0, 0.0, 0.0)`;
+      return `((_gpu_apca(${bg}, ${black}) > 50.0) ? ${black} : ${white})`;
     },
     ColorToColorspace: ([color, space], compile2) => {
       if (color === null || space === null)
         throw new Error("ColorToColorspace: need color and space");
-      return `_gpu_srgb_to_oklab(${compile2(color)})`;
+      const spaceName = readStringLiteral(space);
+      if (spaceName === null)
+        throw new Error("ColorToColorspace: space must be a string literal");
+      const c = compile2(color);
+      switch (spaceName) {
+        case "oklch":
+          return c;
+        case "oklab":
+        case "lab":
+          return `_gpu_oklch_to_oklab(${c})`;
+        case "rgb":
+          return `_gpu_oklch_to_srgb(${c})`;
+        case "hsl":
+          return `_gpu_rgb_to_hsl(_gpu_oklch_to_srgb(${c}))`;
+        case "hsv":
+          return `_gpu_rgb_to_hsv(_gpu_oklch_to_srgb(${c}))`;
+        default:
+          throw new Error(
+            `ColorToColorspace: unsupported space "${spaceName}" on GPU target`
+          );
+      }
     },
     ColorFromColorspace: ([components, space], compile2) => {
       if (components === null || space === null)
         throw new Error("ColorFromColorspace: need components and space");
-      return `_gpu_oklab_to_srgb(${compile2(components)})`;
+      const spaceName = readStringLiteral(space);
+      if (spaceName === null)
+        throw new Error("ColorFromColorspace: space must be a string literal");
+      const c = compile2(components);
+      switch (spaceName) {
+        case "oklch":
+          return c;
+        case "oklab":
+        case "lab":
+          return `_gpu_oklab_to_oklch(${c})`;
+        case "rgb":
+          return `_gpu_srgb_to_oklch(${c})`;
+        case "hsl":
+          return `_gpu_srgb_to_oklch(_gpu_hsl_to_rgb(${c}))`;
+        case "hsv":
+          return `_gpu_srgb_to_oklch(_gpu_hsv_to_rgb(${c}))`;
+        default:
+          throw new Error(
+            `ColorFromColorspace: unsupported space "${spaceName}" on GPU target`
+          );
+      }
+    },
+    // ---------------------------------------------------------------------------
+    // Color literals. Each typed head compiles to a canonical OKLCh vec3.
+    // Alpha (4th argument) is dropped — GPU color values are vec3 only. Pass
+    // alpha as a separate uniform if it's needed at the framebuffer boundary.
+    // ---------------------------------------------------------------------------
+    Color: ([s], _compile, target) => {
+      if (s === null) throw new Error("Color: no argument");
+      const str = readStringLiteral(s);
+      if (str === null)
+        throw new Error("Color: argument must be a string literal on GPU target");
+      const packed = parseColor(str);
+      if (packed === 0 && str.trim().toLowerCase() !== "transparent")
+        throw new Error(`Color: invalid color string "${str}"`);
+      const r = packed >>> 24 & 255;
+      const g = packed >>> 16 & 255;
+      const b = packed >>> 8 & 255;
+      const oklch2 = rgbToOklch({ r, g, b });
+      return `${gpuVec3(target)}(${formatFloat(oklch2.L)}, ${formatFloat(oklch2.C)}, ${formatFloat(oklch2.H)})`;
+    },
+    Rgb: (args, compile2, target) => {
+      if (args.length < 3) throw new Error("Rgb: need 3 components");
+      const v3 = gpuVec3(target);
+      return `_gpu_srgb_to_oklch(${v3}(${compile2(args[0])}, ${compile2(args[1])}, ${compile2(args[2])}))`;
+    },
+    Hsv: (args, compile2, target) => {
+      if (args.length < 3) throw new Error("Hsv: need 3 components");
+      const v3 = gpuVec3(target);
+      return `_gpu_srgb_to_oklch(_gpu_hsv_to_rgb(${v3}(${compile2(args[0])}, ${compile2(args[1])}, ${compile2(args[2])})))`;
+    },
+    Hsl: (args, compile2, target) => {
+      if (args.length < 3) throw new Error("Hsl: need 3 components");
+      const v3 = gpuVec3(target);
+      return `_gpu_srgb_to_oklch(_gpu_hsl_to_rgb(${v3}(${compile2(args[0])}, ${compile2(args[1])}, ${compile2(args[2])})))`;
+    },
+    Oklab: (args, compile2, target) => {
+      if (args.length < 3) throw new Error("Oklab: need 3 components");
+      const v3 = gpuVec3(target);
+      return `_gpu_oklab_to_oklch(${v3}(${compile2(args[0])}, ${compile2(args[1])}, ${compile2(args[2])}))`;
+    },
+    Oklch: (args, compile2, target) => {
+      if (args.length < 3) throw new Error("Oklch: need 3 components");
+      const v3 = gpuVec3(target);
+      return `${v3}(${compile2(args[0])}, ${compile2(args[1])}, ${compile2(args[2])})`;
+    },
+    // ---------------------------------------------------------------------------
+    // As* operators. AsOklch is identity (canonical). The other As* return
+    // components in the named space, equivalent to ColorToColorspace(c, 'x').
+    // ---------------------------------------------------------------------------
+    AsOklch: ([c], compile2) => {
+      if (c === null) throw new Error("AsOklch: no argument");
+      return compile2(c);
+    },
+    AsOklab: ([c], compile2) => {
+      if (c === null) throw new Error("AsOklab: no argument");
+      return `_gpu_oklch_to_oklab(${compile2(c)})`;
+    },
+    AsRgb: ([c], compile2) => {
+      if (c === null) throw new Error("AsRgb: no argument");
+      return `_gpu_oklch_to_srgb(${compile2(c)})`;
+    },
+    AsHsv: ([c], compile2) => {
+      if (c === null) throw new Error("AsHsv: no argument");
+      return `_gpu_rgb_to_hsv(_gpu_oklch_to_srgb(${compile2(c)}))`;
+    },
+    AsHsl: ([c], compile2) => {
+      if (c === null) throw new Error("AsHsl: no argument");
+      return `_gpu_rgb_to_hsl(_gpu_oklch_to_srgb(${compile2(c)}))`;
     },
     // Fractal functions
     Mandelbrot: ([c, maxIter], compile2, target) => {
@@ -22121,28 +22967,124 @@ vec3 _gpu_oklab_to_srgb(vec3 lab) {
 
 vec3 _gpu_oklab_to_oklch(vec3 lab) {
   float C = length(lab.yz);
-  float H = atan(lab.z, lab.y);
+  float H = atan(lab.z, lab.y) * (180.0 / 3.14159265359);
+  if (H < 0.0) H += 360.0;
   return vec3(lab.x, C, H);
 }
 
 vec3 _gpu_oklch_to_oklab(vec3 lch) {
-  return vec3(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));
+  float h_rad = lch.z * (3.14159265359 / 180.0);
+  return vec3(lch.x, lch.y * cos(h_rad), lch.y * sin(h_rad));
+}
+
+vec3 _gpu_srgb_to_oklch(vec3 rgb) {
+  return _gpu_oklab_to_oklch(_gpu_srgb_to_oklab(rgb));
+}
+
+vec3 _gpu_oklch_to_srgb(vec3 lch) {
+  return _gpu_oklab_to_srgb(_gpu_oklch_to_oklab(lch));
+}
+
+// HSL conversion. Hue in degrees, saturation/lightness in 0-1.
+vec3 _gpu_hsl_to_rgb(vec3 hsl) {
+  float h = hsl.x;
+  float s = hsl.y;
+  float l = hsl.z;
+  float c = (1.0 - abs(2.0 * l - 1.0)) * s;
+  float h6 = h / 60.0;
+  float x = c * (1.0 - abs(mod(h6, 2.0) - 1.0));
+  float r = 0.0;
+  float g = 0.0;
+  float b = 0.0;
+  if (h6 < 1.0)      { r = c; g = x; b = 0.0; }
+  else if (h6 < 2.0) { r = x; g = c; b = 0.0; }
+  else if (h6 < 3.0) { r = 0.0; g = c; b = x; }
+  else if (h6 < 4.0) { r = 0.0; g = x; b = c; }
+  else if (h6 < 5.0) { r = x; g = 0.0; b = c; }
+  else               { r = c; g = 0.0; b = x; }
+  float m = l - c / 2.0;
+  return vec3(r + m, g + m, b + m);
+}
+
+vec3 _gpu_rgb_to_hsl(vec3 rgb) {
+  float maxc = max(max(rgb.x, rgb.y), rgb.z);
+  float minc = min(min(rgb.x, rgb.y), rgb.z);
+  float l = (maxc + minc) / 2.0;
+  float d = maxc - minc;
+  if (d < 1e-6) return vec3(0.0, 0.0, l);
+  float s = d / (1.0 - abs(2.0 * l - 1.0));
+  float h;
+  if (maxc == rgb.x)      h = mod((rgb.y - rgb.z) / d, 6.0);
+  else if (maxc == rgb.y) h = (rgb.z - rgb.x) / d + 2.0;
+  else                    h = (rgb.x - rgb.y) / d + 4.0;
+  h *= 60.0;
+  if (h < 0.0) h += 360.0;
+  return vec3(h, s, l);
+}
+
+// HSV conversion. Hue in degrees, saturation/value in 0-1.
+vec3 _gpu_hsv_to_rgb(vec3 hsv) {
+  float h = hsv.x;
+  float s = hsv.y;
+  float v = hsv.z;
+  float c = v * s;
+  float h6 = h / 60.0;
+  float x = c * (1.0 - abs(mod(h6, 2.0) - 1.0));
+  float r = 0.0;
+  float g = 0.0;
+  float b = 0.0;
+  if (h6 < 1.0)      { r = c; g = x; b = 0.0; }
+  else if (h6 < 2.0) { r = x; g = c; b = 0.0; }
+  else if (h6 < 3.0) { r = 0.0; g = c; b = x; }
+  else if (h6 < 4.0) { r = 0.0; g = x; b = c; }
+  else if (h6 < 5.0) { r = x; g = 0.0; b = c; }
+  else               { r = c; g = 0.0; b = x; }
+  float m = v - c;
+  return vec3(r + m, g + m, b + m);
+}
+
+vec3 _gpu_rgb_to_hsv(vec3 rgb) {
+  float maxc = max(max(rgb.x, rgb.y), rgb.z);
+  float minc = min(min(rgb.x, rgb.y), rgb.z);
+  float v = maxc;
+  float d = maxc - minc;
+  if (d < 1e-6) return vec3(0.0, 0.0, v);
+  float s = (maxc < 1e-6) ? 0.0 : d / maxc;
+  float h;
+  if (maxc == rgb.x)      h = mod((rgb.y - rgb.z) / d, 6.0);
+  else if (maxc == rgb.y) h = (rgb.z - rgb.x) / d + 2.0;
+  else                    h = (rgb.x - rgb.y) / d + 4.0;
+  h *= 60.0;
+  if (h < 0.0) h += 360.0;
+  return vec3(h, s, v);
 }
 
-vec3 _gpu_color_mix(vec3 rgb1, vec3 rgb2, float t) {
-  vec3 lch1 = _gpu_oklab_to_oklch(_gpu_srgb_to_oklab(rgb1));
-  vec3 lch2 = _gpu_oklab_to_oklch(_gpu_srgb_to_oklab(rgb2));
+vec3 _gpu_color_mix(vec3 lch1, vec3 lch2, float t) {
   float L = mix(lch1.x, lch2.x, t);
   float C = mix(lch1.y, lch2.y, t);
-  float dh = lch2.z - lch1.z;
-  const float PI = 3.14159265359;
-  if (dh > PI) dh -= 2.0 * PI;
-  if (dh < -PI) dh += 2.0 * PI;
-  float H = lch1.z + dh * t;
-  return _gpu_oklab_to_srgb(_gpu_oklch_to_oklab(vec3(L, C, H)));
+  bool a1 = lch1.y < 1e-6;
+  bool a2 = lch2.y < 1e-6;
+  float H;
+  if (a1 && a2) {
+    H = lch1.z;
+  } else if (a1) {
+    H = lch2.z;
+  } else if (a2) {
+    H = lch1.z;
+  } else {
+    float dh = lch2.z - lch1.z;
+    if (dh > 180.0) dh -= 360.0;
+    if (dh < -180.0) dh += 360.0;
+    H = lch1.z + dh * t;
+    if (H < 0.0) H += 360.0;
+    if (H >= 360.0) H -= 360.0;
+  }
+  return vec3(L, C, H);
 }
 
-float _gpu_apca(vec3 bg, vec3 fg) {
+float _gpu_apca(vec3 lch_bg, vec3 lch_fg) {
+  vec3 bg = _gpu_oklch_to_srgb(lch_bg);
+  vec3 fg = _gpu_oklch_to_srgb(lch_fg);
   float bgR = _gpu_srgb_to_linear(bg.x);
   float bgG = _gpu_srgb_to_linear(bg.y);
   float bgB = _gpu_srgb_to_linear(bg.z);
@@ -22153,9 +23095,7 @@ float _gpu_apca(vec3 bg, vec3 fg) {
   float fgY = 0.2126729 * fgR + 0.7151522 * fgG + 0.0721750 * fgB;
   float bgC = pow(bgY, 0.56);
   float fgC = pow(fgY, 0.57);
-  float contrast = (bgC > fgC)
-    ? (bgC - fgC) * 1.14
-    : (bgC - fgC) * 1.14;
+  float contrast = (bgC - fgC) * 1.14;
   return contrast * 100.0;
 }
 `;
@@ -22199,28 +23139,133 @@ fn _gpu_oklab_to_srgb(lab: vec3f) -> vec3f {
 
 fn _gpu_oklab_to_oklch(lab: vec3f) -> vec3f {
   let C = length(lab.yz);
-  let H = atan2(lab.z, lab.y);
+  var H = atan2(lab.z, lab.y) * (180.0 / 3.14159265359);
+  if (H < 0.0) { H = H + 360.0; }
   return vec3f(lab.x, C, H);
 }
 
 fn _gpu_oklch_to_oklab(lch: vec3f) -> vec3f {
-  return vec3f(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));
+  let h_rad = lch.z * (3.14159265359 / 180.0);
+  return vec3f(lch.x, lch.y * cos(h_rad), lch.y * sin(h_rad));
+}
+
+fn _gpu_srgb_to_oklch(rgb: vec3f) -> vec3f {
+  return _gpu_oklab_to_oklch(_gpu_srgb_to_oklab(rgb));
+}
+
+fn _gpu_oklch_to_srgb(lch: vec3f) -> vec3f {
+  return _gpu_oklab_to_srgb(_gpu_oklch_to_oklab(lch));
+}
+
+fn _gpu_hsl_to_rgb(hsl: vec3f) -> vec3f {
+  let h = hsl.x;
+  let s = hsl.y;
+  let l = hsl.z;
+  let c = (1.0 - abs(2.0 * l - 1.0)) * s;
+  let h6 = h / 60.0;
+  let x = c * (1.0 - abs((h6 - 2.0 * floor(h6 / 2.0)) - 1.0));
+  var r: f32 = 0.0;
+  var g: f32 = 0.0;
+  var b: f32 = 0.0;
+  if (h6 < 1.0)      { r = c; g = x; b = 0.0; }
+  else if (h6 < 2.0) { r = x; g = c; b = 0.0; }
+  else if (h6 < 3.0) { r = 0.0; g = c; b = x; }
+  else if (h6 < 4.0) { r = 0.0; g = x; b = c; }
+  else if (h6 < 5.0) { r = x; g = 0.0; b = c; }
+  else               { r = c; g = 0.0; b = x; }
+  let m = l - c / 2.0;
+  return vec3f(r + m, g + m, b + m);
+}
+
+fn _gpu_rgb_to_hsl(rgb: vec3f) -> vec3f {
+  let maxc = max(max(rgb.x, rgb.y), rgb.z);
+  let minc = min(min(rgb.x, rgb.y), rgb.z);
+  let l = (maxc + minc) / 2.0;
+  let d = maxc - minc;
+  if (d < 1e-6) { return vec3f(0.0, 0.0, l); }
+  let s = d / (1.0 - abs(2.0 * l - 1.0));
+  var h: f32;
+  if (maxc == rgb.x) {
+    let v = (rgb.y - rgb.z) / d;
+    h = v - 6.0 * floor(v / 6.0);
+  } else if (maxc == rgb.y) {
+    h = (rgb.z - rgb.x) / d + 2.0;
+  } else {
+    h = (rgb.x - rgb.y) / d + 4.0;
+  }
+  h = h * 60.0;
+  if (h < 0.0) { h = h + 360.0; }
+  return vec3f(h, s, l);
+}
+
+fn _gpu_hsv_to_rgb(hsv: vec3f) -> vec3f {
+  let h = hsv.x;
+  let s = hsv.y;
+  let v = hsv.z;
+  let c = v * s;
+  let h6 = h / 60.0;
+  let x = c * (1.0 - abs((h6 - 2.0 * floor(h6 / 2.0)) - 1.0));
+  var r: f32 = 0.0;
+  var g: f32 = 0.0;
+  var b: f32 = 0.0;
+  if (h6 < 1.0)      { r = c; g = x; b = 0.0; }
+  else if (h6 < 2.0) { r = x; g = c; b = 0.0; }
+  else if (h6 < 3.0) { r = 0.0; g = c; b = x; }
+  else if (h6 < 4.0) { r = 0.0; g = x; b = c; }
+  else if (h6 < 5.0) { r = x; g = 0.0; b = c; }
+  else               { r = c; g = 0.0; b = x; }
+  let m = v - c;
+  return vec3f(r + m, g + m, b + m);
+}
+
+fn _gpu_rgb_to_hsv(rgb: vec3f) -> vec3f {
+  let maxc = max(max(rgb.x, rgb.y), rgb.z);
+  let minc = min(min(rgb.x, rgb.y), rgb.z);
+  let v = maxc;
+  let d = maxc - minc;
+  if (d < 1e-6) { return vec3f(0.0, 0.0, v); }
+  var s: f32 = 0.0;
+  if (maxc >= 1e-6) { s = d / maxc; }
+  var h: f32;
+  if (maxc == rgb.x) {
+    let q = (rgb.y - rgb.z) / d;
+    h = q - 6.0 * floor(q / 6.0);
+  } else if (maxc == rgb.y) {
+    h = (rgb.z - rgb.x) / d + 2.0;
+  } else {
+    h = (rgb.x - rgb.y) / d + 4.0;
+  }
+  h = h * 60.0;
+  if (h < 0.0) { h = h + 360.0; }
+  return vec3f(h, s, v);
 }
 
-fn _gpu_color_mix(rgb1: vec3f, rgb2: vec3f, t: f32) -> vec3f {
-  let lch1 = _gpu_oklab_to_oklch(_gpu_srgb_to_oklab(rgb1));
-  let lch2 = _gpu_oklab_to_oklch(_gpu_srgb_to_oklab(rgb2));
+fn _gpu_color_mix(lch1: vec3f, lch2: vec3f, t: f32) -> vec3f {
   let L = mix(lch1.x, lch2.x, t);
   let C = mix(lch1.y, lch2.y, t);
-  let PI = 3.14159265359;
-  var dh = lch2.z - lch1.z;
-  if (dh > PI) { dh -= 2.0 * PI; }
-  if (dh < -PI) { dh += 2.0 * PI; }
-  let H = lch1.z + dh * t;
-  return _gpu_oklab_to_srgb(_gpu_oklch_to_oklab(vec3f(L, C, H)));
+  let a1 = lch1.y < 1e-6;
+  let a2 = lch2.y < 1e-6;
+  var H: f32;
+  if (a1 && a2) {
+    H = lch1.z;
+  } else if (a1) {
+    H = lch2.z;
+  } else if (a2) {
+    H = lch1.z;
+  } else {
+    var dh = lch2.z - lch1.z;
+    if (dh > 180.0) { dh = dh - 360.0; }
+    if (dh < -180.0) { dh = dh + 360.0; }
+    H = lch1.z + dh * t;
+    if (H < 0.0) { H = H + 360.0; }
+    if (H >= 360.0) { H = H - 360.0; }
+  }
+  return vec3f(L, C, H);
 }
 
-fn _gpu_apca(bg: vec3f, fg: vec3f) -> f32 {
+fn _gpu_apca(lch_bg: vec3f, lch_fg: vec3f) -> f32 {
+  let bg = _gpu_oklch_to_srgb(lch_bg);
+  let fg = _gpu_oklch_to_srgb(lch_fg);
   let bgR = _gpu_srgb_to_linear(bg.x);
   let bgG = _gpu_srgb_to_linear(bg.y);
   let bgB = _gpu_srgb_to_linear(bg.z);
@@ -22508,7 +23553,7 @@ fn _gpu_apca(bg: vec3f, fg: vec3f) -> f32 {
           if (stmts.length === 0) return "";
           const last = stmts.length - 1;
           stmts[last] = `return ${stmts[last]}`;
-          return stmts.join(";\n");
+          return stmts.join(";\n") + ";";
         },
         ...options
       };
@@ -22607,7 +23652,7 @@ fn _gpu_apca(bg: vec3f, fg: vec3f) -> f32 {
       if (body.includes("\n")) {
         const indented = body.split("\n").map((l) => `  ${l}`).join("\n");
         return `${returnType} ${functionName}(${params}) {
-${indented};
+${indented}
 }`;
       }
       return `${returnType} ${functionName}(${params}) {
@@ -22718,7 +23763,7 @@ ${indented};
         return `fn ${functionName}(${params}) -> ${toWGSLType(
           returnType
         )} {
-${indented};
+${indented}
 }`;
       }
       return `fn ${functionName}(${params}) -> ${toWGSLType(returnType)} {
@@ -24897,7 +25942,7 @@ ${code}`;
   }
 
   // src/compile.ts
-  var version = "0.55.6";
+  var version = "0.57.0";
   return __toCommonJS(compile_exports);
 })();
 /*! Bundled license information: