@lvl99dotcom/paintcanvas 0.3.0 → 0.4.0

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

@@ -1,86 +1,93 @@
+import { Tool } from "../../../lib/classes/PaintCanvas/tool.js";
 import style_default from "./style.js";
 import { NO_TEXT_SELECTION_CSS } from "../../styles/index.js";
-import { PcElement, defineElement } from "../../base/index.js";
+import { defineElement } from "../../base/index.js";
+import { PcPane } from "../PcPane/index.js";
 import ChangeController from "../../ChangeController/index.js";
-import { Panel, Tool } from "../../../lib/classes/PaintCanvas/index.js";
-import { cmdSymbol } from "../../../lib/utils/shortcuts/index.js";
+import { Panel } from "../../../lib/classes/PaintCanvas/index.js";
+import { cmdSymbol, shortcutLabel } from "../../../lib/utils/shortcuts/index.js";
+import "../PcColourPair/index.js";
 import { html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcToolbar/index.ts
-/** Toolbar buttons in display order: tool, icon name, translation key of its name, and its keyboard shortcut */
+/** Toolbar buttons in display order: tool, icon name, translation key of its name, and its keyboard shortcut action */
 var TOOLBAR_TOOLS = [
 	{
 		tool: Tool.Brush,
 		icon: "brush",
 		name: "paintCanvas.tool.brush",
-		shortcut: "B"
+		shortcutId: "tool-brush"
 	},
 	{
 		tool: Tool.Eraser,
 		icon: "eraser",
 		name: "paintCanvas.tool.eraser",
-		shortcut: "E"
+		shortcutId: "tool-eraser"
 	},
 	{
 		tool: Tool.Move,
 		icon: "cursor",
 		name: "paintCanvas.tool.move",
-		shortcut: "V"
+		shortcutId: "tool-move"
 	},
 	{
 		tool: Tool.RectangleLasso,
 		icon: "rectangleMask",
 		name: "paintCanvas.tool.rectangleLasso",
-		shortcut: "M"
+		shortcutId: "tool-rectangle-mask"
 	},
 	{
 		tool: Tool.CircleLasso,
 		icon: "circleMask",
 		name: "paintCanvas.tool.circleLasso",
-		shortcut: "Shift+M"
+		shortcutId: "tool-circle-mask"
 	},
 	{
 		tool: Tool.PolygonLasso,
 		icon: "polygonMask",
 		name: "paintCanvas.tool.polygonLasso",
-		shortcut: "L"
+		shortcutId: "tool-polygon-mask"
 	},
 	{
 		tool: Tool.FreeformLasso,
 		icon: "freehandMask",
 		name: "paintCanvas.tool.freeformLasso",
-		shortcut: "Shift+L"
+		shortcutId: "tool-freehand-mask"
 	},
 	{
 		tool: Tool.Pan,
 		icon: "pan",
 		name: "paintCanvas.tool.pan",
-		shortcut: "Space"
+		shortcutId: "pan"
 	},
 	{
 		tool: Tool.Zoom,
 		icon: "zoom",
 		name: "paintCanvas.tool.zoom",
-		shortcut: "Z"
+		shortcutId: "tool-zoom"
 	},
 	{
 		tool: Tool.ColourSample,
 		icon: "eyedropper",
 		name: "paintCanvas.tool.colourSample",
-		shortcut: "I"
+		shortcutId: "tool-colour-sample"
 	}
 ];
 /**
-* Vertical toolbar: current colour, tools, undo and redo (disabled when there is nothing to undo or redo), layers menu
-* toggle (unless `layers` is false) and app menu toggle. Tools, undo, redo and the layers toggle show their icons; undo
-* and redo have their shortcuts (⌘ on Apple devices, ^ elsewhere) in their tooltips. The app menu button shows
-* `menuText` and is named `menuLabel` for screen readers.
+* Vertical toolbar: the foreground and background colours, tools, undo and redo (disabled when there is nothing to undo
+* or redo), layers menu toggle (unless `layers` is false) and app menu toggle. Pressing a colour selects it and opens the
+* colour palette (if it isn't open). Tools, undo, redo and the layers toggle show
+* their icons; tools have the user's keyboard shortcuts in their tooltips, and undo and redo theirs (⌘ on Apple
+* devices, ^ elsewhere). The app menu button shows `menuText` and is named `menuLabel` for screen readers.
+*
+* It's a `PcPane`: the colours and tools are at its start, and undo, redo, the layers toggle and the app menu toggle at
+* its end, after anything slotted there.
 *
 * @example
 * html`<pc-toolbar .app=${app} menuText="App" menuLabel="App menu"></pc-toolbar>`
 */
-var PcToolbar = class extends PcElement {
+var PcToolbar = class extends PcPane {
 	static properties = {
-		...PcElement.properties,
+		...PcPane.properties,
 		app: { attribute: false },
 		menuText: { type: String },
 		menuLabel: { type: String },
@@ -88,7 +95,7 @@ var PcToolbar = class extends PcElement {
 		layers: { type: Boolean }
 	};
 	static styles = [
-		PcElement.styles,
+		...PcPane.styles,
 		unsafeCSS(NO_TEXT_SELECTION_CSS),
 		unsafeCSS(style_default)
 	];
@@ -98,7 +105,11 @@ var PcToolbar = class extends PcElement {
 		this.menu = true;
 		this.layers = true;
 	}
-	changes = new ChangeController(this, () => [this.app, this.app?.history]);
+	changes = new ChangeController(this, () => [
+		this.app,
+		this.app?.history,
+		this.app?.shortcuts
+	]);
 	/**
 	* Select a tool (the brush and eraser presets open from the settings bar, not here).
 	*/
@@ -106,43 +117,54 @@ var PcToolbar = class extends PcElement {
 		this.app?.selectTool(tool, { fromToolbar: true });
 	}
 	/**
-	* Update the drawing colour from the colour input.
+	* Select the pressed colour, and open the colour palette if it isn't open.
 	*/
-	onColourInput(event) {
-		this.app?.setColour(event.target.value);
+	onColourClick(event) {
+		const app = this.app;
+		app.selectColour(event.detail.slot);
+		if (app.panel !== Panel.Palette) app.togglePanel(Panel.Palette);
+	}
+	/** A tool's name, with its keyboard shortcut if it has one */
+	toolLabel(app, name, shortcutId) {
+		const combo = app.shortcuts.combo(shortcutId);
+		return combo ? this.t("paintCanvas.tool.withShortcut", {
+			tool: this.t(name),
+			shortcut: shortcutLabel(combo)
+		}) : this.t(name);
+	}
+	/** The colours and tools */
+	renderStart() {
+		const app = this.app;
+		if (!app) return nothing;
+		return html`<pc-colour-pair
+        .app=${app}
+        @pc-colour-click=${this.onColourClick}
+      ></pc-colour-pair>
+      ${TOOLBAR_TOOLS.map(({ tool, icon, name, shortcutId }) => {
+			const label = this.toolLabel(app, name, shortcutId);
+			return html`<button
+          type="button"
+          data-tool=${tool}
+          title=${label}
+          aria-label=${label}
+          aria-pressed=${app.tool === tool}
+          @click=${() => this.onToolClick(tool)}
+        >
+          <img src=${this.iconUrl(icon)} alt="" />
+        </button>`;
+		})}`;
+	}
+	/** The space between the tools and the end */
+	renderMiddle() {
+		return html`<div class="spacer"></div>`;
 	}
-	render() {
+	/** Undo, redo, and the layers and app menu toggles */
+	renderEnd() {
 		const app = this.app;
-		if (!app) return html``;
+		if (!app) return nothing;
 		const cmd = cmdSymbol();
 		const cmdKey = cmd === "⌘" ? "Meta" : "Control";
-		return html`
-      <input
-        type="color"
-        aria-label=${this.t("paintCanvas.toolbar.currentColour")}
-        .value=${app.colour}
-        @input=${this.onColourInput}
-      />
-      ${TOOLBAR_TOOLS.map(({ tool, icon, name, shortcut }) => {
-			const label = this.t("paintCanvas.tool.withShortcut", {
-				tool: this.t(name),
-				shortcut
-			});
-			return html`
-          <button
-            type="button"
-            data-tool=${tool}
-            title=${label}
-            aria-label=${label}
-            aria-pressed=${app.tool === tool}
-            @click=${() => this.onToolClick(tool)}
-          >
-            <img src=${this.iconUrl(icon)} alt="" />
-          </button>
-        `;
-		})}
-      <div class="spacer"></div>
-      <button
+		return html`<button
         type="button"
         data-action="undo"
         title=${this.t("paintCanvas.toolbar.undoWithShortcut", { shortcut: `${cmd}Z` })}
@@ -182,8 +204,7 @@ var PcToolbar = class extends PcElement {
               @click=${() => app.togglePanel(Panel.Menu)}
             >
               ${this.menuText}
-            </button>` : nothing}
-    `;
+            </button>` : nothing}`;
 	}
 };
 defineElement("pc-toolbar", PcToolbar);

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcToolbar/style.css?inline
-var style_default = ":host {\n  display: flex;\n  flex-direction: column;\n  width: 50px;\n  height: 100%;\n  background: var(--pc-bar);\n  border-right: 1px solid var(--pc-border);\n}\nbutton,\ninput {\n  width: 50px;\n  height: 50px;\n}\n/* Buttons separated by thin lines, as designed */\nbutton {\n  border: 0;\n  border-bottom: 1px solid var(--pc-border);\n  background: transparent;\n  font-size: 20px;\n}\nbutton:hover {\n  background: var(--pc-surface-hover);\n}\n/* The open panel */\nbutton[aria-expanded=\"true\"] {\n  background: var(--pc-surface-active);\n}\n/* The selected tool, like other pressed icon buttons */\nbutton[aria-pressed=\"true\"],\nbutton[aria-pressed=\"true\"]:hover {\n  background: var(--pc-accent);\n}\nbutton:disabled {\n  opacity: 0.4;\n  background: transparent;\n}\nbutton:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\nimg {\n  display: block;\n  width: 40px;\n  height: 40px;\n  margin: auto;\n}\n.spacer {\n  flex: 1;\n  border-bottom: 1px solid var(--pc-border);\n}\n";
+var style_default = ":host {\n  width: 50px;\n  height: 100%;\n  background: var(--pc-bar);\n  border-right: 1px solid var(--pc-border);\n}\nbutton {\n  width: 50px;\n  height: 50px;\n}\npc-colour-pair {\n  border-bottom: 1px solid var(--pc-border);\n}\n/* Buttons separated by thin lines, as designed */\nbutton {\n  border: 0;\n  border-bottom: 1px solid var(--pc-border);\n  background: transparent;\n  font-size: 20px;\n}\nbutton:hover {\n  background: var(--pc-surface-hover);\n}\n/* The open panel */\nbutton[aria-expanded=\"true\"] {\n  background: var(--pc-surface-active);\n}\n/* The selected tool, like other pressed icon buttons */\nbutton[aria-pressed=\"true\"],\nbutton[aria-pressed=\"true\"]:hover {\n  background: var(--pc-accent);\n}\nbutton:disabled {\n  opacity: 0.4;\n  background: transparent;\n}\nbutton:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\nimg {\n  display: block;\n  width: 40px;\n  height: 40px;\n  margin: auto;\n}\n/* All the buttons in one column, so they shrink together when the toolbar is short */\n.start,\n.middle,\n.end {\n  display: contents;\n}\n/* The space between the tools and the end */\n.spacer {\n  flex: 1;\n  border-bottom: 1px solid var(--pc-border);\n}\n";
 export { style_default as default };

package/dist/ui/index.d.ts

@@ -7,14 +7,20 @@ export { PcButtonGroup } from "./elements/PcButtonGroup";
 export { PcIconToggle } from "./elements/PcIconToggle";
 export { PcToggleCheckbox } from "./elements/PcToggleCheckbox";
 export { PcSlider } from "./elements/PcSlider";
-export { PcContextMenu, type MenuItem } from "./elements/PcContextMenu";
+export { PcMenu, type MenuItem } from "./elements/PcMenu";
+export { PcContextMenu, CONTEXT_MENU_TOGGLE_EVENT, MENU_MARGIN, menuLeft, menuTop, type MenuPlacement, } from "./elements/PcContextMenu";
 export { PcDialog, CANCEL_CHOICE, type DialogChoice, } from "./elements/PcDialog";
 export { PcToast, TOAST_DURATION_MS, type ToastKind } from "./elements/PcToast";
 export { PcInfoTip } from "./elements/PcInfoTip";
 export { PcPopover } from "./elements/PcPopover";
 export { PcPanel } from "./elements/PcPanel";
+export { PcPane, PANE_COLLAPSE_EVENT, type PaneEdge, type PaneOrientation, } from "./elements/PcPane";
 export { PcInputSettings, type InputSettingsLike, } from "./elements/PcInputSettings";
 export { PcMatch } from "./elements/PcMatch";
+export { PcColourPair, COLOUR_CLICK_EVENT } from "./elements/PcColourPair";
+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 { PcThemePicker, THEMES, THEME_ICONS, isTheme, type Theme, } from "./elements/PcThemePicker";
 export { PaintCanvasElement } from "./elements/PaintCanvas";

package/dist/ui/index.js

@@ -7,16 +7,22 @@ import { PcButtonGroup } from "./elements/PcButtonGroup/index.js";
 import { PcIconToggle } from "./elements/PcIconToggle/index.js";
 import { PcToggleCheckbox } from "./elements/PcToggleCheckbox/index.js";
 import { PcSlider } from "./elements/PcSlider/index.js";
-import { PcContextMenu } from "./elements/PcContextMenu/index.js";
+import { PcMenu } from "./elements/PcMenu/index.js";
+import { CONTEXT_MENU_TOGGLE_EVENT, MENU_MARGIN, PcContextMenu, menuLeft, menuTop } from "./elements/PcContextMenu/index.js";
 import { CANCEL_CHOICE, PcDialog } from "./elements/PcDialog/index.js";
 import { PcToast, TOAST_DURATION_MS } from "./elements/PcToast/index.js";
 import { PcInfoTip } from "./elements/PcInfoTip/index.js";
 import { PcPopover } from "./elements/PcPopover/index.js";
 import { PcPanel } from "./elements/PcPanel/index.js";
+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 { 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 { PcThemePicker, THEMES, THEME_ICONS, isTheme } from "./elements/PcThemePicker/index.js";
 import { PaintCanvasElement } from "./elements/PaintCanvas/index.js";
 import { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, STATE_EVENT, matchesState, parseSideModes, sideModeFor } from "./layout/index.js";
-export { CANCEL_CHOICE, DARK_TOKENS, DEFAULT_ICONS, DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, IconRegistry, LIGHT_TOKENS, LayoutStateController, PaintCanvasElement, PcButton, PcButtonGroup, PcContextMenu, PcDialog, PcElement, PcIcon, PcIconToggle, PcInfoTip, PcInputSettings, PcMatch, PcPanel, PcPopover, PcSlider, PcStats, PcThemePicker, PcToast, PcToggleCheckbox, STATE_EVENT, THEMES, THEME_ICONS, TOAST_DURATION_MS, TOKENS_CSS, defineElement, emit, formatBytes, icons, installTokens, isTheme, matchesState, parseSideModes, sideModeFor, tokens };
+export { CANCEL_CHOICE, COLOUR_CLICK_EVENT, CONTEXT_MENU_TOGGLE_EVENT, DARK_TOKENS, DEFAULT_ICONS, DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, IconRegistry, LIGHT_TOKENS, LONG_PRESS_MS, LayoutStateController, MENU_MARGIN, PANE_COLLAPSE_EVENT, PaintCanvasElement, PcAppSettings, PcButton, PcButtonGroup, PcColourPair, PcContextMenu, PcDialog, PcElement, PcIcon, PcIconToggle, PcInfoTip, PcInputSettings, PcMatch, PcMenu, PcPane, PcPanel, PcPanelColours, PcPopover, PcShortcutSettings, PcSlider, PcStats, PcThemePicker, PcToast, PcToggleCheckbox, STATE_EVENT, THEMES, THEME_ICONS, TOAST_DURATION_MS, TOKENS_CSS, defineElement, emit, formatBytes, icons, installTokens, isTheme, matchesState, menuLeft, menuTop, parseSideModes, sideModeFor, tokens };

package/dist/ui/tokens/index.js

@@ -1,3 +1,4 @@
+import { DELETE_CURSOR } from "../../lib/rendering/cursors/index.js";
 import { unsafeCSS } from "lit";
 // src/ui/tokens/index.ts
 /** The light theme's tokens: colours, spacing, corner radius, fonts and focus ring */
@@ -42,7 +43,8 @@ var LIGHT_TOKENS = {
 	"font-size-small": "12px",
 	focus: "#000000",
 	"focus-width": "3px",
-	"color-scheme": "light"
+	"color-scheme": "light",
+	"delete-cursor": DELETE_CURSOR
 };
 /** The dark theme's tokens that differ from the light theme's */
 var DARK_TOKENS = {

package/locales/en-GB.json

@@ -25,8 +25,34 @@
   "paintCanvas.tool.zoom": "Zoom",
   "paintCanvas.tool.colourSample": "Colour sample",
   "paintCanvas.tool.withShortcut": "{tool} ({shortcut})",
+  "paintCanvas.colours.foreground": "Foreground colour ({colour})",
+  "paintCanvas.colours.background": "Background colour ({colour})",
+  "paintCanvas.palette.label": "Colour palette",
+  "paintCanvas.palette.hex": "Hex colour",
+  "paintCanvas.palette.model": "Colour model",
+  "paintCanvas.palette.rgb": "RGB",
+  "paintCanvas.palette.hsl": "HSL",
+  "paintCanvas.palette.red": "Red",
+  "paintCanvas.palette.green": "Green",
+  "paintCanvas.palette.blue": "Blue",
+  "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.colourActions": "{colour} actions",
+  "paintCanvas.palette.deleteColour": "Delete colour",
+  "paintCanvas.palette.deleteMessage": "Do you want to delete this colour?",
+  "paintCanvas.palette.deleteConfirm": "Yes, delete colour",
+  "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.fileIncompatible": "Colour palette JSON file not compatible",
+  "paintCanvas.palette.fileReadFailed": "Failed to read colour palette JSON file",
+  "paintCanvas.palette.exportFailed": "Error exporting colour palette JSON file",
   "paintCanvas.toolbar.label": "Tools",
-  "paintCanvas.toolbar.currentColour": "Current colour",
   "paintCanvas.toolbar.layers": "Layers",
   "paintCanvas.toolbar.menu": "Menu",
   "paintCanvas.toolbar.undoWithShortcut": "Undo ({shortcut})",
@@ -167,6 +193,66 @@
   "paintCanvas.autosave.elsewhereMessage": "This drawing is open in another window or tab, and only one can draw on it at a time. Choose \"Draw here instead\" to continue in this window; the other one stops.",
   "paintCanvas.autosave.takeOver": "Draw here instead",
   "paintCanvas.autosave.failed": "Couldn't keep the drawing in this browser",
+  "paintCanvas.settings.saveFailed": "Couldn't keep your settings in this browser",
+  "paintCanvas.shortcuts.title": "Keyboard shortcuts",
+  "paintCanvas.shortcuts.recordHint": "Press the keys to use",
+  "paintCanvas.shortcuts.none": "None",
+  "paintCanvas.shortcuts.remove": "Remove the {action} shortcut",
+  "paintCanvas.shortcuts.fixed": "Can't be changed",
+  "paintCanvas.shortcuts.fixedUsed": "{keys} is used by {action}, which can't be changed",
+  "paintCanvas.shortcuts.moved": "{keys} moved from {from} to {to}",
+  "paintCanvas.shortcuts.reset": "Reset to defaults",
+  "paintCanvas.shortcuts.wasReset": "Keyboard shortcuts reset to defaults",
+  "paintCanvas.shortcuts.group.tools": "Tools",
+  "paintCanvas.shortcuts.group.brushes": "Brushes & erasers",
+  "paintCanvas.shortcuts.group.clipboard": "Clipboard",
+  "paintCanvas.shortcuts.group.masking": "Masking",
+  "paintCanvas.shortcuts.group.fills": "Fills and colours",
+  "paintCanvas.shortcuts.group.viewport": "View",
+  "paintCanvas.shortcuts.group.layers": "Layers",
+  "paintCanvas.shortcuts.group.history": "History",
+  "paintCanvas.shortcuts.group.general": "General",
+  "paintCanvas.shortcuts.pan": "Pan while held (back to the last tool when let go)",
+  "paintCanvas.shortcuts.tool-move": "Move",
+  "paintCanvas.shortcuts.tool-brush": "Brush",
+  "paintCanvas.shortcuts.tool-eraser": "Eraser",
+  "paintCanvas.shortcuts.tool-rectangle-mask": "Rectangle mask",
+  "paintCanvas.shortcuts.tool-circle-mask": "Circle mask",
+  "paintCanvas.shortcuts.tool-polygon-mask": "Polygon mask",
+  "paintCanvas.shortcuts.tool-freehand-mask": "Freehand mask",
+  "paintCanvas.shortcuts.tool-colour-sample": "Colour sampler",
+  "paintCanvas.shortcuts.tool-zoom": "Zoom",
+  "paintCanvas.shortcuts.brush-bigger": "Increase size",
+  "paintCanvas.shortcuts.brush-smaller": "Decrease size",
+  "paintCanvas.shortcuts.brush-more-opaque": "Increase opacity",
+  "paintCanvas.shortcuts.brush-less-opaque": "Decrease opacity",
+  "paintCanvas.shortcuts.cut": "Cut",
+  "paintCanvas.shortcuts.copy": "Copy",
+  "paintCanvas.shortcuts.paste": "Paste",
+  "paintCanvas.shortcuts.select-all": "Select all",
+  "paintCanvas.shortcuts.invert-selection": "Invert selection",
+  "paintCanvas.shortcuts.deselect": "Deselect",
+  "paintCanvas.shortcuts.fill-foreground": "Fill with foreground colour",
+  "paintCanvas.shortcuts.fill-background": "Fill with background colour",
+  "paintCanvas.shortcuts.swap-colours": "Swap foreground and background colours",
+  "paintCanvas.shortcuts.zoom-in": "Zoom in",
+  "paintCanvas.shortcuts.zoom-out": "Zoom out",
+  "paintCanvas.shortcuts.reset-zoom": "Zoom to 100%",
+  "paintCanvas.shortcuts.toggle-interface": "Show or hide the interface",
+  "paintCanvas.shortcuts.save": "Save as PNG",
+  "paintCanvas.shortcuts.undo": "Undo",
+  "paintCanvas.shortcuts.redo": "Redo",
+  "paintCanvas.shortcuts.delete": "Delete the masked area",
+  "paintCanvas.shortcuts.cancel": "Cancel",
+  "paintCanvas.shortcuts.commit": "Apply",
+  "paintCanvas.shortcuts.layerOpacity": "Set layer opacity to {percent}%",
+  "paintCanvas.settings.import": "Import settings",
+  "paintCanvas.settings.export": "Export settings",
+  "paintCanvas.settings.importFile": "Import settings file",
+  "paintCanvas.settings.imported": "Settings imported",
+  "paintCanvas.settings.fileIncompatible": "Settings JSON file not compatible",
+  "paintCanvas.settings.fileReadFailed": "Failed to read settings JSON file",
+  "paintCanvas.settings.exportFailed": "Error exporting settings JSON file",
   "paintCanvas.stats.label": "Canvas details",
   "paintCanvas.stats.size": "Canvas: {width} × {height} px",
   "paintCanvas.stats.zoom": "Zoom: {zoom}",

package/locales/en-US.json

@@ -25,8 +25,34 @@
   "paintCanvas.tool.zoom": "Zoom",
   "paintCanvas.tool.colourSample": "Color sample",
   "paintCanvas.tool.withShortcut": "{tool} ({shortcut})",
+  "paintCanvas.colours.foreground": "Foreground color ({colour})",
+  "paintCanvas.colours.background": "Background color ({colour})",
+  "paintCanvas.palette.label": "Color palette",
+  "paintCanvas.palette.hex": "Hex color",
+  "paintCanvas.palette.model": "Color model",
+  "paintCanvas.palette.rgb": "RGB",
+  "paintCanvas.palette.hsl": "HSL",
+  "paintCanvas.palette.red": "Red",
+  "paintCanvas.palette.green": "Green",
+  "paintCanvas.palette.blue": "Blue",
+  "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.colourActions": "{colour} actions",
+  "paintCanvas.palette.deleteColour": "Delete color",
+  "paintCanvas.palette.deleteMessage": "Do you want to delete this color?",
+  "paintCanvas.palette.deleteConfirm": "Yes, delete color",
+  "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.fileIncompatible": "Color palette JSON file not compatible",
+  "paintCanvas.palette.fileReadFailed": "Failed to read color palette JSON file",
+  "paintCanvas.palette.exportFailed": "Error exporting color palette JSON file",
   "paintCanvas.toolbar.label": "Tools",
-  "paintCanvas.toolbar.currentColour": "Current color",
   "paintCanvas.toolbar.layers": "Layers",
   "paintCanvas.toolbar.menu": "Menu",
   "paintCanvas.toolbar.undoWithShortcut": "Undo ({shortcut})",
@@ -167,6 +193,66 @@
   "paintCanvas.autosave.elsewhereMessage": "This drawing is open in another window or tab, and only one can draw on it at a time. Choose \"Draw here instead\" to continue in this window; the other one stops.",
   "paintCanvas.autosave.takeOver": "Draw here instead",
   "paintCanvas.autosave.failed": "Couldn't keep the drawing in this browser",
+  "paintCanvas.settings.saveFailed": "Couldn't keep your settings in this browser",
+  "paintCanvas.shortcuts.title": "Keyboard shortcuts",
+  "paintCanvas.shortcuts.recordHint": "Press the keys to use",
+  "paintCanvas.shortcuts.none": "None",
+  "paintCanvas.shortcuts.remove": "Remove the {action} shortcut",
+  "paintCanvas.shortcuts.fixed": "Can't be changed",
+  "paintCanvas.shortcuts.fixedUsed": "{keys} is used by {action}, which can't be changed",
+  "paintCanvas.shortcuts.moved": "{keys} moved from {from} to {to}",
+  "paintCanvas.shortcuts.reset": "Reset to defaults",
+  "paintCanvas.shortcuts.wasReset": "Keyboard shortcuts reset to defaults",
+  "paintCanvas.shortcuts.group.tools": "Tools",
+  "paintCanvas.shortcuts.group.brushes": "Brushes & erasers",
+  "paintCanvas.shortcuts.group.clipboard": "Clipboard",
+  "paintCanvas.shortcuts.group.masking": "Masking",
+  "paintCanvas.shortcuts.group.fills": "Fills and colors",
+  "paintCanvas.shortcuts.group.viewport": "View",
+  "paintCanvas.shortcuts.group.layers": "Layers",
+  "paintCanvas.shortcuts.group.history": "History",
+  "paintCanvas.shortcuts.group.general": "General",
+  "paintCanvas.shortcuts.pan": "Pan while held (back to the last tool when let go)",
+  "paintCanvas.shortcuts.tool-move": "Move",
+  "paintCanvas.shortcuts.tool-brush": "Brush",
+  "paintCanvas.shortcuts.tool-eraser": "Eraser",
+  "paintCanvas.shortcuts.tool-rectangle-mask": "Rectangle mask",
+  "paintCanvas.shortcuts.tool-circle-mask": "Circle mask",
+  "paintCanvas.shortcuts.tool-polygon-mask": "Polygon mask",
+  "paintCanvas.shortcuts.tool-freehand-mask": "Freehand mask",
+  "paintCanvas.shortcuts.tool-colour-sample": "Color sampler",
+  "paintCanvas.shortcuts.tool-zoom": "Zoom",
+  "paintCanvas.shortcuts.brush-bigger": "Increase size",
+  "paintCanvas.shortcuts.brush-smaller": "Decrease size",
+  "paintCanvas.shortcuts.brush-more-opaque": "Increase opacity",
+  "paintCanvas.shortcuts.brush-less-opaque": "Decrease opacity",
+  "paintCanvas.shortcuts.cut": "Cut",
+  "paintCanvas.shortcuts.copy": "Copy",
+  "paintCanvas.shortcuts.paste": "Paste",
+  "paintCanvas.shortcuts.select-all": "Select all",
+  "paintCanvas.shortcuts.invert-selection": "Invert selection",
+  "paintCanvas.shortcuts.deselect": "Deselect",
+  "paintCanvas.shortcuts.fill-foreground": "Fill with foreground color",
+  "paintCanvas.shortcuts.fill-background": "Fill with background color",
+  "paintCanvas.shortcuts.swap-colours": "Swap foreground and background colors",
+  "paintCanvas.shortcuts.zoom-in": "Zoom in",
+  "paintCanvas.shortcuts.zoom-out": "Zoom out",
+  "paintCanvas.shortcuts.reset-zoom": "Zoom to 100%",
+  "paintCanvas.shortcuts.toggle-interface": "Show or hide the interface",
+  "paintCanvas.shortcuts.save": "Save as PNG",
+  "paintCanvas.shortcuts.undo": "Undo",
+  "paintCanvas.shortcuts.redo": "Redo",
+  "paintCanvas.shortcuts.delete": "Delete the masked area",
+  "paintCanvas.shortcuts.cancel": "Cancel",
+  "paintCanvas.shortcuts.commit": "Apply",
+  "paintCanvas.shortcuts.layerOpacity": "Set layer opacity to {percent}%",
+  "paintCanvas.settings.import": "Import settings",
+  "paintCanvas.settings.export": "Export settings",
+  "paintCanvas.settings.importFile": "Import settings file",
+  "paintCanvas.settings.imported": "Settings imported",
+  "paintCanvas.settings.fileIncompatible": "Settings JSON file not compatible",
+  "paintCanvas.settings.fileReadFailed": "Failed to read settings JSON file",
+  "paintCanvas.settings.exportFailed": "Error exporting settings JSON file",
   "paintCanvas.stats.label": "Canvas details",
   "paintCanvas.stats.size": "Canvas: {width} × {height} px",
   "paintCanvas.stats.zoom": "Zoom: {zoom}",

package/locales/fr.json

@@ -25,8 +25,34 @@
   "paintCanvas.tool.zoom": "Zoom",
   "paintCanvas.tool.colourSample": "Pipette",
   "paintCanvas.tool.withShortcut": "{tool} ({shortcut})",
+  "paintCanvas.colours.foreground": "Couleur de premier plan ({colour})",
+  "paintCanvas.colours.background": "Couleur d'arrière-plan ({colour})",
+  "paintCanvas.palette.label": "Palette de couleurs",
+  "paintCanvas.palette.hex": "Couleur hexadécimale",
+  "paintCanvas.palette.model": "Modèle de couleur",
+  "paintCanvas.palette.rgb": "RVB",
+  "paintCanvas.palette.hsl": "TSL",
+  "paintCanvas.palette.red": "Rouge",
+  "paintCanvas.palette.green": "Vert",
+  "paintCanvas.palette.blue": "Bleu",
+  "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.colourActions": "Actions pour {colour}",
+  "paintCanvas.palette.deleteColour": "Supprimer la couleur",
+  "paintCanvas.palette.deleteMessage": "Voulez-vous supprimer cette couleur ?",
+  "paintCanvas.palette.deleteConfirm": "Oui, supprimer la couleur",
+  "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.fileIncompatible": "Fichier JSON de palette de couleurs incompatible",
+  "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.toolbar.label": "Outils",
-  "paintCanvas.toolbar.currentColour": "Couleur actuelle",
   "paintCanvas.toolbar.layers": "Calques",
   "paintCanvas.toolbar.menu": "Menu",
   "paintCanvas.toolbar.undoWithShortcut": "Annuler ({shortcut})",
@@ -167,6 +193,66 @@
   "paintCanvas.autosave.elsewhereMessage": "Ce dessin est ouvert dans une autre fenêtre ou un autre onglet, et un seul peut dessiner dessus à la fois. Choisissez « Dessiner ici » pour continuer dans cette fenêtre ; l’autre s’arrête.",
   "paintCanvas.autosave.takeOver": "Dessiner ici",
   "paintCanvas.autosave.failed": "Impossible de conserver le dessin dans ce navigateur",
+  "paintCanvas.settings.saveFailed": "Impossible de conserver vos réglages dans ce navigateur",
+  "paintCanvas.shortcuts.title": "Raccourcis clavier",
+  "paintCanvas.shortcuts.recordHint": "Appuyez sur les touches à utiliser",
+  "paintCanvas.shortcuts.none": "Aucun",
+  "paintCanvas.shortcuts.remove": "Supprimer le raccourci de {action}",
+  "paintCanvas.shortcuts.fixed": "Non modifiable",
+  "paintCanvas.shortcuts.fixedUsed": "{keys} est utilisé par {action}, qui n'est pas modifiable",
+  "paintCanvas.shortcuts.moved": "{keys} déplacé de {from} vers {to}",
+  "paintCanvas.shortcuts.reset": "Rétablir les valeurs par défaut",
+  "paintCanvas.shortcuts.wasReset": "Raccourcis clavier rétablis",
+  "paintCanvas.shortcuts.group.tools": "Outils",
+  "paintCanvas.shortcuts.group.brushes": "Pinceaux et gommes",
+  "paintCanvas.shortcuts.group.clipboard": "Presse-papiers",
+  "paintCanvas.shortcuts.group.masking": "Masques",
+  "paintCanvas.shortcuts.group.fills": "Remplissages et couleurs",
+  "paintCanvas.shortcuts.group.viewport": "Affichage",
+  "paintCanvas.shortcuts.group.layers": "Calques",
+  "paintCanvas.shortcuts.group.history": "Historique",
+  "paintCanvas.shortcuts.group.general": "Général",
+  "paintCanvas.shortcuts.pan": "Déplacer la vue tant que maintenu (retour à l'outil précédent au relâchement)",
+  "paintCanvas.shortcuts.tool-move": "Déplacer",
+  "paintCanvas.shortcuts.tool-brush": "Pinceau",
+  "paintCanvas.shortcuts.tool-eraser": "Gomme",
+  "paintCanvas.shortcuts.tool-rectangle-mask": "Masque rectangulaire",
+  "paintCanvas.shortcuts.tool-circle-mask": "Masque circulaire",
+  "paintCanvas.shortcuts.tool-polygon-mask": "Masque polygonal",
+  "paintCanvas.shortcuts.tool-freehand-mask": "Masque à main levée",
+  "paintCanvas.shortcuts.tool-colour-sample": "Pipette",
+  "paintCanvas.shortcuts.tool-zoom": "Zoom",
+  "paintCanvas.shortcuts.brush-bigger": "Augmenter la taille",
+  "paintCanvas.shortcuts.brush-smaller": "Réduire la taille",
+  "paintCanvas.shortcuts.brush-more-opaque": "Augmenter l'opacité",
+  "paintCanvas.shortcuts.brush-less-opaque": "Réduire l'opacité",
+  "paintCanvas.shortcuts.cut": "Couper",
+  "paintCanvas.shortcuts.copy": "Copier",
+  "paintCanvas.shortcuts.paste": "Coller",
+  "paintCanvas.shortcuts.select-all": "Tout sélectionner",
+  "paintCanvas.shortcuts.invert-selection": "Inverser la sélection",
+  "paintCanvas.shortcuts.deselect": "Désélectionner",
+  "paintCanvas.shortcuts.fill-foreground": "Remplir avec la couleur de premier plan",
+  "paintCanvas.shortcuts.fill-background": "Remplir avec la couleur d'arrière-plan",
+  "paintCanvas.shortcuts.swap-colours": "Inverser les couleurs de premier plan et d'arrière-plan",
+  "paintCanvas.shortcuts.zoom-in": "Zoom avant",
+  "paintCanvas.shortcuts.zoom-out": "Zoom arrière",
+  "paintCanvas.shortcuts.reset-zoom": "Zoom à 100 %",
+  "paintCanvas.shortcuts.toggle-interface": "Afficher ou masquer l'interface",
+  "paintCanvas.shortcuts.save": "Enregistrer en PNG",
+  "paintCanvas.shortcuts.undo": "Annuler",
+  "paintCanvas.shortcuts.redo": "Rétablir",
+  "paintCanvas.shortcuts.delete": "Supprimer la zone masquée",
+  "paintCanvas.shortcuts.cancel": "Annuler l'action en cours",
+  "paintCanvas.shortcuts.commit": "Appliquer",
+  "paintCanvas.shortcuts.layerOpacity": "Régler l'opacité du calque à {percent} %",
+  "paintCanvas.settings.import": "Importer les réglages",
+  "paintCanvas.settings.export": "Exporter les réglages",
+  "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.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.stats.label": "Détails de la toile",
   "paintCanvas.stats.size": "Toile : {width} × {height} px",
   "paintCanvas.stats.zoom": "Zoom : {zoom}",