@lvl99dotcom/paintcanvas 0.0.0-stage → 0.2.0

package/dist/lib/i18n/index.js

@@ -0,0 +1,182 @@
+import en_US_default from "../../locales/en-US.js";
+// src/lib/i18n/index.ts
+/** The locale used when no other matches, and whose strings fill in any missing from other locales */
+var FALLBACK_LOCALE = "en-US";
+/** Locales whose files come with PaintCanvas (in `locales/`, named by their IETF BCP 47 tag) */
+var BUILT_IN_LOCALES = {
+	"en-US": async () => en_US_default,
+	"en-GB": () => import("../../locales/en-GB.js"),
+	fr: () => import("../../locales/fr.js"),
+	ja: () => import("../../locales/ja.js"),
+	ko: () => import("../../locales/ko.js"),
+	"zh-Hans": () => import("../../locales/zh-Hans.js"),
+	"zh-Hant": () => import("../../locales/zh-Hant.js")
+};
+/** Regions whose English is closer to British than American English */
+var BRITISH_ENGLISH_REGIONS = /* @__PURE__ */ new Set([
+	"GB",
+	"AU",
+	"NZ",
+	"IE",
+	"IN",
+	"ZA",
+	"SG",
+	"HK",
+	"MY",
+	"PK",
+	"NG",
+	"KE"
+]);
+/**
+* The language, script and region of a locale tag, with the likely script and region filled in where known (e.g. `zh-TW`
+* is written in Traditional Chinese, `zh-CN` in Simplified).
+*/
+var describe = (tag) => {
+	try {
+		const locale = new Intl.Locale(tag);
+		const likely = locale.maximize();
+		return {
+			language: locale.language,
+			script: likely.script,
+			region: locale.region
+		};
+	} catch {
+		return;
+	}
+};
+/**
+* The best available locale for the requested ones (e.g. the device's `navigator.languages`, most preferred first):
+* the same tag, then the same language and script (`zh-TW` → `zh-Hant`), then the same language (British regions
+* prefer `en-GB`, other English `en-US`), otherwise `fallback`.
+*
+* @example
+* matchLocale(["zh-TW", "en"], ["en-US", "zh-Hans", "zh-Hant"]); // "zh-Hant"
+* matchLocale(["en-AU"], ["en-US", "en-GB"]); // "en-GB"
+* matchLocale(["fr-FR"], ["en-US", "ja"]); // "en-US"
+*/
+var matchLocale = (requested, available, fallback = FALLBACK_LOCALE) => {
+	const lower = (tag) => tag.toLowerCase();
+	for (const tag of requested) {
+		const exact = available.find((each) => lower(each) === lower(tag));
+		if (exact) return exact;
+		const wanted = describe(tag);
+		if (!wanted) continue;
+		const sameLanguage = available.filter((each) => describe(each)?.language === wanted.language);
+		if (sameLanguage.length === 0) continue;
+		const sameScript = sameLanguage.filter((each) => describe(each)?.script === wanted.script);
+		const candidates = sameScript.length > 0 ? sameScript : sameLanguage;
+		if (wanted.language === "en") {
+			const preferred = wanted.region && BRITISH_ENGLISH_REGIONS.has(wanted.region) ? "en-GB" : "en-US";
+			const regional = candidates.find((each) => lower(each) === lower(preferred));
+			if (regional) return regional;
+		}
+		return candidates[0];
+	}
+	return available.includes(fallback) ? fallback : available[0] ?? fallback;
+};
+/**
+* Put values into a string's `{name}` placeholders. Placeholders without a value are left as they are.
+*
+* @example
+* interpolate("Delete \"{name}\"?", { name: "Sketch" }); // 'Delete "Sketch"?'
+*/
+var interpolate = (text, values = {}) => text.replace(/\{(\w+)\}/g, (placeholder, name) => Object.hasOwn(values, name) ? String(values[name]) : placeholder);
+/**
+* The text the UI shows, in the chosen language. Starts in the fallback locale; `useDeviceLocale` switches to the best
+* match for the device, and `setLocale` to any available locale. Locale files load when first used, without reloading
+* the page. Strings missing from a locale come from the fallback locale, then the key itself.
+*
+* Dispatches a `change` event when the locale or its strings change, so the UI can show the new text.
+*
+* @example
+* const translations = new Translations({ locales: { "en-US": ..., ja: () => import("./ja.json") } });
+* await translations.useDeviceLocale();
+* translations.t("layers.delete", { name: "Sketch" });
+*/
+var Translations = class extends EventTarget {
+	loaders;
+	fallback;
+	/** Strings of each locale loaded so far, plus any added */
+	loaded = /* @__PURE__ */ new Map();
+	current;
+	/** The locale most recently asked for, so a slow load can't override a later choice */
+	requested;
+	constructor(options = {}) {
+		super();
+		this.loaders = options.locales ?? BUILT_IN_LOCALES;
+		this.fallback = options.fallback ?? "en-US";
+		this.loaded.set(this.fallback, options.fallbackStrings ?? en_US_default);
+		this.current = this.fallback;
+	}
+	/** The locale in use (an IETF BCP 47 tag, e.g. `ja`) */
+	get locale() {
+		return this.current;
+	}
+	/** Locales that can be used */
+	get locales() {
+		return [.../* @__PURE__ */ new Set([this.fallback, ...Object.keys(this.loaders)])];
+	}
+	/**
+	* Switch to the best available locale for the device's languages (`navigator.languages`).
+	*/
+	useDeviceLocale(languages = typeof navigator === "undefined" ? [] : navigator.languages) {
+		return this.setLocale(matchLocale(languages, this.locales, this.fallback));
+	}
+	/**
+	* Switch to a locale (the best available match for the tag), loading its strings if needed. Dispatches `change` once
+	* its strings are ready. If loading fails, the current locale stays and this rejects.
+	*
+	* @example
+	* await translations.setLocale("zh-TW"); // uses zh-Hant
+	*/
+	async setLocale(tag) {
+		const locale = matchLocale([tag], this.locales, this.fallback);
+		this.requested = locale;
+		if (!this.loaded.has(locale)) {
+			const module = await this.loaders[locale]();
+			this.loaded.set(locale, "default" in module && typeof module.default === "object" ? module.default : module);
+		}
+		if (this.requested !== locale) return;
+		this.current = locale;
+		this.dispatchEvent(new Event("change"));
+	}
+	/**
+	* Add or replace strings for a locale (e.g. the implementer's own wording or extra keys). Dispatches `change` if it's
+	* the locale in use or the fallback.
+	*
+	* @example
+	* translations.addStrings("en-US", { "toolbar.brush": "Paintbrush" });
+	*/
+	addStrings(locale, strings) {
+		this.loaded.set(locale, {
+			...this.loaded.get(locale),
+			...strings
+		});
+		if (locale === this.current || locale === this.fallback) this.dispatchEvent(new Event("change"));
+	}
+	/**
+	* Translate a key, putting values into its `{name}` placeholders. With a numeric `count`, the key's plural form for
+	* the locale is used when there is one (e.g. `presets.imported.one` and `presets.imported.other`). Falls back to the
+	* fallback locale, then the key.
+	*
+	* @example
+	* translations.t("presets.imported", { count: 3 }); // "Imported 3 brush presets"
+	*/
+	t(key, values) {
+		const count = values?.count;
+		const keys = typeof count === "number" ? [
+			`${key}.${new Intl.PluralRules(this.current).select(count)}`,
+			`${key}.other`,
+			key
+		] : [key];
+		for (const locale of [this.current, this.fallback]) {
+			const strings = this.loaded.get(locale);
+			const found = keys.find((each) => strings && Object.hasOwn(strings, each));
+			if (found) return interpolate(strings[found], values);
+		}
+		return interpolate(key, values);
+	}
+};
+/** The translations PaintCanvas's UI uses, unless an element is given others */
+var translations = new Translations();
+export { BUILT_IN_LOCALES, FALLBACK_LOCALE, Translations as default, interpolate, matchLocale, translations };

