@hina-ui/vue 1.7.10 → 1.7.11

package/dist/index.js

@@ -35204,8 +35204,6 @@ var workletMain = () => {
 	const M = Math;
 	const lcgrand = (seed = 1) => (a = 0, b = 1) => a + M.abs(b - a) * (M.imul(48271, seed = M.imul(214013, seed) + 2531011) & 2147483647) / 2147483647;
 	const pol2vec = (l, a = 0) => [l * M.cos(a), l * M.sin(a)];
-	const vecmag = ([x, y]) => M.sqrt(x * x + y * y);
-	const vecnorm = ([x, y], l = vecmag([x, y])) => l === 0 ? [0, 0] : [x / l, y / l];
 	const trapezoidalWave = (l, a, b) => {
 		const s = M.max(a, l - b);
 		return (t) => {
@@ -35313,18 +35311,18 @@ var workletMain = () => {
 			const lineHeight = height - 2 * vgap;
 			const wordDist = mimicWords ? makeWordDistribution(lineWidth, lineHeight, M.max(12, lineHeight / 4)) : (x) => x * (width - 2 * hgap);
 			ctx.clearRect(0, 0, size.width, size.height);
+			const l = parseInt(accent[2] ?? "0");
+			const ldir = l > 50 ? -1 : 1;
+			const hue = `hsl(${accent[0]} ${accent[1]} `;
 			for (let i = 0; i < world.n; ++i) {
 				const x0 = hgap + wordDist(rand());
 				const y0 = rand(vgap, height - vgap);
 				const v0mag = rand(vmin, vmax);
 				const size0 = rand(1, 1 + sizedev);
-				const l = parseInt(accent[2] ?? "0");
-				const ldir = l > 50 ? -1 : 1;
 				const lightness = M.floor(clamp(0, l + ldir * rand(0, 30), 100));
 				const v0 = pol2vec(v0mag, rand(0, M.PI * 2));
 				const vx0 = v0[0];
 				const vy0 = v0[1];
-				vecnorm(v0);
 				const shape = rand() > .5 ? "square" : "circle";
 				const lifetime = rand(.3, 1.5);
 				const respawn = rand(0, 1);
@@ -35335,11 +35333,12 @@ var workletMain = () => {
 				const x = x0 + vx0 * t;
 				const y = y0 + vy0 * t;
 				const fade = animateFadeInOut(world, i, fadeDuration);
-				const alpha = fade * (1 - t / lifetime);
+				const alpha = M.round(fade * (1 - t / lifetime) * 100);
 				const psize = fade * (size0 * visibilityFn(t));
+				if (alpha <= 0 || psize <= 0) continue;
+				ctx.fillStyle = `${hue}${lightness}% / ${alpha}%)`;
 				for (const [wx, wy] of cycleBounds([x, y], [width, height], psize / 2)) {
 					ctx.beginPath();
-					ctx.fillStyle = `hsl(${accent[0]} ${accent[1]} ${lightness}% / ${M.round(alpha * 100)}%)`;
 					if (shape === "square") ctx.rect(wx, wy, psize, psize);
 					else ctx.arc(wx, wy, psize / 2, 0, M.PI * 2);
 					ctx.closePath();
@@ -35367,23 +35366,44 @@ var DEFAULTS = {
 	mimicWords: true,
 	accent: "0 0% 20%"
 };
+var SPOILER_WORKLET_INPUTS = [
+	"--hn-nz-t",
+	"--hn-nz-stop",
+	"--hn-nz-fade",
+	"--hn-nz-gap",
+	"--hn-nz-accent",
+	"--hn-nz-words",
+	"--hn-nz-density"
+];
 var BLOCK_MAX_TILE = 293;
 var INLINE_MAX_TILE = 333;
 var GAP_RATIO = 8;
 var DEFAULT_FADE_S = 1.5;
+var CLOCK_S = 3600;
+var painters = /* @__PURE__ */ new WeakMap();
+var viewport;
+function watchViewport() {
+	viewport ??= new IntersectionObserver((entries) => {
+		for (const entry of entries) painters.get(entry.target)?.setInView(entry.isIntersecting);
+	});
+	return viewport;
+}
 var SpoilerPainter = class {
 	el;
 	maxFPS = DEFAULTS.fps;
-	t = 0;
-	t0 = 0;
-	tstop = null;
-	raf = null;
-	fadeS = 0;
+	clock = null;
+	settle;
+	running = false;
+	inView = false;
 	hidden = false;
 	destroyed = false;
 	constructor(el, options = {}) {
 		registerSpoilerWorklet();
 		this.el = el;
+		painters.set(el, this);
+		watchViewport().observe(el);
+		this.setFade(0);
+		this.setTstop(null);
 		this.update(options);
 	}
 	get isHidden() {
@@ -35391,11 +35411,17 @@ var SpoilerPainter = class {
 	}
 	update({ fps = DEFAULTS.fps, gap = DEFAULTS.gap, density = DEFAULTS.density, mimicWords = DEFAULTS.mimicWords, accent = DEFAULTS.accent } = {}) {
 		if (this.destroyed) return;
-		this.maxFPS = prefersReducedMotion() ? 0 : fps;
+		const maxFPS = prefersReducedMotion() ? 0 : fps;
+		if (maxFPS !== this.maxFPS) {
+			this.maxFPS = maxFPS;
+			if (maxFPS > 0) this.clock?.effect?.updateTiming({ easing: this.easing() });
+			else this.stopClock();
+		}
 		this.el.style.setProperty("--hn-nz-density", String(density));
 		this.el.style.setProperty("--hn-nz-accent", accent);
 		const isBlockElement = getComputedStyle(this.el).getPropertyValue("display") !== "inline";
 		this.useBackgroundStyle("auto", "auto", false);
+		this.el.style.setProperty("--hn-nz-gap", "0px 0px");
 		if (isBlockElement) {
 			this.el.style.setProperty("--hn-nz-words", "false");
 			const rect = this.el.getBoundingClientRect();
@@ -35419,71 +35445,77 @@ var SpoilerPainter = class {
 		const repeatAndPosition = tile ? "repeat left center" : "no-repeat center center";
 		this.el.style.background = `paint(hn-spoiler) ${repeatAndPosition} / ${w} ${h}`;
 	}
+	easing() {
+		return `steps(${Math.round(CLOCK_S * this.maxFPS)})`;
+	}
+	time() {
+		const elapsed = Number(this.clock?.currentTime ?? 0) / 1e3;
+		return this.maxFPS > 0 ? Math.floor(elapsed * this.maxFPS) / this.maxFPS : 0;
+	}
 	setFade(value) {
-		this.fadeS = value;
 		this.el.style.setProperty("--hn-nz-fade", `${value}s`);
 	}
-	setT(value) {
-		this.t = value;
-		this.el.style.setProperty("--hn-nz-t", value.toFixed(3));
-	}
 	setTstop(value) {
-		this.tstop = value;
-		if (value !== null) this.el.style.setProperty("--hn-nz-stop", value.toFixed(3));
-		else this.el.style.removeProperty("--hn-nz-stop");
+		this.el.style.setProperty("--hn-nz-stop", value === null ? "Infinity" : value.toFixed(3));
 	}
 	parseFade(value) {
 		if (this.maxFPS <= 0) return 0;
 		return value === true || value === void 0 ? DEFAULT_FADE_S : Number(value);
 	}
+	sync() {
+		if (!this.clock) return;
+		if (this.running && this.inView) this.clock.play();
+		else this.clock.pause();
+	}
+	stopClock() {
+		clearTimeout(this.settle);
+		this.settle = void 0;
+		this.clock?.cancel();
+		this.clock = null;
+		this.running = false;
+	}
+	setInView(value) {
+		if (this.destroyed || value === this.inView) return;
+		this.inView = value;
+		this.sync();
+	}
 	hide(animate) {
 		if (this.destroyed) return;
 		this.hidden = true;
 		this.setFade(this.parseFade(animate));
 		this.setTstop(null);
-		this.setT(0);
-		this.startAnimation();
+		this.stopClock();
+		if (this.maxFPS <= 0) return;
+		this.clock = this.el.animate({ "--hn-nz-t": [0, CLOCK_S] }, {
+			duration: CLOCK_S * 1e3,
+			easing: this.easing(),
+			iterations: Infinity
+		});
+		this.running = true;
+		this.sync();
 	}
 	reveal(animate) {
 		if (this.destroyed) return;
 		this.hidden = false;
 		const duration = this.parseFade(animate);
 		this.setFade(duration);
-		this.setTstop(this.t);
-		if (duration <= 0) this.stopAnimation();
-	}
-	frame = (now) => {
-		if (this.destroyed) return;
-		const shouldStop = this.tstop !== null && this.t > this.tstop + this.fadeS;
-		if (this.maxFPS > 0 && !shouldStop) this.raf = requestAnimationFrame(this.frame);
-		const dt = now - this.t0;
-		if (dt > 0 && dt < 1e3 / this.maxFPS) return;
-		this.setT(this.t + dt / 1e3);
-		this.t0 = now;
-	};
-	startAnimation() {
-		this.t0 = performance.now();
-		this.frame(this.t0);
-	}
-	stopAnimation() {
-		if (this.raf !== null) {
-			cancelAnimationFrame(this.raf);
-			this.raf = null;
-		}
+		this.setTstop(this.time());
+		clearTimeout(this.settle);
+		const stop = () => {
+			this.settle = void 0;
+			this.running = false;
+			this.sync();
+		};
+		if (duration <= 0) stop();
+		else this.settle = setTimeout(stop, duration * 1e3 + 1e3 / this.maxFPS);
 	}
 	destroy() {
 		this.destroyed = true;
-		this.stopAnimation();
+		this.stopClock();
+		viewport?.unobserve(this.el);
+		painters.delete(this.el);
 		this.el.style.removeProperty("background");
-		for (const prop of [
-			"--hn-nz-t",
-			"--hn-nz-stop",
-			"--hn-nz-fade",
-			"--hn-nz-gap",
-			"--hn-nz-words",
-			"--hn-nz-density",
-			"--hn-nz-accent"
-		]) this.el.style.removeProperty(prop);
+		for (const prop of SPOILER_WORKLET_INPUTS) this.el.style.removeProperty(prop);
 	}
 };
 //#endregion