@bud.sh/app 0.2.0 → 0.4.0

package/dist/server/assets/{branch-previews-C_TVt_HQ.js → branch-previews-ClkoJ0lM.js}

@@ -7510,7 +7510,7 @@ var logWithLevel$1 = (level) => (...message) => {
 		return void_$2;
 	});
 };
-var colors = {
+var colors$1 = {
 	bold: "1",
 	red: "31",
 	green: "32",
@@ -7522,7 +7522,7 @@ var colors = {
 	black: "30",
 	bgBrightRed: "101"
 };
-colors.gray, colors.blue, colors.green, colors.yellow, colors.red, colors.bgBrightRed, colors.black;
+colors$1.gray, colors$1.blue, colors$1.green, colors$1.yellow, colors$1.red, colors$1.bgBrightRed, colors$1.black;
 var defaultDateFormat = (date) => `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}.${date.getMilliseconds().toString().padStart(3, "0")}`;
 /** @internal */
 var defaultLogger = /*#__PURE__*/ loggerMake(({ cause, date, fiber, logLevel, message }) => {
@@ -28628,6 +28628,113 @@ var BudLogoSchema = createSchema((value, context) => {
 	return fail(logoMessage, context.path);
 });
 //#endregion
+//#region ../project/src/lib/theme.ts
+/**
+* Bud's colors and shadows a theme may set, as `--bud-<name>` in its styles. Everything else
+* Bud derives from them.
+*/
+var THEME_TOKENS = Object.freeze([
+	"background",
+	"shell",
+	"main",
+	"canvas",
+	"panel",
+	"board",
+	"editor",
+	"editor-tabs",
+	"foreground",
+	"muted",
+	"primary",
+	"primary-hover",
+	"primary-foreground",
+	"border",
+	"tab-divider",
+	"hover",
+	"selected",
+	"control",
+	"control-active",
+	"control-selected",
+	"card",
+	"menu",
+	"menu-hover",
+	"card-frame",
+	"card-surface",
+	"card-border",
+	"card-frame-border",
+	"card-badge",
+	"overlay-shadow",
+	"tooltip",
+	"board-control",
+	"board-control-hover",
+	"board-card",
+	"control-elevation",
+	"board-elevation",
+	"board-card-elevation",
+	"card-elevation",
+	"board-card-lift",
+	"frame-control",
+	"modal-elevation",
+	"segment-elevation",
+	"control-open-elevation",
+	"board-segment",
+	"scrollbar",
+	"focus",
+	"scrollbar-hover",
+	"tooltip-border",
+	"tooltip-shadow"
+]);
+var themeMessage = `theme must be { light, dark }, each mapping Bud's tokens (${THEME_TOKENS.slice(0, 3).join(", ")}, …) to CSS colors or shadows.`;
+function cssValue(value) {
+	if (typeof value !== "string") return null;
+	let trimmed = value.trim();
+	if (!trimmed || trimmed.length > 300) return null;
+	if (!/^[#a-zA-Z0-9(),.%\s/+-]+$/.test(trimmed) || /url\s*\(/i.test(trimmed)) return null;
+	return trimmed;
+}
+function colors(value) {
+	if (value === void 0) return {};
+	if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+	let result = {};
+	for (let [name, raw] of Object.entries(value)) {
+		let checked = cssValue(raw);
+		if (!THEME_TOKENS.includes(name) || checked === null) return null;
+		result[name] = checked;
+	}
+	return Object.freeze(result);
+}
+/** A theme in its one resolved form; Bud's own colors when absent. */
+var BudThemeSchema = createSchema((value, context) => {
+	if (value === void 0) return { value: {
+		light: {},
+		dark: {}
+	} };
+	if (!value || typeof value !== "object" || Array.isArray(value)) return fail(themeMessage, context.path);
+	let { light, dark, ...rest } = value;
+	let resolved = {
+		light: colors(light),
+		dark: colors(dark)
+	};
+	if (Object.keys(rest).length || !resolved.light || !resolved.dark) return fail(themeMessage, context.path);
+	return { value: {
+		light: resolved.light,
+		dark: resolved.dark
+	} };
+});
+/**
+* The theme as styles that follow Bud's own, so its tokens win in each color scheme.
+* @param theme - The resolved theme.
+* @returns A `<style>` element, or an empty string for Bud's own colors.
+*/
+function themeStyle(theme) {
+	let block = (selector, values) => {
+		let entries = Object.entries(values);
+		if (!entries.length) return "";
+		return `${selector}{${entries.map(([name, value]) => `--bud-${name}:${value};`).join("")}}`;
+	};
+	let css = block(":root:not([data-theme='dark'])", theme.light) + block(":root[data-theme='dark']", theme.dark);
+	return css ? `<style data-bud-theme>${css}</style>` : "";
+}
+//#endregion
 //#region ../project/src/lib/branches.ts
 var message$1 = "branches must be { main?, build?: { install?, build?, serve? } } with a branch name and nonempty shell commands.";
 function branch(value) {
@@ -28976,6 +29083,8 @@ var ConfigFields = check(section("Bud config must export an object.", {
 	previews: any(),
 	files: any(),
 	logo: any(),
+	theme: any(),
+	locale: any(),
 	picker: any(),
 	branches: any(),
 	flows: any()
@@ -29016,7 +29125,7 @@ var BudRoutesSchema = check(list(RouteSchema, "bud.config must define at least o
 var port = (value) => value === void 0 || Number.isInteger(value) && value >= 0 && value <= 65535;
 var remote$1 = (value) => typeof value === "string" && /^[a-zA-Z0-9][a-zA-Z0-9._-]*$/.test(value);
 /** A project's config, validated and normalized before Bud starts any listeners. */
-var BudConfigSchema = delegate(check(delegate(check(delegate(check(delegate(ConfigFields, (config) => ({
+var BudConfigSchema = delegate(check(delegate(check(check(delegate(check(delegate(ConfigFields, (config) => ({
 	...config,
 	routes: parseConfig(BudRoutesSchema, config.routes)
 })), ({ port: companion, target }) => port(companion ?? 0) && port(target?.port) ? void 0 : "Ports must be integers between 0 and 65535."), ({ target, ...config }) => {
@@ -29025,7 +29134,7 @@ var BudConfigSchema = delegate(check(delegate(check(delegate(check(delegate(Conf
 		...config,
 		targetOrigin: origin ? normalizeOrigin(origin, "target.origin must be an HTTP(S) origin without a path or credentials.") : origin
 	};
-}), ({ comments }) => remote$1(comments?.remote ?? "origin") ? void 0 : "comments.remote must be a Git remote name."), (config) => {
+}), ({ locale }) => locale === void 0 || locale === "en" || locale === "de" ? void 0 : "locale must be \"en\" or \"de\"."), ({ comments }) => remote$1(comments?.remote ?? "origin") ? void 0 : "comments.remote must be a Git remote name."), (config) => {
 	let flows = parseConfig(BudFlowsSchema, config.flows);
 	let steps = flows.flatMap((flow) => flow.steps.map((step) => flowStepRoute(flow, step)));
 	let home = config.routes.findIndex((route) => route.path === "/") + 1;
@@ -29051,6 +29160,8 @@ var BudConfigSchema = delegate(check(delegate(check(delegate(check(delegate(Conf
 	previews: parseConfig(BudPreviewsSchema, config.previews),
 	files: parseConfig(BudFilesSchema, config.files),
 	logo: parseConfig(BudLogoSchema, config.logo),
+	theme: parseConfig(BudThemeSchema, config.theme),
+	locale: config.locale === void 0 ? "en" : config.locale,
 	picker: parseConfig(BudPickerSchema, config.picker),
 	branches: parseConfig(BudBranchesSchema, config.branches)
 }));
@@ -33491,4 +33602,4 @@ function branchPreviewsLayer(project, options) {
 	}));
 }
 //#endregion
-export { shutdown$1 as $, makeUnsafe$4 as $n, provideService as $t, debounce as A, uninterruptibleMask as An, clockWith as At, merge as B, empty$2 as Bn, forkIn as Bt, RuntimePolicy as C, tapError as Cn, asSome as Ct, callback as D, try_ as Dn, catchIf as Dt, as as E, tryPromise as En, callback$1 as Et, fromPubSub as F, build as Fn, filterOrFail as Ft, makeUnsafe as G, provide$2 as Gn, mapError$2 as Gt, tap as H, makeMemoMapUnsafe as Hn, gen as Ht, ignore as I, buildWithMemoMap as In, flatMap$1 as It, shutdown as J, succeedContext as Jn, orDie as Jt, offer as K, provideMerge as Kn, match as Kt, make$7 as L, effect as Ln, flatten$1 as Lt, empty as M, withFiber as Mn, die as Mt, filter as N, yieldNow as Nn, ensuring as Nt, changes as O, undefined_$2 as On, catchTag as Ot, fromEffect as P, currentTimeMillis as Pn, fail$4 as Pt, publishAll as Q, forkUnsafe as Qn, provideContext as Qt, mapEffect as R, effectContext as Rn, forEach$1 as Rt, ProcessRunner as S, tap$1 as Sn, as$1 as St, FileSystem as T, timeoutOrElse as Tn, cached as Tt, unwrap as U, merge$2 as Un, ignore$2 as Ut, runForEach as V, isLayer as Vn, forkScoped as Vt, make$8 as W, mergeAll$1 as Wn, map$2 as Wt, take as X, unwrap$4 as Xn, promise as Xt, sliding as Y, sync$1 as Yn, orElseSucceed as Yt, publish as Z, close as Zn, provide as Zt, resolveStorage as _, sleep as _n, acquireRelease as _t, followCapture as a, runForkWith as an, scopeRemoveFinalizerUnsafe as ar, ArraySchema as at, readText as b, suspend$2 as bn, all$1 as bt, previewsLayer as c, runPromiseExitWith as cn, getOption as cr, Struct as ct, gitLayer as d, runSyncExit as dn, getOrUndefined$1 as dr, decodeEffect as dt, result as en, _await as er, sliding$1 as et, Project as f, runSyncExitWith as fn, isNone as fr, isMaxLength as ft, resolveScreenRoutes as g, serviceOption as gn, bytes as gt, defaultScreens as h, scoped as hn, TaggedError as hr, optional$1 as ht, projectFlows as i, runFork as in, void_$1 as ir, runIn as it, drop as j, void_ as jn, context as jt, concat as k, uninterruptible as kn, catch_$1 as kt, PreviewSession as l, runPromiseWith as ln, make$25 as lr, Undefined as lt, projectModuleFile as m, scope as mn, some as mr, isPattern as mt, branchIndexName as n, runCallback as nn, make$23 as nr, await_ as nt, startBranchBuild as o, runPromise as on, Service as or, Record as ot, createProjectContext as p, runSyncWith as pn, none as pr, isNonEmpty as pt, offerUnsafe as q, succeed$3 as qn, option as qt, branchPreviewsLayer as r, runCallbackWith as rn, succeed$4 as rr, interrupt as rt, Previews as s, runPromiseExit as sn, add as sr, String$1 as st, BranchPreviews as t, retry as tn, doneUnsafe as tr, unbounded$1 as tt, Git as u, runSync$1 as un, getOrNull as ur, Union as ut, LOGO_TYPES as v, succeed$2 as vn, acquireUseRelease as vt, Path$1 as w, timeoutOption as wn, asVoid as wt, writeTextAtomic as x, sync as xn, andThen as xt, nodeLayer as y, succeedNone as yn, addFinalizer as yt, mapError as z, effectDiscard as zn, forever as zt };
+export { publishAll as $, forkUnsafe as $n, provideContext as $t, concat as A, uninterruptible as An, catch_$1 as At, mapError as B, effectDiscard as Bn, forever as Bt, ProcessRunner as C, tap$1 as Cn, as$1 as Ct, as as D, tryPromise as Dn, callback$1 as Dt, FileSystem as E, timeoutOrElse as En, cached as Et, fromEffect as F, currentTimeMillis as Fn, fail$4 as Ft, make$8 as G, mergeAll$1 as Gn, map$2 as Gt, runForEach as H, isLayer as Hn, forkScoped as Ht, fromPubSub as I, build as In, filterOrFail as It, offerUnsafe as J, succeed$3 as Jn, option as Jt, makeUnsafe as K, provide$2 as Kn, mapError$2 as Kt, ignore as L, buildWithMemoMap as Ln, flatMap$1 as Lt, drop as M, void_ as Mn, context as Mt, empty as N, withFiber as Nn, die as Nt, callback as O, try_ as On, catchIf as Ot, filter as P, yieldNow as Pn, ensuring as Pt, publish as Q, close as Qn, provide as Qt, make$7 as R, effect as Rn, flatten$1 as Rt, writeTextAtomic as S, sync as Sn, andThen as St, Path$1 as T, timeoutOption as Tn, asVoid as Tt, tap as U, makeMemoMapUnsafe as Un, gen as Ut, merge as V, empty$2 as Vn, forkIn as Vt, unwrap as W, merge$2 as Wn, ignore$2 as Wt, sliding as X, sync$1 as Xn, orElseSucceed as Xt, shutdown as Y, succeedContext as Yn, orDie as Yt, take as Z, unwrap$4 as Zn, promise as Zt, resolveStorage as _, serviceOption as _n, bytes as _t, followCapture as a, runFork as an, void_$1 as ar, runIn as at, nodeLayer as b, succeedNone as bn, addFinalizer as bt, previewsLayer as c, runPromiseExit as cn, add as cr, String$1 as ct, gitLayer as d, runSync$1 as dn, getOrNull as dr, Union as dt, provideService as en, makeUnsafe$4 as er, shutdown$1 as et, Project as f, runSyncExit as fn, getOrUndefined$1 as fr, decodeEffect as ft, resolveScreenRoutes as g, scoped as gn, TaggedError as gr, optional$1 as gt, defaultScreens as h, scope as hn, some as hr, isPattern as ht, projectFlows as i, runCallbackWith as in, succeed$4 as ir, interrupt as it, debounce as j, uninterruptibleMask as jn, clockWith as jt, changes as k, undefined_$2 as kn, catchTag as kt, PreviewSession as l, runPromiseExitWith as ln, getOption as lr, Struct as lt, projectModuleFile as m, runSyncWith as mn, none as mr, isNonEmpty as mt, branchIndexName as n, retry as nn, doneUnsafe as nr, unbounded$1 as nt, startBranchBuild as o, runForkWith as on, scopeRemoveFinalizerUnsafe as or, ArraySchema as ot, createProjectContext as p, runSyncExitWith as pn, isNone as pr, isMaxLength as pt, offer as q, provideMerge as qn, match as qt, branchPreviewsLayer as r, runCallback as rn, make$23 as rr, await_ as rt, Previews as s, runPromise as sn, Service as sr, Record as st, BranchPreviews as t, result as tn, _await as tr, sliding$1 as tt, Git as u, runPromiseWith as un, make$25 as ur, Undefined as ut, themeStyle as v, sleep as vn, acquireRelease as vt, RuntimePolicy as w, tapError as wn, asSome as wt, readText as x, suspend$2 as xn, all$1 as xt, LOGO_TYPES as y, succeed$2 as yn, acquireUseRelease as yt, mapEffect as z, effectContext as zn, forEach$1 as zt };

package/dist/server/assets/{canvas-D6tIkONI.js → canvas-Dn4RYoU2.js}

@@ -1,8 +1,8 @@
 import { kn as Icon } from "./events-6z5v7Uca.js";
-import { Bt as Button, Cn as Text, H as captureCanvasPoint, Rt as Loader, Sn as writePreference, V as CanvasWorkspace, W as BranchSidebar, fn as ToolbarSeparator, gn as IconButton, hn as Select, l as projectStore, pn as WorkspaceLayout, t as commentsUnavailable, ut as conversationHref, vn as Tooltip, xn as readPreference } from "./comment-data-BuArfgcc.js";
-import { n as createProjectComments, r as loadComments, t as defineScreen } from "./screen-DMUB9a-K.js";
-import { i as pictureKey, n as createProjectPreviews, t as createProjectBranches } from "./project-branches-B7rtrvMl.js";
-import { t as ProjectThreadLinks } from "./project-thread-links-ue_ad9IX.js";
+import { Bt as Button, Dn as Text, H as captureCanvasPoint, Rt as Loader, Sn as writePreference, Tn as t, V as CanvasWorkspace, W as BranchSidebar, fn as ToolbarSeparator, gn as IconButton, hn as Select, l as projectStore, pn as WorkspaceLayout, t as commentsUnavailable, ut as conversationHref, vn as Tooltip, xn as readPreference } from "./comment-data-B0OLHBGp.js";
+import { n as createProjectComments, r as loadComments, t as defineScreen } from "./screen-BtcJmZwj.js";
+import { i as pictureKey, n as createProjectPreviews, t as createProjectBranches } from "./project-branches-GtQYyOH5.js";
+import { t as ProjectThreadLinks } from "./project-thread-links-Nfz9NIny.js";
 import { on, ref } from "remix/component";
 import { Fragment, jsx, jsxs } from "remix/component/jsx-runtime";
 //#region app/client/preview-image.tsx
@@ -160,7 +160,7 @@ function PreviewImage(handle) {
 			let { thumbnail, slices } = drawn(picture);
 			return /* @__PURE__ */ jsxs("div", {
 				role: "img",
-				"aria-label": `${route.title} preview`,
+				"aria-label": t("app.client.previewImage.preview", { title: route.title }),
 				"data-detail": !view.visible ? "hidden" : slices.length ? "slices" : thumbnail ? "thumbnail" : "pending",
 				class: `relative select-none overflow-hidden ${mode === "comment" ? "cursor-crosshair" : ""}`,
 				style: { height },
@@ -210,11 +210,11 @@ function PreviewImage(handle) {
 					size: 24,
 					class: "text-muted"
 				}),
-				/* @__PURE__ */ jsxs(Text, {
+				/* @__PURE__ */ jsx(Text, {
 					variant: "title",
 					weight: "semibold",
 					class: "text-ink",
-					children: [route.title, " couldn't be captured"]
+					children: t("app.client.previewImage.captureFailed", { title: route.title })
 				}),
 				failure ? /* @__PURE__ */ jsx(Text, {
 					variant: "ui",
@@ -229,7 +229,7 @@ function PreviewImage(handle) {
 						mix: [stopPan, on("click", () => void previews.refresh(page))],
 						children: /* @__PURE__ */ jsx(Text, {
 							variant: "ui",
-							children: "Try again"
+							children: t("app.client.previewImage.tryAgain")
 						})
 					}), /* @__PURE__ */ jsx("a", {
 						href: pageUrl,
@@ -239,7 +239,7 @@ function PreviewImage(handle) {
 						mix: stopPan,
 						children: /* @__PURE__ */ jsx(Text, {
 							variant: "ui",
-							children: "Open page"
+							children: t("app.client.previewImage.openPage")
 						})
 					})]
 				})
@@ -247,7 +247,7 @@ function PreviewImage(handle) {
 		});
 		return /* @__PURE__ */ jsx("div", {
 			class: "absolute inset-0 flex items-center justify-center",
-			children: /* @__PURE__ */ jsx(Loader, { label: `Capturing ${route.title}…` })
+			children: /* @__PURE__ */ jsx(Loader, { label: t("app.client.previewImage.capturing", { title: route.title }) })
 		});
 	};
 }
@@ -280,7 +280,7 @@ function PreviewRefresh(handle) {
 			})
 		}) : null, /* @__PURE__ */ jsx(IconButton, {
 			icon: "sync",
-			label: `Refresh ${route.title}`,
+			label: t("app.client.previewImage.refresh", { title: route.title }),
 			tooltip: true,
 			size: "small",
 			iconSize: 13,
@@ -389,7 +389,7 @@ function compareProjectPictures(options) {
 			let result = await compare(route.page, route.size).catch((cause) => ({
 				state: "failed",
 				regions: [],
-				error: cause instanceof Error ? cause.message : "The pictures could not be compared."
+				error: cause instanceof Error ? cause.message : t("app.client.projectDifferences.comparisonFailed")
 			}));
 			if (signal.aborted) return;
 			states.set(route.id, result);
@@ -429,11 +429,9 @@ function differenceSlots(regions) {
 		height: Math.max(1, top - gap)
 	};
 }
-var kinds = {
-	changed: "Changed",
-	added: "Added",
-	removed: "Removed"
-};
+function kindLabel(kind) {
+	return kind === "changed" ? t("app.client.differenceView.changed") : kind === "added" ? t("app.client.differenceView.added") : t("app.client.differenceView.removed");
+}
 function crops(signal) {
 	let urls = /* @__PURE__ */ new Map();
 	signal.addEventListener("abort", () => {
@@ -468,7 +466,10 @@ function DifferenceArtboard(handle) {
 		let visible = viewport?.get(route.id)?.visible ?? true;
 		return /* @__PURE__ */ jsx("div", {
 			role: "img",
-			"aria-label": `${route.title}, ${label}`,
+			"aria-label": t("app.client.differenceView.artboardLabel", {
+				title: route.title,
+				label
+			}),
 			"data-difference": side,
 			"data-changes": regions.length,
 			class: "relative select-none bg-[var(--bud-main)]",
@@ -491,11 +492,11 @@ function DifferenceArtboard(handle) {
 						children: [/* @__PURE__ */ jsx(Text, {
 							variant: "ui",
 							weight: "medium",
-							children: `Change ${index + 1}`
+							children: t("app.client.differenceView.changeNumber", { count: index + 1 })
 						}), /* @__PURE__ */ jsx(Text, {
 							variant: "ui",
 							tone: "muted",
-							children: kinds[region.kind]
+							children: kindLabel(region.kind)
 						})]
 					}), crop && span.height > 0 ? /* @__PURE__ */ jsxs("div", {
 						class: "relative overflow-hidden",
@@ -518,7 +519,7 @@ function DifferenceArtboard(handle) {
 						children: /* @__PURE__ */ jsx(Text, {
 							variant: "ui",
 							tone: "muted",
-							children: `Not in ${label}`
+							children: t("app.client.differenceView.notIn", { label })
 						})
 					})]
 				}, index);
@@ -552,7 +553,10 @@ function DifferenceSlideshow(handle) {
 				}) }), crop && slide.region[which].height > 0 ? /* @__PURE__ */ jsxs("div", {
 					class: "relative",
 					children: [/* @__PURE__ */ jsx("img", {
-						alt: `${slide.route.title}, ${label}`,
+						alt: t("app.client.differenceView.artboardLabel", {
+							title: slide.route.title,
+							label
+						}),
 						src: url(crop),
 						class: "block w-full rounded-lg ring-1 ring-line"
 					}), slide.region.kind === "changed" ? /* @__PURE__ */ jsx("div", {
@@ -568,14 +572,14 @@ function DifferenceSlideshow(handle) {
 					children: /* @__PURE__ */ jsx(Text, {
 						variant: "ui",
 						tone: "muted",
-						children: `Not in ${label}`
+						children: t("app.client.differenceView.notIn", { label })
 					})
 				})]
 			});
 		};
 		return /* @__PURE__ */ jsxs("section", {
 			role: "dialog",
-			"aria-label": "Differences slideshow",
+			"aria-label": t("app.client.differenceView.slideshowLabel"),
 			class: "bud-surface absolute inset-0 z-40 flex flex-col bg-[var(--bud-main)]",
 			mix: ref((node, signal) => {
 				node.focus();
@@ -597,33 +601,39 @@ function DifferenceSlideshow(handle) {
 							variant: "ui",
 							weight: "medium",
 							class: "truncate",
-							children: slide?.route.title ?? "No differences"
+							children: slide?.route.title ?? t("app.client.differenceView.noDifferences")
 						}), slide ? /* @__PURE__ */ jsx(Text, {
 							variant: "ui",
 							tone: "muted",
 							class: "shrink-0 tabular-nums",
 							role: "status",
-							children: `${kinds[slide.region.kind]} · change ${slide.index + 1} of ${slide.count} · ${index + 1} / ${slides.length}`
+							children: t("app.client.differenceView.slideStatus", {
+								kind: kindLabel(slide.region.kind),
+								change: slide.index + 1,
+								count: slide.count,
+								index: index + 1,
+								total: slides.length
+							})
 						}) : null]
 					}),
 					/* @__PURE__ */ jsx(IconButton, {
 						tooltip: true,
 						icon: "chevron-left",
-						label: "Previous change",
+						label: t("app.client.differenceView.previousChange"),
 						disabled: slides.length < 2,
 						mix: on("click", () => step(-1))
 					}),
 					/* @__PURE__ */ jsx(IconButton, {
 						tooltip: true,
 						icon: "chevron-right",
-						label: "Next change",
+						label: t("app.client.differenceView.nextChange"),
 						disabled: slides.length < 2,
 						mix: on("click", () => step(1))
 					}),
 					/* @__PURE__ */ jsx(IconButton, {
 						tooltip: true,
 						icon: "close",
-						label: "Close slideshow",
+						label: t("app.client.differenceView.closeSlideshow"),
 						shortcut: "escape",
 						mix: on("click", () => handle.props.onClose())
 					})
@@ -737,7 +747,7 @@ function ProjectCanvas(handle) {
 	function others() {
 		let sets = project.workingTree ? [{
 			value: "",
-			label: "Working tree"
+			label: t("app.client.projectCanvas.workingTree")
 		}] : [];
 		for (let branch of branches.list.branches) if (branch.active && branch.captured) sets.push({
 			value: branch.name,
@@ -746,7 +756,7 @@ function ProjectCanvas(handle) {
 		return sets.filter((set) => set.value !== (selected ?? ""));
 	}
 	function label(set) {
-		return set ? set : "Working tree";
+		return set ? set : t("app.client.projectCanvas.workingTree");
 	}
 	function startComparing() {
 		let sets = others();
@@ -812,7 +822,7 @@ function ProjectCanvas(handle) {
 				comments.loadThread(id);
 			});
 		}
-		if (!branches.loaded && !branches.error) return /* @__PURE__ */ jsx(Loader, { label: "Loading branches…" });
+		if (!branches.loaded && !branches.error) return /* @__PURE__ */ jsx(Loader, { label: t("app.client.projectCanvas.loadingBranches") });
 		let projectKey = `${project.id}:${project.targetOrigin}:${project.routes.map((route) => route.path).join("|")}`;
 		let snapshot = {
 			...comments.snapshot,
@@ -859,8 +869,23 @@ function ProjectCanvas(handle) {
 		if (differences) {
 			let { compared: done, total } = differences.progress;
 			let missing = artboards.filter(({ artboard }) => differences.get(artboard.id).state === "missing").length;
-			status = !differences.done ? `Comparing with ${beforeLabel}… ${done} of ${total} pages` : changed.length ? `${changed.length} of ${total} pages differ from ${beforeLabel}` : `No differences from ${beforeLabel}`;
-			if (differences.done && missing) status += ` · ${missing} without pictures on both sides`;
+			status = !differences.done ? t("app.client.projectCanvas.comparingPages", {
+				name: beforeLabel,
+				done,
+				count: total
+			}) : changed.length ? missing ? t("app.client.projectCanvas.differentPagesWithMissing", {
+				changed: changed.length,
+				count: total,
+				name: beforeLabel,
+				missing
+			}) : t("app.client.projectCanvas.differentPages", {
+				changed: changed.length,
+				count: total,
+				name: beforeLabel
+			}) : missing ? t("app.client.projectCanvas.noDifferencesWithMissing", {
+				name: beforeLabel,
+				count: missing
+			}) : t("app.client.projectCanvas.noDifferences", { name: beforeLabel });
 		}
 		let sets = others();
 		let icon = (size) => size.mobile || size.width < 600 ? "mobile" : size.width < 1100 ? "tablet" : "desktop";
@@ -869,14 +894,17 @@ function ProjectCanvas(handle) {
 				sizes.map((size) => /* @__PURE__ */ jsx(IconButton, {
 					tooltip: true,
 					icon: icon(size),
-					label: `Show ${size.name} (${size.width})`,
+					label: t("app.client.projectCanvas.showViewport", {
+						name: size.name,
+						width: size.width
+					}),
 					active: viewport === size.id,
 					mix: on("click", () => show(size.id))
 				})),
 				/* @__PURE__ */ jsx(IconButton, {
 					tooltip: true,
 					icon: "columns",
-					label: "Show every viewport side by side",
+					label: t("app.client.projectCanvas.showEveryViewport"),
 					active: viewport === "all",
 					mix: on("click", () => show("all"))
 				}),
@@ -885,13 +913,13 @@ function ProjectCanvas(handle) {
 			/* @__PURE__ */ jsx(IconButton, {
 				tooltip: true,
 				icon: "compare",
-				label: differences ? "Stop comparing" : "Show differences with another branch",
+				label: differences ? t("app.client.projectCanvas.stopComparing") : t("app.client.projectCanvas.showDifferences"),
 				active: Boolean(differences),
 				disabled: !differences && !sets.length,
 				mix: on("click", () => differences ? stopComparing() : startComparing())
 			}),
 			differences ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Select, {
-				label: "Compare with",
+				label: t("app.client.projectCanvas.compareWith"),
 				value: comparing ?? "",
 				options: sets,
 				class: "max-w-48",
@@ -904,7 +932,7 @@ function ProjectCanvas(handle) {
 			}), /* @__PURE__ */ jsx(IconButton, {
 				tooltip: true,
 				icon: "play",
-				label: "Step through the differences",
+				label: t("app.client.projectCanvas.stepThroughDifferences"),
 				disabled: !slides.length,
 				mix: on("click", () => {
 					slide = 0;
@@ -914,8 +942,8 @@ function ProjectCanvas(handle) {
 		] });
 		return /* @__PURE__ */ jsx(WorkspaceLayout, {
 			class: "h-full min-h-0",
-			sidebarLabel: "Branches",
-			mainLabel: "Canvas",
+			sidebarLabel: t("app.client.projectCanvas.branches"),
+			mainLabel: t("app.client.projectCanvas.canvas"),
 			drawerOpen: drawer,
 			onDrawerOpenChange: (open) => {
 				drawer = open;
@@ -1025,7 +1053,7 @@ function ProjectCanvas(handle) {
 					drawer = true;
 					handle.update();
 				},
-				sidebarLabel: "Branches",
+				sidebarLabel: t("app.client.projectCanvas.branches"),
 				renderArtboard: (route, state) => {
 					let side = sides.get(route.id);
 					if (side) return /* @__PURE__ */ jsx(DifferenceArtboard, {