package/dist/lib/image/index.d.ts

@@ -0,0 +1,90 @@
+/** An area of the canvas as [x1, y1, x2, y2] in pixels (x2 and y2 are exclusive) */
+export type BoundingBox = [number, number, number, number];
+/** How a patch's image data is encoded */
+export declare const ImageEncoding: {
+    /** Raw RGBA bytes compressed with deflate (lossless, no PNG overhead) */
+    readonly RgbaDeflate: "rgba-deflate";
+    /** PNG file bytes (lossless) */
+    readonly Png: "png";
+};
+export type ImageEncoding = (typeof ImageEncoding)[keyof typeof ImageEncoding];
+/** Number of bytes per RGBA pixel */
+export declare const BYTES_PER_PIXEL = 4;
+/**
+ * Get the width and height of a bounding box.
+ *
+ * @example
+ * boundingBoxSize([10, 10, 30, 20]); // { width: 20, height: 10 }
+ */
+export declare const boundingBoxSize: ([x1, y1, x2, y2]: BoundingBox) => {
+    width: number;
+    height: number;
+};
+/**
+ * Get the number of raw RGBA bytes needed for a bounding box.
+ *
+ * @example
+ * rgbaByteLength([0, 0, 2, 2]); // 16
+ */
+export declare const rgbaByteLength: (coords: BoundingBox) => number;
+/**
+ * A quick fingerprint of RGBA pixels (FNV-1a over each pixel), to tell whether they changed without keeping a copy of
+ * them. Different pixels give the same fingerprint only very rarely (about 1 in 4 billion).
+ *
+ * @example
+ * const print = pixelFingerprint(layer.context.getImageData(0, 0, layer.width, layer.height).data);
+ * if (print !== savedPrint) save(layer);
+ */
+export declare const pixelFingerprint: (rgba: Uint8ClampedArray) => number;
+/**
+ * Encode bytes as a base64 string.
+ *
+ * @example
+ * bytesToBase64(new Uint8Array([104, 105])); // "aGk="
+ */
+export declare const bytesToBase64: (bytes: Uint8Array) => string;
+/**
+ * Decode a base64 string to bytes.
+ *
+ * @example
+ * base64ToBytes("aGk="); // Uint8Array [104, 105]
+ */
+export declare const base64ToBytes: (base64: string) => Uint8Array<ArrayBuffer>;
+/**
+ * Get the decoded byte length of a base64 string without decoding it.
+ *
+ * @example
+ * base64ByteLength("aGk="); // 2
+ */
+export declare const base64ByteLength: (base64: string) => number;
+/**
+ * Compress bytes with deflate using the built-in `CompressionStream`.
+ *
+ * @example
+ * const compressed = await deflate(rgbaBytes);
+ */
+export declare const deflate: (bytes: Uint8Array<ArrayBuffer>) => Promise<Uint8Array<ArrayBuffer>>;
+/**
+ * Decompress deflated bytes using the built-in `DecompressionStream`.
+ *
+ * Stops and throws as soon as the output exceeds `maxBytes`, so malicious data cannot exhaust memory (decompression bomb).
+ *
+ * @example
+ * const rgba = await inflate(compressed, 2000 * 2000 * 4);
+ */
+export declare const inflate: (bytes: Uint8Array<ArrayBuffer>, maxBytes: number) => Promise<Uint8Array<ArrayBuffer>>;
+/**
+ * Encode raw RGBA pixels for a bounding box as deflated base64 (the `rgba-deflate` image encoding).
+ *
+ * @example
+ * const data = await encodeRgbaDeflate(imageData.data, [0, 0, imageData.width, imageData.height]);
+ */
+export declare const encodeRgbaDeflate: (rgba: Uint8Array | Uint8ClampedArray, coords: BoundingBox) => Promise<string>;
+/**
+ * Decode `rgba-deflate` base64 data into raw RGBA pixels for a bounding box. Throws if the size does not match exactly.
+ *
+ * @example
+ * const rgba = await decodeRgbaDeflate(message.data, message.coords);
+ * const imageData = new ImageData(rgba, width, height);
+ */
+export declare const decodeRgbaDeflate: (data: string, coords: BoundingBox) => Promise<Uint8ClampedArray<ArrayBuffer>>;

