@mtngtools/frame-vue 0.0.10-experimental.0 → 0.0.11-experimental.0

package/dist/{LoggedInOut-CWlMf-Qv.js → LoggedInOut-CuuHlQde.js}

@@ -1,5 +1,5 @@
-import { t as useSimpleLoggedIn } from "./useSimpleLoggedIn-Bz5zqTrQ.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
+import { t as useSimpleLoggedIn } from "./useSimpleLoggedIn-CSv5Xy3J.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
 var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ */ defineComponent({
 	__name: "SidePanelControlButton",
 	props: {
@@ -155,7 +155,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 	},
 	emits: ["setSidePanelMode", "closeSidePanel"],
 	setup(e, { emit: s }) {
-		let c = e, l = s, u = useSlots(), d = computed(() => c.sidePanelModeResolved !== "none"), p = computed(() => c.sidePanelModeResolved === "minimized"), m = computed(() => !!u.default), ee = computed(() => !!u.controls), h = computed(() => !p.value);
+		let c = e, l = s, u = useSlots(), d = computed(() => c.sidePanelModeResolved !== "none"), p = computed(() => c.sidePanelModeResolved === "minimized"), m = computed(() => !!u.default), h = computed(() => !!u.controls), g = computed(() => !p.value);
 		return (n, s) => d.value ? (openBlock(), createElementBlock("header", _hoisted_1$2, [createElementVNode("div", { style: normalizeStyle({
 			display: "flex",
 			flex: p.value && !m.value ? "1 1 auto" : "0 1 auto",
@@ -184,7 +184,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				textTransform: "uppercase"
 			},
 			onClick: s[0] ||= (e) => l("setSidePanelMode", "auto")
-		}, toDisplayString(e.title), 1)) : e.showTitleLabel ? (openBlock(), createElementBlock("h2", _hoisted_2$1, toDisplayString(e.title) + ": ", 1)) : createCommentVNode("", !0)], 64))], 4), ee.value || h.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [renderSlot(n.$slots, "controls", {}, () => [h.value ? (openBlock(), createBlock(SidePanelButtonGroup_default, {
+		}, toDisplayString(e.title), 1)) : e.showTitleLabel ? (openBlock(), createElementBlock("h2", _hoisted_2$1, toDisplayString(e.title) + ": ", 1)) : createCommentVNode("", !0)], 64))], 4), h.value || g.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [renderSlot(n.$slots, "controls", {}, () => [g.value ? (openBlock(), createBlock(SidePanelButtonGroup_default, {
 			key: 0,
 			"side-panel-mode": e.sidePanelMode,
 			"side-panel-mode-resolved": e.sidePanelModeResolved,
@@ -276,24 +276,24 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				height: "100%",
 				width: "100%"
 			};
-		}), ee = computed(() => (r.sidePanelModeResolved === "full" && r.overlayOnly, {
+		}), h = computed(() => (r.sidePanelModeResolved === "full" && r.overlayOnly, {
 			maxWidth: "100%",
 			maxHeight: "100%",
 			minHeight: 0,
 			minWidth: 0,
 			overflow: "hidden"
-		})), h = computed(() => ({
+		})), g = computed(() => ({
 			display: "grid",
 			gridTemplateColumns: "1fr",
 			gridTemplateRows: u.value ? "1.8rem" : "1.8rem minmax(0, 1fr)"
-		})), te = computed(() => r.overlayOnly ? "border-neutral-700 bg-black/95" : "");
+		})), _ = computed(() => r.overlayOnly ? "border-neutral-700 bg-black/95" : "");
 		return (t, n) => l.value ? (openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("div", { style: normalizeStyle(p.value) }, [createElementVNode("section", {
 			"data-test": "side-panel-frame-shell",
-			class: normalizeClass(te.value),
+			class: normalizeClass(_.value),
 			style: normalizeStyle([
-				ee.value,
+				h.value,
 				m.value,
-				h.value
+				g.value
 			])
 		}, [createElementVNode("div", _hoisted_2, [createVNode(SidePanelHeader_default, {
 			"show-title-label": e.showTitleLabel,
@@ -350,35 +350,35 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		"defaultSlotResize"
 	],
 	setup(e, { emit: t }) {
-		let l = e, d = t, h = useSlots(), g = ref(null), _ = ref(null), v = ref(null), y = ref(0), b = ref(0), x = ref(0), S = ref(0), C = ref(0);
-		function ne() {
-			let e = v.value;
+		let l = e, d = t, h = useSlots(), _ = ref(null), v = ref(null), y = ref(null), b = ref(0), x = ref(0), S = ref(0), C = ref(0), w = ref(0);
+		function ee() {
+			let e = y.value;
 			if (!e) return;
-			let t = Array.from(e.children), n = `${C.value}px`;
+			let t = Array.from(e.children), n = `${w.value}px`;
 			t.forEach((e) => {
 				e.style.height !== n && (e.style.height = n);
 			});
 		}
-		let w = ref("none"), T = ref("none"), E = ref([]), D = ref("none"), O = ref(!0), k = ref(!1), re = {
+		let T = ref("none"), E = ref("none"), D = ref([]), O = ref("none"), k = ref(!0), A = ref(!1), te = {
 			sm: 640,
 			md: 768,
 			lg: 1024,
 			xl: 1280,
 			"2xl": 1536
-		}, A = computed(() => !!h.sidePanelContent), j = computed(() => !!h.header), M = computed(() => E.value.filter((e) => e !== "auto")), N = computed(() => Math.max(0, b.value - x.value)), P = computed(() => y.value < G(l.controlsOverlayOnly)), ie = computed(() => y.value === 0 ? !1 : N.value / y.value > 1.1), ae = computed(() => T.value === "right" && D.value === "wide-right" ? l.sidePanelMaxRightWide : l.sidePanelMaxRight), oe = computed(() => ye(l.mainContentAspectRatio, 16 / 9)), se = computed(() => S.value > 0 ? S.value : Math.max(1, y.value)), ce = computed(() => se.value / oe.value + 20), le = computed(() => Math.max(1, y.value) / oe.value), ue = computed(() => K(l.sidePanelMinBottom, y.value, b.value)), de = computed(() => {
-			let e = le.value + ue.value;
-			return N.value >= e;
-		}), fe = computed(() => Math.max(0, N.value - ce.value)), pe = computed(() => {
-			if (T.value !== "bottom") return l.sidePanelMinBottom;
-			let e = K(l.sidePanelMinBottom, y.value, b.value), t = Math.min(e, F.value);
+		}, j = computed(() => !!h.sidePanelContent), M = computed(() => !!h.header), N = computed(() => D.value.filter((e) => e !== "auto")), P = computed(() => Math.max(0, x.value - S.value)), F = computed(() => b.value < q(l.controlsOverlayOnly)), I = computed(() => b.value === 0 ? !1 : P.value / b.value > 1.1), ne = computed(() => E.value === "right" && O.value === "wide-right" ? l.sidePanelMaxRightWide : l.sidePanelMaxRight), re = computed(() => ge(l.mainContentAspectRatio, 16 / 9)), ie = computed(() => C.value > 0 ? C.value : Math.max(1, b.value)), ae = computed(() => ie.value / re.value + 20), oe = computed(() => Math.max(1, b.value) / re.value), se = computed(() => J(l.sidePanelMinBottom, b.value, x.value)), ce = computed(() => {
+			let e = oe.value + se.value;
+			return P.value >= e;
+		}), le = computed(() => Math.max(0, P.value - ae.value)), ue = computed(() => {
+			if (E.value !== "bottom") return l.sidePanelMinBottom;
+			let e = J(l.sidePanelMinBottom, b.value, x.value), t = Math.min(e, L.value);
 			return `${Math.max(0, Math.floor(t))}px`;
-		}), F = computed(() => {
-			let e = K(T.value === "bottom" && D.value === "tall-bottom" ? l.sidePanelMaxBottomTall : l.sidePanelMaxBottom, y.value, b.value);
-			return Math.max(0, Math.min(e, fe.value));
-		}), I = computed(() => T.value === "bottom" ? `${Math.max(0, Math.floor(F.value))}px` : l.sidePanelMaxBottom), me = computed(() => T.value === "right" || T.value === "bottom" ? {} : T.value === "full" && !P.value ? {
+		}), L = computed(() => {
+			let e = J(E.value === "bottom" && O.value === "tall-bottom" ? l.sidePanelMaxBottomTall : l.sidePanelMaxBottom, b.value, x.value);
+			return Math.max(0, Math.min(e, le.value));
+		}), R = computed(() => E.value === "bottom" ? `${Math.max(0, Math.floor(L.value))}px` : l.sidePanelMaxBottom), de = computed(() => E.value === "right" || E.value === "bottom" ? {} : E.value === "full" && !F.value ? {
 			opacity: 0,
 			pointerEvents: "none"
-		} : {}), L = computed(() => !A.value || P.value || T.value === "none" || T.value === "minimized" || T.value === "right" || T.value === "bottom" ? null : {
+		} : {}), z = computed(() => !j.value || F.value || E.value === "none" || E.value === "minimized" || E.value === "right" || E.value === "bottom" ? null : {
 			position: "absolute",
 			top: 0,
 			right: 0,
@@ -386,16 +386,16 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			left: 0,
 			zIndex: 10,
 			pointerEvents: "none"
-		}), R = computed(() => !A.value || T.value === "none" || T.value === "full" ? { gridTemplate: "1fr / 1fr" } : T.value === "right" ? {
+		}), B = computed(() => !j.value || E.value === "none" || E.value === "full" ? { gridTemplate: "1fr / 1fr" } : E.value === "right" ? {
 			gridTemplateRows: "1fr",
-			gridTemplateColumns: `minmax(0, 1fr) max(${l.sidePanelMinRight}, ${ae.value})`
-		} : T.value === "bottom" ? {
-			gridTemplateRows: `minmax(0, 1fr) ${I.value}`,
+			gridTemplateColumns: `minmax(0, 1fr) max(${l.sidePanelMinRight}, ${ne.value})`
+		} : E.value === "bottom" ? {
+			gridTemplateRows: `minmax(0, 1fr) ${R.value}`,
 			gridTemplateColumns: "1fr"
-		} : T.value === "minimized" ? {
+		} : E.value === "minimized" ? {
 			gridTemplateRows: "1fr 34px",
 			gridTemplateColumns: "1fr"
-		} : { gridTemplate: "1fr / 1fr" }), he = computed(() => {
+		} : { gridTemplate: "1fr / 1fr" }), fe = computed(() => {
 			let e = {
 				minWidth: 0,
 				minHeight: 0,
@@ -404,13 +404,13 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				placeSelf: "stretch",
 				zIndex: 20
 			};
-			if (A.value) {
-				if (T.value === "right") return {
+			if (j.value) {
+				if (E.value === "right") return {
 					...e,
 					gridColumn: "2 / 3",
 					gridRow: "1 / 2"
 				};
-				if (T.value === "full") return {
+				if (E.value === "full") return {
 					...e,
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2"
@@ -421,7 +421,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				gridColumn: "1 / 2",
 				gridRow: "2 / 3"
 			};
-		}), ge = computed(() => {
+		}), pe = computed(() => {
 			let e = {
 				position: "fixed",
 				top: 0,
@@ -430,7 +430,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				left: 0,
 				overflow: "hidden"
 			};
-			return j.value ? {
+			return M.value ? {
 				...e,
 				display: "grid",
 				gridTemplateRows: "auto 1fr"
@@ -438,11 +438,11 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				...e,
 				display: "block"
 			};
-		}), _e = computed(() => j.value ? {
+		}), me = computed(() => M.value ? {
 			position: "relative",
 			zIndex: 0,
 			display: "grid",
-			...R.value,
+			...B.value,
 			gridRow: "2 / 3",
 			minWidth: 0,
 			minHeight: 0,
@@ -451,7 +451,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			position: "absolute",
 			zIndex: 0,
 			display: "grid",
-			...R.value,
+			...B.value,
 			minWidth: 0,
 			minHeight: 0,
 			overflow: "hidden",
@@ -459,9 +459,9 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			right: "0",
 			bottom: "0",
 			left: "0"
-		}), ve = computed(() => !P.value || O.value), z = null, B, V, H = null, U = "", W = !1;
-		function G(e) {
-			let t = re[e];
+		}), he = computed(() => !F.value || k.value), V = null, H, U, W = null, G = "", K = !1;
+		function q(e) {
+			let t = te[e];
 			if (t !== void 0) return t;
 			if (e.endsWith("px")) {
 				let t = Number.parseFloat(e);
@@ -470,7 +470,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			let n = Number.parseFloat(e);
 			return Number.isFinite(n) ? n : 0;
 		}
-		function ye(e, t) {
+		function ge(e, t) {
 			if (typeof e == "number") return Number.isFinite(e) && e > 0 ? e : t;
 			let n = String(e).trim();
 			if (n.includes("/")) {
@@ -480,7 +480,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			let r = Number.parseFloat(n);
 			return Number.isFinite(r) && r > 0 ? r : t;
 		}
-		function K(e, t, n) {
+		function J(e, t, n) {
 			let r = e.trim();
 			if (r.endsWith("px")) {
 				let e = Number.parseFloat(r);
@@ -497,9 +497,9 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			let i = Number.parseFloat(r);
 			return Number.isFinite(i) ? i : 0;
 		}
-		function be() {
-			let e = Math.max(1, y.value), t = Math.max(1, N.value), n = e / t, r = e / t, i = G(l.sidePanelBreakpoint), a = de.value;
-			return n < l.autoBottomAspectRatioBreakpoint && a ? (D.value = "tall-bottom", {
+		function _e() {
+			let e = Math.max(1, b.value), t = Math.max(1, P.value), n = e / t, r = e / t, i = q(l.sidePanelBreakpoint), a = ce.value;
+			return n < l.autoBottomAspectRatioBreakpoint && a ? (O.value = "tall-bottom", {
 				states: [
 					"auto",
 					"full",
@@ -507,7 +507,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					"minimized"
 				],
 				resolved: "bottom"
-			}) : r > l.autoRightAspectRatioBreakpoint ? (D.value = "wide-right", {
+			}) : r > l.autoRightAspectRatioBreakpoint ? (O.value = "wide-right", {
 				states: [
 					"auto",
 					"full",
@@ -515,7 +515,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					"minimized"
 				],
 				resolved: "right"
-			}) : (D.value = "mixed", e >= i ? {
+			}) : (O.value = "mixed", e >= i ? {
 				states: a ? [
 					"auto",
 					"full",
@@ -538,74 +538,74 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				resolved: "full"
 			});
 		}
-		function xe(e, t, n) {
-			e === t || t === "none" || !A.value || d("sidePanelTransition", {
+		function ve(e, t, n) {
+			e === t || t === "none" || !j.value || d("sidePanelTransition", {
 				from: e,
 				to: t,
 				reason: n
 			});
 		}
-		function q(e = !1) {
+		function Y(e = !1) {
 			let t = {
-				availableStates: A.value ? [...M.value] : [],
-				sidePanelMode: A.value ? w.value : "none",
-				sidePanelModeResolved: A.value ? T.value : "none",
-				overlayOnly: P.value
+				availableStates: j.value ? [...N.value] : [],
+				sidePanelMode: j.value ? T.value : "none",
+				sidePanelModeResolved: j.value ? E.value : "none",
+				overlayOnly: F.value
 			};
-			if (!A.value) {
-				if (W) return;
-				W = !0, d("sidePanelAvailableStates", t);
+			if (!j.value) {
+				if (K) return;
+				K = !0, d("sidePanelAvailableStates", t);
 				return;
 			}
-			W = !1;
+			K = !1;
 			let n = JSON.stringify(t);
-			!e && n === U || (U = n, d("sidePanelAvailableStates", t));
+			!e && n === G || (G = n, d("sidePanelAvailableStates", t));
 		}
-		function J(e) {
-			let t = T.value;
-			if (!A.value) {
-				w.value = "none", T.value = "none", E.value = [], q();
+		function ye(e) {
+			let t = E.value;
+			if (!j.value) {
+				T.value = "none", E.value = "none", D.value = [], Y();
 				return;
 			}
-			let n = be();
-			E.value = n.states;
-			let r = w.value === "none" ? "auto" : w.value;
-			r !== "auto" && !E.value.includes(r) ? (w.value = "auto", d("update:sidePanelPosition", "auto")) : w.value = r, T.value = w.value === "auto" ? n.resolved : w.value, xe(t, T.value, e), q(k.value === !1);
+			let n = _e();
+			D.value = n.states;
+			let r = T.value === "none" ? "auto" : T.value;
+			r !== "auto" && !D.value.includes(r) ? (T.value = "auto", d("update:sidePanelPosition", "auto")) : T.value = r, E.value = T.value === "auto" ? n.resolved : T.value, ve(t, E.value, e), Y(A.value === !1);
 		}
-		function Y(e, t = !1) {
-			if (B &&= (clearTimeout(B), void 0), t || !k.value) {
-				J(e);
+		function X(e, t = !1) {
+			if (H &&= (clearTimeout(H), void 0), t || !A.value) {
+				ye(e);
 				return;
 			}
-			B = setTimeout(() => {
-				J(e);
+			H = setTimeout(() => {
+				ye(e);
 			}, l.layoutDebounceMs);
 		}
-		function Se(e) {
-			if (!A.value) return;
-			let t = E.value.includes(e) ? e : "auto";
-			t !== w.value && (w.value = t, d("update:sidePanelPosition", t)), Y("set-side-panel-mode", !0);
+		function be(e) {
+			if (!j.value) return;
+			let t = D.value.includes(e) ? e : "auto";
+			t !== T.value && (T.value = t, d("update:sidePanelPosition", t)), X("set-side-panel-mode", !0);
 		}
-		function Ce() {
-			!A.value || !P.value || Se("minimized");
-		}
-		function X() {
-			V &&= (clearTimeout(V), void 0);
+		function xe() {
+			!j.value || !F.value || be("minimized");
 		}
 		function Z() {
-			if (X(), !P.value || ie.value || T.value === "none") {
-				O.value = !0;
+			U &&= (clearTimeout(U), void 0);
+		}
+		function Se() {
+			if (Z(), !F.value || I.value || E.value === "none") {
+				k.value = !0;
 				return;
 			}
-			V = setTimeout(() => {
-				O.value = !1;
+			U = setTimeout(() => {
+				k.value = !1;
 			}, l.autoHideTimeout);
 		}
 		function Q() {
-			O.value = !0, Z();
+			k.value = !0, Se();
 		}
-		function we() {
-			if (!g.value) return;
+		function Ce() {
+			if (!_.value) return;
 			let e = [
 				"mousemove",
 				"click",
@@ -615,67 +615,67 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			], t = () => {
 				Q();
 			};
-			for (let n of e) g.value.addEventListener(n, t, { passive: !0 });
-			H = () => {
-				if (g.value) for (let n of e) g.value.removeEventListener(n, t);
+			for (let n of e) _.value.addEventListener(n, t, { passive: !0 });
+			W = () => {
+				if (_.value) for (let n of e) _.value.removeEventListener(n, t);
 			};
 		}
 		function $() {
-			y.value = window.innerWidth, b.value = window.innerHeight, Y("viewport-resize");
+			b.value = window.innerWidth, x.value = window.innerHeight, X("viewport-resize");
 		}
 		return watch(() => l.sidePanelPosition, (e) => {
-			if (!A.value) {
-				w.value = "none";
+			if (!j.value) {
+				T.value = "none";
 				return;
 			}
-			w.value = e, Y("prop-sync");
-		}, { immediate: !0 }), watch(A, (e) => {
+			T.value = e, X("prop-sync");
+		}, { immediate: !0 }), watch(j, (e) => {
 			if (!e) {
-				w.value = "none", T.value = "none", E.value = [], q();
+				T.value = "none", E.value = "none", D.value = [], Y();
 				return;
 			}
-			w.value = l.sidePanelPosition, Y("slot-state-change", !0);
+			T.value = l.sidePanelPosition, X("slot-state-change", !0);
 		}, { immediate: !0 }), watch(() => [
-			P.value,
+			F.value,
 			l.autoHideTimeout,
-			T.value
+			E.value
 		], () => {
-			if (T.value === "full") {
-				Z();
+			if (E.value === "full") {
+				Se();
 				return;
 			}
 			Q();
-		}), watch(ie, (e, t) => {
+		}), watch(I, (e, t) => {
 			if (e) {
-				O.value = !0, X();
+				k.value = !0, Z();
 				return;
 			}
 			t && Q();
 		}), watch(() => [
-			S.value,
 			C.value,
-			T.value,
-			A.value
+			w.value,
+			E.value,
+			j.value
 		], () => {
-			!A.value || T.value === "none" || d("defaultSlotResize", {
-				width: S.value,
-				height: C.value
+			!j.value || E.value === "none" || d("defaultSlotResize", {
+				width: C.value,
+				height: w.value
 			});
 		}), onMounted(async () => {
-			k.value = !0, $(), window.addEventListener("resize", $), we(), Q(), await nextTick(), z = new ResizeObserver(() => {
-				x.value = _.value?.offsetHeight ?? 0, S.value = v.value?.offsetWidth ?? 0, C.value = v.value?.offsetHeight ?? 0, ne(), Y("slot-measure");
-			}), _.value && z.observe(_.value), v.value && (z.observe(v.value), S.value = v.value.offsetWidth, C.value = v.value.offsetHeight), x.value = _.value?.offsetHeight ?? 0, Y("mounted", !0);
+			A.value = !0, $(), window.addEventListener("resize", $), Ce(), Q(), await nextTick(), V = new ResizeObserver(() => {
+				S.value = v.value?.offsetHeight ?? 0, C.value = y.value?.offsetWidth ?? 0, w.value = y.value?.offsetHeight ?? 0, ee(), X("slot-measure");
+			}), v.value && V.observe(v.value), y.value && (V.observe(y.value), C.value = y.value.offsetWidth, w.value = y.value.offsetHeight), S.value = v.value?.offsetHeight ?? 0, X("mounted", !0);
 		}), onBeforeUnmount(() => {
-			window.removeEventListener("resize", $), H?.(), H = null, z?.disconnect(), z = null, X(), B &&= (clearTimeout(B), void 0);
+			window.removeEventListener("resize", $), W?.(), W = null, V?.disconnect(), V = null, Z(), H &&= (clearTimeout(H), void 0);
 		}), (t, n) => (openBlock(), createElementBlock("section", {
 			ref_key: "rootRef",
-			ref: g,
+			ref: _,
 			class: "bg-black text-neutral-100",
-			style: normalizeStyle({ ...ge.value })
-		}, [j.value ? withDirectives((openBlock(), createElementBlock("header", {
+			style: normalizeStyle({ ...pe.value })
+		}, [M.value ? withDirectives((openBlock(), createElementBlock("header", {
 			key: 0,
 			ref_key: "headerRef",
-			ref: _,
+			ref: v,
 			class: "",
 			style: {
 				position: "relative",
@@ -686,13 +686,13 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		}, [(openBlock(), createBlock(resolveDynamicComponent("style"), null, {
 			default: withCtx(() => [createTextVNode(" #header-outer { display: none; } @media (min-width: " + toDisplayString(l.headerHideWidthThreshold) + ") and (min-height: " + toDisplayString(l.headerHideHeightThreshold) + ") { #header-outer { display: block; } } ", 1)]),
 			_: 1
-		})), createElementVNode("div", _hoisted_1, [renderSlot(t.$slots, "header")])], 512)), [[vShow, ve.value]]) : createCommentVNode("", !0), createElementVNode("article", {
+		})), createElementVNode("div", _hoisted_1, [renderSlot(t.$slots, "header")])], 512)), [[vShow, he.value]]) : createCommentVNode("", !0), createElementVNode("article", {
 			class: "",
-			style: normalizeStyle({ ..._e.value })
+			style: normalizeStyle({ ...me.value })
 		}, [
 			createElementVNode("main", {
 				ref_key: "defaultRef",
-				ref: v,
+				ref: y,
 				class: "slot-content-container",
 				style: normalizeStyle({
 					position: "relative",
@@ -706,33 +706,33 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2",
 					zIndex: 0,
-					...me.value
+					...de.value
 				})
 			}, [renderSlot(t.$slots, "default")], 4),
-			L.value ? (openBlock(), createElementBlock("div", {
+			z.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: "bg-black",
 				style: normalizeStyle({
-					...L.value,
+					...z.value,
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2"
 				})
 			}, null, 4)) : createCommentVNode("", !0),
-			t.$slots.sidePanelContent && T.value !== "none" ? (openBlock(), createElementBlock("div", {
+			t.$slots.sidePanelContent && E.value !== "none" ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: "",
-				style: normalizeStyle(he.value)
+				style: normalizeStyle(fe.value)
 			}, [createVNode(SidePanelFrame_default, {
-				"side-panel-mode": w.value,
-				"side-panel-mode-resolved": T.value,
-				"available-states": M.value,
-				"overlay-only": P.value,
+				"side-panel-mode": T.value,
+				"side-panel-mode-resolved": E.value,
+				"available-states": N.value,
+				"overlay-only": F.value,
 				"min-width": e.sidePanelMinRight,
-				"max-width": ae.value,
-				"min-height": pe.value,
-				"max-height": I.value,
-				onSetSidePanelMode: Se,
-				onCloseSidePanel: Ce
+				"max-width": ne.value,
+				"min-height": ue.value,
+				"max-height": R.value,
+				onSetSidePanelMode: be,
+				onCloseSidePanel: xe
 			}, {
 				default: withCtx(() => [renderSlot(t.$slots, "sidePanelContent")]),
 				_: 3
@@ -750,14 +750,44 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 	}
 }), [["__scopeId", "data-v-1dc710d8"]]), LoggedInOut_default = /* @__PURE__ */ defineComponent({
 	__name: "LoggedInOut",
+	props: {
+		initiallyLoggedIn: { type: Boolean },
+		addWindowAccess: {
+			type: Boolean,
+			default: !1
+		},
+		windowAccessObjectName: { default: "loggedInOut" }
+	},
 	setup(t, { expose: n }) {
-		let { loggedIn: r, setToLoggedIn: i, setToLoggedOut: a, toggleLoggedIn: o } = useSimpleLoggedIn();
-		return n({
-			loggedIn: r,
-			setToLoggedIn: i,
-			setToLoggedOut: a,
-			toggleLoggedIn: o
-		}), (e, t) => unref(r) ? renderSlot(e.$slots, "loggedIn", { key: 0 }) : renderSlot(e.$slots, "loggedOut", { key: 1 });
+		let r = t, { loggedIn: i, setToLoggedIn: a, setToLoggedOut: o, toggleLoggedIn: s } = useSimpleLoggedIn(r.initiallyLoggedIn), c = () => i.value, l = (e) => {
+			i.value = e;
+		}, u = () => {
+			r.addWindowAccess && typeof window < "u" && (window[r.windowAccessObjectName] = {
+				setToLoggedIn: a,
+				setToLoggedOut: o,
+				toggleLoggedIn: s,
+				getLoggedIn: c,
+				setLoggedIn: l
+			});
+		}, d = (e = r.windowAccessObjectName) => {
+			typeof window < "u" && window[e] && delete window[e];
+		};
+		return onMounted(() => {
+			u();
+		}), onUnmounted(() => {
+			d();
+		}), watch(() => r.addWindowAccess, (e) => {
+			e ? u() : d();
+		}), watch(() => r.windowAccessObjectName, (e, t) => {
+			r.addWindowAccess && (d(t), u());
+		}), n({
+			loggedIn: i,
+			setToLoggedIn: a,
+			setToLoggedOut: o,
+			toggleLoggedIn: s,
+			getLoggedIn: c,
+			setLoggedIn: l
+		}), (e, t) => unref(i) ? renderSlot(e.$slots, "loggedIn", { key: 0 }) : renderSlot(e.$slots, "loggedOut", { key: 1 });
 	}
 });
 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 };

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

@@ -1,3 +1,8 @@
+type __VLS_Props = {
+    initiallyLoggedIn?: boolean;
+    addWindowAccess?: boolean;
+    windowAccessObjectName?: string;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -8,12 +13,17 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     loggedIn: import('vue').Ref<boolean, boolean>;
     setToLoggedIn: () => void;
     setToLoggedOut: () => void;
     toggleLoggedIn: () => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    getLoggedIn: () => boolean;
+    setLoggedIn: (val: boolean) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    addWindowAccess: boolean;
+    windowAccessObjectName: string;
+}, {}, {}, {}, 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 & {

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

@@ -1 +1 @@
-{"version":3,"file":"LoggedInOut.vue.d.ts","sourceRoot":"","sources":["../../../src/components/LoggedInOut/LoggedInOut.vue"],"names":[],"mappings":"AA4CA,iBAAS,cAAc;WA2BT,OAAO,IAA6B;;0BAXpB,GAAG;2BACF,GAAG;;;;EAejC;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;0OAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"LoggedInOut.vue.d.ts","sourceRoot":"","sources":["../../../src/components/LoggedInOut/LoggedInOut.vue"],"names":[],"mappings":"AAmFA,KAAK,WAAW,GAAG;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC,CAAC;AA4EF,iBAAS,cAAc;WA2BT,OAAO,IAA6B;;0BAXpB,GAAG;2BACF,GAAG;;;;EAejC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;uBA9GK,OAAO;;qBAXb,OAAO;4BACA,MAAM;6EAgI/B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components.js

@@ -1,3 +1,3 @@
-import { a as SidePanelButtonGroup_default, i as SidePanelHeader_default, n as LiveFrame_default, o as SidePanelControlButton_default, r as SidePanelFrame_default, t as LoggedInOut_default } from "./LoggedInOut-CWlMf-Qv.js";
-import "./useSimpleLoggedIn-Bz5zqTrQ.js";
+import { a as SidePanelButtonGroup_default, i as SidePanelHeader_default, n as LiveFrame_default, o as SidePanelControlButton_default, r as SidePanelFrame_default, t as LoggedInOut_default } from "./LoggedInOut-CuuHlQde.js";
+import "./useSimpleLoggedIn-CSv5Xy3J.js";
 export { LiveFrame_default as LiveFrame, LoggedInOut_default as LoggedInOut, SidePanelButtonGroup_default as SidePanelButtonGroup, SidePanelControlButton_default as SidePanelControlButton, SidePanelFrame_default as SidePanelFrame, SidePanelHeader_default as SidePanelHeader };

package/dist/composables/useSimpleLoggedIn/index.test.d.ts

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

package/dist/composables/useSimpleLoggedIn/index.test.d.ts.map

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

package/dist/composables/useSimpleLoggedIn/useSimpleLoggedIn.d.ts

@@ -1,7 +1,7 @@
 /**
  * Shared state for simple logged in status.
  */
-export declare function useSimpleLoggedIn(): {
+export declare function useSimpleLoggedIn(initialValue?: boolean): {
     loggedIn: import('vue').Ref<boolean, boolean>;
     setToLoggedIn: () => void;
     setToLoggedOut: () => void;

package/dist/composables/useSimpleLoggedIn/useSimpleLoggedIn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSimpleLoggedIn.d.ts","sourceRoot":"","sources":["../../../src/composables/useSimpleLoggedIn/useSimpleLoggedIn.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,wBAAgB,iBAAiB;;;;;EAmBhC"}
+{"version":3,"file":"useSimpleLoggedIn.d.ts","sourceRoot":"","sources":["../../../src/composables/useSimpleLoggedIn/useSimpleLoggedIn.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,CAAC,EAAE,OAAO;;;;;EAuBvD"}

package/dist/composables.js

@@ -1,2 +1,2 @@
-import { t as useSimpleLoggedIn } from "./useSimpleLoggedIn-Bz5zqTrQ.js";
+import { t as useSimpleLoggedIn } from "./useSimpleLoggedIn-CSv5Xy3J.js";
 export { useSimpleLoggedIn };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { a as SidePanelButtonGroup_default, i as SidePanelHeader_default, n as LiveFrame_default, o as SidePanelControlButton_default, r as SidePanelFrame_default, t as LoggedInOut_default } from "./LoggedInOut-CWlMf-Qv.js";
-import { t as useSimpleLoggedIn } from "./useSimpleLoggedIn-Bz5zqTrQ.js";
+import { a as SidePanelButtonGroup_default, i as SidePanelHeader_default, n as LiveFrame_default, o as SidePanelControlButton_default, r as SidePanelFrame_default, t as LoggedInOut_default } from "./LoggedInOut-CuuHlQde.js";
+import { t as useSimpleLoggedIn } from "./useSimpleLoggedIn-CSv5Xy3J.js";
 import "./components.js";
 import "./composables.js";
 export { LiveFrame_default as LiveFrame, LoggedInOut_default as LoggedInOut, SidePanelButtonGroup_default as SidePanelButtonGroup, SidePanelControlButton_default as SidePanelControlButton, SidePanelFrame_default as SidePanelFrame, SidePanelHeader_default as SidePanelHeader, useSimpleLoggedIn };

package/dist/{useSimpleLoggedIn-Bz5zqTrQ.js → useSimpleLoggedIn-CSv5Xy3J.js}

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 var loggedIn = ref(!1);
-function useSimpleLoggedIn() {
-	return {
+function useSimpleLoggedIn(e) {
+	return e !== void 0 && (loggedIn.value = e), {
 		loggedIn,
 		setToLoggedIn: () => {
 			loggedIn.value = !0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mtngtools/frame-vue",
-  "version": "0.0.10-experimental.0",
+  "version": "0.0.11-experimental.0",
   "description": "(Experimental) Vue.js component and composable library for mtngTOOLS",
   "type": "module",
   "main": "./dist/index.js",