@lvl99dotcom/paintcanvas 0.5.0 → 0.7.0

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

@@ -0,0 +1,308 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { fitNumber } from "../PcNumberSlider/index.js";
+import { css, html, nothing } from "lit";
+import { live } from "lit/directives/live.js";
+import { styleMap } from "lit/directives/style-map.js";
+// src/ui/elements/PcSliderRange/index.ts
+/**
+* Where a value sits between `min` and `max`, from 0 to 1 (0 when they're the same).
+*
+* @example
+* rangeFraction(25, 0, 100); // 0.25
+*/
+var rangeFraction = (value, min, max) => max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0;
+/**
+* A slider for a range: one track with two handles, the left for the lowest value (`low`) and the right for the highest
+* (`high`), and a `<pc-number-slider>` for each on either side (dragged, or tapped to type). The two can't cross: the
+* lowest is never above the highest. Values are kept within `min` and `max` and rounded to `step`.
+*
+* Pressing the track moves the nearest handle there and drags it. With keyboard focus on a handle, the arrow keys move
+* it by `step`, Page Up and Page Down by `pageStep`, and Home and End as far as it can go. Touch, mouse and pen all work.
+*
+* With `single`, it's a slider for one value (`value`, from `min`): one handle, and one number slider before the track,
+* or after it with `number-position="end"`. Use it for single values too, so they look and work the same as ranges.
+*
+* Fires `pc-input` (detail: `{ low, high }`) while a handle is dragged, and `pc-change` once it's let go, or when a value
+* is changed with the keyboard or a number slider, after changing `low` and `high` themselves (and `value`, the same as
+* `high`).
+*
+* @example
+* html`<pc-slider-range label="Width" min="1" max="256" .low=${10} .high=${40}
+*   @pc-change=${(e) => setWidth(e.detail.low, e.detail.high)}></pc-slider-range>`
+*/
+var PcSliderRange = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		low: { type: Number },
+		high: { type: Number },
+		min: { type: Number },
+		max: { type: Number },
+		step: { type: Number },
+		pageStep: {
+			type: Number,
+			attribute: "page-step"
+		},
+		unit: { type: String },
+		label: { type: String },
+		single: {
+			type: Boolean,
+			reflect: true
+		},
+		numberPosition: {
+			type: String,
+			attribute: "number-position"
+		},
+		disabled: {
+			type: Boolean,
+			reflect: true
+		},
+		dragging: { state: true }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--pc-space-2);
+        min-width: 0;
+        --pc-range-thumb: 16px;
+      }
+      :host([disabled]) {
+        opacity: 0.5;
+      }
+      pc-number-slider {
+        flex: none;
+        width: 4.5em;
+      }
+      /* The handles' centres reach the ends of the track */
+      .track {
+        position: relative;
+        flex: 1;
+        min-width: 60px;
+        height: 24px;
+        margin: 0 calc(var(--pc-range-thumb) / 2);
+        touch-action: none;
+        cursor: pointer;
+      }
+      :host([disabled]) .track {
+        cursor: default;
+      }
+      .rail,
+      .fill {
+        position: absolute;
+        top: 50%;
+        height: 4px;
+        border-radius: var(--pc-radius-pill);
+        transform: translateY(-50%);
+      }
+      /* The whole range: the same area the fill covers from min to max */
+      .rail {
+        left: 0;
+        right: 0;
+        background: var(--pc-border);
+      }
+      .fill {
+        background: var(--pc-accent);
+      }
+      /* A 24px target around each 16px thumb, for fingers */
+      .handle {
+        position: absolute;
+        top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        margin-left: -12px;
+        border-radius: 50%;
+        outline: none;
+      }
+      .handle::before {
+        content: "";
+        width: var(--pc-range-thumb);
+        height: var(--pc-range-thumb);
+        box-sizing: border-box;
+        border: 2px solid var(--pc-surface-raised);
+        border-radius: 50%;
+        background: var(--pc-accent);
+        box-shadow: var(--pc-shadow);
+      }
+      .handle:focus-visible::before {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 2px;
+      }
+      /* The handle being dragged stays on top, so it can be dragged off the other */
+      .handle.active {
+        z-index: 1;
+      }
+    `];
+	/** A single slider's value: the same as `high` */
+	get value() {
+		return this.high;
+	}
+	set value(value) {
+		this.high = value;
+	}
+	/** What `pc-input` and `pc-change` give */
+	get detail() {
+		return {
+			low: this.low,
+			high: this.high,
+			value: this.high
+		};
+	}
+	/** How far an end can go: not past the other end (a single slider's value can go down to `min`) */
+	limitsOf(end) {
+		if (end === "low") return [this.min, this.high];
+		return [this.single ? this.min : this.low, this.max];
+	}
+	/** An end's name for screen readers: a single slider's is its label */
+	endLabel(end) {
+		return this.single ? this.label : this.t(`paintCanvas.range.${end}`, { label: this.label });
+	}
+	constructor() {
+		super();
+		this.low = 0;
+		this.high = 100;
+		this.min = 0;
+		this.max = 100;
+		this.step = 1;
+		this.unit = "";
+		this.label = "";
+		this.single = false;
+		this.numberPosition = "start";
+		this.disabled = false;
+	}
+	/**
+	* Set one end, kept within `min` and `max`, rounded to `step`, and not past the other end, then tell listeners (with
+	* `pc-input` while dragging, or `pc-change`) if it changed.
+	*
+	* @example
+	* range.setEnd("high", 40); // high is 40, unless low is above it (then it's low)
+	*/
+	setEnd(end, value, type = "pc-change") {
+		const [lowest, highest] = this.limitsOf(end);
+		const next = Math.min(highest, Math.max(lowest, fitNumber(value, this.min, this.max, this.step)));
+		if (next === this[end]) return;
+		this[end] = next;
+		emit(this, type, this.detail);
+	}
+	/** The value at a pointer's position along the track */
+	valueAt(event) {
+		const { left, width } = event.currentTarget.getBoundingClientRect();
+		const fraction = width > 0 ? (event.clientX - left) / width : 0;
+		return this.min + Math.min(1, Math.max(0, fraction)) * (this.max - this.min);
+	}
+	/** The end nearest a value: the high end when it's above both, or past the middle of two that meet */
+	nearestEnd(value) {
+		if (this.single) return "high";
+		if (value > this.high) return "high";
+		if (value < this.low) return "low";
+		return value - this.low > this.high - value ? "high" : "low";
+	}
+	onPointerDown(event) {
+		if (this.disabled || event.button > 0) return;
+		event.preventDefault();
+		const value = this.valueAt(event);
+		const end = this.nearestEnd(value);
+		this.dragging = end;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		this.renderRoot.querySelector(`.handle.${end}`).focus();
+		this.setEnd(end, value, "pc-input");
+	}
+	onPointerMove(event) {
+		if (this.dragging) this.setEnd(this.dragging, this.valueAt(event), "pc-input");
+	}
+	onPointerUp() {
+		if (!this.dragging) return;
+		this.dragging = void 0;
+		emit(this, "pc-change", this.detail);
+	}
+	/** Move a handle with the arrow keys, Page Up and Page Down, Home and End */
+	onHandleKeyDown(event, end) {
+		if (this.disabled) return;
+		const page = this.pageStep ?? this.step * 10;
+		const value = this[end];
+		const next = {
+			ArrowRight: value + this.step,
+			ArrowUp: value + this.step,
+			ArrowLeft: value - this.step,
+			ArrowDown: value - this.step,
+			PageUp: value + page,
+			PageDown: value - page,
+			Home: this.min,
+			End: this.max
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		this.setEnd(end, next);
+	}
+	/** One end's handle */
+	renderHandle(end) {
+		const value = this[end];
+		const [lowest, highest] = this.limitsOf(end);
+		return html`<div
+      class="handle ${end} ${this.dragging === end ? "active" : ""}"
+      part="handle"
+      role="slider"
+      tabindex=${this.disabled ? -1 : 0}
+      aria-label=${this.endLabel(end)}
+      aria-valuemin=${lowest}
+      aria-valuemax=${highest}
+      aria-valuenow=${value}
+      aria-valuetext=${`${value}${this.unit}`}
+      aria-disabled=${this.disabled ? "true" : nothing}
+      style=${styleMap({ left: `${rangeFraction(value, this.min, this.max) * 100}%` })}
+      @keydown=${(event) => this.onHandleKeyDown(event, end)}
+    ></div>`;
+	}
+	/** One end's number slider: it can't go past the other end */
+	renderNumber(end) {
+		const [lowest, highest] = this.limitsOf(end);
+		return html`<pc-number-slider
+      class=${end}
+      part="number"
+      label=${this.endLabel(end)}
+      min=${lowest}
+      max=${highest}
+      step=${this.step}
+      page-step=${this.pageStep ?? nothing}
+      unit=${this.unit}
+      ?disabled=${this.disabled}
+      .value=${live(this[end])}
+      @pc-change=${(event) => {
+			event.stopPropagation();
+			this.setEnd(end, event.detail.value);
+		}}
+    ></pc-number-slider>`;
+	}
+	render() {
+		const from = this.single ? 0 : rangeFraction(this.low, this.min, this.max) * 100;
+		const to = rangeFraction(this.high, this.min, this.max) * 100;
+		const before = this.single ? this.numberPosition === "end" ? nothing : this.renderNumber("high") : this.renderNumber("low");
+		const after = !this.single || this.numberPosition === "end" ? this.renderNumber("high") : nothing;
+		return html`${before}
+      <div
+        class="track"
+        part="track"
+        @pointerdown=${this.onPointerDown}
+        @pointermove=${this.onPointerMove}
+        @pointerup=${this.onPointerUp}
+        @pointercancel=${this.onPointerUp}
+      >
+        <div class="rail"></div>
+        <div
+          class="fill"
+          part="fill"
+          style=${styleMap({
+			left: `${from}%`,
+			right: `${100 - to}%`
+		})}
+        ></div>
+        ${this.single ? nothing : this.renderHandle("low")}
+        ${this.renderHandle("high")}
+      </div>
+      ${after}`;
+	}
+};
+defineElement("pc-slider-range", PcSliderRange);
+export { PcSliderRange, rangeFraction };

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

@@ -1,6 +1,11 @@
 import { nothing, type PropertyValues } from "lit";
 import { PcElement } from "../../base";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
+/**
+ * The least time between reads of the colour under the pointer, in milliseconds. Each read draws every layer's pixels
+ * there, which is slow on phones.
+ */
+export declare const COLOUR_INTERVAL_MS = 100;
 /**
  * A size in bytes in the largest unit it has at least one of, to one decimal place (whole bytes), for a locale.
  *
@@ -12,8 +17,9 @@ export declare const formatBytes: (bytes: number, locale?: string) => string;
 /**
  * A line of small text about the canvas: its size; while the drawing is kept in the browser, how much its layer
  * images take there; the zoom level; and the colour under the pointer (with a swatch; a dash when the pointer isn't
- * over the canvas). The colour follows the pointer at most once a frame. It's not announced to screen readers as it
- * changes, as it changes with every pointer move.
+ * over the canvas). The colour follows the pointer at most every `COLOUR_INTERVAL_MS`, and isn't read while a stroke is
+ * drawn (the next pointer move after it reads it). It's not announced to screen readers as it changes, as it changes
+ * with every pointer move.
  *
  * @example
  * html`<pc-stats .app=${app}></pc-stats>`
@@ -23,6 +29,9 @@ export declare class PcStats extends PcElement {
         app: {
             attribute: boolean;
         };
+        colour: {
+            state: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -38,11 +47,17 @@ export declare class PcStats extends PcElement {
     /** The canvas described */
     app?: PaintCanvas;
     private changes;
+    /** The colour under the pointer when it was last read, if it's over the canvas */
+    colour?: string;
     /** The canvas whose pointer is followed */
     private followed?;
-    /** The animation frame the next update waits for, if any */
-    private frame?;
+    /** The timer the next read of the colour waits for, if any */
+    private timer?;
     private readonly onPointer;
+    /**
+     * Read the colour under the followed canvas's pointer, unless a stroke is being drawn (reading would slow it down).
+     */
+    private readColour;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues<this>): void;

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

@@ -4,6 +4,11 @@ import { zoomPercent } from "../PcToolSettings/index.js";
 import { css, html, nothing } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 // src/ui/elements/PcStats/index.ts
+/**
+* The least time between reads of the colour under the pointer, in milliseconds. Each read draws every layer's pixels
+* there, which is slow on phones.
+*/
+var COLOUR_INTERVAL_MS = 100;
 /** Units for sizes in bytes, each 1000 times the one before */
 var BYTE_UNITS = [
 	"byte",
@@ -30,8 +35,9 @@ var formatBytes = (bytes, locale) => {
 /**
 * A line of small text about the canvas: its size; while the drawing is kept in the browser, how much its layer
 * images take there; the zoom level; and the colour under the pointer (with a swatch; a dash when the pointer isn't
-* over the canvas). The colour follows the pointer at most once a frame. It's not announced to screen readers as it
-* changes, as it changes with every pointer move.
+* over the canvas). The colour follows the pointer at most every `COLOUR_INTERVAL_MS`, and isn't read while a stroke is
+* drawn (the next pointer move after it reads it). It's not announced to screen readers as it changes, as it changes
+* with every pointer move.
 *
 * @example
 * html`<pc-stats .app=${app}></pc-stats>`
@@ -39,7 +45,8 @@ var formatBytes = (bytes, locale) => {
 var PcStats = class extends PcElement {
 	static properties = {
 		...PcElement.properties,
-		app: { attribute: false }
+		app: { attribute: false },
+		colour: { state: true }
 	};
 	static styles = [PcElement.styles, css`
       :host {
@@ -79,14 +86,22 @@ var PcStats = class extends PcElement {
 	]);
 	/** The canvas whose pointer is followed */
 	followed;
