@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

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

@@ -0,0 +1,18 @@
+// src/lib/classes/PaintCanvas/tool.ts
+/** Drawing and navigation tools */
+var Tool = /* @__PURE__ */ function(Tool) {
+	Tool["Brush"] = "brush";
+	Tool["Eraser"] = "eraser";
+	/** Move, scale and rotate */
+	Tool["Move"] = "move";
+	Tool["RectangleLasso"] = "rectangle-lasso";
+	Tool["CircleLasso"] = "circle-lasso";
+	Tool["PolygonLasso"] = "polygon-lasso";
+	Tool["FreeformLasso"] = "freeform-lasso";
+	Tool["Pan"] = "pan";
+	Tool["Zoom"] = "zoom";
+	/** Set the current colour from the canvas (eyedropper) */
+	Tool["ColourSample"] = "colour-sample";
+	return Tool;
+}({});
+export { Tool };

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

@@ -0,0 +1,58 @@
+/**
+ * Keep only valid colours from an untrusted value (e.g. stored or imported): lowercase `#rrggbb` strings, each once, up
+ * to `MAX_PALETTE_COLOURS`. Undefined if the value isn't an array.
+ *
+ * @example
+ * sanitisePalette(["#FF0000", "red", "#ff0000", "#00ff00"]); // ["#ff0000", "#00ff00"]
+ * sanitisePalette("#ff0000"); // undefined
+ */
+export declare const sanitisePalette: (input: unknown) => string[] | undefined;
+/**
+ * The user's saved colours, shown as swatches. Each colour is kept once, as lowercase `#rrggbb`, up to
+ * `MAX_PALETTE_COLOURS`. Kept in memory; the implementer saves and restores them (see `set` and the `change` event).
+ *
+ * Dispatches a `change` event when the colours change.
+ *
+ * @example
+ * const palette = new Palette();
+ * palette.add("#123456");
+ * palette.colours.at(-1); // "#123456"
+ */
+export default class Palette extends EventTarget {
+    private values;
+    /** Start with some colours (invalid ones are left out), or `DEFAULT_PALETTE` */
+    constructor(colours?: readonly string[]);
+    /** The colours in order (read-only copy) */
+    get colours(): readonly string[];
+    /**
+     * Add a colour at the end. Returns whether it was added: not if it's already there, the palette is full, or it isn't a
+     * `#rrggbb` colour.
+     *
+     * @example
+     * palette.add("#FF0000"); // true, added as "#ff0000"
+     */
+    add(colour: string): boolean;
+    /**
+     * Add colours at the end, e.g. from an imported palette file, leaving out ones already there. Returns how many were
+     * added.
+     *
+     * @example
+     * palette.merge(["#ff0000", "#00ff00"]); // 1, if "#ff0000" was already there
+     */
+    merge(colours: readonly string[]): number;
+    /**
+     * Remove the colour at a position.
+     *
+     * @example
+     * palette.remove(0);
+     */
+    remove(index: number): void;
+    /**
+     * Replace all the colours (e.g. when restoring saved ones), keeping only valid ones, and dispatch `change` if they
+     * changed.
+     *
+     * @example
+     * palette.set(["#000000", "#ffffff"]);
+     */
+    set(colours: unknown): void;
+}

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

