@lvl99dotcom/paintcanvas 0.4.0 → 0.5.0

package/dist/lib/classes/KeyboardShortcuts/index.js

@@ -7,6 +7,18 @@ import { comboFromEvent, isTypingTarget, sameCombo } from "../../utils/shortcuts
 * Escape is left to close it.
 */
 var inOpenDialog = (path) => path.some((target) => target instanceof HTMLDialogElement && target.open);
+/**
+* How long (milliseconds) the paste shortcut waits for the browser's `paste` event (which carries other apps' images)
+* before pasting the image data copied here
+*/
+var PASTE_EVENT_WAIT_MS = 50;
+/**
+* The first image in a paste's clipboard data (e.g. copied in another app), if any.
+*
+* @example
+* pastedImage(event.clipboardData); // File of type "image/png", or undefined
+*/
+var pastedImage = (data) => [...data?.files ?? []].find((file) => file.type.startsWith("image/"));
 /** Event dispatched on the window for shortcut actions handled elsewhere (e.g. saving) */
 var SHORTCUT_EVENT = "pc-shortcut";
 /**
@@ -16,7 +28,10 @@ var SHORTCUT_EVENT = "pc-shortcut";
 *
 * Tool selection, brush/eraser size and opacity, interface visibility, select all/invert/deselect, undo/redo,
 * cut/copy/paste, deleting the masked image data (Delete or Backspace), fills, swapping colours, zooming, layer opacity
-* and finishing or cancelling a lasso shape are handled here; other actions (and Escape/Enter for later features)
+* and finishing or cancelling a lasso shape are handled here. Pasting (the shortcut, or the browser's own paste, e.g. from
+* its Edit menu) pastes the image data copied here, unless the window has lost focus since it was copied and the
+* clipboard has an image (e.g. copied in another app): that image is pasted instead (see `PaintCanvas.pasteImage`).
+* Other actions other actions (and Escape/Enter for later features)
 * dispatch an `pc-shortcut` event with the action as `detail`. Holding the hold-to-pan key (Space by default) pans
 * temporarily; releasing it returns to the selected tool.
 *
@@ -31,9 +46,20 @@ var KeyboardShortcuts = class {
 	heldKey;
 	onKeyDown = (event) => this.handle(event);
 	onKeyUp = (event) => this.handleKeyUp(event);
-	onBlur = () => this.release();
-	constructor(app) {
+	/** Turns pasted image files into images (replaceable for tests) */
+	decodeImage;
+	/** `app.copyCount` when the window last lost focus: copies since then were made here */
+	copiesBeforeBlur = 0;
+	/** Pastes the image data copied here if the browser doesn't fire `paste` soon after the shortcut */
+	pasteTimer;
+	onBlur = () => {
+		this.release();
+		this.copiesBeforeBlur = this.app.copyCount;
+	};
+	onPaste = (event) => void this.handlePaste(event);
+	constructor(app, decodeImage = (blob) => createImageBitmap(blob)) {
 		this.app = app;
+		this.decodeImage = decodeImage;
 	}
 	/**
 	* Start listening for key presses on a target (usually `window`).
@@ -44,6 +70,7 @@ var KeyboardShortcuts = class {
 		target.addEventListener("keydown", this.onKeyDown);
 		target.addEventListener("keyup", this.onKeyUp);
 		target.addEventListener("blur", this.onBlur);
+		target.addEventListener("paste", this.onPaste);
 	}
 	/**
 	* Stop listening for key presses.
@@ -52,7 +79,9 @@ var KeyboardShortcuts = class {
 		this.target?.removeEventListener("keydown", this.onKeyDown);
 		this.target?.removeEventListener("keyup", this.onKeyUp);
 		this.target?.removeEventListener("blur", this.onBlur);
+		this.target?.removeEventListener("paste", this.onPaste);
 		this.target = null;
+		this.cancelPasteTimer();
 	}
 	/**
 	* Run the shortcut for a key press, if any. Returns the action run.
@@ -71,11 +100,44 @@ var KeyboardShortcuts = class {
 		}
 		const action = shortcuts.find((shortcut) => sameCombo(shortcut, combo))?.action;
 		if (!action) return void 0;
+		if (action.type === "paste") {
+			this.cancelPasteTimer();
+			this.pasteTimer = setTimeout(() => {
+				this.pasteTimer = void 0;
+				this.app.paste();
+			}, 50);
+			return action;
+		}
 		event.preventDefault();
 		this.run(action);
 		return action;
 	}
 	/**
+	* Paste from the browser's `paste` event: the image data copied here if it was copied since the window last lost
+	* focus (or the clipboard has no image), otherwise the clipboard's image. Ignored in text fields and open dialogs.
+	*/
+	async handlePaste(event) {
+		const path = event.composedPath();
+		if (isTypingTarget(path[0] ?? event.target) || inOpenDialog(path)) return;
+		this.cancelPasteTimer();
+		event.preventDefault();
+		const app = this.app;
+		const image = pastedImage(event.clipboardData);
+		const copiedHere = app.copyCount > this.copiesBeforeBlur;
+		if (!image || copiedHere && app.hasClipboard) {
+			app.paste();
+			return;
+		}
+		try {
+			app.pasteImage(await this.decodeImage(image));
+		} catch {}
+	}
+	/** Stop waiting for the browser's `paste` event */
+	cancelPasteTimer() {
+		clearTimeout(this.pasteTimer);
+		this.pasteTimer = void 0;
+	}
+	/**
 	* Return to the selected tool when the hold-to-pan key is released (whatever modifiers are held by then).
 	*/
 	handleKeyUp(event) {
@@ -197,4 +259,4 @@ var KeyboardShortcuts = class {
 		(this.target ?? this.app).dispatchEvent(new CustomEvent(SHORTCUT_EVENT, { detail: action }));
 	}
 };
