@lvl99dotcom/paintcanvas 0.5.0 → 0.6.0

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

@@ -1,10 +1,16 @@
 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";
@@ -36,6 +42,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 +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 (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 +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,
@@ -89,30 +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, 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 +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 } : {}
@@ -224,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);
@@ -242,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) {
@@ -275,31 +280,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 +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"
@@ -421,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/* 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.js

@@ -1,4 +1,5 @@
 import style_default from "./style.js";
+import { PILLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
 import StrokeEngine from "../../../lib/brushes/StrokeEngine/index.js";
 import Layer, { createOffscreenCanvas } from "../../../lib/classes/Layer/index.js";
@@ -38,7 +39,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,7 +190,7 @@ 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">

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  align-items: center;\n  gap: 4px;\n  cursor: pointer;\n}\n/* \"Clear\": a red pill */\nbutton.pill.clear {\n  background: var(--pc-red);\n  color: #ffffff;\n}\n";
 export { style_default as default };

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

@@ -1,14 +1,17 @@
 import { PcElement } from "../../base";
+import { type PillSize } from "../../styles";
 import "../PcIcon";
 /** How a button looks */
 export type ButtonVariant = "accent" | "cancel" | "dismiss" | "pill" | "icon";
 /**
- * A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a small pill
- * (`pill`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its content.
- * Clicks reach listeners on the element; a disabled button sends none.
+ * A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a pill (`pill`,
+ * the same as `accent`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its
+ * content. All but icon buttons are pills, of the `size` given (`pill` by default; see `PILL_SIZE_STYLES`). Clicks
+ * reach listeners on the element; a disabled button sends none.
  *
  * @example
  * html`<pc-button variant="cancel" @click=${close}>Cancel</pc-button>`
+ * html`<pc-button size="pill-l">Start</pc-button>`
  * html`<pc-button variant="icon" icon="undo" label="Undo"></pc-button>`
  */
 export declare class PcButton extends PcElement {
@@ -17,6 +20,10 @@ export declare class PcButton extends PcElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         icon: {
             type: StringConstructor;
         };
@@ -43,6 +50,8 @@ export declare class PcButton extends PcElement {
     };
     static styles: import("lit").CSSResultGroup[];
     variant: ButtonVariant;
+    /** How big the pill is (not for icon buttons) */
+    size: PillSize;
     /** Name of an icon to show before the text (or alone, for an icon button) */
     icon?: string;
     /** The button's name for screen readers, when its content doesn't say it (e.g. an icon button) */

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

@@ -1,14 +1,19 @@
 import { PcElement, defineElement } from "../../base/index.js";
+import { PILL_SIZES, pillSizeDeclarations } from "../../styles/index.js";
 import "../PcIcon/index.js";
-import { css, html, nothing } from "lit";
+import { css, html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcButton/index.ts
+/** Each pill size, for the buttons that are pills (all but icon buttons) */
+var SIZE_STYLES = unsafeCSS(PILL_SIZES.map((size) => `:host([size="${size}"]) button { ${pillSizeDeclarations(size)} }`).join("\n"));
 /**
-* A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a small pill
-* (`pill`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its content.
-* Clicks reach listeners on the element; a disabled button sends none.
+* A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a pill (`pill`,
+* the same as `accent`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its
+* content. All but icon buttons are pills, of the `size` given (`pill` by default; see `PILL_SIZE_STYLES`). Clicks
+* reach listeners on the element; a disabled button sends none.
 *
 * @example
 * html`<pc-button variant="cancel" @click=${close}>Cancel</pc-button>`
+* html`<pc-button size="pill-l">Start</pc-button>`
 * html`<pc-button variant="icon" icon="undo" label="Undo"></pc-button>`
 */
 var PcButton = class extends PcElement {
@@ -18,6 +23,10 @@ var PcButton = class extends PcElement {
 			type: String,
 			reflect: true
 		},
+		size: {
+			type: String,
+			reflect: true
+		},
 		icon: { type: String },
 		label: { type: String },
 		disabled: {
@@ -38,9 +47,8 @@ var PcButton = class extends PcElement {
         flex: 1;
         align-items: center;
         justify-content: center;
+        box-sizing: border-box;
         gap: var(--pc-space-1);
-        min-height: var(--pc-control-size);
-        padding: var(--pc-space-1) var(--pc-space-3);
         border: 0;
         /* A joined button group gives each button its corners */
         border-radius: var(--pc-group-radius, var(--pc-radius-pill));
@@ -48,10 +56,11 @@ var PcButton = class extends PcElement {
         color: var(--pc-accent-text);
         font: inherit;
         font-family: var(--pc-font);
-        font-size: var(--pc-font-size);
+        ${unsafeCSS(pillSizeDeclarations("pill"))}
         font-weight: bold;
         cursor: pointer;
       }
+      ${SIZE_STYLES}
       button:hover:not(:disabled) {
         filter: brightness(1.15);
       }
@@ -76,12 +85,10 @@ var PcButton = class extends PcElement {
         filter: none;
         text-decoration: underline;
       }
-      :host([variant="pill"]) button {
-        min-height: 30px;
-      }
       :host([variant="icon"]) button {
         min-height: 0;
         padding: 2px;
+        line-height: normal;
         border: 1px solid var(--pc-border);
         border-radius: var(--pc-group-radius, var(--pc-radius-small));
         background: var(--pc-surface);
@@ -101,6 +108,7 @@ var PcButton = class extends PcElement {
 	constructor() {
 		super();
 		this.variant = "accent";
+		this.size = "pill";
 		this.disabled = false;
 	}
 	/** Move keyboard focus to the button */