@camstack/ui-library 1.2.290 → 1.2.292

package/dist/{MaskShapeCanvas-DI4BY7W2.js → MaskShapeCanvas-C9cJlxvG.js}

@@ -1,3 +1,4 @@
+import { useUiText } from "./index.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Arrow, Circle, Group, Layer, Line, Rect, Stage, Text } from "react-konva";
@@ -171,6 +172,7 @@ function isPointShape(shape) {
 	return shape.kind === "polygon" || shape.kind === "line";
 }
 function MaskShapeCanvasImpl({ items, selectedId, onSelect, onShapeChange, onDrawComplete, drawingKind, supportedShapes, transparent = false, backdrop, polygonVertices, grid }) {
+	const t = useUiText();
 	const containerRef = useRef(null);
 	const [size, setSize] = useState({
 		w: 800,
@@ -508,7 +510,7 @@ function MaskShapeCanvasImpl({ items, selectedId, onSelect, onShapeChange, onDra
 			}),
 			isDrawing ? /* @__PURE__ */ jsx("div", {
 				className: "px-3 py-1.5 bg-zinc-800/80 text-[11px] text-zinc-400 border-t border-zinc-700",
-				children: drawingKind === "line" ? "Click to set the start point, click again to complete the line" : drawingKind === "rect" ? "Click to drop a rectangle, then drag the corner to resize" : drawingKind === "grid" ? "Click to add the grid, then paint cells" : drawPoints.length < FLOOR_POLYGON_VERTICES ? "Click to add points (min 3). Double-click or click the first point to close." : "Continue adding points. Double-click or click the first point to close."
+				children: drawingKind === "line" ? t("uiLibrary.maskShapeCanvas.hintLine", "Click to set the start point, click again to complete the line") : drawingKind === "rect" ? t("uiLibrary.maskShapeCanvas.hintRect", "Click to drop a rectangle, then drag the corner to resize") : drawingKind === "grid" ? t("uiLibrary.maskShapeCanvas.hintGrid", "Click to add the grid, then paint cells") : drawPoints.length < FLOOR_POLYGON_VERTICES ? t("uiLibrary.maskShapeCanvas.hintPoints", "Click to add points (min 3). Double-click or click the first point to close.") : t("uiLibrary.maskShapeCanvas.hintMore", "Continue adding points. Double-click or click the first point to close.")
 			}) : null
 		]
 	});

package/dist/{MaskShapeCanvas-BByN3jvt.cjs → MaskShapeCanvas-NCNwu9_5.cjs}

@@ -1,3 +1,4 @@
+const require_index = require("./index.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_konva = require("react-konva");
@@ -171,6 +172,7 @@ function isPointShape(shape) {
 	return shape.kind === "polygon" || shape.kind === "line";
 }
 function MaskShapeCanvasImpl({ items, selectedId, onSelect, onShapeChange, onDrawComplete, drawingKind, supportedShapes, transparent = false, backdrop, polygonVertices, grid }) {
+	const t = require_index.useUiText();
 	const containerRef = (0, react.useRef)(null);
 	const [size, setSize] = (0, react.useState)({
 		w: 800,
@@ -508,7 +510,7 @@ function MaskShapeCanvasImpl({ items, selectedId, onSelect, onShapeChange, onDra
 			}),
 			isDrawing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "px-3 py-1.5 bg-zinc-800/80 text-[11px] text-zinc-400 border-t border-zinc-700",
-				children: drawingKind === "line" ? "Click to set the start point, click again to complete the line" : drawingKind === "rect" ? "Click to drop a rectangle, then drag the corner to resize" : drawingKind === "grid" ? "Click to add the grid, then paint cells" : drawPoints.length < FLOOR_POLYGON_VERTICES ? "Click to add points (min 3). Double-click or click the first point to close." : "Continue adding points. Double-click or click the first point to close."
+				children: drawingKind === "line" ? t("uiLibrary.maskShapeCanvas.hintLine", "Click to set the start point, click again to complete the line") : drawingKind === "rect" ? t("uiLibrary.maskShapeCanvas.hintRect", "Click to drop a rectangle, then drag the corner to resize") : drawingKind === "grid" ? t("uiLibrary.maskShapeCanvas.hintGrid", "Click to add the grid, then paint cells") : drawPoints.length < FLOOR_POLYGON_VERTICES ? t("uiLibrary.maskShapeCanvas.hintPoints", "Click to add points (min 3). Double-click or click the first point to close.") : t("uiLibrary.maskShapeCanvas.hintMore", "Continue adding points. Double-click or click the first point to close.")
 			}) : null
 		]
 	});

