@lvl99dotcom/paintcanvas 0.6.0 → 0.8.0

package/dist/locales/zh-Hant.js

@@ -67,8 +67,8 @@ var zh_Hant_default = {
 	"paintCanvas.palette.hue": "色相",
 	"paintCanvas.palette.saturation": "飽和度",
 	"paintCanvas.palette.lightness": "亮度",
-	"paintCanvas.palette.saved": "已儲存的顏色",
-	"paintCanvas.palette.add": "將 {colour} 儲存到調色盤",
+	"paintCanvas.palette.saved": "調色盤列表",
+	"paintCanvas.palette.add": "將 {colour} 儲存到 {name}",
 	"paintCanvas.palette.colourActions": "{colour} 的操作",
 	"paintCanvas.palette.deleteColour": "刪除顏色",
 	"paintCanvas.palette.deleteMessage": "要刪除這個顏色嗎？",
@@ -76,11 +76,24 @@ var zh_Hant_default = {
 	"paintCanvas.palette.import": "匯入",
 	"paintCanvas.palette.export": "匯出",
 	"paintCanvas.palette.importFile": "匯入調色盤檔案",
-	"paintCanvas.palette.imported.one": "已新增 {count} 個顏色",
-	"paintCanvas.palette.imported.other": "已新增 {count} 個顏色",
+	"paintCanvas.palette.imported.one": "已匯入 {count} 個調色盤",
+	"paintCanvas.palette.imported.other": "已匯入 {count} 個調色盤",
 	"paintCanvas.palette.fileIncompatible": "不相容的調色盤 JSON 檔案",
+	"paintCanvas.palette.fileUnsupported": "不支援的調色盤檔案版本",
 	"paintCanvas.palette.fileReadFailed": "無法讀取調色盤 JSON 檔案",
 	"paintCanvas.palette.exportFailed": "匯出調色盤 JSON 檔案時發生錯誤",
+	"paintCanvas.palette.newPalette": "新增調色盤",
+	"paintCanvas.palette.newPaletteHeading": "新增調色盤",
+	"paintCanvas.palette.name": "名稱",
+	"paintCanvas.palette.defaultName": "我的調色盤",
+	"paintCanvas.palette.renameHeading": "重新命名調色盤",
+	"paintCanvas.palette.paletteActions": "{name} 動作",
+	"paintCanvas.palette.renamePalette": "重新命名…",
+	"paintCanvas.palette.exportPalette": "匯出",
+	"paintCanvas.palette.deletePalette": "刪除…",
+	"paintCanvas.palette.deletePaletteHeading": "刪除調色盤",
+	"paintCanvas.palette.deletePaletteConfirm": "刪除「{name}」？此動作無法復原。",
+	"paintCanvas.palette.nothingToExport": "沒有可匯出的調色盤",
 	"paintCanvas.toolbar.label": "工具",
 	"paintCanvas.toolbar.layers": "圖層",
 	"paintCanvas.toolbar.menu": "選單",
@@ -109,7 +122,7 @@ var zh_Hant_default = {
 	"paintCanvas.brushMenu.size": "{tool}大小",
 	"paintCanvas.numberSlider.hint": "左右拖曳以變更，點一下以輸入",
 	"paintCanvas.brushMenu.newPreset": "新預設",
-	"paintCanvas.brushMenu.create": "建立",
+	"paintCanvas.brushMenu.create": "新增筆刷",
 	"paintCanvas.brushMenu.import": "匯入",
 	"paintCanvas.brushMenu.export": "匯出",
 	"paintCanvas.presets.myPresets": "我的預設",
@@ -126,6 +139,7 @@ var zh_Hant_default = {
 	"paintCanvas.presets.imported.one": "已匯入 {count} 個筆刷預設",
 	"paintCanvas.presets.imported.other": "已匯入 {count} 個筆刷預設",
 	"paintCanvas.presets.fileIncompatible": "不相容的筆刷預設 JSON 檔案",
+	"paintCanvas.presets.fileUnsupported": "不支援的筆刷預設檔案版本",
 	"paintCanvas.presets.fileReadFailed": "無法讀取筆刷預設 JSON 檔案",
 	"paintCanvas.presets.exportFailed": "匯出筆刷預設 JSON 檔案時發生錯誤",
 	"paintCanvas.presets.nothingToExport": "沒有可匯出的筆刷預設",
@@ -164,6 +178,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": "建立遮罩",
@@ -289,13 +305,20 @@ var zh_Hant_default = {
 	"paintCanvas.settings.importFile": "匯入設定檔",
 	"paintCanvas.settings.imported": "已匯入設定",
 	"paintCanvas.settings.fileIncompatible": "不相容的設定 JSON 檔案",
+	"paintCanvas.settings.fileUnsupported": "不支援的設定檔案版本",
 	"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}",
 	"paintCanvas.stats.colour": "顏色：{colour}",
 	"paintCanvas.stats.stored": "已儲存：{size}",
+	"paintCanvas.stats.remoteSaving": "正在儲存到{store}…",
+	"paintCanvas.stats.remoteFailed": "無法儲存到{store}",
+	"paintCanvas.stats.remoteStore": "雲端",
 	"paintCanvas.theme.label": "主題",
 	"paintCanvas.theme.light": "淺色",
 	"paintCanvas.theme.dark": "深色",

package/dist/package.js

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

package/dist/testing/app.d.ts

@@ -1,7 +1,11 @@
-import PaintCanvas from "../lib/classes/PaintCanvas";
+import PaintCanvas, { type PaintCanvasOptions } from "../lib/classes/PaintCanvas";
 /** The handle of the author of presets made in apps from `createApp` */
 export declare const TEST_HANDLE = "ada.example";
 /**
  * Create a canvas whose canvases record drawing calls (jsdom cannot draw), with "Ada" as the author of new presets.
+ * Other options are passed on.
+ *
+ * @example
+ * const app = createApp({ stores: { brushes: myStore } });
  */
-export declare const createApp: () => PaintCanvas;
+export declare const createApp: (options?: PaintCanvasOptions) => PaintCanvas;

package/dist/testing/app.js

@@ -5,12 +5,17 @@ import { createRecordingCanvasFactory } from "./recordingCanvas.js";
 var TEST_HANDLE = "ada.example";
 /**
 * Create a canvas whose canvases record drawing calls (jsdom cannot draw), with "Ada" as the author of new presets.
+* Other options are passed on.
+*
+* @example
+* const app = createApp({ stores: { brushes: myStore } });
 */
-var createApp = () => new PaintCanvas({
+var createApp = (options = {}) => new PaintCanvas({
 	createCanvas: createRecordingCanvasFactory().factory,
 	presetAuthor: () => ({
 		name: "Ada",
 		handle: TEST_HANDLE
-	})
+	}),
+	...options
 });
 export { TEST_HANDLE, createApp };

package/dist/testing/documentStore.d.ts

@@ -0,0 +1,26 @@
+import type { DocumentStoreLike } from "../lib/storage";
+import type { DrawingDocument } from "../lib/document/schema";
+/** Options for `MemoryDocumentStore` */
+export interface MemoryDocumentStoreOptions {
+    /** Names the store for the user */
+    label?: string;
+    /** How long each save takes (milliseconds), reporting progress in 4 steps, e.g. to try out a saving indicator */
+    delayMs?: number;
+}
+/**
+ * A document store kept in memory (e.g. for tests, or to try out remote saving), recording each save.
+ *
+ * @example
+ * canvas.useRemoteDocumentStore(new MemoryDocumentStore({ label: "Test", delayMs: 2000 }));
+ */
+export declare class MemoryDocumentStore implements DocumentStoreLike {
+    readonly label?: string;
+    /** The saved documents, by ID */
+    readonly documents: Map<string, DrawingDocument>;
+    /** Each save, in order */
+    readonly saves: DrawingDocument[];
+    private readonly delayMs;
+    constructor({ label, delayMs }?: MemoryDocumentStoreOptions);
+    save(document: DrawingDocument, onProgress?: (done: number) => void): Promise<void>;
+    load(id: string): Promise<DrawingDocument | undefined>;
+}

package/dist/testing/documentStore.js

@@ -0,0 +1,31 @@
+// src/testing/documentStore.ts
+/**
+* A document store kept in memory (e.g. for tests, or to try out remote saving), recording each save.
+*
+* @example
+* canvas.useRemoteDocumentStore(new MemoryDocumentStore({ label: "Test", delayMs: 2000 }));
+*/
+var MemoryDocumentStore = class {
+	label;
+	/** The saved documents, by ID */
+	documents = /* @__PURE__ */ new Map();
+	/** Each save, in order */
+	saves = [];
+	delayMs;
+	constructor({ label, delayMs = 0 } = {}) {
+		this.label = label;
+		this.delayMs = delayMs;
+	}
+	async save(document, onProgress) {
+		for (let step = 1; step <= 4; step++) {
+			if (this.delayMs > 0) await new Promise((resolve) => setTimeout(resolve, this.delayMs / 4));
+			onProgress?.(step / 4);
+		}
+		this.saves.push(document);
+		this.documents.set(document.id, document);
+	}
+	async load(id) {
+		return this.documents.get(id);
+	}
+};
+export { MemoryDocumentStore };

package/dist/ui/elements/PaintCanvas/index.d.ts

@@ -23,7 +23,8 @@ import "../PcDialog";
  * - `left`: `<pc-toolbar>` (a pane) by default; toolbars in the sides are minimised (their tools one button that opens a
  *   menu of them) while the layout is narrow
  * - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) and, at its end,
- *   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow) by default
+ *   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow or the window is narrower than
+ *   900px) by default
  * - `right`: a `<pc-pane>` with `<pc-panel-layers>` by default
  * - `center`: `<pc-canvas>` by default
  * - `overlay`: drawn over the canvas; `<pc-canvas-map>` by default
@@ -36,7 +37,7 @@ import "../PcDialog";
  * does by default), the toolbar has no layers menu button.
  *
  * Each side has a mode, chosen by the layout's width from `left-modes` and `right-modes` (default `"docked,
- * rail@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
+ * floating@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
  * column of buttons (one per panel) that open each panel over the canvas; `floating`, the pane over the canvas as a
  * box that collapses to a button; or `overlay`, a rail over the canvas without a background (the canvas fills the
  * width behind it). Give side content in a `<pc-pane>` to have it follow the side's mode.
@@ -50,7 +51,9 @@ import "../PcDialog";
  * that offers to draw here instead. Fires `pc-toast` when the drawing can't be loaded or saved.
  *
  * With a `settings-store` name, the user's app settings (input settings, keyboard shortcuts, colour palette, colours,
- * theme and language) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
+ * theme, language and rendering) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when
+ * they can't be. The rendering chosen there is also kept in `localStorage` (see `saveRenderingChoice`), so the canvas the
+ * layout makes draws where the user last chose (see `PaintCanvasOptions.rendering`).
  *
  * @example
  * html`<paint-canvas style="height: 600px"></paint-canvas>`
