@lvl99dotcom/paintcanvas 0.4.0 → 0.5.0

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

@@ -0,0 +1,66 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import "../PcNumberSlider/index.js";
+import { BRUSH_SIZE_STEP } from "../../../lib/classes/BrushSettings/index.js";
+import { css, html, nothing } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcBrushSize/index.ts
+/**
+* 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"
+*/
+var sizeText = ({ width, height }) => width === height ? String(width) : `${width} × ${height}`;
+/**
+* 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>`
+*/
+var PcBrushSize = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		settings: { attribute: false },
+		label: { type: String }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: inline-flex;
+      }
+      pc-number-slider {
+        flex: 1;
+      }
+    `];
+	changes = new ChangeController(this, () => [this.settings]);
+	constructor() {
+		super();
+		this.label = "";
+	}
+	/** Resize to the slider's value (the larger side), keeping the proportions */
+	onChange(event) {
+		const settings = this.settings;
+		settings.resize(event.detail.value - settings.largerSide);
+		this.requestUpdate();
+	}
+	render() {
+		const settings = this.settings;
+		if (!settings) return nothing;
+		const larger = settings.largerSide;
+		return html`<pc-number-slider
+      exportparts="control, field"
+      min=${1}
+      max=${256}
+      page-step=${Math.max(1, Math.round(larger * BRUSH_SIZE_STEP))}
+      label=${this.label}
+      .value=${live(larger)}
+      .text=${sizeText(settings)}
+      @pc-change=${this.onChange}
+    ></pc-number-slider>`;
+	}
+};
+defineElement("pc-brush-size", PcBrushSize);
+export { PcBrushSize, sizeText };

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

@@ -8,9 +8,18 @@ export declare const TEST_AREA_WIDTH = 800;
 export declare const TEST_AREA_HEIGHT = 320;
 /** The colour test strokes are drawn in, whatever the current colour */
 export declare const TEST_COLOUR = "#000000";
+/** The colour of the circles showing a stroke's sampled points, while stroke points are shown */
+export declare const POINT_COLOUR = "#e8175d";
+/** The colour of the dots showing where a stroke placed its stamps, while stroke points are shown */
+export declare const STAMP_COLOUR = "#1e88e5";
+/** How long a finished stroke's points stay shown (milliseconds) */
+export declare const STROKE_POINTS_MS = 3000;
 /**
  * A small area to try brush settings before saving them: strokes are drawn in black, at the settings' own size, on a
  * white background at double resolution (800 × 320 pixels shown in the window's width). "Clear" (a red pill) empties it.
+ * "Show stroke points" draws the stroke's sampled points (pink circles) and where it placed stamps (blue dots) over it,
+ * like the canvas's debug overlay, to see how sampling and smoothing work. They go 3 seconds after the stroke ends, or
+ * on "Clear".
  *
  * @example
  * html`<pc-brush-test .config=${config} .tips=${app.tips}></pc-brush-test>`
@@ -23,6 +32,10 @@ export declare class PcBrushTest extends PcElement {
         tips: {
             attribute: boolean;
         };
+        showPoints: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
         translations: {
             attribute: boolean;
         };
@@ -39,6 +52,9 @@ export declare class PcBrushTest extends PcElement {
     config?: BrushConfig;
     /** Brush shapes */
     tips?: BrushTipCache;
+    /** Whether the last stroke's sampled points and stamps are drawn over it */
+    showPoints: boolean;
+    constructor();
     /** Creates the layer and stroke canvases (replaceable for tests) */
     createCanvas: CanvasFactory;
     private layer?;
@@ -46,6 +62,8 @@ export declare class PcBrushTest extends PcElement {
     /** The pointer drawing, if any */
     private pointerId?;
     private readonly onEngineChange;
+    /** Clears the finished stroke's points once they've been shown long enough */
+    private pointsTimer?;
     disconnectedCallback(): void;
     /** The visible canvas */
     private get canvas();
@@ -61,11 +79,19 @@ export declare class PcBrushTest extends PcElement {
     private onPointerMove;
     /** Finish the test stroke */
     private onPointerUp;
+    /** Stop showing the last stroke's points and stamps (still recording the next stroke's while shown) */
+    private clearPoints;
+    /**
+     * Show or hide the last stroke's sampled points and stamps. They're recorded from the next stroke.
+     */
+    setShowPoints(shown: boolean): void;
     /**
      * Empty the testing area.
      */
     clear(): void;
     /** Show the layer (with any stroke in progress) on the visible canvas */
     private paint;
+    /** Draw the last stroke's sampled points (circles) and stamp positions (dots) */
+    private paintPoints;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -10,9 +10,20 @@ var TEST_AREA_WIDTH = 800;
 var TEST_AREA_HEIGHT = 320;
 /** The colour test strokes are drawn in, whatever the current colour */
 var TEST_COLOUR = "#000000";
+/** The colour of the circles showing a stroke's sampled points, while stroke points are shown */
+var POINT_COLOUR = "#e8175d";
+/** The colour of the dots showing where a stroke placed its stamps, while stroke points are shown */
+var STAMP_COLOUR = "#1e88e5";
+/** How long a finished stroke's points stay shown (milliseconds) */
+var STROKE_POINTS_MS = 3e3;
+/** Radius of the circles showing a stroke's sampled points (test area pixels) */
+var POINT_RADIUS = 8;
 /**
 * A small area to try brush settings before saving them: strokes are drawn in black, at the settings' own size, on a
 * white background at double resolution (800 × 320 pixels shown in the window's width). "Clear" (a red pill) empties it.
+* "Show stroke points" draws the stroke's sampled points (pink circles) and where it placed stamps (blue dots) over it,
+* like the canvas's debug overlay, to see how sampling and smoothing work. They go 3 seconds after the stroke ends, or
+* on "Clear".
 *
 * @example
 * html`<pc-brush-test .config=${config} .tips=${app.tips}></pc-brush-test>`
@@ -21,9 +32,17 @@ var PcBrushTest = class extends PcElement {
 	static properties = {
 		...PcElement.properties,
 		config: { attribute: false },
-		tips: { attribute: false }
+		tips: { attribute: false },
+		showPoints: {
+			type: Boolean,
+			attribute: "show-points"
+		}
 	};
 	static styles = [PcElement.styles, unsafeCSS(style_default)];
+	constructor() {
+		super();
+		this.showPoints = false;
+	}
 	/** Creates the layer and stroke canvases (replaceable for tests) */
 	createCanvas = createOffscreenCanvas;
 	layer;
@@ -31,8 +50,11 @@ var PcBrushTest = class extends PcElement {
 	/** The pointer drawing, if any */
 	pointerId;
 	onEngineChange = () => this.paint();
+	/** Clears the finished stroke's points once they've been shown long enough */
+	pointsTimer;
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		clearTimeout(this.pointsTimer);
 		this.engine?.removeEventListener("change", this.onEngineChange);
 	}
 	/** The visible canvas */
@@ -45,6 +67,7 @@ var PcBrushTest = class extends PcElement {
 		if (!this.engine) {
 			this.engine = new StrokeEngine(800, 320, this.createCanvas);
 			this.engine.addEventListener("change", this.onEngineChange);
+			this.engine.setDebug(this.showPoints);
 		}
 		return {
 			layer: this.layer,
@@ -72,6 +95,7 @@ var PcBrushTest = class extends PcElement {
 		const config = this.config;
 		if (!config || !this.tips || event.button !== 0) return;
 		const { layer, engine } = this.drawing;
+		clearTimeout(this.pointsTimer);
 		this.pointerId = event.pointerId;
 		event.currentTarget.setPointerCapture?.(event.pointerId);
 		engine.begin({
@@ -98,12 +122,29 @@ var PcBrushTest = class extends PcElement {
 		this.pointerId = void 0;
 		this.engine?.end(this.point(event), event.timeStamp);
 		this.paint();
+		clearTimeout(this.pointsTimer);
+		this.pointsTimer = setTimeout(() => this.clearPoints(), STROKE_POINTS_MS);
+	}
+	/** Stop showing the last stroke's points and stamps (still recording the next stroke's while shown) */
+	clearPoints() {
+		clearTimeout(this.pointsTimer);
+		this.engine?.setDebug(this.showPoints);
+	}
+	/**
+	* Show or hide the last stroke's sampled points and stamps. They're recorded from the next stroke.
+	*/
+	setShowPoints(shown) {
+		const changed = shown !== this.showPoints;
+		this.showPoints = shown;
+		if (changed) this.engine?.setDebug(shown);
+		this.paint();
 	}
 	/**
 	* Empty the testing area.
 	*/
 	clear() {
 		this.engine?.cancel();
+		this.clearPoints();
 		this.layer?.context.clearRect(0, 0, 800, 320);
 		this.paint();
 	}
@@ -114,6 +155,23 @@ var PcBrushTest = class extends PcElement {
 		ctx.clearRect(0, 0, 800, 320);
 		const image = this.engine?.preview?.image ?? this.layer?.canvas;
 		if (image) ctx.drawImage(image, 0, 0);
+		if (this.showPoints && this.engine) this.paintPoints(ctx, this.engine);
+	}
+	/** Draw the last stroke's sampled points (circles) and stamp positions (dots) */
+	paintPoints(ctx, engine) {
+		const { points, stamps } = engine.debugTrace;
+		ctx.save();
+		ctx.fillStyle = STAMP_COLOUR;
+		for (const { x, y } of stamps) ctx.fillRect(x - 2, y - 2, 4, 4);
+		ctx.strokeStyle = POINT_COLOUR;
+		ctx.lineWidth = 2;
+		ctx.beginPath();
+		for (const { x, y } of points) {
+			ctx.moveTo(x + POINT_RADIUS, y);
+			ctx.arc(x, y, POINT_RADIUS, 0, Math.PI * 2);
+		}
+		ctx.stroke();
+		ctx.restore();
 	}
 	render() {
 		return html`
