@lvl99dotcom/paintcanvas 0.6.0 → 0.7.0

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.

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

@@ -5,8 +5,11 @@ import ChangeController from "../../ChangeController/index.js";
 import { BlendMode } from "../../../lib/classes/Layer/index.js";
 import { drawCheckerboard, fitSize } from "../../../lib/rendering/checkerboard/index.js";
 import { CANCEL_CHOICE } from "../PcDialog/index.js";
+import "../PcSliderRange/index.js";
+import { askText } from "../../ask/index.js";
 import { MENU_MARGIN, menuTop } from "../PcContextMenu/index.js";
 import { html, nothing, unsafeCSS } from "lit";
+import { live } from "lit/directives/live.js";
 // src/ui/elements/PcLayerItem/index.ts
 /** Blend mode options shown in the layer's select input */
 var BLEND_MODE_OPTIONS = [
@@ -37,6 +40,10 @@ var BLEND_MODE_OPTIONS = [
 ];
 /** Context menu options in display order, with the translation keys of their labels */
 var LAYER_ACTIONS = [
+	{
+		action: "rename",
+		label: "paintCanvas.layers.rename"
+	},
 	{
 		action: "mask",
 		label: "paintCanvas.layers.createMask"
@@ -129,7 +136,9 @@ var DRAG_THRESHOLD = 4;
 /** Event a row dispatches while its layer is dragged by its reorder handle (detail: {@link LayerDragDetail}) */
 var LAYER_DRAG_EVENT = "pc-layer-drag";
 /**
-* 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
@@ -154,6 +163,10 @@ var PcLayerItem = class extends PcElement {
 		dropAction: {
 			attribute: "drop-action",
 			reflect: true
+		},
+		active: {
+			type: Boolean,
+			reflect: true
 		}
 	};
 	static styles = [
@@ -162,6 +175,8 @@ var PcLayerItem = class extends PcElement {
 		unsafeCSS(style_default),
 		unsafeCSS(WINDOWS_CSS)
 	];
+	/** Asks the user for the layer's new name (replaceable for tests) */
+	prompt = (options) => askText(this.renderRoot, options);
 	/** The pointer pressed on the reorder handle, where it was pressed, and whether it has started dragging */
 	press;
 	/** Whether to ignore the next click on the handle (it ended a drag) */
@@ -173,7 +188,15 @@ var PcLayerItem = class extends PcElement {
 		super();
 		this.menuOpen = false;
 		this.dragging = false;
+		this.active = false;
+		this.addEventListener("click", this.onClick);
 	}
+	/** Pressing anywhere on the row selects its layer, except in the dialogs it shows (e.g. after deleting it) */
+	onClick = (event) => {
+		const { stack, layer } = this;
+		if (!stack || !layer || !stack.layers.includes(layer)) return;
+		if (!event.composedPath().some((target) => target instanceof Element && target.matches("pc-dialog")) && stack.active !== layer) stack.select(layer.id);
+	};
 	/**
 	* Run a context menu action. Merging down, clearing and deleting ask for confirmation first (see `confirmed`).
 	*/
@@ -182,6 +205,9 @@ var PcLayerItem = class extends PcElement {
 		this.menuOpen = false;
 		if (!stack || !layer || !this.canRun(action)) return;
 		switch (action) {
+			case "rename":
+				this.rename(stack, layer);
+				break;
 			case "mask":
 				this.requestMask(layer, {
 					shiftKey: false,
@@ -360,10 +386,9 @@ var PcLayerItem = class extends PcElement {
 		}));
 	}
 	/**
-	* 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).
 	*/
-	onRowClick(event, stack, layer) {
-		stack.select(layer.id);
+	onDetailsClick(event, layer) {
 		if (!event.metaKey && !event.ctrlKey) return;
 		const target = event.composedPath()[0];
 		if (!(target instanceof Element) || !target.matches(".thumbnail, .name")) return;
@@ -371,15 +396,21 @@ var PcLayerItem = class extends PcElement {
 		this.requestMask(layer, event);
 	}
 	/**
-	* 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.
 	*/
-	onRename(event, stack, layer) {
-		const input = event.target;
-		try {
-			stack.rename(layer.id, input.value);
-		} catch {
-			input.value = layer.name;
-		}
+	async rename(stack, layer) {
+		const name = (await this.prompt({
+			heading: this.t("paintCanvas.layers.renameTitle"),
+			label: this.t("paintCanvas.layers.name"),
+			value: layer.name,
+			confirm: this.t("paintCanvas.common.save"),
+			cancel: this.t("paintCanvas.common.cancel")
+		}))?.trim();
+		if (name && stack.layers.includes(layer)) stack.rename(layer.id, name);
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.active = this.layer !== void 0 && this.stack?.active.id === this.layer.id;
 	}
 	updated() {
 		const id = this.layer?.id;
@@ -434,7 +465,6 @@ var PcLayerItem = class extends PcElement {
 	render() {
 		const { stack, layer } = this;
 		if (!stack || !layer) return html``;
-		const active = stack.active.id === layer.id;
 		return html`
       <pc-context-menu
         class="handle"
@@ -451,23 +481,20 @@ var PcLayerItem = class extends PcElement {
       >
       <div
         class="details"
-        @click=${(e) => this.onRowClick(e, stack, layer)}
+        @click=${(e) => this.onDetailsClick(e, layer)}
       >
         <canvas class="thumbnail" aria-hidden="true"></canvas>
-        <input
-          class="name ${active ? "active" : ""}"
-          aria-label=${this.t("paintCanvas.layers.name")}
-          .value=${layer.name}
-          @change=${(e) => this.onRename(e, stack, layer)}
-        />
-        <input
-          type="range"
+        <span class="name" title=${layer.name}>${layer.name}</span>
+        <pc-slider-range
+          single
+          class="opacity"
+          label=${this.t("paintCanvas.common.opacity")}
           min="0"
           max="100"
-          aria-label=${this.t("paintCanvas.common.opacity")}
-          .value=${String(Math.round(layer.opacity * 100))}
-          @change=${(e) => stack.update(layer.id, { opacity: Number(e.target.value) / 100 })}
-        />
+          unit="%"
+          .value=${live(Math.round(layer.opacity * 100))}
+          @pc-change=${(e) => stack.update(layer.id, { opacity: e.detail.value / 100 })}
+        ></pc-slider-range>
         <select
           aria-label=${this.t("paintCanvas.layers.blendMode")}
           @change=${(e) => stack.update(layer.id, { blendMode: e.target.value })}

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcLayerItem/style.css?inline
-var style_default = "/* A white row with space around its parts. The middle column can shrink, so the row never grows wider than its panel */\n:host {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) 30px 30px;\n  align-items: center;\n  column-gap: 6px;\n  position: relative;\n  padding: 6px;\n  border: 1px solid var(--pc-surface-active);\n  background: var(--pc-surface);\n}\n.name.active {\n  font-weight: bold;\n}\n.thumbnail {\n  width: 30px;\n  height: 30px;\n}\n/* Thumbnail on the left and name on the right; under them, opacity on the left and blend mode on the right. The blend\n   mode gets a set share of the width rather than its own: browsers size dropdowns differently (Safari and Firefox as\n   wide as the longest option, Chrome as the chosen one), which would otherwise push the row wider than its panel */\n.details {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 2fr);\n  align-items: center;\n  gap: 4px 6px;\n  min-width: 0;\n}\n.details .name {\n  grid-column: 2 / -1;\n}\n.details .name,\n.details select {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n.details input[type=\"range\"] {\n  grid-column: 1 / 3;\n  min-width: 0;\n  margin: 0;\n}\n/* The reorder handle drags with mouse, pen or touch (touch drags it rather than scrolling the panel) */\n.handle {\n  /* As tall as the row */\n  align-self: stretch;\n}\n.handle::part(button) {\n  min-width: 0;\n  padding: 0;\n  cursor: grab;\n  touch-action: none;\n}\n/* While dragged: the row floats with the pointer, out of the list (the layers menu places it), and the cursor shows\n   what dropping would do (\"+\" duplicates on \"New Layer\") */\n:host([dragging]) {\n  position: fixed;\n  z-index: 10;\n  opacity: 0.9;\n  background: Canvas;\n  box-shadow: var(--pc-shadow);\n}\n:host([dragging]) .handle::part(button) {\n  cursor: grabbing;\n}\n:host([drop-action=\"duplicate\"]) .handle::part(button) {\n  cursor: copy;\n}\n:host([drop-action=\"none\"]) .handle::part(button) {\n  cursor: no-drop;\n}\n/* Alpha lock and visibility: boxed icon toggles like the settings bar's, darker while on */\n.alpha-lock,\n.visibility {\n  width: 30px;\n  height: 30px;\n  padding: 2px;\n  border: 1px solid var(--pc-border);\n  border-radius: 4px;\n  background: var(--pc-surface);\n  cursor: pointer;\n}\n.alpha-lock:hover,\n.visibility:hover {\n  background: var(--pc-surface-hover);\n}\n.alpha-lock[aria-pressed=\"true\"],\n.visibility[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.alpha-lock:focus-visible,\n.visibility:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.alpha-lock img,\n.visibility img {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: auto;\n}\n";
+var style_default = "/* A white row with space around its parts. The middle column can shrink, so the row never grows wider than its panel */\n:host {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) 30px 30px;\n  align-items: center;\n  column-gap: 6px;\n  position: relative;\n  padding: 6px;\n  border: 1px solid var(--pc-surface-active);\n  background: var(--pc-surface);\n}\n/* The selected layer: purple, so it stands out */\n:host([active]) {\n  border-color: var(--pc-accent);\n  background: var(--pc-accent);\n  color: var(--pc-accent-text);\n}\n:host([active]) .name {\n  font-weight: bold;\n}\n/* The opacity slider's track and handle in the row's text colour, so they show on purple */\n:host([active]) .opacity {\n  --pc-accent: var(--pc-accent-text);\n  --pc-border: rgb(255 255 255 / 45%);\n}\n/* The name, on one line (cut short with \"…\"); renamed from the actions menu */\n.name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.thumbnail {\n  width: 30px;\n  height: 30px;\n}\n/* Thumbnail on the left and name on the right; under them, opacity, then blend mode, each the full width. The blend\n   mode never sets its own width: browsers size dropdowns differently (Safari and Firefox as wide as the longest option,\n   Chrome as the chosen one), which would otherwise push the row wider than its panel */\n.details {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr);\n  align-items: center;\n  gap: 4px 6px;\n  min-width: 0;\n}\n.details .opacity,\n.details select {\n  grid-column: 1 / -1;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n/* The reorder handle drags with mouse, pen or touch (touch drags it rather than scrolling the panel) */\n.handle {\n  /* As tall as the row */\n  align-self: stretch;\n}\n.handle::part(button) {\n  min-width: 0;\n  padding: 0;\n  cursor: grab;\n  touch-action: none;\n}\n/* While dragged: the row floats with the pointer, out of the list (the layers menu places it), and the cursor shows\n   what dropping would do (\"+\" duplicates on \"New Layer\") */\n:host([dragging]) {\n  position: fixed;\n  z-index: 10;\n  opacity: 0.9;\n  background: Canvas;\n  box-shadow: var(--pc-shadow);\n}\n:host([dragging]) .handle::part(button) {\n  cursor: grabbing;\n}\n:host([drop-action=\"duplicate\"]) .handle::part(button) {\n  cursor: copy;\n}\n:host([drop-action=\"none\"]) .handle::part(button) {\n  cursor: no-drop;\n}\n/* Alpha lock and visibility: boxed icon toggles like the settings bar's, darker while on */\n.alpha-lock,\n.visibility {\n  width: 30px;\n  height: 30px;\n  padding: 2px;\n  border: 1px solid var(--pc-border);\n  border-radius: 4px;\n  background: var(--pc-surface);\n  cursor: pointer;\n}\n.alpha-lock:hover,\n.visibility:hover {\n  background: var(--pc-surface-hover);\n}\n.alpha-lock[aria-pressed=\"true\"],\n.visibility[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.alpha-lock:focus-visible,\n.visibility:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.alpha-lock img,\n.visibility img {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: auto;\n}\n";
 export { style_default as default };

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

@@ -94,9 +94,10 @@ var PcSliderRange = class extends PcElement {
         border-radius: var(--pc-radius-pill);
         transform: translateY(-50%);
       }
+      /* The whole range: the same area the fill covers from min to max */
       .rail {
-        left: calc(var(--pc-range-thumb) / -2);
-        right: calc(var(--pc-range-thumb) / -2);
+        left: 0;
+        right: 0;
         background: var(--pc-border);
       }
       .fill {

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

@@ -1,10 +1,15 @@
 import { PcElement } from "../../base";
+/** Sizes of the switch: `m` (20px high, the default) and `s` (16px high, e.g. in toolbars) */
+export declare const TOGGLE_SIZES: readonly ["m", "s"];
+export type ToggleSize = (typeof TOGGLE_SIZES)[number];
 /**
- * An on/off switch with its text (the element's content) beside it, e.g. for settings. Fires `change` when the user
- * turns it on or off.
+ * An on/off switch with its text (the element's content) beside it, e.g. for settings. Use it instead of plain
+ * checkboxes. It comes in two sizes (`size`: `m`, 20px high, by default, or `s`, 16px high), both pressable over at
+ * least 24px of height. Fires `change` when the user turns it on or off.
  *
  * @example
  * html`<pc-toggle-checkbox .checked=${pinchZoom} @change=${toggle}>Pinch to zoom</pc-toggle-checkbox>`
+ * html`<pc-toggle-checkbox size="s">Show stroke points</pc-toggle-checkbox>`
  */
 export declare class PcToggleCheckbox extends PcElement {
     static properties: {
@@ -16,6 +21,10 @@ export declare class PcToggleCheckbox extends PcElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -30,6 +39,8 @@ export declare class PcToggleCheckbox extends PcElement {
     static styles: import("lit").CSSResultGroup[];
     checked: boolean;
     disabled: boolean;
+    /** The switch's size: `m` (default) or `s` */
+    size: ToggleSize;
     constructor();
     /** Follow the user's change, and tell listeners */
     private onChange;