@lvl99dotcom/paintcanvas 0.3.1 → 0.4.0

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

@@ -4,23 +4,28 @@ 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 from "../../../lib/storage/index.js";
+import IndexedDbLayerStore, { IndexedDbSettingsStore } 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";
 import { renderScreenshot, saveFile, screenshotName } from "../../../lib/rendering/screenshot/index.js";
 import { DEFAULT_SIDE_MODES, STATE_EVENT, parseSideModes, sideModeFor } from "../../layout/index.js";
 import { hasToolSettings } from "../PcToolSettings/index.js";
 import "../PcPanel/index.js";
+import { PANE_COLLAPSE_EVENT, PcPane } from "../PcPane/index.js";
 import "../PcToolbar/index.js";
 import "../PcCanvas/index.js";
 import "../PcCanvasMap/index.js";
-import "../PcBrushMenu/index.js";
-import "../PcLayersMenu/index.js";
+import "../PcPanelBrushes/index.js";
+import "../PcPanelLayers/index.js";
 import "../PcBrushConfig/index.js";
 import "../PcStats/index.js";
+import "../PcPanelColours/index.js";
 import "../PcDialog/index.js";
 import { html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PaintCanvas/index.ts
+/** The sides */
+var SIDES = ["left", "right"];
 /** No space kept clear */
 var NO_INSETS = {
 	top: 0,
@@ -30,29 +35,28 @@ var NO_INSETS = {
 };
 /** The choice that takes the drawing over from another window */
 var TAKE_OVER_CHOICE = "take-over";
-/** Elements that can take keyboard focus */
-var FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
 /**
 * A ready-made painting app: the drawing elements arranged around the canvas, sized to its container (not the
 * window), with slots to add or replace content:
 *
 * - `header`: across the top (empty by default)
-* - `left`: `<pc-toolbar>` by default
-* - `top`: `<pc-tool-settings>` (for tools that have settings) by default
-* - `right`: empty by default (e.g. a `<pc-panel>` with a layers menu or chat)
+* - `left`: `<pc-toolbar>` (a pane) by default
+* - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) 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
 * - `bottom`: under the canvas (empty by default)
 * - `footer`: across the bottom; `<pc-stats>` by default
-* - `menu`: the app menu the toolbar's menu button opens (the button shows only with a menu)
+* - `menu`: the app menu the toolbar's menu button opens, shown in a `<pc-panel>` (the button shows only with a menu)
 *
 * Content given for a slot replaces its default; an empty element clears it. Empty slots take no space. Hiding the
-* interface (Tab key) leaves only the canvas and overlay. A `<pc-layers-menu>` given in a side (e.g. in a `<pc-panel>`)
-* replaces the toolbar's layers menu button.
+* interface (Tab key) leaves only the canvas and overlay. While a side has a `<pc-panel-layers>` (as the right side
+* 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"`): `docked` beside the canvas; `rail`, a column of buttons (one per `<pc-panel>`) that open each panel over
-* the canvas; or `floating`, the side over the canvas as a palette that collapses to a button.
+* rail@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; or `floating`, the pane over the canvas as a
+* box that collapses to a button. Give side content in a `<pc-pane>` to have it follow the side's mode.
 *
 * Reports its state for styling as attributes (`narrow`, `input="pen|touch|mouse"`, `ui-hidden`, `left-mode`,
 * `right-mode`) and as `pc-state-change` events (see `LayoutState`). Creates its own canvas unless given one, and
@@ -62,10 +66,16 @@ var FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabind
 * reloading the page (see `LayerAutosave`). While another window is drawing on it, the layout is blocked by a message
 * 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 and
+* colours) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
+*
 * @example
 * html`<paint-canvas style="height: 600px"></paint-canvas>`
 * html`<paint-canvas .app=${canvas} right-modes="docked, rail@800">
-*   <pc-panel slot="right" icon="layers" label="Layers"><pc-layers-menu .app=${canvas}></pc-layers-menu></pc-panel>
+*   <pc-pane slot="right">
+*     <pc-panel-layers .app=${canvas}></pc-panel-layers>
+*     <pc-panel icon="chat" label="Chat"><my-chat></my-chat></pc-panel>
+*   </pc-pane>
 * </paint-canvas>`
 */
 var PaintCanvasElement = class extends PcElement {
@@ -94,11 +104,13 @@ var PaintCanvasElement = class extends PcElement {
 		},
 		shortcuts: { type: Boolean },
 		store: { type: String },
+		settingsStore: {
+			type: String,
+			attribute: "settings-store"
+		},
 		width: { state: true },
 		input: { state: true },
-		configuring: { state: true },
-		collapsed: { state: true },
-		openPanel: { state: true }
+		configuring: { state: true }
 	};
 	static styles = [PcElement.styles, unsafeCSS(style_default)];
 	/** Saves files (replaceable for tests) */
@@ -108,13 +120,10 @@ var PaintCanvasElement = class extends PcElement {
 	ownAutosave;
 	/** The autosave whose errors are shown */
 	watchedAutosave;
+	/** Keeps the app settings under the `settings-store` name, if any */
+	ownSettingsAutosave;
 	/** Whether drawing was blocked when shortcuts were last watched */
 	blockedShortcuts = false;
-	/** The panels in each side's slot */
-	panels = {
-		left: [],
-		right: []
-	};
 	/** Whether each side's slot has a layers menu (the toolbar's isn't needed then) */
 	sideLayers = {
 		left: false,
@@ -130,12 +139,9 @@ var PaintCanvasElement = class extends PcElement {
 	reported;
 	/** Space the floating sides cover over the canvas */
 	floatingInsets = NO_INSETS;
-	/** The rail button that opened the open panel, to return focus to */
-	opener;
 	resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(([entry]) => {
 		this.width = Math.round(entry?.contentRect.width ?? 0);
 	}) : void 0;
-	panelObserver = new MutationObserver(() => this.requestUpdate());
 	onPointerDown = (event) => {
 		const kind = event.pointerType;
 		this.input = kind === "pen" || kind === "touch" ? kind : "mouse";
@@ -144,20 +150,15 @@ var PaintCanvasElement = class extends PcElement {
 		message: this.t("paintCanvas.autosave.failed"),
 		kind: "error"
 	});
+	onSettingsAutosaveError = () => emit(this, "pc-toast", {
+		message: this.t("paintCanvas.settings.saveFailed"),
+		kind: "error"
+	});
 	onShortcut = (event) => {
 		if (event.detail.type === "save") this.saveScreenshot();
 	};
-	onDocumentPointerDown = (event) => {
-		const panel = this.openPanel;
-		if (!panel) return;
-		const path = event.composedPath();
-		if (!path.includes(panel) && !(this.opener && path.includes(this.opener))) this.closePanel(false);
-	};
-	onKeyDown = (event) => {
-		if (event.key !== "Escape" || !this.openPanel) return;
-		event.preventDefault();
-		this.closePanel(true);
-	};
+	onDocumentPointerDown = (event) => this.closePaletteOutside(event.composedPath());
+	onPaneCollapse = () => this.requestUpdate();
 	constructor() {
 		super();
 		this.leftModes = DEFAULT_SIDE_MODES;
@@ -167,10 +168,6 @@ var PaintCanvasElement = class extends PcElement {
 		this.shortcuts = true;
 		this.width = 0;
 		this.input = isTouchDevice() ? "touch" : "mouse";
-		this.collapsed = {
-			left: true,
-			right: true
-		};
 	}
 	/** Whether another window is drawing on the stored drawing, so this one is blocked */
 	get blocked() {
@@ -195,36 +192,25 @@ var PaintCanvasElement = class extends PcElement {
 		this.app ??= new PaintCanvas();
 		super.connectedCallback();
 		this.resizeObserver?.observe(this);
-		this.panelObserver.observe(this, {
-			subtree: true,
-			attributes: true,
-			attributeFilter: [
-				"icon",
-				"label",
-				"badge"
-			]
-		});
 		this.addEventListener("pointerdown", this.onPointerDown, true);
-		this.addEventListener("keydown", this.onKeyDown);
+		this.addEventListener(PANE_COLLAPSE_EVENT, this.onPaneCollapse);
 		document.addEventListener("pointerdown", this.onDocumentPointerDown, true);
 		this.watchShortcuts();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.resizeObserver?.disconnect();
-		this.panelObserver.disconnect();
 		this.removeEventListener("pointerdown", this.onPointerDown, true);
-		this.removeEventListener("keydown", this.onKeyDown);
+		this.removeEventListener(PANE_COLLAPSE_EVENT, this.onPaneCollapse);
 		document.removeEventListener("pointerdown", this.onDocumentPointerDown, true);
 		this.unwatchShortcuts();
 	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		if (changed.has("app") || changed.has("store")) this.useStore(changed.get("app"));
+		if (changed.has("app") || changed.has("settingsStore")) this.useSettingsStore();
 		this.watchAutosaveErrors();
 		if (this.isConnected && (changed.has("app") || changed.has("shortcuts") || this.blocked !== this.blockedShortcuts)) this.watchShortcuts();
-		const panel = this.openPanel;
-		if (panel && this.modeOf(this.sideOf(panel)) !== "rail") this.closePanel(false);
 	}
 	updated() {
 		const state = this.state;
@@ -238,11 +224,25 @@ var PaintCanvasElement = class extends PcElement {
 			this.reported = report;
 			this.dispatchEvent(new CustomEvent(STATE_EVENT, { detail: state }));
 		}
+		this.setPaneModes();
 		this.measureFloatingSides();
 	}
+	/** The panes in a side: the default one, or those given for it */
+	panesIn(side) {
+		const slot = this.renderRoot.querySelector(`slot[name="${side}"]`);
+		const given = slot.assignedElements();
+		return (given.length ? given : [...slot.children]).filter((element) => element instanceof PcPane);
+	}
+	/** Show each side's panes in the side's mode, facing the canvas */
+	setPaneModes() {
+		for (const side of SIDES) for (const pane of this.panesIn(side)) {
+			pane.mode = this.modeOf(side);
+			pane.edge = side;
+		}
+	}
 	/** Keep the canvas clear of floating sides when fitting it */
 	measureFloatingSides() {
-		const width = (side) => this.renderRoot.querySelector(`.side.${side} .float:not(.collapsed)`)?.getBoundingClientRect().width ?? 0;
+		const width = (side) => this.panesIn(side).filter((pane) => pane.mode === "floating" && !pane.collapsed).reduce((widest, pane) => Math.max(widest, pane.getBoundingClientRect().width), 0);
 		const insets = {
 			...NO_INSETS,
 			left: width("left"),
@@ -267,6 +267,20 @@ var PaintCanvasElement = class extends PcElement {
 		}
 		if (app.autosave?.store.name !== name) this.ownAutosave = app.useLayerStore(new IndexedDbLayerStore(name));
 	}
+	/** Keeps the app settings under the `settings-store` name, if any (e.g. to wait until they are restored with `ready`) */
+	get settingsAutosave() {
+		return this.ownSettingsAutosave;
+	}
+	/**
+	* Keep the canvas's app settings under the `settings-store` name, stopping the previous settings autosave (which
+	* saves any change waiting to be saved).
+	*/
+	useSettingsStore() {
+		this.ownSettingsAutosave?.stop();
+		const name = this.settingsStore || void 0;
+		this.ownSettingsAutosave = name === void 0 ? void 0 : new SettingsAutosave(this.app, new IndexedDbSettingsStore(name));
+		this.ownSettingsAutosave?.addEventListener(SETTINGS_AUTOSAVE_ERROR_EVENT, this.onSettingsAutosaveError);
+	}
 	/** Show errors from the canvas's current autosave */
 	watchAutosaveErrors() {
 		const autosave = this.app?.autosave;
@@ -339,40 +353,6 @@ var PaintCanvasElement = class extends PcElement {
 			}
 		};
 	}
-	/** Which side a panel is in */
-	sideOf(panel) {
-		return panel.slot === "left" ? "left" : "right";
-	}
-	/**
-	* Open a panel from its rail button (closing any other), or close it if it's open. Focus moves into the panel.
-	*/
-	togglePanel(panel, opener) {
-		if (this.openPanel === panel) {
-			this.closePanel(true);
-			return;
-		}
-		if (this.openPanel) this.closePanel(false);
-		this.openPanel = panel;
-		this.opener = opener;
-		panel.toggleAttribute("data-pc-open", true);
-		const focusable = panel.querySelector(FOCUSABLE);
-		if (focusable) focusable.focus();
-		else {
-			panel.tabIndex = -1;
-			panel.focus();
-		}
-	}
-	/**
-	* Close the panel open from a rail, moving focus back to its rail button if asked.
-	*/
-	closePanel(returnFocus) {
-		const panel = this.openPanel;
-		if (!panel) return;
-		panel.removeAttribute("data-pc-open");
-		this.openPanel = void 0;
-		if (returnFocus) this.opener?.focus();
-		this.opener = void 0;
-	}
 	/** Follow which slots have content given (their defaults aren't needed) */
 	onSlotChange(event) {
 		const slot = event.target;
@@ -388,16 +368,12 @@ var PaintCanvasElement = class extends PcElement {
       >${this.filled[name] ? nothing : fallback}</slot
     >`;
 	}
-	/** Follow the panels given for a side, and whether it has a layers menu */
+	/** Follow whether a side given content has a layers menu */
 	onSideSlotChange(side, event) {
 		const assigned = event.target.assignedElements();
-		this.panels = {
-			...this.panels,
-			[side]: assigned.filter((element) => element.localName === "pc-panel")
-		};
 		this.sideLayers = {
 			...this.sideLayers,
-			[side]: assigned.some((element) => element.matches("pc-layers-menu, :has(pc-layers-menu)"))
+			[side]: assigned.some((element) => element.matches("pc-panel-layers, :has(pc-panel-layers)"))
 		};
 		this.onSlotChange(event);
 	}
@@ -408,99 +384,70 @@ var PaintCanvasElement = class extends PcElement {
 	}
 	/** Whether a side has a layers menu, replacing the toolbar's */
 	get layersInSide() {
-		return this.sideLayers.left || this.sideLayers.right;
+		return this.sideLayers.left || this.sideLayers.right || !this.filled.right;
 	}
-	/** The toolbar shown on the left unless the implementer gives other content */
-	renderToolbar(app) {
-		return html`<pc-toolbar
-      .app=${app}
-      .menu=${this.hasMenu}
-      .layers=${!this.layersInSide}
-      .menuText=${this.menuText}
-      .menuLabel=${this.menuLabel}
-    ></pc-toolbar>`;
-	}
-	/** A side's rail buttons, one per panel */
-	renderRail(side, label) {
-		const panels = this.panels[side];
-		if (panels.length === 0) return nothing;
-		return html`<div
-      class="rail"
-      part="${side}-rail"
-      role="toolbar"
-      aria-orientation="vertical"
-      aria-label=${label}
-    >
-      ${panels.map((panel) => html`<button
-            type="button"
-            title=${panel.label}
-            aria-label=${panel.badge ? this.t("paintCanvas.layout.new", { name: panel.label }) : panel.label}
-            aria-expanded=${String(this.openPanel === panel)}
-            @click=${(event) => this.togglePanel(panel, event.currentTarget)}
-          >
-            <img src=${this.iconUrl(panel.icon)} alt="" />
-            ${panel.badge ? html`<span class="badge"></span>` : nothing}
-          </button>`)}
-    </div>`;
-	}
-	/** A side, in its mode */
+	/** A side's default content: the toolbar on the left, and the layers on the right */
+	renderSideDefault(side, app, label) {
+		if (side === "left") return html`<pc-toolbar
+        .app=${app}
+        .menu=${this.hasMenu}
+        .layers=${!this.layersInSide}
+        .menuText=${this.menuText}
+        .menuLabel=${this.menuLabel}
+        label=${label}
+      ></pc-toolbar>`;
+		return html`<pc-pane label=${label}
+      ><pc-panel-layers slot="start" .app=${app}></pc-panel-layers
+    ></pc-pane>`;
+	}
+	/** A side: its panes, in its mode (set on them after rendering) */
 	renderSide(side, app, blocked) {
-		const mode = this.modeOf(side);
 		const label = this.t(side === "left" ? "paintCanvas.layout.tools" : "paintCanvas.layout.panels");
-		const slot = html`<slot
-      name=${side}
-      @slotchange=${(event) => this.onSideSlotChange(side, event)}
-      >${side === "left" && !this.filled.left ? this.renderToolbar(app) : nothing}</slot
-    >`;
-		let content = slot;
-		if (mode === "rail") content = side === "left" ? html`${slot}${this.renderRail(side, label)}` : html`${this.renderRail(side, label)}${slot}`;
-		else if (mode === "floating") {
-			const collapsed = this.collapsed[side];
-			const arrows = side === "left" ? ["»", "«"] : ["«", "»"];
-			content = html`<div
-        class=${collapsed ? "float collapsed" : "float"}
-        part="${side}-float"
-      >
-        <button
-          type="button"
-          class="collapse"
-          aria-expanded=${String(!collapsed)}
-          aria-label=${this.t(collapsed ? "paintCanvas.layout.show" : "paintCanvas.layout.hide", { name: label })}
-          @click=${() => this.collapsed = {
-				...this.collapsed,
-				[side]: !collapsed
-			}}
-        >
-          ${collapsed ? arrows[0] : arrows[1]}
-        </button>
-        <div class="content" ?hidden=${collapsed}>${slot}</div>
-      </div>`;
-		}
 		return html`<div
       class="side ${side}"
       part=${side}
-      data-mode=${mode}
+      data-mode=${this.modeOf(side)}
       role="region"
       aria-label=${label}
       ?inert=${blocked}
     >
-      ${content}
+      <slot
+        name=${side}
+        @slotchange=${(event) => this.onSideSlotChange(side, event)}
+        >${this.filled[side] ? nothing : this.renderSideDefault(side, app, label)}</slot
+      >
     </div>`;
 	}
+	/**
+	* Close the colour palette on a press outside it and the colours that open it.
+	*/
+	closePaletteOutside(path) {
+		const app = this.app;
+		if (app?.panel !== Panel.Palette) return;
+		if (!path.some((target) => target instanceof Element && (target.localName === "pc-panel-colours" || target.localName === "pc-colour-pair"))) app.closePanel();
+	}
 	/** The menus the toolbar opens, floating over the canvas beside it */
 	renderPanels(app) {
-		const brushMenu = (kind) => html`<pc-brush-menu
+		const brushMenu = (kind) => html`<pc-panel-brushes
         class="panel top-panel"
         kind=${kind}
         .app=${app}
         @pc-new-preset=${() => this.newPreset(kind)}
-      ></pc-brush-menu>`;
+      ></pc-panel-brushes>`;
 		return html`${app.panel === Panel.Brush ? brushMenu("brush") : nothing}
       ${app.panel === Panel.Eraser ? brushMenu("eraser") : nothing}
-      ${app.panel === Panel.Layers && !this.layersInSide ? html`<pc-layers-menu class="panel" .app=${app}></pc-layers-menu>` : nothing}
-      <div class="panel menu-panel" ?open=${app.panel === Panel.Menu}>
+      ${app.panel === Panel.Layers && !this.layersInSide ? html`<pc-panel-layers class="panel" .app=${app}></pc-panel-layers>` : nothing}
+      ${app.panel === Panel.Palette ? html`<pc-panel-colours
+              class="panel top-panel"
+              .app=${app}
+            ></pc-panel-colours>` : nothing}
+      <pc-panel
+        class="panel menu-panel"
+        label=${this.menuLabel || this.t("paintCanvas.toolbar.menu")}
+        ?open=${app.panel === Panel.Menu}
+      >
         <slot name="menu" @slotchange=${this.onMenuSlotChange}></slot>
-      </div>`;
+      </pc-panel>`;
 	}
 	/** The brush configuration window, while open */
 	renderConfig(app) {
@@ -549,10 +496,13 @@ var PaintCanvasElement = class extends PcElement {
         aria-label=${this.t("paintCanvas.layout.toolSettings")}
         ?inert=${blocked}
       >
-        ${this.slotWithDefault("top", showsToolSettings ? html`<pc-tool-settings
-                .app=${app}
-                @pc-configure-brush=${(event) => this.configure(event.detail)}
-              ></pc-tool-settings>` : nothing)}
+        ${this.slotWithDefault("top", showsToolSettings ? html`<pc-pane orientation="horizontal" edge="top"
+                ><pc-tool-settings
+                  slot="middle"
+                  .app=${app}
+                  @pc-configure-brush=${(event) => this.configure(event.detail)}
+                ></pc-tool-settings
+              ></pc-pane>` : nothing)}
       </div>
       <div
         class="center"

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PaintCanvas/style.css?inline
-var style_default = "/* The layout: header across the top, footer across the bottom, sides left and right, and between them the tool\n   settings, the canvas and the bottom bar. Empty areas take no space. */\n:host {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"header header header\" auto\n    \"left top right\" auto\n    \"left center right\" 1fr\n    \"left bottom right\" auto\n    \"footer footer footer\" auto / auto 1fr auto;\n  overflow: hidden;\n  background: var(--pc-bar);\n  font-family: var(--pc-font);\n  font-size: var(--pc-font-size);\n}\nheader {\n  grid-area: header;\n}\n.top {\n  grid-area: top;\n  min-width: 0;\n}\n.center {\n  position: relative;\n  grid-area: center;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n.bottom {\n  grid-area: bottom;\n  min-width: 0;\n}\nfooter {\n  grid-area: footer;\n}\n.side {\n  position: relative;\n  z-index: 3;\n  display: flex;\n  min-height: 0;\n}\n.side.left {\n  grid-area: left;\n}\n.side.right {\n  grid-area: right;\n}\n\n/* Hiding the interface (Tab key) leaves only the canvas */\n:host([ui-hidden]) header,\n:host([ui-hidden]) .top,\n:host([ui-hidden]) .bottom,\n:host([ui-hidden]) footer,\n:host([ui-hidden]) .side {\n  display: none;\n}\n\n/* The canvas fills the middle; things drawn over it go in the overlay */\n.center ::slotted([slot=\"center\"]),\n.center pc-canvas {\n  position: absolute;\n  inset: 0;\n}\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.overlay > * {\n  pointer-events: auto;\n}\npc-canvas-map {\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n}\n\n/* Menus opened from the toolbar float over the canvas, beside the toolbar */\n.panel {\n  position: absolute;\n  z-index: 4;\n  left: 0;\n  bottom: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n.panel.top-panel {\n  top: 0;\n  bottom: auto;\n}\n.menu-panel:not([open]) {\n  display: none;\n}\n\n/* Rail: a column of buttons, one per panel; the open panel floats over the canvas beside it */\n.rail {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pc-space-1);\n  padding: var(--pc-space-1);\n  border-inline: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n.rail button {\n  position: relative;\n  display: inline-flex;\n  padding: var(--pc-space-1);\n  border: 1px solid transparent;\n  border-radius: var(--pc-radius-small);\n  background: transparent;\n  cursor: pointer;\n}\n.rail button:hover {\n  background: var(--pc-surface-hover);\n}\n.rail button[aria-expanded=\"true\"] {\n  border-color: var(--pc-accent);\n  background: var(--pc-accent);\n}\n.rail button:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.rail img {\n  width: var(--pc-icon-size);\n  height: var(--pc-icon-size);\n  filter: var(--pc-icon-filter);\n}\n.rail .badge {\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  width: 10px;\n  height: 10px;\n  border: 2px solid var(--pc-bar);\n  border-radius: 50%;\n  background: var(--pc-red);\n}\n.side[data-mode=\"rail\"] ::slotted(pc-panel) {\n  display: none;\n}\n.side[data-mode=\"rail\"] ::slotted(pc-panel[data-pc-open]) {\n  position: absolute;\n  z-index: 5;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  width: var(--pc-floating-panel-width, min(360px, 85vw));\n  background: var(--pc-surface-raised);\n  box-shadow: var(--pc-shadow);\n}\n/* When narrow, a layers menu fills the panel opened from the rail (a floating side sizes itself to its content) */\n:host([narrow]) .side[data-mode=\"rail\"] ::slotted(pc-panel) {\n  --pc-layers-menu-width: 100%;\n}\n.side.left[data-mode=\"rail\"] ::slotted(pc-panel[data-pc-open]) {\n  left: 100%;\n}\n.side.right[data-mode=\"rail\"] ::slotted(pc-panel[data-pc-open]) {\n  right: 100%;\n}\n\n/* Floating: the side floats over the canvas as a palette, and collapses to a button */\n.side[data-mode=\"floating\"] {\n  /* Beside the canvas only, so it floats over the canvas and not the tool settings */\n  grid-row: 3;\n  width: 0;\n}\n.float {\n  position: absolute;\n  z-index: 5;\n  top: var(--pc-space-2);\n  bottom: var(--pc-space-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--pc-space-1);\n  max-width: var(--pc-floating-panel-width, min(360px, 85vw));\n  border-radius: var(--pc-radius);\n  background: var(--pc-surface-raised);\n  box-shadow: var(--pc-shadow);\n  overflow: hidden;\n}\n.side.left .float {\n  left: var(--pc-space-2);\n}\n.side.right .float {\n  right: var(--pc-space-2);\n}\n.float.collapsed {\n  bottom: auto;\n}\n.float .collapse {\n  align-self: flex-end;\n  min-width: var(--pc-control-size);\n  min-height: var(--pc-control-size);\n  border: 0;\n  background: transparent;\n  color: var(--pc-text);\n  font-size: 18px;\n  cursor: pointer;\n}\n.float .collapse:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.float .content {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n}\n.float .content[hidden] {\n  display: none;\n}\n\n/* While another window is drawing, its message covers only the layout (not the whole page) */\npc-dialog.elsewhere {\n  position: absolute;\n}\n";
+var style_default = "/* The layout: header across the top, footer across the bottom, sides left and right, and between them the tool\n   settings, the canvas and the bottom bar. Empty areas take no space. */\n:host {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"header header header\" auto\n    \"left top right\" auto\n    \"left center right\" 1fr\n    \"left bottom right\" auto\n    \"footer footer footer\" auto / auto 1fr auto;\n  overflow: hidden;\n  background: var(--pc-bar);\n  font-family: var(--pc-font);\n  font-size: var(--pc-font-size);\n}\nheader {\n  grid-area: header;\n}\n.top {\n  grid-area: top;\n  min-width: 0;\n}\n/* The tool settings fill the top pane */\n.top pc-tool-settings {\n  flex: 1;\n}\n.center {\n  position: relative;\n  grid-area: center;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n.bottom {\n  grid-area: bottom;\n  min-width: 0;\n}\nfooter {\n  grid-area: footer;\n}\n.side {\n  position: relative;\n  z-index: 3;\n  display: flex;\n  min-height: 0;\n}\n/* A side's panes fill it */\n.side pc-pane,\n.side pc-toolbar,\n.side ::slotted(*) {\n  flex: 1;\n}\n.side.left {\n  grid-area: left;\n}\n.side.right {\n  grid-area: right;\n}\n\n/* Hiding the interface (Tab key) leaves only the canvas */\n:host([ui-hidden]) header,\n:host([ui-hidden]) .top,\n:host([ui-hidden]) .bottom,\n:host([ui-hidden]) footer,\n:host([ui-hidden]) .side {\n  display: none;\n}\n\n/* The canvas fills the middle; things drawn over it go in the overlay */\n.center ::slotted([slot=\"center\"]),\n.center pc-canvas {\n  position: absolute;\n  inset: 0;\n}\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.overlay > * {\n  pointer-events: auto;\n}\npc-canvas-map {\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n}\n\n/* Menus opened from the toolbar float over the canvas, beside the toolbar */\n.panel {\n  position: absolute;\n  z-index: 4;\n  left: 0;\n  bottom: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n.panel.top-panel {\n  top: 0;\n  bottom: auto;\n}\n/* The app menu: the implementer's content in a panel */\n.menu-panel:not([open]) {\n  display: none;\n}\n\n/* Floating: the side's panes float over the canvas (see pc-pane), so the side takes no space */\n.side[data-mode=\"floating\"] {\n  /* Beside the canvas only, so it floats over the canvas and not the tool settings */\n  grid-row: 3;\n  width: 0;\n}\n/* While another window is drawing, its message covers only the layout (not the whole page) */\npc-dialog.elsewhere {\n  position: absolute;\n}\n";
 export { style_default as default };

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

@@ -0,0 +1,59 @@
+import { nothing, type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+import "../PcShortcutSettings";
+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
+ * `pc-shortcut-settings`), and "Import settings" and "Export settings", which read and write a settings JSON file (input
+ * settings, keyboard shortcuts, colour palette and colours). 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>`
+ */
+export declare class PcAppSettings extends PcElement {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        shortcutsOpen: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    app?: PaintCanvas;
+    /** Whether the keyboard shortcuts window is open */
+    shortcutsOpen: boolean;
+    /** Saves exported files (replaceable for tests) */
+    saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
+    constructor();
+    protected updated(changed: PropertyValues<this>): void;
+    /** Close the keyboard shortcuts window */
+    closeShortcuts(): void;
+    /**
+     * Import the settings in a settings file, using the parts it has.
+     */
+    importFile(file: File): Promise<void>;
+    /**
+     * Export the settings as a settings file.
+     */
+    exportFile(): Promise<void>;
+    /** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
+    private toastError;
+    /** The keyboard shortcuts window: a modal dialog, with its contents only while open */
+    private renderShortcuts;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}