@lvl99dotcom/paintcanvas 0.2.0 → 0.3.0

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

@@ -13,17 +13,17 @@ import { styleMap } from "lit/directives/style-map.js";
 var SMOOTHING_CHOICES = [
 	{
 		value: SmoothingType.Linear,
-		label: "brushConfig.smoothingLinear",
+		label: "paintCanvas.brushConfig.smoothingLinear",
 		icon: "smoothingLinear"
 	},
 	{
 		value: SmoothingType.BezierQuad,
-		label: "brushConfig.smoothingQuadratic",
+		label: "paintCanvas.brushConfig.smoothingQuadratic",
 		icon: "smoothingBezierQuad"
 	},
 	{
 		value: SmoothingType.BezierCubic,
-		label: "brushConfig.smoothingCubic",
+		label: "paintCanvas.brushConfig.smoothingCubic",
 		icon: "smoothingBezierCubic"
 	}
 ];
@@ -35,16 +35,16 @@ var SOURCE_ICONS = {
 };
 /** Translation keys of the variation sources' names */
 var SOURCE_LABELS = {
-	pressure: "toolSettings.pressure",
-	tilt: "toolSettings.tilt",
-	randomise: "brushConfig.randomise"
+	pressure: "paintCanvas.toolSettings.pressure",
+	tilt: "paintCanvas.toolSettings.tilt",
+	randomise: "paintCanvas.brushConfig.randomise"
 };
 /** Translation keys of the brush shape error messages */
 var SHAPE_ERROR_KEYS = {
-	[SHAPE_ERRORS.type]: "shape.notPng",
-	[SHAPE_ERRORS.size]: "shape.tooLarge",
-	[SHAPE_ERRORS.decode]: "shape.readFailed",
-	[SHAPE_ERRORS.noImage]: "shape.noPngToPaste"
+	[SHAPE_ERRORS.type]: "paintCanvas.shape.notPng",
+	[SHAPE_ERRORS.size]: "paintCanvas.shape.tooLarge",
+	[SHAPE_ERRORS.decode]: "paintCanvas.shape.readFailed",
+	[SHAPE_ERRORS.noImage]: "paintCanvas.shape.noPngToPaste"
 };
 /** Largest stamp spacing in pixels */
 var MAX_SPACING = 200;
@@ -169,7 +169,7 @@ var PcBrushConfig = class extends PcElement {
 			});
 		} catch (error) {
 			this.emit("pc-toast", {
-				message: this.t(error instanceof ShapeImageError && SHAPE_ERROR_KEYS[error.message] || "brushConfig.shapeFailed"),
+				message: this.t(error instanceof ShapeImageError && SHAPE_ERROR_KEYS[error.message] || "paintCanvas.brushConfig.shapeFailed"),
 				kind: "error"
 			});
 		}
