@liquidcars/atlas 0.1.49 → 0.1.50

package/README.md

@@ -191,6 +191,7 @@ generar el archivo.
 - `palette`: mapa de nombres de color a valores CSS/hex.
 - `theme` (opcional): configuración de `background`, `lighting`, `panel`, `toolbar`, `breadcrumbs`, `hint` y `ui`. `ui` permite mostrar u ocultar `panel`, `toolbar`, `breadcrumbs` y `hint`.
 - `render.camera` (opcional): vista inicial con `position`, `target` y `zoom`. Las coordenadas pertenecen al espacio del modelo; `zoom` conserva el encuadre relativo entre tamaños de visor.
+- `render.initialMode`: `2d` o `3d`. `render.views."2d".theme` admite `auto` (hereda el fondo del documento), `light` o `dark`; `render.views."2d".grid` activa o desactiva los puntos (por defecto, `true`). `render.views."2d".background` permite un color CSS concreto. `render.ui.toolbar` acepta `true`, `false` o una lista como `[mode, zoom, fit]` para mostrar solo esos controles.
 - `render.focus` (opcional): filtrado visual por selección. `mode` acepta `all` o `connected`, `effect` acepta `dim` o `hide`, y `layout` distingue posiciones estables (`preserve`) de una proyección recompilada (`reflow`).
 - `render.relationMarker` (opcional): forma de los indicadores animados de relación. Admite `cone` (por defecto, conserva el sentido en capturas estáticas) o `ring`.
 - `style.label.anchor` (opcional): posición predeterminada de las etiquetas de los elementos (`auto`, `top`, `bottom`, `left` o `right`). Si se omite, los elementos usan `bottom`; una entidad puede sobrescribirlo con su propio `style.label.anchor`. Los títulos de contenedores mantienen su colocación automática salvo override explícito.

package/dist/liquidcars-atlas.js

