@sarmal/core 0.23.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/auto-init.cjs +148 -137
  2. package/dist/auto-init.cjs.map +1 -1
  3. package/dist/auto-init.js +147 -136
  4. package/dist/auto-init.js.map +1 -1
  5. package/dist/curves/artemis2.cjs +7 -10
  6. package/dist/curves/artemis2.d.cts +1 -1
  7. package/dist/curves/artemis2.d.ts +1 -1
  8. package/dist/curves/artemis2.js +6 -9
  9. package/dist/curves/astroid.cjs +4 -4
  10. package/dist/curves/astroid.d.cts +1 -1
  11. package/dist/curves/astroid.d.ts +1 -1
  12. package/dist/curves/astroid.js +3 -3
  13. package/dist/curves/deltoid.cjs +4 -4
  14. package/dist/curves/deltoid.d.cts +1 -1
  15. package/dist/curves/deltoid.d.ts +1 -1
  16. package/dist/curves/deltoid.js +3 -3
  17. package/dist/curves/epicycloid3.cjs +4 -4
  18. package/dist/curves/epicycloid3.d.cts +1 -1
  19. package/dist/curves/epicycloid3.d.ts +1 -1
  20. package/dist/curves/epicycloid3.js +3 -3
  21. package/dist/curves/epitrochoid7.cjs +5 -5
  22. package/dist/curves/epitrochoid7.d.cts +1 -1
  23. package/dist/curves/epitrochoid7.d.ts +1 -1
  24. package/dist/curves/epitrochoid7.js +4 -4
  25. package/dist/curves/index.cjs +40 -53
  26. package/dist/curves/index.d.cts +29 -29
  27. package/dist/curves/index.d.ts +29 -29
  28. package/dist/curves/index.js +40 -69
  29. package/dist/curves/lame.cjs +5 -6
  30. package/dist/curves/lame.d.cts +1 -1
  31. package/dist/curves/lame.d.ts +1 -1
  32. package/dist/curves/lame.js +4 -5
  33. package/dist/curves/lissajous32.cjs +4 -4
  34. package/dist/curves/lissajous32.d.cts +1 -1
  35. package/dist/curves/lissajous32.d.ts +1 -1
  36. package/dist/curves/lissajous32.js +3 -3
  37. package/dist/curves/lissajous43.cjs +4 -4
  38. package/dist/curves/lissajous43.d.cts +1 -1
  39. package/dist/curves/lissajous43.d.ts +1 -1
  40. package/dist/curves/lissajous43.js +3 -3
  41. package/dist/curves/rose3.cjs +4 -4
  42. package/dist/curves/rose3.d.cts +1 -1
  43. package/dist/curves/rose3.d.ts +1 -1
  44. package/dist/curves/rose3.js +3 -3
  45. package/dist/curves/rose5.cjs +4 -4
  46. package/dist/curves/rose5.d.cts +1 -1
  47. package/dist/curves/rose5.d.ts +1 -1
  48. package/dist/curves/rose5.js +3 -3
  49. package/dist/curves/rose52.cjs +5 -5
  50. package/dist/curves/rose52.d.cts +1 -1
  51. package/dist/curves/rose52.d.ts +1 -1
  52. package/dist/curves/rose52.js +4 -4
  53. package/dist/curves/star.cjs +5 -8
  54. package/dist/curves/star.d.cts +1 -1
  55. package/dist/curves/star.d.ts +1 -1
  56. package/dist/curves/star.js +4 -7
  57. package/dist/curves/star4.cjs +5 -8
  58. package/dist/curves/star4.d.cts +1 -1
  59. package/dist/curves/star4.d.ts +1 -1
  60. package/dist/curves/star4.js +4 -7
  61. package/dist/curves/star7.cjs +5 -8
  62. package/dist/curves/star7.d.cts +1 -1
  63. package/dist/curves/star7.d.ts +1 -1
  64. package/dist/curves/star7.js +4 -7
  65. package/dist/index.cjs +140 -133
  66. package/dist/index.cjs.map +1 -1
  67. package/dist/index.d.cts +33 -74
  68. package/dist/index.d.ts +33 -74
  69. package/dist/index.js +140 -153
  70. package/dist/index.js.map +1 -1
  71. package/dist/types-CknrlCAf.d.cts +314 -0
  72. package/dist/types-CknrlCAf.d.ts +314 -0
  73. package/package.json +1 -1
  74. package/dist/types-C0b4MPtI.d.cts +0 -321
  75. package/dist/types-C0b4MPtI.d.ts +0 -321
package/dist/auto-init.js CHANGED
@@ -61,13 +61,13 @@ function resolveCurve(curveDef) {
61
61
  period,
62
62
  speed,
63
63
  skeleton: curveDef.skeleton,
64
- skeletonFn: curveDef.skeletonFn,
64
+ skeletonFn: curveDef.skeletonFn
65
65
  };
66
66
  }
