@lvl99dotcom/paintcanvas 0.5.0 → 0.7.0

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

@@ -0,0 +1,385 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcDialogWindow/index.ts
+/** Event fired when the user asks to close a dialog window (detail: `{ reason }`); cancel it to keep the window open */
+var DIALOG_DISMISS_EVENT = "pc-dismiss";
+/** Header and footer slots, from start to end */
+var REGIONS = [
+	"start",
+	"middle",
+	"end"
+];
+/** Reads a boolean attribute that's on unless it's `"false"` (for options that are on by default) */
+var onUnlessFalse = {
+	fromAttribute: (value) => value !== null && value !== "false",
+	toAttribute: (value) => value ? "" : "false"
+};
+/** How many open modal windows are keeping the page from scrolling */
+var scrollLocks = 0;
+/** The page's own `overflow` while windows keep it from scrolling, to put back */
+var pageOverflow = "";
+/**
+* Keep the page from scrolling (or let it scroll again once every window that kept it from scrolling has closed).
+*/
+var lockPageScroll = (lock) => {
+	const root = document.documentElement;
+	if (lock && scrollLocks++ === 0) {
+		pageOverflow = root.style.overflow;
+		root.style.overflow = "hidden";
+	} else if (!lock && --scrollLocks === 0) root.style.overflow = pageOverflow;
+};
+/**
+* The element with keyboard focus, inside shadow roots too.
+*/
+var focusedElement = () => {
+	let focused = document.activeElement;
+	while (focused?.shadowRoot?.activeElement) focused = focused.shadowRoot.activeElement;
+	return focused;
+};
+/**
+* Whether a named slot has content (only elements can go in named slots).
+*/
+var hasContent = (slot) => slot.assignedElements({ flatten: true }).length > 0;
+/**
+* A window over the page, built on the browser's `<dialog>`: centred in the viewport, never bigger than it, with a
+* header, a body and a footer. While it's `open`, the rest of the page can't be used or scrolled and keyboard focus stays
+* in it (moving to its first control, and back to where it was once it closes).
+*
+* Content goes in its slots: `header-start`, `header-middle` (which names the window for screen readers, unless it has a
+* `label`; `description` describes it), `header-end`, `body` (or no slot), `footer-start`, `footer-middle` and `footer-end`. The body scrolls when
+* there's too much to fit, keeping the header and footer in view. The header and footer only show with content (or the
+* ⨉ button).
+*
+* Options:
+* - `closable` (on by default; `closable="false"` turns it off): a ⨉ button at the top right.
+* - `shaded`: shade the page under it.
+* - `dismissible` (on by default; `dismissible="false"` turns it off): a press outside it closes it.
+* - `inline`: cover only its nearest positioned ancestor instead of the whole page, which stays usable (and scrolls).
+*
+* The ⨉ button, a press outside it (while `dismissible`) and Escape (while `closable` or `dismissible`) fire a cancellable
+* `pc-dismiss` event (detail: `{ reason }`, one of `close`, `outside` or `escape`); unless it's cancelled, the window
+* closes (`open` becomes false). `--pc-dialog-width` sets its width (fitted to its content by default).
+*
+* @example
+* html`<pc-dialog-window open shaded label="Keyboard shortcuts" @pc-dismiss=${close}>
+*   <h2 slot="header-middle">Keyboard shortcuts</h2>
+*   <pc-shortcut-settings slot="body" .settings=${settings}></pc-shortcut-settings>
+*   <pc-button slot="footer-end" @click=${close}>Done</pc-button>
+* </pc-dialog-window>`
+*/
+var PcDialogWindow = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		open: {
+			type: Boolean,
+			reflect: true
+		},
+		closable: {
+			converter: onUnlessFalse,
+			reflect: true
+		},
+		shaded: {
+			type: Boolean,
+			reflect: true
+		},
+		dismissible: {
+			converter: onUnlessFalse,
+			reflect: true
+		},
+		inline: {
+			type: Boolean,
+			reflect: true
+		},
+		label: { type: String },
+		description: { type: String },
+		filled: { state: true }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: contents;
+        --pc-dialog-gutter: var(--pc-space-3);
+      }
+      /* Inline: over the nearest positioned ancestor, while open */
+      :host([inline]) {
+        position: absolute;
+        z-index: 20;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        padding: var(--pc-dialog-gutter);
+      }
+      :host([inline]:not([open])) {
+        display: none;
+      }
+      :host([inline][shaded]) {
+        background: var(--pc-backdrop);
+      }
+      dialog {
+        max-width: none;
+        max-height: none;
+        margin: auto;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--pc-text);
+        overflow: visible;
+      }
+      dialog[open] {
+        display: flex;
+      }
+      :host([inline]) dialog {
+        position: static;
+        max-height: 100%;
+        margin: 0;
+      }
+      dialog::backdrop {
+        background: transparent;
+      }
+      :host([shaded]) dialog::backdrop {
+        background: var(--pc-backdrop);
+      }
+      .window {
+        display: flex;
+        box-sizing: border-box;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+        width: var(--pc-dialog-width, auto);
+        max-width: calc(100vw - 2 * var(--pc-dialog-gutter));
+        /* The visible viewport's height where browsers have it, so phones' toolbars don't cover the footer */
+        max-height: calc(100vh - 2 * var(--pc-dialog-gutter));
+        max-height: calc(100dvh - 2 * var(--pc-dialog-gutter));
+        padding: var(--pc-space-3);
+        border-radius: var(--pc-radius);
+        background: var(--pc-surface-raised);
+        color: var(--pc-text);
+        box-shadow: var(--pc-shadow);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      :host([inline]) .window {
+        max-height: 100%;
+      }
+      header,
+      footer {
+        display: flex;
+        flex: none;
+        align-items: center;
+        gap: var(--pc-space-2);
+      }
+      [hidden] {
+        display: none !important;
+      }
+      .start,
+      .end {
+        display: flex;
+        flex: none;
+        align-items: center;
+        gap: var(--pc-space-2);
+      }
+      .middle {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+        min-width: 0;
+      }
+      .end {
+        margin-left: auto;
+      }
+      /* Scrolls when there's too much to fit; the padding keeps focus outlines in view */
+      .body {
+        flex: 1 1 auto;
+        min-height: 0;
+        margin: calc(-1 * var(--pc-space-1));
+        padding: var(--pc-space-1);
+        overflow: auto;
+        overscroll-behavior: contain;
+      }
+      button.close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--pc-control-size);
+        height: var(--pc-control-size);
+        padding: 0;
+        border: 0;
+        border-radius: var(--pc-radius-pill);
+        background: transparent;
+        color: var(--pc-text);
+        font: inherit;
+        font-size: 20px;
+        line-height: 1;
+        cursor: pointer;
+      }
+      button.close:hover {
+        background: var(--pc-surface-hover);
+      }
+      button.close:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+      }
+    `];
+	/** Whether it's keeping the page from scrolling */
+	scrollLocked = false;
+	/** What had focus before it opened, to give it back to if it's taken out of the page while open */
+	returnFocus = null;
+	/** Whether the `<dialog>` was last shown inline (not modal) */
+	shownInline = false;
+	/** Whether the press being made started outside the window */
+	pressedOutside = false;
+	constructor() {
+		super();
+		this.open = false;
+		this.closable = true;
+		this.shaded = false;
+		this.dismissible = true;
+		this.inline = false;
+		this.filled = /* @__PURE__ */ new Set();
+	}
+	/** The `<dialog>` it's built on */
+	get dialog() {
+		return this.renderRoot.querySelector("dialog");
+	}
+	/**
+	* Ask to close the window, as the user would: fires `pc-dismiss` (detail: `{ reason }`), and closes it unless that's
+	* cancelled.
+	*
+	* @example
+	* dialogWindow.requestClose("close");
+	*/
+	requestClose(reason) {
+		const event = new CustomEvent(DIALOG_DISMISS_EVENT, {
+			detail: { reason },
+			cancelable: true
+		});
+		if (this.dispatchEvent(event)) this.open = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasUpdated) this.syncOpen();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		const dialog = this.dialog;
+		if (dialog?.open) {
+			dialog.close();
+			if (this.returnFocus?.isConnected) this.returnFocus.focus();
+		}
+		this.syncScrollLock();
+	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		this.updateRegions();
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("open") || changed.has("inline")) this.syncOpen();
+	}
+	/**
+	* Show or close the `<dialog>` to match `open` (modal unless `inline`), keeping the page from scrolling while a modal
+	* window is open.
+	*/
+	syncOpen() {
+		const dialog = this.dialog;
+		if (dialog.open && (!this.open || this.shownInline !== this.inline)) dialog.close();
+		if (this.open && !dialog.open && this.isConnected) {
+			this.shownInline = this.inline;
+			this.returnFocus = focusedElement();
+			if (this.inline) dialog.show();
+			else dialog.showModal();
+		}
+		this.syncScrollLock();
+	}
+	/** Keep the page from scrolling while a modal window is open in it, and let it scroll again otherwise */
+	syncScrollLock() {
+		const lock = this.open && !this.inline && this.isConnected;
+		if (lock === this.scrollLocked) return;
+		this.scrollLocked = lock;
+		lockPageScroll(lock);
+	}
+	/** Note which header and footer slots have content: only those (and the header and footer with them) are shown */
+	updateRegions() {
+		this.filled = new Set([...this.renderRoot.querySelectorAll("slot[name]")].filter(hasContent).map((slot) => slot.name));
+	}
+	/** Whether any of a header's or footer's slots have content */
+	hasRegion(region) {
+		return REGIONS.some((place) => this.filled.has(`${region}-${place}`));
+	}
+	onKeyDown = (event) => {
+		if (event.key !== "Escape" || event.defaultPrevented) return;
+		event.preventDefault();
+		if (this.closable || this.dismissible) this.requestClose("escape");
+	};
+	onCancel = (event) => {
+		event.preventDefault();
+		if (this.closable || this.dismissible) this.requestClose("escape");
+	};
+	onClose = () => {
+		if (this.isConnected && this.open && !this.dialog?.open) this.open = false;
+	};
+	onPointerDown = (event) => {
+		this.pressedOutside = event.target === event.currentTarget;
+	};
+	onClick = (event) => {
+		const outside = this.pressedOutside && event.target === event.currentTarget;
+		this.pressedOutside = false;
+		if (outside && this.dismissible) this.requestClose("outside");
+	};
+	/** A header or footer's start, middle and end slots */
+	renderRegion(region, end = nothing) {
+		return REGIONS.map((place) => html`<div
+          class=${place}
+          part="${region}-${place}"
+          ?hidden=${!this.filled.has(`${region}-${place}`) && (place !== "end" || end === nothing)}
+          id=${region === "header" && place === "middle" ? "title" : nothing}
+        >
+          <slot
+            name="${region}-${place}"
+            @slotchange=${this.updateRegions}
+          ></slot>
+          ${place === "end" ? end : nothing}
+        </div>`);
+	}
+	render() {
+		const closeButton = this.closable ? html`<button
+          type="button"
+          class="close"
+          part="close"
+          aria-label=${this.t("paintCanvas.common.close")}
+          title=${this.t("paintCanvas.common.close")}
+          @click=${() => this.requestClose("close")}
+        >
+          ⨉
+        </button>` : nothing;
+		return html`<dialog
+      part="dialog"
+      aria-label=${this.label || nothing}
+      aria-labelledby=${this.label ? nothing : "title"}
+      aria-description=${this.description || nothing}
+      @keydown=${this.onKeyDown}
+      @cancel=${this.onCancel}
+      @close=${this.onClose}
+      @pointerdown=${this.onPointerDown}
+      @click=${this.onClick}
+    >
+      <div class="window" part="window">
+        <header
+          part="header"
+          ?hidden=${!this.hasRegion("header") && !this.closable}
+        >
+          ${this.renderRegion("header", closeButton)}
+        </header>
+        <div class="body" part="body">
+          <slot name="body"></slot>
+          <slot></slot>
+        </div>
+        <footer part="footer" ?hidden=${!this.hasRegion("footer")}>
+          ${this.renderRegion("footer")}
+        </footer>
+      </div>
+    </dialog>`;
+	}
+};
+defineElement("pc-dialog-window", PcDialogWindow);
+export { DIALOG_DISMISS_EVENT, PcDialogWindow };

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 })}