@lvl99dotcom/paintcanvas 0.4.0 → 0.5.0

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 */

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

@@ -1,5 +1,6 @@
 import style_default from "./style.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import { markDismissingPress } from "../../dismiss/index.js";
 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";
@@ -13,7 +14,8 @@ import { DEFAULT_SIDE_MODES, STATE_EVENT, parseSideModes, sideModeFor } from "..
 import { hasToolSettings } from "../PcToolSettings/index.js";
 import "../PcPanel/index.js";
 import { PANE_COLLAPSE_EVENT, PcPane } from "../PcPane/index.js";
-import "../PcToolbar/index.js";
+import { PcToolbar } from "../PcToolbar/index.js";
+import "../PcClipboardTools/index.js";
 import "../PcCanvas/index.js";
 import "../PcCanvasMap/index.js";
 import "../PcPanelBrushes/index.js";
@@ -40,8 +42,10 @@ var TAKE_OVER_CHOICE = "take-over";
 * 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
@@ -55,8 +59,9 @@ var TAKE_OVER_CHOICE = "take-over";
 *
 * 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
@@ -66,8 +71,8 @@ var TAKE_OVER_CHOICE = "take-over";
 * 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>`
@@ -137,7 +142,7 @@ var PaintCanvasElement = class extends PcElement {
 	keys;
 	/** The state last reported, to report only changes */
 	reported;
-	/** Space the floating sides cover over the canvas */
+	/** Space the floating and overlay sides cover over the canvas */
 	floatingInsets = NO_INSETS;
 	resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(([entry]) => {
 		this.width = Math.round(entry?.contentRect.width ?? 0);
@@ -157,7 +162,7 @@ var PaintCanvasElement = class extends PcElement {
 	onShortcut = (event) => {
 		if (event.detail.type === "save") this.saveScreenshot();
 	};
-	onDocumentPointerDown = (event) => this.closePaletteOutside(event.composedPath());
+	onDocumentPointerDown = (event) => this.closePanelOutside(event);
 	onPaneCollapse = () => this.requestUpdate();
 	constructor() {
 		super();
@@ -233,16 +238,18 @@ var PaintCanvasElement = class extends PcElement {
 		const given = slot.assignedElements();
 		return (given.length ? given : [...slot.children]).filter((element) => element instanceof PcPane);
 	}
-	/** 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 */
 	setPaneModes() {
+		const narrow = this.width < this.narrowWidth;
 		for (const side of SIDES) for (const pane of this.panesIn(side)) {
 			pane.mode = this.modeOf(side);
 			pane.edge = side;
+			if (pane instanceof PcToolbar) pane.minimised = narrow;
 		}
 	}
-	/** Keep the canvas clear of floating sides when fitting it */
+	/** Keep the canvas clear of floating and overlay sides when fitting it */
 	measureFloatingSides() {
-		const width = (side) => this.panesIn(side).filter((pane) => pane.mode === "floating" && !pane.collapsed).reduce((widest, pane) => Math.max(widest, pane.getBoundingClientRect().width), 0);
+		const width = (side) => this.panesIn(side).filter((pane) => pane.mode === "floating" ? !pane.collapsed : pane.mode === "overlay").reduce((widest, pane) => Math.max(widest, pane.getBoundingClientRect().width), 0);
 		const insets = {
 			...NO_INSETS,
 			left: width("left"),
@@ -419,12 +426,16 @@ var PaintCanvasElement = class extends PcElement {
     </div>`;
 	}
 	/**
-	* 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.
 	*/