package/dist/{MotionZonesSettings-CiYjd-yl.js → MotionZonesSettings-Bv8XzCa3.js}

@@ -1,5 +1,5 @@
-import { TEXT_HINT, WidgetPanel, _n as Grid2x2, isAbsentProvider, useDeviceProxy, usePlayerOverlayLayer, useSystem } from "./index.js";
-import { MaskShapeCanvas } from "./MaskShapeCanvas-DI4BY7W2.js";
+import { TEXT_HINT, UiTrans, WidgetPanel, _n as Grid2x2, isAbsentProvider, useDeviceProxy, usePlayerOverlayLayer, useSystem, useUiText } from "./index.js";
+import { MaskShapeCanvas } from "./MaskShapeCanvas-C9cJlxvG.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/composites/cap-settings/MotionZonesSettings.tsx
@@ -119,6 +119,7 @@ function expandCells(uiCells, cw, ch, m) {
 	return out;
 }
 function MotionZonesSettings({ deviceId }) {
+	const t = useUiText();
 	const dev = useDeviceProxy(useSystem().trpcClient, deviceId);
 	const [options, setOptions] = useState(null);
 	const [unsupported, setUnsupported] = useState(false);
@@ -292,41 +293,31 @@ function MotionZonesSettings({ deviceId }) {
 	const ready = !unsupported && options !== null && uiCells !== null;
 	if (!dev) return null;
 	return /* @__PURE__ */ jsx(WidgetPanel, {
-		title: "Motion Zones",
+		title: t("uiLibrary.motionZones.title", "Motion Zones"),
 		icon: /* @__PURE__ */ jsx(Grid2x2, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-3",
 			children: unsupported ? /* @__PURE__ */ jsx("p", {
 				className: `${TEXT_HINT} leading-relaxed`,
-				children: "This camera doesn't expose an on-board motion zones grid."
+				children: t("uiLibrary.motionZones.unsupported", "This camera doesn't expose an on-board motion zones grid.")
 			}) : !ready ? /* @__PURE__ */ jsx("p", {
 				className: `${TEXT_HINT} leading-relaxed`,
-				children: "Loading the camera's grid…"
-			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("p", {
+				children: t("uiLibrary.motionZones.loading", "Loading the camera's grid…")
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
 				className: `${TEXT_HINT} leading-relaxed`,
-				children: [
-					"Toggle ",
-					/* @__PURE__ */ jsx("strong", {
-						className: "text-foreground",
-						children: "Edit grid"
-					}),
-					" to paint the region directly on the live frame, then ",
-					/* @__PURE__ */ jsx("strong", {
-						className: "text-foreground",
-						children: "Save"
-					}),
-					" to push the mask to the camera. Pick a bigger",
-					" ",
-					/* @__PURE__ */ jsx("strong", {
-						className: "text-foreground",
-						children: "Cell size"
-					}),
-					" for quicker, broad-stroke painting — it's resampled to the camera's native ",
-					options.grid.width,
-					"×",
-					options.grid.height,
-					" grid on save (×1 is the finest)."
-				]
+				children: /* @__PURE__ */ jsx(UiTrans, {
+					uiKey: "uiLibrary.motionZones.intro",
+					fallback: "Toggle <0>Edit grid</0> to paint the region directly on the live frame, then <1>Save</1> to push the mask to the camera. Pick a bigger <2>Cell size</2> for quicker, broad-stroke painting — it's resampled to the camera's native {{width}}×{{height}} grid on save (×1 is the finest).",
+					components: [
+						/* @__PURE__ */ jsx("strong", { className: "text-foreground" }, "e"),
+						/* @__PURE__ */ jsx("strong", { className: "text-foreground" }, "s"),
+						/* @__PURE__ */ jsx("strong", { className: "text-foreground" }, "c")
+					],
+					values: {
+						width: options.grid.width,
+						height: options.grid.height
+					}
+				})
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 flex-wrap",
 				children: [
@@ -336,58 +327,64 @@ function MotionZonesSettings({ deviceId }) {
 						disabled: saving,
 						"aria-pressed": editing,
 						className: editing ? BTN_PRIMARY : BTN_NEUTRAL,
-						children: editing ? "Done editing" : "Edit grid"
+						children: editing ? t("uiLibrary.motionZones.doneEditing", "Done editing") : t("uiLibrary.motionZones.editGrid", "Edit grid")
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => setAll(true),
 						disabled: saving,
 						className: BTN_NEUTRAL,
-						children: "All on"
+						children: t("uiLibrary.motionZones.allOn", "All on")
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => setAll(false),
 						disabled: saving,
 						className: BTN_NEUTRAL,
-						children: "All off"
+						children: t("uiLibrary.motionZones.allOff", "All off")
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: invert,
 						disabled: saving,
 						className: BTN_NEUTRAL,
-						children: "Invert"
+						children: t("uiLibrary.motionZones.invert", "Invert")
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-1 ml-1",
 						role: "group",
-						"aria-label": "Cell size",
+						"aria-label": t("uiLibrary.motionZones.cellSize", "Cell size"),
 						children: [/* @__PURE__ */ jsx("span", {
 							className: `${TEXT_HINT} mr-0.5`,
-							children: "Cell size"
+							children: t("uiLibrary.motionZones.cellSize", "Cell size")
 						}), GRID_MULTIPLIERS.map((m) => /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							onClick: () => changeMultiplier(m),
 							disabled: saving,
 							"aria-pressed": multiplier === m,
-							title: m === 1 ? `Camera grid ${cw}×${ch} (finest)` : `${coarseDim(cw, m)}×${coarseDim(ch, m)} painting grid · cells ×${m} bigger`,
+							title: m === 1 ? t("uiLibrary.motionZones.cameraGrid", "Camera grid {{width}}×{{height}} (finest)", {
+								width: cw,
+								height: ch
+							}) : t("uiLibrary.motionZones.paintingGrid", "{{width}}×{{height}} painting grid · cells ×{{factor}} bigger", {
+								width: coarseDim(cw, m),
+								height: coarseDim(ch, m),
+								factor: m
+							}),
 							className: multiplier === m ? BTN_PRIMARY : BTN_NEUTRAL,
 							children: ["×", m]
 						}, m))]
 					}),
 					/* @__PURE__ */ jsxs("span", {
 						className: `${TEXT_HINT} ml-1 tabular-nums`,
-						children: [
-							activeCount,
-							" / ",
-							cameraTotal,
-							" cells · ",
-							options.grid.width,
-							"×",
-							options.grid.height,
-							multiplier !== 1 ? ` · paint ${uiWidth}×${uiHeight}` : ""
-						]
+						children: [t("uiLibrary.motionZones.cells", "{{active}} / {{total}} cells · {{width}}×{{height}}", {
+							active: activeCount,
+							total: cameraTotal,
+							width: options.grid.width,
+							height: options.grid.height
+						}), multiplier !== 1 ? t("uiLibrary.motionZones.paintSuffix", " · paint {{width}}×{{height}}", {
+							width: uiWidth,
+							height: uiHeight
+						}) : ""]
 					}),
 					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
 					/* @__PURE__ */ jsx("button", {
@@ -395,14 +392,14 @@ function MotionZonesSettings({ deviceId }) {
 						onClick: revert,
 						disabled: saving || !dirty,
 						className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
-						children: "Revert"
+						children: t("uiLibrary.motionZones.revert", "Revert")
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => void save(),
 						disabled: saving || !dirty,
 						className: BTN_PRIMARY,
-						children: saving ? "Saving…" : "Save"
+						children: saving ? t("uiLibrary.motionZones.saving", "Saving…") : t("uiLibrary.motionZones.save", "Save")
 					})
 				]
 			})] })

package/dist/{MotionZonesSettings-BK9R9NIr.cjs → MotionZonesSettings-CPRH536-.cjs}

@@ -1,5 +1,5 @@
 const require_index = require("./index.cjs");
-const require_MaskShapeCanvas = require("./MaskShapeCanvas-BByN3jvt.cjs");
+const require_MaskShapeCanvas = require("./MaskShapeCanvas-NCNwu9_5.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/composites/cap-settings/MotionZonesSettings.tsx
@@ -119,6 +119,7 @@ function expandCells(uiCells, cw, ch, m) {
 	return out;
 }
 function MotionZonesSettings({ deviceId }) {
+	const t = require_index.useUiText();
 	const dev = require_index.useDeviceProxy$1(require_index.useSystem$1().trpcClient, deviceId);
 	const [options, setOptions] = (0, react.useState)(null);
 	const [unsupported, setUnsupported] = (0, react.useState)(false);
@@ -292,41 +293,31 @@ function MotionZonesSettings({ deviceId }) {
 	const ready = !unsupported && options !== null && uiCells !== null;
 	if (!dev) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.WidgetPanel, {
-		title: "Motion Zones",
+		title: t("uiLibrary.motionZones.title", "Motion Zones"),
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Grid2x2, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex flex-col gap-3",
 			children: unsupported ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: `${require_index.TEXT_HINT} leading-relaxed`,
-				children: "This camera doesn't expose an on-board motion zones grid."
+				children: t("uiLibrary.motionZones.unsupported", "This camera doesn't expose an on-board motion zones grid.")
 			}) : !ready ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: `${require_index.TEXT_HINT} leading-relaxed`,
-				children: "Loading the camera's grid…"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				children: t("uiLibrary.motionZones.loading", "Loading the camera's grid…")
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: `${require_index.TEXT_HINT} leading-relaxed`,
-				children: [
-					"Toggle ",
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-						className: "text-foreground",
-						children: "Edit grid"
-					}),
-					" to paint the region directly on the live frame, then ",
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-						className: "text-foreground",
-						children: "Save"
-					}),
-					" to push the mask to the camera. Pick a bigger",
-					" ",
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-						className: "text-foreground",
-						children: "Cell size"
-					}),
-					" for quicker, broad-stroke painting — it's resampled to the camera's native ",
-					options.grid.width,
-					"×",
-					options.grid.height,
-					" grid on save (×1 is the finest)."
-				]
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.UiTrans, {
+					uiKey: "uiLibrary.motionZones.intro",
+					fallback: "Toggle <0>Edit grid</0> to paint the region directly on the live frame, then <1>Save</1> to push the mask to the camera. Pick a bigger <2>Cell size</2> for quicker, broad-stroke painting — it's resampled to the camera's native {{width}}×{{height}} grid on save (×1 is the finest).",
+					components: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { className: "text-foreground" }, "e"),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { className: "text-foreground" }, "s"),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { className: "text-foreground" }, "c")
+					],
+					values: {
+						width: options.grid.width,
+						height: options.grid.height
+					}
+				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2 flex-wrap",
 				children: [
@@ -336,58 +327,64 @@ function MotionZonesSettings({ deviceId }) {
 						disabled: saving,
 						"aria-pressed": editing,
 						className: editing ? BTN_PRIMARY : BTN_NEUTRAL,
-						children: editing ? "Done editing" : "Edit grid"
+						children: editing ? t("uiLibrary.motionZones.doneEditing", "Done editing") : t("uiLibrary.motionZones.editGrid", "Edit grid")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: () => setAll(true),
 						disabled: saving,
 						className: BTN_NEUTRAL,
-						children: "All on"
+						children: t("uiLibrary.motionZones.allOn", "All on")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: () => setAll(false),
 						disabled: saving,
 						className: BTN_NEUTRAL,
-						children: "All off"
+						children: t("uiLibrary.motionZones.allOff", "All off")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: invert,
 						disabled: saving,
 						className: BTN_NEUTRAL,
-						children: "Invert"
+						children: t("uiLibrary.motionZones.invert", "Invert")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center gap-1 ml-1",
 						role: "group",
-						"aria-label": "Cell size",
+						"aria-label": t("uiLibrary.motionZones.cellSize", "Cell size"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: `${require_index.TEXT_HINT} mr-0.5`,
-							children: "Cell size"
+							children: t("uiLibrary.motionZones.cellSize", "Cell size")
 						}), GRID_MULTIPLIERS.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
 							onClick: () => changeMultiplier(m),
 							disabled: saving,
 							"aria-pressed": multiplier === m,
-							title: m === 1 ? `Camera grid ${cw}×${ch} (finest)` : `${coarseDim(cw, m)}×${coarseDim(ch, m)} painting grid · cells ×${m} bigger`,
+							title: m === 1 ? t("uiLibrary.motionZones.cameraGrid", "Camera grid {{width}}×{{height}} (finest)", {
+								width: cw,
+								height: ch
+							}) : t("uiLibrary.motionZones.paintingGrid", "{{width}}×{{height}} painting grid · cells ×{{factor}} bigger", {
+								width: coarseDim(cw, m),
+								height: coarseDim(ch, m),
+								factor: m
+							}),
 							className: multiplier === m ? BTN_PRIMARY : BTN_NEUTRAL,
 							children: ["×", m]
 						}, m))]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: `${require_index.TEXT_HINT} ml-1 tabular-nums`,
