@lvl99dotcom/paintcanvas 0.6.0 → 0.7.0

package/README.md

@@ -89,9 +89,9 @@ The demo is published at https://lvl99.github.io/paintcanvas/app/. To run it loc
 pnpm dev
 ```
 
-Starts a development server and opens the demo in your browser. It uses the source directly, so saving a change to `src/`, `demo/` or `locales/` reloads the page with the change straight away. (The whole page reloads because custom elements can't be redefined in a running page, so the drawing starts again.)
+Starts a development server and opens the demo in your browser. It uses the source directly, so saving a change to `src/`, `demo/` or `locales/` reloads the page with the change straight away. (The whole page reloads because custom elements can't be redefined in a running page, so the drawing starts again.) It uses vite.demo.config.ts, which also gives the demo the commit it was built from (see scripts/build-info.ts).
 
-- http://localhost:5190/: a full-page PaintCanvas with a layers panel, the colour palette (from the colours at the top of the toolbar), a menu with input settings, keyboard shortcuts, settings import and export, a theme picker (light, dark or system) and a "New drawing" button. The drawing and the settings, including the theme and language, are kept in the browser, so they survive reloads. Below 600px wide, the toolbar and the layers rail sit over the canvas.
+- http://localhost:5190/: a full-page PaintCanvas with a layers panel, the colour palette (from the colours at the top of the toolbar), a menu with PaintCanvas's version, input settings, a "Draw with the GPU" switch, keyboard shortcuts, settings import and export, a theme picker (light, dark or system) and a "New drawing" button. The drawing and the settings, including the theme, language and rendering (CPU or GPU), are kept in the browser, so they survive reloads. Below 600px wide, the toolbar and the layers rail sit over the canvas.
 - http://localhost:5190/elements.html: the base elements.
 
 To try it with a pen or touch on another device (e.g. a tablet) on the same network, run `pnpm dev --host` and open the network address it prints. This makes the server reachable by anyone on that network.

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

@@ -18,7 +18,7 @@ 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 UiSettings, { type Rendering } from "../UiSettings";
 import Palette from "../Palette";
 import ProfileGraphs from "../ProfileGraphs";
 import ShortcutSettings from "../ShortcutSettings";
@@ -116,9 +116,15 @@ export interface PaintCanvasOptions {
     /** Most layers the user can have (default `DEFAULT_MAX_LAYERS`) */
     maxLayers?: number;
     /**
-     * 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).
+     * Where the canvases draw (`cpu` by default): `cpu` keeps their pixels in regular memory (`createMemoryCanvas`) so
+     * saving and copying don't stall phones; `gpu` asks the browser to keep them on the GPU (`createOffscreenCanvas`).
+     * Browsers fix this when a canvas is made, so it can't change while the canvas runs: to follow the user's choice
+     * (`ui.data.rendering`), pass the one they made last time (`<paint-canvas>` does this with its `settings-store`).
+     */
+    rendering?: Rendering;
+    /**
+     * Creates the canvases the engine draws in: layers, stroke buffers, masks and copies. Chosen by `rendering` unless
+     * given (replaceable for tests).
      */
     createCanvas?: CanvasFactory;
     /** Where custom brush presets are kept (defaults to keeping them in memory only) */
@@ -172,7 +178,7 @@ 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 */
+    /** The user's interface choices (theme, language and where canvases draw), kept with the other app settings */
     readonly ui: UiSettings;
     /** The user's saved colours, shown as swatches */
     readonly palette: Palette;
@@ -233,6 +239,8 @@ export default class PaintCanvas extends EventTarget {
     /** The layer stack whose changes are being sent */
     private sendingLayers?;
     private readonly onLayersChangeToSend;
+    /** Where the canvases draw, chosen when the canvas started (the user's choice for next time is `ui.data.rendering`) */
+    readonly rendering: Rendering;
     /** 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) */

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

@@ -11,15 +11,15 @@ 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 { 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 { BRUSH_PRESET_FILE_FORMAT } from "../../presets/schema.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";
@@ -127,8 +127,8 @@ 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 */
@@ -212,6 +212,8 @@ 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) */
@@ -242,7 +244,9 @@ 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 ?? createMemoryCanvas;
+		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;

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

@@ -1,6 +1,12 @@
 /** The themes: light, dark, or following the device's (system) */
 export declare const THEMES: readonly ["light", "dark", "system"];
 export type Theme = (typeof THEMES)[number];
+/**
+ * Where canvases draw: `cpu` keeps their pixels in regular memory (reading and saving them never waits for the GPU),
+ * `gpu` asks the browser to keep them on the GPU (drawing may be quicker; the browser can still use the CPU)
+ */
+export declare const RENDERINGS: readonly ["cpu", "gpu"];
+export type Rendering = (typeof RENDERINGS)[number];
 /** Longest locale tag kept in UI settings (characters) */
 export declare const MAX_LOCALE_LENGTH = 35;
 /** A locale tag's characters: letters, digits and hyphens (e.g. `zh-Hant`) */
@@ -13,6 +19,14 @@ export declare const LOCALE_PATTERN = "^[A-Za-z0-9-]+$";
  * isTheme(undefined); // false
  */
 export declare const isTheme: (value: unknown) => value is Theme;
+/**
+ * Whether a value is one of the renderings.
+ *
+ * @example
+ * isRendering("gpu"); // true
+ * isRendering("webgl"); // false
+ */
+export declare const isRendering: (value: unknown) => value is Rendering;
 /**
  * Whether a value can be a locale tag (letters, digits and hyphens, at most `MAX_LOCALE_LENGTH` characters).
  *
@@ -27,7 +41,14 @@ export interface UiSettingsData {
     theme: Theme;
     /** The language's locale tag, e.g. `fr`, or undefined to follow the device's languages */
     locale?: string;
+    /**
+     * Where canvases draw (`cpu` by default). Browsers fix this when a canvas is made, so a change applies the next time
+     * the canvas starts (e.g. after reloading the page; see `PaintCanvasOptions.rendering`).
+     */
+    rendering: Rendering;
 }
+/** UI settings used for anything not given */
+export declare const DEFAULT_UI_SETTINGS: Readonly<UiSettingsData>;
 /** UI settings the UI can show and change: PaintCanvas's `UiSettings`, or anything with the same data and `update` */
 export interface UiSettingsLike extends EventTarget {
     readonly data: Readonly<UiSettingsData>;
@@ -38,11 +59,12 @@ export interface UiSettingsLike extends EventTarget {
  * or invalid. Other properties are left out.
  *
  * @example
- * sanitiseUiSettings({ theme: "dark", locale: 42 }, { theme: "system" }); // { theme: "dark" }
+ * sanitiseUiSettings({ theme: "dark", locale: 42 }, { theme: "system", rendering: "cpu" });
+ * // { theme: "dark", rendering: "cpu" }
  */
 export declare const sanitiseUiSettings: (input: unknown, defaults: UiSettingsData) => UiSettingsData;
 /**
- * The user's interface choices: the theme and the language. Kept in memory; the implementer saves and restores them
+ * The user's interface choices: the theme, the language and where canvases draw. Kept in memory; the implementer saves and restores them
  * with the other app settings (see `SettingsAutosave`), and the UI shows and applies them (e.g. `<pc-theme-picker>` and
  * `<pc-input-settings>`).
  *

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

@@ -5,6 +5,11 @@ var THEMES = [
 	"dark",
 	"system"
 ];
+/**
+* Where canvases draw: `cpu` keeps their pixels in regular memory (reading and saving them never waits for the GPU),
+* `gpu` asks the browser to keep them on the GPU (drawing may be quicker; the browser can still use the CPU)
+*/
+var RENDERINGS = ["cpu", "gpu"];
 /** Longest locale tag kept in UI settings (characters) */
 var MAX_LOCALE_LENGTH = 35;
 /** A locale tag's characters: letters, digits and hyphens (e.g. `zh-Hant`) */
@@ -18,6 +23,14 @@ var LOCALE_PATTERN = "^[A-Za-z0-9-]+$";
 */
 var isTheme = (value) => THEMES.includes(value);
 /**
+* Whether a value is one of the renderings.
+*
+* @example
+* isRendering("gpu"); // true
+* isRendering("webgl"); // false
+*/
+var isRendering = (value) => RENDERINGS.includes(value);
+/**
 * Whether a value can be a locale tag (letters, digits and hyphens, at most `MAX_LOCALE_LENGTH` characters).
 *
 * @example
@@ -25,24 +38,35 @@ var isTheme = (value) => THEMES.includes(value);
 * isLocaleTag("<script>"); // false
 */
 var isLocaleTag = (value) => typeof value === "string" && value.length <= 35 && (/* @__PURE__ */ new RegExp("^[A-Za-z0-9-]+$")).test(value);
+/** UI settings used for anything not given */
+var DEFAULT_UI_SETTINGS = {
+	theme: "system",
+	rendering: "cpu"
+};
 /**
 * Keep only valid UI settings from an untrusted value (e.g. stored or imported), using `defaults` for anything missing
 * or invalid. Other properties are left out.
 *
 * @example
-* sanitiseUiSettings({ theme: "dark", locale: 42 }, { theme: "system" }); // { theme: "dark" }
+* sanitiseUiSettings({ theme: "dark", locale: 42 }, { theme: "system", rendering: "cpu" });
+* // { theme: "dark", rendering: "cpu" }
 */
 var sanitiseUiSettings = (input, defaults) => {
 	const value = typeof input === "object" && input !== null ? input : {};
 	const theme = isTheme(value.theme) ? value.theme : defaults.theme;
 	const locale = isLocaleTag(value.locale) ? value.locale : defaults.locale;
-	return locale === void 0 ? { theme } : {
+	const rendering = isRendering(value.rendering) ? value.rendering : defaults.rendering;
+	return locale === void 0 ? {
+		theme,
+		rendering
+	} : {
 		theme,
-		locale
+		locale,
+		rendering
 	};
 };
 /**
-* The user's interface choices: the theme and the language. Kept in memory; the implementer saves and restores them
+* The user's interface choices: the theme, the language and where canvases draw. Kept in memory; the implementer saves and restores them
 * with the other app settings (see `SettingsAutosave`), and the UI shows and applies them (e.g. `<pc-theme-picker>` and
 * `<pc-input-settings>`).
 *
@@ -57,7 +81,7 @@ var UiSettings = class extends EventTarget {
 	values;
 	constructor(initial) {
 		super();
-		this.values = sanitiseUiSettings(initial, { theme: "system" });
+		this.values = sanitiseUiSettings(initial, DEFAULT_UI_SETTINGS);
 	}
 	/** Current settings (read-only copy) */
 	get data() {
@@ -74,9 +98,10 @@ var UiSettings = class extends EventTarget {
 			...this.values,
 			...changes
 		}, this.values);
-		if (next.theme === this.values.theme && next.locale === this.values.locale) return;
+		const keys = Object.keys(next);
+		if (keys.length === Object.keys(this.values).length && keys.every((key) => next[key] === this.values[key])) return;
 		this.values = next;
 		this.dispatchEvent(new Event("change"));
 	}
 };
-export { LOCALE_PATTERN, MAX_LOCALE_LENGTH, THEMES, UiSettings as default, isLocaleTag, isTheme, sanitiseUiSettings };
+export { DEFAULT_UI_SETTINGS, LOCALE_PATTERN, MAX_LOCALE_LENGTH, RENDERINGS, THEMES, UiSettings as default, isLocaleTag, isRendering, isTheme, sanitiseUiSettings };

package/dist/lib/settings/schema.d.ts

@@ -27,7 +27,7 @@ export interface AppSettings {
     };
     /** The user's own profile graphs */
     profiles?: ProfileGraph[];
-    /** The theme and language */
+    /** The theme, language and where canvases draw */
     ui?: Partial<UiSettingsData>;
 }
 /** A settings file: what users export and import */
@@ -191,6 +191,9 @@ export declare const settingsSchema: {
                     readonly maxLength: 35;
                     readonly pattern: "^[A-Za-z0-9-]+$";
                 };
+                readonly rendering: {
+                    readonly enum: readonly ["cpu", "gpu"];
+                };
             };
         };
     };

package/dist/lib/settings/schema.js

@@ -1,4 +1,4 @@
-import { LOCALE_PATTERN, THEMES } from "../classes/UiSettings/index.js";
+import { LOCALE_PATTERN, RENDERINGS, THEMES } from "../classes/UiSettings/index.js";
 import { HEX_COLOUR_PATTERN, MAX_PALETTE_COLOURS, paletteFileSchema } from "../palette/schema.js";
 import { profileGraphSchema } from "../profiles/schema.js";
 // src/lib/settings/schema.ts
@@ -94,7 +94,8 @@ var settingsSchema = {
 					minLength: 1,
 					maxLength: 35,
 					pattern: LOCALE_PATTERN
-				}
+				},
+				rendering: { enum: RENDERINGS }
 			}
 		}
 	}

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

@@ -1,5 +1,6 @@
 import type { LayerConfig } from "../classes/Layer";
 import type { AppSettings } from "../settings/schema";
+import { type Rendering } from "../classes/UiSettings";
 /** Version of a saved drawing's shape, so drawings saved by other versions can be recognised */
 export declare const SAVED_DRAWING_VERSION = 1;
 /** Name of the IndexedDB database `IndexedDbLayerStore` keeps drawings in, and `IndexedDbSettingsStore` settings */
@@ -92,3 +93,28 @@ export declare class IndexedDbSettingsStore implements SettingsStoreLike {
     load(): Promise<unknown>;
     save(settings: AppSettings): Promise<void>;
 }
+/**
+ * The browser storage key that keeps the rendering chosen with the app settings of a name (see
+ * `loadRenderingChoice`).
+ *
+ * @example
+ * renderingChoiceKey("demo"); // "paintcanvas-rendering:demo"
+ */
+export declare const renderingChoiceKey: (name: string) => string;
+/**
+ * The rendering (`cpu` or `gpu`) last chosen with the app settings of a name, kept in `localStorage` so it can be read
+ * before the canvas is made (the app settings themselves load later, from IndexedDB). Undefined when none was kept, it
+ * isn't valid, or the storage can't be read (e.g. blocked by the browser).
+ *
+ * @example
+ * new PaintCanvas({ rendering: loadRenderingChoice("demo") });
+ */
+export declare const loadRenderingChoice: (name?: string, storage?: Pick<Storage, "getItem"> | undefined) => Rendering | undefined;
+/**
+ * Keep the rendering chosen with the app settings of a name, to be read with `loadRenderingChoice` when the canvas is
+ * next made. Does nothing if the storage can't be written.
+ *
+ * @example
+ * canvas.ui.addEventListener("change", () => saveRenderingChoice("demo", canvas.ui.data.rendering));
+ */
+export declare const saveRenderingChoice: (name: string, rendering: Rendering, storage?: Pick<Storage, "setItem"> | undefined) => void;

package/dist/lib/storage/index.js

@@ -1,3 +1,4 @@
+import { isRendering } from "../classes/UiSettings/index.js";
 // src/lib/storage/index.ts
 /** Version of a saved drawing's shape, so drawings saved by other versions can be recognised */
 var SAVED_DRAWING_VERSION = 1;
@@ -169,4 +170,40 @@ var IndexedDbSettingsStore = class {
 		await done;
 	}
 };
-export { DATABASE_NAME, DATABASE_VERSION, DEFAULT_SETTINGS_NAME, IndexedDbSettingsStore, SAVED_DRAWING_VERSION, IndexedDbLayerStore as default };
+/**
+* The browser storage key that keeps the rendering chosen with the app settings of a name (see
+* `loadRenderingChoice`).
+*
+* @example
+* renderingChoiceKey("demo"); // "paintcanvas-rendering:demo"
+*/
+var renderingChoiceKey = (name) => `${DATABASE_NAME}-rendering:${name}`;
+/**
+* The rendering (`cpu` or `gpu`) last chosen with the app settings of a name, kept in `localStorage` so it can be read
+* before the canvas is made (the app settings themselves load later, from IndexedDB). Undefined when none was kept, it
+* isn't valid, or the storage can't be read (e.g. blocked by the browser).
+*
+* @example
+* new PaintCanvas({ rendering: loadRenderingChoice("demo") });
+*/
+var loadRenderingChoice = (name = DEFAULT_SETTINGS_NAME, storage = globalThis.localStorage) => {
+	try {
+		const value = storage?.getItem(renderingChoiceKey(name));
+		return isRendering(value) ? value : void 0;
+	} catch {
+		return;
+	}
+};
+/**
+* Keep the rendering chosen with the app settings of a name, to be read with `loadRenderingChoice` when the canvas is
+* next made. Does nothing if the storage can't be written.
+*
+* @example
+* canvas.ui.addEventListener("change", () => saveRenderingChoice("demo", canvas.ui.data.rendering));
+*/
+var saveRenderingChoice = (name, rendering, storage = globalThis.localStorage) => {
+	try {
+		storage?.setItem(renderingChoiceKey(name), rendering);
+	} catch {}
+};
+export { DATABASE_NAME, DATABASE_VERSION, DEFAULT_SETTINGS_NAME, IndexedDbSettingsStore, SAVED_DRAWING_VERSION, IndexedDbLayerStore as default, loadRenderingChoice, renderingChoiceKey, saveRenderingChoice };

package/dist/lib/validation/validators.generated.js

@@ -29059,7 +29059,8 @@ var schema20 = {
 					"minLength": 1,
 					"maxLength": 35,
 					"pattern": "^[A-Za-z0-9-]+$"
-				}
+				},
+				"rendering": { "enum": ["cpu", "gpu"] }
 			}
 		}
 	}
@@ -30009,7 +30010,7 @@ function validate17(data, { instancePath = "", parentData, parentDataProperty, r
 										if (errors === _errs70) {
 											if (data28 && typeof data28 == "object" && !Array.isArray(data28)) {
 												const _errs72 = errors;
-												for (const key9 in data28) if (!(key9 === "theme" || key9 === "locale")) {
+												for (const key9 in data28) if (!(key9 === "theme" || key9 === "locale" || key9 === "rendering")) {
 													validate17.errors = [{
 														instancePath: instancePath + "/ui",
 														schemaPath: "#/properties/ui/additionalProperties",
@@ -30082,6 +30083,23 @@ function validate17(data, { instancePath = "", parentData, parentDataProperty, r
 															}
 															var valid14 = _errs74 === errors;
 														} else var valid14 = true;
+														if (valid14) {
+															if (data28.rendering !== void 0) {
+																let data31 = data28.rendering;
+																const _errs76 = errors;
+																if (!(data31 === "cpu" || data31 === "gpu")) {
+																	validate17.errors = [{
+																		instancePath: instancePath + "/ui/rendering",
+																		schemaPath: "#/properties/ui/properties/rendering/enum",
+																		keyword: "enum",
+																		params: { allowedValues: schema20.properties.ui.properties.rendering.enum },
+																		message: "must be equal to one of the allowed values"
+																	}];
+																	return false;
+																}
+																var valid14 = _errs76 === errors;
+															} else var valid14 = true;
+														}
 													}
 												}
 											} else {

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

@@ -0,0 +1,25 @@
+/** PaintCanvas's version, from its package.json, e.g. `0.6.0` */
+export declare const PAINTCANVAS_VERSION: string;
+/** What the commit is called when it's unknown */
+export declare const UNKNOWN_COMMIT = "unknown";
+/**
+ * Read the commit's hash, or `UNKNOWN_COMMIT` when it wasn't put in place (e.g. the source served or bundled without
+ * PaintCanvas's Vite config, where `__PAINTCANVAS_COMMIT__` is undefined).
+ *
+ * @example
+ * readCommit(() => "ac12a0d"); // "ac12a0d"
+ * readCommit(() => { throw new ReferenceError(); }); // "unknown"
+ */
+export declare const readCommit: (read: () => unknown) => string;
+/** The short hash of the commit PaintCanvas was built from, e.g. `ac12a0d` (`unknown` when it can't be told) */
+export declare const PAINTCANVAS_COMMIT: string;
+/** Where PaintCanvas's source code is */
+export declare const PAINTCANVAS_REPOSITORY_URL = "https://github.com/lvl99/paintcanvas";
+/**
+ * PaintCanvas's name, version and commit as one line.
+ *
+ * @example
+ * versionText(); // "PaintCanvas v0.6.0 (ac12a0d)"
+ * versionText("1.0.0", "abc1234"); // "PaintCanvas v1.0.0 (abc1234)"
+ */
+export declare const versionText: (version?: string, commit?: string) => string;

package/dist/lib/version/index.js

@@ -0,0 +1,35 @@
+import { version } from "../../package.js";
+// src/lib/version/index.ts
+/** PaintCanvas's version, from its package.json, e.g. `0.6.0` */
+var PAINTCANVAS_VERSION = version;
+/** What the commit is called when it's unknown */
+var UNKNOWN_COMMIT = "unknown";
+/**
+* Read the commit's hash, or `UNKNOWN_COMMIT` when it wasn't put in place (e.g. the source served or bundled without
+* PaintCanvas's Vite config, where `__PAINTCANVAS_COMMIT__` is undefined).
+*
+* @example
+* readCommit(() => "ac12a0d"); // "ac12a0d"
+* readCommit(() => { throw new ReferenceError(); }); // "unknown"
+*/
+var readCommit = (read) => {
+	try {
+		const commit = read();
+		return typeof commit === "string" && commit ? commit : UNKNOWN_COMMIT;
+	} catch {
+		return UNKNOWN_COMMIT;
+	}
+};
+/** The short hash of the commit PaintCanvas was built from, e.g. `ac12a0d` (`unknown` when it can't be told) */
+var PAINTCANVAS_COMMIT = readCommit(() => "9f00978");
+/** Where PaintCanvas's source code is */
+var PAINTCANVAS_REPOSITORY_URL = "https://github.com/lvl99/paintcanvas";
+/**
+* PaintCanvas's name, version and commit as one line.
+*
+* @example
+* versionText(); // "PaintCanvas v0.6.0 (ac12a0d)"
+* versionText("1.0.0", "abc1234"); // "PaintCanvas v1.0.0 (abc1234)"
+*/
+var versionText = (version = PAINTCANVAS_VERSION, commit = PAINTCANVAS_COMMIT) => `PaintCanvas v${version} (${commit})`;
+export { PAINTCANVAS_COMMIT, PAINTCANVAS_REPOSITORY_URL, PAINTCANVAS_VERSION, UNKNOWN_COMMIT, readCommit, versionText };

package/dist/locales/en-GB.js

@@ -164,6 +164,8 @@ var en_GB_default = {
 	"paintCanvas.layers.alphaLock": "Alpha lock",
 	"paintCanvas.layers.blendMode": "Blending mode",
 	"paintCanvas.layers.actions": "Layer actions",
+	"paintCanvas.layers.rename": "Rename…",
+	"paintCanvas.layers.renameTitle": "Rename layer",
 	"paintCanvas.layers.reorder": "Reorder {name}: drag, or press for actions",
 	"paintCanvas.layers.duplicate": "Duplicate",
 	"paintCanvas.layers.createMask": "Create mask",
@@ -291,6 +293,9 @@ var en_GB_default = {
 	"paintCanvas.settings.fileIncompatible": "Settings JSON file not compatible",
 	"paintCanvas.settings.fileReadFailed": "Failed to read settings JSON file",
 	"paintCanvas.settings.exportFailed": "Error exporting settings JSON file",
+	"paintCanvas.settings.gpu": "Draw with the GPU",
+	"paintCanvas.settings.gpuHint": "Try this if drawing is slow. It applies after reloading the page.",
+	"paintCanvas.settings.reloadToApply": "Reload the page to apply this change.",
 	"paintCanvas.stats.label": "Canvas details",
 	"paintCanvas.stats.size": "Canvas: {width} × {height} px",
 	"paintCanvas.stats.zoom": "Zoom: {zoom}",

package/dist/locales/en-US.js

@@ -164,6 +164,8 @@ var en_US_default = {
 	"paintCanvas.layers.alphaLock": "Alpha lock",
 	"paintCanvas.layers.blendMode": "Blending mode",
 	"paintCanvas.layers.actions": "Layer actions",
+	"paintCanvas.layers.rename": "Rename…",
+	"paintCanvas.layers.renameTitle": "Rename layer",
 	"paintCanvas.layers.reorder": "Reorder {name}: drag, or press for actions",
 	"paintCanvas.layers.duplicate": "Duplicate",
 	"paintCanvas.layers.createMask": "Create mask",
@@ -291,6 +293,9 @@ var en_US_default = {
 	"paintCanvas.settings.fileIncompatible": "Settings JSON file not compatible",
 	"paintCanvas.settings.fileReadFailed": "Failed to read settings JSON file",
 	"paintCanvas.settings.exportFailed": "Error exporting settings JSON file",
+	"paintCanvas.settings.gpu": "Draw with the GPU",
+	"paintCanvas.settings.gpuHint": "Try this if drawing is slow. It applies after reloading the page.",
+	"paintCanvas.settings.reloadToApply": "Reload the page to apply this change.",
 	"paintCanvas.stats.label": "Canvas details",
 	"paintCanvas.stats.size": "Canvas: {width} × {height} px",
 	"paintCanvas.stats.zoom": "Zoom: {zoom}",

package/dist/locales/fr.js

@@ -164,6 +164,8 @@ var fr_default = {
 	"paintCanvas.layers.alphaLock": "Verrouillage alpha",
 	"paintCanvas.layers.blendMode": "Mode de fusion",
 	"paintCanvas.layers.actions": "Actions du calque",
+	"paintCanvas.layers.rename": "Renommer…",
+	"paintCanvas.layers.renameTitle": "Renommer le calque",
 	"paintCanvas.layers.reorder": "Réorganiser {name}\xA0: faire glisser, ou appuyer pour les actions",
 	"paintCanvas.layers.duplicate": "Dupliquer",
 	"paintCanvas.layers.createMask": "Créer un masque",
@@ -291,6 +293,9 @@ var fr_default = {
 	"paintCanvas.settings.fileIncompatible": "Fichier JSON de réglages incompatible",
 	"paintCanvas.settings.fileReadFailed": "Échec de la lecture du fichier JSON de réglages",
 	"paintCanvas.settings.exportFailed": "Erreur lors de l'exportation du fichier JSON de réglages",
+	"paintCanvas.settings.gpu": "Dessiner avec le GPU",
+	"paintCanvas.settings.gpuHint": "Essayez ceci si le dessin est lent. Le changement s’applique après le rechargement de la page.",
+	"paintCanvas.settings.reloadToApply": "Rechargez la page pour appliquer ce changement.",
 	"paintCanvas.stats.label": "Détails de la toile",
 	"paintCanvas.stats.size": "Toile\xA0: {width} × {height}\xA0px",
 	"paintCanvas.stats.zoom": "Zoom\xA0: {zoom}",

package/dist/locales/ja.js

@@ -164,6 +164,8 @@ var ja_default = {
 	"paintCanvas.layers.alphaLock": "透明部分をロック",
 	"paintCanvas.layers.blendMode": "描画モード",
 	"paintCanvas.layers.actions": "レイヤーの操作",
+	"paintCanvas.layers.rename": "名前を変更…",
+	"paintCanvas.layers.renameTitle": "レイヤー名を変更",
 	"paintCanvas.layers.reorder": "{name}の並べ替え：ドラッグ、または押して操作を表示",
 	"paintCanvas.layers.duplicate": "複製",
 	"paintCanvas.layers.createMask": "マスクを作成",
@@ -291,6 +293,9 @@ var ja_default = {
 	"paintCanvas.settings.fileIncompatible": "この設定のJSONファイルには対応していません",
 	"paintCanvas.settings.fileReadFailed": "設定のJSONファイルを読み込めませんでした",
 	"paintCanvas.settings.exportFailed": "設定のJSONファイルを書き出せませんでした",
+	"paintCanvas.settings.gpu": "GPU で描画する",
+	"paintCanvas.settings.gpuHint": "描画が遅い場合にお試しください。ページを再読み込みすると適用されます。",
+	"paintCanvas.settings.reloadToApply": "この変更を適用するにはページを再読み込みしてください。",
 	"paintCanvas.stats.label": "キャンバスの詳細",
 	"paintCanvas.stats.size": "キャンバス: {width} × {height} px",
 	"paintCanvas.stats.zoom": "ズーム: {zoom}",

package/dist/locales/ko.js

@@ -164,6 +164,8 @@ var ko_default = {
 	"paintCanvas.layers.alphaLock": "투명 픽셀 잠금",
 	"paintCanvas.layers.blendMode": "혼합 모드",
 	"paintCanvas.layers.actions": "레이어 작업",
+	"paintCanvas.layers.rename": "이름 바꾸기…",
+	"paintCanvas.layers.renameTitle": "레이어 이름 바꾸기",
 	"paintCanvas.layers.reorder": "{name} 순서 변경: 드래그하거나 눌러서 작업 보기",
 	"paintCanvas.layers.duplicate": "복제",
 	"paintCanvas.layers.createMask": "마스크 만들기",
@@ -291,6 +293,9 @@ var ko_default = {
 	"paintCanvas.settings.fileIncompatible": "호환되지 않는 설정 JSON 파일입니다",
 	"paintCanvas.settings.fileReadFailed": "설정 JSON 파일을 읽지 못했습니다",
 	"paintCanvas.settings.exportFailed": "설정 JSON 파일을 내보내지 못했습니다",
+	"paintCanvas.settings.gpu": "GPU로 그리기",
+	"paintCanvas.settings.gpuHint": "그리기가 느리면 사용해 보세요. 페이지를 새로 고친 후 적용됩니다.",
+	"paintCanvas.settings.reloadToApply": "이 변경 사항을 적용하려면 페이지를 새로 고치세요.",
 	"paintCanvas.stats.label": "캔버스 정보",
 	"paintCanvas.stats.size": "캔버스: {width} × {height} px",
 	"paintCanvas.stats.zoom": "확대/축소: {zoom}",

package/dist/locales/zh-Hans.js

@@ -164,6 +164,8 @@ var zh_Hans_default = {
 	"paintCanvas.layers.alphaLock": "锁定透明像素",
 	"paintCanvas.layers.blendMode": "混合模式",
 	"paintCanvas.layers.actions": "图层操作",
+	"paintCanvas.layers.rename": "重命名…",
+	"paintCanvas.layers.renameTitle": "重命名图层",
 	"paintCanvas.layers.reorder": "调整{name}的顺序：拖动，或按下以显示操作",
 	"paintCanvas.layers.duplicate": "复制",
 	"paintCanvas.layers.createMask": "创建蒙版",
@@ -291,6 +293,9 @@ var zh_Hans_default = {
 	"paintCanvas.settings.fileIncompatible": "不兼容的设置 JSON 文件",
 	"paintCanvas.settings.fileReadFailed": "无法读取设置 JSON 文件",
 	"paintCanvas.settings.exportFailed": "导出设置 JSON 文件时出错",
+	"paintCanvas.settings.gpu": "使用 GPU 绘制",
+	"paintCanvas.settings.gpuHint": "如果绘制缓慢，请尝试此选项。重新加载页面后生效。",
+	"paintCanvas.settings.reloadToApply": "重新加载页面以应用此更改。",
 	"paintCanvas.stats.label": "画布详情",
 	"paintCanvas.stats.size": "画布：{width} × {height} 像素",
 	"paintCanvas.stats.zoom": "缩放：{zoom}",

package/dist/locales/zh-Hant.js

@@ -164,6 +164,8 @@ var zh_Hant_default = {
 	"paintCanvas.layers.alphaLock": "鎖定透明像素",
 	"paintCanvas.layers.blendMode": "混合模式",
 	"paintCanvas.layers.actions": "圖層動作",
+	"paintCanvas.layers.rename": "重新命名…",
+	"paintCanvas.layers.renameTitle": "重新命名圖層",
 	"paintCanvas.layers.reorder": "調整{name}的順序：拖曳，或按下以顯示動作",
 	"paintCanvas.layers.duplicate": "複製",
 	"paintCanvas.layers.createMask": "建立遮罩",
@@ -291,6 +293,9 @@ var zh_Hant_default = {
 	"paintCanvas.settings.fileIncompatible": "不相容的設定 JSON 檔案",
 	"paintCanvas.settings.fileReadFailed": "無法讀取設定 JSON 檔案",
 	"paintCanvas.settings.exportFailed": "匯出設定 JSON 檔案時發生錯誤",
+	"paintCanvas.settings.gpu": "使用 GPU 繪製",
+	"paintCanvas.settings.gpuHint": "如果繪製緩慢，請嘗試此選項。重新載入頁面後生效。",
+	"paintCanvas.settings.reloadToApply": "重新載入頁面以套用此變更。",
 	"paintCanvas.stats.label": "畫布詳細資料",
 	"paintCanvas.stats.size": "畫布：{width} × {height} 像素",
 	"paintCanvas.stats.zoom": "縮放：{zoom}",

package/dist/package.js

@@ -1,3 +1,3 @@
 // package.json
-var version = "0.6.0";
+var version = "0.7.0";
 export { version };