@@ -126,11 +184,21 @@ var PcBrushTest = class extends PcElement {
         @pointerup=${this.onPointerUp}
         @pointercancel=${this.onPointerUp}
       ></canvas>
-      <button type="button" class="clear" @click=${() => this.clear()}>
-        ${this.t("paintCanvas.common.clear")}
-      </button>
+      <div class="actions">
+        <button type="button" class="clear" @click=${() => this.clear()}>
+          ${this.t("paintCanvas.common.clear")}
+        </button>
+        <label class="show-points">
+          <input
+            type="checkbox"
+            .checked=${this.showPoints}
+            @change=${(e) => this.setShowPoints(e.target.checked)}
+          />
+          ${this.t("paintCanvas.brushConfig.showStrokePoints")}
+        </label>
+      </div>
     `;
 	}
 };
 defineElement("pc-brush-test", PcBrushTest);
-export { PcBrushTest, TEST_AREA_HEIGHT, TEST_AREA_WIDTH, TEST_COLOUR };
+export { POINT_COLOUR, PcBrushTest, STAMP_COLOUR, STROKE_POINTS_MS, TEST_AREA_HEIGHT, TEST_AREA_WIDTH, TEST_COLOUR };

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcBrushTest/style.css?inline
-var style_default = ":host {\n  display: block;\n}\ncanvas {\n  display: block;\n  width: 100%;\n  background: #fff;\n  border: 1px solid var(--pc-border);\n  touch-action: none;\n}\n/* \"Clear\": a red pill */\nbutton.clear {\n  margin-top: 6px;\n  padding: 4px 16px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--pc-red);\n  color: #ffffff;\n  font: inherit;\n  font-weight: bold;\n  cursor: pointer;\n}\nbutton.clear:hover {\n  filter: brightness(1.1);\n}\nbutton.clear:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n";
+var style_default = ":host {\n  display: block;\n}\ncanvas {\n  display: block;\n  width: 100%;\n  background: #fff;\n  border: 1px solid var(--pc-border);\n  touch-action: none;\n}\n/* \"Clear\", then \"Show stroke points\" */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px;\n  margin-top: 6px;\n}\n.show-points {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  cursor: pointer;\n}\n/* \"Clear\": a red pill */\nbutton.clear {\n  padding: 4px 16px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--pc-red);\n  color: #ffffff;\n  font: inherit;\n  font-weight: bold;\n  cursor: pointer;\n}\nbutton.clear:hover {\n  filter: brightness(1.1);\n}\nbutton.clear:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n";
 export { style_default as default };

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

@@ -123,6 +123,8 @@ export declare class PcCanvas extends PcElement {
     private drag;
     /** Pointer drawing the current stroke, and the layer it draws on */
     private stroke;
+    /** A press that closed a panel or menu, held until it moves far enough to count (see `onPointerDown`) */
+    private heldPress;
     /** Pointer position over the stage (for the brush cursor), or null when outside */
     private hover;
     /** Name of the key held to zoom with the scroll wheel (replaceable for tests) */
@@ -256,15 +258,33 @@ export declare class PcCanvas extends PcElement {
      * Get a pointer's position relative to the stage.
      */
     private pointerPoint;
+    /**
+     * Send a pointer's events to the canvas until it's lifted, even outside it.
+     */
+    private capturePointer;
+    /**
+     * Handle a press, unless it closed a panel or menu (see `isDismissingPress`): that press is held, and only starts
+     * drawing (or whatever the tool does) once it moves `DRAG_THRESHOLD` pixels, so tapping the canvas to close a panel
+     * leaves no mark.
+     */
+    private onPointerDown;
+    /**
+     * Start a held press (see `onPointerDown`) once it moves far enough. Returns whether the pointer is still held.
+     */
+    private releaseHeldPress;
     /**
      * Start panning, or zoom, depending on the tool and button. In focus pen mode, touches only pan, pinch and make
      * gestures, and are ignored while a pen is down or just lifted (see `focusPenTouch`).
      */
-    private onPointerDown;
+    private pointerDown;
     /**
      * Continue a stroke (using every in-between event the browser recorded), pan while dragging, and move the brush cursor.
      */
     private onPointerMove;
+    /**
+     * Forget a held press lifted (or cancelled) before it moved far enough. Returns whether it was one.
+     */
+    private dropHeldPress;
     /**
      * Finish a stroke (writing it into the layer) or stop panning.
      */

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

@@ -4,6 +4,8 @@ import style_default from "./style.js";
 import { NO_TEXT_SELECTION_CSS } from "../../styles/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
+import { isDismissingPress } from "../../dismiss/index.js";
+import "../../drag/index.js";
 import "../../../lib/classes/PaintCanvas/index.js";
 import { PASTEBOARD_COLOUR, drawScene } from "../../../lib/rendering/compositing/index.js";
 import { drawBrushCursor } from "../../../lib/rendering/cursor/index.js";
@@ -172,6 +174,8 @@ var PcCanvas = class extends PcElement {
 	drag = null;
 	/** Pointer drawing the current stroke, and the layer it draws on */
 	stroke = null;
+	/** A press that closed a panel or menu, held until it moves far enough to count (see `onPointerDown`) */
+	heldPress = null;
 	/** Pointer position over the stage (for the brush cursor), or null when outside */
 	hover = null;
 	/** Name of the key held to zoom with the scroll wheel (replaceable for tests) */
@@ -425,7 +429,7 @@ var PcCanvas = class extends PcElement {
 			point: app.viewport.screenToCanvas(screen),
 			constrain: app.constrainProportions
 		};
-		event.currentTarget.setPointerCapture(event.pointerId);
+		this.capturePointer(event.pointerId);
 	}
 	/**
 	* Update the transform box while dragging.
@@ -499,7 +503,7 @@ var PcCanvas = class extends PcElement {
 		const point = this.pointerPoint(event);
 		const first = app.lasso.nodes[0];
 		const nearFirstNode = first !== void 0 && isNear(app.viewport.canvasToScreen(first), point, 8);
-		if (kind !== "polygon") event.currentTarget.setPointerCapture(event.pointerId);
+		if (kind !== "polygon") this.capturePointer(event.pointerId);
 		app.applyLasso(app.lasso.down(kind, app.viewport.screenToCanvas(point), event, nearFirstNode));
 	}
 	/**
@@ -563,7 +567,7 @@ var PcCanvas = class extends PcElement {
 			pointerId: event.pointerId,
 			layerId: layer.id
 		};
-		event.currentTarget.setPointerCapture(event.pointerId);
+		this.capturePointer(event.pointerId);
 		const erasing = app.activeTool === Tool.Eraser;
 		app.strokes.begin({
 			layer,
@@ -594,12 +598,42 @@ var PcCanvas = class extends PcElement {
 		};
 	}
 	/**
+	* Send a pointer's events to the canvas until it's lifted, even outside it.
+	*/
+	capturePointer(pointerId) {
+		this.renderRoot.querySelector("canvas.scene")?.setPointerCapture?.(pointerId);
+	}
+	/**
+	* Handle a press, unless it closed a panel or menu (see `isDismissingPress`): that press is held, and only starts
+	* drawing (or whatever the tool does) once it moves `DRAG_THRESHOLD` pixels, so tapping the canvas to close a panel
+	* leaves no mark.
+	*/
+	onPointerDown(event) {
+		if (!this.app) return;
+		if (!isDismissingPress(event)) {
+			this.pointerDown(event);
+			return;
+		}
+		this.heldPress = event;
+		this.capturePointer(event.pointerId);
+	}
+	/**
+	* Start a held press (see `onPointerDown`) once it moves far enough. Returns whether the pointer is still held.
+	*/
+	releaseHeldPress(event) {
+		const held = this.heldPress;
+		if (held?.pointerId !== event.pointerId) return false;
+		if (Math.hypot(event.clientX - held.clientX, event.clientY - held.clientY) < 4) return true;
+		this.heldPress = null;
+		this.pointerDown(held);
+		return false;
+	}
+	/**
 	* Start panning, or zoom, depending on the tool and button. In focus pen mode, touches only pan, pinch and make
 	* gestures, and are ignored while a pen is down or just lifted (see `focusPenTouch`).
 	*/
-	onPointerDown(event) {
+	pointerDown(event) {
 		const app = this.app;
-		if (!app) return;
 		if (event.pointerType === "pen") this.penDown(event);
 		if (event.pointerType === "touch") {
 			const ignored = this.focusPenTouch(event);
@@ -632,7 +666,7 @@ var PcCanvas = class extends PcElement {
 				pointerId: event.pointerId,
 				last: point
 			};
-			event.currentTarget.setPointerCapture(event.pointerId);
+			this.capturePointer(event.pointerId);
 			this.updateCursor();
 		} else if (app.activeTool === Tool.Zoom && event.button === 0) {
 			if (event.altKey) app.viewport.zoomOut(point);
@@ -645,6 +679,7 @@ var PcCanvas = class extends PcElement {
 	onPointerMove(event) {
 		const app = this.app;
 		if (!app || this.ignoredTouches.has(event.pointerId)) return;
+		if (this.releaseHeldPress(event)) return;
 		const point = this.pointerPoint(event);
 		if (this.touches.has(event.pointerId)) {
 			this.touches.set(event.pointerId, point);
@@ -680,10 +715,18 @@ var PcCanvas = class extends PcElement {
 		this.requestOverlay();
 	}
 	/**
+	* Forget a held press lifted (or cancelled) before it moved far enough. Returns whether it was one.
+	*/
+	dropHeldPress(event) {
+		if (this.heldPress?.pointerId !== event.pointerId) return false;
+		this.heldPress = null;
+		return true;
+	}
+	/**
 	* Finish a stroke (writing it into the layer) or stop panning.
 	*/
 	onPointerUp(event) {
-		if (this.ignoredTouches.delete(event.pointerId)) return;
+		if (this.ignoredTouches.delete(event.pointerId) || this.dropHeldPress(event)) return;
 		this.penUp(event);
 		this.touchUp(event);
 		if (this.sampling?.pointerId === event.pointerId) this.finishSample();
@@ -713,7 +756,7 @@ var PcCanvas = class extends PcElement {
 	* Abandon a stroke or pan when the browser cancels the pointer (e.g. a system gesture).
 	*/
 	onPointerCancel(event) {
-		if (this.ignoredTouches.delete(event.pointerId)) return;
+		if (this.ignoredTouches.delete(event.pointerId) || this.dropHeldPress(event)) return;
 		this.navigationTouches.delete(event.pointerId);
 		this.penUp(event);
 		this.touchUp(event);
@@ -791,7 +834,7 @@ var PcCanvas = class extends PcElement {
 			this.drag = null;
 			const [a, b] = [...this.touches.values()];
 			this.pinch = touchPair(a, b);
-			event.currentTarget.setPointerCapture(event.pointerId);
+			this.capturePointer(event.pointerId);
 		}
 		return true;
 	}
@@ -809,7 +852,7 @@ var PcCanvas = class extends PcElement {
 			point,
 			screen
 		};
-		event.currentTarget.setPointerCapture(event.pointerId);
+		this.capturePointer(event.pointerId);
 		this.updateCursor();
 		this.drawOverlay();
 	}

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcCanvasMap/style.css?inline
-var style_default = ":host {\n  display: block;\n  position: relative;\n  touch-action: none;\n  /* A solid grey border, drawn outside so the map and its frame keep their size and position */\n  outline: 1px solid var(--pc-border);\n}\ncanvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n/* The part of the canvas the user can see */\n.frame {\n  position: absolute;\n  outline: 1px solid var(--pc-text);\n  pointer-events: none;\n}\n";
+var style_default = ":host {\n  display: block;\n  position: relative;\n  touch-action: none;\n  /* A solid grey border, drawn outside so the map and its frame keep their size and position */\n  outline: 1px solid var(--pc-map-border);\n}\ncanvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n/* The part of the canvas the user can see */\n.frame {\n  position: absolute;\n  outline: 1px solid var(--pc-map-frame);\n  pointer-events: none;\n}\n";
 export { style_default as default };

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

@@ -0,0 +1,48 @@
+import { nothing } from "lit";
+import { PcElement } from "../../base";
+import PaintCanvas, { Tool } from "../../../lib/classes/PaintCanvas";
+import "../PcContextMenu";
+/** The tools that cut, copy and paste are shown for: the brush, eraser, lassos and Move tool */
+export declare const CLIPBOARD_TOOLS: readonly Tool[];
+/**
+ * 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.
+ *
+ * `<paint-canvas>` puts it at the end of its top pane, after the tool settings.
+ *
+ * @example
+ * html`<pc-clipboard-tools .app=${app} ?narrow=${narrow}></pc-clipboard-tools>`
+ */
+export declare class PcClipboardTools extends PcElement {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        narrow: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    app?: PaintCanvas;
+    /** Whether the buttons are one ⋮ menu (e.g. while the layout is narrow) */
+    narrow: boolean;
+    private changes;
+    constructor();
+    /** Cut, copy 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>[];
+}

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

@@ -0,0 +1,118 @@
+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";
+// 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 = [
+	Tool.Brush,
+	Tool.Eraser,
+	Tool.RectangleLasso,
+	Tool.CircleLasso,
+	Tool.PolygonLasso,
+	Tool.FreeformLasso,
+	Tool.Move
+];
+/**
+* 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.
+*
+* `<paint-canvas>` puts it at the end of its top pane, after the tool settings.
+*
+* @example
+* html`<pc-clipboard-tools .app=${app} ?narrow=${narrow}></pc-clipboard-tools>`
+*/
+var PcClipboardTools = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false },
+		narrow: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(PILLS_CSS),
+		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);
+      }
+      :host([hidden]) {
+        display: none;
+      }
+    `
+	];
+	changes = new ChangeController(this, () => this.app ? [
+		this.app,
+		this.app.selection,
+		this.app.transform
+	] : []);
+	constructor() {
+		super();
+		this.narrow = false;
+	}
+	/** Cut, copy and paste, each with whether it can be done now */
+	actions(app) {
+		const noCopy = !app.selection.active || app.transform.pending;
+		return [
+			{
+				name: "cut",
+				label: this.t("paintCanvas.common.cut"),
+				disabled: noCopy,
+				run: () => app.cut()
+			},
+			{
+				name: "copy",
+				label: this.t("paintCanvas.common.copy"),
+				disabled: noCopy,
+				run: () => app.copy()
+			},
+			{
+				name: "paste",
+				label: this.t("paintCanvas.common.paste"),
+				disabled: !app.hasClipboard,
+				run: () => app.paste()
+			}
+		];
+	}
+	/** Hide for tools without clipboard actions (e.g. zoom) */
+	willUpdate() {
+		this.hidden = !this.app || !CLIPBOARD_TOOLS.includes(this.app.tool);
+	}
+	render() {
+		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 }) => ({
+			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>`);
+	}
+};
+defineElement("pc-clipboard-tools", PcClipboardTools);
+export { CLIPBOARD_TOOLS, PcClipboardTools };

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

@@ -1,6 +1,6 @@
 import { type PropertyValues } from "lit";
 import { PcElement } from "../../base";
-import { PcMenu, type MenuItem } from "../PcMenu";
+import { PcMenu, type MenuEntry } from "../PcMenu";
 import "../PcMenu";
 /** Space kept between a context menu's menu and the window's edges */
 export declare const MENU_MARGIN = 8;
@@ -77,7 +77,7 @@ export declare class PcContextMenu extends PcElement {
     /** Whether the menu is open */
     open: boolean;
     /** The items of its own menu, when no `pc-menu` is slotted */
-    items: readonly MenuItem[];
+    items: readonly MenuEntry[];
     /** Names the button for screen readers */
     label: string;
     /** Names the menu for screen readers (the button's `label` by default) */