@@ -0,0 +1,92 @@
+import { isHexColour } from "../../utils/colour/index.js";
+import "../../palette/schema.js";
+import { DEFAULT_PALETTE } from "../../palette/index.js";
+// src/lib/classes/Palette/index.ts
+/**
+* Keep only valid colours from an untrusted value (e.g. stored or imported): lowercase `#rrggbb` strings, each once, up
+* to `MAX_PALETTE_COLOURS`. Undefined if the value isn't an array.
+*
+* @example
+* sanitisePalette(["#FF0000", "red", "#ff0000", "#00ff00"]); // ["#ff0000", "#00ff00"]
+* sanitisePalette("#ff0000"); // undefined
+*/
+var sanitisePalette = (input) => {
+	if (!Array.isArray(input)) return void 0;
+	const colours = /* @__PURE__ */ new Set();
+	for (const value of input) {
+		if (colours.size >= 1e3) break;
+		if (isHexColour(value)) colours.add(value.toLowerCase());
+	}
+	return [...colours];
+};
+/**
+* The user's saved colours, shown as swatches. Each colour is kept once, as lowercase `#rrggbb`, up to
+* `MAX_PALETTE_COLOURS`. Kept in memory; the implementer saves and restores them (see `set` and the `change` event).
+*
+* Dispatches a `change` event when the colours change.
+*
+* @example
+* const palette = new Palette();
+* palette.add("#123456");
+* palette.colours.at(-1); // "#123456"
+*/
+var Palette = class extends EventTarget {
+	values;
+	/** Start with some colours (invalid ones are left out), or `DEFAULT_PALETTE` */
+	constructor(colours = DEFAULT_PALETTE) {
+		super();
+		this.values = sanitisePalette(colours);
+	}
+	/** The colours in order (read-only copy) */
+	get colours() {
+		return this.values;
+	}
+	/**
+	* Add a colour at the end. Returns whether it was added: not if it's already there, the palette is full, or it isn't a
+	* `#rrggbb` colour.
+	*
+	* @example
+	* palette.add("#FF0000"); // true, added as "#ff0000"
+	*/
+	add(colour) {
+		const before = this.values.length;
+		this.set([...this.values, colour]);
+		return this.values.length > before;
+	}
+	/**
+	* Add colours at the end, e.g. from an imported palette file, leaving out ones already there. Returns how many were
+	* added.
+	*
+	* @example
+	* palette.merge(["#ff0000", "#00ff00"]); // 1, if "#ff0000" was already there
+	*/
+	merge(colours) {
+		const before = this.values.length;
+		this.set([...this.values, ...colours]);
+		return this.values.length - before;
+	}
+	/**
+	* Remove the colour at a position.
+	*
+	* @example
+	* palette.remove(0);
+	*/
+	remove(index) {
+		if (index < 0 || index >= this.values.length) return;
+		this.set(this.values.filter((_, i) => i !== index));
+	}
+	/**
+	* Replace all the colours (e.g. when restoring saved ones), keeping only valid ones, and dispatch `change` if they
+	* changed.
+	*
+	* @example
+	* palette.set(["#000000", "#ffffff"]);
+	*/
+	set(colours) {
+		const next = sanitisePalette(colours);
+		if (!next || next.length === this.values.length && next.every((colour, i) => colour === this.values[i])) return;
+		this.values = next;
+		this.dispatchEvent(new Event("change"));
+	}
+};
+export { Palette as default, sanitisePalette };

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

@@ -0,0 +1,53 @@
+import type PaintCanvas from "../PaintCanvas";
+import type { SettingsStoreLike } from "../../storage";
+/** How long to wait after settings change before saving, so quick changes (e.g. dragging a colour slider) are saved together (milliseconds) */
+export declare const SETTINGS_SAVE_DELAY_MS = 500;
+/** Event dispatched when loading or saving settings fails (detail: the error) */
+export declare const SETTINGS_AUTOSAVE_ERROR_EVENT = "error";
+/** Options for `SettingsAutosave` */
+export interface SettingsAutosaveOptions {
+    /** How long to wait after settings change before saving (default `SETTINGS_SAVE_DELAY_MS`) */
+    delayMs?: number;
+}
+/**
+ * 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.
+ *
+ * @example
+ * const autosave = new SettingsAutosave(canvas, new IndexedDbSettingsStore());
+ * await autosave.ready;
+ * autosave.stop(); // saves any pending change
+ */
+export default class SettingsAutosave extends EventTarget {
+    /** Where the settings are kept */
+    readonly store: SettingsStoreLike;
+    /** Resolves once the saved settings are restored (or there were none) */
+    readonly ready: Promise<void>;
+    private readonly app;
+    private readonly delayMs;
+    private timer?;
+    /** The settings last saved or restored, as JSON, to skip saving unchanged settings */
+    private saved?;
+    private stopped;
+    private readonly onChange;
+    constructor(app: PaintCanvas, store: SettingsStoreLike, options?: SettingsAutosaveOptions);
+    /** The canvas parts whose changes are saved */
+    private get sources();
+    /**
+     * Stop saving changes, saving any that are waiting.
+     */
+    stop(): void;
+    /**
+     * Save the settings now if they changed since they were last saved.
+     */
+    save(): Promise<void>;
+    /** Restore the saved settings, then listen for changes */
+    private start;
+    /** Save soon, after changes stop for a moment */
+    private schedule;
+    /** Tell listeners loading or saving failed */
+    private fail;
+}

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

