@bud.sh/app 0.1.0 → 0.2.0

package/dist/node-host/assets/canvas-BZhzizzt.js

@@ -0,0 +1,1066 @@
+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 { on, ref } from "remix/component";
+import { Fragment, jsx, jsxs } from "remix/component/jsx-runtime";
+//#region app/client/preview-image.tsx
+var failedHeight = 760;
+var stopPan = on("pointerdown", (event) => event.stopPropagation());
+function detailFor(picture, density, previous) {
+	let shown = picture.capture.width * density;
+	let widths = picture.capture.thumbnails.map((thumbnail) => thumbnail.width);
+	let pick = (scale) => {
+		let index = widths.findIndex((width) => shown <= width * scale);
+		return index < 0 ? "slices" : index;
+	};
+	let rank = (detail) => detail === "slices" ? widths.length : detail;
+	let target = pick(1);
+	if (previous === void 0 || rank(target) >= rank(previous)) return target;
+	return rank(pick(.85)) < rank(previous) ? target : previous;
+}
+function viewOf(viewport, id) {
+	return viewport?.get(id) ?? {
+		visible: true,
+		top: 0,
+		bottom: Infinity,
+		density: 1
+	};
+}
+function placed(picture, bottom) {
+	let top = 0;
+	return picture.capture.tiles.map((tile, index) => {
+		let slice = {
+			tile,
+			index,
+			top,
+			src: picture.srcs[index]
+		};
+		top += tile.height;
+		return {
+			...slice,
+			shownTo: Math.min(top, bottom)
+		};
+	});
+}
+/**
+* One route's latest server-side screenshot in the canvas's theme, drawn only while the canvas
+* shows it: a thumbnail when the page is small on screen, else only the slices in view. A new
+* capture replaces the picture once what it shows is decoded, so the artboard never shows an
+* empty frame between captures.
+* @param handle - The route, its theme, its preview store and the canvas artboard state.
+* @returns The artboard render function.
+*/
+function PreviewImage(handle) {
+	let { route, previews } = handle.props;
+	let page = route.pageId ?? route.id;
+	let shownKey = () => pictureKey(handle.props.theme, handle.props.size);
+	let layout = "";
+	let detail;
+	let shown;
+	let decoding = "";
+	function shownHeight(picture) {
+		return handle.props.topOnly ? picture.capture.tiles[0]?.height ?? picture.capture.height : picture.capture.height;
+	}
+	function report() {
+		let { preview, images } = previews.get(page);
+		let picture = images[shownKey()] ?? shown;
+		let height = picture ? shownHeight(picture) : preview?.captures[0]?.height ?? (preview?.state === "failed" ? failedHeight : 0);
+		if (!preview || !height) return;
+		let key = `${height}:${preview.path}:${picture?.capture.hash ?? ""}`;
+		if (layout === key) return;
+		layout = key;
+		handle.props.onLayout({
+			height,
+			path: preview.path,
+			pins: picture?.capture.pins
+		});
+	}
+	function drawn(picture) {
+		let view = viewOf(handle.props.viewport, route.id);
+		if (!view.visible || detail === void 0) return {
+			thumbnail: void 0,
+			slices: []
+		};
+		if (detail === "slices" && picture.srcs.length) {
+			let bottom = Math.min(view.bottom, shownHeight(picture));
+			return {
+				thumbnail: picture.thumbnails.at(-1),
+				slices: placed(picture, bottom).filter(({ src, top, shownTo }) => src && top < shownTo && shownTo > view.top)
+			};
+		}
+		let index = detail === "slices" ? picture.thumbnails.length - 1 : detail;
+		return {
+			thumbnail: picture.thumbnails[index] ?? picture.thumbnails.at(-1),
+			slices: []
+		};
+	}
+	function swap() {
+		let next = previews.get(page).images[shownKey()];
+		if (!next || next === shown) return;
+		if (!shown || shown.capture.hash === next.capture.hash) {
+			shown = next;
+			return;
+		}
+		if (detail === "slices" && !next.srcs.length) {
+			previews.slices(page, handle.props.theme, handle.props.size);
+			return;
+		}
+		let key = `${next.capture.hash}:${detail}`;
+		if (decoding === key) return;
+		decoding = key;
+		let wanted = next;
+		let { thumbnail, slices } = drawn(wanted);
+		Promise.all([thumbnail, ...slices.map(({ src }) => src)].flatMap((src) => {
+			if (!src) return [];
+			let image = new Image();
+			image.src = src;
+			return [image.decode().catch(() => {})];
+		})).then(() => {
+			if (decoding !== key || handle.signal.aborted) return;
+			decoding = "";
+			shown = previews.get(page).images[shownKey()] ?? wanted;
+			report();
+			handle.update();
+		});
+	}
+	let stopPreviews = previews.watch(page, () => {
+		swap();
+		report();
+		handle.update();
+	});
+	let stopViewport = handle.props.viewport?.watch(route.id, () => void handle.update());
+	handle.signal.addEventListener("abort", () => {
+		stopPreviews();
+		stopViewport?.();
+	}, { once: true });
+	return () => {
+		let { mode, origin, theme, viewport, size } = handle.props;
+		let { preview, images, refreshing, error } = previews.get(page);
+		handle.queueTask(() => {
+			previews.show(page, theme, size);
+			report();
+		});
+		let current = images[pictureKey(theme, size)] ?? images[pictureKey(theme === "dark" ? "light" : "dark", size)];
+		if (current && (!shown || shown.capture.theme !== current.capture.theme)) shown = current;
+		else swap();
+		let picture = shown;
+		let failure = error || (preview?.captures.length ? null : preview?.error);
+		let pageUrl = new URL(route.path, origin).href;
+		if (picture) {
+			let view = viewOf(viewport, route.id);
+			detail = detailFor(picture, view.density, detail);
+			if (view.visible && detail === "slices" && !picture.srcs.length) {
+				let { theme: wanted } = picture.capture;
+				handle.queueTask(() => previews.slices(page, wanted, size));
+			}
+			let height = shownHeight(picture);
+			let { width } = picture.capture;
+			let { thumbnail, slices } = drawn(picture);
+			return /* @__PURE__ */ jsxs("div", {
+				role: "img",
+				"aria-label": `${route.title} preview`,
+				"data-detail": !view.visible ? "hidden" : slices.length ? "slices" : thumbnail ? "thumbnail" : "pending",
+				class: `relative select-none overflow-hidden ${mode === "comment" ? "cursor-crosshair" : ""}`,
+				style: { height },
+				mix: [on("pointerdown", (event) => {
+					if (mode !== "pan") event.stopPropagation();
+				}), on("click", (event) => {
+					if (mode !== "comment" || preview?.path !== route.path) return;
+					event.stopPropagation();
+					let rect = event.currentTarget.getBoundingClientRect();
+					let point = {
+						x: (event.clientX - rect.left) * width / rect.width,
+						y: (event.clientY - rect.top) * height / rect.height
+					};
+					handle.props.onPick({
+						element: null,
+						path: route.path,
+						...captureCanvasPoint(point, width),
+						found: previews.describe(page, picture.capture, point.x, point.y)
+					});
+				})],
+				children: [thumbnail ? /* @__PURE__ */ jsx("img", {
+					src: thumbnail,
+					alt: "",
+					decoding: "async",
+					draggable: false,
+					class: "absolute inset-x-0 top-0 block w-full max-w-none",
+					style: { height: picture.capture.height }
+				}) : null, slices.map(({ tile, index, top, src }) => /* @__PURE__ */ jsx("img", {
+					src,
+					alt: "",
+					decoding: "async",
+					draggable: false,
+					class: "absolute inset-x-0 block w-full max-w-none",
+					style: {
+						top,
+						height: tile.height + (index < picture.capture.tiles.length - 1 ? 1 : 0)
+					}
+				}, tile.hash))]
+			});
+		}
+		if (preview?.state === "failed" || failure && !refreshing) return /* @__PURE__ */ jsxs("div", {
+			class: "absolute inset-0 flex flex-col items-center justify-center gap-3 p-12 text-center",
+			role: "status",
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					name: "circle-alert",
+					size: 24,
+					class: "text-muted"
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					variant: "title",
+					weight: "semibold",
+					class: "text-ink",
+					children: [route.title, " couldn't be captured"]
+				}),
+				failure ? /* @__PURE__ */ jsx(Text, {
+					variant: "ui",
+					class: "max-w-md text-muted",
+					children: failure
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					class: "mt-2 flex gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						disabled: refreshing,
+						mix: [stopPan, on("click", () => void previews.refresh(page))],
+						children: /* @__PURE__ */ jsx(Text, {
+							variant: "ui",
+							children: "Try again"
+						})
+					}), /* @__PURE__ */ jsx("a", {
+						href: pageUrl,
+						target: "_blank",
+						rel: "noreferrer",
+						class: "bud-interaction bud-control flex h-control items-center rounded-lg px-3 text-ink",
+						mix: stopPan,
+						children: /* @__PURE__ */ jsx(Text, {
+							variant: "ui",
+							children: "Open page"
+						})
+					})]
+				})
+			]
+		});
+		return /* @__PURE__ */ jsx("div", {
+			class: "absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(Loader, { label: `Capturing ${route.title}…` })
+		});
+	};
+}
+/**
+* Recaptures one route on demand, beside its artboard label.
+* @param handle - The route and its preview store.
+* @returns The button render function.
+*/
+function PreviewRefresh(handle) {
+	let { route, previews } = handle.props;
+	let page = route.pageId ?? route.id;
+	let stop = previews.watch(page, () => void handle.update());
+	handle.signal.addEventListener("abort", stop, { once: true });
+	return () => {
+		let { preview, refreshing } = previews.get(page);
+		let busy = refreshing || Boolean(preview?.updating);
+		let warning = preview?.state === "ready" ? preview.error : null;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [warning ? /* @__PURE__ */ jsx(Tooltip, {
+			label: warning,
+			children: /* @__PURE__ */ jsx("span", {
+				tabIndex: 0,
+				role: "img",
+				"aria-label": warning,
+				class: "pointer-events-auto ms-1 inline-flex text-amber-500",
+				mix: stopPan,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "circle-alert",
+					size: 13
+				})
+			})
+		}) : null, /* @__PURE__ */ jsx(IconButton, {
+			icon: "sync",
+			label: `Refresh ${route.title}`,
+			tooltip: true,
+			size: "small",
+			iconSize: 13,
+			disabled: refreshing,
+			"aria-busy": busy ? "true" : void 0,
+			class: `pointer-events-auto ms-0.5 text-muted hover:text-ink ${busy ? "[&_svg]:animate-spin" : ""}`,
+			mix: [stopPan, on("click", () => void previews.refresh(page))]
+		})] });
+	};
+}
+//#endregion
+//#region app/client/project-differences.ts
+var results = /* @__PURE__ */ new Map();
+function worker() {
+	return new Worker(new URL("./difference-worker.ts", import.meta.url), { type: "module" });
+}
+/**
+* Compares two picture sets route by route in a worker, in the routes' order, so the canvas can
+* show only what changed between them: the working tree, main or an activated branch against
+* another. Nothing leaves the browser; slices come from the previews store.
+* @param options - The routes, each with its page and viewport, both sets, the theme, the
+*   comparison's lifetime and a callback for each route compared.
+* @returns The comparison as it progresses.
+*/
+function compareProjectPictures(options) {
+	let { routes, before, after, theme, signal } = options;
+	let states = /* @__PURE__ */ new Map();
+	let state = {
+		get: (id) => states.get(id) ?? {
+			state: "pending",
+			regions: []
+		},
+		progress: {
+			compared: 0,
+			total: routes.length
+		},
+		done: routes.length === 0
+	};
+	let thread;
+	let next = 0;
+	let pending = /* @__PURE__ */ new Map();
+	function run(request) {
+		thread ??= worker();
+		thread.onmessage = (event) => {
+			pending.get(event.data.id)?.(event.data);
+			pending.delete(event.data.id);
+		};
+		let id = next++;
+		return new Promise((resolve) => {
+			pending.set(id, resolve);
+			thread.postMessage({
+				...request,
+				id
+			});
+		});
+	}
+	signal.addEventListener("abort", () => thread?.terminate(), { once: true });
+	async function compare(page, size) {
+		let [first, second] = await Promise.all([before.picture(page, theme, size), after.picture(page, theme, size)]);
+		if (!first || !second) return {
+			state: "missing",
+			regions: [],
+			before: first?.capture,
+			after: second?.capture
+		};
+		let pair = {
+			before: first.capture,
+			after: second.capture
+		};
+		if (first.capture.hash === second.capture.hash) return {
+			state: "same",
+			regions: [],
+			...pair
+		};
+		let key = `${first.capture.hash}\0${second.capture.hash}`;
+		let regions = results.get(key);
+		if (!regions) {
+			let picture = (side) => ({
+				images: side.images,
+				heights: side.capture.tiles.map((tile) => tile.height),
+				scale: side.capture.scale
+			});
+			let response = await run({
+				width: first.capture.width,
+				before: picture(first),
+				after: picture(second)
+			});
+			if ("error" in response) return {
+				state: "failed",
+				regions: [],
+				error: response.error,
+				...pair
+			};
+			regions = response.regions;
+			results.set(key, regions);
+		}
+		return {
+			state: regions.length ? "different" : "same",
+			regions,
+			...pair
+		};
+	}
+	(async () => {
+		for (let route of routes) {
+			if (signal.aborted) return;
+			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."
+			}));
+			if (signal.aborted) return;
+			states.set(route.id, result);
+			state.progress = {
+				compared: state.progress.compared + 1,
+				total: routes.length
+			};
+			options.onChange(route.id);
+		}
+		state.done = true;
+		thread?.terminate();
+		thread = void 0;
+		options.onChange(null);
+	})();
+	return state;
+}
+//#endregion
+//#region app/client/difference-view.tsx
+var caption = 40;
+var gap = 48;
+/**
+* Where each change's slot starts in a difference artboard, and the artboard's height.
+* @param regions - The route's changes.
+* @returns The slots, top to bottom, and the total height in page pixels.
+*/
+function differenceSlots(regions) {
+	let top = 0;
+	return {
+		slots: regions.map((region) => {
+			let slot = {
+				top,
+				height: caption + Math.max(region.before.height, region.after.height, 1)
+			};
+			top += slot.height + gap;
+			return slot;
+		}),
+		height: Math.max(1, top - gap)
+	};
+}
+var kinds = {
+	changed: "Changed",
+	added: "Added",
+	removed: "Removed"
+};
+function crops(signal) {
+	let urls = /* @__PURE__ */ new Map();
+	signal.addEventListener("abort", () => {
+		for (let url of urls.values()) URL.revokeObjectURL(url);
+	}, { once: true });
+	return (blob) => {
+		let url = urls.get(blob);
+		if (!url) urls.set(blob, url = URL.createObjectURL(blob));
+		return url;
+	};
+}
+/**
+* One side of a route's differences on the canvas: only the regions that changed, cropped from
+* that side's picture, with the changed columns outlined. Its twin on the other side shows the
+* same slots, so each change lines up across both.
+* @param handle - The route, the side, its regions and the artboard's canvas state.
+* @returns The artboard's render function.
+*/
+function DifferenceArtboard(handle) {
+	let url = crops(handle.signal);
+	let reported = 0;
+	return () => {
+		let { route, side, label, regions, viewport } = handle.props;
+		let { slots, height } = differenceSlots(regions);
+		if (reported !== height) {
+			reported = height;
+			handle.queueTask(() => handle.props.onLayout({
+				height,
+				path: route.path
+			}));
+		}
+		let visible = viewport?.get(route.id)?.visible ?? true;
+		return /* @__PURE__ */ jsx("div", {
+			role: "img",
+			"aria-label": `${route.title}, ${label}`,
+			"data-difference": side,
+			"data-changes": regions.length,
+			class: "relative select-none bg-[var(--bud-main)]",
+			style: { height: `${height}px` },
+			children: regions.map((region, index) => {
+				let span = region[side];
+				let crop = region.crops[side];
+				let slot = slots[index];
+				return /* @__PURE__ */ jsxs("div", {
+					"data-kind": region.kind,
+					"data-span": `${span.y} ${span.height}`,
+					class: "absolute inset-x-0",
+					style: {
+						top: `${slot.top}px`,
+						height: `${slot.height}px`
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						class: "flex items-center gap-2 px-1",
+						style: { height: `${caption}px` },
+						children: [/* @__PURE__ */ jsx(Text, {
+							variant: "ui",
+							weight: "medium",
+							children: `Change ${index + 1}`
+						}), /* @__PURE__ */ jsx(Text, {
+							variant: "ui",
+							tone: "muted",
+							children: kinds[region.kind]
+						})]
+					}), crop && span.height > 0 ? /* @__PURE__ */ jsxs("div", {
+						class: "relative overflow-hidden",
+						style: { height: `${span.height}px` },
+						children: [visible ? /* @__PURE__ */ jsx("img", {
+							alt: "",
+							src: url(crop),
+							draggable: false,
+							class: "block h-full w-full"
+						}) : null, region.kind === "changed" ? /* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							class: "pointer-events-none absolute inset-y-0 rounded-sm outline-2 outline-red-500/70",
+							style: {
+								left: `${region.x}px`,
+								width: `${Math.max(2, region.width)}px`
+							}
+						}) : null]
+					}) : /* @__PURE__ */ jsx("div", {
+						class: "grid h-24 place-items-center rounded-lg border border-dashed border-line",
+						children: /* @__PURE__ */ jsx(Text, {
+							variant: "ui",
+							tone: "muted",
+							children: `Not in ${label}`
+						})
+					})]
+				}, index);
+			})
+		});
+	};
+}
+/**
+* Every change, one at a time, both sides next to each other at the panel's width. Arrow keys
+* step through them; Escape closes.
+* @param handle - The changes, the shown one, the sides' names and callbacks.
+* @returns The slideshow's render function.
+*/
+function DifferenceSlideshow(handle) {
+	let url = crops(handle.signal);
+	let step = (by) => {
+		let { slides, index } = handle.props;
+		if (slides.length) handle.props.onIndex((index + by + slides.length) % slides.length);
+	};
+	return () => {
+		let { slides, index, beforeLabel, afterLabel } = handle.props;
+		let slide = slides[Math.min(index, slides.length - 1)];
+		let side = (which, label) => {
+			let crop = slide?.region.crops[which];
+			return /* @__PURE__ */ jsxs("figure", {
+				class: "m-0 flex min-w-0 flex-col gap-2",
+				children: [/* @__PURE__ */ jsx("figcaption", { children: /* @__PURE__ */ jsx(Text, {
+					variant: "ui",
+					tone: "muted",
+					children: label
+				}) }), crop && slide.region[which].height > 0 ? /* @__PURE__ */ jsxs("div", {
+					class: "relative",
+					children: [/* @__PURE__ */ jsx("img", {
+						alt: `${slide.route.title}, ${label}`,
+						src: url(crop),
+						class: "block w-full rounded-lg ring-1 ring-line"
+					}), slide.region.kind === "changed" ? /* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						class: "pointer-events-none absolute inset-y-0 rounded-sm outline-2 outline-red-500/70",
+						style: {
+							left: `${slide.region.x / slide.width * 100}%`,
+							width: `max(2px, ${slide.region.width / slide.width * 100}%)`
+						}
+					}) : null]
+				}) : /* @__PURE__ */ jsx("div", {
+					class: "grid h-32 place-items-center rounded-lg border border-dashed border-line",
+					children: /* @__PURE__ */ jsx(Text, {
+						variant: "ui",
+						tone: "muted",
+						children: `Not in ${label}`
+					})
+				})]
+			});
+		};
+		return /* @__PURE__ */ jsxs("section", {
+			role: "dialog",
+			"aria-label": "Differences slideshow",
+			class: "bud-surface absolute inset-0 z-40 flex flex-col bg-[var(--bud-main)]",
+			mix: ref((node, signal) => {
+				node.focus();
+				node.ownerDocument.addEventListener("keydown", (event) => {
+					if (event.key === "ArrowRight") step(1);
+					else if (event.key === "ArrowLeft") step(-1);
+					else if (event.key === "Escape") handle.props.onClose();
+					else return;
+					event.preventDefault();
+				}, { signal });
+			}),
+			tabindex: -1,
+			children: [/* @__PURE__ */ jsxs("header", {
+				class: "flex h-12 shrink-0 items-center gap-2 border-b border-line ps-4 pe-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						class: "flex min-w-0 flex-1 items-baseline gap-2",
+						children: [/* @__PURE__ */ jsx(Text, {
+							variant: "ui",
+							weight: "medium",
+							class: "truncate",
+							children: slide?.route.title ?? "No differences"
+						}), 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}`
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						tooltip: true,
+						icon: "chevron-left",
+						label: "Previous change",
+						disabled: slides.length < 2,
+						mix: on("click", () => step(-1))
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						tooltip: true,
+						icon: "chevron-right",
+						label: "Next change",
+						disabled: slides.length < 2,
+						mix: on("click", () => step(1))
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						tooltip: true,
+						icon: "close",
+						label: "Close slideshow",
+						shortcut: "escape",
+						mix: on("click", () => handle.props.onClose())
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				class: "min-h-0 flex-1 overflow-auto p-4",
+				children: slide ? /* @__PURE__ */ jsxs("div", {
+					class: "grid gap-4 md:grid-cols-2",
+					children: [side("before", beforeLabel), side("after", afterLabel)]
+				}) : null
+			})]
+		});
+	};
+}
+//#endregion
+//#region app/client/project-canvas.tsx
+function isCanvasThread(thread) {
+	return Boolean(thread.anchor && !("type" in thread.anchor));
+}
+function initialTheme(project, key) {
+	let { themes } = project.previews;
+	let stored = readPreference(key);
+	let interfaceTheme = document.documentElement.dataset.theme;
+	return themes.find((theme) => theme === stored) ?? themes.find((theme) => theme === interfaceTheme) ?? themes[0];
+}
+/**
+* Screenshots of the configured routes and their comments.
+* @param handle - The project and its first comments.
+* @returns The canvas render function.
+*/
+function ProjectCanvas(handle) {
+	let project = handle.props.project, requestedThread;
+	let comments = createProjectComments({
+		store: projectStore(project),
+		token: project.token,
+		signal: handle.signal,
+		initial: handle.props.comments,
+		onChange: () => {
+			handle.update();
+		}
+	});
+	if (handle.props.comments.stored) comments.load();
+	let home = project.workingTree ? null : project.main ?? "main";
+	let branchKey = `bud:canvas-branch:${project.id}`;
+	let stored = readPreference(branchKey);
+	let selected = typeof stored === "string" ? stored : home;
+	let wide = true;
+	let drawer = false;
+	let branches = createProjectBranches({
+		project,
+		signal: handle.signal,
+		onChange: () => {
+			if (selected && selected !== home && branches.loaded && !branches.list.branches.some((branch) => branch.name === selected && branch.active)) choose(home);
+			else handle.update();
+		}
+	});
+	let showing = new AbortController();
+	handle.signal.addEventListener("abort", () => showing.abort(), { once: true });
+	let previews = createProjectPreviews({
+		project,
+		signal: showing.signal,
+		branch: selected
+	});
+	function choose(branch) {
+		drawer = false;
+		if (branch === selected) return void handle.update();
+		selected = branch;
+		writePreference(branchKey, branch);
+		showing.abort();
+		showing = new AbortController();
+		previews = createProjectPreviews({
+			project,
+			signal: showing.signal,
+			branch
+		});
+		handle.update();
+	}
+	let themeKey = `bud:preview-theme:${project.id}`;
+	let theme = initialTheme(project, themeKey);
+	let topOnlyKey = `bud:preview-top-only:${project.id}`;
+	let topOnly = readPreference(topOnlyKey) === true;
+	let sizes = project.previews.viewports;
+	let several = sizes.length > 1;
+	let viewportKey = `bud:canvas-viewport:${project.id}`;
+	let storedViewport = readPreference(viewportKey);
+	let viewport = several && typeof storedViewport === "string" && (storedViewport === "all" || sizes.some((size) => size.id === storedViewport)) ? storedViewport : several ? "all" : sizes[0].id;
+	function show(next) {
+		if (next === viewport) return;
+		viewport = next;
+		writePreference(viewportKey, next);
+		handle.update();
+	}
+	function pageArtboards() {
+		let shownSizes = viewport === "all" ? sizes : sizes.filter((size) => size.id === viewport);
+		return project.routes.flatMap((route) => shownSizes.map((size) => ({
+			route,
+			size,
+			artboard: several ? {
+				...route,
+				id: `${route.id}@${size.id}`,
+				pageId: route.id,
+				width: size.width,
+				caption: String(size.width)
+			} : route
+		})));
+	}
+	let compareKey = `bud:canvas-compare:${project.id}`;
+	let comparing = null;
+	let comparison;
+	let slide;
+	function others() {
+		let sets = project.workingTree ? [{
+			value: "",
+			label: "Working tree"
+		}] : [];
+		for (let branch of branches.list.branches) if (branch.active && branch.captured) sets.push({
+			value: branch.name,
+			label: branch.name
+		});
+		return sets.filter((set) => set.value !== (selected ?? ""));
+	}
+	function label(set) {
+		return set ? set : "Working tree";
+	}
+	function startComparing() {
+		let sets = others();
+		let stored = readPreference(compareKey);
+		comparing = sets.find((set) => set.value === stored)?.value ?? sets.find((set) => set.value === (branches.list.main ?? "main"))?.value ?? sets[0]?.value ?? null;
+		slide = void 0;
+		handle.update();
+	}
+	function stopComparing() {
+		comparing = null;
+		slide = void 0;
+		comparison?.controller.abort();
+		comparison = void 0;
+		handle.update();
+	}
+	function compared(after) {
+		if (comparing === null) return void 0;
+		if (!others().some((set) => set.value === comparing)) comparing = others()[0]?.value ?? null;
+		if (comparing === null) return void 0;
+		let key = `${comparing}\0${selected ?? ""}\0${theme}\0${viewport}`;
+		if (comparison?.key === key) return comparison.result;
+		comparison?.controller.abort();
+		let controller = new AbortController();
+		handle.signal.addEventListener("abort", () => controller.abort(), { once: true });
+		let before = createProjectPreviews({
+			project,
+			signal: controller.signal,
+			branch: comparing || null
+		});
+		let result = compareProjectPictures({
+			routes: pageArtboards().map(({ route, size, artboard }) => ({
+				id: artboard.id,
+				page: route.id,
+				size
+			})),
+			before,
+			after,
+			theme,
+			signal: controller.signal,
+			onChange: () => {
+				handle.update();
+			}
+		});
+		comparison = {
+			key,
+			controller,
+			result
+		};
+		return result;
+	}
+	function onShownViewport(thread) {
+		if (!several || viewport === "all") return true;
+		return (sizes.find((size) => size.width === thread.anchor.viewport) ?? sizes[0]).id === viewport;
+	}
+	function shown(threads) {
+		return threads.filter(isCanvasThread).filter((thread) => (thread.anchor.branch ?? home) === selected).filter(onShownViewport);
+	}
+	return () => {
+		if (requestedThread !== handle.props.threadId) {
+			requestedThread = handle.props.threadId;
+			let id = requestedThread;
+			if (id) handle.queueTask(() => {
+				comments.loadThread(id);
+			});
+		}
+		if (!branches.loaded && !branches.error) return /* @__PURE__ */ jsx(Loader, { label: "Loading branches…" });
+		let projectKey = `${project.id}:${project.targetOrigin}:${project.routes.map((route) => route.path).join("|")}`;
+		let snapshot = {
+			...comments.snapshot,
+			threads: shown(comments.snapshot.threads)
+		};
+		let artboards = pageArtboards();
+		let sizeOf = new Map(artboards.map(({ artboard, size }) => [artboard.id, size]));
+		let differences = compared(previews);
+		let beforeLabel = label(comparing);
+		let afterLabel = label(selected);
+		let changed = differences ? artboards.map(({ artboard }) => artboard).filter((artboard) => differences.get(artboard.id).state === "different") : [];
+		let sides = /* @__PURE__ */ new Map();
+		let differenceArtboards = changed.flatMap((route) => ["before", "after"].map((side) => {
+			let id = `${route.id}#${side}`;
+			sides.set(id, {
+				route,
+				side
+			});
+			return {
+				id,
+				path: route.path,
+				title: route.title,
+				width: route.width,
+				caption: route.caption,
+				compare: {
+					groupId: route.id,
+					groupTitle: route.title,
+					versionLabel: side === "before" ? beforeLabel : afterLabel
+				}
+			};
+		}));
+		let slides = changed.flatMap((route) => {
+			let { regions, after: capture } = differences.get(route.id);
+			let width = capture?.width ?? route.width ?? sizes[0].width;
+			return regions.map((region, index) => ({
+				route,
+				region,
+				index,
+				count: regions.length,
+				width
+			}));
+		});
+		let status = "";
+		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`;
+		}
+		let sets = others();
+		let icon = (size) => size.mobile || size.width < 600 ? "mobile" : size.width < 1100 ? "tablet" : "desktop";
+		let tools = /* @__PURE__ */ jsxs(Fragment, { children: [
+			several ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				sizes.map((size) => /* @__PURE__ */ jsx(IconButton, {
+					tooltip: true,
+					icon: icon(size),
+					label: `Show ${size.name} (${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",
+					active: viewport === "all",
+					mix: on("click", () => show("all"))
+				}),
+				/* @__PURE__ */ jsx(ToolbarSeparator, {})
+			] }) : null,
+			/* @__PURE__ */ jsx(IconButton, {
+				tooltip: true,
+				icon: "compare",
+				label: differences ? "Stop comparing" : "Show differences with another branch",
+				active: Boolean(differences),
+				disabled: !differences && !sets.length,
+				mix: on("click", () => differences ? stopComparing() : startComparing())
+			}),
+			differences ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Select, {
+				label: "Compare with",
+				value: comparing ?? "",
+				options: sets,
+				class: "max-w-48",
+				onChange: (value) => {
+					comparing = value;
+					slide = void 0;
+					writePreference(compareKey, value);
+					handle.update();
+				}
+			}), /* @__PURE__ */ jsx(IconButton, {
+				tooltip: true,
+				icon: "play",
+				label: "Step through the differences",
+				disabled: !slides.length,
+				mix: on("click", () => {
+					slide = 0;
+					handle.update();
+				})
+			})] }) : null
+		] });
+		return /* @__PURE__ */ jsx(WorkspaceLayout, {
+			class: "h-full min-h-0",
+			sidebarLabel: "Branches",
+			mainLabel: "Canvas",
+			drawerOpen: drawer,
+			onDrawerOpenChange: (open) => {
+				drawer = open;
+				handle.update();
+			},
+			onWideChange: (value) => {
+				if (wide === value) return;
+				wide = value;
+				handle.update();
+			},
+			sidebar: /* @__PURE__ */ jsx(BranchSidebar, {
+				working: branches.list.working,
+				workingTree: project.workingTree,
+				branches: branches.list.branches,
+				selected,
+				busy: branches.busy || !branches.loaded,
+				loaded: branches.loaded,
+				error: branches.error,
+				mobile: !wide,
+				onSelect: choose,
+				onActivate: (name, active) => {
+					branches.activate(name, active);
+				},
+				onCapture: (name) => {
+					branches.capture(name);
+				},
+				onClose: () => {
+					drawer = false;
+					handle.update();
+				}
+			}),
+			children: /* @__PURE__ */ jsx(CanvasWorkspace, {
+				artboards: differences ? differenceArtboards : artboards.map(({ artboard }) => artboard),
+				width: sizes[0].width,
+				storageKey: differences ? `bud:camera:${projectKey}:differences:${viewport}` : `bud:camera:${projectKey}:${several ? viewport : sizes[0].width}`,
+				tools,
+				overlay: differences && slide !== void 0 ? /* @__PURE__ */ jsx(DifferenceSlideshow, {
+					slides,
+					index: slide,
+					beforeLabel,
+					afterLabel,
+					onIndex: (index) => {
+						slide = index;
+						handle.update();
+					},
+					onClose: () => {
+						slide = void 0;
+						handle.update();
+					}
+				}) : null,
+				snapshot,
+				capabilities: comments.snapshot.capabilities,
+				commentsUnavailable: differences ? status : (comments.loaded ? !comments.ready : project.storage.threads?.state !== "ready") ? commentsUnavailable : void 0,
+				onLoadThread: comments.loadThread,
+				renderThreadLinks: (thread) => /* @__PURE__ */ jsx(ProjectThreadLinks, {
+					part: "links",
+					project,
+					thread,
+					canLink: comments.snapshot.capabilities.link,
+					busy: comments.busy,
+					onChange: async () => {
+						await comments.load();
+						await comments.loadThread(thread.id, true);
+					}
+				}),
+				renderThreadActions: (thread) => /* @__PURE__ */ jsx(ProjectThreadLinks, {
+					part: "action",
+					project,
+					thread,
+					canLink: comments.snapshot.capabilities.link,
+					busy: comments.busy,
+					onChange: async () => {
+						await comments.load();
+						await comments.loadThread(thread.id, true);
+					}
+				}),
+				initialThreadId: requestedThread,
+				loaded: comments.loaded,
+				busy: comments.busy,
+				error: comments.error,
+				now: comments.now,
+				onWrite: async (change) => {
+					let next = await comments.write(change);
+					return {
+						...next,
+						threads: shown(next.threads)
+					};
+				},
+				onSync: () => comments.sync().catch(() => {}),
+				onReload: comments.load,
+				onCopyThreadLink: (thread) => navigator.clipboard.writeText(new URL(conversationHref(thread.id), window.location.origin).href),
+				interactive: false,
+				branch: selected,
+				theme,
+				onThemeChange: project.previews.themes.length > 1 ? (next) => {
+					theme = next;
+					writePreference(themeKey, next);
+					handle.update();
+				} : void 0,
+				topOnly,
+				onTopOnlyChange: differences ? void 0 : (next) => {
+					topOnly = next;
+					writePreference(topOnlyKey, next);
+					handle.update();
+				},
+				onShowSidebar: wide ? void 0 : () => {
+					drawer = true;
+					handle.update();
+				},
+				sidebarLabel: "Branches",
+				renderArtboard: (route, state) => {
+					let side = sides.get(route.id);
+					if (side) return /* @__PURE__ */ jsx(DifferenceArtboard, {
+						route,
+						side: side.side,
+						label: side.side === "before" ? beforeLabel : afterLabel,
+						regions: differences.get(side.route.id).regions,
+						...state
+					}, `${comparison?.key ?? ""}\0${route.id}`);
+					return /* @__PURE__ */ jsx(PreviewImage, {
+						route,
+						origin: project.targetOrigin,
+						theme,
+						size: sizeOf.get(route.id) ?? sizes[0],
+						topOnly,
+						previews,
+						...state
+					}, `${selected ?? ""}\0${route.id}`);
+				},
+				renderArtboardActions: (route) => selected || differences ? null : /* @__PURE__ */ jsx(PreviewRefresh, {
+					route,
+					previews
+				})
+			}, `${differences ? `${projectKey}:differences` : projectKey}:${viewport}`)
+		});
+	};
+}
+//#endregion
+//#region app/screens/canvas.tsx
+var canvas_default = defineScreen({
+	load: ({ project, signal }) => loadComments(project, signal),
+	render: (comments, { project, conversation }) => /* @__PURE__ */ jsx(ProjectCanvas, {
+		project,
+		comments,
+		threadId: conversation?.id
+	})
+});
+//#endregion
+export { canvas_default as default };