@lvl99dotcom/paintcanvas 0.6.0 → 0.8.0

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

@@ -34,10 +34,12 @@ var formatBytes = (bytes, locale) => {
 };
 /**
 * 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>`
@@ -73,6 +75,18 @@ var PcStats = class extends PcElement {
         white-space: nowrap;
         font-variant-numeric: tabular-nums;
       }
+      /* Saving to the remote store: at the end of the line, on the right */
+      .remote {
+        margin-left: auto;
+      }
+      .remote progress {
+        width: 48px;
+        height: 6px;
+        accent-color: var(--pc-accent, currentColor);
+      }
+      .remote.failed {
+        color: var(--pc-dismiss-text);
+      }
       .swatch {
         width: 10px;
         height: 10px;
@@ -82,7 +96,8 @@ var PcStats = class extends PcElement {
 	changes = new ChangeController(this, () => [
 		this.app,
 		this.app?.viewport,
-		this.app?.autosave
+		this.app?.autosave,
+		this.app?.remoteAutosave
 	]);
 	/** The canvas whose pointer is followed */
 	followed;
@@ -153,8 +168,27 @@ var PcStats = class extends PcElement {
                 style=${styleMap({ background: colour })}
               ></span>` : nothing}
       </li>
+      ${this.renderRemote(app)}
     </ul>`;
 	}
+	/** Saving to the remote store, while under way or after it failed */
+	renderRemote(app) {
+		const remote = app.remoteAutosave;
+		if (!remote || !remote.saving && remote.error === void 0) return nothing;
+		const store = remote.store.label ?? this.t("paintCanvas.stats.remoteStore");
+		if (!remote.saving) return html`<li class="remote failed" role="status">
+        ${this.t("paintCanvas.stats.remoteFailed", { store })}
+      </li>`;
+		const label = this.t("paintCanvas.stats.remoteSaving", { store });
+		return html`<li class="remote" role="status">
+      ${label}
+      <progress
+        aria-label=${label}
+        max="1"
+        value=${remote.progress ?? nothing}
+      ></progress>
+    </li>`;
+	}
 };
 defineElement("pc-stats", PcStats);
 export { COLOUR_INTERVAL_MS, PcStats, formatBytes };

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

@@ -1,10 +1,15 @@
 import { PcElement } from "../../base";
+/** Sizes of the switch: `m` (20px high, the default) and `s` (16px high, e.g. in toolbars) */
+export declare const TOGGLE_SIZES: readonly ["m", "s"];
+export type ToggleSize = (typeof TOGGLE_SIZES)[number];
 /**
- * An on/off switch with its text (the element's content) beside it, e.g. for settings. Fires `change` when the user
- * turns it on or off.
+ * An on/off switch with its text (the element's content) beside it, e.g. for settings. Use it instead of plain
+ * checkboxes. It comes in two sizes (`size`: `m`, 20px high, by default, or `s`, 16px high), both pressable over at
+ * least 24px of height. Fires `change` when the user turns it on or off.
  *
  * @example
  * html`<pc-toggle-checkbox .checked=${pinchZoom} @change=${toggle}>Pinch to zoom</pc-toggle-checkbox>`
+ * html`<pc-toggle-checkbox size="s">Show stroke points</pc-toggle-checkbox>`
  */
 export declare class PcToggleCheckbox extends PcElement {
     static properties: {
@@ -16,6 +21,10 @@ export declare class PcToggleCheckbox extends PcElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -30,6 +39,8 @@ export declare class PcToggleCheckbox extends PcElement {
     static styles: import("lit").CSSResultGroup[];
     checked: boolean;
     disabled: boolean;
+    /** The switch's size: `m` (default) or `s` */
+    size: ToggleSize;
     constructor();
     /** Follow the user's change, and tell listeners */
     private onChange;

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

@@ -2,12 +2,16 @@ import { PcElement, defineElement, emit } from "../../base/index.js";
 import { css, html } from "lit";
 import { live } from "lit/directives/live.js";
 // src/ui/elements/PcToggleCheckbox/index.ts
+/** Sizes of the switch: `m` (20px high, the default) and `s` (16px high, e.g. in toolbars) */
+var TOGGLE_SIZES = ["m", "s"];
 /**
-* An on/off switch with its text (the element's content) beside it, e.g. for settings. Fires `change` when the user
-* turns it on or off.
+* An on/off switch with its text (the element's content) beside it, e.g. for settings. Use it instead of plain
+* checkboxes. It comes in two sizes (`size`: `m`, 20px high, by default, or `s`, 16px high), both pressable over at
+* least 24px of height. Fires `change` when the user turns it on or off.
 *
 * @example
 * html`<pc-toggle-checkbox .checked=${pinchZoom} @change=${toggle}>Pinch to zoom</pc-toggle-checkbox>`
+* html`<pc-toggle-checkbox size="s">Show stroke points</pc-toggle-checkbox>`
 */
 var PcToggleCheckbox = class extends PcElement {
 	static properties = {
@@ -19,15 +23,27 @@ var PcToggleCheckbox = class extends PcElement {
 		disabled: {
 			type: Boolean,
 			reflect: true
+		},
+		size: {
+			type: String,
+			reflect: true
 		}
 	};
 	static styles = [PcElement.styles, css`
       :host {
+        --pc-toggle-height: 20px;
+        --pc-toggle-width: 36px;
         display: flex;
       }
+      :host([size="s"]) {
+        --pc-toggle-height: 16px;
+        --pc-toggle-width: 28px;
+      }
       label {
         display: flex;
         flex: 1;
+        /* The pressable area is at least 24px high, whatever the switch's size */
+        min-height: 24px;
         gap: var(--pc-space-2);
         align-items: center;
         color: var(--pc-text);
@@ -42,8 +58,8 @@ var PcToggleCheckbox = class extends PcElement {
       input {
         position: relative;
         flex: none;
-        width: 36px;
-        height: 20px;
+        width: var(--pc-toggle-width);
+        height: var(--pc-toggle-height);
         margin: 0;
         border-radius: var(--pc-radius-pill);
         background: var(--pc-disabled);
@@ -54,8 +70,8 @@ var PcToggleCheckbox = class extends PcElement {
         position: absolute;
         top: 2px;
         left: 2px;
-        width: 16px;
-        height: 16px;
+        width: calc(var(--pc-toggle-height) - 4px);
+        height: calc(var(--pc-toggle-height) - 4px);
         border-radius: 50%;
         background: #ffffff;
         content: "";
@@ -65,7 +81,9 @@ var PcToggleCheckbox = class extends PcElement {
         background: var(--pc-accent);
       }
       input:checked::before {
-        transform: translateX(16px);
+        transform: translateX(
+          calc(var(--pc-toggle-width) - var(--pc-toggle-height))
+        );
       }
       input:focus-visible {
         outline: var(--pc-focus-width) solid var(--pc-focus);
@@ -81,6 +99,7 @@ var PcToggleCheckbox = class extends PcElement {
 		super();
 		this.checked = false;
 		this.disabled = false;
+		this.size = "m";
 	}
 	/** Follow the user's change, and tell listeners */
 	onChange(event) {
@@ -102,4 +121,4 @@ var PcToggleCheckbox = class extends PcElement {
 	}
 };
 defineElement("pc-toggle-checkbox", PcToggleCheckbox);
-export { PcToggleCheckbox };
+export { PcToggleCheckbox, TOGGLE_SIZES };

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

@@ -3,6 +3,7 @@ import { PcElement } from "../../base";
 import PaintCanvas, { Tool } from "../../../lib/classes/PaintCanvas";
 import type { BrushConfig } from "../../../lib/brushes/types";
 import "../PcBrushSize";
+import "../PcToggleCheckbox";
 import "../PcNumberSlider";
 import "../PcPopover";
 /** Settings varied with pen tilt by the tilt toggle */

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

@@ -8,6 +8,7 @@ import "../../../lib/classes/BrushSettings/index.js";
 import { MAX_ZOOM, MIN_ZOOM } from "../../../lib/classes/Viewport/index.js";
 import { iconLabel } from "../../icons/index.js";
 import "../PcBrushSize/index.js";
+import "../PcToggleCheckbox/index.js";
 import "../PcNumberSlider/index.js";
 import "../PcPopover/index.js";
 import { html, nothing, svg, unsafeCSS } from "lit";
@@ -430,15 +431,14 @@ var PcToolSettings = class extends PcElement {
           ${iconLabel(this.iconUrl(app.constrainProportions ? "linked" : "unlinked"), this.t("paintCanvas.toolSettings.constrainProportions"))}
         </label>
         ${side("height", this.t("paintCanvas.common.height"))}
-        <label>
-          <input
-            type="checkbox"
-            class="percent"
-            .checked=${this.percent}
-            @change=${(e) => this.percent = e.target.checked}
-          />
+        <pc-toggle-checkbox
+          class="percent"
+          size="s"
+          .checked=${this.percent}
+          @change=${(e) => this.percent = e.detail.checked}
+        >
           ${this.t("paintCanvas.toolSettings.percent")}
-        </label>
+        </pc-toggle-checkbox>
         <button
           type="button"
           class="icon-button flip-horizontal"

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

@@ -0,0 +1,12 @@
+import { PcElement } from "../../base";
+/**
+ * PaintCanvas's version and the commit it was built from, e.g. "PaintCanvas v0.6.0 (ac12a0d)", as a link to its GitHub
+ * repository (opened in a new tab). For an app's settings or about panel.
+ *
+ * @example
+ * html`<pc-version></pc-version>`
+ */
+export declare class PcVersion extends PcElement {
+    static styles: import("lit").CSSResultGroup[];
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,43 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import { PAINTCANVAS_REPOSITORY_URL, versionText } from "../../../lib/version/index.js";
+import { css, html } from "lit";
+// src/ui/elements/PcVersion/index.ts
+/**
+* PaintCanvas's version and the commit it was built from, e.g. "PaintCanvas v0.6.0 (ac12a0d)", as a link to its GitHub
+* repository (opened in a new tab). For an app's settings or about panel.
+*
+* @example
+* html`<pc-version></pc-version>`
+*/
+var PcVersion = class extends PcElement {
+	static styles = [PcElement.styles, css`
+      :host {
+        display: block;
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size-small);
+      }
+      a {
+        color: var(--pc-text-muted);
+        text-decoration: none;
+      }
+      a:hover {
+        color: var(--pc-text);
+        text-decoration: underline;
+      }
+      a:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 2px;
+      }
+    `];
+	render() {
+		return html`<a
+      part="link"
+      href=${PAINTCANVAS_REPOSITORY_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      >${versionText()}</a
+    >`;
+	}
+};
+defineElement("pc-version", PcVersion);
+export { PcVersion };

package/dist/ui/index.d.ts

@@ -4,6 +4,7 @@ export { PcElement, defineElement, emit } from "./base";
 export { PcIcon } from "./elements/PcIcon";
 export { PcButton, type ButtonVariant } from "./elements/PcButton";
 export { PcButtonGroup } from "./elements/PcButtonGroup";
+export { PcButtonMenu, isNarrowerThan, type ButtonMenuItem, } from "./elements/PcButtonMenu";
 export { PcIconToggle } from "./elements/PcIconToggle";
 export { PcToggleCheckbox } from "./elements/PcToggleCheckbox";
 export { PcSlider } from "./elements/PcSlider";
@@ -27,11 +28,12 @@ export { PcPane, PANE_COLLAPSE_EVENT, type PaneEdge, type PaneOrientation, } fro
 export { PcInputSettings, type InputSettingsLike, } from "./elements/PcInputSettings";
 export { PcMatch } from "./elements/PcMatch";
 export { PcColourPair, COLOUR_CLICK_EVENT } from "./elements/PcColourPair";
-export { PcClipboardTools, CLIPBOARD_TOOLS } from "./elements/PcClipboardTools";
+export { PcClipboardTools, CLIPBOARD_MENU_BELOW, CLIPBOARD_TOOLS, } from "./elements/PcClipboardTools";
 export { PcShortcutSettings, type ShortcutSettingsLike, } from "./elements/PcShortcutSettings";
 export { PcAppSettings } from "./elements/PcAppSettings";
 export { PcPanelColours, LONG_PRESS_MS, type ColourModel, } from "./elements/PcPanelColours";
 export { PcStats, formatBytes } from "./elements/PcStats";
+export { PcVersion } from "./elements/PcVersion";
 export { PcThemePicker, THEMES, THEME_ICONS, isTheme, type Theme, } from "./elements/PcThemePicker";
 export { PaintCanvasElement } from "./elements/PaintCanvas";
 export { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, STATE_EVENT, matchesState, parseSideModes, showsRail, sideModeFor, type InputKind, type LayoutState, type SideMode, type SideModeRule, } from "./layout";

package/dist/ui/index.js

@@ -5,6 +5,7 @@ import { PcElement, defineElement, emit } from "./base/index.js";
 import { PcIcon } from "./elements/PcIcon/index.js";
 import { PcButton } from "./elements/PcButton/index.js";
 import { PcButtonGroup } from "./elements/PcButtonGroup/index.js";
+import { PcButtonMenu, isNarrowerThan } from "./elements/PcButtonMenu/index.js";
 import { PcIconToggle } from "./elements/PcIconToggle/index.js";
 import { PcToggleCheckbox } from "./elements/PcToggleCheckbox/index.js";
 import { PcSlider } from "./elements/PcSlider/index.js";
@@ -28,12 +29,13 @@ import { PANE_COLLAPSE_EVENT, PcPane } from "./elements/PcPane/index.js";
 import { PcInputSettings } from "./elements/PcInputSettings/index.js";
 import { PcMatch } from "./elements/PcMatch/index.js";
 import { COLOUR_CLICK_EVENT, PcColourPair } from "./elements/PcColourPair/index.js";
-import { CLIPBOARD_TOOLS, PcClipboardTools } from "./elements/PcClipboardTools/index.js";
+import { CLIPBOARD_MENU_BELOW, CLIPBOARD_TOOLS, PcClipboardTools } from "./elements/PcClipboardTools/index.js";
 import { PcShortcutSettings } from "./elements/PcShortcutSettings/index.js";
 import { PcAppSettings } from "./elements/PcAppSettings/index.js";
 import { LONG_PRESS_MS, PcPanelColours } from "./elements/PcPanelColours/index.js";
 import { PcStats, formatBytes } from "./elements/PcStats/index.js";
+import { PcVersion } from "./elements/PcVersion/index.js";
 import { PcThemePicker, THEME_ICONS } from "./elements/PcThemePicker/index.js";
 import { PaintCanvasElement } from "./elements/PaintCanvas/index.js";
 import { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, STATE_EVENT, matchesState, parseSideModes, showsRail, sideModeFor } from "./layout/index.js";
-export { CANCEL_CHOICE, CLIPBOARD_TOOLS, COLOUR_CLICK_EVENT, CONTEXT_MENU_TOGGLE_EVENT, DARK_TOKENS, DEFAULT_ICONS, DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, DIALOG_DISMISS_EVENT, DRAG_THRESHOLD, IconRegistry, LIGHT_TOKENS, LONG_PRESS_MS, LayoutStateController, MENU_MARGIN, OK_CHOICE, PANE_COLLAPSE_EVENT, PaintCanvasElement, PcAppSettings, PcBrushSize, PcButton, PcButtonGroup, PcClipboardTools, PcColourPair, PcContextMenu, PcDialog, PcDialogWindow, PcElement, PcIcon, PcIconToggle, PcInfoTip, PcInputSettings, PcMatch, PcMenu, PcNumberSlider, PcPane, PcPanel, PcPanelColours, PcPopover, PcProfileEditor, PcProfileGraph, PcShortcutSettings, PcSlider, PcSliderRange, PcStats, PcThemePicker, PcToast, PcToggleCheckbox, PointerDrag, STATE_EVENT, THEMES, THEME_ICONS, TOAST_DURATION_MS, TOKENS_CSS, askConfirm, askText, curvePath, defineElement, deletePresetQuestion, dragDelta, emit, fitNumber, formatBytes, icons, installTokens, isDismissingPress, isMenuItem, isTheme, markDismissingPress, matchesState, menuLeft, menuSections, menuTop, movePoint, parseSideModes, rangeFraction, showsRail, sideModeFor, sizeText, tokens };
+export { CANCEL_CHOICE, CLIPBOARD_MENU_BELOW, CLIPBOARD_TOOLS, COLOUR_CLICK_EVENT, CONTEXT_MENU_TOGGLE_EVENT, DARK_TOKENS, DEFAULT_ICONS, DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, DIALOG_DISMISS_EVENT, DRAG_THRESHOLD, IconRegistry, LIGHT_TOKENS, LONG_PRESS_MS, LayoutStateController, MENU_MARGIN, OK_CHOICE, PANE_COLLAPSE_EVENT, PaintCanvasElement, PcAppSettings, PcBrushSize, PcButton, PcButtonGroup, PcButtonMenu, PcClipboardTools, PcColourPair, PcContextMenu, PcDialog, PcDialogWindow, PcElement, PcIcon, PcIconToggle, PcInfoTip, PcInputSettings, PcMatch, PcMenu, PcNumberSlider, PcPane, PcPanel, PcPanelColours, PcPopover, PcProfileEditor, PcProfileGraph, PcShortcutSettings, PcSlider, PcSliderRange, PcStats, PcThemePicker, PcToast, PcToggleCheckbox, PcVersion, PointerDrag, STATE_EVENT, THEMES, THEME_ICONS, TOAST_DURATION_MS, TOKENS_CSS, askConfirm, askText, curvePath, defineElement, deletePresetQuestion, dragDelta, emit, fitNumber, formatBytes, icons, installTokens, isDismissingPress, isMenuItem, isNarrowerThan, isTheme, markDismissingPress, matchesState, menuLeft, menuSections, menuTop, movePoint, parseSideModes, rangeFraction, showsRail, sideModeFor, sizeText, tokens };

package/dist/ui/layout/index.d.ts

@@ -16,8 +16,8 @@ export interface SideModeRule {
     mode: SideMode;
     below?: number;
 }
-/** Side modes used unless the implementer chooses others: docked, and a rail below 600px wide */
-export declare const DEFAULT_SIDE_MODES = "docked, rail@600";
+/** Side modes used unless the implementer chooses others: docked, and floating below 600px wide */
+export declare const DEFAULT_SIDE_MODES = "docked, floating@600";
 /** Layout width (CSS pixels) below which the layout counts as narrow, unless the implementer chooses another */
 export declare const DEFAULT_NARROW_WIDTH = 600;
 /**

package/dist/ui/layout/index.js

@@ -14,8 +14,8 @@ var SIDE_MODES = [
 * showsRail("docked"); // false
 */
 var showsRail = (mode) => mode === "rail" || mode === "overlay";
-/** Side modes used unless the implementer chooses others: docked, and a rail below 600px wide */
-var DEFAULT_SIDE_MODES = "docked, rail@600";
+/** Side modes used unless the implementer chooses others: docked, and floating below 600px wide */
+var DEFAULT_SIDE_MODES = "docked, floating@600";
 /** Layout width (CSS pixels) below which the layout counts as narrow, unless the implementer chooses another */
 var DEFAULT_NARROW_WIDTH = 600;
 /**

package/locales/en-GB.json

@@ -66,8 +66,8 @@
   "paintCanvas.palette.hue": "Hue",
   "paintCanvas.palette.saturation": "Saturation",
   "paintCanvas.palette.lightness": "Lightness",
-  "paintCanvas.palette.saved": "Saved colours",
-  "paintCanvas.palette.add": "Save {colour} to the palette",
+  "paintCanvas.palette.saved": "Colour palettes",
+  "paintCanvas.palette.add": "Save {colour} to {name}",
   "paintCanvas.palette.colourActions": "{colour} actions",
   "paintCanvas.palette.deleteColour": "Delete colour",
   "paintCanvas.palette.deleteMessage": "Do you want to delete this colour?",
@@ -75,11 +75,24 @@
   "paintCanvas.palette.import": "Import",
   "paintCanvas.palette.export": "Export",
   "paintCanvas.palette.importFile": "Import colour palette file",
-  "paintCanvas.palette.imported.one": "Added {count} colour",
-  "paintCanvas.palette.imported.other": "Added {count} colours",
+  "paintCanvas.palette.imported.one": "Imported {count} colour palette",
+  "paintCanvas.palette.imported.other": "Imported {count} colour palettes",
   "paintCanvas.palette.fileIncompatible": "Colour palette JSON file not compatible",
+  "paintCanvas.palette.fileUnsupported": "Unsupported colour palettes file version",
   "paintCanvas.palette.fileReadFailed": "Failed to read colour palette JSON file",
   "paintCanvas.palette.exportFailed": "Error exporting colour palette JSON file",
+  "paintCanvas.palette.newPalette": "New palette",
+  "paintCanvas.palette.newPaletteHeading": "New colour palette",
+  "paintCanvas.palette.name": "Name",
+  "paintCanvas.palette.defaultName": "My palette",
+  "paintCanvas.palette.renameHeading": "Rename colour palette",
+  "paintCanvas.palette.paletteActions": "{name} actions",
+  "paintCanvas.palette.renamePalette": "Rename…",
+  "paintCanvas.palette.exportPalette": "Export",
+  "paintCanvas.palette.deletePalette": "Delete…",
+  "paintCanvas.palette.deletePaletteHeading": "Delete colour palette",
+  "paintCanvas.palette.deletePaletteConfirm": "Delete \"{name}\"? This can't be undone.",
+  "paintCanvas.palette.nothingToExport": "No colour palettes to export",
   "paintCanvas.toolbar.label": "Tools",
   "paintCanvas.toolbar.layers": "Layers",
   "paintCanvas.toolbar.menu": "Menu",
@@ -108,7 +121,7 @@
   "paintCanvas.brushMenu.size": "{tool} size",
   "paintCanvas.numberSlider.hint": "Drag sideways to change, or tap to type",
   "paintCanvas.brushMenu.newPreset": "New preset",
-  "paintCanvas.brushMenu.create": "Create",
+  "paintCanvas.brushMenu.create": "New brush",
   "paintCanvas.brushMenu.import": "Import",
   "paintCanvas.brushMenu.export": "Export",
   "paintCanvas.presets.myPresets": "My presets",
@@ -125,6 +138,7 @@
   "paintCanvas.presets.imported.one": "Imported {count} brush preset",
   "paintCanvas.presets.imported.other": "Imported {count} brush presets",
   "paintCanvas.presets.fileIncompatible": "Brush preset JSON file not compatible",
+  "paintCanvas.presets.fileUnsupported": "Unsupported brush presets file version",
   "paintCanvas.presets.fileReadFailed": "Failed to read brush preset JSON file",
   "paintCanvas.presets.exportFailed": "Error exporting brush preset JSON file",
   "paintCanvas.presets.nothingToExport": "No brush presets to export",
@@ -163,6 +177,8 @@
   "paintCanvas.layers.alphaLock": "Alpha lock",
   "paintCanvas.layers.blendMode": "Blending mode",
   "paintCanvas.layers.actions": "Layer actions",
+  "paintCanvas.layers.rename": "Rename…",
+  "paintCanvas.layers.renameTitle": "Rename layer",
   "paintCanvas.layers.reorder": "Reorder {name}: drag, or press for actions",
   "paintCanvas.layers.duplicate": "Duplicate",
   "paintCanvas.layers.createMask": "Create mask",
@@ -288,13 +304,20 @@
   "paintCanvas.settings.importFile": "Import settings file",
   "paintCanvas.settings.imported": "Settings imported",
   "paintCanvas.settings.fileIncompatible": "Settings JSON file not compatible",
+  "paintCanvas.settings.fileUnsupported": "Unsupported settings file version",
   "paintCanvas.settings.fileReadFailed": "Failed to read settings JSON file",
   "paintCanvas.settings.exportFailed": "Error exporting settings JSON file",
+  "paintCanvas.settings.gpu": "Draw with the GPU",
+  "paintCanvas.settings.gpuHint": "Try this if drawing is slow. It applies after reloading the page.",
+  "paintCanvas.settings.reloadToApply": "Reload the page to apply this change.",
   "paintCanvas.stats.label": "Canvas details",
   "paintCanvas.stats.size": "Canvas: {width} × {height} px",
   "paintCanvas.stats.zoom": "Zoom: {zoom}",
   "paintCanvas.stats.colour": "Colour: {colour}",
   "paintCanvas.stats.stored": "Stored: {size}",
+  "paintCanvas.stats.remoteSaving": "Saving to {store}…",
+  "paintCanvas.stats.remoteFailed": "Couldn't save to {store}",
+  "paintCanvas.stats.remoteStore": "the cloud",
   "paintCanvas.theme.label": "Theme",
   "paintCanvas.theme.light": "Light",
   "paintCanvas.theme.dark": "Dark",

package/locales/en-US.json

@@ -66,8 +66,8 @@
   "paintCanvas.palette.hue": "Hue",
   "paintCanvas.palette.saturation": "Saturation",
   "paintCanvas.palette.lightness": "Lightness",
-  "paintCanvas.palette.saved": "Saved colors",
-  "paintCanvas.palette.add": "Save {colour} to the palette",
+  "paintCanvas.palette.saved": "Color palettes",
+  "paintCanvas.palette.add": "Save {colour} to {name}",
   "paintCanvas.palette.colourActions": "{colour} actions",
   "paintCanvas.palette.deleteColour": "Delete color",
   "paintCanvas.palette.deleteMessage": "Do you want to delete this color?",
@@ -75,11 +75,24 @@
   "paintCanvas.palette.import": "Import",
   "paintCanvas.palette.export": "Export",
   "paintCanvas.palette.importFile": "Import color palette file",
-  "paintCanvas.palette.imported.one": "Added {count} color",
-  "paintCanvas.palette.imported.other": "Added {count} colors",
+  "paintCanvas.palette.imported.one": "Imported {count} color palette",
+  "paintCanvas.palette.imported.other": "Imported {count} color palettes",
   "paintCanvas.palette.fileIncompatible": "Color palette JSON file not compatible",
+  "paintCanvas.palette.fileUnsupported": "Unsupported color palettes file version",
   "paintCanvas.palette.fileReadFailed": "Failed to read color palette JSON file",
   "paintCanvas.palette.exportFailed": "Error exporting color palette JSON file",
+  "paintCanvas.palette.newPalette": "New palette",
+  "paintCanvas.palette.newPaletteHeading": "New color palette",
+  "paintCanvas.palette.name": "Name",
+  "paintCanvas.palette.defaultName": "My palette",
+  "paintCanvas.palette.renameHeading": "Rename color palette",
+  "paintCanvas.palette.paletteActions": "{name} actions",
+  "paintCanvas.palette.renamePalette": "Rename…",
+  "paintCanvas.palette.exportPalette": "Export",
+  "paintCanvas.palette.deletePalette": "Delete…",
+  "paintCanvas.palette.deletePaletteHeading": "Delete color palette",
+  "paintCanvas.palette.deletePaletteConfirm": "Delete \"{name}\"? This can't be undone.",
+  "paintCanvas.palette.nothingToExport": "No color palettes to export",
   "paintCanvas.toolbar.label": "Tools",
   "paintCanvas.toolbar.layers": "Layers",
   "paintCanvas.toolbar.menu": "Menu",
@@ -108,7 +121,7 @@
   "paintCanvas.brushMenu.size": "{tool} size",
   "paintCanvas.numberSlider.hint": "Drag sideways to change, or tap to type",
   "paintCanvas.brushMenu.newPreset": "New preset",
-  "paintCanvas.brushMenu.create": "Create",
+  "paintCanvas.brushMenu.create": "New brush",
   "paintCanvas.brushMenu.import": "Import",
   "paintCanvas.brushMenu.export": "Export",
   "paintCanvas.presets.myPresets": "My presets",
@@ -125,6 +138,7 @@
   "paintCanvas.presets.imported.one": "Imported {count} brush preset",
   "paintCanvas.presets.imported.other": "Imported {count} brush presets",
   "paintCanvas.presets.fileIncompatible": "Brush preset JSON file not compatible",
+  "paintCanvas.presets.fileUnsupported": "Unsupported brush presets file version",
   "paintCanvas.presets.fileReadFailed": "Failed to read brush preset JSON file",
   "paintCanvas.presets.exportFailed": "Error exporting brush preset JSON file",
   "paintCanvas.presets.nothingToExport": "No brush presets to export",
@@ -163,6 +177,8 @@
   "paintCanvas.layers.alphaLock": "Alpha lock",
   "paintCanvas.layers.blendMode": "Blending mode",
   "paintCanvas.layers.actions": "Layer actions",
+  "paintCanvas.layers.rename": "Rename…",
+  "paintCanvas.layers.renameTitle": "Rename layer",
   "paintCanvas.layers.reorder": "Reorder {name}: drag, or press for actions",
   "paintCanvas.layers.duplicate": "Duplicate",
   "paintCanvas.layers.createMask": "Create mask",
@@ -288,13 +304,20 @@
   "paintCanvas.settings.importFile": "Import settings file",
   "paintCanvas.settings.imported": "Settings imported",
   "paintCanvas.settings.fileIncompatible": "Settings JSON file not compatible",
+  "paintCanvas.settings.fileUnsupported": "Unsupported settings file version",
   "paintCanvas.settings.fileReadFailed": "Failed to read settings JSON file",
   "paintCanvas.settings.exportFailed": "Error exporting settings JSON file",
+  "paintCanvas.settings.gpu": "Draw with the GPU",
+  "paintCanvas.settings.gpuHint": "Try this if drawing is slow. It applies after reloading the page.",
+  "paintCanvas.settings.reloadToApply": "Reload the page to apply this change.",
   "paintCanvas.stats.label": "Canvas details",
   "paintCanvas.stats.size": "Canvas: {width} × {height} px",
   "paintCanvas.stats.zoom": "Zoom: {zoom}",
   "paintCanvas.stats.colour": "Color: {colour}",
   "paintCanvas.stats.stored": "Stored: {size}",
+  "paintCanvas.stats.remoteSaving": "Saving to {store}…",
+  "paintCanvas.stats.remoteFailed": "Couldn't save to {store}",
+  "paintCanvas.stats.remoteStore": "the cloud",
   "paintCanvas.theme.label": "Theme",
   "paintCanvas.theme.light": "Light",
   "paintCanvas.theme.dark": "Dark",

package/locales/fr.json

@@ -66,8 +66,8 @@
   "paintCanvas.palette.hue": "Teinte",
   "paintCanvas.palette.saturation": "Saturation",
   "paintCanvas.palette.lightness": "Luminosité",
-  "paintCanvas.palette.saved": "Couleurs enregistrées",
-  "paintCanvas.palette.add": "Enregistrer {colour} dans la palette",
+  "paintCanvas.palette.saved": "Palettes de couleurs",
+  "paintCanvas.palette.add": "Enregistrer {colour} dans {name}",
   "paintCanvas.palette.colourActions": "Actions pour {colour}",
   "paintCanvas.palette.deleteColour": "Supprimer la couleur",
   "paintCanvas.palette.deleteMessage": "Voulez-vous supprimer cette couleur ?",
@@ -75,11 +75,24 @@
   "paintCanvas.palette.import": "Importer",
   "paintCanvas.palette.export": "Exporter",
   "paintCanvas.palette.importFile": "Importer un fichier de palette de couleurs",
-  "paintCanvas.palette.imported.one": "{count} couleur ajoutée",
-  "paintCanvas.palette.imported.other": "{count} couleurs ajoutées",
+  "paintCanvas.palette.imported.one": "{count} palette de couleurs importée",
+  "paintCanvas.palette.imported.other": "{count} palettes de couleurs importées",
   "paintCanvas.palette.fileIncompatible": "Fichier JSON de palette de couleurs incompatible",
+  "paintCanvas.palette.fileUnsupported": "Version de fichier de palettes de couleurs non prise en charge",
   "paintCanvas.palette.fileReadFailed": "Échec de la lecture du fichier JSON de palette de couleurs",
   "paintCanvas.palette.exportFailed": "Erreur lors de l'exportation du fichier JSON de palette de couleurs",
+  "paintCanvas.palette.newPalette": "Nouvelle palette",
+  "paintCanvas.palette.newPaletteHeading": "Nouvelle palette de couleurs",
+  "paintCanvas.palette.name": "Nom",
+  "paintCanvas.palette.defaultName": "Ma palette",
+  "paintCanvas.palette.renameHeading": "Renommer la palette de couleurs",
+  "paintCanvas.palette.paletteActions": "Actions de {name}",
+  "paintCanvas.palette.renamePalette": "Renommer…",
+  "paintCanvas.palette.exportPalette": "Exporter",
+  "paintCanvas.palette.deletePalette": "Supprimer…",
+  "paintCanvas.palette.deletePaletteHeading": "Supprimer la palette de couleurs",
+  "paintCanvas.palette.deletePaletteConfirm": "Supprimer « {name} » ? Cette action est irréversible.",
+  "paintCanvas.palette.nothingToExport": "Aucune palette de couleurs à exporter",
   "paintCanvas.toolbar.label": "Outils",
   "paintCanvas.toolbar.layers": "Calques",
   "paintCanvas.toolbar.menu": "Menu",
@@ -108,7 +121,7 @@
   "paintCanvas.brushMenu.size": "Taille : {tool}",
   "paintCanvas.numberSlider.hint": "Faire glisser latéralement pour modifier, ou toucher pour saisir",
   "paintCanvas.brushMenu.newPreset": "Nouveau préréglage",
-  "paintCanvas.brushMenu.create": "Créer",
+  "paintCanvas.brushMenu.create": "Nouveau pinceau",
   "paintCanvas.brushMenu.import": "Importer",
   "paintCanvas.brushMenu.export": "Exporter",
   "paintCanvas.presets.myPresets": "Mes préréglages",
@@ -125,6 +138,7 @@
   "paintCanvas.presets.imported.one": "{count} préréglage de pinceau importé",
   "paintCanvas.presets.imported.other": "{count} préréglages de pinceau importés",
   "paintCanvas.presets.fileIncompatible": "Fichier JSON de préréglages de pinceau incompatible",
+  "paintCanvas.presets.fileUnsupported": "Version de fichier de préréglages de pinceau non prise en charge",
   "paintCanvas.presets.fileReadFailed": "Échec de la lecture du fichier JSON de préréglages de pinceau",
   "paintCanvas.presets.exportFailed": "Erreur lors de l’exportation du fichier JSON de préréglages de pinceau",
   "paintCanvas.presets.nothingToExport": "Aucun préréglage de pinceau à exporter",
@@ -163,6 +177,8 @@
   "paintCanvas.layers.alphaLock": "Verrouillage alpha",
   "paintCanvas.layers.blendMode": "Mode de fusion",
   "paintCanvas.layers.actions": "Actions du calque",
+  "paintCanvas.layers.rename": "Renommer…",
+  "paintCanvas.layers.renameTitle": "Renommer le calque",
   "paintCanvas.layers.reorder": "Réorganiser {name} : faire glisser, ou appuyer pour les actions",
   "paintCanvas.layers.duplicate": "Dupliquer",
   "paintCanvas.layers.createMask": "Créer un masque",
@@ -288,13 +304,20 @@
   "paintCanvas.settings.importFile": "Importer un fichier de réglages",
   "paintCanvas.settings.imported": "Réglages importés",
   "paintCanvas.settings.fileIncompatible": "Fichier JSON de réglages incompatible",
+  "paintCanvas.settings.fileUnsupported": "Version de fichier de paramètres non prise en charge",
   "paintCanvas.settings.fileReadFailed": "Échec de la lecture du fichier JSON de réglages",
   "paintCanvas.settings.exportFailed": "Erreur lors de l'exportation du fichier JSON de réglages",
+  "paintCanvas.settings.gpu": "Dessiner avec le GPU",
+  "paintCanvas.settings.gpuHint": "Essayez ceci si le dessin est lent. Le changement s’applique après le rechargement de la page.",
+  "paintCanvas.settings.reloadToApply": "Rechargez la page pour appliquer ce changement.",
   "paintCanvas.stats.label": "Détails de la toile",
   "paintCanvas.stats.size": "Toile : {width} × {height} px",
   "paintCanvas.stats.zoom": "Zoom : {zoom}",
   "paintCanvas.stats.colour": "Couleur : {colour}",
   "paintCanvas.stats.stored": "Stocké : {size}",
+  "paintCanvas.stats.remoteSaving": "Enregistrement dans {store}…",
+  "paintCanvas.stats.remoteFailed": "Impossible d'enregistrer dans {store}",
+  "paintCanvas.stats.remoteStore": "le cloud",
   "paintCanvas.theme.label": "Thème",
   "paintCanvas.theme.light": "Clair",
   "paintCanvas.theme.dark": "Sombre",