@sarmal/core 0.35.0 → 0.36.0

package/dist/curves/index.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 export { artemis2 } from './artemis2.js';
 export { astroid } from './astroid.js';
 export { deltoid } from './deltoid.js';

package/dist/curves/lame.d.cts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.cjs';
+import { C as CurveDef } from '../types-CCgSK31t.cjs';
 
 /**
  * Lamé curve (superellipse) with time-varying exponent

package/dist/curves/lame.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 
 /**
  * Lamé curve (superellipse) with time-varying exponent

package/dist/curves/lissajous32.d.cts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.cjs';
+import { C as CurveDef } from '../types-CCgSK31t.cjs';
 
 /**
  * Lissajous curve with frequency ratio 3:2

package/dist/curves/lissajous32.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 
 /**
  * Lissajous curve with frequency ratio 3:2

package/dist/curves/lissajous43.d.cts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.cjs';
+import { C as CurveDef } from '../types-CCgSK31t.cjs';
 
 /**
  * Lissajous curve with frequency ratio 4:3

package/dist/curves/lissajous43.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 
 /**
  * Lissajous curve with frequency ratio 4:3

package/dist/curves/rose3.d.cts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.cjs';
+import { C as CurveDef } from '../types-CCgSK31t.cjs';
 
 /**
  * Rose curve with 3 petals

package/dist/curves/rose3.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 
 /**
  * Rose curve with 3 petals

package/dist/curves/rose5.d.cts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.cjs';
+import { C as CurveDef } from '../types-CCgSK31t.cjs';
 
 /**
  * Rose curve with 5 petals

package/dist/curves/rose5.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 
 /**
  * Rose curve with 5 petals

package/dist/curves/rose52.d.cts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.cjs';
+import { C as CurveDef } from '../types-CCgSK31t.cjs';
 
 /**
  * Rose curve with n=5/2 that traces 5 petals over two full revolutions

package/dist/curves/rose52.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 
 /**
  * Rose curve with n=5/2 that traces 5 petals over two full revolutions

package/dist/curves/star.d.cts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.cjs';
+import { C as CurveDef } from '../types-CCgSK31t.cjs';
 
 /**
  * 5-pointed star based on Fourier harmonics.

package/dist/curves/star.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 
 /**
  * 5-pointed star based on Fourier harmonics.

package/dist/curves/star4.d.cts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.cjs';
+import { C as CurveDef } from '../types-CCgSK31t.cjs';
 
 /**
  * 4-pointed star based on Fourier harmonics.

package/dist/curves/star4.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 
 /**
  * 4-pointed star based on Fourier harmonics.

package/dist/curves/star7.d.cts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.cjs';
+import { C as CurveDef } from '../types-CCgSK31t.cjs';
 
 /**
  * 7-pointed star based on Fourier harmonics.

package/dist/curves/star7.d.ts

@@ -1,4 +1,4 @@
-import { C as CurveDef } from '../types-_f27GDkU.js';
+import { C as CurveDef } from '../types-CCgSK31t.js';
 
 /**
  * 7-pointed star based on Fourier harmonics.

package/dist/index.cjs

@@ -322,7 +322,9 @@ function computeTrailQuad(trail, i, trailCount, toX, toY, minWidth = TRAIL_MIN_W
   };
 }
 function computeBoundaries(pts, logicalWidth, logicalHeight, minPaddingPx = FIT_PADDING_MIN) {
-  if (pts.length === 0) return null;
+  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) {
@@ -520,7 +522,11 @@ function getPaletteColor(palette, position, timeOffset = 0) {
   return lerpOklab(c1, c2, t);
 }
 var TRAIL_STYLES = ["default", "gradient-static", "gradient-animated"];
-var BASE_RENDER_OPTION_KEYS = /* @__PURE__ */ new Set(["trailColor", "trailStyle"]);
+var BASE_RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
+  "trailColor",
+  "trailStyle",
+  "skeletonColor"
+]);
 var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
   "trailColor",
   "headColor",
