@gtsx/studio 0.0.1

package/dist/chunks/client-entry-6rzfPqgF.js

@@ -0,0 +1,3973 @@
+import { G_PREVIEW_PROTOCOL_VERSION as e, createGPreviewRenderMessage as t, createGPreviewRequestValuesMessage as n, createGScopeHook as r, defineGComponent as i } from "@gtsx/core";
+import a from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { flushSync as l } from "react-dom";
+//#region src/preview-frame-layout.ts
+var u = 16;
+function d(e, t) {
+	if (!t) return e.height;
+	let n = h(e, t);
+	return Math.max(1, Math.ceil(t.height + n.top + n.bottom));
+}
+function f(e, t) {
+	if (!t) return e.width;
+	let n = h(e, t);
+	return Math.max(1, Math.ceil(t.width + n.left + n.right));
+}
+function p(e, t) {
+	return {
+		x: Math.max(0, Math.floor(e?.x ?? 0) - t.left),
+		y: Math.max(0, Math.floor(e?.y ?? 0) - t.top)
+	};
+}
+function m(e, t) {
+	if (e) return {
+		x: t.left,
+		y: t.top,
+		width: e.width,
+		height: e.height
+	};
+}
+function h(e, t) {
+	if (!t) return {
+		bottom: 0,
+		left: 0,
+		right: 0,
+		top: 0
+	};
+	let n = typeof e.width == "number" ? e.width : Infinity;
+	return {
+		bottom: Math.min(u, Math.max(0, (e.height ?? Infinity) - t.y - t.height)),
+		left: Math.min(u, Math.max(0, t.x)),
+		right: Math.min(u, Math.max(0, n - t.x - t.width)),
+		top: Math.min(u, Math.max(0, t.y))
+	};
+}
+//#endregion
+//#region src/client.tsx
+var g = "roots";
+function _(t, n) {
+	if (n.protocolVersion !== e || n.sessionId !== t.expectedSessionId) return t;
+	if (n.type === "gtsx:ready") {
+		if (t.ready && !t.error) return t;
+		let e = {
+			...t,
+			ready: !0
+		};
+		return delete e.error, e;
+	}
+	return n.type === "gtsx:tree" ? y(t.tree, n.tree) ? t : {
+		...t,
+		tree: n.tree
+	} : n.type === "gtsx:resize" ? t.size?.width === n.size.width && t.size.height === n.size.height ? t : {
+		...t,
+		size: n.size
+	} : n.type === "gtsx:error" ? t.error?.message === n.error.message && t.error.stack === n.error.stack ? t : {
+		...t,
+		error: n.error
+	} : n.type === "gtsx:values" ? {
+		...t,
+		valuesByBoundaryId: {
+			...t.valuesByBoundaryId,
+			[n.values.boundaryId]: n.values
+		}
+	} : t;
+}
+function v(e, t, n) {
+	if (!n.has(t.sessionId)) return e;
+	let r = e[t.sessionId] ?? {
+		expectedSessionId: t.sessionId,
+		ready: !1
+	}, i = _(r, t);
+	return i === r ? e : {
+		...e,
+		[t.sessionId]: i
+	};
+}
+function y(e, t) {
+	return e === t ? !0 : !e || !t || e.length !== t.length ? !1 : e.every((e, n) => b(e, t[n]));
+}
+function b(e, t) {
+	return t ? e.id === t.id && e.coordinate === t.coordinate && x(e.rect, t.rect) && y(e.children, t.children) : !1;
+}
+function x(e, t) {
+	return e === t || e?.x === t?.x && e?.y === t?.y && e?.width === t?.width && e?.height === t?.height;
+}
+function S(e, t) {
+	return {
+		canvasViewportPreset: "tablet",
+		columns: [{ components: U(e, t).components }],
+		selectedCaseByCoordinate: {},
+		selectedCoordinatePath: [],
+		selectedRuntimeInstanceByCoordinate: {},
+		selectedViewportPresetByCoordinate: {}
+	};
+}
+function C() {
+	return {
+		x: 40,
+		y: 40,
+		scale: 1
+	};
+}
+function w(e, t, n, r, i = {}) {
+	let a = T(e, n, i.columnIndex);
+	if (a < 0) return e;
+	let o = e.columns.slice(0, a + 1), s = [...e.selectedCoordinatePath.slice(0, a), n], c = le(t, ue(r), n);
+	return c.length > 0 && o.push({
+		components: c,
+		parentCoordinate: n
+	}), {
+		canvasViewportPreset: I(e),
+		columns: o,
+		selectedCaseByCoordinate: de(e.selectedCaseByCoordinate, s),
+		selectedCoordinatePath: s,
+		selectedRuntimeInstanceByCoordinate: e.selectedRuntimeInstanceByCoordinate,
+		selectedViewportPresetByCoordinate: e.selectedViewportPresetByCoordinate
+	};
+}
+function T(e, t, n) {
+	return n !== void 0 && e.columns[n]?.components.some((e) => e.coordinate === t) ? n : e.columns.findIndex((e) => e.components.some((e) => e.coordinate === t));
+}
+function E(e, t) {
+	return e.selectedCaseByCoordinate[t.coordinate] ?? t.cases[0]?.name ?? "No cases";
+}
+function D(e, t, n, r = {}) {
+	let i = e.columns.findIndex((e) => e.components.some((e) => e.coordinate === t)), a = r.keepDrilldown || i < 0 ? e.columns : e.columns.slice(0, i + 1);
+	return {
+		canvasViewportPreset: I(e),
+		columns: a,
+		selectedCaseByCoordinate: {
+			...e.selectedCaseByCoordinate,
+			[t]: n
+		},
+		selectedCoordinatePath: r.keepDrilldown || i < 0 ? e.selectedCoordinatePath : [...e.selectedCoordinatePath.slice(0, i), t],
+		selectedRuntimeInstanceByCoordinate: {},
+		selectedViewportPresetByCoordinate: e.selectedViewportPresetByCoordinate
+	};
+}
+function O(e, t, n) {
+	return {
+		...e,
+		selectedRuntimeInstanceByCoordinate: {
+			...e.selectedRuntimeInstanceByCoordinate,
+			[t]: n
+		}
+	};
+}
+function ee(e, t, n) {
+	return {
+		...e,
+		canvasViewportPreset: n,
+		selectedViewportPresetByCoordinate: {
+			...e.selectedViewportPresetByCoordinate,
+			[t]: n
+		}
+	};
+}
+function k(e, t) {
+	return {
+		...e,
+		canvasViewportPreset: t,
+		selectedViewportPresetByCoordinate: {}
+	};
+}
+function A(e, t, n) {
+	let r = new URLSearchParams();
+	e && e !== g && r.set("selection", e);
+	let i = I(t);
+	i !== "tablet" && r.set("canvasViewport", i), we(r, n);
+	for (let e of t.selectedCoordinatePath) r.append("path", e);
+	for (let e of t.selectedCoordinatePath) {
+		let n = t.selectedCaseByCoordinate[e];
+		n && r.append("case", `${e}:${n}`);
+		let i = t.selectedRuntimeInstanceByCoordinate[e];
+		i && r.append("instance", `${e}:${i}`);
+		let a = t.selectedViewportPresetByCoordinate[e];
+		a !== void 0 && r.append("viewport", `${e}:${a}`);
+	}
+	return r;
+}
+function j(e, t) {
+	let n = t.get("selection") ?? void 0, r = me(t), i = U(e, n), a = t.getAll("path"), o = a.filter((t) => !!L(e, t)), s = new Set(o), c = ne(e, t, s), l = M(e, t, s), u = re(e, t, s), d = ie(t, u, o), f = n && n !== i.id || a.length !== o.length || se(e, t, s) || ce(e, t, s) || oe(t) ? "Invalid Studio URL state was ignored." : void 0;
+	return o.length === 0 ? {
+		canvas: r,
+		selection: i.id,
+		workspace: {
+			canvasViewportPreset: d,
+			columns: [{ components: i.components }],
+			selectedCaseByCoordinate: c,
+			selectedCoordinatePath: [],
+			selectedRuntimeInstanceByCoordinate: l,
+			selectedViewportPresetByCoordinate: u
+		},
+		...f ? { warning: f } : {}
+	} : {
+		canvas: r,
+		selection: i.id,
+		workspace: {
+			canvasViewportPreset: d,
+			columns: [{ components: i.components }, ...o.slice(1).map((t) => {
+				let n = L(e, t), r = o.indexOf(t);
+				return {
+					components: n ? [n] : [],
+					parentCoordinate: r > 0 ? o[r - 1] : void 0
+				};
+			})],
+			selectedCaseByCoordinate: c,
+			selectedCoordinatePath: o,
+			selectedRuntimeInstanceByCoordinate: l,
+			selectedViewportPresetByCoordinate: u
+		},
+		...f ? { warning: f } : {}
+	};
+}
+function te(e, t, r) {
+	let i = t.selectedCoordinatePath.at(-1);
+	if (!i) return;
+	let a = L(e, t.selectedCoordinatePath.at(-2) ?? i);
+	if (!a) return;
+	let o = z(a, E(t, a), I(t));
+	return {
+		sessionId: o,
+		message: n(o, r)
+	};
+}
+function ne(e, t, n) {
+	let r = {};
+	for (let i of t.getAll("case")) {
+		let t = N(e, i);
+		if (!t) continue;
+		let a = L(e, t.coordinate);
+		n.has(t.coordinate) && a?.cases.some((e) => e.name === t.value) && (r[t.coordinate] = t.value);
+	}
+	return r;
+}
+function M(e, t, n) {
+	let r = {};
+	for (let i of t.getAll("instance")) {
+		let t = N(e, i);
+		t && n.has(t.coordinate) && L(e, t.coordinate) && (r[t.coordinate] = t.value);
+	}
+	return r;
+}
+function re(e, t, n) {
+	let r = {};
+	for (let i of t.getAll("viewport")) {
+		let t = N(e, i);
+		t && n.has(t.coordinate) && ae(t.value) && (r[t.coordinate] = t.value);
+	}
+	return r;
+}
+function ie(e, t, n) {
+	let r = e.get("canvasViewport");
+	if (r && ae(r)) return r;
+	let i = [...n].reverse().find((e) => t[e]);
+	return i ? t[i] : "tablet";
+}
+function ae(e) {
+	return e === "phone" || e === "tablet" || e === "desktop";
+}
+function oe(e) {
+	let t = e.get("canvasViewport");
+	return !!(t && !ae(t));
+}
+function se(e, t, n) {
+	return t.getAll("case").some((t) => {
+		let r = N(e, t);
+		return !r || !n.has(r.coordinate) ? !0 : !L(e, r.coordinate)?.cases.some((e) => e.name === r.value);
+	});
+}
+function ce(e, t, n) {
+	return t.getAll("instance").some((t) => {
+		let r = N(e, t);
+		return !r || !n.has(r.coordinate);
+	});
+}
+function N(e, t) {
+	let n = e.files.flatMap((e) => e.components).map((e) => e.coordinate).sort((e, t) => t.length - e.length).find((e) => t.startsWith(`${e}:`));
+	if (n) return {
+		coordinate: n,
+		value: t.slice(n.length + 1)
+	};
+}
+function le(e, t, n) {
+	let r = new Map(e.files.flatMap((e) => e.components).map((e) => [e.coordinate, e])), i = /* @__PURE__ */ new Set(), a = [];
+	for (let e of t) {
+		let t = fe(e, n);
+		if (t) for (let e of t.children) {
+			if (i.has(e.coordinate)) continue;
+			let t = r.get(e.coordinate);
+			t && (i.add(e.coordinate), a.push(t));
+		}
+	}
+	return a;
+}
+function ue(e) {
+	return e.length === 0 ? [] : Array.isArray(e[0]) ? e : [e];
+}
+function de(e, t) {
+	let n = new Set(t);
+	return Object.fromEntries(Object.entries(e).filter(([e]) => !n.has(e)));
+}
+function fe(e, t) {
+	for (let n of e) {
+		if (n.coordinate === t) return n;
+		let e = fe(n.children, t);
+		if (e) return e;
+	}
+}
+function pe(e, t) {
+	if (t !== void 0) return new URLSearchParams(t);
+	if (typeof window < "u" && window.location.search) return new URLSearchParams(window.location.search);
+	let n = new URLSearchParams();
+	return e && n.set("selection", e), n;
+}
+function me(e) {
+	let t = C();
+	return {
+		x: Te(e, "canvasX", t.x),
+		y: Te(e, "canvasY", t.y),
+		scale: P(Te(e, "canvasScale", t.scale), Se, Ce)
+	};
+}
+function he(e) {
+	if (typeof window > "u") return;
+	let t = new URLSearchParams(window.location.search);
+	we(t, e);
+	let n = t.toString(), r = `${window.location.pathname}${n ? `?${n}` : ""}`;
+	r !== `${window.location.pathname}${window.location.search}` && window.history.replaceState({ gtsxStudio: !0 }, "", r);
+}
+function ge(e, t, n = {}) {
+	if (typeof window > "u") return;
+	let r = A(e, t, n.canvas ?? me(new URLSearchParams(window.location.search)));
+	xe(r, new URLSearchParams(window.location.search));
+	let i = r.toString(), a = `${window.location.pathname}${i ? `?${i}` : ""}`;
+	a !== `${window.location.pathname}${window.location.search}` && window.history.pushState({ gtsxStudio: !0 }, "", a);
+}
+function _e(e) {
+	let t = be(e);
+	return t.includes("pool") || t.includes("preview-pool") || t.includes("no-pool") || t.includes("disable-pool") || e.get("debugPool") === "1" || ye(e);
+}
+function ve(e) {
+	let t = be(e);
+	return t.includes("queue") || t.includes("preview-queue");
+}
+function ye(e) {
+	let t = be(e), n = e.get("debugPool")?.trim().toLowerCase();
+	return t.includes("no-pool") || t.includes("disable-pool") || t.includes("without-pool") || n === "0" || n === "false" || n === "off";
+}
+function be(e) {
+	return e.getAll("debug").join(",").split(",").map((e) => e.trim()).filter(Boolean);
+}
+function xe(e, t) {
+	for (let n of /* @__PURE__ */ "debug.debugPool.debounce.maximumConcurrentRenderTasks.maximumConcurrentRenderTasksDuringCanvasMovement.maximumRenderTaskCount.minimumVisibleRenderTasksDuringCanvasMovement.previewQueueActiveRenderTimeout.previewQueueActiveRenderTimeoutMilliseconds.previewQueueActive.previewQueueActiveTimeout.previewQueueBufferRenderDelay.previewQueueBufferRenderDelayMilliseconds.previewQueueBuffer.previewQueueDebounce.previewQueueLength.previewQueueMaximumConcurrentRenderTasks.previewQueueMaximumConcurrentRenderTasksDuringCanvasMovement.previewQueueMaximumMountedPreviewSessions.previewQueueMaximumRenderTaskCount.previewQueueMinimumVisibleRenderTasksDuringCanvasMovement.previewQueueVisibleRenderFloor.previewQueueRenderBufferMargin.previewQueueRenderDebounce.previewQueueRenderDebounceMilliseconds.previewQueueRenderThrottle.previewQueueRenderThrottleMilliseconds.previewQueueSafety.previewQueueThrottle.queueActiveRenderTimeout.queueActive.queueActiveTimeout.queueBufferRenderDelay.queueBuffer.queueDebounce.queueLength.queueMaximumConcurrentRenderTasks.queueMaximumConcurrentRenderTasksDuringCanvasMovement.queueMaximumMountedPreviewSessions.queueMaximumRenderTaskCount.queueMinimumVisibleRenderTasksDuringCanvasMovement.queueRenderBufferMargin.queueRenderDebounce.queueRenderThrottle.queueSafety.queueThrottle.queueVisibleRenderFloor.previewBuffer.previewDebounce.previewRenderBufferMargin.previewRenderDebounce.previewRenderThrottle.previewThrottle.throttle".split(".")) {
+		e.delete(n);
+		for (let r of t.getAll(n)) e.append(n, r);
+	}
+}
+function P(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+var Se = .2, Ce = 2.5;
+function we(e, t) {
+	if (e.delete("canvasX"), e.delete("canvasY"), e.delete("canvasScale"), !t) return;
+	let n = C();
+	t.x !== n.x && e.set("canvasX", Ee(t.x)), t.y !== n.y && e.set("canvasY", Ee(t.y)), t.scale !== n.scale && e.set("canvasScale", Ee(t.scale));
+}
+function Te(e, t, n) {
+	let r = e.get(t);
+	if (!r) return n;
+	let i = Number(r);
+	return Number.isFinite(i) ? i : n;
+}
+function Ee(e) {
+	let t = Math.round(e * 1e3) / 1e3;
+	return String(Object.is(t, -0) ? 0 : t);
+}
+function De(e, t) {
+	if (!t.ctrlKey && !t.metaKey) return {
+		...e,
+		x: e.x - t.deltaX,
+		y: e.y - t.deltaY
+	};
+	let n = t.focalViewportX ?? t.clientX - t.viewportLeft, r = t.focalViewportY ?? t.clientY - t.viewportTop, i = (n - e.x) / e.scale, a = (r - e.y) / e.scale, o = -t.deltaY * je(t.deltaMode) * 10, s = P(e.scale * 2 ** o, Se, Ce);
+	return {
+		scale: s,
+		x: n - i * s,
+		y: r - a * s
+	};
+}
+function Oe(e, t) {
+	let n = t.margin ?? 24, r = Me(t.viewportRect, t.blockerRects ?? [], n), i = Ne(t.rect.left, t.rect.right, r.left, r.right), a = Ne(t.rect.top, t.rect.bottom, r.top, r.bottom);
+	return i === 0 && a === 0 ? e : {
+		...e,
+		x: e.x + i,
+		y: e.y + a
+	};
+}
+function ke(e) {
+	let t = e.margin ?? 40, n = {}, r = {};
+	return e.columns.forEach((i, a) => {
+		if (a === 0 || !i.parentCoordinate) n[a] = {
+			x: 0,
+			y: 0
+		};
+		else {
+			let o = Fe(r, a, i.parentCoordinate);
+			if (!o) n[a] = {
+				x: a * t,
+				y: 0
+			};
+			else {
+				let i = e.measurementsByIndex[a]?.height ?? 0, s = o.top;
+				n[a] = {
+					x: (Ie(r, a, s, s + i) ?? o.right) + t,
+					y: o.top
+				};
+			}
+		}
+		r[a] = Pe(e.measurementsByIndex[a]?.cardRectsByCoordinate ?? {}, n[a] ?? {
+			x: 0,
+			y: 0
+		}, i.componentCoordinates);
+	}), n;
+}
+function F(e) {
+	let t = e.gap ?? 14, n = e.caseChromeHeight ?? 20, r = e.maxSide ?? 760, i = e.minScale ?? .24, a = e.items.length > 0 ? e.items : [{
+		height: 160,
+		width: 280
+	}], o = a.length, s = Math.max(1, ...a.map((e) => e.width)), c = Math.max(1, ...a.map((e) => e.height)), l, u = Infinity;
+	for (let a = 1; a <= o; a += 1) {
+		let d = Math.ceil(o / a), f = a * s + (a - 1) * t, p = d * c, m = d * n + (d - 1) * t, h = Math.max(r * i, r - m), g = P(Math.min(1, r / f, h / p), i, 1), _ = e.previewScale === void 0 ? g : P(e.previewScale, i, 1), v = Math.ceil(s * _), y = Math.ceil(n + c * _), b = Math.ceil(a * v + (a - 1) * t), x = Math.ceil(d * y + (d - 1) * t), S = Math.abs(Math.log(b / x)), C = e.previewScale === void 0 ? (1 - _) * .35 : 0, w = (a * d - o) * .08, T = e.previewScale === void 0 ? 0 : Math.max(0, b - r, x - r) / r, E = S + C + w + T * 4;
+		E < u && (u = E, l = {
+			caseChromeHeight: n,
+			cellHeight: y,
+			cellWidth: v,
+			columns: a,
+			gap: t,
+			height: x,
+			previewScale: _,
+			rows: d,
+			width: b
+		});
+	}
+	return l ?? {
+		caseChromeHeight: n,
+		cellHeight: n + 160,
+		cellWidth: 280,
+		columns: 1,
+		gap: t,
+		height: n + 160,
+		previewScale: 1,
+		rows: 1,
+		width: 280
+	};
+}
+function Ae(e, t) {
+	if (t.type !== "clear" && t.source !== "keyboard") return t.coordinate === e ? e : t.coordinate;
+}
+function je(e) {
+	return e === 1 ? .05 : e === 2 ? 1 : .002;
+}
+function Me(e, t, n) {
+	let r = e.left + n, i = e.right - n, a = e.top + n, o = e.bottom - n;
+	for (let s of t) {
+		let t = s.bottom > a && s.top < o, c = s.right > r && s.left < i;
+		if (!t || !c) continue;
+		let l = s.right >= e.right - 1, u = s.left <= e.left + 1, d = s.bottom >= e.bottom - 1, f = s.top <= e.top + 1;
+		if (l || u) {
+			l && (i = Math.min(i, s.left - n)), u && (r = Math.max(r, s.right + n));
+			continue;
+		}
+		d && (o = Math.min(o, s.top - n)), f && (a = Math.max(a, s.bottom + n));
+	}
+	return {
+		bottom: Math.max(a, o),
+		left: r,
+		right: Math.max(r, i),
+		top: a
+	};
+}
+function Ne(e, t, n, r) {
+	return t - e > r - n ? t < n ? n - e : e > r ? r - t : 0 : e < n ? n - e : t > r ? r - t : 0;
+}
+function Pe(e, t, n) {
+	let r = {};
+	for (let i of n) {
+		let n = e[i];
+		n && (r[i] = {
+			bottom: n.bottom + t.y,
+			left: n.left + t.x,
+			right: n.right + t.x,
+			top: n.top + t.y
+		});
+	}
+	return r;
+}
+function Fe(e, t, n) {
+	for (let r = t - 1; r >= 0; --r) {
+		let t = e[r]?.[n];
+		if (t) return t;
+	}
+}
+function Ie(e, t, n, r) {
+	let i;
+	for (let a = 0; a < t; a += 1) for (let t of Object.values(e[a] ?? {})) t.bottom <= n || t.top >= r || (i = i === void 0 ? t.right : Math.max(i, t.right));
+	return i;
+}
+function Le(e, t, n) {
+	let r = t ? fe(t, n)?.rect : void 0;
+	return r ? Math.max(280, Math.ceil(Number(f(e, r)))) : typeof e.width == "number" ? e.width + 28 : 520;
+}
+function Re(e, t) {
+	if (!e) return;
+	let n = typeof t.width == "number" ? t.width : Infinity, r = P(e.x, 0, n), i = P(e.y, 0, t.height), a = P(e.x + e.width, 0, n), o = P(e.y + e.height, 0, t.height);
+	if (!(a <= r || o <= i)) return {
+		x: r,
+		y: i,
+		width: a - r,
+		height: o - i
+	};
+}
+function I(e) {
+	if (e.canvasViewportPreset) return e.canvasViewportPreset;
+	let t = e.selectedCoordinatePath.at(-1);
+	return t ? e.selectedViewportPresetByCoordinate[t] ?? "tablet" : Object.values(e.selectedViewportPresetByCoordinate)[0] ?? "tablet";
+}
+function ze(e) {
+	let t = /* @__PURE__ */ new Set(), n = [];
+	for (let r of e.columns.flatMap((e) => e.components)) t.has(r.coordinate) || (t.add(r.coordinate), n.push(r));
+	return n;
+}
+function L(e, t) {
+	return e.files.flatMap((e) => e.components).find((e) => e.coordinate === t);
+}
+function R(e, t, n, r = z(t, n), i = {}) {
+	let a = new URLSearchParams({
+		entry: t.coordinate,
+		case: n,
+		chrome: "0",
+		sessionId: r
+	});
+	return i.static && a.set("static", "1"), `${e.routes.preview}?${a.toString()}`;
+}
+function Be(e) {
+	return He(e.routes.preview, new URLSearchParams({
+		chrome: "0",
+		pool: "1"
+	}));
+}
+function Ve(e, t) {
+	let n = new URL(e, "http://gtsx.local"), r = n.searchParams.getAll("gcase").flatMap((e) => {
+		let t = e.lastIndexOf(":");
+		return t > 0 ? [[e.slice(0, t), e.slice(t + 1)]] : [];
+	});
+	return {
+		caseName: n.searchParams.get("case"),
+		...r.length > 0 ? { caseOverrides: r } : {},
+		chrome: n.searchParams.get("chrome"),
+		entry: n.searchParams.get("entry"),
+		sessionId: n.searchParams.get("sessionId") ?? t,
+		staticMode: n.searchParams.get("static") === "1"
+	};
+}
+function He(e, t) {
+	let n = t.toString();
+	return n ? `${e}${e.includes("?") ? "&" : "?"}${n}` : e;
+}
+function z(e, t, n) {
+	return `${e.coordinate}:${t}${n && n !== "tablet" ? `@${n}` : ""}`;
+}
+function B(e, t, n) {
+	return `${n}\n${e.sourceHash ?? "no-source-hash"}\n${e.coordinate}\n${t}`;
+}
+function V(e, t) {
+	return e === "phone" ? {
+		width: 390,
+		height: 844
+	} : e === "tablet" ? {
+		width: 768,
+		height: 1024
+	} : e === "desktop" ? {
+		width: 1280,
+		height: 900
+	} : {
+		width: 768,
+		height: P(t?.height ?? 1024, 160, 1200)
+	};
+}
+function H(e, t, n) {
+	if (!(!t && !n)) return {
+		expectedSessionId: e,
+		ready: t?.ready ?? !1,
+		...t?.tree ?? n?.tree ? { tree: t?.tree ?? n?.tree } : {},
+		...t?.size ?? n?.size ? { size: t?.size ?? n?.size } : {},
+		...t?.error ? { error: t.error } : {},
+		...t?.valuesByBoundaryId ? { valuesByBoundaryId: t.valuesByBoundaryId } : {}
+	};
+}
+function Ue(e) {
+	let t = I(e);
+	return new Set(e.columns.flatMap((e) => e.components.flatMap((e) => e.cases.map((n) => z(e, n.name, t)))));
+}
+function We(e, t) {
+	let n = I(t);
+	return ze(t).flatMap((t) => t.cases.map((r) => Ge(e, t, r.name, n, z(t, r.name, n))));
+}
+function Ge(e, t, n, r, i) {
+	return {
+		cacheKey: B(t, n, r),
+		previewUrl: R(e, t, n, i, { static: !0 }),
+		sessionId: i,
+		size: V(r, void 0),
+		title: `${t.componentName} ${n} preview`
+	};
+}
+function Ke(t) {
+	let n = t.type;
+	return typeof t == "object" && !!t && typeof n == "string" && qe(n) && t.protocolVersion === e && typeof t.sessionId == "string";
+}
+function qe(e) {
+	return e === "gtsx:ready" || e === "gtsx:tree" || e === "gtsx:resize" || e === "gtsx:error" || e === "gtsx:request-values" || e === "gtsx:values" || e === "gtsx:render";
+}
+function U(e, t) {
+	if (!t || t === g) return {
+		id: g,
+		components: Je(e)
+	};
+	if (t?.startsWith("component:")) {
+		let n = t.slice(10), r = e.files.flatMap((e) => e.components).find((e) => e.coordinate === n);
+		if (r) return {
+			id: t,
+			components: [r]
+		};
+	}
+	if (t?.startsWith("file:")) {
+		let n = t.slice(5), r = e.files.find((e) => e.path === n);
+		if (r) return {
+			id: t,
+			components: r.components
+		};
+	}
+	return {
+		id: g,
+		components: Je(e)
+	};
+}
+function Je(e) {
+	let t = e.files.flatMap((e) => e.components), n = new Set(t.flatMap((e) => e.dependencies ?? [])), r = t.filter((e) => !n.has(e.coordinate));
+	return r.length > 0 ? r : t;
+}
+//#endregion
+//#region src/preview-cache-indexeddb.ts
+var Ye = "gtsx-studio-preview-cache-v1", W = "previewFrames", Xe = 1;
+function Ze(e) {
+	let t = e.cache?.namespace?.trim();
+	return t ? `project:${t}` : `manifest:${ot(JSON.stringify({
+		files: e.files.map((e) => ({
+			path: e.path,
+			components: e.components.map((e) => ({
+				coordinate: e.coordinate,
+				exportName: e.exportName,
+				cases: e.cases.map((e) => e.name)
+			}))
+		})),
+		routes: e.routes,
+		version: e.version
+	}))}`;
+}
+async function Qe(e, t) {
+	if (!it() || t.length === 0) return {};
+	try {
+		let n = await tt(), r = n.transaction(W, "readonly"), i = r.objectStore(W), a = await Promise.all(t.map((t) => nt(i.get(at(e, t)))));
+		return await rt(r), n.close(), Object.fromEntries(a.flatMap((t) => t && t.namespace === e ? [[t.cacheKey, {
+			frameState: t.frameState,
+			lastUsedAt: t.updatedAt
+		}]] : []));
+	} catch {
+		return {};
+	}
+}
+async function $e(e, t) {
+	let n = Object.entries(t).flatMap(([t, n]) => {
+		let r = n ? et(n.frameState) : void 0;
+		return r ? [{
+			cacheKey: t,
+			frameState: r,
+			id: at(e, t),
+			namespace: e,
+			updatedAt: Date.now()
+		}] : [];
+	});
+	if (!(!it() || n.length === 0)) try {
+		let e = await tt(), t = e.transaction(W, "readwrite"), r = t.objectStore(W);
+		for (let e of n) r.put(e);
+		await rt(t), e.close();
+	} catch {}
+}
+function et(e) {
+	if (!(!e.tree && !e.size)) return {
+		expectedSessionId: e.expectedSessionId,
+		ready: e.ready,
+		...e.size ? { size: e.size } : {},
+		...e.tree ? { tree: e.tree } : {}
+	};
+}
+function tt() {
+	return new Promise((e, t) => {
+		let n = indexedDB.open(Ye, Xe);
+		n.onupgradeneeded = () => {
+			let e = n.result;
+			e.objectStoreNames.contains(W) || e.createObjectStore(W, { keyPath: "id" }).createIndex("namespace", "namespace", { unique: !1 });
+		}, n.onerror = () => t(n.error), n.onsuccess = () => e(n.result);
+	});
+}
+function nt(e) {
+	return new Promise((t, n) => {
+		e.onerror = () => n(e.error), e.onsuccess = () => t(e.result);
+	});
+}
+function rt(e) {
+	return new Promise((t, n) => {
+		e.onerror = () => n(e.error), e.onabort = () => n(e.error), e.oncomplete = () => t();
+	});
+}
+function it() {
+	return typeof indexedDB < "u";
+}
+function at(e, t) {
+	return `${e}\n${t}`;
+}
+function ot(e) {
+	let t = 2166136261;
+	for (let n = 0; n < e.length; n += 1) t ^= e.charCodeAt(n), t = Math.imul(t, 16777619);
+	return (t >>> 0).toString(36);
+}
+//#endregion
+//#region src/preview-geometry-cache-store.ts
+var st = [
+	"phone",
+	"tablet",
+	"desktop"
+];
+function ct(e) {
+	return ht(e.files.flatMap((e) => e.components.flatMap((e) => e.cases.flatMap((t) => st.map((n) => B(e, t.name, n))))));
+}
+function lt(e) {
+	let t = ht(e.cacheKeys), n = {}, r = {}, i = {}, a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), s = (e) => {
+		if (e.size === 0) return;
+		let t = /* @__PURE__ */ new Set();
+		for (let n of e) {
+			o.set(n, (o.get(n) ?? 0) + 1);
+			for (let e of a.get(n) ?? []) t.add(e);
+		}
+		for (let e of t) e();
+	};
+	return {
+		cacheKeys: t,
+		getFrameState(e) {
+			return r[e];
+		},
+		getLayoutFrameState(e, t) {
+			let n = i[t]?.frameState;
+			return n ? H(e, void 0, n) : r[e];
+		},
+		getMergedFrameState(e, t) {
+			return H(e, r[e], n[t]?.frameState);
+		},
+		namespace: e.namespace,
+		getSnapshot() {
+			return n;
+		},
+		getVersionForKeys(e) {
+			return e.map((e) => `${e}:${o.get(e) ?? 0}`).join("|");
+		},
+		async hydrate() {
+			let r = {
+				...await Qe(e.namespace, t),
+				...n
+			}, a = gt(n, r);
+			return n = r, i = r, s(a), n;
+		},
+		markSessionRenderStarted(e) {
+			let t = r[e], n = {
+				expectedSessionId: e,
+				ready: !1
+			};
+			return t && vt(t, n) ? !1 : (r = {
+				...r,
+				[e]: n
+			}, s(new Set([e])), !0);
+		},
+		putMessages(e, t = /* @__PURE__ */ new Set()) {
+			let a = /* @__PURE__ */ new Set(), o = dt(r, e, t, a), c = ft(n, e, a), l = pt(i, e, a);
+			return o === r && c === n && l === i ? {
+				changed: !1,
+				entriesToWrite: {},
+				snapshot: n
+			} : (r = o, n = c, i = l, s(a), {
+				changed: !0,
+				entriesToWrite: mt(n, e),
+				snapshot: n
+			});
+		},
+		reset(e = {}) {
+			let t = new Set([
+				...Object.keys(r),
+				...gt(n, e),
+				...gt(i, e)
+			]);
+			r = {}, n = e, i = e, s(t);
+		},
+		subscribe(e, t) {
+			for (let n of e) {
+				let e = a.get(n);
+				e || (e = /* @__PURE__ */ new Set(), a.set(n, e)), e.add(t);
+			}
+			return () => {
+				for (let n of e) {
+					let e = a.get(n);
+					e && (e.delete(t), e.size === 0 && a.delete(n));
+				}
+			};
+		},
+		writeEntries(t) {
+			return $e(e.namespace, t);
+		}
+	};
+}
+function ut(e) {
+	return e.component.cases.flatMap((t) => [z(e.component, t.name, e.viewportPreset), B(e.component, t.name, e.viewportPreset)]);
+}
+function dt(e, t, n, r) {
+	let i = e;
+	for (let { message: a } of t) {
+		if (!n.has(a.sessionId)) continue;
+		let t = i[a.sessionId] ?? {
+			expectedSessionId: a.sessionId,
+			ready: !1
+		}, o = _(t, a);
+		o !== t && (i === e && (i = { ...e }), i[a.sessionId] = o, r.add(a.sessionId));
+	}
+	return i;
+}
+function ft(e, t, n) {
+	let r = Date.now(), i = e;
+	for (let { message: a, target: o } of t) {
+		let t = i[o.cacheKey]?.frameState ?? {
+			expectedSessionId: a.sessionId,
+			ready: !1
+		}, s = _(t, a);
+		s !== t && (i === e && (i = { ...e }), i[o.cacheKey] = {
+			frameState: s,
+			lastUsedAt: r
+		}, n.add(o.cacheKey));
+	}
+	return i;
+}
+function pt(e, t, n) {
+	let r = Date.now(), i = e;
+	for (let { message: a, target: o } of t) {
+		let t = i[o.cacheKey];
+		if (!_t(t)) continue;
+		let s = t?.frameState ?? {
+			expectedSessionId: a.sessionId,
+			ready: !1
+		}, c = _(s, a);
+		c !== s && (i === e && (i = { ...e }), i[o.cacheKey] = {
+			frameState: c,
+			lastUsedAt: r
+		}, n.add(o.cacheKey));
+	}
+	return i;
+}
+function mt(e, t) {
+	let n = {};
+	for (let { target: r } of t) n[r.cacheKey] = e[r.cacheKey];
+	return n;
+}
+function ht(e) {
+	return [...new Set(e)];
+}
+function gt(e, t) {
+	let n = new Set([...Object.keys(e), ...Object.keys(t)]), r = /* @__PURE__ */ new Set();
+	for (let i of n) e[i] !== t[i] && r.add(i);
+	return r;
+}
+function _t(e) {
+	return !e?.frameState.tree && !e?.frameState.error;
+}
+function vt(e, t) {
+	return e.expectedSessionId === t.expectedSessionId && e.ready === t.ready && e.tree === t.tree && e.size === t.size && e.error === t.error && e.valuesByBoundaryId === t.valuesByBoundaryId;
+}
+//#endregion
+//#region src/preview-lazy-loading.ts
+var yt = 3200;
+function bt(e, t) {
+	return {
+		bottom: e.y + t.bottom * e.scale,
+		left: e.x + t.left * e.scale,
+		right: e.x + t.right * e.scale,
+		top: e.y + t.top * e.scale
+	};
+}
+function xt(e, t, n) {
+	return e.bottom >= t.top - n && e.right >= t.left - n && e.top <= t.bottom + n && e.left <= t.right + n;
+}
+//#endregion
+//#region src/preview-render-queue.ts
+var St = 24, Ct = 4, wt = 4, Tt = 8192, Et = 5e3, Dt = 100, Ot = 120, kt = 1e3;
+function At(e) {
+	let t = /* @__PURE__ */ new Set(), n = 0, r = 0, i = 0, a = Gt(e.maximumRenderTaskCount, Tt), o = Math.min(Gt(e.maximumConcurrentRenderTasks, 24), a), s = Gt(e.maximumMountedPreviewSessions, 32), c = Math.min(Kt(e.minimumVisibleRenderTasks, 0), o);
+	for (let l of Ft(e)) if (!t.has(l.sessionId)) {
+		if (l.currentlyMounted && !l.active) {
+			if (t.size >= s) continue;
+			t.add(l.sessionId);
+			continue;
+		}
+		if (!(l.needsRenderTask && (r += 1, r > a))) {
+			if (jt(l)) {
+				if (!Mt(l, {
+					concurrentRenderTasks: n,
+					maximumConcurrentRenderTasks: o,
+					minimumVisibleRenderTasks: c,
+					visibleRenderTasks: i
+				})) continue;
+				n += 1, l.visible && (i += 1);
+			}
+			!l.visible && t.size >= s || t.add(l.sessionId);
+		}
+	}
+	return t;
+}
+function jt(e) {
+	return e.active || e.needsRenderTask;
+}
+function Mt(e, t) {
+	return !jt(e) || e.visible && e.active || e.visible && t.visibleRenderTasks < t.minimumVisibleRenderTasks ? !0 : t.concurrentRenderTasks < t.maximumConcurrentRenderTasks;
+}
+function Nt(e, t = At(e)) {
+	let n = /* @__PURE__ */ new Set();
+	for (let r of Ft(e)) r.visible && t.has(r.sessionId) && n.add(r.sessionId);
+	return n;
+}
+function Pt(e) {
+	return {
+		activeRenderTimeoutMilliseconds: G(e, [
+			"previewQueueActiveRenderTimeoutMilliseconds",
+			"previewQueueActiveRenderTimeout",
+			"queueActiveRenderTimeout",
+			"previewQueueActiveTimeout",
+			"queueActiveTimeout"
+		]),
+		bufferRenderDelayMilliseconds: K(e, [
+			"previewQueueBufferRenderDelayMilliseconds",
+			"previewQueueBufferRenderDelay",
+			"queueBufferRenderDelay",
+			"previewQueueBufferDelay",
+			"previewRenderBufferDelay",
+			"previewBufferDelay",
+			"queueBufferDelay",
+			"bufferDelay"
+		]),
+		renderDebounceMilliseconds: K(e, [
+			"previewQueueRenderDebounceMilliseconds",
+			"previewQueueRenderDebounce",
+			"queueRenderDebounce",
+			"previewQueueDebounce",
+			"previewRenderDebounce",
+			"previewDebounce",
+			"queueDebounce",
+			"debounce"
+		]),
+		maximumConcurrentRenderTasks: G(e, [
+			"previewQueueMaximumConcurrentRenderTasks",
+			"queueMaximumConcurrentRenderTasks",
+			"maximumConcurrentRenderTasks",
+			"previewQueueActive",
+			"queueActive"
+		]),
+		maximumConcurrentRenderTasksDuringCanvasMovement: G(e, [
+			"previewQueueMaximumConcurrentRenderTasksDuringCanvasMovement",
+			"queueMaximumConcurrentRenderTasksDuringCanvasMovement",
+			"maximumConcurrentRenderTasksDuringCanvasMovement"
+		]),
+		minimumVisibleRenderTasksDuringCanvasMovement: K(e, [
+			"previewQueueMinimumVisibleRenderTasksDuringCanvasMovement",
+			"queueMinimumVisibleRenderTasksDuringCanvasMovement",
+			"minimumVisibleRenderTasksDuringCanvasMovement",
+			"previewQueueVisibleRenderFloor",
+			"queueVisibleRenderFloor"
+		]),
+		renderBufferMargin: K(e, [
+			"previewQueueRenderBufferMargin",
+			"queueRenderBufferMargin",
+			"previewRenderBufferMargin",
+			"previewQueueBuffer",
+			"queueBuffer",
+			"previewBuffer"
+		]),
+		maximumRenderTaskCount: G(e, [
+			"previewQueueMaximumRenderTaskCount",
+			"queueMaximumRenderTaskCount",
+			"maximumRenderTaskCount",
+			"previewQueueSafety",
+			"queueSafety",
+			"previewQueueLength",
+			"queueLength"
+		]),
+		maximumMountedPreviewSessions: G(e, [
+			"previewQueueMaximumMountedPreviewSessions",
+			"queueMaximumMountedPreviewSessions",
+			"maximumMountedPreviewSessions",
+			"previewQueueMounted",
+			"queueMounted"
+		]),
+		renderThrottleMilliseconds: K(e, [
+			"previewQueueRenderThrottleMilliseconds",
+			"previewQueueRenderThrottle",
+			"queueRenderThrottle",
+			"previewQueueThrottle",
+			"previewRenderThrottle",
+			"previewThrottle",
+			"queueThrottle",
+			"throttle"
+		])
+	};
+}
+function Ft(e) {
+	let t = e.currentSessionIds ?? /* @__PURE__ */ new Set(), n = e.completedSessionIds ?? /* @__PURE__ */ new Set(), r = e.activeSessionIds ?? /* @__PURE__ */ new Set(), i = Kt(e.renderBufferMargin, yt), a = e.includeBufferedRenderTasks !== !1, o = Bt(e.canvasMovement), s = [], c = [];
+	return e.items.forEach((l, u) => {
+		let d = l.sessionIds.some((e) => t.has(e)), f = bt(e.canvas, l.rect), p = d || a ? i : 0;
+		if (!xt(f, e.viewport, p)) return;
+		let m = Wt(f, e.viewport), h = m > 0 ? Ut(f, e.viewport) : zt(f, e.viewport), g = l.sessionIds.map((i, a) => {
+			let s = t.has(i), c = n.has(i);
+			return {
+				active: r.has(i),
+				cardIndex: u,
+				completed: c,
+				currentlyMounted: s,
+				...Vt(f, e.viewport, o),
+				distance: h,
+				intersectionArea: m,
+				needsRenderTask: !s,
+				sessionId: i,
+				sessionIndex: a,
+				visible: m > 0
+			};
+		});
+		g.length !== 0 && (m > 0 ? s.push(g) : c.push(g));
+	}), [...Rt(s, It), ...Rt(c, Lt)];
+}
+function It(e, t) {
+	return e.distance - t.distance || t.intersectionArea - e.intersectionArea || Number(t.currentlyMounted) - Number(e.currentlyMounted) || Number(t.completed) - Number(e.completed) || e.cardIndex - t.cardIndex || e.sessionIndex - t.sessionIndex;
+}
+function Lt(e, t) {
+	return e.directionRank - t.directionRank || e.distance - t.distance || e.directionOffset - t.directionOffset || Number(t.currentlyMounted) - Number(e.currentlyMounted) || Number(t.completed) - Number(e.completed) || e.cardIndex - t.cardIndex || e.sessionIndex - t.sessionIndex;
+}
+function Rt(e, t) {
+	let n = e.sort((e, n) => t(e[0], n[0])), r = [], i = Math.max(0, ...n.map((e) => e.length));
+	for (let e = 0; e < i; e += 1) for (let t of n) {
+		let n = t[e];
+		n && r.push(n);
+	}
+	return r;
+}
+function zt(e, t) {
+	let n = e.right < t.left ? t.left - e.right : e.left > t.right ? e.left - t.right : 0, r = e.bottom < t.top ? t.top - e.bottom : e.top > t.bottom ? e.top - t.bottom : 0;
+	return Math.hypot(n, r);
+}
+function Bt(e) {
+	if (!e) return;
+	let t = Math.hypot(e.x, e.y);
+	if (!(t < .001)) return {
+		x: -e.x / t,
+		y: -e.y / t
+	};
+}
+function Vt(e, t, n) {
+	if (!n) return {
+		directionOffset: 0,
+		directionRank: 0
+	};
+	let r = Ht(e, t), i = r.x * n.x + r.y * n.y;
+	return {
+		directionOffset: Math.abs(r.x * n.y - r.y * n.x),
+		directionRank: i > 0 ? 0 : 1
+	};
+}
+function Ht(e, t) {
+	let n = (e.left + e.right) / 2, r = (e.top + e.bottom) / 2, i = (t.left + t.right) / 2, a = (t.top + t.bottom) / 2;
+	return {
+		x: n - i,
+		y: r - a
+	};
+}
+function Ut(e, t) {
+	let n = Ht(e, t);
+	return Math.hypot(n.x, n.y);
+}
+function Wt(e, t) {
+	return Math.max(0, Math.min(e.right, t.right) - Math.max(e.left, t.left)) * Math.max(0, Math.min(e.bottom, t.bottom) - Math.max(e.top, t.top));
+}
+function Gt(e, t) {
+	return typeof e == "number" && Number.isFinite(e) && e > 0 ? Math.floor(e) : t;
+}
+function Kt(e, t) {
+	return typeof e == "number" && Number.isFinite(e) && e >= 0 ? Math.floor(e) : t;
+}
+function G(e, t) {
+	for (let n of t) {
+		let t = e.get(n);
+		if (!t) continue;
+		let r = Number(t);
+		if (Number.isFinite(r) && r > 0) return Math.floor(r);
+	}
+}
+function K(e, t) {
+	for (let n of t) {
+		let t = e.get(n);
+		if (!t) continue;
+		let r = Number(t);
+		if (Number.isFinite(r) && r >= 0) return Math.floor(r);
+	}
+}
+//#endregion
+//#region src/studio-canvas-transform-event.ts
+var qt = "gtsx:studio-canvas-transform-changed";
+function Jt(e) {
+	typeof window > "u" || window.dispatchEvent(new CustomEvent(qt, { detail: e }));
+}
+//#endregion
+//#region src/preview-iframe-pool.tsx
+var Yt = a.createContext(null), Xt = 48, Zt = 48, Qt = 0, $t = 250, en = 12, tn = typeof window > "u" ? a.useEffect : a.useLayoutEffect;
+function nn(e) {
+	let t = a.useRef(null), n = a.useRef([]), r = a.useRef(0), i = a.useRef(0), o = a.useRef(0), l = a.useRef(0), u = a.useRef(0), d = a.useRef(0), f = a.useRef(0), p = a.useRef(0), m = a.useRef(0), h = a.useRef(0), g = a.useRef(0), _ = a.useRef(0), v = a.useRef(0), y = a.useRef(0), [b, x] = a.useState({
+		active: 0,
+		borrows: 0,
+		created: 0,
+		directRenderPosts: 0,
+		idle: 0,
+		newBorrows: 0,
+		acceptedRenderPosts: 0,
+		postMessageRenderPosts: 0,
+		readyIdle: 0,
+		renderEndpointWaits: 0,
+		redeliveredRenderPosts: 0,
+		renderPosts: 0,
+		reusedBorrows: 0,
+		total: 0
+	}), S = e.maximumIdleFrames ?? Xt, C = e.minimumIdleReserveFrames ?? Qt, w = e.maximumRetainedFrames ?? Zt, T = a.useCallback(() => {
+		e.debug && (d.current ||= window.requestAnimationFrame(() => {
+			d.current = 0, x(jn(n.current, {
+				acceptedRenderPosts: p.current,
+				borrows: r.current,
+				created: i.current,
+				directRenderPosts: m.current,
+				newBorrows: o.current,
+				postMessageRenderPosts: h.current,
+				redeliveredRenderPosts: g.current,
+				renderEndpointWaits: _.current,
+				renderPosts: v.current,
+				reusedBorrows: y.current
+			}));
+		}));
+	}, [e.debug]), E = a.useCallback((e, t = {}) => {
+		if (!e.pendingInput) return;
+		let n = bn(e.pendingInput);
+		if (!xn(e, n, t)) return;
+		let r = Ve(e.pendingInput.slot.previewUrl, e.pendingInput.slot.sessionId), i = yn(e.frame);
+		if (!i) {
+			_.current += 1, wn(e, n, E), T();
+			return;
+		}
+		i.render(r), e.pendingRenderDeliveryAttemptCount = Sn(e, n), e.lastPostedRenderKey = n, e.lastRenderedSessionId = r.sessionId ?? e.pendingInput.slot.sessionId, e.frame.dataset.gtsxPreviewPoolLastRenderSessionId = r.sessionId ?? "", e.frame.dataset.gtsxPreviewPoolRenderDeliveryAttemptCount = String(e.pendingRenderDeliveryAttemptCount), i.transport === "direct" ? m.current += 1 : h.current += 1, v.current += 1, t.redelivery && (g.current += 1), Cn(e, n, E), T();
+	}, [T]), D = a.useCallback((e) => {
+		e.ready && E(e);
+	}, [E]), O = a.useCallback(() => {
+		let t = document.createElement("iframe"), r = {
+			frame: t,
+			id: l.current++,
+			poolUrl: e.poolUrl,
+			ready: !1
+		};
+		return i.current += 1, t.setAttribute("aria-hidden", "true"), t.dataset.gtsxPooledPreviewFrame = "true", t.dataset.gtsxPreviewPoolReady = "false", t.loading = "eager", t.tabIndex = -1, Object.assign(t.style, {
+			background: "transparent",
+			border: "0",
+			height: "0",
+			left: "0",
+			pointerEvents: "none",
+			position: "fixed",
+			top: "0",
+			transformOrigin: "0 0",
+			visibility: "hidden",
+			width: "0",
+			zIndex: "1"
+		}), t.src = e.poolUrl, n.current.push(r), T(), r;
+	}, [e.poolUrl, T]), ee = a.useCallback(() => {
+		let e = t.current;
+		if (!e) return;
+		let n = O();
+		e.appendChild(n.frame);
+	}, [O]), k = a.useCallback(() => {
+		C <= 0 || t.current && (n.current.length >= w || Nn(n.current) >= C || ee());
+	}, [
+		ee,
+		w,
+		C
+	]), A = a.useCallback(() => {
+		typeof window > "u" || (f.current ||= window.requestAnimationFrame(() => {
+			f.current = 0, k();
+		}));
+	}, [k]), j = a.useCallback((t) => {
+		let r = sn(n.current, {
+			maximumRetainedFrames: w,
+			poolUrl: e.poolUrl,
+			sessionId: t.slot.sessionId
+		});
+		return r ? {
+			entry: r,
+			origin: "pool"
+		} : {
+			entry: O(),
+			origin: "new"
+		};
+	}, [
+		O,
+		w,
+		e.poolUrl
+	]), te = a.useCallback(() => {
+		let e = n.current.filter((e) => !e.owner), t = Math.max(0, e.length - S, n.current.length - w);
+		if (t <= 0) return;
+		let r = new Set(e.slice(0, t).map((e) => e.id));
+		n.current = n.current.filter((e) => r.has(e.id) ? (Y(e), e.frame.remove(), !1) : !0);
+	}, [S, w]), ne = a.useCallback(() => {
+		for (let e of n.current) e.owner && ln(e);
+	}, []), M = a.useCallback(() => {
+		u.current ||= window.requestAnimationFrame(() => {
+			u.current = 0, ne();
+		});
+	}, [ne]), re = a.useCallback((e, n) => {
+		let { entry: i, origin: a } = j(n), s = Symbol(n.slot.sessionId), c = t.current;
+		return r.current += 1, a === "new" ? o.current += 1 : y.current += 1, i.owner = s, i.container = e, c && i.frame.parentElement !== c && c.appendChild(i.frame), mn(i, n, D), T(), A(), M(), {
+			origin: a,
+			update(t) {
+				i.owner === s && (i.container = e, mn(i, t, D), M());
+			},
+			release() {
+				i.owner === s && (i.pendingInput?.onPreviewFrameMount?.(i.pendingInput.slot.sessionId, null), gn(i), i.owner = void 0, i.container = void 0, i.currentSessionId = void 0, i.pendingInput = void 0, Y(i), un(i), te(), T(), A());
+			}
+		};
+	}, [
+		j,
+		D,
+		te,
+		T,
+		M,
+		A
+	]);
+	a.useEffect(() => {
+		e.debug && x(jn(n.current, {
+			acceptedRenderPosts: p.current,
+			borrows: r.current,
+			created: i.current,
+			directRenderPosts: m.current,
+			newBorrows: o.current,
+			postMessageRenderPosts: h.current,
+			redeliveredRenderPosts: g.current,
+			renderEndpointWaits: _.current,
+			renderPosts: v.current,
+			reusedBorrows: y.current
+		}));
+	}, [e.debug]), a.useEffect(() => {
+		let e = () => M();
+		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), window.addEventListener(qt, e), () => {
+			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0), window.removeEventListener(qt, e);
+		};
+	}, [M]), a.useEffect(() => {
+		let e = (e) => {
+			if (On(e.data)) {
+				let t = n.current.find((t) => t.frame.contentWindow === e.source);
+				if (!t) return;
+				t.ready = !0, t.frame.dataset.gtsxPreviewPoolReady = "true", T(), A(), Y(t), E(t);
+				return;
+			}
+			if (kn(e.data)) {
+				let t = n.current.find((t) => t.frame.contentWindow === e.source);
+				if (!t || t.pendingInput?.slot.sessionId !== e.data.sessionId) return;
+				t.lastAcceptedRenderSessionId = e.data.sessionId, t.frame.dataset.gtsxPreviewPoolLastAcceptedRenderSessionId = e.data.sessionId, En(t), p.current += 1, T();
+				return;
+			}
+			if (An(e.data)) {
+				let t = n.current.find((t) => t.frame.contentWindow === e.source);
+				if (!t || t.pendingInput?.slot.sessionId !== e.data.sessionId) return;
+				t.lastCompletedSessionId = e.data.sessionId, t.lastCompletedPreviewUrl = t.pendingInput.slot.previewUrl, t.lastCompletedSize = t.pendingInput.size, Y(t), t.frame.style.opacity = "1";
+			}
+		};
+		return window.addEventListener("message", e), () => window.removeEventListener("message", e);
+	}, [
+		E,
+		T,
+		A
+	]), a.useEffect(() => {
+		A();
+	}, [A]), a.useEffect(() => () => {
+		for (let e of n.current) Y(e), e.frame.remove();
+		d.current && window.cancelAnimationFrame(d.current), u.current && window.cancelAnimationFrame(u.current), f.current && window.cancelAnimationFrame(f.current), n.current = [];
+	}, []);
+	let ie = a.useMemo(() => ({ borrow: re }), [re]);
+	return /* @__PURE__ */ c(Yt.Provider, {
+		value: ie,
+		children: [
+			e.children,
+			/* @__PURE__ */ s("div", {
+				"aria-hidden": "true",
+				"data-gtsx-preview-iframe-pool": "true",
+				ref: t,
+				style: {
+					inset: 0,
+					overflow: "visible",
+					pointerEvents: "none",
+					position: "fixed",
+					zIndex: 2
+				}
+			}),
+			e.debug ? /* @__PURE__ */ s(Pn, { stats: b }) : null
+		]
+	});
+}
+function rn(e) {
+	let t = on(), n = a.useRef(null), r = a.useRef(null), i = a.useRef(null), o = a.useRef(e.onPreviewFrameMount), c = a.useRef(e.onBorrowOriginChange);
+	o.current = e.onPreviewFrameMount, c.current = e.onBorrowOriginChange;
+	let l = a.useMemo(() => ({
+		size: e.size,
+		slot: e.slot,
+		onPreviewFrameMount(e, t, n) {
+			o.current?.(e, t, n);
+		}
+	}), [
+		e.size.height,
+		e.size.width,
+		e.slot.previewUrl,
+		e.slot.sessionId,
+		e.slot.title
+	]);
+	return r.current = l, tn(() => {
+		if (!t || !n.current) return;
+		let e = r.current;
+		if (!e) return;
+		let a = t.borrow(n.current, e);
+		return i.current = a, c.current?.(a.origin), () => an(i, c);
+	}, [t]), tn(() => {
+		i.current?.update(l), i.current && c.current?.(i.current.origin);
+	}, [l]), t ? /* @__PURE__ */ s("div", {
+		"data-gtsx-pooled-preview-slot": e.slot.sessionId,
+		ref: n,
+		style: {
+			height: e.size.height,
+			left: 0,
+			pointerEvents: "none",
+			position: "absolute",
+			top: 0,
+			width: e.size.width,
+			zIndex: 1
+		}
+	}) : null;
+}
+function an(e, t) {
+	t.current?.(null), e.current?.release(), e.current = null;
+}
+function on() {
+	return a.useContext(Yt);
+}
+function sn(e, t) {
+	let n = e.filter((e) => !e.owner && e.poolUrl === t.poolUrl), r = n.find((e) => e.ready && e.lastRenderedSessionId === t.sessionId);
+	if (r) return r;
+	let i = n.find((e) => e.ready && !e.lastRenderedSessionId);
+	if (i) return i;
+	let a = n.find((e) => e.ready);
+	if (a) return a;
+}
+function q(e) {
+	return typeof e == "number" ? `${e}px` : e;
+}
+function cn(e) {
+	if (e.anchorRect.width <= 0 || e.anchorRect.height <= 0) return dn(e.layoutSize);
+	let t = fn(e.layoutSize.width, e.anchorRect.width), n = fn(e.layoutSize.height, e.anchorRect.height), r = t > 0 ? e.anchorRect.width / t : 1, i = n > 0 ? e.anchorRect.height / n : 1, a = Math.max(0, e.clipRect.top - e.anchorRect.top) / i, o = Math.max(0, e.anchorRect.right - e.clipRect.right) / r, s = Math.max(0, e.anchorRect.bottom - e.clipRect.bottom) / i, c = Math.max(0, e.clipRect.left - e.anchorRect.left) / r;
+	return {
+		clipPath: `inset(${J(a)}px ${J(o)}px ${J(s)}px ${J(c)}px)`,
+		height: `${J(n)}px`,
+		transform: `translate3d(${J(e.anchorRect.left)}px, ${J(e.anchorRect.top)}px, 0) scale(${pn(r)}, ${pn(i)})`,
+		visibility: "visible",
+		width: `${J(t)}px`
+	};
+}
+function ln(e) {
+	let t = e.pendingInput, n = e.container;
+	if (!t || !n?.isConnected) {
+		un(e);
+		return;
+	}
+	let r = n.getBoundingClientRect(), i = n.closest("[data-gtsx-preview-clip]"), a = i instanceof HTMLElement ? i.getBoundingClientRect() : r;
+	Object.assign(e.frame.style, cn({
+		anchorRect: r,
+		clipRect: a,
+		layoutSize: t.size
+	}));
+}
+function un(e) {
+	Object.assign(e.frame.style, dn(e.pendingInput?.size ?? {
+		width: 0,
+		height: 0
+	}));
+}
+function dn(e) {
+	return {
+		clipPath: "inset(0px)",
+		height: q(e.height),
+		transform: "translate3d(-100000px, -100000px, 0)",
+		visibility: "hidden",
+		width: q(e.width)
+	};
+}
+function fn(e, t) {
+	if (typeof e == "number" && Number.isFinite(e) && e > 0) return e;
+	if (typeof e == "string" && e.endsWith("px")) {
+		let t = Number(e.slice(0, -2));
+		if (Number.isFinite(t) && t > 0) return t;
+	}
+	return Math.max(0, t);
+}
+function J(e) {
+	return Math.round(e * 100) / 100;
+}
+function pn(e) {
+	return Math.round(e * 1e4) / 1e4;
+}
+function mn(e, t, n) {
+	let r = e.pendingInput, i = r?.slot.sessionId, a = t.slot.sessionId, o = _n(e, t), s = Dn(r, t);
+	e.currentSessionId = a, e.pendingInput = t, hn(e, t), e.frame.title = t.slot.title, e.frame.style.height = q(t.size.height), e.frame.style.width = q(t.size.width), ln(e), o && (e.frame.style.opacity = "1"), i !== a && (o ? e.frame.dataset.gtsxPreviewPoolLastRenderSessionId = a : delete e.frame.dataset.gtsxPreviewPoolLastRenderSessionId, i && r?.onPreviewFrameMount?.(i, null), t.onPreviewFrameMount?.(a, e.frame, { retainedRender: o })), s && !o && (vn(e), Y(e), e.frame.style.opacity = "0", n(e));
+}
+function hn(e, t) {
+	e.frame.dataset.gtsxPreviewPoolEntryId = String(e.id), e.frame.dataset.gtsxPreviewPoolLeaseSessionId = t.slot.sessionId, e.frame.dataset.gtsxPreviewPoolReady = e.ready ? "true" : "false";
+}
+function gn(e) {
+	delete e.frame.dataset.gtsxPreviewPoolLeaseSessionId, delete e.frame.dataset.gtsxPreviewPoolLastAcceptedRenderSessionId, delete e.frame.dataset.gtsxPreviewPoolLastRenderSessionId, delete e.frame.dataset.gtsxPreviewPoolRenderDeliveryAttemptCount;
+}
+function _n(e, t) {
+	return e.lastCompletedSessionId === t.slot.sessionId && e.lastCompletedPreviewUrl === t.slot.previewUrl && e.lastCompletedSize?.height === t.size.height && e.lastCompletedSize.width === t.size.width;
+}
+function vn(e) {
+	delete e.lastCompletedSessionId, delete e.lastCompletedPreviewUrl, delete e.lastCompletedSize;
+}
+function yn(e) {
+	let n = e.contentWindow;
+	if (n) try {
+		let e = n.__gtsxPreviewRenderTargetMailbox;
+		return e ? {
+			render: e.render,
+			transport: "direct"
+		} : void 0;
+	} catch {
+		return {
+			render(e) {
+				n.postMessage(t(e), "*");
+			},
+			transport: "postMessage"
+		};
+	}
+}
+function bn(e) {
+	return JSON.stringify({
+		height: e.size.height,
+		previewUrl: e.slot.previewUrl,
+		sessionId: e.slot.sessionId,
+		width: e.size.width
+	});
+}
+function xn(e, t, n = {}) {
+	return n.force ? !0 : e.lastPostedRenderKey !== t;
+}
+function Sn(e, t) {
+	return e.lastPostedRenderKey === t ? (e.pendingRenderDeliveryAttemptCount ?? 0) + 1 : 1;
+}
+function Cn(e, t, n) {
+	En(e), !((e.pendingRenderDeliveryAttemptCount ?? 0) >= en) && (e.pendingRenderRedeliveryTimeout = window.setTimeout(() => {
+		e.pendingRenderRedeliveryTimeout = void 0, e.pendingInput && bn(e.pendingInput) === t && (_n(e, e.pendingInput) || n(e, {
+			force: !0,
+			redelivery: !0
+		}));
+	}, $t));
+}
+function wn(e, t, n) {
+	Tn(e), e.pendingRenderEndpointRetryTimeout = window.setTimeout(() => {
+		e.pendingRenderEndpointRetryTimeout = void 0, e.pendingInput && bn(e.pendingInput) === t && (_n(e, e.pendingInput) || n(e, { force: !0 }));
+	}, 50);
+}
+function Tn(e) {
+	e.pendingRenderEndpointRetryTimeout &&= (window.clearTimeout(e.pendingRenderEndpointRetryTimeout), void 0);
+}
+function En(e) {
+	e.pendingRenderRedeliveryTimeout &&= (window.clearTimeout(e.pendingRenderRedeliveryTimeout), void 0);
+}
+function Y(e) {
+	Tn(e), En(e), delete e.lastPostedRenderKey, delete e.pendingRenderDeliveryAttemptCount, delete e.frame.dataset.gtsxPreviewPoolRenderDeliveryAttemptCount;
+}
+function Dn(e, t) {
+	return !e || e.slot.sessionId !== t.slot.sessionId || e.slot.previewUrl !== t.slot.previewUrl || e.size.height !== t.size.height || e.size.width !== t.size.width;
+}
+function On(e) {
+	return typeof e == "object" && !!e && e.type === "gtsx:pool-ready" && e.protocolVersion === 1;
+}
+function kn(e) {
+	return typeof e == "object" && !!e && e.type === "gtsx:render-accepted" && e.protocolVersion === 1 && typeof e.sessionId == "string";
+}
+function An(e) {
+	return typeof e == "object" && !!e && (e.type === "gtsx:ready" || e.type === "gtsx:error") && typeof e.sessionId == "string";
+}
+function jn(e, t) {
+	let n = e.filter((e) => e.owner).length;
+	return {
+		active: n,
+		acceptedRenderPosts: t.acceptedRenderPosts,
+		borrows: t.borrows,
+		created: t.created,
+		directRenderPosts: t.directRenderPosts,
+		idle: e.length - n,
+		newBorrows: t.newBorrows,
+		postMessageRenderPosts: t.postMessageRenderPosts,
+		readyIdle: Mn(e),
+		redeliveredRenderPosts: t.redeliveredRenderPosts,
+		renderEndpointWaits: t.renderEndpointWaits,
+		renderPosts: t.renderPosts,
+		reusedBorrows: t.reusedBorrows,
+		total: e.length
+	};
+}
+function Mn(e) {
+	return e.filter((e) => !e.owner && e.ready).length;
+}
+function Nn(e) {
+	return e.filter((e) => !e.owner).length;
+}
+function Pn(e) {
+	return /* @__PURE__ */ c("div", {
+		"aria-label": "Preview iframe pool stats",
+		"data-gtsx-preview-iframe-pool-stats": "true",
+		"data-gtsx-preview-iframe-pool-active": e.stats.active,
+		"data-gtsx-preview-iframe-pool-borrows": e.stats.borrows,
+		"data-gtsx-preview-iframe-pool-created": e.stats.created,
+		"data-gtsx-preview-iframe-pool-direct-render-posts": e.stats.directRenderPosts,
+		"data-gtsx-preview-iframe-pool-idle": e.stats.idle,
+		"data-gtsx-preview-iframe-pool-new-borrows": e.stats.newBorrows,
+		"data-gtsx-preview-iframe-pool-post-message-render-posts": e.stats.postMessageRenderPosts,
+		"data-gtsx-preview-iframe-pool-accepted-render-posts": e.stats.acceptedRenderPosts,
+		"data-gtsx-preview-iframe-pool-ready-idle": e.stats.readyIdle,
+		"data-gtsx-preview-iframe-pool-render-endpoint-waits": e.stats.renderEndpointWaits,
+		"data-gtsx-preview-iframe-pool-redelivered-render-posts": e.stats.redeliveredRenderPosts,
+		"data-gtsx-preview-iframe-pool-render-posts": e.stats.renderPosts,
+		"data-gtsx-preview-iframe-pool-reused-borrows": e.stats.reusedBorrows,
+		"data-gtsx-preview-iframe-pool-total": e.stats.total,
+		style: {
+			background: "rgba(255,255,255,0.9)",
+			border: "1px solid rgba(216,222,232,0.95)",
+			borderRadius: 6,
+			bottom: 12,
+			boxShadow: "0 6px 20px rgba(31,35,40,0.12)",
+			color: "#1f2328",
+			display: "flex",
+			fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+			fontSize: 11,
+			gap: 8,
+			left: 12,
+			lineHeight: 1.3,
+			padding: "6px 8px",
+			pointerEvents: "none",
+			position: "fixed",
+			zIndex: 10
+		},
+		children: [
+			/* @__PURE__ */ c("span", { children: ["pool ", e.stats.total] }),
+			/* @__PURE__ */ c("span", { children: ["active ", e.stats.active] }),
+			/* @__PURE__ */ c("span", { children: ["idle ", e.stats.idle] }),
+			/* @__PURE__ */ c("span", { children: ["ready idle ", e.stats.readyIdle] }),
+			/* @__PURE__ */ c("span", { children: ["created ", e.stats.created] }),
+			/* @__PURE__ */ c("span", { children: ["borrow ", e.stats.borrows] }),
+			/* @__PURE__ */ c("span", { children: ["new ", e.stats.newBorrows] }),
+			/* @__PURE__ */ c("span", { children: ["reuse ", e.stats.reusedBorrows] }),
+			/* @__PURE__ */ c("span", { children: ["render ", e.stats.renderPosts] }),
+			/* @__PURE__ */ c("span", { children: ["direct ", e.stats.directRenderPosts] }),
+			/* @__PURE__ */ c("span", { children: ["postMessage ", e.stats.postMessageRenderPosts] }),
+			/* @__PURE__ */ c("span", { children: ["wait endpoint ", e.stats.renderEndpointWaits] }),
+			/* @__PURE__ */ c("span", { children: ["accepted ", e.stats.acceptedRenderPosts] }),
+			/* @__PURE__ */ c("span", { children: ["redelivered ", e.stats.redeliveredRenderPosts] })
+		]
+	});
+}
+//#endregion
+//#region src/studio-preview-message-flush.ts
+function Fn(e) {
+	let t = /* @__PURE__ */ new Set(), n = [], r = [];
+	for (let i of e.messages) {
+		if (!In(i.message)) {
+			r.push(i);
+			continue;
+		}
+		let a = Rn(i.message);
+		t.has(a) || (t.add(a), !Ln(e.getFrameState(i.message.sessionId), i.message) && (r.push(i), n.push(i)));
+	}
+	return {
+		completionMessages: n,
+		messagesToApply: r
+	};
+}
+function In(e) {
+	return e.type === "gtsx:ready" || e.type === "gtsx:error";
+}
+function Ln(e, t) {
+	return e ? t.type === "gtsx:ready" ? e.ready === !0 && !e.error : e.error?.message === t.error.message && e.error.stack === t.error.stack : !1;
+}
+function Rn(e) {
+	return e.type === "gtsx:ready" ? `${e.sessionId}\n${e.type}` : `${e.sessionId}\n${e.type}\n${e.error.message}\n${e.error.stack ?? ""}`;
+}
+//#endregion
+//#region src/preview-render-session-store.tsx
+var zn = a.createContext(null);
+function Bn(e = /* @__PURE__ */ new Set()) {
+	let t = new Set(e), n = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), a = (e, t) => {
+		let n = e.get(t);
+		if (n) for (let e of n) e();
+	};
+	return {
+		getSessionIds() {
+			return t;
+		},
+		hasSessionId(e) {
+			return t.has(e);
+		},
+		isVisibleSessionId(e) {
+			return n.has(e);
+		},
+		setSessionIds(e, o = /* @__PURE__ */ new Set()) {
+			if (Gn(t, e) && Gn(n, o)) return !1;
+			let s = t, c = n;
+			t = new Set(e), n = new Set(o);
+			let l = /* @__PURE__ */ new Set();
+			for (let e of s) t.has(e) || l.add(e);
+			for (let e of t) s.has(e) || l.add(e);
+			let u = /* @__PURE__ */ new Set();
+			for (let e of c) n.has(e) || u.add(e);
+			for (let e of n) c.has(e) || u.add(e);
+			for (let e of l) a(r, e);
+			for (let e of u) a(i, e);
+			return !0;
+		},
+		subscribeToRenderSession(e, t) {
+			return Vn(r, e, t);
+		},
+		subscribeToVisibleSession(e, t) {
+			return Vn(i, e, t);
+		}
+	};
+}
+function Vn(e, t, n) {
+	let r = e.get(t);
+	return r || (r = /* @__PURE__ */ new Set(), e.set(t, r)), r.add(n), () => {
+		let r = e.get(t);
+		r && (r.delete(n), r.size === 0 && e.delete(t));
+	};
+}
+function Hn(e) {
+	return /* @__PURE__ */ s(zn.Provider, {
+		value: e.store,
+		children: e.children
+	});
+}
+function Un(e, t = !0) {
+	let n = a.useContext(zn);
+	return a.useSyncExternalStore(a.useCallback((r) => t ? n?.subscribeToVisibleSession(e, r) ?? (() => {}) : () => {}, [
+		t,
+		e,
+		n
+	]), a.useCallback(() => t ? n?.isVisibleSessionId(e) ?? !1 : !1, [
+		t,
+		e,
+		n
+	]), () => !1);
+}
+function Wn(e) {
+	let t = a.useContext(zn);
+	return a.useSyncExternalStore(a.useCallback((n) => t?.subscribeToRenderSession(e, n) ?? (() => {}), [e, t]), a.useCallback(() => t?.hasSessionId(e) ?? !1, [e, t]), () => !1);
+}
+function Gn(e, t) {
+	if (e.size !== t.size) return !1;
+	for (let n of e) if (!t.has(n)) return !1;
+	return !0;
+}
+//#endregion
+//#region src/case-grid-layout.ts
+var Kn = .18;
+function qn(e, t) {
+	let n = e === "desktop" ? 860 : e === "phone" ? 680 : 760;
+	return t <= 1 ? Math.min(n, 720) : n;
+}
+//#endregion
+//#region src/studio-component-preview-frame-states.ts
+function Jn(e, t, n, r, i) {
+	return Object.fromEntries(e.cases.map((a) => {
+		let o = z(e, a.name, t), s = B(e, a.name, t);
+		return [a.name, i ? i.getLayoutFrameState(o, s) : H(o, n?.[o], r?.[s]?.frameState)];
+	}));
+}
+function Yn(e, t, n, r, i) {
+	return Object.fromEntries(e.cases.map((a) => {
+		let o = z(e, a.name, t), s = B(e, a.name, t);
+		return [a.name, i ? i.getMergedFrameState(o, s) : H(o, n?.[o], r?.[s]?.frameState)];
+	}));
+}
+//#endregion
+//#region src/studio-canvas-geometry.ts
+function Xn(e) {
+	return {
+		bottom: e.bottom,
+		left: e.left,
+		right: e.right,
+		top: e.top
+	};
+}
+function Zn(e, t, n) {
+	return {
+		bottom: (e.bottom - t.top) / n,
+		left: (e.left - t.left) / n,
+		right: (e.right - t.left) / n,
+		top: (e.top - t.top) / n
+	};
+}
+function Qn(e) {
+	return `translate(${e.x}px, ${e.y}px) scale(${e.scale})`;
+}
+function $n(e, t, n) {
+	return [...e.selectedCoordinatePath.slice(0, t), n];
+}
+function er(e) {
+	return e.join("\n");
+}
+function tr(e, t) {
+	return `${e}\n${t}`;
+}
+function nr(e, t, n, r) {
+	return e.columns.map((e) => e.components.map((e) => e.cases.map((i) => {
+		let a = z(e, i.name, t), o = B(e, i.name, t), s = H(a, n?.[a], r?.[o]?.frameState);
+		return `${e.coordinate}:${i.name}:${dr(s)}`;
+	}).join(";")).join(",")).join("|");
+}
+function rr(e, t, n, r, i) {
+	let a = ze(e).map((e) => F({
+		caseChromeHeight: 21,
+		gap: 14,
+		items: sr(e, Jn(e, t, n, r, i), t),
+		maxSide: qn(t, e.cases.length),
+		minScale: Kn
+	}).previewScale);
+	return a.length > 0 ? Math.min(1, ...a) : 1;
+}
+function ir(e, t, n, r, i = {}) {
+	let a = [], o;
+	return e.columns.forEach((s, c) => {
+		let l = n[c] ?? {
+			x: 0,
+			y: 0
+		}, u = r[c]?.cardRectsByCoordinate ?? {}, d = r[c]?.previewFrameRectsBySessionId ?? {};
+		for (let n of s.components) {
+			let r = u[n.coordinate];
+			if (!r) continue;
+			let s = /* @__PURE__ */ new Set();
+			for (let e of n.cases) {
+				let r = z(n, e.name, t), i = d[r];
+				i && (s.add(r), a.push({
+					rect: {
+						bottom: l.y + i.bottom,
+						left: l.x + i.left,
+						right: l.x + i.right,
+						top: l.y + i.top
+					},
+					sessionIds: [r]
+				}));
+			}
+			s.size !== n.cases.length && (o ??= rr(e, t, i.frameStates, i.previewCache, i.previewGeometryStore), a.push(...cr({
+				cardRect: r,
+				casePreviewScale: o,
+				columnLayout: l,
+				component: n,
+				measuredSessionIds: s,
+				previewCache: i.previewCache,
+				previewGeometryStore: i.previewGeometryStore,
+				frameStates: i.frameStates,
+				viewportPreset: t
+			})));
+		}
+	}), a;
+}
+function ar(e, t) {
+	let n = Object.keys(e), r = Object.keys(t);
+	return n.length === r.length ? n.every((n) => {
+		let r = e[Number(n)], i = t[Number(n)];
+		return r?.x === i?.x && r?.y === i?.y;
+	}) : !1;
+}
+function or(e, t) {
+	let n = Object.keys(e), r = Object.keys(t);
+	return n.length === r.length ? n.every((n) => {
+		let r = Number(n), i = e[r], a = t[r];
+		return !i || !a || i.height !== a.height ? !1 : pr(i.cardRectsByCoordinate, a.cardRectsByCoordinate) && pr(i.previewFrameRectsBySessionId ?? {}, a.previewFrameRectsBySessionId ?? {});
+	}) : !1;
+}
+function sr(e, t, n) {
+	return e.cases.map((r) => {
+		let i = t[r.name], a = V(n, i?.size), o = Re(lr(i?.tree, e.coordinate), a);
+		return {
+			height: d(a, o),
+			width: Number(f(a, o))
+		};
+	});
+}
+function cr(e) {
+	let t = Jn(e.component, e.viewportPreset, e.frameStates, e.previewCache, e.previewGeometryStore), n = sr(e.component, t, e.viewportPreset), r = F({
+		caseChromeHeight: 21,
+		gap: 14,
+		items: n,
+		maxSide: qn(e.viewportPreset, e.component.cases.length),
+		minScale: Kn,
+		previewScale: e.casePreviewScale
+	}), i = e.cardRect.left, a = e.cardRect.bottom - r.height, o = [];
+	return e.component.cases.forEach((t, s) => {
+		let c = z(e.component, t.name, e.viewportPreset);
+		if (e.measuredSessionIds.has(c)) return;
+		let l = n[s];
+		if (!l) return;
+		let u = s % r.columns, d = Math.floor(s / r.columns), f = i + u * (r.cellWidth + r.gap), p = a + d * (r.cellHeight + r.gap), m = Math.ceil(l.width * r.previewScale), h = Math.ceil(l.height * r.previewScale), g = f + (r.cellWidth - m) / 2, _ = p + 21;
+		o.push({
+			rect: {
+				bottom: e.columnLayout.y + _ + h,
+				left: e.columnLayout.x + g,
+				right: e.columnLayout.x + g + m,
+				top: e.columnLayout.y + _
+			},
+			sessionIds: [c]
+		});
+	}), o;
+}
+function lr(e, t) {
+	return e ? ur(e, t)?.rect : void 0;
+}
+function ur(e, t) {
+	for (let n of e) {
+		if (n.coordinate === t) return n;
+		let e = ur(n.children, t);
+		if (e) return e;
+	}
+}
+function dr(e) {
+	return e ? `${e.size ? `${e.size.width}x${e.size.height}` : "-"}:${fr(e.tree)}` : "pending";
+}
+function fr(e) {
+	if (!e) return "-";
+	let t = [], n = (e) => {
+		let r = e.rect ? `${e.rect.x},${e.rect.y},${e.rect.width},${e.rect.height}` : "-";
+		t.push(`${e.coordinate}@${r}`);
+		for (let t of e.children) n(t);
+	};
+	for (let t of e) n(t);
+	return t.join(";");
+}
+function pr(e, t) {
+	let n = Object.keys(e), r = Object.keys(t);
+	return n.length === r.length ? n.every((n) => mr(e[n], t[n])) : !1;
+}
+function mr(e, t) {
+	return e?.bottom === t?.bottom && e?.left === t?.left && e?.right === t?.right && e?.top === t?.top;
+}
+//#endregion
+//#region src/studio-preview-render-observation.ts
+function hr(e) {
+	let t, n, r = 0, i = () => ({
+		fullRender: t ? yr(t) : void 0,
+		scrollResponse: n ? vr(n) : void 0,
+		sequence: r
+	});
+	return {
+		observePreviewTiming(a) {
+			let o = e.now(), s = !1;
+			return n && n.sessionIds.has(a.sessionId) && (s = _r(n, a.sessionId, o) || s), t && t.sessionIds.has(a.sessionId) && (s = _r(t, a.sessionId, o) || s), s && (r += 1), i();
+		},
+		observeQueueRun(a) {
+			let o = e.now();
+			if (a.renderBudget === "canvas-movement") {
+				let e = a.newVisibleSessionIds === void 0 ? a.visibleSessionIds ?? [] : a.newVisibleSessionIds;
+				(e.length > 0 || a.newVisibleSessionIds === void 0 && !n) && (n = gr(e, o));
+			}
+			if (a.renderBudget === "normal" && a.renderScope === "buffer") {
+				let e = a.newSessionIds === void 0 ? a.nextSessionIds ?? [] : a.newSessionIds;
+				(e.length > 0 || a.newSessionIds === void 0 && !t) && (t = gr(e, o));
+			}
+			return r += 1, i();
+		},
+		snapshot: i
+	};
+}
+function gr(e, t) {
+	return {
+		completedSessionIds: /* @__PURE__ */ new Set(),
+		sessionIds: new Set(e),
+		startedAtMilliseconds: t
+	};
+}
+function _r(e, t, n) {
+	if (e.completedSessionIds.has(t)) return !1;
+	e.completedSessionIds.add(t);
+	let r = Math.max(0, n - e.startedAtMilliseconds);
+	return e.firstCompletionMilliseconds ??= r, e.latestCompletionMilliseconds = r, !0;
+}
+function vr(e) {
+	return {
+		completedVisibleSessionCount: e.completedSessionIds.size,
+		firstVisibleCompletionMilliseconds: X(e.firstCompletionMilliseconds),
+		latestVisibleCompletionMilliseconds: X(e.latestCompletionMilliseconds),
+		pendingVisibleSessionCount: Math.max(0, e.sessionIds.size - e.completedSessionIds.size),
+		startedAtMilliseconds: X(e.startedAtMilliseconds) ?? 0,
+		visibleSessionCount: e.sessionIds.size
+	};
+}
+function yr(e) {
+	let t = X(e.latestCompletionMilliseconds);
+	return {
+		completedSessionCount: e.completedSessionIds.size,
+		firstCompletionMilliseconds: X(e.firstCompletionMilliseconds),
+		latestCompletionMilliseconds: t,
+		pendingSessionCount: Math.max(0, e.sessionIds.size - e.completedSessionIds.size),
+		renderCompletionsPerSecond: t && t > 0 ? br(e.completedSessionIds.size / (t / 1e3)) : void 0,
+		sessionCount: e.sessionIds.size,
+		startedAtMilliseconds: X(e.startedAtMilliseconds) ?? 0
+	};
+}
+function X(e) {
+	return typeof e == "number" && Number.isFinite(e) ? Math.round(e * 10) / 10 : void 0;
+}
+function br(e) {
+	return Math.round(e * 10) / 10;
+}
+//#endregion
+//#region src/use-studio-canvas-controller.ts
+var xr = typeof window > "u" ? a.useEffect : a.useLayoutEffect, Sr = 1500;
+function Cr(e) {
+	let [t, n] = a.useState(() => C()), [r, i] = a.useState(null), [o, s] = a.useState(null), c = e.canvas ?? t, l = a.useRef(c), u = a.useRef(null), d = a.useRef(null), f = a.useRef(null), p = a.useRef(e.onCanvasChange), m = a.useRef(e.onCanvasMove), h = a.useRef(e.onCanvasPanEnd), g = a.useRef(e.shouldHandleWheelTarget);
+	p.current = e.onCanvasChange, m.current = e.onCanvasMove, h.current = e.onCanvasPanEnd, g.current = e.shouldHandleWheelTarget;
+	let _ = a.useCallback((e) => {
+		let t = u.current;
+		t && (t.style.transform = Qn(e)), Jt(e);
+	}, []), v = a.useCallback((e) => {
+		let t = e(l.current);
+		Dr(l.current, t) || (l.current = t, _(t), m.current(t), p.current ? p.current(t) : n(t));
+	}, [_]), y = a.useCallback((e, t) => {
+		if (!o) return;
+		let n = o.getBoundingClientRect(), r = {
+			x: e - n.left,
+			y: t - n.top
+		};
+		Er(r, n) && (d.current = {
+			...r,
+			observedAtMilliseconds: Or()
+		});
+	}, [o]);
+	xr(() => {
+		Dr(l.current, c) || (l.current = c, _(c), m.current(c));
+	}, [c, _]);
+	let b = a.useCallback((e) => {
+		u.current = e, e && (e.style.transform = Qn(l.current)), i(e);
+	}, []), x = a.useCallback((e) => {
+		s(e);
+	}, []), S = a.useCallback((e) => {
+		f.current?.pointerId === e.pointerId && (f.current = null, h.current());
+	}, []), w = a.useCallback((e) => {
+		if (y(e.clientX, e.clientY), !e.target.closest("a,button,iframe")) {
+			f.current = {
+				pointerId: e.pointerId,
+				startX: e.clientX,
+				startY: e.clientY,
+				originX: l.current.x,
+				originY: l.current.y
+			};
+			try {
+				e.currentTarget.setPointerCapture(e.pointerId);
+			} catch {}
+		}
+	}, [y]), T = a.useCallback((e) => {
+		y(e.clientX, e.clientY);
+		let t = f.current;
+		!t || t.pointerId !== e.pointerId || v((n) => ({
+			...n,
+			x: t.originX + e.clientX - t.startX,
+			y: t.originY + e.clientY - t.startY
+		}));
+	}, [v, y]), E = a.useCallback((e) => {
+		y(e.clientX, e.clientY), f.current?.pointerId === e.pointerId && (f.current = null, h.current());
+	}, [y]);
+	return a.useEffect(() => {
+		if (!o) return;
+		let e = (e) => {
+			if (!g.current(e.target)) return;
+			e.preventDefault();
+			let t = o.getBoundingClientRect(), n = Tr(e, t), r = Or(), i = d.current, a = e.ctrlKey || e.metaKey ? wr({
+				eventViewportPoint: n,
+				lastKnownPointerAgeMilliseconds: i ? r - i.observedAtMilliseconds : void 0,
+				lastKnownPointerViewportPoint: i,
+				viewportSize: {
+					height: t.height,
+					width: t.width
+				}
+			}) : void 0;
+			n && Er(n, t) && (d.current = {
+				...n,
+				observedAtMilliseconds: r
+			}), v((n) => De(n, {
+				clientX: e.clientX,
+				clientY: e.clientY,
+				ctrlKey: e.ctrlKey,
+				deltaMode: e.deltaMode,
+				deltaX: e.deltaX,
+				deltaY: e.deltaY,
+				focalViewportX: a?.x,
+				focalViewportY: a?.y,
+				metaKey: e.metaKey,
+				viewportLeft: t.left,
+				viewportTop: t.top
+			}));
+		};
+		return o.addEventListener("wheel", e, { passive: !1 }), () => o.removeEventListener("wheel", e);
+	}, [o, v]), a.useMemo(() => ({
+		canvas: c,
+		canvasRef: l,
+		canvasSurfaceElement: r,
+		canvasViewportElement: o,
+		moveCanvas: v,
+		onCanvasPointerCancel: S,
+		onCanvasPointerDown: w,
+		onCanvasPointerMove: T,
+		onCanvasPointerUp: E,
+		setCanvasSurfaceElement: b,
+		setCanvasViewportElement: x
+	}), [
+		c,
+		r,
+		o,
+		v,
+		S,
+		w,
+		T,
+		E,
+		b,
+		x
+	]);
+}
+function wr(e) {
+	let t = e.lastKnownPointerViewportPoint, n = t !== null && Er(t, e.viewportSize), r = typeof e.lastKnownPointerAgeMilliseconds == "number" && e.lastKnownPointerAgeMilliseconds <= Sr;
+	return n && r ? t : e.eventViewportPoint && Er(e.eventViewportPoint, e.viewportSize) ? e.eventViewportPoint : n ? t : {
+		x: e.viewportSize.width / 2,
+		y: e.viewportSize.height / 2
+	};
+}
+function Tr(e, t) {
+	if (!(e.clientX === 0 && e.clientY === 0)) return {
+		x: e.clientX - t.left,
+		y: e.clientY - t.top
+	};
+}
+function Er(e, t) {
+	return e.x >= 0 && e.y >= 0 && e.x <= t.width && e.y <= t.height;
+}
+function Dr(e, t) {
+	return e.x === t.x && e.y === t.y && e.scale === t.scale;
+}
+function Or() {
+	return typeof performance < "u" ? performance.now() : Date.now();
+}
+//#endregion
+//#region src/use-studio-canvas-layout.ts
+var kr = typeof window > "u" ? a.useEffect : a.useLayoutEffect, Ar = 40;
+function jr(e) {
+	let [t, n] = a.useState({}), [r, i] = a.useState({}), [o, s] = a.useState(() => rr(e.workspace, e.canvasViewportPreset, e.frameStates, e.previewCache, e.previewGeometryStore)), c = a.useRef(/* @__PURE__ */ new Map()), l = a.useRef(/* @__PURE__ */ new Map()), u = a.useRef(/* @__PURE__ */ new Map()), d = a.useRef(t), f = a.useRef(r), p = a.useRef(0), m = a.useRef(e.onLayoutMeasured), h = a.useMemo(() => e.previewGeometryStore ? void 0 : nr(e.workspace, e.canvasViewportPreset, e.frameStates, e.previewCache), [
+		e.canvasViewportPreset,
+		e.frameStates,
+		e.previewCache,
+		e.previewGeometryStore,
+		e.workspace
+	]);
+	m.current = e.onLayoutMeasured;
+	let g = a.useCallback((e, t, n) => {
+		let r = tr(e, t);
+		n ? (c.current.set(t, n), l.current.set(r, n)) : (c.current.get(t) === l.current.get(r) && c.current.delete(t), l.current.delete(r));
+	}, []), _ = a.useCallback((e, t) => {
+		t ? u.current.set(e, t) : u.current.delete(e);
+	}, []), v = a.useCallback((e, t) => l.current.get(tr(e, t)) ?? c.current.get(t), []), y = a.useCallback(() => {
+		let t = rr(e.workspace, e.canvasViewportPreset, e.frameStates, e.previewCache, e.previewGeometryStore);
+		s((e) => e === t ? e : t);
+	}, [
+		e.canvasViewportPreset,
+		e.frameStates,
+		e.previewCache,
+		e.previewGeometryStore,
+		e.workspace
+	]), b = a.useCallback(() => {
+		if (!e.canvasSurfaceElement) return;
+		let t = {};
+		e.workspace.columns.forEach((n, r) => {
+			let i = u.current.get(r);
+			if (!i) return;
+			let a = i.getBoundingClientRect(), o = {}, s = {};
+			for (let t of n.components) {
+				let n = l.current.get(tr(r, t.coordinate));
+				if (n) {
+					o[t.coordinate] = Zn(n.getBoundingClientRect(), a, e.canvasRef.current.scale);
+					for (let t of n.querySelectorAll("[data-gtsx-preview-session-id]")) {
+						let n = t.dataset.gtsxPreviewSessionId;
+						n && (s[n] = Zn(t.getBoundingClientRect(), a, e.canvasRef.current.scale));
+					}
+				}
+			}
+			t[r] = {
+				cardRectsByCoordinate: o,
+				height: a.height / e.canvasRef.current.scale,
+				previewFrameRectsBySessionId: s
+			};
+		});
+		let r = ke({
+			columns: e.workspace.columns.map((e) => ({
+				componentCoordinates: e.components.map((e) => e.coordinate),
+				parentCoordinate: e.parentCoordinate
+			})),
+			margin: Ar,
+			measurementsByIndex: t
+		}), a = !or(f.current, t), o = !ar(d.current, r);
+		f.current = t, d.current = r, i((e) => or(e, t) ? e : t), n((e) => ar(e, r) ? e : r), (a || o) && m.current();
+	}, [
+		e.canvasRef,
+		e.canvasSurfaceElement,
+		e.workspace.columns
+	]), x = a.useCallback(() => {
+		if (y(), typeof window > "u") {
+			b();
+			return;
+		}
+		p.current ||= window.requestAnimationFrame(() => {
+			p.current = 0, b();
+		});
+	}, [b, y]);
+	return kr(() => {
+		y(), b();
+	}, [
+		e.canvasSurfaceElement,
+		h,
+		b,
+		y
+	]), a.useEffect(() => () => {
+		p.current && window.cancelAnimationFrame(p.current);
+	}, []), {
+		casePreviewScale: o,
+		columnLayoutByIndex: t,
+		columnLayoutByIndexRef: d,
+		columnMeasurementsByIndexRef: f,
+		getCardElement: v,
+		layoutMeasurementKey: h,
+		scheduleMeasurement: x,
+		setCardElement: g,
+		setColumnElement: _
+	};
+}
+//#endregion
+//#region src/studio-preview-render-request-policy.ts
+var Z = {
+	renderBudget: "normal",
+	renderScope: "buffer"
+}, Mr = {
+	renderBudget: "normal",
+	renderScope: "visible"
+}, Nr = {
+	renderBudget: "canvas-movement",
+	renderScope: "buffer"
+};
+function Pr(e, t) {
+	return Fr(e, Q(t));
+}
+function Fr(e, t) {
+	if (t.renderScope === Z.renderScope && t.renderBudget === Z.renderBudget) return e;
+	let n = { ...e };
+	return t.renderScope === "visible" && (n.includeBufferedRenderTasks = !1), t.renderBudget === "canvas-movement" && (n.maximumConcurrentRenderTasks = e?.maximumConcurrentRenderTasksDuringCanvasMovement ?? 4, n.minimumVisibleRenderTasks = e?.minimumVisibleRenderTasksDuringCanvasMovement ?? 4), n;
+}
+function Ir(e, t) {
+	return Rr(Lr(e ? Q(e) : null, Q(t)));
+}
+function Lr(e, t) {
+	return e ? {
+		renderBudget: e.renderBudget === "canvas-movement" && t.renderBudget === "canvas-movement" ? "canvas-movement" : "normal",
+		renderScope: e.renderScope === "buffer" || t.renderScope === "buffer" ? "buffer" : "visible"
+	} : t;
+}
+function Q(e) {
+	return {
+		renderBudget: e.useCanvasMovementRenderTaskLimit === !0 ? "canvas-movement" : "normal",
+		renderScope: e.includeBuffer === !1 ? "visible" : "buffer"
+	};
+}
+function Rr(e) {
+	return {
+		includeBuffer: e.renderScope === "buffer",
+		useCanvasMovementRenderTaskLimit: e.renderBudget === "canvas-movement"
+	};
+}
+//#endregion
+//#region src/studio-preview-render-request-clock.ts
+function zr(e) {
+	let t = e.scheduler ?? Ur(), n = 0, r = 0, i = 0, a = 0, o = 0, s, c, l = null, u = (e) => {
+		t && (e === "active" && n && (t.clearTimeout(n), n = 0), e === "bufferRenderDelay" && i && (t.clearTimeout(i), i = 0), e === "canvasThrottle" && a && (t.clearTimeout(a), a = 0), e === "idle" && o && (t.clearTimeout(o), o = 0));
+	}, d = () => Br(s, e.getRenderQueueOptions(), t), f = () => d() ? Nr : i ? Mr : Z, p = (t, n) => {
+		e.runRenderRequest(t, n) && g();
+	}, m = (n) => {
+		l = Lr(l, n), t && (r ||= t.requestAnimationFrame(() => {
+			r = 0;
+			let t = l ?? Z;
+			l = null, p(e.getCanvas(), t);
+		}));
+	}, h = () => {
+		m(f());
+	}, g = () => {
+		if (!t) return;
+		u("active");
+		let r = Vr(e.getRenderQueueOptions()?.activeRenderTimeoutMilliseconds ?? 5e3);
+		r !== void 0 && (n = t.setTimeout(() => {
+			n = 0, h();
+		}, r + 16));
+	}, _ = () => {
+		if (!t) return;
+		let n = $(e.getRenderQueueOptions()?.renderDebounceMilliseconds, 120), r = $(e.getRenderQueueOptions()?.bufferRenderDelayMilliseconds, kt);
+		if (n <= 0) {
+			u("idle"), u("bufferRenderDelay"), m(Z);
+			return;
+		}
+		u("idle"), u("bufferRenderDelay"), o = t.setTimeout(() => {
+			if (o = 0, m(Mr), r <= 0) {
+				m(Z);
+				return;
+			}
+			i = t.setTimeout(() => {
+				i = 0, m(Z);
+			}, r);
+		}, n);
+	}, v = () => {
+		if (!t) {
+			p(e.getCanvas(), Z);
+			return;
+		}
+		let n = $(e.getRenderQueueOptions()?.bufferRenderDelayMilliseconds, kt);
+		if (u("bufferRenderDelay"), m(Mr), n <= 0) {
+			m(Z);
+			return;
+		}
+		i = t.setTimeout(() => {
+			i = 0, m(Z);
+		}, n);
+	}, y = (e) => {
+		c = Hr(t), p(e, Nr);
+	}, b = (n) => {
+		if (!t) {
+			y(n);
+			return;
+		}
+		let r = $(e.getRenderQueueOptions()?.renderThrottleMilliseconds, 100);
+		if (r <= 0) {
+			u("canvasThrottle"), y(n);
+			return;
+		}
+		let i = t.now(), o = c === void 0 ? r : i - c;
+		if (o >= r) {
+			u("canvasThrottle"), y(n);
+			return;
+		}
+		a ||= t.setTimeout(() => {
+			a = 0, y(e.getCanvas());
+		}, Math.max(0, r - o));
+	};
+	return {
+		dispose() {
+			t && r && t.cancelAnimationFrame(r), r = 0, l = null, u("active"), u("bufferRenderDelay"), u("canvasThrottle"), u("idle");
+		},
+		flushRenderRequest(n = e.getCanvas(), i = {}) {
+			t && r && t.cancelAnimationFrame(r), r = 0, l = null, u("bufferRenderDelay"), p(n, Q(i));
+		},
+		requestBufferedRender() {
+			v();
+		},
+		requestCanvasMovementRender(n = e.getCanvas()) {
+			s = Hr(t), b(n), _();
+		},
+		requestRenderAfterPreviewCompletion() {
+			h();
+		}
+	};
+}
+function Br(e, t, n) {
+	if (e === void 0) return !1;
+	let r = $(t?.renderDebounceMilliseconds, 120);
+	return r > 0 && Hr(n) - e < r;
+}
+function Vr(e) {
+	return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : void 0;
+}
+function $(e, t) {
+	return typeof e == "number" && Number.isFinite(e) && e >= 0 ? Math.floor(e) : t;
+}
+function Hr(e) {
+	return e ? e.now() : typeof performance < "u" ? performance.now() : Date.now();
+}
+function Ur() {
+	if (!(typeof window > "u")) return {
+		cancelAnimationFrame(e) {
+			window.cancelAnimationFrame(e);
+		},
+		clearTimeout(e) {
+			window.clearTimeout(e);
+		},
+		now() {
+			return Hr(void 0);
+		},
+		requestAnimationFrame(e) {
+			return window.requestAnimationFrame(e);
+		},
+		setTimeout(e, t) {
+			return window.setTimeout(e, t);
+		}
+	};
+}
+//#endregion
+//#region src/studio-preview-render-completion-source.ts
+function Wr(e) {
+	return e.previewGeometryStore ? Kr(e.previewGeometryStore) : Gr(e.frameStates);
+}
+function Gr(e) {
+	let t = qr(e);
+	return { completedSessionIdsFor() {
+		return new Set(t);
+	} };
+}
+function Kr(e) {
+	return { completedSessionIdsFor(t) {
+		return Jr(e, t);
+	} };
+}
+function qr(e) {
+	let t = /* @__PURE__ */ new Set();
+	if (!e) return t;
+	for (let [n, r] of Object.entries(e)) (r.ready || r.error) && t.add(n);
+	return t;
+}
+function Jr(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	for (let r of t) {
+		let t = e.getFrameState(r);
+		(t?.ready || t?.error) && n.add(r);
+	}
+	return n;
+}
+//#endregion
+//#region src/studio-preview-render-plan.ts
+function Yr(e) {
+	let t = ir(e.workspace, e.canvasViewportPreset, e.columnLayoutByIndex, e.columnMeasurementsByIndex, {
+		frameStates: e.frameStates,
+		previewCache: e.previewCache,
+		previewGeometryStore: e.previewGeometryStore
+	}), n = Qr(e.currentSessionIds, e.completedSessionIds, e.mountedAtBySessionId, e.activeRenderTimeoutMilliseconds ?? 5e3), r = {
+		activeSessionIds: n,
+		canvas: e.canvas,
+		canvasMovement: e.canvasMovement,
+		completedSessionIds: e.completedSessionIds,
+		currentSessionIds: e.currentSessionIds,
+		items: t,
+		viewport: e.viewport,
+		...e.queueOptions
+	}, i = At(r), a = Nt(r, i), o = Xr(t, e.canvas, e.viewport);
+	return {
+		activeSessionIds: n,
+		allVisibleSessionIds: o,
+		completedSessionIds: e.completedSessionIds,
+		hasIncompleteVisibleRenderTasks: Zr(o, e.completedSessionIds),
+		nextSessionIds: i,
+		viewport: e.viewport,
+		visibleSessionIds: a,
+		visibilityItems: t,
+		visibleRects: $r(t, a, e.canvas)
+	};
+}
+function Xr(e, t, n) {
+	let r = /* @__PURE__ */ new Set();
+	for (let i of e) if (!(ei(bt(t, i.rect), n) <= 0)) for (let e of i.sessionIds) r.add(e);
+	return r;
+}
+function Zr(e, t) {
+	if (e.size === 0) return !1;
+	for (let n of e) if (!t.has(n)) return !0;
+	return !1;
+}
+function Qr(e, t, n, r) {
+	let i = /* @__PURE__ */ new Set(), a = ti();
+	for (let o of e) {
+		if (t.has(o)) continue;
+		let e = n.get(o) ?? a;
+		(r === void 0 || a - e < r) && i.add(o);
+	}
+	return i;
+}
+function $r(e, t, n) {
+	let r = [];
+	for (let i of e) for (let e of i.sessionIds) t.has(e) && r.push({
+		canvasRect: i.rect,
+		sessionId: e,
+		viewportRect: bt(n, i.rect)
+	});
+	return r;
+}
+function ei(e, t) {
+	return Math.max(0, Math.min(e.right, t.right) - Math.max(e.left, t.left)) * Math.max(0, Math.min(e.bottom, t.bottom) - Math.max(e.top, t.top));
+}
+function ti() {
+	return typeof performance < "u" ? performance.now() : Date.now();
+}
+//#endregion
+//#region src/use-studio-preview-render-scheduler.ts
+function ni(e) {
+	let t = a.useRef(void 0), n = a.useRef(e.canvasRef.current), r = a.useRef(/* @__PURE__ */ new Map()), i = a.useRef(e.previewRenderSessionStore.getSessionIds()), o = a.useCallback((a = e.canvasRef.current, o = Z) => {
+		if (!e.canvasViewportElement) return !1;
+		let s = Fr(e.previewRenderQueueRef.current, o), c = Wr({
+			frameStates: e.frameStatesRef.current,
+			previewGeometryStore: e.previewGeometryStore
+		}), l = li(n.current, a);
+		ui(l) && (t.current = l), n.current = a;
+		let u = ri({
+			activeRenderTimeoutMilliseconds: s?.activeRenderTimeoutMilliseconds ?? 5e3,
+			canvas: a,
+			canvasMovement: t.current,
+			canvasViewportElement: e.canvasViewportElement,
+			canvasViewportPreset: e.canvasViewportPresetRef.current,
+			columnLayoutByIndex: e.columnLayoutByIndexRef.current,
+			columnMeasurementsByIndex: e.columnMeasurementsByIndexRef.current,
+			completionSource: c,
+			frameStates: e.frameStatesRef.current,
+			mountedAtBySessionId: r.current,
+			previewGeometryStore: e.previewGeometryStore,
+			queueOptions: s,
+			sessionIds: i.current,
+			workspace: e.workspaceRef.current
+		});
+		if (!u) return !1;
+		let d = i.current, f = ci(u.nextSessionIds, d), p = ci(u.visibleSessionIds, d);
+		return mi({
+			canvas: a,
+			canvasMovement: t.current,
+			completedCount: u.completedSessionIds.size,
+			currentCount: i.current.size,
+			includeBuffer: o.renderScope === "buffer",
+			itemCount: u.visibilityItems.length,
+			maximumConcurrentRenderTasks: s?.maximumConcurrentRenderTasks ?? 24,
+			minimumVisibleRenderTasks: s?.minimumVisibleRenderTasks ?? 0,
+			nextCount: u.nextSessionIds.size,
+			nextSessionIds: [...u.nextSessionIds],
+			newSessionIds: f,
+			newVisibleSessionIds: p,
+			renderExpansionCenterViewportPoint: ai(u.viewport),
+			renderBudget: o.renderBudget,
+			renderScope: o.renderScope,
+			showRenderExpansionCenterPulse: oi(o),
+			visibleRects: u.visibleRects,
+			visibleCount: u.visibleSessionIds.size,
+			visibleSessionIds: [...u.visibleSessionIds],
+			viewportHeight: u.viewport.bottom,
+			viewportWidth: u.viewport.right,
+			useCanvasMovementRenderTaskLimit: o.renderBudget === "canvas-movement"
+		}), di(r.current, d, u.nextSessionIds), i.current = u.nextSessionIds, fi(e.previewRenderSessionStore, u.nextSessionIds, u.visibleSessionIds, { urgent: o.renderBudget === "canvas-movement" });
+	}, [
+		e.canvasRef,
+		e.canvasViewportElement,
+		e.canvasViewportPresetRef,
+		e.columnLayoutByIndexRef,
+		e.columnMeasurementsByIndexRef,
+		e.frameStatesRef,
+		e.previewGeometryStore,
+		e.previewRenderQueueRef,
+		e.previewRenderSessionStore,
+		e.workspaceRef
+	]), s = a.useCallback((t = e.canvasRef.current, n = Z) => o(t, n), [e.canvasRef, o]), c = a.useMemo(() => zr({
+		getCanvas: () => e.canvasRef.current,
+		getRenderQueueOptions: () => e.previewRenderQueueRef.current,
+		runRenderRequest: s
+	}), [
+		e.canvasRef,
+		e.previewRenderQueueRef,
+		s
+	]), l = a.useCallback((t = e.canvasRef.current) => {
+		c.requestBufferedRender(t);
+	}, [e.canvasRef, c]), u = a.useCallback((t = e.canvasRef.current, n = {}) => {
+		c.flushRenderRequest(t, n);
+	}, [e.canvasRef, c]), d = a.useCallback((t = e.canvasRef.current) => {
+		c.requestCanvasMovementRender(t);
+	}, [e.canvasRef, c]);
+	return a.useEffect(() => {
+		if (typeof window > "u") return;
+		let e = () => {
+			c.requestRenderAfterPreviewCompletion();
+		};
+		return window.addEventListener("gtsx:preview-timing", e), () => window.removeEventListener("gtsx:preview-timing", e);
+	}, [c]), a.useEffect(() => () => c.dispose(), [c]), {
+		flushPreviewRender: u,
+		requestCanvasPreviewRender: d,
+		requestPreviewRender: l
+	};
+}
+function ri(e) {
+	if (!e.canvasViewportElement) return;
+	let t = e.completionSource.completedSessionIdsFor(e.sessionIds), n = {
+		activeRenderTimeoutMilliseconds: e.activeRenderTimeoutMilliseconds,
+		canvas: e.canvas,
+		canvasMovement: e.canvasMovement,
+		canvasViewportPreset: e.canvasViewportPreset,
+		columnLayoutByIndex: e.columnLayoutByIndex,
+		columnMeasurementsByIndex: e.columnMeasurementsByIndex,
+		completedSessionIds: t,
+		currentSessionIds: e.sessionIds,
+		frameStates: e.frameStates,
+		mountedAtBySessionId: e.mountedAtBySessionId,
+		previewGeometryStore: e.previewGeometryStore,
+		queueOptions: e.queueOptions,
+		viewport: ii(e.canvasViewportElement),
+		workspace: e.workspace
+	}, r = Yr(n), i = new Set([...e.sessionIds, ...r.allVisibleSessionIds]), a = e.completionSource.completedSessionIdsFor(i);
+	return si(t, a) ? r : Yr({
+		...n,
+		completedSessionIds: a
+	});
+}
+function ii(e) {
+	let t = e.getBoundingClientRect();
+	return {
+		bottom: t.height,
+		left: 0,
+		right: t.width,
+		top: 0
+	};
+}
+function ai(e) {
+	return {
+		x: (e.left + e.right) / 2,
+		y: (e.top + e.bottom) / 2
+	};
+}
+function oi(e) {
+	return e.renderBudget === "normal" && e.renderScope === "buffer";
+}
+function si(e, t) {
+	if (e.size !== t.size) return !1;
+	for (let n of e) if (!t.has(n)) return !1;
+	return !0;
+}
+function ci(e, t) {
+	let n = [];
+	for (let r of e) t.has(r) || n.push(r);
+	return n;
+}
+function li(e, t) {
+	return {
+		x: t.x - e.x,
+		y: t.y - e.y
+	};
+}
+function ui(e) {
+	return Math.hypot(e.x, e.y) >= .001;
+}
+function di(e, t, n) {
+	let r = pi();
+	for (let i of n) !t.has(i) && !e.has(i) && e.set(i, r);
+	for (let t of e.keys()) n.has(t) || e.delete(t);
+}
+function fi(e, t, n, r) {
+	if (!r.urgent || typeof window > "u") return e.setSessionIds(t, n);
+	let i = !1;
+	return l(() => {
+		i = e.setSessionIds(t, n);
+	}), i;
+}
+function pi() {
+	return typeof performance < "u" ? performance.now() : Date.now();
+}
+function mi(e) {
+	if (typeof window > "u") return;
+	let t = new URLSearchParams(window.location.search).getAll("debug").join(",").split(",").map((e) => e.trim());
+	!t.includes("queue") && !t.includes("preview-queue") || (document.documentElement.setAttribute("data-gtsx-preview-queue-debug", JSON.stringify(e)), window.dispatchEvent(new CustomEvent("gtsx:preview-queue-debug", { detail: e })));
+}
+//#endregion
+//#region src/components/ComponentBoundsHitTarget.g.tsx
+function hi(e) {
+	return /* @__PURE__ */ s("div", {
+		"aria-hidden": "true",
+		"data-gtsx-card-select-coordinate": e.coordinate,
+		"data-gtsx-card-select-target": "component-bounds",
+		onClick: (t) => {
+			t.stopPropagation(), e.onSelect?.();
+		},
+		onPointerDown: (e) => e.stopPropagation(),
+		style: {
+			height: e.rect.height,
+			left: e.rect.x,
+			pointerEvents: "auto",
+			position: "absolute",
+			top: e.rect.y,
+			width: e.rect.width,
+			zIndex: 2
+		}
+	});
+}
+var gi = i("src/components/ComponentBoundsHitTarget.g.tsx#default", hi);
+gi.cases = { userCardBounds: { props: {
+	coordinate: "src/UserCard.g.tsx#default",
+	rect: {
+		x: 12,
+		y: 20,
+		width: 320,
+		height: 88
+	}
+} } };
+//#endregion
+//#region src/components/SelectedBoundaryOutline.g.tsx
+function _i(e) {
+	return /* @__PURE__ */ s("div", {
+		"aria-hidden": "true",
+		"data-gtsx-selection-outline": "true",
+		style: {
+			height: e.rect.height,
+			left: e.rect.x,
+			outline: "1px solid #0d99ff",
+			pointerEvents: "none",
+			position: "absolute",
+			top: e.rect.y,
+			width: e.rect.width,
+			zIndex: 1
+		}
+	});
+}
+var vi = i("src/components/SelectedBoundaryOutline.g.tsx#default", _i);
+vi.cases = { userCardSelected: { props: { rect: {
+	x: 12,
+	y: 20,
+	width: 320,
+	height: 88
+} } } };
+//#endregion
+//#region src/components/BufferedPreviewIframe.g.tsx
+function yi(e) {
+	return /* @__PURE__ */ s("iframe", {
+		"aria-hidden": "true",
+		loading: "eager",
+		ref: (t) => e.onPreviewFrameMount?.(e.slot.sessionId, t),
+		src: e.slot.previewUrl,
+		style: {
+			background: "transparent",
+			border: 0,
+			height: e.size.height,
+			left: 0,
+			pointerEvents: "none",
+			position: "absolute",
+			top: 0,
+			width: e.size.width,
+			zIndex: 1
+		},
+		tabIndex: -1,
+		title: e.slot.title
+	});
+}
+var bi = i("src/components/BufferedPreviewIframe.g.tsx#default", yi);
+bi.cases = { active: { props: {
+	size: {
+		width: 390,
+		height: 844
+	},
+	slot: {
+		previewUrl: "/gtsx?entry=src%2FUserCard.g.tsx%23default&case=ready&chrome=0",
+		sessionId: "src/UserCard.g.tsx#default:ready",
+		title: "UserCard preview"
+	}
+} } };
+//#endregion
+//#region src/components/StudioPreviewIframe.tsx
+function xi(e) {
+	let t = on();
+	return a.useEffect(() => {
+		if (!t) return e.onBorrowOriginChange?.("new"), () => e.onBorrowOriginChange?.(null);
+	}, [t, e.onBorrowOriginChange]), s(t ? rn : bi, { ...e });
+}
+//#endregion
+//#region src/components/LazyPreviewFrame.g.tsx
+function Si(e) {
+	return {
+		isVisibleRenderSession: Un(e.sessionId, e.debugPreviewQueue === !0),
+		shouldLoadFromRenderQueue: Wn(e.sessionId)
+	};
+}
+var Ci = r(Si);
+function wi(e) {
+	let [t, n] = a.useState(null), r = Ci(e), i = e.shouldLoad ?? r.shouldLoadFromRenderQueue, o = d(e.size, e.boundaryRect), l = f(e.size, e.boundaryRect), u = h(e.size, e.boundaryRect), g = p(e.boundaryRect, u), _ = m(e.boundaryRect, u), v = m(e.selectedBoundaryRect, u), y = 1 / Math.max(e.debugIndicatorScale ?? 1, .01), b = Di(e.frameState, i), x = t ?? "pending", S = Ei({
+		iframeOrigin: x,
+		isVisibleRenderSession: r.isVisibleRenderSession,
+		renderLifecycleState: b,
+		shouldLoad: i
+	});
+	return a.useEffect(() => {
+		i || n(null);
+	}, [i]), /* @__PURE__ */ c("div", {
+		"data-gtsx-preview-session-id": e["data-gtsx-preview-session-id"],
+		"data-gtsx-preview-src": e.previewUrl,
+		"data-gtsx-viewport-preset": e.viewportPreset,
+		style: {
+			height: o,
+			overflow: "visible",
+			position: "relative",
+			width: l
+		},
+		children: [
+			i ? /* @__PURE__ */ s("div", {
+				"data-gtsx-preview-clip": "true",
+				style: {
+					contain: "layout paint style",
+					height: o,
+					left: 0,
+					overflow: "hidden",
+					pointerEvents: "none",
+					position: "absolute",
+					top: 0,
+					width: l,
+					zIndex: 1
+				},
+				children: /* @__PURE__ */ s("div", {
+					style: {
+						height: e.size.height,
+						left: -g.x,
+						position: "absolute",
+						top: -g.y,
+						width: e.size.width
+					},
+					children: /* @__PURE__ */ s(xi, {
+						onBorrowOriginChange: e.debugPreviewPool || e.debugPreviewQueue ? n : void 0,
+						onPreviewFrameMount: e.onPreviewFrameMount,
+						size: e.size,
+						slot: {
+							previewUrl: e.previewUrl,
+							sessionId: e.sessionId,
+							title: e.title
+						}
+					})
+				})
+			}) : null,
+			e.debugPreviewQueue ? /* @__PURE__ */ c("span", {
+				"aria-label": "Preview render lifecycle",
+				"data-gtsx-preview-render-flow": S,
+				"data-gtsx-preview-render-iframe-origin": x,
+				"data-gtsx-preview-render-lifecycle": b,
+				"data-gtsx-preview-render-queued": i ? "true" : "false",
+				"data-gtsx-preview-render-visible": r.isVisibleRenderSession ? "true" : "false",
+				style: {
+					alignItems: "center",
+					background: "rgba(255,255,255,0.92)",
+					border: "1px solid rgba(216,222,232,0.96)",
+					borderRadius: 999,
+					bottom: 5,
+					boxShadow: "0 1px 5px rgba(31,35,40,0.16)",
+					display: "grid",
+					gap: 3,
+					gridTemplateColumns: "repeat(4, 6px)",
+					height: 12,
+					justifyContent: "center",
+					padding: "0 4px",
+					pointerEvents: "none",
+					position: "absolute",
+					right: 5,
+					transform: `scale(${y})`,
+					transformOrigin: "bottom right",
+					zIndex: 5
+				},
+				title: S,
+				children: [
+					/* @__PURE__ */ s(ki, {
+						active: i,
+						color: "#57606a"
+					}),
+					/* @__PURE__ */ s(ki, {
+						active: r.isVisibleRenderSession,
+						color: "#0d99ff"
+					}),
+					/* @__PURE__ */ s(ki, {
+						active: t !== null,
+						color: t === "new" ? "#fb8f2d" : "#2da44e"
+					}),
+					/* @__PURE__ */ s(ki, {
+						active: !0,
+						color: Oi(b)
+					})
+				]
+			}) : null,
+			e.debugPreviewQueue && i && r.isVisibleRenderSession ? /* @__PURE__ */ s("span", {
+				"aria-label": "Preview task dispatched from visible viewport",
+				"data-gtsx-preview-queue-origin": "visible",
+				style: {
+					background: "#0d99ff",
+					border: "1px solid rgba(255,255,255,0.92)",
+					borderRadius: 999,
+					boxShadow: "0 1px 5px rgba(31,35,40,0.25)",
+					height: 9,
+					pointerEvents: "none",
+					position: "absolute",
+					right: e.debugPreviewPool ? 18 : 5,
+					top: 5,
+					transform: `scale(${y})`,
+					transformOrigin: "top right",
+					width: 9,
+					zIndex: 4
+				},
+				title: "visible queue task"
+			}) : null,
+			e.debugPreviewPool && i && t ? /* @__PURE__ */ s("span", {
+				"aria-label": t === "pool" ? "Preview iframe reused from pool" : "Preview iframe created",
+				"data-gtsx-preview-pool-origin": t,
+				style: {
+					background: t === "pool" ? "#2da44e" : "#fb8f2d",
+					border: "1px solid rgba(255,255,255,0.92)",
+					borderRadius: 999,
+					boxShadow: "0 1px 5px rgba(31,35,40,0.25)",
+					height: 9,
+					pointerEvents: "none",
+					position: "absolute",
+					right: 5,
+					top: 5,
+					transform: `scale(${y})`,
+					transformOrigin: "top right",
+					width: 9,
+					zIndex: 4
+				},
+				title: t === "pool" ? "from pool" : "new iframe"
+			}) : null,
+			_ ? /* @__PURE__ */ s(gi, {
+				coordinate: e.coordinate,
+				onSelect: e.onSelect,
+				rect: _
+			}) : null,
+			v ? /* @__PURE__ */ s(vi, { rect: v }) : null
+		]
+	});
+}
+var Ti = i("src/components/LazyPreviewFrame.g.tsx#default", wi);
+Ti.cases = { loadedPhone: { props: {
+	"data-gtsx-preview-session-id": "src/UserCard.g.tsx#default:ready",
+	boundaryRect: {
+		x: 10,
+		y: 20,
+		width: 320,
+		height: 88
+	},
+	coordinate: "src/UserCard.g.tsx#default",
+	previewUrl: "/gtsx?entry=src%2FUserCard.g.tsx%23default&case=ready&chrome=0",
+	selectedBoundaryRect: {
+		x: 10,
+		y: 20,
+		width: 320,
+		height: 88
+	},
+	shouldLoad: !0,
+	size: {
+		width: 390,
+		height: 844
+	},
+	sessionId: "src/UserCard.g.tsx#default:ready",
+	title: "UserCard preview",
+	viewportPreset: "phone"
+} } };
+function Ei(e) {
+	return [
+		e.shouldLoad ? "queued" : "not-queued",
+		e.isVisibleRenderSession ? "visible" : "buffer",
+		`iframe-${e.iframeOrigin}`,
+		e.renderLifecycleState
+	].join(" -> ");
+}
+function Di(e, t) {
+	return e?.error ? "error" : e?.ready ? "ready" : t && e ? "rendering" : t ? "queued" : "idle";
+}
+function Oi(e) {
+	return e === "error" ? "#cf222e" : e === "ready" ? "#2da44e" : e === "rendering" ? "#bf8700" : e === "queued" ? "#0d99ff" : "#8c959f";
+}
+function ki(e) {
+	return /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		style: {
+			background: e.active ? e.color : "rgba(140,149,159,0.22)",
+			borderRadius: 999,
+			display: "block",
+			height: 6,
+			width: 6
+		}
+	});
+}
+//#endregion
+//#region src/components/PreviewError.g.tsx
+function Ai(e) {
+	return /* @__PURE__ */ c("div", {
+		role: "status",
+		style: {
+			background: "#fff8c5",
+			border: "1px solid #d4a72c",
+			borderRadius: 8,
+			color: "#5a1e02",
+			padding: 12
+		},
+		children: [
+			/* @__PURE__ */ s("strong", { children: "Preview unavailable" }),
+			/* @__PURE__ */ s("p", {
+				style: { margin: "6px 0 0" },
+				children: e.error.message
+			}),
+			e.error.stack ? /* @__PURE__ */ s("pre", {
+				style: { whiteSpace: "pre-wrap" },
+				children: e.error.stack
+			}) : null,
+			/* @__PURE__ */ c("dl", {
+				style: {
+					display: "grid",
+					gap: 4,
+					margin: "8px 0 0"
+				},
+				children: [
+					/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("dt", { children: "Entry" }), /* @__PURE__ */ s("dd", {
+						style: { margin: 0 },
+						children: e.coordinate
+					})] }),
+					/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("dt", { children: "Case" }), /* @__PURE__ */ s("dd", {
+						style: { margin: 0 },
+						children: e.caseName
+					})] }),
+					/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("dt", { children: "Preview URL" }), /* @__PURE__ */ s("dd", {
+						style: { margin: 0 },
+						children: /* @__PURE__ */ s("code", { children: e.previewUrl })
+					})] })
+				]
+			})
+		]
+	});
+}
+var ji = i("src/components/PreviewError.g.tsx#default", Ai);
+ji.cases = { renderFailure: { props: {
+	caseName: "ready",
+	coordinate: "src/UserCard.g.tsx#default",
+	error: {
+		message: "Cannot read properties of undefined",
+		stack: "TypeError: Cannot read properties of undefined\n    at UserCard"
+	},
+	previewUrl: "/gtsx?entry=src%2FUserCard.g.tsx%23default&case=ready&chrome=0"
+} } };
+//#endregion
+//#region src/components/ComponentCard.g.tsx
+function Mi(e) {
+	let t = Ri(e.component), n = Object.fromEntries(e.component.cases.map((t) => [t.name, e.caseFrameStates?.[t.name] ?? (t.name === e.selectedCaseName ? e.frameState : void 0)])), r = Object.fromEntries(e.component.cases.map((t) => [t.name, e.caseLayoutFrameStates?.[t.name] ?? n[t.name]])), i = e.component.cases.map((t) => {
+		let i = n[t.name], a = r[t.name], o = z(e.component, t.name, e.viewportPreset), s = V(e.viewportPreset, a?.size), c = R(e.manifest, e.component, t.name, o, { static: !0 }), l = Re(Li(a?.tree, e.component.coordinate), s), u = Number(f(s, l));
+		return {
+			displaySize: s,
+			frameState: i,
+			layoutHeight: d(s, l),
+			layoutWidth: u,
+			name: t.name,
+			previewUrl: c,
+			sessionId: o,
+			visibleBoundaryRect: l
+		};
+	}), a = F({
+		caseChromeHeight: 21,
+		gap: 14,
+		items: i.map((e) => ({
+			height: e.layoutHeight,
+			width: e.layoutWidth
+		})),
+		maxSide: qn(e.viewportPreset, i.length),
+		minScale: Kn,
+		previewScale: e.casePreviewScale
+	}), o = Math.max(280, a.width), l = e.columnIndex ?? 0, u = e.component.cases[0]?.name ?? e.selectedCaseName;
+	return /* @__PURE__ */ c("article", {
+		"aria-label": e.component.componentName,
+		"data-gtsx-card-coordinate": e.component.coordinate,
+		"data-gtsx-card-selected": e.selected ? "true" : void 0,
+		style: {
+			display: "grid",
+			gap: 8,
+			width: o
+		},
+		children: [/* @__PURE__ */ s("strong", {
+			style: {
+				color: "inherit",
+				fontSize: 13,
+				letterSpacing: 0,
+				lineHeight: 1.2,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			children: e.component.componentName
+		}), t ? /* @__PURE__ */ s(ji, {
+			caseName: u,
+			coordinate: e.component.coordinate,
+			error: { message: t },
+			previewUrl: R(e.manifest, e.component, u, void 0, { static: !0 })
+		}) : /* @__PURE__ */ s("div", {
+			"data-gtsx-case-grid": e.component.coordinate,
+			"data-gtsx-case-grid-columns": a.columns,
+			"data-gtsx-case-grid-preview-scale": a.previewScale,
+			"data-gtsx-case-grid-selected": e.selected ? "true" : void 0,
+			style: {
+				display: "grid",
+				gap: a.gap,
+				gridTemplateColumns: `repeat(${a.columns}, ${a.cellWidth}px)`,
+				outline: e.selected ? "1px solid #0d99ff" : void 0,
+				position: "relative",
+				width: a.width
+			},
+			children: i.map((t) => /* @__PURE__ */ c("div", {
+				"data-gtsx-case-tile": t.name,
+				onClick: () => e.onSelect?.(e.component, n, l, "pointer"),
+				onKeyDown: (t) => {
+					t.key !== "Enter" && t.key !== " " || (t.preventDefault(), e.onSelect?.(e.component, n, l, "keyboard"));
+				},
+				onPointerDown: (e) => e.stopPropagation(),
+				role: "button",
+				style: {
+					alignContent: "start",
+					cursor: e.onSelect ? "pointer" : "default",
+					display: "grid",
+					gap: 5,
+					minWidth: 0,
+					width: a.cellWidth
+				},
+				tabIndex: 0,
+				children: [/* @__PURE__ */ s("strong", {
+					style: {
+						color: "#57606a",
+						fontSize: 11,
+						lineHeight: "16px",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					children: t.name
+				}), /* @__PURE__ */ s("div", {
+					"data-gtsx-case-preview-frame": t.name,
+					"data-gtsx-case-preview-frame-state": Ii(t.frameState),
+					style: {
+						height: Math.ceil(t.layoutHeight * a.previewScale),
+						justifySelf: "center",
+						overflow: "visible",
+						position: "relative",
+						width: Math.ceil(t.layoutWidth * a.previewScale)
+					},
+					children: /* @__PURE__ */ c("div", {
+						style: {
+							height: t.layoutHeight,
+							left: 0,
+							position: "absolute",
+							top: 0,
+							transform: `scale(${a.previewScale})`,
+							transformOrigin: "0 0",
+							width: t.layoutWidth
+						},
+						children: [/* @__PURE__ */ s(Ti, {
+							"data-gtsx-preview-session-id": t.sessionId,
+							boundaryRect: t.visibleBoundaryRect,
+							coordinate: e.component.coordinate,
+							debugIndicatorScale: a.previewScale,
+							debugPreviewPool: e.debugPreviewPool,
+							debugPreviewQueue: e.debugPreviewQueue,
+							frameState: t.frameState,
+							onSelect: () => e.onSelect?.(e.component, n, l, "pointer"),
+							onPreviewFrameMount: e.onPreviewFrameMount,
+							previewUrl: t.previewUrl,
+							size: t.displaySize,
+							sessionId: t.sessionId,
+							title: `${e.component.componentName} ${t.name} preview`,
+							viewportPreset: e.viewportPreset
+						}), t.frameState?.error ? /* @__PURE__ */ s("div", {
+							style: {
+								inset: 0,
+								overflow: "auto",
+								position: "absolute",
+								zIndex: 2
+							},
+							children: /* @__PURE__ */ s(ji, {
+								caseName: t.name,
+								coordinate: e.component.coordinate,
+								error: t.frameState.error,
+								previewUrl: t.previewUrl
+							})
+						}) : null]
+					})
+				})]
+			}, t.name))
+		})]
+	});
+}
+var Ni = a.memo(Mi, Pi);
+Ni.cases = { selectedReady: { props: {
+	component: {
+		coordinate: "src/UserCard.g.tsx#default",
+		filePath: "src/UserCard.g.tsx",
+		exportName: "default",
+		componentName: "UserCard",
+		mode: "scope",
+		cases: [{
+			kind: "scope",
+			name: "ready"
+		}],
+		providers: {},
+		diagnostics: []
+	},
+	frameState: {
+		expectedSessionId: "src/UserCard.g.tsx#default:ready",
+		ready: !0,
+		tree: [{
+			id: "root",
+			coordinate: "src/UserCard.g.tsx#default",
+			rect: {
+				x: 10,
+				y: 20,
+				width: 320,
+				height: 88
+			},
+			children: []
+		}]
+	},
+	caseFrameStates: { ready: {
+		expectedSessionId: "src/UserCard.g.tsx#default:ready",
+		ready: !0,
+		tree: [{
+			id: "root",
+			coordinate: "src/UserCard.g.tsx#default",
+			rect: {
+				x: 10,
+				y: 20,
+				width: 320,
+				height: 88
+			},
+			children: []
+		}]
+	} },
+	manifest: {
+		version: 1,
+		routes: {
+			preview: "/gtsx",
+			studio: "/gtsx/studio",
+			manifest: "/gtsx/studio/manifest"
+		},
+		preview: {
+			urlTemplate: "/gtsx?entry={entry}&case={case}{gcase}",
+			allUrlTemplate: "/gtsx?entry={entry}{gcase}"
+		},
+		files: [],
+		diagnostics: []
+	},
+	selected: !0,
+	selectedCaseName: "ready",
+	viewportPreset: "phone"
+} } };
+function Pi(e, t) {
+	if (e.casePreviewScale !== t.casePreviewScale || e.columnIndex !== t.columnIndex || e.component !== t.component || e.debugPreviewPool !== t.debugPreviewPool || e.debugPreviewQueue !== t.debugPreviewQueue || e.frameState !== t.frameState || e.manifest !== t.manifest || e.onPreviewFrameMount !== t.onPreviewFrameMount || e.onSelect !== t.onSelect || e.selected !== t.selected || e.selectedCaseName !== t.selectedCaseName || e.viewportPreset !== t.viewportPreset) return !1;
+	for (let n of t.component.cases) if (!Fi(e.caseFrameStates?.[n.name], t.caseFrameStates?.[n.name]) || !Fi(e.caseLayoutFrameStates?.[n.name], t.caseLayoutFrameStates?.[n.name])) return !1;
+	return !0;
+}
+function Fi(e, t) {
+	return e === t || e?.expectedSessionId === t?.expectedSessionId && e?.ready === t?.ready && e?.tree === t?.tree && e?.size?.height === t?.size?.height && e?.size?.width === t?.size?.width && e?.error?.message === t?.error?.message && e?.error?.stack === t?.error?.stack && e?.valuesByBoundaryId === t?.valuesByBoundaryId;
+}
+function Ii(e) {
+	return e?.error ? "error" : e?.ready ? "ready" : "loading";
+}
+function Li(e, t) {
+	return e ? zi(e, t)?.rect : void 0;
+}
+function Ri(e) {
+	if (e.diagnostics.length > 0) return e.diagnostics.map((e) => e.code).join(", ");
+	if (!e.cases[0]) return "missing-case";
+}
+function zi(e, t) {
+	for (let n of e) {
+		if (n.coordinate === t) return n;
+		let e = zi(n.children, t);
+		if (e) return e;
+	}
+}
+//#endregion
+//#region src/components/StudioComponentCardSlot.tsx
+var Bi = typeof window > "u" ? a.useEffect : a.useLayoutEffect;
+function Vi(e) {
+	let t = a.useRef(e.onPreviewGeometryChange), n = a.useRef(e.onSelect);
+	t.current = e.onPreviewGeometryChange, n.current = e.onSelect;
+	let r = Wi({
+		component: e.component,
+		previewGeometryStore: e.previewGeometryStore,
+		viewportPreset: e.viewportPreset
+	}), i = a.useMemo(() => Yn(e.component, e.viewportPreset, e.fallbackFrameStates, e.fallbackPreviewCache, e.previewGeometryStore), [
+		e.component,
+		e.fallbackFrameStates,
+		e.fallbackPreviewCache,
+		e.previewGeometryStore,
+		e.viewportPreset,
+		r
+	]), o = a.useMemo(() => Jn(e.component, e.viewportPreset, e.fallbackFrameStates, e.fallbackPreviewCache, e.previewGeometryStore), [
+		e.component,
+		e.fallbackFrameStates,
+		e.fallbackPreviewCache,
+		e.previewGeometryStore,
+		e.viewportPreset,
+		r
+	]), c = Gi(e.component, o), l = a.useCallback((e, t, r, i) => {
+		n.current(e, t, r, i);
+	}, []);
+	return Bi(() => {
+		t.current?.();
+	}, [c]), /* @__PURE__ */ s(Ni, {
+		caseFrameStates: i,
+		caseLayoutFrameStates: o,
+		casePreviewScale: e.casePreviewScale,
+		columnIndex: e.columnIndex,
+		component: e.component,
+		debugPreviewPool: e.debugPreviewPool,
+		debugPreviewQueue: e.debugPreviewQueue,
+		manifest: e.manifest,
+		onPreviewFrameMount: e.onPreviewFrameMount,
+		onSelect: l,
+		selected: e.selected,
+		selectedCaseName: e.selectedCaseName,
+		viewportPreset: e.viewportPreset
+	});
+}
+var Hi = a.memo(Vi, Ui);
+function Ui(e, t) {
+	return e.casePreviewScale === t.casePreviewScale && e.columnIndex === t.columnIndex && e.component === t.component && e.debugPreviewPool === t.debugPreviewPool && e.debugPreviewQueue === t.debugPreviewQueue && e.fallbackFrameStates === t.fallbackFrameStates && e.fallbackPreviewCache === t.fallbackPreviewCache && e.manifest === t.manifest && e.onPreviewGeometryChange === t.onPreviewGeometryChange && e.onPreviewFrameMount === t.onPreviewFrameMount && e.onSelect === t.onSelect && e.previewGeometryStore === t.previewGeometryStore && e.selected === t.selected && e.selectedCaseName === t.selectedCaseName && e.viewportPreset === t.viewportPreset;
+}
+function Wi(e) {
+	let t = a.useMemo(() => e.previewGeometryStore ? ut({
+		component: e.component,
+		viewportPreset: e.viewportPreset
+	}) : [], [
+		e.component,
+		e.previewGeometryStore,
+		e.viewportPreset
+	]);
+	return a.useSyncExternalStore(a.useCallback((n) => e.previewGeometryStore?.subscribe(t, n) ?? (() => {}), [e.previewGeometryStore, t]), a.useCallback(() => e.previewGeometryStore?.getVersionForKeys(t) ?? "", [e.previewGeometryStore, t]), () => "");
+}
+function Gi(e, t) {
+	return e.cases.map((e) => `${e.name}:${Ki(t[e.name])}`).join("|");
+}
+function Ki(e) {
+	return e ? `${e.size ? `${e.size.width}x${e.size.height}` : "-"}:${qi(e.tree)}` : "pending";
+}
+function qi(e) {
+	if (!e) return "-";
+	let t = [], n = (e) => {
+		let r = e.rect ? `${e.rect.x},${e.rect.y},${e.rect.width},${e.rect.height}` : "-";
+		t.push(`${e.coordinate}@${r}`);
+		for (let t of e.children) n(t);
+	};
+	for (let t of e) n(t);
+	return t.join(";");
+}
+//#endregion
+//#region src/components/ViewportPresetTabs.g.tsx
+var Ji = [
+	"phone",
+	"tablet",
+	"desktop"
+];
+function Yi(e) {
+	let t = Math.max(0, Ji.indexOf(e.selectedPreset));
+	return /* @__PURE__ */ c("div", {
+		"aria-label": "Viewport",
+		"data-gtsx-floating-viewport-controls": e.floating ? !0 : void 0,
+		style: {
+			background: "rgba(255,255,255,0.82)",
+			border: "1px solid rgba(216,222,232,0.92)",
+			borderRadius: 999,
+			boxShadow: "0 10px 30px rgba(31,35,40,0.12)",
+			display: "grid",
+			gridTemplateColumns: `repeat(${Ji.length}, 34px)`,
+			...e.floating ? {
+				left: "50%",
+				position: "absolute",
+				top: 16,
+				transform: "translateX(-50%)",
+				zIndex: 3
+			} : {},
+			padding: 3,
+			position: e.floating ? "absolute" : "relative",
+			width: "max-content"
+		},
+		children: [/* @__PURE__ */ s("span", {
+			"aria-hidden": "true",
+			"data-gtsx-viewport-tab-highlight": e.floating ? !0 : void 0,
+			style: {
+				background: "#ffffff",
+				border: "1px solid #d8dee8",
+				borderRadius: 999,
+				boxShadow: "0 3px 10px rgba(31,35,40,0.12)",
+				height: 28,
+				left: 3,
+				position: "absolute",
+				top: 3,
+				transform: `translateX(${t * 34}px)`,
+				transition: "transform 120ms ease",
+				width: 32
+			}
+		}), Ji.map((t) => /* @__PURE__ */ s("button", {
+			"aria-label": `Viewport ${t}`,
+			"data-gtsx-viewport-control": t,
+			onClick: () => e.onChange?.(t),
+			style: {
+				alignItems: "center",
+				background: "transparent",
+				border: 0,
+				color: e.selectedPreset === t ? "#0969da" : "#57606a",
+				cursor: e.onChange ? "pointer" : "default",
+				display: "grid",
+				height: 28,
+				justifyItems: "center",
+				padding: 0,
+				position: "relative",
+				width: 32,
+				zIndex: 1
+			},
+			title: t,
+			type: "button",
+			children: /* @__PURE__ */ s(Zi, { preset: t })
+		}, t))]
+	});
+}
+var Xi = i("src/components/ViewportPresetTabs.g.tsx#default", Yi);
+Xi.cases = {
+	tabletSelected: { props: { selectedPreset: "tablet" } },
+	floatingPhoneSelected: { props: {
+		floating: !0,
+		selectedPreset: "phone"
+	} }
+};
+function Zi(e) {
+	return e.preset === "phone" ? /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		style: {
+			border: "1.5px solid currentColor",
+			borderRadius: 3,
+			height: 16,
+			width: 9
+		}
+	}) : e.preset === "tablet" ? /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		style: {
+			border: "1.5px solid currentColor",
+			borderRadius: 3,
+			height: 15,
+			width: 12
+		}
+	}) : /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		style: {
+			border: "1.5px solid currentColor",
+			borderRadius: 2,
+			height: 11,
+			width: 18
+		}
+	});
+}
+//#endregion
+//#region src/components/StudioWorkspaceView.g.tsx
+var Qi = typeof window > "u" ? a.useEffect : a.useLayoutEffect, $i = "[data-gtsx-canvas-wheel-exempt]", ea = 24;
+function ta(e) {
+	return !(typeof Element < "u" && e instanceof Element && e.closest($i));
+}
+function na(e) {
+	return typeof Element > "u" || !(e instanceof Element) || !e.closest("a,button,iframe");
+}
+function ra(e) {
+	let t = U(e.manifest, e.selection), [n, r] = a.useState(), i = I(e.workspace), o = a.useMemo(() => Bn(), []), s = a.useRef(i), c = a.useRef(e.frameStates), l = a.useRef(() => {}), u = a.useRef(() => {}), [d, f] = a.useState(), [p, m] = a.useState(), h = a.useRef(e.onSelectComponent), g = a.useRef(hr({ now: () => typeof performance < "u" ? performance.now() : Date.now() })), _ = a.useRef(e.previewRenderQueue), v = a.useRef(() => {}), y = a.useRef(e.workspace);
+	s.current = i, c.current = e.frameStates, h.current = e.onSelectComponent, _.current = e.previewRenderQueue, y.current = e.workspace;
+	let b = Cr({
+		canvas: e.canvas,
+		onCanvasChange: e.onChangeCanvas,
+		onCanvasMove(e) {
+			v.current(e);
+		},
+		onCanvasPanEnd() {
+			l.current(void 0, { includeBuffer: !0 });
+		},
+		shouldHandleWheelTarget: ta
+	}), x = a.useCallback(() => {
+		u.current(b.canvasRef.current);
+	}, [b.canvasRef]), S = jr({
+		canvasRef: b.canvasRef,
+		canvasSurfaceElement: b.canvasSurfaceElement,
+		canvasViewportPreset: i,
+		frameStates: e.frameStates,
+		onLayoutMeasured: x,
+		previewCache: e.previewCache,
+		previewGeometryStore: e.previewGeometryStore,
+		workspace: e.workspace
+	}), { flushPreviewRender: C, requestCanvasPreviewRender: w, requestPreviewRender: T } = ni({
+		canvasRef: b.canvasRef,
+		canvasViewportElement: b.canvasViewportElement,
+		canvasViewportPresetRef: s,
+		columnLayoutByIndexRef: S.columnLayoutByIndexRef,
+		columnMeasurementsByIndexRef: S.columnMeasurementsByIndexRef,
+		frameStatesRef: c,
+		previewGeometryStore: e.previewGeometryStore,
+		previewRenderQueueRef: _,
+		previewRenderSessionStore: o,
+		workspaceRef: y
+	});
+	l.current = C, u.current = T, v.current = w, Qi(() => {
+		T(b.canvasRef.current);
+	}, [b.canvasViewportElement, T]), a.useEffect(() => {
+		T(b.canvasRef.current);
+	}, [
+		i,
+		S.layoutMeasurementKey,
+		T
+	]), a.useEffect(() => {
+		e.previewGeometryStore || T(b.canvasRef.current);
+	}, [
+		e.frameStates,
+		e.previewGeometryStore,
+		T
+	]), a.useEffect(() => {
+		if (!e.debugPreviewQueue || typeof window > "u") return;
+		let t = g.current, n = 0, r = (e) => {
+			m(e), document.documentElement.setAttribute("data-gtsx-preview-render-observation", JSON.stringify(e)), window.dispatchEvent(new CustomEvent("gtsx:preview-render-observation", { detail: e }));
+		}, i = () => {
+			n = 0, f(void 0);
+		}, a = (e) => {
+			let a = e.detail;
+			r(t.observeQueueRun(a)), !(!a?.showRenderExpansionCenterPulse || !a.renderExpansionCenterViewportPoint) && (n && window.clearTimeout(n), f({
+				id: Date.now(),
+				x: a.renderExpansionCenterViewportPoint.x,
+				y: a.renderExpansionCenterViewportPoint.y
+			}), n = window.setTimeout(i, 650));
+		}, o = (e) => {
+			let n = e.detail;
+			!n?.sessionId || n.type !== "gtsx:ready" && n.type !== "gtsx:error" || r(t.observePreviewTiming({
+				sessionId: n.sessionId,
+				type: n.type
+			}));
+		};
+		return window.addEventListener("gtsx:preview-queue-debug", a), window.addEventListener("gtsx:preview-timing", o), () => {
+			window.removeEventListener("gtsx:preview-queue-debug", a), window.removeEventListener("gtsx:preview-timing", o), document.documentElement.removeAttribute("data-gtsx-preview-render-observation"), n && window.clearTimeout(n);
+		};
+	}, [e.debugPreviewQueue]), a.useEffect(() => {
+		r(void 0);
+	}, [e.selection]);
+	let E = a.useCallback((e, t, n = {}) => {
+		if (!b.canvasViewportElement) return;
+		let r = S.getCardElement(e, t);
+		if (!r) return;
+		let i = b.canvasRef.current, a = Oe(i, {
+			margin: ea,
+			rect: Xn(r.getBoundingClientRect()),
+			viewportRect: Xn(b.canvasViewportElement.getBoundingClientRect())
+		}), o = n.preserveVerticalCanvasPosition ? {
+			...a,
+			y: i.y
+		} : a;
+		o !== i && b.moveCanvas(() => o);
+	}, [b, S.getCardElement]), D = a.useCallback((e, t, n = {}) => {
+		E(e, t, n), !(typeof window > "u") && window.requestAnimationFrame(() => E(e, t, n));
+	}, [E]), O = a.useCallback((e, t, n, i) => {
+		let a = er($n(y.current, n, e.coordinate));
+		r((t) => Ae(t === a ? e.coordinate : void 0, {
+			type: "activate-card",
+			coordinate: e.coordinate,
+			source: i
+		}) ? a : void 0), h.current?.(e, t, { columnIndex: n }), D(n, e.coordinate, { preserveVerticalCanvasPosition: i === "pointer" });
+	}, [D]);
+	return {
+		canvas: b.canvas,
+		canvasViewportPreset: i,
+		columnLayoutByIndex: S.columnLayoutByIndex,
+		onCanvasPointerCancel: b.onCanvasPointerCancel,
+		onCanvasPointerDown(e) {
+			na(e.target) && r(void 0), b.onCanvasPointerDown(e);
+		},
+		onCanvasPointerMove: b.onCanvasPointerMove,
+		onCanvasPointerUp: b.onCanvasPointerUp,
+		onChangeSelection: e.onChangeSelection ? (t) => {
+			r(void 0), e.onChangeSelection?.(t);
+		} : void 0,
+		onSelectCard: O,
+		onPreviewGeometryChange: S.scheduleMeasurement,
+		onViewportPresetChange(t) {
+			if (e.onChangeCanvasViewportPreset) e.onChangeCanvasViewportPreset(t);
+			else for (let n of ze(e.workspace)) e.onChangeViewportPreset?.(n, t);
+		},
+		casePreviewScale: S.casePreviewScale,
+		renderObservationSnapshot: p,
+		renderExpansionCenterPulse: d,
+		previewRenderSessionStore: o,
+		selected: t,
+		selectedCardPathKey: n,
+		setCanvasSurfaceElement: b.setCanvasSurfaceElement,
+		setCanvasViewportElement: b.setCanvasViewportElement,
+		setCardElement: S.setCardElement,
+		setColumnElement: S.setColumnElement
+	};
+}
+var ia = r(ra);
+function aa(e) {
+	let t = ia(e), n = e.previewCacheReady ?? !0, r = typeof window > "u" ? Qn(t.canvas) : void 0;
+	return /* @__PURE__ */ s(Hn, {
+		store: t.previewRenderSessionStore,
+		children: /* @__PURE__ */ s("main", {
+			style: {
+				display: "grid",
+				height: "100vh",
+				overflow: "hidden",
+				background: "#f5f6f8",
+				color: "#1f2328",
+				fontFamily: "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
+			},
+			children: /* @__PURE__ */ s("section", {
+				style: {
+					display: "grid",
+					minHeight: 0,
+					minWidth: 0
+				},
+				children: /* @__PURE__ */ c("div", {
+					"aria-label": "GTSX Studio canvas viewport",
+					"data-gtsx-canvas-viewport": !0,
+					onPointerDown: t.onCanvasPointerDown,
+					onPointerMove: t.onCanvasPointerMove,
+					onPointerUp: t.onCanvasPointerUp,
+					onPointerCancel: t.onCanvasPointerCancel,
+					ref: t.setCanvasViewportElement,
+					"aria-busy": n ? void 0 : !0,
+					style: {
+						backgroundColor: "#f5f6f8",
+						backgroundImage: "radial-gradient(circle at 1px 1px, rgba(31,35,40,0.10) 1px, transparent 0)",
+						backgroundSize: "24px 24px",
+						cursor: "grab",
+						height: "100%",
+						minHeight: 0,
+						overscrollBehavior: "none",
+						overflow: "hidden",
+						position: "relative",
+						touchAction: "none"
+					},
+					role: "application",
+					tabIndex: 0,
+					children: [
+						/* @__PURE__ */ s(Xi, {
+							floating: !0,
+							onChange: t.onViewportPresetChange,
+							selectedPreset: t.canvasViewportPreset
+						}),
+						t.renderExpansionCenterPulse ? /* @__PURE__ */ s("span", {
+							"aria-label": "Preview render expansion center",
+							"data-gtsx-preview-render-expansion-center-pulse": "true",
+							style: {
+								background: "rgba(13,153,255,0.24)",
+								border: "2px solid #0d99ff",
+								borderRadius: 999,
+								boxShadow: "0 0 0 6px rgba(13,153,255,0.14)",
+								height: 18,
+								left: t.renderExpansionCenterPulse.x,
+								pointerEvents: "none",
+								position: "absolute",
+								top: t.renderExpansionCenterPulse.y,
+								transform: "translate(-50%, -50%)",
+								width: 18,
+								zIndex: 4
+							}
+						}, t.renderExpansionCenterPulse.id) : null,
+						e.urlWarning ? /* @__PURE__ */ s("p", {
+							role: "status",
+							style: {
+								background: "#fff8c5",
+								border: "1px solid #d4a72c",
+								borderRadius: 8,
+								color: "#5a1e02",
+								fontSize: 12,
+								left: 16,
+								lineHeight: 1.45,
+								margin: 0,
+								maxWidth: 280,
+								padding: "8px 10px",
+								position: "absolute",
+								top: 16,
+								zIndex: 3
+							},
+							children: e.urlWarning
+						}) : null,
+						e.debugPreviewQueue && t.renderObservationSnapshot ? /* @__PURE__ */ s(sa, { snapshot: t.renderObservationSnapshot }) : null,
+						n ? /* @__PURE__ */ s("div", {
+							"data-gtsx-canvas-surface": !0,
+							ref: t.setCanvasSurfaceElement,
+							style: {
+								display: "block",
+								left: 0,
+								padding: "0 80px 80px 0",
+								position: "absolute",
+								top: 0,
+								...r ? { transform: r } : {},
+								transformOrigin: "0 0"
+							},
+							children: e.workspace.columns.map((n, r) => /* @__PURE__ */ s("section", {
+								"data-gtsx-column-index": r,
+								"data-gtsx-column-layout-x": t.columnLayoutByIndex[r]?.x ?? 0,
+								"data-gtsx-column-layout-y": t.columnLayoutByIndex[r]?.y ?? 0,
+								"data-gtsx-column-parent-coordinate": n.parentCoordinate,
+								ref: (e) => t.setColumnElement(r, e),
+								style: {
+									display: "grid",
+									gap: 10,
+									left: t.columnLayoutByIndex[r]?.x ?? 0,
+									position: "absolute",
+									top: t.columnLayoutByIndex[r]?.y ?? 0,
+									width: "max-content"
+								},
+								children: n.components.map((n) => {
+									let i = er($n(e.workspace, r, n.coordinate));
+									return /* @__PURE__ */ s("div", {
+										ref: (e) => t.setCardElement(r, n.coordinate, e),
+										style: {
+											display: "grid",
+											justifySelf: "start",
+											width: "max-content"
+										},
+										children: /* @__PURE__ */ s(Hi, {
+											casePreviewScale: t.casePreviewScale,
+											columnIndex: r,
+											component: n,
+											debugPreviewPool: e.debugPreviewPool,
+											debugPreviewQueue: e.debugPreviewQueue,
+											fallbackFrameStates: e.frameStates,
+											fallbackPreviewCache: e.previewCache,
+											manifest: e.manifest,
+											onPreviewFrameMount: e.onPreviewFrameMount,
+											onPreviewGeometryChange: t.onPreviewGeometryChange,
+											onSelect: t.onSelectCard,
+											previewGeometryStore: e.previewGeometryStore,
+											selected: t.selectedCardPathKey === i,
+											selectedCaseName: E(e.workspace, n),
+											viewportPreset: t.canvasViewportPreset
+										})
+									}, n.coordinate);
+								})
+							}, r))
+						}) : null
+					]
+				})
+			})
+		})
+	});
+}
+var oa = i("src/components/StudioWorkspaceView.g.tsx#default", aa);
+function sa(e) {
+	let t = e.snapshot.scrollResponse, n = e.snapshot.fullRender;
+	return /* @__PURE__ */ c("aside", {
+		"aria-label": "Preview render observation",
+		"data-gtsx-preview-render-observation-panel": "true",
+		style: {
+			background: "rgba(255,255,255,0.92)",
+			border: "1px solid rgba(216,222,228,0.95)",
+			borderRadius: 6,
+			bottom: 12,
+			boxShadow: "0 3px 12px rgba(31,35,40,0.14)",
+			color: "#1f2328",
+			display: "grid",
+			fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+			fontSize: 11,
+			gap: 3,
+			left: 12,
+			lineHeight: 1.35,
+			padding: "7px 9px",
+			pointerEvents: "none",
+			position: "absolute",
+			zIndex: 5
+		},
+		children: [/* @__PURE__ */ c("span", {
+			"data-gtsx-preview-render-observation-scroll": "true",
+			children: [
+				"scroll",
+				" ",
+				t ? `${ca(t.firstVisibleCompletionMilliseconds)} ${t.completedVisibleSessionCount}/${t.visibleSessionCount}` : "idle"
+			]
+		}), /* @__PURE__ */ c("span", {
+			"data-gtsx-preview-render-observation-full": "true",
+			children: [
+				"full",
+				" ",
+				n ? `${ca(n.latestCompletionMilliseconds)} ${n.completedSessionCount}/${n.sessionCount} ${la(n.renderCompletionsPerSecond)}` : "idle"
+			]
+		})]
+	});
+}
+function ca(e) {
+	return typeof e == "number" ? `${e}ms` : "...";
+}
+function la(e) {
+	return typeof e == "number" ? `${e}/s` : ".../s";
+}
+oa.cases = { multiExportFile: {
+	props: {
+		manifest: {
+			version: 1,
+			routes: {
+				preview: "/gtsx",
+				studio: "/gtsx/studio",
+				manifest: "/gtsx/studio/manifest"
+			},
+			preview: {
+				urlTemplate: "/gtsx?entry={entry}&case={case}{gcase}",
+				allUrlTemplate: "/gtsx?entry={entry}{gcase}"
+			},
+			files: [{
+				path: "src/MultiExport.g.tsx",
+				groupId: "file:src/MultiExport.g.tsx",
+				components: [{
+					coordinate: "src/MultiExport.g.tsx#NamedBadge",
+					filePath: "src/MultiExport.g.tsx",
+					exportName: "NamedBadge",
+					componentName: "NamedBadge",
+					mode: "pure",
+					cases: [{
+						kind: "pure",
+						name: "ready"
+					}],
+					providers: {},
+					diagnostics: []
+				}],
+				diagnostics: []
+			}],
+			diagnostics: []
+		},
+		workspace: {
+			canvasViewportPreset: "tablet",
+			columns: [{ components: [{
+				coordinate: "src/MultiExport.g.tsx#NamedBadge",
+				filePath: "src/MultiExport.g.tsx",
+				exportName: "NamedBadge",
+				componentName: "NamedBadge",
+				mode: "pure",
+				cases: [{
+					kind: "pure",
+					name: "ready"
+				}],
+				providers: {},
+				diagnostics: []
+			}] }],
+			selectedCaseByCoordinate: {},
+			selectedCoordinatePath: [],
+			selectedRuntimeInstanceByCoordinate: {},
+			selectedViewportPresetByCoordinate: {}
+		}
+	},
+	scope: {
+		canvas: {
+			x: 40,
+			y: 40,
+			scale: 1
+		},
+		canvasViewportPreset: "tablet",
+		casePreviewScale: 1,
+		columnLayoutByIndex: {},
+		onCanvasPointerCancel() {},
+		onCanvasPointerDown() {},
+		onCanvasPointerMove() {},
+		onCanvasPointerUp() {},
+		onPreviewGeometryChange() {},
+		onSelectCard() {},
+		onViewportPresetChange() {},
+		previewRenderSessionStore: Bn(),
+		selected: {
+			id: "file:src/MultiExport.g.tsx",
+			components: []
+		},
+		setCanvasSurfaceElement() {},
+		setCanvasViewportElement() {},
+		setCardElement() {},
+		setColumnElement() {}
+	}
+} };
+//#endregion
+//#region src/components/StudioShell.tsx
+var ua = 120, da = typeof window > "u" ? a.useEffect : a.useLayoutEffect;
+function fa(e) {
+	let t = a.useMemo(() => pe(e.selection, e.urlSearch), [e.selection, e.urlSearch]), n = a.useMemo(() => j(e.manifest, t), [t, e.manifest]), r = a.useMemo(() => _e(t), [t]), i = a.useMemo(() => ve(t), [t]), o = a.useMemo(() => ye(t), [t]), s = a.useMemo(() => ({
+		...Pt(t),
+		...e.previewRenderQueue
+	}), [t, e.previewRenderQueue]), [c, l] = a.useState(n.selection), u = pa(n.canvas), [d, f] = a.useState(n.warning), [p, m] = a.useState(n.workspace), h = a.useRef(/* @__PURE__ */ new Map()), g = a.useRef(/* @__PURE__ */ new Map()), _ = a.useMemo(() => Ue(p), [p]), v = a.useMemo(() => We(e.manifest, p), [e.manifest, p]), y = a.useMemo(() => Ze(e.manifest), [e.manifest]), b = a.useMemo(() => ct(e.manifest), [e.manifest]), x = a.useMemo(() => lt({
+		cacheKeys: b,
+		namespace: y
+	}), [y, b]), S = ha(e.manifest), [C, T] = a.useState(!0), E = a.useMemo(() => new Map(v.map((e) => [e.sessionId, e])), [v]), D = a.useRef(c);
+	a.useEffect(() => {
+		D.current = c;
+	}, [c]), a.useEffect(() => {
+		x.reset();
+	}, [x]), da(() => {
+		let e = !1;
+		return T(S ? x.cacheKeys.length === 0 : !0), x.hydrate().then(() => {
+			e || S && T(!0);
+		}), () => {
+			e = !0;
+		};
+	}, [x, S]), a.useEffect(() => {
+		let e = [], t = 0, n = () => {
+			t = 0;
+			let n = e;
+			e = [], n.length !== 0 && a.startTransition(() => {
+				let e = Fn({
+					getFrameState: x.getFrameState,
+					messages: n
+				});
+				if (e.messagesToApply.length === 0) return;
+				let t = x.putMessages(e.messagesToApply, _);
+				for (let t of e.completionMessages) ga(t.target, t.message, t.mountedAt);
+				t.changed && x.writeEntries(t.entriesToWrite);
+			});
+		}, r = () => {
+			t ||= window.requestAnimationFrame(n);
+		}, i = (t) => {
+			let n = t.data;
+			if (!Ke(n)) return;
+			let i = E.get(n.sessionId);
+			i && (e.push({
+				message: n,
+				mountedAt: g.current.get(n.sessionId),
+				target: i
+			}), r());
+		};
+		return window.addEventListener("message", i), () => {
+			window.removeEventListener("message", i), t && window.cancelAnimationFrame(t);
+		};
+	}, [
+		x,
+		_,
+		E
+	]), a.useEffect(() => {
+		let t = () => {
+			let t = j(e.manifest, new URLSearchParams(window.location.search));
+			u.restoreCanvasFromUrl(t.canvas), l(t.selection), f(t.warning), m(t.workspace);
+		};
+		return window.addEventListener("popstate", t), () => window.removeEventListener("popstate", t);
+	}, [u, e.manifest]);
+	let O = a.useCallback((e) => {
+		m((t) => {
+			let n = e(t);
+			return ge(D.current, n, { canvas: u.liveCanvasRef.current }), n;
+		});
+	}, [u.liveCanvasRef]), A = a.useCallback((e, t, n) => {
+		t ? (h.current.set(e, t), g.current.set(e, performance.now()), n?.retainedRender || x.markSessionRenderStarted(e)) : (h.current.delete(e), g.current.delete(e));
+	}, [x]);
+	return {
+		canvas: u.restoredCanvas,
+		debugPreviewPool: r,
+		debugPreviewQueue: i,
+		disablePreviewPool: o,
+		onChangeCanvas: u.commitLiveCanvasChange,
+		onChangeCanvasViewportPreset(e) {
+			O((t) => k(t, e));
+		},
+		onChangeSelection(t) {
+			let n = new URLSearchParams();
+			n.set("selection", t);
+			let r = I(p);
+			r !== "tablet" && n.set("canvasViewport", r);
+			let i = j(e.manifest, n);
+			D.current = i.selection, l(i.selection), f(i.warning), m(i.workspace), ge(i.selection, i.workspace, { canvas: u.liveCanvasRef.current });
+		},
+		onChangeViewportPreset(e, t) {
+			O((n) => ee(n, e.coordinate, t));
+		},
+		onPreviewFrameMount: A,
+		onSelectComponent(t, n, r) {
+			O((i) => w(i, e.manifest, t.coordinate, Object.values(n).flatMap((e) => e?.tree ? [e.tree] : []), r));
+		},
+		previewCacheReady: C,
+		previewGeometryStore: x,
+		previewRenderQueue: s,
+		selection: c,
+		urlWarning: d,
+		workspace: p
+	};
+}
+function pa(e) {
+	let [t, n] = a.useState(e), r = a.useRef(t), i = a.useRef(null), o = a.useRef(0), s = a.useCallback(() => {
+		i.current = null, o.current &&= (window.clearTimeout(o.current), 0);
+	}, []), c = a.useCallback(() => {
+		o.current = 0;
+		let e = i.current;
+		e && (i.current = null, he(e));
+	}, []), l = a.useCallback((e) => {
+		r.current = e, i.current = e, o.current && window.clearTimeout(o.current), o.current = window.setTimeout(c, ua);
+	}, [c]), u = a.useCallback((e) => {
+		s(), r.current = e, n(e);
+	}, [s]);
+	return a.useEffect(() => () => s(), [s]), a.useMemo(() => ({
+		commitLiveCanvasChange: l,
+		liveCanvasRef: r,
+		restoreCanvasFromUrl: u,
+		restoredCanvas: t
+	}), [
+		l,
+		u,
+		t
+	]);
+}
+function ma(e) {
+	let t = fa(e), n = /* @__PURE__ */ s(o, { children: /* @__PURE__ */ s(oa, {
+		canvas: t.canvas,
+		debugPreviewPool: t.debugPreviewPool,
+		debugPreviewQueue: t.debugPreviewQueue,
+		manifest: e.manifest,
+		onChangeCanvas: t.onChangeCanvas,
+		onSelectComponent: t.onSelectComponent,
+		onChangeCanvasViewportPreset: t.onChangeCanvasViewportPreset,
+		onChangeSelection: t.onChangeSelection,
+		onChangeViewportPreset: t.onChangeViewportPreset,
+		onPreviewFrameMount: t.onPreviewFrameMount,
+		previewCacheReady: t.previewCacheReady,
+		previewGeometryStore: t.previewGeometryStore,
+		previewRenderQueue: t.previewRenderQueue,
+		selection: t.selection,
+		urlWarning: t.urlWarning,
+		workspace: t.workspace
+	}) });
+	return t.disablePreviewPool ? n : /* @__PURE__ */ s(nn, {
+		debug: t.debugPreviewPool,
+		poolUrl: Be(e.manifest),
+		children: n
+	});
+}
+function ha(e) {
+	return !!e.cache?.namespace || typeof window < "u";
+}
+function ga(e, t, n) {
+	t.type !== "gtsx:ready" && t.type !== "gtsx:error" || window.dispatchEvent(new CustomEvent("gtsx:preview-timing", { detail: {
+		cacheKey: e.cacheKey,
+		sessionId: t.sessionId,
+		type: t.type,
+		...typeof n == "number" ? { elapsedMs: Math.round((performance.now() - n) * 10) / 10 } : {}
+	} }));
+}
+//#endregion
+export { j as $, Dt as A, v as B, Et as C, Tt as D, Ct as E, ct as F, Le as G, D as H, ut as I, me as J, F as K, De as L, Pt as M, Nt as N, wt as O, lt as P, S as Q, Ae as R, Fn as S, St as T, ee as U, k as V, Re as W, R as X, Be as Y, te as Z, Q as _, V as _t, Zr as a, ye as at, ir as b, Kr as c, z as ct, Ir as d, Oe as dt, A as et, Nr as f, Je as ft, Pr as g, B as gt, Fr as h, E as ht, Yr as i, _e as it, At as j, Ot as k, zr as l, he as lt, Mr as m, O as mt, oa as n, C as nt, Wr as o, ve as ot, Z as p, w as pt, ke as q, Xr as r, Ke as rt, Gr as s, H as st, ma as t, We as tt, Lr as u, U as ut, Rr as v, Ve as vt, kt as w, Bn as x, hr as y, _ as z };