@koiosdigital/matrx-render 0.1.6 → 0.1.8

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

@@ -1,4 +1,4 @@
-import { F as FrameEncoder, W as WebpDecoder } from '../webp-Cq1VWs8C.js';
+import { F as FrameEncoder, W as WebpDecoder } from '../webp-DP8HPoWf.js';
 import '../widget-DABrpucj.js';
 
 /**

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { C as Color16, a as Canvas, W as Widget, b as Color, B as Bounds, D as DrawContext } from './widget-DABrpucj.js';
 export { c as BLACK, T as TRANSPARENT, d as WHITE, e as bounds, f as color16, m as maxFrameCount, g as modInt, p as parseColor } from './widget-DABrpucj.js';
 import { WidgetSpec, RootSpec } from '@koiosdigital/matrx-sdk';
-export { D as DEFAULT_SCREEN_DELAY_MILLIS, F as FrameEncoder, I as Image, W as WebpDecoder, e as encodeWebp, s as setWebpDecoder } from './webp-Cq1VWs8C.js';
+export { D as DEFAULT_SCREEN_DELAY_MILLIS, F as FrameEncoder, I as Image, W as WebpDecoder, e as encodeWebp, s as setWebpDecoder } from './webp-DP8HPoWf.js';
 
 /**
  * BDF bitmap-font parser — a line-for-line port of zachomedia/go-bdf

package/dist/index.js

@@ -2586,22 +2586,25 @@ async function renderRoot(spec, opts = {}) {
 
 // src/encode/webp.ts
 var DEFAULT_SCREEN_DELAY_MILLIS = 50;
+function straightPixel(pix, i, out, o) {
+  const a = pix[i + 3];
+  if (a === 255) {
+    out[o] = pix[i];
+    out[o + 1] = pix[i + 1];
+    out[o + 2] = pix[i + 2];
+  } else if (a !== 0) {
+    const a16 = a * 257;
+    out[o] = Math.floor(pix[i] * 257 * 65535 / a16) >> 8;
+    out[o + 1] = Math.floor(pix[i + 1] * 257 * 65535 / a16) >> 8;
+    out[o + 2] = Math.floor(pix[i + 2] * 257 * 65535 / a16) >> 8;
+  }
+  out[o + 3] = a;
+}
 function toStraightRGBA(canvas) {
   const { pix } = canvas;
   const out = new Uint8Array(pix.length);
   for (let i = 0; i < pix.length; i += 4) {
-    const a = pix[i + 3];
-    if (a === 255) {
-      out[i] = pix[i];
-      out[i + 1] = pix[i + 1];
-      out[i + 2] = pix[i + 2];
-    } else if (a !== 0) {
-      const a16 = a * 257;
-      out[i] = Math.floor(pix[i] * 257 * 65535 / a16) >> 8;
-      out[i + 1] = Math.floor(pix[i + 1] * 257 * 65535 / a16) >> 8;
-      out[i + 2] = Math.floor(pix[i + 2] * 257 * 65535 / a16) >> 8;
-    }
-    out[i + 3] = a;
+    straightPixel(pix, i, out, i);
   }
   return out;
 }
@@ -2683,6 +2686,55 @@ function u24(dv, offset, v) {
   dv.setUint8(offset + 1, v >> 8 & 255);
   dv.setUint8(offset + 2, v >> 16 & 255);
 }
+function sameCanvas(a, b) {
+  if (a === b) return true;
+  const ap = a.pix;
+  const bp = b.pix;
+  for (let i = 0; i < ap.length; i++) {
+    if (ap[i] !== bp[i]) return false;
+  }
+  return true;
+}
+function deltaFrame(prev, cur, durationMs) {
+  const { width, height } = cur;
+  const cp = cur.pix;
+  const pp = prev.pix;
+  let minX = width;
+  let minY = height;
+  let maxX = -1;
+  let maxY = -1;
+  let allOpaque = true;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const i = (y * width + x) * 4;
+      if (cp[i] === pp[i] && cp[i + 1] === pp[i + 1] && cp[i + 2] === pp[i + 2] && cp[i + 3] === pp[i + 3]) {
+        continue;
+      }
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+      if (cp[i + 3] !== 255) allOpaque = false;
+    }
+  }
+  if (maxX < 0) return null;
+  const x0 = minX & ~1;
+  const y0 = minY & ~1;
+  const w = maxX - x0 + 1;
+  const h = maxY - y0 + 1;
+  const rgba = new Uint8Array(w * h * 4);
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const i = ((y0 + y) * width + (x0 + x)) * 4;
+      const o = (y * w + x) * 4;
+      if (allOpaque && cp[i] === pp[i] && cp[i + 1] === pp[i + 1] && cp[i + 2] === pp[i + 2] && cp[i + 3] === pp[i + 3]) {
+        continue;
+      }
+      straightPixel(cp, i, rgba, o);
+    }
+  }
+  return { x: x0, y: y0, w, h, rgba, blend: allOpaque, durationMs };
+}
 async function encodeWebp(frames, opts) {
   if (frames.length === 0) {
     return new Uint8Array(0);
@@ -2702,10 +2754,49 @@ async function encodeWebp(frames, opts) {
     durations.push(frameDuration);
     if (maxDuration > 0 && remaining <= 0) break;
   }
+  const specs = [
+    {
+      x: 0,
+      y: 0,
+      w: width,
+      h: height,
+      rgba: toStraightRGBA(frames[0]),
+      blend: false,
+      durationMs: durations[0]
+    }
+  ];
+  const uniqueFrames = [frames[0]];
+  for (let i = 1; i < durations.length; i++) {
+    const prev = uniqueFrames[uniqueFrames.length - 1];
+    const spec = sameCanvas(prev, frames[i]) ? null : deltaFrame(prev, frames[i], durations[i]);
+    if (spec === null) {
+      specs[specs.length - 1].durationMs += durations[i];
+    } else {
+      specs.push(spec);
+      uniqueFrames.push(frames[i]);
+    }
+  }
   const encoded = [];
   let anyAlpha = false;
-  for (let i = 0; i < durations.length; i++) {
-    const file = await opts.encoder(toStraightRGBA(frames[i]), width, height);
+  for (let i = 0; i < specs.length; i++) {
+    const spec = specs[i];
+    let file = await opts.encoder(spec.rgba, spec.w, spec.h);
+    if (spec.blend || spec.w !== width || spec.h !== height) {
+      const key = await opts.encoder(toStraightRGBA(uniqueFrames[i]), width, height);
+      if (key.length < file.length) {
+        file = key;
+        specs[i] = {
+          x: 0,
+          y: 0,
+          w: width,
+          h: height,
+          rgba: spec.rgba,
+          // unused past this point
+          blend: false,
+          durationMs: spec.durationMs
+        };
+      }
+    }
     const chunks = frameImageChunks(file);
     if (frameHasAlpha(chunks)) anyAlpha = true;
     encoded.push(chunks);
@@ -2728,19 +2819,20 @@ async function encodeWebp(frames, opts) {
     dv.setUint16(4, opts.loopCount ?? 0, true);
     w.chunk("ANIM", data);
   }
-  for (let i = 0; i < encoded.length; i++) {
+  for (let i = 0; i < specs.length; i++) {
+    const spec = specs[i];
     let inner = 16;
     for (const c of encoded[i]) {
       inner += 8 + c.data.length + (c.data.length & 1);
     }
     const data = new Uint8Array(inner);
     const dv = new DataView(data.buffer);
-    u24(dv, 0, 0);
-    u24(dv, 3, 0);
-    u24(dv, 6, width - 1);
-    u24(dv, 9, height - 1);
-    u24(dv, 12, durations[i]);
-    data[15] = 2;
+    u24(dv, 0, spec.x / 2);
+    u24(dv, 3, spec.y / 2);
+    u24(dv, 6, spec.w - 1);
+    u24(dv, 9, spec.h - 1);
+    u24(dv, 12, spec.durationMs);
+    data[15] = spec.blend ? 0 : 2;
     let o = 16;
     for (const c of encoded[i]) {
       for (let k = 0; k < 4; k++) data[o + k] = c.fourcc.charCodeAt(k);

package/dist/{webp-Cq1VWs8C.d.ts → webp-DP8HPoWf.d.ts}

@@ -47,12 +47,18 @@ declare class Image implements Widget {
  * (WASM libwebp — see webp-jsquash.ts); this module owns the deterministic
  * parts: frame-duration policy (delay + maxDuration cap, ported from
  * EncodeWebP) and the animation container mux (VP8X/ANIM/ANMF assembly,
- * the moral equivalent of libwebp's WebPAnimEncoderAssemble with
- * kmin=kmax=0 — every frame an independent keyframe, no blending).
+ * the moral equivalent of libwebp's WebPAnimEncoder with frame diffing:
+ * frame 0 is a full keyframe; each later frame is cropped to the changed
+ * bounding rect vs the previous frame, with unchanged pixels inside the
+ * rect made transparent and alpha-blended over the canvas. Identical
+ * consecutive frames are merged into one longer-duration frame. Without
+ * this, a marquee over static album art re-encodes the art into every one
+ * of ~400 frames (spotify at 64x128: 868KB → ~100KB with deltas).
  *
- * Determinism: container assembly is pure; frame bitstreams are
- * deterministic for a pinned libwebp build + settings (handoff §8 — fold
- * the encoder version into the cache key at the render-plane layer).
+ * Determinism: container assembly and frame diffing are pure; frame
+ * bitstreams are deterministic for a pinned libwebp build + settings
+ * (handoff §8 — fold the encoder version into the cache key at the
+ * render-plane layer).
  */
 
 /** Encodes one straight-RGBA frame to a complete (still) WebP file. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koiosdigital/matrx-render",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
@@ -12,7 +12,7 @@
     "@jsquash/webp": "^1.5.0",
     "fflate": "^0.8.3",
     "jpeg-js": "^0.4.4",
-    "@koiosdigital/matrx-sdk": "0.1.6"
+    "@koiosdigital/matrx-sdk": "0.1.8"
   },
   "devDependencies": {
     "@types/node": "^26.1.0",