@glissade/backend-skia 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,26 @@
+# @glissade/backend-skia
+
+The headless rasterizer: DisplayList → Skia via `@napi-rs/canvas` (prebuilt N-API, no browser anywhere). This is what makes glissade's determinism claims testable — golden frames render **byte-identically** across machines on the pinned toolchain, and CI byte-compares committed PNGs on every push.
+
+```sh
+npm i @glissade/backend-skia
+```
+
+```ts
+import { SkiaBackend } from '@glissade/backend-skia';
+
+const backend = new SkiaBackend(640, 360);
+backend.render(evaluate(scene, doc, t));
+writeFileSync('frame.png', backend.encodePng());
+```
+
+Node-only. The `gs` CLI (`@glissade/cli`) drives it for full renders.
+
+## Part of glissade
+
+*(glide & slide)* — programmatic motion graphics for TypeScript: realtime-first in any web page, deterministic headless video export from the same code, a visual studio over the same document. No generator functions.
+
+- [Repository & full README](https://github.com/tyevco/glissade)
+- [Getting started](https://github.com/tyevco/glissade/blob/main/docs/getting-started.md) · [Concepts](https://github.com/tyevco/glissade/blob/main/docs/concepts.md) · [Interactivity](https://github.com/tyevco/glissade/blob/main/docs/interactivity.md)
+
+Apache-2.0.

package/dist/index.d.ts

@@ -1,34 +1,22 @@
 import { Canvas, Image } from "@napi-rs/canvas";
-import { DisplayList, FontSpec, VideoFrameSource } from "@glissade/scene";
+import { DisplayList, FontSpec, TextMetricsLite, TextMetricsLite as TextMetricsLite$1, VideoFrameSource } from "@glissade/scene";
 
 //#region src/index.d.ts
 
 type Drawable = Canvas | Image;
-interface TextMetricsLite {
-  width: number;
-  ascent: number;
-  descent: number;
-}
 declare class SkiaBackend {
   private readonly canvas;
-  private readonly pool;
-  private pathCache;
-  private readonly images;
-  private readonly videos;
+  private readonly raster;
   constructor(width: number, height: number);
   setImageAsset(assetId: string, image: Drawable): void;
   setVideoAsset(assetId: string, source: VideoFrameSource): void;
-  private resolveDrawable;
-  measureText(text: string, font: FontSpec): TextMetricsLite;
+  measureText(text: string, font: FontSpec): TextMetricsLite$1;
   render(list: DisplayList): void;
   /** Raw RGBA — the FFmpeg pipe path (§5.1d). Synchronous; no GPU readback. */
   readPixels(): Uint8ClampedArray;
   /** Deterministic PNG bytes for golden frames and `gs render` output. */
   encodePng(): Buffer;
   dispose(): void;
-  private path;
-  private acquire;
-  private release;
 }
 //#endregion
-export { SkiaBackend, TextMetricsLite };
+export { SkiaBackend, type TextMetricsLite };

package/dist/index.js

@@ -1,72 +1,29 @@
 import { Path2D, createCanvas } from "@napi-rs/canvas";
-import { ColdAssetError } from "@glissade/scene";
+import { Raster2D, fontString } from "@glissade/scene";
 //#region src/index.ts
 /**
 * @glissade/backend-skia — headless DisplayList rasterizer over @napi-rs/canvas
-* (DESIGN.md §3.4). The per-path-deterministic twin of backend-canvas2d: same
-* command walk, same temp-canvas group compositing, CPU Skia. The shared
-* interpreter extraction is tracked tech debt; the golden/SSIM suites guard
-* drift until then.
+* (DESIGN.md §3.4). The per-path-deterministic twin of backend-canvas2d, now
+* sharing the ONE Raster2D interpreter in @glissade/scene — the twins
+* structurally cannot drift. This file owns only the @napi-rs canvas flavor
+* plus headless concerns (PNG encode, sync readPixels, text measurement).
 */
-function fontString(font) {
-	return `${font.style === "italic" ? "italic " : ""}${font.weight !== void 0 && font.weight !== 400 ? `${font.weight} ` : ""}${font.size}px ${font.family}`;
-}
-function buildPath(segs) {
-	const p = new Path2D();
-	for (const seg of segs) switch (seg[0]) {
-		case "M":
-			p.moveTo(seg[1], seg[2]);
-			break;
-		case "L":
-			p.lineTo(seg[1], seg[2]);
-			break;
-		case "C":
-			p.bezierCurveTo(seg[1], seg[2], seg[3], seg[4], seg[5], seg[6]);
-			break;
-		case "Q":
-			p.quadraticCurveTo(seg[1], seg[2], seg[3], seg[4]);
-			break;
-		case "E":
-			p.ellipse(seg[1], seg[2], seg[3], seg[4], seg[5], seg[6], seg[7]);
-			break;
-		case "Z":
-			p.closePath();
-			break;
-	}
-	return p;
-}
 var SkiaBackend = class {
 	canvas;
-	pool = [];
-	pathCache = /* @__PURE__ */ new WeakMap();
-	images = /* @__PURE__ */ new Map();
-	videos = /* @__PURE__ */ new Map();
+	raster;
 	constructor(width, height) {
 		this.canvas = createCanvas(width, height);
+		this.raster = new Raster2D({
+			context: (c) => c.getContext("2d"),
+			createCanvas: (w, h) => createCanvas(w, h),
+			newPath: () => new Path2D()
+		});
 	}
 	setImageAsset(assetId, image) {
-		this.images.set(assetId, image);
+		this.raster.setImageAsset(assetId, image);
 	}
 	setVideoAsset(assetId, source) {
-		this.videos.set(assetId, source);
-	}
-	resolveDrawable(res, id) {
-		if (res.kind === "image") {
-			const img = this.images.get(res.assetId);
-			if (!img) throw new ColdAssetError(res.assetId, "no decoded image registered");
-			return img;
-		}
-		if (res.kind === "videoFrame") {
-			const source = this.videos.get(res.assetId);
-			if (!source) throw new ColdAssetError(res.assetId, "no VideoFrameSource registered", res.mediaT);
-			try {
-				return source.getFrameSync(res.mediaT);
-			} catch (e) {
-				if (e instanceof ColdAssetError) throw new ColdAssetError(res.assetId, e.detail, res.mediaT);
-				throw e;
-			}
-		}
-		throw new Error(`resource ${id} is not drawable`);
+		this.raster.setVideoAsset(assetId, source);
 	}
 	measureText(text, font) {
 		const ctx = this.canvas.getContext("2d");
@@ -81,99 +38,7 @@ var SkiaBackend = class {
 		};
 	}
 	render(list) {
-		const { w, h } = list.size;
-		if (this.canvas.width !== w) this.canvas.width = w;
-		if (this.canvas.height !== h) this.canvas.height = h;
-		const base = this.canvas.getContext("2d");
-		base.resetTransform();
-		base.clearRect(0, 0, w, h);
-		const layers = [{
-			ctx: base,
-			canvas: null,
-			opacity: 1,
-			blend: "source-over"
-		}];
-		const ctxOf = () => layers[layers.length - 1].ctx;
-		for (const cmd of list.commands) switch (cmd.op) {
-			case "save":
-				ctxOf().save();
-				break;
-			case "restore":
-				ctxOf().restore();
-				break;
-			case "transform":
-				ctxOf().transform(cmd.m[0], cmd.m[1], cmd.m[2], cmd.m[3], cmd.m[4], cmd.m[5]);
-				break;
-			case "clip":
-				ctxOf().clip(this.path(list.resources, cmd.path), cmd.rule ?? "nonzero");
-				break;
-			case "fillPath": {
-				const ctx = ctxOf();
-				ctx.fillStyle = cmd.paint.color;
-				ctx.fill(this.path(list.resources, cmd.path));
-				break;
-			}
-			case "strokePath": {
-				const ctx = ctxOf();
-				ctx.strokeStyle = cmd.paint.color;
-				ctx.lineWidth = cmd.stroke.width;
-				ctx.lineCap = cmd.stroke.cap ?? "butt";
-				ctx.lineJoin = cmd.stroke.join ?? "miter";
-				if (cmd.stroke.dash) ctx.setLineDash(cmd.stroke.dash);
-				ctx.stroke(this.path(list.resources, cmd.path));
-				if (cmd.stroke.dash) ctx.setLineDash([]);
-				break;
-			}
-			case "fillText": {
-				const ctx = ctxOf();
-				ctx.font = fontString(cmd.font);
-				ctx.fillStyle = cmd.paint.color;
-				ctx.textBaseline = "alphabetic";
-				ctx.textAlign = cmd.align ?? "left";
-				ctx.fillText(cmd.text, cmd.x, cmd.y);
-				break;
-			}
-			case "drawImage": {
-				const res = list.resources[cmd.image];
-				if (!res) throw new Error(`drawImage references missing resource ${cmd.image}`);
-				const drawable = this.resolveDrawable(res, cmd.image);
-				const ctx = ctxOf();
-				if (cmd.smoothing !== void 0) ctx.imageSmoothingEnabled = cmd.smoothing;
-				const { x, y, w: dw, h: dh } = cmd.dst;
-				if (cmd.src) ctx.drawImage(drawable, cmd.src.x, cmd.src.y, cmd.src.w, cmd.src.h, x, y, dw, dh);
-				else ctx.drawImage(drawable, x, y, dw, dh);
-				break;
-			}
-			case "pushGroup": {
-				const parent = ctxOf();
-				const layerCanvas = this.acquire(w, h);
-				const layerCtx = layerCanvas.getContext("2d");
-				layerCtx.resetTransform();
-				layerCtx.clearRect(0, 0, w, h);
-				layerCtx.setTransform(parent.getTransform());
-				layers.push({
-					ctx: layerCtx,
-					canvas: layerCanvas,
-					opacity: cmd.opacity,
-					blend: cmd.blend
-				});
-				break;
-			}
-			case "popGroup": {
-				const layer = layers.pop();
-				if (!layer || layer.canvas === null) throw new Error("popGroup without matching pushGroup");
-				const parent = ctxOf();
-				parent.save();
-				parent.resetTransform();
-				parent.globalAlpha = layer.opacity;
-				parent.globalCompositeOperation = layer.blend;
-				parent.drawImage(layer.canvas, 0, 0);
-				parent.restore();
-				this.release(layer.canvas);
-				break;
-			}
-		}
-		if (layers.length !== 1) throw new Error("unbalanced pushGroup/popGroup in DisplayList");
+		this.raster.render(this.canvas, list);
 	}
 	/** Raw RGBA — the FFmpeg pipe path (§5.1d). Synchronous; no GPU readback. */
 	readPixels() {
@@ -184,29 +49,7 @@ var SkiaBackend = class {
 		return this.canvas.toBuffer("image/png");
 	}
 	dispose() {
-		this.pool.length = 0;
-	}
-	path(resources, id) {
-		const res = resources[id];
-		if (!res || res.kind !== "path") throw new Error(`resource ${id} is not a path`);
-		let p = this.pathCache.get(res);
-		if (!p) {
-			p = buildPath(res.segs);
-			this.pathCache.set(res, p);
-		}
-		return p;
-	}
-	acquire(w, h) {
-		const pooled = this.pool.pop();
-		if (pooled) {
-			if (pooled.width !== w) pooled.width = w;
-			if (pooled.height !== h) pooled.height = h;
-			return pooled;
-		}
-		return createCanvas(w, h);
-	}
-	release(canvas) {
-		if (this.pool.length < 8) this.pool.push(canvas);
+		this.raster.dispose();
 	}
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/backend-skia",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "glissade headless render backend: DisplayList -> @napi-rs/canvas (Skia). Node-only; the CI-grade deterministic path.",
   "license": "Apache-2.0",
   "type": "module",
@@ -16,8 +16,8 @@
   ],
   "dependencies": {
     "@napi-rs/canvas": "^0.1.65",
-    "@glissade/core": "0.1.0",
-    "@glissade/scene": "0.1.0"
+    "@glissade/core": "0.3.0",
+    "@glissade/scene": "0.3.0"
   },
   "repository": {
     "type": "git",