@sarmal/core 0.7.1 → 0.9.0

package/dist/index.cjs

@@ -188,21 +188,90 @@ function createEngine(curveDef, trailLength = 120) {
 // src/renderer.ts
 var DEFAULT_MORPH_DURATION_MS = 300;
 var DEFAULT_HEAD_RADIUS = 4;
-var DEFAULT_GLOW_SIZE = 20;
 var DEFAULT_SKELETON_COLOR = "#ffffff";
 var DEFAULT_SKELETON_OPACITY = 0.15;
 var FIT_PADDING = 0.1;
-var TRAIL_BATCH_SIZE = 20;
 var TRAIL_FADE_CURVE = 1.5;
 var TRAIL_MAX_OPACITY = 0.88;
 var TRAIL_MIN_WIDTH = 0.5;
 var TRAIL_MAX_WIDTH = 2.5;
-var GLOW_INNER_EDGE = 0.4;
-var GLOW_FALLOFF_OPACITY = 0.53;
+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 };
+}
+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)
+});
+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]);
+  const cyclePos = (position + timeOffset) % 1;
+  const scaled = cyclePos * palette.length;
+  const idx = Math.floor(scaled);
+  const t = scaled - idx;
+  const c1 = hexToRgb(palette[idx % palette.length]);
+  const c2 = hexToRgb(palette[(idx + 1) % palette.length]);
+  return lerpRgb(c1, c2, t);
+}
+function resolvePalette(palette, trailStyle) {
+  if (Array.isArray(palette)) return palette;
+  if (palette && palette in PRESETS) return PRESETS[palette];
+  return trailStyle === "gradient-animated" ? GRADIENT.bard : GRADIENT.ice;
+}
 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 };
