@filip.mazev/blocks 1.4.13 → 1.4.15

package/fesm2022/filip.mazev-blocks-effects-runtime.mjs

@@ -31,6 +31,7 @@ function configureAppearance(root, initial = {}) {
 	if (configured.has(root)) throw new Error("A glass configuration is already mounted on this root.");
 	configured.add(root);
 	const restoreAttributes = rememberAttributes(root, attributes);
+	const originalAttributes = new Map(attributes.map((name) => [name, root.getAttribute(name)]));
 	const restoreStyles = rememberStyles(root, properties);
 	let options = { ...initial };
 	let disposed = false;
@@ -38,27 +39,34 @@ function configureAppearance(root, initial = {}) {
 		const viewEvent = root.ownerDocument.defaultView?.CustomEvent;
 		if (viewEvent) root.ownerDocument.dispatchEvent(new viewEvent(configurationEvent, { detail: root }));
 	};
-	const paint = () => {
-		restoreAttributes();
-		restoreStyles();
+	const paint = (sync = true) => {
 		const values = [
 			["data-bx-glass-quality", options.quality],
 			["data-bx-reduced-motion", options.reducedMotion],
 			["data-bx-reduced-transparency", options.reducedTransparency]
 		];
-		for (const [name, value] of values) if (value !== void 0) root.setAttribute(name, String(value));
-		if (options.glassiness !== void 0) root.style.setProperty("--bx-glassiness", String(finiteClamp(options.glassiness, 0, 1, .5)));
-		notify();
+		for (const [name, value] of values) {
+			const next = value === void 0 ? originalAttributes.get(name) ?? null : String(value);
+			if (root.getAttribute(name) === next) continue;
+			if (next === null) root.removeAttribute(name);
+			else root.setAttribute(name, next);
+		}
+		if (options.glassiness !== void 0) {
+			const next = String(finiteClamp(options.glassiness, 0, 1, .5));
+			if (root.style.getPropertyValue("--bx-glassiness") !== next) root.style.setProperty("--bx-glassiness", next);
+		} else restoreStyles();
+		if (sync) notify();
 	};
 	paint();
 	return {
 		update(next) {
 			if (!disposed) {
+				const previous = options;
 				options = {
 					...options,
 					...next
 				};
-				paint();
+				paint(previous.quality !== options.quality || previous.reducedMotion !== options.reducedMotion || previous.reducedTransparency !== options.reducedTransparency);
 			}
 		},
 		destroy() {
@@ -246,7 +254,7 @@ function lightingVisibility(doc, view) {
 	};
 }
 const sampleInterval = 180;
-const liveInterval = 500;
+const liveInterval = 16;
 const rasterSize = 32;
 var AmbientSampler = class {
 	doc;
@@ -256,6 +264,7 @@ var AmbientSampler = class {
 	samples = /* @__PURE__ */ new Map();
 	dirty = /* @__PURE__ */ new Set();
 	pending = /* @__PURE__ */ new Set();
+	urgent = /* @__PURE__ */ new Set();
 	sources = /* @__PURE__ */ new Set();
 	initialized = false;
 	media = /* @__PURE__ */ new WeakMap();
@@ -296,15 +305,31 @@ var AmbientSampler = class {
 		this.samples.delete(entry);
 		this.dirty.delete(entry);
 		this.pending.delete(entry);
+		this.urgent.delete(entry);
 		this.syncLive();
 	}
 	lights(entry) {
-		return this.samples.get(entry)?.lights ?? [];
+		const sample = this.samples.get(entry);
+		if (!sample) return [];
+		const dx = entry.bounds && sample.bounds ? entry.bounds.left - sample.bounds.left : 0;
+		const dy = entry.bounds && sample.bounds ? entry.bounds.top - sample.bounds.top : 0;
+		return dx || dy ? sample.lights.map((light) => ({
+			...light,
+			x: light.x + dx,
+			y: light.y + dy
+		})) : sample.lights;
 	}
-	invalidate(entry) {
-		for (const receiver of entry ? [entry] : this.samples.keys()) if (receiver.visible && receiver.element.isConnected) this.dirty.add(receiver);
+	invalidate(entry, immediate = false) {
+		for (const receiver of entry ? Array.isArray(entry) ? entry : [entry] : this.samples.keys()) {
+			if (!receiver.visible || !receiver.element.isConnected) continue;
+			if (!this.pending.has(receiver)) this.dirty.add(receiver);
+			if (immediate) this.urgent.add(receiver);
+		}
 		this.resume();
 	}
+	isPending(entry) {
+		return this.urgent.has(entry);
+	}
 	assetChanged(element) {
 		this.media.delete(element);
 		this.invalidate();
@@ -324,6 +349,13 @@ var AmbientSampler = class {
 			this.pending.clear();
 			return;
 		}
+		if (this.urgent.size) {
+			if (this.timer !== void 0) this.view.clearTimeout(this.timer);
+			this.timer = void 0;
+			for (const entry of this.dirty) this.pending.add(entry);
+			this.dirty.clear();
+			this.stopFrame ??= subscribeFrame(() => this.sampleBatch());
+		}
 		if (this.dirty.size && this.timer === void 0 && !this.stopFrame) this.timer = this.view.setTimeout(() => {
 			this.timer = void 0;
 			this.nextSample = this.view.performance.now() + sampleInterval;
@@ -342,6 +374,7 @@ var AmbientSampler = class {
 		this.samples.clear();
 		this.dirty.clear();
 		this.pending.clear();
+		this.urgent.clear();
 		this.sources.clear();
 		this.media = /* @__PURE__ */ new WeakMap();
 		this.initialized = false;
@@ -365,15 +398,19 @@ var AmbientSampler = class {
 		const rasterSamples = /* @__PURE__ */ new Map();
 		const sources = [...this.sources];
 		const completed = [];
-		for (const entry of this.pending) {
+		for (const entry of /* @__PURE__ */ new Set([...this.urgent, ...this.pending])) {
 			this.pending.delete(entry);
+			this.urgent.delete(entry);
 			if (!entry.visible || !entry.element.isConnected || !this.samples.has(entry)) continue;
 			entry.bounds = entry.element.getBoundingClientRect();
+			const bounds = entry.bounds;
+			if (bounds.bottom <= 0 || bounds.right <= 0 || bounds.top >= this.view.innerHeight || bounds.left >= this.view.innerWidth) continue;
 			this.dependencies = /* @__PURE__ */ new Set();
 			const lights = this.environmentLights(entry, sources, rasterSamples, rects, visibility);
 			const mediaRects = /* @__PURE__ */ new Map();
 			for (const source of this.dependencies) mediaRects.set(source, this.rectFor(source, rects));
 			this.samples.set(entry, {
+				bounds,
 				lights,
 				media: this.dependencies,
 				rects: mediaRects
@@ -385,6 +422,7 @@ var AmbientSampler = class {
 		for (const entry of completed) this.changed(entry);
 		if (this.pending.size) return true;
 		this.stopFrame = void 0;
+		this.nextSample = this.view.performance.now() + sampleInterval;
 		this.resume();
 		return false;
 	}
@@ -393,6 +431,8 @@ var AmbientSampler = class {
 		for (const [entry, sample] of this.samples) {
 			const motion = inheritedAttribute(entry.element, "data-bx-reduced-motion");
 			if (!entry.visible || !entry.element.isConnected || (motion === null ? this.motion.matches : motion === "true")) continue;
+			const bounds = entry.bounds;
+			if (bounds && (bounds.bottom <= 0 || bounds.right <= 0 || bounds.top >= this.view.innerHeight || bounds.left >= this.view.innerWidth)) continue;
 			for (const source of sample.media) {
 				if (!source.isConnected || !/^(CANVAS|VIDEO)$/.test(source.tagName) || this.media.get(source)?.data === null) continue;
 				if (source.tagName === "VIDEO" && source.paused) continue;
@@ -426,6 +466,7 @@ var AmbientSampler = class {
 					const sample = this.samples.get(entry);
 					if (!sample || coverageChanged || this.dirty.has(entry) || this.pending.has(entry)) {
 						this.dirty.add(entry);
+						this.urgent.add(entry);
 						continue;
 					}
 					const pixels = /* @__PURE__ */ new Map([[source, next?.data ?? null]]);
@@ -442,12 +483,12 @@ var AmbientSampler = class {
 				}
 			}
 			for (const entry of recolored) this.changed(entry);
-			this.liveDelay = changed ? liveInterval : Math.min(2e3, this.liveDelay * 2);
+			this.liveDelay = changed ? liveInterval : Math.min(250, this.liveDelay * 2);
 			this.resume();
 		}, this.liveDelay);
 	}
 	samePixels(first, second, alphaOnly = false) {
-		for (let index = alphaOnly ? 3 : 0; index < first.data.length; index += alphaOnly ? 4 : 1) if (first.data[index] >> 3 !== second.data[index] >> 3) return false;
+		for (let index = alphaOnly ? 3 : 0; index < first.data.length; index += alphaOnly ? 4 : 1) if (alphaOnly ? first.data[index] >> 3 !== second.data[index] >> 3 : Math.abs(first.data[index] - second.data[index]) >= 2) return false;
 		return true;
 	}
 	readRaster(element, refresh = false) {
@@ -736,11 +777,46 @@ var AmbientSampler = class {
 			v = (y - bounds.top - offset(positionY, bounds.height - height * scale)) / (height * scale);
 			if (u < 0 || u > 1 || v < 0 || v > 1) return void 0;
 		}
-		const px = Math.max(0, Math.min(data.width - 1, Math.floor(u * data.width)));
-		const offset = (Math.max(0, Math.min(data.height - 1, Math.floor(v * data.height))) * data.width + px) * 4;
-		const alpha = data.data[offset + 3] / 255;
+		const px = Math.max(0, Math.min(data.width - 1, u * data.width - .5));
+		const py = Math.max(0, Math.min(data.height - 1, v * data.height - .5));
+		const left = Math.floor(px), top = Math.floor(py);
+		const right = Math.min(data.width - 1, left + 1), bottom = Math.min(data.height - 1, top + 1);
+		const taps = [
+			[
+				left,
+				top,
+				(1 - (px - left)) * (1 - (py - top))
+			],
+			[
+				right,
+				top,
+				(px - left) * (1 - (py - top))
+			],
+			[
+				left,
+				bottom,
+				(1 - (px - left)) * (py - top)
+			],
+			[
+				right,
+				bottom,
+				(px - left) * (py - top)
+			]
+		];
+		const channels = [
+			0,
+			0,
+			0
+		];
+		let alpha = 0;
+		for (const [x, y, weight] of taps) {
+			const offset = (y * data.width + x) * 4;
+			const coverage = data.data[offset + 3] / 255 * weight;
+			alpha += coverage;
+			for (let channel = 0; channel < 3; channel++) channels[channel] += data.data[offset + channel] * coverage;
+		}
 		if (alpha < .08) return void 0;
-		return `rgb(${data.data[offset]} ${data.data[offset + 1]} ${data.data[offset + 2]} / ${alpha.toFixed(2)})`;
+		return `rgb(${channels.map((channel) => Math.round(channel / alpha)).join(" ")} / ${alpha.toFixed(2)})`;
 	}
 	gradientColorAt(image, bounds, x, y) {
 		if (!image.includes("gradient(")) return void 0;
@@ -768,7 +844,10 @@ var AmbientSampler = class {
 			const v = (y - (bounds.top + bounds.height / 2)) / Math.max(1, bounds.height / 2);
 			amount = Math.max(0, Math.min(1, Math.hypot(u, v) / Math.SQRT2));
 		}
-		return colors[Math.min(colors.length - 1, Math.round(amount * (colors.length - 1)))];
+		const position = amount * (colors.length - 1);
+		const index = Math.min(colors.length - 1, Math.floor(position));
+		if (index === colors.length - 1 || position === index) return colors[index];
+		return `color-mix(in srgb, ${colors[index]} ${((1 - (position - index)) * 100).toFixed(2)}%, ${colors[index + 1]})`;
 	}
 	isTransparent(color) {
 		const value = color.trim().toLowerCase();
@@ -941,13 +1020,25 @@ var SceneRuntime = class {
 		this.refresh();
 	};
 	refresh = () => {
-		this.ambient.invalidate();
-		for (const entry of this.entries.values()) {
-			entry.bounds = void 0;
-			entry.lastLighting = void 0;
-			if (entry.visible) this.queue.add(entry);
+		this.refreshEntries([...this.entries.values()]);
+	};
+	scroll = (event) => {
+		const root = event.target;
+		if (root?.nodeType !== 1) {
+			this.refresh();
+			return;
 		}
-		this.schedule();
+		const area = root.getBoundingClientRect();
+		const nearby = [];
+		this.refreshEntries([...this.entries.values()].filter((entry) => {
+			if (!entry.visible) return false;
+			if (root.contains(entry.element)) return true;
+			const bounds = entry.bounds ??= entry.element.getBoundingClientRect();
+			if (bounds.right > area.left && bounds.left < area.right && bounds.bottom > area.top && bounds.top < area.bottom) return true;
+			if (bounds.right >= area.left - 160 && bounds.left <= area.right + 160 && bounds.bottom >= area.top - 160 && bounds.top <= area.bottom + 160) nearby.push(entry);
+			return false;
+		}));
+		this.ambient.invalidate(nearby);
 	};
 	constructor(doc) {
 		this.doc = doc;
@@ -965,11 +1056,11 @@ var SceneRuntime = class {
 			for (const record of records) {
 				const entry = this.entries.get(record.target);
 				if (!entry) continue;
+				if (record.isIntersecting && !entry.visible) entry.resuming = true;
 				entry.visible = record.isIntersecting;
-				this.ambient.invalidate(entry);
+				this.ambient.invalidate(entry, true);
 				if (entry.visible) {
 					entry.bounds = void 0;
-					entry.lastLighting = void 0;
 					this.queue.add(entry);
 				}
 			}
@@ -1058,7 +1149,7 @@ var SceneRuntime = class {
 		if (entry) this.updateSelected(entry);
 		this.updateEmitter();
 		if (entry) {
-			this.ambient.invalidate(entry);
+			this.ambient.invalidate(entry, true);
 			entry.bounds = void 0;
 			entry.lastLighting = void 0;
 			this.queue.add(entry);
@@ -1097,6 +1188,14 @@ var SceneRuntime = class {
 			}
 		};
 	}
+	refreshEntries(entries) {
+		this.ambient.invalidate(entries, true);
+		for (const entry of entries) {
+			entry.bounds = void 0;
+			if (entry.visible) this.queue.add(entry);
+		}
+		this.schedule();
+	}
 	isLightingDecoration(node) {
 		if (node.nodeType !== node.ELEMENT_NODE) return true;
 		const element = node;
@@ -1208,7 +1307,7 @@ var SceneRuntime = class {
 		this.doc.addEventListener("pointerleave", this.leave, { passive: true });
 		this.view.addEventListener("blur", this.blur);
 		this.view.addEventListener("resize", this.refresh, { passive: true });
-		this.doc.addEventListener("scroll", this.refresh, {
+		this.doc.addEventListener("scroll", this.scroll, {
 			passive: true,
 			capture: true
 		});
@@ -1243,7 +1342,7 @@ var SceneRuntime = class {
 		this.doc.removeEventListener("pointerleave", this.leave);
 		this.view.removeEventListener("blur", this.blur);
 		this.view.removeEventListener("resize", this.refresh);
-		this.doc.removeEventListener("scroll", this.refresh, true);
+		this.doc.removeEventListener("scroll", this.scroll, true);
 		this.doc.removeEventListener("load", this.assetLoad, true);
 		this.doc.removeEventListener("loadeddata", this.assetLoad, true);
 		this.doc.removeEventListener("play", this.assetLoad, true);
@@ -1279,7 +1378,13 @@ var SceneRuntime = class {
 				}, `hover:${emitter.id}`, true)
 			}));
 			const sceneData = /* @__PURE__ */ new Map();
-			const projections = batch.filter((entry) => entry.visible && entry.element.isConnected).map((entry) => {
+			const projections = batch.filter((entry) => {
+				if (!entry.visible || !entry.element.isConnected || entry.resuming && this.ambient.isPending(entry)) return false;
+				const bounds = entry.bounds ??= entry.element.getBoundingClientRect();
+				const visible = bounds.bottom > 0 && bounds.right > 0 && bounds.top < this.view.innerHeight && bounds.left < this.view.innerWidth;
+				if (!visible) entry.resuming = true;
+				return visible;
+			}).map((entry) => {
 				entry.bounds ??= entry.element.getBoundingClientRect();
 				const origin = lightingOrigin(entry.element);
 				let nearest;
@@ -1298,13 +1403,17 @@ var SceneRuntime = class {
 				for (const { emitter, light } of activeLights) if (this.scope(emitter.element) === this.scope(entry.element) && visibility.layer(lightingOrigin(emitter.element)) === visibility.layer(origin) && !emitter.element.contains(entry.element) && (!entry.element.contains(emitter.element) || entry.element.matches("[role=\"menu\"], [role=\"tablist\"]"))) lights.push(light);
 				lights.push(...this.ambient.lights(entry));
 				const reflections = (data?.reflections ?? []).filter((reflection) => visibility.boundary(reflection.source) === boundary);
-				return [entry, this.project(entry, lights, reflections, visibility)];
+				const lighting = this.project(entry, lights, reflections, visibility);
+				lighting.immediate = entry.resuming || !entry.painted;
+				entry.resuming = false;
+				return [entry, lighting];
 			});
 			for (const entry of batch) this.queue.delete(entry);
 			for (const { emitter, color, exposed } of emissions) emitter.hooks.emit?.(exposed, color);
 			for (const [entry, lighting] of projections) {
 				if (this.sameLighting(entry.lastLighting, lighting)) continue;
 				entry.lastLighting = lighting;
+				entry.painted = true;
 				const before = entry.element.getAttribute("style");
 				entry.hooks.light(lighting);
 				const after = entry.element.getAttribute("style");
@@ -1544,14 +1653,12 @@ function mountSurface(element, initial = {}) {
 	rim.className = "bx-glass-rim";
 	rim.setAttribute("aria-hidden", "true");
 	element.append(rim);
-	const environment = [doc.createElement("span"), doc.createElement("span")];
-	for (const node of environment) {
-		node.className = "bx-glass-contribution bx-glass-environment";
-		node.style.opacity = "0";
-		rim.append(node);
-	}
+	const environment = doc.createElement("span");
+	environment.className = "bx-glass-contribution bx-glass-environment";
+	rim.append(environment);
 	let environmentImage = "none";
-	let environmentIndex = 0;
+	const environmentLayers = /* @__PURE__ */ new Map();
+	const environmentColors = /* @__PURE__ */ new Map();
 	const ambient = doc.createElement("span");
 	ambient.className = "bx-glass-ambient";
 	decoration.append(light);
@@ -1703,16 +1810,30 @@ function mountSurface(element, initial = {}) {
 			element.style.setProperty("--bx-glass-lit-edge-bottom", edgeAt(50, 100));
 			element.style.setProperty("--bx-glass-lit-edge-left", edgeAt(0, 50));
 		}
-		const ambientImage = value.contributions.filter((contribution) => contribution.ambient).map((contribution) => `radial-gradient(circle ${contribution.spread}px at ${contribution.x.toFixed(2)}% ${contribution.y.toFixed(2)}%, color-mix(in srgb, ${contribution.color} ${(contribution.edgeStrength * 100).toFixed(2)}%, transparent), transparent 75%)`).join(", ") || "none";
+		const activeEnvironment = /* @__PURE__ */ new Set();
+		for (const contribution of value.contributions) {
+			if (!contribution.ambient) continue;
+			const slot = Number(contribution.key.split(":").pop());
+			if (!Number.isInteger(slot) || slot < 0 || slot >= 16) continue;
+			activeEnvironment.add(slot);
+			const property = `--bx-glass-environment-color-${slot}`;
+			const color = `color-mix(in srgb, ${contribution.color} ${(contribution.edgeStrength * 100).toFixed(2)}%, transparent)`;
+			if (environmentColors.get(slot) !== color) {
+				environment.style.setProperty(property, color);
+				environmentColors.set(slot, color);
+			}
+			environmentLayers.set(slot, `radial-gradient(circle ${contribution.spread}px at ${contribution.x.toFixed(2)}% ${contribution.y.toFixed(2)}%, var(${property}), transparent 75%)`);
+		}
+		for (const slot of environmentColors.keys()) if (!activeEnvironment.has(slot) && environmentColors.get(slot) !== "transparent") {
+			environment.style.setProperty(`--bx-glass-environment-color-${slot}`, "transparent");
+			environmentColors.set(slot, "transparent");
+		}
+		const ambientImage = [...environmentLayers.values()].join(", ") || "none";
 		if (ambientImage !== environmentImage) {
 			environmentImage = ambientImage;
-			const previous = environment[environmentIndex];
-			environmentIndex = 1 - environmentIndex;
-			const next = environment[environmentIndex];
-			next.style.backgroundImage = ambientImage;
-			next.style.opacity = "1";
-			previous.style.opacity = "0";
+			environment.style.backgroundImage = ambientImage;
 		}
+		if (value.immediate || reducedMotion) for (const animation of environment.getAnimations()) animation.finish();
 		const contributions = value.contributions.filter((contribution) => !contribution.ambient);
 		const active = new Set(contributions.map((contribution) => contribution.key));
 		for (const contribution of contributions) setLayer(contribution);