@lvl99dotcom/paintcanvas 0.6.0 → 0.8.0

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

@@ -1,14 +1,18 @@
 import style_default from "./style.js";
-import { PALETTE_FILE_FORMAT } from "../../../lib/palette/schema.js";
 import { ICON_CONTROLS_CSS, NO_TEXT_SELECTION_CSS, PILLS_CSS } from "../../styles/index.js";
+import "../../../lib/palette/schema.js";
 import { defineElement, emit } from "../../base/index.js";
 import { PcPanel } from "../PcPanel/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import "../PcColourPair/index.js";
 import "../PcMenu/index.js";
+import "../PcContextMenu/index.js";
 import { CANCEL_CHOICE } from "../PcDialog/index.js";
 import { hexToHsl, hexToRgb, hslToHex, normaliseHex, rgbToHex } from "../../../lib/utils/colour/index.js";
-import { PALETTE_FILE_ERRORS, PaletteFileError, exportPaletteFile, paletteFileName, parsePaletteFile } from "../../../lib/palette/index.js";
+import { colourPaletteFile } from "../../../lib/palette/index.js";
+import { DEFAULT_PALETTE_ID } from "../../../lib/classes/ColourPalettes/index.js";
+import { AssetFileError } from "../../../lib/assets/index.js";
+import { askConfirm, askText } from "../../ask/index.js";
 import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
 import { html, nothing, unsafeCSS } from "lit";
 import { live } from "lit/directives/live.js";
@@ -115,11 +119,23 @@ var MODELS = ["rgb", "hsl"];
 var LONG_PRESS_MS = 500;
 /** How far a touch can move and still count as held still (CSS pixels) */
 var LONG_PRESS_SLOP = 10;