-						children: [
-							activeCount,
-							" / ",
-							cameraTotal,
-							" cells · ",
-							options.grid.width,
-							"×",
-							options.grid.height,
-							multiplier !== 1 ? ` · paint ${uiWidth}×${uiHeight}` : ""
-						]
+						children: [t("uiLibrary.motionZones.cells", "{{active}} / {{total}} cells · {{width}}×{{height}}", {
+							active: activeCount,
+							total: cameraTotal,
+							width: options.grid.width,
+							height: options.grid.height
+						}), multiplier !== 1 ? t("uiLibrary.motionZones.paintSuffix", " · paint {{width}}×{{height}}", {
+							width: uiWidth,
+							height: uiHeight
+						}) : ""]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "flex-1" }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -395,14 +392,14 @@ function MotionZonesSettings({ deviceId }) {
 						onClick: revert,
 						disabled: saving || !dirty,
 						className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
-						children: "Revert"
+						children: t("uiLibrary.motionZones.revert", "Revert")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: () => void save(),
 						disabled: saving || !dirty,
 						className: BTN_PRIMARY,
-						children: saving ? "Saving…" : "Save"
+						children: saving ? t("uiLibrary.motionZones.saving", "Saving…") : t("uiLibrary.motionZones.save", "Save")
 					})
 				]
 			})] })

