@lvl99dotcom/paintcanvas 0.3.0 → 0.4.0

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

@@ -1,15 +1,41 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import { PcMenu } from "../PcMenu/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcContextMenu/index.ts
+/** Space kept between a context menu's menu and the window's edges */
+var MENU_MARGIN = 8;
+/** Event fired when a context menu opens or closes (detail: `{ open }`) */
+var CONTEXT_MENU_TOGGLE_EVENT = "pc-toggle";
 /**
-* A menu of actions, e.g. for a layer. While `open`, it shows its items at `x`, `y` (in the page's viewport) and takes
-* keyboard focus: arrow keys, Home and End move between items, Enter or Space chooses one, and Escape or Tab closes it.
-* Fires `pc-select` with the chosen item's value, and `pc-close` when it should close (after choosing, Escape, Tab, or a
-* press outside it). The implementer sets `open` to false in response.
+* Where a menu's top goes: level with its anchor, moved up as far as needed to stay in the window (but never above its
+* top margin).
 *
 * @example
-* html`<pc-context-menu open .x=${10} .y=${20} label="Layer actions" .items=${items}
-*   @pc-select=${(e) => act(e.detail.value)} @pc-close=${close}></pc-context-menu>`
+* 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));
+/**
+* Where a menu's left edge goes: at `left`, moved left as far as needed to stay in the window (but never past its left
+* margin).
+*
+* @example
+* menuLeft(900, 200, 1000); // 792 (moved left to fit)
+*/
+var menuLeft = (left, menuWidth, viewportWidth, margin = 8) => Math.max(margin, Math.min(left, viewportWidth - margin - menuWidth));
+/**
+* A button that opens a menu (`pc-menu`): its `icon` slot is what the button shows (⋮ by default), and its `menu` slot
+* takes the `pc-menu` to open. Without one, it opens its own menu of `items`. Pressing the button (or right-clicking
+* it) opens the menu under it (or beside it, with `placement="beside"`), kept within the window; choosing an item,
+* pressing outside, Escape, Tab, scrolling or pressing the button again closes it, and focus returns to the button.
+*
+* Fires `pc-toggle` (detail: `{ open }`) when it opens or closes. The menu's `pc-select` (detail: `{ value }`) reaches
+* the context menu's listeners.
+*
+* @example
+* html`<pc-context-menu label="Layer actions" .items=${items} @pc-select=${(e) => act(e.detail.value)}>
+*   <pc-icon slot="icon" name="menu"></pc-icon>
+* </pc-context-menu>`
 */
 var PcContextMenu = class extends PcElement {
 	static properties = {
@@ -20,129 +46,134 @@ var PcContextMenu = class extends PcElement {
 		},
 		items: { attribute: false },
 		label: { type: String },
-		x: { type: Number },
-		y: { type: Number }
+		menuLabel: {
+			type: String,
+			attribute: "menu-label"
+		},
+		placement: { type: String },
+		disabled: {
+			type: Boolean,
+			reflect: true
+		}
 	};
 	static styles = [PcElement.styles, css`
       :host {
-        position: fixed;
-        z-index: 10;
-        display: none;
-      }
-      :host([open]) {
-        display: block;
-      }
-      [role="menu"] {
-        display: flex;
-        min-width: 160px;
-        flex-direction: column;
-        padding: var(--pc-space-1) 0;
-        border-radius: var(--pc-radius);
-        background: var(--pc-surface-raised);
-        box-shadow: var(--pc-shadow);
+        display: inline-flex;
       }
       button {
-        padding: var(--pc-space-2) var(--pc-space-3);
-        border: 0;
-        background: transparent;
+        display: inline-flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--pc-control-size);
+        min-height: var(--pc-control-size);
+        padding: 0 var(--pc-space-1);
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface);
         color: var(--pc-text);
-        font-family: var(--pc-font);
-        font-size: var(--pc-font-size);
-        text-align: start;
+        font: inherit;
         cursor: pointer;
       }
       button:hover:not(:disabled),
-      button:focus-visible {
+      :host([open]) button {
         background: var(--pc-surface-hover);
-        outline: none;
       }
       button:focus-visible {
-        box-shadow: inset 0 0 0 var(--pc-focus-width) var(--pc-focus);
-      }
-      button.danger {
-        color: var(--pc-dismiss-text);
+        outline: var(--pc-focus-width) solid var(--pc-focus);
       }
       button:disabled {
-        color: var(--pc-text-muted);
+        opacity: 0.4;
         cursor: default;
       }
     `];
-	onPointerDown = (event) => {
-		if (this.open && !event.composedPath().includes(this)) this.close();
-	};
+	onScroll = () => this.setOpen(false);
 	constructor() {
 		super();
 		this.open = false;
 		this.items = [];
 		this.label = "";
-		this.x = 0;
-		this.y = 0;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		document.addEventListener("pointerdown", this.onPointerDown, true);
+		this.menuLabel = "";
+		this.placement = "below";
+		this.disabled = false;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.removeEventListener("pointerdown", this.onPointerDown, true);
+		window.removeEventListener("scroll", this.onScroll, true);
 	}
-	updated(changed) {
-		this.style.left = `${this.x}px`;
-		this.style.top = `${this.y}px`;
-		if (changed.has("open") && this.open) this.buttons()[0]?.focus();
+	/** The menu it opens: the slotted `pc-menu`, or its own */
+	get menu() {
+		return this.renderRoot.querySelector("slot[name=\"menu\"]")?.assignedElements({ flatten: true }).find((element) => element instanceof PcMenu) ?? void 0;
 	}
-	/** The enabled items' buttons */
-	buttons() {
-		return [...this.renderRoot.querySelectorAll("button")].filter((button) => !button.disabled);
+	/** The button that opens the menu */
+	get button() {
+		return this.renderRoot.querySelector("button");
 	}
-	/** Tell listeners the menu should close */
-	close() {
-		emit(this, "pc-close");
+	/**
+	* Open or close the menu, telling listeners.
+	*/
+	setOpen(open) {
+		if (open === this.open || open && this.disabled) return;
+		this.open = open;
+		emit(this, CONTEXT_MENU_TOGGLE_EVENT, { open });
 	}
-	/** Choose an item, then close */
-	choose(item) {
-		emit(this, "pc-select", { value: item.value });
-		this.close();
+	/** Open the menu on a right-click (instead of the browser's), or close it */
+	onContextMenu(event) {
+		event.preventDefault();
+		this.setOpen(!this.open);
 	}
-	/** Move focus between items, or close */
-	onKeyDown(event) {
-		const buttons = this.buttons();
-		const index = buttons.indexOf(this.renderRoot.activeElement);
-		const last = buttons.length - 1;
-		const target = {
-			ArrowDown: index >= last ? 0 : index + 1,
-			ArrowUp: index <= 0 ? last : index - 1,
-			Home: 0,
-			End: last
-		}[event.key];
-		if (target !== void 0) {
-			event.preventDefault();
-			buttons[target]?.focus();
-		} else if (event.key === "Escape" || event.key === "Tab") {
-			event.preventDefault();
-			this.close();
-		}
+	/** Close the menu when it asks to, and return focus to the button */
+	onClose() {
+		const focusWasInside = this.menu.matches(":focus-within");
+		this.setOpen(false);
+		if (focusWasInside) this.button.focus();
+	}
+	/** Set up a newly slotted menu like the current one (open or closed) */
+	onMenuSlotChange() {
+		this.requestUpdate("open", !this.open);
+	}
+	updated(changed) {
+		const menu = this.menu;
+		if (!menu) return;
+		menu.anchor = this;
+		menu.label ||= this.menuLabel || this.label;
+		if (!changed.has("open")) return;
+		window[this.open ? "addEventListener" : "removeEventListener"]("scroll", this.onScroll, true);
+		menu.open = this.open;
+		if (this.open) this.place(menu);
+	}
+	/** Put the open menu under or beside the button, within the window */
+	async place(menu) {
+		const anchor = this.button.getBoundingClientRect();
+		const beside = this.placement === "beside";
+		menu.x = beside ? anchor.right : anchor.left;
+		menu.y = beside ? anchor.top : anchor.bottom;
+		await menu.updateComplete;
+		menu.x = menuLeft(menu.x, menu.offsetWidth, window.innerWidth);
+		menu.y = menuTop(menu.y, menu.offsetHeight, window.innerHeight);
 	}
 	render() {
-		return html`<div
-      part="menu"
-      role="menu"
-      aria-label=${this.label}
-      @keydown=${this.onKeyDown}
-    >
-      ${this.items.map((item) => html`<button
-            part="item"
-            type="button"
-            role="menuitem"
-            class=${item.danger ? "danger" : nothing}
-            ?disabled=${item.disabled}
-            data-value=${item.value}
-            @click=${() => this.choose(item)}
-          >
-            ${item.label}
-          </button>`)}
-    </div>`;
+		return html`<button
+        type="button"
+        part="button"
+        aria-haspopup="menu"
+        aria-expanded=${String(this.open)}
+        aria-label=${this.label || nothing}
+        ?disabled=${this.disabled}
+        @click=${() => this.setOpen(!this.open)}
+        @contextmenu=${this.onContextMenu}
+      >
+        <slot name="icon">⋮</slot></button
+      ><slot
+        name="menu"
+        @slotchange=${this.onMenuSlotChange}
+        @pc-close=${this.onClose}
+        >${this.items.length ? html`<pc-menu
+                .items=${this.items}
+                label=${this.menuLabel || this.label}
+              ></pc-menu>` : nothing}</slot
+      >`;
 	}
 };
 defineElement("pc-context-menu", PcContextMenu);
-export { PcContextMenu };
+export { CONTEXT_MENU_TOGGLE_EVENT, MENU_MARGIN, PcContextMenu, menuLeft, menuTop };

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

@@ -1,4 +1,5 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import "../PcButton/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcDialog/index.ts
 /** What `pc-choose` gives when the dialog is dismissed with Escape */

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

@@ -1,4 +1,5 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import "../PcIcon/index.js";
 import { css, html } from "lit";
 import { live } from "lit/directives/live.js";
 // src/ui/elements/PcIconToggle/index.ts

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 "../PcContextMenu";
+import { MENU_MARGIN, menuTop } from "../PcContextMenu";
 import { type DialogChoice } from "../PcDialog";
 import type BackgroundWork from "../../../lib/classes/BackgroundWork";
 /** Blend mode options shown in the layer's select input */
@@ -56,17 +58,8 @@ export interface LayerDragDetail {
     x: number;
     y: number;
 }
-/** Space kept between the layer actions menu and the window's edges */
-export declare const 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
- */
-export declare const menuTop: (anchorTop: number, menuHeight: number, viewportHeight: number, margin?: number) => number;
+/** 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.
  * Dragging the handle (with mouse, pen or touch) reorders the layer: the row fires {@link LAYER_DRAG_EVENT} and the
@@ -141,28 +134,22 @@ export declare class PcLayerItem extends PcElement {
     runAction(action: LayerAction): void;
     /**
      * 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.
+     * layer), deleting the only layer, moving a layer further up or down than it can go, or anything to a layer no longer
+     * in the stack (e.g. just deleted).
      */
     canRun(action: LayerAction): boolean;
     /**
      * Do an action the user confirmed.
      */
     confirmed(action: ConfirmedAction): void;
-    private readonly onOutsidePointer;
-    private readonly onKeyDown;
-    /**
-     * Open the context menu on right-click, or close it if open.
-     */
-    private onContextMenu;
     /**
-     * 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.
+     * Follow the context menu opening or closing, telling other rows when it opens (so they close theirs).
      */
-    private onHandleClick;
+    private onMenuToggle;
     /**
-     * Open the context menu (closing other rows' menus), or close it if open.
+     * A click on the handle opens the menu, unless it ends a drag (then it's stopped before reaching the menu's button).
      */
-    private toggleMenu;
+    private readonly onHandleClick;
     disconnectedCallback(): void;
     /** Tell the layers menu about a drag of this row's layer */
     private emitDrag;
@@ -188,16 +175,6 @@ export declare class PcLayerItem extends PcElement {
     private readonly onDragKeyDown;
     /** Stop following the pointer pressed on the handle */
     private endPress;
-    /**
-     * Start or stop listening for clicks outside and Escape while the menu is open.
-     */
-    private listenOutside;
-    private readonly onScroll;
-    /**
-     * 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.
-     */
-    private placeMenu;
     /**
      * Ask for a mask following the layer's alpha (Shift adds, Alt subtracts; otherwise it replaces the mask).
      */
@@ -210,12 +187,14 @@ export declare class PcLayerItem extends PcElement {
      * Rename a layer when the name input changes. Empty names are reverted.
      */
     private onRename;
-    updated(changed: Map<PropertyKey, unknown>): void;
+    updated(): void;
     /**
      * Draw the layer's image, scaled to fit, on a checkerboard that shows transparency.
      */
     drawThumbnail(): void;
     /** The dialog asking the user to confirm an action, while asking */
     private renderConfirmation;
+    /** The layer's actions, for its context menu (those it can't do now are disabled) */
+    private menuItems;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -5,6 +5,7 @@ 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 { MENU_MARGIN, menuTop } from "../PcContextMenu/index.js";
 import { html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcLayerItem/index.ts
 /** Blend mode options shown in the layer's select input */
@@ -127,17 +128,6 @@ var LAYER_ALPHA_MASK_EVENT = "pc-layer-alpha-mask";
 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
@@ -220,11 +210,12 @@ var PcLayerItem = class extends PcElement {
 	}
 	/**
 	* 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.
+	* layer), deleting the only layer, moving a layer further up or down than it can go, or anything to a layer no longer
+	* in the stack (e.g. just deleted).
 	*/
 	canRun(action) {
 		const { stack, layer } = this;
-		if (!stack || !layer) return false;
+		if (!stack || !layer || !stack.layers.includes(layer)) return false;
 		const index = stack.indexOf(layer.id);
 		const last = stack.layers.length - 1;
 		switch (action) {
@@ -248,43 +239,30 @@ var PcLayerItem = class extends PcElement {
 		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.
+	* Follow the context menu opening or closing, telling other rows when it opens (so they close theirs).
 	*/
-	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, {
+	onMenuToggle(event) {
+		this.menuOpen = event.detail.open;
+		if (!this.menuOpen) return;
+		this.dispatchEvent(new CustomEvent(LAYER_MENU_OPEN_EVENT, {
 			bubbles: true,
 			composed: true
 		}));
 	}
+	/**
+	* A click on the handle opens the menu, unless it ends a drag (then it's stopped before reaching the menu's button).
+	*/
+	onHandleClick = {
+		handleEvent: (event) => {
+			if (!this.suppressClick) return;
+			this.suppressClick = false;
+			event.stopPropagation();
+		},
+		capture: true
+	};
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.listenOutside(false);
 		this.endPress();
 	}
 	/** Tell the layers menu about a drag of this row's layer */
@@ -313,7 +291,7 @@ var PcLayerItem = class extends PcElement {
 			y: event.clientY,
 			dragging: false
 		};
-		event.currentTarget.setPointerCapture(event.pointerId);
+		event.composedPath()[0].setPointerCapture(event.pointerId);
 		window.addEventListener("pointermove", this.onHandlePointerMove);
 		window.addEventListener("pointerup", this.onHandlePointerUp);
 		window.addEventListener("pointercancel", this.onHandlePointerCancel);
@@ -368,29 +346,6 @@ var PcLayerItem = class extends PcElement {
 		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) {
@@ -426,11 +381,7 @@ var PcLayerItem = class extends PcElement {
 			input.value = layer.name;
 		}
 	}
-	updated(changed) {
-		if (changed.has("menuOpen")) {
-			this.listenOutside(this.menuOpen);
-			if (this.menuOpen) this.placeMenu();
-		}
+	updated() {
 		const id = this.layer?.id;
 		if (this.background && id) this.background.run(`thumbnail ${id}`, () => this.drawThumbnail());
 		else this.drawThumbnail();
@@ -472,23 +423,32 @@ var PcLayerItem = class extends PcElement {
 		}}
     ></pc-dialog>`;
 	}
+	/** The layer's actions, for its context menu (those it can't do now are disabled) */
+	menuItems() {
+		return LAYER_ACTIONS.map(({ action, label }) => ({
+			value: action,
+			label: this.t(label),
+			disabled: !this.canRun(action)
+		}));
+	}
 	render() {
 		const { stack, layer } = this;
 		if (!stack || !layer) return html``;
 		const active = stack.active.id === layer.id;
 		return html`
-      <button
-        type="button"
+      <pc-context-menu
         class="handle"
-        aria-label=${this.t("paintCanvas.layers.reorder", { name: layer.name })}
-        aria-haspopup="menu"
-        aria-expanded=${this.menuOpen ? "true" : "false"}
-        @contextmenu=${this.onContextMenu}
+        placement="beside"
+        label=${this.t("paintCanvas.layers.reorder", { name: layer.name })}
+        menu-label=${this.t("paintCanvas.layers.actions")}
+        .open=${this.menuOpen}
+        .items=${this.menuItems()}
+        @pc-toggle=${this.onMenuToggle}
+        @pc-select=${(e) => this.runAction(e.detail.value)}
         @click=${this.onHandleClick}
         @pointerdown=${this.onHandlePointerDown}
+        ><span slot="icon" aria-hidden="true">⠿</span></pc-context-menu
       >
-        ⠿
-      </button>
       <div
         class="details"
         @click=${(e) => this.onRowClick(e, stack, layer)}
@@ -541,18 +501,6 @@ var PcLayerItem = class extends PcElement {
       >
         <img src=${this.iconUrl(layer.visible ? "visible" : "hidden")} alt="" />
       </button>
-      ${this.menuOpen ? html`<menu aria-label=${this.t("paintCanvas.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)}
     `;
 	}

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 */\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";
+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";
 export { style_default as default };