-	closePaletteOutside(path) {
-		const app = this.app;
-		if (app?.panel !== Panel.Palette) return;
-		if (!path.some((target) => target instanceof Element && (target.localName === "pc-panel-colours" || target.localName === "pc-colour-pair"))) app.closePanel();
+	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;
+		markDismissingPress(event);
+		this.app.closePanel();
 	}
 	/** The menus the toolbar opens, floating over the canvas beside it */
 	renderPanels(app) {
@@ -502,11 +513,17 @@ var PaintCanvasElement = class extends PcElement {
                   .app=${app}
                   @pc-configure-brush=${(event) => this.configure(event.detail)}
                 ></pc-tool-settings
+                ><pc-clipboard-tools
+                  slot="end"
+                  .app=${app}
+                  ?narrow=${this.width < this.narrowWidth}
+                ></pc-clipboard-tools
               ></pc-pane>` : nothing)}
       </div>
       <div
         class="center"
         part="center"
+        style="--pc-left-inset: ${this.floatingInsets.left}px"
         role="region"
         aria-label=${this.t("paintCanvas.layout.canvas")}
         ?inert=${blocked}

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/* 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/* While another window is drawing, its message covers only the layout (not the whole page) */\npc-dialog.elsewhere {\n  position: absolute;\n}\n";
 export { style_default as default };

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

@@ -6,7 +6,7 @@ import { type SaveMethod } from "../../../lib/rendering/screenshot";
 /**
  * Buttons for the user's app settings: "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 and colours). The window is a modal `<dialog>` above the whole page; it
+ * 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.
  *

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

@@ -14,7 +14,7 @@ var SETTINGS_FILE_ERROR_KEYS = {
 /**
 * Buttons for the user's app settings: "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 and colours). The window is a modal `<dialog>` above the whole page; it
+* 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.
 *

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

@@ -23,7 +23,8 @@ export declare const SMOOTHING_CHOICES: readonly [{
     readonly icon: "smoothingBezierCubic";
 }];
 /**
- * The brush (or eraser) configuration window: a testing area, the shape (upload or paste), smoothing, width, height,
+ * The brush (or eraser) configuration window: a testing area, the shape (pressing it picks a built-in shape from the
+ * device's own list, which says "Custom" for an uploaded or pasted one; or upload or paste one), smoothing, width, height,
  * opacity, rotation, offsets, sample rate, spacing and snapping to the pixel grid. Width, height, opacity, rotation and the offsets can vary with
  * pressure, tilt and randomness; when any is on, the setting has a min and max.
  *
@@ -82,7 +83,9 @@ export declare class PcBrushConfig extends PcElement {
     prompt: PromptFn;
     /** Turns files into brush shapes (replaceable for tests) */
     readShape: (file: File) => Promise<ShapeImage>;
-    /** Reads a brush shape from the clipboard (replaceable for tests) */
+    /**
+     * Reads a brush shape from the clipboard, or else from image data copied on the canvas (replaceable for tests)
+     */
     readClipboard: () => Promise<ShapeImage>;
     private readonly onKeyDown;
     constructor();
@@ -124,6 +127,10 @@ export declare class PcBrushConfig extends PcElement {
     private slider;
     /** Render a setting that can vary: its value (or min and max), and its pressure, tilt and randomise icon toggles */
     private renderParam;
+    /**
+     * Use a built-in shape (see `BUILT_IN_SHAPES`), keeping the width; they're all square, so the height is the same.
+     */
+    private useBuiltInShape;
     /** Render the shape and smoothing row */
     private renderShape;
     render(): import("lit").TemplateResult<1> | typeof nothing;

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

@@ -6,8 +6,10 @@ import "../PcBrushTest/index.js";
 import { SmoothingType } from "../../../lib/brushes/types/index.js";
 import { PARAM_LIMITS, VARIATION_SOURCES, readRange, toggleSource, writeRange } from "../../../lib/brushes/configRanges/index.js";
 import { SHAPE_ERRORS, ShapeImageError, readClipboardShape, readShapeImage } from "../../../lib/brushes/shapeImage/index.js";
+import { BUILT_IN_SHAPES, builtInShapeId } from "../../../lib/brushes/shapes/index.js";
 import "../../../lib/brushes/StrokeSampler/index.js";
 import { html, nothing, unsafeCSS } from "lit";
+import { live } from "lit/directives/live.js";
 import { styleMap } from "lit/directives/style-map.js";
 // src/ui/elements/PcBrushConfig/index.ts
 /** The smoothing choices, in the order shown: value, translation key of the name, and icon name */
@@ -40,6 +42,8 @@ var SOURCE_LABELS = {
 	tilt: "paintCanvas.toolSettings.tilt",
 	randomise: "paintCanvas.brushConfig.randomise"
 };
+/** The shape picker's value for a shape the user uploaded or pasted */
+var CUSTOM_SHAPE = "custom";
 /** Translation keys of the brush shape error messages */
 var SHAPE_ERROR_KEYS = {
 	[SHAPE_ERRORS.type]: "paintCanvas.shape.notPng",
@@ -55,7 +59,8 @@ var numberValue = (event) => {
 	return Number.isFinite(value) ? value : void 0;
 };
 /**
-* The brush (or eraser) configuration window: a testing area, the shape (upload or paste), smoothing, width, height,
+* The brush (or eraser) configuration window: a testing area, the shape (pressing it picks a built-in shape from the
+* device's own list, which says "Custom" for an uploaded or pasted one; or upload or paste one), smoothing, width, height,
 * opacity, rotation, offsets, sample rate, spacing and snapping to the pixel grid. Width, height, opacity, rotation and the offsets can vary with
 * pressure, tilt and randomness; when any is on, the setting has a min and max.
 *
@@ -88,8 +93,10 @@ var PcBrushConfig = class extends PcElement {
 	prompt = (message, value) => window.prompt(message, value);
 	/** Turns files into brush shapes (replaceable for tests) */
 	readShape = readShapeImage;
-	/** Reads a brush shape from the clipboard (replaceable for tests) */
-	readClipboard = () => readClipboardShape();
+	/**
+	* Reads a brush shape from the clipboard, or else from image data copied on the canvas (replaceable for tests)
+	*/
+	readClipboard = () => readClipboardShape(navigator.clipboard, {}, async () => this.app?.copiedPng());
 	onKeyDown = (event) => {
 		if (event.key === "Escape") this.close();
 	};
@@ -295,15 +302,48 @@ var PcBrushConfig = class extends PcElement {
           </label>`)}
     </div>`;
 	}
+	/**
+	* Use a built-in shape (see `BUILT_IN_SHAPES`), keeping the width; they're all square, so the height is the same.
+	*/
+	useBuiltInShape(id) {
+		const shape = BUILT_IN_SHAPES.find((built) => built.id === id);
+		if (!shape) return;
+		const width = this.draft?.width ?? 1;
+		this.change({
+			image: shape.image,
+			height: width
+		});
+	}
 	/** Render the shape and smoothing row */
 	renderShape(draft) {
+		const shapeId = builtInShapeId(draft.image);
 		const smoothing = draft.smoothingType === SmoothingType.None || draft.smoothingType === void 0 ? SmoothingType.Linear : draft.smoothingType;
 		return html`<div class="row shape-row">
       <span class="label">${this.t("paintCanvas.brushConfig.shape")}</span>