package/dist/{PrivacyMaskSettings-DuXUCUev.cjs → PrivacyMaskSettings-BUWvVF_n.cjs}

@@ -1,6 +1,6 @@
 const require_mic_off = require("./mic-off-4nCMfrMI.cjs");
 const require_index = require("./index.cjs");
-const require_MaskShapeCanvas = require("./MaskShapeCanvas-BByN3jvt.cjs");
+const require_MaskShapeCanvas = require("./MaskShapeCanvas-NCNwu9_5.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/composites/cap-settings/privacy-mask-audio.ts
@@ -53,6 +53,7 @@ function regionsEqual(a, b) {
 	return true;
 }
 function PrivacyMaskSettings({ deviceId }) {
+	const t = require_index.useUiText();
 	const dev = require_index.useDeviceProxy$1(require_index.useSystem$1().trpcClient, deviceId);
 	const [options, setOptions] = (0, react.useState)(null);
 	const [unsupported, setUnsupported] = (0, react.useState)(false);
@@ -144,8 +145,8 @@ function PrivacyMaskSettings({ deviceId }) {
 		id: r.id,
 		shape: r.shape,
 		enabled: r.enabled,
-		label: `Zone ${String(r.id)}`
-	})) : [], [draft]);
+		label: t("uiLibrary.privacyMaskSettings.zoneN", "Zone {{id}}", { id: r.id })
+	})) : [], [draft, t]);
 	const onShapeChange = (0, react.useCallback)((id, shape) => {
 		const next = toPrivacyMaskShape(shape);
 		if (!next) return;
@@ -290,35 +291,27 @@ function PrivacyMaskSettings({ deviceId }) {
 	const ready = !unsupported && !noShapes && !unreadable && options !== null && draft !== null;
 	if (!dev) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.WidgetPanel, {
-		title: "Privacy Mask",
+		title: t("uiLibrary.privacyMaskSettings.title", "Privacy Mask"),
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.EyeOff, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col gap-3",
 			children: [unsupported || noShapes ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: `${require_index.TEXT_HINT} leading-relaxed`,
-				children: "This camera doesn't support an on-board privacy mask."
+				children: t("uiLibrary.privacyMaskSettings.unsupported", "This camera doesn't support an on-board privacy mask.")
 			}) : unreadable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: `${require_index.TEXT_HINT} leading-relaxed`,
-				children: "This camera hasn't answered, so what it currently masks is unknown — the editor stays closed rather than showing an empty frame you could save over. A battery camera answers once it wakes; otherwise check that it is reachable."
+				children: t("uiLibrary.privacyMaskSettings.unreadable", "This camera hasn't answered, so what it currently masks is unknown — the editor stays closed rather than showing an empty frame you could save over. A battery camera answers once it wakes; otherwise check that it is reachable.")
 			}) : !ready ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: `${require_index.TEXT_HINT} leading-relaxed`,
-				children: "Loading the camera's privacy mask…"
+				children: t("uiLibrary.privacyMaskSettings.loading", "Loading the camera's privacy mask…")
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: `${require_index.TEXT_HINT} leading-relaxed`,
-					children: [
-						"Toggle ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-							className: "text-foreground",
-							children: "Edit mask"
-						}),
-						" to draw blanked-out zones on the live frame, then ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-							className: "text-foreground",
-							children: "Save"
-						}),
-						" to push them to the camera. Drag a rectangle to move, its corner to resize; drag polygon vertices, click an edge midpoint to add one, or right-click a vertex to remove it."
-					]
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.UiTrans, {
+						uiKey: "uiLibrary.privacyMaskSettings.help",
+						fallback: "Toggle <0>Edit mask</0> to draw blanked-out zones on the live frame, then <1>Save</1> to push them to the camera. Drag a rectangle to move, its corner to resize; drag polygon vertices, click an edge midpoint to add one, or right-click a vertex to remove it.",
+						components: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { className: "text-foreground" }, "edit"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { className: "text-foreground" }, "save")]
+					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2 flex-wrap",
@@ -329,7 +322,7 @@ function PrivacyMaskSettings({ deviceId }) {
 							disabled: saving,
 							"aria-pressed": editing,
 							className: editing ? BTN_PRIMARY : BTN_NEUTRAL,
-							children: editing ? "Done editing" : "Edit mask"
+							children: editing ? t("uiLibrary.privacyMaskSettings.doneEditing", "Done editing") : t("uiLibrary.privacyMaskSettings.editMask", "Edit mask")
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
@@ -337,7 +330,7 @@ function PrivacyMaskSettings({ deviceId }) {
 							disabled: saving,
 							"aria-pressed": draft.enabled,
 							className: draft.enabled ? BTN_PRIMARY : BTN_NEUTRAL,
-							children: draft.enabled ? "Mask on" : "Mask off"
+							children: draft.enabled ? t("uiLibrary.privacyMaskSettings.maskOn", "Mask on") : t("uiLibrary.privacyMaskSettings.maskOff", "Mask off")
 						}),
 						supportsRect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
