@mtngtools/frame-vue 0.0.26-experimental.0 → 0.0.28-experimental.0

package/dist/{FetchCard-BM8A35iP.js → FetchCard-DzxFG2eb.js}

@@ -1,6 +1,171 @@
-import { i as IconPanelRight_default, n as IconPanelFull_default, r as IconPanelBottom_default, t as IconClose_default } from "./IconClose-7R37a2Ma.js";
+import { i as IconPanelRight_default, n as IconPanelFull_default, r as IconPanelBottom_default, t as IconClose_default } from "./IconClose-B7WnTow-.js";
 import { n as useSimpleLoggedIn } from "./useSimpleLoggedIn-DT4aMAWu.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, getCurrentScope, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowReadonly, shallowRef, toDisplayString, toRaw, toValue, unref, useSlots, vModelCheckbox, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, getCurrentScope, isRef, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowReadonly, shallowRef, toDisplayString, toRaw, toValue, unref, useSlots, vModelCheckbox, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+function tryOnScopeDispose(e, t) {
+	return getCurrentScope() ? (onScopeDispose(e, t), !0) : !1;
+}
+var isClient = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+var toString = Object.prototype.toString, isObject = (e) => toString.call(e) === "[object Object]";
+function createSingletonPromise(e) {
+	let t;
+	function n() {
+		return t ||= e(), t;
+	}
+	return n.reset = async () => {
+		let e = t;
+		t = void 0, e && await e;
+	}, n;
+}
+function toArray(e) {
+	return Array.isArray(e) ? e : [e];
+}
+function useIntervalFn(e, t = 1e3, n = {}) {
+	let { immediate: r = !0, immediateCallback: i = !1 } = n, a = null, o = shallowRef(!1);
+	function s() {
+		a &&= (clearInterval(a), null);
+	}
+	function c() {
+		o.value = !1, s();
+	}
+	function l() {
+		let n = toValue(t);
+		n <= 0 || (o.value = !0, i && e(), s(), o.value && (a = setInterval(e, n)));
+	}
+	return r && isClient && l(), (isRef(t) || typeof t == "function") && tryOnScopeDispose(watch(t, () => {
+		o.value && isClient && l();
+	})), tryOnScopeDispose(c), {
+		isActive: shallowReadonly(o),
+		pause: c,
+		resume: l
+	};
+}
+function useTimeoutFn(e, t, n = {}) {
+	let { immediate: r = !0, immediateCallback: i = !1 } = n, a = shallowRef(!1), o;
+	function s() {
+		o &&= (clearTimeout(o), void 0);
+	}
+	function c() {
+		a.value = !1, s();
+	}
+	function l(...n) {
+		i && e(), s(), a.value = !0, o = setTimeout(() => {
+			a.value = !1, o = void 0, e(...n);
+		}, toValue(t));
+	}
+	return r && (a.value = !0, isClient && l()), tryOnScopeDispose(c), {
+		isPending: shallowReadonly(a),
+		start: l,
+		stop: c
+	};
+}
+function watchImmediate(e, t, n) {
+	return watch(e, t, {
+		...n,
+		immediate: !0
+	});
+}
+var defaultWindow = isClient ? window : void 0;
+isClient && window.document;
+var defaultNavigator = isClient ? window.navigator : void 0;
+isClient && window.location;
+function unrefElement(e) {
+	let t = toValue(e);
+	return t?.$el ?? t;
+}
+function useEventListener(...e) {
+	let t = (e, t, n, r) => (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)), n = computed(() => {
+		let t = toArray(toValue(e[0])).filter((e) => e != null);
+		return t.every((e) => typeof e != "string") ? t : void 0;
+	});
+	return watchImmediate(() => [
+		n.value?.map((e) => unrefElement(e)) ?? [defaultWindow].filter((e) => e != null),
+		toArray(toValue(n.value ? e[1] : e[0])),
+		toArray(unref(n.value ? e[2] : e[1])),
+		toValue(n.value ? e[3] : e[2])
+	], ([e, n, r, i], a, o) => {
+		if (!e?.length || !n?.length || !r?.length) return;
+		let s = isObject(i) ? { ...i } : i, c = e.flatMap((e) => n.flatMap((n) => r.map((r) => t(e, n, r, s))));
+		o(() => {
+			c.forEach((e) => e());
+		});
+	}, { flush: "post" });
+}
+function useMounted() {
+	let e = shallowRef(!1), t = getCurrentInstance();
+	return t && onMounted(() => {
+		e.value = !0;
+	}, t), e;
+}
+/* @__NO_SIDE_EFFECTS__ */
+function useSupported(e) {
+	let t = useMounted();
+	return computed(() => (t.value, !!e()));
+}
+function usePermission(e, t = {}) {
+	let { controls: n = !1, navigator: r = defaultNavigator } = t, i = /* @__PURE__ */ useSupported(() => r && "permissions" in r), a = shallowRef(), o = typeof e == "string" ? { name: e } : e, s = shallowRef(), c = () => {
+		s.value = a.value?.state ?? "prompt";
+	};
+	useEventListener(a, "change", c, { passive: !0 });
+	let l = createSingletonPromise(async () => {
+		if (i.value) {
+			if (!a.value) try {
+				a.value = await r.permissions.query(o);
+			} catch {
+				a.value = void 0;
+			} finally {
+				c();
+			}
+			if (n) return toRaw(a.value);
+		}
+	});
+	return l(), n ? {
+		state: s,
+		isSupported: i,
+		query: l
+	} : s;
+}
+function useClipboard(e = {}) {
+	let { navigator: t = defaultNavigator, read: n = !1, source: r, copiedDuring: i = 1500, legacy: a = !1 } = e, s = /* @__PURE__ */ useSupported(() => t && "clipboard" in t), c = usePermission("clipboard-read"), l = usePermission("clipboard-write"), u = computed(() => s.value || a), d = shallowRef(""), f = shallowRef(!1), p = useTimeoutFn(() => f.value = !1, i, { immediate: !1 });
+	async function m() {
+		let e = !(s.value && v(c.value));
+		if (!e) try {
+			d.value = await t.clipboard.readText();
+		} catch {
+			e = !0;
+		}
+		e && (d.value = _());
+	}
+	u.value && n && useEventListener(["copy", "cut"], m, { passive: !0 });
+	async function h(e = toValue(r)) {
+		if (u.value && e != null) {
+			let n = !(s.value && v(l.value));
+			if (!n) try {
+				await t.clipboard.writeText(e);
+			} catch {
+				n = !0;
+			}
+			n && g(e), d.value = e, f.value = !0, p.start();
+		}
+	}
+	function g(e) {
+		let t = document.createElement("textarea");
+		t.value = e, t.style.position = "absolute", t.style.opacity = "0", t.setAttribute("readonly", ""), document.body.appendChild(t), t.select(), document.execCommand("copy"), t.remove();
+	}
+	function _() {
+		var e, t;
+		return ((e = document) == null || (t = e.getSelection) == null || (t = t.call(e)) == null ? void 0 : t.toString()) ?? "";
+	}
+	function v(e) {
+		return e === "granted" || e === "prompt";
+	}
+	return {
+		isSupported: u,
+		text: readonly(d),
+		copied: readonly(f),
+		copy: h
+	};
+}
 var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ */ defineComponent({
 	__name: "SidePanelControlButton",
 	props: {
@@ -43,7 +208,7 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				return u.activeResolved ? `${e} text-accent-400/80 bg-accent/20 border-accent-900/10` : `${e} text-accent-200 bg-accent/50 hover:bg-accent/90 border-accent hover:text-white hover:border-white`;
 			}
 		});