67
67
  function createEngine(curveDef, trailLength = 120) {
68
68
  if (!Number.isFinite(trailLength) || trailLength <= 0) {
69
69
  throw new RangeError(
70
- `[sarmal] trailLength must be a positive finite number, got ${trailLength}`,
70
+ `[sarmal] trailLength must be a positive finite number, got ${trailLength}`
71
71
  );
72
72
  }
73
73
  let curve = resolveCurve(curveDef);
@@ -108,7 +108,7 @@ function createEngine(curveDef, trailLength = 120) {
108
108
  actualTime += deltaTime;
109
109
  if (morphCurveB !== null && _morphAlpha !== null) {
110
110
  const a = curve.fn(t, actualTime, EMPTY_PARAMS);
111
- const tB = _morphStrategy === "normalized" ? (t / curve.period) * morphCurveB.period : t;
111
+ const tB = _morphStrategy === "normalized" ? t / curve.period * morphCurveB.period : t;
112
112
  const b = morphCurveB.fn(tB, actualTime, EMPTY_PARAMS);
113
113
  trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
114
114
  } else {
@@ -135,14 +135,14 @@ function createEngine(curveDef, trailLength = 120) {
135
135
  trail.clear();
136
136
  },
137
137
  jump(newT, { clearTrail = false } = {}) {
138
- t = ((newT % curve.period) + curve.period) % curve.period;
138
+ t = (newT % curve.period + curve.period) % curve.period;
139
139
  if (clearTrail) {
140
140
  trail.clear();
141
141
  }
142
142
  },
143
143
  seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
144
144
  const advance = curve.speed * step;
145
- const target = ((targetT % curve.period) + curve.period) % curve.period;
145
+ const target = (targetT % curve.period + curve.period) % curve.period;
146
146
  const targetTime = target / curve.speed;
147
147
  t = target;
148
148
  actualTime = targetTime;
@@ -151,7 +151,7 @@ function createEngine(curveDef, trailLength = 120) {
151
151
  const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
152
152
  for (let i = count - 1; i >= 0; i--) {
153
153
  const sampleT = target - i * advance;
154
- const wrappedT = ((sampleT % curve.period) + curve.period) % curve.period;
154
+ const wrappedT = (sampleT % curve.period + curve.period) % curve.period;
155
155
  const time = targetTime - i * step;
156
156
  const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
157
157
  trail.push(point.x, point.y);
@@ -168,16 +168,13 @@ function createEngine(curveDef, trailLength = 120) {
168
168
  ...frozenB,
169
169
  fn: (sampleT, time, params) => {
170
170
  const a = frozenA.fn(sampleT, time, params);
171
- const tB =
172
- frozenStrategy === "normalized"
173
- ? (sampleT / frozenA.period) * frozenB.period
174
- : sampleT;
171
+ const tB = frozenStrategy === "normalized" ? sampleT / frozenA.period * frozenB.period : sampleT;
175
172
  const b = frozenB.fn(tB, time, params);
176
173
  return {
177
174
  x: a.x + (b.x - a.x) * frozenAlpha,
178
- y: a.y + (b.y - a.y) * frozenAlpha,
175
+ y: a.y + (b.y - a.y) * frozenAlpha
179
176
  };
180
- },
177
+ }
181
178
  };
182
179
  }
183
180
  _morphStrategy = strategy;
@@ -190,7 +187,7 @@ function createEngine(curveDef, trailLength = 120) {
190
187
  completeMorph() {
191
188
  if (morphCurveB !== null) {
192
189
  if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
193
- t = (t / curve.period) * morphCurveB.period;
190
+ t = t / curve.period * morphCurveB.period;
194
191
  }
195
192
  curve = morphCurveB;
196
193
  }
@@ -202,22 +199,19 @@ function createEngine(curveDef, trailLength = 120) {
202
199
  const points = new Array(steps);
203
200
  if (morphCurveB !== null && _morphAlpha !== null) {
204
201
  for (let i = 0; i < steps; i++) {
205
- const sampleT = (i / (steps - 1)) * curve.period;
202
+ const sampleT = i / (steps - 1) * curve.period;
206
203
  const a = sampleSkeleton(curve, sampleT);
207
- const tB =
208
- _morphStrategy === "normalized"
209
- ? (sampleT / curve.period) * morphCurveB.period
210
- : sampleT;
204
+ const tB = _morphStrategy === "normalized" ? sampleT / curve.period * morphCurveB.period : sampleT;
211
205
  const b = sampleSkeleton(morphCurveB, tB);
212
206
  points[i] = {
213
207
  x: a.x + (b.x - a.x) * _morphAlpha,
214
- y: a.y + (b.y - a.y) * _morphAlpha,
208
+ y: a.y + (b.y - a.y) * _morphAlpha
215
209
  };
216
210
  }
217
211
  return points;
218
212
  }
219
213
  for (let i = 0; i < steps; i++) {
220
- const sampleT = (i / (steps - 1)) * curve.period;
214
+ const sampleT = i / (steps - 1) * curve.period;
221
215
  points[i] = sampleSkeleton(curve, sampleT);
222
216
  }
223
217
  return points;
@@ -259,7 +253,7 @@ function createEngine(curveDef, trailLength = 120) {
259
253
  _speedTransition.reject(new Error("Speed transition cancelled"));
260
254
  _speedTransition = null;
261
255
  }
262
- },
256
+ }
263
257
  };
264
258
  }
265
259
 
@@ -298,15 +292,7 @@ function computeNormal(trail, i) {
298
292
  const tangent = computeTangent(trail, i);
299
293
  return { x: -tangent.y, y: tangent.x };
300
294
  }
301
- function computeTrailQuad(
302
- trail,
303
- i,
304
- trailCount,
305
- toX,
306
- toY,
307
- minWidth = TRAIL_MIN_WIDTH,
308
- maxWidth = TRAIL_MAX_WIDTH,
309
- ) {
295
+ function computeTrailQuad(trail, i, trailCount, toX, toY, minWidth = TRAIL_MIN_WIDTH, maxWidth = TRAIL_MAX_WIDTH) {
310
296
  const progress = i / (trailCount - 1);
311
297
  const nextProgress = (i + 1) / (trailCount - 1);
312
298
  const opacity = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
@@ -330,16 +316,13 @@ function computeTrailQuad(
330
316
  r1x: nx - n1.x * w1,
331
317
  r1y: ny - n1.y * w1,
332
318
  opacity,
333
- progress,
319
+ progress
334
320
  };
335
321
  }
336
322
  function computeBoundaries(pts, logicalWidth, logicalHeight) {
337
323
  if (pts.length === 0) return null;
338
324
  const first = pts[0];
339
- let minX = first.x,
340
- maxX = first.x,
341
- minY = first.y,
342
- maxY = first.y;
325
+ let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
343
326
  for (const p of pts) {
344
327
  if (p.x < minX) {
345
328
  minX = p.x;
@@ -358,7 +341,7 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
358
341
  const h = maxY - minY;
359
342
  if (w === 0 && h === 0) {
360
343
  throw new Error(
361
- "[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t.",
344
+ "[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
362
345
  );
363
346
  }
364
347
  const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
@@ -369,12 +352,12 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
369
352
  scaleXProportional,
370
353
  scaleYProportional,
371
354
  scaleXMinPadding,
372
- scaleYMinPadding,
355
+ scaleYMinPadding
373
356
  );
374
357
  return {
375
358
  scale,
376
359
  offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
377
- offsetY: (logicalHeight - h * scale) / 2 - minY * scale,
360
+ offsetY: (logicalHeight - h * scale) / 2 - minY * scale
378
361
  };
379
362
  }
380
363
  function enginePassthroughs(engine) {
@@ -384,17 +367,17 @@ function enginePassthroughs(engine) {
384
367
  setSpeed: engine.setSpeed,
385
368
  getSpeed: engine.getSpeed,
386
369
  resetSpeed: engine.resetSpeed,
387
- setSpeedOver: engine.setSpeedOver,
370
+ setSpeedOver: engine.setSpeedOver
388
371
  };
389
372
  }
390
373
  function hexToRgb(hex) {
391
374
  const n = parseInt(hex.slice(1), 16);
392
- return { r: n >> 16, g: (n >> 8) & 255, b: n & 255 };
375
+ return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
393
376
  }
394
377
  var lerpRgb = (a, b, t) => ({
395
378
  r: Math.round(a.r + (b.r - a.r) * t),
396
379
  g: Math.round(a.g + (b.g - a.g) * t),
397
- b: Math.round(a.b + (b.b - a.b) * t),
380
+ b: Math.round(a.b + (b.b - a.b) * t)
398
381
  });
399
382
  function getPaletteColor(palette, position, timeOffset = 0) {
400
383
  if (palette.length === 0) {
@@ -403,7 +386,7 @@ function getPaletteColor(palette, position, timeOffset = 0) {
403
386
  if (palette.length === 1) {
404
387
  return hexToRgb(palette[0]);
405
388
  }
406
- const cyclePos = (((position + timeOffset) % 1) + 1) % 1;
389
+ const cyclePos = ((position + timeOffset) % 1 + 1) % 1;
407
390
  const scaled = cyclePos * palette.length;
408
391
  const idx = Math.floor(scaled);
409
392
  const t = scaled - idx;
@@ -418,7 +401,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
418
401
  "headColor",
419
402
  "skeletonColor",
420
403
  "trailStyle",
421
- "headRadius",
404
+ "headRadius"
422
405
  ]);
423
406
  function validateRenderOptions(partial) {
424
407
  for (const key of Object.keys(partial)) {
@@ -446,7 +429,7 @@ function assertTrailColor(value) {
446
429
  if (typeof value === "string") {
447
430
  if (!HEX_COLOR_RE.test(value)) {
448
431
  throw new TypeError(
449
- `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`,
432
+ `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`
450
433
  );
451
434
  }
452
435
  return;
@@ -454,21 +437,21 @@ function assertTrailColor(value) {
454
437
  if (Array.isArray(value)) {
455
438
  if (value.length < 2) {
456
439
  throw new RangeError(
457
- `[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`,
440
+ `[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`
458
441
  );
459
442
  }
460
443
  for (let i = 0; i < value.length; i++) {
461
444
  const entry = value[i];
462
445
  if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
463
446
  throw new TypeError(
464
- `[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`,
447
+ `[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`
465
448
  );
466
449
  }
467
450
  }
468
451
  return;
469
452
  }
470
453
  throw new TypeError(
471
- `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`,
454
+ `[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`
472
455
  );
473
456
  }
474
457
  function assertHeadColor(value) {
@@ -477,7 +460,7 @@ function assertHeadColor(value) {
477
460
  }
478
461
  if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
479
462
  throw new TypeError(
480
- `[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`,
463
+ `[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`
481
464
  );
482
465
  }
483
466
  }
@@ -487,26 +470,26 @@ function assertSkeletonColor(value) {
487
470
  }
488
471
  if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
489
472
  throw new TypeError(
490
- `[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`,
473
+ `[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`
491
474
  );
492
475
  }
493
476
  }
494
477
  function assertTrailStyle(value) {
495
478
  if (!TRAIL_STYLES.includes(value)) {
496
479
  throw new RangeError(
497
- `[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`,
480
+ `[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`
498
481
  );
499
482
  }
500
483
  }
501
484
  function assertHeadRadius(value) {
502
485
  if (typeof value !== "number") {
503
486
  throw new TypeError(
504
- `[sarmal] setRenderOptions: headRadius must be a number, got ${JSON.stringify(value)}`,
487
+ `[sarmal] setRenderOptions: headRadius must be a number, got ${JSON.stringify(value)}`
505
488
  );
506
489
  }
507
490
  if (!Number.isFinite(value) || value <= 0) {
508
491
  throw new TypeError(
509
- `[sarmal] setRenderOptions: headRadius must be a finite positive number, got ${value}`,
492
+ `[sarmal] setRenderOptions: headRadius must be a finite positive number, got ${value}`
510
493
  );
511
494
  }
512
495
  }
@@ -528,13 +511,13 @@ function resolveHeadColor(trailColor, trailStyle) {
528
511
  function warnIfTrailColorMismatch(trailColor, trailStyle) {
529
512
  if (trailStyle === "default" && Array.isArray(trailColor)) {
530
513
  console.warn(
531
- '[sarmal] trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.',
514
+ '[sarmal] trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.'
532
515
  );
533
516
  return;
534
517
  }
535
518
  if (trailStyle !== "default" && typeof trailColor === "string") {
536
519
  console.warn(
537
- `[sarmal] trailColor is a single color but trailStyle is "${trailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient.`,
520
+ `[sarmal] trailColor is a single color but trailStyle is "${trailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient.`
538
521
  );
539
522
  }
540
523
  }
@@ -544,7 +527,7 @@ var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160)
544
527
  var WHITE_HEX = "#ffffff";
545
528
  function hexToRgbComponents(hex) {
546
529
  const n = parseInt(hex.slice(1), 16);
547
- return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
530
+ return `${n >> 16},${n >> 8 & 255},${n & 255}`;
548
531
  }
549
532
  function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
550
533
  target.style.width = `${logicalWidth}px`;
@@ -588,6 +571,7 @@ function createRenderer(options) {
588
571
  let offsetY = 0;
589
572
  let animationId = null;
590
573
  let lastTime = 0;
574
+ let pausedByVisibility = false;
591
575
  let morphResolve = null;
592
576
  let morphReject = null;
593
577
  let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
@@ -670,7 +654,7 @@ function createRenderer(options) {
670
654
  i,
671
655
  trailCount,
672
656
  toX,
673
- toY,
657
+ toY
674
658
  );
675
659
  if (trailStyle === "default") {
676
660
  ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
@@ -781,6 +765,7 @@ function createRenderer(options) {
781
765
  cancelAnimationFrame(animationId);
782
766
  animationId = null;
783
767
  }
768
+ document.removeEventListener("visibilitychange", handleVisibilityChange);
784
769
  if (morphReject !== null) {
785
770
  morphReject(new Error("Instance destroyed during morph"));
786
771
  morphResolve = null;
@@ -834,10 +819,30 @@ function createRenderer(options) {
834
819
  if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
835
820
  warnIfTrailColorMismatch(trailColor, trailStyle);
836
821
  }
837
- },
822
+ }
838
823
  };
839
- if (shouldAutoStart) {
824
+ const pauseOnHidden = options.pauseOnHidden !== false;
825
+ function handleVisibilityChange() {
826
+ if (document.hidden) {
827
+ if (animationId !== null) {
828
+ instance.pause();
829
+ pausedByVisibility = true;
830
+ }
831
+ } else {
832
+ if (pausedByVisibility) {
833
+ pausedByVisibility = false;
834
+ instance.play();
835
+ }
836
+ }
837
+ }
838
+ if (pauseOnHidden) {
839
+ document.addEventListener("visibilitychange", handleVisibilityChange);
840
+ }
841
+ const actuallyAutoStart = shouldAutoStart && !(pauseOnHidden && document.hidden);
842
+ if (actuallyAutoStart) {
840
843
  instance.play();
844
+ } else if (shouldAutoStart) {
845
+ pausedByVisibility = true;
841
846
  }
842
847
  return instance;
843
848
  }
@@ -864,7 +869,7 @@ function sampleCurveSkeleton(curveDef) {
864
869
  const samples = Math.ceil(period * 50);
865
870
  const pts = Array.from({ length: samples });
866
871
  for (let i = 0; i < samples; i++) {
867
- const t = (i / (samples - 1)) * period;
872
+ const t = i / (samples - 1) * period;
868
873
  pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
869
874
  }
870
875
  return pts;
@@ -877,7 +882,7 @@ function createSVGRenderer(options) {
877
882
  const poolSize = engine.trailLength;
878
883
  if (poolSize > HIGH_TRAIL_LENGTH_THRESHOLD) {
879
884
  console.warn(
880
- `[sarmal] High trailLength in SVG renderer (${poolSize}). Consider using the canvas renderer for long trails.`,
885
+ `[sarmal] High trailLength in SVG renderer (${poolSize}). Consider using the canvas renderer for long trails.`
881
886
  );
882
887
  }
883
888
  let trailStyle = options.trailStyle ?? "default";
@@ -896,9 +901,9 @@ function createSVGRenderer(options) {
896
901
  return rect.width && rect.height ? Math.min(rect.width, rect.height) : 200;
897
902
  }
898
903
  const containerPx = getContainerPixelSize();
899
- const svgTrailMinWidth = (TRAIL_MIN_WIDTH * viewSize) / containerPx;
900
- const svgTrailMaxWidth = (TRAIL_MAX_WIDTH * viewSize) / containerPx;
901
- const svgSkeletonStrokeWidth = String((SKELETON_STROKE_WIDTH_PX * viewSize) / containerPx);
904
+ const svgTrailMinWidth = TRAIL_MIN_WIDTH * viewSize / containerPx;
905
+ const svgTrailMaxWidth = TRAIL_MAX_WIDTH * viewSize / containerPx;
906
+ const svgSkeletonStrokeWidth = String(SKELETON_STROKE_WIDTH_PX * viewSize / containerPx);
902
907
  headRadius = options.headRadius ?? SVG_DEFAULT_HEAD_RADIUS;
903
908
  container.setAttribute("viewBox", `0 0 ${viewSize} ${viewSize}`);
904
909
  container.setAttribute("role", "img");
@@ -986,7 +991,7 @@ function createSVGRenderer(options) {
986
991
  px,
987
992
  py,
988
993
  svgTrailMinWidth,
989
- svgTrailMaxWidth,
994
+ svgTrailMaxWidth
990
995
  );
991
996
  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`;
992
997
  trailPaths[i].setAttribute("d", d);
@@ -1013,8 +1018,8 @@ function createSVGRenderer(options) {
1013
1018
  }
1014
1019
  let animationId = null;
1015
1020
  let lastTime = 0;
1016
- const prefersReducedMotion =
1017
- typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
1021
+ let pausedByVisibility = false;
1022
+ const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
1018
1023
  let morphResolve = null;
1019
1024
  let morphReject = null;
1020
1025
  let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
@@ -1032,7 +1037,7 @@ function createSVGRenderer(options) {
1032
1037
  skeletonPathA.setAttribute("visibility", "visible");
1033
1038
  skeletonPathA.setAttribute(
1034
1039
  "stroke-opacity",
1035
- String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY),
1040
+ String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
1036
1041
  );
1037
1042
  }
1038
1043
  if (morphPathBBuilt) {
@@ -1104,6 +1109,7 @@ function createSVGRenderer(options) {
1104
1109
  cancelAnimationFrame(animationId);
1105
1110
  animationId = null;
1106
1111
  }
1112
+ document.removeEventListener("visibilitychange", handleVisibilityChange);
1107
1113
  if (morphReject !== null) {
1108
1114
  morphReject(new Error("Instance destroyed during morph"));
1109
1115
  morphResolve = null;
@@ -1185,10 +1191,30 @@ function createSVGRenderer(options) {
1185
1191
  if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
1186
1192
  warnIfTrailColorMismatch(trailColor, trailStyle);
1187
1193
  }
1188
- },
1194
+ }
1189
1195
  };
1190
- if (shouldAutoStart) {
1196
+ const pauseOnHidden = options.pauseOnHidden !== false;
1197
+ function handleVisibilityChange() {
1198
+ if (document.hidden) {
1199
+ if (animationId !== null) {
1200
+ instance.pause();
1201
+ pausedByVisibility = true;
1202
+ }
1203
+ } else {
1204
+ if (pausedByVisibility) {
1205
+ pausedByVisibility = false;
1206
+ instance.play();
1207
+ }
1208
+ }
1209
+ }
1210
+ if (pauseOnHidden) {
1211
+ document.addEventListener("visibilitychange", handleVisibilityChange);
1212
+ }
1213
+ const actuallyAutoStart = shouldAutoStart && !(pauseOnHidden && document.hidden);
1214
+ if (actuallyAutoStart) {
1191
1215
  instance.play();
1216
+ } else if (shouldAutoStart) {
1217
+ pausedByVisibility = true;
1192
1218
  }
1193
1219
  return instance;
1194
1220
  }
@@ -1201,22 +1227,19 @@ function createSarmalSVG(container, curveDef, options) {
1201
1227
  // src/curves/artemis2.ts
1202
1228
  var TWO_PI2 = Math.PI * 2;
1203
1229
  function artemis2Fn(t, _time, _params) {
1204
- const a = 0.35,
1205
- b = 0.15,
1206
- ox = 0.175;
1207
- const s = Math.sin(t),
1208
- c = Math.cos(t);
1230
+ const a = 0.35, b = 0.15, ox = 0.175;
1231
+ const s = Math.sin(t), c = Math.cos(t);
1209
1232
  const denom = 1 + s * s;
1210
1233
  return {
1211
- x: (c * (1 + a * c)) / denom - ox,
1212
- y: (s * c * (1 + b * c)) / denom,
1234
+ x: c * (1 + a * c) / denom - ox,
1235
+ y: s * c * (1 + b * c) / denom
1213
1236
  };
1214
1237
  }
1215
1238
  var artemis2 = {
1216
1239
  name: "Artemis II",
1217
1240
  fn: artemis2Fn,
1218
1241
  period: TWO_PI2,
1219
- speed: 0.7,
1242
+ speed: 0.7
1220
1243
  };
1221
1244
 
1222
1245
  // src/curves/astroid.ts
@@ -1226,14 +1249,14 @@ function astroidFn(t, _time, _params) {
1226
1249
  const s = Math.sin(t);
1227
1250
  return {
1228
1251
  x: c * c * c,
1229
- y: s * s * s,
1252
+ y: s * s * s
1230
1253
  };
1231
1254
  }
1232
1255
  var astroid = {
1233
1256
  name: "Astroid",
1234
1257
  fn: astroidFn,
1235
1258
  period: TWO_PI3,
1236
- speed: 1.1,
1259
+ speed: 1.1
1237
1260
  };
1238
1261
 
1239
1262
  // src/curves/deltoid.ts
@@ -1241,14 +1264,14 @@ var TWO_PI4 = Math.PI * 2;
1241
1264
  function deltoidFn(t, _time, _params) {
1242
1265
  return {
1243
1266
  x: 2 * Math.cos(t) + Math.cos(2 * t),
1244
- y: 2 * Math.sin(t) - Math.sin(2 * t),
1267
+ y: 2 * Math.sin(t) - Math.sin(2 * t)
1245
1268
  };
1246
1269
  }
1247
1270
  var deltoid = {
1248
1271
  name: "Deltoid",
1249
1272
  fn: deltoidFn,
1250
1273
  period: TWO_PI4,
1251
- speed: 0.9,
1274
+ speed: 0.9
1252
1275
  };
1253
1276
 
1254
1277
  // src/curves/epicycloid3.ts
@@ -1256,14 +1279,14 @@ var TWO_PI5 = Math.PI * 2;
1256
1279
  function epicycloid3Fn(t, _time, _params) {
1257
1280
  return {
1258
1281
  x: 4 * Math.cos(t) - Math.cos(4 * t),
1259
- y: 4 * Math.sin(t) - Math.sin(4 * t),
1282
+ y: 4 * Math.sin(t) - Math.sin(4 * t)
1260
1283
  };
1261
1284
  }
1262
1285
  var epicycloid3 = {
1263
1286
  name: "Epicycloid (n=3)",
1264
1287
  fn: epicycloid3Fn,
1265
1288
  period: TWO_PI5,
1266
- speed: 0.75,
1289
+ speed: 0.75
1267
1290
  };
1268
1291
 
1269
1292
  // src/curves/epitrochoid7.ts
@@ -1272,14 +1295,14 @@ function epitrochoid7Fn(t, _time, _params) {
1272
1295
  const d = 1 + 0.55 * Math.sin(t * 0.5);
1273
1296
  return {
1274
1297
  x: 7 * Math.cos(t) - d * Math.cos(7 * t),
1275
- y: 7 * Math.sin(t) - d * Math.sin(7 * t),
1298
+ y: 7 * Math.sin(t) - d * Math.sin(7 * t)
1276
1299
  };
1277
1300
  }
1278
1301
  function epitrochoid7SkeletonFn(t) {
1279
1302
  const d = 1.275;
1280
1303
  return {
1281
1304
  x: 7 * Math.cos(t) - d * Math.cos(7 * t),
1282
- y: 7 * Math.sin(t) - d * Math.sin(7 * t),
1305
+ y: 7 * Math.sin(t) - d * Math.sin(7 * t)
1283
1306
  };
1284
1307
  }
1285
1308
  var epitrochoid7 = {
@@ -1287,7 +1310,7 @@ var epitrochoid7 = {
1287
1310
  fn: epitrochoid7Fn,
1288
1311
  period: TWO_PI6,
1289
1312
  speed: 1.4,
1290
- skeletonFn: epitrochoid7SkeletonFn,
1313
+ skeletonFn: epitrochoid7SkeletonFn
1291
1314
  };
1292
1315
 
1293
1316
  // src/curves/lissajous32.ts
@@ -1296,7 +1319,7 @@ function lissajous32Fn(t, time, _params) {
1296
1319
  const phi = time * 0.45;
1297
1320
  return {
1298
1321
  x: Math.sin(3 * t + phi),
1299
- y: Math.sin(2 * t),
1322
+ y: Math.sin(2 * t)
1300
1323
  };
1301
1324
  }
1302
1325
  var lissajous32 = {
@@ -1304,7 +1327,7 @@ var lissajous32 = {
1304
1327
  fn: lissajous32Fn,
1305
1328
  period: TWO_PI7,
1306
1329
  speed: 2,
1307
- skeleton: "live",
1330
+ skeleton: "live"
1308
1331
  };
1309
1332
 
1310
1333
  // src/curves/lissajous43.ts
@@ -1313,7 +1336,7 @@ function lissajous43Fn(t, time, _params) {
1313
1336
  const phi = time * 0.38;
1314
1337
  return {
1315
1338
  x: Math.sin(4 * t + phi),
1316
- y: Math.sin(3 * t),
1339
+ y: Math.sin(3 * t)
1317
1340
  };
1318
1341
  }
1319
1342
  var lissajous43 = {
@@ -1321,18 +1344,17 @@ var lissajous43 = {
1321
1344
  fn: lissajous43Fn,
1322
1345
  period: TWO_PI8,
1323
1346
  speed: 1.8,
1324
- skeleton: "live",
1347
+ skeleton: "live"
1325
1348
  };
1326
1349
 
1327
1350
  // src/curves/lame.ts
1328
1351
  var TWO_PI9 = Math.PI * 2;
1329
1352
  function lameFn(t, time, _params) {
1330
1353
  const p = 1.75 + 1.25 * Math.sin(time * 0.48);
1331
- const c = Math.cos(t),
1332
- s = Math.sin(t);
1354
+ const c = Math.cos(t), s = Math.sin(t);
1333
1355
  return {
1334
1356
  x: Math.sign(c) * Math.pow(Math.abs(c), p),
1335
- y: Math.sign(s) * Math.pow(Math.abs(s), p),
1357
+ y: Math.sign(s) * Math.pow(Math.abs(s), p)
1336
1358
  };
1337
1359
  }
1338
1360
  var lame = {
@@ -1340,7 +1362,7 @@ var lame = {
1340
1362
  fn: lameFn,
1341
1363
  period: TWO_PI9,
1342
1364
  speed: 1,
1343
- skeleton: "live",
1365
+ skeleton: "live"
1344
1366
  };
1345
1367
 
1346
1368
  // src/curves/rose3.ts
@@ -1349,14 +1371,14 @@ function rose3Fn(t, _time, _params) {
1349
1371
  const r = Math.cos(3 * t);
1350
1372
  return {
1351
1373
  x: r * Math.cos(t),
1352
- y: r * Math.sin(t),
1374
+ y: r * Math.sin(t)
1353
1375
  };
1354
1376
  }
1355
1377
  var rose3 = {
1356
1378
  name: "Rose (n=3)",
1357
1379
  fn: rose3Fn,
1358
1380
  period: TWO_PI10,
1359
- speed: 1.15,
1381
+ speed: 1.15
1360
1382
  };
1361
1383
 
1362
1384
  // src/curves/rose5.ts
@@ -1365,87 +1387,78 @@ function rose5Fn(t, _time, _params) {
1365
1387
  const r = Math.cos(5 * t);
1366
1388
  return {
1367
1389
  x: r * Math.cos(t),
1368
- y: r * Math.sin(t),
1390
+ y: r * Math.sin(t)
1369
1391
  };
1370
1392
  }
1371
1393
  var rose5 = {
1372
1394
  name: "Rose (n=5)",
1373
1395
  fn: rose5Fn,
1374
1396
  period: TWO_PI11,
1375
- speed: 1,
1397
+ speed: 1
1376
1398
  };
1377
1399
 
1378
1400
  // src/curves/rose52.ts
1379
1401
  var FOUR_PI = Math.PI * 4;
1380
1402
  function rose52Fn(t, _time, _params) {
1381
- const r = Math.cos((5 / 2) * t);
1403
+ const r = Math.cos(5 / 2 * t);
1382
1404
  return {
1383
1405
  x: r * Math.cos(t),
1384
- y: r * Math.sin(t),
1406
+ y: r * Math.sin(t)
1385
1407
  };
1386
1408
  }
1387
1409
  var rose52 = {
1388
1410
  name: "Rose (n=5/2)",
1389
1411
  fn: rose52Fn,
1390
1412
  period: FOUR_PI,
1391
- speed: 0.8,
1413
+ speed: 0.8
1392
1414
  };
1393
1415
 
1394
1416
  // src/curves/star.ts
1395
1417
  var TWO_PI12 = Math.PI * 2;
1396
1418
  function starFn(t, _time, _params) {
1397
- const r =
1398
- Math.abs(Math.cos((5 / 2) * t)) +
1399
- 0.35 * Math.abs(Math.cos((15 / 2) * t)) +
1400
- 0.15 * Math.abs(Math.cos((25 / 2) * t));
1419
+ const r = Math.abs(Math.cos(5 / 2 * t)) + 0.35 * Math.abs(Math.cos(15 / 2 * t)) + 0.15 * Math.abs(Math.cos(25 / 2 * t));
1401
1420
  return {
1402
1421
  x: r * Math.cos(t),
1403
- y: r * Math.sin(t),
1422
+ y: r * Math.sin(t)
1404
1423
  };
1405
1424
  }
1406
1425
  var star = {
1407
1426
  name: "Star",
1408
1427
  fn: starFn,
1409
1428
  period: TWO_PI12,
1410
- speed: 1,
1429
+ speed: 1
1411
1430
  };
1412
1431
 
1413
1432
  // src/curves/star4.ts
1414
1433
  var TWO_PI13 = Math.PI * 2;
1415
1434
  function star4Fn(t, _time, _params) {
1416
- const r =
1417
- Math.abs(Math.cos(2 * t)) +
1418
- 0.35 * Math.abs(Math.cos(6 * t)) +
1419
- 0.15 * Math.abs(Math.cos(10 * t));
1435
+ const r = Math.abs(Math.cos(2 * t)) + 0.35 * Math.abs(Math.cos(6 * t)) + 0.15 * Math.abs(Math.cos(10 * t));
1420
1436
  return {
1421
1437
  x: r * Math.cos(t),
1422
- y: r * Math.sin(t),
1438
+ y: r * Math.sin(t)
1423
1439
  };
1424
1440
  }
1425
1441
  var star4 = {
1426
1442
  name: "Star (4-arm)",
1427
1443
  fn: star4Fn,
1428
1444
  period: TWO_PI13,
1429
- speed: 1,
1445
+ speed: 1
1430
1446
  };
1431
1447
 
1432
1448
  // src/curves/star7.ts
1433
1449
  var TWO_PI14 = Math.PI * 2;
1434
1450
  function star7Fn(t, _time, _params) {
1435
- const r =
1436
- Math.abs(Math.cos((7 / 2) * t)) +
1437
- 0.35 * Math.abs(Math.cos((21 / 2) * t)) +
1438
- 0.15 * Math.abs(Math.cos((35 / 2) * t));
1451
+ const r = Math.abs(Math.cos(7 / 2 * t)) + 0.35 * Math.abs(Math.cos(21 / 2 * t)) + 0.15 * Math.abs(Math.cos(35 / 2 * t));
1439
1452
  return {
1440
1453
  x: r * Math.cos(t),
1441
- y: r * Math.sin(t),
1454
+ y: r * Math.sin(t)
1442
1455
  };
1443
1456
  }
1444
1457
  var star7 = {
1445
1458
  name: "Star (7-arm)",
1446
1459
  fn: star7Fn,
1447
1460
  period: TWO_PI14,
1448
- speed: 1,
1461
+ speed: 1
1449
1462
  };
1450
1463
 
1451
1464
  // src/curves/index.ts
@@ -1463,7 +1476,7 @@ var curves = {
1463
1476
  lissajous32,
1464
1477
  lissajous43,
1465
1478
  epicycloid3,
1466
- lame,
1479
+ lame
1467
1480
  };
1468
1481
 
1469
1482
  // src/index.ts
@@ -1480,21 +1493,22 @@ function parseTrailColor(value) {
1480
1493
  if (Array.isArray(parsed)) {
1481
1494
  return parsed;
1482
1495
  }
1483
- } catch {}
1496
+ } catch {
1497
+ }
1484
1498
  return value;
1485
1499
  }
1486
1500
  function buildOptions(el2) {
1487
1501
  return {
1488
- ...(el2.dataset.trailColor && {
1489
- trailColor: parseTrailColor(el2.dataset.trailColor),
1490
- }),
1491
- ...(el2.dataset.skeletonColor && { skeletonColor: el2.dataset.skeletonColor }),
1492
- ...(el2.dataset.headColor && { headColor: el2.dataset.headColor }),
1493
- ...(el2.dataset.headRadius && { headRadius: parseFloat(el2.dataset.headRadius) }),
1494
- ...(el2.dataset.trailLength && { trailLength: parseInt(el2.dataset.trailLength, 10) }),
1495
- ...(el2.dataset.trailStyle && {
1496
- trailStyle: el2.dataset.trailStyle,
1497
- }),
1502
+ ...el2.dataset.trailColor && {
1503
+ trailColor: parseTrailColor(el2.dataset.trailColor)
1504
+ },
1505
+ ...el2.dataset.skeletonColor && { skeletonColor: el2.dataset.skeletonColor },
1506
+ ...el2.dataset.headColor && { headColor: el2.dataset.headColor },
1507
+ ...el2.dataset.headRadius && { headRadius: parseFloat(el2.dataset.headRadius) },
1508
+ ...el2.dataset.trailLength && { trailLength: parseInt(el2.dataset.trailLength, 10) },
1509
+ ...el2.dataset.trailStyle && {
1510
+ trailStyle: el2.dataset.trailStyle
1511
+ }
1498
1512
  };
1499
1513
  }
1500
1514
  function init() {
@@ -1509,10 +1523,7 @@ function init() {
1509
1523
  return console.error(`[sarmal] "${curveName}" is not a valid curve name`);
1510
1524
  }
1511
1525
  const options = buildOptions(el2);
1512
- const instance =
1513
- el2 instanceof HTMLCanvasElement
1514
- ? createSarmal(el2, curveDef, options)
1515
- : createSarmalSVG(el2, curveDef, options);
1526
+ const instance = el2 instanceof HTMLCanvasElement ? createSarmal(el2, curveDef, options) : createSarmalSVG(el2, curveDef, options);
1516
1527
  if (el2.dataset.speed) {
1517
1528
  instance.setSpeed(parseFloat(el2.dataset.speed));
1518
1529
  }
@@ -1528,4 +1539,4 @@ if (document.readyState === "loading") {
1528
1539
 
1529
1540
  export { init };
1530
1541
  //# sourceMappingURL=auto-init.js.map
1531
- //# sourceMappingURL=auto-init.js.map
1542
+ //# sourceMappingURL=auto-init.js.map