@bud.sh/app 0.2.0 → 0.4.0

package/dist/node/index.js

@@ -202,6 +202,99 @@ 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
+	} };
+});
+//#endregion
 //#region ../project/src/lib/branches.ts
 var message = "branches must be { main?, build?: { install?, build?, serve? } } with a branch name and nonempty shell commands.";
 function branch(value) {
@@ -550,6 +643,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()
@@ -589,7 +684,7 @@ function routePath(path) {
 var BudRoutesSchema = check(list(RouteSchema, "bud.config must define at least one route.", 1), (routes) => new Set(routes.map((route) => route.id)).size !== routes.length || new Set(routes.map((route) => route.path)).size !== routes.length ? "Canvas route IDs and paths must be unique." : void 0);
 var port = (value) => value === void 0 || Number.isInteger(value) && value >= 0 && value <= 65535;
 var remote = (value) => typeof value === "string" && /^[a-zA-Z0-9][a-zA-Z0-9._-]*$/.test(value);
-delegate(check(delegate(check(delegate(check(delegate(ConfigFields, (config) => ({
+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 }) => {
@@ -598,7 +693,7 @@ delegate(check(delegate(check(delegate(check(delegate(ConfigFields, (config) =>
 		...config,
 		targetOrigin: origin ? normalizeOrigin(origin, "target.origin must be an HTTP(S) origin without a path or credentials.") : origin
 	};
-}), ({ comments }) => remote(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(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;
@@ -624,6 +719,8 @@ delegate(check(delegate(check(delegate(check(delegate(ConfigFields, (config) =>
 	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)
 }));

package/dist/node-host/assets/{canvas-BZhzizzt.js → canvas-D_F8SIlm.js}

@@ -1,7 +1,7 @@
-import { $t as Button, H as CanvasWorkspace, U as captureCanvasPoint, Zt as Loader, bt as conversationHref, dn as Text, en as ToolbarSeparator, et as BranchSidebar, fn as Icon, in as IconButton, l as projectStore, ln as readPreference, on as Tooltip, rn as Select, t as commentsUnavailable, tn as WorkspaceLayout, un as writePreference } from "./comment-data-nUlI0szN.js";
-import { n as createProjectComments, r as loadComments, t as defineScreen } from "./screen-DQoTOWYR.js";
-import { i as pictureKey, n as createProjectPreviews, t as createProjectBranches } from "./project-branches-1zs_0J_y.js";
-import { t as ProjectThreadLinks } from "./project-thread-links-LpUAGcDr.js";
+import { $t as Button, H as CanvasWorkspace, U as captureCanvasPoint, Zt as Loader, bt as conversationHref, en as ToolbarSeparator, et as BranchSidebar, gn as Icon, hn as Text, in as IconButton, l as projectStore, ln as readPreference, on as Tooltip, pn as t, rn as Select, t as commentsUnavailable, tn as WorkspaceLayout, un as writePreference } from "./comment-data-q_8INiZz.js";
+import { n as createProjectComments, r as loadComments, t as defineScreen } from "./screen-Dog-YByu.js";
+import { i as pictureKey, n as createProjectPreviews, t as createProjectBranches } from "./project-branches-C26hwmo3.js";
+import { t as ProjectThreadLinks } from "./project-thread-links-BOzjws5W.js";
 import { on, ref } from "remix/component";
 import { Fragment, jsx, jsxs } from "remix/component/jsx-runtime";
 //#region app/client/preview-image.tsx
@@ -159,7 +159,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 },
@@ -209,11 +209,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",
@@ -228,7 +228,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,
@@ -238,7 +238,7 @@ function PreviewImage(handle) {
 						mix: stopPan,
 						children: /* @__PURE__ */ jsx(Text, {
 							variant: "ui",
-							children: "Open page"
+							children: t("app.client.previewImage.openPage")
 						})
 					})]
 				})
@@ -246,7 +246,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 }) })
 		});
 	};
 }
@@ -279,7 +279,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,
@@ -388,7 +388,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);
@@ -428,11 +428,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", () => {
@@ -467,7 +465,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)]",
@@ -490,11 +491,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",
@@ -517,7 +518,7 @@ function DifferenceArtboard(handle) {
 						children: /* @__PURE__ */ jsx(Text, {
 							variant: "ui",
 							tone: "muted",
-							children: `Not in ${label}`
+							children: t("app.client.differenceView.notIn", { label })
 						})
 					})]
 				}, index);
@@ -551,7 +552,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", {
@@ -567,14 +571,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();
@@ -596,33 +600,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())
 					})
@@ -736,7 +746,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,
@@ -745,7 +755,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();
@@ -811,7 +821,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,
@@ -858,8 +868,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";
@@ -868,14 +893,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"))
 				}),
@@ -884,13 +912,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",
@@ -903,7 +931,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;
@@ -913,8 +941,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;
@@ -1024,7 +1052,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, {