-export { SHORTCUT_EVENT, KeyboardShortcuts as default };
+export { PASTE_EVENT_WAIT_MS, SHORTCUT_EVENT, KeyboardShortcuts as default, pastedImage };

package/dist/lib/classes/PaintCanvas/index.d.ts

@@ -18,6 +18,7 @@ import type { LayerStoreLike } from "../../storage";
 import type { AssetAuthor, BrushConfig } from "../../brushes/types";
 import CustomPresets, { type PresetStoreLike } from "../CustomPresets";
 import InputSettings from "../InputSettings";
+import UiSettings from "../UiSettings";
 import Palette from "../Palette";
 import ShortcutSettings from "../ShortcutSettings";
 import ExternalSheets from "../ExternalSheets";
@@ -125,7 +126,14 @@ export interface PaintCanvasOptions {
     names?: Partial<PaintCanvasNames>;
     /** Where to keep the user's layers so the drawing survives reloading the page (see `useLayerStore`) */
     layerStore?: LayerStoreLike;
+    /**
+     * The system clipboard, which copying and cutting also put a PNG of the copied image data on so other apps (and brush
+     * shapes) can use it (the browser's by default; `null` for none)
+     */
+    systemClipboard?: SystemClipboardLike | null;
 }
+/** The part of the system clipboard PaintCanvas writes to (the browser's `navigator.clipboard`) */
+export type SystemClipboardLike = Pick<Clipboard, "write">;
 /**
  * The painting engine: canvas size, layers, brush and eraser settings, custom presets, the selected tool, foreground and background colours,
  * selection, transforms, clipboard, undo/redo history, viewport and input settings. Where its data is kept and who it
@@ -159,6 +167,8 @@ export default class PaintCanvas extends EventTarget {
     readonly background: BackgroundWork;
     /** How the user's input devices control the canvas (scrolling, pinching, touch gestures, focus pen mode) */
     readonly input: InputSettings;
+    /** The user's interface choices (theme and language), kept with the other app settings */
+    readonly ui: UiSettings;
     /** The user's saved colours, shown as swatches */
     readonly palette: Palette;
     /** The user's keyboard shortcuts: each configurable action's key combination */
