@roomle/web-sdk 5.1.0-alpha.4 → 5.1.0-alpha.6

package/lib/{roomle-webgpu-renderer-BfZKcXSz.mjs → roomle-webgpu-renderer-BSvxbopA.mjs}

@@ -1,18 +1,18 @@
-import { Ar as e, Br as t, Ci as n, Cr as r, En as i, Gi as a, Gn as o, J as s, Jr as c, Kn as l, Mr as u, On as d, Qt as f, Si as p, Tt as m, Ui as h, V as g, Y as _, _i as v, bi as y, ct as b, g as ee, gi as te, hi as x, hr as S, ht as C, in as ne, jr as w, kr as re, li as ie, ln as T, mi as ae, mr as oe, q as se, rt as ce, sn as E, t as le, vi as ue, w as de, wr as fe, xi as pe, yi as me } from "./three.core-0KaTx8dm.mjs";
-import { h as he, t as ge } from "./shading-settings-BBhR7KcS.mjs";
+import { $t as e, Ar as t, Ci as n, Dn as r, Ei as i, Hr as a, J as o, Kn as s, Nr as c, Pr as l, Si as u, Ti as d, Tr as f, Tt as p, V as m, Vi as h, Xr as g, Y as _, Yi as v, _i as y, an as b, bi as ee, cn as x, ct as S, fi as C, g as w, gr as te, hr as T, ht as ne, jr as re, kn as E, q as ie, qi as ae, qn as oe, rt as se, t as ce, un as le, vi as ue, w as D, wi as de, wr as fe, xi as pe, yi as me } from "./three.core-BTUCraWz.mjs";
+import { h as he, t as ge } from "./shading-settings-6v-7O_Sz.mjs";
 import { n as _e, r as ve, t as ye } from "./decorate-Bl-JF_YY.mjs";
-import { a as D, n as be, r as xe } from "./roomle-renderer-Ato6RMrd.mjs";
-import { An as Se, Dt as Ce, It as O, Kn as we, Q as Te, Vt as Ee, _n as De, bn as k, fr as Oe, hr as ke, ln as Ae, vt as je, x as Me } from "./three.webgpu-D3nSEIjD.mjs";
-import { $ as Ne, A as Pe, At as A, Bt as Fe, C as Ie, Ct as Le, E as j, Et as Re, F as ze, G as Be, H as Ve, I as He, It as M, J as Ue, K as We, L as Ge, Lt as N, Mt as Ke, N as qe, O as Je, P as Ye, Pt as Xe, Q as Ze, R as Qe, Rt as P, S as $e, T as et, Tt as F, U as tt, V as I, Vt as nt, X as rt, Y as it, Z as at, _ as ot, _t as st, a as ct, at as lt, b as ut, bt as dt, c as ft, ct as pt, d as mt, dt as ht, et as gt, f as _t, ft as vt, g as yt, gt as bt, h as xt, ht as St, i as L, it as Ct, j as wt, jt as Tt, k as Et, kt as R, l as z, lt as Dt, m as Ot, mt as kt, n as B, nt as At, o as jt, q as Mt, r as Nt, rt as Pt, s as Ft, st as It, t as Lt, tt as Rt, u as zt, v as Bt, vt as Vt, w as V, wt as Ht, x as Ut, xt as Wt, y as Gt, zt as Kt } from "./three.tsl-Cf0-sCqB.mjs";
+import { a as O, n as be, r as xe } from "./roomle-renderer-UJINLYxS.mjs";
+import { Dt as Se, It as k, Jn as Ce, Mn as we, Q as Te, Sn as A, Vt as Ee, _r as De, mr as Oe, un as ke, vt as Ae, x as je, yn as Me } from "./three.webgpu-wPiwbpFM.mjs";
+import { $ as Ne, B as Pe, Bt as j, C as Fe, Ct as Ie, D as M, Dt as Le, E as Re, Et as ze, Ft as Be, G as Ve, Ht as He, I as Ue, J as We, K as Ge, L as Ke, Lt as qe, M as Je, Mt as N, N as Ye, Nt as P, O as Xe, Ot as F, P as Ze, Pt as Qe, Q as $e, R as et, S as tt, T as nt, Ut as rt, V as it, Vt as I, W as L, Wt as at, X as ot, Y as st, Z as ct, _ as lt, _t as ut, a as dt, at as ft, b as pt, bt as mt, c as ht, ct as gt, d as R, dt as _t, et as vt, f as yt, ft as bt, g as xt, ht as St, i as z, it as Ct, j as wt, k as B, kt as Tt, l as Et, m as Dt, mt as Ot, n as V, nt as kt, o as At, ot as jt, p as Mt, r as Nt, rt as Pt, s as Ft, st as It, t as Lt, tt as Rt, u as H, ut as zt, v as Bt, vt as Vt, w as Ht, wt as Ut, x as Wt, xt as Gt, y as Kt, yt as qt, z as Jt, zt as U } from "./three.tsl-De6A-G56.mjs";
 //#region ../../node_modules/three/examples/jsm/tsl/display/OutlineNode.js
-var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE__ */ new p(1, 0), Yt = /* @__PURE__ */ new p(0, 1), U, Xt = class extends we {
+var W = /* @__PURE__ */ new ke(), Yt = /* @__PURE__ */ new d(), Xt = /* @__PURE__ */ new d(1, 0), Zt = /* @__PURE__ */ new d(0, 1), G, Qt = class extends Ce {
 	static get type() {
 		return "OutlineNode";
 	}
 	constructor(e, t, n = {}) {
 		super("vec4");
-		let { selectedObjects: r = [], edgeThickness: i = j(1), edgeGlow: a = j(0), downSampleRatio: o = 2 } = n;
-		this.scene = e, this.camera = t, this.selectedObjects = r, this.edgeThicknessNode = Mt(i), this.edgeGlowNode = Mt(a), this.downSampleRatio = o, this.updateBeforeType = Ee.FRAME, this._renderTargetDepthBuffer = new w(), this._renderTargetDepthBuffer.depthTexture = new _(), this._renderTargetDepthBuffer.depthTexture.type = b, this._renderTargetMaskBuffer = new w(), this._renderTargetMaskDownSampleBuffer = new w(1, 1, { depthBuffer: !1 }), this._renderTargetEdgeBuffer1 = new w(1, 1, { depthBuffer: !1 }), this._renderTargetEdgeBuffer2 = new w(1, 1, { depthBuffer: !1 }), this._renderTargetBlurBuffer1 = new w(1, 1, { depthBuffer: !1 }), this._renderTargetBlurBuffer2 = new w(1, 1, { depthBuffer: !1 }), this._renderTargetComposite = new w(1, 1, { depthBuffer: !1 }), this._cameraNear = Dt("near", "float", t), this._cameraFar = Dt("far", "float", t), this._blurDirection = A(new p()), this._depthTextureUniform = F(this._renderTargetDepthBuffer.depthTexture), this._maskTextureUniform = F(this._renderTargetMaskBuffer.texture), this._maskTextureDownsSampleUniform = F(this._renderTargetMaskDownSampleBuffer.texture), this._edge1TextureUniform = F(this._renderTargetEdgeBuffer1.texture), this._edge2TextureUniform = F(this._renderTargetEdgeBuffer2.texture), this._blurColorTextureUniform = F(this._renderTargetEdgeBuffer1.texture), this._visibleEdgeColor = N(1, 0, 0), this._hiddenEdgeColor = N(0, 1, 0), this._depthMaterial = new O(), this._depthMaterial.colorNode = yt(0, 0, 0), this._depthMaterial.name = "OutlineNode.depth", this._depthSpriteMaterial = new Se(), this._depthSpriteMaterial.colorNode = yt(0, 0, 0), this._depthSpriteMaterial.name = "OutlineNode.depthSprite", this._prepareMaskMaterial = new O(), this._prepareMaskMaterial.name = "OutlineNode.prepareMask", this._prepareMaskSpriteMaterial = new Se(), this._prepareMaskSpriteMaterial.name = "OutlineNode.prepareMaskSprite", this._materialCopy = new O(), this._materialCopy.name = "OutlineNode.copy", this._edgeDetectionMaterial = new O(), this._edgeDetectionMaterial.name = "OutlineNode.edgeDetection", this._separableBlurMaterial = new O(), this._separableBlurMaterial.name = "OutlineNode.separableBlur", this._separableBlurMaterial2 = new O(), this._separableBlurMaterial2.name = "OutlineNode.separableBlur2", this._compositeMaterial = new O(), this._compositeMaterial.name = "OutlineNode.composite", this._selectionCache = /* @__PURE__ */ new Set(), this._lastSelectionCount = 0, this._textureNode = Rt(this, this._renderTargetComposite.texture);
+		let { selectedObjects: r = [], edgeThickness: i = B(1), edgeGlow: a = B(0), downSampleRatio: o = 2 } = n;
+		this.scene = e, this.camera = t, this.selectedObjects = r, this.edgeThicknessNode = ot(i), this.edgeGlowNode = ot(a), this.downSampleRatio = o, this.updateBeforeType = Ee.FRAME, this._renderTargetDepthBuffer = new c(), this._renderTargetDepthBuffer.depthTexture = new _(), this._renderTargetDepthBuffer.depthTexture.type = S, this._renderTargetMaskBuffer = new c(), this._renderTargetMaskDownSampleBuffer = new c(1, 1, { depthBuffer: !1 }), this._renderTargetEdgeBuffer1 = new c(1, 1, { depthBuffer: !1 }), this._renderTargetEdgeBuffer2 = new c(1, 1, { depthBuffer: !1 }), this._renderTargetBlurBuffer1 = new c(1, 1, { depthBuffer: !1 }), this._renderTargetBlurBuffer2 = new c(1, 1, { depthBuffer: !1 }), this._renderTargetComposite = new c(1, 1, { depthBuffer: !1 }), this._cameraNear = bt("near", "float", t), this._cameraFar = bt("far", "float", t), this._blurDirection = P(new d()), this._depthTextureUniform = F(this._renderTargetDepthBuffer.depthTexture), this._maskTextureUniform = F(this._renderTargetMaskBuffer.texture), this._maskTextureDownsSampleUniform = F(this._renderTargetMaskDownSampleBuffer.texture), this._edge1TextureUniform = F(this._renderTargetEdgeBuffer1.texture), this._edge2TextureUniform = F(this._renderTargetEdgeBuffer2.texture), this._blurColorTextureUniform = F(this._renderTargetEdgeBuffer1.texture), this._visibleEdgeColor = j(1, 0, 0), this._hiddenEdgeColor = j(0, 1, 0), this._depthMaterial = new k(), this._depthMaterial.colorNode = Bt(0, 0, 0), this._depthMaterial.name = "OutlineNode.depth", this._depthSpriteMaterial = new we(), this._depthSpriteMaterial.colorNode = Bt(0, 0, 0), this._depthSpriteMaterial.name = "OutlineNode.depthSprite", this._prepareMaskMaterial = new k(), this._prepareMaskMaterial.name = "OutlineNode.prepareMask", this._prepareMaskSpriteMaterial = new we(), this._prepareMaskSpriteMaterial.name = "OutlineNode.prepareMaskSprite", this._materialCopy = new k(), this._materialCopy.name = "OutlineNode.copy", this._edgeDetectionMaterial = new k(), this._edgeDetectionMaterial.name = "OutlineNode.edgeDetection", this._separableBlurMaterial = new k(), this._separableBlurMaterial.name = "OutlineNode.separableBlur", this._separableBlurMaterial2 = new k(), this._separableBlurMaterial2.name = "OutlineNode.separableBlur2", this._compositeMaterial = new k(), this._compositeMaterial.name = "OutlineNode.composite", this._selectionCache = /* @__PURE__ */ new Set(), this._lastSelectionCount = 0, this._textureNode = Ct(this, this._renderTargetComposite.texture);
 	}
 	get visibleEdge() {
 		return this.r;
@@ -31,11 +31,11 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 	updateBefore(e) {
 		let { renderer: t } = e, { camera: n, scene: r } = this;
 		if (this._updateSelectionCache(), this._selectionCache.size === 0) {
-			this._lastSelectionCount > 0 && (U = k.resetRendererState(t, U), t.setRenderTarget(this._renderTargetComposite), t.setClearColor(0, 0), t.clear(), k.restoreRendererState(t, U), this._lastSelectionCount = 0);
+			this._lastSelectionCount > 0 && (G = A.resetRendererState(t, G), t.setRenderTarget(this._renderTargetComposite), t.setClearColor(0, 0), t.clear(), A.restoreRendererState(t, G), this._lastSelectionCount = 0);
 			return;
 		}
-		this._lastSelectionCount = this._selectionCache.size, U = k.resetRendererAndSceneState(t, r, U);
-		let i = t.getDrawingBufferSize(qt);
+		this._lastSelectionCount = this._selectionCache.size, G = A.resetRendererAndSceneState(t, r, G);
+		let i = t.getDrawingBufferSize(Yt);
 		this.setSize(i.width, i.height), t.setClearColor(16777215, 1);
 		let a = r.name;
 		t.setRenderTarget(this._renderTargetDepthBuffer), t.setRenderObjectFunction((e, n, r, i, a, o, s, c) => {
@@ -48,120 +48,116 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 				let a = e.isSprite ? this._prepareMaskSpriteMaterial : this._prepareMaskMaterial;
 				t.renderObject(e, n, r, i, a, o, s, c);
 			}
-		}), r.name = "Outline [ Selected Objects Pass ]", t.render(r, n), t.setRenderObjectFunction(U.renderObjectFunction), this._selectionCache.clear(), r.name = a, H.material = this._materialCopy, H.name = "Outline [ Downsample ]", t.setRenderTarget(this._renderTargetMaskDownSampleBuffer), H.render(t), H.material = this._edgeDetectionMaterial, H.name = "Outline [ Edge Detection ]", t.setRenderTarget(this._renderTargetEdgeBuffer1), H.render(t), this._blurColorTextureUniform.value = this._renderTargetEdgeBuffer1.texture, this._blurDirection.value.copy(Jt), H.material = this._separableBlurMaterial, H.name = "Outline [ Blur Half Resolution ]", t.setRenderTarget(this._renderTargetBlurBuffer1), H.render(t), this._blurColorTextureUniform.value = this._renderTargetBlurBuffer1.texture, this._blurDirection.value.copy(Yt), t.setRenderTarget(this._renderTargetEdgeBuffer1), H.render(t), this._blurColorTextureUniform.value = this._renderTargetEdgeBuffer1.texture, this._blurDirection.value.copy(Jt), H.material = this._separableBlurMaterial2, H.name = "Outline [ Blur Quarter Resolution ]", t.setRenderTarget(this._renderTargetBlurBuffer2), H.render(t), this._blurColorTextureUniform.value = this._renderTargetBlurBuffer2.texture, this._blurDirection.value.copy(Yt), t.setRenderTarget(this._renderTargetEdgeBuffer2), H.render(t), H.material = this._compositeMaterial, H.name = "Outline [ Blur Quarter Resolution ]", t.setRenderTarget(this._renderTargetComposite), H.render(t), k.restoreRendererAndSceneState(t, r, U);
+		}), r.name = "Outline [ Selected Objects Pass ]", t.render(r, n), t.setRenderObjectFunction(G.renderObjectFunction), this._selectionCache.clear(), r.name = a, W.material = this._materialCopy, W.name = "Outline [ Downsample ]", t.setRenderTarget(this._renderTargetMaskDownSampleBuffer), W.render(t), W.material = this._edgeDetectionMaterial, W.name = "Outline [ Edge Detection ]", t.setRenderTarget(this._renderTargetEdgeBuffer1), W.render(t), this._blurColorTextureUniform.value = this._renderTargetEdgeBuffer1.texture, this._blurDirection.value.copy(Xt), W.material = this._separableBlurMaterial, W.name = "Outline [ Blur Half Resolution ]", t.setRenderTarget(this._renderTargetBlurBuffer1), W.render(t), this._blurColorTextureUniform.value = this._renderTargetBlurBuffer1.texture, this._blurDirection.value.copy(Zt), t.setRenderTarget(this._renderTargetEdgeBuffer1), W.render(t), this._blurColorTextureUniform.value = this._renderTargetEdgeBuffer1.texture, this._blurDirection.value.copy(Xt), W.material = this._separableBlurMaterial2, W.name = "Outline [ Blur Quarter Resolution ]", t.setRenderTarget(this._renderTargetBlurBuffer2), W.render(t), this._blurColorTextureUniform.value = this._renderTargetBlurBuffer2.texture, this._blurDirection.value.copy(Zt), t.setRenderTarget(this._renderTargetEdgeBuffer2), W.render(t), W.material = this._compositeMaterial, W.name = "Outline [ Blur Quarter Resolution ]", t.setRenderTarget(this._renderTargetComposite), W.render(t), A.restoreRendererAndSceneState(t, r, G);
 	}
 	setup() {
 		let e = () => {
-			let e = this._depthTextureUniform.sample(St), t;
-			return t = this.camera.isPerspectiveCamera ? At(e, this._cameraNear, this._cameraFar) : rt(e, this._cameraNear, this._cameraFar), N(0, Pt.z.lessThanEqual(t).select(1, 0), 1);
+			let e = this._depthTextureUniform.sample(Vt), t;
+			return t = this.camera.isPerspectiveCamera ? ft(e, this._cameraNear, this._cameraFar) : Ne(e, this._cameraNear, this._cameraFar), j(0, jt.z.lessThanEqual(t).select(1, 0), 1);
 		};
 		this._prepareMaskMaterial.colorNode = e(), this._prepareMaskMaterial.needsUpdate = !0, this._prepareMaskSpriteMaterial.colorNode = e(), this._prepareMaskSpriteMaterial.needsUpdate = !0, this._materialCopy.fragmentNode = this._maskTextureUniform, this._materialCopy.needsUpdate = !0;
-		let t = B(() => {
-			let e = Re(this._maskTextureDownsSampleUniform), t = M(1).div(e).toVar(), n = P(1, 0, 0, 1).mul(P(t, t)), r = Xe(), i = this._maskTextureDownsSampleUniform.sample(r.add(n.xy)).toVar(), a = this._maskTextureDownsSampleUniform.sample(r.sub(n.xy)).toVar(), o = this._maskTextureDownsSampleUniform.sample(r.add(n.yw)).toVar(), s = this._maskTextureDownsSampleUniform.sample(r.sub(n.yw)).toVar(), c = M(We(i.r.sub(a.r), .5), We(o.r.sub(s.r), .5)).length();
-			return P(Ve(Ve(i.g, a.g), Ve(o.g, s.g)).oneMinus().greaterThan(.001).select(this._visibleEdgeColor, this._hiddenEdgeColor), 1).mul(c);
+		let t = V(() => {
+			let e = Tt(this._maskTextureDownsSampleUniform), t = U(1).div(e).toVar(), n = I(1, 0, 0, 1).mul(I(t, t)), r = qe(), i = this._maskTextureDownsSampleUniform.sample(r.add(n.xy)).toVar(), a = this._maskTextureDownsSampleUniform.sample(r.sub(n.xy)).toVar(), o = this._maskTextureDownsSampleUniform.sample(r.add(n.yw)).toVar(), s = this._maskTextureDownsSampleUniform.sample(r.sub(n.yw)).toVar(), c = U(st(i.r.sub(a.r), .5), st(o.r.sub(s.r), .5)).length();
+			return I(Ve(Ve(i.g, a.g), Ve(o.g, s.g)).oneMinus().greaterThan(.001).select(this._visibleEdgeColor, this._hiddenEdgeColor), 1).mul(c);
 		});
 		this._edgeDetectionMaterial.fragmentNode = t(), this._edgeDetectionMaterial.needsUpdate = !0;
-		let n = B(([e, t]) => j(.39894).mul(et(j(-.5).mul(e).mul(e).div(t.mul(t))).div(t))), r = B(([e]) => {
-			let t = Re(this._maskTextureDownsSampleUniform), r = M(1).div(t).toVar(), i = Xe(), a = e.div(2).toVar(), o = n(0, a).toVar(), s = this._blurColorTextureUniform.sample(i).mul(o).toVar(), c = this._blurDirection.mul(r).mul(e).div(4).toVar(), l = c.toVar();
-			return ct({
-				start: qe(1),
-				end: qe(4),
+		let n = V(([e, t]) => B(.39894).mul(Xe(B(-.5).mul(e).mul(e).div(t.mul(t))).div(t))), r = V(([e]) => {
+			let t = Tt(this._maskTextureDownsSampleUniform), r = U(1).div(t).toVar(), i = qe(), a = e.div(2).toVar(), o = n(0, a).toVar(), s = this._blurColorTextureUniform.sample(i).mul(o).toVar(), c = this._blurDirection.mul(r).mul(e).div(4).toVar(), l = c.toVar();
+			return dt({
+				start: Ue(1),
+				end: Ue(4),
 				type: "int",
 				condition: "<="
 			}, ({ i: t }) => {
-				let r = n(e.mul(j(t)).div(4), a), u = this._blurColorTextureUniform.sample(i.add(l)), d = this._blurColorTextureUniform.sample(i.sub(l));
+				let r = n(e.mul(B(t)).div(4), a), u = this._blurColorTextureUniform.sample(i.add(l)), d = this._blurColorTextureUniform.sample(i.sub(l));
 				s.addAssign(u.add(d).mul(r)), o.addAssign(r.mul(2)), l.addAssign(c);
 			}), s.div(o);
 		});
 		this._separableBlurMaterial.fragmentNode = r(this.edgeThicknessNode), this._separableBlurMaterial.needsUpdate = !0, this._separableBlurMaterial2.fragmentNode = r(4), this._separableBlurMaterial2.needsUpdate = !0;
-		let i = B(() => {
+		let i = V(() => {
 			let e = this._edge1TextureUniform, t = this._edge2TextureUniform, n = this._maskTextureUniform, r = e.add(t.mul(this.edgeGlowNode));
 			return n.r.mul(r);
 		});
 		return this._compositeMaterial.fragmentNode = i(), this._compositeMaterial.needsUpdate = !0, this._textureNode;
 	}
 	dispose() {
-		this.selectedObjects.length = 0, this._renderTargetDepthBuffer.dispose(), this._renderTargetMaskBuffer.dispose(), this._renderTargetMaskDownSampleBuffer.dispose(), this._renderTargetEdgeBuffer1.dispose(), this._renderTargetEdgeBuffer2.dispose(), this._renderTargetBlurBuffer1.dispose(), this._renderTargetBlurBuffer2.dispose(), this._renderTargetComposite.dispose(), this._depthMaterial.dispose(), this._depthSpriteMaterial.dispose(), this._prepareMaskMaterial.dispose(), this._prepareMaskSpriteMaterial.dispose(), this._materialCopy.dispose(), this._edgeDetectionMaterial.dispose(), this._separableBlurMaterial.dispose(), this._separableBlurMaterial2.dispose(), this._compositeMaterial.dispose();
+		super.dispose(), this.selectedObjects.length = 0, this._renderTargetDepthBuffer.dispose(), this._renderTargetMaskBuffer.dispose(), this._renderTargetMaskDownSampleBuffer.dispose(), this._renderTargetEdgeBuffer1.dispose(), this._renderTargetEdgeBuffer2.dispose(), this._renderTargetBlurBuffer1.dispose(), this._renderTargetBlurBuffer2.dispose(), this._renderTargetComposite.dispose(), this._depthMaterial.dispose(), this._depthSpriteMaterial.dispose(), this._prepareMaskMaterial.dispose(), this._prepareMaskSpriteMaterial.dispose(), this._materialCopy.dispose(), this._edgeDetectionMaterial.dispose(), this._separableBlurMaterial.dispose(), this._separableBlurMaterial2.dispose(), this._compositeMaterial.dispose();
 	}
 	_updateSelectionCache() {
 		for (let e = 0; e < this.selectedObjects.length; e++) this.selectedObjects[e].traverse((e) => {
 			(e.isMesh || e.isSprite) && this._selectionCache.add(e);
 		});
 	}
-}, Zt = (e, t, n) => new Xt(e, t, n), Qt = class {}, $t = class e extends Qt {
+}, $t = (e, t, n) => new Qt(e, t, n), en = class {}, tn = class e extends en {
 	static {
 		this.passId = "OutlineRenderPass";
 	}
 	constructor(t) {
-		super(), this.passId = e.passId, this.selectedObjects = t.selectedObjects, this.edgeStrength = A(t.edgeStrength), this.edgeGlow = A(t.edgeGlow), this.edgeThickness = A(t.edgeThickness), this.visibleEdgeColor = A(new de(t.visibleEdgeColor)), this.hiddenEdgeColor = A(new de(t.hiddenEdgeColor));
+		super(), this.passId = e.passId, this.selectedObjects = t.selectedObjects, this.edgeStrength = P(t.edgeStrength), this.edgeGlow = P(t.edgeGlow), this.edgeThickness = P(t.edgeThickness), this.visibleEdgeColor = P(new D(t.visibleEdgeColor)), this.hiddenEdgeColor = P(new D(t.hiddenEdgeColor));
 	}
 	highlightObjects(e) {
 		this.selectedObjects.splice(0, this.selectedObjects.length, ...e);
 	}
 	setOutlineColors(e, t) {
-		this.visibleEdgeColor.value = new de(e), this.hiddenEdgeColor.value = new de(t);
+		this.visibleEdgeColor.value = new D(e), this.hiddenEdgeColor.value = new D(t);
 	}
 	assemble(e, t, n, r, i) {
-		let { visibleEdge: a, hiddenEdge: o } = Zt(n, r, {
+		let { visibleEdge: a, hiddenEdge: o } = $t(n, r, {
 			selectedObjects: this.selectedObjects,
 			edgeThickness: this.edgeThickness,
 			edgeGlow: this.edgeGlow
-		}), s = P(a.mul(this.visibleEdgeColor).add(o.mul(this.hiddenEdgeColor)).mul(this.edgeStrength), 0);
-		return i === "outline" ? P(0, 0, 0, 0).add(s) : t.add(s);
-	}
-	addParametersToGUI(e, n) {
-		let r = e.addFolder("Outline Settings");
-		r.add(this.edgeStrength, "value", .01, 10).name("edgeStrength").onChange(() => n()), r.add(this.edgeGlow, "value", 0, 1).name("edgeGlow").onChange(() => n()), r.add(this.edgeThickness, "value", 1, 4).name("edgeThickness").onChange(() => n()), r.addColor({ color: this.visibleEdgeColor.value.getHex(t) }, "color").name("visibleEdgeColor").onChange((e) => {
-			this.visibleEdgeColor.value.set(e), n();
-		}), r.addColor({ color: this.hiddenEdgeColor.value.getHex(t) }, "color").name("hiddenEdgeColor").onChange((e) => {
-			this.hiddenEdgeColor.value.set(e), n();
+		}), s = I(a.mul(this.visibleEdgeColor).add(o.mul(this.hiddenEdgeColor)).mul(this.edgeStrength), 0);
+		return i === "outline" ? I(0, 0, 0, 0).add(s) : t.add(s);
+	}
+	addParametersToGUI(e, t) {
+		let n = e.addFolder("Outline Settings");
+		n.add(this.edgeStrength, "value", .01, 10).name("edgeStrength").onChange(() => t()), n.add(this.edgeGlow, "value", 0, 1).name("edgeGlow").onChange(() => t()), n.add(this.edgeThickness, "value", 1, 4).name("edgeThickness").onChange(() => t()), n.addColor({ color: this.visibleEdgeColor.value.getHex(a) }, "color").name("visibleEdgeColor").onChange((e) => {
+			this.visibleEdgeColor.value.set(e), t();
+		}), n.addColor({ color: this.hiddenEdgeColor.value.getHex(a) }, "color").name("hiddenEdgeColor").onChange((e) => {
+			this.hiddenEdgeColor.value.set(e), t();
 		});
 	}
-}, en = class {
+}, nn = class {
 	constructor(e, t) {
 		this.uid = e, this.cid = e.match(/^(.*):f(\d+)$/)[1], this.name = t, this.timestamp = 0, this.cpu = 0, this.gpu = 0, this.fps = 0, this.children = [], this.parent = null;
 	}
-}, tn = class extends en {
+}, rn = class extends nn {
 	constructor(e, t, n, r) {
 		let i = t.name;
 		i === "" && (t.isScene ? i = "Scene" : t.isQuadMesh && (i = "QuadMesh")), super(e, i), this.scene = t, this.camera = n, this.renderTarget = r, this.isRenderStats = !0;
 	}
-}, nn = class extends en {
+}, an = class extends nn {
 	constructor(e, t) {
-		super(e, t.name), this.computeNode = t, this.isComputeStats = !0;
+		let n = t.name || (t.isComputeNode ? "Compute" : "Compute Group");
+		super(e, n), this.computeNode = t, this.isComputeStats = !0;
 	}
-}, rn = class extends Te {
+}, on = class extends Te {
 	constructor() {
-		super(), this.currentFrame = null, this.currentRender = null, this.currentNodes = null, this.lastFrame = null, this.frames = [], this.framesLib = {}, this.maxFrames = 512, this._lastFinishTime = 0, this._resolveTimestampPromise = null, this.overdraw = !1, this._overdrawMaterial = null, this.isRendererInspector = !0;
+		super(), this.currentFrame = null, this.currentContext = null, this.currentRender = null, this.currentCompute = null, this.currentNodes = null, this.lastFrame = null, this.frames = [], this.framesLib = {}, this.maxFrames = 512, this._lastFinishTime = 0, this._resolveTimestampPromise = null, this._rAFId = null, this.overdraw = !1, this._overdrawMaterial = null, this.isRendererInspector = !0;
 	}
 	getParent() {
-		return this.currentRender || this.getFrame();
+		return this.currentContext || this.getFrame();
 	}
 	begin() {
-		this.currentFrame = this._createFrame(), this.currentRender = this.currentFrame, this.currentNodes = [];
+		super.begin(), this.currentFrame = this._createFrame(), this.currentContext = this.currentFrame, this.currentRender = null, this.currentCompute = null, this.currentNodes = [];
 	}
 	finish() {
+		super.finish();
 		let e = performance.now(), t = this.currentFrame;
-		t.finishTime = e, t.deltaTime = e - (this._lastFinishTime > 0 ? this._lastFinishTime : e), this.addFrame(t), this.fps = this._getFPS(), this.lastFrame = t, this.currentFrame = null, this.currentRender = null, this.currentNodes = null, this._lastFinishTime = e, this.overdraw === !0 && this._renderOverdraw(t);
+		t.finishTime = e, t.deltaTime = e - (this._lastFinishTime > 0 ? this._lastFinishTime : e), this.addFrame(t), this.fps = this._getFPS(), this.lastFrame = t, this.currentFrame = null, this.currentContext = null, this.currentRender = null, this.currentCompute = null, this.currentNodes = null, this._lastFinishTime = e, this.overdraw === !0 && this._renderOverdraw();
 	}
-	_renderOverdraw(e) {
-		let t = this.getRenderer();
+	_renderOverdraw() {
+		let t = this.getPrimaryPass();
 		if (t === null) return;
-		let n = null;
-		for (let t of e.renders) if (t.scene.isScene === !0) {
-			n = t;
-			break;
-		}
-		if (n === null) return;
-		this._overdrawMaterial === null && (this._overdrawMaterial = new je({
-			colorNode: N(.25),
+		let n = this.getRenderer();
+		this._overdrawMaterial === null && (this._overdrawMaterial = new Ae({
+			colorNode: j(.25),
 			blending: 2,
 			depthTest: !0,
-			depthWrite: !0,
-			toneMapped: !1
+			depthWrite: !0
 		}));
-		let { scene: r, camera: i } = n, a = k.resetRendererAndSceneState(t, r);
-		t.toneMapping = 0, t.outputColorSpace = f, r.overrideMaterial = this._overdrawMaterial, t.render(r, i), k.restoreRendererAndSceneState(t, r, a);
+		let { scene: r, camera: i } = t, a = A.resetRendererAndSceneState(n, r);
+		n.toneMapping = 0, n.outputColorSpace = e, r.overrideMaterial = this._overdrawMaterial, n.render(r, i), A.restoreRendererAndSceneState(n, r, a);
 	}
 	_getFPS() {
 		let e = 0, t = 0;
@@ -185,6 +181,14 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 			computes: []
 		};
 	}
+	getPrimaryPass() {
+		let e = this.getFrame(), t = null;
+		for (let n of e.renders) if (n.scene.isScene === !0) {
+			t = n;
+			break;
+		}
+		return t;
+	}
 	getFrame() {
 		return this.currentFrame || this.lastFrame;
 	}
@@ -195,30 +199,38 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 	resolveFrame() {}
 	async resolveTimestamp() {
 		return this._resolveTimestampPromise === null && (this._resolveTimestampPromise = new Promise((e) => {
-			requestAnimationFrame(async () => {
+			this._rAFId = requestAnimationFrame(async () => {
+				this._rAFId = null;
 				let t = this.getRenderer();
+				if (t === null) {
+					this._resolveTimestampPromise = null, e();
+					return;
+				}
 				if (t.backend.hasTimestamp) {
-					await t.resolveTimestampsAsync(ie.COMPUTE), await t.resolveTimestampsAsync(ie.RENDER);
-					let e = t.backend.getTimestampFrames(ie.COMPUTE), n = t.backend.getTimestampFrames(ie.RENDER), r = [...new Set([...e, ...n])];
-					for (let i of r) {
-						let r = this.getFrameById(i);
-						if (r !== null) {
-							if (r.resolvedCompute === !1) if (r.computes.length > 0) {
-								if (e.includes(i)) {
-									for (let e of r.computes) t.backend.hasTimestampQuery(e.uid) ? e.gpu = t.backend.getTimestamp(e.uid) : (e.gpu = 0, e.gpuNotAvailable = !0);
-									r.resolvedCompute = !0;
+					if (await t.resolveTimestampsAsync(C.COMPUTE), await t.resolveTimestampsAsync(C.RENDER), t !== this.getRenderer()) {
+						this._resolveTimestampPromise = null, e();
+						return;
+					}
+					let n = t.backend.getTimestampFrames(C.COMPUTE), r = t.backend.getTimestampFrames(C.RENDER), i = [...new Set([...n, ...r])];
+					for (let e of i) {
+						let i = this.getFrameById(e);
+						if (i !== null) {
+							if (i.resolvedCompute === !1) if (i.computes.length > 0) {
+								if (n.includes(e)) {
+									for (let e of i.computes) t.backend.hasTimestampQuery(e.uid) ? e.gpu = t.backend.getTimestamp(e.uid) : (e.gpu = 0, e.gpuNotAvailable = !0);
+									i.resolvedCompute = !0;
 								}
-							} else r.resolvedCompute = !0;
-							if (r.resolvedRender === !1) if (r.renders.length > 0) {
-								if (n.includes(i)) {
-									for (let e of r.renders) t.backend.hasTimestampQuery(e.uid) ? e.gpu = t.backend.getTimestamp(e.uid) : (e.gpu = 0, e.gpuNotAvailable = !0);
-									r.resolvedRender = !0;
+							} else i.resolvedCompute = !0;
+							if (i.resolvedRender === !1) if (i.renders.length > 0) {
+								if (r.includes(e)) {
+									for (let e of i.renders) t.backend.hasTimestampQuery(e.uid) ? e.gpu = t.backend.getTimestamp(e.uid) : (e.gpu = 0, e.gpuNotAvailable = !0);
+									i.resolvedRender = !0;
 								}
-							} else r.resolvedRender = !0;
-							r.resolvedCompute === !0 && r.resolvedRender === !0 && this.resolveFrame(r);
+							} else i.resolvedRender = !0;
+							i.resolvedCompute === !0 && i.resolvedRender === !0 && this.resolveFrame(i);
 						}
 					}
-				} else for (let e of this.frames) if (!(e.resolvedCompute === !0 && e.resolvedRender === !0) && this.getFrameById(e.frameId + 1) !== null) {
+				} else for (let e of this.frames) if (!(e.resolvedCompute === !0 && e.resolvedRender === !0) && this.getFrameById(e.frameId - 1) !== null) {
 					if (e.resolvedCompute === !1) {
 						for (let t of e.computes) t.gpu = 0, t.gpuNotAvailable = !0;
 						e.resolvedCompute = !0;
@@ -244,37 +256,41 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 		this.frames.push(e), this.framesLib[e.frameId] = e, this.isAvailable && (this.updateTabs(), this.resolveTimestamp());
 	}
 	inspect(e) {
+		if (this.enabled === !1) return;
 		let t = this.currentNodes;
-		t === null ? a("RendererInspector: Unable to inspect node outside of frame scope. Use \"renderer.setAnimationLoop()\".") : t.push(e);
+		t === null ? v("RendererInspector: Unable to inspect node outside of frame scope. Use \"renderer.setAnimationLoop()\".") : t.push(e);
 	}
 	beginCompute(e, t) {
 		let n = this.getFrame();
 		if (!n) return;
-		let r = new nn(e, t);
-		r.timestamp = performance.now(), r.parent = this.currentCompute || this.getParent(), n.computes.push(r), this.currentRender === null ? n.children.push(r) : this.currentRender.children.push(r), this.currentCompute = r;
+		let r = new an(e, t);
+		r.timestamp = performance.now(), r.parent = this.getParent(), n.computes.push(r), r.parent.children.push(r), this.currentCompute = r, this.currentContext = r;
 	}
 	finishCompute() {
 		if (!this.getFrame()) return;
 		let e = this.currentCompute;
-		e.cpu = performance.now() - e.timestamp, this.currentCompute = e.parent.isComputeStats ? e.parent : null;
+		e.cpu = performance.now() - e.timestamp, this.currentContext = e.parent, this.currentCompute = e.parent && e.parent.isComputeStats ? e.parent : null;
 	}
 	beginRender(e, t, n, r) {
 		let i = this.getFrame();
 		if (!i) return;
-		let a = new tn(e, t, n, r);
-		a.timestamp = performance.now(), a.parent = this.getParent(), i.renders.push(a), this.currentRender === null ? i.children.push(a) : this.currentRender.children.push(a), this.currentRender = a;
+		let a = new rn(e, t, n, r);
+		a.timestamp = performance.now(), a.parent = this.getParent(), i.renders.push(a), a.parent.children.push(a), this.currentRender = a, this.currentContext = a;
 	}
 	finishRender() {
 		if (!this.getFrame()) return;
 		let e = this.currentRender;
-		e.cpu = performance.now() - e.timestamp, this.currentRender = e.parent;
+		e.cpu = performance.now() - e.timestamp, this.currentContext = e.parent, this.currentRender = e.parent && e.parent.isRenderStats ? e.parent : null;
 	}
-}, an = class {
-	static init(e) {
-		let t = document.createElement("style");
-		t.textContent = "\n@scope (.three-inspector) {\n\n	:scope {\n		--profiler-background: #1e1e24f5;\n		--profiler-header-background: #2a2a33aa;\n		--profiler-header: #2a2a33;\n		--profiler-border: #4a4a5a;\n		--text-primary: #e0e0e0;\n		--text-secondary: #9a9aab;\n		--color-accent: #00aaff;\n		--color-green: #4caf50;\n		--color-yellow: #ffc107;\n		--color-red: #f44336;\n		--color-fps: rgb(63, 81, 181);\n		--color-call: rgba(255, 185, 34, 1);\n		--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n		--font-mono: 'Courier New', Courier, monospace;\n	}\n\n	.profiler-panel, .profiler-toggle, .detached-tab-panel,\n	.profiler-panel *, .profiler-toggle *, .detached-tab-panel * {\n		text-transform: initial;\n		line-height: normal;\n		box-sizing: border-box;\n		-webkit-font-smoothing: antialiased;\n		-moz-osx-font-smoothing: grayscale;\n		-webkit-tap-highlight-color: transparent;\n	}\n\n	.profiler-toggle {\n		position: fixed;\n		top: 15px;\n		right: 15px;\n		background-color: rgba(30, 30, 36, 0.85);\n		border: 1px solid #4a4a5a54;\n		border-radius: 12px 6px 6px 12px;\n		color: var(--text-primary);\n		cursor: pointer;\n		z-index: 1001;\n		transition: all 0.2s ease-in-out;\n		/*font-size: 14px;*/\n		font-size: 15px;\n		backdrop-filter: blur(8px);\n		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n		display: flex;\n		align-items: stretch;\n		padding: 0;\n		overflow: hidden;\n		font-family: var(--font-family);\n	}\n\n	.profiler-toggle-graph {\n		position: absolute;\n		bottom: 0;\n		left: 0;\n		width: 100%;\n		height: 100%;\n		z-index: 0;\n		pointer-events: none;\n		background: transparent;\n		border: none;\n		border-radius: inherit;\n		opacity: 0.5;\n	}\n\n	.profiler-toggle.position-right.panel-open {\n		right: auto;\n		left: 15px;\n		border-radius: 6px 12px 12px 6px;\n		flex-direction: row-reverse;\n	}\n\n	.profiler-toggle.position-right.panel-open .builtin-tabs-container {\n		border-right: none;\n		border-left: 1px solid #262636;\n	}\n\n	.profiler-toggle:hover {\n		border-color: var(--color-accent);\n	}\n\n	.profiler-toggle.panel-open .toggle-icon {\n		background-color: rgba(0, 170, 255, 0.2);\n		color: var(--color-accent);\n	}\n\n	.toggle-icon {\n		position: relative;\n		z-index: 1;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		width: 40px;\n		font-size: 20px;\n		transition: background-color 0.2s;\n	}\n\n	.console-badge-container {\n		position: absolute;\n		top: 2px;\n		right: 2px;\n		display: flex;\n		gap: 2px;\n		pointer-events: none;\n	}\n\n	.console-badge,\n	.tab-badge {\n		display: inline-flex;\n		align-items: center;\n		justify-content: center;\n		min-width: 14px;\n		height: 14px;\n		padding: 0 4px;\n		border-radius: 7px;\n		font-size: 9px;\n		font-weight: bold;\n		color: #ffffff;\n		line-height: 1;\n		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n		border: 1px solid rgba(0, 0, 0, 0.2);\n	}\n\n	.tab-badge-container {\n		position: absolute;\n		top: 1px;\n		right: 3px;\n		display: flex;\n		gap: 2px;\n		pointer-events: none;\n	}\n\n	.console-badge.error,\n	.tab-badge.error {\n		background-color: var(--color-red);\n	}\n\n	.console-badge.warn,\n	.tab-badge.warn {\n		background-color: var(--color-yellow);\n		color: #111111;\n	}\n\n	.profiler-toggle:hover .toggle-icon {\n		background-color: rgba(255, 255, 255, 0.05);\n	}\n\n	.profiler-toggle.panel-open:hover .toggle-icon {\n		background-color: rgba(0, 170, 255, 0.3);\n	}\n\n	.toggle-separator {\n		width: 1px;\n		background-color: var(--profiler-border);\n	}\n\n	.toggle-text {\n		position: relative;\n		z-index: 1;\n		display: flex;\n		align-items: baseline;\n		padding: 8px 14px;\n		min-width: 80px;\n		justify-content: right;\n	}\n\n	.toggle-text .fps-label {\n		font-size: 0.7em;\n		margin-left: 10px;\n		color: #999;\n	}\n\n	.builtin-tabs-container {\n		position: relative;\n		z-index: 1;\n		display: flex;\n		align-items: stretch;\n		gap: 0;\n		border-right: 1px solid #262636;\n		order: -1;\n	}\n\n	.builtin-tab-btn {\n		background: transparent;\n		border: none;\n		color: var(--text-secondary);\n		cursor: pointer;\n		padding: 8px 14px;\n		font-family: var(--font-family);\n		font-size: 13px;\n		font-weight: 600;\n		transition: all 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		min-width: 32px;\n		position: relative;\n	}\n\n	.builtin-tab-btn svg {\n		width: 20px;\n		height: 20px;\n		stroke: currentColor;\n	}\n\n	.builtin-tab-btn:hover {\n		background-color: rgba(255, 255, 255, 0.08);\n		color: var(--color-accent);\n	}\n\n	.builtin-tab-btn:active {\n		background-color: rgba(255, 255, 255, 0.12);\n	}\n\n	.builtin-tab-btn.active {\n		background-color: rgba(0, 170, 255, 0.2);\n		color: var(--color-accent);\n	}\n\n	.builtin-tab-btn.active:hover {\n		background-color: rgba(0, 170, 255, 0.3);\n	}\n\n	.profiler-mini-panel {\n		position: fixed;\n		top: 60px;\n		right: 15px;\n		background-color: rgba(30, 30, 36, 0.85);\n		border: 1px solid #4a4a5a54;\n		border-radius: 8px;\n		color: var(--text-primary);\n		z-index: 9999;\n		backdrop-filter: blur(8px);\n		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);\n		font-family: var(--font-family);\n		font-size: 11px;\n		width: 350px;\n		max-width: calc(100vw - 30px);\n		min-width: 170px;\n		max-height: calc(100vh - 100px);\n		overflow-y: auto;\n		overflow-x: hidden;\n		display: none;\n		opacity: 0;\n		transform: translateY(-10px) scale(0.98);\n		transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), \n					transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n	}\n\n	.profiler-mini-panel.position-right.panel-open {\n		right: auto;\n		left: 15px;\n	}\n\n	.profiler-mini-panel.visible {\n		display: block;\n		opacity: 1;\n		transform: translateY(0) scale(1);\n	}\n\n	/* Position toggle and mini-panel at the bottom when maximized */\n	:scope:has(.profiler-panel.maximized) .profiler-toggle,\n	:scope.maximized .profiler-toggle {\n		top: auto !important;\n		bottom: 15px !important;\n		z-index: 10005 !important;\n	}\n\n	:scope:has(.profiler-panel.maximized) .profiler-mini-panel,\n	:scope.maximized .profiler-mini-panel {\n		top: auto !important;\n		bottom: 60px !important;\n		max-height: calc(100vh - 120px) !important;\n		z-index: 10006 !important;\n	}\n\n	.profiler-mini-panel::-webkit-scrollbar {\n		width: 6px;\n	}\n\n	.profiler-mini-panel::-webkit-scrollbar-track {\n		background: transparent;\n	}\n\n	.profiler-mini-panel::-webkit-scrollbar-thumb {\n		background: rgba(255, 255, 255, 0.15);\n		border-radius: 3px;\n		transition: background 0.2s;\n	}\n\n	.profiler-mini-panel::-webkit-scrollbar-thumb:hover {\n		background: rgba(255, 255, 255, 0.25);\n	}\n\n	.mini-panel-content {\n		padding: 0;\n		font-size: 11px;\n		line-height: 1.5;\n		font-family: var(--font-mono);\n		letter-spacing: 0.3px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.mini-panel-content .profiler-content {\n		display: block !important;\n		background: transparent;\n	}\n\n	.mini-panel-content .list-scroll-wrapper {\n		max-height: calc(100vh - 120px);\n		overflow-y: auto;\n		overflow-x: hidden;\n		width: 100%;\n	}\n\n	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar {\n		width: 4px;\n	}\n\n	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-track {\n		background: transparent;\n	}\n\n	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb {\n		background: rgba(255, 255, 255, 0.1);\n		border-radius: 2px;\n	}\n\n	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb:hover {\n		background: rgba(255, 255, 255, 0.2);\n	}\n\n	.mini-panel-content .parameters {\n		background: transparent;\n		border: none;\n		box-shadow: none;\n		padding: 4px;\n	}\n\n	@media screen and (max-width: 340px) {\n\n		.mini-panel-content .parameters {\n			min-width: 0 !important;\n		}\n\n		.mini-panel-content .list-container.parameters .list-item-row,\n		.mini-panel-content .list-container.parameters .list-header {\n			grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) !important;\n		}\n\n	}\n\n	.mini-panel-content .list-container.parameters {\n		padding: 2px 6px 0px 6px !important;\n	}\n\n	.mini-panel-content .list-header {\n		display: none;\n		padding: 2px 4px;\n		font-size: 11px;\n		font-weight: 600;\n		text-transform: uppercase;\n		letter-spacing: 0.5px;\n	}\n\n	.mini-panel-content .list-item {\n		border-bottom: 1px solid rgba(74, 74, 90, 0.2);\n		transition: background-color 0.15s;\n	}\n\n	.mini-panel-content .list-item:last-child {\n		border-bottom: none;\n	}\n\n	.mini-panel-content .list-item:hover {\n		background-color: rgba(255, 255, 255, 0.04);\n	}\n\n	.mini-panel-content .list-item.actionable:hover {\n		background-color: rgba(255, 255, 255, 0.06);\n		cursor: pointer;\n	}\n\n	.info-icon {\n		display: inline-flex;\n		align-items: center;\n		justify-content: center;\n		width: 14px;\n		height: 14px;\n		border-radius: 50%;\n		background-color: rgba(255, 255, 255, 0.1);\n		color: var(--text-secondary);\n		font-size: 10px;\n		font-style: italic;\n		margin-left: 6px;\n		cursor: help;\n		position: relative;\n	}\n\n	.info-icon.active {\n		background-color: var(--color-accent);\n		color: white;\n	}\n\n	@media (hover: hover) {\n		.info-icon:hover {\n			background-color: var(--color-accent);\n			color: white;\n		}\n	}\n\n	.info-tooltip {\n		position: fixed;\n		transform: translate(-50%, -100%);\n		background-color: rgba(30, 30, 36, 0.95);\n		border: 1px solid var(--profiler-border);\n		border-radius: 6px;\n		padding: 10px 14px;\n		color: var(--text-primary);\n		font-size: 12px;\n		width: max-content;\n		max-width: 250px;\n		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n		opacity: 0;\n		visibility: hidden;\n		transition: opacity 0.2s, visibility 0.2s;\n		z-index: 999999;\n		font-style: normal;\n		font-family: var(--font-family);\n		text-align: left;\n		white-space: normal;\n	}\n\n	.info-tooltip h3 {\n		margin: 0 0 6px 0;\n		font-size: 13px;\n		color: var(--color-accent);\n	}\n\n	.info-tooltip strong {\n		font-weight: 600;\n		color: white;\n	}\n\n	/* Style adjustments for lil-gui look */\n	.mini-panel-content .item-row {\n		padding: 3px 8px;\n		min-height: 24px;\n	}\n\n	.mini-panel-content .list-item-row {\n		padding: 1px 4px;\n		gap: 8px;\n		min-height: 21px;\n		align-items: center;\n	}\n\n	.mini-panel-content input[type=\"checkbox\"] {\n		width: 12px;\n		height: 12px;\n	}\n\n	.mini-panel-content input[type=\"range\"] {\n		height: 18px;\n	}\n\n	.mini-panel-content .value-number input,\n	.mini-panel-content .value-slider input {\n		background-color: rgba(0, 0, 0, 0.3);\n		border: 1px solid rgba(74, 74, 90, 0.5);\n		font-size: 10px;\n	}\n\n	.mini-panel-content .value-number input:focus,\n	.mini-panel-content .value-slider input:focus {\n		border-color: var(--color-accent);\n	}\n\n	.mini-panel-content .value-slider {\n		gap: 6px;\n	}\n\n	/* Compact nested items */\n	.mini-panel-content .list-item .list-item {\n		margin-left: 8px;\n	}\n\n	.mini-panel-content .list-item .list-item .item-row,\n	.mini-panel-content .list-item .list-item .list-item-row {\n		padding: 2px 6px;\n		min-height: 22px;\n	}\n\n	/* Compact collapsible headers */\n	.mini-panel-content .collapsible .item-row,\n	.mini-panel-content .list-item-row.collapsible {\n		padding: 2px 8px;\n		font-weight: 600;\n		min-height: 16px;\n		display: flex;\n		align-items: center;\n		line-height: 1;\n	}\n\n	.mini-panel-content .collapsible-icon {\n		font-size: 10px;\n		width: 14px;\n		height: 14px;\n	}\n\n	.mini-panel-content .param-control input[type=\"range\"] {\n		height: 12px;\n		margin-top: 1px;\n		padding-top: 5px;\n		user-select: none;\n		-webkit-user-select: none;\n		outline: none;\n	}\n\n	.mini-panel-content .param-control input[type=\"range\"]::-webkit-slider-thumb {\n		width: 14px;\n		height: 14px;\n		margin-top: -5px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.mini-panel-content .param-control input[type=\"range\"]::-moz-range-thumb {\n		width: 14px;\n		height: 14px;\n		user-select: none;\n		-moz-user-select: none;\n	}\n\n	.mini-panel-content .list-children-container {\n		padding-left: 0;\n	}\n\n	.mini-panel-content .param-control input[type=\"number\"] {\n		flex-basis: 60px !important;\n	}\n\n	.mini-panel-content .param-control {\n		align-items: center;\n	}\n\n	.mini-panel-content .param-control select {\n		font-size: 11px;\n	}\n\n	.mini-panel-content .list-item-wrapper {\n		margin-top: 0;\n		margin-bottom: 0;\n	}\n\n	.profiler-panel {\n		position: fixed;\n		z-index: 1001 !important;\n		bottom: 0;\n		left: 0;\n		right: 0;\n		height: 350px;\n		background-color: var(--profiler-background);\n		backdrop-filter: blur(8px);\n		border-top: 2px solid var(--profiler-border);\n		color: var(--text-primary);\n		display: flex;\n		flex-direction: column;\n		z-index: 1000;\n		/*box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);*/\n		transform: translateY(100%);\n		transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s ease-out, width 0.3s ease-out;\n		font-family: var(--font-mono);\n	}\n\n	.profiler-panel.resizing,\n	.profiler-panel.dragging {\n		transition: none;\n	}\n\n	.profiler-panel.visible {\n		transform: translateY(0);\n	}\n\n	.profiler-panel.maximized {\n		height: 100vh;\n	}\n\n	/* Position-specific styles */\n	.profiler-panel.position-top {\n		bottom: auto;\n		top: 0;\n		border-top: none;\n		border-bottom: 2px solid var(--profiler-border);\n		transform: translateY(-100%);\n	}\n\n	.profiler-panel.position-top.visible {\n		transform: translateY(0);\n	}\n\n	.profiler-panel.position-bottom {\n		/* Default position - already defined above */\n	}\n\n	.profiler-panel.position-left {\n		top: 0;\n		bottom: 0;\n		left: 0;\n		right: auto;\n		width: 350px;\n		height: 100%;\n		border-top: none;\n		border-right: 2px solid var(--profiler-border);\n		transform: translateX(-100%);\n	}\n\n	.profiler-panel.position-left.visible {\n		transform: translateX(0);\n	}\n\n	.profiler-panel.position-right {\n		top: 0;\n		bottom: 0;\n		left: auto;\n		right: 0;\n		width: 350px;\n		height: 100%;\n		border-top: none;\n		border-left: 2px solid var(--profiler-border);\n		transform: translateX(100%);\n	}\n\n	.profiler-panel.position-right.visible {\n		transform: translateX(0);\n	}\n\n	.profiler-panel.position-floating {\n		border: 2px solid var(--profiler-border);\n		border-radius: 8px;\n		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n		transform: none !important;\n		overflow: hidden;\n	}\n\n	.profiler-panel.position-floating.visible {\n		transform: none !important;\n	}\n\n	.profiler-panel.position-floating .profiler-header {\n		border-radius: 6px 6px 0 0;\n	}\n\n	.profiler-panel.position-floating .panel-resizer {\n		bottom: 0;\n		right: 0;\n		top: auto;\n		left: auto;\n		width: 16px;\n		height: 16px;\n		cursor: nwse-resize;\n		border-radius: 0 0 6px 0;\n	}\n\n	.profiler-panel.position-floating .panel-resizer::after {\n		content: '';\n		position: absolute;\n		right: 2px;\n		bottom: 2px;\n		width: 10px;\n		height: 10px;\n		background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--profiler-border) 45%, var(--profiler-border) 55%, transparent 55%);\n	}\n\n\n	.panel-resizer {\n		position: absolute;\n		top: -2px;\n		left: 0;\n		width: 100%;\n		height: 5px;\n		cursor: ns-resize;\n		z-index: 1001;\n		touch-action: none;\n	}\n\n	.profiler-panel.position-top .panel-resizer {\n		top: auto;\n		bottom: -2px;\n	}\n\n	.profiler-panel.position-left .panel-resizer {\n		top: 0;\n		left: auto;\n		right: -2px;\n		width: 5px;\n		height: 100%;\n		cursor: ew-resize;\n	}\n\n	.profiler-panel.position-right .panel-resizer {\n		top: 0;\n		left: -2px;\n		right: auto;\n		width: 5px;\n		height: 100%;\n		cursor: ew-resize;\n	}\n\n	.profiler-header {\n		display: flex;\n		background-color: var(--profiler-header-background);\n		border-bottom: 1px solid var(--profiler-border);\n		flex-shrink: 0;\n		justify-content: space-between;\n		align-items: stretch;\n\n		overflow-x: auto;\n		overflow-y: hidden;\n		width: calc(100% - 120px);\n		height: 32px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.profiler-panel.has-horizontal-scroll .profiler-header {\n		height: 38px;\n	}\n\n	/* Adjust header width based on panel position */\n	.profiler-panel.position-right .profiler-header,\n	.profiler-panel.position-left .profiler-header {\n		width: calc(100% - 120px);\n	}\n\n	.profiler-panel.position-bottom .profiler-header,\n	.profiler-panel.position-top .profiler-header {\n		width: calc(100% - 120px);\n	}\n\n	/* Adjust header width when position toggle button is hidden (mobile) */\n	.profiler-panel.hide-position-toggle .profiler-header {\n		width: calc(100% - 80px);\n	}\n\n	/* Adjust header width when maximized (floating position toggle button is hidden) */\n	.profiler-panel.maximized .profiler-header {\n		width: calc(100% - 80px);\n	}\n\n	/* ===== RULES FOR WHEN THERE ARE NO TABS ===== */\n\n	/* Horizontal mode (bottom/top) without tabs */\n	.profiler-panel.position-bottom.no-tabs:not(.maximized),\n	.profiler-panel.position-top.no-tabs:not(.maximized) {\n		height: 32px !important;\n		min-height: 32px !important;\n	}\n\n	.profiler-panel.position-bottom.no-tabs .profiler-header,\n	.profiler-panel.position-top.no-tabs .profiler-header {\n		width: 100%;\n		height: 32px;\n		border-bottom: none;\n	}\n\n	.profiler-panel.position-bottom.no-tabs .profiler-content-wrapper,\n	.profiler-panel.position-top.no-tabs .profiler-content-wrapper {\n		display: none;\n	}\n\n	.profiler-panel.position-bottom.no-tabs .panel-resizer,\n	.profiler-panel.position-top.no-tabs .panel-resizer {\n		display: none;\n	}\n\n	/* Vertical mode (right/left) without tabs */\n	.profiler-panel.position-right.no-tabs:not(.maximized),\n	.profiler-panel.position-left.no-tabs:not(.maximized) {\n		width: 40px !important;\n		min-width: 40px !important;\n	}\n\n	/* Vertical layout for header when no tabs */\n	.profiler-panel.position-right.no-tabs .profiler-header,\n	.profiler-panel.position-left.no-tabs .profiler-header {\n		width: 100%;\n		flex-direction: column;\n		height: 100%;\n		border-bottom: none;\n	}\n\n	/* Vertical layout for controls when no tabs */\n	.profiler-panel.position-right.no-tabs .profiler-controls,\n	.profiler-panel.position-left.no-tabs .profiler-controls {\n		position: static;\n		flex-direction: column-reverse;\n		justify-content: flex-end;\n		width: 100%;\n		height: 100%;\n		border-bottom: none;\n		border-left: none;\n		background: transparent;\n	}\n\n	.profiler-panel.position-right.no-tabs .profiler-controls button,\n	.profiler-panel.position-left.no-tabs .profiler-controls button {\n		width: 100%;\n		height: 40px;\n		border-left: none;\n		border-top: none;\n		border-bottom: 1px solid var(--profiler-border);\n	}\n\n	.profiler-panel.position-right.no-tabs .profiler-content-wrapper,\n	.profiler-panel.position-left.no-tabs .profiler-content-wrapper {\n		display: none;\n	}\n\n	.profiler-panel.position-right.no-tabs .profiler-tabs,\n	.profiler-panel.position-left.no-tabs .profiler-tabs {\n		display: none;\n		padding-left: 2px;\n	}\n\n	.profiler-panel.position-right.no-tabs .panel-resizer,\n	.profiler-panel.position-left.no-tabs .panel-resizer {\n		display: none;\n	}\n\n	/* Hide position toggle on mobile without tabs */\n	.profiler-panel.hide-position-toggle.position-right.no-tabs:not(.maximized),\n	.profiler-panel.hide-position-toggle.position-left.no-tabs:not(.maximized) {\n		width: 40px !important;\n		min-width: 40px !important;\n	}\n\n	/* Hide drag indicator on mobile devices */\n	.profiler-panel.is-mobile .tab-btn.active::before {\n		display: none;\n	}\n\n	.profiler-header::-webkit-scrollbar,\n	.profiler-tabs::-webkit-scrollbar,\n	.profiler-content::-webkit-scrollbar,\n	.detached-tab-content::-webkit-scrollbar,\n	.console-log::-webkit-scrollbar,\n	.timelineTrack::-webkit-scrollbar,\n	.list-scroll-wrapper::-webkit-scrollbar {\n		width: 4px;\n		height: 4px;\n	}\n\n	.profiler-header::-webkit-scrollbar-track,\n	.profiler-tabs::-webkit-scrollbar-track,\n	.profiler-content::-webkit-scrollbar-track,\n	.detached-tab-content::-webkit-scrollbar-track,\n	.console-log::-webkit-scrollbar-track,\n	.timelineTrack::-webkit-scrollbar-track,\n	.list-scroll-wrapper::-webkit-scrollbar-track {\n		background: transparent;\n	}\n\n	.profiler-header::-webkit-scrollbar-thumb,\n	.profiler-tabs::-webkit-scrollbar-thumb,\n	.profiler-content::-webkit-scrollbar-thumb,\n	.detached-tab-content::-webkit-scrollbar-thumb,\n	.console-log::-webkit-scrollbar-thumb,\n	.timelineTrack::-webkit-scrollbar-thumb,\n	.list-scroll-wrapper::-webkit-scrollbar-thumb {\n		background-color: rgba(255, 255, 255, 0.15);\n		border-radius: 2px;\n	}\n\n	.profiler-header::-webkit-scrollbar-thumb:hover,\n	.profiler-tabs::-webkit-scrollbar-thumb:hover,\n	.profiler-content::-webkit-scrollbar-thumb:hover,\n	.detached-tab-content::-webkit-scrollbar-thumb:hover,\n	.console-log::-webkit-scrollbar-thumb:hover,\n	.timelineTrack::-webkit-scrollbar-thumb:hover,\n	.list-scroll-wrapper::-webkit-scrollbar-thumb:hover {\n		background-color: rgba(255, 255, 255, 0.3);\n	}\n\n	.profiler-header::-webkit-scrollbar-corner,\n	.profiler-tabs::-webkit-scrollbar-corner,\n	.profiler-content::-webkit-scrollbar-corner,\n	.detached-tab-content::-webkit-scrollbar-corner,\n	.console-log::-webkit-scrollbar-corner,\n	.timelineTrack::-webkit-scrollbar-corner,\n	.list-scroll-wrapper::-webkit-scrollbar-corner {\n		background: transparent;\n	}\n\n	.profiler-header,\n	.profiler-tabs,\n	.profiler-content,\n	.detached-tab-content,\n	.console-log,\n	.timelineTrack,\n	.list-scroll-wrapper {\n		scrollbar-width: thin;\n		scrollbar-color: rgba(255, 255, 255, 0.15) transparent;\n	}\n\n	.profiler-panel.dragging .profiler-header {\n		cursor: grabbing !important;\n	}\n\n	.profiler-panel.dragging {\n		opacity: 0.8;\n	}\n\n	.profiler-tabs {\n		display: flex;\n		cursor: grab;\n		position: relative;\n		margin-left: 2px;\n	}\n\n	.profiler-tabs:active {\n		cursor: grabbing;\n	}\n\n\n	.profiler-controls {\n		display: flex;\n		position: absolute;\n		right: 0;\n		top: 0;\n		height: 32px;\n		background: var(--profiler-header-background);\n		border-bottom: 1px solid var(--profiler-border);\n	}\n\n	.profiler-panel.has-horizontal-scroll .profiler-controls {\n		height: 38px;\n	}\n\n	.tab-btn {\n		position: relative;\n		background: transparent;\n		border: none;\n		/*border-right: 1px solid var(--profiler-border);*/\n		color: var(--text-secondary);\n		padding: 0 15px 2px 15px;\n		height: 100%;\n		box-sizing: border-box;\n		cursor: default;\n		display: flex;\n		align-items: center;\n		font-family: var(--font-family);\n		font-weight: 600;\n		font-size: 13px;\n		user-select: none;\n		transition: opacity 0.2s, transform 0.2s;\n		touch-action: pan-x;\n		white-space: nowrap;\n	}\n\n	.tab-btn.active {\n		border-bottom: 2px solid var(--color-accent);\n		color: white;\n	}\n\n	.tab-btn.active::before {\n		content: '';\n		position: absolute;\n		left: 2px;\n		top: 50%;\n		transform: translateY(-50%);\n		width: 8px;\n		height: 14px;\n		background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='3' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='2' cy='7' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='2' cy='11' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='6' cy='3' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='6' cy='7' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='6' cy='11' r='1' fill='%234a4a5a'/%3E%3C/svg%3E\");\n		background-repeat: no-repeat;\n		background-position: center;\n		opacity: 0.6;\n	}\n\n	.tab-btn.no-detach.active::before {\n		display: none;\n	}\n\n	.floating-btn,\n	.maximize-btn,\n	.hide-panel-btn {\n		background: transparent;\n		border: none;\n		border-left: 1px solid var(--profiler-border);\n		color: var(--text-secondary);\n		width: 40px;\n		height: 100%;\n		cursor: pointer;\n		transition: all 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		flex-shrink: 0;\n	}\n\n	/* Disable transitions in vertical mode to avoid broken animations */\n	.profiler-panel.position-right .floating-btn,\n	.profiler-panel.position-right .maximize-btn,\n	.profiler-panel.position-right .hide-panel-btn,\n	.profiler-panel.position-left .floating-btn,\n	.profiler-panel.position-left .maximize-btn,\n	.profiler-panel.position-left .hide-panel-btn {\n		transition: background-color 0.2s, color 0.2s;\n	}\n\n	.floating-btn:hover,\n	.maximize-btn:hover,\n	.hide-panel-btn:hover {\n		background-color: rgba(255, 255, 255, 0.1);\n		color: var(--text-primary);\n	}\n\n	/* Hide maximize button when there are no tabs */\n	.profiler-panel.position-right.no-tabs .maximize-btn,\n	.profiler-panel.position-left.no-tabs .maximize-btn,\n	.profiler-panel.position-bottom.no-tabs .maximize-btn,\n	.profiler-panel.position-top.no-tabs .maximize-btn {\n		display: none !important;\n	}\n\n	/* Hide floating button when maximized */\n	.profiler-panel.maximized .floating-btn {\n		display: none !important;\n	}\n\n	.profiler-content-wrapper {\n		flex-grow: 1;\n		overflow: hidden;\n		position: relative;\n	}\n\n	.profiler-content {\n		position: absolute;\n		top: 0;\n		left: 0;\n		width: 100%;\n		height: 100%;\n		overflow-y: auto;\n		font-size: 13px;\n		visibility: hidden;\n		opacity: 0;\n		transition: opacity 0.2s, visibility 0.2s;\n		box-sizing: border-box;\n		display: flex;\n		flex-direction: column;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.profiler-content.active {\n		visibility: visible;\n		opacity: 1;\n	}\n\n	.profiler-content {\n		overflow: auto; /* make sure scrollbars can appear */\n	}\n\n\n	.list-item-row {\n		display: grid;\n		align-items: center;\n		padding: 4px 8px;\n		border-radius: 3px;\n		transition: background-color 0.2s;\n		gap: 10px;\n		border-bottom: none;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.parameters .list-item-row {\n		min-height: 23px;\n	}\n\n	.mini-panel-content .parameters .list-item-row {\n		min-height: 21px;\n	}\n\n	.list-item-wrapper {\n		margin-top: 2px;\n		margin-bottom: 2px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.list-item-wrapper:has(> .list-item-row .graph-container) {\n		margin-left: -1.5em;\n	}\n\n	.list-item-wrapper:first-child {\n		/*margin-top: 0;*/\n	}\n\n	.list-item-wrapper:not(.header-wrapper):nth-child(odd) > .list-item-row {\n		background-color: rgba(0,0,0,0.1);\n	}\n\n	.list-item-wrapper.header-wrapper>.list-item-row {\n		color: var(--color-accent);\n		background-color: rgba(0, 170, 255, 0.1);\n	}\n\n	.list-item-wrapper.header-wrapper>.list-item-row>.list-item-cell:first-child {\n		font-weight: 600;\n	}\n\n	.list-item-row.collapsible,\n	.list-item-row.actionable {\n		cursor: pointer;\n	}\n\n	.list-item-row.collapsible {\n		background-color: rgba(0, 170, 255, 0.15) !important;\n		min-height: 23px;\n	}\n\n	.list-item-row.collapsible.alert,\n	.list-item-row.alert {\n		background-color: rgba(244, 67, 54, 0.1) !important;\n	}\n\n	@media (hover: hover) {\n\n		.list-item-row:hover:not(.collapsible):not(.no-hover),\n		.list-item-row:hover:not(.no-hover),\n		.list-item-row.actionable:hover,\n		.list-item-row.collapsible.actionable:hover {\n			background-color: rgba(255, 255, 255, 0.05) !important;\n		}\n\n		.list-item-row.collapsible:hover {\n			background-color: rgba(0, 170, 255, 0.25) !important;\n		}\n\n	}\n\n	.list-item-cell {\n		white-space: pre;\n		display: flex;\n		align-items: center;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.list-item-cell:not(:first-child) {\n		justify-content: flex-end;\n		font-weight: 600;\n	}\n\n	.list-header {\n		display: grid;\n		align-items: center;\n		padding: 4px 8px;\n		font-weight: 600;\n		color: var(--text-secondary);\n		padding-bottom: 6px;\n		border-bottom: 1px solid var(--profiler-border);\n		margin-bottom: 5px;\n		gap: 10px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.list-item-wrapper.section-start {\n		margin-top: 5px;\n		margin-bottom: 5px;\n	}\n\n	.list-header .list-header-cell:not(:first-child) {\n		text-align: right;\n	}\n\n	.list-children-container {\n		padding-left: 1.5em;\n		overflow: hidden;\n		transition: max-height 0.1s ease-out;\n		margin-top: 2px;\n	}\n\n	.list-children-container.closed {\n		max-height: 0;\n	}\n\n	.item-toggler {\n		display: inline-block;\n		margin-right: 0.8em;\n		text-align: left;\n	}\n\n	.list-item-row.open .item-toggler::before {\n		content: '-';\n	}\n\n	.list-item-row:not(.open) .item-toggler::before {\n		content: '+';\n	}\n\n	.list-item-cell .value.good {\n		color: var(--color-green);\n	}\n\n	.list-item-cell .value.warn {\n		color: var(--color-yellow);\n	}\n\n	.list-item-cell .value.bad {\n		color: var(--color-red);\n	}\n\n	.list-scroll-wrapper {\n		width: max-content;\n		min-width: 100%;\n		display: flex;\n		flex-direction: column;\n		min-height: 100%;\n	}\n\n	.list-container.parameters .list-item-row:not(.collapsible) {\n	}\n\n	.graph-container {\n		width: 100%;\n		box-sizing: border-box;\n		padding: 8px 0;\n		position: relative;\n	}\n\n	.graph-svg, .graph-canvas {\n		width: 0;\n		min-width: 100%;\n		height: 80px;\n		background-color: var(--profiler-header);\n		border: 1px solid var(--profiler-border);\n		border-radius: 4px;\n		display: block;\n	}\n\n	.graph-path {\n		stroke-width: 2;\n		fill-opacity: 0.4;\n	}\n\n	.console-buttons-group {\n		display: flex;\n		gap: 20px;\n	}\n\n	.console-filter-input {\n		background-color: var(--profiler-background);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px 10px 2px 10px;\n		font-family: var(--font-mono);\n		flex-grow: 1;\n		max-width: 300px;\n		border-radius: 15px;\n	}\n\n	.console-filter-input:focus {\n		outline: none;\n		border-color: var(--text-secondary);\n	}\n\n	.console-copy-button {\n		background: transparent;\n		border: none;\n		color: var(--text-secondary);\n		cursor: pointer;\n		padding: 4px;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		border-radius: 4px;\n		transition: color 0.2s, background-color 0.2s;\n	}\n\n	.console-copy-button:hover {\n		color: var(--text-primary);\n		background-color: var(--profiler-hover);\n	}\n\n	.console-copy-button.copied {\n		color: var(--color-green);\n	}\n\n	.console-log {\n		display: flex;\n		flex-direction: column;\n		gap: 4px;\n		padding: 10px;\n		overflow-y: auto;\n		flex-grow: 1;\n		user-select: text;\n		-webkit-user-select: text;\n	}\n\n	.log-message {\n		display: flex;\n		align-items: flex-start;\n		gap: 6px;\n		padding: 3px 5px;\n		border-radius: 3px;\n		line-height: 1.5 !important;\n	}\n\n	.log-count-badge {\n		display: inline-block;\n		text-align: center;\n		min-width: 14px;\n		height: 14px;\n		border-radius: 7px;\n		padding: 0 3px;\n		font-size: 9px;\n		font-weight: bold;\n		line-height: 14px;\n		box-sizing: border-box;\n		margin-top: 0;\n		flex-shrink: 0;\n	}\n\n	.log-icon {\n		display: inline-block;\n		text-align: center;\n		width: 14px;\n		height: 14px;\n		font-size: 11px;\n		line-height: 14px;\n		margin-top: 0;\n		flex-shrink: 0;\n	}\n\n	.log-body {\n		flex-grow: 1;\n		white-space: pre-wrap;\n		word-break: break-all;\n	}\n\n	.log-message.info .log-count-badge {\n		background-color: rgba(255, 255, 255, 0.12);\n		border: 1px solid rgba(255, 255, 255, 0.2);\n		color: var(--text-secondary);\n	}\n\n	.log-message.warn .log-count-badge {\n		background-color: rgba(255, 193, 7, 0.18);\n		border: 1px solid rgba(255, 193, 7, 0.35);\n		color: var(--color-yellow);\n	}\n\n	.log-message.error .log-count-badge {\n		background-color: rgba(244, 67, 54, 0.18);\n		border: 1px solid rgba(244, 67, 54, 0.35);\n		color: #ff8a80;\n	}\n\n	.log-message.hidden {\n		display: none;\n	}\n\n	.log-message.info {\n		color: var(--text-primary);\n	}\n\n	.log-message.warn {\n		color: var(--color-yellow);\n	}\n\n	.log-message.error {\n		color: #f9dedc;\n		background-color: rgba(244, 67, 54, 0.1);\n	}\n\n	.log-prefix {\n		color: var(--text-secondary);\n		margin-right: 8px;\n	}\n\n	.log-code {\n		background-color: rgba(255, 255, 255, 0.1);\n		border-radius: 3px;\n		padding: 1px 4px;\n	}\n\n	.thumbnail-container {\n		display: flex;\n		align-items: center;\n	}\n\n	.thumbnail-svg {\n		width: 40px;\n		height: 22.5px;\n		flex-shrink: 0;\n		margin-right: 8px;\n	}\n\n	.param-control {\n		display: flex;\n		align-items: center;\n		justify-content: flex-end;\n		gap: 10px;\n		width: 100%;\n	}\n\n	.param-control input,\n	.param-control select,\n	.param-control button {\n		background-color: var(--profiler-background);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px 6px;\n		padding-bottom: 2px;\n		font-family: var(--font-mono);\n		width: 100%;\n		box-sizing: border-box;\n	}\n\n	.param-control input:focus {\n		outline: none;\n		border-color: var(--color-accent);\n	}\n\n	.param-control select {\n		padding-top: 3px;\n		padding-bottom: 1px;\n	}\n\n	.param-control input[type=\"number\"] {\n		cursor: ns-resize;\n	}\n\n	.param-control input[type=\"color\"] {\n		padding: 2px;\n	}\n\n	.param-control button {\n		cursor: pointer;\n		transition: background-color 0.2s;\n	}\n\n	.param-control button:hover {\n		background-color: var(--profiler-header);\n	}\n\n	.param-control-vector {\n		display: flex;\n		gap: 5px;\n	}\n\n	.custom-checkbox {\n		display: inline-flex;\n		align-items: center;\n		cursor: pointer;\n		gap: 8px;\n		will-change: transform;\n		font-size: 12px;\n	}\n\n	.custom-checkbox input {\n		display: none;\n	}\n\n	.custom-checkbox .checkmark {\n		width: 14px;\n		height: 14px;\n		border: 1px solid var(--color-accent);\n		border-radius: 3px;\n		display: inline-flex;\n		justify-content: center;\n		align-items: center;\n		transition: background-color 0.2s, border-color 0.2s;\n	}\n\n	.custom-checkbox .checkbox-text {\n		font-size: 12px;\n		margin-top: 1px;\n		color: inherit;\n	}\n\n	.custom-checkbox .checkmark::after {\n		content: '';\n		width: 6px;\n		height: 6px;\n		background-color: var(--color-accent);\n		border-radius: 1px;\n		display: block;\n		transform: scale(0);\n		transition: transform 0.2s;\n	}\n\n	.list-container .custom-checkbox .checkmark {\n		width: 13px;\n		height: 13px;\n	}\n\n	.list-container .custom-checkbox .checkmark::after {\n		width: 7px;\n		height: 7px;\n	}\n\n	.custom-checkbox input:checked+.checkmark {\n		border-color: var(--color-accent);\n	}\n\n	.custom-checkbox input:checked+.checkmark::after {\n		transform: scale(1);\n	}\n\n	.param-control input[type=\"range\"] {\n		-webkit-appearance: none;\n		appearance: none;\n		width: 100%;\n		height: 16px;\n		background: var(--profiler-header);\n		border-radius: 5px;\n		border: 1px solid var(--profiler-border);\n		outline: none;\n		padding: 0px;\n		padding-top: 8px;\n	}\n\n	.param-control input[type=\"range\"]::-webkit-slider-thumb {\n		-webkit-appearance: none;\n		appearance: none;\n		width: 18px;\n		height: 18px;\n		background: var(--profiler-background);\n		border: 1px solid var(--color-accent);\n		border-radius: 3px;\n		cursor: pointer;\n		margin-top: -8px;\n	}\n\n	.param-control input[type=\"range\"]::-moz-range-thumb {\n		width: 18px;\n		height: 18px;\n		background: var(--profiler-background);\n		border: 2px solid var(--color-accent);\n		border-radius: 3px;\n		cursor: pointer;\n	}\n\n	.param-control input[type=\"range\"]::-moz-range-track {\n		width: 100%;\n		height: 16px;\n		background: var(--profiler-header);\n		border-radius: 5px;\n		border: 1px solid var(--profiler-border);\n	}\n\n	/* Override .param-control styles for mini-panel-content */\n	.mini-panel-content input,\n	.mini-panel-content select,\n	.mini-panel-content button {\n		padding: 2px 4px;\n		height: 21px;\n		line-height: 1.4;\n		padding-top: 4px;\n	}\n\n	.mini-panel-content .param-control input,\n	.mini-panel-content .param-control select,\n	.mini-panel-content .param-control button {\n		background-color: #1e1e24c2;\n		line-height: 1.0;\n	}\n\n	.mini-panel-content .param-control select {\n		padding: 2px 2px;\n		padding-top: 3px;\n	}\n\n	.mini-panel-content .param-control input[type=\"number\"]::-webkit-outer-spin-button,\n	.mini-panel-content .param-control input[type=\"number\"]::-webkit-inner-spin-button {\n		-webkit-appearance: none;\n		margin: 0;\n	}\n\n	.mini-panel-content .param-control input[type=\"number\"] {\n		-moz-appearance: textfield;\n	}\n\n	.mini-panel-content .list-item-cell span {\n		position: relative;\n		top: 1px;\n		margin-left: 2px;\n	}\n\n	@media screen and (max-width: 340px) {\n\n		.mini-panel-content .list-item-cell:first-child {\n			display: flex;\n			align-items: center;\n			min-width: 0;\n			overflow: hidden;\n			width: 100%;\n		}\n\n		.mini-panel-content .list-item-cell:first-child .value {\n			overflow: hidden;\n			text-overflow: ellipsis;\n			white-space: nowrap;\n			flex: 1 1 0%;\n			min-width: 0;\n		}\n\n		.mini-panel-content .list-item-cell:first-child .info-icon {\n			flex-shrink: 0;\n		}\n\n	}\n\n	.mini-panel-content .custom-checkbox .checkmark {\n		width: 12px;\n		height: 12px;\n		margin-bottom: 2px;\n		will-change: transform;\n	}\n\n	.mini-panel-content .list-container.parameters .list-item-row:not(.collapsible) {\n		margin-bottom: 2px;\n	}\n\n	.mini-panel-content .list-container.parameters .list-children-container > .list-item-wrapper:first-child:has(> .list-item-row:not(.collapsible)) {\n		margin-top: 2px;\n	}\n\n	.mini-panel-content .list-container.parameters .list-children-container > .list-item-wrapper:last-child:has(> .list-item-row:not(.collapsible)) {\n		margin-bottom: 4px;\n	}\n\n	@media screen and (max-width: 450px) and (orientation: portrait) {\n\n		.console-filter-input {\n			max-width: 100px;\n		}\n\n	}\n\n	/* Touch device optimizations */\n	@media (hover: none) and (pointer: coarse) {\n\n		.panel-resizer {\n			top: -10px !important;\n			height: 20px !important;\n		}\n\n		.profiler-panel.position-top .panel-resizer {\n			top: auto !important;\n			bottom: -10px !important;\n			height: 20px !important;\n		}\n\n		.profiler-panel.position-left .panel-resizer {\n			right: -10px !important;\n			width: 20px !important;\n			height: 100% !important;\n		}\n\n		.profiler-panel.position-right .panel-resizer {\n			left: -10px !important;\n			width: 20px !important;\n			height: 100% !important;\n		}\n\n		.detached-tab-resizer-top,\n		.detached-tab-resizer-bottom {\n			height: 10px !important;\n		}\n\n		.detached-tab-resizer-left,\n		.detached-tab-resizer-right {\n			width: 10px !important;\n		}\n\n	}\n\n	.drag-preview-indicator {\n		position: fixed;\n		background-color: rgba(0, 170, 255, 0.2);\n		border: 2px dashed var(--color-accent);\n		z-index: 999;\n		pointer-events: none;\n		transition: all 0.2s ease-out;\n	}\n\n	/* Detached Tab Windows */\n	.detached-tab-panel {\n		position: fixed;\n		width: 500px;\n		height: 400px;\n		background: var(--profiler-background);\n		border: 1px solid var(--profiler-border);\n		border-radius: 8px;\n		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n		z-index: 1002;\n		display: flex;\n		flex-direction: column;\n		backdrop-filter: blur(10px);\n		overflow: hidden;\n		opacity: 1;\n		visibility: visible;\n		transition: opacity 0.2s, visibility 0.2s;\n		font-family: var(--font-mono);\n		font-size: 13px;\n	}\n\n\n	.detached-tab-header {\n		background: var(--profiler-header-background);\n		padding: 0 3px 0 10px;\n		font-family: var(--font-family);\n		font-size: 13px;\n		color: var(--text-primary);\n		font-weight: 600;\n		display: flex;\n		justify-content: space-between;\n		align-items: center;\n		border-bottom: 1px solid var(--profiler-border);\n		cursor: grab;\n		user-select: none;\n		height: 32px;\n		flex-shrink: 0;\n		-webkit-font-smoothing: antialiased;\n		-moz-osx-font-smoothing: grayscale;\n		touch-action: none;\n	}\n\n	.detached-tab-header:active {\n		cursor: grabbing;\n	}\n\n	.detached-header-controls {\n		display: flex;\n		gap: 5px;\n	}\n\n	.detached-reattach-btn {\n		background: transparent;\n		border: none;\n		color: var(--text-secondary);\n		font-family: var(--font-family);\n		font-size: 18px;\n		line-height: 1;\n		cursor: pointer;\n		padding: 4px 8px;\n		border-radius: 4px;\n		transition: all 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		-webkit-font-smoothing: antialiased;\n		-moz-osx-font-smoothing: grayscale;\n	}\n\n	.detached-reattach-btn:hover {\n		background: rgba(0, 170, 255, 0.2);\n		color: var(--color-accent);\n	}\n\n	.detached-tab-content {\n		flex: 1;\n		overflow: hidden;\n		position: relative;\n		background: var(--profiler-background);\n	}\n\n\n	.detached-tab-content .profiler-content {\n		display: flex !important;\n		flex-direction: column !important;\n		height: 100%;\n		visibility: visible !important;\n		opacity: 1 !important;\n		position: relative !important;\n	}\n\n	.detached-tab-content .profiler-content > * {\n		font-family: var(--font-mono);\n		color: var(--text-primary);\n	}\n\n	.detached-tab-resizer {\n		position: absolute;\n		bottom: 0;\n		right: 0;\n		width: 20px;\n		height: 20px;\n		cursor: nwse-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	.detached-tab-resizer::after {\n		content: '';\n		position: absolute;\n		bottom: 2px;\n		right: 2px;\n		width: 12px;\n		height: 12px;\n		border-right: 2px solid var(--profiler-border);\n		border-bottom: 2px solid var(--profiler-border);\n		border-bottom-right-radius: 6px;\n		opacity: 0.5;\n	}\n\n	.detached-tab-resizer:hover::after {\n		opacity: 1;\n		border-color: var(--color-accent);\n	}\n\n	/* Edge resizers */\n	.detached-tab-resizer-top {\n		position: absolute;\n		top: 0;\n		left: 0;\n		right: 0;\n		height: 5px;\n		cursor: ns-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	.detached-tab-resizer-right {\n		position: absolute;\n		top: 0;\n		right: 0;\n		bottom: 0;\n		width: 5px;\n		cursor: ew-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	.detached-tab-resizer-bottom {\n		position: absolute;\n		bottom: 0;\n		left: 0;\n		right: 0;\n		height: 5px;\n		cursor: ns-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	.detached-tab-resizer-left {\n		position: absolute;\n		top: 0;\n		left: 0;\n		bottom: 0;\n		width: 5px;\n		cursor: ew-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	/* Input number spin buttons - hide arrows */\n	/* Chrome, Safari, Edge, Opera */\n	.profiler-panel input[type=\"number\"]::-webkit-outer-spin-button,\n	.profiler-panel input[type=\"number\"]::-webkit-inner-spin-button,\n	.detached-tab-content input[type=\"number\"]::-webkit-outer-spin-button,\n	.detached-tab-content input[type=\"number\"]::-webkit-inner-spin-button {\n		-webkit-appearance: none;\n		margin: 0;\n	}\n\n	/* Firefox */\n	.profiler-panel input[type=\"number\"],\n	.detached-tab-content input[type=\"number\"] {\n		-moz-appearance: textfield;\n	}\n\n	.panel-action-btn {\n		background: transparent;\n		color: var(--text-primary);\n		border: 1px solid var(--profiler-border);\n		border-radius: 4px;\n		padding: 6px 12px;\n		cursor: pointer;\n		font-family: var(--font-family);\n		font-size: 12px;\n		transition: background-color 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n	}\n\n	.panel-action-btn:hover {\n		background-color: rgba(255, 255, 255, 0.05);\n	}\n\n	.node-canvas-wrapper {\n		touch-action: none;\n	}\n\n	.node-canvas-wrapper .node-canvas-detach-btn {\n		position: absolute;\n		top: 5px;\n		right: 5px;\n		background: rgba(30, 30, 36, 0.85);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px;\n		cursor: pointer;\n		opacity: 1;\n		transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		z-index: 10;\n	}\n\n	.node-canvas-wrapper .node-canvas-detach-btn:hover {\n		background-color: var(--color-accent);\n		border-color: var(--color-accent);\n		color: white;\n	}\n\n	.node-canvas-wrapper .node-canvas-fullscreen-btn {\n		position: absolute;\n		bottom: 5px;\n		right: 5px;\n		background: rgba(30, 30, 36, 0.85);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px;\n		cursor: pointer;\n		opacity: 1;\n		transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		z-index: 10;\n	}\n\n	.node-canvas-wrapper .node-canvas-fullscreen-btn:hover {\n		background-color: var(--color-accent);\n		border-color: var(--color-accent);\n		color: white;\n	}\n\n	.profiler-panel.maximized .node-canvas-fullscreen-btn {\n		display: none;\n	}\n\n	.toolbar {\n		display: flex;\n		align-items: center;\n		justify-content: space-between;\n		height: 32px;\n		padding: 4px 6px;\n		border-bottom: 1px solid var(--profiler-border);\n		background: var(--profiler-header-background);\n		flex-shrink: 0;\n		box-sizing: border-box;\n		gap: 16px;\n	}\n\n	.toolbar span {\n		color: var(--text-secondary);\n		font-size: 12px;\n		font-weight: 600;\n	}\n\n	.toolbar .custom-checkbox .checkmark {\n		width: 12px;\n		height: 12px;\n		border-radius: 4px;\n	}\n\n	.viewer-content .toolbar {\n		justify-content: flex-end;\n	}\n\n	.viewer-back-btn {\n		background: transparent;\n		border: none;\n		color: var(--text-secondary);\n		cursor: pointer;\n		font-size: 16px;\n		line-height: 1;\n		padding: 4px 8px;\n		border-radius: 4px;\n		margin-right: auto;\n		transition: color 0.2s, background-color 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n	}\n\n	.viewer-back-btn:hover {\n		color: var(--text-primary);\n		background-color: rgba(255, 255, 255, 0.05);\n	}\n\n	.select {\n		background: var(--profiler-background);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px 16px 2px 6px;\n		font-family: var(--font-mono);\n		font-size: 12px;\n		outline: none;\n		cursor: pointer;\n		appearance: none;\n		-webkit-appearance: none;\n		-moz-appearance: none;\n		background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n		background-repeat: no-repeat;\n		background-position: right 5px center;\n		background-size: 10px;\n	}\n\n	.select:focus {\n		border-color: var(--color-accent);\n	}\n\n	.full-viewer-container {\n		display: none;\n		flex-grow: 1;\n		width: 100%;\n		height: 100%;\n		overflow: hidden;\n		position: relative;\n		touch-action: none;\n	}\n\n}\n", e.appendChild(t);
+	dispose() {
+		this._rAFId !== null && (cancelAnimationFrame(this._rAFId), this._rAFId = null), this._resolveTimestampPromise = null, this._overdrawMaterial !== null && (this._overdrawMaterial.dispose(), this._overdrawMaterial = null), super.dispose();
 	}
-}, on = class {
+}, sn = class {
+	static init(e, t = null) {
+		let n = document.createElement("style");
+		t && (n.nonce = t), n.textContent = "\n@scope (.three-inspector) {\n\n	:scope {\n		--profiler-background: #1e1e24f5;\n		--profiler-header-background: #2a2a33aa;\n		--profiler-header: #2a2a33;\n		--profiler-border: #4a4a5a;\n		--text-primary: #e0e0e0;\n		--text-secondary: #9a9aab;\n		--color-accent: #00aaff;\n		--color-green: #4caf50;\n		--color-yellow: #ffc107;\n		--color-red: #f44336;\n		--color-fps: rgb(63, 81, 181);\n		--color-call: rgba(255, 185, 34, 1);\n		--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n		--font-mono: 'Courier New', Courier, monospace;\n\n		position: absolute;\n		top: 0;\n		left: 0;\n		width: 100%;\n		height: 100%;\n		pointer-events: none;\n		z-index: 1000;\n		overflow: hidden;\n		color-scheme: dark;\n	}\n\n	:scope * {\n		pointer-events: auto;\n	}\n\n	.profiler-panel, .profiler-toggle, .detached-tab-panel,\n	.profiler-panel *, .profiler-toggle *, .detached-tab-panel * {\n		text-transform: initial;\n		line-height: normal;\n		box-sizing: border-box;\n		-webkit-font-smoothing: antialiased;\n		-moz-osx-font-smoothing: grayscale;\n		-webkit-tap-highlight-color: transparent;\n	}\n\n	.profiler-toggle {\n		position: absolute;\n		top: 15px;\n		right: 15px;\n		background-color: rgba(30, 30, 36, 0.85);\n		border: 1px solid #4a4a5a54;\n		border-radius: 12px 6px 6px 12px;\n		color: var(--text-primary);\n		cursor: pointer;\n		z-index: 1002;\n		transition: all 0.2s ease-in-out;\n		/*font-size: 14px;*/\n		font-size: 15px;\n		backdrop-filter: blur(8px);\n		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n		display: flex;\n		align-items: stretch;\n		padding: 0;\n		overflow: hidden;\n		font-family: var(--font-family);\n	}\n\n	.profiler-toggle-graph {\n		position: absolute;\n		bottom: 0;\n		left: 0;\n		width: 100%;\n		height: 100%;\n		z-index: 0;\n		pointer-events: none;\n		background: transparent;\n		border: none;\n		border-radius: inherit;\n		opacity: 0.5;\n	}\n\n	.profiler-toggle.toggle-left {\n		right: auto;\n		left: 15px;\n		border-radius: 6px 12px 12px 6px;\n		flex-direction: row-reverse;\n	}\n\n	.profiler-toggle.toggle-left .builtin-tabs-container {\n		border-right: none;\n		border-left: 1px solid #262636;\n	}\n\n	.profiler-toggle:hover {\n		border-color: var(--color-accent);\n	}\n\n	.profiler-toggle.panel-open .toggle-icon {\n		background-color: rgba(0, 170, 255, 0.2);\n		color: var(--color-accent);\n	}\n\n	.toggle-icon {\n		position: relative;\n		z-index: 1;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		width: 40px;\n		font-size: 20px;\n		transition: background-color 0.2s;\n	}\n\n	.console-badge-container {\n		position: absolute;\n		top: 2px;\n		right: 2px;\n		display: flex;\n		gap: 2px;\n		pointer-events: none;\n	}\n\n	.console-badge,\n	.tab-badge {\n		display: inline-flex;\n		align-items: center;\n		justify-content: center;\n		min-width: 14px;\n		height: 14px;\n		padding: 0 4px;\n		border-radius: 7px;\n		font-size: 9px;\n		font-weight: bold;\n		color: #ffffff;\n		line-height: 1;\n		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n		border: 1px solid rgba(0, 0, 0, 0.2);\n	}\n\n	.tab-badge-container {\n		position: absolute;\n		top: 1px;\n		right: 3px;\n		display: flex;\n		gap: 2px;\n		pointer-events: none;\n	}\n\n	.console-badge.error,\n	.tab-badge.error {\n		background-color: var(--color-red);\n	}\n\n	.console-badge.warn,\n	.tab-badge.warn {\n		background-color: var(--color-yellow);\n		color: #111111;\n	}\n\n	.profiler-toggle:hover .toggle-icon {\n		background-color: rgba(255, 255, 255, 0.05);\n	}\n\n	.profiler-toggle.panel-open:hover .toggle-icon {\n		background-color: rgba(0, 170, 255, 0.3);\n	}\n\n	.toggle-separator {\n		width: 1px;\n		background-color: var(--profiler-border);\n	}\n\n	.toggle-text {\n		position: relative;\n		z-index: 1;\n		display: flex;\n		align-items: baseline;\n		padding: 8px 14px;\n		min-width: 80px;\n		justify-content: right;\n	}\n\n	.toggle-text .fps-label {\n		font-size: 0.7em;\n		margin-left: 10px;\n		color: #999;\n	}\n\n	.builtin-tabs-container {\n		position: relative;\n		z-index: 1;\n		display: flex;\n		align-items: stretch;\n		gap: 0;\n		border-right: 1px solid #262636;\n		order: -1;\n	}\n\n	.builtin-tab-btn {\n		background: transparent;\n		border: none;\n		color: var(--text-secondary);\n		cursor: pointer;\n		padding: 8px 14px;\n		font-family: var(--font-family);\n		font-size: 13px;\n		font-weight: 600;\n		transition: all 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		min-width: 32px;\n		position: relative;\n	}\n\n	.builtin-tab-btn svg {\n		width: 20px;\n		height: 20px;\n		stroke: currentColor;\n	}\n\n	.builtin-tab-btn:hover {\n		background-color: rgba(255, 255, 255, 0.08);\n		color: var(--color-accent);\n	}\n\n	.builtin-tab-btn:active {\n		background-color: rgba(255, 255, 255, 0.12);\n	}\n\n	.builtin-tab-btn.active {\n		background-color: rgba(0, 170, 255, 0.2);\n		color: var(--color-accent);\n	}\n\n	.builtin-tab-btn.active:hover {\n		background-color: rgba(0, 170, 255, 0.3);\n	}\n\n	.profiler-mini-panel {\n		position: absolute;\n		top: 60px;\n		right: 15px;\n		background-color: rgba(30, 30, 36, 0.85);\n		border: 1px solid #4a4a5a54;\n		border-radius: 8px;\n		color: var(--text-primary);\n		z-index: 9999;\n		backdrop-filter: blur(8px);\n		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);\n		font-family: var(--font-family);\n		font-size: 11px;\n		width: 350px;\n		max-width: calc(100vw - 30px);\n		min-width: 170px;\n		max-height: calc(100vh - 100px);\n		overflow-y: auto;\n		overflow-x: hidden;\n		display: none;\n		opacity: 0;\n		transform: translateY(-10px) scale(0.98);\n		transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), \n					transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n	}\n\n	.profiler-mini-panel.toggle-left {\n		right: auto;\n		left: 15px;\n	}\n\n	.profiler-mini-panel.visible {\n		display: block;\n		opacity: 1;\n		transform: translateY(0) scale(1);\n	}\n\n	.profiler-toggle.toggle-bottom {\n		top: auto;\n		bottom: 15px;\n	}\n\n	.profiler-mini-panel.toggle-bottom {\n		top: auto;\n		bottom: 60px;\n	}\n\n	.profiler-mini-panel::-webkit-scrollbar {\n		width: 6px;\n	}\n\n	.profiler-mini-panel::-webkit-scrollbar-track {\n		background: transparent;\n	}\n\n	.profiler-mini-panel::-webkit-scrollbar-thumb {\n		background: rgba(255, 255, 255, 0.15);\n		border-radius: 3px;\n		transition: background 0.2s;\n	}\n\n	.profiler-mini-panel::-webkit-scrollbar-thumb:hover {\n		background: rgba(255, 255, 255, 0.25);\n	}\n\n	.mini-panel-content {\n		padding: 0;\n		font-size: 11px;\n		line-height: 1.5;\n		font-family: var(--font-mono);\n		letter-spacing: 0.3px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.mini-panel-content .profiler-content {\n		display: block !important;\n		background: transparent;\n	}\n\n	.mini-panel-content .list-scroll-wrapper {\n		max-height: calc(100vh - 120px);\n		overflow-y: auto;\n		overflow-x: hidden;\n		width: 100%;\n	}\n\n	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar {\n		width: 4px;\n	}\n\n	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-track {\n		background: transparent;\n	}\n\n	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb {\n		background: rgba(255, 255, 255, 0.1);\n		border-radius: 2px;\n	}\n\n	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb:hover {\n		background: rgba(255, 255, 255, 0.2);\n	}\n\n	.mini-panel-content .parameters {\n		background: transparent;\n		border: none;\n		box-shadow: none;\n		padding: 4px;\n	}\n\n	@media screen and (max-width: 340px) {\n\n		.mini-panel-content .parameters {\n			min-width: 0 !important;\n		}\n\n		.mini-panel-content .list-container.parameters .list-item-row,\n		.mini-panel-content .list-container.parameters .list-header {\n			grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) !important;\n		}\n\n	}\n\n	.mini-panel-content .list-container.parameters {\n		padding: 2px 6px 0px 6px !important;\n	}\n\n	.mini-panel-content .list-header {\n		display: none;\n		padding: 2px 4px;\n		font-size: 11px;\n		font-weight: 600;\n		text-transform: uppercase;\n		letter-spacing: 0.5px;\n	}\n\n	.mini-panel-content .list-item {\n		border-bottom: 1px solid rgba(74, 74, 90, 0.2);\n		transition: background-color 0.15s;\n	}\n\n	.mini-panel-content .list-item:last-child {\n		border-bottom: none;\n	}\n\n	.mini-panel-content .list-item:hover {\n		background-color: rgba(255, 255, 255, 0.04);\n	}\n\n	.mini-panel-content .list-item.actionable:hover {\n		background-color: rgba(255, 255, 255, 0.06);\n		cursor: pointer;\n	}\n\n	.info-icon {\n		display: inline-flex;\n		align-items: center;\n		justify-content: center;\n		width: 14px;\n		height: 14px;\n		border-radius: 50%;\n		background-color: rgba(255, 255, 255, 0.1);\n		color: var(--text-secondary);\n		font-size: 10px;\n		font-style: italic;\n		margin-left: 6px;\n		cursor: help;\n		position: relative;\n		vertical-align: middle;\n		top: -1px;\n	}\n\n	.info-icon.active {\n		background-color: var(--color-accent);\n		color: white;\n	}\n\n	@media (hover: hover) {\n		.info-icon:hover {\n			background-color: var(--color-accent);\n			color: white;\n		}\n	}\n\n	.info-tooltip {\n		position: fixed;\n		transform: translate(-50%, -100%);\n		background-color: rgba(30, 30, 36, 0.95);\n		border: 1px solid var(--profiler-border);\n		border-radius: 6px;\n		padding: 10px 14px;\n		color: var(--text-primary);\n		font-size: 12px;\n		width: max-content;\n		max-width: 250px;\n		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n		opacity: 0;\n		visibility: hidden;\n		transition: opacity 0.2s, visibility 0.2s;\n		z-index: 999999;\n		font-style: normal;\n		font-family: var(--font-family);\n		text-align: left;\n		white-space: normal;\n	}\n\n	.info-tooltip h3 {\n		margin: 0 0 6px 0;\n		font-size: 13px;\n		color: var(--color-accent);\n	}\n\n	.info-tooltip strong {\n		font-weight: 600;\n		color: white;\n	}\n\n	/* Style adjustments for lil-gui look */\n	.mini-panel-content .item-row {\n		padding: 3px 8px;\n		min-height: 24px;\n	}\n\n	.mini-panel-content .list-item-row {\n		padding: 1px 4px;\n		gap: 8px;\n		min-height: 21px;\n		align-items: center;\n	}\n\n	.mini-panel-content input[type=\"checkbox\"] {\n		width: 12px;\n		height: 12px;\n	}\n\n	.mini-panel-content input[type=\"range\"] {\n		height: 18px;\n	}\n\n	.mini-panel-content .value-number input,\n	.mini-panel-content .value-slider input {\n		background-color: rgba(0, 0, 0, 0.3);\n		border: 1px solid rgba(74, 74, 90, 0.5);\n		font-size: 10px;\n	}\n\n	.mini-panel-content .value-number input:focus,\n	.mini-panel-content .value-slider input:focus {\n		border-color: var(--color-accent);\n	}\n\n	.mini-panel-content .value-slider {\n		gap: 6px;\n	}\n\n	/* Compact nested items */\n	.mini-panel-content .list-item .list-item {\n		margin-left: 8px;\n	}\n\n	.mini-panel-content .list-item .list-item .item-row,\n	.mini-panel-content .list-item .list-item .list-item-row {\n		padding: 2px 6px;\n		min-height: 22px;\n	}\n\n	/* Compact collapsible headers */\n	.mini-panel-content .collapsible .item-row,\n	.mini-panel-content .list-item-row.collapsible {\n		padding: 2px 8px;\n		font-weight: 600;\n		min-height: 16px;\n		display: flex;\n		align-items: center;\n		line-height: 1;\n	}\n\n	.mini-panel-content .collapsible-icon {\n		font-size: 10px;\n		width: 14px;\n		height: 14px;\n	}\n\n	.mini-panel-content .param-control input[type=\"range\"] {\n		height: 12px;\n		margin-top: 1px;\n		padding-top: 5px;\n		user-select: none;\n		-webkit-user-select: none;\n		outline: none;\n	}\n\n	.mini-panel-content .param-control input[type=\"range\"]::-webkit-slider-thumb {\n		width: 14px;\n		height: 14px;\n		margin-top: -5px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.mini-panel-content .param-control input[type=\"range\"]::-moz-range-thumb {\n		width: 14px;\n		height: 14px;\n		user-select: none;\n		-moz-user-select: none;\n	}\n\n	.mini-panel-content .list-children-container {\n		padding-left: 0;\n	}\n\n	.mini-panel-content .param-control input[type=\"number\"] {\n		flex-basis: 60px !important;\n	}\n\n	.mini-panel-content .param-control {\n		align-items: center;\n	}\n\n	.mini-panel-content .param-control select {\n		font-size: 11px;\n	}\n\n	.mini-panel-content .list-item-wrapper {\n		margin-top: 0;\n		margin-bottom: 0;\n	}\n\n	.profiler-panel {\n		position: absolute;\n		z-index: 1001 !important;\n		bottom: 0;\n		left: 0;\n		right: 0;\n		height: 350px;\n		background-color: var(--profiler-background);\n		backdrop-filter: blur(8px);\n		border-top: 2px solid var(--profiler-border);\n		color: var(--text-primary);\n		display: flex;\n		flex-direction: column;\n		z-index: 1000;\n		/*box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);*/\n		transform: translateY(100%);\n		transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s ease-out, width 0.3s ease-out;\n		font-family: var(--font-mono);\n	}\n\n	.profiler-panel.resizing,\n	.profiler-panel.dragging {\n		transition: none;\n	}\n\n	.profiler-panel.visible {\n		transform: translateY(0);\n	}\n\n	.profiler-panel.maximized {\n		height: 100%;\n		z-index: 10000 !important;\n	}\n\n	/* Position-specific styles */\n	.profiler-panel.position-top {\n		bottom: auto;\n		top: 0;\n		border-top: none;\n		border-bottom: 2px solid var(--profiler-border);\n		transform: translateY(-100%);\n	}\n\n	.profiler-panel.position-top.visible {\n		transform: translateY(0);\n	}\n\n	.profiler-panel.position-bottom {\n		/* Default position - already defined above */\n	}\n\n	.profiler-panel.position-left {\n		top: 0;\n		bottom: 0;\n		left: 0;\n		right: auto;\n		width: 350px;\n		height: 100%;\n		border-top: none;\n		border-right: 2px solid var(--profiler-border);\n		transform: translateX(-100%);\n	}\n\n	.profiler-panel.position-left.visible {\n		transform: translateX(0);\n	}\n\n	.profiler-panel.position-right {\n		top: 0;\n		bottom: 0;\n		left: auto;\n		right: 0;\n		width: 350px;\n		height: 100%;\n		border-top: none;\n		border-left: 2px solid var(--profiler-border);\n		transform: translateX(100%);\n	}\n\n	.profiler-panel.position-right.visible {\n		transform: translateX(0);\n	}\n\n	.profiler-panel.position-floating {\n		border: 2px solid var(--profiler-border);\n		border-radius: 8px;\n		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n		transform: none !important;\n		overflow: hidden;\n	}\n\n	.profiler-panel.position-floating.visible {\n		transform: none !important;\n	}\n\n	.profiler-panel.position-floating .profiler-header {\n		border-radius: 6px 6px 0 0;\n	}\n\n	.profiler-panel.position-floating .panel-resizer {\n		bottom: 0;\n		right: 0;\n		top: auto;\n		left: auto;\n		width: 16px;\n		height: 16px;\n		cursor: nwse-resize;\n		border-radius: 0 0 6px 0;\n	}\n\n	.profiler-panel.position-floating .panel-resizer::after {\n		content: '';\n		position: absolute;\n		right: 2px;\n		bottom: 2px;\n		width: 10px;\n		height: 10px;\n		background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--profiler-border) 45%, var(--profiler-border) 55%, transparent 55%);\n	}\n\n\n	.panel-resizer {\n		position: absolute;\n		top: -2px;\n		left: 0;\n		width: 100%;\n		height: 5px;\n		cursor: ns-resize;\n		z-index: 1001;\n		touch-action: none;\n	}\n\n	.profiler-panel.position-top .panel-resizer {\n		top: auto;\n		bottom: -2px;\n	}\n\n	.profiler-panel.position-left .panel-resizer {\n		top: 0;\n		left: auto;\n		right: -2px;\n		width: 5px;\n		height: 100%;\n		cursor: ew-resize;\n	}\n\n	.profiler-panel.position-right .panel-resizer {\n		top: 0;\n		left: -2px;\n		right: auto;\n		width: 5px;\n		height: 100%;\n		cursor: ew-resize;\n	}\n\n	.profiler-header {\n		display: flex;\n		background-color: var(--profiler-header-background);\n		border-bottom: 1px solid var(--profiler-border);\n		flex-shrink: 0;\n		justify-content: space-between;\n		align-items: stretch;\n\n		overflow-x: auto;\n		overflow-y: hidden;\n		width: calc(100% - 120px);\n		height: 32px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.profiler-panel.has-horizontal-scroll .profiler-header {\n		height: 38px;\n	}\n\n	/* Adjust header width based on panel position */\n	.profiler-panel.position-right .profiler-header,\n	.profiler-panel.position-left .profiler-header {\n		width: calc(100% - 120px);\n	}\n\n	.profiler-panel.position-bottom .profiler-header,\n	.profiler-panel.position-top .profiler-header {\n		width: calc(100% - 120px);\n	}\n\n	/* Adjust header width when position toggle button is hidden (mobile) */\n	.profiler-panel.hide-position-toggle .profiler-header {\n		width: calc(100% - 80px);\n	}\n\n	/* Adjust header width when maximized (floating position toggle button is hidden) */\n	.profiler-panel.maximized .profiler-header {\n		width: calc(100% - 80px);\n	}\n\n	/* ===== RULES FOR WHEN THERE ARE NO TABS ===== */\n\n	/* Horizontal mode (bottom/top) without tabs */\n	.profiler-panel.position-bottom.no-tabs:not(.maximized),\n	.profiler-panel.position-top.no-tabs:not(.maximized) {\n		height: 32px !important;\n		min-height: 32px !important;\n	}\n\n	.profiler-panel.position-bottom.no-tabs .profiler-header,\n	.profiler-panel.position-top.no-tabs .profiler-header {\n		width: 100%;\n		height: 32px;\n		border-bottom: none;\n	}\n\n	.profiler-panel.position-bottom.no-tabs .profiler-content-wrapper,\n	.profiler-panel.position-top.no-tabs .profiler-content-wrapper {\n		display: none;\n	}\n\n	.profiler-panel.position-bottom.no-tabs .panel-resizer,\n	.profiler-panel.position-top.no-tabs .panel-resizer {\n		display: none;\n	}\n\n	/* Vertical mode (right/left) without tabs */\n	.profiler-panel.position-right.no-tabs:not(.maximized),\n	.profiler-panel.position-left.no-tabs:not(.maximized) {\n		width: 40px !important;\n		min-width: 40px !important;\n	}\n\n	/* Vertical layout for header when no tabs */\n	.profiler-panel.position-right.no-tabs .profiler-header,\n	.profiler-panel.position-left.no-tabs .profiler-header {\n		width: 100%;\n		flex-direction: column;\n		height: 100%;\n		border-bottom: none;\n	}\n\n	/* Vertical layout for controls when no tabs */\n	.profiler-panel.position-right.no-tabs .profiler-controls,\n	.profiler-panel.position-left.no-tabs .profiler-controls {\n		position: static;\n		flex-direction: column-reverse;\n		justify-content: flex-end;\n		width: 100%;\n		height: 100%;\n		border-bottom: none;\n		border-left: none;\n		background: transparent;\n	}\n\n	.profiler-panel.position-right.no-tabs .profiler-controls button,\n	.profiler-panel.position-left.no-tabs .profiler-controls button {\n		width: 100%;\n		height: 40px;\n		border-left: none;\n		border-top: none;\n		border-bottom: 1px solid var(--profiler-border);\n	}\n\n	.profiler-panel.position-right.no-tabs .profiler-content-wrapper,\n	.profiler-panel.position-left.no-tabs .profiler-content-wrapper {\n		display: none;\n	}\n\n	.profiler-panel.position-right.no-tabs .profiler-tabs,\n	.profiler-panel.position-left.no-tabs .profiler-tabs {\n		display: none;\n		padding-left: 2px;\n	}\n\n	.profiler-panel.position-right.no-tabs .panel-resizer,\n	.profiler-panel.position-left.no-tabs .panel-resizer {\n		display: none;\n	}\n\n	/* Hide position toggle on mobile without tabs */\n	.profiler-panel.hide-position-toggle.position-right.no-tabs:not(.maximized),\n	.profiler-panel.hide-position-toggle.position-left.no-tabs:not(.maximized) {\n		width: 40px !important;\n		min-width: 40px !important;\n	}\n\n	/* Hide drag indicator on mobile devices */\n	.profiler-panel.is-mobile .tab-btn.active::before {\n		display: none;\n	}\n\n	.profiler-header::-webkit-scrollbar,\n	.profiler-tabs::-webkit-scrollbar,\n	.profiler-content::-webkit-scrollbar,\n	.detached-tab-content::-webkit-scrollbar,\n	.console-log::-webkit-scrollbar,\n	.timelineTrack::-webkit-scrollbar,\n	.list-scroll-wrapper::-webkit-scrollbar {\n		width: 4px;\n		height: 4px;\n	}\n\n	.profiler-header::-webkit-scrollbar-track,\n	.profiler-tabs::-webkit-scrollbar-track,\n	.profiler-content::-webkit-scrollbar-track,\n	.detached-tab-content::-webkit-scrollbar-track,\n	.console-log::-webkit-scrollbar-track,\n	.timelineTrack::-webkit-scrollbar-track,\n	.list-scroll-wrapper::-webkit-scrollbar-track {\n		background: transparent;\n	}\n\n	.profiler-header::-webkit-scrollbar-thumb,\n	.profiler-tabs::-webkit-scrollbar-thumb,\n	.profiler-content::-webkit-scrollbar-thumb,\n	.detached-tab-content::-webkit-scrollbar-thumb,\n	.console-log::-webkit-scrollbar-thumb,\n	.timelineTrack::-webkit-scrollbar-thumb,\n	.list-scroll-wrapper::-webkit-scrollbar-thumb {\n		background-color: rgba(255, 255, 255, 0.15);\n		border-radius: 2px;\n	}\n\n	.profiler-header::-webkit-scrollbar-thumb:hover,\n	.profiler-tabs::-webkit-scrollbar-thumb:hover,\n	.profiler-content::-webkit-scrollbar-thumb:hover,\n	.detached-tab-content::-webkit-scrollbar-thumb:hover,\n	.console-log::-webkit-scrollbar-thumb:hover,\n	.timelineTrack::-webkit-scrollbar-thumb:hover,\n	.list-scroll-wrapper::-webkit-scrollbar-thumb:hover {\n		background-color: rgba(255, 255, 255, 0.3);\n	}\n\n	.profiler-header::-webkit-scrollbar-corner,\n	.profiler-tabs::-webkit-scrollbar-corner,\n	.profiler-content::-webkit-scrollbar-corner,\n	.detached-tab-content::-webkit-scrollbar-corner,\n	.console-log::-webkit-scrollbar-corner,\n	.timelineTrack::-webkit-scrollbar-corner,\n	.list-scroll-wrapper::-webkit-scrollbar-corner {\n		background: transparent;\n	}\n\n	.profiler-header,\n	.profiler-tabs,\n	.profiler-content,\n	.detached-tab-content,\n	.console-log,\n	.timelineTrack,\n	.list-scroll-wrapper {\n		scrollbar-width: thin;\n		scrollbar-color: rgba(255, 255, 255, 0.15) transparent;\n	}\n\n	.profiler-panel.dragging .profiler-header {\n		cursor: grabbing !important;\n	}\n\n	.profiler-panel.dragging {\n		opacity: 0.8;\n	}\n\n	.profiler-tabs {\n		display: flex;\n		cursor: grab;\n		position: relative;\n		margin-left: 2px;\n	}\n\n	.profiler-tabs:active {\n		cursor: grabbing;\n	}\n\n\n	.profiler-controls {\n		display: flex;\n		position: absolute;\n		right: 0;\n		top: 0;\n		height: 32px;\n		background: var(--profiler-header-background);\n		border-bottom: 1px solid var(--profiler-border);\n	}\n\n	.profiler-panel.has-horizontal-scroll .profiler-controls {\n		height: 38px;\n	}\n\n	.tab-btn {\n		position: relative;\n		background: transparent;\n		border: none;\n		/*border-right: 1px solid var(--profiler-border);*/\n		color: var(--text-secondary);\n		padding: 0 15px 2px 15px;\n		height: 100%;\n		box-sizing: border-box;\n		cursor: default;\n		display: flex;\n		align-items: center;\n		font-family: var(--font-family);\n		font-weight: 600;\n		font-size: 13px;\n		user-select: none;\n		transition: opacity 0.2s, transform 0.2s;\n		touch-action: pan-x;\n		white-space: nowrap;\n	}\n\n	.tab-btn.active {\n		border-bottom: 2px solid var(--color-accent);\n		color: white;\n	}\n\n	.tab-btn.active::before {\n		content: '';\n		position: absolute;\n		left: 2px;\n		top: 50%;\n		transform: translateY(-50%);\n		width: 8px;\n		height: 14px;\n		background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='3' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='2' cy='7' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='2' cy='11' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='6' cy='3' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='6' cy='7' r='1' fill='%234a4a5a'/%3E%3Ccircle cx='6' cy='11' r='1' fill='%234a4a5a'/%3E%3C/svg%3E\");\n		background-repeat: no-repeat;\n		background-position: center;\n		opacity: 0.6;\n	}\n\n	.tab-btn.no-detach.active::before {\n		display: none;\n	}\n\n	.floating-btn,\n	.maximize-btn,\n	.hide-panel-btn {\n		background: transparent;\n		border: none;\n		border-left: 1px solid var(--profiler-border);\n		color: var(--text-secondary);\n		width: 40px;\n		height: 100%;\n		cursor: pointer;\n		transition: all 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		flex-shrink: 0;\n	}\n\n	/* Disable transitions in vertical mode to avoid broken animations */\n	.profiler-panel.position-right .floating-btn,\n	.profiler-panel.position-right .maximize-btn,\n	.profiler-panel.position-right .hide-panel-btn,\n	.profiler-panel.position-left .floating-btn,\n	.profiler-panel.position-left .maximize-btn,\n	.profiler-panel.position-left .hide-panel-btn {\n		transition: background-color 0.2s, color 0.2s;\n	}\n\n	.floating-btn:hover,\n	.maximize-btn:hover,\n	.hide-panel-btn:hover {\n		background-color: rgba(255, 255, 255, 0.1);\n		color: var(--text-primary);\n	}\n\n	/* Hide maximize button when there are no tabs */\n	.profiler-panel.position-right.no-tabs .maximize-btn,\n	.profiler-panel.position-left.no-tabs .maximize-btn,\n	.profiler-panel.position-bottom.no-tabs .maximize-btn,\n	.profiler-panel.position-top.no-tabs .maximize-btn {\n		display: none !important;\n	}\n\n	/* Hide floating button when maximized */\n	.profiler-panel.maximized .floating-btn {\n		display: none !important;\n	}\n\n	.profiler-content-wrapper {\n		flex-grow: 1;\n		overflow: hidden;\n		position: relative;\n	}\n\n	.profiler-content {\n		position: absolute;\n		top: 0;\n		left: 0;\n		width: 100%;\n		height: 100%;\n		overflow-y: auto;\n		font-size: 13px;\n		visibility: hidden;\n		opacity: 0;\n		transition: opacity 0.2s, visibility 0.2s;\n		box-sizing: border-box;\n		display: flex;\n		flex-direction: column;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.profiler-content.active {\n		visibility: visible;\n		opacity: 1;\n	}\n\n	.profiler-content {\n		overflow: auto; /* make sure scrollbars can appear */\n	}\n\n\n	.list-item-row {\n		display: grid;\n		grid-template-columns: var(--list-grid-template, none);\n		align-items: center;\n		padding: 4px 8px;\n		border-radius: 3px;\n		transition: background-color 0.2s;\n		gap: 10px;\n		border-bottom: none;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.parameters .list-item-row {\n		min-height: 23px;\n	}\n\n	.mini-panel-content .parameters .list-item-row {\n		min-height: 21px;\n	}\n\n	.list-item-wrapper {\n		margin-top: 2px;\n		margin-bottom: 2px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.list-item-wrapper:has(> .list-item-row .graph-container) {\n		margin-left: -1.5em;\n	}\n\n	.list-item-wrapper:first-child {\n		/*margin-top: 0;*/\n	}\n\n	.list-item-wrapper:not(.header-wrapper):nth-child(odd) > .list-item-row {\n		background-color: rgba(0,0,0,0.1);\n	}\n\n	.list-item-wrapper.header-wrapper>.list-item-row {\n		color: var(--color-accent);\n		background-color: rgba(0, 170, 255, 0.1);\n	}\n\n	.list-item-wrapper.header-wrapper>.list-item-row>.list-item-cell:first-child {\n		font-weight: 600;\n	}\n\n	.list-item-row.collapsible,\n	.list-item-row.actionable {\n		cursor: pointer;\n	}\n\n	.list-item-row.collapsible {\n		background-color: rgba(0, 170, 255, 0.15) !important;\n		min-height: 23px;\n	}\n\n	.list-item-row.collapsible.alert,\n	.list-item-row.alert {\n		background-color: rgba(244, 67, 54, 0.1) !important;\n	}\n\n	@media (hover: hover) {\n\n		.list-item-row:hover:not(.collapsible):not(.no-hover),\n		.list-item-row:hover:not(.no-hover),\n		.list-item-row.actionable:hover,\n		.list-item-row.collapsible.actionable:hover {\n			background-color: rgba(255, 255, 255, 0.05) !important;\n		}\n\n		.list-item-row.collapsible:hover {\n			background-color: rgba(0, 170, 255, 0.25) !important;\n		}\n\n	}\n\n	.list-item-cell {\n		white-space: pre;\n		display: flex;\n		align-items: center;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.list-item-cell:not(:first-child) {\n		justify-content: flex-end;\n		font-weight: 600;\n	}\n\n	.list-header {\n		display: grid;\n		grid-template-columns: var(--list-grid-template, none);\n		align-items: center;\n		padding: 4px 8px;\n		font-weight: 600;\n		color: var(--text-secondary);\n		padding-bottom: 6px;\n		border-bottom: 1px solid var(--profiler-border);\n		margin-bottom: 5px;\n		gap: 10px;\n		user-select: none;\n		-webkit-user-select: none;\n	}\n\n	.list-item-wrapper.section-start {\n		margin-top: 5px;\n		margin-bottom: 5px;\n	}\n\n	.list-header .list-header-cell:not(:first-child) {\n		text-align: right;\n	}\n\n	.list-children-container {\n		padding-left: 1.5em;\n		overflow: hidden;\n		transition: max-height 0.1s ease-out;\n		margin-top: 2px;\n	}\n\n	.list-children-container.closed {\n		max-height: 0;\n		display: none !important;\n	}\n\n	.item-toggler {\n		display: inline-block;\n		margin-right: 0.8em;\n		text-align: left;\n	}\n\n	.list-item-row.open .item-toggler::before {\n		content: '-';\n	}\n\n	.list-item-row:not(.open) .item-toggler::before {\n		content: '+';\n	}\n\n	.list-item-cell .value.good {\n		color: var(--color-green);\n	}\n\n	.list-item-cell .value.warn {\n		color: var(--color-yellow);\n	}\n\n	.list-item-cell .value.bad {\n		color: var(--color-red);\n	}\n\n	.list-scroll-wrapper {\n		width: max-content;\n		min-width: 100%;\n		display: flex;\n		flex-direction: column;\n		min-height: 100%;\n	}\n\n	.list-container.parameters .list-item-row:not(.collapsible) {\n	}\n\n	.graph-container {\n		width: 100%;\n		box-sizing: border-box;\n		padding: 8px 0;\n		position: relative;\n	}\n\n	.graph-svg, .graph-canvas {\n		width: 0;\n		min-width: 100%;\n		height: 80px;\n		background-color: var(--profiler-header);\n		border: 1px solid var(--profiler-border);\n		border-radius: 4px;\n		display: block;\n	}\n\n	.graph-path {\n		stroke-width: 2;\n		fill-opacity: 0.4;\n	}\n\n	.console-buttons-group {\n		display: flex;\n		gap: 20px;\n	}\n\n	.console-filter-input {\n		background-color: var(--profiler-background);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px 10px 2px 10px;\n		font-family: var(--font-mono);\n		flex-grow: 1;\n		max-width: 300px;\n		border-radius: 15px;\n	}\n\n	.console-filter-input:focus {\n		outline: none;\n		border-color: var(--text-secondary);\n	}\n\n	.console-copy-button {\n		background: transparent;\n		border: none;\n		color: var(--text-secondary);\n		cursor: pointer;\n		padding: 4px;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		border-radius: 4px;\n		transition: color 0.2s, background-color 0.2s;\n	}\n\n	.console-copy-button:hover {\n		color: var(--text-primary);\n		background-color: var(--profiler-hover);\n	}\n\n	.console-copy-button.copied {\n		color: var(--color-green);\n	}\n\n	.console-log {\n		display: flex;\n		flex-direction: column;\n		gap: 4px;\n		padding: 10px;\n		overflow-y: auto;\n		flex-grow: 1;\n		user-select: text;\n		-webkit-user-select: text;\n	}\n\n	.log-message {\n		display: flex;\n		align-items: flex-start;\n		gap: 6px;\n		padding: 3px 5px;\n		border-radius: 3px;\n		line-height: 1.5 !important;\n	}\n\n	.log-count-badge {\n		display: inline-block;\n		text-align: center;\n		min-width: 14px;\n		height: 14px;\n		border-radius: 7px;\n		padding: 0 3px;\n		font-size: 9px;\n		font-weight: bold;\n		line-height: 14px;\n		box-sizing: border-box;\n		margin-top: 0;\n		flex-shrink: 0;\n	}\n\n	.log-icon {\n		display: inline-block;\n		text-align: center;\n		width: 14px;\n		height: 14px;\n		font-size: 11px;\n		line-height: 14px;\n		margin-top: 0;\n		flex-shrink: 0;\n	}\n\n	.log-body {\n		flex-grow: 1;\n		white-space: pre-wrap;\n		word-break: break-all;\n	}\n\n	.log-message.info .log-count-badge {\n		background-color: rgba(255, 255, 255, 0.12);\n		border: 1px solid rgba(255, 255, 255, 0.2);\n		color: var(--text-secondary);\n	}\n\n	.log-message.warn .log-count-badge {\n		background-color: rgba(255, 193, 7, 0.18);\n		border: 1px solid rgba(255, 193, 7, 0.35);\n		color: var(--color-yellow);\n	}\n\n	.log-message.error .log-count-badge {\n		background-color: rgba(244, 67, 54, 0.18);\n		border: 1px solid rgba(244, 67, 54, 0.35);\n		color: #ff8a80;\n	}\n\n	.log-message.hidden {\n		display: none;\n	}\n\n	.log-message.info {\n		color: var(--text-primary);\n	}\n\n	.log-message.warn {\n		color: var(--color-yellow);\n	}\n\n	.log-message.error {\n		color: #f9dedc;\n		background-color: rgba(244, 67, 54, 0.1);\n	}\n\n	.log-prefix {\n		color: var(--text-secondary);\n		margin-right: 8px;\n	}\n\n	.log-code {\n		background-color: rgba(255, 255, 255, 0.1);\n		border-radius: 3px;\n		padding: 1px 4px;\n	}\n\n	.thumbnail-container {\n		display: flex;\n		align-items: center;\n	}\n\n	.thumbnail-svg {\n		width: 40px;\n		height: 22.5px;\n		flex-shrink: 0;\n		margin-right: 8px;\n	}\n\n	.param-control {\n		display: flex;\n		align-items: center;\n		justify-content: flex-end;\n		gap: 10px;\n		width: 100%;\n	}\n\n	.param-control input,\n	.param-control select,\n	.param-control button {\n		background-color: var(--profiler-background);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px 6px;\n		padding-bottom: 2px;\n		font-family: var(--font-mono);\n		width: 100%;\n		box-sizing: border-box;\n		color-scheme: dark;\n	}\n\n	.param-control input:focus {\n		outline: none;\n		border-color: var(--color-accent);\n	}\n\n	.param-control select {\n		padding-top: 3px;\n		padding-bottom: 1px;\n	}\n\n	.param-control input[type=\"number\"] {\n		cursor: ns-resize;\n	}\n\n	.param-control input[type=\"color\"] {\n		padding: 2px;\n	}\n\n	.param-control button {\n		cursor: pointer;\n		transition: background-color 0.2s;\n	}\n\n	.param-control button:hover {\n		background-color: var(--profiler-header);\n	}\n\n	.param-control-vector {\n		display: flex;\n		gap: 5px;\n	}\n\n	.custom-checkbox {\n		display: inline-flex;\n		align-items: center;\n		cursor: pointer;\n		gap: 8px;\n		will-change: transform;\n		font-size: 12px;\n	}\n\n	.custom-checkbox input {\n		display: none;\n	}\n\n	.custom-checkbox .checkmark {\n		width: 14px;\n		height: 14px;\n		border: 1px solid var(--color-accent);\n		border-radius: 3px;\n		display: inline-flex;\n		justify-content: center;\n		align-items: center;\n		transition: background-color 0.2s, border-color 0.2s;\n	}\n\n	.custom-checkbox .checkbox-text {\n		font-size: 12px;\n		margin-top: 1px;\n		color: inherit;\n	}\n\n	.custom-checkbox .checkmark::after {\n		content: '';\n		width: 6px;\n		height: 6px;\n		background-color: var(--color-accent);\n		border-radius: 1px;\n		display: block;\n		transform: scale(0);\n		transition: transform 0.2s;\n	}\n\n	.list-container .custom-checkbox .checkmark {\n		width: 13px;\n		height: 13px;\n	}\n\n	.list-container .custom-checkbox .checkmark::after {\n		width: 7px;\n		height: 7px;\n	}\n\n	.custom-checkbox input:checked+.checkmark {\n		border-color: var(--color-accent);\n	}\n\n	.custom-checkbox input:checked+.checkmark::after {\n		transform: scale(1);\n	}\n\n	.param-control input[type=\"range\"] {\n		-webkit-appearance: none;\n		appearance: none;\n		width: 100%;\n		height: 16px;\n		background: var(--profiler-header);\n		border-radius: 5px;\n		border: 1px solid var(--profiler-border);\n		outline: none;\n		padding: 0px;\n		padding-top: 8px;\n	}\n\n	.param-control input[type=\"range\"]::-webkit-slider-thumb {\n		-webkit-appearance: none;\n		appearance: none;\n		width: 18px;\n		height: 18px;\n		background: var(--profiler-background);\n		border: 1px solid var(--color-accent);\n		border-radius: 3px;\n		cursor: pointer;\n		margin-top: -8px;\n	}\n\n	.param-control input[type=\"range\"]::-moz-range-thumb {\n		width: 18px;\n		height: 18px;\n		background: var(--profiler-background);\n		border: 2px solid var(--color-accent);\n		border-radius: 3px;\n		cursor: pointer;\n	}\n\n	.param-control input[type=\"range\"]::-moz-range-track {\n		width: 100%;\n		height: 16px;\n		background: var(--profiler-header);\n		border-radius: 5px;\n		border: 1px solid var(--profiler-border);\n	}\n\n	/* Override .param-control styles for mini-panel-content */\n	.mini-panel-content input,\n	.mini-panel-content select,\n	.mini-panel-content button {\n		padding: 2px 4px;\n		height: 21px;\n		line-height: 1.4;\n		padding-top: 4px;\n	}\n\n	.mini-panel-content .param-control input,\n	.mini-panel-content .param-control select,\n	.mini-panel-content .param-control button {\n		background-color: #1e1e24c2;\n		line-height: 1.0;\n	}\n\n	.mini-panel-content .param-control select {\n		padding: 2px 2px;\n		padding-top: 3px;\n	}\n\n	.mini-panel-content .param-control input[type=\"number\"]::-webkit-outer-spin-button,\n	.mini-panel-content .param-control input[type=\"number\"]::-webkit-inner-spin-button {\n		-webkit-appearance: none;\n		margin: 0;\n	}\n\n	.mini-panel-content .param-control input[type=\"number\"] {\n		-moz-appearance: textfield;\n	}\n\n	.mini-panel-content .list-item-cell span {\n		position: relative;\n		top: 1px;\n		margin-left: 2px;\n	}\n\n	@media screen and (max-width: 340px) {\n\n		.mini-panel-content .list-item-cell:first-child {\n			display: flex;\n			align-items: center;\n			min-width: 0;\n			overflow: hidden;\n			width: 100%;\n		}\n\n		.mini-panel-content .list-item-cell:first-child .value {\n			overflow: hidden;\n			text-overflow: ellipsis;\n			white-space: nowrap;\n			flex: 1 1 0%;\n			min-width: 0;\n		}\n\n		.mini-panel-content .list-item-cell:first-child .info-icon {\n			flex-shrink: 0;\n		}\n\n	}\n\n	.mini-panel-content .custom-checkbox .checkmark {\n		width: 12px;\n		height: 12px;\n		margin-bottom: 2px;\n		will-change: transform;\n	}\n\n	.mini-panel-content .list-container.parameters .list-item-row:not(.collapsible) {\n		margin-bottom: 2px;\n	}\n\n	.mini-panel-content .list-container.parameters .list-children-container > .list-item-wrapper:first-child:has(> .list-item-row:not(.collapsible)) {\n		margin-top: 2px;\n	}\n\n	.mini-panel-content .list-container.parameters .list-children-container > .list-item-wrapper:last-child:has(> .list-item-row:not(.collapsible)) {\n		margin-bottom: 4px;\n	}\n\n	@media screen and (max-width: 450px) and (orientation: portrait) {\n\n		.console-filter-input {\n			max-width: 100px;\n		}\n\n	}\n\n	/* Touch device optimizations */\n	@media (hover: none) and (pointer: coarse) {\n\n		.panel-resizer {\n			top: -10px !important;\n			height: 20px !important;\n		}\n\n		.profiler-panel.position-top .panel-resizer {\n			top: auto !important;\n			bottom: -10px !important;\n			height: 20px !important;\n		}\n\n		.profiler-panel.position-left .panel-resizer {\n			right: -10px !important;\n			width: 20px !important;\n			height: 100% !important;\n		}\n\n		.profiler-panel.position-right .panel-resizer {\n			left: -10px !important;\n			width: 20px !important;\n			height: 100% !important;\n		}\n\n		.detached-tab-resizer-top,\n		.detached-tab-resizer-bottom {\n			height: 10px !important;\n		}\n\n		.detached-tab-resizer-left,\n		.detached-tab-resizer-right {\n			width: 10px !important;\n		}\n\n	}\n\n	.drag-preview-indicator {\n		position: absolute;\n		background-color: rgba(0, 170, 255, 0.2);\n		border: 2px dashed var(--color-accent);\n		z-index: 999;\n		pointer-events: none;\n		transition: all 0.2s ease-out;\n	}\n\n	/* Detached Tab Windows */\n	.detached-tab-panel {\n		position: absolute;\n		width: 500px;\n		height: 400px;\n		background: var(--profiler-background);\n		border: 1px solid var(--profiler-border);\n		border-radius: 8px;\n		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n		z-index: 1002;\n		display: flex;\n		flex-direction: column;\n		backdrop-filter: blur(10px);\n		overflow: hidden;\n		opacity: 1;\n		visibility: visible;\n		transition: opacity 0.2s, visibility 0.2s;\n		font-family: var(--font-mono);\n		font-size: 13px;\n	}\n\n\n	.detached-tab-header {\n		background: var(--profiler-header-background);\n		padding: 0 3px 0 10px;\n		font-family: var(--font-family);\n		font-size: 13px;\n		color: var(--text-primary);\n		font-weight: 600;\n		display: flex;\n		justify-content: space-between;\n		align-items: center;\n		border-bottom: 1px solid var(--profiler-border);\n		cursor: grab;\n		user-select: none;\n		height: 32px;\n		flex-shrink: 0;\n		-webkit-font-smoothing: antialiased;\n		-moz-osx-font-smoothing: grayscale;\n		touch-action: none;\n	}\n\n	.detached-tab-header:active {\n		cursor: grabbing;\n	}\n\n	.detached-header-controls {\n		display: flex;\n		gap: 5px;\n	}\n\n	.detached-reattach-btn {\n		background: transparent;\n		border: none;\n		color: var(--text-secondary);\n		font-family: var(--font-family);\n		font-size: 18px;\n		line-height: 1;\n		cursor: pointer;\n		padding: 4px 8px;\n		border-radius: 4px;\n		transition: all 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		-webkit-font-smoothing: antialiased;\n		-moz-osx-font-smoothing: grayscale;\n	}\n\n	.detached-reattach-btn:hover {\n		background: rgba(0, 170, 255, 0.2);\n		color: var(--color-accent);\n	}\n\n	.detached-tab-content {\n		flex: 1;\n		overflow: hidden;\n		position: relative;\n		background: var(--profiler-background);\n	}\n\n\n	.detached-tab-content .profiler-content {\n		display: flex !important;\n		flex-direction: column !important;\n		height: 100%;\n		visibility: visible !important;\n		opacity: 1 !important;\n		position: relative !important;\n	}\n\n	.detached-tab-content .profiler-content > * {\n		font-family: var(--font-mono);\n		color: var(--text-primary);\n	}\n\n	.detached-tab-resizer {\n		position: absolute;\n		bottom: 0;\n		right: 0;\n		width: 20px;\n		height: 20px;\n		cursor: nwse-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	.detached-tab-resizer::after {\n		content: '';\n		position: absolute;\n		bottom: 2px;\n		right: 2px;\n		width: 12px;\n		height: 12px;\n		border-right: 2px solid var(--profiler-border);\n		border-bottom: 2px solid var(--profiler-border);\n		border-bottom-right-radius: 6px;\n		opacity: 0.5;\n	}\n\n	.detached-tab-resizer:hover::after {\n		opacity: 1;\n		border-color: var(--color-accent);\n	}\n\n	/* Edge resizers */\n	.detached-tab-resizer-top {\n		position: absolute;\n		top: 0;\n		left: 0;\n		right: 0;\n		height: 5px;\n		cursor: ns-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	.detached-tab-resizer-right {\n		position: absolute;\n		top: 0;\n		right: 0;\n		bottom: 0;\n		width: 5px;\n		cursor: ew-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	.detached-tab-resizer-bottom {\n		position: absolute;\n		bottom: 0;\n		left: 0;\n		right: 0;\n		height: 5px;\n		cursor: ns-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	.detached-tab-resizer-left {\n		position: absolute;\n		top: 0;\n		left: 0;\n		bottom: 0;\n		width: 5px;\n		cursor: ew-resize;\n		z-index: 10;\n		touch-action: none;\n	}\n\n	/* Input number spin buttons - hide arrows */\n	/* Chrome, Safari, Edge, Opera */\n	.profiler-panel input[type=\"number\"]::-webkit-outer-spin-button,\n	.profiler-panel input[type=\"number\"]::-webkit-inner-spin-button,\n	.detached-tab-content input[type=\"number\"]::-webkit-outer-spin-button,\n	.detached-tab-content input[type=\"number\"]::-webkit-inner-spin-button {\n		-webkit-appearance: none;\n		margin: 0;\n	}\n\n	/* Firefox */\n	.profiler-panel input[type=\"number\"],\n	.detached-tab-content input[type=\"number\"] {\n		-moz-appearance: textfield;\n	}\n\n	.panel-action-btn {\n		background: transparent;\n		color: var(--text-primary);\n		border: 1px solid var(--profiler-border);\n		border-radius: 4px;\n		padding: 6px 12px;\n		cursor: pointer;\n		font-family: var(--font-family);\n		font-size: 12px;\n		transition: background-color 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n	}\n\n	.panel-action-btn:hover {\n		background-color: rgba(255, 255, 255, 0.05);\n	}\n\n	.node-canvas-wrapper {\n		touch-action: none;\n	}\n\n	.node-canvas-wrapper .node-canvas-detach-btn {\n		position: absolute;\n		top: 5px;\n		right: 5px;\n		background: rgba(30, 30, 36, 0.85);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px;\n		cursor: pointer;\n		opacity: 1;\n		transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		z-index: 10;\n	}\n\n	.node-canvas-wrapper .node-canvas-detach-btn:hover {\n		background-color: var(--color-accent);\n		border-color: var(--color-accent);\n		color: white;\n	}\n\n	.node-canvas-wrapper .node-canvas-fullscreen-btn {\n		position: absolute;\n		bottom: 5px;\n		right: 5px;\n		background: rgba(30, 30, 36, 0.85);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px;\n		cursor: pointer;\n		opacity: 1;\n		transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		z-index: 10;\n	}\n\n	.node-canvas-wrapper .node-canvas-fullscreen-btn:hover {\n		background-color: var(--color-accent);\n		border-color: var(--color-accent);\n		color: white;\n	}\n\n	.profiler-panel.maximized .node-canvas-fullscreen-btn {\n		display: none;\n	}\n\n	.toolbar {\n		display: flex;\n		align-items: center;\n		justify-content: space-between;\n		height: 32px;\n		padding: 4px 6px;\n		border-bottom: 1px solid var(--profiler-border);\n		background: var(--profiler-header-background);\n		flex-shrink: 0;\n		box-sizing: border-box;\n		gap: 16px;\n	}\n\n	.toolbar span {\n		color: var(--text-secondary);\n		font-size: 12px;\n		font-weight: 600;\n	}\n\n	.toolbar .custom-checkbox .checkmark {\n		width: 12px;\n		height: 12px;\n		border-radius: 4px;\n	}\n\n	.viewer-content .toolbar {\n		justify-content: flex-end;\n	}\n\n	.viewer-back-btn {\n		background: transparent;\n		border: none;\n		color: var(--text-secondary);\n		cursor: pointer;\n		font-size: 16px;\n		line-height: 1;\n		padding: 4px 8px;\n		border-radius: 4px;\n		margin-right: auto;\n		transition: color 0.2s, background-color 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n	}\n\n	.viewer-back-btn:hover {\n		color: var(--text-primary);\n		background-color: rgba(255, 255, 255, 0.05);\n	}\n\n	select {\n		color-scheme: dark;\n	}\n\n	select option,\n	option {\n		background-color: #1e1e24;\n		color: var(--text-primary);\n	}\n\n	.select {\n		background: var(--profiler-background);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px 16px 2px 6px;\n		font-family: var(--font-mono);\n		font-size: 12px;\n		outline: none;\n		cursor: pointer;\n		color-scheme: dark;\n		appearance: none;\n		-webkit-appearance: none;\n		-moz-appearance: none;\n		background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n		background-repeat: no-repeat;\n		background-position: right 5px center;\n		background-size: 10px;\n	}\n\n	.select:focus {\n		border-color: var(--color-accent);\n	}\n\n	.full-viewer-container {\n		display: none;\n		flex-grow: 1;\n		width: 100%;\n		height: 100%;\n		overflow: hidden;\n		position: relative;\n		touch-action: none;\n	}\n\n	.node-canvas-wrapper .node-canvas-split-btn {\n		position: absolute;\n		top: 5px;\n		left: 5px;\n		background: rgba(30, 30, 36, 0.85);\n		border: 1px solid var(--profiler-border);\n		color: var(--text-primary);\n		border-radius: 4px;\n		padding: 4px;\n		cursor: pointer;\n		opacity: 1;\n		transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		z-index: 10;\n	}\n\n	.node-canvas-wrapper .node-canvas-split-btn:hover {\n		background-color: var(--color-accent);\n		border-color: var(--color-accent);\n		color: white;\n	}\n\n	.node-canvas-wrapper .node-canvas-split-btn.active,\n	.node-canvas-wrapper .node-canvas-fullscreen-btn.active {\n		background-color: var(--color-accent) !important;\n		border-color: var(--color-accent) !important;\n		color: white !important;\n	}\n\n	.split-screen-overlay {\n		position: absolute;\n		top: 0;\n		left: 0;\n		width: 100%;\n		height: 100%;\n		pointer-events: none !important;\n		z-index: 999;\n		touch-action: none;\n		overflow: hidden;\n	}\n\n	.split-screen-line {\n		position: absolute;\n		top: 0;\n		bottom: 0;\n		width: 1px;\n		left: 50%;\n		background-color: transparent;\n		cursor: ew-resize;\n		pointer-events: auto !important;\n		z-index: 10;\n		touch-action: none;\n		transition: background-color 0.15s ease-out;\n	}\n\n	.split-screen-line:hover,\n	.split-screen-line:active,\n	.split-screen-line.active {\n		background-color: var(--color-accent);\n	}\n\n	.split-screen-line::before {\n		content: '';\n		position: absolute;\n		top: 0;\n		bottom: 0;\n		left: -12px;\n		width: 25px;\n		background: transparent;\n		cursor: ew-resize;\n	}\n\n	.split-screen-line::after {\n		content: '';\n		position: absolute;\n		top: -1px;\n		bottom: -1px;\n		left: -5px;\n		width: 11px;\n		pointer-events: none;\n		background-image:\n			url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M-0.5 -1 L5.5 7 L11.5 -1 Z' fill='rgba(30,30,36,0.85)' stroke='%234a4a5a' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E\"),\n			url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M-0.5 8 L5.5 0 L11.5 8 Z' fill='rgba(30,30,36,0.85)' stroke='%234a4a5a' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E\");\n		background-position: top center, bottom center;\n		background-repeat: no-repeat;\n		opacity: 1;\n		transition: opacity 0.15s ease-out;\n	}\n\n	.split-screen-line:hover::after,\n	.split-screen-line:active::after,\n	.split-screen-line.active::after {\n		opacity: 1;\n		background-image:\n			url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M-0.5 -1 L5.5 7 L11.5 -1 Z' fill='%2300aaff' stroke='%2300aaff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E\"),\n			url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M-0.5 8 L5.5 0 L11.5 8 Z' fill='%2300aaff' stroke='%2300aaff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E\");\n	}\n\n	/* Grid Mode styles for List component */\n	.list-scroll-wrapper:has(> .list-container.grid-mode) {\n		width: 100% !important;\n	}\n\n	.list-container.grid-mode {\n		min-width: 0 !important;\n		width: 100% !important;\n		box-sizing: border-box;\n	}\n\n	.list-container.grid-mode .list-header {\n		display: none !important;\n	}\n\n	.list-container.grid-mode .list-children-container {\n		display: flex;\n		flex-wrap: wrap;\n		gap: 15px;\n		padding-left: 0 !important;\n		margin-top: 10px;\n		margin-bottom: 15px;\n		width: 100%;\n		box-sizing: border-box;\n	}\n\n	.list-container.grid-mode .list-children-container > .list-item-wrapper {\n		display: inline-block;\n		width: 160px;\n		margin: 0;\n	}\n\n	.list-container.grid-mode .list-children-container > .list-item-wrapper > .list-item-row {\n		display: flex;\n		flex-direction: column;\n		align-items: center;\n		justify-content: flex-start;\n		/*background-color: var(--profiler-header);\n		border: 1px solid var(--profiler-border);*/\n		border-radius: 6px;\n		padding: 8px;\n		gap: 8px;\n		width: 100%;\n		box-sizing: border-box;\n		grid-template-columns: none !important;\n	}\n\n	.list-container.grid-mode .list-children-container > .list-item-wrapper > .list-item-row > .list-item-cell:first-child {\n		width: 140px;\n		height: 140px;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		padding: 0;\n	}\n\n	.list-container.grid-mode .list-children-container > .list-item-wrapper > .list-item-row > .list-item-cell:not(:first-child) {\n		width: 100%;\n		text-align: center !important;\n		font-size: 11px;\n		font-weight: 500;\n		color: var(--text-primary);\n		white-space: normal;\n		word-break: break-all;\n		justify-content: center !important;\n	}\n\n	/* Timeline Info & Details */\n	.timeline-detail-block {\n		font-size: 11px;\n		margin-left: 8px;\n		color: var(--text-secondary);\n		opacity: 1;\n	}\n\n	.timeline-detail-key,\n	.timeline-detail-sep,\n	.timeline-call-count {\n		opacity: 0.5;\n	}\n\n	.timeline-detail-value {\n		color: var(--text-secondary);\n		opacity: 1;\n	}\n\n	.timeline-info-group {\n		display: inline-flex;\n		align-items: center;\n		margin-left: 12px;\n		flex-shrink: 0;\n	}\n\n	.timeline-info-dot {\n		width: 6px;\n		height: 6px;\n		border-radius: 50%;\n		margin-right: 6px;\n		flex-shrink: 0;\n	}\n\n	.timeline-info-dot.fps {\n		background-color: var(--color-fps);\n	}\n\n	.timeline-info-dot.call {\n		background-color: var(--color-call);\n	}\n\n	.timeline-info-dot.red {\n		background-color: var(--color-red);\n	}\n\n}\n", e.appendChild(n);
+	}
+}, cn = class {
 	constructor(e = 512) {
 		this.maxPoints = e, this.lines = {}, this.limit = 0, this.limitIndex = 0, this.domElement = document.createElement("canvas"), this.domElement.setAttribute("class", "graph-canvas"), this.ctx = this.domElement.getContext("2d"), this.width = 0, this.height = 0, this.devicePixelRatio = window.devicePixelRatio || 1;
 	}
@@ -345,9 +361,9 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 		};
 	}
 	dispose() {}
-}, sn = class extends ce {
-	constructor(e) {
-		super(), this.inspector = e, this.tabs = {}, this.activeTabId = null, this.isResizing = !1, this.lastHeightBottom = 350, this.lastWidthRight = 450, this.position = "bottom", this.detachedWindows = [], this.maxZIndex = 1002, this.nextTabOriginalIndex = 0, this.setupShell(), this.setupResizing(), an.init(this.domElement), this.setupWindowResizeListener(), this.setupOrientationListener(), this.checkHeaderScroll(), this.panel.addEventListener("transitionend", (e) => {
+}, ln = class extends se {
+	constructor(e, t = {}) {
+		super(), this.inspector = e, this.nonce = t.nonce ?? e?.nonce ?? null, this.tabs = {}, this.activeTabId = null, this.isResizing = !1, this.lastHeightBottom = 350, this.lastWidthRight = 450, this.position = "bottom", this.detachedWindows = [], this.maxZIndex = 1002, this.nextTabOriginalIndex = 0, this.horizontalAlign = "right", this.verticalAlign = "top", this.setupShell(), this.setupResizing(), sn.init(this.domElement, this.nonce), this.updateWidgetPosition(), this.setupWindowResizeListener(), this.setupOrientationListener(), this.checkHeaderScroll(), this.panel.addEventListener("transitionend", (e) => {
 			e.target === this.panel && (e.propertyName === "width" || e.propertyName === "height" || e.propertyName === "transform") && this.checkHeaderScroll();
 		});
 	}
@@ -398,7 +414,7 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 			}
 		};
 		window.addEventListener("resize", () => {
-			this.isSmallScreen ? (this.floatingBtn.style.display = "none", this.panel.classList.add("hide-position-toggle")) : (this.floatingBtn.style.display = "", this.panel.classList.remove("hide-position-toggle")), this.isMobile ? this.panel.classList.add("is-mobile") : this.panel.classList.remove("is-mobile"), e(), t(), this.checkHeaderScroll();
+			this.isSmallScreen ? (this.floatingBtn.style.display = "none", this.panel.classList.add("hide-position-toggle")) : (this.floatingBtn.style.display = "", this.panel.classList.remove("hide-position-toggle")), this.isMobile ? this.panel.classList.add("is-mobile") : this.panel.classList.remove("is-mobile"), e(), t(), this.checkHeaderScroll(), this.notifyLayoutChange();
 		});
 	}
 	constrainWindowToBounds(e) {
@@ -406,17 +422,21 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 		a + r > t + s && (a = t + s - r), a < -s && (a = -s), o + i > n + c && (o = n + c - i), o < -c && (o = -c), e.style.left = `${a}px`, e.style.top = `${o}px`;
 	}
 	setupShell() {
-		this.domElement = document.createElement("div"), this.domElement.classList.add("three-inspector"), this.toggleButton = document.createElement("button"), this.toggleButton.classList.add("profiler-toggle"), this.toggleButton.innerHTML = "\n<span class=\"builtin-tabs-container\"></span>\n<span class=\"toggle-text\">\n	<span class=\"fps-counter\">-</span>\n	<span class=\"fps-label\">FPS</span>\n</span>\n<span class=\"toggle-icon\">\n	<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-device-ipad-horizontal-search\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5\" /><path d=\"M9 17h2\" /><path d=\"M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" /><path d=\"M20.2 20.2l1.8 1.8\" /></svg>\n	<span class=\"console-badge-container\">\n		<span class=\"console-badge error\" style=\"display: none;\">0</span>\n		<span class=\"console-badge warn\" style=\"display: none;\">0</span>\n	</span>\n</span>\n", this.toggleButton.onclick = () => this.togglePanel(), this.builtinTabsContainer = this.toggleButton.querySelector(".builtin-tabs-container"), this.miniPanel = document.createElement("div"), this.miniPanel.classList.add("profiler-mini-panel"), this.miniPanel.className = "profiler-mini-panel", this.panel = document.createElement("div"), this.panel.classList.add("profiler-panel");
-		let e = document.createElement("div");
-		e.className = "profiler-header", e.addEventListener("wheel", (t) => {
-			t.deltaY !== 0 && (t.preventDefault(), e.scrollLeft += t.deltaY * .25);
+		this.domElement = document.createElement("div"), this.domElement.classList.add("three-inspector"), this.domElement.addEventListener("keydown", (e) => e.stopPropagation()), this.domElement.addEventListener("keyup", (e) => e.stopPropagation()), this.toggleButton = document.createElement("button"), this.toggleButton.classList.add("profiler-toggle"), this.toggleButton.innerHTML = "\n<span class=\"builtin-tabs-container\"></span>\n<span class=\"toggle-text\">\n	<span class=\"fps-counter\">-</span>\n	<span class=\"fps-label\">FPS</span>\n</span>\n<span class=\"toggle-icon\">\n	<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-device-ipad-horizontal-search\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5\" /><path d=\"M9 17h2\" /><path d=\"M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" /><path d=\"M20.2 20.2l1.8 1.8\" /></svg>\n	<span class=\"console-badge-container\">\n		<span class=\"console-badge error\">0</span>\n		<span class=\"console-badge warn\">0</span>\n	</span>\n</span>\n", this.toggleButton.onclick = () => this.togglePanel();
+		let e = this.toggleButton.querySelector(".console-badge.error");
+		e.style.display = "none";
+		let t = this.toggleButton.querySelector(".console-badge.warn");
+		t.style.display = "none", this.builtinTabsContainer = this.toggleButton.querySelector(".builtin-tabs-container"), this.miniPanel = document.createElement("div"), this.miniPanel.classList.add("profiler-mini-panel"), this.miniPanel.className = "profiler-mini-panel", this.panel = document.createElement("div"), this.panel.classList.add("profiler-panel");
+		let n = document.createElement("div");
+		n.className = "profiler-header", n.addEventListener("wheel", (e) => {
+			e.deltaY !== 0 && (e.preventDefault(), n.scrollLeft += e.deltaY * .25);
 		}, { passive: !1 }), this.tabsContainer = document.createElement("div"), this.tabsContainer.className = "profiler-tabs";
-		let t = document.createElement("div");
-		t.className = "profiler-controls", this.floatingBtn = document.createElement("button"), this.floatingBtn.classList.add("floating-btn"), this.floatingBtn.title = "Switch to Right Side", this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\"></line></svg>", this.floatingBtn.onclick = () => this.togglePosition(), this.isSmallScreen && (this.floatingBtn.style.display = "none", this.panel.classList.add("hide-position-toggle")), this.isMobile && this.panel.classList.add("is-mobile"), this.maximizeBtn = document.createElement("button"), this.maximizeBtn.classList.add("maximize-btn"), this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>", this.maximizeBtn.onclick = () => this.toggleMaximize();
-		let n = document.createElement("button");
-		n.classList.add("hide-panel-btn"), n.textContent = "-", n.onclick = () => this.togglePanel(), t.append(this.floatingBtn, this.maximizeBtn, n), e.append(this.tabsContainer, t), this.contentWrapper = document.createElement("div"), this.contentWrapper.className = "profiler-content-wrapper";
 		let r = document.createElement("div");
-		r.className = "panel-resizer", this.panel.append(r, e, this.contentWrapper), this.domElement.append(this.toggleButton, this.miniPanel, this.panel), this.panel.classList.add(`position-${this.position}`), this.position === "right" && (this.toggleButton.classList.add("position-right"), this.miniPanel.classList.add("position-right")), this.toggleGraph = new on(80), this.toggleGraph.addLine("fps", "#4c4c6bff"), this.toggleGraph.domElement.className = "profiler-toggle-graph", this.toggleButton.appendChild(this.toggleGraph.domElement);
+		r.className = "profiler-controls", this.floatingBtn = document.createElement("button"), this.floatingBtn.classList.add("floating-btn"), this.floatingBtn.title = "Switch to Right Side", this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\"></line></svg>", this.floatingBtn.onclick = () => this.togglePosition(), this.isSmallScreen && (this.floatingBtn.style.display = "none", this.panel.classList.add("hide-position-toggle")), this.isMobile && this.panel.classList.add("is-mobile"), this.maximizeBtn = document.createElement("button"), this.maximizeBtn.classList.add("maximize-btn"), this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>", this.maximizeBtn.onclick = () => this.toggleMaximize();
+		let i = document.createElement("button");
+		i.classList.add("hide-panel-btn"), i.textContent = "-", i.onclick = () => this.togglePanel(), r.append(this.floatingBtn, this.maximizeBtn, i), n.append(this.tabsContainer, r), this.contentWrapper = document.createElement("div"), this.contentWrapper.className = "profiler-content-wrapper";
+		let a = document.createElement("div");
+		a.className = "panel-resizer", this.panel.append(a, n, this.contentWrapper), this.domElement.append(this.toggleButton, this.miniPanel, this.panel), this.panel.classList.add(`position-${this.position}`), this.position === "right" && (this.toggleButton.classList.add("position-right"), this.miniPanel.classList.add("position-right")), this.toggleGraph = new cn(80), this.toggleGraph.addLine("fps", "#4c4c6bff"), this.toggleGraph.domElement.className = "profiler-toggle-graph", this.toggleButton.appendChild(this.toggleGraph.domElement);
 	}
 	setupResizing() {
 		let e = this.panel.querySelector(".panel-resizer");
@@ -441,7 +461,7 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 		});
 	}
 	toggleMaximize() {
-		this.panel.classList.contains("maximized") ? (this.panel.classList.remove("maximized"), this.domElement.classList.remove("maximized"), this.position === "bottom" ? (this.panel.style.height = `${this.lastHeightBottom}px`, this.panel.style.width = "100%") : this.position === "right" && (this.panel.style.height = "100%", this.panel.style.width = `${this.lastWidthRight}px`), this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>") : (this.position === "bottom" ? this.lastHeightBottom = this.panel.offsetHeight : this.position === "right" && (this.lastWidthRight = this.panel.offsetWidth), this.panel.classList.add("maximized"), this.domElement.classList.add("maximized"), this.position === "bottom" ? (this.panel.style.height = "100vh", this.panel.style.width = "100%") : this.position === "right" && (this.panel.style.height = "100%", this.panel.style.width = "100vw"), this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>"), this.dispatchEvent({ type: "resize" });
+		this.panel.classList.contains("maximized") ? (this.panel.classList.remove("maximized"), this.domElement.classList.remove("maximized"), this.position === "bottom" ? (this.panel.style.height = `${this.lastHeightBottom}px`, this.panel.style.width = "100%") : this.position === "right" && (this.panel.style.height = "100%", this.panel.style.width = `${this.lastWidthRight}px`), this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>") : (this.position === "bottom" ? this.lastHeightBottom = this.panel.offsetHeight : this.position === "right" && (this.lastWidthRight = this.panel.offsetWidth), this.panel.classList.add("maximized"), this.domElement.classList.add("maximized"), (this.position === "bottom" || this.position === "right") && (this.panel.style.height = "100%", this.panel.style.width = "100%"), this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>"), this.updateWidgetPosition(), this.dispatchEvent({ type: "resize" });
 	}
 	hide() {
 		this.miniPanel.classList.remove("visible"), this.miniPanel.querySelectorAll(".mini-panel-content").forEach((e) => {
@@ -455,7 +475,7 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 		e.miniContent.style.display = "block", this.miniPanel.classList.add("visible");
 	}
 	addTab(e) {
-		this.tabs[e.id] = e, e.originalIndex = this.nextTabOriginalIndex++, e.allowDetach === !1 && e.button.classList.add("no-detach"), e.onVisibilityChange = () => this.updatePanelSize(), this.setupTabDragAndDrop(e), e.builtin || this.tabsContainer.appendChild(e.button), this.contentWrapper.appendChild(e.content), e.isVisible || (e.button.style.display = "none", e.content.style.display = "none"), e.builtin && this.addBuiltinTab(e), this.updatePanelSize(), e.profiler = this;
+		this.tabs[e.id] = e, e.originalIndex = this.nextTabOriginalIndex++, e.allowDetach === !1 && e.button.classList.add("no-detach"), e.onVisibilityChange = () => this.updatePanelSize(), this.setupTabDragAndDrop(e), e.builtin || this.tabsContainer.appendChild(e.button), this.contentWrapper.appendChild(e.content), e.isVisible || (e.button.style.display = "none", e.content.style.display = "none"), e.builtin && this.addBuiltinTab(e), e.profiler = this, this.updatePanelSize(), this.activeTabId && e.id === this.activeTabId && this.setActiveTab(e.id);
 	}
 	addBuiltinTab(e) {
 		let t = document.createElement("button");
@@ -680,7 +700,7 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 		this.saveLayout(), this.checkHeaderScroll();
 	}
 	togglePanel() {
-		this.panel.classList.toggle("visible"), this.toggleButton.classList.toggle("panel-open"), this.miniPanel.classList.toggle("panel-open"), this.panel.classList.contains("visible") && this.activeTabId && this.tabs[this.activeTabId] && this.tabs[this.activeTabId].setActive(!0), this.dispatchEvent({ type: "resize" }), this.saveLayout();
+		this.panel.classList.toggle("visible"), this.toggleButton.classList.toggle("panel-open"), this.miniPanel.classList.toggle("panel-open"), this.panel.classList.contains("visible") && this.activeTabId && this.tabs[this.activeTabId] && this.tabs[this.activeTabId].setActive(!0), this.updateWidgetPosition(), this.dispatchEvent({ type: "resize" }), this.saveLayout();
 	}
 	togglePosition() {
 		let e = this.position === "bottom" ? "right" : "bottom";
@@ -690,7 +710,7 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 		if (this.position === e) return;
 		this.panel.style.transition = "none";
 		let t = this.panel.classList.contains("maximized");
-		e === "right" ? (this.position = "right", this.floatingBtn.classList.add("active"), this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><path d=\"M3 15h18\"></path></svg>", this.floatingBtn.title = "Switch to Bottom", this.panel.classList.remove("position-bottom"), this.panel.classList.add("position-right"), this.toggleButton.classList.add("position-right"), this.miniPanel.classList.add("position-right"), this.panel.style.bottom = "", this.panel.style.top = "0", this.panel.style.right = "0", this.panel.style.left = "", t ? (this.panel.style.width = "100vw", this.panel.style.height = "100%") : (this.panel.style.width = `${this.lastWidthRight}px`, this.panel.style.height = "100%")) : (this.position = "bottom", this.floatingBtn.classList.remove("active"), this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\"></line></svg>", this.floatingBtn.title = "Switch to Right Side", this.panel.classList.remove("position-right"), this.panel.classList.add("position-bottom"), this.toggleButton.classList.remove("position-right"), this.miniPanel.classList.remove("position-right"), this.panel.style.top = "", this.panel.style.right = "", this.panel.style.bottom = "0", this.panel.style.left = "0", t ? (this.panel.style.width = "100%", this.panel.style.height = "100vh") : (this.panel.style.width = "100%", this.panel.style.height = `${this.lastHeightBottom}px`)), setTimeout(() => {
+		e === "right" ? (this.position = "right", this.floatingBtn.classList.add("active"), this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><path d=\"M3 15h18\"></path></svg>", this.floatingBtn.title = "Switch to Bottom", this.panel.classList.remove("position-bottom"), this.panel.classList.add("position-right"), this.panel.style.bottom = "", this.panel.style.top = "0", this.panel.style.right = "0", this.panel.style.left = "", t ? (this.panel.style.width = "100%", this.panel.style.height = "100%") : (this.panel.style.width = `${this.lastWidthRight}px`, this.panel.style.height = "100%")) : (this.position = "bottom", this.floatingBtn.classList.remove("active"), this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\"></line></svg>", this.floatingBtn.title = "Switch to Right Side", this.panel.classList.remove("position-right"), this.panel.classList.add("position-bottom"), this.panel.style.top = "", this.panel.style.right = "", this.panel.style.bottom = "0", this.panel.style.left = "0", t ? (this.panel.style.width = "100%", this.panel.style.height = "100%") : (this.panel.style.width = "100%", this.panel.style.height = `${this.lastHeightBottom}px`)), this.updateWidgetPosition(), setTimeout(() => {
 			this.panel.style.transition = "";
 		}, 50), this.updatePanelSize(), this.saveLayout();
 	}
@@ -716,7 +736,7 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 			});
 		});
 		try {
-			X("layout", e);
+			Wn("layout", e);
 		} catch (e) {
 			console.warn("Failed to save profiler layout:", e);
 		}
@@ -724,7 +744,7 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 	loadLayout() {
 		this.isLoadingLayout = !0;
 		try {
-			let e = Rn("layout");
+			let e = Un("layout");
 			if (Object.keys(e).length === 0) return;
 			if (e.detachedTabs && e.detachedTabs.length > 0) {
 				let t = window.innerWidth, n = window.innerHeight;
@@ -743,7 +763,7 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 			}
 			e.position && (this.position = e.position), e.lastHeightBottom && (this.lastHeightBottom = e.lastHeightBottom), e.lastWidthRight && (this.lastWidthRight = e.lastWidthRight);
 			let t = window.innerWidth, n = window.innerHeight;
-			this.lastHeightBottom > n - 50 && (this.lastHeightBottom = n - 50), this.lastWidthRight > t - 50 && (this.lastWidthRight = t - 50), this.position === "right" ? (this.floatingBtn.classList.add("active"), this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><path d=\"M3 15h18\"></path></svg>", this.floatingBtn.title = "Switch to Bottom", this.panel.classList.remove("position-bottom"), this.panel.classList.add("position-right"), this.toggleButton.classList.add("position-right"), this.miniPanel.classList.add("position-right"), this.panel.style.bottom = "", this.panel.style.top = "0", this.panel.style.right = "0", this.panel.style.left = "", this.panel.style.width = `${this.lastWidthRight}px`, this.panel.style.height = "100%") : this.panel.style.height = `${this.lastHeightBottom}px`, e.isVisible && (this.panel.classList.add("visible"), this.toggleButton.classList.add("panel-open")), e.activeTabId && this.setActiveTab(e.activeTabId), e.detachedTabs && e.detachedTabs.length > 0 && (this.pendingDetachedTabs = e.detachedTabs, this.restoreDetachedTabs()), this.updatePanelSize(), this.panel.classList.contains("visible") && this.miniPanel.classList.add("panel-open");
+			this.lastHeightBottom > n - 50 && (this.lastHeightBottom = n - 50), this.lastWidthRight > t - 50 && (this.lastWidthRight = t - 50), this.position === "right" ? (this.floatingBtn.classList.add("active"), this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><path d=\"M3 15h18\"></path></svg>", this.floatingBtn.title = "Switch to Bottom", this.panel.classList.remove("position-bottom"), this.panel.classList.add("position-right"), this.toggleButton.classList.add("position-right"), this.miniPanel.classList.add("position-right"), this.panel.style.bottom = "", this.panel.style.top = "0", this.panel.style.right = "0", this.panel.style.left = "", this.panel.style.width = `${this.lastWidthRight}px`, this.panel.style.height = "100%") : this.panel.style.height = `${this.lastHeightBottom}px`, e.isVisible && (this.panel.classList.add("visible"), this.toggleButton.classList.add("panel-open")), e.activeTabId && this.setActiveTab(e.activeTabId), e.detachedTabs && e.detachedTabs.length > 0 && (this.pendingDetachedTabs = e.detachedTabs, this.restoreDetachedTabs()), this.updatePanelSize(), this.updateWidgetPosition(), this.panel.classList.contains("visible") && this.miniPanel.classList.add("panel-open");
 		} catch (e) {
 			console.warn("Failed to load profiler layout:", e);
 		} finally {
@@ -771,7 +791,38 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 			this.updatePanelSize();
 		}
 	}
-}, cn = class extends ce {
+	setHorizontalAlign(e) {
+		return this.horizontalAlign = e, this.updateWidgetPosition(), this;
+	}
+	setVerticalAlign(e) {
+		return this.verticalAlign = e, this.updateWidgetPosition(), this;
+	}
+	updateWidgetPosition() {
+		let e = this.panel.classList.contains("visible"), t = this.panel.classList.contains("maximized"), n = this.position === "right", r = this.horizontalAlign, i = this.verticalAlign;
+		e && (n ? this.horizontalAlign === "right" && (r = "left") : t ? i = this.verticalAlign === "top" ? "bottom" : "top" : this.verticalAlign === "bottom" && (i = "top")), r === "left" ? (this.toggleButton.classList.add("toggle-left"), this.miniPanel.classList.add("toggle-left")) : (this.toggleButton.classList.remove("toggle-left"), this.miniPanel.classList.remove("toggle-left")), i === "bottom" ? (this.toggleButton.classList.add("toggle-bottom"), this.miniPanel.classList.add("toggle-bottom")) : (this.toggleButton.classList.remove("toggle-bottom"), this.miniPanel.classList.remove("toggle-bottom")), this.notifyLayoutChange();
+	}
+	isVertical() {
+		return this.position === "left" || this.position === "right" || this.panel && (this.panel.classList.contains("position-left") || this.panel.classList.contains("position-right"));
+	}
+	notifyLayoutChange() {
+		let e = this.isVertical();
+		this.dispatchEvent({
+			type: "orientationchange",
+			position: this.position,
+			isVertical: e
+		}), this.dispatchEvent({
+			type: "layoutchange",
+			position: this.position,
+			isVertical: e
+		});
+	}
+	dispose() {
+		for (let e of Object.values(this.tabs)) e.dispose();
+		this.domElement.remove();
+		for (let e of this.detachedWindows) e.panel.remove();
+		this.toggleGraph.dispose();
+	}
+}, un = class extends se {
 	constructor(e, t = {}) {
 		super(), this.id = e.toLowerCase().replace(/\s+/g, "-"), this.button = document.createElement("button"), this.button.className = "tab-btn", this.button.textContent = e, this.content = document.createElement("div"), this.content.className = "profiler-content", this.content.classList.add(`${this.id}-content`), this._isActive = !1, this.isVisible = !0, this.isDetached = !1, this.detachedWindow = null, this.allowDetach = t.allowDetach === void 0 ? !0 : t.allowDetach, this.builtin = t.builtin === void 0 ? !1 : t.builtin, this.icon = t.icon || null, this.builtinButton = null, this.miniContent = null, this.profiler = null, this.onVisibilityChange = null;
 	}
@@ -811,9 +862,10 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 			this.builtinButton && this.builtinButton.classList.remove("active"), this.profiler && (Array.from(this.profiler.miniPanel.querySelectorAll(".mini-panel-content")).some((e) => e.style.display !== "none") || this.profiler.miniPanel.classList.remove("visible"), Array.from(this.profiler.builtinTabsContainer.querySelectorAll(".builtin-tab-btn")).some((e) => e.style.display !== "none") || (this.profiler.builtinTabsContainer.style.display = "none"));
 		}
 	}
-}, ln = class {
+	dispose() {}
+}, dn = class {
 	constructor(...e) {
-		this.headers = e, this.children = [], this.domElement = document.createElement("div"), this.domElement.className = "list-container", this.domElement.style.padding = "5px 10px 10px 10px", this.id = `list-${Math.random().toString(36).slice(2, 11)}`, this.domElement.dataset.listId = this.id, this.gridStyleElement = document.createElement("style"), this.domElement.appendChild(this.gridStyleElement);
+		this.headers = e, this.children = [], this.domElement = document.createElement("div"), this.domElement.className = "list-container", this.domElement.style.padding = "5px 10px 10px 10px", this.id = `list-${Math.random().toString(36).slice(2, 11)}`, this.domElement.dataset.listId = this.id;
 		let t = document.createElement("div");
 		t.className = "list-header", this.headers.forEach((e) => {
 			let n = document.createElement("div");
@@ -821,12 +873,10 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 		}), this.domElement.appendChild(t);
 	}
 	setGridStyle(e) {
-		this.gridStyleElement.textContent = `
-[data-list-id="${this.id}"] > .list-header,
-[data-list-id="${this.id}"] .list-item-row {
-	grid-template-columns: ${e};
-}
-`;
+		this.domElement.style.setProperty("--list-grid-template", e);
+	}
+	setViewMode(e) {
+		e === "grid" ? this.domElement.classList.add("grid-mode") : this.domElement.classList.remove("grid-mode");
 	}
 	add(e) {
 		e.parent !== null && e.parent.remove(e), e.domElement.classList.add("header-wrapper", "section-start"), e.parent = this, this.children.push(e), this.domElement.appendChild(e.domElement);
@@ -835,7 +885,7 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 		let t = this.children.indexOf(e);
 		return t !== -1 && (this.children.splice(t, 1), this.domElement.removeChild(e.domElement), e.parent = null), this;
 	}
-}, W = class {
+}, K = class {
 	constructor(...e) {
 		this.children = [], this.isOpen = !0, this.isCollapsible = !1, this.childrenContainer = null, this.parent = null, this.domElement = document.createElement("div"), this.domElement.className = "list-item-wrapper", this.itemRow = document.createElement("div"), this.itemRow.className = "list-item-row", this.userData = {}, this.data = [], e.forEach((e, t) => {
 			let n = document.createElement("div");
@@ -886,14 +936,14 @@ var H = /* @__PURE__ */ new Ae(), qt = /* @__PURE__ */ new p(), Jt = /* @__PURE_
 };
 //#endregion
 //#region ../../node_modules/three/examples/jsm/inspector/ui/utils.js
-function G() {
+function q() {
 	let e = document.createElement("span");
 	return e.className = "value", e;
 }
-function K(e, t) {
+function J(e, t) {
 	e && e.textContent !== t && (e.textContent = t);
 }
-function un(e) {
+function fn(e) {
 	let t = e.lastIndexOf("/");
 	return t === -1 ? {
 		path: "",
@@ -903,10 +953,10 @@ function un(e) {
 		name: e.substring(t + 1).trim()
 	};
 }
-function dn(e) {
+function pn(e) {
 	return e.replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
 }
-function q(e, t = 2) {
+function Y(e, t = 2) {
 	if (e === 0) return "0 Bytes";
 	let n = 1024, r = t < 0 ? 0 : t, i = [
 		"Bytes",
@@ -921,7 +971,7 @@ function q(e, t = 2) {
 	], a = Math.floor(Math.log(e) / Math.log(n));
 	return parseFloat((e / n ** +a).toFixed(r)) + " " + i[a];
 }
-function fn(e, t) {
+function mn(e, t) {
 	let n = e.querySelector(".info-icon");
 	if (!n) n = document.createElement("span"), n.className = "info-icon", n.textContent = "i", e.appendChild(n);
 	else {
@@ -951,36 +1001,36 @@ function fn(e, t) {
 }
 //#endregion
 //#region ../../node_modules/three/examples/jsm/inspector/tabs/Performance.js
-var pn = class extends cn {
+var hn = class extends un {
 	constructor(e = {}) {
 		super("Performance", e);
-		let t = new ln("Name", "CPU", "GPU", "Total");
+		let t = new dn("Name", "CPU", "GPU", "Total");
 		t.setGridStyle("minmax(200px, 2fr) 80px 80px 80px"), t.domElement.style.minWidth = "600px";
 		let n = document.createElement("div");
 		n.className = "list-scroll-wrapper", n.appendChild(t.domElement), this.content.appendChild(n);
 		let r = document.createElement("div");
 		r.className = "graph-container";
-		let i = new on();
-		i.addLine("fps", "var( --color-fps )"), i.addLine("cpu", "var( --color-yellow )"), i.addLine("gpu", "var( --color-green )"), r.append(i.domElement), this.graphFpsCounter = G();
-		let a = new W("Graph Stats", G(), G(), this.graphFpsCounter);
+		let i = new cn();
+		i.addLine("fps", "var( --color-fps )"), i.addLine("cpu", "var( --color-yellow )"), i.addLine("gpu", "var( --color-green )"), r.append(i.domElement), this.graphFpsCounter = q();
+		let a = new K("Graph Stats", q(), q(), this.graphFpsCounter);
 		t.add(a);
-		let o = new W(r);
+		let o = new K(r);
 		o.itemRow.childNodes[0].style.gridColumn = "1 / -1", a.add(o);
-		let s = new W("Frame Stats", G(), G(), G());
+		let s = new K("Frame Stats", q(), q(), q());
 		t.add(s);
-		let c = new W("Miscellaneous & Idle", G(), G(), G());
+		let c = new K("Miscellaneous & Idle", q(), q(), q());
 		c.domElement.firstChild.style.backgroundColor = "#00ff0b1a", c.domElement.firstChild.classList.add("no-hover"), s.add(c), this.notInUse = /* @__PURE__ */ new Map(), this.frameStats = s, this.graphStats = a, this.graph = i, this.miscellaneous = c, this.currentRender = null, this.currentItem = null, this.frameItems = /* @__PURE__ */ new Map();
 	}
 	resolveStats(e, t) {
 		let n = e.getStatsData(t.cid), r = n.item;
-		if (r === void 0) r = new W(G(), G(), G(), G()), t.name ? t.isComputeStats === !0 && (t.name = `${t.name} [ Compute ]`) : t.name = `Unnamed ${t.cid}`, r.userData.name = t.name, this.currentItem.add(r), n.item = r;
+		if (r === void 0) r = new K(q(), q(), q(), q()), t.name ? t.isComputeStats === !0 && (t.name = `${t.name} [ Compute ]`) : t.name = `Unnamed ${t.cid}`, r.userData.name = t.name, this.currentItem.add(r), n.item = r;
 		else {
 			r.userData.name = t.name, this.notInUse.has(t.cid) && (r.domElement.firstElementChild.classList.remove("alert"), this.notInUse.delete(t.cid));
 			let e = t.parent.children.indexOf(t);
 			(r.parent === null || r.parent.children.indexOf(r) !== e) && this.currentItem.add(r, e);
 		}
 		let i = r.userData.name;
-		t.isComputeStats && (i += " [ Compute ]"), K(r.data[0], i), K(r.data[1], n.cpu.toFixed(2)), K(r.data[2], t.gpuNotAvailable === !0 ? "-" : n.gpu.toFixed(2)), K(r.data[3], n.total.toFixed(2));
+		t.isComputeStats && (i += " [ Compute ]"), J(r.data[0], i), J(r.data[1], n.cpu.toFixed(2)), J(r.data[2], t.gpuNotAvailable === !0 ? "-" : n.gpu.toFixed(2)), J(r.data[3], n.total.toFixed(2));
 		let a = this.currentItem;
 		this.currentItem = r;
 		for (let n of t.children) this.resolveStats(e, n);
@@ -1004,7 +1054,7 @@ var pn = class extends cn {
 		let { item: t, time: n } = this.notInUse.get(e), r = performance.now(), i = 5 - Math.floor((r - n) / 1e3);
 		if (i >= 0) {
 			let e = "*".repeat(Math.max(0, i));
-			K(t.domElement.querySelector(".list-item-cell .value"), t.userData.name + " (not in use) " + e);
+			J(t.domElement.querySelector(".list-item-cell .value"), t.userData.name + " (not in use) " + e);
 		} else t.domElement.firstElementChild.classList.remove("alert"), t.parent.remove(t), this.notInUse.delete(e);
 	}
 	updateText(e, t) {
@@ -1013,37 +1063,33 @@ var pn = class extends cn {
 		for (let n of t.children) this.resolveStats(e, n);
 		for (let [e, t] of n) this.frameItems.has(e) || (this.addNotInUse(e, t), n.delete(e));
 		for (let e of this.notInUse.keys()) this.updateNotInUse(e);
-		K(this.graphFpsCounter, e.fps.toFixed() + " FPS"), K(this.frameStats.data[1], t.cpu.toFixed(2)), K(this.frameStats.data[2], e.getRenderer().backend.hasTimestamp ? t.gpu.toFixed(2) : "-"), K(this.frameStats.data[3], t.total.toFixed(2)), K(this.miscellaneous.data[1], t.miscellaneous.toFixed(2)), K(this.miscellaneous.data[2], "-"), K(this.miscellaneous.data[3], t.miscellaneous.toFixed(2)), this.currentItem = null;
+		J(this.graphFpsCounter, e.fps.toFixed() + " FPS"), J(this.frameStats.data[1], t.cpu.toFixed(2)), J(this.frameStats.data[2], e.getRenderer().backend.hasTimestamp ? t.gpu.toFixed(2) : "-"), J(this.frameStats.data[3], t.total.toFixed(2)), J(this.miscellaneous.data[1], t.miscellaneous.toFixed(2)), J(this.miscellaneous.data[2], "-"), J(this.miscellaneous.data[3], t.miscellaneous.toFixed(2)), this.currentItem = null;
 	}
-}, mn = class extends cn {
+}, gn = class extends un {
 	constructor(e = {}) {
 		super("Memory", e);
-		let t = new ln("Name", "Count", "Size");
+		let t = new dn("Name", "Count", "Size");
 		t.setGridStyle("minmax(200px, 2fr) 60px 100px"), t.domElement.style.minWidth = "300px";
 		let n = document.createElement("div");
 		n.className = "list-scroll-wrapper", n.appendChild(t.domElement), this.content.appendChild(n);
 		let r = document.createElement("div");
 		r.className = "graph-container";
-		let i = new on();
+		let i = new cn();
 		i.addLine("total", "var( --color-yellow )"), r.append(i.domElement);
-		let a = new W("Graph Stats", "", "");
+		let a = new K("Graph Stats", "", "");
 		t.add(a);
-		let o = new W(r);
-		o.itemRow.childNodes[0].style.gridColumn = "1 / -1", a.add(o), this.memoryStats = new W("Renderer Info", "", G()), this.memoryStats.domElement.firstChild.classList.add("no-hover"), t.add(this.memoryStats), this.attributes = new W("Attributes", G(), G()), this.memoryStats.add(this.attributes), this.geometries = new W("Geometries", G(), "N/A"), this.memoryStats.add(this.geometries), this.indexAttributes = new W("Index Attributes", G(), G()), this.memoryStats.add(this.indexAttributes), this.indirectStorageAttributes = new W("Indirect Storage Attributes", G(), G()), this.memoryStats.add(this.indirectStorageAttributes), this.programs = new W("Programs", G(), G()), this.memoryStats.add(this.programs), this.readbackBuffers = new W("Readback Buffers", G(), G()), this.memoryStats.add(this.readbackBuffers), this.renderTargets = new W("Render Targets", G(), "N/A"), this.memoryStats.add(this.renderTargets), this.storageAttributes = new W("Storage Attributes", G(), G()), this.memoryStats.add(this.storageAttributes), this.textures = new W("Textures", G(), G()), this.memoryStats.add(this.textures), this.uniformBuffers = new W("Uniform Buffers", G(), G()), this.memoryStats.add(this.uniformBuffers), this.graph = i;
+		let o = new K(r);
+		o.itemRow.childNodes[0].style.gridColumn = "1 / -1", a.add(o), this.memoryStats = new K("Renderer Info", "", q()), this.memoryStats.domElement.firstChild.classList.add("no-hover"), t.add(this.memoryStats), this.attributes = new K("Attributes", q(), q()), this.memoryStats.add(this.attributes), this.geometries = new K("Geometries", q(), "N/A"), this.memoryStats.add(this.geometries), this.indexAttributes = new K("Index Attributes", q(), q()), this.memoryStats.add(this.indexAttributes), this.indirectStorageAttributes = new K("Indirect Storage Attributes", q(), q()), this.memoryStats.add(this.indirectStorageAttributes), this.programs = new K("Programs", q(), q()), this.memoryStats.add(this.programs), this.readbackBuffers = new K("Readback Buffers", q(), q()), this.memoryStats.add(this.readbackBuffers), this.renderTargets = new K("Render Targets", q(), "N/A"), this.memoryStats.add(this.renderTargets), this.storageAttributes = new K("Storage Attributes", q(), q()), this.memoryStats.add(this.storageAttributes), this.textures = new K("Textures", q(), q()), this.memoryStats.add(this.textures), this.uniformBuffers = new K("Uniform Buffers", q(), q()), this.memoryStats.add(this.uniformBuffers), this.graph = i;
 	}
 	updateGraph(e) {
-		let t = e.getRenderer();
-		if (!t) return;
-		let n = t.info.memory;
-		this.graph.addPoint("total", n.total), this.graph.limit === 0 && (this.graph.limit = 1), this.graph.update();
+		let t = e.getRenderer().info.memory;
+		this.graph.addPoint("total", t.total), this.graph.limit === 0 && (this.graph.limit = 1), this.graph.update();
 	}
 	updateText(e) {
-		let t = e.getRenderer();
-		if (!t) return;
-		let n = t.info.memory;
-		K(this.memoryStats.data[2], q(n.total)), K(this.attributes.data[1], n.attributes.toString()), K(this.attributes.data[2], q(n.attributesSize)), K(this.geometries.data[1], n.geometries.toString()), K(this.indexAttributes.data[1], n.indexAttributes.toString()), K(this.indexAttributes.data[2], q(n.indexAttributesSize)), K(this.indirectStorageAttributes.data[1], n.indirectStorageAttributes.toString()), K(this.indirectStorageAttributes.data[2], q(n.indirectStorageAttributesSize)), K(this.programs.data[1], n.programs.toString()), K(this.programs.data[2], q(n.programsSize)), K(this.readbackBuffers.data[1], n.readbackBuffers.toString()), K(this.readbackBuffers.data[2], q(n.readbackBuffersSize)), K(this.renderTargets.data[1], n.renderTargets.toString()), K(this.storageAttributes.data[1], n.storageAttributes.toString()), K(this.storageAttributes.data[2], q(n.storageAttributesSize)), K(this.textures.data[1], n.textures.toString()), K(this.textures.data[2], q(n.texturesSize)), K(this.uniformBuffers.data[1], n.uniformBuffers.toString()), K(this.uniformBuffers.data[2], q(n.uniformBuffersSize));
+		let t = e.getRenderer().info.memory;
+		J(this.memoryStats.data[2], Y(t.total)), J(this.attributes.data[1], t.attributes.toString()), J(this.attributes.data[2], Y(t.attributesSize)), J(this.geometries.data[1], t.geometries.toString()), J(this.indexAttributes.data[1], t.indexAttributes.toString()), J(this.indexAttributes.data[2], Y(t.indexAttributesSize)), J(this.indirectStorageAttributes.data[1], t.indirectStorageAttributes.toString()), J(this.indirectStorageAttributes.data[2], Y(t.indirectStorageAttributesSize)), J(this.programs.data[1], t.programs.toString()), J(this.programs.data[2], Y(t.programsSize)), J(this.readbackBuffers.data[1], t.readbackBuffers.toString()), J(this.readbackBuffers.data[2], Y(t.readbackBuffersSize)), J(this.renderTargets.data[1], t.renderTargets.toString()), J(this.storageAttributes.data[1], t.storageAttributes.toString()), J(this.storageAttributes.data[2], Y(t.storageAttributesSize)), J(this.textures.data[1], t.textures.toString()), J(this.textures.data[2], Y(t.texturesSize)), J(this.uniformBuffers.data[1], t.uniformBuffers.toString()), J(this.uniformBuffers.data[2], Y(t.uniformBuffersSize));
 	}
-}, hn = class extends cn {
+}, _n = class extends un {
 	constructor(e = {}) {
 		super("Console", e), this.filters = {
 			info: !0,
@@ -1152,12 +1198,12 @@ var pn = class extends cn {
 		}
 		this.logContainer.scrollTop = this.logContainer.scrollHeight, this.isActive || (e === "error" ? (this.unreadErrors++, this.updateBadges()) : e === "warn" && (this.unreadWarns++, this.updateBadges()));
 	}
-}, J = class extends ce {
+}, X = class extends se {
 	constructor() {
-		super(), this.domElement = document.createElement("div"), this.domElement.className = "param-control", this._onChangeFunction = null, this.addEventListener("change", (e) => {
-			requestAnimationFrame(() => {
+		super(), this.domElement = document.createElement("div"), this.domElement.className = "param-control", this._onChangeFunction = null, this._changeTimeout = null, this._debounceTime = 0, this.addEventListener("change", (e) => {
+			clearTimeout(this._changeTimeout), this._changeTimeout = setTimeout(() => {
 				this._onChangeFunction && this._onChangeFunction(e.value);
-			});
+			}, this._debounceTime);
 		});
 	}
 	setValue() {
@@ -1175,13 +1221,16 @@ var pn = class extends cn {
 	onChange(e) {
 		return this._onChangeFunction = e, this;
 	}
+	debounce(e) {
+		return this._debounceTime = e, this;
+	}
 	show() {
 		return this.dispatchEvent({ type: "show" }), this;
 	}
 	hide() {
 		return this.dispatchEvent({ type: "hide" }), this;
 	}
-}, gn = class extends J {
+}, vn = class extends X {
 	constructor({ value: e = 0, step: t = .1, min: n = -Infinity, max: r = Infinity }) {
 		super(), this.input = document.createElement("input"), this.input.type = "number", this.input.value = e, this.input.step = t, this.input.min = n, this.input.max = r, this.input.addEventListener("change", this._onChangeValue.bind(this)), this.domElement.appendChild(this.input), this.addDragHandler();
 	}
@@ -1212,7 +1261,7 @@ var pn = class extends cn {
 	getValue() {
 		return parseFloat(this.input.value);
 	}
-}, _n = class extends J {
+}, yn = class extends X {
 	constructor({ value: e = !1 }) {
 		super();
 		let t = document.createElement("label");
@@ -1230,10 +1279,10 @@ var pn = class extends cn {
 	getValue() {
 		return this.checkbox.checked;
 	}
-}, vn = class extends J {
+}, bn = class extends X {
 	constructor({ value: e = 0, min: t = 0, max: n = 1, step: r = .01 }) {
 		super(), this.slider = document.createElement("input"), this.slider.type = "range", this.slider.min = t, this.slider.max = n, this.slider.step = r;
-		let i = new gn({
+		let i = new vn({
 			value: e,
 			min: t,
 			max: n,
@@ -1254,7 +1303,7 @@ var pn = class extends cn {
 	step(e) {
 		return this.slider.step = e, this.numberInput.step = e, this.slider.value = parseFloat(this.numberInput.value), this;
 	}
-}, yn = class extends J {
+}, xn = class extends X {
 	constructor({ options: e = [], value: t = "" }) {
 		super();
 		let n = document.createElement("select"), r = (e, r) => {
@@ -1277,7 +1326,7 @@ var pn = class extends cn {
 		let e = this.options;
 		return Array.isArray(e) ? e[this.select.selectedIndex] : e[this.select.value];
 	}
-}, bn = class extends J {
+}, Sn = class extends X {
 	constructor({ value: e = "#ffffff" }) {
 		super();
 		let t = document.createElement("input");
@@ -1297,13 +1346,13 @@ var pn = class extends cn {
 		let e = this._value;
 		return typeof e == "string" && (e = parseInt(e.slice(1), 16)), e;
 	}
-}, xn = class extends J {
+}, Cn = class extends X {
 	constructor({ text: e = "Button", value: t = () => {} }) {
 		super();
 		let n = document.createElement("button");
 		n.textContent = e, n.onclick = t, this.domElement.appendChild(n);
 	}
-}, Sn = class extends J {
+}, wn = class extends X {
 	constructor({ value: e = "" }) {
 		super();
 		let t = document.createElement("input");
@@ -1317,9 +1366,9 @@ var pn = class extends cn {
 	getValue() {
 		return this.input.value;
 	}
-}, Cn = class e {
+}, Tn = class e {
 	constructor(e, t) {
-		this.parameters = e, this.paramList = new W(t), this.paramList.setCollapsible(!0), this.objects = [];
+		this.parameters = e, this.paramList = new K(t), this.paramList.setCollapsible(!0), this.objects = [];
 	}
 	close() {
 		return this.paramList.close(), this;
@@ -1338,7 +1387,7 @@ var pn = class extends cn {
 		return typeof n[0] == "object" ? i = this.addSelect(e, t, n[0]) : r === "number" ? i = n.length >= 2 ? this.addSlider(e, t, ...n) : this.addNumber(e, t, ...n) : r === "boolean" ? i = this.addBoolean(e, t) : r === "string" ? i = this.addString(e, t) : r === "function" && (i = this.addButton(e, t, ...n)), i;
 	}
 	_addInfo(e, t) {
-		e.info = (n) => (fn(t, n), e);
+		e.info = (n) => (mn(t, n), e);
 	}
 	_addParameter(e, t, n, r) {
 		n.name = (e) => (r.data[0].childNodes.length > 0 && r.data[0].firstChild.nodeType === 3 ? r.data[0].firstChild.textContent = e : r.data[0].insertBefore(document.createTextNode(e), r.data[0].firstChild), n), this._addInfo(n, r.data[0]), n.listen = () => {
@@ -1358,13 +1407,13 @@ var pn = class extends cn {
 		}), n.addEventListener("show", () => r.show()), n.addEventListener("hide", () => r.hide());
 	}
 	addString(e, t) {
-		let n = e[t], r = new Sn({ value: n });
+		let n = e[t], r = new wn({ value: n });
 		r.addEventListener("change", ({ value: n }) => {
 			e[t] = n;
 		});
-		let i = G();
+		let i = q();
 		i.textContent = t;
-		let a = new W(i, r.domElement);
+		let a = new K(i, r.domElement);
 		return this.paramList.add(a), a.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, r, a), r;
 	}
 	addFolder(t) {
@@ -1372,13 +1421,13 @@ var pn = class extends cn {
 		return this.paramList.add(n.paramList), n;
 	}
 	addBoolean(e, t) {
-		let n = e[t], r = new _n({ value: n });
+		let n = e[t], r = new yn({ value: n });
 		r.addEventListener("change", ({ value: n }) => {
 			e[t] = n;
 		});
-		let i = G();
+		let i = q();
 		i.textContent = t;
-		let a = new W(i, r.domElement);
+		let a = new K(i, r.domElement);
 		this.paramList.add(a);
 		let o = a.domElement.firstChild;
 		return o.classList.add("actionable"), o.addEventListener("click", (e) => {
@@ -1388,30 +1437,30 @@ var pn = class extends cn {
 		}), this._addParameter(e, t, r, a), r;
 	}
 	addSelect(e, t, n) {
-		let r = e[t], i = new yn({
+		let r = e[t], i = new xn({
 			options: n,
 			value: r
 		});
 		i.addEventListener("change", ({ value: n }) => {
 			e[t] = n;
 		});
-		let a = G();
+		let a = q();
 		a.textContent = t;
-		let o = new W(a, i.domElement);
+		let o = new K(a, i.domElement);
 		return this.paramList.add(o), o.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, i, o), i;
 	}
 	addColor(e, t) {
-		let n = e[t], r = new bn({ value: n });
+		let n = e[t], r = new Sn({ value: n });
 		r.addEventListener("change", ({ value: n }) => {
 			e[t] = n;
 		});
-		let i = G();
+		let i = q();
 		i.textContent = t;
-		let a = new W(i, r.domElement);
+		let a = new K(i, r.domElement);
 		return this.paramList.add(a), a.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, r, a), r;
 	}
 	addSlider(e, t, n = 0, r = 1, i = .01) {
-		let a = e[t], o = new vn({
+		let a = e[t], o = new bn({
 			value: a,
 			min: n,
 			max: r,
@@ -1420,13 +1469,13 @@ var pn = class extends cn {
 		o.addEventListener("change", ({ value: n }) => {
 			e[t] = n;
 		});
-		let s = G();
+		let s = q();
 		s.textContent = t;
-		let c = new W(s, o.domElement);
+		let c = new K(s, o.domElement);
 		return this.paramList.add(c), c.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, o, c), o;
 	}
 	addNumber(e, t, ...n) {
-		let r = e[t], [i, a] = n, o = new gn({
+		let r = e[t], [i, a] = n, o = new vn({
 			value: r,
 			min: i,
 			max: a
@@ -1434,98 +1483,101 @@ var pn = class extends cn {
 		o.addEventListener("change", ({ value: n }) => {
 			e[t] = n;
 		});
-		let s = G();
+		let s = q();
 		s.textContent = t;
-		let c = new W(s, o.domElement);
+		let c = new K(s, o.domElement);
 		return this.paramList.add(c), c.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, o, c), o;
 	}
 	addButton(e, t) {
-		let n = e[t], r = new xn({
+		let n = e[t], r = new Cn({
 			text: t,
 			value: n
 		});
 		r.addEventListener("change", ({ value: n }) => {
 			e[t] = n;
 		});
-		let i = new W(r.domElement);
+		let i = new K(r.domElement);
 		return i.itemRow.childNodes[0].style.gridColumn = "1 / -1", this.paramList.add(i), i.domElement.firstChild.classList.add("actionable"), r.name = (e) => {
 			let t = r.domElement.childNodes[0];
 			return t.childNodes.length > 0 && t.firstChild.nodeType === 3 ? t.firstChild.textContent = e : t.insertBefore(document.createTextNode(e), t.firstChild), r;
 		}, this._addInfo(r, r.domElement.childNodes[0]), this._registerParameter(e, t, r, i), r;
 	}
-}, wn = class extends cn {
+}, En = class extends un {
 	constructor(e = {}) {
 		super(e.name || "Parameters", e);
-		let t = new ln("Property", "Value");
+		let t = new dn("Property", "Value");
 		t.domElement.classList.add("parameters"), t.setGridStyle(".5fr 1fr"), t.domElement.style.minWidth = "300px";
 		let n = document.createElement("div");
 		n.className = "list-scroll-wrapper", n.appendChild(t.domElement), this.content.appendChild(n), this.paramList = t, this.groups = [];
 	}
 	createGroup(e) {
-		let t = new Cn(this, e);
+		let t = new Tn(this, e);
 		return this.paramList.add(t.paramList), this.groups.push(t), t;
 	}
-}, Tn = [{
+}, Dn = [{
+	name: "Color Grading",
+	url: "../extensions/color-grading/ColorGrading.js"
+}, {
 	name: "TSL Graph",
 	url: "../extensions/tsl-graph/TSLGraphEditor.js"
-}], En = ke.prototype.init;
-function Dn(e) {
-	e ? ke.prototype.init = async function() {
+}], On = De.prototype.init;
+function kn(e) {
+	e ? De.prototype.init = async function() {
 		if (this.backend.isWebGLBackend !== !0) {
 			let e = this.backend.parameters;
 			this.backend = new Oe(e);
 		}
-		return En.call(this);
-	} : ke.prototype.init = En;
+		return On.call(this);
+	} : De.prototype.init = On;
 }
-var Y = null;
-function On() {
-	if (Y !== null) return Y;
-	let e = Rn("settings");
-	return Y = {
+var Z = null;
+function An() {
+	if (Z !== null) return Z;
+	let e = Un("settings");
+	return Z = {
 		forceWebGL: e.forceWebGL === void 0 ? !1 : e.forceWebGL,
 		captureStackTrace: e.captureStackTrace === void 0 ? !1 : e.captureStackTrace,
 		activeExtensions: e.activeExtensions === void 0 ? {} : e.activeExtensions,
 		storage: e.storage === void 0 ? "url" : e.storage
-	}, Y.forceWebGL && Dn(!0), Y.captureStackTrace && (Ce.captureStackTrace = !0), Y;
+	}, Z.forceWebGL && kn(!0), Z.captureStackTrace && (Se.captureStackTrace = !0), Z;
 }
-function kn() {
-	X("settings", {
-		forceWebGL: Y.forceWebGL,
-		captureStackTrace: Y.captureStackTrace,
-		activeExtensions: Y.activeExtensions,
-		storage: Y.storage
+function jn() {
+	Wn("settings", {
+		forceWebGL: Z.forceWebGL,
+		captureStackTrace: Z.captureStackTrace,
+		activeExtensions: Z.activeExtensions,
+		storage: Z.storage
 	});
 }
-On();
-var An = class extends wn {
+An();
+var Mn = class extends En {
 	constructor() {
 		super({ name: "Settings" }), this.extensions = {};
-		let e = On(), t = this.createGroup("Renderer");
+		let e = An(), t = this.createGroup("Renderer");
 		t.add(e, "forceWebGL").name("Force WebGL").onChange((e) => {
-			Dn(e), kn(), location.reload();
+			kn(e), jn(), location.reload();
 		}), t.add(e, "captureStackTrace").name("Capture Stack Trace").onChange((e) => {
-			Ce.captureStackTrace = e, kn(), location.reload();
+			Se.captureStackTrace = e, jn(), location.reload();
 		}), this.createGroup("Render Modes").add({ overdraw: !1 }, "overdraw").name("Overdraw").onChange((e) => {
 			this.inspector.overdraw = e;
 		}).info("Shows how many times each pixel is shaded.");
 	}
 	init() {
-		let e = this.createGroup("Extensions"), t = this.createGroup("Storage"), n = On();
+		let e = this.createGroup("Extensions"), t = this.createGroup("Storage"), n = An();
 		t.add(n, "storage", {
 			"URL Session": "url",
 			"Keep across Origin": "origin"
 		}).name("Save Settings").onChange(() => {
-			kn();
+			jn();
 		}).info("\nDefines how the **Inspector** preferences and states are stored in the browser.\n\n**URL Session**\nSaves state based on the exact URL. It will reset the settings whenever the URL changes.\n\n**Keep across Origin**\nShares the same state across any page within the current origin."), t.add({ clear: () => {
 			localStorage.removeItem("threejs-inspector"), location.reload();
 		} }, "clear").name("Clear Settings"), this._getExtensions().then((t) => {
 			for (let n of t) n.active = !1, n.loaded = !1, n.tab = null, this.extensions[n.name] = n, n.ui = e.add({ [n.name]: !1 }, n.name).onChange(async (e) => {
-				this.setActiveExtension(n.name, e), e ? Y.activeExtensions[n.name] = {
+				this.setActiveExtension(n.name, e), e ? Z.activeExtensions[n.name] = {
 					name: n.name,
 					url: n.url
-				} : delete Y.activeExtensions[n.name], this._updateExtensionUI(n), kn();
-			}), Y.activeExtensions[n.name] !== void 0 && n.ui.setValue(!0);
+				} : delete Z.activeExtensions[n.name], this._updateExtensionUI(n), jn();
+			}), Z.activeExtensions[n.name] !== void 0 && n.ui.setValue(!0);
 		});
 	}
 	async setActiveExtension(e, t) {
@@ -1533,7 +1585,7 @@ var An = class extends wn {
 		n && (t ? await this._loadExtension(r, n) : await this._unloadExtension(r, n));
 	}
 	_updateExtensionUI(e) {
-		e.active && Y.activeExtensions[e.name] === void 0 ? (e.ui.checkbox.checked = !0, e.ui.domElement.style.setProperty("--accent-color", "var(--color-green)")) : e.ui.domElement.style.removeProperty("--accent-color");
+		e.active && Z.activeExtensions[e.name] === void 0 ? (e.ui.checkbox.checked = !0, e.ui.domElement.style.setProperty("--accent-color", "var(--color-green)")) : e.ui.domElement.style.removeProperty("--accent-color");
 	}
 	async _unloadExtension(e, t) {
 		t.active !== !1 && (e.removeTab(t.tab), t.active = !1, t.loaded = !1, t.tab = null, this._updateExtensionUI(t), this.dispatchEvent({
@@ -1552,38 +1604,38 @@ var An = class extends wn {
 		});
 	}
 	async _getExtensions() {
-		return Tn;
+		return Dn;
 	}
-}, jn = /* @__PURE__ */ new p(), Mn = /* @__PURE__ */ B(([e, t, n]) => {
-	let r = A(0);
-	Ft(() => {
+}, Nn = /* @__PURE__ */ new d(), Pn = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"></line><polyline points=\"5 8 1 12 5 16\"></polyline><polyline points=\"19 8 23 12 19 16\"></polyline></svg>", Fn = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>", In = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>", Ln = /* @__PURE__ */ V(([e, t, n]) => {
+	let r = P(0);
+	Et(() => {
 		let { width: e, height: n } = t.value;
 		r.value = e / n;
 	});
-	let i = n.div(r), a = e.sub(.5), o = M(a.x.mul(i), a.y).add(.5), s = M(a.x, a.y.div(i)).add(.5), c = n.greaterThan(r).select(o, s);
-	return N(c, Wt(0, c.x).mul(Wt(c.x, 1)).mul(Wt(0, c.y)).mul(Wt(c.y, 1)));
-}), Nn = class extends cn {
+	let i = n.div(r), a = e.sub(.5), o = U(a.x.mul(i), a.y).add(.5), s = U(a.x, a.y.div(i)).add(.5), c = n.greaterThan(r).select(o, s);
+	return j(c, Ut(0, c.x).mul(Ut(c.x, 1)).mul(Ut(0, c.y)).mul(Ut(c.y, 1)));
+}), Rn = class extends un {
 	constructor(e = {}) {
 		super("Viewer", e), this.content.style.overflow = "hidden", this.maximizedByFullscreenButton = !1;
 		let t = document.createElement("div");
 		t.className = "toolbar";
 		let n = document.createElement("button");
-		n.className = "viewer-back-btn", n.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"></line><polyline points=\"12 19 5 12 12 5\"></polyline></svg>", n.title = "Back to list", n.style.display = "none", t.appendChild(n);
+		n.className = "viewer-back-btn", n.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"></line><polyline points=\"12 19 5 12 12 5\"></polyline></svg>", n.title = "Back", n.style.display = "none", t.appendChild(n);
 		let r = document.createElement("span");
 		r.textContent = "View:", t.appendChild(r);
 		let i = document.createElement("select");
 		i.className = "select", i.style.width = "200px";
 		let a = document.createElement("option");
-		a.value = "list", a.textContent = "List", i.appendChild(a), t.appendChild(i), this.content.appendChild(t);
-		let o = new ln("Viewer", "Name");
-		o.setGridStyle("150px minmax(200px, 2fr)"), o.domElement.style.minWidth = "400px";
+		a.value = "list", a.textContent = "List", i.appendChild(a), t.appendChild(i);
+		let o = new dn("Viewer", "Name");
+		o.setGridStyle("150px minmax(200px, 2fr)"), o.domElement.style.minWidth = "400px", this.nodeList = o, this.content.appendChild(t);
 		let s = document.createElement("div");
 		s.className = "list-scroll-wrapper", s.style.flexGrow = "1", s.style.overflowY = "auto", s.style.minHeight = "0", s.appendChild(o.domElement), this.content.appendChild(s);
 		let c = document.createElement("div");
 		c.className = "full-viewer-container", c.style.touchAction = "none", this.content.appendChild(c);
-		let l = new W("User Defined");
-		l.setCollapsible(!0), o.add(l), this.itemLibrary = /* @__PURE__ */ new Map(), this.folderLibrary = /* @__PURE__ */ new Map(), this.canvasNodes = /* @__PURE__ */ new Map(), this.currentDataList = [], this.nodeList = o, this.nodes = l, this.scrollWrapper = s, this.fullViewerContainer = c, this.select = i, this.backBtn = n, this.activeFullNodeId = null, this.pendingRestoreView = !0, n.addEventListener("click", () => {
-			i.value = "list", this.showListView(), this.maximizedByFullscreenButton &&= (this.profiler && this.profiler.panel.classList.contains("maximized") && this.profiler.toggleMaximize(), !1), this.saveLastView();
+		let l = new K("User Defined");
+		l.setCollapsible(!0), o.add(l), this.itemLibrary = /* @__PURE__ */ new Map(), this.folderLibrary = /* @__PURE__ */ new Map(), this.canvasNodes = /* @__PURE__ */ new Map(), this.currentDataList = [], this.nodes = l, this.scrollWrapper = s, this.fullViewerContainer = c, this.select = i, this.backBtn = n, this.activeFullNodeId = null, this.pendingRestoreView = !0, this.splitActive = !1, this.splitCanvasData = null, this.splitOverlay = null, this.splitLine = null, this.splitQuad = null, this.splitMaterial = null, this.splitUniforms = null, this.splitCanvas = null, this.splitCanvasTarget = null, n.addEventListener("click", () => {
+			this.splitActive && this.stopSplitMode(), i.value = "list", this.showListView(), this.maximizedByFullscreenButton &&= (this.profiler && this.profiler.panel.classList.contains("maximized") && this.profiler.toggleMaximize(), !1), this.saveLastView();
 		}), i.addEventListener("change", () => {
 			let e = i.value;
 			e === "list" ? this.showListView() : this.showNodeView(e), this.saveLastView();
@@ -1591,16 +1643,16 @@ var An = class extends wn {
 		let u = (e) => {
 			if (!this.isDraggingThumbnail || !this.activeSourceCanvas) return;
 			let t = this.inspector.getRenderer();
-			!t || !t.domElement || e.isForwarded || (e.stopImmediatePropagation(), e.preventDefault(), this.forwardEvent(e, this.activeSourceCanvas, t.domElement), (e.type === "pointerup" || e.type === "pointercancel") && (this.activePointerIds.delete(e.pointerId), this.activePointerIds.size === 0 && (this.isDraggingThumbnail = !1, this.activeSourceCanvas = null)));
+			e.isForwarded || (e.stopImmediatePropagation(), e.preventDefault(), this.forwardEvent(e, this.activeSourceCanvas, t.domElement), (e.type === "pointerup" || e.type === "pointercancel") && (this.activePointerIds.delete(e.pointerId), this.activePointerIds.size === 0 && (this.isDraggingThumbnail = !1, this.activeSourceCanvas = null)));
 		};
 		window.addEventListener("pointermove", u, !0), window.addEventListener("pointerup", u, !0), window.addEventListener("pointercancel", u, !0);
 	}
 	getFolder(e) {
 		let t = this.folderLibrary.get(e);
-		return t === void 0 && (t = new W(e), t.setCollapsible(!0), this.folderLibrary.set(e, t), this.nodeList.add(t)), t;
+		return t === void 0 && (t = new K(e), t.setCollapsible(!0), this.folderLibrary.set(e, t), this.nodeList.add(t)), t;
 	}
 	hide() {
-		super.hide(), this.maximizedByFullscreenButton = !1, this.isDraggingThumbnail = !1, this.activeSourceCanvas = null, this.activePointerIds.clear();
+		super.hide(), this.maximizedByFullscreenButton = !1, this.isDraggingThumbnail = !1, this.activeSourceCanvas = null, this.activePointerIds.clear(), this.splitActive && this.stopSplitMode();
 	}
 	addNodeItem(e) {
 		let t = this.itemLibrary.get(e.id);
@@ -1609,14 +1661,16 @@ var An = class extends wn {
 			i.className = "node-canvas-wrapper", i.style.position = "relative", i.style.display = "inline-block", i.style.width = "140px", i.style.height = "140px", i.style.touchAction = "none";
 			let a = document.createElement("button");
 			a.className = "node-canvas-detach-btn", a.title = "View full size", a.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"></line><polyline points=\"7 7 17 7 17 17\"></polyline></svg>", a.onclick = (t) => {
-				t.stopPropagation(), this.select.value = e.id, this.showNodeView(e.id), this.saveLastView();
+				t.stopPropagation(), this.splitActive && this.stopSplitMode(), this.select.value = e.id, this.showNodeView(e.id), this.saveLastView();
 			};
 			let o = document.createElement("button");
-			o.className = "node-canvas-fullscreen-btn", o.title = "Fullscreen view", o.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>", o.onclick = (t) => {
-				t.stopPropagation(), this.select.value = e.id, this.showNodeView(e.id), this.profiler && !this.profiler.panel.classList.contains("maximized") && (this.profiler.toggleMaximize(), this.maximizedByFullscreenButton = !0, !this._maximizeListenerAdded && this.profiler.maximizeBtn && (this.profiler.maximizeBtn.addEventListener("click", () => {
-					this.maximizedByFullscreenButton = !1;
-				}), this._maximizeListenerAdded = !0)), this.saveLastView();
-			}, i.appendChild(r), i.appendChild(a), i.appendChild(o), this.setupEventForwarding(r), e.domElement = r, e.wrapperElement = i, t = new W(i, n), t.itemRow.children[1].style["justify-content"] = "flex-start", this.itemLibrary.set(e.id, t);
+			o.className = "node-canvas-fullscreen-btn", o.title = "Fullscreen view", o.innerHTML = Fn, o.onclick = (t) => {
+				t.stopPropagation(), this.splitActive && this.splitCanvasData === e && this.splitFullscreen ? this.stopSplitMode() : (this.splitFullscreen = !0, this.startSplitMode(e));
+			};
+			let s = document.createElement("button");
+			s.className = "node-canvas-split-btn", s.title = "Interactive split screen", s.innerHTML = Pn, s.onclick = (t) => {
+				t.stopPropagation(), this.splitActive && this.splitCanvasData === e && !this.splitFullscreen ? this.stopSplitMode() : (this.splitFullscreen = !1, this.startSplitMode(e));
+			}, i.appendChild(r), i.appendChild(a), i.appendChild(o), i.appendChild(s), this.setupEventForwarding(r), e.domElement = r, e.wrapperElement = i, e.splitBtn = s, e.fullscreenBtn = o, t = new K(i, n), t.itemRow.children[1].style["justify-content"] = "flex-start", this.itemLibrary.set(e.id, t);
 		}
 		return t;
 	}
@@ -1672,6 +1726,17 @@ var An = class extends wn {
 			isPrimary: e.isPrimary
 		}) : new MouseEvent(e.type, f), d.isForwarded = !0, n.dispatchEvent(d);
 	}
+	init(e) {
+		super.init(e);
+		let t = () => {
+			let t = e.profiler.position, n = t === "top" || t === "bottom";
+			this.setViewMode(n ? "grid" : "list");
+		};
+		e.profiler.addEventListener("resize", t), t();
+	}
+	setViewMode(e) {
+		this.nodeList && (e === "grid" ? this.nodeList.domElement.style.minWidth = "0" : this.nodeList.domElement.style.minWidth = "400px", this.nodeList.setViewMode(e));
+	}
 	showListView() {
 		if (this.activeFullNodeId) {
 			let e = Array.from(this.canvasNodes.values()).find((e) => String(e.id) === String(this.activeFullNodeId));
@@ -1688,19 +1753,62 @@ var An = class extends wn {
 			t.canvasTarget.setSize(r, i), this.inspector.getRenderer().backend.delete(t.canvasTarget);
 		}
 	}
+	get isActive() {
+		return this.splitActive ? !0 : super.isActive;
+	}
+	set isActive(e) {
+		super.isActive = e;
+	}
+	startSplitMode(e) {
+		this.profiler && this.profiler.panel.classList.contains("visible") && this.profiler.togglePanel(), this.splitActive = !0, this.splitCanvasData = e, this.splitX = .5;
+		let t = this.inspector.getRenderer(), n = t.domElement, r = n.getBoundingClientRect(), i = document.fullscreenElement || this.profiler.domElement, a = i.getBoundingClientRect(), o = r.left - a.left, s = r.top - a.top;
+		if (this.splitCanvas || (this.splitCanvas = document.createElement("canvas"), this.splitCanvas.style.position = "absolute", this.splitCanvas.style.pointerEvents = "none", this.splitCanvas.style.zIndex = "998", this.splitCanvasTarget = new je(this.splitCanvas), this.splitCanvasTarget.setPixelRatio(window.devicePixelRatio)), this.splitCanvas.style.left = `${o}px`, this.splitCanvas.style.top = `${s}px`, this.splitCanvas.style.width = `${r.width}px`, this.splitCanvas.style.height = `${r.height}px`, this.splitCanvasTarget.setSize(r.width, r.height), t.backend.delete(this.splitCanvasTarget), i.appendChild(this.splitCanvas), this.splitFullscreen) this.splitOverlay && this.splitOverlay.parentElement && this.splitOverlay.parentElement.removeChild(this.splitOverlay);
+		else {
+			if (!this.splitOverlay) {
+				let e = document.createElement("div");
+				e.className = "split-screen-overlay three-inspector";
+				let t = document.createElement("div");
+				t.className = "split-screen-line", e.appendChild(t);
+				let r = !1;
+				t.addEventListener("pointerdown", (e) => {
+					r = !0, t.classList.add("active"), e.preventDefault();
+				}), window.addEventListener("pointermove", (e) => {
+					if (!r) return;
+					let i = n.getBoundingClientRect(), a = e.clientX - i.left, o = Math.max(0, Math.min(1, a / i.width));
+					this.splitX = o, t.style.left = `${o * 100}%`, this.splitUniforms && this.splitUniforms.splitX && (this.splitUniforms.splitX.value = o);
+				}), window.addEventListener("pointerup", () => {
+					r = !1, t.classList.remove("active");
+				}), this.splitOverlay = e, this.splitLine = t;
+			}
+			this.splitOverlay.style.left = `${o}px`, this.splitOverlay.style.top = `${s}px`, this.splitOverlay.style.width = `${r.width}px`, this.splitOverlay.style.height = `${r.height}px`, this.splitLine.style.left = "50%", i.appendChild(this.splitOverlay);
+		}
+		this.splitUniforms ||= {
+			splitX: P(.5),
+			viewportWidth: P(r.width)
+		}, this.splitUniforms.splitX.value = .5, this.splitUniforms.viewportWidth.value = r.width;
+		let c = Ot(I(j(e.node.context({ getUV: () => Vt })), 1), 0, t.outputColorSpace).context({ inspector: !0 }), l;
+		l = this.splitFullscreen ? c : V(() => (Vt.x.lessThan(this.splitUniforms.splitX).discard(), c))(), this.splitMaterial && this.splitMaterial.dispose(), this.splitMaterial = new k(), this.splitMaterial.outputNode = l, this.splitMaterial.depthTest = !1, this.splitMaterial.depthWrite = !1, this.splitQuad ? this.splitQuad.material = this.splitMaterial : this.splitQuad = new ke(this.splitMaterial), this.updateSplitButtonsState();
+	}
+	stopSplitMode() {
+		this.splitActive = !1, this.splitCanvasData = null, this.splitFullscreen = !1, this.splitOverlay && this.splitOverlay.parentElement && this.splitOverlay.parentElement.removeChild(this.splitOverlay), this.splitCanvas && this.splitCanvas.parentElement && this.splitCanvas.parentElement.removeChild(this.splitCanvas), this.updateSplitButtonsState();
+	}
+	updateSplitButtonsState() {
+		this.splitActive ? this.backBtn.style.display = "" : this.select.value === "list" ? this.backBtn.style.display = "none" : this.backBtn.style.display = "";
+		for (let e of this.canvasNodes.values()) !e.splitBtn || !e.fullscreenBtn || (this.splitActive && this.splitCanvasData === e ? this.splitFullscreen ? (e.fullscreenBtn.classList.add("active"), e.fullscreenBtn.innerHTML = In, e.fullscreenBtn.title = "Exit Fullscreen", e.splitBtn.classList.remove("active"), e.splitBtn.innerHTML = Pn, e.splitBtn.title = "Interactive split screen") : (e.splitBtn.classList.add("active"), e.splitBtn.innerHTML = In, e.splitBtn.title = "Exit Split Screen", e.fullscreenBtn.classList.remove("active"), e.fullscreenBtn.innerHTML = Fn, e.fullscreenBtn.title = "Fullscreen view") : (e.splitBtn.classList.remove("active"), e.splitBtn.innerHTML = Pn, e.splitBtn.title = "Interactive split screen", e.fullscreenBtn.classList.remove("active"), e.fullscreenBtn.innerHTML = Fn, e.fullscreenBtn.title = "Fullscreen view"));
+	}
 	getCanvasDataByNode(e, t) {
 		let n = this.canvasNodes.get(t);
 		if (n === void 0) {
-			let r = new Me(document.createElement("canvas"));
+			let r = new je(document.createElement("canvas"));
 			r.setPixelRatio(window.devicePixelRatio), r.setSize(140, 140);
-			let i = t.id, { path: a, name: o } = un(dn(t.getName() || "(unnamed)")), s = A(1), c = j(1), l = P(N(t.context({ getUV: (e) => {
-				let t = Mn(St, e, s), n = t.xy;
+			let i = t.id, { path: a, name: o } = fn(pn(t.getName() || "(unnamed)")), s = P(1), c = B(1), l = I(j(t.context({ getUV: (e) => {
+				let t = Ln(Vt, e, s), n = t.xy;
 				return c.assign(t.z), n;
 			} })), 1).mul(c);
-			l = ht(l, 0, e.outputColorSpace), l = l.context({ inspector: !0 });
-			let u = new O();
+			l = Ot(l, 0, e.outputColorSpace), l = l.context({ inspector: !0 });
+			let u = new k();
 			u.outputNode = l;
-			let d = new Ae(u);
+			let d = new ke(u);
 			d.name = "Viewer - " + o, n = {
 				id: i,
 				name: o,
@@ -1714,33 +1822,39 @@ var An = class extends wn {
 		}
 		return n;
 	}
-	update(e) {
-		let t = e.getRenderer(), n = e.getNodes();
-		if (n.length > 0) {
-			if (!t.backend.isWebGPUBackend) {
-				e.resolveConsoleOnce("warn", "Inspector: Viewer is only available with WebGPU.");
-				return;
-			}
+	update(t) {
+		let n = t.getRenderer();
+		if (this.splitActive) {
+			let t = n.domElement.getBoundingClientRect();
+			if (t.width <= 0 || t.height <= 0) return;
+			let r = document.fullscreenElement || this.profiler.domElement, i = r.getBoundingClientRect(), a = t.left - i.left, o = t.top - i.top;
+			this.splitCanvas.parentElement !== r && r.appendChild(this.splitCanvas), this.splitOverlay && !this.splitFullscreen && this.splitOverlay.parentElement !== r && r.appendChild(this.splitOverlay), this.splitCanvas.style.left = `${a}px`, this.splitCanvas.style.top = `${o}px`, this.splitCanvas.style.width = `${t.width}px`, this.splitCanvas.style.height = `${t.height}px`, this.splitOverlay && !this.splitFullscreen && (this.splitOverlay.style.left = `${a}px`, this.splitOverlay.style.top = `${o}px`, this.splitOverlay.style.width = `${t.width}px`, this.splitOverlay.style.height = `${t.height}px`), (this.splitCanvasTarget.width !== t.width || this.splitCanvasTarget.height !== t.height) && (this.splitCanvasTarget.setSize(t.width, t.height), this.splitUniforms && this.splitUniforms.viewportWidth && (this.splitUniforms.viewportWidth.value = t.width), n.backend.delete(this.splitCanvasTarget));
+			let s = n.getCanvasTarget(), c = n.getClearColor(new D()), l = n.getClearAlpha(), u = A.resetRendererState(n);
+			n.toneMapping = 0, n.outputColorSpace = e, n.setCanvasTarget(this.splitCanvasTarget), n.setClearColor(0, 0), this.splitQuad.render(n), n.setCanvasTarget(s), n.setClearColor(c, l), A.restoreRendererState(n, u);
+		}
+		let r = t.getNodes();
+		if (r.length > 0) {
+			if (!n.backend.isWebGPUBackend) return;
 			this.isVisible || this.show();
 		}
 		if (!this.isActive) return;
-		let r = n.map((e) => this.getCanvasDataByNode(t, e)), i = r.length !== this.currentDataList.length;
-		if (!i) {
-			for (let e = 0; e < r.length; e++) if (r[e].id !== this.currentDataList[e].id) {
-				i = !0;
+		let i = r.map((e) => this.getCanvasDataByNode(n, e)), a = i.length !== this.currentDataList.length;
+		if (!a) {
+			for (let e = 0; e < i.length; e++) if (i[e].id !== this.currentDataList[e].id) {
+				a = !0;
 				break;
 			}
 		}
-		if (i) {
+		if (a) {
 			let e = this.select.value;
 			for (; this.select.options.length > 1;) this.select.remove(1);
-			for (let e of r) {
+			for (let e of i) {
 				let t = document.createElement("option");
 				t.value = e.id, t.textContent = e.path ? `${e.path} / ${e.name}` : e.name, this.select.appendChild(t);
 			}
 			let t = !1;
 			if (this.pendingRestoreView) {
-				let e = Rn("viewerLastView");
+				let e = Un("viewerLastView");
 				if (e !== "list") {
 					for (let n = 0; n < this.select.options.length; n++) if (this.select.options[n].textContent === e) {
 						this.select.selectedIndex = n;
@@ -1760,54 +1874,59 @@ var An = class extends wn {
 			}
 		}
 		if (this.activeFullNodeId) {
-			let e = r.find((e) => String(e.id) === String(this.activeFullNodeId));
+			let e = i.find((e) => String(e.id) === String(this.activeFullNodeId));
 			if (e) {
-				let n = this.fullViewerContainer.getBoundingClientRect(), r = n.width || this.content.clientWidth, i = n.height || this.content.clientHeight - 38;
-				(e.canvasTarget.domElement.width !== r || e.canvasTarget.domElement.height !== i) && (e.canvasTarget.setSize(r, i), t.backend.delete(e.canvasTarget));
+				let t = this.fullViewerContainer.getBoundingClientRect(), r = t.width || this.content.clientWidth, i = t.height || this.content.clientHeight - 38;
+				(e.canvasTarget.domElement.width !== r || e.canvasTarget.domElement.height !== i) && (e.canvasTarget.setSize(r, i), n.backend.delete(e.canvasTarget));
 			}
 		}
-		let a = [...this.currentDataList];
-		for (let e of a) if (this.itemLibrary.has(e.id) && r.indexOf(e) === -1) {
+		let o = [...this.currentDataList];
+		for (let e of o) if (this.itemLibrary.has(e.id) && i.indexOf(e) === -1) {
 			let t = this.itemLibrary.get(e.id), n = t.parent;
 			n.remove(t), this.folderLibrary.has(n.data[0]) && n.children.length === 0 && (n.parent.remove(n), this.folderLibrary.delete(n.data[0])), this.itemLibrary.delete(e.id);
 		}
-		let o = {};
-		for (let e of r) {
-			let n = this.addNodeItem(e), r = t.getCanvasTarget(), i = e.path;
-			if (i) {
-				let e = this.getFolder(i);
-				o[i] === void 0 && (o[i] = 0), (e.parent === null || n.parent !== e || e.children.indexOf(n) !== o[i]) && e.add(n), o[i]++;
-			} else n.parent || this.nodes.add(n);
-			let a = [], s = r.getDrawingBufferSize(jn);
-			e.node.traverse((e) => {
+		let s = {};
+		for (let t of i) {
+			let r = this.addNodeItem(t), i = n.getCanvasTarget(), a = t.path;
+			if (a) {
+				let e = this.getFolder(a);
+				s[a] === void 0 && (s[a] = 0), (e.parent === null || r.parent !== e || e.children.indexOf(r) !== s[a]) && e.add(r), s[a]++;
+			} else r.parent || this.nodes.add(r);
+			let o = [], c = i.getDrawingBufferSize(Nn);
+			t.node.traverse((e) => {
 				if (e.isRTTNode && e.autoResize === !0) {
 					let t = e.width, n = e.height;
-					e.width = s.width, e.height = s.height, e.setSize(s.width, s.height), a.push({
+					e.width = c.width, e.height = c.height, e.setSize(c.width, c.height), o.push({
 						node: e,
 						oldWidth: t,
 						oldHeight: n
 					});
 				}
 			});
-			let c = k.resetRendererState(t);
-			t.toneMapping = 0, t.outputColorSpace = f, t.setCanvasTarget(e.canvasTarget), e.canvasAspect && (e.canvasAspect.value = e.canvasTarget.domElement.width / e.canvasTarget.domElement.height), e.quad.render(t), t.setCanvasTarget(r), k.restoreRendererState(t, c);
-			for (let e of a) e.node.width = e.oldWidth, e.node.height = e.oldHeight;
+			let l = A.resetRendererState(n);
+			n.toneMapping = 0, n.outputColorSpace = e, n.setCanvasTarget(t.canvasTarget), t.canvasAspect && (t.canvasAspect.value = t.canvasTarget.domElement.width / t.canvasTarget.domElement.height), t.quad.render(n), n.setCanvasTarget(i), A.restoreRendererState(n, l);
+			for (let e of o) e.node.width = e.oldWidth, e.node.height = e.oldHeight;
 		}
-		this.currentDataList = r;
+		this.currentDataList = i;
 	}
 	setActive(e) {
 		super.setActive(e);
 	}
 	saveLastView() {
-		if (this.select.value === "list") X("viewerLastView", "list");
+		if (this.select.value === "list") Wn("viewerLastView", "list");
 		else {
 			let e = this.select.options[this.select.selectedIndex];
-			e && X("viewerLastView", e.textContent);
+			e && Wn("viewerLastView", e.textContent);
 		}
 	}
-}, Pn = 500, Fn = 60, In = class extends cn {
+	dispose() {
+		this.splitActive && this.stopSplitMode(), this.splitCanvas &&= (this.splitCanvas.parentElement && this.splitCanvas.parentElement.removeChild(this.splitCanvas), null), this.splitCanvasTarget &&= (this.splitCanvasTarget.dispose(), null), this.splitMaterial &&= (this.splitMaterial.dispose(), null);
+		for (let e of this.canvasNodes.values()) e.canvasTarget.dispose(), e.material.dispose();
+		this.canvasNodes.clear(), super.dispose();
+	}
+}, zn = 500, Bn = 60, Vn = class extends un {
 	constructor(e = {}) {
-		super("Timeline", e), this.content.style.overflow = "hidden", this.isRecording = !1, this.frames = [], this.baseTriangles = 0, this.currentFrame = null, this.isHierarchicalView = !0, this.callBlocks = /* @__PURE__ */ new WeakMap(), this.fallbackBlocks = [], this.originalBackend = null, this.originalMethods = /* @__PURE__ */ new Map(), this.renderer = null, this.graph = new on(Pn), this.graph.addLine("fps", "var( --color-fps )"), this.graph.addLine("calls", "var( --color-call )"), this.graph.addLine("triangles", "var( --color-red )"), this.buildHeader(), this.buildUI(), window.addEventListener("resize", () => {
+		super("Timeline", e), this.content.style.overflow = "hidden", this.isRecording = !1, this.frames = [], this.baseTriangles = 0, this.currentFrame = null, this.isHierarchicalView = !0, this.activeBlocks = /* @__PURE__ */ new Map(), this.domPool = [], this.originalBackend = null, this.originalMethods = /* @__PURE__ */ new Map(), this.renderer = null, this.graph = new cn(zn), this.graph.addLine("fps", "var( --color-fps )"), this.graph.addLine("calls", "var( --color-call )"), this.graph.addLine("triangles", "var( --color-red )"), this.buildHeader(), this.buildUI(), window.addEventListener("resize", () => {
 			this.isActive && !this.isRecording && this.frames.length > 0 && this.renderSlider();
 		});
 	}
@@ -1830,8 +1949,8 @@ var An = class extends wn {
 		r.value = "counts", r.textContent = "Count", this.viewModeSelect.appendChild(r), this.viewModeSelect.value = this.isHierarchicalView ? "hierarchy" : "counts", this.viewModeSelect.addEventListener("change", () => {
 			this.isHierarchicalView = this.viewModeSelect.value === "hierarchy", this.selectedFrameIndex !== void 0 && this.selectedFrameIndex !== -1 && this.selectFrame(this.selectedFrameIndex);
 		}), this.recordRefreshButton = document.createElement("button"), this.recordRefreshButton.className = "console-copy-button", this.recordRefreshButton.title = "Refresh & Record", this.recordRefreshButton.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"></path><path d=\"M21 3v5h-5\"></path><circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"currentColor\"></circle></svg>", this.recordRefreshButton.style.padding = "0 10px", this.recordRefreshButton.style.lineHeight = "24px", this.recordRefreshButton.style.display = "flex", this.recordRefreshButton.style.alignItems = "center", this.recordRefreshButton.addEventListener("click", () => {
-			let e = Rn("timeline");
-			e.recording = !0, X("timeline", e), window.location.reload();
+			let e = Un("timeline");
+			e.recording = !0, Wn("timeline", e), window.location.reload();
 		}), this.exportButton = document.createElement("button"), this.exportButton.className = "console-copy-button", this.exportButton.title = "Export", this.exportButton.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path><polyline points=\"7 10 12 15 17 10\"></polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line></svg>", this.exportButton.style.padding = "0 10px", this.exportButton.style.lineHeight = "24px", this.exportButton.style.display = "flex", this.exportButton.style.alignItems = "center", this.exportButton.addEventListener("click", () => this.exportData());
 		let i = document.createElement("div");
 		i.className = "console-buttons-group", i.appendChild(this.recordButton), i.appendChild(this.recordRefreshButton), i.appendChild(this.exportButton), i.appendChild(t);
@@ -1909,12 +2028,14 @@ var An = class extends wn {
 			r = !1, this.isManualScrubbing = !1;
 		}), e.appendChild(t);
 		let a = document.createElement("div");
-		a.style.flex = "1", a.style.display = "flex", a.style.flexDirection = "column", a.style.overflow = "hidden", this.timelineTrack = document.createElement("div"), this.timelineTrack.style.flex = "1", this.timelineTrack.style.overflowY = "auto", this.timelineTrack.style.margin = "10px", this.timelineTrack.style.marginTop = "8px", this.timelineTrack.style.backgroundColor = "var(--background-color)", a.appendChild(this.timelineTrack), e.appendChild(a), this.content.appendChild(e);
+		a.style.flex = "1", a.style.display = "flex", a.style.flexDirection = "column", a.style.overflow = "hidden", this.timelineTrack = document.createElement("div"), this.timelineTrack.style.flex = "1", this.timelineTrack.style.overflowY = "auto", this.timelineTrack.style.margin = "10px", this.timelineTrack.style.marginTop = "8px", this.timelineTrack.style.backgroundColor = "var(--background-color)", this.timelineTrack.style.position = "relative", a.appendChild(this.timelineTrack), this.timelineContent = document.createElement("div"), this.timelineContent.style.position = "relative", this.timelineContent.style.width = "100%", this.timelineTrack.appendChild(this.timelineContent), this.timelineTrack.addEventListener("scroll", () => {
+			!this.isRecording && this.frames.length > 0 && this.updateVisibleBlocks();
+		}), e.appendChild(a), this.content.appendChild(e);
 	}
 	setRenderer(e) {
 		this.renderer = e;
-		let t = Rn("timeline");
-		t.recording && (t.recording = !1, X("timeline", t), this.toggleRecording());
+		let t = Un("timeline");
+		t.recording && (t.recording = !1, Wn("timeline", t), this.toggleRecording());
 	}
 	toggleRecording() {
 		if (!this.renderer) {
@@ -1944,7 +2065,7 @@ var An = class extends wn {
 								for (let t = 0; t < n.length; t++) n[t] *= e;
 							}
 						}
-						let t = this.baseTriangles > 0 ? e / this.baseTriangles * Fn : 0;
+						let t = this.baseTriangles > 0 ? e / this.baseTriangles * Bn : 0;
 						this.graph.addPoint("calls", this.currentFrame.calls.length), this.graph.addPoint("fps", this.currentFrame.fps), this.graph.addPoint("triangles", t), this.graph.update();
 					}
 					this.currentFrame = {
@@ -1952,7 +2073,7 @@ var An = class extends wn {
 						calls: [],
 						fps: 0,
 						triangles: 0
-					}, this.frames.push(this.currentFrame), this.frames.length > Pn && this.frames.shift();
+					}, this.frames.push(this.currentFrame), this.frames.length > zn && this.frames.shift();
 				}
 				let a = {
 					method: n,
@@ -1970,56 +2091,56 @@ var An = class extends wn {
 		}
 	}
 	clear() {
-		this.frames = [], this.timelineTrack.innerHTML = "", this.playhead.style.display = "none", this.frameInfo.textContent = "", this.baseTriangles = 0, this.graph.lines.calls.points = [], this.graph.lines.fps.points = [], this.graph.lines.triangles.points = [], this.graph.resetLimit(), this.graph.update();
+		this.frames = [], this.clearActiveBlocks(), this.timelineContent.innerHTML = "", this.timelineContent.style.height = "0px", this.playhead.style.display = "none", this.frameInfo.textContent = "", this.baseTriangles = 0, this.graph.lines.calls.points = [], this.graph.lines.fps.points = [], this.graph.lines.triangles.points = [], this.graph.resetLimit(), this.graph.update();
 	}
 	exportData() {
 		if (this.frames.length === 0) return;
 		let e = JSON.stringify(this.frames, null, "	"), t = new Blob([e], { type: "application/json" }), n = URL.createObjectURL(t), r = document.createElement("a");
 		r.href = n, r.download = "threejs-timeline.json", r.click(), URL.revokeObjectURL(n);
 	}
-	getRenderTargetDetails(t) {
-		let n = t.textures, i = [], a = (e) => {
+	getRenderTargetDetails(e) {
+		let r = e.textures, i = [], a = (e) => {
 			switch (e.type) {
-				case ee:
-				case ae: return "8";
-				case c:
+				case w:
+				case y: return "8";
+				case g:
+				case de:
+				case ne:
+				case u:
+				case n: return "16";
+				case p:
 				case pe:
-				case C:
+				case S:
 				case me:
-				case y: return "16";
-				case m:
-				case ue:
-				case b:
-				case te:
-				case v:
-				case x: return "32";
+				case ee:
+				case ue: return "32";
 				default: return "?";
 			}
-		}, u = (t) => {
-			switch (t.format) {
-				case le: return "a";
-				case re:
-				case e: return "r";
-				case r:
-				case fe: return "rg";
+		}, c = (e) => {
+			switch (e.format) {
+				case ce: return "a";
+				case t:
+				case re: return "r";
+				case fe:
+				case f: return "rg";
+				case T:
+				case te: return "rgb";
+				case ie: return "depth";
+				case o: return "depth-stencil";
+				case s:
 				case oe:
-				case S: return "rgb";
-				case se: return "depth";
-				case s: return "depth-stencil";
-				case o:
-				case l:
 				default: return "rgba";
 			}
 		};
-		for (let e = 0; e < n.length; e++) {
-			let t = n[e], r = a(t), o = u(t), s = `[${e}]`;
-			t.name && !(t.isDepthTexture && t.name === "depth") && (s += ` ${t.name}`), s += ` ${o} ${r} bpc`, i.push(s);
+		for (let e = 0; e < r.length; e++) {
+			let t = r[e], n = a(t), o = c(t), s = `[${e}]`;
+			t.name && !(t.isDepthTexture && t.name === "depth") && (s += ` ${t.name}`), s += ` ${o} ${n} bpc`, i.push(s);
 		}
-		let d = {
-			target: t.name || "RenderTarget",
-			[`attachments(${n.length})`]: "\n" + i.join("\n")
+		let l = {
+			target: e.name || "RenderTarget",
+			[`attachments(${r.length})`]: "\n" + i.join("\n")
 		};
-		return t.depthTexture && (d.depth = `${a(t.depthTexture)} bpc`), d;
+		return e.depthTexture && (l.depth = `${a(e.depthTexture)} bpc`), l;
 	}
 	getCallDetail(e, t) {
 		switch (e) {
@@ -2201,8 +2322,8 @@ var An = class extends wn {
 	}
 	formatDetails(e) {
 		let t = [];
-		for (let n in e) e[n] !== void 0 && t.push(`<span style="opacity: 0.5">${n}:</span> <span style="color: var(--text-secondary); opacity: 1">${e[n]}</span>`);
-		return t.length === 0 ? "" : `<span style="font-size: 11px; margin-left: 8px; color: var(--text-secondary); opacity: 1;">{ ${t.join("<span style=\"opacity: 0.5\">, </span>")} }</span>`;
+		for (let n in e) e[n] !== void 0 && t.push(`<span class="timeline-detail-key">${n}:</span> <span class="timeline-detail-value">${e[n]}</span>`);
+		return t.length === 0 ? "" : `<span class="timeline-detail-block">{ ${t.join("<span class=\"timeline-detail-sep\">, </span>")} }</span>`;
 	}
 	renderSlider() {
 		if (this.frames.length === 0) {
@@ -2218,7 +2339,7 @@ var An = class extends wn {
 			r > t && (t = r);
 		}
 		for (let n = 0; n < e.length; n++) {
-			let r = e[n].triangles || 0, i = t > 0 ? r / t * Fn : 0;
+			let r = e[n].triangles || 0, i = t > 0 ? r / t * Bn : 0;
 			this.graph.addPoint("calls", e[n].calls.length), this.graph.addPoint("fps", e[n].fps || 0), this.graph.addPoint("triangles", i);
 		}
 		this.graph.update(), this.playhead.style.display = "block";
@@ -2230,8 +2351,8 @@ var An = class extends wn {
 		this.selectedFrameIndex = e;
 		let t = this.frames[e];
 		this.renderTimelineTrack(t);
-		let n = this.profiler.panel.offsetWidth < 800, r = n ? "" : "Frame: ", i = n ? "" : " FPS", a = n ? "" : " calls", o = n ? "" : " triangles", s = (e, t) => `<span style="display:inline-flex;align-items:center;margin-left:12px;flex-shrink:0;"><span style="width:6px;height:6px;border-radius:50%;background-color:${e};margin-right:6px;flex-shrink:0;"></span>${t}</span>`, c = Math.max(this.baseTriangles, t.triangles || 0), l = n ? t.triangles || 0 : (t.triangles || 0) + " / " + c + o;
-		this.frameInfo.innerHTML = r + t.id + s("var(--color-fps)", (t.fps || 0).toFixed(1) + i) + s("var(--color-call)", t.calls.length + a) + s("var(--color-red)", l);
+		let n = this.content.offsetWidth < 800, r = n ? "" : "Frame: ", i = n ? "" : " FPS", a = n ? "" : " calls", o = n ? "" : " triangles", s = (e, t) => `<span class="timeline-info-group"><span class="timeline-info-dot ${e}"></span>${t}</span>`, c = Math.max(this.baseTriangles, t.triangles || 0), l = n ? t.triangles || 0 : (t.triangles || 0) + " / " + c + o;
+		this.frameInfo.innerHTML = r + t.id + s("fps", (t.fps || 0).toFixed(1) + i) + s("call", t.calls.length + a) + s("red", l);
 		let u = this.graphSlider.getBoundingClientRect(), d = this.graph.lines.calls.points.length;
 		if (d > 0) {
 			let t = u.width / (this.graph.maxPoints - 1), n = e;
@@ -2240,114 +2361,141 @@ var An = class extends wn {
 			r = Math.max(1, Math.min(r, u.width - 1)), this.playhead.style.left = r + "px", this.playhead.style.display = "block";
 		}
 	}
-	getCallBlock(e, t, n = 0) {
-		let r = e.target, i;
-		if (r && typeof r == "object") {
-			let e = this.callBlocks.get(r);
-			e || (e = [], this.callBlocks.set(r, e)), i = e[n];
-		} else i = this.fallbackBlocks[t];
-		return i || (i = document.createElement("div"), i.style.display = "flex", i.style.alignItems = "center", i.style.padding = "4px 8px", i.style.margin = "2px 0", i.style.backgroundColor = "rgba(255, 255, 255, 0.03)", i.style.fontFamily = "monospace", i.style.fontSize = "12px", i.style.color = "var(--text-primary)", i.style.overflow = "hidden", i.arrow = document.createElement("span"), i.arrow.style.fontSize = "10px", i.arrow.style.marginRight = "8px", i.arrow.style.cursor = "pointer", i.arrow.style.width = "35px", i.arrow.style.textAlign = "center", i.arrow.style.flexShrink = "0", i.arrow.style.whiteSpace = "nowrap", i.appendChild(i.arrow), i.titleSpan = document.createElement("span"), i.titleSpan.style.flex = "1", i.titleSpan.style.minWidth = "0", i.titleSpan.style.overflow = "hidden", i.titleSpan.style.textOverflow = "ellipsis", i.titleSpan.style.whiteSpace = "nowrap", i.appendChild(i.titleSpan), i.addEventListener("click", (e) => {
-			i._groupId && (e.stopPropagation(), this.collapsedGroups.has(i._groupId) ? this.collapsedGroups.delete(i._groupId) : this.collapsedGroups.add(i._groupId), this.renderTimelineTrack(this.frames[this.selectedFrameIndex]));
-		}), r && typeof r == "object" ? this.callBlocks.get(r)[n] = i : this.fallbackBlocks[t] = i), i.style.cursor = "default", i._groupId = null, i.arrow.style.display = "none", i;
+	createBlock() {
+		let e = document.createElement("div");
+		return e.style.display = "flex", e.style.alignItems = "center", e.style.padding = "4px 8px", e.style.backgroundColor = "rgba(255, 255, 255, 0.03)", e.style.fontFamily = "monospace", e.style.fontSize = "12px", e.style.color = "var(--text-primary)", e.style.overflow = "hidden", e.style.position = "absolute", e.style.left = "0", e.style.right = "0", e.style.height = "24px", e.style.boxSizing = "border-box", e.arrow = document.createElement("span"), e.arrow.style.fontSize = "10px", e.arrow.style.marginRight = "8px", e.arrow.style.cursor = "pointer", e.arrow.style.width = "35px", e.arrow.style.textAlign = "center", e.arrow.style.flexShrink = "0", e.arrow.style.whiteSpace = "nowrap", e.appendChild(e.arrow), e.titleSpan = document.createElement("span"), e.titleSpan.style.flex = "1", e.titleSpan.style.minWidth = "0", e.titleSpan.style.overflow = "hidden", e.titleSpan.style.textOverflow = "ellipsis", e.titleSpan.style.whiteSpace = "nowrap", e.appendChild(e.titleSpan), e.addEventListener("click", (t) => {
+			e._groupId && (t.stopPropagation(), this.collapsedGroups.has(e._groupId) ? this.collapsedGroups.delete(e._groupId) : this.collapsedGroups.add(e._groupId), this.renderTimelineTrack(this.frames[this.selectedFrameIndex]));
+		}), e;
 	}
-	renderTimelineTrack(e) {
-		if (this.isRecording) return;
-		if (!e || e.calls.length === 0) {
-			this.timelineTrack.innerHTML = "";
+	clearActiveBlocks() {
+		if (this.activeBlocks) {
+			for (let e of this.activeBlocks.values()) e.remove(), this.domPool.push(e);
+			this.activeBlocks.clear();
+		}
+	}
+	updateVisibleBlocks() {
+		if (!this.flatList || this.flatList.length === 0) {
+			this.clearActiveBlocks();
 			return;
 		}
-		this.collapsedGroups ||= /* @__PURE__ */ new Set();
-		let t = 0, n = this.timelineTrack.children, r = 0, i = /* @__PURE__ */ new WeakMap();
-		if (this.isHierarchicalView) {
-			let a = [], o = null;
-			for (let t = 0; t < e.calls.length; t++) {
-				let n = e.calls[t], r = n.method.startsWith("begin") || n.method.startsWith("finish"), i = n.details ? this.formatDetails(n.details) : "";
-				o && o.method === n.method && o.formatedDetails === i && !r ? o.count++ : (o = {
-					method: n.method,
-					count: 1,
-					formatedDetails: i,
-					target: n.target,
-					details: n.details
-				}, a.push(o));
+		let e = this.timelineTrack.scrollTop, t = this.timelineTrack.clientHeight, n = Math.floor(e / 26) - 5, r = Math.ceil((e + t) / 26) + 5;
+		n = Math.max(0, n), r = Math.min(this.flatList.length - 1, r);
+		let i = /* @__PURE__ */ new Map();
+		for (let [e, t] of this.activeBlocks.entries()) e < n || e > r ? (t.remove(), this.domPool.push(t)) : i.set(e, t);
+		this.activeBlocks = i;
+		for (let e = n; e <= r; e++) {
+			let t = this.activeBlocks.get(e);
+			t || (t = this.domPool.pop() || this.createBlock(), this.timelineContent.appendChild(t), this.activeBlocks.set(e, t));
+			let n = this.flatList[e], r = n.call;
+			t.style.top = e * 26 + "px", t.style.marginLeft = n.indent * 24 + "px", t.style.borderLeft = "4px solid " + this.getColorForMethod(r.method), t._groupId = n.groupId;
+			let i = t.querySelector(":scope > .info-icon");
+			i && i.remove(), t.titleSpan.textContent = "";
+			let a = document.createElement("span");
+			if (a.textContent = r.method, t.titleSpan.appendChild(a), r.details) {
+				let e = `### ${r.method}\n`;
+				for (let t in r.details) r.details[t] !== void 0 && (e += `**${t}**: ${r.details[t]}\n`);
+				let n = mn(t.titleSpan, e);
+				n.style.flexShrink = "0", n.style.marginLeft = "6px", n.style.display = "inline-flex", n.style.verticalAlign = "middle";
 			}
-			let s = 0, c = [{
-				element: this.timelineTrack,
-				isCollapsed: !1,
-				id: "",
-				beginCount: 0
-			}];
-			for (let e = 0; e < a.length; e++) {
-				let o = a[e], l = 0;
-				o.target && typeof o.target == "object" && (l = i.get(o.target) || 0, i.set(o.target, l + 1));
-				let u = this.getCallBlock(o, t++, l);
-				u.style.marginLeft = s * 24 + "px", u.style.borderLeft = "4px solid " + this.getColorForMethod(o.method);
-				let d = u.querySelector(":scope > .info-icon");
-				d && d.remove(), u.titleSpan.textContent = "";
-				let f = document.createElement("span");
-				if (f.textContent = o.method, u.titleSpan.appendChild(f), o.details) {
-					let e = `### ${o.method}\n`;
-					for (let t in o.details) o.details[t] !== void 0 && (e += `**${t}**: ${o.details[t]}\n`);
-					let t = fn(u.titleSpan, e);
-					t.style.flexShrink = "0", t.style.marginLeft = "6px", t.style.display = "inline-flex", t.style.verticalAlign = "middle";
+			let o = document.createElement("span"), s = r.formatedDetails ? r.formatedDetails : "";
+			r.count > 1 && (s += ` <span class="timeline-call-count">( ${r.count} )</span>`), s && (o.innerHTML = s, t.titleSpan.appendChild(o)), n.groupId ? (t.style.cursor = "pointer", t.arrow.style.display = "inline-block", t.arrow.textContent = n.isCollapsed ? "[ + ]" : "[ - ]") : (t.style.cursor = "default", t.arrow.style.display = "none");
+		}
+	}
+	renderTimelineTrack(e) {
+		if (!this.isRecording) {
+			if (this.flatList = [], !e || e.calls.length === 0) {
+				this.clearActiveBlocks(), this.timelineContent.innerHTML = "", this.timelineContent.style.height = "0px";
+				return;
+			}
+			if (this.collapsedGroups ||= /* @__PURE__ */ new Set(), this.isHierarchicalView) {
+				let t = [], n = null;
+				for (let r = 0; r < e.calls.length; r++) {
+					let i = e.calls[r], a = i.method.startsWith("begin") || i.method.startsWith("finish"), o = i.details ? this.formatDetails(i.details) : "";
+					n && n.method === i.method && n.formatedDetails === o && !a ? n.count++ : (n = {
+						method: i.method,
+						count: 1,
+						formatedDetails: o,
+						target: i.target,
+						details: i.details
+					}, t.push(n));
 				}
-				let p = document.createElement("span"), m = o.formatedDetails ? o.formatedDetails : "";
-				o.count > 1 && (m += ` <span style="opacity: 0.5">( ${o.count} )</span>`), m && (p.innerHTML = m, u.titleSpan.appendChild(p));
-				let h = c[c.length - 1];
-				if (h.isCollapsed || (n[r] !== u && this.timelineTrack.insertBefore(u, n[r]), r++), o.method.startsWith("begin")) {
-					let e = h.beginCount++, t = h.id + "/" + o.method + "-" + e, n = this.collapsedGroups.has(t);
-					u._groupId = t, u.style.cursor = "pointer", u.arrow.style.display = "inline-block", u.arrow.textContent = n ? "[ + ]" : "[ - ]", s++, c.push({
-						element: u,
-						isCollapsed: h.isCollapsed || n,
-						id: t,
+				let r = 0, i = [{
+					isCollapsed: !1,
+					id: "",
+					beginCount: 0
+				}], a = /* @__PURE__ */ new WeakMap();
+				for (let e = 0; e < t.length; e++) {
+					let n = t[e], o = 0;
+					n.target && typeof n.target == "object" && (o = a.get(n.target) || 0, a.set(n.target, o + 1));
+					let s = i[i.length - 1], c = null, l = !1;
+					if (n.method.startsWith("begin")) {
+						let e = s.beginCount++;
+						c = s.id + "/" + n.method + "-" + e, l = this.collapsedGroups.has(c);
+					}
+					s.isCollapsed || this.flatList.push({
+						call: n,
+						indent: r,
+						groupId: c,
+						isCollapsed: l,
+						instanceIndex: o
+					}), n.method.startsWith("begin") ? (r++, i.push({
+						isCollapsed: s.isCollapsed || l,
+						id: c,
 						beginCount: 0
+					})) : n.method.startsWith("finish") && (r = Math.max(0, r - 1), i.pop());
+				}
+			} else {
+				let t = {};
+				for (let n = 0; n < e.calls.length; n++) {
+					let r = e.calls[n].method;
+					r.startsWith("finish") || (t[r] = (t[r] || 0) + 1);
+				}
+				let n = Object.keys(t).map((e) => ({
+					method: e,
+					count: t[e]
+				}));
+				n.sort((e, t) => t.count - e.count);
+				for (let e = 0; e < n.length; e++) {
+					let t = n[e];
+					this.flatList.push({
+						call: t,
+						indent: 0,
+						groupId: null,
+						isCollapsed: !1,
+						instanceIndex: 0
 					});
-				} else o.method.startsWith("finish") && (s = Math.max(0, s - 1), c.pop());
-			}
-		} else {
-			let i = {};
-			for (let t = 0; t < e.calls.length; t++) {
-				let n = e.calls[t].method;
-				n.startsWith("finish") || (i[n] = (i[n] || 0) + 1);
-			}
-			let a = Object.keys(i).map((e) => ({
-				method: e,
-				count: i[e]
-			}));
-			a.sort((e, t) => t.count - e.count);
-			for (let e = 0; e < a.length; e++) {
-				let i = a[e], o = this.getCallBlock(i, t++);
-				o.style.marginLeft = "0px", o.style.borderLeft = "4px solid " + this.getColorForMethod(i.method);
-				let s = o.querySelector(".info-icon");
-				s && s.remove(), o.titleSpan.innerHTML = i.method + (i.count > 1 ? ` <span style="opacity: 0.5">( ${i.count} )</span>` : ""), n[r] !== o && this.timelineTrack.insertBefore(o, n[r]), r++;
+				}
 			}
+			this.timelineContent.style.height = this.flatList.length * 26 + "px", this.updateVisibleBlocks();
 		}
-		for (; this.timelineTrack.children.length > r;) this.timelineTrack.removeChild(this.timelineTrack.lastChild);
 	}
 	getColorForMethod(e) {
 		return e.startsWith("begin") ? "var(--color-green)" : e.startsWith("finish") || e.startsWith("destroy") ? "var(--color-red)" : e.startsWith("draw") || e.startsWith("compute") || e.startsWith("create") || e.startsWith("generate") ? "var(--color-yellow)" : "var(--text-secondary)";
 	}
-}, Ln = class extends rn {
-	constructor() {
+}, Hn = class extends on {
+	constructor(e = {}) {
 		super();
-		let e = new sn(this);
-		e.addEventListener("resize", (e) => this.dispatchEvent(e));
-		let t = new wn({
+		let { nonce: t = null } = e;
+		this.nonce = t;
+		let n = new ln(this, e);
+		n.addEventListener("resize", (e) => this.dispatchEvent(e)), n.addEventListener("orientationchange", (e) => this.dispatchEvent(e)), n.addEventListener("layoutchange", (e) => this.dispatchEvent(e));
+		let r = new En({
 			builtin: !0,
 			icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" /><path d=\"M4 6l8 0\" /><path d=\"M16 6l4 0\" /><path d=\"M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" /><path d=\"M4 12l2 0\" /><path d=\"M10 12l10 0\" /><path d=\"M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" /><path d=\"M4 18l11 0\" /><path d=\"M19 18l1 0\" /></svg>"
 		});
-		t.hide(), e.addTab(t);
-		let n = new Nn();
-		n.hide(), e.addTab(n);
-		let r = new pn();
-		e.addTab(r);
-		let i = new mn();
-		e.addTab(i);
-		let a = new In();
-		e.addTab(a);
-		let o = new hn();
-		e.addTab(o);
-		let s = new An();
-		e.addTab(s), e.loadLayout(), e.activeTabId || e.setActiveTab(r.id), this.statsData = /* @__PURE__ */ new Map(), this.profiler = e, this.performance = r, this.memory = i, this.console = o, this.parameters = t, this.viewer = n, this.timeline = a, this.settings = s, this.once = {}, this.extensionsData = /* @__PURE__ */ new WeakMap(), this.displayCycle = {
+		r.hide(), n.addTab(r);
+		let i = new Rn();
+		i.hide(), n.addTab(i);
+		let a = new hn();
+		n.addTab(a);
+		let o = new gn();
+		n.addTab(o);
+		let s = new Vn();
+		n.addTab(s);
+		let c = new _n();
+		n.addTab(c);
+		let l = new Mn();
+		n.addTab(l), n.loadLayout(), n.activeTabId || n.setActiveTab(a.id), this.statsData = /* @__PURE__ */ new Map(), this.profiler = n, this.performance = a, this.memory = o, this.console = c, this.parameters = r, this.viewer = i, this.timeline = s, this.settings = l, this.once = {}, this.extensionsData = /* @__PURE__ */ new WeakMap(), this.previousConsoleFunction = null, this._domObserver = null, this.displayCycle = {
 			text: {
 				needsUpdate: !1,
 				duration: .25,
@@ -2368,6 +2516,9 @@ var An = class extends wn {
 	get domElement() {
 		return this.profiler.domElement;
 	}
+	isVertical() {
+		return this.profiler ? this.profiler.isVertical() : !1;
+	}
 	onExtension(e, t) {
 		let n = (r) => {
 			r.name === e && (t(r.tab), this.settings.removeEventListener("extensionadded", n));
@@ -2380,17 +2531,29 @@ var An = class extends wn {
 	show() {
 		this.profiler.show();
 	}
+	setVisible(e) {
+		return this.domElement.style.display = e ? "" : "none", this;
+	}
+	getVisible() {
+		return this.domElement.style.display !== "none";
+	}
 	getSize() {
 		return this.profiler.getSize();
 	}
 	setActiveTab(e) {
 		return this.profiler.setActiveTab(e.id), this;
 	}
+	setHorizontalAlign(e) {
+		return this.profiler.setHorizontalAlign(e), this;
+	}
+	setVerticalAlign(e) {
+		return this.profiler.setVerticalAlign(e), this;
+	}
 	addTab(e) {
 		return this.profiler.addTab(e), this;
 	}
 	removeTab(e) {
-		return this.profiler.removeTab(e), this;
+		return e.dispose(), this.profiler.removeTab(e), this;
 	}
 	setActiveExtension(e, t) {
 		return this.settings.setActiveExtension(e, t), this;
@@ -2412,23 +2575,25 @@ var An = class extends wn {
 				break;
 		}
 	}
-	init() {
-		let e = this.getRenderer(), t = "THREE.WebGPURenderer: 185 [ \"";
-		if (e.backend.isWebGPUBackend ? t += "WebGPU" : e.backend.isWebGLBackend && (t += "WebGL2"), t += "\" ]", this.console.addMessage("info", t), e.inspector.domElement.parentElement === null) if (e.domElement.parentElement !== null) e.domElement.parentElement.appendChild(e.inspector.domElement);
-		else {
-			let t = new MutationObserver(() => {
-				e.domElement.parentElement !== null && (e.domElement.parentElement.appendChild(e.inspector.domElement), t.disconnect());
-			});
-			t.observe(document.body || document.documentElement, {
-				childList: !0,
-				subtree: !0
-			});
-		}
-	}
 	setRenderer(e) {
-		return super.setRenderer(e), e !== null && (h(this.resolveConsole.bind(this)), this.isAvailable && (e.init().then(() => {
-			e.backend.trackTimestamp = !0, e.hasFeature("timestamp-query") !== !0 && this.console.addMessage("error", "THREE.Inspector: GPU Timestamp Queries not available.");
-		}), this.timeline.setRenderer(e))), this;
+		if (super.setRenderer(e), e !== null) {
+			let t = h();
+			this.previousConsoleFunction = t, ae((e, n, ...r) => {
+				t && t(e, n, ...r), this.resolveConsole(e, n, ...r);
+			}), this.isAvailable && ((async () => {
+				e.hasInitialized() === !1 && await e.init(), e.backend.trackTimestamp = !0, e.hasFeature("timestamp-query") !== !0 && this.console.addMessage("error", "THREE.Inspector: GPU Timestamp Queries not available.");
+				let t = "THREE.WebGPURenderer: 186 [ \"";
+				e.backend.isWebGPUBackend ? t += "WebGPU" : e.backend.isWebGLBackend && (t += "WebGL2"), t += "\" ]", this.console.addMessage("info", t);
+				let n = this.domElement;
+				n.parentElement === null && (e.domElement.parentElement === null ? (this._domObserver !== null && this._domObserver.disconnect(), this._domObserver = new MutationObserver(() => {
+					e.domElement && e.domElement.parentElement !== null && (e.domElement.parentElement.appendChild(n), this._domObserver !== null && (this._domObserver.disconnect(), this._domObserver = null));
+				}), this._domObserver.observe(document.body || document.documentElement, {
+					childList: !0,
+					subtree: !0
+				})) : e.domElement.parentElement.appendChild(n));
+			})(), this.timeline.setRenderer(e));
+		} else this.previousConsoleFunction &&= (ae(this.previousConsoleFunction), void 0), this._domObserver !== null && (this._domObserver.disconnect(), this._domObserver = null), this.profiler.dispose(), this.statsData.clear(), super.dispose();
+		return this;
 	}
 	createParameters(e) {
 		return this.parameters.isVisible === !1 && this.parameters.show(), this.parameters.createGroup(e);
@@ -2465,7 +2630,7 @@ var An = class extends wn {
 		}
 	}
 	resolveFrame(e) {
-		let t = this.getFrameById(e.frameId + 1);
+		let t = this.getFrameById(e.frameId - 1);
 		if (t) {
 			e.cpu = 0, e.gpu = 0, e.total = 0;
 			for (let t of e.children) {
@@ -2473,48 +2638,51 @@ var An = class extends wn {
 				let n = this.getStatsData(t.cid);
 				e.cpu += n.cpu, e.gpu += n.gpu, e.total += n.total;
 			}
-			e.deltaTime = t.startTime - e.startTime, e.miscellaneous = e.deltaTime - e.total, e.miscellaneous < 0 && (e.miscellaneous = 0), this.updateCycle(this.displayCycle.text), this.updateCycle(this.displayCycle.graph), this.updateCycle(this.displayCycle.toggleGraph), this.displayCycle.text.needsUpdate && (K(this.profiler.toggleButton.querySelector(".fps-counter"), this.fps.toFixed()), this.performance.updateText(this, e), this.memory.updateText(this)), this.displayCycle.toggleGraph.needsUpdate && this.profiler.toggleGraph && (this.profiler.toggleGraph.addPoint("fps", this.fps), this.profiler.toggleGraph.update()), this.displayCycle.graph.needsUpdate && (this.performance.updateGraph(this, e), this.memory.updateGraph(this)), this.displayCycle.text.needsUpdate = !1, this.displayCycle.graph.needsUpdate = !1, this.displayCycle.toggleGraph.needsUpdate = !1;
+			e.deltaTime = e.startTime - t.startTime, e.miscellaneous = e.deltaTime - e.total, e.miscellaneous < 0 && (e.miscellaneous = 0), this.updateCycle(this.displayCycle.text), this.updateCycle(this.displayCycle.graph), this.updateCycle(this.displayCycle.toggleGraph), this.displayCycle.text.needsUpdate && (J(this.profiler.toggleButton.querySelector(".fps-counter"), this.fps.toFixed()), this.performance.updateText(this, e), this.memory.updateText(this)), this.displayCycle.toggleGraph.needsUpdate && this.profiler.toggleGraph && (this.profiler.toggleGraph.addPoint("fps", this.fps), this.profiler.toggleGraph.update()), this.displayCycle.graph.needsUpdate && (this.performance.updateGraph(this, e), this.memory.updateGraph(this)), this.displayCycle.text.needsUpdate = !1, this.displayCycle.graph.needsUpdate = !1, this.displayCycle.toggleGraph.needsUpdate = !1;
 		}
 	}
 	updateCycle(e) {
 		e.time += this.nodeFrame.deltaTime, e.time >= e.duration && (e.needsUpdate = !0, e.time = 0);
 	}
+	dispose() {
+		super.dispose(), this.setRenderer(null);
+	}
 };
-function Rn(e) {
+function Un(e) {
 	let t = JSON.parse(localStorage.getItem("threejs-inspector") || "{}");
-	return t.version !== "185" || t.settings && t.settings.storage === "url" && t.settings.url !== location.href ? (localStorage.removeItem("threejs-inspector"), {}) : t[e] || {};
+	return t.version !== "186" || t.settings && t.settings.storage === "url" && t.settings.url !== location.href ? (localStorage.removeItem("threejs-inspector"), {}) : t[e] || {};
 }
-function X(e, t) {
+function Wn(e, t) {
 	let n = JSON.parse(localStorage.getItem("threejs-inspector") || "{}");
-	t === null ? delete n[e] : n[e] = t, n.settings = n.settings || {}, n.settings.url = n.settings.url || location.href, n.settings.storage = n.settings.storage || "url", n.version = "185", localStorage.setItem("threejs-inspector", JSON.stringify(n));
+	t === null ? delete n[e] : n[e] = t, n.settings = n.settings || {}, n.settings.url = n.settings.url || location.href, n.settings.storage = n.settings.storage || "url", n.version = "186", localStorage.setItem("threejs-inspector", JSON.stringify(n));
 }
 //#endregion
 //#region ../../node_modules/three/examples/jsm/tsl/display/SSGINode.js
-var zn = /* @__PURE__ */ new Ae(), Bn = /* @__PURE__ */ new p(), Vn = [
+var Gn = /* @__PURE__ */ new ke(), Kn = /* @__PURE__ */ new d(), qn = [
 	60,
 	300,
 	180,
 	240,
 	120,
 	0
-], Hn = [
+], Jn = [
 	0,
 	.5,
 	.25,
 	.75
-], Un, Wn = class extends we {
+], Yn, Xn = class extends Ce {
 	static get type() {
 		return "SSGINode";
 	}
-	constructor(e, t, n, r) {
-		super("vec4"), this.beautyNode = e, this.depthNode = t, this.normalNode = n, this.updateBeforeType = jt.FRAME, this.sliceCount = A(1, "uint"), this.stepCount = A(12, "uint"), this.aoIntensity = A(1, "float"), this.giIntensity = A(10, "float"), this.radius = A(12, "float"), this.useScreenSpaceSampling = A(!0, "bool"), this.expFactor = A(2, "float"), this.thickness = A(1, "float"), this.useLinearThickness = A(!1, "bool"), this.backfaceLighting = A(0, "float"), this.useTemporalFiltering = !0, this._resolution = A(new p()), this._halfProjScale = A(1), this._temporalDirection = A(0), this._temporalOffset = A(0), this._cameraProjectionMatrix = A(r.projectionMatrix), this._cameraProjectionMatrixInverse = A(r.projectionMatrixInverse), this._cameraNear = Dt("near", "float", r), this._cameraFar = Dt("far", "float", r), this._camera = r, this._ssgiRenderTarget = new w(1, 1, {
+	constructor(e, n, r, i) {
+		super("vec4"), this.beautyNode = e, this.depthNode = n, this.normalNode = r, this.updateBeforeType = At.FRAME, this.sliceCount = P(1, "uint"), this.stepCount = P(12, "uint"), this.aoIntensity = P(1, "float"), this.giIntensity = P(10, "float"), this.radius = P(12, "float"), this.useScreenSpaceSampling = P(!0, "bool"), this.expFactor = P(2, "float"), this.thickness = P(1, "float"), this.useLinearThickness = P(!1, "bool"), this.backfaceLighting = P(0, "float"), this.useTemporalFiltering = !0, this._resolution = P(new d()), this._halfProjScale = P(1), this._temporalDirection = P(0), this._temporalOffset = P(0), this._cameraProjectionMatrix = P(i.projectionMatrix), this._cameraProjectionMatrixInverse = P(i.projectionMatrixInverse), this._cameraNear = bt("near", "float", i), this._cameraFar = bt("far", "float", i), this._camera = i, this._ssgiRenderTarget = new c(1, 1, {
 			depthBuffer: !1,
 			count: 2
 		});
-		let i = this._ssgiRenderTarget.textures[0];
-		i.name = "SSGI.AO", i.type = ae, i.format = re;
-		let a = this._ssgiRenderTarget.textures[1];
-		a.name = "SSGI.GI", a.type = x, a.format = oe, this._material = new O(), this._material.name = "SSGI", this._aoNode = Rt(this, this._ssgiRenderTarget.textures[0]), this._giNode = Rt(this, this._ssgiRenderTarget.textures[1]);
+		let a = this._ssgiRenderTarget.textures[0];
+		a.name = "SSGI.AO", a.type = y, a.format = t;
+		let o = this._ssgiRenderTarget.textures[1];
+		o.name = "SSGI.GI", o.type = ue, o.format = T, this._material = new k(), this._material.name = "SSGI", this._aoNode = Ct(this, this._ssgiRenderTarget.textures[0]), this._giNode = Ct(this, this._ssgiRenderTarget.textures[1]);
 	}
 	getAONode() {
 		return this._aoNode;
@@ -2523,34 +2691,34 @@ var zn = /* @__PURE__ */ new Ae(), Bn = /* @__PURE__ */ new p(), Vn = [
 		return this._giNode;
 	}
 	setSize(e, t) {
-		this._resolution.value.set(e, t), this._ssgiRenderTarget.setSize(e, t), this._halfProjScale.value = t / (Math.tan(this._camera.fov * ne.DEG2RAD * .5) * 2) * .5;
+		this._resolution.value.set(e, t), this._ssgiRenderTarget.setSize(e, t), this._halfProjScale.value = t / (Math.tan(this._camera.fov * b.DEG2RAD * .5) * 2) * .5;
 	}
 	updateBefore(e) {
 		let { renderer: t } = e;
-		Un = k.resetRendererState(t, Un);
-		let n = t.getDrawingBufferSize(Bn);
+		Yn = A.resetRendererState(t, Yn);
+		let n = t.getDrawingBufferSize(Kn);
 		if (this.setSize(n.width, n.height), this.useTemporalFiltering === !0) {
 			let t = e.frameId;
-			this._temporalDirection.value = Vn[t % 6] / 360, this._temporalOffset.value = Hn[t % 4];
+			this._temporalDirection.value = qn[t % 6] / 360, this._temporalOffset.value = Jn[t % 4];
 		} else this._temporalDirection.value = 1, this._temporalOffset.value = 1;
-		zn.material = this._material, zn.name = "SSGI", t.setClearColor(16777215, 1), t.setRenderTarget(this._ssgiRenderTarget), zn.render(t), k.restoreRendererState(t, Un);
+		Gn.material = this._material, Gn.name = "SSGI", t.setClearColor(16777215, 1), t.setRenderTarget(this._ssgiRenderTarget), Gn.render(t), A.restoreRendererState(t, Yn);
 	}
 	setup(e) {
 		let t = e.renderer;
 		t.backend.isWebGPUBackend === !0 && t.hasFeature("rg11b10ufloat-renderable") === !1 && console.error("THREE.SSGINode: The device does not support the \"rg11b10ufloat-renderable\" feature which is required for SSGI.");
-		let n = Xe(), r = R(32), i = R(0), a = (t) => {
+		let n = qe(), r = N(32), i = N(0), a = (t) => {
 			let n = this.depthNode.sample(t).r;
-			return e.renderer.logarithmicDepthBuffer === !0 ? nt(He(n, this._cameraNear, this._cameraFar), this._cameraNear, this._cameraFar) : n;
-		}, o = (e) => this.normalNode === null ? Pe(e, this.depthNode.value, this._cameraProjectionMatrixInverse) : this.normalNode.sample(e).rgb.normalize(), s = (e) => this.beautyNode.sample(e), c = B(([e]) => j(.25).mul(Ht(e.y, e.x).bitAnd(3))).setLayout({
+			return e.renderer.logarithmicDepthBuffer === !0 ? at(Jt(n, this._cameraNear, this._cameraFar), this._cameraNear, this._cameraFar) : n;
+		}, o = (e) => this.normalNode === null ? Ye(e, this.depthNode.value, this._cameraProjectionMatrixInverse) : this.normalNode.sample(e).rgb.normalize(), s = (e) => this.beautyNode.sample(e), c = V(([e]) => B(.25).mul(Le(e.y, e.x).bitAnd(3))).setLayout({
 			name: "spatialOffsets",
 			type: "float",
 			inputs: [{
 				name: "position",
 				type: "vec2"
 			}]
-		}), l = B(([e]) => {
-			let t = z(e).mul(j(-.156583)).add(Nt);
-			return t.mulAssign(dt(z(e).oneMinus())), M(e.x.greaterThanEqual(0).select(t.x, ft.sub(t.x)), e.y.greaterThanEqual(0).select(t.y, ft.sub(t.y)));
+		}), l = V(([e]) => {
+			let t = R(e).mul(B(-.156583)).add(Nt);
+			return t.mulAssign(Ie(R(e).oneMinus())), U(e.x.greaterThanEqual(0).select(t.x, H.sub(t.x)), e.y.greaterThanEqual(0).select(t.y, H.sub(t.y)));
 		}).setLayout({
 			name: "GTAOFastAcos",
 			type: "vec2",
@@ -2558,123 +2726,126 @@ var zn = /* @__PURE__ */ new Ae(), Bn = /* @__PURE__ */ new p(), Vn = [
 				name: "value",
 				type: "vec2"
 			}]
-		}), u = B(([e, t, n, c, u, d, f, p, m, h]) => {
-			let g = this.stepCount.toConst(), _ = this.expFactor.toConst(), v = this.thickness.toConst(), y = this.backfaceLighting.toConst(), b = e.select(M(1, -1), M(-1, 1)), ee = e.select(1, -1), te = N(0);
-			return ct({
-				start: R(0),
+		}), u = V(([e, t, n, c, u, d, f, p, m, h]) => {
+			let g = this.stepCount.toConst(), _ = this.expFactor.toConst(), v = this.thickness.toConst(), y = this.backfaceLighting.toConst(), b = e.select(U(1, -1), U(-1, 1)), ee = e.select(1, -1), x = j(0);
+			return dt({
+				start: N(0),
 				end: g,
 				type: "uint",
 				condition: "<"
 			}, ({ i: g }) => {
-				let x = lt(z(We(t, j(g).add(d)).div(n)), _).mul(n).toConst(), S = u.mul(I(x, j(g).add(1))).toConst(), C = f.add(S.mul(b)).toConst();
-				L(C.x.lessThanEqual(0).or(C.y.lessThanEqual(0)).or(C.x.greaterThanEqual(1)).or(C.y.greaterThanEqual(1)), () => {
+				let S = gt(R(st(t, B(g).add(d)).div(n)), _).mul(n).toConst(), C = u.mul(L(S, B(g).add(1))).toConst(), w = f.add(C.mul(b)).toConst();
+				z(w.x.lessThanEqual(0).or(w.y.lessThanEqual(0)).or(w.x.greaterThanEqual(1)).or(w.y.greaterThanEqual(1)), () => {
 					Lt();
 				});
-				let ne = wt(C, a(C), this._cameraProjectionMatrixInverse).toConst(), w = ne.sub(c).normalize().toConst(), re = this.useLinearThickness.select(ne.z.negate().div(this._cameraFar).clamp().mul(100), j(1)), ie = it(ne.sub(re.mul(p).mul(v)).sub(c)), T = M(V(w, p), V(ie, p));
-				T = l(xt(T, -1, 1)), T = xt(Ie(We(ee, T.negate()).sub(h.sub(Nt)), ft)), T = e.select(T.yx, T.xy);
-				let ae = T.x.toConst(), oe = T.y.toConst(), se = R(T.mul(j(r))).toConst(), ce = R(Ot(oe.sub(ae).mul(j(r)))).toConst(), E = ce.greaterThan(R(0)).select(R(bt(R(4294967295), R(32).sub(r).add(r.sub(ce)))), R(0)).toConst().shiftLeft(se);
-				E = E.bitAnd(i.bitNot()), i.assign(i.bitOr(E));
-				let le = Gt(E);
-				L(le.greaterThan(0), () => {
-					let e = s(C);
-					L(Ge(e).greaterThan(.001), () => {
-						let t = it(w), n = xt(V(m, t));
-						L(n.greaterThan(.001), () => {
-							let i = o(C), a = V(i, t.negate()), s = st(a).lessThan(0).select(z(a).mul(y), z(a));
-							a = y.greaterThan(0).and(V(i, p).greaterThan(0)).select(s, xt(a)), te.rgb.addAssign(j(le).div(j(r)).mul(e).mul(n).mul(a));
+				let te = Ze(w, a(w), this._cameraProjectionMatrixInverse).toConst(), T = te.sub(c).normalize().toConst(), ne = this.useLinearThickness.select(te.z.negate().div(this._cameraFar).clamp().mul(100), B(1)), re = $e(te.sub(ne.mul(p).mul(v)).sub(c)), E = U(M(T, p), M(re, p));
+				E = l(lt(E, -1, 1)), E = lt(Re(st(ee, E.negate()).sub(h.sub(Nt)), H)), E = e.select(E.yx, E.xy);
+				let ie = E.x.toConst(), ae = E.y.toConst(), oe = N(E.mul(B(r))).toConst(), se = N(xt(ae.sub(ie).mul(B(r)))).toConst(), ce = se.greaterThan(N(0)).select(N(qt(N(4294967295), N(32).sub(r).add(r.sub(se)))), N(0)).toConst().shiftLeft(oe);
+				ce = ce.bitAnd(i.bitNot()), i.assign(i.bitOr(ce));
+				let le = tt(ce);
+				z(le.greaterThan(0), () => {
+					let e = s(w);
+					z(Pe(e).greaterThan(.001), () => {
+						let t = $e(T), n = lt(M(m, t));
+						z(n.greaterThan(.001), () => {
+							let i = o(w), a = M(i, t.negate()), s = mt(a).lessThan(0).select(R(a).mul(y), R(a));
+							a = y.greaterThan(0).and(M(i, p).greaterThan(0)).select(s, lt(a)), x.rgb.addAssign(B(le).div(B(r)).mul(e).mul(n).mul(a));
 						});
 					});
 				});
-			}), te;
-		}), d = It("float"), f = It("vec3"), p = Ze(d, f), m = B(() => {
+			}), x;
+		}), d = zt("float"), f = zt("vec3"), p = Rt(d, f), m = V(() => {
 			let e = a(n).toVar();
 			e.greaterThanEqual(1).discard();
-			let t = wt(n, e, this._cameraProjectionMatrixInverse).toVar(), s = o(n).toVar(), l = it(t.xyz.negate()).toVar(), p = c(kt), m = Ye(kt), h = this._temporalDirection.mul(.02), g = Et(p.add(this._temporalOffset)).add(pt(n.add(h).mul(2).sub(1))), _ = j(0), v = N(0), y = this.sliceCount.toConst(), b = this.stepCount.toConst(), ee = this.aoIntensity.toConst(), te = this.giIntensity.toConst(), x = this.radius.toConst(), S = j(0).toVar();
-			L(this.useScreenSpaceSampling, () => {
-				S.assign(x.mul(this._resolution.x.div(2)).div(j(16)));
+			let t = Ze(n, e, this._cameraProjectionMatrixInverse).toVar(), s = o(n).toVar(), l = $e(t.xyz.negate()).toVar(), p = c(ut), m = Ke(ut), h = this._temporalDirection.mul(.02), g = Je(p.add(this._temporalOffset)).add(_t(n.add(h).mul(2).sub(1))), _ = B(0), v = j(0), y = this.sliceCount.toConst(), b = this.stepCount.toConst(), ee = this.aoIntensity.toConst(), x = this.giIntensity.toConst(), S = this.radius.toConst(), C = B(0).toVar();
+			z(this.useScreenSpaceSampling, () => {
+				C.assign(S.mul(this._resolution.x.div(2)).div(B(16)));
 			}).Else(() => {
-				S.assign(I(x.mul(this._halfProjScale).div(t.z.negate()), j(b)));
-			}), S.divAssign(j(b).add(1));
-			let C = I(1, j(b.sub(1))).mul(S).toConst();
-			ct({
-				start: R(0),
+				C.assign(L(S.mul(this._halfProjScale).div(t.z.negate()), B(b)));
+			}), C.divAssign(B(b).add(1));
+			let w = L(1, B(b.sub(1))).mul(C).toConst();
+			dt({
+				start: N(0),
 				end: y,
 				type: "uint",
 				condition: "<"
 			}, ({ i: e }) => {
-				let a = We(j(e).add(m).add(this._temporalDirection), ft.div(j(y))).toConst(), o = N(M(Bt(a), Vt(a)), 0).toConst(), c = o.xy.mul(j(1).div(this._resolution)).toConst(), d = it(ut(o, l)).toConst(), f = ut(l, d).toConst(), p = s.sub(d.mul(V(s, d))).toConst(), h = xt(V(it(p).toConst(), l), -1, 1).toConst(), b = st(V(p, f)).negate().mul(zt(h)).toConst();
-				i.assign(0), v.addAssign(u(_t(!0), S, C, t, c, g, n, l, s, b)), v.addAssign(u(_t(!1), S, C, t, c, g, n, l, s, b)), _.addAssign(j(Gt(i)).div(j(r)));
-			}), _.divAssign(j(y)), _.assign(lt(_.clamp().oneMinus(), ee).clamp()), v.divAssign(j(y)), v.mulAssign(te);
-			let ne = j(7).toConst(), w = Ge(v), re = w.greaterThan(ne).select(ne.div(w), j(1));
-			return v.mulAssign(re), d.assign(_), f.assign(v), P(0);
+				let a = st(B(e).add(m).add(this._temporalDirection), H.div(B(y))).toConst(), o = j(U(Wt(a), Gt(a)), 0).toConst(), c = o.xy.mul(B(1).div(this._resolution)).toConst(), d = $e(Fe(o, l)).toConst(), f = Fe(l, d).toConst(), p = s.sub(d.mul(M(s, d))).toConst(), h = lt(M($e(p).toConst(), l), -1, 1).toConst(), b = mt(M(p, f)).negate().mul(yt(h)).toConst();
+				i.assign(0), v.addAssign(u(Dt(!0), C, w, t, c, g, n, l, s, b)), v.addAssign(u(Dt(!1), C, w, t, c, g, n, l, s, b)), _.addAssign(B(tt(i)).div(B(r)));
+			}), _.divAssign(B(y)), _.assign(gt(_.clamp().oneMinus(), ee).clamp()), v.divAssign(B(y)), v.mulAssign(x);
+			let te = B(7).toConst(), T = Pe(v), ne = T.greaterThan(te).select(te.div(T), B(1));
+			return v.mulAssign(ne), d.assign(_), f.assign(v), I(0);
 		});
-		return this._material.colorNode = m().context(e.getSharedContext()), this._material.outputNode = p, this._material.needsUpdate = !0, this._aoNode;
+		return this._material.contextNode = Kt(e.getSharedContext()), this._material.colorNode = m(), this._material.outputNode = p, this._material.needsUpdate = !0, this._aoNode;
 	}
 	dispose() {
-		this._ssgiRenderTarget.dispose(), this._material.dispose();
+		super.dispose(), this._ssgiRenderTarget.dispose(), this._material.dispose();
 	}
-}, Gn = (e, t, n, r) => new Wn(ot(e), t, n, r), Kn = class extends we {
+}, Zn = (e, t, n, r) => new Xn(pt(e), t, n, r), Qn = class extends Ce {
 	static get type() {
 		return "DenoiseNode";
 	}
 	constructor(e, t, n, r) {
-		super("vec4"), this.textureNode = e, this.depthNode = t, this.normalNode = n, this.noiseNode = F(Jn()), this.lumaPhi = A(5), this.depthPhi = A(5), this.normalPhi = A(5), this.radius = A(5), this.index = A(0), this.updateBeforeType = jt.FRAME, this._resolution = A(new p()), this._sampleVectors = Tt(qn(16, 2, 1)), this._cameraProjectionMatrixInverse = A(r.projectionMatrixInverse);
+		super("vec4"), this.textureNode = e, this.depthNode = t, this.normalNode = n, this._noiseTexture = er(), this.noiseNode = F(this._noiseTexture), this.lumaPhi = P(5), this.depthPhi = P(5), this.normalPhi = P(5), this.radius = P(5), this.index = P(0), this.updateBeforeType = At.FRAME, this._resolution = P(new d()), this._sampleVectors = Qe($n(16, 2, 1)), this._cameraProjectionMatrixInverse = P(r.projectionMatrixInverse);
 	}
 	updateBefore() {
 		let e = this.textureNode.value;
 		this._resolution.value.set(e.image.width, e.image.height);
 	}
 	setup() {
-		let e = Xe(), t = (e) => this.textureNode.sample(e), n = (e) => this.depthNode.sample(e).x, r = (e) => this.normalNode === null ? Pe(e, this.depthNode.value, this._cameraProjectionMatrixInverse) : this.normalNode.sample(e).rgb.normalize(), i = (e) => this.noiseNode.sample(e), a = B(([e, i, a, o]) => {
-			let s = t(o).toVar(), c = n(o).toVar(), l = r(o).toVar(), u = s.rgb, d = wt(o, c, this._cameraProjectionMatrixInverse).toVar(), f = lt(I(V(i, l).toVar(), 0), this.normalPhi).toVar(), p = z(Ge(u).sub(Ge(e))).toVar(), m = I(j(1).sub(p.div(this.lumaPhi)), 0).toVar(), h = z(V(a.sub(d), i)).toVar(), g = I(j(1).sub(h.div(this.depthPhi)), 0), _ = m.mul(g).mul(f);
-			return P(u.mul(_), _);
-		}), o = B(([e]) => {
-			let o = n(e).toVar(), s = r(e).toVar(), c = t(e).toVar(), l = It("vec4");
-			return L(o.greaterThanEqual(1).or(V(s, s).equal(0)), () => {
+		let e = qe(), t = (e) => this.textureNode.sample(e), n = (e) => this.depthNode.sample(e).x, r = (e) => this.normalNode === null ? Ye(e, this.depthNode.value, this._cameraProjectionMatrixInverse) : this.normalNode.sample(e).rgb.normalize(), i = (e) => this.noiseNode.sample(e), a = V(([e, i, a, o]) => {
+			let s = t(o).toVar(), c = n(o).toVar(), l = r(o).toVar(), u = s.rgb, d = Ze(o, c, this._cameraProjectionMatrixInverse).toVar(), f = gt(L(M(i, l).toVar(), 0), this.normalPhi).toVar(), p = R(Pe(u).sub(Pe(e))).toVar(), m = L(B(1).sub(p.div(this.lumaPhi)), 0).toVar(), h = R(M(a.sub(d), i)).toVar(), g = L(B(1).sub(h.div(this.depthPhi)), 0), _ = m.mul(g).mul(f);
+			return I(u.mul(_), _);
+		}), o = V(([e]) => {
+			let o = n(e).toVar(), s = r(e).toVar(), c = t(e).toVar(), l = zt("vec4");
+			return z(o.greaterThanEqual(1).or(M(s, s).equal(0)), () => {
 				l.assign(c);
 			}).Else(() => {
-				let t = N(c.rgb), n = wt(e, o, this._cameraProjectionMatrixInverse).toConst(), r = Re(this.noiseNode, 0), u = M(e.x, e.y.oneMinus());
+				let t = j(c.rgb), n = Ze(e, o, this._cameraProjectionMatrixInverse).toConst(), r = Tt(this.noiseNode, 0), u = U(e.x, e.y.oneMinus());
 				u = u.mul(this._resolution.div(r));
-				let d = i(u).toVar(), f = M(Vt(d.element(this.index.mod(4).mul(2).mul(ft))), Bt(d.element(this.index.mod(4).mul(2).mul(ft)))), p = Qe(f.x, f.y.negate(), f.x, f.y), m = j(1).toVar(), h = N(c.rgb).toVar();
-				ct({
-					start: qe(0),
-					end: qe(16),
+				let d = i(u).toVar(), f = U(Gt(d.element(this.index.mod(4).mul(2).mul(H))), Wt(d.element(this.index.mod(4).mul(2).mul(H)))), p = it(f.x, f.y.negate(), f.x, f.y), m = B(1).toVar(), h = j(c.rgb).toVar();
+				dt({
+					start: Ue(0),
+					end: Ue(16),
 					type: "int",
 					condition: "<"
 				}, ({ i: r }) => {
-					let i = this._sampleVectors.element(r), o = p.mul(i.xy.mul(j(1).add(i.z.mul(this.radius.sub(1))))).div(this._resolution), c = a(t, s, n, e.add(o));
+					let i = this._sampleVectors.element(r), o = p.mul(i.xy.mul(B(1).add(i.z.mul(this.radius.sub(1))))).div(this._resolution), c = a(t, s, n, e.add(o));
 					h.addAssign(c.xyz), m.addAssign(c.w);
-				}), L(m.greaterThan(j(0)), () => {
+				}), z(m.greaterThan(B(0)), () => {
 					h.divAssign(m);
-				}), l.assign(P(h, c.a));
+				}), l.assign(I(h, c.a));
 			}), l;
 		});
-		return B(() => o(e))();
+		return V(() => o(e))();
+	}
+	dispose() {
+		super.dispose(), this._noiseTexture.dispose();
 	}
 };
-function qn(e, t, r) {
-	let i = [];
+function $n(e, t, n) {
+	let r = [];
 	for (let a = 0; a < e; a++) {
-		let o = 2 * Math.PI * t * a / e, s = (a / (e - 1)) ** r;
-		i.push(new n(Math.cos(o), Math.sin(o), s));
+		let o = 2 * Math.PI * t * a / e, s = (a / (e - 1)) ** n;
+		r.push(new i(Math.cos(o), Math.sin(o), s));
 	}
-	return i;
+	return r;
 }
-function Jn(e = 64) {
+function er(e = 64) {
 	let t = new he(), n = e * e * 4, r = new Uint8Array(n);
 	for (let n = 0; n < e; n++) for (let i = 0; i < e; i++) {
 		let a = n, o = i;
 		r[(n * e + i) * 4] = (t.noise(a, o) * .5 + .5) * 255, r[(n * e + i) * 4 + 1] = (t.noise(a + e, o) * .5 + .5) * 255, r[(n * e + i) * 4 + 2] = (t.noise(a, o + e) * .5 + .5) * 255, r[(n * e + i) * 4 + 3] = (t.noise(a + e, o + e) * .5 + .5) * 255;
 	}
-	let i = new g(r, e, e);
-	return i.wrapS = u, i.wrapT = u, i.needsUpdate = !0, i;
+	let i = new m(r, e, e);
+	return i.wrapS = l, i.wrapT = l, i.needsUpdate = !0, i;
 }
-var Yn = (e, t, n, r) => new Kn(ot(e), Mt(t), Mt(n), r), Xn = class e extends Qt {
+var tr = (e, t, n, r) => new Qn(pt(e), ot(t), ot(n), r), nr = class e extends en {
 	static {
 		this.passId = "SsgiRenderPass";
 	}
 	constructor(t) {
-		super(), this.passId = e.passId, this.sliceCount = A(t.sliceCount, "uint"), this.stepCount = A(t.stepCount, "uint"), this.radius = A(t.radius), this.expFactor = A(t.expFactor), this.thickness = A(t.thickness), this.backfaceLighting = A(t.backfaceLighting), this.aoIntensity = A(t.aoIntensity), this.giIntensity = A(t.giIntensity), this.useLinearThickness = A(t.useLinearThickness), this.useScreenSpaceSampling = A(t.useScreenSpaceSampling), this.giDenoiseRadius = A(t.giDenoiseRadius), this.aoDenoiseRadius = A(t.aoDenoiseRadius), this.useTemporalFiltering = t.useTemporalFiltering;
+		super(), this.passId = e.passId, this.sliceCount = P(t.sliceCount, "uint"), this.stepCount = P(t.stepCount, "uint"), this.radius = P(t.radius), this.expFactor = P(t.expFactor), this.thickness = P(t.thickness), this.backfaceLighting = P(t.backfaceLighting), this.aoIntensity = P(t.aoIntensity), this.giIntensity = P(t.giIntensity), this.useLinearThickness = P(t.useLinearThickness), this.useScreenSpaceSampling = P(t.useScreenSpaceSampling), this.giDenoiseRadius = P(t.giDenoiseRadius), this.aoDenoiseRadius = P(t.aoDenoiseRadius), this.useTemporalFiltering = t.useTemporalFiltering;
 	}
 	updatePerformanceParameters(e) {
 		this.sliceCount.value = e.sliceCount, this.stepCount.value = e.stepCount;
@@ -2684,29 +2855,108 @@ var Yn = (e, t, n, r) => new Kn(ot(e), Mt(t), Mt(n), r), Xn = class e extends Qt
 		n.add(this.sliceCount, "value", 1, 4, 1).name("slice count").onChange(() => t()), n.add(this.stepCount, "value", 1, 32, 1).name("step count").onChange(() => t()), n.add(this.radius, "value", 1, 25).name("radius").onChange(() => t()), n.add(this.expFactor, "value", 1, 3).name("exp factor").onChange(() => t()), n.add(this.thickness, "value", .01, 10).name("thickness").onChange(() => t()), n.add(this.backfaceLighting, "value", 0, 1).name("backface lighting").onChange(() => t()), n.add(this.aoIntensity, "value", 0, 4).name("AO intensity").onChange(() => t()), n.add(this.giIntensity, "value", 0, 100).name("GI intensity").onChange(() => t()), n.add(this.useLinearThickness, "value").name("use linear thickness").onChange(() => t()), n.add(this.useScreenSpaceSampling, "value").name("use screen-space sampling").onChange(() => t()), n.add(this.aoDenoiseRadius, "value", 0, 20).name("AO denoise radius").onChange(() => t()), n.add(this.giDenoiseRadius, "value", 0, 20).name("GI denoise radius").onChange(() => t());
 	}
 	assemble(e, t, n, r, i) {
-		if (!(r instanceof d) || this.sliceCount.value === 0 || this.stepCount.value === 0) return t;
-		let a = e.getTextureNode("output"), o = e.getTextureNode("diffuseColor"), s = e.getTextureNode("depth"), c = e.getTextureNode("normal"), l = vt((e) => Ke(c.sample(e))), u = Gn(a, s, l, r);
+		if (!(r instanceof E) || this.sliceCount.value === 0 || this.stepCount.value === 0) return t;
+		let a = e.getTextureNode("output"), o = e.getTextureNode("diffuseColor"), s = e.getTextureNode("depth"), c = e.getTextureNode("normal"), l = St((e) => Be(c.sample(e))), u = Zn(a, s, l, r);
 		u.sliceCount = this.sliceCount, u.stepCount = this.stepCount, u.radius = this.radius, u.expFactor = this.expFactor, u.thickness = this.thickness, u.backfaceLighting = this.backfaceLighting, u.aoIntensity = this.aoIntensity, u.giIntensity = this.giIntensity, u.useLinearThickness = this.useLinearThickness, u.useScreenSpaceSampling = this.useScreenSpaceSampling, u.useTemporalFiltering = this.useTemporalFiltering;
-		let f = u.getGINode(), p = u.getAONode(), m = Yn(f, s, l, r);
-		m.radius = this.giDenoiseRadius;
-		let h = Yn(p, s, l, r);
-		h.radius = this.aoDenoiseRadius;
-		let g = P(mt(a.rgb.mul(h.r), o.rgb.mul(m.rgb)), a.a);
-		return g.name = "Ssgi Composite", i === "ao only" ? P(N(p.r), 1) : i === "gi only" ? P(f.rgb, 1) : i === "denoised ao only" ? P(N(h.r), 1) : i === "denoised gi only" ? P(m.rgb, 1) : i === "direct lighting only" ? a : i === "without denoise" ? P(mt(a.rgb.mul(p.r), o.rgb.mul(f.rgb)), a.a) : g;
-	}
-}, Zn = /* @__PURE__ */ new Ae(), Qn = /* @__PURE__ */ new p(), $n, er = class extends we {
+		let d = u.getGINode(), f = u.getAONode(), p = tr(d, s, l, r);
+		p.radius = this.giDenoiseRadius;
+		let m = tr(f, s, l, r);
+		m.radius = this.aoDenoiseRadius;
+		let h = I(Mt(a.rgb.mul(m.r), o.rgb.mul(p.rgb)), a.a);
+		return h.name = "Ssgi Composite", i === "ao only" ? I(j(f.r), 1) : i === "gi only" ? I(d.rgb, 1) : i === "denoised ao only" ? I(j(m.r), 1) : i === "denoised gi only" ? I(p.rgb, 1) : i === "direct lighting only" ? a : i === "without denoise" ? I(Mt(a.rgb.mul(f.r), o.rgb.mul(d.rgb)), a.a) : h;
+	}
+}, rr = V(([e, t, n, r]) => {
+	let i = r.rgb.add(n.rgb).mul(.5).toConst(), a = r.rgb.sub(n.rgb).mul(.5).add(1e-7).toConst(), o = t.sub(I(i, e.a)).toConst(), s = o.xyz.div(a).toConst().abs().toConst(), c = L(s.x, s.y, s.z).toConst();
+	return c.greaterThan(1).select(I(i, e.a).add(o.div(c)), t);
+}).setLayout({
+	name: "clipAABB",
+	type: "vec4",
+	inputs: [
+		{
+			name: "currentColor",
+			type: "vec4"
+		},
+		{
+			name: "historyColor",
+			type: "vec4"
+		},
+		{
+			name: "minColor",
+			type: "vec4"
+		},
+		{
+			name: "maxColor",
+			type: "vec4"
+		}
+	]
+}), ir = V(([e, t, n]) => {
+	let r = e.mul(B(1).div(L(e.r, e.g, e.b).add(1))).toConst(), i = t.mul(B(1).div(L(t.r, t.g, t.b).add(1))).toConst(), a = Pe(r.rgb).toConst(), o = Pe(i.rgb).toConst(), s = n.div(a.add(1)).toConst(), c = n.oneMinus().div(o.add(1)).toConst();
+	return Mt(e.mul(s), t.mul(c)).div(L(s.add(c), 1e-5));
+}).setLayout({
+	name: "flickerReduction",
+	type: "vec4",
+	inputs: [
+		{
+			name: "currentColor",
+			type: "vec4"
+		},
+		{
+			name: "historyColor",
+			type: "vec4"
+		},
+		{
+			name: "currentWeight",
+			type: "float"
+		}
+	]
+}), ar = V(([e, t, n], r) => {
+	let i = B(2).toVar(), a = U(0).toVar(), o = B(-1).toVar();
+	for (let s = -1; s <= 1; ++s) for (let c = -1; c <= 1; ++c) {
+		let l = t.add(U(s, c)).toVar(), u = e.load(l).r;
+		r.renderer.reversedDepthBuffer && (u = u.oneMinus()), r.renderer.logarithmicDepthBuffer && (u = lr(u, n)), u = u.toVar(), z(u.lessThan(i), () => {
+			i.assign(u), a.assign(l);
+		}), z(u.greaterThan(o), () => {
+			o.assign(u);
+		});
+	}
+	return cr(i, a, o);
+}), or = V(([e, t, n, r, i, a, o], s) => {
+	let c = e.sample(t).r;
+	s.renderer.logarithmicDepthBuffer && (c = lr(c, a));
+	let l = Ze(t, c, n), u = r.mul(I(l, 1)).xyz, d = i.mul(I(u, 1)).z;
+	return o.isOrthographicCamera ? rt(d, a.x, a.y) : at(d, a.x, a.y);
+});
+function sr(e) {
+	return Array.from({ length: e }, (e, t) => [ur(t + 1, 2), ur(t + 1, 3)]);
+}
+var cr = ze({
+	closestDepth: "float",
+	closestPositionTexel: "vec2",
+	farthestDepth: "float"
+}), lr = (e, t) => {
+	let { x: n, y: r } = t;
+	return at(Jt(e, n, r), n, r);
+};
+function ur(e, t) {
+	let n = 1, r = 0;
+	for (; e > 0;) n /= t, r += e % t * n, e = Math.floor(e / t);
+	return r;
+}
+//#endregion
+//#region ../../node_modules/three/examples/jsm/tsl/display/TRAANode.js
+var dr = /* @__PURE__ */ new ke(), fr = /* @__PURE__ */ new d(), pr, mr = class extends Ce {
 	static get type() {
 		return "TRAANode";
 	}
 	constructor(e, t, n, r) {
-		super("vec4"), this.isTRAANode = !0, this.updateBeforeType = Ee.FRAME, this.beautyNode = e, this.depthNode = t, this.velocityNode = n, this.camera = r, this.depthThreshold = 5e-4, this.edgeDepthDiff = .001, this.maxVelocityLength = 128, this.useSubpixelCorrection = !0, this._jitterIndex = 0, this._invSize = A(new p()), this._historyRenderTarget = new w(1, 1, {
+		super("vec4"), this.isTRAANode = !0, this.updateBeforeType = Ee.FRAME, this.beautyNode = e, this.depthNode = t, this.velocityNode = n, this.camera = r, this.depthThreshold = 5e-4, this.edgeDepthDiff = .001, this.maxVelocityLength = 128, this.useSubpixelCorrection = !0, this._jitterIndex = 0, this._invSize = P(new d()), this._historyRenderTarget = new c(1, 1, {
 			depthBuffer: !1,
-			type: C,
+			type: ne,
 			depthTexture: new _()
-		}), this._historyRenderTarget.texture.name = "TRAANode.history", this._resolveRenderTarget = new w(1, 1, {
+		}), this._historyRenderTarget.texture.name = "TRAANode.history", this._resolveRenderTarget = new c(1, 1, {
 			depthBuffer: !1,
-			type: C
-		}), this._resolveRenderTarget.texture.name = "TRAANode.resolve", this._resolveMaterial = new O(), this._resolveMaterial.name = "TRAA.resolve", this._textureNode = Rt(this, this._resolveRenderTarget.texture), this._originalProjectionMatrix = new E(), this._cameraNearFar = A(new p()), this._cameraWorldMatrix = A(new E()), this._cameraWorldMatrixInverse = A(new E()), this._cameraProjectionMatrixInverse = A(new E()), this._previousCameraWorldMatrix = A(new E()), this._previousCameraProjectionMatrixInverse = A(new E()), this._previousDepthNode = F(new _(1, 1)), this._needsPostProcessingSync = !1, this._velocityNode = null;
+			type: ne
+		}), this._resolveRenderTarget.texture.name = "TRAANode.resolve", this._resolveMaterial = new k(), this._resolveMaterial.name = "TRAA.resolve", this._textureNode = Ct(this, this._resolveRenderTarget.texture), this._originalProjectionMatrix = new x(), this._cameraNearFar = P(new d()), this._cameraWorldMatrix = P(new x()), this._cameraWorldMatrixInverse = P(new x()), this._cameraProjectionMatrixInverse = P(new x()), this._previousCameraWorldMatrix = P(new x()), this._previousCameraProjectionMatrixInverse = P(new x()), this._previousDepthNode = F(new _(1, 1)), this._needsPostProcessingSync = !1, this._velocityNode = null;
 	}
 	getTextureNode() {
 		return this._textureNode;
@@ -2723,82 +2973,34 @@ var Yn = (e, t, n, r) => new Kn(ot(e), Mt(t), Mt(n), r), Xn = class e extends Qt
 			offsetY: 0,
 			width: e,
 			height: t
-		}, r = nr[this._jitterIndex];
+		}, r = hr[this._jitterIndex];
 		this.camera.setViewOffset(n.fullWidth, n.fullHeight, n.offsetX + r[0] - .5, n.offsetY + r[1] - .5, n.width, n.height);
 	}
 	clearViewOffset() {
-		this.camera.clearViewOffset(), this._velocityNode.setProjectionMatrix(null), this._jitterIndex++, this._jitterIndex %= nr.length - 1;
+		this.camera.clearViewOffset(), this._velocityNode.setProjectionMatrix(null), this._jitterIndex++, this._jitterIndex %= hr.length;
 	}
 	updateBefore(e) {
 		let { renderer: t } = e;
 		this._previousCameraWorldMatrix.value.copy(this._cameraWorldMatrix.value), this._previousCameraProjectionMatrixInverse.value.copy(this._cameraProjectionMatrixInverse.value), this._cameraNearFar.value.set(this.camera.near, this.camera.far), this._cameraWorldMatrix.value.copy(this.camera.matrixWorld), this._cameraWorldMatrixInverse.value.copy(this.camera.matrixWorldInverse), this._cameraProjectionMatrixInverse.value.copy(this.camera.projectionMatrixInverse);
 		let n = this.beautyNode.isRTTNode ? this.beautyNode.renderTarget : this.beautyNode.passNode.renderTarget, r = n.texture.width, i = n.texture.height;
-		this._needsPostProcessingSync === !0 && (this.setViewOffset(r, i), this._needsPostProcessingSync = !1), $n = k.resetRendererState(t, $n);
+		this._needsPostProcessingSync === !0 && (this.setViewOffset(r, i), this._needsPostProcessingSync = !1), pr = A.resetRendererState(t, pr);
 		let a = this._historyRenderTarget.width !== r || this._historyRenderTarget.height !== i;
-		this.setSize(r, i), a === !0 && (t.initRenderTarget(this._historyRenderTarget), t.initRenderTarget(this._resolveRenderTarget), t.copyTextureToTexture(n.texture, this._historyRenderTarget.texture)), t.setRenderTarget(this._resolveRenderTarget), Zn.material = this._resolveMaterial, Zn.name = "TRAA", Zn.render(t), t.setRenderTarget(null), t.copyTextureToTexture(this._resolveRenderTarget.texture, this._historyRenderTarget.texture);
-		let o = t.getDrawingBufferSize(Qn);
+		this.setSize(r, i), a === !0 && (t.initRenderTarget(this._historyRenderTarget), t.initRenderTarget(this._resolveRenderTarget), t.copyTextureToTexture(n.texture, this._historyRenderTarget.texture)), t.setRenderTarget(this._resolveRenderTarget), dr.material = this._resolveMaterial, dr.name = "TRAA", dr.render(t), t.setRenderTarget(null), t.copyTextureToTexture(this._resolveRenderTarget.texture, this._historyRenderTarget.texture);
+		let o = t.getDrawingBufferSize(fr);
 		if (this._historyRenderTarget.height === o.height && this._historyRenderTarget.width === o.width) {
 			let e = this.depthNode.value;
 			t.copyTextureToTexture(e, this._historyRenderTarget.depthTexture), this._previousDepthNode.value = this._historyRenderTarget.depthTexture;
 		}
-		k.restoreRendererState(t, $n);
+		A.restoreRendererState(t, pr);
 	}
 	setup(e) {
-		let t = e.context.renderPipeline;
-		t && (this._needsPostProcessingSync = !0, t.context.onBeforeRenderPipeline = () => {
-			let t = e.renderer.getDrawingBufferSize(Qn);
+		e.renderPipeline && !e.context.renderPipelineState.viewOffsetOwner && (e.context.renderPipelineState.viewOffsetOwner = this, this._needsPostProcessingSync = !0, ht(() => {
+			let t = e.renderer.getDrawingBufferSize(fr);
 			this.setViewOffset(t.width, t.height);
-		}, t.context.onAfterRenderPipeline = () => {
+		}), Ft(() => {
 			this.clearViewOffset();
-		}), e.renderer.reversedDepthBuffer === !0 && (this._historyRenderTarget.depthTexture.type = b), e.context.velocity === void 0 ? this._velocityNode = Kt : this._velocityNode = e.context.velocity;
-		let n = (e) => {
-			let { x: t, y: n } = this._cameraNearFar;
-			return nt(He(e, t, n), t, n);
-		}, r = Le({
-			closestDepth: "float",
-			closestPositionTexel: "vec2",
-			farthestDepth: "float"
-		}), i = B(([t]) => {
-			let i = j(2).toVar(), a = M(0).toVar(), o = j(-1).toVar();
-			for (let r = -1; r <= 1; ++r) for (let s = -1; s <= 1; ++s) {
-				let c = t.add(M(r, s)).toVar(), l = this.depthNode.load(c).r;
-				e.renderer.reversedDepthBuffer && (l = l.oneMinus()), e.renderer.logarithmicDepthBuffer && (l = n(l)), l = l.toVar(), L(l.lessThan(i), () => {
-					i.assign(l), a.assign(c);
-				}), L(l.greaterThan(o), () => {
-					o.assign(l);
-				});
-			}
-			return r(i, a, o);
-		}), a = (t) => {
-			let r = this._previousDepthNode.sample(t).r;
-			e.renderer.logarithmicDepthBuffer && (r = n(r));
-			let i = wt(t, r, this._previousCameraProjectionMatrixInverse), a = this._previousCameraWorldMatrix.mul(P(i, 1)).xyz, o = this._cameraWorldMatrixInverse.mul(P(a, 1)).z;
-			return this.camera.isOrthographicCamera ? Fe(o, this._cameraNearFar.x, this._cameraNearFar.y) : nt(o, this._cameraNearFar.x, this._cameraNearFar.y);
-		}, o = B(([e, t, n, r]) => {
-			let i = r.rgb.add(n.rgb).mul(.5), a = r.rgb.sub(n.rgb).mul(.5).add(1e-7), o = t.sub(P(i, e.a)), s = o.xyz.div(a).abs(), c = I(s.x, s.y, s.z);
-			return c.greaterThan(1).select(P(i, e.a).add(o.div(c)), t);
-		}).setLayout({
-			name: "clipAABB",
-			type: "vec4",
-			inputs: [
-				{
-					name: "currentColor",
-					type: "vec4"
-				},
-				{
-					name: "historyColor",
-					type: "vec4"
-				},
-				{
-					name: "minColor",
-					type: "vec4"
-				},
-				{
-					name: "maxColor",
-					type: "vec4"
-				}
-			]
-		}), s = B(([e, t, n, r]) => {
+		})), e.renderer.reversedDepthBuffer === !0 && (this._historyRenderTarget.depthTexture.type = S), e.context.velocity === void 0 ? this._velocityNode = He : this._velocityNode = e.context.velocity;
+		let t = V(([e, t, n, r]) => {
 			let i = [
 				[-1, -1],
 				[-1, 1],
@@ -2808,15 +3010,15 @@ var Yn = (e, t, n, r) => new Kn(ot(e), Mt(t), Mt(n), r), Xn = class e extends Qt
 				[0, -1],
 				[0, 1],
 				[-1, 0]
-			], a = t.toVar(), s = t.pow2().toVar();
+			], a = t.toVar(), o = t.pow2().toVar();
 			for (let [t, n] of i) {
-				let r = this.beautyNode.offset(ze(t, n)).load(e).max(0);
-				a.addAssign(r), s.addAssign(r.pow2());
+				let r = this.beautyNode.offset(et(t, n)).load(e).max(0);
+				a.addAssign(r), o.addAssign(r.pow2());
 			}
-			let c = j(i.length + 1), l = a.div(c), u = s.div(c).sub(l.pow2()).max(0).sqrt().mul(r), d = l.sub(u), f = l.add(u);
-			return o(l.clamp(d, f), n, d, f);
-		}), c = B(([e, t]) => {
-			let n = e.mul(t).fract().abs(), r = I(n, n.oneMinus());
+			let s = B(i.length + 1), c = a.div(s), l = o.div(s).sub(c.pow2()).max(0).sqrt().mul(r), u = c.sub(l), d = c.add(l);
+			return rr(c.clamp(u, d), n, u, d);
+		}), n = V(([e, t]) => {
+			let n = e.mul(t).fract().abs(), r = L(n, n.oneMinus());
 			return r.x.mul(r.y).oneMinus().div(.75);
 		}).setLayout({
 			name: "subpixelCorrection",
@@ -2828,25 +3030,16 @@ var Yn = (e, t, n, r) => new Kn(ot(e), Mt(t), Mt(n), r), Xn = class e extends Qt
 				name: "textureSize",
 				type: "ivec2"
 			}]
-		}), l = B(([e, t, n]) => {
-			let r = n.oneMinus(), i = e.mul(j(1).div(I(e.r, e.g, e.b).add(1))), a = t.mul(j(1).div(I(t.r, t.g, t.b).add(1))), o = Ge(i.rgb), s = Ge(a.rgb);
-			return n.mulAssign(j(1).div(o.add(1))), r.mulAssign(j(1).div(s.add(1))), mt(e.mul(n), t.mul(r)).div(I(n.add(r), 1e-5)).toVar();
-		}), u = F(this._historyRenderTarget.texture), d = B(() => {
-			let e = Xe(), t = this.beautyNode.size(), n = e.mul(t), r = i(n), o = r.get("closestDepth"), d = r.get("closestPositionTexel"), f = r.get("farthestDepth"), p = this.velocityNode.load(d).xy.mul(M(.5, -.5)), m = e.sub(p), h = a(m), g = m.greaterThanEqual(0).all().and(m.lessThanEqual(1).all()), _ = f.sub(o).greaterThan(this.edgeDepthDiff), v = o.sub(h).greaterThan(this.depthThreshold), y = g.and(_.or(v.not())), b = this.beautyNode.sample(e), ee = u.sample(e.sub(p)), te = e.sub(m).mul(t).length().div(this.maxVelocityLength).saturate(), x = j(.05).toVar();
-			return this.useSubpixelCorrection && x.addAssign(c(p, t).mul(.25)), x.assign(y.select(x.add(te).saturate(), 1)), l(b, s(n, b, ee, tt(.5, 1, te.oneMinus().pow2())), x);
+		}), r = F(this._historyRenderTarget.texture), i = V(() => {
+			let e = qe(), i = this.beautyNode.size(), a = e.mul(i), o = ar(this.depthNode, a, this._cameraNearFar), s = o.get("closestDepth"), c = o.get("closestPositionTexel"), l = o.get("farthestDepth"), u = this.velocityNode.load(c).xy.mul(U(.5, -.5)), d = e.sub(u), f = or(this._previousDepthNode, d, this._previousCameraProjectionMatrixInverse, this._previousCameraWorldMatrix, this._cameraWorldMatrixInverse, this._cameraNearFar, this.camera), p = d.greaterThanEqual(0).all().and(d.lessThanEqual(1).all()), m = l.sub(s).greaterThan(this.edgeDepthDiff), h = s.sub(f).greaterThan(this.depthThreshold), g = p.and(m.or(h.not())), _ = this.beautyNode.sample(e), v = r.sample(d), y = e.sub(d).mul(i).length().div(this.maxVelocityLength).saturate(), b = B(.05).toVar();
+			return this.useSubpixelCorrection && b.addAssign(n(u, i).mul(.25)), b.assign(g.select(b.add(y).saturate(), 1)), ir(_, t(a, _, v, Ge(.5, 1, y.oneMinus().pow2())), b);
 		});
-		return this._resolveMaterial.colorNode = d(), this._textureNode;
+		return this._resolveMaterial.contextNode = Kt(e.getSharedContext()), this._resolveMaterial.colorNode = i(), this._textureNode;
 	}
 	dispose() {
-		this._historyRenderTarget.dispose(), this._resolveRenderTarget.dispose(), this._resolveMaterial.dispose();
+		super.dispose(), this._historyRenderTarget.dispose(), this._resolveRenderTarget.dispose(), this._resolveMaterial.dispose();
 	}
-};
-function tr(e, t) {
-	let n = 1, r = 0;
-	for (; e > 0;) n /= t, r += e % t * n, e = Math.floor(e / t);
-	return r;
-}
-var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(t + 1, 3)]), rr = (e, t, n, r) => new er(ot(e), t, n, r), ir = class e extends Qt {
+}, hr = /* @__PURE__ */ sr(32), gr = (e, t, n, r) => new mr(pt(e), t, n, r), _r = class e extends en {
 	constructor(...t) {
 		super(...t), this.passId = e.passId;
 	}
@@ -2854,107 +3047,107 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 		this.passId = "TraaRenderPass";
 	}
 	assemble(e, t, n, r, i) {
-		return r instanceof d ? rr(t, e.getTextureNode("depth"), e.getTextureNode("velocity"), r) : t;
+		return r instanceof E ? gr(t, e.getTextureNode("depth"), e.getTextureNode("velocity"), r) : t;
 	}
 	addParametersToGUI(e, t) {}
-}, Z = {
+}, Q = {
 	HIGHEST: "highest",
 	HIGHER: "higher",
 	HIGH: "high",
 	MEDIUM: "medium",
 	LOW: "low",
 	LOWEST: "lowest"
-}, Q = [
-	Z.HIGHEST,
-	Z.HIGHER,
-	Z.HIGH,
-	Z.MEDIUM,
-	Z.LOW,
-	Z.LOWEST
-], ar = Q[0], or = Q[Q.length - 1], sr = Z.HIGHEST, cr = new Map([
-	[Z.HIGHEST, {
+}, $ = [
+	Q.HIGHEST,
+	Q.HIGHER,
+	Q.HIGH,
+	Q.MEDIUM,
+	Q.LOW,
+	Q.LOWEST
+], vr = $[0], yr = $[$.length - 1], br = Q.HIGHEST, xr = new Map([
+	[Q.HIGHEST, {
 		maxPixelRatio: 1.5,
 		ssgiPerformanceParameters: {
 			sliceCount: 3,
 			stepCount: 16
 		}
 	}],
-	[Z.HIGHER, {
+	[Q.HIGHER, {
 		maxPixelRatio: 1.5,
 		ssgiPerformanceParameters: {
 			sliceCount: 2,
 			stepCount: 8
 		}
 	}],
-	[Z.HIGH, {
+	[Q.HIGH, {
 		maxPixelRatio: 1.5,
 		ssgiPerformanceParameters: {
 			sliceCount: 1,
 			stepCount: 12
 		}
 	}],
-	[Z.MEDIUM, {
+	[Q.MEDIUM, {
 		maxPixelRatio: 1.25,
 		ssgiPerformanceParameters: {
 			sliceCount: 1,
 			stepCount: 12
 		}
 	}],
-	[Z.LOW, {
+	[Q.LOW, {
 		maxPixelRatio: 1,
 		ssgiPerformanceParameters: {
 			sliceCount: 1,
 			stepCount: 8
 		}
 	}],
-	[Z.LOWEST, {
+	[Q.LOWEST, {
 		maxPixelRatio: 1,
 		ssgiPerformanceParameters: {
 			sliceCount: 0,
 			stepCount: 0
 		}
 	}]
-]), lr = [
+]), Sr = [
 	{
 		min: 70,
 		max: Infinity,
-		value: Z.HIGHEST
+		value: Q.HIGHEST
 	},
 	{
 		min: 55,
 		max: 69,
-		value: Z.HIGHER
+		value: Q.HIGHER
 	},
 	{
 		min: 40,
 		max: 54,
-		value: Z.HIGH
+		value: Q.HIGH
 	},
 	{
 		min: 30,
 		max: 39,
-		value: Z.MEDIUM
+		value: Q.MEDIUM
 	},
 	{
 		min: 20,
 		max: 29,
-		value: Z.LOW
+		value: Q.LOW
 	},
 	{
 		min: 0,
 		max: 19,
-		value: Z.LOWEST
+		value: Q.LOWEST
 	}
-], ur = (e) => lr.find((t) => e >= t.min && e <= t.max).value, dr = class {
+], Cr = (e) => Sr.find((t) => e >= t.min && e <= t.max).value, wr = class {
 	constructor(e) {
-		this.qualityLevel = sr, this.qualityMap = cr, this.fpsCounter = new xe(), this.applyQualityParametersCallback = e;
+		this.qualityLevel = br, this.qualityMap = xr, this.fpsCounter = new xe(), this.applyQualityParametersCallback = e;
 	}
 	getQualityLevel() {
 		return this.qualityLevel;
 	}
 	manageQualitySettings(e, t) {
 		this.fpsCounter.update();
-		let n = this.fpsCounter.getFps(), r = n > 0 && n < e && this.qualityLevel !== or, i = n > t && this.qualityLevel !== ar, a = r ? "decrement" : i ? "increment" : void 0;
+		let n = this.fpsCounter.getFps(), r = n > 0 && n < e && this.qualityLevel !== yr, i = n > t && this.qualityLevel !== vr, a = r ? "decrement" : i ? "increment" : void 0;
 		if (a === void 0) {
 			this.qualityChangePendingSince = void 0, this.qualityChangePendingDirection = void 0;
 			return;
@@ -2967,25 +3160,25 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 		o - this.qualityChangePendingSince < 800 || (a === "decrement" ? this.decrementQualityLevel() : this.incrementQualityLevel(), console.log(`fps at ${n}, setting quality level to ${this.qualityLevel}`), this.qualityChangePendingSince = void 0, this.qualityChangePendingDirection = void 0, this.fpsCounter.reset());
 	}
 	incrementQualityLevel() {
-		let e = Q.indexOf(this.qualityLevel);
+		let e = $.indexOf(this.qualityLevel);
 		this.setQualityLevelByOrderIndex(e - 1);
 	}
 	decrementQualityLevel() {
-		let e = Q.indexOf(this.qualityLevel);
+		let e = $.indexOf(this.qualityLevel);
 		this.setQualityLevelByOrderIndex(e + 1);
 	}
 	setQualityLevel(e) {
 		this.qualityLevel !== e && (this.qualityLevel = e, this.applyCurrentQualityLevel());
 	}
 	addGUI(e, t) {
-		let n = e.createParameters("Quality Settings"), r = Object.fromEntries(Q.map((e) => [e, e])), i = { qualityLevel: this.qualityLevel };
+		let n = e.createParameters("Quality Settings"), r = Object.fromEntries($.map((e) => [e, e])), i = { qualityLevel: this.qualityLevel };
 		n.add(i, "qualityLevel", r).onChange((e) => {
 			this.setQualityLevel(e), t();
 		});
 	}
 	setQualityLevelByOrderIndex(e) {
-		let t = Math.min(Math.max(e, 0), Q.length - 1);
-		this.setQualityLevel(Q[t]);
+		let t = Math.min(Math.max(e, 0), $.length - 1);
+		this.setQualityLevel($[t]);
 	}
 	applyCurrentQualityLevel(e = 6) {
 		let t = this.qualityMap.get(this.qualityLevel);
@@ -2994,40 +3187,40 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 	async autoDetectInitialQualityLevel() {
 		let { getGPUTier: e } = await import("./dist-BZTF7IJN.mjs"), t = await e({ benchmarksURL: "./benchmarks" });
 		if (!t || !t.fps) {
-			console.info("Could not autodetect performance - no benchmark for graphics hardware. Defaulting to HIGHEST"), this.qualityLevel = sr;
+			console.info("Could not autodetect performance - no benchmark for graphics hardware. Defaulting to HIGHEST"), this.qualityLevel = br;
 			return;
 		}
-		this.qualityLevel = ur(t.fps), console.info(`The initial quality setting has been set to ${this.qualityLevel} based on a benchmark performance of ${t.fps}fps of the graphics hardware.`);
+		this.qualityLevel = Cr(t.fps), console.info(`The initial quality setting has been set to ${this.qualityLevel} based on a benchmark performance of ${t.fps}fps of the graphics hardware.`);
 	}
-}, fr = class e extends Qt {
+}, Tr = class e extends en {
 	static {
 		this.passId = "FogRenderPass";
 	}
 	constructor(t) {
-		super(), this.passId = e.passId, this.sceneWithFog = void 0, this.transparentObjectsDepthPass = void 0, this.fogColor = A(new de(t.color)), this.fogNearBlend = A(t.nearBlend), this.fogFarBlend = A(t.farBlend), this.depthOverrideMaterial = new T({ side: 2 });
+		super(), this.passId = e.passId, this.sceneWithFog = void 0, this.transparentObjectsDepthPass = void 0, this.fogColor = P(new D(t.color)), this.fogNearBlend = P(t.nearBlend), this.fogFarBlend = P(t.farBlend), this.depthOverrideMaterial = new le({ side: 2 });
 	}
 	assemble(e, t, n, r, i) {
-		if (!(r instanceof d) || i === "no fog" || i === "depth") return this.removeSceneFog(), t;
-		let a = e.getTextureNode("depth"), o = this.getTransparentObjectsDepthPassTexture(n, r), s = Ve(a.r, o.r), c = A(r.projectionMatrixInverse), l = A(r.matrixWorld), u = Ve(A(r.far).onRenderUpdate(() => r.far), 50).sub(this.fogFarBlend), f = u.sub(this.fogNearBlend), p = P(St.x.mul(2).sub(1), St.y.mul(2).sub(1), s, 1), m = c.mul(p), h = m.xyz.div(m.w), g = l.mul(P(h, 1)).xyz.xz.length(), _ = u.sub(g).div(u.sub(f)).clamp(0, 1);
-		return this.addSceneFog(n, f, u), tt(P(this.fogColor, 1), t, _);
+		if (!(r instanceof E) || i === "no fog" || i === "depth") return this.removeSceneFog(), t;
+		let a = e.getTextureNode("depth"), o = this.getTransparentObjectsDepthPassTexture(n, r), s = Ve(a.r, o.r), c = P(r.projectionMatrixInverse), l = P(r.matrixWorld), u = Ve(P(r.far).onRenderUpdate(() => r.far), 50).sub(this.fogFarBlend), d = u.sub(this.fogNearBlend), f = I(Vt.x.mul(2).sub(1), Vt.y.mul(2).sub(1), s, 1), p = c.mul(f), m = p.xyz.div(p.w), h = l.mul(I(m, 1)).xyz.xz.length(), g = u.sub(h).div(u.sub(d)).clamp(0, 1);
+		return this.addSceneFog(n, d, u), Ge(I(this.fogColor, 1), t, g);
 	}
 	addSceneFog(e, t, n) {
-		let r = Ct.xz.length(), i = n.sub(r).div(n.sub(t)).clamp(0, 1).oneMinus();
-		e.fogNode = Je(this.fogColor, i), this.sceneWithFog = e;
+		let r = It.xz.length(), i = n.sub(r).div(n.sub(t)).clamp(0, 1).oneMinus();
+		e.fogNode = wt(this.fogColor, i), this.sceneWithFog = e;
 	}
 	getTransparentObjectsDepthPassTexture(e, t) {
-		return this.transparentObjectsDepthPass?.dispose(), this.transparentObjectsDepthPass = Ut(e, t), this.transparentObjectsDepthPass.opaque = !1, this.transparentObjectsDepthPass.overrideMaterial = this.depthOverrideMaterial, this.transparentObjectsDepthPass.getTextureNode("depth");
+		return this.transparentObjectsDepthPass?.dispose(), this.transparentObjectsDepthPass = Ht(e, t), this.transparentObjectsDepthPass.opaque = !1, this.transparentObjectsDepthPass.overrideMaterial = this.depthOverrideMaterial, this.transparentObjectsDepthPass.getTextureNode("depth");
 	}
 	removeSceneFog() {
 		this.sceneWithFog &&= (this.sceneWithFog.fogNode = null, void 0), this.transparentObjectsDepthPass?.dispose(), this.transparentObjectsDepthPass = void 0;
 	}
-	addParametersToGUI(e, n) {
-		let r = e.addFolder("Fog Settings");
-		r.add(this.fogNearBlend, "value", 0, 30, .1).name("near blend").onChange(() => n()), r.add(this.fogFarBlend, "value", 0, 30, .1).name("far blend").onChange(() => n()), r.addColor({ color: this.fogColor.value.getHex(t) }, "color").name("color").onChange((e) => {
-			this.fogColor.value.set(e), n();
+	addParametersToGUI(e, t) {
+		let n = e.addFolder("Fog Settings");
+		n.add(this.fogNearBlend, "value", 0, 30, .1).name("near blend").onChange(() => t()), n.add(this.fogFarBlend, "value", 0, 30, .1).name("far blend").onChange(() => t()), n.addColor({ color: this.fogColor.value.getHex(a) }, "color").name("color").onChange((e) => {
+			this.fogColor.value.set(e), t();
 		});
 	}
-}, pr = class e extends Qt {
+}, Er = class e extends en {
 	constructor(...t) {
 		super(...t), this.passId = e.passId;
 	}
@@ -3035,20 +3228,20 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 		this.passId = "DebugRenderPass";
 	}
 	assemble(e, t, n, r, i) {
-		return i === "depth" ? P(N(e.getTextureNode("depth").r), 1) : t;
+		return i === "depth" ? I(j(e.getTextureNode("depth").r), 1) : t;
 	}
 	addParametersToGUI(e, t) {}
-}, mr = {
-	[D.NONE]: 0,
-	[D.LINEAR]: 1,
-	[D.REINHARD]: 2,
-	[D.CINEON]: 3,
-	[D.ACES_FILMIC]: 4,
-	[D.AGX]: 6,
-	[D.NEUTRAL]: 7
-}, $ = class extends be {
+}, Dr = {
+	[O.NONE]: 0,
+	[O.LINEAR]: 1,
+	[O.REINHARD]: 2,
+	[O.CINEON]: 3,
+	[O.ACES_FILMIC]: 4,
+	[O.AGX]: 6,
+	[O.NEUTRAL]: 7
+}, Or = class extends be {
 	constructor(e, t, n, r, i = n) {
-		super(e, t), this.passNeedsReassembly = !0, this.debugMode = "off", this.renderPasses = /* @__PURE__ */ new Map(), this.guiParameterGroups = /* @__PURE__ */ new Map(), this.lastRenderCamera = void 0, this.qualityManager = new dr(this.applyQualityParameters.bind(this)), this.freezeFrames = 0, this.freezeRenderTarget = new w(), this.debugRenderPass = new pr(), this.renderPipeline = new De(t), this.applyToneMappingConfig(), this.enableDefaultRenderPasses(n, r, i), this._initData.webGpuConfig.autoDetectQualityLevel ? this.qualityManager.autoDetectInitialQualityLevel().then(() => this.qualityManager.applyCurrentQualityLevel(0)) : this.qualityManager.applyCurrentQualityLevel(0);
+		super(e, t), this.passNeedsReassembly = !0, this.debugMode = "off", this.renderPasses = /* @__PURE__ */ new Map(), this.guiParameterGroups = /* @__PURE__ */ new Map(), this.lastRenderCamera = void 0, this.qualityManager = new wr(this.applyQualityParameters.bind(this)), this.freezeFrames = 0, this.freezeRenderTarget = new c(), this.debugRenderPass = new Er(), this.renderPipeline = new Me(t), this.applyToneMappingConfig(), this.enableDefaultRenderPasses(n, r, i), this._initData.webGpuConfig.autoDetectQualityLevel ? this.qualityManager.autoDetectInitialQualityLevel().then(() => this.qualityManager.applyCurrentQualityLevel(0)) : this.qualityManager.applyCurrentQualityLevel(0);
 	}
 	enableDefaultRenderPasses(e, t, n) {
 		let r = this._initData.webGpuConfig.fog.enabled, i = this._initData.transparentBackground;
@@ -3092,15 +3285,15 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 		this.renderer.setRenderTarget(this.freezeRenderTarget), this.renderPipeline.render(), this.renderer.setRenderTarget(e);
 	}
 	updateCameraProjectionMatrix(e) {
-		(e instanceof i || e instanceof d) && e.updateProjectionMatrix();
+		(e instanceof r || e instanceof E) && e.updateProjectionMatrix();
 	}
 	assembleRenderPasses(e, t) {
-		let n = gt(e, t), r = n;
-		n.setMRT(Be({
-			output: at,
-			diffuseColor: $e,
-			normal: Ne(Ue),
-			velocity: Kt
+		let n = Pt(e, t), r = n;
+		n.setMRT(We({
+			output: vt,
+			diffuseColor: nt,
+			normal: kt(ct),
+			velocity: He
 		}));
 		for (let i of this.renderPasses.values()) r = i.assemble(n, r, e, t, this.debugMode);
 		return this.debugRenderPass.assemble(n, r, e, t, this.debugMode);
@@ -3113,7 +3306,7 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 		this.isConfiguratorMode && this._webGpuGroundShadowReflection.setReceiveShadow(e);
 	}
 	enableOutline(e, t) {
-		this.getOutlinePassOrUndefined() || this.addRenderPass(new $t({
+		this.getOutlinePassOrUndefined() || this.addRenderPass(new tn({
 			selectedObjects: [],
 			visibleEdgeColor: e,
 			hiddenEdgeColor: t,
@@ -3123,13 +3316,13 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 		}));
 	}
 	getOutlinePassOrUndefined() {
-		let e = this.renderPasses.get($t.passId);
-		if (e && e instanceof $t) return e;
+		let e = this.renderPasses.get(tn.passId);
+		if (e && e instanceof tn) return e;
 	}
 	enableSsgiPass(e) {
-		if (this.renderPasses.get(Xn.passId)) return;
+		if (this.renderPasses.get(nr.passId)) return;
 		let t = this._initData.webGpuConfig.ssgi;
-		this.addRenderPass(new Xn({
+		this.addRenderPass(new nr({
 			sliceCount: 2,
 			stepCount: 12,
 			radius: 8,
@@ -3146,20 +3339,20 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 		}));
 	}
 	enableTraaPass() {
-		this.renderPasses.get(ir.passId) || this.addRenderPass(new ir());
+		this.renderPasses.get(_r.passId) || this.addRenderPass(new _r());
 	}
 	enableFogPass() {
-		if (this.renderPasses.get(fr.passId)) return;
+		if (this.renderPasses.get(Tr.passId)) return;
 		let e = this._initData.webGpuConfig.fog;
-		this.addRenderPass(new fr({
+		this.addRenderPass(new Tr({
 			color: this._initData.colors.DEFAULT_BACKGROUND,
 			nearBlend: e.nearBlend,
 			farBlend: e.farBlend
 		}));
 	}
 	disableFogPass() {
-		let e = this.renderPasses.get(fr.passId);
-		!e || !(e instanceof fr) || (e.removeSceneFog(), this.renderPasses.delete(fr.passId));
+		let e = this.renderPasses.get(Tr.passId);
+		!e || !(e instanceof Tr) || (e.removeSceneFog(), this.renderPasses.delete(Tr.passId));
 	}
 	applyQualityParameters(e, t) {
 		this.freezeFrames = Math.max(t, this.freezeFrames);
@@ -3167,17 +3360,17 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 		this.renderer.setPixelRatio(Math.min(n, e.maxPixelRatio)), this.getSsgiPassOrUndefined()?.updatePerformanceParameters(e.ssgiPerformanceParameters), this.passNeedsReassembly = !0;
 	}
 	getSsgiPassOrUndefined() {
-		let e = this.renderPasses.get(Xn.passId);
-		if (e && e instanceof Xn) return e;
+		let e = this.renderPasses.get(nr.passId);
+		if (e && e instanceof nr) return e;
 	}
 	setShadingType(e) {
 		e !== ge.DEFAULT && console.error("RoomleWebGPURenderer.setShadingType is not implemented yet");
 	}
 	showGUI(e) {
-		if (this.renderer.inspector instanceof Ln) return;
+		if (this.renderer.inspector instanceof Hn) return;
 		let t = document.createElement("style");
 		t.innerText = ".profiler-toggle,\n  .profiler-mini-panel {\n    left: 15px;\n    right: auto !important;\n  }", document.head.appendChild(t);
-		let n = new Ln();
+		let n = new Hn();
 		this.renderer.inspector = n, this._domHelper.element?.appendChild(n.domElement), this.addDebugGUI(n, e), this.qualityManager.addGUI(n, e);
 		let r = n.createParameters("Render Pass Settings");
 		for (let t of this.renderPasses.values()) t.addParametersToGUI(r, e);
@@ -3204,7 +3397,7 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 	}
 	applyToneMappingConfig() {
 		let { toneMapping: e, toneMappingExposure: t } = this._initData.webGpuConfig;
-		this.renderer.toneMapping = mr[e], this.renderer.toneMappingExposure = t;
+		this.renderer.toneMapping = Dr[e], this.renderer.toneMappingExposure = t;
 	}
 	addToneMappingSettings(e, t) {
 		let n = e.addFolder("Tone Mapping"), r = {
@@ -3227,7 +3420,7 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 	}
 	getOrCreateGUIParameters(e) {
 		let t = this.renderer.inspector;
-		if (t instanceof Ln) return this.guiParameterGroups.get(e) ?? this.createAndCacheGUIParameters(t, e);
+		if (t instanceof Hn) return this.guiParameterGroups.get(e) ?? this.createAndCacheGUIParameters(t, e);
 		throw Error("Inspector GUI is not initialized. Call showGUI() before creating parameter groups.");
 	}
 	createAndCacheGUIParameters(e, t) {
@@ -3235,8 +3428,8 @@ var nr = /* @__PURE__ */ Array.from({ length: 32 }, (e, t) => [tr(t + 1, 2), tr(
 		return this.guiParameterGroups.set(t, n), n;
 	}
 };
-ye([ve, _e("design:type", Object)], $.prototype, "_domHelper", void 0), ye([ve, _e("design:type", Object)], $.prototype, "_webGpuGroundShadowReflection", void 0), ye([ve, _e("design:type", Object)], $.prototype, "_webGpuSkyContainer", void 0), ye([ve, _e("design:type", Object)], $.prototype, "_skyStateTracker", void 0), ye([ve, _e("design:type", Object)], $.prototype, "_initData", void 0);
+ye([ve, _e("design:type", Object)], Or.prototype, "_domHelper", void 0), ye([ve, _e("design:type", Object)], Or.prototype, "_webGpuGroundShadowReflection", void 0), ye([ve, _e("design:type", Object)], Or.prototype, "_webGpuSkyContainer", void 0), ye([ve, _e("design:type", Object)], Or.prototype, "_skyStateTracker", void 0), ye([ve, _e("design:type", Object)], Or.prototype, "_initData", void 0);
 //#endregion
-export { $ as RoomleWebGPURenderer };
+export { Or as RoomleWebGPURenderer };
 
-//# sourceMappingURL=roomle-webgpu-renderer-BfZKcXSz.mjs.map
+//# sourceMappingURL=roomle-webgpu-renderer-BSvxbopA.mjs.map