@lvl99dotcom/paintcanvas 0.5.0 → 0.7.0

package/dist/ui/ask/index.d.ts

@@ -0,0 +1,48 @@
+import "../elements/PcDialog";
+import type Translations from "../../lib/i18n";
+import { type DialogField } from "../elements/PcDialog";
+/** The choice that agrees, in the dialogs `askConfirm` and `askText` show */
+export declare const OK_CHOICE = "ok";
+/** What to ask */
+export interface AskOptions {
+    heading: string;
+    message?: string;
+    /** The button that agrees */
+    confirm: string;
+    /** The button that doesn't */
+    cancel: string;
+    /** Whether agreeing removes or replaces something (the button is pink) */
+    cancelling?: boolean;
+}
+/** What to ask for text: as `AskOptions`, with the field's label and the text it starts with */
+export interface AskTextOptions extends AskOptions, DialogField {
+}
+/** Asks the user to confirm, resolving true if they agree */
+export type ConfirmFn = (options: AskOptions) => boolean | Promise<boolean>;
+/** Asks the user for text, resolving with it, or null if they don't give it */
+export type PromptFn = (options: AskTextOptions) => string | null | Promise<string | null>;
+/**
+ * Ask the user to confirm in a dialog shown in `parent`, resolving true if they agree (false for the cancel button,
+ * Escape or a press outside it).
+ *
+ * @example
+ * if (await askConfirm(this.renderRoot, { heading: "Delete preset", message: 'Delete "Ink"?', confirm: "Delete",
+ *   cancel: "Cancel", cancelling: true })) remove();
+ */
+export declare const askConfirm: (parent: Node, options: AskOptions) => Promise<boolean>;
+/**
+ * Ask the user for text in a dialog shown in `parent`, resolving with what they typed when they agree (or press Enter),
+ * or null if they cancel.
+ *
+ * @example
+ * const name = await askText(this.renderRoot, { heading: "Add to presets", label: "Name", value: "Ink",
+ *   confirm: "Save", cancel: "Cancel" });
+ */
+export declare const askText: (parent: Node, { label, value, ...options }: AskTextOptions) => Promise<string | null>;
+/**
+ * The question asked before deleting one of the user's brush presets, in the chosen language.
+ *
+ * @example
+ * await askConfirm(this.renderRoot, deletePresetQuestion(this.translations, "Ink"));
+ */
+export declare const deletePresetQuestion: (translations: Pick<Translations, "t">, name: string) => AskOptions;

package/dist/ui/ask/index.js

@@ -0,0 +1,67 @@
+import { CANCEL_CHOICE } from "../elements/PcDialog/index.js";
+// src/ui/ask/index.ts
+/** The choice that agrees, in the dialogs `askConfirm` and `askText` show */
+var OK_CHOICE = "ok";
+/**
+* Show a dialog in a parent (e.g. an element's shadow root) until the user chooses, then remove it. The choice doesn't
+* reach the parent's listeners.
+*/
+var ask = (parent, options, field) => new Promise((resolve) => {
+	const dialog = document.createElement("pc-dialog");
+	dialog.heading = options.heading;
+	dialog.message = options.message ?? "";
+	dialog.field = field;
+	dialog.choices = [{
+		value: "ok",
+		label: options.confirm,
+		cancelling: options.cancelling
+	}, {
+		value: CANCEL_CHOICE,
+		label: options.cancel,
+		variant: "dismiss"
+	}];
+	dialog.addEventListener("pc-choose", (event) => {
+		event.stopPropagation();
+		dialog.remove();
+		resolve(event.detail);
+	}, { once: true });
+	parent.appendChild(dialog);
+});
+/**
+* Ask the user to confirm in a dialog shown in `parent`, resolving true if they agree (false for the cancel button,
+* Escape or a press outside it).
+*
+* @example
+* if (await askConfirm(this.renderRoot, { heading: "Delete preset", message: 'Delete "Ink"?', confirm: "Delete",
+*   cancel: "Cancel", cancelling: true })) remove();
+*/
+var askConfirm = async (parent, options) => (await ask(parent, options)).value === "ok";
+/**
+* Ask the user for text in a dialog shown in `parent`, resolving with what they typed when they agree (or press Enter),
+* or null if they cancel.
+*
+* @example
+* const name = await askText(this.renderRoot, { heading: "Add to presets", label: "Name", value: "Ink",
+*   confirm: "Save", cancel: "Cancel" });
+*/
+var askText = async (parent, { label, value, ...options }) => {
+	const choice = await ask(parent, options, {
+		label,
+		value
+	});
+	return choice.value === "ok" ? choice.text : null;
+};
+/**
+* The question asked before deleting one of the user's brush presets, in the chosen language.
+*
+* @example
+* await askConfirm(this.renderRoot, deletePresetQuestion(this.translations, "Ink"));
+*/
+var deletePresetQuestion = (translations, name) => ({
+	heading: translations.t("paintCanvas.presets.deleteHeading"),
+	message: translations.t("paintCanvas.presets.deleteConfirm", { name }),
+	confirm: translations.t("paintCanvas.common.delete"),
+	cancel: translations.t("paintCanvas.common.cancel"),
+	cancelling: true
+});
+export { OK_CHOICE, askConfirm, askText, deletePresetQuestion };

