@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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

@@ -1,5 +1,6 @@
 import style_default from "./style.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import { markDismissingPress } from "../../dismiss/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import PaintCanvas, { Panel } from "../../../lib/classes/PaintCanvas/index.js";
 import KeyboardShortcuts, { SHORTCUT_EVENT } from "../../../lib/classes/KeyboardShortcuts/index.js";
@@ -13,7 +14,8 @@ import { DEFAULT_SIDE_MODES, STATE_EVENT, parseSideModes, sideModeFor } from "..
 import { hasToolSettings } from "../PcToolSettings/index.js";
 import "../PcPanel/index.js";
 import { PANE_COLLAPSE_EVENT, PcPane } from "../PcPane/index.js";
-import "../PcToolbar/index.js";
+import { PcToolbar } from "../PcToolbar/index.js";
+import "../PcClipboardTools/index.js";
 import "../PcCanvas/index.js";
 import "../PcCanvasMap/index.js";
 import "../PcPanelBrushes/index.js";
@@ -40,8 +42,10 @@ var TAKE_OVER_CHOICE = "take-over";
 * window), with slots to add or replace content:
 *
 * - `header`: across the top (empty by default)
-* - `left`: `<pc-toolbar>` (a pane) by default
-* - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) by default
+* - `left`: `<pc-toolbar>` (a pane) by default; toolbars in the sides are minimised (their tools one button that opens a
+*   menu of them) while the layout is narrow
+* - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) and, at its end,
+*   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow) by default
 * - `right`: a `<pc-pane>` with `<pc-panel-layers>` by default
 * - `center`: `<pc-canvas>` by default
 * - `overlay`: drawn over the canvas; `<pc-canvas-map>` by default
@@ -55,8 +59,9 @@ var TAKE_OVER_CHOICE = "take-over";
 *
 * Each side has a mode, chosen by the layout's width from `left-modes` and `right-modes` (default `"docked,
 * rail@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
-* column of buttons (one per panel) that open each panel over the canvas; or `floating`, the pane over the canvas as a
-* box that collapses to a button. Give side content in a `<pc-pane>` to have it follow the side's mode.
+* column of buttons (one per panel) that open each panel over the canvas; `floating`, the pane over the canvas as a
+* box that collapses to a button; or `overlay`, a rail over the canvas without a background (the canvas fills the
+* width behind it). Give side content in a `<pc-pane>` to have it follow the side's mode.
 *
 * Reports its state for styling as attributes (`narrow`, `input="pen|touch|mouse"`, `ui-hidden`, `left-mode`,
 * `right-mode`) and as `pc-state-change` events (see `LayoutState`). Creates its own canvas unless given one, and
@@ -66,8 +71,8 @@ var TAKE_OVER_CHOICE = "take-over";
 * reloading the page (see `LayerAutosave`). While another window is drawing on it, the layout is blocked by a message
 * that offers to draw here instead. Fires `pc-toast` when the drawing can't be loaded or saved.
 *
-* With a `settings-store` name, the user's app settings (input settings, keyboard shortcuts, colour palette and
-* colours) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
+* With a `settings-store` name, the user's app settings (input settings, keyboard shortcuts, colour palette, colours,
+* theme and language) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
 *
 * @example
 * html`<paint-canvas style="height: 600px"></paint-canvas>`
