@pieai/swimmer-ui-kit 2.8.0 → 2.9.0

package/dist/reducedMotion-C7O9ls34.js

@@ -0,0 +1,450 @@
+import { useEffect as e, useState as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/liquidGooeyBudget.ts
+var a = 2, o = 48e4, s = 2, c = o, l = 0;
+function u(e, t) {
+	return Number.isFinite(e) ? Math.max(0, Math.floor(e)) : t;
+}
+function d() {
+	return {
+		maxAnimatedGroups: s,
+		maxFilterArea: c,
+		activeGroups: l
+	};
+}
+function f(e) {
+	if (typeof e == "number") {
+		s = u(e, 0);
+		return;
+	}
+	e.maxAnimatedGroups !== void 0 && (s = u(e.maxAnimatedGroups, 0)), e.maxFilterArea !== void 0 && (c = u(e.maxFilterArea, 0));
+}
+function p(e) {
+	return l >= s || (Number.isFinite(e) ? Math.max(0, e) : Infinity) > c ? !1 : (l += 1, !0);
+}
+function m() {
+	l > 0 && --l;
+}
+//#endregion
+//#region src/liquidGooeyFilter.tsx
+var h = "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -29.5", g = 1.3, _ = 1 / .3902;
+function v(e, t) {
+	return e <= 0 ? t : Math.min(t, _ * e / g);
+}
+var y = {
+	waviness: 0,
+	wavinessFreq: .018
+};
+function b(e) {
+	return e.spread === 0 ? "shape" : "bin";
+}
+function x(e, t) {
+	return t !== null || e.some((e) => e.spread !== 0);
+}
+function S({ index: e, shadow: t }) {
+	let i = [], a = b(t), o = a;
+	return t.spread !== 0 && (i.push(/* @__PURE__ */ r("feMorphology", {
+		in: o,
+		operator: t.spread > 0 ? "erode" : "dilate",
+		radius: Math.abs(t.spread),
+		result: `shadow-${e}-erode`
+	}, "erode")), o = `shadow-${e}-erode`), (t.x !== 0 || t.y !== 0) && (i.push(/* @__PURE__ */ r("feOffset", {
+		in: o,
+		dx: t.x,
+		dy: t.y,
+		result: `shadow-${e}-offset`
+	}, "offset")), o = `shadow-${e}-offset`), t.blur > 0 && (i.push(/* @__PURE__ */ r("feGaussianBlur", {
+		in: o,
+		stdDeviation: t.blur / 2,
+		result: `shadow-${e}-blur`
+	}, "blur")), o = `shadow-${e}-blur`), i.push(/* @__PURE__ */ r("feComposite", {
+		in: a,
+		in2: o,
+		operator: "out",
+		result: `shadow-${e}-band`
+	}, "band"), /* @__PURE__ */ r("feFlood", {
+		floodColor: t.color,
+		result: `shadow-${e}-color`
+	}, "color"), /* @__PURE__ */ r("feComposite", {
+		in: `shadow-${e}-color`,
+		in2: `shadow-${e}-band`,
+		operator: "in",
+		result: `shadow-${e}`
+	}, "fill")), /* @__PURE__ */ r(n, { children: i });
+}
+function C({ index: e, shadow: t }) {
+	let i = [], a = "shape";
+	return t.spread !== 0 && (i.push(/* @__PURE__ */ r("feMorphology", {
+		in: "bin",
+		operator: t.spread > 0 ? "dilate" : "erode",
+		radius: Math.abs(t.spread),
+		result: `shadow-${e}-spread`
+	}, "spread")), a = `shadow-${e}-spread`), t.blur > 0 && (i.push(/* @__PURE__ */ r("feGaussianBlur", {
+		in: a,
+		stdDeviation: t.blur / 2,
+		result: `shadow-${e}-blur`
+	}, "blur")), a = `shadow-${e}-blur`), (t.x !== 0 || t.y !== 0) && (i.push(/* @__PURE__ */ r("feOffset", {
+		in: a,
+		dx: t.x,
+		dy: t.y,
+		result: `shadow-${e}-offset`
+	}, "offset")), a = `shadow-${e}-offset`), i.push(/* @__PURE__ */ r("feFlood", {
+		floodColor: t.color,
+		result: `shadow-${e}-color`
+	}, "color"), /* @__PURE__ */ r("feComposite", {
+		in: `shadow-${e}-color`,
+		in2: a,
+		operator: "in",
+		result: `shadow-${e}`
+	}, "fill")), /* @__PURE__ */ r(n, { children: i });
+}
+function w({ stroke: e }) {
+	let t = [];
+	return t.push(/* @__PURE__ */ r("feMorphology", {
+		in: "bin",
+		operator: "erode",
+		radius: e.width,
+		result: "stroke-erode"
+	}, "erode"), /* @__PURE__ */ r("feComposite", {
+		in: "bin",
+		in2: "stroke-erode",
+		operator: "out",
+		result: "stroke-band"
+	}, "band"), /* @__PURE__ */ r("feFlood", {
+		floodColor: e.color,
+		result: "stroke-color"
+	}, "color"), /* @__PURE__ */ r("feComposite", {
+		in: "stroke-color",
+		in2: "stroke-band",
+		operator: "in",
+		result: "stroke-out"
+	}, "fill")), /* @__PURE__ */ r(n, { children: t });
+}
+function T({ blur: e, contrast: t, shadows: a, stroke: o, gloss: s = 0, waviness: c = y.waviness, wavinessFreq: l = y.wavinessFreq }) {
+	let u = v(e, t), d = Math.round((.5 - 5 / 12 * u) * 100) / 100, f = c > 0;
+	return /* @__PURE__ */ i(n, { children: [
+		/* @__PURE__ */ r("feGaussianBlur", {
+			in: "SourceGraphic",
+			stdDeviation: e,
+			result: "blur"
+		}),
+		/* @__PURE__ */ r("feColorMatrix", {
+			in: "blur",
+			type: "matrix",
+			values: `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${u} ${d}`,
+			result: "goo"
+		}),
+		/* @__PURE__ */ r("feComposite", {
+			in: "SourceGraphic",
+			in2: "goo",
+			operator: "atop",
+			result: f ? "shape-raw" : "shape"
+		}),
+		f ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("feTurbulence", {
+			type: "fractalNoise",
+			baseFrequency: l,
+			numOctaves: 1,
+			seed: "7",
+			result: "wave-noise"
+		}), /* @__PURE__ */ r("feDisplacementMap", {
+			in: "shape-raw",
+			in2: "wave-noise",
+			scale: c * 2,
+			xChannelSelector: "R",
+			yChannelSelector: "G",
+			result: "shape"
+		})] }) : null,
+		s > 0 ? /* @__PURE__ */ i(n, { children: [
+			/* @__PURE__ */ r("feGaussianBlur", {
+				in: "shape",
+				stdDeviation: 2.5,
+				result: "gloss-bump"
+			}),
+			/* @__PURE__ */ r("feSpecularLighting", {
+				in: "gloss-bump",
+				surfaceScale: s,
+				specularConstant: .78,
+				specularExponent: 20,
+				lightingColor: "#ffffff",
+				result: "gloss-light",
+				children: /* @__PURE__ */ r("feDistantLight", {
+					azimuth: 235,
+					elevation: 22
+				})
+			}),
+			/* @__PURE__ */ r("feComposite", {
+				in: "gloss-light",
+				in2: "shape",
+				operator: "in",
+				result: "gloss-clip"
+			}),
+			/* @__PURE__ */ r("feComposite", {
+				in: "shape",
+				in2: "gloss-clip",
+				operator: "arithmetic",
+				k1: "0",
+				k2: "1",
+				k3: "1",
+				k4: "0",
+				result: "shape"
+			})
+		] }) : null,
+		x(a, o) ? /* @__PURE__ */ r("feColorMatrix", {
+			in: "shape",
+			type: "matrix",
+			values: h,
+			result: "bin"
+		}) : null,
+		a.map((e, t) => e.inset ? /* @__PURE__ */ r(S, {
+			index: t,
+			shadow: e
+		}, t) : /* @__PURE__ */ r(C, {
+			index: t,
+			shadow: e
+		}, t)),
+		o ? /* @__PURE__ */ r(w, { stroke: o }) : null,
+		a.length > 0 || o ? /* @__PURE__ */ i("feMerge", { children: [
+			a.map((e, t) => e.inset ? -1 : t).filter((e) => e >= 0).reverse().map((e) => /* @__PURE__ */ r("feMergeNode", { in: `shadow-${e}` }, e)),
+			/* @__PURE__ */ r("feMergeNode", { in: "shape" }),
+			o ? /* @__PURE__ */ r("feMergeNode", { in: "stroke-out" }) : null,
+			a.map((e, t) => e.inset ? /* @__PURE__ */ r("feMergeNode", { in: `shadow-${t}` }, t) : null)
+		] }) : null
+	] });
+}
+//#endregion
+//#region src/liquidGooeyGeometry.ts
+function E(e, t) {
+	let n = 0, r = 0, i = e;
+	for (; i && i !== t && t.contains(i);) n += i.offsetLeft, r += i.offsetTop, i = i.offsetParent;
+	return {
+		x: n,
+		y: r
+	};
+}
+function D(e, t, n) {
+	let r = getComputedStyle(e), i = (e) => {
+		let r = e.split(" ")[0] ?? "";
+		return r.endsWith("%") ? (parseFloat(r) || 0) / 100 * Math.min(t, n) : parseFloat(r) || 0;
+	};
+	return [
+		i(r.borderTopLeftRadius),
+		i(r.borderTopRightRadius),
+		i(r.borderBottomRightRadius),
+		i(r.borderBottomLeftRadius)
+	];
+}
+function O(e) {
+	return typeof e == "number" ? [
+		e,
+		e,
+		e,
+		e
+	] : e;
+}
+function k(e, t, n, r, i) {
+	let [a, o, s, c] = i.map((e) => Math.max(0, e)), l = Math.min(1, n / Math.max(1e-6, a + o), n / Math.max(1e-6, c + s), r / Math.max(1e-6, a + c), r / Math.max(1e-6, o + s));
+	return a *= l, o *= l, s *= l, c *= l, `M ${e + a} ${t} H ${e + n - o} A ${o} ${o} 0 0 1 ${e + n} ${t + o} V ${t + r - s} A ${s} ${s} 0 0 1 ${e + n - s} ${t + r} H ${e + c} A ${c} ${c} 0 0 1 ${e} ${t + r - c} V ${t + a} A ${a} ${a} 0 0 1 ${e + a} ${t} Z`;
+}
+var A = 44;
+function j(e) {
+	let t = e + 1831565813 >>> 0;
+	return t = Math.imul(t ^ t >>> 15, t | 1), t ^= t + Math.imul(t ^ t >>> 7, t | 61), ((t ^ t >>> 14) >>> 0) / 4294967296;
+}
+function M(e, t, n, r) {
+	let i = Math.max(0, e - 2 * n), a = Math.max(0, t - 2 * n), o = Math.PI / 2 * n, s = [
+		i,
+		o,
+		a,
+		o,
+		i,
+		o,
+		a,
+		o
+	], c = r * (s.reduce((e, t) => e + t, 0) || 1), l = 0;
+	for (; l < s.length - 1 && c > s[l];) c -= s[l], l += 1;
+	let u = s[l], d = u === 0 ? 0 : c / u, f = (e, t, r) => {
+		let i = e + Math.PI / 2 * d;
+		return {
+			x: t + n * Math.cos(i),
+			y: r + n * Math.sin(i),
+			nx: Math.cos(i),
+			ny: Math.sin(i)
+		};
+	};
+	switch (l) {
+		case 0: return {
+			x: n + d * i,
+			y: 0,
+			nx: 0,
+			ny: -1
+		};
+		case 1: return f(-Math.PI / 2, e - n, n);
+		case 2: return {
+			x: e,
+			y: n + d * a,
+			nx: 1,
+			ny: 0
+		};
+		case 3: return f(0, e - n, t - n);
+		case 4: return {
+			x: e - n - d * i,
+			y: t,
+			nx: 0,
+			ny: 1
+		};
+		case 5: return f(Math.PI / 2, n, t - n);
+		case 6: return {
+			x: 0,
+			y: t - n - d * a,
+			nx: -1,
+			ny: 0
+		};
+		default: return f(Math.PI, n, n);
+	}
+}
+var N = .18;
+function P(e, t, n, r, i, a) {
+	let o = Math.min(n, r), s = Math.min(Math.max(0, a.amplitude), o * N);
+	if (s < .15 || o <= 0) return k(e, t, n, r, i);
+	let c = Math.min(Math.max(...i, 0), o / 2), l = a.seed ?? 7, u = Math.max(2, Math.round(a.lobes ?? 3)), d = a.phase ?? 0, f = [];
+	for (let e = 0; e < u; e += 1) f.push({
+		k: e + 2,
+		a: j(l * 31 + e) * .6 + .4,
+		p: j(l * 57 + e) * Math.PI * 2
+	});
+	let p = f.reduce((e, t) => e + t.a, 0) || 1, m = [];
+	for (let i = 0; i < A; i += 1) {
+		let a = i / A, o = M(n, r, c, a), l = 0;
+		for (let { k: e, a: t, p: n } of f) l += t * Math.sin(2 * Math.PI * e * a + n + d);
+		let u = (l / p + 1) / 2 * s;
+		m.push([e + o.x + o.nx * u, t + o.y + o.ny * u]);
+	}
+	let h = m.length, g = (e) => m[(e % h + h) % h], _ = (e) => (Math.round(e * 100) / 100).toString(), v = `M ${_(g(0)[0])} ${_(g(0)[1])}`;
+	for (let e = 0; e < h; e += 1) {
+		let t = g(e - 1), n = g(e), r = g(e + 1), i = g(e + 2), a = n[0] + (r[0] - t[0]) / 6, o = n[1] + (r[1] - t[1]) / 6, s = r[0] - (i[0] - n[0]) / 6, c = r[1] - (i[1] - n[1]) / 6;
+		v += ` C ${_(a)} ${_(o)} ${_(s)} ${_(c)} ${_(r[0])} ${_(r[1])}`;
+	}
+	return `${v} Z`;
+}
+function F(e, t, n, r, i, a) {
+	return !a || a.amplitude <= 0 ? k(e, t, n, r, i) : P(e, t, n, r, i, a);
+}
+//#endregion
+//#region src/liquidGooeySpring.ts
+var I = {
+	snappy: {
+		stiffness: 480,
+		damping: 34,
+		mass: 1
+	},
+	smooth: {
+		stiffness: 190,
+		damping: 26,
+		mass: 1
+	},
+	bouncy: {
+		stiffness: 320,
+		damping: 17,
+		mass: 1
+	},
+	wobbly: {
+		stiffness: 400,
+		damping: 9.6,
+		mass: 1
+	}
+}, L = 1 / 240;
+function R(e) {
+	let t = 0, n = 0, r = 0, i = -1, a = 0, o = [0];
+	for (; r < 10;) {
+		let s = (-e.stiffness * (t - 1) - e.damping * n) / e.mass;
+		if (n += s * L, t += n * L, r += L, o.push(t), t > a && (a = t), Math.abs(t - 1) < .001 && Math.abs(n) < .02) {
+			if (i < 0 && (i = r), r - i >= .064) break;
+		} else i = -1;
+	}
+	let s = i > 0 ? i : r, c = Math.round(Math.min(120, Math.max(24, s * 90))), l = Math.min(o.length - 1, s / L), u = [];
+	for (let e = 0; e <= c; e += 1) {
+		let t = Math.min(o.length - 1, Math.round(e / c * l));
+		u.push(Math.round((o[t] ?? 1) * 1e4) / 1e4);
+	}
+	return u[u.length - 1] = 1, {
+		duration: s,
+		values: u,
+		overshoots: a > 1.001
+	};
+}
+var z = null;
+function B() {
+	return z === null && (z = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("transition-timing-function", "linear(0, 1)")), z;
+}
+var V = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Map();
+function U(e) {
+	let t = H.get(e);
+	if (t) return t;
+	let n = /^linear\(([^)]+)\)$/.exec(e.trim()), r = /^cubic-bezier\(([^)]+)\)$/.exec(e.trim()), i;
+	if (n) {
+		let e = (n[1] ?? "").split(",").map(Number);
+		i = (t) => {
+			if (t <= 0) return e[0] ?? 0;
+			if (t >= 1) return e[e.length - 1] ?? 1;
+			let n = t * (e.length - 1), r = Math.floor(n), i = e[r] ?? 0;
+			return i + ((e[r + 1] ?? i) - i) * (n - r);
+		};
+	} else if (r) {
+		let [e = 0, t = 0, n = 1, a = 1] = (r[1] ?? "").split(",").map(Number);
+		i = (r) => {
+			if (r <= 0) return 0;
+			if (r >= 1) return 1;
+			let i = 0, o = 1;
+			for (let t = 0; t < 24; t += 1) {
+				let t = (i + o) / 2;
+				3 * t * (1 - t) * (1 - t) * e + 3 * t * t * (1 - t) * n + t ** 3 < r ? i = t : o = t;
+			}
+			let s = (i + o) / 2;
+			return 3 * s * (1 - s) * (1 - s) * t + 3 * s * s * (1 - s) * a + s ** 3;
+		};
+	} else i = e === "ease" ? U("cubic-bezier(0.25, 0.1, 0.25, 1)") : e === "ease-in" ? U("cubic-bezier(0.42, 0, 1, 1)") : e === "ease-out" ? U("cubic-bezier(0, 0, 0.58, 1)") : e === "ease-in-out" ? U("cubic-bezier(0.42, 0, 0.58, 1)") : (e) => Math.min(1, Math.max(0, e));
+	return H.set(e, i), i;
+}
+function W(e, t = !1) {
+	if (t) return {
+		duration: 0,
+		easing: "linear"
+	};
+	let n = e ?? "smooth";
+	if (typeof n == "object" && "duration" in n) return {
+		duration: Math.max(0, n.duration),
+		easing: n.ease ?? "cubic-bezier(0.22, 1, 0.36, 1)"
+	};
+	let r = typeof n == "string" ? I[n] : {
+		stiffness: 300,
+		damping: 24,
+		mass: 1,
+		...n
+	}, i = `${r.stiffness}/${r.damping}/${r.mass}/${B()}`, a = V.get(i);
+	if (!a) {
+		let e = R(r);
+		a = {
+			duration: Math.round(e.duration * 1e3),
+			easing: B() ? `linear(${e.values.join(", ")})` : e.overshoots ? "cubic-bezier(0.34, 1.56, 0.64, 1)" : "cubic-bezier(0.22, 1, 0.36, 1)"
+		}, V.set(i, a);
+	}
+	return a;
+}
+//#endregion
+//#region src/reducedMotion.ts
+function G() {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia("(prefers-reduced-motion: reduce)");
+}
+function K(e, t) {
+	let n = e;
+	return typeof e.addEventListener == "function" ? (e.addEventListener("change", t), () => e.removeEventListener("change", t)) : typeof n.addListener == "function" ? (n.addListener(t), () => n.removeListener?.(t)) : () => {};
+}
+function q() {
+	let [n, r] = t(() => G()?.matches ?? !1);
+	return e(() => {
+		let e = G();
+		if (e) return r(e.matches), K(e, (e) => r(e.matches));
+	}, []), n;
+}
+//#endregion
+export { p as _, D as a, k as c, T as d, a as f, f as g, m as h, P as i, F as l, d as m, U as n, O as o, o as p, W as r, E as s, q as t, y as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pieai/swimmer-ui-kit",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "Token-driven React game UI kit for web and wrapped PieAI game surfaces.",
   "keywords": [
     "design-system",
@@ -42,6 +42,11 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./liquid-presence": {
+      "types": "./dist/liquid-presence.d.ts",
+      "default": "./dist/liquid-presence.js"
+    },
+    "./liquid-presence.css": "./dist/liquid-presence.css",
     "./assets/*": "./dist/assets/*",
     "./styles.css": "./dist/styles.css",
     "./preview.css": "./dist/preview.css",