package/dist/ui/base/index.d.ts

@@ -16,8 +16,15 @@ export declare const defineElement: (name: string, constructor: CustomElementCon
  * emit(this, "pc-select", { value: "duplicate" });
  */
 export declare const emit: <T>(target: EventTarget, type: string, detail?: T) => boolean;
+/** The least font size of form fields on touch screens: iOS zooms the page in on fields with smaller text */
+export declare const TOUCH_FIELD_FONT_SIZE = "16px";
 /**
- * The base of PaintCanvas's elements: the design tokens, the translations and icons they use (shared ones unless
+ * Form fields' text on touch screens: at least 16px, so iOS doesn't zoom the page in when one is focused (which is
+ * hard to undo). It wins over elements' own field sizes, as zooming makes the whole interface hard to use.
+ */
+export declare const touchFields: import("lit").CSSResult;
+/**
+ * The base of PaintCanvas's elements: the design tokens, 16px form fields on touch screens (see `touchFields`), the translations and icons they use (shared ones unless
  * given others), and re-rendering when either changes.
  *
  * @example

package/dist/ui/base/index.js

@@ -1,7 +1,7 @@
 import { installTokens, tokens } from "../tokens/index.js";
 import { icons } from "../icons/index.js";
 import { translations } from "../../lib/i18n/index.js";
-import { LitElement } from "lit";
+import { LitElement, css, unsafeCSS } from "lit";
 // src/ui/base/index.ts
 /**
 * Register a custom element unless the name is already registered (e.g. by another copy of PaintCanvas, or after hot
@@ -25,8 +25,23 @@ var emit = (target, type, detail) => target.dispatchEvent(new CustomEvent(type,
 	composed: true,
 	cancelable: true
 }));
+/** The least font size of form fields on touch screens: iOS zooms the page in on fields with smaller text */
+var TOUCH_FIELD_FONT_SIZE = "16px";
 /**
-* The base of PaintCanvas's elements: the design tokens, the translations and icons they use (shared ones unless
+* Form fields' text on touch screens: at least 16px, so iOS doesn't zoom the page in when one is focused (which is
+* hard to undo). It wins over elements' own field sizes, as zooming makes the whole interface hard to use.
+*/
+var touchFields = css`
+  @media (pointer: coarse) {
+    input,
+    select,
+    textarea {
+      font-size: max(${unsafeCSS(TOUCH_FIELD_FONT_SIZE)}, 1em) !important;
+    }
+  }
+`;
+/**
+* The base of PaintCanvas's elements: the design tokens, 16px form fields on touch screens (see `touchFields`), the translations and icons they use (shared ones unless
 * given others), and re-rendering when either changes.
 *
 * @example
@@ -37,7 +52,7 @@ var emit = (target, type, detail) => target.dispatchEvent(new CustomEvent(type,
 * }
 */
 var PcElement = class extends LitElement {
-	static styles = [tokens];
+	static styles = [tokens, touchFields];
 	static properties = {
 		translations: { attribute: false },
 		icons: { attribute: false },
@@ -91,4 +106,4 @@ var PcElement = class extends LitElement {
 		this.watched = [];
 	}
 };
-export { PcElement, defineElement, emit };
+export { PcElement, TOUCH_FIELD_FONT_SIZE, defineElement, emit, touchFields };

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,8 @@ export declare class PaintCanvasElement extends PcElement {
     private watchedAutosave?;
     /** Keeps the app settings under the `settings-store` name, if any */
     private ownSettingsAutosave?;
+    /** 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) */
@@ -204,6 +209,11 @@ export declare class PaintCanvasElement extends PcElement {
      * saves any change waiting to be saved).
      */
     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,7 @@ 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, { IndexedDbSettingsStore, loadRenderingChoice, saveRenderingChoice } from "../../../lib/storage/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 +45,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 +59,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 +73,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 +130,8 @@ var PaintCanvasElement = class extends PcElement {
 	watchedAutosave;
 	/** Keeps the app settings under the `settings-store` name, if any */
 	ownSettingsAutosave;
+	/** 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 +199,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);
@@ -284,10 +289,22 @@ var PaintCanvasElement = class extends PcElement {
 	*/
 	useSettingsStore() {
 		this.ownSettingsAutosave?.stop();
+		this.stopKeepingRendering?.();
 		const name = this.settingsStore || void 0;
+		this.stopKeepingRendering = name === void 0 ? void 0 : this.keepRendering(name);
 		this.ownSettingsAutosave = name === void 0 ? void 0 : new SettingsAutosave(this.app, new IndexedDbSettingsStore(name));
 		this.ownSettingsAutosave?.addEventListener(SETTINGS_AUTOSAVE_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() {
 		const autosave = this.app?.autosave;
@@ -433,7 +450,7 @@ var PaintCanvasElement = class extends PcElement {
 	closePanelOutside(event) {
 		const panel = this.app?.panel;
 		if (!panel) return;
-		if (event.composedPath().some((target) => target instanceof Element && (target.classList.contains("panel") && target.getRootNode() === this.renderRoot || target.matches("dialog, pc-dialog") || target.getAttribute("data-panel") === panel || panel === Panel.Palette && target.localName === "pc-colour-pair"))) return;
+		if (event.composedPath().some((target) => target instanceof Element && (target.classList.contains("panel") && target.getRootNode() === this.renderRoot || target.matches("dialog, pc-dialog, pc-dialog-window") || target.getAttribute("data-panel") === panel || panel === Panel.Palette && target.localName === "pc-colour-pair"))) return;
 		markDismissingPress(event);
 		this.app.closePanel();
 	}
@@ -484,6 +501,8 @@ var PaintCanvasElement = class extends PcElement {
 		}];
 		return html`<pc-dialog
       class="elsewhere"
+      inline
+      .dismissible=${false}
       heading=${this.t("paintCanvas.autosave.elsewhere")}
       message=${this.t("paintCanvas.autosave.elsewhereMessage")}
       .choices=${choices}

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PaintCanvas/style.css?inline
-var style_default = "/* The layout: header across the top, footer across the bottom, sides left and right, and between them the tool\n   settings, the canvas and the bottom bar. Empty areas take no space. */\n:host {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"header header header\" auto\n    \"left top right\" auto\n    \"left center right\" 1fr\n    \"left bottom right\" auto\n    \"footer footer footer\" auto / auto 1fr auto;\n  overflow: hidden;\n  background: var(--pc-bar);\n  font-family: var(--pc-font);\n  font-size: var(--pc-font-size);\n}\nheader {\n  grid-area: header;\n}\n.top {\n  grid-area: top;\n  min-width: 0;\n}\n/* The tool settings fill the top pane */\n.top pc-tool-settings {\n  flex: 1;\n}\n.center {\n  position: relative;\n  grid-area: center;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n.bottom {\n  grid-area: bottom;\n  min-width: 0;\n}\nfooter {\n  grid-area: footer;\n}\n.side {\n  position: relative;\n  z-index: 3;\n  display: flex;\n  min-height: 0;\n}\n/* A side's panes fill it */\n.side pc-pane,\n.side pc-toolbar,\n.side ::slotted(*) {\n  flex: 1;\n}\n.side.left {\n  grid-area: left;\n}\n.side.right {\n  grid-area: right;\n}\n\n/* Hiding the interface (Tab key) leaves only the canvas */\n:host([ui-hidden]) header,\n:host([ui-hidden]) .top,\n:host([ui-hidden]) .bottom,\n:host([ui-hidden]) footer,\n:host([ui-hidden]) .side {\n  display: none;\n}\n\n/* The canvas fills the middle; things drawn over it go in the overlay */\n.center ::slotted([slot=\"center\"]),\n.center pc-canvas {\n  position: absolute;\n  inset: 0;\n}\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.overlay > * {\n  pointer-events: auto;\n}\npc-canvas-map {\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n}\n\n/* Menus opened from the toolbar float over the canvas, beside the toolbar */\n.panel {\n  position: absolute;\n  z-index: 4;\n  left: 0;\n  bottom: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n.panel.top-panel {\n  top: 0;\n  bottom: auto;\n}\n/* The app menu: the implementer's content in a panel */\n.menu-panel:not([open]) {\n  display: none;\n}\n\n/* Floating: the side's panes float over the canvas (see pc-pane), so the side takes no space */\n.side[data-mode=\"floating\"] {\n  /* Beside the canvas only, so it floats over the canvas and not the tool settings */\n  grid-row: 3;\n  width: 0;\n}\n/* Overlay: the side's rail sits over the canvas (beside it only, not the tool settings), so the canvas fills the\n   width behind it; presses between its panes' buttons (which take presses themselves) reach the canvas */\n.side[data-mode=\"overlay\"] {\n  grid-row: 3;\n  grid-column: 1 / -1;\n  pointer-events: none;\n}\n.side.left[data-mode=\"overlay\"] {\n  justify-self: start;\n}\n.side.right[data-mode=\"overlay\"] {\n  justify-self: end;\n}\n/* The toolbar's panels open beside a left overlay rail, not under it */\n:host([left-mode=\"overlay\"]) .panel {\n  left: var(--pc-left-inset);\n}\n/* While another window is drawing, its message covers only the layout (not the whole page) */\npc-dialog.elsewhere {\n  position: absolute;\n}\n";
+var style_default = "/* The layout: header across the top, footer across the bottom, sides left and right, and between them the tool\n   settings, the canvas and the bottom bar. Empty areas take no space. */\n:host {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"header header header\" auto\n    \"left top right\" auto\n    \"left center right\" 1fr\n    \"left bottom right\" auto\n    \"footer footer footer\" auto / auto 1fr auto;\n  overflow: hidden;\n  background: var(--pc-bar);\n  font-family: var(--pc-font);\n  font-size: var(--pc-font-size);\n}\nheader {\n  grid-area: header;\n}\n.top {\n  grid-area: top;\n  min-width: 0;\n}\n/* The tool settings fill the top pane */\n.top pc-tool-settings {\n  flex: 1;\n}\n.center {\n  position: relative;\n  grid-area: center;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n.bottom {\n  grid-area: bottom;\n  min-width: 0;\n}\nfooter {\n  grid-area: footer;\n}\n.side {\n  position: relative;\n  z-index: 3;\n  display: flex;\n  min-height: 0;\n}\n/* A side's panes fill it */\n.side pc-pane,\n.side pc-toolbar,\n.side ::slotted(*) {\n  flex: 1;\n}\n.side.left {\n  grid-area: left;\n}\n.side.right {\n  grid-area: right;\n}\n\n/* Hiding the interface (Tab key) leaves only the canvas */\n:host([ui-hidden]) header,\n:host([ui-hidden]) .top,\n:host([ui-hidden]) .bottom,\n:host([ui-hidden]) footer,\n:host([ui-hidden]) .side {\n  display: none;\n}\n\n/* The canvas fills the middle; things drawn over it go in the overlay */\n.center ::slotted([slot=\"center\"]),\n.center pc-canvas {\n  position: absolute;\n  inset: 0;\n}\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.overlay > * {\n  pointer-events: auto;\n}\npc-canvas-map {\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n}\n\n/* Menus opened from the toolbar float over the canvas, beside the toolbar */\n.panel {\n  position: absolute;\n  z-index: 4;\n  left: 0;\n  bottom: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n.panel.top-panel {\n  top: 0;\n  bottom: auto;\n}\n/* The app menu: the implementer's content in a panel */\n.menu-panel:not([open]) {\n  display: none;\n}\n\n/* Floating: the side's panes float over the canvas (see pc-pane), so the side takes no space */\n.side[data-mode=\"floating\"] {\n  /* Beside the canvas only, so it floats over the canvas and not the tool settings */\n  grid-row: 3;\n  width: 0;\n}\n/* Overlay: the side's rail sits over the canvas (beside it only, not the tool settings), so the canvas fills the\n   width behind it; presses between its panes' buttons (which take presses themselves) reach the canvas */\n.side[data-mode=\"overlay\"] {\n  grid-row: 3;\n  grid-column: 1 / -1;\n  pointer-events: none;\n}\n.side.left[data-mode=\"overlay\"] {\n  justify-self: start;\n}\n.side.right[data-mode=\"overlay\"] {\n  justify-self: end;\n}\n/* The toolbar's panels open beside a left overlay rail, not under it */\n:host([left-mode=\"overlay\"]) .panel {\n  left: var(--pc-left-inset);\n}\n";
 export { style_default as default };

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

@@ -1,14 +1,17 @@
-import { nothing, type PropertyValues } from "lit";
+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, theme and language). The window is a modal `<dialog>` above the whole page; it
- * closes with its Close button, Escape, or a press on the backdrop, and the browser gives focus back to the button. Fires `pc-toast` after importing, or when importing or
- * exporting fails.
+ * settings, keyboard shortcuts, colour palette, colours, profile graphs, theme, language and rendering). 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
  * html`<pc-app-settings .app=${canvas}></pc-app-settings>`
@@ -39,8 +42,8 @@ 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();
-    protected updated(changed: PropertyValues<this>): void;
     /** Close the keyboard shortcuts window */
     closeShortcuts(): void;
     /**
@@ -53,7 +56,12 @@ export declare class PcAppSettings extends PcElement {
     exportFile(): Promise<void>;
     /** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
     private toastError;
-    /** The keyboard shortcuts window: a modal dialog, with its contents only while open */
+    /** 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,7 +1,10 @@
 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 { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
 import { css, html, nothing, unsafeCSS } from "lit";
@@ -12,11 +15,12 @@ var SETTINGS_FILE_ERROR_KEYS = {
 	[SETTINGS_FILE_ERRORS.read]: "paintCanvas.settings.fileReadFailed"
 };
 /**
-* 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, theme and language). The window is a modal `<dialog>` above the whole page; it
-* closes with its Close button, Escape, or a press on the backdrop, and the browser gives focus back to the button. Fires `pc-toast` after importing, or when importing or
-* exporting fails.
+* settings, keyboard shortcuts, colour palette, colours, profile graphs, theme, language and rendering). 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
 * html`<pc-app-settings .app=${canvas}></pc-app-settings>`
@@ -43,37 +47,25 @@ 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);
       }
-      /* A modal window in the browser's top layer, above everything on the page */
-      dialog {
-        box-sizing: border-box;
-        width: min(480px, calc(100vw - 2 * var(--pc-space-3)));
-        max-height: calc(100vh - 2 * var(--pc-space-3));
-        padding: 0;
-        border: 0;
-        border-radius: var(--pc-radius);
-        background: var(--pc-surface-raised);
-        color: var(--pc-text);
-        box-shadow: var(--pc-shadow);
+      .actions button {
+        width: 100%;
       }
-      dialog::backdrop {
-        background: var(--pc-backdrop);
+      .hint {
+        display: block;
+        color: var(--pc-text-muted);
+        font-size: 0.85em;
       }
-      .window {
-        display: flex;
-        flex-direction: column;
-        gap: var(--pc-space-3);
-        box-shadow: none;
+      .pending {
+        color: var(--pc-text);
       }
-      .header {
-        display: flex;
-        gap: var(--pc-space-2);
-        align-items: center;
-        justify-content: space-between;
+      pc-dialog-window {
+        --pc-dialog-width: 480px;
       }
       h2 {
         margin: 0;
@@ -83,17 +75,11 @@ 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;
 	}
-	updated(changed) {
-		if (!changed.has("shortcutsOpen")) return;
-		const dialog = this.renderRoot.querySelector("dialog");
-		if (!dialog) return;
-		if (this.shortcutsOpen && !dialog.open) dialog.showModal();
-		else if (!this.shortcutsOpen && dialog.open) dialog.close();
-	}
 	/** Close the keyboard shortcuts window */
 	closeShortcuts() {
 		this.shortcutsOpen = false;
@@ -143,39 +129,44 @@ var PcAppSettings = class extends PcElement {
 			kind: "error"
 		});
 	}
-	/** The keyboard shortcuts window: a modal dialog, with its contents only while open */
+	/** The keyboard shortcuts window, with its contents only while open */
 	renderShortcuts(app) {
-		return html`<dialog
-      aria-labelledby="shortcuts-title"
-      @close=${() => this.closeShortcuts()}
-      @click=${(e) => {
-			if (e.target === e.currentTarget) this.closeShortcuts();
-		}}
+		return html`<pc-dialog-window
+      class="shortcuts-window"
+      shaded
+      ?open=${this.shortcutsOpen}
+      @pc-dismiss=${() => this.closeShortcuts()}
+    >
+      <h2 slot="header-middle">${this.t("paintCanvas.shortcuts.title")}</h2>
+      ${this.shortcutsOpen ? html`<pc-shortcut-settings
+              slot="body"
+              .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.shortcutsOpen ? html`<div class="window">
-              <div class="header">
-                <h2 id="shortcuts-title">
-                  ${this.t("paintCanvas.shortcuts.title")}
-                </h2>
-                <button
-                  type="button"
-                  class="close dismiss"
-                  autofocus
-                  @click=${() => this.closeShortcuts()}
-                >
-                  ${this.t("paintCanvas.common.close")}
-                </button>
-              </div>
-              <pc-shortcut-settings
-                .settings=${app.shortcuts}
-              ></pc-shortcut-settings>
-            </div>` : nothing}
-    </dialog>`;
+      ${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 shortcuts"