ryugi-artifacts 1.47.0 → 1.48.0

package/dist/viewer-lib/{Canvas-CsAyNFlN.js → Canvas-aHZz21RV.js}

@@ -1,33 +1,33 @@
 import { n as e } from "./rolldown-runtime-5HNE8Q1r.js";
-import { A as t, h as n } from "./PreviewView-DrA6Vyn8.js";
+import { O as t, d as n } from "./PreviewView-Dhif0ukY.js";
 import { a as r } from "./i18n-C0ysopzN.js";
 import { t as i } from "./tokens.stylex-CTBTXJt7.js";
-import { useEffect as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Maximize2 as f, Repeat as p } from "lucide-react";
-import { motion as m } from "motion/react";
+import { memo as a, useEffect as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Maximize2 as p, Repeat as m } from "lucide-react";
+import { motion as h } from "motion/react";
 //#region src/viewer/lib/play.ts
-function h(e, t) {
+function g(e, t) {
 	let n = new Set(e);
 	return n.delete(t) || n.add(t), n;
 }
-var g = (e, t) => (e[t] ?? 0) > 0, _ = (e, t) => e.interactive === !0 && g(t, e.file), v = (e, t, n, r) => `${e}${t}?v=${n}${r > 0 ? `&r=${r}` : ""}`, y = 160, b = [
+var _ = (e, t) => (e[t] ?? 0) > 0, v = (e, t) => e.interactive === !0 && _(t, e.file), y = (e, t, n, r) => `${e}${t}?v=${n}${r > 0 ? `&r=${r}` : ""}`, b = 160, x = [
 	1,
 	1.5,
 	2,
 	.5
-], x = (e) => {
+], S = (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 S({ playing: e }) {
-	return /* @__PURE__ */ u("svg", {
+function C({ playing: e }) {
+	return /* @__PURE__ */ d("svg", {
 		"aria-hidden": "true",
 		fill: "currentColor",
 		height: "16",
 		viewBox: "0 0 24 24",
 		width: "16",
-		children: [!1, !0].map((t) => /* @__PURE__ */ u(m.g, {
+		children: [!1, !0].map((t) => /* @__PURE__ */ d(h.g, {
 			initial: !1,
 			style: { transformOrigin: "12px 12px" },
 			transition: {
@@ -40,25 +40,25 @@ function S({ playing: e }) {
 				scale: e === t ? 1 : .25,
 				filter: e === t ? "blur(0px)" : "blur(4px)"
 			},
-			children: t ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("rect", {
+			children: t ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("rect", {
 				height: "16",
 				rx: "1",
 				width: "4",
 				x: "6",
 				y: "4"
-			}), /* @__PURE__ */ u("rect", {
+			}), /* @__PURE__ */ d("rect", {
 				height: "16",
 				rx: "1",
 				width: "4",
 				x: "14",
 				y: "4"
-			})] }) : /* @__PURE__ */ u("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__ */ d("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 C({ src: e, title: t, barScale: n, barWidth: i, onExpand: o }) {
-	let { t: m } = r(), h = s(null), g = s(null), [_, v] = c(!1), [C, w] = c(0), [T, E] = c(0), [D, O] = c(1), [k, A] = c(!1), [j, M] = c(!1);
-	a(() => {
+function w({ src: e, title: t, barScale: n, barWidth: i, onExpand: a }) {
+	let { t: s } = r(), h = c(null), g = c(null), [_, v] = l(!1), [y, w] = l(0), [T, E] = l(0), [D, O] = l(1), [k, A] = l(!1), [j, M] = l(!1);
+	o(() => {
 		let e = h.current;
 		if (!e) return;
 		let t = () => {
@@ -81,7 +81,7 @@ function C({ src: e, title: t, barScale: n, barWidth: i, onExpand: o }) {
 		let e = h.current;
 		e && (e.paused ? e.play().catch(() => v(!e.paused)) : e.pause());
 	}, P = () => {
-		let e = b[(b.indexOf(D) + 1) % b.length];
+		let e = x[(x.indexOf(D) + 1) % x.length];
 		h.current && (h.current.playbackRate = e), O(e);
 	}, F = () => {
 		h.current && (h.current.loop = !k), A(!k);
@@ -91,8 +91,8 @@ function C({ src: e, title: t, barScale: n, barWidth: i, onExpand: o }) {
 		let n = e.currentTarget.getBoundingClientRect();
 		t.currentTime = Math.min(1, Math.max(0, (e.clientX - n.left) / n.width)) * t.duration, w(t.currentTime);
 	};
-	return /* @__PURE__ */ d(l, { children: [
-		/* @__PURE__ */ u("video", {
+	return /* @__PURE__ */ f(u, { children: [
+		/* @__PURE__ */ d("video", {
 			muted: !0,
 			playsInline: !0,
 			preload: "metadata",
@@ -101,9 +101,9 @@ function C({ src: e, title: t, barScale: n, barWidth: i, onExpand: o }) {
 			title: t,
 			className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq x19kjcj4 x1hpxl24 x47corl"
 		}),
-		/* @__PURE__ */ u("button", {
+		/* @__PURE__ */ d("button", {
 			"data-video-surface": !0,
-			"aria-label": m(_ ? "video.pauseTitle" : "video.playTitle", { title: t }),
+			"aria-label": s(_ ? "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;
@@ -119,11 +119,11 @@ function C({ src: e, title: t, barScale: n, barWidth: i, onExpand: o }) {
 			},
 			className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1717udv xc342km xjbqb8w x1ypdohk x1t137rt x9v5kkp x1de99jn x1af67cj x1v57pqu"
 		}),
-		j && /* @__PURE__ */ u("div", {
+		j && /* @__PURE__ */ d("div", {
 			className: "x10l6tqk x10a8y8t xrvj5dj x1ku5rj1 x1tamke2 x193dt0t xyxeb8y xqfszdh x4z9k3i x2b8uid x47corl",
-			children: m("video.failed")
+			children: s("video.failed")
 		}),
-		i >= y && /* @__PURE__ */ d("div", {
+		i >= b && /* @__PURE__ */ f("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",
@@ -132,26 +132,26 @@ function C({ src: e, title: t, barScale: n, barWidth: i, onExpand: o }) {
 				transform: `scale(${n})`
 			},
 			children: [
-				/* @__PURE__ */ u("button", {
-					"aria-label": m(_ ? "video.pause" : "video.play"),
+				/* @__PURE__ */ d("button", {
+					"aria-label": s(_ ? "video.pause" : "video.play"),
 					type: "button",
 					onClick: N,
 					className: "x2lah0s xrvj5dj x1ku5rj1 x1717udv xc342km xjbqb8w xagcll2 xazlcq2 xjb2p0i x1j6dyjg x1ypdohk",
-					children: /* @__PURE__ */ u(S, { playing: _ })
+					children: /* @__PURE__ */ d(C, { playing: _ })
 				}),
-				/* @__PURE__ */ d("span", {
+				/* @__PURE__ */ f("span", {
 					className: "x2lah0s xss6m8b",
 					children: [
-						x(C),
+						S(y),
 						" / ",
-						x(T)
+						S(T)
 					]
 				}),
-				/* @__PURE__ */ d("div", {
-					"aria-label": m("video.progress"),
+				/* @__PURE__ */ f("div", {
+					"aria-label": s("video.progress"),
 					"aria-valuemax": Math.round(T || 0),
 					"aria-valuemin": 0,
-					"aria-valuenow": Math.round(C),
+					"aria-valuenow": Math.round(y),
 					role: "slider",
 					tabIndex: 0,
 					onPointerDown: (e) => {
@@ -161,20 +161,20 @@ function C({ src: e, title: t, barScale: n, barWidth: i, onExpand: o }) {
 						e.buttons === 1 && I(e);
 					},
 					className: "x1n2onr6 x98rzlu x1v9usgg x78zum5 x6s0dn4 x1ypdohk",
-					children: [/* @__PURE__ */ u("span", { className: "x10l6tqk xu96u03 x3m8u43 xuoj239 x1q6ipvf" }), /* @__PURE__ */ u("span", {
+					children: [/* @__PURE__ */ d("span", { className: "x10l6tqk xu96u03 x3m8u43 xuoj239 x1q6ipvf" }), /* @__PURE__ */ d("span", {
 						className: "x10l6tqk xu96u03 xuoj239 x1l2ivya",
-						style: { width: `${T > 0 ? C / T * 100 : 0}%` }
+						style: { width: `${T > 0 ? y / T * 100 : 0}%` }
 					})]
 				}),
-				/* @__PURE__ */ d("button", {
-					"aria-label": m("video.speed"),
+				/* @__PURE__ */ f("button", {
+					"aria-label": s("video.speed"),
 					type: "button",
 					onClick: P,
 					className: "x2lah0s xrvj5dj x1ku5rj1 x1717udv xc342km xjbqb8w xagcll2 xazlcq2 xjb2p0i x1j6dyjg x1ypdohk x17s4nb9 x1s688f",
 					children: [D, "×"]
 				}),
-				/* @__PURE__ */ u("button", {
-					"aria-label": m("video.loop"),
+				/* @__PURE__ */ d("button", {
+					"aria-label": s("video.loop"),
 					"aria-pressed": k,
 					type: "button",
 					onClick: F,
@@ -182,14 +182,14 @@ function C({ src: e, title: t, barScale: n, barWidth: i, onExpand: o }) {
 						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__ */ u(p, { size: 14 })
+					children: /* @__PURE__ */ d(m, { size: 14 })
 				}),
-				o && /* @__PURE__ */ u("button", {
-					"aria-label": m("video.expand"),
+				a && /* @__PURE__ */ d("button", {
+					"aria-label": s("video.expand"),
 					type: "button",
-					onClick: o,
+					onClick: a,
 					className: "x2lah0s xrvj5dj x1ku5rj1 x1717udv xc342km xjbqb8w xagcll2 xazlcq2 xjb2p0i x1j6dyjg x1ypdohk",
-					children: /* @__PURE__ */ u(f, { size: 13 })
+					children: /* @__PURE__ */ d(p, { size: 13 })
 				})
 			]
 		})
@@ -197,14 +197,14 @@ function C({ src: e, title: t, barScale: n, barWidth: i, onExpand: o }) {
 }
 //#endregion
 //#region src/viewer/components/MediaBoard.tsx
-function w({ id: e, board: t, src: n, zoom: r, onExpand: i }) {
-	return t.type === "video" ? /* @__PURE__ */ u(C, {
+function T({ id: e, board: t, src: n, zoom: r, onExpand: i }) {
+	return t.type === "video" ? /* @__PURE__ */ d(w, {
 		barScale: 1 / r,
 		barWidth: t.w * r,
 		src: n,
 		title: t.title ?? e,
 		onExpand: i
-	}) : /* @__PURE__ */ u("img", {
+	}) : /* @__PURE__ */ d("img", {
 		alt: t.title ?? e,
 		draggable: !1,
 		src: n,
@@ -213,7 +213,7 @@ function w({ id: e, board: t, src: n, zoom: r, onExpand: i }) {
 }
 //#endregion
 //#region src/viewer/lib/cursorMotion.ts
-function T(e, t) {
+function E(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,
@@ -221,7 +221,7 @@ function T(e, t) {
 	}));
 	return n[0];
 }
-function E(e, t, n) {
+function D(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) => ({
@@ -247,7 +247,7 @@ function E(e, t, n) {
 		y: 5 * (c[t + 1].y - e.y)
 	})), u = [0], d = e;
 	for (let e = 1; e <= 600; e++) {
-		let t = T(c, e / 600);
+		let t = E(c, e / 600);
 		u.push(u[e - 1] + Math.hypot(t.x - d.x, t.y - d.y)), d = t;
 	}
 	let f = u[600];
@@ -259,9 +259,9 @@ function E(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 = T(l, a);
+			let i = u[r] - u[n], a = (n + (i ? (t - u[n]) / i : 0)) / 600, o = E(l, a);
 			return {
-				...T(c, a),
+				...E(c, a),
 				angle: Math.atan2(o.y, o.x) * 180 / Math.PI + 135
 			};
 		}
@@ -269,7 +269,7 @@ function E(e, t, n) {
 }
 //#endregion
 //#region src/viewer/components/WritingCursor.tsx
-var D = "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", O = [
+var O = "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", k = [
 	{
 		distance: 22,
 		size: 6,
@@ -286,19 +286,19 @@ var D = "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.
 		opacity: .15
 	}
 ];
-function k({ x: e, y: t, zoom: n, agent: r, title: a }) {
-	let c = s(null), l = s(null), f = s(null), p = s(null), m = s(!1), h = s(n), g = (e) => `translate(${e.x}px, ${e.y}px) scale(${1 / h.current})`, _ = (e) => `translate(-3.43px, -3.43px) rotate(${e}deg)`, v = (e) => {
-		if (p.current = e, c.current && (c.current.style.transform = g(e)), l.current && (l.current.style.transform = _(e.angle)), !f.current) return;
-		f.current.style.opacity = m.current ? "1" : "0";
+function A({ x: e, y: t, zoom: n, agent: r, title: a }) {
+	let o = c(null), l = c(null), u = c(null), p = c(null), m = c(!1), h = c(n), g = (e) => `translate(${e.x}px, ${e.y}px) scale(${1 / h.current})`, _ = (e) => `translate(-3.43px, -3.43px) rotate(${e}deg)`, v = (e) => {
+		if (p.current = e, o.current && (o.current.style.transform = g(e)), l.current && (l.current.style.transform = _(e.angle)), !u.current) return;
+		u.current.style.opacity = m.current ? "1" : "0";
 		let t = (e.angle - 135) * Math.PI / 180;
-		O.forEach(({ distance: e, size: n }, r) => {
-			let i = f.current.children[r];
+		k.forEach(({ distance: e, size: n }, r) => {
+			let i = u.current.children[r];
 			i.style.transform = `translate(${-Math.cos(t) * e - n / 2}px, ${-Math.sin(t) * e - n / 2}px)`;
 		});
 	};
-	o(() => {
+	s(() => {
 		h.current = n, p.current && v(p.current);
-	}, [n]), o(() => {
+	}, [n]), s(() => {
 		let n = matchMedia("(prefers-reduced-motion: reduce)"), r = p.current, i = 0, a = () => {
 			cancelAnimationFrame(i), i = 0, m.current = !1, v({
 				x: e,
@@ -308,7 +308,7 @@ function k({ x: e, y: t, zoom: n, agent: r, title: a }) {
 		};
 		if (!r || n.matches || Math.hypot(e - r.x, t - r.y) * h.current < 2) a();
 		else {
-			let n = E(r, {
+			let n = D(r, {
 				x: e,
 				y: t
 			}, m.current ? r.angle : void 0), a = Math.min(1800, 900 + n.length * h.current * 1.2), o = performance.now(), s = o;
@@ -331,20 +331,20 @@ function k({ x: e, y: t, zoom: n, agent: r, title: a }) {
 		y: t,
 		angle: 0
 	};
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ f("div", {
 		"aria-label": `${r} last worked on ${a}`,
-		ref: c,
+		ref: o,
 		role: "status",
 		className: "x10l6tqk xu96u03 x13vifvy x1u8a7rm x47corl x1hj3fc7",
 		style: { transform: g(y) },
 		children: [
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ d("div", {
 				"aria-hidden": "true",
 				"data-trail": "",
-				ref: f,
+				ref: u,
 				className: "x10l6tqk xu96u03 x13vifvy x19991ni x13dflua",
 				style: { opacity: 0 },
-				children: O.map(({ size: e, opacity: t }) => /* @__PURE__ */ u("div", {
+				children: k.map(({ size: e, opacity: t }) => /* @__PURE__ */ d("div", {
 					className: "x10l6tqk xu96u03 x13vifvy x16rqkct x18t3gi2",
 					style: {
 						width: e,
@@ -353,7 +353,7 @@ function k({ x: e, y: t, zoom: n, agent: r, title: a }) {
 					}
 				}, e))
 			}),
-			/* @__PURE__ */ d("svg", {
+			/* @__PURE__ */ f("svg", {
 				"aria-hidden": "true",
 				height: "24",
 				ref: l,
@@ -361,25 +361,25 @@ function k({ x: e, y: t, zoom: n, agent: r, title: a }) {
 				width: "24",
 				className: "x1lliihq xqqlr9g x1gtfylx",
 				style: { transform: _(y.angle) },
-				children: [/* @__PURE__ */ u("path", {
-					d: D,
+				children: [/* @__PURE__ */ d("path", {
+					d: O,
 					fill: "none",
 					stroke: i.white,
 					strokeLinejoin: "round",
 					strokeWidth: "4"
-				}), /* @__PURE__ */ u("path", {
-					d: D,
+				}), /* @__PURE__ */ d("path", {
+					d: O,
 					className: "x5sgsw0"
 				})]
 			}),
-			/* @__PURE__ */ d("span", {
+			/* @__PURE__ */ f("span", {
 				className: "x10l6tqk x1trqr8e xv4lvxq x78zum5 x6s0dn4 x1219o5k x1w2h69v x25sj25 x7mq5nd x1e6avla xyq41xo x8r4el6 x1j6dyjg x1xlr1w8 x152skdk xuxw1ft xd4kxl2 x1s928wv x1j6awrg x1m1drc7 xnbfe2x x1xrz1ek x17cx49 xx38sju x1k48kgn xmos2qh xddn4f4 x182qafl x1uh4w4t x1ucjry4 x9dktei x2q1x1w x1j4z3rf x1h22ijw x15y3wy1 x13ee8us x1j82dal",
-				children: [/* @__PURE__ */ u("svg", {
+				children: [/* @__PURE__ */ d("svg", {
 					"aria-hidden": "true",
 					height: "9",
 					viewBox: "0 0 12 12",
 					width: "9",
-					children: /* @__PURE__ */ u("path", {
+					children: /* @__PURE__ */ d("path", {
 						d: "M6 1Q6.8 5.2 11 6Q6.8 6.8 6 11Q5.2 6.8 1 6Q5.2 5.2 6 1Z",
 						fill: i.white
 					})
@@ -390,8 +390,8 @@ function k({ x: e, y: t, zoom: n, agent: r, title: a }) {
 }
 //#endregion
 //#region src/viewer/components/Canvas.tsx
-var A = /* @__PURE__ */ e({ Canvas: () => F });
-function j(e) {
+var j = /* @__PURE__ */ e({ Canvas: () => z });
+function M(e) {
 	if (!e) return {
 		backgroundColor: i.paperWarm,
 		color: i.inkWarm
@@ -409,138 +409,173 @@ function j(e) {
 		color: .2126 * n + .7152 * r + .0722 * a > .179 ? i.black : i.white
 	};
 }
-var M = { visibility: "hidden" }, N = { opacity: 0 };
-function P({ image: e, showImage: t, hideFrame: n, frame: r, onError: i }) {
-	let [o, f] = c(null), [p, m] = c(!1), [h, g] = c(!1), _ = s(t);
-	a(() => {
-		if (!t || !o) {
-			m(!1);
-			return;
-		}
-		let e = requestAnimationFrame(() => m(!0));
-		return () => cancelAnimationFrame(e);
-	}, [t, o]), a(() => {
-		let e = _.current;
-		if (_.current = t, t || !e) return;
-		g(!0);
-		let n = requestAnimationFrame(() => {
-			n = requestAnimationFrame(() => g(!1));
-		});
-		return () => cancelAnimationFrame(n);
-	}, [t]);
-	let v = t || h, y = e ? o && o !== e ? [o, e] : [e] : [];
-	return /* @__PURE__ */ d(l, { children: [r?.(n && p), y.map((t) => /* @__PURE__ */ u("img", {
-		alt: "",
-		decoding: "async",
-		draggable: !1,
-		src: t,
-		style: v && t === o ? void 0 : M,
-		onError: t === e ? () => i(e) : void 0,
-		onLoad: t === e ? (t) => {
-			(t.currentTarget.decode?.() ?? Promise.resolve()).catch(() => void 0).then(() => f(e));
-		} : void 0,
-		className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq x47corl"
-	}, t))] });
+var N = /* @__PURE__ */ new Map(), P = /* @__PURE__ */ new Map(), F = /* @__PURE__ */ new Set();
+function I(e, t, n, r = !1) {
+	return {
+		left: e.x,
+		top: e.y,
+		width: e.w,
+		height: e.h,
+		...t ? { outlineWidth: "calc(2px / var(--zoom, 1))" } : {},
+		...n ? r ? { visibility: "hidden" } : { display: "none" } : {}
+	};
 }
-function F({ view: e, renders: r, boards: i, notes: a, contentBase: o, versions: s, pending: c, playing: f, replays: p, inspecting: m, frameRef: h, frameLoaded: y, live: b, writing: x, agent: S, onExpand: C, onImageError: T }) {
-	let E = x;
-	if (b) {
+var L = a(function({ boardBase: e, boards: n, boardSandbox: r = "allow-scripts", contentBase: i, culled: a = F, frameLoaded: o, frameRef: s, gesturing: c = !1, images: l = P, inspecting: u, pending: p, phases: m = N, playing: h, replays: g, versions: b, writing: x }) {
+	return n.map(([n, S]) => {
+		if (t(S)) return null;
+		let C = _(b, S.file) && !p.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 === x;
+		return /* @__PURE__ */ f("div", {
+			"aria-busy": O || void 0,
+			"data-board": n,
+			...{
+				0: { className: "x10l6tqk" },
+				2: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg xaatb59 x1tjb3dp x47corl" },
+				1: { className: "x10l6tqk xaatb59 xc6r98 xkizt71" },
+				3: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg x47corl xaatb59 xc6r98 xkizt71" }
+			}[!C << 1 | !!O],
+			style: I(S, O, a.has(n), w === "capturing"),
+			children: [
+				D && /* @__PURE__ */ d("iframe", {
+					ref: s(n),
+					sandbox: r,
+					style: c ? { pointerEvents: "none" } : void 0,
+					title: S.title ?? n,
+					src: y(e ?? i, S.file, b[S.file] ?? 0, g[n] ?? 0),
+					onLoad: () => o(n),
+					...{
+						0: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya x47corl x1qgsegg xaatb59 x1tjb3dp" },
+						4: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya x1qgsegg xaatb59 x1tjb3dp x67bb7w" },
+						2: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya xaatb59 x67bb7w x1de99jn xc6r98" },
+						6: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya xaatb59 x67bb7w x1de99jn xc6r98" },
+						1: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya x1qgsegg xaatb59 x1tjb3dp x47corl" },
+						5: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya x1qgsegg xaatb59 x1tjb3dp x47corl" },
+						3: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya xaatb59 x1de99jn xc6r98 x47corl" },
+						7: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya xaatb59 x1de99jn xc6r98 x47corl" }
+					}[!!u << 2 | !!(v(S, b) && h.has(n)) << 1 | !!c]
+				}),
+				E && /* @__PURE__ */ d("img", {
+					alt: "",
+					decoding: "async",
+					draggable: !1,
+					src: T,
+					className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq x47corl"
+				}),
+				!C && /* @__PURE__ */ d("span", {
+					className: "x1bo0w0s xqfszdh xfifm61",
+					children: O ? "Drawing…" : "Waiting…"
+				})
+			]
+		}, n);
+	});
+});
+function R({ boards: e, contentBase: n, culled: r = F, pending: i, versions: a, writing: o, zoom: s, onExpand: c }) {
+	return e.map(([e, l]) => {
+		if (!t(l)) return null;
+		let u = _(a, l.file) && !i.has(e), f = e === o;
+		return /* @__PURE__ */ d("div", {
+			"aria-busy": f || void 0,
+			"data-board": e,
+			...{
+				0: { className: "x10l6tqk" },
+				2: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg xaatb59 x1tjb3dp x47corl" },
+				1: { className: "x10l6tqk xaatb59 xc6r98 xkizt71" },
+				3: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg x47corl xaatb59 xc6r98 xkizt71" }
+			}[!u << 1 | !!f],
+			style: I(l, f, r.has(e)),
+			children: u ? /* @__PURE__ */ d(T, {
+				board: l,
+				id: e,
+				src: y(n, l.file, a[l.file] ?? 0, 0),
+				zoom: s,
+				onExpand: c && (() => c(e))
+			}) : /* @__PURE__ */ d("span", {
+				className: "x1bo0w0s xqfszdh xfifm61",
+				children: f ? "Drawing…" : "Waiting…"
+			})
+		}, e);
+	});
+}
+function z({ boardBase: e, boardSandbox: r, view: i, worldRef: a, phases: o, images: s, culled: c, gesturing: l, boards: u, notes: p, 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;
 		let e = 0;
-		for (let [n, r] of i) {
-			let i = s[r.file] ?? 0;
-			t(r) || c.has(n) || i <= e || (E = n, e = i);
+		for (let [n, r] of u) {
+			let i = h[r.file] ?? 0;
+			t(r) || g.has(n) || i <= e || (E = n, e = i);
 		}
 	}
-	let D = i.find(([e]) => e === E)?.[1];
-	return /* @__PURE__ */ d("div", {
+	let D = u.find(([e]) => e === E)?.[1];
+	return /* @__PURE__ */ f("div", {
+		ref: a,
 		className: "x10l6tqk xu96u03 x13vifvy x1hj3fc7",
-		style: { transform: `translate(${e.x}px, ${e.y}px) scale(${e.k})` },
+		style: a ? void 0 : {
+			transform: `translate(${i.x}px, ${i.y}px) scale(${i.k})`,
+			"--zoom": i.k
+		},
 		children: [
-			i.map(([n, i]) => {
-				let a = g(s, i.file) && !c.has(n), b = a ? r.get(n) : void 0, S = t(i), E = S ? !!b && (b.tier !== "empty" || f.has(n)) : !!b?.mounted, D = S ? null : b?.image ?? null, O = n === x, k = {
-					left: i.x,
-					top: i.y,
-					width: i.w,
-					height: i.h
-				};
-				return /* @__PURE__ */ u("div", {
-					"aria-busy": O || void 0,
-					"data-board": n,
-					...{
-						0: { className: "x10l6tqk" },
-						2: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg xaatb59 x1tjb3dp x47corl" },
-						1: { className: "x10l6tqk xaatb59 xc6r98 xkizt71" },
-						3: { className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k xb3r6kr xahzvm9 x1qgsegg x47corl xaatb59 xc6r98 xkizt71" }
-					}[!E << 1 | !!O],
-					style: {
-						...k,
-						...O ? { outlineWidth: 2 / e.k } : {}
-					},
-					children: E && S ? /* @__PURE__ */ u(w, {
-						board: i,
-						id: n,
-						src: v(o, i.file, s[i.file] ?? 0, 0),
-						zoom: e.k,
-						onExpand: C && (() => C(n))
-					}) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(P, {
-						hideFrame: !!b?.hidden,
-						image: D,
-						showImage: !E || !!b?.overlay,
-						frame: E ? (e) => /* @__PURE__ */ u("iframe", {
-							ref: h(n),
-							sandbox: "allow-scripts",
-							style: e ? N : void 0,
-							title: i.title ?? n,
-							src: v(o, i.file, s[i.file] ?? 0, p[n] ?? 0),
-							onLoad: () => y(n),
-							...{
-								0: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya x47corl x1qgsegg xaatb59 x1tjb3dp" },
-								2: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya x1qgsegg xaatb59 x1tjb3dp x67bb7w" },
-								1: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya xaatb59 x67bb7w x1de99jn xc6r98" },
-								3: { className: "x10l6tqk x10a8y8t xh8yej3 x5yr21d x1lliihq xc342km x1l2ivya xaatb59 x67bb7w x1de99jn xc6r98" }
-							}[!!m << 1 | !!(_(i, s) && f.has(n))]
-						}) : null,
-						onError: (e) => T?.(n, e)
-					}), !a && /* @__PURE__ */ u("span", {
-						className: "x1bo0w0s xqfszdh xfifm61",
-						children: O ? "Drawing…" : "Waiting…"
-					})] })
-				}, n);
+			/* @__PURE__ */ d(L, {
+				boardBase: e,
+				boardSandbox: r,
+				boards: u,
+				contentBase: m,
+				culled: c,
+				frameLoaded: x,
+				frameRef: b,
+				gesturing: l,
+				images: s,
+				inspecting: y,
+				pending: g,
+				phases: o,
+				playing: _,
+				replays: v,
+				versions: h,
+				writing: C,
+				onExpand: T
+			}),
+			/* @__PURE__ */ d(R, {
+				boards: u,
+				contentBase: m,
+				culled: c,
+				pending: g,
+				versions: h,
+				writing: C,
+				zoom: i.k,
+				onExpand: T
 			}),
-			a.map(([t, r]) => r.kind === "title" ? /* @__PURE__ */ u("h2", {
+			p.map(([e, t]) => t.kind === "title" ? /* @__PURE__ */ d("h2", {
 				className: "x10l6tqk x1ghz6dp x1xlr1w8 x1uo3zyz xjat59b xo2rkog x1bd091l",
 				style: {
-					left: r.x,
-					top: r.y,
-					width: r.w,
-					whiteSpace: r.w === void 0 ? "nowrap" : "normal",
-					fontSize: r.size ?? 96,
-					transform: `scale(${n(r.size ?? 96, e.k)})`
+					left: t.x,
+					top: t.y,
+					width: t.w,
+					whiteSpace: t.w === void 0 ? "nowrap" : "normal",
+					fontSize: t.size ?? 96,
+					transform: `scale(${n(t.size ?? 96, i.k)})`
 				},
-				children: r.text
-			}, t) : /* @__PURE__ */ u("div", {
+				children: t.text
+			}, e) : /* @__PURE__ */ d("div", {
 				className: "x10l6tqk x12oqio5 x126k92a xj0a0fe x1pmbvsm",
 				style: {
-					left: r.x,
-					top: r.y,
-					width: r.w ?? 240,
+					left: t.x,
+					top: t.y,
+					width: t.w ?? 240,
 					padding: 16,
 					fontSize: 18,
 					lineHeight: "27px",
-					...j(r.color)
+					...M(t.color)
 				},
-				children: r.text
-			}, t)),
-			D && /* @__PURE__ */ u(k, {
-				agent: S ?? "Agent",
+				children: t.text
+			}, e)),
+			D && /* @__PURE__ */ d(A, {
+				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),
-				zoom: e.k
+				zoom: i.k
 			})
 		]
 	});
 }
 //#endregion
-export { g as a, C as i, A as n, _ as o, w as r, h as s, F as t };
+export { _ as a, w as i, j as n, v as o, T as r, g as s, z as t };