-		function v() {
+		function _() {
 			u.disabled || f("click", u.state);
 		}
 		return (e, t) => (openBlock(), createElementBlock("button", {
@@ -65,7 +230,7 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				lineHeight: "1.2rem",
 				textTransform: "uppercase"
 			},
-			onClick: v
+			onClick: _
 		}, [renderSlot(e.$slots, "icon", { state: i.state }, () => [!i.hideIcon && m[i.state] ? (openBlock(), createBlock(resolveDynamicComponent(m[i.state]), {
 			key: 0,
 			style: {
@@ -384,7 +549,13 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			type: Boolean,
 			default: !1
 		},
-		enforceSlotSizingQuerySelector: {}
+		enforceSlotSizingQuerySelector: {},
+		autoRefresh: {
+			type: Boolean,
+			default: !1
+		},
+		autoRefreshInterval: { default: 2e3 },
+		refreshOnWindowEvent: {}
 	},
 	emits: [
 		"update:sidePanelPosition",
@@ -393,39 +564,39 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		"defaultSlotResize"
 	],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = n, a = useSlots(), p = ref(null), m = ref(null), h = ref(null), _ = ref(0), y = ref(0), b = ref(0), x = ref(0), S = ref(0);
-		function C() {
+		let r = e, i = n, a = useSlots(), p = ref(null), m = ref(null), h = ref(null), g = ref(0), v = ref(0), y = ref(0), b = ref(0), x = ref(0);
+		function S() {
 			let e = h.value;
 			if (!e) return;
-			let t = r.enforceSlotSizingQuerySelector ? Array.from(e.querySelectorAll(r.enforceSlotSizingQuerySelector)) : Array.from(e.children), n = `${S.value}px`;
+			let t = r.enforceSlotSizingQuerySelector ? Array.from(e.querySelectorAll(r.enforceSlotSizingQuerySelector)) : Array.from(e.children), n = `${x.value}px`;
 			t.forEach((e) => {
-				e.style.height !== n && (e.style.height = n);
+				e.style.height !== n && (e.style.height = n, console.debug("[LiveFrame] enforceSlotChildSizing", n));
 			});
 		}
-		let w = ref("none"), T = ref("none"), E = ref([]), O = ref("none"), k = ref(!0), A = ref(!1), j = {
+		let w = ref("none"), T = ref("none"), E = ref([]), D = ref("none"), O = ref(!0), k = ref(!1), A = {
 			sm: 640,
 			md: 768,
 			lg: 1024,
 			xl: 1280,
 			"2xl": 1536
-		}, M = computed(() => {
+		}, j = computed(() => {
 			if (typeof window < "u" && r.displaySidePanelWindowFn && typeof window[r.displaySidePanelWindowFn] == "function") return !!window[r.displaySidePanelWindowFn]();
 			let e = unref(r.displaySidePanel);
 			return typeof e == "function" ? e() : !!e;
-		}), N = computed(() => !!a.sidePanelContent && M.value), P = computed(() => !!a.header), oe = computed(() => E.value.filter((e) => e !== "auto")), F = computed(() => Math.max(0, y.value - b.value)), I = computed(() => _.value < Se(r.controlsOverlayOnly)), se = computed(() => _.value === 0 ? !1 : F.value / _.value > 1.1), ce = computed(() => T.value === "right" && O.value === "wide-right" ? r.sidePanelMaxRightWide : r.sidePanelMaxRight), L = computed(() => Ce(r.mainContentAspectRatio, 16 / 9)), le = computed(() => x.value > 0 ? x.value : Math.max(1, _.value)), ue = computed(() => le.value / L.value + 20), de = computed(() => Math.max(1, _.value) / L.value), fe = computed(() => q(r.sidePanelMinBottom, _.value, y.value)), pe = computed(() => {
+		}), M = computed(() => !!a.sidePanelContent && j.value), N = computed(() => !!a.header), oe = computed(() => E.value.filter((e) => e !== "auto")), P = computed(() => Math.max(0, v.value - y.value)), F = computed(() => g.value < Se(r.controlsOverlayOnly)), se = computed(() => g.value === 0 ? !1 : P.value / g.value > 1.1), ce = computed(() => T.value === "right" && D.value === "wide-right" ? r.sidePanelMaxRightWide : r.sidePanelMaxRight), I = computed(() => Ce(r.mainContentAspectRatio, 16 / 9)), le = computed(() => b.value > 0 ? b.value : Math.max(1, g.value)), ue = computed(() => le.value / I.value + 20), de = computed(() => Math.max(1, g.value) / I.value), fe = computed(() => K(r.sidePanelMinBottom, g.value, v.value)), pe = computed(() => {
 			let e = de.value + fe.value;
-			return F.value >= e;
-		}), me = computed(() => Math.max(0, F.value - ue.value)), he = computed(() => {
+			return P.value >= e;
+		}), me = computed(() => Math.max(0, P.value - ue.value)), he = computed(() => {
 			if (T.value !== "bottom") return r.sidePanelMinBottom;
-			let e = q(r.sidePanelMinBottom, _.value, y.value), t = Math.min(e, R.value);
+			let e = K(r.sidePanelMinBottom, g.value, v.value), t = Math.min(e, L.value);
 			return `${Math.max(0, Math.floor(t))}px`;
-		}), R = computed(() => {
-			let e = q(T.value === "bottom" && O.value === "tall-bottom" ? r.sidePanelMaxBottomTall : r.sidePanelMaxBottom, _.value, y.value);
+		}), L = computed(() => {
+			let e = K(T.value === "bottom" && D.value === "tall-bottom" ? r.sidePanelMaxBottomTall : r.sidePanelMaxBottom, g.value, v.value);
 			return Math.max(0, Math.min(e, me.value));
-		}), z = computed(() => T.value === "bottom" ? `${Math.max(0, Math.floor(R.value))}px` : r.sidePanelMaxBottom), ge = computed(() => T.value === "right" || T.value === "bottom" ? {} : T.value === "full" && !I.value ? {
+		}), R = computed(() => T.value === "bottom" ? `${Math.max(0, Math.floor(L.value))}px` : r.sidePanelMaxBottom), ge = computed(() => T.value === "right" || T.value === "bottom" ? {} : T.value === "full" && !F.value ? {
 			opacity: 0,
 			pointerEvents: "none"
-		} : {}), B = computed(() => !N.value || I.value || T.value === "none" || T.value === "minimized" || T.value === "right" || T.value === "bottom" ? null : {
+		} : {}), z = computed(() => !M.value || F.value || T.value === "none" || T.value === "minimized" || T.value === "right" || T.value === "bottom" ? null : {
 			position: "absolute",
 			top: 0,
 			right: 0,
@@ -433,11 +604,11 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			left: 0,
 			zIndex: 10,
 			pointerEvents: "none"
-		}), V = computed(() => !N.value || T.value === "none" || T.value === "full" ? { gridTemplate: "1fr / 1fr" } : T.value === "right" ? {
+		}), B = computed(() => !M.value || T.value === "none" || T.value === "full" ? { gridTemplate: "1fr / 1fr" } : T.value === "right" ? {
 			gridTemplateRows: "1fr",
 			gridTemplateColumns: `minmax(0, 1fr) max(${r.sidePanelMinRight}, ${ce.value})`
 		} : T.value === "bottom" ? {
-			gridTemplateRows: `minmax(0, 1fr) ${z.value}`,
+			gridTemplateRows: `minmax(0, 1fr) ${R.value}`,
 			gridTemplateColumns: "1fr"
 		} : T.value === "minimized" ? {
 			gridTemplateRows: "1fr max-content",
@@ -451,7 +622,7 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				placeSelf: "stretch",
 				zIndex: 20
 			};
-			if (N.value) {
+			if (M.value) {
 				if (T.value === "right") return {
 					...e,
 					gridColumn: "2 / 3",
@@ -477,7 +648,7 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				left: 0,
 				overflow: "hidden"
 			};
-			return P.value ? {
+			return N.value ? {
 				...e,
 				display: "grid",
 				gridTemplateRows: "auto 1fr"
@@ -485,11 +656,11 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				...e,
 				display: "block"
 			};
-		}), ye = computed(() => P.value ? {
+		}), ye = computed(() => N.value ? {
 			position: "relative",
 			zIndex: 0,
 			display: "grid",
-			...V.value,
+			...B.value,
 			gridRow: "2 / 3",
 			minWidth: 0,
 			minHeight: 0,
@@ -498,7 +669,7 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			position: "absolute",
 			zIndex: 0,
 			display: "grid",
-			...V.value,
+			...B.value,
 			minWidth: 0,
 			minHeight: 0,
 			overflow: "hidden",
@@ -506,9 +677,9 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			right: "0",
 			bottom: "0",
 			left: "0"
-		}), be = computed(() => !I.value || k.value), H = null, U, W, G = null, xe = "", K = !1;
+		}), be = computed(() => !F.value || O.value), V = null, H, U, W = null, xe = "", G = !1;
 		function Se(e) {
-			let t = j[e];
+			let t = A[e];
 			if (t !== void 0) return t;
 			if (e.endsWith("px")) {
 				let t = Number.parseFloat(e);
@@ -527,7 +698,7 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			let r = Number.parseFloat(n);
 			return Number.isFinite(r) && r > 0 ? r : t;
 		}
-		function q(e, t, n) {
+		function K(e, t, n) {
 			let r = e.trim();
 			if (r.endsWith("px")) {
 				let e = Number.parseFloat(r);
@@ -545,8 +716,8 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			return Number.isFinite(i) ? i : 0;
 		}
 		function we() {
-			let e = Math.max(1, _.value), t = Math.max(1, F.value), n = e / t, i = e / t, a = Se(r.sidePanelBreakpoint), o = pe.value;
-			return n < r.autoBottomAspectRatioBreakpoint && o ? (O.value = "tall-bottom", {
+			let e = Math.max(1, g.value), t = Math.max(1, P.value), n = e / t, i = e / t, a = Se(r.sidePanelBreakpoint), o = pe.value;
+			return n < r.autoBottomAspectRatioBreakpoint && o ? (D.value = "tall-bottom", {
 				states: [
 					"auto",
 					"full",
@@ -554,7 +725,7 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					"minimized"
 				],
 				resolved: "bottom"
-			}) : i > r.autoRightAspectRatioBreakpoint ? (O.value = "wide-right", {
+			}) : i > r.autoRightAspectRatioBreakpoint ? (D.value = "wide-right", {
 				states: [
 					"auto",
 					"full",
@@ -562,7 +733,7 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					"minimized"
 				],
 				resolved: "right"
-			}) : (O.value = "mixed", e >= a ? {
+			}) : (D.value = "mixed", e >= a ? {
 				states: o ? [
 					"auto",
 					"full",
@@ -586,70 +757,70 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			});
 		}
 		function Te(e, t, n) {
-			e === t || t === "none" || !N.value || i("sidePanelTransition", {
+			e === t || t === "none" || !M.value || i("sidePanelTransition", {
 				from: e,
 				to: t,
 				reason: n
 			});
 		}
-		function J(e = !1) {
+		function q(e = !1) {
 			let t = {
-				availableStates: N.value ? [...oe.value] : [],
-				sidePanelMode: N.value ? w.value : "none",
-				sidePanelModeResolved: N.value ? T.value : "none",
-				overlayOnly: I.value
+				availableStates: M.value ? [...oe.value] : [],
+				sidePanelMode: M.value ? w.value : "none",
+				sidePanelModeResolved: M.value ? T.value : "none",
+				overlayOnly: F.value
 			};
-			if (!N.value) {
-				if (K) return;
-				K = !0, i("sidePanelAvailableStates", t);
+			if (!M.value) {
+				if (G) return;
+				G = !0, i("sidePanelAvailableStates", t);
 				return;
 			}
-			K = !1;
+			G = !1;
 			let n = JSON.stringify(t);
 			!e && n === xe || (xe = n, i("sidePanelAvailableStates", t));
 		}
-		function Ee(e) {
+		function J(e) {
 			let t = T.value;
-			if (!N.value) {
-				w.value = "none", T.value = "none", E.value = [], J();
+			if (!M.value) {
+				w.value = "none", T.value = "none", E.value = [], q();
 				return;
 			}
 			let n = we();
 			E.value = n.states;
 			let r = w.value === "none" ? "auto" : w.value;
-			r !== "auto" && !E.value.includes(r) ? (w.value = "auto", i("update:sidePanelPosition", "auto")) : w.value = r, T.value = w.value === "auto" ? n.resolved : w.value, Te(t, T.value, e), J(A.value === !1);
+			r !== "auto" && !E.value.includes(r) ? (w.value = "auto", i("update:sidePanelPosition", "auto")) : w.value = r, T.value = w.value === "auto" ? n.resolved : w.value, Te(t, T.value, e), q(k.value === !1);
 		}
 		function Y(e, t = !1) {
-			if (U &&= (clearTimeout(U), void 0), t || !A.value) {
-				Ee(e);
+			if (H &&= (clearTimeout(H), void 0), t || !k.value) {
+				J(e);
 				return;
 			}
-			U = setTimeout(() => {
-				Ee(e);
+			H = setTimeout(() => {
+				J(e);
 			}, r.layoutDebounceMs);
 		}
-		function X(e) {
-			if (!N.value) return;
+		function Ee(e) {
+			if (!M.value) return;
 			let t = E.value.includes(e) ? e : "auto";
 			t !== w.value && (w.value = t, i("update:sidePanelPosition", t)), Y("set-side-panel-mode", !0);
 		}
 		function De() {
-			!N.value || !I.value || X("minimized");
+			!M.value || !F.value || Ee("minimized");
 		}
-		function Z() {
-			W &&= (clearTimeout(W), void 0);
+		function X() {
+			U &&= (clearTimeout(U), void 0);
 		}
 		function Oe() {
-			if (Z(), !I.value || se.value || T.value === "none") {
-				k.value = !0;
+			if (X(), !F.value || se.value || T.value === "none") {
+				O.value = !0;
 				return;
 			}
-			W = setTimeout(() => {
-				k.value = !1;
+			U = setTimeout(() => {
+				O.value = !1;
 			}, r.autoHideTimeout);
 		}
-		function Q() {
-			k.value = !0, Oe();
+		function Z() {
+			O.value = !0, Oe();
 		}
 		function ke() {
 			if (!p.value) return;
@@ -660,33 +831,48 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				"keydown",
 				"touchstart"
 			], t = () => {
-				Q();
+				Z();
 			};
 			for (let n of e) p.value.addEventListener(n, t, { passive: !0 });
-			G = () => {
+			W = () => {
 				if (p.value) for (let n of e) p.value.removeEventListener(n, t);
 			};
 		}
-		function $() {
-			_.value = window.innerWidth, y.value = window.innerHeight, Y("viewport-resize");
+		function Q() {
+			g.value = window.innerWidth, v.value = window.innerHeight, Y("viewport-resize");
 		}
-		function Ae() {
-			_.value = window.innerWidth, y.value = window.innerHeight, b.value = m.value?.offsetHeight ?? 0, x.value = h.value?.offsetWidth ?? 0, S.value = h.value?.offsetHeight ?? 0, C(), Y("manual-refresh", !0);
+		function $() {
+			try {
+				if (typeof window > "u") return;
+				g.value = window.innerWidth, v.value = window.innerHeight, y.value = m.value?.offsetHeight ?? 0, b.value = h.value?.offsetWidth ?? 0, x.value = h.value?.offsetHeight ?? 0, console.debug("[LiveFrame] Refreshing frame", {
+					defaultWidth: b.value,
+					defaultHeight: x.value
+				}), S(), Y("manual-refresh", !0);
+			} catch (e) {
+				console.warn("[LiveFrame] Error during refresh cycle:", e);
+			}
 		}
-		return t({ refresh: Ae }), watch(() => r.sidePanelPosition, (e) => {
-			if (!N.value) {
+		t({ refresh: $ });
+		let { pause: Ae, resume: je } = useIntervalFn($, () => r.autoRefreshInterval, {
+			immediate: r.autoRefresh,
+			immediateCallback: !1
+		});
+		return watch(() => r.autoRefresh, (e) => {
+			e ? je() : Ae();
+		}), watch(() => r.sidePanelPosition, (e) => {
+			if (!M.value) {
 				w.value = "none";
 				return;
 			}
 			w.value = e, Y("prop-sync");
-		}, { immediate: !0 }), watch(N, (e) => {
+		}, { immediate: !0 }), watch(M, (e) => {
 			if (!e) {
-				w.value = "none", T.value = "none", E.value = [], J();
+				w.value = "none", T.value = "none", E.value = [], q();
 				return;
 			}
 			w.value = r.sidePanelPosition, Y("slot-state-change", !0);
 		}, { immediate: !0 }), watch(() => [
-			I.value,
+			F.value,
 			r.autoHideTimeout,
 			T.value
 		], () => {
@@ -694,35 +880,35 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				Oe();
 				return;
 			}
-			Q();
+			Z();
 		}), watch(se, (e, t) => {
 			if (e) {
-				k.value = !0, Z();
+				O.value = !0, X();
 				return;
 			}
-			t && Q();
+			t && Z();
 		}), watch(() => [
+			b.value,
 			x.value,
-			S.value,
 			T.value,
-			N.value
+			M.value
 		], () => {
-			!N.value || T.value === "none" || i("defaultSlotResize", {
-				width: x.value,
-				height: S.value
+			!M.value || T.value === "none" || i("defaultSlotResize", {
+				width: b.value,
+				height: x.value
 			});
 		}), onMounted(async () => {
-			A.value = !0, $(), window.addEventListener("resize", $), ke(), Q(), await nextTick(), H = new ResizeObserver(() => {
-				b.value = m.value?.offsetHeight ?? 0, x.value = h.value?.offsetWidth ?? 0, S.value = h.value?.offsetHeight ?? 0, C(), Y("slot-measure");
-			}), m.value && H.observe(m.value), h.value && (H.observe(h.value), x.value = h.value.offsetWidth, S.value = h.value.offsetHeight), b.value = m.value?.offsetHeight ?? 0, Y("mounted", !0);
+			k.value = !0, Q(), window.addEventListener("resize", Q), ke(), Z(), r.refreshOnWindowEvent && window.addEventListener(r.refreshOnWindowEvent, $), await nextTick(), V = new ResizeObserver(() => {
+				y.value = m.value?.offsetHeight ?? 0, b.value = h.value?.offsetWidth ?? 0, x.value = h.value?.offsetHeight ?? 0, S(), Y("slot-measure");
+			}), m.value && V.observe(m.value), h.value && (V.observe(h.value), b.value = h.value.offsetWidth, x.value = h.value.offsetHeight), y.value = m.value?.offsetHeight ?? 0, Y("mounted", !0);
 		}), onBeforeUnmount(() => {
-			window.removeEventListener("resize", $), G?.(), G = null, H?.disconnect(), H = null, Z(), U &&= (clearTimeout(U), void 0);
+			window.removeEventListener("resize", Q), r.refreshOnWindowEvent && window.removeEventListener(r.refreshOnWindowEvent, $), W?.(), W = null, V?.disconnect(), V = null, X(), H &&= (clearTimeout(H), void 0);
 		}), (t, n) => (openBlock(), createElementBlock("section", {
 			ref_key: "rootRef",
 			ref: p,
 			class: "bg-black text-neutral-100",
 			style: normalizeStyle({ ...ve.value })
-		}, [P.value ? withDirectives((openBlock(), createElementBlock("header", {
+		}, [N.value ? withDirectives((openBlock(), createElementBlock("header", {
 			key: 0,
 			ref_key: "headerRef",
 			ref: m,
@@ -759,16 +945,16 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					...ge.value
 				})
 			}, [renderSlot(t.$slots, "default")], 4),
-			B.value ? (openBlock(), createElementBlock("div", {
+			z.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: "bg-black",
 				style: normalizeStyle({
-					...B.value,
+					...z.value,
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2"
 				})
 			}, null, 4)) : createCommentVNode("", !0),
-			N.value && T.value !== "none" ? (openBlock(), createElementBlock("div", {
+			M.value && T.value !== "none" ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: "",
 				style: normalizeStyle(_e.value)
@@ -776,13 +962,13 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				"side-panel-mode": w.value,
 				"side-panel-mode-resolved": T.value,
 				"available-states": oe.value,
-				"overlay-only": I.value,
+				"overlay-only": F.value,
 				"hide-icons": e.hideSidePanelIcons,
 				"min-width": e.sidePanelMinRight,
 				"max-width": ce.value,
 				"min-height": he.value,
-				"max-height": z.value,
-				onSetSidePanelMode: X,
+				"max-height": R.value,
+				onSetSidePanelMode: Ee,
 				onCloseSidePanel: De
 			}, {
 				default: withCtx(() => [renderSlot(t.$slots, "sidePanelContent")]),
@@ -800,7 +986,7 @@ var _hoisted_1$5 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			])], 4)) : createCommentVNode("", !0)
 		], 4)], 4));
 	}
-}), [["__scopeId", "data-v-3fd50542"]]), LoggedInOut_default = /* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-36a3bc77"]]), LoggedInOut_default = /* @__PURE__ */ defineComponent({
 	__name: "LoggedInOut",
 	props: {
 		initiallyLoggedIn: { type: Boolean },
@@ -1256,153 +1442,7 @@ var _globalThis = (function() {
 	fetch,
 	Headers: Headers$1,
 	AbortController: AbortController$1
-});
-function tryOnScopeDispose(e, t) {
-	return getCurrentScope() ? (onScopeDispose(e, t), !0) : !1;
-}
-var isClient = typeof window < "u" && typeof document < "u";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-var toString = Object.prototype.toString, isObject = (e) => toString.call(e) === "[object Object]";
-function createSingletonPromise(e) {
-	let t;
-	function n() {
-		return t ||= e(), t;
-	}
-	return n.reset = async () => {
-		let e = t;
-		t = void 0, e && await e;
-	}, n;
-}
-function toArray(e) {
-	return Array.isArray(e) ? e : [e];
-}
-function useTimeoutFn(e, t, n = {}) {
-	let { immediate: r = !0, immediateCallback: i = !1 } = n, a = shallowRef(!1), o;
-	function s() {
-		o &&= (clearTimeout(o), void 0);
-	}
-	function c() {
-		a.value = !1, s();
-	}
-	function l(...n) {
-		i && e(), s(), a.value = !0, o = setTimeout(() => {
-			a.value = !1, o = void 0, e(...n);
-		}, toValue(t));
-	}
-	return r && (a.value = !0, isClient && l()), tryOnScopeDispose(c), {
-		isPending: shallowReadonly(a),
-		start: l,
-		stop: c
-	};
-}
-function watchImmediate(e, t, n) {
-	return watch(e, t, {
-		...n,
-		immediate: !0
-	});
-}
-var defaultWindow = isClient ? window : void 0;
-isClient && window.document;
-var defaultNavigator = isClient ? window.navigator : void 0;
-isClient && window.location;
-function unrefElement(e) {
-	let t = toValue(e);
-	return t?.$el ?? t;
-}
-function useEventListener(...e) {
-	let t = (e, t, n, r) => (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)), n = computed(() => {
-		let t = toArray(toValue(e[0])).filter((e) => e != null);
-		return t.every((e) => typeof e != "string") ? t : void 0;
-	});
-	return watchImmediate(() => [
-		n.value?.map((e) => unrefElement(e)) ?? [defaultWindow].filter((e) => e != null),
-		toArray(toValue(n.value ? e[1] : e[0])),
-		toArray(unref(n.value ? e[2] : e[1])),
-		toValue(n.value ? e[3] : e[2])
-	], ([e, n, r, i], a, o) => {
-		if (!e?.length || !n?.length || !r?.length) return;
-		let s = isObject(i) ? { ...i } : i, c = e.flatMap((e) => n.flatMap((n) => r.map((r) => t(e, n, r, s))));
-		o(() => {
-			c.forEach((e) => e());
-		});
-	}, { flush: "post" });
-}
-function useMounted() {
-	let e = shallowRef(!1), t = getCurrentInstance();
-	return t && onMounted(() => {
-		e.value = !0;
-	}, t), e;
-}
-/* @__NO_SIDE_EFFECTS__ */
-function useSupported(e) {
-	let t = useMounted();
-	return computed(() => (t.value, !!e()));
-}
-function usePermission(e, t = {}) {
-	let { controls: n = !1, navigator: r = defaultNavigator } = t, i = /* @__PURE__ */ useSupported(() => r && "permissions" in r), a = shallowRef(), o = typeof e == "string" ? { name: e } : e, s = shallowRef(), c = () => {
-		s.value = a.value?.state ?? "prompt";
-	};
-	useEventListener(a, "change", c, { passive: !0 });
-	let l = createSingletonPromise(async () => {
-		if (i.value) {
-			if (!a.value) try {
-				a.value = await r.permissions.query(o);
-			} catch {
-				a.value = void 0;
-			} finally {
-				c();
-			}
-			if (n) return toRaw(a.value);
-		}
-	});
-	return l(), n ? {
-		state: s,
-		isSupported: i,
-		query: l
-	} : s;
-}
-function useClipboard(e = {}) {
-	let { navigator: t = defaultNavigator, read: n = !1, source: r, copiedDuring: i = 1500, legacy: a = !1 } = e, s = /* @__PURE__ */ useSupported(() => t && "clipboard" in t), c = usePermission("clipboard-read"), l = usePermission("clipboard-write"), u = computed(() => s.value || a), d = shallowRef(""), f = shallowRef(!1), p = useTimeoutFn(() => f.value = !1, i, { immediate: !1 });
-	async function m() {
-		let e = !(s.value && v(c.value));
-		if (!e) try {
-			d.value = await t.clipboard.readText();
-		} catch {
-			e = !0;
-		}
-		e && (d.value = _());
-	}
-	u.value && n && useEventListener(["copy", "cut"], m, { passive: !0 });
-	async function h(e = toValue(r)) {
-		if (u.value && e != null) {
-			let n = !(s.value && v(l.value));
-			if (!n) try {
-				await t.clipboard.writeText(e);
-			} catch {
-				n = !0;
-			}
-			n && g(e), d.value = e, f.value = !0, p.start();
-		}
-	}
-	function g(e) {
-		let t = document.createElement("textarea");
-		t.value = e, t.style.position = "absolute", t.style.opacity = "0", t.setAttribute("readonly", ""), document.body.appendChild(t), t.select(), document.execCommand("copy"), t.remove();
-	}
-	function _() {
-		var e, t;
-		return ((e = document) == null || (t = e.getSelection) == null || (t = t.call(e)) == null ? void 0 : t.toString()) ?? "";
-	}
-	function v(e) {
-		return e === "granted" || e === "prompt";
-	}
-	return {
-		isSupported: u,
-		text: readonly(d),
-		copied: readonly(f),
-		copy: h
-	};
-}
-var _hoisted_1 = { class: "border border-neutral-300 rounded-lg bg-white shadow-sm grid grid-rows-[min-content_auto_min-content] overflow-hidden" }, _hoisted_2 = { class: "flex items-center justify-between px-3 py-1 bg-neutral-900 border-b border-neutral-800" }, _hoisted_3 = { class: "px-2 py-0.5 bg-neutral-800 text-neutral-300 font-mono text-[10px] uppercase font-bold rounded" }, _hoisted_4 = {
+}), _hoisted_1 = { class: "border border-neutral-300 rounded-lg bg-white shadow-sm grid grid-rows-[min-content_auto_min-content] overflow-hidden" }, _hoisted_2 = { class: "flex items-center justify-between px-3 py-1 bg-neutral-900 border-b border-neutral-800" }, _hoisted_3 = { class: "px-2 py-0.5 bg-neutral-800 text-neutral-300 font-mono text-[10px] uppercase font-bold rounded" }, _hoisted_4 = {
 	key: 0,
 	class: "flex items-center gap-2"
 }, _hoisted_5 = { class: "flex items-center gap-4 px-4 py-3 bg-white" }, _hoisted_6 = ["disabled"], _hoisted_7 = { key: 0 }, _hoisted_8 = { key: 1 }, _hoisted_9 = { class: "grid grid-cols-[10rem_1fr] bg-neutral-900 border-t border-neutral-800 group h-auto" }, _hoisted_10 = { class: "flex flex-col w-full min-w-0 p-3 relative h-max" }, _hoisted_11 = { class: "absolute top-2 right-2 flex justify-end z-10" }, _hoisted_12 = {
@@ -1439,11 +1479,11 @@ var _hoisted_1 = { class: "border border-neutral-300 rounded-lg bg-white shadow-
 		"onError"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = ref(!1), s = ref(!1), d = ref(null), f = ref(null), p = ref(null), m = computed(() => toValue(n.requireCheckboxToEnable) ?? !1), h = computed(() => toValue(n.fetchOptions) ?? {}), g = computed(() => toValue(n.responseDisplayTimeout) ?? 2e4), ee = computed(() => toValue(n.fetchOnMount) ?? !1), y = computed(() => toValue(n.fetchButtonText) ?? "Fetch"), b = computed(() => toValue(n.fetchButtonClass) ?? ""), x = computed(() => toValue(n.responseClass)), te = computed(() => toValue(n.responseMaxHeight) ?? "40vh"), ne = computed(() => h.value.method || "GET"), C = computed(() => n.url === void 0 ? n.urlParts === void 0 ? "" : toValue(n.urlParts).join("") : toValue(n.url)), w = computed(() => m.value && !i.value ? !0 : s.value || !C.value), T = ref("neutral"), D = null, re = () => {
-			D && clearTimeout(D), D = setTimeout(() => {
+		let n = e, r = t, i = ref(!1), s = ref(!1), d = ref(null), f = ref(null), p = ref(null), m = computed(() => toValue(n.requireCheckboxToEnable) ?? !1), h = computed(() => toValue(n.fetchOptions) ?? {}), g = computed(() => toValue(n.responseDisplayTimeout) ?? 2e4), _ = computed(() => toValue(n.fetchOnMount) ?? !1), ee = computed(() => toValue(n.fetchButtonText) ?? "Fetch"), y = computed(() => toValue(n.fetchButtonClass) ?? ""), b = computed(() => toValue(n.responseClass)), x = computed(() => toValue(n.responseMaxHeight) ?? "40vh"), te = computed(() => h.value.method || "GET"), C = computed(() => n.url === void 0 ? n.urlParts === void 0 ? "" : toValue(n.urlParts).join("") : toValue(n.url)), w = computed(() => m.value && !i.value ? !0 : s.value || !C.value), T = ref("neutral"), E = null, ne = () => {
+			E && clearTimeout(E), E = setTimeout(() => {
 				T.value = "neutral";
 			}, g.value);
-		}, ie = async () => {
+		}, re = async () => {
 			if (!w.value) {
 				s.value = !0, T.value = "yellow", d.value = null, p.value = null, f.value = null, m.value && (i.value = !1), r("fetching", n);
 				try {
@@ -1452,24 +1492,24 @@ var _hoisted_1 = { class: "border border-neutral-300 rounded-lg bg-white shadow-
 				} catch (e) {
 					p.value = e.data || e.message || "Unknown error", f.value = e.status || 500, T.value = "red", r("onResult", n, e), r("onError", n, e);
 				} finally {
-					s.value = !1, re();
+					s.value = !1, ne();
 				}
 			}
-		}, ae = computed(() => {
+		}, ie = computed(() => {
 			switch (T.value) {
 				case "yellow": return "text-yellow-400 bg-yellow-900/30 border-yellow-700/50";
 				case "green": return "text-green-400 bg-green-900/30 border-green-700/50";
 				case "red": return "text-red-400 bg-red-900/30 border-red-700/50";
 				default: return "text-neutral-500 bg-neutral-800/50 border-neutral-700";
 			}
-		}), { copy: A, copied: j, isSupported: M } = useClipboard({ legacy: !0 }), N = () => {
+		}), { copy: ae, copied: A, isSupported: j } = useClipboard({ legacy: !0 }), M = () => {
 			let e = d.value || p.value;
-			e && A(JSON.stringify(e, null, 2));
+			e && ae(JSON.stringify(e, null, 2));
 		};
 		return onMounted(() => {
-			C.value && ee.value && (!m.value || i.value) && ie();
+			C.value && _.value && (!m.value || i.value) && re();
 		}), (e, t) => (openBlock(), createElementBlock("div", _hoisted_1, [
-			createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(ne.value), 1), m.value ? (openBlock(), createElementBlock("div", _hoisted_4, [t[1] ||= createElementVNode("label", {
+			createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(te.value), 1), m.value ? (openBlock(), createElementBlock("div", _hoisted_4, [t[1] ||= createElementVNode("label", {
 				for: "enable-fetch",
 				class: "text-xs font-medium text-neutral-300 cursor-pointer select-none"
 			}, " Enable Request ", -1), withDirectives(createElementVNode("input", {
@@ -1488,17 +1528,17 @@ var _hoisted_1 = { class: "border border-neutral-300 rounded-lg bg-white shadow-
 				key: 0,
 				class: normalizeClass(["font-mono text-sm break-all text-neutral-600", toValue(n.urlClass)])
 			}, toDisplayString(C.value), 3))], 2), createElementVNode("button", {
-				onClick: ie,
+				onClick: re,
 				disabled: w.value,
-				class: normalizeClass(["shrink-0 px-4 py-2 text-sm font-medium rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors", b.value || "bg-indigo-600 text-white hover:bg-indigo-700"])
-			}, [s.value ? (openBlock(), createElementBlock("span", _hoisted_7, "Fetching...")) : (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(y.value), 1))], 10, _hoisted_6)]),
-			createElementVNode("div", _hoisted_9, [createElementVNode("div", { class: normalizeClass(["flex items-center justify-center font-mono text-2xl font-black shadow-sm transition-colors duration-300 h-16", ae.value]) }, toDisplayString(f.value || "---"), 3), createElementVNode("div", _hoisted_10, [createElementVNode("div", _hoisted_11, [(d.value || p.value) && unref(M) ? (openBlock(), createElementBlock("button", {
+				class: normalizeClass(["shrink-0 px-4 py-2 text-sm font-medium rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors", y.value || "bg-indigo-600 text-white hover:bg-indigo-700"])
+			}, [s.value ? (openBlock(), createElementBlock("span", _hoisted_7, "Fetching...")) : (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(ee.value), 1))], 10, _hoisted_6)]),
+			createElementVNode("div", _hoisted_9, [createElementVNode("div", { class: normalizeClass(["flex items-center justify-center font-mono text-2xl font-black shadow-sm transition-colors duration-300 h-16", ie.value]) }, toDisplayString(f.value || "---"), 3), createElementVNode("div", _hoisted_10, [createElementVNode("div", _hoisted_11, [(d.value || p.value) && unref(j) ? (openBlock(), createElementBlock("button", {
 				key: 0,
-				onClick: withModifiers(N, ["prevent"]),
-				class: normalizeClass(["px-2.5 py-1.5 rounded-md text-xs font-bold font-mono border backdrop-blur-sm transition-all duration-200 opacity-0 transform -translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 shadow shadow-neutral-900", unref(j) ? "bg-emerald-900/80 text-emerald-300 border-emerald-700/50" : "bg-neutral-800/90 text-neutral-300 border-neutral-700 hover:bg-neutral-700"])
-			}, toDisplayString(unref(j) ? "COPIED!" : "COPY"), 3)) : createCommentVNode("", !0)]), createElementVNode("div", {
-				class: normalizeClass(["w-full overflow-y-auto transition-all duration-300 custom-scrollbar mt-1 overflow-x-hidden pr-16", x.value ? x.value : "max-h-12 hover:max-h-[var(--hover-max-h)]"]),
-				style: normalizeStyle({ "--hover-max-h": te.value })
+				onClick: withModifiers(M, ["prevent"]),
+				class: normalizeClass(["px-2.5 py-1.5 rounded-md text-xs font-bold font-mono border backdrop-blur-sm transition-all duration-200 opacity-0 transform -translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 shadow shadow-neutral-900", unref(A) ? "bg-emerald-900/80 text-emerald-300 border-emerald-700/50" : "bg-neutral-800/90 text-neutral-300 border-neutral-700 hover:bg-neutral-700"])
+			}, toDisplayString(unref(A) ? "COPIED!" : "COPY"), 3)) : createCommentVNode("", !0)]), createElementVNode("div", {
+				class: normalizeClass(["w-full overflow-y-auto transition-all duration-300 custom-scrollbar mt-1 overflow-x-hidden pr-16", b.value ? b.value : "max-h-12 hover:max-h-[var(--hover-max-h)]"]),
+				style: normalizeStyle({ "--hover-max-h": x.value })
 			}, [d.value ? (openBlock(), createElementBlock("pre", _hoisted_12, toDisplayString(JSON.stringify(d.value, null, 2)), 1)) : p.value ? (openBlock(), createElementBlock("pre", _hoisted_13, toDisplayString(JSON.stringify(p.value, null, 2)), 1)) : (openBlock(), createElementBlock("div", _hoisted_14, "Awaiting request..."))], 6)])])
 		]));
 	}