@koiosdigital/matrx-render 0.1.0

package/dist/chunk-NASKU36A.js

@@ -0,0 +1,551 @@
+// src/canvas.ts
+var Canvas = class {
+  width;
+  height;
+  /** Premultiplied RGBA, length = width * height * 4. */
+  pix;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    this.pix = new Uint8Array(width * height * 4);
+  }
+  /**
+   * Fill every pixel with `c`, ignoring any clip — mirrors gg.Clear()
+   * (draw.Src over the whole image). Used by Root for solid backgrounds.
+   */
+  clear(c) {
+    const a = c.a;
+    const r = Math.floor(c.r * 257 * a / 255) >> 8;
+    const g = Math.floor(c.g * 257 * a / 255) >> 8;
+    const b = Math.floor(c.b * 257 * a / 255) >> 8;
+    const { pix } = this;
+    for (let i = 0; i < pix.length; i += 4) {
+      pix[i] = r;
+      pix[i + 1] = g;
+      pix[i + 2] = b;
+      pix[i + 3] = a;
+    }
+  }
+  /** Premultiplied RGBA of pixel (x, y). Out of bounds returns zeros. */
+  at(x, y) {
+    if (x < 0 || y < 0 || x >= this.width || y >= this.height) {
+      return [0, 0, 0, 0];
+    }
+    const i = (y * this.width + x) * 4;
+    const p = this.pix;
+    return [p[i], p[i + 1], p[i + 2], p[i + 3]];
+  }
+};
+
+// src/color.ts
+var WHITE = { r: 255, g: 255, b: 255, a: 255 };
+var BLACK = { r: 0, g: 0, b: 0, a: 255 };
+var TRANSPARENT = { r: 0, g: 0, b: 0, a: 0 };
+var HEX = /^[0-9a-fA-F]+$/;
+function parseColor(scol) {
+  const s = scol.startsWith("#") ? scol.slice(1) : scol;
+  if (!HEX.test(s)) {
+    throw new Error(`color: ${s} is not a hex-color`);
+  }
+  let r, g, b, a;
+  switch (s.length) {
+    case 3: {
+      [r, g, b] = [0, 1, 2].map((i) => parseInt(s[i], 16));
+      a = 15;
+      break;
+    }
+    case 4: {
+      [r, g, b, a] = [0, 1, 2, 3].map((i) => parseInt(s[i], 16));
+      break;
+    }
+    case 6: {
+      [r, g, b] = [0, 2, 4].map((i) => parseInt(s.slice(i, i + 2), 16));
+      a = 255;
+      return { r, g, b, a };
+    }
+    case 8: {
+      [r, g, b, a] = [0, 2, 4, 6].map((i) => parseInt(s.slice(i, i + 2), 16));
+      return { r, g, b, a };
+    }
+    default:
+      throw new Error(`color: ${s} is not a hex-color`);
+  }
+  return { r: r | r << 4, g: g | g << 4, b: b | b << 4, a: a | a << 4 };
+}
+function color16(c) {
+  return {
+    r: Math.floor(c.r * 257 * c.a / 255),
+    g: Math.floor(c.g * 257 * c.a / 255),
+    b: Math.floor(c.b * 257 * c.a / 255),
+    a: c.a * 257
+  };
+}
+
+// src/blend.ts
+var M = 65535;
+function fillRectSolid(dst, x0, y0, x1, y1, c, mask) {
+  if (x0 < 0) x0 = 0;
+  if (y0 < 0) y0 = 0;
+  if (x1 > dst.width) x1 = dst.width;
+  if (y1 > dst.height) y1 = dst.height;
+  if (x0 >= x1 || y0 >= y1) return;
+  const { pix, width } = dst;
+  for (let y = y0; y < y1; y++) {
+    let i = (y * width + x0) * 4;
+    for (let x = x0; x < x1; x++, i += 4) {
+      let ma = M;
+      if (mask !== null) {
+        ma = Math.floor(ma * mask[y * width + x] / 255);
+        if (ma === 0) continue;
+      }
+      const a = (M - Math.floor(c.a * ma / M)) * 257;
+      pix[i] = Math.floor((pix[i] * a + c.r * ma) / M) >> 8;
+      pix[i + 1] = Math.floor((pix[i + 1] * a + c.g * ma) / M) >> 8;
+      pix[i + 2] = Math.floor((pix[i + 2] * a + c.b * ma) / M) >> 8;
+      pix[i + 3] = Math.floor((pix[i + 3] * a + c.a * ma) / M) >> 8;
+    }
+  }
+}
+function drawCanvasOver(dst, src, tx, ty, mask) {
+  const x0 = Math.max(0, tx);
+  const y0 = Math.max(0, ty);
+  const x1 = Math.min(dst.width, tx + src.width);
+  const y1 = Math.min(dst.height, ty + src.height);
+  if (x0 >= x1 || y0 >= y1) return;
+  const dp = dst.pix;
+  const sp = src.pix;
+  for (let y = y0; y < y1; y++) {
+    let di = (y * dst.width + x0) * 4;
+    let si = ((y - ty) * src.width + (x0 - tx)) * 4;
+    for (let x = x0; x < x1; x++, di += 4, si += 4) {
+      let ma = M;
+      if (mask !== null) {
+        ma = mask[y * dst.width + x] * 257;
+        if (ma === 0) continue;
+      }
+      const sr = Math.floor(sp[si] * 257 * ma / M);
+      const sg = Math.floor(sp[si + 1] * 257 * ma / M);
+      const sb = Math.floor(sp[si + 2] * 257 * ma / M);
+      const sa = Math.floor(sp[si + 3] * 257 * ma / M);
+      if (sa === 0 && sr === 0 && sg === 0 && sb === 0) continue;
+      const q = M - sa;
+      dp[di] = sr + Math.floor(dp[di] * 257 * q / M) >> 8;
+      dp[di + 1] = sg + Math.floor(dp[di + 1] * 257 * q / M) >> 8;
+      dp[di + 2] = sb + Math.floor(dp[di + 2] * 257 * q / M) >> 8;
+      dp[di + 3] = sa + Math.floor(dp[di + 3] * 257 * q / M) >> 8;
+    }
+  }
+}
+function paintPixel(dst, x, y, c, ma) {
+  if (x < 0 || y < 0 || x >= dst.width || y >= dst.height || ma === 0) return;
+  const i = (y * dst.width + x) * 4;
+  const pix = dst.pix;
+  const a = (M - Math.floor(c.a * ma / M)) * 257;
+  pix[i] = Math.floor((pix[i] * a + c.r * ma) / M) >> 8;
+  pix[i + 1] = Math.floor((pix[i + 1] * a + c.g * ma) / M) >> 8;
+  pix[i + 2] = Math.floor((pix[i + 2] * a + c.b * ma) / M) >> 8;
+  pix[i + 3] = Math.floor((pix[i + 3] * a + c.a * ma) / M) >> 8;
+}
+function blendSampledPixel(dst, x, y, sr, sg, sb, sa, ma) {
+  if (x < 0 || y < 0 || x >= dst.width || y >= dst.height || ma === 0) return;
+  const i = (y * dst.width + x) * 4;
+  const p = dst.pix;
+  const er = Math.floor(sr * ma / M);
+  const eg = Math.floor(sg * ma / M);
+  const eb = Math.floor(sb * ma / M);
+  const ea = Math.floor(sa * ma / M);
+  if (ea === 0 && er === 0 && eg === 0 && eb === 0) return;
+  const q = M - ea;
+  p[i] = er + Math.floor(p[i] * 257 * q / M) >> 8;
+  p[i + 1] = eg + Math.floor(p[i + 1] * 257 * q / M) >> 8;
+  p[i + 2] = eb + Math.floor(p[i + 2] * 257 * q / M) >> 8;
+  p[i + 3] = ea + Math.floor(p[i + 3] * 257 * q / M) >> 8;
+}
+function blendPixel(dst, x, y, c, ma) {
+  if (x < 0 || y < 0 || x >= dst.width || y >= dst.height || ma === 0) return;
+  const i = (y * dst.width + x) * 4;
+  const p = dst.pix;
+  const sr = Math.floor(c.r * ma / M);
+  const sg = Math.floor(c.g * ma / M);
+  const sb = Math.floor(c.b * ma / M);
+  const sa = Math.floor(c.a * ma / M);
+  const q = M - sa;
+  p[i] = sr + Math.floor(p[i] * 257 * q / M) >> 8;
+  p[i + 1] = sg + Math.floor(p[i + 1] * 257 * q / M) >> 8;
+  p[i + 2] = sb + Math.floor(p[i + 2] * 257 * q / M) >> 8;
+  p[i + 3] = sa + Math.floor(p[i + 3] * 257 * q / M) >> 8;
+}
+
+// src/raster.ts
+function clipHalfPlane(poly, side, intersect) {
+  const out = [];
+  for (let i = 0; i < poly.length; i++) {
+    const cur = poly[i];
+    const prev = poly[(i + poly.length - 1) % poly.length];
+    const curIn = side(cur) >= 0;
+    const prevIn = side(prev) >= 0;
+    if (curIn) {
+      if (!prevIn) out.push(intersect(prev, cur));
+      out.push(cur);
+    } else if (prevIn) {
+      out.push(intersect(prev, cur));
+    }
+  }
+  return out;
+}
+function polyArea(poly) {
+  let area = 0;
+  for (let i = 0; i < poly.length; i++) {
+    const a = poly[i];
+    const b = poly[(i + 1) % poly.length];
+    area += a.x * b.y - b.x * a.y;
+  }
+  return Math.abs(area) / 2;
+}
+function pixelCoverage(poly, px, py) {
+  let p = poly;
+  const x0 = px, x1 = px + 1, y0 = py, y1 = py + 1;
+  const ix = (a, b, x) => ({
+    x,
+    y: a.y + (b.y - a.y) * (x - a.x) / (b.x - a.x)
+  });
+  const iy = (a, b, y) => ({
+    x: a.x + (b.x - a.x) * (y - a.y) / (b.y - a.y),
+    y
+  });
+  p = clipHalfPlane(p, (q) => q.x - x0, (a, b) => ix(a, b, x0));
+  if (p.length === 0) return 0;
+  p = clipHalfPlane(p, (q) => x1 - q.x, (a, b) => ix(a, b, x1));
+  if (p.length === 0) return 0;
+  p = clipHalfPlane(p, (q) => q.y - y0, (a, b) => iy(a, b, y0));
+  if (p.length === 0) return 0;
+  p = clipHalfPlane(p, (q) => y1 - q.y, (a, b) => iy(a, b, y1));
+  if (p.length === 0) return 0;
+  return polyArea(p);
+}
+function rasterizePolygon(poly, w, h, emit) {
+  if (poly.length < 3) return;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of poly) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+  const px0 = Math.max(0, Math.floor(minX));
+  const py0 = Math.max(0, Math.floor(minY));
+  const px1 = Math.min(w, Math.ceil(maxX));
+  const py1 = Math.min(h, Math.ceil(maxY));
+  for (let y = py0; y < py1; y++) {
+    for (let x = px0; x < px1; x++) {
+      const cov = pixelCoverage(poly, x, y);
+      if (cov <= 0) continue;
+      const ma = Math.min(65535, Math.round(cov * 65535));
+      if (ma > 0) emit(x, y, ma);
+    }
+  }
+}
+
+// src/context.ts
+var identity = () => ({ xx: 1, yx: 0, xy: 0, yy: 1, x0: 0, y0: 0 });
+function multiply(b, a) {
+  return {
+    xx: b.xx * a.xx + b.yx * a.xy,
+    yx: b.xx * a.yx + b.yx * a.yy,
+    xy: b.xy * a.xx + b.yy * a.xy,
+    yy: b.xy * a.yx + b.yy * a.yy,
+    x0: b.x0 * a.xx + b.y0 * a.xy + a.x0,
+    y0: b.x0 * a.yx + b.y0 * a.yy + a.y0
+  };
+}
+function transformPoint(m, x, y) {
+  return { x: m.xx * x + m.xy * y + m.x0, y: m.yx * x + m.yy * y + m.y0 };
+}
+function isIntegerTranslation(m) {
+  return m.xx === 1 && m.yx === 0 && m.xy === 0 && m.yy === 1 && Number.isInteger(m.x0) && Number.isInteger(m.y0);
+}
+function invert(m) {
+  const det = m.xx * m.yy - m.xy * m.yx;
+  if (det === 0 || !Number.isFinite(det)) return null;
+  const inv = 1 / det;
+  return {
+    xx: m.yy * inv,
+    xy: -m.xy * inv,
+    yx: -m.yx * inv,
+    yy: m.xx * inv,
+    x0: (m.xy * m.y0 - m.yy * m.x0) * inv,
+    y0: (m.yx * m.x0 - m.xx * m.y0) * inv
+  };
+}
+var DrawContext = class {
+  canvas;
+  st;
+  stack = [];
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.st = { matrix: identity(), color: color16(TRANSPARENT), mask: null };
+  }
+  push() {
+    this.stack.push({ ...this.st });
+  }
+  pop() {
+    const st = this.stack.pop();
+    if (!st) {
+      throw new Error("DrawContext.pop() without matching push()");
+    }
+    this.st = st;
+  }
+  // --- Transform ops (compose in local space, like gg) ---------------------
+  translate(dx, dy) {
+    this.st.matrix = multiply(
+      { xx: 1, yx: 0, xy: 0, yy: 1, x0: dx, y0: dy },
+      this.st.matrix
+    );
+  }
+  scale(sx, sy) {
+    this.st.matrix = multiply(
+      { xx: sx, yx: 0, xy: 0, yy: sy, x0: 0, y0: 0 },
+      this.st.matrix
+    );
+  }
+  /** Anticlockwise rotation about the origin, radians. */
+  rotate(angle) {
+    const c = Math.cos(angle);
+    const s = Math.sin(angle);
+    this.st.matrix = multiply(
+      { xx: c, yx: s, xy: -s, yy: c, x0: 0, y0: 0 },
+      this.st.matrix
+    );
+  }
+  scaleAbout(sx, sy, x, y) {
+    this.translate(x, y);
+    this.scale(sx, sy);
+    this.translate(-x, -y);
+  }
+  rotateAbout(angle, x, y) {
+    this.translate(x, y);
+    this.rotate(angle);
+    this.translate(-x, -y);
+  }
+  setColor(c) {
+    this.st.color = color16(c);
+  }
+  // --- Drawing --------------------------------------------------------------
+  /** Transformed corners of rect (x,y,w,h), in path order. */
+  rectQuad(x, y, w, h) {
+    const m = this.st.matrix;
+    return [
+      transformPoint(m, x, y),
+      transformPoint(m, x + w, y),
+      transformPoint(m, x + w, y + h),
+      transformPoint(m, x, y + h)
+    ];
+  }
+  /**
+   * gg DrawRectangle(x,y,w,h) + Fill().
+   * A negative width/height rectangle is a reversed-winding path covering
+   * [x+w, x] × [y+h, y]; the non-zero winding rule still fills it.
+   */
+  fillRect(x, y, w, h) {
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
+    if (isIntegerTranslation(this.st.matrix)) {
+      const dx0 = this.st.matrix.x0 + x;
+      const dy0 = this.st.matrix.y0 + y;
+      fillRectSolid(
+        this.canvas,
+        dx0,
+        dy0,
+        dx0 + w,
+        dy0 + h,
+        this.st.color,
+        this.st.mask
+      );
+      return;
+    }
+    const quad = this.rectQuad(x, y, w, h);
+    const { canvas } = this;
+    const mask = this.st.mask;
+    const color = this.st.color;
+    rasterizePolygon(quad, canvas.width, canvas.height, (px, py, cov) => {
+      let ma = cov;
+      if (mask !== null) {
+        ma = Math.floor(ma * mask[py * canvas.width + px] / 255);
+        if (ma === 0) return;
+      }
+      paintPixel(canvas, px, py, color, ma);
+    });
+  }
+  /**
+   * gg DrawRectangle(x,y,w,h) + Clip(): intersect the clip region with the
+   * given rectangle (in current-transform space).
+   */
+  clipRect(x, y, w, h) {
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
+    const { width, height } = this.canvas;
+    const next = new Uint8Array(width * height);
+    const prev = this.st.mask;
+    if (isIntegerTranslation(this.st.matrix)) {
+      const x0 = Math.max(0, this.st.matrix.x0 + x);
+      const y0 = Math.max(0, this.st.matrix.y0 + y);
+      const x1 = Math.min(width, this.st.matrix.x0 + x + w);
+      const y1 = Math.min(height, this.st.matrix.y0 + y + h);
+      for (let yy = y0; yy < y1; yy++) {
+        const row = yy * width;
+        for (let xx = x0; xx < x1; xx++) {
+          next[row + xx] = prev === null ? 255 : prev[row + xx];
+        }
+      }
+    } else {
+      rasterizePolygon(this.rectQuad(x, y, w, h), width, height, (px, py, cov) => {
+        let a = cov >> 8;
+        if (prev !== null) {
+          a = Math.floor(a * 257 * (prev[py * width + px] * 257) / 65535) >> 8;
+        }
+        next[py * width + px] = a;
+      });
+    }
+    this.st.mask = next;
+  }
+  /**
+   * gg SetPixel: sets the pixel to the current color, converting like Go's
+   * image.RGBA.Set (NRGBA → premultiplied). Note: like gg, this *ignores*
+   * the clip mask and compositing — it is a raw store. Plot depends on it.
+   */
+  setPixel(x, y) {
+    const { canvas } = this;
+    if (x < 0 || y < 0 || x >= canvas.width || y >= canvas.height) return;
+    const i = (y * canvas.width + x) * 4;
+    const c = this.st.color;
+    canvas.pix[i] = c.r >> 8;
+    canvas.pix[i + 1] = c.g >> 8;
+    canvas.pix[i + 2] = c.b >> 8;
+    canvas.pix[i + 3] = c.a >> 8;
+  }
+  /** Apply the current matrix to a point (gg TransformPoint). */
+  transformPoint(x, y) {
+    return transformPoint(this.st.matrix, x, y);
+  }
+  /**
+   * Fill an arbitrary polygon given in local (pre-transform) coordinates
+   * with the current color — the gg path-Fill equivalent for non-rect
+   * shapes (Circle, PieChart). Coverage-based AA, honors the clip mask.
+   */
+  fillPolygon(localPts) {
+    const m = this.st.matrix;
+    const device = localPts.map((p) => transformPoint(m, p.x, p.y));
+    const { canvas } = this;
+    const mask = this.st.mask;
+    const color = this.st.color;
+    rasterizePolygon(device, canvas.width, canvas.height, (px, py, cov) => {
+      let ma = cov;
+      if (mask !== null) {
+        ma = Math.floor(ma * mask[py * canvas.width + px] / 255);
+        if (ma === 0) return;
+      }
+      paintPixel(canvas, px, py, color, ma);
+    });
+  }
+  /** gg DrawImage(src, x, y) with the current transform and clip. */
+  drawCanvas(src, x, y) {
+    const s2d = multiply(
+      { xx: 1, yx: 0, xy: 0, yy: 1, x0: x, y0: y },
+      this.st.matrix
+    );
+    if (isIntegerTranslation(s2d)) {
+      drawCanvasOver(this.canvas, src, s2d.x0, s2d.y0, this.st.mask);
+      return;
+    }
+    const d2s = invert(s2d);
+    if (!d2s) return;
+    const corners = [
+      transformPoint(s2d, 0, 0),
+      transformPoint(s2d, src.width, 0),
+      transformPoint(s2d, src.width, src.height),
+      transformPoint(s2d, 0, src.height)
+    ];
+    const px0 = Math.max(0, Math.floor(Math.min(...corners.map((p) => p.x))));
+    const py0 = Math.max(0, Math.floor(Math.min(...corners.map((p) => p.y))));
+    const px1 = Math.min(this.canvas.width, Math.ceil(Math.max(...corners.map((p) => p.x))));
+    const py1 = Math.min(this.canvas.height, Math.ceil(Math.max(...corners.map((p) => p.y))));
+    const mask = this.st.mask;
+    const sp = src.pix;
+    const sw = src.width;
+    const sh = src.height;
+    const tap = (tx, ty) => {
+      if (tx < 0 || ty < 0 || tx >= sw || ty >= sh) return [0, 0, 0, 0];
+      const i = (ty * sw + tx) * 4;
+      return [sp[i] * 257, sp[i + 1] * 257, sp[i + 2] * 257, sp[i + 3] * 257];
+    };
+    for (let dy = py0; dy < py1; dy++) {
+      for (let dx = px0; dx < px1; dx++) {
+        let ma = 65535;
+        if (mask !== null) {
+          ma = mask[dy * this.canvas.width + dx] * 257;
+          if (ma === 0) continue;
+        }
+        const p = transformPoint(d2s, dx + 0.5, dy + 0.5);
+        const sx = p.x - 0.5;
+        const sy = p.y - 0.5;
+        const sx0 = Math.floor(sx);
+        const sy0 = Math.floor(sy);
+        const fx = sx - sx0;
+        const fy = sy - sy0;
+        if (sx0 < -1 || sy0 < -1 || sx0 >= sw || sy0 >= sh) continue;
+        const t00 = tap(sx0, sy0);
+        const t10 = tap(sx0 + 1, sy0);
+        const t01 = tap(sx0, sy0 + 1);
+        const t11 = tap(sx0 + 1, sy0 + 1);
+        const w00 = (1 - fx) * (1 - fy);
+        const w10 = fx * (1 - fy);
+        const w01 = (1 - fx) * fy;
+        const w11 = fx * fy;
+        const sr = t00[0] * w00 + t10[0] * w10 + t01[0] * w01 + t11[0] * w11;
+        const sg = t00[1] * w00 + t10[1] * w10 + t01[1] * w01 + t11[1] * w11;
+        const sb = t00[2] * w00 + t10[2] * w10 + t01[2] * w01 + t11[2] * w11;
+        const sa = t00[3] * w00 + t10[3] * w10 + t01[3] * w01 + t11[3] * w11;
+        if (sa === 0 && sr === 0 && sg === 0 && sb === 0) continue;
+        blendSampledPixel(
+          this.canvas,
+          dx,
+          dy,
+          Math.round(sr),
+          Math.round(sg),
+          Math.round(sb),
+          Math.round(sa),
+          ma
+        );
+      }
+    }
+  }
+};
+
+// src/geometry.ts
+function bounds(w, h) {
+  return { w: Math.abs(w), h: Math.abs(h) };
+}
+
+export {
+  Canvas,
+  blendPixel,
+  WHITE,
+  BLACK,
+  TRANSPARENT,
+  parseColor,
+  color16,
+  DrawContext,
+  bounds
+};