@@ -0,0 +1,98 @@
+import { applySettings, collectSettings, isValidSettings } from "../../settings/index.js";
+// src/lib/classes/SettingsAutosave/index.ts
+/** How long to wait after settings change before saving, so quick changes (e.g. dragging a colour slider) are saved together (milliseconds) */
+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, 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.
+*
+* @example
+* const autosave = new SettingsAutosave(canvas, new IndexedDbSettingsStore());
+* await autosave.ready;
+* autosave.stop(); // saves any pending change
+*/
+var SettingsAutosave = class extends EventTarget {
+	/** Where the settings are kept */
+	store;
+	/** Resolves once the saved settings are restored (or there were none) */
+	ready;
+	app;
+	delayMs;
+	timer;
+	/** The settings last saved or restored, as JSON, to skip saving unchanged settings */
+	saved;
+	stopped = false;
+	onChange = () => this.schedule();
+	constructor(app, store, options = {}) {
+		super();
+		this.app = app;
+		this.store = store;
+		this.delayMs = options.delayMs ?? 500;
+		this.ready = this.start();
+	}
+	/** The canvas parts whose changes are saved */
+	get sources() {
+		const { app } = this;
+		return [
+			app,
+			app.input,
+			app.shortcuts,
+			app.palette,
+			app.ui
+		];
+	}
+	/**
+	* Stop saving changes, saving any that are waiting.
+	*/
+	stop() {
+		if (this.stopped) return;
+		this.stopped = true;
+		for (const source of this.sources) source.removeEventListener("change", this.onChange);
+		if (this.timer === void 0) return;
+		clearTimeout(this.timer);
+		this.save();
+	}
+	/**
+	* Save the settings now if they changed since they were last saved.
+	*/
+	async save() {
+		this.timer = void 0;
+		const settings = collectSettings(this.app);
+		const json = JSON.stringify(settings);
+		if (json === this.saved) return;
+		this.saved = json;
+		try {
+			await this.store.save(settings);
+		} catch (error) {
+			this.saved = void 0;
+			this.fail(error);
+		}
+	}
+	/** Restore the saved settings, then listen for changes */
+	async start() {
+		try {
+			const result = isValidSettings(await this.store.load());
+			if (result.valid && !this.stopped) applySettings(this.app, result.value);
+		} catch (error) {
+			this.fail(error);
+		}
+		if (this.stopped) return;
+		this.saved = JSON.stringify(collectSettings(this.app));
+		for (const source of this.sources) source.addEventListener("change", this.onChange);
+	}
+	/** Save soon, after changes stop for a moment */
+	schedule() {
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => void this.save(), this.delayMs);
+	}
+	/** Tell listeners loading or saving failed */
+	fail(error) {
+		this.dispatchEvent(new CustomEvent(SETTINGS_AUTOSAVE_ERROR_EVENT, { detail: error }));
+	}
+};
+export { SETTINGS_AUTOSAVE_ERROR_EVENT, SETTINGS_SAVE_DELAY_MS, SettingsAutosave as default };

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

@@ -0,0 +1,63 @@
+import { type KeyCombo, type Shortcut, type ShortcutBindings } from "../../utils/shortcuts";
+/** What happened when setting an action's key combination */
+export interface ShortcutChangeResult {
+    /** Whether the key combination was set */
+    changed: boolean;
+    /** The action that had the key combination and lost it, if any */
+    movedFrom?: string;
+    /** The fixed action that uses the key combination, so it wasn't set */
+    fixed?: string;
+}
+/**
+ * The user's keyboard shortcuts: the key combination of each configurable action (see `CONFIGURABLE_SHORTCUTS`), each
+ * used by one action at most. Kept in memory; the implementer saves and restores them (see `load` and the `change`
+ * event).
+ *
+ * Dispatches a `change` event when a key combination changes.
+ *
+ * @example
+ * const shortcuts = new ShortcutSettings();
+ * shortcuts.set("tool-brush", { key: "p" });
+ * shortcuts.combo("tool-brush"); // { key: "p" }
+ */
+export default class ShortcutSettings extends EventTarget {
+    private values;
+    private list;
+    constructor(initial?: unknown);
+    /** Each configurable action's key combination, by ID (read-only copy) */
+    get bindings(): Readonly<ShortcutBindings>;
+    /** The shortcuts key presses are matched against (except the hold-to-pan key) */
+    get shortcuts(): readonly Shortcut[];
+    /** The key held to pan, returning to the last tool when released (null when it has none) */
+    get holdToPan(): KeyCombo | null;
+    /**
+     * A configurable action's key combination (null when it has none or there's no such action).
+     *
+     * @example
+     * shortcuts.combo("deselect"); // { key: "d", cmd: true }
+     */
+    combo(id: string): KeyCombo | null;
+    /**
+     * Set or remove (null) a configurable action's key combination. If another configurable action has it, that action
+     * loses it (`movedFrom`). Nothing changes for a key combination a fixed action uses (`fixed`), or an unknown action.
+     *
+     * @example
+     * shortcuts.set("tool-brush", { key: "e" }); // { changed: true, movedFrom: "tool-eraser" }
+     * shortcuts.set("deselect", { key: "z", cmd: true }); // { changed: false, fixed: "undo" }
+     */
+    set(id: string, combo: KeyCombo | null): ShortcutChangeResult;
+    /**
+     * Go back to the default key combinations.
+     */
+    reset(): void;
+    /**
+     * Replace the key combinations, e.g. with saved or imported ones (see `sanitiseShortcutBindings`; actions left out
+     * get their defaults), and dispatch `change` if anything changed.
+     *
+     * @example
+     * shortcuts.load({ "tool-brush": { key: "p" } });
+     */
+    load(input: unknown): void;
+    /** Use new key combinations and tell listeners */
+    private apply;
+}

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

