@lvl99dotcom/paintcanvas 0.4.0 → 0.5.0

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

@@ -0,0 +1,247 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { PointerDrag } from "../../drag/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcNumberSlider/index.ts
+/**
+* A number kept within `min` and `max` and rounded to a multiple of `step` (from `min`).
+*
+* @example
+* fitNumber(300, 1, 256, 1); // 256
+* fitNumber(12.4, 0, 100, 5); // 10
+* fitNumber(45.678, -360, 360, 0.01); // 45.68
+*/
+var fitNumber = (value, min, max, step) => {
+	const decimals = String(step).split(".")[1]?.length ?? 0;
+	const stepped = Number((min + Math.round((value - min) / step) * step).toFixed(decimals));
+	return Math.min(max, Math.max(min, stepped));
+};
+/**
+* A number shown as text that changes when pressed and dragged: right or up raises it, left or down lowers it, a step
+* per pixel (or `drag-step`), within `min` and `max`. A press that barely moves (a tap or click) turns it into a field to type a value
+* in: Enter or leaving the field keeps the value, Escape cancels.
+*
+* With keyboard focus, the arrow keys change it by `step`, Page Up and Page Down by `pageStep`, Home and End go to
+* `min` and `max`, and Enter or F2 starts typing.
+*
+* Fires `pc-change` (detail: `{ value }`) when the value changes, after changing `value` itself. Bind a value that
+* may be changed by others with `live()`, e.g. `.value=${live(brush.width)}`, so it's shown again if a listener keeps
+* it the same.
+*
+* @example
+* html`<pc-number-slider label="Opacity" min="0" max="100" unit="%" .value=${live(50)}
+*   @pc-change=${(e) => setOpacity(e.detail.value)}></pc-number-slider>`
+*/
+var PcNumberSlider = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		value: { type: Number },
+		min: { type: Number },
+		max: { type: Number },
+		step: { type: Number },
+		pageStep: {
+			type: Number,
+			attribute: "page-step"
+		},
+		dragStep: {
+			type: Number,
+			attribute: "drag-step"
+		},
+		unit: { type: String },
+		text: { type: String },
+		label: { type: String },
+		disabled: {
+			type: Boolean,
+			reflect: true
+		},
+		editing: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: inline-flex;
+        min-width: 44px;
+        user-select: none;
+        -webkit-user-select: none;
+      }
+      [role="slider"],
+      input {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-width: 0;
+        min-height: 30px;
+        margin: 0;
+        padding: 0 var(--pc-space-2);
+        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);
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+        white-space: nowrap;
+      }
+      [role="slider"] {
+        cursor: ew-resize;
+        touch-action: none;
+      }
+      [role="slider"]:hover {
+        background: var(--pc-surface-hover);
+      }
+      [role="slider"]:focus-visible,
+      input:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: -2px;
+      }
+      input {
+        user-select: text;
+        -webkit-user-select: text;
+      }
+      :host([disabled]) [role="slider"] {
+        opacity: 0.4;
+        cursor: default;
+      }
+    `];
+	/** Whether focus goes back to the slider when typing ends (it doesn't when the field lost focus) */
+	refocus = false;
+	drag = new PointerDrag((delta) => this.change(this.value + delta * (this.dragStep ?? this.step)), 4);
+	constructor() {
+		super();
+		this.value = 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = 1;
+		this.unit = "";
+		this.text = "";
+		this.label = "";
+		this.disabled = false;
+		this.editing = false;
+	}
+	/** The value as shown: `text`, or the value and unit */
+	get displayText() {
+		return this.text || `${this.value}${this.unit}`;
+	}
+	/**
+	* Set the value (fitted within `min` and `max`, to a multiple of `step`) and tell listeners if it changed.
+	*
+	* @example
+	* slider.change(40); // fires pc-change with { value: 40 }
+	*/
+	change(value) {
+		const next = fitNumber(value, this.min, this.max, this.step);
+		if (next === this.value) return;
+		this.value = next;
+		emit(this, "pc-change", { value: next });
+	}
+	/**
+	* Turn into a field to type a value in, with its text selected.
+	*/
+	startEditing() {
+		if (this.disabled) return;
+		this.refocus = true;
+		this.editing = true;
+		this.performUpdate();
+	}
+	/**
+	* Stop typing, keeping the typed value (if it's a number) unless cancelled.
+	*/
+	stopEditing(keep) {
+		const typed = this.renderRoot.querySelector("input").value.trim();
+		this.editing = false;
+		if (keep && typed !== "" && Number.isFinite(Number(typed))) this.change(Number(typed));
+	}
+	/** Start a press, unless disabled */
+	onPointerDown(event) {
+		if (!this.disabled) this.drag.start(event);
+	}
+	/** End a press: one that didn't become a drag starts typing */
+	onPointerUp() {
+		if (this.disabled) return;
+		if (!this.drag.end()) this.startEditing();
+	}
+	/** Change the value with the arrow keys, Page Up and Page Down, Home and End, or start typing (Enter, F2) */
+	onSliderKeyDown(event) {
+		if (this.disabled) return;
+		const page = this.pageStep ?? this.step * 10;
+		const action = {
+			ArrowUp: () => this.change(this.value + this.step),
+			ArrowRight: () => this.change(this.value + this.step),
+			ArrowDown: () => this.change(this.value - this.step),
+			ArrowLeft: () => this.change(this.value - this.step),
+			PageUp: () => this.change(this.value + page),
+			PageDown: () => this.change(this.value - page),
+			Home: () => this.change(this.min),
+			End: () => this.change(this.max),
+			Enter: () => this.startEditing(),
+			F2: () => this.startEditing()
+		}[event.key];
+		if (!action) return;
+		event.preventDefault();
+		action();
+	}
+	/** Keep the typed value with Enter, or cancel with Escape (neither reaches the rest of the page) */
+	onInputKeyDown(event) {
+		if (event.key !== "Enter" && event.key !== "Escape") return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.stopEditing(event.key === "Enter");
+	}
+	/**
+	* Keep the typed value when the field loses focus, leaving focus where it went. Ignored once typing has ended (some
+	* browsers blur the field as it's removed).
+	*/
+	onInputBlur() {
+		if (!this.editing) return;
+		this.refocus = false;
+		this.stopEditing(true);
+	}
+	willUpdate(changed) {
+		if (changed.has("disabled") && this.disabled) this.editing = false;
+	}
+	updated(changed) {
+		if (!changed.has("editing")) return;
+		if (this.editing) {
+			const input = this.renderRoot.querySelector("input");
+			input.focus();
+			input.select();
+		} else if (changed.get("editing") && this.refocus) this.renderRoot.querySelector("[role=slider]").focus();
+	}
+	render() {
+		const text = this.displayText;
+		if (this.editing) return html`<input
+        part="field"
+        type="text"
+        inputmode="decimal"
+        aria-label=${this.label || nothing}
+        .value=${String(this.value)}
+        @keydown=${this.onInputKeyDown}
+        @blur=${this.onInputBlur}
+      />`;
+		return html`<div
+      part="control"
+      role="slider"
+      tabindex=${this.disabled ? -1 : 0}
+      aria-label=${this.label || nothing}
+      aria-valuemin=${this.min}
+      aria-valuemax=${this.max}
+      aria-valuenow=${this.value}
+      aria-valuetext=${text}
+      aria-disabled=${this.disabled ? "true" : nothing}
+      title=${this.t("paintCanvas.numberSlider.hint")}
+      @pointerdown=${this.onPointerDown}
+      @pointermove=${this.drag.move}
+      @pointerup=${this.onPointerUp}
+      @pointercancel=${this.drag.end}
+      @keydown=${this.onSliderKeyDown}
+    >
+      ${text}
+    </div>`;
+	}
+};
+defineElement("pc-number-slider", PcNumberSlider);
+export { PcNumberSlider, fitNumber };

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

@@ -1,7 +1,7 @@
 import { nothing, type PropertyValues, type TemplateResult } from "lit";
 import { PcElement } from "../../base";
 import { PcPanel } from "../PcPanel";
-import type { SideMode } from "../../layout";
+import { type SideMode } from "../../layout";
 /** Which way a pane's start, middle and end run */
 export type PaneOrientation = "vertical" | "horizontal";
 /** Which edge of the layout a pane is on: panels opened from its rail, and its floating box, go the other way */
@@ -20,6 +20,8 @@ export declare const PANE_COLLAPSE_EVENT = "pc-collapse";
  *   button again closes it, and focus goes back to the button.
  * - `floating`: the pane floats over the canvas as a box that collapses to a button (`collapsed`, named with its
  *   `label`), firing `pc-collapse` when it's shown or collapsed.
+ * - `overlay`: a rail over the canvas, without a background: each button has its own, and presses between them reach
+ *   the canvas. Its panels stay solid.
  *
  * Panes made for one purpose extend it and put their own content in its regions (see `renderStart`, `renderMiddle`
  * and `renderEnd`), e.g. `<pc-toolbar>`.

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

@@ -1,5 +1,7 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import { markDismissingPress } from "../../dismiss/index.js";
 import { PcPanel } from "../PcPanel/index.js";
+import { showsRail } from "../../layout/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcPane/index.ts
 /** Event fired when a floating pane is shown or collapsed (detail: `{ collapsed }`) */
@@ -18,6 +20,8 @@ var FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabind
 *   button again closes it, and focus goes back to the button.
 * - `floating`: the pane floats over the canvas as a box that collapses to a button (`collapsed`, named with its
 *   `label`), firing `pc-collapse` when it's shown or collapsed.
+* - `overlay`: a rail over the canvas, without a background: each button has its own, and presses between them reach
+*   the canvas. Its panels stay solid.
 *
 * Panes made for one purpose extend it and put their own content in its regions (see `renderStart`, `renderMiddle`
 * and `renderEnd`), e.g. `<pc-toolbar>`.
@@ -95,10 +99,16 @@ var PcPane = class extends PcElement {
         border-inline: 1px solid var(--pc-border);
         background: var(--pc-bar);
       }
+      /* The same size as the toolbars' buttons (borders included) */
       .rail button {
         position: relative;
         display: inline-flex;
-        padding: var(--pc-space-1);
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: var(--pc-side-button-size);
+        height: var(--pc-side-button-size);
+        padding: 0;
         border: 1px solid transparent;
         border-radius: var(--pc-radius-small);
         background: transparent;
@@ -115,8 +125,8 @@ var PcPane = class extends PcElement {
         outline: var(--pc-focus-width) solid var(--pc-focus);
       }
       .rail img {
-        width: var(--pc-icon-size);
-        height: var(--pc-icon-size);
+        width: var(--pc-side-icon-size);
+        height: var(--pc-side-icon-size);
         filter: var(--pc-icon-filter);
       }
       .rail .badge {
@@ -130,6 +140,31 @@ var PcPane = class extends PcElement {
         background: var(--pc-red);
       }
 
+      /* Overlay: the rail over the canvas without a background, so only its buttons (each with its own) take presses */
+      :host([mode="overlay"]) {
+        pointer-events: none;
+      }
+      :host([mode="overlay"]) .rail {
+        border-inline: 0;
+        background: transparent;
+      }
+      :host([mode="overlay"]) .rail button,
+      :host([mode="overlay"]) ::slotted(*) {
+        pointer-events: auto;
+      }
+      :host([mode="overlay"]) .rail button {
+        border-color: var(--pc-border);
+        background: var(--pc-surface-raised);
+        box-shadow: var(--pc-shadow);
+      }
+      :host([mode="overlay"]) .rail button:hover {
+        background: var(--pc-surface-hover);
+      }
+      :host([mode="overlay"]) .rail button[aria-expanded="true"] {
+        border-color: var(--pc-accent);
+        background: var(--pc-accent);
+      }
+
       /* Floating: the pane floats over the canvas as a box, and collapses to a button */
       :host([mode="floating"]) {
         position: absolute;
@@ -176,7 +211,9 @@ var PcPane = class extends PcElement {
 		const panel = this.openPanel;
 		if (!panel) return;
 		const path = event.composedPath();
-		if (!path.includes(panel) && !(this.opener && path.includes(this.opener))) this.closePanel(false);
+		if (path.includes(panel) || this.opener && path.includes(this.opener)) return;
+		markDismissingPress(event);
+		this.closePanel(false);
 	};
 	onKeyDown = (event) => {
 		if (event.key !== "Escape" || !this.openPanel) return;
@@ -258,7 +295,7 @@ var PcPane = class extends PcElement {
 	}
 	/** Show the panels for the mode: hidden behind the rail (except the open one, beside the pane) or as they are */
 	syncPanels() {
-		const rail = this.mode === "rail";
+		const rail = showsRail(this.mode);
 		for (const panel of this.panels) {
 			panel.toggleAttribute("data-pc-rail", rail);
 			if (rail && panel === this.openPanel) panel.setAttribute("data-pc-open", this.edge);
@@ -267,7 +304,7 @@ var PcPane = class extends PcElement {
 	}
 	updated(changed) {
 		if (!changed.has("mode") && !changed.has("edge")) return;
-		if (this.mode !== "rail") this.closePanel(false);
+		if (!showsRail(this.mode)) this.closePanel(false);
 		this.syncPanels();
 	}
 	/** Content of its own at its start, before what's slotted there */
@@ -284,7 +321,7 @@ var PcPane = class extends PcElement {
 	}
 	/** The rail: a button per panel */
 	renderRail() {
-		if (this.mode !== "rail" || this.panels.length === 0) return nothing;
+		if (!showsRail(this.mode) || this.panels.length === 0) return nothing;
 		return html`<div
       class="rail"
       part="rail"

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

