@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/createCanvasLifecycle-DbXRwjU_.js

@@ -0,0 +1,214 @@
+import { n as e } from "./useReducedMotion-vCXA_vyM.js";
+import { watch as t } from "vue";
+//#region src/composables/glass/webgl/backingSize.ts
+function n(e, t) {
+	let n = e.getBoundingClientRect(), r = n.width, i = n.height, a = e.parentElement, o = 0, s = typeof getComputedStyle < "u";
+	for (; (r === 0 || i === 0) && a && o < 3;) {
+		let e = a.getBoundingClientRect();
+		if (r ||= e.width, i ||= e.height, s) {
+			let e = getComputedStyle(a);
+			if (e.contain.includes("size") || e.containerType !== "normal" || e.position !== "static") break;
+		}
+		a = a.parentElement, o++;
+	}
+	let c = {
+		w: Math.max(1, r),
+		h: Math.max(1, i)
+	}, l = Math.max(1, typeof t == "function" ? t(c) : t), u = Math.max(1, Math.round(c.w * l)), d = Math.max(1, Math.round(c.h * l)), f = e.width !== u || e.height !== d;
+	return f && (e.width = u, e.height = d), {
+		w: u,
+		h: d,
+		dpr: l,
+		changed: f
+	};
+}
+//#endregion
+//#region src/composables/glass/webgl/visibility.ts
+function r(e) {
+	let { canvas: t } = e, n = typeof document < "u";
+	function r() {
+		document.hidden ? e.suspend("tab-hidden") : e.resume("tab-hidden");
+	}
+	n && document.addEventListener("visibilitychange", r), n && document.hidden && e.suspend("tab-hidden");
+	let i = null;
+	function a(t) {
+		if (t.skipped) {
+			e.suspend("off-screen");
+			return;
+		}
+		e.resume("off-screen"), e.isArmed() && e.hasHooks() && e.resize(), e.wake();
+	}
+	function o() {
+		let e = t.parentElement;
+		if (!e) return null;
+		if (typeof getComputedStyle > "u") return e;
+		let n = e, r = 0;
+		for (; n && r < 6;) {
+			if (getComputedStyle(n).contentVisibility === "auto") return n;
+			n = n.parentElement, r++;
+		}
+		return e;
+	}
+	function s() {
+		if (i) return;
+		let e = o();
+		e && (i = e, e.addEventListener("contentvisibilityautostatechange", a));
+	}
+	function c() {
+		i?.removeEventListener("contentvisibilityautostatechange", a), i = null;
+	}
+	let l = null, u = !1, d = 0;
+	function f() {
+		u || (u = !0, e.resize(), typeof requestAnimationFrame < "u" && (d = requestAnimationFrame(() => {
+			d = 0, !e.isDisposed() && (e.resize(), d = requestAnimationFrame(() => {
+				d = 0, e.isDisposed() || e.resize();
+			}));
+		})), typeof ResizeObserver < "u" && !l && (l = new ResizeObserver(() => {
+			e.isDisposed() || e.resize();
+		}), l.observe(t)));
+	}
+	let p = null, m = !1;
+	function h() {
+		!e.composeIntersectionPark || p || typeof IntersectionObserver > "u" || (p = new IntersectionObserver((t) => {
+			let n = t[t.length - 1];
+			n && (n.isIntersecting || n.intersectionRatio > 0 ? m && (m = !1, e.resume("off-screen-io"), e.isArmed() && e.hasHooks() && e.resize(), e.wake()) : (m = !0, e.suspend("off-screen-io")));
+		}, {
+			rootMargin: e.intersectionRootMargin ?? "256px",
+			threshold: 0
+		}), p.observe(t));
+	}
+	function g() {
+		p?.disconnect(), p = null;
+	}
+	function _() {
+		s(), h();
+	}
+	let v = !1, y = null, b = 0;
+	function x() {
+		v || (v = !0, y?.disconnect(), y = null, !(e.isDisposed() || typeof t.setAttribute != "function") && t.setAttribute("data-substrate-reveal", ""));
+	}
+	function S() {
+		if (!(!e.revealBloom || v || e.isReducedMotion()) && typeof t.setAttribute == "function") {
+			if (typeof IntersectionObserver > "u") {
+				typeof requestAnimationFrame < "u" ? b = requestAnimationFrame(() => {
+					b = 0, e.isDisposed() || x();
+				}) : x();
+				return;
+			}
+			y = new IntersectionObserver((e) => {
+				let t = e[e.length - 1];
+				t && (t.isIntersecting || t.intersectionRatio > 0) && x();
+			}, { threshold: 0 }), y.observe(t);
+		}
+	}
+	function C() {
+		typeof cancelAnimationFrame < "u" && (d && cancelAnimationFrame(d), b && cancelAnimationFrame(b)), d = 0, b = 0, n && document.removeEventListener("visibilitychange", r), c(), g(), y?.disconnect(), y = null, l?.disconnect(), l = null;
+	}
+	return {
+		presize: f,
+		bindPark: _,
+		armRevealBloom: S,
+		dispose: C
+	};
+}
+var i = 2e3;
+function a(a) {
+	let { canvas: o, buildContext: s } = a, c = a.respectReducedMotion ?? a.mode !== "capture", l = a.dprPolicy, u = a.composeIntersectionPark ?? !1;
+	function d() {
+		if (l !== void 0) {
+			let e = n(o, l);
+			a.resize(e);
+		} else a.resize();
+	}
+	let f = d, p = /* @__PURE__ */ new Set();
+	a.mode === "capture" && p.add("manual");
+	let m = () => p.size === 0, h = 0, g = typeof performance < "u" ? performance.now() : 0, _ = null, v = !1, y = !1, b = c ? e() : null, x = b?.value ?? !1;
+	function S() {
+		if (!m() || !_) return;
+		let e = (performance.now() - g) / 1e3, t = _.time ? _.time(e) : e;
+		_.frame(t), h = !x && _.shouldContinue() ? requestAnimationFrame(S) : 0;
+	}
+	function C() {
+		!v || !m() || h || !_ || (x ? S() : h = requestAnimationFrame(S));
+	}
+	function w(e) {
+		e !== x && (x = e, e ? (cancelAnimationFrame(h), h = 0, v && m() && _ && S()) : (g = performance.now(), v && m() && _?.shouldContinue() && C()));
+	}
+	let T = b ? t(b, w, { flush: "sync" }) : () => {};
+	function E(e = "manual") {
+		let t = m();
+		p.add(e), t && !m() && (cancelAnimationFrame(h), h = 0);
+	}
+	function D(e = "manual") {
+		let t = !m();
+		p.delete(e), t && m() && v && _ && (g = performance.now() - 1e3, f(), S());
+	}
+	let O = r({
+		canvas: o,
+		suspend: E,
+		resume: D,
+		resize: f,
+		wake: C,
+		isArmed: () => v,
+		hasHooks: () => _ !== null,
+		isDisposed: () => y,
+		isReducedMotion: () => x,
+		composeIntersectionPark: u,
+		intersectionRootMargin: a.intersectionRootMargin,
+		revealBloom: a.revealBloom ?? !1
+	});
+	function k() {
+		_ = s(), f();
+	}
+	let A = [], j = 0, M = !1, N = () => typeof performance < "u" ? performance.now() : Date.now();
+	function P() {
+		j &&= (clearTimeout(j), 0);
+	}
+	function F() {
+		v || y || (a.bindContextEvents?.(() => {
+			y || M || (P(), j = setTimeout(() => {
+				if (j = 0, !(y || M)) try {
+					k(), a.onContextStateChange?.("restored"), m() && C();
+				} catch (e) {
+					_ = null, a.onContextError?.(e instanceof Error ? e : Error(String(e)));
+				}
+			}, 100));
+		}, () => {
+			_ = null, cancelAnimationFrame(h), h = 0, a.onContextStateChange?.("lost"), P();
+			let e = N();
+			A.push(e), A = A.filter((t) => e - t <= i), A.length <= 1 && (M = !1), A.length > 3 && !M && (M = !0, a.onContextError?.(/* @__PURE__ */ Error("[Canvas] repeated context loss; rendering is parked")));
+		}), O.presize(), k(), O.bindPark(), v = !0, g = performance.now(), O.armRevealBloom(), m() && (x ? S() : h = requestAnimationFrame(S)));
+	}
+	function I(e) {
+		v || F(), _?.frame(e);
+	}
+	function L() {
+		y = !0, cancelAnimationFrame(h), h = 0, P(), T(), O.dispose(), a.unbindContextEvents?.(), _?.teardown?.(), _ = null, p.clear();
+	}
+	return a.mode === "capture" && F(), {
+		arm: F,
+		presize: O.presize,
+		suspend: E,
+		resume: D,
+		wake: C,
+		renderAt: I,
+		dispose: L,
+		get armed() {
+			return v;
+		},
+		get disposed() {
+			return y;
+		},
+		get running() {
+			return m();
+		},
+		get reducedMotion() {
+			return x;
+		},
+		get contextHeld() {
+			return M;
+		}
+	};
+}
+//#endregion
+export { a as t };

