@sarmal/core 0.29.1 → 0.31.0

package/dist/index.cjs

@@ -385,6 +385,78 @@ function hexToRgb(hex) {
   const n = parseInt(hex.slice(1), 16);
   return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
 }
+var HEX_3_RE = /^#([0-9a-fA-F]{3})$/;
+var HEX_6_RE = /^#([0-9a-fA-F]{6})$/;
+var HEX_8_RE = /^#([0-9a-fA-F]{8})$/;
+var RGB_RE = /^rgba?\(\s*(-?\d{1,3})\s*,\s*(-?\d{1,3})\s*,\s*(-?\d{1,3})(?:\s*,\s*[\d.]+)?\s*\)$/i;
+function parseColorToRgb(s) {
+  const trimmed = s.trim();
+  const m3 = HEX_3_RE.exec(trimmed);
+  if (m3) {
+    const [r, g, b] = m3[1];
+    return hexToRgb(`#${r}${r}${g}${g}${b}${b}`);
+  }
+  const m6 = HEX_6_RE.exec(trimmed);
+  if (m6) {
+    return hexToRgb(trimmed);
+  }
+  const m8 = HEX_8_RE.exec(trimmed);
+  if (m8) {
+    return hexToRgb(`#${trimmed.slice(1, 7)}`);
+  }
+  const mRgb = RGB_RE.exec(trimmed);
+  if (mRgb) {
+    return {
+      r: Math.max(0, Math.min(255, parseInt(mRgb[1], 10))),
+      g: Math.max(0, Math.min(255, parseInt(mRgb[2], 10))),
+      b: Math.max(0, Math.min(255, parseInt(mRgb[3], 10)))
+    };
+  }
+  return null;
+}
+var OKLCH_RE = /^oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*[\d.]+)?\s*\)$/i;
+function parseOklchToOklab(s) {
+  const m = OKLCH_RE.exec(s.trim());
+  if (!m) {
+    return null;
+  }
+  const L = parseFloat(m[1]);
+  const C = parseFloat(m[2]);
+  const H = parseFloat(m[3]);
+  if (Number.isNaN(L) || Number.isNaN(C) || Number.isNaN(H)) {
+    return null;
+  }
+  const clampedL = Math.max(0, Math.min(1, L));
+  const clampedC = Math.max(0, Math.min(0.4, C));
+  const H_rad = H * (Math.PI / 180);
+  return {
+    L: clampedL,
+    a: clampedC * Math.cos(H_rad),
+    b: clampedC * Math.sin(H_rad)
+  };
+}
+function parseColorToOklab(s) {
+  const oklab = parseOklchToOklab(s);
+  if (oklab !== null) {
+    return oklab;
+  }
+  const rgb = parseColorToRgb(s);
+  if (rgb === null) {
+    return null;
+  }
+  return rgbToOklab(rgb);
+}
+function colorToRgb(color) {
+  const rgb = parseColorToRgb(color);
+  if (rgb !== null) {
+    return rgb;
+  }
+  const lab = parseOklchToOklab(color);
+  if (lab !== null) {
+    return oklabToRgb(lab);
+  }
+  throw new Error(`[sarmal] unrecognized color "${color}"`);
+}
 function srgbByteToLinear(c) {
   const n = c / 255;
   return n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
@@ -422,29 +494,27 @@ var lerpOklab = (a, b, t) => {
   if (t >= 1) {
     return b;
   }
-  const la = rgbToOklab(a), lb = rgbToOklab(b);
-  return oklabToRgb({
-    L: la.L + (lb.L - la.L) * t,
-    a: la.a + (lb.a - la.a) * t,
-    b: la.b + (lb.b - la.b) * t
-  });
+  return {
+    L: a.L + (b.L - a.L) * t,
+    a: a.a + (b.a - a.a) * t,
+    b: a.b + (b.b - a.b) * t
+  };
 };
 function getPaletteColor(palette, position, timeOffset = 0) {
   if (palette.length === 0) {
-    return { r: 255, g: 255, b: 255 };
+    return { L: 1, a: 0, b: 0 };
   }
   if (palette.length === 1) {
-    return hexToRgb(palette[0]);
+    return palette[0];
   }
   const cyclePos = ((position + timeOffset) % 1 + 1) % 1;
   const scaled = cyclePos * palette.length;
   const idx = Math.floor(scaled);
   const t = scaled - idx;
-  const c1 = hexToRgb(palette[idx % palette.length]);
-  const c2 = hexToRgb(palette[(idx + 1) % palette.length]);
+  const c1 = palette[idx % palette.length];
+  const c2 = palette[(idx + 1) % palette.length];
   return lerpOklab(c1, c2, t);
 }
-var HEX_COLOR_RE = /^#[0-9a-fA-F]{6}$/;
 var TRAIL_STYLES = ["default", "gradient-static", "gradient-animated"];
 var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
   "trailColor",
@@ -477,9 +547,9 @@ function validateRenderOptions(partial) {
 }
 function assertTrailColor(value) {
   if (typeof value === "string") {
-    if (!HEX_COLOR_RE.test(value)) {
+    if (parseColorToOklab(value) === null) {
       throw new TypeError(
-        `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`
+        `[sarmal] setRenderOptions: trailColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()), got "${value}"`
       );
     }
     return;
@@ -492,25 +562,25 @@ function assertTrailColor(value) {
     }
     for (let i = 0; i < value.length; i++) {
       const entry = value[i];
-      if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
+      if (typeof entry !== "string" || parseColorToOklab(entry) === null) {
         throw new TypeError(
-          `[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`
+          `[sarmal] setRenderOptions: trailColor[${i}] must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()), got ${JSON.stringify(entry)}`
         );
       }
     }
     return;
   }
   throw new TypeError(
-    `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`
+    `[sarmal] setRenderOptions: trailColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()) or an array of color strings, got ${JSON.stringify(value)}`
   );
 }
 function assertHeadColor(value) {
   if (value === null) {
     return;
   }
-  if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
+  if (typeof value !== "string" || parseColorToOklab(value) === null) {
     throw new TypeError(
-      `[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`
+      `[sarmal] setRenderOptions: headColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()) or null, got ${JSON.stringify(value)}`
     );
   }
 }
@@ -518,9 +588,9 @@ function assertSkeletonColor(value) {
   if (value === "transparent") {
     return;
   }
-  if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
+  if (typeof value !== "string" || parseColorToOklab(value) === null) {
     throw new TypeError(
-      `[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`
+      `[sarmal] setRenderOptions: skeletonColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()) or "transparent", got ${JSON.stringify(value)}`
     );
   }
 }
@@ -555,7 +625,7 @@ function resolveHeadColor(trailColor, trailStyle) {
   }
   const palette = resolveTrailPalette(trailColor);
   const last = palette[palette.length - 1];
-  const { r, g, b } = hexToRgb(last);
+  const { r, g, b } = colorToRgb(last);
   return `rgb(${r},${g},${b})`;
 }
 function warnIfTrailColorMismatch(trailColor, trailStyle) {
@@ -575,9 +645,9 @@ function warnIfTrailColorMismatch(trailColor, trailStyle) {
 // src/renderer.ts
 var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160));
 var WHITE_HEX = "#ffffff";
-function hexToRgbComponents(hex) {
-  const n = parseInt(hex.slice(1), 16);
-  return `${n >> 16},${n >> 8 & 255},${n & 255}`;
+function colorToRgbComponents(color) {
+  const { r, g, b } = colorToRgb(color);
+  return `${r},${g},${b}`;
 }
 function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
   target.style.width = `${logicalWidth}px`;
@@ -597,8 +667,9 @@ function createRenderer(options) {
   let skeletonColor = options.skeletonColor ?? WHITE_HEX;
   let userHeadColor = options.headColor ?? null;
   let headColor = userHeadColor ?? resolveHeadColor(trailColor, trailStyle);
-  let trailSolidRgb = hexToRgbComponents(resolveTrailMainColor(trailColor));
+  let trailSolidRgb = colorToRgbComponents(resolveTrailMainColor(trailColor));
   let trailPalette = resolveTrailPalette(trailColor);
+  let trailPaletteOklab = trailPalette.map((c) => parseColorToOklab(c));
   warnIfTrailColorMismatch(trailColor, trailStyle);
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
   function setupCanvas() {
@@ -642,7 +713,7 @@ function createRenderer(options) {
     skeletonCanvas = new OffscreenCanvas(canvas.width, canvas.height);
     const skeletonCtx = skeletonCanvas.getContext("2d");
     skeletonCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    skeletonCtx.strokeStyle = `rgba(${hexToRgbComponents(skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
+    skeletonCtx.strokeStyle = `rgba(${colorToRgbComponents(skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
     skeletonCtx.lineWidth = 1.5;
     skeletonCtx.beginPath();
     const first = skeleton[0];
@@ -657,7 +728,7 @@ function createRenderer(options) {
     if (pts.length < 2) {
       return;
     }
-    ctx.strokeStyle = `rgba(${hexToRgbComponents(skeletonColor)},${opacity})`;
+    ctx.strokeStyle = `rgba(${colorToRgbComponents(skeletonColor)},${opacity})`;
     ctx.lineWidth = 1.5;
     ctx.beginPath();
     ctx.moveTo(pts[0].x * scale + offsetX, pts[0].y * scale + offsetY);
@@ -678,7 +749,7 @@ function createRenderer(options) {
       if (skeleton.length < 2) {
         return;
       }
-      ctx.strokeStyle = `rgba(${hexToRgbComponents(skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
+      ctx.strokeStyle = `rgba(${colorToRgbComponents(skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
       ctx.lineWidth = 1.5;
       ctx.beginPath();
       const first = skeleton[0];
@@ -710,8 +781,8 @@ function createRenderer(options) {
         ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
       } else {
         const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
-        const color = getPaletteColor(trailPalette, progress, timeOffset);
-        ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${opacity})`;
+        const { r, g, b } = oklabToRgb(getPaletteColor(trailPaletteOklab, progress, timeOffset));
+        ctx.fillStyle = `rgba(${r},${g},${b},${opacity})`;
       }
       ctx.beginPath();
       ctx.moveTo(l0x, l0y);
@@ -755,7 +826,7 @@ function createRenderer(options) {
         morphReject = null;
         morphAlpha = 0;
         skeleton = engine.getSarmalSkeleton();
-        if (!engine.isLiveSkeleton) {
+        if (!engine.isLiveSkeleton && skeletonColor !== "transparent") {
           buildSkeletonCanvas();
         }
       }
@@ -781,7 +852,7 @@ function createRenderer(options) {
   }
   skeleton = engine.getSarmalSkeleton();
   calculateBoundaries();
-  if (!engine.isLiveSkeleton) {
+  if (!engine.isLiveSkeleton && skeletonColor !== "transparent") {
     buildSkeletonCanvas();
   }
   if (options.initialPhase !== void 0) {
@@ -843,8 +914,9 @@ function createRenderer(options) {
       validateRenderOptions(partial);
       if (partial.trailColor !== void 0) {
         trailColor = partial.trailColor;
-        trailSolidRgb = hexToRgbComponents(resolveTrailMainColor(trailColor));
+        trailSolidRgb = colorToRgbComponents(resolveTrailMainColor(trailColor));
         trailPalette = resolveTrailPalette(trailColor);
+        trailPaletteOklab = trailPalette.map((c) => parseColorToOklab(c));
       }
       if (partial.skeletonColor !== void 0) {
         skeletonColor = partial.skeletonColor;
@@ -927,6 +999,10 @@ function sampleCurveSkeleton(curveDef) {
 function el(tag) {
   return document.createElementNS("http://www.w3.org/2000/svg", tag);
 }
+function colorToRgbAttr(color) {
+  const { r, g, b } = colorToRgb(color);
+  return `rgb(${r},${g},${b})`;
+}
 function createSVGRenderer(options) {
   const { container, engine } = options;
   const poolSize = engine.trailLength;
@@ -941,8 +1017,9 @@ function createSVGRenderer(options) {
   let userHeadColor = options.headColor ?? null;
   let headColor = userHeadColor ?? resolveHeadColor(trailColor, trailStyle);
   let headRadius;
-  let trailSolid = resolveTrailMainColor(trailColor);
+  let trailSolid = colorToRgbAttr(resolveTrailMainColor(trailColor));
   let trailPalette = resolveTrailPalette(trailColor);
+  let trailPaletteOklab = trailPalette.map((c) => parseColorToOklab(c));
   const ariaLabel = options.ariaLabel ?? "Loading";
   warnIfTrailColorMismatch(trailColor, trailStyle);
   const viewSize = 100;
@@ -965,7 +1042,10 @@ function createSVGRenderer(options) {
   const skeletonPath = el("path");
   skeletonPath.setAttribute("data-sarmal-role", "skeleton");
   skeletonPath.setAttribute("fill", "none");
-  skeletonPath.setAttribute("stroke", skeletonColor);
+  skeletonPath.setAttribute(
+    "stroke",
+    skeletonColor === "transparent" ? "transparent" : colorToRgbAttr(skeletonColor)
+  );
   skeletonPath.setAttribute("stroke-opacity", String(DEFAULT_SKELETON_OPACITY));
   skeletonPath.setAttribute("stroke-width", svgSkeletonStrokeWidth);
   if (skeletonColor === "transparent") {
@@ -974,13 +1054,19 @@ function createSVGRenderer(options) {
   group.appendChild(skeletonPath);
   const skeletonPathA = el("path");
   skeletonPathA.setAttribute("fill", "none");
-  skeletonPathA.setAttribute("stroke", skeletonColor);
+  skeletonPathA.setAttribute(
+    "stroke",
+    skeletonColor === "transparent" ? "transparent" : colorToRgbAttr(skeletonColor)
+  );
   skeletonPathA.setAttribute("stroke-width", svgSkeletonStrokeWidth);
   skeletonPathA.setAttribute("visibility", "hidden");
   group.appendChild(skeletonPathA);
   const skeletonPathB = el("path");
   skeletonPathB.setAttribute("fill", "none");
-  skeletonPathB.setAttribute("stroke", skeletonColor);
+  skeletonPathB.setAttribute(
+    "stroke",
+    skeletonColor === "transparent" ? "transparent" : colorToRgbAttr(skeletonColor)
+  );
   skeletonPathB.setAttribute("stroke-width", svgSkeletonStrokeWidth);
   skeletonPathB.setAttribute("visibility", "hidden");
   group.appendChild(skeletonPathB);
@@ -995,7 +1081,7 @@ function createSVGRenderer(options) {
   }
   const headCircle = el("circle");
   headCircle.setAttribute("data-sarmal-role", "head");
-  headCircle.setAttribute("fill", headColor);
+  headCircle.setAttribute("fill", colorToRgbAttr(headColor));
   headCircle.setAttribute("r", String(headRadius));
   group.appendChild(headCircle);
   container.appendChild(group);
@@ -1048,7 +1134,7 @@ function createSVGRenderer(options) {
       trailPaths[i].setAttribute("fill-opacity", opacity.toFixed(3));
       if (trailStyle !== "default") {
         const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
-        const { r, g, b } = getPaletteColor(trailPalette, progress, timeOffset);
+        const { r, g, b } = oklabToRgb(getPaletteColor(trailPaletteOklab, progress, timeOffset));
         trailPaths[i].setAttribute("fill", `rgb(${r},${g},${b})`);
       }
     }
@@ -1198,8 +1284,9 @@ function createSVGRenderer(options) {
       const prevTrailStyle = trailStyle;
       if (partial.trailColor !== void 0) {
         trailColor = partial.trailColor;
-        trailSolid = resolveTrailMainColor(trailColor);
+        trailSolid = colorToRgbAttr(resolveTrailMainColor(trailColor));
         trailPalette = resolveTrailPalette(trailColor);
+        trailPaletteOklab = trailPalette.map((c) => parseColorToOklab(c));
         if (trailStyle === "default") {
           for (const p of trailPaths) {
             p.setAttribute("fill", trailSolid);
@@ -1211,10 +1298,10 @@ function createSVGRenderer(options) {
         if (skeletonColor === "transparent") {
           skeletonPath.setAttribute("visibility", "hidden");
         } else {
-          skeletonPath.setAttribute("stroke", skeletonColor);
+          skeletonPath.setAttribute("stroke", colorToRgbAttr(skeletonColor));
           skeletonPath.removeAttribute("visibility");
-          skeletonPathA.setAttribute("stroke", skeletonColor);
-          skeletonPathB.setAttribute("stroke", skeletonColor);
+          skeletonPathA.setAttribute("stroke", colorToRgbAttr(skeletonColor));
+          skeletonPathB.setAttribute("stroke", colorToRgbAttr(skeletonColor));
         }
       }
       if (partial.trailStyle !== void 0) {
@@ -1237,7 +1324,7 @@ function createSVGRenderer(options) {
       } else {
         headColor = userHeadColor;
       }
-      headCircle.setAttribute("fill", headColor);
+      headCircle.setAttribute("fill", colorToRgbAttr(headColor));
       if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
         warnIfTrailColorMismatch(trailColor, trailStyle);
       }