@@ -11890,7 +11890,7 @@ var $c = class {
 	}
 }, el = {
 	name: "@liquidcars/atlas",
-	version: "0.1.49",
+	version: "0.1.50",
 	description: "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
 	type: "module",
 	scripts: {
@@ -12353,7 +12353,7 @@ function vl(e, t = {}) {
 		return `<path data-relation="${s}" data-mode="${o}" d="M${H(i)} L${H(a)}" fill="none" stroke="${tl(t.connectionColor || "#58788d")}" stroke-width="2"${o === "bidirectional" ? " marker-start=\"url(#atlas-diagram-arrow)\"" : ""} marker-end="url(#atlas-diagram-arrow)"${l}/>`;
 	}).join(""), pe = t.canvasColor || "#f5f5f5", W = /* @__PURE__ */ new Map(), G = [...re.values()].sort((e, t) => ne(e.node) - ne(t.node)).map((n) => {
 		if (v(n.node.id)) return "";
-		let r = n.node.material?.color || new Y("#58788d"), i = `#${r.getHexString()}`, o = `#${r.clone().lerp(new Y("#254253"), .48).getHexString()}`, s = n.node.parent, c = 0;
+		let r = n.node.material?.color || new Y("#58788d"), i = `#${r.getHexString()}`, o = `#${r.clone().lerp(new Y(t.containerInk || "#254253"), t.containerInk ? .65 : .48).getHexString()}`, s = n.node.parent, c = 0;
 		for (; s && !W.has(s) && c++ < e.nodes.size;) s = e.nodes.get(s)?.parent;
 		let l = W.get(s) || pe, u = al(l, i, .14);
 		W.set(n.node.id, u);
@@ -12410,7 +12410,7 @@ var bl = (e) => String(e ?? "").replace(/[&<>"']/g, (e) => ({
 	">": "&gt;",
 	"\"": "&quot;",
 	"'": "&#39;"
-})[e]), xl = (e, t, n) => Math.min(n, Math.max(t, e)), Sl = "\n  .diagram-view{position:absolute;inset:0;overflow:auto;background-color:#f5f5f5;background-image:radial-gradient(circle,#b3b3b3 .8px,transparent 1px);background-size:16px 16px;color:#172c3a;cursor:grab;touch-action:none}\n  .diagram-view[hidden],:host(:not([data-view-mode=\"2d\"])) .diagram-view{display:none!important}\n  :host([data-view-mode=\"2d\"]) .viewport>canvas,:host([data-view-mode=\"2d\"]) .atlas-jump{visibility:hidden;pointer-events:none}\n  :host([data-view-mode=\"2d\"]) .toolbar-group[data-toolbar-group=\"camera\"],\n  :host([data-view-mode=\"2d\"]) .toolbar-group[data-toolbar-group=\"copy\"]{display:none}\n  :host(:not([data-view-mode=\"2d\"])) .toolbar-group[data-toolbar-group=\"diagram\"]{display:none}\n  :host(:not([data-view-mode=\"2d\"])) [data-action=\"diagram-relations-within\"]{display:none!important}\n  :host([data-view-mode=\"2d\"]) .toolbar{width:max-content;max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center}\n  :host([data-view-mode=\"2d\"]) .toolbar-group[data-toolbar-group=\"diagram\"]{flex-wrap:wrap;justify-content:center}\n  .diagram-content{position:relative;width:max-content;min-width:100%;min-height:100%;display:grid;place-items:center;padding:12px}\n  .diagram-content svg{display:block;max-width:none;overflow:visible}\n  .diagram-content [data-entity],.diagram-content [data-relation]{cursor:pointer}\n  .diagram-content [data-entity]:hover,.diagram-content [data-relation]:hover{filter:drop-shadow(0 0 5px #23a58f)}\n  .diagram-content [data-entity].selected,.diagram-content [data-relation].selected{filter:drop-shadow(0 0 7px #008fcb)}\n  .diagram-view.dragging{cursor:grabbing}\n  .diagram-toolbar select,.diagram-toolbar input{accent-color:#6ad7c0}\n  .diagram-toolbar .toolbar-popover{max-height:min(430px,65vh);overflow:auto}\n  .diagram-toolbar .toolbar-option.checkbox{display:flex;gap:8px;align-items:center}\n  .diagram-toolbar .toolbar-option.checkbox input{pointer-events:none}\n  .diagram-toolbar .diagram-spacing{padding:7px 9px;color:#dbe7ec;font-size:12px}\n  .diagram-toolbar .diagram-spacing input{width:100%;display:block;margin-top:6px}\n  .diagram-toolbar .diagram-items{max-height:220px;overflow:auto}\n  .diagram-orientation-cube{position:absolute;z-index:9;top:12px;left:12px;width:110px;height:110px;touch-action:none;cursor:grab}\n  .diagram-orientation-cube[hidden],:host(:not([data-view-mode=\"2d\"])) .diagram-orientation-cube{display:none!important}\n  .diagram-orientation-cube svg{width:100%;height:100%}\n  .diagram-orientation-cube polygon{fill:#476782;stroke:#a8d0df;stroke-width:1.4}\n  .diagram-orientation-cube polygon:hover{fill:#4caeaa}\n  .diagram-orientation-cube text{fill:#fff;font:bold 10px system-ui;pointer-events:none}\n  .diagram-orientation-cube circle{fill:#132b3b;stroke:#50758b}\n  .diagram-toolbar .diagram-orbit,.diagram-toolbar .diagram-camera-zoom{display:block;padding:6px 9px;color:#dbe7ec;font-size:12px}\n  .diagram-toolbar .diagram-orbit select,.diagram-toolbar .diagram-camera-zoom input{display:block;width:100%;margin-top:4px}\n  :host([data-view-mode=\"2d\"]) .hint{color:#527286}\n  @media print{:host([data-view-mode=\"2d\"]) .diagram-view{display:block!important;overflow:hidden}.diagram-orientation-cube{display:none!important}}\n", Cl = (e, t, n) => `<details class="toolbar-menu" data-toolbar-menu="diagram-${e}"><summary aria-label="${t}" title="${t}"><span class="toolbar-menu-status">${t}</span><svg class="toolbar-menu-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 10 4 4 4-4"/></svg></summary><div class="toolbar-popover" role="menu"><div class="toolbar-popover-title">${t}</div>${n}</div></details>`, wl = (e, t) => `<button type="button" class="toolbar-option" data-action="${e}"><span>${t}</span></button>`, Tl = `<div class="toolbar-group diagram-toolbar" data-toolbar-group="diagram">
+})[e]), xl = (e, t, n) => Math.min(n, Math.max(t, e)), Sl = "\n  .toolbar button[hidden],.toolbar-menu[hidden]{display:none!important}\n  .diagram-view{position:absolute;inset:0;overflow:auto;background-color:var(--lc-diagram-background,#f5f5f5);background-image:radial-gradient(circle,var(--lc-diagram-dot,#b3b3b3) .8px,transparent 1px);background-size:16px 16px;color:#172c3a;cursor:grab;touch-action:none}\n  .diagram-view[hidden],:host(:not([data-view-mode=\"2d\"])) .diagram-view{display:none!important}\n  :host([data-view-mode=\"2d\"]) .viewport>canvas,:host([data-view-mode=\"2d\"]) .atlas-jump{visibility:hidden;pointer-events:none}\n  :host([data-view-mode=\"2d\"]) .toolbar-group[data-toolbar-group=\"camera\"],\n  :host([data-view-mode=\"2d\"]) .toolbar-group[data-toolbar-group=\"copy\"]{display:none}\n  :host(:not([data-view-mode=\"2d\"])) .toolbar-group[data-toolbar-group=\"diagram\"]{display:none}\n  :host(:not([data-view-mode=\"2d\"])) [data-action=\"diagram-relations-within\"]{display:none!important}\n  :host([data-view-mode=\"2d\"]) .toolbar{width:max-content;max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center}\n  :host([data-view-mode=\"2d\"]) .toolbar-group[data-toolbar-group=\"diagram\"]{flex-wrap:wrap;justify-content:center}\n  .diagram-content{position:relative;width:max-content;min-width:100%;min-height:100%;display:grid;place-items:center;padding:12px}\n  .diagram-content svg{display:block;max-width:none;overflow:visible}\n  .diagram-content [data-entity],.diagram-content [data-relation]{cursor:pointer}\n  .diagram-content [data-entity]:hover,.diagram-content [data-relation]:hover{filter:drop-shadow(0 0 5px #23a58f)}\n  .diagram-content [data-entity].selected,.diagram-content [data-relation].selected{filter:drop-shadow(0 0 7px #008fcb)}\n  .diagram-view.dragging{cursor:grabbing}\n  .diagram-toolbar select,.diagram-toolbar input{accent-color:#6ad7c0}\n  .diagram-toolbar .toolbar-popover{max-height:min(430px,65vh);overflow:auto}\n  .diagram-toolbar .toolbar-option.checkbox{display:flex;gap:8px;align-items:center}\n  .diagram-toolbar .toolbar-option.checkbox input{pointer-events:none}\n  .diagram-toolbar .diagram-spacing{padding:7px 9px;color:#dbe7ec;font-size:12px}\n  .diagram-toolbar .diagram-spacing input{width:100%;display:block;margin-top:6px}\n  .diagram-toolbar .diagram-items{max-height:220px;overflow:auto}\n  .diagram-orientation-cube{position:absolute;z-index:9;top:12px;left:12px;width:110px;height:110px;touch-action:none;cursor:grab}\n  .diagram-orientation-cube[hidden],:host(:not([data-view-mode=\"2d\"])) .diagram-orientation-cube{display:none!important}\n  .diagram-orientation-cube svg{width:100%;height:100%}\n  .diagram-orientation-cube polygon{fill:#476782;stroke:#a8d0df;stroke-width:1.4}\n  .diagram-orientation-cube polygon:hover{fill:#4caeaa}\n  .diagram-orientation-cube text{fill:#fff;font:bold 10px system-ui;pointer-events:none}\n  .diagram-orientation-cube circle{fill:#132b3b;stroke:#50758b}\n  .diagram-toolbar .diagram-orbit,.diagram-toolbar .diagram-camera-zoom{display:block;padding:6px 9px;color:#dbe7ec;font-size:12px}\n  .diagram-toolbar .diagram-orbit select,.diagram-toolbar .diagram-camera-zoom input{display:block;width:100%;margin-top:4px}\n  :host([data-view-mode=\"2d\"]) .hint{color:var(--lc-diagram-hint,#527286)}\n  @media print{:host([data-view-mode=\"2d\"]) .diagram-view{display:block!important;overflow:hidden}.diagram-orientation-cube{display:none!important}}\n", Cl = (e, t, n) => `<details class="toolbar-menu" data-toolbar-menu="diagram-${e}"><summary aria-label="${t}" title="${t}"><span class="toolbar-menu-status">${t}</span><svg class="toolbar-menu-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 10 4 4 4-4"/></svg></summary><div class="toolbar-popover" role="menu"><div class="toolbar-popover-title">${t}</div>${n}</div></details>`, wl = (e, t) => `<button type="button" class="toolbar-option" data-action="${e}"><span>${t}</span></button>`, Tl = `<div class="toolbar-group diagram-toolbar" data-toolbar-group="diagram">
   <button class="toolbar-icon" data-action="diagram-minus" aria-label="Zoom out" title="Zoom out">−</button>
   <button class="toolbar-icon" data-action="diagram-plus" aria-label="Zoom in" title="Zoom in">＋</button>
   <button class="toolbar-icon" data-action="diagram-fit" aria-label="Fit diagram" title="Fit diagram">⛶</button>
@@ -12443,6 +12443,8 @@ var bl = (e) => String(e ?? "").replace(/[&<>"']/g, (e) => ({
 	labels: !0,
 	relations: "all",
 	showOrientationCube: !0,
+	theme: "auto",
+	grid: !0,
 	focus: {
 		mode: "all",
 		effect: "dim",
@@ -12465,6 +12467,12 @@ function Dl(e = {}) {
 		cameraZoom: xl(Number(t.cameraZoom) || 1, .5, 5),
 		gap: xl(Number(t.gap ?? 20) || 0, 0, 150),
 		labels: t.labels !== !1,
+		theme: [
+			"auto",
+			"light",
+			"dark"
+		].includes(t.theme) ? t.theme : "auto",
+		grid: t.grid !== !1,
 		showOrientationCube: t.showOrientationCube !== !1,
 		relations: [
 			"all",
@@ -12767,7 +12775,7 @@ var Il = class {
 		}));
 	}
 	renderOptions(e = {}) {
-		let t = this.config, n = this._focusedIds();
+		let t = this.config, n = this._focusedIds(), r = new Y(t.background || (t.theme === "dark" ? "#2d2f31" : t.theme === "light" ? "#f5f5f5" : null) || globalThis.getComputedStyle?.(this.root).backgroundColor || "#f5f5f5"), i = r.r * .2126 + r.g * .7152 + r.b * .0722 < .32, a = `#${r.getHexString()}`;
 		return {
 			cameraView: t.cameraView,
 			cameraFrame: {
@@ -12785,7 +12793,11 @@ var Il = class {
 			gap: t.gap,
 			labels: t.labels,
 			placements: t.placements,
-			background: "#f5f5f5",
+			background: a,
+			canvasColor: a,
+			labelColor: i ? "#e9f0f5" : "#172c3a",
+			connectionColor: i ? "#b1c7d3" : "#58788d",
+			...i ? { containerInk: "#e9f0f5" } : {},
 			...e
 		};
 	}
@@ -12825,7 +12837,7 @@ var Il = class {
 	}
 	refresh() {
 		if (this._refreshQueued = !1, this.atlas.viewMode !== "2d" || !this.atlas.ready || !this.root.clientWidth) return !1;
-		this._syncControls();
+		this._syncControls(), this.root.style.backgroundColor = this.config.background || (this.config.theme === "dark" ? "#2d2f31" : this.config.theme === "light" ? "#f5f5f5" : ""), this.root.style.backgroundImage = this.config.grid ? "" : "none", this.config.theme === "auto" ? this.root.style.removeProperty("--lc-diagram-dot") : this.root.style.setProperty("--lc-diagram-dot", this.config.theme === "dark" ? "#73777c" : "#b3b3b3");
 		let e = this.renderOptions({
 			faceCache: /* @__PURE__ */ new Map(),
 			background: null,
@@ -12833,31 +12845,38 @@ var Il = class {
 		}), t = {
 			width: this.root.clientWidth,
 			height: this.root.clientHeight
-		}, n = (e) => Math.min(1, (t.width - 32) / e.width, (t.height - 32) / e.height), r = this.atlas.exportDiagramSvg({
+		}, n = this.atlas.toolbar, r = {
+			top: this.atlas.shadowRoot.querySelector(".hint")?.hidden ? 16 : 34,
+			right: 16,
+			bottom: this.atlas.toolbarVisible && !n.hidden ? n.offsetHeight + 44 : 16,
+			left: this.cube.hidden ? 16 : 132
+		};
+		this.content.style.padding = `${r.top}px ${r.right}px ${r.bottom}px ${r.left}px`;
+		let i = (e) => Math.min(1, (t.width - r.left - r.right) / e.width, (t.height - r.top - r.bottom) / e.height), a = this.atlas.exportDiagramSvg({
 			...e,
 			measureOnly: !0
-		}), i = this.zoom === "fit" ? n(r) : this.zoom;
+		}), o = this.zoom === "fit" ? i(a) : this.zoom;
 		for (let t = 0; t < (this.zoom === "fit" ? 8 : 1); t += 1) {
-			i = Math.max(.08, i);
+			o = Math.max(.08, o);
 			let t = this.atlas.exportDiagramSvg({
 				...e,
-				observerScale: i,
+				observerScale: o,
 				measureOnly: !0
 			});
 			if (this.zoom !== "fit") break;
-			let r = n(t);
-			if (Math.abs(r - i) < .002) break;
-			i = r;
+			let n = i(t);
+			if (Math.abs(n - o) < .002) break;
+			o = n;
 		}
-		let a = this.atlas.exportDiagramSvg({
+		let s = this.atlas.exportDiagramSvg({
 			...e,
-			observerScale: i
+			observerScale: o
 		});
-		this.result = a;
-		let o = this.root.scrollLeft, s = this.root.scrollTop;
-		this.content.innerHTML = a.svg;
-		let c = this.content.querySelector("svg");
-		return c.style.width = `${Math.round(a.width * i)}px`, c.style.height = `${Math.round(a.height * i)}px`, this.root.scrollLeft = this.zoom === "fit" ? 0 : o, this.root.scrollTop = this.zoom === "fit" ? 0 : s, this._syncSelection(), !0;
+		this.zoom === "fit" && (this._lastFitZoom = o), this.result = s;
+		let c = this.root.scrollLeft, l = this.root.scrollTop;
+		this.content.innerHTML = s.svg;
+		let u = this.content.querySelector("svg");
+		return u.style.width = `${Math.round(s.width * o)}px`, u.style.height = `${Math.round(s.height * o)}px`, this.root.scrollLeft = this.zoom === "fit" ? 0 : c, this.root.scrollTop = this.zoom === "fit" ? 0 : l, this._syncSelection(), !0;
 	}
 	_syncSelection() {
 		if (this.content.querySelectorAll(".selected").forEach((e) => e.classList.remove("selected")), this.atlas.selectedId) for (let e of this.content.querySelectorAll("[data-entity]")) e.dataset.entity === this.atlas.selectedId && e.classList.add("selected");
@@ -12914,7 +12933,7 @@ var Il = class {
 	}
 	focusSelection() {
 		if (this.zoom === "fit" && this.result) {
-			let e = Math.min(1, (this.root.clientWidth - 32) / this.result.width, (this.root.clientHeight - 32) / this.result.height);
+			let e = this._lastFitZoom || 1;
 			this.zoom = xl(Math.max(.75, e * 1.8), .08, 4), this.refresh();
 		}
 		let e = [...this.content.querySelectorAll("[data-entity], [data-relation]")].find((e) => e.dataset.entity === this.atlas.selectedId || e.dataset.relation === this.atlas.selectedRelation?.id);
@@ -12926,8 +12945,8 @@ var Il = class {
 		if (!e) return !1;
 		if (e === "diagram-fit") return this.zoom = "fit", this.refresh(), !0;
 		if (e === "diagram-plus" || e === "diagram-minus") {
-			let t = this.zoom === "fit" ? Math.min(1, (this.root.clientWidth - 32) / (this.result?.width || 1), (this.root.clientHeight - 32) / (this.result?.height || 1)) : this.zoom;
-			return this.zoom = xl(t * (e === "diagram-plus" ? 1.4 : 1 / 1.4), .08, 4), this.refresh(), !0;
+			let t = this.zoom === "fit" ? this._lastFitZoom || 1 : this.zoom;
+			return this.zoom = xl(t * (e === "diagram-plus" ? 1.15 : 1 / 1.15), .08, 4), this.refresh(), !0;
 		}
 		if (e === "labels") return this.setConfig({ labels: !this.config.labels }, { layout: !0 }), !0;
 		if (e === "diagram-cube") return this.setConfig({ showOrientationCube: !this.config.showOrientationCube }), !0;
@@ -13050,7 +13069,7 @@ var Il = class {
 				this.root.scrollLeft -= t, this.root.scrollTop -= n;
 				let i = t + this.root.scrollLeft - e, a = n + this.root.scrollTop - r;
 				if ((i || a) && this.config.cameraZoom > 1) {
-					let e = Ml(this.config.cameraView), t = this.zoom === "fit" ? Math.min(1, this.root.clientWidth / (this.result?.width || 1), this.root.clientHeight / (this.result?.height || 1)) : this.zoom, n = Fl(this.config.cameraView.target, e, i, a, 80 * Math.max(.08, t));
+					let e = Ml(this.config.cameraView), t = this.zoom === "fit" ? this._lastFitZoom || 1 : this.zoom, n = Fl(this.config.cameraView.target, e, i, a, 80 * Math.max(.08, t));
 					this.setConfig({ cameraView: jl(n, e.yaw, e.pitch) }, {
 						layout: !0,
 						defer: !0
@@ -13065,7 +13084,7 @@ var Il = class {
 		this.root.addEventListener("pointerup", t), this.root.addEventListener("pointercancel", t), this.root.addEventListener("contextmenu", (e) => e.preventDefault()), this.root.addEventListener("wheel", (e) => {
 			if (!e.altKey && !e.ctrlKey) return;
 			e.preventDefault();
-			let t = this.zoom === "fit" ? Math.min(1, this.root.clientWidth / (this.result?.width || 1), this.root.clientHeight / (this.result?.height || 1)) : this.zoom;
+			let t = this.zoom === "fit" ? this._lastFitZoom || 1 : this.zoom;
 			this.zoom = xl(t * (e.deltaY < 0 ? 1.15 : 1 / 1.15), .08, 4), this.scheduleRefresh();
 		}, { passive: !1 });
 	}
@@ -13907,8 +13926,8 @@ function cd(e, t, n, r, i) {
 			side: a.doubleSided ? 2 : 0
 		}), h, g = a.icon, _ = a.image, v = null;
 		if (typeof _ == "string" && _) {
-			if (v = ad(_), m.map = new Ae(v?.canvas || new Image()), !v) {
-				let n = m.map.image;
+			if (v = ad(_), m.map = v ? new wr(v.canvas) : a.fallbackIcon ? Yu(a.fallbackIcon) : new Ae(new Image()), !v) {
+				let n = a.fallbackIcon ? new Image() : m.map.image;
 				n.crossOrigin = "anonymous";
 				let o = !1, s = null, c = /^\s*<svg(?:\s|>)/i.test(_) || /^data:image\/svg\+xml/i.test(_) || /\.svg(?:[?#]|$)/i.test(_), l = new AbortController(), u = () => {
 					s &&= (URL.revokeObjectURL(s), null);
@@ -13919,12 +13938,13 @@ function cd(e, t, n, r, i) {
 						u();
 						return;
 					}
+					let s = n;
 					if (c) try {
 						let e = (n.naturalWidth || 1) / Math.max(1, n.naturalHeight || 1), t = 1024, r = document.createElement("canvas");
 						r.width = e >= 1 ? t : Math.max(1, Math.round(t * e)), r.height = e >= 1 ? Math.max(1, Math.round(t / e)) : t;
 						let i = r.getContext("2d");
 						if (!i) throw Error("Canvas 2D is unavailable");
-						i.clearRect(0, 0, r.width, r.height), i.drawImage(n, 0, 0, r.width, r.height), m.map.image = r, od(_, r, n.naturalWidth / Math.max(1, n.naturalHeight));
+						i.clearRect(0, 0, r.width, r.height), i.drawImage(n, 0, 0, r.width, r.height), s = r, od(_, r, n.naturalWidth / Math.max(1, n.naturalHeight));
 					} catch (n) {
 						i?.({
 							code: "SVG_RASTERIZE_FAILED",
@@ -13932,11 +13952,15 @@ function cd(e, t, n, r, i) {
 							entityId: t.id,
 							image: _,
 							error: n
-						});
+						}), a.fallbackIcon && (s = null);
 					}
 					u();
-					let s = n.naturalWidth / Math.max(1, n.naturalHeight);
-					sd(a, h, m.map, s), m.map.needsUpdate = !0, r?.();
+					let l = n.naturalWidth / Math.max(1, n.naturalHeight);
+					if (s) {
+						let e = m.map, t = s === n ? new Ae(n) : new wr(s);
+						t.colorSpace = y, sd(a, h, t, l), t.needsUpdate = !0, m.map = t, m.needsUpdate = !0, e.dispose();
+					}
+					r?.();
 				}, p = () => {
 					d(), u(), o || (i?.({
 						code: "IMAGE_LOAD_FAILED",
@@ -14367,7 +14391,7 @@ var xd = class extends HTMLElement {
 		return this._visits = structuredClone(e.visits), this._visitIndex = e.index, this._visits[this._visitIndex] = this._captureVisit(), this._syncDocumentToolbar(), this;
 	}
 	_syncDocumentToolbar() {
-		let e = !!this.documentResolver && this._visitIndex >= 0, t = this.navigationToolbar?.querySelector("[data-toolbar-group=\"navigation\"]");
+		let e = !!this.documentResolver && this._visitIndex >= 0 && (!this._toolbarControls || this._toolbarControls.has("navigation")), t = this.navigationToolbar?.querySelector("[data-toolbar-group=\"navigation\"]");
 		t && (t.hidden = !e), this.navigationToolbar && (this.navigationToolbar.hidden = !e || !this.toolbarVisible);
 		for (let [t, n] of [
 			["atlas-home", e && this._visitIndex > 0],
@@ -14765,13 +14789,35 @@ var xd = class extends HTMLElement {
 	clearFocusFilter(e = {}) {
 		return this.setFocusFilter({ mode: "all" }, e);
 	}
+	_setToolbarControls(e) {
+		let t = Array.isArray(e) ? new Set(e.map((e) => String(e).trim())) : null;
+		if (this._toolbarControls = t, !this.toolbar) return;
+		let n = (...e) => !t || t.has("all") || e.some((e) => t.has(e)), r = this.toolbar, i = {
+			"view-mode": ["mode", "view-mode"],
+			minus: ["zoom", "minus"],
+			plus: ["zoom", "plus"],
+			fit: ["fit"],
+			front: ["front"],
+			"diagram-minus": ["zoom", "diagram-minus"],
+			"diagram-plus": ["zoom", "diagram-plus"],
+			"diagram-fit": ["fit", "diagram-fit"]
+		};
+		for (let e of r.querySelectorAll(".toolbar-group > button[data-action]")) e.hidden = !n(...i[e.dataset.action] || [e.dataset.action]);
+		for (let e of r.querySelectorAll(".toolbar-group > .toolbar-menu")) {
+			let t = e.dataset.toolbarMenu;
+			e.hidden = !n(t, t?.replace(/^diagram-/, "")), e.hidden && (e.open = !1);
+		}
+		for (let e of r.querySelectorAll(".toolbar-group:not([data-toolbar-group=\"navigation\"])")) e.hidden = !e.querySelector(":scope > button[data-action]:not([hidden]), :scope > .toolbar-menu:not([hidden])");
+		this._syncDocumentToolbar();
+	}
 	_applyModelRenderOptions() {
 		let e = {
 			...this.modelData?.render,
 			...this.modelData?.render?.views?.["3d"]
 		};
 		if (!e || typeof e != "object") return this;
-		Kl.includes(e.relationMode) && e.relationMode !== this.relationMode && this.setRelationMode(e.relationMode), vu(e.relationMarker) !== this.relationMarker && this.setRelationMarker(e.relationMarker, {
+		let t = this.modelData?.render?.ui?.toolbar ?? e.toolbar;
+		this._setToolbarControls(Array.isArray(t) ? t : this.modelData?.render?.ui?.controls), Kl.includes(e.relationMode) && e.relationMode !== this.relationMode && this.setRelationMode(e.relationMode), vu(e.relationMarker) !== this.relationMarker && this.setRelationMarker(e.relationMarker, {
 			emit: !1,
 			source: "model"
 		}), Array.isArray(e.visibleRelationGroups) ? this.setVisibleRelationGroups(e.visibleRelationGroups, {
@@ -14781,8 +14827,8 @@ var xd = class extends HTMLElement {
 			emit: !1,
 			source: "model"
 		}), Object.hasOwn(e, "selectionMode") && e.selectionMode !== this.selectionMode && this.setSelectionMode(e.selectionMode);
-		let t = e.navigation?.onSelect ?? e.selectionNavigation;
-		return t != null && t !== this.selectionNavigation && this.setSelectionNavigation(t), Object.hasOwn(e, "toolbar") && e.toolbar !== !1 !== this.toolbarVisible && this.setToolbarVisible(e.toolbar !== !1), Object.hasOwn(e, "shellLabels") && e.shellLabels !== !1 !== this.showShellLabels && this.setShellLabels(e.shellLabels !== !1), Object.hasOwn(e, "itemFacing") && _u(e.itemFacing) !== this.itemFacing && this.setItemFacing(e.itemFacing, {
+		let n = e.navigation?.onSelect ?? e.selectionNavigation;
+		return n != null && n !== this.selectionNavigation && this.setSelectionNavigation(n), t !== void 0 && t !== !1 !== this.toolbarVisible && this.setToolbarVisible(t !== !1), Object.hasOwn(e, "shellLabels") && e.shellLabels !== !1 !== this.showShellLabels && this.setShellLabels(e.shellLabels !== !1), Object.hasOwn(e, "itemFacing") && _u(e.itemFacing) !== this.itemFacing && this.setItemFacing(e.itemFacing, {
 			emit: !1,
 			source: "model"
 		}), e.focus && this.setFocusFilter(e.focus, { emit: !1 }), this;
@@ -15144,7 +15190,7 @@ var xd = class extends HTMLElement {
 		t.setProperty("--lc-bg", e.background.color), t.setProperty("--lc-bg-glow", e.background.glow), t.setProperty("--lc-bg-fade", e.background.fade), t.setProperty("--lc-panel-bg", e.panel.background), t.setProperty("--lc-panel-border", e.panel.border), t.setProperty("--lc-panel-text", e.panel.text), t.setProperty("--lc-panel-title", e.panel.title), t.setProperty("--lc-toolbar-bg", e.toolbar.background), t.setProperty("--lc-toolbar-border", e.toolbar.border), t.setProperty("--lc-toolbar-text", e.toolbar.text), t.setProperty("--lc-toolbar-active", e.toolbar.active), t.setProperty("--lc-toolbar-active-text", e.toolbar.activeText), t.setProperty("--lc-crumb-bg", e.breadcrumbs.background), t.setProperty("--lc-crumb-text", e.breadcrumbs.text), t.setProperty("--lc-crumb-active", e.breadcrumbs.active), t.setProperty("--lc-crumb-active-text", e.breadcrumbs.activeText), t.setProperty("--lc-hint", e.hint);
 		let n = this.shadowRoot.querySelector(".atlas"), r = this.shadowRoot.querySelector(".toolbar"), i = this.shadowRoot.querySelector(".panel"), a = this.shadowRoot.querySelector(".hint");
 		n && (n.dataset.panel = this.panelVisible ? "visible" : "hidden");
-		let o = this.toolbarVisible, s = this.panelVisible, c = e.ui.hint !== !1;
+		let o = this.toolbarVisible, s = this.panelVisible, c = (this.modelData?.render?.ui?.hint ?? e.ui.hint) !== !1;
 		r && (r.dataset.hidden = String(!o), r.hidden = !o, r.style.setProperty("display", o ? "flex" : "none", "important")), this._syncDocumentToolbar(), i && (i.dataset.hidden = String(!s), i.hidden = !s), this._syncPanelToolbar(), a && (a.dataset.hidden = String(!c), a.hidden = !c), this.shadowRoot.querySelectorAll(".crumbs").forEach((t) => {
 			t.dataset.hidden = String(e.ui.breadcrumbs === !1), t.hidden = e.ui.breadcrumbs === !1;
 		});