@lvl99dotcom/paintcanvas 0.6.0 → 0.7.0

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

@@ -23,7 +23,8 @@ import "../PcDialog";
  * - `left`: `<pc-toolbar>` (a pane) by default; toolbars in the sides are minimised (their tools one button that opens a
  *   menu of them) while the layout is narrow
  * - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) and, at its end,
- *   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow) by default
+ *   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow or the window is narrower than
+ *   900px) by default
  * - `right`: a `<pc-pane>` with `<pc-panel-layers>` by default
  * - `center`: `<pc-canvas>` by default
  * - `overlay`: drawn over the canvas; `<pc-canvas-map>` by default
@@ -36,7 +37,7 @@ import "../PcDialog";
  * does by default), the toolbar has no layers menu button.
  *
  * Each side has a mode, chosen by the layout's width from `left-modes` and `right-modes` (default `"docked,
- * rail@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
+ * floating@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
  * column of buttons (one per panel) that open each panel over the canvas; `floating`, the pane over the canvas as a
  * box that collapses to a button; or `overlay`, a rail over the canvas without a background (the canvas fills the
  * width behind it). Give side content in a `<pc-pane>` to have it follow the side's mode.
@@ -50,7 +51,9 @@ import "../PcDialog";
  * that offers to draw here instead. Fires `pc-toast` when the drawing can't be loaded or saved.
  *
  * With a `settings-store` name, the user's app settings (input settings, keyboard shortcuts, colour palette, colours,
- * theme and language) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
+ * theme, language and rendering) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when
+ * they can't be. The rendering chosen there is also kept in `localStorage` (see `saveRenderingChoice`), so the canvas the
+ * layout makes draws where the user last chose (see `PaintCanvasOptions.rendering`).
  *
  * @example
  * html`<paint-canvas style="height: 600px"></paint-canvas>`
@@ -154,6 +157,8 @@ export declare class PaintCanvasElement extends PcElement {
     private watchedAutosave?;
     /** Keeps the app settings under the `settings-store` name, if any */
     private ownSettingsAutosave?;
+    /** Stops keeping the rendering chosen in the canvas's UI settings under the `settings-store` name, if kept */
+    private stopKeepingRendering?;
     /** Whether drawing was blocked when shortcuts were last watched */
     private blockedShortcuts;
     /** Whether each side's slot has a layers menu (the toolbar's isn't needed then) */
@@ -204,6 +209,11 @@ export declare class PaintCanvasElement extends PcElement {
      * saves any change waiting to be saved).
      */
     private useSettingsStore;
+    /**
+     * Keep the rendering chosen in the canvas's UI settings (e.g. when they're restored, imported or changed) under a
+     * name, for the next time the layout makes a canvas. Returns what stops it.
+     */
+    private keepRendering;
     /** Show errors from the canvas's current autosave */
     private watchAutosaveErrors;
     /** Handle keyboard shortcuts for the current canvas, if asked to (not while blocked) */

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

@@ -5,7 +5,7 @@ import ChangeController from "../../ChangeController/index.js";
 import PaintCanvas, { Panel } from "../../../lib/classes/PaintCanvas/index.js";
 import KeyboardShortcuts, { SHORTCUT_EVENT } from "../../../lib/classes/KeyboardShortcuts/index.js";
 import { isTouchDevice } from "../../../lib/classes/InputSettings/index.js";
-import IndexedDbLayerStore, { IndexedDbSettingsStore } from "../../../lib/storage/index.js";
+import IndexedDbLayerStore, { IndexedDbSettingsStore, loadRenderingChoice, saveRenderingChoice } from "../../../lib/storage/index.js";
 import SettingsAutosave, { SETTINGS_AUTOSAVE_ERROR_EVENT } from "../../../lib/classes/SettingsAutosave/index.js";
 import { AUTOSAVE_ERROR_EVENT, AutosaveState } from "../../../lib/classes/LayerAutosave/index.js";
 import { isOwnAuthor } from "../../../lib/brushes/authors/index.js";
@@ -45,7 +45,8 @@ var TAKE_OVER_CHOICE = "take-over";
 * - `left`: `<pc-toolbar>` (a pane) by default; toolbars in the sides are minimised (their tools one button that opens a
 *   menu of them) while the layout is narrow
 * - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) and, at its end,
