@lvl99dotcom/paintcanvas 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,561 @@
+import style_default from "./style.js";
+import { NO_TEXT_SELECTION_CSS, WINDOWS_CSS } from "../../styles/index.js";
+import { PcElement, defineElement } from "../../base/index.js";
+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 { html, nothing, unsafeCSS } from "lit";
+// src/ui/elements/PcLayerItem/index.ts
+/** Blend mode options shown in the layer's select input */
+var BLEND_MODE_OPTIONS = [
+	{
+		value: BlendMode.Normal,
+		label: "blendMode.normal"
+	},
+	{
+		value: BlendMode.Screen,
+		label: "blendMode.screen"
+	},
+	{
+		value: BlendMode.Lighten,
+		label: "blendMode.lighten"
+	},
+	{
+		value: BlendMode.Multiply,
+		label: "blendMode.multiply"
+	},
+	{
+		value: BlendMode.Darken,
+		label: "blendMode.darken"
+	},
+	{
+		value: BlendMode.Overlay,
+		label: "blendMode.overlay"
+	}
+];
+/** Context menu options in display order, with the translation keys of their labels */
+var LAYER_ACTIONS = [
+	{
+		action: "mask",
+		label: "layers.createMask"
+	},
+	{
+		action: "duplicate",
+		label: "layers.duplicate"
+	},
+	{
+		action: "merge",
+		label: "layers.mergeDown"
+	},
+	{
+		action: "clear",
+		label: "layers.clear"
+	},
+	{
+		action: "delete",
+		label: "layers.delete"
+	},
+	{
+		action: "up",
+		label: "layers.moveUp"
+	},
+	{
+		action: "top",
+		label: "layers.moveToTop"
+	},
+	{
+		action: "down",
+		label: "layers.moveDown"
+	},
+	{
+		action: "bottom",
+		label: "layers.moveToBottom"
+	}
+];
+/**
+* What the user is asked before each confirmed action: the dialog's heading and message, and its choices (the first
+* does the action), as translation keys. The message is given the layer's `name`.
+*/
+var CONFIRMATIONS = {
+	merge: {
+		heading: "layers.mergeDownTitle",
+		message: "layers.mergeDownConfirm",
+		choices: [{
+			value: "merge",
+			label: "layers.mergeLayer"
+		}, {
+			value: CANCEL_CHOICE,
+			label: "common.dismiss",
+			variant: "dismiss"
+		}]
+	},
+	clear: {
+		heading: "layers.clearTitle",
+		message: "layers.clearConfirm",
+		choices: [{
+			value: "clear",
+			label: "common.clear"
+		}, {
+			value: CANCEL_CHOICE,
+			label: "common.dismiss",
+			variant: "dismiss"
+		}]
+	},
+	delete: {
+		heading: "layers.deleteTitle",
+		message: "layers.deleteConfirm",
+		choices: [{
+			value: "delete",
+			label: "common.delete"
+		}, {
+			value: CANCEL_CHOICE,
+			label: "common.dismiss",
+			variant: "dismiss"
+		}]
+	}
+};
+/** Thumbnail size in CSS pixels */
+var THUMBNAIL_SIZE = 30;
+/** Checkerboard square size in thumbnail pixels */
+var THUMBNAIL_CHECKER_SIZE = 5;
+/** Event a row dispatches when it opens its context menu, so other rows close theirs */
+var LAYER_MENU_OPEN_EVENT = "pc-layer-menu-open";
+/** Event a row dispatches to ask for a mask from the layer's alpha (Cmd/Ctrl + click on the thumbnail or name, or "Create mask") */
+var LAYER_ALPHA_MASK_EVENT = "pc-layer-alpha-mask";
+/** How far (CSS pixels) the pointer moves on the reorder handle before it drags the layer, rather than opening the menu */
+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";
+/** Space kept between the layer actions menu and the window's edges */
+var MENU_MARGIN = 8;
+/**
+* Where the layer actions menu's top goes: level with the handle, moved up as far as needed to stay in the window
+* (but never above its top margin).
+*
+* @example
+* menuTop(700, 300, 800); // 492 (moved up to fit)
+* menuTop(100, 300, 800); // 100
+*/
+var menuTop = (anchorTop, menuHeight, viewportHeight, margin = 8) => Math.max(margin, Math.min(anchorTop, viewportHeight - margin - menuHeight));
+/**
+* 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.
+* 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
+* mask" in the menu) makes a mask from the layer's pixels. "Merge down…" asks first, then merges the layer into the one
+* under it (not offered for the bottom layer, or when either is hidden).
+*
+* @example
+* html`<pc-layer-item .stack=${stack} .layer=${layer}></pc-layer-item>`
+*/
+var PcLayerItem = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		stack: { attribute: false },
+		layer: { attribute: false },
+		background: { attribute: false },
+		menuOpen: { state: true },
+		confirming: { state: true },
+		dragging: {
+			type: Boolean,
+			reflect: true
+		},
+		dropAction: {
+			attribute: "drop-action",
+			reflect: true
+		}
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(NO_TEXT_SELECTION_CSS),
+		unsafeCSS(style_default),
+		unsafeCSS(WINDOWS_CSS)
+	];
+	/** 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) */
+	suppressClick = false;
+	changes = new ChangeController(this, () => [this.stack]);
+	/** Device pixels per CSS pixel (replaceable for tests) */
+	pixelRatio = () => window.devicePixelRatio || 1;
+	constructor() {
+		super();
+		this.menuOpen = false;
+		this.dragging = false;
+	}
+	/**
+	* Run a context menu action. Merging down, clearing and deleting ask for confirmation first (see `confirmed`).
+	*/
+	runAction(action) {
+		const { stack, layer } = this;
+		this.menuOpen = false;
+		if (!stack || !layer || !this.canRun(action)) return;
+		switch (action) {
+			case "mask":
+				this.requestMask(layer, {
+					shiftKey: false,
+					altKey: false
+				});
+				break;
+			case "duplicate":
+				stack.duplicate(layer.id);
+				break;
+			case "merge":
+			case "clear":
+			case "delete":
+				this.confirming = action;
+				break;
+			case "up":
+				stack.moveUp(layer.id);
+				break;
+			case "top":
+				stack.moveToTop(layer.id);
+				break;
+			case "down":
+				stack.moveDown(layer.id);
+				break;
+			case "bottom": stack.moveToBottom(layer.id);
+		}
+	}
+	/**
+	* Whether a context menu action can be done to the layer now: not merging down the bottom layer (or with a hidden
+	* layer), deleting the only layer, or moving a layer further up or down than it can go.
+	*/
+	canRun(action) {
+		const { stack, layer } = this;
+		if (!stack || !layer) return false;
+		const index = stack.indexOf(layer.id);
+		const last = stack.layers.length - 1;
+		switch (action) {
+			case "merge": return stack.canMergeDown(layer.id);
+			case "delete": return last > 0;
+			case "up":
+			case "top": return index > 0;
+			case "down":
+			case "bottom": return index < last;
+			default: return true;
+		}
+	}
+	/**
+	* Do an action the user confirmed.
+	*/
+	confirmed(action) {
+		const { stack, layer } = this;
+		this.confirming = void 0;
+		if (!stack || !layer) return;
+		if (action === "merge") stack.mergeDown(layer.id);
+		else if (action === "clear") stack.clear(layer.id);
+		else stack.remove(layer.id);
+	}
+	onOutsidePointer = (event) => {
+		if (!event.composedPath().includes(this)) this.menuOpen = false;
+	};
+	onKeyDown = (event) => {
+		if (event.key === "Escape") this.menuOpen = false;
+	};
+	/**
+	* Open the context menu on right-click, or close it if open.
+	*/
+	onContextMenu(event) {
+		event.preventDefault();
+		this.toggleMenu();
+	}
+	/**
+	* Open the context menu on a click or tap on the handle (or Enter or Space), or close it if open; a click that ends a
+	* drag does nothing.
+	*/
+	onHandleClick() {
+		if (this.suppressClick) {
+			this.suppressClick = false;
+			return;
+		}
+		this.toggleMenu();
+	}
+	/**
+	* Open the context menu (closing other rows' menus), or close it if open.
+	*/
+	toggleMenu() {
+		this.menuOpen = !this.menuOpen;
+		if (this.menuOpen) this.dispatchEvent(new CustomEvent(LAYER_MENU_OPEN_EVENT, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.listenOutside(false);
+		this.endPress();
+	}
+	/** Tell the layers menu about a drag of this row's layer */
+	emitDrag(phase, x, y) {
+		this.dispatchEvent(new CustomEvent(LAYER_DRAG_EVENT, {
+			detail: {
+				layer: this.layer,
+				phase,
+				x,
+				y
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Press on the reorder handle: follow the pointer, which drags once it has moved far enough. The pointer is followed
+	* on the whole window, as browsers don't always grant pointer capture; it is asked for too, so a touch keeps dragging
+	* after leaving the handle.
+	*/
+	onHandlePointerDown(event) {
+		if (event.button !== 0) return;
+		this.press = {
+			pointerId: event.pointerId,
+			x: event.clientX,
+			y: event.clientY,
+			dragging: false
+		};
+		event.currentTarget.setPointerCapture(event.pointerId);
+		window.addEventListener("pointermove", this.onHandlePointerMove);
+		window.addEventListener("pointerup", this.onHandlePointerUp);
+		window.addEventListener("pointercancel", this.onHandlePointerCancel);
+	}
+	/**
+	* Start dragging once the pointer has moved {@link DRAG_THRESHOLD} pixels, then report where it is.
+	*/
+	onHandlePointerMove = (event) => {
+		const press = this.press;
+		if (press?.pointerId !== event.pointerId) return;
+		if (!press.dragging) {
+			if (Math.hypot(event.clientX - press.x, event.clientY - press.y) < 4) return;
+			press.dragging = true;
+			window.addEventListener("keydown", this.onDragKeyDown);
+			this.emitDrag("start", event.clientX, event.clientY);
+		}
+		this.emitDrag("move", event.clientX, event.clientY);
+	};
+	/**
+	* Drop the layer where the pointer is, if it was dragged (a press without dragging opens the menu, on its click).
+	*/
+	onHandlePointerUp = (event) => {
+		if (this.press?.pointerId !== event.pointerId) return;
+		if (this.press.dragging) {
+			this.suppressClick = true;
+			this.emitDrag("end", event.clientX, event.clientY);
+		}
+		this.endPress();
+	};
+	/**
+	* Cancel a drag when the browser cancels the pointer (e.g. a system gesture).
+	*/
+	onHandlePointerCancel = (event) => {
+		if (this.press?.pointerId !== event.pointerId) return;
+		if (this.press.dragging) this.emitDrag("cancel", event.clientX, event.clientY);
+		this.endPress();
+	};
+	/** Escape cancels a drag, leaving the layer where it was */
+	onDragKeyDown = (event) => {
+		const press = this.press;
+		if (event.key !== "Escape" || !press) return;
+		this.suppressClick = true;
+		this.emitDrag("cancel", press.x, press.y);
+		this.endPress();
+	};
+	/** Stop following the pointer pressed on the handle */
+	endPress() {
+		this.press = void 0;
+		window.removeEventListener("keydown", this.onDragKeyDown);
+		window.removeEventListener("pointermove", this.onHandlePointerMove);
+		window.removeEventListener("pointerup", this.onHandlePointerUp);
+		window.removeEventListener("pointercancel", this.onHandlePointerCancel);
+	}
+	/**
+	* Start or stop listening for clicks outside and Escape while the menu is open.
+	*/
+	listenOutside(listen) {
+		const method = listen ? "addEventListener" : "removeEventListener";
+		window[method]("pointerdown", this.onOutsidePointer, true);
+		window[method]("keydown", this.onKeyDown);
+		window[method]("scroll", this.onScroll, true);
+	}
+	onScroll = () => {
+		this.menuOpen = false;
+	};
+	/**
+	* Place the open layer actions menu beside the reorder handle, floating over the layers panel (so the panel's edges
+	* don't cut it off) and kept within the window.
+	*/
+	placeMenu() {
+		const menu = this.renderRoot.querySelector("menu");
+		if (!menu) return;
+		const anchor = this.renderRoot.querySelector(".handle").getBoundingClientRect();
+		menu.style.left = `${anchor.right}px`;
+		menu.style.top = `${menuTop(anchor.top, menu.offsetHeight, window.innerHeight)}px`;
+	}
+	/**
+	* Ask for a mask following the layer's alpha (Shift adds, Alt subtracts; otherwise it replaces the mask).
+	*/
+	requestMask(layer, keys) {
+		this.dispatchEvent(new CustomEvent(LAYER_ALPHA_MASK_EVENT, {
+			detail: {
+				layer,
+				shiftKey: keys.shiftKey,
+				altKey: keys.altKey
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Clicking the row selects the layer. Cmd/Ctrl + click on the thumbnail or name also makes a mask from the layer's alpha.
+	*/
+	onRowClick(event, stack, layer) {
+		stack.select(layer.id);
+		if (!event.metaKey && !event.ctrlKey) return;
+		const target = event.composedPath()[0];
+		if (!(target instanceof Element) || !target.matches(".thumbnail, .name")) return;
+		event.preventDefault();
+		this.requestMask(layer, event);
+	}
+	/**
+	* Rename a layer when the name input changes. Empty names are reverted.
+	*/
+	onRename(event, stack, layer) {
+		const input = event.target;
+		try {
+			stack.rename(layer.id, input.value);
+		} catch {
+			input.value = layer.name;
+		}
+	}
+	updated(changed) {
+		if (changed.has("menuOpen")) {
+			this.listenOutside(this.menuOpen);
+			if (this.menuOpen) this.placeMenu();
+		}
+		const id = this.layer?.id;
+		if (this.background && id) this.background.run(`thumbnail ${id}`, () => this.drawThumbnail());
+		else this.drawThumbnail();
+	}
+	/**
+	* Draw the layer's image, scaled to fit, on a checkerboard that shows transparency.
+	*/
+	drawThumbnail() {
+		const layer = this.layer;
+		const canvas = this.renderRoot.querySelector("canvas.thumbnail");
+		if (!layer || !canvas) return;
+		const ratio = this.pixelRatio();
+		const size = Math.round(30 * ratio);
+		canvas.width = size;
+		canvas.height = size;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		drawCheckerboard(ctx, size, size, 5 * ratio);
+		const fitted = fitSize(layer.width, layer.height, size, size);
+		ctx.imageSmoothingEnabled = true;
+		ctx.drawImage(layer.canvas, (size - fitted.width) / 2, (size - fitted.height) / 2, fitted.width, fitted.height);
+	}
+	/** The dialog asking the user to confirm an action, while asking */
+	renderConfirmation(layer) {
+		const action = this.confirming;
+		if (!action) return nothing;
+		const { heading, message, choices } = CONFIRMATIONS[action];
+		return html`<pc-dialog
+      heading=${this.t(heading)}
+      message=${this.t(message, { name: layer.name })}
+      .choices=${choices.map((choice) => ({
+			...choice,
+			label: this.t(choice.label)
+		}))}
+      @pc-choose=${(e) => {
+			e.stopPropagation();
+			if (e.detail.value === action) this.confirmed(action);
+			else this.confirming = void 0;
+		}}
+    ></pc-dialog>`;
+	}
+	render() {
+		const { stack, layer } = this;
+		if (!stack || !layer) return html``;
+		const active = stack.active.id === layer.id;
+		return html`
+      <button
+        type="button"
+        class="handle"
+        aria-label=${this.t("layers.reorder", { name: layer.name })}
+        aria-haspopup="menu"
+        aria-expanded=${this.menuOpen ? "true" : "false"}
+        @contextmenu=${this.onContextMenu}
+        @click=${this.onHandleClick}
+        @pointerdown=${this.onHandlePointerDown}
+      >
+        ⠿
+      </button>
+      <div
+        class="details"
+        @click=${(e) => this.onRowClick(e, stack, layer)}
+      >
+        <canvas class="thumbnail" aria-hidden="true"></canvas>
+        <input
+          class="name ${active ? "active" : ""}"
+          aria-label=${this.t("layers.name")}
+          .value=${layer.name}
+          @change=${(e) => this.onRename(e, stack, layer)}
+        />
+        <input
+          type="range"
+          min="0"
+          max="100"
+          aria-label=${this.t("common.opacity")}
+          .value=${String(Math.round(layer.opacity * 100))}
+          @change=${(e) => stack.update(layer.id, { opacity: Number(e.target.value) / 100 })}
+        />
+        <select
+          aria-label=${this.t("layers.blendMode")}
+          @change=${(e) => stack.update(layer.id, { blendMode: e.target.value })}
+        >
+          ${BLEND_MODE_OPTIONS.map(({ value, label }) => html`<option
+                value=${value}
+                ?selected=${layer.blendMode === value}
+              >
+                ${this.t(label)}
+              </option>`)}
+        </select>
+      </div>
+      <button
+        type="button"
+        class="alpha-lock"
+        aria-label=${this.t("layers.alphaLock")}
+        aria-pressed=${layer.alphaLock}
+        @click=${() => stack.update(layer.id, { alphaLock: !layer.alphaLock })}
+      >
+        <img
+          src=${this.iconUrl(layer.alphaLock ? "locked" : "unlocked")}
+          alt=""
+        />
+      </button>
+      <button
+        type="button"
+        class="visibility"
+        aria-label=${this.t("layers.visible")}
+        aria-pressed=${layer.visible}
+        @click=${() => stack.update(layer.id, { visible: !layer.visible })}
+      >
+        <img src=${this.iconUrl(layer.visible ? "visible" : "hidden")} alt="" />
+      </button>
+      ${this.menuOpen ? html`<menu aria-label=${this.t("layers.actions")}>
+              ${LAYER_ACTIONS.map(({ action, label }) => html`<li>
+                    <button
+                      type="button"
+                      data-action=${action}
+                      ?disabled=${!this.canRun(action)}
+                      @click=${() => this.runAction(action)}
+                    >
+                      ${this.t(label)}
+                    </button>
+                  </li>`)}
+            </menu>` : nothing}
+      ${this.renderConfirmation(layer)}
+    `;
+	}
+};
+defineElement("pc-layer-item", PcLayerItem);
+export { BLEND_MODE_OPTIONS, CONFIRMATIONS, DRAG_THRESHOLD, LAYER_ACTIONS, LAYER_ALPHA_MASK_EVENT, LAYER_DRAG_EVENT, LAYER_MENU_OPEN_EVENT, MENU_MARGIN, PcLayerItem, THUMBNAIL_CHECKER_SIZE, THUMBNAIL_SIZE, menuTop };

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

@@ -0,0 +1,3 @@
+// src/ui/elements/PcLayerItem/style.css?inline
+var style_default = "/* A white row with space around its parts */\n:host {\n  display: grid;\n  grid-template-columns: 30px 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 */\n.details {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 4px 6px;\n}\n.details .name {\n  grid-column: 2 / -1;\n  min-width: 0;\n}\n.details input[type=\"range\"] {\n  grid-column: 1 / 3;\n  min-width: 0;\n  margin: 0;\n}\n/* Like the chat's ⋮ menu: white and rounded, with plain items highlighted on hover. It floats beside the handle (placed\n   by `placeMenu`), so the layers panel's edges don't cut it off */\nmenu {\n  position: fixed;\n  z-index: 20;\n  min-width: 160px;\n  margin: 0;\n  padding: 4px 0;\n  border-radius: 12px;\n  list-style: none;\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  box-shadow: var(--pc-shadow);\n}\nmenu button {\n  width: 100%;\n  min-height: 32px;\n  padding: 4px 16px;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  white-space: nowrap;\n  cursor: pointer;\n}\nmenu button:hover:not(:disabled),\nmenu button:focus-visible {\n  background: var(--pc-bar);\n}\n/* Actions the layer can't take (e.g. moving the top layer up) */\nmenu button:disabled {\n  opacity: 0.4;\n  cursor: default;\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  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 {\n  cursor: grabbing;\n}\n:host([drop-action=\"duplicate\"]) .handle {\n  cursor: copy;\n}\n:host([drop-action=\"none\"]) .handle {\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/PcLayersMenu/index.d.ts

@@ -0,0 +1,108 @@
+import { PcElement } from "../../base";
+import { type LayerDropAction } from "../PcLayerItem";
+import "../PcLayerItem";
+import type PaintCanvas from "../../../lib/classes/PaintCanvas";
+/** A layer being dragged by its reorder handle, where its row floats, and where dropping it now would put it */
+interface LayerDrag {
+    id: string;
+    name: string;
+    action: LayerDropAction;
+    /** Where it would land among the other layers (0 is the first row), when moving */
+    slot?: number | undefined;
+    /** The pointer, in the viewport */
+    x: number;
+    y: number;
+    /** Where the pointer grabbed the row, from its top left, and the row's size, so the row floats as it was grabbed */
+    offsetX: number;
+    offsetY: number;
+    width: number;
+    /** The ghost is as tall as the row, so the list doesn't shift when the row lifts out */
+    height: number;
+}
+/**
+ * Whether a point is inside a rectangle (edges included).
+ *
+ * @example
+ * isInside(element.getBoundingClientRect(), event.clientX, event.clientY);
+ */
+export declare const isInside: (rect: DOMRect, x: number, y: number) => boolean;
+/**
+ * Where a dragged layer would land among the other rows: before the first row whose middle is below the pointer, or
+ * after the last. The ghost showing the place is left out, so the place doesn't jump when the ghost moves.
+ *
+ * @param rows - the other rows' top and height, in list order
+ * @param ghost - the ghost's top and height, if shown
+ *
+ * @example
+ * dropSlot([{ top: 0, height: 30 }, { top: 30, height: 30 }], 40); // 1
+ */
+export declare const dropSlot: (rows: readonly {
+    top: number;
+    height: number;
+}[], y: number, ghost?: {
+    top: number;
+    height: number;
+}) => number;
+/**
+ * Layers menu: the user's layers from top to bottom and a "New Layer" button.
+ *
+ * Dragging a layer's reorder handle lifts its row out of the list to float with the pointer, and leaves a ghost with the
+ * layer's name in the list where it would land: where it was, until it is moved somewhere else. Dropping it moves it
+ * there, and dropping it on "New Layer" duplicates it (the cursor shows "+", and the button is
+ * highlighted for touch). Escape cancels the drag. Moves and duplicates are announced to screen readers.
+ *
+ * @example
+ * html`<pc-layers-menu .app=${app}></pc-layers-menu>`
+ */
+export declare class PcLayersMenu extends PcElement {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        drag: {
+            state: boolean;
+        };
+        announcement: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    app?: PaintCanvas;
+    /** The layer being dragged, if any */
+    drag?: LayerDrag | undefined;
+    /** The last move or duplicate, for screen readers */
+    announcement: string;
+    private changes;
+    constructor();
+    /**
+     * Follow a layer dragged by its reorder handle: show where it would land, then move or duplicate it when dropped.
+     */
+    private onLayerDrag;
+    /**
+     * What dropping the dragged layer at a point would do: nothing outside the menu, duplicate it on "New Layer" (if
+     * another layer can be made), otherwise move it to the place among the other rows nearest the pointer.
+     */
+    private dropTarget;
+    /**
+     * Move or duplicate the dropped layer, and tell screen readers what happened.
+     */
+    private drop;
+    /**
+     * The rows, with a ghost (the dragged layer's name) where it would land, counting only the other rows: where it was,
+     * unless it would move. The dragged row floats with the pointer, out of the list. Rows are keyed by layer, so each
+     * layer keeps its row (and a drag its handle) as the ghost moves.
+     */
+    private renderRows;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};