@sarmal/core 0.30.0 → 0.33.0

package/dist/auto-init.cjs

@@ -406,6 +406,49 @@ function parseColorToRgb(s) {
   }
   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);
@@ -443,26 +486,25 @@ 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 TRAIL_STYLES = ["default", "gradient-static", "gradient-animated"];
@@ -471,7 +513,8 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
   "headColor",
   "skeletonColor",
   "trailStyle",
-  "headRadius"
+  "headRadius",
+  "trailWidth"
 ]);
 function validateRenderOptions(partial) {
   for (const key of Object.keys(partial)) {
@@ -494,12 +537,15 @@ function validateRenderOptions(partial) {
   if (partial.headRadius !== void 0) {
     assertHeadRadius(partial.headRadius);
   }
+  if (partial.trailWidth !== void 0) {
+    assertTrailWidth(partial.trailWidth);
+  }
 }
 function assertTrailColor(value) {
   if (typeof value === "string") {
-    if (parseColorToRgb(value) === null) {
+    if (parseColorToOklab(value) === null) {
       throw new TypeError(
-        `[sarmal] setRenderOptions: trailColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba()), got "${value}"`
+        `[sarmal] setRenderOptions: trailColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba(), oklch()), got "${value}"`
       );
     }
     return;
@@ -512,25 +558,25 @@ function assertTrailColor(value) {
     }
     for (let i = 0; i < value.length; i++) {
       const entry = value[i];
-      if (typeof entry !== "string" || parseColorToRgb(entry) === null) {
+      if (typeof entry !== "string" || parseColorToOklab(entry) === null) {
         throw new TypeError(
-          `[sarmal] setRenderOptions: trailColor[${i}] must be a valid color string (#rrggbb, #rgb, rgb(), rgba()), 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 valid color string (#rrggbb, #rgb, rgb(), rgba()) or an array of color 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" || parseColorToRgb(value) === null) {
+  if (typeof value !== "string" || parseColorToOklab(value) === null) {
     throw new TypeError(
-      `[sarmal] setRenderOptions: headColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba()) 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)}`
     );
   }
 }
@@ -538,9 +584,9 @@ function assertSkeletonColor(value) {
   if (value === "transparent") {
     return;
   }
-  if (typeof value !== "string" || parseColorToRgb(value) === null) {
+  if (typeof value !== "string" || parseColorToOklab(value) === null) {
     throw new TypeError(
-      `[sarmal] setRenderOptions: skeletonColor must be a valid color string (#rrggbb, #rgb, rgb(), rgba()) 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)}`
     );
   }
 }
@@ -563,6 +609,18 @@ function assertHeadRadius(value) {
     );
   }
 }
+function assertTrailWidth(value) {
+  if (typeof value !== "number") {
+    throw new TypeError(
+      `[sarmal] setRenderOptions: trailWidth must be a number, got ${JSON.stringify(value)}`
+    );
+  }
+  if (!Number.isFinite(value) || value <= 0) {
+    throw new TypeError(
+      `[sarmal] setRenderOptions: trailWidth must be a finite positive number, got ${value}`
+    );
+  }
+}
 function resolveTrailMainColor(trailColor) {
   return typeof trailColor === "string" ? trailColor : trailColor[0];
 }
@@ -575,7 +633,7 @@ function resolveHeadColor(trailColor, trailStyle) {
   }
   const palette = resolveTrailPalette(trailColor);
   const last = palette[palette.length - 1];
-  const { r, g, b } = parseColorToRgb(last);
+  const { r, g, b } = colorToRgb(last);
   return `rgb(${r},${g},${b})`;
 }
 function warnIfTrailColorMismatch(trailColor, trailStyle) {
@@ -596,8 +654,8 @@ function warnIfTrailColorMismatch(trailColor, trailStyle) {
 var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160));
 var WHITE_HEX = "#ffffff";
 function colorToRgbComponents(color) {
-  const c = parseColorToRgb(color);
-  return `${c.r},${c.g},${c.b}`;
+  const { r, g, b } = colorToRgb(color);
+  return `${r},${g},${b}`;
 }
 function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
   target.style.width = `${logicalWidth}px`;
@@ -619,6 +677,7 @@ function createRenderer(options) {
   let headColor = userHeadColor ?? resolveHeadColor(trailColor, trailStyle);
   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() {
@@ -630,7 +689,14 @@ function createRenderer(options) {
   setupCanvas();
   let logicalWidth = canvas.width / dpr;
   let logicalHeight = canvas.height / dpr;
+  if (options.headRadius !== void 0) {
+    validateRenderOptions({ headRadius: options.headRadius });
+  }
+  if (options.trailWidth !== void 0) {
+    validateRenderOptions({ trailWidth: options.trailWidth });
+  }
   let headRadius = options.headRadius ?? getHeadDotRadius(logicalWidth, logicalHeight);
+  let trailWidth = options.trailWidth ?? 1;
   let skeleton = [];
   let skeletonCanvas = null;
   let trail = [];
@@ -724,14 +790,16 @@ function createRenderer(options) {
         i,
         trailCount,
         toX,
-        toY
+        toY,
+        TRAIL_MIN_WIDTH * trailWidth,
+        TRAIL_MAX_WIDTH * trailWidth
       );
       if (trailStyle === "default") {
         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);
@@ -865,6 +933,7 @@ function createRenderer(options) {
         trailColor = partial.trailColor;
         trailSolidRgb = colorToRgbComponents(resolveTrailMainColor(trailColor));
         trailPalette = resolveTrailPalette(trailColor);
+        trailPaletteOklab = trailPalette.map((c) => parseColorToOklab(c));
       }
       if (partial.skeletonColor !== void 0) {
         skeletonColor = partial.skeletonColor;
@@ -881,6 +950,9 @@ function createRenderer(options) {
       if (partial.headRadius !== void 0) {
         headRadius = partial.headRadius;
       }
+      if (partial.trailWidth !== void 0) {
+        trailWidth = partial.trailWidth;
+      }
       if (userHeadColor === null) {
         headColor = resolveHeadColor(trailColor, trailStyle);
       } else {
@@ -948,8 +1020,8 @@ function el(tag) {
   return document.createElementNS("http://www.w3.org/2000/svg", tag);
 }
 function colorToRgbAttr(color) {
-  const c = parseColorToRgb(color);
-  return `rgb(${c.r},${c.g},${c.b})`;
+  const { r, g, b } = colorToRgb(color);
+  return `rgb(${r},${g},${b})`;
 }
 function createSVGRenderer(options) {
   const { container, engine } = options;
@@ -967,6 +1039,7 @@ function createSVGRenderer(options) {
   let headRadius;
   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;
@@ -978,7 +1051,14 @@ function createSVGRenderer(options) {
   const svgTrailMinWidth = TRAIL_MIN_WIDTH * viewSize / containerPx;
   const svgTrailMaxWidth = TRAIL_MAX_WIDTH * viewSize / containerPx;
   const svgSkeletonStrokeWidth = String(SKELETON_STROKE_WIDTH_PX * viewSize / containerPx);
+  if (options.headRadius !== void 0) {
+    validateRenderOptions({ headRadius: options.headRadius });
+  }
+  if (options.trailWidth !== void 0) {
+    validateRenderOptions({ trailWidth: options.trailWidth });
+  }
   headRadius = options.headRadius ?? SVG_DEFAULT_HEAD_RADIUS;
+  let trailWidth = options.trailWidth ?? 1;
   container.setAttribute("viewBox", `0 0 ${viewSize} ${viewSize}`);
   container.setAttribute("role", "img");
   container.setAttribute("aria-label", ariaLabel);
@@ -1073,15 +1153,15 @@ function createSVGRenderer(options) {
         trailCount,
         px,
         py,
-        svgTrailMinWidth,
-        svgTrailMaxWidth
+        svgTrailMinWidth * trailWidth,
+        svgTrailMaxWidth * trailWidth
       );
       const d = `M${l0x.toFixed(2)} ${l0y.toFixed(2)} L${l1x.toFixed(2)} ${l1y.toFixed(2)} L${r1x.toFixed(2)} ${r1y.toFixed(2)} L${r0x.toFixed(2)} ${r0y.toFixed(2)} Z`;
       trailPaths[i].setAttribute("d", d);
       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})`);
       }
     }
@@ -1233,6 +1313,7 @@ function createSVGRenderer(options) {
         trailColor = partial.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);
@@ -1265,6 +1346,9 @@ function createSVGRenderer(options) {
         headRadius = partial.headRadius;
         headCircle.setAttribute("r", String(headRadius));
       }
+      if (partial.trailWidth !== void 0) {
+        trailWidth = partial.trailWidth;
+      }
       if (userHeadColor === null) {
         headColor = resolveHeadColor(trailColor, trailStyle);
       } else {