package/dist/encode/webp-jsquash.d.ts

@@ -0,0 +1,37 @@
+import { F as FrameEncoder, W as WebpDecoder } from '../webp-D106DLhy.js';
+import '../widget-DABrpucj.js';
+
+/**
+ * FrameEncoder adapter for @jsquash/webp (WASM libwebp; runs in Workers,
+ * browsers, and Node). Kept out of the package root so consumers that don't
+ * encode WebP never load the emscripten glue.
+ *
+ * Determinism (§8): we bypass @jsquash's `init()`, which auto-selects a
+ * SIMD or non-SIMD build at runtime — two different codec builds that can
+ * emit different (equally valid) bitstreams, which would fracture the
+ * sha256/ETag across environments. Instead the NON-SIMD factory is wired
+ * explicitly and the caller must supply that exact wasm module
+ * (`codec/enc/webp_enc.wasm`): a Workers wasm-module binding in prod, a
+ * compiled module from disk in Node/tests.
+ *
+ * Frames are encoded LOSSLESS. Note (documented divergence): the Go
+ * renderer's libwebp path encodes lossy-by-default; for 64×32 pixel art
+ * lossless is exact and comparable in size, and pixel parity is perceptual
+ * (§14). Pin @jsquash/webp exactly and surface its version in the
+ * render-plane cache key.
+ */
+
+/**
+ * Create a FrameEncoder backed by the non-SIMD @jsquash/webp codec.
+ * `wasm` must be the compiled `@jsquash/webp/codec/enc/webp_enc.wasm`
+ * module (Workers binding import or WebAssembly.compile of the file).
+ */
+declare function jsquashFrameEncoder(wasm: WebAssembly.Module): FrameEncoder;
+/**
+ * Create a WebpDecoder (for the Image widget — `setWebpDecoder()`) backed
+ * by the non-SIMD @jsquash/webp codec. `wasm` must be the compiled
+ * `@jsquash/webp/codec/dec/webp_dec.wasm` module.
+ */
+declare function jsquashWebpDecoder(wasm: WebAssembly.Module): WebpDecoder;
+
+export { jsquashFrameEncoder, jsquashWebpDecoder };

