@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

package/dist/ui/elements/{PcLayersMenu → PcPanelLayers}/index.js

@@ -1,13 +1,14 @@
 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 { defineElement } from "../../base/index.js";
+import { PcPanel } from "../PcPanel/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import { maskModeFor } from "../../../lib/selection/geometry/index.js";
 import { LAYER_ALPHA_MASK_EVENT, LAYER_DRAG_EVENT, LAYER_MENU_OPEN_EVENT } from "../PcLayerItem/index.js";
 import { html, nothing, unsafeCSS } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { repeat } from "lit/directives/repeat.js";
-// src/ui/elements/PcLayersMenu/index.ts
+// src/ui/elements/PcPanelLayers/index.ts
 /**
 * Whether a point is inside a rectangle (edges included).
 *
@@ -41,17 +42,17 @@ var dropSlot = (rows, y, ghost) => {
 * highlighted for touch). Escape cancels the drag. Moves and duplicates are announced to screen readers.
 *
 * @example
-* html`<pc-layers-menu .app=${app}></pc-layers-menu>`
+* html`<pc-panel-layers .app=${app}></pc-panel-layers>`
 */
-var PcLayersMenu = class extends PcElement {
+var PcPanelLayers = class extends PcPanel {
 	static properties = {
-		...PcElement.properties,
+		...PcPanel.properties,
 		app: { attribute: false },
 		drag: { state: true },
 		announcement: { state: true }
 	};
 	static styles = [
-		PcElement.styles,
+		...PcPanel.styles,
 		unsafeCSS(NO_TEXT_SELECTION_CSS),
 		unsafeCSS(style_default),
 		unsafeCSS(WINDOWS_CSS),
@@ -185,9 +186,15 @@ var PcLayersMenu = class extends PcElement {
 		if (slot === others) entries.push(ghost);
 		return repeat(entries, (entry) => entry.key, (entry) => entry.view);
 	}
-	render() {
+	get defaultIcon() {
+		return "layers";
+	}
+	get defaultLabel() {
+		return this.t("paintCanvas.toolbar.layers");
+	}
+	renderBody() {
 		const layers = this.app?.layers;
-		if (!layers) return html``;
+		if (!layers) return nothing;
 		return html`
       ${this.renderRows(layers)}
       <button
@@ -204,5 +211,5 @@ var PcLayersMenu = class extends PcElement {
     `;
 	}
 };
-defineElement("pc-layers-menu", PcLayersMenu);
-export { PcLayersMenu, dropSlot, isInside };
+defineElement("pc-panel-layers", PcPanelLayers);
+export { PcPanelLayers, dropSlot, isInside };

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

@@ -0,0 +1,3 @@
+// src/ui/elements/PcPanelLayers/style.css?inline
+var style_default = "/* \"New Layer\": a full-width purple pill */\nbutton.new {\n  width: 100%;\n  min-height: 40px;\n}\n/* Where a dragged layer would land: a full-width block with its name, as tall as the row (set by the menu) */\n.ghost {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  border: 2px dashed;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* Dropping a dragged layer here duplicates it (highlighted for touch, where there is no \"+\" cursor) */\nbutton.new.drop-target {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n/* For screen readers only */\n.announcement {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n";
+export { style_default as default };

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

@@ -1,8 +1,30 @@
 import { type PropertyValues } from "lit";
 import { PcElement } from "../../base";
+/** Height of a popover's arrow (pixels) */
+export declare const POPOVER_ARROW_SIZE = 8;
+/** Space kept between a placed popover and the window's edges (pixels) */
+export declare const POPOVER_MARGIN = 8;
+/**
+ * Where a popover goes under its anchor: centred below it (leaving room for the arrow), moved sideways as far as needed
+ * to stay in the window, with its arrow still pointing at the anchor's centre (`arrowX`, from the popover's left).
+ *
+ * @example
+ * popoverBelow({ left: 100, bottom: 40, width: 40 }, 200, 1000); // { left: 20, top: 48, arrowX: 100 }
+ * popoverBelow({ left: 0, bottom: 40, width: 40 }, 200, 1000); // { left: 8, top: 48, arrowX: 12 }
+ */
+export declare const popoverBelow: (anchor: {
+    left: number;
+    bottom: number;
+    width: number;
+}, popoverWidth: number, viewportWidth: number, margin?: number) => {
+    left: number;
+    top: number;
+    arrowX: number;
+};
 /**
  * A floating box for a menu or settings (e.g. the brush presets), shown while `open`. The implementer places it (e.g.
- * next to the button that opens it). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
+ * next to the button that opens it), or `placeBelow` puts it under its `anchor`. With `arrow`, an arrow on its top edge
+ * points up at the anchor (at `--pc-popover-arrow-x` from its left, the middle by default). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
  * `pc-close`, and the implementer sets `open` to false in response. Focus moves into it when it opens.
  *
  * @example
@@ -20,6 +42,10 @@ export declare class PcPopover extends PcElement {
         anchor: {
             attribute: boolean;
         };
+        arrow: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -37,8 +63,20 @@ export declare class PcPopover extends PcElement {
     label: string;
     /** The element that opens it (pressing it doesn't count as pressing outside) */
     anchor?: Element;
+    /** Whether an arrow on its top edge points up at the anchor */
+    arrow: boolean;
     private readonly onPointerDown;
     constructor();
+    /**
+     * Put the popover under its anchor, in the window (see `popoverBelow`), with its arrow pointing at the anchor. Call it
+     * once open, so it can be measured.
+     *
+     * @example
+     * popover.open = true;
+     * await popover.updateComplete;
+     * popover.placeBelow();
+     */
+    placeBelow(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: PropertyValues<this>): void;

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

@@ -1,9 +1,34 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import { markDismissingPress } from "../../dismiss/index.js";
 import { css, html } from "lit";
 // src/ui/elements/PcPopover/index.ts
+/** Height of a popover's arrow (pixels) */
+var POPOVER_ARROW_SIZE = 8;
+/** Side of the square turned 45° that makes the arrow (its diagonal is about twice the arrow's height) */
+var ARROW_SQUARE = Math.round(8 * Math.SQRT2);
+/** Space kept between a placed popover and the window's edges (pixels) */
+var POPOVER_MARGIN = 8;
+/**
+* Where a popover goes under its anchor: centred below it (leaving room for the arrow), moved sideways as far as needed
+* to stay in the window, with its arrow still pointing at the anchor's centre (`arrowX`, from the popover's left).
+*
+* @example
+* popoverBelow({ left: 100, bottom: 40, width: 40 }, 200, 1000); // { left: 20, top: 48, arrowX: 100 }
+* popoverBelow({ left: 0, bottom: 40, width: 40 }, 200, 1000); // { left: 8, top: 48, arrowX: 12 }
+*/
+var popoverBelow = (anchor, popoverWidth, viewportWidth, margin = 8) => {
+	const centre = anchor.left + anchor.width / 2;
+	const left = Math.max(margin, Math.min(centre - popoverWidth / 2, viewportWidth - margin - popoverWidth));
+	return {
+		left,
+		top: anchor.bottom + 8,
+		arrowX: centre - left
+	};
+};
 /**
 * A floating box for a menu or settings (e.g. the brush presets), shown while `open`. The implementer places it (e.g.
-* next to the button that opens it). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
+* next to the button that opens it), or `placeBelow` puts it under its `anchor`. With `arrow`, an arrow on its top edge
+* points up at the anchor (at `--pc-popover-arrow-x` from its left, the middle by default). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
 * `pc-close`, and the implementer sets `open` to false in response. Focus moves into it when it opens.
 *
 * @example
@@ -17,7 +42,11 @@ var PcPopover = class extends PcElement {
 			reflect: true
 		},
 		label: { type: String },
-		anchor: { attribute: false }
+		anchor: { attribute: false },
+		arrow: {
+			type: Boolean,
+			reflect: true
+		}
 	};
 	static styles = [PcElement.styles, css`
       :host {
@@ -32,6 +61,7 @@ var PcPopover = class extends PcElement {
         max-height: inherit;
         overflow: auto;
         padding: var(--pc-space-2);
+        border: 1px solid var(--pc-border);
         border-radius: var(--pc-radius);
         background: var(--pc-surface-raised);
         color: var(--pc-text);
@@ -39,6 +69,22 @@ var PcPopover = class extends PcElement {
         font-family: var(--pc-font);
         font-size: var(--pc-font-size);
       }
+      /* A square turned 45° with its top corner showing, outlined like the popover */
+      :host([arrow])::before {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        top: -${ARROW_SQUARE / 2}px;
+        left: var(--pc-popover-arrow-x, 50%);
+        width: ${ARROW_SQUARE}px;
+        height: ${ARROW_SQUARE}px;
+        box-sizing: border-box;
+        border: 1px solid var(--pc-border);
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+        background: var(--pc-surface-raised);
+        transform: translateX(-50%) rotate(45deg);
+      }
       [role="dialog"]:focus-visible {
         outline: var(--pc-focus-width) solid var(--pc-focus);
       }
@@ -46,12 +92,34 @@ var PcPopover = class extends PcElement {
 	onPointerDown = (event) => {
 		if (!this.open) return;
 		const path = event.composedPath();
-		if (!path.includes(this) && !(this.anchor && path.includes(this.anchor))) emit(this, "pc-close");
+		if (path.includes(this) || this.anchor && path.includes(this.anchor)) return;
+		markDismissingPress(event);
+		emit(this, "pc-close");
 	};
 	constructor() {
 		super();
 		this.open = false;
 		this.label = "";
+		this.arrow = false;
+	}
+	/**
+	* Put the popover under its anchor, in the window (see `popoverBelow`), with its arrow pointing at the anchor. Call it
+	* once open, so it can be measured.
+	*
+	* @example
+	* popover.open = true;
+	* await popover.updateComplete;
+	* popover.placeBelow();
+	*/
+	placeBelow() {
+		if (!this.anchor) return;
+		const { left, top, arrowX } = popoverBelow(this.anchor.getBoundingClientRect(), this.offsetWidth, window.innerWidth);
+		Object.assign(this.style, {
+			position: "fixed",
+			left: `${left}px`,
+			top: `${top}px`
+		});
+		this.style.setProperty("--pc-popover-arrow-x", `${arrowX}px`);
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -83,4 +151,4 @@ var PcPopover = class extends PcElement {
 	}
 };
 defineElement("pc-popover", PcPopover);
-export { PcPopover };
+export { POPOVER_ARROW_SIZE, POPOVER_MARGIN, PcPopover, popoverBelow };

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

@@ -0,0 +1,69 @@
+import { nothing } from "lit";
+import { PcElement } from "../../base";
+import { type KeyCombo } from "../../../lib/utils/shortcuts";
+import type { ShortcutChangeResult } from "../../../lib/classes/ShortcutSettings";
+/** Keyboard shortcut settings `pc-shortcut-settings` can change: PaintCanvas's `ShortcutSettings`, or anything like it */
+export interface ShortcutSettingsLike extends EventTarget {
+    combo(id: string): KeyCombo | null;
+    set(id: string, combo: KeyCombo | null): ShortcutChangeResult;
+    reset(): void;
+}
+/**
+ * Every keyboard shortcut action and its key combination, in groups. A configurable action's key combination is changed
+ * by focusing its field and pressing the keys (the modifiers held show as they are pressed, e.g. `shift alt cmd ctrl
+ * g`); Tab and Escape aren't recorded, so they still move focus and close. Its ⨉ button removes it. A key combination
+ * another action has moves to this one; one a fixed action uses isn't set. Both are announced, and sent as
+ * `pc-toast`. Fixed actions (e.g. undo, and layer opacity on 1–0) are shown but can't be changed. "Reset" goes back to
+ * the default key combinations.
+ *
+ * @example
+ * html`<pc-shortcut-settings .settings=${canvas.shortcuts}></pc-shortcut-settings>`
+ */
+export declare class PcShortcutSettings extends PcElement {
+    static properties: {
+        settings: {
+            attribute: boolean;
+        };
+        recording: {
+            state: boolean;
+        };
+        status: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The key combinations shown and changed */
+    settings?: ShortcutSettingsLike;
+    /** The action being recorded and the modifiers held so far */
+    recording?: {
+        id: string;
+        text: string;
+    };
+    /** The last change's message, for screen readers */
+    status: string;
+    private changes;
+    constructor();
+    /** A shortcut action's name in the chosen language */
+    private name;
+    /** Record the keys pressed in an action's field */
+    private onRecordKeyDown;
+    /** Show the key combination again once modifiers are let go without pressing a key */
+    private onRecordKeyUp;
+    /** Set or remove an action's key combination, saying what happened */
+    private change;
+    /** A configurable action's field and remove button */
+    private renderField;
+    /** A fixed action's key combinations */
+    private renderFixed;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

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

@@ -0,0 +1,273 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import { SHORTCUT_DEFINITIONS, comboFromEvent, comboText, heldModifiers } from "../../../lib/utils/shortcuts/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcShortcutSettings/index.ts
+/** Keys used to move through and leave the settings, which are never recorded */
+var PASSED_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape"]);
+/**
+* Translation key and values of a shortcut action's name.
+*
+* @example
+* actionName({ id: "layer-opacity-30", ... }); // ["paintCanvas.shortcuts.layerOpacity", { percent: 30 }]
+*/
+var actionName = ({ id, action }) => action.type === "layer-opacity" ? ["paintCanvas.shortcuts.layerOpacity", { percent: Math.round(action.opacity * 100) }] : [`paintCanvas.shortcuts.${id}`];
+/**
+* The shortcut actions in groups, in the order they are listed.
+*/
+var groups = () => {
+	const grouped = /* @__PURE__ */ new Map();
+	for (const definition of SHORTCUT_DEFINITIONS) grouped.set(definition.group, [...grouped.get(definition.group) ?? [], definition]);
+	return [...grouped];
+};
+/**
+* Every keyboard shortcut action and its key combination, in groups. A configurable action's key combination is changed
+* by focusing its field and pressing the keys (the modifiers held show as they are pressed, e.g. `shift alt cmd ctrl
+* g`); Tab and Escape aren't recorded, so they still move focus and close. Its ⨉ button removes it. A key combination
+* another action has moves to this one; one a fixed action uses isn't set. Both are announced, and sent as
+* `pc-toast`. Fixed actions (e.g. undo, and layer opacity on 1–0) are shown but can't be changed. "Reset" goes back to
+* the default key combinations.
+*
+* @example
+* html`<pc-shortcut-settings .settings=${canvas.shortcuts}></pc-shortcut-settings>`
+*/
+var PcShortcutSettings = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		settings: { attribute: false },
+		recording: { state: true },
+		status: { state: true }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-3);
+        color: var(--pc-text);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      section {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: var(--pc-space-1) var(--pc-space-2);
+        align-items: center;
+      }
+      h3 {
+        grid-column: 1 / -1;
+        margin: 0;
+        padding-bottom: var(--pc-space-1);
+        border-bottom: 1px solid var(--pc-border);
+        font-size: inherit;
+      }
+      .keys {
+        display: flex;
+        gap: var(--pc-space-1);
+        align-items: center;
+        justify-content: flex-end;
+      }
+      .combo {
+        box-sizing: border-box;
+        width: 11em;
+        min-height: var(--pc-control-size);
+        padding: var(--pc-space-1) var(--pc-space-2);
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface);
+        color: var(--pc-text);
+        font: inherit;
+        font-variant-numeric: tabular-nums;
+      }
+      input.combo {
+        cursor: pointer;
+      }
+      input.combo:focus {
+        border-color: var(--pc-accent);
+      }
+      input.combo:focus-visible,
+      button:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 1px;
+      }
+      /* Fixed key combinations: shown like the fields, but muted */
+      span.combo {
+        display: inline-flex;
+        align-items: center;
+        margin-right: calc(var(--pc-control-size) + var(--pc-space-1));
+        background: var(--pc-bar);
+        color: var(--pc-text-muted);
+      }
+      button.remove {
+        width: var(--pc-control-size);
+        height: var(--pc-control-size);
+        padding: 0;
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface);
+        color: var(--pc-text);
+        font: inherit;
+        cursor: pointer;
+      }
+      button.remove:hover:not(:disabled) {
+        background: var(--pc-surface-hover);
+      }
+      button.remove:disabled {
+        opacity: 0.4;
+        cursor: default;
+      }
+      .status:empty {
+        display: none;
+      }
+      /* Stays in view at the bottom of a scrolling window, where toasts may be hidden behind it */
+      .status {
+        position: sticky;
+        bottom: 0;
+        margin: 0;
+        padding: var(--pc-space-2);
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface-raised);
+        box-shadow: var(--pc-shadow);
+      }
+      button.reset {
+        align-self: flex-start;
+        min-height: var(--pc-control-size);
+        padding: var(--pc-space-1) var(--pc-space-3);
+        border: 0;
+        border-radius: var(--pc-radius-pill);
+        background: var(--pc-accent);
+        color: var(--pc-accent-text);
+        font: inherit;
+        font-weight: bold;
+        cursor: pointer;
+      }
+    `];
+	changes = new ChangeController(this, () => [this.settings]);
+	constructor() {
+		super();
+		this.status = "";
+	}
+	/** A shortcut action's name in the chosen language */
+	name(definition) {
+		const [key, values] = actionName(definition);
+		return this.t(key, values);
+	}
+	/** Record the keys pressed in an action's field */
+	onRecordKeyDown(event, id) {
+		if (PASSED_KEYS.has(event.key)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const combo = comboFromEvent(event);
+		if (!combo) {
+			this.recording = {
+				id,
+				text: comboText(heldModifiers(event))
+			};
+			return;
+		}
+		this.recording = void 0;
+		this.change(id, combo);
+	}
+	/** Show the key combination again once modifiers are let go without pressing a key */
+	onRecordKeyUp(event) {
+		if (!this.recording) return;
+		const text = comboText(heldModifiers(event));
+		this.recording = text ? {
+			...this.recording,
+			text
+		} : void 0;
+	}
+	/** Set or remove an action's key combination, saying what happened */
+	change(id, combo) {
+		const result = this.settings.set(id, combo);
+		const definition = (id) => SHORTCUT_DEFINITIONS.find((each) => each.id === id);
+		const keys = combo ? comboText(combo) : "";
+		const message = result.fixed ? this.t("paintCanvas.shortcuts.fixedUsed", {
+			keys,
+			action: this.name(definition(result.fixed))
+		}) : result.movedFrom ? this.t("paintCanvas.shortcuts.moved", {
+			keys,
+			from: this.name(definition(result.movedFrom)),
+			to: this.name(definition(id))
+		}) : "";
+		this.status = message;
+		if (message) emit(this, "pc-toast", {
+			message,
+			kind: "info"
+		});
+	}
+	/** A configurable action's field and remove button */
+	renderField(settings, definition) {
+		const { id } = definition;
+		const combo = settings.combo(id);
+		const name = this.name(definition);
+		const recording = this.recording?.id === id ? this.recording : void 0;
+		return html`<span class="keys">
+      <input
+        class="combo"
+        id="combo-${id}"
+        data-id=${id}
+        readonly
+        autocomplete="off"
+        aria-description=${this.t("paintCanvas.shortcuts.recordHint")}
+        placeholder=${this.t("paintCanvas.shortcuts.none")}
+        .value=${recording ? recording.text : combo ? comboText(combo) : ""}
+        @keydown=${(e) => this.onRecordKeyDown(e, id)}
+        @keyup=${this.onRecordKeyUp}
+        @blur=${() => this.recording = void 0}
+      />
+      <button
+        type="button"
+        class="remove"
+        data-id=${id}
+        title=${this.t("paintCanvas.shortcuts.remove", { action: name })}
+        aria-label=${this.t("paintCanvas.shortcuts.remove", { action: name })}
+        ?disabled=${!combo}
+        @click=${() => this.change(id, null)}
+      >
+        ⨉
+      </button>
+    </span>`;
+	}
+	/** A fixed action's key combinations */
+	renderFixed(definition) {
+		return html`<span class="keys">
+      <span
+        class="combo"
+        id="combo-${definition.id}"
+        data-id=${definition.id}
+        role="note"
+        aria-labelledby="name-${definition.id}"
+        aria-description=${this.t("paintCanvas.shortcuts.fixed")}
+        >${definition.combos.map((combo) => comboText(combo)).join(", ")}</span
+      >
+    </span>`;
+	}
+	render() {
+		const settings = this.settings;
+		if (!settings) return nothing;
+		return html`${groups().map(([group, definitions]) => html`<section aria-labelledby="group-${group}">
+            <h3 id="group-${group}">
+              ${this.t(`paintCanvas.shortcuts.group.${group}`)}
+            </h3>
+            ${definitions.map((definition) => definition.configurable ? html`<label for="combo-${definition.id}"
+                      >${this.name(definition)}</label
+                    >${this.renderField(settings, definition)}` : html`<span id="name-${definition.id}"
+                      >${this.name(definition)}</span
+                    >${this.renderFixed(definition)}`)}
+          </section>`)}
+      <p class="status" role="status">${this.status}</p>
+      <button
+        type="button"
+        class="reset"
+        @click=${() => {
+			settings.reset();
+			this.status = this.t("paintCanvas.shortcuts.wasReset");
+		}}
+      >
+        ${this.t("paintCanvas.shortcuts.reset")}
+      </button>`;
+	}
+};
+defineElement("pc-shortcut-settings", PcShortcutSettings);
+export { PcShortcutSettings };

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

@@ -1,25 +1,19 @@
 import { PcElement } from "../../base";
 import type { IconName } from "../../icons";
+import { THEMES, isTheme, type Theme, type UiSettingsLike } from "../../../lib/classes/UiSettings";
 import "../PcButtonGroup";
-/** The themes to pick from: light, dark, or following the device (auto) */
-export declare const THEMES: readonly ["light", "dark", "auto"];
-export type Theme = (typeof THEMES)[number];
+export { THEMES, isTheme, type Theme };
 /** Each theme's icon */
 export declare const THEME_ICONS: Readonly<Record<Theme, IconName>>;
 /**
- * Whether a value is one of the themes.
- *
- * @example
- * isTheme("dark"); // true
- * isTheme(undefined); // false
- */
-export declare const isTheme: (value: unknown) => value is Theme;
-/**
- * Picks the light, dark or automatic theme (which follows the device), as a labelled group of three radios joined into
+ * Picks the light, dark or system theme (which follows the device's), as a labelled group of three radios joined into
  * one pill (a joined `<pc-button-group>`), each with its icon (sun, moon and star) and name; the picked one is purple.
- * Shows the theme of its `target` (the page's root element by default; light unless it has another), and sets the
+ * Shows the theme of its `target` (the page's root element by default; system unless it has another), and sets the
  * target's `data-pc-theme` when the user picks one, firing `change` (detail: the theme).
  *
+ * With `settings` (e.g. the canvas's `ui`), it shows and keeps the theme there instead, and sets the target's theme
+ * whenever theirs changes (e.g. when restored), so it's kept with the other app settings.
+ *
  * @example
  * html`<pc-theme-picker @change=${(e) => save(e.detail)}></pc-theme-picker>`
  */
@@ -29,6 +23,9 @@ export declare class PcThemePicker extends PcElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        settings: {
+            attribute: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -41,15 +38,20 @@ export declare class PcThemePicker extends PcElement {
     theme: Theme;
     /** The element whose `data-pc-theme` is shown and set (the page's root element by default) */
     target?: HTMLElement;
+    /** Where the theme is kept, if anywhere (e.g. the canvas's `ui`) */
+    settings?: UiSettingsLike;
+    private changes;
     constructor();
     connectedCallback(): void;
+    /** Show the kept theme, and set it on the target */
+    protected willUpdate(): void;
     /** The element whose theme is shown and set */
     private get themeTarget();
     /**
-     * Pick a theme: show it, set it on the target and tell listeners.
+     * Pick a theme: show it, keep it in the settings (if any), set it on the target and tell listeners.
      *
      * @example
-     * picker.pick("auto");
+     * picker.pick("system");
      */
     pick(theme: Theme): void;
     render(): import("lit").TemplateResult<1>;