@sarmal/core 0.12.0 → 0.14.0

package/dist/index.js

@@ -258,6 +258,7 @@ function createEngine(curveDef, trailLength = 120) {
 var DEFAULT_MORPH_DURATION_MS = 300;
 var DEFAULT_SKELETON_OPACITY = 0.15;
 var FIT_PADDING = 0.1;
+var FIT_PADDING_MIN = 4;
 var TRAIL_FADE_CURVE = 1.5;
 var TRAIL_MAX_OPACITY = 0.88;
 var TRAIL_MIN_WIDTH = 0.5;
@@ -340,9 +341,16 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
       "[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
     );
   }
-  const scaleX = logicalWidth / (w * (1 + FIT_PADDING * 2));
-  const scaleY = logicalHeight / (h * (1 + FIT_PADDING * 2));
-  const scale = Math.min(scaleX, scaleY);
+  const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
+  const scaleYProportional = logicalHeight / (h * (1 + FIT_PADDING * 2));
+  const scaleXMinPadding = (logicalWidth - FIT_PADDING_MIN * 2) / w;
+  const scaleYMinPadding = (logicalHeight - FIT_PADDING_MIN * 2) / h;
+  const scale = Math.min(
+    scaleXProportional,
+    scaleYProportional,
+    scaleXMinPadding,
+    scaleYMinPadding
+  );
   return {
     scale,
     offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
@@ -359,9 +367,6 @@ function enginePassthroughs(engine) {
     setSpeedOver: engine.setSpeedOver
   };
 }
