@lvl99dotcom/paintcanvas 0.7.0 → 0.8.0

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

@@ -14,18 +14,24 @@ import Lasso, { type LassoResult } from "../../selection/Lasso";
 import Transformer from "../../transform/Transformer";
 import { type CanvasFactory, type LayerConfig } from "../Layer";
 import LayerAutosave, { type AutosaveOptions } from "../LayerAutosave";
-import type { LayerStoreLike } from "../../storage";
+import type { AssetStores, DocumentStoreLike, LayerStoreLike } from "../../storage";
+import RemoteDocumentAutosave, { type RemoteAutosaveOptions } from "../RemoteDocumentAutosave";
+import type { ProfileGraph } from "../../profiles";
 import type { AssetAuthor, BrushConfig } from "../../brushes/types";
-import CustomPresets, { type PresetStoreLike } from "../CustomPresets";
+import CustomPresets from "../CustomPresets";
+import AssetSync from "../AssetSync";
+import ColourPalettes from "../ColourPalettes";
+import type { ColourPalette } from "../../palette";
 import InputSettings from "../InputSettings";
 import UiSettings, { type Rendering } from "../UiSettings";
 import Palette from "../Palette";
 import ProfileGraphs from "../ProfileGraphs";
 import ShortcutSettings from "../ShortcutSettings";
+import SettingsExtensions from "../SettingsExtensions";
 import ExternalSheets from "../ExternalSheets";
 import { type CanvasMessage, type PatchMessage, type StrokeMessage } from "../../messages";
 import { type BoundingBox } from "../../image";
-import { type PaintCanvasDocument } from "../../document";
+import { type DocumentFile, type DocumentInfo, type DrawingDocument } from "../../document";
 export { Tool };
 /** How the colour sample tool samples: the pixel under the pointer, or the average of a dragged rectangle */
 export type SampleMode = "point" | "area";
