@mtngtools/frame-vue 0.0.21-experimental.0 → 0.0.24-experimental.0

package/README.md

@@ -11,6 +11,7 @@ Vue.js component and composable library for mtngTOOLS. Built for use in Nuxt app
 | --- | --- |
 | [`LiveFrame`](./src/components/live/LiveFrame) | Full-screen wrapper for live video players with responsive layout support. |
 | [`LoggedInOut`](./src/components/LoggedInOut) | Component that toggles content visibility based on authentication status. |
+| [`VanillaIf`](./src/components/VanillaIf) | A `v-if` wrapper that naturally delays rendering until synchronously or asynchronously evaluating its condition. |
 | [`SidePanelFrame`](./src/components/live/SidePanelFrame) | Wrapper for controlling and displaying side panel content. |
 | [`SidePanelHeader`](./src/components/live/SidePanelHeader) | Standardized header component for the side panel. |
 | [`SidePanelButtonGroup`](./src/components/live/SidePanelButtonGroup) | Control group for managing panel selection buttons. |
@@ -33,7 +34,7 @@ pnpm add @mtngtools/frame-vue vue
 ### Regular Imports
 
 ```ts
-import { LiveFrame, LoggedInOut } from '@mtngtools/frame-vue';
+import { LiveFrame, LoggedInOut, VanillaIf } from '@mtngtools/frame-vue';
 ```
 
 ### Direct Subpath Imports
@@ -41,7 +42,7 @@ import { LiveFrame, LoggedInOut } from '@mtngtools/frame-vue';
 For specific needs or smaller bundle sizes, you can import directly from subpaths:
 
 ```ts
-import { LoggedInOut } from '@mtngtools/frame-vue/components';
+import { LoggedInOut, VanillaIf } from '@mtngtools/frame-vue/components';
 import { useSimpleLoggedIn } from '@mtngtools/frame-vue/composables';
 ```
 

package/dist/{LoggedInOut-DjWBHJcm.js → VanillaIf-Cur4x_1H.js}

@@ -371,10 +371,15 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		sidePanelMaxBottomTall: { default: "60vh" },
 		headerHideWidthThreshold: { default: "50rem" },
 		headerHideHeightThreshold: { default: "40rem" },
