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

package/README.md

@@ -10,6 +10,7 @@ Vue.js component and composable library for mtngTOOLS. Built for use in Nuxt app
 | Component | Description |
 | --- | --- |
 | [`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. |
 | [`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. |
@@ -29,8 +30,18 @@ Install in an app that already uses Vue 3 (e.g. a Nuxt app):
 pnpm add @mtngtools/frame-vue vue
 ```
 
+### Regular Imports
+
+```ts
+import { LiveFrame, LoggedInOut } from '@mtngtools/frame-vue';
+```
+
+### Direct Subpath Imports
+
+For specific needs or smaller bundle sizes, you can import directly from subpaths:
+
 ```ts
-import { LiveFrame } from '@mtngtools/frame-vue';
+import { LoggedInOut } from '@mtngtools/frame-vue/components';
 import { useSimpleLoggedIn } from '@mtngtools/frame-vue/composables';
 ```
 

package/dist/{live-C38-eFWG.js → LoggedInOut-CWlMf-Qv.js}

@@ -1,4 +1,5 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
+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";
 var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ */ defineComponent({
 	__name: "SidePanelControlButton",
 	props: {
@@ -17,22 +18,22 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		}
 	},
 	emits: ["click"],
-	setup(e, { emit: n }) {
-		let r = e, a = n, s = {
+	setup(e, { emit: t }) {
+		let r = e, i = t, o = {
 			auto: "Auto",
 			right: "Right",
 			bottom: "Bottom",
 			full: "Full",
 			minimized: "Close"
-		}, c = computed(() => s[r.state]), l = computed(() => {
+		}, c = computed(() => o[r.state]), l = computed(() => {
 			if (r.disabled) return "cursor-not-allowed border-neutral-700 text-neutral-500";
 			{
 				let e = "cursor-pointer";
 				return r.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 d() {
-			r.disabled || a("click", r.state);
+		function u() {
+			r.disabled || i("click", r.state);
 		}
 		return (t, n) => (openBlock(), createElementBlock("button", {
 			type: "button",
@@ -53,7 +54,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				lineHeight: "1.2rem",
 				textTransform: "uppercase"
 			},
-			onClick: d
+			onClick: u
 		}, [renderSlot(t.$slots, "icon", { state: e.state }), renderSlot(t.$slots, "label", { state: e.state }, () => [createTextVNode(toDisplayString(c.value), 1)])], 10, _hoisted_1$4));
 	}
 }), _hoisted_1$3 = {
@@ -75,27 +76,27 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		}
 	},
 	emits: ["setSidePanelMode", "closeSidePanel"],
-	setup(o, { emit: s }) {
-		let c = o, l = s, u = computed(() => c.sidePanelModeResolved !== "none"), d = computed(() => c.overlayOnly && c.sidePanelModeResolved === "full" ? c.availableStates.includes("minimized") ? ["minimized"] : [] : c.availableStates);
+	setup(e, { emit: s }) {
+		let c = e, l = s, u = computed(() => c.sidePanelModeResolved !== "none"), d = computed(() => c.overlayOnly && c.sidePanelModeResolved === "full" ? c.availableStates.includes("minimized") ? ["minimized"] : [] : c.availableStates);
 		function f(e) {
 			l("setSidePanelMode", e);
 		}
 		function p() {
 			l("closeSidePanel");
 		}
-		return (t, s) => u.value ? renderSlot(t.$slots, "default", {
+		return (n, s) => u.value ? renderSlot(n.$slots, "default", {
 			key: 0,
-			sidePanelMode: o.sidePanelMode,
-			sidePanelModeResolved: o.sidePanelModeResolved,
-			availableStates: o.availableStates,
-			overlayOnly: o.overlayOnly,
+			sidePanelMode: e.sidePanelMode,
+			sidePanelModeResolved: e.sidePanelModeResolved,
+			availableStates: e.availableStates,
+			overlayOnly: e.overlayOnly,
 			setSidePanelMode: f,
 			closeSidePanel: p
-		}, () => [createElementVNode("div", _hoisted_1$3, [(openBlock(!0), createElementBlock(Fragment, null, renderList(d.value, (e) => (openBlock(), createBlock(SidePanelControlButton_default, {
-			key: e,
-			state: e,
-			active: e === o.sidePanelMode,
-			"active-resolved": e === o.sidePanelModeResolved,
+		}, () => [createElementVNode("div", _hoisted_1$3, [(openBlock(!0), createElementBlock(Fragment, null, renderList(d.value, (t) => (openBlock(), createBlock(SidePanelControlButton_default, {
+			key: t,
+			state: t,
+			active: t === e.sidePanelMode,
+			"active-resolved": t === e.sidePanelModeResolved,
 			onClick: f
 		}, null, 8, [
 			"state",
@@ -153,9 +154,9 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		availableStates: { default: () => [] }
 	},
 	emits: ["setSidePanelMode", "closeSidePanel"],
-	setup(o, { emit: s }) {
-		let c = o, l = s, u = useSlots(), f = computed(() => c.sidePanelModeResolved !== "none"), p = computed(() => c.sidePanelModeResolved === "minimized"), m = computed(() => !!u.default), h = computed(() => !!u.controls), g = computed(() => !p.value);
-		return (t, s) => f.value ? (openBlock(), createElementBlock("header", _hoisted_1$2, [createElementVNode("div", { style: normalizeStyle({
+	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);
+		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",
 			minWidth: 0,
@@ -163,7 +164,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			alignItems: "center",
 			justifyContent: p.value && !m.value ? "center" : "flex-start",
 			overflow: "hidden"
-		}) }, [m.value ? renderSlot(t.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [p.value ? (openBlock(), createElementBlock("button", {
+		}) }, [m.value ? renderSlot(n.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [p.value ? (openBlock(), createElementBlock("button", {
 			key: 0,
 			type: "button",
 			class: "text-accent-200 bg-accent/50 hover:bg-accent/90 border-accent hover:text-white hover:border-white",
@@ -183,12 +184,12 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				textTransform: "uppercase"
 			},
 			onClick: s[0] ||= (e) => l("setSidePanelMode", "auto")
-		}, toDisplayString(o.title), 1)) : o.showTitleLabel ? (openBlock(), createElementBlock("h2", _hoisted_2$1, toDisplayString(o.title) + ": ", 1)) : createCommentVNode("", !0)], 64))], 4), h.value || g.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [renderSlot(t.$slots, "controls", {}, () => [g.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), ee.value || h.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [renderSlot(n.$slots, "controls", {}, () => [h.value ? (openBlock(), createBlock(SidePanelButtonGroup_default, {
 			key: 0,
-			"side-panel-mode": o.sidePanelMode,
-			"side-panel-mode-resolved": o.sidePanelModeResolved,
-			"available-states": o.availableStates,
-			"overlay-only": o.overlayOnly,
+			"side-panel-mode": e.sidePanelMode,
+			"side-panel-mode-resolved": e.sidePanelModeResolved,
+			"available-states": e.availableStates,
+			"overlay-only": e.overlayOnly,
 			onSetSidePanelMode: s[1] ||= (e) => l("setSidePanelMode", e),
 			onCloseSidePanel: s[2] ||= (e) => l("closeSidePanel")
 		}, null, 8, [
@@ -246,8 +247,8 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		maxHeight: { default: "30vh" }
 	},
 	emits: ["setSidePanelMode", "closeSidePanel"],
-	setup(e, { emit: n }) {
-		let o = e, c = n, l = computed(() => o.sidePanelModeResolved !== "none"), f = computed(() => o.sidePanelModeResolved === "minimized"), p = computed(() => {
+	setup(e, { emit: t }) {
+		let r = e, s = t, l = computed(() => r.sidePanelModeResolved !== "none"), u = computed(() => r.sidePanelModeResolved === "minimized"), p = computed(() => {
 			let e = {
 				width: "100%",
 				height: "100%",
@@ -255,44 +256,44 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				overflow: "hidden",
 				placeItems: "stretch"
 			};
-			return o.sidePanelModeResolved === "full" || o.sidePanelModeResolved === "right" || o.sidePanelModeResolved === "bottom" ? e : {
+			return r.sidePanelModeResolved === "full" || r.sidePanelModeResolved === "right" || r.sidePanelModeResolved === "bottom" ? e : {
 				...e,
 				placeItems: "end center"
 			};
 		}), m = computed(() => {
-			if (o.sidePanelModeResolved === "full") return {
+			if (r.sidePanelModeResolved === "full") return {
 				width: "100%",
 				height: "100%"
 			};
-			if (o.sidePanelModeResolved === "right") return {
-				minWidth: o.minWidth,
-				maxWidth: o.maxWidth,
+			if (r.sidePanelModeResolved === "right") return {
+				minWidth: r.minWidth,
+				maxWidth: r.maxWidth,
 				width: "100%"
 			};
-			if (o.sidePanelModeResolved === "bottom") return {
-				minHeight: o.minHeight,
-				maxHeight: o.maxHeight,
+			if (r.sidePanelModeResolved === "bottom") return {
+				minHeight: r.minHeight,
+				maxHeight: r.maxHeight,
 				height: "100%",
 				width: "100%"
 			};
-		}), h = computed(() => (o.sidePanelModeResolved === "full" && o.overlayOnly, {
+		}), ee = computed(() => (r.sidePanelModeResolved === "full" && r.overlayOnly, {
 			maxWidth: "100%",
 			maxHeight: "100%",
 			minHeight: 0,
 			minWidth: 0,
 			overflow: "hidden"
-		})), g = computed(() => ({
+		})), h = computed(() => ({
 			display: "grid",
 			gridTemplateColumns: "1fr",
-			gridTemplateRows: f.value ? "1.8rem" : "1.8rem minmax(0, 1fr)"
-		})), ee = computed(() => o.overlayOnly ? "border-neutral-700 bg-black/95" : "");
+			gridTemplateRows: u.value ? "1.8rem" : "1.8rem minmax(0, 1fr)"
+		})), te = 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(ee.value),
+			class: normalizeClass(te.value),
 			style: normalizeStyle([
-				h.value,
+				ee.value,
 				m.value,
-				g.value
+				h.value
 			])
 		}, [createElementVNode("div", _hoisted_2, [createVNode(SidePanelHeader_default, {
 			"show-title-label": e.showTitleLabel,
@@ -300,15 +301,15 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			"side-panel-mode-resolved": e.sidePanelModeResolved,
 			"available-states": e.availableStates,
 			"overlay-only": e.overlayOnly,
-			onSetSidePanelMode: n[0] ||= (e) => c("setSidePanelMode", e),
-			onCloseSidePanel: n[1] ||= (e) => c("closeSidePanel")
+			onSetSidePanelMode: n[0] ||= (e) => s("setSidePanelMode", e),
+			onCloseSidePanel: n[1] ||= (e) => s("closeSidePanel")
 		}, null, 8, [
 			"show-title-label",
 			"side-panel-mode",
 			"side-panel-mode-resolved",
 			"available-states",
 			"overlay-only"
-		])]), withDirectives(createElementVNode("div", _hoisted_3, [renderSlot(t.$slots, "default")], 512), [[vShow, !f.value]])], 6)], 4)])) : createCommentVNode("", !0);
+		])]), withDirectives(createElementVNode("div", _hoisted_3, [renderSlot(t.$slots, "default")], 512), [[vShow, !u.value]])], 6)], 4)])) : createCommentVNode("", !0);
 	}
 }), _hoisted_1 = {
 	id: "header-outer",
@@ -348,36 +349,36 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 		"sidePanelAvailableStates",
 		"defaultSlotResize"
 	],
-	setup(e, { emit: c }) {
-		let u = e, h = c, _ = useSlots(), v = ref(null), y = ref(null), b = ref(null), x = ref(0), S = ref(0), C = ref(0), w = ref(0), T = ref(0);
-		function te() {
-			let e = b.value;
+	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;
 			if (!e) return;
-			let t = Array.from(e.children), n = `${T.value}px`;
+			let t = Array.from(e.children), n = `${C.value}px`;
 			t.forEach((e) => {
 				e.style.height !== n && (e.style.height = n);
 			});
 		}
-		let E = ref("none"), D = ref("none"), O = ref([]), k = ref("none"), A = ref(!0), j = ref(!1), ne = {
+		let w = ref("none"), T = ref("none"), E = ref([]), D = ref("none"), O = ref(!0), k = ref(!1), re = {
 			sm: 640,
 			md: 768,
 			lg: 1024,
 			xl: 1280,
 			"2xl": 1536
-		}, M = computed(() => !!_.sidePanelContent), N = computed(() => !!_.header), P = computed(() => O.value.filter((e) => e !== "auto")), F = computed(() => Math.max(0, S.value - C.value)), I = computed(() => x.value < _e(u.controlsOverlayOnly)), L = computed(() => x.value === 0 ? !1 : F.value / x.value > 1.1), R = computed(() => D.value === "right" && k.value === "wide-right" ? u.sidePanelMaxRightWide : u.sidePanelMaxRight), z = computed(() => ve(u.mainContentAspectRatio, 16 / 9)), re = computed(() => w.value > 0 ? w.value : Math.max(1, x.value)), ie = computed(() => re.value / z.value + 20), ae = computed(() => Math.max(1, x.value) / z.value), oe = computed(() => J(u.sidePanelMinBottom, x.value, S.value)), se = computed(() => {
-			let e = ae.value + oe.value;
-			return F.value >= e;
-		}), ce = computed(() => Math.max(0, F.value - ie.value)), le = computed(() => {
-			if (D.value !== "bottom") return u.sidePanelMinBottom;
-			let e = J(u.sidePanelMinBottom, x.value, S.value), t = Math.min(e, B.value);
+		}, 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);
 			return `${Math.max(0, Math.floor(t))}px`;
-		}), B = computed(() => {
-			let e = J(D.value === "bottom" && k.value === "tall-bottom" ? u.sidePanelMaxBottomTall : u.sidePanelMaxBottom, x.value, S.value);
-			return Math.max(0, Math.min(e, ce.value));
-		}), V = computed(() => D.value === "bottom" ? `${Math.max(0, Math.floor(B.value))}px` : u.sidePanelMaxBottom), ue = computed(() => D.value === "right" || D.value === "bottom" ? {} : D.value === "full" && !I.value ? {
+		}), 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 ? {
 			opacity: 0,
 			pointerEvents: "none"
-		} : {}), H = computed(() => !M.value || I.value || D.value === "none" || D.value === "minimized" || D.value === "right" || D.value === "bottom" ? null : {
+		} : {}), L = computed(() => !A.value || P.value || T.value === "none" || T.value === "minimized" || T.value === "right" || T.value === "bottom" ? null : {
 			position: "absolute",
 			top: 0,
 			right: 0,
@@ -385,16 +386,16 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			left: 0,
 			zIndex: 10,
 			pointerEvents: "none"
-		}), de = computed(() => !M.value || D.value === "none" || D.value === "full" ? { gridTemplate: "1fr / 1fr" } : D.value === "right" ? {
+		}), R = computed(() => !A.value || T.value === "none" || T.value === "full" ? { gridTemplate: "1fr / 1fr" } : T.value === "right" ? {
 			gridTemplateRows: "1fr",
-			gridTemplateColumns: `minmax(0, 1fr) max(${u.sidePanelMinRight}, ${R.value})`
-		} : D.value === "bottom" ? {
-			gridTemplateRows: `minmax(0, 1fr) ${V.value}`,
+			gridTemplateColumns: `minmax(0, 1fr) max(${l.sidePanelMinRight}, ${ae.value})`
+		} : T.value === "bottom" ? {
+			gridTemplateRows: `minmax(0, 1fr) ${I.value}`,
 			gridTemplateColumns: "1fr"
-		} : D.value === "minimized" ? {
+		} : T.value === "minimized" ? {
 			gridTemplateRows: "1fr 34px",
 			gridTemplateColumns: "1fr"
-		} : { gridTemplate: "1fr / 1fr" }), fe = computed(() => {
+		} : { gridTemplate: "1fr / 1fr" }), he = computed(() => {
 			let e = {
 				minWidth: 0,
 				minHeight: 0,
@@ -403,13 +404,13 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				placeSelf: "stretch",
 				zIndex: 20
 			};
-			if (M.value) {
-				if (D.value === "right") return {
+			if (A.value) {
+				if (T.value === "right") return {
 					...e,
 					gridColumn: "2 / 3",
 					gridRow: "1 / 2"
 				};
-				if (D.value === "full") return {
+				if (T.value === "full") return {
 					...e,
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2"
@@ -420,7 +421,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				gridColumn: "1 / 2",
 				gridRow: "2 / 3"
 			};
-		}), pe = computed(() => {
+		}), ge = computed(() => {
 			let e = {
 				position: "fixed",
 				top: 0,
@@ -429,7 +430,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				left: 0,
 				overflow: "hidden"
 			};
-			return N.value ? {
+			return j.value ? {
 				...e,
 				display: "grid",
 				gridTemplateRows: "auto 1fr"
@@ -437,11 +438,11 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				...e,
 				display: "block"
 			};
-		}), me = computed(() => N.value ? {
+		}), _e = computed(() => j.value ? {
 			position: "relative",
 			zIndex: 0,
 			display: "grid",
-			...de.value,
+			...R.value,
 			gridRow: "2 / 3",
 			minWidth: 0,
 			minHeight: 0,
@@ -450,7 +451,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			position: "absolute",
 			zIndex: 0,
 			display: "grid",
-			...de.value,
+			...R.value,
 			minWidth: 0,
 			minHeight: 0,
 			overflow: "hidden",
@@ -458,9 +459,9 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			right: "0",
 			bottom: "0",
 			left: "0"
-		}), he = computed(() => !I.value || A.value), U = null, W, G, K = null, ge = "", q = !1;
-		function _e(e) {
-			let t = ne[e];
+		}), ve = computed(() => !P.value || O.value), z = null, B, V, H = null, U = "", W = !1;
+		function G(e) {
+			let t = re[e];
 			if (t !== void 0) return t;
 			if (e.endsWith("px")) {
 				let t = Number.parseFloat(e);
@@ -469,7 +470,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			let n = Number.parseFloat(e);
 			return Number.isFinite(n) ? n : 0;
 		}
-		function ve(e, t) {
+		function ye(e, t) {
 			if (typeof e == "number") return Number.isFinite(e) && e > 0 ? e : t;
 			let n = String(e).trim();
 			if (n.includes("/")) {
@@ -479,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 J(e, t, n) {
+		function K(e, t, n) {
 			let r = e.trim();
 			if (r.endsWith("px")) {
 				let e = Number.parseFloat(r);
@@ -496,9 +497,9 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			let i = Number.parseFloat(r);
 			return Number.isFinite(i) ? i : 0;
 		}
-		function ye() {
-			let e = Math.max(1, x.value), t = Math.max(1, F.value), n = e / t, r = e / t, i = _e(u.sidePanelBreakpoint), a = se.value;
-			return n < u.autoBottomAspectRatioBreakpoint && a ? (k.value = "tall-bottom", {
+		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", {
 				states: [
 					"auto",
 					"full",
@@ -506,7 +507,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					"minimized"
 				],
 				resolved: "bottom"
-			}) : r > u.autoRightAspectRatioBreakpoint ? (k.value = "wide-right", {
+			}) : r > l.autoRightAspectRatioBreakpoint ? (D.value = "wide-right", {
 				states: [
 					"auto",
 					"full",
@@ -514,7 +515,7 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					"minimized"
 				],
 				resolved: "right"
-			}) : (k.value = "mixed", e >= i ? {
+			}) : (D.value = "mixed", e >= i ? {
 				states: a ? [
 					"auto",
 					"full",
@@ -537,74 +538,74 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 				resolved: "full"
 			});
 		}
-		function be(e, t, n) {
-			e === t || t === "none" || !M.value || h("sidePanelTransition", {
+		function xe(e, t, n) {
+			e === t || t === "none" || !A.value || d("sidePanelTransition", {
 				from: e,
 				to: t,
 				reason: n
 			});
 		}
-		function Y(e = !1) {
+		function q(e = !1) {
 			let t = {
-				availableStates: M.value ? [...P.value] : [],
-				sidePanelMode: M.value ? E.value : "none",
-				sidePanelModeResolved: M.value ? D.value : "none",
-				overlayOnly: I.value
+				availableStates: A.value ? [...M.value] : [],
+				sidePanelMode: A.value ? w.value : "none",
+				sidePanelModeResolved: A.value ? T.value : "none",
+				overlayOnly: P.value
 			};
-			if (!M.value) {
-				if (q) return;
-				q = !0, h("sidePanelAvailableStates", t);
+			if (!A.value) {
+				if (W) return;
+				W = !0, d("sidePanelAvailableStates", t);
 				return;
 			}
-			q = !1;
+			W = !1;
 			let n = JSON.stringify(t);
-			!e && n === ge || (ge = n, h("sidePanelAvailableStates", t));
+			!e && n === U || (U = n, d("sidePanelAvailableStates", t));
 		}
-		function xe(e) {
-			let t = D.value;
-			if (!M.value) {
-				E.value = "none", D.value = "none", O.value = [], Y();
+		function J(e) {
+			let t = T.value;
+			if (!A.value) {
+				w.value = "none", T.value = "none", E.value = [], q();
 				return;
 			}
-			let n = ye();
-			O.value = n.states;
-			let r = E.value === "none" ? "auto" : E.value;
-			r !== "auto" && !O.value.includes(r) ? (E.value = "auto", h("update:sidePanelPosition", "auto")) : E.value = r, D.value = E.value === "auto" ? n.resolved : E.value, be(t, D.value, e), Y(j.value === !1);
+			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);
 		}
-		function X(e, t = !1) {
-			if (W &&= (clearTimeout(W), void 0), t || !j.value) {
-				xe(e);
+		function Y(e, t = !1) {
+			if (B &&= (clearTimeout(B), void 0), t || !k.value) {
+				J(e);
 				return;
 			}
-			W = setTimeout(() => {
-				xe(e);
-			}, u.layoutDebounceMs);
+			B = setTimeout(() => {
+				J(e);
+			}, l.layoutDebounceMs);
 		}
 		function Se(e) {
-			if (!M.value) return;
-			let t = O.value.includes(e) ? e : "auto";
-			t !== E.value && (E.value = t, h("update:sidePanelPosition", t)), X("set-side-panel-mode", !0);
+			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 Ce() {
-			!M.value || !I.value || Se("minimized");
+			!A.value || !P.value || Se("minimized");
 		}
-		function Z() {
-			G &&= (clearTimeout(G), void 0);
+		function X() {
+			V &&= (clearTimeout(V), void 0);
 		}
-		function we() {
-			if (Z(), !I.value || L.value || D.value === "none") {
-				A.value = !0;
+		function Z() {
+			if (X(), !P.value || ie.value || T.value === "none") {
+				O.value = !0;
 				return;
 			}
-			G = setTimeout(() => {
-				A.value = !1;
-			}, u.autoHideTimeout);
+			V = setTimeout(() => {
+				O.value = !1;
+			}, l.autoHideTimeout);
 		}
 		function Q() {
-			A.value = !0, we();
+			O.value = !0, Z();
 		}
-		function Te() {
-			if (!v.value) return;
+		function we() {
+			if (!g.value) return;
 			let e = [
 				"mousemove",
 				"click",
@@ -614,67 +615,67 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			], t = () => {
 				Q();
 			};
-			for (let n of e) v.value.addEventListener(n, t, { passive: !0 });
-			K = () => {
-				if (v.value) for (let n of e) v.value.removeEventListener(n, t);
+			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);
 			};
 		}
 		function $() {
-			x.value = window.innerWidth, S.value = window.innerHeight, X("viewport-resize");
+			y.value = window.innerWidth, b.value = window.innerHeight, Y("viewport-resize");
 		}
-		return watch(() => u.sidePanelPosition, (e) => {
-			if (!M.value) {
-				E.value = "none";
+		return watch(() => l.sidePanelPosition, (e) => {
+			if (!A.value) {
+				w.value = "none";
 				return;
 			}
-			E.value = e, X("prop-sync");
-		}, { immediate: !0 }), watch(M, (e) => {
+			w.value = e, Y("prop-sync");
+		}, { immediate: !0 }), watch(A, (e) => {
 			if (!e) {
-				E.value = "none", D.value = "none", O.value = [], Y();
+				w.value = "none", T.value = "none", E.value = [], q();
 				return;
 			}
-			E.value = u.sidePanelPosition, X("slot-state-change", !0);
+			w.value = l.sidePanelPosition, Y("slot-state-change", !0);
 		}, { immediate: !0 }), watch(() => [
-			I.value,
-			u.autoHideTimeout,
-			D.value
+			P.value,
+			l.autoHideTimeout,
+			T.value
 		], () => {
-			if (D.value === "full") {
-				we();
+			if (T.value === "full") {
+				Z();
 				return;
 			}
 			Q();
-		}), watch(L, (e, t) => {
+		}), watch(ie, (e, t) => {
 			if (e) {
-				A.value = !0, Z();
+				O.value = !0, X();
 				return;
 			}
 			t && Q();
 		}), watch(() => [
-			w.value,
+			S.value,
+			C.value,
 			T.value,
-			D.value,
-			M.value
+			A.value
 		], () => {
-			!M.value || D.value === "none" || h("defaultSlotResize", {
-				width: w.value,
-				height: T.value
+			!A.value || T.value === "none" || d("defaultSlotResize", {
+				width: S.value,
+				height: C.value
 			});
 		}), onMounted(async () => {
-			j.value = !0, $(), window.addEventListener("resize", $), Te(), Q(), await nextTick(), U = new ResizeObserver(() => {
-				C.value = y.value?.offsetHeight ?? 0, w.value = b.value?.offsetWidth ?? 0, T.value = b.value?.offsetHeight ?? 0, te(), X("slot-measure");
-			}), y.value && U.observe(y.value), b.value && (U.observe(b.value), w.value = b.value.offsetWidth, T.value = b.value.offsetHeight), C.value = y.value?.offsetHeight ?? 0, X("mounted", !0);
+			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);
 		}), onBeforeUnmount(() => {
-			window.removeEventListener("resize", $), K?.(), K = null, U?.disconnect(), U = null, Z(), W &&= (clearTimeout(W), void 0);
-		}), (t, c) => (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: v,
+			ref: g,
 			class: "bg-black text-neutral-100",
-			style: normalizeStyle({ ...pe.value })
-		}, [N.value ? withDirectives((openBlock(), createElementBlock("header", {
+			style: normalizeStyle({ ...ge.value })
+		}, [j.value ? withDirectives((openBlock(), createElementBlock("header", {
 			key: 0,
 			ref_key: "headerRef",
-			ref: y,
+			ref: _,
 			class: "",
 			style: {
 				position: "relative",
@@ -683,15 +684,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(u.headerHideWidthThreshold) + ") and (min-height: " + toDisplayString(u.headerHideHeightThreshold) + ") { #header-outer { display: block; } } ", 1)]),
+			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, he.value]]) : createCommentVNode("", !0), createElementVNode("article", {
+		})), createElementVNode("div", _hoisted_1, [renderSlot(t.$slots, "header")])], 512)), [[vShow, ve.value]]) : createCommentVNode("", !0), createElementVNode("article", {
 			class: "",
-			style: normalizeStyle({ ...me.value })
+			style: normalizeStyle({ ..._e.value })
 		}, [
 			createElementVNode("main", {
 				ref_key: "defaultRef",
-				ref: b,
+				ref: v,
 				class: "slot-content-container",
 				style: normalizeStyle({
 					position: "relative",
@@ -705,31 +706,31 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2",
 					zIndex: 0,
-					...ue.value
+					...me.value
 				})
 			}, [renderSlot(t.$slots, "default")], 4),
-			H.value ? (openBlock(), createElementBlock("div", {
+			L.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: "bg-black",
 				style: normalizeStyle({
-					...H.value,
+					...L.value,
 					gridColumn: "1 / 2",
 					gridRow: "1 / 2"
 				})
 			}, null, 4)) : createCommentVNode("", !0),
-			t.$slots.sidePanelContent && D.value !== "none" ? (openBlock(), createElementBlock("div", {
+			t.$slots.sidePanelContent && T.value !== "none" ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: "",
-				style: normalizeStyle(fe.value)
+				style: normalizeStyle(he.value)
 			}, [createVNode(SidePanelFrame_default, {
-				"side-panel-mode": E.value,
-				"side-panel-mode-resolved": D.value,
-				"available-states": P.value,
-				"overlay-only": I.value,
+				"side-panel-mode": w.value,
+				"side-panel-mode-resolved": T.value,
+				"available-states": M.value,
+				"overlay-only": P.value,
 				"min-width": e.sidePanelMinRight,
-				"max-width": R.value,
-				"min-height": le.value,
-				"max-height": V.value,
+				"max-width": ae.value,
+				"min-height": pe.value,
+				"max-height": I.value,
 				onSetSidePanelMode: Se,
 				onCloseSidePanel: Ce
 			}, {
@@ -747,5 +748,16 @@ var _hoisted_1$4 = ["disabled"], SidePanelControlButton_default = /* @__PURE__ *
 			])], 4)) : createCommentVNode("", !0)
 		], 4)], 4));
 	}
-}), [["__scopeId", "data-v-1dc710d8"]]);
-export { SidePanelControlButton_default as a, SidePanelButtonGroup_default as i, SidePanelFrame_default as n, SidePanelHeader_default as r, LiveFrame_default as t };
+}), [["__scopeId", "data-v-1dc710d8"]]), LoggedInOut_default = /* @__PURE__ */ defineComponent({
+	__name: "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 });
+	}
+});
+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

@@ -0,0 +1,24 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        loggedIn?(_: {}): any;
+        loggedOut?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    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>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=LoggedInOut.vue.d.ts.map

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

@@ -0,0 +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"}

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

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

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

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

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

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

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

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

package/dist/components/index.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/components.js

@@ -1,2 +1,3 @@
-import { a as SidePanelControlButton_default, i as SidePanelButtonGroup_default, n as SidePanelFrame_default, r as SidePanelHeader_default, t as LiveFrame_default } from "./live-C38-eFWG.js";
-export { LiveFrame_default as LiveFrame, SidePanelButtonGroup_default as SidePanelButtonGroup, SidePanelControlButton_default as SidePanelControlButton, SidePanelFrame_default as SidePanelFrame, SidePanelHeader_default as SidePanelHeader };
+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";
+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.js

@@ -1,17 +1,2 @@
-import { ref } from "vue";
-var loggedIn = ref(!1);
-function useSimpleLoggedIn() {
-	return {
-		loggedIn,
-		setToLoggedIn: () => {
-			loggedIn.value = !0;
-		},
-		setToLoggedOut: () => {
-			loggedIn.value = !1;
-		},
-		toggleLoggedIn: () => {
-			loggedIn.value = !loggedIn.value;
-		}
-	};
-}
+import { t as useSimpleLoggedIn } from "./useSimpleLoggedIn-Bz5zqTrQ.js";
 export { useSimpleLoggedIn };

package/dist/index.js

@@ -1,4 +1,5 @@
-import { a as SidePanelControlButton_default, i as SidePanelButtonGroup_default, n as SidePanelFrame_default, r as SidePanelHeader_default, t as LiveFrame_default } from "./live-C38-eFWG.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-CWlMf-Qv.js";
+import { t as useSimpleLoggedIn } from "./useSimpleLoggedIn-Bz5zqTrQ.js";
 import "./components.js";
-import { useSimpleLoggedIn } from "./composables.js";
-export { LiveFrame_default as LiveFrame, SidePanelButtonGroup_default as SidePanelButtonGroup, SidePanelControlButton_default as SidePanelControlButton, SidePanelFrame_default as SidePanelFrame, SidePanelHeader_default as SidePanelHeader, useSimpleLoggedIn };
+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

@@ -0,0 +1,17 @@
+import { ref } from "vue";
+var loggedIn = ref(!1);
+function useSimpleLoggedIn() {
+	return {
+		loggedIn,
+		setToLoggedIn: () => {
+			loggedIn.value = !0;
+		},
+		setToLoggedOut: () => {
+			loggedIn.value = !1;
+		},
+		toggleLoggedIn: () => {
+			loggedIn.value = !loggedIn.value;
+		}
+	};
+}
+export { useSimpleLoggedIn as t };

package/package.json

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