package/dist/dark-mode-toggle.d.ts

@@ -0,0 +1 @@
+export * from "./components/dark-mode-toggle";

package/dist/dark-mode-toggle.js

@@ -0,0 +1,43 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./useLiquidPress-BOxuDkKa.js";
+import { i as n } from "./dark-z_P5QwqI.js";
+import { computed as r, createElementBlock as i, createStaticVNode as a, defineComponent as o, mergeProps as s, openBlock as c, ref as l, unref as u, useAttrs as d, watchEffect as f } from "vue";
+//#region src/components/dark-mode-toggle/DarkModeToggle.vue?vue&type=script&setup=true&lang.ts
+var p = ["data-size", "data-press-armed"], m = /* @__PURE__ */ o({
+	inheritAttrs: !1,
+	__name: "DarkModeToggle",
+	props: {
+		size: { default: "md" },
+		disableTransitions: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(o) {
+		let m = o, h = d(), g = l(null), _ = t({
+			el: g,
+			squish: !1
+		}), { isDark: v, toggleDark: y, setDisableTransitions: b } = n(), x = r(() => {
+			let { class: e, type: t, ...n } = h;
+			return {
+				"aria-label": v.value ? "Switch to light mode" : "Switch to dark mode",
+				"aria-pressed": v.value,
+				...n
+			};
+		});
+		return f(() => b(m.disableTransitions)), (t, n) => (c(), i("button", s({
+			ref_key: "button",
+			ref: g,
+			type: "button",
+			class: u(e)("dark-mode-toggle-button", u(h).class),
+			"data-size": m.size,
+			"data-press-armed": u(_).armed.value ? "" : void 0,
+			style: u(_).pressStyle.value
+		}, {
+			...x.value,
+			...u(_).handlers
+		}, { onClick: n[0] ||= (...e) => u(y) && u(y)(...e) }), [...n[1] ||= [a("<svg viewBox=\"0 0 472.39 472.39\" aria-hidden=\"true\"><g class=\"toggle-sun\" data-allow-motion><path d=\"M403.21,167V69.18H305.38L236.2,0,167,69.18H69.18V167L0,236.2l69.18,69.18v97.83H167l69.18,69.18,69.18-69.18h97.83V305.38l69.18-69.18Zm-167,198.17a129,129,0,1,1,129-129A129,129,0,0,1,236.2,365.19Z\"></path></g><g class=\"toggle-circle\" data-allow-motion><circle cx=\"236.2\" cy=\"236.2\" r=\"90\"></circle></g></svg>", 1)]], 16, p));
+	}
+});
+//#endregion
+export { m as DarkModeToggle };

package/dist/dark-z_P5QwqI.js

@@ -0,0 +1,70 @@
+import { nextTick as e, ref as t, watch as n } from "vue";
+import { createGlobalState as r, useDark as i, useToggle as a } from "@vueuse/core";
+//#region src/composables/dark/useGlobalDark.ts
+var o, s = r(() => {
+	let e = i({
+		initialValue: o,
+		disableTransition: !1
+	}), r = a(e), s = t(!1);
+	function c() {
+		s.value && document.documentElement.classList.add("no-transition"), r(), s.value && requestAnimationFrame(() => {
+			document.documentElement.classList.remove("no-transition");
+		});
+	}
+	function l(e) {
+		s.value = e;
+	}
+	let u = /* @__PURE__ */ new Set(), d = !1, f = !1;
+	function p(e) {
+		if (u.size === 0 || (f = e, d)) return;
+		d = !0;
+		let t = () => {
+			d = !1;
+			let e = f;
+			for (let t of [...u]) t(e);
+		};
+		typeof requestAnimationFrame == "function" ? requestAnimationFrame(t) : setTimeout(t, 0);
+	}
+	function m(e) {
+		return u.add(e), () => {
+			u.delete(e);
+		};
+	}
+	return n(e, (e) => {
+		document.documentElement.style.colorScheme = e ? "dark" : "light";
+	}, { immediate: !0 }), n(e, (e) => {
+		p(e);
+	}), {
+		isDark: e,
+		toggleDark: c,
+		disableTransitions: s,
+		setDisableTransitions: l,
+		onFlipSettled: m
+	};
+});
+function c(e) {
+	if (e?.initialValue !== void 0) {
+		if (o === void 0) o = e.initialValue;
+		else if (o !== e.initialValue) throw Error(`[glass-ui] useGlobalDark({ initialValue: "${e.initialValue}" }) conflicts: the singleton was already constructed with initialValue "${o}". The seed is ONE-SHOT — set it on the FIRST useGlobalDark() call only.`);
+	}
+	return s();
+}
+//#endregion
+//#region src/composables/dark/installDarkModeSync.ts
+function l(t) {
+	let { isDark: r } = c();
+	n(r, () => {
+		e(() => {
+			requestAnimationFrame(t);
+		});
+	});
+}
+//#endregion
+//#region src/composables/dark/darkModeSyncScript.ts
+var u = "vueuse-color-scheme", d = "dark";
+function f(e = {}) {
+	let t = e.storageKey ?? "vueuse-color-scheme";
+	return `(function(){try{var m=localStorage.getItem(${JSON.stringify(t)});var d=m==="${d}"||((m===null||m==="auto")&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches);var e=document.documentElement;e.classList.toggle("${d}",d);e.style.colorScheme=d?"dark":"light";}catch(_){}})();`;
+}
+//#endregion
+export { c as i, f as n, l as r, u as t };

package/dist/dark.d.ts

@@ -1,2 +1 @@
-export { useGlobalDark, installDarkModeSync, darkModeSyncScript, DARK_MODE_STORAGE_KEY, } from "./composables/dark";
-export type { UseGlobalDarkOptions, UseGlobalDarkReturn, DarkFlipSettledCallback, DarkModeSyncScriptOptions, } from "./composables/dark";
+export * from "./composables/dark";

package/dist/dark.js

@@ -1,20 +1,2 @@
-import { t as e } from "./useGlobalDark-DjKMEQE2.js";
-import { nextTick as t, watch as n } from "vue";
-//#region src/composables/dark/installDarkModeSync.ts
-function r(r) {
-	let { isDark: i } = e();
-	n(i, () => {
-		t(() => {
-			requestAnimationFrame(r);
-		});
-	});
-}
-//#endregion
-//#region src/composables/dark/darkModeSyncScript.ts
-var i = "vueuse-color-scheme", a = "dark";
-function o(e = {}) {
-	let t = e.storageKey ?? "vueuse-color-scheme";
-	return `(function(){try{var m=localStorage.getItem(${JSON.stringify(t)});var d=m==="${a}"||((m===null||m==="auto")&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches);var e=document.documentElement;e.classList.toggle("${a}",d);e.style.colorScheme=d?"dark":"light";}catch(_){}})();`;
-}
-//#endregion
-export { i as DARK_MODE_STORAGE_KEY, o as darkModeSyncScript, r as installDarkModeSync, e as useGlobalDark };
+import { i as e, n as t, r as n, t as r } from "./dark-z_P5QwqI.js";
+export { r as DARK_MODE_STORAGE_KEY, t as darkModeSyncScript, n as installDarkModeSync, e as useGlobalDark };