@sarmal/core 0.9.10 → 0.12.0

package/dist/index.js

@@ -74,9 +74,11 @@ function createEngine(curveDef, trailLength = 120) {
   const trail = new CircularBuffer(trailLength);
   let t = 0;
   let actualTime = 0;
+  let userSpeedOverride = null;
   let morphCurveB = null;
   let _morphAlpha = null;
   let _morphStrategy = "normalized";
+  let _speedTransition = null;
   function sampleSkeleton(c, sampleT) {
     if (c.skeletonFn) {
       return c.skeletonFn(sampleT);
@@ -88,9 +90,19 @@ function createEngine(curveDef, trailLength = 120) {
   }
   return {
     tick(deltaTime) {
-      let effectiveSpeed = curve.speed;
+      if (_speedTransition !== null) {
+        _speedTransition.elapsed += deltaTime * 1e3;
+        const alpha = Math.min(_speedTransition.elapsed / _speedTransition.duration, 1);
+        userSpeedOverride = lerp(_speedTransition.from, _speedTransition.to, alpha);
+        if (alpha >= 1) {
+          userSpeedOverride = _speedTransition.to;
+          _speedTransition.resolve();
+          _speedTransition = null;
+        }
+      }
+      let effectiveSpeed = userSpeedOverride ?? curve.speed;
       if (morphCurveB !== null && _morphAlpha !== null) {
-        effectiveSpeed = lerp(curve.speed, morphCurveB.speed, _morphAlpha);
+        effectiveSpeed = lerp(effectiveSpeed, morphCurveB.speed, _morphAlpha);
       }
       t = (t + effectiveSpeed * deltaTime) % curve.period;
       actualTime += deltaTime;
@@ -119,13 +131,13 @@ function createEngine(curveDef, trailLength = 120) {
       actualTime = 0;
       trail.clear();
     },
-    seek(newT, { clearTrail = false } = {}) {
+    jump(newT, { clearTrail = false } = {}) {
       t = (newT % curve.period + curve.period) % curve.period;
       if (clearTrail) {
         trail.clear();
       }
     },
-    seekWithTrail(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
+    seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
       const advance = curve.speed * step;
       const target = (targetT % curve.period + curve.period) % curve.period;
       const targetTime = target / curve.speed;
@@ -200,6 +212,44 @@ function createEngine(curveDef, trailLength = 120) {
         points[i] = sampleSkeleton(curve, sampleT);
       }
       return points;
+    },
+    setSpeed(speed) {
+      if (!Number.isFinite(speed)) {
+        throw new Error("speed must be a finite number");
+      }
+      if (_speedTransition !== null) {
+        _speedTransition.reject(new Error("Speed transition cancelled"));
+        _speedTransition = null;
+      }
+      userSpeedOverride = speed;
+    },
+    getSpeed() {
+      return userSpeedOverride ?? curve.speed;
+    },
+    resetSpeed() {
+      userSpeedOverride = null;
+    },
+    setSpeedOver(speed, duration) {
+      if (!Number.isFinite(speed)) {
+        throw new Error("speed must be a finite number");
+      }
+      if (!Number.isFinite(duration) || duration <= 0) {
+        throw new Error("duration must be a finite number greater than 0");
+      }
+      if (_speedTransition !== null) {
+        _speedTransition.reject(new Error("Speed transition cancelled"));
+        _speedTransition = null;
+      }
+      const from = userSpeedOverride ?? curve.speed;
+      return new Promise((resolve, reject) => {
+        _speedTransition = { from, to: speed, elapsed: 0, duration, resolve, reject };
+      });
+    },
+    cancelSpeedTransition() {
+      if (_speedTransition !== null) {
+        _speedTransition.reject(new Error("Speed transition cancelled"));
+        _speedTransition = null;
+      }
     }
   };
 }
@@ -299,9 +349,18 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
     offsetY: (logicalHeight - h * scale) / 2 - minY * scale
   };
 }
+function enginePassthroughs(engine) {
+  return {
+    jump: engine.jump,
+    seek: engine.seek,
+    setSpeed: engine.setSpeed,
+    getSpeed: engine.getSpeed,
+    resetSpeed: engine.resetSpeed,
+    setSpeedOver: engine.setSpeedOver
+  };
+}
 
 // src/renderer.ts
-var DEFAULT_HEAD_RADIUS = 4;
 var DEFAULT_SKELETON_COLOR = "#ffffff";
 var GRADIENT = {
   bard: ["#a855f7", "#3b82f6", "#14b8a6", "#ec4899"],
@@ -361,14 +420,21 @@ 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: options.trailColor ?? "#ffffff",
-    headColor: options.headColor ?? "#ffffff",
-    headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS
+    trailColor,
+    headColor: options.headColor ?? defaultHeadColor()
   };
-  const trailStyle = options.trailStyle ?? "default";
-  const palette = resolvePalette(options.palette, trailStyle);
   const trailRgb = hexToRgbComponents(opts.trailColor);
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
   function setupCanvas() {
@@ -492,9 +558,10 @@ 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;
     ctx.beginPath();
-    ctx.arc(x, y, opts.headRadius, 0, Math.PI * 2);
+    ctx.arc(x, y, r, 0, Math.PI * 2);
     ctx.fill();
   }
   function render() {
@@ -557,6 +624,7 @@ function createRenderer(options) {
       }
       cancelAnimationFrame(animationId);
       animationId = null;
+      engine.cancelSpeedTransition();
     },
     reset() {
       engine.reset();
@@ -569,12 +637,7 @@ function createRenderer(options) {
         animationId = null;
       }
     },
-    seek(t, options2) {
-      engine.seek(t, options2);
-    },
-    seekWithTrail(t) {
-      engine.seekWithTrail(t);
-    },
+    ...enginePassthroughs(engine),
     morphTo(target, options2) {
       if (morphResolve !== null) {
         engine.completeMorph();
@@ -620,16 +683,17 @@ function el(tag) {
 }
 function createSVGRenderer(options) {
   const { container, engine } = options;
+  const trailColor = options.trailColor ?? "#ffffff";
   const opts = {
     skeletonColor: options.skeletonColor ?? "#ffffff",
-    trailColor: options.trailColor ?? "#ffffff",
-    headColor: options.headColor ?? "#ffffff",
-    headRadius: options.headRadius ?? 4,
+    trailColor,
+    headColor: options.headColor ?? trailColor,
     ariaLabel: options.ariaLabel ?? "Loading"
   };
   const rect = container.getBoundingClientRect();
   const width = rect.width || 200;
   const height = rect.height || 200;
+  const headRadius = options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(width, height) / 160));
   const svg = el("svg");
   svg.setAttribute("width", String(width));
   svg.setAttribute("height", String(height));
@@ -668,7 +732,7 @@ function createSVGRenderer(options) {
   }
   const headCircle = el("circle");
   headCircle.setAttribute("fill", opts.headColor);
-  headCircle.setAttribute("r", String(opts.headRadius));
+  headCircle.setAttribute("r", String(headRadius));
   svg.appendChild(headCircle);
   container.appendChild(svg);
   let scale = 1;
@@ -798,6 +862,7 @@ function createSVGRenderer(options) {
       }
       cancelAnimationFrame(animationId);
       animationId = null;
+      engine.cancelSpeedTransition();
     },
     reset() {
       engine.reset();
@@ -809,12 +874,7 @@ function createSVGRenderer(options) {
       }
       svg.remove();
     },
-    seek(t, options2) {
-      engine.seek(t, options2);
-    },
-    seekWithTrail(t) {
-      engine.seekWithTrail(t);
-    },
+    ...enginePassthroughs(engine),
     morphTo(target, options2) {
       if (morphResolve !== null) {
         engine.completeMorph();