-/** Translation keys of the palette file error messages */
-var PALETTE_FILE_ERROR_KEYS = {
-	[PALETTE_FILE_ERRORS.incompatible]: "paintCanvas.palette.fileIncompatible",
-	[PALETTE_FILE_ERRORS.read]: "paintCanvas.palette.fileReadFailed"
+/** Whether a saved colour is in one of the user's palettes (PaintCanvas's can't be changed) */
+var isEditable = ({ palette }) => palette !== DEFAULT_PALETTE_ID;
+/** Actions in a palette's menu */
+var PALETTE_ACTIONS = [
+	"rename",
+	"export",
+	"delete"
+];
+/** Translation keys of the messages shown when importing a palette file fails, by reason */
+var IMPORT_ERROR_KEYS = {
+	invalid: "paintCanvas.palette.fileIncompatible",
+	unsupported: "paintCanvas.palette.fileUnsupported"
 };
+/**
+* The translation key of the message shown when importing a palette file fails.
+*/
+var importErrorKey = (error) => error instanceof AssetFileError && IMPORT_ERROR_KEYS[error.reason] || "paintCanvas.palette.fileReadFailed";
 /** The dialog's choice that deletes the colour */
 var DELETE_CHOICE = "delete";
 /**
@@ -128,11 +144,14 @@ var DELETE_CHOICE = "delete";
 var clampWhole = (value, max) => Math.round(Math.min(max, Math.max(0, value)));
 /**
 * 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).
@@ -158,6 +177,10 @@ var PcPanelColours = class extends PcPanel {
 		unsafeCSS(PILLS_CSS),
 		unsafeCSS(style_default)
 	];
+	/** Asks the user to confirm, in a dialog (replaceable for tests) */
+	confirm = (options) => askConfirm(this.renderRoot, options);
+	/** Asks the user for text, in a dialog (replaceable for tests) */
+	prompt = (options) => askText(this.renderRoot, options);
 	/** Saves exported files (replaceable for tests) */
 	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
 	/** The HSL values shown, kept while they give the selected colour (so hue stays put for greys) */
@@ -166,13 +189,20 @@ var PcPanelColours = class extends PcPanel {
 		s: 0,
 		l: 0
 	};
-	/** The saved colour that is reached with Tab (the others with arrow keys) */
-	focusIndex = 0;
+	/** The saved colour that is reached with Tab in its palette (the others with arrow keys; other palettes' first) */
+	focused = {
+		palette: DEFAULT_PALETTE_ID,
+		index: 0
+	};
 	/** A touch being held on a saved colour, until it opens its menu */
 	press;
 	/** Whether a long press opened a menu, so the click that follows is ignored */
 	longPressed = false;
-	changes = new ChangeController(this, () => [this.app, this.app?.palette]);
+	changes = new ChangeController(this, () => [
+		this.app,
+		this.app?.palette,
+		this.app?.palettes
+	]);
 	onKey = (event) => {
 		if (event.key === "Alt") this.toggleAttribute("deleting", event.type === "keydown");
 	};
@@ -203,8 +233,36 @@ var PcPanelColours = class extends PcPanel {
 		super.willUpdate(changed);
 		if (!this.app) return;
 		if (hslToHex(this.hsl) !== this.colour) this.hsl = hexToHsl(this.colour);
-		const count = this.app.palette.colours.length;
-		this.focusIndex = Math.max(0, Math.min(this.focusIndex, count - 1));
+		const shown = this.shown().find(({ id }) => id === this.focused.palette);
+		this.focused = shown ? {
+			palette: shown.id,
+			index: Math.max(0, Math.min(this.focused.index, shown.colours.length - 1))
+		} : {
+			palette: DEFAULT_PALETTE_ID,
+			index: 0
+		};
+	}
+	/** The palettes shown: the user's own, then the one PaintCanvas comes with (named after the app) */
+	shown() {
+		const app = this.app;
+		return [...app.palettes.items.map((palette) => ({
+			...palette,
+			own: true
+		})), {
+			id: DEFAULT_PALETTE_ID,
+			name: app.names.app,
+			colours: app.palette.colours,
+			own: false
+		}];
+	}
+	/** A palette's colours */
+	coloursOf(palette) {
+		const app = this.app;
+		return palette === "paintcanvas" ? app.palette.colours : app.palettes.get(palette)?.colours ?? [];
+	}
+	/** The saved colour at a position */
+	colourAt({ palette, index }) {
+		return this.coloursOf(palette)[index];
 	}
 	/** Set the selected colour */
 	setColour(colour) {
@@ -272,33 +330,34 @@ var PcPanelColours = class extends PcPanel {
 		this.setColour(hslToHex(this.hsl));
 		this.requestUpdate();
 	}
-	/** Set the selected colour from a saved colour, or ask to delete it with Alt/Option held */
-	onSwatchClick(event, index) {
-		this.focusIndex = index;
+	/** Set the selected colour from a saved colour, or ask to delete one of the user's with Alt/Option held */
+	onSwatchClick(event, swatch) {
+		this.focused = swatch;
 		if (this.longPressed) {
 			this.longPressed = false;
 			return;
 		}
-		if (event.altKey) {
-			this.confirming = index;
+		if (event.altKey && isEditable(swatch)) {
+			this.confirming = swatch;
 			return;
 		}
-		this.setColour(this.app?.palette.colours[index]);
+		this.setColour(this.colourAt(swatch));
 	}
-	/** Open a saved colour's menu where it was right-clicked */
-	onSwatchContextMenu(event, index) {
+	/** Open the menu of a colour in one of the user's palettes where it was right-clicked */
+	onSwatchContextMenu(event, swatch) {
+		if (!isEditable(swatch)) return;
 		event.preventDefault();
-		this.focusIndex = index;
+		this.focused = swatch;
 		this.menu = {
-			index,
+			...swatch,
 			x: event.clientX,
 			y: event.clientY
 		};
 	}
 	/** Start waiting for a touch held on a saved colour to open its menu */
-	onSwatchPointerDown(event, index) {
+	onSwatchPointerDown(event, swatch) {
 		this.longPressed = false;
-		if (event.pointerType !== "touch") return;
+		if (event.pointerType !== "touch" || !isEditable(swatch)) return;
 		this.cancelPress();
 		const { clientX: x, clientY: y } = event;
 		this.press = {
@@ -307,9 +366,9 @@ var PcPanelColours = class extends PcPanel {
 			timer: setTimeout(() => {
 				this.press = void 0;
 				this.longPressed = true;
-				this.focusIndex = index;
+				this.focused = swatch;
 				this.menu = {
-					index,
+					...swatch,
 					x,
 					y
 				};
@@ -330,26 +389,28 @@ var PcPanelColours = class extends PcPanel {
 	* Move between saved colours, ask to delete one, or open its menu, with the keyboard. Keys used here don't reach the
 	* keyboard shortcuts (e.g. Delete doesn't also delete the masked image data).
 	*/
-	onSwatchKeyDown(event, index) {
-		if (event.key === "Delete" || event.key === "Backspace") {
+	onSwatchKeyDown(event, swatch) {
+		const { palette, index } = swatch;
+		const editable = isEditable(swatch);
+		if (editable && (event.key === "Delete" || event.key === "Backspace")) {
 			event.preventDefault();
 			event.stopPropagation();
-			this.confirming = index;
+			this.confirming = swatch;
 			return;
 		}
-		if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+		if (editable && (event.key === "ContextMenu" || event.shiftKey && event.key === "F10")) {
 			event.preventDefault();
 			event.stopPropagation();
 			const rect = event.currentTarget.getBoundingClientRect();
 			this.menu = {
-				index,
+				...swatch,
 				x: rect.left,
 				y: rect.bottom
 			};
 			return;
 		}
-		const last = this.app.palette.colours.length - 1;
-		const columns = this.columns();
+		const last = this.coloursOf(palette).length - 1;
+		const columns = this.columns(palette);
 		const next = {
 			ArrowRight: index + 1,
 			ArrowLeft: index - 1,
@@ -361,34 +422,85 @@ var PcPanelColours = class extends PcPanel {
 		if (next === void 0 || next < 0 || next > last) return;
 		event.preventDefault();
 		event.stopPropagation();
-		this.focusSwatch(next);
+		this.focusSwatch({
+			palette,
+			index: next
+		});
 	}
-	/** How many saved colours fit in a row */
-	columns() {
-		const grid = this.renderRoot.querySelector(".swatches");
+	/** How many saved colours fit in a row of a palette */
+	columns(palette) {
+		const grid = this.renderRoot.querySelector(`.swatches[data-palette="${palette}"]`);
 		const width = grid.querySelector(".swatch").offsetWidth;
 		return width > 0 ? Math.max(1, Math.floor(grid.clientWidth / width)) : 1;
 	}
 	/** Focus a saved colour */
-	async focusSwatch(index) {
-		this.focusIndex = index;
+	async focusSwatch(swatch) {
+		this.focused = swatch;
 		this.requestUpdate();
 		await this.updateComplete;
-		this.renderRoot.querySelector(`.swatch[data-index="${index}"]`)?.focus();
+		this.renderRoot.querySelector(`.swatches[data-palette="${swatch.palette}"] .swatch[data-index="${swatch.index}"]`)?.focus();
 	}
-	/** Save the selected colour */
-	onAdd() {
-		this.app?.palette.add(this.colour);
+	/** Save the selected colour in one of the user's palettes */
+	onAdd(palette) {
+		this.app?.palettes.addColour(palette, this.colour);
 	}
 	/** Delete the saved colour that was asked about, if confirmed */
 	onConfirm(event) {
 		event.stopPropagation();
-		const index = this.confirming;
+		const swatch = this.confirming;
 		this.confirming = void 0;
-		const { palette } = this.app;
-		if (event.detail.value === DELETE_CHOICE) palette.remove(index);
-		const count = palette.colours.length;
-		if (count > 0) this.focusSwatch(Math.min(index, count - 1));
+		const app = this.app;
+		if (event.detail.value === DELETE_CHOICE) app.palettes.removeColour(swatch.palette, swatch.index);
+		const count = this.coloursOf(swatch.palette).length;
+		if (count > 0) this.focusSwatch({
+			palette: swatch.palette,
+			index: Math.min(swatch.index, count - 1)
+		});
+	}
+	/**
+	* Make a palette, asking for its name. The user is its author (see `PaintCanvas.author`).
+	*/
+	async createPalette() {
+		const app = this.app;
+		if (!app) return void 0;
+		const name = await this.prompt({
+			heading: this.t("paintCanvas.palette.newPaletteHeading"),
+			label: this.t("paintCanvas.palette.name"),
+			value: this.t("paintCanvas.palette.defaultName"),
+			confirm: this.t("paintCanvas.common.save"),
+			cancel: this.t("paintCanvas.common.cancel")
+		});
+		return name === null ? void 0 : app.palettes.create(name, [], app.author);
+	}
+	/**
+	* Do one of a palette's menu actions: rename it (asking for a name), export it, or delete it (asking first).
+	*/
+	async actOnPalette(id, action) {
+		const app = this.app;
+		const palette = app?.palettes.get(id);
+		if (!app || !palette) return;
+		if (action === "export") {
+			await this.exportFile([palette]);
+			return;
+		}
+		if (action === "rename") {
+			const name = await this.prompt({
+				heading: this.t("paintCanvas.palette.renameHeading"),
+				label: this.t("paintCanvas.palette.name"),
+				value: palette.name,
+				confirm: this.t("paintCanvas.common.save"),
+				cancel: this.t("paintCanvas.common.cancel")
+			});
+			if (name !== null) app.palettes.rename(id, name);
+			return;
+		}
+		if (await this.confirm({
+			heading: this.t("paintCanvas.palette.deletePaletteHeading"),
+			message: this.t("paintCanvas.palette.deletePaletteConfirm", { name: palette.name }),
+			confirm: this.t("paintCanvas.common.delete"),
+			cancel: this.t("paintCanvas.common.cancel"),
+			cancelling: true
+		})) app.palettes.remove(id);
 	}
 	/** Close the palette with Escape (unless a dialog or menu is open, which closes first) */
 	onKeyDown(event) {
@@ -398,51 +510,40 @@ var PcPanelColours = class extends PcPanel {
 		this.app?.closePanel();
 	}
 	/**
-	* 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.
 	*/
 	async importFile(file) {
 		const app = this.app;
 		if (!app) return;
-		let text;
-		try {
-			text = await file.text();
-		} catch {
-			this.toastError(PALETTE_FILE_ERRORS.read);
-			return;
-		}
 		try {
-			const colours = parsePaletteFile(text, [app.names.paletteFileFormat, PALETTE_FILE_FORMAT]);
-			const count = app.palette.merge(colours);
+			const palettes = colourPaletteFile.parse(await file.text());
+			const count = app.palettes.merge(palettes);
 			emit(this, "pc-toast", {
 				message: this.t("paintCanvas.palette.imported", { count }),
 				kind: "success"
 			});
 		} catch (error) {
-			this.toastError(error instanceof PaletteFileError ? error.message : PALETTE_FILE_ERRORS.read);
+			emit(this, "pc-toast", {
+				message: this.t(importErrorKey(error)),
+				kind: "error"
+			});
 		}
 	}
 	/**
-	* 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.
 	*/
-	async exportFile() {
+	async exportFile(palettes = this.app?.palettes.items ?? []) {
 		const app = this.app;
 		if (!app) return;
 		try {
-			await this.saveFile(new Blob([exportPaletteFile(app.palette.colours, app.names.paletteFileFormat)], { type: "application/json" }), paletteFileName(void 0, app.names.filePrefix));
-		} catch {
+			await this.saveFile(new Blob([colourPaletteFile.write(palettes)], { type: "application/json" }), colourPaletteFile.fileName(void 0, app.names.filePrefix));
+		} catch (error) {
 			emit(this, "pc-toast", {
-				message: this.t("paintCanvas.palette.exportFailed"),
+				message: this.t(error instanceof AssetFileError && error.reason === "empty" ? "paintCanvas.palette.nothingToExport" : "paintCanvas.palette.exportFailed"),
 				kind: "error"
 			});
 		}
 	}
-	/** Show a palette file error (one of `PALETTE_FILE_ERRORS`) in the chosen language */
-	toastError(message) {
-		emit(this, "pc-toast", {
-			message: this.t(PALETTE_FILE_ERROR_KEYS[message]),
-			kind: "error"
-		});
-	}
 	/** The colour model tabs and the selected model's sliders */
 	renderChannels() {
 		const rgb = hexToRgb(this.colour);
@@ -499,44 +600,71 @@ var PcPanelColours = class extends PcPanel {
       </div>
     </div>`;
 	}
-	/** The saved colours and the [+] button */
-	renderSwatches(app) {
-		const colours = app.palette.colours;
+	/** A palette: its name (and the ⋮ menu of the user's own), its colours and its [+] button */
+	renderPalette(palette) {
+		const { colours, id } = palette;
 		const canAdd = !colours.includes(this.colour) && colours.length < 1e3;
-		return html`<div
-      class="swatches"
-      role="group"
-      aria-label=${this.t("paintCanvas.palette.saved")}
-    >
-      ${colours.map((colour, index) => html`<button
+		const focused = this.focused.palette === id ? this.focused.index : 0;
+		const add = this.t("paintCanvas.palette.add", {
+			colour: this.colour,
+			name: palette.name
+		});
+		const menu = PALETTE_ACTIONS.map((action) => ({
+			value: action,
+			label: this.t(`paintCanvas.palette.${action}Palette`),
+			danger: action === "delete"
+		}));
+		return html`<section class="palette-group" data-palette=${id}>
+      <div class="palette-heading">
+        <h3 id="palette-${id}">${palette.name}</h3>
+        ${palette.own ? html`<pc-context-menu
+                label=${this.t("paintCanvas.palette.paletteActions", { name: palette.name })}
+                .items=${menu}
+                @pc-select=${(event) => void this.actOnPalette(id, event.detail.value)}
+              ></pc-context-menu>` : nothing}
+      </div>
+      <div
+        class="swatches"
+        data-palette=${id}
+        role="group"
+        aria-labelledby="palette-${id}"
+      >
+        ${colours.map((colour, index) => {
+			const swatch = {
+				palette: id,
+				index
+			};
+			return html`<button
             type="button"
             class="swatch"
             data-index=${index}
             style="--colour: ${colour}"
             title=${colour}
             aria-label=${colour}
-            aria-haspopup="menu"
+            aria-haspopup=${palette.own ? "menu" : nothing}
             aria-pressed=${colour === this.colour}
-            tabindex=${index === this.focusIndex ? 0 : -1}
-            @click=${(e) => this.onSwatchClick(e, index)}
-            @contextmenu=${(e) => this.onSwatchContextMenu(e, index)}
-            @pointerdown=${(e) => this.onSwatchPointerDown(e, index)}
+            tabindex=${index === focused ? 0 : -1}
+            @click=${(e) => this.onSwatchClick(e, swatch)}
+            @contextmenu=${(e) => this.onSwatchContextMenu(e, swatch)}
+            @pointerdown=${(e) => this.onSwatchPointerDown(e, swatch)}
             @pointermove=${this.onSwatchPointerMove}
             @pointerup=${this.cancelPress}
             @pointercancel=${this.cancelPress}
-            @keydown=${(e) => this.onSwatchKeyDown(e, index)}
-          ></button>`)}
-      <button
-        type="button"
-        class="add"
-        title=${this.t("paintCanvas.palette.add", { colour: this.colour })}
-        aria-label=${this.t("paintCanvas.palette.add", { colour: this.colour })}
-        ?disabled=${!canAdd}
-        @click=${this.onAdd}
-      >
-        +
-      </button>
-    </div>`;
+            @keydown=${(e) => this.onSwatchKeyDown(e, swatch)}
+          ></button>`;
+		})}
+        ${palette.own ? html`<button
+                type="button"
+                class="add"
+                title=${add}
+                aria-label=${add}
+                ?disabled=${!canAdd}
+                @click=${() => this.onAdd(id)}
+              >
+                +
+              </button>` : nothing}
+      </div>
+    </section>`;
 	}
 	/** The saved colour's menu, while open */
 	renderMenu() {
@@ -551,12 +679,18 @@ var PcPanelColours = class extends PcPanel {
       open
       .x=${menu.x}
       .y=${menu.y}
-      label=${this.t("paintCanvas.palette.colourActions", { colour: this.app.palette.colours[menu.index] })}
+      label=${this.t("paintCanvas.palette.colourActions", { colour: this.colourAt(menu) })}
       .items=${items}
-      @pc-select=${() => this.confirming = menu.index}
+      @pc-select=${() => this.confirming = {
+			palette: menu.palette,
+			index: menu.index
+		}}
       @pc-close=${() => {
 			this.menu = void 0;
-			if (this.confirming === void 0) this.focusSwatch(menu.index);
+			if (this.confirming === void 0) this.focusSwatch({
+				palette: menu.palette,
+				index: menu.index
+			});
 		}}
     ></pc-menu>`;
 	}
@@ -609,8 +743,21 @@ var PcPanelColours = class extends PcPanel {
           </div>
           ${this.renderChannels()}
         </div>
-        ${this.renderSwatches(app)}
+        <div
+          class="palettes"
+          role="group"
+          aria-label=${this.t("paintCanvas.palette.saved")}
+        >
+          ${this.shown().map((palette) => this.renderPalette(palette))}
+        </div>
         <div class="actions">
+          <button
+            type="button"
+            class="pill-s new-palette"
+            @click=${() => void this.createPalette()}
+          >
+            ${this.t("paintCanvas.palette.newPalette")}
+          </button>
           <button
             type="button"
             class="pill-s import"

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcPanelColours/style.css?inline
-var style_default = ".palette {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pc-space-2);\n}\n\n/* The colours and their hex value beside the colour model's sliders */\n.top {\n  display: flex;\n  gap: var(--pc-space-2);\n}\n.current {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  width: 76px;\n  border: 1px solid var(--pc-border);\n}\n.current pc-colour-pair {\n  --pc-colour-pair-size: 76px;\n}\n.hex {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: var(--pc-control-size);\n  padding: var(--pc-space-1);\n  border: 0;\n  border-top: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.hex[aria-invalid=\"true\"] {\n  outline: 2px solid var(--pc-dismiss-text);\n  outline-offset: -2px;\n}\n.hex:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.channels {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--pc-border);\n}\n[role=\"tablist\"] {\n  display: flex;\n}\n[role=\"tab\"] {\n  flex: 1;\n  min-height: 28px;\n  border: 0;\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-surface-active);\n  color: var(--pc-text);\n  font: inherit;\n  cursor: pointer;\n}\n[role=\"tab\"] + [role=\"tab\"] {\n  border-left: 1px solid var(--pc-border);\n}\n[role=\"tab\"][aria-selected=\"true\"] {\n  border-bottom-color: transparent;\n  background: var(--pc-surface);\n  font-weight: bold;\n}\n[role=\"tab\"]:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n.sliders {\n  display: grid;\n  flex: 1;\n  grid-template-columns: auto minmax(0, 1fr) 3.6em;\n  gap: var(--pc-space-1);\n  align-items: center;\n  padding: var(--pc-space-1) var(--pc-space-2);\n  background: var(--pc-surface);\n}\n.letter {\n  font-weight: bold;\n}\n/* Each slider's track shows the colours its values give (--track, set per slider), under a round white handle with a\n   dark outline that shows on any colour */\n.sliders input[type=\"range\"] {\n  width: 100%;\n  min-width: 0;\n  height: 20px;\n  margin: 0;\n  background: transparent;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n.sliders input[type=\"range\"]::-webkit-slider-runnable-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-moz-range-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-webkit-slider-thumb {\n  width: 16px;\n  height: 16px;\n  margin-top: -4px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n  -webkit-appearance: none;\n}\n.sliders input[type=\"range\"]::-moz-range-thumb {\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n}\n.sliders input[type=\"number\"] {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 2px var(--pc-space-1);\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  font-variant-numeric: tabular-nums;\n}\n.sliders input:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 1px;\n}\n\n/* Saved colours: square swatches in a grid that scrolls */\n.swatches {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));\n  align-content: start;\n  min-height: 64px;\n  max-height: 132px;\n  overflow-y: auto;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n.swatch,\n.add {\n  aspect-ratio: 1;\n  min-width: 32px;\n  padding: 0;\n  border: 0;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  cursor: pointer;\n}\n.swatch {\n  background: var(--colour);\n  /* Long presses open the colour's menu instead of the browser's */\n  -webkit-touch-callout: none;\n  touch-action: manipulation;\n}\n.swatch[aria-pressed=\"true\"] {\n  box-shadow:\n    inset 0 0 0 2px #ffffff,\n    inset 0 0 0 3px #000000;\n}\n:host([deleting]) .swatch {\n  cursor: var(--pc-delete-cursor);\n}\n.add {\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: 20px;\n  font-weight: bold;\n}\n.add:hover:not(:disabled) {\n  background: var(--pc-surface-hover);\n}\n.add:disabled {\n  color: var(--pc-disabled);\n  cursor: default;\n}\n.swatch:focus-visible,\n.add:focus-visible {\n  position: relative;\n  z-index: 1;\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.actions {\n  display: flex;\n  gap: var(--pc-space-2);\n}\n/* Import and Export share the row */\n.actions button.pill-s {\n  flex: 1;\n}\n";
+var style_default = ".palette {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pc-space-2);\n}\n\n/* The colours and their hex value beside the colour model's sliders */\n.top {\n  display: flex;\n  gap: var(--pc-space-2);\n}\n.current {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  width: 76px;\n  border: 1px solid var(--pc-border);\n}\n.current pc-colour-pair {\n  --pc-colour-pair-size: 76px;\n}\n.hex {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: var(--pc-control-size);\n  padding: var(--pc-space-1);\n  border: 0;\n  border-top: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.hex[aria-invalid=\"true\"] {\n  outline: 2px solid var(--pc-dismiss-text);\n  outline-offset: -2px;\n}\n.hex:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.channels {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--pc-border);\n}\n[role=\"tablist\"] {\n  display: flex;\n}\n[role=\"tab\"] {\n  flex: 1;\n  min-height: 28px;\n  border: 0;\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-surface-active);\n  color: var(--pc-text);\n  font: inherit;\n  cursor: pointer;\n}\n[role=\"tab\"] + [role=\"tab\"] {\n  border-left: 1px solid var(--pc-border);\n}\n[role=\"tab\"][aria-selected=\"true\"] {\n  border-bottom-color: transparent;\n  background: var(--pc-surface);\n  font-weight: bold;\n}\n[role=\"tab\"]:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n.sliders {\n  display: grid;\n  flex: 1;\n  grid-template-columns: auto minmax(0, 1fr) 3.6em;\n  gap: var(--pc-space-1);\n  align-items: center;\n  padding: var(--pc-space-1) var(--pc-space-2);\n  background: var(--pc-surface);\n}\n.letter {\n  font-weight: bold;\n}\n/* Each slider's track shows the colours its values give (--track, set per slider), under a round white handle with a\n   dark outline that shows on any colour */\n.sliders input[type=\"range\"] {\n  width: 100%;\n  min-width: 0;\n  height: 20px;\n  margin: 0;\n  background: transparent;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n.sliders input[type=\"range\"]::-webkit-slider-runnable-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-moz-range-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-webkit-slider-thumb {\n  width: 16px;\n  height: 16px;\n  margin-top: -4px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n  -webkit-appearance: none;\n}\n.sliders input[type=\"range\"]::-moz-range-thumb {\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n}\n.sliders input[type=\"number\"] {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 2px var(--pc-space-1);\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  font-variant-numeric: tabular-nums;\n}\n.sliders input:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 1px;\n}\n\n/* The palettes, the user's own above PaintCanvas's, scrolling together */\n.palettes {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pc-space-2);\n  max-height: 264px;\n  overflow-y: auto;\n}\n.palette-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pc-space-1);\n  min-height: var(--pc-control-size);\n}\n.palette-heading h3 {\n  overflow: hidden;\n  margin: 0;\n  font-size: var(--pc-font-size-small);\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* A palette's colours: square swatches in a grid */\n.swatches {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));\n  align-content: start;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n.swatch,\n.add {\n  aspect-ratio: 1;\n  min-width: 32px;\n  padding: 0;\n  border: 0;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  cursor: pointer;\n}\n.swatch {\n  background: var(--colour);\n  /* Long presses open the colour's menu instead of the browser's */\n  -webkit-touch-callout: none;\n  touch-action: manipulation;\n}\n.swatch[aria-pressed=\"true\"] {\n  box-shadow:\n    inset 0 0 0 2px #ffffff,\n    inset 0 0 0 3px #000000;\n}\n:host([deleting]) .swatch {\n  cursor: var(--pc-delete-cursor);\n}\n.add {\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: 20px;\n  font-weight: bold;\n}\n.add:hover:not(:disabled) {\n  background: var(--pc-surface-hover);\n}\n.add:disabled {\n  color: var(--pc-disabled);\n  cursor: default;\n}\n.swatch:focus-visible,\n.add:focus-visible {\n  position: relative;\n  z-index: 1;\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pc-space-2);\n}\n/* New palette has a row of its own, above Import and Export */\n.actions button.pill-s {\n  flex: 1;\n}\n.actions button.new-palette {\n  flex-basis: 100%;\n}\n";
 export { style_default as default };

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

@@ -94,9 +94,10 @@ var PcSliderRange = class extends PcElement {
         border-radius: var(--pc-radius-pill);
         transform: translateY(-50%);
       }
+      /* The whole range: the same area the fill covers from min to max */
       .rail {
-        left: calc(var(--pc-range-thumb) / -2);
-        right: calc(var(--pc-range-thumb) / -2);
+        left: 0;
+        right: 0;
         background: var(--pc-border);
       }
       .fill {

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

@@ -16,10 +16,12 @@ export declare const COLOUR_INTERVAL_MS = 100;
 export declare const formatBytes: (bytes: number, locale?: string) => string;
 /**
  * A line of small text about the canvas: its size; while the drawing is kept in the browser, how much its layer
- * images take there; the zoom level; and the colour under the pointer (with a swatch; a dash when the pointer isn't
- * over the canvas). The colour follows the pointer at most every `COLOUR_INTERVAL_MS`, and isn't read while a stroke is
- * drawn (the next pointer move after it reads it). It's not announced to screen readers as it changes, as it changes
- * with every pointer move.
+ * images take there; the zoom level; the colour under the pointer (with a swatch; a dash when the pointer isn't over the
+ * canvas); and, on the right, while the drawing is being saved to a remote store (see
+ * `PaintCanvas.useRemoteDocumentStore`), a progress bar, or that saving there failed. The colour follows the pointer
+ * at most every `COLOUR_INTERVAL_MS`, and isn't read while a stroke is drawn (the next pointer move after it reads it).
+ * It's not announced to screen readers as it changes, as it changes with every pointer move; saving to the remote store
+ * is.
  *
  * @example
  * html`<pc-stats .app=${app}></pc-stats>`
@@ -66,4 +68,6 @@ export declare class PcStats extends PcElement {
      */
     private follow;
     render(): import("lit").TemplateResult<1> | typeof nothing;
+    /** Saving to the remote store, while under way or after it failed */
+    private renderRemote;
 }