mirage-engine 0.3.14 → 0.3.16

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 (3) hide show
  1. package/dist/mirage-engine.js +734 -673
  2. package/dist/mirage-engine.umd.js +44 -24
  3. package/package.json +4 -4
package/dist/mirage-engine.js CHANGED
@@ -1,40 +1,40 @@
1
- var Oe = Object.defineProperty, _e = Object.defineProperties;
2
- var Ne = Object.getOwnPropertyDescriptors;
3
- var we = Object.getOwnPropertySymbols;
4
- var Xe = Object.prototype.hasOwnProperty, ze = Object.prototype.propertyIsEnumerable;
5
- var me = (s, e, t) => e in s ? Oe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, J = (s, e) => {
1
+ var ze = Object.defineProperty, Ne = Object.defineProperties;
2
+ var Xe = Object.getOwnPropertyDescriptors;
3
+ var xe = Object.getOwnPropertySymbols;
4
+ var Ve = Object.prototype.hasOwnProperty, Ye = Object.prototype.propertyIsEnumerable;
5
+ var ve = (s, e, t) => e in s ? ze(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, te = (s, e) => {
6
6
  for (var t in e || (e = {}))
7
- Xe.call(e, t) && me(s, t, e[t]);
8
- if (we)
9
- for (var t of we(e))
10
- ze.call(e, t) && me(s, t, e[t]);
7
+ Ve.call(e, t) && ve(s, t, e[t]);
8
+ if (xe)
9
+ for (var t of xe(e))
10
+ Ye.call(e, t) && ve(s, t, e[t]);
11
11
  return s;
12
- }, xe = (s, e) => _e(s, Ne(e));
13
- var u = (s, e, t) => (me(s, typeof e != "symbol" ? e + "" : e, t), t);
12
+ }, Se = (s, e) => Ne(s, Xe(e));
13
+ var u = (s, e, t) => (ve(s, typeof e != "symbol" ? e + "" : e, t), t);
14
14
  var Ee = (s, e, t) => new Promise((r, i) => {
15
- var l = (o) => {
15
+ var c = (a) => {
16
16
  try {
17
- a(t.next(o));
18
- } catch (c) {
19
- i(c);
17
+ o(t.next(a));
18
+ } catch (l) {
19
+ i(l);
20
20
  }
21
- }, n = (o) => {
21
+ }, n = (a) => {
22
22
  try {
23
- a(t.throw(o));
24
- } catch (c) {
25
- i(c);
23
+ o(t.throw(a));
24
+ } catch (l) {
25
+ i(l);
26
26
  }
27
- }, a = (o) => o.done ? r(o.value) : Promise.resolve(o.value).then(l, n);
28
- a((t = t.apply(s, e)).next());
27
+ }, o = (a) => a.done ? r(a.value) : Promise.resolve(a.value).then(c, n);
28
+ o((t = t.apply(s, e)).next());
29
29
  });
30
- import * as y from "three";
30
+ import * as w from "three";
31
31
  const Ae = {
32
32
  INCLUDE_TREE: "include-tree",
33
33
  EXCLUDE_TREE: "exclude-tree",
34
34
  INCLUDE_SELF: "include-self",
35
35
  EXCLUDE_SELF: "exclude-self",
36
36
  END: "end"
37
- }, K = {
37
+ }, ee = {
38
38
  NAME: "data-mirage-dom",
39
39
  KEY: "mirageDom",
40
40
  VALUES: {
@@ -54,30 +54,30 @@ const Ae = {
54
54
  CAPTURE_8: "8",
55
55
  CAPTURE_9: "9",
56
56
  CAPTURE_10: "10"
57
- }, O = {
57
+ }, z = {
58
58
  NAME: "data-mirage-travel",
59
59
  KEY: "mirageTravel",
60
60
  VALUES: Ce,
61
61
  MAX_LAYERS: Object.keys(Ce).length - 1
62
- }, W = {
62
+ }, G = {
63
63
  NAME: "data-mirage-filter",
64
64
  KEY: "mirageFilter",
65
65
  VALUES: Ae
66
- }, G = {
66
+ }, j = {
67
67
  NAME: "data-mirage-select",
68
68
  KEY: "mirageSelect",
69
69
  VALUES: Ae
70
- }, Ve = {
70
+ }, We = {
71
71
  NAME: "data-mirage-shader",
72
72
  KEY: "mirageShader"
73
- }, Se = {
73
+ }, Te = {
74
74
  NAME: "data-mirage-sandwich",
75
75
  KEY: "mirageSandwich",
76
76
  VALUES: {
77
77
  FRONT: "front"
78
78
  }
79
- }, de = 0, Q = 1, ce = 2, Ye = 4, ue = 8, ve = 16;
80
- function We(s) {
79
+ }, ue = 0, re = 1, he = 2, Pe = 4, fe = 8, we = 16;
80
+ function He(s) {
81
81
  const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
82
82
  return e ? {
83
83
  r: parseInt(e[1]) / 255,
@@ -85,19 +85,19 @@ function We(s) {
85
85
  b: parseInt(e[3]) / 255
86
86
  } : { r: 1, g: 1, b: 1 };
87
87
  }
88
- function He(s) {
88
+ function Ge(s) {
89
89
  const e = {};
90
90
  if (s.opacity && (e.opacity = parseFloat(s.opacity)), s.backgroundColor && s.backgroundColor !== "rgba(0, 0, 0, 0)") {
91
- const t = We(s.backgroundColor);
91
+ const t = He(s.backgroundColor);
92
92
  e.backgroundColor = [t.r, t.g, t.b];
93
93
  }
94
- 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") {
94
+ if (s.backgroundImage ? e.backgroundImage = s.backgroundImage : s.background && (e.backgroundImage = s.background), s.boxShadow && (e.boxShadow = s.boxShadow), 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") {
95
95
  const t = new DOMMatrix(s.transform);
96
96
  e.x = t.m41, e.y = t.m42, e.z = t.m43;
97
97
  }
98
98
  return e;
99
99
  }
100
- class De {
100
+ class ke {
101
101
  constructor(e, t) {
102
102
  u(this, "target");
103
103
  u(this, "observer");
@@ -105,7 +105,7 @@ class De {
105
105
  u(this, "pendingStyles", /* @__PURE__ */ new Map());
106
106
  u(this, "isDomDirty", !1);
107
107
  u(this, "isRunning", !1);
108
- u(this, "pendingMask", de);
108
+ u(this, "pendingMask", ue);
109
109
  u(this, "mutationTimer", null);
110
110
  u(this, "cssTimer", null);
111
111
  u(this, "resizeConfig");
@@ -120,7 +120,7 @@ class De {
120
120
  u(this, "onScrollChange", /* @__PURE__ */ new Set());
121
121
  u(this, "onRender", /* @__PURE__ */ new Set());
122
122
  u(this, "onTransitionFinished", (e) => {
123
- this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= Q | ce, this.cssTimer = window.setTimeout(() => {
123
+ this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= re | he, this.cssTimer = window.setTimeout(() => {
124
124
  this.isDomDirty = !0, this.cssTimer = null;
125
125
  }, 50)));
126
126
  });
@@ -136,38 +136,38 @@ class De {
136
136
  u(this, "renderLoop", () => {
137
137
  if (!this.isRunning)
138
138
  return;
139
- this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = de);
139
+ this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = ue);
140
140
  const e = window.scrollX, t = window.scrollY;
141
141
  (e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((r) => r(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
142
- this.pendingMask |= Q, this.isDomDirty = !0, this.scrollTimer = null;
142
+ this.pendingMask |= re, this.isDomDirty = !0, this.scrollTimer = null;
143
143
  }, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((r) => r(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((r) => r()), requestAnimationFrame(this.renderLoop);
144
144
  });
145
- var i, l;
145
+ var i, c;
146
146
  this.target = e;
147
147
  const r = (i = t.resizeDebounce) != null ? i : !0;
148
148
  r === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : r === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
149
149
  enabled: !0,
150
- delay: (l = r.delay) != null ? l : 150,
150
+ delay: (c = r.delay) != null ? c : 150,
151
151
  onStart: r.onStart,
152
152
  onEnd: r.onEnd
153
153
  }, this.observer = new MutationObserver((n) => {
154
- let a = de;
155
- for (const o of n)
156
- if (o.type === "childList")
157
- a |= ue, o.removedNodes.length > 0 && o.removedNodes.forEach((c) => {
158
- c instanceof HTMLElement && this.pendingDeletions.add(c);
154
+ let o = ue;
155
+ for (const a of n)
156
+ if (a.type === "childList")
157
+ o |= fe, a.removedNodes.length > 0 && a.removedNodes.forEach((l) => {
158
+ l instanceof HTMLElement && this.pendingDeletions.add(l);
159
159
  });
160
- else if (o.type === "attributes")
161
- if (o.attributeName === "style") {
162
- a |= Q | ce;
163
- const c = o.target, d = He(c.style);
164
- this.pendingStyles.set(c, d);
160
+ else if (a.type === "attributes")
161
+ if (a.attributeName === "style") {
162
+ o |= re | he;
163
+ const l = a.target, d = Ge(l.style);
164
+ this.pendingStyles.set(l, d);
165
165
  } else
166
- o.attributeName === "class" ? a |= Q | ce : o.attributeName && o.attributeName.startsWith("data-") && (a |= Q | ce, o.attributeName.startsWith("data-mirage") && (a |= ue));
166
+ a.attributeName === "class" ? o |= re | he : a.attributeName && a.attributeName.startsWith("data-") && (o |= re | he, a.attributeName.startsWith("data-mirage") && (o |= fe));
167
167
  else
168
- o.type === "characterData" && (a |= ve | Q);
169
- if (a !== de) {
170
- if (this.pendingMask |= a, a & ue) {
168
+ a.type === "characterData" && (o |= we | re);
169
+ if (o !== ue) {
170
+ if (this.pendingMask |= o, o & fe) {
171
171
  this.clearTimers(), this.isDomDirty = !0;
172
172
  return;
173
173
  }
@@ -192,13 +192,13 @@ class De {
192
192
  this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
193
193
  }
194
194
  }
195
- const H = 1, ie = 2, I = {
195
+ const $ = 1, oe = 2, O = {
196
196
  BASE: 0,
197
197
  SELECTED: 1,
198
198
  getCaptureLayer: (s) => 31 - s,
199
199
  HIDDEN: 31
200
- }, Te = Object.values(W.VALUES);
201
- class ke {
200
+ }, Re = Object.values(G.VALUES);
201
+ class Ie {
202
202
  /**
203
203
  * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
204
204
  * @param font CSS font shorthand string (e.g., "400 16px Inter")
@@ -215,16 +215,16 @@ class ke {
215
215
  return 0;
216
216
  const t = document.createElement("div"), r = document.createElement("span"), i = document.createElement("img");
217
217
  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", r.style.margin = "0", r.style.padding = "0", r.style.border = "none", r.style.lineHeight = "normal", i.width = 1, i.height = 1, i.style.verticalAlign = "baseline", r.appendChild(document.createTextNode("Hidden Text")), t.appendChild(r), t.appendChild(i), document.body.appendChild(t);
218
- const l = i.offsetTop - r.offsetTop;
219
- return document.body.removeChild(t), l;
218
+ const c = i.offsetTop - r.offsetTop;
219
+ return document.body.removeChild(t), c;
220
220
  }
221
221
  }
222
- u(ke, "cache", /* @__PURE__ */ new Map());
223
- class Pe extends y.MeshBasicMaterial {
224
- constructor(t, r, i, l, n = 2) {
222
+ u(Ie, "cache", /* @__PURE__ */ new Map());
223
+ class $e extends w.MeshBasicMaterial {
224
+ constructor(t, r, i, c, n = 2) {
225
225
  super({
226
226
  transparent: !0,
227
- side: y.FrontSide,
227
+ side: w.FrontSide,
228
228
  color: 16777215
229
229
  });
230
230
  u(this, "canvas");
@@ -232,41 +232,41 @@ class Pe extends y.MeshBasicMaterial {
232
232
  u(this, "qualityFactor");
233
233
  if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
234
234
  throw new Error("[Mirage] Failed to create canvas context");
235
- this.qualityFactor = n, this.map = new y.CanvasTexture(this.canvas), this.map.colorSpace = y.LinearSRGBColorSpace, this.map.minFilter = y.LinearFilter, this.map.magFilter = y.LinearFilter, this.updateText(t, r, i, l);
235
+ this.qualityFactor = n, this.map = new w.CanvasTexture(this.canvas), this.map.colorSpace = w.LinearSRGBColorSpace, this.map.minFilter = w.LinearFilter, this.map.magFilter = w.LinearFilter, this.updateText(t, r, i, c);
236
236
  }
237
237
  wrapText(t, r) {
238
238
  const i = t.split(`
239
- `), l = [];
239
+ `), c = [];
240
240
  return i.forEach((n) => {
241
- const a = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
242
- if (a.length === 0) {
243
- l.push("");
241
+ const o = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
242
+ if (o.length === 0) {
243
+ c.push("");
244
244
  return;
245
245
  }
246
- let o = a[0];
247
- for (let c = 1; c < a.length; c++) {
248
- const d = a[c];
249
- this.ctx.measureText(o + d).width <= r + 2 ? o += d : (o && l.push(o), o = d.trimStart());
246
+ let a = o[0];
247
+ for (let l = 1; l < o.length; l++) {
248
+ const d = o[l];
249
+ this.ctx.measureText(a + d).width <= r + 2 ? a += d : (a && c.push(a), a = d.trimStart());
250
250
  }
251
- o && l.push(o);
252
- }), l;
251
+ a && c.push(a);
252
+ }), c;
253
253
  }
254
- updateText(t, r, i, l, n) {
254
+ updateText(t, r, i, c, n) {
255
255
  n !== void 0 && (this.qualityFactor = n);
256
- const o = (window.devicePixelRatio || 1) * this.qualityFactor, c = i * o, d = l * o;
257
- this.canvas.width !== c || this.canvas.height !== d ? (this.canvas.width = c, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(o, 0, 0, o, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
258
- const h = this.wrapText(t, i), g = r.lineHeight, v = ke.getBaseline(r.font);
259
- h.forEach((p, m) => {
260
- const E = m * g + v;
261
- let M = 0;
262
- r.textAlign === "center" ? M = i / 2 : r.textAlign === "right" && (M = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(p, M, E);
256
+ const a = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * a, d = c * a;
257
+ 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 = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
258
+ const h = this.wrapText(t, i), f = r.lineHeight, g = Ie.getBaseline(r.font);
259
+ h.forEach((p, v) => {
260
+ const y = v * f + g;
261
+ let C = 0;
262
+ r.textAlign === "center" ? C = i / 2 : r.textAlign === "right" && (C = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(p, C, y);
263
263
  }), this.map && (this.map.needsUpdate = !0);
264
264
  }
265
265
  dispose() {
266
266
  this.map && this.map.dispose(), super.dispose();
267
267
  }
268
268
  }
269
- function se(s, e = 0) {
269
+ function ae(s, e = 0) {
270
270
  if (typeof s == "number")
271
271
  return s;
272
272
  const t = parseFloat(s) || 0;
@@ -274,90 +274,111 @@ function se(s, e = 0) {
274
274
  }
275
275
  function le(s) {
276
276
  if (!s || s === "transparent")
277
- return { color: new y.Color(16777215), alpha: 0 };
277
+ return { color: new w.Color(16777215), alpha: 0 };
278
278
  const e = s.match(
279
279
  /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
280
280
  );
281
281
  if (e) {
282
- const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), l = e[4] !== void 0 ? parseFloat(e[4]) : 1;
283
- return { color: new y.Color(`rgb(${t}, ${r}, ${i})`), alpha: l };
282
+ const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
283
+ return { color: new w.Color(`rgb(${t}, ${r}, ${i})`), alpha: c };
284
284
  }
285
- return { color: new y.Color(s), alpha: 1 };
285
+ return { color: new w.Color(s), alpha: 1 };
286
286
  }
287
- function Ge(s) {
287
+ function Ue(s) {
288
288
  const e = [];
289
289
  let t = "", r = 0;
290
290
  for (let i = 0; i < s.length; i++) {
291
- const l = s[i];
292
- if (l === "(")
291
+ const c = s[i];
292
+ if (c === "(")
293
293
  r++;
294
- else if (l === ")")
294
+ else if (c === ")")
295
295
  r--;
296
- else if (l === "," && r === 0) {
296
+ else if (c === "," && r === 0) {
297
297
  e.push(t.trim()), t = "";
298
298
  continue;
299
299
  }
300
- t += l;
300
+ t += c;
301
301
  }
302
302
  return t && e.push(t.trim()), e;
303
303
  }
304
- function $e(s) {
304
+ function qe(s) {
305
305
  if (!s || typeof s != "string" || !s.includes("linear-gradient"))
306
306
  return null;
307
307
  const e = s.match(/linear-gradient\((.*)\)/);
308
308
  if (!e)
309
309
  return null;
310
- const t = e[1], r = Ge(t);
311
- let i = Math.PI, l = 0;
310
+ const t = e[1], r = Ue(t);
311
+ let i = Math.PI, c = 0;
312
312
  const n = r[0].trim();
313
313
  if (n.startsWith("to "))
314
- n === "to top" ? i = 0 : n === "to right" ? i = Math.PI / 2 : n === "to bottom" ? i = Math.PI : n === "to left" ? i = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? i = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? i = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? i = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (i = Math.PI * 1.75), l = 1;
314
+ n === "to top" ? i = 0 : n === "to right" ? i = Math.PI / 2 : n === "to bottom" ? i = Math.PI : n === "to left" ? i = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? i = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? i = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? i = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (i = Math.PI * 1.75), c = 1;
315
315
  else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
316
- const o = parseFloat(n);
317
- n.endsWith("deg") ? i = o * (Math.PI / 180) : n.endsWith("rad") ? i = o : n.endsWith("turn") && (i = o * Math.PI * 2), l = 1;
318
- }
319
- const a = [];
320
- for (let o = l; o < r.length && !(a.length >= 8); o++) {
321
- const c = r[o].trim(), d = c.lastIndexOf(" ");
322
- let h = c, g = null;
323
- if (d !== -1 && !c.endsWith(")")) {
324
- const p = c.substring(d + 1);
325
- (p.endsWith("%") || p.endsWith("px") || !isNaN(parseFloat(p))) && (h = c.substring(0, d).trim(), g = p);
316
+ const a = parseFloat(n);
317
+ n.endsWith("deg") ? i = a * (Math.PI / 180) : n.endsWith("rad") ? i = a : n.endsWith("turn") && (i = a * Math.PI * 2), c = 1;
318
+ }
319
+ const o = [];
320
+ for (let a = c; a < r.length && !(o.length >= 8); a++) {
321
+ const l = r[a].trim(), d = l.lastIndexOf(" ");
322
+ let h = l, f = null;
323
+ if (d !== -1 && !l.endsWith(")")) {
324
+ const p = l.substring(d + 1);
325
+ (p.endsWith("%") || p.endsWith("px") || !isNaN(parseFloat(p))) && (h = l.substring(0, d).trim(), f = p);
326
326
  }
327
- const v = le(h);
328
- a.push({
329
- color: v.color,
330
- alpha: v.alpha,
331
- rawStop: g,
327
+ const g = le(h);
328
+ o.push({
329
+ color: g.color,
330
+ alpha: g.alpha,
331
+ rawStop: f,
332
332
  stop: 0
333
333
  });
334
334
  }
335
- if (a.length > 0) {
336
- for (let c = 0; c < a.length; c++)
337
- a[c].rawStop !== null && (a[c].stop = parseFloat(a[c].rawStop) / 100);
338
- a[0].rawStop === null && (a[0].stop = 0), a.length > 1 && a[a.length - 1].rawStop === null && (a[a.length - 1].stop = 1);
339
- let o = 0;
340
- for (let c = 1; c < a.length; c++)
341
- if (a[c].rawStop !== null || c === a.length - 1) {
342
- const d = c - o;
335
+ if (o.length > 0) {
336
+ for (let l = 0; l < o.length; l++)
337
+ o[l].rawStop !== null && (o[l].stop = parseFloat(o[l].rawStop) / 100);
338
+ o[0].rawStop === null && (o[0].stop = 0), o.length > 1 && o[o.length - 1].rawStop === null && (o[o.length - 1].stop = 1);
339
+ let a = 0;
340
+ for (let l = 1; l < o.length; l++)
341
+ if (o[l].rawStop !== null || l === o.length - 1) {
342
+ const d = l - a;
343
343
  if (d > 1) {
344
- const h = a[o].stop, v = (a[c].stop - h) / d;
344
+ const h = o[a].stop, g = (o[l].stop - h) / d;
345
345
  for (let p = 1; p < d; p++)
346
- a[o + p].stop = h + v * p;
346
+ o[a + p].stop = h + g * p;
347
347
  }
348
- o = c;
348
+ a = l;
349
349
  }
350
350
  }
351
- return { angle: i, stops: a };
351
+ return { angle: i, stops: o };
352
352
  }
353
- const qe = `varying vec2 vUv;
353
+ function je(s) {
354
+ if (!s || s === "none")
355
+ return null;
356
+ const e = Ue(s);
357
+ if (e.length === 0)
358
+ return null;
359
+ const t = e[0].trim(), r = /(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/, i = t.match(r);
360
+ let c = "transparent", n = t;
361
+ if (i && i[1] !== "inset") {
362
+ const g = i[1];
363
+ (g.startsWith("rgb") || g.startsWith("#") || g === "black" || g === "white" || g === "transparent") && (c = g, n = t.replace(g, "").trim());
364
+ }
365
+ n = n.replace("inset", "").trim();
366
+ const o = n.split(/\s+/).map((g) => parseFloat(g) || 0), a = o[0] || 0, l = o[1] || 0, d = o[2] || 0, h = o[3] || 0, f = le(c);
367
+ return { offsetX: a, offsetY: l, blurRadius: d, spreadRadius: h, color: f.color, alpha: f.alpha };
368
+ }
369
+ const Ke = `varying vec2 vUv;
354
370
  varying vec4 vScreenPos;
355
371
  void main() {
356
372
  vUv = uv;
357
373
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
358
374
  vScreenPos = gl_Position;
359
- }`, je = `varying vec2 vUv;
375
+ }`, Je = `varying vec2 vUv;
360
376
  uniform vec2 uSize;
377
+ uniform vec2 uMeshSize;
378
+ uniform vec4 uShadowColor;
379
+ uniform vec2 uShadowOffset;
380
+ uniform float uShadowBlur;
381
+ uniform float uShadowSpread;
361
382
  uniform vec4 uBorderRadius;
362
383
  uniform float uBorderWidth;
363
384
  uniform vec4 uBgColor;
@@ -413,11 +434,10 @@ float sdVisualBox(vec2 p, vec2 b, float r) {
413
434
  return min(max(q.x, q.y), 0.0) + d;
414
435
  }
415
436
 
416
- vec4 calculateGradientLayer(vec2 uv) {
437
+ vec4 calculateGradientLayer(vec2 p) {
417
438
  if (uGradientCount < 2) return uGradientColors[0];
418
439
 
419
440
  vec2 dir = vec2(sin(uGradientAngle), cos(uGradientAngle));
420
- vec2 p = (uv - 0.5) * uSize;
421
441
  float proj = dot(p, dir);
422
442
  float L = abs(uSize.x * dir.x) + abs(uSize.y * dir.y);
423
443
  float t = clamp((proj / L) + 0.5, 0.0, 1.0);
@@ -436,7 +456,7 @@ vec4 calculateGradientLayer(vec2 uv) {
436
456
  }
437
457
 
438
458
  void main() {
439
- vec2 p = (vUv - 0.5) * uSize;
459
+ vec2 p = (vUv - 0.5) * uMeshSize;
440
460
  vec2 halfSize = uSize * 0.5;
441
461
 
442
462
  // CSS Proportional Border-Radius Clamping
@@ -457,7 +477,7 @@ void main() {
457
477
  vec4 baseColor = vec4(uBgColor.rgb, uBgColor.a);
458
478
 
459
479
  if (uGradientCount > 0) {
460
- vec4 gradColor = calculateGradientLayer(vUv);
480
+ vec4 gradColor = calculateGradientLayer(p);
461
481
  baseColor = blendSrcOver(gradColor, baseColor);
462
482
  }
463
483
 
@@ -484,11 +504,26 @@ void main() {
484
504
 
485
505
  // final blending (border + background) using blendSrcOver
486
506
  vec4 borderLayer = vec4(uBorderColor.rgb, borderAlpha);
487
- vec4 finalColor = blendSrcOver(borderLayer, baseColor);
507
+ vec4 mainColor = blendSrcOver(borderLayer, baseColor);
508
+ mainColor.a *= bgMask;
509
+
510
+ vec4 shadowLayer = vec4(0.0);
511
+ if (uShadowColor.a > 0.001) {
512
+ vec2 shadowP = p - vec2(uShadowOffset.x, -uShadowOffset.y);
513
+ float shadowRadius = max(r + uShadowSpread, 0.0);
514
+ vec2 shadowHalfSize = max(halfSize + vec2(uShadowSpread), vec2(0.0));
515
+ float shadowD = sdRoundedBox(shadowP, shadowHalfSize, shadowRadius);
516
+ float blur = max(uShadowBlur, 1.0);
517
+ float shadowMask = 1.0 - smoothstep(-blur * 0.5, blur * 0.5, shadowD);
518
+ shadowLayer = vec4(uShadowColor.rgb, uShadowColor.a * shadowMask);
519
+ }
520
+
521
+ vec4 finalColor = blendSrcOver(mainColor, shadowLayer);
522
+
488
523
  // final color control (Tint, Noise)
489
524
  #INJECT_COLOR_MODIFIER
490
525
 
491
- float finalOpacity = finalColor.a * bgMask * uOpacity;
526
+ float finalOpacity = finalColor.a * uOpacity;
492
527
  if (finalOpacity < 0.001) discard;
493
528
 
494
529
  gl_FragColor = vec4(finalColor.rgb, finalOpacity);
@@ -496,99 +531,114 @@ void main() {
496
531
 
497
532
  // #include <colorspace_fragment>
498
533
  }
499
- `, Ke = `uniform sampler2D uTexture;
534
+ `, Ze = `uniform sampler2D uTexture;
500
535
  varying vec4 vScreenPos;
501
536
  uniform vec2 uTextureRepeat;
502
- uniform vec2 uTextureOffset;`, Je = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
537
+ uniform vec2 uTextureOffset;`, Qe = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
503
538
  vec2 resultUv = screenUv;
504
539
 
505
- `, Qe = `vec4 texColor = texture2D(uTexture, resultUv);
506
- baseColor = blendSrcOver(baseColor, texColor);`, Re = {
507
- vertexShader: qe,
508
- fragmentShader: je
509
- }, Le = {
510
- declChunk: Ke,
511
- uvChunk: Je,
512
- baseColorChunk: Qe
540
+ `, et = `vec4 texColor = texture2D(uTexture, resultUv);
541
+ baseColor = blendSrcOver(baseColor, texColor);`, Le = {
542
+ vertexShader: Ke,
543
+ fragmentShader: Je
544
+ }, Me = {
545
+ declChunk: Ze,
546
+ uvChunk: Qe,
547
+ baseColorChunk: et
513
548
  };
514
- function Ze(s, e, t, r = null, i) {
515
- var C;
516
- const l = r !== null || !!s.imageSrc;
549
+ function tt(s, e, t, r = null, i) {
550
+ var S;
551
+ const c = r !== null || !!s.imageSrc;
517
552
  let n = "";
518
- const a = {};
553
+ const o = {};
519
554
  if (i != null && i.uniforms)
520
- for (const [S, w] of Object.entries(i.uniforms))
521
- typeof w == "number" ? (n += `uniform float ${S};
522
- `, a[S] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${S};
523
- `, a[S] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${S};
524
- `, a[S] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${S};
525
- `, a[S] = { value: new y.Vector4(...w) }) : (n += `uniform float ${S};
526
- `, a[S] = { value: w });
527
- const o = i !== void 0, c = (l || o ? Le.declChunk : "") + `
555
+ for (const [R, E] of Object.entries(i.uniforms))
556
+ typeof E == "number" ? (n += `uniform float ${R};
557
+ `, o[R] = { value: E }) : Array.isArray(E) ? E.length === 2 ? (n += `uniform vec2 ${R};
558
+ `, o[R] = { value: new w.Vector2(...E) }) : E.length === 3 ? (n += `uniform vec3 ${R};
559
+ `, o[R] = { value: new w.Vector3(...E) }) : E.length === 4 && (n += `uniform vec4 ${R};
560
+ `, o[R] = { value: new w.Vector4(...E) }) : (n += `uniform float ${R};
561
+ `, o[R] = { value: E });
562
+ const a = i !== void 0, l = (c || a ? Me.declChunk : "") + `
528
563
  ` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
529
564
  `, h = s.isTraveler ? `vec2 resultUv = screenUv;
530
- ` : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
531
- `, g = l || o ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", v = l || o ? Le.baseColorChunk : "", p = (i == null ? void 0 : i.colorModifier) || "", m = Re.fragmentShader.replace("#INJECT_DECLARATIONS", c).replace("#INJECT_UV_MODIFIER", g).replace("#INJECT_BASE_COLOR", v).replace("#INJECT_COLOR_MODIFIER", p), E = le(s.backgroundColor), M = le(s.borderColor), L = {
532
- uSize: { value: new y.Vector2(e, t) },
565
+ ` : `vec2 localUv = (p / uSize) + 0.5;
566
+ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
567
+ `, f = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", g = c || a ? Me.baseColorChunk : "", p = (i == null ? void 0 : i.colorModifier) || "", v = Le.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", g).replace("#INJECT_COLOR_MODIFIER", p), y = le(s.backgroundColor), C = le(s.borderColor), k = {
568
+ uSize: { value: new w.Vector2(e, t) },
569
+ uMeshSize: { value: new w.Vector2(e, t) },
570
+ uShadowColor: { value: new w.Vector4(0, 0, 0, 0) },
571
+ uShadowOffset: { value: new w.Vector2(0, 0) },
572
+ uShadowBlur: { value: 0 },
573
+ uShadowSpread: { value: 0 },
533
574
  uBgColor: {
534
- value: new y.Vector4(
535
- E.color.r,
536
- E.color.g,
537
- E.color.b,
538
- E.alpha
575
+ value: new w.Vector4(
576
+ y.color.r,
577
+ y.color.g,
578
+ y.color.b,
579
+ y.alpha
539
580
  )
540
581
  },
541
582
  uBorderColor: {
542
- value: new y.Vector4(
543
- M.color.r,
544
- M.color.g,
545
- M.color.b,
546
- M.alpha
583
+ value: new w.Vector4(
584
+ C.color.r,
585
+ C.color.g,
586
+ C.color.b,
587
+ C.alpha
547
588
  )
548
589
  },
549
- uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
550
- uBorderWidth: { value: se(s.borderWidth) },
551
- uOpacity: { value: (C = s.opacity) != null ? C : 1 },
590
+ uBorderRadius: { value: new w.Vector4(0, 0, 0, 0) },
591
+ uBorderWidth: { value: ae(s.borderWidth) },
592
+ uOpacity: { value: (S = s.opacity) != null ? S : 1 },
552
593
  uTexture: { value: null },
553
- uTextureRepeat: { value: new y.Vector2(1, 1) },
554
- uTextureOffset: { value: new y.Vector2(0, 0) },
594
+ uTextureRepeat: { value: new w.Vector2(1, 1) },
595
+ uTextureOffset: { value: new w.Vector2(0, 0) },
555
596
  uGradientCount: { value: 0 },
556
597
  uGradientAngle: { value: 0 },
557
598
  uGradientColors: {
558
- value: Array.from({ length: 8 }, () => new y.Vector4(0, 0, 0, 0))
599
+ value: Array.from({ length: 8 }, () => new w.Vector4(0, 0, 0, 0))
559
600
  },
560
601
  uGradientStops: { value: new Float32Array(8) }
561
602
  };
562
- Ie(L.uBorderRadius.value, s.borderRadius, Math.min(e, t)), l && (L.uTexture.value = r);
563
- const R = new y.ShaderMaterial({
564
- uniforms: J(J({}, L), a),
565
- vertexShader: Re.vertexShader,
566
- fragmentShader: m,
603
+ Be(k.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (k.uTexture.value = r);
604
+ const D = new w.ShaderMaterial({
605
+ uniforms: te(te({}, k), o),
606
+ vertexShader: Le.vertexShader,
607
+ fragmentShader: v,
567
608
  transparent: !0,
568
- side: y.FrontSide
609
+ side: w.FrontSide
569
610
  // for better performance
570
611
  });
571
- return s.backgroundImage && ye(R, { backgroundImage: s.backgroundImage }), R;
612
+ return s.backgroundImage && ye(D, { backgroundImage: s.backgroundImage }), D;
572
613
  }
573
- function et(s, e, t, r, i) {
574
- const l = se(e.borderWidth);
614
+ function rt(s, e, t, r, i) {
615
+ const c = ae(e.borderWidth);
575
616
  ye(s, {
576
617
  width: t,
577
618
  height: r,
578
619
  borderRadius: e.borderRadius,
579
- borderWidth: l,
620
+ borderWidth: c,
580
621
  backgroundColor: e.backgroundColor,
581
622
  borderColor: e.borderColor,
582
623
  opacity: e.opacity,
583
624
  texture: i,
584
- backgroundImage: e.backgroundImage
625
+ backgroundImage: e.backgroundImage,
626
+ boxShadow: e.boxShadow
585
627
  });
586
628
  }
587
629
  function ye(s, e) {
588
- var r, i, l;
589
- if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0) {
630
+ var r, i, c;
631
+ if (e.boxShadow !== void 0) {
632
+ const n = je(e.boxShadow);
633
+ n ? (s.uniforms.uShadowColor.value.set(n.color.r, n.color.g, n.color.b, n.alpha), s.uniforms.uShadowOffset.value.set(n.offsetX, n.offsetY), s.uniforms.uShadowBlur.value = n.blurRadius, s.uniforms.uShadowSpread.value = n.spreadRadius, s.userData.shadowPadding = n.blurRadius + n.spreadRadius + Math.max(Math.abs(n.offsetX), Math.abs(n.offsetY))) : (s.uniforms.uShadowColor.value.w = 0, s.userData.shadowPadding = 0);
634
+ }
635
+ if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), s.uniforms.uMeshSize) {
636
+ const n = s.userData.shadowPadding || 0, o = e.width !== void 0 ? e.width : s.uniforms.uSize.value.x, a = e.height !== void 0 ? e.height : s.uniforms.uSize.value.y;
637
+ s.uniforms.uMeshSize.value.set(o + n * 2, a + n * 2);
638
+ }
639
+ if (e.borderRadius !== void 0) {
590
640
  const n = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(s.uniforms.uSize.value.x, s.uniforms.uSize.value.y);
591
- Ie(s.uniforms.uBorderRadius.value, e.borderRadius, n);
641
+ Be(s.uniforms.uBorderRadius.value, e.borderRadius, n);
592
642
  }
593
643
  if (e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
594
644
  if (Array.isArray(e.backgroundColor)) {
@@ -645,42 +695,42 @@ function ye(s, e) {
645
695
  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);
646
696
  const t = e.texture !== void 0 ? e.texture : (r = s.uniforms.uTexture) == null ? void 0 : r.value;
647
697
  if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
648
- const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, o = (i = e.width) != null ? i : s.uniforms.uSize.value.x, c = (l = e.height) != null ? l : s.uniforms.uSize.value.y;
649
- if (n && a && o && c) {
650
- const d = n / a, h = o / c;
698
+ const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, o = t.image.naturalHeight || t.image.videoHeight || t.image.height, a = (i = e.width) != null ? i : s.uniforms.uSize.value.x, l = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
699
+ if (n && o && a && l) {
700
+ const d = n / o, h = a / l;
651
701
  if (d > h) {
652
- const g = h / d;
653
- s.uniforms.uTextureRepeat.value.set(g, 1), s.uniforms.uTextureOffset.value.set((1 - g) / 2, 0);
702
+ const f = h / d;
703
+ s.uniforms.uTextureRepeat.value.set(f, 1), s.uniforms.uTextureOffset.value.set((1 - f) / 2, 0);
654
704
  } else {
655
- const g = d / h;
656
- s.uniforms.uTextureRepeat.value.set(1, g), s.uniforms.uTextureOffset.value.set(0, (1 - g) / 2);
705
+ const f = d / h;
706
+ s.uniforms.uTextureRepeat.value.set(1, f), s.uniforms.uTextureOffset.value.set(0, (1 - f) / 2);
657
707
  }
658
708
  }
659
709
  } else
660
710
  s.uniforms.uTextureRepeat && (s.uniforms.uTextureRepeat.value.set(1, 1), s.uniforms.uTextureOffset.value.set(0, 0));
661
711
  if (e.backgroundImage !== void 0) {
662
- const n = $e(e.backgroundImage);
712
+ const n = qe(e.backgroundImage);
663
713
  if (n) {
664
714
  s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
665
- for (let a = 0; a < 8; a++)
666
- if (a < n.stops.length) {
667
- const o = n.stops[a];
668
- s.uniforms.uGradientColors.value[a].set(
669
- o.color.r,
670
- o.color.g,
671
- o.color.b,
672
- o.alpha
673
- ), s.uniforms.uGradientStops.value[a] = o.stop;
715
+ for (let o = 0; o < 8; o++)
716
+ if (o < n.stops.length) {
717
+ const a = n.stops[o];
718
+ s.uniforms.uGradientColors.value[o].set(
719
+ a.color.r,
720
+ a.color.g,
721
+ a.color.b,
722
+ a.alpha
723
+ ), s.uniforms.uGradientStops.value[o] = a.stop;
674
724
  } else
675
- s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
725
+ s.uniforms.uGradientColors.value[o].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[o] = 1;
676
726
  } else
677
727
  s.uniforms.uGradientCount.value = 0;
678
728
  }
679
729
  for (const n of Object.keys(e))
680
- n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
730
+ n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && n !== "boxShadow" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
681
731
  }
682
- function Ie(s, e, t = 0) {
683
- var o, c, d, h;
732
+ function Be(s, e, t = 0) {
733
+ var a, l, d, h;
684
734
  if (e == null) {
685
735
  s.set(0, 0, 0, 0);
686
736
  return;
@@ -693,37 +743,37 @@ function Ie(s, e, t = 0) {
693
743
  s.set(e[0], e[1], e[2], e[3]);
694
744
  return;
695
745
  }
696
- const r = e.split("/")[0].trim().split(/\s+/), i = se(r[0], t), l = se((o = r[1]) != null ? o : r[0], t), n = se((c = r[2]) != null ? c : r[0], t), a = se((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
697
- s.set(i, l, n, a);
746
+ const r = e.split("/")[0].trim().split(/\s+/), i = ae(r[0], t), c = ae((a = r[1]) != null ? a : r[0], t), n = ae((l = r[2]) != null ? l : r[0], t), o = ae((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
747
+ s.set(i, c, n, o);
698
748
  }
699
- const V = {
700
- create(s, e, t, r, i, l = 2, n = null, a) {
701
- return s === "BOX" ? Ze(
749
+ const W = {
750
+ create(s, e, t, r, i, c = 2, n = null, o) {
751
+ return s === "BOX" ? tt(
702
752
  e,
703
753
  r,
704
754
  i,
705
755
  n,
706
- a
707
- ) : s === "TEXT" ? new Pe(
756
+ o
757
+ ) : s === "TEXT" ? new $e(
708
758
  t || "",
709
759
  e,
710
760
  r,
711
761
  i,
712
- l
713
- ) : new y.MeshBasicMaterial({ visible: !1 });
762
+ c
763
+ ) : new w.MeshBasicMaterial({ visible: !1 });
714
764
  },
715
- update(s, e, t, r, i, l, n = 2, a) {
716
- e === "BOX" ? et(
765
+ update(s, e, t, r, i, c, n = 2, o) {
766
+ e === "BOX" ? rt(
717
767
  s,
718
768
  t,
719
769
  i,
720
- l,
721
- a
770
+ c,
771
+ o
722
772
  ) : e === "TEXT" && s.updateText(
723
773
  r || "",
724
774
  t,
725
775
  i,
726
- l,
776
+ c,
727
777
  n
728
778
  );
729
779
  },
@@ -731,7 +781,7 @@ const V = {
731
781
  ye(s, e);
732
782
  }
733
783
  };
734
- class tt {
784
+ class it {
735
785
  constructor(e, t = !0) {
736
786
  u(this, "observer");
737
787
  u(this, "textures", /* @__PURE__ */ new WeakMap());
@@ -741,8 +791,8 @@ class tt {
741
791
  this.onUpdate = e, t && (this.observer = new IntersectionObserver(
742
792
  (r) => {
743
793
  for (const i of r) {
744
- const l = i.target;
745
- i.isIntersecting ? this.loadTexture(l) : this.disposeTexture(l);
794
+ const c = i.target;
795
+ i.isIntersecting ? this.loadTexture(c) : this.disposeTexture(c);
746
796
  }
747
797
  },
748
798
  { rootMargin: "300px" }
@@ -766,9 +816,9 @@ class tt {
766
816
  try {
767
817
  let r;
768
818
  if (t.startsWith("data:image/svg+xml"))
769
- r = yield new Promise((l, n) => {
770
- const a = new Image();
771
- a.onload = () => l(a), a.onerror = n, a.src = t;
819
+ r = yield new Promise((c, n) => {
820
+ const o = new Image();
821
+ o.onload = () => c(o), o.onerror = n, o.src = t;
772
822
  });
773
823
  else {
774
824
  const n = yield (yield fetch(t)).blob();
@@ -778,8 +828,8 @@ class tt {
778
828
  "close" in r && r.close();
779
829
  return;
780
830
  }
781
- const i = new y.Texture(r);
782
- r instanceof HTMLImageElement || (i.flipY = !1), i.colorSpace = y.LinearSRGBColorSpace, i.needsUpdate = !0, this.textures.set(e, i), this.onUpdate(e, i);
831
+ const i = new w.Texture(r);
832
+ r instanceof HTMLImageElement || (i.flipY = !1), i.colorSpace = w.LinearSRGBColorSpace, i.needsUpdate = !0, this.textures.set(e, i), this.onUpdate(e, i);
783
833
  } catch (r) {
784
834
  console.warn("[MirageEngine] Failed to load texture:", t, r);
785
835
  } finally {
@@ -799,7 +849,7 @@ class tt {
799
849
  this.observer && this.observer.disconnect();
800
850
  }
801
851
  }
802
- class rt {
852
+ class st {
803
853
  constructor(e, t, r, i) {
804
854
  u(this, "canvas");
805
855
  u(this, "scene");
@@ -818,50 +868,50 @@ class rt {
818
868
  u(this, "registry");
819
869
  u(this, "targetRect");
820
870
  u(this, "travelersByLayer", Array.from(
821
- { length: O.MAX_LAYERS },
871
+ { length: z.MAX_LAYERS },
822
872
  () => /* @__PURE__ */ new Set()
823
873
  ));
824
874
  u(this, "textureManager");
825
875
  // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
826
876
  u(this, "fixedMeshes", /* @__PURE__ */ new Set());
827
- var a, o, c, d, h;
828
- this.target = e, this.mountContainer = r, this.registry = i, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (o = t.canvasSize) != null ? o : "viewport", this.clipArea = (c = t.travelerClipArea) != null ? c : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new tt((g, v) => {
829
- const p = this.registry.get(g);
830
- p && p.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(p.material, { texture: v });
831
- }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
832
- const l = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
833
- this.camera = new y.OrthographicCamera(
834
- l / -2,
835
- l / 2,
877
+ var o, a, l, d, h;
878
+ this.target = e, this.mountContainer = r, this.registry = i, this.mode = (o = t.mode) != null ? o : "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 it((f, g) => {
879
+ const p = this.registry.get(f);
880
+ p && p.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(p.material, { texture: g });
881
+ }, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new w.Scene(), this.targetRect = this.target.getBoundingClientRect();
882
+ const c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
883
+ this.camera = new w.OrthographicCamera(
884
+ c / -2,
885
+ c / 2,
836
886
  n / 2,
837
887
  n / -2,
838
888
  1,
839
889
  1e3
840
- ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new y.WebGLRenderer({
890
+ ), this.camera.position.z = 100, this.camera.layers.set(this.getSceneLayer()), this.renderer = new w.WebGLRenderer({
841
891
  canvas: this.canvas,
842
892
  alpha: !0,
843
893
  antialias: !0
844
894
  // [new]
845
895
  // premultipliedAlpha: true
846
- }), y.ColorManagement.enabled = !1, this.renderer.outputColorSpace = y.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(l, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
896
+ }), w.ColorManagement.enabled = !1, this.renderer.outputColorSpace = w.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
847
897
  }
848
898
  get isViewport() {
849
899
  return this.mode === "overlay" && this.canvasSize === "viewport";
850
900
  }
851
901
  getSceneLayer() {
852
- return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? I.SELECTED : I.BASE;
902
+ return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? O.SELECTED : O.BASE;
853
903
  }
854
904
  createRenderTarget() {
855
- for (let e = 0; e < O.MAX_LAYERS; e++) {
905
+ for (let e = 0; e < z.MAX_LAYERS; e++) {
856
906
  const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, r = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
857
907
  this.renderTargets.push(
858
- new y.WebGLRenderTarget(
908
+ new w.WebGLRenderTarget(
859
909
  t * this.qualityFactor,
860
910
  r * this.qualityFactor,
861
911
  {
862
- minFilter: y.LinearFilter,
863
- magFilter: y.LinearFilter,
864
- format: y.RGBAFormat,
912
+ minFilter: w.LinearFilter,
913
+ magFilter: w.LinearFilter,
914
+ format: w.RGBAFormat,
865
915
  stencilBuffer: !1,
866
916
  depthBuffer: !0
867
917
  }
@@ -899,12 +949,12 @@ class rt {
899
949
  updateUniforms(e, t) {
900
950
  const r = this.registry.get(e);
901
951
  r && (r.traverse((i) => {
902
- i.isMesh && i.material && V.forceUpdateUniforms(
952
+ i.isMesh && i.material && W.forceUpdateUniforms(
903
953
  i.material,
904
954
  t
905
955
  );
906
956
  }), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
907
- i.isMesh && i.material && V.forceUpdateUniforms(
957
+ i.isMesh && i.material && W.forceUpdateUniforms(
908
958
  i.material,
909
959
  t
910
960
  );
@@ -920,17 +970,17 @@ class rt {
920
970
  this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
921
971
  }
922
972
  syncScene(e, t) {
923
- const r = this.target.getBoundingClientRect(), i = this.isViewport ? window.innerWidth + this.overscan * 2 : r.width, l = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, o = Math.abs(i - n) > 0.1 || Math.abs(l - a) > 0.1, c = this.mode === "overlay" && (Math.abs(r.top - this.targetRect.top) > 0.1 || Math.abs(r.left - this.targetRect.left) > 0.1);
924
- o ? (this.targetRect = r, this.setSize(i, l), this.updateCanvasLayout()) : c ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
973
+ const r = this.target.getBoundingClientRect(), i = this.isViewport ? window.innerWidth + this.overscan * 2 : r.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, o = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, a = Math.abs(i - n) > 0.1 || Math.abs(c - o) > 0.1, l = this.mode === "overlay" && (Math.abs(r.top - this.targetRect.top) > 0.1 || Math.abs(r.left - this.targetRect.left) > 0.1);
974
+ a ? (this.targetRect = r, this.setSize(i, c), this.updateCanvasLayout()) : l ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
925
975
  const h = this.registry.get(d);
926
976
  if (h) {
927
977
  this.scene.remove(h);
928
- for (const g of this.travelersByLayer)
929
- g.delete(h);
978
+ for (const f of this.travelersByLayer)
979
+ f.delete(h);
930
980
  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(
931
- (g) => g.dispose()
932
- ) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((g) => {
933
- g instanceof y.Mesh && (g.geometry && g.geometry.dispose(), g.material && (Array.isArray(g.material) ? g.material.forEach((v) => v.dispose()) : g.material.dispose()));
981
+ (f) => f.dispose()
982
+ ) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((f) => {
983
+ f instanceof w.Mesh && (f.geometry && f.geometry.dispose(), f.material && (Array.isArray(f.material) ? f.material.forEach((g) => g.dispose()) : f.material.dispose()));
934
984
  }), this.registry.remove(d), this.textureManager.unregister(d);
935
985
  }
936
986
  });
@@ -940,24 +990,24 @@ class rt {
940
990
  // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
941
991
  // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
942
992
  reconcileNode(e) {
943
- var i, l;
993
+ var i, c;
944
994
  let t = this.registry.get(e.element);
945
995
  const r = JSON.stringify(e.shaderHooks || null);
946
- if (t && t.userData.shaderHash !== r && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof y.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
947
- const n = new y.PlaneGeometry(1, 1), a = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = V.create(
996
+ if (t && t.userData.shaderHash !== r && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof w.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
997
+ const n = new w.PlaneGeometry(1, 1), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = W.create(
948
998
  "BOX",
949
999
  e.styles,
950
1000
  "",
951
1001
  e.rect.width,
952
1002
  e.rect.height,
953
1003
  this.qualityFactor,
954
- a,
1004
+ o,
955
1005
  e.shaderHooks
956
1006
  );
957
- t = new y.Mesh(n, o), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = o, t.userData.domElement = e.element, t.userData.shaderHash = r;
1007
+ t = new w.Mesh(n, a), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = a, t.userData.domElement = e.element, t.userData.shaderHash = r;
958
1008
  }
959
- if ((l = e.nativeStyles) != null && l.transform ? t.userData.nativeTransform = e.nativeStyles.transform : t.userData.nativeTransform = void 0, this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
960
- for (let n = 0; n < O.MAX_LAYERS; n++)
1009
+ if ((c = e.nativeStyles) != null && c.transform ? t.userData.nativeTransform = e.nativeStyles.transform : t.userData.nativeTransform = void 0, this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
1010
+ for (let n = 0; n < z.MAX_LAYERS; n++)
961
1011
  n === e.captureLayer - 2 ? this.travelersByLayer[n].add(t) : this.travelersByLayer[n].delete(t);
962
1012
  else
963
1013
  for (const n of this.travelersByLayer)
@@ -973,37 +1023,37 @@ class rt {
973
1023
  ));
974
1024
  }
975
1025
  reconcileTextChild(e, t, r) {
976
- var c;
1026
+ var l;
977
1027
  const i = t.textLines || [
978
1028
  { text: t.textContent || "", rect: t.rect }
979
- ], l = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(l) + t.textContent + i.map((d) => d.text).join("|"), a = (c = e.userData) == null ? void 0 : c.textChildStyleHash;
980
- if (t.dirtyMask & ve || n !== a) {
1029
+ ], c = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + i.map((d) => d.text).join("|"), o = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
1030
+ if (t.dirtyMask & we || n !== o) {
981
1031
  e.children.filter(
982
1032
  (p) => p.name.startsWith("TEXT_CHILD")
983
1033
  ).forEach((p) => {
984
- var E;
985
- const m = p;
986
- (E = m.material.map) == null || E.dispose(), m.geometry.dispose(), e.remove(m);
1034
+ var y;
1035
+ const v = p;
1036
+ (y = v.material.map) == null || y.dispose(), v.geometry.dispose(), e.remove(v);
987
1037
  });
988
- const h = t.rect, g = h.x + h.width / 2, v = h.y + h.height / 2;
989
- i.forEach((p, m) => {
990
- const E = V.create(
1038
+ const h = t.rect, f = h.x + h.width / 2, g = h.y + h.height / 2;
1039
+ i.forEach((p, v) => {
1040
+ const y = W.create(
991
1041
  "TEXT",
992
- l,
1042
+ c,
993
1043
  p.text,
994
1044
  p.rect.width,
995
1045
  p.rect.height,
996
1046
  this.qualityFactor
997
- ), M = new y.PlaneGeometry(1, 1), L = new y.Mesh(M, E);
998
- L.name = `TEXT_CHILD_${m}`;
999
- const R = t.rect.width === 0 ? 1 : p.rect.width / t.rect.width, C = t.rect.height === 0 ? 1 : p.rect.height / t.rect.height;
1000
- L.scale.set(R, C, 1);
1001
- const S = p.rect.x + p.rect.width / 2, w = p.rect.y + p.rect.height / 2, B = S - g, _ = -(w - v);
1002
- L.position.set(
1003
- t.rect.width === 0 ? 0 : B / t.rect.width,
1004
- t.rect.height === 0 ? 0 : _ / t.rect.height,
1047
+ ), C = new w.PlaneGeometry(1, 1), k = new w.Mesh(C, y);
1048
+ k.name = `TEXT_CHILD_${v}`;
1049
+ const D = t.rect.width === 0 ? 1 : p.rect.width / t.rect.width, S = t.rect.height === 0 ? 1 : p.rect.height / t.rect.height;
1050
+ k.scale.set(D, S, 1);
1051
+ const R = p.rect.x + p.rect.width / 2, E = p.rect.y + p.rect.height / 2, V = R - f, N = -(E - g);
1052
+ k.position.set(
1053
+ t.rect.width === 0 ? 0 : V / t.rect.width,
1054
+ t.rect.height === 0 ? 0 : N / t.rect.height,
1005
1055
  5e-3
1006
- ), e.add(L);
1056
+ ), e.add(k);
1007
1057
  }), e.userData.textChildStyleHash = n;
1008
1058
  }
1009
1059
  e.children.forEach((d) => {
@@ -1011,52 +1061,54 @@ class rt {
1011
1061
  return;
1012
1062
  const h = d;
1013
1063
  if (r && t.nativeLayer !== void 0)
1014
- h.layers.set(I.HIDDEN), t.visibility & H && h.layers.enable(I.getCaptureLayer(t.nativeLayer));
1064
+ h.layers.set(O.HIDDEN), t.visibility & $ && h.layers.enable(O.getCaptureLayer(t.nativeLayer));
1015
1065
  else {
1016
- const g = t.visibility & H ? I.BASE : I.HIDDEN;
1017
- if (h.layers.set(g), t.visibility & ie && h.layers.enable(I.SELECTED), t.visibility & H)
1066
+ const f = t.visibility & $ ? O.BASE : O.HIDDEN;
1067
+ if (h.layers.set(f), t.visibility & oe && h.layers.enable(O.SELECTED), t.visibility & $)
1018
1068
  if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
1019
- for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
1020
- v !== t.nativeLayer && h.layers.enable(I.getCaptureLayer(v));
1069
+ for (let g = t.captureLayer; g <= z.MAX_LAYERS + 1; g++)
1070
+ g !== t.nativeLayer && h.layers.enable(O.getCaptureLayer(g));
1021
1071
  else
1022
- for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
1023
- h.layers.enable(I.getCaptureLayer(v));
1072
+ for (let g = t.captureLayer; g <= z.MAX_LAYERS + 1; g++)
1073
+ h.layers.enable(O.getCaptureLayer(g));
1024
1074
  }
1025
1075
  });
1026
1076
  }
1027
1077
  updateMeshProperties(e, t) {
1028
- var R, C, S;
1029
- const { rect: r, styles: i } = t, l = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / l, a = this.renderer.domElement.height / l;
1030
- e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
1078
+ var S, R, E, V, N;
1079
+ const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, o = this.renderer.domElement.height / c;
1080
+ e.material = e.userData.baseMaterial;
1081
+ let a = ((S = e.material.userData) == null ? void 0 : S.shadowPadding) || 0;
1082
+ e.scale.set(r.width + a * 2, r.height + a * 2, 1), e.userData.domRect = {
1031
1083
  x: r.x,
1032
1084
  y: r.y,
1033
1085
  width: r.width,
1034
1086
  height: r.height
1035
1087
  };
1036
- const o = 1e-3;
1088
+ const l = 1e-3;
1037
1089
  this.renderOrder++;
1038
- const c = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
1039
- let h, g;
1090
+ const d = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY;
1091
+ let f, g;
1040
1092
  if (this.isViewport)
1041
- h = r.x - window.innerWidth / 2 + r.width / 2, g = -r.y + window.innerHeight / 2 - r.height / 2;
1093
+ f = r.x - window.innerWidth / 2 + r.width / 2, g = -r.y + window.innerHeight / 2 - r.height / 2;
1042
1094
  else {
1043
- const w = r.x - c, B = r.y - d;
1044
- h = w - n / 2 + r.width / 2, g = -B + a / 2 - r.height / 2;
1095
+ const L = r.x - d, P = r.y - h;
1096
+ f = L - n / 2 + r.width / 2, g = -P + o / 2 - r.height / 2;
1045
1097
  }
1046
1098
  e.position.set(
1047
- h,
1099
+ f,
1048
1100
  g,
1049
- i.zIndex + this.renderOrder * o
1101
+ i.zIndex + this.renderOrder * l
1050
1102
  );
1051
- const v = r.x, p = r.y;
1052
- e.userData.basePosition = { x: h, y: g }, e.userData.originalBasePosition = { x: h, y: g }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: v, y: p }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
1053
- const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(m);
1054
- let M = 0, L = 0;
1055
- if (E.transform && E.transform !== "none") {
1056
- const w = new DOMMatrix(E.transform);
1057
- M = w.m41, L = w.m42;
1103
+ const p = r.x, v = r.y;
1104
+ e.userData.basePosition = { x: f, y: g }, e.userData.originalBasePosition = { x: f, y: g }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: v }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
1105
+ const y = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, C = window.getComputedStyle(y);
1106
+ let k = 0, D = 0;
1107
+ if (C.transform && C.transform !== "none") {
1108
+ const L = new DOMMatrix(C.transform);
1109
+ k = L.m41, D = L.m42;
1058
1110
  }
1059
- if (e.userData.baseTransform = { x: M, y: L }, delete e.userData.originRatioX, delete e.userData.originRatioY, V.update(
1111
+ if (e.userData.baseTransform = { x: k, y: D }, delete e.userData.originRatioX, delete e.userData.originRatioY, W.update(
1060
1112
  e.userData.baseMaterial,
1061
1113
  "BOX",
1062
1114
  i,
@@ -1067,216 +1119,221 @@ class rt {
1067
1119
  t.isTraveler ? (R = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : R.texture : this.textureManager.get(t.element)
1068
1120
  ), t.nativeStyles && t.nativeRect) {
1069
1121
  if (!e.userData.nativeMesh) {
1070
- const N = V.create(
1122
+ const X = W.create(
1071
1123
  "BOX",
1072
1124
  t.nativeStyles,
1073
1125
  "",
1074
1126
  t.nativeRect.width,
1075
1127
  t.nativeRect.height,
1076
1128
  this.qualityFactor,
1077
- t.isTraveler ? (C = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : C.texture : this.textureManager.get(t.element),
1129
+ t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.texture : this.textureManager.get(t.element),
1078
1130
  t.shaderHooks
1079
- ), X = new y.Mesh(e.geometry, N);
1080
- t.type === "TEXT" && (X.name = "BG_MESH"), this.scene.add(X), e.userData.nativeMesh = X;
1131
+ ), Y = new w.Mesh(e.geometry, X);
1132
+ t.type === "TEXT" && (Y.name = "BG_MESH"), this.scene.add(Y), e.userData.nativeMesh = Y;
1081
1133
  }
1082
- const w = e.userData.nativeMesh;
1083
- let B, _;
1134
+ const L = e.userData.nativeMesh;
1135
+ let P, J;
1084
1136
  if (this.isViewport)
1085
- B = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, _ = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
1137
+ P = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, J = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
1086
1138
  else {
1087
- const N = t.nativeRect.x - c, X = t.nativeRect.y - d;
1088
- B = N - n / 2 + t.nativeRect.width / 2, _ = -X + a / 2 - t.nativeRect.height / 2;
1139
+ const X = t.nativeRect.x - d, Y = t.nativeRect.y - h;
1140
+ P = X - n / 2 + t.nativeRect.width / 2, J = -Y + o / 2 - t.nativeRect.height / 2;
1089
1141
  }
1090
- let b = t.nativeRect.width, U = t.nativeRect.height, $ = B, q = _;
1142
+ let Z = t.nativeRect.width, M = t.nativeRect.height, B = P, q = J;
1091
1143
  if (t.nativeStyles.transform) {
1092
- const N = t.nativeStyles.transform, X = N.match(/scale\(([\d.]+%?)\)/);
1093
- if (X) {
1094
- let f = parseFloat(X[1]);
1095
- X[1].includes("%") && (f /= 100), b *= f, U *= f;
1144
+ const X = t.nativeStyles.transform, Y = X.match(/scale\(([\d.]+%?)\)/);
1145
+ if (Y) {
1146
+ let b = parseFloat(Y[1]);
1147
+ Y[1].includes("%") && (b /= 100), Z *= b, M *= b;
1096
1148
  }
1097
- const Z = N.match(/scaleX\(([\d.]+%?)\)/);
1098
- if (Z) {
1099
- let f = parseFloat(Z[1]);
1100
- Z[1].includes("%") && (f /= 100), b *= f;
1149
+ const ie = X.match(/scaleX\(([\d.]+%?)\)/);
1150
+ if (ie) {
1151
+ let b = parseFloat(ie[1]);
1152
+ ie[1].includes("%") && (b /= 100), Z *= b;
1101
1153
  }
1102
- const ee = N.match(/scaleY\(([\d.]+%?)\)/);
1103
- if (ee) {
1104
- let f = parseFloat(ee[1]);
1105
- ee[1].includes("%") && (f /= 100), U *= f;
1154
+ const se = X.match(/scaleY\(([\d.]+%?)\)/);
1155
+ if (se) {
1156
+ let b = parseFloat(se[1]);
1157
+ se[1].includes("%") && (b /= 100), M *= b;
1106
1158
  }
1107
- const te = N.match(/translate\(([^,]+),\s*([^)]+)\)/);
1108
- if (te) {
1109
- const f = te[1].trim(), x = te[2].trim();
1110
- let D = parseFloat(f);
1111
- f.includes("%") && (D = D / 100 * t.nativeRect.width);
1159
+ const m = X.match(/translate\(([^,]+),\s*([^)]+)\)/);
1160
+ if (m) {
1161
+ const b = m[1].trim(), x = m[2].trim();
1162
+ let _ = parseFloat(b);
1163
+ b.includes("%") && (_ = _ / 100 * t.nativeRect.width);
1112
1164
  let F = parseFloat(x);
1113
- x.includes("%") && (F = F / 100 * t.nativeRect.height), $ += D, q -= F;
1165
+ x.includes("%") && (F = F / 100 * t.nativeRect.height), B += _, q -= F;
1114
1166
  }
1115
- const ne = N.match(/translateX\(([^)]+)\)/);
1116
- if (ne) {
1117
- const f = ne[1].trim();
1118
- let x = parseFloat(f);
1119
- f.includes("%") && (x = x / 100 * t.nativeRect.width), $ += x;
1167
+ const A = X.match(/translateX\(([^)]+)\)/);
1168
+ if (A) {
1169
+ const b = A[1].trim();
1170
+ let x = parseFloat(b);
1171
+ b.includes("%") && (x = x / 100 * t.nativeRect.width), B += x;
1120
1172
  }
1121
- const ae = N.match(/translateY\(([^)]+)\)/);
1122
- if (ae) {
1123
- const f = ae[1].trim();
1124
- let x = parseFloat(f);
1125
- f.includes("%") && (x = x / 100 * t.nativeRect.height), q -= x;
1173
+ const U = X.match(/translateY\(([^)]+)\)/);
1174
+ if (U) {
1175
+ const b = U[1].trim();
1176
+ let x = parseFloat(b);
1177
+ b.includes("%") && (x = x / 100 * t.nativeRect.height), q -= x;
1126
1178
  }
1127
1179
  }
1128
- w.scale.set(b, U, 1), w.position.set(
1129
- $,
1180
+ let K = ((V = L.material.userData) == null ? void 0 : V.shadowPadding) || 0;
1181
+ L.scale.set(Z + K * 2, M + K * 2, 1), L.position.set(
1182
+ B,
1130
1183
  q,
1131
- t.nativeStyles.zIndex + this.renderOrder * o
1132
- ), V.update(
1133
- w.material,
1184
+ t.nativeStyles.zIndex + this.renderOrder * l
1185
+ ), W.update(
1186
+ L.material,
1134
1187
  "BOX",
1135
1188
  t.nativeStyles,
1136
1189
  "",
1137
1190
  t.nativeRect.width,
1138
1191
  t.nativeRect.height,
1139
1192
  this.qualityFactor,
1140
- t.isTraveler ? (S = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : S.texture : this.textureManager.get(t.element)
1193
+ t.isTraveler ? (N = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : N.texture : this.textureManager.get(t.element)
1141
1194
  );
1142
1195
  } else
1143
- e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
1196
+ e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof w.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
1144
1197
  }
1145
1198
  updateMeshLayers(e, t) {
1146
- const r = t.visibility & H ? I.BASE : I.HIDDEN;
1147
- if (e.layers.set(r), t.visibility & ie && e.layers.enable(I.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
1199
+ const r = t.visibility & $ ? O.BASE : O.HIDDEN;
1200
+ if (e.layers.set(r), t.visibility & oe && e.layers.enable(O.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
1148
1201
  const i = e.userData.nativeMesh;
1149
- if (i.layers.set(I.HIDDEN), t.visibility & H) {
1150
- i.layers.enable(I.getCaptureLayer(t.nativeLayer));
1151
- for (let l = t.captureLayer; l <= O.MAX_LAYERS + 1; l++)
1152
- l !== t.nativeLayer && e.layers.enable(I.getCaptureLayer(l));
1202
+ if (i.layers.set(O.HIDDEN), t.visibility & $) {
1203
+ i.layers.enable(O.getCaptureLayer(t.nativeLayer));
1204
+ for (let c = t.captureLayer; c <= z.MAX_LAYERS + 1; c++)
1205
+ c !== t.nativeLayer && e.layers.enable(O.getCaptureLayer(c));
1153
1206
  }
1154
- } else if (t.visibility & H)
1155
- for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
1156
- e.layers.enable(I.getCaptureLayer(i));
1207
+ } else if (t.visibility & $)
1208
+ for (let i = t.captureLayer; i <= z.MAX_LAYERS + 1; i++)
1209
+ e.layers.enable(O.getCaptureLayer(i));
1157
1210
  }
1158
1211
  captureRenderTarget(e, t, r) {
1159
1212
  if (e.size === 0 || !r)
1160
1213
  return;
1161
- const i = new y.Color(), l = this.renderer.getClearAlpha();
1214
+ const i = new w.Color(), c = this.renderer.getClearAlpha();
1162
1215
  this.renderer.getClearColor(i), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(r), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
1163
- const n = new y.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, c = this.renderer.getPixelRatio();
1216
+ const n = new w.Vector3(), o = 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();
1164
1217
  for (const d of e) {
1165
1218
  n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
1166
- const h = (n.x + 1) / 2 * a, g = (n.y + 1) / 2 * o;
1167
- let v = 0, p = 1;
1168
- typeof this.clipArea == "number" ? p = this.clipArea : this.clipArea.endsWith("%") ? p = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (v = parseFloat(this.clipArea));
1169
- const m = d.scale.x * p + 0.5, E = d.scale.y * p + 0.5, M = h - m / 2, L = g - E / 2, R = (M * this.qualityFactor - v) / c, C = (L * this.qualityFactor - v) / c, S = (m * this.qualityFactor + v * 2) / c, w = (E * this.qualityFactor + v * 2) / c;
1170
- this.renderer.setScissor(R, C, S, w), this.renderer.render(this.scene, this.camera);
1219
+ const h = (n.x + 1) / 2 * o, f = (n.y + 1) / 2 * a;
1220
+ let g = 0, p = 1;
1221
+ typeof this.clipArea == "number" ? p = this.clipArea : this.clipArea.endsWith("%") ? p = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (g = parseFloat(this.clipArea));
1222
+ const v = d.scale.x * p + 0.5, y = d.scale.y * p + 0.5, C = h - v / 2, k = f - y / 2, D = (C * this.qualityFactor - g) / l, S = (k * this.qualityFactor - g) / l, R = (v * this.qualityFactor + g * 2) / l, E = (y * this.qualityFactor + g * 2) / l;
1223
+ this.renderer.setScissor(D, S, R, E), this.renderer.render(this.scene, this.camera);
1171
1224
  }
1172
- this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, l);
1225
+ this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, c);
1173
1226
  }
1174
1227
  render() {
1175
- for (let e = 0; e < O.MAX_LAYERS; e++) {
1228
+ for (let e = 0; e < z.MAX_LAYERS; e++) {
1176
1229
  const t = e + 1;
1177
1230
  this.captureRenderTarget(
1178
1231
  this.travelersByLayer[e],
1179
- I.getCaptureLayer(t),
1232
+ O.getCaptureLayer(t),
1180
1233
  this.renderTargets[e]
1181
1234
  );
1182
1235
  }
1183
1236
  this.renderer.render(this.scene, this.camera);
1184
1237
  }
1185
1238
  syncMeshesByDOM() {
1186
- const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), i = this.renderer.domElement.width / r, l = this.renderer.domElement.height / r;
1239
+ const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), i = this.renderer.domElement.width / r, c = this.renderer.domElement.height / r;
1187
1240
  this.scene.children.forEach((n) => {
1188
- const a = n;
1189
- if (!a.userData || !a.userData.domElement)
1241
+ var h, f;
1242
+ const o = n;
1243
+ if (!o.userData || !o.userData.domElement)
1190
1244
  return;
1191
- const o = a.userData.domElement;
1192
- if (!o.isConnected)
1245
+ const a = o.userData.domElement;
1246
+ if (!a.isConnected)
1193
1247
  return;
1194
- let c;
1195
- if (o.nodeType === Node.TEXT_NODE) {
1196
- const h = document.createRange();
1197
- h.selectNode(o), c = h.getBoundingClientRect();
1248
+ let l;
1249
+ if (a.nodeType === Node.TEXT_NODE) {
1250
+ const g = document.createRange();
1251
+ g.selectNode(a), l = g.getBoundingClientRect();
1198
1252
  } else
1199
- c = o.getBoundingClientRect();
1200
- const d = a.userData.domRect;
1201
- if (!d || Math.abs(c.x - d.x) > 0.5 || Math.abs(c.y - d.y) > 0.5 || Math.abs(c.width - d.width) > 0.5 || Math.abs(c.height - d.height) > 0.5) {
1202
- a.userData.domRect = {
1203
- x: c.x,
1204
- y: c.y,
1205
- width: c.width,
1206
- height: c.height
1253
+ l = a.getBoundingClientRect();
1254
+ const d = o.userData.domRect;
1255
+ if (!d || Math.abs(l.x - d.x) > 0.5 || Math.abs(l.y - d.y) > 0.5 || Math.abs(l.width - d.width) > 0.5 || Math.abs(l.height - d.height) > 0.5) {
1256
+ o.userData.domRect = {
1257
+ x: l.x,
1258
+ y: l.y,
1259
+ width: l.width,
1260
+ height: l.height
1207
1261
  };
1208
- let h, g;
1262
+ let g, p;
1209
1263
  if (this.isViewport)
1210
- h = c.x - window.innerWidth / 2 + c.width / 2, g = -c.y + window.innerHeight / 2 - c.height / 2;
1264
+ g = l.x - window.innerWidth / 2 + l.width / 2, p = -l.y + window.innerHeight / 2 - l.height / 2;
1211
1265
  else {
1212
- const v = c.x - e, p = c.y - t;
1213
- h = v - i / 2 + c.width / 2, g = -p + l / 2 - c.height / 2;
1266
+ const y = l.x - e, C = l.y - t;
1267
+ g = y - i / 2 + l.width / 2, p = -C + c / 2 - l.height / 2;
1214
1268
  }
1215
- if (a.position.setX(h), a.position.setY(g), a.scale.set(c.width, c.height, 1), a.updateMatrixWorld(), a.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(a.material, {
1216
- width: c.width,
1217
- height: c.height
1218
- }), a.userData.nativeMesh) {
1219
- const v = a.userData.nativeMesh;
1220
- let p = c.width, m = c.height, E = h, M = g;
1221
- if (a.userData.nativeTransform) {
1222
- const L = a.userData.nativeTransform, R = L.match(/scale\(([\d.]+%?)\)/);
1223
- if (R) {
1224
- let b = parseFloat(R[1]);
1225
- R[1].includes("%") && (b /= 100), p *= b, m *= b;
1269
+ o.position.setX(g), o.position.setY(p);
1270
+ let v = ((h = o.material.userData) == null ? void 0 : h.shadowPadding) || 0;
1271
+ if (o.scale.set(l.width + v * 2, l.height + v * 2, 1), o.updateMatrixWorld(), o.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(o.material, {
1272
+ width: l.width,
1273
+ height: l.height
1274
+ }), o.userData.nativeMesh) {
1275
+ const y = o.userData.nativeMesh;
1276
+ let C = l.width, k = l.height, D = g, S = p;
1277
+ if (o.userData.nativeTransform) {
1278
+ const E = o.userData.nativeTransform, V = E.match(/scale\(([\d.]+%?)\)/);
1279
+ if (V) {
1280
+ let M = parseFloat(V[1]);
1281
+ V[1].includes("%") && (M /= 100), C *= M, k *= M;
1226
1282
  }
1227
- const C = L.match(/scaleX\(([\d.]+%?)\)/);
1228
- if (C) {
1229
- let b = parseFloat(C[1]);
1230
- C[1].includes("%") && (b /= 100), p *= b;
1283
+ const N = E.match(/scaleX\(([\d.]+%?)\)/);
1284
+ if (N) {
1285
+ let M = parseFloat(N[1]);
1286
+ N[1].includes("%") && (M /= 100), C *= M;
1231
1287
  }
1232
- const S = L.match(/scaleY\(([\d.]+%?)\)/);
1233
- if (S) {
1234
- let b = parseFloat(S[1]);
1235
- S[1].includes("%") && (b /= 100), m *= b;
1288
+ const L = E.match(/scaleY\(([\d.]+%?)\)/);
1289
+ if (L) {
1290
+ let M = parseFloat(L[1]);
1291
+ L[1].includes("%") && (M /= 100), k *= M;
1236
1292
  }
1237
- const w = L.match(/translate\(([^,]+),\s*([^)]+)\)/);
1238
- if (w) {
1239
- const b = w[1].trim(), U = w[2].trim();
1240
- let $ = parseFloat(b);
1241
- b.includes("%") && ($ = $ / 100 * c.width);
1242
- let q = parseFloat(U);
1243
- U.includes("%") && (q = q / 100 * c.height), E += $, M -= q;
1293
+ const P = E.match(/translate\(([^,]+),\s*([^)]+)\)/);
1294
+ if (P) {
1295
+ const M = P[1].trim(), B = P[2].trim();
1296
+ let q = parseFloat(M);
1297
+ M.includes("%") && (q = q / 100 * l.width);
1298
+ let K = parseFloat(B);
1299
+ B.includes("%") && (K = K / 100 * l.height), D += q, S -= K;
1244
1300
  }
1245
- const B = L.match(/translateX\(([^)]+)\)/);
1246
- if (B) {
1247
- const b = B[1].trim();
1248
- let U = parseFloat(b);
1249
- b.includes("%") && (U = U / 100 * c.width), E += U;
1301
+ const J = E.match(/translateX\(([^)]+)\)/);
1302
+ if (J) {
1303
+ const M = J[1].trim();
1304
+ let B = parseFloat(M);
1305
+ M.includes("%") && (B = B / 100 * l.width), D += B;
1250
1306
  }
1251
- const _ = L.match(/translateY\(([^)]+)\)/);
1252
- if (_) {
1253
- const b = _[1].trim();
1254
- let U = parseFloat(b);
1255
- b.includes("%") && (U = U / 100 * c.height), M -= U;
1307
+ const Z = E.match(/translateY\(([^)]+)\)/);
1308
+ if (Z) {
1309
+ const M = Z[1].trim();
1310
+ let B = parseFloat(M);
1311
+ M.includes("%") && (B = B / 100 * l.height), S -= B;
1256
1312
  }
1257
1313
  }
1258
- v.position.setX(E), v.position.setY(M), v.scale.set(p, m, 1), v.updateMatrixWorld(), v.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(v.material, {
1259
- width: p,
1260
- height: m
1314
+ let R = ((f = y.material.userData) == null ? void 0 : f.shadowPadding) || 0;
1315
+ y.position.setX(D), y.position.setY(S), y.scale.set(C + R * 2, k + R * 2, 1), y.updateMatrixWorld(), y.material instanceof w.ShaderMaterial && W.forceUpdateUniforms(y.material, {
1316
+ width: C,
1317
+ height: k
1261
1318
  });
1262
1319
  }
1263
1320
  }
1264
1321
  });
1265
1322
  }
1266
1323
  }
1267
- function it(s) {
1324
+ function nt(s) {
1268
1325
  const e = s.textContent || "", t = [];
1269
- let r = "", i = null, l = -1;
1270
- const n = (c, d) => {
1271
- for (let h = 0; h < c.length; h++) {
1272
- const g = c[h], v = document.createRange();
1273
- v.setStart(s, d + h), v.setEnd(s, d + h + 1);
1274
- const p = v.getBoundingClientRect();
1326
+ let r = "", i = null, c = -1;
1327
+ const n = (l, d) => {
1328
+ for (let h = 0; h < l.length; h++) {
1329
+ const f = l[h], g = document.createRange();
1330
+ g.setStart(s, d + h), g.setEnd(s, d + h + 1);
1331
+ const p = g.getBoundingClientRect();
1275
1332
  if (p.width === 0 && p.height === 0) {
1276
- r += g;
1333
+ r += f;
1277
1334
  continue;
1278
1335
  }
1279
- l === -1 || Math.abs(p.top - l) > p.height / 2 ? (r && i && t.push({
1336
+ c === -1 || Math.abs(p.top - c) > p.height / 2 ? (r && i && t.push({
1280
1337
  text: r,
1281
1338
  rect: {
1282
1339
  left: i.left,
@@ -1284,31 +1341,31 @@ function it(s) {
1284
1341
  width: i.right - i.left,
1285
1342
  height: i.bottom - i.top
1286
1343
  }
1287
- }), r = g, i = {
1344
+ }), r = f, i = {
1288
1345
  left: p.left,
1289
1346
  top: p.top,
1290
1347
  right: p.right,
1291
1348
  bottom: p.bottom
1292
- }, l = p.top) : (r += g, i && (i.left = Math.min(i.left, p.left), i.top = Math.min(i.top, p.top), i.right = Math.max(i.right, p.right), i.bottom = Math.max(
1349
+ }, c = p.top) : (r += f, i && (i.left = Math.min(i.left, p.left), i.top = Math.min(i.top, p.top), i.right = Math.max(i.right, p.right), i.bottom = Math.max(
1293
1350
  i.bottom,
1294
1351
  p.bottom
1295
1352
  )));
1296
1353
  }
1297
- }, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
1298
- let o = 0;
1299
- for (const c of a) {
1354
+ }, o = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
1355
+ let a = 0;
1356
+ for (const l of o) {
1300
1357
  const d = document.createRange();
1301
- d.setStart(s, o), d.setEnd(s, o + c.length);
1358
+ d.setStart(s, a), d.setEnd(s, a + l.length);
1302
1359
  const h = d.getClientRects();
1303
1360
  if (h.length > 1)
1304
- n(c, o);
1361
+ n(l, a);
1305
1362
  else {
1306
- const g = h.length === 1 ? h[0] : d.getBoundingClientRect();
1307
- if (g.width === 0 && g.height === 0) {
1308
- r += c, o += c.length;
1363
+ const f = h.length === 1 ? h[0] : d.getBoundingClientRect();
1364
+ if (f.width === 0 && f.height === 0) {
1365
+ r += l, a += l.length;
1309
1366
  continue;
1310
1367
  }
1311
- l === -1 || Math.abs(g.top - l) > g.height / 2 ? (r && i && t.push({
1368
+ c === -1 || Math.abs(f.top - c) > f.height / 2 ? (r && i && t.push({
1312
1369
  text: r,
1313
1370
  rect: {
1314
1371
  left: i.left,
@@ -1316,17 +1373,17 @@ function it(s) {
1316
1373
  width: i.right - i.left,
1317
1374
  height: i.bottom - i.top
1318
1375
  }
1319
- }), r = c, i = {
1320
- left: g.left,
1321
- top: g.top,
1322
- right: g.right,
1323
- bottom: g.bottom
1324
- }, l = g.top) : (r += c, i && (i.left = Math.min(i.left, g.left), i.top = Math.min(i.top, g.top), i.right = Math.max(i.right, g.right), i.bottom = Math.max(
1376
+ }), r = l, i = {
1377
+ left: f.left,
1378
+ top: f.top,
1379
+ right: f.right,
1380
+ bottom: f.bottom
1381
+ }, c = f.top) : (r += l, i && (i.left = Math.min(i.left, f.left), i.top = Math.min(i.top, f.top), i.right = Math.max(i.right, f.right), i.bottom = Math.max(
1325
1382
  i.bottom,
1326
- g.bottom
1383
+ f.bottom
1327
1384
  )));
1328
1385
  }
1329
- o += c.length;
1386
+ a += l.length;
1330
1387
  }
1331
1388
  return r && i && t.push({
1332
1389
  text: r,
@@ -1337,10 +1394,10 @@ function it(s) {
1337
1394
  height: i.bottom - i.top
1338
1395
  }
1339
1396
  }), t.filter(
1340
- (c) => c.text.trim().length > 0 && c.rect.width > 0 && c.rect.height > 0
1397
+ (l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
1341
1398
  );
1342
1399
  }
1343
- function Me(s) {
1400
+ function De(s) {
1344
1401
  const e = parseFloat(s.fontSize);
1345
1402
  let t = parseFloat(s.lineHeight);
1346
1403
  isNaN(t) && (t = e * 1.2);
@@ -1356,44 +1413,44 @@ function Me(s) {
1356
1413
  letterSpacing: r
1357
1414
  };
1358
1415
  }
1359
- function Ue(s, e = Q | ce | Ye | ve | ue, t, r = 1, i = 0, l = 2, n, a) {
1360
- var X, Z, ee, te, ne, ae;
1416
+ function Oe(s, e = re | he | Pe | we | fe, t, r = 1, i = 0, c = 2, n, o) {
1417
+ var B, q, K, X, Y, ie, se;
1361
1418
  if (s.nodeType === Node.TEXT_NODE) {
1362
- const f = s;
1363
- if (!f.textContent || !f.textContent.trim())
1419
+ const m = s;
1420
+ if (!m.textContent || !m.textContent.trim())
1364
1421
  return null;
1365
- const x = f.textContent.replace(/\s+/g, " ");
1366
- if (x.length === 0)
1422
+ const A = m.textContent.replace(/\s+/g, " ");
1423
+ if (A.length === 0)
1367
1424
  return null;
1368
- const D = it(f);
1369
- if (D.length === 0)
1425
+ const U = nt(m);
1426
+ if (U.length === 0)
1370
1427
  return null;
1371
- const F = f.parentElement, k = F ? window.getComputedStyle(F) : null;
1372
- if (!k)
1428
+ const b = m.parentElement, x = b ? window.getComputedStyle(b) : null;
1429
+ if (!x)
1373
1430
  return null;
1374
- const P = Math.min(...D.map((T) => T.rect.left)), z = Math.min(...D.map((T) => T.rect.top)), j = Math.max(...D.map((T) => T.rect.left + T.rect.width)), A = Math.max(...D.map((T) => T.rect.top + T.rect.height));
1431
+ const _ = Math.min(...U.map((T) => T.rect.left)), F = Math.min(...U.map((T) => T.rect.top)), Q = Math.max(...U.map((T) => T.rect.left + T.rect.width)), I = Math.max(...U.map((T) => T.rect.top + T.rect.height));
1375
1432
  return {
1376
1433
  id: Math.random().toString(36).substring(2, 9),
1377
1434
  type: "TEXT",
1378
- element: f,
1435
+ element: m,
1379
1436
  rect: {
1380
- x: P + window.scrollX,
1381
- y: z + window.scrollY,
1382
- width: j - P,
1383
- height: A - z
1437
+ x: _ + window.scrollX,
1438
+ y: F + window.scrollY,
1439
+ width: Q - _,
1440
+ height: I - F
1384
1441
  },
1385
1442
  styles: {
1386
1443
  backgroundColor: "transparent",
1387
1444
  backgroundImage: "",
1388
- opacity: F && F.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(k.opacity),
1389
- zIndex: (isNaN(parseInt(k.zIndex)) ? 0 : parseInt(k.zIndex)) + i,
1445
+ opacity: b && b.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(x.opacity),
1446
+ zIndex: (isNaN(parseInt(x.zIndex)) ? 0 : parseInt(x.zIndex)) + i,
1390
1447
  borderRadius: "0px",
1391
1448
  borderColor: "transparent",
1392
1449
  borderWidth: "0px",
1393
1450
  isTraveler: !1
1394
1451
  },
1395
- textContent: x,
1396
- textLines: D.map((T) => ({
1452
+ textContent: A,
1453
+ textLines: U.map((T) => ({
1397
1454
  text: T.text.trim(),
1398
1455
  rect: {
1399
1456
  x: T.rect.left + window.scrollX,
@@ -1402,266 +1459,270 @@ function Ue(s, e = Q | ce | Ye | ve | ue, t, r = 1, i = 0, l = 2, n, a) {
1402
1459
  height: T.rect.height
1403
1460
  }
1404
1461
  })),
1405
- textStyles: Me(k),
1462
+ textStyles: De(x),
1406
1463
  dirtyMask: e,
1407
1464
  visibility: t,
1408
1465
  isTraveler: !1,
1409
1466
  captureLayer: r,
1410
- isFixed: k.position === "fixed",
1467
+ isFixed: x.position === "fixed",
1411
1468
  nativeLayer: n,
1412
- nativeStyles: a ? J(J({
1469
+ nativeStyles: o ? te(te({
1413
1470
  backgroundColor: "transparent",
1414
1471
  backgroundImage: "",
1415
- opacity: F && F.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(k.opacity),
1416
- zIndex: (isNaN(parseInt(k.zIndex)) ? 0 : parseInt(k.zIndex)) + i,
1472
+ opacity: b && b.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(x.opacity),
1473
+ zIndex: (isNaN(parseInt(x.zIndex)) ? 0 : parseInt(x.zIndex)) + i,
1417
1474
  borderRadius: "0px",
1418
1475
  borderColor: "transparent",
1419
1476
  borderWidth: "0px",
1420
1477
  isTraveler: !1
1421
- }, Me(k)), a) : void 0,
1422
- nativeRect: a ? {
1423
- x: P + window.scrollX,
1424
- y: z + window.scrollY,
1425
- width: j - P,
1426
- height: A - z
1478
+ }, De(x)), o) : void 0,
1479
+ nativeRect: o ? {
1480
+ x: _ + window.scrollX,
1481
+ y: F + window.scrollY,
1482
+ width: Q - _,
1483
+ height: I - F
1427
1484
  } : void 0,
1428
1485
  children: []
1429
1486
  };
1430
1487
  }
1431
1488
  if (s.nodeType !== Node.ELEMENT_NODE)
1432
1489
  return null;
1433
- const o = s, c = o.dataset[W.KEY];
1490
+ const a = s, l = a.dataset[G.KEY];
1434
1491
  let d = t, h = t;
1435
- if (c) {
1436
- const f = new Set(c.split(/\s+/));
1437
- for (const x of f)
1438
- if (!Te.includes(x))
1492
+ if (l) {
1493
+ const m = new Set(l.split(/\s+/));
1494
+ for (const A of m)
1495
+ if (!Re.includes(A))
1439
1496
  throw new Error(
1440
- `[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
1497
+ `[MirageEngine] Invalid filter token: '${A}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
1441
1498
  );
1442
- if (f.has(W.VALUES.END))
1499
+ if (m.has(G.VALUES.END))
1443
1500
  return null;
1444
- if (f.has(W.VALUES.INCLUDE_TREE) && f.has(W.VALUES.EXCLUDE_TREE))
1501
+ if (m.has(G.VALUES.INCLUDE_TREE) && m.has(G.VALUES.EXCLUDE_TREE))
1445
1502
  throw new Error(
1446
1503
  "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
1447
1504
  );
1448
- if (f.has(W.VALUES.INCLUDE_SELF) && f.has(W.VALUES.EXCLUDE_SELF))
1505
+ if (m.has(G.VALUES.INCLUDE_SELF) && m.has(G.VALUES.EXCLUDE_SELF))
1449
1506
  throw new Error(
1450
1507
  "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
1451
1508
  );
1452
- f.has(W.VALUES.INCLUDE_TREE) ? d = d | H : f.has(W.VALUES.EXCLUDE_TREE) && (d = d & ~H), h = d, f.has(W.VALUES.INCLUDE_SELF) ? h = h | H : f.has(W.VALUES.EXCLUDE_SELF) && (h = h & ~H);
1509
+ m.has(G.VALUES.INCLUDE_TREE) ? d = d | $ : m.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~$), h = d, m.has(G.VALUES.INCLUDE_SELF) ? h = h | $ : m.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~$);
1453
1510
  }
1454
- const g = o.dataset[G.KEY];
1455
- if (g) {
1456
- const f = new Set(g.split(/\s+/));
1457
- for (const x of f)
1458
- if (!Te.includes(x))
1511
+ const f = a.dataset[j.KEY];
1512
+ if (f) {
1513
+ const m = new Set(f.split(/\s+/));
1514
+ for (const A of m)
1515
+ if (!Re.includes(A))
1459
1516
  throw new Error(
1460
- `[MirageEngine] Invalid select token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
1517
+ `[MirageEngine] Invalid select token: '${A}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
1461
1518
  );
1462
- if (f.has(G.VALUES.END))
1519
+ if (m.has(j.VALUES.END))
1463
1520
  return null;
1464
- if (f.has(G.VALUES.INCLUDE_TREE) && f.has(G.VALUES.EXCLUDE_TREE))
1521
+ if (m.has(j.VALUES.INCLUDE_TREE) && m.has(j.VALUES.EXCLUDE_TREE))
1465
1522
  throw new Error(
1466
1523
  "[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
1467
1524
  );
1468
- if (f.has(G.VALUES.INCLUDE_SELF) && f.has(G.VALUES.EXCLUDE_SELF))
1525
+ if (m.has(j.VALUES.INCLUDE_SELF) && m.has(j.VALUES.EXCLUDE_SELF))
1469
1526
  throw new Error(
1470
1527
  "[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
1471
1528
  );
1472
- f.has(G.VALUES.INCLUDE_TREE) ? d = d | ie : f.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~ie), h = d, f.has(G.VALUES.INCLUDE_SELF) ? h = h | ie : f.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~ie);
1473
- }
1474
- const v = o.dataset[O.KEY];
1475
- let p = !1, m = a ? J({}, a) : {}, E = n;
1476
- if (v) {
1477
- let f = 1;
1478
- const x = v.indexOf("{"), D = v.lastIndexOf("}");
1479
- let F = v;
1480
- if (x !== -1 && D !== -1 && D > x) {
1481
- F = v.substring(0, x).trim();
1482
- const A = v.substring(x, D + 1);
1529
+ m.has(j.VALUES.INCLUDE_TREE) ? d = d | oe : m.has(j.VALUES.EXCLUDE_TREE) && (d = d & ~oe), h = d, m.has(j.VALUES.INCLUDE_SELF) ? h = h | oe : m.has(j.VALUES.EXCLUDE_SELF) && (h = h & ~oe);
1530
+ }
1531
+ const g = a.dataset[z.KEY];
1532
+ let p = !1, v = o ? te({}, o) : {}, y = n;
1533
+ if (g) {
1534
+ let m = 1;
1535
+ const A = g.indexOf("{"), U = g.lastIndexOf("}");
1536
+ let b = g;
1537
+ if (A !== -1 && U !== -1 && U > A) {
1538
+ b = g.substring(0, A).trim();
1539
+ const I = g.substring(A, U + 1);
1483
1540
  try {
1484
- m = new Function("return " + A)();
1541
+ v = new Function("return " + I)();
1485
1542
  } catch (T) {
1486
1543
  console.warn(
1487
- `[MirageEngine] Failed to parse travel styles JSON: ${A}`
1544
+ `[MirageEngine] Failed to parse travel styles JSON: ${I}`
1488
1545
  );
1489
1546
  }
1490
1547
  }
1491
- const k = F.split(/\s+/);
1492
- let P = !1;
1493
- const z = k.indexOf(O.VALUES.TRAVELER);
1494
- if (z !== -1) {
1495
- p = !0, P = !0;
1496
- const A = k[z + 1];
1497
- if (A && !isNaN(parseInt(A, 10)))
1498
- f = parseInt(A, 10);
1548
+ const x = b.split(/\s+/);
1549
+ let _ = !1;
1550
+ const F = x.indexOf(z.VALUES.TRAVELER);
1551
+ if (F !== -1) {
1552
+ p = !0, _ = !0;
1553
+ const I = x[F + 1];
1554
+ if (I && !isNaN(parseInt(I, 10)))
1555
+ m = parseInt(I, 10);
1499
1556
  else {
1500
- const T = k.find((re) => !isNaN(parseInt(re, 10)));
1501
- T && (f = parseInt(T, 10));
1557
+ const T = x.find((ne) => !isNaN(parseInt(ne, 10)));
1558
+ T && (m = parseInt(T, 10));
1502
1559
  }
1503
1560
  }
1504
- const j = k.indexOf(O.VALUES.NATIVE);
1505
- if (j !== -1) {
1506
- const A = k[j + 1];
1507
- if (A && !isNaN(parseInt(A, 10)))
1508
- E = parseInt(A, 10);
1561
+ const Q = x.indexOf(z.VALUES.NATIVE);
1562
+ if (Q !== -1) {
1563
+ const I = x[Q + 1];
1564
+ if (I && !isNaN(parseInt(I, 10)))
1565
+ y = parseInt(I, 10);
1509
1566
  else if (!p) {
1510
- const T = k.find((re) => !isNaN(parseInt(re, 10)));
1511
- T && (E = parseInt(T, 10));
1567
+ const T = x.find((ne) => !isNaN(parseInt(ne, 10)));
1568
+ T && (y = parseInt(T, 10));
1512
1569
  }
1513
1570
  }
1514
- if (P) {
1515
- const A = f + 1;
1516
- if (A < r)
1571
+ if (_) {
1572
+ const I = m + 1;
1573
+ if (I < r)
1517
1574
  throw new Error(
1518
- `[MirageEngine] Traveler layer (${f}) cannot be smaller than inherited capture layer (${r - 1}).`
1575
+ `[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${r - 1}).`
1519
1576
  );
1520
- r = Math.min(A, O.MAX_LAYERS + 1);
1577
+ r = Math.min(I, z.MAX_LAYERS + 1);
1521
1578
  }
1522
1579
  }
1523
- const M = o.dataset[Ve.KEY];
1524
- let L;
1525
- M && (L = JSON.parse(M));
1526
- const R = o.getBoundingClientRect(), C = window.getComputedStyle(o);
1527
- if (R.width === 0 || R.height === 0 || C.display === "none")
1580
+ const C = a.dataset[We.KEY];
1581
+ let k;
1582
+ C && (k = JSON.parse(C));
1583
+ const D = a.getBoundingClientRect(), S = window.getComputedStyle(a);
1584
+ if (D.width === 0 || D.height === 0 || S.display === "none")
1528
1585
  return null;
1529
- let S = o.getAttribute("data-mid");
1530
- S || (S = Math.random().toString(36).substring(2, 11), o.setAttribute("data-mid", S));
1531
- const w = parseInt(C.zIndex), B = (isNaN(w) ? 0 : w) + i;
1532
- let _;
1533
- if (o.tagName === "IMG")
1534
- _ = o.src;
1535
- else if (o.tagName.toLowerCase() === "svg") {
1536
- const f = o.cloneNode(!0), x = m == null ? void 0 : m.color, D = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, k = m == null ? void 0 : m.opacity, P = (T, re) => {
1537
- const Y = window.getComputedStyle(T), oe = re, Fe = Y.fill === Y.color, Be = Y.stroke === Y.color, fe = D || (Fe ? x : void 0) || Y.fill;
1538
- fe && fe !== "none" && (oe.style.fill = fe);
1539
- const ge = F || (Be ? x : void 0) || Y.stroke;
1540
- ge && ge !== "none" && (oe.style.stroke = ge), Y.strokeWidth && Y.strokeWidth !== "0px" && (oe.style.strokeWidth = Y.strokeWidth);
1541
- const be = x || Y.color;
1542
- be && (oe.style.color = be);
1543
- const pe = k || Y.opacity;
1544
- pe && pe !== "1" && (oe.style.opacity = pe);
1545
- for (let he = 0; he < T.children.length; he++)
1546
- P(T.children[he], re.children[he]);
1586
+ let R = a.getAttribute("data-mid");
1587
+ R || (R = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", R));
1588
+ const E = parseInt(S.zIndex), V = (isNaN(E) ? 0 : E) + i;
1589
+ let N;
1590
+ if (a.tagName === "IMG")
1591
+ N = a.src;
1592
+ else if (a.tagName.toLowerCase() === "svg") {
1593
+ const m = a.cloneNode(!0), A = v == null ? void 0 : v.color, U = v == null ? void 0 : v.fill, b = v == null ? void 0 : v.stroke, x = v == null ? void 0 : v.opacity, _ = (T, ne) => {
1594
+ const H = window.getComputedStyle(T), ce = ne, Fe = H.fill === H.color, _e = H.stroke === H.color, ge = U || (Fe ? A : void 0) || H.fill;
1595
+ ge && ge !== "none" && (ce.style.fill = ge);
1596
+ const pe = b || (_e ? A : void 0) || H.stroke;
1597
+ pe && pe !== "none" && (ce.style.stroke = pe), H.strokeWidth && H.strokeWidth !== "0px" && (ce.style.strokeWidth = H.strokeWidth);
1598
+ const be = A || H.color;
1599
+ be && (ce.style.color = be);
1600
+ const me = x || H.opacity;
1601
+ me && me !== "1" && (ce.style.opacity = me);
1602
+ for (let de = 0; de < T.children.length; de++)
1603
+ _(T.children[de], ne.children[de]);
1547
1604
  };
1548
- P(o, f);
1549
- const z = o.getBoundingClientRect(), j = window.devicePixelRatio * l;
1550
- f.hasAttribute("viewBox") || f.setAttribute("viewBox", `0 0 ${z.width} ${z.height}`), f.setAttribute("width", (z.width * j).toString()), f.setAttribute("height", (z.height * j).toString());
1551
- let A = new XMLSerializer().serializeToString(f);
1552
- A.includes("xmlns=") || (A = A.replace(
1605
+ _(a, m);
1606
+ const F = a.getBoundingClientRect(), Q = window.devicePixelRatio * c;
1607
+ m.hasAttribute("viewBox") || m.setAttribute("viewBox", `0 0 ${F.width} ${F.height}`), m.setAttribute("width", (F.width * Q).toString()), m.setAttribute("height", (F.height * Q).toString());
1608
+ let I = new XMLSerializer().serializeToString(m);
1609
+ I.includes("xmlns=") || (I = I.replace(
1553
1610
  "<svg",
1554
1611
  '<svg xmlns="http://www.w3.org/2000/svg"'
1555
- )), _ = `data:image/svg+xml;utf8,${encodeURIComponent(A)}`;
1556
- } else if (C.backgroundImage && C.backgroundImage !== "none") {
1557
- const f = C.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
1558
- f && (_ = f[1]);
1559
- }
1560
- const b = {
1561
- backgroundColor: C.backgroundColor,
1562
- backgroundImage: C.backgroundImage,
1563
- opacity: o.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(C.opacity),
1564
- zIndex: B,
1565
- borderRadius: C.borderRadius,
1566
- borderColor: C.borderColor,
1567
- borderWidth: C.borderWidth,
1568
- imageSrc: _,
1612
+ )), N = `data:image/svg+xml;utf8,${encodeURIComponent(I)}`;
1613
+ } else if (S.backgroundImage && S.backgroundImage !== "none") {
1614
+ const m = S.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
1615
+ m && (N = m[1]);
1616
+ }
1617
+ const L = {
1618
+ backgroundColor: S.backgroundColor,
1619
+ backgroundImage: S.backgroundImage,
1620
+ opacity: a.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(S.opacity),
1621
+ zIndex: V,
1622
+ borderRadius: S.borderRadius,
1623
+ borderColor: S.borderColor,
1624
+ borderWidth: S.borderWidth,
1625
+ boxShadow: S.boxShadow,
1626
+ imageSrc: N,
1569
1627
  isTraveler: p
1570
- }, U = b;
1571
- let $, q;
1572
- const N = [];
1573
- return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((f) => {
1574
- const x = f.nodeType === Node.TEXT_NODE ? h : d, D = Ue(
1575
- f,
1628
+ }, P = L;
1629
+ let J, Z;
1630
+ const M = [];
1631
+ return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((m) => {
1632
+ const A = m.nodeType === Node.TEXT_NODE ? h : d, U = Oe(
1633
+ m,
1576
1634
  e,
1577
- x,
1635
+ A,
1578
1636
  r,
1579
- B,
1580
- l,
1581
- f.nodeType === Node.TEXT_NODE ? E : void 0,
1582
- f.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
1637
+ V,
1638
+ c,
1639
+ m.nodeType === Node.TEXT_NODE ? y : void 0,
1640
+ m.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0
1583
1641
  );
1584
- D && N.push(D);
1642
+ U && M.push(U);
1585
1643
  }), {
1586
- id: S,
1644
+ id: R,
1587
1645
  type: "BOX",
1588
- element: o,
1646
+ element: a,
1589
1647
  rect: {
1590
- x: R.left + window.scrollX,
1591
- y: R.top + window.scrollY,
1592
- width: R.width,
1593
- height: R.height
1648
+ x: D.left + window.scrollX,
1649
+ y: D.top + window.scrollY,
1650
+ width: D.width,
1651
+ height: D.height
1594
1652
  },
1595
- styles: U,
1596
- textContent: $,
1597
- textStyles: q,
1653
+ styles: P,
1654
+ textContent: J,
1655
+ textStyles: Z,
1598
1656
  dirtyMask: e,
1599
1657
  visibility: h,
1600
1658
  isTraveler: p,
1601
1659
  captureLayer: r,
1602
- nativeLayer: E,
1603
- nativeStyles: E !== void 0 ? xe(J({}, b), {
1604
- backgroundColor: (X = m.backgroundColor) != null ? X : b.backgroundColor,
1605
- backgroundImage: (Z = m.backgroundImage) != null ? Z : b.backgroundImage,
1606
- opacity: (ee = m.opacity) != null ? ee : b.opacity,
1607
- zIndex: m.zIndex !== void 0 ? m.zIndex + B : b.zIndex,
1608
- borderRadius: (te = m.borderRadius) != null ? te : b.borderRadius,
1609
- borderColor: (ne = m.borderColor) != null ? ne : b.borderColor,
1610
- borderWidth: (ae = m.borderWidth) != null ? ae : b.borderWidth,
1611
- isTraveler: b.isTraveler,
1612
- transform: m.transform
1660
+ nativeLayer: y,
1661
+ nativeStyles: y !== void 0 ? Se(te({}, L), {
1662
+ backgroundColor: (B = v.backgroundColor) != null ? B : L.backgroundColor,
1663
+ backgroundImage: (q = v.backgroundImage) != null ? q : L.backgroundImage,
1664
+ opacity: (K = v.opacity) != null ? K : L.opacity,
1665
+ zIndex: v.zIndex !== void 0 ? v.zIndex + V : L.zIndex,
1666
+ borderRadius: (X = v.borderRadius) != null ? X : L.borderRadius,
1667
+ borderColor: (Y = v.borderColor) != null ? Y : L.borderColor,
1668
+ borderWidth: (ie = v.borderWidth) != null ? ie : L.borderWidth,
1669
+ boxShadow: (se = v.boxShadow) != null ? se : L.boxShadow,
1670
+ isTraveler: L.isTraveler,
1671
+ transform: v.transform
1613
1672
  }) : void 0,
1614
- nativeRect: E !== void 0 ? {
1615
- x: m.x !== void 0 ? parseFloat(m.x) : R.left + window.scrollX,
1616
- y: m.y !== void 0 ? parseFloat(m.y) : R.top + window.scrollY,
1617
- width: m.width !== void 0 ? parseFloat(m.width) : R.width,
1618
- height: m.height !== void 0 ? parseFloat(m.height) : R.height
1673
+ nativeRect: y !== void 0 ? {
1674
+ x: v.x !== void 0 ? parseFloat(v.x) : D.left + window.scrollX,
1675
+ y: v.y !== void 0 ? parseFloat(v.y) : D.top + window.scrollY,
1676
+ width: v.width !== void 0 ? parseFloat(v.width) : D.width,
1677
+ height: v.height !== void 0 ? parseFloat(v.height) : D.height
1619
1678
  } : void 0,
1620
- isFixed: C.position === "fixed",
1621
- children: N,
1622
- shaderHooks: L
1679
+ isFixed: S.position === "fixed",
1680
+ children: M,
1681
+ shaderHooks: k
1623
1682
  };
1624
1683
  }
1625
- function st(s, e) {
1684
+ function ot(s, e) {
1626
1685
  e.size !== 0 && e.forEach((t, r) => {
1627
- var l, n, a, o;
1686
+ var c, n, o, a;
1628
1687
  const i = s.get(r);
1629
- !i || !i.userData.basePosition || (V.forceUpdateUniforms(i.material, {
1688
+ !i || !i.userData.basePosition || (W.forceUpdateUniforms(i.material, {
1630
1689
  backgroundColor: t.backgroundColor,
1631
1690
  backgroundImage: t.backgroundImage,
1691
+ boxShadow: t.boxShadow,
1632
1692
  opacity: t.opacity,
1633
- borderRadius: (n = t.borderRadius) != null ? n : (l = i.userData.baseStyles) == null ? void 0 : l.borderRadius
1693
+ borderRadius: (n = t.borderRadius) != null ? n : (c = i.userData.baseStyles) == null ? void 0 : c.borderRadius
1634
1694
  // width and height are no longer updated here, they are updated in syncMeshesByDOM
1635
- }), i.userData.nativeMesh && V.forceUpdateUniforms(i.userData.nativeMesh.material, {
1695
+ }), i.userData.nativeMesh && W.forceUpdateUniforms(i.userData.nativeMesh.material, {
1636
1696
  backgroundColor: t.backgroundColor,
1637
1697
  backgroundImage: t.backgroundImage,
1698
+ boxShadow: t.boxShadow,
1638
1699
  opacity: t.opacity,
1639
- borderRadius: (o = t.borderRadius) != null ? o : (a = i.userData.baseStyles) == null ? void 0 : a.borderRadius
1700
+ borderRadius: (a = t.borderRadius) != null ? a : (o = i.userData.baseStyles) == null ? void 0 : o.borderRadius
1640
1701
  }));
1641
1702
  });
1642
1703
  }
1643
- class nt {
1704
+ class at {
1644
1705
  constructor(e, t, r, i) {
1645
1706
  u(this, "target");
1646
1707
  u(this, "renderer");
1647
1708
  u(this, "registry");
1648
1709
  u(this, "isTravelEnabled", !1);
1649
1710
  u(this, "tracker");
1650
- this.target = e, this.renderer = t, this.registry = r, this.tracker = new De(e, {
1711
+ this.target = e, this.renderer = t, this.registry = r, this.tracker = new ke(e, {
1651
1712
  resizeDebounce: i.resizeDebounce
1652
- }), this.tracker.onLayoutChange.add((l, n) => {
1653
- document.querySelector(`[${O.NAME}~='${O.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
1654
- const o = Ue(
1713
+ }), this.tracker.onLayoutChange.add((c, n) => {
1714
+ document.querySelector(`[${z.NAME}~='${z.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
1715
+ const a = Oe(
1655
1716
  this.target,
1656
- l,
1657
- H,
1717
+ c,
1718
+ $,
1658
1719
  1,
1659
1720
  0,
1660
1721
  this.renderer.qualityFactor
1661
1722
  );
1662
- o && this.renderer.syncScene(o, n);
1663
- }), this.tracker.onStyleChange.add((l) => {
1664
- st(this.registry, l);
1723
+ a && this.renderer.syncScene(a, n);
1724
+ }), this.tracker.onStyleChange.add((c) => {
1725
+ ot(this.registry, c);
1665
1726
  }), this.tracker.onRender.add(() => {
1666
1727
  this.renderer.syncMeshesByDOM(), this.renderer.render();
1667
1728
  });
@@ -1673,7 +1734,7 @@ class nt {
1673
1734
  this.tracker.stop();
1674
1735
  }
1675
1736
  }
1676
- class at {
1737
+ class lt {
1677
1738
  constructor() {
1678
1739
  u(this, "store");
1679
1740
  this.store = /* @__PURE__ */ new WeakMap();
@@ -1698,30 +1759,30 @@ class at {
1698
1759
  this.store.delete(e);
1699
1760
  }
1700
1761
  }
1701
- class ot {
1762
+ class ct {
1702
1763
  constructor(e, t) {
1703
1764
  u(this, "renderer");
1704
1765
  u(this, "syncer");
1705
1766
  u(this, "target");
1706
1767
  u(this, "registry");
1707
- var i, l, n;
1708
- if (this.target = e, this.registry = new at(), !document.getElementById("mirage-engine-styles")) {
1709
- const a = document.createElement("style");
1710
- a.id = "mirage-engine-styles", a.textContent = `
1711
- [${K.NAME}="${K.VALUES.HIDE}"] {
1768
+ var i, c, n;
1769
+ if (this.target = e, this.registry = new lt(), !document.getElementById("mirage-engine-styles")) {
1770
+ const o = document.createElement("style");
1771
+ o.id = "mirage-engine-styles", o.textContent = `
1772
+ [${ee.NAME}="${ee.VALUES.HIDE}"] {
1712
1773
  opacity: 0 !important;
1713
1774
  }
1714
- `, document.head.appendChild(a);
1775
+ `, document.head.appendChild(o);
1715
1776
  }
1716
1777
  let r;
1717
- if (t.mode === "duplicate" ? r = (l = (i = t.container) != null ? i : this.target.parentElement) != null ? l : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
1778
+ if (t.mode === "duplicate" ? r = (c = (i = t.container) != null ? i : this.target.parentElement) != null ? c : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
1718
1779
  throw new Error("[Mirage] Cannot find a container (parent or option).");
1719
- this.renderer = new rt(
1780
+ this.renderer = new st(
1720
1781
  this.target,
1721
1782
  t,
1722
1783
  r,
1723
1784
  this.registry
1724
- ), this.renderer.mount(), this.syncer = new nt(this.target, this.renderer, this.registry, t);
1785
+ ), this.renderer.mount(), this.syncer = new at(this.target, this.renderer, this.registry, t);
1725
1786
  }
1726
1787
  start() {
1727
1788
  this.syncer.start();
@@ -1753,10 +1814,10 @@ class ot {
1753
1814
  ArrowUp: !1,
1754
1815
  ArrowDown: !1
1755
1816
  };
1756
- window.addEventListener("keydown", (l) => {
1757
- t[l.key] !== void 0 && (t[l.key] = !0);
1758
- }), window.addEventListener("keyup", (l) => {
1759
- t[l.key] !== void 0 && (t[l.key] = !1);
1817
+ window.addEventListener("keydown", (c) => {
1818
+ t[c.key] !== void 0 && (t[c.key] = !0);
1819
+ }), window.addEventListener("keyup", (c) => {
1820
+ t[c.key] !== void 0 && (t[c.key] = !1);
1760
1821
  });
1761
1822
  const r = 2, i = () => {
1762
1823
  requestAnimationFrame(i), t.ArrowRight && e.position.setX(e.position.x + r), t.ArrowLeft && e.position.setX(e.position.x - r), t.ArrowUp && e.position.setY(e.position.y + r), t.ArrowDown && e.position.setY(e.position.y - r);
@@ -1764,7 +1825,7 @@ class ot {
1764
1825
  i();
1765
1826
  }
1766
1827
  }
1767
- class ct {
1828
+ class ht {
1768
1829
  constructor(e = {}) {
1769
1830
  u(this, "frontSelector");
1770
1831
  u(this, "midLayerElement");
@@ -1773,7 +1834,7 @@ class ct {
1773
1834
  u(this, "midLayer", null);
1774
1835
  u(this, "frontLayer", null);
1775
1836
  u(this, "tracker", null);
1776
- this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new De(document.body, e.trackerConfig || { resizeDebounce: !0 });
1837
+ this.frontSelector = e.frontSelector || ".front", this.midLayerElement = e.midLayerElement || null, this.items = [], this.isInitialized = !1, this.tracker = new ke(document.body, e.trackerConfig || { resizeDebounce: !0 });
1777
1838
  }
1778
1839
  init() {
1779
1840
  var e;
@@ -1803,8 +1864,8 @@ class ct {
1803
1864
  const e = document.querySelectorAll(this.frontSelector);
1804
1865
  this.frontLayer && e.forEach((t) => {
1805
1866
  var n;
1806
- const r = t.getBoundingClientRect(), i = window.getComputedStyle(t), l = document.createElement("div");
1807
- l.className = "sand-placeholder", Object.assign(l.style, {
1867
+ const r = t.getBoundingClientRect(), i = window.getComputedStyle(t), c = document.createElement("div");
1868
+ c.className = "sand-placeholder", Object.assign(c.style, {
1808
1869
  display: i.display === "inline" ? "inline-block" : i.display,
1809
1870
  width: `${r.width}px`,
1810
1871
  height: `${r.height}px`,
@@ -1815,14 +1876,14 @@ class ct {
1815
1876
  marginRight: i.marginRight,
1816
1877
  visibility: "hidden",
1817
1878
  pointerEvents: "none"
1818
- }), (n = t.parentNode) == null || n.insertBefore(l, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
1879
+ }), (n = t.parentNode) == null || n.insertBefore(c, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
1819
1880
  position: "fixed",
1820
1881
  margin: "0",
1821
1882
  boxSizing: "border-box",
1822
1883
  width: `${r.width}px`,
1823
1884
  height: `${r.height}px`,
1824
1885
  pointerEvents: "auto"
1825
- }), this.items.push({ placeholder: l, original: t });
1886
+ }), this.items.push({ placeholder: c, original: t });
1826
1887
  });
1827
1888
  }
1828
1889
  setupHooks() {
@@ -1835,16 +1896,16 @@ class ct {
1835
1896
  });
1836
1897
  }
1837
1898
  }
1838
- class ht {
1899
+ class ut {
1839
1900
  constructor(e, t) {
1840
1901
  u(this, "_engine");
1841
1902
  u(this, "_sandwich");
1842
1903
  if (!e)
1843
1904
  throw new Error("[Mirage] Target element is required.");
1844
- if (this._engine = new ot(e, t), t.sandwich !== !1) {
1905
+ if (this._engine = new ct(e, t), t.sandwich !== !1) {
1845
1906
  const r = typeof t.sandwich == "object" ? t.sandwich : {};
1846
- this._sandwich = new ct({
1847
- frontSelector: r.frontSelector || `[${Se.NAME}='${Se.VALUES.FRONT}']`
1907
+ this._sandwich = new ht({
1908
+ frontSelector: r.frontSelector || `[${Te.NAME}='${Te.VALUES.FRONT}']`
1848
1909
  }), this._sandwich.useTracker(this._engine.getTracker());
1849
1910
  }
1850
1911
  }
@@ -1871,5 +1932,5 @@ class ht {
1871
1932
  }
1872
1933
  }
1873
1934
  export {
1874
- ht as Mirage
1935
+ ut as Mirage
1875
1936
  };