@lvl99dotcom/paintcanvas 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,584 @@
+import style_default from "./style.js";
+import { PcElement, defineElement, emit } from "../../base/index.js";
+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 { 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 { html, nothing, unsafeCSS } from "lit";
+// src/ui/elements/PaintCanvas/index.ts
+/** No space kept clear */
+var NO_INSETS = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
+/** 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)
+* - `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)
+*
+* 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.
+*
+* 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.
+*
+* 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
+* handles keyboard shortcuts unless `shortcuts` is false.
+*
+* With a `store` name, the user's layers are kept in the browser (IndexedDB) under that name, so the drawing survives
+* 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.
+*
+* @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>
+* </paint-canvas>`
+*/
+var PaintCanvasElement = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false },
+		leftModes: {
+			type: String,
+			attribute: "left-modes"
+		},
+		rightModes: {
+			type: String,
+			attribute: "right-modes"
+		},
+		narrowWidth: {
+			type: Number,
+			attribute: "narrow-width"
+		},
+		menuText: {
+			type: String,
+			attribute: "menu-text"
+		},
+		menuLabel: {
+			type: String,
+			attribute: "menu-label"
+		},
+		shortcuts: { type: Boolean },
+		store: { type: String },
+		width: { state: true },
+		input: { state: true },
+		configuring: { state: true },
+		collapsed: { state: true },
+		openPanel: { state: true }
+	};
+	static styles = [PcElement.styles, unsafeCSS(style_default)];
+	/** Saves files (replaceable for tests) */
+	saveFile = saveFile;
+	changes = new ChangeController(this, () => [this.app, this.app?.autosave]);
+	/** The autosave the layout started for `store`, if any */
+	ownAutosave;
+	/** The autosave whose errors are shown */
+	watchedAutosave;
+	/** 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,
+		right: false
+	};
+	/** Whether the implementer gave a menu */
+	hasMenu = false;
+	/** Slots the implementer gave content for (their defaults aren't created) */
+	filled = {};
+	/** Keyboard shortcuts, while handled */
+	keys;
+	/** The state last reported, to report only changes */
+	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";
+	};
+	onAutosaveError = () => emit(this, "pc-toast", {
+		message: this.t("autosave.failed"),
+		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);
+	};
+	constructor() {
+		super();
+		this.leftModes = DEFAULT_SIDE_MODES;
+		this.rightModes = DEFAULT_SIDE_MODES;
+		this.narrowWidth = 600;
+		this.menuText = "☰";
+		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() {
+		return this.app?.autosave?.state === AutosaveState.Elsewhere;
+	}
+	/** The layout's state now (see `LayoutState`) */
+	get state() {
+		return {
+			width: this.width,
+			narrow: this.width < this.narrowWidth,
+			input: this.input,
+			uiHidden: this.app?.interfaceVisible === false,
+			leftMode: this.modeOf("left"),
+			rightMode: this.modeOf("right")
+		};
+	}
+	/** A side's mode for the layout's width */
+	modeOf(side) {
+		return sideModeFor(parseSideModes(side === "left" ? this.leftModes : this.rightModes), this.width);
+	}
+	connectedCallback() {
+		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);
+		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);
+		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"));
+		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;
+		this.toggleAttribute("narrow", state.narrow);
+		this.toggleAttribute("ui-hidden", state.uiHidden);
+		this.setAttribute("input", state.input);
+		this.setAttribute("left-mode", state.leftMode);
+		this.setAttribute("right-mode", state.rightMode);
+		const report = JSON.stringify(state);
+		if (report !== this.reported) {
+			this.reported = report;
+			this.dispatchEvent(new CustomEvent(STATE_EVENT, { detail: state }));
+		}
+		this.measureFloatingSides();
+	}
+	/** 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 insets = {
+			...NO_INSETS,
+			left: width("left"),
+			right: width("right")
+		};
+		if (insets.left === this.floatingInsets.left && insets.right === this.floatingInsets.right) return;
+		this.floatingInsets = insets;
+		this.requestUpdate();
+	}
+	/**
+	* Keep the canvas's layers under the `store` name, replacing an autosave the layout started earlier (also on the
+	* previous canvas). An autosave the implementer started is left alone when there's no name.
+	*/
+	useStore(previousApp) {
+		const app = this.app;
+		const own = this.ownAutosave;
+		if (own && previousApp?.autosave === own) previousApp.useLayerStore(void 0);
+		const name = this.store || void 0;
+		if (name === void 0) {
+			if (own && app.autosave === own) this.ownAutosave = app.useLayerStore(void 0);
+			return;
+		}
+		if (app.autosave?.store.name !== name) this.ownAutosave = app.useLayerStore(new IndexedDbLayerStore(name));
+	}
+	/** Show errors from the canvas's current autosave */
+	watchAutosaveErrors() {
+		const autosave = this.app?.autosave;
+		if (autosave === this.watchedAutosave) return;
+		this.watchedAutosave?.removeEventListener(AUTOSAVE_ERROR_EVENT, this.onAutosaveError);
+		this.watchedAutosave = autosave;
+		autosave?.addEventListener(AUTOSAVE_ERROR_EVENT, this.onAutosaveError);
+	}
+	/** Handle keyboard shortcuts for the current canvas, if asked to (not while blocked) */
+	watchShortcuts() {
+		this.unwatchShortcuts();
+		this.blockedShortcuts = this.blocked;
+		if (!this.shortcuts || !this.app || this.blockedShortcuts) return;
+		this.keys = new KeyboardShortcuts(this.app);
+		this.keys.attach(window);
+		window.addEventListener(SHORTCUT_EVENT, this.onShortcut);
+	}
+	/** Stop handling keyboard shortcuts */
+	unwatchShortcuts() {
+		this.keys?.detach();
+		this.keys = void 0;
+		window.removeEventListener(SHORTCUT_EVENT, this.onShortcut);
+	}
+	/**
+	* Save the whole canvas as a PNG on white, at full size, including a stroke or transform in progress. Returns how it
+	* was saved, or undefined if cancelled.
+	*/
+	async saveScreenshot() {
+		const app = this.app;
+		const blob = await renderScreenshot(app.drawables, app.width, app.height, app.transform.preview ?? app.strokes.preview);
+		return this.saveFile(blob, screenshotName(void 0, app.names.filePrefix));
+	}
+	/** The brush or eraser settings */
+	toolSettings(kind) {
+		const app = this.app;
+		return kind === "eraser" ? app.eraser : app.brush;
+	}
+	/**
+	* Open the configuration window for the current brush or eraser settings. When the selected preset is one of the
+	* user's own, the window can delete it.
+	*/
+	configure(kind) {
+		const app = this.app;
+		const settings = this.toolSettings(kind);
+		const selected = settings.selectedPreset;
+		const own = selected && !app.isBuiltInPreset(selected.id) && isOwnAuthor(selected.author, app.authorHandle, app.names.unknownAuthor);
+		this.configuring = {
+			kind,
+			config: {
+				...settings.preset,
+				width: settings.width,
+				height: settings.height
+			},
+			...own ? { editingId: selected.id } : {}
+		};
+	}
+	/**
+	* Open the configuration window to make a new preset, starting from the current brush or eraser settings.
+	*/
+	newPreset(kind) {
+		const settings = this.toolSettings(kind);
+		this.app?.closePanel();
+		this.configuring = {
+			kind,
+			config: {
+				...settings.preset,
+				name: this.t("brushConfig.newPresetName"),
+				width: settings.width,
+				height: settings.height
+			}
+		};
+	}
+	/** 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;
+		this.filled = {
+			...this.filled,
+			[slot.name]: slot.assignedElements().length > 0
+		};
+		this.requestUpdate();
+	}
+	/** A slot, with its default content unless content was given for it */
+	slotWithDefault(name, fallback) {
+		return html`<slot name=${name} @slotchange=${this.onSlotChange}
+      >${this.filled[name] ? nothing : fallback}</slot
+    >`;
+	}
+	/** Follow the panels given for a side, and whether it 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)"))
+		};
+		this.onSlotChange(event);
+	}
+	/** Follow whether a menu was given */
+	onMenuSlotChange(event) {
+		this.hasMenu = event.target.assignedElements().length > 0;
+		this.requestUpdate();
+	}
+	/** Whether a side has a layers menu, replacing the toolbar's */
+	get layersInSide() {
+		return this.sideLayers.left || this.sideLayers.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("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 */
+	renderSide(side, app, blocked) {
+		const mode = this.modeOf(side);
+		const label = this.t(side === "left" ? "layout.tools" : "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 ? "layout.show" : "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}
+      role="region"
+      aria-label=${label}
+      ?inert=${blocked}
+    >
+      ${content}
+    </div>`;
+	}
+	/** The menus the toolbar opens, floating over the canvas beside it */
+	renderPanels(app) {
+		const brushMenu = (kind) => html`<pc-brush-menu
+        class="panel top-panel"
+        kind=${kind}
+        .app=${app}
+        @pc-new-preset=${() => this.newPreset(kind)}
+      ></pc-brush-menu>`;
+		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}>
+        <slot name="menu" @slotchange=${this.onMenuSlotChange}></slot>
+      </div>`;
+	}
+	/** The brush configuration window, while open */
+	renderConfig(app) {
+		const configuring = this.configuring;
+		if (!configuring) return nothing;
+		return html`<pc-brush-config
+      .app=${app}
+      kind=${configuring.kind}
+      .config=${configuring.config}
+      editingId=${configuring.editingId ?? nothing}
+      @pc-save=${(event) => {
+			this.toolSettings(configuring.kind).apply(event.detail);
+			this.configuring = void 0;
+		}}
+      @pc-close=${() => this.configuring = void 0}
+    ></pc-brush-config>`;
+	}
+	/** The message blocking the layout while another window is drawing on the stored drawing */
+	renderBlocked(app) {
+		const choices = [{
+			value: TAKE_OVER_CHOICE,
+			label: this.t("autosave.takeOver")
+		}];
+		return html`<pc-dialog
+      class="elsewhere"
+      heading=${this.t("autosave.elsewhere")}
+      message=${this.t("autosave.elsewhereMessage")}
+      .choices=${choices}
+      @pc-choose=${(event) => {
+			if (event.detail.value === TAKE_OVER_CHOICE) app.autosave?.takeOver();
+		}}
+    ></pc-dialog>`;
+	}
+	render() {
+		const app = this.app;
+		const showsToolSettings = app.interfaceVisible && hasToolSettings(app.tool);
+		const blocked = this.blocked;
+		return html`<header part="header" ?inert=${blocked}>
+        <slot name="header"></slot>
+      </header>
+      ${this.renderSide("left", app, blocked)}
+      <div
+        class="top"
+        part="top"
+        role="region"
+        aria-label=${this.t("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)}
+      </div>
+      <div
+        class="center"
+        part="center"
+        role="region"
+        aria-label=${this.t("layout.canvas")}
+        ?inert=${blocked}
+      >
+        ${this.slotWithDefault("center", html`<pc-canvas
+            .app=${app}
+            .insets=${this.floatingInsets}
+          ></pc-canvas>`)}
+        <div class="overlay" part="overlay">
+          ${this.slotWithDefault("overlay", html`<pc-canvas-map
+              .app=${app}
+              .insets=${this.floatingInsets}
+            ></pc-canvas-map>`)}
+        </div>
+        ${app.interfaceVisible ? this.renderPanels(app) : nothing}
+      </div>
+      <div
+        class="bottom"
+        part="bottom"
+        role="region"
+        aria-label=${this.t("layout.status")}
+        ?inert=${blocked}
+      >
+        <slot name="bottom"></slot>
+      </div>
+      ${this.renderSide("right", app, blocked)}
+      <footer part="footer" ?inert=${blocked}>
+        ${this.slotWithDefault("footer", html`<pc-stats .app=${app}></pc-stats>`)}
+      </footer>
+      ${this.renderConfig(app)} ${blocked ? this.renderBlocked(app) : nothing}`;
+	}
+};
+defineElement("paint-canvas", PaintCanvasElement);
+export { PaintCanvasElement };

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

@@ -0,0 +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";
+export { style_default as default };