@vectojs/core 0.1.0

package/dist/chunk-2Y45S4JK.mjs

@@ -0,0 +1,1380 @@
+// src/renderer/CanvasRenderer.ts
+var TWO_PI = Math.PI * 2;
+function getDevicePixelRatio() {
+  return typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+}
+var CanvasRenderer = class _CanvasRenderer {
+  ctx;
+  width;
+  height;
+  /**
+   * Max circles per batched `fill()`. A single Canvas 2D `fill()` over a path is
+   * superlinear in sub-path count, so an unbounded batch is *slower* than many
+   * small fills at high entity counts. Capping bounds each fill's path
+   * complexity while still amortizing per-draw overhead. Tuned via the benchmark.
+   */
+  static MAX_BATCH = 64;
+  // Order-preserving batch state for fillCircle(): a run of same-style circles
+  // accumulates into one path and is committed by a single fill() on flush().
+  batchActive = false;
+  batchColor = "";
+  batchAlpha = 1;
+  batchCount = 0;
+  constructor(canvas) {
+    const dpr = getDevicePixelRatio();
+    this.width = typeof window !== "undefined" ? window.innerWidth : canvas.width || 0;
+    this.height = typeof window !== "undefined" ? window.innerHeight : canvas.height || 0;
+    canvas.width = this.width * dpr;
+    canvas.height = this.height * dpr;
+    const ctx = canvas.getContext("2d");
+    this.ctx = ctx;
+    if (ctx) ctx.scale(dpr, dpr);
+  }
+  /**
+   * Expose the underlying `CanvasRenderingContext2D` for operations not
+   * covered by the {@link IRenderer} interface.
+   *
+   * @returns The raw 2D rendering context.
+   */
+  getContext() {
+    return this.ctx;
+  }
+  /**
+   * Resize the backing canvas buffer and re-apply DPR scaling.
+   *
+   * Called automatically by {@link Scene} on `window.resize` events.
+   *
+   * @param width - New logical width in CSS pixels.
+   * @param height - New logical height in CSS pixels.
+   */
+  resize(width, height) {
+    const dpr = getDevicePixelRatio();
+    this.width = width;
+    this.height = height;
+    this.ctx.canvas.width = width * dpr;
+    this.ctx.canvas.height = height * dpr;
+    this.ctx.canvas.style.width = `${width}px`;
+    this.ctx.canvas.style.height = `${height}px`;
+    this.ctx.scale(dpr, dpr);
+  }
+  /** @inheritdoc */
+  clear() {
+    this.flush();
+    this.ctx.clearRect(0, 0, this.width, this.height);
+  }
+  /** @inheritdoc */
+  save() {
+    this.flush();
+    this.ctx.save();
+  }
+  /** @inheritdoc */
+  restore() {
+    this.flush();
+    this.ctx.restore();
+  }
+  /** @inheritdoc */
+  translate(x, y) {
+    this.ctx.translate(x, y);
+  }
+  /** @inheritdoc */
+  scale(x, y) {
+    this.ctx.scale(x, y);
+  }
+  /** @inheritdoc */
+  rotate(angle) {
+    this.ctx.rotate(angle);
+  }
+  /** @inheritdoc */
+  setGlobalAlpha(alpha) {
+    this.ctx.globalAlpha = alpha;
+  }
+  /** @inheritdoc */
+  clip(x, y, width, height) {
+    this.flush();
+    this.ctx.beginPath();
+    this.ctx.rect(x, y, width, height);
+    this.ctx.clip();
+  }
+  /** @inheritdoc */
+  beginPath() {
+    this.flush();
+    this.ctx.beginPath();
+  }
+  /** @inheritdoc */
+  moveTo(x, y) {
+    this.ctx.moveTo(x, y);
+  }
+  /** @inheritdoc */
+  lineTo(x, y) {
+    this.ctx.lineTo(x, y);
+  }
+  /** @inheritdoc */
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+  }
+  /** @inheritdoc */
+  closePath() {
+    this.ctx.closePath();
+  }
+  /** @inheritdoc */
+  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    this.ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);
+  }
+  /** @inheritdoc */
+  roundRect(x, y, width, height, radii) {
+    this.ctx.roundRect(x, y, width, height, radii);
+  }
+  /** @inheritdoc */
+  drawImage(source, dx, dy, dw, dh) {
+    this.flush();
+    this.ctx.drawImage(source, dx, dy, dw, dh);
+  }
+  /** @inheritdoc */
+  fillCircle(cx, cy, radius, color, alpha = 1) {
+    if (this.batchActive && (color !== this.batchColor || alpha !== this.batchAlpha)) {
+      this.flush();
+    }
+    if (!this.batchActive) {
+      this.ctx.beginPath();
+      this.batchActive = true;
+      this.batchColor = color;
+      this.batchAlpha = alpha;
+    }
+    this.ctx.moveTo(cx + radius, cy);
+    this.ctx.arc(cx, cy, radius, 0, TWO_PI);
+    this.batchCount++;
+    if (this.batchCount >= _CanvasRenderer.MAX_BATCH) this.flush();
+  }
+  /** @inheritdoc */
+  flush() {
+    if (!this.batchActive) return;
+    this.ctx.globalAlpha = this.batchAlpha;
+    this.ctx.fillStyle = this.batchColor;
+    this.ctx.fill();
+    this.ctx.globalAlpha = 1;
+    this.batchActive = false;
+    this.batchCount = 0;
+  }
+  /** @inheritdoc */
+  fill(color) {
+    this.flush();
+    this.ctx.fillStyle = color;
+    this.ctx.fill();
+  }
+  /** @inheritdoc */
+  stroke(color, lineWidth = 1) {
+    this.flush();
+    this.ctx.strokeStyle = color;
+    this.ctx.lineWidth = lineWidth;
+    this.ctx.lineCap = "round";
+    this.ctx.lineJoin = "round";
+    this.ctx.stroke();
+  }
+  /** @inheritdoc */
+  fillText(text, x, y, font, color) {
+    this.flush();
+    this.ctx.font = font;
+    this.ctx.fillStyle = color;
+    this.ctx.fillText(text, x, y);
+  }
+  /** @inheritdoc */
+  createLinearGradient(x0, y0, x1, y1, colorStops) {
+    const grad = this.ctx.createLinearGradient(x0, y0, x1, y1);
+    for (const cs of colorStops) {
+      grad.addColorStop(cs.stop, cs.color);
+    }
+    return grad;
+  }
+};
+
+// src/renderer/SVGRenderer.ts
+var SVGRenderer = class {
+  width;
+  height;
+  buffer = [];
+  defsBuffer = [];
+  currentPath = [];
+  // Inline matrix states (3x3 representation)
+  // [a, b, c, d, e, f] corresponding to:
+  // | a c e |
+  // | b d f |
+  // | 0 0 1 |
+  mStack = [];
+  ma = 1;
+  mb = 0;
+  mc = 0;
+  md = 1;
+  me = 0;
+  mf = 0;
+  // Alpha stack
+  alphaStack = [];
+  globalAlpha = 1;
+  // Clipping stack
+  clipDepthStack = [];
+  clipDepth = 0;
+  clipCounter = 0;
+  // uniquely identifies clipPaths
+  // Batch circles states (local coordinates)
+  batchCircles = [];
+  batchMatrix = [1, 0, 0, 1, 0, 0];
+  batchColor = "";
+  batchAlpha = 1;
+  batchActive = false;
+  // Cache for generated gradient defs
+  gradientCounter = 0;
+  gradientCache = /* @__PURE__ */ new Map();
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+  clear() {
+    this.buffer = [];
+    this.defsBuffer = [];
+    this.currentPath = [];
+    this.gradientCounter = 0;
+    this.clipCounter = 0;
+    this.gradientCache.clear();
+    this.mStack = [];
+    this.alphaStack = [];
+    this.clipDepthStack = [];
+    this.ma = 1;
+    this.mb = 0;
+    this.mc = 0;
+    this.md = 1;
+    this.me = 0;
+    this.mf = 0;
+    this.globalAlpha = 1;
+    this.clipDepth = 0;
+    this.batchCircles = [];
+    this.batchActive = false;
+  }
+  save() {
+    this.flush();
+    this.mStack.push([this.ma, this.mb, this.mc, this.md, this.me, this.mf]);
+    this.alphaStack.push(this.globalAlpha);
+    this.clipDepthStack.push(this.clipDepth);
+  }
+  restore() {
+    this.flush();
+    if (this.mStack.length > 0) {
+      const m = this.mStack.pop();
+      this.ma = m[0];
+      this.mb = m[1];
+      this.mc = m[2];
+      this.md = m[3];
+      this.me = m[4];
+      this.mf = m[5];
+    }
+    if (this.alphaStack.length > 0) {
+      this.globalAlpha = this.alphaStack.pop();
+    }
+    if (this.clipDepthStack.length > 0) {
+      const poppedClipDepth = this.clipDepthStack.pop();
+      if (poppedClipDepth < this.clipDepth) {
+        for (let i = 0; i < this.clipDepth - poppedClipDepth; i++) {
+          this.buffer.push("</g>");
+        }
+        this.clipDepth = poppedClipDepth;
+      }
+    }
+  }
+  translate(dx, dy) {
+    this.me = this.ma * dx + this.mc * dy + this.me;
+    this.mf = this.mb * dx + this.md * dy + this.mf;
+  }
+  scale(sx, sy) {
+    this.ma *= sx;
+    this.mb *= sx;
+    this.mc *= sy;
+    this.md *= sy;
+  }
+  rotate(angle) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const a0 = this.ma, b0 = this.mb, c0 = this.mc, d0 = this.md;
+    this.ma = a0 * cos + c0 * sin;
+    this.mb = b0 * cos + d0 * sin;
+    this.mc = -a0 * sin + c0 * cos;
+    this.md = -b0 * sin + d0 * cos;
+  }
+  setGlobalAlpha(alpha) {
+    this.globalAlpha = alpha;
+  }
+  beginPath() {
+    this.currentPath = [];
+  }
+  moveTo(x, y) {
+    this.currentPath.push(`M ${x} ${y}`);
+  }
+  lineTo(x, y) {
+    this.currentPath.push(`L ${x} ${y}`);
+  }
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this.currentPath.push(`C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${x} ${y}`);
+  }
+  closePath() {
+    this.currentPath.push("Z");
+  }
+  arc(x, y, r, startAngle, endAngle, ccw) {
+    const xs = x + r * Math.cos(startAngle);
+    const ys = y + r * Math.sin(startAngle);
+    if (this.currentPath.length === 0) {
+      this.currentPath.push(`M ${xs} ${ys}`);
+    } else {
+      this.currentPath.push(`L ${xs} ${ys}`);
+    }
+    const deltaAngle = Math.abs(endAngle - startAngle);
+    if (deltaAngle >= Math.PI * 2 - 1e-4) {
+      const xm = x - r * Math.cos(startAngle);
+      const ym = y - r * Math.sin(startAngle);
+      const sweep = ccw ? 0 : 1;
+      this.currentPath.push(`A ${r} ${r} 0 0 ${sweep} ${xm} ${ym}`);
+      this.currentPath.push(`A ${r} ${r} 0 0 ${sweep} ${xs} ${ys}`);
+    } else {
+      const xe = x + r * Math.cos(endAngle);
+      const ye = y + r * Math.sin(endAngle);
+      const largeArc = deltaAngle > Math.PI ? 1 : 0;
+      const sweep = ccw ? 0 : 1;
+      this.currentPath.push(`A ${r} ${r} 0 ${largeArc} ${sweep} ${xe} ${ye}`);
+    }
+  }
+  roundRect(x, y, w, h, radii) {
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
+    let r_tl = 0, r_tr = 0, r_br = 0, r_bl = 0;
+    if (typeof radii === "number") {
+      r_tl = r_tr = r_br = r_bl = radii;
+    } else if (Array.isArray(radii)) {
+      if (radii.length === 1) {
+        r_tl = r_tr = r_br = r_bl = radii[0];
+      } else if (radii.length === 2) {
+        r_tl = r_br = radii[0];
+        r_tr = r_bl = radii[1];
+      } else if (radii.length === 3) {
+        r_tl = radii[0];
+        r_tr = r_bl = radii[1];
+        r_br = radii[2];
+      } else if (radii.length >= 4) {
+        r_tl = radii[0];
+        r_tr = radii[1];
+        r_br = radii[2];
+        r_bl = radii[3];
+      }
+    }
+    const tl_tr = r_tl + r_tr;
+    const bl_br = r_bl + r_br;
+    const tl_bl = r_tl + r_bl;
+    const tr_br = r_tr + r_br;
+    let factor = 1;
+    if (tl_tr > w) factor = Math.min(factor, w / tl_tr);
+    if (bl_br > w) factor = Math.min(factor, w / bl_br);
+    if (tl_bl > h) factor = Math.min(factor, h / tl_bl);
+    if (tr_br > h) factor = Math.min(factor, h / tr_br);
+    if (factor < 1) {
+      r_tl *= factor;
+      r_tr *= factor;
+      r_br *= factor;
+      r_bl *= factor;
+    }
+    this.currentPath.push(`M ${x + r_tl} ${y}`);
+    this.currentPath.push(`L ${x + w - r_tr} ${y}`);
+    this.currentPath.push(`A ${r_tr} ${r_tr} 0 0 1 ${x + w} ${y + r_tr}`);
+    this.currentPath.push(`L ${x + w} ${y + h - r_br}`);
+    this.currentPath.push(`A ${r_br} ${r_br} 0 0 1 ${x + w - r_br} ${y + h}`);
+    this.currentPath.push(`L ${x + r_bl} ${y + h}`);
+    this.currentPath.push(`A ${r_bl} ${r_bl} 0 0 1 ${x} ${y + h - r_bl}`);
+    this.currentPath.push(`L ${x} ${y + r_tl}`);
+    this.currentPath.push(`A ${r_tl} ${r_tl} 0 0 1 ${x + r_tl} ${y}`);
+    this.currentPath.push("Z");
+  }
+  fill(colorOrGradient) {
+    this.flush();
+    const fillVal = this.resolveGradient(colorOrGradient);
+    const dStr = this.currentPath.join(" ");
+    const transformStr = `matrix(${this.ma},${this.mb},${this.mc},${this.md},${this.me},${this.mf})`;
+    this.buffer.push(
+      `<path d="${dStr}" transform="${transformStr}" fill="${fillVal}" opacity="${this.globalAlpha}" />`
+    );
+  }
+  stroke(colorOrGradient, lineWidth = 1) {
+    this.flush();
+    const strokeVal = this.resolveGradient(colorOrGradient);
+    const dStr = this.currentPath.join(" ");
+    const transformStr = `matrix(${this.ma},${this.mb},${this.mc},${this.md},${this.me},${this.mf})`;
+    this.buffer.push(
+      `<path d="${dStr}" transform="${transformStr}" fill="none" stroke="${strokeVal}" stroke-width="${lineWidth}" stroke-opacity="${this.globalAlpha}" />`
+    );
+  }
+  fillText(text, x, y, font, color) {
+    this.flush();
+    const sizeMatch = font.match(/(\d+(?:\.\d+)?)(px|em|rem)/);
+    let fontSize = sizeMatch ? parseFloat(sizeMatch[1]) : 16;
+    if (sizeMatch && sizeMatch[2] !== "px") {
+      fontSize = fontSize * 16;
+    }
+    const styleMatch = font.match(/(italic|oblique)/i);
+    const fontWeightMatch = font.match(/(bold|[1-9]00)/i);
+    const fontStyle = styleMatch ? styleMatch[1].toLowerCase() : "normal";
+    const fontWeight = fontWeightMatch ? fontWeightMatch[1].toLowerCase() : "normal";
+    const cleanFont = font.replace(/\d+(?:\.\d+)?(px|em|rem)(?:\/\d+(?:\.\d+)?(?:px|em|rem|%)?)?/, "").trim();
+    const fontFamily = cleanFont.replace(/(bold|italic|normal|600|500|400|300|100)\s+/gi, "").trim() || "sans-serif";
+    const fillVal = this.resolveGradient(color);
+    const transformStr = `matrix(${this.ma},${this.mb},${this.mc},${this.md},${this.me},${this.mf})`;
+    this.buffer.push(
+      `<g transform="${transformStr}"><text x="${x}" y="${y}" font-size="${fontSize}" font-weight="${fontWeight}" font-style="${fontStyle}" font-family="${this.escapeXML(fontFamily)}" fill="${fillVal}" opacity="${this.globalAlpha}">${this.escapeXML(text)}</text></g>`
+    );
+  }
+  fillCircle(cx, cy, radius, color, alpha) {
+    const targetAlpha = alpha ?? 1;
+    const matrixEq = this.batchMatrix[0] === this.ma && this.batchMatrix[1] === this.mb && this.batchMatrix[2] === this.mc && this.batchMatrix[3] === this.md && this.batchMatrix[4] === this.me && this.batchMatrix[5] === this.mf;
+    if (this.batchActive && (!matrixEq || this.batchColor !== color || this.batchAlpha !== targetAlpha)) {
+      this.flush();
+    }
+    if (!this.batchActive) {
+      this.batchMatrix = [this.ma, this.mb, this.mc, this.md, this.me, this.mf];
+      this.batchColor = color;
+      this.batchAlpha = targetAlpha;
+      this.batchActive = true;
+    }
+    this.batchCircles.push({ cx, cy, r: radius });
+  }
+  drawImage(source, dx, dy, dw, dh) {
+    this.flush();
+    const href = typeof source?.toDataURL === "function" ? source.toDataURL() : source?.src || "";
+    const transformStr = `matrix(${this.ma},${this.mb},${this.mc},${this.md},${this.me},${this.mf})`;
+    if (href) {
+      this.buffer.push(
+        `<image href="${this.escapeXML(href)}" x="${dx}" y="${dy}" width="${dw}" height="${dh}" transform="${transformStr}" />`
+      );
+    } else {
+      this.buffer.push(
+        `<rect x="${dx}" y="${dy}" width="${dw}" height="${dh}" transform="${transformStr}" fill="rgba(0,0,0,0.5)" />`
+      );
+      console.warn("drawImage source fallback triggered");
+    }
+  }
+  flush() {
+    if (!this.batchActive || this.batchCircles.length === 0) return;
+    let d = "";
+    for (const c of this.batchCircles) {
+      const cx_minus_r = c.cx - c.r;
+      const cx_plus_r = c.cx + c.r;
+      d += `M ${cx_minus_r} ${c.cy} A ${c.r} ${c.r} 0 1 0 ${cx_plus_r} ${c.cy} A ${c.r} ${c.r} 0 1 0 ${cx_minus_r} ${c.cy} `;
+    }
+    const transformStr = `matrix(${this.batchMatrix.join(",")})`;
+    const pathNode = `<path d="${d.trim()}" transform="${transformStr}" fill="${this.escapeXML(this.batchColor)}" opacity="${this.batchAlpha}" />`;
+    this.buffer.push(pathNode);
+    this.batchCircles = [];
+    this.batchActive = false;
+  }
+  createLinearGradient(x0, y0, x1, y1, colorStops) {
+    return {
+      type: "linear",
+      x0,
+      y0,
+      x1,
+      y1,
+      colorStops,
+      createMatrix: [this.ma, this.mb, this.mc, this.md, this.me, this.mf]
+    };
+  }
+  clip(x, y, width, height) {
+    this.flush();
+    const id = `clip-${this.clipCounter++}`;
+    const transformStr = `matrix(${this.ma},${this.mb},${this.mc},${this.md},${this.me},${this.mf})`;
+    const clipXML = `<clipPath id="${id}"><rect x="${x}" y="${y}" width="${width}" height="${height}" transform="${transformStr}" /></clipPath>`;
+    this.defsBuffer.push(clipXML);
+    this.buffer.push(`<g clip-path="url(#${id})">`);
+    this.clipDepth++;
+  }
+  toXMLString() {
+    this.flush();
+    let xml = `<svg width="${this.width}" height="${this.height}" viewBox="0 0 ${this.width} ${this.height}" xmlns="http://www.w3.org/2000/svg">`;
+    if (this.defsBuffer.length > 0) {
+      xml += `<defs>${this.defsBuffer.join("\n")}</defs>`;
+    }
+    xml += this.buffer.join("\n");
+    for (let i = 0; i < this.clipDepth; i++) {
+      xml += "</g>";
+    }
+    xml += "</svg>";
+    return xml;
+  }
+  resolveGradient(colorOrGradient) {
+    if (typeof colorOrGradient === "string") {
+      return colorOrGradient;
+    }
+    const gradient = colorOrGradient;
+    const [c_a, c_b, c_c, c_d, c_e, c_f] = gradient.createMatrix;
+    const Det = this.ma * this.md - this.mb * this.mc;
+    let inv_a = 1, inv_b = 0, inv_c = 0, inv_d = 1, inv_e = 0, inv_f = 0;
+    if (Math.abs(Det) > 1e-6) {
+      inv_a = this.md / Det;
+      inv_b = -this.mb / Det;
+      inv_c = -this.mc / Det;
+      inv_d = this.ma / Det;
+      inv_e = (this.mc * this.mf - this.md * this.me) / Det;
+      inv_f = (this.mb * this.me - this.ma * this.mf) / Det;
+    }
+    const g_a = inv_a * c_a + inv_c * c_b;
+    const g_b = inv_b * c_a + inv_d * c_b;
+    const g_c = inv_a * c_c + inv_c * c_d;
+    const g_d = inv_b * c_c + inv_d * c_d;
+    const g_e = inv_a * c_e + inv_c * c_f + inv_e;
+    const g_f = inv_b * c_e + inv_d * c_f + inv_f;
+    const stopsStr = JSON.stringify(gradient.colorStops);
+    const x0_prime = c_a * gradient.x0 + c_c * gradient.y0 + c_e;
+    const y0_prime = c_b * gradient.x0 + c_d * gradient.y0 + c_f;
+    const x1_prime = c_a * gradient.x1 + c_c * gradient.y1 + c_e;
+    const y1_prime = c_b * gradient.x1 + c_d * gradient.y1 + c_f;
+    const key = `${x0_prime}_${y0_prime}_${x1_prime}_${y1_prime}_${stopsStr}_${this.ma}_${this.mb}_${this.mc}_${this.md}_${this.me}_${this.mf}`;
+    let id = this.gradientCache.get(key);
+    if (!id) {
+      id = `vecto-linear-grad-${this.gradientCounter++}`;
+      let stopsXML = "";
+      for (const stop of gradient.colorStops) {
+        stopsXML += `<stop offset="${stop.stop}" stop-color="${this.escapeXML(stop.color)}" />`;
+      }
+      const gradientTransform = `matrix(${g_a},${g_b},${g_c},${g_d},${g_e},${g_f})`;
+      const gradXML = `<linearGradient id="${id}" x1="${gradient.x0}" y1="${gradient.y0}" x2="${gradient.x1}" y2="${gradient.y1}" gradientUnits="userSpaceOnUse" gradientTransform="${gradientTransform}">${stopsXML}</linearGradient>`;
+      this.defsBuffer.push(gradXML);
+      this.gradientCache.set(key, id);
+    }
+    return `url(#${id})`;
+  }
+  escapeXML(str) {
+    return str.replace(/[<>&'"]/g, (c) => {
+      switch (c) {
+        case "<":
+          return "&lt;";
+        case ">":
+          return "&gt;";
+        case "&":
+          return "&amp;";
+        case "'":
+          return "&apos;";
+        case '"':
+          return "&quot;";
+        default:
+          return c;
+      }
+    });
+  }
+};
+
+// src/renderer/colorParse.ts
+var cache = /* @__PURE__ */ new Map();
+var fallbackCtx;
+function fromHex(hex) {
+  const h = hex.slice(1);
+  const n = h.length;
+  if (n !== 3 && n !== 4 && n !== 6 && n !== 8) return null;
+  if (!/^[0-9a-f]+$/i.test(h)) return null;
+  const short = n === 3 || n === 4;
+  const hx = (i) => {
+    const s = short ? h[i] + h[i] : h.slice(i * 2, i * 2 + 2);
+    return parseInt(s, 16) / 255;
+  };
+  const hasA = n === 4 || n === 8;
+  return [hx(0), hx(1), hx(2), hasA ? hx(3) : 1];
+}
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function fromRgbFunc(css) {
+  const m = /^rgba?\(([^)]+)\)$/i.exec(css.trim());
+  if (!m) return null;
+  const [rgbPart, alphaPart] = m[1].split("/");
+  const parts = rgbPart.trim().split(/[\s,]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+  const chan = (p) => p.endsWith("%") ? parseFloat(p) / 100 * 255 : parseFloat(p);
+  const r = chan(parts[0]) / 255;
+  const g = chan(parts[1]) / 255;
+  const b = chan(parts[2]) / 255;
+  const alphaToken = alphaPart !== void 0 ? alphaPart.trim() : parts[3];
+  const a = alphaToken === void 0 ? 1 : alphaToken.endsWith("%") ? parseFloat(alphaToken) / 100 : parseFloat(alphaToken);
+  if ([r, g, b, a].some((v) => Number.isNaN(v))) return null;
+  return [clamp01(r), clamp01(g), clamp01(b), clamp01(a)];
+}
+function fromCanvas(css) {
+  if (typeof document === "undefined") return null;
+  if (!fallbackCtx) fallbackCtx = document.createElement("canvas").getContext("2d");
+  if (!fallbackCtx) return null;
+  fallbackCtx.fillStyle = css;
+  fallbackCtx.fillRect(0, 0, 1, 1);
+  const d = fallbackCtx.getImageData(0, 0, 1, 1).data;
+  return [d[0] / 255, d[1] / 255, d[2] / 255, d[3] / 255];
+}
+function parseColorToRGBA(css) {
+  const hit = cache.get(css);
+  if (hit) return hit;
+  const trimmed = css.trim();
+  const rgba = (trimmed[0] === "#" ? fromHex(trimmed) : null) ?? fromRgbFunc(trimmed) ?? fromCanvas(trimmed) ?? [0, 0, 0, 1];
+  cache.set(css, rgba);
+  return rgba;
+}
+
+// src/renderer/WebGLPointRenderer.ts
+var FLOATS_PER_POINT = 7;
+var POINT_STRIDE = FLOATS_PER_POINT * 4;
+var FLOATS_PER_RECT_VERT = 6;
+var RECT_VERT_STRIDE = FLOATS_PER_RECT_VERT * 4;
+var VERTS_PER_RECT = 6;
+var FLOATS_PER_SPRITE_VERT = 8;
+var SPRITE_VERT_STRIDE = FLOATS_PER_SPRITE_VERT * 4;
+var VERTS_PER_SPRITE = 6;
+var POINT_VERT = `#version 300 es
+in vec2 a_pos;
+in float a_radius;
+in vec4 a_color;
+uniform vec2 u_resolution;
+uniform float u_dpr;
+out vec4 v_color;
+void main() {
+  vec2 clip = (a_pos / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  gl_PointSize = a_radius * 2.0 * u_dpr;
+  v_color = a_color;
+}`;
+var POINT_FRAG = `#version 300 es
+precision mediump float;
+in vec4 v_color;
+out vec4 outColor;
+void main() {
+  vec2 c = gl_PointCoord - 0.5;
+  float d = length(c);
+  float aa = fwidth(d);
+  float alpha = 1.0 - smoothstep(0.5 - aa, 0.5, d);
+  if (alpha <= 0.0) discard;
+  outColor = vec4(v_color.rgb, v_color.a * alpha);
+}`;
+var RECT_VERT = `#version 300 es
+in vec2 a_pos;
+in vec4 a_rcolor;
+uniform vec2 u_resolution;
+out vec4 v_color;
+void main() {
+  vec2 clip = (a_pos / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  v_color = a_rcolor;
+}`;
+var RECT_FRAG = `#version 300 es
+precision mediump float;
+in vec4 v_color;
+out vec4 outColor;
+void main() {
+  outColor = vec4(v_color.rgb, v_color.a);
+}`;
+var SPRITE_VERT = `#version 300 es
+in vec2 a_pos;
+in vec2 a_uv;
+in vec4 a_tint;
+uniform vec2 u_resolution;
+out vec2 v_uv;
+out vec4 v_tint;
+void main() {
+  vec2 clip = (a_pos / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  v_uv = a_uv;
+  v_tint = a_tint;
+}`;
+var SPRITE_FRAG = `#version 300 es
+precision mediump float;
+uniform sampler2D u_tex;
+in vec2 v_uv;
+in vec4 v_tint;
+out vec4 outColor;
+void main() {
+  vec4 t = texture(u_tex, v_uv);
+  outColor = vec4(t.rgb * v_tint.rgb, t.a * v_tint.a);
+}`;
+var MSDF_FRAG = `#version 300 es
+precision mediump float;
+uniform sampler2D u_tex;
+uniform float u_distanceRange;
+in vec2 v_uv;
+in vec4 v_tint;
+out vec4 outColor;
+float median(float r, float g, float b) {
+  return max(min(r, g), min(max(r, g), b));
+}
+void main() {
+  vec3 msd = texture(u_tex, v_uv).rgb;
+  float sd = median(msd.r, msd.g, msd.b);
+  vec2 unitRange = vec2(u_distanceRange) / vec2(textureSize(u_tex, 0));
+  vec2 screenTexSize = vec2(1.0) / fwidth(v_uv);
+  float screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);
+  float screenPxDistance = screenPxRange * (sd - 0.5);
+  float opacity = clamp(screenPxDistance + 0.5, 0.0, 1.0);
+  if (opacity <= 0.0) discard;
+  outColor = vec4(v_tint.rgb, v_tint.a * opacity);
+}`;
+function compile(gl, type, src) {
+  const sh = gl.createShader(type);
+  if (!sh) return null;
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    gl.deleteShader(sh);
+    return null;
+  }
+  return sh;
+}
+function link(gl, vsSrc, fsSrc) {
+  const vs = compile(gl, gl.VERTEX_SHADER, vsSrc);
+  const fs = compile(gl, gl.FRAGMENT_SHADER, fsSrc);
+  if (!vs || !fs) return null;
+  const program = gl.createProgram();
+  if (!program) return null;
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  return program;
+}
+function grow(data, needed) {
+  if (needed <= data.length) return data;
+  let cap = data.length;
+  while (cap < needed) cap *= 2;
+  const grown = new Float32Array(cap);
+  grown.set(data);
+  return grown;
+}
+function createWebGLPointRenderer(canvas) {
+  const gl = canvas.getContext("webgl2");
+  if (!gl) return null;
+  const pointProgram = link(gl, POINT_VERT, POINT_FRAG);
+  const rectProgram = link(gl, RECT_VERT, RECT_FRAG);
+  const spriteProgram = link(gl, SPRITE_VERT, SPRITE_FRAG);
+  const msdfProgram = link(gl, SPRITE_VERT, MSDF_FRAG);
+  if (!pointProgram || !rectProgram || !spriteProgram || !msdfProgram) return null;
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  const pAPos = gl.getAttribLocation(pointProgram, "a_pos");
+  const pARadius = gl.getAttribLocation(pointProgram, "a_radius");
+  const pAColor = gl.getAttribLocation(pointProgram, "a_color");
+  const pURes = gl.getUniformLocation(pointProgram, "u_resolution");
+  const pUDpr = gl.getUniformLocation(pointProgram, "u_dpr");
+  const pointBuffer = gl.createBuffer();
+  const pointVAO = gl.createVertexArray();
+  gl.bindVertexArray(pointVAO);
+  gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
+  gl.enableVertexAttribArray(pAPos);
+  gl.vertexAttribPointer(pAPos, 2, gl.FLOAT, false, POINT_STRIDE, 0);
+  gl.enableVertexAttribArray(pARadius);
+  gl.vertexAttribPointer(pARadius, 1, gl.FLOAT, false, POINT_STRIDE, 8);
+  gl.enableVertexAttribArray(pAColor);
+  gl.vertexAttribPointer(pAColor, 4, gl.FLOAT, false, POINT_STRIDE, 12);
+  const rAPos = gl.getAttribLocation(rectProgram, "a_pos");
+  const rAColor = gl.getAttribLocation(rectProgram, "a_rcolor");
+  const rURes = gl.getUniformLocation(rectProgram, "u_resolution");
+  const rectBuffer = gl.createBuffer();
+  const rectVAO = gl.createVertexArray();
+  gl.bindVertexArray(rectVAO);
+  gl.bindBuffer(gl.ARRAY_BUFFER, rectBuffer);
+  gl.enableVertexAttribArray(rAPos);
+  gl.vertexAttribPointer(rAPos, 2, gl.FLOAT, false, RECT_VERT_STRIDE, 0);
+  gl.enableVertexAttribArray(rAColor);
+  gl.vertexAttribPointer(rAColor, 4, gl.FLOAT, false, RECT_VERT_STRIDE, 8);
+  const sAPos = gl.getAttribLocation(spriteProgram, "a_pos");
+  const sAUv = gl.getAttribLocation(spriteProgram, "a_uv");
+  const sATint = gl.getAttribLocation(spriteProgram, "a_tint");
+  const sURes = gl.getUniformLocation(spriteProgram, "u_resolution");
+  const sUTex = gl.getUniformLocation(spriteProgram, "u_tex");
+  const spriteBuffer = gl.createBuffer();
+  const spriteVAO = gl.createVertexArray();
+  gl.bindVertexArray(spriteVAO);
+  gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuffer);
+  gl.enableVertexAttribArray(sAPos);
+  gl.vertexAttribPointer(sAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.enableVertexAttribArray(sAUv);
+  gl.vertexAttribPointer(sAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.enableVertexAttribArray(sATint);
+  gl.vertexAttribPointer(sATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  const gAPos = gl.getAttribLocation(msdfProgram, "a_pos");
+  const gAUv = gl.getAttribLocation(msdfProgram, "a_uv");
+  const gATint = gl.getAttribLocation(msdfProgram, "a_tint");
+  const gURes = gl.getUniformLocation(msdfProgram, "u_resolution");
+  const gUTex = gl.getUniformLocation(msdfProgram, "u_tex");
+  const gURange = gl.getUniformLocation(msdfProgram, "u_distanceRange");
+  const glyphBuffer = gl.createBuffer();
+  const glyphVAO = gl.createVertexArray();
+  gl.bindVertexArray(glyphVAO);
+  gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
+  gl.enableVertexAttribArray(gAPos);
+  gl.vertexAttribPointer(gAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.enableVertexAttribArray(gAUv);
+  gl.vertexAttribPointer(gAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.enableVertexAttribArray(gATint);
+  gl.vertexAttribPointer(gATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  gl.bindVertexArray(null);
+  let texture = null;
+  let msdfTexture = null;
+  let distanceRange = 4;
+  let pointData = new Float32Array(FLOATS_PER_POINT * 1024);
+  let pointCount = 0;
+  let rectData = new Float32Array(FLOATS_PER_RECT_VERT * VERTS_PER_RECT * 256);
+  let rectCount = 0;
+  let spriteData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 256);
+  let spriteCount = 0;
+  let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 1024);
+  let glyphCount = 0;
+  let logicalW = 0;
+  let logicalH = 0;
+  let dpr = 1;
+  return {
+    resize(width, height) {
+      logicalW = width;
+      logicalH = height;
+      dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio || 1 : 1;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      gl.viewport(0, 0, canvas.width, canvas.height);
+    },
+    begin() {
+      pointCount = 0;
+      rectCount = 0;
+      spriteCount = 0;
+      glyphCount = 0;
+    },
+    setTexture(source) {
+      if (!texture) {
+        texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      } else {
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+      }
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    },
+    addSprite(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
+      if (!texture) return;
+      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+      spriteData = grow(spriteData, (spriteCount + 1) * stride);
+      const [r, g, b, a] = parseColorToRGBA(color);
+      const al = a * alpha;
+      const s = Math.sin(rotation);
+      const c = Math.cos(rotation);
+      const corner = (lx, ly) => [
+        x + lx * c - ly * s,
+        y + lx * s + ly * c
+      ];
+      const quad = [
+        [corner(0, 0), [u0, v0]],
+        [corner(width, 0), [u1, v0]],
+        [corner(width, height), [u1, v1]],
+        [corner(0, height), [u0, v1]]
+      ];
+      const order = [0, 1, 2, 0, 2, 3];
+      let o = spriteCount * stride;
+      for (const i of order) {
+        const [[vx, vy], [vu, vv]] = quad[i];
+        spriteData[o] = vx;
+        spriteData[o + 1] = vy;
+        spriteData[o + 2] = vu;
+        spriteData[o + 3] = vv;
+        spriteData[o + 4] = r;
+        spriteData[o + 5] = g;
+        spriteData[o + 6] = b;
+        spriteData[o + 7] = al;
+        o += FLOATS_PER_SPRITE_VERT;
+      }
+      spriteCount++;
+    },
+    setMSDFTexture(source, range) {
+      distanceRange = range;
+      if (!msdfTexture) {
+        msdfTexture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      } else {
+        gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
+      }
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    },
+    addGlyph(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
+      if (!msdfTexture) return;
+      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+      glyphData = grow(glyphData, (glyphCount + 1) * stride);
+      const [r, g, b, a] = parseColorToRGBA(color);
+      const al = a * alpha;
+      const s = Math.sin(rotation);
+      const c = Math.cos(rotation);
+      const corner = (lx, ly) => [
+        x + lx * c - ly * s,
+        y + lx * s + ly * c
+      ];
+      const quad = [
+        [corner(0, 0), [u0, v0]],
+        [corner(width, 0), [u1, v0]],
+        [corner(width, height), [u1, v1]],
+        [corner(0, height), [u0, v1]]
+      ];
+      const order = [0, 1, 2, 0, 2, 3];
+      let o = glyphCount * stride;
+      for (const i of order) {
+        const [[vx, vy], [vu, vv]] = quad[i];
+        glyphData[o] = vx;
+        glyphData[o + 1] = vy;
+        glyphData[o + 2] = vu;
+        glyphData[o + 3] = vv;
+        glyphData[o + 4] = r;
+        glyphData[o + 5] = g;
+        glyphData[o + 6] = b;
+        glyphData[o + 7] = al;
+        o += FLOATS_PER_SPRITE_VERT;
+      }
+      glyphCount++;
+    },
+    addCircle(x, y, radius, color, alpha = 1) {
+      pointData = grow(pointData, (pointCount + 1) * FLOATS_PER_POINT);
+      const [r, g, b, a] = parseColorToRGBA(color);
+      const o = pointCount * FLOATS_PER_POINT;
+      pointData[o] = x;
+      pointData[o + 1] = y;
+      pointData[o + 2] = radius;
+      pointData[o + 3] = r;
+      pointData[o + 4] = g;
+      pointData[o + 5] = b;
+      pointData[o + 6] = a * alpha;
+      pointCount++;
+    },
+    addRect(x, y, width, height, color, alpha = 1, rotation = 0) {
+      const stride = FLOATS_PER_RECT_VERT * VERTS_PER_RECT;
+      rectData = grow(rectData, (rectCount + 1) * stride);
+      const [r, g, b, a] = parseColorToRGBA(color);
+      const al = a * alpha;
+      const s = Math.sin(rotation);
+      const c = Math.cos(rotation);
+      const corner = (lx, ly) => [
+        x + lx * c - ly * s,
+        y + lx * s + ly * c
+      ];
+      const p0 = corner(0, 0);
+      const p1 = corner(width, 0);
+      const p2 = corner(width, height);
+      const p3 = corner(0, height);
+      const verts = [p0, p1, p2, p0, p2, p3];
+      let o = rectCount * stride;
+      for (const [vx, vy] of verts) {
+        rectData[o] = vx;
+        rectData[o + 1] = vy;
+        rectData[o + 2] = r;
+        rectData[o + 3] = g;
+        rectData[o + 4] = b;
+        rectData[o + 5] = al;
+        o += FLOATS_PER_RECT_VERT;
+      }
+      rectCount++;
+    },
+    flush() {
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      if (rectCount > 0) {
+        const floats = rectCount * VERTS_PER_RECT * FLOATS_PER_RECT_VERT;
+        gl.useProgram(rectProgram);
+        gl.bindVertexArray(rectVAO);
+        gl.bindBuffer(gl.ARRAY_BUFFER, rectBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, rectData.subarray(0, floats), gl.DYNAMIC_DRAW);
+        gl.uniform2f(rURes, logicalW, logicalH);
+        gl.drawArrays(gl.TRIANGLES, 0, rectCount * VERTS_PER_RECT);
+      }
+      if (pointCount > 0) {
+        gl.useProgram(pointProgram);
+        gl.bindVertexArray(pointVAO);
+        gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          pointData.subarray(0, pointCount * FLOATS_PER_POINT),
+          gl.DYNAMIC_DRAW
+        );
+        gl.uniform2f(pURes, logicalW, logicalH);
+        gl.uniform1f(pUDpr, dpr);
+        gl.drawArrays(gl.POINTS, 0, pointCount);
+      }
+      if (spriteCount > 0 && texture) {
+        const floats = spriteCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+        gl.useProgram(spriteProgram);
+        gl.bindVertexArray(spriteVAO);
+        gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, spriteData.subarray(0, floats), gl.DYNAMIC_DRAW);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.uniform1i(sUTex, 0);
+        gl.uniform2f(sURes, logicalW, logicalH);
+        gl.drawArrays(gl.TRIANGLES, 0, spriteCount * VERTS_PER_SPRITE);
+      }
+      if (glyphCount > 0 && msdfTexture) {
+        const floats = glyphCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+        gl.useProgram(msdfProgram);
+        gl.bindVertexArray(glyphVAO);
+        gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, glyphData.subarray(0, floats), gl.DYNAMIC_DRAW);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
+        gl.uniform1i(gUTex, 0);
+        gl.uniform2f(gURes, logicalW, logicalH);
+        gl.uniform1f(gURange, distanceRange);
+        gl.drawArrays(gl.TRIANGLES, 0, glyphCount * VERTS_PER_SPRITE);
+      }
+      gl.bindVertexArray(null);
+    },
+    destroy() {
+      gl.deleteBuffer(pointBuffer);
+      gl.deleteBuffer(rectBuffer);
+      gl.deleteBuffer(spriteBuffer);
+      gl.deleteBuffer(glyphBuffer);
+      gl.deleteVertexArray(pointVAO);
+      gl.deleteVertexArray(rectVAO);
+      gl.deleteVertexArray(spriteVAO);
+      gl.deleteVertexArray(glyphVAO);
+      gl.deleteProgram(pointProgram);
+      gl.deleteProgram(rectProgram);
+      gl.deleteProgram(spriteProgram);
+      gl.deleteProgram(msdfProgram);
+      if (texture) gl.deleteTexture(texture);
+      if (msdfTexture) gl.deleteTexture(msdfTexture);
+    }
+  };
+}
+
+// src/renderer/WebGPUParticleSystemManager.ts
+var COMPUTE_SHADER = `
+struct Particle {
+  position: vec2<f32>,
+  velocity: vec2<f32>,
+  origin: vec2<f32>,
+  size: f32,
+  life: f32,
+}
+
+struct Params {
+  base_color: vec4<f32>,
+  mouse_pos: vec2<f32>,
+  screen_size: vec2<f32>,
+  explosion_pos: vec2<f32>,
+  dt: f32,
+  spring_k: f32,
+  damping: f32,
+  explosion_force: f32,
+  bounce_damping: f32,
+  max_particles: u32,
+  max_velocity: f32,
+  pad0: f32,
+  pad1: f32,
+  pad2: f32,
+}
+
+@group(0) @binding(0) var<uniform> params: Params;
+@group(0) @binding(1) var<storage, read_write> particles: array<Particle>;
+
+@compute @workgroup_size(256)
+fn cs_main(@builtin(global_invocation_id) global_id: vec3<u32>) {
+  let idx = global_id.x;
+  if (idx >= params.max_particles) {
+    return;
+  }
+
+  var p = particles[idx];
+  let dt = clamp(params.dt, 0.0, 0.1);
+  let safe_screen_size = max(params.screen_size, vec2<f32>(1.0, 1.0));
+  
+  let spring_k = clamp(params.spring_k, 0.0, 10.0);
+  let damping = clamp(params.damping, 0.0, 1.0);
+  let bounce_damping = clamp(params.bounce_damping, 0.0, 1.0);
+  let max_velocity = max(params.max_velocity, 1.0);
+
+  let to_origin = p.origin - p.position;
+  let spring_force = to_origin * spring_k;
+
+  var mouse_force = vec2<f32>(0.0, 0.0);
+  let to_mouse = params.mouse_pos - p.position;
+  let dist = length(to_mouse);
+  if (dist < 120.0 && dist > 0.1) {
+    let force_magnitude = (120.0 - dist) * 2.0;
+    mouse_force = -normalize(to_mouse) * force_magnitude;
+  }
+
+  var expl_force = vec2<f32>(0.0, 0.0);
+  if (params.explosion_force > 0.0) {
+    let to_expl = params.explosion_pos - p.position;
+    let expl_dist = length(to_expl);
+    if (expl_dist < 150.0 && expl_dist > 0.1) {
+      let f = (150.0 - expl_dist) * params.explosion_force;
+      expl_force = -normalize(to_expl) * f;
+    }
+  }
+
+  let accel = spring_force + mouse_force + expl_force;
+  p.velocity = (p.velocity + accel * dt) * damping;
+
+  let speed = length(p.velocity);
+  if (speed > max_velocity) {
+    p.velocity = normalize(p.velocity) * max_velocity;
+  }
+
+  p.position = p.position + p.velocity * dt;
+
+  if (p.position.x <= 0.0 && p.velocity.x < 0.0) {
+    p.velocity.x = -p.velocity.x * bounce_damping;
+  } else if (p.position.x >= safe_screen_size.x && p.velocity.x > 0.0) {
+    p.velocity.x = -p.velocity.x * bounce_damping;
+  }
+
+  if (p.position.y <= 0.0 && p.velocity.y < 0.0) {
+    p.velocity.y = -p.velocity.y * bounce_damping;
+  } else if (p.position.y >= safe_screen_size.y && p.velocity.y > 0.0) {
+    p.velocity.y = -p.velocity.y * bounce_damping;
+  }
+
+  p.position = clamp(p.position, vec2<f32>(0.0, 0.0), safe_screen_size);
+
+  if (p.life >= 0.0) {
+    p.life = max(0.0, p.life - dt * 0.5);
+  }
+
+  particles[idx] = p;
+}
+`;
+var RENDER_SHADER = `
+struct Particle {
+  position: vec2<f32>,
+  velocity: vec2<f32>,
+  origin: vec2<f32>,
+  size: f32,
+  life: f32,
+}
+
+struct Params {
+  base_color: vec4<f32>,
+  mouse_pos: vec2<f32>,
+  screen_size: vec2<f32>,
+  explosion_pos: vec2<f32>,
+  dt: f32,
+  spring_k: f32,
+  damping: f32,
+  explosion_force: f32,
+  bounce_damping: f32,
+  max_particles: u32,
+  max_velocity: f32,
+  pad0: f32,
+  pad1: f32,
+  pad2: f32,
+}
+
+struct VertexOutput {
+  @builtin(position) pos: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+  @location(1) color: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> params: Params;
+@group(0) @binding(1) var<storage, read> particles: array<Particle>;
+
+@vertex
+fn vs_main(
+  @builtin(vertex_index) vertex_idx: u32,
+  @builtin(instance_index) instance_idx: u32
+) -> VertexOutput {
+  let p = particles[instance_idx];
+  let uvs = array<vec2<f32>, 6>(
+    vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),
+    vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0)
+  );
+
+  let safe_screen_size = max(params.screen_size, vec2<f32>(1.0, 1.0));
+  var life_scale = 1.0;
+  if (p.life >= 0.0) {
+    life_scale = clamp(p.life, 0.0, 1.0);
+  }
+  let visual_size = p.size * life_scale;
+  let offset = uvs[vertex_idx] * visual_size;
+  let world_pos = p.position + offset;
+
+  let ndc_x = (world_pos.x / safe_screen_size.x) * 2.0 - 1.0;
+  let ndc_y = 1.0 - (world_pos.y / safe_screen_size.y) * 2.0;
+
+  var out: VertexOutput;
+  out.pos = vec4<f32>(ndc_x, ndc_y, 0.0, 1.0);
+  out.uv = uvs[vertex_idx];
+  out.color = vec4<f32>(params.base_color.rgb, params.base_color.a * life_scale);
+  return out;
+}
+
+@fragment
+fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
+  let dist = length(in.uv);
+  if (dist > 1.0) {
+    discard;
+  }
+  let alpha = 1.0 - smoothstep(0.85, 1.0, dist);
+  return vec4<f32>(in.color.rgb, in.color.a * alpha);
+}
+`;
+var WebGPUParticleSystemManager = class {
+  device;
+  computePipeline = null;
+  renderPipeline = null;
+  computeBindGroupLayout = null;
+  renderBindGroupLayout = null;
+  constructor(device) {
+    this.device = device;
+  }
+  initPipelines(format) {
+    const computeModule = this.device.createShaderModule({ code: COMPUTE_SHADER });
+    const renderModule = this.device.createShaderModule({ code: RENDER_SHADER });
+    this.computeBindGroupLayout = this.device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.COMPUTE,
+          buffer: { type: "uniform" }
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.COMPUTE,
+          buffer: { type: "storage" }
+        }
+      ]
+    });
+    this.renderBindGroupLayout = this.device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX,
+          buffer: { type: "uniform" }
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.VERTEX,
+          buffer: { type: "read-only-storage" }
+        }
+      ]
+    });
+    const computePipelineLayout = this.device.createPipelineLayout({
+      bindGroupLayouts: [this.computeBindGroupLayout]
+    });
+    const renderPipelineLayout = this.device.createPipelineLayout({
+      bindGroupLayouts: [this.renderBindGroupLayout]
+    });
+    this.computePipeline = this.device.createComputePipeline({
+      layout: computePipelineLayout,
+      compute: { module: computeModule, entryPoint: "cs_main" }
+    });
+    this.renderPipeline = this.device.createRenderPipeline({
+      layout: renderPipelineLayout,
+      vertex: { module: renderModule, entryPoint: "vs_main" },
+      fragment: {
+        module: renderModule,
+        entryPoint: "fs_main",
+        targets: [
+          {
+            format,
+            blend: {
+              color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
+              alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
+            }
+          }
+        ]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+  }
+  setupEntityResources(entity) {
+    const storageSize = entity.maxParticles * 32;
+    entity.gpuStorageBuffer = this.device.createBuffer({
+      size: storageSize,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    entity.gpuUniformBuffer = this.device.createBuffer({
+      size: 80,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    entity.computeBindGroup = this.device.createBindGroup({
+      layout: this.computeBindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: entity.gpuUniformBuffer } },
+        { binding: 1, resource: { buffer: entity.gpuStorageBuffer } }
+      ]
+    });
+    entity.renderBindGroup = this.device.createBindGroup({
+      layout: this.renderBindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: entity.gpuUniformBuffer } },
+        { binding: 1, resource: { buffer: entity.gpuStorageBuffer } }
+      ]
+    });
+  }
+  recordComputePass(pass, entity, dt, mouseX, mouseY, width, height) {
+    if (!this.computePipeline || !entity.computeBindGroup) return;
+    const uniformArray = new Float32Array(20);
+    const color = parseColorToRGBA(entity.baseColor);
+    uniformArray[0] = color[0];
+    uniformArray[1] = color[1];
+    uniformArray[2] = color[2];
+    uniformArray[3] = color[3];
+    const mActive = !isNaN(mouseX) && !isNaN(mouseY) && mouseX > -9e3 && mouseY > -9e3;
+    uniformArray[4] = mActive ? mouseX : -9999;
+    uniformArray[5] = mActive ? mouseY : -9999;
+    uniformArray[6] = Math.max(1, width);
+    uniformArray[7] = Math.max(1, height);
+    if (entity.pendingExplosion) {
+      uniformArray[8] = entity.pendingExplosion.x;
+      uniformArray[9] = entity.pendingExplosion.y;
+      uniformArray[13] = entity.pendingExplosion.force;
+      entity.pendingExplosion = null;
+    } else {
+      uniformArray[8] = 0;
+      uniformArray[9] = 0;
+      uniformArray[13] = 0;
+    }
+    uniformArray[10] = isNaN(dt) ? 0.016 : dt;
+    uniformArray[11] = Math.max(0, Math.min(10, entity.springK));
+    uniformArray[12] = Math.max(0, Math.min(1, entity.damping));
+    uniformArray[14] = Math.max(0, Math.min(1, entity.bounceDamping));
+    uniformArray[16] = Math.max(1, entity.maxVelocity);
+    new Uint32Array(uniformArray.buffer)[15] = entity.maxParticles;
+    this.device.queue.writeBuffer(entity.gpuUniformBuffer, 0, uniformArray);
+    pass.setPipeline(this.computePipeline);
+    pass.setBindGroup(0, entity.computeBindGroup);
+    const workgroups = Math.ceil(entity.maxParticles / 256);
+    pass.dispatchWorkgroups(workgroups);
+  }
+  recordRenderPass(pass, entity) {
+    if (!this.renderPipeline || !entity.renderBindGroup) return;
+    pass.setPipeline(this.renderPipeline);
+    pass.setBindGroup(0, entity.renderBindGroup);
+    pass.draw(6, entity.maxParticles);
+  }
+  destroy() {
+    this.computePipeline = null;
+    this.renderPipeline = null;
+    this.computeBindGroupLayout = null;
+    this.renderBindGroupLayout = null;
+  }
+};
+
+export {
+  CanvasRenderer,
+  SVGRenderer,
+  parseColorToRGBA,
+  createWebGLPointRenderer,
+  WebGPUParticleSystemManager
+};