-		disableSidePanel: {
-			type: Boolean,
-			default: !1
+		displaySidePanel: {
+			type: [
+				Boolean,
+				Function,
+				Object
+			],
+			default: !0
 		},
+		displaySidePanelWindowFn: {},
 		hideSidePanelIcons: {
 			type: Boolean,
 			default: !1
@@ -387,36 +392,40 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		"sidePanelAvailableStates",
 		"defaultSlotResize"
 	],
-	setup(e, { emit: t }) {
-		let n = e, r = t, i = useSlots(), a = ref(null), d = ref(null), p = ref(null), g = ref(0), _ = ref(0), v = ref(0), y = ref(0), b = ref(0);
-		function te() {
-			let e = p.value;
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = n, a = useSlots(), d = ref(null), p = ref(null), g = ref(null), _ = ref(0), v = ref(0), y = ref(0), b = ref(0), x = ref(0);
+		function S() {
+			let e = g.value;
 			if (!e) return;
-			let t = n.enforceSlotSizingQuerySelector ? Array.from(e.querySelectorAll(n.enforceSlotSizingQuerySelector)) : Array.from(e.children), r = `${b.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 !== r && (e.style.height = r);
+				e.style.height !== n && (e.style.height = n);
 			});
 		}
-		let x = ref("none"), S = ref("none"), C = ref([]), w = ref("none"), T = ref(!0), E = ref(!1), ne = {
+		let C = ref("none"), w = ref("none"), T = ref([]), E = ref("none"), D = ref(!0), O = ref(!1), te = {
 			sm: 640,
 			md: 768,
 			lg: 1024,
 			xl: 1280,
 			"2xl": 1536
-		}, D = computed(() => !!i.sidePanelContent && !n.disableSidePanel), O = computed(() => !!i.header), re = computed(() => C.value.filter((e) => e !== "auto")), k = computed(() => Math.max(0, _.value - v.value)), A = computed(() => g.value < W(n.controlsOverlayOnly)), j = computed(() => g.value === 0 ? !1 : k.value / g.value > 1.1), M = computed(() => S.value === "right" && w.value === "wide-right" ? n.sidePanelMaxRightWide : n.sidePanelMaxRight), N = computed(() => ge(n.mainContentAspectRatio, 16 / 9)), ie = computed(() => y.value > 0 ? y.value : Math.max(1, g.value)), ae = computed(() => ie.value / N.value + 20), oe = computed(() => Math.max(1, g.value) / N.value), se = computed(() => G(n.sidePanelMinBottom, g.value, _.value)), ce = computed(() => {
-			let e = oe.value + se.value;
-			return k.value >= e;
-		}), le = computed(() => Math.max(0, k.value - ae.value)), ue = computed(() => {
-			if (S.value !== "bottom") return n.sidePanelMinBottom;
-			let e = G(n.sidePanelMinBottom, g.value, _.value), t = Math.min(e, P.value);
+		}, ne = 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;
+		}), k = computed(() => !!a.sidePanelContent && ne.value), A = computed(() => !!a.header), j = computed(() => T.value.filter((e) => e !== "auto")), M = computed(() => Math.max(0, v.value - y.value)), N = computed(() => _.value < G(r.controlsOverlayOnly)), P = computed(() => _.value === 0 ? !1 : M.value / _.value > 1.1), re = computed(() => w.value === "right" && E.value === "wide-right" ? r.sidePanelMaxRightWide : r.sidePanelMaxRight), ie = computed(() => _e(r.mainContentAspectRatio, 16 / 9)), ae = computed(() => b.value > 0 ? b.value : Math.max(1, _.value)), oe = computed(() => ae.value / ie.value + 20), se = computed(() => Math.max(1, _.value) / ie.value), ce = computed(() => K(r.sidePanelMinBottom, _.value, v.value)), le = computed(() => {
+			let e = se.value + ce.value;
+			return M.value >= e;
+		}), ue = computed(() => Math.max(0, M.value - oe.value)), de = computed(() => {
+			if (w.value !== "bottom") return r.sidePanelMinBottom;
+			let e = K(r.sidePanelMinBottom, _.value, v.value), t = Math.min(e, F.value);
 			return `${Math.max(0, Math.floor(t))}px`;
-		}), P = computed(() => {
-			let e = G(S.value === "bottom" && w.value === "tall-bottom" ? n.sidePanelMaxBottomTall : n.sidePanelMaxBottom, g.value, _.value);
-			return Math.max(0, Math.min(e, le.value));
-		}), F = computed(() => S.value === "bottom" ? `${Math.max(0, Math.floor(P.value))}px` : n.sidePanelMaxBottom), de = computed(() => S.value === "right" || S.value === "bottom" ? {} : S.value === "full" && !A.value ? {
+		}), F = computed(() => {
+			let e = K(w.value === "bottom" && E.value === "tall-bottom" ? r.sidePanelMaxBottomTall : r.sidePanelMaxBottom, _.value, v.value);
+			return Math.max(0, Math.min(e, ue.value));
+		}), I = computed(() => w.value === "bottom" ? `${Math.max(0, Math.floor(F.value))}px` : r.sidePanelMaxBottom), fe = computed(() => w.value === "right" || w.value === "bottom" ? {} : w.value === "full" && !N.value ? {
 			opacity: 0,
 			pointerEvents: "none"
-		} : {}), I = computed(() => !D.value || A.value || S.value === "none" || S.value === "minimized" || S.value === "right" || S.value === "bottom" ? null : {
+		} : {}), L = computed(() => !k.value || N.value || w.value === "none" || w.value === "minimized" || w.value === "right" || w.value === "bottom" ? null : {
 			position: "absolute",
 			top: 0,
 			right: 0,
@@ -424,16 +433,16 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			left: 0,
 			zIndex: 10,
 			pointerEvents: "none"
-		}), L = computed(() => !D.value || S.value === "none" || S.value === "full" ? { gridTemplate: "1fr / 1fr" } : S.value === "right" ? {
+		}), R = computed(() => !k.value || w.value === "none" || w.value === "full" ? { gridTemplate: "1fr / 1fr" } : w.value === "right" ? {
 			gridTemplateRows: "1fr",
-			gridTemplateColumns: `minmax(0, 1fr) max(${n.sidePanelMinRight}, ${M.value})`
-		} : S.value === "bottom" ? {
-			gridTemplateRows: `minmax(0, 1fr) ${F.value}`,
+			gridTemplateColumns: `minmax(0, 1fr) max(${r.sidePanelMinRight}, ${re.value})`
+		} : w.value === "bottom" ? {
+			gridTemplateRows: `minmax(0, 1fr) ${I.value}`,
 			gridTemplateColumns: "1fr"
-		} : S.value === "minimized" ? {
+		} : w.value === "minimized" ? {
 			gridTemplateRows: "1fr max-content",
 			gridTemplateColumns: "1fr"
-		} : { gridTemplate: "1fr / 1fr" }), fe = computed(() => {
+		} : { gridTemplate: "1fr / 1fr" }), pe = computed(() => {
 			let e = {
 				minWidth: 0,
 				minHeight: 0,
@@ -442,13 +451,13 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				placeSelf: "stretch",
 				zIndex: 20
 			};
-			if (D.value) {
-				if (S.value === "right") return {
+			if (k.value) {
+				if (w.value === "right") return {
 					...e,
 					gridColumn: "2 / 3",
 					gridRow: "1 / 2"
 				};
-				if (S.value === "full") return {
+				if (w.value === "full") return {
 					...e,
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2"
@@ -459,7 +468,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				gridColumn: "1 / 2",
 				gridRow: "2 / 3"
 			};
-		}), pe = computed(() => {
+		}), me = computed(() => {
 			let e = {
 				position: "fixed",
 				top: 0,
@@ -468,7 +477,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				left: 0,
 				overflow: "hidden"
 			};
-			return O.value ? {
+			return A.value ? {
 				...e,
 				display: "grid",
 				gridTemplateRows: "auto 1fr"
@@ -476,11 +485,11 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				...e,
 				display: "block"
 			};
-		}), me = computed(() => O.value ? {
+		}), he = computed(() => A.value ? {
 			position: "relative",
 			zIndex: 0,
 			display: "grid",
-			...L.value,
+			...R.value,
 			gridRow: "2 / 3",
 			minWidth: 0,
 			minHeight: 0,
@@ -489,7 +498,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			position: "absolute",
 			zIndex: 0,
 			display: "grid",
-			...L.value,
+			...R.value,
 			minWidth: 0,
 			minHeight: 0,
 			overflow: "hidden",
@@ -497,9 +506,9 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			right: "0",
 			bottom: "0",
 			left: "0"
-		}), he = computed(() => !A.value || T.value), R = null, z, B, V = null, H = "", U = !1;
-		function W(e) {
-			let t = ne[e];
+		}), ge = computed(() => !N.value || D.value), z = null, B, V, H = null, U = "", W = !1;
+		function G(e) {
+			let t = te[e];
 			if (t !== void 0) return t;
 			if (e.endsWith("px")) {
 				let t = Number.parseFloat(e);
@@ -508,7 +517,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			let n = Number.parseFloat(e);
 			return Number.isFinite(n) ? n : 0;
 		}
-		function ge(e, t) {
+		function _e(e, t) {
 			if (typeof e == "number") return Number.isFinite(e) && e > 0 ? e : t;
 			let n = String(e).trim();
 			if (n.includes("/")) {
@@ -518,7 +527,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			let r = Number.parseFloat(n);
 			return Number.isFinite(r) && r > 0 ? r : t;
 		}
-		function G(e, t, n) {
+		function K(e, t, n) {
 			let r = e.trim();
 			if (r.endsWith("px")) {
 				let e = Number.parseFloat(r);
@@ -535,9 +544,9 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			let i = Number.parseFloat(r);
 			return Number.isFinite(i) ? i : 0;
 		}
-		function _e() {
-			let e = Math.max(1, g.value), t = Math.max(1, k.value), r = e / t, i = e / t, a = W(n.sidePanelBreakpoint), o = ce.value;
-			return r < n.autoBottomAspectRatioBreakpoint && o ? (w.value = "tall-bottom", {
+		function ve() {
+			let e = Math.max(1, _.value), t = Math.max(1, M.value), n = e / t, i = e / t, a = G(r.sidePanelBreakpoint), o = le.value;
+			return n < r.autoBottomAspectRatioBreakpoint && o ? (E.value = "tall-bottom", {
 				states: [
 					"auto",
 					"full",
@@ -545,7 +554,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					"minimized"
 				],
 				resolved: "bottom"
-			}) : i > n.autoRightAspectRatioBreakpoint ? (w.value = "wide-right", {
+			}) : i > r.autoRightAspectRatioBreakpoint ? (E.value = "wide-right", {
 				states: [
 					"auto",
 					"full",
@@ -553,7 +562,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					"minimized"
 				],
 				resolved: "right"
-			}) : (w.value = "mixed", e >= a ? {
+			}) : (E.value = "mixed", e >= a ? {
 				states: o ? [
 					"auto",
 					"full",
@@ -576,74 +585,74 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				resolved: "full"
 			});
 		}
-		function ve(e, t, n) {
-			e === t || t === "none" || !D.value || r("sidePanelTransition", {
+		function ye(e, t, n) {
+			e === t || t === "none" || !k.value || i("sidePanelTransition", {
 				from: e,
 				to: t,
 				reason: n
 			});
 		}
-		function K(e = !1) {
+		function q(e = !1) {
 			let t = {
-				availableStates: D.value ? [...re.value] : [],
-				sidePanelMode: D.value ? x.value : "none",
-				sidePanelModeResolved: D.value ? S.value : "none",
-				overlayOnly: A.value
+				availableStates: k.value ? [...j.value] : [],
+				sidePanelMode: k.value ? C.value : "none",
+				sidePanelModeResolved: k.value ? w.value : "none",
+				overlayOnly: N.value
 			};
-			if (!D.value) {
-				if (U) return;
-				U = !0, r("sidePanelAvailableStates", t);
+			if (!k.value) {
+				if (W) return;
+				W = !0, i("sidePanelAvailableStates", t);
 				return;
 			}
-			U = !1;
+			W = !1;
 			let n = JSON.stringify(t);
-			!e && n === H || (H = n, r("sidePanelAvailableStates", t));
+			!e && n === U || (U = n, i("sidePanelAvailableStates", t));
 		}
-		function q(e) {
-			let t = S.value;
-			if (!D.value) {
-				x.value = "none", S.value = "none", C.value = [], K();
+		function be(e) {
+			let t = w.value;
+			if (!k.value) {
+				C.value = "none", w.value = "none", T.value = [], q();
 				return;
 			}
-			let n = _e();
-			C.value = n.states;
-			let i = x.value === "none" ? "auto" : x.value;
-			i !== "auto" && !C.value.includes(i) ? (x.value = "auto", r("update:sidePanelPosition", "auto")) : x.value = i, S.value = x.value === "auto" ? n.resolved : x.value, ve(t, S.value, e), K(E.value === !1);
+			let n = ve();
+			T.value = n.states;
+			let r = C.value === "none" ? "auto" : C.value;
+			r !== "auto" && !T.value.includes(r) ? (C.value = "auto", i("update:sidePanelPosition", "auto")) : C.value = r, w.value = C.value === "auto" ? n.resolved : C.value, ye(t, w.value, e), q(O.value === !1);
 		}
 		function J(e, t = !1) {
-			if (z &&= (clearTimeout(z), void 0), t || !E.value) {
-				q(e);
+			if (B &&= (clearTimeout(B), void 0), t || !O.value) {
+				be(e);
 				return;
 			}
-			z = setTimeout(() => {
-				q(e);
-			}, n.layoutDebounceMs);
+			B = setTimeout(() => {
+				be(e);
+			}, r.layoutDebounceMs);
 		}
 		function Y(e) {
-			if (!D.value) return;
-			let t = C.value.includes(e) ? e : "auto";
-			t !== x.value && (x.value = t, r("update:sidePanelPosition", t)), J("set-side-panel-mode", !0);
+			if (!k.value) return;
+			let t = T.value.includes(e) ? e : "auto";
+			t !== C.value && (C.value = t, i("update:sidePanelPosition", t)), J("set-side-panel-mode", !0);
 		}
-		function ye() {
-			!D.value || !A.value || Y("minimized");
+		function xe() {
+			!k.value || !N.value || Y("minimized");
 		}
 		function X() {
-			B &&= (clearTimeout(B), void 0);
+			V &&= (clearTimeout(V), void 0);
 		}
 		function Z() {
-			if (X(), !A.value || j.value || S.value === "none") {
-				T.value = !0;
+			if (X(), !N.value || P.value || w.value === "none") {
+				D.value = !0;
 				return;
 			}
-			B = setTimeout(() => {
-				T.value = !1;
-			}, n.autoHideTimeout);
+			V = setTimeout(() => {
+				D.value = !1;
+			}, r.autoHideTimeout);
 		}
 		function Q() {
-			T.value = !0, Z();
+			D.value = !0, Z();
 		}
-		function be() {
-			if (!a.value) return;
+		function Se() {
+			if (!d.value) return;
 			let e = [
 				"mousemove",
 				"click",
@@ -653,67 +662,70 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			], t = () => {
 				Q();
 			};
-			for (let n of e) a.value.addEventListener(n, t, { passive: !0 });
-			V = () => {
-				if (a.value) for (let n of e) a.value.removeEventListener(n, t);
+			for (let n of e) d.value.addEventListener(n, t, { passive: !0 });
+			H = () => {
+				if (d.value) for (let n of e) d.value.removeEventListener(n, t);
 			};
 		}
 		function $() {
-			g.value = window.innerWidth, _.value = window.innerHeight, J("viewport-resize");
+			_.value = window.innerWidth, v.value = window.innerHeight, J("viewport-resize");
 		}
-		return watch(() => n.sidePanelPosition, (e) => {
-			if (!D.value) {
-				x.value = "none";
+		function Ce() {
+			_.value = window.innerWidth, v.value = window.innerHeight, y.value = p.value?.offsetHeight ?? 0, b.value = g.value?.offsetWidth ?? 0, x.value = g.value?.offsetHeight ?? 0, S(), J("manual-refresh", !0);
+		}
+		return t({ refresh: Ce }), watch(() => r.sidePanelPosition, (e) => {
+			if (!k.value) {
+				C.value = "none";
 				return;
 			}
-			x.value = e, J("prop-sync");
-		}, { immediate: !0 }), watch(D, (e) => {
+			C.value = e, J("prop-sync");
+		}, { immediate: !0 }), watch(k, (e) => {
 			if (!e) {
-				x.value = "none", S.value = "none", C.value = [], K();
+				C.value = "none", w.value = "none", T.value = [], q();
 				return;
 			}
-			x.value = n.sidePanelPosition, J("slot-state-change", !0);
+			C.value = r.sidePanelPosition, J("slot-state-change", !0);
 		}, { immediate: !0 }), watch(() => [
-			A.value,
-			n.autoHideTimeout,
-			S.value
+			N.value,
+			r.autoHideTimeout,
+			w.value
 		], () => {
-			if (S.value === "full") {
+			if (w.value === "full") {
 				Z();
 				return;
 			}
 			Q();
-		}), watch(j, (e, t) => {
+		}), watch(P, (e, t) => {
 			if (e) {
-				T.value = !0, X();
+				D.value = !0, X();
 				return;
 			}
 			t && Q();
 		}), watch(() => [
-			y.value,
 			b.value,
-			S.value,
-			D.value
+			x.value,
+			w.value,
+			k.value
 		], () => {
-			!D.value || S.value === "none" || r("defaultSlotResize", {
-				width: y.value,
-				height: b.value
+			!k.value || w.value === "none" || i("defaultSlotResize", {
+				width: b.value,
+				height: x.value
 			});
 		}), onMounted(async () => {
-			E.value = !0, $(), window.addEventListener("resize", $), be(), Q(), await nextTick(), R = new ResizeObserver(() => {
-				v.value = d.value?.offsetHeight ?? 0, y.value = p.value?.offsetWidth ?? 0, b.value = p.value?.offsetHeight ?? 0, te(), J("slot-measure");
-			}), d.value && R.observe(d.value), p.value && (R.observe(p.value), y.value = p.value.offsetWidth, b.value = p.value.offsetHeight), v.value = d.value?.offsetHeight ?? 0, J("mounted", !0);
+			O.value = !0, $(), window.addEventListener("resize", $), Se(), Q(), await nextTick(), z = new ResizeObserver(() => {
+				y.value = p.value?.offsetHeight ?? 0, b.value = g.value?.offsetWidth ?? 0, x.value = g.value?.offsetHeight ?? 0, S(), J("slot-measure");
+			}), p.value && z.observe(p.value), g.value && (z.observe(g.value), b.value = g.value.offsetWidth, x.value = g.value.offsetHeight), y.value = p.value?.offsetHeight ?? 0, J("mounted", !0);
 		}), onBeforeUnmount(() => {
-			window.removeEventListener("resize", $), V?.(), V = null, R?.disconnect(), R = null, X(), z &&= (clearTimeout(z), void 0);
-		}), (t, r) => (openBlock(), createElementBlock("section", {
+			window.removeEventListener("resize", $), H?.(), H = null, z?.disconnect(), z = null, X(), B &&= (clearTimeout(B), void 0);
+		}), (t, n) => (openBlock(), createElementBlock("section", {
 			ref_key: "rootRef",
-			ref: a,
+			ref: d,
 			class: "bg-black text-neutral-100",
-			style: normalizeStyle({ ...pe.value })
-		}, [O.value ? withDirectives((openBlock(), createElementBlock("header", {
+			style: normalizeStyle({ ...me.value })
+		}, [A.value ? withDirectives((openBlock(), createElementBlock("header", {
 			key: 0,
 			ref_key: "headerRef",
-			ref: d,
+			ref: p,
 			class: "",
 			style: {
 				position: "relative",
@@ -722,15 +734,15 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				zIndex: 40
 			}
 		}, [(openBlock(), createBlock(resolveDynamicComponent("style"), null, {
-			default: withCtx(() => [createTextVNode(" #header-outer { display: none; } @media (min-width: " + toDisplayString(n.headerHideWidthThreshold) + ") and (min-height: " + toDisplayString(n.headerHideHeightThreshold) + ") { #header-outer { display: block; } } ", 1)]),
+			default: withCtx(() => [createTextVNode(" #header-outer { display: none; } @media (min-width: " + toDisplayString(r.headerHideWidthThreshold) + ") and (min-height: " + toDisplayString(r.headerHideHeightThreshold) + ") { #header-outer { display: block; } } ", 1)]),
 			_: 1
-		})), createElementVNode("div", _hoisted_1, [renderSlot(t.$slots, "header")])], 512)), [[vShow, he.value]]) : createCommentVNode("", !0), createElementVNode("article", {
+		})), createElementVNode("div", _hoisted_1, [renderSlot(t.$slots, "header")])], 512)), [[vShow, ge.value]]) : createCommentVNode("", !0), createElementVNode("article", {
 			class: "",
-			style: normalizeStyle({ ...me.value })
+			style: normalizeStyle({ ...he.value })
 		}, [
 			createElementVNode("main", {
 				ref_key: "defaultRef",
-				ref: p,
+				ref: g,
 				class: "slot-content-container",
 				style: normalizeStyle({
 					position: "relative",
@@ -744,34 +756,34 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2",
 					zIndex: 0,
-					...de.value
+					...fe.value
 				})
 			}, [renderSlot(t.$slots, "default")], 4),
-			I.value ? (openBlock(), createElementBlock("div", {
+			L.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: "bg-black",
 				style: normalizeStyle({
-					...I.value,
+					...L.value,
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2"
 				})
 			}, null, 4)) : createCommentVNode("", !0),
-			D.value && S.value !== "none" ? (openBlock(), createElementBlock("div", {
+			k.value && w.value !== "none" ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: "",
-				style: normalizeStyle(fe.value)
+				style: normalizeStyle(pe.value)
 			}, [createVNode(SidePanelFrame_default, {
-				"side-panel-mode": x.value,
-				"side-panel-mode-resolved": S.value,
-				"available-states": re.value,
-				"overlay-only": A.value,
+				"side-panel-mode": C.value,
+				"side-panel-mode-resolved": w.value,
+				"available-states": j.value,
+				"overlay-only": N.value,
 				"hide-icons": e.hideSidePanelIcons,
 				"min-width": e.sidePanelMinRight,
-				"max-width": M.value,
-				"min-height": ue.value,
-				"max-height": F.value,
+				"max-width": re.value,
+				"min-height": de.value,
+				"max-height": I.value,
 				onSetSidePanelMode: Y,
-				onCloseSidePanel: ye
+				onCloseSidePanel: xe
 			}, {
 				default: withCtx(() => [renderSlot(t.$slots, "sidePanelContent")]),
 				_: 3
@@ -788,7 +800,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			])], 4)) : createCommentVNode("", !0)
 		], 4)], 4));
 	}
-}), [["__scopeId", "data-v-6d5f1013"]]), LoggedInOut_default = /* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-3fd50542"]]), LoggedInOut_default = /* @__PURE__ */ defineComponent({
 	__name: "LoggedInOut",
 	props: {
 		initiallyLoggedIn: { type: Boolean },
@@ -832,5 +844,62 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			setLoggedIn: f
 		}), (e, t) => !h.value || unref(s) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [unref(r) ? renderSlot(e.$slots, "loggedIn", { key: 0 }) : renderSlot(e.$slots, "loggedOut", { key: 1 })], 64)) : createCommentVNode("", !0);
 	}
+}), VanillaIf_default = /* @__PURE__ */ defineComponent({
+	__name: "VanillaIf",
+	props: { show: { type: [
+		Boolean,
+		Function,
+		Object
+	] } },
+	setup(e) {
+		let t = e, n = ref(!1), r = ref(!1), i = null;
+		function o() {
+			i &&= (clearInterval(i), null);
+		}
+		function s() {
+			let e = unref(t.show);
+			if (typeof e == "function") try {
+				let t = e();
+				return typeof t == "boolean" ? {
+					ready: !0,
+					value: t
+				} : {
+					ready: !1,
+					value: !1
+				};
+			} catch (e) {
+				if (e instanceof ReferenceError || e instanceof TypeError) return {
+					ready: !1,
+					value: !1
+				};
+				throw e;
+			}
+			return typeof e == "boolean" ? {
+				ready: !0,
+				value: e
+			} : e == null ? {
+				ready: !1,
+				value: !1
+			} : {
+				ready: !0,
+				value: !!e
+			};
+		}
+		function c() {
+			let { ready: e, value: t } = s();
+			e ? (r.value = t, n.value = !0, o()) : i ||= setInterval(() => {
+				let e = s();
+				e.ready && (r.value = e.value, n.value = !0, o());
+			}, 50);
+		}
+		let l = s();
+		return l.ready && (n.value = !0, r.value = l.value), watch(() => t.show, () => {
+			n.value = !1, o(), c();
+		}, { deep: !0 }), onMounted(() => {
+			n.value || c();
+		}), onUnmounted(() => {
+			o();
+		}), (e, t) => n.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [r.value ? renderSlot(e.$slots, "default", { key: 0 }) : renderSlot(e.$slots, "else", { key: 1 })], 64)) : createCommentVNode("", !0);
+	}
 });
-export { SidePanelButtonGroup_default as a, SidePanelHeader_default as i, LiveFrame_default as n, SidePanelControlButton_default as o, SidePanelFrame_default as r, LoggedInOut_default as t };
+export { SidePanelHeader_default as a, SidePanelFrame_default as i, LoggedInOut_default as n, SidePanelButtonGroup_default as o, LiveFrame_default as r, SidePanelControlButton_default as s, VanillaIf_default as t };

package/dist/components/VanillaIf/VanillaIf.vue.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from 'vue';
+type __VLS_Props = {
+    show: boolean | (() => boolean) | Ref<boolean>;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        else?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=VanillaIf.vue.d.ts.map

package/dist/components/VanillaIf/VanillaIf.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VanillaIf.vue.d.ts","sourceRoot":"","sources":["../../../src/components/VanillaIf/VanillaIf.vue"],"names":[],"mappings":"AA6GA,OAAO,EAAsC,KAAK,GAAG,EAAS,MAAM,KAAK,CAAA;AAEzE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,CAAA;CAC/C,CAAC;AAkGF,iBAAS,cAAc;WA6BT,OAAO,IAA6B;;yBAXrB,GAAG;sBACN,GAAG;;;;EAe5B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/VanillaIf/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './VanillaIf.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/VanillaIf/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VanillaIf/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/components/VanillaIf/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/components/VanillaIf/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/components/VanillaIf/index.test.ts"],"names":[],"mappings":""}

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './live';
 export { default as LoggedInOut } from './LoggedInOut';
+export { default as VanillaIf } from './VanillaIf';
 export * from './icons';
 //# sourceMappingURL=index.d.ts.map