@lvl99dotcom/paintcanvas 0.2.0 → 0.3.1

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

@@ -11,66 +11,66 @@ import { html, nothing, unsafeCSS } from "lit";
 var BLEND_MODE_OPTIONS = [
 	{
 		value: BlendMode.Normal,
-		label: "blendMode.normal"
+		label: "paintCanvas.blendMode.normal"
 	},
 	{
 		value: BlendMode.Screen,
-		label: "blendMode.screen"
+		label: "paintCanvas.blendMode.screen"
 	},
 	{
 		value: BlendMode.Lighten,
-		label: "blendMode.lighten"
+		label: "paintCanvas.blendMode.lighten"
 	},
 	{
 		value: BlendMode.Multiply,
-		label: "blendMode.multiply"
+		label: "paintCanvas.blendMode.multiply"
 	},
 	{
 		value: BlendMode.Darken,
-		label: "blendMode.darken"
+		label: "paintCanvas.blendMode.darken"
 	},
 	{
 		value: BlendMode.Overlay,
-		label: "blendMode.overlay"
+		label: "paintCanvas.blendMode.overlay"
 	}
 ];
 /** Context menu options in display order, with the translation keys of their labels */
 var LAYER_ACTIONS = [
 	{
 		action: "mask",
-		label: "layers.createMask"
+		label: "paintCanvas.layers.createMask"
 	},
 	{
 		action: "duplicate",
-		label: "layers.duplicate"
+		label: "paintCanvas.layers.duplicate"
 	},
 	{
 		action: "merge",
-		label: "layers.mergeDown"
+		label: "paintCanvas.layers.mergeDown"
 	},
 	{
 		action: "clear",
-		label: "layers.clear"
+		label: "paintCanvas.layers.clear"
 	},
 	{
 		action: "delete",
-		label: "layers.delete"
+		label: "paintCanvas.layers.delete"
 	},
 	{
 		action: "up",
-		label: "layers.moveUp"
+		label: "paintCanvas.layers.moveUp"
 	},
 	{
 		action: "top",
-		label: "layers.moveToTop"
+		label: "paintCanvas.layers.moveToTop"
 	},
 	{
 		action: "down",
-		label: "layers.moveDown"
+		label: "paintCanvas.layers.moveDown"
 	},
 	{
 		action: "bottom",
-		label: "layers.moveToBottom"
+		label: "paintCanvas.layers.moveToBottom"
 	}
 ];
 /**
@@ -79,38 +79,38 @@ var LAYER_ACTIONS = [
 */
 var CONFIRMATIONS = {
 	merge: {
-		heading: "layers.mergeDownTitle",
-		message: "layers.mergeDownConfirm",
+		heading: "paintCanvas.layers.mergeDownTitle",
+		message: "paintCanvas.layers.mergeDownConfirm",
 		choices: [{
 			value: "merge",
-			label: "layers.mergeLayer"
+			label: "paintCanvas.layers.mergeLayer"
 		}, {
 			value: CANCEL_CHOICE,
-			label: "common.dismiss",
+			label: "paintCanvas.common.dismiss",
 			variant: "dismiss"
 		}]
 	},
 	clear: {
-		heading: "layers.clearTitle",
-		message: "layers.clearConfirm",
+		heading: "paintCanvas.layers.clearTitle",
+		message: "paintCanvas.layers.clearConfirm",
 		choices: [{
 			value: "clear",
-			label: "common.clear"
+			label: "paintCanvas.common.clear"
 		}, {
 			value: CANCEL_CHOICE,
-			label: "common.dismiss",
+			label: "paintCanvas.common.dismiss",
 			variant: "dismiss"
 		}]
 	},
 	delete: {
-		heading: "layers.deleteTitle",
-		message: "layers.deleteConfirm",
+		heading: "paintCanvas.layers.deleteTitle",
+		message: "paintCanvas.layers.deleteConfirm",
 		choices: [{
 			value: "delete",
-			label: "common.delete"
+			label: "paintCanvas.common.delete"
 		}, {
 			value: CANCEL_CHOICE,
-			label: "common.dismiss",
+			label: "paintCanvas.common.dismiss",
 			variant: "dismiss"
 		}]
 	}
@@ -480,7 +480,7 @@ var PcLayerItem = class extends PcElement {
       <button
         type="button"
         class="handle"
-        aria-label=${this.t("layers.reorder", { name: layer.name })}
+        aria-label=${this.t("paintCanvas.layers.reorder", { name: layer.name })}
         aria-haspopup="menu"
         aria-expanded=${this.menuOpen ? "true" : "false"}
         @contextmenu=${this.onContextMenu}
@@ -496,7 +496,7 @@ var PcLayerItem = class extends PcElement {
         <canvas class="thumbnail" aria-hidden="true"></canvas>
         <input
           class="name ${active ? "active" : ""}"
-          aria-label=${this.t("layers.name")}
+          aria-label=${this.t("paintCanvas.layers.name")}
           .value=${layer.name}
           @change=${(e) => this.onRename(e, stack, layer)}
         />
@@ -504,12 +504,12 @@ var PcLayerItem = class extends PcElement {
           type="range"
           min="0"
           max="100"
-          aria-label=${this.t("common.opacity")}
+          aria-label=${this.t("paintCanvas.common.opacity")}
           .value=${String(Math.round(layer.opacity * 100))}
           @change=${(e) => stack.update(layer.id, { opacity: Number(e.target.value) / 100 })}
         />
         <select
-          aria-label=${this.t("layers.blendMode")}
+          aria-label=${this.t("paintCanvas.layers.blendMode")}
           @change=${(e) => stack.update(layer.id, { blendMode: e.target.value })}
         >
           ${BLEND_MODE_OPTIONS.map(({ value, label }) => html`<option
@@ -523,7 +523,7 @@ var PcLayerItem = class extends PcElement {
       <button
         type="button"
         class="alpha-lock"
-        aria-label=${this.t("layers.alphaLock")}
+        aria-label=${this.t("paintCanvas.layers.alphaLock")}
         aria-pressed=${layer.alphaLock}
         @click=${() => stack.update(layer.id, { alphaLock: !layer.alphaLock })}
       >
@@ -535,13 +535,13 @@ var PcLayerItem = class extends PcElement {
       <button
         type="button"
         class="visibility"
-        aria-label=${this.t("layers.visible")}
+        aria-label=${this.t("paintCanvas.layers.visible")}
         aria-pressed=${layer.visible}
         @click=${() => stack.update(layer.id, { visible: !layer.visible })}
       >
         <img src=${this.iconUrl(layer.visible ? "visible" : "hidden")} alt="" />
       </button>
-      ${this.menuOpen ? html`<menu aria-label=${this.t("layers.actions")}>
+      ${this.menuOpen ? html`<menu aria-label=${this.t("paintCanvas.layers.actions")}>
               ${LAYER_ACTIONS.map(({ action, label }) => html`<li>
                     <button
                       type="button"

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

@@ -196,7 +196,7 @@ var PcLayersMenu = class extends PcElement {
         ?disabled=${!layers.canCreate}
         @click=${() => layers.create()}
       >
-        ${this.t("layers.new")}
+        ${this.t("paintCanvas.layers.new")}
       </button>
       <p class="announcement" role="status" aria-live="polite">
         ${this.announcement || nothing}

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

@@ -114,21 +114,24 @@ var PcStats = class extends PcElement {
 		if (!app) return nothing;
 		const colour = app.pointer && app.sampleColour(app.pointer);
 		const autosave = app.autosave;
-		return html`<ul part="stats" aria-label=${this.t("stats.label")}>
+		return html`<ul
+      part="stats"
+      aria-label=${this.t("paintCanvas.stats.label")}
+    >
       <li class="size">
-        ${this.t("stats.size", {
+        ${this.t("paintCanvas.stats.size", {
 			width: app.width,
 			height: app.height
 		})}
       </li>
       ${autosave ? html`<li class="stored">
-              ${this.t("stats.stored", { size: formatBytes(autosave.storedBytes, this.translations.locale) })}
+              ${this.t("paintCanvas.stats.stored", { size: formatBytes(autosave.storedBytes, this.translations.locale) })}
             </li>` : nothing}
       <li class="zoom">
-        ${this.t("stats.zoom", { zoom: zoomPercent(app.viewport.zoom) })}
+        ${this.t("paintCanvas.stats.zoom", { zoom: zoomPercent(app.viewport.zoom) })}
       </li>
       <li class="colour">
-        ${this.t("stats.colour", { colour: colour ?? "—" })}
+        ${this.t("paintCanvas.stats.colour", { colour: colour ?? "—" })}
         ${colour ? html`<span
                 class="swatch"
                 style=${styleMap({ background: colour })}

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

@@ -1,5 +1,6 @@
 import { ICON_CONTROLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import "../PcButtonGroup/index.js";
 import { css, html, unsafeCSS } from "lit";
 // src/ui/elements/PcThemePicker/index.ts
 /** The themes to pick from: light, dark, or following the device (auto) */
@@ -113,7 +114,7 @@ var PcThemePicker = class extends PcElement {
 	}
 	render() {
 		return html`<fieldset>
-      <legend>${this.t("theme.label")}</legend>
+      <legend>${this.t("paintCanvas.theme.label")}</legend>
       <pc-button-group joined>
         ${THEMES.map((theme) => html`<label class="icon-toggle" data-theme=${theme}>
               <input
@@ -124,7 +125,7 @@ var PcThemePicker = class extends PcElement {
                 @change=${() => this.pick(theme)}
               />
               <img src=${this.iconUrl(THEME_ICONS[theme])} alt="" />
-              <span>${this.t(`theme.${theme}`)}</span>
+              <span>${this.t(`paintCanvas.theme.${theme}`)}</span>
             </label>`)}
       </pc-button-group>
     </fieldset>`;

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

@@ -1,4 +1,5 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import "../PcButton/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcToast/index.ts
 /** How long a toast shows before dismissing itself, unless told otherwise (milliseconds) */
@@ -100,7 +101,7 @@ var PcToast = class extends PcElement {
                 >${this.action}</pc-button
               >` : nothing}
         <pc-button variant="dismiss" @click=${() => this.dismiss()}
-          >${this.t("common.dismiss")}</pc-button
+          >${this.t("paintCanvas.common.dismiss")}</pc-button
         >
       </div>
     </div>`;

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

@@ -155,14 +155,14 @@ var PcToolSettings = class extends PcElement {
 	renderFocusPen(app) {
 		return html`<label
       class="icon-toggle focus-pen"
-      title=${this.t("toolSettings.focusPenHint")}
+      title=${this.t("paintCanvas.toolSettings.focusPenHint")}
     >
       <input
         type="checkbox"
         .checked=${live(app.input.data.focusPen)}
         @change=${(e) => app.input.update({ focusPen: e.target.checked })}
       />
-      ${iconLabel(this.iconUrl("focusPen"), this.t("toolSettings.focusPen"))}
+      ${iconLabel(this.iconUrl("focusPen"), this.t("paintCanvas.toolSettings.focusPen"))}
     </label>`;
 	}
 	/** Render the brush or eraser settings */
@@ -170,16 +170,16 @@ var PcToolSettings = class extends PcElement {
 		const preset = settings.preset;
 		const pressure = PRESSURE_PARAMS.some((param) => preset[param]?.usePressure);
 		const tilt = TILT_PARAMS.some((param) => preset[param]?.useTilt);
-		const label = this.t(kind === "eraser" ? "tool.eraser" : "tool.brush");
+		const label = this.t(kind === "eraser" ? "paintCanvas.tool.eraser" : "paintCanvas.tool.brush");
 		const panel = kind === "eraser" ? Panel.Eraser : Panel.Brush;
 		return html`<div
       role="toolbar"
-      aria-label=${this.t("toolSettings.settings", { tool: label })}
+      aria-label=${this.t("paintCanvas.toolSettings.settings", { tool: label })}
     >
       <button
         type="button"
         class="preset"
-        title=${this.t("toolSettings.presets", { tool: label })}
+        title=${this.t("paintCanvas.toolSettings.presets", { tool: label })}
         aria-expanded=${app.panel === panel ? "true" : "false"}
         @click=${() => app.togglePanel(panel)}
       >
@@ -190,7 +190,7 @@ var PcToolSettings = class extends PcElement {
         ${preset.name ?? preset.id}
       </button>
       <label>
-        ${this.t("common.width")}
+        ${this.t("paintCanvas.common.width")}
         <input
           type="number"
           class="width"
@@ -205,7 +205,7 @@ var PcToolSettings = class extends PcElement {
       </label>
       <label
         class="icon-toggle"
-        title=${this.t("toolSettings.constrainProportions")}
+        title=${this.t("paintCanvas.toolSettings.constrainProportions")}
       >
         <input
           type="checkbox"
@@ -213,10 +213,10 @@ var PcToolSettings = class extends PcElement {
           .checked=${preset.constrainProportions ?? false}
           @change=${(e) => settings.update({ constrainProportions: e.target.checked })}
         />
-        ${iconLabel(this.iconUrl(preset.constrainProportions ? "linked" : "unlinked"), this.t("toolSettings.constrainProportions"))}
+        ${iconLabel(this.iconUrl(preset.constrainProportions ? "linked" : "unlinked"), this.t("paintCanvas.toolSettings.constrainProportions"))}
       </label>
       <label>
-        ${this.t("common.height")}
+        ${this.t("paintCanvas.common.height")}
         <input
           type="number"
           class="height"
@@ -229,26 +229,32 @@ var PcToolSettings = class extends PcElement {
 		}}
         />
       </label>
-      <label class="icon-toggle" title=${this.t("toolSettings.pressure")}>
+      <label
+        class="icon-toggle"
+        title=${this.t("paintCanvas.toolSettings.pressure")}
+      >
         <input
           type="checkbox"
           class="pressure"
           .checked=${pressure}
           @change=${(e) => settings.update(withSource(preset, PRESSURE_PARAMS, "usePressure", e.target.checked))}
         />
-        ${iconLabel(this.iconUrl("pressure"), this.t("toolSettings.pressure"))}
+        ${iconLabel(this.iconUrl("pressure"), this.t("paintCanvas.toolSettings.pressure"))}
       </label>
-      <label class="icon-toggle" title=${this.t("toolSettings.tilt")}>
+      <label
+        class="icon-toggle"
+        title=${this.t("paintCanvas.toolSettings.tilt")}
+      >
         <input
           type="checkbox"
           class="tilt"
           .checked=${tilt}
           @change=${(e) => settings.update(withSource(preset, TILT_PARAMS, "useTilt", e.target.checked))}
         />
-        ${iconLabel(this.iconUrl("tilt"), this.t("toolSettings.tilt"))}
+        ${iconLabel(this.iconUrl("tilt"), this.t("paintCanvas.toolSettings.tilt"))}
       </label>
       <label>
-        ${this.t("common.opacity")}
+        ${this.t("paintCanvas.common.opacity")}
         <input
           type="number"
           class="opacity"
@@ -267,7 +273,7 @@ var PcToolSettings = class extends PcElement {
         class="configure"
         @click=${() => this.emit("pc-configure-brush", kind)}
       >
-        ${this.t("toolSettings.configure")}
+        ${this.t("paintCanvas.toolSettings.configure")}
       </button>
       ${this.renderFocusPen(app)}
     </div>`;
@@ -276,14 +282,14 @@ var PcToolSettings = class extends PcElement {
 	renderMask(app) {
 		return html`<div
       role="toolbar"
-      aria-label=${this.t("toolSettings.maskSettings")}
+      aria-label=${this.t("paintCanvas.toolSettings.maskSettings")}
     >
       <button
         type="button"
         class="pill select-all"
         @click=${() => app.selection.selectAll()}
       >
-        ${this.t("toolSettings.selectAll")}
+        ${this.t("paintCanvas.toolSettings.selectAll")}
       </button>
       <button
         type="button"
@@ -291,7 +297,7 @@ var PcToolSettings = class extends PcElement {
         ?disabled=${!app.selection.active}
         @click=${() => app.selection.invert()}
       >
-        ${this.t("toolSettings.invertSelection")}
+        ${this.t("paintCanvas.toolSettings.invertSelection")}
       </button>
       <button
         type="button"
@@ -299,7 +305,7 @@ var PcToolSettings = class extends PcElement {
         ?disabled=${!app.selection.active}
         @click=${() => app.selection.clear()}
       >
-        ${this.t("toolSettings.deselect")}
+        ${this.t("paintCanvas.toolSettings.deselect")}
       </button>
       ${this.renderFocusPen(app)}
     </div>`;
@@ -347,12 +353,12 @@ var PcToolSettings = class extends PcElement {
 		const rotate = (by) => this.changeBox(app, (current) => ({ rotation: by(current.rotation) % 360 }));
 		return html`<div
       role="toolbar"
-      aria-label=${this.t("toolSettings.settings", { tool: this.t("tool.move") })}
+      aria-label=${this.t("paintCanvas.toolSettings.settings", { tool: this.t("paintCanvas.tool.move") })}
     >
-      ${side("width", this.t("common.width"))}
+      ${side("width", this.t("paintCanvas.common.width"))}
       <label
         class="icon-toggle"
-        title=${this.t("toolSettings.constrainProportions")}
+        title=${this.t("paintCanvas.toolSettings.constrainProportions")}
       >
         <input
           type="checkbox"
@@ -360,9 +366,9 @@ var PcToolSettings = class extends PcElement {
           .checked=${live(app.constrainProportions)}
           @change=${(e) => app.setConstrainProportions(e.target.checked)}
         />
-        ${iconLabel(this.iconUrl(app.constrainProportions ? "linked" : "unlinked"), this.t("toolSettings.constrainProportions"))}
+        ${iconLabel(this.iconUrl(app.constrainProportions ? "linked" : "unlinked"), this.t("paintCanvas.toolSettings.constrainProportions"))}
       </label>
-      ${side("height", this.t("common.height"))}
+      ${side("height", this.t("paintCanvas.common.height"))}
       <label>
         <input
           type="checkbox"
@@ -370,28 +376,28 @@ var PcToolSettings = class extends PcElement {
           .checked=${this.percent}
           @change=${(e) => this.percent = e.target.checked}
         />
-        ${this.t("toolSettings.percent")}
+        ${this.t("paintCanvas.toolSettings.percent")}
       </label>
       <button
         type="button"
         class="icon-button flip-horizontal"
-        title=${this.t("toolSettings.flipHorizontal")}
+        title=${this.t("paintCanvas.toolSettings.flipHorizontal")}
         ?disabled=${disabled}
         @click=${() => this.changeBox(app, (current) => ({ width: -current.width }))}
       >
-        ${iconLabel(this.iconUrl("flipHorizontal"), this.t("toolSettings.flipHorizontal"))}
+        ${iconLabel(this.iconUrl("flipHorizontal"), this.t("paintCanvas.toolSettings.flipHorizontal"))}
       </button>
       <button
         type="button"
         class="icon-button flip-vertical"
-        title=${this.t("toolSettings.flipVertical")}
+        title=${this.t("paintCanvas.toolSettings.flipVertical")}
         ?disabled=${disabled}
         @click=${() => this.changeBox(app, (current) => ({ height: -current.height }))}
       >
-        ${iconLabel(this.iconUrl("flipVertical"), this.t("toolSettings.flipVertical"))}
+        ${iconLabel(this.iconUrl("flipVertical"), this.t("paintCanvas.toolSettings.flipVertical"))}
       </button>
       <label>
-        ${this.t("toolSettings.angle")}
+        ${this.t("paintCanvas.toolSettings.angle")}
         <input
           type="number"
           class="angle"
@@ -408,20 +414,20 @@ var PcToolSettings = class extends PcElement {
       <button
         type="button"
         class="icon-button rotate-left"
-        title=${this.t("toolSettings.rotateLeft")}
+        title=${this.t("paintCanvas.toolSettings.rotateLeft")}
         ?disabled=${disabled}
         @click=${() => rotate((rotation) => rotation - 90)}
       >
-        ${iconLabel(this.iconUrl("rotate90Left"), this.t("toolSettings.rotateLeft"))}
+        ${iconLabel(this.iconUrl("rotate90Left"), this.t("paintCanvas.toolSettings.rotateLeft"))}
       </button>
       <button
         type="button"
         class="icon-button rotate-right"
-        title=${this.t("toolSettings.rotateRight")}
+        title=${this.t("paintCanvas.toolSettings.rotateRight")}
         ?disabled=${disabled}
         @click=${() => rotate((rotation) => rotation + 90)}
       >
-        ${iconLabel(this.iconUrl("rotate90Right"), this.t("toolSettings.rotateRight"))}
+        ${iconLabel(this.iconUrl("rotate90Right"), this.t("paintCanvas.toolSettings.rotateRight"))}
       </button>
       <button
         type="button"
@@ -429,7 +435,7 @@ var PcToolSettings = class extends PcElement {
         ?disabled=${disabled}
         @click=${() => app.cancelTransform()}
       >
-        ${this.t("toolSettings.reset")}
+        ${this.t("paintCanvas.toolSettings.reset")}
       </button>
       ${this.renderFocusPen(app)}
     </div>`;
@@ -443,13 +449,13 @@ var PcToolSettings = class extends PcElement {
 		};
 		return html`<div
       role="toolbar"
-      aria-label=${this.t("toolSettings.settings", { tool: this.t("tool.zoom") })}
+      aria-label=${this.t("paintCanvas.toolSettings.settings", { tool: this.t("paintCanvas.tool.zoom") })}
     >
       <button
         type="button"
         class="zoom-in"
-        title=${this.t("toolSettings.zoomIn")}
-        aria-label=${this.t("toolSettings.zoomIn")}
+        title=${this.t("paintCanvas.toolSettings.zoomIn")}
+        aria-label=${this.t("paintCanvas.toolSettings.zoomIn")}
         ?disabled=${view.zoom >= MAX_ZOOM}
         @click=${() => view.zoomIn(centre)}
       >
@@ -458,15 +464,15 @@ var PcToolSettings = class extends PcElement {
       <button
         type="button"
         class="zoom-out"
-        title=${this.t("toolSettings.zoomOut")}
-        aria-label=${this.t("toolSettings.zoomOut")}
+        title=${this.t("paintCanvas.toolSettings.zoomOut")}
+        aria-label=${this.t("paintCanvas.toolSettings.zoomOut")}
         ?disabled=${view.zoom <= MIN_ZOOM}
         @click=${() => view.zoomOut(centre)}
       >
         <img src=${this.iconUrl("zoomOut")} alt="" />
       </button>
       <label>
-        ${this.t("tool.zoom")}
+        ${this.t("paintCanvas.tool.zoom")}
         <input
           type="range"
           class="zoom"
@@ -483,7 +489,7 @@ var PcToolSettings = class extends PcElement {
         class="pill reset"
         @click=${() => view.zoomAt(centre, 1)}
       >
-        ${this.t("toolSettings.reset")}
+        ${this.t("paintCanvas.toolSettings.reset")}
       </button>
       ${this.renderFocusPen(app)}
     </div>`;
@@ -492,16 +498,16 @@ var PcToolSettings = class extends PcElement {
 	renderColourSample(app) {
 		const modes = [[
 			"point",
-			this.t("toolSettings.pointSample"),
+			this.t("paintCanvas.toolSettings.pointSample"),
 			svg`<circle cx="10" cy="10" r="6" /><circle cx="10" cy="10" r="1.5" fill="currentColor" /><path d="M10 1 V5 M10 15 V19 M1 10 H5 M15 10 H19" />`
 		], [
 			"area",
-			this.t("toolSettings.areaSample"),
+			this.t("paintCanvas.toolSettings.areaSample"),
 			svg`<defs><linearGradient id="area-gradient"><stop offset="0" stop-color="currentColor" stop-opacity="0" /><stop offset="1" stop-color="currentColor" /></linearGradient></defs><rect x="2" y="4" width="16" height="12" fill="url(#area-gradient)" />`
 		]];
 		return html`<div
       role="toolbar"
-      aria-label=${this.t("toolSettings.settings", { tool: this.t("tool.colourSample") })}
+      aria-label=${this.t("paintCanvas.toolSettings.settings", { tool: this.t("paintCanvas.tool.colourSample") })}
     >
       ${modes.map(([mode, label, icon]) => html`<button
             type="button"