@slithy/prim-lib 0.4.0 → 0.5.0

package/README.md

@@ -17,9 +17,52 @@ Reconstructs an image by iteratively placing geometric shapes. Each step evaluat
 
 ### Shapes
 
-- **`Shape`** — abstract base
+Fixed shapes (class constructors, pass directly in `shapeTypes`):
+
 - **`Triangle`**, **`Rectangle`**, **`Ellipse`**, **`Circle`**, **`Square`**, **`Hexagon`**, **`Glyph`**, **`Debug`**
 
+Configurable shapes (factory functions that return a constructor):
+
+- **`makeNGon(opts)`** — N-sided polygon; supports regular and irregular modes
+- **`makeRect(opts)`** — axis-aligned or rotatable rectangle with independent width/height control
+
+```ts
+shapeTypes: [Triangle, makeNGon({ sides: 6, regular: true }), makeRect({ aspectRatio: 1.78 })]
+```
+
+### Factory options
+
+**`NGonOptions`**
+
+```ts
+interface NGonOptions {
+  sides: number               // number of vertices (≥ 3, required)
+  regular?: boolean           // true = equidistant vertices (default: true)
+  rotatable?: boolean         // regular only: random rotation each instance (default: true)
+  startAngle?: number         // regular, non-rotatable only: fixed orientation in radians
+                              // default: -π/2 (top vertex pointing up)
+  noise?: number              // regular only: 0–1 vertex jitter (default: 0)
+  convex?: boolean            // irregular only: apply convex hull (default: false)
+  sizeRange?: [number, number] // vertex radius range in compute-space px (default: [1, 20])
+                               // regular: radius from center; irregular: scatter radius from first point
+  mutationScale?: number      // max mutation step size in px (default: 20)
+}
+```
+
+**`RectOptions`**
+
+```ts
+interface RectOptions {
+  widthRange?: [number, number]   // half-width range in compute-space px (default: [5, 40])
+  heightRange?: [number, number]  // half-height range in compute-space px (default: [5, 40])
+                                  // ignored when aspectRatio is set
+  aspectRatio?: number            // width ÷ height; locks proportions, derives hh from hw
+                                  // e.g. 1.78 for 16:9, 1.33 for 4:3, 1.0 for square
+  rotatable?: boolean             // random rotation per instance (default: false)
+  mutationScale?: number          // max mutation step size in px (default: 20)
+}
+```
+
 ### Types
 
 **`Cfg`** — runtime config (all fields required):
