@lvl99dotcom/paintcanvas 0.0.0-stage → 0.3.0

package/dist/ui/layout/index.js

@@ -0,0 +1,96 @@
+// src/ui/layout/index.ts
+/** All side modes */
+var SIDE_MODES = [
+	"docked",
+	"rail",
+	"floating"
+];
+/** Side modes used unless the implementer chooses others: docked, and a rail below 600px wide */
+var DEFAULT_SIDE_MODES = "docked, rail@600";
+/** Layout width (CSS pixels) below which the layout counts as narrow, unless the implementer chooses another */
+var DEFAULT_NARROW_WIDTH = 600;
+/**
+* Read a side's modes, e.g. `"docked, rail@600, floating@400"`: docked, a rail below 600px wide, and floating below
+* 400px. Unknown modes and widths that aren't numbers are left out.
+*
+* @example
+* parseSideModes("docked, rail@600"); // [{ mode: "docked" }, { mode: "rail", below: 600 }]
+*/
+var parseSideModes = (text) => text.split(",").map((part) => part.trim().split("@")).filter(([mode, below]) => SIDE_MODES.includes(mode) && (below === void 0 || Number.isFinite(Number(below)))).map(([mode, below]) => below === void 0 ? { mode } : {
+	mode,
+	below: Number(below)
+});
+/**
+* The side mode for a layout width: the rule with the smallest width the layout is below, otherwise the rule without
+* a width (docked if there's none).
+*
+* @example
+* sideModeFor(parseSideModes("docked, rail@600, floating@400"), 500); // "rail"
+*/
+var sideModeFor = (rules, width) => {
+	let chosen = rules.find((rule) => rule.below === void 0)?.mode ?? "docked";
+	let limit = Infinity;
+	for (const rule of rules) if (rule.below !== void 0 && width < rule.below && rule.below < limit) {
+		chosen = rule.mode;
+		limit = rule.below;
+	}
+	return chosen;
+};
+/** Event the layout dispatches when its state changes (detail: `LayoutState`) */
+var STATE_EVENT = "pc-state-change";
+/**
+* Whether a layout state meets a condition: space-separated terms that must all hold, each `narrow`, `ui-hidden`,
+* `input:pen`, `input:touch`, `input:mouse`, `left:<mode>` or `right:<mode>`, optionally negated with `!`.
+*
+* @example
+* matchesState("narrow !input:pen", state);
+*/
+var matchesState = (condition, state) => condition.split(/\s+/).filter(Boolean).every((term) => {
+	const negated = term.startsWith("!");
+	const [name, value] = (negated ? term.slice(1) : term).split(":");
+	return (name === "narrow" ? state.narrow : name === "ui-hidden" ? state.uiHidden : name === "input" ? state.input === value : name === "left" ? state.leftMode === value : name === "right" ? state.rightMode === value : false) !== negated;
+});
+/**
+* The nearest `<paint-canvas>` layout around an element, looking through shadow roots, if any.
+*/
+var findLayout = (element) => {
+	let node = element;
+	while (node) {
+		if (node instanceof Element && node.tagName === "PAINT-CANVAS") return node;
+		node = node.parentNode instanceof ShadowRoot ? node.parentNode.host : node.parentNode ?? null;
+	}
+};
+/**
+* Keeps a Lit element up to date with the state of the `<paint-canvas>` layout it's in (see `LayoutState`), so it can
+* render differently per device or size. `state` is undefined outside a layout.
+*
+* @example
+* class MyThing extends LitElement {
+*   private layout = new LayoutStateController(this);
+*   override render() {
+*     return this.layout.state?.narrow ? html`…` : html`…`;
+*   }
+* }
+*/
+var LayoutStateController = class {
+	host;
+	source;
+	onChange = () => this.host.requestUpdate();
+	constructor(host) {
+		this.host = host;
+		host.addController(this);
+	}
+	/** The layout's state, if the element is in a layout */
+	get state() {
+		return this.source?.state;
+	}
+	hostConnected() {
+		this.source = findLayout(this.host);
+		this.source?.addEventListener(STATE_EVENT, this.onChange);
+	}
+	hostDisconnected() {
+		this.source?.removeEventListener(STATE_EVENT, this.onChange);
+		this.source = void 0;
+	}
+};
+export { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, SIDE_MODES, STATE_EVENT, findLayout, matchesState, parseSideModes, sideModeFor };

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