@@ -541,6 +547,9 @@ function validateBaseRenderOptions(partial) {
   if (partial.trailStyle !== void 0) {
     assertTrailStyle(partial.trailStyle);
   }
+  if (partial.skeletonColor !== void 0) {
+    assertSkeletonColor(partial.skeletonColor);
+  }
 }
 function validateRenderOptions(partial) {
   for (const key of Object.keys(partial)) {
@@ -1426,6 +1435,7 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     trailLength: trailLengthOpt,
     trailColor: initialColor = "#ffffff",
     trailStyle: initialTrailStyle = "default",
+    skeletonColor: skeletonColorOpt = "#ffffff",
     autoStart = true,
     pauseOnHidden: pauseOnHiddenOpt = true,
     initialPhase
@@ -1441,14 +1451,8 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
   const cellW = W / cols;
   const cellH = H / rows;
   const dotR = Math.min(cellW, cellH) * 0.36;
-  let gradientRgb;
-  if (Array.isArray(initialColor)) {
-    validateBaseRenderOptions({ trailColor: initialColor });
-    gradientRgb = initialColor.map(colorToRgb);
-  } else {
-    gradientRgb = null;
-  }
-  let colorRgb = gradientRgb ? gradientRgb[0] : colorToRgb(initialColor);
+  let gradientOklab = null;
+  let colorRgb = { r: 255, g: 255, b: 255 };
   let currentTrailStyle = initialTrailStyle;
   let animTime = 0;
   const ANIM_PERIOD = 6;
@@ -1462,6 +1466,8 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
   let pixelMaskCoverages = new Float32Array(0);
   let bgImageData = null;
   let frameImageData = null;
+  let skeletonColorOklab = null;
+  const skeletonDotGrid = new Uint8Array(cols * rows);
   let animationId = null;
   let lastTime = 0;
   let pausedByVisibility = false;
@@ -1520,7 +1526,7 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
   }
   function buildBgImageData() {
     bgImageData = new ImageData(W, H);
-    const bg = gradientRgb ? gradientRgb[0] : colorRgb;
+    const bg = colorRgb;
     const baseAlpha = 0.05 * 255;
     const { data } = bgImageData;
     const n = cols * rows;
@@ -1537,18 +1543,61 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
       }
     }
   }
-  function sampleGradientRgb(stops, t) {
-    const n = stops.length;
-    const scaled = Math.max(0, Math.min(1, t)) * (n - 1);
-    const i = Math.min(Math.floor(scaled), n - 2);
-    const a = stops[i];
-    const bStop = stops[i + 1];
-    const mix = scaled - i;
-    return {
-      r: Math.round(a.r + (bStop.r - a.r) * mix),
-      g: Math.round(a.g + (bStop.g - a.g) * mix),
-      b: Math.round(a.b + (bStop.b - a.b) * mix)
-    };
+  function applyColor(color) {
+    if (Array.isArray(color)) {
+      gradientOklab = color.map((c) => parseColorToOklab(c));
+      colorRgb = oklabToRgb(gradientOklab[0]);
+    } else {
+      gradientOklab = null;
+      colorRgb = colorToRgb(color);
+    }
+  }
+  function applySkeletonColor(color) {
+    skeletonColorOklab = color === "transparent" ? null : parseColorToOklab(color);
+  }
+  function computeSkeletonGrid(skel) {
+    skeletonDotGrid.fill(0);
+    const count = skel.length;
+    for (let i = 0; i < count; i++) {
+      const pt = skel[i];
+      const [c, r] = mapPt(pt.x, pt.y);
+      skeletonDotGrid[r * cols + c] = 1;
+      if (i < count - 1) {
+        const next = skel[i + 1];
+        const [nc, nr] = mapPt(next.x, next.y);
+        const steps = Math.ceil(Math.max(Math.abs(nc - c), Math.abs(nr - r))) * 2;
+        for (let s = 1; s < steps; s++) {
+          const t = s / steps;
+          const ix = pt.x + (next.x - pt.x) * t;
+          const iy = pt.y + (next.y - pt.y) * t;
+          const [ic, ir] = mapPt(ix, iy);
+          skeletonDotGrid[ir * cols + ic] = 1;
+        }
+      }
+    }
+  }
+  function writeSkeletonPixels(data) {
+    if (skeletonColorOklab === null) {
+      return;
+    }
+    const { r, g, b } = oklabToRgb(skeletonColorOklab);
+    const skelBaseAlpha = DEFAULT_SKELETON_OPACITY * 255;
+    const n = cols * rows;
+    for (let dotIdx = 0; dotIdx < n; dotIdx++) {
+      if (!skeletonDotGrid[dotIdx]) {
+        continue;
+      }
+      const start = pixelMaskStarts[dotIdx];
+      const len = pixelMaskLengths[dotIdx];
+      for (let k = 0; k < len; k++) {
+        const px = pixelMaskIndices[start + k];
+        const coverage = pixelMaskCoverages[start + k];
+        data[px] = r;
+        data[px + 1] = g;
+        data[px + 2] = b;
+        data[px + 3] = Math.round(skelBaseAlpha * coverage);
+      }
+    }
   }
   function calculateBoundaries(skel) {
     const b = computeBoundaries(skel, W, H);
@@ -1602,7 +1651,8 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     }
     frameImageData.data.set(bgImageData.data);
     const { data } = frameImageData;
-    const sineOffset = currentTrailStyle === "gradient-animated" ? 0.15 * Math.sin(animTime / ANIM_PERIOD * 2 * Math.PI) : 0;
+    writeSkeletonPixels(data);
+    const timeOffset = currentTrailStyle === "gradient-animated" ? animTime / ANIM_PERIOD : 0;
     const n = cols * rows;
     for (let dotIdx = 0; dotIdx < n; dotIdx++) {
       const intensity = grid[dotIdx];
@@ -1610,9 +1660,8 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
         continue;
       }
       let r, g, b;
-      if (gradientRgb !== null) {
-        const t = Math.max(0, Math.min(1, intensity + sineOffset));
-        ({ r, g, b } = sampleGradientRgb(gradientRgb, t));
+      if (gradientOklab !== null) {
+        ({ r, g, b } = oklabToRgb(getPaletteColor(gradientOklab, intensity, timeOffset)));
       } else {
         ({ r, g, b } = colorRgb);
       }
@@ -1630,21 +1679,26 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     }
     ctx.putImageData(frameImageData, 0, 0);
   }