@@ -56,11 +99,13 @@ interface Cfg {
 type StepData =
   | { t: 't';  a: number; c: RGB; pts: [number, number][] }       // Triangle
   | { t: 'r';  a: number; c: RGB; pts: [number, number][] }       // Rectangle
+  | { t: 'p';  a: number; c: RGB; pts: [number, number][] }       // makeNGon (regular and irregular)
   | { t: 'e';  a: number; c: RGB; cx: number; cy: number; rx: number; ry: number } // Ellipse
   | { t: 'c';  a: number; c: RGB; cx: number; cy: number; r: number }              // Circle
   | { t: 's';  a: number; c: RGB; cx: number; cy: number; r: number }              // Square
   | { t: 'h';  a: number; c: RGB; cx: number; cy: number; r: number; angle: number } // Hexagon
   | { t: 'sm'; a: number; c: RGB; cx: number; cy: number; fs: number; text: string } // Glyph
+  | { t: 'rc'; a: number; c: RGB; cx: number; cy: number; hw: number; hh: number; angle: number } // makeRect
 ```
 
 **`SerializedOutput`** — compact, storage-ready representation of a completed run:
@@ -112,7 +157,7 @@ interface ReplayResult {
 - **Architecture split** — the original is a single-layer library. Here, `prim-lib` is the pure algorithm (no knowledge of how images arrive or where results go), and `prim-interface` is the adapter that wires it to the browser
 - **`PreCfg` / `Cfg` distinction** — `Canvas.original()` accepts `PreCfg` (optional `width`/`height`) and resolves to a fully-populated `Cfg`, making the config lifecycle explicit in the types
 - **Serialization** — `StepData` / `SerializedOutput` allow completed runs to be stored compactly and replayed via `replayOutput()` without re-running the optimizer
-- **Additional shapes** — `Circle`, `Square`, `Hexagon`, and `Glyph` are not in the original; `Circle` is a uniform-radius variant of `Ellipse`
+- **Additional shapes** — `Circle`, `Square`, `Hexagon`, and `Glyph` are not in the original; `Circle` is a uniform-radius variant of `Ellipse`; `makeNGon` and `makeRect` are configurable factory shapes also not in the original
 - **Shape weighting** — `shapeWeights` allows biased shape selection with a guaranteed distribution: the optimizer pre-allocates exact per-shape step counts (largest-remainder rounding) and shuffles them, so the final mix always matches the requested weights
 
 ## Architecture notes
@@ -122,3 +167,4 @@ interface ReplayResult {
 - When `shapeWeights` is provided (same length as `shapeTypes`), `Optimizer` builds a step plan at construction time: each shape type is allocated an exact number of slots proportional to its weight (using largest-remainder rounding), then the plan is Fisher-Yates shuffled. This guarantees the final shape distribution matches the weights, rather than just biasing random selection
 - `PreCfg` exists to bridge the gap between call time (dimensions unknown) and runtime (dimensions set by `Canvas.original()` or `Canvas.fromBitmap()`)
 - `Canvas.svgRoot()` is a static helper shared by `Canvas.empty()` and `replayOutput()` to create the SVG root with clip path and background fill; it uses DOM APIs and is main-thread only
+- Factory shapes (`makeNGon`, `makeRect`) capture their options in a closure and return an inner class. The class carries a static `_shapeSpec` property (`{ f: string, o: opts }`) used by `runWorker` to serialize and reconstruct the factory call inside the worker

package/dist/index.d.ts

@@ -68,6 +68,11 @@ type StepData = {
     a: number;
     c: RGB;
     pts: [number, number][];
+} | {
+    t: 'p';
+    a: number;
+    c: RGB;
+    pts: [number, number][];
 } | {
     t: 'e';
     a: number;
@@ -106,6 +111,15 @@ type StepData = {
     cy: number;
     fs: number;
     text: string;
+} | {
+    t: 'rc';
+    a: number;
+    c: RGB;
+    cx: number;
+    cy: number;
+    hw: number;
+    hh: number;
+    angle: number;
 };
 interface SerializedOutput {
     v: 1;
@@ -280,6 +294,25 @@ declare class Hexagon extends Shape {
     toData(a: number, c: RGB): StepData;
     mutate(_cfg?: Partial<Cfg>): ShapeInterface;
 }
+interface NGonOptions {
+    sides: number;
+    regular?: boolean;
+    rotatable?: boolean;
+    startAngle?: number;
+    convex?: boolean;
+    noise?: number;
+    sizeRange?: [number, number];
+    mutationScale?: number;
+}
+declare function makeNGon(opts: NGonOptions): new (w: number, h: number) => ShapeInterface;
+interface RectOptions {
+    widthRange?: [number, number];
+    heightRange?: [number, number];
+    aspectRatio?: number;
+    rotatable?: boolean;
+    mutationScale?: number;
+}
+declare function makeRect(opts?: Partial<RectOptions>): new (w: number, h: number) => ShapeInterface;
 declare class Debug extends Shape {
     constructor(w: number, h: number);
     render(ctx: CanvasRenderingContext2D): void;
@@ -308,4 +341,4 @@ interface ReplayResult {
 }
 declare function replayOutput(data: SerializedOutput): ReplayResult;
 
-export { type Bbox, Canvas, type Cfg, Circle, type Ctx2D, Debug, Ellipse, Glyph, Hexagon, type ImageDataLike, Optimizer, type Point, type PreCfg, type RGB, Rectangle, type ReplayResult, SVGNS, type SerializedOutput, Shape, type ShapeImageData, type ShapeInterface, Square, State, Step, type StepData, Triangle, clamp, clampColor, computeColorAndDifferenceChange, difference, differenceToDistance, distanceToDifference, getFill, parseColor, renderStepToCtx, replayOutput, stepDataToSVGElement, stepPerf };
+export { type Bbox, Canvas, type Cfg, Circle, type Ctx2D, Debug, Ellipse, Glyph, Hexagon, type ImageDataLike, type NGonOptions, Optimizer, type Point, type PreCfg, type RGB, type RectOptions, Rectangle, type ReplayResult, SVGNS, type SerializedOutput, Shape, type ShapeImageData, type ShapeInterface, Square, State, Step, type StepData, Triangle, clamp, clampColor, computeColorAndDifferenceChange, difference, differenceToDistance, distanceToDifference, getFill, makeNGon, makeRect, parseColor, renderStepToCtx, replayOutput, stepDataToSVGElement, stepPerf };

package/dist/index.js

@@ -1,3 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
 // src/util.ts
 var SVGNS = "http://www.w3.org/2000/svg";
 function parseColor(color) {
@@ -5,18 +8,23 @@ function parseColor(color) {
   if (!m) throw new Error(`Cannot parse color: ${color}`);
   return [parseInt(m[1]), parseInt(m[2]), parseInt(m[3])];
 }
+__name(parseColor, "parseColor");
 function clamp(x, min, max) {
   return Math.max(min, Math.min(max, x));
 }
+__name(clamp, "clamp");
 function clampColor(x) {
   return clamp(x, 0, 255);
 }
+__name(clampColor, "clampColor");
 function distanceToDifference(distance, pixels) {
   return Math.pow(distance * 255, 2) * (3 * pixels);
 }
+__name(distanceToDifference, "distanceToDifference");
 function differenceToDistance(difference2, pixels) {
   return Math.sqrt(difference2 / (3 * pixels)) / 255;
 }
+__name(differenceToDistance, "differenceToDistance");
 function difference(data, dataOther) {
   let sum = 0, dr = 0, dg = 0, db = 0;
   for (let i = 0; i < data.data.length; i += 4) {
@@ -27,6 +35,7 @@ function difference(data, dataOther) {
   }
   return sum;
 }
+__name(difference, "difference");
 function getFill(data) {
   const w = data.width;
   const h = data.height;
@@ -49,6 +58,7 @@ function getFill(data) {
   rgb = rgb.map((x) => ~~(x / count)).map(clampColor);
   return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
 }
+__name(getFill, "getFill");
 function computeColorAndDifferenceChange(offset, imageData, alpha) {
   const { shape, current, target } = imageData;
   const shapeData = shape.data;
@@ -116,12 +126,14 @@ function computeColorAndDifferenceChange(offset, imageData, alpha) {
   }
   return { color: `rgb(${cr}, ${cg}, ${cb})`, differenceChange: sum };
 }
+__name(computeColorAndDifferenceChange, "computeColorAndDifferenceChange");
 
 // src/canvas.ts
 function getScale(width, height, limit, allowUpscale = false) {
   const scale = Math.max(width / limit, height / limit);
   return allowUpscale ? scale : Math.max(scale, 1);
 }
+__name(getScale, "getScale");
 function svgRect(w, h) {
   const node = document.createElementNS(SVGNS, "rect");
   node.setAttribute("x", "0");
@@ -130,7 +142,11 @@ function svgRect(w, h) {
   node.setAttribute("height", String(h));
   return node;
 }
+__name(svgRect, "svgRect");
 var Canvas = class _Canvas {
+  static {
+    __name(this, "Canvas");
+  }
   node;
   ctx;
   _imageData;
@@ -280,6 +296,9 @@ var Canvas = class _Canvas {
 
 // src/state.ts
 var State = class {
+  static {
+    __name(this, "State");
+  }
   target;
   canvas;
   distance;
@@ -302,6 +321,9 @@ var stepPerf = {
   }
 };
 var Step = class _Step {
+  static {
+    __name(this, "Step");
+  }
   shape;
   cfg;
   alpha;
@@ -366,6 +388,9 @@ var Step = class _Step {
 // src/shape.ts
 var _rasterCanvas = null;
 var Shape = class {
+  static {
+    __name(this, "Shape");
+  }
   bbox;
   static randomPoint(width, height) {
     return [~~(Math.random() * width), ~~(Math.random() * height)];
@@ -417,12 +442,15 @@ var Shape = class {
     ctx.translate(-this.bbox.left, -this.bbox.top);
     this.render(ctx);
     const data = ctx.getImageData(0, 0, w, h);
-    return { getImageData: () => data };
+    return { getImageData: /* @__PURE__ */ __name(() => data, "getImageData") };
   }
   render(_ctx) {
   }
 };
 var Polygon = class _Polygon extends Shape {
+  static {
+    __name(this, "Polygon");
+  }
   points;
   constructor(w, h, count) {
     super(w, h);
@@ -496,6 +524,9 @@ var Polygon = class _Polygon extends Shape {
   }
 };
 var Triangle = class _Triangle extends Polygon {
+  static {
+    __name(this, "Triangle");
+  }
   constructor(w, h) {
     super(w, h, 3);
   }
@@ -507,6 +538,9 @@ var Triangle = class _Triangle extends Polygon {
   }
 };
 var Rectangle = class _Rectangle extends Polygon {
+  static {
+    __name(this, "Rectangle");
+  }
   constructor(w, h) {
     super(w, h, 4);
   }
@@ -556,6 +590,9 @@ var Rectangle = class _Rectangle extends Polygon {
   }
 };
 var Ellipse = class _Ellipse extends Shape {
+  static {
+    __name(this, "Ellipse");
+  }
   center;
   rx;
   ry;
@@ -617,6 +654,9 @@ var Ellipse = class _Ellipse extends Shape {
   }
 };
 var Circle = class _Circle extends Shape {
+  static {
+    __name(this, "Circle");
+  }
   center;
   r;
   constructor(w, h) {
@@ -670,6 +710,9 @@ var Circle = class _Circle extends Shape {
   }
 };
 var Glyph = class _Glyph extends Shape {
+  static {
+    __name(this, "Glyph");
+  }
   center;
   text;
   fontSize;
@@ -733,6 +776,9 @@ var Glyph = class _Glyph extends Shape {
   }
 };
 var Square = class _Square extends Shape {
+  static {
+    __name(this, "Square");
+  }
   center;
   r;
   constructor(w, h) {
@@ -785,6 +831,9 @@ var Square = class _Square extends Shape {
   }
 };
 var Hexagon = class _Hexagon extends Shape {
+  static {
+    __name(this, "Hexagon");
+  }
   center;
   r;
   angle;
@@ -866,7 +915,341 @@ var Hexagon = class _Hexagon extends Shape {
     return clone.computeBbox();
   }
 };
+function convexHull(pts) {
+  if (pts.length <= 3) return [...pts];
+  const sorted = [...pts].sort((a, b) => a[0] !== b[0] ? a[0] - b[0] : a[1] - b[1]);
+  function cross(O, A, B) {
+    return (A[0] - O[0]) * (B[1] - O[1]) - (A[1] - O[1]) * (B[0] - O[0]);
+  }
+  __name(cross, "cross");
+  const lower = [];
+  for (const p of sorted) {
+    while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], p) <= 0) lower.pop();
+    lower.push(p);
+  }
+  const upper = [];
+  for (let i = sorted.length - 1; i >= 0; i--) {
+    const p = sorted[i];
+    while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], p) <= 0) upper.pop();
+    upper.push(p);
+  }
+  lower.pop();
+  upper.pop();
+  const hull = [...lower, ...upper];
+  return hull.length >= 3 ? hull : [...pts];
+}
+__name(convexHull, "convexHull");
+function makeNGon(opts) {
+  const sides = opts.sides;
+  const regular = opts.regular ?? true;
+  const rotatable = opts.rotatable ?? true;
+  const noise = opts.noise ?? 0;
+  const convex = opts.convex ?? false;
+  const sizeRange = opts.sizeRange ?? [1, 20];
+  const mutationScale = opts.mutationScale ?? 20;
+  const defaultAngle = rotatable ? 0 : -(Math.PI / 2);
+  const startAngle = opts.startAngle ?? defaultAngle;
+  if (sides < 3) throw new RangeError("makeNGon requires at least 3 sides");
+  if (regular) {
+    class NGonRegular extends Shape {
+      static {
+        __name(this, "NGonRegular");
+      }
+      static _ngonOpts = { sides, regular: true, rotatable, noise, sizeRange, mutationScale, startAngle };
+      center;
+      r;
+      angle;
+      noises;
+      _cachedPoints;
+      constructor(w, h) {
+        super(w, h);
+        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;
+        this.noises = Array.from({ length: sides }, () => Math.random());
+        this._cachedPoints = null;
+        this.computeBbox();
+      }
+      _points() {
+        if (!this._cachedPoints) {
+          this._cachedPoints = Array.from({ length: sides }, (_, i) => {
+            const a = this.angle + i * 2 * Math.PI / sides;
+            const ri = Math.max(1, ~~(this.r * (1 + (this.noises[i] - 0.5) * noise)));
+            return [
+              ~~(this.center[0] + ri * Math.cos(a)),
+              ~~(this.center[1] + ri * Math.sin(a))
+            ];
+          });
+        }
+        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;
+      }
+      render(ctx) {
+        const pts = this._points();
+        ctx.beginPath();
+        pts.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
+        ctx.closePath();
+        ctx.fill();
+      }
+      toSVG() {
+        const node = document.createElementNS(SVGNS, "polygon");
+        node.setAttribute("points", this._points().map((p) => p.join(",")).join(" "));
+        return node;
+      }
+      toData(a, c) {
+        return { t: "p", a, c, pts: this._points().map(([x, y]) => [x, y]) };
+      }
+      mutate(_cfg) {
+        const clone = new NGonRegular(0, 0);
+        clone.center = [this.center[0], this.center[1]];
+        clone.r = this.r;
+        clone.angle = this.angle;
+        clone.noises = [...this.noises];
+        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));
+            break;
+          }
+          case 1:
+            clone.r += (Math.random() - 0.5) * mutationScale;
+            clone.r = Math.max(1, ~~clone.r);
+            break;
+          case 2:
+            if (rotatable) {
+              clone.angle += (Math.random() - 0.5) * (2 * Math.PI / sides);
+            } else {
+              const ni = Math.floor(Math.random() * sides);
+              clone.noises[ni] = Math.random();
+            }
+            break;
+          case 3: {
+            const ni = Math.floor(Math.random() * sides);
+            clone.noises[ni] = Math.random();
+            break;
+          }
+        }
+        return clone.computeBbox();
+      }
+    }
+    return NGonRegular;
+  } else {
+    class NGonIrregular extends Shape {
+      static {
+        __name(this, "NGonIrregular");
+      }
+      static _ngonOpts = { sides, regular: false, convex, sizeRange, mutationScale };
+      points;
+      constructor(w, h) {
+        super(w, h);
+        const first = Shape.randomPoint(w, h);
+        this.points = [first];
+        for (let i = 1; i < sides; i++) {
+          const angle = Math.random() * 2 * Math.PI;
+          const radius = sizeRange[0] + Math.random() * (sizeRange[1] - sizeRange[0]);
+          this.points.push([
+            first[0] + ~~(radius * Math.cos(angle)),
+            first[1] + ~~(radius * Math.sin(angle))
+          ]);
+        }
+        if (convex) this.points = convexHull(this.points);
+        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;
+      }
+      render(ctx) {
+        ctx.beginPath();
+        this.points.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
+        ctx.closePath();
+        ctx.fill();
+      }
+      toSVG() {
+        const path = document.createElementNS(SVGNS, "path");
+        const d = this.points.map(([x, y], i) => `${i ? "L" : "M"}${x},${y}`).join("") + "Z";
+        path.setAttribute("d", d);
+        return path;
+      }
+      toData(a, c) {
+        return { t: "p", a, c, pts: this.points.map(([x, y]) => [x, y]) };
+      }
+      mutate(_cfg) {
+        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));
+        if (convex) clone.points = convexHull(clone.points);
+        return clone.computeBbox();
+      }
+    }
+    return NGonIrregular;
+  }
+}
+__name(makeNGon, "makeNGon");
+function makeRect(opts) {
+  const widthRange = opts?.widthRange ?? [5, 40];
+  const heightRange = opts?.heightRange ?? [5, 40];
+  const aspectRatio = opts?.aspectRatio;
+  const rotatable = opts?.rotatable ?? false;
+  const mutationScale = opts?.mutationScale ?? 20;
+  class Rect extends Shape {
+    static {
+      __name(this, "Rect");
+    }
+    static _rectOpts = { widthRange, heightRange, aspectRatio, rotatable, mutationScale };
+    static _shapeSpec = { f: "rect" };
+    center;
+    hw;
+    hh;
+    angle;
+    constructor(w, h) {
+      super(w, h);
+      this.center = Shape.randomPoint(w, h);
+      this.hw = widthRange[0] + ~~(Math.random() * (widthRange[1] - widthRange[0]));
+      if (aspectRatio !== void 0) {
+        this.hh = Math.max(1, Math.round(this.hw / aspectRatio));
+      } else {
+        this.hh = heightRange[0] + ~~(Math.random() * (heightRange[1] - heightRange[0]));
+      }
+      this.angle = rotatable ? Math.random() * Math.PI : 0;
+      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;
+    }
+    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]
+      ];
+      ctx.beginPath();
+      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 node = document.createElementNS(SVGNS, "polygon");
+      node.setAttribute("points", corners.map((p) => p.join(",")).join(" "));
+      return node;
+    }
+    toData(a, c) {
+      return {
+        t: "rc",
+        a,
+        c,
+        cx: this.center[0],
+        cy: this.center[1],
+        hw: this.hw,
+        hh: this.hh,
+        angle: this.angle
+      };
+    }
+    mutate(_cfg) {
+      const clone = new Rect(0, 0);
+      clone.center = [this.center[0], this.center[1]];
+      clone.hw = this.hw;
+      clone.hh = this.hh;
+      clone.angle = this.angle;
+      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));
+          break;
+        }
+        case 1:
+          clone.hw += (Math.random() - 0.5) * mutationScale;
+          clone.hw = Math.max(1, ~~clone.hw);
+          if (aspectRatio !== void 0) {
+            clone.hh = Math.max(1, Math.round(clone.hw / aspectRatio));
+          }
+          break;
+        case 2:
+          if (rotatable) {
+            clone.angle += (Math.random() - 0.5) * Math.PI / 4;
+          } else if (aspectRatio === void 0) {
+            clone.hh += (Math.random() - 0.5) * mutationScale;
+            clone.hh = Math.max(1, ~~clone.hh);
+          }
+          break;
+        case 3:
+          if (aspectRatio === void 0) {
+            clone.hh += (Math.random() - 0.5) * mutationScale;
+            clone.hh = Math.max(1, ~~clone.hh);
+          }
+          break;
+      }
+      return clone.computeBbox();
+    }
+  }
+  return Rect;
+}
+__name(makeRect, "makeRect");
 var Debug = class extends Shape {
+  static {
+    __name(this, "Debug");
+  }
   constructor(w, h) {
     super(w, h);
     this.bbox = { left: 0, top: 0, width: w, height: h };
@@ -893,7 +1276,11 @@ function buildStepPlan(cfg) {
   }
   return plan;
 }
+__name(buildStepPlan, "buildStepPlan");
 var Optimizer = class {
+  static {
+    __name(this, "Optimizer");
+  }
   cfg;
   state;
   onStep;
@@ -972,7 +1359,7 @@ var Optimizer = class {
     let resolve;
     let bestStep = step;
     const promise = new Promise((r) => resolve = r);
-    const tryMutation = () => {
+    const tryMutation = /* @__PURE__ */ __name(() => {
       if (failedAttempts >= LIMIT) {
         return resolve(bestStep);
       }
@@ -985,7 +1372,7 @@ var Optimizer = class {
         }
         tryMutation();
       });
-    };
+    }, "tryMutation");
     tryMutation();
     return promise;
   }
@@ -995,18 +1382,21 @@ var Optimizer = class {
 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);
   switch (data.t) {
     case "t":
-    case "r": {
+    case "r":
+    case "p": {
       ctx.beginPath();
       data.pts.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
       ctx.closePath();
@@ -1044,15 +1434,30 @@ function renderStepToCtx(data, ctx) {
       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);
+      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);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    }
   }
 }
+__name(renderStepToCtx, "renderStepToCtx");
 function stepDataToSVGElement(data) {
   const color = rgbString(data.c);
   const opacity = data.a.toFixed(2);
   let node;
   switch (data.t) {
     case "t":
-    case "r": {
+    case "r":
+    case "p": {
       node = document.createElementNS(SVGNS, "path");
       const d = data.pts.map(([x, y], i) => `${i ? "L" : "M"}${x},${y}`).join("") + "Z";
       node.setAttribute("d", d);
@@ -1098,11 +1503,27 @@ function stepDataToSVGElement(data) {
       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]
+      ];
+      node = document.createElementNS(SVGNS, "polygon");
+      node.setAttribute("points", pts.map(([x, y]) => `${fmt(x)},${fmt(y)}`).join(" "));
+      break;
+    }
   }
   node.setAttribute("fill", color);
   node.setAttribute("fill-opacity", opacity);
   return node;
 }
+__name(stepDataToSVGElement, "stepDataToSVGElement");
 function replayOutput(data) {
   const fill = rgbString(data.fill);
   const vw = data.w * data.scale;
@@ -1120,6 +1541,7 @@ function replayOutput(data) {
   const svgString = new XMLSerializer().serializeToString(svg);
   return { raster: raster.node, svg, svgString };
 }
+__name(replayOutput, "replayOutput");
 export {
   Canvas,
   Circle,
@@ -1142,6 +1564,8 @@ export {
   differenceToDistance,
   distanceToDifference,
   getFill,
+  makeNGon,
+  makeRect,
   parseColor,
   renderStepToCtx,
   replayOutput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slithy/prim-lib",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Core engine for primitive-based image reconstruction.",
   "type": "module",
   "exports": {
@@ -44,8 +44,8 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "rm -rf dist && tsup src/index.ts --format esm --dts",
-    "dev": "tsup src/index.ts --format esm --watch",
+    "build": "rm -rf dist && tsup src/index.ts --format esm --dts --keep-names",
+    "dev": "tsup src/index.ts --format esm --watch --keep-names",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "test": "vitest run",