-
-// src/renderer.ts
-var DEFAULT_SKELETON_COLOR = "#ffffff";
 var GRADIENT = {
   bard: ["#a855f7", "#3b82f6", "#14b8a6", "#ec4899"],
   sunset: ["#f97316", "#dc2626", "#9333ea", "#f472b6"],
@@ -388,8 +393,12 @@ var lerpRgb = (a, b, t) => ({
   b: Math.round(a.b + (b.b - a.b) * t)
 });
 function getPaletteColor(palette, position, timeOffset = 0) {
-  if (palette.length === 0) return { r: 255, g: 255, b: 255 };
-  if (palette.length === 1) return hexToRgb(palette[0]);
+  if (palette.length === 0) {
+    return { r: 255, g: 255, b: 255 };
+  }
+  if (palette.length === 1) {
+    return hexToRgb(palette[0]);
+  }
   const cyclePos = (position + timeOffset) % 1;
   const scaled = cyclePos * palette.length;
   const idx = Math.floor(scaled);
@@ -399,10 +408,17 @@ function getPaletteColor(palette, position, timeOffset = 0) {
   return lerpRgb(c1, c2, t);
 }
 function resolvePalette(palette, trailStyle) {
-  if (Array.isArray(palette)) return palette;
-  if (palette && palette in PRESETS) return PRESETS[palette];
+  if (Array.isArray(palette)) {
+    return palette;
+  }
+  if (palette && palette in PRESETS) {
+    return PRESETS[palette];
+  }
   return trailStyle === "gradient-animated" ? GRADIENT.bard : GRADIENT.ice;
 }
+
+// src/renderer.ts
+var DEFAULT_SKELETON_COLOR = "#ffffff";
 function hexToRgbComponents(hex) {
   const n = parseInt(hex.slice(1), 16);
   return `${n >> 16},${n >> 8 & 255},${n & 255}`;
@@ -564,10 +580,7 @@ function createRenderer(options) {
     ctx.arc(x, y, r, 0, Math.PI * 2);
     ctx.fill();
   }
-  function render() {
-    const now = performance.now();
-    const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
-    lastTime = now;
+  function renderFrame(deltaTime) {
     if (trailStyle === "gradient-animated") {
       gradientAnimTime += deltaTime * 1e3;
     }
@@ -603,22 +616,33 @@ function createRenderer(options) {
     drawSkeleton();
     drawTrail();
     drawHead();
-    animationId = requestAnimationFrame(render);
+  }
+  function loop() {
+    const now = performance.now();
+    const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
+    lastTime = now;
+    renderFrame(deltaTime);
+    animationId = requestAnimationFrame(loop);
   }
   skeleton = engine.getSarmalSkeleton();
   calculateBoundaries();
   if (!engine.isLiveSkeleton) {
     buildSkeletonCanvas();
   }
-  return {
-    start() {
+  if (options.initialT !== void 0) {
+    engine.seek(options.initialT);
+  }
+  renderFrame(0);
+  const shouldAutoStart = options.autoStart !== false;
+  const instance = {
+    play() {
       if (animationId !== null) {
         return;
       }
       lastTime = performance.now();
-      render();
+      loop();
     },
-    stop() {
+    pause() {
       if (animationId === null) {
         return;
       }
@@ -653,6 +677,10 @@ function createRenderer(options) {
       });
     }
   };
+  if (shouldAutoStart) {
+    instance.play();
+  }
+  return instance;
 }
 
 // src/renderer-svg.ts
@@ -684,10 +712,15 @@ function el(tag) {
 function createSVGRenderer(options) {
   const { container, engine } = options;
   const trailColor = options.trailColor ?? "#ffffff";
+  const trailStyle = options.trailStyle ?? "default";
+  const palette = resolvePalette(options.palette, trailStyle);
   const opts = {
     skeletonColor: options.skeletonColor ?? "#ffffff",
     trailColor,
-    headColor: options.headColor ?? trailColor,
+    headColor: options.headColor ?? (trailStyle !== "default" ? (() => {
+      const { r, g, b } = getPaletteColor(palette, 1);
+      return `rgb(${r},${g},${b})`;
+    })() : trailColor),
     ariaLabel: options.ariaLabel ?? "Loading"
   };
   const rect = container.getBoundingClientRect();
@@ -704,6 +737,7 @@ function createSVGRenderer(options) {
   titleEl.textContent = opts.ariaLabel;
   svg.appendChild(titleEl);
   const skeletonPath = el("path");
+  skeletonPath.setAttribute("data-sarmal-role", "skeleton");
   skeletonPath.setAttribute("fill", "none");
   skeletonPath.setAttribute("stroke", opts.skeletonColor);
   skeletonPath.setAttribute("stroke-opacity", String(DEFAULT_SKELETON_OPACITY));
@@ -731,10 +765,12 @@ function createSVGRenderer(options) {
     trailPaths.push(path);
   }
   const headCircle = el("circle");
+  headCircle.setAttribute("data-sarmal-role", "head");
   headCircle.setAttribute("fill", opts.headColor);
   headCircle.setAttribute("r", String(headRadius));
   svg.appendChild(headCircle);
   container.appendChild(svg);
+  let gradientAnimTime = 0;
   let scale = 1;
   let offsetX = 0;
   let offsetY = 0;
@@ -768,7 +804,7 @@ function createSVGRenderer(options) {
       return;
     }
     for (let i = 0; i < trailCount - 1; i++) {
-      const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity } = computeTrailQuad(
+      const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity, progress } = computeTrailQuad(
         trail,
         i,
         trailCount,
@@ -778,6 +814,11 @@ function createSVGRenderer(options) {
       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(palette, progress, timeOffset);
+        trailPaths[i].setAttribute("fill", `rgb(${r},${g},${b})`);
+      }
     }
     for (let i = trailCount - 1; i < trailPaths.length; i++) {
       trailPaths[i].setAttribute("d", "");
@@ -800,12 +841,12 @@ function createSVGRenderer(options) {
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
   let morphTarget = null;
   let morphAlpha = 0;
-  function renderFrame() {
-    const now = performance.now();
-    const dt = Math.min((now - lastTime) / 1e3, 1 / 30);
-    lastTime = now;
+  function renderFrame(deltaTime) {
+    if (trailStyle === "gradient-animated") {
+      gradientAnimTime += deltaTime * 1e3;
+    }
     if (engine.morphAlpha !== null) {
-      morphAlpha = Math.min(1, morphAlpha + dt / (morphDurationMs / 1e3));
+      morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
       engine.setMorphAlpha(morphAlpha);
       if (morphPathABuilt) {
         skeletonPathA.setAttribute("d", morphPathABuilt);
@@ -835,7 +876,7 @@ function createSVGRenderer(options) {
         updateSkeleton(newSkeleton);
       }
     }
-    const trail = engine.tick(dt);
+    const trail = engine.tick(deltaTime);
     const trailCount = engine.trailCount;
     if (engine.isLiveSkeleton && engine.morphAlpha === null) {
       const liveSkeleton = engine.getSarmalSkeleton();
@@ -844,19 +885,30 @@ function createSVGRenderer(options) {
     }
     updateTrail(trail, trailCount);
     updateHead(trail, trailCount);
+  }
+  function loop() {
+    const now = performance.now();
+    const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
+    lastTime = now;
+    renderFrame(deltaTime);
     if (!prefersReducedMotion) {
-      animationId = requestAnimationFrame(renderFrame);
+      animationId = requestAnimationFrame(loop);
     }
   }
-  return {
-    start() {
+  if (options.initialT !== void 0) {
+    engine.seek(options.initialT);
+  }
+  renderFrame(0);
+  const shouldAutoStart = options.autoStart !== false;
+  const instance = {
+    play() {
       if (animationId !== null) {
         return;
       }
       lastTime = performance.now();
-      renderFrame();
+      loop();
     },
-    stop() {
+    pause() {
       if (animationId === null) {
         return;
       }
@@ -899,6 +951,10 @@ function createSVGRenderer(options) {
       });
     }
   };
+  if (shouldAutoStart) {
+    instance.play();
+  }
+  return instance;
 }
 function createSarmalSVG(container, curveDef, options) {
   const { trailLength, ...rendererOpts } = options ?? {};