@lvl99dotcom/paintcanvas 0.5.0 → 0.6.0

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

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

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

@@ -1,5 +1,6 @@
 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";
@@ -8,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 */
@@ -73,6 +73,7 @@ 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>;

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 { askConfirm, deletePresetQuestion } from "../../ask/index.js";
 import "../PcBrushSize/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import { groupPresetsByAuthor } from "../../../lib/brushes/authors/index.js";
@@ -77,7 +78,8 @@ 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);
 	changes = new ChangeController(this, () => [this.app, this.settings]);
@@ -127,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", {
@@ -287,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")}
@@ -317,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  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";
+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/PcProfileEditor/index.d.ts

@@ -0,0 +1,103 @@
+import { PcElement } from "../../base";
+import { type ConfirmFn, type PromptFn } from "../../ask";
+import "../PcDialogWindow";
+import "../PcProfileGraph";
+import "../PcContextMenu";
+import "../PcButton";
+import ProfileGraphs from "../../../lib/classes/ProfileGraphs";
+import { type ProfilePoint } from "../../../lib/profiles";
+/** What the editor's `pc-save` gives: the points to use and the graph they came from (undefined for an unsaved one) */
+export interface ProfileSaveDetail {
+    points: ProfilePoint[];
+    profileId?: string;
+}
+/**
+ * A window for editing a brush setting's profile graph (see `<pc-profile-graph>`): a drop-down of the presets and the
+ * user's own graphs (it says "Custom" once the graph is edited, or for one that isn't saved), a ⋮ menu (New graph,
+ * Duplicate…, Rename… and Delete…, the last two for the user's own graphs), the graph, and Save, Reset and Dismiss.
+ *
+ * - Choosing a graph in the drop-down loads its points.
+ * - New graph starts from a straight line, and Duplicate… saves a copy of the current graph under a name ("Custom" to
+ *   start with); Rename… and Delete… ask first.
+ * - Save uses the graph (firing `pc-save` with its points and ID); an edited or unsaved graph is first saved with a name
+ *   it asks for, asking before replacing another of the user's graphs with that name.
+ * - Reset goes back to the graph it opened with; Dismiss, ⨉ and Escape close it (`pc-close`) without changing anything.
+ *
+ * Graphs are saved in `profiles` (the canvas's `ProfileGraphs`).
+ *
+ * @example
+ * html`<pc-profile-editor .profiles=${app.profiles} .points=${points} profile-id="overweight" label="Width"
+ *   @pc-save=${(e) => use(e.detail)} @pc-close=${close}></pc-profile-editor>`
+ */
+export declare class PcProfileEditor extends PcElement {
+    static properties: {
+        profiles: {
+            attribute: boolean;
+        };
+        points: {
+            attribute: boolean;
+        };
+        profileId: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        draft: {
+            state: boolean;
+        };
+        sourceId: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** Where graphs are saved (the canvas's `ProfileGraphs`) */
+    profiles: ProfileGraphs;
+    /** The points it opens with */
+    points?: ProfilePoint[];
+    /** The ID of the graph it opens with, if it's one of the presets or saved graphs */
+    profileId?: string;
+    /** The setting's name, e.g. "Width" */
+    label: string;
+    /** The points being edited */
+    draft: ProfilePoint[];
+    /** The graph the points came from, until they're edited */
+    sourceId?: string;
+    /** Asks the user to confirm, in a dialog (replaceable for tests) */
+    confirm: ConfirmFn;
+    /** Asks the user for text, in a dialog (replaceable for tests) */
+    prompt: PromptFn;
+    constructor();
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    /** Go back to the graph it opened with */
+    reset(): void;
+    /** Load a graph's points */
+    load(id: string): void;
+    /** Whether the graph being edited is one of the user's own, unchanged */
+    private get ownSource();
+    /**
+     * Ask for a name and save the points as one of the user's graphs, asking before replacing another with that name.
+     * Returns the saved graph's ID, or undefined if it wasn't saved.
+     */
+    private saveAs;
+    /**
+     * Use the graph: save it first when it's edited or unsaved (asking for a name), then fire `pc-save`.
+     */
+    save(): Promise<void>;
+    /** Do one of the ⋮ menu's actions */
+    act(action: string): Promise<void>;
+    /** A graph's name: the presets' in the chosen language */
+    private graphName;
+    render(): import("lit").TemplateResult<1>;
+}