@@ -0,0 +1,110 @@
+import { CONFIGURABLE_SHORTCUTS, defaultShortcutBindings, fixedShortcutFor, normaliseCombo, sameCombo, sanitiseShortcutBindings, shortcutsFor } from "../../utils/shortcuts/index.js";
+// src/lib/classes/ShortcutSettings/index.ts
+/**
+* The user's keyboard shortcuts: the key combination of each configurable action (see `CONFIGURABLE_SHORTCUTS`), each
+* used by one action at most. Kept in memory; the implementer saves and restores them (see `load` and the `change`
+* event).
+*
+* Dispatches a `change` event when a key combination changes.
+*
+* @example
+* const shortcuts = new ShortcutSettings();
+* shortcuts.set("tool-brush", { key: "p" });
+* shortcuts.combo("tool-brush"); // { key: "p" }
+*/
+var ShortcutSettings = class extends EventTarget {
+	values;
+	list;
+	constructor(initial) {
+		super();
+		this.values = sanitiseShortcutBindings(initial, defaultShortcutBindings());
+		this.list = shortcutsFor(this.values);
+	}
+	/** Each configurable action's key combination, by ID (read-only copy) */
+	get bindings() {
+		return this.values;
+	}
+	/** The shortcuts key presses are matched against (except the hold-to-pan key) */
+	get shortcuts() {
+		return this.list;
+	}
+	/** The key held to pan, returning to the last tool when released (null when it has none) */
+	get holdToPan() {
+		return this.values["pan"] ?? null;
+	}
+	/**
+	* A configurable action's key combination (null when it has none or there's no such action).
+	*
+	* @example
+	* shortcuts.combo("deselect"); // { key: "d", cmd: true }
+	*/
+	combo(id) {
+		return this.values[id] ?? null;
+	}
+	/**
+	* Set or remove (null) a configurable action's key combination. If another configurable action has it, that action
+	* loses it (`movedFrom`). Nothing changes for a key combination a fixed action uses (`fixed`), or an unknown action.
+	*
+	* @example
+	* shortcuts.set("tool-brush", { key: "e" }); // { changed: true, movedFrom: "tool-eraser" }
+	* shortcuts.set("deselect", { key: "z", cmd: true }); // { changed: false, fixed: "undo" }
+	*/
+	set(id, combo) {
+		if (!CONFIGURABLE_SHORTCUTS.some((definition) => definition.id === id)) return { changed: false };
+		const next = combo && normaliseCombo(combo);
+		const current = this.values[id] ?? null;
+		if (next ? current && sameCombo(current, next) : !current) return { changed: false };
+		if (!next) {
+			this.apply({
+				...this.values,
+				[id]: null
+			});
+			return { changed: true };
+		}
+		const fixed = fixedShortcutFor(next);
+		if (fixed) return {
+			changed: false,
+			fixed: fixed.id
+		};
+		const movedFrom = Object.keys(this.values).find((other) => {
+			const otherCombo = this.values[other];
+			return other !== id && otherCombo && sameCombo(otherCombo, next);
+		});
+		this.apply({
+			...this.values,
+			...movedFrom && { [movedFrom]: null },
+			[id]: next
+		});
+		return movedFrom ? {
+			changed: true,
+			movedFrom
+		} : { changed: true };
+	}
+	/**
+	* Go back to the default key combinations.
+	*/
+	reset() {
+		this.load(defaultShortcutBindings());
+	}
+	/**
+	* Replace the key combinations, e.g. with saved or imported ones (see `sanitiseShortcutBindings`; actions left out
+	* get their defaults), and dispatch `change` if anything changed.
+	*
+	* @example
+	* shortcuts.load({ "tool-brush": { key: "p" } });
+	*/
+	load(input) {
+		const next = sanitiseShortcutBindings(input, defaultShortcutBindings());
+		if (Object.keys(next).some((id) => {
+			const [a, b] = [next[id], this.values[id]];
+			return a && b ? !sameCombo(a, b) : a !== b;
+		})) this.apply(next);
+	}
+	/** Use new key combinations and tell listeners */
+	apply(bindings) {
+		this.values = bindings;
+		this.list = shortcutsFor(bindings);
+		this.dispatchEvent(new Event("change"));
+	}
+};
+export { ShortcutSettings as default };

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 };