@sarmal/core 0.14.0 → 0.15.1

package/dist/auto-init.js

@@ -367,22 +367,6 @@ function enginePassthroughs(engine) {
     setSpeedOver: engine.setSpeedOver
   };
 }
-var GRADIENT = {
-  bard: ["#a855f7", "#3b82f6", "#14b8a6", "#ec4899"],
-  sunset: ["#f97316", "#dc2626", "#9333ea", "#f472b6"],
-  ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
-  ice: ["#1e3a8a", "#67e8f9"],
-  fire: ["#7f1d1d", "#fbbf24"],
-  forest: ["#14532d", "#86efac"]
-};
-var PRESETS = {
-  bard: GRADIENT.bard,
-  sunset: GRADIENT.sunset,
-  ocean: GRADIENT.ocean,
-  ice: GRADIENT.ice,
-  fire: GRADIENT.fire,
-  forest: GRADIENT.forest
-};
 function hexToRgb(hex) {
   const n = parseInt(hex.slice(1), 16);
   return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
@@ -407,18 +391,121 @@ function getPaletteColor(palette, position, timeOffset = 0) {
   const c2 = hexToRgb(palette[(idx + 1) % palette.length]);
   return lerpRgb(c1, c2, t);
 }
-function resolvePalette(palette, trailStyle) {
-  if (Array.isArray(palette)) {
-    return palette;
+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",
+  "headColor",
+  "skeletonColor",
+  "trailStyle"
+]);
+function validateRenderOptions(partial) {
+  for (const key of Object.keys(partial)) {
+    if (!RENDER_OPTION_KEYS.has(key)) {
+      throw new TypeError(`[sarmal] setRenderOptions: unknown key "${key}"`);
+    }
+  }
+  if (partial.trailColor !== void 0) {
+    assertTrailColor(partial.trailColor);
   }
-  if (palette && palette in PRESETS) {
-    return PRESETS[palette];
+  if (partial.headColor !== void 0) {
+    assertHeadColor(partial.headColor);
+  }
+  if (partial.skeletonColor !== void 0) {
+    assertSkeletonColor(partial.skeletonColor);
+  }
+  if (partial.trailStyle !== void 0) {
+    assertTrailStyle(partial.trailStyle);
+  }
+}
+function assertTrailColor(value) {
+  if (typeof value === "string") {
+    if (!HEX_COLOR_RE.test(value)) {
+      throw new TypeError(
+        `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`
+      );
+    }
+    return;
+  }
+  if (Array.isArray(value)) {
+    if (value.length < 2) {
+      throw new RangeError(
+        `[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`
+      );
+    }
+    for (let i = 0; i < value.length; i++) {
+      const entry = value[i];
+      if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
+        throw new TypeError(
+          `[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`
+        );
+      }
+    }
+    return;
   }
-  return trailStyle === "gradient-animated" ? GRADIENT.bard : GRADIENT.ice;
+  throw new TypeError(
+    `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`
+  );
+}
+function assertHeadColor(value) {
+  if (value === null) {
+    return;
+  }
+  if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
+    throw new TypeError(
+      `[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`
+    );
+  }
+}
+function assertSkeletonColor(value) {
+  if (value === "transparent") {
+    return;
+  }
+  if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
+    throw new TypeError(
+      `[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`
+    );
+  }
+}
+function assertTrailStyle(value) {
+  if (!TRAIL_STYLES.includes(value)) {
+    throw new RangeError(
+      `[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`
+    );
+  }
+}
+function resolveTrailMainColor(trailColor) {
+  return typeof trailColor === "string" ? trailColor : trailColor[0];
 }
+function resolveTrailPalette(trailColor) {
+  return typeof trailColor === "string" ? [trailColor] : trailColor;
+}
+function resolveHeadColor(trailColor, trailStyle) {
+  if (trailStyle === "default") {
+    return resolveTrailMainColor(trailColor);
+  }
+  const palette = resolveTrailPalette(trailColor);
+  const last = palette[palette.length - 1];
+  const { r, g, b } = hexToRgb(last);
+  return `rgb(${r},${g},${b})`;
+}
+function warnIfTrailColorMismatch(trailColor, trailStyle) {
+  if (trailStyle === "default" && Array.isArray(trailColor)) {
+    console.warn(
+      '[sarmal] trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.'
+    );
+    return;
+  }
+  if (trailStyle !== "default" && typeof trailColor === "string") {
+    console.warn(
+      `[sarmal] trailColor is a single color but trailStyle is "${trailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient.`
+    );
+  }
+}
+var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160));
 
 // src/renderer.ts
