@lvl99dotcom/paintcanvas 0.0.0-stage → 0.3.0

package/dist/lib/i18n/index.js

@@ -0,0 +1,277 @@
+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);
+/**
+* A locale's language name, written in that language (so people can find their own), with its first letter in
+* capitals. Gives the tag itself if the browser can't name it.
+*
+* @example
+* languageName("ja"); // "日本語"
+* languageName("fr"); // "Français"
+* languageName("en-GB"); // "English (United Kingdom)"
+*/
+var languageName = (locale) => {
+	try {
+		const name = new Intl.DisplayNames([locale], {
+			type: "language",
+			languageDisplay: "standard",
+			fallback: "none"
+		}).of(locale);
+		return name ? name.charAt(0).toLocaleUpperCase(locale) + name.slice(1) : locale;
+	} catch {
+		return locale;
+	}
+};
+/** A locale loader's strings, whether given directly or as a module's default export */
+var unwrap = (module) => "default" in module && typeof module.default === "object" ? module.default : module;
+/**
+* One set of strings for some locales (e.g. PaintCanvas's, or an app's), each loaded once, when first needed.
+*/
+var LocaleSource = class {
+	loaders;
+	/** Strings of each locale loaded so far */
+	strings = /* @__PURE__ */ new Map();
+	/** Loads started, so a locale loading for two callers loads once */
+	loading = /* @__PURE__ */ new Map();
+	constructor(loaders = {}) {
+		this.loaders = loaders;
+	}
+	/**
+	* Load a locale's strings, if this has a loader for it and they aren't loaded yet. A failed load rejects, and can be
+	* tried again.
+	*/
+	load(locale) {
+		const loader = this.loaders[locale];
+		if (!loader || this.strings.has(locale)) return Promise.resolve();
+		let loading = this.loading.get(locale);
+		if (!loading) {
+			loading = loader().then((module) => {
+				this.strings.set(locale, unwrap(module));
+			}, (error) => {
+				this.loading.delete(locale);
+				throw error;
+			});
+			this.loading.set(locale, loading);
+		}
+		return loading;
+	}
+};
+/**
+* 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.
+*
+* Other projects can add their own strings and locales with `addLocales` and `addStrings`. A locale's strings from
+* every set load together and are merged in the order the sets were added (PaintCanvas's first), so a key in a later
+* set replaces the same key in an earlier one. Keys are prefixed by project by convention: `paintCanvas.` for
+* PaintCanvas's, and e.g. `liveCanvas.` for an app's.
+*
+* 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("paintCanvas.layers.delete", { name: "Sketch" });
+*/
+var Translations = class extends EventTarget {
+	fallback;
+	/** Sets of strings, in the order they were added */
+	sources;
+	/** Each locale's strings from every set loaded so far, merged in order */
+	merged = /* @__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.fallback = options.fallback ?? "en-US";
+		const builtIn = new LocaleSource(options.locales ?? BUILT_IN_LOCALES);
+		builtIn.strings.set(this.fallback, options.fallbackStrings ?? en_US_default);
+		this.sources = [builtIn];
+		this.merge(this.fallback);
+		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: the fallback, and every locale a set of strings can load */
+	get locales() {
+		return [.../* @__PURE__ */ new Set([this.fallback, ...this.sources.flatMap((source) => Object.keys(source.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 from every set if needed.
+	* Dispatches `change` once they're 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;
+		await this.load(locale);
+		if (this.requested !== locale) return;
+		this.current = locale;
+		this.dispatchEvent(new Event("change"));
+	}
+	/**
+	* Add a set of strings for some locales, loaded when first used, after the sets already added (so its keys replace
+	* theirs). Its locales become available. The locale in use and the fallback load straight away, then `change` is
+	* dispatched if the set has strings for either.
+	*
+	* @example
+	* await translations.addLocales({
+	*   "en-US": () => import("./locales/en-US.json"),
+	*   fr: () => import("./locales/fr.json"),
+	* });
+	* translations.t("liveCanvas.share");
+	*/
+	async addLocales(loaders) {
+		this.sources.push(new LocaleSource(loaders));
+		const locales = [.../* @__PURE__ */ new Set([this.current, this.fallback])];
+		await Promise.all(locales.map((locale) => this.load(locale)));
+		if (locales.some((locale) => Object.hasOwn(loaders, locale))) this.dispatchEvent(new Event("change"));
+	}
+	/**
+	* Add or replace strings for a locale (e.g. the implementer's own wording or extra keys), after the sets already
+	* added. Dispatches `change` if it's the locale in use or the fallback.
+	*
+	* @example
+	* translations.addStrings("en-US", { "paintCanvas.tool.brush": "Paintbrush" });
+	*/
+	addStrings(locale, strings) {
+		const source = new LocaleSource();
+		source.strings.set(locale, strings);
+		this.sources.push(source);
+		this.merge(locale);
+		if (locale === this.current || locale === this.fallback) this.dispatchEvent(new Event("change"));
+	}
+	/**
+	* Load a locale's strings from every set, including sets added while loading, then merge them.
+	*/
+	async load(locale) {
+		let count;
+		do {
+			count = this.sources.length;
+			await Promise.all(this.sources.map((source) => source.load(locale)));
+		} while (count !== this.sources.length);
+		this.merge(locale);
+	}
+	/**
+	* Merge a locale's strings loaded so far from every set, in the order the sets were added.
+	*/
+	merge(locale) {
+		this.merged.set(locale, Object.assign({}, ...this.sources.map((source) => source.strings.get(locale))));
+	}
+	/**
+	* 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. `paintCanvas.presets.imported.one` and
+	* `paintCanvas.presets.imported.other`). Falls back to the fallback locale, then the key.
+	*
+	* @example
+	* translations.t("paintCanvas.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.merged.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, languageName, 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;
+}