package/dist/lib/image/index.js

@@ -0,0 +1,147 @@
+// src/lib/image/index.ts
+/** How a patch's image data is encoded */
+var ImageEncoding = {
+	/** Raw RGBA bytes compressed with deflate (lossless, no PNG overhead) */
+	RgbaDeflate: "rgba-deflate",
+	/** PNG file bytes (lossless) */
+	Png: "png"
+};
+/** Number of bytes per RGBA pixel */
+var BYTES_PER_PIXEL = 4;
+/** Size of chunks used when converting bytes to base64, to stay within function argument limits */
+var BASE64_CHUNK_SIZE = 32768;
+/**
+* Get the width and height of a bounding box.
+*
+* @example
+* boundingBoxSize([10, 10, 30, 20]); // { width: 20, height: 10 }
+*/
+var boundingBoxSize = ([x1, y1, x2, y2]) => ({
+	width: x2 - x1,
+	height: y2 - y1
+});
+/**
+* Get the number of raw RGBA bytes needed for a bounding box.
+*
+* @example
+* rgbaByteLength([0, 0, 2, 2]); // 16
+*/
+var rgbaByteLength = (coords) => {
+	const { width, height } = boundingBoxSize(coords);
+	return width * height * 4;
+};
+/**
+* A quick fingerprint of RGBA pixels (FNV-1a over each pixel), to tell whether they changed without keeping a copy of
+* them. Different pixels give the same fingerprint only very rarely (about 1 in 4 billion).
+*
+* @example
+* const print = pixelFingerprint(layer.context.getImageData(0, 0, layer.width, layer.height).data);
+* if (print !== savedPrint) save(layer);
+*/
+var pixelFingerprint = (rgba) => {
+	const pixels = new Uint32Array(rgba.buffer, rgba.byteOffset, rgba.length / 4);
+	let hash = 2166136261;
+	for (let i = 0; i < pixels.length; i++) hash = Math.imul(hash ^ pixels[i], 16777619);
+	return hash >>> 0;
+};
+/**
+* Encode bytes as a base64 string.
+*
+* @example
+* bytesToBase64(new Uint8Array([104, 105])); // "aGk="
+*/
+var bytesToBase64 = (bytes) => {
+	let binary = "";
+	for (let i = 0; i < bytes.length; i += BASE64_CHUNK_SIZE) binary += String.fromCharCode(...bytes.subarray(i, i + BASE64_CHUNK_SIZE));
+	return btoa(binary);
+};
+/**
+* Decode a base64 string to bytes.
+*
+* @example
+* base64ToBytes("aGk="); // Uint8Array [104, 105]
+*/
+var base64ToBytes = (base64) => {
+	const binary = atob(base64);
+	const bytes = new Uint8Array(binary.length);
+	for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+	return bytes;
+};
+/**
+* Get the decoded byte length of a base64 string without decoding it.
+*
+* @example
+* base64ByteLength("aGk="); // 2
+*/
+var base64ByteLength = (base64) => {
+	const padding = base64.endsWith("==") ? 2 : base64.endsWith("=") ? 1 : 0;
+	return base64.length / 4 * 3 - padding;
+};
+/** Bytes as a stream (through `Response`, which every runtime streams, unlike some `Blob` implementations) */
+var streamOf = (bytes) => new Response(bytes).body;
+/**
+* Compress bytes with deflate using the built-in `CompressionStream`.
+*
+* @example
+* const compressed = await deflate(rgbaBytes);
+*/
+var deflate = async (bytes) => {
+	const stream = streamOf(bytes).pipeThrough(new CompressionStream("deflate"));
+	return new Uint8Array(await new Response(stream).arrayBuffer());
+};
+/**
+* Decompress deflated bytes using the built-in `DecompressionStream`.
+*
+* Stops and throws as soon as the output exceeds `maxBytes`, so malicious data cannot exhaust memory (decompression bomb).
+*
+* @example
+* const rgba = await inflate(compressed, 2000 * 2000 * 4);
+*/
+var inflate = async (bytes, maxBytes) => {
+	const reader = streamOf(bytes).pipeThrough(new DecompressionStream("deflate")).getReader();
+	const chunks = [];
+	let total = 0;
+	for (;;) {
+		const { done, value } = await reader.read();
+		if (done) break;
+		total += value.length;
+		if (total > maxBytes) {
+			await reader.cancel();
+			throw new Error(`Decompressed data exceeds ${maxBytes} bytes`);
+		}
+		chunks.push(value);
+	}
+	const output = new Uint8Array(total);
+	let offset = 0;
+	for (const chunk of chunks) {
+		output.set(chunk, offset);
+		offset += chunk.length;
+	}
+	return output;
+};
+/**
+* Encode raw RGBA pixels for a bounding box as deflated base64 (the `rgba-deflate` image encoding).
+*
+* @example
+* const data = await encodeRgbaDeflate(imageData.data, [0, 0, imageData.width, imageData.height]);
+*/
+var encodeRgbaDeflate = async (rgba, coords) => {
+	if (rgba.length !== rgbaByteLength(coords)) throw new Error("RGBA data length does not match bounding box size");
+	const bytes = new Uint8Array(rgba.length);
+	bytes.set(rgba);
+	return bytesToBase64(await deflate(bytes));
+};
+/**
+* Decode `rgba-deflate` base64 data into raw RGBA pixels for a bounding box. Throws if the size does not match exactly.
+*
+* @example
+* const rgba = await decodeRgbaDeflate(message.data, message.coords);
+* const imageData = new ImageData(rgba, width, height);
+*/
+var decodeRgbaDeflate = async (data, coords) => {
+	const expected = rgbaByteLength(coords);
+	const rgba = await inflate(base64ToBytes(data), expected);
+	if (rgba.length !== expected) throw new Error("RGBA data length does not match bounding box size");
+	return new Uint8ClampedArray(rgba.buffer);
+};
+export { BYTES_PER_PIXEL, ImageEncoding, base64ByteLength, base64ToBytes, boundingBoxSize, bytesToBase64, decodeRgbaDeflate, deflate, encodeRgbaDeflate, inflate, pixelFingerprint, rgbaByteLength };