@@ -203,6 +213,10 @@ export default class PaintCanvas extends EventTarget {
     private currentSelectedColour;
     /** Image data copied with cut or copy, and the area it was copied from */
     private clipboard?;
+    /** How many times image data has been copied (see `copyCount`) */
+    private copies;
+    /** The system clipboard copies are also put on, if any */
+    private readonly systemClipboard?;
     /** Drawings from elsewhere */
     private externalSheets;
     /** Who receives the drawing messages this canvas sends */
@@ -425,6 +439,26 @@ export default class PaintCanvas extends EventTarget {
      * nothing during a stroke or while a transform is pending. Returns the area copied, if any.
      */
     copy(): Rect | undefined;
+    /**
+     * How many times image data has been copied or cut, to tell whether it was copied here since something else may have
+     * been copied in another app (see `KeyboardShortcuts`).
+     */
+    get copyCount(): number;
+    /** Whether there is copied image data to paste (see `copy` and `cut`) */
+    get hasClipboard(): boolean;
+    /**
+     * The copied image data as a PNG, if there is any (e.g. to use as a brush shape).
+     *
+     * @example
+     * const png = await canvas.copiedPng(); // Blob of type "image/png", or undefined
+     */
+    copiedPng(): Promise<Blob | undefined>;
+    /**
+     * Put copied image data on the system clipboard as a PNG, if there is one and the browser can. The item is made
+     * straight away (some browsers only allow writing while handling the key press or click) with the PNG to follow.
+     * Failing (e.g. the page isn't focused) changes nothing: the image data can still be pasted here.
+     */
+    private writeSystemClipboard;
     /**
      * Copy the masked image data of the selected layer to the clipboard, then remove it from the layer as one undoable
      * action (see `deleteMasked`).
@@ -471,6 +505,18 @@ export default class PaintCanvas extends EventTarget {
      * discards it. A pending transform is applied first.
      */
     paste(): void;
+    /**
+     * Show an image from elsewhere (e.g. pasted from another app) over the selected layer, in the middle of the part of
+     * the canvas in view, and select the Move tool to place, scale and rotate it, like `paste`. An image larger than the
+     * canvas is shrunk to fit it. Does nothing during a stroke.
+     *
+     * @example
+     * canvas.pasteImage(await createImageBitmap(file));
+     */
+    pasteImage(source: CanvasImageSource & {
+        width: number;
+        height: number;
+    }): void;
     /**
      * Apply a finished lasso action to the mask: a shape is added, subtracted or replaces it; a plain click deselects.
      */

package/dist/lib/classes/PaintCanvas/index.js

@@ -19,6 +19,7 @@ import "../../presets/index.js";
 import CustomPresets from "../CustomPresets/index.js";
 import { BRUSH_PRESET_FILE_FORMAT } from "../../presets/schema.js";
 import InputSettings from "../InputSettings/index.js";
+import UiSettings from "../UiSettings/index.js";
 import Palette from "../Palette/index.js";
 import ShortcutSettings from "../ShortcutSettings/index.js";
 import { PALETTE_FILE_FORMAT } from "../../palette/schema.js";
@@ -125,6 +126,8 @@ var PaintCanvas = class extends EventTarget {
 	background = new BackgroundWork(this.strokeLog);
 	/** How the user's input devices control the canvas (scrolling, pinching, touch gestures, focus pen mode) */
 	input = new InputSettings();
+	/** The user's interface choices (theme and language), kept with the other app settings */
+	ui = new UiSettings();
 	/** The user's saved colours, shown as swatches */
 	palette = new Palette();
 	/** The user's keyboard shortcuts: each configurable action's key combination */
@@ -193,6 +196,10 @@ var PaintCanvas = class extends EventTarget {
 	currentSelectedColour = "foreground";
 	/** Image data copied with cut or copy, and the area it was copied from */
 	clipboard;
+	/** How many times image data has been copied (see `copyCount`) */
+	copies = 0;
+	/** The system clipboard copies are also put on, if any */
+	systemClipboard;
 	/** Drawings from elsewhere */
 	externalSheets;
 	/** Who receives the drawing messages this canvas sends */
@@ -233,6 +240,7 @@ var PaintCanvas = class extends EventTarget {
 		this.customPresets.addEventListener("change", () => this.listCustomPresets());
 		this.customPresets.load().catch(() => void 0);
 		this.createCanvas = options.createCanvas ?? createOffscreenCanvas;
+		this.systemClipboard = options.systemClipboard === null ? void 0 : options.systemClipboard ?? globalThis.navigator?.clipboard;
 		this.canvasWidth = DEFAULT_CANVAS_SIZE;
 		this.canvasHeight = DEFAULT_CANVAS_SIZE;
 		this.layerStack = new LayerStack(this.canvasWidth, this.canvasHeight, this.createCanvas, this.maxLayers);
@@ -717,9 +725,42 @@ var PaintCanvas = class extends EventTarget {
 			image,
 			area
 		};
+		this.copies++;
+		this.writeSystemClipboard(image);
+		this.notify();
 		return area;
 	}
 	/**
+	* How many times image data has been copied or cut, to tell whether it was copied here since something else may have
+	* been copied in another app (see `KeyboardShortcuts`).
+	*/
+	get copyCount() {
+		return this.copies;
+	}
+	/** Whether there is copied image data to paste (see `copy` and `cut`) */
+	get hasClipboard() {
+		return this.clipboard !== void 0;
+	}
+	/**
+	* The copied image data as a PNG, if there is any (e.g. to use as a brush shape).
+	*
+	* @example
+	* const png = await canvas.copiedPng(); // Blob of type "image/png", or undefined
+	*/
+	async copiedPng() {
+		return this.clipboard?.image.convertToBlob({ type: "image/png" });
+	}
+	/**
+	* Put copied image data on the system clipboard as a PNG, if there is one and the browser can. The item is made
+	* straight away (some browsers only allow writing while handling the key press or click) with the PNG to follow.
+	* Failing (e.g. the page isn't focused) changes nothing: the image data can still be pasted here.
+	*/
+	writeSystemClipboard(image) {
+		if (!this.systemClipboard || typeof ClipboardItem === "undefined") return;
+		const item = new ClipboardItem({ "image/png": image.convertToBlob({ type: "image/png" }) });
+		this.systemClipboard.write([item]).catch(() => void 0);
+	}
+	/**
 	* Copy the masked image data of the selected layer to the clipboard, then remove it from the layer as one undoable
 	* action (see `deleteMasked`).
 	*/
@@ -830,6 +871,32 @@ var PaintCanvas = class extends EventTarget {
 		this.transformer.float(this.layerStack.active, clipboard.image, clipboard.area);
 	}
 	/**
+	* Show an image from elsewhere (e.g. pasted from another app) over the selected layer, in the middle of the part of
+	* the canvas in view, and select the Move tool to place, scale and rotate it, like `paste`. An image larger than the
+	* canvas is shrunk to fit it. Does nothing during a stroke.
+	*
+	* @example
+	* canvas.pasteImage(await createImageBitmap(file));
+	*/
+	pasteImage(source) {
+		if (this.strokeEngine.drawing) return;
+		const scale = Math.min(1, this.canvasWidth / source.width, this.canvasHeight / source.height);
+		const width = Math.max(1, Math.round(source.width * scale));
+		const height = Math.max(1, Math.round(source.height * scale));
+		const image = this.createCanvas(width, height);
+		image.getContext("2d").drawImage(source, 0, 0, width, height);
+		const view = this.view.visibleRect();
+		const area = {
+			x: Math.round(view.x + (view.width - width) / 2),
+			y: Math.round(view.y + (view.height - height) / 2),
+			width,
+			height
+		};
+		if (this.transformer.pending) this.commitTransform();
+		this.selectTool(Tool.Move);
+		this.transformer.float(this.layerStack.active, image, area);
+	}
+	/**
 	* Apply a finished lasso action to the mask: a shape is added, subtracted or replaces it; a plain click deselects.
 	*/
 	applyLasso(result) {

package/dist/lib/classes/SettingsAutosave/index.d.ts

@@ -10,8 +10,9 @@ export interface SettingsAutosaveOptions {
     delayMs?: number;
 }
 /**
- * Keeps a canvas's app settings (input settings, keyboard shortcuts, colour palette and colours) in a store: the saved
- * settings are restored when it starts (invalid ones are ignored), then changes are saved soon after they happen.
+ * Keeps a canvas's app settings (input settings, keyboard shortcuts, colour palette, colours, theme and language) in a
+ * store: the saved settings are restored when it starts (invalid ones are ignored), then changes are saved soon after
+ * they happen.
  *
  * Dispatches an `error` event (with the error as `detail`) when loading or saving fails.
  *

package/dist/lib/classes/SettingsAutosave/index.js

@@ -5,8 +5,9 @@ var SETTINGS_SAVE_DELAY_MS = 500;
 /** Event dispatched when loading or saving settings fails (detail: the error) */
 var SETTINGS_AUTOSAVE_ERROR_EVENT = "error";
 /**
-* Keeps a canvas's app settings (input settings, keyboard shortcuts, colour palette and colours) in a store: the saved
-* settings are restored when it starts (invalid ones are ignored), then changes are saved soon after they happen.
+* Keeps a canvas's app settings (input settings, keyboard shortcuts, colour palette, colours, theme and language) in a
+* store: the saved settings are restored when it starts (invalid ones are ignored), then changes are saved soon after
+* they happen.
 *
 * Dispatches an `error` event (with the error as `detail`) when loading or saving fails.
 *
@@ -41,7 +42,8 @@ var SettingsAutosave = class extends EventTarget {
 			app,
 			app.input,
 			app.shortcuts,
-			app.palette
+			app.palette,
+			app.ui
 		];
 	}
 	/**

package/dist/lib/classes/UiSettings/index.d.ts

@@ -0,0 +1,68 @@
+/** The themes: light, dark, or following the device's (system) */
+export declare const THEMES: readonly ["light", "dark", "system"];
+export type Theme = (typeof THEMES)[number];
+/** Longest locale tag kept in UI settings (characters) */
+export declare const MAX_LOCALE_LENGTH = 35;
+/** A locale tag's characters: letters, digits and hyphens (e.g. `zh-Hant`) */
+export declare const LOCALE_PATTERN = "^[A-Za-z0-9-]+$";
+/**
+ * Whether a value is one of the themes.
+ *
+ * @example
+ * isTheme("dark"); // true
+ * isTheme(undefined); // false
+ */
+export declare const isTheme: (value: unknown) => value is Theme;
+/**
+ * Whether a value can be a locale tag (letters, digits and hyphens, at most `MAX_LOCALE_LENGTH` characters).
+ *
+ * @example
+ * isLocaleTag("zh-Hant"); // true
+ * isLocaleTag("<script>"); // false
+ */
+export declare const isLocaleTag: (value: unknown) => value is string;
+/** The user's interface choices */
+export interface UiSettingsData {
+    /** The theme (`system` by default) */
+    theme: Theme;
+    /** The language's locale tag, e.g. `fr`, or undefined to follow the device's languages */
+    locale?: string;
+}
+/** UI settings the UI can show and change: PaintCanvas's `UiSettings`, or anything with the same data and `update` */
+export interface UiSettingsLike extends EventTarget {
+    readonly data: Readonly<UiSettingsData>;
+    update(changes: Partial<UiSettingsData>): void;
+}
+/**
+ * Keep only valid UI settings from an untrusted value (e.g. stored or imported), using `defaults` for anything missing
+ * or invalid. Other properties are left out.
+ *
+ * @example
+ * sanitiseUiSettings({ theme: "dark", locale: 42 }, { theme: "system" }); // { theme: "dark" }
+ */
+export declare const sanitiseUiSettings: (input: unknown, defaults: UiSettingsData) => UiSettingsData;
+/**
+ * The user's interface choices: the theme and the language. Kept in memory; the implementer saves and restores them
+ * with the other app settings (see `SettingsAutosave`), and the UI shows and applies them (e.g. `<pc-theme-picker>` and
+ * `<pc-input-settings>`).
+ *
+ * Dispatches a `change` event when a setting changes.
+ *
+ * @example
+ * const ui = new UiSettings();
+ * ui.update({ theme: "dark", locale: "fr" });
+ * ui.data.theme; // "dark"
+ */
+export default class UiSettings extends EventTarget {
+    private values;
+    constructor(initial?: unknown);
+    /** Current settings (read-only copy) */
+    get data(): Readonly<UiSettingsData>;
+    /**
+     * Change some settings and dispatch `change` if anything changed. Invalid values and other properties are ignored.
+     *
+     * @example
+     * ui.update({ locale: "ja" });
+     */
+    update(changes: Partial<UiSettingsData>): void;
+}

package/dist/lib/classes/UiSettings/index.js

@@ -0,0 +1,82 @@
+// src/lib/classes/UiSettings/index.ts
+/** The themes: light, dark, or following the device's (system) */
+var THEMES = [
+	"light",
+	"dark",
+	"system"
+];
+/** Longest locale tag kept in UI settings (characters) */
+var MAX_LOCALE_LENGTH = 35;
+/** A locale tag's characters: letters, digits and hyphens (e.g. `zh-Hant`) */
+var LOCALE_PATTERN = "^[A-Za-z0-9-]+$";
+/**
+* Whether a value is one of the themes.
+*
+* @example
+* isTheme("dark"); // true
+* isTheme(undefined); // false
+*/
+var isTheme = (value) => THEMES.includes(value);
+/**
+* Whether a value can be a locale tag (letters, digits and hyphens, at most `MAX_LOCALE_LENGTH` characters).
+*
+* @example
+* isLocaleTag("zh-Hant"); // true
+* isLocaleTag("<script>"); // false
+*/
+var isLocaleTag = (value) => typeof value === "string" && value.length <= 35 && (/* @__PURE__ */ new RegExp("^[A-Za-z0-9-]+$")).test(value);
+/**
+* Keep only valid UI settings from an untrusted value (e.g. stored or imported), using `defaults` for anything missing
+* or invalid. Other properties are left out.
+*
+* @example
+* sanitiseUiSettings({ theme: "dark", locale: 42 }, { theme: "system" }); // { theme: "dark" }
+*/
+var sanitiseUiSettings = (input, defaults) => {
+	const value = typeof input === "object" && input !== null ? input : {};
+	const theme = isTheme(value.theme) ? value.theme : defaults.theme;
+	const locale = isLocaleTag(value.locale) ? value.locale : defaults.locale;
+	return locale === void 0 ? { theme } : {
+		theme,
+		locale
+	};
+};
+/**
+* The user's interface choices: the theme and the language. Kept in memory; the implementer saves and restores them
+* with the other app settings (see `SettingsAutosave`), and the UI shows and applies them (e.g. `<pc-theme-picker>` and
+* `<pc-input-settings>`).
+*
+* Dispatches a `change` event when a setting changes.
+*
+* @example
+* const ui = new UiSettings();
+* ui.update({ theme: "dark", locale: "fr" });
+* ui.data.theme; // "dark"
+*/
+var UiSettings = class extends EventTarget {
+	values;
+	constructor(initial) {
+		super();
+		this.values = sanitiseUiSettings(initial, { theme: "system" });
+	}
+	/** Current settings (read-only copy) */
+	get data() {
+		return this.values;
+	}
+	/**
+	* Change some settings and dispatch `change` if anything changed. Invalid values and other properties are ignored.
+	*
+	* @example
+	* ui.update({ locale: "ja" });
+	*/
+	update(changes) {
+		const next = sanitiseUiSettings({
+			...this.values,
+			...changes
+		}, this.values);
+		if (next.theme === this.values.theme && next.locale === this.values.locale) return;
+		this.values = next;
+		this.dispatchEvent(new Event("change"));
+	}
+};
+export { LOCALE_PATTERN, MAX_LOCALE_LENGTH, THEMES, UiSettings as default, isLocaleTag, isTheme, sanitiseUiSettings };

package/dist/lib/settings/index.d.ts

@@ -25,7 +25,7 @@ export type SettingsValidationResult = {
  */
 export declare const isValidSettings: (input: unknown) => SettingsValidationResult;
 /**
- * The app settings of a canvas: its input settings, keyboard shortcuts, colour palette and colours.
+ * The app settings of a canvas: its input settings, keyboard shortcuts, colour palette, colours, theme and language.
  *
  * @example
  * collectSettings(canvas).palette; // ["#2c6bff", ...]

package/dist/lib/settings/index.js

@@ -23,7 +23,7 @@ var isValidSettings = (input) => validateSettings(input) ? {
 	errors: formatErrors(validateSettings.errors)
 };
 /**
-* The app settings of a canvas: its input settings, keyboard shortcuts, colour palette and colours.
+* The app settings of a canvas: its input settings, keyboard shortcuts, colour palette, colours, theme and language.
 *
 * @example
 * collectSettings(canvas).palette; // ["#2c6bff", ...]
@@ -32,7 +32,8 @@ var collectSettings = (app) => ({
 	input: structuredClone(app.input.data),
 	shortcuts: structuredClone(app.shortcuts.bindings),
 	palette: [...app.palette.colours],
-	colours: { ...app.colours }
+	colours: { ...app.colours },
+	ui: { ...app.ui.data }
 });
 /**
 * Use app settings on a canvas, e.g. ones kept in the browser or imported. Parts left out stay as they are; invalid
@@ -49,6 +50,7 @@ var applySettings = (app, settings) => {
 		app.setColour(settings.colours.foreground, "foreground");
 		app.setColour(settings.colours.background, "background");
 	}
+	if (settings.ui) app.ui.update(settings.ui);
 };
 /**
 * The file name settings are exported to on a day, starting with a prefix (see `PaintCanvasNames.filePrefix`).

package/dist/lib/settings/schema.d.ts

@@ -1,4 +1,5 @@
 import type { InputSettingsData } from "../classes/InputSettings";
+import { type UiSettingsData } from "../classes/UiSettings/index.ts";
 import type { KeyCombo } from "../utils/shortcuts";
 /** The `format` of a settings file, unless the implementer names their own (see `PaintCanvasNames`) */
 export declare const SETTINGS_FILE_FORMAT = "paintcanvas-settings";
@@ -23,6 +24,8 @@ export interface AppSettings {
         foreground: string;
         background: string;
     };
+    /** The theme and language */
+    ui?: Partial<UiSettingsData>;
 }
 /** A settings file: what users export and import */
 export interface SettingsFile {
@@ -126,6 +129,21 @@ export declare const settingsSchema: {
                 };
             };
         };
+        readonly ui: {
+            readonly type: "object";
+            readonly additionalProperties: false;
+            readonly properties: {
+                readonly theme: {
+                    readonly enum: readonly ["light", "dark", "system"];
+                };
+                readonly locale: {
+                    readonly type: "string";
+                    readonly minLength: 1;
+                    readonly maxLength: 35;
+                    readonly pattern: "^[A-Za-z0-9-]+$";
+                };
+            };
+        };
     };
 };
 /** Schema of a settings file */

package/dist/lib/settings/schema.js

@@ -1,3 +1,4 @@
+import { LOCALE_PATTERN, THEMES } from "../classes/UiSettings/index.js";
 import { HEX_COLOUR_PATTERN, MAX_PALETTE_COLOURS, paletteFileSchema } from "../palette/schema.js";
 // src/lib/settings/schema.ts
 /** The `format` of a settings file, unless the implementer names their own (see `PaintCanvasNames`) */
@@ -76,6 +77,19 @@ var settingsSchema = {
 				foreground: hexColour,
 				background: hexColour
 			}
+		},
+		ui: {
+			type: "object",
+			additionalProperties: false,
+			properties: {
+				theme: { enum: THEMES },
+				locale: {
+					type: "string",
+					minLength: 1,
+					maxLength: 35,
+					pattern: LOCALE_PATTERN
+				}
+			}
 		}
 	}
 };