@blotch/angular-lynx 22.2.2 → 22.2.3

package/fesm2022/blotch-angular-lynx-web-glass-8MFrhPz0.mjs

@@ -0,0 +1,951 @@
+const BLUR_VIEW_LAYOUT_CSS = ":host{--lynx-display-toggle:var(--lynx-display-linear);--lynx-display-linear:var(--lynx-display-toggle,);--lynx-display-flex:var(--lynx-display-toggle,);--lynx-linear-orientation-toggle:var(--lynx-linear-orientation-vertical);--lynx-linear-orientation-horizontal:var(--lynx-linear-orientation-toggle,);--lynx-linear-orientation-vertical:var(--lynx-linear-orientation-toggle,);--lynx-linear-orientation-horizontal-reverse:var(--lynx-linear-orientation-toggle,);--lynx-linear-orientation-vertical-reverse:var(--lynx-linear-orientation-toggle,);--linear-flex-direction:var(--lynx-linear-orientation-horizontal,row) var(--lynx-linear-orientation-vertical,column) var(--lynx-linear-orientation-horizontal-reverse,row-reverse) var(--lynx-linear-orientation-vertical-reverse,column-reverse);--linear-justify-content:var(--lynx-linear-orientation-horizontal,var(--justify-content-row)) var(--lynx-linear-orientation-vertical,var(--justify-content-column)) var(--lynx-linear-orientation-horizontal-reverse,var(--justify-content-row-reverse)) var(--lynx-linear-orientation-vertical-reverse,var(--justify-content-column-reverse));flex-wrap:var(--lynx-display-linear,nowrap) var(--lynx-display-flex,var(--flex-wrap));flex-direction:var(--lynx-display-linear,var(--linear-flex-direction)) var(--lynx-display-flex,var(--flex-direction));justify-content:var(--lynx-display-linear,var(--linear-justify-content))}";
+const applyBlurViewLayout = (element) => {
+	const root = element.shadowRoot;
+	if (!root) return;
+	const style = element.ownerDocument.createElement("style");
+	style.textContent = BLUR_VIEW_LAYOUT_CSS;
+	root.appendChild(style);
+};
+const observeBackdrop = (backdrop, glass, onChange) => {
+	const win = backdrop.ownerDocument.defaultView;
+	const mutations = new win.MutationObserver((records) => {
+		if (records.some((record) => !glass.contains(record.target))) onChange();
+	});
+	mutations.observe(backdrop, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		characterData: true
+	});
+	const resizes = new win.ResizeObserver(onChange);
+	resizes.observe(backdrop);
+	backdrop.addEventListener("scroll", onChange, true);
+	backdrop.addEventListener("load", onChange, true);
+	const scheme = win.matchMedia("(prefers-color-scheme: dark)");
+	scheme.addEventListener("change", onChange);
+	backdrop.ownerDocument.fonts.ready.then(onChange);
+	return () => {
+		mutations.disconnect();
+		resizes.disconnect();
+		backdrop.removeEventListener("scroll", onChange, true);
+		backdrop.removeEventListener("load", onChange, true);
+		scheme.removeEventListener("change", onChange);
+	};
+};
+const TRANSPARENT = [
+	0,
+	0,
+	0,
+	0
+];
+const RGB_FUNCTION = /^rgba?\(([^)]*)\)$/;
+const HEX = /^#([0-9a-f]{6})$/i;
+const parseNormalizedColor = (value) => {
+	const hex = HEX.exec(value);
+	if (hex) {
+		const n = parseInt(hex[1], 16);
+		return [
+			(n >> 16) / 255,
+			(n >> 8 & 255) / 255,
+			(n & 255) / 255,
+			1
+		];
+	}
+	const fn = RGB_FUNCTION.exec(value.trim());
+	if (!fn) return TRANSPARENT;
+	const parts = fn[1].split(/[\s,/]+/).filter(Boolean).map(Number);
+	if (parts.length < 3 || parts.some(Number.isNaN)) return TRANSPARENT;
+	const [r, g, b, a = 1] = parts;
+	return [
+		r / 255,
+		g / 255,
+		b / 255,
+		a
+	];
+};
+const cache = /* @__PURE__ */ new Map();
+let context;
+const resolveCssColor = (doc, value) => {
+	if (!value) return TRANSPARENT;
+	const cached = cache.get(value);
+	if (cached) return cached;
+	context ??= doc.createElement("canvas").getContext("2d");
+	if (!context) return TRANSPARENT;
+	const sentinel = "rgba(1, 2, 3, 0.5)";
+	context.fillStyle = sentinel;
+	context.fillStyle = value;
+	const normalized = String(context.fillStyle);
+	const color = normalized === sentinel ? TRANSPARENT : parseNormalizedColor(normalized);
+	cache.set(value, color);
+	return color;
+};
+const luminance = ([r, g, b]) => .2126 * r + .7152 * g + .0722 * b;
+const drawnScale = (element) => {
+	const drawn = element.getBoundingClientRect().width;
+	const laidOut = element.offsetWidth;
+	if (!laidOut || Math.abs(drawn - laidOut) < 1) return 1;
+	return drawn / laidOut;
+};
+const SKIPPED_PROPERTY = /^(--|transition|animation|will-change|cursor|pointer-events|user-select|-webkit-user-)/;
+const ALWAYS_INLINED = /^(border-(top|right|bottom|left)-width|outline-width|column-rule-width)$/;
+const SKIPPED_TAGS = /* @__PURE__ */ new Set([
+	"style",
+	"script",
+	"template",
+	"link",
+	"meta"
+]);
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+const defaultsByDocument = /* @__PURE__ */ new WeakMap();
+const defaultStyle = (doc, win) => {
+	let defaults = defaultsByDocument.get(doc);
+	if (!defaults) {
+		const probe = doc.createElement("div");
+		doc.documentElement.appendChild(probe);
+		const style = win.getComputedStyle(probe);
+		defaults = new Map(Array.from(style, (name) => [name, style.getPropertyValue(name)]));
+		probe.remove();
+		defaultsByDocument.set(doc, defaults);
+	}
+	return defaults;
+};
+const inlineStyle = (style, parent, defaults) => {
+	let css = "";
+	for (const name of Array.from(style)) {
+		if (SKIPPED_PROPERTY.test(name)) continue;
+		const value = style.getPropertyValue(name);
+		if (ALWAYS_INLINED.test(name) || value !== defaults.get(name) || parent && value !== parent.getPropertyValue(name)) css += `${name}:${value};`;
+	}
+	return css;
+};
+const renderedChildren = (element) => Array.from(element.shadowRoot?.childNodes ?? element.childNodes).flatMap((child) => child.localName === "slot" ? child.assignedNodes({ flatten: true }) : [child]);
+const scrollShift = (style, [x, y]) => {
+	if (!x && !y) return "";
+	if (style.position === "fixed" || style.position === "sticky") return "";
+	if (style.position === "static") return `position:relative;left:${-x}px;top:${-y}px;`;
+	return `left:${(parseFloat(style.left) || 0) - x}px;top:${(parseFloat(style.top) || 0) - y}px;`;
+};
+const mediaSource = (element, doc) => {
+	try {
+		if (element.localName === "canvas") return element.toDataURL();
+		const image = element;
+		if (!image.complete || !image.naturalWidth) return "";
+		const canvas = doc.createElement("canvas");
+		canvas.width = image.naturalWidth;
+		canvas.height = image.naturalHeight;
+		canvas.getContext("2d").drawImage(image, 0, 0);
+		return canvas.toDataURL();
+	} catch {
+		return "";
+	}
+};
+const outside = (rect, region) => rect.right <= region.left || rect.left >= region.right || rect.bottom <= region.top || rect.top >= region.bottom;
+const cloneNode = (node, context, parent, scroll) => {
+	if (node.nodeType === TEXT_NODE) return context.doc.createTextNode(node.data);
+	if (node.nodeType !== ELEMENT_NODE) return null;
+	const element = node;
+	if (SKIPPED_TAGS.has(element.localName) || context.exclude(element)) return null;
+	const style = context.win.getComputedStyle(element);
+	if (style.display === "none") return null;
+	const media = element.localName === "img" || element.localName === "canvas";
+	const clone = context.doc.createElement(media ? "img" : "div");
+	clone.setAttribute("style", inlineStyle(style, parent, context.defaults) + scrollShift(style, scroll));
+	if (media) {
+		const source = mediaSource(element, context.doc);
+		if (source) clone.setAttribute("src", source);
+		return clone;
+	}
+	if ((style.overflowX !== "visible" || style.overflowY !== "visible") && outside(element.getBoundingClientRect(), context.region)) return clone;
+	const childScroll = [element.scrollLeft, element.scrollTop];
+	for (const child of renderedChildren(element)) {
+		const copy = cloneNode(child, context, style, childScroll);
+		if (copy) clone.appendChild(copy);
+	}
+	return clone;
+};
+const effectiveBackground = (element) => {
+	const win = element.ownerDocument.defaultView;
+	let node = element;
+	while (node) {
+		const color = parseNormalizedColor(win.getComputedStyle(node).backgroundColor);
+		if (color[3] > 0) return color;
+		node = node.parentElement ?? node.getRootNode().host ?? null;
+	}
+	return [
+		1,
+		1,
+		1,
+		1
+	];
+};
+const cloneBackdrop = (root, options) => {
+	const doc = root.ownerDocument;
+	const win = doc.defaultView;
+	const bounds = root.getBoundingClientRect();
+	const zoom = drawnScale(root);
+	const width = bounds.width / zoom;
+	const height = bounds.height / zoom;
+	const [r, g, b, a] = effectiveBackground(root);
+	const frame = doc.createElement("div");
+	frame.setAttribute("style", `width:${Math.ceil(width)}px;height:${Math.ceil(height)}px;overflow:hidden;background:rgba(${r * 255},${g * 255},${b * 255},${a});`);
+	const context = {
+		...options,
+		doc,
+		win,
+		defaults: defaultStyle(doc, win)
+	};
+	const clone = cloneNode(root, context, null, [0, 0]);
+	if (clone) {
+		clone.style.cssText += `margin:0;position:relative;left:0;top:0;right:auto;bottom:auto;transform:none;width:${width}px;height:${height}px;`;
+		frame.appendChild(clone);
+	}
+	return frame;
+};
+const MAX_IMAGE_SIZE = 4096;
+const snapshotBackdrop = async (root, options) => {
+	const doc = root.ownerDocument;
+	const win = doc.defaultView;
+	const bounds = root.getBoundingClientRect();
+	const left = Math.max(options.region.left, bounds.left);
+	const top = Math.max(options.region.top, bounds.top);
+	const right = Math.min(options.region.right, bounds.right);
+	const bottom = Math.min(options.region.bottom, bounds.bottom);
+	if (right <= left || bottom <= top) return null;
+	const zoom = drawnScale(root);
+	const x = (left - bounds.left) / zoom;
+	const y = (top - bounds.top) / zoom;
+	const width = (right - left) / zoom;
+	const height = (bottom - top) / zoom;
+	const scale = Math.min(options.scale, MAX_IMAGE_SIZE / Math.max(width, height));
+	const markup = new win.XMLSerializer().serializeToString(cloneBackdrop(root, options));
+	const pixelWidth = Math.max(1, Math.round(width * scale));
+	const pixelHeight = Math.max(1, Math.round(height * scale));
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${pixelWidth}" height="${pixelHeight}" viewBox="${x} ${y} ${width} ${height}" preserveAspectRatio="none"><foreignObject width="${Math.ceil(bounds.width / zoom)}" height="${Math.ceil(bounds.height / zoom)}">${markup}</foreignObject></svg>`;
+	const picture = new win.Image();
+	picture.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+	await picture.decode();
+	const image = doc.createElement("canvas");
+	image.width = pixelWidth;
+	image.height = pixelHeight;
+	image.getContext("2d").drawImage(picture, 0, 0, pixelWidth, pixelHeight);
+	return {
+		image,
+		x,
+		y,
+		width,
+		height,
+		luminance: luminance(effectiveBackground(root))
+	};
+};
+const QUAD_VERTEX_SHADER = `
+attribute vec2 a_position;
+varying vec2 v_uv;
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+const COPY_FRAGMENT_SHADER = `
+precision mediump float;
+varying vec2 v_uv;
+uniform sampler2D u_source;
+void main() {
+  gl_FragColor = texture2D(u_source, v_uv);
+}`;
+const BLUR_FRAGMENT_SHADER = `
+precision mediump float;
+varying vec2 v_uv;
+uniform sampler2D u_source;
+uniform vec2 u_direction;
+void main() {
+  vec2 near = u_direction * 1.3846153846;
+  vec2 far = u_direction * 3.2307692308;
+  gl_FragColor = texture2D(u_source, v_uv) * 0.2270270270
+    + (texture2D(u_source, v_uv + near) + texture2D(u_source, v_uv - near)) * 0.3162162162
+    + (texture2D(u_source, v_uv + far) + texture2D(u_source, v_uv - far)) * 0.0702702703;
+}`;
+const GLASS_FRAGMENT_SHADER = `
+precision highp float;
+#define MAX_SHAPES 16
+varying vec2 v_uv;
+uniform sampler2D u_backdrop;
+uniform sampler2D u_frosted;
+uniform vec2 u_size;
+uniform vec2 u_offset;
+uniform vec2 u_backdropSize;
+uniform float u_scale;
+uniform float u_smoothing;
+uniform float u_dark;
+uniform float u_shadow;
+uniform int u_count;
+uniform vec4 u_bounds[MAX_SHAPES];
+uniform vec4 u_material[MAX_SHAPES];
+uniform vec4 u_tint[MAX_SHAPES];
+uniform vec3 u_pointer;
+
+float roundedBox(vec2 p, vec2 halfSize, float radius) {
+  vec2 q = abs(p) - halfSize + radius;
+  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
+}
+
+float smoothUnion(float a, float b, float k) {
+  if (k <= 0.0) return min(a, b);
+  float h = max(k - abs(a - b), 0.0) / k;
+  return min(a, b) - h * h * k * 0.25;
+}
+
+float scene(vec2 p) {
+  float d = 1e5;
+  for (int i = 0; i < MAX_SHAPES; i++) {
+    if (i >= u_count) break;
+    d = smoothUnion(d, roundedBox(p - u_bounds[i].xy, u_bounds[i].zw, u_material[i].x), u_smoothing);
+  }
+  return d;
+}
+
+void main() {
+  vec2 p = vec2(v_uv.x, 1.0 - v_uv.y) * u_size;
+
+  // Union the shapes, and blend each shape's material by how close it is, so
+  // a merged bridge between two tints shades from one to the other.
+  float d = 1e5;
+  float weights = 0.0;
+  float frost = 0.0;
+  float lens = 0.0;
+  vec4 tint = vec4(0.0);
+  for (int i = 0; i < MAX_SHAPES; i++) {
+    if (i >= u_count) break;
+    float di = roundedBox(p - u_bounds[i].xy, u_bounds[i].zw, u_material[i].x);
+    d = smoothUnion(d, di, u_smoothing);
+    float w = exp(-max(di, 0.0) / max(u_smoothing * 0.3, 1.0)) + 1e-6;
+    weights += w;
+    frost += u_material[i].y * w;
+    lens += min(u_bounds[i].z, u_bounds[i].w) * w;
+    tint += u_tint[i] * w;
+  }
+  frost /= weights;
+  lens = max(lens / weights, 1.0);
+  tint /= weights;
+
+  // One device pixel of anti-aliasing at the edge.
+  float coverage = clamp(0.5 - d * u_scale, 0.0, 1.0);
+  // A container can hug its shapes, so the shadow fades out before the canvas
+  // edge rather than stopping at it in a hard line.
+  vec2 inside = min(p, u_size - p);
+  float shadow = u_shadow * 0.1 * exp(-max(d, 0.0) / 6.0)
+    * smoothstep(0.0, 12.0, min(inside.x, inside.y));
+  if (coverage <= 0.0) {
+    gl_FragColor = vec4(0.0, 0.0, 0.0, d < 24.0 ? shadow : 0.0);
+    return;
+  }
+
+  vec2 e = vec2(0.5, 0.0);
+  vec2 gradient = vec2(
+    scene(p + e.xy) - scene(p - e.xy),
+    scene(p + e.yx) - scene(p - e.yx));
+  float slope = length(gradient);
+  vec2 normal = slope > 0.0 ? gradient / slope : vec2(0.0);
+  gradient = normal * min(slope, 1.0);
+
+  float depth = max(-d, 0.0);
+  float rim = pow(1.0 - clamp(depth / lens, 0.0, 1.0), 3.0);
+  vec2 offset = gradient * (lens * 0.45 * rim - max(lens - depth, 0.0) * 0.05);
+  vec2 base = p + u_offset;
+  vec2 uv = (base + offset) / u_backdropSize;
+
+  // A touch of dispersion: red bends a little more than blue.
+  vec3 sharp = vec3(
+    texture2D(u_backdrop, (base + offset * 1.035) / u_backdropSize).r,
+    texture2D(u_backdrop, uv).g,
+    texture2D(u_backdrop, (base + offset * 0.965) / u_backdropSize).b);
+  vec3 color = mix(sharp, texture2D(u_frosted, uv).rgb, frost);
+
+  float brightness = dot(color, vec3(0.2126, 0.7152, 0.0722));
+  color = mix(vec3(brightness), color, 1.0 + 0.3 * frost);
+  color = mix(color, mix(vec3(1.0), vec3(0.12), u_dark), frost * mix(0.22, 0.34, u_dark));
+  color *= 1.0 - 0.08 * u_dark * (1.0 - frost);
+  color = mix(color, tint.rgb, tint.a);
+
+  vec2 light = normalize(vec2(-0.6, -0.8));
+  float facing = dot(normal, light);
+  color += (1.0 - smoothstep(0.0, 1.5, depth)) * (0.22 + 0.58 * pow(abs(facing), 1.5)) * mix(0.75, 0.5, u_dark);
+  color += (1.0 - smoothstep(0.0, lens * 0.5, depth)) * max(facing, 0.0) * 0.16;
+  color += (1.0 - smoothstep(0.0, lens * 0.35, depth)) * max(-facing, 0.0) * 0.07;
+
+  float reach = length(p - u_pointer.xy);
+  color += u_pointer.z * 0.2 * exp(-reach * reach / (1.2 * lens * lens));
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0) * coverage, coverage + shadow * (1.0 - coverage));
+}`;
+const compile = (gl, fragmentSource) => {
+	const program = gl.createProgram();
+	for (const [type, source] of [[gl.VERTEX_SHADER, QUAD_VERTEX_SHADER], [gl.FRAGMENT_SHADER, fragmentSource]]) {
+		const shader = gl.createShader(type);
+		gl.shaderSource(shader, source);
+		gl.compileShader(shader);
+		gl.attachShader(program, shader);
+	}
+	gl.bindAttribLocation(program, 0, "a_position");
+	gl.linkProgram(program);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return null;
+	const locations = /* @__PURE__ */ new Map();
+	const uniform = (name) => {
+		if (!locations.has(name)) locations.set(name, gl.getUniformLocation(program, name));
+		return locations.get(name);
+	};
+	return {
+		program,
+		uniform
+	};
+};
+const createTexture = (gl) => {
+	const texture = gl.createTexture();
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	return texture;
+};
+const createTarget = (gl, width, height) => {
+	const texture = createTexture(gl);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+	const framebuffer = gl.createFramebuffer();
+	gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+	gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+	return {
+		texture,
+		framebuffer
+	};
+};
+const FROST_DOWNSAMPLE = 4;
+const FROST_PASSES = 3;
+var GlassRenderer = class GlassRenderer {
+	#gl;
+	#copy;
+	#blur;
+	#glass;
+	#quad;
+	#backdrop = null;
+	#frosted = null;
+	#frostedSize = "";
+	#backdropWidth = 1;
+	#backdropHeight = 1;
+	constructor(gl, copy, blur, glass) {
+		this.#gl = gl;
+		this.#copy = copy;
+		this.#blur = blur;
+		this.#glass = glass;
+		this.#quad = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.#quad);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			1,
+			-1,
+			-1,
+			1,
+			1,
+			1
+		]), gl.STATIC_DRAW);
+		gl.enableVertexAttribArray(0);
+		gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+	}
+	static create(canvas) {
+		const gl = canvas.getContext("webgl", {
+			alpha: true,
+			premultipliedAlpha: true,
+			antialias: false,
+			depth: false,
+			stencil: false
+		});
+		if (!gl) return null;
+		const copy = compile(gl, COPY_FRAGMENT_SHADER);
+		const blur = compile(gl, BLUR_FRAGMENT_SHADER);
+		const glass = compile(gl, GLASS_FRAGMENT_SHADER);
+		if (!copy || !blur || !glass) return null;
+		return new GlassRenderer(gl, copy, blur, glass);
+	}
+	get lost() {
+		return this.#gl.isContextLost();
+	}
+	setBackdrop(image, width, height) {
+		const gl = this.#gl;
+		this.#backdropWidth = width;
+		this.#backdropHeight = height;
+		this.#backdrop ??= createTexture(gl);
+		gl.bindTexture(gl.TEXTURE_2D, this.#backdrop);
+		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+		const w = Math.max(1, Math.round(image.width / FROST_DOWNSAMPLE));
+		const h = Math.max(1, Math.round(image.height / FROST_DOWNSAMPLE));
+		if (this.#frostedSize !== `${w}x${h}`) {
+			this.#deleteFrosted();
+			this.#frosted = [createTarget(gl, w, h), createTarget(gl, w, h)];
+			this.#frostedSize = `${w}x${h}`;
+		}
+		const [a, b] = this.#frosted;
+		gl.viewport(0, 0, w, h);
+		this.#pass(this.#copy, this.#backdrop, a);
+		for (let i = 0; i < FROST_PASSES; i++) {
+			this.#pass(this.#blur, a.texture, b, [1 / w, 0]);
+			this.#pass(this.#blur, b.texture, a, [0, 1 / h]);
+		}
+		gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+	}
+	draw(frame) {
+		const gl = this.#gl;
+		const { uniform } = this.#glass;
+		gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+		gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+		gl.clearColor(0, 0, 0, 0);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+		if (!this.#backdrop) return;
+		gl.useProgram(this.#glass.program);
+		gl.activeTexture(gl.TEXTURE1);
+		gl.bindTexture(gl.TEXTURE_2D, this.#frosted[0].texture);
+		gl.uniform1i(uniform("u_frosted"), 1);
+		gl.activeTexture(gl.TEXTURE0);
+		gl.bindTexture(gl.TEXTURE_2D, this.#backdrop);
+		gl.uniform1i(uniform("u_backdrop"), 0);
+		gl.uniform2f(uniform("u_size"), frame.width, frame.height);
+		gl.uniform2f(uniform("u_offset"), frame.offsetX, frame.offsetY);
+		gl.uniform2f(uniform("u_backdropSize"), this.#backdropWidth, this.#backdropHeight);
+		gl.uniform1f(uniform("u_scale"), frame.scale);
+		gl.uniform1f(uniform("u_smoothing"), frame.smoothing);
+		gl.uniform1f(uniform("u_dark"), frame.dark);
+		gl.uniform1f(uniform("u_shadow"), frame.shadow);
+		gl.uniform3f(uniform("u_pointer"), ...frame.pointer);
+		const shapes = frame.shapes.slice(0, 16);
+		const bounds = /* @__PURE__ */ new Float32Array(64);
+		const material = /* @__PURE__ */ new Float32Array(64);
+		const tint = /* @__PURE__ */ new Float32Array(64);
+		shapes.forEach((shape, i) => {
+			bounds.set([
+				shape.centerX,
+				shape.centerY,
+				shape.halfWidth,
+				shape.halfHeight
+			], i * 4);
+			material.set([
+				shape.radius,
+				shape.frost,
+				0,
+				0
+			], i * 4);
+			tint.set(shape.tint, i * 4);
+		});
+		gl.uniform1i(uniform("u_count"), shapes.length);
+		gl.uniform4fv(uniform("u_bounds"), bounds);
+		gl.uniform4fv(uniform("u_material"), material);
+		gl.uniform4fv(uniform("u_tint"), tint);
+		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+	}
+	dispose() {
+		const gl = this.#gl;
+		this.#deleteFrosted();
+		gl.deleteTexture(this.#backdrop);
+		gl.deleteBuffer(this.#quad);
+		for (const { program } of [
+			this.#copy,
+			this.#blur,
+			this.#glass
+		]) gl.deleteProgram(program);
+		gl.getExtension("WEBGL_lose_context")?.loseContext();
+	}
+	#pass(program, source, target, direction) {
+		const gl = this.#gl;
+		gl.useProgram(program.program);
+		gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
+		gl.activeTexture(gl.TEXTURE0);
+		gl.bindTexture(gl.TEXTURE_2D, source);
+		gl.uniform1i(program.uniform("u_source"), 0);
+		if (direction) gl.uniform2f(program.uniform("u_direction"), ...direction);
+		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+	}
+	#deleteFrosted() {
+		for (const target of this.#frosted ?? []) {
+			this.#gl.deleteTexture(target.texture);
+			this.#gl.deleteFramebuffer(target.framebuffer);
+		}
+		this.#frosted = null;
+	}
+};
+const presses = /* @__PURE__ */ new WeakMap();
+const PRESS_IN_MS = 70;
+const PRESS_OUT_MS = 180;
+const trackPress = (element) => {
+	const state = {
+		target: 0,
+		value: 0,
+		x: 0,
+		y: 0
+	};
+	presses.set(element, state);
+	const follow = (event) => {
+		state.x = event.clientX;
+		state.y = event.clientY;
+	};
+	const release = () => {
+		state.target = 0;
+	};
+	const options = { passive: true };
+	element.addEventListener("pointerdown", (event) => {
+		if (!element.hasAttribute("glass-interactive")) return;
+		state.target = 1;
+		follow(event);
+	}, options);
+	element.addEventListener("pointermove", (event) => {
+		if (state.target) follow(event);
+	}, options);
+	for (const type of [
+		"pointerup",
+		"pointercancel",
+		"pointerleave"
+	]) element.addEventListener(type, release, options);
+};
+const pressOf = (element) => presses.get(element);
+const stepPress = (state, elapsed) => {
+	const time = state.target ? PRESS_IN_MS : PRESS_OUT_MS;
+	const next = state.target + (state.value - state.target) * Math.exp(-elapsed / time);
+	state.value = Math.abs(next - state.target) < .001 ? state.target : next;
+	return state.value;
+};
+const glassRole = (element) => {
+	const effect = element.getAttribute("blur-effect");
+	if (effect === "glass-container") return "container";
+	if (effect !== "glass") return null;
+	return element.parentElement?.getAttribute("blur-effect") === "glass-container" ? "member" : "standalone";
+};
+const containerShapes = (container) => Array.from(container.children).filter((child) => child.getAttribute("blur-effect") === "glass");
+const cornerRadius = (value, width, height) => {
+	const shorter = Math.min(width, height);
+	const radius = value.endsWith("%") ? parseFloat(value) / 100 * shorter : parseFloat(value) || 0;
+	return Math.min(radius, shorter / 2);
+};
+const PRESS_GROWTH = .06;
+const readShape = (element, origin, zoom, elapsed, grow) => {
+	const box = element.getBoundingClientRect();
+	const left = (box.left - origin.left) / zoom;
+	const top = (box.top - origin.top) / zoom;
+	const width = box.width / zoom;
+	const height = box.height / zoom;
+	const style = element.ownerDocument.defaultView.getComputedStyle(element);
+	const press = pressOf(element);
+	const pressed = press ? stepPress(press, elapsed) : 0;
+	const swell = grow ? 1 + PRESS_GROWTH * pressed : 1;
+	return {
+		centerX: left + width / 2,
+		centerY: top + height / 2,
+		halfWidth: width / 2 * swell,
+		halfHeight: height / 2 * swell,
+		radius: cornerRadius(style.borderTopLeftRadius, width, height) * swell,
+		frost: element.getAttribute("glass-style") === "clear" ? 0 : 1,
+		tint: resolveCssColor(element.ownerDocument, element.getAttribute("glass-tint-color")),
+		press: pressed
+	};
+};
+const CAPTURE_MARGIN = 48;
+const MIN_CAPTURE_INTERVAL = 100;
+const MAX_SCALE = 2;
+const DARK_LUMINANCE = .4;
+var GlassGroup = class {
+	root;
+	container;
+	#win;
+	#canvas;
+	#renderer;
+	#backdrop;
+	#stopObserving = null;
+	#snapshot = null;
+	#stale = true;
+	#capturing = false;
+	#failed = false;
+	#disposed = false;
+	#nextCapture = 0;
+	#drawn = "";
+	constructor(root, container) {
+		this.root = root;
+		this.container = container;
+		const doc = root.ownerDocument;
+		this.#win = doc.defaultView;
+		this.#canvas = doc.createElement("canvas");
+		this.#canvas.setAttribute("aria-hidden", "true");
+		this.#canvas.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:0;transition:opacity 0.2s";
+		const shadow = root.shadowRoot;
+		shadow?.insertBefore(this.#canvas, shadow.querySelector("slot"));
+		this.#renderer = shadow ? GlassRenderer.create(this.#canvas) : null;
+		this.#backdrop = root.parentElement;
+		if (this.#renderer && this.#backdrop) this.#stopObserving = observeBackdrop(this.#backdrop, root, () => {
+			this.#stale = true;
+		});
+	}
+	get shapes() {
+		return this.container ? containerShapes(this.root) : [this.root];
+	}
+	get active() {
+		return this.#drawn !== "" && !this.#failed;
+	}
+	get lost() {
+		return this.#renderer?.lost ?? false;
+	}
+	frame(elapsed) {
+		const renderer = this.#renderer;
+		const backdrop = this.#backdrop;
+		if (!renderer || !backdrop || this.#failed) return;
+		const origin = this.#canvas.getBoundingClientRect();
+		const area = backdrop.getBoundingClientRect();
+		const zoom = drawnScale(backdrop);
+		if (this.#needsCapture(origin, area, zoom)) this.#capture(backdrop, origin, zoom);
+		const snapshot = this.#snapshot;
+		if (!snapshot) return;
+		const scale = Math.min(this.#win.devicePixelRatio || 1, MAX_SCALE) * zoom;
+		const elements = this.shapes;
+		const shapes = elements.map((element) => readShape(element, origin, zoom, elapsed, this.container));
+		let pointer = [
+			0,
+			0,
+			0
+		];
+		elements.forEach((element, i) => {
+			const value = shapes[i].press;
+			if (value > pointer[2]) {
+				const { x, y } = pressOf(element);
+				pointer = [
+					(x - origin.left) / zoom,
+					(y - origin.top) / zoom,
+					value
+				];
+			}
+		});
+		const spacing = parseFloat(this.root.getAttribute("spacing") ?? "") || 0;
+		const frame = {
+			scale,
+			width: origin.width / zoom,
+			height: origin.height / zoom,
+			offsetX: (origin.left - area.left) / zoom - snapshot.x,
+			offsetY: (origin.top - area.top) / zoom - snapshot.y,
+			smoothing: this.container ? spacing * 2 : 0,
+			dark: this.#dark(snapshot),
+			shadow: this.container ? 1 : 0,
+			shapes,
+			pointer
+		};
+		const key = JSON.stringify(frame);
+		if (key === this.#drawn) return;
+		const width = Math.max(1, Math.round(frame.width * scale));
+		const height = Math.max(1, Math.round(frame.height * scale));
+		if (this.#canvas.width !== width) this.#canvas.width = width;
+		if (this.#canvas.height !== height) this.#canvas.height = height;
+		renderer.draw(frame);
+		this.#drawn = key;
+		this.#canvas.style.opacity = "1";
+	}
+	dispose() {
+		this.#disposed = true;
+		this.#stopObserving?.();
+		this.#renderer?.dispose();
+		this.#canvas.remove();
+	}
+	#dark(snapshot) {
+		const forced = this.root.getAttribute("ios-user-interface-style");
+		if (forced) return forced === "dark" ? 1 : 0;
+		return snapshot.luminance < DARK_LUMINANCE ? 1 : 0;
+	}
+	#needsCapture(origin, area, zoom) {
+		if (this.#capturing) return false;
+		const snapshot = this.#snapshot;
+		if (snapshot) {
+			const left = (Math.max(origin.left, area.left) - area.left) / zoom;
+			const top = (Math.max(origin.top, area.top) - area.top) / zoom;
+			const right = (Math.min(origin.right, area.right) - area.left) / zoom;
+			const bottom = (Math.min(origin.bottom, area.bottom) - area.top) / zoom;
+			if (left < snapshot.x - 1 || top < snapshot.y - 1 || right > snapshot.x + snapshot.width + 1 || bottom > snapshot.y + snapshot.height + 1) this.#stale = true;
+		}
+		return this.#stale && this.#win.performance.now() >= this.#nextCapture;
+	}
+	#capture(backdrop, origin, zoom) {
+		const win = this.#win;
+		this.#capturing = true;
+		this.#stale = false;
+		const started = win.performance.now();
+		const above = /* @__PURE__ */ new Set();
+		for (let node = this.root; node; node = node.nextElementSibling) above.add(node);
+		const margin = CAPTURE_MARGIN * zoom;
+		snapshotBackdrop(backdrop, {
+			exclude: (element) => above.has(element),
+			region: {
+				left: origin.left - margin,
+				top: origin.top - margin,
+				right: origin.right + margin,
+				bottom: origin.bottom + margin
+			},
+			scale: Math.min(win.devicePixelRatio || 1, MAX_SCALE) * zoom
+		}).then((snapshot) => {
+			if (this.#disposed || !snapshot) return;
+			this.#renderer.setBackdrop(snapshot.image, snapshot.width, snapshot.height);
+			this.#snapshot = snapshot;
+			this.#drawn = "";
+		}).catch(() => {
+			this.#failed = true;
+		}).finally(() => {
+			this.#capturing = false;
+			const now = win.performance.now();
+			this.#nextCapture = now + Math.max(MIN_CAPTURE_INTERVAL, (now - started) * 4);
+		});
+	}
+};
+const styles = /* @__PURE__ */ new WeakMap();
+const DEFAULT_FALLBACK_BLUR = 12;
+const fallbackGlassCss = (element) => {
+	const clear = element.getAttribute("glass-style") === "clear";
+	const filter = `blur(${parseFloat(element.getAttribute("blur-radius") ?? "") || (clear ? DEFAULT_FALLBACK_BLUR / 3 : DEFAULT_FALLBACK_BLUR)}px) saturate(${clear ? 140 : 180}%)`;
+	return `:host{backdrop-filter:${filter};-webkit-backdrop-filter:${filter};background-color:${element.getAttribute("glass-tint-color") || `rgba(255, 255, 255, ${clear ? .04 : .18})`};box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.25)}`;
+};
+const materialCss = (element) => {
+	const effect = element.getAttribute("blur-effect") ?? "light";
+	const radius = parseFloat(element.getAttribute("blur-radius") ?? "");
+	if (!radius || effect === "glass" || effect === "glass-container") return "";
+	if (effect === "extra-light") return ":host{background-color:rgba(255, 255, 255, 0.75)}";
+	if (effect === "dark") return ":host{background-color:rgba(0, 0, 0, 0.6)}";
+	const filter = `blur(${radius}px) brightness(1.35)`;
+	return `:host{backdrop-filter:${filter};-webkit-backdrop-filter:${filter}}`;
+};
+const hostStyleCss = (element, state) => [
+	materialCss(element),
+	state.hostsCanvas ? ":host{isolation:isolate}" : "",
+	state.rendered ? ":host{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}" : "",
+	state.fallback ? fallbackGlassCss(element) : ""
+].join("");
+const applyHostStyle = (element, state) => {
+	const root = element.shadowRoot;
+	if (!root) return;
+	const css = hostStyleCss(element, state);
+	let style = styles.get(element);
+	if (!style) {
+		if (!css) return;
+		style = element.ownerDocument.createElement("style");
+		styles.set(element, style);
+	}
+	if (style.parentNode !== root) root.appendChild(style);
+	if (style.textContent !== css) style.textContent = css;
+};
+const GLASS_ATTRIBUTES = [
+	"blur-effect",
+	"blur-radius",
+	"glass-style",
+	"glass-tint-color",
+	"glass-interactive",
+	"spacing",
+	"ios-user-interface-style"
+];
+const DETACHED_POLL_MS = 1e3;
+const MAX_ELAPSED_MS = 100;
+const managers = /* @__PURE__ */ new WeakMap();
+var GlassManager = class GlassManager {
+	#win;
+	#visible = /* @__PURE__ */ new Set();
+	#groups = /* @__PURE__ */ new Map();
+	#detached = /* @__PURE__ */ new Set();
+	#intersection;
+	#attributes;
+	#frame = 0;
+	#poll = 0;
+	#last = 0;
+	constructor(win) {
+		this.#win = win;
+		this.#intersection = new win.IntersectionObserver((entries) => this.#onIntersection(entries));
+		this.#attributes = new win.MutationObserver(() => this.#wake());
+	}
+	static for(win) {
+		let manager = managers.get(win);
+		if (!manager) {
+			manager = new GlassManager(win);
+			managers.set(win, manager);
+		}
+		return manager;
+	}
+	register(element) {
+		this.#intersection.observe(element);
+		this.#attributes.observe(element, {
+			attributes: true,
+			attributeFilter: GLASS_ATTRIBUTES
+		});
+		trackPress(element);
+	}
+	#onIntersection(entries) {
+		for (const { target, isIntersecting } of entries) {
+			const element = target;
+			if (isIntersecting) {
+				this.#visible.add(element);
+				continue;
+			}
+			this.#visible.delete(element);
+			if (!element.isConnected) {
+				this.#intersection.unobserve(element);
+				this.#detached.add(new WeakRef(element));
+				if (!this.#poll) this.#poll = this.#win.setInterval(() => this.#checkDetached(), DETACHED_POLL_MS);
+			}
+		}
+		this.#wake();
+	}
+	#checkDetached() {
+		for (const ref of this.#detached) {
+			const element = ref.deref();
+			if (element && !element.isConnected) continue;
+			if (element) this.#intersection.observe(element);
+			this.#detached.delete(ref);
+		}
+		if (!this.#detached.size) {
+			this.#win.clearInterval(this.#poll);
+			this.#poll = 0;
+		}
+	}
+	#wake() {
+		if (this.#frame) return;
+		this.#frame = this.#win.requestAnimationFrame((now) => this.#tick(now));
+	}
+	#tick(now) {
+		this.#frame = 0;
+		const elapsed = this.#last ? Math.min(now - this.#last, MAX_ELAPSED_MS) : 0;
+		this.#last = now;
+		const roots = /* @__PURE__ */ new Map();
+		for (const element of this.#visible) {
+			const role = glassRole(element);
+			if (role === "container" || role === "standalone") roots.set(element, role === "container");
+		}
+		for (const [root, group] of this.#groups) if (roots.get(root) !== group.container || group.lost) {
+			group.dispose();
+			this.#groups.delete(root);
+		}
+		for (const [root, container] of roots) if (!this.#groups.has(root)) this.#groups.set(root, new GlassGroup(root, container));
+		const styled = new Set(this.#visible);
+		const rendered = /* @__PURE__ */ new Set();
+		for (const group of this.#groups.values()) {
+			group.frame(elapsed);
+			for (const shape of group.shapes) {
+				styled.add(shape);
+				if (group.active) rendered.add(shape);
+			}
+		}
+		for (const element of styled) applyHostStyle(element, {
+			hostsCanvas: this.#groups.get(element)?.active ?? false,
+			rendered: rendered.has(element),
+			fallback: element.getAttribute("blur-effect") === "glass" && !rendered.has(element)
+		});
+		if (this.#groups.size) this.#wake();
+		else this.#last = 0;
+	}
+};
+const attachWebGlass = (element) => {
+	const node = element;
+	const win = node.ownerDocument?.defaultView;
+	if (!win) return;
+	applyBlurViewLayout(node);
+	if (!win.IntersectionObserver) return;
+	try {
+		GlassManager.for(win).register(node);
+	} catch {}
+};
+export { attachWebGlass };
+
+//# sourceMappingURL=blotch-angular-lynx-web-glass-8MFrhPz0.mjs.map