ryugi-artifacts 1.52.0 → 1.53.0

package/dist/viewer-lib/{Canvas-CbzZVjVc.js → Canvas-D0HiqoAc.js}

@@ -1,13 +1,13 @@
 import { n as e } from "./rolldown-runtime-CwxnZyOB.js";
-import { A as t, d as n } from "./PreviewView-BW64tR79.js";
-import { a as r } from "./i18n-DDz6USHU.js";
-import { t as i } from "./tokens.stylex-BTMziPcA.js";
-import { memo as a, useEffect as o, useId as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Maximize2 as m, Repeat as h } from "lucide-react";
-import { motion as g } from "motion/react";
+import { M as t, f as n } from "./PreviewView-shk1mFxD.js";
+import { a as r, o as i } from "./i18n-B-JxB-Bs.js";
+import { t as a } from "./tokens.stylex-CTEpJFiS.js";
+import { memo as o, useEffect as s, useId as c, useLayoutEffect as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Maximize2 as h, Repeat as g } from "lucide-react";
+import { motion as _ } from "motion/react";
 // ../../node_modules/.pnpm/@lobehub+ui@6.10.2_@lobehub+fluent-emoji@5.0.1_react-dom@19.3.1_react@19.3.1__react@19._c51992d23191ae37a7a3822a770bdf83/node_modules/@lobehub/ui/es/stylex/cssVar.stylex.js
