@slithy/prim-lib 0.8.2 → 0.9.1

package/dist/index.js

@@ -32,6 +32,42 @@ function clamp(x, min, max) {
   return Math.max(min, Math.min(max, x));
 }
 __name(clamp, "clamp");
+function rectCorners(cx, cy, hw, hh, angle) {
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  return [
+    [cx - hw * cos + hh * sin, cy - hw * sin - hh * cos],
+    [cx + hw * cos + hh * sin, cy + hw * sin - hh * cos],
+    [cx + hw * cos - hh * sin, cy + hw * sin + hh * cos],
+    [cx - hw * cos - hh * sin, cy - hw * sin + hh * cos]
+  ];
+}
+__name(rectCorners, "rectCorners");
+function regularPolygonPoints(cx, cy, sides, angle, radius) {
+  return Array.from({ length: sides }, (_, i) => {
+    const a = angle + i * 2 * Math.PI / sides;
+    const r = typeof radius === "function" ? radius(i) : radius;
+    return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+  });
+}
+__name(regularPolygonPoints, "regularPolygonPoints");
+function bboxOfPoints(points) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const [x, y] of points) {
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+  }
+  return { left: minX, top: minY, width: maxX - minX || 1, height: maxY - minY || 1 };
+}
+__name(bboxOfPoints, "bboxOfPoints");
+function randomPolarOffset(scale) {
+  const angle = Math.random() * 2 * Math.PI;
+  const radius = Math.random() * scale;
+  return [~~(radius * Math.cos(angle)), ~~(radius * Math.sin(angle))];
+}
+__name(randomPolarOffset, "randomPolarOffset");
 function clampColor(x) {
   return clamp(x, 0, 255);
 }
@@ -67,13 +103,19 @@ function getFill(data) {
       if (x > 0 && y > 0 && x < w - 1 && y < h - 1) {
         continue;
       }
-      count++;
       i = 4 * (x + y * w);
+      if (d[i + 3] === 0) {
+        continue;
+      }
+      count++;
       rgb[0] += d[i];
       rgb[1] += d[i + 1];
       rgb[2] += d[i + 2];
     }
   }
+  if (count === 0) {
+    return "rgb(255, 255, 255)";
+  }
   rgb = rgb.map((x) => ~~(x / count)).map(clampColor);
   return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
 }
