@lvl99dotcom/paintcanvas 0.6.0 → 0.8.0

package/dist/lib/classes/PaintCanvas/index.js

@@ -11,30 +11,29 @@ import Selection from "../../selection/Selection/index.js";
 import Lasso from "../../selection/Lasso/index.js";
 import Transformer, { applyMask, contentBounds, copyArea, drawTransformed } from "../../transform/Transformer/index.js";
 import { boxBounds } from "../../transform/geometry/index.js";
-import Layer, { createMemoryCanvas } from "../Layer/index.js";
+import Layer, { createMemoryCanvas, createOffscreenCanvas } from "../Layer/index.js";
 import LayerAutosave from "../LayerAutosave/index.js";
+import RemoteDocumentAutosave from "../RemoteDocumentAutosave/index.js";
 import { brushPresets, eraserPresets } from "../../brushes/index.js";
 import { BUILT_IN_AUTHOR, UNKNOWN_AUTHOR, authorHandle } from "../../brushes/authors/index.js";
-import "../../presets/index.js";
-import { BRUSH_PRESET_FILE_FORMAT } from "../../presets/schema.js";
 import CustomPresets from "../CustomPresets/index.js";
+import AssetSync from "../AssetSync/index.js";
+import ColourPalettes from "../ColourPalettes/index.js";
 import InputSettings from "../InputSettings/index.js";
-import UiSettings from "../UiSettings/index.js";
+import UiSettings, { DEFAULT_UI_SETTINGS } from "../UiSettings/index.js";
 import Palette from "../Palette/index.js";
-import { PALETTE_FILE_FORMAT } from "../../palette/schema.js";
 import ProfileGraphs from "../ProfileGraphs/index.js";
 import ShortcutSettings from "../ShortcutSettings/index.js";
-import "../../palette/index.js";
-import { SETTINGS_FILE_FORMAT } from "../../settings/schema.js";
+import SettingsExtensions from "../SettingsExtensions/index.js";
 import ExternalSheets from "../ExternalSheets/index.js";
 import PatchSender from "../../messages/PatchSender/index.js";
 import { createPatchMessage, validateCanvasMessage } from "../../messages/index.js";
 import { REDO_EVENT, UNDO_EVENT } from "../History/index.js";
 import { CanvasMessageType } from "../../messages/schema.js";
-import { ImageEncoding, base64ToBytes, boundingBoxSize, bytesToBase64, decodeRgbaDeflate, encodeRgbaDeflate } from "../../image/index.js";
+import { ImageEncoding, base64ToBytes, boundingBoxSize, decodeRgbaDeflate, encodeRgbaDeflate } from "../../image/index.js";
 import { drawLayers } from "../../rendering/compositing/index.js";
-import { DOCUMENT_FORMAT } from "../../document/schema.js";
-import { isValidDocument } from "../../document/index.js";
+import "../../document/schema.js";
+import { documentFromFile, documentToFile, newDocumentInfo, withAuthor } from "../../document/index.js";
 import { averageColour, flattenArea, pixelRect, readPixels } from "../../rendering/sample/index.js";
 // src/lib/classes/PaintCanvas/index.ts
 /** Toggleable panels */
@@ -61,32 +60,22 @@ var MAX_CANVAS_SIZE = 2e3;
 var DEFAULT_COLOUR = "#000000";
 /** Background colour to start with */
 var DEFAULT_BACKGROUND_COLOUR = "#ffffff";
-/** Owner of the custom presets when the `ownerId` option isn't given */
-var DEFAULT_OWNER_ID = "local";
 /** Author name of presets made with `newPreset` when the `presetAuthor` option isn't given */
 var DEFAULT_AUTHOR = UNKNOWN_AUTHOR;
 /** PaintCanvas's own names */
 var DEFAULT_NAMES = {
 	app: BUILT_IN_AUTHOR,
 	filePrefix: "paintcanvas",
-	presetFileFormat: BRUSH_PRESET_FILE_FORMAT,
-	paletteFileFormat: PALETTE_FILE_FORMAT,
-	settingsFileFormat: SETTINGS_FILE_FORMAT,
 	unknownAuthor: UNKNOWN_AUTHOR
 };
 /**
-* A canvas's pixels as a PNG data URL.
+* A canvas's pixels as a PNG.
 */