@@ -6,8 +6,8 @@ import { PcElement } from "../../base";
  * for screen readers.
  *
  * Its `icon`, `label` and `badge` are what a pane shows for it when the pane narrows to a rail of buttons; the badge is
- * a dot meaning something new (e.g. unread messages). It's 290px wide (`--pc-panel-width`) and no wider than the space
- * it has.
+ * a dot meaning something new (e.g. unread messages). It's 290px wide (`--pc-panel-width`), and in every layout it's
+ * never wider than 290px (`--pc-panel-max-width`) or the space it has.
  *
  * Panels made for one purpose extend `PcPanel`, so they share its look: e.g. `<pc-panel-layers>`,
  * `<pc-panel-brushes>` and `<pc-panel-colours>`. They put their own content in the body (see `renderBody`), and give

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

@@ -7,8 +7,8 @@ import { css, html, nothing } from "lit";
 * for screen readers.
 *
 * Its `icon`, `label` and `badge` are what a pane shows for it when the pane narrows to a rail of buttons; the badge is
-* a dot meaning something new (e.g. unread messages). It's 290px wide (`--pc-panel-width`) and no wider than the space
-* it has.
+* a dot meaning something new (e.g. unread messages). It's 290px wide (`--pc-panel-width`), and in every layout it's
+* never wider than 290px (`--pc-panel-max-width`) or the space it has.
 *
 * Panels made for one purpose extend `PcPanel`, so they share its look: e.g. `<pc-panel-layers>`,
 * `<pc-panel-brushes>` and `<pc-panel-colours>`. They put their own content in the body (see `renderBody`), and give
