@mkbabb/glass-ui 4.0.0 → 4.1.0

package/dist/virtual.js

@@ -0,0 +1,225 @@
+import { t as e } from "./useResizeObserver-Bpoi7tRE.js";
+import { computed as t, onMounted as n, onUnmounted as r, ref as i, shallowRef as a, toValue as o, watch as s } from "vue";
+//#region src/composables/virtual/virtualSectionLayout.ts
+function c(e, t) {
+	let n = 0, r = e.map((e) => {
+		let r = Math.max(1, Math.round(t(e))), i = n;
+		return n += r, {
+			item: e,
+			height: r,
+			top: i,
+			bottom: n
+		};
+	}), i = r.slice().sort((e, t) => e.item.id < t.item.id ? -1 : +(e.item.id > t.item.id));
+	return {
+		entries: r,
+		totalHeight: n,
+		byId: i
+	};
+}
+function l(e, t) {
+	if (e.length === 0) return 0;
+	let n = 0, r = e.length - 1;
+	for (; n < r;) {
+		let i = Math.floor((n + r) / 2);
+		e[i].bottom <= t ? n = i + 1 : r = i;
+	}
+	return n;
+}
+function u(e, t) {
+	if (e.length === 0) return 0;
+	let n = 0, r = e.length - 1;
+	for (; n < r;) {
+		let i = Math.ceil((n + r) / 2);
+		e[i].top < t ? n = i : r = i - 1;
+	}
+	return n;
+}
+function d(e, t, n, r, i, a) {
+	if (e.entries.length === 0) return {
+		startIndex: 0,
+		endIndex: -1,
+		topSpacerPx: 0,
+		bottomSpacerPx: 0
+	};
+	let o = Math.max(0, t - r), s = Math.max(0, t + n + i), c = l(e.entries, o), d = u(e.entries, s);
+	return a && (c = Math.min(c, a.startIndex), d = Math.max(d, a.endIndex)), c = Math.max(0, Math.min(c, e.entries.length - 1)), d = Math.max(c, Math.min(d, e.entries.length - 1)), {
+		startIndex: c,
+		endIndex: d,
+		topSpacerPx: e.entries[c]?.top ?? 0,
+		bottomSpacerPx: Math.max(0, e.totalHeight - (e.entries[d]?.bottom ?? 0))
+	};
+}
+function f(e, t) {
+	if (e.entries.length === 0) return null;
+	let n = 0, r = e.entries.length - 1;
+	for (; n < r;) {
+		let i = Math.ceil((n + r) / 2);
+		e.entries[i].top <= t ? n = i : r = i - 1;
+	}
+	return e.entries[n]?.item ?? null;
+}
+function p(e, t) {
+	let n = e.byId, r = 0, i = n.length - 1;
+	for (; r <= i;) {
+		let e = r + i >> 1, a = n[e].item.id;
+		if (a === t) return n[e].top;
+		a < t ? r = e + 1 : i = e - 1;
+	}
+	return null;
+}
+//#endregion
+//#region src/composables/virtual/useVirtualSectionWindow.ts
+var m = /* @__PURE__ */ new Map();
+function h() {
+	m.clear();
+}
+function g(l) {
+	let u = t(() => Array.from(o(l.items))), h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), _ = a({
+		entries: [],
+		totalHeight: 0,
+		byId: []
+	}), v = i({
+		startIndex: 0,
+		endIndex: -1,
+		topSpacerPx: 0,
+		bottomSpacerPx: 0
+	}), y = i(null), b = i(null), x = /* @__PURE__ */ new Map(), S = 0, C = 0, w = 0;
+	function T() {
+		return Math.max(1, l.scrollContainer.value?.clientHeight ?? window.innerHeight ?? 900);
+	}
+	function E() {
+		let e = l.contentEl?.value;
+		if (e) return Math.max(0, -e.getBoundingClientRect().top);
+		let t = l.scrollContainer.value;
+		return t ? t.scrollTop : document.documentElement.scrollTop || document.body.scrollTop || 0;
+	}
+	function D(e) {
+		return h.get(e.id) ?? m.get(e.id) ?? e.estimatedHeight;
+	}
+	function O() {
+		_.value = c(u.value, D);
+	}
+	function k() {
+		let e = T(), t = l.overscanBeforePx ?? e, n = l.overscanAfterPx ?? e * 2, r = E();
+		v.value = d(_.value, r, e, t, n, b.value), y.value = f(_.value, r + e * .2);
+	}
+	function A() {
+		O(), k();
+	}
+	function j() {
+		C ||= requestAnimationFrame(() => {
+			C = 0, A();
+		});
+	}
+	function M() {
+		w && window.clearTimeout(w), w = window.setTimeout(() => {
+			b.value = null, j();
+		}, 320);
+	}
+	function N(e, t) {
+		let n = Math.max(1, Math.round(t));
+		h.get(e) !== n && (h.set(e, n), m.set(e, n), j());
+	}
+	function P(e) {
+		x.delete(e);
+	}
+	function F(e, t) {
+		if (!t) {
+			P(e);
+			return;
+		}
+		if (x.get(e) === t) {
+			N(e, t.offsetHeight);
+			return;
+		}
+		P(e), x.set(e, t), requestAnimationFrame(() => {
+			let t = x.get(e);
+			t && N(e, t.offsetHeight);
+		});
+	}
+	function I(e) {
+		let t = g.get(e);
+		if (t == null) return;
+		let n = l.warmTargetBefore ?? 2, r = l.warmTargetAfter ?? 3;
+		b.value = {
+			startIndex: Math.max(0, t - n),
+			endIndex: Math.min(u.value.length - 1, t + r)
+		}, M(), A();
+	}
+	function L(e) {
+		return p(_.value, e);
+	}
+	function R() {
+		S ||= requestAnimationFrame(() => {
+			S = 0, k();
+		});
+	}
+	let z = null;
+	function B(e) {
+		let t = e ?? window;
+		z !== t && (z && z.removeEventListener("scroll", R), z = t, z.addEventListener("scroll", R, { passive: !0 }), j());
+	}
+	s(u, (e) => {
+		g.clear();
+		for (let t of e) {
+			g.set(t.id, t.index);
+			let e = m.get(t.id);
+			e != null && h.set(t.id, e);
+		}
+		for (let e of [...h.keys()]) g.has(e) || h.delete(e);
+		A();
+	}, { immediate: !0 }), s(l.scrollContainer, (e) => B(e), { immediate: !0 }), e(l.scrollContainer, () => j()), l.contentEl && e(l.contentEl, () => j()), n(() => {
+		j();
+	}), r(() => {
+		S && cancelAnimationFrame(S), C && cancelAnimationFrame(C), w && window.clearTimeout(w), z && z.removeEventListener("scroll", R), x.clear();
+	});
+	let V = t(() => v.value.endIndex < v.value.startIndex ? [] : u.value.slice(v.value.startIndex, v.value.endIndex + 1)), H = t(() => y.value?.id ?? null), U = t(() => y.value?.rootId ?? null);
+	return {
+		visibleItems: V,
+		topSpacerPx: t(() => v.value.topSpacerPx),
+		bottomSpacerPx: t(() => v.value.bottomSpacerPx),
+		measureSection: F,
+		ensureTargetWindow: I,
+		getOffsetFor: L,
+		activeId: H,
+		activeRootId: U,
+		recalculate: A
+	};
+}
+//#endregion
+//#region src/composables/virtual/useWindowedStore.ts
+function _(e) {
+	let t = e?.maxResident ?? 200, n = a([]), r = i(0), o = i(0);
+	function s(e, i = !0) {
+		if (i) n.value = [...e], r.value = 0, o.value++;
+		else {
+			let i = [...n.value, ...e];
+			if (i.length > t) {
+				let e = i.length - t;
+				n.value = i.slice(e), r.value += e;
+			} else n.value = i;
+		}
+	}
+	function c(e, t) {
+		return o.value === t ? (s(e, !1), !0) : !1;
+	}
+	function l(e, i) {
+		let a = [...e, ...n.value];
+		r.value = i, o.value++, a.length > t ? n.value = a.slice(0, t) : n.value = a;
+	}
+	function u() {
+		n.value = [], r.value = 0, o.value++;
+	}
+	return {
+		items: n,
+		windowStart: r,
+		generation: o,
+		set: s,
+		prepend: l,
+		appendIfCurrent: c,
+		clear: u
+	};
+}
+//#endregion
+export { c as buildSectionLayout, h as clearSessionHeightCache, p as findSectionOffset, f as resolveActiveSection, d as resolveSectionWindow, g as useVirtualSectionWindow, _ as useWindowedStore };