-var toPngDataUrl = async (canvas) => {
+var toPng = (canvas) => {
 	canvas.getContext("2d");
-	const blob = await canvas.convertToBlob({ type: "image/png" });
-	return `data:image/png;base64,${bytesToBase64(new Uint8Array(await blob.arrayBuffer()))}`;
+	return canvas.convertToBlob({ type: "image/png" });
 };
 /**
-* Decode a PNG data URL into an image.
-*/
-var fromPngDataUrl = (dataUrl) => createImageBitmap(new Blob([base64ToBytes(dataUrl.slice(dataUrl.indexOf(",") + 1))], { type: "image/png" }));
-/**
 * Decode a patch into pixels.
 */
 var decodePatch = async (patch) => {
@@ -127,12 +116,26 @@ var PaintCanvas = class extends EventTarget {
 	background = new BackgroundWork(this.strokeLog);
 	/** How the user's input devices control the canvas (scrolling, pinching, touch gestures, focus pen mode) */
 	input = new InputSettings();
-	/** The user's interface choices (theme and language), kept with the other app settings */
-	ui = new UiSettings();
+	/** The user's interface choices (theme, language and where canvases draw), kept with the other app settings */
+	ui;
 	/** The user's saved colours, shown as swatches */
 	palette = new Palette();
 	/** The user's own profile graphs (and the presets), for shaping how brush settings vary */
 	profiles = new ProfileGraphs();
+	/** The drawing's details (see `documentInfo`) */
+	info;
+	/** Keeps the drawing in a remote store */
+	remoteDocumentAutosave;
+	/** Settings wrapper apps add to the app settings (see `SettingsExtension`) */
+	settingsExtensions = new SettingsExtensions();
+	/** The user's own colour palettes (the one PaintCanvas comes with is `palette`) */
+	palettes = new ColourPalettes();
+	/** Where the user's assets are kept */
+	stores = {};
+	/** Keeps the colour palettes in their store */
+	palettesAutosave;
+	/** Keeps the profile graphs in their store */
+	profilesAutosave;
 	/** The user's keyboard shortcuts: each configurable action's key combination */
 	shortcuts = new ShortcutSettings();
 	/** The user's pointer position over the canvas, in canvas pixels (undefined when off the canvas) */
@@ -212,10 +215,11 @@ var PaintCanvas = class extends EventTarget {
 	/** The layer stack whose changes are being sent */
 	sendingLayers;
 	onLayersChangeToSend = () => this.sender?.schedule();
+	/** Where the canvases draw, chosen when the canvas started (the user's choice for next time is `ui.data.rendering`) */
+	rendering;
 	/** Creates the canvases the app draws on (fake ones in tests) */
 	createCanvas;
 	/** Who the custom presets belong to (passed to the preset store) */
-	ownerId;
 	/** The largest canvas width or height allowed */
 	maxCanvasSize;
 	/** Most layers the user can have */
@@ -229,7 +233,6 @@ var PaintCanvas = class extends EventTarget {
 	constructor(options = {}) {
 		super();
 		this.strokeLog.enabled = false;
-		this.ownerId = options.ownerId ?? "local";
 		this.maxCanvasSize = options.maxCanvasSize ?? 2e3;
 		this.maxLayers = options.maxLayers ?? 5;
 		this.names = {
@@ -237,12 +240,15 @@ var PaintCanvas = class extends EventTarget {
 			...options.names
 		};
 		this.presetAuthor = options.presetAuthor ?? (() => ({ name: DEFAULT_AUTHOR }));
+		this.info = newDocumentInfo(this.author);
 		this.tips.preload(this.brush.presets);
 		this.tips.preload(this.eraser.presets);
-		this.customPresets = new CustomPresets(this.ownerId, options.presetStore);
+		this.customPresets = new CustomPresets();
 		this.customPresets.addEventListener("change", () => this.listCustomPresets());
-		this.customPresets.load().catch(() => void 0);
-		this.createCanvas = options.createCanvas ?? createMemoryCanvas;
+		this.useAssetStores(options.stores ?? {});
+		this.rendering = options.rendering ?? DEFAULT_UI_SETTINGS.rendering;
+		this.ui = new UiSettings({ rendering: this.rendering });
+		this.createCanvas = options.createCanvas ?? (this.rendering === "gpu" ? createOffscreenCanvas : createMemoryCanvas);
 		this.systemClipboard = options.systemClipboard === null ? void 0 : options.systemClipboard ?? globalThis.navigator?.clipboard;
 		this.canvasWidth = DEFAULT_CANVAS_SIZE;
 		this.canvasHeight = DEFAULT_CANVAS_SIZE;
@@ -255,6 +261,7 @@ var PaintCanvas = class extends EventTarget {
 		this.watchLayersAndMask();
 		if (options.width !== void 0 || options.height !== void 0) this.setCanvasSize(options.width ?? this.canvasWidth, options.height ?? this.canvasHeight);
 		if (options.layerStore) this.useLayerStore(options.layerStore);
+		if (options.remoteDocumentStore) this.useRemoteDocumentStore(options.remoteDocumentStore);
 	}
 	/** Canvas width in pixels */
 	get width() {
@@ -392,65 +399,161 @@ var PaintCanvas = class extends EventTarget {
 		} }));
 		return true;
 	}
+	/** The drawing's details: its ID, name, authors and when it was made and last opened */
+	get documentInfo() {
+		return this.info;
+	}
 	/**
-	* The drawing as a document: its size, the user's layers and drawings from elsewhere, with PNG images (see
-	* `PaintCanvasDocument`). Turn it into JSON to save it as a file.
+	* Rename the drawing. Returns whether it was renamed (not if the name is empty).
 	*
 	* @example
-	* const json = JSON.stringify(await canvas.exportDocument());
+	* canvas.renameDocument("Sunset at sea");
+	*/
+	renameDocument(name) {
+		const trimmed = name.trim();
+		if (!trimmed) return false;
+		this.setDocumentInfo({
+			...this.info,
+			name: trimmed
+		});
+		return true;
+	}
+	/**
+	* Use details of a drawing being restored (e.g. kept in the browser), marking it opened now.
 	*/
-	async exportDocument() {
+	restoreDocumentInfo(info) {
+		this.setDocumentInfo({
+			...info,
+			dateOpened: (/* @__PURE__ */ new Date()).toISOString()
+		});
+	}
+	/**
+	* Start a new drawing: new details (a new ID, the user as its author, made now), and the layers replaced with one
+	* empty layer. Undo history starts again.
+	*
+	* @example
+	* canvas.newDocument("Sketch");
+	*/
+	newDocument(name) {
+		this.layerStack.replace([{ name: "Layer 1" }]);
+		this.history.clear();
+		this.setDocumentInfo(newDocumentInfo(this.author, name));
+	}
+	/**
+	* The drawing as a document (see `DrawingDocument`): its details, size, the user's layers and drawings from elsewhere
+	* as PNG blobs, and a thumbnail (at most `THUMBNAIL_SIZE` pixels on its longest side) unless left out. The user is
+	* added to its authors.
+	*
+	* @example
+	* await myStore.save(await canvas.createDocument());
+	*/
+	async createDocument({ thumbnail = true } = {}) {
+		const author = withAuthor(this.info.author, this.author);
+		if (author.length !== this.info.author.length) this.setDocumentInfo({
+			...this.info,
+			author
+		});
+		const { width, height } = this;
+		const scale = Math.min(1, 200 / Math.max(width, height));
+		const thumbnailWidth = Math.max(1, Math.round(width * scale));
+		const thumbnailHeight = Math.max(1, Math.round(height * scale));
 		const layers = this.layerStack.layers;
+		const [layerImages, sheetImages, thumbnailImage] = await Promise.all([
+			Promise.all(layers.map((layer) => toPng(layer.canvas))),
+			Promise.all(this.externalSheets.sheets.map(({ canvas }) => toPng(canvas))),
+			thumbnail ? toPng(this.flatten({
+				x: 0,
+				y: 0,
+				width,
+				height
+			}, thumbnailWidth, thumbnailHeight)) : void 0
+		]);
 		return {
-			format: DOCUMENT_FORMAT,
-			version: 1,
-			width: this.canvasWidth,
-			height: this.canvasHeight,
-			layers: await Promise.all(layers.map(async (layer) => {
-				const { name, visible, opacity, blendMode, alphaLock } = layer.toConfig();
+			...structuredClone(this.info),
+			width,
+			height,
+			layers: layers.map((layer, i) => {
+				const { id, name, visible, opacity, blendMode, alphaLock } = layer.toConfig();
 				return {
+					id,
 					name,
 					visible,
 					opacity,
-					blendMode,
+					blendingMode: blendMode,
 					alphaLock,
-					image: await toPngDataUrl(layer.canvas)
+					content: layerImages[i]
 				};
-			})),
-			activeLayer: layers.indexOf(this.layerStack.active),
-			external: await Promise.all(this.externalSheets.sheets.map(async ({ source, canvas }) => ({
+			}),
+			activeLayer: this.layerStack.active.id,
+			external: this.externalSheets.sheets.map(({ source }, i) => ({
 				source,
-				image: await toPngDataUrl(canvas)
-			})))
+				content: sheetImages[i]
+			})),
+			...thumbnailImage ? { thumbnail: {
+				width: thumbnailWidth,
+				height: thumbnailHeight,
+				content: thumbnailImage
+			} } : {}
 		};
 	}
 	/**
-	* Replace the drawing with a document (e.g. read from a file): its size, layers and drawings from elsewhere. Undo
-	* history starts again. Returns whether it was loaded: not when the document is invalid or an image can't be
-	* decoded, and then nothing changes.
+	* Replace the drawing with a document (e.g. from a store): its details (marked opened now), size, layers and drawings
+	* from elsewhere. Undo history starts again. Returns whether it was opened: not when it has too many layers, is too
+	* big, doesn't have its selected layer, or an image can't be decoded, and then nothing changes.
 	*
 	* @example
-	* await canvas.importDocument(JSON.parse(text));
+	* await canvas.openDocument(await myStore.load(id));
 	*/
-	async importDocument(document) {
-		const result = isValidDocument(document);
-		if (!result.valid || result.value.layers.length > this.maxLayers) return false;
-		const doc = result.value;
-		const images = await Promise.all([...doc.layers.map((layer) => fromPngDataUrl(layer.image)), ...doc.external.map((sheet) => fromPngDataUrl(sheet.image))]).catch(() => void 0);
+	async openDocument(document) {
+		const { layers, external, width, height, activeLayer } = document;
+		if (layers.length === 0 || layers.length > this.maxLayers || Math.max(width, height) > Math.min(this.maxCanvasSize, 1e4) || !layers.some((layer) => layer.id === activeLayer)) return false;
+		const images = await Promise.all([...layers, ...external].map((item) => createImageBitmap(item.content))).catch(() => void 0);
 		if (!images) return false;
-		const configs = doc.layers.map(({ name, visible, opacity, blendMode, alphaLock }) => ({
-			id: crypto.randomUUID(),
+		this.restoreLayers(width, height, layers.map(({ id, name, visible, opacity, blendingMode, alphaLock }) => ({
+			id,
 			name,
 			visible,
 			opacity,
-			blendMode,
+			blendMode: blendingMode,
 			alphaLock
-		}));
-		this.restoreLayers(doc.width, doc.height, configs, images, configs[doc.activeLayer].id);
-		doc.external.forEach((sheet, i) => this.externalSheets.restore(sheet.source, images[configs.length + i]));
+		})), images, activeLayer);
+		external.forEach((sheet, i) => this.externalSheets.restore(sheet.source, images[layers.length + i]));
+		const { id, name, author, dateCreated, dateOpened } = document;
+		this.restoreDocumentInfo({
+			id,
+			name,
+			author,
+			dateCreated,
+			dateOpened
+		});
 		return true;
 	}
 	/**
+	* The drawing as a document file (see `DocumentFile`): turn it into JSON to save it as a file.
+	*
+	* @example
+	* const json = JSON.stringify(await canvas.exportDocument());
+	*/
+	async exportDocument() {
+		return documentToFile(await this.createDocument());
+	}
+	/**
+	* Replace the drawing with a document file (e.g. read from a file, see `documentFromFile`). Returns whether it was
+	* opened: not when it isn't a valid document or can't be opened (see `openDocument`), and then nothing changes.
+	*
+	* @example
+	* await canvas.importDocument(JSON.parse(text));
+	*/
+	async importDocument(file) {
+		let document;
+		try {
+			document = documentFromFile(file);
+		} catch {
+			return false;
+		}
+		return this.openDocument(document);
+	}
+	/**
 	* Replace the canvas size and the user's layers (top first, each with its image) and select one by ID. Undo history
 	* starts again. Throws if the size or number of layers isn't allowed.
 	*
@@ -464,6 +567,54 @@ var PaintCanvas = class extends EventTarget {
 		this.layerStack.select(activeLayer);
 		this.history.clear();
 	}
+	/** Where the user's assets are kept (see `useAssetStores`) */
+	get assetStores() {
+		return this.stores;
+	}
+	/** Keeps the user's profile graphs in their store, while one is used (see `useAssetStores`) */
+	get profileSync() {
+		return this.profilesAutosave;
+	}
+	/** Keeps the user's colour palettes in their store, while one is used (see `useAssetStores`) */
+	get paletteSync() {
+		return this.palettesAutosave;
+	}
+	/**
+	* Keep the user's assets in stores, by kind: custom brush presets are loaded from theirs (in place of the current
+	* ones) and saved when they change; colour palettes and profile graphs saved there are added and changes saved (see
+	* `AssetSync`). Assets of a kind without a store are kept in memory only.
+	*
+	* @example
+	* canvas.useAssetStores({ brushes: new IndexedDbAssetStore("brushes"), profiles: new IndexedDbAssetStore("profiles") });
+	*/
+	useAssetStores(stores) {
+		this.stores = { ...stores };
+		this.customPresets.useStore(stores.brushes).catch(() => void 0);
+		this.profilesAutosave?.stop();
+		this.profilesAutosave = stores.profiles ? new AssetSync(this.profiles, stores.profiles) : void 0;
+		this.palettesAutosave?.stop();
+		this.palettesAutosave = stores.palettes ? new AssetSync(this.palettes, stores.palettes) : void 0;
+		this.notify();
+	}
+	/** Keeps the drawing in a remote store, while one is used (see `useRemoteDocumentStore`) */
+	get remoteAutosave() {
+		return this.remoteDocumentAutosave;
+	}
+	/**
+	* Keep the whole drawing in a remote store (e.g. the user's account online), or stop, without one: changes are saved
+	* every few minutes (see `RemoteDocumentAutosave`), or when asked with `canvas.remoteAutosave.save()`. Returns the
+	* autosave.
+	*
+	* @example
+	* canvas.useRemoteDocumentStore(myAccountStore, { intervalMs: 10 * 60 * 1000 });
+	*/
+	useRemoteDocumentStore(store, options) {
+		this.remoteDocumentAutosave?.stop();
+		this.remoteDocumentAutosave = store ? new RemoteDocumentAutosave(this, store, options) : void 0;
+		this.remoteDocumentAutosave?.start();
+		this.notify();
+		return this.remoteDocumentAutosave;
+	}
 	/** Keeps the user's layers in a store, while one is used (see `useLayerStore`) */
 	get autosave() {
 		return this.layerAutosave;
@@ -945,6 +1096,15 @@ var PaintCanvas = class extends EventTarget {
 		return authorHandle(this.presetAuthor()) ?? "";
 	}
 	/**
+	* The author of assets the user makes, e.g. colour palettes (from the `presetAuthor` option).
+	*
+	* @example
+	* app.palettes.create("Sunset", [], app.author);
+	*/
+	get author() {
+		return this.presetAuthor();
+	}
+	/**
 	* Make a new custom preset from settings: a new ID, the given name, and the author from the `presetAuthor` option.
 	*
 	* @example
@@ -1153,8 +1313,13 @@ var PaintCanvas = class extends EventTarget {
 	/**
 	* Dispatch a `change` event.
 	*/
+	/** Use the drawing's details and tell listeners */
+	setDocumentInfo(info) {
+		this.info = info;
+		this.notify();
+	}
 	notify() {
 		this.dispatchEvent(new Event("change"));
 	}
 };
-export { DEFAULT_AUTHOR, DEFAULT_BACKGROUND_COLOUR, DEFAULT_CANVAS_SIZE, DEFAULT_COLOUR, DEFAULT_NAMES, DEFAULT_OWNER_ID, MAX_CANVAS_SIZE, Panel, TOOL_PANELS, Tool, PaintCanvas as default, isHexColour };
+export { DEFAULT_AUTHOR, DEFAULT_BACKGROUND_COLOUR, DEFAULT_CANVAS_SIZE, DEFAULT_COLOUR, DEFAULT_NAMES, MAX_CANVAS_SIZE, Panel, TOOL_PANELS, Tool, PaintCanvas as default, isHexColour };

package/dist/lib/classes/Palette/index.d.ts

@@ -8,8 +8,9 @@
  */
 export declare const sanitisePalette: (input: unknown) => string[] | undefined;
 /**
- * The user's saved colours, shown as swatches. Each colour is kept once, as lowercase `#rrggbb`, up to
- * `MAX_PALETTE_COLOURS`. Kept in memory; the implementer saves and restores them (see `set` and the `change` event).
+ * The colours of the palette PaintCanvas comes with (`canvas.palette`), shown as swatches the user can pick from but not
+ * change. Each colour is kept once, as lowercase `#rrggbb`, up to `MAX_PALETTE_COLOURS`. An implementer can give it other
+ * colours (see `set` and the `change` event); it isn't saved.
  *
  * Dispatches a `change` event when the colours change.
  *

package/dist/lib/classes/Palette/index.js

@@ -20,8 +20,9 @@ var sanitisePalette = (input) => {
 	return [...colours];
 };
 /**
-* The user's saved colours, shown as swatches. Each colour is kept once, as lowercase `#rrggbb`, up to
-* `MAX_PALETTE_COLOURS`. Kept in memory; the implementer saves and restores them (see `set` and the `change` event).
+* The colours of the palette PaintCanvas comes with (`canvas.palette`), shown as swatches the user can pick from but not
+* change. Each colour is kept once, as lowercase `#rrggbb`, up to `MAX_PALETTE_COLOURS`. An implementer can give it other
+* colours (see `set` and the `change` event); it isn't saved.
 *
 * Dispatches a `change` event when the colours change.
 *

package/dist/lib/classes/ProfileGraphs/index.d.ts

@@ -23,8 +23,9 @@ export interface ProfileGraphDraft {
     points: readonly ProfilePoint[];
 }
 /**
- * The user's own profile graphs, alongside the ones PaintCanvas comes with (`PROFILE_PRESETS`). Kept in memory; the app
- * settings save and restore them (see `set` and the `change` event). Each gets a UUID when it's first saved.
+ * The user's own profile graphs, alongside the ones PaintCanvas comes with (`PROFILE_PRESETS`). Kept in memory; a
+ * profile store keeps them (see `PaintCanvas.useAssetStores`), or save and restore them yourself (see `set`, `merge` and
+ * the `change` event). Each gets a UUID when it's first saved.
  *
  * Dispatches a `change` event when the user's graphs change.
  *
@@ -37,6 +38,8 @@ export default class ProfileGraphs extends EventTarget {
     private values;
     /** The user's own graphs, in the order they were first saved */
     get graphs(): readonly ProfileGraph[];
+    /** The user's own graphs (the same as `graphs`, so a store can keep them, see `AssetSync`) */
+    get items(): readonly ProfileGraph[];
     /** Every graph: the presets, then the user's own */
     get all(): readonly ProfileGraph[];
     /**
@@ -84,4 +87,12 @@ export default class ProfileGraphs extends EventTarget {
      * profiles.set(settings.profiles);
      */
     set(graphs: unknown): void;
+    /**
+     * Add graphs (e.g. loaded from a store or imported), replacing the user's graphs with the same IDs and keeping the
+     * others, up to `MAX_SAVED_PROFILES`. Invalid graphs are left out (see `sanitiseProfiles`).
+     *
+     * @example
+     * profiles.merge(await store.list());
+     */
+    merge(graphs: unknown): void;
 }

package/dist/lib/classes/ProfileGraphs/index.js

@@ -45,8 +45,9 @@ var sanitiseProfiles = (input) => {
 	return [...graphs.values()];
 };
 /**
-* The user's own profile graphs, alongside the ones PaintCanvas comes with (`PROFILE_PRESETS`). Kept in memory; the app
-* settings save and restore them (see `set` and the `change` event). Each gets a UUID when it's first saved.
+* The user's own profile graphs, alongside the ones PaintCanvas comes with (`PROFILE_PRESETS`). Kept in memory; a
+* profile store keeps them (see `PaintCanvas.useAssetStores`), or save and restore them yourself (see `set`, `merge` and
+* the `change` event). Each gets a UUID when it's first saved.
 *
 * Dispatches a `change` event when the user's graphs change.
 *
@@ -61,6 +62,10 @@ var ProfileGraphs = class extends EventTarget {
 	get graphs() {
 		return this.values;
 	}
+	/** The user's own graphs (the same as `graphs`, so a store can keep them, see `AssetSync`) */
+	get items() {
+		return this.values;
+	}
 	/** Every graph: the presets, then the user's own */
 	get all() {
 		return [...PROFILE_PRESETS, ...this.values];
@@ -144,5 +149,20 @@ var ProfileGraphs = class extends EventTarget {
 		this.values = next;
 		this.dispatchEvent(new Event("change"));
 	}
+	/**
+	* Add graphs (e.g. loaded from a store or imported), replacing the user's graphs with the same IDs and keeping the
+	* others, up to `MAX_SAVED_PROFILES`. Invalid graphs are left out (see `sanitiseProfiles`).
+	*
+	* @example
+	* profiles.merge(await store.list());
+	*/
+	merge(graphs) {
+		const added = sanitiseProfiles(graphs);
+		if (!added?.length) return;
+		const byId = new Map(this.values.map((graph) => [graph.id, graph]));
+		for (const graph of added) byId.set(graph.id, graph);
+		this.values = [...byId.values()].slice(0, 100);
+		this.dispatchEvent(new Event("change"));
+	}
 };
 export { ProfileGraphs as default, sanitisePoints, sanitiseProfiles };

package/dist/lib/classes/RemoteDocumentAutosave/index.d.ts

@@ -0,0 +1,73 @@
+import type { DocumentStoreLike } from "../../storage";
+import type { DrawingDocument } from "../../document/schema";
+/** How often changes are saved to the remote store, at most (milliseconds): every 5 minutes */
+export declare const REMOTE_SAVE_INTERVAL_MS: number;
+/** Event dispatched when saving fails (detail: the error) */
+export declare const REMOTE_AUTOSAVE_ERROR_EVENT = "error";
+/** The canvas whose drawing is saved (`PaintCanvas`) */
+export interface RemoteAutosaveCanvas extends EventTarget {
+    /** The user's layers (replaced when the canvas size changes, followed by a `change` event) */
+    readonly layers: EventTarget;
+    /** The drawing as a document */
+    createDocument(): Promise<DrawingDocument>;
+}
+/** Options for `RemoteDocumentAutosave` */
+export interface RemoteAutosaveOptions {
+    /** How often changes are saved, at most (default `REMOTE_SAVE_INTERVAL_MS`) */
+    intervalMs?: number;
+}
+/**
+ * Keeps a canvas's drawing in a remote store (e.g. a user's account online), less often than the browser keeps it:
+ * every `intervalMs` while there are changes not saved yet, or when asked (`save`). The whole document is saved each
+ * time, with a thumbnail.
+ *
+ * Dispatches `change` when saving starts, makes progress or ends, and `error` (detail: the error) when it fails (the
+ * changes are tried again next time).
+ *
+ * @example
+ * const autosave = new RemoteDocumentAutosave(canvas, myAccountStore);
+ * autosave.start();
+ * saveButton.onclick = () => autosave.save();
+ */
+export default class RemoteDocumentAutosave extends EventTarget {
+    /** Where the drawing is kept */
+    readonly store: DocumentStoreLike;
+    /** The last saving error, until a save succeeds */
+    error?: unknown;
+    /** When the drawing was last saved, if it has been */
+    lastSaved?: Date;
+    /** How much of the save under way is done (0 to 1), if known */
+    progress?: number;
+    private readonly canvas;
+    private readonly intervalMs;
+    private timer?;
+    /** The layers being watched for changes */
+    private watched?;
+    /** Whether there are changes not saved yet */
+    private dirty;
+    /** The save being written, if any */
+    private current?;
+    private readonly onChange;
+    private readonly onCanvasChange;
+    constructor(canvas: RemoteAutosaveCanvas, store: DocumentStoreLike, options?: RemoteAutosaveOptions);
+    /** Whether a save is under way */
+    get saving(): boolean;
+    /** Whether there are changes not saved yet */
+    get hasChanges(): boolean;
+    /**
+     * Start saving changes every `intervalMs`.
+     */
+    start(): void;
+    /**
+     * Stop saving changes (a save under way finishes). Changes not saved yet aren't saved.
+     */
+    stop(): void;
+    /**
+     * Save the drawing now (e.g. when the user asks). While a save is under way, that save is returned.
+     */
+    save(): Promise<void>;
+    /** Save the whole drawing */
+    private write;
+    /** Tell listeners something changed */
+    private notify;
+}