@liquidcars/atlas 0.1.44 → 0.1.46

package/dist/liquidcars-atlas.js

@@ -11890,7 +11890,7 @@ var Qc = class {
 	}
 }, $c = {
 	name: "@liquidcars/atlas",
-	version: "0.1.44",
+	version: "0.1.46",
 	description: "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
 	type: "module",
 	scripts: {
@@ -12284,9 +12284,10 @@ var Fl = [":host{display:block;position:relative;height:var(--lc-height,680px);m
 	view: Rl("<path d=\"M2.5 12s3.5-5 9.5-5 9.5 5 9.5 5-3.5 5-9.5 5-9.5-5-9.5-5Z\"/><circle cx=\"12\" cy=\"12\" r=\"2.5\"/>"),
 	relations: Rl("<circle cx=\"5\" cy=\"6\" r=\"2\"/><circle cx=\"19\" cy=\"7\" r=\"2\"/><circle cx=\"12\" cy=\"18\" r=\"2\"/><path d=\"m6.8 6.3 10.2.5M6.2 7.7l4.6 8.6m6.8-7.5-4.4 7.5\"/>"),
 	focus: Rl("<circle cx=\"12\" cy=\"12\" r=\"7\"/><circle cx=\"12\" cy=\"12\" r=\"2.5\"/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"/>"),
+	copy: Rl("<rect x=\"8\" y=\"8\" width=\"11\" height=\"11\" rx=\"2\"/><path d=\"M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2\"/>"),
 	chevron: Rl("<path d=\"m8 10 4 4 4-4\"/>")
-}, Bl = (e, t, n = !1) => `<button class="toolbar-option${n ? " active" : ""}" data-action="${e}" aria-pressed="${n}"><span>${t}</span><span class="toolbar-option-check" aria-hidden="true">✓</span></button>`, Vl = (e, t, n, r, i) => `<details class="toolbar-menu" data-toolbar-menu="${e}"><summary aria-label="${n}" title="${n}">${t}<span class="toolbar-menu-status" data-toolbar-status="${e}">${r}</span>${zl.chevron}</summary><div class="toolbar-popover" role="menu"><div class="toolbar-popover-title">${n}</div>${i}</div></details>`, Hl = `<div class="atlas"><section class="viewport"><canvas tabindex="0" aria-label="Modelo 3D interactivo"></canvas><div class="toolbar" role="toolbar" aria-label="Controles de la vista"><div class="toolbar-group" data-toolbar-group="camera"><button class="toolbar-icon" data-action="minus" aria-label="Alejar" title="Alejar">${zl.minus}</button><button class="toolbar-icon" data-action="plus" aria-label="Acercar" title="Acercar">${zl.plus}</button><button class="toolbar-icon" data-action="fit" aria-label="Encuadrar todo el modelo" title="Encuadrar todo el modelo">${zl.fit}</button><button class="toolbar-icon" data-action="front" aria-label="Vista frontal" title="Vista frontal">${zl.front}</button></div><div class="toolbar-group" data-toolbar-group="view">${Vl("view", zl.view, "Vista", "Vista", Bl("labels", "Etiquetas", !0) + Bl("panel", "Información", !0) + Bl("item-facing", "Caras a cámara", !0) + "<div class=\"toolbar-option-separator\"></div>" + Bl("open-all", "Abrir todos") + Bl("close-all", "Cerrar todos"))}</div><div class="toolbar-group" data-toolbar-group="relations">${Vl("relations", zl.relations, "Relaciones", "Selección", Bl("relations-all", "Todas") + Bl("relations-selected", "Selección", !0) + Bl("relations-callers", "All callers") + Bl("relations-called", "All called") + Bl("relations-none", "Ocultar") + "<div data-relation-groups-section hidden><div class=\"toolbar-option-separator\"></div><div class=\"toolbar-popover-title\">Grupos</div><div data-relation-groups></div></div>")}</div><div class="toolbar-group" data-toolbar-group="focus">${Vl("focus", zl.focus, "Foco", "Todo", Bl("focus-all", "Todo", !0) + Bl("focus-dim", "Conectados") + Bl("focus-hide", "Aislar") + "<div class=\"toolbar-option-separator\"></div>" + Bl("focus-selection", "Enfocar selección") + Bl("focus-layout", "Reorganizar visibles"))}</div></div><div class="hint">Gira: arrastra · Pan: botón derecho / ⇧+arrastra / 2 dedos · Zoom: rueda o pellizco · Selecciona: clic · Enfoca: doble clic</div></section><aside class="panel" aria-live="polite"></aside></div>`;
-function Ul(e) {
+}, Bl = (e, t, n = !1) => `<button class="toolbar-option${n ? " active" : ""}" data-action="${e}" aria-pressed="${n}"><span>${t}</span><span class="toolbar-option-check" aria-hidden="true">✓</span></button>`, Vl = (e, t) => `<button class="toolbar-option" data-action="${e}" role="menuitem"><span>${t}</span><span aria-hidden="true"></span></button>`, Hl = (e, t, n, r, i) => `<details class="toolbar-menu" data-toolbar-menu="${e}"><summary aria-label="${n}" title="${n}">${t}<span class="toolbar-menu-status" data-toolbar-status="${e}" aria-live="polite">${r}</span>${zl.chevron}</summary><div class="toolbar-popover" role="menu"><div class="toolbar-popover-title">${n}</div>${i}</div></details>`, Ul = `<div class="toolbar-group" data-toolbar-group="copy">${Hl("copy", zl.copy, "Copiar imagen", "PNG", Vl("copy-theme", "PNG con fondo · HD 2×") + Vl("copy-transparent", "PNG transparente · HD 2×"))}</div>`, Wl = `<div class="atlas"><section class="viewport"><canvas tabindex="0" aria-label="Modelo 3D interactivo"></canvas><div class="toolbar" role="toolbar" aria-label="Controles de la vista"><div class="toolbar-group" data-toolbar-group="camera"><button class="toolbar-icon" data-action="minus" aria-label="Alejar" title="Alejar">${zl.minus}</button><button class="toolbar-icon" data-action="plus" aria-label="Acercar" title="Acercar">${zl.plus}</button><button class="toolbar-icon" data-action="fit" aria-label="Encuadrar todo el modelo" title="Encuadrar todo el modelo">${zl.fit}</button><button class="toolbar-icon" data-action="front" aria-label="Vista frontal" title="Vista frontal">${zl.front}</button></div><div class="toolbar-group" data-toolbar-group="view">${Hl("view", zl.view, "Vista", "Vista", Bl("labels", "Etiquetas", !0) + Bl("panel", "Información", !0) + Bl("item-facing", "Caras a cámara", !0) + "<div class=\"toolbar-option-separator\"></div>" + Bl("open-all", "Abrir todos") + Bl("close-all", "Cerrar todos"))}</div><div class="toolbar-group" data-toolbar-group="relations">${Hl("relations", zl.relations, "Relaciones", "Selección", Bl("relations-all", "Todas") + Bl("relations-selected", "Selección", !0) + Bl("relations-callers", "All callers") + Bl("relations-called", "All called") + Bl("relations-none", "Ocultar") + "<div data-relation-groups-section hidden><div class=\"toolbar-option-separator\"></div><div class=\"toolbar-popover-title\">Grupos</div><div data-relation-groups></div></div>")}</div><div class="toolbar-group" data-toolbar-group="focus">${Hl("focus", zl.focus, "Foco", "Todo", Bl("focus-all", "Todo", !0) + Bl("focus-dim", "Conectados") + Bl("focus-hide", "Aislar") + "<div class=\"toolbar-option-separator\"></div>" + Bl("focus-selection", "Enfocar selección") + Bl("focus-layout", "Reorganizar visibles"))}</div></div><div class="hint">Gira: arrastra · Pan: botón derecho / ⇧+arrastra / 2 dedos · Zoom: rueda o pellizco · Selecciona: clic · Enfoca: doble clic</div></section><aside class="panel" aria-live="polite"></aside></div>`;
+function Gl(e) {
 	return String(e ?? "").replace(/[&<>"']/g, (e) => ({
 		"&": "&amp;",
 		"<": "&lt;",
@@ -12295,20 +12296,20 @@ function Ul(e) {
 		"'": "&#39;"
 	})[e]);
 }
-function Wl(e) {
+function Kl(e) {
 	let t = String(e ?? "").trim();
 	if (!t) return "";
 	try {
 		let e = new URL(t, globalThis.location?.href);
-		return ["http:", "https:"].includes(e.protocol) ? "<a class=\"external-link\" href=\"" + Ul(e.href) + "\" target=\"_blank\" rel=\"noopener noreferrer\">Open documentation ↗</a>" : "";
+		return ["http:", "https:"].includes(e.protocol) ? "<a class=\"external-link\" href=\"" + Gl(e.href) + "\" target=\"_blank\" rel=\"noopener noreferrer\">Open documentation ↗</a>" : "";
 	} catch {
 		return "";
 	}
 }
-function Gl(e, t = "connection") {
+function ql(e, t = "connection") {
 	return String(e || t).normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || t;
 }
-function Kl(e) {
+function Jl(e) {
 	let t = Array.isArray(e) ? e : e && typeof e == "object" ? Object.entries(e).map(([e, t]) => typeof t == "string" ? {
 		id: e,
 		label: t
@@ -12327,7 +12328,7 @@ function Kl(e) {
 		}]);
 	});
 }
-function ql(e) {
+function Yl(e) {
 	let t = e && typeof e == "object" ? e : {}, n = t.render && typeof t.render == "object" ? t.render : {}, r = Array.isArray(t.entities) ? t.entities.map((e) => ({
 		...e,
 		p: Array.isArray(e.p) ? e.p : [
@@ -12343,9 +12344,9 @@ function ql(e) {
 	})) : [], i = /* @__PURE__ */ new Set(), a = (e) => {
 		let t = (e.id == null ? "" : String(e.id).trim()) || [
 			"relation",
-			Gl(e.from, "source"),
-			Gl(e.to, "target"),
-			e.label ? Gl(e.label) : ""
+			ql(e.from, "source"),
+			ql(e.to, "target"),
+			e.label ? ql(e.label) : ""
 		].filter(Boolean).join("-"), n = t || "relation", r = 2;
 		for (; i.has(n);) n = `${t || "relation"}-${r++}`;
 		return i.add(n), n;
@@ -12381,12 +12382,12 @@ function ql(e) {
 			...n,
 			relationMarker: Ol(n.relationMarker)
 		},
-		relationGroups: Kl(t.relationGroups),
+		relationGroups: Jl(t.relationGroups),
 		entities: r,
 		relations: o
 	};
 }
-function Jl(e, t, n = [
+function Xl(e, t, n = [
 	1,
 	1,
 	1
@@ -12405,7 +12406,7 @@ function Jl(e, t, n = [
 	});
 	return s.center(), s;
 }
-function Yl(e, t, n) {
+function Zl(e, t, n) {
 	let r = new ui();
 	for (let t = 0; t < e; t++) {
 		let n = Math.PI / 2 + t * Math.PI * 2 / e, i = new V(Math.cos(n) * .5, Math.sin(n) * .5);
@@ -12422,7 +12423,7 @@ function Yl(e, t, n) {
 	});
 	return i.rotateX(Math.PI / 2), i.center(), i;
 }
-function Xl(e, t, n, r) {
+function Ql(e, t, n, r) {
 	let i = Math.min(.22, Math.max(0, Number(n) || 0));
 	if (!i) return new Er(t, e, 1, 32);
 	let a = [new V(0, -.5)];
@@ -12439,7 +12440,7 @@ function Xl(e, t, n, r) {
 	}
 	return a.push(new V(0, .5)), new Qi(a, 32);
 }
-function Zl(e, t) {
+function $l(e, t) {
 	if (!t) return e;
 	let n = Math.min(.72, Math.max(0, Number(t) * 3)), r = e.attributes.position;
 	for (let e = 0; e < r.count; e++) {
@@ -12448,36 +12449,36 @@ function Zl(e, t) {
 	}
 	return r.needsUpdate = !0, e.computeVertexNormals(), e;
 }
-function Ql(e, t = 0, n = 4, r = [
+function eu(e, t = 0, n = 4, r = [
 	1,
 	1,
 	1
 ]) {
 	let i = Number(t) || 0, a = Math.max(2, Math.round(Number(n) || 4));
 	switch (e) {
-		case "cylinder": return i ? Xl(.5, .5, i, a) : new Er(.5, .5, 1, 32);
-		case "cone": return i ? Xl(0, .5, i, a) : new Dr(.5, 1, 32);
+		case "cylinder": return i ? Ql(.5, .5, i, a) : new Er(.5, .5, 1, 32);
+		case "cone": return i ? Ql(0, .5, i, a) : new Dr(.5, 1, 32);
 		case "frustum-cone":
-		case "truncated-cone": return i ? Xl(.28, .5, i, a) : new Er(.28, .5, 1, 32);
+		case "truncated-cone": return i ? Ql(.28, .5, i, a) : new Er(.28, .5, 1, 32);
 		case "frustum-pyramid":
 		case "truncated-pyramid": return new Er(.28, .5, 1, 4);
 		case "frustum-triangle": return new Er(.28, .5, 1, 3);
-		case "prism": return i ? Yl(6, i, a) : new Er(.5, .5, 1, 6);
-		case "pyramid-square": return i ? Zl(new Dr(.5, 1, 4), i) : new Dr(.5, 1, 4);
-		case "pyramid-triangle": return i ? Zl(new Dr(.5, 1, 3), i) : new Dr(.5, 1, 3);
+		case "prism": return i ? Zl(6, i, a) : new Er(.5, .5, 1, 6);
+		case "pyramid-square": return i ? $l(new Dr(.5, 1, 4), i) : new Dr(.5, 1, 4);
+		case "pyramid-triangle": return i ? $l(new Dr(.5, 1, 3), i) : new Dr(.5, 1, 3);
 		case "sphere": return new ta(.5, 24, 16);
-		case "octahedron": return Zl(new $i(.5), i);
-		case "dodecahedron": return Zl(new kr(.5), i);
-		case "icosahedron": return Zl(new Zi(.5), i);
-		default: return i ? Jl(i, a, r) : new Nn(1, 1, 1);
+		case "octahedron": return $l(new $i(.5), i);
+		case "dodecahedron": return $l(new kr(.5), i);
+		case "icosahedron": return $l(new Zi(.5), i);
+		default: return i ? Xl(i, a, r) : new Nn(1, 1, 1);
 	}
 }
-function $l(e) {
+function tu(e) {
 	e.computeBoundingBox();
 	let t = e.boundingBox?.getSize(new U());
 	return !t || !t.x || !t.y || !t.z ? e : (e.scale(1 / t.x, 1 / t.y, 1 / t.z), e.computeBoundingBox(), e);
 }
-function eu(e, t) {
+function nu(e, t) {
 	let n = e.geometryOptions || e.geometry_options || e.parameters || {}, r = {};
 	for (let [e, n] of Object.entries(t?.parameters || {})) n && Object.hasOwn(n, "default") && (r[e] = n.default);
 	return {
@@ -12485,10 +12486,10 @@ function eu(e, t) {
 		...n && typeof n == "object" ? n : {}
 	};
 }
-function tu(e, t, n) {
+function ru(e, t, n) {
 	return typeof e != "string" || !e ? n : t[e] || e;
 }
-function nu(e, t = "#ffffff", n = "transparent") {
+function iu(e, t = "#ffffff", n = "transparent") {
 	let r = document.createElement("canvas");
 	r.width = 256, r.height = 256;
 	let i = r.getContext("2d");
@@ -12496,8 +12497,8 @@ function nu(e, t = "#ffffff", n = "transparent") {
 	let a = new Cr(r);
 	return a.colorSpace = y, a;
 }
-var ru = /^[AaCcHhLlMmQqSsTtVvZz]$/, iu = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?|[AaCcHhLlMmQqSsTtVvZz]/g;
-function au(e, t, n, r, i, a, o, s, c) {
+var au = /^[AaCcHhLlMmQqSsTtVvZz]$/, ou = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?|[AaCcHhLlMmQqSsTtVvZz]/g;
+function su(e, t, n, r, i, a, o, s, c) {
 	let l = Math.abs(Number(n)), u = Math.abs(Number(r));
 	if (!l || !u || e === s && t === c) return [[s, c]];
 	let d = Number(i || 0) * Math.PI / 180, f = Math.cos(d), p = Math.sin(d), m = (e - s) / 2, h = (t - c) / 2, g = f * m + p * h, _ = -p * m + f * h, v = Math.sqrt(Math.max(1, g * g / (l * l) + _ * _ / (u * u)));
@@ -12513,12 +12514,12 @@ function au(e, t, n, r, i, a, o, s, c) {
 		return [w + f * l * r - p * u * i, T + p * l * r + f * u * i];
 	});
 }
-function ou(e) {
-	let t = String(e || "").match(iu) || [], n = new qa(), r = 0, i = "", a = "", o = 0, s = 0, c = 0, l = 0, u = 0, d = 0, f = 0, p = 0, m = () => r < t.length && !ru.test(t[r]), h = () => Number(t[r++]), g = () => {
+function cu(e) {
+	let t = String(e || "").match(ou) || [], n = new qa(), r = 0, i = "", a = "", o = 0, s = 0, c = 0, l = 0, u = 0, d = 0, f = 0, p = 0, m = () => r < t.length && !au.test(t[r]), h = () => Number(t[r++]), g = () => {
 		let e = t[r];
 		return /^[01].+/.test(e) ? (t[r] = e.slice(1), e[0] === "1") : h() !== 0;
 	}, _ = (e, t, n) => [n ? o + e : e, n ? s + t : t];
-	for (; r < t.length && (ru.test(t[r]) && (i = t[r++]), i);) {
+	for (; r < t.length && (au.test(t[r]) && (i = t[r++]), i);) {
 		let e = i.toLowerCase(), t = i === e;
 		if (e === "z") {
 			n.currentPath?.closePath(), o = c, s = l, a = i, i = "";
@@ -12558,7 +12559,7 @@ function ou(e) {
 		}
 		else if (e === "a") for (; m();) {
 			let e = h(), r = h(), c = h(), l = g(), u = g(), [d, f] = _(h(), h(), t);
-			for (let [t, i] of au(o, s, e, r, c, l, u, d, f)) n.lineTo(t, -i);
+			for (let [t, i] of su(o, s, e, r, c, l, u, d, f)) n.lineTo(t, -i);
 			o = d, s = f, a = i;
 		}
 		else break;
@@ -12566,12 +12567,12 @@ function ou(e) {
 	}
 	return n;
 }
-function su(e, t = {}) {
+function lu(e, t = {}) {
 	let n = String(e || "").match(/<path\b[^>]*>/gi) || [], r = [];
 	for (let e of n) {
 		let t = e.match(/\bd\s*=\s*(["'])([\s\S]*?)\1/i);
 		if (!t) continue;
-		let n = ou(t[2]);
+		let n = cu(t[2]);
 		r.push(...n.toShapes(!0, !1));
 	}
 	if (!r.length) return new Nn(1, 1, .12);
@@ -12586,11 +12587,11 @@ function su(e, t = {}) {
 	});
 	return a.center(), a;
 }
-function cu(e) {
-	return e.shape === "plane" ? new ea(1, 1) : e.shape === "svg-extrude" ? su(e.svg, e) : Ql(e.shape || e.geometry || "box", e.radius, e.segments, e.size);
+function uu(e) {
+	return e.shape === "plane" ? new ea(1, 1) : e.shape === "svg-extrude" ? lu(e.svg, e) : eu(e.shape || e.geometry || "box", e.radius, e.segments, e.size);
 }
-function lu(e, t, n, r, i) {
-	let a = eu(t, e), o = {
+function du(e, t, n, r, i) {
+	let a = nu(t, e), o = {
 		...n,
 		...e.palette || {},
 		...t.geometryPalette || t.geometry_palette || {}
@@ -12605,11 +12606,11 @@ function lu(e, t, n, r, i) {
 	if (!c.length) throw Error(`Geometry '${e.id}' did not produce any parts.`);
 	let l = new Qn(), u = [], d = [];
 	for (let a of c) {
-		let s = cu(a);
-		$l(s);
-		let c = a.color || "component", f = tu(c, o, n.component || el.component), p = a.emissive || "#000000", m = new ia({
+		let s = uu(a);
+		tu(s);
+		let c = a.color || "component", f = ru(c, o, n.component || el.component), p = a.emissive || "#000000", m = new ia({
 			color: f,
-			emissive: tu(p, o, "#000000"),
+			emissive: ru(p, o, "#000000"),
 			emissiveIntensity: Number.isFinite(Number(a.emissiveIntensity)) ? Math.max(0, Number(a.emissiveIntensity)) : 0,
 			roughness: Number.isFinite(Number(a.roughness)) ? Number(a.roughness) : .72,
 			metalness: Number.isFinite(Number(a.metalness)) ? Number(a.metalness) : .06,
@@ -12680,7 +12681,7 @@ function lu(e, t, n, r, i) {
 					n.src = _;
 				}
 			})(), m.map.colorSpace = y, m.needsUpdate = !0;
-		} else g != null && g !== "" && (m.map = nu(g, tu(a.iconColor || "#ffffff", o, "#ffffff"), tu(a.iconBackground || "transparent", o, "transparent")), m.transparent = !0, m.needsUpdate = !0);
+		} else g != null && g !== "" && (m.map = iu(g, ru(a.iconColor || "#ffffff", o, "#ffffff"), ru(a.iconBackground || "transparent", o, "transparent")), m.transparent = !0, m.needsUpdate = !0);
 		if (h = new An(s, m), h.position.fromArray(Array.isArray(a.position) ? a.position : [
 			0,
 			0,
@@ -12717,23 +12718,23 @@ function lu(e, t, n, r, i) {
 		descriptor: s
 	};
 }
-var uu = Object.freeze([
+var fu = Object.freeze([
 	"auto",
 	"top",
 	"bottom",
 	"left",
 	"right"
 ]);
-function du(e) {
+function pu(e) {
 	let t = String(e || "auto").trim().toLowerCase();
-	return uu.includes(t) ? t : "auto";
+	return fu.includes(t) ? t : "auto";
 }
-function fu(e = {}, t = {}) {
+function mu(e = {}, t = {}) {
 	let n = e.style?.label?.anchor ?? e.labelAnchor ?? e.label_anchor, r = wl(e.type) ? "auto" : t?.label?.anchor ?? "bottom";
-	return du(n ?? r);
+	return pu(n ?? r);
 }
-function pu(e, t, n, r, i = .025) {
-	let a = du(e);
+function hu(e, t, n, r, i = .025) {
+	let a = pu(e);
 	if (a === "auto") return null;
 	let o = Math.max(0, Number(t?.x) || 0), s = Math.max(0, Number(t?.y) || 0);
 	Math.max(0, Number(n) || 0);
@@ -12760,7 +12761,23 @@ function pu(e, t, n, r, i = .025) {
 		backRotation: Math.PI / 2
 	};
 }
-function mu(e, t, n, r = "", i = !0) {
+function gu(e, t, n = null, r = .08) {
+	let i = (Number(e?.x) || 0) - (Number(t?.x) || 0), a = (Number(e?.y) || 0) - (Number(t?.y) || 0), o = (Number(e?.z) || 0) - (Number(t?.z) || 0), s = Math.hypot(i, a, o), c = [
+		"front",
+		"back",
+		"top"
+	];
+	if (!s) return c.includes(n) ? n : "front";
+	let l = {
+		front: o / s,
+		back: -o / s,
+		top: a / s
+	}, u = "front";
+	for (let e of c.slice(1)) l[e] > l[u] && (u = e);
+	let d = Math.max(0, Math.min(.5, Number(r) || 0));
+	return c.includes(n) && l[n] > 0 && l[n] + d >= l[u] ? n : l[u] > 0 ? u : c.includes(n) ? n : "front";
+}
+function _u(e, t, n, r = "", i = !0) {
 	let a = document.createElement("canvas"), o = a.getContext("2d"), s = n.x * .88, c = Math.min(.82, n.y * .64);
 	a.width = Math.ceil(s * 320), a.height = Math.ceil(c * 320), o.imageSmoothingEnabled = !0, o.imageSmoothingQuality = "high", o.clearRect(0, 0, a.width, a.height);
 	let l = a.height * .62;
@@ -12805,29 +12822,90 @@ function mu(e, t, n, r = "", i = !0) {
 	]) e.renderOrder = 20, e.frustumCulled = !1, e.material.depthTest = !0, e.material.depthWrite = !1, e.material.transparent = !0;
 	return x.renderOrder = 20, x.frustumCulled = !1, x.userData.front = S, x.userData.back = C, x.userData.top = w, x.userData.height = c, x.userData.width = s, x.userData.textOffsetX = h, x.userData.textOffsetY = g, x.userData.nodeLabel = !0, x;
 }
-function hu(e, t, n, r = globalThis.document) {
+function vu(e, t, n, r) {
+	if (!r || r === "transparent" || !e?.fillRect) return;
+	let i = typeof r == "string" ? { color: r } : r, a = i.fade || i.color || "#0a111a", o = i.glow || a;
+	if (e.save?.(), e.globalCompositeOperation = "destination-over", o !== a && e.createRadialGradient && e.scale) {
+		e.scale(t, n);
+		let r = e.createRadialGradient(.5, .45, 0, .5, .45, .75);
+		r.addColorStop(0, o), r.addColorStop(.82, a), r.addColorStop(1, a), e.fillStyle = r, e.fillRect(0, 0, 1, 1);
+	} else e.fillStyle = a, e.fillRect(0, 0, t, n);
+	e.restore?.();
+}
+function yu(e) {
+	for (let t = 0; t < e.length; t += 4) {
+		let n = e[t + 3];
+		if (!n || n === 255) continue;
+		let r = 255 / n;
+		e[t] = Math.min(255, Math.round(e[t] * r)), e[t + 1] = Math.min(255, Math.round(e[t + 1] * r)), e[t + 2] = Math.min(255, Math.round(e[t + 2] * r));
+	}
+}
+function bu(e, t, n, r = 8192) {
+	let i = Math.max(1, Math.min(4, Number(n) || 1));
+	if (i === 1 || !e?.getPixelRatio || !e?.getSize || !e?.setPixelRatio || !e?.setSize) return null;
+	let a = e.getPixelRatio(), o = {
+		x: 0,
+		y: 0,
+		set(e, t) {
+			return this.x = e, this.y = t, this;
+		}
+	};
+	if (e.getSize(o), !o.x || !o.y) return null;
+	let s = t?.getParameter && t?.MAX_RENDERBUFFER_SIZE ? Number(t.getParameter(t.MAX_RENDERBUFFER_SIZE)) : 0, c = Math.max(1, Math.min(Number(r) || 8192, s || Infinity)), l = t?.drawingBufferWidth || o.x * a, u = t?.drawingBufferHeight || o.y * a, d = Math.max(1, Math.min(i, c / l, c / u));
+	return d <= 1 ? null : (e.setPixelRatio(a * d), e.setSize(o.x, o.y, !1), () => {
+		e.setPixelRatio(a), e.setSize(o.x, o.y, !1);
+	});
+}
+function xu(e, t, n, r = globalThis.document, i = {}) {
 	if (!e || !t || !n || !r?.createElement) return null;
+	let a = null;
 	try {
-		e.render(t, n);
-		let i = e.getContext?.(), a = i?.drawingBufferWidth || e.domElement?.width || 0, o = i?.drawingBufferHeight || e.domElement?.height || 0;
-		if (!i?.readPixels || !a || !o) return null;
-		let s = new Uint8Array(a * o * 4);
-		i.readPixels(0, 0, a, o, i.RGBA, i.UNSIGNED_BYTE, s);
-		let c = r.createElement("canvas");
-		c.className = "atlas-print-snapshot", c.width = a, c.height = o, c.setAttribute("aria-hidden", "true");
-		let l = c.getContext?.("2d");
-		if (!l) return null;
-		let u = l.createImageData(a, o), d = a * 4;
-		for (let e = 0; e < o; e += 1) {
-			let t = o - e - 1;
-			u.data.set(s.subarray(t * d, (t + 1) * d), e * d);
-		}
-		return l.putImageData(u, 0, 0), c;
+		let o = e.getContext?.();
+		a = bu(e, o, i.scale, i.maximumDimension), e.render(t, n);
+		let s = e.getContext?.(), c = s?.drawingBufferWidth || e.domElement?.width || 0, l = s?.drawingBufferHeight || e.domElement?.height || 0;
+		if (!s?.readPixels || !c || !l) return null;
+		let u = new Uint8Array(c * l * 4);
+		s.readPixels(0, 0, c, l, s.RGBA, s.UNSIGNED_BYTE, u);
+		let d = r.createElement("canvas");
+		d.className = "atlas-print-snapshot", d.width = c, d.height = l, d.setAttribute("aria-hidden", "true");
+		let f = d.getContext?.("2d");
+		if (!f) return null;
+		let p = f.createImageData(c, l), m = c * 4;
+		for (let e = 0; e < l; e += 1) {
+			let t = l - e - 1;
+			p.data.set(u.subarray(t * m, (t + 1) * m), e * m);
+		}
+		return s.getContextAttributes?.().premultipliedAlpha !== !1 && yu(p.data), f.putImageData(p, 0, 0), vu(f, c, l, i.background), d;
 	} catch {
 		return null;
+	} finally {
+		if (a) try {
+			a(), e.render(t, n);
+		} catch {}
+	}
+}
+function Su(e) {
+	return e?.toBlob ? new Promise((t, n) => {
+		e.toBlob((e) => {
+			e ? t(e) : n(/* @__PURE__ */ Error("Atlas could not encode the captured view as PNG."));
+		}, "image/png");
+	}) : Promise.reject(/* @__PURE__ */ Error("PNG capture is unavailable in this browser."));
+}
+function Cu(e, t = {}) {
+	let n = Object.hasOwn(t, "documentRef") ? t.documentRef : globalThis.document, r = Object.hasOwn(t, "urlRef") ? t.urlRef : globalThis.URL;
+	if (!n?.createElement || !r?.createObjectURL) throw Error("PNG download is unavailable in this browser.");
+	let i = String(t.filename || "atlas-view.png"), a = r.createObjectURL(e), o = n.createElement("a");
+	o.href = a, o.download = i, o.hidden = !0, n.body?.appendChild?.(o);
+	try {
+		o.click();
+	} finally {
+		o.remove?.();
+		let e = () => r.revokeObjectURL?.(a), n = Object.hasOwn(t, "schedule") ? t.schedule : globalThis.setTimeout;
+		typeof n == "function" ? n(e, 0) : e();
 	}
+	return i;
 }
-var gu = class extends HTMLElement {
+var wu = class extends HTMLElement {
 	static version = $c;
 	static get observedAttributes() {
 		return [
@@ -12858,11 +12936,11 @@ var gu = class extends HTMLElement {
 		return Sl();
 	}
 	constructor() {
-		super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = "<style>" + Fl + Il + Ll + "</style>" + Hl, this.canvas = this.shadowRoot.querySelector("canvas"), this.panel = this.shadowRoot.querySelector(".panel"), this.scene = new tr(), this.camera = new Kn(30, 1, .1, 2e3), this.cameraPosition = new U(), this.cameraTarget = new U(), this.raycaster = new Wa(), this.pointer = new V(), this.nodes = /* @__PURE__ */ new Map(), this.open = /* @__PURE__ */ new Set(), this._initialOpenContainers = /* @__PURE__ */ new Set(), this.selected = null, this.selectedRelationIndex = null, this.modelData = null, this._loading = !1, this._pendingSelection = null, this._theme = Nl(), this.relationMode = kl(this.getAttribute("relation-mode")), this.relationMarker = Ol(this.getAttribute("relation-marker")), this.visibleRelationGroups = null, this.focusFilter = Tl({
+		super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = "<style>" + Fl + Il + Ll + "</style>" + Wl, this.shadowRoot.querySelector("[data-toolbar-group=\"focus\"]")?.insertAdjacentHTML?.("afterend", Ul), this.canvas = this.shadowRoot.querySelector("canvas"), this.panel = this.shadowRoot.querySelector(".panel"), this.scene = new tr(), this.camera = new Kn(30, 1, .1, 2e3), this.cameraPosition = new U(), this.cameraTarget = new U(), this.raycaster = new Wa(), this.pointer = new V(), this.nodes = /* @__PURE__ */ new Map(), this.open = /* @__PURE__ */ new Set(), this._initialOpenContainers = /* @__PURE__ */ new Set(), this.selected = null, this.selectedRelationIndex = null, this.modelData = null, this._loading = !1, this._pendingSelection = null, this._theme = Nl(), this.relationMode = kl(this.getAttribute("relation-mode")), this.relationMarker = Ol(this.getAttribute("relation-marker")), this.visibleRelationGroups = null, this.focusFilter = Tl({
 			mode: this.getAttribute("focus-mode"),
 			effect: this.getAttribute("focus-effect"),
 			layout: this.getAttribute("focus-layout")
-		}), this.selectionMode = ["internal", "event"].includes(this.getAttribute("selection-mode")) ? this.getAttribute("selection-mode") : "internal", this.selectionNavigation = El(this.getAttribute("selection-navigation")), this.itemFacing = Dl(this.getAttribute("item-facing")), this.showShellLabels = this.getAttribute("shell-labels") !== "false", this.yaw = .37, this.pitch = .22, this.zoom = 1, this.targetZoom = 1, this.focus = new U(), this.targetFocus = new U(), this.drag = null, this.pointers = /* @__PURE__ */ new Map(), this.relationGroup = new Qn(), this.scene.add(this.relationGroup), this.relations = [], this.animationFrame = 0, this.ready = !1, this._toolbarVisible = this.getAttribute("toolbar") !== "off", this._panelVisible = this.getAttribute("panel") !== "off", this.toolbar = this.shadowRoot.querySelector(".toolbar"), this._printState = null, this._beforePrintListener = () => this.prepareForPrint(), this._afterPrintListener = () => this.restoreAfterPrint(), this._printMedia = globalThis.matchMedia?.("print") || null, this._printMediaListener = (e) => e.matches ? this.prepareForPrint() : this.restoreAfterPrint(), this._geometryRegistryListener = () => {
+		}), this.selectionMode = ["internal", "event"].includes(this.getAttribute("selection-mode")) ? this.getAttribute("selection-mode") : "internal", this.selectionNavigation = El(this.getAttribute("selection-navigation")), this.itemFacing = Dl(this.getAttribute("item-facing")), this.showShellLabels = this.getAttribute("shell-labels") !== "false", this.yaw = .37, this.pitch = .22, this.zoom = 1, this.targetZoom = 1, this.focus = new U(), this.targetFocus = new U(), this.drag = null, this.pointers = /* @__PURE__ */ new Map(), this.relationGroup = new Qn(), this.scene.add(this.relationGroup), this.relations = [], this.animationFrame = 0, this.ready = !1, this._toolbarVisible = this.getAttribute("toolbar") !== "off", this._panelVisible = this.getAttribute("panel") !== "off", this.toolbar = this.shadowRoot.querySelector(".toolbar"), this._copyStatusTimer = null, this._printState = null, this._beforePrintListener = () => this.prepareForPrint(), this._afterPrintListener = () => this.restoreAfterPrint(), this._printMedia = globalThis.matchMedia?.("print") || null, this._printMediaListener = (e) => e.matches ? this.prepareForPrint() : this.restoreAfterPrint(), this._geometryRegistryListener = () => {
 			this.ready && this.modelData && this._build();
 		}, this._bindControls(), this._syncFocusToolbar(), this._syncRelationToolbar(), this._syncLabelsToolbar(), this._syncPanelToolbar(), this._syncItemFacingToolbar(), this.resizeObserver = new ResizeObserver(() => this.resize()), this.resizeObserver.observe(this.canvas);
 	}
@@ -12870,7 +12948,7 @@ var gu = class extends HTMLElement {
 		globalThis.addEventListener?.("lc-geometry-registry-change", this._geometryRegistryListener), globalThis.addEventListener?.("beforeprint", this._beforePrintListener), globalThis.addEventListener?.("afterprint", this._afterPrintListener), typeof this._printMedia?.addEventListener == "function" ? this._printMedia.addEventListener("change", this._printMediaListener) : this._printMedia?.addListener?.(this._printMediaListener), this.resizeObserver.observe(this.canvas), this.hasAttribute("height") && this.style.setProperty("--lc-height", this.getAttribute("height")), this._loadInitial();
 	}
 	disconnectedCallback() {
-		globalThis.removeEventListener?.("lc-geometry-registry-change", this._geometryRegistryListener), globalThis.removeEventListener?.("beforeprint", this._beforePrintListener), globalThis.removeEventListener?.("afterprint", this._afterPrintListener), typeof this._printMedia?.removeEventListener == "function" ? this._printMedia.removeEventListener("change", this._printMediaListener) : this._printMedia?.removeListener?.(this._printMediaListener), this.restoreAfterPrint(), this.resizeObserver.disconnect(), this.animationFrame && cancelAnimationFrame(this.animationFrame), this._clearObjects(), this.renderer &&= (this.renderer.dispose(), this.renderer.forceContextLoss?.(), null), this.ready = !1, this.dispatchEvent(new CustomEvent("lc-disconnect"));
+		globalThis.removeEventListener?.("lc-geometry-registry-change", this._geometryRegistryListener), globalThis.removeEventListener?.("beforeprint", this._beforePrintListener), globalThis.removeEventListener?.("afterprint", this._afterPrintListener), typeof this._printMedia?.removeEventListener == "function" ? this._printMedia.removeEventListener("change", this._printMediaListener) : this._printMedia?.removeListener?.(this._printMediaListener), this.restoreAfterPrint(), this._copyStatusTimer && globalThis.clearTimeout?.(this._copyStatusTimer), this.resizeObserver.disconnect(), this.animationFrame && cancelAnimationFrame(this.animationFrame), this._clearObjects(), this.renderer &&= (this.renderer.dispose(), this.renderer.forceContextLoss?.(), null), this.ready = !1, this.dispatchEvent(new CustomEvent("lc-disconnect"));
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
@@ -12916,8 +12994,56 @@ var gu = class extends HTMLElement {
 	set palette(e) {
 		this.setPalette(e);
 	}
-	captureFrame() {
-		return hu(this.renderer, this.scene, this.camera, this.ownerDocument);
+	captureFrame(e = {}) {
+		let t = e.background === "theme" ? this.theme?.background || jl.background : e.background;
+		return xu(this.renderer, this.scene, this.camera, this.ownerDocument, {
+			...e,
+			background: t
+		});
+	}
+	async copyFrame(e = {}) {
+		let t = e.background === "transparent" ? "transparent" : "theme", n = Math.max(1, Math.min(4, Number(e.scale) || 2)), r = e.fallback === "download" ? "download" : "none", i = Object.hasOwn(e, "navigatorRef") ? e.navigatorRef : globalThis.navigator, a = Object.hasOwn(e, "ClipboardItemClass") ? e.ClipboardItemClass : globalThis.ClipboardItem, o = !!(i?.clipboard?.write && a), s = e.source || "api";
+		try {
+			if (!o && r !== "download") throw Error("Image clipboard access is unavailable. Use HTTPS or localhost in a compatible browser.");
+			let c = this.captureFrame({
+				background: t,
+				scale: n
+			});
+			if (!c) throw Error("Atlas could not capture the current WebGL view.");
+			let l = Su(c), u = "clipboard";
+			if (o) try {
+				await i.clipboard.write([new a({ "image/png": l })]);
+			} catch (e) {
+				if (r !== "download") throw e;
+				u = "download";
+			}
+			else u = "download";
+			let d = await l;
+			u === "download" && Cu(d, e);
+			let f = {
+				blob: d,
+				width: c.width,
+				height: c.height,
+				background: t,
+				scale: n,
+				method: u
+			};
+			return this._emit?.("lc-image-export", {
+				width: f.width,
+				height: f.height,
+				background: t,
+				scale: n,
+				method: u,
+				source: s
+			}), f;
+		} catch (e) {
+			throw this._emit?.("lc-image-export-error", {
+				message: e?.message || String(e),
+				background: t,
+				scale: n,
+				source: s
+			}), e;
+		}
 	}
 	prepareForPrint() {
 		if (this._printState) return this;
@@ -13092,7 +13218,7 @@ var gu = class extends HTMLElement {
 		let t = this.modelData?.relationGroups || [], n = this.shadowRoot.querySelector("[data-relation-groups-section]"), r = this.shadowRoot.querySelector("[data-relation-groups]");
 		n && (n.hidden = t.length === 0), r && (r.innerHTML = t.map((e) => {
 			let t = !this.visibleRelationGroups || this.visibleRelationGroups.has(e.id);
-			return Bl("relation-group-toggle", Ul(e.label || e.id), t).replace("data-action=\"relation-group-toggle\"", `data-action="relation-group-toggle" data-relation-group="${Ul(e.id)}"`);
+			return Bl("relation-group-toggle", Gl(e.label || e.id), t).replace("data-action=\"relation-group-toggle\"", `data-action="relation-group-toggle" data-relation-group="${Gl(e.id)}"`);
 		}).join(""));
 	}
 	_syncPanelToolbar() {
@@ -13214,7 +13340,7 @@ var gu = class extends HTMLElement {
 	}
 	_commitModelChange(e, t = {}, n = {}) {
 		let r = n.preserveSelection === !1 ? null : this.selected?.id, i = n.preserveSelection === !1 ? null : this._publicRelation(this.selectedRelationIndex), a = i?.id ?? i?.index ?? null;
-		this.modelData = ql(this.modelData);
+		this.modelData = Yl(this.modelData);
 		let o = this._syncInitialContainerState({
 			refresh: !1,
 			emit: !1,
@@ -13231,7 +13357,7 @@ var gu = class extends HTMLElement {
 	}
 	updateModel(e = {}, t = {}) {
 		if (!e || typeof e != "object" || Array.isArray(e)) throw TypeError("El parche del modelo debe ser un objeto.");
-		let n = this.modelData || ql({}), r = JSON.stringify(n.render?.camera || null), i = {
+		let n = this.modelData || Yl({}), r = JSON.stringify(n.render?.camera || null), i = {
 			...n,
 			...e,
 			palette: e.palette ? {
@@ -13242,11 +13368,11 @@ var gu = class extends HTMLElement {
 			entities: Array.isArray(e.entities) ? e.entities : n.entities,
 			relations: Array.isArray(e.relations) ? e.relations : n.relations
 		};
-		return this.modelData = ql(i), this.theme = this.modelData.theme, this._commitModelChange("model-update", { patch: e }, t), this._applyModelRenderOptions(), JSON.stringify(this.modelData.render?.camera || null) !== r && this.modelData.render?.camera && this.setCameraView(this.modelData.render.camera, { animate: t.animateCamera !== !1 }), this;
+		return this.modelData = Yl(i), this.theme = this.modelData.theme, this._commitModelChange("model-update", { patch: e }, t), this._applyModelRenderOptions(), JSON.stringify(this.modelData.render?.camera || null) !== r && this.modelData.render?.camera && this.setCameraView(this.modelData.render.camera, { animate: t.animateCamera !== !1 }), this;
 	}
 	addEntity(e, t = {}) {
 		if (!e || typeof e != "object" || !e.id) throw TypeError("La entidad debe incluir un id.");
-		if (this.modelData ||= ql({}), this.modelData.entities.some((t) => t.id === e.id)) throw Error(`Ya existe una entidad con id "${e.id}".`);
+		if (this.modelData ||= Yl({}), this.modelData.entities.some((t) => t.id === e.id)) throw Error(`Ya existe una entidad con id "${e.id}".`);
 		if (e.parent && !this.modelData.entities.some((t) => t.id === e.parent)) throw Error(`No existe el contenedor padre "${e.parent}".`);
 		return this.modelData.entities = [...this.modelData.entities, { ...e }], this._commitModelChange("entity-add", { entity: this._publicEntity(e.id) }, t);
 	}
@@ -13517,7 +13643,7 @@ var gu = class extends HTMLElement {
 		this._loading = !0, this._pendingSelection = null;
 		try {
 			let t = typeof e == "string" ? await fetch(e).then((e) => e.json()) : e;
-			this.modelData = ql(t), this.selected = null, this.selectedRelationIndex = null, this.open.clear(), this._initialOpenContainers.clear(), this._pendingPalette &&= (this.modelData.palette = {
+			this.modelData = Yl(t), this.selected = null, this.selectedRelationIndex = null, this.open.clear(), this._initialOpenContainers.clear(), this._pendingPalette &&= (this.modelData.palette = {
 				...this.modelData.palette,
 				...this._pendingPalette
 			}, null), this.theme = this.modelData.theme, this._applyTheme(), this._syncInitialContainerState({
@@ -13587,7 +13713,7 @@ var gu = class extends HTMLElement {
 					...e.geometryPalette || {},
 					...e.geometryPaletteOverrides || {}
 				};
-				n.material.color.set(tu(n.value, r, t)), n.material.emissive && n.emissiveValue && n.material.emissive.set(tu(n.emissiveValue, r, "#000000"));
+				n.material.color.set(ru(n.value, r, t)), n.material.emissive && n.emissiveValue && n.material.emissive.set(ru(n.emissiveValue, r, "#000000"));
 			}
 		}
 	}
@@ -13612,7 +13738,7 @@ var gu = class extends HTMLElement {
 				...e.ports || {}
 			}, s) {
 				try {
-					let n = lu(r, e, this.modelData.palette, () => this.invalidate(), (e) => this.dispatchEvent(new CustomEvent("lc-warning", { detail: e })));
+					let n = du(r, e, this.modelData.palette, () => this.invalidate(), (e) => this.dispatchEvent(new CustomEvent("lc-warning", { detail: e })));
 					n.root.scale.multiply(new U().fromArray(e.s)), t.appearanceMaterials = [], n.root.traverse((e) => {
 						if (!(e.isMesh || e.isLine || e.isLineSegments || e.isSprite)) return;
 						e.userData.node = t;
@@ -13633,7 +13759,7 @@ var gu = class extends HTMLElement {
 						entityId: e.id,
 						error: r
 					} }));
-					let i = $l(Ql("box"));
+					let i = tu(eu("box"));
 					t.material = new ia({
 						color: "#ed8f98",
 						roughness: .72,
@@ -13642,8 +13768,8 @@ var gu = class extends HTMLElement {
 				}
 				t.labelSize = new U().fromArray(e.s);
 			} else {
-				let n = o === "box" && Number(e.radius) > 0, r = Ql(o, e.radius, e.segments, e.s);
-				n || $l(r), t.material = new ia({
+				let n = o === "box" && Number(e.radius) > 0, r = eu(o, e.radius, e.segments, e.s);
+				n || tu(r), t.material = new ia({
 					color: a,
 					roughness: .72,
 					metalness: .06,
@@ -13663,7 +13789,7 @@ var gu = class extends HTMLElement {
 					1
 				] : e.s), t.group.add(t.edge);
 			}
-			t.label = mu(e.name, a, t.labelSize, e.type, this.showShellLabels), t.labelAnchor = fu(e, this.modelData.style), t.label.userData.node = t, t.label.traverse((e) => {
+			t.label = _u(e.name, a, t.labelSize, e.type, this.showShellLabels), t.labelAnchor = mu(e, this.modelData.style), t.label.userData.node = t, t.label.traverse((e) => {
 				e.userData.node = t;
 			}), t.group.add(t.label), this.scene.add(t.group);
 		}
@@ -13835,11 +13961,11 @@ var gu = class extends HTMLElement {
 		if (!this.modelData) return;
 		let e = this.selectedRelationIndex === null ? null : this.relations[this.selectedRelationIndex];
 		if (e) {
-			let t = Pl(e), n = (this.modelData.relationGroups || []).find((t) => t.id === e.group), r = new Map((this.modelData.relationGroups || []).map((e) => [e.id, e])), i = this.getRelationBundle(this.selectedRelationIndex), a = e.text ? "<p>" + Ul(e.text) + "</p>" : "", o = Wl(e.url), s = n ? "<h3>GRUPO</h3><p>" + Ul(n.label || n.id) + "</p>" : "", c = i.map(({ index: e, relation: t }) => {
+			let t = Pl(e), n = (this.modelData.relationGroups || []).find((t) => t.id === e.group), r = new Map((this.modelData.relationGroups || []).map((e) => [e.id, e])), i = this.getRelationBundle(this.selectedRelationIndex), a = e.text ? "<p>" + Gl(e.text) + "</p>" : "", o = Kl(e.url), s = n ? "<h3>GRUPO</h3><p>" + Gl(n.label || n.id) + "</p>" : "", c = i.map(({ index: e, relation: t }) => {
 				let n = r.get(t.group), i = [n?.label || n?.id || "Sin grupo", Pl(t)].join(" · ");
-				return "<button class=\"relation" + (e === this.selectedRelationIndex ? " selected" : "") + "\" data-action=\"relation\" data-relation-index=\"" + e + "\"><strong>" + Ul(t.label || `${t.from} → ${t.to}`) + "</strong><small>" + Ul(i) + "</small></button>";
+				return "<button class=\"relation" + (e === this.selectedRelationIndex ? " selected" : "") + "\" data-action=\"relation\" data-relation-index=\"" + e + "\"><strong>" + Gl(t.label || `${t.from} → ${t.to}`) + "</strong><small>" + Gl(i) + "</small></button>";
 			}).join(""), l = i.length === 1 ? "1 conexión" : `${i.length} conexiones`;
-			this.panel.innerHTML = "<button class=\"back\" data-action=\"overview\">← Vista de conjunto</button><button data-action=\"focus-selection\">◎ Enfocar selección</button><div class=\"eyebrow\">RELACIÓN</div><h2>" + Ul(e.label || `${e.from} → ${e.to}`) + "</h2><div class=\"sub\">" + Ul(e.from) + " → " + Ul(e.to) + "</div>" + a + o + s + "<h3>MODO</h3><p>" + Ul(t) + "</p><h3>TUBO VIRTUAL</h3><p>" + Ul(`${e.from} ↔ ${e.to} · ${l}`) + "</p>" + c, this.panel.querySelector("[data-action=\"overview\"]")?.addEventListener("click", () => this.reset()), this.panel.querySelector("[data-action=\"focus-selection\"]")?.addEventListener("click", () => this.focusSelection()), this.panel.querySelectorAll("[data-action=\"relation\"]").forEach((e) => e.addEventListener("click", () => this.selectRelation(Number(e.dataset.relationIndex), { source: "panel" }))), this._applyTheme();
+			this.panel.innerHTML = "<button class=\"back\" data-action=\"overview\">← Vista de conjunto</button><button data-action=\"focus-selection\">◎ Enfocar selección</button><div class=\"eyebrow\">RELACIÓN</div><h2>" + Gl(e.label || `${e.from} → ${e.to}`) + "</h2><div class=\"sub\">" + Gl(e.from) + " → " + Gl(e.to) + "</div>" + a + o + s + "<h3>MODO</h3><p>" + Gl(t) + "</p><h3>TUBO VIRTUAL</h3><p>" + Gl(`${e.from} ↔ ${e.to} · ${l}`) + "</p>" + c, this.panel.querySelector("[data-action=\"overview\"]")?.addEventListener("click", () => this.reset()), this.panel.querySelector("[data-action=\"focus-selection\"]")?.addEventListener("click", () => this.focusSelection()), this.panel.querySelectorAll("[data-action=\"relation\"]").forEach((e) => e.addEventListener("click", () => this.selectRelation(Number(e.dataset.relationIndex), { source: "panel" }))), this._applyTheme();
 			return;
 		}
 		let t = this.selected;
@@ -13849,11 +13975,11 @@ var gu = class extends HTMLElement {
 		}
 		let n = this.relations.filter((e) => e.from === t.id || e.to === t.id), r = this.modelData.entities.filter((e) => e.parent === t.id), i = [], a = /* @__PURE__ */ new Set(), o = t;
 		for (; o && !a.has(o.id);) a.add(o.id), i.unshift(o), o = o.parent ? this.nodes.get(o.parent) : null;
-		let s = "<nav class=\"crumbs\" aria-label=\"Ruta del modelo\"><button data-action=\"overview\">Modelo</button>" + i.map((e, t) => "<span>/</span><button data-action=\"path\" data-id=\"" + Ul(e.id) + "\" class=\"" + (t === i.length - 1 ? "current" : "") + "\">" + Ul(e.name) + "</button>").join("") + "</nav>", c = n.map((e) => {
-			let n = this.relations.indexOf(e), r = e.text ? "<small>" + Ul(e.text) + "</small>" : "";
-			return "<button class=\"relation\" data-action=\"relation\" data-relation-index=\"" + n + "\"><strong>" + Ul(e.label || (e.from === t.id ? e.to : e.from)) + "</strong><small>" + Ul(e.from) + " → " + Ul(e.to) + "</small>" + r + "</button>";
+		let s = "<nav class=\"crumbs\" aria-label=\"Ruta del modelo\"><button data-action=\"overview\">Modelo</button>" + i.map((e, t) => "<span>/</span><button data-action=\"path\" data-id=\"" + Gl(e.id) + "\" class=\"" + (t === i.length - 1 ? "current" : "") + "\">" + Gl(e.name) + "</button>").join("") + "</nav>", c = n.map((e) => {
+			let n = this.relations.indexOf(e), r = e.text ? "<small>" + Gl(e.text) + "</small>" : "";
+			return "<button class=\"relation\" data-action=\"relation\" data-relation-index=\"" + n + "\"><strong>" + Gl(e.label || (e.from === t.id ? e.to : e.from)) + "</strong><small>" + Gl(e.from) + " → " + Gl(e.to) + "</small>" + r + "</button>";
 		}).join("");
-		this.panel.innerHTML = "<button class=\"back\" data-action=\"overview\">← Vista de conjunto</button>" + s + "<button data-action=\"focus-selection\">◎ Enfocar selección</button><div class=\"eyebrow\">" + Ul(wl(t.type) ? "CONTENEDOR" : t.type === "actor" ? "ACTOR EXTERNO" : "COMPONENTE") + "</div><h2>" + Ul(t.name) + "</h2><div class=\"sub\">" + Ul(t.sub || "") + "</div><p>" + Ul(t.text || "") + "</p>" + Wl(t.url) + (wl(t.type) ? "<button data-action=\"toggle-shell\">" + (this.open.has(t.id) ? "Cerrar bloque" : "Abrir bloque") + "</button>" : "") + (r.length ? "<h3>CONTIENE</h3><p>" + r.length + " pieza(s) interna(s).</p>" : "") + "<h3>RELACIONES</h3>" + (c || "<p>No hay relaciones directas.</p>"), this.panel.querySelectorAll("[data-action=\"overview\"]").forEach((e) => e.addEventListener("click", () => this.reset())), this.panel.querySelectorAll("[data-action=\"path\"]").forEach((e) => e.addEventListener("click", () => this.select(e.dataset.id))), this.panel.querySelectorAll("[data-action=\"relation\"]").forEach((e) => e.addEventListener("click", () => this.selectRelation(Number(e.dataset.relationIndex), { source: "panel" }))), this.panel.querySelector("[data-action=\"focus-selection\"]")?.addEventListener("click", () => this.focusSelection()), this.panel.querySelector("[data-action=\"toggle-shell\"]")?.addEventListener("click", () => {
+		this.panel.innerHTML = "<button class=\"back\" data-action=\"overview\">← Vista de conjunto</button>" + s + "<button data-action=\"focus-selection\">◎ Enfocar selección</button><div class=\"eyebrow\">" + Gl(wl(t.type) ? "CONTENEDOR" : t.type === "actor" ? "ACTOR EXTERNO" : "COMPONENTE") + "</div><h2>" + Gl(t.name) + "</h2><div class=\"sub\">" + Gl(t.sub || "") + "</div><p>" + Gl(t.text || "") + "</p>" + Kl(t.url) + (wl(t.type) ? "<button data-action=\"toggle-shell\">" + (this.open.has(t.id) ? "Cerrar bloque" : "Abrir bloque") + "</button>" : "") + (r.length ? "<h3>CONTIENE</h3><p>" + r.length + " pieza(s) interna(s).</p>" : "") + "<h3>RELACIONES</h3>" + (c || "<p>No hay relaciones directas.</p>"), this.panel.querySelectorAll("[data-action=\"overview\"]").forEach((e) => e.addEventListener("click", () => this.reset())), this.panel.querySelectorAll("[data-action=\"path\"]").forEach((e) => e.addEventListener("click", () => this.select(e.dataset.id))), this.panel.querySelectorAll("[data-action=\"relation\"]").forEach((e) => e.addEventListener("click", () => this.selectRelation(Number(e.dataset.relationIndex), { source: "panel" }))), this.panel.querySelector("[data-action=\"focus-selection\"]")?.addEventListener("click", () => this.focusSelection()), this.panel.querySelector("[data-action=\"toggle-shell\"]")?.addEventListener("click", () => {
 			this.toggleContainer(t.id, { source: "panel" });
 		}), this._applyTheme();
 	}
@@ -13951,12 +14077,12 @@ var gu = class extends HTMLElement {
 			e.edge?.material && (e.edge.material.opacity = (e === this.selected ? 1 : .65) * t);
 			let o = wl(e.type) && r, s = o, c = e.label.userData.front, l = e.label.userData.back, u = e.label.userData.top, d = e.label.userData.height, f = e.label.userData.width, p = e.label.userData.textOffsetX || 0;
 			e.label.userData.textOffsetY;
-			let m = e.labelSize || new U().fromArray(e.s), h = pu(e.labelAnchor, m, f, d);
+			let m = e.labelSize || new U().fromArray(e.s), h = hu(e.labelAnchor, m, f, d);
 			e.label.visible = n;
-			let g = this._worldPosition(e), _ = this.itemFacing === "camera" && !wl(e.type) || this.camera.position.z >= g.z, v = this.camera.position.y > g.y + .25;
-			if (h) c.visible = _, l.visible = !_, u.visible = !1, c.scale.setScalar(1), l.scale.setScalar(1), c.position.set(h.x, h.y, m.z / 2 + .025), l.position.set(h.x, h.y, -m.z / 2 - .025), c.rotation.z = h.frontRotation, l.rotation.z = h.backRotation, c.material.color.set(15923964), l.material.color.set(15923964), c.material.opacity = t, l.material.opacity = t;
+			let g = this._worldPosition(e), _ = this.itemFacing === "camera" && !wl(e.type) || this.camera.position.z >= g.z, v = e.label.userData.visibleFace || (_ ? "front" : "back"), y = o ? gu(this.camera.position, g, v) : null;
+			if (y && (e.label.userData.visibleFace = y), h) c.visible = _, l.visible = !_, u.visible = !1, c.scale.setScalar(1), l.scale.setScalar(1), c.position.set(h.x, h.y, m.z / 2 + .025), l.position.set(h.x, h.y, -m.z / 2 - .025), c.rotation.z = h.frontRotation, l.rotation.z = h.backRotation, c.material.color.set(15923964), l.material.color.set(15923964), c.material.opacity = t, l.material.opacity = t;
 			else if (wl(e.type)) {
-				c.rotation.z = 0, l.rotation.z = 0, c.visible = _ && (!o || s), l.visible = !_ && (!o || s), u.visible = s && v;
+				c.rotation.z = 0, l.rotation.z = 0, c.visible = o ? y === "front" : _, l.visible = o ? y === "back" : !_, u.visible = s && y === "top";
 				let e = s ? .52 : 1;
 				c.scale.setScalar(e), c.position.x = s ? -m.x / 2 + .18 + f * e / 2 - p * e : 0;
 				let n = .18;
@@ -14007,6 +14133,28 @@ var gu = class extends HTMLElement {
 			node: r.object.userData.node
 		} : null;
 	}
+	_setCopyToolbarStatus(e, t = "idle") {
+		let n = this.shadowRoot?.querySelector("[data-toolbar-status=\"copy\"]");
+		n && (n.textContent = e, n.style.color = t === "error" ? "#ffaaa0" : t === "success" ? "#9ff0df" : "", this._copyStatusTimer && globalThis.clearTimeout?.(this._copyStatusTimer), t !== "idle" && (this._copyStatusTimer = globalThis.setTimeout?.(() => {
+			n.textContent = "PNG", n.style.color = "", this._copyStatusTimer = null;
+		}, t === "error" ? 4200 : 2400)));
+	}
+	async _copyFromToolbar(e, t) {
+		t && (t.disabled = !0), this._setCopyToolbarStatus("Copiando…");
+		try {
+			let t = await this.copyFrame({
+				background: e,
+				scale: 2,
+				fallback: "download",
+				source: "toolbar"
+			});
+			return this._setCopyToolbarStatus(t.method === "clipboard" ? "Copiado" : "Descargado", "success"), t;
+		} catch (e) {
+			return this._setCopyToolbarStatus("Error", "error"), globalThis.console?.error?.("Atlas PNG export failed.", e), null;
+		} finally {
+			t && (t.disabled = !1);
+		}
+	}
 	_bindControls() {
 		this.toolbar?.querySelectorAll(".toolbar-menu").forEach((e) => e.addEventListener("toggle", () => {
 			e.open && this._closeToolbarMenus(e);
@@ -14022,7 +14170,7 @@ var gu = class extends HTMLElement {
 			}, { source: "toolbar" }), n === "focus-hide" && this.setFocusFilter({
 				mode: "connected",
 				effect: "hide"
-			}, { source: "toolbar" }), n === "focus-selection" && this.focusSelection(), n === "focus-layout" && this.setFocusFilter({ layout: this.focusFilter.layout === "reflow" ? "preserve" : "reflow" }, { source: "toolbar" }), t?.closest?.(".toolbar-popover") && n !== "relation-group-toggle" && this._closeToolbarMenus(), n && this.invalidate();
+			}, { source: "toolbar" }), n === "focus-selection" && this.focusSelection(), n === "focus-layout" && this.setFocusFilter({ layout: this.focusFilter.layout === "reflow" ? "preserve" : "reflow" }, { source: "toolbar" }), n === "copy-theme" && this._copyFromToolbar("theme", t), n === "copy-transparent" && this._copyFromToolbar("transparent", t), t?.closest?.(".toolbar-popover") && n !== "relation-group-toggle" && this._closeToolbarMenus(), n && this.invalidate();
 		}), this.canvas.addEventListener("contextmenu", (e) => e.preventDefault()), this.canvas.addEventListener("pointerdown", (e) => {
 			if (e.pointerType !== "touch" && ![
 				0,
@@ -14136,11 +14284,11 @@ var gu = class extends HTMLElement {
 	}
 	_showError(e) {
 		let t = this.shadowRoot.querySelector(".viewport"), n = t.querySelector(".error");
-		n ? n.textContent = e : t.insertAdjacentHTML("beforeend", "<div class=\"error\" role=\"alert\">" + Ul(e) + "</div>");
+		n ? n.textContent = e : t.insertAdjacentHTML("beforeend", "<div class=\"error\" role=\"alert\">" + Gl(e) + "</div>");
 	}
 };
-customElements.get("liquidcars-atlas") || customElements.define("liquidcars-atlas", gu);
+customElements.get("liquidcars-atlas") || customElements.define("liquidcars-atlas", wu);
 //#endregion
-export { $c as ATLAS_VERSION, tl as DEFAULT_RELATION_MARKER, gu as LiquidCarsAtlas, nl as RELATION_DISPLAY_MODES, hu as captureRendererFrame, su as createSvgExtrudeGeometry, xl as getGeometryCatalog, Sl as getGeometryPackCatalog, pu as labelPlacementForAnchor, du as normalizeLabelAnchor, ql as normalizeModel, yl as registerGeometryPack, fu as resolveEntityLabelAnchor, bl as unregisterGeometryPack };
+export { $c as ATLAS_VERSION, tl as DEFAULT_RELATION_MARKER, wu as LiquidCarsAtlas, nl as RELATION_DISPLAY_MODES, Su as canvasToPngBlob, xu as captureRendererFrame, lu as createSvgExtrudeGeometry, Cu as downloadPngBlob, xl as getGeometryCatalog, Sl as getGeometryPackCatalog, hu as labelPlacementForAnchor, pu as normalizeLabelAnchor, Yl as normalizeModel, gu as preferredContainerLabelFace, yl as registerGeometryPack, mu as resolveEntityLabelAnchor, bl as unregisterGeometryPack };
 
 //# sourceMappingURL=liquidcars-atlas.js.map