@lvl99dotcom/paintcanvas 0.3.0 → 0.4.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/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.js

@@ -1,5 +1,6 @@
 import { ICON_CONTROLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import "../PcButtonGroup/index.js";
 import { css, html, unsafeCSS } from "lit";
 // src/ui/elements/PcThemePicker/index.ts
 /** The themes to pick from: light, dark, or following the device (auto) */

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

@@ -1,4 +1,5 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import "../PcButton/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcToast/index.ts
 /** How long a toast shows before dismissing itself, unless told otherwise (milliseconds) */

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

@@ -1,8 +1,9 @@
+import { Tool } from "../../../lib/classes/PaintCanvas/tool.js";
 import style_default from "./style.js";
 import { ICON_CONTROLS_CSS, PILLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
-import { Panel, Tool } from "../../../lib/classes/PaintCanvas/index.js";
+import { Panel } from "../../../lib/classes/PaintCanvas/index.js";
 import "../../../lib/classes/BrushSettings/index.js";
 import { MAX_ZOOM, MIN_ZOOM } from "../../../lib/classes/Viewport/index.js";
 import { iconLabel } from "../../icons/index.js";

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

@@ -1,25 +1,31 @@
-import { PcElement } from "../../base";
+import { nothing } from "lit";
+import { PcPane } from "../PcPane";
 import { Tool, type default as PaintCanvas } from "../../../lib/classes/PaintCanvas";
-/** Toolbar buttons in display order: tool, icon name, translation key of its name, and its keyboard shortcut */
+import "../PcColourPair";
+/** Toolbar buttons in display order: tool, icon name, translation key of its name, and its keyboard shortcut action */
 export declare const TOOLBAR_TOOLS: readonly {
     tool: Tool;
     /** The button's icon, by name in the icon registry */
     icon: string;
     /** Translation key of the tool's name */
     name: string;
-    /** The tool's keyboard shortcut, shown with its name */
-    shortcut: string;
+    /** ID of the tool's keyboard shortcut action (see `SHORTCUT_DEFINITIONS`), whose key combination is shown with its name */
+    shortcutId: string;
 }[];
 /**
- * Vertical toolbar: current colour, tools, undo and redo (disabled when there is nothing to undo or redo), layers menu
- * toggle (unless `layers` is false) and app menu toggle. Tools, undo, redo and the layers toggle show their icons; undo
- * and redo have their shortcuts (⌘ on Apple devices, ^ elsewhere) in their tooltips. The app menu button shows
- * `menuText` and is named `menuLabel` for screen readers.
+ * Vertical toolbar: the foreground and background colours, tools, undo and redo (disabled when there is nothing to undo
+ * or redo), layers menu toggle (unless `layers` is false) and app menu toggle. Pressing a colour selects it and opens the
+ * colour palette (if it isn't open). Tools, undo, redo and the layers toggle show
+ * their icons; tools have the user's keyboard shortcuts in their tooltips, and undo and redo theirs (⌘ on Apple
+ * devices, ^ elsewhere). The app menu button shows `menuText` and is named `menuLabel` for screen readers.
+ *
+ * It's a `PcPane`: the colours and tools are at its start, and undo, redo, the layers toggle and the app menu toggle at
+ * its end, after anything slotted there.
  *
  * @example
  * html`<pc-toolbar .app=${app} menuText="App" menuLabel="App menu"></pc-toolbar>`
  */
-export declare class PcToolbar extends PcElement {
+export declare class PcToolbar extends PcPane {
     static properties: {
         app: {
             attribute: boolean;
@@ -36,6 +42,28 @@ export declare class PcToolbar extends PcElement {
         layers: {
             type: BooleanConstructor;
         };
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        mode: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        edge: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        collapsed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        openPanel: {
+            state: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -64,8 +92,15 @@ export declare class PcToolbar extends PcElement {
      */
     private onToolClick;
     /**
-     * Update the drawing colour from the colour input.
+     * Select the pressed colour, and open the colour palette if it isn't open.
      */
-    private onColourInput;
-    render(): import("lit").TemplateResult<1>;
+    private onColourClick;
+    /** A tool's name, with its keyboard shortcut if it has one */
+    private toolLabel;
+    /** The colours and tools */
+    protected renderStart(): import("lit").TemplateResult<1> | typeof nothing;
+    /** The space between the tools and the end */
+    protected renderMiddle(): import("lit").TemplateResult<1>;
+    /** Undo, redo, and the layers and app menu toggles */
+    protected renderEnd(): import("lit").TemplateResult<1> | typeof nothing;
 }