@mirage-engine/core 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/mirage-engine.js +658 -633
  3. package/dist/mirage-engine.umd.js +15 -15
  4. package/dist/src/renderer/Renderer.d.ts +4 -0
  5. package/dist/src/store/TextureLifecycleManager.d.ts +2 -2
  6. package/dist/src/types/config.d.ts +9 -0
  7. package/package.json +3 -3
  8. package/src/core/Syncer.ts +3 -0
  9. package/src/renderer/Renderer.ts +61 -28
  10. package/src/store/TextureLifecycleManager.ts +26 -18
  11. package/src/types/config.ts +9 -0
package/dist/mirage-engine.js CHANGED
@@ -1,34 +1,34 @@
1
- var Be = Object.defineProperty, Oe = Object.defineProperties;
2
- var Fe = Object.getOwnPropertyDescriptors;
3
- var Ce = Object.getOwnPropertySymbols;
4
- var Xe = Object.prototype.hasOwnProperty, _e = Object.prototype.propertyIsEnumerable;
5
- var ge = (s, e, t) => e in s ? Be(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, G = (s, e) => {
1
+ var Oe = Object.defineProperty, Fe = Object.defineProperties;
2
+ var Xe = Object.getOwnPropertyDescriptors;
3
+ var Ee = Object.getOwnPropertySymbols;
4
+ var _e = Object.prototype.hasOwnProperty, Ne = Object.prototype.propertyIsEnumerable;
5
+ var ge = (s, e, t) => e in s ? Oe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, G = (s, e) => {
6
6
  for (var t in e || (e = {}))
7
- Xe.call(e, t) && ge(s, t, e[t]);
8
- if (Ce)
9
- for (var t of Ce(e))
10
- _e.call(e, t) && ge(s, t, e[t]);
7
+ _e.call(e, t) && ge(s, t, e[t]);
8
+ if (Ee)
9
+ for (var t of Ee(e))
10
+ Ne.call(e, t) && ge(s, t, e[t]);
11
11
  return s;
12
- }, pe = (s, e) => Oe(s, Fe(e));
13
- var u = (s, e, t) => (ge(s, typeof e != "symbol" ? e + "" : e, t), t);
14
- var we = (s, e, t) => new Promise((i, r) => {
15
- var l = (n) => {
12
+ }, pe = (s, e) => Fe(s, Xe(e));
13
+ var g = (s, e, t) => (ge(s, typeof e != "symbol" ? e + "" : e, t), t);
14
+ var Ce = (s, e, t) => new Promise((i, r) => {
15
+ var n = (a) => {
16
16
  try {
17
- a(t.next(n));
18
- } catch (c) {
19
- r(c);
17
+ c(t.next(a));
18
+ } catch (l) {
19
+ r(l);
20
20
  }
21
- }, o = (n) => {
21
+ }, o = (a) => {
22
22
  try {
23
- a(t.throw(n));
24
- } catch (c) {
25
- r(c);
23
+ c(t.throw(a));
24
+ } catch (l) {
25
+ r(l);
26
26
  }
27
- }, a = (n) => n.done ? i(n.value) : Promise.resolve(n.value).then(l, o);
28
- a((t = t.apply(s, e)).next());
27
+ }, c = (a) => a.done ? i(a.value) : Promise.resolve(a.value).then(n, o);
28
+ c((t = t.apply(s, e)).next());
29
29
  });
30
- import * as v from "three";
31
- const Me = {
30
+ import * as b from "three";
31
+ const De = {
32
32
  INCLUDE_TREE: "include-tree",
33
33
  EXCLUDE_TREE: "exclude-tree",
34
34
  INCLUDE_SELF: "include-self",
@@ -48,30 +48,30 @@ const Me = {
48
48
  CAPTURE_3: "3",
49
49
  CAPTURE_4: "4",
50
50
  CAPTURE_5: "5"
51
- }, O = {
51
+ }, F = {
52
52
  NAME: "data-mirage-travel",
53
53
  KEY: "mirageTravel",
54
54
  VALUES: Te,
55
55
  MAX_LAYERS: Object.keys(Te).length - 1
56
- }, Y = {
56
+ }, z = {
57
57
  NAME: "data-mirage-filter",
58
58
  KEY: "mirageFilter",
59
- VALUES: Me
60
- }, z = {
59
+ VALUES: De
60
+ }, V = {
61
61
  NAME: "data-mirage-select",
62
62
  KEY: "mirageSelect",
63
- VALUES: Me
64
- }, Ne = {
63
+ VALUES: De
64
+ }, ze = {
65
65
  NAME: "data-mirage-shader",
66
66
  KEY: "mirageShader"
67
- }, lt = {
67
+ }, ct = {
68
68
  NAME: "data-mirage-sandwich",
69
69
  KEY: "mirageSandwich",
70
70
  VALUES: {
71
71
  FRONT: "front"
72
72
  }
73
- }, he = 0, j = 1, ae = 2, Ye = 4, be = 8, ve = 16;
74
- function ze(s) {
73
+ }, he = 0, $ = 1, oe = 2, Ye = 4, ve = 8, be = 16;
74
+ function Ve(s) {
75
75
  const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
76
76
  return e ? {
77
77
  r: parseInt(e[1]) / 255,
@@ -79,10 +79,10 @@ function ze(s) {
79
79
  b: parseInt(e[3]) / 255
80
80
  } : { r: 1, g: 1, b: 1 };
81
81
  }
82
- function Pe(s) {
82
+ function We(s) {
83
83
  const e = {};
84
84
  if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor && s.backgroundColor !== "rgba(0, 0, 0, 0)") {
85
- const t = ze(s.backgroundColor);
85
+ const t = Ve(s.backgroundColor);
86
86
  e.backgroundColor = [t.r, t.g, t.b];
87
87
  }
88
88
  if (s.backgroundImage ? e.backgroundImage = s.backgroundImage : s.background && (e.backgroundImage = s.background), s.borderRadius && (e.borderRadius = parseFloat(s.borderRadius)), s.width && (e.width = parseFloat(s.width)), s.height && (e.height = parseFloat(s.height)), s.transform && s.transform !== "none") {
@@ -91,34 +91,34 @@ function Pe(s) {
91
91
  }
92
92
  return e;
93
93
  }
94
- class Ve {
94
+ class Pe {
95
95
  constructor(e, t) {
96
- u(this, "target");
97
- u(this, "observer");
98
- u(this, "pendingDeletions", /* @__PURE__ */ new Set());
99
- u(this, "pendingStyles", /* @__PURE__ */ new Map());
100
- u(this, "isDomDirty", !1);
101
- u(this, "isRunning", !1);
102
- u(this, "pendingMask", he);
103
- u(this, "mutationTimer", null);
104
- u(this, "cssTimer", null);
105
- u(this, "resizeConfig");
106
- u(this, "resizeTimer", null);
107
- u(this, "isResizing", !1);
108
- u(this, "lastScrollX", 0);
109
- u(this, "lastScrollY", 0);
110
- u(this, "scrollTimer", null);
111
- u(this, "onBeforeRender", /* @__PURE__ */ new Set());
112
- u(this, "onLayoutChange", /* @__PURE__ */ new Set());
113
- u(this, "onStyleChange", /* @__PURE__ */ new Set());
114
- u(this, "onScrollChange", /* @__PURE__ */ new Set());
115
- u(this, "onRender", /* @__PURE__ */ new Set());
116
- u(this, "onTransitionFinished", (e) => {
117
- this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= j | ae, this.cssTimer = window.setTimeout(() => {
96
+ g(this, "target");
97
+ g(this, "observer");
98
+ g(this, "pendingDeletions", /* @__PURE__ */ new Set());
99
+ g(this, "pendingStyles", /* @__PURE__ */ new Map());
100
+ g(this, "isDomDirty", !1);
101
+ g(this, "isRunning", !1);
102
+ g(this, "pendingMask", he);
103
+ g(this, "mutationTimer", null);
104
+ g(this, "cssTimer", null);
105
+ g(this, "resizeConfig");
106
+ g(this, "resizeTimer", null);
107
+ g(this, "isResizing", !1);
108
+ g(this, "lastScrollX", 0);
109
+ g(this, "lastScrollY", 0);
110
+ g(this, "scrollTimer", null);
111
+ g(this, "onBeforeRender", /* @__PURE__ */ new Set());
112
+ g(this, "onLayoutChange", /* @__PURE__ */ new Set());
113
+ g(this, "onStyleChange", /* @__PURE__ */ new Set());
114
+ g(this, "onScrollChange", /* @__PURE__ */ new Set());
115
+ g(this, "onRender", /* @__PURE__ */ new Set());
116
+ g(this, "onTransitionFinished", (e) => {
117
+ this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= $ | oe, this.cssTimer = window.setTimeout(() => {
118
118
  this.isDomDirty = !0, this.cssTimer = null;
119
119
  }, 50)));
120
120
  });
121
- u(this, "onWindowResize", () => {
121
+ g(this, "onWindowResize", () => {
122
122
  if (!this.resizeConfig.enabled) {
123
123
  this.isDomDirty = !0;
124
124
  return;
@@ -127,41 +127,41 @@ class Ve {
127
127
  this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
128
128
  }, this.resizeConfig.delay);
129
129
  });
130
- u(this, "renderLoop", () => {
130
+ g(this, "renderLoop", () => {
131
131
  if (!this.isRunning)
132
132
  return;
133
133
  this.onBeforeRender.forEach((i) => i()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((i) => i(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = he);
134
134
  const e = window.scrollX, t = window.scrollY;
135
135
  (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((i) => i(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
136
- this.pendingMask |= j, this.isDomDirty = !0, this.scrollTimer = null;
136
+ this.pendingMask |= $, this.isDomDirty = !0, this.scrollTimer = null;
137
137
  }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((i) => i(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((i) => i()), requestAnimationFrame(this.renderLoop);
138
138
  });
139
- var r, l;
139
+ var r, n;
140
140
  this.target = e;
141
141
  const i = (r = t.resizeDebounce) != null ? r : !0;
142
142
  i === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : i === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
143
143
  enabled: !0,
144
- delay: (l = i.delay) != null ? l : 150,
144
+ delay: (n = i.delay) != null ? n : 150,
145
145
  onStart: i.onStart,
146
146
  onEnd: i.onEnd
147
147
  }, this.observer = new MutationObserver((o) => {
148
- let a = he;
149
- for (const n of o)
150
- if (n.type === "childList")
151
- a |= be, n.removedNodes.length > 0 && n.removedNodes.forEach((c) => {
152
- c instanceof HTMLElement && this.pendingDeletions.add(c);
148
+ let c = he;
149
+ for (const a of o)
150
+ if (a.type === "childList")
151
+ c |= ve, a.removedNodes.length > 0 && a.removedNodes.forEach((l) => {
152
+ l instanceof HTMLElement && this.pendingDeletions.add(l);
153
153
  });
154
- else if (n.type === "attributes")
155
- if (n.attributeName === "style") {
156
- a |= j | ae;
157
- const c = n.target, h = Pe(c.style);
158
- this.pendingStyles.set(c, h);
154
+ else if (a.type === "attributes")
155
+ if (a.attributeName === "style") {
156
+ c |= $ | oe;
157
+ const l = a.target, d = We(l.style);
158
+ this.pendingStyles.set(l, d);
159
159
  } else
160
- (n.attributeName === "class" || n.attributeName && n.attributeName.startsWith("data-")) && (a |= j | ae);
160
+ (a.attributeName === "class" || a.attributeName && a.attributeName.startsWith("data-")) && (c |= $ | oe);
161
161
  else
162
- n.type === "characterData" && (a |= ve | j);
163
- if (a !== he) {
164
- if (this.pendingMask |= a, a & be) {
162
+ a.type === "characterData" && (c |= be | $);
163
+ if (c !== he) {
164
+ if (this.pendingMask |= c, c & ve) {
165
165
  this.clearTimers(), this.isDomDirty = !0;
166
166
  return;
167
167
  }
@@ -186,13 +186,13 @@ class Ve {
186
186
  this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
187
187
  }
188
188
  }
189
- const P = 1, Z = 2, ct = 0, A = {
189
+ const W = 1, j = 2, lt = 0, I = {
190
190
  BASE: 0,
191
191
  SELECTED: 1,
192
192
  getCaptureLayer: (s) => 31 - s,
193
193
  HIDDEN: 31
194
- }, Se = Object.values(Y.VALUES);
195
- class De {
194
+ }, Se = Object.values(z.VALUES);
195
+ class Ae {
196
196
  /**
197
197
  * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
198
198
  * @param font CSS font shorthand string (e.g., "400 16px Inter")
@@ -209,145 +209,145 @@ class De {
209
209
  return 0;
210
210
  const t = document.createElement("div"), i = document.createElement("span"), r = document.createElement("img");
211
211
  t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", i.style.margin = "0", i.style.padding = "0", i.style.border = "none", i.style.lineHeight = "normal", r.width = 1, r.height = 1, r.style.verticalAlign = "baseline", i.appendChild(document.createTextNode("Hidden Text")), t.appendChild(i), t.appendChild(r), document.body.appendChild(t);
212
- const l = r.offsetTop - i.offsetTop;
213
- return document.body.removeChild(t), l;
212
+ const n = r.offsetTop - i.offsetTop;
213
+ return document.body.removeChild(t), n;
214
214
  }
215
215
  }
216
- u(De, "cache", /* @__PURE__ */ new Map());
217
- class We extends v.MeshBasicMaterial {
218
- constructor(t, i, r, l, o = 2) {
216
+ g(Ae, "cache", /* @__PURE__ */ new Map());
217
+ class He extends b.MeshBasicMaterial {
218
+ constructor(t, i, r, n, o = 2) {
219
219
  super({
220
220
  transparent: !0,
221
- side: v.FrontSide,
221
+ side: b.FrontSide,
222
222
  color: 16777215
223
223
  });
224
- u(this, "canvas");
225
- u(this, "ctx");
226
- u(this, "qualityFactor");
224
+ g(this, "canvas");
225
+ g(this, "ctx");
226
+ g(this, "qualityFactor");
227
227
  if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
228
228
  throw new Error("[Mirage] Failed to create canvas context");
229
- this.qualityFactor = o, this.map = new v.CanvasTexture(this.canvas), this.map.colorSpace = v.LinearSRGBColorSpace, this.map.minFilter = v.LinearFilter, this.map.magFilter = v.LinearFilter, this.updateText(t, i, r, l);
229
+ this.qualityFactor = o, this.map = new b.CanvasTexture(this.canvas), this.map.colorSpace = b.LinearSRGBColorSpace, this.map.minFilter = b.LinearFilter, this.map.magFilter = b.LinearFilter, this.updateText(t, i, r, n);
230
230
  }
231
231
  wrapText(t, i) {
232
232
  const r = t.split(`
233
- `), l = [];
233
+ `), n = [];
234
234
  return r.forEach((o) => {
235
- const a = o.match(/[^\s\-]+\-?|\-|\s+/g) || [];
236
- if (a.length === 0) {
237
- l.push("");
235
+ const c = o.match(/[^\s\-]+\-?|\-|\s+/g) || [];
236
+ if (c.length === 0) {
237
+ n.push("");
238
238
  return;
239
239
  }
240
- let n = a[0];
241
- for (let c = 1; c < a.length; c++) {
242
- const h = a[c];
243
- this.ctx.measureText(n + h).width <= i + 2 ? n += h : (n && l.push(n), n = h.trimStart());
240
+ let a = c[0];
241
+ for (let l = 1; l < c.length; l++) {
242
+ const d = c[l];
243
+ this.ctx.measureText(a + d).width <= i + 2 ? a += d : (a && n.push(a), a = d.trimStart());
244
244
  }
245
- n && l.push(n);
246
- }), l;
245
+ a && n.push(a);
246
+ }), n;
247
247
  }
248
- updateText(t, i, r, l, o) {
248
+ updateText(t, i, r, n, o) {
249
249
  o !== void 0 && (this.qualityFactor = o);
250
- const n = (window.devicePixelRatio || 1) * this.qualityFactor, c = r * n, h = l * n;
251
- this.canvas.width !== c || this.canvas.height !== h ? (this.canvas.width = c, this.canvas.height = h) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(n, 0, 0, n, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
252
- const f = this.wrapText(t, r), b = i.lineHeight, p = De.getBaseline(i.font);
253
- f.forEach((d, g) => {
254
- const w = g * b + p;
255
- let L = 0;
256
- i.textAlign === "center" ? L = r / 2 : i.textAlign === "right" && (L = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(d, L, w);
250
+ const a = (window.devicePixelRatio || 1) * this.qualityFactor, l = r * a, d = n * a;
251
+ this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(a, 0, 0, a, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
252
+ const h = this.wrapText(t, r), u = i.lineHeight, v = Ae.getBaseline(i.font);
253
+ h.forEach((f, p) => {
254
+ const E = p * u + v;
255
+ let R = 0;
256
+ i.textAlign === "center" ? R = r / 2 : i.textAlign === "right" && (R = r), this.ctx.textAlign = i.textAlign, this.ctx.fillText(f, R, E);
257
257
  }), this.map && (this.map.needsUpdate = !0);
258
258
  }
259
259
  dispose() {
260
260
  this.map && this.map.dispose(), super.dispose();
261
261
  }
262
262
  }
263
- function ee(s) {
263
+ function K(s) {
264
264
  return typeof s == "number" ? s : parseFloat(s) || 0;
265
265
  }
266
- function le(s) {
266
+ function ne(s) {
267
267
  if (!s || s === "transparent")
268
- return { color: new v.Color(16777215), alpha: 0 };
268
+ return { color: new b.Color(16777215), alpha: 0 };
269
269
  const e = s.match(
270
270
  /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
271
271
  );
272
272
  if (e) {
273
- const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), l = e[4] !== void 0 ? parseFloat(e[4]) : 1;
274
- return { color: new v.Color(`rgb(${t}, ${i}, ${r})`), alpha: l };
273
+ const t = parseInt(e[1], 10), i = parseInt(e[2], 10), r = parseInt(e[3], 10), n = e[4] !== void 0 ? parseFloat(e[4]) : 1;
274
+ return { color: new b.Color(`rgb(${t}, ${i}, ${r})`), alpha: n };
275
275
  }
276
- return { color: new v.Color(s), alpha: 1 };
276
+ return { color: new b.Color(s), alpha: 1 };
277
277
  }
278
- function He(s) {
278
+ function Ge(s) {
279
279
  const e = [];
280
280
  let t = "", i = 0;
281
281
  for (let r = 0; r < s.length; r++) {
282
- const l = s[r];
283
- if (l === "(")
282
+ const n = s[r];
283
+ if (n === "(")
284
284
  i++;
285
- else if (l === ")")
285
+ else if (n === ")")
286
286
  i--;
287
- else if (l === "," && i === 0) {
287
+ else if (n === "," && i === 0) {
288
288
  e.push(t.trim()), t = "";
289
289
  continue;
290
290
  }
291
- t += l;
291
+ t += n;
292
292
  }
293
293
  return t && e.push(t.trim()), e;
294
294
  }
295
- function Ge(s) {
295
+ function qe(s) {
296
296
  if (!s || typeof s != "string" || !s.includes("linear-gradient"))
297
297
  return null;
298
298
  const e = s.match(/linear-gradient\((.*)\)/);
299
299
  if (!e)
300
300
  return null;
301
- const t = e[1], i = He(t);
302
- let r = Math.PI, l = 0;
301
+ const t = e[1], i = Ge(t);
302
+ let r = Math.PI, n = 0;
303
303
  const o = i[0].trim();
304
304
  if (o.startsWith("to "))
305
- o === "to top" ? r = 0 : o === "to right" ? r = Math.PI / 2 : o === "to bottom" ? r = Math.PI : o === "to left" ? r = Math.PI * 1.5 : o === "to top right" || o === "to right top" ? r = Math.PI / 4 : o === "to bottom right" || o === "to right bottom" ? r = Math.PI * 0.75 : o === "to bottom left" || o === "to left bottom" ? r = Math.PI * 1.25 : (o === "to top left" || o === "to left top") && (r = Math.PI * 1.75), l = 1;
305
+ o === "to top" ? r = 0 : o === "to right" ? r = Math.PI / 2 : o === "to bottom" ? r = Math.PI : o === "to left" ? r = Math.PI * 1.5 : o === "to top right" || o === "to right top" ? r = Math.PI / 4 : o === "to bottom right" || o === "to right bottom" ? r = Math.PI * 0.75 : o === "to bottom left" || o === "to left bottom" ? r = Math.PI * 1.25 : (o === "to top left" || o === "to left top") && (r = Math.PI * 1.75), n = 1;
306
306
  else if (o.endsWith("deg") || o.endsWith("rad") || o.endsWith("turn")) {
307
- const n = parseFloat(o);
308
- o.endsWith("deg") ? r = n * (Math.PI / 180) : o.endsWith("rad") ? r = n : o.endsWith("turn") && (r = n * Math.PI * 2), l = 1;
309
- }
310
- const a = [];
311
- for (let n = l; n < i.length && !(a.length >= 8); n++) {
312
- const c = i[n].trim(), h = c.lastIndexOf(" ");
313
- let f = c, b = null;
314
- if (h !== -1 && !c.endsWith(")")) {
315
- const d = c.substring(h + 1);
316
- (d.endsWith("%") || d.endsWith("px") || !isNaN(parseFloat(d))) && (f = c.substring(0, h).trim(), b = d);
307
+ const a = parseFloat(o);
308
+ o.endsWith("deg") ? r = a * (Math.PI / 180) : o.endsWith("rad") ? r = a : o.endsWith("turn") && (r = a * Math.PI * 2), n = 1;
309
+ }
310
+ const c = [];
311
+ for (let a = n; a < i.length && !(c.length >= 8); a++) {
312
+ const l = i[a].trim(), d = l.lastIndexOf(" ");
313
+ let h = l, u = null;
314
+ if (d !== -1 && !l.endsWith(")")) {
315
+ const f = l.substring(d + 1);
316
+ (f.endsWith("%") || f.endsWith("px") || !isNaN(parseFloat(f))) && (h = l.substring(0, d).trim(), u = f);
317
317
  }
318
- const p = le(f);
319
- a.push({
320
- color: p.color,
321
- alpha: p.alpha,
322
- rawStop: b,
318
+ const v = ne(h);
319
+ c.push({
320
+ color: v.color,
321
+ alpha: v.alpha,
322
+ rawStop: u,
323
323
  stop: 0
324
324
  });
325
325
  }
326
- if (a.length > 0) {
327
- for (let c = 0; c < a.length; c++)
328
- a[c].rawStop !== null && (a[c].stop = parseFloat(a[c].rawStop) / 100);
329
- a[0].rawStop === null && (a[0].stop = 0), a.length > 1 && a[a.length - 1].rawStop === null && (a[a.length - 1].stop = 1);
330
- let n = 0;
331
- for (let c = 1; c < a.length; c++)
332
- if (a[c].rawStop !== null || c === a.length - 1) {
333
- const h = c - n;
334
- if (h > 1) {
335
- const f = a[n].stop, p = (a[c].stop - f) / h;
336
- for (let d = 1; d < h; d++)
337
- a[n + d].stop = f + p * d;
326
+ if (c.length > 0) {
327
+ for (let l = 0; l < c.length; l++)
328
+ c[l].rawStop !== null && (c[l].stop = parseFloat(c[l].rawStop) / 100);
329
+ c[0].rawStop === null && (c[0].stop = 0), c.length > 1 && c[c.length - 1].rawStop === null && (c[c.length - 1].stop = 1);
330
+ let a = 0;
331
+ for (let l = 1; l < c.length; l++)
332
+ if (c[l].rawStop !== null || l === c.length - 1) {
333
+ const d = l - a;
334
+ if (d > 1) {
335
+ const h = c[a].stop, v = (c[l].stop - h) / d;
336
+ for (let f = 1; f < d; f++)
337
+ c[a + f].stop = h + v * f;
338
338
  }
339
- n = c;
339
+ a = l;
340
340
  }
341
341
  }
342
- return { angle: r, stops: a };
342
+ return { angle: r, stops: c };
343
343
  }
344
- const qe = `varying vec2 vUv;
344
+ const $e = `varying vec2 vUv;
345
345
  varying vec4 vScreenPos;
346
346
  void main() {
347
347
  vUv = uv;
348
348
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
349
349
  vScreenPos = gl_Position;
350
- }`, $e = `varying vec2 vUv;
350
+ }`, je = `varying vec2 vUv;
351
351
  uniform vec2 uSize;
352
352
  uniform vec4 uBorderRadius;
353
353
  uniform float uBorderWidth;
@@ -476,85 +476,85 @@ void main() {
476
476
 
477
477
  // #include <colorspace_fragment>
478
478
  }
479
- `, je = `uniform sampler2D uTexture;
479
+ `, Ke = `uniform sampler2D uTexture;
480
480
  varying vec4 vScreenPos;
481
481
  uniform vec2 uTextureRepeat;
482
- uniform vec2 uTextureOffset;`, Ke = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
482
+ uniform vec2 uTextureOffset;`, Je = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
483
483
  vec2 resultUv = screenUv;
484
484
 
485
- `, Je = `vec4 texColor = texture2D(uTexture, resultUv);
485
+ `, Qe = `vec4 texColor = texture2D(uTexture, resultUv);
486
486
  baseColor = blendSrcOver(baseColor, texColor);`, Re = {
487
- vertexShader: qe,
488
- fragmentShader: $e
487
+ vertexShader: $e,
488
+ fragmentShader: je
489
489
  }, me = {
490
- declChunk: je,
491
- uvChunk: Ke,
492
- baseColorChunk: Je
490
+ declChunk: Ke,
491
+ uvChunk: Je,
492
+ baseColorChunk: Qe
493
493
  };
494
- function Qe(s, e, t, i = null, r) {
495
- var R;
496
- const l = i !== null || !!s.imageSrc;
494
+ function Ze(s, e, t, i = null, r) {
495
+ var L;
496
+ const n = i !== null || !!s.imageSrc;
497
497
  let o = "";
498
- const a = {};
498
+ const c = {};
499
499
  if (r != null && r.uniforms)
500
- for (const [E, x] of Object.entries(r.uniforms))
501
- typeof x == "number" ? (o += `uniform float ${E};
502
- `, a[E] = { value: x }) : Array.isArray(x) ? x.length === 2 ? (o += `uniform vec2 ${E};
503
- `, a[E] = { value: new v.Vector2(...x) }) : x.length === 3 ? (o += `uniform vec3 ${E};
504
- `, a[E] = { value: new v.Vector3(...x) }) : x.length === 4 && (o += `uniform vec4 ${E};
505
- `, a[E] = { value: new v.Vector4(...x) }) : (o += `uniform float ${E};
506
- `, a[E] = { value: x });
507
- const n = (l ? me.declChunk : "") + `
508
- ` + o, c = s.isTraveler ? me.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
509
- `, h = l ? c + ((r == null ? void 0 : r.uvModifier) || "") : "", f = l ? me.baseColorChunk : "", b = (r == null ? void 0 : r.colorModifier) || "", p = Re.fragmentShader.replace("#INJECT_DECLARATIONS", n).replace("#INJECT_UV_MODIFIER", h).replace("#INJECT_BASE_COLOR", f).replace("#INJECT_COLOR_MODIFIER", b), d = le(s.backgroundColor), g = le(s.borderColor), w = {
510
- uSize: { value: new v.Vector2(e, t) },
500
+ for (const [x, w] of Object.entries(r.uniforms))
501
+ typeof w == "number" ? (o += `uniform float ${x};
502
+ `, c[x] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (o += `uniform vec2 ${x};
503
+ `, c[x] = { value: new b.Vector2(...w) }) : w.length === 3 ? (o += `uniform vec3 ${x};
504
+ `, c[x] = { value: new b.Vector3(...w) }) : w.length === 4 && (o += `uniform vec4 ${x};
505
+ `, c[x] = { value: new b.Vector4(...w) }) : (o += `uniform float ${x};
506
+ `, c[x] = { value: w });
507
+ const a = (n ? me.declChunk : "") + `
508
+ ` + o, l = s.isTraveler ? me.uvChunk : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
509
+ `, d = n ? l + ((r == null ? void 0 : r.uvModifier) || "") : "", h = n ? me.baseColorChunk : "", u = (r == null ? void 0 : r.colorModifier) || "", v = Re.fragmentShader.replace("#INJECT_DECLARATIONS", a).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", h).replace("#INJECT_COLOR_MODIFIER", u), f = ne(s.backgroundColor), p = ne(s.borderColor), E = {
510
+ uSize: { value: new b.Vector2(e, t) },
511
511
  uBgColor: {
512
- value: new v.Vector4(
513
- d.color.r,
514
- d.color.g,
515
- d.color.b,
516
- d.alpha
512
+ value: new b.Vector4(
513
+ f.color.r,
514
+ f.color.g,
515
+ f.color.b,
516
+ f.alpha
517
517
  )
518
518
  },
519
519
  uBorderColor: {
520
- value: new v.Vector4(
521
- g.color.r,
522
- g.color.g,
523
- g.color.b,
524
- g.alpha
520
+ value: new b.Vector4(
521
+ p.color.r,
522
+ p.color.g,
523
+ p.color.b,
524
+ p.alpha
525
525
  )
526
526
  },
527
- uBorderRadius: { value: new v.Vector4(0, 0, 0, 0) },
528
- uBorderWidth: { value: ee(s.borderWidth) },
529
- uOpacity: { value: (R = s.opacity) != null ? R : 1 },
527
+ uBorderRadius: { value: new b.Vector4(0, 0, 0, 0) },
528
+ uBorderWidth: { value: K(s.borderWidth) },
529
+ uOpacity: { value: (L = s.opacity) != null ? L : 1 },
530
530
  uTexture: { value: null },
531
- uTextureRepeat: { value: new v.Vector2(1, 1) },
532
- uTextureOffset: { value: new v.Vector2(0, 0) },
531
+ uTextureRepeat: { value: new b.Vector2(1, 1) },
532
+ uTextureOffset: { value: new b.Vector2(0, 0) },
533
533
  uGradientCount: { value: 0 },
534
534
  uGradientAngle: { value: 0 },
535
535
  uGradientColors: {
536
- value: Array.from({ length: 8 }, () => new v.Vector4(0, 0, 0, 0))
536
+ value: Array.from({ length: 8 }, () => new b.Vector4(0, 0, 0, 0))
537
537
  },
538
538
  uGradientStops: { value: new Float32Array(8) }
539
539
  };
540
- Ae(w.uBorderRadius.value, s.borderRadius), l && (w.uTexture.value = i);
541
- const L = new v.ShaderMaterial({
542
- uniforms: G(G({}, w), a),
540
+ Ie(E.uBorderRadius.value, s.borderRadius), n && (E.uTexture.value = i);
541
+ const R = new b.ShaderMaterial({
542
+ uniforms: G(G({}, E), c),
543
543
  vertexShader: Re.vertexShader,
544
- fragmentShader: p,
544
+ fragmentShader: v,
545
545
  transparent: !0,
546
- side: v.FrontSide
546
+ side: b.FrontSide
547
547
  // for better performance
548
548
  });
549
- return s.backgroundImage && ye(L, { backgroundImage: s.backgroundImage }), L;
549
+ return s.backgroundImage && ye(R, { backgroundImage: s.backgroundImage }), R;
550
550
  }
551
- function Ze(s, e, t, i, r) {
552
- const l = ee(e.borderWidth);
551
+ function et(s, e, t, i, r) {
552
+ const n = K(e.borderWidth);
553
553
  ye(s, {
554
554
  width: t,
555
555
  height: i,
556
556
  borderRadius: e.borderRadius,
557
- borderWidth: l,
557
+ borderWidth: n,
558
558
  backgroundColor: e.backgroundColor,
559
559
  borderColor: e.borderColor,
560
560
  opacity: e.opacity,
@@ -563,8 +563,8 @@ function Ze(s, e, t, i, r) {
563
563
  });
564
564
  }
565
565
  function ye(s, e) {
566
- var i, r, l;
567
- if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && Ae(s.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
566
+ var i, r, n;
567
+ if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0 && Ie(s.uniforms.uBorderRadius.value, e.borderRadius), e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
568
568
  if (Array.isArray(e.backgroundColor)) {
569
569
  const o = s.uniforms.uBgColor.value.w;
570
570
  s.uniforms.uBgColor.value.set(
@@ -574,7 +574,7 @@ function ye(s, e) {
574
574
  o
575
575
  );
576
576
  } else if (typeof e.backgroundColor == "string") {
577
- const o = le(e.backgroundColor);
577
+ const o = ne(e.backgroundColor);
578
578
  s.uniforms.uBgColor.value.set(
579
579
  o.color.r,
580
580
  o.color.g,
@@ -600,7 +600,7 @@ function ye(s, e) {
600
600
  o
601
601
  );
602
602
  } else if (typeof e.borderColor == "string") {
603
- const o = le(e.borderColor);
603
+ const o = ne(e.borderColor);
604
604
  s.uniforms.uBorderColor.value.set(
605
605
  o.color.r,
606
606
  o.color.g,
@@ -619,42 +619,42 @@ function ye(s, e) {
619
619
  e.opacity !== void 0 && (s.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (s.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (s.uniforms.uBorderColor.value.w = e.borderOpacity), s.uniforms.uTexture && e.texture !== void 0 && (s.uniforms.uTexture.value = e.texture);
620
620
  const t = e.texture !== void 0 ? e.texture : (i = s.uniforms.uTexture) == null ? void 0 : i.value;
621
621
  if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
622
- const o = t.image.width, a = t.image.height, n = (r = e.width) != null ? r : s.uniforms.uSize.value.x, c = (l = e.height) != null ? l : s.uniforms.uSize.value.y;
623
- if (o && a && n && c) {
624
- const h = o / a, f = n / c;
625
- if (h > f) {
626
- const b = f / h;
627
- s.uniforms.uTextureRepeat.value.set(b, 1), s.uniforms.uTextureOffset.value.set((1 - b) / 2, 0);
622
+ const o = t.image.width, c = t.image.height, a = (r = e.width) != null ? r : s.uniforms.uSize.value.x, l = (n = e.height) != null ? n : s.uniforms.uSize.value.y;
623
+ if (o && c && a && l) {
624
+ const d = o / c, h = a / l;
625
+ if (d > h) {
626
+ const u = h / d;
627
+ s.uniforms.uTextureRepeat.value.set(u, 1), s.uniforms.uTextureOffset.value.set((1 - u) / 2, 0);
628
628
  } else {
629
- const b = h / f;
630
- s.uniforms.uTextureRepeat.value.set(1, b), s.uniforms.uTextureOffset.value.set(0, (1 - b) / 2);
629
+ const u = d / h;
630
+ s.uniforms.uTextureRepeat.value.set(1, u), s.uniforms.uTextureOffset.value.set(0, (1 - u) / 2);
631
631
  }
632
632
  }
633
633
  } else
634
634
  s.uniforms.uTextureRepeat && (s.uniforms.uTextureRepeat.value.set(1, 1), s.uniforms.uTextureOffset.value.set(0, 0));
635
635
  if (e.backgroundImage !== void 0) {
636
- const o = Ge(e.backgroundImage);
636
+ const o = qe(e.backgroundImage);
637
637
  if (o) {
638
638
  s.uniforms.uGradientCount.value = o.stops.length, s.uniforms.uGradientAngle.value = o.angle;
639
- for (let a = 0; a < 8; a++)
640
- if (a < o.stops.length) {
641
- const n = o.stops[a];
642
- s.uniforms.uGradientColors.value[a].set(
643
- n.color.r,
644
- n.color.g,
645
- n.color.b,
646
- n.alpha
647
- ), s.uniforms.uGradientStops.value[a] = n.stop;
639
+ for (let c = 0; c < 8; c++)
640
+ if (c < o.stops.length) {
641
+ const a = o.stops[c];
642
+ s.uniforms.uGradientColors.value[c].set(
643
+ a.color.r,
644
+ a.color.g,
645
+ a.color.b,
646
+ a.alpha
647
+ ), s.uniforms.uGradientStops.value[c] = a.stop;
648
648
  } else
649
- s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
649
+ s.uniforms.uGradientColors.value[c].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[c] = 1;
650
650
  } else
651
651
  s.uniforms.uGradientCount.value = 0;
652
652
  }
653
653
  for (const o of Object.keys(e))
654
654
  o !== "width" && o !== "height" && o !== "borderRadius" && o !== "borderWidth" && o !== "backgroundColor" && o !== "borderColor" && o !== "opacity" && o !== "bgOpacity" && o !== "borderOpacity" && o !== "texture" && o !== "backgroundImage" && s.uniforms[o] !== void 0 && (s.uniforms[o].value !== void 0 && s.uniforms[o].value !== null && typeof s.uniforms[o].value.set == "function" ? Array.isArray(e[o]) ? s.uniforms[o].value.set(...e[o]) : e[o] !== void 0 && (e[o].copy ? s.uniforms[o].value.copy(e[o]) : s.uniforms[o].value = e[o]) : s.uniforms[o].value = e[o]);
655
655
  }
656
- function Ae(s, e) {
657
- var a, n, c, h;
656
+ function Ie(s, e) {
657
+ var c, a, l, d;
658
658
  if (e == null) {
659
659
  s.set(0, 0, 0, 0);
660
660
  return;
@@ -667,37 +667,37 @@ function Ae(s, e) {
667
667
  s.set(e[0], e[1], e[2], e[3]);
668
668
  return;
669
669
  }
670
- const t = e.split("/")[0].trim().split(/\s+/), i = ee(t[0]), r = ee((a = t[1]) != null ? a : t[0]), l = ee((n = t[2]) != null ? n : t[0]), o = ee((h = (c = t[3]) != null ? c : t[1]) != null ? h : t[0]);
671
- s.set(i, r, l, o);
670
+ const t = e.split("/")[0].trim().split(/\s+/), i = K(t[0]), r = K((c = t[1]) != null ? c : t[0]), n = K((a = t[2]) != null ? a : t[0]), o = K((d = (l = t[3]) != null ? l : t[1]) != null ? d : t[0]);
671
+ s.set(i, r, n, o);
672
672
  }
673
673
  const H = {
674
- create(s, e, t, i, r, l = 2, o = null, a) {
675
- return s === "BOX" ? Qe(
674
+ create(s, e, t, i, r, n = 2, o = null, c) {
675
+ return s === "BOX" ? Ze(
676
676
  e,
677
677
  i,
678
678
  r,
679
679
  o,
680
- a
681
- ) : s === "TEXT" ? new We(
680
+ c
681
+ ) : s === "TEXT" ? new He(
682
682
  t || "",
683
683
  e,
684
684
  i,
685
685
  r,
686
- l
687
- ) : new v.MeshBasicMaterial({ visible: !1 });
686
+ n
687
+ ) : new b.MeshBasicMaterial({ visible: !1 });
688
688
  },
689
- update(s, e, t, i, r, l, o = 2, a) {
690
- e === "BOX" ? Ze(
689
+ update(s, e, t, i, r, n, o = 2, c) {
690
+ e === "BOX" ? et(
691
691
  s,
692
692
  t,
693
693
  r,
694
- l,
695
- a
694
+ n,
695
+ c
696
696
  ) : e === "TEXT" && s.updateText(
697
697
  i || "",
698
698
  t,
699
699
  r,
700
- l,
700
+ n,
701
701
  o
702
702
  );
703
703
  },
@@ -705,33 +705,33 @@ const H = {
705
705
  ye(s, e);
706
706
  }
707
707
  };
708
- class et {
709
- constructor(e) {
710
- u(this, "observer");
711
- u(this, "textures", /* @__PURE__ */ new WeakMap());
712
- u(this, "loadStatus", /* @__PURE__ */ new WeakMap());
713
- u(this, "elementUrls", /* @__PURE__ */ new WeakMap());
714
- u(this, "onUpdate");
715
- this.onUpdate = e, this.observer = new IntersectionObserver(
716
- (t) => {
717
- for (const i of t) {
718
- const r = i.target;
719
- i.isIntersecting ? this.loadTexture(r) : this.disposeTexture(r);
708
+ class tt {
709
+ constructor(e, t = !0) {
710
+ g(this, "observer");
711
+ g(this, "textures", /* @__PURE__ */ new WeakMap());
712
+ g(this, "loadStatus", /* @__PURE__ */ new WeakMap());
713
+ g(this, "elementUrls", /* @__PURE__ */ new WeakMap());
714
+ g(this, "onUpdate");
715
+ this.onUpdate = e, t && (this.observer = new IntersectionObserver(
716
+ (i) => {
717
+ for (const r of i) {
718
+ const n = r.target;
719
+ r.isIntersecting ? this.loadTexture(n) : this.disposeTexture(n);
720
720
  }
721
721
  },
722
722
  { rootMargin: "300px" }
723
- );
723
+ ));
724
724
  }
725
725
  register(e, t) {
726
726
  if (e.nodeType !== Node.ELEMENT_NODE)
727
727
  return;
728
- this.elementUrls.get(e) !== t && (this.elementUrls.set(e, t), this.observer.unobserve(e), this.observer.observe(e));
728
+ this.elementUrls.get(e) !== t && (this.elementUrls.set(e, t), this.observer ? (this.observer.unobserve(e), this.observer.observe(e)) : this.loadTexture(e));
729
729
  }
730
730
  unregister(e) {
731
- e.nodeType === Node.ELEMENT_NODE && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
731
+ e.nodeType === Node.ELEMENT_NODE && this.observer && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
732
732
  }
733
733
  loadTexture(e) {
734
- return we(this, null, function* () {
734
+ return Ce(this, null, function* () {
735
735
  if (this.loadStatus.get(e) || this.textures.has(e))
736
736
  return;
737
737
  const t = this.elementUrls.get(e);
@@ -740,9 +740,9 @@ class et {
740
740
  try {
741
741
  let i;
742
742
  if (t.startsWith("data:image/svg+xml"))
743
- i = yield new Promise((l, o) => {
744
- const a = new Image();
745
- a.onload = () => l(a), a.onerror = o, a.src = t;
743
+ i = yield new Promise((n, o) => {
744
+ const c = new Image();
745
+ c.onload = () => n(c), c.onerror = o, c.src = t;
746
746
  });
747
747
  else {
748
748
  const o = yield (yield fetch(t)).blob();
@@ -752,8 +752,8 @@ class et {
752
752
  "close" in i && i.close();
753
753
  return;
754
754
  }
755
- const r = new v.Texture(i);
756
- i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = v.LinearSRGBColorSpace, r.needsUpdate = !0, this.textures.set(e, r), this.onUpdate(e, r);
755
+ const r = new b.Texture(i);
756
+ i instanceof HTMLImageElement || (r.flipY = !1), r.colorSpace = b.LinearSRGBColorSpace, r.needsUpdate = !0, this.textures.set(e, r), this.onUpdate(e, r);
757
757
  } catch (i) {
758
758
  console.warn("[MirageEngine] Failed to load texture:", t, i);
759
759
  } finally {
@@ -770,71 +770,78 @@ class et {
770
770
  return this.textures.get(e);
771
771
  }
772
772
  disposeAll() {
773
- this.observer.disconnect();
773
+ this.observer && this.observer.disconnect();
774
774
  }
775
775
  }
776
- class tt {
776
+ class rt {
777
777
  constructor(e, t, i, r) {
778
- u(this, "canvas");
779
- u(this, "scene");
780
- u(this, "camera");
781
- u(this, "renderer");
782
- u(this, "renderTargets", []);
783
- u(this, "renderOrder", 0);
784
- u(this, "qualityFactor", 2);
785
- u(this, "mode", "overlay");
786
- u(this, "clipArea", 1);
787
- u(this, "targetLayer", "base");
788
- u(this, "target");
789
- u(this, "mountContainer");
790
- u(this, "registry");
791
- u(this, "targetRect");
792
- u(this, "travelersByLayer", Array.from(
793
- { length: O.MAX_LAYERS },
778
+ g(this, "canvas");
779
+ g(this, "scene");
780
+ g(this, "camera");
781
+ g(this, "renderer");
782
+ g(this, "renderTargets", []);
783
+ g(this, "renderOrder", 0);
784
+ g(this, "qualityFactor", 2);
785
+ g(this, "mode", "overlay");
786
+ g(this, "canvasSize", "viewport");
787
+ g(this, "clipArea", 1);
788
+ g(this, "targetLayer", "base");
789
+ g(this, "overscan", 200);
790
+ g(this, "target");
791
+ g(this, "mountContainer");
792
+ g(this, "registry");
793
+ g(this, "targetRect");
794
+ g(this, "travelersByLayer", Array.from(
795
+ { length: F.MAX_LAYERS },
794
796
  () => /* @__PURE__ */ new Set()
795
797
  ));
796
- u(this, "textureManager");
798
+ g(this, "textureManager");
797
799
  // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
798
- u(this, "fixedMeshes", /* @__PURE__ */ new Set());
799
- var a, n, c, h;
800
- this.target = e, this.mountContainer = i, this.registry = r, this.textureManager = new et((f, b) => {
801
- const p = this.registry.get(f);
802
- p && p.material instanceof v.ShaderMaterial && H.forceUpdateUniforms(p.material, { texture: b });
803
- }), this.mode = (a = t.mode) != null ? a : "overlay", this.clipArea = (n = t.travelerClipArea) != null ? n : 1, this.targetLayer = (c = t.layer) != null ? c : "base", this.canvas = document.createElement("canvas"), this.scene = new v.Scene(), this.targetRect = this.target.getBoundingClientRect();
804
- const l = this.targetRect.width, o = this.targetRect.height;
805
- this.camera = new v.OrthographicCamera(
806
- l / -2,
807
- l / 2,
800
+ g(this, "fixedMeshes", /* @__PURE__ */ new Set());
801
+ var c, a, l, d, h;
802
+ this.target = e, this.mountContainer = i, this.registry = r, this.mode = (c = t.mode) != null ? c : "overlay", this.canvasSize = (a = t.canvasSize) != null ? a : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new tt((u, v) => {
803
+ const f = this.registry.get(u);
804
+ f && f.material instanceof b.ShaderMaterial && H.forceUpdateUniforms(f.material, { texture: v });
805
+ }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new b.Scene(), this.targetRect = this.target.getBoundingClientRect();
806
+ const n = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
807
+ this.camera = new b.OrthographicCamera(
808
+ n / -2,
809
+ n / 2,
808
810
  o / 2,
809
811
  o / -2,
810
812
  1,
811
813
  1e3
812
- ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new v.WebGLRenderer({
814
+ ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new b.WebGLRenderer({
813
815
  canvas: this.canvas,
814
816
  alpha: !0,
815
817
  antialias: !0
816
818
  // [new]
817
819
  // premultipliedAlpha: true
818
- }), v.ColorManagement.enabled = !1, this.renderer.outputColorSpace = v.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(l, o), this.applyTextQuality((h = t.quality) != null ? h : "medium");
820
+ }), b.ColorManagement.enabled = !1, this.renderer.outputColorSpace = b.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(n, o), this.applyTextQuality((h = t.quality) != null ? h : "medium");
821
+ }
822
+ get isViewport() {
823
+ return this.mode === "overlay" && this.canvasSize === "viewport";
819
824
  }
820
825
  getSceneLayer() {
821
- return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? A.SELECTED : A.BASE;
826
+ return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? I.SELECTED : I.BASE;
822
827
  }
823
828
  createRenderTarget() {
824
- for (let e = 0; e < O.MAX_LAYERS; e++)
829
+ for (let e = 0; e < F.MAX_LAYERS; e++) {
830
+ const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, i = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
825
831
  this.renderTargets.push(
826
- new v.WebGLRenderTarget(
827
- this.targetRect.width * this.qualityFactor,
828
- this.targetRect.height * this.qualityFactor,
832
+ new b.WebGLRenderTarget(
833
+ t * this.qualityFactor,
834
+ i * this.qualityFactor,
829
835
  {
830
- minFilter: v.LinearFilter,
831
- magFilter: v.LinearFilter,
832
- format: v.RGBAFormat,
836
+ minFilter: b.LinearFilter,
837
+ magFilter: b.LinearFilter,
838
+ format: b.RGBAFormat,
833
839
  stencilBuffer: !1,
834
840
  depthBuffer: !0
835
841
  }
836
842
  )
837
843
  );
844
+ }
838
845
  }
839
846
  applyTextQuality(e) {
840
847
  if (typeof e == "number") {
@@ -860,7 +867,8 @@ class tt {
860
867
  this.mountContainer.prepend(this.canvas), this.canvas.style.pointerEvents = this.mode === "overlay" ? "none" : "auto", this.updateCanvasLayout();
861
868
  }
862
869
  updateCanvasLayout() {
863
- this.canvas.style.width = `${this.targetRect.width}px`, this.canvas.style.height = `${this.targetRect.height}px`, this.mode === "duplicate" ? (this.canvas.style.position = "", this.canvas.style.top = "", this.canvas.style.left = "", this.canvas.style.display = "block") : (this.canvas.style.position = "absolute", this.canvas.style.top = `${this.target.offsetTop}px`, this.canvas.style.left = `${this.target.offsetLeft}px`, this.canvas.style.display = "block");
870
+ const e = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, t = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
871
+ this.canvas.style.width = `${e}px`, this.canvas.style.height = `${t}px`, this.mode === "duplicate" ? (this.canvas.style.position = "", this.canvas.style.top = "", this.canvas.style.left = "", this.canvas.style.display = "block") : (this.canvas.style.position = this.isViewport ? "fixed" : "absolute", this.canvas.style.top = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetTop}px`, this.canvas.style.left = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetLeft}px`, this.canvas.style.display = "block");
864
872
  }
865
873
  updateUniforms(e, t) {
866
874
  const i = this.registry.get(e);
@@ -886,16 +894,16 @@ class tt {
886
894
  this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
887
895
  }
888
896
  syncScene(e, t) {
889
- const i = this.target.getBoundingClientRect(), r = Math.abs(i.width - this.targetRect.width) > 0.1 || Math.abs(i.height - this.targetRect.height) > 0.1, l = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
890
- r ? (this.targetRect = i, this.setSize(this.targetRect.width, this.targetRect.height), this.updateCanvasLayout()) : l ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((o) => {
891
- const a = this.registry.get(o);
892
- if (a) {
893
- this.scene.remove(a);
894
- for (const n of this.travelersByLayer)
895
- n.delete(a);
896
- this.fixedMeshes.delete(a), a.geometry.dispose(), a.userData.nativeMesh && (this.scene.remove(a.userData.nativeMesh), Array.isArray(a.userData.nativeMesh.material) ? a.userData.nativeMesh.material.forEach((n) => n.dispose()) : a.userData.nativeMesh.material.dispose(), a.userData.nativeMesh.geometry.dispose()), a.traverse((n) => {
897
- n instanceof v.Mesh && (n.geometry && n.geometry.dispose(), n.material && (Array.isArray(n.material) ? n.material.forEach((c) => c.dispose()) : n.material.dispose()));
898
- }), this.registry.remove(o), this.textureManager.unregister(o);
897
+ const i = this.target.getBoundingClientRect(), r = this.isViewport ? window.innerWidth + this.overscan * 2 : i.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : i.height, o = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, c = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, a = Math.abs(r - o) > 0.1 || Math.abs(n - c) > 0.1, l = this.mode === "overlay" && (Math.abs(i.top - this.targetRect.top) > 0.1 || Math.abs(i.left - this.targetRect.left) > 0.1);
898
+ a ? (this.targetRect = i, this.setSize(r, n), this.updateCanvasLayout()) : l ? (this.targetRect = i, this.updateCanvasLayout()) : this.targetRect = i, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
899
+ const h = this.registry.get(d);
900
+ if (h) {
901
+ this.scene.remove(h);
902
+ for (const u of this.travelersByLayer)
903
+ u.delete(h);
904
+ this.fixedMeshes.delete(h), h.geometry.dispose(), h.userData.nativeMesh && (this.scene.remove(h.userData.nativeMesh), Array.isArray(h.userData.nativeMesh.material) ? h.userData.nativeMesh.material.forEach((u) => u.dispose()) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((u) => {
905
+ u instanceof b.Mesh && (u.geometry && u.geometry.dispose(), u.material && (Array.isArray(u.material) ? u.material.forEach((v) => v.dispose()) : u.material.dispose()));
906
+ }), this.registry.remove(d), this.textureManager.unregister(d);
899
907
  }
900
908
  });
901
909
  }
@@ -907,20 +915,20 @@ class tt {
907
915
  var i;
908
916
  let t = this.registry.get(e.element);
909
917
  if (!t) {
910
- const r = new v.PlaneGeometry(1, 1), l = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = H.create(
918
+ const r = new b.PlaneGeometry(1, 1), n = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = H.create(
911
919
  "BOX",
912
920
  e.styles,
913
921
  "",
914
922
  e.rect.width,
915
923
  e.rect.height,
916
924
  this.qualityFactor,
917
- l,
925
+ n,
918
926
  e.shaderHooks
919
927
  );
920
- t = new v.Mesh(r, o), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = o;
928
+ t = new b.Mesh(r, o), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = o;
921
929
  }
922
930
  if (this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
923
- for (let r = 0; r < O.MAX_LAYERS; r++)
931
+ for (let r = 0; r < F.MAX_LAYERS; r++)
924
932
  r === e.captureLayer - 2 ? this.travelersByLayer[r].add(t) : this.travelersByLayer[r].delete(t);
925
933
  else
926
934
  for (const r of this.travelersByLayer)
@@ -932,79 +940,86 @@ class tt {
932
940
  e.type === "TEXT" && (this.reconcileTextChild(t, e, !1), t.userData.nativeMesh && e.nativeStyles && this.reconcileTextChild(t.userData.nativeMesh, e, !0));
933
941
  }
934
942
  reconcileTextChild(e, t, i) {
935
- var c;
943
+ var l;
936
944
  const r = t.textLines || [
937
945
  { text: t.textContent || "", rect: t.rect }
938
- ], l = i ? t.nativeStyles : t.textStyles, o = JSON.stringify(l) + t.textContent + r.map((h) => h.text).join("|"), a = (c = e.userData) == null ? void 0 : c.textChildStyleHash;
939
- if (t.dirtyMask & ve || o !== a) {
946
+ ], n = i ? t.nativeStyles : t.textStyles, o = JSON.stringify(n) + t.textContent + r.map((d) => d.text).join("|"), c = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
947
+ if (t.dirtyMask & be || o !== c) {
940
948
  e.children.filter(
941
- (d) => d.name.startsWith("TEXT_CHILD")
942
- ).forEach((d) => {
943
- var w;
944
- const g = d;
945
- (w = g.material.map) == null || w.dispose(), g.geometry.dispose(), e.remove(g);
949
+ (f) => f.name.startsWith("TEXT_CHILD")
950
+ ).forEach((f) => {
951
+ var E;
952
+ const p = f;
953
+ (E = p.material.map) == null || E.dispose(), p.geometry.dispose(), e.remove(p);
946
954
  });
947
- const f = t.rect, b = f.x + f.width / 2, p = f.y + f.height / 2;
948
- r.forEach((d, g) => {
949
- const w = H.create(
955
+ const h = t.rect, u = h.x + h.width / 2, v = h.y + h.height / 2;
956
+ r.forEach((f, p) => {
957
+ const E = H.create(
950
958
  "TEXT",
951
- l,
952
- d.text,
953
- d.rect.width,
954
- d.rect.height,
959
+ n,
960
+ f.text,
961
+ f.rect.width,
962
+ f.rect.height,
955
963
  this.qualityFactor
956
- ), L = new v.PlaneGeometry(1, 1), R = new v.Mesh(L, w);
957
- R.name = `TEXT_CHILD_${g}`;
958
- const E = t.rect.width === 0 ? 1 : d.rect.width / t.rect.width, x = t.rect.height === 0 ? 1 : d.rect.height / t.rect.height;
959
- R.scale.set(E, x, 1);
960
- const U = d.rect.x + d.rect.width / 2, F = d.rect.y + d.rect.height / 2, _ = U - b, D = -(F - p);
961
- R.position.set(
962
- t.rect.width === 0 ? 0 : _ / t.rect.width,
963
- t.rect.height === 0 ? 0 : D / t.rect.height,
964
+ ), R = new b.PlaneGeometry(1, 1), L = new b.Mesh(R, E);
965
+ L.name = `TEXT_CHILD_${p}`;
966
+ const x = t.rect.width === 0 ? 1 : f.rect.width / t.rect.width, w = t.rect.height === 0 ? 1 : f.rect.height / t.rect.height;
967
+ L.scale.set(x, w, 1);
968
+ const U = f.rect.x + f.rect.width / 2, M = f.rect.y + f.rect.height / 2, B = U - u, X = -(M - v);
969
+ L.position.set(
970
+ t.rect.width === 0 ? 0 : B / t.rect.width,
971
+ t.rect.height === 0 ? 0 : X / t.rect.height,
964
972
  5e-3
965
- ), e.add(R);
973
+ ), e.add(L);
966
974
  }), e.userData.textChildStyleHash = o;
967
975
  }
968
- e.children.forEach((h) => {
969
- if (!h.name.startsWith("TEXT_CHILD"))
976
+ e.children.forEach((d) => {
977
+ if (!d.name.startsWith("TEXT_CHILD"))
970
978
  return;
971
- const f = h, b = t.visibility & P ? A.BASE : A.HIDDEN;
972
- if (f.layers.set(b), t.visibility & Z && f.layers.enable(A.SELECTED), t.visibility & P)
979
+ const h = d, u = t.visibility & W ? I.BASE : I.HIDDEN;
980
+ if (h.layers.set(u), t.visibility & j && h.layers.enable(I.SELECTED), t.visibility & W)
973
981
  if (!i && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
974
- for (let p = t.captureLayer; p < t.nativeLayer; p++)
975
- f.layers.enable(A.getCaptureLayer(p));
982
+ for (let v = t.captureLayer; v < t.nativeLayer; v++)
983
+ h.layers.enable(I.getCaptureLayer(v));
976
984
  else if (i && t.nativeLayer !== void 0)
977
- for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= O.MAX_LAYERS + 1; p++)
978
- f.layers.enable(A.getCaptureLayer(p));
985
+ for (let v = Math.max(t.captureLayer, t.nativeLayer); v <= F.MAX_LAYERS + 1; v++)
986
+ h.layers.enable(I.getCaptureLayer(v));
979
987
  else
980
- for (let p = t.captureLayer; p <= O.MAX_LAYERS + 1; p++)
981
- f.layers.enable(A.getCaptureLayer(p));
988
+ for (let v = t.captureLayer; v <= F.MAX_LAYERS + 1; v++)
989
+ h.layers.enable(I.getCaptureLayer(v));
982
990
  });
983
991
  }
984
992
  updateMeshProperties(e, t) {
985
- var U, F, _;
986
- const { rect: i, styles: r } = t, l = this.renderer.getPixelRatio(), o = this.renderer.domElement.width / l, a = this.renderer.domElement.height / l;
993
+ var x, w, U;
994
+ const { rect: i, styles: r } = t, n = this.renderer.getPixelRatio(), o = this.renderer.domElement.width / n, c = this.renderer.domElement.height / n;
987
995
  e.material = e.userData.baseMaterial, e.scale.set(i.width, i.height, 1), e.userData.domRect = pe(G({}, i), {
988
996
  width: i.width,
989
997
  height: i.height
990
998
  });
991
- const n = 1e-3;
999
+ const a = 1e-3;
992
1000
  this.renderOrder++;
993
- const c = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY, f = i.x - c, b = i.y - h, p = f - o / 2 + i.width / 2, d = -b + a / 2 - i.height / 2;
1001
+ const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
1002
+ let h, u;
1003
+ if (this.isViewport)
1004
+ h = i.x - window.innerWidth / 2 + i.width / 2, u = -i.y + window.innerHeight / 2 - i.height / 2;
1005
+ else {
1006
+ const M = i.x - l, B = i.y - d;
1007
+ h = M - o / 2 + i.width / 2, u = -B + c / 2 - i.height / 2;
1008
+ }
994
1009
  e.position.set(
995
- p,
996
- d,
997
- r.zIndex + this.renderOrder * n
1010
+ h,
1011
+ u,
1012
+ r.zIndex + this.renderOrder * a
998
1013
  );
999
- const g = i.x, w = i.y;
1000
- e.userData.basePosition = { x: p, y: d }, e.userData.originalBasePosition = { x: p, y: d }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: g, y: w }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
1001
- const L = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, R = window.getComputedStyle(L);
1002
- let E = 0, x = 0;
1003
- if (R.transform && R.transform !== "none") {
1004
- const D = new DOMMatrix(R.transform);
1005
- E = D.m41, x = D.m42;
1014
+ const v = i.x, f = i.y;
1015
+ e.userData.basePosition = { x: h, y: u }, e.userData.originalBasePosition = { x: h, y: u }, e.userData.baseSize = { width: i.width, height: i.height }, e.userData.baseDOM = { x: v, y: f }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
1016
+ const p = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(p);
1017
+ let R = 0, L = 0;
1018
+ if (E.transform && E.transform !== "none") {
1019
+ const M = new DOMMatrix(E.transform);
1020
+ R = M.m41, L = M.m42;
1006
1021
  }
1007
- if (e.userData.baseTransform = { x: E, y: x }, delete e.userData.originRatioX, delete e.userData.originRatioY, H.update(
1022
+ if (e.userData.baseTransform = { x: R, y: L }, delete e.userData.originRatioX, delete e.userData.originRatioY, H.update(
1008
1023
  e.userData.baseMaterial,
1009
1024
  "BOX",
1010
1025
  r,
@@ -1012,94 +1027,104 @@ class tt {
1012
1027
  i.width,
1013
1028
  i.height,
1014
1029
  this.qualityFactor,
1015
- t.isTraveler ? (U = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : U.texture : this.textureManager.get(t.element)
1030
+ t.isTraveler ? (x = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : x.texture : this.textureManager.get(t.element)
1016
1031
  ), t.nativeStyles && t.nativeRect) {
1017
1032
  if (!e.userData.nativeMesh) {
1018
- const $ = H.create(
1033
+ const A = H.create(
1019
1034
  "BOX",
1020
1035
  t.nativeStyles,
1021
1036
  "",
1022
1037
  t.nativeRect.width,
1023
1038
  t.nativeRect.height,
1024
1039
  this.qualityFactor,
1025
- t.isTraveler ? (F = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : F.texture : this.textureManager.get(t.element),
1040
+ t.isTraveler ? (w = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : w.texture : this.textureManager.get(t.element),
1026
1041
  t.shaderHooks
1027
- ), V = new v.Mesh(e.geometry, $);
1028
- t.type === "TEXT" && (V.name = "BG_MESH"), this.scene.add(V), e.userData.nativeMesh = V;
1042
+ ), Y = new b.Mesh(e.geometry, A);
1043
+ t.type === "TEXT" && (Y.name = "BG_MESH"), this.scene.add(Y), e.userData.nativeMesh = Y;
1044
+ }
1045
+ const M = e.userData.nativeMesh;
1046
+ let B, X;
1047
+ if (this.isViewport)
1048
+ B = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, X = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
1049
+ else {
1050
+ const A = t.nativeRect.x - l, Y = t.nativeRect.y - d;
1051
+ B = A - o / 2 + t.nativeRect.width / 2, X = -Y + c / 2 - t.nativeRect.height / 2;
1029
1052
  }
1030
- const D = e.userData.nativeMesh, I = t.nativeRect.x - c, K = t.nativeRect.y - h, J = I - o / 2 + t.nativeRect.width / 2, Q = -K + a / 2 - t.nativeRect.height / 2;
1031
- D.scale.set(t.nativeRect.width, t.nativeRect.height, 1), D.position.set(
1032
- J,
1033
- Q,
1034
- t.nativeStyles.zIndex + this.renderOrder * n
1053
+ M.scale.set(t.nativeRect.width, t.nativeRect.height, 1), M.position.set(
1054
+ B,
1055
+ X,
1056
+ t.nativeStyles.zIndex + this.renderOrder * a
1035
1057
  ), H.update(
1036
- D.material,
1058
+ M.material,
1037
1059
  "BOX",
1038
1060
  t.nativeStyles,
1039
1061
  "",
1040
1062
  t.nativeRect.width,
1041
1063
  t.nativeRect.height,
1042
1064
  this.qualityFactor,
1043
- t.isTraveler ? (_ = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : _.texture : this.textureManager.get(t.element)
1065
+ t.isTraveler ? (U = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : U.texture : this.textureManager.get(t.element)
1044
1066
  );
1045
1067
  } else
1046
- e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof v.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
1068
+ e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof b.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
1047
1069
  }
1048
1070
  updateMeshLayers(e, t) {
1049
- const i = t.visibility & P ? A.BASE : A.HIDDEN;
1050
- if (e.layers.set(i), t.visibility & Z && e.layers.enable(A.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
1071
+ const i = t.visibility & W ? I.BASE : I.HIDDEN;
1072
+ if (e.layers.set(i), t.visibility & j && e.layers.enable(I.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
1051
1073
  const r = e.userData.nativeMesh;
1052
- if (r.layers.set(A.HIDDEN), t.visibility & P) {
1053
- for (let l = t.captureLayer; l < t.nativeLayer; l++)
1054
- e.layers.enable(A.getCaptureLayer(l));
1055
- for (let l = Math.max(t.captureLayer, t.nativeLayer); l <= O.MAX_LAYERS + 1; l++)
1056
- r.layers.enable(A.getCaptureLayer(l));
1074
+ if (r.layers.set(I.HIDDEN), t.visibility & W) {
1075
+ for (let n = t.captureLayer; n < t.nativeLayer; n++)
1076
+ e.layers.enable(I.getCaptureLayer(n));
1077
+ for (let n = Math.max(t.captureLayer, t.nativeLayer); n <= F.MAX_LAYERS + 1; n++)
1078
+ r.layers.enable(I.getCaptureLayer(n));
1057
1079
  }
1058
- } else if (t.visibility & P)
1059
- for (let r = t.captureLayer; r <= O.MAX_LAYERS + 1; r++)
1060
- e.layers.enable(A.getCaptureLayer(r));
1080
+ } else if (t.visibility & W)
1081
+ for (let r = t.captureLayer; r <= F.MAX_LAYERS + 1; r++)
1082
+ e.layers.enable(I.getCaptureLayer(r));
1061
1083
  }
1062
1084
  captureRenderTarget(e, t, i) {
1063
1085
  if (e.size === 0 || !i)
1064
1086
  return;
1065
- const r = new v.Color(), l = this.renderer.getClearAlpha();
1087
+ const r = new b.Color(), n = this.renderer.getClearAlpha();
1066
1088
  this.renderer.getClearColor(r), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(i), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
1067
- const o = new v.Vector3(), a = this.targetRect.width, n = this.targetRect.height, c = this.renderer.getPixelRatio();
1068
- for (const h of e) {
1069
- o.setFromMatrixPosition(h.matrixWorld), o.project(this.camera);
1070
- const f = (o.x + 1) / 2 * a, b = (o.y + 1) / 2 * n;
1071
- let p = 0, d = 1;
1072
- typeof this.clipArea == "number" ? d = this.clipArea : this.clipArea.endsWith("%") ? d = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
1073
- const g = h.scale.x * d + 0.5, w = h.scale.y * d + 0.5, L = f - g / 2, R = b - w / 2, E = (L * this.qualityFactor - p) / c, x = (R * this.qualityFactor - p) / c, U = (g * this.qualityFactor + p * 2) / c, F = (w * this.qualityFactor + p * 2) / c;
1074
- this.renderer.setScissor(E, x, U, F), this.renderer.render(this.scene, this.camera);
1089
+ const o = new b.Vector3(), c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, a = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
1090
+ for (const d of e) {
1091
+ o.setFromMatrixPosition(d.matrixWorld), o.project(this.camera);
1092
+ const h = (o.x + 1) / 2 * c, u = (o.y + 1) / 2 * a;
1093
+ let v = 0, f = 1;
1094
+ typeof this.clipArea == "number" ? f = this.clipArea : this.clipArea.endsWith("%") ? f = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (v = parseFloat(this.clipArea));
1095
+ const p = d.scale.x * f + 0.5, E = d.scale.y * f + 0.5, R = h - p / 2, L = u - E / 2, x = (R * this.qualityFactor - v) / l, w = (L * this.qualityFactor - v) / l, U = (p * this.qualityFactor + v * 2) / l, M = (E * this.qualityFactor + v * 2) / l;
1096
+ this.renderer.setScissor(x, w, U, M), this.renderer.render(this.scene, this.camera);
1075
1097
  }
1076
- this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, l);
1098
+ this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(r, n);
1077
1099
  }
1078
1100
  render() {
1079
- for (let e = 0; e < O.MAX_LAYERS; e++) {
1101
+ for (let e = 0; e < F.MAX_LAYERS; e++) {
1080
1102
  const t = e + 1;
1081
1103
  this.captureRenderTarget(
1082
1104
  this.travelersByLayer[e],
1083
- A.getCaptureLayer(t),
1105
+ I.getCaptureLayer(t),
1084
1106
  this.renderTargets[e]
1085
1107
  );
1086
1108
  }
1087
1109
  this.renderer.render(this.scene, this.camera);
1088
1110
  }
1111
+ updateCameraScroll(e, t) {
1112
+ this.isViewport && (this.camera.position.x = e, this.camera.position.y = -t, this.camera.updateMatrixWorld());
1113
+ }
1089
1114
  }
1090
- function rt(s) {
1115
+ function it(s) {
1091
1116
  const e = s.textContent || "", t = [];
1092
- let i = "", r = null, l = -1;
1093
- const o = (c, h) => {
1094
- for (let f = 0; f < c.length; f++) {
1095
- const b = c[f], p = document.createRange();
1096
- p.setStart(s, h + f), p.setEnd(s, h + f + 1);
1097
- const d = p.getBoundingClientRect();
1098
- if (d.width === 0 && d.height === 0) {
1099
- i += b;
1117
+ let i = "", r = null, n = -1;
1118
+ const o = (l, d) => {
1119
+ for (let h = 0; h < l.length; h++) {
1120
+ const u = l[h], v = document.createRange();
1121
+ v.setStart(s, d + h), v.setEnd(s, d + h + 1);
1122
+ const f = v.getBoundingClientRect();
1123
+ if (f.width === 0 && f.height === 0) {
1124
+ i += u;
1100
1125
  continue;
1101
1126
  }
1102
- l === -1 || Math.abs(d.top - l) > d.height / 2 ? (i && r && t.push({
1127
+ n === -1 || Math.abs(f.top - n) > f.height / 2 ? (i && r && t.push({
1103
1128
  text: i,
1104
1129
  rect: {
1105
1130
  left: r.left,
@@ -1107,31 +1132,31 @@ function rt(s) {
1107
1132
  width: r.right - r.left,
1108
1133
  height: r.bottom - r.top
1109
1134
  }
1110
- }), i = b, r = {
1111
- left: d.left,
1112
- top: d.top,
1113
- right: d.right,
1114
- bottom: d.bottom
1115
- }, l = d.top) : (i += b, r && (r.left = Math.min(r.left, d.left), r.top = Math.min(r.top, d.top), r.right = Math.max(r.right, d.right), r.bottom = Math.max(
1135
+ }), i = u, r = {
1136
+ left: f.left,
1137
+ top: f.top,
1138
+ right: f.right,
1139
+ bottom: f.bottom
1140
+ }, n = f.top) : (i += u, r && (r.left = Math.min(r.left, f.left), r.top = Math.min(r.top, f.top), r.right = Math.max(r.right, f.right), r.bottom = Math.max(
1116
1141
  r.bottom,
1117
- d.bottom
1142
+ f.bottom
1118
1143
  )));
1119
1144
  }
1120
- }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
1121
- let n = 0;
1122
- for (const c of a) {
1123
- const h = document.createRange();
1124
- h.setStart(s, n), h.setEnd(s, n + c.length);
1125
- const f = h.getClientRects();
1126
- if (f.length > 1)
1127
- o(c, n);
1145
+ }, c = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
1146
+ let a = 0;
1147
+ for (const l of c) {
1148
+ const d = document.createRange();
1149
+ d.setStart(s, a), d.setEnd(s, a + l.length);
1150
+ const h = d.getClientRects();
1151
+ if (h.length > 1)
1152
+ o(l, a);
1128
1153
  else {
1129
- const b = f.length === 1 ? f[0] : h.getBoundingClientRect();
1130
- if (b.width === 0 && b.height === 0) {
1131
- i += c, n += c.length;
1154
+ const u = h.length === 1 ? h[0] : d.getBoundingClientRect();
1155
+ if (u.width === 0 && u.height === 0) {
1156
+ i += l, a += l.length;
1132
1157
  continue;
1133
1158
  }
1134
- l === -1 || Math.abs(b.top - l) > b.height / 2 ? (i && r && t.push({
1159
+ n === -1 || Math.abs(u.top - n) > u.height / 2 ? (i && r && t.push({
1135
1160
  text: i,
1136
1161
  rect: {
1137
1162
  left: r.left,
@@ -1139,17 +1164,17 @@ function rt(s) {
1139
1164
  width: r.right - r.left,
1140
1165
  height: r.bottom - r.top
1141
1166
  }
1142
- }), i = c, r = {
1143
- left: b.left,
1144
- top: b.top,
1145
- right: b.right,
1146
- bottom: b.bottom
1147
- }, l = b.top) : (i += c, r && (r.left = Math.min(r.left, b.left), r.top = Math.min(r.top, b.top), r.right = Math.max(r.right, b.right), r.bottom = Math.max(
1167
+ }), i = l, r = {
1168
+ left: u.left,
1169
+ top: u.top,
1170
+ right: u.right,
1171
+ bottom: u.bottom
1172
+ }, n = u.top) : (i += l, r && (r.left = Math.min(r.left, u.left), r.top = Math.min(r.top, u.top), r.right = Math.max(r.right, u.right), r.bottom = Math.max(
1148
1173
  r.bottom,
1149
- b.bottom
1174
+ u.bottom
1150
1175
  )));
1151
1176
  }
1152
- n += c.length;
1177
+ a += l.length;
1153
1178
  }
1154
1179
  return i && r && t.push({
1155
1180
  text: i,
@@ -1160,7 +1185,7 @@ function rt(s) {
1160
1185
  height: r.bottom - r.top
1161
1186
  }
1162
1187
  }), t.filter(
1163
- (c) => c.text.trim().length > 0 && c.rect.width > 0 && c.rect.height > 0
1188
+ (l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
1164
1189
  );
1165
1190
  }
1166
1191
  function Le(s) {
@@ -1179,8 +1204,8 @@ function Le(s) {
1179
1204
  letterSpacing: i
1180
1205
  };
1181
1206
  }
1182
- function Ie(s, e = j | ae | Ye | ve | be, t, i = 1, r = 0, l = 2, o, a) {
1183
- var V, te, re, ie, se, oe;
1207
+ function ke(s, e = $ | oe | Ye | be | ve, t, i = 1, r = 0, n = 2, o, c) {
1208
+ var Q, Z, ee, te, re, ie;
1184
1209
  if (s.nodeType === Node.TEXT_NODE) {
1185
1210
  const m = s;
1186
1211
  if (!m.textContent || !m.textContent.trim())
@@ -1188,22 +1213,22 @@ function Ie(s, e = j | ae | Ye | ve | be, t, i = 1, r = 0, l = 2, o, a) {
1188
1213
  const T = m.textContent.replace(/\s+/g, " ");
1189
1214
  if (T.length === 0)
1190
1215
  return null;
1191
- const M = rt(m);
1192
- if (M.length === 0)
1216
+ const D = it(m);
1217
+ if (D.length === 0)
1193
1218
  return null;
1194
1219
  const k = m.parentElement, S = k ? window.getComputedStyle(k) : null;
1195
1220
  if (!S)
1196
1221
  return null;
1197
- const B = Math.min(...M.map((y) => y.rect.left)), C = Math.min(...M.map((y) => y.rect.top)), X = Math.max(...M.map((y) => y.rect.left + y.rect.width)), W = Math.max(...M.map((y) => y.rect.top + y.rect.height));
1222
+ const O = Math.min(...D.map((y) => y.rect.left)), C = Math.min(...D.map((y) => y.rect.top)), _ = Math.max(...D.map((y) => y.rect.left + y.rect.width)), P = Math.max(...D.map((y) => y.rect.top + y.rect.height));
1198
1223
  return {
1199
1224
  id: Math.random().toString(36).substring(2, 9),
1200
1225
  type: "TEXT",
1201
1226
  element: m,
1202
1227
  rect: {
1203
- x: B + window.scrollX,
1228
+ x: O + window.scrollX,
1204
1229
  y: C + window.scrollY,
1205
- width: X - B,
1206
- height: W - C
1230
+ width: _ - O,
1231
+ height: P - C
1207
1232
  },
1208
1233
  styles: {
1209
1234
  backgroundColor: "transparent",
@@ -1216,7 +1241,7 @@ function Ie(s, e = j | ae | Ye | ve | be, t, i = 1, r = 0, l = 2, o, a) {
1216
1241
  isTraveler: !1
1217
1242
  },
1218
1243
  textContent: T,
1219
- textLines: M.map((y) => ({
1244
+ textLines: D.map((y) => ({
1220
1245
  text: y.text.trim(),
1221
1246
  rect: {
1222
1247
  x: y.rect.left + window.scrollX,
@@ -1232,7 +1257,7 @@ function Ie(s, e = j | ae | Ye | ve | be, t, i = 1, r = 0, l = 2, o, a) {
1232
1257
  captureLayer: i,
1233
1258
  isFixed: S.position === "fixed",
1234
1259
  nativeLayer: o,
1235
- nativeStyles: a ? G(G({
1260
+ nativeStyles: c ? G(G({
1236
1261
  backgroundColor: "transparent",
1237
1262
  backgroundImage: "",
1238
1263
  opacity: k && k.dataset[q.KEY] === q.VALUES.HIDE ? 1 : parseFloat(S.opacity),
@@ -1241,264 +1266,264 @@ function Ie(s, e = j | ae | Ye | ve | be, t, i = 1, r = 0, l = 2, o, a) {
1241
1266
  borderColor: "transparent",
1242
1267
  borderWidth: "0px",
1243
1268
  isTraveler: !1
1244
- }, Le(S)), a) : void 0,
1245
- nativeRect: a ? {
1246
- x: B + window.scrollX,
1269
+ }, Le(S)), c) : void 0,
1270
+ nativeRect: c ? {
1271
+ x: O + window.scrollX,
1247
1272
  y: C + window.scrollY,
1248
- width: X - B,
1249
- height: W - C
1273
+ width: _ - O,
1274
+ height: P - C
1250
1275
  } : void 0,
1251
1276
  children: []
1252
1277
  };
1253
1278
  }
1254
1279
  if (s.nodeType !== Node.ELEMENT_NODE)
1255
1280
  return null;
1256
- const n = s, c = n.dataset[Y.KEY];
1257
- let h = t, f = t;
1258
- if (c) {
1259
- const m = new Set(c.split(/\s+/));
1281
+ const a = s, l = a.dataset[z.KEY];
1282
+ let d = t, h = t;
1283
+ if (l) {
1284
+ const m = new Set(l.split(/\s+/));
1260
1285
  for (const T of m)
1261
1286
  if (!Se.includes(T))
1262
1287
  throw new Error(
1263
1288
  `[MirageEngine] Invalid filter token: '${T}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
1264
1289
  );
1265
- if (m.has(Y.VALUES.END))
1290
+ if (m.has(z.VALUES.END))
1266
1291
  return null;
1267
- if (m.has(Y.VALUES.INCLUDE_TREE) && m.has(Y.VALUES.EXCLUDE_TREE))
1292
+ if (m.has(z.VALUES.INCLUDE_TREE) && m.has(z.VALUES.EXCLUDE_TREE))
1268
1293
  throw new Error(
1269
1294
  "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
1270
1295
  );
1271
- if (m.has(Y.VALUES.INCLUDE_SELF) && m.has(Y.VALUES.EXCLUDE_SELF))
1296
+ if (m.has(z.VALUES.INCLUDE_SELF) && m.has(z.VALUES.EXCLUDE_SELF))
1272
1297
  throw new Error(
1273
1298
  "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
1274
1299
  );
1275
- m.has(Y.VALUES.INCLUDE_TREE) ? h = h | P : m.has(Y.VALUES.EXCLUDE_TREE) && (h = h & ~P), f = h, m.has(Y.VALUES.INCLUDE_SELF) ? f = f | P : m.has(Y.VALUES.EXCLUDE_SELF) && (f = f & ~P);
1300
+ m.has(z.VALUES.INCLUDE_TREE) ? d = d | W : m.has(z.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, m.has(z.VALUES.INCLUDE_SELF) ? h = h | W : m.has(z.VALUES.EXCLUDE_SELF) && (h = h & ~W);
1276
1301
  }
1277
- const b = n.dataset[z.KEY];
1278
- if (b) {
1279
- const m = new Set(b.split(/\s+/));
1302
+ const u = a.dataset[V.KEY];
1303
+ if (u) {
1304
+ const m = new Set(u.split(/\s+/));
1280
1305
  for (const T of m)
1281
1306
  if (!Se.includes(T))
1282
1307
  throw new Error(
1283
1308
  `[MirageEngine] Invalid select token: '${T}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
1284
1309
  );
1285
- if (m.has(z.VALUES.END))
1310
+ if (m.has(V.VALUES.END))
1286
1311
  return null;
1287
- if (m.has(z.VALUES.INCLUDE_TREE) && m.has(z.VALUES.EXCLUDE_TREE))
1312
+ if (m.has(V.VALUES.INCLUDE_TREE) && m.has(V.VALUES.EXCLUDE_TREE))
1288
1313
  throw new Error(
1289
1314
  "[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
1290
1315
  );
1291
- if (m.has(z.VALUES.INCLUDE_SELF) && m.has(z.VALUES.EXCLUDE_SELF))
1316
+ if (m.has(V.VALUES.INCLUDE_SELF) && m.has(V.VALUES.EXCLUDE_SELF))
1292
1317
  throw new Error(
1293
1318
  "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
1294
1319
  );
1295
- m.has(z.VALUES.INCLUDE_TREE) ? h = h | Z : m.has(z.VALUES.EXCLUDE_TREE) && (h = h & ~Z), f = h, m.has(z.VALUES.INCLUDE_SELF) ? f = f | Z : m.has(z.VALUES.EXCLUDE_SELF) && (f = f & ~Z);
1320
+ m.has(V.VALUES.INCLUDE_TREE) ? d = d | j : m.has(V.VALUES.EXCLUDE_TREE) && (d = d & ~j), h = d, m.has(V.VALUES.INCLUDE_SELF) ? h = h | j : m.has(V.VALUES.EXCLUDE_SELF) && (h = h & ~j);
1296
1321
  }
1297
- const p = n.dataset[O.KEY];
1298
- let d = !1, g = a ? G({}, a) : {}, w = o;
1299
- if (p) {
1322
+ const v = a.dataset[F.KEY];
1323
+ let f = !1, p = c ? G({}, c) : {}, E = o;
1324
+ if (v) {
1300
1325
  let m = 1;
1301
- const T = p.indexOf("{"), M = p.lastIndexOf("}");
1302
- let k = p;
1303
- if (T !== -1 && M !== -1 && M > T) {
1304
- k = p.substring(0, T).trim();
1305
- const C = p.substring(T, M + 1);
1326
+ const T = v.indexOf("{"), D = v.lastIndexOf("}");
1327
+ let k = v;
1328
+ if (T !== -1 && D !== -1 && D > T) {
1329
+ k = v.substring(0, T).trim();
1330
+ const C = v.substring(T, D + 1);
1306
1331
  try {
1307
- g = new Function("return " + C)();
1308
- } catch (X) {
1332
+ p = new Function("return " + C)();
1333
+ } catch (_) {
1309
1334
  console.warn(
1310
1335
  `[MirageEngine] Failed to parse travel styles JSON: ${C}`
1311
1336
  );
1312
1337
  }
1313
1338
  }
1314
1339
  const S = k.split(/\s+/);
1315
- let B = !1;
1316
- if (S.includes(O.VALUES.TRAVELER)) {
1317
- d = !0, B = !0;
1318
- const C = S.find((X) => !isNaN(parseInt(X, 10)));
1340
+ let O = !1;
1341
+ if (S.includes(F.VALUES.TRAVELER)) {
1342
+ f = !0, O = !0;
1343
+ const C = S.find((_) => !isNaN(parseInt(_, 10)));
1319
1344
  C && (m = parseInt(C, 10));
1320
- } else if (S.includes(O.VALUES.NATIVE)) {
1321
- d = !1;
1322
- const C = S.find((X) => !isNaN(parseInt(X, 10)));
1323
- C && (w = parseInt(C, 10));
1345
+ } else if (S.includes(F.VALUES.NATIVE)) {
1346
+ f = !1;
1347
+ const C = S.find((_) => !isNaN(parseInt(_, 10)));
1348
+ C && (E = parseInt(C, 10));
1324
1349
  }
1325
- if (B) {
1350
+ if (O) {
1326
1351
  const C = m + 1;
1327
1352
  if (C < i)
1328
1353
  throw new Error(
1329
1354
  `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${i - 1}).`
1330
1355
  );
1331
- i = Math.min(C, O.MAX_LAYERS + 1);
1356
+ i = Math.min(C, F.MAX_LAYERS + 1);
1332
1357
  }
1333
1358
  }
1334
- const L = n.dataset[Ne.KEY];
1335
- let R;
1336
- L && (R = JSON.parse(L));
1337
- const E = n.getBoundingClientRect(), x = window.getComputedStyle(n);
1338
- if (E.width === 0 || E.height === 0 || x.display === "none")
1359
+ const R = a.dataset[ze.KEY];
1360
+ let L;
1361
+ R && (L = JSON.parse(R));
1362
+ const x = a.getBoundingClientRect(), w = window.getComputedStyle(a);
1363
+ if (x.width === 0 || x.height === 0 || w.display === "none")
1339
1364
  return null;
1340
- let U = n.getAttribute("data-mid");
1341
- U || (U = Math.random().toString(36).substring(2, 11), n.setAttribute("data-mid", U));
1342
- const F = parseInt(x.zIndex), _ = (isNaN(F) ? 0 : F) + r;
1343
- let D;
1344
- if (n.tagName === "IMG")
1345
- D = n.src;
1346
- else if (n.tagName.toLowerCase() === "svg") {
1347
- const m = n.cloneNode(!0), T = g == null ? void 0 : g.color, M = g == null ? void 0 : g.fill, k = g == null ? void 0 : g.stroke, S = g == null ? void 0 : g.opacity, B = (y, xe) => {
1348
- const N = window.getComputedStyle(y), ne = xe, ke = N.fill === N.color, Ue = N.stroke === N.color, de = M || (ke ? T : void 0) || N.fill;
1349
- de && de !== "none" && (ne.style.fill = de);
1350
- const ue = k || (Ue ? T : void 0) || N.stroke;
1351
- ue && ue !== "none" && (ne.style.stroke = ue), N.strokeWidth && N.strokeWidth !== "0px" && (ne.style.strokeWidth = N.strokeWidth);
1352
- const Ee = T || N.color;
1353
- Ee && (ne.style.color = Ee);
1365
+ let U = a.getAttribute("data-mid");
1366
+ U || (U = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", U));
1367
+ const M = parseInt(w.zIndex), B = (isNaN(M) ? 0 : M) + r;
1368
+ let X;
1369
+ if (a.tagName === "IMG")
1370
+ X = a.src;
1371
+ else if (a.tagName.toLowerCase() === "svg") {
1372
+ const m = a.cloneNode(!0), T = p == null ? void 0 : p.color, D = p == null ? void 0 : p.fill, k = p == null ? void 0 : p.stroke, S = p == null ? void 0 : p.opacity, O = (y, we) => {
1373
+ const N = window.getComputedStyle(y), se = we, Ue = N.fill === N.color, Be = N.stroke === N.color, de = D || (Ue ? T : void 0) || N.fill;
1374
+ de && de !== "none" && (se.style.fill = de);
1375
+ const ue = k || (Be ? T : void 0) || N.stroke;
1376
+ ue && ue !== "none" && (se.style.stroke = ue), N.strokeWidth && N.strokeWidth !== "0px" && (se.style.strokeWidth = N.strokeWidth);
1377
+ const xe = T || N.color;
1378
+ xe && (se.style.color = xe);
1354
1379
  const fe = S || N.opacity;
1355
- fe && fe !== "1" && (ne.style.opacity = fe);
1356
- for (let ce = 0; ce < y.children.length; ce++)
1357
- B(y.children[ce], xe.children[ce]);
1380
+ fe && fe !== "1" && (se.style.opacity = fe);
1381
+ for (let le = 0; le < y.children.length; le++)
1382
+ O(y.children[le], we.children[le]);
1358
1383
  };
1359
- B(n, m);
1360
- const C = n.getBoundingClientRect(), X = window.devicePixelRatio * l;
1361
- m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${C.width} ${C.height}`), m.setAttribute("width", (C.width * X).toString()), m.setAttribute("height", (C.height * X).toString());
1362
- let W = new XMLSerializer().serializeToString(m);
1363
- W.includes("xmlns=") || (W = W.replace(
1384
+ O(a, m);
1385
+ const C = a.getBoundingClientRect(), _ = window.devicePixelRatio * n;
1386
+ m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${C.width} ${C.height}`), m.setAttribute("width", (C.width * _).toString()), m.setAttribute("height", (C.height * _).toString());
1387
+ let P = new XMLSerializer().serializeToString(m);
1388
+ P.includes("xmlns=") || (P = P.replace(
1364
1389
  "<svg",
1365
1390
  '<svg xmlns="http://www.w3.org/2000/svg"'
1366
- )), D = `data:image/svg+xml;utf8,${encodeURIComponent(W)}`;
1367
- } else if (x.backgroundImage && x.backgroundImage !== "none") {
1368
- const m = x.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
1369
- m && (D = m[1]);
1370
- }
1371
- const I = {
1372
- backgroundColor: x.backgroundColor,
1373
- backgroundImage: x.backgroundImage,
1374
- opacity: n.dataset[q.KEY] === q.VALUES.HIDE ? 1 : parseFloat(x.opacity),
1375
- zIndex: _,
1376
- borderRadius: x.borderRadius,
1377
- borderColor: x.borderColor,
1378
- borderWidth: x.borderWidth,
1379
- imageSrc: D,
1380
- isTraveler: d
1381
- }, K = I;
1382
- let J, Q;
1383
- const $ = [];
1384
- return n.tagName.toLowerCase() !== "svg" && Array.from(n.childNodes).forEach((m) => {
1385
- const T = m.nodeType === Node.TEXT_NODE ? f : h, M = Ie(
1391
+ )), X = `data:image/svg+xml;utf8,${encodeURIComponent(P)}`;
1392
+ } else if (w.backgroundImage && w.backgroundImage !== "none") {
1393
+ const m = w.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
1394
+ m && (X = m[1]);
1395
+ }
1396
+ const A = {
1397
+ backgroundColor: w.backgroundColor,
1398
+ backgroundImage: w.backgroundImage,
1399
+ opacity: a.dataset[q.KEY] === q.VALUES.HIDE ? 1 : parseFloat(w.opacity),
1400
+ zIndex: B,
1401
+ borderRadius: w.borderRadius,
1402
+ borderColor: w.borderColor,
1403
+ borderWidth: w.borderWidth,
1404
+ imageSrc: X,
1405
+ isTraveler: f
1406
+ }, Y = A;
1407
+ let ae, ce;
1408
+ const J = [];
1409
+ return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((m) => {
1410
+ const T = m.nodeType === Node.TEXT_NODE ? h : d, D = ke(
1386
1411
  m,
1387
1412
  e,
1388
1413
  T,
1389
1414
  i,
1390
- _,
1391
- l,
1392
- w,
1393
- m.nodeType === Node.TEXT_NODE && Object.keys(g).length > 0 ? g : void 0
1415
+ B,
1416
+ n,
1417
+ E,
1418
+ m.nodeType === Node.TEXT_NODE && Object.keys(p).length > 0 ? p : void 0
1394
1419
  );
1395
- M && $.push(M);
1420
+ D && J.push(D);
1396
1421
  }), {
1397
1422
  id: U,
1398
1423
  type: "BOX",
1399
- element: n,
1424
+ element: a,
1400
1425
  rect: {
1401
- x: E.left + window.scrollX,
1402
- y: E.top + window.scrollY,
1403
- width: E.width,
1404
- height: E.height
1426
+ x: x.left + window.scrollX,
1427
+ y: x.top + window.scrollY,
1428
+ width: x.width,
1429
+ height: x.height
1405
1430
  },
1406
- styles: K,
1407
- textContent: J,
1408
- textStyles: Q,
1431
+ styles: Y,
1432
+ textContent: ae,
1433
+ textStyles: ce,
1409
1434
  dirtyMask: e,
1410
- visibility: f,
1411
- isTraveler: d,
1435
+ visibility: h,
1436
+ isTraveler: f,
1412
1437
  captureLayer: i,
1413
- nativeLayer: w,
1414
- nativeStyles: w !== void 0 ? pe(G({}, I), {
1415
- backgroundColor: (V = g.backgroundColor) != null ? V : I.backgroundColor,
1416
- backgroundImage: (te = g.backgroundImage) != null ? te : I.backgroundImage,
1417
- opacity: (re = g.opacity) != null ? re : I.opacity,
1418
- zIndex: g.zIndex !== void 0 ? g.zIndex + _ : I.zIndex,
1419
- borderRadius: (ie = g.borderRadius) != null ? ie : I.borderRadius,
1420
- borderColor: (se = g.borderColor) != null ? se : I.borderColor,
1421
- borderWidth: (oe = g.borderWidth) != null ? oe : I.borderWidth,
1422
- isTraveler: I.isTraveler
1438
+ nativeLayer: E,
1439
+ nativeStyles: E !== void 0 ? pe(G({}, A), {
1440
+ backgroundColor: (Q = p.backgroundColor) != null ? Q : A.backgroundColor,
1441
+ backgroundImage: (Z = p.backgroundImage) != null ? Z : A.backgroundImage,
1442
+ opacity: (ee = p.opacity) != null ? ee : A.opacity,
1443
+ zIndex: p.zIndex !== void 0 ? p.zIndex + B : A.zIndex,
1444
+ borderRadius: (te = p.borderRadius) != null ? te : A.borderRadius,
1445
+ borderColor: (re = p.borderColor) != null ? re : A.borderColor,
1446
+ borderWidth: (ie = p.borderWidth) != null ? ie : A.borderWidth,
1447
+ isTraveler: A.isTraveler
1423
1448
  }) : void 0,
1424
- nativeRect: w !== void 0 ? {
1425
- x: g.x !== void 0 ? parseFloat(g.x) : E.left + window.scrollX,
1426
- y: g.y !== void 0 ? parseFloat(g.y) : E.top + window.scrollY,
1427
- width: g.width !== void 0 ? parseFloat(g.width) : E.width,
1428
- height: g.height !== void 0 ? parseFloat(g.height) : E.height
1449
+ nativeRect: E !== void 0 ? {
1450
+ x: p.x !== void 0 ? parseFloat(p.x) : x.left + window.scrollX,
1451
+ y: p.y !== void 0 ? parseFloat(p.y) : x.top + window.scrollY,
1452
+ width: p.width !== void 0 ? parseFloat(p.width) : x.width,
1453
+ height: p.height !== void 0 ? parseFloat(p.height) : x.height
1429
1454
  } : void 0,
1430
- isFixed: x.position === "fixed",
1431
- children: $,
1432
- shaderHooks: R
1455
+ isFixed: w.position === "fixed",
1456
+ children: J,
1457
+ shaderHooks: L
1433
1458
  };
1434
1459
  }
1435
- function it(s, e) {
1460
+ function st(s, e) {
1436
1461
  e.size !== 0 && e.forEach((t, i) => {
1437
- var U, F, _, D, I, K, J, Q, $, V, te, re, ie, se, oe, m, T, M;
1462
+ var U, M, B, X, A, Y, ae, ce, J, Q, Z, ee, te, re, ie, m, T, D;
1438
1463
  const r = s.get(i);
1439
1464
  if (!r || !r.userData.basePosition)
1440
1465
  return;
1441
- let { x: l, y: o } = r.userData.basePosition;
1442
- const { width: a, height: n } = r.userData.baseSize, c = (U = t.width) != null ? U : a, h = (F = t.height) != null ? F : n, f = c - a, b = h - n;
1443
- if (t.width !== void 0 && r.userData.originRatioX === void 0 && Math.abs(f) > 0.1) {
1444
- const k = i.getBoundingClientRect(), S = (_ = t.x) != null ? _ : 0, B = (I = (D = r.userData.baseTransform) == null ? void 0 : D.x) != null ? I : 0, C = r.userData.isFixed ? 0 : window.scrollX;
1445
- let y = -(k.left + C - S + B - r.userData.baseDOM.x) / f;
1466
+ let { x: n, y: o } = r.userData.basePosition;
1467
+ const { width: c, height: a } = r.userData.baseSize, l = (U = t.width) != null ? U : c, d = (M = t.height) != null ? M : a, h = l - c, u = d - a;
1468
+ if (t.width !== void 0 && r.userData.originRatioX === void 0 && Math.abs(h) > 0.1) {
1469
+ const k = i.getBoundingClientRect(), S = (B = t.x) != null ? B : 0, O = (A = (X = r.userData.baseTransform) == null ? void 0 : X.x) != null ? A : 0, C = r.userData.isFixed ? 0 : window.scrollX;
1470
+ let y = -(k.left + C - S + O - r.userData.baseDOM.x) / h;
1446
1471
  Math.abs(y) < 0.05 ? y = 0 : Math.abs(y - 1) < 0.05 ? y = 1 : Math.abs(y - 0.5) < 0.05 && (y = 0.5), r.userData.originRatioX = y;
1447
1472
  }
1448
- if (t.height !== void 0 && r.userData.originRatioY === void 0 && Math.abs(b) > 0.1) {
1449
- const k = i.getBoundingClientRect(), S = (K = t.y) != null ? K : 0, B = (Q = (J = r.userData.baseTransform) == null ? void 0 : J.y) != null ? Q : 0, C = r.userData.isFixed ? 0 : window.scrollY;
1450
- let y = -(k.top + C - S + B - r.userData.baseDOM.y) / b;
1473
+ if (t.height !== void 0 && r.userData.originRatioY === void 0 && Math.abs(u) > 0.1) {
1474
+ const k = i.getBoundingClientRect(), S = (Y = t.y) != null ? Y : 0, O = (ce = (ae = r.userData.baseTransform) == null ? void 0 : ae.y) != null ? ce : 0, C = r.userData.isFixed ? 0 : window.scrollY;
1475
+ let y = -(k.top + C - S + O - r.userData.baseDOM.y) / u;
1451
1476
  Math.abs(y) < 0.05 ? y = 0 : Math.abs(y - 1) < 0.05 ? y = 1 : Math.abs(y - 0.5) < 0.05 && (y = 0.5), r.userData.originRatioY = y;
1452
1477
  }
1453
- const p = ($ = r.userData.originRatioX) != null ? $ : 0.5, d = (V = r.userData.originRatioY) != null ? V : 0.5, g = f * (0.5 - p), w = b * (0.5 - d), L = (re = (te = r.userData.baseTransform) == null ? void 0 : te.x) != null ? re : 0, R = (se = (ie = r.userData.baseTransform) == null ? void 0 : ie.y) != null ? se : 0, E = ((oe = t.x) != null ? oe : L) - L, x = ((m = t.y) != null ? m : R) - R;
1454
- r.position.setX(l + g + E), r.position.setY(o - (w + x)), r.scale.set(c, h, 1), H.forceUpdateUniforms(r.material, {
1478
+ const v = (J = r.userData.originRatioX) != null ? J : 0.5, f = (Q = r.userData.originRatioY) != null ? Q : 0.5, p = h * (0.5 - v), E = u * (0.5 - f), R = (ee = (Z = r.userData.baseTransform) == null ? void 0 : Z.x) != null ? ee : 0, L = (re = (te = r.userData.baseTransform) == null ? void 0 : te.y) != null ? re : 0, x = ((ie = t.x) != null ? ie : R) - R, w = ((m = t.y) != null ? m : L) - L;
1479
+ r.position.setX(n + p + x), r.position.setY(o - (E + w)), r.scale.set(l, d, 1), H.forceUpdateUniforms(r.material, {
1455
1480
  backgroundColor: t.backgroundColor,
1456
1481
  backgroundImage: t.backgroundImage,
1457
1482
  opacity: t.opacity,
1458
- borderRadius: (M = t.borderRadius) != null ? M : (T = r.userData.baseStyles) == null ? void 0 : T.borderRadius,
1459
- width: c,
1460
- height: h
1483
+ borderRadius: (D = t.borderRadius) != null ? D : (T = r.userData.baseStyles) == null ? void 0 : T.borderRadius,
1484
+ width: l,
1485
+ height: d
1461
1486
  });
1462
1487
  });
1463
1488
  }
1464
- function st(s, e, t) {
1489
+ function Me(s, e, t) {
1465
1490
  s.forEach((i) => {
1466
1491
  if (i.userData.isFixed && i.userData.initialScroll && i.userData.originalBasePosition) {
1467
- const r = e - i.userData.initialScroll.x, l = t - i.userData.initialScroll.y;
1468
- i.userData.basePosition.x = i.userData.originalBasePosition.x + r, i.userData.basePosition.y = i.userData.originalBasePosition.y - l, i.position.x = i.userData.basePosition.x, i.position.y = i.userData.basePosition.y;
1492
+ const r = e - i.userData.initialScroll.x, n = t - i.userData.initialScroll.y;
1493
+ i.userData.basePosition.x = i.userData.originalBasePosition.x + r, i.userData.basePosition.y = i.userData.originalBasePosition.y - n, i.position.x = i.userData.basePosition.x, i.position.y = i.userData.basePosition.y;
1469
1494
  }
1470
1495
  });
1471
1496
  }
1472
1497
  class ot {
1473
1498
  constructor(e, t, i, r) {
1474
- u(this, "target");
1475
- u(this, "renderer");
1476
- u(this, "registry");
1477
- u(this, "isTravelEnabled", !1);
1478
- u(this, "tracker");
1479
- this.target = e, this.renderer = t, this.registry = i, this.tracker = new Ve(e, {
1499
+ g(this, "target");
1500
+ g(this, "renderer");
1501
+ g(this, "registry");
1502
+ g(this, "isTravelEnabled", !1);
1503
+ g(this, "tracker");
1504
+ this.target = e, this.renderer = t, this.registry = i, this.tracker = new Pe(e, {
1480
1505
  resizeDebounce: r.resizeDebounce
1481
- }), this.tracker.onLayoutChange.add((l, o) => {
1482
- document.querySelector(`[${O.NAME}~='${O.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
1483
- const n = Ie(
1506
+ }), this.tracker.onLayoutChange.add((n, o) => {
1507
+ document.querySelector(`[${F.NAME}~='${F.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
1508
+ const a = ke(
1484
1509
  this.target,
1485
- l,
1486
- P,
1510
+ n,
1511
+ W,
1487
1512
  1,
1488
1513
  0,
1489
1514
  this.renderer.qualityFactor
1490
1515
  );
1491
- n && this.renderer.syncScene(n, o);
1492
- }), this.tracker.onScrollChange.add((l, o) => {
1493
- st(this.renderer.fixedMeshes, l, o);
1494
- }), this.tracker.onStyleChange.add((l) => {
1495
- it(this.registry, l);
1516
+ a && this.renderer.syncScene(a, o);
1517
+ }), this.tracker.onScrollChange.add((n, o) => {
1518
+ Me(this.renderer.fixedMeshes, n, o), this.renderer.updateCameraScroll(n, o);
1519
+ }), this.tracker.onStyleChange.add((n) => {
1520
+ st(this.registry, n);
1496
1521
  }), this.tracker.onRender.add(() => {
1497
1522
  this.renderer.render();
1498
1523
  });
1499
1524
  }
1500
1525
  start() {
1501
- this.tracker.start();
1526
+ this.tracker.start(), Me(this.renderer.fixedMeshes, window.scrollX, window.scrollY), this.renderer.updateCameraScroll(window.scrollX, window.scrollY);
1502
1527
  }
1503
1528
  stop() {
1504
1529
  this.tracker.stop();
@@ -1506,7 +1531,7 @@ class ot {
1506
1531
  }
1507
1532
  class nt {
1508
1533
  constructor() {
1509
- u(this, "store");
1534
+ g(this, "store");
1510
1535
  this.store = /* @__PURE__ */ new WeakMap();
1511
1536
  }
1512
1537
  register(e, t) {
@@ -1531,23 +1556,23 @@ class nt {
1531
1556
  }
1532
1557
  class ht {
1533
1558
  constructor(e, t) {
1534
- u(this, "renderer");
1535
- u(this, "syncer");
1536
- u(this, "target");
1537
- u(this, "registry");
1538
- var r, l, o;
1559
+ g(this, "renderer");
1560
+ g(this, "syncer");
1561
+ g(this, "target");
1562
+ g(this, "registry");
1563
+ var r, n, o;
1539
1564
  if (this.target = e, this.registry = new nt(), !document.getElementById("mirage-engine-styles")) {
1540
- const a = document.createElement("style");
1541
- a.id = "mirage-engine-styles", a.textContent = `
1565
+ const c = document.createElement("style");
1566
+ c.id = "mirage-engine-styles", c.textContent = `
1542
1567
  [${q.NAME}="${q.VALUES.HIDE}"] {
1543
1568
  opacity: 0 !important;
1544
1569
  }
1545
- `, document.head.appendChild(a);
1570
+ `, document.head.appendChild(c);
1546
1571
  }
1547
1572
  let i;
1548
- if (t.mode === "duplicate" ? i = (l = (r = t.container) != null ? r : this.target.parentElement) != null ? l : void 0 : i = (o = this.target.parentElement) != null ? o : void 0, !i)
1573
+ if (t.mode === "duplicate" ? i = (n = (r = t.container) != null ? r : this.target.parentElement) != null ? n : void 0 : i = (o = this.target.parentElement) != null ? o : void 0, !i)
1549
1574
  throw new Error("[Mirage] Cannot find a container (parent or option).");
1550
- this.renderer = new tt(
1575
+ this.renderer = new rt(
1551
1576
  this.target,
1552
1577
  t,
1553
1578
  i,
@@ -1584,10 +1609,10 @@ class ht {
1584
1609
  ArrowUp: !1,
1585
1610
  ArrowDown: !1
1586
1611
  };
1587
- window.addEventListener("keydown", (l) => {
1588
- t[l.key] !== void 0 && (t[l.key] = !0);
1589
- }), window.addEventListener("keyup", (l) => {
1590
- t[l.key] !== void 0 && (t[l.key] = !1);
1612
+ window.addEventListener("keydown", (n) => {
1613
+ t[n.key] !== void 0 && (t[n.key] = !0);
1614
+ }), window.addEventListener("keyup", (n) => {
1615
+ t[n.key] !== void 0 && (t[n.key] = !1);
1591
1616
  });
1592
1617
  const i = 2, r = () => {
1593
1618
  requestAnimationFrame(r), t.ArrowRight && e.position.setX(e.position.x + i), t.ArrowLeft && e.position.setX(e.position.x - i), t.ArrowUp && e.position.setY(e.position.y + i), t.ArrowDown && e.position.setY(e.position.y - i);
@@ -1598,23 +1623,23 @@ class ht {
1598
1623
  export {
1599
1624
  Se as ALLOWED_FILTERS,
1600
1625
  q as ATTR_DOM,
1601
- Y as ATTR_FILTER,
1602
- lt as ATTR_SANDWICH,
1603
- z as ATTR_SELECT,
1604
- Ne as ATTR_SHADER,
1605
- O as ATTR_TRAVEL,
1606
- ve as DIRTY_CONTENT,
1626
+ z as ATTR_FILTER,
1627
+ ct as ATTR_SANDWICH,
1628
+ V as ATTR_SELECT,
1629
+ ze as ATTR_SHADER,
1630
+ F as ATTR_TRAVEL,
1631
+ be as DIRTY_CONTENT,
1607
1632
  he as DIRTY_NONE,
1608
- j as DIRTY_RECT,
1609
- be as DIRTY_STRUCTURE,
1610
- ae as DIRTY_STYLE,
1633
+ $ as DIRTY_RECT,
1634
+ ve as DIRTY_STRUCTURE,
1635
+ oe as DIRTY_STYLE,
1611
1636
  Ye as DIRTY_ZINDEX,
1612
- ct as EXCLUDED,
1637
+ lt as EXCLUDED,
1613
1638
  ht as Engine,
1614
- Z as SELECT_LAYER,
1615
- A as THREE_LAYERS,
1639
+ j as SELECT_LAYER,
1640
+ I as THREE_LAYERS,
1616
1641
  Te as TRAVEL_VALUES,
1617
- Ve as Tracker,
1618
- P as USER_LAYER,
1619
- Pe as extractFromStyle
1642
+ Pe as Tracker,
1643
+ W as USER_LAYER,
1644
+ We as extractFromStyle
1620
1645
  };