@lvl99dotcom/paintcanvas 0.5.0 → 0.7.0

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

@@ -1,13 +1,16 @@
 import { nothing } from "lit";
+import { type ConfirmFn, type PromptFn } from "../../ask";
 import { PcElement } from "../../base";
 import "../PcBrushTest";
+import "../PcToggleCheckbox";
+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;
@@ -26,12 +29,13 @@ export declare const SMOOTHING_CHOICES: readonly [{
  * 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>`
@@ -56,6 +60,9 @@ export declare class PcBrushConfig extends PcElement {
         busy: {
             state: boolean;
         };
+        editingProfile: {
+            state: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -79,7 +86,11 @@ 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>;
@@ -87,10 +98,7 @@ export declare class PcBrushConfig extends PcElement {
      * 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;
@@ -121,10 +129,10 @@ 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;
     /**
@@ -134,4 +142,8 @@ export declare class PcBrushConfig extends PcElement {
     /** 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;
 }

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

@@ -1,10 +1,17 @@
 import style_default from "./style.js";
 import { ICON_CONTROLS_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
 import { iconLabel } from "../../icons/index.js";
+import { askConfirm, askText, deletePresetQuestion } from "../../ask/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
 import "../PcBrushTest/index.js";
+import "../PcToggleCheckbox/index.js";
+import "../PcDialogWindow/index.js";
+import "../PcSliderRange/index.js";
+import "../PcProfileEditor/index.js";
+import ProfileGraphs from "../../../lib/classes/ProfileGraphs/index.js";
+import { isLinear } from "../../../lib/profiles/index.js";
 import { SmoothingType } from "../../../lib/brushes/types/index.js";
-import { PARAM_LIMITS, VARIATION_SOURCES, readRange, toggleSource, writeRange } from "../../../lib/brushes/configRanges/index.js";
+import { PARAM_LIMITS, VARIATION_SOURCES, configKey, readRange, selectSource, writeRange } from "../../../lib/brushes/configRanges/index.js";
 import { SHAPE_ERRORS, ShapeImageError, readClipboardShape, readShapeImage } from "../../../lib/brushes/shapeImage/index.js";
 import { BUILT_IN_SHAPES, builtInShapeId } from "../../../lib/brushes/shapes/index.js";
 import "../../../lib/brushes/StrokeSampler/index.js";
@@ -36,6 +43,15 @@ var SOURCE_ICONS = {
 	tilt: "tilt",
 	randomise: "randomise"
 };
+/** Translation keys of the varying settings' names */
+var PARAM_LABELS = {
+	width: "paintCanvas.common.width",
+	height: "paintCanvas.common.height",
+	alpha: "paintCanvas.common.opacity",
+	rotation: "paintCanvas.brushConfig.rotation",
+	offsetX: "paintCanvas.brushConfig.offsetX",
+	offsetY: "paintCanvas.brushConfig.offsetY"
+};
 /** Translation keys of the variation sources' names */
 var SOURCE_LABELS = {
 	pressure: "paintCanvas.toolSettings.pressure",
@@ -53,21 +69,17 @@ var SHAPE_ERROR_KEYS = {
 };
 /** Largest stamp spacing in pixels */
 var MAX_SPACING = 200;
-/** Read a number input, or undefined if it isn't a number */
-var numberValue = (event) => {
-	const value = event.target.valueAsNumber;
-	return Number.isFinite(value) ? value : void 0;
-};
 /**
 * 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>`
@@ -80,7 +92,8 @@ var PcBrushConfig = class extends PcElement {
 		config: { attribute: false },
 		editingId: { type: String },
 		draft: { state: true },
-		busy: { state: true }
+		busy: { state: true },
+		editingProfile: { state: true }
 	};
 	static styles = [
 		PcElement.styles,
@@ -89,30 +102,21 @@ var PcBrushConfig = class extends PcElement {
 		unsafeCSS(ICON_CONTROLS_CSS),
 		unsafeCSS(PILLS_CSS)
 	];
-	confirm = (message) => window.confirm(message);
-	prompt = (message, value) => window.prompt(message, value);
+	/** Asks the user to confirm, in a dialog (replaceable for tests) */
+	confirm = (options) => askConfirm(this.renderRoot, options);
+	/** Asks the user for text, in a dialog (replaceable for tests) */
+	prompt = (options) => askText(this.renderRoot, options);
 	/** Turns files into brush shapes (replaceable for tests) */
 	readShape = readShapeImage;
 	/**
 	* Reads a brush shape from the clipboard, or else from image data copied on the canvas (replaceable for tests)
 	*/
 	readClipboard = () => readClipboardShape(navigator.clipboard, {}, async () => this.app?.copiedPng());
-	onKeyDown = (event) => {
-		if (event.key === "Escape") this.close();
-	};
 	constructor() {
 		super();
 		this.kind = "brush";
 		this.busy = false;
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		window.addEventListener("keydown", this.onKeyDown);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		window.removeEventListener("keydown", this.onKeyDown);
-	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		if (changed.has("config") && this.config) this.draft = structuredClone(this.config);
@@ -190,10 +194,22 @@ var PcBrushConfig = class extends PcElement {
 		const app = this.app;
 		const draft = this.draft;
 		if (!app || !draft) return;
-		const name = this.prompt(this.t("paintCanvas.brushConfig.presetName"), draft.name ?? "")?.trim();
+		const name = (await this.prompt({
+			heading: this.t("paintCanvas.brushConfig.addToPresets"),
+			label: this.t("paintCanvas.brushConfig.presetName"),
+			value: draft.name ?? "",
+			confirm: this.t("paintCanvas.common.save"),
+			cancel: this.t("paintCanvas.common.cancel")
+		}))?.trim();
 		if (!name) return;
 		const existing = app.customPresets.findOwn(name, app.authorHandle, app.names.unknownAuthor);
-		if (existing && !this.confirm(this.t("paintCanvas.presets.replaceConfirm", { name }))) return;
+		if (existing && !await this.confirm({
+			heading: this.t("paintCanvas.presets.replaceHeading"),
+			message: this.t("paintCanvas.presets.replaceConfirm", { name }),
+			confirm: this.t("paintCanvas.presets.replace"),
+			cancel: this.t("paintCanvas.common.cancel"),
+			cancelling: true
+		})) return;
 		const preset = {
 			...app.newPreset(draft, name),
 			...existing ? { id: existing.id } : {}
@@ -224,7 +240,7 @@ var PcBrushConfig = class extends PcElement {
 		const id = this.editingId;
 		if (!app || !id) return;
 		const name = app.customPresets.get(id)?.name ?? "this preset";
-		if (!this.confirm(this.t("paintCanvas.presets.deleteConfirm", { name }))) return;
+		if (!await this.confirm(deletePresetQuestion(this.translations, name))) return;
 		this.busy = true;
 		try {
 			await app.customPresets.remove(id);
@@ -242,32 +258,22 @@ var PcBrushConfig = class extends PcElement {
 			this.busy = false;
 		}
 	}
-	/** Render a number input */
-	number(className, value, limits, onChange, disabled = false) {
-		return html`<input
-      type="number"
-      class=${className}
-      min=${limits.min}
-      max=${limits.max}
-      ?disabled=${disabled || this.busy}
-      .value=${String(Math.round(value))}
-      @change=${(e) => {
-			const next = numberValue(e);
-			if (next !== void 0) onChange(next);
-		}}
-    />`;
-	}
-	/** Render a range slider */
-	slider(className, value, limits, onChange, disabled = false) {
-		return html`<input
-      type="range"
+	/**
+	* Render a slider for one value (a single `<pc-slider-range>`), the same as the ranges of settings that vary.
+	*/
+	single(className, label, value, limits, onChange, disabled = false) {
+		const changed = (event) => onChange(event.detail.value);
+		return html`<pc-slider-range
+      single
       class=${className}
+      label=${label}
       min=${limits.min}
       max=${limits.max}
+      .value=${live(Math.round(value))}
       ?disabled=${disabled || this.busy}
-      .value=${String(value)}
-      @input=${(e) => onChange(e.target.valueAsNumber)}
-    />`;
+      @pc-input=${changed}
+      @pc-change=${changed}
+    ></pc-slider-range>`;
 	}
 	/** Render a setting that can vary: its value (or min and max), and its pressure, tilt and randomise icon toggles */
 	renderParam(draft, param, label, disabled = false) {
@@ -275,31 +281,61 @@ var PcBrushConfig = class extends PcElement {
 		const limits = PARAM_LIMITS[param];
 		const isOffset = param === "offsetX" || param === "offsetY";
 		const write = (values) => this.changeParam(param, writeRange(draft, param, values));
-		const values = range.varies ? html`${this.number(`${param} min`, range.min, limits, (min) => write({ min }), disabled)}
-        ${this.slider(`${param} min`, range.min, limits, (min) => write({ min }), disabled)}
-        ${this.slider(`${param} max`, range.max, limits, (max) => write({ max }), disabled)}
-        ${this.number(`${param} max`, range.max, limits, (max) => write({ max }), disabled)}` : html`${this.number(param, range.value, limits, (value) => write({ value }), disabled || isOffset)}
-        ${this.slider(param, range.value, limits, (value) => write({ value }), disabled || isOffset)}`;
+		const writeEnds = (event) => write({
+			min: event.detail.low,
+			max: event.detail.high
+		});
+		const values = range.varies ? html`<pc-slider-range
+          class=${`${param} range`}
+          label=${label}
+          min=${limits.min}
+          max=${limits.max}
+          .low=${live(Math.round(range.min))}
+          .high=${live(Math.round(range.max))}
+          ?disabled=${disabled || this.busy}
+          @pc-input=${writeEnds}
+          @pc-change=${writeEnds}
+        ></pc-slider-range>` : this.single(param, label, range.value, limits, (value) => write({ value }), disabled || isOffset);
+		const active = VARIATION_SOURCES.find((source) => range.sources[source]);
+		const select = (source) => this.changeParam(param, selectSource(draft, param, source));
 		return html`<div class="row" data-param=${param}>
       <span class="label">${label}</span>
       ${values}
-      ${VARIATION_SOURCES.map((source) => html`<label
-            class="icon-toggle"
-            title=${this.t(SOURCE_LABELS[source])}
-          >
-            <input
-              type="checkbox"
-              class=${`${param} ${source}`}
-              aria-label=${this.t("paintCanvas.brushConfig.variation", {
+      <fieldset class="sources" ?disabled=${disabled || this.busy}>
+        <legend class="visually-hidden">
+          ${this.t("paintCanvas.brushConfig.varyWith", { param: label })}
+        </legend>
+        ${VARIATION_SOURCES.map((source) => html`<label
+              class="icon-toggle"
+              title=${this.t(SOURCE_LABELS[source])}
+            >
+              <input
+                type="radio"
+                name=${`${param}-source`}
+                class=${`${param} ${source}`}
+                aria-label=${this.t("paintCanvas.brushConfig.variation", {
 			param: label,
 			source: this.t(SOURCE_LABELS[source])
 		})}
-              .checked=${range.sources[source]}
-              ?disabled=${disabled || this.busy}
-              @change=${(e) => this.changeParam(param, toggleSource(draft, param, source, e.target.checked))}
-            />
-            ${iconLabel(this.iconUrl(SOURCE_ICONS[source]), this.t(SOURCE_LABELS[source]))}
-          </label>`)}
+                .checked=${live(active === source)}
+                @change=${() => select(source)}
+                @click=${() => {
+			if (active === source) select(void 0);
+		}}
+              />
+              ${iconLabel(this.iconUrl(SOURCE_ICONS[source]), this.t(SOURCE_LABELS[source]))}
+            </label>`)}
+      </fieldset>
+      <button
+        type="button"
+        class=${`icon-button profile ${param} ${draft[configKey(param)]?.profile ? "configured" : ""}`}
+        title=${this.t("paintCanvas.profileEditor.button", { param: label })}
+        aria-haspopup="dialog"
+        ?disabled=${!active || disabled || this.busy}
+        @click=${() => this.editingProfile = param}
+      >
+        ${iconLabel(this.iconUrl("profileGraph"), this.t("paintCanvas.profileEditor.button", { param: label }))}
+      </button>
     </div>`;
 	}
 	/**
@@ -406,13 +442,17 @@ var PcBrushConfig = class extends PcElement {
 			min: 0,
 			max: MAX_SPACING
 		};
-		return html`<div
-      role="dialog"
-      aria-modal="true"
-      aria-label=${this.t(this.kind === "eraser" ? "paintCanvas.brushConfig.eraserTitle" : "paintCanvas.brushConfig.brushTitle")}
-    >
-      <div class="row header">
-        <label>
+		return html`<pc-dialog-window
+        open
+        shaded
+        dismissible="false"
+        label=${this.t(this.kind === "eraser" ? "paintCanvas.brushConfig.eraserTitle" : "paintCanvas.brushConfig.brushTitle")}
+        @pc-dismiss=${(event) => {
+			event.preventDefault();
+			this.close();
+		}}
+      >
+        <label slot="header-start" class="name-field">
           ${this.t("paintCanvas.brushConfig.name")}
           <input
             class="name"
@@ -421,86 +461,115 @@ var PcBrushConfig = class extends PcElement {
             @input=${(e) => this.change({ name: e.target.value })}
           />
         </label>
-        <button
-          type="button"
-          class="close dismiss"
-          @click=${() => this.close()}
-        >
-          ${this.t("paintCanvas.common.dismiss")}
-        </button>
-      </div>
-      <pc-brush-test .config=${draft} .tips=${this.app?.tips}></pc-brush-test>
-      ${this.renderShape(draft)}
-      ${this.renderParam(draft, "width", this.t("paintCanvas.common.width"))}
-      <div class="row">
-        <span class="label"></span>
-        <label
-          class="icon-toggle"
-          title=${this.t("paintCanvas.toolSettings.constrainProportions")}
-        >
-          <input
-            type="checkbox"
-            class="constrain"
-            .checked=${constrained}
+        <div slot="body" class="settings">
+          <pc-brush-test
+            .config=${draft}
+            .tips=${this.app?.tips}
+          ></pc-brush-test>
+          ${this.renderShape(draft)}
+          ${this.renderParam(draft, "width", this.t(PARAM_LABELS.width))}
+          <div class="row">
+            <span class="label"></span>
+            <label
+              class="icon-toggle"
+              title=${this.t("paintCanvas.toolSettings.constrainProportions")}
+            >
+              <input
+                type="checkbox"
+                class="constrain"
+                .checked=${constrained}
+                ?disabled=${this.busy}
+                @change=${(e) => this.change({ constrainProportions: e.target.checked })}
+              />
+              ${iconLabel(this.iconUrl(constrained ? "linked" : "unlinked"), this.t("paintCanvas.toolSettings.constrainProportions"))}
+            </label>
+          </div>
+          ${this.renderParam(draft, "height", this.t(PARAM_LABELS.height), constrained)}
+          ${this.renderParam(draft, "alpha", this.t(PARAM_LABELS.alpha))}
+          ${this.renderParam(draft, "rotation", this.t(PARAM_LABELS.rotation))}
+          ${this.renderParam(draft, "offsetX", this.t(PARAM_LABELS.offsetX))}
+          ${this.renderParam(draft, "offsetY", this.t(PARAM_LABELS.offsetY))}
+          <div class="row">
+            <span class="label"
+              >${this.t("paintCanvas.brushConfig.sampleRate")}</span
+            >
+            ${this.single("sample-rate", this.t("paintCanvas.brushConfig.sampleRate"), draft.sampleRate ?? 5, sampleLimits, (sampleRate) => this.change({ sampleRate }))}
+          </div>
+          <div class="row">
+            <span class="label"
+              >${this.t("paintCanvas.brushConfig.spacing")}</span
+            >
+            ${this.single("spacing", this.t("paintCanvas.brushConfig.spacing"), draft.spacing ?? 5, spacingLimits, (spacing) => this.change({ spacing }))}
+          </div>
+          <pc-toggle-checkbox
+            class="snap"
+            .checked=${draft.snapToPixelGrid ?? false}
             ?disabled=${this.busy}
-            @change=${(e) => this.change({ constrainProportions: e.target.checked })}
-          />
-          ${iconLabel(this.iconUrl(constrained ? "linked" : "unlinked"), this.t("paintCanvas.toolSettings.constrainProportions"))}
-        </label>
-      </div>
-      ${this.renderParam(draft, "height", this.t("paintCanvas.common.height"), constrained)}
-      ${this.renderParam(draft, "alpha", this.t("paintCanvas.common.opacity"))}
-      ${this.renderParam(draft, "rotation", this.t("paintCanvas.brushConfig.rotation"))}
-      ${this.renderParam(draft, "offsetX", this.t("paintCanvas.brushConfig.offsetX"))}
-      ${this.renderParam(draft, "offsetY", this.t("paintCanvas.brushConfig.offsetY"))}
-      <div class="row">
-        <span class="label"
-          >${this.t("paintCanvas.brushConfig.sampleRate")}</span
-        >
-        ${this.number("sample-rate", draft.sampleRate ?? 5, sampleLimits, (sampleRate) => this.change({ sampleRate }))}
-        ${this.slider("sample-rate", draft.sampleRate ?? 5, sampleLimits, (sampleRate) => this.change({ sampleRate }))}
-        <span class="label">${this.t("paintCanvas.brushConfig.spacing")}</span>
-        ${this.number("spacing", draft.spacing ?? 5, spacingLimits, (spacing) => this.change({ spacing }))}
-        ${this.slider("spacing", draft.spacing ?? 5, spacingLimits, (spacing) => this.change({ spacing }))}
-      </div>
-      <label>
-        <input
-          type="checkbox"
-          class="snap"
-          .checked=${draft.snapToPixelGrid ?? false}
-          ?disabled=${this.busy}
-          @change=${(e) => this.change({ snapToPixelGrid: e.target.checked })}
-        />
-        ${this.t("paintCanvas.brushConfig.snapToPixelGrid")}
-      </label>
-      <div class="row">
+            @change=${(e) => this.change({ snapToPixelGrid: e.detail.checked })}
+          >
+            ${this.t("paintCanvas.brushConfig.snapToPixelGrid")}
+          </pc-toggle-checkbox>
+        </div>
         ${this.editingId ? html`<button
+                slot="footer-start"
                 type="button"
-                class="delete"
+                class="cancel delete"
                 ?disabled=${this.busy}
                 @click=${() => void this.deletePreset()}
               >
                 ${this.t("paintCanvas.brushConfig.deletePreset")}
               </button>` : nothing}
-        <button
-          type="button"
-          class="add affirmative"
-          ?disabled=${this.busy}
-          @click=${() => void this.addToPresets()}
-        >
-          ${this.t("paintCanvas.brushConfig.addToPresets")}
-        </button>
-        <button
-          type="button"
-          class="save affirmative"
-          ?disabled=${this.busy}
-          @click=${() => this.save()}
-        >
-          ${this.t("paintCanvas.common.save")}
-        </button>
-      </div>
-    </div>`;
+        <div slot="footer-end" class="actions">
+          <button
+            type="button"
+            class="add affirmative"
+            ?disabled=${this.busy}
+            @click=${() => void this.addToPresets()}
+          >
+            ${this.t("paintCanvas.brushConfig.addToPresets")}
+          </button>
+          <button
+            type="button"
+            class="save affirmative"
+            ?disabled=${this.busy}
+            @click=${() => this.save()}
+          >
+            ${this.t("paintCanvas.common.save")}
+          </button>
+        </div>
+      </pc-dialog-window>
+      ${this.renderProfileEditor(draft)}`;
+	}
+	/** The profile graph editor for the setting being edited, while open */
+	renderProfileEditor(draft) {
+		const param = this.editingProfile;
+		if (!param) return nothing;
+		const key = configKey(param);
+		const variation = draft[key];
+		return html`<pc-profile-editor
+      .profiles=${this.app?.profiles ?? this.profiles}
+      .points=${variation.profile}
+      profile-id=${variation.profileId ?? (variation.profile ? nothing : "linear")}
+      label=${this.t(PARAM_LABELS[param])}
+      @pc-save=${(event) => {
+			event.stopPropagation();
+			const { points, profileId } = event.detail;
+			const linear = isLinear(points);
+			this.changeParam(param, { [key]: {
+				...variation,
+				profile: linear ? void 0 : points,
+				profileId: linear ? void 0 : profileId
+			} });
+			this.editingProfile = void 0;
+		}}
+      @pc-close=${(event) => {
+			event.stopPropagation();
+			this.editingProfile = void 0;
+		}}
+    ></pc-profile-editor>`;
 	}
+	/** Profile graphs, when there's no canvas to keep them */
+	profiles = new ProfileGraphs();
 };
 defineElement("pc-brush-config", PcBrushConfig);
 export { PcBrushConfig, SMOOTHING_CHOICES };

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcBrushConfig/style.css?inline
-var style_default = ":host {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--pc-backdrop);\n}\n[role=\"dialog\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: min(560px, 95vw);\n  max-height: 95vh;\n  overflow: auto;\n  padding: 8px;\n  background: var(--pc-surface);\n}\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n}\n.row > .label {\n  width: 6em;\n}\ninput[type=\"number\"] {\n  width: 4.5em;\n}\ninput[type=\"range\"] {\n  flex: 1;\n  min-width: 60px;\n}\n.shape-preview {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape-preview.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n/* The name, with \"Close\" on the right */\n.header .close {\n  margin-left: auto;\n}\n/* The shape (preview, Upload and Paste) and the smoothing icons on one row */\n.shape-row {\n  flex-wrap: nowrap;\n}\n/* The shape, with an invisible list over it: pressing the shape opens the device's own list of shapes */\n.shape-picker {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  border-radius: var(--pc-radius-small);\n}\n.shape-picker:hover {\n  background: var(--pc-surface-hover);\n}\n.shape-picker:focus-within {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.shape-select {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\nfieldset.smoothing {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin: 0 0 0 auto;\n  padding: 0;\n  border: 0;\n}\nfieldset.smoothing legend {\n  float: left;\n  margin-right: 4px;\n  padding: 0;\n}\n";
+var style_default = ":host {\n  display: contents;\n}\npc-dialog-window {\n  --pc-dialog-width: 560px;\n}\n.settings {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.name-field {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.actions {\n  display: flex;\n  gap: 6px;\n}\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n}\n.row > .label {\n  width: 6em;\n}\ninput[type=\"number\"] {\n  width: 4.5em;\n}\ninput[type=\"range\"] {\n  flex: 1;\n  min-width: 60px;\n}\npc-slider-range {\n  flex: 1;\n  min-width: 200px;\n}\n.shape-preview {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape-preview.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n/* The shape (preview, Upload and Paste) and the smoothing icons on one row */\n.shape-row {\n  flex-wrap: nowrap;\n}\n/* The shape, with an invisible list over it: pressing the shape opens the device's own list of shapes */\n.shape-picker {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  border-radius: var(--pc-radius-small);\n}\n.shape-picker:hover {\n  background: var(--pc-surface-hover);\n}\n.shape-picker:focus-within {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.shape-select {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\nfieldset.smoothing {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin: 0 0 0 auto;\n  padding: 0;\n  border: 0;\n}\nfieldset.smoothing legend {\n  float: left;\n  margin-right: 4px;\n  padding: 0;\n}\n/* Pressure, tilt and randomise: one at a time, side by side */\nfieldset.sources {\n  display: flex;\n  gap: 4px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n/* A setting with a profile graph: its button is purple */\nbutton.icon-button.profile.configured {\n  border-color: var(--pc-accent);\n  background: var(--pc-accent);\n}\n";
 export { style_default as default };

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

@@ -1,4 +1,5 @@
 import { PcElement } from "../../base";
+import "../PcToggleCheckbox";
 import type { BrushConfig } from "../../../lib/brushes/types";
 import type BrushTipCache from "../../../lib/brushes/BrushTipCache";
 import { type CanvasFactory } from "../../../lib/classes/Layer";

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

@@ -1,5 +1,7 @@
 import style_default from "./style.js";
+import { PILLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
+import "../PcToggleCheckbox/index.js";
 import StrokeEngine from "../../../lib/brushes/StrokeEngine/index.js";
 import Layer, { createOffscreenCanvas } from "../../../lib/classes/Layer/index.js";
 import { html, unsafeCSS } from "lit";
@@ -38,7 +40,11 @@ var PcBrushTest = class extends PcElement {
 			attribute: "show-points"
 		}
 	};
-	static styles = [PcElement.styles, unsafeCSS(style_default)];
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(PILLS_CSS),
+		unsafeCSS(style_default)
+	];
 	constructor() {
 		super();
 		this.showPoints = false;
@@ -185,17 +191,17 @@ var PcBrushTest = class extends PcElement {
         @pointercancel=${this.onPointerUp}
       ></canvas>
       <div class="actions">
-        <button type="button" class="clear" @click=${() => this.clear()}>
+        <button type="button" class="pill clear" @click=${() => this.clear()}>
           ${this.t("paintCanvas.common.clear")}
         </button>
-        <label class="show-points">
-          <input
-            type="checkbox"
-            .checked=${this.showPoints}
-            @change=${(e) => this.setShowPoints(e.target.checked)}
-          />
+        <pc-toggle-checkbox
+          class="show-points"
+          size="s"
+          .checked=${this.showPoints}
+          @change=${(e) => this.setShowPoints(e.detail.checked)}
+        >
           ${this.t("paintCanvas.brushConfig.showStrokePoints")}
-        </label>
+        </pc-toggle-checkbox>
       </div>
     `;
 	}

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcBrushTest/style.css?inline
-var style_default = ":host {\n  display: block;\n}\ncanvas {\n  display: block;\n  width: 100%;\n  background: #fff;\n  border: 1px solid var(--pc-border);\n  touch-action: none;\n}\n/* \"Clear\", then \"Show stroke points\" */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px;\n  margin-top: 6px;\n}\n.show-points {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  cursor: pointer;\n}\n/* \"Clear\": a red pill */\nbutton.clear {\n  padding: 4px 16px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--pc-red);\n  color: #ffffff;\n  font: inherit;\n  font-weight: bold;\n  cursor: pointer;\n}\nbutton.clear:hover {\n  filter: brightness(1.1);\n}\nbutton.clear:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n";
+var style_default = ":host {\n  display: block;\n}\ncanvas {\n  display: block;\n  width: 100%;\n  background: #fff;\n  border: 1px solid var(--pc-border);\n  touch-action: none;\n}\n/* \"Clear\", then \"Show stroke points\" */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px;\n  margin-top: 6px;\n}\n.show-points {\n  display: inline-flex;\n}\n/* \"Clear\": a red pill */\nbutton.pill.clear {\n  background: var(--pc-red);\n  color: #ffffff;\n}\n";
 export { style_default as default };