-var DEFAULT_SKELETON_COLOR = "#ffffff";
+var WHITE_HEX = "#ffffff";
 function hexToRgbComponents(hex) {
   const n = parseInt(hex.slice(1), 16);
   return `${n >> 16},${n >> 8 & 255},${n & 255}`;
@@ -436,27 +523,18 @@ function createRenderer(options) {
   }
   const ctx = canvas.getContext("2d");
   const engine = options.engine;
-  const trailStyle = options.trailStyle ?? "default";
-  const trailColor = options.trailColor ?? "#ffffff";
-  const palette = resolvePalette(options.palette, trailStyle);
-  function defaultHeadColor() {
-    if (trailStyle !== "default") {
-      const { r, g, b } = getPaletteColor(palette, 1);
-      return `rgb(${r},${g},${b})`;
-    }
-    return trailColor;
-  }
-  const opts = {
-    skeletonColor: options.skeletonColor ?? DEFAULT_SKELETON_COLOR,
-    trailColor,
-    headColor: options.headColor ?? defaultHeadColor()
-  };
-  const trailRgb = hexToRgbComponents(opts.trailColor);
+  let trailStyle = options.trailStyle ?? "default";
+  let trailColor = options.trailColor ?? WHITE_HEX;
+  let skeletonColor = options.skeletonColor ?? WHITE_HEX;
+  let userHeadColor = options.headColor ?? null;
+  let headColor = userHeadColor ?? resolveHeadColor(trailColor, trailStyle);
+  let trailSolidRgb = hexToRgbComponents(resolveTrailMainColor(trailColor));
+  let trailPalette = resolveTrailPalette(trailColor);
+  warnIfTrailColorMismatch(trailColor, trailStyle);
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
   function setupCanvas() {
-    const rect = canvas.getBoundingClientRect();
-    const lw = rect.width || 200;
-    const lh = rect.height || 200;
+    const lw = canvas.offsetWidth || 200;
+    const lh = canvas.offsetHeight || 200;
     applyDprSizing(canvas, lw, lh, dpr);
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
   }
@@ -486,11 +564,13 @@ function createRenderer(options) {
     }
   }
   function buildSkeletonCanvas() {
-    if (skeleton.length < 2) return;
+    if (skeleton.length < 2) {
+      return;
+    }
     skeletonCanvas = new OffscreenCanvas(canvas.width, canvas.height);
     const skeletonCtx = skeletonCanvas.getContext("2d");
     skeletonCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    skeletonCtx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
+    skeletonCtx.strokeStyle = `rgba(${hexToRgbComponents(skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
     skeletonCtx.lineWidth = 1.5;
     skeletonCtx.beginPath();
     const first = skeleton[0];
@@ -502,8 +582,10 @@ function createRenderer(options) {
     skeletonCtx.stroke();
   }
   function drawSkeletonPath(pts, opacity) {
-    if (pts.length < 2) return;
-    ctx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${opacity})`;
+    if (pts.length < 2) {
+      return;
+    }
+    ctx.strokeStyle = `rgba(${hexToRgbComponents(skeletonColor)},${opacity})`;
     ctx.lineWidth = 1.5;
     ctx.beginPath();
     ctx.moveTo(pts[0].x * scale + offsetX, pts[0].y * scale + offsetY);
@@ -513,7 +595,7 @@ function createRenderer(options) {
     ctx.stroke();
   }
   function drawSkeleton() {
-    if (opts.skeletonColor === "transparent") {
+    if (skeletonColor === "transparent") {
       return;
     }
     if (engine.morphAlpha !== null) {
@@ -524,7 +606,7 @@ function createRenderer(options) {
       if (skeleton.length < 2) {
         return;
       }
-      ctx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
+      ctx.strokeStyle = `rgba(${hexToRgbComponents(skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
       ctx.lineWidth = 1.5;
       ctx.beginPath();
       const first = skeleton[0];
@@ -553,10 +635,10 @@ function createRenderer(options) {
         toY
       );
       if (trailStyle === "default") {
-        ctx.fillStyle = `rgba(${trailRgb},${opacity})`;
+        ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
       } else {
         const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
-        const color = getPaletteColor(palette, progress, timeOffset);
+        const color = getPaletteColor(trailPalette, progress, timeOffset);
         ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${opacity})`;
       }
       ctx.beginPath();
@@ -574,8 +656,8 @@ function createRenderer(options) {
     }
     const x = head.x * scale + offsetX;
     const y = head.y * scale + offsetY;
-    const r = options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(logicalWidth, logicalHeight) / 160));
-    ctx.fillStyle = opts.headColor;
+    const r = options.headRadius ?? getHeadDotRadius(logicalWidth, logicalHeight);
+    ctx.fillStyle = headColor;
     ctx.beginPath();
     ctx.arc(x, y, r, 0, Math.PI * 2);
     ctx.fill();
@@ -675,6 +757,34 @@ function createRenderer(options) {
       return new Promise((resolve) => {
         morphResolve = resolve;
       });
+    },
+    setRenderOptions(partial) {
+      validateRenderOptions(partial);
+      if (partial.trailColor !== void 0) {
+        trailColor = partial.trailColor;
+        trailSolidRgb = hexToRgbComponents(resolveTrailMainColor(trailColor));
+        trailPalette = resolveTrailPalette(trailColor);
+      }
+      if (partial.skeletonColor !== void 0) {
+        skeletonColor = partial.skeletonColor;
+        if (skeletonColor !== "transparent" && !engine.isLiveSkeleton) {
+          buildSkeletonCanvas();
+        }
+      }
+      if (partial.trailStyle !== void 0) {
+        trailStyle = partial.trailStyle;
+      }
+      if (partial.headColor !== void 0) {
+        userHeadColor = partial.headColor;
+      }
+      if (userHeadColor === null) {
+        headColor = resolveHeadColor(trailColor, trailStyle);
+      } else {
+        headColor = userHeadColor;
+      }
+      if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
+        warnIfTrailColorMismatch(trailColor, trailStyle);
+      }
     }
   };
   if (shouldAutoStart) {
@@ -878,7 +988,7 @@ function createSarmal(canvas, curveDef, options) {
 }
 
 // src/auto-init.ts
-function parsePalette(value) {
+function parseTrailColor(value) {
   try {
     const parsed = JSON.parse(value);
     if (Array.isArray(parsed)) {
@@ -899,17 +1009,21 @@ function init() {
     if (!curveDef) {
       return console.error(`[sarmal] "${curveName}" is not a valid curve name`);
     }
-    createSarmal(canvas, curveDef, {
-      ...canvas.dataset.trailColor && { trailColor: canvas.dataset.trailColor },
+    const instance = createSarmal(canvas, curveDef, {
+      ...canvas.dataset.trailColor && {
+        trailColor: parseTrailColor(canvas.dataset.trailColor)
+      },
       ...canvas.dataset.skeletonColor && { skeletonColor: canvas.dataset.skeletonColor },
       ...canvas.dataset.headColor && { headColor: canvas.dataset.headColor },
       ...canvas.dataset.headRadius && { headRadius: parseFloat(canvas.dataset.headRadius) },
       ...canvas.dataset.trailLength && { trailLength: parseInt(canvas.dataset.trailLength, 10) },
       ...canvas.dataset.trailStyle && {
         trailStyle: canvas.dataset.trailStyle
-      },
-      ...canvas.dataset.palette && { palette: parsePalette(canvas.dataset.palette) }
+      }
     });
+    if (canvas.dataset.speed) {
+      instance.setSpeed(parseFloat(canvas.dataset.speed));
+    }
   });
 }
 if (document.readyState === "loading") {
@@ -919,5 +1033,7 @@ if (document.readyState === "loading") {
 } else {
   requestAnimationFrame(init);
 }
+
+export { init };
 //# sourceMappingURL=auto-init.js.map
 //# sourceMappingURL=auto-init.js.map