package/dist/lib/messages/PatchSender/index.d.ts

@@ -0,0 +1,75 @@
+import { type BoundingBox } from "../../image";
+import type { CanvasFactory } from "../../classes/Layer";
+import { type DrawableLayer } from "../../rendering/compositing";
+import { type PatchMessage } from "..";
+/** How long to wait after a change before sending, so quick changes go together */
+export declare const PATCH_DELAY_MS = 200;
+/**
+ * The smallest box containing every pixel that differs between two images of the same size (one 32-bit value per
+ * pixel), or undefined if they are the same.
+ *
+ * @example
+ * changedArea(before, after, 100, 100); // [10, 20, 31, 45]
+ */
+export declare const changedArea: (before: Uint32Array, after: Uint32Array, width: number, height: number) => BoundingBox | undefined;
+/**
+ * Copy a box of RGBA pixels out of a whole image.
+ *
+ * @example
+ * cropRgba(imageData.data, imageData.width, [10, 10, 20, 20]); // 10 × 10 pixels
+ */
+export declare const cropRgba: (rgba: Uint8ClampedArray, width: number, [x1, y1, x2, y2]: BoundingBox) => Uint8ClampedArray;
+/** Options for sending patches */
+export interface PatchSenderOptions {
+    width: number;
+    height: number;
+    /** The user's own layers, top first */
+    layers: () => readonly DrawableLayer[];
+    /** Delivers a patch (if it throws or rejects, the changes go with the next patch) */
+    send: (message: PatchMessage) => void | Promise<void>;
+    createCanvas: CanvasFactory;
+    delayMs?: number;
+    /** Runs the sync once it's due, e.g. waiting for a pause in drawing (runs it straight away by default) */
+    whenIdle?: (run: () => unknown) => void;
+}
+/**
+ * Sends the user's drawing as patches. Shortly after any change (and once `whenIdle` runs it), it flattens the
+ * user's own layers, compares the result with what it last sent, and sends only the area that changed. This covers every kind of change (strokes,
+ * erasing, moving pixels, layer settings and order) without each tool reporting what it changed.
+ *
+ * @example
+ * const sync = new PatchSender({ width, height, layers: () => canvas.layers.layers, send, createCanvas });
+ * app.layers.addEventListener("change", () => sync.schedule());
+ */
+export default class PatchSender {
+    private readonly options;
+    private readonly canvas;
+    private readonly context;
+    /** The pixels last sent (all transparent to start with) */
+    private sent;
+    private timer?;
+    /** Whether it has stopped (a sync waiting for `whenIdle` doesn't run) */
+    private stopped;
+    /** The sync in progress, so syncs never overlap */
+    private running;
+    constructor(options: PatchSenderOptions);
+    /**
+     * Send the changes soon (changes within the delay go together), once `whenIdle` runs the sync.
+     */
+    schedule(): void;
+    /**
+     * Send what changed since the last sync now. Resolves once sent; if sending fails, the changes go with the next sync.
+     */
+    sync(): Promise<void>;
+    /** Flatten the layers and send the changed area, if any */
+    private sendChanges;
+    /**
+     * Count pixels as already sent (e.g. the user's earlier work, restored from a shared drawing's history), so they aren't
+     * sent again.
+     */
+    markSent(area: BoundingBox, rgba: Uint8ClampedArray): void;
+    /**
+     * Stop any pending sync.
+     */
+    stop(): void;
+}