@@ -154,6 +157,10 @@ export declare class PaintCanvasElement extends PcElement {
     private watchedAutosave?;
     /** Keeps the app settings under the `settings-store` name, if any */
     private ownSettingsAutosave?;
+    /** The asset stores the layout gave the canvas for `settings-store`, if any */
+    private ownAssetStores?;
+    /** Stops keeping the rendering chosen in the canvas's UI settings under the `settings-store` name, if kept */
+    private stopKeepingRendering?;
     /** Whether drawing was blocked when shortcuts were last watched */
     private blockedShortcuts;
     /** Whether each side's slot has a layers menu (the toolbar's isn't needed then) */
@@ -200,10 +207,17 @@ export declare class PaintCanvasElement extends PcElement {
     /** Keeps the app settings under the `settings-store` name, if any (e.g. to wait until they are restored with `ready`) */
     get settingsAutosave(): SettingsAutosave | undefined;
     /**
-     * Keep the canvas's app settings under the `settings-store` name, stopping the previous settings autosave (which
-     * saves any change waiting to be saved).
+     * Keep the canvas's app settings and assets (brush presets, colour palettes, profile graphs) under the
+     * `settings-store` name, stopping the previous settings autosave (which saves any change waiting to be saved). Asset
+     * stores the layout gave a previous canvas, or this one under another name, are taken back; ones the implementer gave
+     * are replaced only when there's a name.
      */
     private useSettingsStore;
+    /**
+     * Keep the rendering chosen in the canvas's UI settings (e.g. when they're restored, imported or changed) under a
+     * name, for the next time the layout makes a canvas. Returns what stops it.
+     */
+    private keepRendering;
     /** Show errors from the canvas's current autosave */
     private watchAutosaveErrors;
     /** Handle keyboard shortcuts for the current canvas, if asked to (not while blocked) */

package/dist/ui/elements/PaintCanvas/index.js

@@ -5,7 +5,8 @@ import ChangeController from "../../ChangeController/index.js";
 import PaintCanvas, { Panel } from "../../../lib/classes/PaintCanvas/index.js";
 import KeyboardShortcuts, { SHORTCUT_EVENT } from "../../../lib/classes/KeyboardShortcuts/index.js";
 import { isTouchDevice } from "../../../lib/classes/InputSettings/index.js";
-import IndexedDbLayerStore, { IndexedDbSettingsStore } from "../../../lib/storage/index.js";
+import IndexedDbLayerStore, { indexedDbStores, loadRenderingChoice, saveRenderingChoice } from "../../../lib/storage/index.js";
+import { ASSET_SYNC_ERROR_EVENT } from "../../../lib/classes/AssetSync/index.js";
 import SettingsAutosave, { SETTINGS_AUTOSAVE_ERROR_EVENT } from "../../../lib/classes/SettingsAutosave/index.js";
 import { AUTOSAVE_ERROR_EVENT, AutosaveState } from "../../../lib/classes/LayerAutosave/index.js";
 import { isOwnAuthor } from "../../../lib/brushes/authors/index.js";
@@ -45,7 +46,8 @@ var TAKE_OVER_CHOICE = "take-over";
 * - `left`: `<pc-toolbar>` (a pane) by default; toolbars in the sides are minimised (their tools one button that opens a
 *   menu of them) while the layout is narrow
 * - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) and, at its end,
-*   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow) by default
+*   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow or the window is narrower than
+*   900px) by default
 * - `right`: a `<pc-pane>` with `<pc-panel-layers>` by default
 * - `center`: `<pc-canvas>` by default
 * - `overlay`: drawn over the canvas; `<pc-canvas-map>` by default
