@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

package/dist/locales/zh-Hant.js

@@ -6,7 +6,9 @@ var zh_Hant_default = {
 	"paintCanvas.common.save": "儲存",
 	"paintCanvas.common.delete": "刪除",
 	"paintCanvas.common.clear": "清除",
+	"paintCanvas.common.cut": "剪下",
 	"paintCanvas.common.copy": "拷貝",
+	"paintCanvas.common.copyMerged": "合併拷貝",
 	"paintCanvas.common.paste": "貼上",
 	"paintCanvas.common.undo": "復原",
 	"paintCanvas.common.redo": "重做",
@@ -14,7 +16,33 @@ var zh_Hant_default = {
 	"paintCanvas.common.moreInformation": "更多資訊",
 	"paintCanvas.common.width": "寬度",
 	"paintCanvas.common.height": "高度",
+	"paintCanvas.common.size": "大小",
 	"paintCanvas.common.opacity": "不透明度",
+	"paintCanvas.range.low": "{label}（最小）",
+	"paintCanvas.range.high": "{label}（最大）",
+	"paintCanvas.profileGraph.point": "點 {number}：{x}, {y}",
+	"paintCanvas.profileGraph.remove": "刪除點",
+	"paintCanvas.profileGraph.linear": "尖角（線性）",
+	"paintCanvas.profileGraph.bezier": "平滑（三次貝茲）",
+	"paintCanvas.profiles.linear": "線性",
+	"paintCanvas.profiles.overweight": "偏重",
+	"paintCanvas.profiles.underweight": "偏輕",
+	"paintCanvas.profileEditor.title": "{param}曲線",
+	"paintCanvas.profileEditor.button": "{param}：曲線",
+	"paintCanvas.profileEditor.custom": "自訂",
+	"paintCanvas.profileEditor.actions": "曲線操作",
+	"paintCanvas.profileEditor.new": "新增曲線",
+	"paintCanvas.profileEditor.duplicate": "複製…",
+	"paintCanvas.profileEditor.rename": "重新命名…",
+	"paintCanvas.profileEditor.delete": "刪除…",
+	"paintCanvas.profileEditor.reset": "重設",
+	"paintCanvas.profileEditor.name": "名稱",
+	"paintCanvas.profileEditor.saveHeading": "儲存曲線",
+	"paintCanvas.profileEditor.renameHeading": "重新命名曲線",
+	"paintCanvas.profileEditor.deleteHeading": "刪除曲線",
+	"paintCanvas.profileEditor.deleteConfirm": "刪除「{name}」？此操作無法復原。",
+	"paintCanvas.profileEditor.replaceHeading": "取代曲線",
+	"paintCanvas.profileEditor.replaceConfirm": "已有名為「{name}」的曲線。要取代嗎？",
 	"paintCanvas.tool.brush": "筆刷",
 	"paintCanvas.tool.eraser": "橡皮擦",
 	"paintCanvas.tool.move": "移動、縮放和旋轉",
@@ -62,6 +90,8 @@ var zh_Hant_default = {
 	"paintCanvas.toolSettings.presets": "{tool}預設",
 	"paintCanvas.toolSettings.configure": "詳細設定",
 	"paintCanvas.toolSettings.constrainProportions": "維持比例",
+	"paintCanvas.toolSettings.sizeSettings": "尺寸設定",
+	"paintCanvas.toolSettings.moreActions": "更多操作",
 	"paintCanvas.toolSettings.pressure": "壓力感應",
 	"paintCanvas.toolSettings.tilt": "傾斜",
 	"paintCanvas.toolSettings.focusPen": "僅限觸控筆模式",
@@ -77,7 +107,7 @@ var zh_Hant_default = {
 	"paintCanvas.toolSettings.areaSample": "區域平均取色",
 	"paintCanvas.brushMenu.presets": "{tool}預設",
 	"paintCanvas.brushMenu.size": "{tool}大小",
-	"paintCanvas.brushMenu.dragToResize": "左右拖曳以調整大小",
+	"paintCanvas.numberSlider.hint": "左右拖曳以變更，點一下以輸入",
 	"paintCanvas.brushMenu.newPreset": "新預設",
 	"paintCanvas.brushMenu.create": "建立",
 	"paintCanvas.brushMenu.import": "匯入",
@@ -85,6 +115,9 @@ var zh_Hant_default = {
 	"paintCanvas.presets.myPresets": "我的預設",
 	"paintCanvas.presets.unknownAuthor": "未知",
 	"paintCanvas.presets.deleteConfirm": "要刪除「{name}」嗎？此動作無法復原。",
+	"paintCanvas.presets.deleteHeading": "刪除預設",
+	"paintCanvas.presets.replaceHeading": "取代預設",
+	"paintCanvas.presets.replace": "取代",
 	"paintCanvas.presets.deleted": "已刪除「{name}」",
 	"paintCanvas.presets.deleteFailed": "無法刪除「{name}」",
 	"paintCanvas.presets.saved": "已將「{name}」儲存到我的預設",
@@ -100,6 +133,8 @@ var zh_Hant_default = {
 	"paintCanvas.brushConfig.eraserTitle": "橡皮擦詳細設定",
 	"paintCanvas.brushConfig.presetName": "預設名稱",
 	"paintCanvas.brushConfig.shape": "形狀",
+	"paintCanvas.brushConfig.chooseShape": "選擇形狀",
+	"paintCanvas.brushConfig.customShape": "自訂",
 	"paintCanvas.brushConfig.upload": "上傳",
 	"paintCanvas.brushConfig.paste": "貼上",
 	"paintCanvas.brushConfig.rotation": "旋轉",
@@ -116,6 +151,7 @@ var zh_Hant_default = {
 	"paintCanvas.brushConfig.shapeFailed": "無法使用此筆刷形狀",
 	"paintCanvas.brushConfig.test": "試畫",
 	"paintCanvas.brushConfig.testArea": "筆刷試畫區域",
+	"paintCanvas.brushConfig.showStrokePoints": "顯示筆畫點",
 	"paintCanvas.shape.notPng": "筆刷形狀必須是 PNG 影像",
 	"paintCanvas.shape.tooLarge": "筆刷形狀影像最大為 2 MB",
 	"paintCanvas.shape.readFailed": "無法讀取筆刷形狀影像",
@@ -175,6 +211,7 @@ var zh_Hant_default = {
 	"paintCanvas.brushConfig.snapToPixelGrid": "對齊像素格線",
 	"paintCanvas.brushConfig.addToPresets": "加入預設",
 	"paintCanvas.brushConfig.variation": "{param}：{source}",
+	"paintCanvas.brushConfig.varyWith": "{param}：變化依據",
 	"paintCanvas.layers.mergeDownTitle": "向下合併",
 	"paintCanvas.layers.clear": "清除…",
 	"paintCanvas.layers.delete": "刪除…",
@@ -262,6 +299,6 @@ var zh_Hant_default = {
 	"paintCanvas.theme.label": "主題",
 	"paintCanvas.theme.light": "淺色",
 	"paintCanvas.theme.dark": "深色",
-	"paintCanvas.theme.auto": "自動"
+	"paintCanvas.theme.system": "跟隨系統"
 };
 export { zh_Hant_default as default };

package/dist/package.js

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

package/dist/testing/recordingCanvas.js

@@ -12,7 +12,8 @@ var createRecordingCanvasFactory = () => {
 		const canvas = {
 			width,
 			height,
-			getContext: () => ctx
+			getContext: () => ctx,
+			convertToBlob: async ({ type = "image/png" } = {}) => new Blob([], { type })
 		};
 		created.push({
 			canvas,

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
@@ -45,8 +52,8 @@ export declare class PcElement extends LitElement {
     translations: Translations;
     /** The icons the element shows */
     icons: IconRegistry;
-    /** "light" (default), "dark", or "auto" to follow the device (see the design tokens) */
-    theme?: "light" | "dark" | "auto";
+    /** "light", "dark", or "system" to follow the device (see the design tokens). Without one, it has its ancestors' theme. */
+    theme?: "light" | "dark" | "system";
     /** The translations and icons being listened to */
     private watched;
     private readonly onSourceChange;

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/dismiss/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Note that a press closed a panel or menu (by landing outside it), so what it landed on can treat it differently, e.g.
+ * the canvas only draws once it's dragged (see `isDismissingPress`). Call it from a capturing `pointerdown` listener,
+ * which runs before the listeners of what was pressed.
+ *
+ * @example
+ * document.addEventListener("pointerdown", (event) => {
+ *   if (open && !event.composedPath().includes(panel)) {
+ *     markDismissingPress(event);
+ *     close();
+ *   }
+ * }, true);
+ */
+export declare const markDismissingPress: (event: Event) => void;
+/**
+ * Whether a press closed a panel or menu (see `markDismissingPress`).
+ *
+ * @example
+ * if (isDismissingPress(event)) return; // just closing something
+ */
+export declare const isDismissingPress: (event: Event) => boolean;

package/dist/ui/dismiss/index.js

@@ -0,0 +1,27 @@
+// src/ui/dismiss/index.ts
+/** Presses that closed a panel or menu by landing outside it */
+var dismissingPresses = /* @__PURE__ */ new WeakSet();
+/**
+* Note that a press closed a panel or menu (by landing outside it), so what it landed on can treat it differently, e.g.
+* the canvas only draws once it's dragged (see `isDismissingPress`). Call it from a capturing `pointerdown` listener,
+* which runs before the listeners of what was pressed.
+*
+* @example
+* document.addEventListener("pointerdown", (event) => {
+*   if (open && !event.composedPath().includes(panel)) {
+*     markDismissingPress(event);
+*     close();
+*   }
+* }, true);
+*/
+var markDismissingPress = (event) => {
+	dismissingPresses.add(event);
+};
+/**
+* Whether a press closed a panel or menu (see `markDismissingPress`).
+*
+* @example
+* if (isDismissingPress(event)) return; // just closing something
+*/
+var isDismissingPress = (event) => dismissingPresses.has(event);
+export { isDismissingPress, markDismissingPress };

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

@@ -0,0 +1,51 @@
+/** How far (in pixels) a press must move before it counts as a drag, where a press can also be a tap */
+export declare const DRAG_THRESHOLD = 4;
+/** A pointer position in the viewport */
+interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * How much a pointer moved between two points as one value: right and up are positive, left and down negative.
+ *
+ * @example
+ * dragDelta({ x: 0, y: 0 }, { x: 5, y: -5 }); // 10
+ */
+export declare const dragDelta: (from: Point, to: Point) => number;
+/**
+ * Turns pressing and dragging on an element into changes of a value: dragging right or up gives positive deltas, left
+ * or down negative ones (see `dragDelta`), in whole pixels (keeping any fraction for the next move). With a `threshold`, the press only becomes a drag once the pointer has moved
+ * that far from where it was pressed, so a press that barely moves can still be a tap (e.g. to focus a field).
+ *
+ * The element is given the pointer while dragging, so the drag carries on outside it.
+ *
+ * @example
+ * const drag = new PointerDrag((delta) => brush.resize(delta));
+ * html`<div @pointerdown=${drag.start} @pointermove=${drag.move} @pointerup=${drag.end} @pointercancel=${drag.end}></div>`
+ */
+export declare class PointerDrag {
+    private readonly onDelta;
+    private readonly threshold;
+    /** Where the press started */
+    private origin;
+    /** The last position a delta was given from, once dragging */
+    private last;
+    /** Movement not yet given, under a whole pixel (pens can move by fractions of a pixel) */
+    private remainder;
+    constructor(onDelta: (delta: number) => void, threshold?: number);
+    /** Whether the press has become a drag */
+    get dragging(): boolean;
+    /**
+     * Start a press (on `pointerdown`).
+     */
+    readonly start: (event: PointerEvent) => void;
+    /**
+     * Give the change since the last move, once the press has become a drag (on `pointermove`).
+     */
+    readonly move: (event: PointerEvent) => void;
+    /**
+     * End the press (on `pointerup` or `pointercancel`). Returns whether it was a drag.
+     */
+    readonly end: () => boolean;
+}
+export {};

package/dist/ui/drag/index.js

@@ -0,0 +1,81 @@
+// src/ui/drag/index.ts
+/** How far (in pixels) a press must move before it counts as a drag, where a press can also be a tap */
+var DRAG_THRESHOLD = 4;
+/**
+* How much a pointer moved between two points as one value: right and up are positive, left and down negative.
+*
+* @example
+* dragDelta({ x: 0, y: 0 }, { x: 5, y: -5 }); // 10
+*/
+var dragDelta = (from, to) => to.x - from.x + (from.y - to.y);
+/**
+* Turns pressing and dragging on an element into changes of a value: dragging right or up gives positive deltas, left
+* or down negative ones (see `dragDelta`), in whole pixels (keeping any fraction for the next move). With a `threshold`, the press only becomes a drag once the pointer has moved
+* that far from where it was pressed, so a press that barely moves can still be a tap (e.g. to focus a field).
+*
+* The element is given the pointer while dragging, so the drag carries on outside it.
+*
+* @example
+* const drag = new PointerDrag((delta) => brush.resize(delta));
+* html`<div @pointerdown=${drag.start} @pointermove=${drag.move} @pointerup=${drag.end} @pointercancel=${drag.end}></div>`
+*/
+var PointerDrag = class {
+	onDelta;
+	threshold;
+	/** Where the press started */
+	origin = null;
+	/** The last position a delta was given from, once dragging */
+	last = null;
+	/** Movement not yet given, under a whole pixel (pens can move by fractions of a pixel) */
+	remainder = 0;
+	constructor(onDelta, threshold = 0) {
+		this.onDelta = onDelta;
+		this.threshold = threshold;
+	}
+	/** Whether the press has become a drag */
+	get dragging() {
+		return this.last !== null;
+	}
+	/**
+	* Start a press (on `pointerdown`).
+	*/
+	start = (event) => {
+		this.origin = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		this.last = this.threshold > 0 ? null : this.origin;
+		this.remainder = 0;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+	};
+	/**
+	* Give the change since the last move, once the press has become a drag (on `pointermove`).
+	*/
+	move = (event) => {
+		if (!this.origin) return;
+		const point = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (!this.last) {
+			if (Math.hypot(point.x - this.origin.x, point.y - this.origin.y) < this.threshold) return;
+			this.last = this.origin;
+			event.preventDefault();
+		}
+		const total = this.remainder + dragDelta(this.last, point);
+		const delta = Math.trunc(total);
+		this.remainder = total - delta;
+		this.last = point;
+		if (delta !== 0) this.onDelta(delta);
+	};
+	/**
+	* End the press (on `pointerup` or `pointercancel`). Returns whether it was a drag.
+	*/
+	end = () => {
+		const dragged = this.dragging;
+		this.origin = null;
+		this.last = null;
+		return dragged;
+	};
+};
+export { DRAG_THRESHOLD, PointerDrag, dragDelta };

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

@@ -5,8 +5,8 @@ import type { BrushConfig } from "../../../lib/brushes/types";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 import { type InputKind, type LayoutState } from "../../layout";
 import "../PcPanel";
-import "../PcToolbar";
 import "../PcToolSettings";
+import "../PcClipboardTools";
 import "../PcCanvas";
 import "../PcCanvasMap";
 import "../PcPanelBrushes";
@@ -20,8 +20,10 @@ import "../PcDialog";
  * window), with slots to add or replace content:
  *
  * - `header`: across the top (empty by default)
- * - `left`: `<pc-toolbar>` (a pane) by default
- * - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) by default
+ * - `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
  * - `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
@@ -35,8 +37,9 @@ import "../PcDialog";
  *
  * 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
- * column of buttons (one per panel) that open each panel over the canvas; or `floating`, the pane over the canvas as a
- * box that collapses to a button. Give side content in a `<pc-pane>` to have it follow the side's mode.
+ * 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.
  *
  * Reports its state for styling as attributes (`narrow`, `input="pen|touch|mouse"`, `ui-hidden`, `left-mode`,
  * `right-mode`) and as `pc-state-change` events (see `LayoutState`). Creates its own canvas unless given one, and
@@ -46,8 +49,8 @@ import "../PcDialog";
  * reloading the page (see `LayerAutosave`). While another window is drawing on it, the layout is blocked by a message
  * 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 and
- * colours) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
+ * 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.
  *
  * @example
  * html`<paint-canvas style="height: 600px"></paint-canvas>`
@@ -163,7 +166,7 @@ export declare class PaintCanvasElement extends PcElement {
     private keys?;
     /** The state last reported, to report only changes */
     private reported?;
-    /** Space the floating sides cover over the canvas */
+    /** Space the floating and overlay sides cover over the canvas */
     private floatingInsets;
     private readonly resizeObserver?;
     private readonly onPointerDown;
@@ -185,9 +188,9 @@ export declare class PaintCanvasElement extends PcElement {
     protected updated(): void;
     /** The panes in a side: the default one, or those given for it */
     private panesIn;
-    /** Show each side's panes in the side's mode, facing the canvas */
+    /** Show each side's panes in the side's mode, facing the canvas, with toolbars minimised while the layout is narrow */
     private setPaneModes;
-    /** Keep the canvas clear of floating sides when fitting it */
+    /** Keep the canvas clear of floating and overlay sides when fitting it */
     private measureFloatingSides;
     /**
      * Keep the canvas's layers under the `store` name, replacing an autosave the layout started earlier (also on the
@@ -238,9 +241,11 @@ export declare class PaintCanvasElement extends PcElement {
     /** A side: its panes, in its mode (set on them after rendering) */
     private renderSide;
     /**
-     * Close the colour palette on a press outside it and the colours that open it.
+     * Close the open panel (brush, eraser, layers, app menu or colour palette) on a press outside it and the button that
+     * opens it, marking the press (see `markDismissingPress`) so the canvas doesn't draw unless it's dragged. Presses in
+     * dialogs (e.g. one the panel opened) don't count as outside.
      */
-    private closePaletteOutside;
+    private closePanelOutside;
     /** The menus the toolbar opens, floating over the canvas beside it */
     private renderPanels;
     /** The brush configuration window, while open */