@lvl99dotcom/paintcanvas 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,121 @@
+import { PcElement } from "../../base";
+import type PaintCanvas from "../../../lib/classes/PaintCanvas";
+import type BrushSettings from "../../../lib/classes/BrushSettings";
+import type { BrushConfig } from "../../../lib/brushes/types";
+import { type SaveMethod } from "../../../lib/rendering/screenshot";
+/** Cursor over a preset that a click deletes (Alt/Option held) */
+export declare const DELETE_CURSOR: string;
+/** Asks the user to confirm; replaceable for tests */
+export type ConfirmFn = (message: string) => boolean;
+/** Largest shape preview in a preset tile, in CSS pixels */
+export declare const MAX_PREVIEW_SIZE = 30;
+/** Smallest shape preview in a preset tile, in CSS pixels */
+export declare const MIN_PREVIEW_SIZE = 3;
+/**
+ * The size of each preset's shape preview, relative to the largest preset of its family (`group`), so a family's sizes
+ * are easy to tell apart (the largest fills the tile). Presets without a family fill the tile from 50 pixels.
+ *
+ * @example
+ * previewSizes([{ id: "a", group: "Round", width: 10, height: 10 }, { id: "b", group: "Round", width: 50, height: 50 }]);
+ * // Map { "a" => { width: 6, height: 6 }, "b" => { width: 30, height: 30 } }
+ */
+export declare const previewSizes: (presets: BrushConfig[]) => Map<string, {
+    width: number;
+    height: number;
+}>;
+/**
+ * Brush or eraser menu: current size, a drag control to change size, a scrollable grid of presets grouped by author
+ * ("My presets", "PaintCanvas", then other authors), and "New preset", "Import" and "Export" buttons. Each preset is a
+ * tile showing its shape at its size relative to the rest of its family, five to a row. Picking a preset closes the
+ * menu; holding Alt/Option shows an "X" over custom presets, and clicking one asks before deleting it.
+ *
+ * Dragging the size control up or right makes the brush bigger; down or left makes it smaller.
+ *
+ * Fires `pc-new-preset` (detail: "brush" or "eraser") for "New preset", and `pc-toast` (detail: the message) after
+ * importing, exporting or deleting presets, or when that fails.
+ *
+ * @example
+ * html`<pc-brush-menu kind="eraser" .app=${app}></pc-brush-menu>`
+ */
+export declare class PcBrushMenu extends PcElement {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        kind: {
+            type: StringConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    app?: PaintCanvas;
+    /** Which settings this menu controls */
+    kind: "brush" | "eraser";
+    confirm: ConfirmFn;
+    /** Saves exported presets (replaceable for tests) */
+    saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
+    /** Last pointer position while dragging the size control */
+    private dragPoint;
+    private changes;
+    private readonly onKey;
+    private readonly onBlur;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Fire an event that crosses shadow DOM boundaries */
+    private emit;
+    /**
+     * Select a preset, or with Alt/Option held, delete a custom preset after confirming.
+     */
+    private onPresetClick;
+    /**
+     * Delete a custom preset after confirming.
+     */
+    deletePreset(preset: BrushConfig): Promise<void>;
+    /**
+     * Import the presets in a brush preset file, adding them to the custom presets (replacing any with the same ID).
+     */
+    importFile(file: File): Promise<void>;
+    /**
+     * Export the custom presets (not the built-in ones) as a brush preset file.
+     */
+    exportFile(): Promise<void>;
+    /**
+     * A preset file error's message in the chosen language (or the fallback's, for any other error).
+     */
+    private presetFileError;
+    /**
+     * A preset group's heading in the chosen language ("My presets" and "Unknown" are translated; author names aren't).
+     */
+    private groupLabel;
+    /** The brush or eraser settings this menu controls */
+    get settings(): BrushSettings | undefined;
+    /**
+     * Select a preset and close the menu.
+     */
+    selectPreset(id: string): void;
+    /**
+     * Start dragging the size control.
+     */
+    private onPointerDown;
+    /**
+     * Resize while dragging: right and up are positive, left and down are negative.
+     */
+    private onPointerMove;
+    /**
+     * Stop dragging the size control.
+     */
+    private onPointerUp;
+    /** Render a preset's tile */
+    private renderTile;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,362 @@
+import style_default from "./style.js";
+import { NO_TEXT_SELECTION_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
+import { PcElement, defineElement } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import { groupPresetsByAuthor } from "../../../lib/brushes/authors/index.js";
+import { BRUSH_PRESET_FILE_FORMAT } from "../../../lib/presets/schema.js";
+import { PRESET_FILE_ERRORS, PresetFileError, exportPresetFile, parsePresetFile, presetFileName } from "../../../lib/brushes/presetFile/index.js";
+import { svgCursor } from "../../../lib/rendering/cursors/index.js";
+import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
+import { html, nothing, unsafeCSS } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+// src/ui/elements/PcBrushMenu/index.ts
+/** Translation keys of the preset file error messages */
+var PRESET_FILE_ERROR_KEYS = {
+	[PRESET_FILE_ERRORS.incompatible]: "paintCanvas.presets.fileIncompatible",
+	[PRESET_FILE_ERRORS.read]: "paintCanvas.presets.fileReadFailed",
+	[PRESET_FILE_ERRORS.export]: "paintCanvas.presets.exportFailed",
+	[PRESET_FILE_ERRORS.empty]: "paintCanvas.presets.nothingToExport"
+};
+/** Cursor over a preset that a click deletes (Alt/Option held) */
+var DELETE_CURSOR = svgCursor("M6 6 L18 18 M18 6 L6 18", [12, 12], "not-allowed");
+/** Size the previews of presets without a family are measured against, so a 50px preset fills its tile */
+var UNGROUPED_FULL_SIZE = 50;
+/** Largest shape preview in a preset tile, in CSS pixels */
+var MAX_PREVIEW_SIZE = 30;
+/** Smallest shape preview in a preset tile, in CSS pixels */
+var MIN_PREVIEW_SIZE = 3;
+/**
+* The size of each preset's shape preview, relative to the largest preset of its family (`group`), so a family's sizes
+* are easy to tell apart (the largest fills the tile). Presets without a family fill the tile from 50 pixels.
+*
+* @example
+* previewSizes([{ id: "a", group: "Round", width: 10, height: 10 }, { id: "b", group: "Round", width: 50, height: 50 }]);
+* // Map { "a" => { width: 6, height: 6 }, "b" => { width: 30, height: 30 } }
+*/
+var previewSizes = (presets) => {
+	const largest = /* @__PURE__ */ new Map();
+	for (const preset of presets) {
+		const group = preset.group ?? preset.id;
+		const size = Math.max(preset.width ?? 1, preset.height ?? 1);
+		largest.set(group, Math.max(largest.get(group) ?? (preset.group ? 0 : UNGROUPED_FULL_SIZE), size));
+	}
+	return new Map(presets.map((preset) => {
+		const scale = 30 / largest.get(preset.group ?? preset.id);
+		const size = (value = 1) => Math.max(3, Math.round(value * scale));
+		return [preset.id, {
+			width: size(preset.width),
+			height: size(preset.height)
+		}];
+	}));
+};
+/**
+* Brush or eraser menu: current size, a drag control to change size, a scrollable grid of presets grouped by author
+* ("My presets", "PaintCanvas", then other authors), and "New preset", "Import" and "Export" buttons. Each preset is a
+* tile showing its shape at its size relative to the rest of its family, five to a row. Picking a preset closes the
+* menu; holding Alt/Option shows an "X" over custom presets, and clicking one asks before deleting it.
+*
+* Dragging the size control up or right makes the brush bigger; down or left makes it smaller.
+*
+* Fires `pc-new-preset` (detail: "brush" or "eraser") for "New preset", and `pc-toast` (detail: the message) after
+* importing, exporting or deleting presets, or when that fails.
+*
+* @example
+* html`<pc-brush-menu kind="eraser" .app=${app}></pc-brush-menu>`
+*/
+var PcBrushMenu = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false },
+		kind: { type: String }
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(NO_TEXT_SELECTION_CSS),
+		unsafeCSS(style_default),
+		unsafeCSS(WINDOWS_CSS),
+		unsafeCSS(PILLS_CSS)
+	];
+	confirm = (message) => window.confirm(message);
+	/** Saves exported presets (replaceable for tests) */
+	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
+	/** Last pointer position while dragging the size control */
+	dragPoint = null;
+	changes = new ChangeController(this, () => [this.app, this.settings]);
+	onKey = (event) => {
+		if (event.key === "Alt") this.toggleAttribute("deleting", event.type === "keydown");
+	};
+	onBlur = () => this.removeAttribute("deleting");
+	constructor() {
+		super();
+		this.kind = "brush";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.setProperty("--delete-cursor", DELETE_CURSOR);
+		window.addEventListener("keydown", this.onKey);
+		window.addEventListener("keyup", this.onKey);
+		window.addEventListener("blur", this.onBlur);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener("keydown", this.onKey);
+		window.removeEventListener("keyup", this.onKey);
+		window.removeEventListener("blur", this.onBlur);
+	}
+	/** Fire an event that crosses shadow DOM boundaries */
+	emit(type, detail) {
+		this.dispatchEvent(new CustomEvent(type, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Select a preset, or with Alt/Option held, delete a custom preset after confirming.
+	*/
+	onPresetClick(event, preset) {
+		const app = this.app;
+		if (event.altKey && !app.isBuiltInPreset(preset.id)) {
+			this.deletePreset(preset);
+			return;
+		}
+		this.selectPreset(preset.id);
+	}
+	/**
+	* Delete a custom preset after confirming.
+	*/
+	async deletePreset(preset) {
+		const app = this.app;
+		if (!app) return;
+		const name = preset.name ?? preset.id;
+		if (!this.confirm(this.t("paintCanvas.presets.deleteConfirm", { name }))) return;
+		try {
+			await app.customPresets.remove(preset.id);
+			this.emit("pc-toast", {
+				message: this.t("paintCanvas.presets.deleted", { name }),
+				kind: "success"
+			});
+		} catch {
+			this.emit("pc-toast", {
+				message: this.t("paintCanvas.presets.deleteFailed", { name }),
+				kind: "error"
+			});
+		}
+	}
+	/**
+	* Import the presets in a brush preset file, adding them to the custom presets (replacing any with the same ID).
+	*/
+	async importFile(file) {
+		const app = this.app;
+		if (!app) return;
+		let text;
+		try {
+			text = await file.text();
+		} catch {
+			this.emit("pc-toast", {
+				message: this.presetFileError(void 0, PRESET_FILE_ERRORS.read),
+				kind: "error"
+			});
+			return;
+		}
+		try {
+			const presets = parsePresetFile(text, [app.names.presetFileFormat, BRUSH_PRESET_FILE_FORMAT]);
+			await app.customPresets.save(...presets);
+			this.emit("pc-toast", {
+				message: this.t("paintCanvas.presets.imported", { count: presets.length }),
+				kind: "success"
+			});
+		} catch (error) {
+			this.emit("pc-toast", {
+				message: this.presetFileError(error, PRESET_FILE_ERRORS.read),
+				kind: "error"
+			});
+		}
+	}
+	/**
+	* Export the custom presets (not the built-in ones) as a brush preset file.
+	*/
+	async exportFile() {
+		const app = this.app;
+		if (!app) return;
+		try {
+			const json = exportPresetFile(app.customPresets.presets, app.names.presetFileFormat);
+			await this.saveFile(new Blob([json], { type: "application/json" }), presetFileName(void 0, app.names.filePrefix));
+		} catch (error) {
+			this.emit("pc-toast", {
+				message: this.presetFileError(error, PRESET_FILE_ERRORS.export),
+				kind: "error"
+			});
+		}
+	}
+	/**
+	* A preset file error's message in the chosen language (or the fallback's, for any other error).
+	*/
+	presetFileError(error, fallback) {
+		const message = error instanceof PresetFileError ? error.message : fallback;
+		const key = PRESET_FILE_ERROR_KEYS[message];
+		return key ? this.t(key) : message;
+	}
+	/**
+	* A preset group's heading in the chosen language ("My presets" and "Unknown" are translated; author names aren't).
+	*/
+	groupLabel(label) {
+		if (label === "My presets") return this.t("paintCanvas.presets.myPresets");
+		if (label === "Unknown") return this.t("paintCanvas.presets.unknownAuthor");
+		return label;
+	}
+	/** The brush or eraser settings this menu controls */
+	get settings() {
+		return this.kind === "eraser" ? this.app?.eraser : this.app?.brush;
+	}
+	/**
+	* Select a preset and close the menu.
+	*/
+	selectPreset(id) {
+		this.settings?.select(id);
+		this.app?.closePanel();
+	}
+	/**
+	* Start dragging the size control.
+	*/
+	onPointerDown(event) {
+		this.dragPoint = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		event.currentTarget.setPointerCapture(event.pointerId);
+	}
+	/**
+	* Resize while dragging: right and up are positive, left and down are negative.
+	*/
+	onPointerMove(event) {
+		if (!this.dragPoint || !this.settings) return;
+		const delta = event.clientX - this.dragPoint.x + (this.dragPoint.y - event.clientY);
+		this.dragPoint = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (delta !== 0) this.settings.resize(delta);
+	}
+	/**
+	* Stop dragging the size control.
+	*/
+	onPointerUp() {
+		this.dragPoint = null;
+	}
+	/** Render a preset's tile */
+	renderTile(settings, preset, sizes) {
+		const size = sizes.get(preset.id);
+		const custom = !this.app?.isBuiltInPreset(preset.id);
+		return html`<li>
+      <button
+        type="button"
+        class=${custom ? "custom" : nothing}
+        data-preset=${preset.id}
+        title=${preset.name ?? preset.id}
+        aria-label=${preset.name ?? preset.id}
+        aria-pressed=${settings.presetId === preset.id}
+        @click=${(e) => this.onPresetClick(e, preset)}
+      >
+        <span
+          class=${preset.image ? "shape image" : "shape"}
+          style=${styleMap({
+			width: `${size.width}px`,
+			height: `${size.height}px`,
+			maskImage: typeof preset.image === "string" ? `url("${preset.image}")` : void 0,
+			transform: preset.rotation ? `rotate(${preset.rotation}deg)` : void 0
+		})}
+        ></span>
+      </button>
+    </li>`;
+	}
+	render() {
+		const settings = this.settings;
+		if (!settings) return html``;
+		const title = this.t(this.kind === "eraser" ? "paintCanvas.tool.eraser" : "paintCanvas.tool.brush");
+		const presets = Object.values(settings.presets);
+		const sizes = previewSizes(presets);
+		const app = this.app;
+		const groups = groupPresetsByAuthor(presets, (id) => app.isBuiltInPreset(id), app.authorHandle, {
+			builtIn: app.names.app,
+			unknown: app.names.unknownAuthor
+		});
+		const preset = settings.preset;
+		return html`
+      <h2 class="visually-hidden">${title}</h2>
+      <!-- The current preset: its shape, name and size (drag sideways to resize) -->
+      <div class="current">
+        <span
+          class=${preset.image ? "current-shape image" : "current-shape"}
+          style=${styleMap({ maskImage: typeof preset.image === "string" ? `url("${preset.image}")` : void 0 })}
+        ></span>
+        <span class="name">${preset.name ?? preset.id}</span>
+        <div
+          class="size"
+          role="slider"
+          aria-label=${this.t("paintCanvas.brushMenu.size", { tool: title })}
+          aria-valuenow=${settings.width}
+          title=${this.t("paintCanvas.brushMenu.dragToResize")}
+          @pointerdown=${this.onPointerDown}
+          @pointermove=${this.onPointerMove}
+          @pointerup=${this.onPointerUp}
+          @pointercancel=${this.onPointerUp}
+        >
+          ${settings.width === settings.height ? settings.width : `${settings.width} × ${settings.height}`}
+        </div>
+      </div>
+      <div
+        class="presets"
+        aria-label=${this.t("paintCanvas.brushMenu.presets", { tool: title })}
+      >
+        ${groups.map((group) => html`
+            <h3>${this.groupLabel(group.label)}</h3>
+            <ul aria-label=${this.groupLabel(group.label)}>
+              ${group.presets.map((preset) => this.renderTile(settings, preset, sizes))}
+            </ul>
+          `)}
+      </div>
+      <div class="actions">
+        <button
+          type="button"
+          class="pill new-preset"
+          @click=${() => this.emit("pc-new-preset", this.kind)}
+        >
+          ${this.t("paintCanvas.brushMenu.create")}
+        </button>
+        <button
+          type="button"
+          class="pill import"
+          @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
+        >
+          ${this.t("paintCanvas.brushMenu.import")}
+        </button>
+        <!-- Chosen through "Import" -->
+        <label class="visually-hidden">
+          ${this.t("paintCanvas.brushMenu.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>
+        <button
+          type="button"
+          class="pill export"
+          @click=${() => void this.exportFile()}
+        >
+          ${this.t("paintCanvas.brushMenu.export")}
+        </button>
+      </div>
+    `;
+	}
+};
+defineElement("pc-brush-menu", PcBrushMenu);
+export { DELETE_CURSOR, MAX_PREVIEW_SIZE, MIN_PREVIEW_SIZE, PcBrushMenu, previewSizes };

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

@@ -0,0 +1,3 @@
+// src/ui/elements/PcBrushMenu/style.css?inline
+var style_default = ":host {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  box-sizing: border-box;\n  width: 240px;\n  max-height: 100%;\n  padding: 8px;\n  /* Light grey, like the bars */\n  background: var(--pc-bar);\n  box-shadow: var(--pc-shadow);\n}\n/* The current preset on one row: its shape, name and size */\n.current {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n  padding: 4px 8px;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n}\n.current-shape {\n  flex: none;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--pc-text);\n}\n.current-shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n.name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.size {\n  flex: none;\n  align-self: stretch;\n  display: flex;\n  align-items: center;\n  padding: 0 0 0 8px;\n  border-left: 1px solid var(--pc-border);\n  cursor: ew-resize;\n  touch-action: none;\n}\n/* The presets scroll, at most 400px tall, or less so the whole menu fits under the settings bar in a shorter window */\n.presets {\n  flex: 1 1 auto;\n  min-height: 0;\n  max-height: min(400px, calc(100vh - 180px));\n  overflow-y: auto;\n}\nh3 {\n  margin: 4px 0;\n  font-size: 14px;\n}\nul {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  align-content: start;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n:host([deleting]) li button.custom {\n  cursor: var(--delete-cursor);\n}\n/* Create, Import and Export side by side */\n.actions {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 6px;\n}\n.actions button.pill {\n  padding: 4px 8px;\n}\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\nli button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n  padding: 0;\n  border: none;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n  cursor: pointer;\n}\nli button:hover {\n  background: var(--pc-surface-hover);\n}\nli button[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.shape {\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: 100% 100%;\n}\n";
+export { style_default as default };

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

@@ -0,0 +1,71 @@
+import { PcElement } from "../../base";
+import type { BrushConfig } from "../../../lib/brushes/types";
+import type BrushTipCache from "../../../lib/brushes/BrushTipCache";
+import { type CanvasFactory } from "../../../lib/classes/Layer";
+/** Width of the testing area in pixels (double its displayed width, for a sharper picture) */
+export declare const TEST_AREA_WIDTH = 800;
+/** Height of the testing area in pixels (double its displayed height) */
+export declare const TEST_AREA_HEIGHT = 320;
+/** The colour test strokes are drawn in, whatever the current colour */
+export declare const TEST_COLOUR = "#000000";
+/**
+ * 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.
+ *
+ * @example
+ * html`<pc-brush-test .config=${config} .tips=${app.tips}></pc-brush-test>`
+ */
+export declare class PcBrushTest extends PcElement {
+    static properties: {
+        config: {
+            attribute: boolean;
+        };
+        tips: {
+            attribute: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The settings to try */
+    config?: BrushConfig;
+    /** Brush shapes */
+    tips?: BrushTipCache;
+    /** Creates the layer and stroke canvases (replaceable for tests) */
+    createCanvas: CanvasFactory;
+    private layer?;
+    private engine?;
+    /** The pointer drawing, if any */
+    private pointerId?;
+    private readonly onEngineChange;
+    disconnectedCallback(): void;
+    /** The visible canvas */
+    private get canvas();
+    /** The layer strokes are drawn on, and the engine drawing them (created on first use) */
+    private get drawing();
+    /** A pointer's position in the area's pixels, with pen pressure and tilt */
+    private point;
+    /**
+     * Start a test stroke.
+     */
+    private onPointerDown;
+    /** Continue the test stroke */
+    private onPointerMove;
+    /** Finish the test stroke */
+    private onPointerUp;
+    /**
+     * Empty the testing area.
+     */
+    clear(): void;
+    /** Show the layer (with any stroke in progress) on the visible canvas */
+    private paint;
+    render(): import("lit").TemplateResult<1>;
+}