@lvl99dotcom/paintcanvas 0.6.0 → 0.8.0

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

@@ -5,8 +5,11 @@ import ChangeController from "../../ChangeController/index.js";
 import { BlendMode } from "../../../lib/classes/Layer/index.js";
 import { drawCheckerboard, fitSize } from "../../../lib/rendering/checkerboard/index.js";
 import { CANCEL_CHOICE } from "../PcDialog/index.js";
+import "../PcSliderRange/index.js";
+import { askText } from "../../ask/index.js";
 import { MENU_MARGIN, menuTop } from "../PcContextMenu/index.js";
 import { html, nothing, unsafeCSS } from "lit";
+import { live } from "lit/directives/live.js";
 // src/ui/elements/PcLayerItem/index.ts
 /** Blend mode options shown in the layer's select input */
 var BLEND_MODE_OPTIONS = [
@@ -37,6 +40,10 @@ var BLEND_MODE_OPTIONS = [
 ];
 /** Context menu options in display order, with the translation keys of their labels */
 var LAYER_ACTIONS = [
+	{
+		action: "rename",
+		label: "paintCanvas.layers.rename"
+	},
 	{
 		action: "mask",
 		label: "paintCanvas.layers.createMask"
@@ -129,7 +136,9 @@ var DRAG_THRESHOLD = 4;
 /** Event a row dispatches while its layer is dragged by its reorder handle (detail: {@link LayerDragDetail}) */
 var LAYER_DRAG_EVENT = "pc-layer-drag";
 /**
-* One row in the layers menu: reorder handle, thumbnail and name (then opacity and blend mode under them), alpha lock (padlock) and visibility (eye) icons.
+* One row in the layers menu: reorder handle, thumbnail and name (then opacity and blend mode under them), alpha lock
+* (padlock) and visibility (eye) icons. Pressing anywhere on the row (its controls too) selects the layer, which is then
+* shown with a purple background (`active`). "Rename…" in the actions menu asks for a new name.
 * Dragging the handle (with mouse, pen or touch) reorders the layer: the row fires {@link LAYER_DRAG_EVENT} and the
 * layers menu shows where it will land. Clicking or tapping the handle, pressing Enter or Space on it, or right-clicking
 * it opens the layer's actions menu (which can also reorder it). Cmd/Ctrl + click on the thumbnail or name (or "Create
@@ -154,6 +163,10 @@ var PcLayerItem = class extends PcElement {
 		dropAction: {
 			attribute: "drop-action",
 			reflect: true
+		},
+		active: {
+			type: Boolean,
+			reflect: true
 		}
 	};
 	static styles = [
@@ -162,6 +175,8 @@ var PcLayerItem = class extends PcElement {
 		unsafeCSS(style_default),
 		unsafeCSS(WINDOWS_CSS)
 	];
+	/** Asks the user for the layer's new name (replaceable for tests) */
+	prompt = (options) => askText(this.renderRoot, options);
 	/** The pointer pressed on the reorder handle, where it was pressed, and whether it has started dragging */
 	press;
 	/** Whether to ignore the next click on the handle (it ended a drag) */
@@ -173,7 +188,15 @@ var PcLayerItem = class extends PcElement {
 		super();
 		this.menuOpen = false;
 		this.dragging = false;
+		this.active = false;
+		this.addEventListener("click", this.onClick);
 	}
+	/** Pressing anywhere on the row selects its layer, except in the dialogs it shows (e.g. after deleting it) */
+	onClick = (event) => {
+		const { stack, layer } = this;
+		if (!stack || !layer || !stack.layers.includes(layer)) return;
+		if (!event.composedPath().some((target) => target instanceof Element && target.matches("pc-dialog")) && stack.active !== layer) stack.select(layer.id);
+	};
 	/**
 	* Run a context menu action. Merging down, clearing and deleting ask for confirmation first (see `confirmed`).
 	*/
@@ -182,6 +205,9 @@ var PcLayerItem = class extends PcElement {
 		this.menuOpen = false;
 		if (!stack || !layer || !this.canRun(action)) return;
 		switch (action) {
+			case "rename":
+				this.rename(stack, layer);
+				break;
 			case "mask":
 				this.requestMask(layer, {
 					shiftKey: false,
@@ -360,10 +386,9 @@ var PcLayerItem = class extends PcElement {
 		}));
 	}
 	/**
-	* Clicking the row selects the layer. Cmd/Ctrl + click on the thumbnail or name also makes a mask from the layer's alpha.
+	* Cmd/Ctrl + click on the thumbnail or name makes a mask from the layer's alpha (the click also selects the layer).
 	*/
-	onRowClick(event, stack, layer) {
-		stack.select(layer.id);
+	onDetailsClick(event, layer) {
 		if (!event.metaKey && !event.ctrlKey) return;
 		const target = event.composedPath()[0];
 		if (!(target instanceof Element) || !target.matches(".thumbnail, .name")) return;
@@ -371,15 +396,21 @@ var PcLayerItem = class extends PcElement {
 		this.requestMask(layer, event);
 	}
 	/**
-	* Rename a layer when the name input changes. Empty names are reverted.
+	* Ask for the layer's new name and use it. Cancelling or an empty name leaves the name as it was.
 	*/
-	onRename(event, stack, layer) {
-		const input = event.target;
-		try {
-			stack.rename(layer.id, input.value);
-		} catch {
-			input.value = layer.name;
-		}
+	async rename(stack, layer) {
+		const name = (await this.prompt({
+			heading: this.t("paintCanvas.layers.renameTitle"),
+			label: this.t("paintCanvas.layers.name"),
+			value: layer.name,
+			confirm: this.t("paintCanvas.common.save"),
+			cancel: this.t("paintCanvas.common.cancel")
+		}))?.trim();
+		if (name && stack.layers.includes(layer)) stack.rename(layer.id, name);
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.active = this.layer !== void 0 && this.stack?.active.id === this.layer.id;
 	}
 	updated() {
 		const id = this.layer?.id;
@@ -434,7 +465,6 @@ var PcLayerItem = class extends PcElement {
 	render() {
 		const { stack, layer } = this;
 		if (!stack || !layer) return html``;
-		const active = stack.active.id === layer.id;
 		return html`
       <pc-context-menu
         class="handle"
@@ -451,23 +481,20 @@ var PcLayerItem = class extends PcElement {
       >
       <div
         class="details"
-        @click=${(e) => this.onRowClick(e, stack, layer)}
+        @click=${(e) => this.onDetailsClick(e, layer)}
       >
         <canvas class="thumbnail" aria-hidden="true"></canvas>
-        <input
-          class="name ${active ? "active" : ""}"
-          aria-label=${this.t("paintCanvas.layers.name")}
-          .value=${layer.name}
-          @change=${(e) => this.onRename(e, stack, layer)}
-        />
-        <input
-          type="range"
+        <span class="name" title=${layer.name}>${layer.name}</span>
+        <pc-slider-range
+          single
+          class="opacity"
+          label=${this.t("paintCanvas.common.opacity")}
           min="0"
           max="100"
-          aria-label=${this.t("paintCanvas.common.opacity")}
-          .value=${String(Math.round(layer.opacity * 100))}
-          @change=${(e) => stack.update(layer.id, { opacity: Number(e.target.value) / 100 })}
-        />
+          unit="%"
+          .value=${live(Math.round(layer.opacity * 100))}
+          @pc-change=${(e) => stack.update(layer.id, { opacity: e.detail.value / 100 })}
+        ></pc-slider-range>
         <select
           aria-label=${this.t("paintCanvas.layers.blendMode")}
           @change=${(e) => stack.update(layer.id, { blendMode: e.target.value })}

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcLayerItem/style.css?inline
-var style_default = "/* A white row with space around its parts. The middle column can shrink, so the row never grows wider than its panel */\n:host {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) 30px 30px;\n  align-items: center;\n  column-gap: 6px;\n  position: relative;\n  padding: 6px;\n  border: 1px solid var(--pc-surface-active);\n  background: var(--pc-surface);\n}\n.name.active {\n  font-weight: bold;\n}\n.thumbnail {\n  width: 30px;\n  height: 30px;\n}\n/* Thumbnail on the left and name on the right; under them, opacity on the left and blend mode on the right. The blend\n   mode gets a set share of the width rather than its own: browsers size dropdowns differently (Safari and Firefox as\n   wide as the longest option, Chrome as the chosen one), which would otherwise push the row wider than its panel */\n.details {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 2fr);\n  align-items: center;\n  gap: 4px 6px;\n  min-width: 0;\n}\n.details .name {\n  grid-column: 2 / -1;\n}\n.details .name,\n.details select {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n.details input[type=\"range\"] {\n  grid-column: 1 / 3;\n  min-width: 0;\n  margin: 0;\n}\n/* The reorder handle drags with mouse, pen or touch (touch drags it rather than scrolling the panel) */\n.handle {\n  /* As tall as the row */\n  align-self: stretch;\n}\n.handle::part(button) {\n  min-width: 0;\n  padding: 0;\n  cursor: grab;\n  touch-action: none;\n}\n/* While dragged: the row floats with the pointer, out of the list (the layers menu places it), and the cursor shows\n   what dropping would do (\"+\" duplicates on \"New Layer\") */\n:host([dragging]) {\n  position: fixed;\n  z-index: 10;\n  opacity: 0.9;\n  background: Canvas;\n  box-shadow: var(--pc-shadow);\n}\n:host([dragging]) .handle::part(button) {\n  cursor: grabbing;\n}\n:host([drop-action=\"duplicate\"]) .handle::part(button) {\n  cursor: copy;\n}\n:host([drop-action=\"none\"]) .handle::part(button) {\n  cursor: no-drop;\n}\n/* Alpha lock and visibility: boxed icon toggles like the settings bar's, darker while on */\n.alpha-lock,\n.visibility {\n  width: 30px;\n  height: 30px;\n  padding: 2px;\n  border: 1px solid var(--pc-border);\n  border-radius: 4px;\n  background: var(--pc-surface);\n  cursor: pointer;\n}\n.alpha-lock:hover,\n.visibility:hover {\n  background: var(--pc-surface-hover);\n}\n.alpha-lock[aria-pressed=\"true\"],\n.visibility[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.alpha-lock:focus-visible,\n.visibility:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.alpha-lock img,\n.visibility img {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: auto;\n}\n";
+var style_default = "/* A white row with space around its parts. The middle column can shrink, so the row never grows wider than its panel */\n:host {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) 30px 30px;\n  align-items: center;\n  column-gap: 6px;\n  position: relative;\n  padding: 6px;\n  border: 1px solid var(--pc-surface-active);\n  background: var(--pc-surface);\n}\n/* The selected layer: purple, so it stands out */\n:host([active]) {\n  border-color: var(--pc-accent);\n  background: var(--pc-accent);\n  color: var(--pc-accent-text);\n}\n:host([active]) .name {\n  font-weight: bold;\n}\n/* The opacity slider's track and handle in the row's text colour, so they show on purple */\n:host([active]) .opacity {\n  --pc-accent: var(--pc-accent-text);\n  --pc-border: rgb(255 255 255 / 45%);\n}\n/* The name, on one line (cut short with \"…\"); renamed from the actions menu */\n.name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.thumbnail {\n  width: 30px;\n  height: 30px;\n}\n/* Thumbnail on the left and name on the right; under them, opacity, then blend mode, each the full width. The blend\n   mode never sets its own width: browsers size dropdowns differently (Safari and Firefox as wide as the longest option,\n   Chrome as the chosen one), which would otherwise push the row wider than its panel */\n.details {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr);\n  align-items: center;\n  gap: 4px 6px;\n  min-width: 0;\n}\n.details .opacity,\n.details select {\n  grid-column: 1 / -1;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n/* The reorder handle drags with mouse, pen or touch (touch drags it rather than scrolling the panel) */\n.handle {\n  /* As tall as the row */\n  align-self: stretch;\n}\n.handle::part(button) {\n  min-width: 0;\n  padding: 0;\n  cursor: grab;\n  touch-action: none;\n}\n/* While dragged: the row floats with the pointer, out of the list (the layers menu places it), and the cursor shows\n   what dropping would do (\"+\" duplicates on \"New Layer\") */\n:host([dragging]) {\n  position: fixed;\n  z-index: 10;\n  opacity: 0.9;\n  background: Canvas;\n  box-shadow: var(--pc-shadow);\n}\n:host([dragging]) .handle::part(button) {\n  cursor: grabbing;\n}\n:host([drop-action=\"duplicate\"]) .handle::part(button) {\n  cursor: copy;\n}\n:host([drop-action=\"none\"]) .handle::part(button) {\n  cursor: no-drop;\n}\n/* Alpha lock and visibility: boxed icon toggles like the settings bar's, darker while on */\n.alpha-lock,\n.visibility {\n  width: 30px;\n  height: 30px;\n  padding: 2px;\n  border: 1px solid var(--pc-border);\n  border-radius: 4px;\n  background: var(--pc-surface);\n  cursor: pointer;\n}\n.alpha-lock:hover,\n.visibility:hover {\n  background: var(--pc-surface-hover);\n}\n.alpha-lock[aria-pressed=\"true\"],\n.visibility[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.alpha-lock:focus-visible,\n.visibility:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.alpha-lock img,\n.visibility img {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: auto;\n}\n";
 export { style_default as default };

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

@@ -102,7 +102,7 @@ export declare class PcPanelBrushes extends PcPanel {
      */
     exportFile(): Promise<void>;
     /**
-     * A preset file error's message in the chosen language (or the fallback's, for any other error).
+     * The message, in the chosen language, for importing or exporting a preset file failing.
      */
     private presetFileError;
     /**

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

@@ -1,5 +1,4 @@
 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 { defineElement } from "../../base/index.js";
 import { PcPanel } from "../PcPanel/index.js";
@@ -7,19 +6,25 @@ import { askConfirm, deletePresetQuestion } from "../../ask/index.js";
 import "../PcBrushSize/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 { brushPresetFile } from "../../../lib/brushes/presetFile/index.js";
+import { AssetFileError } from "../../../lib/assets/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/PcPanelBrushes/index.ts
-/** Translation keys of the preset file error messages */
+/** Translation keys of the messages shown when importing or exporting a preset file fails, by reason */
 var PRESET_FILE_ERROR_KEYS = {
-	[PRESET_FILE_ERRORS.incompatible]: "paintCanvas.presets.fileIncompatible",
-	[PRESET_FILE_ERRORS.read]: "paintCanvas.presets.fileReadFailed",
-	[PRESET_FILE_ERRORS.export]: "paintCanvas.presets.exportFailed",
-	[PRESET_FILE_ERRORS.empty]: "paintCanvas.presets.nothingToExport"
+	import: {
+		invalid: "paintCanvas.presets.fileIncompatible",
+		unsupported: "paintCanvas.presets.fileUnsupported"
+	},
+	export: { empty: "paintCanvas.presets.nothingToExport" }
+};
+/** Translation keys of the messages shown when importing or exporting fails for any other reason */
+var PRESET_FILE_FALLBACK_KEYS = {
+	import: "paintCanvas.presets.fileReadFailed",
+	export: "paintCanvas.presets.exportFailed"
 };
 /** Size the previews of presets without a family are measured against, so a 50px preset fills its tile */
 var UNGROUPED_FULL_SIZE = 50;
@@ -149,18 +154,8 @@ var PcPanelBrushes = class extends PcPanel {
 	async importFile(file) {
 		const app = this.app;
 		if (!app) return;
-		let text;
-		try {
-			text = await file.text();
-		} catch {
-			this.emit("pc-toast", {
-				message: this.presetFileError(void 0, PRESET_FILE_ERRORS.read),
-				kind: "error"
-			});
-			return;
-		}
 		try {
-			const presets = parsePresetFile(text, [app.names.presetFileFormat, BRUSH_PRESET_FILE_FORMAT]);
+			const presets = brushPresetFile.parse(await file.text());
 			await app.customPresets.save(...presets);
 			this.emit("pc-toast", {
 				message: this.t("paintCanvas.presets.imported", { count: presets.length }),
@@ -168,7 +163,7 @@ var PcPanelBrushes = class extends PcPanel {
 			});
 		} catch (error) {
 			this.emit("pc-toast", {
-				message: this.presetFileError(error, PRESET_FILE_ERRORS.read),
+				message: this.presetFileError(error, "import"),
 				kind: "error"
 			});
 		}
@@ -180,22 +175,21 @@ var PcPanelBrushes = class extends PcPanel {
 		const app = this.app;
 		if (!app) return;
 		try {
-			const json = exportPresetFile(app.customPresets.presets, app.names.presetFileFormat);
-			await this.saveFile(new Blob([json], { type: "application/json" }), presetFileName(void 0, app.names.filePrefix));
+			const json = brushPresetFile.write(app.customPresets.presets);
+			await this.saveFile(new Blob([json], { type: "application/json" }), brushPresetFile.fileName(void 0, app.names.filePrefix));
 		} catch (error) {
 			this.emit("pc-toast", {
-				message: this.presetFileError(error, PRESET_FILE_ERRORS.export),
+				message: this.presetFileError(error, "export"),
 				kind: "error"
 			});
 		}
 	}
 	/**
-	* A preset file error's message in the chosen language (or the fallback's, for any other error).
+	* The message, in the chosen language, for importing or exporting a preset file failing.
 	*/
-	presetFileError(error, fallback) {
-		const message = error instanceof PresetFileError ? error.message : fallback;
-		const key = PRESET_FILE_ERROR_KEYS[message];
-		return key ? this.t(key) : message;
+	presetFileError(error, direction) {
+		const key = error instanceof AssetFileError && PRESET_FILE_ERROR_KEYS[direction][error.reason] || PRESET_FILE_FALLBACK_KEYS[direction];
+		return this.t(key);
 	}
 	/**
 	* A preset group's heading in the chosen language ("My presets" and "Unknown" are translated; author names aren't).

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

@@ -1,3 +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  margin: -4px -8px -4px 0;\n  border-left: 1px solid var(--pc-border);\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.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";
+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  margin: -4px -8px -4px 0;\n  border-left: 1px solid var(--pc-border);\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(2, 1fr);\n  gap: 6px;\n}\n/* New brush has a row of its own, above Import and Export */\n.actions .new-preset {\n  grid-column: 1 / -1;\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 };

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

@@ -2,9 +2,12 @@ import { nothing, type PropertyValues } from "lit";
 import { PcPanel } from "../PcPanel";
 import "../PcColourPair";
 import "../PcMenu";
+import "../PcContextMenu";
 import "../PcDialog";
 import type { default as PaintCanvas } from "../../../lib/classes/PaintCanvas";
 import { type Hsl, type Rgb } from "../../../lib/utils/colour";
+import { type ColourPalette } from "../../../lib/palette";
+import { type ConfirmFn, type PromptFn } from "../../ask";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 /** The colour models the sliders can show */
 export type ColourModel = "rgb" | "hsl";
@@ -21,13 +24,31 @@ export type ColourModel = "rgb" | "hsl";
 export declare const channelGradient: (key: string, rgb: Rgb, hsl: Hsl) => string;
 /** How long a touch is held on a saved colour to open its menu (milliseconds) */
 export declare const LONG_PRESS_MS = 500;
+/** A palette shown in the panel: one of the user's own, or the one PaintCanvas comes with */
+interface ShownPalette {
+    id: string;
+    name: string;
+    colours: readonly string[];
+    /** Whether it's one of the user's own (which can be renamed, exported and deleted) */
+    own: boolean;
+}
+/** A saved colour: its palette's ID and its position */
+interface SwatchRef {
+    palette: string;
+    index: number;
+}
+/** Actions in a palette's menu */
+declare const PALETTE_ACTIONS: readonly ["rename", "export", "delete"];
 /**
  * The colour palette menu: the foreground and background colours (the selected one is configured), its hex value, RGB
- * and HSL sliders, the saved colours, and buttons to import and export them as a JSON file.
+ * and HSL sliders, the colour palettes (the user's own above the one PaintCanvas comes with), and buttons to make a
+ * palette and to import and export the user's palettes as a JSON file.
  *
  * - Pressing the foreground or background colour selects it.
- * - Pressing a saved colour sets the selected colour; [+] saves the selected colour.
- * - A saved colour is deleted, after asking, by clicking it with Alt/Option held (the cursor shows an "X"), from its
+ * - Pressing a saved colour sets the selected colour (changing it afterwards doesn't change the palette); a palette's [+]
+ *   saves the selected colour in it. PaintCanvas's palette can't be changed.
+ * - Each of the user's palettes has a ⋮ menu to rename, export or delete it (deleting asks first).
+ * - A colour in one of the user's palettes is deleted, after asking, by clicking it with Alt/Option held (the cursor shows an "X"), from its
  *   menu (right-click, a long press on touch screens, or the context menu key), or with Delete or Backspace. Arrow keys,
  *   Home and End move between saved colours.
  * - Escape closes it (closes the canvas's open panel).
@@ -82,19 +103,22 @@ export declare class PcPanelColours extends PcPanel {
     /** The hex value being typed, while it differs from the colour */
     hexDraft?: string;
     /** The saved colour whose menu is open, and where */
-    menu?: {
-        index: number;
+    menu?: SwatchRef & {
         x: number;
         y: number;
     };
     /** The saved colour being deleted, while asking */
-    confirming?: number;
+    confirming?: SwatchRef;
+    /** Asks the user to confirm, in a dialog (replaceable for tests) */
+    confirm: ConfirmFn;
+    /** Asks the user for text, in a dialog (replaceable for tests) */
+    prompt: PromptFn;
     /** Saves exported files (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
     /** The HSL values shown, kept while they give the selected colour (so hue stays put for greys) */
     private hsl;
-    /** The saved colour that is reached with Tab (the others with arrow keys) */
-    private focusIndex;
+    /** The saved colour that is reached with Tab in its palette (the others with arrow keys; other palettes' first) */
+    private focused;
     /** A touch being held on a saved colour, until it opens its menu */
     private press?;
     /** Whether a long press opened a menu, so the click that follows is ignored */
@@ -108,6 +132,12 @@ export declare class PcPanelColours extends PcPanel {
     /** The selected colour's value, e.g. `#000000` */
     get colour(): string;
     protected willUpdate(changed: PropertyValues<this>): void;
+    /** The palettes shown: the user's own, then the one PaintCanvas comes with (named after the app) */
+    shown(): ShownPalette[];
+    /** A palette's colours */
+    private coloursOf;
+    /** The saved colour at a position */
+    private colourAt;
     /** Set the selected colour */
     private setColour;
     /** Select the pressed colour */
@@ -122,9 +152,9 @@ export declare class PcPanelColours extends PcPanel {
     private selectModel;
     /** Change one channel of the colour model shown */
     private onChannel;
-    /** Set the selected colour from a saved colour, or ask to delete it with Alt/Option held */
+    /** Set the selected colour from a saved colour, or ask to delete one of the user's with Alt/Option held */
     private onSwatchClick;
-    /** Open a saved colour's menu where it was right-clicked */
+    /** Open the menu of a colour in one of the user's palettes where it was right-clicked */
     private onSwatchContextMenu;
     /** Start waiting for a touch held on a saved colour to open its menu */
     private onSwatchPointerDown;
@@ -137,30 +167,36 @@ export declare class PcPanelColours extends PcPanel {
      * keyboard shortcuts (e.g. Delete doesn't also delete the masked image data).
      */
     private onSwatchKeyDown;
-    /** How many saved colours fit in a row */
+    /** How many saved colours fit in a row of a palette */
     private columns;
     /** Focus a saved colour */
     private focusSwatch;
-    /** Save the selected colour */
+    /** Save the selected colour in one of the user's palettes */
     private onAdd;
     /** Delete the saved colour that was asked about, if confirmed */
     private onConfirm;
+    /**
+     * Make a palette, asking for its name. The user is its author (see `PaintCanvas.author`).
+     */
+    createPalette(): Promise<ColourPalette | undefined>;
+    /**
+     * Do one of a palette's menu actions: rename it (asking for a name), export it, or delete it (asking first).
+     */
+    actOnPalette(id: string, action: (typeof PALETTE_ACTIONS)[number]): Promise<void>;
     /** Close the palette with Escape (unless a dialog or menu is open, which closes first) */
     private onKeyDown;
     /**
-     * Import the colours in a colour palette file, adding them after the saved ones (leaving out ones already saved).
+     * Import the palettes in a colour palette file as the user's own, replacing ones with the same IDs.
      */
     importFile(file: File): Promise<void>;
     /**
-     * Export the saved colours as a colour palette file.
+     * Export palettes (the user's own by default) as a colour palette file, or say there are none.
      */
-    exportFile(): Promise<void>;
-    /** Show a palette file error (one of `PALETTE_FILE_ERRORS`) in the chosen language */
-    private toastError;
+    exportFile(palettes?: readonly ColourPalette[]): Promise<void>;
     /** The colour model tabs and the selected model's sliders */
     private renderChannels;
-    /** The saved colours and the [+] button */
-    private renderSwatches;
+    /** A palette: its name (and the ⋮ menu of the user's own), its colours and its [+] button */
+    private renderPalette;
     /** The saved colour's menu, while open */
     private renderMenu;
     /** The dialog asking before deleting a saved colour, while asking */
@@ -169,3 +205,4 @@ export declare class PcPanelColours extends PcPanel {
     protected get defaultLabel(): string;
     protected renderBody(): import("lit").TemplateResult<1> | typeof nothing;
 }
+export {};