@@ -137,7 +142,7 @@ var PaintCanvasElement = class extends PcElement {
 	keys;
 	/** The state last reported, to report only changes */
 	reported;
-	/** Space the floating sides cover over the canvas */
+	/** Space the floating and overlay sides cover over the canvas */
 	floatingInsets = NO_INSETS;
 	resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(([entry]) => {
 		this.width = Math.round(entry?.contentRect.width ?? 0);
@@ -157,7 +162,7 @@ var PaintCanvasElement = class extends PcElement {
 	onShortcut = (event) => {
 		if (event.detail.type === "save") this.saveScreenshot();
 	};
-	onDocumentPointerDown = (event) => this.closePaletteOutside(event.composedPath());
+	onDocumentPointerDown = (event) => this.closePanelOutside(event);
 	onPaneCollapse = () => this.requestUpdate();
 	constructor() {
 		super();
@@ -233,16 +238,18 @@ var PaintCanvasElement = class extends PcElement {
 		const given = slot.assignedElements();
 		return (given.length ? given : [...slot.children]).filter((element) => element instanceof PcPane);
 	}
-	/** Show each side's panes in the side's mode, facing the canvas */
+	/** Show each side's panes in the side's mode, facing the canvas, with toolbars minimised while the layout is narrow */
 	setPaneModes() {
+		const narrow = this.width < this.narrowWidth;
 		for (const side of SIDES) for (const pane of this.panesIn(side)) {
 			pane.mode = this.modeOf(side);
 			pane.edge = side;
+			if (pane instanceof PcToolbar) pane.minimised = narrow;
 		}
 	}
-	/** Keep the canvas clear of floating sides when fitting it */
+	/** Keep the canvas clear of floating and overlay sides when fitting it */
 	measureFloatingSides() {
-		const width = (side) => this.panesIn(side).filter((pane) => pane.mode === "floating" && !pane.collapsed).reduce((widest, pane) => Math.max(widest, pane.getBoundingClientRect().width), 0);
+		const width = (side) => this.panesIn(side).filter((pane) => pane.mode === "floating" ? !pane.collapsed : pane.mode === "overlay").reduce((widest, pane) => Math.max(widest, pane.getBoundingClientRect().width), 0);
 		const insets = {
 			...NO_INSETS,
 			left: width("left"),
@@ -419,12 +426,16 @@ var PaintCanvasElement = class extends PcElement {
     </div>`;
 	}
 	/**
-	* Close the colour palette on a press outside it and the colours that open it.
+	* Close the open panel (brush, eraser, layers, app menu or colour palette) on a press outside it and the button that
+	* opens it, marking the press (see `markDismissingPress`) so the canvas doesn't draw unless it's dragged. Presses in
+	* dialogs (e.g. one the panel opened) don't count as outside.
 	*/
-	closePaletteOutside(path) {
-		const app = this.app;
-		if (app?.panel !== Panel.Palette) return;
-		if (!path.some((target) => target instanceof Element && (target.localName === "pc-panel-colours" || target.localName === "pc-colour-pair"))) app.closePanel();
+	closePanelOutside(event) {
+		const panel = this.app?.panel;
+		if (!panel) return;
+		if (event.composedPath().some((target) => target instanceof Element && (target.classList.contains("panel") && target.getRootNode() === this.renderRoot || target.matches("dialog, pc-dialog, pc-dialog-window") || target.getAttribute("data-panel") === panel || panel === Panel.Palette && target.localName === "pc-colour-pair"))) return;
+		markDismissingPress(event);
+		this.app.closePanel();
 	}
 	/** The menus the toolbar opens, floating over the canvas beside it */
 	renderPanels(app) {
@@ -473,6 +484,8 @@ var PaintCanvasElement = class extends PcElement {
 		}];
 		return html`<pc-dialog
       class="elsewhere"
+      inline
+      .dismissible=${false}
       heading=${this.t("paintCanvas.autosave.elsewhere")}
       message=${this.t("paintCanvas.autosave.elsewhereMessage")}
       .choices=${choices}
@@ -502,11 +515,17 @@ var PaintCanvasElement = class extends PcElement {
                   .app=${app}
                   @pc-configure-brush=${(event) => this.configure(event.detail)}
                 ></pc-tool-settings
+                ><pc-clipboard-tools
+                  slot="end"
+                  .app=${app}
+                  ?narrow=${this.width < this.narrowWidth}
+                ></pc-clipboard-tools
               ></pc-pane>` : nothing)}
       </div>
       <div
         class="center"
         part="center"
+        style="--pc-left-inset: ${this.floatingInsets.left}px"
         role="region"
         aria-label=${this.t("paintCanvas.layout.canvas")}
         ?inert=${blocked}

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PaintCanvas/style.css?inline
-var style_default = "/* The layout: header across the top, footer across the bottom, sides left and right, and between them the tool\n   settings, the canvas and the bottom bar. Empty areas take no space. */\n:host {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"header header header\" auto\n    \"left top right\" auto\n    \"left center right\" 1fr\n    \"left bottom right\" auto\n    \"footer footer footer\" auto / auto 1fr auto;\n  overflow: hidden;\n  background: var(--pc-bar);\n  font-family: var(--pc-font);\n  font-size: var(--pc-font-size);\n}\nheader {\n  grid-area: header;\n}\n.top {\n  grid-area: top;\n  min-width: 0;\n}\n/* The tool settings fill the top pane */\n.top pc-tool-settings {\n  flex: 1;\n}\n.center {\n  position: relative;\n  grid-area: center;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n.bottom {\n  grid-area: bottom;\n  min-width: 0;\n}\nfooter {\n  grid-area: footer;\n}\n.side {\n  position: relative;\n  z-index: 3;\n  display: flex;\n  min-height: 0;\n}\n/* A side's panes fill it */\n.side pc-pane,\n.side pc-toolbar,\n.side ::slotted(*) {\n  flex: 1;\n}\n.side.left {\n  grid-area: left;\n}\n.side.right {\n  grid-area: right;\n}\n\n/* Hiding the interface (Tab key) leaves only the canvas */\n:host([ui-hidden]) header,\n:host([ui-hidden]) .top,\n:host([ui-hidden]) .bottom,\n:host([ui-hidden]) footer,\n:host([ui-hidden]) .side {\n  display: none;\n}\n\n/* The canvas fills the middle; things drawn over it go in the overlay */\n.center ::slotted([slot=\"center\"]),\n.center pc-canvas {\n  position: absolute;\n  inset: 0;\n}\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.overlay > * {\n  pointer-events: auto;\n}\npc-canvas-map {\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n}\n\n/* Menus opened from the toolbar float over the canvas, beside the toolbar */\n.panel {\n  position: absolute;\n  z-index: 4;\n  left: 0;\n  bottom: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n.panel.top-panel {\n  top: 0;\n  bottom: auto;\n}\n/* The app menu: the implementer's content in a panel */\n.menu-panel:not([open]) {\n  display: none;\n}\n\n/* Floating: the side's panes float over the canvas (see pc-pane), so the side takes no space */\n.side[data-mode=\"floating\"] {\n  /* Beside the canvas only, so it floats over the canvas and not the tool settings */\n  grid-row: 3;\n  width: 0;\n}\n/* While another window is drawing, its message covers only the layout (not the whole page) */\npc-dialog.elsewhere {\n  position: absolute;\n}\n";
+var style_default = "/* The layout: header across the top, footer across the bottom, sides left and right, and between them the tool\n   settings, the canvas and the bottom bar. Empty areas take no space. */\n:host {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"header header header\" auto\n    \"left top right\" auto\n    \"left center right\" 1fr\n    \"left bottom right\" auto\n    \"footer footer footer\" auto / auto 1fr auto;\n  overflow: hidden;\n  background: var(--pc-bar);\n  font-family: var(--pc-font);\n  font-size: var(--pc-font-size);\n}\nheader {\n  grid-area: header;\n}\n.top {\n  grid-area: top;\n  min-width: 0;\n}\n/* The tool settings fill the top pane */\n.top pc-tool-settings {\n  flex: 1;\n}\n.center {\n  position: relative;\n  grid-area: center;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n.bottom {\n  grid-area: bottom;\n  min-width: 0;\n}\nfooter {\n  grid-area: footer;\n}\n.side {\n  position: relative;\n  z-index: 3;\n  display: flex;\n  min-height: 0;\n}\n/* A side's panes fill it */\n.side pc-pane,\n.side pc-toolbar,\n.side ::slotted(*) {\n  flex: 1;\n}\n.side.left {\n  grid-area: left;\n}\n.side.right {\n  grid-area: right;\n}\n\n/* Hiding the interface (Tab key) leaves only the canvas */\n:host([ui-hidden]) header,\n:host([ui-hidden]) .top,\n:host([ui-hidden]) .bottom,\n:host([ui-hidden]) footer,\n:host([ui-hidden]) .side {\n  display: none;\n}\n\n/* The canvas fills the middle; things drawn over it go in the overlay */\n.center ::slotted([slot=\"center\"]),\n.center pc-canvas {\n  position: absolute;\n  inset: 0;\n}\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.overlay > * {\n  pointer-events: auto;\n}\npc-canvas-map {\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n}\n\n/* Menus opened from the toolbar float over the canvas, beside the toolbar */\n.panel {\n  position: absolute;\n  z-index: 4;\n  left: 0;\n  bottom: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n.panel.top-panel {\n  top: 0;\n  bottom: auto;\n}\n/* The app menu: the implementer's content in a panel */\n.menu-panel:not([open]) {\n  display: none;\n}\n\n/* Floating: the side's panes float over the canvas (see pc-pane), so the side takes no space */\n.side[data-mode=\"floating\"] {\n  /* Beside the canvas only, so it floats over the canvas and not the tool settings */\n  grid-row: 3;\n  width: 0;\n}\n/* Overlay: the side's rail sits over the canvas (beside it only, not the tool settings), so the canvas fills the\n   width behind it; presses between its panes' buttons (which take presses themselves) reach the canvas */\n.side[data-mode=\"overlay\"] {\n  grid-row: 3;\n  grid-column: 1 / -1;\n  pointer-events: none;\n}\n.side.left[data-mode=\"overlay\"] {\n  justify-self: start;\n}\n.side.right[data-mode=\"overlay\"] {\n  justify-self: end;\n}\n/* The toolbar's panels open beside a left overlay rail, not under it */\n:host([left-mode=\"overlay\"]) .panel {\n  left: var(--pc-left-inset);\n}\n";
 export { style_default as default };

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

@@ -1,14 +1,15 @@
-import { nothing, type PropertyValues } from "lit";
+import { nothing } from "lit";
 import { PcElement } from "../../base";
 import "../PcShortcutSettings";
+import "../PcDialogWindow";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 /**
  * Buttons for the user's app settings: "Keyboard shortcuts", which opens a window to change them (see
  * `pc-shortcut-settings`), and "Import settings" and "Export settings", which read and write a settings JSON file (input
- * settings, keyboard shortcuts, colour palette and colours). The window is a modal `<dialog>` above the whole page; it
- * closes with its Close button, Escape, or a press on the backdrop, and the browser gives focus back to the button. Fires `pc-toast` after importing, or when importing or
- * exporting fails.
+ * settings, keyboard shortcuts, colour palette, colours, profile graphs, theme and language). The window is a shaded
+ * `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
+ * back to the button. Fires `pc-toast` after importing, or when importing or exporting fails.
  *
  * @example
  * html`<pc-app-settings .app=${canvas}></pc-app-settings>`
@@ -40,7 +41,6 @@ export declare class PcAppSettings extends PcElement {
     /** Saves exported files (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
     constructor();
-    protected updated(changed: PropertyValues<this>): void;
     /** Close the keyboard shortcuts window */
     closeShortcuts(): void;
     /**
@@ -53,7 +53,7 @@ export declare class PcAppSettings extends PcElement {
     exportFile(): Promise<void>;
     /** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
     private toastError;
-    /** The keyboard shortcuts window: a modal dialog, with its contents only while open */
+    /** The keyboard shortcuts window, with its contents only while open */
     private renderShortcuts;
     render(): import("lit").TemplateResult<1> | typeof nothing;
 }

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

@@ -2,6 +2,7 @@ import { SETTINGS_FILE_FORMAT } from "../../../lib/settings/schema.js";
 import { ICON_CONTROLS_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
 import "../PcShortcutSettings/index.js";
+import "../PcDialogWindow/index.js";
 import { SETTINGS_FILE_ERRORS, SettingsFileError, applySettings, collectSettings, exportSettingsFile, parseSettingsFile, settingsFileName } from "../../../lib/settings/index.js";
 import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
 import { css, html, nothing, unsafeCSS } from "lit";
@@ -14,9 +15,9 @@ var SETTINGS_FILE_ERROR_KEYS = {
 /**
 * Buttons for the user's app settings: "Keyboard shortcuts", which opens a window to change them (see
 * `pc-shortcut-settings`), and "Import settings" and "Export settings", which read and write a settings JSON file (input
-* settings, keyboard shortcuts, colour palette and colours). The window is a modal `<dialog>` above the whole page; it
-* closes with its Close button, Escape, or a press on the backdrop, and the browser gives focus back to the button. Fires `pc-toast` after importing, or when importing or
-* exporting fails.
+* settings, keyboard shortcuts, colour palette, colours, profile graphs, theme and language). The window is a shaded
+* `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
+* back to the button. Fires `pc-toast` after importing, or when importing or exporting fails.
 *
 * @example
 * html`<pc-app-settings .app=${canvas}></pc-app-settings>`
@@ -48,32 +49,8 @@ var PcAppSettings = class extends PcElement {
         flex-wrap: wrap;
         gap: var(--pc-space-2);
       }
-      /* A modal window in the browser's top layer, above everything on the page */
-      dialog {
-        box-sizing: border-box;
-        width: min(480px, calc(100vw - 2 * var(--pc-space-3)));
-        max-height: calc(100vh - 2 * var(--pc-space-3));
-        padding: 0;
-        border: 0;
-        border-radius: var(--pc-radius);
-        background: var(--pc-surface-raised);
-        color: var(--pc-text);
-        box-shadow: var(--pc-shadow);
-      }
-      dialog::backdrop {
-        background: var(--pc-backdrop);
-      }
-      .window {
-        display: flex;
-        flex-direction: column;
-        gap: var(--pc-space-3);
-        box-shadow: none;
-      }
-      .header {
-        display: flex;
-        gap: var(--pc-space-2);
-        align-items: center;
-        justify-content: space-between;
+      pc-dialog-window {
+        --pc-dialog-width: 480px;
       }
       h2 {
         margin: 0;
@@ -87,13 +64,6 @@ var PcAppSettings = class extends PcElement {
 		super();
 		this.shortcutsOpen = false;
 	}
-	updated(changed) {
-		if (!changed.has("shortcutsOpen")) return;
-		const dialog = this.renderRoot.querySelector("dialog");
-		if (!dialog) return;
-		if (this.shortcutsOpen && !dialog.open) dialog.showModal();
-		else if (!this.shortcutsOpen && dialog.open) dialog.close();
-	}
 	/** Close the keyboard shortcuts window */
 	closeShortcuts() {
 		this.shortcutsOpen = false;
@@ -143,34 +113,20 @@ var PcAppSettings = class extends PcElement {
 			kind: "error"
 		});
 	}
-	/** The keyboard shortcuts window: a modal dialog, with its contents only while open */
+	/** The keyboard shortcuts window, with its contents only while open */
 	renderShortcuts(app) {
-		return html`<dialog
-      aria-labelledby="shortcuts-title"
-      @close=${() => this.closeShortcuts()}
-      @click=${(e) => {
-			if (e.target === e.currentTarget) this.closeShortcuts();
-		}}
+		return html`<pc-dialog-window
+      class="shortcuts-window"
+      shaded
+      ?open=${this.shortcutsOpen}
+      @pc-dismiss=${() => this.closeShortcuts()}
     >
-      ${this.shortcutsOpen ? html`<div class="window">
-              <div class="header">
-                <h2 id="shortcuts-title">
-                  ${this.t("paintCanvas.shortcuts.title")}
-                </h2>
-                <button
-                  type="button"
-                  class="close dismiss"
-                  autofocus
-                  @click=${() => this.closeShortcuts()}
-                >
-                  ${this.t("paintCanvas.common.close")}
-                </button>
-              </div>
-              <pc-shortcut-settings
-                .settings=${app.shortcuts}
-              ></pc-shortcut-settings>
-            </div>` : nothing}
-    </dialog>`;
+      <h2 slot="header-middle">${this.t("paintCanvas.shortcuts.title")}</h2>
+      ${this.shortcutsOpen ? html`<pc-shortcut-settings
+              slot="body"
+              .settings=${app.shortcuts}
+            ></pc-shortcut-settings>` : nothing}
+    </pc-dialog-window>`;
 	}
 	render() {
 		const app = this.app;
@@ -178,7 +134,7 @@ var PcAppSettings = class extends PcElement {
 		return html`<div class="actions">
         <button
           type="button"
-          class="pill shortcuts"
+          class="pill-s shortcuts"
           aria-haspopup="dialog"
           @click=${() => this.shortcutsOpen = true}
         >
@@ -186,14 +142,14 @@ var PcAppSettings = class extends PcElement {
         </button>
         <button
           type="button"
-          class="pill import"
+          class="pill-s import"
           @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
         >
           ${this.t("paintCanvas.settings.import")}
         </button>
         <button
           type="button"
-          class="pill export"
+          class="pill-s export"
           @click=${() => void this.exportFile()}
         >
           ${this.t("paintCanvas.settings.export")}

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

@@ -1,13 +1,15 @@
 import { nothing } from "lit";
+import { type ConfirmFn, type PromptFn } from "../../ask";
 import { PcElement } from "../../base";
 import "../PcBrushTest";
+import "../PcDialogWindow";
+import "../PcSliderRange";
+import "../PcProfileEditor";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import { SmoothingType, type BrushConfig } from "../../../lib/brushes/types";
+import { type VaryingParam } from "../../../lib/brushes/configRanges";
 import { type ShapeImage } from "../../../lib/brushes/shapeImage";
-/** Asks the user to confirm; replaceable for tests */
-export type ConfirmFn = (message: string) => boolean;
-/** Asks the user for text; replaceable for tests */
-export type PromptFn = (message: string, value: string) => string | null;
+export type { ConfirmFn, PromptFn } from "../../ask";
 /** The smoothing choices, in the order shown: value, translation key of the name, and icon name */
 export declare const SMOOTHING_CHOICES: readonly [{
     readonly value: SmoothingType.Linear;
@@ -23,14 +25,16 @@ export declare const SMOOTHING_CHOICES: readonly [{
     readonly icon: "smoothingBezierCubic";
 }];
 /**
- * The brush (or eraser) configuration window: a testing area, the shape (upload or paste), smoothing, width, height,
+ * The brush (or eraser) configuration window: a testing area, the shape (pressing it picks a built-in shape from the
+ * device's own list, which says "Custom" for an uploaded or pasted one; or upload or paste one), smoothing, width, height,
  * opacity, rotation, offsets, sample rate, spacing and snapping to the pixel grid. Width, height, opacity, rotation and the offsets can vary with
- * pressure, tilt and randomness; when any is on, the setting has a min and max.
+ * pressure, tilt and randomness; when any is on, the setting has a min and max, set with a `<pc-slider-range>`.
  *
  * Changes stay in the window until "Save" (fires `pc-save` with the settings, to apply to the current tool) or "Add to
  * presets" (saves them as one of the user's presets, asking before replacing one with the same name, and selects it).
- * "Delete preset…" shows when editing one of the user's presets. Fires `pc-close` when closed, and `pc-toast` with a
- * message after adding or deleting a preset, or when a shape can't be used. Styling is structural only.
+ * "Delete preset…" shows when editing one of the user's presets. It's a shaded `<pc-dialog-window>`, closed with its ⨉
+ * button or Escape (not a press outside it, which would lose the changes). Fires `pc-close` when closed, and `pc-toast`
+ * with a message after adding or deleting a preset, or when a shape can't be used.
  *
  * @example
  * html`<pc-brush-config .app=${app} kind="brush" .config=${app.brush.preset} @pc-save=${apply}></pc-brush-config>`
@@ -55,6 +59,9 @@ export declare class PcBrushConfig extends PcElement {
         busy: {
             state: boolean;
         };
+        editingProfile: {
+            state: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -78,16 +85,19 @@ export declare class PcBrushConfig extends PcElement {
     draft?: BrushConfig;
     /** Whether a preset is being saved or deleted */
     busy: boolean;
+    /** The setting whose profile graph is being edited, if any */
+    editingProfile?: VaryingParam;
+    /** 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;
     /** Turns files into brush shapes (replaceable for tests) */
     readShape: (file: File) => Promise<ShapeImage>;
-    /** Reads a brush shape from the clipboard (replaceable for tests) */
+    /**
+     * Reads a brush shape from the clipboard, or else from image data copied on the canvas (replaceable for tests)
+     */
     readClipboard: () => Promise<ShapeImage>;
-    private readonly onKeyDown;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     /** Fire an event that crosses shadow DOM boundaries */
     private emit;
@@ -118,13 +128,21 @@ export declare class PcBrushConfig extends PcElement {
      * Delete the preset being edited, after confirming.
      */
     deletePreset(): Promise<void>;
-    /** Render a number input */
-    private number;
-    /** Render a range slider */
-    private slider;
+    /**
+     * Render a slider for one value (a single `<pc-slider-range>`), the same as the ranges of settings that vary.
+     */
+    private single;
     /** Render a setting that can vary: its value (or min and max), and its pressure, tilt and randomise icon toggles */
     private renderParam;
+    /**
+     * Use a built-in shape (see `BUILT_IN_SHAPES`), keeping the width; they're all square, so the height is the same.
+     */
+    private useBuiltInShape;
     /** Render the shape and smoothing row */
     private renderShape;
     render(): import("lit").TemplateResult<1> | typeof nothing;
+    /** The profile graph editor for the setting being edited, while open */
+    private renderProfileEditor;
+    /** Profile graphs, when there's no canvas to keep them */
+    private readonly profiles;
 }