@@ -33,7 +33,7 @@ var PcPanel = class extends PcElement {
         box-sizing: border-box;
         width: var(--pc-panel-width, var(--pc-panel-default-width, 290px));
         min-width: 0;
-        max-width: 100%;
+        max-width: min(100%, var(--pc-panel-max-width, 290px));
         min-height: 0;
         max-height: 100%;
         flex-direction: column;
@@ -44,7 +44,8 @@ var PcPanel = class extends PcElement {
         font-family: var(--pc-font);
         font-size: var(--pc-font-size);
       }
-      /* In a pane's rail (set by the pane): hidden until opened from its button, then over the canvas beside the pane */
+      /* In a pane's rail (set by the pane): hidden until opened from its button, then over the canvas beside the pane,
+         as tall as its content needs (at most 90% of the window's height, and never taller than the pane) */
       :host([data-pc-rail]:not([data-pc-open])) {
         display: none;
       }
@@ -52,10 +53,9 @@ var PcPanel = class extends PcElement {
         position: absolute;
         z-index: 5;
         top: 0;
-        bottom: 0;
-        width: var(--pc-floating-panel-width, min(360px, 85vw));
-        max-width: none;
-        max-height: none;
+        /* Its usual width, kept within the window (the pane it opens from is narrower than it) */
+        max-width: min(var(--pc-panel-max-width, 290px), 85vw);
+        max-height: min(90vh, 100%);
       }
       :host([data-pc-open="left"]) {
         left: 100%;

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

@@ -1,5 +1,6 @@
 import { nothing } from "lit";
 import { PcPanel } from "../PcPanel";
+import "../PcBrushSize";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import type BrushSettings from "../../../lib/classes/BrushSettings";
 import type { BrushConfig } from "../../../lib/brushes/types";
@@ -31,7 +32,7 @@ export declare const previewSizes: (presets: BrushConfig[]) => Map<string, {
  * tile showing its shape at its size relative to the rest of its family, five to a row. Picking a preset closes the
  * menu; holding Alt/Option shows an "X" over custom presets, and clicking one asks before deleting it.
  *
- * Dragging the size control up or right makes the brush bigger; down or left makes it smaller.
+ * Dragging the size control (`pc-brush-size`) up or right makes the brush bigger; down or left makes it smaller.
  *
  * Fires `pc-new-preset` (detail: "brush" or "eraser") for "New preset", and `pc-toast` (detail: the message) after
  * importing, exporting or deleting presets, or when that fails.
@@ -75,8 +76,6 @@ export declare class PcPanelBrushes extends PcPanel {
     confirm: ConfirmFn;
     /** Saves exported presets (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
-    /** Last pointer position while dragging the size control */
-    private dragPoint;
     private changes;
     private readonly onKey;
     private readonly onBlur;
@@ -115,18 +114,6 @@ export declare class PcPanelBrushes extends PcPanel {
      * Select a preset and close the menu.
      */
     selectPreset(id: string): void;
-    /**
-     * Start dragging the size control.
-     */
-    private onPointerDown;
-    /**
-     * Resize while dragging: right and up are positive, left and down are negative.
-     */
-    private onPointerMove;
-    /**
-     * Stop dragging the size control.
-     */
-    private onPointerUp;
     /** Render a preset's tile */
     private renderTile;
     protected get defaultIcon(): string;

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

@@ -3,6 +3,7 @@ import { BRUSH_PRESET_FILE_FORMAT } from "../../../lib/presets/schema.js";
 import { NO_TEXT_SELECTION_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
 import { defineElement } from "../../base/index.js";
 import { PcPanel } from "../PcPanel/index.js";
+import "../PcBrushSize/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import { groupPresetsByAuthor } from "../../../lib/brushes/authors/index.js";
 import "../../../lib/presets/index.js";
@@ -55,7 +56,7 @@ var previewSizes = (presets) => {
 * tile showing its shape at its size relative to the rest of its family, five to a row. Picking a preset closes the
 * menu; holding Alt/Option shows an "X" over custom presets, and clicking one asks before deleting it.
 *
-* Dragging the size control up or right makes the brush bigger; down or left makes it smaller.
+* Dragging the size control (`pc-brush-size`) up or right makes the brush bigger; down or left makes it smaller.
 *
 * Fires `pc-new-preset` (detail: "brush" or "eraser") for "New preset", and `pc-toast` (detail: the message) after
 * importing, exporting or deleting presets, or when that fails.
@@ -79,8 +80,6 @@ var PcPanelBrushes = class extends PcPanel {
 	confirm = (message) => window.confirm(message);
 	/** Saves exported presets (replaceable for tests) */
 	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
-	/** Last pointer position while dragging the size control */
-	dragPoint = null;
 	changes = new ChangeController(this, () => [this.app, this.settings]);
 	onKey = (event) => {
 		if (event.key === "Alt") this.toggleAttribute("deleting", event.type === "keydown");
@@ -215,34 +214,6 @@ var PcPanelBrushes = class extends PcPanel {
 		this.settings?.select(id);
 		this.app?.closePanel();
 	}
-	/**
-	* Start dragging the size control.
-	*/
-	onPointerDown(event) {
-		this.dragPoint = {
-			x: event.clientX,
-			y: event.clientY
-		};
-		event.currentTarget.setPointerCapture(event.pointerId);
-	}
-	/**
-	* Resize while dragging: right and up are positive, left and down are negative.
-	*/
-	onPointerMove(event) {
-		if (!this.dragPoint || !this.settings) return;
-		const delta = event.clientX - this.dragPoint.x + (this.dragPoint.y - event.clientY);
-		this.dragPoint = {
-			x: event.clientX,
-			y: event.clientY
-		};
-		if (delta !== 0) this.settings.resize(delta);
-	}
-	/**
-	* Stop dragging the size control.
-	*/
-	onPointerUp() {
-		this.dragPoint = null;
-	}
 	/** Render a preset's tile */
 	renderTile(settings, preset, sizes) {
 		const size = sizes.get(preset.id);
@@ -296,19 +267,11 @@ var PcPanelBrushes = class extends PcPanel {
           style=${styleMap({ maskImage: typeof preset.image === "string" ? `url("${preset.image}")` : void 0 })}
         ></span>
         <span class="name">${preset.name ?? preset.id}</span>
-        <div
+        <pc-brush-size
           class="size"
-          role="slider"
-          aria-label=${this.t("paintCanvas.brushMenu.size", { tool: title })}
-          aria-valuenow=${settings.width}
-          title=${this.t("paintCanvas.brushMenu.dragToResize")}
-          @pointerdown=${this.onPointerDown}
-          @pointermove=${this.onPointerMove}
-          @pointerup=${this.onPointerUp}
-          @pointercancel=${this.onPointerUp}
-        >
-          ${settings.width === settings.height ? settings.width : `${settings.width} × ${settings.height}`}
-        </div>
+          .settings=${settings}
+          label=${this.t("paintCanvas.brushMenu.size", { tool: title })}
+        ></pc-brush-size>
       </div>
       <div
         class="presets"

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcPanelBrushes/style.css?inline
-var style_default = "/* Narrower than other panels by default (set --pc-panel-width to change it) */\n:host {\n  --pc-panel-default-width: 240px;\n}\n/* The current preset on one row: its shape, name and size */\n.current {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n  padding: 4px 8px;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n}\n.current-shape {\n  flex: none;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--pc-text);\n}\n.current-shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n.name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.size {\n  flex: none;\n  align-self: stretch;\n  display: flex;\n  align-items: center;\n  padding: 0 0 0 8px;\n  border-left: 1px solid var(--pc-border);\n  cursor: ew-resize;\n  touch-action: none;\n}\n/* The presets scroll, at most 400px tall, or less so the whole menu fits under the settings bar in a shorter window */\n.presets {\n  flex: 1 1 auto;\n  min-height: 0;\n  max-height: min(400px, calc(100vh - 180px));\n  overflow-y: auto;\n}\nh3 {\n  margin: 4px 0;\n  font-size: 14px;\n}\nul {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  align-content: start;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n:host([deleting]) li button.custom {\n  cursor: var(--pc-delete-cursor);\n}\n/* Create, Import and Export side by side */\n.actions {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 6px;\n}\n.actions button.pill {\n  padding: 4px 8px;\n}\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\nli button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n  padding: 0;\n  border: none;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n  cursor: pointer;\n}\nli button:hover {\n  background: var(--pc-surface-hover);\n}\nli button[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.shape {\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: 100% 100%;\n}\n";
+var style_default = "/* Narrower than other panels by default (set --pc-panel-width to change it) */\n:host {\n  --pc-panel-default-width: 240px;\n}\n/* The current preset on one row: its shape, name and size */\n.current {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n  padding: 4px 8px;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n}\n.current-shape {\n  flex: none;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--pc-text);\n}\n.current-shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n.name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.size {\n  flex: none;\n  align-self: stretch;\n  margin: -4px -8px -4px 0;\n  border-left: 1px solid var(--pc-border);\n}\n/* The presets scroll, at most 400px tall, or less so the whole menu fits under the settings bar in a shorter window */\n.presets {\n  flex: 1 1 auto;\n  min-height: 0;\n  max-height: min(400px, calc(100vh - 180px));\n  overflow-y: auto;\n}\nh3 {\n  margin: 4px 0;\n  font-size: 14px;\n}\nul {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  align-content: start;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n:host([deleting]) li button.custom {\n  cursor: var(--pc-delete-cursor);\n}\n/* Create, Import and Export side by side */\n.actions {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 6px;\n}\n.actions button.pill {\n  padding: 4px 8px;\n}\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\nli button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n  padding: 0;\n  border: none;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n  cursor: pointer;\n}\nli button:hover {\n  background: var(--pc-surface-hover);\n}\nli button[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.shape {\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: 100% 100%;\n}\n";
 export { style_default as default };

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

@@ -1,8 +1,30 @@
 import { type PropertyValues } from "lit";
 import { PcElement } from "../../base";
+/** Height of a popover's arrow (pixels) */
+export declare const POPOVER_ARROW_SIZE = 8;
+/** Space kept between a placed popover and the window's edges (pixels) */
+export declare const POPOVER_MARGIN = 8;
+/**
+ * Where a popover goes under its anchor: centred below it (leaving room for the arrow), moved sideways as far as needed
+ * to stay in the window, with its arrow still pointing at the anchor's centre (`arrowX`, from the popover's left).
+ *
+ * @example
+ * popoverBelow({ left: 100, bottom: 40, width: 40 }, 200, 1000); // { left: 20, top: 48, arrowX: 100 }
+ * popoverBelow({ left: 0, bottom: 40, width: 40 }, 200, 1000); // { left: 8, top: 48, arrowX: 12 }
+ */
+export declare const popoverBelow: (anchor: {
+    left: number;
+    bottom: number;
+    width: number;
+}, popoverWidth: number, viewportWidth: number, margin?: number) => {
+    left: number;
+    top: number;
+    arrowX: number;
+};
 /**
  * A floating box for a menu or settings (e.g. the brush presets), shown while `open`. The implementer places it (e.g.
- * next to the button that opens it). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
+ * next to the button that opens it), or `placeBelow` puts it under its `anchor`. With `arrow`, an arrow on its top edge
+ * points up at the anchor (at `--pc-popover-arrow-x` from its left, the middle by default). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
  * `pc-close`, and the implementer sets `open` to false in response. Focus moves into it when it opens.
  *
  * @example
@@ -20,6 +42,10 @@ export declare class PcPopover extends PcElement {
         anchor: {
             attribute: boolean;
         };
+        arrow: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -37,8 +63,20 @@ export declare class PcPopover extends PcElement {
     label: string;
     /** The element that opens it (pressing it doesn't count as pressing outside) */
     anchor?: Element;
+    /** Whether an arrow on its top edge points up at the anchor */
+    arrow: boolean;
     private readonly onPointerDown;
     constructor();
+    /**
+     * Put the popover under its anchor, in the window (see `popoverBelow`), with its arrow pointing at the anchor. Call it
+     * once open, so it can be measured.
+     *
+     * @example
+     * popover.open = true;
+     * await popover.updateComplete;
+     * popover.placeBelow();
+     */
+    placeBelow(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: PropertyValues<this>): void;