@mhmo91/schmancy 0.10.25 → 0.10.26

package/dist/{directives-BBMqe8x3.js → directives-sWKTEJDb.js}

@@ -3369,7 +3369,7 @@ var ut = U(class extends z {
 	idleBreathe: !0,
 	temperature: 0,
 	chromaticAberration: 1,
-	particleCount: 30
+	particleCount: 8
 }, ht = "cubic-bezier(0.37, 0, 0.63, 1)", gt = "cubic-bezier(0.25, 0.1, 0.25, 1)", _t = !1, vt = class e {
 	constructor() {
 		this.elementToDirective = /* @__PURE__ */ new WeakMap(), this.instances = /* @__PURE__ */ new Set(), this.observer = null, this.visibilitySub = null, this.tabVisible = !0;
@@ -3425,36 +3425,33 @@ var ut = U(class extends z {
 			if (_t || typeof document > "u") return;
 			_t = !0;
 			let e = document.createElement("style");
-			e.id = "nebula-directive-styles", e.textContent = "\n/* =============================================================================\n   NEBULA v3 - SURREAL DIMENSIONAL RIFT - GPU-COMPOSITED CSS ANIMATIONS\n   Chromatic aberration, iridescent hue-cycling, event horizon, tendrils.\n   Performance: translate3d + opacity for most layers, hue-rotate for core only.\n   ============================================================================= */\n\n/* Chromatic red channel - rightward aberration drift */\n@keyframes nebula-chromatic-red {\n	0%, 100% { transform: translate3d(var(--nebula-aberration, 3px), 0, 0); }\n	25% { transform: translate3d(calc(var(--nebula-aberration, 3px) * 1.8), -1%, 0); }\n	50% { transform: translate3d(var(--nebula-aberration, 3px), 1%, 0); }\n	75% { transform: translate3d(calc(var(--nebula-aberration, 3px) * 0.5), 0, 0); }\n}\n\n/* Chromatic blue channel - leftward counter-drift */\n@keyframes nebula-chromatic-blue {\n	0%, 100% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1), 0, 0); }\n	25% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -0.5), 1%, 0); }\n	50% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1), -1%, 0); }\n	75% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1.8), 0, 0); }\n}\n\n/* Iridescent core - continuous 360-degree hue rotation (the ONE filter animation) */\n@keyframes nebula-iridescent {\n	0% { filter: hue-rotate(0deg) blur(var(--nebula-blur-core, 12px)) saturate(1.6); }\n	100% { filter: hue-rotate(360deg) blur(var(--nebula-blur-core, 12px)) saturate(1.6); }\n}\n\n/* Bioluminescent tendrils - organic breathing */\n@keyframes nebula-tendrils-breathe {\n	0%, 100% { opacity: 0.6; transform: translate3d(0, 0, 0); }\n	30% { opacity: 0.9; transform: translate3d(1%, -1.5%, 0); }\n	60% { opacity: 0.5; transform: translate3d(-1%, 1.5%, 0); }\n}\n\n/* Quantum particle twinkle - opacity only (cheapest) */\n@keyframes nebula-particle-twinkle {\n	0%, 100% { opacity: 0.7; }\n	15% { opacity: 1; }\n	40% { opacity: 0.5; }\n	65% { opacity: 0.85; }\n	85% { opacity: 0.6; }\n}\n\n/* Idle breathing - gentle pulse when dimmed */\n@keyframes nebula-idle-breathe {\n	0%, 100% {\n		opacity: var(--nebula-idle-opacity, 0.08);\n		filter: blur(calc(var(--nebula-blur-base, 10px) * 8));\n		transform: scale(1);\n	}\n	50% {\n		opacity: calc(var(--nebula-idle-opacity, 0.08) * 1.4);\n		filter: blur(calc(var(--nebula-blur-base, 10px) * 10));\n		transform: scale(1.005);\n	}\n}\n\n/* =============================================================================\n   STATE CLASSES - Control via CSS class toggle (no JS animation calls)\n   ============================================================================= */\n\n.nebula-overlay {\n	contain: strict;\n	pointer-events: none;\n	isolation: isolate;\n}\n\n.nebula-overlay.paused .nebula-layer {\n	animation-play-state: paused !important;\n}\n\n.nebula-overlay.running .nebula-layer {\n	animation-play-state: running !important;\n}\n\n/* Reduced motion - respect user preferences */\n@media (prefers-reduced-motion: reduce) {\n	.nebula-layer {\n		animation: none !important;\n		transition: opacity 0s !important;\n	}\n}\n", document.head.appendChild(e);
+			e.id = "nebula-directive-styles", e.textContent = "\n/* =============================================================================\n   NEBULA v3 - SURREAL DIMENSIONAL RIFT - GPU-COMPOSITED CSS ANIMATIONS\n   Chromatic aberration, iridescent hue-cycling, event horizon, tendrils.\n   Performance: translate3d + opacity for most layers, hue-rotate for core only.\n   ============================================================================= */\n\n/* Chromatic red channel - rightward aberration drift */\n@keyframes nebula-chromatic-red {\n	0%, 100% { transform: translate3d(var(--nebula-aberration, 3px), 0, 0); }\n	25% { transform: translate3d(calc(var(--nebula-aberration, 3px) * 1.8), -1%, 0); }\n	50% { transform: translate3d(var(--nebula-aberration, 3px), 1%, 0); }\n	75% { transform: translate3d(calc(var(--nebula-aberration, 3px) * 0.5), 0, 0); }\n}\n\n/* Chromatic blue channel - leftward counter-drift */\n@keyframes nebula-chromatic-blue {\n	0%, 100% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1), 0, 0); }\n	25% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -0.5), 1%, 0); }\n	50% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1), -1%, 0); }\n	75% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1.8), 0, 0); }\n}\n\n/* Iridescent core - compositor-only rotation. filter is static (baked inline) to avoid\n   per-frame raster cost of animated blur/hue-rotate under mix-blend-mode: screen. */\n@keyframes nebula-iridescent {\n	0% { transform: translateZ(0) rotate(0deg); }\n	100% { transform: translateZ(0) rotate(360deg); }\n}\n\n/* Bioluminescent tendrils - organic breathing */\n@keyframes nebula-tendrils-breathe {\n	0%, 100% { opacity: 0.6; transform: translate3d(0, 0, 0); }\n	30% { opacity: 0.9; transform: translate3d(1%, -1.5%, 0); }\n	60% { opacity: 0.5; transform: translate3d(-1%, 1.5%, 0); }\n}\n\n/* Quantum particle twinkle - opacity only (cheapest) */\n@keyframes nebula-particle-twinkle {\n	0%, 100% { opacity: 0.7; }\n	15% { opacity: 1; }\n	40% { opacity: 0.5; }\n	65% { opacity: 0.85; }\n	85% { opacity: 0.6; }\n}\n\n/* Idle breathing - compositor-only pulse when dimmed.\n   filter: blur is intentionally static (baked on layers) — animating it here\n   would keep re-rasterizing the dimmed overlay forever for no visual gain. */\n@keyframes nebula-idle-breathe {\n	0%, 100% {\n		opacity: var(--nebula-idle-opacity, 0.08);\n		transform: scale(1) translateZ(0);\n	}\n	50% {\n		opacity: calc(var(--nebula-idle-opacity, 0.08) * 1.4);\n		transform: scale(1.005) translateZ(0);\n	}\n}\n\n/* =============================================================================\n   STATE CLASSES - Control via CSS class toggle (no JS animation calls)\n   ============================================================================= */\n\n.nebula-overlay {\n	contain: strict;\n	pointer-events: none;\n	isolation: isolate;\n}\n\n.nebula-overlay.paused .nebula-layer,\n.nebula-overlay.dimmed .nebula-layer {\n	animation-play-state: paused !important;\n}\n\n.nebula-overlay.running .nebula-layer {\n	animation-play-state: running !important;\n}\n\n/* Reduced motion - respect user preferences */\n@media (prefers-reduced-motion: reduce) {\n	.nebula-layer {\n		animation: none !important;\n		transition: opacity 0s !important;\n	}\n}\n", document.head.appendChild(e);
 		})(), this.state?.autoHideSub && (this.state.autoHideSub.unsubscribe(), this.state.autoHideSub = null);
 		let n = o.value;
-		if (this.state?.overlay && this.state.isDimmed) return this.state.isDimmed = !1, this.state.options = t, this.awakenOverlay(t, n), void this.scheduleAutoHide(t);
+		if (this.state?.overlay && this.state.isDimmed) return this.state.isDimmed = !1, this.state.options = t, this.state.fadeFinishedSub?.unsubscribe(), this.state.fadeFinishedSub = null, this.awakenOverlay(t, n), void this.scheduleAutoHide(t);
 		this.state?.overlay || this.createOverlay(e, t, n), this.scheduleAutoHide(t);
 	}
 	awakenOverlay(e, r) {
 		if (!this.state?.overlay) return;
-		let i = this.state.overlay, a = r ? 0 : .6 * e.fadeInDuration, o = r ? "linear" : t(n);
+		let i = this.state.overlay;
 		i.style.setProperty("--nebula-intensity", String(e.intensity)), i.animate([
 			{
 				opacity: e.idleOpacity,
-				transform: "scale(0.98)",
-				filter: `blur(${4 * e.blur}px)`
+				transform: "scale(0.98) translateZ(0)"
 			},
 			{
 				opacity: .7 * e.intensity,
-				transform: "scale(1.01)",
-				filter: `blur(${1 * e.blur}px)`
+				transform: "scale(1.01) translateZ(0)"
 			},
 			{
 				opacity: e.intensity,
-				transform: "scale(1)",
-				filter: "blur(0px)"
+				transform: "scale(1) translateZ(0)"
 			}
 		], {
-			duration: a,
-			easing: o,
+			duration: r ? 0 : .6 * e.fadeInDuration,
+			easing: r ? "linear" : t(n),
 			fill: "forwards"
-		}), i.classList.remove("paused"), i.classList.add("running");
+		}), i.classList.remove("paused", "dimmed"), i.classList.add("running"), i.style.animation = "";
 	}
 	createOverlay(e, r, i) {
 		let a = window.getComputedStyle(e).position, o = e.style.position, s = e.style.overflow, c = e.style.contain;
@@ -3516,6 +3513,8 @@ var ut = U(class extends z {
 				background: `\n\t\t\t\t\tradial-gradient(ellipse 20% 22% at 50% 50%,\n\t\t\t\t\t\trgba(255,${x},${S},${.18 * f}) 0%,\n\t\t\t\t\t\trgba(255,${v},200,${.08 * f}) 40%,\n\t\t\t\t\t\trgba(${g},100,${_},${.03 * f}) 65%,\n\t\t\t\t\t\ttransparent 80%),\n\t\t\t\t\tradial-gradient(circle 6% at 50% 50%,\n\t\t\t\t\t\trgba(255,255,255,${.25 * f}) 0%,\n\t\t\t\t\t\trgba(255,240,245,${.1 * f}) 50%,\n\t\t\t\t\t\ttransparent 100%)`,
 				mixBlendMode: "screen",
 				transform: "translateZ(0)",
+				transformOrigin: "50% 50%",
+				filter: `blur(${12 * r.blur}px) saturate(1.6)`,
 				animation: `nebula-iridescent ${28e3 / r.speed}ms linear infinite`
 			}), C.appendChild(i);
 			let a = document.createElement("div");
@@ -3550,28 +3549,15 @@ var ut = U(class extends z {
 		C.animate([
 			{
 				opacity: 0,
-				transform: "scale(0.85)",
-				filter: `blur(${25 * r.blur}px) saturate(0.5)`
+				transform: "scale(0.85) translateZ(0)"
 			},
 			{
-				opacity: .3 * r.intensity,
-				transform: "scale(0.95)",
-				filter: `blur(${12 * r.blur}px) saturate(0.8)`
-			},
-			{
-				opacity: .6 * r.intensity,
-				transform: "scale(1.02)",
-				filter: `blur(${4 * r.blur}px) saturate(1.1)`
-			},
-			{
-				opacity: .85 * r.intensity,
-				transform: "scale(1.005)",
-				filter: `blur(${1 * r.blur}px) saturate(1.05)`
+				opacity: .4 * r.intensity,
+				transform: "scale(0.97) translateZ(0)"
 			},
 			{
 				opacity: r.intensity,
-				transform: "scale(1)",
-				filter: "blur(0px) saturate(1)"
+				transform: "scale(1) translateZ(0)"
 			}
 		], {
 			duration: ee,
@@ -3585,6 +3571,7 @@ var ut = U(class extends z {
 			originalContain: c,
 			isDimmed: !1,
 			autoHideSub: null,
+			fadeFinishedSub: null,
 			options: r,
 			reducedMotion: i,
 			isVisible: document.visibilityState === "visible"
@@ -3602,18 +3589,15 @@ var ut = U(class extends z {
 		if (e.idleOpacity <= 0) return void n.animate([
 			{
 				opacity: r.intensity,
-				transform: "scale(1)",
-				filter: "blur(0px) saturate(1)"
+				transform: "scale(1) translateZ(0)"
 			},
 			{
 				opacity: .4 * r.intensity,
-				transform: "scale(0.95)",
-				filter: `blur(${8 * r.blur}px) saturate(0.7)`
+				transform: "scale(0.95) translateZ(0)"
 			},
 			{
 				opacity: 0,
-				transform: "scale(0.9)",
-				filter: `blur(${15 * r.blur}px) saturate(0.3)`
+				transform: "scale(0.9) translateZ(0)"
 			}
 		], {
 			duration: o,
@@ -3623,30 +3607,27 @@ var ut = U(class extends z {
 		let c = n.animate([
 			{
 				opacity: r.intensity,
-				transform: "scale(1)",
-				filter: "blur(0px) saturate(1)"
+				transform: "scale(1) translateZ(0)"
 			},
 			{
 				opacity: .5 * r.intensity,
-				transform: "scale(0.99)",
-				filter: `blur(${3 * r.blur}px) saturate(0.75)`
+				transform: "scale(0.99) translateZ(0)"
 			},
 			{
 				opacity: e.idleOpacity,
-				transform: "scale(1)",
-				filter: `blur(${8 * r.blur}px) saturate(0.4)`
+				transform: "scale(1) translateZ(0)"
 			}
 		], {
 			duration: o,
 			easing: s,
 			fill: "forwards"
 		});
-		e.idleBreathe && !i && w(c.finished).pipe(N(1), O(() => m)).subscribe(() => {
-			this.state?.overlay && (this.state.overlay.style.animation = `nebula-idle-breathe ${12e3 / r.speed}ms ${ht} infinite`);
-		});
+		this.state.fadeFinishedSub?.unsubscribe(), this.state.fadeFinishedSub = w(c.finished).pipe(N(1), I(() => {
+			this.state?.overlay && (this.state.overlay.classList.add("dimmed"), e.idleBreathe && !i && (this.state.overlay.style.animation = `nebula-idle-breathe ${12e3 / r.speed}ms ${ht} infinite`));
+		}), O(() => m)).subscribe();
 	}
 	cleanup() {
-		this.state &&= (this.coordinator.unregister(this, this.state.element), this.state.autoHideSub?.unsubscribe(), this.state.overlay?.remove(), this.state.element.style.position = this.state.originalPosition, this.state.element.style.overflow = this.state.originalOverflow, this.state.element.style.contain = this.state.originalContain, null);
+		this.state &&= (this.coordinator.unregister(this, this.state.element), this.state.autoHideSub?.unsubscribe(), this.state.fadeFinishedSub?.unsubscribe(), this.state.overlay?.remove(), this.state.element.style.position = this.state.originalPosition, this.state.element.style.overflow = this.state.originalOverflow, this.state.element.style.contain = this.state.originalContain, null);
 	}
 	disconnected() {
 		this.cleanup();