@@ -172,16 +214,7 @@ var Canvas = class _Canvas {
   static svgRoot(width, height, fill) {
     const node = document.createElementNS(SVGNS, "svg");
     node.setAttribute("viewBox", `0 0 ${width} ${height}`);
-    node.setAttribute("clip-path", "url(#clip)");
-    const defs = document.createElementNS(SVGNS, "defs");
-    node.appendChild(defs);
-    const cp = document.createElementNS(SVGNS, "clipPath");
-    defs.appendChild(cp);
-    cp.setAttribute("id", "clip");
-    cp.setAttribute("clipPathUnits", "objectBoundingBox");
-    let rect = svgRect(width, height);
-    cp.appendChild(rect);
-    rect = svgRect(width, height);
+    const rect = svgRect(width, height);
     rect.setAttribute("fill", fill);
     node.appendChild(rect);
     return node;
@@ -190,14 +223,14 @@ var Canvas = class _Canvas {
     if (svg) {
       return this.svgRoot(cfg.width, cfg.height, cfg.outputFill ?? cfg.fill);
     } else {
-      return new this(cfg.width, cfg.height).fill(cfg.fill);
+      return new this(cfg.width, cfg.height, true).fill(cfg.fill);
     }
   }
   static original(url, cfg) {
     if (url == "test") {
       return Promise.resolve(this.test(cfg));
     }
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       const img = new Image();
       if (!url.startsWith("blob:") && !url.startsWith("data:")) {
         img.crossOrigin = "anonymous";
@@ -207,12 +240,12 @@ var Canvas = class _Canvas {
         const w = img.naturalWidth;
         const h = img.naturalHeight;
         const computeScale = getScale(w, h, cfg.computeSize, cfg.allowUpscale);
-        cfg.width = w / computeScale;
-        cfg.height = h / computeScale;
+        cfg.width = Math.round(w / computeScale);
+        cfg.height = Math.round(h / computeScale);
         const viewScale = getScale(w, h, cfg.viewSize, cfg.allowUpscale);
         cfg.scale = computeScale / viewScale;
         const fullCfg = { ...cfg, width: cfg.width, height: cfg.height };
-        const canvas = this.empty(fullCfg);
+        const canvas = new this(fullCfg.width, fullCfg.height, true);
         canvas.ctx.drawImage(img, 0, 0, fullCfg.width, fullCfg.height);
         if (cfg.fill === "transparent") {
           cfg.outputFill = "transparent";
@@ -221,11 +254,15 @@ var Canvas = class _Canvas {
         if (cfg.fill === "auto") {
           cfg.fill = getFill(canvas.getImageData());
         }
+        canvas.ctx.globalCompositeOperation = "destination-over";
+        canvas.ctx.fillStyle = cfg.fill;
+        canvas.ctx.fillRect(0, 0, fullCfg.width, fullCfg.height);
+        canvas.ctx.globalCompositeOperation = "source-over";
+        canvas._imageData = null;
         resolve(canvas);
       };
-      img.onerror = (e) => {
-        console.error(e);
-        alert("The image URL cannot be loaded. Does the server support CORS?");
+      img.onerror = () => {
+        reject(new Error("The image URL cannot be loaded. Does the server support CORS?"));
       };
     });
   }
@@ -233,12 +270,12 @@ var Canvas = class _Canvas {
     const w = bitmap.width;
     const h = bitmap.height;
     const computeScale = getScale(w, h, cfg.computeSize, cfg.allowUpscale);
-    cfg.width = w / computeScale;
-    cfg.height = h / computeScale;
+    cfg.width = Math.round(w / computeScale);
+    cfg.height = Math.round(h / computeScale);
     const viewScale = getScale(w, h, cfg.viewSize, cfg.allowUpscale);
     cfg.scale = computeScale / viewScale;
     const fullCfg = { ...cfg, width: cfg.width, height: cfg.height };
-    const canvas = this.empty(fullCfg);
+    const canvas = new this(fullCfg.width, fullCfg.height, true);
     canvas.ctx.drawImage(bitmap, 0, 0, fullCfg.width, fullCfg.height);
     if (cfg.fill === "transparent") {
       cfg.outputFill = "transparent";
@@ -247,6 +284,11 @@ var Canvas = class _Canvas {
     if (cfg.fill === "auto") {
       cfg.fill = getFill(canvas.getImageData());
     }
+    canvas.ctx.globalCompositeOperation = "destination-over";
+    canvas.ctx.fillStyle = cfg.fill;
+    canvas.ctx.fillRect(0, 0, fullCfg.width, fullCfg.height);
+    canvas.ctx.globalCompositeOperation = "source-over";
+    canvas._imageData = null;
     return canvas;
   }
   static test(cfg) {
@@ -280,22 +322,27 @@ var Canvas = class _Canvas {
       el.width = width;
       el.height = height;
       this.node = el;
-      this.ctx = el.getContext("2d", { willReadFrequently });
+      const ctx = el.getContext("2d", { willReadFrequently });
+      if (!ctx) throw new Error("Failed to acquire 2d rendering context");
+      this.ctx = ctx;
     } else {
       const el = new OffscreenCanvas(width, height);
       this.node = el;
-      this.ctx = el.getContext("2d", { willReadFrequently });
+      const ctx = el.getContext("2d", { willReadFrequently });
+      if (!ctx) throw new Error("Failed to acquire 2d rendering context");
+      this.ctx = ctx;
     }
     this._imageData = null;
   }
   clone() {
-    const other = new _Canvas(this.node.width, this.node.height);
+    const other = new _Canvas(this.node.width, this.node.height, true);
     other.ctx.drawImage(this.node, 0, 0);
     return other;
   }
   fill(color) {
     this.ctx.fillStyle = color;
     this.ctx.fillRect(0, 0, this.node.width, this.node.height);
+    this._imageData = null;
     return this;
   }
   getImageData() {
@@ -313,7 +360,39 @@ var Canvas = class _Canvas {
     const difference2 = this.difference(otherCanvas);
     return differenceToDistance(difference2, this.node.width * this.node.height);
   }
+  patchImageData(offset, shapeData, color) {
+    if (!this._imageData) return;
+    const [cr, cg, cb] = color;
+    const dst = this._imageData.data;
+    const src = shapeData.data;
+    const sw = shapeData.width, sh = shapeData.height;
+    const fw = this._imageData.width, fh = this._imageData.height;
+    for (let sy = 0; sy < sh; sy++) {
+      const fy = sy + offset.top;
+      if (fy < 0 || fy >= fh) continue;
+      for (let sx = 0; sx < sw; sx++) {
+        const fx = sx + offset.left;
+        if (fx < 0 || fx >= fw) continue;
+        const si = 4 * (sx + sy * sw);
+        const a = src[si + 3];
+        if (a === 0) continue;
+        const fi = 4 * (fx + fy * fw);
+        const alpha = a / 255, blend = 1 - alpha;
+        dst[fi] = cr * alpha + dst[fi] * blend;
+        dst[fi + 1] = cg * alpha + dst[fi + 1] * blend;
+        dst[fi + 2] = cb * alpha + dst[fi + 2] * blend;
+      }
+    }
+  }
   drawStep(step) {
+    if (this._imageData) {
+      try {
+        const shapeData = step.shape.rasterize(step.alpha).getImageData();
+        this.patchImageData(step.shape.bbox, shapeData, parseColor(step.color));
+      } catch {
+        this._imageData = null;
+      }
+    }
     this.ctx.globalAlpha = step.alpha;
     this.ctx.fillStyle = step.color;
     step.shape.render(this.ctx);
@@ -375,8 +454,8 @@ var Step = class _Step {
   }
   /* apply this step to a state to get a new state. call only after .compute */
   apply(state) {
-    const newCanvas = state.canvas.clone().drawStep(this);
-    return new State(state.target, newCanvas, this.distance);
+    state.canvas.drawStep(this);
+    return new State(state.target, state.canvas, this.distance);
   }
   /* find optimal color and compute the resulting distance */
   compute(state) {
@@ -451,7 +530,7 @@ var Step = class _Step {
   }
   /* return a slightly mutated step */
   mutate() {
-    const newShape = this.shape.mutate(this.cfg);
+    const newShape = this.shape.mutate();
     const mutated = new _Step(newShape, this.cfg);
     if (this.cfg.mutateAlpha) {
       const mutatedAlpha = this.alpha + (Math.random() - 0.5) * 0.08;
@@ -463,6 +542,15 @@ var Step = class _Step {
 
 // src/shape.ts
 var _rasterCanvas = null;
+var _glyphMeasureCanvas = null;
+function getGlyphMeasureCanvas() {
+  if (!_glyphMeasureCanvas) {
+    _glyphMeasureCanvas = new Canvas(1, 1);
+  }
+  return _glyphMeasureCanvas;
+}
+__name(getGlyphMeasureCanvas, "getGlyphMeasureCanvas");
+var BBOX_PAD = 1;
 var Shape = class {
   static {
     __name(this, "Shape");
@@ -490,7 +578,7 @@ var Shape = class {
   constructor(_w, _h) {
     this.bbox = { left: 0, top: 0, width: 0, height: 0 };
   }
-  mutate(_cfg) {
+  mutate() {
     return this;
   }
   toSVG() {
@@ -520,9 +608,41 @@ var Shape = class {
     const data = ctx.getImageData(0, 0, w, h);
     return { getImageData: /* @__PURE__ */ __name(() => data, "getImageData") };
   }
+  /* Grow a tight bbox by BBOX_PAD on all sides and snap to integer bounds.
+   * Integer left/top/width/height are required: computeColorAndDifferenceChange
+   * and rasterize index/translate a flat pixel array directly from these. */
+  setBbox(tight) {
+    const left = Math.floor(tight.left) - BBOX_PAD;
+    const top = Math.floor(tight.top) - BBOX_PAD;
+    const right = Math.ceil(tight.left + tight.width) + BBOX_PAD;
+    const bottom = Math.ceil(tight.top + tight.height) + BBOX_PAD;
+    this.bbox = { left, top, width: Math.max(1, right - left), height: Math.max(1, bottom - top) };
+    return this;
+  }
   render(_ctx) {
   }
 };
+var ConstrainedShape = class extends Shape {
+  static {
+    __name(this, "ConstrainedShape");
+  }
+  tonalRange;
+  invertTonal;
+  saturationRange;
+  invertSaturation;
+  hueCenter;
+  hueTolerance;
+  invertHue;
+  applyConstraints(opts) {
+    this.tonalRange = opts?.tonalRange;
+    this.invertTonal = opts?.invertTonal;
+    this.saturationRange = opts?.saturationRange;
+    this.invertSaturation = opts?.invertSaturation;
+    this.hueCenter = opts?.hueCenter;
+    this.hueTolerance = opts?.hueTolerance;
+    this.invertHue = opts?.invertHue;
+  }
+};
 var Polygon = class _Polygon extends Shape {
   static {
     __name(this, "Polygon");
@@ -557,33 +677,18 @@ var Polygon = class _Polygon extends Shape {
     path.setAttribute("d", `${d}Z`);
     return path;
   }
-  mutate(_cfg) {
+  mutate() {
     const clone = this._cloneEmpty();
     clone.points = this.points.map(([x, y]) => [x, y]);
     const index = Math.floor(Math.random() * this.points.length);
     const point = clone.points[index];
-    const angle = Math.random() * 2 * Math.PI;
-    const radius = Math.random() * 20;
-    point[0] += ~~(radius * Math.cos(angle));
-    point[1] += ~~(radius * Math.sin(angle));
+    const [dx, dy] = randomPolarOffset(20);
+    point[0] += dx;
+    point[1] += dy;
     return clone.computeBbox();
   }
   computeBbox() {
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const [x, y] of this.points) {
-      if (x < minX) minX = x;
-      if (y < minY) minY = y;
-      if (x > maxX) maxX = x;
-      if (y > maxY) maxY = y;
-    }
-    this.bbox = {
-      left: minX,
-      top: minY,
-      width: maxX - minX || 1,
-      /* fallback for deformed shapes */
-      height: maxY - minY || 1
-    };
-    return this;
+    return this.setBbox(bboxOfPoints(this.points));
   }
   _createPoints(w, h, count) {
     const first = Shape.randomPoint(w, h);
@@ -626,7 +731,7 @@ var Rectangle = class _Rectangle extends Polygon {
   toData(a, c) {
     return { t: "r", a, c, pts: this.points.map(([x, y]) => [x, y]) };
   }
-  mutate(_cfg) {
+  mutate() {
     const clone = this._cloneEmpty();
     clone.points = this.points.map(([x, y]) => [x, y]);
     const amount = ~~((Math.random() - 0.5) * 20);
@@ -695,17 +800,16 @@ var Ellipse = class _Ellipse extends Shape {
   toData(a, c) {
     return { t: "e", a, c, cx: this.center[0], cy: this.center[1], rx: this.rx, ry: this.ry };
   }
-  mutate(_cfg) {
+  mutate() {
     const clone = new _Ellipse(0, 0);
     clone.center = [this.center[0], this.center[1]];
     clone.rx = this.rx;
     clone.ry = this.ry;
     switch (Math.floor(Math.random() * 3)) {
       case 0: {
-        const angle = Math.random() * 2 * Math.PI;
-        const radius = Math.random() * 20;
-        clone.center[0] += ~~(radius * Math.cos(angle));
-        clone.center[1] += ~~(radius * Math.sin(angle));
+        const [dx, dy] = randomPolarOffset(20);
+        clone.center[0] += dx;
+        clone.center[1] += dy;
         break;
       }
       case 1:
@@ -720,13 +824,12 @@ var Ellipse = class _Ellipse extends Shape {
     return clone.computeBbox();
   }
   computeBbox() {
-    this.bbox = {
+    return this.setBbox({
       left: this.center[0] - this.rx,
       top: this.center[1] - this.ry,
       width: 2 * this.rx,
       height: 2 * this.ry
-    };
-    return this;
+    });
   }
 };
 var Circle = class _Circle extends Shape {
@@ -742,13 +845,12 @@ var Circle = class _Circle extends Shape {
     this.computeBbox();
   }
   computeBbox() {
-    this.bbox = {
+    return this.setBbox({
       left: this.center[0] - this.r,
       top: this.center[1] - this.r,
       width: 2 * this.r || 1,
       height: 2 * this.r || 1
-    };
-    return this;
+    });
   }
   render(ctx) {
     ctx.beginPath();
@@ -765,16 +867,15 @@ var Circle = class _Circle extends Shape {
   toData(a, c) {
     return { t: "c", a, c, cx: this.center[0], cy: this.center[1], r: this.r };
   }
-  mutate(_cfg) {
+  mutate() {
     const clone = new _Circle(0, 0);
     clone.center = [this.center[0], this.center[1]];
     clone.r = this.r;
     switch (Math.floor(Math.random() * 2)) {
       case 0: {
-        const angle = Math.random() * 2 * Math.PI;
-        const radius = Math.random() * 20;
-        clone.center[0] += ~~(radius * Math.cos(angle));
-        clone.center[1] += ~~(radius * Math.sin(angle));
+        const [dx, dy] = randomPolarOffset(20);
+        clone.center[0] += dx;
+        clone.center[1] += dy;
         break;
       }
       case 1:
@@ -800,16 +901,15 @@ var Glyph = class _Glyph extends Shape {
     this.computeBbox();
   }
   computeBbox() {
-    const tmp = new Canvas(1, 1);
+    const tmp = getGlyphMeasureCanvas();
     tmp.ctx.font = `${this.fontSize}px sans-serif`;
     const w = ~~tmp.ctx.measureText(this.text).width;
-    this.bbox = {
+    return this.setBbox({
       left: ~~(this.center[0] - w / 2),
       top: ~~(this.center[1] - this.fontSize / 2),
       width: w,
       height: this.fontSize
-    };
-    return this;
+    });
   }
   render(ctx) {
     ctx.textAlign = "center";
@@ -817,16 +917,15 @@ var Glyph = class _Glyph extends Shape {
     ctx.font = `${this.fontSize}px sans-serif`;
     ctx.fillText(this.text, this.center[0], this.center[1]);
   }
-  mutate(_cfg) {
+  mutate() {
     const clone = new _Glyph(0, 0, this.text);
     clone.center = [this.center[0], this.center[1]];
     clone.fontSize = this.fontSize;
     switch (Math.floor(Math.random() * 2)) {
       case 0: {
-        const angle = Math.random() * 2 * Math.PI;
-        const radius = Math.random() * 20;
-        clone.center[0] += ~~(radius * Math.cos(angle));
-        clone.center[1] += ~~(radius * Math.sin(angle));
+        const [dx, dy] = randomPolarOffset(20);
+        clone.center[0] += dx;
+        clone.center[1] += dy;
         break;
       }
       case 1:
@@ -848,7 +947,7 @@ var Glyph = class _Glyph extends Shape {
     return text;
   }
   toData(a, c) {
-    return { t: "sm", a, c, cx: this.center[0], cy: this.center[1], fs: this.fontSize, text: this.text };
+    return { t: "sm", a, c, cx: this.center[0], cy: this.center[1], fs: this.fontSize, text: this.text, fontFamily: "sans-serif" };
   }
 };
 var Square = class _Square extends Shape {
@@ -864,13 +963,12 @@ var Square = class _Square extends Shape {
     this.computeBbox();
   }
   computeBbox() {
-    this.bbox = {
+    return this.setBbox({
       left: this.center[0] - this.r,
       top: this.center[1] - this.r,
       width: 2 * this.r || 1,
       height: 2 * this.r || 1
-    };
-    return this;
+    });
   }
   render(ctx) {
     ctx.fillRect(this.center[0] - this.r, this.center[1] - this.r, 2 * this.r, 2 * this.r);
@@ -886,16 +984,15 @@ var Square = class _Square extends Shape {
   toData(a, c) {
     return { t: "s", a, c, cx: this.center[0], cy: this.center[1], r: this.r };
   }
-  mutate(_cfg) {
+  mutate() {
     const clone = new _Square(0, 0);
     clone.center = [this.center[0], this.center[1]];
     clone.r = this.r;
     switch (Math.floor(Math.random() * 2)) {
       case 0: {
-        const angle = Math.random() * 2 * Math.PI;
-        const radius = Math.random() * 20;
-        clone.center[0] += ~~(radius * Math.cos(angle));
-        clone.center[1] += ~~(radius * Math.sin(angle));
+        const [dx, dy] = randomPolarOffset(20);
+        clone.center[0] += dx;
+        clone.center[1] += dy;
         break;
       }
       case 1:
@@ -924,33 +1021,14 @@ var Hexagon = class _Hexagon extends Shape {
   }
   _points() {
     if (!this._cachedPoints) {
-      this._cachedPoints = Array.from({ length: 6 }, (_, i) => {
-        const a = this.angle + i * Math.PI / 3;
-        return [
-          ~~(this.center[0] + this.r * Math.cos(a)),
-          ~~(this.center[1] + this.r * Math.sin(a))
-        ];
-      });
+      this._cachedPoints = regularPolygonPoints(this.center[0], this.center[1], 6, this.angle, this.r);
     }
     return this._cachedPoints;
   }
   computeBbox() {
     this._cachedPoints = null;
     const pts = this._points();
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const [x, y] of pts) {
-      if (x < minX) minX = x;
-      if (y < minY) minY = y;
-      if (x > maxX) maxX = x;
-      if (y > maxY) maxY = y;
-    }
-    this.bbox = {
-      left: minX,
-      top: minY,
-      width: maxX - minX || 1,
-      height: maxY - minY || 1
-    };
-    return this;
+    return this.setBbox(bboxOfPoints(pts));
   }
   render(ctx) {
     const pts = this._points();
@@ -967,17 +1045,16 @@ var Hexagon = class _Hexagon extends Shape {
   toData(a, c) {
     return { t: "h", a, c, cx: this.center[0], cy: this.center[1], r: this.r, angle: this.angle };
   }
-  mutate(_cfg) {
+  mutate() {
     const clone = new _Hexagon(0, 0);
     clone.center = [this.center[0], this.center[1]];
     clone.r = this.r;
     clone.angle = this.angle;
     switch (Math.floor(Math.random() * 3)) {
       case 0: {
-        const a = Math.random() * 2 * Math.PI;
-        const d = Math.random() * 20;
-        clone.center[0] += ~~(d * Math.cos(a));
-        clone.center[1] += ~~(d * Math.sin(a));
+        const [dx, dy] = randomPolarOffset(20);
+        clone.center[0] += dx;
+        clone.center[1] += dy;
         break;
       }
       case 1:
@@ -1027,19 +1104,12 @@ function makeNGon(opts) {
   const startAngle = opts.startAngle ?? defaultAngle;
   if (sides < 3) throw new RangeError("makeNGon requires at least 3 sides");
   if (regular) {
-    class NGonRegular extends Shape {
+    class NGonRegular extends ConstrainedShape {
       static {
         __name(this, "NGonRegular");
       }
       static _ngonOpts = { sides, regular: true, rotatable, noise, sizeRange, mutationScale, startAngle, tonalRange: opts.tonalRange, invertTonal: opts.invertTonal, saturationRange: opts.saturationRange, invertSaturation: opts.invertSaturation, hueCenter: opts.hueCenter, hueTolerance: opts.hueTolerance, invertHue: opts.invertHue };
       static _shapeSpec = { f: "ngon", o: NGonRegular._ngonOpts };
-      tonalRange;
-      invertTonal;
-      saturationRange;
-      invertSaturation;
-      hueCenter;
-      hueTolerance;
-      invertHue;
       center;
       r;
       angle;
@@ -1047,13 +1117,7 @@ function makeNGon(opts) {
       _cachedPoints;
       constructor(w, h) {
         super(w, h);
-        this.tonalRange = opts.tonalRange;
-        this.invertTonal = opts.invertTonal;
-        this.saturationRange = opts.saturationRange;
-        this.invertSaturation = opts.invertSaturation;
-        this.hueCenter = opts.hueCenter;
-        this.hueTolerance = opts.hueTolerance;
-        this.invertHue = opts.invertHue;
+        this.applyConstraints(opts);
         this.center = Shape.randomPoint(w, h);
         this.r = Math.max(1, sizeRange[0] + ~~(Math.random() * (sizeRange[1] - sizeRange[0])));
         this.angle = rotatable ? Math.random() * (2 * Math.PI / sides) : startAngle;
@@ -1077,20 +1141,7 @@ function makeNGon(opts) {
       computeBbox() {
         this._cachedPoints = null;
         const pts = this._points();
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        for (const [x, y] of pts) {
-          if (x < minX) minX = x;
-          if (y < minY) minY = y;
-          if (x > maxX) maxX = x;
-          if (y > maxY) maxY = y;
-        }
-        this.bbox = {
-          left: minX,
-          top: minY,
-          width: maxX - minX || 1,
-          height: maxY - minY || 1
-        };
-        return this;
+        return this.setBbox(bboxOfPoints(pts));
       }
       render(ctx) {
         const pts = this._points();
@@ -1107,7 +1158,7 @@ function makeNGon(opts) {
       toData(a, c) {
         return { t: "p", a, c, pts: this._points().map(([x, y]) => [x, y]) };
       }
-      mutate(_cfg) {
+      mutate() {
         const clone = new NGonRegular(0, 0);
         clone.center = [this.center[0], this.center[1]];
         clone.r = this.r;
@@ -1116,10 +1167,9 @@ function makeNGon(opts) {
         const mutCount = 2 + (rotatable ? 1 : 0) + (noise > 0 ? 1 : 0);
         switch (Math.floor(Math.random() * mutCount)) {
           case 0: {
-            const a = Math.random() * 2 * Math.PI;
-            const d = Math.random() * mutationScale;
-            clone.center[0] += ~~(d * Math.cos(a));
-            clone.center[1] += ~~(d * Math.sin(a));
+            const [dx, dy] = randomPolarOffset(mutationScale);
+            clone.center[0] += dx;
+            clone.center[1] += dy;
             break;
           }
           case 1:
@@ -1145,29 +1195,16 @@ function makeNGon(opts) {
     }
     return NGonRegular;
   } else {
-    class NGonIrregular extends Shape {
+    class NGonIrregular extends ConstrainedShape {
       static {
         __name(this, "NGonIrregular");
       }
       static _ngonOpts = { sides, regular: false, convex, sizeRange, mutationScale, tonalRange: opts.tonalRange, invertTonal: opts.invertTonal, saturationRange: opts.saturationRange, invertSaturation: opts.invertSaturation, hueCenter: opts.hueCenter, hueTolerance: opts.hueTolerance, invertHue: opts.invertHue };
       static _shapeSpec = { f: "ngon", o: NGonIrregular._ngonOpts };
-      tonalRange;
-      invertTonal;
-      saturationRange;
-      invertSaturation;
-      hueCenter;
-      hueTolerance;
-      invertHue;
       points;
       constructor(w, h) {
         super(w, h);
-        this.tonalRange = opts.tonalRange;
-        this.invertTonal = opts.invertTonal;
-        this.saturationRange = opts.saturationRange;
-        this.invertSaturation = opts.invertSaturation;
-        this.hueCenter = opts.hueCenter;
-        this.hueTolerance = opts.hueTolerance;
-        this.invertHue = opts.invertHue;
+        this.applyConstraints(opts);
         const first = Shape.randomPoint(w, h);
         this.points = [first];
         for (let i = 1; i < sides; i++) {
@@ -1182,20 +1219,7 @@ function makeNGon(opts) {
         this.computeBbox();
       }
       computeBbox() {
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        for (const [x, y] of this.points) {
-          if (x < minX) minX = x;
-          if (y < minY) minY = y;
-          if (x > maxX) maxX = x;
-          if (y > maxY) maxY = y;
-        }
-        this.bbox = {
-          left: minX,
-          top: minY,
-          width: maxX - minX || 1,
-          height: maxY - minY || 1
-        };
-        return this;
+        return this.setBbox(bboxOfPoints(this.points));
       }
       render(ctx) {
         ctx.beginPath();
@@ -1212,15 +1236,14 @@ function makeNGon(opts) {
       toData(a, c) {
         return { t: "p", a, c, pts: this.points.map(([x, y]) => [x, y]) };
       }
-      mutate(_cfg) {
+      mutate() {
         const clone = new NGonIrregular(0, 0);
         clone.points = this.points.map(([x, y]) => [x, y]);
         const index = Math.floor(Math.random() * clone.points.length);
         const point = clone.points[index];
-        const angle = Math.random() * 2 * Math.PI;
-        const radius = Math.random() * mutationScale;
-        point[0] += ~~(radius * Math.cos(angle));
-        point[1] += ~~(radius * Math.sin(angle));
+        const [dx, dy] = randomPolarOffset(mutationScale);
+        point[0] += dx;
+        point[1] += dy;
         if (convex) clone.points = convexHull(clone.points);
         return clone.computeBbox();
       }
@@ -1235,32 +1258,19 @@ function makeRect(opts) {
   const aspectRatio = opts?.aspectRatio;
   const rotatable = opts?.rotatable ?? false;
   const mutationScale = opts?.mutationScale ?? 20;
-  class Rect extends Shape {
+  class Rect extends ConstrainedShape {
     static {
       __name(this, "Rect");
     }
     static _rectOpts = { widthRange, heightRange, aspectRatio, rotatable, mutationScale, tonalRange: opts?.tonalRange, invertTonal: opts?.invertTonal, saturationRange: opts?.saturationRange, invertSaturation: opts?.invertSaturation, hueCenter: opts?.hueCenter, hueTolerance: opts?.hueTolerance, invertHue: opts?.invertHue };
     static _shapeSpec = { f: "rect", o: Rect._rectOpts };
-    tonalRange;
-    invertTonal;
-    saturationRange;
-    invertSaturation;
-    hueCenter;
-    hueTolerance;
-    invertHue;
     center;
     hw;
     hh;
     angle;
     constructor(w, h) {
       super(w, h);
-      this.tonalRange = opts?.tonalRange;
-      this.invertTonal = opts?.invertTonal;
-      this.saturationRange = opts?.saturationRange;
-      this.invertSaturation = opts?.invertSaturation;
-      this.hueCenter = opts?.hueCenter;
-      this.hueTolerance = opts?.hueTolerance;
-      this.invertHue = opts?.invertHue;
+      this.applyConstraints(opts);
       this.center = Shape.randomPoint(w, h);
       this.hw = widthRange[0] + ~~(Math.random() * (widthRange[1] - widthRange[0]));
       if (aspectRatio !== void 0) {
@@ -1272,41 +1282,18 @@ function makeRect(opts) {
       this.computeBbox();
     }
     computeBbox() {
-      const cos = Math.abs(Math.cos(this.angle));
-      const sin = Math.abs(Math.sin(this.angle));
-      const w = ~~(this.hw * cos + this.hh * sin);
-      const h = ~~(this.hw * sin + this.hh * cos);
-      this.bbox = {
-        left: this.center[0] - w,
-        top: this.center[1] - h,
-        width: 2 * w || 1,
-        height: 2 * h || 1
-      };
-      return this;
+      const corners = rectCorners(this.center[0], this.center[1], this.hw, this.hh, this.angle);
+      return this.setBbox(bboxOfPoints(corners));
     }
     render(ctx) {
-      const cos = Math.cos(this.angle);
-      const sin = Math.sin(this.angle);
-      const corners = [
-        [this.center[0] - this.hw * cos + this.hh * sin, this.center[1] - this.hw * sin - this.hh * cos],
-        [this.center[0] + this.hw * cos + this.hh * sin, this.center[1] + this.hw * sin - this.hh * cos],
-        [this.center[0] + this.hw * cos - this.hh * sin, this.center[1] + this.hw * sin + this.hh * cos],
-        [this.center[0] - this.hw * cos - this.hh * sin, this.center[1] - this.hw * sin + this.hh * cos]
-      ];
+      const corners = rectCorners(this.center[0], this.center[1], this.hw, this.hh, this.angle);
       ctx.beginPath();
-      corners.forEach(([x, y], i) => i ? ctx.lineTo(~~x, ~~y) : ctx.moveTo(~~x, ~~y));
+      corners.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
       ctx.closePath();
       ctx.fill();
     }
     toSVG() {
-      const cos = Math.cos(this.angle);
-      const sin = Math.sin(this.angle);
-      const corners = [
-        [this.center[0] - this.hw * cos + this.hh * sin, this.center[1] - this.hw * sin - this.hh * cos],
-        [this.center[0] + this.hw * cos + this.hh * sin, this.center[1] + this.hw * sin - this.hh * cos],
-        [this.center[0] + this.hw * cos - this.hh * sin, this.center[1] + this.hw * sin + this.hh * cos],
-        [this.center[0] - this.hw * cos - this.hh * sin, this.center[1] - this.hw * sin + this.hh * cos]
-      ];
+      const corners = rectCorners(this.center[0], this.center[1], this.hw, this.hh, this.angle);
       const node = document.createElementNS(SVGNS, "polygon");
       node.setAttribute("points", corners.map((p) => p.join(",")).join(" "));
       return node;
@@ -1323,7 +1310,7 @@ function makeRect(opts) {
         angle: this.angle
       };
     }
-    mutate(_cfg) {
+    mutate() {
       const clone = new Rect(0, 0);
       clone.center = [this.center[0], this.center[1]];
       clone.hw = this.hw;
@@ -1332,10 +1319,9 @@ function makeRect(opts) {
       const mutCount = 2 + (rotatable ? 1 : 0) + (aspectRatio === void 0 ? 1 : 0);
       switch (Math.floor(Math.random() * mutCount)) {
         case 0: {
-          const a = Math.random() * 2 * Math.PI;
-          const d = Math.random() * mutationScale;
-          clone.center[0] += ~~(d * Math.cos(a));
-          clone.center[1] += ~~(d * Math.sin(a));
+          const [dx, dy] = randomPolarOffset(mutationScale);
+          clone.center[0] += dx;
+          clone.center[1] += dy;
           break;
         }
         case 1:
@@ -1369,42 +1355,28 @@ __name(makeRect, "makeRect");
 function makeCircle(opts) {
   const sizeRange = opts?.sizeRange ?? [1, 20];
   const mutationScale = opts?.mutationScale ?? 20;
-  class MadeCircle extends Shape {
+  class MadeCircle extends ConstrainedShape {
     static {
       __name(this, "MadeCircle");
     }
     static _circleOpts = { sizeRange, mutationScale, tonalRange: opts?.tonalRange, invertTonal: opts?.invertTonal, saturationRange: opts?.saturationRange, invertSaturation: opts?.invertSaturation, hueCenter: opts?.hueCenter, hueTolerance: opts?.hueTolerance, invertHue: opts?.invertHue };
     static _shapeSpec = { f: "circle", o: MadeCircle._circleOpts };
-    tonalRange;
-    invertTonal;
-    saturationRange;
-    invertSaturation;
-    hueCenter;
-    hueTolerance;
-    invertHue;
     center;
     r;
     constructor(w, h) {
       super(w, h);
-      this.tonalRange = opts?.tonalRange;
-      this.invertTonal = opts?.invertTonal;
-      this.saturationRange = opts?.saturationRange;
-      this.invertSaturation = opts?.invertSaturation;
-      this.hueCenter = opts?.hueCenter;
-      this.hueTolerance = opts?.hueTolerance;
-      this.invertHue = opts?.invertHue;
+      this.applyConstraints(opts);
       this.center = Shape.randomPoint(w, h);
       this.r = Math.max(1, sizeRange[0] + ~~(Math.random() * (sizeRange[1] - sizeRange[0])));
       this.computeBbox();
     }
     computeBbox() {
-      this.bbox = {
+      return this.setBbox({
         left: this.center[0] - this.r,
         top: this.center[1] - this.r,
         width: 2 * this.r || 1,
         height: 2 * this.r || 1
-      };
-      return this;
+      });
     }
     render(ctx) {
       ctx.beginPath();
@@ -1421,16 +1393,15 @@ function makeCircle(opts) {
     toData(a, c) {
       return { t: "c", a, c, cx: this.center[0], cy: this.center[1], r: this.r };
     }
-    mutate(_cfg) {
+    mutate() {
       const clone = new MadeCircle(0, 0);
       clone.center = [this.center[0], this.center[1]];
       clone.r = this.r;
       switch (Math.floor(Math.random() * 2)) {
         case 0: {
-          const angle = Math.random() * 2 * Math.PI;
-          const d = Math.random() * mutationScale;
-          clone.center[0] += ~~(d * Math.cos(angle));
-          clone.center[1] += ~~(d * Math.sin(angle));
+          const [dx, dy] = randomPolarOffset(mutationScale);
+          clone.center[0] += dx;
+          clone.center[1] += dy;
           break;
         }
         case 1:
@@ -1449,44 +1420,30 @@ function makeEllipse(opts) {
   const ryRange = opts?.ryRange ?? [1, 20];
   const aspectRatio = opts?.aspectRatio;
   const mutationScale = opts?.mutationScale ?? 20;
-  class MadeEllipse extends Shape {
+  class MadeEllipse extends ConstrainedShape {
     static {
       __name(this, "MadeEllipse");
     }
     static _ellipseOpts = { rxRange, ryRange, aspectRatio, mutationScale, tonalRange: opts?.tonalRange, invertTonal: opts?.invertTonal, saturationRange: opts?.saturationRange, invertSaturation: opts?.invertSaturation, hueCenter: opts?.hueCenter, hueTolerance: opts?.hueTolerance, invertHue: opts?.invertHue };
     static _shapeSpec = { f: "ellipse", o: MadeEllipse._ellipseOpts };
-    tonalRange;
-    invertTonal;
-    saturationRange;
-    invertSaturation;
-    hueCenter;
-    hueTolerance;
-    invertHue;
     center;
     rx;
     ry;
     constructor(w, h) {
       super(w, h);
-      this.tonalRange = opts?.tonalRange;
-      this.invertTonal = opts?.invertTonal;
-      this.saturationRange = opts?.saturationRange;
-      this.invertSaturation = opts?.invertSaturation;
-      this.hueCenter = opts?.hueCenter;
-      this.hueTolerance = opts?.hueTolerance;
-      this.invertHue = opts?.invertHue;
+      this.applyConstraints(opts);
       this.center = Shape.randomPoint(w, h);
       this.rx = Math.max(1, rxRange[0] + ~~(Math.random() * (rxRange[1] - rxRange[0])));
       this.ry = aspectRatio !== void 0 ? Math.max(1, Math.round(this.rx / aspectRatio)) : Math.max(1, ryRange[0] + ~~(Math.random() * (ryRange[1] - ryRange[0])));
       this.computeBbox();
     }
     computeBbox() {
-      this.bbox = {
+      return this.setBbox({
         left: this.center[0] - this.rx,
         top: this.center[1] - this.ry,
         width: 2 * this.rx || 1,
         height: 2 * this.ry || 1
-      };
-      return this;
+      });
     }
     render(ctx) {
       ctx.beginPath();
@@ -1504,7 +1461,7 @@ function makeEllipse(opts) {
     toData(a, c) {
       return { t: "e", a, c, cx: this.center[0], cy: this.center[1], rx: this.rx, ry: this.ry };
     }
-    mutate(_cfg) {
+    mutate() {
       const clone = new MadeEllipse(0, 0);
       clone.center = [this.center[0], this.center[1]];
       clone.rx = this.rx;
@@ -1512,10 +1469,9 @@ function makeEllipse(opts) {
       const mutCount = aspectRatio === void 0 ? 3 : 2;
       switch (Math.floor(Math.random() * mutCount)) {
         case 0: {
-          const angle = Math.random() * 2 * Math.PI;
-          const d = Math.random() * mutationScale;
-          clone.center[0] += ~~(d * Math.cos(angle));
-          clone.center[1] += ~~(d * Math.sin(angle));
+          const [dx, dy] = randomPolarOffset(mutationScale);
+          clone.center[0] += dx;
+          clone.center[1] += dy;
           break;
         }
         case 1:
@@ -1541,45 +1497,31 @@ function makeGlyph(opts) {
   const fontFamily = opts?.fontFamily ?? "sans-serif";
   const sizeRange = opts?.sizeRange ?? [10, 30];
   const mutationScale = opts?.mutationScale ?? 20;
-  class MadeGlyph extends Shape {
+  class MadeGlyph extends ConstrainedShape {
     static {
       __name(this, "MadeGlyph");
     }
     static _glyphOpts = { char, fontFamily, sizeRange, mutationScale, tonalRange: opts?.tonalRange, invertTonal: opts?.invertTonal, saturationRange: opts?.saturationRange, invertSaturation: opts?.invertSaturation, hueCenter: opts?.hueCenter, hueTolerance: opts?.hueTolerance, invertHue: opts?.invertHue };
     static _shapeSpec = { f: "glyph", o: MadeGlyph._glyphOpts };
-    tonalRange;
-    invertTonal;
-    saturationRange;
-    invertSaturation;
-    hueCenter;
-    hueTolerance;
-    invertHue;
     center;
     fontSize;
     constructor(w, h) {
       super(w, h);
-      this.tonalRange = opts?.tonalRange;
-      this.invertTonal = opts?.invertTonal;
-      this.saturationRange = opts?.saturationRange;
-      this.invertSaturation = opts?.invertSaturation;
-      this.hueCenter = opts?.hueCenter;
-      this.hueTolerance = opts?.hueTolerance;
-      this.invertHue = opts?.invertHue;
+      this.applyConstraints(opts);
       this.center = Shape.randomPoint(w, h);
-      this.fontSize = Math.max(sizeRange[0], sizeRange[0] + ~~(Math.random() * (sizeRange[1] - sizeRange[0])));
+      this.fontSize = sizeRange[0] + ~~(Math.random() * (sizeRange[1] - sizeRange[0]));
       this.computeBbox();
     }
     computeBbox() {
-      const tmp = new Canvas(1, 1);
+      const tmp = getGlyphMeasureCanvas();
       tmp.ctx.font = `${this.fontSize}px ${fontFamily}`;
       const w = ~~tmp.ctx.measureText(char).width;
-      this.bbox = {
+      return this.setBbox({
         left: ~~(this.center[0] - w / 2),
         top: ~~(this.center[1] - this.fontSize / 2),
         width: w || 1,
         height: this.fontSize
-      };
-      return this;
+      });
     }
     render(ctx) {
       ctx.textAlign = "center";
@@ -1599,18 +1541,17 @@ function makeGlyph(opts) {
       return text;
     }
     toData(a, c) {
-      return { t: "sm", a, c, cx: this.center[0], cy: this.center[1], fs: this.fontSize, text: char };
+      return { t: "sm", a, c, cx: this.center[0], cy: this.center[1], fs: this.fontSize, text: char, fontFamily };
     }
-    mutate(_cfg) {
+    mutate() {
       const clone = new MadeGlyph(0, 0);
       clone.center = [this.center[0], this.center[1]];
       clone.fontSize = this.fontSize;
       switch (Math.floor(Math.random() * 2)) {
         case 0: {
-          const angle = Math.random() * 2 * Math.PI;
-          const d = Math.random() * mutationScale;
-          clone.center[0] += ~~(d * Math.cos(angle));
-          clone.center[1] += ~~(d * Math.sin(angle));
+          const [dx, dy] = randomPolarOffset(mutationScale);
+          clone.center[0] += dx;
+          clone.center[1] += dy;
           break;
         }
         case 1: {
@@ -1643,6 +1584,7 @@ function buildStepPlan(cfg) {
   const { shapeTypes, shapeWeights, steps } = cfg;
   if (!shapeWeights || shapeWeights.length !== shapeTypes.length) return [];
   const total = shapeWeights.reduce((sum, w) => sum + w, 0);
+  if (total <= 0) return [];
   const floats = shapeWeights.map((w) => w / total * steps);
   const floors = floats.map(Math.floor);
   const remainder = steps - floors.reduce((s, n) => s + n, 0);
@@ -1663,6 +1605,7 @@ var Optimizer = class {
   cfg;
   state;
   onStep;
+  onError;
   _steps;
   _stopped;
   _paused;
@@ -1678,6 +1621,8 @@ var Optimizer = class {
     this._rejectionStreak = 0;
     this.onStep = () => {
     };
+    this.onError = () => {
+    };
     this._stepPlan = buildStepPlan(cfg);
     this._schedule = schedule;
   }
@@ -1714,7 +1659,10 @@ var Optimizer = class {
         this.onStep(null);
       }
       this._continue();
-    }).catch(() => this._continue());
+    }).catch((error) => {
+      this.onError(error);
+      this.stop();
+    });
   }
   _continue() {
     if (this._stopped || this._paused) {
@@ -1740,28 +1688,20 @@ var Optimizer = class {
     }
     return Promise.all(promises).then(() => bestStep);
   }
-  _optimizeStep(step) {
+  async _optimizeStep(step) {
     const LIMIT = this.cfg.mutations;
     let failedAttempts = 0;
-    let resolve;
     let bestStep = step;
-    const promise = new Promise((r) => resolve = r);
-    const tryMutation = /* @__PURE__ */ __name(() => {
-      if (failedAttempts >= LIMIT) {
-        return resolve(bestStep);
+    while (!this._stopped && failedAttempts < LIMIT) {
+      const mutatedStep = await bestStep.mutate().compute(this.state);
+      if (mutatedStep.distance < bestStep.distance) {
+        failedAttempts = 0;
+        bestStep = mutatedStep;
+      } else {
+        failedAttempts++;
       }
-      bestStep.mutate().compute(this.state).then((mutatedStep) => {
-        if (mutatedStep.distance < bestStep.distance) {
-          failedAttempts = 0;
-          bestStep = mutatedStep;
-        } else {
-          failedAttempts++;
-        }
-        tryMutation();
-      });
-    }, "tryMutation");
-    tryMutation();
-    return promise;
+    }
+    return bestStep;
   }
 };
 
@@ -1770,13 +1710,6 @@ function rgbString([r, g, b]) {
   return `rgb(${r}, ${g}, ${b})`;
 }
 __name(rgbString, "rgbString");
-function hexPoints(cx, cy, r, angle) {
-  return Array.from({ length: 6 }, (_, i) => {
-    const a = angle + i * Math.PI / 3;
-    return [~~(cx + r * Math.cos(a)), ~~(cy + r * Math.sin(a))];
-  });
-}
-__name(hexPoints, "hexPoints");
 function renderStepToCtx(data, ctx) {
   ctx.globalAlpha = data.a;
   ctx.fillStyle = rgbString(data.c);
@@ -1807,7 +1740,7 @@ function renderStepToCtx(data, ctx) {
       break;
     }
     case "h": {
-      const pts = hexPoints(data.cx, data.cy, data.r, data.angle);
+      const pts = regularPolygonPoints(data.cx, data.cy, 6, data.angle, data.r);
       ctx.beginPath();
       pts.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
       ctx.closePath();
@@ -1817,23 +1750,20 @@ function renderStepToCtx(data, ctx) {
     case "sm": {
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
-      ctx.font = `${data.fs}px sans-serif`;
+      ctx.font = `${data.fs}px ${data.fontFamily ?? "sans-serif"}`;
       ctx.fillText(data.text, data.cx, data.cy);
       break;
     }
     case "rc": {
-      const { cx, cy, hw, hh, angle } = data;
-      const cos = Math.cos(angle);
-      const sin = Math.sin(angle);
+      const corners = rectCorners(data.cx, data.cy, data.hw, data.hh, data.angle);
       ctx.beginPath();
-      ctx.moveTo(cx - hw * cos + hh * sin, cy - hw * sin - hh * cos);
-      ctx.lineTo(cx + hw * cos + hh * sin, cy + hw * sin - hh * cos);
-      ctx.lineTo(cx + hw * cos - hh * sin, cy + hw * sin + hh * cos);
-      ctx.lineTo(cx - hw * cos - hh * sin, cy - hw * sin + hh * cos);
+      corners.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
       ctx.closePath();
       ctx.fill();
       break;
     }
+    default:
+      throw new Error("renderStepToCtx: unknown step type");
   }
 }
 __name(renderStepToCtx, "renderStepToCtx");
@@ -1875,7 +1805,7 @@ function stepDataToSVGElement(data) {
     }
     case "h": {
       node = document.createElementNS(SVGNS, "polygon");
-      const pts = hexPoints(data.cx, data.cy, data.r, data.angle);
+      const pts = regularPolygonPoints(data.cx, data.cy, 6, data.angle, data.r);
       node.setAttribute("points", pts.map((p) => p.join(",")).join(" "));
       break;
     }
@@ -1885,26 +1815,20 @@ function stepDataToSVGElement(data) {
       node.setAttribute("text-anchor", "middle");
       node.setAttribute("dominant-baseline", "central");
       node.setAttribute("font-size", String(data.fs));
-      node.setAttribute("font-family", "sans-serif");
+      node.setAttribute("font-family", data.fontFamily ?? "sans-serif");
       node.setAttribute("x", String(data.cx));
       node.setAttribute("y", String(data.cy));
       break;
     }
     case "rc": {
-      const { cx, cy, hw, hh, angle } = data;
-      const cos = Math.cos(angle);
-      const sin = Math.sin(angle);
       const fmt = /* @__PURE__ */ __name((n) => n.toFixed(2), "fmt");
-      const pts = [
-        [cx - hw * cos + hh * sin, cy - hw * sin - hh * cos],
-        [cx + hw * cos + hh * sin, cy + hw * sin - hh * cos],
-        [cx + hw * cos - hh * sin, cy + hw * sin + hh * cos],
-        [cx - hw * cos - hh * sin, cy - hw * sin + hh * cos]
-      ];
+      const pts = rectCorners(data.cx, data.cy, data.hw, data.hh, data.angle);
       node = document.createElementNS(SVGNS, "polygon");
       node.setAttribute("points", pts.map(([x, y]) => `${fmt(x)},${fmt(y)}`).join(" "));
       break;
     }
+    default:
+      throw new Error("stepDataToSVGElement: unknown step type");
   }
   node.setAttribute("fill", color);
   node.setAttribute("fill-opacity", opacity);
@@ -1912,6 +1836,9 @@ function stepDataToSVGElement(data) {
 }
 __name(stepDataToSVGElement, "stepDataToSVGElement");
 function replayOutput(data) {
+  if (data.v !== 1) {
+    throw new Error(`Unsupported serialized output version: ${data.v}`);
+  }
   const fill = rgbString(data.fill);
   const vw = data.w * data.scale;
   const vh = data.h * data.scale;
@@ -1944,6 +1871,7 @@ export {
   State,
   Step,
   Triangle,
+  bboxOfPoints,
   clamp,
   clampColor,
   computeColorAndDifferenceChange,
@@ -1957,6 +1885,9 @@ export {
   makeNGon,
   makeRect,
   parseColor,
+  randomPolarOffset,
+  rectCorners,
+  regularPolygonPoints,
   renderStepToCtx,
   replayOutput,
   rgbToHsl,