package/dist/watercolor-dot.js

@@ -1,69 +1,100 @@
-import { t as e } from "./_plugin-vue_export-helper-CBt_VvXa.js";
-import { n as t, t as n } from "./prng-Cg22zv8g.js";
-import { computed as r, createBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onUnmounted as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toRef as m, useId as h, watch as g, withCtx as _ } from "vue";
+import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { n as t, t as n } from "./prng-B-d9eYX8.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onUnmounted as d, openBlock as f, ref as p, renderSlot as m, resolveDynamicComponent as h, toRef as g, useId as _, watch as v, withCtx as y } from "vue";
 //#region src/components/custom/watercolor-dot/prng.ts
-function v(e, t, n) {
+function b(e, t, n) {
 	let r = [];
 	for (let i = 0; i < 8; i++) r.push(t + e() * (n - t));
 	return r;
 }
-function y(e) {
+function x(e) {
 	return `${e[0]}% ${e[1]}% ${e[2]}% ${e[3]}% / ${e[4]}% ${e[5]}% ${e[6]}% ${e[7]}%`;
 }
 //#endregion
 //#region src/components/custom/watercolor-dot/useWatercolorBlob.ts
-function b(e, r = {}) {
-	let { animate: i = !1, cycleDuration: a = 4e3, range: o = [20, 80], seed: s = "" } = r, c = d(""), u = d(""), f = t(n((typeof e == "function" ? e : () => e.value)() + s)), p = v(f, o[0], o[1]);
-	c.value = y(p), u.value = y(v(f, o[0], o[1]));
+var S = [
+	"scaleX",
+	"scaleY",
+	"skewX",
+	"skewY",
+	"rotate"
+], C = {
+	scaleX: .045,
+	scaleY: .045,
+	skewX: 1.6,
+	skewY: 1.6,
+	rotate: 1.4
+};
+function w(e, r = {}) {
+	let { animate: i = !1, cycleDuration: a = 4e3, range: o = [20, 80], seed: s = "" } = r, c = p(""), l = p(""), u = p("none"), f = t(n((typeof e == "function" ? e : () => e.value)() + s));
+	c.value = x(b(f, o[0], o[1])), l.value = x(b(f, o[0], o[1]));
 	let m = () => {};
-	if (!i) return typeof e != "function" && g(e, (e) => {
+	if (!i) return typeof e != "function" && v(e, (e) => {
 		let r = t(n(e + s));
-		c.value = y(v(r, o[0], o[1])), u.value = y(v(r, o[0], o[1]));
+		c.value = x(b(r, o[0], o[1])), l.value = x(b(r, o[0], o[1]));
 	}), {
 		borderRadius: c,
-		hoverBorderRadius: u,
+		hoverBorderRadius: l,
+		transform: u,
 		nudge: m
 	};
-	let [h, _] = o, b = [...p], x = [];
-	for (let e = 0; e < 8; e++) {
-		let t = .5 + f() * 1.3, n = f();
-		x.push({
-			from: p[e] ?? h,
-			to: h + f() * (_ - h),
-			startTime: -n * a * t,
-			duration: a * t
+	let h = [];
+	for (let e = 0; e < S.length; e++) {
+		let t = C[S[e] ?? "scaleX"], n = .5 + f() * 1.3, r = f();
+		h.push({
+			from: 0,
+			to: -1 + f() * 2,
+			startTime: -r * a * n,
+			duration: a * n,
+			amp: t
 		});
 	}
-	let S = null, C = 0;
-	function w(e) {
-		C = e;
-		for (let t = 0; t < 8; t++) {
-			let n = x[t];
+	let g = null, _ = 0, y = h.map(() => 0);
+	function w() {
+		let e = 1 + y[0] * h[0].amp, t = 1 + y[1] * h[1].amp, n = y[2] * h[2].amp, r = y[3] * h[3].amp, i = y[4] * h[4].amp;
+		return `scale(${e.toFixed(4)}, ${t.toFixed(4)}) skew(${n.toFixed(3)}deg, ${r.toFixed(3)}deg) rotate(${i.toFixed(3)}deg)`;
+	}
+	function T(e) {
+		_ = e;
+		for (let t = 0; t < h.length; t++) {
+			let n = h[t];
 			if (!n) continue;
 			let r = (e - n.startTime) / n.duration;
-			r >= 1 && (n.from = n.to, n.to = h + f() * (_ - h), n.duration = a * (.5 + f() * 1.3), n.startTime = e, r = 0);
+			r >= 1 && (n.from = n.to, n.to = -1 + f() * 2, n.duration = a * (.5 + f() * 1.3), n.startTime = e, r = 0);
 			let i = .5 - .5 * Math.cos(Math.PI * r);
-			b[t] = n.from + i * (n.to - n.from);
+			y[t] = n.from + i * (n.to - n.from);
 		}
-		c.value = y(b), S = requestAnimationFrame(w);
+		u.value = w(), g = requestAnimationFrame(T);
 	}
 	return m = () => {
-		let e = C || performance.now();
-		for (let t = 0; t < 8; t++) {
-			let n = x[t];
-			n && (n.from = b[t] ?? n.from, n.to = h + f() * (_ - h), n.duration = a * (.25 + f() * .25), n.startTime = e);
+		let e = _ || performance.now();
+		for (let t = 0; t < h.length; t++) {
+			let n = h[t];
+			n && (n.from = y[t] ?? n.from, n.to = -1 + f() * 2, n.duration = a * (.25 + f() * .25), n.startTime = e);
 		}
-	}, S = requestAnimationFrame(w), l(() => {
-		S !== null && (cancelAnimationFrame(S), S = null);
+	}, g = requestAnimationFrame(T), d(() => {
+		g !== null && (cancelAnimationFrame(g), g = null);
 	}), {
 		borderRadius: c,
-		hoverBorderRadius: u,
+		hoverBorderRadius: l,
+		transform: u,
 		nudge: m
 	};
 }
 //#endregion
-//#region src/components/custom/watercolor-dot/WatercolorDot.vue
-var x = /* @__PURE__ */ e(/* @__PURE__ */ o({
+//#region src/components/custom/watercolor-dot/WatercolorDot.vue?vue&type=script&setup=true&lang.ts
+var T = {
+	class: "watercolor-filter-host",
+	"aria-hidden": "true",
+	focusable: "false"
+}, E = ["seed"], D = {
+	key: 0,
+	class: "watercolor-ghost-overlay",
+	"aria-hidden": "true",
+	focusable: "false",
+	preserveAspectRatio: "none",
+	viewBox: "0 0 100 100"
+}, O = /* @__PURE__ */ e(/* @__PURE__ */ c({
 	__name: "WatercolorDot",
 	props: {
 		color: {},
@@ -78,54 +109,66 @@ var x = /* @__PURE__ */ e(/* @__PURE__ */ o({
 		seed: { default: "" }
 	},
 	setup(e) {
-		let t = e, n = `watercolor-filter-${h().replace(/[^a-zA-Z0-9_-]/g, "")}`, o = r(() => `url(#${n})`), l = m(t, "color"), g = d(!1), v = b(l, {
+		let t = e, c = `watercolor-filter-${_().replace(/[^a-zA-Z0-9_-]/g, "")}`, d = r(() => `url(#${c})`), v = r(() => n(t.color + t.seed) % 256), b = g(t, "color"), x = p(!1), S = w(b, {
 			animate: t.animate,
 			cycleDuration: t.cycleDuration,
 			range: t.range,
 			seed: t.seed
 		});
-		function y() {
-			g.value = !0, t.animate && v.nudge();
+		function C() {
+			x.value = !0, t.animate && S.nudge();
 		}
-		let x = r(() => t.animate ? v.borderRadius.value : g.value ? v.hoverBorderRadius.value : v.borderRadius.value);
-		return (t, r) => (u(), i(p(e.tag), {
-			class: s(["watercolor-swatch", e.animate && "watercolor-animated"]),
+		let O = r(() => t.animate ? S.borderRadius.value : x.value ? S.hoverBorderRadius.value : S.borderRadius.value), k = r(() => t.animate ? S.transform.value : "none");
+		return (t, n) => (f(), i(h(e.tag), {
+			class: l(["watercolor-swatch", e.animate && "watercolor-animated"]),
 			"data-testid": "watercolor-swatch",
 			"data-variant": e.variant,
-			style: c({
+			style: u({
 				backgroundColor: e.variant === "ghost" ? void 0 : e.color,
-				borderRadius: x.value,
+				borderRadius: O.value,
 				"--watercolor-color": e.color,
-				"--watercolor-filter": o.value
+				"--watercolor-filter": d.value,
+				"--watercolor-wobble": k.value
 			}),
-			onMouseenter: y,
-			onMouseleave: r[0] ||= (e) => g.value = !1
+			onMouseenter: C,
+			onMouseleave: n[0] ||= (e) => x.value = !1
 		}, {
-			default: _(() => [a("svg", {
-				class: "watercolor-filter-host",
-				"aria-hidden": "true",
-				focusable: "false"
-			}, [a("defs", null, [a("filter", {
-				id: n,
-				x: "-15%",
-				y: "-15%",
-				width: "130%",
-				height: "130%",
-				"color-interpolation-filters": "linearRGB"
-			}, [...r[1] ||= [a("feTurbulence", {
-				type: "fractalNoise",
-				baseFrequency: "0.05",
-				numOctaves: "6",
-				seed: "2",
-				stitchTiles: "stitch",
-				result: "noise"
-			}, null, -1), a("feDisplacementMap", {
-				in: "SourceGraphic",
-				in2: "noise",
-				scale: "1.3",
-				xChannelSelector: "R",
-				yChannelSelector: "G"
-			}, null, -1)]])])]), f(t.$slots, "default", {}, void 0, !0)]),
+			default: y(() => [
+				(f(), o("svg", T, [s("defs", null, [s("filter", {
+					id: c,
+					x: "-15%",
+					y: "-15%",
+					width: "130%",
+					height: "130%",
+					"color-interpolation-filters": "linearRGB"
+				}, [s("feTurbulence", {
+					type: "fractalNoise",
+					baseFrequency: "0.05",
+					numOctaves: "5",
+					seed: v.value,
+					stitchTiles: "stitch",
+					result: "noise"
+				}, null, 8, E), n[1] ||= s("feDisplacementMap", {
+					in: "SourceGraphic",
+					in2: "noise",
+					scale: "1.3",
+					xChannelSelector: "R",
+					yChannelSelector: "G"
+				}, null, -1)])])])),
+				e.variant === "ghost" ? (f(), o("svg", D, [s("ellipse", {
+					class: "watercolor-ghost-stroke",
+					cx: "50",
+					cy: "50",
+					rx: "46",
+					ry: "46",
+					fill: "none",
+					stroke: "var(--watercolor-color)",
+					"stroke-width": "2",
+					"vector-effect": "non-scaling-stroke",
+					style: u({ filter: d.value })
+				}, null, 4)])) : a("", !0),
+				m(t.$slots, "default", {}, void 0, !0)
+			]),
 			_: 3
 		}, 40, [
 			"class",
@@ -133,6 +176,6 @@ var x = /* @__PURE__ */ e(/* @__PURE__ */ o({
 			"style"
 		]));
 	}
-}), [["__scopeId", "data-v-316c227e"]]);
+}), [["__scopeId", "data-v-76317add"]]);
 //#endregion
-export { x as WatercolorDot, n as hashString, t as mulberry32, y as radiiToCSS, v as randomRadii, b as useWatercolorBlob };
+export { O as WatercolorDot, n as hashString, t as mulberry32, x as radiiToCSS, b as randomRadii, w as useWatercolorBlob };