@sarmal/core 0.20.0 → 0.23.0

package/dist/auto-init.d.cts

@@ -1,6 +1,6 @@
 /**
  * Scans for `<canvas data-sarmal="curveName">` and `<svg data-sarmal="curveName">`
- * when DOMContentLoaded is triggered, and creates a Sarmal instance for each one.
+ *  when **DOMContentLoaded** is triggered, and creates a Sarmal instance for each one.
  */
 declare function init(): void;
 

package/dist/auto-init.d.ts

@@ -1,6 +1,6 @@
 /**
  * Scans for `<canvas data-sarmal="curveName">` and `<svg data-sarmal="curveName">`
- * when DOMContentLoaded is triggered, and creates a Sarmal instance for each one.
+ *  when **DOMContentLoaded** is triggered, and creates a Sarmal instance for each one.
  */
 declare function init(): void;
 

package/dist/auto-init.js

@@ -418,6 +418,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
   "headColor",
   "skeletonColor",
   "trailStyle",
+  "headRadius",
 ]);
 function validateRenderOptions(partial) {
   for (const key of Object.keys(partial)) {
@@ -437,6 +438,9 @@ function validateRenderOptions(partial) {
   if (partial.trailStyle !== void 0) {
     assertTrailStyle(partial.trailStyle);
   }
+  if (partial.headRadius !== void 0) {
+    assertHeadRadius(partial.headRadius);
+  }
 }
 function assertTrailColor(value) {
   if (typeof value === "string") {
@@ -494,6 +498,18 @@ function assertTrailStyle(value) {
     );
   }
 }
+function assertHeadRadius(value) {
+  if (typeof value !== "number") {
+    throw new TypeError(
+      `[sarmal] setRenderOptions: headRadius must be a number, got ${JSON.stringify(value)}`,
+    );
+  }
+  if (!Number.isFinite(value) || value <= 0) {
+    throw new TypeError(
+      `[sarmal] setRenderOptions: headRadius must be a finite positive number, got ${value}`,
+    );
+  }
+}
 function resolveTrailMainColor(trailColor) {
   return typeof trailColor === "string" ? trailColor : trailColor[0];
 }
@@ -522,9 +538,9 @@ function warnIfTrailColorMismatch(trailColor, trailStyle) {
     );
   }
 }
-var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160));
 
 // src/renderer.ts
+var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160));
 var WHITE_HEX = "#ffffff";
 function hexToRgbComponents(hex) {
   const n = parseInt(hex.slice(1), 16);
@@ -561,6 +577,7 @@ function createRenderer(options) {
   setupCanvas();
   let logicalWidth = canvas.width / dpr;
   let logicalHeight = canvas.height / dpr;
+  let headRadius = options.headRadius ?? getHeadDotRadius(logicalWidth, logicalHeight);
   let skeleton = [];
   let skeletonCanvas = null;
   let trail = [];
@@ -677,7 +694,7 @@ function createRenderer(options) {
     }
     const x = head.x * scale + offsetX;
     const y = head.y * scale + offsetY;
-    const r = options.headRadius ?? getHeadDotRadius(logicalWidth, logicalHeight);
+    const r = headRadius;
     ctx.fillStyle = headColor;
     ctx.beginPath();
     ctx.arc(x, y, r, 0, Math.PI * 2);
@@ -806,6 +823,9 @@ function createRenderer(options) {
       if (partial.headColor !== void 0) {
         userHeadColor = partial.headColor;
       }
+      if (partial.headRadius !== void 0) {
+        headRadius = partial.headRadius;
+      }
       if (userHeadColor === null) {
         headColor = resolveHeadColor(trailColor, trailStyle);
       } else {
@@ -824,6 +844,8 @@ function createRenderer(options) {
 
 // src/renderer-svg.ts
 var EMPTY_PARAMS2 = {};
+var SVG_DEFAULT_HEAD_RADIUS = 0.5;
+var SKELETON_STROKE_WIDTH_PX = 1.5;
 var HIGH_TRAIL_LENGTH_THRESHOLD = 5e3;
 function pointsToPathString(pts, scale, offsetX, offsetY) {
   if (pts.length < 2) {
@@ -863,15 +885,21 @@ function createSVGRenderer(options) {
   let skeletonColor = options.skeletonColor ?? "#ffffff";
   let userHeadColor = options.headColor ?? null;
   let headColor = userHeadColor ?? resolveHeadColor(trailColor, trailStyle);
+  let headRadius;
   let trailSolid = resolveTrailMainColor(trailColor);
   let trailPalette = resolveTrailPalette(trailColor);
   const ariaLabel = options.ariaLabel ?? "Loading";
   warnIfTrailColorMismatch(trailColor, trailStyle);
   const viewSize = 100;
-  const headRadius = options.headRadius ?? 1.5;
-  const svgTrailMinWidth = 0.25;
-  const svgTrailMaxWidth = 1.25;
-  const svgSkeletonStrokeWidth = "0.75";
+  function getContainerPixelSize() {
+    const rect = container.getBoundingClientRect();
+    return rect.width && rect.height ? Math.min(rect.width, rect.height) : 200;
+  }
+  const containerPx = getContainerPixelSize();
+  const svgTrailMinWidth = (TRAIL_MIN_WIDTH * viewSize) / containerPx;
+  const svgTrailMaxWidth = (TRAIL_MAX_WIDTH * viewSize) / containerPx;
+  const svgSkeletonStrokeWidth = String((SKELETON_STROKE_WIDTH_PX * viewSize) / containerPx);
+  headRadius = options.headRadius ?? SVG_DEFAULT_HEAD_RADIUS;
   container.setAttribute("viewBox", `0 0 ${viewSize} ${viewSize}`);
   container.setAttribute("role", "img");
   container.setAttribute("aria-label", ariaLabel);
@@ -1144,6 +1172,10 @@ function createSVGRenderer(options) {
       if (partial.headColor !== void 0) {
         userHeadColor = partial.headColor;
       }
+      if (partial.headRadius !== void 0) {
+        headRadius = partial.headRadius;
+        headCircle.setAttribute("r", String(headRadius));
+      }
       if (userHeadColor === null) {
         headColor = resolveHeadColor(trailColor, trailStyle);
       } else {