@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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

@@ -1,13 +1,21 @@
 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 "../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";
 import { html, nothing, unsafeCSS } from "lit";
+import { live } from "lit/directives/live.js";
 import { styleMap } from "lit/directives/style-map.js";
 // src/ui/elements/PcBrushConfig/index.ts
 /** The smoothing choices, in the order shown: value, translation key of the name, and icon name */
@@ -34,12 +42,23 @@ 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",
 	tilt: "paintCanvas.toolSettings.tilt",
 	randomise: "paintCanvas.brushConfig.randomise"
 };
+/** The shape picker's value for a shape the user uploaded or pasted */
+var CUSTOM_SHAPE = "custom";
 /** Translation keys of the brush shape error messages */
 var SHAPE_ERROR_KEYS = {
 	[SHAPE_ERRORS.type]: "paintCanvas.shape.notPng",
@@ -49,20 +68,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 (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>`
@@ -75,7 +91,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,
@@ -84,28 +101,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 (replaceable for tests) */
-	readClipboard = () => readClipboardShape();
-	onKeyDown = (event) => {
-		if (event.key === "Escape") this.close();
-	};
+	/**
+	* 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());
 	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);
@@ -183,10 +193,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 } : {}
@@ -217,7 +239,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);
@@ -235,32 +257,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) {
@@ -268,42 +280,105 @@ 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>`;
 	}
+	/**
+	* Use a built-in shape (see `BUILT_IN_SHAPES`), keeping the width; they're all square, so the height is the same.
+	*/
+	useBuiltInShape(id) {
+		const shape = BUILT_IN_SHAPES.find((built) => built.id === id);
+		if (!shape) return;
+		const width = this.draft?.width ?? 1;
+		this.change({
+			image: shape.image,
+			height: width
+		});
+	}
 	/** Render the shape and smoothing row */
 	renderShape(draft) {
+		const shapeId = builtInShapeId(draft.image);
 		const smoothing = draft.smoothingType === SmoothingType.None || draft.smoothingType === void 0 ? SmoothingType.Linear : draft.smoothingType;
 		return html`<div class="row shape-row">
       <span class="label">${this.t("paintCanvas.brushConfig.shape")}</span>
-      <span
-        class=${draft.image ? "shape-preview image" : "shape-preview"}
-        style=${styleMap({ maskImage: typeof draft.image === "string" ? `url("${draft.image}")` : void 0 })}
-      ></span>
+      <span class="shape-picker">
+        <span
+          class=${draft.image ? "shape-preview image" : "shape-preview"}
+          style=${styleMap({ maskImage: typeof draft.image === "string" ? `url("${draft.image}")` : void 0 })}
+        ></span>
+        <!-- Over the shape, so pressing it opens the device's own list -->
+        <select
+          class="shape-select"
+          aria-label=${this.t("paintCanvas.brushConfig.shape")}
+          title=${this.t("paintCanvas.brushConfig.chooseShape")}
+          ?disabled=${this.busy}
+          @change=${(e) => this.useBuiltInShape(e.target.value)}
+        >
+          ${shapeId === void 0 ? html`<option value=${CUSTOM_SHAPE} .selected=${true}>
+                  ${this.t("paintCanvas.brushConfig.customShape")}
+                </option>` : nothing}
+          ${BUILT_IN_SHAPES.map((shape) => html`<option
+                value=${shape.id}
+                .selected=${live(shape.id === shapeId)}
+              >
+                ${shape.name}
+              </option>`)}
+        </select>
+      </span>
       <button
         type="button"
         class="pill upload"
@@ -366,13 +441,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"
@@ -381,86 +460,117 @@ 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}
-            ?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">
+        <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>
+          <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>
         ${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.shape-row .shape-preview {\n  flex: none;\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/PcBrushSize/index.d.ts

@@ -0,0 +1,53 @@
+import { nothing } from "lit";
+import { PcElement } from "../../base";
+import "../PcNumberSlider";
+import { type default as BrushSettings } from "../../../lib/classes/BrushSettings";
+/**
+ * A brush's size as text: one number when the width and height are the same, otherwise "width × height".
+ *
+ * @example
+ * sizeText({ width: 20, height: 20 }); // "20"
+ * sizeText({ width: 30, height: 10 }); // "30 × 10"
+ */
+export declare const sizeText: ({ width, height, }: {
+    width: number;
+    height: number;
+}) => string;
+/**
+ * A brush or eraser's size, as a `pc-number-slider`: pressed and dragged right or up it gets bigger, left or down
+ * smaller, keeping its proportions (see `BrushSettings.resize`). Tapping it lets you type the larger side's size. With
+ * keyboard focus, the arrow keys change it by a pixel and Page Up and Page Down by a step (like `]` and `[`).
+ *
+ * @example
+ * html`<pc-brush-size .settings=${app.brush} label="Brush size"></pc-brush-size>`
+ */
+export declare class PcBrushSize extends PcElement {
+    static properties: {
+        settings: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The brush or eraser settings it shows and changes */
+    settings?: BrushSettings;
+    /** Its name for screen readers, e.g. "Brush size" */
+    label: string;
+    private changes;
+    constructor();
+    /** Resize to the slider's value (the larger side), keeping the proportions */
+    private onChange;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}