@lvl99dotcom/paintcanvas 0.7.0 → 0.8.0

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

@@ -157,6 +157,8 @@ export declare class PaintCanvasElement extends PcElement {
     private watchedAutosave?;
     /** Keeps the app settings under the `settings-store` name, if any */
     private ownSettingsAutosave?;
+    /** The asset stores the layout gave the canvas for `settings-store`, if any */
+    private ownAssetStores?;
     /** Stops keeping the rendering chosen in the canvas's UI settings under the `settings-store` name, if kept */
     private stopKeepingRendering?;
     /** Whether drawing was blocked when shortcuts were last watched */
@@ -205,8 +207,10 @@ export declare class PaintCanvasElement extends PcElement {
     /** Keeps the app settings under the `settings-store` name, if any (e.g. to wait until they are restored with `ready`) */
     get settingsAutosave(): SettingsAutosave | undefined;
     /**
-     * Keep the canvas's app settings under the `settings-store` name, stopping the previous settings autosave (which
-     * saves any change waiting to be saved).
+     * Keep the canvas's app settings and assets (brush presets, colour palettes, profile graphs) under the
+     * `settings-store` name, stopping the previous settings autosave (which saves any change waiting to be saved). Asset
+     * stores the layout gave a previous canvas, or this one under another name, are taken back; ones the implementer gave
+     * are replaced only when there's a name.
      */
     private useSettingsStore;
     /**

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

@@ -5,7 +5,8 @@ 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, { IndexedDbSettingsStore, loadRenderingChoice, saveRenderingChoice } from "../../../lib/storage/index.js";
+import IndexedDbLayerStore, { indexedDbStores, loadRenderingChoice, saveRenderingChoice } from "../../../lib/storage/index.js";
+import { ASSET_SYNC_ERROR_EVENT } from "../../../lib/classes/AssetSync/index.js";
 import SettingsAutosave, { SETTINGS_AUTOSAVE_ERROR_EVENT } from "../../../lib/classes/SettingsAutosave/index.js";
 import { AUTOSAVE_ERROR_EVENT, AutosaveState } from "../../../lib/classes/LayerAutosave/index.js";
 import { isOwnAuthor } from "../../../lib/brushes/authors/index.js";
@@ -130,6 +131,8 @@ var PaintCanvasElement = class extends PcElement {
 	watchedAutosave;
 	/** Keeps the app settings under the `settings-store` name, if any */
 	ownSettingsAutosave;
+	/** The asset stores the layout gave the canvas for `settings-store`, if any */
+	ownAssetStores;
 	/** Stops keeping the rendering chosen in the canvas's UI settings under the `settings-store` name, if kept */
 	stopKeepingRendering;
 	/** Whether drawing was blocked when shortcuts were last watched */
@@ -218,7 +221,7 @@ var PaintCanvasElement = class extends PcElement {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		if (changed.has("app") || changed.has("store")) this.useStore(changed.get("app"));
-		if (changed.has("app") || changed.has("settingsStore")) this.useSettingsStore();
+		if (changed.has("app") || changed.has("settingsStore")) this.useSettingsStore(changed.get("app"));
 		this.watchAutosaveErrors();
 		if (this.isConnected && (changed.has("app") || changed.has("shortcuts") || this.blocked !== this.blockedShortcuts)) this.watchShortcuts();
 	}
@@ -284,16 +287,27 @@ var PaintCanvasElement = class extends PcElement {
 		return this.ownSettingsAutosave;
 	}
 	/**
-	* Keep the canvas's app settings under the `settings-store` name, stopping the previous settings autosave (which
-	* saves any change waiting to be saved).
+	* Keep the canvas's app settings and assets (brush presets, colour palettes, profile graphs) under the
+	* `settings-store` name, stopping the previous settings autosave (which saves any change waiting to be saved). Asset
+	* stores the layout gave a previous canvas, or this one under another name, are taken back; ones the implementer gave
+	* are replaced only when there's a name.
 	*/
-	useSettingsStore() {
+	useSettingsStore(previousApp) {
+		const app = this.app;
 		this.ownSettingsAutosave?.stop();
 		this.stopKeepingRendering?.();
 		const name = this.settingsStore || void 0;
 		this.stopKeepingRendering = name === void 0 ? void 0 : this.keepRendering(name);
-		this.ownSettingsAutosave = name === void 0 ? void 0 : new SettingsAutosave(this.app, new IndexedDbSettingsStore(name));
+		const { settings, ...assets } = name === void 0 ? { settings: void 0 } : indexedDbStores(name);
+		this.ownSettingsAutosave = settings && new SettingsAutosave(app, settings);
 		this.ownSettingsAutosave?.addEventListener(SETTINGS_AUTOSAVE_ERROR_EVENT, this.onSettingsAutosaveError);
+		const own = this.ownAssetStores;
+		const isOwn = (canvas) => own !== void 0 && canvas?.assetStores.brushes === own.brushes;
+		if (previousApp !== app && isOwn(previousApp)) previousApp?.useAssetStores({});
+		if (settings) app.useAssetStores(assets);
+		else if (isOwn(app)) app.useAssetStores({});
+		this.ownAssetStores = settings ? assets : void 0;
+		app.profileSync?.addEventListener(ASSET_SYNC_ERROR_EVENT, this.onSettingsAutosaveError);
 	}
 	/**
 	* Keep the rendering chosen in the canvas's UI settings (e.g. when they're restored, imported or changed) under a

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

@@ -9,8 +9,8 @@ import { type SaveMethod } from "../../../lib/rendering/screenshot";
  * The user's app settings: a "Draw with the GPU" switch (the user's `ui.data.rendering`, used from the next start, so it
  * says when the page needs reloading), and buttons: "Keyboard shortcuts", which opens a window to change them (see
  * `pc-shortcut-settings`), and "Import settings" and "Export settings", which read and write a settings JSON file (input
- * settings, keyboard shortcuts, colour palette, colours, profile graphs, theme, language and rendering). The window is a shaded
- * `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
+ * settings, keyboard shortcuts, colours, the user's colour palettes, profile graphs and brush presets, theme, language,
+ * rendering, and settings wrapper apps added). The window is a shaded `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
  * back to the button. Fires `pc-toast` after importing, or when importing or exporting fails.
  *
  * @example
@@ -47,15 +47,14 @@ export declare class PcAppSettings extends PcElement {
     /** Close the keyboard shortcuts window */
     closeShortcuts(): void;
     /**
-     * Import the settings in a settings file, using the parts it has.
+     * Import the settings in a settings file, using the parts it has (the user's colour palettes, profile graphs and brush
+     * presets are added to theirs).
      */
     importFile(file: File): Promise<void>;
     /**
-     * Export the settings as a settings file.
+     * Export the settings, with the user's colour palettes, profile graphs and brush presets, as a settings file.
      */
     exportFile(): Promise<void>;
-    /** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
-    private toastError;
     /** The keyboard shortcuts window, with its contents only while open */
     private renderShortcuts;
     /**

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

@@ -1,25 +1,25 @@
-import { SETTINGS_FILE_FORMAT } from "../../../lib/settings/schema.js";
 import { ICON_CONTROLS_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import "../PcShortcutSettings/index.js";
 import "../PcToggleCheckbox/index.js";
 import "../PcDialogWindow/index.js";
-import { SETTINGS_FILE_ERRORS, SettingsFileError, applySettings, collectSettings, exportSettingsFile, parseSettingsFile, settingsFileName } from "../../../lib/settings/index.js";
+import { AssetFileError } from "../../../lib/assets/index.js";
+import { applySettings, collectSettings, exportSettingsFile, parseSettingsFile, settingsFileName } from "../../../lib/settings/index.js";
 import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
 import { css, html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcAppSettings/index.ts
-/** Translation keys of the settings file error messages */
-var SETTINGS_FILE_ERROR_KEYS = {
-	[SETTINGS_FILE_ERRORS.incompatible]: "paintCanvas.settings.fileIncompatible",
-	[SETTINGS_FILE_ERRORS.read]: "paintCanvas.settings.fileReadFailed"
+/** Translation keys of the messages shown when importing a settings file fails, by reason */
+var IMPORT_ERROR_KEYS = {
+	invalid: "paintCanvas.settings.fileIncompatible",
+	unsupported: "paintCanvas.settings.fileUnsupported"
 };
 /**
 * The user's app settings: a "Draw with the GPU" switch (the user's `ui.data.rendering`, used from the next start, so it
 * says when the page needs reloading), and buttons: "Keyboard shortcuts", which opens a window to change them (see
 * `pc-shortcut-settings`), and "Import settings" and "Export settings", which read and write a settings JSON file (input
-* settings, keyboard shortcuts, colour palette, colours, profile graphs, theme, language and rendering). The window is a shaded
-* `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
+* settings, keyboard shortcuts, colours, the user's colour palettes, profile graphs and brush presets, theme, language,
+* rendering, and settings wrapper apps added). The window is a shaded `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
 * back to the button. Fires `pc-toast` after importing, or when importing or exporting fails.
 *
 * @example
@@ -85,36 +85,33 @@ var PcAppSettings = class extends PcElement {
 		this.shortcutsOpen = false;
 	}
 	/**
-	* Import the settings in a settings file, using the parts it has.
+	* Import the settings in a settings file, using the parts it has (the user's colour palettes, profile graphs and brush
+	* presets are added to theirs).
 	*/
 	async importFile(file) {
 		const app = this.app;
 		if (!app) return;
-		let text;
 		try {
-			text = await file.text();
-		} catch {
-			this.toastError(SETTINGS_FILE_ERRORS.read);
-			return;
-		}
-		try {
-			applySettings(app, parseSettingsFile(text, [app.names.settingsFileFormat, SETTINGS_FILE_FORMAT]));
+			await applySettings(app, parseSettingsFile(await file.text()));
 			emit(this, "pc-toast", {
 				message: this.t("paintCanvas.settings.imported"),
 				kind: "success"
 			});
 		} catch (error) {
-			this.toastError(error instanceof SettingsFileError ? error.message : SETTINGS_FILE_ERRORS.read);
+			emit(this, "pc-toast", {
+				message: this.t(error instanceof AssetFileError && IMPORT_ERROR_KEYS[error.reason] || "paintCanvas.settings.fileReadFailed"),
+				kind: "error"
+			});
 		}
 	}
 	/**
-	* Export the settings as a settings file.
+	* Export the settings, with the user's colour palettes, profile graphs and brush presets, as a settings file.
 	*/
 	async exportFile() {
 		const app = this.app;
 		if (!app) return;
 		try {
-			await this.saveFile(new Blob([exportSettingsFile(collectSettings(app), app.names.settingsFileFormat)], { type: "application/json" }), settingsFileName(void 0, app.names.filePrefix));
+			await this.saveFile(new Blob([exportSettingsFile(collectSettings(app))], { type: "application/json" }), settingsFileName(void 0, app.names.filePrefix));
 		} catch {
 			emit(this, "pc-toast", {
 				message: this.t("paintCanvas.settings.exportFailed"),
@@ -122,13 +119,6 @@ var PcAppSettings = class extends PcElement {
 			});
 		}
 	}
-	/** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
-	toastError(message) {
-		emit(this, "pc-toast", {
-			message: this.t(SETTINGS_FILE_ERROR_KEYS[message]),
-			kind: "error"
-		});
-	}
 	/** The keyboard shortcuts window, with its contents only while open */
 	renderShortcuts(app) {
 		return html`<pc-dialog-window

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 {};