@shopify/klint 0.3.0 → 0.4.0

package/dist/plugins/index.js

@@ -1,5 +1,3 @@
-import "../chunk-3RG5ZIWI.js";
-
 // src/plugins/FontParser.tsx
 var BinaryReader = class {
   constructor() {
@@ -21,14 +19,6 @@ var BinaryReader = class {
     const num = this.readShort(data, o);
     return num / 16384;
   }
-  readInt(buff, p) {
-    const a = this.t.uint8;
-    a[0] = buff[p + 3];
-    a[1] = buff[p + 2];
-    a[2] = buff[p + 1];
-    a[3] = buff[p];
-    return this.t.int32[0];
-  }
   readInt8(buff, p) {
     const a = this.t.uint8;
     a[0] = buff[p];
@@ -57,19 +47,11 @@ var BinaryReader = class {
     a[0] = buff[p + 3];
     return this.t.uint32[0];
   }
-  readUint64(buff, p) {
-    return this.readUint(buff, p) * (4294967295 + 1) + this.readUint(buff, p + 4);
-  }
   readASCII(buff, p, l) {
     let s = "";
     for (let i = 0; i < l; i++) s += String.fromCharCode(buff[p + i]);
     return s;
   }
-  readBytes(buff, p, l) {
-    const arr = [];
-    for (let i = 0; i < l; i++) arr.push(buff[p + i]);
-    return arr;
-  }
 };
 var bin = new BinaryReader();
 function findTable(data, tab, foff = 0) {
@@ -77,7 +59,6 @@ function findTable(data, tab, foff = 0) {
   let offset = foff + 12;
   for (let i = 0; i < numTables; i++) {
     const tag = bin.readASCII(data, offset, 4);
-    const checkSum = bin.readUint(data, offset + 4);
     const toffset = bin.readUint(data, offset + 8);
     const length = bin.readUint(data, offset + 12);
     if (tag === tab) return [toffset, length];
@@ -88,105 +69,48 @@ function findTable(data, tab, foff = 0) {
 var Tables = {
   head: {
     parseTab(data, offset, length) {
-      const obj = {};
-      const tableVersion = bin.readFixed(data, offset);
-      offset += 4;
-      obj.fontRevision = bin.readFixed(data, offset);
-      offset += 4;
-      const checkSumAdjustment = bin.readUint(data, offset);
-      offset += 4;
-      const magicNumber = bin.readUint(data, offset);
-      offset += 4;
-      obj.flags = bin.readUshort(data, offset);
-      offset += 2;
-      obj.unitsPerEm = bin.readUshort(data, offset);
-      offset += 2;
-      obj.created = bin.readUint64(data, offset);
-      offset += 8;
-      obj.modified = bin.readUint64(data, offset);
-      offset += 8;
-      obj.xMin = bin.readShort(data, offset);
-      offset += 2;
-      obj.yMin = bin.readShort(data, offset);
-      offset += 2;
-      obj.xMax = bin.readShort(data, offset);
-      offset += 2;
-      obj.yMax = bin.readShort(data, offset);
-      offset += 2;
-      obj.macStyle = bin.readUshort(data, offset);
-      offset += 2;
-      obj.lowestRecPPEM = bin.readUshort(data, offset);
-      offset += 2;
-      obj.fontDirectionHint = bin.readShort(data, offset);
-      offset += 2;
-      obj.indexToLocFormat = bin.readShort(data, offset);
-      offset += 2;
-      obj.glyphDataFormat = bin.readShort(data, offset);
-      offset += 2;
-      return obj;
+      return {
+        flags: bin.readUshort(data, offset + 16),
+        unitsPerEm: bin.readUshort(data, offset + 18),
+        xMin: bin.readShort(data, offset + 36),
+        yMin: bin.readShort(data, offset + 38),
+        xMax: bin.readShort(data, offset + 40),
+        yMax: bin.readShort(data, offset + 42),
+        indexToLocFormat: bin.readShort(data, offset + 50)
+      };
     }
   },
   maxp: {
     parseTab(data, offset, length) {
-      const obj = {};
-      const ver = bin.readUint(data, offset);
-      offset += 4;
-      obj.numGlyphs = bin.readUshort(data, offset);
-      offset += 2;
-      return obj;
+      return { numGlyphs: bin.readUshort(data, offset + 4) };
     }
   },
   hhea: {
     parseTab(data, offset, length) {
-      const obj = {};
-      const tableVersion = bin.readFixed(data, offset);
-      offset += 4;
-      const keys = [
-        "ascender",
-        "descender",
-        "lineGap",
-        "advanceWidthMax",
-        "minLeftSideBearing",
-        "minRightSideBearing",
-        "xMaxExtent",
-        "caretSlopeRise",
-        "caretSlopeRun",
-        "caretOffset",
-        "res0",
-        "res1",
-        "res2",
-        "res3",
-        "metricDataFormat",
-        "numberOfHMetrics"
-      ];
-      for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
-        const func = key === "advanceWidthMax" || key === "numberOfHMetrics" ? bin.readUshort : bin.readShort;
-        obj[key] = func.call(bin, data, offset + i * 2);
-      }
-      return obj;
+      return {
+        ascender: bin.readShort(data, offset + 4),
+        descender: bin.readShort(data, offset + 6),
+        lineGap: bin.readShort(data, offset + 8),
+        numberOfHMetrics: bin.readUshort(data, offset + 34)
+      };
     }
   },
   hmtx: {
     parseTab(data, offset, length, font) {
       const aWidth = [];
-      const lsBearing = [];
       const nG = font.maxp.numGlyphs;
       const nH = font.hhea.numberOfHMetrics;
-      let aw = 0, lsb = 0, i = 0;
+      let aw = 0, i = 0;
       while (i < nH) {
         aw = bin.readUshort(data, offset + (i << 2));
-        lsb = bin.readShort(data, offset + (i << 2) + 2);
         aWidth.push(aw);
-        lsBearing.push(lsb);
         i++;
       }
       while (i < nG) {
         aWidth.push(aw);
-        lsBearing.push(lsb);
         i++;
       }
-      return { aWidth, lsBearing };
+      return { aWidth };
     }
   },
   loca: {
@@ -246,9 +170,6 @@ var Tables = {
     readFormat0(data, offset, map) {
       let pleft = -1;
       const nPairs = bin.readUshort(data, offset);
-      const searchRange = bin.readUshort(data, offset + 2);
-      const entrySelector = bin.readUshort(data, offset + 4);
-      const rangeShift = bin.readUshort(data, offset + 6);
       offset += 8;
       for (let j = 0; j < nPairs; j++) {
         const left = bin.readUshort(data, offset);
@@ -305,25 +226,16 @@ var cmap = {
     return obj;
   },
   parse0(data, offset, obj) {
-    const startOffset = offset;
-    const format = bin.readUshort(data, offset);
-    offset += 2;
-    const length = bin.readUshort(data, offset);
-    offset += 2;
-    const language = bin.readUshort(data, offset);
-    offset += 2;
+    offset += 6;
     obj.map = [];
     for (let i = 0; i < 256; i++) obj.map.push(data[offset + i]);
     return obj;
   },
   parse4(data, offset, obj) {
     const startOffset = offset;
-    const format = bin.readUshort(data, offset);
     offset += 2;
     const length = bin.readUshort(data, offset);
-    offset += 2;
-    const language = bin.readUshort(data, offset);
-    offset += 2;
+    offset += 4;
     const segCountX2 = bin.readUshort(data, offset);
     offset += 2;
     const segCount = segCountX2 >>> 1;
@@ -353,13 +265,7 @@ var cmap = {
     return obj;
   },
   parse6(data, offset, obj) {
-    const startOffset = offset;
-    const format = bin.readUshort(data, offset);
-    offset += 2;
-    const length = bin.readUshort(data, offset);
-    offset += 2;
-    const language = bin.readUshort(data, offset);
-    offset += 2;
+    offset += 6;
     obj.firstCode = bin.readUshort(data, offset);
     offset += 2;
     obj.entryCount = bin.readUshort(data, offset);
@@ -368,12 +274,7 @@ var cmap = {
     return obj;
   },
   parse12(data, offset, obj) {
-    const startOffset = offset;
-    offset += 4;
-    const length = bin.readUint(data, offset);
-    offset += 4;
-    const language = bin.readUint(data, offset);
-    offset += 4;
+    offset += 12;
     const nGroups = bin.readUint(data, offset) * 3;
     offset += 4;
     obj.groups = new Uint32Array(nGroups);
@@ -417,8 +318,7 @@ var glyf = {
       }
       const instructionLength = bin.readUshort(data, off);
       off += 2;
-      if (data.length - off < instructionLength) return null;
-      gl.instructions = bin.readBytes(data, off, instructionLength);
+      if (off + instructionLength > data.length) return null;
       off += instructionLength;
       const crdnum = gl.endPts[gl.noc - 1] + 1;
       gl.flags = [];
@@ -1563,54 +1463,26 @@ var FontParser = class {
       },
       samplePathPoints(glyphPath, sampling) {
         const rawContours = this.parseContours(glyphPath);
-        const contoursWithLength = rawContours.map(
-          (contour, index) => ({
-            contour,
-            originalIndex: index,
-            length: this.calculateContourLength(contour)
-          })
+        const prepared = rawContours.map(
+          (contour) => this.buildSegments(contour)
         );
-        contoursWithLength.sort((a, b) => b.length - a.length);
+        prepared.sort((a, b) => b.totalLength - a.totalLength);
         const allPoints = [];
-        for (let i = 0; i < contoursWithLength.length; i++) {
-          const { contour } = contoursWithLength[i];
-          const contourPoints = this.sampleContour(contour, sampling, i);
-          allPoints.push(...contourPoints);
-        }
-        return allPoints;
-      },
-      // Calculate total length of a contour
-      calculateContourLength(contour) {
-        let totalLength = 0;
-        let currentX = contour.startX;
-        let currentY = contour.startY;
-        for (const seg of contour.segments) {
-          if (seg.cmd === "L") {
-            const endX = seg.coords[0];
-            const endY = seg.coords[1];
-            totalLength += Math.sqrt(
-              (endX - currentX) ** 2 + (endY - currentY) ** 2
-            );
-            currentX = endX;
-            currentY = endY;
-          } else if (seg.cmd === "Q") {
-            const controlX = seg.coords[0];
-            const controlY = seg.coords[1];
-            const endX = seg.coords[2];
-            const endY = seg.coords[3];
-            totalLength += this.approximateQuadraticLength(
-              currentX,
-              currentY,
-              controlX,
-              controlY,
-              endX,
-              endY
-            );
-            currentX = endX;
-            currentY = endY;
+        for (let i = 0; i < prepared.length; i++) {
+          const { segments, totalLength } = prepared[i];
+          const targetPoints = Math.max(
+            5,
+            Math.floor(totalLength * sampling * 0.1)
+          );
+          for (let j = 0; j <= targetPoints; j++) {
+            const targetLength = j / targetPoints * totalLength;
+            const pt = this.getPointAtLengthInContour(segments, targetLength);
+            if (pt) {
+              allPoints.push({ x: pt.x, y: pt.y, contour: i });
+            }
           }
         }
-        return totalLength;
+        return allPoints;
       },
       // Parse glyph path into separate contours
       parseContours(glyphPath) {
@@ -1652,8 +1524,8 @@ var FontParser = class {
         }
         return contours;
       },
-      // Sample a single contour uniformly
-      sampleContour(contour, sampling, contourIndex) {
+      // Build segments from a contour with lengths pre-calculated
+      buildSegments(contour) {
         const segments = [];
         let currentX = contour.startX;
         let currentY = contour.startY;
@@ -1662,9 +1534,7 @@ var FontParser = class {
           if (seg.cmd === "L") {
             const endX = seg.coords[0];
             const endY = seg.coords[1];
-            const length = Math.sqrt(
-              (endX - currentX) ** 2 + (endY - currentY) ** 2
-            );
+            const length = Math.hypot(endX - currentX, endY - currentY);
             segments.push({
               type: "L",
               startX: currentX,
@@ -1682,14 +1552,9 @@ var FontParser = class {
             const controlY = seg.coords[1];
             const endX = seg.coords[2];
             const endY = seg.coords[3];
-            const length = this.approximateQuadraticLength(
-              currentX,
-              currentY,
-              controlX,
-              controlY,
-              endX,
-              endY
-            );
+            const chord = Math.hypot(endX - currentX, endY - currentY);
+            const ctrl = Math.hypot(controlX - currentX, controlY - currentY) + Math.hypot(endX - controlX, endY - controlY);
+            const length = (chord + ctrl) / 2;
             segments.push({
               type: "Q",
               startX: currentX,
@@ -1706,26 +1571,7 @@ var FontParser = class {
             currentY = endY;
           }
         }
-        const points = [];
-        const targetPoints = Math.max(
-          5,
-          Math.floor(totalLength * sampling * 0.1)
-        );
-        for (let i = 0; i <= targetPoints; i++) {
-          const targetLength = i / targetPoints * totalLength;
-          const pointData = this.getPointAtLengthInContour(
-            segments,
-            targetLength
-          );
-          if (pointData) {
-            points.push({
-              x: pointData.x,
-              y: pointData.y,
-              contour: contourIndex
-            });
-          }
-        }
-        return points;
+        return { segments, totalLength };
       },
       // Get point at length within a single contour
       getPointAtLengthInContour(segments, targetLength) {
@@ -1747,12 +1593,6 @@ var FontParser = class {
           }
         }
         return null;
-      },
-      // Helper function to approximate quadratic curve length
-      approximateQuadraticLength(x0, y0, x1, y1, x2, y2) {
-        const chordLength = Math.sqrt((x2 - x0) ** 2 + (y2 - y0) ** 2);
-        const controlLength = Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) + Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
-        return (chordLength + controlLength) / 2;
       }
     };
   }
@@ -1920,264 +1760,6 @@ var CatmullRom = class {
   }
 };
 
-// src/plugins/Things.tsx
-var Things = class {
-  /**
-   * Configure the plugin
-   */
-  static configure(config) {
-    this.config = { ...this.config, ...config };
-  }
-  /**
-   * Create a new thing
-   */
-  static create(options = {}) {
-    if (this.things.size >= (this.config.maxThings || 1e3)) {
-      throw new Error(
-        `Maximum number of things (${this.config.maxThings}) reached`
-      );
-    }
-    const thing = {
-      id: options.id || `thing_${this.idCounter++}`,
-      x: options.x || 0,
-      y: options.y || 0,
-      width: options.width || this.config.defaultSize || 50,
-      height: options.height || this.config.defaultSize || 50,
-      rotation: options.rotation || 0,
-      scale: options.scale || 1,
-      color: options.color || this.config.defaultColor || "#ffffff",
-      data: options.data || {}
-    };
-    this.things.set(thing.id, thing);
-    return thing;
-  }
-  /**
-   * Get a thing by ID
-   */
-  static get(id) {
-    return this.things.get(id);
-  }
-  /**
-   * Get all things
-   */
-  static getAll() {
-    return Array.from(this.things.values());
-  }
-  /**
-   * Update a thing's properties
-   */
-  static update(id, updates) {
-    const thing = this.things.get(id);
-    if (thing) {
-      Object.assign(thing, updates);
-    }
-  }
-  /**
-   * Remove a thing
-   */
-  static remove(id) {
-    return this.things.delete(id);
-  }
-  /**
-   * Clear all things
-   */
-  static clear() {
-    this.things.clear();
-    this.idCounter = 0;
-  }
-  /**
-   * Move a thing
-   */
-  static move(id, dx, dy) {
-    const thing = this.things.get(id);
-    if (thing) {
-      thing.x += dx;
-      thing.y += dy;
-    }
-  }
-  /**
-   * Rotate a thing
-   */
-  static rotate(id, angle) {
-    const thing = this.things.get(id);
-    if (thing) {
-      thing.rotation += angle;
-    }
-  }
-  /**
-   * Scale a thing
-   */
-  static scale(id, factor) {
-    const thing = this.things.get(id);
-    if (thing) {
-      thing.scale *= factor;
-    }
-  }
-  /**
-   * Find things within a radius
-   */
-  static findNear(x, y, radius) {
-    const near = [];
-    const radiusSq = radius * radius;
-    this.things.forEach((thing) => {
-      const dx = thing.x - x;
-      const dy = thing.y - y;
-      if (dx * dx + dy * dy <= radiusSq) {
-        near.push(thing);
-      }
-    });
-    return near;
-  }
-  /**
-   * Find things that overlap with a rectangle
-   */
-  static findInRect(x, y, width, height) {
-    const found = [];
-    this.things.forEach((thing) => {
-      const halfW = thing.width * thing.scale / 2;
-      const halfH = thing.height * thing.scale / 2;
-      if (thing.x + halfW >= x && thing.x - halfW <= x + width && thing.y + halfH >= y && thing.y - halfH <= y + height) {
-        found.push(thing);
-      }
-    });
-    return found;
-  }
-  /**
-   * Apply a function to all things
-   */
-  static forEach(fn) {
-    this.things.forEach(fn);
-  }
-  /**
-   * Map things to a new array
-   */
-  static map(fn) {
-    return Array.from(this.things.values()).map(fn);
-  }
-  /**
-   * Filter things
-   */
-  static filter(fn) {
-    return Array.from(this.things.values()).filter(fn);
-  }
-  /**
-   * Sort things by a property or function
-   */
-  static sort(fn) {
-    return Array.from(this.things.values()).sort(fn);
-  }
-  /**
-   * Draw all things
-   */
-  static draw(ctx, options) {
-    const thingsToDraw = options?.filter ? this.filter(options.filter) : this.getAll();
-    thingsToDraw.forEach((thing) => {
-      if (options?.customDraw) {
-        options.customDraw(ctx, thing);
-      } else {
-        this.drawThing(ctx, thing);
-      }
-    });
-  }
-  /**
-   * Default drawing method for a thing
-   */
-  static drawThing(ctx, thing) {
-    ctx.save();
-    ctx.translate(thing.x, thing.y);
-    ctx.rotate(thing.rotation);
-    ctx.scale(thing.scale, thing.scale);
-    ctx.fillStyle = thing.color;
-    ctx.fillRect(
-      -thing.width / 2,
-      -thing.height / 2,
-      thing.width,
-      thing.height
-    );
-    ctx.restore();
-  }
-  /**
-   * Animate things with a simple physics update
-   */
-  static animatePhysics(deltaTime, options) {
-    const gravity = options?.gravity || 0;
-    const friction = options?.friction || 0.99;
-    const bounds = options?.bounds;
-    this.things.forEach((thing) => {
-      if (!thing.data.vx) thing.data.vx = 0;
-      if (!thing.data.vy) thing.data.vy = 0;
-      thing.data.vy += gravity;
-      thing.data.vx *= friction;
-      thing.data.vy *= friction;
-      thing.x += thing.data.vx;
-      thing.y += thing.data.vy;
-      if (bounds) {
-        const halfW = thing.width * thing.scale / 2;
-        const halfH = thing.height * thing.scale / 2;
-        if (thing.x - halfW < bounds.x) {
-          thing.x = bounds.x + halfW;
-          thing.data.vx *= -0.8;
-        }
-        if (thing.x + halfW > bounds.x + bounds.width) {
-          thing.x = bounds.x + bounds.width - halfW;
-          thing.data.vx *= -0.8;
-        }
-        if (thing.y - halfH < bounds.y) {
-          thing.y = bounds.y + halfH;
-          thing.data.vy *= -0.8;
-        }
-        if (thing.y + halfH > bounds.y + bounds.height) {
-          thing.y = bounds.y + bounds.height - halfH;
-          thing.data.vy *= -0.8;
-        }
-      }
-    });
-  }
-  /**
-   * Get the count of things
-   */
-  static count() {
-    return this.things.size;
-  }
-  /**
-   * Check if a thing exists
-   */
-  static has(id) {
-    return this.things.has(id);
-  }
-  /**
-   * Utility: Get distance between two things
-   */
-  static distance(id1, id2) {
-    const thing1 = this.things.get(id1);
-    const thing2 = this.things.get(id2);
-    if (!thing1 || !thing2) return Infinity;
-    const dx = thing2.x - thing1.x;
-    const dy = thing2.y - thing1.y;
-    return Math.sqrt(dx * dx + dy * dy);
-  }
-  /**
-   * Utility: Check collision between two things
-   */
-  static collides(id1, id2) {
-    const thing1 = this.things.get(id1);
-    const thing2 = this.things.get(id2);
-    if (!thing1 || !thing2) return false;
-    const halfW1 = thing1.width * thing1.scale / 2;
-    const halfH1 = thing1.height * thing1.scale / 2;
-    const halfW2 = thing2.width * thing2.scale / 2;
-    const halfH2 = thing2.height * thing2.scale / 2;
-    return Math.abs(thing1.x - thing2.x) < halfW1 + halfW2 && Math.abs(thing1.y - thing2.y) < halfH1 + halfH2;
-  }
-};
-Things.things = /* @__PURE__ */ new Map();
-Things.config = {
-  maxThings: 1e3,
-  defaultSize: 50,
-  defaultColor: "#ffffff"
-};
-Things.idCounter = 0;
-
 // src/plugins/Sprites.tsx
 var Sprites = class {
   /**
@@ -2480,10 +2062,555 @@ var SpriteAnimation = class {
     return this.playing;
   }
 };
+
+// src/plugins/MatterPhysics.tsx
+var _MatterPhysics = class _MatterPhysics {
+  /**
+   * Dynamically load matter-js and initialize the engine.
+   * Tries a local `import("matter-js")` first — if that fails (package not installed),
+   * falls back to loading from CDN via a script tag.
+   * @param config - Engine configuration
+   * @returns Promise that resolves when ready
+   *
+   * @example
+   * ```tsx
+   * // In preload or setup:
+   * await MatterPhysics.load({ gravity: { x: 0, y: 1 } });
+   * ```
+   */
+  static async load(config = {}) {
+    if (this._loaded && this.engine) return;
+    try {
+      const matterModule = await import("matter-js");
+      const Matter = matterModule.default || matterModule;
+      this.init(Matter, config);
+      this._loaded = true;
+      return;
+    } catch {
+    }
+    try {
+      const Matter = await this._loadFromCDN();
+      this.init(Matter, config);
+      this._loaded = true;
+    } catch (e) {
+      throw new Error(
+        `MatterPhysics: failed to load matter-js. Install it with "npm install matter-js" or check your network connection for CDN fallback (${this.MATTER_CDN}).`
+      );
+    }
+  }
+  /**
+   * Load Matter.js from CDN by injecting a script tag.
+   * Resolves with the global `Matter` object.
+   */
+  static _loadFromCDN() {
+    return new Promise((resolve, reject) => {
+      if (typeof globalThis.Matter !== "undefined") {
+        resolve(globalThis.Matter);
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = this.MATTER_CDN;
+      script.async = true;
+      script.onload = () => {
+        if (typeof globalThis.Matter !== "undefined") {
+          resolve(globalThis.Matter);
+        } else {
+          reject(new Error("Matter global not found after script load"));
+        }
+      };
+      script.onerror = () => {
+        reject(new Error(`Failed to load script from ${this.MATTER_CDN}`));
+      };
+      document.head.appendChild(script);
+    });
+  }
+  /**
+   * Check if MatterPhysics has been loaded and initialized.
+   */
+  static get isLoaded() {
+    return this._loaded && this.engine !== null;
+  }
+  /**
+   * Initialize the physics engine with a Matter.js module reference.
+   * Prefer `load()` for dynamic import. Use this if you want to pass the module directly.
+   * @param matterModule - The Matter.js module (import Matter from 'matter-js')
+   * @param config - Engine configuration
+   */
+  static init(matterModule, config = {}) {
+    this.Matter = matterModule;
+    this._loaded = true;
+    this.engine = matterModule.Engine.create({
+      enableSleeping: config.enableSleeping ?? false,
+      constraintIterations: config.constraintIterations ?? 2,
+      positionIterations: config.positionIterations ?? 6,
+      velocityIterations: config.velocityIterations ?? 4
+    });
+    this.world = this.engine.world;
+    if (config.gravity) {
+      this.world.gravity.x = config.gravity.x;
+      this.world.gravity.y = config.gravity.y;
+      if (config.gravity.scale !== void 0) {
+        this.world.gravity.scale = config.gravity.scale;
+      }
+    }
+    this.bodies.clear();
+    this.constraints.clear();
+    this.idCounter = 0;
+    this.constraintIdCounter = 0;
+  }
+  static ensureInit() {
+    if (!this.Matter || !this.engine) {
+      throw new Error(
+        "MatterPhysics not initialized. Call MatterPhysics.init(Matter) first."
+      );
+    }
+  }
+  static generateId(prefix = "body") {
+    return `${prefix}_${this.idCounter++}`;
+  }
+  /**
+   * Add a rectangle body.
+   * @param x - Center X
+   * @param y - Center Y
+   * @param width - Width
+   * @param height - Height
+   * @param options - Body options
+   * @returns Body reference with id
+   */
+  static addRect(x, y, width, height, options = {}) {
+    this.ensureInit();
+    const id = options.id || this.generateId("rect");
+    const body = this.Matter.Bodies.rectangle(x, y, width, height, options);
+    this.Matter.Composite.add(this.world, body);
+    const ref = { id, body, label: options.label };
+    this.bodies.set(id, ref);
+    return ref;
+  }
+  /**
+   * Add a circle body.
+   * @param x - Center X
+   * @param y - Center Y
+   * @param radius - Radius
+   * @param options - Body options
+   * @returns Body reference with id
+   */
+  static addCircle(x, y, radius, options = {}) {
+    this.ensureInit();
+    const id = options.id || this.generateId("circle");
+    const body = this.Matter.Bodies.circle(x, y, radius, options);
+    this.Matter.Composite.add(this.world, body);
+    const ref = { id, body, label: options.label };
+    this.bodies.set(id, ref);
+    return ref;
+  }
+  /**
+   * Add a polygon body.
+   * @param x - Center X
+   * @param y - Center Y
+   * @param sides - Number of sides
+   * @param radius - Radius
+   * @param options - Body options
+   * @returns Body reference with id
+   */
+  static addPolygon(x, y, sides, radius, options = {}) {
+    this.ensureInit();
+    const id = options.id || this.generateId("polygon");
+    const body = this.Matter.Bodies.polygon(x, y, sides, radius, options);
+    this.Matter.Composite.add(this.world, body);
+    const ref = { id, body, label: options.label };
+    this.bodies.set(id, ref);
+    return ref;
+  }
+  /**
+   * Add a body from custom vertices.
+   * @param x - Center X
+   * @param y - Center Y
+   * @param vertices - Array of {x, y} points
+   * @param options - Body options
+   * @returns Body reference with id
+   */
+  static addFromVertices(x, y, vertices, options = {}) {
+    this.ensureInit();
+    const id = options.id || this.generateId("custom");
+    const body = this.Matter.Bodies.fromVertices(x, y, vertices, options);
+    this.Matter.Composite.add(this.world, body);
+    const ref = { id, body, label: options.label };
+    this.bodies.set(id, ref);
+    return ref;
+  }
+  /**
+   * Add a constraint between two bodies.
+   * @param bodyIdA - First body ID
+   * @param bodyIdB - Second body ID
+   * @param options - Constraint options
+   * @returns Constraint ID
+   */
+  static addConstraint(bodyIdA, bodyIdB, options = {}) {
+    this.ensureInit();
+    const refA = this.bodies.get(bodyIdA);
+    const refB = this.bodies.get(bodyIdB);
+    if (!refA || !refB) {
+      throw new Error(`Body not found: ${!refA ? bodyIdA : bodyIdB}`);
+    }
+    const id = options.id || `constraint_${this.constraintIdCounter++}`;
+    const constraint = this.Matter.Constraint.create({
+      bodyA: refA.body,
+      bodyB: refB.body,
+      ...options
+    });
+    this.Matter.Composite.add(this.world, constraint);
+    this.constraints.set(id, constraint);
+    return id;
+  }
+  /**
+   * Add a constraint anchored to a world point.
+   * @param bodyId - Body ID
+   * @param worldPoint - World anchor point {x, y}
+   * @param options - Constraint options
+   * @returns Constraint ID
+   */
+  static addWorldConstraint(bodyId, worldPoint, options = {}) {
+    this.ensureInit();
+    const ref = this.bodies.get(bodyId);
+    if (!ref) throw new Error(`Body not found: ${bodyId}`);
+    const id = options.id || `constraint_${this.constraintIdCounter++}`;
+    const constraint = this.Matter.Constraint.create({
+      bodyA: ref.body,
+      pointB: worldPoint,
+      ...options
+    });
+    this.Matter.Composite.add(this.world, constraint);
+    this.constraints.set(id, constraint);
+    return id;
+  }
+  /**
+   * Apply force to a body.
+   * @param bodyId - Body ID
+   * @param force - Force vector {x, y}
+   */
+  static applyForce(bodyId, force) {
+    this.ensureInit();
+    const ref = this.bodies.get(bodyId);
+    if (!ref) return;
+    this.Matter.Body.applyForce(ref.body, ref.body.position, force);
+  }
+  /**
+   * Set velocity of a body.
+   * @param bodyId - Body ID
+   * @param velocity - Velocity vector {x, y}
+   */
+  static setVelocity(bodyId, velocity) {
+    this.ensureInit();
+    const ref = this.bodies.get(bodyId);
+    if (!ref) return;
+    this.Matter.Body.setVelocity(ref.body, velocity);
+  }
+  /**
+   * Set position of a body.
+   * @param bodyId - Body ID
+   * @param position - Position {x, y}
+   */
+  static setPosition(bodyId, position) {
+    this.ensureInit();
+    const ref = this.bodies.get(bodyId);
+    if (!ref) return;
+    this.Matter.Body.setPosition(ref.body, position);
+  }
+  /**
+   * Set gravity.
+   * @param x - Horizontal gravity
+   * @param y - Vertical gravity
+   */
+  static setGravity(x, y) {
+    this.ensureInit();
+    this.world.gravity.x = x;
+    this.world.gravity.y = y;
+  }
+  /**
+   * Get a body reference by ID.
+   */
+  static getBody(id) {
+    return this.bodies.get(id);
+  }
+  /**
+   * Get all body references.
+   */
+  static getAllBodies() {
+    return Array.from(this.bodies.values());
+  }
+  /**
+   * Remove a body.
+   * @param id - Body ID
+   */
+  static removeBody(id) {
+    this.ensureInit();
+    const ref = this.bodies.get(id);
+    if (!ref) return false;
+    this.Matter.Composite.remove(this.world, ref.body);
+    return this.bodies.delete(id);
+  }
+  /**
+   * Remove a constraint.
+   * @param id - Constraint ID
+   */
+  static removeConstraint(id) {
+    this.ensureInit();
+    const constraint = this.constraints.get(id);
+    if (!constraint) return false;
+    this.Matter.Composite.remove(this.world, constraint);
+    return this.constraints.delete(id);
+  }
+  /**
+   * Step the physics engine.
+   * @param deltaTime - Time step in milliseconds
+   */
+  static update(deltaTime) {
+    this.ensureInit();
+    this.Matter.Engine.update(this.engine, deltaTime);
+  }
+  /**
+   * Debug draw all bodies and constraints using Klint drawing primitives.
+   * @param ctx - Klint context
+   * @param options - Drawing options
+   */
+  static draw(ctx, options = {}) {
+    const {
+      showBodies = true,
+      showConstraints = true,
+      showBounds = false,
+      bodyStroke = "#ffffff",
+      bodyFill = "transparent",
+      staticFill = "#666666",
+      constraintStroke = "#44ff44",
+      lineWidth = 1
+    } = options;
+    ctx.save();
+    ctx.strokeWidth(lineWidth);
+    if (showBodies) {
+      this.bodies.forEach((ref) => {
+        const body = ref.body;
+        const vertices = body.vertices;
+        ctx.fillStyle = body.isStatic ? staticFill : bodyFill;
+        ctx.strokeStyle = bodyStroke;
+        ctx.beginShape();
+        for (let i = 0; i < vertices.length; i++) {
+          ctx.vertex(vertices[i].x, vertices[i].y);
+        }
+        ctx.endShape(true);
+        if (showBounds) {
+          const { min, max } = body.bounds;
+          ctx.noFill();
+          ctx.strokeStyle = "#ff444444";
+          ctx.setRectOrigin("corner");
+          ctx.rectangle(min.x, min.y, max.x - min.x, max.y - min.y);
+        }
+      });
+    }
+    if (showConstraints) {
+      ctx.strokeStyle = constraintStroke;
+      this.constraints.forEach((constraint) => {
+        const { bodyA, bodyB, pointA, pointB } = constraint;
+        const startX = bodyA ? bodyA.position.x + (pointA?.x || 0) : pointA?.x || 0;
+        const startY = bodyA ? bodyA.position.y + (pointA?.y || 0) : pointA?.y || 0;
+        const endX = bodyB ? bodyB.position.x + (pointB?.x || 0) : pointB?.x || 0;
+        const endY = bodyB ? bodyB.position.y + (pointB?.y || 0) : pointB?.y || 0;
+        ctx.line(startX, startY, endX, endY);
+      });
+    }
+    ctx.restore();
+  }
+  /**
+   * Iterate over all bodies with their position and angle.
+   * Convenience method for syncing physics bodies to visual objects.
+   * @param fn - Callback receiving body data
+   */
+  static forEach(fn) {
+    this.bodies.forEach((ref) => {
+      fn({
+        id: ref.id,
+        x: ref.body.position.x,
+        y: ref.body.position.y,
+        angle: ref.body.angle,
+        velocity: ref.body.velocity,
+        body: ref.body,
+        label: ref.label
+      });
+    });
+  }
+  /**
+   * Register a collision callback.
+   * @param event - Event type: 'collisionStart', 'collisionActive', 'collisionEnd'
+   * @param callback - Callback receiving collision pairs
+   */
+  static onCollision(event, callback) {
+    this.ensureInit();
+    this.Matter.Events.on(this.engine, event, (e) => {
+      callback(e.pairs);
+    });
+  }
+  /**
+   * Get the raw Matter.js engine for advanced usage.
+   */
+  static getEngine() {
+    return this.engine;
+  }
+  /**
+   * Get the raw Matter.js world for advanced usage.
+   */
+  static getWorld() {
+    return this.world;
+  }
+  /**
+   * Clear all bodies, constraints, and reset the engine.
+   */
+  static clear() {
+    if (this.world) {
+      this.Matter?.Composite.clear(this.world, false);
+    }
+    this.bodies.clear();
+    this.constraints.clear();
+    this.idCounter = 0;
+    this.constraintIdCounter = 0;
+  }
+  /**
+   * Destroy the engine entirely.
+   */
+  static destroy() {
+    this.clear();
+    if (this.engine) {
+      this.Matter?.Engine.clear(this.engine);
+    }
+    this.engine = null;
+    this.world = null;
+    this.Matter = null;
+    this._loaded = false;
+  }
+};
+_MatterPhysics.Matter = null;
+_MatterPhysics.engine = null;
+_MatterPhysics.world = null;
+_MatterPhysics.bodies = /* @__PURE__ */ new Map();
+_MatterPhysics.constraints = /* @__PURE__ */ new Map();
+_MatterPhysics.idCounter = 0;
+_MatterPhysics.constraintIdCounter = 0;
+_MatterPhysics._loaded = false;
+/** Matter.js version loaded from CDN when not installed locally */
+_MatterPhysics.MATTER_VERSION = "0.20.0";
+/** CDN URL template — version is interpolated */
+_MatterPhysics.MATTER_CDN = `https://cdnjs.cloudflare.com/ajax/libs/matter-js/${_MatterPhysics.MATTER_VERSION}/matter.min.js`;
+var MatterPhysics = _MatterPhysics;
+
+// src/plugins/Projector.tsx
+var RAD_TO_DEG = 180 / Math.PI;
+var Projector = class {
+  constructor(options) {
+    this.perspective = options?.perspective ?? 2;
+    this.radius = options?.radius ?? 1;
+  }
+  /**
+   * Build a DOMMatrix from a transform callback.
+   * The callback receives a Transform3D object — call rotateX, rotateY, etc.
+   * in the order you want them applied.
+   */
+  buildMatrix(transforms) {
+    const m = new DOMMatrix();
+    if (!transforms) return m;
+    transforms({
+      rotateX: (r) => m.rotateAxisAngleSelf(1, 0, 0, r * RAD_TO_DEG),
+      rotateY: (r) => m.rotateAxisAngleSelf(0, 1, 0, r * RAD_TO_DEG),
+      rotateZ: (r) => m.rotateAxisAngleSelf(0, 0, 1, r * RAD_TO_DEG),
+      translate: (x, y, z) => m.translateSelf(x, y, z),
+      scale: (x, y, z) => m.scaleSelf(x, y ?? x, z ?? x)
+    });
+    return m;
+  }
+  /**
+   * Apply perspective projection to a transformed 3D point.
+   * Returns 2D coordinates + depth + scale factor.
+   */
+  projectPoint(m, point) {
+    const p = m.transformPoint(new DOMPoint(point.x, point.y, point.z, 1));
+    const d = this.perspective;
+    const f = d === 0 ? 1 : 1 / (d - p.z);
+    const r = this.radius;
+    return {
+      x: p.x * f * r,
+      y: p.y * f * r,
+      z: p.z,
+      scale: Math.abs(f)
+    };
+  }
+  /**
+   * Project a single 3D point.
+   *
+   * @param point - The 3D point to project.
+   * @param transforms - Optional callback to apply 3D transforms before projection.
+   * @returns Projected 2D point with depth and scale info.
+   *
+   * @example
+   * ```tsx
+   * const p = projector.project({ x: 0, y: 1, z: 0 }, (t) => {
+   *   t.rotateY(angle);
+   * });
+   * K.circle(p.x, p.y, 8 * p.scale);
+   * ```
+   */
+  project(point, transforms) {
+    return this.projectPoint(this.buildMatrix(transforms), point);
+  }
+  /**
+   * Project an array of 3D points with the same transform.
+   * The transform matrix is built once and reused for all points.
+   *
+   * @param points - Array of 3D points.
+   * @param transforms - Optional transform callback (applied identically to all points).
+   * @returns Array of projected points (same order as input).
+   *
+   * @example
+   * ```tsx
+   * const projected = projector.projectAll(cubeVertices, (t) => {
+   *   t.rotateX(K.time);
+   *   t.rotateY(K.time * 0.7);
+   * });
+   * for (const p of projected) {
+   *   K.circle(p.x, p.y, 6 * p.scale);
+   * }
+   * ```
+   */
+  projectAll(points, transforms) {
+    const m = this.buildMatrix(transforms);
+    return points.map((pt) => this.projectPoint(m, pt));
+  }
+  /**
+   * Project and depth-sort an array of 3D points (back-to-front).
+   * Each result includes `index` — the original index in the input array,
+   * so you can map back to colors, labels, etc.
+   *
+   * @param points - Array of 3D points.
+   * @param transforms - Optional transform callback.
+   * @returns Depth-sorted array of projected points with original indices.
+   *
+   * @example
+   * ```tsx
+   * const sorted = projector.projectSorted(points, (t) => {
+   *   t.rotateX(K.time);
+   * });
+   * for (const p of sorted) {
+   *   K.fillColor(colors[p.index]);
+   *   K.circle(p.x, p.y, 10 * p.scale);
+   * }
+   * ```
+   */
+  projectSorted(points, transforms) {
+    const m = this.buildMatrix(transforms);
+    return points.map((pt, i) => ({ ...this.projectPoint(m, pt), index: i })).sort((a, b) => a.z - b.z);
+  }
+};
 export {
   CatmullRom,
   Delaunay,
   FontParser,
-  Sprites,
-  Things
+  MatterPhysics,
+  Projector,
+  Sprites
 };