@lvl99dotcom/paintcanvas 0.5.0 → 0.7.0

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

@@ -1,14 +1,17 @@
 import { PcElement } from "../../base";
+import { type PillSize } from "../../styles";
 import "../PcIcon";
 /** How a button looks */
 export type ButtonVariant = "accent" | "cancel" | "dismiss" | "pill" | "icon";
 /**
- * A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a small pill
- * (`pill`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its content.
- * Clicks reach listeners on the element; a disabled button sends none.
+ * A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a pill (`pill`,
+ * the same as `accent`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its
+ * content. All but icon buttons are pills, of the `size` given (`pill` by default; see `PILL_SIZE_STYLES`). Clicks
+ * reach listeners on the element; a disabled button sends none.
  *
  * @example
  * html`<pc-button variant="cancel" @click=${close}>Cancel</pc-button>`
+ * html`<pc-button size="pill-l">Start</pc-button>`
  * html`<pc-button variant="icon" icon="undo" label="Undo"></pc-button>`
  */
 export declare class PcButton extends PcElement {
@@ -17,6 +20,10 @@ export declare class PcButton extends PcElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         icon: {
             type: StringConstructor;
         };
@@ -43,6 +50,8 @@ export declare class PcButton extends PcElement {
     };
     static styles: import("lit").CSSResultGroup[];
     variant: ButtonVariant;
+    /** How big the pill is (not for icon buttons) */
+    size: PillSize;
     /** Name of an icon to show before the text (or alone, for an icon button) */
     icon?: string;
     /** The button's name for screen readers, when its content doesn't say it (e.g. an icon button) */

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

@@ -1,14 +1,19 @@
 import { PcElement, defineElement } from "../../base/index.js";
+import { PILL_SIZES, pillSizeDeclarations } from "../../styles/index.js";
 import "../PcIcon/index.js";
-import { css, html, nothing } from "lit";
+import { css, html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcButton/index.ts
+/** Each pill size, for the buttons that are pills (all but icon buttons) */
+var SIZE_STYLES = unsafeCSS(PILL_SIZES.map((size) => `:host([size="${size}"]) button { ${pillSizeDeclarations(size)} }`).join("\n"));
 /**
-* A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a small pill
-* (`pill`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its content.
-* Clicks reach listeners on the element; a disabled button sends none.
+* A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a pill (`pill`,
+* the same as `accent`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its
+* content. All but icon buttons are pills, of the `size` given (`pill` by default; see `PILL_SIZE_STYLES`). Clicks
+* reach listeners on the element; a disabled button sends none.
 *
 * @example
 * html`<pc-button variant="cancel" @click=${close}>Cancel</pc-button>`
+* html`<pc-button size="pill-l">Start</pc-button>`
 * html`<pc-button variant="icon" icon="undo" label="Undo"></pc-button>`
 */
 var PcButton = class extends PcElement {
@@ -18,6 +23,10 @@ var PcButton = class extends PcElement {
 			type: String,
 			reflect: true
 		},
+		size: {
+			type: String,
+			reflect: true
+		},
 		icon: { type: String },
 		label: { type: String },
 		disabled: {
@@ -38,9 +47,8 @@ var PcButton = class extends PcElement {
         flex: 1;
         align-items: center;
         justify-content: center;
+        box-sizing: border-box;
         gap: var(--pc-space-1);
-        min-height: var(--pc-control-size);
-        padding: var(--pc-space-1) var(--pc-space-3);
         border: 0;
         /* A joined button group gives each button its corners */
         border-radius: var(--pc-group-radius, var(--pc-radius-pill));
@@ -48,10 +56,11 @@ var PcButton = class extends PcElement {
         color: var(--pc-accent-text);
         font: inherit;
         font-family: var(--pc-font);
-        font-size: var(--pc-font-size);
+        ${unsafeCSS(pillSizeDeclarations("pill"))}
         font-weight: bold;
         cursor: pointer;
       }
+      ${SIZE_STYLES}
       button:hover:not(:disabled) {
         filter: brightness(1.15);
       }
@@ -76,12 +85,10 @@ var PcButton = class extends PcElement {
         filter: none;
         text-decoration: underline;
       }
-      :host([variant="pill"]) button {
-        min-height: 30px;
-      }
       :host([variant="icon"]) button {
         min-height: 0;
         padding: 2px;
+        line-height: normal;
         border: 1px solid var(--pc-border);
         border-radius: var(--pc-group-radius, var(--pc-radius-small));
         background: var(--pc-surface);
@@ -101,6 +108,7 @@ var PcButton = class extends PcElement {
 	constructor() {
 		super();
 		this.variant = "accent";
+		this.size = "pill";
 		this.disabled = false;
 	}
 	/** Move keyboard focus to the button */

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

@@ -0,0 +1,88 @@
+import { PcElement } from "../../base";
+import { type PillSize } from "../../styles";
+import type { MenuItem } from "../PcMenu";
+import "../PcContextMenu";
+/** An action in a button menu: what `pc-select` gives, its label and whether it can be done now */
+export type ButtonMenuItem = Pick<MenuItem, "value" | "label" | "disabled">;
+/**
+ * Whether the window is narrower than a width (CSS pixels). False without a width or `matchMedia`.
+ *
+ * @example
+ * isNarrowerThan(900); // true in a 600px-wide window
+ */
+export declare const isNarrowerThan: (width: number | undefined, matchMedia?: ((query: string) => {
+    matches: boolean;
+}) | undefined) => boolean;
+/**
+ * A row of pill buttons for actions, which can become one ⋮ menu (`pc-context-menu`): while `menu` is set, or while the
+ * window is narrower than `menu-below` (CSS pixels; only when set). Fires `pc-select` (detail: `{ value }`) when an
+ * action is chosen either way.
+ *
+ * @example
+ * html`<pc-button-menu label="More actions" menu-below="900" size="pill-s"
+ *   .items=${[{ value: "cut", label: "Cut" }, { value: "paste", label: "Paste", disabled: true }]}
+ *   @pc-select=${(e) => run(e.detail.value)}></pc-button-menu>`
+ */
+export declare class PcButtonMenu extends PcElement {
+    static properties: {
+        items: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+        };
+        menu: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        menuBelow: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        narrowWindow: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The actions, in order */
+    items: ButtonMenuItem[];
+    /** What the ⋮ button is called (e.g. "More actions") */
+    label: string;
+    /** The buttons' pill size (`pill` by default) */
+    size: PillSize;
+    /** Whether the actions are always one ⋮ menu */
+    menu: boolean;
+    /** Window width (CSS pixels) below which the actions are one ⋮ menu; none by default */
+    menuBelow?: number;
+    /** Whether the window is narrower than `menuBelow` */
+    narrowWindow: boolean;
+    /** Follows the window's width while `menuBelow` is set */
+    private query?;
+    private readonly onQueryChange;
+    constructor();
+    /** Whether the actions show as one ⋮ menu now */
+    get showsMenu(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    /** Follow whether the window is narrower than `menuBelow` (when set and the browser can tell) */
+    private watchWidth;
+    /** Stop following the window's width */
+    private stopWatchingWidth;
+    /** Tell listeners an action was chosen */
+    private select;
+    render(): import("lit").TemplateResult<1> | import("lit").TemplateResult<1>[];
+}

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

@@ -0,0 +1,125 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { PILLS_CSS } from "../../styles/index.js";
+import "../PcContextMenu/index.js";
+import { css, html, unsafeCSS } from "lit";
+// src/ui/elements/PcButtonMenu/index.ts
+/**
+* Whether the window is narrower than a width (CSS pixels). False without a width or `matchMedia`.
+*
+* @example
+* isNarrowerThan(900); // true in a 600px-wide window
+*/
+var isNarrowerThan = (width, matchMedia = typeof window.matchMedia === "function" ? (query) => window.matchMedia(query) : void 0) => width !== void 0 && width > 0 && matchMedia !== void 0 && matchMedia(`(width < ${width}px)`).matches;
+/**
+* A row of pill buttons for actions, which can become one ⋮ menu (`pc-context-menu`): while `menu` is set, or while the
+* window is narrower than `menu-below` (CSS pixels; only when set). Fires `pc-select` (detail: `{ value }`) when an
+* action is chosen either way.
+*
+* @example
+* html`<pc-button-menu label="More actions" menu-below="900" size="pill-s"
+*   .items=${[{ value: "cut", label: "Cut" }, { value: "paste", label: "Paste", disabled: true }]}
+*   @pc-select=${(e) => run(e.detail.value)}></pc-button-menu>`
+*/
+var PcButtonMenu = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		items: { attribute: false },
+		label: { type: String },
+		size: { type: String },
+		menu: {
+			type: Boolean,
+			reflect: true
+		},
+		menuBelow: {
+			type: Number,
+			attribute: "menu-below"
+		},
+		narrowWindow: { state: true }
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(PILLS_CSS),
+		css`
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--pc-space-2);
+      }
+      :host([hidden]) {
+        display: none;
+      }
+    `
+	];
+	/** Follows the window's width while `menuBelow` is set */
+	query;
+	onQueryChange = (event) => {
+		this.narrowWindow = event.matches;
+	};
+	constructor() {
+		super();
+		this.items = [];
+		this.label = "";
+		this.size = "pill";
+		this.menu = false;
+		this.narrowWindow = false;
+	}
+	/** Whether the actions show as one ⋮ menu now */
+	get showsMenu() {
+		return this.menu || this.narrowWindow;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.watchWidth();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.stopWatchingWidth();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("menuBelow") && this.isConnected) this.watchWidth();
+	}
+	/** Follow whether the window is narrower than `menuBelow` (when set and the browser can tell) */
+	watchWidth() {
+		this.stopWatchingWidth();
+		this.narrowWindow = isNarrowerThan(this.menuBelow);
+		if (!this.menuBelow || typeof window.matchMedia !== "function") return;
+		this.query = window.matchMedia(`(width < ${this.menuBelow}px)`);
+		this.query.addEventListener?.("change", this.onQueryChange);
+	}
+	/** Stop following the window's width */
+	stopWatchingWidth() {
+		this.query?.removeEventListener?.("change", this.onQueryChange);
+		this.query = void 0;
+	}
+	/** Tell listeners an action was chosen */
+	select(value) {
+		emit(this, "pc-select", { value });
+	}
+	render() {
+		if (this.showsMenu) return html`<pc-context-menu
+        class="more"
+        label=${this.label}
+        .items=${this.items.map(({ value, label, disabled }) => ({
+			value,
+			label,
+			disabled
+		}))}
+        @pc-select=${(event) => {
+			event.stopPropagation();
+			this.select(event.detail.value);
+		}}
+      ></pc-context-menu>`;
+		return this.items.map(({ value, label, disabled }) => html`<button
+          type="button"
+          class="${this.size} ${value}"
+          data-value=${value}
+          ?disabled=${disabled}
+          @click=${() => this.select(value)}
+        >
+          ${label}
+        </button>`);
+	}
+};
+defineElement("pc-button-menu", PcButtonMenu);
+export { PcButtonMenu, isNarrowerThan };

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

@@ -15,6 +15,8 @@ export declare const HANDLE_GRAB_DISTANCE = 8;
 export declare const ANTS_INTERVAL = 100;
 /** In focus pen mode, how long after a pen lifts touches are still ignored (milliseconds) */
 export declare const PEN_LIFT_GRACE_MS = 500;
+/** The most device pixels per CSS pixel the canvases on screen use (see `PcCanvas.pixelRatio`) */
+export declare const MAX_PIXEL_RATIO = 2;
 /**
  * Space covered by the toolbar and chat on a screen of the given width.
  *
@@ -92,7 +94,10 @@ export declare class PcCanvas extends PcElement {
     insets?: Insets;
     /** The insets in effect (see `insets`) */
     private get activeInsets();
-    /** Device pixels per CSS pixel (replaceable for tests) */
+    /**
+     * Device pixels per CSS pixel for the canvases on screen, at most `MAX_PIXEL_RATIO`: phones with 3 have 2.25 times
+     * the pixels to draw and put on screen for little visible difference (replaceable for tests).
+     */
     pixelRatio: () => number;
     private changes;
     /** Whether anything but the stroke in progress changed since the last update (so everything is redrawn) */
@@ -116,6 +121,8 @@ export declare class PcCanvas extends PcElement {
     private antsOffset;
     /** Viewport that has been fitted once (so resizing doesn't refit) */
     private fittedViewport?;
+    /** The screen canvas whose 2D context has been made (see `prepareScene`) */
+    private preparedCanvas?;
     private frame;
     /** Animation frame drawing only the brush cursor, if requested */
     private overlayFrame;
@@ -163,6 +170,13 @@ export declare class PcCanvas extends PcElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
+    /**
+     * Make a new screen canvas's 2D context where the app's canvases draw (see `PaintCanvas.rendering`). Drawn from layers
+     * kept in regular memory (`cpu`), keeping the screen canvas there too means each frame copies only the area that
+     * changed, instead of sending whole layers to the GPU. The first context decides that; later `getContext("2d")` calls
+     * get this one, so the screen canvas is made again when the app's rendering differs (see `render`).
+     */
+    private prepareScene;
     /**
      * Note what changed: the stroke in progress (and the area it changed), or anything else.
      */

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

@@ -21,6 +21,7 @@ import "../../../lib/rendering/sample/index.js";
 import { gestureAction } from "../../../lib/utils/gestures/index.js";
 import { snapToPixelGrid } from "../../../lib/brushes/params/index.js";
 import { html, unsafeCSS } from "lit";
+import { keyed } from "lit/directives/keyed.js";
 // src/ui/elements/PcCanvas/index.ts
 /** Toolbar width in CSS pixels (kept clear when fitting the canvas) */
 var TOOLBAR_WIDTH = 50;
@@ -39,6 +40,8 @@ var HANDLE_GRAB_DISTANCE = 8;
 var ANTS_INTERVAL = 100;
 /** In focus pen mode, how long after a pen lifts touches are still ignored (milliseconds) */
 var PEN_LIFT_GRACE_MS = 500;
+/** The most device pixels per CSS pixel the canvases on screen use (see `PcCanvas.pixelRatio`) */
+var MAX_PIXEL_RATIO = 2;
 /**
 * Space covered by the toolbar and chat on a screen of the given width.
 *
@@ -131,8 +134,11 @@ var PcCanvas = class extends PcElement {
 		const app = this.app;
 		return this.insets ?? interfaceInsets(app.viewport.width, app.interfaceVisible);
 	}
-	/** Device pixels per CSS pixel (replaceable for tests) */
-	pixelRatio = () => window.devicePixelRatio || 1;
+	/**
+	* Device pixels per CSS pixel for the canvases on screen, at most `MAX_PIXEL_RATIO`: phones with 3 have 2.25 times
+	* the pixels to draw and put on screen for little visible difference (replaceable for tests).
+	*/
+	pixelRatio = () => Math.min(window.devicePixelRatio || 1, 2);
 	changes = new ChangeController(this, () => [
 		this.app,
 		this.app?.brush,
@@ -167,6 +173,8 @@ var PcCanvas = class extends PcElement {
 	antsOffset = 0;
 	/** Viewport that has been fitted once (so resizing doesn't refit) */
 	fittedViewport;
+	/** The screen canvas whose 2D context has been made (see `prepareScene`) */
+	preparedCanvas;
 	frame = 0;
 	/** Animation frame drawing only the brush cursor, if requested */
 	overlayFrame = 0;
@@ -242,6 +250,7 @@ var PcCanvas = class extends PcElement {
 		this.frame = 0;
 	}
 	firstUpdated() {
+		this.prepareScene();
 		if (typeof ResizeObserver !== "undefined") {
 			this.resizeObserver = new ResizeObserver(() => this.syncSize());
 			this.resizeObserver.observe(this);
@@ -249,6 +258,18 @@ var PcCanvas = class extends PcElement {
 		this.syncSize();
 	}
 	/**
+	* Make a new screen canvas's 2D context where the app's canvases draw (see `PaintCanvas.rendering`). Drawn from layers
+	* kept in regular memory (`cpu`), keeping the screen canvas there too means each frame copies only the area that
+	* changed, instead of sending whole layers to the GPU. The first context decides that; later `getContext("2d")` calls
+	* get this one, so the screen canvas is made again when the app's rendering differs (see `render`).
+	*/
+	prepareScene() {
+		const canvas = this.canvas;
+		if (!canvas || canvas === this.preparedCanvas) return;
+		this.preparedCanvas = canvas;
+		canvas.getContext("2d", { willReadFrequently: this.app?.rendering !== "gpu" });
+	}
+	/**
 	* Note what changed: the stroke in progress (and the area it changed), or anything else.
 	*/
 	sceneChanged(target) {
@@ -260,6 +281,7 @@ var PcCanvas = class extends PcElement {
 		} else if (!(this.committing && target === app?.layers)) this.fullChange = true;
 	}
 	updated(changed) {
+		this.prepareScene();
 		const resized = this.syncSize();
 		const onlyStroke = changed.size === 0 && !this.fullChange && !resized;
 		this.requestDraw(onlyStroke ? this.strokeArea : void 0);
@@ -884,6 +906,7 @@ var PcCanvas = class extends PcElement {
 		if (!ctx) return;
 		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 		const sampling = this.sampling;
+		this.sampler.hidden = !sampling;
 		if (!sampling) return;
 		const ratio = this.pixelRatio();
 		ctx.save();
@@ -1024,26 +1047,26 @@ var PcCanvas = class extends PcElement {
 		});
 	}
 	render() {
-		return html`<canvas
-        class="scene"
-        aria-label=${this.t("paintCanvas.canvas.label")}
-        @pointerdown=${this.onPointerDown}
-        @pointermove=${this.onPointerMove}
-        @pointerup=${this.onPointerUp}
-        @pointercancel=${this.onPointerCancel}
-        @touchstart=${this.onTouchStart}
-        @pointerleave=${this.onPointerLeave}
-        @wheel=${this.onWheel}
-        @gesturestart=${this.onGestureStart}
-        @gesturechange=${this.onGestureChange}
-        @gestureend=${(e) => e.preventDefault()}
-        @dblclick=${() => this.app?.applyLasso(this.app.lasso.close())}
-        @contextmenu=${(e) => e.preventDefault()}
-      ></canvas>
+		return html`${keyed(this.app?.rendering ?? "cpu", html`<canvas
+          class="scene"
+          aria-label=${this.t("paintCanvas.canvas.label")}
+          @pointerdown=${this.onPointerDown}
+          @pointermove=${this.onPointerMove}
+          @pointerup=${this.onPointerUp}
+          @pointercancel=${this.onPointerCancel}
+          @touchstart=${this.onTouchStart}
+          @pointerleave=${this.onPointerLeave}
+          @wheel=${this.onWheel}
+          @gesturestart=${this.onGestureStart}
+          @gesturechange=${this.onGestureChange}
+          @gestureend=${(e) => e.preventDefault()}
+          @dblclick=${() => this.app?.applyLasso(this.app.lasso.close())}
+          @contextmenu=${(e) => e.preventDefault()}
+        ></canvas>`)}
       <canvas class="outlines" aria-hidden="true"></canvas>
       <canvas class="overlay" aria-hidden="true"></canvas>
       <canvas class="sampler" aria-hidden="true"></canvas>`;
 	}
 };
 defineElement("pc-canvas", PcCanvas);
-export { ANTS_INTERVAL, CHAT_WIDTH_RATIO, HANDLE_GRAB_DISTANCE, LASSO_TOOLS, PEN_LIFT_GRACE_MS, PcCanvas, SAMPLER_HEIGHT, SAMPLER_WIDTH, TOOLBAR_WIDTH, TOUCH_SAMPLER_GAP, cursorFor, interfaceInsets, samplerPosition };
+export { ANTS_INTERVAL, CHAT_WIDTH_RATIO, HANDLE_GRAB_DISTANCE, LASSO_TOOLS, MAX_PIXEL_RATIO, PEN_LIFT_GRACE_MS, PcCanvas, SAMPLER_HEIGHT, SAMPLER_WIDTH, TOOLBAR_WIDTH, TOUCH_SAMPLER_GAP, cursorFor, interfaceInsets, samplerPosition };

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcCanvas/style.css?inline
-var style_default = ":host {\n  display: block;\n  position: absolute;\n  inset: 0;\n  touch-action: none;\n}\ncanvas {\n  display: block;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\ncanvas.outlines,\ncanvas.sampler {\n  pointer-events: none;\n}\ncanvas.overlay {\n  pointer-events: none;\n  /* Inverts what is underneath so the brush outline is visible on any colour */\n  mix-blend-mode: difference;\n}\n";
+var style_default = ":host {\n  display: block;\n  position: absolute;\n  inset: 0;\n  touch-action: none;\n}\ncanvas {\n  display: block;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\ncanvas[hidden] {\n  display: none;\n}\ncanvas.outlines,\ncanvas.sampler {\n  pointer-events: none;\n}\ncanvas.overlay {\n  pointer-events: none;\n  /* Inverts what is underneath so the brush outline is visible on any colour */\n  mix-blend-mode: difference;\n}\n";
 export { style_default as default };

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

@@ -1,13 +1,17 @@
 import { nothing } from "lit";
 import { PcElement } from "../../base";
 import PaintCanvas, { Tool } from "../../../lib/classes/PaintCanvas";
-import "../PcContextMenu";
+import "../PcButtonMenu";
 /** The tools that cut, copy and paste are shown for: the brush, eraser, lassos and Move tool */
 export declare const CLIPBOARD_TOOLS: readonly Tool[];
+/** Window width (CSS pixels) below which the clipboard tools are one ⋮ menu */
+export declare const CLIPBOARD_MENU_BELOW = 900;
 /**
- * Cut, copy and paste buttons for the canvas's masked image data, shown for the brush, eraser, lassos and Move tool
- * (see `CLIPBOARD_TOOLS`). Cut and copy work while there's a mask and no transform is pending; paste while there's
- * copied image data. While `narrow`, they're one ⋮ menu (`pc-context-menu`) instead.
+ * Cut, copy, copy merged and paste buttons for the canvas's masked image data, shown for the brush, eraser, lassos and
+ * Move tool (see `CLIPBOARD_TOOLS`). "Copy merged" copies the shown layers mixed as shown (see `PaintCanvas.copyMerged`).
+ * Cut and both copies work while there's a mask and no transform is pending; paste while there's copied image data.
+ * They're one ⋮ menu instead while the window is narrower than `CLIPBOARD_MENU_BELOW` (900px), or while `narrow` (see
+ * `pc-button-menu`).
  *
  * `<paint-canvas>` puts it at the end of its top pane, after the tool settings.
  *
@@ -36,13 +40,13 @@ export declare class PcClipboardTools extends PcElement {
     };
     static styles: import("lit").CSSResultGroup[];
     app?: PaintCanvas;
-    /** Whether the buttons are one ⋮ menu (e.g. while the layout is narrow) */
+    /** Whether the buttons are one ⋮ menu whatever the window's width (e.g. while the layout is narrow) */
     narrow: boolean;
     private changes;
     constructor();
-    /** Cut, copy and paste, each with whether it can be done now */
+    /** Cut, copy, copy merged and paste, each with whether it can be done now */
     private actions;
     /** Hide for tools without clipboard actions (e.g. zoom) */
     protected willUpdate(): void;
-    render(): import("lit").TemplateResult<1> | typeof nothing | import("lit").TemplateResult<1>[];
+    render(): import("lit").TemplateResult<1> | typeof nothing;
 }

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

@@ -1,10 +1,9 @@
 import { Tool } from "../../../lib/classes/PaintCanvas/tool.js";
 import { PcElement, defineElement } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
-import { PILLS_CSS } from "../../styles/index.js";
 import "../../../lib/classes/PaintCanvas/index.js";
-import "../PcContextMenu/index.js";
-import { css, html, nothing, unsafeCSS } from "lit";
+import "../PcButtonMenu/index.js";
+import { css, html, nothing } from "lit";
 // src/ui/elements/PcClipboardTools/index.ts
 /** The tools that cut, copy and paste are shown for: the brush, eraser, lassos and Move tool */
 var CLIPBOARD_TOOLS = [
@@ -16,10 +15,14 @@ var CLIPBOARD_TOOLS = [
 	Tool.FreeformLasso,
 	Tool.Move
 ];
+/** Window width (CSS pixels) below which the clipboard tools are one ⋮ menu */
+var CLIPBOARD_MENU_BELOW = 900;
 /**
-* Cut, copy and paste buttons for the canvas's masked image data, shown for the brush, eraser, lassos and Move tool
-* (see `CLIPBOARD_TOOLS`). Cut and copy work while there's a mask and no transform is pending; paste while there's
-* copied image data. While `narrow`, they're one ⋮ menu (`pc-context-menu`) instead.
+* Cut, copy, copy merged and paste buttons for the canvas's masked image data, shown for the brush, eraser, lassos and
+* Move tool (see `CLIPBOARD_TOOLS`). "Copy merged" copies the shown layers mixed as shown (see `PaintCanvas.copyMerged`).
+* Cut and both copies work while there's a mask and no transform is pending; paste while there's copied image data.
+* They're one ⋮ menu instead while the window is narrower than `CLIPBOARD_MENU_BELOW` (900px), or while `narrow` (see
+* `pc-button-menu`).
 *
 * `<paint-canvas>` puts it at the end of its top pane, after the tool settings.
 *
@@ -35,15 +38,11 @@ var PcClipboardTools = class extends PcElement {
 			reflect: true
 		}
 	};
-	static styles = [
-		PcElement.styles,
-		unsafeCSS(PILLS_CSS),
-		css`
+	static styles = [PcElement.styles, css`
       :host {
         display: flex;
         flex: none;
         align-items: center;
-        gap: 8px;
         padding: 4px 8px;
         background: var(--pc-bar);
         border-bottom: 1px solid var(--pc-surface-active);
@@ -51,8 +50,7 @@ var PcClipboardTools = class extends PcElement {
       :host([hidden]) {
         display: none;
       }
-    `
-	];
+    `];
 	changes = new ChangeController(this, () => this.app ? [
 		this.app,
 		this.app.selection,
@@ -62,7 +60,7 @@ var PcClipboardTools = class extends PcElement {
 		super();
 		this.narrow = false;
 	}
-	/** Cut, copy and paste, each with whether it can be done now */
+	/** Cut, copy, copy merged and paste, each with whether it can be done now */
 	actions(app) {
 		const noCopy = !app.selection.active || app.transform.pending;
 		return [
@@ -78,6 +76,12 @@ var PcClipboardTools = class extends PcElement {
 				disabled: noCopy,
 				run: () => app.copy()
 			},
+			{
+				name: "copy-merged",
+				label: this.t("paintCanvas.common.copyMerged"),
+				disabled: noCopy,
+				run: () => app.copyMerged()
+			},
 			{
 				name: "paste",
 				label: this.t("paintCanvas.common.paste"),
@@ -94,25 +98,22 @@ var PcClipboardTools = class extends PcElement {
 		const app = this.app;
 		if (!app || this.hidden) return nothing;
 		const actions = this.actions(app);
-		if (this.narrow) return html`<pc-context-menu
-        class="more"
-        label=${this.t("paintCanvas.toolSettings.moreActions")}
-        .items=${actions.map(({ name, label, disabled }) => ({
+		return html`<pc-button-menu
+      size="pill-s"
+      label=${this.t("paintCanvas.toolSettings.moreActions")}
+      menu-below=${900}
+      ?menu=${this.narrow}
+      .items=${actions.map(({ name, label, disabled }) => ({
 			value: name,
 			label,
 			disabled
 		}))}
-        @pc-select=${(event) => actions.find((action) => action.name === event.detail.value)?.run()}
-      ></pc-context-menu>`;
-		return actions.map((action) => html`<button
-          type="button"
-          class="pill ${action.name}"
-          ?disabled=${action.disabled}
-          @click=${action.run}
-        >
-          ${action.label}
-        </button>`);
+      @pc-select=${(event) => {
+			event.stopPropagation();
+			actions.find((action) => action.name === event.detail.value)?.run();
+		}}
+    ></pc-button-menu>`;
 	}
 };
 defineElement("pc-clipboard-tools", PcClipboardTools);
-export { CLIPBOARD_TOOLS, PcClipboardTools };
+export { CLIPBOARD_MENU_BELOW, CLIPBOARD_TOOLS, PcClipboardTools };