@@ -0,0 +1,13 @@
+/** Windows, menus and dialog buttons: affirmative buttons purple, cancel and close buttons pink */
+export declare const windows: import("lit").CSSResult;
+/** Interface controls whose text isn't selected by clicking or dragging (form fields stay selectable) */
+export declare const noTextSelection: import("lit").CSSResult;
+/** Icon toggles (a checkbox hidden behind its icon, purple while on) and boxed icon buttons */
+export declare const iconControls: import("lit").CSSResult;
+/** Small purple pill buttons, e.g. "Configure", "New Layer", "Import" */
+export declare const pills: import("lit").CSSResult;
+/** The shared styles as text, e.g. for `unsafeCSS` */
+export declare const WINDOWS_CSS: string;
+export declare const NO_TEXT_SELECTION_CSS: string;
+export declare const ICON_CONTROLS_CSS: string;
+export declare const PILLS_CSS: string;

package/dist/ui/styles/index.js

@@ -0,0 +1,195 @@
+import { css } from "lit";
+// src/ui/styles/index.ts
+/** Windows, menus and dialog buttons: affirmative buttons purple, cancel and close buttons pink */
+var windows = css`
+  button,
+  input,
+  select,
+  textarea {
+    font-family: inherit;
+  }
+  [role="dialog"],
+  .window {
+    padding: var(--pc-space-3);
+    border-radius: var(--pc-radius);
+    background: var(--pc-surface-raised);
+    color: var(--pc-text);
+    box-shadow: var(--pc-shadow);
+  }
+  .menu-surface {
+    background: var(--pc-surface-raised);
+    color: var(--pc-text);
+    box-shadow: var(--pc-shadow);
+  }
+  button.affirmative,
+  button[type="submit"],
+  button.cancel,
+  button.close {
+    min-height: var(--pc-control-size);
+    padding: var(--pc-space-1) var(--pc-space-3);
+    border: 0;
+    border-radius: var(--pc-radius-pill);
+    color: var(--pc-accent-text);
+    font: inherit;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  button.affirmative,
+  button[type="submit"] {
+    background: var(--pc-accent);
+  }
+  button.cancel,
+  button.close {
+    background: var(--pc-cancel);
+    color: var(--pc-cancel-text);
+  }
+  button.affirmative:hover,
+  button[type="submit"]:hover,
+  button.cancel:hover,
+  button.close:hover {
+    filter: brightness(1.15);
+  }
+  button.affirmative:focus-visible,
+  button[type="submit"]:focus-visible,
+  button.cancel:focus-visible,
+  button.close:focus-visible {
+    outline: var(--pc-focus-width) solid var(--pc-focus);
+    outline-offset: 2px;
+  }
+  button.affirmative:disabled,
+  button[type="submit"]:disabled,
+  button.cancel:disabled,
+  button.close:disabled {
+    opacity: 0.5;
+    filter: none;
+    cursor: default;
+  }
+  button.close.dismiss {
+    border: 0;
+    background: transparent;
+    color: var(--pc-dismiss-text);
+  }
+  button.close.dismiss:hover {
+    filter: none;
+    text-decoration: underline;
+  }
+`;
+/** Interface controls whose text isn't selected by clicking or dragging (form fields stay selectable) */
+var noTextSelection = css`
+  :host {
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+  }
+  input,
+  select,
+  textarea {
+    user-select: text;
+    -webkit-user-select: text;
+  }
+`;
+/** Icon toggles (a checkbox hidden behind its icon, purple while on) and boxed icon buttons */
+var iconControls = css`
+  .icon-toggle {
+    position: relative;
+    display: inline-flex;
+    padding: 2px;
+    border: 1px solid var(--pc-border);
+    border-radius: var(--pc-radius-small);
+    background: var(--pc-surface);
+    cursor: pointer;
+  }
+  .icon-toggle:hover {
+    background: var(--pc-surface-hover);
+  }
+  .icon-toggle:has(input:checked),
+  .icon-toggle:has(input:checked):hover {
+    border-color: var(--pc-accent);
+    background: var(--pc-accent);
+  }
+  .icon-toggle:has(input:focus-visible) {
+    outline: var(--pc-focus-width) solid var(--pc-focus);
+  }
+  .icon-toggle input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+  .icon-toggle img,
+  button.icon-button img {
+    display: block;
+    width: var(--pc-icon-size);
+    height: var(--pc-icon-size);
+    filter: var(--pc-icon-filter);
+  }
+  .icon-toggle:has(input:disabled) {
+    opacity: 0.4;
+    cursor: default;
+  }
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  button.icon-button {
+    display: inline-flex;
+    padding: 2px;
+    border: 1px solid var(--pc-border);
+    border-radius: var(--pc-radius-small);
+    background: var(--pc-surface);
+    cursor: pointer;
+  }
+  button.icon-button:hover:not(:disabled) {
+    background: var(--pc-surface-hover);
+  }
+  button.icon-button[aria-pressed="true"] {
+    border-color: var(--pc-accent);
+    background: var(--pc-accent);
+  }
+  button.icon-button:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+  button.icon-button:focus-visible {
+    outline: var(--pc-focus-width) solid var(--pc-focus);
+  }
+`;
+/** Small purple pill buttons, e.g. "Configure", "New Layer", "Import" */
+var pills = css`
+  button.configure,
+  button.pill {
+    min-height: 30px;
+    padding: var(--pc-space-1) var(--pc-space-3);
+    border: 0;
+    border-radius: var(--pc-radius-pill);
+    background: var(--pc-accent);
+    color: var(--pc-accent-text);
+    font: inherit;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  button.configure:hover:not(:disabled),
+  button.pill:hover:not(:disabled) {
+    filter: brightness(1.15);
+  }
+  button.configure:focus-visible,
+  button.pill:focus-visible {
+    outline: var(--pc-focus-width) solid var(--pc-focus);
+    outline-offset: 2px;
+  }
+  button.pill:disabled {
+    background: var(--pc-disabled);
+    cursor: default;
+  }
+`;
+/** The shared styles as text, e.g. for `unsafeCSS` */
+var WINDOWS_CSS = windows.cssText;
+var NO_TEXT_SELECTION_CSS = noTextSelection.cssText;
+var ICON_CONTROLS_CSS = iconControls.cssText;
+var PILLS_CSS = pills.cssText;
+export { ICON_CONTROLS_CSS, NO_TEXT_SELECTION_CSS, PILLS_CSS, WINDOWS_CSS, iconControls, noTextSelection, pills, windows };

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

