@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

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

@@ -0,0 +1,222 @@
+import { SETTINGS_FILE_FORMAT } from "../../../lib/settings/schema.js";
+import { ICON_CONTROLS_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import "../PcShortcutSettings/index.js";
+import { SETTINGS_FILE_ERRORS, SettingsFileError, applySettings, collectSettings, exportSettingsFile, parseSettingsFile, settingsFileName } from "../../../lib/settings/index.js";
+import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
+import { css, html, nothing, unsafeCSS } from "lit";
+// src/ui/elements/PcAppSettings/index.ts
+/** Translation keys of the settings file error messages */
+var SETTINGS_FILE_ERROR_KEYS = {
+	[SETTINGS_FILE_ERRORS.incompatible]: "paintCanvas.settings.fileIncompatible",
+	[SETTINGS_FILE_ERRORS.read]: "paintCanvas.settings.fileReadFailed"
+};
+/**
+* Buttons for the user's app settings: "Keyboard shortcuts", which opens a window to change them (see
+* `pc-shortcut-settings`), and "Import settings" and "Export settings", which read and write a settings JSON file (input
+* settings, keyboard shortcuts, colour palette, colours, theme and language). The window is a modal `<dialog>` above the whole page; it
+* closes with its Close button, Escape, or a press on the backdrop, and the browser gives focus back to the button. Fires `pc-toast` after importing, or when importing or
+* exporting fails.
+*
+* @example
+* html`<pc-app-settings .app=${canvas}></pc-app-settings>`
+*/
+var PcAppSettings = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false },
+		shortcutsOpen: {
+			type: Boolean,
+			attribute: "shortcuts-open"
+		}
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(WINDOWS_CSS),
+		unsafeCSS(ICON_CONTROLS_CSS),
+		unsafeCSS(PILLS_CSS),
+		css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--pc-space-2);
+      }
+      /* A modal window in the browser's top layer, above everything on the page */
+      dialog {
+        box-sizing: border-box;
+        width: min(480px, calc(100vw - 2 * var(--pc-space-3)));
+        max-height: calc(100vh - 2 * var(--pc-space-3));
+        padding: 0;
+        border: 0;
+        border-radius: var(--pc-radius);
+        background: var(--pc-surface-raised);
+        color: var(--pc-text);
+        box-shadow: var(--pc-shadow);
+      }
+      dialog::backdrop {
+        background: var(--pc-backdrop);
+      }
+      .window {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-3);
+        box-shadow: none;
+      }
+      .header {
+        display: flex;
+        gap: var(--pc-space-2);
+        align-items: center;
+        justify-content: space-between;
+      }
+      h2 {
+        margin: 0;
+        font-size: 1.2em;
+      }
+    `
+	];
+	/** Saves exported files (replaceable for tests) */
+	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
+	constructor() {
+		super();
+		this.shortcutsOpen = false;
+	}
+	updated(changed) {
+		if (!changed.has("shortcutsOpen")) return;
+		const dialog = this.renderRoot.querySelector("dialog");
+		if (!dialog) return;
+		if (this.shortcutsOpen && !dialog.open) dialog.showModal();
+		else if (!this.shortcutsOpen && dialog.open) dialog.close();
+	}
+	/** Close the keyboard shortcuts window */
+	closeShortcuts() {
+		this.shortcutsOpen = false;
+	}
+	/**
+	* Import the settings in a settings file, using the parts it has.
+	*/
+	async importFile(file) {
+		const app = this.app;
+		if (!app) return;
+		let text;
+		try {
+			text = await file.text();
+		} catch {
+			this.toastError(SETTINGS_FILE_ERRORS.read);
+			return;
+		}
+		try {
+			applySettings(app, parseSettingsFile(text, [app.names.settingsFileFormat, SETTINGS_FILE_FORMAT]));
+			emit(this, "pc-toast", {
+				message: this.t("paintCanvas.settings.imported"),
+				kind: "success"
+			});
+		} catch (error) {
+			this.toastError(error instanceof SettingsFileError ? error.message : SETTINGS_FILE_ERRORS.read);
+		}
+	}
+	/**
+	* Export the settings as a settings file.
+	*/
+	async exportFile() {
+		const app = this.app;
+		if (!app) return;
+		try {
+			await this.saveFile(new Blob([exportSettingsFile(collectSettings(app), app.names.settingsFileFormat)], { type: "application/json" }), settingsFileName(void 0, app.names.filePrefix));
+		} catch {
+			emit(this, "pc-toast", {
+				message: this.t("paintCanvas.settings.exportFailed"),
+				kind: "error"
+			});
+		}
+	}
+	/** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
+	toastError(message) {
+		emit(this, "pc-toast", {
+			message: this.t(SETTINGS_FILE_ERROR_KEYS[message]),
+			kind: "error"
+		});
+	}
+	/** The keyboard shortcuts window: a modal dialog, with its contents only while open */
+	renderShortcuts(app) {
+		return html`<dialog
+      aria-labelledby="shortcuts-title"
+      @close=${() => this.closeShortcuts()}
+      @click=${(e) => {
+			if (e.target === e.currentTarget) this.closeShortcuts();
+		}}
+    >
+      ${this.shortcutsOpen ? html`<div class="window">
+              <div class="header">
+                <h2 id="shortcuts-title">
+                  ${this.t("paintCanvas.shortcuts.title")}
+                </h2>
+                <button
+                  type="button"
+                  class="close dismiss"
+                  autofocus
+                  @click=${() => this.closeShortcuts()}
+                >
+                  ${this.t("paintCanvas.common.close")}
+                </button>
+              </div>
+              <pc-shortcut-settings
+                .settings=${app.shortcuts}
+              ></pc-shortcut-settings>
+            </div>` : nothing}
+    </dialog>`;
+	}
+	render() {
+		const app = this.app;
+		if (!app) return nothing;
+		return html`<div class="actions">
+        <button
+          type="button"
+          class="pill shortcuts"
+          aria-haspopup="dialog"
+          @click=${() => this.shortcutsOpen = true}
+        >
+          ${this.t("paintCanvas.shortcuts.title")}
+        </button>
+        <button
+          type="button"
+          class="pill import"
+          @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
+        >
+          ${this.t("paintCanvas.settings.import")}
+        </button>
+        <button
+          type="button"
+          class="pill export"
+          @click=${() => void this.exportFile()}
+        >
+          ${this.t("paintCanvas.settings.export")}
+        </button>
+        <!-- Chosen through "Import settings" -->
+        <label class="visually-hidden">
+          ${this.t("paintCanvas.settings.importFile")}
+          <input
+            type="file"
+            class="import-file"
+            tabindex="-1"
+            accept="application/json,.json"
+            @change=${(e) => {
+			const input = e.target;
+			const file = input.files?.[0];
+			input.value = "";
+			if (file) this.importFile(file);
+		}}
+          />
+        </label>
+      </div>
+      ${this.renderShortcuts(app)}`;
+	}
+};
+defineElement("pc-app-settings", PcAppSettings);
+export { PcAppSettings };

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

@@ -23,7 +23,8 @@ export declare const SMOOTHING_CHOICES: readonly [{
     readonly icon: "smoothingBezierCubic";
 }];
 /**
- * The brush (or eraser) configuration window: a testing area, the shape (upload or paste), smoothing, width, height,
+ * The brush (or eraser) configuration window: a testing area, the shape (pressing it picks a built-in shape from the
+ * device's own list, which says "Custom" for an uploaded or pasted one; or upload or paste one), smoothing, width, height,
  * opacity, rotation, offsets, sample rate, spacing and snapping to the pixel grid. Width, height, opacity, rotation and the offsets can vary with
  * pressure, tilt and randomness; when any is on, the setting has a min and max.
  *
@@ -82,7 +83,9 @@ export declare class PcBrushConfig extends PcElement {
     prompt: PromptFn;
     /** Turns files into brush shapes (replaceable for tests) */
     readShape: (file: File) => Promise<ShapeImage>;
-    /** Reads a brush shape from the clipboard (replaceable for tests) */
+    /**
+     * Reads a brush shape from the clipboard, or else from image data copied on the canvas (replaceable for tests)
+     */
     readClipboard: () => Promise<ShapeImage>;
     private readonly onKeyDown;
     constructor();
@@ -124,6 +127,10 @@ export declare class PcBrushConfig extends PcElement {
     private slider;
     /** Render a setting that can vary: its value (or min and max), and its pressure, tilt and randomise icon toggles */
     private renderParam;
+    /**
+     * Use a built-in shape (see `BUILT_IN_SHAPES`), keeping the width; they're all square, so the height is the same.
+     */
+    private useBuiltInShape;
     /** Render the shape and smoothing row */
     private renderShape;
     render(): import("lit").TemplateResult<1> | typeof nothing;

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

@@ -6,8 +6,10 @@ import "../PcBrushTest/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 { 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 */
@@ -40,6 +42,8 @@ var SOURCE_LABELS = {
 	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",
@@ -55,7 +59,8 @@ var numberValue = (event) => {
 	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.
 *
@@ -88,8 +93,10 @@ var PcBrushConfig = class extends PcElement {
 	prompt = (message, value) => window.prompt(message, value);
 	/** Turns files into brush shapes (replaceable for tests) */
 	readShape = readShapeImage;
-	/** Reads a brush shape from the clipboard (replaceable for tests) */
-	readClipboard = () => readClipboardShape();
+	/**
+	* 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();
 	};
@@ -295,15 +302,48 @@ var PcBrushConfig = class extends PcElement {
           </label>`)}
     </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"

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  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";
 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;