-	/** The animation frame the next update waits for, if any */
-	frame;
+	/** The timer the next read of the colour waits for, if any */
+	timer;
 	onPointer = () => {
-		this.frame ??= requestAnimationFrame(() => {
-			this.frame = void 0;
-			this.requestUpdate();
-		});
+		this.timer ??= setTimeout(() => {
+			this.timer = void 0;
+			this.readColour();
+		}, 100);
 	};
+	/**
+	* Read the colour under the followed canvas's pointer, unless a stroke is being drawn (reading would slow it down).
+	*/
+	readColour() {
+		const app = this.followed;
+		if (!app || app.strokes.drawing) return;
+		this.colour = app.pointer && app.sampleColour(app.pointer);
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.follow(this.app);
@@ -94,8 +109,6 @@ var PcStats = class extends PcElement {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.follow(void 0);
-		if (this.frame !== void 0) cancelAnimationFrame(this.frame);
-		this.frame = void 0;
 	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
@@ -106,13 +119,16 @@ var PcStats = class extends PcElement {
 	*/
 	follow(app) {
 		this.followed?.removeEventListener("pointer", this.onPointer);
+		clearTimeout(this.timer);
+		this.timer = void 0;
+		this.colour = void 0;
 		this.followed = app;
 		app?.addEventListener("pointer", this.onPointer);
 	}
 	render() {
 		const app = this.app;
 		if (!app) return nothing;
-		const colour = app.pointer && app.sampleColour(app.pointer);
+		const colour = this.colour;
 		const autosave = app.autosave;
 		return html`<ul
       part="stats"
@@ -141,4 +157,4 @@ var PcStats = class extends PcElement {
 	}
 };
 defineElement("pc-stats", PcStats);
-export { PcStats, formatBytes };
+export { COLOUR_INTERVAL_MS, PcStats, formatBytes };

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

@@ -1,10 +1,15 @@
 import { PcElement } from "../../base";
+/** Sizes of the switch: `m` (20px high, the default) and `s` (16px high, e.g. in toolbars) */
+export declare const TOGGLE_SIZES: readonly ["m", "s"];
+export type ToggleSize = (typeof TOGGLE_SIZES)[number];
 /**
- * An on/off switch with its text (the element's content) beside it, e.g. for settings. Fires `change` when the user
- * turns it on or off.
+ * An on/off switch with its text (the element's content) beside it, e.g. for settings. Use it instead of plain
+ * checkboxes. It comes in two sizes (`size`: `m`, 20px high, by default, or `s`, 16px high), both pressable over at
+ * least 24px of height. Fires `change` when the user turns it on or off.
  *
  * @example
  * html`<pc-toggle-checkbox .checked=${pinchZoom} @change=${toggle}>Pinch to zoom</pc-toggle-checkbox>`
+ * html`<pc-toggle-checkbox size="s">Show stroke points</pc-toggle-checkbox>`
  */
 export declare class PcToggleCheckbox extends PcElement {
     static properties: {
@@ -16,6 +21,10 @@ export declare class PcToggleCheckbox extends PcElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -30,6 +39,8 @@ export declare class PcToggleCheckbox extends PcElement {
     static styles: import("lit").CSSResultGroup[];
     checked: boolean;
     disabled: boolean;
+    /** The switch's size: `m` (default) or `s` */
+    size: ToggleSize;
     constructor();
     /** Follow the user's change, and tell listeners */
     private onChange;

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

@@ -2,12 +2,16 @@ import { PcElement, defineElement, emit } from "../../base/index.js";
 import { css, html } from "lit";
 import { live } from "lit/directives/live.js";
 // src/ui/elements/PcToggleCheckbox/index.ts
+/** Sizes of the switch: `m` (20px high, the default) and `s` (16px high, e.g. in toolbars) */
+var TOGGLE_SIZES = ["m", "s"];
 /**
-* An on/off switch with its text (the element's content) beside it, e.g. for settings. Fires `change` when the user
-* turns it on or off.
+* An on/off switch with its text (the element's content) beside it, e.g. for settings. Use it instead of plain
+* checkboxes. It comes in two sizes (`size`: `m`, 20px high, by default, or `s`, 16px high), both pressable over at
+* least 24px of height. Fires `change` when the user turns it on or off.
 *
 * @example
 * html`<pc-toggle-checkbox .checked=${pinchZoom} @change=${toggle}>Pinch to zoom</pc-toggle-checkbox>`
+* html`<pc-toggle-checkbox size="s">Show stroke points</pc-toggle-checkbox>`
 */
 var PcToggleCheckbox = class extends PcElement {
 	static properties = {
@@ -19,15 +23,27 @@ var PcToggleCheckbox = class extends PcElement {
 		disabled: {
 			type: Boolean,
 			reflect: true
+		},
+		size: {
+			type: String,
+			reflect: true
 		}
 	};
 	static styles = [PcElement.styles, css`
       :host {
+        --pc-toggle-height: 20px;
+        --pc-toggle-width: 36px;
         display: flex;
       }
+      :host([size="s"]) {
+        --pc-toggle-height: 16px;
+        --pc-toggle-width: 28px;
+      }
       label {
         display: flex;
         flex: 1;
+        /* The pressable area is at least 24px high, whatever the switch's size */
+        min-height: 24px;
         gap: var(--pc-space-2);
         align-items: center;
         color: var(--pc-text);
@@ -42,8 +58,8 @@ var PcToggleCheckbox = class extends PcElement {
       input {
         position: relative;
         flex: none;
-        width: 36px;
-        height: 20px;
+        width: var(--pc-toggle-width);
+        height: var(--pc-toggle-height);
         margin: 0;
         border-radius: var(--pc-radius-pill);
         background: var(--pc-disabled);
@@ -54,8 +70,8 @@ var PcToggleCheckbox = class extends PcElement {
         position: absolute;
         top: 2px;
         left: 2px;
-        width: 16px;
-        height: 16px;
+        width: calc(var(--pc-toggle-height) - 4px);
+        height: calc(var(--pc-toggle-height) - 4px);
         border-radius: 50%;
         background: #ffffff;
         content: "";
@@ -65,7 +81,9 @@ var PcToggleCheckbox = class extends PcElement {
         background: var(--pc-accent);
       }
       input:checked::before {
-        transform: translateX(16px);
+        transform: translateX(
+          calc(var(--pc-toggle-width) - var(--pc-toggle-height))
+        );
       }
       input:focus-visible {
         outline: var(--pc-focus-width) solid var(--pc-focus);
@@ -81,6 +99,7 @@ var PcToggleCheckbox = class extends PcElement {
 		super();
 		this.checked = false;
 		this.disabled = false;
+		this.size = "m";
 	}
 	/** Follow the user's change, and tell listeners */
 	onChange(event) {
@@ -102,4 +121,4 @@ var PcToggleCheckbox = class extends PcElement {
 	}
 };
 defineElement("pc-toggle-checkbox", PcToggleCheckbox);
-export { PcToggleCheckbox };
+export { PcToggleCheckbox, TOGGLE_SIZES };

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

@@ -3,6 +3,7 @@ import { PcElement } from "../../base";
 import PaintCanvas, { Tool } from "../../../lib/classes/PaintCanvas";
 import type { BrushConfig } from "../../../lib/brushes/types";
 import "../PcBrushSize";
+import "../PcToggleCheckbox";
 import "../PcNumberSlider";
 import "../PcPopover";
 /** Settings varied with pen tilt by the tilt toggle */

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

@@ -8,6 +8,7 @@ import "../../../lib/classes/BrushSettings/index.js";
 import { MAX_ZOOM, MIN_ZOOM } from "../../../lib/classes/Viewport/index.js";
 import { iconLabel } from "../../icons/index.js";
 import "../PcBrushSize/index.js";
+import "../PcToggleCheckbox/index.js";
 import "../PcNumberSlider/index.js";
 import "../PcPopover/index.js";
 import { html, nothing, svg, unsafeCSS } from "lit";
@@ -295,7 +296,7 @@ var PcToolSettings = class extends PcElement {
 			})}
         <button
           type="button"
-          class="configure"
+          class="configure pill-s"
           @click=${() => this.emit("pc-configure-brush", kind)}
         >
           ${this.t("paintCanvas.toolSettings.configure")}
@@ -359,14 +360,14 @@ var PcToolSettings = class extends PcElement {
 			label: this.t("paintCanvas.toolSettings.maskSettings"),
 			start: html`<button
           type="button"
-          class="pill select-all"
+          class="pill-s select-all"
           @click=${() => app.selection.selectAll()}
         >
           ${this.t("paintCanvas.toolSettings.selectAll")}
         </button>
         <button
           type="button"
-          class="pill invert"
+          class="pill-s invert"
           ?disabled=${!app.selection.active}
           @click=${() => app.selection.invert()}
         >
@@ -374,7 +375,7 @@ var PcToolSettings = class extends PcElement {
         </button>
         <button
           type="button"
-          class="pill deselect"
+          class="pill-s deselect"
           ?disabled=${!app.selection.active}
           @click=${() => app.selection.clear()}
         >
@@ -430,15 +431,14 @@ var PcToolSettings = class extends PcElement {
           ${iconLabel(this.iconUrl(app.constrainProportions ? "linked" : "unlinked"), this.t("paintCanvas.toolSettings.constrainProportions"))}
         </label>
         ${side("height", this.t("paintCanvas.common.height"))}
-        <label>
-          <input
-            type="checkbox"
-            class="percent"
-            .checked=${this.percent}
-            @change=${(e) => this.percent = e.target.checked}
-          />
+        <pc-toggle-checkbox
+          class="percent"
+          size="s"
+          .checked=${this.percent}
+          @change=${(e) => this.percent = e.detail.checked}
+        >
           ${this.t("paintCanvas.toolSettings.percent")}
-        </label>
+        </pc-toggle-checkbox>
         <button
           type="button"
           class="icon-button flip-horizontal"
@@ -486,7 +486,7 @@ var PcToolSettings = class extends PcElement {
         </button>
         <button
           type="button"
-          class="pill reset"
+          class="pill-s reset"
           ?disabled=${disabled}
           @click=${() => app.cancelTransform()}
         >
@@ -538,7 +538,7 @@ var PcToolSettings = class extends PcElement {
         </label>
         <button
           type="button"
-          class="pill reset"
+          class="pill-s reset"
           @click=${() => view.zoomAt(centre, 1)}
         >
           ${this.t("paintCanvas.toolSettings.reset")}

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

@@ -0,0 +1,12 @@
+import { PcElement } from "../../base";
+/**
+ * PaintCanvas's version and the commit it was built from, e.g. "PaintCanvas v0.6.0 (ac12a0d)", as a link to its GitHub
+ * repository (opened in a new tab). For an app's settings or about panel.
+ *
+ * @example
+ * html`<pc-version></pc-version>`
+ */
+export declare class PcVersion extends PcElement {
+    static styles: import("lit").CSSResultGroup[];
+    render(): import("lit").TemplateResult<1>;
+}