@@ -0,0 +1,29 @@
+/** Design token values, by name (without the `--pc-` prefix) */
+export type TokenValues = Readonly<Record<string, string>>;
+/** The light theme's tokens: colours, spacing, corner radius, fonts and focus ring */
+export declare const LIGHT_TOKENS: TokenValues;
+/** The dark theme's tokens that differ from the light theme's */
+export declare const DARK_TOKENS: TokenValues;
+/**
+ * The page-level stylesheet: light tokens on the page, so every element inherits them and the implementer can override
+ * any token on `:root` or any ancestor. `data-pc-theme="dark"` on an ancestor switches what's inside it to the dark
+ * theme, and `data-pc-theme="auto"` follows the device.
+ */
+export declare const PAGE_TOKENS_CSS: string;
+/** The design tokens as text: the page-level stylesheet (kept for including in the implementer's own stylesheets) */
+export declare const TOKENS_CSS: string;
+/**
+ * Elements' shared styles: a `theme` attribute switches one element (and what's inside it) to the light, dark or
+ * automatic theme, and `.pc-visually-hidden` hides text from view but not from screen readers.
+ *
+ * @example
+ * static styles = [tokens, css`button { color: var(--pc-text); }`];
+ */
+export declare const tokens: import("lit").CSSResult;
+/** Marks the page-level token stylesheet, so it's added once */
+export declare const TOKENS_STYLE_ID = "pc-tokens";
+/**
+ * Add the page-level token stylesheet to a document (once), before its other styles so the implementer's own
+ * stylesheets override it. PaintCanvas's elements do this when they're added to the page.
+ */
+export declare const installTokens: (document?: Document) => void;

package/dist/ui/tokens/index.js