@@ -182,10 +182,10 @@ var PcBrushConfig = class extends PcElement {
 		const app = this.app;
 		const draft = this.draft;
 		if (!app || !draft) return;
-		const name = this.prompt(this.t("brushConfig.presetName"), draft.name ?? "")?.trim();
+		const name = this.prompt(this.t("paintCanvas.brushConfig.presetName"), draft.name ?? "")?.trim();
 		if (!name) return;
 		const existing = app.customPresets.findOwn(name, app.authorHandle, app.names.unknownAuthor);
-		if (existing && !this.confirm(this.t("presets.replaceConfirm", { name }))) return;
+		if (existing && !this.confirm(this.t("paintCanvas.presets.replaceConfirm", { name }))) return;
 		const preset = {
 			...app.newPreset(draft, name),
 			...existing ? { id: existing.id } : {}
@@ -195,13 +195,13 @@ var PcBrushConfig = class extends PcElement {
 			await app.customPresets.save(preset);
 			(this.kind === "eraser" ? app.eraser : app.brush).select(preset.id);
 			this.emit("pc-toast", {
-				message: this.t("presets.saved", { name }),
+				message: this.t("paintCanvas.presets.saved", { name }),
 				kind: "success"
 			});
 			this.close();
 		} catch {
 			this.emit("pc-toast", {
-				message: this.t("presets.saveFailed", { name }),
+				message: this.t("paintCanvas.presets.saveFailed", { name }),
 				kind: "error"
 			});
 		} finally {
@@ -216,18 +216,18 @@ var PcBrushConfig = class extends PcElement {
 		const id = this.editingId;
 		if (!app || !id) return;
 		const name = app.customPresets.get(id)?.name ?? "this preset";
-		if (!this.confirm(this.t("presets.deleteConfirm", { name }))) return;
+		if (!this.confirm(this.t("paintCanvas.presets.deleteConfirm", { name }))) return;
 		this.busy = true;
 		try {
 			await app.customPresets.remove(id);
 			this.emit("pc-toast", {
-				message: this.t("presets.deleted", { name }),
+				message: this.t("paintCanvas.presets.deleted", { name }),
 				kind: "success"
 			});
 			this.close();
 		} catch {
 			this.emit("pc-toast", {
-				message: this.t("presets.deleteFailed", { name }),
+				message: this.t("paintCanvas.presets.deleteFailed", { name }),
 				kind: "error"
 			});
 		} finally {
@@ -282,7 +282,7 @@ var PcBrushConfig = class extends PcElement {
             <input
               type="checkbox"
               class=${`${param} ${source}`}
-              aria-label=${this.t("brushConfig.variation", {
+              aria-label=${this.t("paintCanvas.brushConfig.variation", {
 			param: label,
 			source: this.t(SOURCE_LABELS[source])
 		})}
@@ -298,7 +298,7 @@ var PcBrushConfig = class extends PcElement {
 	renderShape(draft) {
 		const smoothing = draft.smoothingType === SmoothingType.None || draft.smoothingType === void 0 ? SmoothingType.Linear : draft.smoothingType;
 		return html`<div class="row shape-row">
-      <span class="label">${this.t("brushConfig.shape")}</span>
+      <span class="label">${this.t("paintCanvas.brushConfig.shape")}</span>
       <span
         class=${draft.image ? "shape-preview image" : "shape-preview"}
         style=${styleMap({ maskImage: typeof draft.image === "string" ? `url("${draft.image}")` : void 0 })}
@@ -309,7 +309,7 @@ var PcBrushConfig = class extends PcElement {
         ?disabled=${this.busy}
         @click=${() => this.renderRoot.querySelector("input.shape")?.click()}
       >
-        ${this.t("brushConfig.upload")}
+        ${this.t("paintCanvas.brushConfig.upload")}
       </button>
       <!-- Chosen through "Upload" -->
       <label class="visually-hidden">
@@ -331,14 +331,14 @@ var PcBrushConfig = class extends PcElement {
       <button
         type="button"
         class="icon-button paste"
-        title=${this.t("brushConfig.paste")}
+        title=${this.t("paintCanvas.brushConfig.paste")}
         ?disabled=${this.busy}
         @click=${() => void this.useShape(this.readClipboard)}
       >
-        ${iconLabel(this.iconUrl("clipboard"), this.t("brushConfig.paste"))}
+        ${iconLabel(this.iconUrl("clipboard"), this.t("paintCanvas.brushConfig.paste"))}
       </button>
       <fieldset class="smoothing">
-        <legend>${this.t("brushConfig.smoothing")}</legend>
+        <legend>${this.t("paintCanvas.brushConfig.smoothing")}</legend>
         ${SMOOTHING_CHOICES.map((choice) => html`<label class="icon-toggle" title=${this.t(choice.label)}>
               <input
                 type="radio"
@@ -368,11 +368,11 @@ var PcBrushConfig = class extends PcElement {
 		return html`<div
       role="dialog"
       aria-modal="true"
-      aria-label=${this.t(this.kind === "eraser" ? "brushConfig.eraserTitle" : "brushConfig.brushTitle")}
+      aria-label=${this.t(this.kind === "eraser" ? "paintCanvas.brushConfig.eraserTitle" : "paintCanvas.brushConfig.brushTitle")}
     >
       <div class="row header">
         <label>
-          ${this.t("brushConfig.name")}
+          ${this.t("paintCanvas.brushConfig.name")}
           <input
             class="name"
             .value=${draft.name ?? ""}
@@ -385,17 +385,17 @@ var PcBrushConfig = class extends PcElement {
           class="close dismiss"
           @click=${() => this.close()}
         >
-          ${this.t("common.dismiss")}
+          ${this.t("paintCanvas.common.dismiss")}
         </button>
       </div>
       <pc-brush-test .config=${draft} .tips=${this.app?.tips}></pc-brush-test>
       ${this.renderShape(draft)}
-      ${this.renderParam(draft, "width", this.t("common.width"))}
+      ${this.renderParam(draft, "width", this.t("paintCanvas.common.width"))}
       <div class="row">
         <span class="label"></span>
         <label
           class="icon-toggle"
-          title=${this.t("toolSettings.constrainProportions")}
+          title=${this.t("paintCanvas.toolSettings.constrainProportions")}
         >
           <input
             type="checkbox"
@@ -404,19 +404,21 @@ var PcBrushConfig = class extends PcElement {
             ?disabled=${this.busy}
             @change=${(e) => this.change({ constrainProportions: e.target.checked })}
           />
-          ${iconLabel(this.iconUrl(constrained ? "linked" : "unlinked"), this.t("toolSettings.constrainProportions"))}
+          ${iconLabel(this.iconUrl(constrained ? "linked" : "unlinked"), this.t("paintCanvas.toolSettings.constrainProportions"))}
         </label>
       </div>
-      ${this.renderParam(draft, "height", this.t("common.height"), constrained)}
-      ${this.renderParam(draft, "alpha", this.t("common.opacity"))}
-      ${this.renderParam(draft, "rotation", this.t("brushConfig.rotation"))}
-      ${this.renderParam(draft, "offsetX", this.t("brushConfig.offsetX"))}
-      ${this.renderParam(draft, "offsetY", this.t("brushConfig.offsetY"))}
+      ${this.renderParam(draft, "height", this.t("paintCanvas.common.height"), constrained)}
+      ${this.renderParam(draft, "alpha", this.t("paintCanvas.common.opacity"))}
+      ${this.renderParam(draft, "rotation", this.t("paintCanvas.brushConfig.rotation"))}
+      ${this.renderParam(draft, "offsetX", this.t("paintCanvas.brushConfig.offsetX"))}
+      ${this.renderParam(draft, "offsetY", this.t("paintCanvas.brushConfig.offsetY"))}
       <div class="row">
-        <span class="label">${this.t("brushConfig.sampleRate")}</span>
+        <span class="label"
+          >${this.t("paintCanvas.brushConfig.sampleRate")}</span
+        >
         ${this.number("sample-rate", draft.sampleRate ?? 5, sampleLimits, (sampleRate) => this.change({ sampleRate }))}
         ${this.slider("sample-rate", draft.sampleRate ?? 5, sampleLimits, (sampleRate) => this.change({ sampleRate }))}
-        <span class="label">${this.t("brushConfig.spacing")}</span>
+        <span class="label">${this.t("paintCanvas.brushConfig.spacing")}</span>
         ${this.number("spacing", draft.spacing ?? 5, spacingLimits, (spacing) => this.change({ spacing }))}
         ${this.slider("spacing", draft.spacing ?? 5, spacingLimits, (spacing) => this.change({ spacing }))}
       </div>
@@ -428,7 +430,7 @@ var PcBrushConfig = class extends PcElement {
           ?disabled=${this.busy}
           @change=${(e) => this.change({ snapToPixelGrid: e.target.checked })}
         />
-        ${this.t("brushConfig.snapToPixelGrid")}
+        ${this.t("paintCanvas.brushConfig.snapToPixelGrid")}
       </label>
       <div class="row">
         ${this.editingId ? html`<button
@@ -437,7 +439,7 @@ var PcBrushConfig = class extends PcElement {
                 ?disabled=${this.busy}
                 @click=${() => void this.deletePreset()}
               >
-                ${this.t("brushConfig.deletePreset")}
+                ${this.t("paintCanvas.brushConfig.deletePreset")}
               </button>` : nothing}
         <button
           type="button"
@@ -445,7 +447,7 @@ var PcBrushConfig = class extends PcElement {
           ?disabled=${this.busy}
           @click=${() => void this.addToPresets()}
         >
-          ${this.t("brushConfig.addToPresets")}
+          ${this.t("paintCanvas.brushConfig.addToPresets")}
         </button>
         <button
           type="button"
@@ -453,7 +455,7 @@ var PcBrushConfig = class extends PcElement {
           ?disabled=${this.busy}
           @click=${() => this.save()}
         >
-          ${this.t("common.save")}
+          ${this.t("paintCanvas.common.save")}
         </button>
       </div>
     </div>`;

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

@@ -12,10 +12,10 @@ import { styleMap } from "lit/directives/style-map.js";
 // src/ui/elements/PcBrushMenu/index.ts
 /** Translation keys of the preset file error messages */
 var PRESET_FILE_ERROR_KEYS = {
-	[PRESET_FILE_ERRORS.incompatible]: "presets.fileIncompatible",
-	[PRESET_FILE_ERRORS.read]: "presets.fileReadFailed",
-	[PRESET_FILE_ERRORS.export]: "presets.exportFailed",
-	[PRESET_FILE_ERRORS.empty]: "presets.nothingToExport"
+	[PRESET_FILE_ERRORS.incompatible]: "paintCanvas.presets.fileIncompatible",
+	[PRESET_FILE_ERRORS.read]: "paintCanvas.presets.fileReadFailed",
+	[PRESET_FILE_ERRORS.export]: "paintCanvas.presets.exportFailed",
+	[PRESET_FILE_ERRORS.empty]: "paintCanvas.presets.nothingToExport"
 };
 /** Cursor over a preset that a click deletes (Alt/Option held) */
 var DELETE_CURSOR = svgCursor("M6 6 L18 18 M18 6 L6 18", [12, 12], "not-allowed");
@@ -129,16 +129,16 @@ var PcBrushMenu = class extends PcElement {
 		const app = this.app;
 		if (!app) return;
 		const name = preset.name ?? preset.id;
-		if (!this.confirm(this.t("presets.deleteConfirm", { name }))) return;
+		if (!this.confirm(this.t("paintCanvas.presets.deleteConfirm", { name }))) return;
 		try {
 			await app.customPresets.remove(preset.id);
 			this.emit("pc-toast", {
-				message: this.t("presets.deleted", { name }),
+				message: this.t("paintCanvas.presets.deleted", { name }),
 				kind: "success"
 			});
 		} catch {
 			this.emit("pc-toast", {
-				message: this.t("presets.deleteFailed", { name }),
+				message: this.t("paintCanvas.presets.deleteFailed", { name }),
 				kind: "error"
 			});
 		}
@@ -163,7 +163,7 @@ var PcBrushMenu = class extends PcElement {
 			const presets = parsePresetFile(text, [app.names.presetFileFormat, BRUSH_PRESET_FILE_FORMAT]);
 			await app.customPresets.save(...presets);
 			this.emit("pc-toast", {
-				message: this.t("presets.imported", { count: presets.length }),
+				message: this.t("paintCanvas.presets.imported", { count: presets.length }),
 				kind: "success"
 			});
 		} catch (error) {
@@ -201,8 +201,8 @@ var PcBrushMenu = class extends PcElement {
 	* A preset group's heading in the chosen language ("My presets" and "Unknown" are translated; author names aren't).
 	*/
 	groupLabel(label) {
-		if (label === "My presets") return this.t("presets.myPresets");
-		if (label === "Unknown") return this.t("presets.unknownAuthor");
+		if (label === "My presets") return this.t("paintCanvas.presets.myPresets");
+		if (label === "Unknown") return this.t("paintCanvas.presets.unknownAuthor");
 		return label;
 	}
 	/** The brush or eraser settings this menu controls */
@@ -273,7 +273,7 @@ var PcBrushMenu = class extends PcElement {
 	render() {
 		const settings = this.settings;
 		if (!settings) return html``;
-		const title = this.t(this.kind === "eraser" ? "tool.eraser" : "tool.brush");
+		const title = this.t(this.kind === "eraser" ? "paintCanvas.tool.eraser" : "paintCanvas.tool.brush");
 		const presets = Object.values(settings.presets);
 		const sizes = previewSizes(presets);
 		const app = this.app;
@@ -294,9 +294,9 @@ var PcBrushMenu = class extends PcElement {
         <div
           class="size"
           role="slider"
-          aria-label=${this.t("brushMenu.size", { tool: title })}
+          aria-label=${this.t("paintCanvas.brushMenu.size", { tool: title })}
           aria-valuenow=${settings.width}
-          title=${this.t("brushMenu.dragToResize")}
+          title=${this.t("paintCanvas.brushMenu.dragToResize")}
           @pointerdown=${this.onPointerDown}
           @pointermove=${this.onPointerMove}
           @pointerup=${this.onPointerUp}
@@ -307,7 +307,7 @@ var PcBrushMenu = class extends PcElement {
       </div>
       <div
         class="presets"
-        aria-label=${this.t("brushMenu.presets", { tool: title })}
+        aria-label=${this.t("paintCanvas.brushMenu.presets", { tool: title })}
       >
         ${groups.map((group) => html`
             <h3>${this.groupLabel(group.label)}</h3>
@@ -322,18 +322,18 @@ var PcBrushMenu = class extends PcElement {
           class="pill new-preset"
           @click=${() => this.emit("pc-new-preset", this.kind)}
         >
-          ${this.t("brushMenu.create")}
+          ${this.t("paintCanvas.brushMenu.create")}
         </button>
         <button
           type="button"
           class="pill import"
           @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
         >
-          ${this.t("brushMenu.import")}
+          ${this.t("paintCanvas.brushMenu.import")}
         </button>
         <!-- Chosen through "Import" -->
         <label class="visually-hidden">
-          ${this.t("brushMenu.importFile")}
+          ${this.t("paintCanvas.brushMenu.importFile")}
           <input
             type="file"
             class="import-file"
@@ -352,7 +352,7 @@ var PcBrushMenu = class extends PcElement {
           class="pill export"
           @click=${() => void this.exportFile()}
         >
-          ${this.t("brushMenu.export")}
+          ${this.t("paintCanvas.brushMenu.export")}
         </button>
       </div>
     `;

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

@@ -120,14 +120,14 @@ var PcBrushTest = class extends PcElement {
       <canvas
         width=${800}
         height=${320}
-        aria-label=${this.t("brushConfig.testArea")}
+        aria-label=${this.t("paintCanvas.brushConfig.testArea")}
         @pointerdown=${this.onPointerDown}
         @pointermove=${this.onPointerMove}
         @pointerup=${this.onPointerUp}
         @pointercancel=${this.onPointerUp}
       ></canvas>
       <button type="button" class="clear" @click=${() => this.clear()}>
-        ${this.t("common.clear")}
+        ${this.t("paintCanvas.common.clear")}
       </button>
     `;
 	}

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

@@ -981,7 +981,7 @@ var PcCanvas = class extends PcElement {
 	render() {
 		return html`<canvas
         class="scene"
-        aria-label=${this.t("canvas.label")}
+        aria-label=${this.t("paintCanvas.canvas.label")}
         @pointerdown=${this.onPointerDown}
         @pointermove=${this.onPointerMove}
         @pointerup=${this.onPointerUp}

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

@@ -165,7 +165,7 @@ var PcCanvasMap = class extends PcElement {
 		};
 		return html`
       <canvas
-        aria-label=${this.t("canvas.map")}
+        aria-label=${this.t("paintCanvas.canvas.map")}
         @pointerdown=${this.onPointerDown}
         @pointermove=${this.onPointerMove}
         @pointerup=${() => this.dragging = false}

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

@@ -79,7 +79,7 @@ var PcInfoTip = class extends PcElement {
 		return html`<button
         part="button"
         type="button"
-        aria-label=${this.label || this.t("common.moreInformation")}
+        aria-label=${this.label || this.t("paintCanvas.common.moreInformation")}
         aria-expanded=${String(this.open)}
         aria-describedby=${this.open ? "tip" : nothing}
         @click=${() => this.open = !this.open}

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

@@ -1,15 +1,16 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
+import { languageName } from "../../../lib/i18n/index.js";
 import { isTouchDevice, zoomModifierName } from "../../../lib/classes/InputSettings/index.js";
 import { GESTURE_ACTIONS, TOUCH_GESTURES, assignGesture } from "../../../lib/utils/gestures/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcInputSettings/index.ts
 /** Translation keys of the gesture actions' names */
 var ACTION_KEYS = {
-	undo: "common.undo",
-	redo: "common.redo",
-	copy: "common.copy",
-	paste: "common.paste"
+	undo: "paintCanvas.common.undo",
+	redo: "paintCanvas.common.redo",
+	copy: "paintCanvas.common.copy",
+	paste: "paintCanvas.common.paste"
 };
 /**
 * How the user's input devices control the canvas: scrolling and pinching (with Cmd/Ctrl + scroll to zoom on devices
@@ -92,7 +93,7 @@ var PcInputSettings = class extends PcElement {
 	*/
 	renderGestures(data) {
 		return html`<fieldset part="gestures">
-      <legend>${this.t("inputSettings.gestures")}</legend>
+      <legend>${this.t("paintCanvas.inputSettings.gestures")}</legend>
       ${GESTURE_ACTIONS.map((action) => html`<label for="gesture-${action}"
               >${this.t(ACTION_KEYS[action])}</label
             >
@@ -105,7 +106,7 @@ var PcInputSettings = class extends PcElement {
                     value=${gesture}
                     ?selected=${data.gestures[action] === gesture}
                   >
-                    ${this.t(gesture === "off" ? "common.off" : `gesture.${gesture}`)}
+                    ${this.t(gesture === "off" ? "paintCanvas.common.off" : `paintCanvas.gesture.${gesture}`)}
                   </option>`)}
             </select>`)}
     </fieldset>`;
@@ -114,7 +115,9 @@ var PcInputSettings = class extends PcElement {
 	renderLanguage() {
 		const translations = this.translations;
 		return html`<fieldset part="language">
-      <label for="language">${this.t("inputSettings.language")}</label>
+      <label for="language"
+        >${this.t("paintCanvas.inputSettings.language")}</label
+      >
       <select
         id="language"
         name="language"
@@ -125,9 +128,10 @@ var PcInputSettings = class extends PcElement {
       >
         ${translations.locales.map((locale) => html`<option
               value=${locale}
+              lang=${locale}
               ?selected=${translations.locale === locale}
             >
-              ${this.t(`language.${locale}`)}
+              ${languageName(locale)}
             </option>`)}
       </select>
     </fieldset>`;
@@ -136,11 +140,11 @@ var PcInputSettings = class extends PcElement {
 		const data = this.settings?.data;
 		if (!data) return nothing;
 		return html`<fieldset part="controls">
-        <legend>${this.t("inputSettings.title")}</legend>
-        ${this.toggle(data, "scrollPan", this.t(this.touch ? "inputSettings.touchPan" : "inputSettings.scrollPan"))}
-        ${this.toggle(data, "pinchZoom", this.t("inputSettings.pinchZoom"))}
-        ${this.touch ? nothing : this.toggle(data, "modifierScrollZoom", this.t("inputSettings.modifierScrollZoom", { key: this.modifier }))}
-        ${this.focusPen ? this.toggle(data, "focusPen", this.t("inputSettings.focusPen")) : nothing}
+        <legend>${this.t("paintCanvas.inputSettings.title")}</legend>
+        ${this.toggle(data, "scrollPan", this.t(this.touch ? "paintCanvas.inputSettings.touchPan" : "paintCanvas.inputSettings.scrollPan"))}
+        ${this.toggle(data, "pinchZoom", this.t("paintCanvas.inputSettings.pinchZoom"))}
+        ${this.touch ? nothing : this.toggle(data, "modifierScrollZoom", this.t("paintCanvas.inputSettings.modifierScrollZoom", { key: this.modifier }))}
+        ${this.focusPen ? this.toggle(data, "focusPen", this.t("paintCanvas.inputSettings.focusPen")) : nothing}
       </fieldset>
       ${this.touch ? this.renderGestures(data) : nothing}
       ${this.languages ? this.renderLanguage() : nothing}`;