@sarmal/core 0.9.7 → 0.10.0

package/dist/index.js

@@ -61,13 +61,13 @@ function resolveCurve(curveDef) {
     period,
     speed,
     skeleton: curveDef.skeleton,
-    skeletonFn: curveDef.skeletonFn,
+    skeletonFn: curveDef.skeletonFn
   };
 }
 function createEngine(curveDef, trailLength = 120) {
   if (!Number.isFinite(trailLength) || trailLength <= 0) {
     throw new RangeError(
-      `[sarmal] trailLength must be a positive finite number, got ${trailLength}`,
+      `[sarmal] trailLength must be a positive finite number, got ${trailLength}`
     );
   }
   let curve = resolveCurve(curveDef);
@@ -96,7 +96,7 @@ function createEngine(curveDef, trailLength = 120) {
       actualTime += deltaTime;
       if (morphCurveB !== null && _morphAlpha !== null) {
         const a = curve.fn(t, actualTime, EMPTY_PARAMS);
-        const tB = _morphStrategy === "normalized" ? (t / curve.period) * morphCurveB.period : t;
+        const tB = _morphStrategy === "normalized" ? t / curve.period * morphCurveB.period : t;
         const b = morphCurveB.fn(tB, actualTime, EMPTY_PARAMS);
         trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
       } else {
@@ -119,15 +119,15 @@ function createEngine(curveDef, trailLength = 120) {
       actualTime = 0;
       trail.clear();
     },
-    seek(newT, { clearTrail = false } = {}) {
-      t = ((newT % curve.period) + curve.period) % curve.period;
+    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 target = (targetT % curve.period + curve.period) % curve.period;
       const targetTime = target / curve.speed;
       t = target;
       actualTime = targetTime;
@@ -136,7 +136,7 @@ function createEngine(curveDef, trailLength = 120) {
       const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
       for (let i = count - 1; i >= 0; i--) {
         const sampleT = target - i * advance;
-        const wrappedT = ((sampleT % curve.period) + curve.period) % curve.period;
+        const wrappedT = (sampleT % curve.period + curve.period) % curve.period;
         const time = targetTime - i * step;
         const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
         trail.push(point.x, point.y);
@@ -153,16 +153,13 @@ function createEngine(curveDef, trailLength = 120) {
           ...frozenB,
           fn: (sampleT, time, params) => {
             const a = frozenA.fn(sampleT, time, params);
-            const tB =
-              frozenStrategy === "normalized"
-                ? (sampleT / frozenA.period) * frozenB.period
-                : sampleT;
+            const tB = frozenStrategy === "normalized" ? sampleT / frozenA.period * frozenB.period : sampleT;
             const b = frozenB.fn(tB, time, params);
             return {
               x: a.x + (b.x - a.x) * frozenAlpha,
-              y: a.y + (b.y - a.y) * frozenAlpha,
+              y: a.y + (b.y - a.y) * frozenAlpha
             };
-          },
+          }
         };
       }
       _morphStrategy = strategy;
@@ -175,7 +172,7 @@ function createEngine(curveDef, trailLength = 120) {
     completeMorph() {
       if (morphCurveB !== null) {
         if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
-          t = (t / curve.period) * morphCurveB.period;
+          t = t / curve.period * morphCurveB.period;
         }
         curve = morphCurveB;
       }
@@ -187,46 +184,132 @@ function createEngine(curveDef, trailLength = 120) {
       const points = new Array(steps);
       if (morphCurveB !== null && _morphAlpha !== null) {
         for (let i = 0; i < steps; i++) {
-          const sampleT = (i / (steps - 1)) * curve.period;
+          const sampleT = i / (steps - 1) * curve.period;
           const a = sampleSkeleton(curve, sampleT);
-          const tB =
-            _morphStrategy === "normalized"
-              ? (sampleT / curve.period) * morphCurveB.period
-              : sampleT;
+          const tB = _morphStrategy === "normalized" ? sampleT / curve.period * morphCurveB.period : sampleT;
           const b = sampleSkeleton(morphCurveB, tB);
           points[i] = {
             x: a.x + (b.x - a.x) * _morphAlpha,
-            y: a.y + (b.y - a.y) * _morphAlpha,
+            y: a.y + (b.y - a.y) * _morphAlpha
           };
         }
         return points;
       }
       for (let i = 0; i < steps; i++) {
-        const sampleT = (i / (steps - 1)) * curve.period;
+        const sampleT = i / (steps - 1) * curve.period;
         points[i] = sampleSkeleton(curve, sampleT);
       }
       return points;
-    },
+    }
   };
 }
 
-// src/renderer.ts
+// src/renderer-shared.ts
 var DEFAULT_MORPH_DURATION_MS = 300;
-var DEFAULT_HEAD_RADIUS = 4;
-var DEFAULT_SKELETON_COLOR = "#ffffff";
 var DEFAULT_SKELETON_OPACITY = 0.15;
 var FIT_PADDING = 0.1;
 var TRAIL_FADE_CURVE = 1.5;
 var TRAIL_MAX_OPACITY = 0.88;
 var TRAIL_MIN_WIDTH = 0.5;
 var TRAIL_MAX_WIDTH = 2.5;
+function computeTangent(trail, i) {
+  const count = trail.length;
+  if (count < 2) {
+    return { x: 1, y: 0 };
+  }
+  if (i === 0) {
+    const dx2 = trail[1].x - trail[0].x;
+    const dy2 = trail[1].y - trail[0].y;
+    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
+    return { x: dx2 / len2, y: dy2 / len2 };
+  }
+  if (i === count - 1) {
+    const dx2 = trail[count - 1].x - trail[count - 2].x;
+    const dy2 = trail[count - 1].y - trail[count - 2].y;
+    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
+    return { x: dx2 / len2, y: dy2 / len2 };
+  }
+  const dx = trail[i + 1].x - trail[i - 1].x;
+  const dy = trail[i + 1].y - trail[i - 1].y;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  return { x: dx / len, y: dy / len };
+}
+function computeNormal(trail, i) {
+  const tangent = computeTangent(trail, i);
+  return { x: -tangent.y, y: tangent.x };
+}
+function computeTrailQuad(trail, i, trailCount, toX, toY) {
+  const progress = i / (trailCount - 1);
+  const nextProgress = (i + 1) / (trailCount - 1);
+  const opacity = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
+  const w0 = (TRAIL_MIN_WIDTH + progress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH)) / 2;
+  const w1 = (TRAIL_MIN_WIDTH + nextProgress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH)) / 2;
+  const curr = trail[i];
+  const next = trail[i + 1];
+  const n0 = computeNormal(trail, i);
+  const n1 = computeNormal(trail, i + 1);
+  const cx = toX(curr);
+  const cy = toY(curr);
+  const nx = toX(next);
+  const ny = toY(next);
+  return {
+    l0x: cx + n0.x * w0,
+    l0y: cy + n0.y * w0,
+    r0x: cx - n0.x * w0,
+    r0y: cy - n0.y * w0,
+    l1x: nx + n1.x * w1,
+    l1y: ny + n1.y * w1,
+    r1x: nx - n1.x * w1,
+    r1y: ny - n1.y * w1,
+    opacity,
+    progress
+  };
+}
+function computeBoundaries(pts, logicalWidth, logicalHeight) {
+  if (pts.length === 0) return null;
+  const first = pts[0];
+  let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
+  for (const p of pts) {
+    if (p.x < minX) {
+      minX = p.x;
+    }
+    if (p.x > maxX) {
+      maxX = p.x;
+    }
+    if (p.y < minY) {
+      minY = p.y;
+    }
+    if (p.y > maxY) {
+      maxY = p.y;
+    }
+  }
+  const w = maxX - minX;
+  const h = maxY - minY;
+  if (w === 0 && h === 0) {
+    throw new Error(
+      "[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);
+  return {
+    scale,
+    offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
+    offsetY: (logicalHeight - h * scale) / 2 - minY * scale
+  };
+}
+
+// src/renderer.ts
+var DEFAULT_HEAD_RADIUS = 4;
+var DEFAULT_SKELETON_COLOR = "#ffffff";
 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"],
+  forest: ["#14532d", "#86efac"]
 };
 var PRESETS = {
   bard: GRADIENT.bard,
@@ -234,16 +317,16 @@ var PRESETS = {
   ocean: GRADIENT.ocean,
   ice: GRADIENT.ice,
   fire: GRADIENT.fire,
-  forest: GRADIENT.forest,
+  forest: GRADIENT.forest
 };
 function hexToRgb(hex) {
   const n = parseInt(hex.slice(1), 16);
-  return { r: n >> 16, g: (n >> 8) & 255, b: n & 255 };
+  return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
 }
 var lerpRgb = (a, b, t) => ({
   r: Math.round(a.r + (b.r - a.r) * t),
   g: Math.round(a.g + (b.g - a.g) * t),
-  b: Math.round(a.b + (b.b - 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 };
@@ -263,33 +346,7 @@ function resolvePalette(palette, trailStyle) {
 }
 function hexToRgbComponents(hex) {
   const n = parseInt(hex.slice(1), 16);
-  return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
-}
-function computeTangent(trail, i) {
-  const count = trail.length;
-  if (count < 2) {
-    return { x: 1, y: 0 };
-  }
-  if (i === 0) {
-    const dx2 = trail[1].x - trail[0].x;
-    const dy2 = trail[1].y - trail[0].y;
-    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
-    return { x: dx2 / len2, y: dy2 / len2 };
-  }
-  if (i === count - 1) {
-    const dx2 = trail[count - 1].x - trail[count - 2].x;
-    const dy2 = trail[count - 1].y - trail[count - 2].y;
-    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
-    return { x: dx2 / len2, y: dy2 / len2 };
-  }
-  const dx = trail[i + 1].x - trail[i - 1].x;
-  const dy = trail[i + 1].y - trail[i - 1].y;
-  const len = Math.sqrt(dx * dx + dy * dy) || 1;
-  return { x: dx / len, y: dy / len };
-}
-function computeNormal(trail, i) {
-  const tangent = computeTangent(trail, i);
-  return { x: -tangent.y, y: tangent.x };
+  return `${n >> 16},${n >> 8 & 255},${n & 255}`;
 }
 function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
   target.style.width = `${logicalWidth}px`;
@@ -308,7 +365,7 @@ function createRenderer(options) {
     skeletonColor: options.skeletonColor ?? DEFAULT_SKELETON_COLOR,
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
-    headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS,
+    headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS
   };
   const trailStyle = options.trailStyle ?? "default";
   const palette = resolvePalette(options.palette, trailStyle);
@@ -338,47 +395,8 @@ function createRenderer(options) {
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
   let morphAlpha = 0;
   let gradientAnimTime = 0;
-  function computeBoundaries(pts) {
-    if (pts.length === 0) return null;
-    const first = pts[0];
-    let minX = first.x,
-      maxX = first.x,
-      minY = first.y,
-      maxY = first.y;
-    for (const p of pts) {
-      if (p.x < minX) {
-        minX = p.x;
-      }
-      if (p.x > maxX) {
-        maxX = p.x;
-      }
-      if (p.y < minY) {
-        minY = p.y;
-      }
-      if (p.y > maxY) {
-        maxY = p.y;
-      }
-    }
-    const width = maxX - minX;
-    const height = maxY - minY;
-    if (width === 0 && height === 0) {
-      throw new Error(
-        "[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t.",
-      );
-    }
-    const scaleX = logicalWidth / (width * (1 + FIT_PADDING * 2));
-    const scaleY = logicalHeight / (height * (1 + FIT_PADDING * 2));
-    const s = Math.min(scaleX, scaleY);
-    const boundsWidth = width * s;
-    const boundsHeight = height * s;
-    return {
-      scale: s,
-      offsetX: (logicalWidth - boundsWidth) / 2 - minX * s,
-      offsetY: (logicalHeight - boundsHeight) / 2 - minY * s,
-    };
-  }
   function calculateBoundaries() {
-    const b = computeBoundaries(skeleton);
+    const b = computeBoundaries(skeleton, logicalWidth, logicalHeight);
     if (b) {
       scale = b.scale;
       offsetX = b.offsetX;
@@ -442,32 +460,22 @@ function createRenderer(options) {
     if (trailCount < 2) {
       return;
     }
+    const toX = (p) => p.x * scale + offsetX;
+    const toY = (p) => p.y * scale + offsetY;
     for (let i = 0; i < trailCount - 1; i++) {
-      const progress = i / (trailCount - 1);
-      const nextProgress = (i + 1) / (trailCount - 1);
-      const alpha = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
-      const width = TRAIL_MIN_WIDTH + progress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH);
-      const nextWidth = TRAIL_MIN_WIDTH + nextProgress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH);
-      const curr = trail[i];
-      const next = trail[i + 1];
-      const n0 = computeNormal(trail, i);
-      const n1 = computeNormal(trail, i + 1);
-      const halfW0 = width / 2;
-      const halfW1 = nextWidth / 2;
-      const l0x = curr.x * scale + offsetX + n0.x * halfW0;
-      const l0y = curr.y * scale + offsetY + n0.y * halfW0;
-      const r0x = curr.x * scale + offsetX - n0.x * halfW0;
-      const r0y = curr.y * scale + offsetY - n0.y * halfW0;
-      const l1x = next.x * scale + offsetX + n1.x * halfW1;
-      const l1y = next.y * scale + offsetY + n1.y * halfW1;
-      const r1x = next.x * scale + offsetX - n1.x * halfW1;
-      const r1y = next.y * scale + offsetY - n1.y * halfW1;
+      const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity, progress } = computeTrailQuad(
+        trail,
+        i,
+        trailCount,
+        toX,
+        toY
+      );
       if (trailStyle === "default") {
-        ctx.fillStyle = `rgba(${trailRgb},${alpha})`;
+        ctx.fillStyle = `rgba(${trailRgb},${opacity})`;
       } else {
         const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
         const color = getPaletteColor(palette, progress, timeOffset);
-        ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${alpha})`;
+        ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${opacity})`;
       }
       ctx.beginPath();
       ctx.moveTo(l0x, l0y);
@@ -500,7 +508,7 @@ function createRenderer(options) {
       morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
       engine.setMorphAlpha(morphAlpha);
       const interpolatedSkeleton = engine.getSarmalSkeleton();
-      const bounds = computeBoundaries(interpolatedSkeleton);
+      const bounds = computeBoundaries(interpolatedSkeleton, logicalWidth, logicalHeight);
       if (bounds) {
         scale = bounds.scale;
         offsetX = bounds.offsetX;
@@ -561,12 +569,12 @@ function createRenderer(options) {
         animationId = null;
       }
     },
+    jump(t, options2) {
+      engine.jump(t, options2);
+    },
     seek(t, options2) {
       engine.seek(t, options2);
     },
-    seekWithTrail(t) {
-      engine.seekWithTrail(t);
-    },
     morphTo(target, options2) {
       if (morphResolve !== null) {
         engine.completeMorph();
@@ -580,20 +588,33 @@ function createRenderer(options) {
       return new Promise((resolve) => {
         morphResolve = resolve;
       });
-    },
+    }
   };
 }
 
 // src/renderer-svg.ts
-var DEFAULT_MORPH_DURATION_MS2 = 300;
 var MAX_TRAIL_SEGMENTS = 200;
-var TRAIL_FADE_CURVE2 = 1.5;
-var TRAIL_MAX_OPACITY2 = 0.88;
-var TRAIL_MIN_WIDTH2 = 0.5;
-var TRAIL_MAX_WIDTH2 = 2.5;
-var DEFAULT_SKELETON_OPACITY2 = 0.15;
-var FIT_PADDING2 = 0.1;
 var EMPTY_PARAMS2 = {};
+function pointsToPathString(pts, scale, offsetX, offsetY) {
+  if (pts.length < 2) return "";
+  const px = (p) => (p.x * scale + offsetX).toFixed(2);
+  const py = (p) => (p.y * scale + offsetY).toFixed(2);
+  let d = `M${px(pts[0])} ${py(pts[0])}`;
+  for (let i = 1; i < pts.length; i++) {
+    d += ` L${px(pts[i])} ${py(pts[i])}`;
+  }
+  return d + " Z";
+}
+function sampleCurveSkeleton(curveDef) {
+  const period = curveDef.period ?? Math.PI * 2;
+  const samples = Math.ceil(period * 50);
+  const pts = Array.from({ length: samples });
+  for (let i = 0; i < samples; i++) {
+    const t = i / (samples - 1) * period;
+    pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
+  }
+  return pts;
+}
 function el(tag) {
   return document.createElementNS("http://www.w3.org/2000/svg", tag);
 }
@@ -604,7 +625,7 @@ function createSVGRenderer(options) {
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
     headRadius: options.headRadius ?? 4,
-    ariaLabel: options.ariaLabel ?? "Loading",
+    ariaLabel: options.ariaLabel ?? "Loading"
   };
   const rect = container.getBoundingClientRect();
   const width = rect.width || 200;
@@ -621,7 +642,7 @@ function createSVGRenderer(options) {
   const skeletonPath = el("path");
   skeletonPath.setAttribute("fill", "none");
   skeletonPath.setAttribute("stroke", opts.skeletonColor);
-  skeletonPath.setAttribute("stroke-opacity", String(DEFAULT_SKELETON_OPACITY2));
+  skeletonPath.setAttribute("stroke-opacity", String(DEFAULT_SKELETON_OPACITY));
   skeletonPath.setAttribute("stroke-width", "1.5");
   svg.appendChild(skeletonPath);
   const skeletonPathA = el("path");
@@ -653,41 +674,13 @@ function createSVGRenderer(options) {
   let scale = 1;
   let offsetX = 0;
   let offsetY = 0;
-  function calculateBoundaries(skeleton2) {
-    if (skeleton2.length === 0) {
-      return;
-    }
-    const first = skeleton2[0];
-    let minX = first.x,
-      maxX = first.x,
-      minY = first.y,
-      maxY = first.y;
-    for (const p of skeleton2) {
-      if (p.x < minX) {
-        minX = p.x;
-      }
-      if (p.x > maxX) {
-        maxX = p.x;
-      }
-      if (p.y < minY) {
-        minY = p.y;
-      }
-      if (p.y > maxY) {
-        maxY = p.y;
-      }
-    }
-    const w = maxX - minX;
-    const h = maxY - minY;
-    if (w === 0 && h === 0) {
-      throw new Error(
-        "[sarmal] All skeleton points are identical. Check that your curve fn returns distinct points for different values of t.",
-      );
+  function applyBoundaries(skeleton2) {
+    const b = computeBoundaries(skeleton2, width, height);
+    if (b) {
+      scale = b.scale;
+      offsetX = b.offsetX;
+      offsetY = b.offsetY;
     }
-    const scaleX = width / (w * (1 + FIT_PADDING2 * 2));
-    const scaleY = height / (h * (1 + FIT_PADDING2 * 2));
-    scale = Math.min(scaleX, scaleY);
-    offsetX = (width - w * scale) / 2 - minX * scale;
-    offsetY = (height - h * scale) / 2 - minY * scale;
   }
   function px(p) {
     return p.x * scale + offsetX;
@@ -695,26 +688,11 @@ function createSVGRenderer(options) {
   function py(p) {
     return p.y * scale + offsetY;
   }
-  function pxStr(p) {
-    return px(p).toFixed(2);
-  }
-  function pyStr(p) {
-    return py(p).toFixed(2);
-  }
   function updateSkeleton(skeleton2) {
-    if (skeleton2.length < 2) {
-      skeletonPath.setAttribute("d", "");
-      return;
-    }
-    let d = `M${pxStr(skeleton2[0])} ${pyStr(skeleton2[0])}`;
-    for (let i = 1; i < skeleton2.length; i++) {
-      d += ` L${pxStr(skeleton2[i])} ${pyStr(skeleton2[i])}`;
-    }
-    d += " Z";
-    skeletonPath.setAttribute("d", d);
+    skeletonPath.setAttribute("d", pointsToPathString(skeleton2, scale, offsetX, offsetY));
   }
   const skeleton = engine.getSarmalSkeleton();
-  calculateBoundaries(skeleton);
+  applyBoundaries(skeleton);
   if (!engine.isLiveSkeleton) {
     updateSkeleton(skeleton);
   }
@@ -726,25 +704,13 @@ function createSVGRenderer(options) {
       return;
     }
     for (let i = 0; i < trailCount - 1; i++) {
-      const progress = i / (trailCount - 1);
-      const nextProgress = (i + 1) / (trailCount - 1);
-      const opacity = Math.pow(progress, TRAIL_FADE_CURVE2) * TRAIL_MAX_OPACITY2;
-      const width2 = TRAIL_MIN_WIDTH2 + progress * (TRAIL_MAX_WIDTH2 - TRAIL_MIN_WIDTH2);
-      const nextWidth = TRAIL_MIN_WIDTH2 + nextProgress * (TRAIL_MAX_WIDTH2 - TRAIL_MIN_WIDTH2);
-      const curr = trail[i];
-      const next = trail[i + 1];
-      const n0 = computeNormal(trail, i);
-      const n1 = computeNormal(trail, i + 1);
-      const halfW0 = width2 / 2;
-      const halfW1 = nextWidth / 2;
-      const l0x = px(curr) + n0.x * halfW0;
-      const l0y = py(curr) + n0.y * halfW0;
-      const r0x = px(curr) - n0.x * halfW0;
-      const r0y = py(curr) - n0.y * halfW0;
-      const l1x = px(next) + n1.x * halfW1;
-      const l1y = py(next) + n1.y * halfW1;
-      const r1x = px(next) - n1.x * halfW1;
-      const r1y = py(next) - n1.y * halfW1;
+      const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity } = computeTrailQuad(
+        trail,
+        i,
+        trailCount,
+        px,
+        py
+      );
       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));
@@ -765,33 +731,11 @@ function createSVGRenderer(options) {
   }
   let animationId = null;
   let lastTime = 0;
-  const prefersReducedMotion =
-    typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   let morphResolve = null;
-  let morphDurationMs = DEFAULT_MORPH_DURATION_MS2;
+  let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
   let morphTarget = null;
   let morphAlpha = 0;
-  function buildSkeletonPath(target, scale2, offsetX2, offsetY2) {
-    const period = target.period ?? Math.PI * 2;
-    const samples = Math.max(50, Math.round(period * 20));
-    const points = [];
-    for (let i = 0; i <= samples; i++) {
-      const t = (i / samples) * period;
-      const p = target.fn(t, 0, EMPTY_PARAMS2);
-      points.push(p);
-    }
-    if (points.length < 2) {
-      return "";
-    }
-    const px2 = (p) => (p.x * scale2 + offsetX2).toFixed(2);
-    const py2 = (p) => (p.y * scale2 + offsetY2).toFixed(2);
-    let d = `M${px2(points[0])} ${py2(points[0])}`;
-    for (let i = 1; i < points.length; i++) {
-      d += ` L${px2(points[i])} ${py2(points[i])}`;
-    }
-    d += " Z";
-    return d;
-  }
   function renderFrame() {
     const now = performance.now();
     const dt = Math.min((now - lastTime) / 1e3, 1 / 30);
@@ -804,16 +748,13 @@ function createSVGRenderer(options) {
         skeletonPathA.setAttribute("visibility", "visible");
         skeletonPathA.setAttribute(
           "stroke-opacity",
-          String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY2),
+          String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
         );
       }
       if (morphPathBBuilt) {
         skeletonPathB.setAttribute("d", morphPathBBuilt);
         skeletonPathB.setAttribute("visibility", "visible");
-        skeletonPathB.setAttribute(
-          "stroke-opacity",
-          String(morphAlpha * DEFAULT_SKELETON_OPACITY2),
-        );
+        skeletonPathB.setAttribute("stroke-opacity", String(morphAlpha * DEFAULT_SKELETON_OPACITY));
       }
       if (morphAlpha >= 1) {
         engine.completeMorph();
@@ -826,7 +767,7 @@ function createSVGRenderer(options) {
         skeletonPathA.setAttribute("visibility", "hidden");
         skeletonPathB.setAttribute("visibility", "hidden");
         const newSkeleton = engine.getSarmalSkeleton();
-        calculateBoundaries(newSkeleton);
+        applyBoundaries(newSkeleton);
         updateSkeleton(newSkeleton);
       }
     }
@@ -834,7 +775,7 @@ function createSVGRenderer(options) {
     const trailCount = engine.trailCount;
     if (engine.isLiveSkeleton && engine.morphAlpha === null) {
       const liveSkeleton = engine.getSarmalSkeleton();
-      calculateBoundaries(liveSkeleton);
+      applyBoundaries(liveSkeleton);
       updateSkeleton(liveSkeleton);
     }
     updateTrail(trail, trailCount);
@@ -868,12 +809,12 @@ function createSVGRenderer(options) {
       }
       svg.remove();
     },
+    jump(t, options2) {
+      engine.jump(t, options2);
+    },
     seek(t, options2) {
       engine.seek(t, options2);
     },
-    seekWithTrail(t) {
-      engine.seekWithTrail(t);
-    },
     morphTo(target, options2) {
       if (morphResolve !== null) {
         engine.completeMorph();
@@ -883,29 +824,20 @@ function createSVGRenderer(options) {
         skeletonPathA.setAttribute("visibility", "hidden");
         skeletonPathB.setAttribute("visibility", "hidden");
       }
-      morphDurationMs = options2?.duration ?? DEFAULT_MORPH_DURATION_MS2;
+      morphDurationMs = options2?.duration ?? DEFAULT_MORPH_DURATION_MS;
       morphTarget = target;
       morphAlpha = 0;
       const currentSkeleton = engine.getSarmalSkeleton();
-      if (currentSkeleton.length >= 2) {
-        const px2 = (p) => (p.x * scale + offsetX).toFixed(2);
-        const py2 = (p) => (p.y * scale + offsetY).toFixed(2);
-        morphPathABuilt = `M${px2(currentSkeleton[0])} ${py2(currentSkeleton[0])}`;
-        for (let i = 1; i < currentSkeleton.length; i++) {
-          morphPathABuilt += ` L${px2(currentSkeleton[i])} ${py2(currentSkeleton[i])}`;
-        }
-        morphPathABuilt += " Z";
-      } else {
-        morphPathABuilt = "";
-      }
+      morphPathABuilt = pointsToPathString(currentSkeleton, scale, offsetX, offsetY);
       engine.startMorph(target, options2?.morphStrategy);
       if (morphTarget) {
-        morphPathBBuilt = buildSkeletonPath(morphTarget, scale, offsetX, offsetY);
+        const targetSkeleton = sampleCurveSkeleton(target);
+        morphPathBBuilt = pointsToPathString(targetSkeleton, scale, offsetX, offsetY);
       }
       return new Promise((resolve) => {
         morphResolve = resolve;
       });
-    },
+    }
   };
 }
 function createSarmalSVG(container, curveDef, options) {
@@ -917,22 +849,19 @@ function createSarmalSVG(container, curveDef, options) {
 // src/curves/artemis2.ts
 var TWO_PI2 = Math.PI * 2;
 function artemis2Fn(t, _time, _params) {
-  const a = 0.35,
-    b = 0.15,
-    ox = 0.175;
-  const s = Math.sin(t),
-    c = Math.cos(t);
+  const a = 0.35, b = 0.15, ox = 0.175;
+  const s = Math.sin(t), c = Math.cos(t);
   const denom = 1 + s * s;
   return {
-    x: (c * (1 + a * c)) / denom - ox,
-    y: (s * c * (1 + b * c)) / denom,
+    x: c * (1 + a * c) / denom - ox,
+    y: s * c * (1 + b * c) / denom
   };
 }
 var artemis2 = {
   name: "Artemis II",
   fn: artemis2Fn,
   period: TWO_PI2,
-  speed: 0.7,
+  speed: 0.7
 };
 
 // src/curves/astroid.ts
@@ -942,14 +871,14 @@ function astroidFn(t, _time, _params) {
   const s = Math.sin(t);
   return {
     x: c * c * c,
-    y: s * s * s,
+    y: s * s * s
   };
 }
 var astroid = {
   name: "Astroid",
   fn: astroidFn,
   period: TWO_PI3,
-  speed: 1.1,
+  speed: 1.1
 };
 
 // src/curves/deltoid.ts
@@ -957,14 +886,14 @@ var TWO_PI4 = Math.PI * 2;
 function deltoidFn(t, _time, _params) {
   return {
     x: 2 * Math.cos(t) + Math.cos(2 * t),
-    y: 2 * Math.sin(t) - Math.sin(2 * t),
+    y: 2 * Math.sin(t) - Math.sin(2 * t)
   };
 }
 var deltoid = {
   name: "Deltoid",
   fn: deltoidFn,
   period: TWO_PI4,
-  speed: 0.9,
+  speed: 0.9
 };
 
 // src/curves/epicycloid3.ts
@@ -972,14 +901,14 @@ var TWO_PI5 = Math.PI * 2;
 function epicycloid3Fn(t, _time, _params) {
   return {
     x: 4 * Math.cos(t) - Math.cos(4 * t),
-    y: 4 * Math.sin(t) - Math.sin(4 * t),
+    y: 4 * Math.sin(t) - Math.sin(4 * t)
   };
 }
 var epicycloid3 = {
   name: "Epicycloid (n=3)",
   fn: epicycloid3Fn,
   period: TWO_PI5,
-  speed: 0.75,
+  speed: 0.75
 };
 
 // src/curves/epitrochoid7.ts
@@ -988,14 +917,14 @@ function epitrochoid7Fn(t, _time, _params) {
   const d = 1 + 0.55 * Math.sin(t * 0.5);
   return {
     x: 7 * Math.cos(t) - d * Math.cos(7 * t),
-    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
+    y: 7 * Math.sin(t) - d * Math.sin(7 * t)
   };
 }
 function epitrochoid7SkeletonFn(t) {
   const d = 1.275;
   return {
     x: 7 * Math.cos(t) - d * Math.cos(7 * t),
-    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
+    y: 7 * Math.sin(t) - d * Math.sin(7 * t)
   };
 }
 var epitrochoid7 = {
@@ -1003,7 +932,7 @@ var epitrochoid7 = {
   fn: epitrochoid7Fn,
   period: TWO_PI6,
   speed: 1.4,
-  skeletonFn: epitrochoid7SkeletonFn,
+  skeletonFn: epitrochoid7SkeletonFn
 };
 
 // src/curves/lissajous32.ts
@@ -1012,7 +941,7 @@ function lissajous32Fn(t, time, _params) {
   const phi = time * 0.45;
   return {
     x: Math.sin(3 * t + phi),
-    y: Math.sin(2 * t),
+    y: Math.sin(2 * t)
   };
 }
 var lissajous32 = {
@@ -1020,7 +949,7 @@ var lissajous32 = {
   fn: lissajous32Fn,
   period: TWO_PI7,
   speed: 2,
-  skeleton: "live",
+  skeleton: "live"
 };
 
 // src/curves/lissajous43.ts
@@ -1029,7 +958,7 @@ function lissajous43Fn(t, time, _params) {
   const phi = time * 0.38;
   return {
     x: Math.sin(4 * t + phi),
-    y: Math.sin(3 * t),
+    y: Math.sin(3 * t)
   };
 }
 var lissajous43 = {
@@ -1037,18 +966,17 @@ var lissajous43 = {
   fn: lissajous43Fn,
   period: TWO_PI8,
   speed: 1.8,
-  skeleton: "live",
+  skeleton: "live"
 };
 
 // src/curves/lame.ts
 var TWO_PI9 = Math.PI * 2;
 function lameFn(t, time, _params) {
   const p = 1.75 + 1.25 * Math.sin(time * 0.48);
-  const c = Math.cos(t),
-    s = Math.sin(t);
+  const c = Math.cos(t), s = Math.sin(t);
   return {
     x: Math.sign(c) * Math.pow(Math.abs(c), p),
-    y: Math.sign(s) * Math.pow(Math.abs(s), p),
+    y: Math.sign(s) * Math.pow(Math.abs(s), p)
   };
 }
 var lame = {
@@ -1056,7 +984,7 @@ var lame = {
   fn: lameFn,
   period: TWO_PI9,
   speed: 1,
-  skeleton: "live",
+  skeleton: "live"
 };
 
 // src/curves/rose3.ts
@@ -1065,14 +993,14 @@ function rose3Fn(t, _time, _params) {
   const r = Math.cos(3 * t);
   return {
     x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    y: r * Math.sin(t)
   };
 }
 var rose3 = {
   name: "Rose (n=3)",
   fn: rose3Fn,
   period: TWO_PI10,
-  speed: 1.15,
+  speed: 1.15
 };
 
 // src/curves/rose5.ts
@@ -1081,14 +1009,14 @@ function rose5Fn(t, _time, _params) {
   const r = Math.cos(5 * t);
   return {
     x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    y: r * Math.sin(t)
   };
 }
 var rose5 = {
   name: "Rose (n=5)",
   fn: rose5Fn,
   period: TWO_PI11,
-  speed: 1,
+  speed: 1
 };
 
 // src/curves/index.ts
@@ -1102,7 +1030,7 @@ var curves = {
   lissajous32,
   lissajous43,
   epicycloid3,
-  lame,
+  lame
 };
 
 // src/index.ts
@@ -1112,23 +1040,6 @@ function createSarmal(canvas, curveDef, options) {
   return createRenderer({ canvas, engine, ...rendererOpts });
 }
 
-export {
-  artemis2,
-  astroid,
-  createEngine,
-  createRenderer,
-  createSVGRenderer,
-  createSarmal,
-  createSarmalSVG,
-  curves,
-  deltoid,
-  epicycloid3,
-  epitrochoid7,
-  lame,
-  lissajous32,
-  lissajous43,
-  rose3,
-  rose5,
-};
-//# sourceMappingURL=index.js.map
+export { artemis2, astroid, createEngine, createRenderer, createSVGRenderer, createSarmal, createSarmalSVG, curves, deltoid, epicycloid3, epitrochoid7, lame, lissajous32, lissajous43, rose3, rose5 };
 //# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map