@@ -0,0 +1,114 @@
+import { unsafeCSS } from "lit";
+// src/ui/tokens/index.ts
+/** The light theme's tokens: colours, spacing, corner radius, fonts and focus ring */
+var LIGHT_TOKENS = {
+	blue: "#2c6bff",
+	purple: "#8f3de8",
+	pink: "#f40f95",
+	"pink-dark": "#d10b7e",
+	red: "#fb234a",
+	orange: "#fe7e07",
+	yellow: "#ffd52c",
+	green: "#6dc905",
+	mint: "#21e887",
+	cyan: "#13c3f4",
+	surface: "#ffffff",
+	"surface-raised": "#ffffff",
+	"surface-hover": "#dddddd",
+	"surface-active": "#cccccc",
+	bar: "#eeeeee",
+	border: "#999999",
+	text: "#000000",
+	"text-muted": "#666666",
+	shadow: "0 4px 16px rgb(0 0 0 / 25%)",
+	backdrop: "rgb(0 0 0 / 40%)",
+	accent: "#8f3de8",
+	"accent-text": "#ffffff",
+	cancel: "#f40f95",
+	"cancel-text": "#ffffff",
+	"dismiss-text": "#d10b7e",
+	disabled: "#999999",
+	"icon-filter": "none",
+	"space-1": "4px",
+	"space-2": "8px",
+	"space-3": "16px",
+	"radius-small": "4px",
+	radius: "8px",
+	"radius-pill": "999px",
+	"control-size": "32px",
+	"icon-size": "24px",
+	font: "Arial, Helvetica, sans-serif",
+	"font-size": "14px",
+	"font-size-small": "12px",
+	focus: "#000000",
+	"focus-width": "3px",
+	"color-scheme": "light"
+};
+/** The dark theme's tokens that differ from the light theme's */
+var DARK_TOKENS = {
+	surface: "#1e1e1e",
+	"surface-raised": "#2a2a2a",
+	"surface-hover": "#3a3a3a",
+	"surface-active": "#4a4a4a",
+	bar: "#252525",
+	border: "#6b6b6b",
+	text: "#f2f2f2",
+	"text-muted": "#b0b0b0",
+	shadow: "0 4px 16px rgb(0 0 0 / 60%)",
+	backdrop: "rgb(0 0 0 / 60%)",
+	accent: "#a463f0",
+	"dismiss-text": "#ff5cb8",
+	disabled: "#6b6b6b",
+	"icon-filter": "none",
+	focus: "#ffffff",
+	"color-scheme": "dark"
+};
+/**
+* Token values as CSS declarations.
+*
+* @example
+* declarations({ text: "#000" }); // "--pc-text: #000;"
+*/
+var declarations = (values) => Object.entries(values).map(([name, value]) => `--pc-${name}: ${value};`).join(" ");
+/**
+* The page-level stylesheet: light tokens on the page, so every element inherits them and the implementer can override
+* any token on `:root` or any ancestor. `data-pc-theme="dark"` on an ancestor switches what's inside it to the dark
+* theme, and `data-pc-theme="auto"` follows the device.
+*/
+var PAGE_TOKENS_CSS = `:root, [data-pc-theme="light"] { ${declarations(LIGHT_TOKENS)} }
+[data-pc-theme="dark"] { ${declarations(DARK_TOKENS)} }
+@media (prefers-color-scheme: dark) { [data-pc-theme="auto"] { ${declarations(DARK_TOKENS)} } }`;
+/** The design tokens as text: the page-level stylesheet (kept for including in the implementer's own stylesheets) */
+var TOKENS_CSS = PAGE_TOKENS_CSS;
+/**
+* Elements' shared styles: a `theme` attribute switches one element (and what's inside it) to the light, dark or
+* automatic theme, and `.pc-visually-hidden` hides text from view but not from screen readers.
+*
+* @example
+* static styles = [tokens, css`button { color: var(--pc-text); }`];
+*/
+var tokens = unsafeCSS(`:host([theme="light"]) { ${declarations(LIGHT_TOKENS)} }
+:host([theme="dark"]) { ${declarations({
+	...LIGHT_TOKENS,
+	...DARK_TOKENS
+})} }
+@media (prefers-color-scheme: dark) { :host([theme="auto"]) { ${declarations({
+	...LIGHT_TOKENS,
+	...DARK_TOKENS
+})} } }
+:host { color: var(--pc-text); color-scheme: var(--pc-color-scheme); }
+.pc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }`);
+/** Marks the page-level token stylesheet, so it's added once */
+var TOKENS_STYLE_ID = "pc-tokens";
+/**
+* Add the page-level token stylesheet to a document (once), before its other styles so the implementer's own
+* stylesheets override it. PaintCanvas's elements do this when they're added to the page.
+*/
+var installTokens = (document = window.document) => {
+	if (document.getElementById("pc-tokens")) return;
+	const style = document.createElement("style");
+	style.id = TOKENS_STYLE_ID;
+	style.textContent = PAGE_TOKENS_CSS;
+	document.head.prepend(style);
+};
+export { DARK_TOKENS, LIGHT_TOKENS, PAGE_TOKENS_CSS, TOKENS_CSS, TOKENS_STYLE_ID, installTokens, tokens };