@@ -345,8 +338,8 @@ function PrivacyMaskSettings({ deviceId }) {
 							disabled: saving || atCapacity,
 							"aria-pressed": drawingKind === "rect",
 							className: drawingKind === "rect" ? BTN_PRIMARY : BTN_NEUTRAL,
-							title: atCapacity ? "Maximum zones reached" : "Add a rectangle zone",
-							children: "+ Rect"
+							title: atCapacity ? t("uiLibrary.privacyMaskSettings.maxZones", "Maximum zones reached") : t("uiLibrary.privacyMaskSettings.addRect", "Add a rectangle zone"),
+							children: t("uiLibrary.privacyMaskSettings.rectButton", "+ Rect")
 						}),
 						supportsPolygon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
@@ -354,17 +347,15 @@ function PrivacyMaskSettings({ deviceId }) {
 							disabled: saving || atCapacity,
 							"aria-pressed": drawingKind === "polygon",
 							className: drawingKind === "polygon" ? BTN_PRIMARY : BTN_NEUTRAL,
-							title: atCapacity ? "Maximum zones reached" : "Add a polygon zone",
-							children: "+ Polygon"
+							title: atCapacity ? t("uiLibrary.privacyMaskSettings.maxZones", "Maximum zones reached") : t("uiLibrary.privacyMaskSettings.addPolygon", "Add a polygon zone"),
+							children: t("uiLibrary.privacyMaskSettings.polygonButton", "+ Polygon")
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: `${require_index.TEXT_HINT} ml-1 tabular-nums`,
-							children: [
-								activeCount,
-								" / ",
-								maxRegions,
-								" zones"
-							]
+							children: t("uiLibrary.privacyMaskSettings.zoneCount", "{{active}} / {{max}} zones", {
+								active: activeCount,
+								max: maxRegions
+							})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "flex-1" }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -372,14 +363,14 @@ function PrivacyMaskSettings({ deviceId }) {
 							onClick: revert,
 							disabled: saving || !dirty,
 							className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
-							children: "Revert"
+							children: t("uiLibrary.privacyMaskSettings.revert", "Revert")
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							onClick: () => void save(),
 							disabled: saving || !dirty,
 							className: BTN_PRIMARY,
-							children: saving ? "Saving…" : "Save"
+							children: saving ? t("uiLibrary.privacyMaskSettings.saving", "Saving…") : t("uiLibrary.privacyMaskSettings.save", "Save")
 						})
 					]
 				}),