+}

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

@@ -0,0 +1,66 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import "../PcNumberSlider/index.js";
+import { BRUSH_SIZE_STEP } from "../../../lib/classes/BrushSettings/index.js";
+import { css, html, nothing } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcBrushSize/index.ts
+/**
+* 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"
+*/
+var sizeText = ({ width, height }) => width === height ? String(width) : `${width} × ${height}`;
+/**
+* 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>`
+*/
+var PcBrushSize = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		settings: { attribute: false },
+		label: { type: String }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: inline-flex;
+      }
+      pc-number-slider {
+        flex: 1;
+      }
+    `];
+	changes = new ChangeController(this, () => [this.settings]);
+	constructor() {
+		super();
+		this.label = "";
+	}
+	/** Resize to the slider's value (the larger side), keeping the proportions */
+	onChange(event) {
+		const settings = this.settings;
+		settings.resize(event.detail.value - settings.largerSide);
+		this.requestUpdate();
+	}
+	render() {
+		const settings = this.settings;
+		if (!settings) return nothing;
+		const larger = settings.largerSide;
+		return html`<pc-number-slider
+      exportparts="control, field"
+      min=${1}
+      max=${256}
+      page-step=${Math.max(1, Math.round(larger * BRUSH_SIZE_STEP))}
+      label=${this.label}
+      .value=${live(larger)}
+      .text=${sizeText(settings)}
+      @pc-change=${this.onChange}
+    ></pc-number-slider>`;
+	}
+};
+defineElement("pc-brush-size", PcBrushSize);
+export { PcBrushSize, sizeText };

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

@@ -8,9 +8,18 @@ export declare const TEST_AREA_WIDTH = 800;
 export declare const TEST_AREA_HEIGHT = 320;
 /** The colour test strokes are drawn in, whatever the current colour */
 export declare const TEST_COLOUR = "#000000";
+/** The colour of the circles showing a stroke's sampled points, while stroke points are shown */
+export declare const POINT_COLOUR = "#e8175d";
+/** The colour of the dots showing where a stroke placed its stamps, while stroke points are shown */
+export declare const STAMP_COLOUR = "#1e88e5";
+/** How long a finished stroke's points stay shown (milliseconds) */
+export declare const STROKE_POINTS_MS = 3000;
 /**
  * A small area to try brush settings before saving them: strokes are drawn in black, at the settings' own size, on a
  * white background at double resolution (800 × 320 pixels shown in the window's width). "Clear" (a red pill) empties it.
+ * "Show stroke points" draws the stroke's sampled points (pink circles) and where it placed stamps (blue dots) over it,
+ * like the canvas's debug overlay, to see how sampling and smoothing work. They go 3 seconds after the stroke ends, or
+ * on "Clear".
  *
  * @example
  * html`<pc-brush-test .config=${config} .tips=${app.tips}></pc-brush-test>`
@@ -23,6 +32,10 @@ export declare class PcBrushTest extends PcElement {
         tips: {
             attribute: boolean;
         };
+        showPoints: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
         translations: {
             attribute: boolean;
         };
@@ -39,6 +52,9 @@ export declare class PcBrushTest extends PcElement {
     config?: BrushConfig;
     /** Brush shapes */
     tips?: BrushTipCache;
+    /** Whether the last stroke's sampled points and stamps are drawn over it */
+    showPoints: boolean;
+    constructor();
     /** Creates the layer and stroke canvases (replaceable for tests) */
     createCanvas: CanvasFactory;
     private layer?;
@@ -46,6 +62,8 @@ export declare class PcBrushTest extends PcElement {
     /** The pointer drawing, if any */
     private pointerId?;
     private readonly onEngineChange;
+    /** Clears the finished stroke's points once they've been shown long enough */
+    private pointsTimer?;
     disconnectedCallback(): void;
     /** The visible canvas */
     private get canvas();
@@ -61,11 +79,19 @@ export declare class PcBrushTest extends PcElement {
     private onPointerMove;
     /** Finish the test stroke */
     private onPointerUp;
+    /** Stop showing the last stroke's points and stamps (still recording the next stroke's while shown) */
+    private clearPoints;
+    /**
+     * Show or hide the last stroke's sampled points and stamps. They're recorded from the next stroke.
+     */
+    setShowPoints(shown: boolean): void;
     /**
      * Empty the testing area.
      */
     clear(): void;
     /** Show the layer (with any stroke in progress) on the visible canvas */
     private paint;
+    /** Draw the last stroke's sampled points (circles) and stamp positions (dots) */
+    private paintPoints;
     render(): import("lit").TemplateResult<1>;
 }