+}
+function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
+  target.style.width = `${logicalWidth}px`;
+  target.style.height = `${logicalHeight}px`;
+  target.width = logicalWidth * dpr;
+  target.height = logicalHeight * dpr;
+}
 function createRenderer(options) {
   const canvas = options.canvas;
   if (!canvas.getContext("2d")) {
@@ -214,11 +283,22 @@ function createRenderer(options) {
     skeletonColor: options.skeletonColor ?? DEFAULT_SKELETON_COLOR,
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
-    headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS,
-    glowSize: options.glowSize ?? DEFAULT_GLOW_SIZE
+    headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS
   };
+  const trailStyle = options.trailStyle ?? "default";
+  const palette = resolvePalette(options.palette, trailStyle);
   const trailRgb = hexToRgbComponents(opts.trailColor);
-  const headRgbFalloff = `rgba(${hexToRgbComponents(opts.headColor)},${GLOW_FALLOFF_OPACITY})`;
+  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;
+    applyDprSizing(canvas, lw, lh, dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+  setupCanvas();
+  let logicalWidth = canvas.width / dpr;
+  let logicalHeight = canvas.height / dpr;
   let skeleton = [];
   let skeletonCanvas = null;
   let trail = [];
@@ -232,6 +312,7 @@ function createRenderer(options) {
   let morphResolve = null;
   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];
@@ -244,17 +325,15 @@ function createRenderer(options) {
     }
     const width = maxX - minX;
     const height = maxY - minY;
-    const canvasWidth = canvas.width;
-    const canvasHeight = canvas.height;
-    const scaleX = canvasWidth / (width * (1 + FIT_PADDING * 2));
-    const scaleY = canvasHeight / (height * (1 + FIT_PADDING * 2));
+    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: (canvasWidth - boundsWidth) / 2 - minX * s,
-      offsetY: (canvasHeight - boundsHeight) / 2 - minY * s
+      offsetX: (logicalWidth - boundsWidth) / 2 - minX * s,
+      offsetY: (logicalHeight - boundsHeight) / 2 - minY * s
     };
   }
   function calculateBoundaries() {
@@ -269,6 +348,7 @@ function createRenderer(options) {
     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.lineWidth = 1.5;
     skeletonCtx.beginPath();
@@ -314,32 +394,47 @@ function createRenderer(options) {
       }
       ctx.stroke();
     } else if (skeletonCanvas) {
-      ctx.drawImage(skeletonCanvas, 0, 0);
+      ctx.drawImage(skeletonCanvas, 0, 0, logicalWidth, logicalHeight);
     }
   }
   function drawTrail() {
     if (trailCount < 2) {
       return;
     }
-    ctx.lineJoin = "round";
-    ctx.lineCap = "round";
-    for (let batchIndex = 0; batchIndex < trailCount - 1; batchIndex += TRAIL_BATCH_SIZE) {
-      const bEnd = Math.min(batchIndex + TRAIL_BATCH_SIZE, trailCount - 1);
-      const progress = (batchIndex + bEnd) / 2 / (trailCount - 1);
+    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 lineWidth = TRAIL_MIN_WIDTH + progress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH);
-      ctx.beginPath();
-      for (let i = batchIndex; i <= bEnd; i++) {
-        const point = trail[i];
-        if (i === batchIndex) {
-          ctx.moveTo(point.x * scale + offsetX, point.y * scale + offsetY);
-        } else {
-          ctx.lineTo(point.x * scale + offsetX, point.y * scale + offsetY);
-        }
+      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;
+      if (trailStyle === "default") {
+        ctx.fillStyle = `rgba(${trailRgb},${alpha})`;
+      } 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.strokeStyle = `rgba(${trailRgb},${alpha})`;
-      ctx.lineWidth = lineWidth;
-      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(l0x, l0y);
+      ctx.lineTo(l1x, l1y);
+      ctx.lineTo(r1x, r1y);
+      ctx.lineTo(r0x, r0y);
+      ctx.closePath();
+      ctx.fill();
     }
   }
   function drawHead() {
@@ -348,14 +443,6 @@ function createRenderer(options) {
     }
     const x = head.x * scale + offsetX;
     const y = head.y * scale + offsetY;
-    const gradient = ctx.createRadialGradient(x, y, 0, x, y, opts.glowSize);
-    gradient.addColorStop(0, opts.headColor);
-    gradient.addColorStop(GLOW_INNER_EDGE, headRgbFalloff);
-    gradient.addColorStop(1, "transparent");
-    ctx.fillStyle = gradient;
-    ctx.beginPath();
-    ctx.arc(x, y, opts.glowSize, 0, Math.PI * 2);
-    ctx.fill();
     ctx.fillStyle = opts.headColor;
     ctx.beginPath();
     ctx.arc(x, y, opts.headRadius, 0, Math.PI * 2);
@@ -365,6 +452,9 @@ function createRenderer(options) {
     const now = performance.now();
     const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
     lastTime = now;
+    if (trailStyle === "gradient-animated") {
+      gradientAnimTime += deltaTime * 1e3;
+    }
     if (engine.morphAlpha !== null) {
       morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
       engine.setMorphAlpha(morphAlpha);
@@ -389,7 +479,7 @@ function createRenderer(options) {
     trail = engine.tick(deltaTime);
     trailCount = engine.trailCount;
     head = trailCount > 0 ? trail[trailCount - 1] : null;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.clearRect(0, 0, logicalWidth, logicalHeight);
     if (engine.isLiveSkeleton && engine.morphAlpha === null) {
       skeleton = engine.getSarmalSkeleton();
       calculateBoundaries();
@@ -455,16 +545,13 @@ function createRenderer(options) {
 
 // src/renderer-svg.ts
 var DEFAULT_MORPH_DURATION_MS2 = 300;
-var TRAIL_BATCH_COUNT = 12;
+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 DEFAULT_GLOW_INNER_STOP = 0.4;
-var DEFAULT_GLOW_FALLOFF_OPACITY = 0.53;
 var FIT_PADDING2 = 0.1;
-var instanceCount = 0;
 function el(tag) {
   return document.createElementNS("http://www.w3.org/2000/svg", tag);
 }
@@ -475,11 +562,8 @@ function createSVGRenderer(options) {
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
     headRadius: options.headRadius ?? 4,
-    glowSize: options.glowSize ?? 20,
     ariaLabel: options.ariaLabel ?? "Loading"
   };
-  const uid = ++instanceCount;
-  const gradientId = `sarmal-glow-${uid}`;
   const rect = container.getBoundingClientRect();
   const width = rect.width || 200;
   const height = rect.height || 200;
@@ -492,27 +576,6 @@ function createSVGRenderer(options) {
   const titleEl = el("title");
   titleEl.textContent = opts.ariaLabel;
   svg.appendChild(titleEl);
-  const defs = el("defs");
-  const gradient = el("radialGradient");
-  gradient.id = gradientId;
-  gradient.setAttribute("cx", "50%");
-  gradient.setAttribute("cy", "50%");
-  gradient.setAttribute("r", "50%");
-  const stop0 = el("stop");
-  stop0.setAttribute("offset", "0%");
-  stop0.setAttribute("stop-color", opts.headColor);
-  stop0.setAttribute("stop-opacity", "1");
-  const stopMid = el("stop");
-  stopMid.setAttribute("offset", `${DEFAULT_GLOW_INNER_STOP * 100}%`);
-  stopMid.setAttribute("stop-color", opts.headColor);
-  stopMid.setAttribute("stop-opacity", String(DEFAULT_GLOW_FALLOFF_OPACITY));
-  const stop1 = el("stop");
-  stop1.setAttribute("offset", "100%");
-  stop1.setAttribute("stop-color", opts.headColor);
-  stop1.setAttribute("stop-opacity", "0");
-  gradient.append(stop0, stopMid, stop1);
-  defs.appendChild(gradient);
-  svg.appendChild(defs);
   const skeletonPath = el("path");
   skeletonPath.setAttribute("fill", "none");
   skeletonPath.setAttribute("stroke", opts.skeletonColor);
@@ -534,19 +597,12 @@ function createSVGRenderer(options) {
   let morphPathABuilt = "";
   let morphPathBBuilt = "";
   const trailPaths = [];
-  for (let i = 0; i < TRAIL_BATCH_COUNT; i++) {
+  for (let i = 0; i < MAX_TRAIL_SEGMENTS; i++) {
     const path = el("path");
-    path.setAttribute("fill", "none");
-    path.setAttribute("stroke", opts.trailColor);
-    path.setAttribute("stroke-linecap", "round");
-    path.setAttribute("stroke-linejoin", "round");
+    path.setAttribute("fill", opts.trailColor);
     svg.appendChild(path);
     trailPaths.push(path);
   }
-  const glowCircle = el("circle");
-  glowCircle.setAttribute("fill", `url(#${gradientId})`);
-  glowCircle.setAttribute("r", String(opts.glowSize));
-  svg.appendChild(glowCircle);
   const headCircle = el("circle");
   headCircle.setAttribute("fill", opts.headColor);
   headCircle.setAttribute("r", String(opts.headRadius));
@@ -584,19 +640,25 @@ function createSVGRenderer(options) {
     offsetY = (height - h * scale) / 2 - minY * scale;
   }
   function px(p) {
-    return (p.x * scale + offsetX).toFixed(2);
+    return p.x * scale + offsetX;
   }
   function py(p) {
-    return (p.y * scale + offsetY).toFixed(2);
+    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${px(skeleton2[0])} ${py(skeleton2[0])}`;
+    let d = `M${pxStr(skeleton2[0])} ${pyStr(skeleton2[0])}`;
     for (let i = 1; i < skeleton2.length; i++) {
-      d += ` L${px(skeleton2[i])} ${py(skeleton2[i])}`;
+      d += ` L${pxStr(skeleton2[i])} ${pyStr(skeleton2[i])}`;
     }
     d += " Z";
     skeletonPath.setAttribute("d", d);
@@ -613,24 +675,32 @@ function createSVGRenderer(options) {
       }
       return;
     }
-    const batchSize = Math.ceil(trailCount / TRAIL_BATCH_COUNT);
-    for (let b = 0; b < TRAIL_BATCH_COUNT; b++) {
-      const start = b * batchSize;
-      const end = Math.min(start + batchSize, trailCount - 1);
-      if (start >= trailCount - 1) {
-        trailPaths[b].setAttribute("d", "");
-        continue;
-      }
-      const progress = (start + end) / 2 / (trailCount - 1);
+    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 strokeWidth = TRAIL_MIN_WIDTH2 + progress * (TRAIL_MAX_WIDTH2 - TRAIL_MIN_WIDTH2);
-      let d = `M${px(trail[start])} ${py(trail[start])}`;
-      for (let i = start + 1; i <= end; i++) {
-        d += ` L${px(trail[i])} ${py(trail[i])}`;
-      }
-      trailPaths[b].setAttribute("d", d);
-      trailPaths[b].setAttribute("stroke-opacity", opacity.toFixed(3));
-      trailPaths[b].setAttribute("stroke-width", strokeWidth.toFixed(2));
+      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 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));
+    }
+    for (let i = trailCount - 1; i < trailPaths.length; i++) {
+      trailPaths[i].setAttribute("d", "");
     }
   }
   function updateHead(trail, trailCount) {
@@ -640,10 +710,8 @@ function createSVGRenderer(options) {
     const head = trail[trailCount - 1];
     const x = px(head);
     const y = py(head);
-    glowCircle.setAttribute("cx", x);
-    glowCircle.setAttribute("cy", y);
-    headCircle.setAttribute("cx", x);
-    headCircle.setAttribute("cy", y);
+    headCircle.setAttribute("cx", String(x));
+    headCircle.setAttribute("cy", String(y));
   }
   let animationId = null;
   let lastTime = 0;