@pieai/swimmer-ui-kit 2.11.0 → 2.12.0

package/dist/liquid-presence.js

@@ -1,4 +1,4 @@
-import { _ as e, c as t, d as n, h as r, i, m as a, n as o, t as s } from "./reducedMotion-C7O9ls34.js";
+import { _ as e, g as t, m as n, p as r, r as i, s as a, t as o, u as s } from "./liquidGooeySpring-WwyGKGPL.js";
 import { useEffect as c, useId as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
 import { createPortal as p } from "react-dom";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
@@ -396,19 +396,19 @@ function ue(e, t, n, r) {
 }
 //#endregion
 //#region src/useLiquidPresenceMotion.ts
-function K(t, n, i, o) {
-	let s = d(i);
-	s.current = i;
-	let l = !!i.guideContent, u = d(null), f = d(null), p = d(null), m = d(0), h = d(+(i.idleMotion === "breathe")), g = d(() => {});
+function K(e, i, a, o) {
+	let s = d(a);
+	s.current = a;
+	let l = !!a.guideContent, u = d(null), f = d(null), p = d(null), m = d(0), h = d(+(a.idleMotion === "breathe")), g = d(() => {});
 	c(() => {
-		let i = t.current, o = n.current;
-		if (!i || !o) return;
+		let a = e.current, o = i.current;
+		if (!a || !o) return;
 		let c = {
-			source: i,
+			source: a,
 			overlay: o,
-			body: i.querySelector("[data-presence-body]"),
-			bud: i.querySelector("[data-presence-bud]"),
-			satellites: [...i.querySelectorAll("[data-presence-satellite]")],
+			body: a.querySelector("[data-presence-body]"),
+			bud: a.querySelector("[data-presence-bud]"),
+			satellites: [...a.querySelectorAll("[data-presence-satellite]")],
 			flight: o.querySelector(".game-ui-liquid-presence-flight"),
 			flightBody: o.querySelector("[data-presence-flight-body]"),
 			trail: o.querySelector("[data-presence-trail]"),
@@ -423,8 +423,8 @@ function K(t, n, i, o) {
 			"land",
 			"gather",
 			"return"
-		].includes(d.phase) ? d.point : void 0, x = d?.point ?? O(i.getBoundingClientRect()), E = d?.seatWidth ?? 48, k = d ?? void 0, j = i.getBoundingClientRect(), M = performance.now(), N = null, P = () => {}, F = !0, I = !1, L = !1, R = !0, z = 0, V = m.current, re = performance.now(), U = 0, W = 0, G = null, K = () => {}, q, J = () => {
-			I && r(), I = !1;
+		].includes(d.phase) ? d.point : void 0, x = d?.point ?? O(a.getBoundingClientRect()), E = d?.seatWidth ?? 48, k = d ?? void 0, j = a.getBoundingClientRect(), M = performance.now(), N = null, P = () => {}, F = !0, I = !1, L = !1, R = !0, z = 0, V = m.current, re = performance.now(), U = 0, W = 0, G = null, K = () => {}, q, J = () => {
+			I && n(), I = !1;
 		}, Y = (e) => {
 			if (l) {
 				f.current = l.key, l = null, _ = !!(u.current && u.current.phase !== "still"), k = u.current ?? void 0, v = u.current?.point, x = v ?? x, M = performance.now(), K(), clearTimeout(q), W++, B(c.label, !1);
@@ -521,13 +521,13 @@ function K(t, n, i, o) {
 			"speaking",
 			"working"
 		].includes(s.current.activity ?? "idle"), de = () => s.current.idleMotion === "breathe" && (s.current.activity ?? "idle") === "idle", fe = () => {
-			if (L = !1, s.current.reducedMotion || s.current.activity === "disabled" || document.hidden || !R || !D(i.getBoundingClientRect(), H())) return !1;
-			let t = document.querySelector("dialog:modal");
-			if (t && !t.contains(i)) return !1;
+			if (L = !1, s.current.reducedMotion || s.current.activity === "disabled" || document.hidden || !R || !D(a.getBoundingClientRect(), H())) return !1;
+			let e = document.querySelector("dialog:modal");
+			if (e && !e.contains(a)) return !1;
 			let n = l?.contextElement?.closest("dialog") ?? null;
-			if (l && i.closest("dialog") !== n) return !1;
-			let r = 13184 + (i.getBoundingClientRect().width * 2) ** 2, o = a();
-			return o.maxAnimatedGroups === 0 || r > o.maxFilterArea ? (J(), !1) : !(l || _ || Q()) && de() && !I && o.activeGroups > 0 ? (L = !0, !1) : (I ||= e(r), I);
+			if (l && a.closest("dialog") !== n) return !1;
+			let i = 13184 + (a.getBoundingClientRect().width * 2) ** 2, o = r();
+			return o.maxAnimatedGroups === 0 || i > o.maxFilterArea ? (J(), !1) : !(l || _ || Q()) && de() && !I && o.activeGroups > 0 ? (L = !0, !1) : (I ||= t(i), I);
 		};
 		function pe(e) {
 			if (!F || document.hidden) return;
@@ -616,7 +616,7 @@ function K(t, n, i, o) {
 		}, ye = typeof IntersectionObserver > "u" ? null : new IntersectionObserver((e) => {
 			R = e[0]?.isIntersecting ?? !0, R || (P(), P = () => {}, N !== null && cancelAnimationFrame(N), N = null, J()), $();
 		});
-		ye?.observe(i), document.addEventListener("keydown", ge, !0), document.addEventListener("click", _e), document.addEventListener("visibilitychange", ve), document.addEventListener("close", $, !0), document.addEventListener("toggle", $, !0);
+		ye?.observe(a), document.addEventListener("keydown", ge, !0), document.addEventListener("click", _e), document.addEventListener("visibilitychange", ve), document.addEventListener("close", $, !0), document.addEventListener("toggle", $, !0);
 		let be = le(() => {
 			Z(), $();
 		});
@@ -624,30 +624,30 @@ function K(t, n, i, o) {
 			F = !1, g.current = () => {}, W++, N !== null && cancelAnimationFrame(N), clearTimeout(q), P(), K(), be(), ye?.disconnect(), J(), document.removeEventListener("keydown", ge, !0), document.removeEventListener("click", _e), document.removeEventListener("visibilitychange", ve), document.removeEventListener("close", $, !0), document.removeEventListener("toggle", $, !0);
 		};
 	}, [
-		t,
-		n,
+		e,
+		i,
 		o,
-		i.target?.key,
-		i.reducedMotion,
-		i.size,
-		i.guideSize,
+		a.target?.key,
+		a.reducedMotion,
+		a.size,
+		a.guideSize,
 		l
 	]), c(() => g.current(), [
-		i.activity,
-		i.idleMotion,
-		i.motionSpeed,
-		i.motionIntensity,
-		i.splashes
+		a.activity,
+		a.idleMotion,
+		a.motionSpeed,
+		a.motionIntensity,
+		a.splashes
 	]);
 }
 //#endregion
 //#region src/LiquidPresence.tsx
-function q(e) {
-	let t = s() || e.reducedMotion === !0, r = T(e.size ?? 64, 32, 224), i = `presence-${l().replace(/[^a-zA-Z0-9_-]/g, "")}`, a = d(null), o = d(null), [u, _] = f(null);
+function q(t) {
+	let n = e() || t.reducedMotion === !0, r = T(t.size ?? 64, 32, 224), i = `presence-${l().replace(/[^a-zA-Z0-9_-]/g, "")}`, a = d(null), o = d(null), [u, _] = f(null);
 	c(() => {
-		let t = e.target?.contextElement?.closest("dialog");
-		_(t ?? a.current?.closest("dialog") ?? document.body);
-	}, [e.target?.contextElement]), c(() => {
+		let e = t.target?.contextElement?.closest("dialog");
+		_(e ?? a.current?.closest("dialog") ?? document.body);
+	}, [t.target?.contextElement]), c(() => {
 		let e = a.current, t = o.current;
 		if (!e || !t) return;
 		let n = [
@@ -689,16 +689,16 @@ function q(e) {
 			i.disconnect(), window.removeEventListener("resize", r);
 		};
 	}, [u]), K(a, o, {
-		...e,
+		...t,
 		size: r,
-		reducedMotion: t
+		reducedMotion: n
 	}, u);
 	let v = {
 		width: r,
 		height: r,
-		...e.colorFrom ? { "--liquid-presence-from": e.colorFrom } : {},
-		...e.colorTo ? { "--liquid-presence-to": e.colorTo } : {},
-		...["error", "unknown"].includes(e.activity ?? "") ? {
+		...t.colorFrom ? { "--liquid-presence-from": t.colorFrom } : {},
+		...t.colorTo ? { "--liquid-presence-to": t.colorTo } : {},
+		...["error", "unknown"].includes(t.activity ?? "") ? {
 			"--liquid-presence-from": "var(--game-ui-warning)",
 			"--liquid-presence-to": "var(--game-ui-warning)"
 		} : {}
@@ -721,7 +721,7 @@ function q(e) {
 		filterUnits: "userSpaceOnUse",
 		...t,
 		colorInterpolationFilters: "sRGB",
-		children: /* @__PURE__ */ h(n, {
+		children: /* @__PURE__ */ h(s, {
 			blur: e === "core" ? 5 : 2,
 			contrast: 18,
 			gloss: 3.5,
@@ -732,9 +732,9 @@ function q(e) {
 	})] });
 	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("span", {
 		ref: a,
-		className: `game-ui-liquid-presence ${e.className ?? ""}`,
+		className: `game-ui-liquid-presence ${t.className ?? ""}`,
 		style: v,
-		"data-activity": e.activity ?? "idle",
+		"data-activity": t.activity ?? "idle",
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ g("svg", {
 			viewBox: "0 0 160 160",
@@ -833,37 +833,37 @@ function q(e) {
 				})]
 			}),
 			/* @__PURE__ */ h("div", {
-				className: `game-ui-liquid-presence-label${e.guideContent ? " game-ui-liquid-presence-label--guide" : ""}${e.guideContent && e.guideSize === "expanded" ? " game-ui-liquid-presence-label--expanded" : ""}`,
-				role: e.guideContent ? void 0 : "status",
-				"aria-atomic": !e.guideContent || void 0,
-				onClick: e.guideContent ? (e) => e.stopPropagation() : void 0,
-				onPointerDown: e.guideContent ? (e) => e.stopPropagation() : void 0,
-				onKeyDown: e.guideContent ? (e) => {
+				className: `game-ui-liquid-presence-label${t.guideContent ? " game-ui-liquid-presence-label--guide" : ""}${t.guideContent && t.guideSize === "expanded" ? " game-ui-liquid-presence-label--expanded" : ""}`,
+				role: t.guideContent ? void 0 : "status",
+				"aria-atomic": !t.guideContent || void 0,
+				onClick: t.guideContent ? (e) => e.stopPropagation() : void 0,
+				onPointerDown: t.guideContent ? (e) => e.stopPropagation() : void 0,
+				onKeyDown: t.guideContent ? (e) => {
 					e.stopPropagation(), e.key === "Escape" && e.preventDefault();
 				} : void 0,
 				hidden: !0,
-				children: e.guideContent ?? e.target?.label.slice(0, 240)
+				children: t.guideContent ?? t.target?.label.slice(0, 240)
 			})
 		]
 	}), u)] });
 }
 //#endregion
 //#region src/liquidRevealGeometry.ts
-function J(e, n, r, a = 0, o = 1) {
-	let s = Math.max(44, e), c = Math.max(44, n), l = Math.min(28, (s - 12) / 2, (c - 12) / 2), u = i(6, 6, s - 12, c - 12, [
+function J(e, t, n, r = 0, o = 1) {
+	let s = Math.max(44, e), c = Math.max(44, t), l = Math.min(28, (s - 12) / 2, (c - 12) / 2), u = i(6, 6, s - 12, c - 12, [
 		l,
 		l,
 		l,
 		l
 	], {
-		amplitude: (r ? 8 : 11) * Math.min(1.25, Math.max(.25, Number.isFinite(o) ? o : 1)),
+		amplitude: (n ? 8 : 11) * Math.min(1.25, Math.max(.25, Number.isFinite(o) ? o : 1)),
 		lobes: 3,
 		seed: 17,
-		phase: a
+		phase: r
 	}), d = Math.max(0, l - 2.5);
 	return {
 		outline: u,
-		ribbon: `${u} ${t(8.5, 8.5, s - 17, c - 17, [
+		ribbon: `${u} ${a(8.5, 8.5, s - 17, c - 17, [
 			d,
 			d,
 			d,
@@ -873,29 +873,29 @@ function J(e, n, r, a = 0, o = 1) {
 }
 //#endregion
 //#region src/useLiquidRevealAmbient.ts
-function Y(t, n, i, o, s, l = 1, u = 1) {
+function Y(e, i, a, o, s, l = 1, u = 1) {
 	let f = d(0);
 	return c(() => {
-		let c = t.current;
-		if (!c || !n || !i || !o) {
+		let c = e.current;
+		if (!c || !i || !a || !o) {
 			c && (c.dataset.revealAmbient = "static");
 			return;
 		}
-		let d = !0, p = !0, m = performance.now(), h = () => {}, g = c.querySelector("[data-reveal-outline]"), _ = c.querySelector("[data-reveal-body]"), v = c.querySelector("[data-reveal-ribbon]"), y = (i + 24) * (o + 24), b = (t) => {
+		let d = !0, p = !0, m = performance.now(), h = () => {}, g = c.querySelector("[data-reveal-outline]"), _ = c.querySelector("[data-reveal-body]"), v = c.querySelector("[data-reveal-ribbon]"), y = (a + 24) * (o + 24), b = (e) => {
 			if (!d || !p || document.hidden) return;
-			let n = Math.min(160, Math.max(0, t - m));
-			m = t;
-			let x = document.querySelector("dialog:modal"), S = x && !x.contains(c) || ["drawing", "preparing"].includes(c.dataset.revealMotion ?? ""), C = a();
-			if (S || C.activeGroups > 0 || !e(y)) {
+			let i = Math.min(160, Math.max(0, e - m));
+			m = e;
+			let x = document.querySelector("dialog:modal"), S = x && !x.contains(c) || ["drawing", "preparing"].includes(c.dataset.revealMotion ?? ""), C = r();
+			if (S || C.activeGroups > 0 || !t(y)) {
 				c.dataset.revealAmbient = "paused", h = te(b, 250);
 				return;
 			}
 			try {
-				f.current += n * Math.PI * 2 * u / 1e4;
-				let e = J(i, o, s, f.current, l);
+				f.current += i * Math.PI * 2 * u / 1e4;
+				let e = J(a, o, s, f.current, l);
 				g?.setAttribute("d", e.outline), _?.setAttribute("d", e.outline), v?.setAttribute("d", e.ribbon), c.dataset.revealAmbient = "flowing";
 			} finally {
-				r();
+				n();
 			}
 			h = te(b);
 		}, x = () => {
@@ -907,9 +907,9 @@ function Y(t, n, i, o, s, l = 1, u = 1) {
 			d = !1, h(), S?.disconnect(), document.removeEventListener("visibilitychange", x), c.dataset.revealAmbient = "static";
 		};
 	}, [
-		t,
-		n,
+		e,
 		i,
+		a,
 		o,
 		s,
 		l,
@@ -944,18 +944,18 @@ function Z(e, t, n, r, a, o, s = 1) {
 }
 //#endregion
 //#region src/useLiquidRevealEntrance.ts
-function Q(t, n, i, a, o, s, c, l, f = 1) {
+function Q(e, r, i, a, o, s, c, l, f = 1) {
 	let p = d(null);
 	u(() => {
-		let u = t.current;
+		let u = e.current;
 		if (!u) return;
-		if (!n || s || u.contains(document.activeElement) || window.matchMedia("(forced-colors: active)").matches) {
+		if (!r || s || u.contains(document.activeElement) || window.matchMedia("(forced-colors: active)").matches) {
 			p.current = i, u.dataset.revealMotion = "static";
 			return;
 		}
 		if (p.current === i || (u.dataset.revealMotion = "preparing", !a || !o)) return;
 		let d = !0, m = !1, h = !1, g = 0, _ = 0, v = [], y = () => {
-			v.forEach((e) => e.cancel()), v.length = 0, m && r(), m = !1, u.dataset.revealMotion = h ? "settled" : "static";
+			v.forEach((e) => e.cancel()), v.length = 0, m && n(), m = !1, u.dataset.revealMotion = h ? "settled" : "static";
 		}, b = () => {
 			if (!d) return;
 			if (getComputedStyle(u).visibility === "hidden") {
@@ -966,21 +966,21 @@ function Q(t, n, i, a, o, s, c, l, f = 1) {
 				y();
 				return;
 			}
-			let t = n.current?.getBoundingClientRect(), r = u.getBoundingClientRect(), s = u.querySelector("[data-reveal-body]"), x = u.querySelector("[data-reveal-material]"), S = u.querySelector(".game-ui-liquid-reveal-content");
-			if (p.current = i, u.contains(document.activeElement) || !t || !E(t) || document.hidden || typeof u.animate != "function" || !e((a + 24) * (o + 24))) {
+			let e = r.current?.getBoundingClientRect(), n = u.getBoundingClientRect(), s = u.querySelector("[data-reveal-body]"), x = u.querySelector("[data-reveal-material]"), S = u.querySelector(".game-ui-liquid-reveal-content");
+			if (p.current = i, u.contains(document.activeElement) || !e || !E(e) || document.hidden || typeof u.animate != "function" || !t((a + 24) * (o + 24))) {
 				y();
 				return;
 			}
 			m = !0, h = !0, u.dataset.revealMotion = "drawing";
-			let C = r.width / a || 1, w = r.height / o || 1, T = {
-				x: (t.x + t.width / 2 - r.x) / C,
-				y: (t.y + t.height / 2 - r.y) / w
+			let C = n.width / a || 1, w = n.height / o || 1, T = {
+				x: (e.x + e.width / 2 - n.x) / C,
+				y: (e.y + e.height / 2 - n.y) / w
 			}, D = {
 				x: Math.min(a - 28, Math.max(28, T.x)),
 				y: T.y > o / 2 ? o - 28 : 28
 			}, O = {
-				x: -r.x / C,
-				y: -r.y / w,
+				x: -n.x / C,
+				y: -n.y / w,
 				width: innerWidth / C,
 				height: innerHeight / w
 			};
@@ -1016,7 +1016,7 @@ function Q(t, n, i, a, o, s, c, l, f = 1) {
 					fill: "both"
 				}));
 			} else x && v.push(x.animate([{ opacity: .2 }, { opacity: 1 }], { duration: 180 }));
-			let k = n.current?.querySelector(".game-ui-liquid-presence > svg");
+			let k = r.current?.querySelector(".game-ui-liquid-presence > svg");
 			k && v.push(k.animate([
 				{ transform: "scale(1)" },
 				{
@@ -1043,8 +1043,8 @@ function Q(t, n, i, a, o, s, c, l, f = 1) {
 			d = !1, x(), u.removeEventListener("focusin", x), u.removeEventListener("pointerdown", x, !0), document.removeEventListener("visibilitychange", S), window.removeEventListener("resize", x), window.removeEventListener("scroll", x, !0);
 		};
 	}, [
-		t,
-		n,
+		e,
+		r,
 		i,
 		a,
 		o,
@@ -1056,8 +1056,8 @@ function Q(t, n, i, a, o, s, c, l, f = 1) {
 }
 //#endregion
 //#region src/LiquidReveal.tsx
-function de({ children: e, source: t, revealKey: r = "initial", variant: i = "content", surface: o = "dark", reducedMotion: c, idleMotion: p = "still", colorFrom: m, colorTo: _, motionIntensity: v = 1, motionSpeed: y = 1, className: b = "" }) {
-	let x = s() || c === !0, S = T(v, .25, 1.25), C = T(y, .5, 1.5), w = d(null), [E, D] = f({
+function de({ children: t, source: n, revealKey: i = "initial", variant: a = "content", surface: o = "dark", reducedMotion: c, idleMotion: p = "still", colorFrom: m, colorTo: _, motionIntensity: v = 1, motionSpeed: y = 1, className: b = "" }) {
+	let x = e() || c === !0, S = T(v, .25, 1.25), C = T(y, .5, 1.5), w = d(null), [E, D] = f({
 		width: 0,
 		height: 0
 	}), O = `liquid-reveal-${l().replace(/[^a-zA-Z0-9_-]/g, "")}`;
@@ -1074,8 +1074,8 @@ function de({ children: e, source: t, revealKey: r = "initial", variant: i = "co
 		t();
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, []), Q(w, t, r, E.width, E.height, x, o === "material", i === "input", S);
-	let k = Math.max(44, E.width), A = Math.max(44, E.height), ee = Y(w, !x && p === "breathe", E.width, E.height, i === "input", S, C), j = J(k, A, i === "input", ee.current, S), M = (k + 24) * (A + 24) <= a().maxFilterArea;
+	}, []), Q(w, n, i, E.width, E.height, x, o === "material", a === "input", S);
+	let k = Math.max(44, E.width), A = Math.max(44, E.height), ee = Y(w, !x && p === "breathe", E.width, E.height, a === "input", S, C), j = J(k, A, a === "input", ee.current, S), M = (k + 24) * (A + 24) <= r().maxFilterArea;
 	return /* @__PURE__ */ g("div", {
 		ref: w,
 		className: `game-ui-liquid-reveal ${b}`,
@@ -1083,12 +1083,12 @@ function de({ children: e, source: t, revealKey: r = "initial", variant: i = "co
 			...m ? { "--liquid-presence-from": m } : {},
 			..._ ? { "--liquid-presence-to": _ } : {}
 		},
-		"data-reveal-variant": i,
+		"data-reveal-variant": a,
 		"data-reveal-surface": o,
 		"data-reveal-filter": M ? "volume" : "flat",
 		children: [/* @__PURE__ */ h("div", {
 			className: "game-ui-liquid-reveal-content",
-			children: e
+			children: t
 		}), E.width > 0 && /* @__PURE__ */ g("svg", {
 			className: "game-ui-liquid-reveal-ink",
 			width: k,
@@ -1118,7 +1118,7 @@ function de({ children: e, source: t, revealKey: r = "initial", variant: i = "co
 					height: A + 24,
 					filterUnits: "userSpaceOnUse",
 					colorInterpolationFilters: "sRGB",
-					children: /* @__PURE__ */ h(n, {
+					children: /* @__PURE__ */ h(s, {
 						blur: 1.2,
 						contrast: 18,
 						gloss: 3.5,