@lvl99dotcom/paintcanvas 0.3.1 → 0.4.0

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

@@ -0,0 +1,357 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { PcPanel } from "../PcPanel/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcPane/index.ts
+/** Event fired when a floating pane is shown or collapsed (detail: `{ collapsed }`) */
+var PANE_COLLAPSE_EVENT = "pc-collapse";
+/** Elements that can take keyboard focus */
+var FOCUSABLE = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+/**
+* An area where buttons and panels are shown or docked, e.g. a side of the `<paint-canvas>` layout. Its content goes in
+* its `start`, `middle` and `end` slots (content without a slot goes at the start), which run down a `vertical` pane
+* (the default) or across a `horizontal` one; the middle takes the space left.
+*
+* Its `mode` sets how it shows its panels (`PcPanel`s, e.g. `<pc-panel-layers>`):
+* - `docked`: as they are.
+* - `rail`: as a column of buttons (with each panel's icon, name and badge) that open one panel at a time over the
+*   canvas, beside the pane (away from its `edge`). Focus moves into the panel; Escape, a press outside it or its
+*   button again closes it, and focus goes back to the button.
+* - `floating`: the pane floats over the canvas as a box that collapses to a button (`collapsed`, named with its
+*   `label`), firing `pc-collapse` when it's shown or collapsed.
+*
+* Panes made for one purpose extend it and put their own content in its regions (see `renderStart`, `renderMiddle`
+* and `renderEnd`), e.g. `<pc-toolbar>`.
+*
+* @example
+* html`<pc-pane edge="right" mode="rail" label="Panels"><pc-panel-layers .app=${app}></pc-panel-layers></pc-pane>`
+*/
+var PcPane = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		orientation: {
+			type: String,
+			reflect: true
+		},
+		mode: {
+			type: String,
+			reflect: true
+		},
+		edge: {
+			type: String,
+			reflect: true
+		},
+		label: { type: String },
+		collapsed: {
+			type: Boolean,
+			reflect: true
+		},
+		openPanel: { state: true }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        position: relative;
+        display: flex;
+        box-sizing: border-box;
+        min-width: 0;
+        min-height: 0;
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      :host([edge="right"]) {
+        flex-direction: row-reverse;
+      }
+      .regions {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-width: 0;
+        min-height: 0;
+      }
+      :host([orientation="horizontal"]) .regions {
+        flex-direction: row;
+      }
+      .start,
+      .middle,
+      .end {
+        display: flex;
+        flex-direction: inherit;
+      }
+      /* The middle takes the space left, and gives it up first; the start and end keep their content's size */
+      .middle {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+      }
+      .regions[hidden] {
+        display: none;
+      }
+
+      /* Rail: a column of buttons, one per panel, on the side facing the canvas */
+      .rail {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-1);
+        padding: var(--pc-space-1);
+        border-inline: 1px solid var(--pc-border);
+        background: var(--pc-bar);
+      }
+      .rail button {
+        position: relative;
+        display: inline-flex;
+        padding: var(--pc-space-1);
+        border: 1px solid transparent;
+        border-radius: var(--pc-radius-small);
+        background: transparent;
+        cursor: pointer;
+      }
+      .rail button:hover {
+        background: var(--pc-surface-hover);
+      }
+      .rail button[aria-expanded="true"] {
+        border-color: var(--pc-accent);
+        background: var(--pc-accent);
+      }
+      .rail button:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+      }
+      .rail img {
+        width: var(--pc-icon-size);
+        height: var(--pc-icon-size);
+        filter: var(--pc-icon-filter);
+      }
+      .rail .badge {
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        width: 10px;
+        height: 10px;
+        border: 2px solid var(--pc-bar);
+        border-radius: 50%;
+        background: var(--pc-red);
+      }
+
+      /* Floating: the pane floats over the canvas as a box, and collapses to a button */
+      :host([mode="floating"]) {
+        position: absolute;
+        z-index: 5;
+        top: var(--pc-space-2);
+        bottom: var(--pc-space-2);
+        flex-direction: column;
+        gap: var(--pc-space-1);
+        max-width: var(--pc-floating-panel-width, min(360px, 85vw));
+        border-radius: var(--pc-radius);
+        background: var(--pc-surface-raised);
+        box-shadow: var(--pc-shadow);
+        overflow: hidden;
+      }
+      :host([mode="floating"]:not([edge="right"])) {
+        left: var(--pc-space-2);
+      }
+      :host([mode="floating"][edge="right"]) {
+        right: var(--pc-space-2);
+      }
+      :host([mode="floating"][collapsed]) {
+        bottom: auto;
+      }
+      .collapse {
+        align-self: flex-end;
+        min-width: var(--pc-control-size);
+        min-height: var(--pc-control-size);
+        border: 0;
+        background: transparent;
+        color: var(--pc-text);
+        font-size: 18px;
+        cursor: pointer;
+      }
+      .collapse:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+      }
+    `];
+	/** The panels in it */
+	panels = [];
+	/** The rail button that opened the open panel, to return focus to */
+	opener;
+	panelObserver = new MutationObserver(() => this.requestUpdate());
+	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.orientation = "vertical";
+		this.mode = "docked";
+		this.edge = "left";
+		this.label = "";
+		this.collapsed = true;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.panelObserver.observe(this, {
+			subtree: true,
+			attributes: true,
+			attributeFilter: [
+				"icon",
+				"label",
+				"badge"
+			]
+		});
+		this.addEventListener("keydown", this.onKeyDown);
+		document.addEventListener("pointerdown", this.onDocumentPointerDown, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.panelObserver.disconnect();
+		this.removeEventListener("keydown", this.onKeyDown);
+		document.removeEventListener("pointerdown", this.onDocumentPointerDown, true);
+	}
+	/**
+	* Open a panel over the canvas from its rail button (closing any other), or close it if it's open. Focus moves into
+	* the panel: to the first thing in it that takes focus, or the panel itself.
+	*
+	* @example
+	* pane.togglePanel(pane.querySelector("pc-panel-layers"));
+	*/
+	togglePanel(panel, opener) {
+		if (this.openPanel === panel) {
+			this.closePanel(true);
+			return;
+		}
+		if (this.openPanel) this.closePanel(false);
+		this.openPanel = panel;
+		this.opener = opener;
+		this.syncPanels();
+		const focusable = panel.querySelector(FOCUSABLE);
+		if (focusable) focusable.focus();
+		else {
+			panel.tabIndex = -1;
+			panel.focus();
+		}
+	}
+	/**
+	* Close the panel open from the rail, moving focus back to its rail button if asked.
+	*/
+	closePanel(returnFocus) {
+		if (!this.openPanel) return;
+		this.openPanel = void 0;
+		this.syncPanels();
+		if (returnFocus) this.opener?.focus();
+		this.opener = void 0;
+	}
+	/** Show or collapse the floating pane, telling listeners */
+	toggleCollapsed() {
+		this.collapsed = !this.collapsed;
+		emit(this, PANE_COLLAPSE_EVENT, { collapsed: this.collapsed });
+	}
+	/** Follow the panels slotted into it */
+	onSlotChange() {
+		this.panels = [...this.renderRoot.querySelectorAll("slot")].flatMap((slot) => slot.assignedElements({ flatten: true }).filter((element) => element instanceof PcPanel));
+		if (this.openPanel && !this.panels.includes(this.openPanel)) this.closePanel(false);
+		this.syncPanels();
+		this.requestUpdate();
+	}
+	/** Show the panels for the mode: hidden behind the rail (except the open one, beside the pane) or as they are */
+	syncPanels() {
+		const rail = this.mode === "rail";
+		for (const panel of this.panels) {
+			panel.toggleAttribute("data-pc-rail", rail);
+			if (rail && panel === this.openPanel) panel.setAttribute("data-pc-open", this.edge);
+			else panel.removeAttribute("data-pc-open");
+		}
+	}
+	updated(changed) {
+		if (!changed.has("mode") && !changed.has("edge")) return;
+		if (this.mode !== "rail") this.closePanel(false);
+		this.syncPanels();
+	}
+	/** Content of its own at its start, before what's slotted there */
+	renderStart() {
+		return nothing;
+	}
+	/** Content of its own in its middle, before what's slotted there */
+	renderMiddle() {
+		return nothing;
+	}
+	/** Content of its own at its end, before what's slotted there */
+	renderEnd() {
+		return nothing;
+	}
+	/** The rail: a button per panel */
+	renderRail() {
+		if (this.mode !== "rail" || this.panels.length === 0) return nothing;
+		return html`<div
+      class="rail"
+      part="rail"
+      role="toolbar"
+      aria-orientation="vertical"
+      aria-label=${this.label || nothing}
+    >
+      ${this.panels.map((panel) => {
+			const label = panel.panelLabel;
+			return html`<button
+          type="button"
+          title=${label}
+          aria-label=${panel.badge ? this.t("paintCanvas.layout.new", { name: label }) : label}
+          aria-expanded=${String(this.openPanel === panel)}
+          @click=${(event) => this.togglePanel(panel, event.currentTarget)}
+        >
+          <img src=${this.iconUrl(panel.panelIcon)} alt="" />
+          ${panel.badge ? html`<span class="badge"></span>` : nothing}
+        </button>`;
+		})}
+    </div>`;
+	}
+	/** The button that shows or collapses a floating pane */
+	renderCollapse() {
+		if (this.mode !== "floating") return nothing;
+		const collapsed = this.collapsed;
+		const arrows = this.edge === "right" ? ["«", "»"] : ["»", "«"];
+		return html`<button
+      type="button"
+      class="collapse"
+      part="collapse"
+      aria-expanded=${String(!collapsed)}
+      aria-label=${this.t(collapsed ? "paintCanvas.layout.show" : "paintCanvas.layout.hide", { name: this.label })}
+      @click=${this.toggleCollapsed}
+    >
+      ${collapsed ? arrows[0] : arrows[1]}
+    </button>`;
+	}
+	render() {
+		return html`${this.renderCollapse()}
+      <div
+        class="regions"
+        part="regions"
+        ?hidden=${this.mode === "floating" && this.collapsed}
+      >
+        <div class="start" part="start">
+          ${this.renderStart()}<slot
+            name="start"
+            @slotchange=${this.onSlotChange}
+          ></slot
+          ><slot @slotchange=${this.onSlotChange}></slot>
+        </div>
+        <div class="middle" part="middle">
+          ${this.renderMiddle()}<slot
+            name="middle"
+            @slotchange=${this.onSlotChange}
+          ></slot>
+        </div>
+        <div class="end" part="end">
+          ${this.renderEnd()}<slot
+            name="end"
+            @slotchange=${this.onSlotChange}
+          ></slot>
+        </div>
+      </div>
+      ${this.renderRail()}`;
+	}
+};
+defineElement("pc-pane", PcPane);
+export { PANE_COLLAPSE_EVENT, PcPane };

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

@@ -1,12 +1,20 @@
+import { nothing, type TemplateResult } from "lit";
 import { PcElement } from "../../base";
 /**
- * Wraps content docked at a side of the `<paint-canvas>` layout (e.g. the layers menu or a chat window). Its `icon`,
- * `label` and `badge` are what the layout shows for it when the side narrows to a rail of buttons; the badge is a dot
- * meaning something new (e.g. unread messages). It names its region for screen readers. It's at most 290px wide
- * (`--pc-panel-max-width`).
+ * A panel: a box of settings or content for one purpose, docked in a `<pc-pane>` or floating over the canvas. It has
+ * `header`, `body` and `footer` slots; content without a slot goes in the body. It names its region with its `label`
+ * for screen readers.
+ *
+ * Its `icon`, `label` and `badge` are what a pane shows for it when the pane narrows to a rail of buttons; the badge is
+ * a dot meaning something new (e.g. unread messages). It's 290px wide (`--pc-panel-width`) and no wider than the space
+ * it has.
+ *
+ * Panels made for one purpose extend `PcPanel`, so they share its look: e.g. `<pc-panel-layers>`,
+ * `<pc-panel-brushes>` and `<pc-panel-colours>`. They put their own content in the body (see `renderBody`), and give
+ * their own `defaultLabel` and `defaultIcon`.
  *
  * @example
- * html`<pc-panel slot="right" icon="layers" label="Layers"><my-layers></my-layers></pc-panel>`
+ * html`<pc-panel icon="chat" label="Chat"><my-chat></my-chat></pc-panel>`
  */
 export declare class PcPanel extends PcElement {
     static properties: {
@@ -32,12 +40,22 @@ export declare class PcPanel extends PcElement {
         };
     };
     static styles: import("lit").CSSResultGroup[];
-    /** Name of the icon for its rail button */
+    /** Name of the icon for its rail button (`defaultIcon` if not given) */
     icon: string;
-    /** Names the panel (its rail button and region) */
+    /** Names the panel: its region and rail button (`defaultLabel` if not given) */
     label: string;
     /** Whether there's something new in it */
     badge: boolean;
     constructor();
-    render(): import("lit").TemplateResult<1>;
+    /** The icon a panel made for a purpose shows on its rail button when none is given */
+    protected get defaultIcon(): string;
+    /** The name a panel made for a purpose has when none is given, in the chosen language */
+    protected get defaultLabel(): string;
+    /** The icon shown on its rail button */
+    get panelIcon(): string;
+    /** The panel's name, for its region and rail button */
+    get panelLabel(): string;
+    /** The panel's own body content, before what's slotted into its body (none for a plain `<pc-panel>`) */
+    protected renderBody(): TemplateResult | typeof nothing;
+    render(): TemplateResult<1>;
 }

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

@@ -2,13 +2,20 @@ import { PcElement, defineElement } from "../../base/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcPanel/index.ts
 /**
-* Wraps content docked at a side of the `<paint-canvas>` layout (e.g. the layers menu or a chat window). Its `icon`,
-* `label` and `badge` are what the layout shows for it when the side narrows to a rail of buttons; the badge is a dot
-* meaning something new (e.g. unread messages). It names its region for screen readers. It's at most 290px wide
-* (`--pc-panel-max-width`).
+* A panel: a box of settings or content for one purpose, docked in a `<pc-pane>` or floating over the canvas. It has
+* `header`, `body` and `footer` slots; content without a slot goes in the body. It names its region with its `label`
+* for screen readers.
+*
+* Its `icon`, `label` and `badge` are what a pane shows for it when the pane narrows to a rail of buttons; the badge is
+* a dot meaning something new (e.g. unread messages). It's 290px wide (`--pc-panel-width`) and no wider than the space
+* it has.
+*
+* Panels made for one purpose extend `PcPanel`, so they share its look: e.g. `<pc-panel-layers>`,
+* `<pc-panel-brushes>` and `<pc-panel-colours>`. They put their own content in the body (see `renderBody`), and give
+* their own `defaultLabel` and `defaultIcon`.
 *
 * @example
-* html`<pc-panel slot="right" icon="layers" label="Layers"><my-layers></my-layers></pc-panel>`
+* html`<pc-panel icon="chat" label="Chat"><my-chat></my-chat></pc-panel>`
 */
 var PcPanel = class extends PcElement {
 	static properties = {
@@ -23,10 +30,38 @@ var PcPanel = class extends PcElement {
 	static styles = [PcElement.styles, css`
       :host {
         display: flex;
+        box-sizing: border-box;
+        width: var(--pc-panel-width, var(--pc-panel-default-width, 290px));
         min-width: 0;
-        max-width: var(--pc-panel-max-width, 290px);
+        max-width: 100%;
         min-height: 0;
+        max-height: 100%;
         flex-direction: column;
+        /* Light grey, like the bars */
+        background: var(--pc-bar);
+        color: var(--pc-text);
+        box-shadow: var(--pc-shadow);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      /* In a pane's rail (set by the pane): hidden until opened from its button, then over the canvas beside the pane */
+      :host([data-pc-rail]:not([data-pc-open])) {
+        display: none;
+      }
+      :host([data-pc-open]) {
+        position: absolute;
+        z-index: 5;
+        top: 0;
+        bottom: 0;
+        width: var(--pc-floating-panel-width, min(360px, 85vw));
+        max-width: none;
+        max-height: none;
+      }
+      :host([data-pc-open="left"]) {
+        left: 100%;
+      }
+      :host([data-pc-open="right"]) {
+        right: 100%;
       }
       section {
         display: flex;
@@ -34,6 +69,15 @@ var PcPanel = class extends PcElement {
         min-height: 0;
         flex-direction: column;
       }
+      .body {
+        display: flex;
+        flex: 1;
+        min-height: 0;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+        padding: var(--pc-space-2);
+        overflow: auto;
+      }
     `];
 	constructor() {
 		super();
@@ -41,9 +85,33 @@ var PcPanel = class extends PcElement {
 		this.label = "";
 		this.badge = false;
 	}
+	/** The icon a panel made for a purpose shows on its rail button when none is given */
+	get defaultIcon() {
+		return "";
+	}
+	/** The name a panel made for a purpose has when none is given, in the chosen language */
+	get defaultLabel() {
+		return "";
+	}
+	/** The icon shown on its rail button */
+	get panelIcon() {
+		return this.icon || this.defaultIcon;
+	}
+	/** The panel's name, for its region and rail button */
+	get panelLabel() {
+		return this.label || this.defaultLabel;
+	}
+	/** The panel's own body content, before what's slotted into its body (none for a plain `<pc-panel>`) */
+	renderBody() {
+		return nothing;
+	}
 	render() {
-		return html`<section part="panel" aria-label=${this.label || nothing}>
-      <slot></slot>
+		return html`<section part="panel" aria-label=${this.panelLabel || nothing}>
+      <slot name="header"></slot>
+      <div class="body" part="body">
+        ${this.renderBody()}<slot name="body"><slot></slot></slot>
+      </div>
+      <slot name="footer"></slot>
     </section>`;
 	}
 };

