@lvl99dotcom/paintcanvas 0.6.0 → 0.8.0

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

@@ -1,6 +1,7 @@
 import style_default from "./style.js";
 import { PILLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
+import "../PcToggleCheckbox/index.js";
 import StrokeEngine from "../../../lib/brushes/StrokeEngine/index.js";
 import Layer, { createOffscreenCanvas } from "../../../lib/classes/Layer/index.js";
 import { html, unsafeCSS } from "lit";
@@ -193,14 +194,14 @@ var PcBrushTest = class extends PcElement {
         <button type="button" class="pill 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)}
-          />
+        <pc-toggle-checkbox
+          class="show-points"
+          size="s"
+          .checked=${this.showPoints}
+          @change=${(e) => this.setShowPoints(e.detail.checked)}
+        >
           ${this.t("paintCanvas.brushConfig.showStrokePoints")}
-        </label>
+        </pc-toggle-checkbox>
       </div>
     `;
 	}

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\", 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.pill.clear {\n  background: var(--pc-red);\n  color: #ffffff;\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}\n/* \"Clear\": a red pill */\nbutton.pill.clear {\n  background: var(--pc-red);\n  color: #ffffff;\n}\n";
 export { style_default as default };

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

@@ -121,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;
@@ -168,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;
@@ -172,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;
@@ -247,7 +250,7 @@ var PcCanvas = class extends PcElement {
 		this.frame = 0;
 	}
 	firstUpdated() {
-		this.canvas?.getContext("2d", { willReadFrequently: true });
+		this.prepareScene();
 		if (typeof ResizeObserver !== "undefined") {
 			this.resizeObserver = new ResizeObserver(() => this.syncSize());
 			this.resizeObserver.observe(this);
@@ -255,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) {
@@ -266,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);
@@ -1031,22 +1047,22 @@ 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>`;

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

@@ -1,14 +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, 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.
- * While `narrow`, they're one ⋮ menu (`pc-context-menu`) instead.
+ * 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.
  *
@@ -37,7 +40,7 @@ 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();
@@ -45,5 +48,5 @@ export declare class PcClipboardTools extends PcElement {
     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,11 +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, 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.
-* While `narrow`, they're one ⋮ menu (`pc-context-menu`) instead.
+* 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,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);
@@ -52,8 +50,7 @@ var PcClipboardTools = class extends PcElement {
       :host([hidden]) {
         display: none;
       }
-    `
-	];
+    `];
 	changes = new ChangeController(this, () => this.app ? [
 		this.app,
 		this.app.selection,
@@ -101,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-s ${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 };

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

@@ -1,5 +1,6 @@
 import { nothing } from "lit";
 import { PcElement } from "../../base";
+import "../PcToggleCheckbox";
 import { type InputSettingsData } from "../../../lib/classes/InputSettings";
 import type { UiSettingsLike } from "../../../lib/classes/UiSettings";
 /** Settings `pc-input-settings` can change: PaintCanvas's `InputSettings`, or anything with the same data and `update` */
@@ -69,7 +70,7 @@ export declare class PcInputSettings extends PcElement {
     constructor();
     /** Use the kept language when it changes */
     protected willUpdate(): void;
-    /** A checkbox for an on/off setting */
+    /** A switch for an on/off setting */
     private toggle;
     /**
      * The touch gestures: which gesture undoes, redoes, copies and pastes. Choosing a gesture another action uses swaps

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

@@ -1,5 +1,6 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
+import "../PcToggleCheckbox/index.js";
 import { languageName } from "../../../lib/i18n/index.js";
 import { isTouchDevice, zoomModifierName } from "../../../lib/classes/InputSettings/index.js";
 import { GESTURE_ACTIONS, TOUCH_GESTURES, assignGesture } from "../../../lib/utils/gestures/index.js";
@@ -57,13 +58,7 @@ var PcInputSettings = class extends PcElement {
         font-weight: bold;
       }
       .toggle {
-        display: flex;
         grid-column: 1 / -1;
-        gap: var(--pc-space-2);
-        align-items: center;
-      }
-      input[type="checkbox"] {
-        accent-color: var(--pc-accent);
       }
       input:focus-visible,
       select:focus-visible {
@@ -88,17 +83,16 @@ var PcInputSettings = class extends PcElement {
 		this.usedLocale = locale;
 		if (locale !== this.translations.locale) this.translations.setLocale(locale);
 	}
-	/** A checkbox for an on/off setting */
+	/** A switch for an on/off setting */
 	toggle(data, key, label) {
-		return html`<label class="toggle">
-      <input
-        type="checkbox"
-        name=${key}
-        .checked=${data[key]}
-        @change=${(e) => this.settings?.update({ [key]: e.target.checked })}
-      />
+		return html`<pc-toggle-checkbox
+      class="toggle"
+      data-setting=${key}
+      .checked=${data[key]}
+      @change=${(e) => this.settings?.update({ [key]: e.detail.checked })}
+    >
       ${label}
-    </label>`;
+    </pc-toggle-checkbox>`;
 	}
 	/**
 	* The touch gestures: which gesture undoes, redoes, copies and pastes. Choosing a gesture another action uses swaps

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

@@ -2,6 +2,8 @@ import { PcElement } from "../../base";
 import { BlendMode, type default as Layer } from "../../../lib/classes/Layer";
 import type LayerStack from "../../../lib/classes/LayerStack";
 import "../PcDialog";
+import "../PcSliderRange";
+import { type PromptFn } from "../../ask";
 import "../PcContextMenu";
 import { MENU_MARGIN, menuTop } from "../PcContextMenu";
 import { type DialogChoice } from "../PcDialog";
@@ -12,7 +14,7 @@ export declare const BLEND_MODE_OPTIONS: readonly {
     label: string;
 }[];
 /** Actions in the reorder handle's context menu */
-export type LayerAction = "mask" | "duplicate" | "merge" | "clear" | "delete" | "up" | "top" | "down" | "bottom";
+export type LayerAction = "rename" | "mask" | "duplicate" | "merge" | "clear" | "delete" | "up" | "top" | "down" | "bottom";
 /** Context menu options in display order, with the translation keys of their labels */
 export declare const LAYER_ACTIONS: readonly {
     action: LayerAction;
@@ -61,7 +63,9 @@ export interface LayerDragDetail {
 /** Where the layer actions menu goes and how close to the window's edges (see `pc-context-menu`) */
 export { MENU_MARGIN, menuTop };
 /**
- * One row in the layers menu: reorder handle, thumbnail and name (then opacity and blend mode under them), alpha lock (padlock) and visibility (eye) icons.
+ * One row in the layers menu: reorder handle, thumbnail and name (then opacity and blend mode under them), alpha lock
+ * (padlock) and visibility (eye) icons. Pressing anywhere on the row (its controls too) selects the layer, which is then
+ * shown with a purple background (`active`). "Rename…" in the actions menu asks for a new name.
  * Dragging the handle (with mouse, pen or touch) reorders the layer: the row fires {@link LAYER_DRAG_EVENT} and the
  * layers menu shows where it will land. Clicking or tapping the handle, pressing Enter or Space on it, or right-clicking
  * it opens the layer's actions menu (which can also reorder it). Cmd/Ctrl + click on the thumbnail or name (or "Create
@@ -96,6 +100,10 @@ export declare class PcLayerItem extends PcElement {
             attribute: string;
             reflect: boolean;
         };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -116,6 +124,10 @@ export declare class PcLayerItem extends PcElement {
     menuOpen: boolean;
     /** The action the user is being asked to confirm, if any */
     confirming?: ConfirmedAction;
+    /** Whether this row's layer is the selected one (shown with a purple background) */
+    active: boolean;
+    /** Asks the user for the layer's new name (replaceable for tests) */
+    prompt: PromptFn;
     /** Whether this row's layer is being dragged (set by the layers menu; the row floats with the pointer) */
     dragging: boolean;
     /** While this row's layer is dragged: what dropping it now would do (set by the layers menu; shown by the cursor) */
@@ -128,6 +140,8 @@ export declare class PcLayerItem extends PcElement {
     /** Device pixels per CSS pixel (replaceable for tests) */
     pixelRatio: () => number;
     constructor();
+    /** Pressing anywhere on the row selects its layer, except in the dialogs it shows (e.g. after deleting it) */
+    private readonly onClick;
     /**
      * Run a context menu action. Merging down, clearing and deleting ask for confirmation first (see `confirmed`).
      */
@@ -180,13 +194,14 @@ export declare class PcLayerItem extends PcElement {
      */
     private requestMask;
     /**
-     * Clicking the row selects the layer. Cmd/Ctrl + click on the thumbnail or name also makes a mask from the layer's alpha.
+     * Cmd/Ctrl + click on the thumbnail or name makes a mask from the layer's alpha (the click also selects the layer).
      */
-    private onRowClick;
+    private onDetailsClick;
     /**
-     * Rename a layer when the name input changes. Empty names are reverted.
+     * Ask for the layer's new name and use it. Cancelling or an empty name leaves the name as it was.
      */
-    private onRename;
+    private rename;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     updated(): void;
     /**
      * Draw the layer's image, scaled to fit, on a checkerboard that shows transparency.