package/locales/en-GB.json

@@ -0,0 +1,179 @@
+{
+  "paintCanvas.common.cancel": "Cancel",
+  "paintCanvas.common.close": "Close",
+  "paintCanvas.common.dismiss": "Dismiss",
+  "paintCanvas.common.save": "Save",
+  "paintCanvas.common.delete": "Delete",
+  "paintCanvas.common.clear": "Clear",
+  "paintCanvas.common.copy": "Copy",
+  "paintCanvas.common.paste": "Paste",
+  "paintCanvas.common.undo": "Undo",
+  "paintCanvas.common.redo": "Redo",
+  "paintCanvas.common.off": "Off",
+  "paintCanvas.common.moreInformation": "More information",
+  "paintCanvas.common.width": "Width",
+  "paintCanvas.common.height": "Height",
+  "paintCanvas.common.opacity": "Opacity",
+  "paintCanvas.tool.brush": "Brush",
+  "paintCanvas.tool.eraser": "Eraser",
+  "paintCanvas.tool.move": "Move, scale and rotate",
+  "paintCanvas.tool.rectangleLasso": "Rectangle lasso",
+  "paintCanvas.tool.circleLasso": "Circle lasso",
+  "paintCanvas.tool.polygonLasso": "Polygon lasso",
+  "paintCanvas.tool.freeformLasso": "Freeform lasso",
+  "paintCanvas.tool.pan": "Pan",
+  "paintCanvas.tool.zoom": "Zoom",
+  "paintCanvas.tool.colourSample": "Colour sample",
+  "paintCanvas.tool.withShortcut": "{tool} ({shortcut})",
+  "paintCanvas.toolbar.label": "Tools",
+  "paintCanvas.toolbar.currentColour": "Current colour",
+  "paintCanvas.toolbar.layers": "Layers",
+  "paintCanvas.toolbar.menu": "Menu",
+  "paintCanvas.toolbar.undoWithShortcut": "Undo ({shortcut})",
+  "paintCanvas.toolbar.redoWithShortcut": "Redo ({shortcut})",
+  "paintCanvas.toolSettings.settings": "{tool} settings",
+  "paintCanvas.toolSettings.presets": "{tool} presets",
+  "paintCanvas.toolSettings.configure": "Configure",
+  "paintCanvas.toolSettings.constrainProportions": "Constrain proportions",
+  "paintCanvas.toolSettings.pressure": "Pressure",
+  "paintCanvas.toolSettings.tilt": "Tilt",
+  "paintCanvas.toolSettings.focusPen": "Focus pen mode",
+  "paintCanvas.toolSettings.focusPenHint": "Focus pen mode: only the pen draws",
+  "paintCanvas.toolSettings.flipHorizontal": "Flip horizontal",
+  "paintCanvas.toolSettings.flipVertical": "Flip vertical",
+  "paintCanvas.toolSettings.rotateLeft": "Rotate 90° left",
+  "paintCanvas.toolSettings.rotateRight": "Rotate 90° right",
+  "paintCanvas.toolSettings.maskSettings": "Mask settings",
+  "paintCanvas.toolSettings.zoomIn": "Zoom in",
+  "paintCanvas.toolSettings.zoomOut": "Zoom out",
+  "paintCanvas.toolSettings.pointSample": "Point sample",
+  "paintCanvas.toolSettings.areaSample": "Area sample",
+  "paintCanvas.brushMenu.presets": "{tool} presets",
+  "paintCanvas.brushMenu.size": "{tool} size",
+  "paintCanvas.brushMenu.dragToResize": "Drag sideways to resize",
+  "paintCanvas.brushMenu.newPreset": "New preset",
+  "paintCanvas.brushMenu.create": "Create",
+  "paintCanvas.brushMenu.import": "Import",
+  "paintCanvas.brushMenu.export": "Export",
+  "paintCanvas.presets.myPresets": "My presets",
+  "paintCanvas.presets.unknownAuthor": "Unknown",
+  "paintCanvas.presets.deleteConfirm": "Delete \"{name}\"? This can't be undone.",
+  "paintCanvas.presets.deleted": "Deleted \"{name}\"",
+  "paintCanvas.presets.deleteFailed": "Couldn't delete \"{name}\"",
+  "paintCanvas.presets.saved": "Saved \"{name}\" to My presets",
+  "paintCanvas.presets.saveFailed": "Couldn't save \"{name}\"",
+  "paintCanvas.presets.replaceConfirm": "You already have a preset called \"{name}\". Replace it?",
+  "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.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",
+  "paintCanvas.brushConfig.brushTitle": "Brush configuration",
+  "paintCanvas.brushConfig.eraserTitle": "Eraser configuration",
+  "paintCanvas.brushConfig.presetName": "Name of the preset",
+  "paintCanvas.brushConfig.shape": "Shape",
+  "paintCanvas.brushConfig.upload": "Upload",
+  "paintCanvas.brushConfig.paste": "Paste",
+  "paintCanvas.brushConfig.rotation": "Rotation",
+  "paintCanvas.brushConfig.offsetX": "Offset X",
+  "paintCanvas.brushConfig.offsetY": "Offset Y",
+  "paintCanvas.brushConfig.spacing": "Spacing",
+  "paintCanvas.brushConfig.sampleRate": "Sample rate",
+  "paintCanvas.brushConfig.smoothing": "Smoothing",
+  "paintCanvas.brushConfig.smoothingLinear": "Linear",
+  "paintCanvas.brushConfig.smoothingQuadratic": "Quadratic curve",
+  "paintCanvas.brushConfig.smoothingCubic": "Cubic curve",
+  "paintCanvas.brushConfig.randomise": "Randomise",
+  "paintCanvas.brushConfig.deletePreset": "Delete preset…",
+  "paintCanvas.brushConfig.shapeFailed": "Couldn't use the brush shape",
+  "paintCanvas.brushConfig.test": "Test",
+  "paintCanvas.brushConfig.testArea": "Brush testing area",
+  "paintCanvas.shape.notPng": "Brush shapes must be PNG images",
+  "paintCanvas.shape.tooLarge": "Brush shape images can be up to 2 MB",
+  "paintCanvas.shape.readFailed": "Couldn't read the brush shape image",
+  "paintCanvas.shape.noPngToPaste": "There is no PNG image to paste",
+  "paintCanvas.layers.label": "Layers",
+  "paintCanvas.layers.new": "New Layer",
+  "paintCanvas.layers.defaultName": "Layer {number}",
+  "paintCanvas.layers.name": "Layer name",
+  "paintCanvas.layers.visible": "Visible",
+  "paintCanvas.layers.alphaLock": "Alpha lock",
+  "paintCanvas.layers.blendMode": "Blending mode",
+  "paintCanvas.layers.actions": "Layer actions",
+  "paintCanvas.layers.reorder": "Reorder {name}: drag, or press for actions",
+  "paintCanvas.layers.duplicate": "Duplicate",
+  "paintCanvas.layers.createMask": "Create mask",
+  "paintCanvas.layers.moveUp": "Move up",
+  "paintCanvas.layers.moveDown": "Move down",
+  "paintCanvas.layers.moveToTop": "Move to top",
+  "paintCanvas.layers.moveToBottom": "Move to bottom",
+  "paintCanvas.layers.mergeDown": "Merge down…",
+  "paintCanvas.layers.mergeDownConfirm": "Are you sure you want to merge this layer with the layer under it?",
+  "paintCanvas.layers.mergeLayer": "Merge layer",
+  "paintCanvas.layers.clearConfirm": "Clear all image data on \"{name}\"?",
+  "paintCanvas.layers.deleteConfirm": "Delete \"{name}\"?",
+  "paintCanvas.blendMode.normal": "Normal",
+  "paintCanvas.blendMode.screen": "Screen",
+  "paintCanvas.blendMode.lighten": "Lighten",
+  "paintCanvas.blendMode.multiply": "Multiply",
+  "paintCanvas.blendMode.darken": "Darken",
+  "paintCanvas.blendMode.overlay": "Overlay",
+  "paintCanvas.canvas.label": "Drawing canvas",
+  "paintCanvas.canvas.map": "Canvas map",
+  "paintCanvas.canvas.loading": "Loading the canvas…",
+  "paintCanvas.inputSettings.title": "Controls",
+  "paintCanvas.inputSettings.scrollPan": "Scroll or two-finger swipe to pan",
+  "paintCanvas.inputSettings.touchPan": "Two-finger drag to pan",
+  "paintCanvas.inputSettings.pinchZoom": "Pinch to zoom",
+  "paintCanvas.inputSettings.modifierScrollZoom": "{key} + scroll to zoom",
+  "paintCanvas.inputSettings.focusPen": "Focus pen mode: fingers and palms never draw",
+  "paintCanvas.inputSettings.gestures": "Touch gestures",
+  "paintCanvas.inputSettings.language": "Language",
+  "paintCanvas.gesture.tap2": "Tap with two fingers",
+  "paintCanvas.gesture.tap3": "Tap with three fingers",
+  "paintCanvas.gesture.swipeUp3": "Swipe up with three fingers",
+  "paintCanvas.gesture.swipeDown3": "Swipe down with three fingers",
+  "paintCanvas.gesture.swipeLeft3": "Swipe left with three fingers",
+  "paintCanvas.gesture.swipeRight3": "Swipe right with three fingers",
+  "paintCanvas.gesture.swipeIn3": "Swipe in with three fingers",
+  "paintCanvas.gesture.swipeOut3": "Swipe out with three fingers",
+  "paintCanvas.toolSettings.selectAll": "Select all",
+  "paintCanvas.toolSettings.invertSelection": "Invert selection",
+  "paintCanvas.toolSettings.deselect": "Deselect",
+  "paintCanvas.toolSettings.percent": "Percent",
+  "paintCanvas.toolSettings.reset": "Reset",
+  "paintCanvas.brushMenu.importFile": "Import presets file",
+  "paintCanvas.brushConfig.name": "Name",
+  "paintCanvas.brushConfig.snapToPixelGrid": "Snap to pixel grid",
+  "paintCanvas.brushConfig.addToPresets": "Add to presets",
+  "paintCanvas.brushConfig.variation": "{param}: {source}",
+  "paintCanvas.layers.mergeDownTitle": "Merge down",
+  "paintCanvas.layers.clear": "Clear…",
+  "paintCanvas.layers.delete": "Delete…",
+  "paintCanvas.layers.clearTitle": "Clear layer",
+  "paintCanvas.layers.deleteTitle": "Delete layer",
+  "paintCanvas.toolSettings.angle": "Angle",
+  "paintCanvas.layout.tools": "Tools",
+  "paintCanvas.layout.toolSettings": "Tool settings",
+  "paintCanvas.layout.panels": "Panels",
+  "paintCanvas.layout.status": "Status",
+  "paintCanvas.layout.canvas": "Canvas",
+  "paintCanvas.layout.show": "Show {name}",
+  "paintCanvas.layout.hide": "Hide {name}",
+  "paintCanvas.layout.new": "{name} (new)",
+  "paintCanvas.brushConfig.newPresetName": "New brush",
+  "paintCanvas.autosave.elsewhere": "You are already drawing in another window",
+  "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.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.theme.label": "Theme",
+  "paintCanvas.theme.light": "Light",
+  "paintCanvas.theme.dark": "Dark",
+  "paintCanvas.theme.auto": "Auto"
+}