@sarmal/core 0.29.1 → 0.30.0

package/dist/index.cjs

@@ -385,6 +385,35 @@ 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;
+}
 function srgbByteToLinear(c) {
   const n = c / 255;
   return n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
@@ -444,7 +473,6 @@ function getPaletteColor(palette, position, timeOffset = 0) {
   const c2 = hexToRgb(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 +505,9 @@ function validateRenderOptions(partial) {
 }
 function assertTrailColor(value) {
   if (typeof value === "string") {
-    if (!HEX_COLOR_RE.test(value)) {
+    if (parseColorToRgb(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()), got "${value}"`
       );
     }
     return;
@@ -492,25 +520,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" || parseColorToRgb(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()), 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()) 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" || parseColorToRgb(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()) or null, got ${JSON.stringify(value)}`
     );
   }
 }
@@ -518,9 +546,9 @@ function assertSkeletonColor(value) {
   if (value === "transparent") {
     return;
   }
-  if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
+  if (typeof value !== "string" || parseColorToRgb(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()) or "transparent", got ${JSON.stringify(value)}`
     );
   }
 }
@@ -555,7 +583,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 } = parseColorToRgb(last);
   return `rgb(${r},${g},${b})`;
 }
 function warnIfTrailColorMismatch(trailColor, trailStyle) {
@@ -575,9 +603,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 c = parseColorToRgb(color);
+  return `${c.r},${c.g},${c.b}`;
 }
 function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
   target.style.width = `${logicalWidth}px`;
@@ -597,7 +625,7 @@ 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);
   warnIfTrailColorMismatch(trailColor, trailStyle);
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
@@ -642,7 +670,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 +685,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 +706,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];
@@ -755,7 +783,7 @@ function createRenderer(options) {
         morphReject = null;
         morphAlpha = 0;
         skeleton = engine.getSarmalSkeleton();
-        if (!engine.isLiveSkeleton) {
+        if (!engine.isLiveSkeleton && skeletonColor !== "transparent") {
           buildSkeletonCanvas();
         }
       }
@@ -781,7 +809,7 @@ function createRenderer(options) {
   }
   skeleton = engine.getSarmalSkeleton();
   calculateBoundaries();
-  if (!engine.isLiveSkeleton) {
+  if (!engine.isLiveSkeleton && skeletonColor !== "transparent") {
     buildSkeletonCanvas();
   }
   if (options.initialPhase !== void 0) {
@@ -843,7 +871,7 @@ function createRenderer(options) {
       validateRenderOptions(partial);
       if (partial.trailColor !== void 0) {
         trailColor = partial.trailColor;
-        trailSolidRgb = hexToRgbComponents(resolveTrailMainColor(trailColor));
+        trailSolidRgb = colorToRgbComponents(resolveTrailMainColor(trailColor));
         trailPalette = resolveTrailPalette(trailColor);
       }
       if (partial.skeletonColor !== void 0) {
@@ -927,6 +955,10 @@ function sampleCurveSkeleton(curveDef) {
 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})`;
+}
 function createSVGRenderer(options) {
   const { container, engine } = options;
   const poolSize = engine.trailLength;
@@ -941,7 +973,7 @@ 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);
   const ariaLabel = options.ariaLabel ?? "Loading";
   warnIfTrailColorMismatch(trailColor, trailStyle);
@@ -965,7 +997,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 +1009,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 +1036,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);
@@ -1198,7 +1239,7 @@ function createSVGRenderer(options) {
       const prevTrailStyle = trailStyle;
       if (partial.trailColor !== void 0) {
         trailColor = partial.trailColor;
-        trailSolid = resolveTrailMainColor(trailColor);
+        trailSolid = colorToRgbAttr(resolveTrailMainColor(trailColor));
         trailPalette = resolveTrailPalette(trailColor);
         if (trailStyle === "default") {
           for (const p of trailPaths) {
@@ -1211,10 +1252,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 +1278,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);
       }