-*   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow) by default
+*   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow or the window is narrower than
+*   900px) by default
 * - `right`: a `<pc-pane>` with `<pc-panel-layers>` by default
 * - `center`: `<pc-canvas>` by default
 * - `overlay`: drawn over the canvas; `<pc-canvas-map>` by default
@@ -58,7 +59,7 @@ var TAKE_OVER_CHOICE = "take-over";
 * does by default), the toolbar has no layers menu button.
 *
 * Each side has a mode, chosen by the layout's width from `left-modes` and `right-modes` (default `"docked,
-* rail@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
+* floating@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
 * column of buttons (one per panel) that open each panel over the canvas; `floating`, the pane over the canvas as a
 * box that collapses to a button; or `overlay`, a rail over the canvas without a background (the canvas fills the
 * width behind it). Give side content in a `<pc-pane>` to have it follow the side's mode.
@@ -72,7 +73,9 @@ var TAKE_OVER_CHOICE = "take-over";
 * that offers to draw here instead. Fires `pc-toast` when the drawing can't be loaded or saved.
 *
 * With a `settings-store` name, the user's app settings (input settings, keyboard shortcuts, colour palette, colours,
-* theme and language) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
+* theme, language and rendering) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when
+* they can't be. The rendering chosen there is also kept in `localStorage` (see `saveRenderingChoice`), so the canvas the
+* layout makes draws where the user last chose (see `PaintCanvasOptions.rendering`).
 *
 * @example
 * html`<paint-canvas style="height: 600px"></paint-canvas>`