-var _ = {
+var v = {
 	borderRadiusOuter: "var(--lobe-border-radius-outer)",
 	colorTextLightSolid: "var(--lobe-color-text-light-solid)",
 	colorWhite: "var(--lobe-color-white)",
@@ -796,27 +796,66 @@ var _ = {
 	controlTmpOutline: "var(--lobe-control-tmp-outline)"
 };
 // src/viewer/lib/play.ts
-function v(e, t) {
+function y(e, t) {
 	let n = new Set(e);
 	return n.delete(t) || n.add(t), n;
 }
-var y = (e, t) => (e[t] ?? 0) > 0, b = (e, t) => e.interactive === !0 && y(t, e.file), x = (e, t, n, r) => `${e}${t}?v=${n}${r > 0 ? `&r=${r}` : ""}`, S = 160, C = [
+var b = (e, t) => (e[t] ?? 0) > 0, x = (e, t) => e.interactive === !0 && b(t, e.file), S = (e, t, n, r) => `${e}${t}?v=${n}${r > 0 ? `&r=${r}` : ""}`, C = 5;
+function w({ split: e, onSplit: t }) {
+	let { t: n } = r(), i = (e) => Math.min(100, Math.max(0, Math.round(e))), a = (e) => {
+		let n = e.currentTarget.parentElement?.getBoundingClientRect();
+		!n || n.width <= 0 || t(i((e.clientX - n.left) / n.width * 100));
+	};
+	return /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ p("span", {
+			className: "x10l6tqk x13vifvy xu96u03 xoegz02 x1gm0aph x1hj3fc7 xm9j1uf x12oqio5 x71mcx3 x8r4el6 x1j6dyjg x1s688f xd4r4e8 x47corl",
+			children: n("verdict.previous")
+		}),
+		/* @__PURE__ */ p("span", {
+			className: "x10l6tqk x13vifvy x1ey2m1c x1at6vp9 x1c7rsn6 x1l2ivya xavjpbr xzkaem6 x47corl",
+			style: { left: `${e}%` }
+		}),
+		/* @__PURE__ */ p("button", {
+			className: "x10l6tqk xwa60dl xoegz02 xvy4d1p xxk0z11 x18xomjl x7wgvq7 xrvj5dj x1ku5rj1 x1717udv xc342km x16rqkct x1l2ivya x1twquvy xw0krtf xfifm61 xo5v014 x7eptgl x67bb7w x5ve5x3 x1hax9zg",
+			"aria-label": n("verdict.compare"),
+			"aria-valuemax": 100,
+			"aria-valuemin": 0,
+			"aria-valuenow": e,
+			"data-chrome": "",
+			role: "slider",
+			style: { left: `${e}%` },
+			type: "button",
+			onKeyDown: (n) => {
+				(n.key === "ArrowLeft" || n.key === "ArrowRight") && (n.preventDefault(), n.stopPropagation(), t(i(e + (n.key === "ArrowLeft" ? -5 : C))));
+			},
+			onPointerDown: (e) => {
+				e.stopPropagation(), e.currentTarget.setPointerCapture(e.pointerId);
+			},
+			onPointerMove: (e) => {
+				e.currentTarget.hasPointerCapture(e.pointerId) && a(e);
+			},
+			children: "⇆"
+		})
+	] });
+}
+// src/viewer/components/VideoPlayer.tsx
+var T = 160, E = [
 	1,
 	1.5,
 	2,
 	.5
-], w = (e) => {
+], D = (e) => {
 	let t = Math.max(0, Math.floor(Number.isFinite(e) ? e : 0));
 	return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`;
 };
-function T({ playing: e }) {
-	return /* @__PURE__ */ f("svg", {
+function O({ playing: e }) {
+	return /* @__PURE__ */ p("svg", {
 		"aria-hidden": "true",
 		fill: "currentColor",
 		height: "16",
 		viewBox: "0 0 24 24",
 		width: "16",
-		children: [!1, !0].map((t) => /* @__PURE__ */ f(g.g, {
+		children: [!1, !0].map((t) => /* @__PURE__ */ p(_.g, {
 			initial: !1,
 			style: { transformOrigin: "12px 12px" },
 			transition: {
@@ -829,29 +868,29 @@ function T({ playing: e }) {
 				scale: e === t ? 1 : .25,
 				filter: e === t ? "blur(0px)" : "blur(4px)"
 			},
-			children: t ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("rect", {
+			children: t ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("rect", {
 				height: "16",
 				rx: "1",
 				width: "4",
 				x: "6",
 				y: "4"
-			}), /* @__PURE__ */ f("rect", {
+			}), /* @__PURE__ */ p("rect", {
 				height: "16",
 				rx: "1",
 				width: "4",
 				x: "14",
 				y: "4"
-			})] }) : /* @__PURE__ */ f("path", { d: "M8 4.6c-.9-.5-2 .1-2 1.1v12.6c0 1 1.1 1.6 2 1.1l11-6.3c.9-.5.9-1.7 0-2.2Z" })
+			})] }) : /* @__PURE__ */ p("path", { d: "M8 4.6c-.9-.5-2 .1-2 1.1v12.6c0 1 1.1 1.6 2 1.1l11-6.3c.9-.5.9-1.7 0-2.2Z" })
 		}, String(t)))
 	});
 }
-function E({ src: e, title: t, barScale: n, barWidth: i, onExpand: a }) {
-	let { t: s } = r(), c = l(null), g = l(null), [_, v] = u(!1), [y, b] = u(0), [x, E] = u(0), [D, O] = u(1), [k, A] = u(!1), [j, M] = u(!1);
-	o(() => {
-		let e = c.current;
+function k({ src: e, title: t, barScale: n, barWidth: i, onExpand: a, onLoadedData: o }) {
+	let { t: c } = r(), l = u(null), _ = u(null), [v, y] = d(!1), [b, x] = d(0), [S, C] = d(0), [w, k] = d(1), [A, j] = d(!1), [M, N] = d(!1);
+	s(() => {
+		let e = l.current;
 		if (!e) return;
 		let t = () => {
-			M(!1), b(e.currentTime), E(e.duration), v(!e.paused);
+			N(!1), x(e.currentTime), C(e.duration), y(!e.paused);
 		}, n = [
 			"loadedmetadata",
 			"timeupdate",
@@ -859,60 +898,61 @@ function E({ src: e, title: t, barScale: n, barWidth: i, onExpand: a }) {
 			"pause",
 			"ended",
 			"seeked"
-		], r = () => M(!0);
+		], r = () => N(!0);
 		for (let r of n) e.addEventListener(r, t);
 		return e.addEventListener("error", r), () => {
 			for (let r of n) e.removeEventListener(r, t);
 			e.removeEventListener("error", r);
 		};
 	}, []);
-	let N = () => {
-		let e = c.current;
-		e && (e.paused ? e.play().catch(() => v(!e.paused)) : e.pause());
-	}, P = () => {
-		let e = C[(C.indexOf(D) + 1) % C.length];
-		c.current && (c.current.playbackRate = e), O(e);
+	let P = () => {
+		let e = l.current;
+		e && (e.paused ? e.play().catch(() => y(!e.paused)) : e.pause());
 	}, F = () => {
-		c.current && (c.current.loop = !k), A(!k);
-	}, I = (e) => {
-		let t = c.current;
+		let e = E[(E.indexOf(w) + 1) % E.length];
+		l.current && (l.current.playbackRate = e), k(e);
+	}, I = () => {
+		l.current && (l.current.loop = !A), j(!A);
+	}, L = (e) => {
+		let t = l.current;
 		if (!t || !Number.isFinite(t.duration) || t.duration <= 0) return;
 		let n = e.currentTarget.getBoundingClientRect();
-		t.currentTime = Math.min(1, Math.max(0, (e.clientX - n.left) / n.width)) * t.duration, b(t.currentTime);
+		t.currentTime = Math.min(1, Math.max(0, (e.clientX - n.left) / n.width)) * t.duration, x(t.currentTime);
 	};
-	return /* @__PURE__ */ p(d, { children: [
-		/* @__PURE__ */ f("video", {
+	return /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ p("video", {
 			muted: !0,
 			playsInline: !0,
 			preload: "metadata",
-			ref: c,
+			ref: l,
 			src: e,
 			title: t,
+			onLoadedData: o,
 			className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq x19kjcj4 x1hpxl24 x47corl"
 		}),
-		/* @__PURE__ */ f("button", {
+		/* @__PURE__ */ p("button", {
 			"data-video-surface": !0,
-			"aria-label": s(_ ? "video.pauseTitle" : "video.playTitle", { title: t }),
+			"aria-label": c(v ? "video.pauseTitle" : "video.playTitle", { title: t }),
 			type: "button",
 			onClick: (e) => {
-				(!e.detail || !g.current || Math.hypot(e.clientX - g.current.x, e.clientY - g.current.y) < 4) && N(), g.current = null;
+				(!e.detail || !_.current || Math.hypot(e.clientX - _.current.x, e.clientY - _.current.y) < 4) && P(), _.current = null;
 			},
 			onKeyDown: (e) => {
 				(e.key === " " || e.key === "Enter") && e.stopPropagation();
 			},
 			onPointerDown: (e) => {
-				g.current = {
+				_.current = {
 					x: e.clientX,
 					y: e.clientY
 				};
 			},
 			className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1717udv xc342km xjbqb8w x1ypdohk x1t137rt x9v5kkp x1de99jn x1af67cj x1v57pqu"
 		}),
-		j && /* @__PURE__ */ f("div", {
+		M && /* @__PURE__ */ p("div", {
 			className: "x10l6tqk x10a8y8t xrvj5dj x1ku5rj1 x1tamke2 x193dt0t xyxeb8y xqfszdh x4z9k3i x2b8uid x47corl",
-			children: s("video.failed")
+			children: c("video.failed")
 		}),
-		i >= S && /* @__PURE__ */ p("div", {
+		i >= T && /* @__PURE__ */ m("div", {
 			"data-chrome": "video-controls",
 			onPointerDown: (e) => e.stopPropagation(),
 			className: "x10l6tqk xu96u03 xdsb8wn xc9qbxq x9f619 x78zum5 x6s0dn4 x1v2ro7d xaope02 x1hj3fc7 x193dt0t x178xt8z x13fuv20 xyky8oz x1fh8tye x1fao0z8 x1j6dyjg x67bb7w xt0e3qv x87ps6o",
@@ -921,86 +961,194 @@ function E({ src: e, title: t, barScale: n, barWidth: i, onExpand: a }) {
 				transform: `scale(${n})`
 			},
 			children: [
-				/* @__PURE__ */ f("button", {
-					"aria-label": s(_ ? "video.pause" : "video.play"),
+				/* @__PURE__ */ p("button", {
+					"aria-label": c(v ? "video.pause" : "video.play"),
 					type: "button",
-					onClick: N,
+					onClick: P,
 					className: "x2lah0s xrvj5dj x1ku5rj1 x1717udv xc342km xjbqb8w xagcll2 xazlcq2 xjb2p0i x1j6dyjg x1ypdohk",
-					children: /* @__PURE__ */ f(T, { playing: _ })
+					children: /* @__PURE__ */ p(O, { playing: v })
 				}),
-				/* @__PURE__ */ p("span", {
+				/* @__PURE__ */ m("span", {
 					className: "x2lah0s xss6m8b",
 					children: [
-						w(y),
+						D(b),
 						" / ",
-						w(x)
+						D(S)
 					]
 				}),
-				/* @__PURE__ */ p("div", {
-					"aria-label": s("video.progress"),
-					"aria-valuemax": Math.round(x || 0),
+				/* @__PURE__ */ m("div", {
+					"aria-label": c("video.progress"),
+					"aria-valuemax": Math.round(S || 0),
 					"aria-valuemin": 0,
-					"aria-valuenow": Math.round(y),
+					"aria-valuenow": Math.round(b),
 					role: "slider",
 					tabIndex: 0,
 					onPointerDown: (e) => {
-						e.currentTarget.setPointerCapture?.(e.pointerId), I(e);
+						e.currentTarget.setPointerCapture?.(e.pointerId), L(e);
 					},
 					onPointerMove: (e) => {
-						e.buttons === 1 && I(e);
+						e.buttons === 1 && L(e);
 					},
 					className: "x1n2onr6 x98rzlu x1v9usgg x78zum5 x6s0dn4 x1ypdohk",
-					children: [/* @__PURE__ */ f("span", { className: "x10l6tqk xu96u03 x3m8u43 xuoj239 x1q6ipvf" }), /* @__PURE__ */ f("span", {
+					children: [/* @__PURE__ */ p("span", { className: "x10l6tqk xu96u03 x3m8u43 xuoj239 x1q6ipvf" }), /* @__PURE__ */ p("span", {
 						className: "x10l6tqk xu96u03 xuoj239 x1l2ivya",
-						style: { width: `${x > 0 ? y / x * 100 : 0}%` }
+						style: { width: `${S > 0 ? b / S * 100 : 0}%` }
 					})]
 				}),
-				/* @__PURE__ */ p("button", {
-					"aria-label": s("video.speed"),
+				/* @__PURE__ */ m("button", {
+					"aria-label": c("video.speed"),
 					type: "button",
-					onClick: P,
+					onClick: F,
 					className: "x2lah0s xrvj5dj x1ku5rj1 x1717udv xc342km xjbqb8w xagcll2 xazlcq2 xjb2p0i x1j6dyjg x1ypdohk x17s4nb9 x1s688f",
-					children: [D, "×"]
+					children: [w, "×"]
 				}),
-				/* @__PURE__ */ f("button", {
-					"aria-label": s("video.loop"),
-					"aria-pressed": k,
+				/* @__PURE__ */ p("button", {
+					"aria-label": c("video.loop"),
+					"aria-pressed": A,
 					type: "button",
-					onClick: F,
+					onClick: I,
 					...{
 						0: { className: "x2lah0s xrvj5dj x1ku5rj1 x1717udv xc342km xjbqb8w xagcll2 xazlcq2 xjb2p0i x1j6dyjg x1ypdohk" },
 						1: { className: "x2lah0s xrvj5dj x1ku5rj1 x1717udv xc342km xjbqb8w xjb2p0i x1j6dyjg x1ypdohk xymxiyj x1p2l8fb" }
-					}[!k | 0],
-					children: /* @__PURE__ */ f(h, { size: 14 })
+					}[!A | 0],
+					children: /* @__PURE__ */ p(g, { size: 14 })
 				}),
-				a && /* @__PURE__ */ f("button", {
-					"aria-label": s("video.expand"),
+				a && /* @__PURE__ */ p("button", {
+					"aria-label": c("video.expand"),
 					type: "button",
 					onClick: a,
 					className: "x2lah0s xrvj5dj x1ku5rj1 x1717udv xc342km xjbqb8w xagcll2 xazlcq2 xjb2p0i x1j6dyjg x1ypdohk",
-					children: /* @__PURE__ */ f(m, { size: 13 })
+					children: /* @__PURE__ */ p(h, { size: 13 })
 				})
 			]
 		})
 	] });
 }
 // src/viewer/components/MediaBoard.tsx
-function D({ id: e, board: t, src: n, zoom: r, onExpand: i }) {
-	return t.type === "video" ? /* @__PURE__ */ f(E, {
+var A = (e) => `inset(0 ${100 - e}% 0 0)`;
+function j(e, t, n) {
+	return t === e.src ? !n && e.previous ? {
+		...e,
+		previous: null
+	} : e : {
+		src: t,
+		loaded: null,
+		previous: n && e.loaded === e.src ? e.src : null
+	};
+}
+function M({ id: e, board: t, src: n, zoom: r, compare: i = !1, onExpand: a }) {
+	let [o, s] = d({
+		src: n,
+		loaded: null,
+		previous: null
+	}), [c, l] = d(50), u = j(o, n, i);
+	u !== o && s(u);
+	let f = (e) => () => s((t) => t.src === e ? {
+		...t,
+		loaded: e
+	} : t), h = t.title ?? e, g = (e, n) => t.type === "video" ? /* @__PURE__ */ p(k, {
 		barScale: 1 / r,
 		barWidth: t.w * r,
-		src: n,
-		title: t.title ?? e,
-		onExpand: i
-	}) : /* @__PURE__ */ f("img", {
-		alt: t.title ?? e,
+		src: e,
+		title: h,
+		onExpand: n ? a : void 0,
+		onLoadedData: n ? f(e) : void 0
+	}) : /* @__PURE__ */ p("img", {
+		alt: h,
 		draggable: !1,
-		src: n,
+		src: e,
+		onLoad: n ? f(e) : void 0,
 		className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq x19kjcj4 x1l2ivya x47corl"
+	}), _ = u.previous;
+	return /* @__PURE__ */ m("div", {
+		"data-compare": _ ? "" : void 0,
+		className: "x10l6tqk x10a8y8t",
+		children: [[u.src, _].map((e) => e === null ? null : /* @__PURE__ */ p("div", {
+			...{
+				0: { className: "x10l6tqk x10a8y8t" },
+				1: { className: "x10l6tqk x10a8y8t x47corl xhtitgo" }
+			}[e === _ | 0],
+			style: e === _ ? { clipPath: A(c) } : void 0,
+			children: g(e, e === u.src)
+		}, e)), _ && /* @__PURE__ */ p(w, {
+			split: c,
+			onSplit: l
+		})]
+	});
+}
+// src/viewer/components/updated-styles.ts
+var N = {
+	slot: {
+		k3XXqK: "xaatb59",
+		kjBf7l: "xu54md5",
+		kMeerF: "x1lpb9l1",
+		kInvED: "x1yiyjb3",
+		$$css: !0
+	},
+	badge: {
+		kVAEAm: "x10l6tqk",
+		k87sOh: "x13vifvy",
+		kCIrl2: "x3m8u43",
+		kY2c9j: "xhtitgo",
+		k3aq6I: "x1mgnlrf",
+		k3nNDw: "x12t5ck7",
+		kg3NbH: "xm9j1uf",
+		kaIpWk: "x12oqio5",
+		kWkggS: "x1c2n0v",
+		kMwMTN: "x8r4el6",
+		kGuDYH: "x1j6dyjg",
+		k63SB2: "x1s688f",
+		kLWn49: "xd4r4e8",
+		kfzvcC: "x47corl",
+		$$css: !0
+	},
+	pill: {
+		k1xSpc: "x3nfvp2",
+		kGNEyG: "x6s0dn4",
+		kOIVth: "x1jnr06f",
+		keTefX: "xdzw4kq",
+		kg3NbH: "xlkn9b3",
+		kaIpWk: "x1e6avla",
+		kWkggS: "x1oaqgua",
+		kMwMTN: "xotqas5",
+		k63SB2: "xk50ysn",
+		kmuXW: "x2lah0s",
+		$$css: !0
+	},
+	dot: {
+		kzqmXN: "x1ftt334",
+		kZKoxP: "x1ycjhwn",
+		kaIpWk: "x16rqkct",
+		kWkggS: "x1c2n0v",
+		$$css: !0
+	}
+}, P = (e, t) => new Date(e).toLocaleTimeString(t, {
+	hour: "2-digit",
+	minute: "2-digit",
+	hour12: !1
+});
+// src/viewer/components/UpdatedMarks.tsx
+function F() {
+	let { t: e } = r();
+	return /* @__PURE__ */ p("span", {
+		"data-updated-badge": "",
+		...i(N.badge),
+		children: e("verdict.newBadge")
+	});
+}
+function I({ update: e }) {
+	let { t, i18n: n } = r();
+	return /* @__PURE__ */ m("span", {
+		"data-updated-pill": "",
+		...i(N.pill),
+		children: [/* @__PURE__ */ p("span", { ...i(N.dot) }), t("verdict.updated", {
+			time: P(e.at, n.language),
+			count: e.boards.length
+		})]
 	});
 }
 // src/shared/inspector.ts
-var O = [
+var L = [
 	"width",
 	"height",
 	"position",
@@ -1017,9 +1165,9 @@ var O = [
 	"font-size",
 	"color",
 	"box-shadow"
-], k = "#0D99FF", A = "M6.2 3.6C5 2.7 3.4 3.6 3.6 5.1L6 22.7C6.2 24.3 8.2 24.8 9.1 23.5L13 18.3C13.4 17.8 14 17.5 14.6 17.5L21.1 17.3C22.7 17.2 23.4 15.2 22.2 14.3Z", j = "M13 3a9 9 0 0 1 0 18H4.5A1.5 1.5 0 0 1 3 19.5V13A10 10 0 0 1 13 3z", M = (e, t, n) => `url("data:image/svg+xml,${encodeURIComponent(e)}") ${t}, ${n}`, N = M(`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 28 28'><path d='${A}' fill='none' stroke='white' stroke-width='4' stroke-linejoin='round'/><path d='${A}' fill='${k}'/></svg>`, "3 3", "default"), P = M(`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='${j}' fill='none' stroke='white' stroke-width='3' stroke-linejoin='round'/><path d='${j}' fill='${k}'/><path d='M13 8.2v7.6M9.2 12h7.6' stroke='white' stroke-width='2.2' stroke-linecap='round'/></svg>`, "3 21", "crosshair");
+], R = "#0D99FF", z = "M6.2 3.6C5 2.7 3.4 3.6 3.6 5.1L6 22.7C6.2 24.3 8.2 24.8 9.1 23.5L13 18.3C13.4 17.8 14 17.5 14.6 17.5L21.1 17.3C22.7 17.2 23.4 15.2 22.2 14.3Z", B = "M13 3a9 9 0 0 1 0 18H4.5A1.5 1.5 0 0 1 3 19.5V13A10 10 0 0 1 13 3z", V = (e, t, n) => `url("data:image/svg+xml,${encodeURIComponent(e)}") ${t}, ${n}`, H = V(`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 28 28'><path d='${z}' fill='none' stroke='white' stroke-width='4' stroke-linejoin='round'/><path d='${z}' fill='${R}'/></svg>`, "3 3", "default"), U = V(`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='${B}' fill='none' stroke='white' stroke-width='3' stroke-linejoin='round'/><path d='${B}' fill='${R}'/><path d='M13 8.2v7.6M9.2 12h7.6' stroke='white' stroke-width='2.2' stroke-linecap='round'/></svg>`, "3 21", "crosshair");
 // src/viewer/lib/cursorMotion.ts
-function F(e, t) {
+function W(e, t) {
 	let n = e;
 	for (; n.length > 1;) n = n.slice(0, -1).map((e, r) => ({
 		x: e.x + (n[r + 1].x - e.x) * t,
@@ -1027,7 +1175,7 @@ function F(e, t) {
 	}));
 	return n[0];
 }
-function I(e, t, n) {
+function G(e, t, n) {
 	let r = t.x - e.x, i = t.y - e.y, a = -i, o = r;
 	a < 0 && (a = -a, o = -o);
 	let s = (t, n) => ({
@@ -1053,7 +1201,7 @@ function I(e, t, n) {
 		y: 5 * (c[t + 1].y - e.y)
 	})), u = [0], d = e;
 	for (let e = 1; e <= 600; e++) {
-		let t = F(c, e / 600);
+		let t = W(c, e / 600);
 		u.push(u[e - 1] + Math.hypot(t.x - d.x, t.y - d.y)), d = t;
 	}
 	let f = u[600];
@@ -1065,38 +1213,38 @@ function I(e, t, n) {
 				let e = n + r >> 1;
 				u[e] < t ? n = e : r = e;
 			}
-			let i = u[r] - u[n], a = (n + (i ? (t - u[n]) / i : 0)) / 600, o = F(l, a);
+			let i = u[r] - u[n], a = (n + (i ? (t - u[n]) / i : 0)) / 600, o = W(l, a);
 			return {
-				...F(c, a),
+				...W(c, a),
 				angle: Math.atan2(o.y, o.x) * 180 / Math.PI + 135
 			};
 		}
 	};
 }
 // src/viewer/components/WritingCursor.tsx
-function L({ x: e, y: t, zoom: n, agent: r, title: a }) {
-	let o = `agent-${s().replaceAll(/[^\w-]/g, "")}`, u = l(null), d = l(null), m = l(null), h = l(!1), g = l(n), _ = (e) => `translate(${e.x}px, ${e.y}px) scale(${1 / g.current})`, v = (e) => `translate(-3.43px, -3.43px) rotate(${e}deg)`, y = (e) => {
-		m.current = e, u.current && (u.current.style.transform = _(e)), d.current && (d.current.style.transform = v(e.angle));
+function K({ x: e, y: t, zoom: n, agent: r, title: i }) {
+	let o = `agent-${c().replaceAll(/[^\w-]/g, "")}`, s = u(null), d = u(null), f = u(null), h = u(!1), g = u(n), _ = (e) => `translate(${e.x}px, ${e.y}px) scale(${1 / g.current})`, v = (e) => `translate(-3.43px, -3.43px) rotate(${e}deg)`, y = (e) => {
+		f.current = e, s.current && (s.current.style.transform = _(e)), d.current && (d.current.style.transform = v(e.angle));
 	};
-	c(() => {
-		g.current = n, m.current && y(m.current);
-	}, [n]), c(() => {
-		let n = matchMedia("(prefers-reduced-motion: reduce)"), r = m.current, i = 0, a = () => {
+	l(() => {
+		g.current = n, f.current && y(f.current);
+	}, [n]), l(() => {
+		let n = matchMedia("(prefers-reduced-motion: reduce)"), r = f.current, i = 0, a = () => {
 			cancelAnimationFrame(i), i = 0, h.current = !1, y({
 				x: e,
 				y: t,
-				angle: m.current?.angle ?? 0
+				angle: f.current?.angle ?? 0
 			});
 		};
 		if (!r || n.matches || Math.hypot(e - r.x, t - r.y) * g.current < 2) a();
 		else {
-			let n = I(r, {
+			let n = G(r, {
 				x: e,
 				y: t
 			}, h.current ? r.angle : void 0), a = Math.min(1800, 900 + n.length * g.current * 1.2), o = performance.now(), s = o;
 			h.current = !0;
 			let c = (e) => {
-				let t = Math.min(1, Math.max(0, (e - o) / a)), r = n.at(t ** 3 * (t * (t * 6 - 15) + 10)), l = m.current.angle;
+				let t = Math.min(1, Math.max(0, (e - o) / a)), r = n.at(t ** 3 * (t * (t * 6 - 15) + 10)), l = f.current.angle;
 				r.angle = l + (((r.angle - l) % 360 + 540) % 360 - 180) * (1 - Math.exp(-(e - s) / 80)), s = e, h.current = t < 1, y(r), i = t < 1 ? requestAnimationFrame(c) : 0;
 			};
 			i = requestAnimationFrame(c);
@@ -1108,18 +1256,18 @@ function L({ x: e, y: t, zoom: n, agent: r, title: a }) {
 			cancelAnimationFrame(i), n.removeEventListener("change", o);
 		};
 	}, [e, t]);
-	let b = m.current ?? {
+	let b = f.current ?? {
 		x: e,
 		y: t,
 		angle: 0
 	};
-	return /* @__PURE__ */ p("div", {
-		"aria-label": `${r} last worked on ${a}`,
-		ref: u,
+	return /* @__PURE__ */ m("div", {
+		"aria-label": `${r} last worked on ${i}`,
+		ref: s,
 		role: "status",
 		className: "x10l6tqk xu96u03 x13vifvy x1u8a7rm x47corl x1hj3fc7",
 		style: { transform: _(b) },
-		children: [/* @__PURE__ */ p("svg", {
+		children: [/* @__PURE__ */ m("svg", {
 			"aria-hidden": "true",
 			height: "24",
 			ref: d,
@@ -1128,46 +1276,69 @@ function L({ x: e, y: t, zoom: n, agent: r, title: a }) {
 			className: "x1lliihq xqqlr9g x1gtfylx",
 			style: { transform: v(b.angle) },
 			children: [
-				/* @__PURE__ */ f("path", {
-					d: A,
+				/* @__PURE__ */ p("path", {
+					d: z,
 					fill: "none",
-					stroke: i.white,
+					stroke: a.white,
 					strokeLinejoin: "round",
 					strokeWidth: "4"
 				}),
-				/* @__PURE__ */ f("defs", { children: /* @__PURE__ */ p("linearGradient", {
+				/* @__PURE__ */ p("defs", { children: /* @__PURE__ */ m("linearGradient", {
 					id: o,
 					x1: "0",
 					x2: "1",
 					y1: "0",
 					y2: "1",
-					children: [/* @__PURE__ */ f("stop", {
+					children: [/* @__PURE__ */ p("stop", {
 						offset: "0",
-						stopColor: i.selection
-					}), /* @__PURE__ */ f("stop", {
+						stopColor: a.selection
+					}), /* @__PURE__ */ p("stop", {
 						offset: "1",
-						stopColor: i.agent
+						stopColor: a.agent
 					})]
 				}) }),
-				/* @__PURE__ */ f("path", {
-					d: A,
+				/* @__PURE__ */ p("path", {
+					d: z,
 					fill: `url(#${o})`
 				})
 			]
-		}), /* @__PURE__ */ f("span", {
+		}), /* @__PURE__ */ p("span", {
 			className: "x10l6tqk x1trqr8e xv4lvxq x78zum5 x6s0dn4 x1219o5k x1w2h69v x25sj25 x1bjonze xdocmp1 xgs1500 x828b17 x1bqy6mi xqxj4xa x8r4el6 x1j6dyjg x1s688f x152skdk xuxw1ft xmj57et",
 			children: r
 		})]
 	});
 }
 // src/viewer/components/Canvas.tsx
-var R = /* @__PURE__ */ e({ Canvas: () => q });
-function z(e) {
+var q = /* @__PURE__ */ e({ Canvas: () => $ }), J = {
+	slot: {
+		kVAEAm: "x10l6tqk",
+		$$css: !0
+	},
+	skeleton: {
+		k1xSpc: "x78zum5",
+		kGNEyG: "x6s0dn4",
+		kjj79g: "xl56j7k",
+		kVQacm: "xb3r6kr",
+		kWkggS: "xahzvm9",
+		kMeerF: "x1qgsegg",
+		k3XXqK: "xaatb59",
+		kjBf7l: "x1tjb3dp",
+		kfzvcC: "x47corl",
+		$$css: !0
+	},
+	drawing: {
+		k3XXqK: "xaatb59",
+		kjBf7l: "x7vaw5c",
+		kKwaWg: "xsvltah",
+		$$css: !0
+	}
+};
+function Y(e) {
 	if (!e) return {
-		backgroundColor: i.paperWarm,
-		color: i.inkWarm
+		backgroundColor: a.paperWarm,
+		color: a.inkWarm
 	};
-	let t = e.length === 4 ? e.slice(1).split("").map((e) => e + e).join("") : e.slice(1), [n, r, a] = [
+	let t = e.length === 4 ? e.slice(1).split("").map((e) => e + e).join("") : e.slice(1), [n, r, i] = [
 		0,
 		2,
 		4
@@ -1177,11 +1348,11 @@ function z(e) {
 	});
 	return {
 		backgroundColor: e,
-		color: .2126 * n + .7152 * r + .0722 * a > .179 ? i.black : i.white
+		color: .2126 * n + .7152 * r + .0722 * i > .179 ? a.black : a.white
 	};
 }
-var B = /* @__PURE__ */ new Map(), V = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Set();
-function U(e, t, n, r = !1) {
+var ee = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Map(), X = /* @__PURE__ */ new Set(), Z = /* @__PURE__ */ new Map();
+function Q(e, t, n, r = !1) {
 	return {
 		left: e.x,
 		top: e.y,
@@ -1191,9 +1362,9 @@ function U(e, t, n, r = !1) {
 		...n ? r ? { visibility: "hidden" } : { display: "none" } : {}
 	};
 }
-function W({ frameLoaded: e, frameRef: t, gesturing: n, id: r, inspecting: i, playing: a, sandbox: o, src: s, title: c }) {
-	let [l, d] = u(null), p = l !== s, m = !p && !n && (i || a);
-	return /* @__PURE__ */ f("iframe", {
+function ne({ frameLoaded: e, frameRef: t, gesturing: n, id: r, inspecting: i, playing: a, sandbox: o, src: s, title: c }) {
+	let [l, u] = d(null), f = l !== s, m = !f && !n && (i || a);
+	return /* @__PURE__ */ p("iframe", {
 		...{
 			0: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya x1qgsegg xaatb59 x1tjb3dp" },
 			1: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya xaatb59 x1de99jn x7vaw5c" }
@@ -1204,93 +1375,87 @@ function W({ frameLoaded: e, frameRef: t, gesturing: n, id: r, inspecting: i, pl
 		title: c,
 		style: {
 			pointerEvents: m ? "auto" : "none",
-			backgroundColor: p ? _.colorFillTertiary : void 0
+			backgroundColor: f ? v.colorFillTertiary : void 0
 		},
 		onLoad: () => {
-			d(s), e(r);
+			u(s), e(r);
 		}
 	});
 }
-var G = a(function({ boardBase: e, boards: n, boardSandbox: r = "allow-scripts", contentBase: i, culled: a = H, frameLoaded: o, frameRef: s, gesturing: c = !1, images: l = V, inspecting: u, pending: d, phases: m = B, playing: h, replays: g, versions: _, writing: v }) {
-	return n.map(([n, S]) => {
-		if (t(S)) return null;
-		let C = y(_, S.file) && !d.has(n), w = m.get(n) ?? "mounted", T = l.get(n) ?? null, E = !!T && (w === "unloaded" || w === "restoring"), D = C && (w !== "unloaded" || !T), O = n === v;
-		return /* @__PURE__ */ p("div", {
-			"aria-busy": O || void 0,
+var re = o(function({ boardBase: e, boards: n, boardSandbox: r = "allow-scripts", contentBase: a, culled: o = X, frameLoaded: s, frameRef: c, gesturing: l = !1, images: u = te, inspecting: d, pending: f, phases: h = ee, playing: g, replays: _, updated: v = Z, versions: y, writing: C }) {
+	return n.map(([n, w]) => {
+		if (t(w)) return null;
+		let T = v.has(n), E = b(y, w.file) && !f.has(n), D = h.get(n) ?? "mounted", O = u.get(n) ?? null, k = !!O && (D === "unloaded" || D === "restoring"), A = E && (D !== "unloaded" || !O), j = n === C;
+		return /* @__PURE__ */ m("div", {
+			"aria-busy": j || void 0,
 			"data-board": n,
-			...{
-				0: { className: "x10l6tqk" },
-				2: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg xaatb59 x1tjb3dp x47corl" },
-				1: { className: "x10l6tqk xaatb59 x7vaw5c xsvltah" },
-				3: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg x47corl xaatb59 x7vaw5c xsvltah" }
-			}[!C << 1 | !!O],
-			style: U(S, O, a.has(n), w === "capturing"),
+			"data-updated": T || void 0,
+			...i(J.slot, !E && J.skeleton, j && J.drawing, T && N.slot),
+			style: Q(w, j, o.has(n), D === "capturing"),
 			children: [
-				D && /* @__PURE__ */ f(W, {
-					frameLoaded: o,
-					frameRef: s,
-					gesturing: c,
+				T && /* @__PURE__ */ p(F, {}),
+				A && /* @__PURE__ */ p(ne, {
+					frameLoaded: s,
+					frameRef: c,
+					gesturing: l,
 					id: n,
-					inspecting: u,
-					playing: b(S, _) && h.has(n),
+					inspecting: d,
+					playing: x(w, y) && g.has(n),
 					sandbox: r,
-					title: S.title ?? n,
-					src: x(e ?? i, S.file, _[S.file] ?? 0, g[n] ?? 0)
+					title: w.title ?? n,
+					src: S(e ?? a, w.file, y[w.file] ?? 0, _[n] ?? 0)
 				}),
-				E && /* @__PURE__ */ f("img", {
+				k && /* @__PURE__ */ p("img", {
 					alt: "",
 					decoding: "async",
 					draggable: !1,
-					src: T,
+					src: O,
 					className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq x47corl"
 				}),
-				!C && /* @__PURE__ */ f("span", {
+				!E && /* @__PURE__ */ p("span", {
 					className: "x1bo0w0s xqfszdh xfifm61",
-					children: O ? "Drawing…" : "Waiting…"
+					children: j ? "Drawing…" : "Waiting…"
 				})
 			]
 		}, n);
 	});
 });
-function K({ boards: e, contentBase: n, culled: r = H, pending: i, versions: a, writing: o, zoom: s, onExpand: c }) {
-	return e.map(([e, l]) => {
-		if (!t(l)) return null;
-		let u = y(a, l.file) && !i.has(e), d = e === o;
-		return /* @__PURE__ */ f("div", {
-			"aria-busy": d || void 0,
+function ie({ boards: e, contentBase: n, culled: r = X, pending: a, updated: o = Z, versions: s, writing: c, zoom: l, onExpand: u }) {
+	return e.map(([e, d]) => {
+		if (!t(d)) return null;
+		let f = o.has(e), h = b(s, d.file) && !a.has(e), g = e === c;
+		return /* @__PURE__ */ m("div", {
+			"aria-busy": g || void 0,
 			"data-board": e,
-			...{
-				0: { className: "x10l6tqk" },
-				2: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg xaatb59 x1tjb3dp x47corl" },
-				1: { className: "x10l6tqk xaatb59 x7vaw5c xsvltah" },
-				3: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg x47corl xaatb59 x7vaw5c xsvltah" }
-			}[!u << 1 | !!d],
-			style: U(l, d, r.has(e)),
-			children: u ? /* @__PURE__ */ f(D, {
-				board: l,
+			"data-updated": f || void 0,
+			...i(J.slot, !h && J.skeleton, g && J.drawing, f && N.slot),
+			style: Q(d, g, r.has(e)),
+			children: [f && /* @__PURE__ */ p(F, {}), h ? /* @__PURE__ */ p(M, {
+				board: d,
+				compare: o.get(e)?.compare === !0,
 				id: e,
-				src: x(n, l.file, a[l.file] ?? 0, 0),
-				zoom: s,
-				onExpand: c && (() => c(e))
-			}) : /* @__PURE__ */ f("span", {
+				src: S(n, d.file, s[d.file] ?? 0, 0),
+				zoom: l,
+				onExpand: u && (() => u(e))
+			}) : /* @__PURE__ */ p("span", {
 				className: "x1bo0w0s xqfszdh xfifm61",
-				children: d ? "Drawing…" : "Waiting…"
-			})
+				children: g ? "Drawing…" : "Waiting…"
+			})]
 		}, e);
 	});
 }
-function q({ boardBase: e, boardSandbox: r, view: i, worldRef: a, phases: o, images: s, culled: c, gesturing: l, boards: u, notes: d, contentBase: m, versions: h, pending: g, playing: _, replays: v, inspecting: y, frameRef: b, frameLoaded: x, live: S, writing: C, agent: w, onExpand: T }) {
-	let E = C;
-	if (S) {
-		E = void 0;
+function $({ boardBase: e, boardSandbox: r, view: i, worldRef: a, phases: o, images: s, culled: c, gesturing: l, boards: u, notes: d, titleRooms: f, contentBase: h, versions: g, pending: _, playing: v, replays: y, inspecting: b, frameRef: x, frameLoaded: S, live: C, writing: w, agent: T, updated: E, onExpand: D }) {
+	let O = w;
+	if (C) {
+		O = void 0;
 		let e = 0;
 		for (let [n, r] of u) {
-			let i = h[r.file] ?? 0;
-			t(r) || g.has(n) || i <= e || (E = n, e = i);
+			let i = g[r.file] ?? 0;
+			t(r) || _.has(n) || i <= e || (O = n, e = i);
 		}
 	}
-	let D = u.find(([e]) => e === E)?.[1];
-	return /* @__PURE__ */ p("div", {
+	let k = u.find(([e]) => e === O)?.[1];
+	return /* @__PURE__ */ m("div", {
 		ref: a,
 		className: "x10l6tqk xu96u03 x13vifvy x1hj3fc7",
 		style: a ? void 0 : {
@@ -1298,36 +1463,38 @@ function q({ boardBase: e, boardSandbox: r, view: i, worldRef: a, phases: o, ima
 			"--zoom": i.k
 		},
 		children: [
-			/* @__PURE__ */ f(G, {
+			/* @__PURE__ */ p(re, {
 				boardBase: e,
 				boardSandbox: r,
 				boards: u,
-				contentBase: m,
+				contentBase: h,
 				culled: c,
-				frameLoaded: x,
-				frameRef: b,
+				frameLoaded: S,
+				frameRef: x,
 				gesturing: l,
 				images: s,
-				inspecting: y,
-				pending: g,
+				inspecting: b,
+				pending: _,
 				phases: o,
-				playing: _,
-				replays: v,
-				versions: h,
-				writing: C,
-				onExpand: T
+				playing: v,
+				replays: y,
+				updated: E,
+				versions: g,
+				writing: w,
+				onExpand: D
 			}),
-			/* @__PURE__ */ f(K, {
+			/* @__PURE__ */ p(ie, {
 				boards: u,
-				contentBase: m,
+				contentBase: h,
 				culled: c,
-				pending: g,
-				versions: h,
-				writing: C,
+				pending: _,
+				updated: E,
+				versions: g,
+				writing: w,
 				zoom: i.k,
-				onExpand: T
+				onExpand: D
 			}),
-			d.map(([e, t]) => t.kind === "title" ? /* @__PURE__ */ f("h2", {
+			d.map(([e, t]) => t.kind === "title" ? /* @__PURE__ */ p("h2", {
 				className: "x10l6tqk x1ghz6dp x1xlr1w8 x1uo3zyz xjat59b xo2rkog x1bd091l",
 				style: {
 					left: t.x,
@@ -1335,10 +1502,10 @@ function q({ boardBase: e, boardSandbox: r, view: i, worldRef: a, phases: o, ima
 					width: t.w,
 					whiteSpace: t.w === void 0 ? "nowrap" : "normal",
 					fontSize: t.size ?? 96,
-					transform: `scale(${n(t.size ?? 96, i.k)})`
+					transform: `scale(${n(t.size ?? 96, i.k, f?.[e] ?? Infinity)})`
 				},
 				children: t.text
-			}, e) : /* @__PURE__ */ f("div", {
+			}, e) : /* @__PURE__ */ p("div", {
 				className: "x10l6tqk x12oqio5 x126k92a xj0a0fe x1pmbvsm",
 				style: {
 					left: t.x,
@@ -1347,18 +1514,18 @@ function q({ boardBase: e, boardSandbox: r, view: i, worldRef: a, phases: o, ima
 					padding: 16,
 					fontSize: 18,
 					lineHeight: "27px",
-					...z(t.color)
+					...Y(t.color)
 				},
 				children: t.text
 			}, e)),
-			D && /* @__PURE__ */ f(L, {
-				agent: w ?? "Agent",
-				title: D.title ?? E,
-				x: D.x + Math.min(64, D.w * .15),
-				y: D.y + Math.min(80, D.h * .2),
+			k && /* @__PURE__ */ p(K, {
+				agent: T ?? "Agent",
+				title: k.title ?? O,
+				x: k.x + Math.min(64, k.w * .15),
+				y: k.y + Math.min(80, k.h * .2),
 				zoom: i.k
 			})
 		]
 	});
 }
-export { N as a, y as c, O as i, b as l, R as n, D as o, P as r, E as s, q as t, v as u };
+export { H as a, M as c, x as d, y as f, L as i, k as l, q as n, I as o, U as r, P as s, $ as t, b as u };