package/dist/encode/webp-jsquash.js

@@ -0,0 +1,86 @@
+// src/encode/webp-jsquash.ts
+import webpEncFactory from "@jsquash/webp/codec/enc/webp_enc.js";
+import webpDecFactory from "@jsquash/webp/codec/dec/webp_dec.js";
+var ENCODE_OPTIONS = {
+  quality: 75,
+  target_size: 0,
+  target_PSNR: 0,
+  method: 4,
+  sns_strength: 50,
+  filter_strength: 60,
+  filter_sharpness: 0,
+  filter_type: 1,
+  partitions: 0,
+  segments: 4,
+  pass: 1,
+  show_compressed: 0,
+  preprocessing: 0,
+  autofilter: 0,
+  partition_limit: 0,
+  alpha_compression: 1,
+  alpha_filtering: 1,
+  alpha_quality: 100,
+  lossless: 1,
+  exact: 0,
+  image_hint: 0,
+  emulate_jpeg_size: 0,
+  thread_level: 0,
+  low_memory: 0,
+  near_lossless: 100,
+  use_delta_palette: 0,
+  use_sharp_yuv: 0
+};
+var modulePromise = null;
+function jsquashFrameEncoder(wasm) {
+  return async (rgba, width, height) => {
+    if (!modulePromise) {
+      modulePromise = webpEncFactory({
+        noInitialRun: true,
+        instantiateWasm: (imports, callback) => {
+          const instance = new WebAssembly.Instance(wasm, imports);
+          callback(instance);
+          return instance.exports;
+        }
+      });
+    }
+    const mod = await modulePromise;
+    const result = mod.encode(rgba, width, height, ENCODE_OPTIONS);
+    if (!result) {
+      throw new Error("WebP encoding error");
+    }
+    return new Uint8Array(result.buffer, result.byteOffset, result.byteLength).slice();
+  };
+}
+var decModulePromise = null;
+function jsquashWebpDecoder(wasm) {
+  return async (data) => {
+    if (!decModulePromise) {
+      decModulePromise = webpDecFactory({
+        noInitialRun: true,
+        instantiateWasm: (imports, callback) => {
+          const instance = new WebAssembly.Instance(wasm, imports);
+          callback(instance);
+          return instance.exports;
+        }
+      });
+    }
+    const mod = await decModulePromise;
+    const result = mod.decode(data);
+    if (!result) {
+      throw new Error("WebP decoding error");
+    }
+    return {
+      width: result.width,
+      height: result.height,
+      rgba: new Uint8Array(
+        result.data.buffer,
+        result.data.byteOffset,
+        result.data.byteLength
+      ).slice()
+    };
+  };
+}
+export {
+  jsquashFrameEncoder,
+  jsquashWebpDecoder
+};