@@ -397,7 +388,7 @@ function PrivacyMaskSettings({ deviceId }) {
 								className: "flex flex-1 items-center gap-2 text-left text-[11px] font-medium text-foreground-subtle hover:text-foreground disabled:opacity-40 transition-colors",
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShapeIcon, { className: "h-3.5 w-3.5 shrink-0" }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["Zone ", r.id] }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("uiLibrary.privacyMaskSettings.zoneN", "Zone {{id}}", { id: r.id }) }),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "text-foreground-faint capitalize",
 										children: r.shape.kind
@@ -407,8 +398,8 @@ function PrivacyMaskSettings({ deviceId }) {
 								type: "button",
 								onClick: () => deleteRegion(r.id),
 								disabled: saving,
-								"aria-label": `Delete zone ${String(r.id)}`,
-								title: "Delete zone",
+								"aria-label": t("uiLibrary.privacyMaskSettings.deleteZoneN", "Delete zone {{id}}", { id: r.id }),
+								title: t("uiLibrary.privacyMaskSettings.deleteZone", "Delete zone"),
 								className: "inline-flex h-6 w-6 items-center justify-center rounded border border-border bg-surface text-foreground-subtle hover:border-red-400/40 hover:bg-red-500/10 hover:text-red-400 disabled:opacity-40 transition-colors",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Trash2, { className: "h-3.5 w-3.5" })
 							})]