package/dist/lib/messages/PatchSender/index.js

@@ -0,0 +1,125 @@
+import { ImageEncoding, encodeRgbaDeflate } from "../../image/index.js";
+import { drawLayers } from "../../rendering/compositing/index.js";
+import { createPatchMessage } from "../index.js";
+// src/lib/messages/PatchSender/index.ts
+/** How long to wait after a change before sending, so quick changes go together */
+var PATCH_DELAY_MS = 200;
+/**
+* The smallest box containing every pixel that differs between two images of the same size (one 32-bit value per
+* pixel), or undefined if they are the same.
+*
+* @example
+* changedArea(before, after, 100, 100); // [10, 20, 31, 45]
+*/
+var changedArea = (before, after, width, height) => {
+	let x1 = width;
+	let y1 = height;
+	let x2 = -1;
+	let y2 = -1;
+	for (let y = 0; y < height; y++) {
+		const row = y * width;
+		for (let x = 0; x < width; x++) {
+			if (before[row + x] === after[row + x]) continue;
+			if (x < x1) x1 = x;
+			if (x > x2) x2 = x;
+			if (y < y1) y1 = y;
+			y2 = y;
+		}
+	}
+	return x2 < 0 ? void 0 : [
+		x1,
+		y1,
+		x2 + 1,
+		y2 + 1
+	];
+};
+/**
+* Copy a box of RGBA pixels out of a whole image.
+*
+* @example
+* cropRgba(imageData.data, imageData.width, [10, 10, 20, 20]); // 10 × 10 pixels
+*/
+var cropRgba = (rgba, width, [x1, y1, x2, y2]) => {
+	const rowBytes = (x2 - x1) * 4;
+	const cropped = new Uint8ClampedArray(rowBytes * (y2 - y1));
+	for (let y = y1; y < y2; y++) {
+		const start = (y * width + x1) * 4;
+		cropped.set(rgba.subarray(start, start + rowBytes), (y - y1) * rowBytes);
+	}
+	return cropped;
+};
+/**
+* Sends the user's drawing as patches. Shortly after any change (and once `whenIdle` runs it), it flattens the
+* user's own layers, compares the result with what it last sent, and sends only the area that changed. This covers every kind of change (strokes,
+* erasing, moving pixels, layer settings and order) without each tool reporting what it changed.
+*
+* @example
+* const sync = new PatchSender({ width, height, layers: () => canvas.layers.layers, send, createCanvas });
+* app.layers.addEventListener("change", () => sync.schedule());
+*/
+var PatchSender = class {
+	options;
+	canvas;
+	context;
+	/** The pixels last sent (all transparent to start with) */
+	sent;
+	timer;
+	/** Whether it has stopped (a sync waiting for `whenIdle` doesn't run) */
+	stopped = false;
+	/** The sync in progress, so syncs never overlap */
+	running = Promise.resolve();
+	constructor(options) {
+		this.options = options;
+		this.canvas = options.createCanvas(options.width, options.height);
+		this.context = this.canvas.getContext("2d", { willReadFrequently: true });
+		this.sent = new Uint8ClampedArray(options.width * options.height * 4);
+	}
+	/**
+	* Send the changes soon (changes within the delay go together), once `whenIdle` runs the sync.
+	*/
+	schedule() {
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => {
+			const run = () => this.stopped ? void 0 : this.sync().catch(() => void 0);
+			if (this.options.whenIdle) this.options.whenIdle(run);
+			else run();
+		}, this.options.delayMs ?? 200);
+	}
+	/**
+	* Send what changed since the last sync now. Resolves once sent; if sending fails, the changes go with the next sync.
+	*/
+	sync() {
+		clearTimeout(this.timer);
+		this.running = this.running.catch(() => void 0).then(() => this.sendChanges());
+		return this.running;
+	}
+	/** Flatten the layers and send the changed area, if any */
+	async sendChanges() {
+		const { width, height, send } = this.options;
+		this.context.clearRect(0, 0, width, height);
+		drawLayers(this.context, this.options.layers());
+		const current = this.context.getImageData(0, 0, width, height).data;
+		const area = changedArea(new Uint32Array(this.sent.buffer), new Uint32Array(current.buffer), width, height);
+		if (!area) return;
+		const data = await encodeRgbaDeflate(cropRgba(current, width, area), area);
+		await send(createPatchMessage(area, ImageEncoding.RgbaDeflate, data));
+		this.sent = current;
+	}
+	/**
+	* Count pixels as already sent (e.g. the user's earlier work, restored from a shared drawing's history), so they aren't
+	* sent again.
+	*/
+	markSent(area, rgba) {
+		const [x1, y1, x2, y2] = area;
+		const rowBytes = (x2 - x1) * 4;
+		for (let y = y1; y < y2; y++) this.sent.set(rgba.subarray((y - y1) * rowBytes, (y - y1 + 1) * rowBytes), (y * this.options.width + x1) * 4);
+	}
+	/**
+	* Stop any pending sync.
+	*/
+	stop() {
+		this.stopped = true;
+		clearTimeout(this.timer);
+	}
+};
+export { PATCH_DELAY_MS, changedArea, cropRgba, PatchSender as default };

package/dist/lib/messages/index.d.ts

@@ -0,0 +1,26 @@
+import type { BoundingBox, ImageEncoding } from "../image";
+import { type CanvasMessage, type PatchMessage } from "./schema";
+export * from "./schema";
+/** Result of checking a received message */
+export type MessageValidationResult = {
+    valid: true;
+    value: CanvasMessage;
+} | {
+    valid: false;
+    errors: string[];
+};
+/**
+ * Make a patch message.
+ *
+ * @example
+ * createPatchMessage([0, 0, 10, 10], ImageEncoding.RgbaDeflate, data);
+ */
+export declare const createPatchMessage: (coords: BoundingBox, encoding: ImageEncoding, data: string) => PatchMessage;
+/**
+ * Check a received (untrusted) drawing message: its protocol version, its kind, its schema, and that a patch's area
+ * isn't empty.
+ *
+ * @example
+ * validateCanvasMessage(JSON.parse(text)); // { valid: true, value: { protocol: 1, type: "patch", … } }
+ */
+export declare const validateCanvasMessage: (input: unknown) => MessageValidationResult;