@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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

@@ -18,7 +18,9 @@ import type { LayerStoreLike } from "../../storage";
 import type { AssetAuthor, BrushConfig } from "../../brushes/types";
 import CustomPresets, { type PresetStoreLike } from "../CustomPresets";
 import InputSettings from "../InputSettings";
+import UiSettings from "../UiSettings";
 import Palette from "../Palette";
+import ProfileGraphs from "../ProfileGraphs";
 import ShortcutSettings from "../ShortcutSettings";
 import ExternalSheets from "../ExternalSheets";
 import { type CanvasMessage, type PatchMessage, type StrokeMessage } from "../../messages";
@@ -113,7 +115,11 @@ export interface PaintCanvasOptions {
     maxCanvasSize?: number;
     /** Most layers the user can have (default `DEFAULT_MAX_LAYERS`) */
     maxLayers?: number;
-    /** Creates layer canvases (replaceable for tests) */
+    /**
+     * Creates the canvases the engine draws in: layers, stroke buffers, masks and copies. `createMemoryCanvas` by default,
+     * keeping pixels in regular memory so saving and copying don't stall phones; pass `createOffscreenCanvas` to keep them
+     * on the GPU instead (replaceable for tests).
+     */
     createCanvas?: CanvasFactory;
     /** Where custom brush presets are kept (defaults to keeping them in memory only) */
     presetStore?: PresetStoreLike;
@@ -125,7 +131,14 @@ export interface PaintCanvasOptions {
     names?: Partial<PaintCanvasNames>;
     /** Where to keep the user's layers so the drawing survives reloading the page (see `useLayerStore`) */
     layerStore?: LayerStoreLike;
+    /**
+     * 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)
+     */
+    systemClipboard?: SystemClipboardLike | null;
 }
+/** The part of the system clipboard PaintCanvas writes to (the browser's `navigator.clipboard`) */
+export type SystemClipboardLike = Pick<Clipboard, "write">;
 /**
  * The painting engine: canvas size, layers, brush and eraser settings, custom presets, the selected tool, foreground and background colours,
  * selection, transforms, clipboard, undo/redo history, viewport and input settings. Where its data is kept and who it
@@ -159,8 +172,12 @@ export default class PaintCanvas extends EventTarget {
     readonly background: BackgroundWork;
     /** How the user's input devices control the canvas (scrolling, pinching, touch gestures, focus pen mode) */
     readonly input: InputSettings;
+    /** The user's interface choices (theme and language), kept with the other app settings */
+    readonly ui: UiSettings;
     /** The user's saved colours, shown as swatches */
     readonly palette: Palette;
+    /** The user's own profile graphs (and the presets), for shaping how brush settings vary */
+    readonly profiles: ProfileGraphs;
     /** 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) */
@@ -203,6 +220,10 @@ export default class PaintCanvas extends EventTarget {
     private currentSelectedColour;
     /** Image data copied with cut or copy, and the area it was copied from */
     private clipboard?;
+    /** How many times image data has been copied (see `copyCount`) */
+    private copies;
+    /** The system clipboard copies are also put on, if any */
+    private readonly systemClipboard?;
     /** Drawings from elsewhere */
     private externalSheets;
     /** Who receives the drawing messages this canvas sends */
@@ -425,6 +446,40 @@ export default class PaintCanvas extends EventTarget {
      * nothing during a stroke or while a transform is pending. Returns the area copied, if any.
      */
     copy(): Rect | undefined;
+    /**
+     * Copy the masked image data of all the shown layers, mixed as they're shown (each layer's opacity and blend mode,
+     * without the white background), to the clipboard. Hidden layers are left out. Like `copy`, it needs a mask with image
+     * data inside it, and does nothing during a stroke or while a transform is pending. Returns the area copied, if any.
+     *
+     * @example
+     * app.selection.selectAll();
+     * app.copyMerged(); // { x: 10, y: 20, width: 30, height: 5 }: the part of the canvas with paint on any shown layer
+     */
+    copyMerged(): Rect | undefined;
+    /**
+     * Copy the masked part of a canvas-sized image to the clipboard (see `copy`), returning the area copied, if any.
+     */
+    private copyMasked;
+    /**
+     * How many times image data has been copied or cut, to tell whether it was copied here since something else may have
+     * been copied in another app (see `KeyboardShortcuts`).
+     */
+    get copyCount(): number;
+    /** Whether there is copied image data to paste (see `copy` and `cut`) */
+    get hasClipboard(): boolean;
+    /**
+     * The copied image data as a PNG, if there is any (e.g. to use as a brush shape).
+     *
+     * @example
+     * const png = await canvas.copiedPng(); // Blob of type "image/png", or undefined
+     */
+    copiedPng(): Promise<Blob | undefined>;
+    /**
+     * Put copied image data on the system clipboard as a PNG, if there is one and the browser can. The item is made
+     * straight away (some browsers only allow writing while handling the key press or click) with the PNG to follow.
+     * Failing (e.g. the page isn't focused) changes nothing: the image data can still be pasted here.
+     */
+    private writeSystemClipboard;
     /**
      * Copy the masked image data of the selected layer to the clipboard, then remove it from the layer as one undoable
      * action (see `deleteMasked`).
@@ -450,9 +505,11 @@ export default class PaintCanvas extends EventTarget {
      * data when its alpha lock is on. None if that is empty.
      */
     private fillArea;
+    /** Whether image data can be copied now: not during a stroke or while a transform is pending */
+    private get canCopy();
     /**
-     * The bounds of the selected layer's image data inside the mask, if there is a mask with image data inside it. None
-     * during a stroke or while a transform is pending.
+     * The bounds of a canvas-sized image's data (the selected layer's by default) inside the mask, if there is a mask
+     * with image data inside it. None during a stroke or while a transform is pending.
      */
     private maskedArea;
     /**
@@ -471,6 +528,18 @@ export default class PaintCanvas extends EventTarget {
      * discards it. A pending transform is applied first.
      */
     paste(): void;
+    /**
+     * Show an image from elsewhere (e.g. pasted from another app) over the selected layer, in the middle of the part of
+     * the canvas in view, and select the Move tool to place, scale and rotate it, like `paste`. An image larger than the
+     * canvas is shrunk to fit it. Does nothing during a stroke.
+     *
+     * @example
+     * canvas.pasteImage(await createImageBitmap(file));
+     */
+    pasteImage(source: CanvasImageSource & {
+        width: number;
+        height: number;
+    }): void;
     /**
      * Apply a finished lasso action to the mask: a shape is added, subtracted or replaces it; a plain click deselects.
      */

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

@@ -11,17 +11,19 @@ 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, { createOffscreenCanvas } from "../Layer/index.js";
+import Layer, { createMemoryCanvas } from "../Layer/index.js";
 import LayerAutosave from "../LayerAutosave/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 CustomPresets from "../CustomPresets/index.js";
 import InputSettings from "../InputSettings/index.js";
+import UiSettings from "../UiSettings/index.js";
 import Palette from "../Palette/index.js";
-import ShortcutSettings from "../ShortcutSettings/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 ExternalSheets from "../ExternalSheets/index.js";
@@ -125,8 +127,12 @@ 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 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 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) */
@@ -193,6 +199,10 @@ var PaintCanvas = class extends EventTarget {
 	currentSelectedColour = "foreground";
 	/** Image data copied with cut or copy, and the area it was copied from */
 	clipboard;
+	/** How many times image data has been copied (see `copyCount`) */
+	copies = 0;
+	/** The system clipboard copies are also put on, if any */
+	systemClipboard;
 	/** Drawings from elsewhere */
 	externalSheets;
 	/** Who receives the drawing messages this canvas sends */
@@ -232,7 +242,8 @@ var PaintCanvas = class extends EventTarget {
 		this.customPresets = new CustomPresets(this.ownerId, options.presetStore);
 		this.customPresets.addEventListener("change", () => this.listCustomPresets());
 		this.customPresets.load().catch(() => void 0);
-		this.createCanvas = options.createCanvas ?? createOffscreenCanvas;
+		this.createCanvas = options.createCanvas ?? createMemoryCanvas;
+		this.systemClipboard = options.systemClipboard === null ? void 0 : options.systemClipboard ?? globalThis.navigator?.clipboard;
 		this.canvasWidth = DEFAULT_CANVAS_SIZE;
 		this.canvasHeight = DEFAULT_CANVAS_SIZE;
 		this.layerStack = new LayerStack(this.canvasWidth, this.canvasHeight, this.createCanvas, this.maxLayers);
@@ -707,19 +718,72 @@ var PaintCanvas = class extends EventTarget {
 	* nothing during a stroke or while a transform is pending. Returns the area copied, if any.
 	*/
 	copy() {
-		const area = this.maskedArea();
+		return this.copyMasked(this.layerStack.active.canvas);
+	}
+	/**
+	* Copy the masked image data of all the shown layers, mixed as they're shown (each layer's opacity and blend mode,
+	* without the white background), to the clipboard. Hidden layers are left out. Like `copy`, it needs a mask with image
+	* data inside it, and does nothing during a stroke or while a transform is pending. Returns the area copied, if any.
+	*
+	* @example
+	* app.selection.selectAll();
+	* app.copyMerged(); // { x: 10, y: 20, width: 30, height: 5 }: the part of the canvas with paint on any shown layer
+	*/
+	copyMerged() {
+		if (!this.canCopy) return void 0;
+		const merged = this.createCanvas(this.width, this.height);
+		drawLayers(merged.getContext("2d"), this.layerStack.layers);
+		return this.copyMasked(merged);
+	}
+	/**
+	* Copy the masked part of a canvas-sized image to the clipboard (see `copy`), returning the area copied, if any.
+	*/
+	copyMasked(source) {
+		const area = this.maskedArea(source);
 		const mask = this.currentSelection.mask;
 		if (!area || !mask) return void 0;
-		const layer = this.layerStack.active;
-		const image = copyArea(this.createCanvas, layer.canvas, area);
+		const image = copyArea(this.createCanvas, source, area);
 		applyMask(image, copyArea(this.createCanvas, mask, area));
 		this.clipboard = {
 			image,
 			area
 		};
+		this.copies++;
+		this.writeSystemClipboard(image);
+		this.notify();
 		return area;
 	}
 	/**
+	* How many times image data has been copied or cut, to tell whether it was copied here since something else may have
+	* been copied in another app (see `KeyboardShortcuts`).
+	*/
+	get copyCount() {
+		return this.copies;
+	}
+	/** Whether there is copied image data to paste (see `copy` and `cut`) */
+	get hasClipboard() {
+		return this.clipboard !== void 0;
+	}
+	/**
+	* The copied image data as a PNG, if there is any (e.g. to use as a brush shape).
+	*
+	* @example
+	* const png = await canvas.copiedPng(); // Blob of type "image/png", or undefined
+	*/
+	async copiedPng() {
+		return this.clipboard?.image.convertToBlob({ type: "image/png" });
+	}
+	/**
+	* Put copied image data on the system clipboard as a PNG, if there is one and the browser can. The item is made
+	* straight away (some browsers only allow writing while handling the key press or click) with the PNG to follow.
+	* Failing (e.g. the page isn't focused) changes nothing: the image data can still be pasted here.
+	*/
+	writeSystemClipboard(image) {
+		if (!this.systemClipboard || typeof ClipboardItem === "undefined") return;
+		const item = new ClipboardItem({ "image/png": image.convertToBlob({ type: "image/png" }) });
+		this.systemClipboard.write([item]).catch(() => void 0);
+	}
+	/**
 	* Copy the masked image data of the selected layer to the clipboard, then remove it from the layer as one undoable
 	* action (see `deleteMasked`).
 	*/
@@ -766,15 +830,19 @@ var PaintCanvas = class extends EventTarget {
 			height
 		};
 	}
+	/** Whether image data can be copied now: not during a stroke or while a transform is pending */
+	get canCopy() {
+		return !this.strokeEngine.drawing && !this.transformer.pending;
+	}
 	/**
-	* The bounds of the selected layer's image data inside the mask, if there is a mask with image data inside it. None
-	* during a stroke or while a transform is pending.
+	* The bounds of a canvas-sized image's data (the selected layer's by default) inside the mask, if there is a mask
+	* with image data inside it. None during a stroke or while a transform is pending.
 	*/
-	maskedArea() {
+	maskedArea(source = this.layerStack.active.canvas) {
 		const mask = this.currentSelection.mask;
-		if (!mask || this.strokeEngine.drawing || this.transformer.pending) return void 0;
+		if (!mask || !this.canCopy) return void 0;
 		const { width, height } = this;
-		return contentBounds(this.layerStack.active.context.getImageData(0, 0, width, height).data, width, height, mask.getContext("2d").getImageData(0, 0, width, height).data);
+		return contentBounds(source.getContext("2d").getImageData(0, 0, width, height).data, width, height, mask.getContext("2d").getImageData(0, 0, width, height).data);
 	}
 	/**
 	* Erase the mask's part of an area from the selected layer, or paint it with the background colour when the layer's
@@ -830,6 +898,32 @@ var PaintCanvas = class extends EventTarget {
 		this.transformer.float(this.layerStack.active, clipboard.image, clipboard.area);
 	}
 	/**
+	* Show an image from elsewhere (e.g. pasted from another app) over the selected layer, in the middle of the part of
+	* the canvas in view, and select the Move tool to place, scale and rotate it, like `paste`. An image larger than the
+	* canvas is shrunk to fit it. Does nothing during a stroke.
+	*
+	* @example
+	* canvas.pasteImage(await createImageBitmap(file));
+	*/
+	pasteImage(source) {
+		if (this.strokeEngine.drawing) return;
+		const scale = Math.min(1, this.canvasWidth / source.width, this.canvasHeight / source.height);
+		const width = Math.max(1, Math.round(source.width * scale));
+		const height = Math.max(1, Math.round(source.height * scale));
+		const image = this.createCanvas(width, height);
+		image.getContext("2d").drawImage(source, 0, 0, width, height);
+		const view = this.view.visibleRect();
+		const area = {
+			x: Math.round(view.x + (view.width - width) / 2),
+			y: Math.round(view.y + (view.height - height) / 2),
+			width,
+			height
+		};
+		if (this.transformer.pending) this.commitTransform();
+		this.selectTool(Tool.Move);
+		this.transformer.float(this.layerStack.active, image, area);
+	}
+	/**
 	* Apply a finished lasso action to the mask: a shape is added, subtracted or replaces it; a plain click deselects.
 	*/
 	applyLasso(result) {

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

@@ -0,0 +1,41 @@
+/**
+ * Encode a canvas as a PNG on the page's own thread (which blocks the page while it runs: seconds on phones for a large
+ * canvas).
+ *
+ * @example
+ * const png = await encodePngHere(layer.canvas);
+ */
+export declare const encodePngHere: (canvas: OffscreenCanvas) => Promise<Blob>;
+/** The worker's code: draws the image it's sent onto its own canvas and encodes that as a PNG */
+export declare const PNG_WORKER_SOURCE = "self.onmessage = async (event) => {\n  const { id, bitmap } = event.data;\n  try {\n    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);\n    canvas.getContext(\"2d\").drawImage(bitmap, 0, 0);\n    bitmap.close();\n    self.postMessage({ id, blob: await canvas.convertToBlob({ type: \"image/png\" }) });\n  } catch (error) {\n    self.postMessage({ id, error: String(error) });\n  }\n};";
+/** Makes the worker, or gives null where workers can't be used */
+export type WorkerFactory = () => Worker | null;
+/**
+ * Make the PNG worker from its code (no separate file, so any bundler works), or null where there are no workers or
+ * `createImageBitmap`, or the page doesn't allow workers from `blob:` addresses.
+ */
+export declare const createPngWorker: WorkerFactory;
+/**
+ * Encodes canvases as PNGs in a background worker, so the page keeps responding while large layers are saved. The
+ * canvas is copied (`createImageBitmap`) and sent to the worker, which encodes the copy. Where a worker can't be used,
+ * or it fails, it encodes on the page's own thread instead (see `encodePngHere`).
+ *
+ * @example
+ * const encoder = new PngEncoder();
+ * const png = await encoder.encode(layer.canvas);
+ */
+export default class PngEncoder {
+    private readonly createWorker;
+    /** The worker, once made (null when it can't be used) */
+    private worker?;
+    private nextId;
+    /** Encodings waiting for the worker, by ID */
+    private readonly waiting;
+    constructor(createWorker?: WorkerFactory);
+    /**
+     * Encode a canvas as a PNG, in the worker where it can be used.
+     */
+    encode: (canvas: OffscreenCanvas) => Promise<Blob>;
+    /** The worker, made on first use */
+    private getWorker;
+}

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

@@ -0,0 +1,104 @@
+// src/lib/classes/PngEncoder/index.ts
+/**
+* Encode a canvas as a PNG on the page's own thread (which blocks the page while it runs: seconds on phones for a large
+* canvas).
+*
+* @example
+* const png = await encodePngHere(layer.canvas);
+*/
+var encodePngHere = (canvas) => {
+	canvas.getContext("2d");
+	return canvas.convertToBlob({ type: "image/png" });
+};
+/** The worker's code: draws the image it's sent onto its own canvas and encodes that as a PNG */
+var PNG_WORKER_SOURCE = `self.onmessage = async (event) => {
+  const { id, bitmap } = event.data;
+  try {
+    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+    canvas.getContext("2d").drawImage(bitmap, 0, 0);
+    bitmap.close();
+    self.postMessage({ id, blob: await canvas.convertToBlob({ type: "image/png" }) });
+  } catch (error) {
+    self.postMessage({ id, error: String(error) });
+  }
+};`;
+/**
+* Make the PNG worker from its code (no separate file, so any bundler works), or null where there are no workers or
+* `createImageBitmap`, or the page doesn't allow workers from `blob:` addresses.
+*/
+var createPngWorker = () => {
+	if (typeof Worker === "undefined" || typeof createImageBitmap === "undefined") return null;
+	try {
+		const url = URL.createObjectURL(new Blob([PNG_WORKER_SOURCE], { type: "text/javascript" }));
+		return new Worker(url);
+	} catch {
+		return null;
+	}
+};
+/**
+* Encodes canvases as PNGs in a background worker, so the page keeps responding while large layers are saved. The
+* canvas is copied (`createImageBitmap`) and sent to the worker, which encodes the copy. Where a worker can't be used,
+* or it fails, it encodes on the page's own thread instead (see `encodePngHere`).
+*
+* @example
+* const encoder = new PngEncoder();
+* const png = await encoder.encode(layer.canvas);
+*/
+var PngEncoder = class {
+	createWorker;
+	/** The worker, once made (null when it can't be used) */
+	worker;
+	nextId = 0;
+	/** Encodings waiting for the worker, by ID */
+	waiting = /* @__PURE__ */ new Map();
+	constructor(createWorker = createPngWorker) {
+		this.createWorker = createWorker;
+	}
+	/**
+	* Encode a canvas as a PNG, in the worker where it can be used.
+	*/
+	encode = async (canvas) => {
+		const worker = this.getWorker();
+		if (!worker) return encodePngHere(canvas);
+		try {
+			canvas.getContext("2d");
+			const bitmap = await createImageBitmap(canvas);
+			const id = this.nextId++;
+			return await new Promise((resolve, reject) => {
+				this.waiting.set(id, {
+					resolve,
+					reject
+				});
+				worker.postMessage({
+					id,
+					bitmap
+				}, [bitmap]);
+			});
+		} catch {
+			return encodePngHere(canvas);
+		}
+	};
+	/** The worker, made on first use */
+	getWorker() {
+		if (this.worker !== void 0) return this.worker;
+		const worker = this.createWorker();
+		this.worker = worker;
+		if (!worker) return null;
+		worker.addEventListener("message", (event) => {
+			const { id, blob, error } = event.data;
+			const waiting = this.waiting.get(id);
+			if (!waiting) return;
+			this.waiting.delete(id);
+			if (blob) waiting.resolve(blob);
+			else waiting.reject(new Error(error));
+		});
+		worker.addEventListener("error", () => {
+			worker.terminate();
+			this.worker = null;
+			for (const { reject } of this.waiting.values()) reject(/* @__PURE__ */ new Error("PNG worker failed"));
+			this.waiting.clear();
+		});
+		return worker;
+	}
+};
+export { PNG_WORKER_SOURCE, createPngWorker, PngEncoder as default, encodePngHere };

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

@@ -0,0 +1,87 @@
+import { type ProfileGraph, type ProfilePoint } from "../../profiles";
+/**
+ * Keep only valid points from an untrusted value, in order from left to right: each on the grid, with a known
+ * interpolation. Undefined if there aren't 2 to `MAX_PROFILE_POINTS` of them.
+ *
+ * @example
+ * sanitisePoints([{ x: 10, y: 0, i: "linear" }, { x: 0, y: -10, i: "linear" }]); // sorted by x
+ */
+export declare const sanitisePoints: (input: unknown) => ProfilePoint[] | undefined;
+/**
+ * Keep only valid profile graphs from an untrusted value (e.g. stored or imported): each with an ID and name and valid
+ * points (see `sanitisePoints`), each ID once and none of the presets', up to `MAX_SAVED_PROFILES`. Undefined if the
+ * value isn't an array.
+ *
+ * @example
+ * sanitiseProfiles([{ id: "a", name: "Soft", points: [...] }, { id: "a", name: "Again", points: [...] }]); // the first
+ */
+export declare const sanitiseProfiles: (input: unknown) => ProfileGraph[] | undefined;
+/** What a profile graph is saved from: its name and points, and its ID when replacing one */
+export interface ProfileGraphDraft {
+    id?: string;
+    name: string;
+    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.
+ *
+ * Dispatches a `change` event when the user's graphs change.
+ *
+ * @example
+ * const profiles = new ProfileGraphs();
+ * const soft = profiles.save({ name: "Soft", points: PROFILE_PRESETS[1].points });
+ * profiles.get(soft.id)?.name; // "Soft"
+ */
+export default class ProfileGraphs extends EventTarget {
+    private values;
+    /** The user's own graphs, in the order they were first saved */
+    get graphs(): readonly ProfileGraph[];
+    /** Every graph: the presets, then the user's own */
+    get all(): readonly ProfileGraph[];
+    /**
+     * A graph by its ID: a preset or one of the user's own.
+     *
+     * @example
+     * profiles.get("overweight")?.name; // "Overweight"
+     */
+    get(id: string | undefined): ProfileGraph | undefined;
+    /** Whether a graph is one PaintCanvas comes with (so it can't be renamed, replaced or deleted) */
+    isPreset(id: string | undefined): boolean;
+    /**
+     * One of the user's own graphs with a name, ignoring case and spaces around it.
+     *
+     * @example
+     * profiles.findByName(" soft "); // the graph called "Soft"
+     */
+    findByName(name: string): ProfileGraph | undefined;
+    /**
+     * Save a graph as one of the user's own: as a new one (with a new UUID), or in place of the one with its ID. Returns
+     * the saved graph, or undefined if it can't be saved (no name, invalid points, a preset's ID, or no room).
+     *
+     * @example
+     * profiles.save({ name: "Soft", points }); // { id: "1b9d…", name: "Soft", points }
+     */
+    save(draft: ProfileGraphDraft): ProfileGraph | undefined;
+    /**
+     * Rename one of the user's own graphs. Returns whether it was renamed.
+     *
+     * @example
+     * profiles.rename(id, "Softer");
+     */
+    rename(id: string, name: string): boolean;
+    /**
+     * Delete one of the user's own graphs. Returns whether it was deleted.
+     *
+     * @example
+     * profiles.remove(id);
+     */
+    remove(id: string): boolean;
+    /**
+     * Replace all the user's graphs (e.g. when restoring saved ones), keeping only valid ones (see `sanitiseProfiles`).
+     *
+     * @example
+     * profiles.set(settings.profiles);
+     */
+    set(graphs: unknown): void;
+}