-      <span
-        class=${draft.image ? "shape-preview image" : "shape-preview"}
-        style=${styleMap({ maskImage: typeof draft.image === "string" ? `url("${draft.image}")` : void 0 })}
-      ></span>
+      <span class="shape-picker">
+        <span
+          class=${draft.image ? "shape-preview image" : "shape-preview"}
+          style=${styleMap({ maskImage: typeof draft.image === "string" ? `url("${draft.image}")` : void 0 })}
+        ></span>
+        <!-- Over the shape, so pressing it opens the device's own list -->
+        <select
+          class="shape-select"
+          aria-label=${this.t("paintCanvas.brushConfig.shape")}
+          title=${this.t("paintCanvas.brushConfig.chooseShape")}
+          ?disabled=${this.busy}
+          @change=${(e) => this.useBuiltInShape(e.target.value)}
+        >
+          ${shapeId === void 0 ? html`<option value=${CUSTOM_SHAPE} .selected=${true}>
+                  ${this.t("paintCanvas.brushConfig.customShape")}
+                </option>` : nothing}
+          ${BUILT_IN_SHAPES.map((shape) => html`<option
+                value=${shape.id}
+                .selected=${live(shape.id === shapeId)}
+              >
+                ${shape.name}
+              </option>`)}
+        </select>
+      </span>
       <button
         type="button"
         class="pill upload"

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcBrushConfig/style.css?inline
-var style_default = ":host {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--pc-backdrop);\n}\n[role=\"dialog\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: min(560px, 95vw);\n  max-height: 95vh;\n  overflow: auto;\n  padding: 8px;\n  background: var(--pc-surface);\n}\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n}\n.row > .label {\n  width: 6em;\n}\ninput[type=\"number\"] {\n  width: 4.5em;\n}\ninput[type=\"range\"] {\n  flex: 1;\n  min-width: 60px;\n}\n.shape-preview {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape-preview.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n/* The name, with \"Close\" on the right */\n.header .close {\n  margin-left: auto;\n}\n/* The shape (preview, Upload and Paste) and the smoothing icons on one row */\n.shape-row {\n  flex-wrap: nowrap;\n}\n.shape-row .shape-preview {\n  flex: none;\n}\nfieldset.smoothing {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin: 0 0 0 auto;\n  padding: 0;\n  border: 0;\n}\nfieldset.smoothing legend {\n  float: left;\n  margin-right: 4px;\n  padding: 0;\n}\n";
+var style_default = ":host {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--pc-backdrop);\n}\n[role=\"dialog\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: min(560px, 95vw);\n  max-height: 95vh;\n  overflow: auto;\n  padding: 8px;\n  background: var(--pc-surface);\n}\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n}\n.row > .label {\n  width: 6em;\n}\ninput[type=\"number\"] {\n  width: 4.5em;\n}\ninput[type=\"range\"] {\n  flex: 1;\n  min-width: 60px;\n}\n.shape-preview {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape-preview.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n/* The name, with \"Close\" on the right */\n.header .close {\n  margin-left: auto;\n}\n/* The shape (preview, Upload and Paste) and the smoothing icons on one row */\n.shape-row {\n  flex-wrap: nowrap;\n}\n/* The shape, with an invisible list over it: pressing the shape opens the device's own list of shapes */\n.shape-picker {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  border-radius: var(--pc-radius-small);\n}\n.shape-picker:hover {\n  background: var(--pc-surface-hover);\n}\n.shape-picker:focus-within {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.shape-select {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\nfieldset.smoothing {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin: 0 0 0 auto;\n  padding: 0;\n  border: 0;\n}\nfieldset.smoothing legend {\n  float: left;\n  margin-right: 4px;\n  padding: 0;\n}\n";
 export { style_default as default };

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