+  function completeMorphNow() {
+    engine.completeMorph();
+    morphResolve?.();
+    morphResolve = null;
+    morphReject = null;
+    morphProgress = 0;
+  }
   function renderFrame(deltaTime) {
     if (engine.morphAlpha !== null) {
       morphProgress = Math.min(1, morphProgress + deltaTime / (morphDurationMs / 1e3));
       engine.setMorphAlpha(morphProgress);
       calculateBoundaries(engine.getSarmalSkeleton());
       if (morphProgress >= 1) {
-        engine.completeMorph();
-        morphResolve?.();
-        morphResolve = null;
-        morphReject = null;
-        morphProgress = 0;
+        completeMorphNow();
         calculateBoundaries(engine.getSarmalSkeleton());
       }
+      computeSkeletonGrid(engine.getSarmalSkeleton());
     } else if (engine.isLiveSkeleton) {
       calculateBoundaries(engine.getSarmalSkeleton());
+      computeSkeletonGrid(engine.getSarmalSkeleton());
     }
     if (currentTrailStyle === "gradient-animated") {
       animTime += deltaTime;
@@ -1658,8 +1712,12 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     renderFrame(deltaTime);
     animationId = requestAnimationFrame(loop);
   }
+  validateBaseRenderOptions({ trailColor: initialColor, skeletonColor: skeletonColorOpt });
+  applyColor(initialColor);
+  applySkeletonColor(skeletonColorOpt);
   calculateBoundaries(engine.getSarmalSkeleton());
   computePixelMask();
+  computeSkeletonGrid(engine.getSarmalSkeleton());
   frameImageData = new ImageData(W, H);
   buildBgImageData();
   if (initialPhase !== void 0) {
@@ -1669,13 +1727,17 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
   const instance = {
     /** Starts the animation loop. Does nothing if already running. */
     play() {
-      if (animationId !== null) return;
+      if (animationId !== null) {
+        return;
+      }
       lastTime = performance.now();
       loop();
     },
     /** Pauses the animation loop. Preserves current trail state. */
     pause() {
-      if (animationId === null) return;
+      if (animationId === null) {
+        return;
+      }
       cancelAnimationFrame(animationId);
       animationId = null;
       engine.cancelSpeedTransition();
@@ -1706,11 +1768,7 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
      */
     morphTo(target, opts) {
       if (morphResolve !== null) {
-        engine.completeMorph();
-        morphResolve();
-        morphResolve = null;
-        morphReject = null;
-        morphProgress = 0;
+        completeMorphNow();
       }
       morphDurationMs = opts?.duration ?? DEFAULT_MORPH_DURATION_MS;
       morphProgress = 0;
@@ -1723,23 +1781,20 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     /**
      * Updates render options on a live instance without stopping the animation.
      *
-     * Supported: `trailColor` and `trailStyle`.
-     * ! Unsupported fields (`headColor`, `skeletonColor`, `headRadius`, `trailWidth`) throw.
+     * Supported: `trailColor`, `trailStyle`, and `skeletonColor`.
+     * ! Unsupported fields (`headColor`, `headRadius`, `trailWidth`) throw.
      * ! Validation fails the entire call if any field is invalid, leaving options unchanged.
      */
     setRenderOptions(partial) {
       validateBaseRenderOptions(partial);
       let needsRebuildBg = false;
       if (partial.trailColor !== void 0) {
-        if (Array.isArray(partial.trailColor)) {
-          gradientRgb = partial.trailColor.map(colorToRgb);
-          colorRgb = gradientRgb[0];
-        } else {
-          gradientRgb = null;
-          colorRgb = colorToRgb(partial.trailColor);
-        }
+        applyColor(partial.trailColor);
         needsRebuildBg = true;
       }
+      if (partial.skeletonColor !== void 0) {
+        applySkeletonColor(partial.skeletonColor);
+      }
       if (partial.trailStyle !== void 0) {
         currentTrailStyle = partial.trailStyle;
         if (currentTrailStyle === "default") {
@@ -1749,9 +1804,13 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
       if (needsRebuildBg) {
         buildBgImageData();
       }
-      if (currentTrailStyle !== "default" && gradientRgb === null) {
+      if (currentTrailStyle !== "default" && gradientOklab === null) {
+        console.warn(
+          `[sarmal] dot matrix: trailColor is a single color but trailStyle is "${currentTrailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient.`
+        );
+      } else if (currentTrailStyle === "default" && gradientOklab !== null) {
         console.warn(
-          "[sarmal] dot matrix: gradient trailStyle has no effect without a trailColor array"
+          '[sarmal] dot matrix: trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.'
         );
       }
     }