package/dist/ui/elements/{PcBrushMenu → PcPanelBrushes}/index.d.ts

@@ -1,10 +1,12 @@
-import { PcElement } from "../../base";
+import { nothing } from "lit";
+import { PcPanel } from "../PcPanel";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import type BrushSettings from "../../../lib/classes/BrushSettings";
 import type { BrushConfig } from "../../../lib/brushes/types";
+import { DELETE_CURSOR } from "../../../lib/rendering/cursors";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
-/** Cursor over a preset that a click deletes (Alt/Option held) */
-export declare const DELETE_CURSOR: string;
+/** Cursor over a preset that a click deletes (Alt/Option held): the `--pc-delete-cursor` token's default */
+export { DELETE_CURSOR };
 /** Asks the user to confirm; replaceable for tests */
 export type ConfirmFn = (message: string) => boolean;
 /** Largest shape preview in a preset tile, in CSS pixels */
@@ -35,9 +37,9 @@ export declare const previewSizes: (presets: BrushConfig[]) => Map<string, {
  * importing, exporting or deleting presets, or when that fails.
  *
  * @example
- * html`<pc-brush-menu kind="eraser" .app=${app}></pc-brush-menu>`
+ * html`<pc-panel-brushes kind="eraser" .app=${app}></pc-panel-brushes>`
  */
-export declare class PcBrushMenu extends PcElement {
+export declare class PcPanelBrushes extends PcPanel {
     static properties: {
         app: {
             attribute: boolean;
@@ -45,6 +47,16 @@ export declare class PcBrushMenu extends PcElement {
         kind: {
             type: StringConstructor;
         };
+        icon: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -117,5 +129,7 @@ export declare class PcBrushMenu extends PcElement {
     private onPointerUp;
     /** Render a preset's tile */
     private renderTile;
-    render(): import("lit").TemplateResult<1>;
+    protected get defaultIcon(): string;
+    protected get defaultLabel(): string;
+    protected renderBody(): import("lit").TemplateResult<1> | typeof nothing;
 }

package/dist/ui/elements/{PcBrushMenu → PcPanelBrushes}/index.js

@@ -1,16 +1,17 @@
 import style_default from "./style.js";
 import { BRUSH_PRESET_FILE_FORMAT } from "../../../lib/presets/schema.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 { groupPresetsByAuthor } from "../../../lib/brushes/authors/index.js";
 import "../../../lib/presets/index.js";
 import { PRESET_FILE_ERRORS, PresetFileError, exportPresetFile, parsePresetFile, presetFileName } from "../../../lib/brushes/presetFile/index.js";
-import { svgCursor } from "../../../lib/rendering/cursors/index.js";
+import { DELETE_CURSOR } from "../../../lib/rendering/cursors/index.js";
 import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
 import { html, nothing, unsafeCSS } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-// src/ui/elements/PcBrushMenu/index.ts
+// src/ui/elements/PcPanelBrushes/index.ts
 /** Translation keys of the preset file error messages */
 var PRESET_FILE_ERROR_KEYS = {
 	[PRESET_FILE_ERRORS.incompatible]: "paintCanvas.presets.fileIncompatible",
@@ -18,8 +19,6 @@ var PRESET_FILE_ERROR_KEYS = {
 	[PRESET_FILE_ERRORS.export]: "paintCanvas.presets.exportFailed",
 	[PRESET_FILE_ERRORS.empty]: "paintCanvas.presets.nothingToExport"
 };
-/** Cursor over a preset that a click deletes (Alt/Option held) */
-var DELETE_CURSOR = svgCursor("M6 6 L18 18 M18 6 L6 18", [12, 12], "not-allowed");
 /** Size the previews of presets without a family are measured against, so a 50px preset fills its tile */
 var UNGROUPED_FULL_SIZE = 50;
 /** Largest shape preview in a preset tile, in CSS pixels */
@@ -62,16 +61,16 @@ var previewSizes = (presets) => {
 * importing, exporting or deleting presets, or when that fails.
 *
 * @example
-* html`<pc-brush-menu kind="eraser" .app=${app}></pc-brush-menu>`
+* html`<pc-panel-brushes kind="eraser" .app=${app}></pc-panel-brushes>`
 */
-var PcBrushMenu = class extends PcElement {
+var PcPanelBrushes = class extends PcPanel {
 	static properties = {
-		...PcElement.properties,
+		...PcPanel.properties,
 		app: { attribute: false },
 		kind: { type: String }
 	};
 	static styles = [
-		PcElement.styles,
+		...PcPanel.styles,
 		unsafeCSS(NO_TEXT_SELECTION_CSS),
 		unsafeCSS(style_default),
 		unsafeCSS(WINDOWS_CSS),
@@ -93,7 +92,6 @@ var PcBrushMenu = class extends PcElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.style.setProperty("--delete-cursor", DELETE_CURSOR);
 		window.addEventListener("keydown", this.onKey);
 		window.addEventListener("keyup", this.onKey);
 		window.addEventListener("blur", this.onBlur);
@@ -271,9 +269,15 @@ var PcBrushMenu = class extends PcElement {
       </button>
     </li>`;
 	}
-	render() {
+	get defaultIcon() {
+		return this.kind === "eraser" ? "eraser" : "brush";
+	}
+	get defaultLabel() {
+		return this.t(this.kind === "eraser" ? "paintCanvas.tool.eraser" : "paintCanvas.tool.brush");
+	}
+	renderBody() {
 		const settings = this.settings;
-		if (!settings) return html``;
+		if (!settings) return nothing;
 		const title = this.t(this.kind === "eraser" ? "paintCanvas.tool.eraser" : "paintCanvas.tool.brush");
 		const presets = Object.values(settings.presets);
 		const sizes = previewSizes(presets);
@@ -359,5 +363,5 @@ var PcBrushMenu = class extends PcElement {
     `;
 	}
 };
-defineElement("pc-brush-menu", PcBrushMenu);
-export { DELETE_CURSOR, MAX_PREVIEW_SIZE, MIN_PREVIEW_SIZE, PcBrushMenu, previewSizes };
+defineElement("pc-panel-brushes", PcPanelBrushes);
+export { DELETE_CURSOR, MAX_PREVIEW_SIZE, MIN_PREVIEW_SIZE, PcPanelBrushes, previewSizes };

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

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