@@ -0,0 +1,53 @@
+import { nothing } from "lit";
+import { PcElement } from "../../base";
+import "../PcNumberSlider";
+import { type default as BrushSettings } from "../../../lib/classes/BrushSettings";
+/**
+ * A brush's size as text: one number when the width and height are the same, otherwise "width × height".
+ *
+ * @example
+ * sizeText({ width: 20, height: 20 }); // "20"
+ * sizeText({ width: 30, height: 10 }); // "30 × 10"
+ */
+export declare const sizeText: ({ width, height, }: {
+    width: number;
+    height: number;
+}) => string;
+/**
+ * A brush or eraser's size, as a `pc-number-slider`: pressed and dragged right or up it gets bigger, left or down
+ * smaller, keeping its proportions (see `BrushSettings.resize`). Tapping it lets you type the larger side's size. With
+ * keyboard focus, the arrow keys change it by a pixel and Page Up and Page Down by a step (like `]` and `[`).
+ *
+ * @example
+ * html`<pc-brush-size .settings=${app.brush} label="Brush size"></pc-brush-size>`
+ */
+export declare class PcBrushSize extends PcElement {
+    static properties: {
+        settings: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The brush or eraser settings it shows and changes */
+    settings?: BrushSettings;
+    /** Its name for screen readers, e.g. "Brush size" */
+    label: string;
+    private changes;
+    constructor();
+    /** Resize to the slider's value (the larger side), keeping the proportions */
+    private onChange;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}