@pieai/swimmer-ui-kit 2.14.0 → 3.0.0-rc.1

package/dist/liquid-effects.js

@@ -0,0 +1,1318 @@
+"use client";
+import { a as e, c as t, f as n, n as r, o as i, r as a, s as o } from "./LiquidGroup-BXw1tv9H.js";
+import { l as s, v as c, x as l, y as u } from "./reducedMotion-B8kv-v64.js";
+import { createContext as d, forwardRef as f, useCallback as p, useContext as m, useEffect as h, useId as g, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/liquid-effects/melt/options.ts
+var w = {
+	blur: 7,
+	contrast: 40,
+	reach: .8,
+	fade: 17,
+	warp: 0,
+	mix: 1,
+	mixBlur: 8,
+	gravity: 1.9,
+	waviness: 12
+}, T = {
+	blur: 8,
+	warp: 26,
+	pull: 4,
+	range: 49,
+	zone: 18,
+	mix: .7,
+	gravity: 60,
+	taper: 1,
+	warpFreq: 1.7,
+	flowSpeed: 22,
+	warpStyle: "fractalNoise",
+	detail: 2,
+	active: !0,
+	releaseMs: 110,
+	fadeMs: 110,
+	strength: 1,
+	sink: .8,
+	seamBlur: 12.8
+};
+function E(e, t = 0, n = 1) {
+	return Math.min(n, Math.max(t, e));
+}
+function D(e, t) {
+	return e !== void 0 && Number.isFinite(e) ? e : t;
+}
+function O(e, t, r) {
+	let i = e?.ownerDocument.defaultView;
+	if (!i) return r;
+	let a = n[t], o = /^var\((--[\w-]+)\)$/.exec(a)?.[1];
+	if (!o) return r;
+	let s = Number.parseFloat(i.getComputedStyle(e).getPropertyValue(o));
+	return Number.isFinite(s) ? s : r;
+}
+function k(e, t = {}) {
+	let n = (n, r) => D(t[n], O(e, r, w[n]));
+	return {
+		blur: Math.max(0, n("blur", "meltBlur")),
+		contrast: Math.max(1, n("contrast", "meltContrast")),
+		reach: Math.max(0, n("reach", "meltReach")),
+		fade: Math.max(0, n("fade", "meltFade")),
+		warp: Math.max(0, n("warp", "meltWarp")),
+		mix: E(n("mix", "meltMix")),
+		mixBlur: Math.max(0, n("mixBlur", "meltMixBlur")),
+		gravity: Math.max(0, n("gravity", "meltGravity")),
+		waviness: Math.max(0, n("waviness", "meltWaviness"))
+	};
+}
+function A(e, t) {
+	let n = typeof t == "object" && t ? t : {}, r = (t, r, i) => {
+		let a = n[t];
+		return D(typeof a == "number" ? a : void 0, O(e, r, i));
+	}, i = E(typeof t == "number" ? t : r("strength", "dissolveStrength", T.strength));
+	return {
+		blur: Math.max(0, r("blur", "dissolveBlur", T.blur)),
+		warp: Math.max(0, r("warp", "dissolveWarp", T.warp)),
+		pull: Math.max(0, r("pull", "dissolvePull", T.pull)),
+		range: Math.max(1, r("range", "dissolveRange", T.range)),
+		zone: Math.max(1, r("zone", "dissolveZone", T.zone)),
+		mix: E(r("mix", "dissolveMix", T.mix)),
+		gravity: Math.max(0, r("gravity", "dissolveGravity", T.gravity)),
+		taper: E(r("taper", "dissolveTaper", T.taper)),
+		warpFreq: Math.max(.2, r("warpFreq", "dissolveWarpFreq", T.warpFreq)),
+		flowSpeed: Math.max(0, r("flowSpeed", "dissolveFlowSpeed", T.flowSpeed)),
+		warpStyle: n.warpStyle ?? T.warpStyle,
+		detail: Math.max(1, Math.round(r("detail", "dissolveDetail", T.detail))),
+		active: n.active ?? T.active,
+		releaseMs: Math.max(40, r("releaseMs", "dissolveReleaseMs", T.releaseMs)),
+		fadeMs: Math.max(40, r("fadeMs", "dissolveFadeMs", T.fadeMs)),
+		strength: i,
+		sink: Math.max(.01, r("sink", "dissolveSink", T.sink)),
+		seamBlur: Math.max(0, r("seamBlur", "dissolveSeamBlur", T.seamBlur))
+	};
+}
+//#endregion
+//#region src/liquid-effects/melt/registry.ts
+function j(e) {
+	return e ? e instanceof HTMLImageElement ? e : e.querySelector("img") : null;
+}
+function M(e) {
+	return e && (e.currentSrc || e.src) || null;
+}
+function N(e) {
+	return {
+		maskImage: e.style.getPropertyValue("mask-image"),
+		maskPriority: e.style.getPropertyPriority("mask-image"),
+		webkitMaskImage: e.style.getPropertyValue("-webkit-mask-image"),
+		webkitMaskPriority: e.style.getPropertyPriority("-webkit-mask-image")
+	};
+}
+function P(e) {
+	let t = e.image, n = e.previousMask;
+	!t || !n || (n.maskImage ? t.style.setProperty("mask-image", n.maskImage, n.maskPriority) : t.style.removeProperty("mask-image"), n.webkitMaskImage ? t.style.setProperty("-webkit-mask-image", n.webkitMaskImage, n.webkitMaskPriority) : t.style.removeProperty("-webkit-mask-image"));
+}
+function F() {
+	let e = /* @__PURE__ */ new Set(), t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), r = 0, i = () => n.forEach((e) => e());
+	return {
+		registerMelt(t) {
+			let n = {
+				...t,
+				id: `image-melt-${++r}`,
+				painted: !1,
+				previousOpacity: t.target.style.opacity
+			};
+			return e.add(n), i(), () => {
+				n.target.style.opacity = n.previousOpacity, n.painted = !1, e.delete(n), i();
+			};
+		},
+		registerDissolve(e) {
+			let n = {
+				...e,
+				id: `dissolve-${++r}`,
+				previousMask: e.image ? N(e.image) : null
+			};
+			return t.add(n), i(), {
+				update(e) {
+					let t = j(n.el);
+					t !== n.image && (P(n), n.image = t, n.previousMask = t ? N(t) : null), n.opts = A(n.el, e), i();
+				},
+				unregister() {
+					P(n), t.delete(n), i();
+				}
+			};
+		},
+		subscribe(e) {
+			return n.add(e), () => n.delete(e);
+		},
+		entries: () => [...e],
+		dissolveEntries: () => [...t]
+	};
+}
+function I(e, t, n) {
+	let r = j(t);
+	return r || console.warn("[swimmer-ui] `dissolve` needs an <img> inside the item; text and other DOM content stay unchanged."), e.registerDissolve({
+		el: t,
+		image: r,
+		opts: A(t, n)
+	});
+}
+//#endregion
+//#region src/liquid-effects/melt/types.ts
+var L = {
+	width: 0,
+	height: 0,
+	melt: null,
+	dissolves: []
+};
+//#endregion
+//#region src/liquid-effects/melt/geometry.ts
+function R(e, t = 2) {
+	let n = 10 ** t;
+	return Math.round(e * n) / n;
+}
+function z(e) {
+	let t = E(e);
+	return t * t * (3 - 2 * t);
+}
+function B(e, t) {
+	let n = Math.max(t.x - (e.x + e.w), e.x - (t.x + t.w), 0), r = Math.max(t.y - (e.y + e.h), e.y - (t.y + t.h), 0);
+	return Math.hypot(n, r);
+}
+function V(e, t) {
+	return {
+		x: e.x + e.w < t.x ? (e.x + e.w + t.x) / 2 : t.x + t.w < e.x ? (t.x + t.w + e.x) / 2 : (Math.max(e.x, t.x) + Math.min(e.x + e.w, t.x + t.w)) / 2,
+		y: e.y + e.h < t.y ? (e.y + e.h + t.y) / 2 : t.y + t.h < e.y ? (t.y + t.h + e.y) / 2 : (Math.max(e.y, t.y) + Math.min(e.y + e.h, t.y + t.h)) / 2
+	};
+}
+function H(e, t, n) {
+	let r = e.ownerDocument.defaultView?.getComputedStyle(e).borderTopLeftRadius ?? "";
+	return Math.max(0, Math.min(Number.parseFloat(r) || 0, t / 2, n / 2));
+}
+function U(e) {
+	return e.getBoundingClientRect();
+}
+function W(e, t) {
+	let n = e.getBoundingClientRect();
+	return {
+		x: n.left - t.left,
+		y: n.top - t.top,
+		w: n.width,
+		h: n.height
+	};
+}
+function G(e, t) {
+	let n = W(e, t);
+	return {
+		...n,
+		r: H(e, n.w, n.h)
+	};
+}
+function K(e) {
+	return `${R(e.x)}:${R(e.y)}:${R(e.w)}:${R(e.h)}`;
+}
+function q(e, t, n) {
+	let r = Math.max(1, e.offsetWidth || e.getBoundingClientRect().width), i = Math.max(1, e.offsetHeight || e.getBoundingClientRect().height), a = t ? Math.max(24, t.blur * 3, t.fade * 2, t.warp + t.waviness, t.mixBlur * 2, t.gravity * .5) : 0, o = n ? Math.max(24, n.blur * 3, n.warp + n.zone, n.gravity * .5, n.seamBlur * 3) : 0, s = Math.ceil(Math.max(a, o, 24));
+	return (r + s * 2) * (i + s * 2);
+}
+function J(e) {
+	let t = e[0]?.opts;
+	return t ? e.slice(1).reduce((e, t) => ({
+		...e,
+		blur: Math.max(e.blur, t.opts.blur),
+		warp: Math.max(e.warp, t.opts.warp),
+		zone: Math.max(e.zone, t.opts.zone),
+		gravity: Math.max(e.gravity, t.opts.gravity),
+		seamBlur: Math.max(e.seamBlur, t.opts.seamBlur)
+	}), { ...t }) : null;
+}
+function ee(e, t, n, r, i, a, o, s, c) {
+	let l = Math.atan2(r, n) * 180 / Math.PI, u = Math.max(0, (s - 1) * Math.max(8, 2 * i)), d = Math.min(2.2, (Math.max(0, o) + u) / Math.max(8, 2 * i)) * (.5 + c), f = 1 + d, p = 1 / (1 + d * .35), m = e - n * (i + a), h = t - r * (i + a);
+	return `translate(${R(m)} ${R(h)}) rotate(${R(l)}) scale(${R(f, 3)} ${R(p, 3)}) rotate(${-R(l)}) translate(${R(-m)} ${R(-h)})`;
+}
+function te(e, t, n, r, i, a) {
+	let o = t - e.x, s = n - e.y;
+	if (Math.hypot(Math.max(e.x - t, t - (e.x + e.w), 0), Math.max(e.y - n, n - (e.y + e.h), 0)) > r + 2) return null;
+	let c = Math.min(e.w, e.h) / 2, l = Math.min(Math.max(r, a * .75), c), u = R(Math.max(0, 1 - Math.min(i, a) * 2.2), 2), d = R((1 + 2 * u) / 3, 2), f = Math.max(Math.hypot(o, s), Math.hypot(o - e.w, s), Math.hypot(o, s - e.h), Math.hypot(o - e.w, s - e.h)) + 2;
+	return `radial-gradient(circle at ${R(o)}px ${R(s)}px, rgba(255,255,255,${u}) ${R(l * .2)}px, rgba(255,255,255,${d}) ${R(l * .45)}px, #fff ${R(l * .78)}px, #fff ${R(f)}px)`;
+}
+function ne(e) {
+	if (e < .002) return "0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 1";
+	let t = R(1 + 4 * e, 3);
+	return `0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  ${t} 0 0 0 ${R(1 - t * (.38 + .12 * e), 3)}`;
+}
+function Y(e) {
+	return e.replace(/[^a-zA-Z0-9_-]/g, "");
+}
+//#endregion
+//#region src/liquid-effects/melt/runtime.ts
+var re = class {
+	registry;
+	getGroup;
+	onState;
+	motions = /* @__PURE__ */ new Map();
+	observed = /* @__PURE__ */ new Set();
+	removeListeners = [];
+	resizeObserver = null;
+	mutationObserver = null;
+	awake = !1;
+	raf = 0;
+	disposed = !1;
+	lastNow = 0;
+	lastActivity = 0;
+	lastStateKey = "";
+	meltProximity = 0;
+	meltPairKey = "";
+	claimed = !1;
+	budgetWarningEmitted = !1;
+	constructor(e) {
+		this.registry = e.registry, this.getGroup = e.getGroup, this.onState = e.onState;
+	}
+	invalidate = () => {
+		this.disposed || (this.lastActivity = this.now(), this.ensureObservers(), this.wake());
+	};
+	wake() {
+		this.disposed || this.awake || this.registry.entries().length === 0 && this.registry.dissolveEntries().length === 0 || (this.awake = !0, this.raf = requestAnimationFrame(this.loop));
+	}
+	dispose() {
+		if (!this.disposed) {
+			this.disposed = !0, this.raf && cancelAnimationFrame(this.raf), this.raf = 0, this.awake = !1, this.resizeObserver?.disconnect(), this.mutationObserver?.disconnect(), this.removeListeners.forEach((e) => e()), this.removeListeners.length = 0;
+			for (let e of this.registry.entries()) this.setMeltPainted(e, !1);
+			for (let e of this.registry.dissolveEntries()) P(e);
+			this.releaseClaim(), this.observed.clear();
+		}
+	}
+	now() {
+		return performance.now();
+	}
+	ensureObservers() {
+		let e = this.getGroup();
+		if (!e) return;
+		!this.resizeObserver && typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => this.invalidate()), this.resizeObserver.observe(e));
+		let t = /* @__PURE__ */ new Set(), n = (e) => {
+			e && (t.add(e), this.observed.has(e) || this.resizeObserver?.observe(e));
+		};
+		for (let e of this.registry.entries()) n(e.el), n(e.target), n(j(e.target));
+		for (let e of this.registry.dissolveEntries()) n(e.el), n(e.image);
+		for (let e of this.observed) t.has(e) || this.resizeObserver?.unobserve(e);
+		this.observed.clear(), t.forEach((e) => this.observed.add(e)), !this.mutationObserver && typeof MutationObserver < "u" && (this.mutationObserver = new MutationObserver((e) => {
+			e.some((e) => e.attributeName === "src" || !this.isOwnMutation(e.target)) && this.invalidate();
+		}), this.mutationObserver.observe(e, {
+			attributes: !0,
+			attributeFilter: [
+				"class",
+				"style",
+				"src"
+			],
+			childList: !0,
+			subtree: !0
+		}));
+		let r = e.ownerDocument.defaultView;
+		if (r && this.removeListeners.length === 0) {
+			let t = () => this.invalidate();
+			r.addEventListener("scroll", t, {
+				capture: !0,
+				passive: !0
+			}), this.removeListeners.push(() => r.removeEventListener("scroll", t, !0));
+			for (let n of [
+				"transitionrun",
+				"animationstart",
+				"pointerdown"
+			]) e.addEventListener(n, t, !0), this.removeListeners.push(() => e.removeEventListener(n, t, !0));
+		}
+	}
+	isOwnMutation(e) {
+		return e instanceof Element && !!(e.closest("[data-liquid-gooey-image-melt]") || e instanceof HTMLImageElement && this.registry.dissolveEntries().some((t) => t.image === e) || this.registry.entries().some((t) => t.target === e));
+	}
+	setMeltPainted(e, t) {
+		e.painted !== t && (e.painted = t, e.target.style.opacity = t ? "0" : e.previousOpacity);
+	}
+	releaseClaim() {
+		this.claimed &&= (u(), !1);
+	}
+	ensureClaim(e, t, n) {
+		if (this.claimed) return !0;
+		if (!l(q(e, t, n))) {
+			if (!this.budgetWarningEmitted) {
+				this.budgetWarningEmitted = !0;
+				let e = c(), t = e.activeGroups >= e.maxAnimatedGroups ? "the active-group limit is reached" : "the filter-area limit is exceeded";
+				console.warn(`LiquidGroup: the Melt/dissolve image filter budget is insufficient (${t}); degrading to crisp imagery for this group.`);
+			}
+			return !1;
+		}
+		return this.claimed = !0, !0;
+	}
+	loop = (e) => {
+		if (this.raf = 0, this.disposed) return;
+		let t = this.registry.entries(), n = this.registry.dissolveEntries();
+		if (t.length === 0 && n.length === 0) {
+			this.awake = !1, this.lastNow = 0, this.lastActivity = 0, this.meltPairKey = "", this.meltProximity = 0, this.lastStateKey && (this.lastStateKey = "", this.onState(L)), this.releaseClaim();
+			return;
+		}
+		let r = this.getGroup();
+		if (!r) {
+			this.raf = requestAnimationFrame(this.loop);
+			return;
+		}
+		let i = this.lastNow ? Math.min(.25, Math.max(1 / 240, (e - this.lastNow) / 1e3)) : 1 / 60;
+		this.lastNow = e;
+		let a = U(r), o = /* @__PURE__ */ new Map();
+		for (let e of r.querySelectorAll(".game-ui-liquid-item")) e.closest(".game-ui-liquid-group") === r && o.set(e, W(e, a));
+		let s = t.slice(0, 2), c = s.map((e) => {
+			let t = o.get(e.el) ?? W(e.el, a), n = M(j(e.target));
+			return n && (e.src = n), {
+				...t,
+				r: H(e.target, t.w, t.h)
+			};
+		}), l = s.length === 2 && c.every((e) => e.w > 0 && e.h > 0), u = l ? s[0]?.opts ?? null : null, d = l ? `${s[0]?.id}|${s[1]?.id}` : "";
+		d !== this.meltPairKey && (this.meltPairKey = d, this.meltProximity = 0);
+		let f = l && c[0] && c[1] ? z(1 - B(c[0], c[1]) / Math.max(8, u.blur * 2.6)) : 0;
+		this.meltProximity += (f - this.meltProximity) * (1 - Math.exp(-14 * i)), Math.abs(this.meltProximity - f) < .004 && (this.meltProximity = f);
+		let p = this.computeDissolves(n, o, a, i), m = l, h = p.visuals.length > 0, g = m || h, _ = J(n);
+		if (g && !this.ensureClaim(r, u, _)) {
+			for (let e of t) this.setMeltPainted(e, !1);
+			for (let e of n) P(e);
+			this.onState(L), this.lastStateKey = "", this.awake = !1, this.lastNow = 0;
+			return;
+		}
+		if (m) for (let [e, n] of t.entries()) this.setMeltPainted(n, e < 2);
+		else {
+			for (let e of t) this.setMeltPainted(e, !1);
+			this.releaseClaim();
+		}
+		let v = {
+			width: Math.max(1, Math.round(r.offsetWidth || a.width)),
+			height: Math.max(1, Math.round(r.offsetHeight || a.height)),
+			melt: m && c[0] && c[1] && s[0] && s[1] ? {
+				a: c[0],
+				b: c[1],
+				srcA: s[0].src,
+				srcB: s[1].src,
+				opts: s[0].opts,
+				prox: E(this.meltProximity)
+			} : null,
+			dissolves: p.visuals
+		}, y = this.renderStateKey(v), b = y !== this.lastStateKey;
+		b && (this.lastStateKey = y, this.onState(v), this.lastActivity = e), b || p.pending || e - this.lastActivity < 500 ? (this.awake = !0, this.raf = requestAnimationFrame(this.loop)) : (this.awake = !1, this.lastNow = 0);
+	};
+	renderStateKey(e) {
+		let t = e.melt ? `${e.melt.srcA}|${e.melt.srcB}|${K(e.melt.a)}|${K(e.melt.b)}|${R(e.melt.prox, 3)}` : "", n = e.dissolves.map((e) => `${e.id}|${e.src}|${e.neighborSrc ?? ""}|${K(e.image)}|${R(e.cx)}|${R(e.cy)}|${R(e.d, 2)}|${R(e.opacity, 3)}|${R(e.phase, 3)}|${e.mask ?? ""}`).join(";");
+		return `${e.width}x${e.height}|${t}|${n}`;
+	}
+	computeDissolves(e, t, n, r) {
+		let i = [], a = !1, o = [...t.entries()];
+		for (let s of e) {
+			let e = t.get(s.el), c = s.image;
+			if (!e || !c) {
+				s.image && P(s);
+				continue;
+			}
+			let l = this.motions.get(s.id) ?? {
+				fade: 0,
+				release: null,
+				opacity: 1,
+				phase: 0,
+				previous: null,
+				contact: null,
+				axis: null
+			};
+			this.motions.set(s.id, l);
+			let u = Infinity, d = null, f = null;
+			for (let [t, n] of o) {
+				if (t === s.el) continue;
+				let r = B(e, n);
+				r < u && (u = r, d = n, f = t);
+			}
+			let p = 0, m = 0;
+			if (d && u === 0) {
+				let t = Math.min(e.x + e.w, d.x + d.w) - Math.max(e.x, d.x), n = Math.min(e.y + e.h, d.y + d.h) - Math.max(e.y, d.y), r = Math.max(1, Math.min(e.w, e.h, d.w, d.h));
+				p = Math.max(0, Math.min(t, n)) / r, m = Math.max(0, Math.max(t, n));
+			}
+			let h = 0;
+			if (d && u < s.opts.range && s.opts.active) {
+				let e = z((1 - u / s.opts.range) / .65), t = z((p - s.opts.sink * .2) / Math.max(.01, s.opts.sink * .8));
+				h = e ** 1.25 * s.opts.strength * (1 - t);
+			}
+			if (h >= l.fade) l.fade += (h - l.fade) * Math.min(1, r * 16), l.release = null;
+			else if (h > .02) l.fade += (h - l.fade) * Math.min(1, r * 6), l.release = null;
+			else if (l.fade > .001 || l.release) {
+				l.release ||= {
+					from: l.fade,
+					elapsed: 0
+				}, l.release.elapsed += r * 1e3;
+				let e = Math.max(s.opts.releaseMs, s.opts.fadeMs), t = Math.min(1, l.release.elapsed / e);
+				l.fade = l.release.from * (1 - t) ** 2;
+			} else l.fade = 0;
+			if (l.fade <= .001) {
+				l.fade = 0, P(s);
+				continue;
+			}
+			let g = d ?? l.contact;
+			if (!g) continue;
+			let _ = V(e, g);
+			l.contact = { ...g };
+			let v = z(l.release ? l.release.from * (.55 + .45 * (1 - Math.min(1, l.release.elapsed / Math.max(40, s.opts.fadeMs)))) : l.fade), y = l.release ? Math.min(1, l.release.elapsed / Math.max(40, s.opts.fadeMs)) : 0;
+			l.opacity = l.release ? (1 - y) ** 2 : l.opacity + (1 - l.opacity) * Math.min(1, r * 16);
+			let b = Math.min(Math.min(e.w, e.h) * .9, s.opts.zone * (.7 + .6 * v)), x = l.previous, S = x ? Math.hypot(e.x - x.x, e.y - x.y) / Math.max(.001, r) : 0;
+			l.previous = {
+				x: e.x,
+				y: e.y
+			}, l.phase += Math.min(r, 1 / 24) * s.opts.flowSpeed * .12 * Math.min(1, S / 40);
+			let C = (g.x + g.w / 2 - _.x) / Math.max(.001, Math.hypot(g.x + g.w / 2 - _.x, g.y + g.h / 2 - _.y)), w = (g.y + g.h / 2 - _.y) / Math.max(.001, Math.hypot(g.x + g.w / 2 - _.x, g.y + g.h / 2 - _.y)), T = 1 + Math.min(1.8, u / Math.max(8, 2 * b)), E = G(c, n), D = d && u < Math.max(10, s.opts.blur * 2.5) ? z(1 - u / Math.max(10, s.opts.blur * 2.5)) : l.fade, O = te(E, _.x, _.y, b, l.fade, Math.max(D, m * .75));
+			O ? (c.style.setProperty("mask-image", O), c.style.setProperty("-webkit-mask-image", O)) : P(s);
+			let k = Math.atan2(w, C) * 180 / Math.PI, A = {
+				id: s.id,
+				src: M(c) ?? c.src,
+				neighborSrc: f ? M(j(f)) : null,
+				image: E,
+				cx: _.x,
+				cy: _.y,
+				d: b,
+				opacity: l.opacity,
+				phase: l.phase,
+				structure: v,
+				angle: k,
+				gravityX: C,
+				gravityY: w,
+				elongation: T,
+				mix: s.opts.mix,
+				seamBlur: s.opts.seamBlur,
+				options: s.opts,
+				mask: O
+			};
+			i.push(A), a = a || !!l.release || Math.abs(h - l.fade) > .004 || l.previous === null;
+		}
+		return {
+			visuals: i,
+			pending: a
+		};
+	}
+};
+//#endregion
+//#region src/liquid-effects/melt/MeltPair.tsx
+function ie({ a: e, b: t, srcA: n, srcB: r, opts: i, width: a, height: o, prox: s }) {
+	let c = `lgm-${Y(g())}`, { blur: l, contrast: u, reach: d, fade: f, warp: p, mix: m, mixBlur: h, gravity: _, waviness: v } = i, y = {
+		x: e.x + e.w / 2,
+		y: e.y + e.h / 2
+	}, b = {
+		x: t.x + t.w / 2,
+		y: t.y + t.h / 2
+	}, w = Math.hypot(e.w, e.h) / 2 * d * s, T = Math.hypot(t.w, t.h) / 2 * d * s, E = {
+		x: (y.x + b.x) / 2,
+		y: (y.y + b.y) / 2
+	}, D = b.x - y.x, O = b.y - y.y, k = Math.max(.001, Math.hypot(D, O)), A = -O / k, j = D / k, M = Math.max(0, (e.w + t.w) / 2 - Math.abs(D)), N = Math.max(0, (e.h + t.h) / 2 - Math.abs(O)), P = .5 * (M * Math.abs(A) + N * Math.abs(j)) * s, F = Math.round(Math.atan2(j, A) * 180 / Math.PI), I = Math.round(m * s * 100) / 100, L = Math.round((2 + (l - 2) * s) * 10) / 10, R = Math.round(p * s * 10) / 10, z = Math.round(L * 2.5 * 10) / 10, B = Math.round((.4 + (2 + l * .8) * s) * 10) / 10, V = `translate(${e.x}, ${e.y})`, H = `translate(${t.x}, ${t.y})`;
+	return /* @__PURE__ */ C("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		"data-gooey-imagemelt": "",
+		width: a,
+		height: o,
+		viewBox: `0 0 ${a} ${o}`,
+		style: {
+			position: "absolute",
+			inset: 0,
+			overflow: "visible",
+			pointerEvents: "none"
+		},
+		children: [
+			/* @__PURE__ */ C("defs", { children: [
+				/* @__PURE__ */ S("pattern", {
+					id: `${c}-pa`,
+					patternUnits: "userSpaceOnUse",
+					width: e.w,
+					height: e.h,
+					children: /* @__PURE__ */ S("image", {
+						href: n,
+						width: e.w,
+						height: e.h,
+						preserveAspectRatio: "xMidYMid slice"
+					})
+				}),
+				/* @__PURE__ */ S("pattern", {
+					id: `${c}-pb`,
+					patternUnits: "userSpaceOnUse",
+					width: t.w,
+					height: t.h,
+					children: /* @__PURE__ */ S("image", {
+						href: r,
+						width: t.w,
+						height: t.h,
+						preserveAspectRatio: "xMidYMid slice"
+					})
+				}),
+				/* @__PURE__ */ C("filter", {
+					id: `${c}-goo`,
+					x: "-15%",
+					y: "-15%",
+					width: "130%",
+					height: "130%",
+					colorInterpolationFilters: "sRGB",
+					children: [
+						/* @__PURE__ */ S("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: L,
+							result: "b"
+						}),
+						/* @__PURE__ */ S("feColorMatrix", {
+							in: "b",
+							type: "matrix",
+							values: `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${u} ${Math.round((.5 - 5 / 12 * u) * 100) / 100}`,
+							result: "goo"
+						}),
+						/* @__PURE__ */ S("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: z,
+							result: "bc"
+						}),
+						/* @__PURE__ */ S("feComposite", {
+							in: "bc",
+							in2: "goo",
+							operator: "in",
+							result: "mix"
+						}),
+						/* @__PURE__ */ S("feTurbulence", {
+							type: "fractalNoise",
+							baseFrequency: (2 + v * 1.2) / 1e3,
+							numOctaves: "2",
+							seed: "4",
+							result: "wn"
+						}),
+						/* @__PURE__ */ S("feDisplacementMap", {
+							in: "mix",
+							in2: "wn",
+							scale: R,
+							xChannelSelector: "R",
+							yChannelSelector: "G",
+							result: "warped"
+						}),
+						/* @__PURE__ */ S("feComposite", {
+							in: "warped",
+							in2: "warped",
+							operator: "over",
+							result: "s1"
+						}),
+						/* @__PURE__ */ S("feComposite", {
+							in: "s1",
+							in2: "s1",
+							operator: "over",
+							result: "s2"
+						}),
+						/* @__PURE__ */ S("feComposite", {
+							in: "s2",
+							in2: "s2",
+							operator: "over",
+							result: "solid"
+						}),
+						/* @__PURE__ */ S("feGaussianBlur", {
+							in: "solid",
+							stdDeviation: "0.6"
+						})
+					]
+				}),
+				/* @__PURE__ */ S("filter", {
+					id: `${c}-soft`,
+					x: "-60%",
+					y: "-60%",
+					width: "220%",
+					height: "220%",
+					children: /* @__PURE__ */ S("feGaussianBlur", { stdDeviation: f })
+				}),
+				I > .01 ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ C("filter", {
+					id: `${c}-marble`,
+					x: "-25%",
+					y: "-25%",
+					width: "150%",
+					height: "150%",
+					colorInterpolationFilters: "sRGB",
+					children: [
+						/* @__PURE__ */ S("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: h,
+							result: "c"
+						}),
+						/* @__PURE__ */ S("feTurbulence", {
+							type: "fractalNoise",
+							baseFrequency: "0.011",
+							numOctaves: "2",
+							seed: "5",
+							result: "n1"
+						}),
+						/* @__PURE__ */ S("feDisplacementMap", {
+							in: "c",
+							in2: "n1",
+							scale: I * 90,
+							xChannelSelector: "R",
+							yChannelSelector: "G",
+							result: "d1"
+						}),
+						/* @__PURE__ */ S("feTurbulence", {
+							type: "fractalNoise",
+							baseFrequency: "0.019",
+							numOctaves: "2",
+							seed: "11",
+							result: "n2"
+						}),
+						/* @__PURE__ */ S("feDisplacementMap", {
+							in: "d1",
+							in2: "n2",
+							scale: I * 50,
+							xChannelSelector: "R",
+							yChannelSelector: "G",
+							result: "d2"
+						}),
+						/* @__PURE__ */ S("feComposite", {
+							in: "d2",
+							in2: "d2",
+							operator: "over",
+							result: "m1"
+						}),
+						/* @__PURE__ */ S("feComposite", {
+							in: "m1",
+							in2: "m1",
+							operator: "over",
+							result: "m2"
+						}),
+						/* @__PURE__ */ S("feGaussianBlur", {
+							in: "m2",
+							stdDeviation: "0.6",
+							result: "marble"
+						}),
+						/* @__PURE__ */ S("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: L,
+							result: "mb"
+						}),
+						/* @__PURE__ */ S("feColorMatrix", {
+							in: "mb",
+							type: "matrix",
+							values: `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${u} ${Math.round((.5 - 5 / 12 * u) * 100) / 100}`,
+							result: "mg"
+						}),
+						/* @__PURE__ */ S("feTurbulence", {
+							type: "fractalNoise",
+							baseFrequency: (2 + v * 1.2) / 1e3,
+							numOctaves: "2",
+							seed: "4",
+							result: "mwn"
+						}),
+						/* @__PURE__ */ S("feDisplacementMap", {
+							in: "mg",
+							in2: "mwn",
+							scale: R,
+							xChannelSelector: "R",
+							yChannelSelector: "G",
+							result: "mshape"
+						}),
+						/* @__PURE__ */ S("feComposite", {
+							in: "marble",
+							in2: "mshape",
+							operator: "in"
+						})
+					]
+				}), /* @__PURE__ */ S("mask", {
+					id: `${c}-marblemask`,
+					maskUnits: "userSpaceOnUse",
+					x: "0",
+					y: "0",
+					width: a,
+					height: o,
+					children: /* @__PURE__ */ S("g", {
+						filter: `url(#${c}-soft)`,
+						children: /* @__PURE__ */ S("ellipse", {
+							cx: E.x,
+							cy: E.y,
+							rx: (w + T) / 2 + P,
+							ry: (w + T) / 2 * _,
+							transform: `rotate(${F}, ${E.x}, ${E.y})`,
+							fill: "#fff"
+						})
+					})
+				})] }) : null,
+				/* @__PURE__ */ S("filter", {
+					id: `${c}-edge`,
+					x: "-40%",
+					y: "-40%",
+					width: "180%",
+					height: "180%",
+					children: /* @__PURE__ */ S("feGaussianBlur", { stdDeviation: B })
+				}),
+				/* @__PURE__ */ C("mask", {
+					id: `${c}-ma`,
+					maskUnits: "userSpaceOnUse",
+					x: "0",
+					y: "0",
+					width: a,
+					height: o,
+					children: [/* @__PURE__ */ S("g", {
+						filter: `url(#${c}-edge)`,
+						children: /* @__PURE__ */ S("g", {
+							transform: V,
+							children: /* @__PURE__ */ S("rect", {
+								width: e.w,
+								height: e.h,
+								rx: e.r,
+								fill: "#fff"
+							})
+						})
+					}), /* @__PURE__ */ S("g", {
+						filter: `url(#${c}-soft)`,
+						children: /* @__PURE__ */ S("ellipse", {
+							cx: E.x,
+							cy: E.y,
+							rx: T + P,
+							ry: T,
+							transform: `rotate(${F}, ${E.x}, ${E.y})`,
+							fill: "#000"
+						})
+					})]
+				}),
+				/* @__PURE__ */ C("mask", {
+					id: `${c}-mb`,
+					maskUnits: "userSpaceOnUse",
+					x: "0",
+					y: "0",
+					width: a,
+					height: o,
+					children: [/* @__PURE__ */ S("g", {
+						filter: `url(#${c}-edge)`,
+						children: /* @__PURE__ */ S("g", {
+							transform: H,
+							children: /* @__PURE__ */ S("rect", {
+								width: t.w,
+								height: t.h,
+								rx: t.r,
+								fill: "#fff"
+							})
+						})
+					}), /* @__PURE__ */ S("g", {
+						filter: `url(#${c}-soft)`,
+						children: /* @__PURE__ */ S("ellipse", {
+							cx: E.x,
+							cy: E.y,
+							rx: w + P,
+							ry: w,
+							transform: `rotate(${F}, ${E.x}, ${E.y})`,
+							fill: "#000"
+						})
+					})]
+				})
+			] }),
+			/* @__PURE__ */ C("g", {
+				filter: `url(#${c}-goo)`,
+				children: [/* @__PURE__ */ S("g", {
+					transform: V,
+					children: /* @__PURE__ */ S("rect", {
+						width: e.w,
+						height: e.h,
+						rx: e.r,
+						fill: `url(#${c}-pa)`
+					})
+				}), /* @__PURE__ */ S("g", {
+					transform: H,
+					children: /* @__PURE__ */ S("rect", {
+						width: t.w,
+						height: t.h,
+						rx: t.r,
+						fill: `url(#${c}-pb)`
+					})
+				})]
+			}),
+			I > .01 ? /* @__PURE__ */ S("g", {
+				mask: `url(#${c}-marblemask)`,
+				children: /* @__PURE__ */ C("g", {
+					filter: `url(#${c}-marble)`,
+					children: [/* @__PURE__ */ S("g", {
+						transform: V,
+						children: /* @__PURE__ */ S("rect", {
+							width: e.w,
+							height: e.h,
+							rx: e.r,
+							fill: `url(#${c}-pa)`
+						})
+					}), /* @__PURE__ */ S("g", {
+						transform: H,
+						children: /* @__PURE__ */ S("rect", {
+							width: t.w,
+							height: t.h,
+							rx: t.r,
+							fill: `url(#${c}-pb)`
+						})
+					})]
+				})
+			}) : null,
+			/* @__PURE__ */ S("g", {
+				mask: `url(#${c}-ma)`,
+				children: /* @__PURE__ */ S("g", {
+					transform: V,
+					children: /* @__PURE__ */ S("rect", {
+						width: e.w,
+						height: e.h,
+						rx: e.r,
+						fill: `url(#${c}-pa)`
+					})
+				})
+			}),
+			/* @__PURE__ */ S("g", {
+				mask: `url(#${c}-mb)`,
+				children: /* @__PURE__ */ S("g", {
+					transform: H,
+					children: /* @__PURE__ */ S("rect", {
+						width: t.w,
+						height: t.h,
+						rx: t.r,
+						fill: `url(#${c}-pb)`
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/liquid-effects/melt/DissolveLayers.tsx
+function ae({ visuals: e }) {
+	let t = `lgd-${Y(g())}`;
+	return /* @__PURE__ */ S(x, { children: e.map((e) => {
+		let n = `${t}-${Y(e.id)}`, r = `${n}-pattern`, i = `${n}-mask`, a = n + "-neighbor", o = e.image, s = e.elongation > 1.001 ? `translate(${R(e.cx)} ${R(e.cy)}) rotate(${R(e.angle)}) scale(${R(e.elongation, 3)} 1) rotate(${-R(e.angle)}) translate(${R(-e.cx)} ${R(-e.cy)})` : void 0, c = e.d * e.elongation + e.options.blur * 2.5 + e.options.warp + e.options.gravity * .5 + 8, l = Math.min(.3, Math.max(.01, e.options.warpFreq / (e.options.zone * 1.1))), u = ee(e.cx, e.cy, e.gravityX, e.gravityY, e.d, e.options.pull * e.structure, e.options.gravity * e.structure, e.elongation, e.options.taper);
+		return /* @__PURE__ */ C("g", {
+			"data-liquid-gooey-dissolve": "",
+			children: [
+				/* @__PURE__ */ C("defs", { children: [
+					/* @__PURE__ */ S("pattern", {
+						id: r,
+						patternUnits: "userSpaceOnUse",
+						x: o.x,
+						y: o.y,
+						width: o.w,
+						height: o.h,
+						children: /* @__PURE__ */ S("image", {
+							href: e.src,
+							width: o.w,
+							height: o.h,
+							preserveAspectRatio: "xMidYMid slice"
+						})
+					}),
+					e.neighborSrc ? /* @__PURE__ */ S("pattern", {
+						id: a,
+						patternUnits: "userSpaceOnUse",
+						x: o.x,
+						y: o.y,
+						width: o.w,
+						height: o.h,
+						children: /* @__PURE__ */ S("image", {
+							href: e.neighborSrc,
+							width: o.w,
+							height: o.h,
+							preserveAspectRatio: "xMidYMid slice"
+						})
+					}) : null,
+					/* @__PURE__ */ C("radialGradient", {
+						id: `${n}-gradient`,
+						children: [
+							/* @__PURE__ */ S("stop", {
+								offset: "0%",
+								stopColor: "#fff"
+							}),
+							/* @__PURE__ */ S("stop", {
+								offset: "55%",
+								stopColor: "#fff"
+							}),
+							/* @__PURE__ */ S("stop", {
+								offset: "78%",
+								stopColor: "#fff",
+								stopOpacity: "0.55"
+							}),
+							/* @__PURE__ */ S("stop", {
+								offset: "100%",
+								stopColor: "#fff",
+								stopOpacity: "0"
+							})
+						]
+					}),
+					/* @__PURE__ */ S("mask", {
+						id: i,
+						maskUnits: "userSpaceOnUse",
+						x: "0",
+						y: "0",
+						width: "100%",
+						height: "100%",
+						children: /* @__PURE__ */ S("circle", {
+							cx: e.cx,
+							cy: e.cy,
+							r: e.d * e.elongation,
+							fill: `url(#${n}-gradient)`,
+							transform: s
+						})
+					}),
+					e.seamBlur > 0 ? /* @__PURE__ */ S("filter", {
+						id: `${n}-seam`,
+						filterUnits: "userSpaceOnUse",
+						x: e.cx - c,
+						y: e.cy - c,
+						width: c * 2,
+						height: c * 2,
+						colorInterpolationFilters: "sRGB",
+						children: /* @__PURE__ */ S("feGaussianBlur", { stdDeviation: e.seamBlur * e.structure })
+					}) : null,
+					[
+						0,
+						1,
+						2
+					].map((t) => {
+						let r = t / 2, i = e.options.blur * (.15 + .85 * r ** 1.4) * e.structure, a = e.options.warp * (.45 + .55 * r) * e.structure, o = e.mix * e.structure * (.15 + .85 * r), s = e.phase * (.7 + .3 * r), u = e.gravityX * Math.sin(s + r * 1.7) * 3 - e.gravityY * Math.cos(s * 1.31 + r) * 1.5, d = e.gravityY * Math.cos(s + r * 1.3) * 2 + e.gravityX * Math.sin(s * 1.17 + r) * 1.1;
+						return /* @__PURE__ */ C("filter", {
+							id: `${n}-filter-${t}`,
+							filterUnits: "userSpaceOnUse",
+							x: e.cx - c,
+							y: e.cy - c,
+							width: c * 2,
+							height: c * 2,
+							colorInterpolationFilters: "sRGB",
+							children: [
+								/* @__PURE__ */ S("feTurbulence", {
+									type: e.options.warpStyle,
+									baseFrequency: `${(l * (t === 0 ? .35 : 1.6)).toFixed(4)} ${(l * (t === 0 ? 1.6 : .35)).toFixed(4)}`,
+									numOctaves: e.options.detail,
+									seed: "17",
+									result: "noise"
+								}),
+								/* @__PURE__ */ S("feDisplacementMap", {
+									in: "SourceGraphic",
+									in2: "noise",
+									scale: a,
+									xChannelSelector: "R",
+									yChannelSelector: "G",
+									result: "warped"
+								}),
+								/* @__PURE__ */ S("feGaussianBlur", {
+									in: "warped",
+									stdDeviation: i,
+									result: "soft"
+								}),
+								/* @__PURE__ */ S("feColorMatrix", {
+									in: "soft",
+									type: "saturate",
+									values: "1.2",
+									result: "col"
+								}),
+								/* @__PURE__ */ S("feTurbulence", {
+									type: e.options.warpStyle,
+									baseFrequency: l.toFixed(4),
+									numOctaves: e.options.detail,
+									seed: "19",
+									result: "erosion-noise"
+								}),
+								/* @__PURE__ */ S("feColorMatrix", {
+									in: "erosion-noise",
+									type: "matrix",
+									values: ne(o),
+									result: "erosion"
+								}),
+								/* @__PURE__ */ S("feComposite", {
+									in: "col",
+									in2: "erosion",
+									operator: "in"
+								}),
+								/* @__PURE__ */ S("feOffset", {
+									dx: u,
+									dy: d
+								})
+							]
+						}, t);
+					})
+				] }),
+				e.seamBlur > 0 ? /* @__PURE__ */ S("g", {
+					mask: `url(#${i})`,
+					opacity: e.opacity * .55,
+					children: /* @__PURE__ */ S("g", {
+						filter: `url(#${n}-seam)`,
+						children: /* @__PURE__ */ S("rect", {
+							x: o.x,
+							y: o.y,
+							width: o.w,
+							height: o.h,
+							rx: o.r,
+							fill: `url(#${r})`
+						})
+					})
+				}) : null,
+				[
+					0,
+					1,
+					2
+				].map((t) => /* @__PURE__ */ S("g", {
+					mask: `url(#${i})`,
+					opacity: e.opacity,
+					children: /* @__PURE__ */ S("g", {
+						filter: `url(#${n}-filter-${t})`,
+						children: /* @__PURE__ */ S("g", {
+							transform: u,
+							children: /* @__PURE__ */ S("rect", {
+								x: o.x,
+								y: o.y,
+								width: o.w,
+								height: o.h,
+								rx: o.r,
+								fill: `url(#${r})`
+							})
+						})
+					})
+				}, t)),
+				e.neighborSrc && e.mix > 0 ? /* @__PURE__ */ S("g", {
+					mask: "url(#" + i + ")",
+					opacity: e.opacity * Math.min(.55, e.mix * .55),
+					children: /* @__PURE__ */ S("g", {
+						filter: "url(#" + n + "-filter-1)",
+						children: /* @__PURE__ */ S("rect", {
+							x: o.x,
+							y: o.y,
+							width: o.w,
+							height: o.h,
+							rx: o.r,
+							fill: "url(#" + a + ")"
+						})
+					})
+				}) : null
+			]
+		}, e.id);
+	}) });
+}
+//#endregion
+//#region src/liquid-effects/melt/ImageMeltLayer.tsx
+function oe({ registry: e, getGroup: t }) {
+	let [n, r] = b(L);
+	return _(() => {
+		let n = new re({
+			registry: e,
+			getGroup: t,
+			onState: r
+		}), i = e.subscribe(n.invalidate);
+		return n.invalidate(), () => {
+			i(), n.dispose();
+		};
+	}, [e]), !n.melt && n.dissolves.length === 0 ? null : /* @__PURE__ */ C("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		"data-liquid-gooey-image-melt": "",
+		width: n.width,
+		height: n.height,
+		viewBox: `0 0 ${n.width} ${n.height}`,
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 1,
+			overflow: "visible",
+			pointerEvents: "none"
+		},
+		children: [n.melt ? /* @__PURE__ */ S(ie, {
+			...n.melt,
+			width: n.width,
+			height: n.height
+		}) : null, n.dissolves.length > 0 ? /* @__PURE__ */ S(ae, { visuals: n.dissolves }) : null]
+	});
+}
+//#endregion
+//#region src/liquid-effects/LiquidEffectsGroup/context.ts
+var X = d(null);
+function Z() {
+	let e = m(X);
+	if (!e) throw Error("LiquidEffectsGroup.Item requires a LiquidEffectsGroup parent.");
+	return e;
+}
+//#endregion
+//#region src/liquid-effects/bend/physics.ts
+function Q(n, r) {
+	return {
+		vertical: e(i(r?.vertical, t(n, "bendVertical", .6))),
+		horizontal: e(i(r?.horizontal, t(n, "bendHorizontal", .35))),
+		velocityVertical: Math.max(0, t(n, "bendVelocityVertical", .05)),
+		velocityHorizontal: Math.max(0, t(n, "bendVelocityHorizontal", .09)),
+		smoothing: Math.max(0, t(n, "bendSmoothing", 9)),
+		activeThreshold: Math.max(0, t(n, "bendActiveThreshold", .5)),
+		verticalCap: Math.max(0, t(n, "bendVerticalCap", .5)),
+		horizontalCap: Math.max(0, t(n, "bendHorizontalCap", .9)),
+		radiusMin: Math.max(0, t(n, "bendRadiusMin", .2)),
+		radiusMax: Math.max(0, t(n, "bendRadiusMax", 3)),
+		leadingCapFactor: Math.max(0, t(n, "bendLeadingCapFactor", .8)),
+		trailingCapFactor: Math.max(0, t(n, "bendTrailingCapFactor", 1.6))
+	};
+}
+function se(e, t, n, r, i, a) {
+	let o = Math.min(Math.max(0, n), e / 2, t / 2), s = Math.round(r * 2 * 10) / 10, c = Math.max(o * a.radiusMin, Math.min(o * a.radiusMax, i > 0 ? o - a.leadingCapFactor * i : o + a.trailingCapFactor * -i)), l = Math.max(o * a.radiusMin, Math.min(o * a.radiusMax, i > 0 ? o + a.trailingCapFactor * i : o - a.leadingCapFactor * -i)), u = .5523, d = (e) => Math.round(e * 10) / 10;
+	return `M ${d(l)} 0 Q ${d(e / 2)} ${d(s)} ${d(e - c)} 0 C ${d(e - c + u * c)} 0 ${d(e)} ${d(o - u * o)} ${d(e)} ${d(o)} L ${d(e)} ${d(t - o)} C ${d(e)} ${d(t - o + u * o)} ${d(e - c + u * c)} ${d(t)} ${d(e - c)} ${d(t)} Q ${d(e / 2)} ${d(t + r * 2)} ${d(l)} ${d(t)} C ${d(l - u * l)} ${d(t)} 0 ${d(t - o + u * o)} 0 ${d(t - o)} L 0 ${d(o)} C 0 ${d(o - u * o)} ${d(l - u * l)} 0 ${d(l)} 0 Z`;
+}
+function ce(e) {
+	return {
+		cx: e.cx,
+		cy: e.cy,
+		previousCx: e.cx,
+		previousCy: e.cy,
+		vcx: 0,
+		vcy: 0,
+		bendY: 0,
+		bendX: 0,
+		initialized: !1
+	};
+}
+function le(e, t) {
+	e.cx = t.cx, e.cy = t.cy, e.previousCx = t.cx, e.previousCy = t.cy, e.vcx = 0, e.vcy = 0, e.bendY = 0, e.bendX = 0, e.initialized = !0;
+}
+function ue(e, t) {
+	return Math.min(e.w, e.h) * t.verticalCap * 2 * t.vertical;
+}
+function de(e, t, n, r, a) {
+	let c = Math.max(1 / 240, i(r, 1 / 60));
+	e.initialized ||= (e.previousCx = t.cx, e.previousCy = t.cy, !0);
+	let l = (t.cx - e.previousCx) / c, u = (t.cy - e.previousCy) / c;
+	e.previousCx = t.cx, e.previousCy = t.cy, e.vcx = e.vcx * .7 + l * .3, e.vcy = e.vcy * .7 + u * .3, e.cx = t.cx, e.cy = t.cy;
+	let d = Math.min(n.w, n.h), f = d * a.verticalCap, p = Math.max(-f, Math.min(f, e.vcy * a.velocityVertical)) * a.vertical, m = d * a.horizontalCap, h = Math.max(-m, Math.min(m, e.vcx * a.velocityHorizontal)) * a.horizontal;
+	e.bendY += (p - e.bendY) * Math.min(1, c * a.smoothing), e.bendX += (h - e.bendX) * Math.min(1, c * a.smoothing);
+	let g = Math.abs(e.bendY) > a.activeThreshold || Math.abs(e.bendX) > a.activeThreshold, _ = Math.min(...n.r), v = g ? se(n.w, n.h, _, e.bendY, e.bendX, a) : s(-n.w / 2, -n.h / 2, n.w, n.h, n.r), y = g ? `translate(${o(e.cx - n.w / 2)} ${o(e.cy - n.h / 2)}) scale(${o(t.scale)})` : `translate(${o(e.cx)} ${o(e.cy)}) scale(${o(t.scale)})`, b = Math.round(e.bendX * 10) / 10, x = Math.round(e.bendY * 10) / 10;
+	return {
+		path: v,
+		transform: y,
+		bendX: b,
+		bendY: x,
+		moving: Math.abs(e.vcx) > 1 || Math.abs(e.vcy) > 1 || Math.abs(e.bendX) > a.activeThreshold * .1 || Math.abs(e.bendY) > a.activeThreshold * .1,
+		fingerprint: `${v}|${y}|${b},${x}`
+	};
+}
+//#endregion
+//#region src/liquid-effects/bend/deformation.ts
+function fe(e) {
+	let t = null, n = null;
+	return {
+		padding: (t, n) => ue(n, Q(t, e)),
+		paint: ({ group: r, host: i, target: a, box: o, dt: s, snap: c }) => {
+			t ??= ce(a), c && le(t, a);
+			let l = de(t, a, o, c ? 0 : s, Q(r, e)), u = Math.round((Number.isFinite(l.bendX) ? l.bendX : 0) * 10) / 10, d = Math.round((Number.isFinite(l.bendY) ? l.bendY : 0) * 10) / 10, f = `${u},${d}`;
+			return n !== f && (i.style.setProperty("--lg-bend-x", `${u}px`), i.style.setProperty("--lg-bend-y", `${d}px`), i.style.setProperty("--lg-bend-xn", String(u)), i.style.setProperty("--lg-bend-yn", String(d)), n = f), l;
+		},
+		reset: (e) => {
+			if (t = null, n !== null) for (let t of [
+				"--lg-bend-x",
+				"--lg-bend-y",
+				"--lg-bend-xn",
+				"--lg-bend-yn"
+			]) e.style.removeProperty(t);
+			n = null;
+		}
+	};
+}
+//#endregion
+//#region src/liquid-effects/melt/ImageMeltItem.tsx
+function pe({ src: e, options: t = {}, registry: n, children: r, forwardedRef: i, className: a, style: o, ...s }) {
+	let c = y(null), l = JSON.stringify(t), u = y(!1), d = (e) => {
+		c.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+	};
+	return _(() => {
+		let r = c.current, i = r?.firstElementChild, a = j(i), o = e ?? M(a);
+		if (!r || !i || !a || !o) {
+			u.current || (u.current = !0, console.warn("[swimmer-ui] effect=\"melt\" needs an image: pass melt={{ src }} or put an <img> inside the item."));
+			return;
+		}
+		return n.registerMelt({
+			el: r,
+			target: a,
+			src: o,
+			opts: k(r, t)
+		});
+	}, [
+		l,
+		n,
+		e
+	]), /* @__PURE__ */ S("div", {
+		...s,
+		ref: d,
+		className: a ? `game-ui-liquid-item ${a}` : "game-ui-liquid-item",
+		style: o,
+		children: r
+	});
+}
+//#endregion
+//#region src/liquid-effects/melt/hostProps.ts
+function me(e) {
+	let t = { ...e };
+	for (let e of [
+		"children",
+		"effect",
+		"melt",
+		"dissolve",
+		"x",
+		"y",
+		"scale",
+		"scaleY",
+		"transition",
+		"delay",
+		"radius",
+		"blob",
+		"morph",
+		"bend",
+		"observe"
+	]) delete t[e];
+	return t;
+}
+//#endregion
+//#region src/liquid-effects/LiquidEffectsGroup/LiquidEffectsItem.tsx
+var he = f(function({ effect: e, bend: t, dissolve: n, melt: r, ...i }, o) {
+	let s = Z(), c = y(null), l = y(null), u = p((e) => {
+		c.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
+	}, [o]), d = t?.horizontal, f = t?.vertical, m = v(() => e === "bend" ? fe({
+		...d === void 0 ? {} : { horizontal: d },
+		...f === void 0 ? {} : { vertical: f }
+	}) : void 0, [
+		e,
+		d,
+		f
+	]), g = JSON.stringify(n ?? null), b = n !== void 0 && n !== !1;
+	return _(() => () => {
+		l.current?.unregister(), l.current = null;
+	}, [s]), _(() => {
+		if (e === "move" || !b) {
+			l.current?.unregister(), l.current = null;
+			return;
+		}
+		c.current && (l.current ? l.current.update(n) : l.current = I(s, c.current, n));
+	}, [
+		g,
+		e,
+		s
+	]), h(() => {
+		let t = e;
+		t === "move" && console.warn("[swimmer-ui] effect=\"move\" is not an item effect. Use <LiquidGroup motion=\"follow\"> for selection and progress."), t === "move" && b && console.warn("[swimmer-ui] dissolve is ignored for effect=\"move\" because Move intentionally lags the measured image rect.");
+	}, [e, b]), /* @__PURE__ */ S(a, {
+		...i,
+		ref: u,
+		...e === "morph" ? { effect: e } : {},
+		...m ? {
+			deformation: m,
+			observe: !0
+		} : {},
+		suppressMorph: b
+	});
+}), $ = f(function(e, t) {
+	let n = Z();
+	if (e.effect !== "melt") return /* @__PURE__ */ S(he, {
+		...e,
+		ref: t
+	});
+	let { src: r, ...i } = e.melt ?? {};
+	return /* @__PURE__ */ S(pe, {
+		...me(e),
+		registry: n,
+		options: i,
+		...r === void 0 ? {} : { src: r },
+		forwardedRef: t,
+		children: e.children
+	});
+}), ge = f(function(e, t) {
+	let n = v(() => F(), []);
+	return /* @__PURE__ */ S(X.Provider, {
+		value: n,
+		children: /* @__PURE__ */ S(r, {
+			...e,
+			ref: t,
+			auxiliary: (e) => /* @__PURE__ */ S(oe, {
+				registry: n,
+				getGroup: e
+			})
+		})
+	});
+}), _e = Object.assign(ge, { Item: $ });
+//#endregion
+export { _e as LiquidEffectsGroup, $ as LiquidEffectsItem };