@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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,7 @@
 import { nothing } from "lit";
 import { PcPanel } from "../PcPanel";
+import { type ConfirmFn } from "../../ask";
+import "../PcBrushSize";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import type BrushSettings from "../../../lib/classes/BrushSettings";
 import type { BrushConfig } from "../../../lib/brushes/types";
@@ -7,8 +9,7 @@ import { DELETE_CURSOR } from "../../../lib/rendering/cursors";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 /** Cursor over a preset that a click deletes (Alt/Option held): the `--pc-delete-cursor` token's default */
 export { DELETE_CURSOR };
-/** Asks the user to confirm; replaceable for tests */
-export type ConfirmFn = (message: string) => boolean;
+export type { ConfirmFn } from "../../ask";
 /** Largest shape preview in a preset tile, in CSS pixels */
 export declare const MAX_PREVIEW_SIZE = 30;
 /** Smallest shape preview in a preset tile, in CSS pixels */
@@ -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.
@@ -72,11 +73,10 @@ export declare class PcPanelBrushes extends PcPanel {
     app?: PaintCanvas;
     /** Which settings this menu controls */
     kind: "brush" | "eraser";
+    /** Asks the user to confirm, in a dialog (replaceable for tests) */
     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 +115,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,8 @@ 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 { askConfirm, deletePresetQuestion } from "../../ask/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 +57,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.
@@ -76,11 +78,10 @@ var PcPanelBrushes = class extends PcPanel {
 		unsafeCSS(WINDOWS_CSS),
 		unsafeCSS(PILLS_CSS)
 	];
-	confirm = (message) => window.confirm(message);
+	/** Asks the user to confirm, in a dialog (replaceable for tests) */
+	confirm = (options) => askConfirm(this.renderRoot, options);
 	/** 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");
@@ -128,7 +129,7 @@ var PcPanelBrushes = class extends PcPanel {
 		const app = this.app;
 		if (!app) return;
 		const name = preset.name ?? preset.id;
-		if (!this.confirm(this.t("paintCanvas.presets.deleteConfirm", { name }))) return;
+		if (!await this.confirm(deletePresetQuestion(this.translations, name))) return;
 		try {
 			await app.customPresets.remove(preset.id);
 			this.emit("pc-toast", {
@@ -215,34 +216,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 +269,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"
@@ -324,14 +289,14 @@ var PcPanelBrushes = class extends PcPanel {
       <div class="actions">
         <button
           type="button"
-          class="pill new-preset"
+          class="pill-s new-preset"
           @click=${() => this.emit("pc-new-preset", this.kind)}
         >
           ${this.t("paintCanvas.brushMenu.create")}
         </button>
         <button
           type="button"
-          class="pill import"
+          class="pill-s import"
           @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
         >
           ${this.t("paintCanvas.brushMenu.import")}
@@ -354,7 +319,7 @@ var PcPanelBrushes = class extends PcPanel {
         </label>
         <button
           type="button"
-          class="pill export"
+          class="pill-s export"
           @click=${() => void this.exportFile()}
         >
           ${this.t("paintCanvas.brushMenu.export")}

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.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/PcPanelColours/index.js

@@ -613,14 +613,14 @@ var PcPanelColours = class extends PcPanel {
         <div class="actions">
           <button
             type="button"
-            class="pill import"
+            class="pill-s import"
             @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
           >
             ${this.t("paintCanvas.palette.import")}
           </button>
           <button
             type="button"
-            class="pill export"
+            class="pill-s export"
             @click=${() => void this.exportFile()}
           >
             ${this.t("paintCanvas.palette.export")}

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcPanelColours/style.css?inline
-var style_default = ".palette {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pc-space-2);\n}\n\n/* The colours and their hex value beside the colour model's sliders */\n.top {\n  display: flex;\n  gap: var(--pc-space-2);\n}\n.current {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  width: 76px;\n  border: 1px solid var(--pc-border);\n}\n.current pc-colour-pair {\n  --pc-colour-pair-size: 76px;\n}\n.hex {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: var(--pc-control-size);\n  padding: var(--pc-space-1);\n  border: 0;\n  border-top: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.hex[aria-invalid=\"true\"] {\n  outline: 2px solid var(--pc-dismiss-text);\n  outline-offset: -2px;\n}\n.hex:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.channels {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--pc-border);\n}\n[role=\"tablist\"] {\n  display: flex;\n}\n[role=\"tab\"] {\n  flex: 1;\n  min-height: 28px;\n  border: 0;\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-surface-active);\n  color: var(--pc-text);\n  font: inherit;\n  cursor: pointer;\n}\n[role=\"tab\"] + [role=\"tab\"] {\n  border-left: 1px solid var(--pc-border);\n}\n[role=\"tab\"][aria-selected=\"true\"] {\n  border-bottom-color: transparent;\n  background: var(--pc-surface);\n  font-weight: bold;\n}\n[role=\"tab\"]:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n.sliders {\n  display: grid;\n  flex: 1;\n  grid-template-columns: auto minmax(0, 1fr) 3.6em;\n  gap: var(--pc-space-1);\n  align-items: center;\n  padding: var(--pc-space-1) var(--pc-space-2);\n  background: var(--pc-surface);\n}\n.letter {\n  font-weight: bold;\n}\n/* Each slider's track shows the colours its values give (--track, set per slider), under a round white handle with a\n   dark outline that shows on any colour */\n.sliders input[type=\"range\"] {\n  width: 100%;\n  min-width: 0;\n  height: 20px;\n  margin: 0;\n  background: transparent;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n.sliders input[type=\"range\"]::-webkit-slider-runnable-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-moz-range-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-webkit-slider-thumb {\n  width: 16px;\n  height: 16px;\n  margin-top: -4px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n  -webkit-appearance: none;\n}\n.sliders input[type=\"range\"]::-moz-range-thumb {\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n}\n.sliders input[type=\"number\"] {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 2px var(--pc-space-1);\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  font-variant-numeric: tabular-nums;\n}\n.sliders input:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 1px;\n}\n\n/* Saved colours: square swatches in a grid that scrolls */\n.swatches {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));\n  align-content: start;\n  min-height: 64px;\n  max-height: 132px;\n  overflow-y: auto;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n.swatch,\n.add {\n  aspect-ratio: 1;\n  min-width: 32px;\n  padding: 0;\n  border: 0;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  cursor: pointer;\n}\n.swatch {\n  background: var(--colour);\n  /* Long presses open the colour's menu instead of the browser's */\n  -webkit-touch-callout: none;\n  touch-action: manipulation;\n}\n.swatch[aria-pressed=\"true\"] {\n  box-shadow:\n    inset 0 0 0 2px #ffffff,\n    inset 0 0 0 3px #000000;\n}\n:host([deleting]) .swatch {\n  cursor: var(--pc-delete-cursor);\n}\n.add {\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: 20px;\n  font-weight: bold;\n}\n.add:hover:not(:disabled) {\n  background: var(--pc-surface-hover);\n}\n.add:disabled {\n  color: var(--pc-disabled);\n  cursor: default;\n}\n.swatch:focus-visible,\n.add:focus-visible {\n  position: relative;\n  z-index: 1;\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.actions {\n  display: flex;\n  gap: var(--pc-space-2);\n}\n/* Same size as the brush menu's Import and Export */\n.actions button.pill {\n  flex: 1;\n  padding: 4px 8px;\n}\n";
+var style_default = ".palette {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pc-space-2);\n}\n\n/* The colours and their hex value beside the colour model's sliders */\n.top {\n  display: flex;\n  gap: var(--pc-space-2);\n}\n.current {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  width: 76px;\n  border: 1px solid var(--pc-border);\n}\n.current pc-colour-pair {\n  --pc-colour-pair-size: 76px;\n}\n.hex {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: var(--pc-control-size);\n  padding: var(--pc-space-1);\n  border: 0;\n  border-top: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.hex[aria-invalid=\"true\"] {\n  outline: 2px solid var(--pc-dismiss-text);\n  outline-offset: -2px;\n}\n.hex:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.channels {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--pc-border);\n}\n[role=\"tablist\"] {\n  display: flex;\n}\n[role=\"tab\"] {\n  flex: 1;\n  min-height: 28px;\n  border: 0;\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-surface-active);\n  color: var(--pc-text);\n  font: inherit;\n  cursor: pointer;\n}\n[role=\"tab\"] + [role=\"tab\"] {\n  border-left: 1px solid var(--pc-border);\n}\n[role=\"tab\"][aria-selected=\"true\"] {\n  border-bottom-color: transparent;\n  background: var(--pc-surface);\n  font-weight: bold;\n}\n[role=\"tab\"]:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n.sliders {\n  display: grid;\n  flex: 1;\n  grid-template-columns: auto minmax(0, 1fr) 3.6em;\n  gap: var(--pc-space-1);\n  align-items: center;\n  padding: var(--pc-space-1) var(--pc-space-2);\n  background: var(--pc-surface);\n}\n.letter {\n  font-weight: bold;\n}\n/* Each slider's track shows the colours its values give (--track, set per slider), under a round white handle with a\n   dark outline that shows on any colour */\n.sliders input[type=\"range\"] {\n  width: 100%;\n  min-width: 0;\n  height: 20px;\n  margin: 0;\n  background: transparent;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n.sliders input[type=\"range\"]::-webkit-slider-runnable-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-moz-range-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-webkit-slider-thumb {\n  width: 16px;\n  height: 16px;\n  margin-top: -4px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n  -webkit-appearance: none;\n}\n.sliders input[type=\"range\"]::-moz-range-thumb {\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n}\n.sliders input[type=\"number\"] {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 2px var(--pc-space-1);\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  font-variant-numeric: tabular-nums;\n}\n.sliders input:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 1px;\n}\n\n/* Saved colours: square swatches in a grid that scrolls */\n.swatches {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));\n  align-content: start;\n  min-height: 64px;\n  max-height: 132px;\n  overflow-y: auto;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n.swatch,\n.add {\n  aspect-ratio: 1;\n  min-width: 32px;\n  padding: 0;\n  border: 0;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  cursor: pointer;\n}\n.swatch {\n  background: var(--colour);\n  /* Long presses open the colour's menu instead of the browser's */\n  -webkit-touch-callout: none;\n  touch-action: manipulation;\n}\n.swatch[aria-pressed=\"true\"] {\n  box-shadow:\n    inset 0 0 0 2px #ffffff,\n    inset 0 0 0 3px #000000;\n}\n:host([deleting]) .swatch {\n  cursor: var(--pc-delete-cursor);\n}\n.add {\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: 20px;\n  font-weight: bold;\n}\n.add:hover:not(:disabled) {\n  background: var(--pc-surface-hover);\n}\n.add:disabled {\n  color: var(--pc-disabled);\n  cursor: default;\n}\n.swatch:focus-visible,\n.add:focus-visible {\n  position: relative;\n  z-index: 1;\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.actions {\n  display: flex;\n  gap: var(--pc-space-2);\n}\n/* Import and Export share the row */\n.actions button.pill-s {\n  flex: 1;\n}\n";
 export { style_default as default };

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

@@ -199,7 +199,7 @@ var PcPanelLayers = class extends PcPanel {
       ${this.renderRows(layers)}
       <button
         type="button"
-        class="pill new ${this.drag?.action === "duplicate" ? "drop-target" : ""}"
+        class="pill-s new ${this.drag?.action === "duplicate" ? "drop-target" : ""}"
         ?disabled=${!layers.canCreate}
         @click=${() => layers.create()}
       >

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcPanelLayers/style.css?inline
-var style_default = "/* \"New Layer\": a full-width purple pill */\nbutton.new {\n  width: 100%;\n  min-height: 40px;\n}\n/* Where a dragged layer would land: a full-width block with its name, as tall as the row (set by the menu) */\n.ghost {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  border: 2px dashed;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* Dropping a dragged layer here duplicates it (highlighted for touch, where there is no \"+\" cursor) */\nbutton.new.drop-target {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n/* For screen readers only */\n.announcement {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n";
+var style_default = "/* \"New Layer\": a full-width purple pill */\nbutton.new {\n  width: 100%;\n}\n/* Where a dragged layer would land: a full-width block with its name, as tall as the row (set by the menu) */\n.ghost {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  border: 2px dashed;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* Dropping a dragged layer here duplicates it (highlighted for touch, where there is no \"+\" cursor) */\nbutton.new.drop-target {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n/* For screen readers only */\n.announcement {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\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;

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

@@ -1,9 +1,34 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import { markDismissingPress } from "../../dismiss/index.js";
 import { css, html } from "lit";
 // src/ui/elements/PcPopover/index.ts
+/** Height of a popover's arrow (pixels) */
+var POPOVER_ARROW_SIZE = 8;
+/** Side of the square turned 45° that makes the arrow (its diagonal is about twice the arrow's height) */
+var ARROW_SQUARE = Math.round(8 * Math.SQRT2);
+/** Space kept between a placed popover and the window's edges (pixels) */
+var 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 }
+*/
+var popoverBelow = (anchor, popoverWidth, viewportWidth, margin = 8) => {
+	const centre = anchor.left + anchor.width / 2;
+	const left = Math.max(margin, Math.min(centre - popoverWidth / 2, viewportWidth - margin - popoverWidth));
+	return {
+		left,
+		top: anchor.bottom + 8,
+		arrowX: centre - left
+	};
+};
 /**
 * 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
@@ -17,7 +42,11 @@ var PcPopover = class extends PcElement {
 			reflect: true
 		},
 		label: { type: String },
-		anchor: { attribute: false }
+		anchor: { attribute: false },
+		arrow: {
+			type: Boolean,
+			reflect: true
+		}
 	};
 	static styles = [PcElement.styles, css`
       :host {
@@ -32,6 +61,7 @@ var PcPopover = class extends PcElement {
         max-height: inherit;
         overflow: auto;
         padding: var(--pc-space-2);
+        border: 1px solid var(--pc-border);
         border-radius: var(--pc-radius);
         background: var(--pc-surface-raised);
         color: var(--pc-text);
@@ -39,6 +69,22 @@ var PcPopover = class extends PcElement {
         font-family: var(--pc-font);
         font-size: var(--pc-font-size);
       }
+      /* A square turned 45° with its top corner showing, outlined like the popover */
+      :host([arrow])::before {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        top: -${ARROW_SQUARE / 2}px;
+        left: var(--pc-popover-arrow-x, 50%);
+        width: ${ARROW_SQUARE}px;
+        height: ${ARROW_SQUARE}px;
+        box-sizing: border-box;
+        border: 1px solid var(--pc-border);
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+        background: var(--pc-surface-raised);
+        transform: translateX(-50%) rotate(45deg);
+      }
       [role="dialog"]:focus-visible {
         outline: var(--pc-focus-width) solid var(--pc-focus);
       }
@@ -46,12 +92,34 @@ var PcPopover = class extends PcElement {
 	onPointerDown = (event) => {
 		if (!this.open) return;
 		const path = event.composedPath();
-		if (!path.includes(this) && !(this.anchor && path.includes(this.anchor))) emit(this, "pc-close");
+		if (path.includes(this) || this.anchor && path.includes(this.anchor)) return;
+		markDismissingPress(event);
+		emit(this, "pc-close");
 	};
 	constructor() {
 		super();
 		this.open = false;
 		this.label = "";
+		this.arrow = false;
+	}
+	/**
+	* 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() {
+		if (!this.anchor) return;
+		const { left, top, arrowX } = popoverBelow(this.anchor.getBoundingClientRect(), this.offsetWidth, window.innerWidth);
+		Object.assign(this.style, {
+			position: "fixed",
+			left: `${left}px`,
+			top: `${top}px`
+		});
+		this.style.setProperty("--pc-popover-arrow-x", `${arrowX}px`);
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -83,4 +151,4 @@ var PcPopover = class extends PcElement {
 	}
 };
 defineElement("pc-popover", PcPopover);
-export { PcPopover };
+export { POPOVER_ARROW_SIZE, POPOVER_MARGIN, PcPopover, popoverBelow };