@@ -424,15 +415,15 @@ function PrivacyMaskSettings({ deviceId }) {
 					"aria-checked": microphone.on === true,
 					disabled: !microphone.available || pendingAudio !== null,
 					onClick: () => void toggleMicrophone(),
-					title: microphone.on === null ? "Microphone — state unknown; the camera did not answer." : microphone.on ? `The camera is capturing sound. Turning it off: ${microphone.costWhenOff}` : `The camera is silent. ${microphone.costWhenOff}`,
+					title: microphone.on === null ? t("uiLibrary.privacyMaskSettings.micTitleUnknown", "Microphone — state unknown; the camera did not answer.") : microphone.on ? t("uiLibrary.privacyMaskSettings.micTitleOn", "The camera is capturing sound. Turning it off: {{cost}}", { cost: microphone.costWhenOff }) : t("uiLibrary.privacyMaskSettings.micTitleOff", "The camera is silent. {{cost}}", { cost: microphone.costWhenOff }),
 					className: microphone.on === false || microphone.on === null ? BTN_NEUTRAL : BTN_PRIMARY,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "inline-flex items-center gap-1.5",
-						children: [microphone.on === false ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_mic_off.MicOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Mic, { className: "h-3.5 w-3.5" }), microphone.on === null ? "Microphone unknown" : microphone.on ? "Microphone on" : "Microphone off"]
+						children: [microphone.on === false ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_mic_off.MicOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Mic, { className: "h-3.5 w-3.5" }), microphone.on === null ? t("uiLibrary.privacyMaskSettings.micUnknown", "Microphone unknown") : microphone.on ? t("uiLibrary.privacyMaskSettings.micOn", "Microphone on") : t("uiLibrary.privacyMaskSettings.micOff", "Microphone off")]
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: `text-[10px] text-foreground-subtle flex-1 leading-relaxed`,
-					children: audioFailure !== null ? `Write failed: ${audioFailure}` : microphone.on === null ? "The camera did not report its microphone, so this state is unknown." : microphone.costWhenOff
+					children: audioFailure !== null ? t("uiLibrary.privacyMaskSettings.writeFailed", "Write failed: {{reason}}", { reason: audioFailure }) : microphone.on === null ? t("uiLibrary.privacyMaskSettings.micNotReported", "The camera did not report its microphone, so this state is unknown.") : microphone.costWhenOff
 				})]
 			})]
 		})