@@ -58,7 +60,7 @@ var TAKE_OVER_CHOICE = "take-over";
 * does by default), the toolbar has no layers menu button.
 *
 * Each side has a mode, chosen by the layout's width from `left-modes` and `right-modes` (default `"docked,
-* rail@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
+* floating@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
 * column of buttons (one per panel) that open each panel over the canvas; `floating`, the pane over the canvas as a
 * box that collapses to a button; or `overlay`, a rail over the canvas without a background (the canvas fills the
 * width behind it). Give side content in a `<pc-pane>` to have it follow the side's mode.
@@ -72,7 +74,9 @@ var TAKE_OVER_CHOICE = "take-over";
 * that offers to draw here instead. Fires `pc-toast` when the drawing can't be loaded or saved.
 *
 * With a `settings-store` name, the user's app settings (input settings, keyboard shortcuts, colour palette, colours,
-* theme and language) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
+* theme, language and rendering) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when
+* they can't be. The rendering chosen there is also kept in `localStorage` (see `saveRenderingChoice`), so the canvas the
+* layout makes draws where the user last chose (see `PaintCanvasOptions.rendering`).
 *
 * @example
 * html`<paint-canvas style="height: 600px"></paint-canvas>`
@@ -127,6 +131,10 @@ var PaintCanvasElement = class extends PcElement {
 	watchedAutosave;
 	/** Keeps the app settings under the `settings-store` name, if any */
 	ownSettingsAutosave;
+	/** The asset stores the layout gave the canvas for `settings-store`, if any */
+	ownAssetStores;
+	/** Stops keeping the rendering chosen in the canvas's UI settings under the `settings-store` name, if kept */
+	stopKeepingRendering;
 	/** Whether drawing was blocked when shortcuts were last watched */
 	blockedShortcuts = false;
 	/** Whether each side's slot has a layers menu (the toolbar's isn't needed then) */
@@ -194,7 +202,7 @@ var PaintCanvasElement = class extends PcElement {
 		return sideModeFor(parseSideModes(side === "left" ? this.leftModes : this.rightModes), this.width);
 	}
 	connectedCallback() {
-		this.app ??= new PaintCanvas();
+		this.app ??= new PaintCanvas({ rendering: this.settingsStore ? loadRenderingChoice(this.settingsStore) : void 0 });
 		super.connectedCallback();
 		this.resizeObserver?.observe(this);
 		this.addEventListener("pointerdown", this.onPointerDown, true);
@@ -213,7 +221,7 @@ var PaintCanvasElement = class extends PcElement {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		if (changed.has("app") || changed.has("store")) this.useStore(changed.get("app"));
-		if (changed.has("app") || changed.has("settingsStore")) this.useSettingsStore();
+		if (changed.has("app") || changed.has("settingsStore")) this.useSettingsStore(changed.get("app"));
 		this.watchAutosaveErrors();
 		if (this.isConnected && (changed.has("app") || changed.has("shortcuts") || this.blocked !== this.blockedShortcuts)) this.watchShortcuts();
 	}
@@ -279,14 +287,37 @@ var PaintCanvasElement = class extends PcElement {
 		return this.ownSettingsAutosave;
 	}
 	/**
-	* Keep the canvas's app settings under the `settings-store` name, stopping the previous settings autosave (which
-	* saves any change waiting to be saved).
+	* Keep the canvas's app settings and assets (brush presets, colour palettes, profile graphs) under the
+	* `settings-store` name, stopping the previous settings autosave (which saves any change waiting to be saved). Asset
+	* stores the layout gave a previous canvas, or this one under another name, are taken back; ones the implementer gave
+	* are replaced only when there's a name.
 	*/
-	useSettingsStore() {
+	useSettingsStore(previousApp) {
+		const app = this.app;
 		this.ownSettingsAutosave?.stop();
+		this.stopKeepingRendering?.();
 		const name = this.settingsStore || void 0;
-		this.ownSettingsAutosave = name === void 0 ? void 0 : new SettingsAutosave(this.app, new IndexedDbSettingsStore(name));
+		this.stopKeepingRendering = name === void 0 ? void 0 : this.keepRendering(name);
+		const { settings, ...assets } = name === void 0 ? { settings: void 0 } : indexedDbStores(name);
+		this.ownSettingsAutosave = settings && new SettingsAutosave(app, settings);
 		this.ownSettingsAutosave?.addEventListener(SETTINGS_AUTOSAVE_ERROR_EVENT, this.onSettingsAutosaveError);
+		const own = this.ownAssetStores;
+		const isOwn = (canvas) => own !== void 0 && canvas?.assetStores.brushes === own.brushes;
+		if (previousApp !== app && isOwn(previousApp)) previousApp?.useAssetStores({});
+		if (settings) app.useAssetStores(assets);
+		else if (isOwn(app)) app.useAssetStores({});
+		this.ownAssetStores = settings ? assets : void 0;
+		app.profileSync?.addEventListener(ASSET_SYNC_ERROR_EVENT, this.onSettingsAutosaveError);
+	}
+	/**
+	* Keep the rendering chosen in the canvas's UI settings (e.g. when they're restored, imported or changed) under a
+	* name, for the next time the layout makes a canvas. Returns what stops it.
+	*/
+	keepRendering(name) {
+		const ui = this.app.ui;
+		const keep = () => saveRenderingChoice(name, ui.data.rendering);
+		ui.addEventListener("change", keep);
+		return () => ui.removeEventListener("change", keep);
 	}
 	/** Show errors from the canvas's current autosave */
 	watchAutosaveErrors() {

package/dist/ui/elements/PcAppSettings/index.d.ts

@@ -1,14 +1,16 @@
 import { nothing } from "lit";
 import { PcElement } from "../../base";
 import "../PcShortcutSettings";
+import "../PcToggleCheckbox";
 import "../PcDialogWindow";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 /**
- * Buttons for the user's app settings: "Keyboard shortcuts", which opens a window to change them (see
+ * The user's app settings: a "Draw with the GPU" switch (the user's `ui.data.rendering`, used from the next start, so it
+ * says when the page needs reloading), and buttons: "Keyboard shortcuts", which opens a window to change them (see
  * `pc-shortcut-settings`), and "Import settings" and "Export settings", which read and write a settings JSON file (input
- * settings, keyboard shortcuts, colour palette, colours, profile graphs, theme and language). The window is a shaded
- * `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
+ * settings, keyboard shortcuts, colours, the user's colour palettes, profile graphs and brush presets, theme, language,
+ * rendering, and settings wrapper apps added). The window is a shaded `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
  * back to the button. Fires `pc-toast` after importing, or when importing or exporting fails.
  *
  * @example
@@ -40,20 +42,25 @@ export declare class PcAppSettings extends PcElement {
     shortcutsOpen: boolean;
     /** Saves exported files (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
+    private changes;
     constructor();
     /** Close the keyboard shortcuts window */
     closeShortcuts(): void;
     /**
-     * Import the settings in a settings file, using the parts it has.
+     * Import the settings in a settings file, using the parts it has (the user's colour palettes, profile graphs and brush
+     * presets are added to theirs).
      */
     importFile(file: File): Promise<void>;
     /**
-     * Export the settings as a settings file.
+     * Export the settings, with the user's colour palettes, profile graphs and brush presets, as a settings file.
      */
     exportFile(): Promise<void>;
-    /** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
-    private toastError;
     /** The keyboard shortcuts window, with its contents only while open */
     private renderShortcuts;
+    /**
+     * The switch that draws with the GPU (or the CPU) from the next start, saying when the page needs reloading to use
+     * the choice (see `PaintCanvas.rendering`).
+     */
+    private renderRendering;
     render(): import("lit").TemplateResult<1> | typeof nothing;
 }

package/dist/ui/elements/PcAppSettings/index.js

@@ -1,22 +1,25 @@
-import { SETTINGS_FILE_FORMAT } from "../../../lib/settings/schema.js";
 import { ICON_CONTROLS_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
 import "../PcShortcutSettings/index.js";
+import "../PcToggleCheckbox/index.js";
 import "../PcDialogWindow/index.js";
-import { SETTINGS_FILE_ERRORS, SettingsFileError, applySettings, collectSettings, exportSettingsFile, parseSettingsFile, settingsFileName } from "../../../lib/settings/index.js";
+import { AssetFileError } from "../../../lib/assets/index.js";
+import { applySettings, collectSettings, exportSettingsFile, parseSettingsFile, settingsFileName } from "../../../lib/settings/index.js";
 import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
 import { css, html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcAppSettings/index.ts
-/** Translation keys of the settings file error messages */
-var SETTINGS_FILE_ERROR_KEYS = {
-	[SETTINGS_FILE_ERRORS.incompatible]: "paintCanvas.settings.fileIncompatible",
-	[SETTINGS_FILE_ERRORS.read]: "paintCanvas.settings.fileReadFailed"
+/** Translation keys of the messages shown when importing a settings file fails, by reason */
+var IMPORT_ERROR_KEYS = {
+	invalid: "paintCanvas.settings.fileIncompatible",
+	unsupported: "paintCanvas.settings.fileUnsupported"
 };
 /**
-* Buttons for the user's app settings: "Keyboard shortcuts", which opens a window to change them (see
+* The user's app settings: a "Draw with the GPU" switch (the user's `ui.data.rendering`, used from the next start, so it
+* says when the page needs reloading), and buttons: "Keyboard shortcuts", which opens a window to change them (see
 * `pc-shortcut-settings`), and "Import settings" and "Export settings", which read and write a settings JSON file (input
-* settings, keyboard shortcuts, colour palette, colours, profile graphs, theme and language). The window is a shaded
-* `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
+* settings, keyboard shortcuts, colours, the user's colour palettes, profile graphs and brush presets, theme, language,
+* rendering, and settings wrapper apps added). The window is a shaded `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
 * back to the button. Fires `pc-toast` after importing, or when importing or exporting fails.
 *
 * @example
@@ -44,11 +47,23 @@ var PcAppSettings = class extends PcElement {
         font-family: var(--pc-font);
         font-size: var(--pc-font-size);
       }
+      /* One full-width button per row */
       .actions {
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
         gap: var(--pc-space-2);
       }
+      .actions button {
+        width: 100%;
+      }
+      .hint {
+        display: block;
+        color: var(--pc-text-muted);
+        font-size: 0.85em;
+      }
+      .pending {
+        color: var(--pc-text);
+      }
       pc-dialog-window {
         --pc-dialog-width: 480px;
       }
@@ -60,6 +75,7 @@ var PcAppSettings = class extends PcElement {
 	];
 	/** Saves exported files (replaceable for tests) */
 	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
+	changes = new ChangeController(this, () => [this.app?.ui]);
 	constructor() {
 		super();
 		this.shortcutsOpen = false;
@@ -69,36 +85,33 @@ var PcAppSettings = class extends PcElement {
 		this.shortcutsOpen = false;
 	}
 	/**
-	* Import the settings in a settings file, using the parts it has.
+	* Import the settings in a settings file, using the parts it has (the user's colour palettes, profile graphs and brush
+	* presets are added to theirs).
 	*/
 	async importFile(file) {
 		const app = this.app;
 		if (!app) return;
-		let text;
 		try {
-			text = await file.text();
-		} catch {
-			this.toastError(SETTINGS_FILE_ERRORS.read);
-			return;
-		}
-		try {
-			applySettings(app, parseSettingsFile(text, [app.names.settingsFileFormat, SETTINGS_FILE_FORMAT]));
+			await applySettings(app, parseSettingsFile(await file.text()));
 			emit(this, "pc-toast", {
 				message: this.t("paintCanvas.settings.imported"),
 				kind: "success"
 			});
 		} catch (error) {
-			this.toastError(error instanceof SettingsFileError ? error.message : SETTINGS_FILE_ERRORS.read);
+			emit(this, "pc-toast", {
+				message: this.t(error instanceof AssetFileError && IMPORT_ERROR_KEYS[error.reason] || "paintCanvas.settings.fileReadFailed"),
+				kind: "error"
+			});
 		}
 	}
 	/**
-	* Export the settings as a settings file.
+	* Export the settings, with the user's colour palettes, profile graphs and brush presets, as a settings file.
 	*/
 	async exportFile() {
 		const app = this.app;
 		if (!app) return;
 		try {
-			await this.saveFile(new Blob([exportSettingsFile(collectSettings(app), app.names.settingsFileFormat)], { type: "application/json" }), settingsFileName(void 0, app.names.filePrefix));
+			await this.saveFile(new Blob([exportSettingsFile(collectSettings(app))], { type: "application/json" }), settingsFileName(void 0, app.names.filePrefix));
 		} catch {
 			emit(this, "pc-toast", {
 				message: this.t("paintCanvas.settings.exportFailed"),
@@ -106,13 +119,6 @@ var PcAppSettings = class extends PcElement {
 			});
 		}
 	}
-	/** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
-	toastError(message) {
-		emit(this, "pc-toast", {
-			message: this.t(SETTINGS_FILE_ERROR_KEYS[message]),
-			kind: "error"
-		});
-	}
 	/** The keyboard shortcuts window, with its contents only while open */
 	renderShortcuts(app) {
 		return html`<pc-dialog-window
@@ -127,14 +133,33 @@ var PcAppSettings = class extends PcElement {
               .settings=${app.shortcuts}
             ></pc-shortcut-settings>` : nothing}
     </pc-dialog-window>`;
+	}
+	/**
+	* The switch that draws with the GPU (or the CPU) from the next start, saying when the page needs reloading to use
+	* the choice (see `PaintCanvas.rendering`).
+	*/
+	renderRendering(app) {
+		const chosen = app.ui.data.rendering;
+		const pending = chosen !== app.rendering;
+		return html`<pc-toggle-checkbox
+      class="gpu"
+      .checked=${chosen === "gpu"}
+      @change=${(e) => app.ui.update({ rendering: e.detail.checked ? "gpu" : "cpu" })}
+    >
+      ${this.t("paintCanvas.settings.gpu")}
+      <span class="hint ${pending ? "pending" : ""}" aria-live="polite">
+        ${this.t(pending ? "paintCanvas.settings.reloadToApply" : "paintCanvas.settings.gpuHint")}
+      </span>
+    </pc-toggle-checkbox>`;
 	}
 	render() {
 		const app = this.app;
 		if (!app) return nothing;
-		return html`<div class="actions">
+		return html`${this.renderRendering(app)}
+      <div class="actions">
         <button
           type="button"
-          class="pill-s shortcuts"
+          class="pill shortcuts"
           aria-haspopup="dialog"
           @click=${() => this.shortcutsOpen = true}
         >
@@ -142,14 +167,14 @@ var PcAppSettings = class extends PcElement {
         </button>
         <button
           type="button"
-          class="pill-s import"
+          class="pill import"
           @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
         >
           ${this.t("paintCanvas.settings.import")}
         </button>
         <button
           type="button"
-          class="pill-s export"
+          class="pill export"
           @click=${() => void this.exportFile()}
         >
           ${this.t("paintCanvas.settings.export")}

package/dist/ui/elements/PcBrushConfig/index.d.ts

@@ -2,6 +2,7 @@ import { nothing } from "lit";
 import { type ConfirmFn, type PromptFn } from "../../ask";
 import { PcElement } from "../../base";
 import "../PcBrushTest";
+import "../PcToggleCheckbox";
 import "../PcDialogWindow";
 import "../PcSliderRange";
 import "../PcProfileEditor";

package/dist/ui/elements/PcBrushConfig/index.js

@@ -4,6 +4,7 @@ import { iconLabel } from "../../icons/index.js";
 import { askConfirm, askText, deletePresetQuestion } from "../../ask/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
 import "../PcBrushTest/index.js";
+import "../PcToggleCheckbox/index.js";
 import "../PcDialogWindow/index.js";
 import "../PcSliderRange/index.js";
 import "../PcProfileEditor/index.js";
@@ -500,16 +501,14 @@ var PcBrushConfig = class extends PcElement {
             >
             ${this.single("spacing", this.t("paintCanvas.brushConfig.spacing"), draft.spacing ?? 5, spacingLimits, (spacing) => this.change({ spacing }))}
           </div>
-          <label>
-            <input
-              type="checkbox"
-              class="snap"
-              .checked=${draft.snapToPixelGrid ?? false}
-              ?disabled=${this.busy}
-              @change=${(e) => this.change({ snapToPixelGrid: e.target.checked })}
-            />
+          <pc-toggle-checkbox
+            class="snap"
+            .checked=${draft.snapToPixelGrid ?? false}
+            ?disabled=${this.busy}
+            @change=${(e) => this.change({ snapToPixelGrid: e.detail.checked })}
+          >
             ${this.t("paintCanvas.brushConfig.snapToPixelGrid")}
-          </label>
+          </pc-toggle-checkbox>
         </div>
         ${this.editingId ? html`<button
                 slot="footer-start"

package/dist/ui/elements/PcBrushTest/index.d.ts

@@ -1,4 +1,5 @@
 import { PcElement } from "../../base";
+import "../PcToggleCheckbox";
 import type { BrushConfig } from "../../../lib/brushes/types";
 import type BrushTipCache from "../../../lib/brushes/BrushTipCache";
 import { type CanvasFactory } from "../../../lib/classes/Layer";