@@ -54,8 +60,6 @@ export declare const DEFAULT_BACKGROUND_COLOUR = "#ffffff";
  * (painted by the eraser and Delete when the layer's alpha lock is on, and by background fills).
  */
 export type ColourSlot = "foreground" | "background";
-/** Owner of the custom presets when the `ownerId` option isn't given */
-export declare const DEFAULT_OWNER_ID = "local";
 /** Author name of presets made with `newPreset` when the `presetAuthor` option isn't given */
 export declare const DEFAULT_AUTHOR = "Unknown";
 /** Names the implementer can change: what users see and what files are called */
@@ -64,12 +68,6 @@ export interface PaintCanvasNames {
     app: string;
     /** Start of the names of saved files, e.g. screenshots and exported presets */
     filePrefix: string;
-    /** The `format` written in exported brush preset files */
-    presetFileFormat: string;
-    /** The `format` written in exported colour palette files */
-    paletteFileFormat: string;
-    /** The `format` written in exported settings files */
-    settingsFileFormat: string;
     /** Author name of presets made by a user without a handle, e.g. from `presetAuthor` */
     unknownAuthor: string;
 }
@@ -93,6 +91,11 @@ export interface CanvasStats {
     /** Most undo steps kept */
     historyLimit: number;
 }
+/** Options for `PaintCanvas.createDocument` */
+export interface CreateDocumentOptions {
+    /** Whether to include a thumbnail (default true) */
+    thumbnail?: boolean;
+}
 /** Receives the drawing messages PaintCanvas sends; a returned promise that rejects means a patch wasn't delivered */
 export type MessageListener = (message: CanvasMessage) => void | Promise<void>;
 /** Options for sending drawing messages (see `startSending`) */
@@ -127,16 +130,16 @@ export interface PaintCanvasOptions {
      * given (replaceable for tests).
      */
     createCanvas?: CanvasFactory;
-    /** Where custom brush presets are kept (defaults to keeping them in memory only) */
-    presetStore?: PresetStoreLike;
-    /** Who the custom presets belong to, passed to the preset store (default `DEFAULT_OWNER_ID`) */
-    ownerId?: string;
+    /** Where the user's assets (brush presets, colour palettes, profile graphs) are kept (see `useAssetStores`) */
+    stores?: AssetStores;
     /** Gives the author of presets made with `newPreset` (asked each time, so it can follow name changes) */
     presetAuthor?: () => AssetAuthor;
     /** Names to use instead of PaintCanvas's own (see `DEFAULT_NAMES`) */
     names?: Partial<PaintCanvasNames>;
     /** Where to keep the user's layers so the drawing survives reloading the page (see `useLayerStore`) */
     layerStore?: LayerStoreLike;
+    /** Where to keep the whole drawing away from the browser, saved less often (see `useRemoteDocumentStore`) */
+    remoteDocumentStore?: DocumentStoreLike;
     /**
      * The system clipboard, which copying and cutting also put a PNG of the copied image data on so other apps (and brush
      * shapes) can use it (the browser's by default; `null` for none)
@@ -184,6 +187,20 @@ export default class PaintCanvas extends EventTarget {
     readonly palette: Palette;
     /** The user's own profile graphs (and the presets), for shaping how brush settings vary */
     readonly profiles: ProfileGraphs;
+    /** The drawing's details (see `documentInfo`) */
+    private info;
+    /** Keeps the drawing in a remote store */
+    private remoteDocumentAutosave?;
+    /** Settings wrapper apps add to the app settings (see `SettingsExtension`) */
+    readonly settingsExtensions: SettingsExtensions;
+    /** The user's own colour palettes (the one PaintCanvas comes with is `palette`) */
+    readonly palettes: ColourPalettes;
+    /** Where the user's assets are kept */
+    private stores;
+    /** Keeps the colour palettes in their store */
+    private palettesAutosave?;
+    /** Keeps the profile graphs in their store */
+    private profilesAutosave?;
     /** The user's keyboard shortcuts: each configurable action's key combination */
     readonly shortcuts: ShortcutSettings;
     /** The user's pointer position over the canvas, in canvas pixels (undefined when off the canvas) */
@@ -244,7 +261,6 @@ export default class PaintCanvas extends EventTarget {
     /** Creates the canvases the app draws on (fake ones in tests) */
     readonly createCanvas: CanvasFactory;
     /** Who the custom presets belong to (passed to the preset store) */
-    readonly ownerId: string;
     /** The largest canvas width or height allowed */
     readonly maxCanvasSize: number;
     /** Most layers the user can have */
@@ -316,23 +332,60 @@ export default class PaintCanvas extends EventTarget {
      * transport.onMessage((from, message) => canvas.receive(from, message));
      */
     receive(source: string, message: unknown): Promise<boolean>;
+    /** The drawing's details: its ID, name, authors and when it was made and last opened */
+    get documentInfo(): Readonly<DocumentInfo>;
+    /**
+     * Rename the drawing. Returns whether it was renamed (not if the name is empty).
+     *
+     * @example
+     * canvas.renameDocument("Sunset at sea");
+     */
+    renameDocument(name: string): boolean;
+    /**
+     * Use details of a drawing being restored (e.g. kept in the browser), marking it opened now.
+     */
+    restoreDocumentInfo(info: DocumentInfo): void;
+    /**
+     * 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?: string): void;
+    /**
+     * 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());
+     */
+    createDocument({ thumbnail, }?: CreateDocumentOptions): Promise<DrawingDocument>;
     /**
-     * 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.
+     * 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.openDocument(await myStore.load(id));
+     */
+    openDocument(document: DrawingDocument): Promise<boolean>;
+    /**
+     * 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());
      */
-    exportDocument(): Promise<PaintCanvasDocument>;
+    exportDocument(): Promise<DocumentFile>;
     /**
-     * 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 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));
      */
-    importDocument(document: unknown): Promise<boolean>;
+    importDocument(file: unknown): Promise<boolean>;
     /**
      * 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.
@@ -341,6 +394,32 @@ export default class PaintCanvas extends EventTarget {
      * canvas.restoreLayers(800, 600, [{ id: "a", name: "Sketch" }], [sketchImage], "a");
      */
     restoreLayers(width: number, height: number, layers: readonly LayerConfig[], images: readonly CanvasImageSource[], activeLayer: string): void;
+    /** Where the user's assets are kept (see `useAssetStores`) */
+    get assetStores(): Readonly<AssetStores>;
+    /** Keeps the user's profile graphs in their store, while one is used (see `useAssetStores`) */
+    get profileSync(): AssetSync<ProfileGraph> | undefined;
+    /** Keeps the user's colour palettes in their store, while one is used (see `useAssetStores`) */
+    get paletteSync(): AssetSync<ColourPalette> | undefined;
+    /**
+     * 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: AssetStores): void;
+    /** Keeps the drawing in a remote store, while one is used (see `useRemoteDocumentStore`) */
+    get remoteAutosave(): RemoteDocumentAutosave | undefined;
+    /**
+     * 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: DocumentStoreLike | undefined, options?: RemoteAutosaveOptions): RemoteDocumentAutosave | undefined;
     /** Keeps the user's layers in a store, while one is used (see `useLayerStore`) */
     get autosave(): LayerAutosave | undefined;
     /**
@@ -561,6 +640,13 @@ export default class PaintCanvas extends EventTarget {
      * own presets are the ones with this handle (see `isOwnAuthor`).
      */
     get authorHandle(): string;
+    /**
+     * The author of assets the user makes, e.g. colour palettes (from the `presetAuthor` option).
+     *
+     * @example
+     * app.palettes.create("Sunset", [], app.author);
+     */
+    get author(): AssetAuthor;
     /**
      * Make a new custom preset from settings: a new ID, the given name, and the author from the `presetAuthor` option.
      *
@@ -660,5 +746,7 @@ export default class PaintCanvas extends EventTarget {
     /**
      * Dispatch a `change` event.
      */
+    /** Use the drawing's details and tell listeners */
+    private setDocumentInfo;
     protected notify(): void;
 }

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

@@ -13,28 +13,27 @@ import Transformer, { applyMask, contentBounds, copyArea, drawTransformed } from
 import { boxBounds } from "../../transform/geometry/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 CustomPresets from "../CustomPresets/index.js";
-import { BRUSH_PRESET_FILE_FORMAT } from "../../presets/schema.js";
+import AssetSync from "../AssetSync/index.js";
+import ColourPalettes from "../ColourPalettes/index.js";
 import InputSettings from "../InputSettings/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) => {
@@ -133,6 +122,20 @@ var PaintCanvas = class extends EventTarget {
 	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) */
@@ -217,7 +220,6 @@ var PaintCanvas = class extends EventTarget {
 	/** 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 */
@@ -231,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 = {
@@ -239,11 +240,12 @@ 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.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);
@@ -259,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() {
@@ -396,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.
 	*
@@ -468,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;
@@ -949,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
@@ -1157,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.
  *