@@ -127,6 +130,8 @@ var PaintCanvasElement = class extends PcElement {
 	watchedAutosave;
 	/** Keeps the app settings under the `settings-store` name, if any */
 	ownSettingsAutosave;
+	/** Stops keeping the rendering chosen in the canvas's UI settings under the `settings-store` name, if kept */
+	stopKeepingRendering;
 	/** Whether drawing was blocked when shortcuts were last watched */
 	blockedShortcuts = false;
 	/** Whether each side's slot has a layers menu (the toolbar's isn't needed then) */
@@ -194,7 +199,7 @@ var PaintCanvasElement = class extends PcElement {
 		return sideModeFor(parseSideModes(side === "left" ? this.leftModes : this.rightModes), this.width);
 	}
 	connectedCallback() {
-		this.app ??= new PaintCanvas();
+		this.app ??= new PaintCanvas({ rendering: this.settingsStore ? loadRenderingChoice(this.settingsStore) : void 0 });
 		super.connectedCallback();
 		this.resizeObserver?.observe(this);
 		this.addEventListener("pointerdown", this.onPointerDown, true);
@@ -284,10 +289,22 @@ var PaintCanvasElement = class extends PcElement {
 	*/
 	useSettingsStore() {
 		this.ownSettingsAutosave?.stop();
+		this.stopKeepingRendering?.();
 		const name = this.settingsStore || void 0;
+		this.stopKeepingRendering = name === void 0 ? void 0 : this.keepRendering(name);
 		this.ownSettingsAutosave = name === void 0 ? void 0 : new SettingsAutosave(this.app, new IndexedDbSettingsStore(name));
 		this.ownSettingsAutosave?.addEventListener(SETTINGS_AUTOSAVE_ERROR_EVENT, this.onSettingsAutosaveError);
 	}
+	/**
+	* Keep the rendering chosen in the canvas's UI settings (e.g. when they're restored, imported or changed) under a
+	* name, for the next time the layout makes a canvas. Returns what stops it.
+	*/
+	keepRendering(name) {
+		const ui = this.app.ui;
+		const keep = () => saveRenderingChoice(name, ui.data.rendering);
+		ui.addEventListener("change", keep);
+		return () => ui.removeEventListener("change", keep);
+	}
 	/** Show errors from the canvas's current autosave */
 	watchAutosaveErrors() {
 		const autosave = this.app?.autosave;

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

@@ -1,13 +1,15 @@
 import { nothing } from "lit";
 import { PcElement } from "../../base";
 import "../PcShortcutSettings";
+import "../PcToggleCheckbox";
 import "../PcDialogWindow";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 /**
- * Buttons for the user's app settings: "Keyboard shortcuts", which opens a window to change them (see
+ * The user's app settings: a "Draw with the GPU" switch (the user's `ui.data.rendering`, used from the next start, so it
+ * says when the page needs reloading), and buttons: "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, profile graphs, theme and language). The window is a shaded
+ * settings, keyboard shortcuts, colour palette, colours, profile graphs, theme, language and rendering). The window is a shaded
  * `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
  * back to the button. Fires `pc-toast` after importing, or when importing or exporting fails.
  *
@@ -40,6 +42,7 @@ export declare class PcAppSettings extends PcElement {
     shortcutsOpen: boolean;
     /** Saves exported files (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
+    private changes;
     constructor();
     /** Close the keyboard shortcuts window */
     closeShortcuts(): void;
@@ -55,5 +58,10 @@ export declare class PcAppSettings extends PcElement {
     private toastError;
     /** The keyboard shortcuts window, with its contents only while open */
     private renderShortcuts;
+    /**
+     * The switch that draws with the GPU (or the CPU) from the next start, saying when the page needs reloading to use
+     * the choice (see `PaintCanvas.rendering`).
+     */
+    private renderRendering;
     render(): import("lit").TemplateResult<1> | typeof nothing;
 }

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

@@ -1,7 +1,9 @@
 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 ChangeController from "../../ChangeController/index.js";
 import "../PcShortcutSettings/index.js";
+import "../PcToggleCheckbox/index.js";
 import "../PcDialogWindow/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";
@@ -13,9 +15,10 @@ var SETTINGS_FILE_ERROR_KEYS = {
 	[SETTINGS_FILE_ERRORS.read]: "paintCanvas.settings.fileReadFailed"
 };
 /**
-* Buttons for the user's app settings: "Keyboard shortcuts", which opens a window to change them (see
+* The user's app settings: a "Draw with the GPU" switch (the user's `ui.data.rendering`, used from the next start, so it
+* says when the page needs reloading), and buttons: "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, profile graphs, theme and language). The window is a shaded
+* settings, keyboard shortcuts, colour palette, colours, profile graphs, theme, language and rendering). The window is a shaded
 * `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
 * back to the button. Fires `pc-toast` after importing, or when importing or exporting fails.
 *
@@ -44,11 +47,23 @@ var PcAppSettings = class extends PcElement {
         font-family: var(--pc-font);
         font-size: var(--pc-font-size);
       }
+      /* One full-width button per row */
       .actions {
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
         gap: var(--pc-space-2);
       }
+      .actions button {
+        width: 100%;
+      }
+      .hint {
+        display: block;
+        color: var(--pc-text-muted);
+        font-size: 0.85em;
+      }
+      .pending {
+        color: var(--pc-text);
+      }
       pc-dialog-window {
         --pc-dialog-width: 480px;
       }
@@ -60,6 +75,7 @@ var PcAppSettings = class extends PcElement {
 	];
 	/** Saves exported files (replaceable for tests) */
 	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
+	changes = new ChangeController(this, () => [this.app?.ui]);
 	constructor() {
 		super();
 		this.shortcutsOpen = false;
@@ -127,14 +143,33 @@ var PcAppSettings = class extends PcElement {
               .settings=${app.shortcuts}
             ></pc-shortcut-settings>` : nothing}
     </pc-dialog-window>`;
+	}
+	/**
+	* The switch that draws with the GPU (or the CPU) from the next start, saying when the page needs reloading to use
+	* the choice (see `PaintCanvas.rendering`).
+	*/
+	renderRendering(app) {
+		const chosen = app.ui.data.rendering;
+		const pending = chosen !== app.rendering;
+		return html`<pc-toggle-checkbox
+      class="gpu"
+      .checked=${chosen === "gpu"}
+      @change=${(e) => app.ui.update({ rendering: e.detail.checked ? "gpu" : "cpu" })}
+    >
+      ${this.t("paintCanvas.settings.gpu")}
+      <span class="hint ${pending ? "pending" : ""}" aria-live="polite">
+        ${this.t(pending ? "paintCanvas.settings.reloadToApply" : "paintCanvas.settings.gpuHint")}
+      </span>
+    </pc-toggle-checkbox>`;
 	}
 	render() {
 		const app = this.app;
 		if (!app) return nothing;
-		return html`<div class="actions">
+		return html`${this.renderRendering(app)}
+      <div class="actions">
         <button
           type="button"
-          class="pill-s shortcuts"
+          class="pill shortcuts"
           aria-haspopup="dialog"
           @click=${() => this.shortcutsOpen = true}
         >
@@ -142,14 +177,14 @@ var PcAppSettings = class extends PcElement {
         </button>
         <button
           type="button"
-          class="pill-s import"
+          class="pill import"
           @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
         >
           ${this.t("paintCanvas.settings.import")}
         </button>
         <button
           type="button"
-          class="pill-s export"
+          class="pill export"
           @click=${() => void this.exportFile()}
         >
           ${this.t("paintCanvas.settings.export")}

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

@@ -2,6 +2,7 @@ import { nothing } from "lit";
 import { type ConfirmFn, type PromptFn } from "../../ask";
 import { PcElement } from "../../base";
 import "../PcBrushTest";
+import "../PcToggleCheckbox";
 import "../PcDialogWindow";
 import "../PcSliderRange";
 import "../PcProfileEditor";

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

@@ -4,6 +4,7 @@ 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 "../PcToggleCheckbox/index.js";
 import "../PcDialogWindow/index.js";
 import "../PcSliderRange/index.js";
 import "../PcProfileEditor/index.js";
@@ -500,16 +501,14 @@ var PcBrushConfig = class extends PcElement {
             >
             ${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 })}
-            />
+          <pc-toggle-checkbox
+            class="snap"
+            .checked=${draft.snapToPixelGrid ?? false}
+            ?disabled=${this.busy}
+            @change=${(e) => this.change({ snapToPixelGrid: e.detail.checked })}
+          >
             ${this.t("paintCanvas.brushConfig.snapToPixelGrid")}
-          </label>
+          </pc-toggle-checkbox>
         </div>
         ${this.editingId ? html`<button
                 slot="footer-start"

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

@@ -1,4 +1,5 @@
 import { PcElement } from "../../base";
+import "../PcToggleCheckbox";
 import type { BrushConfig } from "../../../lib/brushes/types";
 import type BrushTipCache from "../../../lib/brushes/BrushTipCache";
 import { type CanvasFactory } from "../../../lib/classes/Layer";

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

@@ -1,6 +1,7 @@
 import style_default from "./style.js";
 import { PILLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
+import "../PcToggleCheckbox/index.js";
 import StrokeEngine from "../../../lib/brushes/StrokeEngine/index.js";
 import Layer, { createOffscreenCanvas } from "../../../lib/classes/Layer/index.js";
 import { html, unsafeCSS } from "lit";
@@ -193,14 +194,14 @@ var PcBrushTest = class extends PcElement {
         <button type="button" class="pill clear" @click=${() => this.clear()}>
           ${this.t("paintCanvas.common.clear")}
         </button>
-        <label class="show-points">
-          <input
-            type="checkbox"
-            .checked=${this.showPoints}
-            @change=${(e) => this.setShowPoints(e.target.checked)}
-          />
+        <pc-toggle-checkbox
+          class="show-points"
+          size="s"
+          .checked=${this.showPoints}
+          @change=${(e) => this.setShowPoints(e.detail.checked)}
+        >
           ${this.t("paintCanvas.brushConfig.showStrokePoints")}
-        </label>
+        </pc-toggle-checkbox>
       </div>
     `;
 	}

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.pill.clear {\n  background: var(--pc-red);\n  color: #ffffff;\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}\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/PcButtonMenu/index.d.ts

@@ -0,0 +1,88 @@
+import { PcElement } from "../../base";
+import { type PillSize } from "../../styles";
+import type { MenuItem } from "../PcMenu";
+import "../PcContextMenu";
+/** An action in a button menu: what `pc-select` gives, its label and whether it can be done now */
+export type ButtonMenuItem = Pick<MenuItem, "value" | "label" | "disabled">;
+/**
+ * Whether the window is narrower than a width (CSS pixels). False without a width or `matchMedia`.
+ *
+ * @example
+ * isNarrowerThan(900); // true in a 600px-wide window
+ */
+export declare const isNarrowerThan: (width: number | undefined, matchMedia?: ((query: string) => {
+    matches: boolean;
+}) | undefined) => boolean;
+/**
+ * A row of pill buttons for actions, which can become one ⋮ menu (`pc-context-menu`): while `menu` is set, or while the
+ * window is narrower than `menu-below` (CSS pixels; only when set). Fires `pc-select` (detail: `{ value }`) when an
+ * action is chosen either way.
+ *
+ * @example
+ * html`<pc-button-menu label="More actions" menu-below="900" size="pill-s"
+ *   .items=${[{ value: "cut", label: "Cut" }, { value: "paste", label: "Paste", disabled: true }]}
+ *   @pc-select=${(e) => run(e.detail.value)}></pc-button-menu>`
+ */
+export declare class PcButtonMenu extends PcElement {
+    static properties: {
+        items: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+        };
+        menu: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        menuBelow: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        narrowWindow: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The actions, in order */
+    items: ButtonMenuItem[];
+    /** What the ⋮ button is called (e.g. "More actions") */
+    label: string;
+    /** The buttons' pill size (`pill` by default) */
+    size: PillSize;
+    /** Whether the actions are always one ⋮ menu */
+    menu: boolean;
+    /** Window width (CSS pixels) below which the actions are one ⋮ menu; none by default */
+    menuBelow?: number;
+    /** Whether the window is narrower than `menuBelow` */
+    narrowWindow: boolean;
+    /** Follows the window's width while `menuBelow` is set */
+    private query?;
+    private readonly onQueryChange;
+    constructor();
+    /** Whether the actions show as one ⋮ menu now */
+    get showsMenu(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    /** Follow whether the window is narrower than `menuBelow` (when set and the browser can tell) */
+    private watchWidth;
+    /** Stop following the window's width */
+    private stopWatchingWidth;
+    /** Tell listeners an action was chosen */
+    private select;
+    render(): import("lit").TemplateResult<1> | import("lit").TemplateResult<1>[];
+}

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

@@ -0,0 +1,125 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { PILLS_CSS } from "../../styles/index.js";
+import "../PcContextMenu/index.js";
+import { css, html, unsafeCSS } from "lit";
+// src/ui/elements/PcButtonMenu/index.ts
+/**
+* Whether the window is narrower than a width (CSS pixels). False without a width or `matchMedia`.
+*
+* @example
+* isNarrowerThan(900); // true in a 600px-wide window
+*/
+var isNarrowerThan = (width, matchMedia = typeof window.matchMedia === "function" ? (query) => window.matchMedia(query) : void 0) => width !== void 0 && width > 0 && matchMedia !== void 0 && matchMedia(`(width < ${width}px)`).matches;
+/**
+* A row of pill buttons for actions, which can become one ⋮ menu (`pc-context-menu`): while `menu` is set, or while the
+* window is narrower than `menu-below` (CSS pixels; only when set). Fires `pc-select` (detail: `{ value }`) when an
+* action is chosen either way.
+*
+* @example
+* html`<pc-button-menu label="More actions" menu-below="900" size="pill-s"
+*   .items=${[{ value: "cut", label: "Cut" }, { value: "paste", label: "Paste", disabled: true }]}
+*   @pc-select=${(e) => run(e.detail.value)}></pc-button-menu>`
+*/
+var PcButtonMenu = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		items: { attribute: false },
+		label: { type: String },
+		size: { type: String },
+		menu: {
+			type: Boolean,
+			reflect: true
+		},
+		menuBelow: {
+			type: Number,
+			attribute: "menu-below"
+		},
+		narrowWindow: { state: true }
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(PILLS_CSS),
+		css`
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--pc-space-2);
+      }
+      :host([hidden]) {
+        display: none;
+      }
+    `
+	];
+	/** Follows the window's width while `menuBelow` is set */
+	query;
+	onQueryChange = (event) => {
+		this.narrowWindow = event.matches;
+	};
+	constructor() {
+		super();
+		this.items = [];
+		this.label = "";
+		this.size = "pill";
+		this.menu = false;
+		this.narrowWindow = false;
+	}
+	/** Whether the actions show as one ⋮ menu now */
+	get showsMenu() {
+		return this.menu || this.narrowWindow;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.watchWidth();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.stopWatchingWidth();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("menuBelow") && this.isConnected) this.watchWidth();
+	}
+	/** Follow whether the window is narrower than `menuBelow` (when set and the browser can tell) */
+	watchWidth() {
+		this.stopWatchingWidth();
+		this.narrowWindow = isNarrowerThan(this.menuBelow);
+		if (!this.menuBelow || typeof window.matchMedia !== "function") return;
+		this.query = window.matchMedia(`(width < ${this.menuBelow}px)`);
+		this.query.addEventListener?.("change", this.onQueryChange);
+	}
+	/** Stop following the window's width */
+	stopWatchingWidth() {
+		this.query?.removeEventListener?.("change", this.onQueryChange);
+		this.query = void 0;
+	}
+	/** Tell listeners an action was chosen */
+	select(value) {
+		emit(this, "pc-select", { value });
+	}
+	render() {
+		if (this.showsMenu) return html`<pc-context-menu
+        class="more"
+        label=${this.label}
+        .items=${this.items.map(({ value, label, disabled }) => ({
+			value,
+			label,
+			disabled
+		}))}
+        @pc-select=${(event) => {
+			event.stopPropagation();
+			this.select(event.detail.value);
+		}}
+      ></pc-context-menu>`;
+		return this.items.map(({ value, label, disabled }) => html`<button
+          type="button"
+          class="${this.size} ${value}"
+          data-value=${value}
+          ?disabled=${disabled}
+          @click=${() => this.select(value)}
+        >
+          ${label}
+        </button>`);
+	}
+};
+defineElement("pc-button-menu", PcButtonMenu);
+export { PcButtonMenu, isNarrowerThan };

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

@@ -121,6 +121,8 @@ export declare class PcCanvas extends PcElement {
     private antsOffset;
     /** Viewport that has been fitted once (so resizing doesn't refit) */
     private fittedViewport?;
+    /** The screen canvas whose 2D context has been made (see `prepareScene`) */
+    private preparedCanvas?;
     private frame;
     /** Animation frame drawing only the brush cursor, if requested */
     private overlayFrame;
@@ -168,6 +170,13 @@ export declare class PcCanvas extends PcElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
+    /**
+     * Make a new screen canvas's 2D context where the app's canvases draw (see `PaintCanvas.rendering`). Drawn from layers
+     * kept in regular memory (`cpu`), keeping the screen canvas there too means each frame copies only the area that
+     * changed, instead of sending whole layers to the GPU. The first context decides that; later `getContext("2d")` calls
+     * get this one, so the screen canvas is made again when the app's rendering differs (see `render`).
+     */
+    private prepareScene;
     /**
      * Note what changed: the stroke in progress (and the area it changed), or anything else.
      */