svelte-product-mockup 0.0.6 → 1.0.2

package/dist/index.js

@@ -1,158 +1,158 @@
 import "svelte/internal/disclose-version";
 import * as e from "svelte/internal/client";
-import { onMount as Te, tick as Mt, onDestroy as Tt, untrack as Ge } from "svelte";
-import { fade as $e } from "svelte/transition";
-import { beforeNavigate as St, pushState as It } from "$app/navigation";
-import { browser as zt } from "$app/environment";
-function Pt(o, r) {
-  const t = new Uint8ClampedArray(o.data), { brightness: a, contrast: n, saturation: s, hue: l, exposure: f, gamma: h, shadows: w, highlights: u, vibrance: g, temperature: p, tint: T } = r;
-  for (let v = 0; v < t.length; v += 4) {
-    let y = t[v], x = t[v + 1], z = t[v + 2];
-    t[v + 3] !== 0 && (y = Be(y, a), x = Be(x, a), z = Be(z, a), y = Le(y, n), x = Le(x, n), z = Le(z, n), [y, x, z] = Ct(y, x, z, s), [y, x, z] = Nt(y, x, z, l), [y, x, z] = Rt(y, x, z, f), [y, x, z] = jt(y, x, z, h), [y, x, z] = Wt(y, x, z, w, u), [y, x, z] = Yt(y, x, z, g), [y, x, z] = Dt(y, x, z, p, T), t[v] = qe(y), t[v + 1] = qe(x), t[v + 2] = qe(z));
-  }
-  return new ImageData(t, o.width, o.height);
-}
-function Be(o, r) {
-  return o + r * 255;
-}
-function Le(o, r) {
-  return 259 * (r * 255 + 255) / (255 * (259 - r * 255)) * (o - 128) + 128;
-}
-function Ct(o, r, t, a) {
-  const n = 0.299 * o + 0.587 * r + 0.114 * t, s = 1 + a;
+import { onMount as Te, tick as St, onDestroy as zt, untrack as $e } from "svelte";
+import { fade as Qe } from "svelte/transition";
+import { beforeNavigate as It, pushState as Pt } from "$app/navigation";
+import { browser as Ct } from "$app/environment";
+function jt(s, n) {
+  const t = new Uint8ClampedArray(s.data), { brightness: a, contrast: r, saturation: o, hue: i, exposure: h, gamma: _, shadows: k, highlights: p, vibrance: v, temperature: f, tint: x } = n;
+  for (let y = 0; y < t.length; y += 4) {
+    let w = t[y], S = t[y + 1], I = t[y + 2];
+    t[y + 3] !== 0 && (w = Oe(w, a), S = Oe(S, a), I = Oe(I, a), w = Ze(w, r), S = Ze(S, r), I = Ze(I, r), [w, S, I] = Nt(w, S, I, o), [w, S, I] = Rt(w, S, I, i), [w, S, I] = Wt(w, S, I, h), [w, S, I] = Dt(w, S, I, _), [w, S, I] = Xt(w, S, I, k, p), [w, S, I] = Yt(w, S, I, v), [w, S, I] = Et(w, S, I, f, x), t[y] = Be(w), t[y + 1] = Be(S), t[y + 2] = Be(I));
+  }
+  return new ImageData(t, s.width, s.height);
+}
+function Oe(s, n) {
+  return s + n * 255;
+}
+function Ze(s, n) {
+  return 259 * (n * 255 + 255) / (255 * (259 - n * 255)) * (s - 128) + 128;
+}
+function Nt(s, n, t, a) {
+  const r = 0.299 * s + 0.587 * n + 0.114 * t, o = 1 + a;
   return [
-    n + s * (o - n),
-    n + s * (r - n),
-    n + s * (t - n)
+    r + o * (s - r),
+    r + o * (n - r),
+    r + o * (t - r)
   ];
 }
-function Nt(o, r, t, a) {
-  const n = a * Math.PI / 180, s = Math.cos(n), l = Math.sin(n), f = [
-    s + (1 - s) / 3,
-    1 / 3 * (1 - s) - Math.sqrt(1 / 3) * l,
-    1 / 3 * (1 - s) + Math.sqrt(1 / 3) * l,
-    1 / 3 * (1 - s) + Math.sqrt(1 / 3) * l,
-    s + 1 / 3 * (1 - s),
-    1 / 3 * (1 - s) - Math.sqrt(1 / 3) * l,
-    1 / 3 * (1 - s) - Math.sqrt(1 / 3) * l,
-    1 / 3 * (1 - s) + Math.sqrt(1 / 3) * l,
-    s + 1 / 3 * (1 - s)
+function Rt(s, n, t, a) {
+  const r = a * Math.PI / 180, o = Math.cos(r), i = Math.sin(r), h = [
+    o + (1 - o) / 3,
+    1 / 3 * (1 - o) - Math.sqrt(1 / 3) * i,
+    1 / 3 * (1 - o) + Math.sqrt(1 / 3) * i,
+    1 / 3 * (1 - o) + Math.sqrt(1 / 3) * i,
+    o + 1 / 3 * (1 - o),
+    1 / 3 * (1 - o) - Math.sqrt(1 / 3) * i,
+    1 / 3 * (1 - o) - Math.sqrt(1 / 3) * i,
+    1 / 3 * (1 - o) + Math.sqrt(1 / 3) * i,
+    o + 1 / 3 * (1 - o)
   ];
   return [
-    o * f[0] + r * f[1] + t * f[2],
-    o * f[3] + r * f[4] + t * f[5],
-    o * f[6] + r * f[7] + t * f[8]
+    s * h[0] + n * h[1] + t * h[2],
+    s * h[3] + n * h[4] + t * h[5],
+    s * h[6] + n * h[7] + t * h[8]
   ];
 }
-function Rt(o, r, t, a) {
-  const n = Math.pow(2, a);
-  return [o * n, r * n, t * n];
+function Wt(s, n, t, a) {
+  const r = Math.pow(2, a);
+  return [s * r, n * r, t * r];
 }
-function jt(o, r, t, a) {
-  const n = 1 / a;
+function Dt(s, n, t, a) {
+  const r = 1 / a;
   return [
-    Math.pow(o / 255, n) * 255,
-    Math.pow(r / 255, n) * 255,
-    Math.pow(t / 255, n) * 255
+    Math.pow(s / 255, r) * 255,
+    Math.pow(n / 255, r) * 255,
+    Math.pow(t / 255, r) * 255
   ];
 }
-function Wt(o, r, t, a, n) {
-  const s = 0.299 * o + 0.587 * r + 0.114 * t;
-  let l = 1;
-  return s < 128 ? l = 1 + a : l = 1 + n, [o * l, r * l, t * l];
+function Xt(s, n, t, a, r) {
+  const o = 0.299 * s + 0.587 * n + 0.114 * t;
+  let i = 1;
+  return o < 128 ? i = 1 + a : i = 1 + r, [s * i, n * i, t * i];
 }
-function Yt(o, r, t, a) {
-  const n = Math.max(o, r, t), s = Math.min(o, r, t), l = n === 0 ? 0 : (n - s) / n, f = 1 + a * (1 - l);
-  return [o * f, r * f, t * f];
+function Yt(s, n, t, a) {
+  const r = Math.max(s, n, t), o = Math.min(s, n, t), i = r === 0 ? 0 : (r - o) / r, h = 1 + a * (1 - i);
+  return [s * h, n * h, t * h];
 }
-function Dt(o, r, t, a, n) {
-  let s = o, l = r, f = t;
-  return a > 0 ? (s += a * 0.1, f -= a * 0.1) : (s += a * 0.05, f -= a * 0.05), n > 0 ? (s += n * 0.1, l -= n * 0.05) : (s += n * 0.05, l -= n * 0.1), [s, l, f];
+function Et(s, n, t, a, r) {
+  let o = s, i = n, h = t;
+  return a > 0 ? (o += a * 0.1, h -= a * 0.1) : (o += a * 0.05, h -= a * 0.05), r > 0 ? (o += r * 0.1, i -= r * 0.05) : (o += r * 0.05, i -= r * 0.1), [o, i, h];
 }
-function qe(o) {
-  return Math.max(0, Math.min(255, o));
+function Be(s) {
+  return Math.max(0, Math.min(255, s));
 }
-function Xt(o, r, t) {
-  const a = o / r;
+function Lt(s, n, t) {
+  const a = s / n;
   switch (t.mode) {
     case "scale":
-      const n = t.scale ?? 1;
+      const r = t.scale ?? 1;
       return {
-        width: o * n,
-        height: r * n,
+        width: s * r,
+        height: n * r,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: o,
-        sourceHeight: r
+        sourceWidth: s,
+        sourceHeight: n
       };
     case "px":
-      let s = t.width ?? o, l = t.height ?? r;
+      let o = t.width ?? s, i = t.height ?? n;
       if (t.maintainAspectRatio) {
-        if (s && !l)
-          l = s / a;
-        else if (l && !s)
-          s = l * a;
-        else if (s && l) {
-          const P = Math.min(s / o, l / r);
-          s = o * P, l = r * P;
+        if (o && !i)
+          i = o / a;
+        else if (i && !o)
+          o = i * a;
+        else if (o && i) {
+          const g = Math.min(o / s, i / n);
+          o = s * g, i = n * g;
         }
       }
-      return t.minWidth && (s = Math.max(s, t.minWidth)), t.maxWidth && (s = Math.min(s, t.maxWidth)), t.minHeight && (l = Math.max(l, t.minHeight)), t.maxHeight && (l = Math.min(l, t.maxHeight)), {
-        width: s,
-        height: l,
+      return t.minWidth && (o = Math.max(o, t.minWidth)), t.maxWidth && (o = Math.min(o, t.maxWidth)), t.minHeight && (i = Math.max(i, t.minHeight)), t.maxHeight && (i = Math.min(i, t.maxHeight)), {
+        width: o,
+        height: i,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: o,
-        sourceHeight: r
+        sourceWidth: s,
+        sourceHeight: n
       };
     case "fit":
-      const f = t.width ?? o, h = t.height ?? r, w = Math.min(f / o, h / r);
+      const h = t.width ?? s, _ = t.height ?? n, k = Math.min(h / s, _ / n);
       return {
-        width: o * w,
-        height: r * w,
+        width: s * k,
+        height: n * k,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: o,
-        sourceHeight: r
+        sourceWidth: s,
+        sourceHeight: n
       };
     case "fill":
-      const u = t.width ?? o, g = t.height ?? r, p = Math.max(u / o, g / r), T = u / p, v = g / p;
+      const p = t.width ?? s, v = t.height ?? n, f = Math.max(p / s, v / n), x = p / f, y = v / f;
       return {
-        width: u,
-        height: g,
-        sourceX: (o - T) / 2,
-        sourceY: (r - v) / 2,
-        sourceWidth: T,
-        sourceHeight: v
+        width: p,
+        height: v,
+        sourceX: (s - x) / 2,
+        sourceY: (n - y) / 2,
+        sourceWidth: x,
+        sourceHeight: y
       };
     case "cover":
-      const y = t.width ?? o, x = t.height ?? r;
+      const w = t.width ?? s, S = t.height ?? n;
       return {
-        width: y,
-        height: x,
+        width: w,
+        height: S,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: o,
-        sourceHeight: r
+        sourceWidth: s,
+        sourceHeight: n
       };
     case "contain":
-      const z = t.width ?? o, _ = t.height ?? r, k = Math.min(z / o, _ / r);
+      const I = t.width ?? s, P = t.height ?? n, u = Math.min(I / s, P / n);
       return {
-        width: o * k,
-        height: r * k,
+        width: s * u,
+        height: n * u,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: o,
-        sourceHeight: r
+        sourceWidth: s,
+        sourceHeight: n
       };
     default:
       return {
-        width: o,
-        height: r,
+        width: s,
+        height: n,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: o,
-        sourceHeight: r
+        sourceWidth: s,
+        sourceHeight: n
       };
   }
 }
@@ -160,7 +160,7 @@ const se = {
   scale: 1,
   translateX: 0,
   translateY: 0
-}, ve = {
+}, fe = {
   showBounds: !1,
   showDepthVis: !1,
   showCrosshair: !1
@@ -181,7 +181,7 @@ const se = {
   rotationX: 0,
   rotationY: 0,
   rotationZ: 0
-}, Qe = {
+}, et = {
   type: "warp",
   shape: "none",
   enabled: !1,
@@ -191,316 +191,379 @@ const se = {
   plane: { ...ae },
   sphere: { ...ke }
 };
-function Zt(o) {
-  const t = new OffscreenCanvas(o.width, o.height).getContext("2d");
+function Ot(s) {
+  const t = new OffscreenCanvas(s.width, s.height).getContext("2d");
   if (!t) throw new Error("Failed to create canvas context");
-  return t.drawImage(o, 0, 0), t.getImageData(0, 0, o.width, o.height);
+  return t.drawImage(s, 0, 0), t.getImageData(0, 0, s.width, s.height);
 }
-function Bt(o, r, t) {
-  const a = o.width, n = o.height, s = o.data;
-  if (r < 0 || r >= a || t < 0 || t >= n)
+function Zt(s, n, t) {
+  const a = s.width, r = s.height, o = s.data;
+  if (n < 0 || n >= a || t < 0 || t >= r)
     return null;
-  const l = Math.floor(r), f = Math.floor(t), h = Math.min(l + 1, a - 1), w = Math.min(f + 1, n - 1), u = r - l, g = t - f, p = (b, d) => {
-    const m = (d * a + b) * 4;
+  const i = Math.floor(n), h = Math.floor(t), _ = Math.min(i + 1, a - 1), k = Math.min(h + 1, r - 1), p = n - i, v = t - h, f = (M, l) => {
+    const d = (l * a + M) * 4;
     return {
-      r: s[m],
-      g: s[m + 1],
-      b: s[m + 2],
-      a: s[m + 3]
+      r: o[d],
+      g: o[d + 1],
+      b: o[d + 2],
+      a: o[d + 3]
     };
-  }, T = p(l, f), v = p(h, f), y = p(l, w), x = p(h, w), z = (b, d, m) => b + (d - b) * m, _ = z(z(T.r, v.r, u), z(y.r, x.r, u), g), k = z(z(T.g, v.g, u), z(y.g, x.g, u), g), P = z(z(T.b, v.b, u), z(y.b, x.b, u), g), S = z(z(T.a, v.a, u), z(y.a, x.a, u), g);
-  return { r: _, g: k, b: P, a: S };
-}
-function Ve(o, r, t, a, n, s, l, f, h, w) {
-  const u = Zt(r), g = w?.showDepthVis ?? !1, p = w?.maxZ ?? 500, T = h ?? {
-    minX: -n / 2,
-    minY: -s / 2,
-    maxX: n / 2,
-    maxY: s / 2
-  }, v = T.maxX - T.minX, y = T.maxY - T.minY, x = Math.floor(v * l), z = Math.floor(y * l);
-  if (x <= 0 || z <= 0) return;
-  const _ = new ImageData(x, z), k = _.data;
-  for (let m = 0; m < z; m++)
-    for (let i = 0; i < x; i++) {
-      const c = T.minX + i / l, M = T.minY + m / l, I = f(c, M);
-      if (!I || I.z <= 0)
+  }, x = f(i, h), y = f(_, h), w = f(i, k), S = f(_, k), I = (M, l, d) => M + (l - M) * d, P = I(I(x.r, y.r, p), I(w.r, S.r, p), v), u = I(I(x.g, y.g, p), I(w.g, S.g, p), v), g = I(I(x.b, y.b, p), I(w.b, S.b, p), v), C = I(I(x.a, y.a, p), I(w.a, S.a, p), v);
+  return { r: P, g: u, b: g, a: C };
+}
+function Ve(s, n, t, a, r, o, i, h, _, k) {
+  const p = Ot(n), v = k?.showDepthVis ?? !1, f = k?.maxZ ?? 500, x = _ ?? {
+    minX: -r / 2,
+    minY: -o / 2,
+    maxX: r / 2,
+    maxY: o / 2
+  }, y = x.maxX - x.minX, w = x.maxY - x.minY, S = Math.floor(y * i), I = Math.floor(w * i);
+  if (S <= 0 || I <= 0) return;
+  const P = new ImageData(S, I), u = P.data;
+  for (let d = 0; d < I; d++)
+    for (let c = 0; c < S; c++) {
+      const b = x.minX + c / i, T = x.minY + d / i, m = h(b, T);
+      if (!m || m.z <= 0)
         continue;
-      const X = (m * x + i) * 4;
-      if (g) {
-        const J = Math.min(1, Math.max(0, I.z / p)), B = Math.floor(J * 200 + 55);
-        k[X] = Math.floor(B * 0.3), k[X + 1] = Math.floor(B * 0.6), k[X + 2] = B, k[X + 3] = 200;
+      const R = (d * S + c) * 4;
+      if (v) {
+        const z = Math.min(1, Math.max(0, m.z / f)), N = Math.floor(z * 200 + 55);
+        u[R] = Math.floor(N * 0.3), u[R + 1] = Math.floor(N * 0.6), u[R + 2] = N, u[R + 3] = 200;
       } else {
-        const { u: J, v: B } = I, A = Bt(u, J, B);
-        A && (k[X] = Math.round(A.r), k[X + 1] = Math.round(A.g), k[X + 2] = Math.round(A.b), k[X + 3] = Math.round(A.a));
+        const { u: z, v: N } = m, L = Zt(p, z, N);
+        L && (u[R] = Math.round(L.r), u[R + 1] = Math.round(L.g), u[R + 2] = Math.round(L.b), u[R + 3] = Math.round(L.a));
       }
     }
-  const P = new OffscreenCanvas(x, z), S = P.getContext("2d");
-  if (!S) return;
-  S.putImageData(_, 0, 0);
-  const b = t + T.minX, d = a + T.minY;
-  l !== 1 ? o.drawImage(P, b, d, v, y) : o.drawImage(P, b, d);
-}
-function Ue(o, r, t, a = 20) {
-  if (!("save" in o)) return;
-  const n = o;
-  n.save(), n.strokeStyle = "#00ff00", n.lineWidth = 2, n.beginPath(), n.moveTo(r - a, t), n.lineTo(r + a, t), n.stroke(), n.beginPath(), n.moveTo(r, t - a), n.lineTo(r, t + a), n.stroke(), n.fillStyle = "#00ff00", n.beginPath(), n.arc(r, t, 3, 0, Math.PI * 2), n.fill(), n.restore();
-}
-function oe(o, r, t, a, n, s) {
-  const l = Math.cos(a), f = Math.sin(a), h = Math.cos(n), w = Math.sin(n), u = Math.cos(s), g = Math.sin(s);
-  let p = o, T = r, v = t;
-  if (s !== 0) {
-    const y = p, x = T;
-    p = y * u - x * g, T = y * g + x * u;
-  }
-  if (n !== 0) {
-    const y = p, x = v;
-    p = y * h + x * w, v = -y * w + x * h;
+  const g = new OffscreenCanvas(S, I), C = g.getContext("2d");
+  if (!C) return;
+  C.putImageData(P, 0, 0);
+  const M = t + x.minX, l = a + x.minY;
+  i !== 1 ? s.drawImage(g, M, l, y, w) : s.drawImage(g, M, l);
+}
+function Ae(s, n, t, a = 20) {
+  if (!("save" in s)) return;
+  const r = s;
+  r.save(), r.strokeStyle = "#00ff00", r.lineWidth = 2, r.beginPath(), r.moveTo(n - a, t), r.lineTo(n + a, t), r.stroke(), r.beginPath(), r.moveTo(n, t - a), r.lineTo(n, t + a), r.stroke(), r.fillStyle = "#00ff00", r.beginPath(), r.arc(n, t, 3, 0, Math.PI * 2), r.fill(), r.restore();
+}
+function oe(s, n, t, a, r, o) {
+  const i = Math.cos(a), h = Math.sin(a), _ = Math.cos(r), k = Math.sin(r), p = Math.cos(o), v = Math.sin(o);
+  let f = s, x = n, y = t;
+  if (o !== 0) {
+    const w = f, S = x;
+    f = w * p - S * v, x = w * v + S * p;
+  }
+  if (r !== 0) {
+    const w = f, S = y;
+    f = w * _ + S * k, y = -w * k + S * _;
   }
   if (a !== 0) {
-    const y = T, x = v;
-    T = y * l - x * f, v = y * f + x * l;
+    const w = x, S = y;
+    x = w * i - S * h, y = w * h + S * i;
   }
-  return [p, T, v];
+  return [f, x, y];
 }
-function Lt(o, r, t, a, n, s) {
-  const l = Math.cos(a), f = Math.sin(a), h = Math.cos(n), w = Math.sin(n), u = Math.cos(s), g = Math.sin(s);
-  let p = o, T = r, v = t;
+function Bt(s, n, t, a, r, o) {
+  const i = Math.cos(a), h = Math.sin(a), _ = Math.cos(r), k = Math.sin(r), p = Math.cos(o), v = Math.sin(o);
+  let f = s, x = n, y = t;
   if (a !== 0) {
-    const y = T, x = v;
-    T = y * l + x * f, v = -y * f + x * l;
-  }
-  if (n !== 0) {
-    const y = p, x = v;
-    p = y * h - x * w, v = y * w + x * h;
-  }
-  if (s !== 0) {
-    const y = p, x = T;
-    p = y * u + x * g, T = -y * g + x * u;
-  }
-  return [p, T, v];
-}
-function qt(o, r, t, a, n, s) {
-  if (!("save" in o)) return;
-  const l = o;
-  l.save(), l.strokeStyle = "#ff6600", l.lineWidth = 1.5, l.setLineDash([4, 6]);
-  const f = 50, h = 3;
-  for (let w = -h; w <= h; w++) {
-    const u = w * f, g = [];
-    for (let p = -10; p <= 10; p++) {
-      const T = p * f, v = s(u, T);
-      v && g.push({ x: r + v.x, y: t + v.y });
+    const w = x, S = y;
+    x = w * i + S * h, y = -w * h + S * i;
+  }
+  if (r !== 0) {
+    const w = f, S = y;
+    f = w * _ - S * k, y = w * k + S * _;
+  }
+  if (o !== 0) {
+    const w = f, S = x;
+    f = w * p + S * v, x = -w * v + S * p;
+  }
+  return [f, x, y];
+}
+function qt(s, n, t, a, r, o) {
+  if (!("save" in s)) return;
+  const i = s;
+  i.save(), i.strokeStyle = "#ff6600", i.lineWidth = 1.5, i.setLineDash([4, 6]);
+  const h = 50, _ = 3;
+  for (let k = -_; k <= _; k++) {
+    const p = k * h, v = [];
+    for (let f = -10; f <= 10; f++) {
+      const x = f * h, y = o(p, x);
+      y && v.push({ x: n + y.x, y: t + y.y });
     }
-    if (g.length > 1) {
-      l.beginPath(), l.moveTo(g[0].x, g[0].y);
-      for (let p = 1; p < g.length; p++)
-        l.lineTo(g[p].x, g[p].y);
-      l.stroke();
+    if (v.length > 1) {
+      i.beginPath(), i.moveTo(v[0].x, v[0].y);
+      for (let f = 1; f < v.length; f++)
+        i.lineTo(v[f].x, v[f].y);
+      i.stroke();
     }
   }
-  for (let w = -h; w <= h; w++) {
-    const u = w * f, g = [];
-    for (let p = -10; p <= 10; p++) {
-      const T = p * f, v = s(T, u);
-      v && g.push({ x: r + v.x, y: t + v.y });
+  for (let k = -_; k <= _; k++) {
+    const p = k * h, v = [];
+    for (let f = -10; f <= 10; f++) {
+      const x = f * h, y = o(x, p);
+      y && v.push({ x: n + y.x, y: t + y.y });
     }
-    if (g.length > 1) {
-      l.beginPath(), l.moveTo(g[0].x, g[0].y);
-      for (let p = 1; p < g.length; p++)
-        l.lineTo(g[p].x, g[p].y);
-      l.stroke();
+    if (v.length > 1) {
+      i.beginPath(), i.moveTo(v[0].x, v[0].y);
+      for (let f = 1; f < v.length; f++)
+        i.lineTo(v[f].x, v[f].y);
+      i.stroke();
     }
   }
-  l.restore();
+  i.restore();
 }
-function Et(o, r, t, a, n, s, l, f) {
-  if (!("save" in o)) return;
-  const h = o;
-  h.save(), h.lineWidth = 2, h.setLineDash([6, 4]);
-  const w = Math.sin(s);
-  let u = 1 / 0, g = -1 / 0;
-  const p = (m, i, c) => {
-    const M = i * w, I = f / (f + M);
+function Ut(s, n, t, a, r, o, i, h) {
+  if (!("save" in s)) return;
+  const _ = s;
+  _.save(), _.lineWidth = 2, _.setLineDash([6, 4]);
+  const k = Math.sin(o);
+  let p = 1 / 0, v = -1 / 0;
+  const f = (d, c, b) => {
+    const T = c * k, m = h / (h + T);
     return {
-      x: r + m * I,
-      y: t + i * I,
-      z: c
+      x: n + d * m,
+      y: t + c * m,
+      z: b
     };
-  }, T = (m, i, c) => {
-    const M = c - i;
-    if (M < 1e-3) return "#ff6600";
-    const I = (m - i) / M, X = Math.round(100 + I * 155), J = Math.round(30 + I * 70), B = Math.round(0 + I * 0);
-    return `rgb(${X},${J},${B})`;
-  }, v = 32, y = [], x = [], z = [], _ = [], k = s > 0.01 ? -Math.PI / 2 : 0, P = s > 0.01 ? Math.PI / 2 : Math.PI * 2, S = s < -0.01 ? -Math.PI / 2 : 0, b = s < -0.01 ? Math.PI / 2 : Math.PI * 2;
-  for (let m = 0; m <= v; m++) {
-    const i = m / v, c = k + i * (P - k), M = Math.sin(c) * a, I = Math.cos(c) * a, X = -n / 2, [J, B, A] = oe(M, X, I, s, 0, l), j = p(J, B, A);
-    y.push(j), u = Math.min(u, A), g = Math.max(g, A);
-  }
-  for (let m = 0; m <= v; m++) {
-    const i = m / v, c = S + i * (b - S), M = Math.sin(c) * a, I = Math.cos(c) * a, X = n / 2, [J, B, A] = oe(M, X, I, s, 0, l), j = p(J, B, A);
-    x.push(j), u = Math.min(u, A), g = Math.max(g, A);
-  }
-  for (let m = 0; m <= 10; m++) {
-    const i = m / 10, c = -n / 2 + i * n, [M, I, X] = oe(-a, c, 0, s, 0, l);
-    z.push(p(M, I, X)), u = Math.min(u, X), g = Math.max(g, X);
-    const [J, B, A] = oe(a, c, 0, s, 0, l);
-    _.push(p(J, B, A)), u = Math.min(u, A), g = Math.max(g, A);
-  }
-  const d = (m) => {
-    for (let i = 0; i < m.length - 1; i++) {
-      const c = m[i], M = m[i + 1], I = (c.z + M.z) / 2;
-      h.strokeStyle = T(I, u, g), h.beginPath(), h.moveTo(c.x, c.y), h.lineTo(M.x, M.y), h.stroke();
+  }, x = (d, c, b) => {
+    const T = b - c;
+    if (T < 1e-3) return "#ff6600";
+    const m = (d - c) / T, R = Math.round(100 + m * 155), z = Math.round(30 + m * 70), N = Math.round(0 + m * 0);
+    return `rgb(${R},${z},${N})`;
+  }, y = 32, w = [], S = [], I = [], P = [], u = o > 0.01 ? -Math.PI / 2 : 0, g = o > 0.01 ? Math.PI / 2 : Math.PI * 2, C = o < -0.01 ? -Math.PI / 2 : 0, M = o < -0.01 ? Math.PI / 2 : Math.PI * 2;
+  for (let d = 0; d <= y; d++) {
+    const c = d / y, b = u + c * (g - u), T = Math.sin(b) * a, m = Math.cos(b) * a, R = -r / 2, [z, N, L] = oe(T, R, m, o, 0, i), W = f(z, N, L);
+    w.push(W), p = Math.min(p, L), v = Math.max(v, L);
+  }
+  for (let d = 0; d <= y; d++) {
+    const c = d / y, b = C + c * (M - C), T = Math.sin(b) * a, m = Math.cos(b) * a, R = r / 2, [z, N, L] = oe(T, R, m, o, 0, i), W = f(z, N, L);
+    S.push(W), p = Math.min(p, L), v = Math.max(v, L);
+  }
+  for (let d = 0; d <= 10; d++) {
+    const c = d / 10, b = -r / 2 + c * r, [T, m, R] = oe(-a, b, 0, o, 0, i);
+    I.push(f(T, m, R)), p = Math.min(p, R), v = Math.max(v, R);
+    const [z, N, L] = oe(a, b, 0, o, 0, i);
+    P.push(f(z, N, L)), p = Math.min(p, L), v = Math.max(v, L);
+  }
+  const l = (d) => {
+    for (let c = 0; c < d.length - 1; c++) {
+      const b = d[c], T = d[c + 1], m = (b.z + T.z) / 2;
+      _.strokeStyle = x(m, p, v), _.beginPath(), _.moveTo(b.x, b.y), _.lineTo(T.x, T.y), _.stroke();
     }
   };
-  d(y), d(x), d(z), d(_), h.restore();
-}
-function Ot(o, r, t, a, n, s, l, f, h, w) {
-  const { diameter: u, perspective: g, rotationX: p, rotationZ: T } = l, v = u / 2, y = p * Math.PI / 180, x = T * Math.PI / 180, z = Math.abs(y) > 1e-3, _ = g ?? 1, k = _ > 0.01 ? v * (10 / _) : v * 1e3, P = f.scale, S = f.translateX, b = f.translateY;
-  let d = {
-    minX: -v,
-    minY: -s / 2,
-    maxX: v,
-    maxY: s / 2
+  l(w), l(S), l(I), l(P), _.restore();
+}
+function Vt(s, n, t, a, r, o, i, h, _, k) {
+  const { diameter: p, perspective: v, rotationX: f, rotationZ: x } = i, y = p / 2, w = f * Math.PI / 180, S = x * Math.PI / 180, I = Math.abs(w) > 1e-3, P = v ?? 1, u = P > 0.01 ? y * (10 / P) : y * 1e3, g = h.scale, C = h.translateX, M = h.translateY;
+  let l = {
+    minX: -y,
+    minY: -o / 2,
+    maxX: y,
+    maxY: o / 2
   };
-  if (z) {
-    const c = [
-      { x: -v, y: -s / 2 },
-      { x: v, y: -s / 2 },
-      { x: v, y: s / 2 },
-      { x: -v, y: s / 2 }
-    ], M = [];
-    for (const X of c) {
-      const [J, B, A] = oe(X.x, X.y, v, y, 0, x), j = k / (k + A);
-      M.push({ x: J * j, y: B * j });
-      const [Z, L, E] = oe(X.x, X.y, 0, y, 0, x), q = k / (k + E);
-      M.push({ x: Z * q, y: L * q });
+  if (I) {
+    const b = [
+      { x: -y, y: -o / 2 },
+      { x: y, y: -o / 2 },
+      { x: y, y: o / 2 },
+      { x: -y, y: o / 2 }
+    ], T = [];
+    for (const R of b) {
+      const [z, N, L] = oe(R.x, R.y, y, w, 0, S), W = u / (u + L);
+      T.push({ x: z * W, y: N * W });
+      const [E, Y, U] = oe(R.x, R.y, 0, w, 0, S), q = u / (u + U);
+      T.push({ x: E * q, y: Y * q });
     }
-    const I = v * Math.abs(Math.sin(y));
-    M.length > 0 && (d = {
-      minX: Math.min(...M.map((X) => X.x)) - 2,
-      minY: Math.min(...M.map((X) => X.y)) - I - 2,
-      maxX: Math.max(...M.map((X) => X.x)) + 2,
-      maxY: Math.max(...M.map((X) => X.y)) + I + 2
+    const m = y * Math.abs(Math.sin(w));
+    T.length > 0 && (l = {
+      minX: Math.min(...T.map((R) => R.x)) - 2,
+      minY: Math.min(...T.map((R) => R.y)) - m - 2,
+      maxX: Math.max(...T.map((R) => R.x)) + 2,
+      maxY: Math.max(...T.map((R) => R.y)) + m + 2
     });
   }
-  const m = (c, M) => {
-    const I = Math.cos(x), X = Math.sin(x), J = c * I + M * X, B = -c * X + M * I, A = Math.cos(y), j = Math.sin(y), Z = B * j, L = k / (k + Z), E = J / L, q = B / L;
-    if (Math.abs(E) > v) return null;
-    const K = Math.sqrt(v * v - E * E);
-    if (Math.abs(A) < 0.01) return null;
-    const V = (q + K * j) / A, G = V * j + K * A;
+  const d = (b, T) => {
+    const m = Math.cos(S), R = Math.sin(S), z = b * m + T * R, N = -b * R + T * m, L = Math.cos(w), W = Math.sin(w), E = N * W, Y = u / (u + E), U = z / Y, q = N / Y;
+    if (Math.abs(U) > y) return null;
+    const J = Math.sqrt(y * y - U * U);
+    if (Math.abs(L) < 0.01) return null;
+    const A = (q + J * W) / L, G = A * W + J * L;
     if (G < 0) return null;
-    const W = Math.asin(E / v) * v / n + 0.5, N = V / s + 0.5, H = (W - 0.5 - S) / P + 0.5, U = (N - 0.5 - b) / P + 0.5;
-    return H >= 0 && H <= 1 && U >= 0 && U <= 1 ? { u: H * r.width, v: U * r.height, z: G } : null;
-  }, i = w.showDepthVis ? { showDepthVis: !0, maxZ: v } : void 0;
-  w.showBounds && Et(o, t, a, v, s, y, x, k), Ve(o, r, t, a, n, s, h, m, d, i), w.showCrosshair && Ue(o, t, a);
-}
-function Vt(o, r, t, a, n, s, l, f, h, w) {
-  const { rotationX: u, rotationY: g, rotationZ: p, depthScale: T } = l, v = u * (Math.PI / 180), y = g * (Math.PI / 180), x = p * (Math.PI / 180), z = Math.abs(v) > 1e-3 || Math.abs(y) > 1e-3 || Math.abs(x) > 1e-3, _ = f.scale, k = f.translateX, P = f.translateY, S = T * 1e-3, b = S > 1e-4 ? 1 / S : 1e4, d = (B, A) => {
-    const [j, Z, L] = oe(B, A, 0, v, y, x), E = L + b;
-    if (E <= 0) return null;
-    const q = b / E, K = j * q, V = Z * q;
-    return { x: K, y: V, z: L };
+    const O = Math.asin(U / y) * y / r + 0.5, D = A / o + 0.5, K = (O - 0.5 - C) / g + 0.5, H = (D - 0.5 - M) / g + 0.5;
+    return K >= 0 && K <= 1 && H >= 0 && H <= 1 ? { u: K * n.width, v: H * n.height, z: G } : null;
+  }, c = k.showDepthVis ? { showDepthVis: !0, maxZ: y } : void 0;
+  k.showBounds && Ut(s, t, a, y, o, w, S, u), Ve(s, n, t, a, r, o, _, d, l, c), k.showCrosshair && Ae(s, t, a);
+}
+function At(s, n, t, a, r, o, i, h, _, k) {
+  const { rotationX: p, rotationY: v, rotationZ: f, depthScale: x } = i, y = p * (Math.PI / 180), w = v * (Math.PI / 180), S = f * (Math.PI / 180), I = Math.abs(y) > 1e-3 || Math.abs(w) > 1e-3 || Math.abs(S) > 1e-3, P = h.scale, u = h.translateX, g = h.translateY, C = x * 1e-3, M = C > 1e-4 ? 1 / C : 1e4, l = (N, L) => {
+    const [W, E, Y] = oe(N, L, 0, y, w, S), U = Y + M;
+    if (U <= 0) return null;
+    const q = M / U, J = W * q, A = E * q;
+    return { x: J, y: A, z: Y };
   };
-  let m = -n / 2, i = n / 2, c = -s / 2, M = s / 2;
-  if (z) {
-    const B = [];
-    for (let j = 0; j <= 10; j++) {
-      const Z = j / 10, L = -n / 2 + Z * n, E = d(L, -s / 2);
-      E && B.push({ x: E.x, y: E.y });
-      const q = d(L, s / 2);
-      q && B.push({ x: q.x, y: q.y });
-      const K = -s / 2 + Z * s, V = d(-n / 2, K);
-      V && B.push({ x: V.x, y: V.y });
-      const G = d(n / 2, K);
-      G && B.push({ x: G.x, y: G.y });
+  let d = -r / 2, c = r / 2, b = -o / 2, T = o / 2;
+  if (I) {
+    const N = [];
+    for (let W = 0; W <= 10; W++) {
+      const E = W / 10, Y = -r / 2 + E * r, U = l(Y, -o / 2);
+      U && N.push({ x: U.x, y: U.y });
+      const q = l(Y, o / 2);
+      q && N.push({ x: q.x, y: q.y });
+      const J = -o / 2 + E * o, A = l(-r / 2, J);
+      A && N.push({ x: A.x, y: A.y });
+      const G = l(r / 2, J);
+      G && N.push({ x: G.x, y: G.y });
     }
-    if (B.length > 0) {
-      m = Math.min(...B.map((q) => q.x)), i = Math.max(...B.map((q) => q.x)), c = Math.min(...B.map((q) => q.y)), M = Math.max(...B.map((q) => q.y));
-      const j = Math.sqrt(v * v + y * y + x * x), Z = 2, L = j * Math.max(n, s) * 0.1, E = Z + L;
-      m -= E, i += E, c -= E, M += E;
+    if (N.length > 0) {
+      d = Math.min(...N.map((q) => q.x)), c = Math.max(...N.map((q) => q.x)), b = Math.min(...N.map((q) => q.y)), T = Math.max(...N.map((q) => q.y));
+      const W = Math.sqrt(y * y + w * w + S * S), E = 2, Y = W * Math.max(r, o) * 0.1, U = E + Y;
+      d -= U, c += U, b -= U, T += U;
     }
   }
-  const I = { minX: m, minY: c, maxX: i, maxY: M }, X = (B, A) => {
-    if (!z) {
-      const ze = B / n + 0.5, je = A / s + 0.5, pe = (ze - 0.5 - k) / _ + 0.5, ye = (je - 0.5 - P) / _ + 0.5;
-      return pe >= 0 && pe <= 1 && ye >= 0 && ye <= 1 ? {
-        u: pe * r.width,
-        v: ye * r.height,
+  const m = { minX: d, minY: b, maxX: c, maxY: T }, R = (N, L) => {
+    if (!I) {
+      const Ie = N / r + 0.5, We = L / o + 0.5, me = (Ie - 0.5 - u) / P + 0.5, ye = (We - 0.5 - g) / P + 0.5;
+      return me >= 0 && me <= 1 && ye >= 0 && ye <= 1 ? {
+        u: me * n.width,
+        v: ye * n.height,
         z: 1
       } : null;
     }
-    const [j, Z, L] = oe(0, 0, 1, v, y, x), E = 0, q = 0, K = 0, V = -b, G = B - q, Y = A - K, D = 0 - V, W = Math.sqrt(G * G + Y * Y + D * D), N = G / W, H = Y / W, U = D / W, de = N * j + H * Z + U * L;
+    const [W, E, Y] = oe(0, 0, 1, y, w, S), U = 0, q = 0, J = 0, A = -M, G = N - q, Z = L - J, B = 0 - A, O = Math.sqrt(G * G + Z * Z + B * B), D = G / O, K = Z / O, H = B / O, de = D * W + K * E + H * Y;
     if (Math.abs(de) < 1e-4)
       return null;
-    const ie = -(q * j + K * Z + V * L + E) / de;
+    const ie = -(q * W + J * E + A * Y + U) / de;
     if (ie < 0)
       return null;
-    const he = q + N * ie, ge = K + H * ie, le = V + U * ie;
-    if (le < V)
+    const he = q + D * ie, ge = J + K * ie, le = A + H * ie;
+    if (le < A)
       return null;
-    const [be, Re] = Lt(he, ge, le, v, y, x), Se = be / n + 0.5, ue = Re / s + 0.5, Ie = le + b, _e = (Se - 0.5 - k) / _ + 0.5, me = (ue - 0.5 - P) / _ + 0.5;
-    return _e >= 0 && _e <= 1 && me >= 0 && me <= 1 ? {
-      u: _e * r.width,
-      v: me * r.height,
-      z: Ie
+    const [be, Re] = Bt(he, ge, le, y, w, S), Se = be / r + 0.5, ue = Re / o + 0.5, ze = le + M, _e = (Se - 0.5 - u) / P + 0.5, pe = (ue - 0.5 - g) / P + 0.5;
+    return _e >= 0 && _e <= 1 && pe >= 0 && pe <= 1 ? {
+      u: _e * n.width,
+      v: pe * n.height,
+      z: ze
     } : null;
-  }, J = w.showDepthVis ? { showDepthVis: !0, maxZ: b * 0.5 } : void 0;
-  w.showBounds && qt(o, t, a, n, s, d), Ve(o, r, t, a, n, s, h, X, I, J), w.showCrosshair && Ue(o, t, a);
-}
-function Ut(o, r, t, a, n) {
-  if (!("save" in o)) return;
-  const s = o;
-  if (s.save(), s.strokeStyle = "#ff6600", s.lineWidth = 2, s.setLineDash([6, 4]), s.beginPath(), s.arc(r, t, a, 0, Math.PI * 2), s.stroke(), s.beginPath(), s.moveTo(r - a, t), s.lineTo(r + a, t), s.stroke(), s.beginPath(), s.moveTo(r, t - a), s.lineTo(r, t + a), s.stroke(), s.beginPath(), s.moveTo(r - a, t - a), s.lineTo(r - a, t + a), s.stroke(), s.beginPath(), s.moveTo(r + a, t - a), s.lineTo(r + a, t + a), s.stroke(), Math.abs(n) > 1e-3) {
-    s.strokeStyle = "#ffaa00";
-    const l = Math.cos(n), f = Math.sin(n), h = a * 0.7;
-    s.beginPath(), s.moveTo(r + l * h, t + f * h), s.lineTo(r - l * h, t - f * h), s.stroke(), s.beginPath(), s.moveTo(r - f * h, t + l * h), s.lineTo(r + f * h, t - l * h), s.stroke();
-  }
-  s.restore();
-}
-function At(o, r, t, a, n, s, l, f, h, w) {
-  const { radius: u, rotationZ: g } = l, p = g * (Math.PI / 180), T = f.scale, v = f.translateX, y = f.translateY, x = {
-    minX: -u,
-    minY: -u,
-    maxX: u,
-    maxY: u
-  }, z = (k, P) => {
-    const S = Math.sqrt(k * k + P * P);
-    if (S > u) return null;
-    const b = Math.sqrt(u * u - k * k - P * P), m = Math.asin(S / u) * u, i = Math.atan2(P, k) - p, c = m * Math.cos(i), M = m * Math.sin(i), I = c / n + 0.5, X = M / s + 0.5, J = (I - 0.5 - v) / T + 0.5, B = (X - 0.5 - y) / T + 0.5;
-    return J >= 0 && J <= 1 && B >= 0 && B <= 1 ? {
-      u: J * r.width,
-      v: B * r.height,
-      z: b
+  }, z = k.showDepthVis ? { showDepthVis: !0, maxZ: M * 0.5 } : void 0;
+  k.showBounds && qt(s, t, a, r, o, l), Ve(s, n, t, a, r, o, _, R, m, z), k.showCrosshair && Ae(s, t, a);
+}
+function Ft(s, n, t, a, r) {
+  if (!("save" in s)) return;
+  const o = s;
+  if (o.save(), o.strokeStyle = "#ff6600", o.lineWidth = 2, o.setLineDash([6, 4]), o.beginPath(), o.arc(n, t, a, 0, Math.PI * 2), o.stroke(), o.beginPath(), o.moveTo(n - a, t), o.lineTo(n + a, t), o.stroke(), o.beginPath(), o.moveTo(n, t - a), o.lineTo(n, t + a), o.stroke(), o.beginPath(), o.moveTo(n - a, t - a), o.lineTo(n - a, t + a), o.stroke(), o.beginPath(), o.moveTo(n + a, t - a), o.lineTo(n + a, t + a), o.stroke(), Math.abs(r) > 1e-3) {
+    o.strokeStyle = "#ffaa00";
+    const i = Math.cos(r), h = Math.sin(r), _ = a * 0.7;
+    o.beginPath(), o.moveTo(n + i * _, t + h * _), o.lineTo(n - i * _, t - h * _), o.stroke(), o.beginPath(), o.moveTo(n - h * _, t + i * _), o.lineTo(n + h * _, t - i * _), o.stroke();
+  }
+  o.restore();
+}
+function Ht(s, n, t, a, r, o, i, h, _, k) {
+  const { radius: p, rotationZ: v } = i, f = v * (Math.PI / 180), x = h.scale, y = h.translateX, w = h.translateY, S = {
+    minX: -p,
+    minY: -p,
+    maxX: p,
+    maxY: p
+  }, I = (u, g) => {
+    const C = Math.sqrt(u * u + g * g);
+    if (C > p) return null;
+    const M = Math.sqrt(p * p - u * u - g * g), d = Math.asin(C / p) * p, c = Math.atan2(g, u) - f, b = d * Math.cos(c), T = d * Math.sin(c), m = b / r + 0.5, R = T / o + 0.5, z = (m - 0.5 - y) / x + 0.5, N = (R - 0.5 - w) / x + 0.5;
+    return z >= 0 && z <= 1 && N >= 0 && N <= 1 ? {
+      u: z * n.width,
+      v: N * n.height,
+      z: M
     } : null;
-  }, _ = w.showDepthVis ? { showDepthVis: !0, maxZ: u } : void 0;
-  w.showBounds && Ut(o, t, a, u, p), Ve(o, r, t, a, n, s, h, z, x, _), w.showCrosshair && Ue(o, t, a);
+  }, P = k.showDepthVis ? { showDepthVis: !0, maxZ: p } : void 0;
+  k.showBounds && Ft(s, t, a, p, f), Ve(s, n, t, a, r, o, _, I, S, P), k.showCrosshair && Ae(s, t, a);
 }
-function Ht(o, r, t, a, n, s, l) {
-  o.drawImage(r, t - n / 2, a - s / 2, n, s);
+function Kt(s, n, t, a, r, o, i) {
+  s.drawImage(n, t - r / 2, a - o / 2, r, o);
 }
-function Ft(o, r, t, a, n, s, l) {
-  if (!l.enabled || l.shape === "none") {
-    o.drawImage(r, t - n / 2, a - s / 2, n, s);
+function Jt(s, n, t, a, r, o, i) {
+  if (!i.enabled || i.shape === "none") {
+    s.drawImage(n, t - r / 2, a - o / 2, r, o);
     return;
   }
-  const f = l.quality ?? 1, h = l.image ?? se, w = l.debug ?? ve;
-  switch (l.shape) {
+  const h = i.quality ?? 1, _ = i.image ?? se, k = i.debug ?? fe;
+  switch (i.shape) {
     case "cylinder":
-      l.cylinder && Ot(o, r, t, a, n, s, l.cylinder, h, f, w);
+      i.cylinder && Vt(s, n, t, a, r, o, i.cylinder, _, h, k);
       break;
     case "plane":
-      l.plane && Vt(o, r, t, a, n, s, l.plane, h, f, w);
+      i.plane && At(s, n, t, a, r, o, i.plane, _, h, k);
       break;
     case "sphere":
-      l.sphere && At(o, r, t, a, n, s, l.sphere, h, f, w);
+      i.sphere && Ht(s, n, t, a, r, o, i.sphere, _, h, k);
       break;
     case "custom":
-      l.custom && Ht(o, r, t, a, n, s, l.custom);
+      i.custom && Kt(s, n, t, a, r, o, i.custom);
       break;
     default:
-      o.drawImage(r, t - n / 2, a - s / 2, n, s);
+      s.drawImage(n, t - r / 2, a - o / 2, r, o);
+  }
+}
+function Gt(s) {
+  let n = s;
+  for (; n; ) {
+    const t = n.getAttribute("fill");
+    if (t) return t;
+    n = n.parentElement;
+  }
+  return null;
+}
+function $t(s, n) {
+  const a = new DOMParser().parseFromString(s, "image/svg+xml"), r = a.querySelector("svg");
+  return r ? (r.querySelectorAll("path, polygon, polyline, circle, ellipse, rect, line").forEach((i) => {
+    n.strokeColor !== void 0 && i.setAttribute("stroke", n.strokeColor), n.strokeWidth !== void 0 && i.setAttribute("stroke-width", n.strokeWidth.toString()), n.fillColor !== void 0 && Gt(i) !== "none" && i.setAttribute("fill", n.fillColor);
+  }), new XMLSerializer().serializeToString(a)) : s;
+}
+async function Qt(s) {
+  try {
+    if (s.startsWith("data:image/svg+xml")) {
+      const n = s.indexOf(",");
+      if (n === -1) return null;
+      const t = s.substring(n + 1);
+      if (s.substring(0, n).includes(";base64"))
+        try {
+          return atob(t);
+        } catch {
+          return null;
+        }
+      else
+        try {
+          return decodeURIComponent(t);
+        } catch {
+          try {
+            return atob(t);
+          } catch {
+            return null;
+          }
+        }
+    } else {
+      if (s.startsWith("data:"))
+        return null;
+      {
+        const n = await fetch(s), t = n.headers.get("content-type");
+        return t && t.includes("image/svg+xml") ? await n.text() : await n.text();
+      }
+    }
+  } catch {
+    return null;
   }
 }
+function en(s) {
+  const n = s.trim();
+  if (n.startsWith("<svg") || n.startsWith("<?xml"))
+    try {
+      return new DOMParser().parseFromString(s, "image/svg+xml").querySelector("svg") !== null;
+    } catch {
+      return !1;
+    }
+  return !1;
+}
+async function st(s) {
+  const n = await Qt(s);
+  return n ? en(n) : !1;
+}
 const ee = {
   type: "restyle",
   brightness: 0,
@@ -514,56 +577,61 @@ const ee = {
   vibrance: 0,
   temperature: 0,
   tint: 0
-}, fe = {
+}, ve = {
   type: "resize",
   mode: "scale",
   scale: 1,
   maintainAspectRatio: !0
+}, Pe = {
+  type: "svg",
+  strokeWidth: 0,
+  strokeColor: "#000000",
+  fillColor: void 0
 };
-function et(o, r) {
-  let t = o, a = o.width, n = o.height;
-  const s = Kt(r);
-  for (const l of s)
-    switch (l.type) {
+function tt(s, n) {
+  let t = s, a = s.width, r = s.height;
+  const o = tn(n);
+  for (const i of o)
+    switch (i.type) {
       case "resize":
-        const f = Xt(a, n, l);
-        a = f.width, n = f.height;
+        const h = Lt(a, r, i);
+        a = h.width, r = h.height;
         break;
       case "restyle":
-        t = Jt(t, l);
+        t = nn(t, i);
         break;
     }
   return {
     image: t,
     width: a,
-    height: n
+    height: r
   };
 }
-function Kt(o) {
-  const r = ["resize", "restyle", "warp"];
-  return o.sort((t, a) => {
-    const n = r.indexOf(t.type), s = r.indexOf(a.type);
-    return n - s;
+function tn(s) {
+  const n = ["svg", "resize", "restyle", "warp"];
+  return s.sort((t, a) => {
+    const r = n.indexOf(t.type), o = n.indexOf(a.type);
+    return r - o;
   });
 }
-function Jt(o, r) {
-  const t = new OffscreenCanvas(o.width, o.height), a = t.getContext("2d");
-  if (!a) return o;
-  a.drawImage(o, 0, 0);
-  const n = a.getImageData(0, 0, o.width, o.height), s = Pt(n, r);
-  return a.putImageData(s, 0, 0), t.transferToImageBitmap();
+function nn(s, n) {
+  const t = new OffscreenCanvas(s.width, s.height), a = t.getContext("2d");
+  if (!a) return s;
+  a.drawImage(s, 0, 0);
+  const r = a.getImageData(0, 0, s.width, s.height), o = jt(r, n);
+  return a.putImageData(o, 0, 0), t.transferToImageBitmap();
 }
-class at {
+class ot {
   latestInput = null;
   rafPending = !1;
   timeoutId = null;
   onFlush;
   TRAILING_MS = 32;
-  constructor(r) {
-    this.onFlush = r;
+  constructor(n) {
+    this.onFlush = n;
   }
-  queue(r) {
-    this.latestInput = r, this.timeoutId !== null && clearTimeout(this.timeoutId), this.rafPending || (this.rafPending = !0, requestAnimationFrame(() => {
+  queue(n) {
+    this.latestInput = n, this.timeoutId !== null && clearTimeout(this.timeoutId), this.rafPending || (this.rafPending = !0, requestAnimationFrame(() => {
       this.rafPending = !1, this.flush();
     })), this.timeoutId = setTimeout(() => {
       this.timeoutId = null, this.flush();
@@ -572,34 +640,34 @@ class at {
   flush() {
     if (this.latestInput === null) return;
     this.timeoutId !== null && (clearTimeout(this.timeoutId), this.timeoutId = null);
-    const r = this.latestInput;
-    this.latestInput = null, this.onFlush(r);
+    const n = this.latestInput;
+    this.latestInput = null, this.onFlush(n);
   }
   destroy() {
     this.timeoutId !== null && (clearTimeout(this.timeoutId), this.timeoutId = null), this.latestInput = null;
   }
 }
-const st = '(function(){"use strict";const ot={scale:1,translateX:0,translateY:0},at={showBounds:!1,showDepthVis:!1,showCrosshair:!1};({...ot});function et(c){const n=new OffscreenCanvas(c.width,c.height).getContext("2d");if(!n)throw new Error("Failed to create canvas context");return n.drawImage(c,0,0),n.getImageData(0,0,c.width,c.height)}function ct(c,e,n){const s=c.width,o=c.height,t=c.data;if(e<0||e>=s||n<0||n>=o)return null;const a=Math.floor(e),u=Math.floor(n),r=Math.min(a+1,s-1),M=Math.min(u+1,o-1),l=e-a,m=n-u,f=(Y,z)=>{const d=(z*s+Y)*4;return{r:t[d],g:t[d+1],b:t[d+2],a:t[d+3]}},g=f(a,u),i=f(r,u),p=f(a,M),h=f(r,M),S=(Y,z,d)=>Y+(z-Y)*d,X=S(S(g.r,i.r,l),S(p.r,h.r,l),m),v=S(S(g.g,i.g,l),S(p.g,h.g,l),m),V=S(S(g.b,i.b,l),S(p.b,h.b,l),m),B=S(S(g.a,i.a,l),S(p.a,h.a,l),m);return{r:X,g:v,b:V,a:B}}function J(c,e,n,s,o,t,a,u,r,M){const l=et(e),m=M?.showDepthVis??!1,f=M?.maxZ??500,g=r??{minX:-o/2,minY:-t/2,maxX:o/2,maxY:t/2},i=g.maxX-g.minX,p=g.maxY-g.minY,h=Math.floor(i*a),S=Math.floor(p*a);if(h<=0||S<=0)return;const X=new ImageData(h,S),v=X.data;for(let d=0;d<S;d++)for(let P=0;P<h;P++){const T=g.minX+P/a,b=g.minY+d/a,I=u(T,b);if(!I||I.z<=0)continue;const y=(d*h+P)*4;if(m){const Z=Math.min(1,Math.max(0,I.z/f)),x=Math.floor(Z*200+55);v[y]=Math.floor(x*.3),v[y+1]=Math.floor(x*.6),v[y+2]=x,v[y+3]=200}else{const{u:Z,v:x}=I,w=ct(l,Z,x);w&&(v[y]=Math.round(w.r),v[y+1]=Math.round(w.g),v[y+2]=Math.round(w.b),v[y+3]=Math.round(w.a))}}const V=new OffscreenCanvas(h,S),B=V.getContext("2d");if(!B)return;B.putImageData(X,0,0);const Y=n+g.minX,z=s+g.minY;a!==1?c.drawImage(V,Y,z,i,p):c.drawImage(V,Y,z)}function K(c,e,n,s=20){if(!("save"in c))return;const o=c;o.save(),o.strokeStyle="#00ff00",o.lineWidth=2,o.beginPath(),o.moveTo(e-s,n),o.lineTo(e+s,n),o.stroke(),o.beginPath(),o.moveTo(e,n-s),o.lineTo(e,n+s),o.stroke(),o.fillStyle="#00ff00",o.beginPath(),o.arc(e,n,3,0,Math.PI*2),o.fill(),o.restore()}function U(c,e,n,s,o,t){const a=Math.cos(s),u=Math.sin(s),r=Math.cos(o),M=Math.sin(o),l=Math.cos(t),m=Math.sin(t);let f=c,g=e,i=n;if(t!==0){const p=f,h=g;f=p*l-h*m,g=p*m+h*l}if(o!==0){const p=f,h=i;f=p*r+h*M,i=-p*M+h*r}if(s!==0){const p=g,h=i;g=p*a-h*u,i=p*u+h*a}return[f,g,i]}function it(c,e,n,s,o,t){const a=Math.cos(s),u=Math.sin(s),r=Math.cos(o),M=Math.sin(o),l=Math.cos(t),m=Math.sin(t);let f=c,g=e,i=n;if(s!==0){const p=g,h=i;g=p*a+h*u,i=-p*u+h*a}if(o!==0){const p=f,h=i;f=p*r-h*M,i=p*M+h*r}if(t!==0){const p=f,h=g;f=p*l+h*m,g=-p*m+h*l}return[f,g,i]}function rt(c,e,n,s,o,t){if(!("save"in c))return;const a=c;a.save(),a.strokeStyle="#ff6600",a.lineWidth=1.5,a.setLineDash([4,6]);const u=50,r=3;for(let M=-r;M<=r;M++){const l=M*u,m=[];for(let f=-10;f<=10;f++){const g=f*u,i=t(l,g);i&&m.push({x:e+i.x,y:n+i.y})}if(m.length>1){a.beginPath(),a.moveTo(m[0].x,m[0].y);for(let f=1;f<m.length;f++)a.lineTo(m[f].x,m[f].y);a.stroke()}}for(let M=-r;M<=r;M++){const l=M*u,m=[];for(let f=-10;f<=10;f++){const g=f*u,i=t(g,l);i&&m.push({x:e+i.x,y:n+i.y})}if(m.length>1){a.beginPath(),a.moveTo(m[0].x,m[0].y);for(let f=1;f<m.length;f++)a.lineTo(m[f].x,m[f].y);a.stroke()}}a.restore()}function lt(c,e,n,s,o,t,a,u){if(!("save"in c))return;const r=c;r.save(),r.lineWidth=2,r.setLineDash([6,4]);const M=Math.sin(t);let l=1/0,m=-1/0;const f=(d,P,T)=>{const b=P*M,I=u/(u+b);return{x:e+d*I,y:n+P*I,z:T}},g=(d,P,T)=>{const b=T-P;if(b<.001)return"#ff6600";const I=(d-P)/b,y=Math.round(100+I*155),Z=Math.round(30+I*70),x=Math.round(0+I*0);return`rgb(${y},${Z},${x})`},i=32,p=[],h=[],S=[],X=[],v=t>.01?-Math.PI/2:0,V=t>.01?Math.PI/2:Math.PI*2,B=t<-.01?-Math.PI/2:0,Y=t<-.01?Math.PI/2:Math.PI*2;for(let d=0;d<=i;d++){const P=d/i,T=v+P*(V-v),b=Math.sin(T)*s,I=Math.cos(T)*s,y=-o/2,[Z,x,w]=U(b,y,I,t,0,a),k=f(Z,x,w);p.push(k),l=Math.min(l,w),m=Math.max(m,w)}for(let d=0;d<=i;d++){const P=d/i,T=B+P*(Y-B),b=Math.sin(T)*s,I=Math.cos(T)*s,y=o/2,[Z,x,w]=U(b,y,I,t,0,a),k=f(Z,x,w);h.push(k),l=Math.min(l,w),m=Math.max(m,w)}for(let d=0;d<=10;d++){const P=d/10,T=-o/2+P*o,[b,I,y]=U(-s,T,0,t,0,a);S.push(f(b,I,y)),l=Math.min(l,y),m=Math.max(m,y);const[Z,x,w]=U(s,T,0,t,0,a);X.push(f(Z,x,w)),l=Math.min(l,w),m=Math.max(m,w)}const z=d=>{for(let P=0;P<d.length-1;P++){const T=d[P],b=d[P+1],I=(T.z+b.z)/2;r.strokeStyle=g(I,l,m),r.beginPath(),r.moveTo(T.x,T.y),r.lineTo(b.x,b.y),r.stroke()}};z(p),z(h),z(S),z(X),r.restore()}function ft(c,e,n,s,o,t,a,u,r,M){const{diameter:l,perspective:m,rotationX:f,rotationZ:g}=a,i=l/2,p=f*Math.PI/180,h=g*Math.PI/180,S=Math.abs(p)>.001,X=m??1,v=X>.01?i*(10/X):i*1e3,V=u.scale,B=u.translateX,Y=u.translateY;let z={minX:-i,minY:-t/2,maxX:i,maxY:t/2};if(S){const T=[{x:-i,y:-t/2},{x:i,y:-t/2},{x:i,y:t/2},{x:-i,y:t/2}],b=[];for(const y of T){const[Z,x,w]=U(y.x,y.y,i,p,0,h),k=v/(v+w);b.push({x:Z*k,y:x*k});const[j,W,C]=U(y.x,y.y,0,p,0,h),D=v/(v+C);b.push({x:j*D,y:W*D})}const I=i*Math.abs(Math.sin(p));b.length>0&&(z={minX:Math.min(...b.map(y=>y.x))-2,minY:Math.min(...b.map(y=>y.y))-I-2,maxX:Math.max(...b.map(y=>y.x))+2,maxY:Math.max(...b.map(y=>y.y))+I+2})}const d=(T,b)=>{const I=Math.cos(h),y=Math.sin(h),Z=T*I+b*y,x=-T*y+b*I,w=Math.cos(p),k=Math.sin(p),j=x*k,W=v/(v+j),C=Z/W,D=x/W;if(Math.abs(C)>i)return null;const E=Math.sqrt(i*i-C*C);if(Math.abs(w)<.01)return null;const L=(D+E*k)/w,O=L*k+E*w;if(O<0)return null;const F=Math.asin(C/i)*i/o+.5,$=L/t+.5,q=(F-.5-B)/V+.5,A=($-.5-Y)/V+.5;return q>=0&&q<=1&&A>=0&&A<=1?{u:q*e.width,v:A*e.height,z:O}:null},P=M.showDepthVis?{showDepthVis:!0,maxZ:i}:void 0;M.showBounds&&lt(c,n,s,i,t,p,h,v),J(c,e,n,s,o,t,r,d,z,P),M.showCrosshair&&K(c,n,s)}function ht(c,e,n,s,o,t,a,u,r,M){const{rotationX:l,rotationY:m,rotationZ:f,depthScale:g}=a,i=l*(Math.PI/180),p=m*(Math.PI/180),h=f*(Math.PI/180),S=Math.abs(i)>.001||Math.abs(p)>.001||Math.abs(h)>.001,X=u.scale,v=u.translateX,V=u.translateY,B=g*.001,Y=B>1e-4?1/B:1e4,z=(x,w)=>{const[k,j,W]=U(x,w,0,i,p,h),C=W+Y;if(C<=0)return null;const D=Y/C,E=k*D,L=j*D;return{x:E,y:L,z:W}};let d=-o/2,P=o/2,T=-t/2,b=t/2;if(S){const x=[];for(let k=0;k<=10;k++){const j=k/10,W=-o/2+j*o,C=z(W,-t/2);C&&x.push({x:C.x,y:C.y});const D=z(W,t/2);D&&x.push({x:D.x,y:D.y});const E=-t/2+j*t,L=z(-o/2,E);L&&x.push({x:L.x,y:L.y});const O=z(o/2,E);O&&x.push({x:O.x,y:O.y})}if(x.length>0){d=Math.min(...x.map(D=>D.x)),P=Math.max(...x.map(D=>D.x)),T=Math.min(...x.map(D=>D.y)),b=Math.max(...x.map(D=>D.y));const k=Math.sqrt(i*i+p*p+h*h),j=2,W=k*Math.max(o,t)*.1,C=j+W;d-=C,P+=C,T-=C,b+=C}}const I={minX:d,minY:T,maxX:P,maxY:b},y=(x,w)=>{if(!S){const wt=x/o+.5,St=w/t+.5,tt=(wt-.5-v)/X+.5,nt=(St-.5-V)/X+.5;return tt>=0&&tt<=1&&nt>=0&&nt<=1?{u:tt*e.width,v:nt*e.height,z:1}:null}const[k,j,W]=U(0,0,1,i,p,h),C=0,D=0,E=0,L=-Y,O=x-D,R=w-E,H=0-L,F=Math.sqrt(O*O+R*R+H*H),$=O/F,q=R/F,A=H/F,st=$*k+q*j+A*W;if(Math.abs(st)<1e-4)return null;const G=-(D*k+E*j+L*W+C)/st;if(G<0)return null;const yt=D+$*G,xt=E+q*G,N=L+A*G;if(N<L)return null;const[bt,vt]=it(yt,xt,N,i,p,h),Pt=bt/o+.5,Tt=vt/t+.5,It=N+Y,Q=(Pt-.5-v)/X+.5,_=(Tt-.5-V)/X+.5;return Q>=0&&Q<=1&&_>=0&&_<=1?{u:Q*e.width,v:_*e.height,z:It}:null},Z=M.showDepthVis?{showDepthVis:!0,maxZ:Y*.5}:void 0;M.showBounds&&rt(c,n,s,o,t,z),J(c,e,n,s,o,t,r,y,I,Z),M.showCrosshair&&K(c,n,s)}function pt(c,e,n,s,o){if(!("save"in c))return;const t=c;if(t.save(),t.strokeStyle="#ff6600",t.lineWidth=2,t.setLineDash([6,4]),t.beginPath(),t.arc(e,n,s,0,Math.PI*2),t.stroke(),t.beginPath(),t.moveTo(e-s,n),t.lineTo(e+s,n),t.stroke(),t.beginPath(),t.moveTo(e,n-s),t.lineTo(e,n+s),t.stroke(),t.beginPath(),t.moveTo(e-s,n-s),t.lineTo(e-s,n+s),t.stroke(),t.beginPath(),t.moveTo(e+s,n-s),t.lineTo(e+s,n+s),t.stroke(),Math.abs(o)>.001){t.strokeStyle="#ffaa00";const a=Math.cos(o),u=Math.sin(o),r=s*.7;t.beginPath(),t.moveTo(e+a*r,n+u*r),t.lineTo(e-a*r,n-u*r),t.stroke(),t.beginPath(),t.moveTo(e-u*r,n+a*r),t.lineTo(e+u*r,n-a*r),t.stroke()}t.restore()}function mt(c,e,n,s,o,t,a,u,r,M){const{radius:l,rotationZ:m}=a,f=m*(Math.PI/180),g=u.scale,i=u.translateX,p=u.translateY,h={minX:-l,minY:-l,maxX:l,maxY:l},S=(v,V)=>{const B=Math.sqrt(v*v+V*V);if(B>l)return null;const Y=Math.sqrt(l*l-v*v-V*V),d=Math.asin(B/l)*l,P=Math.atan2(V,v)-f,T=d*Math.cos(P),b=d*Math.sin(P),I=T/o+.5,y=b/t+.5,Z=(I-.5-i)/g+.5,x=(y-.5-p)/g+.5;return Z>=0&&Z<=1&&x>=0&&x<=1?{u:Z*e.width,v:x*e.height,z:Y}:null},X=M.showDepthVis?{showDepthVis:!0,maxZ:l}:void 0;M.showBounds&&pt(c,n,s,l,f),J(c,e,n,s,o,t,r,S,h,X),M.showCrosshair&&K(c,n,s)}function ut(c,e,n,s,o,t,a){c.drawImage(e,n-o/2,s-t/2,o,t)}function dt(c,e,n,s,o,t,a){if(!a.enabled||a.shape==="none"){c.drawImage(e,n-o/2,s-t/2,o,t);return}const u=a.quality??1,r=a.image??ot,M=a.debug??at;switch(a.shape){case"cylinder":a.cylinder&&ft(c,e,n,s,o,t,a.cylinder,r,u,M);break;case"plane":a.plane&&ht(c,e,n,s,o,t,a.plane,r,u,M);break;case"sphere":a.sphere&&mt(c,e,n,s,o,t,a.sphere,r,u,M);break;case"custom":a.custom&&ut(c,e,n,s,o,t,a.custom);break;default:c.drawImage(e,n-o/2,s-t/2,o,t)}}self.onmessage=async c=>{const{type:e,payload:n}=c.data;if(e==="render"){const s=performance.now();try{const o=await Mt(n),t=performance.now()-s,a={type:"complete",payload:{id:n.id,result:o,frameTime:t}};self.postMessage(a,[o])}catch(o){const t={type:"error",payload:{id:n.id,error:o instanceof Error?o.message:String(o)}};self.postMessage(t)}}};async function Mt(c){const{canvasWidth:e,canvasHeight:n,layers:s,images:o}=c;performance.now();const t=new OffscreenCanvas(e,n),a=t.getContext("2d");if(!a)throw new Error("Failed to get 2d context");a.fillStyle="#ffffff",a.fillRect(0,0,e,n);for(let r=0;r<s.length;r++){const M=s[r],l=o[r];l&&gt(a,l,M)}return await createImageBitmap(t)}function gt(c,e,n){c.save(),c.globalAlpha=n.opacity;const s=n.x,o=n.y;c.translate(s,o),c.rotate(n.rotation*Math.PI/180),n.warp&&n.warp.enabled&&n.warp.shape!=="none"?dt(c,e,0,0,n.width,n.height,n.warp):c.drawImage(e,-n.width/2,-n.height/2,n.width,n.height),c.restore()}})();\n', tt = typeof self < "u" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", st], { type: "text/javascript;charset=utf-8" });
-function Gt(o) {
-  let r;
+const it = '(function(){"use strict";const ot={scale:1,translateX:0,translateY:0},at={showBounds:!1,showDepthVis:!1,showCrosshair:!1};({...ot});function et(c){const n=new OffscreenCanvas(c.width,c.height).getContext("2d");if(!n)throw new Error("Failed to create canvas context");return n.drawImage(c,0,0),n.getImageData(0,0,c.width,c.height)}function ct(c,e,n){const s=c.width,o=c.height,t=c.data;if(e<0||e>=s||n<0||n>=o)return null;const a=Math.floor(e),u=Math.floor(n),r=Math.min(a+1,s-1),M=Math.min(u+1,o-1),l=e-a,m=n-u,f=(Y,z)=>{const d=(z*s+Y)*4;return{r:t[d],g:t[d+1],b:t[d+2],a:t[d+3]}},g=f(a,u),i=f(r,u),p=f(a,M),h=f(r,M),S=(Y,z,d)=>Y+(z-Y)*d,X=S(S(g.r,i.r,l),S(p.r,h.r,l),m),v=S(S(g.g,i.g,l),S(p.g,h.g,l),m),V=S(S(g.b,i.b,l),S(p.b,h.b,l),m),B=S(S(g.a,i.a,l),S(p.a,h.a,l),m);return{r:X,g:v,b:V,a:B}}function J(c,e,n,s,o,t,a,u,r,M){const l=et(e),m=M?.showDepthVis??!1,f=M?.maxZ??500,g=r??{minX:-o/2,minY:-t/2,maxX:o/2,maxY:t/2},i=g.maxX-g.minX,p=g.maxY-g.minY,h=Math.floor(i*a),S=Math.floor(p*a);if(h<=0||S<=0)return;const X=new ImageData(h,S),v=X.data;for(let d=0;d<S;d++)for(let P=0;P<h;P++){const T=g.minX+P/a,b=g.minY+d/a,I=u(T,b);if(!I||I.z<=0)continue;const y=(d*h+P)*4;if(m){const Z=Math.min(1,Math.max(0,I.z/f)),x=Math.floor(Z*200+55);v[y]=Math.floor(x*.3),v[y+1]=Math.floor(x*.6),v[y+2]=x,v[y+3]=200}else{const{u:Z,v:x}=I,w=ct(l,Z,x);w&&(v[y]=Math.round(w.r),v[y+1]=Math.round(w.g),v[y+2]=Math.round(w.b),v[y+3]=Math.round(w.a))}}const V=new OffscreenCanvas(h,S),B=V.getContext("2d");if(!B)return;B.putImageData(X,0,0);const Y=n+g.minX,z=s+g.minY;a!==1?c.drawImage(V,Y,z,i,p):c.drawImage(V,Y,z)}function K(c,e,n,s=20){if(!("save"in c))return;const o=c;o.save(),o.strokeStyle="#00ff00",o.lineWidth=2,o.beginPath(),o.moveTo(e-s,n),o.lineTo(e+s,n),o.stroke(),o.beginPath(),o.moveTo(e,n-s),o.lineTo(e,n+s),o.stroke(),o.fillStyle="#00ff00",o.beginPath(),o.arc(e,n,3,0,Math.PI*2),o.fill(),o.restore()}function U(c,e,n,s,o,t){const a=Math.cos(s),u=Math.sin(s),r=Math.cos(o),M=Math.sin(o),l=Math.cos(t),m=Math.sin(t);let f=c,g=e,i=n;if(t!==0){const p=f,h=g;f=p*l-h*m,g=p*m+h*l}if(o!==0){const p=f,h=i;f=p*r+h*M,i=-p*M+h*r}if(s!==0){const p=g,h=i;g=p*a-h*u,i=p*u+h*a}return[f,g,i]}function it(c,e,n,s,o,t){const a=Math.cos(s),u=Math.sin(s),r=Math.cos(o),M=Math.sin(o),l=Math.cos(t),m=Math.sin(t);let f=c,g=e,i=n;if(s!==0){const p=g,h=i;g=p*a+h*u,i=-p*u+h*a}if(o!==0){const p=f,h=i;f=p*r-h*M,i=p*M+h*r}if(t!==0){const p=f,h=g;f=p*l+h*m,g=-p*m+h*l}return[f,g,i]}function rt(c,e,n,s,o,t){if(!("save"in c))return;const a=c;a.save(),a.strokeStyle="#ff6600",a.lineWidth=1.5,a.setLineDash([4,6]);const u=50,r=3;for(let M=-r;M<=r;M++){const l=M*u,m=[];for(let f=-10;f<=10;f++){const g=f*u,i=t(l,g);i&&m.push({x:e+i.x,y:n+i.y})}if(m.length>1){a.beginPath(),a.moveTo(m[0].x,m[0].y);for(let f=1;f<m.length;f++)a.lineTo(m[f].x,m[f].y);a.stroke()}}for(let M=-r;M<=r;M++){const l=M*u,m=[];for(let f=-10;f<=10;f++){const g=f*u,i=t(g,l);i&&m.push({x:e+i.x,y:n+i.y})}if(m.length>1){a.beginPath(),a.moveTo(m[0].x,m[0].y);for(let f=1;f<m.length;f++)a.lineTo(m[f].x,m[f].y);a.stroke()}}a.restore()}function lt(c,e,n,s,o,t,a,u){if(!("save"in c))return;const r=c;r.save(),r.lineWidth=2,r.setLineDash([6,4]);const M=Math.sin(t);let l=1/0,m=-1/0;const f=(d,P,T)=>{const b=P*M,I=u/(u+b);return{x:e+d*I,y:n+P*I,z:T}},g=(d,P,T)=>{const b=T-P;if(b<.001)return"#ff6600";const I=(d-P)/b,y=Math.round(100+I*155),Z=Math.round(30+I*70),x=Math.round(0+I*0);return`rgb(${y},${Z},${x})`},i=32,p=[],h=[],S=[],X=[],v=t>.01?-Math.PI/2:0,V=t>.01?Math.PI/2:Math.PI*2,B=t<-.01?-Math.PI/2:0,Y=t<-.01?Math.PI/2:Math.PI*2;for(let d=0;d<=i;d++){const P=d/i,T=v+P*(V-v),b=Math.sin(T)*s,I=Math.cos(T)*s,y=-o/2,[Z,x,w]=U(b,y,I,t,0,a),k=f(Z,x,w);p.push(k),l=Math.min(l,w),m=Math.max(m,w)}for(let d=0;d<=i;d++){const P=d/i,T=B+P*(Y-B),b=Math.sin(T)*s,I=Math.cos(T)*s,y=o/2,[Z,x,w]=U(b,y,I,t,0,a),k=f(Z,x,w);h.push(k),l=Math.min(l,w),m=Math.max(m,w)}for(let d=0;d<=10;d++){const P=d/10,T=-o/2+P*o,[b,I,y]=U(-s,T,0,t,0,a);S.push(f(b,I,y)),l=Math.min(l,y),m=Math.max(m,y);const[Z,x,w]=U(s,T,0,t,0,a);X.push(f(Z,x,w)),l=Math.min(l,w),m=Math.max(m,w)}const z=d=>{for(let P=0;P<d.length-1;P++){const T=d[P],b=d[P+1],I=(T.z+b.z)/2;r.strokeStyle=g(I,l,m),r.beginPath(),r.moveTo(T.x,T.y),r.lineTo(b.x,b.y),r.stroke()}};z(p),z(h),z(S),z(X),r.restore()}function ft(c,e,n,s,o,t,a,u,r,M){const{diameter:l,perspective:m,rotationX:f,rotationZ:g}=a,i=l/2,p=f*Math.PI/180,h=g*Math.PI/180,S=Math.abs(p)>.001,X=m??1,v=X>.01?i*(10/X):i*1e3,V=u.scale,B=u.translateX,Y=u.translateY;let z={minX:-i,minY:-t/2,maxX:i,maxY:t/2};if(S){const T=[{x:-i,y:-t/2},{x:i,y:-t/2},{x:i,y:t/2},{x:-i,y:t/2}],b=[];for(const y of T){const[Z,x,w]=U(y.x,y.y,i,p,0,h),k=v/(v+w);b.push({x:Z*k,y:x*k});const[j,W,C]=U(y.x,y.y,0,p,0,h),D=v/(v+C);b.push({x:j*D,y:W*D})}const I=i*Math.abs(Math.sin(p));b.length>0&&(z={minX:Math.min(...b.map(y=>y.x))-2,minY:Math.min(...b.map(y=>y.y))-I-2,maxX:Math.max(...b.map(y=>y.x))+2,maxY:Math.max(...b.map(y=>y.y))+I+2})}const d=(T,b)=>{const I=Math.cos(h),y=Math.sin(h),Z=T*I+b*y,x=-T*y+b*I,w=Math.cos(p),k=Math.sin(p),j=x*k,W=v/(v+j),C=Z/W,D=x/W;if(Math.abs(C)>i)return null;const E=Math.sqrt(i*i-C*C);if(Math.abs(w)<.01)return null;const L=(D+E*k)/w,O=L*k+E*w;if(O<0)return null;const F=Math.asin(C/i)*i/o+.5,$=L/t+.5,q=(F-.5-B)/V+.5,A=($-.5-Y)/V+.5;return q>=0&&q<=1&&A>=0&&A<=1?{u:q*e.width,v:A*e.height,z:O}:null},P=M.showDepthVis?{showDepthVis:!0,maxZ:i}:void 0;M.showBounds&&lt(c,n,s,i,t,p,h,v),J(c,e,n,s,o,t,r,d,z,P),M.showCrosshair&&K(c,n,s)}function ht(c,e,n,s,o,t,a,u,r,M){const{rotationX:l,rotationY:m,rotationZ:f,depthScale:g}=a,i=l*(Math.PI/180),p=m*(Math.PI/180),h=f*(Math.PI/180),S=Math.abs(i)>.001||Math.abs(p)>.001||Math.abs(h)>.001,X=u.scale,v=u.translateX,V=u.translateY,B=g*.001,Y=B>1e-4?1/B:1e4,z=(x,w)=>{const[k,j,W]=U(x,w,0,i,p,h),C=W+Y;if(C<=0)return null;const D=Y/C,E=k*D,L=j*D;return{x:E,y:L,z:W}};let d=-o/2,P=o/2,T=-t/2,b=t/2;if(S){const x=[];for(let k=0;k<=10;k++){const j=k/10,W=-o/2+j*o,C=z(W,-t/2);C&&x.push({x:C.x,y:C.y});const D=z(W,t/2);D&&x.push({x:D.x,y:D.y});const E=-t/2+j*t,L=z(-o/2,E);L&&x.push({x:L.x,y:L.y});const O=z(o/2,E);O&&x.push({x:O.x,y:O.y})}if(x.length>0){d=Math.min(...x.map(D=>D.x)),P=Math.max(...x.map(D=>D.x)),T=Math.min(...x.map(D=>D.y)),b=Math.max(...x.map(D=>D.y));const k=Math.sqrt(i*i+p*p+h*h),j=2,W=k*Math.max(o,t)*.1,C=j+W;d-=C,P+=C,T-=C,b+=C}}const I={minX:d,minY:T,maxX:P,maxY:b},y=(x,w)=>{if(!S){const wt=x/o+.5,St=w/t+.5,tt=(wt-.5-v)/X+.5,nt=(St-.5-V)/X+.5;return tt>=0&&tt<=1&&nt>=0&&nt<=1?{u:tt*e.width,v:nt*e.height,z:1}:null}const[k,j,W]=U(0,0,1,i,p,h),C=0,D=0,E=0,L=-Y,O=x-D,R=w-E,H=0-L,F=Math.sqrt(O*O+R*R+H*H),$=O/F,q=R/F,A=H/F,st=$*k+q*j+A*W;if(Math.abs(st)<1e-4)return null;const G=-(D*k+E*j+L*W+C)/st;if(G<0)return null;const yt=D+$*G,xt=E+q*G,N=L+A*G;if(N<L)return null;const[bt,vt]=it(yt,xt,N,i,p,h),Pt=bt/o+.5,Tt=vt/t+.5,It=N+Y,Q=(Pt-.5-v)/X+.5,_=(Tt-.5-V)/X+.5;return Q>=0&&Q<=1&&_>=0&&_<=1?{u:Q*e.width,v:_*e.height,z:It}:null},Z=M.showDepthVis?{showDepthVis:!0,maxZ:Y*.5}:void 0;M.showBounds&&rt(c,n,s,o,t,z),J(c,e,n,s,o,t,r,y,I,Z),M.showCrosshair&&K(c,n,s)}function pt(c,e,n,s,o){if(!("save"in c))return;const t=c;if(t.save(),t.strokeStyle="#ff6600",t.lineWidth=2,t.setLineDash([6,4]),t.beginPath(),t.arc(e,n,s,0,Math.PI*2),t.stroke(),t.beginPath(),t.moveTo(e-s,n),t.lineTo(e+s,n),t.stroke(),t.beginPath(),t.moveTo(e,n-s),t.lineTo(e,n+s),t.stroke(),t.beginPath(),t.moveTo(e-s,n-s),t.lineTo(e-s,n+s),t.stroke(),t.beginPath(),t.moveTo(e+s,n-s),t.lineTo(e+s,n+s),t.stroke(),Math.abs(o)>.001){t.strokeStyle="#ffaa00";const a=Math.cos(o),u=Math.sin(o),r=s*.7;t.beginPath(),t.moveTo(e+a*r,n+u*r),t.lineTo(e-a*r,n-u*r),t.stroke(),t.beginPath(),t.moveTo(e-u*r,n+a*r),t.lineTo(e+u*r,n-a*r),t.stroke()}t.restore()}function mt(c,e,n,s,o,t,a,u,r,M){const{radius:l,rotationZ:m}=a,f=m*(Math.PI/180),g=u.scale,i=u.translateX,p=u.translateY,h={minX:-l,minY:-l,maxX:l,maxY:l},S=(v,V)=>{const B=Math.sqrt(v*v+V*V);if(B>l)return null;const Y=Math.sqrt(l*l-v*v-V*V),d=Math.asin(B/l)*l,P=Math.atan2(V,v)-f,T=d*Math.cos(P),b=d*Math.sin(P),I=T/o+.5,y=b/t+.5,Z=(I-.5-i)/g+.5,x=(y-.5-p)/g+.5;return Z>=0&&Z<=1&&x>=0&&x<=1?{u:Z*e.width,v:x*e.height,z:Y}:null},X=M.showDepthVis?{showDepthVis:!0,maxZ:l}:void 0;M.showBounds&&pt(c,n,s,l,f),J(c,e,n,s,o,t,r,S,h,X),M.showCrosshair&&K(c,n,s)}function ut(c,e,n,s,o,t,a){c.drawImage(e,n-o/2,s-t/2,o,t)}function dt(c,e,n,s,o,t,a){if(!a.enabled||a.shape==="none"){c.drawImage(e,n-o/2,s-t/2,o,t);return}const u=a.quality??1,r=a.image??ot,M=a.debug??at;switch(a.shape){case"cylinder":a.cylinder&&ft(c,e,n,s,o,t,a.cylinder,r,u,M);break;case"plane":a.plane&&ht(c,e,n,s,o,t,a.plane,r,u,M);break;case"sphere":a.sphere&&mt(c,e,n,s,o,t,a.sphere,r,u,M);break;case"custom":a.custom&&ut(c,e,n,s,o,t,a.custom);break;default:c.drawImage(e,n-o/2,s-t/2,o,t)}}self.onmessage=async c=>{const{type:e,payload:n}=c.data;if(e==="render"){const s=performance.now();try{const o=await Mt(n),t=performance.now()-s,a={type:"complete",payload:{id:n.id,result:o,frameTime:t}};self.postMessage(a,[o])}catch(o){const t={type:"error",payload:{id:n.id,error:o instanceof Error?o.message:String(o)}};self.postMessage(t)}}};async function Mt(c){const{canvasWidth:e,canvasHeight:n,layers:s,images:o}=c;performance.now();const t=new OffscreenCanvas(e,n),a=t.getContext("2d");if(!a)throw new Error("Failed to get 2d context");a.fillStyle="#ffffff",a.fillRect(0,0,e,n);for(let r=0;r<s.length;r++){const M=s[r],l=o[r];l&&gt(a,l,M)}return await createImageBitmap(t)}function gt(c,e,n){c.save(),c.globalAlpha=n.opacity;const s=n.x,o=n.y;c.translate(s,o),c.rotate(n.rotation*Math.PI/180),n.warp&&n.warp.enabled&&n.warp.shape!=="none"?dt(c,e,0,0,n.width,n.height,n.warp):c.drawImage(e,-n.width/2,-n.height/2,n.width,n.height),c.restore()}})();\n', nt = typeof self < "u" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", it], { type: "text/javascript;charset=utf-8" });
+function rn(s) {
+  let n;
   try {
-    if (r = tt && (self.URL || self.webkitURL).createObjectURL(tt), !r) throw "";
-    const t = new Worker(r, {
-      name: o?.name
+    if (n = nt && (self.URL || self.webkitURL).createObjectURL(nt), !n) throw "";
+    const t = new Worker(n, {
+      name: s?.name
     });
     return t.addEventListener("error", () => {
-      (self.URL || self.webkitURL).revokeObjectURL(r);
+      (self.URL || self.webkitURL).revokeObjectURL(n);
     }), t;
   } catch {
     return new Worker(
-      "data:text/javascript;charset=utf-8," + encodeURIComponent(st),
+      "data:text/javascript;charset=utf-8," + encodeURIComponent(it),
       {
-        name: o?.name
+        name: s?.name
       }
     );
   }
 }
-class $t {
+class an {
   worker = null;
   batcher;
   pendingRequest = null;
@@ -607,1945 +675,2085 @@ class $t {
   frameId = 0;
   lastCompletedId = 0;
   options;
-  constructor(r) {
-    this.options = r, this.batcher = new at((t) => this.submitToWorker(t)), this.initWorker();
+  constructor(n) {
+    this.options = n, this.batcher = new ot((t) => this.submitToWorker(t)), this.initWorker();
   }
   initWorker() {
     try {
-      this.worker = new Gt(), this.worker.onmessage = (r) => {
-        this.handleWorkerMessage(r.data);
-      }, this.worker.onerror = (r) => {
-        console.error("Worker error:", r), this.options.onError?.(`Worker error: ${r.message}`);
+      this.worker = new rn(), this.worker.onmessage = (n) => {
+        this.handleWorkerMessage(n.data);
+      }, this.worker.onerror = (n) => {
+        console.error("Worker error:", n), this.options.onError?.(`Worker error: ${n.message}`);
       };
-    } catch (r) {
-      console.error("Failed to create worker:", r), this.options.onError?.("Failed to create render worker");
+    } catch (n) {
+      console.error("Failed to create worker:", n), this.options.onError?.("Failed to create render worker");
     }
   }
-  request(r) {
-    this.batcher.queue(r);
+  request(n) {
+    this.batcher.queue(n);
   }
-  submitToWorker(r) {
+  submitToWorker(n) {
     const t = ++this.frameId, a = {
-      ...r,
+      ...n,
       id: t
     };
     this.isWorking ? this.pendingRequest = a : this.sendToWorker(a);
   }
-  sendToWorker(r) {
+  sendToWorker(n) {
     if (!this.worker) return;
     this.isWorking = !0;
-    const t = { type: "render", payload: r }, a = r.images.filter((n) => n instanceof ImageBitmap);
+    const t = { type: "render", payload: n }, a = n.images.filter((r) => r instanceof ImageBitmap);
     this.worker.postMessage(t, a);
   }
-  handleWorkerMessage(r) {
-    if (r.type === "error") {
-      console.error("Render error:", r.payload.error), this.isWorking = !1, this.processNext();
+  handleWorkerMessage(n) {
+    if (n.type === "error") {
+      console.error("Render error:", n.payload.error), this.isWorking = !1, this.processNext();
       return;
     }
-    const { id: t, result: a, frameTime: n } = r.payload;
+    const { id: t, result: a, frameTime: r } = n.payload;
     if (this.isWorking = !1, t <= this.lastCompletedId) {
       a.close(), this.processNext();
       return;
     }
-    this.lastCompletedId = t, this.options.onResult(a, n), this.processNext();
+    this.lastCompletedId = t, this.options.onResult(a, r), this.processNext();
   }
   processNext() {
     if (this.pendingRequest) {
-      const r = this.pendingRequest;
-      this.pendingRequest = null, this.sendToWorker(r);
+      const n = this.pendingRequest;
+      this.pendingRequest = null, this.sendToWorker(n);
     }
   }
   destroy() {
     this.batcher.destroy(), this.worker && (this.worker.terminate(), this.worker = null);
   }
 }
-function Oe(o, r, t = {}, a) {
-  const n = {
+function Ue(s, n, t = {}, a) {
+  const r = {
     loadedImages: /* @__PURE__ */ new Map(),
     imageBitmaps: /* @__PURE__ */ new Map(),
     imagesLoaded: !1,
     lastSources: "",
+    lastSvgEffectsKey: "",
     lastRenderKey: "",
     useWorker: !0,
     scheduler: null,
     ctx: null,
     renderStartTime: null
   };
-  n.ctx = o.getContext("2d");
-  function s(_, k) {
-    return Object.keys(k).length === 0 ? _ : {
-      ..._,
-      layers: _.layers.map((P) => {
-        const S = P.name || P.id, b = k[S];
-        return b ? {
-          ...P,
-          src: b
-        } : P;
+  r.ctx = s.getContext("2d");
+  function o(u, g) {
+    return Object.keys(g).length === 0 ? u : {
+      ...u,
+      layers: u.layers.map((C) => {
+        const M = C.name || C.id, l = g[M];
+        return l ? {
+          ...C,
+          src: l
+        } : C;
       })
     };
   }
-  if (!n.ctx)
+  if (!r.ctx)
     return () => {
     };
-  let l = r, f = t;
-  function h() {
-    return s(l, f);
-  }
-  h(), n.scheduler = new $t({
-    onResult: (_, k) => {
-      if (n.ctx && o)
-        if (n.ctx.drawImage(_, 0, 0, o.width, o.height), _.close(), n.renderStartTime !== null) {
-          const P = performance.now() - n.renderStartTime;
-          a?.(P), n.renderStartTime = null;
+  let i = n, h = t;
+  function _() {
+    return o(i, h);
+  }
+  function k(u) {
+    const g = u.effects.find((C) => C.type === "svg");
+    return g ? `${u.src}::svg::${JSON.stringify(g)}` : u.src;
+  }
+  _(), r.scheduler = new an({
+    onResult: (u, g) => {
+      if (r.ctx && s)
+        if (r.ctx.drawImage(u, 0, 0, s.width, s.height), u.close(), r.renderStartTime !== null) {
+          const C = performance.now() - r.renderStartTime;
+          a?.(C), r.renderStartTime = null;
         } else
-          a?.(k);
+          a?.(g);
     },
-    onError: (_) => {
-      console.warn("Worker render failed, falling back to main thread:", _), n.useWorker = !1, p();
+    onError: (u) => {
+      console.warn("Worker render failed, falling back to main thread:", u), r.useWorker = !1, x();
     }
   });
-  function w() {
-    if (!o || !n.ctx) return;
-    const _ = h(), k = _.layers.map((S) => S.src).join(","), P = _.layers.map((S) => {
-      const b = S.effects.find((c) => c.type === "warp"), d = S.effects.find((c) => c.type === "restyle"), m = b ? `${b.enabled}:${b.shape}` : "none", i = d ? JSON.stringify(d) : "none";
-      return `${S.id}:${S.transform.x},${S.transform.y},${S.transform.scale},${S.transform.rotation},${S.opacity},${S.visible}:${m}:${i}`;
+  function p() {
+    if (!s || !r.ctx) return;
+    const u = _(), g = u.layers.map((l) => l.src).join(","), C = u.layers.map((l) => {
+      const d = l.effects.find((c) => c.type === "svg");
+      return d ? JSON.stringify(d) : "none";
+    }).join("|"), M = u.layers.map((l) => {
+      const d = l.effects.find((z) => z.type === "warp"), c = l.effects.find((z) => z.type === "restyle"), b = l.effects.find((z) => z.type === "svg"), T = d ? `${d.enabled}:${d.shape}` : "none", m = c ? JSON.stringify(c) : "none", R = b ? JSON.stringify(b) : "none";
+      return `${l.id}:${l.transform.x},${l.transform.y},${l.transform.scale},${l.transform.rotation},${l.opacity},${l.visible}:${T}:${m}:${R}`;
     }).join("|");
-    (o.width !== _.width || o.height !== _.height) && (o.width = _.width, o.height = _.height), k !== n.lastSources ? (n.lastSources = k, n.imagesLoaded = !1, g()) : n.imagesLoaded && P !== n.lastRenderKey ? (n.lastRenderKey = P, p()) : n.imagesLoaded ? n.imagesLoaded && p() : h().layers.length > 0 && g();
-  }
-  async function u(_) {
-    if (n.loadedImages.has(_))
-      return n.loadedImages.get(_);
-    const k = _.startsWith("data:");
-    let S = _.startsWith("/") || _.startsWith("./") || _.startsWith("../");
-    if (!k && !S && typeof window < "u")
+    (s.width !== u.width || s.height !== u.height) && (s.width = u.width, s.height = u.height), g !== r.lastSources || C !== r.lastSvgEffectsKey ? (r.lastSources = g, r.lastSvgEffectsKey = C, r.imagesLoaded = !1, f()) : r.imagesLoaded && M !== r.lastRenderKey ? (r.lastRenderKey = M, x()) : r.imagesLoaded ? r.imagesLoaded && x() : u.layers.length > 0 && f();
+  }
+  async function v(u) {
+    const g = u.src, C = k(u);
+    if (r.loadedImages.has(C))
+      return r.loadedImages.get(C);
+    const M = u.effects.find((R) => R.type === "svg");
+    let l = g, d = null;
+    if (M)
+      if (await st(g))
+        try {
+          let z;
+          if (g.startsWith("data:image/svg+xml")) {
+            const W = g.indexOf(",");
+            if (W === -1)
+              throw new Error("Invalid data URL format");
+            const E = g.substring(W + 1);
+            g.substring(0, W).includes(";base64") ? z = atob(E) : z = decodeURIComponent(E);
+          } else
+            z = await (await fetch(g)).text();
+          const N = $t(z, M), L = new Blob([N], { type: "image/svg+xml" });
+          l = URL.createObjectURL(L), d = l;
+        } catch (z) {
+          console.warn("Failed to process SVG, using original:", z);
+        }
+      else
+        console.warn("Source detected as SVG but verification failed:", g);
+    const c = l.startsWith("data:");
+    let T = l.startsWith("/") || l.startsWith("./") || l.startsWith("../");
+    if (!c && !T && typeof window < "u")
       try {
-        S = new URL(_, window.location.href).origin === window.location.origin;
+        T = new URL(l, window.location.href).origin === window.location.origin;
       } catch {
-        S = !0;
+        T = !0;
       }
-    const b = new Image();
+    const m = new Image();
     try {
-      if (await new Promise((d, m) => {
-        const i = setTimeout(() => {
-          m(new Error("Image load timeout"));
+      if (await new Promise((R, z) => {
+        const N = setTimeout(() => {
+          z(new Error("Image load timeout"));
         }, 3e4);
-        b.onload = () => {
-          clearTimeout(i), d();
-        }, b.onerror = (c) => {
-          clearTimeout(i), m(c);
-        }, b.src = _;
-      }), n.loadedImages.set(_, b), !k && !S)
+        m.onload = () => {
+          clearTimeout(N), R();
+        }, m.onerror = (L) => {
+          clearTimeout(N), z(L);
+        }, m.src = l;
+      }), r.loadedImages.set(C, m), !c && !T)
         try {
-          const d = new Image();
-          d.crossOrigin = "anonymous", await new Promise((m, i) => {
-            d.onload = () => m(), d.onerror = () => i(new Error("CORS failed")), d.src = _;
-          }), n.loadedImages.set(_, d);
+          const R = new Image();
+          R.crossOrigin = "anonymous", await new Promise((z, N) => {
+            R.onload = () => z(), R.onerror = () => N(new Error("CORS failed")), R.src = l;
+          }), r.loadedImages.set(C, R);
           try {
-            const m = await createImageBitmap(d);
-            n.imageBitmaps.set(_, m);
-          } catch (m) {
-            console.warn("Failed to create ImageBitmap:", m);
+            const z = await createImageBitmap(R);
+            r.imageBitmaps.set(C, z), d && URL.revokeObjectURL(d);
+          } catch (z) {
+            console.warn("Failed to create ImageBitmap:", z), d && URL.revokeObjectURL(d);
           }
-          return d;
+          return R;
         } catch {
-          console.warn(`Image loaded but CORS not available for ${_}. Canvas operations may be limited.`);
+          console.warn(`Image loaded but CORS not available for ${g}. Canvas operations may be limited.`);
           try {
-            const m = await createImageBitmap(b);
-            n.imageBitmaps.set(_, m);
+            const z = await createImageBitmap(m);
+            r.imageBitmaps.set(C, z), d && URL.revokeObjectURL(d);
           } catch {
+            d && URL.revokeObjectURL(d);
           }
-          return b;
+          return m;
         }
       else {
         try {
-          const d = await createImageBitmap(b);
-          n.imageBitmaps.set(_, d);
-        } catch (d) {
-          console.warn("Failed to create ImageBitmap:", d);
+          const R = await createImageBitmap(m);
+          r.imageBitmaps.set(C, R), d && URL.revokeObjectURL(d);
+        } catch (R) {
+          console.warn("Failed to create ImageBitmap:", R), d && URL.revokeObjectURL(d);
         }
-        return b;
+        return m;
       }
-    } catch (d) {
-      return console.error(`Failed to load image: ${_}`, d), null;
+    } catch (R) {
+      return console.error(`Failed to load image: ${g}`, R), null;
     }
   }
-  async function g() {
+  async function f() {
     performance.now();
-    const _ = h();
-    if (_.layers.length === 0) {
-      n.imagesLoaded = !0, n.ctx && p();
+    const u = _();
+    if (u.layers.length === 0) {
+      r.imagesLoaded = !0, r.ctx && x();
       return;
     }
-    await Promise.all(_.layers.map((k) => u(k.src))), n.imagesLoaded = !0, n.ctx && o && p();
+    for (const g of u.layers)
+      if (g.effects.find((M) => M.type === "svg")) {
+        for (const [M, l] of r.loadedImages.entries())
+          if (M.startsWith(g.src + "::svg::") || M === g.src) {
+            r.loadedImages.delete(M);
+            const d = r.imageBitmaps.get(M);
+            d && (d.close(), r.imageBitmaps.delete(M));
+          }
+      }
+    await Promise.all(u.layers.map((g) => v(g))), r.imagesLoaded = !0, r.ctx && s && x();
   }
-  function p() {
-    if (!(!n.ctx || !o)) {
-      if (n.useWorker && n.scheduler) {
-        T();
+  function x() {
+    if (!(!r.ctx || !s)) {
+      if (r.useWorker && r.scheduler) {
+        y();
         return;
       }
-      n.renderStartTime = performance.now(), v();
+      r.renderStartTime = performance.now(), w();
     }
   }
-  async function T() {
-    if (!n.scheduler) return;
-    n.renderStartTime = performance.now();
-    const _ = h(), k = [], P = [];
-    let S = !1;
-    for (const b of _.layers) {
-      if (!b.visible) continue;
-      const d = n.loadedImages.get(b.src), m = n.imageBitmaps.get(b.src);
-      if (!d) continue;
-      if (!m) {
-        S = !0;
+  async function y() {
+    if (!r.scheduler) return;
+    r.renderStartTime = performance.now();
+    const u = _(), g = [], C = [];
+    let M = !1;
+    for (const l of u.layers) {
+      if (!l.visible) continue;
+      const d = k(l), c = r.loadedImages.get(d), b = r.imageBitmaps.get(d);
+      if (!c) continue;
+      if (!b) {
+        M = !0;
         continue;
       }
-      const i = et(m, b.effects), c = b.effects.find((j) => j.type === "warp");
-      let M = i.width, I = i.height;
-      const X = M * b.transform.scale, J = I * b.transform.scale;
-      let B;
-      if (i.image instanceof ImageBitmap)
-        B = i.image;
+      const T = tt(b, l.effects), m = l.effects.find((Y) => Y.type === "warp");
+      let R = T.width, z = T.height;
+      const N = R * l.transform.scale, L = z * l.transform.scale;
+      let W;
+      if (T.image instanceof ImageBitmap)
+        W = T.image;
       else
         try {
-          B = await createImageBitmap(i.image);
-        } catch (j) {
-          console.warn("Failed to create bitmap from processed image, falling back to main thread:", j), v();
+          W = await createImageBitmap(T.image);
+        } catch (Y) {
+          console.warn("Failed to create bitmap from processed image, falling back to main thread:", Y), w();
           return;
         }
-      let A = null;
-      if (c) {
-        const j = {
+      let E = null;
+      if (m) {
+        const Y = {
           type: "warp",
-          shape: c.shape,
-          enabled: !!c.enabled,
-          quality: Number(c.quality ?? 1),
+          shape: m.shape,
+          enabled: !!m.enabled,
+          quality: Number(m.quality ?? 1),
           image: {
-            scale: Number(c.image?.scale ?? 1),
-            translateX: Number(c.image?.translateX ?? 0),
-            translateY: Number(c.image?.translateY ?? 0)
+            scale: Number(m.image?.scale ?? 1),
+            translateX: Number(m.image?.translateX ?? 0),
+            translateY: Number(m.image?.translateY ?? 0)
           }
         };
-        c.debug && (j.debug = {
-          showBounds: !!c.debug.showBounds,
-          showDepthVis: !!c.debug.showDepthVis,
-          showCrosshair: !!c.debug.showCrosshair
-        }), c.cylinder && (j.cylinder = {
-          diameter: Number(c.cylinder.diameter),
-          pitch: Number(c.cylinder.pitch),
-          perspective: Number(c.cylinder.perspective),
-          rotationX: Number(c.cylinder.rotationX),
-          rotationY: Number(c.cylinder.rotationY),
-          rotationZ: Number(c.cylinder.rotationZ)
-        }), c.plane && (j.plane = {
-          rotationX: Number(c.plane.rotationX),
-          rotationY: Number(c.plane.rotationY),
-          rotationZ: Number(c.plane.rotationZ),
-          depthScale: Number(c.plane.depthScale)
-        }), c.sphere && (j.sphere = {
-          radius: Number(c.sphere.radius),
-          rotationX: Number(c.sphere.rotationX),
-          rotationY: Number(c.sphere.rotationY),
-          rotationZ: Number(c.sphere.rotationZ)
-        }), c.custom && (j.custom = {
-          formula: String(c.custom.formula),
+        m.debug && (Y.debug = {
+          showBounds: !!m.debug.showBounds,
+          showDepthVis: !!m.debug.showDepthVis,
+          showCrosshair: !!m.debug.showCrosshair
+        }), m.cylinder && (Y.cylinder = {
+          diameter: Number(m.cylinder.diameter),
+          pitch: Number(m.cylinder.pitch),
+          perspective: Number(m.cylinder.perspective),
+          rotationX: Number(m.cylinder.rotationX),
+          rotationY: Number(m.cylinder.rotationY),
+          rotationZ: Number(m.cylinder.rotationZ)
+        }), m.plane && (Y.plane = {
+          rotationX: Number(m.plane.rotationX),
+          rotationY: Number(m.plane.rotationY),
+          rotationZ: Number(m.plane.rotationZ),
+          depthScale: Number(m.plane.depthScale)
+        }), m.sphere && (Y.sphere = {
+          radius: Number(m.sphere.radius),
+          rotationX: Number(m.sphere.rotationX),
+          rotationY: Number(m.sphere.rotationY),
+          rotationZ: Number(m.sphere.rotationZ)
+        }), m.custom && (Y.custom = {
+          formula: String(m.custom.formula),
           parameters: Object.fromEntries(
-            Object.entries(c.custom.parameters || {}).map(([Z, L]) => [Z, Number(L)])
+            Object.entries(m.custom.parameters || {}).map(([U, q]) => [U, Number(q)])
           )
-        }), A = j;
+        }), E = Y;
       }
-      k.push({
-        id: String(b.id),
-        x: Number(b.transform.x),
-        y: Number(b.transform.y),
-        width: Number(X),
-        height: Number(J),
-        rotation: Number(b.transform.rotation),
-        opacity: Number(b.opacity),
-        warp: A
-      }), P.push(B);
+      g.push({
+        id: String(l.id),
+        x: Number(l.transform.x),
+        y: Number(l.transform.y),
+        width: Number(N),
+        height: Number(L),
+        rotation: Number(l.transform.rotation),
+        opacity: Number(l.opacity),
+        warp: E
+      }), C.push(W);
     }
-    if (S || k.length === 0) {
-      v();
+    if (M || g.length === 0) {
+      w();
       return;
     }
     try {
-      const b = await Promise.all(
-        P.map((d) => createImageBitmap(d))
+      const l = await Promise.all(
+        C.map((d) => createImageBitmap(d))
       );
-      n.scheduler?.request({
-        canvasWidth: _.width,
-        canvasHeight: _.height,
-        layers: k,
-        images: b
+      r.scheduler?.request({
+        canvasWidth: u.width,
+        canvasHeight: u.height,
+        layers: g,
+        images: l
       });
-    } catch (b) {
-      console.warn("Failed to clone bitmaps for worker, falling back to main thread:", b), v();
+    } catch (l) {
+      console.warn("Failed to clone bitmaps for worker, falling back to main thread:", l), w();
     }
   }
-  function v() {
-    if (!n.ctx || !o) return;
-    const _ = n.renderStartTime ?? performance.now(), k = h();
-    n.ctx.fillStyle = "#ffffff", n.ctx.fillRect(0, 0, k.width, k.height);
-    for (const S of k.layers) {
-      if (!S.visible) continue;
+  function w() {
+    if (!r.ctx || !s) return;
+    const u = r.renderStartTime ?? performance.now(), g = _();
+    r.ctx.fillStyle = "#ffffff", r.ctx.fillRect(0, 0, g.width, g.height);
+    for (const M of g.layers) {
+      if (!M.visible) continue;
       performance.now();
-      const b = n.loadedImages.get(S.src);
-      if (!b) continue;
-      if (!b.complete || b.naturalWidth === 0) {
-        console.warn("Image not fully loaded:", S.src);
+      const l = k(M), d = r.loadedImages.get(l);
+      if (!d) continue;
+      if (!d.complete || d.naturalWidth === 0) {
+        console.warn("Image not fully loaded:", M.src);
         continue;
       }
-      const d = et(b, S.effects), m = S.effects.find((B) => B.type === "warp");
-      let i = d.width, c = d.height;
-      n.ctx.save(), n.ctx.globalAlpha = S.opacity;
-      const M = S.transform.x, I = S.transform.y;
-      n.ctx.translate(M, I), n.ctx.rotate(S.transform.rotation * Math.PI / 180);
-      const X = i * S.transform.scale, J = c * S.transform.scale;
+      const c = tt(d, M.effects), b = M.effects.find((W) => W.type === "warp");
+      let T = c.width, m = c.height;
+      r.ctx.save(), r.ctx.globalAlpha = M.opacity;
+      const R = M.transform.x, z = M.transform.y;
+      r.ctx.translate(R, z), r.ctx.rotate(M.transform.rotation * Math.PI / 180);
+      const N = T * M.transform.scale, L = m * M.transform.scale;
       try {
-        m && m.enabled && m.shape !== "none" ? Ft(n.ctx, d.image, 0, 0, X, J, m) : n.ctx.drawImage(d.image, -X / 2, -J / 2, X, J);
-      } catch (B) {
-        console.warn("Failed to draw image to canvas (may be CORS issue):", S.src, B);
+        b && b.enabled && b.shape !== "none" ? Jt(r.ctx, c.image, 0, 0, N, L, b) : r.ctx.drawImage(c.image, -N / 2, -L / 2, N, L);
+      } catch (W) {
+        console.warn("Failed to draw image to canvas (may be CORS issue):", M.src, W);
       }
-      n.ctx.restore();
+      r.ctx.restore();
     }
-    const P = performance.now() - _;
-    a?.(P), n.renderStartTime !== null && (n.renderStartTime = null);
+    const C = performance.now() - u;
+    a?.(C), r.renderStartTime !== null && (r.renderStartTime = null);
   }
-  w();
-  function y(_, k) {
-    l = _, k !== void 0 && (f = k), w();
+  p();
+  function S(u, g) {
+    i = u, g !== void 0 && (h = g), p();
   }
-  function x() {
-    n.scheduler?.destroy();
-    for (const _ of n.imageBitmaps.values())
-      _.close();
+  function I() {
+    r.scheduler?.destroy();
+    for (const u of r.imageBitmaps.values())
+      u.close();
   }
-  const z = x;
-  return z.update = y, z;
+  const P = I;
+  return P.update = S, P;
 }
-var Qt = e.from_html('<div><canvas class="canvas svelte-1xdpk2w"></canvas></div>');
-const en = {
+var sn = e.from_html('<div><canvas class="canvas svelte-1xdpk2w"></canvas></div>');
+const on = {
   hash: "svelte-1xdpk2w",
   code: ".mockup-renderer.svelte-1xdpk2w {position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;}.canvas.svelte-1xdpk2w {display:block;max-width:100%;max-height:100%;}.mockup-renderer.contain.svelte-1xdpk2w .canvas:where(.svelte-1xdpk2w) {width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}.mockup-renderer.cover.svelte-1xdpk2w .canvas:where(.svelte-1xdpk2w) {width:100%;height:100%;object-fit:cover;}"
 };
-function ma(o, r) {
-  e.push(r, !0), e.append_styles(o, en);
-  let t = e.prop(r, "imageOverrides", 19, () => ({})), a = e.prop(r, "objectFit", 3, "contain"), n = e.state(null);
+function Sa(s, n) {
+  e.push(n, !0), e.append_styles(s, on);
+  let t = e.prop(n, "imageOverrides", 19, () => ({})), a = e.prop(n, "objectFit", 3, "contain"), r = e.state(null);
   Te(() => {
-    if (e.get(n))
-      return Oe(e.get(n), r.mockup.composition, t());
+    if (e.get(r))
+      return Ue(e.get(r), n.mockup.composition, t());
   });
-  var s = Qt();
-  let l;
-  var f = e.child(s);
-  e.bind_this(f, (h) => e.set(n, h), () => e.get(n)), e.reset(s), e.template_effect(() => l = e.set_class(s, 1, "mockup-renderer svelte-1xdpk2w", null, l, {
+  var o = sn();
+  let i;
+  var h = e.child(o);
+  e.bind_this(h, (_) => e.set(r, _), () => e.get(r)), e.reset(o), e.template_effect(() => i = e.set_class(o, 1, "mockup-renderer svelte-1xdpk2w", null, i, {
     contain: a() === "contain",
     cover: a() === "cover"
-  })), e.append(o, s), e.pop();
+  })), e.append(s, o), e.pop();
 }
-const tn = {
+const ln = {
   x: 0,
   y: 0,
   scale: 1,
   rotation: 0
-}, nn = {
-  transform: { ...tn },
+}, cn = {
+  transform: { ...ln },
   opacity: 1,
   visible: !0,
   effects: []
-}, Pe = {
+}, Ce = {
   zoom: 1,
   panX: 0,
   panY: 0
-}, ot = {
+}, lt = {
   width: 800,
   height: 600,
   layers: [],
   effects: []
 };
-var rn = e.from_html('<div class="zoomable-canvas svelte-zjsyu1" role="application" aria-label="Zoomable canvas - scroll to zoom, drag to pan"><div class="canvas-frame svelte-zjsyu1"><!></div> <div class="view-controls svelte-zjsyu1"><span class="zoom-indicator svelte-zjsyu1"> </span> <button class="reset-btn svelte-zjsyu1">Reset</button></div></div>');
-const an = {
+var dn = e.from_html('<div class="zoomable-canvas svelte-zjsyu1" role="application" aria-label="Zoomable canvas - scroll to zoom, drag to pan"><div class="canvas-frame svelte-zjsyu1"><!></div> <div class="view-controls svelte-zjsyu1"><span class="zoom-indicator svelte-zjsyu1"> </span> <button class="reset-btn svelte-zjsyu1">Reset</button></div></div>');
+const un = {
   hash: "svelte-zjsyu1",
   code: ".zoomable-canvas.svelte-zjsyu1 {width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-bg, #f5f5f5);overflow:hidden;cursor:grab;position:relative;}.zoomable-canvas.svelte-zjsyu1:active {cursor:grabbing;}.canvas-frame.svelte-zjsyu1 {transform-origin:center center;box-shadow:0 4px 16px rgba(0, 0, 0, 0.1);}.view-controls.svelte-zjsyu1 {position:absolute;bottom:1rem;right:1rem;display:flex;align-items:center;gap:0.5rem;background:rgba(0, 0, 0, 0.7);padding:0.3rem 0.5rem;border-radius:4px;}.zoom-indicator.svelte-zjsyu1 {color:#fff;font-size:0.75rem;font-family:monospace;min-width:2.5rem;text-align:center;}.reset-btn.svelte-zjsyu1 {background:transparent;border:1px solid rgba(255, 255, 255, 0.3);color:rgba(255, 255, 255, 0.8);padding:0.2rem 0.5rem;border-radius:3px;font-size:0.75rem;cursor:pointer;transition:all 200ms;}.reset-btn.svelte-zjsyu1:hover {border-color:rgba(255, 255, 255, 0.6);color:#fff;}"
 };
-function sn(o, r) {
-  e.append_styles(o, an);
-  let t = e.state(e.proxy({ ...Pe })), a = e.state(!1), n = e.state(e.proxy({ x: 0, y: 0 }));
-  function s(_) {
-    _.preventDefault();
-    const k = _.deltaY > 0 ? 0.9 : 1.1, P = Math.max(0.25, Math.min(4, e.get(t).zoom * k));
-    e.set(t, { ...e.get(t), zoom: P }, !0);
-  }
-  function l(_) {
-    _.button === 0 && (e.set(a, !0), e.set(
-      n,
+function pn(s, n) {
+  e.append_styles(s, un);
+  let t = e.state(e.proxy({ ...Ce })), a = e.state(!1), r = e.state(e.proxy({ x: 0, y: 0 }));
+  function o(P) {
+    P.preventDefault();
+    const u = P.deltaY > 0 ? 0.9 : 1.1, g = Math.max(0.25, Math.min(4, e.get(t).zoom * u));
+    e.set(t, { ...e.get(t), zoom: g }, !0);
+  }
+  function i(P) {
+    P.button === 0 && (e.set(a, !0), e.set(
+      r,
       {
-        x: _.clientX - e.get(t).panX,
-        y: _.clientY - e.get(t).panY
+        x: P.clientX - e.get(t).panX,
+        y: P.clientY - e.get(t).panY
       },
       !0
     ));
   }
-  function f(_) {
+  function h(P) {
     e.get(a) && e.set(
       t,
       {
         ...e.get(t),
-        panX: _.clientX - e.get(n).x,
-        panY: _.clientY - e.get(n).y
+        panX: P.clientX - e.get(r).x,
+        panY: P.clientY - e.get(r).y
       },
       !0
     );
   }
-  function h() {
+  function _() {
     e.set(a, !1);
   }
-  function w() {
-    e.set(t, { ...Pe }, !0);
-  }
-  const u = e.derived(() => `transform: scale(${e.get(t).zoom}) translate(${e.get(t).panX / e.get(t).zoom}px, ${e.get(t).panY / e.get(t).zoom}px);`);
-  var g = rn();
-  g.__mousedown = l, g.__mousemove = f, g.__mouseup = h;
-  var p = e.child(g), T = e.child(p);
-  e.snippet(T, () => r.children), e.reset(p);
-  var v = e.sibling(p, 2), y = e.child(v), x = e.child(y);
-  e.reset(y);
-  var z = e.sibling(y, 2);
-  z.__click = w, e.reset(v), e.reset(g), e.template_effect(
-    (_) => {
-      e.set_style(p, e.get(u)), e.set_text(x, `${_ ?? ""}%`);
+  function k() {
+    e.set(t, { ...Ce }, !0);
+  }
+  const p = e.derived(() => `transform: scale(${e.get(t).zoom}) translate(${e.get(t).panX / e.get(t).zoom}px, ${e.get(t).panY / e.get(t).zoom}px);`);
+  var v = dn();
+  v.__mousedown = i, v.__mousemove = h, v.__mouseup = _;
+  var f = e.child(v), x = e.child(f);
+  e.snippet(x, () => n.children), e.reset(f);
+  var y = e.sibling(f, 2), w = e.child(y), S = e.child(w);
+  e.reset(w);
+  var I = e.sibling(w, 2);
+  I.__click = k, e.reset(y), e.reset(v), e.template_effect(
+    (P) => {
+      e.set_style(f, e.get(p)), e.set_text(S, `${P ?? ""}%`);
     },
     [() => Math.round(e.get(t).zoom * 100)]
-  ), e.event("wheel", g, s), e.event("mouseleave", g, h), e.append(o, g);
+  ), e.event("wheel", v, o), e.event("mouseleave", v, _), e.append(s, v);
 }
 e.delegate(["mousedown", "mousemove", "mouseup", "click"]);
-function on(o, r, t = {}, a) {
-  let n = r, s = t, l = null;
-  const f = new at((u) => {
-    l?.update ? l.update(u.config, u.overrides) : (l?.(), l = Oe(o, u.config, u.overrides, a));
+function mn(s, n, t = {}, a) {
+  let r = n, o = t, i = null;
+  const h = new ot((p) => {
+    i?.update ? i.update(p.config, p.overrides) : (i?.(), i = Ue(s, p.config, p.overrides, a));
   });
-  l = Oe(o, n, s, a);
-  function h(u, g) {
-    n = u, g !== void 0 && (s = g), f.queue({ config: n, overrides: s });
+  i = Ue(s, r, o, a);
+  function _(p, v) {
+    r = p, v !== void 0 && (o = v), h.queue({ config: r, overrides: o });
   }
   return {
-    update: h,
+    update: _,
     cleanup: () => {
-      f.destroy(), l?.();
+      h.destroy(), i?.();
     }
   };
 }
-var ln = e.from_html('<div class="render-time svelte-1p1rf8j"> </div>'), cn = e.from_html('<div><canvas class="canvas svelte-1p1rf8j"></canvas> <!></div>');
-const dn = {
+var fn = e.from_html('<div class="render-time svelte-1p1rf8j"> </div>'), vn = e.from_html('<div><canvas class="canvas svelte-1p1rf8j"></canvas> <!></div>');
+const hn = {
   hash: "svelte-1p1rf8j",
   code: ".mockup-renderer.svelte-1p1rf8j {position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;}.canvas.svelte-1p1rf8j {display:block;max-width:100%;max-height:100%;}.mockup-renderer.contain.svelte-1p1rf8j .canvas:where(.svelte-1p1rf8j) {width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}.mockup-renderer.cover.svelte-1p1rf8j .canvas:where(.svelte-1p1rf8j) {width:100%;height:100%;object-fit:cover;}.render-time.svelte-1p1rf8j {position:absolute;top:8px;right:8px;background:rgba(0, 0, 0, 0.7);color:white;padding:4px 8px;border-radius:4px;font-size:12px;font-family:monospace;pointer-events:none;z-index:10;}"
 };
-function un(o, r) {
-  e.push(r, !0), e.append_styles(o, dn);
-  let t = e.prop(r, "imageOverrides", 19, () => ({})), a = e.prop(r, "objectFit", 3, "contain"), n = e.prop(r, "debounceMs", 3, 100), s = e.state(null), l = e.state(null), f = e.state(0), h = e.state(null), w = null, u = e.state(""), g = e.state(""), p = e.state(null);
-  const T = 3;
-  function v() {
-    if (!e.get(l)) return;
-    const b = JSON.stringify(r.mockup.composition), d = JSON.stringify(t());
-    b === e.get(u) && d === e.get(g) || (e.update(f), e.set(
-      h,
+function gn(s, n) {
+  e.push(n, !0), e.append_styles(s, hn);
+  let t = e.prop(n, "imageOverrides", 19, () => ({})), a = e.prop(n, "objectFit", 3, "contain"), r = e.prop(n, "debounceMs", 3, 100), o = e.state(null), i = e.state(null), h = e.state(0), _ = e.state(null), k = null, p = e.state(""), v = e.state(""), f = e.state(null);
+  const x = 3;
+  function y() {
+    if (!e.get(i)) return;
+    const M = JSON.stringify(n.mockup.composition), l = JSON.stringify(t());
+    M === e.get(p) && l === e.get(v) || (e.update(h), e.set(
+      _,
       {
-        composition: r.mockup.composition,
+        composition: n.mockup.composition,
         overrides: t()
       },
       !0
-    ), e.get(f) >= T ? (e.set(f, 0), w && (clearTimeout(w), w = null), e.get(h) && (Ge(() => {
-      e.get(l).update(e.get(h).composition, e.get(h).overrides), e.set(u, b, !0), e.set(g, d, !0);
-    }), e.set(h, null))) : (w && clearTimeout(w), w = setTimeout(
+    ), e.get(h) >= x ? (e.set(h, 0), k && (clearTimeout(k), k = null), e.get(_) && ($e(() => {
+      e.get(i).update(e.get(_).composition, e.get(_).overrides), e.set(p, M, !0), e.set(v, l, !0);
+    }), e.set(_, null))) : (k && clearTimeout(k), k = setTimeout(
       () => {
-        e.get(l) && e.get(h) && (Ge(() => {
-          e.get(l).update(e.get(h).composition, e.get(h).overrides), e.set(u, JSON.stringify(e.get(h).composition), !0), e.set(g, JSON.stringify(e.get(h).overrides), !0);
-        }), e.set(h, null), e.set(f, 0)), w = null;
+        e.get(i) && e.get(_) && ($e(() => {
+          e.get(i).update(e.get(_).composition, e.get(_).overrides), e.set(p, JSON.stringify(e.get(_).composition), !0), e.set(v, JSON.stringify(e.get(_).overrides), !0);
+        }), e.set(_, null), e.set(h, 0)), k = null;
       },
-      n()
+      r()
     )));
   }
-  Te(() => (Mt().then(() => {
-    e.get(s) && (e.set(
-      l,
-      on(e.get(s), r.mockup.composition, t(), (b) => {
-        e.set(p, b, !0);
+  Te(() => (St().then(() => {
+    e.get(o) && (e.set(
+      i,
+      mn(e.get(o), n.mockup.composition, t(), (M) => {
+        e.set(f, M, !0);
       }),
       !0
-    ), e.set(u, JSON.stringify(r.mockup.composition), !0), e.set(g, JSON.stringify(t()), !0));
+    ), e.set(p, JSON.stringify(n.mockup.composition), !0), e.set(v, JSON.stringify(t()), !0));
   }), () => {
-    w && clearTimeout(w), e.get(l)?.cleanup();
+    k && clearTimeout(k), e.get(i)?.cleanup();
   }));
-  const y = e.derived(() => JSON.stringify(r.mockup.composition)), x = e.derived(() => JSON.stringify(t()));
+  const w = e.derived(() => JSON.stringify(n.mockup.composition)), S = e.derived(() => JSON.stringify(t()));
   e.user_effect(() => {
-    e.get(y), e.get(x), e.get(l) && v();
-  }), Tt(() => {
-    w && clearTimeout(w), e.get(l)?.cleanup();
+    e.get(w), e.get(S), e.get(i) && y();
+  }), zt(() => {
+    k && clearTimeout(k), e.get(i)?.cleanup();
   });
-  var z = cn();
-  let _;
-  var k = e.child(z);
-  e.bind_this(k, (b) => e.set(s, b), () => e.get(s));
-  var P = e.sibling(k, 2);
+  var I = vn();
+  let P;
+  var u = e.child(I);
+  e.bind_this(u, (M) => e.set(o, M), () => e.get(o));
+  var g = e.sibling(u, 2);
   {
-    var S = (b) => {
-      var d = ln(), m = e.child(d);
-      e.reset(d), e.template_effect((i) => e.set_text(m, `${i ?? ""}ms`), [() => e.get(p).toFixed(1)]), e.append(b, d);
+    var C = (M) => {
+      var l = fn(), d = e.child(l);
+      e.reset(l), e.template_effect((c) => e.set_text(d, `${c ?? ""}ms`), [() => e.get(f).toFixed(1)]), e.append(M, l);
     };
-    e.if(P, (b) => {
-      e.get(p) !== null && b(S);
+    e.if(g, (M) => {
+      e.get(f) !== null && M(C);
     });
   }
-  e.reset(z), e.template_effect(() => _ = e.set_class(z, 1, "mockup-renderer svelte-1p1rf8j", null, _, {
+  e.reset(I), e.template_effect(() => P = e.set_class(I, 1, "mockup-renderer svelte-1p1rf8j", null, P, {
     contain: a() === "contain",
     cover: a() === "cover"
-  })), e.append(o, z), e.pop();
+  })), e.append(s, I), e.pop();
 }
-var mn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
-function pn(o, r) {
-  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
-  var n = mn();
+var bn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
+function _n(s, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = bn();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
-  }), e.append(o, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(s, r);
 }
-var vn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>');
-function fn(o, r) {
-  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
-  var n = vn();
+var yn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>');
+function wn(s, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = yn();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
-  }), e.append(o, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(s, r);
 }
-var hn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg>');
-function Ae(o, r) {
-  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
-  var n = hn();
+var xn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg>');
+function Fe(s, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = xn();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
-  }), e.append(o, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(s, r);
 }
-var gn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>');
-function bn(o, r) {
-  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
-  var n = gn();
+var kn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>');
+function Mn(s, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = kn();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
-  }), e.append(o, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(s, r);
 }
-var _n = e.from_html('<button type="button" class="reset-btn svelte-18gpljp" title="Reset to default"><!></button>'), yn = e.from_html('<div class="control-group"><div class="control-row svelte-18gpljp"><!> <label class="control-label svelte-18gpljp"><span class="label-text svelte-18gpljp"> </span> <div class="control-content svelte-18gpljp"><!></div></label></div></div>');
-const wn = {
+var Tn = e.from_html('<button type="button" class="reset-btn svelte-18gpljp" title="Reset to default"><!></button>'), Sn = e.from_html('<div class="control-group"><div class="control-row svelte-18gpljp"><!> <label class="control-label svelte-18gpljp"><span class="label-text svelte-18gpljp"> </span> <div class="control-content svelte-18gpljp"><!></div></label></div></div>');
+const zn = {
   hash: "svelte-18gpljp",
   code: ".control-row.svelte-18gpljp {display:flex;align-items:center;gap:0.25rem;min-width:0;max-width:100%;}.reset-btn.svelte-18gpljp {display:flex;align-items:center;justify-content:center;padding:0.25rem;background:transparent;border:none;border-radius:4px;color:var(--color-text-muted, #666);cursor:pointer;opacity:0.5;transition:opacity 0.15s, color 0.15s;}.reset-btn.svelte-18gpljp:hover {opacity:1;color:var(--color-primary, #007bff);}.control-label.svelte-18gpljp {display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0;}.label-text.svelte-18gpljp {width:80px;flex-shrink:0;font-size:0.875rem;color:var(--color-text-muted, #666);}.control-content.svelte-18gpljp {flex:1;display:flex;align-items:center;gap:0.5rem;min-width:0;max-width:100%;overflow:hidden;}"
 };
-function F(o, r) {
-  e.append_styles(o, wn);
-  var t = yn(), a = e.child(t), n = e.child(a);
+function F(s, n) {
+  e.append_styles(s, zn);
+  var t = Sn(), a = e.child(t), r = e.child(a);
   {
-    var s = (g) => {
-      var p = _n();
-      p.__click = function(...v) {
-        r.onReset?.apply(this, v);
+    var o = (v) => {
+      var f = Tn();
+      f.__click = function(...y) {
+        n.onReset?.apply(this, y);
       };
-      var T = e.child(p);
-      bn(T, { fontSize: "0.875rem" }), e.reset(p), e.append(g, p);
+      var x = e.child(f);
+      Mn(x, { fontSize: "0.875rem" }), e.reset(f), e.append(v, f);
     };
-    e.if(n, (g) => {
-      r.onReset && g(s);
+    e.if(r, (v) => {
+      n.onReset && v(o);
     });
   }
-  var l = e.sibling(n, 2), f = e.child(l), h = e.child(f, !0);
-  e.reset(f);
-  var w = e.sibling(f, 2), u = e.child(w);
-  e.snippet(u, () => r.children), e.reset(w), e.reset(l), e.reset(a), e.reset(t), e.template_effect(() => e.set_text(h, r.label)), e.append(o, t);
+  var i = e.sibling(r, 2), h = e.child(i), _ = e.child(h, !0);
+  e.reset(h);
+  var k = e.sibling(h, 2), p = e.child(k);
+  e.snippet(p, () => n.children), e.reset(k), e.reset(i), e.reset(a), e.reset(t), e.template_effect(() => e.set_text(_, n.label)), e.append(s, t);
 }
 e.delegate(["click"]);
-var xn = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), kn = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), Mn = e.from_html('<input type="range" step="1" min="-360" max="360" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), Tn = e.from_html('<input type="range" min="0" max="1" step="0.01" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="0.01" min="0" max="1"/>', 1), Sn = e.from_html('<details class="section svelte-efcks6" open=""><summary class="section-title svelte-efcks6">Position & Transform</summary> <div class="section-content svelte-efcks6"><details class="subsection svelte-efcks6" open=""><summary class="subsection-title svelte-efcks6">Position</summary> <div class="subsection-content svelte-efcks6"><!> <!></div></details> <details class="subsection svelte-efcks6" open=""><summary class="subsection-title svelte-efcks6">Transform</summary> <div class="subsection-content svelte-efcks6"><!> <!></div></details></div></details>');
-const In = {
+var In = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), Pn = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), Cn = e.from_html('<input type="range" step="1" min="-360" max="360" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), jn = e.from_html('<input type="range" min="0" max="1" step="0.01" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="0.01" min="0" max="1"/>', 1), Nn = e.from_html('<details class="section svelte-efcks6" open=""><summary class="section-title svelte-efcks6">Position & Transform</summary> <div class="section-content svelte-efcks6"><details class="subsection svelte-efcks6" open=""><summary class="subsection-title svelte-efcks6">Position</summary> <div class="subsection-content svelte-efcks6"><!> <!></div></details> <details class="subsection svelte-efcks6" open=""><summary class="subsection-title svelte-efcks6">Transform</summary> <div class="subsection-content svelte-efcks6"><!> <!></div></details></div></details>');
+const Rn = {
   hash: "svelte-efcks6",
   code: `.section.svelte-efcks6 {border-top:1px solid var(--color-border, #ccc);border-bottom:1px solid var(--color-border, #ccc);background:var(--color-surface, #fff);min-width:0;}.section-title.svelte-efcks6 {padding:0.75rem 0;font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid var(--color-border, #eee);}.section-title.svelte-efcks6::-webkit-details-marker {display:none;}.section-title.svelte-efcks6::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.section[open].svelte-efcks6 > .section-title:where(.svelte-efcks6)::before {transform:rotate(90deg);}.section-content.svelte-efcks6 {padding:0.75rem 0;display:flex;flex-direction:column;gap:0.75rem;}.manual-input.svelte-efcks6 {width:60px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}input[type="range"].svelte-efcks6 {flex:1;min-width:0;max-width:100%;}.subsection.svelte-efcks6 {margin-top:0.75rem;border-top:1px solid var(--color-border, #e0e0e0);}.subsection.svelte-efcks6:first-child {margin-top:0;border-top:none;}.subsection-title.svelte-efcks6 {padding:0.5rem 0;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;}.subsection-title.svelte-efcks6::-webkit-details-marker {display:none;}.subsection-title.svelte-efcks6::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.subsection[open].svelte-efcks6 > .subsection-title:where(.svelte-efcks6)::before {transform:rotate(90deg);}.subsection-content.svelte-efcks6 {padding-bottom:0.25rem;}`
 };
-function zn(o, r) {
-  e.push(r, !0), e.append_styles(o, In);
-  let t = e.prop(r, "transform", 7), a = e.prop(r, "opacity", 7);
-  const n = {
-    x: Math.round(r.canvasWidth / 2),
-    y: Math.round(r.canvasHeight / 2),
+function Wn(s, n) {
+  e.push(n, !0), e.append_styles(s, Rn);
+  let t = e.prop(n, "transform", 7), a = e.prop(n, "opacity", 7);
+  const r = {
+    x: Math.round(n.canvasWidth / 2),
+    y: Math.round(n.canvasHeight / 2),
     rotation: 0,
     opacity: 1
   };
-  function s(P) {
-    r.onTransformChange({ ...t(), ...P });
+  function o(g) {
+    n.onTransformChange({ ...t(), ...g });
   }
-  const l = -r.canvasWidth / 2, f = r.canvasWidth * 1.5, h = -r.canvasHeight / 2, w = r.canvasHeight * 1.5;
-  var u = Sn(), g = e.sibling(e.child(u), 2), p = e.child(g), T = e.sibling(e.child(p), 2), v = e.child(T);
-  F(v, {
+  const i = -n.canvasWidth / 2, h = n.canvasWidth * 1.5, _ = -n.canvasHeight / 2, k = n.canvasHeight * 1.5;
+  var p = Nn(), v = e.sibling(e.child(p), 2), f = e.child(v), x = e.sibling(e.child(f), 2), y = e.child(x);
+  F(y, {
     label: "Position X",
-    onReset: () => s({ x: n.x }),
-    children: (P, S) => {
-      var b = xn(), d = e.first_child(b);
-      e.remove_input_defaults(d), d.__input = (i) => s({ x: Number(i.currentTarget.value) });
-      var m = e.sibling(d, 2);
-      e.remove_input_defaults(m), m.__input = (i) => s({ x: Number(i.currentTarget.value) }), e.template_effect(() => {
-        e.set_attribute(d, "min", l), e.set_attribute(d, "max", f);
-      }), e.bind_value(d, () => t().x, (i) => t().x = i), e.bind_value(m, () => t().x, (i) => t().x = i), e.append(P, b);
+    onReset: () => o({ x: r.x }),
+    children: (g, C) => {
+      var M = In(), l = e.first_child(M);
+      e.remove_input_defaults(l), l.__input = (c) => o({ x: Number(c.currentTarget.value) });
+      var d = e.sibling(l, 2);
+      e.remove_input_defaults(d), d.__input = (c) => o({ x: Number(c.currentTarget.value) }), e.template_effect(() => {
+        e.set_attribute(l, "min", i), e.set_attribute(l, "max", h);
+      }), e.bind_value(l, () => t().x, (c) => t().x = c), e.bind_value(d, () => t().x, (c) => t().x = c), e.append(g, M);
     }
   });
-  var y = e.sibling(v, 2);
-  F(y, {
+  var w = e.sibling(y, 2);
+  F(w, {
     label: "Position Y",
-    onReset: () => s({ y: n.y }),
-    children: (P, S) => {
-      var b = kn(), d = e.first_child(b);
-      e.remove_input_defaults(d), d.__input = (i) => s({ y: Number(i.currentTarget.value) });
-      var m = e.sibling(d, 2);
-      e.remove_input_defaults(m), m.__input = (i) => s({ y: Number(i.currentTarget.value) }), e.template_effect(() => {
-        e.set_attribute(d, "min", h), e.set_attribute(d, "max", w);
-      }), e.bind_value(d, () => t().y, (i) => t().y = i), e.bind_value(m, () => t().y, (i) => t().y = i), e.append(P, b);
+    onReset: () => o({ y: r.y }),
+    children: (g, C) => {
+      var M = Pn(), l = e.first_child(M);
+      e.remove_input_defaults(l), l.__input = (c) => o({ y: Number(c.currentTarget.value) });
+      var d = e.sibling(l, 2);
+      e.remove_input_defaults(d), d.__input = (c) => o({ y: Number(c.currentTarget.value) }), e.template_effect(() => {
+        e.set_attribute(l, "min", _), e.set_attribute(l, "max", k);
+      }), e.bind_value(l, () => t().y, (c) => t().y = c), e.bind_value(d, () => t().y, (c) => t().y = c), e.append(g, M);
     }
-  }), e.reset(T), e.reset(p);
-  var x = e.sibling(p, 2), z = e.sibling(e.child(x), 2), _ = e.child(z);
-  F(_, {
+  }), e.reset(x), e.reset(f);
+  var S = e.sibling(f, 2), I = e.sibling(e.child(S), 2), P = e.child(I);
+  F(P, {
     label: "Rotation (°)",
-    onReset: () => s({ rotation: n.rotation }),
-    children: (P, S) => {
-      var b = Mn(), d = e.first_child(b);
-      e.remove_input_defaults(d), d.__input = (i) => s({ rotation: Number(i.currentTarget.value) });
-      var m = e.sibling(d, 2);
-      e.remove_input_defaults(m), m.__input = (i) => s({ rotation: Number(i.currentTarget.value) }), e.bind_value(d, () => t().rotation, (i) => t().rotation = i), e.bind_value(m, () => t().rotation, (i) => t().rotation = i), e.append(P, b);
+    onReset: () => o({ rotation: r.rotation }),
+    children: (g, C) => {
+      var M = Cn(), l = e.first_child(M);
+      e.remove_input_defaults(l), l.__input = (c) => o({ rotation: Number(c.currentTarget.value) });
+      var d = e.sibling(l, 2);
+      e.remove_input_defaults(d), d.__input = (c) => o({ rotation: Number(c.currentTarget.value) }), e.bind_value(l, () => t().rotation, (c) => t().rotation = c), e.bind_value(d, () => t().rotation, (c) => t().rotation = c), e.append(g, M);
     }
   });
-  var k = e.sibling(_, 2);
-  F(k, {
+  var u = e.sibling(P, 2);
+  F(u, {
     label: "Opacity",
-    onReset: () => r.onOpacityChange(n.opacity),
-    children: (P, S) => {
-      var b = Tn(), d = e.first_child(b);
-      e.remove_input_defaults(d), d.__input = (i) => r.onOpacityChange(Number(i.currentTarget.value));
-      var m = e.sibling(d, 2);
-      e.remove_input_defaults(m), m.__input = (i) => r.onOpacityChange(Number(i.currentTarget.value)), e.bind_value(d, a), e.bind_value(m, a), e.append(P, b);
+    onReset: () => n.onOpacityChange(r.opacity),
+    children: (g, C) => {
+      var M = jn(), l = e.first_child(M);
+      e.remove_input_defaults(l), l.__input = (c) => n.onOpacityChange(Number(c.currentTarget.value));
+      var d = e.sibling(l, 2);
+      e.remove_input_defaults(d), d.__input = (c) => n.onOpacityChange(Number(c.currentTarget.value)), e.bind_value(l, a), e.bind_value(d, a), e.append(g, M);
     }
-  }), e.reset(z), e.reset(x), e.reset(g), e.reset(u), e.append(o, u), e.pop();
+  }), e.reset(I), e.reset(S), e.reset(v), e.reset(p), e.append(s, p), e.pop();
 }
 e.delegate(["input"]);
-var Pn = e.from_html('<select class="mode-select svelte-1qmrgom"><option>Scale</option><option>Px</option></select>'), Cn = e.from_html('<input type="range" step="0.1" min="0.1" max="10" class="svelte-1qmrgom"/> <input type="number" class="manual-input svelte-1qmrgom" step="0.1" min="0.1" max="10"/>', 1), Nn = e.from_html('<input type="number" class="px-input svelte-1qmrgom" step="1" min="1" placeholder="Auto"/> <select class="constraint-select svelte-1qmrgom"><option>None</option><option>Min</option><option>Max</option></select>', 1), Rn = e.from_html('<input type="number" class="px-input svelte-1qmrgom" step="1" min="1" placeholder="Auto"/> <select class="constraint-select svelte-1qmrgom"><option>None</option><option>Min</option><option>Max</option></select>', 1), jn = e.from_html('<input type="checkbox"/>'), Wn = e.from_html("<!> <!> <!>", 1), Yn = e.from_html('<details class="section svelte-1qmrgom" open=""><summary class="section-title svelte-1qmrgom">Sizing</summary> <div class="section-content svelte-1qmrgom"><!> <!></div></details>');
-const Dn = {
+var Dn = e.from_html('<select class="mode-select svelte-1qmrgom"><option>Scale</option><option>Px</option></select>'), Xn = e.from_html('<input type="range" step="0.1" min="0.1" max="10" class="svelte-1qmrgom"/> <input type="number" class="manual-input svelte-1qmrgom" step="0.1" min="0.1" max="10"/>', 1), Yn = e.from_html('<input type="number" class="px-input svelte-1qmrgom" step="1" min="1" placeholder="Auto"/> <select class="constraint-select svelte-1qmrgom"><option>None</option><option>Min</option><option>Max</option></select>', 1), En = e.from_html('<input type="number" class="px-input svelte-1qmrgom" step="1" min="1" placeholder="Auto"/> <select class="constraint-select svelte-1qmrgom"><option>None</option><option>Min</option><option>Max</option></select>', 1), Ln = e.from_html('<input type="checkbox"/>'), On = e.from_html("<!> <!> <!>", 1), Zn = e.from_html('<details class="section svelte-1qmrgom" open=""><summary class="section-title svelte-1qmrgom">Sizing</summary> <div class="section-content svelte-1qmrgom"><!> <!></div></details>');
+const Bn = {
   hash: "svelte-1qmrgom",
   code: `.section.svelte-1qmrgom {border-top:1px solid var(--color-border, #ccc);border-bottom:1px solid var(--color-border, #ccc);background:var(--color-surface, #fff);min-width:0;}.section-title.svelte-1qmrgom {padding:0.75rem 0;font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid var(--color-border, #eee);}.section-title.svelte-1qmrgom::-webkit-details-marker {display:none;}.section-title.svelte-1qmrgom::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.section[open].svelte-1qmrgom > .section-title:where(.svelte-1qmrgom)::before {transform:rotate(90deg);}.section-content.svelte-1qmrgom {padding:0.75rem 0;display:flex;flex-direction:column;gap:0.75rem;}.mode-select.svelte-1qmrgom {padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;background:var(--color-surface, #fff);}.px-input.svelte-1qmrgom {width:50px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;appearance:textfield;-moz-appearance:textfield;}.px-input.svelte-1qmrgom::-webkit-outer-spin-button,
 	.px-input.svelte-1qmrgom::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}.constraint-select.svelte-1qmrgom {width:70px;flex-shrink:0;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}.manual-input.svelte-1qmrgom {width:60px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}input[type="range"].svelte-1qmrgom {flex:1;min-width:0;max-width:100%;}`
 };
-function Xn(o, r) {
-  e.push(r, !0), e.append_styles(o, Dn);
-  let t = e.prop(r, "effect", 3, fe);
-  function a(u) {
-    r.onChange({ ...t(), ...u });
-  }
-  var n = Yn(), s = e.sibling(e.child(n), 2), l = e.child(s);
-  F(l, {
+function qn(s, n) {
+  e.push(n, !0), e.append_styles(s, Bn);
+  let t = e.prop(n, "effect", 3, ve);
+  function a(p) {
+    n.onChange({ ...t(), ...p });
+  }
+  var r = Zn(), o = e.sibling(e.child(r), 2), i = e.child(o);
+  F(i, {
     label: "Mode",
-    onReset: () => a({ mode: fe.mode }),
-    children: (u, g) => {
-      var p = Pn();
-      p.__change = (x) => a({ mode: x.currentTarget.value });
-      var T = e.child(p);
-      T.value = T.__value = "scale";
-      var v = e.sibling(T);
-      v.value = v.__value = "px", e.reset(p);
-      var y;
-      e.init_select(p), e.template_effect(() => {
-        y !== (y = t().mode) && (p.value = (p.__value = t().mode) ?? "", e.select_option(p, t().mode));
-      }), e.append(u, p);
+    onReset: () => a({ mode: ve.mode }),
+    children: (p, v) => {
+      var f = Dn();
+      f.__change = (S) => a({ mode: S.currentTarget.value });
+      var x = e.child(f);
+      x.value = x.__value = "scale";
+      var y = e.sibling(x);
+      y.value = y.__value = "px", e.reset(f);
+      var w;
+      e.init_select(f), e.template_effect(() => {
+        w !== (w = t().mode) && (f.value = (f.__value = t().mode) ?? "", e.select_option(f, t().mode));
+      }), e.append(p, f);
     }
   });
-  var f = e.sibling(l, 2);
+  var h = e.sibling(i, 2);
   {
-    var h = (u) => {
-      F(u, {
+    var _ = (p) => {
+      F(p, {
         label: "Scale",
-        onReset: () => a({ scale: fe.scale }),
-        children: (g, p) => {
-          var T = Cn(), v = e.first_child(T);
-          e.remove_input_defaults(v), v.__input = (x) => a({ scale: Number(x.currentTarget.value) });
-          var y = e.sibling(v, 2);
-          e.remove_input_defaults(y), y.__input = (x) => a({ scale: Number(x.currentTarget.value) }), e.template_effect(() => {
-            e.set_value(v, t().scale ?? 1), e.set_value(y, t().scale ?? 1);
-          }), e.append(g, T);
+        onReset: () => a({ scale: ve.scale }),
+        children: (v, f) => {
+          var x = Xn(), y = e.first_child(x);
+          e.remove_input_defaults(y), y.__input = (S) => a({ scale: Number(S.currentTarget.value) });
+          var w = e.sibling(y, 2);
+          e.remove_input_defaults(w), w.__input = (S) => a({ scale: Number(S.currentTarget.value) }), e.template_effect(() => {
+            e.set_value(y, t().scale ?? 1), e.set_value(w, t().scale ?? 1);
+          }), e.append(v, x);
         }
       });
-    }, w = (u) => {
-      var g = Wn(), p = e.first_child(g);
-      F(p, {
+    }, k = (p) => {
+      var v = On(), f = e.first_child(v);
+      F(f, {
         label: "Width",
         onReset: () => a({ width: void 0, minWidth: void 0, maxWidth: void 0 }),
-        children: (y, x) => {
-          var z = Nn(), _ = e.first_child(z);
-          e.remove_input_defaults(_), _.__input = (m) => {
-            const i = m.currentTarget.value ? Number(m.currentTarget.value) : void 0, c = t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : "";
-            a(c === "min" ? { width: i, minWidth: i, maxWidth: void 0 } : c === "max" ? { width: i, maxWidth: i, minWidth: void 0 } : { width: i });
+        children: (w, S) => {
+          var I = Yn(), P = e.first_child(I);
+          e.remove_input_defaults(P), P.__input = (d) => {
+            const c = d.currentTarget.value ? Number(d.currentTarget.value) : void 0, b = t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : "";
+            a(b === "min" ? { width: c, minWidth: c, maxWidth: void 0 } : b === "max" ? { width: c, maxWidth: c, minWidth: void 0 } : { width: c });
           };
-          var k = e.sibling(_, 2);
-          k.__change = (m) => {
-            const i = t().width ?? t().minWidth ?? t().maxWidth;
-            m.currentTarget.value === "min" && i !== void 0 ? a({ minWidth: i, maxWidth: void 0 }) : m.currentTarget.value === "max" && i !== void 0 ? a({ maxWidth: i, minWidth: void 0 }) : a({ minWidth: void 0, maxWidth: void 0 });
+          var u = e.sibling(P, 2);
+          u.__change = (d) => {
+            const c = t().width ?? t().minWidth ?? t().maxWidth;
+            d.currentTarget.value === "min" && c !== void 0 ? a({ minWidth: c, maxWidth: void 0 }) : d.currentTarget.value === "max" && c !== void 0 ? a({ maxWidth: c, minWidth: void 0 }) : a({ minWidth: void 0, maxWidth: void 0 });
           };
-          var P = e.child(k);
-          P.value = P.__value = "";
-          var S = e.sibling(P);
-          S.value = S.__value = "min";
-          var b = e.sibling(S);
-          b.value = b.__value = "max", e.reset(k);
-          var d;
-          e.init_select(k), e.template_effect(() => {
-            e.set_value(_, t().width ?? t().minWidth ?? t().maxWidth ?? ""), d !== (d = t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : "") && (k.value = k.__value = t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : "", e.select_option(k, t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : ""));
-          }), e.append(y, z);
+          var g = e.child(u);
+          g.value = g.__value = "";
+          var C = e.sibling(g);
+          C.value = C.__value = "min";
+          var M = e.sibling(C);
+          M.value = M.__value = "max", e.reset(u);
+          var l;
+          e.init_select(u), e.template_effect(() => {
+            e.set_value(P, t().width ?? t().minWidth ?? t().maxWidth ?? ""), l !== (l = t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : "") && (u.value = u.__value = t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : "", e.select_option(u, t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : ""));
+          }), e.append(w, I);
         }
       });
-      var T = e.sibling(p, 2);
-      F(T, {
+      var x = e.sibling(f, 2);
+      F(x, {
         label: "Height",
         onReset: () => a({
           height: void 0,
           minHeight: void 0,
           maxHeight: void 0
         }),
-        children: (y, x) => {
-          var z = Rn(), _ = e.first_child(z);
-          e.remove_input_defaults(_), _.__input = (m) => {
-            const i = m.currentTarget.value ? Number(m.currentTarget.value) : void 0, c = t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : "";
-            a(c === "min" ? { height: i, minHeight: i, maxHeight: void 0 } : c === "max" ? { height: i, maxHeight: i, minHeight: void 0 } : { height: i });
+        children: (w, S) => {
+          var I = En(), P = e.first_child(I);
+          e.remove_input_defaults(P), P.__input = (d) => {
+            const c = d.currentTarget.value ? Number(d.currentTarget.value) : void 0, b = t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : "";
+            a(b === "min" ? { height: c, minHeight: c, maxHeight: void 0 } : b === "max" ? { height: c, maxHeight: c, minHeight: void 0 } : { height: c });
           };
-          var k = e.sibling(_, 2);
-          k.__change = (m) => {
-            const i = t().height ?? t().minHeight ?? t().maxHeight;
-            m.currentTarget.value === "min" && i !== void 0 ? a({ minHeight: i, maxHeight: void 0 }) : m.currentTarget.value === "max" && i !== void 0 ? a({ maxHeight: i, minHeight: void 0 }) : a({ minHeight: void 0, maxHeight: void 0 });
+          var u = e.sibling(P, 2);
+          u.__change = (d) => {
+            const c = t().height ?? t().minHeight ?? t().maxHeight;
+            d.currentTarget.value === "min" && c !== void 0 ? a({ minHeight: c, maxHeight: void 0 }) : d.currentTarget.value === "max" && c !== void 0 ? a({ maxHeight: c, minHeight: void 0 }) : a({ minHeight: void 0, maxHeight: void 0 });
           };
-          var P = e.child(k);
-          P.value = P.__value = "";
-          var S = e.sibling(P);
-          S.value = S.__value = "min";
-          var b = e.sibling(S);
-          b.value = b.__value = "max", e.reset(k);
-          var d;
-          e.init_select(k), e.template_effect(() => {
-            e.set_value(_, t().height ?? t().minHeight ?? t().maxHeight ?? ""), d !== (d = t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : "") && (k.value = k.__value = t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : "", e.select_option(k, t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : ""));
-          }), e.append(y, z);
+          var g = e.child(u);
+          g.value = g.__value = "";
+          var C = e.sibling(g);
+          C.value = C.__value = "min";
+          var M = e.sibling(C);
+          M.value = M.__value = "max", e.reset(u);
+          var l;
+          e.init_select(u), e.template_effect(() => {
+            e.set_value(P, t().height ?? t().minHeight ?? t().maxHeight ?? ""), l !== (l = t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : "") && (u.value = u.__value = t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : "", e.select_option(u, t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : ""));
+          }), e.append(w, I);
         }
       });
-      var v = e.sibling(T, 2);
-      F(v, {
+      var y = e.sibling(x, 2);
+      F(y, {
         label: "Maintain Aspect",
-        onReset: () => a({ maintainAspectRatio: fe.maintainAspectRatio }),
-        children: (y, x) => {
-          var z = jn();
-          e.remove_input_defaults(z), z.__change = (_) => a({ maintainAspectRatio: _.currentTarget.checked }), e.template_effect(() => e.set_checked(z, t().maintainAspectRatio ?? !0)), e.append(y, z);
+        onReset: () => a({ maintainAspectRatio: ve.maintainAspectRatio }),
+        children: (w, S) => {
+          var I = Ln();
+          e.remove_input_defaults(I), I.__change = (P) => a({ maintainAspectRatio: P.currentTarget.checked }), e.template_effect(() => e.set_checked(I, t().maintainAspectRatio ?? !0)), e.append(w, I);
         }
-      }), e.append(u, g);
+      }), e.append(p, v);
     };
-    e.if(f, (u) => {
-      t().mode === "scale" ? u(h) : u(w, !1);
+    e.if(h, (p) => {
+      t().mode === "scale" ? p(_) : p(k, !1);
     });
   }
-  e.reset(s), e.reset(n), e.append(o, n), e.pop();
+  e.reset(o), e.reset(r), e.append(s, r), e.pop();
 }
 e.delegate(["change", "input"]);
-var Zn = e.from_html('<span class="section-toggle svelte-1h62jm0"> </span>'), Bn = e.from_html('<div class="section-content svelte-1h62jm0"><!></div>'), Ln = e.from_html('<div class="section svelte-1h62jm0"><div class="section-header svelte-1h62jm0"><h3 class="section-title svelte-1h62jm0"> </h3> <!></div> <!></div>');
-const qn = {
+var Un = e.from_html('<span class="section-toggle svelte-1h62jm0"> </span>'), Vn = e.from_html('<div class="section-content svelte-1h62jm0"><!></div>'), An = e.from_html('<div class="section svelte-1h62jm0"><div class="section-header svelte-1h62jm0"><h3 class="section-title svelte-1h62jm0"> </h3> <!></div> <!></div>');
+const Fn = {
   hash: "svelte-1h62jm0",
   code: ".section.svelte-1h62jm0 {border-top:1px solid var(--color-border, #ccc);border-bottom:1px solid var(--color-border, #ccc);background:var(--color-surface, #fff);min-width:0;}.section-header.svelte-1h62jm0 {display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0;border-bottom:1px solid var(--color-border, #eee);cursor:pointer;}.section-title.svelte-1h62jm0 {margin:0;font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);}.section-toggle.svelte-1h62jm0 {font-size:0.75rem;color:var(--color-text-muted, #666);}.section-content.svelte-1h62jm0 {padding:0.75rem 0;display:flex;flex-direction:column;gap:0.75rem;}"
 };
-function En(o, r) {
-  e.push(r, !0), e.append_styles(o, qn);
-  let t = e.state(e.proxy(r.config.defaultCollapsed ?? !1));
-  var a = Ln(), n = e.child(a);
-  n.__click = () => r.config.collapsible && e.set(t, !e.get(t));
-  var s = e.child(n), l = e.child(s, !0);
-  e.reset(s);
-  var f = e.sibling(s, 2);
+function Hn(s, n) {
+  e.push(n, !0), e.append_styles(s, Fn);
+  let t = e.state(e.proxy(n.config.defaultCollapsed ?? !1));
+  var a = An(), r = e.child(a);
+  r.__click = () => n.config.collapsible && e.set(t, !e.get(t));
+  var o = e.child(r), i = e.child(o, !0);
+  e.reset(o);
+  var h = e.sibling(o, 2);
   {
-    var h = (g) => {
-      var p = Zn(), T = e.child(p, !0);
-      e.reset(p), e.template_effect(() => e.set_text(T, e.get(t) ? "▼" : "▲")), e.append(g, p);
+    var _ = (v) => {
+      var f = Un(), x = e.child(f, !0);
+      e.reset(f), e.template_effect(() => e.set_text(x, e.get(t) ? "▼" : "▲")), e.append(v, f);
     };
-    e.if(f, (g) => {
-      r.config.collapsible && g(h);
+    e.if(h, (v) => {
+      n.config.collapsible && v(_);
     });
   }
-  e.reset(n);
-  var w = e.sibling(n, 2);
+  e.reset(r);
+  var k = e.sibling(r, 2);
   {
-    var u = (g) => {
-      var p = Bn(), T = e.child(p);
-      e.snippet(T, () => r.children), e.reset(p), e.append(g, p);
+    var p = (v) => {
+      var f = Vn(), x = e.child(f);
+      e.snippet(x, () => n.children), e.reset(f), e.append(v, f);
     };
-    e.if(w, (g) => {
-      e.get(t) || g(u);
+    e.if(k, (v) => {
+      e.get(t) || v(p);
     });
   }
-  e.reset(a), e.template_effect(() => e.set_text(l, r.config.title)), e.append(o, a), e.pop();
+  e.reset(a), e.template_effect(() => e.set_text(i, n.config.title)), e.append(s, a), e.pop();
 }
 e.delegate(["click"]);
-var On = e.from_html('<input type="checkbox"/>'), Vn = e.from_html('<select class="shape-select svelte-1ani6pi"><option>None</option><option>Plane</option><option>Cylinder</option><option>Sphere</option></select>'), Un = e.from_html('<input type="range" step="0.5" min="0.5" max="4" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.5" min="0.5" max="4"/>', 1), An = e.from_html('<input type="range" step="0.05" min="0.1" max="5" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.05" min="0.1" max="5"/>', 1), Hn = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.01" min="-1" max="1"/>', 1), Fn = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.01" min="-1" max="1"/>', 1), Kn = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Image Position & Sizing</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!></div></details>'), Jn = e.from_html('<input type="range" step="1" min="-90" max="90" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-90" max="90"/>', 1), Gn = e.from_html('<input type="range" step="1" min="-90" max="90" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-90" max="90"/>', 1), $n = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-180" max="180"/>', 1), Qn = e.from_html('<input type="range" step="0.1" min="0" max="3" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.1" min="0" max="3"/>', 1), er = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!> <!></div></details>'), tr = e.from_html('<input type="range" step="10" min="50" max="2000" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="10" min="50" max="2000"/>', 1), nr = e.from_html('<input type="range" step="0.1" min="0" max="5" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.1" min="0" max="10"/>', 1), rr = e.from_html('<input type="range" step="1" min="-90" max="90" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-90" max="90"/>', 1), ar = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-180" max="180"/>', 1), sr = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!> <!></div></details>'), or = e.from_html('<input type="range" step="10" min="50" max="1000" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="10" min="50" max="1000"/>', 1), ir = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-180" max="180"/>', 1), lr = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!></div></details>'), cr = e.from_html('<input type="checkbox"/>'), dr = e.from_html('<input type="checkbox"/>'), ur = e.from_html('<input type="checkbox"/>'), mr = e.from_html('<details class="subsection svelte-1ani6pi"><summary class="subsection-title svelte-1ani6pi">Debug Visualization</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!></div></details>'), pr = e.from_html("<!> <!> <!> <!> <!> <!> <!>", 1), vr = e.from_html("<!> <!>", 1);
-const fr = {
+var Kn = e.from_html('<input type="checkbox"/>'), Jn = e.from_html('<select class="shape-select svelte-1ani6pi"><option>None</option><option>Plane</option><option>Cylinder</option><option>Sphere</option></select>'), Gn = e.from_html('<input type="range" step="0.5" min="0.5" max="4" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.5" min="0.5" max="4"/>', 1), $n = e.from_html('<input type="range" step="0.05" min="0.1" max="5" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.05" min="0.1" max="5"/>', 1), Qn = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.01" min="-1" max="1"/>', 1), er = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.01" min="-1" max="1"/>', 1), tr = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Image Position & Sizing</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!></div></details>'), nr = e.from_html('<input type="range" step="1" min="-90" max="90" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-90" max="90"/>', 1), rr = e.from_html('<input type="range" step="1" min="-90" max="90" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-90" max="90"/>', 1), ar = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-180" max="180"/>', 1), sr = e.from_html('<input type="range" step="0.1" min="0" max="3" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.1" min="0" max="3"/>', 1), or = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!> <!></div></details>'), ir = e.from_html('<input type="range" step="10" min="50" max="2000" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="10" min="50" max="2000"/>', 1), lr = e.from_html('<input type="range" step="0.1" min="0" max="5" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.1" min="0" max="10"/>', 1), cr = e.from_html('<input type="range" step="1" min="-90" max="90" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-90" max="90"/>', 1), dr = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-180" max="180"/>', 1), ur = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!> <!></div></details>'), pr = e.from_html('<input type="range" step="10" min="50" max="1000" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="10" min="50" max="1000"/>', 1), mr = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-180" max="180"/>', 1), fr = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!></div></details>'), vr = e.from_html('<input type="checkbox"/>'), hr = e.from_html('<input type="checkbox"/>'), gr = e.from_html('<input type="checkbox"/>'), br = e.from_html('<details class="subsection svelte-1ani6pi"><summary class="subsection-title svelte-1ani6pi">Debug Visualization</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!></div></details>'), _r = e.from_html("<!> <!> <!> <!> <!> <!> <!>", 1), yr = e.from_html("<!> <!>", 1);
+const wr = {
   hash: "svelte-1ani6pi",
   code: `.shape-select.svelte-1ani6pi {padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;background:var(--color-surface, #fff);}.manual-input.svelte-1ani6pi {width:60px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}input[type="range"].svelte-1ani6pi {flex:1;min-width:0;max-width:100%;}.subsection.svelte-1ani6pi {margin-top:0.75rem;border-top:1px solid var(--color-border, #e0e0e0);}.subsection-title.svelte-1ani6pi {padding:0.5rem 0;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;}.subsection-title.svelte-1ani6pi::-webkit-details-marker {display:none;}.subsection-title.svelte-1ani6pi::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.subsection[open].svelte-1ani6pi > .subsection-title:where(.svelte-1ani6pi)::before {transform:rotate(90deg);}.subsection-content.svelte-1ani6pi {padding-bottom:0.25rem;}`
 };
-function hr(o, r) {
-  e.push(r, !0), e.append_styles(o, fr);
-  const t = e.derived(() => r.effect ?? Qe), a = e.derived(() => e.get(t).image ?? se), n = e.derived(() => e.get(t).debug ?? ve);
-  function s(T) {
-    const v = { ...e.get(t), ...T };
-    r.onChange(v);
-  }
-  function l(T) {
-    s({
+function xr(s, n) {
+  e.push(n, !0), e.append_styles(s, wr);
+  const t = e.derived(() => n.effect ?? et), a = e.derived(() => e.get(t).image ?? se), r = e.derived(() => e.get(t).debug ?? fe);
+  function o(x) {
+    const y = { ...e.get(t), ...x };
+    n.onChange(y);
+  }
+  function i(x) {
+    o({
       image: {
         ...se,
         ...e.get(t).image,
-        ...T
+        ...x
       }
     });
   }
-  function f(T) {
-    s({
-      debug: { ...ve, ...e.get(t).debug, ...T }
+  function h(x) {
+    o({
+      debug: { ...fe, ...e.get(t).debug, ...x }
     });
   }
-  function h(T) {
-    s({
+  function _(x) {
+    o({
       cylinder: {
         ...ce,
         ...e.get(t).cylinder,
-        ...T
+        ...x
       }
     });
   }
-  function w(T) {
-    s({
-      plane: { ...ae, ...e.get(t).plane, ...T }
+  function k(x) {
+    o({
+      plane: { ...ae, ...e.get(t).plane, ...x }
     });
   }
-  function u(T) {
-    s({
+  function p(x) {
+    o({
       sphere: {
         ...ke,
         ...e.get(t).sphere,
-        ...T
+        ...x
       }
     });
   }
-  function g() {
-    e.get(t).enabled ? s({ enabled: !1 }) : s({
+  function v() {
+    e.get(t).enabled ? o({ enabled: !1 }) : o({
       enabled: !0,
       shape: "plane",
       plane: e.get(t).plane ?? { ...ae },
       image: e.get(t).image ?? { ...se }
     });
   }
-  const p = { id: "warp", title: "Warp", collapsible: !0 };
-  En(o, {
+  const f = { id: "warp", title: "Warp", collapsible: !0 };
+  Hn(s, {
     get config() {
-      return p;
+      return f;
     },
-    children: (T, v) => {
-      var y = vr(), x = e.first_child(y);
-      F(x, {
+    children: (x, y) => {
+      var w = yr(), S = e.first_child(w);
+      F(S, {
         label: "Enabled",
-        children: (k, P) => {
-          var S = On();
-          e.remove_input_defaults(S), S.__change = g, e.template_effect(() => e.set_checked(S, e.get(t).enabled)), e.append(k, S);
+        children: (u, g) => {
+          var C = Kn();
+          e.remove_input_defaults(C), C.__change = v, e.template_effect(() => e.set_checked(C, e.get(t).enabled)), e.append(u, C);
         }
       });
-      var z = e.sibling(x, 2);
+      var I = e.sibling(S, 2);
       {
-        var _ = (k) => {
-          var P = pr(), S = e.first_child(P);
-          F(S, {
+        var P = (u) => {
+          var g = _r(), C = e.first_child(g);
+          F(C, {
             label: "Shape",
-            children: (j, Z) => {
-              var L = Vn();
-              L.__change = (Y) => {
-                const D = Y.currentTarget.value;
-                s({ shape: D }), D === "cylinder" && !e.get(t).cylinder && s({ cylinder: { ...ce } }), D === "plane" && !e.get(t).plane && s({ plane: { ...ae } }), D === "sphere" && !e.get(t).sphere && s({ sphere: { ...ke } });
+            children: (W, E) => {
+              var Y = Jn();
+              Y.__change = (Z) => {
+                const B = Z.currentTarget.value;
+                o({ shape: B }), B === "cylinder" && !e.get(t).cylinder && o({ cylinder: { ...ce } }), B === "plane" && !e.get(t).plane && o({ plane: { ...ae } }), B === "sphere" && !e.get(t).sphere && o({ sphere: { ...ke } });
               };
-              var E = e.child(L);
-              E.value = E.__value = "none";
-              var q = e.sibling(E);
+              var U = e.child(Y);
+              U.value = U.__value = "none";
+              var q = e.sibling(U);
               q.value = q.__value = "plane";
-              var K = e.sibling(q);
-              K.value = K.__value = "cylinder";
-              var V = e.sibling(K);
-              V.value = V.__value = "sphere", e.reset(L);
+              var J = e.sibling(q);
+              J.value = J.__value = "cylinder";
+              var A = e.sibling(J);
+              A.value = A.__value = "sphere", e.reset(Y);
               var G;
-              e.init_select(L), e.template_effect(() => {
-                G !== (G = e.get(t).shape) && (L.value = (L.__value = e.get(t).shape) ?? "", e.select_option(L, e.get(t).shape));
-              }), e.append(j, L);
+              e.init_select(Y), e.template_effect(() => {
+                G !== (G = e.get(t).shape) && (Y.value = (Y.__value = e.get(t).shape) ?? "", e.select_option(Y, e.get(t).shape));
+              }), e.append(W, Y);
             }
           });
-          var b = e.sibling(S, 2);
-          F(b, {
+          var M = e.sibling(C, 2);
+          F(M, {
             label: "Quality",
-            onReset: () => s({ quality: Qe.quality }),
-            children: (j, Z) => {
-              var L = Un(), E = e.first_child(L);
-              e.remove_input_defaults(E), E.__input = (K) => s({ quality: Number(K.currentTarget.value) });
-              var q = e.sibling(E, 2);
-              e.remove_input_defaults(q), q.__input = (K) => s({ quality: Number(K.currentTarget.value) }), e.template_effect(() => {
-                e.set_value(E, e.get(t).quality ?? 1), e.set_value(q, e.get(t).quality ?? 1);
-              }), e.append(j, L);
+            onReset: () => o({ quality: et.quality }),
+            children: (W, E) => {
+              var Y = Gn(), U = e.first_child(Y);
+              e.remove_input_defaults(U), U.__input = (J) => o({ quality: Number(J.currentTarget.value) });
+              var q = e.sibling(U, 2);
+              e.remove_input_defaults(q), q.__input = (J) => o({ quality: Number(J.currentTarget.value) }), e.template_effect(() => {
+                e.set_value(U, e.get(t).quality ?? 1), e.set_value(q, e.get(t).quality ?? 1);
+              }), e.append(W, Y);
             }
           });
-          var d = e.sibling(b, 2);
+          var l = e.sibling(M, 2);
           {
-            var m = (j) => {
-              var Z = Kn(), L = e.sibling(e.child(Z), 2), E = e.child(L);
-              F(E, {
+            var d = (W) => {
+              var E = tr(), Y = e.sibling(e.child(E), 2), U = e.child(Y);
+              F(U, {
                 label: "Scale",
-                onReset: () => l({ scale: se.scale }),
-                children: (V, G) => {
-                  var Y = An(), D = e.first_child(Y);
-                  e.remove_input_defaults(D), D.__input = (N) => l({ scale: Number(N.currentTarget.value) });
-                  var W = e.sibling(D, 2);
-                  e.remove_input_defaults(W), W.__input = (N) => l({ scale: Number(N.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(D, e.get(a).scale), e.set_value(W, e.get(a).scale);
-                  }), e.append(V, Y);
+                onReset: () => i({ scale: se.scale }),
+                children: (A, G) => {
+                  var Z = $n(), B = e.first_child(Z);
+                  e.remove_input_defaults(B), B.__input = (D) => i({ scale: Number(D.currentTarget.value) });
+                  var O = e.sibling(B, 2);
+                  e.remove_input_defaults(O), O.__input = (D) => i({ scale: Number(D.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(B, e.get(a).scale), e.set_value(O, e.get(a).scale);
+                  }), e.append(A, Z);
                 }
               });
-              var q = e.sibling(E, 2);
+              var q = e.sibling(U, 2);
               F(q, {
                 label: "Translate X",
-                onReset: () => l({ translateX: se.translateX }),
-                children: (V, G) => {
-                  var Y = Hn(), D = e.first_child(Y);
-                  e.remove_input_defaults(D), D.__input = (N) => l({ translateX: Number(N.currentTarget.value) });
-                  var W = e.sibling(D, 2);
-                  e.remove_input_defaults(W), W.__input = (N) => l({ translateX: Number(N.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(D, e.get(a).translateX), e.set_value(W, e.get(a).translateX);
-                  }), e.append(V, Y);
+                onReset: () => i({ translateX: se.translateX }),
+                children: (A, G) => {
+                  var Z = Qn(), B = e.first_child(Z);
+                  e.remove_input_defaults(B), B.__input = (D) => i({ translateX: Number(D.currentTarget.value) });
+                  var O = e.sibling(B, 2);
+                  e.remove_input_defaults(O), O.__input = (D) => i({ translateX: Number(D.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(B, e.get(a).translateX), e.set_value(O, e.get(a).translateX);
+                  }), e.append(A, Z);
                 }
               });
-              var K = e.sibling(q, 2);
-              F(K, {
+              var J = e.sibling(q, 2);
+              F(J, {
                 label: "Translate Y",
-                onReset: () => l({ translateY: se.translateY }),
-                children: (V, G) => {
-                  var Y = Fn(), D = e.first_child(Y);
-                  e.remove_input_defaults(D), D.__input = (N) => l({ translateY: Number(N.currentTarget.value) });
-                  var W = e.sibling(D, 2);
-                  e.remove_input_defaults(W), W.__input = (N) => l({ translateY: Number(N.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(D, e.get(a).translateY), e.set_value(W, e.get(a).translateY);
-                  }), e.append(V, Y);
+                onReset: () => i({ translateY: se.translateY }),
+                children: (A, G) => {
+                  var Z = er(), B = e.first_child(Z);
+                  e.remove_input_defaults(B), B.__input = (D) => i({ translateY: Number(D.currentTarget.value) });
+                  var O = e.sibling(B, 2);
+                  e.remove_input_defaults(O), O.__input = (D) => i({ translateY: Number(D.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(B, e.get(a).translateY), e.set_value(O, e.get(a).translateY);
+                  }), e.append(A, Z);
                 }
-              }), e.reset(L), e.reset(Z), e.append(j, Z);
+              }), e.reset(Y), e.reset(E), e.append(W, E);
             };
-            e.if(d, (j) => {
-              e.get(t).shape !== "none" && j(m);
+            e.if(l, (W) => {
+              e.get(t).shape !== "none" && W(d);
             });
           }
-          var i = e.sibling(d, 2);
+          var c = e.sibling(l, 2);
           {
-            var c = (j) => {
-              const Z = e.derived(() => e.get(t).plane);
-              var L = er(), E = e.sibling(e.child(L), 2), q = e.child(E);
+            var b = (W) => {
+              const E = e.derived(() => e.get(t).plane);
+              var Y = or(), U = e.sibling(e.child(Y), 2), q = e.child(U);
               F(q, {
                 label: "Rotation X",
-                onReset: () => w({ rotationX: ae.rotationX }),
-                children: (Y, D) => {
-                  var W = Jn(), N = e.first_child(W);
-                  e.remove_input_defaults(N), N.__input = (U) => w({ rotationX: Number(U.currentTarget.value) });
-                  var H = e.sibling(N, 2);
-                  e.remove_input_defaults(H), H.__input = (U) => w({ rotationX: Number(U.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(N, e.get(Z).rotationX), e.set_value(H, e.get(Z).rotationX);
-                  }), e.append(Y, W);
+                onReset: () => k({ rotationX: ae.rotationX }),
+                children: (Z, B) => {
+                  var O = nr(), D = e.first_child(O);
+                  e.remove_input_defaults(D), D.__input = (H) => k({ rotationX: Number(H.currentTarget.value) });
+                  var K = e.sibling(D, 2);
+                  e.remove_input_defaults(K), K.__input = (H) => k({ rotationX: Number(H.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(E).rotationX), e.set_value(K, e.get(E).rotationX);
+                  }), e.append(Z, O);
                 }
               });
-              var K = e.sibling(q, 2);
-              F(K, {
+              var J = e.sibling(q, 2);
+              F(J, {
                 label: "Rotation Y",
-                onReset: () => w({ rotationY: ae.rotationY }),
-                children: (Y, D) => {
-                  var W = Gn(), N = e.first_child(W);
-                  e.remove_input_defaults(N), N.__input = (U) => w({ rotationY: Number(U.currentTarget.value) });
-                  var H = e.sibling(N, 2);
-                  e.remove_input_defaults(H), H.__input = (U) => w({ rotationY: Number(U.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(N, e.get(Z).rotationY), e.set_value(H, e.get(Z).rotationY);
-                  }), e.append(Y, W);
+                onReset: () => k({ rotationY: ae.rotationY }),
+                children: (Z, B) => {
+                  var O = rr(), D = e.first_child(O);
+                  e.remove_input_defaults(D), D.__input = (H) => k({ rotationY: Number(H.currentTarget.value) });
+                  var K = e.sibling(D, 2);
+                  e.remove_input_defaults(K), K.__input = (H) => k({ rotationY: Number(H.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(E).rotationY), e.set_value(K, e.get(E).rotationY);
+                  }), e.append(Z, O);
                 }
               });
-              var V = e.sibling(K, 2);
-              F(V, {
+              var A = e.sibling(J, 2);
+              F(A, {
                 label: "Rotation Z",
-                onReset: () => w({ rotationZ: ae.rotationZ }),
-                children: (Y, D) => {
-                  var W = $n(), N = e.first_child(W);
-                  e.remove_input_defaults(N), N.__input = (U) => w({ rotationZ: Number(U.currentTarget.value) });
-                  var H = e.sibling(N, 2);
-                  e.remove_input_defaults(H), H.__input = (U) => w({ rotationZ: Number(U.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(N, e.get(Z).rotationZ), e.set_value(H, e.get(Z).rotationZ);
-                  }), e.append(Y, W);
+                onReset: () => k({ rotationZ: ae.rotationZ }),
+                children: (Z, B) => {
+                  var O = ar(), D = e.first_child(O);
+                  e.remove_input_defaults(D), D.__input = (H) => k({ rotationZ: Number(H.currentTarget.value) });
+                  var K = e.sibling(D, 2);
+                  e.remove_input_defaults(K), K.__input = (H) => k({ rotationZ: Number(H.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(E).rotationZ), e.set_value(K, e.get(E).rotationZ);
+                  }), e.append(Z, O);
                 }
               });
-              var G = e.sibling(V, 2);
+              var G = e.sibling(A, 2);
               F(G, {
                 label: "Perspective",
-                onReset: () => w({ depthScale: ae.depthScale }),
-                children: (Y, D) => {
-                  var W = Qn(), N = e.first_child(W);
-                  e.remove_input_defaults(N), N.__input = (U) => w({ depthScale: Number(U.currentTarget.value) });
-                  var H = e.sibling(N, 2);
-                  e.remove_input_defaults(H), H.__input = (U) => w({ depthScale: Number(U.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(N, e.get(Z).depthScale), e.set_value(H, e.get(Z).depthScale);
-                  }), e.append(Y, W);
+                onReset: () => k({ depthScale: ae.depthScale }),
+                children: (Z, B) => {
+                  var O = sr(), D = e.first_child(O);
+                  e.remove_input_defaults(D), D.__input = (H) => k({ depthScale: Number(H.currentTarget.value) });
+                  var K = e.sibling(D, 2);
+                  e.remove_input_defaults(K), K.__input = (H) => k({ depthScale: Number(H.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(E).depthScale), e.set_value(K, e.get(E).depthScale);
+                  }), e.append(Z, O);
                 }
-              }), e.reset(E), e.reset(L), e.append(j, L);
+              }), e.reset(U), e.reset(Y), e.append(W, Y);
             };
-            e.if(i, (j) => {
-              e.get(t).shape === "plane" && e.get(t).plane && j(c);
+            e.if(c, (W) => {
+              e.get(t).shape === "plane" && e.get(t).plane && W(b);
             });
           }
-          var M = e.sibling(i, 2);
+          var T = e.sibling(c, 2);
           {
-            var I = (j) => {
-              const Z = e.derived(() => e.get(t).cylinder);
-              var L = sr(), E = e.sibling(e.child(L), 2), q = e.child(E);
+            var m = (W) => {
+              const E = e.derived(() => e.get(t).cylinder);
+              var Y = ur(), U = e.sibling(e.child(Y), 2), q = e.child(U);
               F(q, {
                 label: "Diameter",
-                onReset: () => h({ diameter: ce.diameter }),
-                children: (Y, D) => {
-                  var W = tr(), N = e.first_child(W);
-                  e.remove_input_defaults(N), N.__input = (U) => h({ diameter: Number(U.currentTarget.value) });
-                  var H = e.sibling(N, 2);
-                  e.remove_input_defaults(H), H.__input = (U) => h({ diameter: Number(U.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(N, e.get(Z).diameter), e.set_value(H, e.get(Z).diameter);
-                  }), e.append(Y, W);
+                onReset: () => _({ diameter: ce.diameter }),
+                children: (Z, B) => {
+                  var O = ir(), D = e.first_child(O);
+                  e.remove_input_defaults(D), D.__input = (H) => _({ diameter: Number(H.currentTarget.value) });
+                  var K = e.sibling(D, 2);
+                  e.remove_input_defaults(K), K.__input = (H) => _({ diameter: Number(H.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(E).diameter), e.set_value(K, e.get(E).diameter);
+                  }), e.append(Z, O);
                 }
               });
-              var K = e.sibling(q, 2);
-              F(K, {
+              var J = e.sibling(q, 2);
+              F(J, {
                 label: "Perspective",
-                onReset: () => h({ perspective: ce.perspective }),
-                children: (Y, D) => {
-                  var W = nr(), N = e.first_child(W);
-                  e.remove_input_defaults(N), N.__input = (U) => h({ perspective: Number(U.currentTarget.value) });
-                  var H = e.sibling(N, 2);
-                  e.remove_input_defaults(H), H.__input = (U) => h({ perspective: Number(U.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(N, e.get(Z).perspective ?? 1), e.set_value(H, e.get(Z).perspective ?? 1);
-                  }), e.append(Y, W);
+                onReset: () => _({ perspective: ce.perspective }),
+                children: (Z, B) => {
+                  var O = lr(), D = e.first_child(O);
+                  e.remove_input_defaults(D), D.__input = (H) => _({ perspective: Number(H.currentTarget.value) });
+                  var K = e.sibling(D, 2);
+                  e.remove_input_defaults(K), K.__input = (H) => _({ perspective: Number(H.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(E).perspective ?? 1), e.set_value(K, e.get(E).perspective ?? 1);
+                  }), e.append(Z, O);
                 }
               });
-              var V = e.sibling(K, 2);
-              F(V, {
+              var A = e.sibling(J, 2);
+              F(A, {
                 label: "Tilt (X)",
-                onReset: () => h({ rotationX: ce.rotationX }),
-                children: (Y, D) => {
-                  var W = rr(), N = e.first_child(W);
-                  e.remove_input_defaults(N), N.__input = (U) => h({ rotationX: Number(U.currentTarget.value) });
-                  var H = e.sibling(N, 2);
-                  e.remove_input_defaults(H), H.__input = (U) => h({ rotationX: Number(U.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(N, e.get(Z).rotationX), e.set_value(H, e.get(Z).rotationX);
-                  }), e.append(Y, W);
+                onReset: () => _({ rotationX: ce.rotationX }),
+                children: (Z, B) => {
+                  var O = cr(), D = e.first_child(O);
+                  e.remove_input_defaults(D), D.__input = (H) => _({ rotationX: Number(H.currentTarget.value) });
+                  var K = e.sibling(D, 2);
+                  e.remove_input_defaults(K), K.__input = (H) => _({ rotationX: Number(H.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(E).rotationX), e.set_value(K, e.get(E).rotationX);
+                  }), e.append(Z, O);
                 }
               });
-              var G = e.sibling(V, 2);
+              var G = e.sibling(A, 2);
               F(G, {
                 label: "Spin (Z)",
-                onReset: () => h({ rotationZ: ce.rotationZ }),
-                children: (Y, D) => {
-                  var W = ar(), N = e.first_child(W);
-                  e.remove_input_defaults(N), N.__input = (U) => h({ rotationZ: Number(U.currentTarget.value) });
-                  var H = e.sibling(N, 2);
-                  e.remove_input_defaults(H), H.__input = (U) => h({ rotationZ: Number(U.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(N, e.get(Z).rotationZ), e.set_value(H, e.get(Z).rotationZ);
-                  }), e.append(Y, W);
+                onReset: () => _({ rotationZ: ce.rotationZ }),
+                children: (Z, B) => {
+                  var O = dr(), D = e.first_child(O);
+                  e.remove_input_defaults(D), D.__input = (H) => _({ rotationZ: Number(H.currentTarget.value) });
+                  var K = e.sibling(D, 2);
+                  e.remove_input_defaults(K), K.__input = (H) => _({ rotationZ: Number(H.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(E).rotationZ), e.set_value(K, e.get(E).rotationZ);
+                  }), e.append(Z, O);
                 }
-              }), e.reset(E), e.reset(L), e.append(j, L);
+              }), e.reset(U), e.reset(Y), e.append(W, Y);
             };
-            e.if(M, (j) => {
-              e.get(t).shape === "cylinder" && e.get(t).cylinder && j(I);
+            e.if(T, (W) => {
+              e.get(t).shape === "cylinder" && e.get(t).cylinder && W(m);
             });
           }
-          var X = e.sibling(M, 2);
+          var R = e.sibling(T, 2);
           {
-            var J = (j) => {
-              const Z = e.derived(() => e.get(t).sphere);
-              var L = lr(), E = e.sibling(e.child(L), 2), q = e.child(E);
+            var z = (W) => {
+              const E = e.derived(() => e.get(t).sphere);
+              var Y = fr(), U = e.sibling(e.child(Y), 2), q = e.child(U);
               F(q, {
                 label: "Radius",
-                onReset: () => u({ radius: ke.radius }),
-                children: (V, G) => {
-                  var Y = or(), D = e.first_child(Y);
-                  e.remove_input_defaults(D), D.__input = (N) => u({ radius: Number(N.currentTarget.value) });
-                  var W = e.sibling(D, 2);
-                  e.remove_input_defaults(W), W.__input = (N) => u({ radius: Number(N.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(D, e.get(Z).radius), e.set_value(W, e.get(Z).radius);
-                  }), e.append(V, Y);
+                onReset: () => p({ radius: ke.radius }),
+                children: (A, G) => {
+                  var Z = pr(), B = e.first_child(Z);
+                  e.remove_input_defaults(B), B.__input = (D) => p({ radius: Number(D.currentTarget.value) });
+                  var O = e.sibling(B, 2);
+                  e.remove_input_defaults(O), O.__input = (D) => p({ radius: Number(D.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(B, e.get(E).radius), e.set_value(O, e.get(E).radius);
+                  }), e.append(A, Z);
                 }
               });
-              var K = e.sibling(q, 2);
-              F(K, {
+              var J = e.sibling(q, 2);
+              F(J, {
                 label: "Spin (Z)",
-                onReset: () => u({ rotationZ: ke.rotationZ }),
-                children: (V, G) => {
-                  var Y = ir(), D = e.first_child(Y);
-                  e.remove_input_defaults(D), D.__input = (N) => u({ rotationZ: Number(N.currentTarget.value) });
-                  var W = e.sibling(D, 2);
-                  e.remove_input_defaults(W), W.__input = (N) => u({ rotationZ: Number(N.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(D, e.get(Z).rotationZ), e.set_value(W, e.get(Z).rotationZ);
-                  }), e.append(V, Y);
+                onReset: () => p({ rotationZ: ke.rotationZ }),
+                children: (A, G) => {
+                  var Z = mr(), B = e.first_child(Z);
+                  e.remove_input_defaults(B), B.__input = (D) => p({ rotationZ: Number(D.currentTarget.value) });
+                  var O = e.sibling(B, 2);
+                  e.remove_input_defaults(O), O.__input = (D) => p({ rotationZ: Number(D.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(B, e.get(E).rotationZ), e.set_value(O, e.get(E).rotationZ);
+                  }), e.append(A, Z);
                 }
-              }), e.reset(E), e.reset(L), e.append(j, L);
+              }), e.reset(U), e.reset(Y), e.append(W, Y);
             };
-            e.if(X, (j) => {
-              e.get(t).shape === "sphere" && e.get(t).sphere && j(J);
+            e.if(R, (W) => {
+              e.get(t).shape === "sphere" && e.get(t).sphere && W(z);
             });
           }
-          var B = e.sibling(X, 2);
+          var N = e.sibling(R, 2);
           {
-            var A = (j) => {
-              var Z = mr(), L = e.sibling(e.child(Z), 2), E = e.child(L);
-              F(E, {
+            var L = (W) => {
+              var E = br(), Y = e.sibling(e.child(E), 2), U = e.child(Y);
+              F(U, {
                 label: "Show Grid/Bounds",
-                onReset: () => f({ showBounds: ve.showBounds }),
-                children: (V, G) => {
-                  var Y = cr();
-                  e.remove_input_defaults(Y), Y.__change = (D) => f({ showBounds: D.currentTarget.checked }), e.template_effect(() => e.set_checked(Y, e.get(n).showBounds)), e.append(V, Y);
+                onReset: () => h({ showBounds: fe.showBounds }),
+                children: (A, G) => {
+                  var Z = vr();
+                  e.remove_input_defaults(Z), Z.__change = (B) => h({ showBounds: B.currentTarget.checked }), e.template_effect(() => e.set_checked(Z, e.get(r).showBounds)), e.append(A, Z);
                 }
               });
-              var q = e.sibling(E, 2);
+              var q = e.sibling(U, 2);
               F(q, {
                 label: "Depth Shader",
-                onReset: () => f({ showDepthVis: ve.showDepthVis }),
-                children: (V, G) => {
-                  var Y = dr();
-                  e.remove_input_defaults(Y), Y.__change = (D) => f({ showDepthVis: D.currentTarget.checked }), e.template_effect(() => e.set_checked(Y, e.get(n).showDepthVis)), e.append(V, Y);
+                onReset: () => h({ showDepthVis: fe.showDepthVis }),
+                children: (A, G) => {
+                  var Z = hr();
+                  e.remove_input_defaults(Z), Z.__change = (B) => h({ showDepthVis: B.currentTarget.checked }), e.template_effect(() => e.set_checked(Z, e.get(r).showDepthVis)), e.append(A, Z);
                 }
               });
-              var K = e.sibling(q, 2);
-              F(K, {
+              var J = e.sibling(q, 2);
+              F(J, {
                 label: "Crosshair",
-                onReset: () => f({ showCrosshair: ve.showCrosshair }),
-                children: (V, G) => {
-                  var Y = ur();
-                  e.remove_input_defaults(Y), Y.__change = (D) => f({ showCrosshair: D.currentTarget.checked }), e.template_effect(() => e.set_checked(Y, e.get(n).showCrosshair)), e.append(V, Y);
+                onReset: () => h({ showCrosshair: fe.showCrosshair }),
+                children: (A, G) => {
+                  var Z = gr();
+                  e.remove_input_defaults(Z), Z.__change = (B) => h({ showCrosshair: B.currentTarget.checked }), e.template_effect(() => e.set_checked(Z, e.get(r).showCrosshair)), e.append(A, Z);
                 }
-              }), e.reset(L), e.reset(Z), e.append(j, Z);
+              }), e.reset(Y), e.reset(E), e.append(W, E);
             };
-            e.if(B, (j) => {
-              e.get(t).shape !== "none" && j(A);
+            e.if(N, (W) => {
+              e.get(t).shape !== "none" && W(L);
             });
           }
-          e.append(k, P);
+          e.append(u, g);
         };
-        e.if(z, (k) => {
-          e.get(t).enabled && k(_);
+        e.if(I, (u) => {
+          e.get(t).enabled && u(P);
         });
       }
-      e.append(T, y);
+      e.append(x, w);
     },
     $$slots: { default: !0 }
   }), e.pop();
 }
 e.delegate(["change", "input"]);
-var gr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), br = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), _r = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), yr = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="1" min="-180" max="180"/>', 1), wr = e.from_html('<input type="range" step="0.01" min="-2" max="2" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-2" max="2"/>', 1), xr = e.from_html('<input type="range" step="0.01" min="0.1" max="3" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="0.1" max="3"/>', 1), kr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Mr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Tr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Sr = e.from_html('<input type="range" step="1" min="-100" max="100" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="1" min="-100" max="100"/>', 1), Ir = e.from_html('<input type="range" step="1" min="-100" max="100" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="1" min="-100" max="100"/>', 1), zr = e.from_html('<details class="section svelte-1f6utug" open=""><summary class="section-title svelte-1f6utug">Restyle</summary> <div class="section-content svelte-1f6utug"><details class="subsection svelte-1f6utug" open=""><summary class="subsection-title svelte-1f6utug">Basic Adjustments</summary> <div class="subsection-content svelte-1f6utug"><!> <!> <!> <!></div></details> <details class="subsection svelte-1f6utug" open=""><summary class="subsection-title svelte-1f6utug">Exposure & Tone</summary> <div class="subsection-content svelte-1f6utug"><!> <!> <!> <!></div></details> <details class="subsection svelte-1f6utug" open=""><summary class="subsection-title svelte-1f6utug">Color & White Balance</summary> <div class="subsection-content svelte-1f6utug"><!> <!> <!></div></details></div></details>');
-const Pr = {
+var kr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Mr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Tr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Sr = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="1" min="-180" max="180"/>', 1), zr = e.from_html('<input type="range" step="0.01" min="-2" max="2" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-2" max="2"/>', 1), Ir = e.from_html('<input type="range" step="0.01" min="0.1" max="3" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="0.1" max="3"/>', 1), Pr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Cr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), jr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Nr = e.from_html('<input type="range" step="1" min="-100" max="100" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="1" min="-100" max="100"/>', 1), Rr = e.from_html('<input type="range" step="1" min="-100" max="100" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="1" min="-100" max="100"/>', 1), Wr = e.from_html('<details class="section svelte-1f6utug" open=""><summary class="section-title svelte-1f6utug">Restyle</summary> <div class="section-content svelte-1f6utug"><details class="subsection svelte-1f6utug" open=""><summary class="subsection-title svelte-1f6utug">Basic Adjustments</summary> <div class="subsection-content svelte-1f6utug"><!> <!> <!> <!></div></details> <details class="subsection svelte-1f6utug" open=""><summary class="subsection-title svelte-1f6utug">Exposure & Tone</summary> <div class="subsection-content svelte-1f6utug"><!> <!> <!> <!></div></details> <details class="subsection svelte-1f6utug" open=""><summary class="subsection-title svelte-1f6utug">Color & White Balance</summary> <div class="subsection-content svelte-1f6utug"><!> <!> <!></div></details></div></details>');
+const Dr = {
   hash: "svelte-1f6utug",
   code: `.section.svelte-1f6utug {border-top:1px solid var(--color-border, #ccc);border-bottom:1px solid var(--color-border, #ccc);background:var(--color-surface, #fff);min-width:0;}.section-title.svelte-1f6utug {padding:0.75rem 0;font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid var(--color-border, #eee);}.section-title.svelte-1f6utug::-webkit-details-marker {display:none;}.section-title.svelte-1f6utug::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.section[open].svelte-1f6utug > .section-title:where(.svelte-1f6utug)::before {transform:rotate(90deg);}.section-content.svelte-1f6utug {padding:0.75rem 0;display:flex;flex-direction:column;gap:0.75rem;}.manual-input.svelte-1f6utug {width:60px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}input[type="range"].svelte-1f6utug {flex:1;min-width:0;max-width:100%;}.subsection.svelte-1f6utug {margin-top:0.75rem;border-top:1px solid var(--color-border, #e0e0e0);}.subsection.svelte-1f6utug:first-child {margin-top:0;border-top:none;}.subsection-title.svelte-1f6utug {padding:0.5rem 0;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;}.subsection-title.svelte-1f6utug::-webkit-details-marker {display:none;}.subsection-title.svelte-1f6utug::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.subsection[open].svelte-1f6utug > .subsection-title:where(.svelte-1f6utug)::before {transform:rotate(90deg);}.subsection-content.svelte-1f6utug {padding-bottom:0.25rem;}`
 };
-function Cr(o, r) {
-  e.push(r, !0), e.append_styles(o, Pr);
-  let t = e.prop(r, "effect", 3, ee);
-  function a(d) {
-    r.onChange({ ...t(), ...d });
+function Xr(s, n) {
+  e.push(n, !0), e.append_styles(s, Dr);
+  let t = e.prop(n, "effect", 3, ee);
+  function a(l) {
+    n.onChange({ ...t(), ...l });
   }
-  var n = zr(), s = e.sibling(e.child(n), 2), l = e.child(s), f = e.sibling(e.child(l), 2), h = e.child(f);
-  F(h, {
+  var r = Wr(), o = e.sibling(e.child(r), 2), i = e.child(o), h = e.sibling(e.child(i), 2), _ = e.child(h);
+  F(_, {
     label: "Brightness",
     onReset: () => a({ brightness: ee.brightness }),
-    children: (d, m) => {
-      var i = gr(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ brightness: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ brightness: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().brightness), e.set_value(M, t().brightness);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = kr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ brightness: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ brightness: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().brightness), e.set_value(T, t().brightness);
+      }), e.append(l, c);
     }
   });
-  var w = e.sibling(h, 2);
-  F(w, {
+  var k = e.sibling(_, 2);
+  F(k, {
     label: "Contrast",
     onReset: () => a({ contrast: ee.contrast }),
-    children: (d, m) => {
-      var i = br(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ contrast: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ contrast: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().contrast), e.set_value(M, t().contrast);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = Mr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ contrast: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ contrast: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().contrast), e.set_value(T, t().contrast);
+      }), e.append(l, c);
     }
   });
-  var u = e.sibling(w, 2);
-  F(u, {
+  var p = e.sibling(k, 2);
+  F(p, {
     label: "Saturation",
     onReset: () => a({ saturation: ee.saturation }),
-    children: (d, m) => {
-      var i = _r(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ saturation: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ saturation: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().saturation), e.set_value(M, t().saturation);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = Tr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ saturation: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ saturation: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().saturation), e.set_value(T, t().saturation);
+      }), e.append(l, c);
     }
   });
-  var g = e.sibling(u, 2);
-  F(g, {
+  var v = e.sibling(p, 2);
+  F(v, {
     label: "Hue (°)",
     onReset: () => a({ hue: ee.hue }),
-    children: (d, m) => {
-      var i = yr(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ hue: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ hue: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().hue), e.set_value(M, t().hue);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = Sr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ hue: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ hue: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().hue), e.set_value(T, t().hue);
+      }), e.append(l, c);
     }
-  }), e.reset(f), e.reset(l);
-  var p = e.sibling(l, 2), T = e.sibling(e.child(p), 2), v = e.child(T);
-  F(v, {
+  }), e.reset(h), e.reset(i);
+  var f = e.sibling(i, 2), x = e.sibling(e.child(f), 2), y = e.child(x);
+  F(y, {
     label: "Exposure",
     onReset: () => a({ exposure: ee.exposure }),
-    children: (d, m) => {
-      var i = wr(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ exposure: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ exposure: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().exposure), e.set_value(M, t().exposure);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = zr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ exposure: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ exposure: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().exposure), e.set_value(T, t().exposure);
+      }), e.append(l, c);
     }
   });
-  var y = e.sibling(v, 2);
-  F(y, {
+  var w = e.sibling(y, 2);
+  F(w, {
     label: "Gamma",
     onReset: () => a({ gamma: ee.gamma }),
-    children: (d, m) => {
-      var i = xr(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ gamma: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ gamma: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().gamma), e.set_value(M, t().gamma);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = Ir(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ gamma: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ gamma: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().gamma), e.set_value(T, t().gamma);
+      }), e.append(l, c);
     }
   });
-  var x = e.sibling(y, 2);
-  F(x, {
+  var S = e.sibling(w, 2);
+  F(S, {
     label: "Shadows",
     onReset: () => a({ shadows: ee.shadows }),
-    children: (d, m) => {
-      var i = kr(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ shadows: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ shadows: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().shadows), e.set_value(M, t().shadows);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = Pr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ shadows: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ shadows: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().shadows), e.set_value(T, t().shadows);
+      }), e.append(l, c);
     }
   });
-  var z = e.sibling(x, 2);
-  F(z, {
+  var I = e.sibling(S, 2);
+  F(I, {
     label: "Highlights",
     onReset: () => a({ highlights: ee.highlights }),
-    children: (d, m) => {
-      var i = Mr(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ highlights: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ highlights: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().highlights), e.set_value(M, t().highlights);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = Cr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ highlights: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ highlights: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().highlights), e.set_value(T, t().highlights);
+      }), e.append(l, c);
     }
-  }), e.reset(T), e.reset(p);
-  var _ = e.sibling(p, 2), k = e.sibling(e.child(_), 2), P = e.child(k);
-  F(P, {
+  }), e.reset(x), e.reset(f);
+  var P = e.sibling(f, 2), u = e.sibling(e.child(P), 2), g = e.child(u);
+  F(g, {
     label: "Vibrance",
     onReset: () => a({ vibrance: ee.vibrance }),
-    children: (d, m) => {
-      var i = Tr(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ vibrance: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ vibrance: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().vibrance), e.set_value(M, t().vibrance);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = jr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ vibrance: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ vibrance: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().vibrance), e.set_value(T, t().vibrance);
+      }), e.append(l, c);
     }
   });
-  var S = e.sibling(P, 2);
-  F(S, {
+  var C = e.sibling(g, 2);
+  F(C, {
     label: "Temperature",
     onReset: () => a({ temperature: ee.temperature }),
-    children: (d, m) => {
-      var i = Sr(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ temperature: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ temperature: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().temperature), e.set_value(M, t().temperature);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = Nr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ temperature: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ temperature: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().temperature), e.set_value(T, t().temperature);
+      }), e.append(l, c);
     }
   });
-  var b = e.sibling(S, 2);
-  F(b, {
+  var M = e.sibling(C, 2);
+  F(M, {
     label: "Tint",
     onReset: () => a({ tint: ee.tint }),
-    children: (d, m) => {
-      var i = Ir(), c = e.first_child(i);
-      e.remove_input_defaults(c), c.__input = (I) => a({ tint: Number(I.currentTarget.value) });
-      var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (I) => a({ tint: Number(I.currentTarget.value) }), e.template_effect(() => {
-        e.set_value(c, t().tint), e.set_value(M, t().tint);
-      }), e.append(d, i);
+    children: (l, d) => {
+      var c = Rr(), b = e.first_child(c);
+      e.remove_input_defaults(b), b.__input = (m) => a({ tint: Number(m.currentTarget.value) });
+      var T = e.sibling(b, 2);
+      e.remove_input_defaults(T), T.__input = (m) => a({ tint: Number(m.currentTarget.value) }), e.template_effect(() => {
+        e.set_value(b, t().tint), e.set_value(T, t().tint);
+      }), e.append(l, c);
     }
-  }), e.reset(k), e.reset(_), e.reset(s), e.reset(n), e.append(o, n), e.pop();
+  }), e.reset(u), e.reset(P), e.reset(o), e.reset(r), e.append(s, r), e.pop();
 }
 e.delegate(["input"]);
-var Nr = e.from_html('<div class="layer-name-section svelte-et76o3"><label class="form-label svelte-et76o3">Layer Name (for overrides)</label> <input type="text" class="form-input svelte-et76o3" placeholder="e.g., front, back, logo"/> <p class="form-hint svelte-et76o3">Use this name as the key when overriding images in the renderer</p></div>'), Rr = e.from_html('<div class="layer-controls svelte-et76o3"><div class="layer-header svelte-et76o3"><button class="visibility-toggle svelte-et76o3"><!></button> <span class="layer-preview svelte-et76o3"><img alt="Layer preview" class="svelte-et76o3"/></span> <button class="delete-btn svelte-et76o3" aria-label="Delete layer"><!></button></div> <!> <div class="sections svelte-et76o3"><!> <!> <!> <!></div></div>');
-const jr = {
+var Yr = e.from_html('<input type="checkbox"/>'), Er = e.from_html('<input type="range" step="0.5" min="0" max="20" class="svelte-24jznc"/> <input type="number" class="manual-input svelte-24jznc" step="0.5" min="0" max="20"/>', 1), Lr = e.from_html('<input type="color" class="color-input svelte-24jznc"/> <input type="text" class="color-text-input svelte-24jznc" placeholder="#000000"/>', 1), Or = e.from_html('<input type="color" class="color-input svelte-24jznc"/> <input type="text" class="color-text-input svelte-24jznc" placeholder="Leave empty to keep original"/>', 1), Zr = e.from_html("<!> <!> <!>", 1), Br = e.from_html('<details class="section svelte-24jznc" open=""><summary class="section-title svelte-24jznc">SVG Editing</summary> <div class="section-content svelte-24jznc"><!> <!></div></details>');
+const qr = {
+  hash: "svelte-24jznc",
+  code: `.section.svelte-24jznc {border-top:1px solid var(--color-border, #ccc);border-bottom:1px solid var(--color-border, #ccc);background:var(--color-surface, #fff);min-width:0;}.section-title.svelte-24jznc {padding:0.75rem 0;font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid var(--color-border, #eee);}.section-title.svelte-24jznc::-webkit-details-marker {display:none;}.section-title.svelte-24jznc::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.section[open].svelte-24jznc > .section-title:where(.svelte-24jznc)::before {transform:rotate(90deg);}.section-content.svelte-24jznc {padding:0.75rem 0;display:flex;flex-direction:column;gap:0.75rem;}.manual-input.svelte-24jznc {width:60px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}input[type="range"].svelte-24jznc {flex:1;min-width:0;max-width:100%;}.color-input.svelte-24jznc {width:50px;height:32px;padding:2px;border:1px solid var(--color-border, #ccc);border-radius:4px;cursor:pointer;}.color-text-input.svelte-24jznc {flex:1;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;font-family:monospace;}`
+};
+function Ur(s, n) {
+  e.push(n, !0), e.append_styles(s, qr);
+  const t = e.derived(() => n.effect ?? { ...Pe });
+  function a(p) {
+    const v = { ...e.get(t), ...p, type: "svg" };
+    n.onChange(v);
+  }
+  function r() {
+    n.effect ? n.onChange(void 0) : n.onChange({ ...Pe });
+  }
+  var o = Br(), i = e.sibling(e.child(o), 2), h = e.child(i);
+  F(h, {
+    label: "Enabled",
+    children: (p, v) => {
+      var f = Yr();
+      e.remove_input_defaults(f), f.__change = r, e.template_effect(() => e.set_checked(f, n.effect !== void 0)), e.append(p, f);
+    }
+  });
+  var _ = e.sibling(h, 2);
+  {
+    var k = (p) => {
+      var v = Zr(), f = e.first_child(v);
+      F(f, {
+        label: "Stroke Width",
+        onReset: () => a({ strokeWidth: Pe.strokeWidth }),
+        children: (w, S) => {
+          var I = Er(), P = e.first_child(I);
+          e.remove_input_defaults(P), P.__input = (g) => a({ strokeWidth: Number(g.currentTarget.value) });
+          var u = e.sibling(P, 2);
+          e.remove_input_defaults(u), u.__input = (g) => a({ strokeWidth: Number(g.currentTarget.value) }), e.template_effect(() => {
+            e.set_value(P, e.get(t).strokeWidth ?? 0), e.set_value(u, e.get(t).strokeWidth ?? 0);
+          }), e.append(w, I);
+        }
+      });
+      var x = e.sibling(f, 2);
+      F(x, {
+        label: "Stroke Color",
+        onReset: () => a({ strokeColor: Pe.strokeColor }),
+        children: (w, S) => {
+          var I = Lr(), P = e.first_child(I);
+          e.remove_input_defaults(P), P.__input = (g) => a({ strokeColor: g.currentTarget.value });
+          var u = e.sibling(P, 2);
+          e.remove_input_defaults(u), u.__input = (g) => a({ strokeColor: g.currentTarget.value }), e.template_effect(() => {
+            e.set_value(P, e.get(t).strokeColor || "#000000"), e.set_value(u, e.get(t).strokeColor || "#000000");
+          }), e.append(w, I);
+        }
+      });
+      var y = e.sibling(x, 2);
+      F(y, {
+        label: "Fill Color",
+        onReset: () => a({ fillColor: void 0 }),
+        children: (w, S) => {
+          var I = Or(), P = e.first_child(I);
+          e.remove_input_defaults(P), P.__input = (g) => a({ fillColor: g.currentTarget.value || void 0 });
+          var u = e.sibling(P, 2);
+          e.remove_input_defaults(u), u.__input = (g) => a({ fillColor: g.currentTarget.value || void 0 }), e.template_effect(() => {
+            e.set_value(P, e.get(t).fillColor || "#000000"), e.set_value(u, e.get(t).fillColor || "");
+          }), e.append(w, I);
+        }
+      }), e.append(p, v);
+    };
+    e.if(_, (p) => {
+      n.effect !== void 0 && p(k);
+    });
+  }
+  e.reset(i), e.reset(o), e.append(s, o), e.pop();
+}
+e.delegate(["change", "input"]);
+var Vr = e.from_html('<div class="layer-name-section svelte-et76o3"><label class="form-label svelte-et76o3">Layer Name (for overrides)</label> <input type="text" class="form-input svelte-et76o3" placeholder="e.g., front, back, logo"/> <p class="form-hint svelte-et76o3">Use this name as the key when overriding images in the renderer</p></div>'), Ar = e.from_html('<div class="layer-controls svelte-et76o3"><div class="layer-header svelte-et76o3"><button class="visibility-toggle svelte-et76o3"><!></button> <span class="layer-preview svelte-et76o3"><img alt="Layer preview" class="svelte-et76o3"/></span> <button class="delete-btn svelte-et76o3" aria-label="Delete layer"><!></button></div> <!> <div class="sections svelte-et76o3"><!> <!> <!> <!> <!></div></div>');
+const Fr = {
   hash: "svelte-et76o3",
   code: ".layer-controls.svelte-et76o3 {border-radius:4px;padding-top:0.75rem;padding-bottom:0.75rem;margin-bottom:0.5rem;background:var(--color-surface, #fff);}.layer-header.svelte-et76o3 {display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;padding-bottom:0.75rem;border-bottom:1px solid var(--color-border, #eee);}.visibility-toggle.svelte-et76o3 {background:none;border:none;cursor:pointer;padding:0.25rem;display:flex;align-items:center;justify-content:center;color:var(--color-text, #000);}.layer-preview.svelte-et76o3 {flex:1;display:flex;align-items:center;justify-content:center;height:40px;overflow:hidden;border-radius:4px;background:#f5f5f5;}.layer-preview.svelte-et76o3 img:where(.svelte-et76o3) {max-width:100%;max-height:100%;object-fit:contain;}.delete-btn.svelte-et76o3 {background:#ef4444;color:white;border:none;border-radius:4px;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}.delete-btn.svelte-et76o3:hover {background:#dc2626;}.layer-name-section.svelte-et76o3 {padding:0 0.75rem;margin-bottom:0.75rem;}.layer-name-section.svelte-et76o3 .form-label:where(.svelte-et76o3) {display:block;font-size:0.75rem;font-weight:500;color:var(--color-text-muted, #666);margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.5px;}.layer-name-section.svelte-et76o3 .form-input:where(.svelte-et76o3) {width:100%;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;font-family:inherit;}.layer-name-section.svelte-et76o3 .form-input:where(.svelte-et76o3):focus {outline:none;border-color:var(--color-primary, #3b82f6);}.form-hint.svelte-et76o3 {font-size:0.75rem;color:var(--color-text-muted, #666);margin:0.25rem 0 0 0;}.sections.svelte-et76o3 {display:flex;flex-direction:column;gap:0;overflow:hidden;min-width:0;}"
 };
-function Wr(o, r) {
-  e.push(r, !0), e.append_styles(o, jr);
-  const t = e.derived(() => r.layer.effects.find((c) => c.type === "resize") ?? fe), a = e.derived(() => r.layer.effects.find((c) => c.type === "restyle") ?? ee), n = e.derived(() => r.layer.effects.find((i) => i.type === "warp"));
-  function s(i) {
-    const c = r.layer.effects.filter((M) => M.type !== "resize");
-    r.onEffectsChange([...c, i]);
-  }
-  function l(i) {
-    const c = r.layer.effects.filter((M) => M.type !== "restyle");
-    r.onEffectsChange([...c, i]);
-  }
-  function f(i) {
-    const c = r.layer.effects.filter((M) => M.type !== "warp");
-    i ? r.onEffectsChange([...c, i]) : r.onEffectsChange(c);
-  }
-  var h = Rr(), w = e.child(h), u = e.child(w);
-  u.__click = () => r.onVisibilityChange(!r.layer.visible);
-  var g = e.child(u);
+function Hr(s, n) {
+  e.push(n, !0), e.append_styles(s, Fr);
+  const t = e.derived(() => n.layer.effects.find((N) => N.type === "resize") ?? ve), a = e.derived(() => n.layer.effects.find((N) => N.type === "restyle") ?? ee), r = e.derived(() => n.layer.effects.find((z) => z.type === "warp")), o = e.derived(() => n.layer.effects.find((z) => z.type === "svg"));
+  let i = e.state(null);
+  e.user_effect(() => {
+    e.set(i, null), st(n.layer.src).then((z) => {
+      e.set(i, z, !0);
+    }).catch(() => {
+      e.set(i, !1);
+    });
+  });
+  function h(z) {
+    const N = n.layer.effects.filter((L) => L.type !== "resize");
+    n.onEffectsChange([...N, z]);
+  }
+  function _(z) {
+    const N = n.layer.effects.filter((L) => L.type !== "restyle");
+    n.onEffectsChange([...N, z]);
+  }
+  function k(z) {
+    const N = n.layer.effects.filter((L) => L.type !== "warp");
+    z ? n.onEffectsChange([...N, z]) : n.onEffectsChange(N);
+  }
+  function p(z) {
+    const N = n.layer.effects.filter((L) => L.type !== "svg");
+    z ? n.onEffectsChange([...N, z]) : n.onEffectsChange(N);
+  }
+  var v = Ar(), f = e.child(v), x = e.child(f);
+  x.__click = () => n.onVisibilityChange(!n.layer.visible);
+  var y = e.child(x);
   {
-    var p = (i) => {
-      pn(i, {});
-    }, T = (i) => {
-      fn(i, {});
+    var w = (z) => {
+      _n(z, {});
+    }, S = (z) => {
+      wn(z, {});
     };
-    e.if(g, (i) => {
-      r.layer.visible ? i(p) : i(T, !1);
+    e.if(y, (z) => {
+      n.layer.visible ? z(w) : z(S, !1);
     });
   }
-  e.reset(u);
-  var v = e.sibling(u, 2), y = e.child(v);
-  e.reset(v);
-  var x = e.sibling(v, 2);
-  x.__click = function(...i) {
-    r.onDelete?.apply(this, i);
+  e.reset(x);
+  var I = e.sibling(x, 2), P = e.child(I);
+  e.reset(I);
+  var u = e.sibling(I, 2);
+  u.__click = function(...z) {
+    n.onDelete?.apply(this, z);
   };
-  var z = e.child(x);
-  Ae(z, {}), e.reset(x), e.reset(w);
-  var _ = e.sibling(w, 2);
+  var g = e.child(u);
+  Fe(g, {}), e.reset(u), e.reset(f);
+  var C = e.sibling(f, 2);
   {
-    var k = (i) => {
-      var c = Nr(), M = e.child(c), I = e.sibling(M, 2);
-      e.remove_input_defaults(I), I.__input = (X) => r.onNameChange(X.currentTarget.value), e.next(2), e.reset(c), e.template_effect(() => {
-        e.set_attribute(M, "for", `layer-name-${r.layer.id ?? ""}`), e.set_attribute(I, "id", `layer-name-${r.layer.id ?? ""}`), e.set_value(I, r.layer.name || "");
-      }), e.append(i, c);
+    var M = (z) => {
+      var N = Vr(), L = e.child(N), W = e.sibling(L, 2);
+      e.remove_input_defaults(W), W.__input = (E) => n.onNameChange(E.currentTarget.value), e.next(2), e.reset(N), e.template_effect(() => {
+        e.set_attribute(L, "for", `layer-name-${n.layer.id ?? ""}`), e.set_attribute(W, "id", `layer-name-${n.layer.id ?? ""}`), e.set_value(W, n.layer.name || "");
+      }), e.append(z, N);
+    };
+    e.if(C, (z) => {
+      n.onNameChange && z(M);
+    });
+  }
+  var l = e.sibling(C, 2), d = e.child(l);
+  {
+    var c = (z) => {
+      Ur(z, {
+        get effect() {
+          return e.get(o);
+        },
+        onChange: p
+      });
     };
-    e.if(_, (i) => {
-      r.onNameChange && i(k);
+    e.if(d, (z) => {
+      e.get(i) === !0 && z(c);
     });
   }
-  var P = e.sibling(_, 2), S = e.child(P);
-  Xn(S, {
+  var b = e.sibling(d, 2);
+  qn(b, {
     get effect() {
       return e.get(t);
     },
-    onChange: s
+    onChange: h
   });
-  var b = e.sibling(S, 2);
-  Cr(b, {
+  var T = e.sibling(b, 2);
+  Xr(T, {
     get effect() {
       return e.get(a);
     },
-    onChange: l
+    onChange: _
   });
-  var d = e.sibling(b, 2);
-  zn(d, {
+  var m = e.sibling(T, 2);
+  Wn(m, {
     get transform() {
-      return r.layer.transform;
+      return n.layer.transform;
     },
     get opacity() {
-      return r.layer.opacity;
+      return n.layer.opacity;
     },
     get canvasWidth() {
-      return r.canvasWidth;
+      return n.canvasWidth;
     },
     get canvasHeight() {
-      return r.canvasHeight;
+      return n.canvasHeight;
     },
     get onTransformChange() {
-      return r.onTransformChange;
+      return n.onTransformChange;
     },
     get onOpacityChange() {
-      return r.onOpacityChange;
+      return n.onOpacityChange;
     },
     get layerId() {
-      return r.layer.id;
+      return n.layer.id;
     }
   });
-  var m = e.sibling(d, 2);
-  hr(m, {
+  var R = e.sibling(m, 2);
+  xr(R, {
     get effect() {
-      return e.get(n);
+      return e.get(r);
     },
-    onChange: f
-  }), e.reset(P), e.reset(h), e.template_effect(() => {
-    e.set_attribute(u, "aria-label", r.layer.visible ? "Hide layer" : "Show layer"), e.set_attribute(y, "src", r.layer.src);
-  }), e.append(o, h), e.pop();
+    onChange: k
+  }), e.reset(l), e.reset(v), e.template_effect(() => {
+    e.set_attribute(x, "aria-label", n.layer.visible ? "Hide layer" : "Show layer"), e.set_attribute(P, "src", n.layer.src);
+  }), e.append(s, v), e.pop();
 }
 e.delegate(["click", "input"]);
-var Yr = e.from_html('<button type="button" class="modal-backdrop svelte-ta60gp" aria-label="Close modal"></button> <div><!></div>', 1);
-const Dr = {
+var Kr = e.from_html('<button type="button" class="modal-backdrop svelte-ta60gp" aria-label="Close modal"></button> <div><!></div>', 1);
+const Jr = {
   hash: "svelte-ta60gp",
   code: ".modal-backdrop.svelte-ta60gp {position:fixed;inset:0;z-index:10000;background:var(--color-overlay-darker);backdrop-filter:blur(4px);border:none;padding:0;margin:0;cursor:pointer;border-radius:unset;}.modal-backdrop.svelte-ta60gp:hover {background:var(--color-overlay-darker) !important;}.modal-content.svelte-ta60gp {position:fixed;top:0;left:0;right:0;height:100dvh;z-index:10001;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}.modal-content.ios-safari.svelte-ta60gp {height:100dvh;overflow-y:auto;}.modal-content.svelte-ta60gp > * {pointer-events:auto;margin:0 auto;}"
 };
-function Xr(o, r) {
-  e.push(r, !0), e.append_styles(o, Dr);
+function Gr(s, n) {
+  e.push(n, !0), e.append_styles(s, Jr);
   let t = !1, a = !1;
-  const n = zt && /iPhone|iPad|iPod/.test(navigator.userAgent) && !("MSStream" in window);
-  function s(T) {
-    T.key === "Escape" && (T.preventDefault(), f());
+  const r = Ct && /iPhone|iPad|iPod/.test(navigator.userAgent) && !("MSStream" in window);
+  function o(x) {
+    x.key === "Escape" && (x.preventDefault(), h());
   }
-  function l() {
-    t && (t = !1, r.onclose());
+  function i() {
+    t && (t = !1, n.onclose());
   }
-  function f() {
-    t && (t = !1, history.back()), r.onclose();
+  function h() {
+    t && (t = !1, history.back()), n.onclose();
   }
-  St(() => {
+  It(() => {
     a = !0;
-  }), Te(() => (n || (document.documentElement.style.overflow = "hidden", document.body.style.overflow = "hidden"), It("", { modal: !0 }), t = !0, () => {
-    n || (document.documentElement.style.overflow = "", document.body.style.overflow = ""), t && !a && history.back();
+  }), Te(() => (r || (document.documentElement.style.overflow = "hidden", document.body.style.overflow = "hidden"), Pt("", { modal: !0 }), t = !0, () => {
+    r || (document.documentElement.style.overflow = "", document.body.style.overflow = ""), t && !a && history.back();
   }));
-  var h = Yr();
-  e.event("keydown", e.window, s), e.event("popstate", e.window, l);
-  var w = e.first_child(h);
-  w.__click = f;
-  var u = e.sibling(w, 2);
-  let g;
-  var p = e.child(u);
-  e.snippet(p, () => r.children), e.reset(u), e.template_effect(() => g = e.set_class(u, 1, "modal-content svelte-ta60gp", null, g, { "ios-safari": n })), e.transition(7, w, () => $e, () => ({ duration: 100 })), e.transition(7, u, () => $e, () => ({ duration: 100 })), e.append(o, h), e.pop();
+  var _ = Kr();
+  e.event("keydown", e.window, o), e.event("popstate", e.window, i);
+  var k = e.first_child(_);
+  k.__click = h;
+  var p = e.sibling(k, 2);
+  let v;
+  var f = e.child(p);
+  e.snippet(f, () => n.children), e.reset(p), e.template_effect(() => v = e.set_class(p, 1, "modal-content svelte-ta60gp", null, v, { "ios-safari": r })), e.transition(7, k, () => Qe, () => ({ duration: 100 })), e.transition(7, p, () => Qe, () => ({ duration: 100 })), e.append(s, _), e.pop();
 }
 e.delegate(["click"]);
-var Zr = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 5v14M5 12h14"></path></svg>');
-function Me(o, r) {
-  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
-  var n = Zr();
+var $r = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 5v14M5 12h14"></path></svg>');
+function Me(s, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = $r();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
-  }), e.append(o, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(s, r);
 }
-const Ce = "product-mockups", it = "product-mockups-current";
-function Br(o, r = Ce) {
+const je = "product-mockups", ct = "product-mockups-current";
+function Qr(s, n = je) {
   try {
-    const t = Ne(), a = t.findIndex((n) => n.id === o.id);
-    return a >= 0 ? t[a] = { ...o, updatedAt: Date.now() } : t.push({ ...o, updatedAt: Date.now() }), localStorage.setItem(r, JSON.stringify(t)), !0;
+    const t = Ne(), a = t.findIndex((r) => r.id === s.id);
+    return a >= 0 ? t[a] = { ...s, updatedAt: Date.now() } : t.push({ ...s, updatedAt: Date.now() }), localStorage.setItem(n, JSON.stringify(t)), !0;
   } catch (t) {
     return console.error("Failed to save mockup:", t), !1;
   }
 }
-function Ne(o = Ce) {
+function Ne(s = je) {
   try {
-    const r = localStorage.getItem(o);
-    return r ? JSON.parse(r).map((a) => {
-      const n = a.composition ?? a.canvas ?? { ...ot };
+    const n = localStorage.getItem(s);
+    return n ? JSON.parse(n).map((a) => {
+      const r = a.composition ?? a.canvas ?? { ...lt };
       return {
         ...a,
-        view: a.view ?? { ...Pe },
+        view: a.view ?? { ...Ce },
         composition: {
-          ...n,
-          effects: n.effects ?? [],
-          layers: n.layers?.map((s) => ({
-            ...s,
-            effects: s.effects ?? []
+          ...r,
+          effects: r.effects ?? [],
+          layers: r.layers?.map((o) => ({
+            ...o,
+            effects: o.effects ?? []
           })) ?? []
         }
       };
     }) : [];
-  } catch (r) {
-    return console.error("Failed to load mockups:", r), [];
+  } catch (n) {
+    return console.error("Failed to load mockups:", n), [];
   }
 }
-function Lr(o, r = Ce) {
-  return Ne(r).find((a) => a.id === o) ?? null;
+function ea(s, n = je) {
+  return Ne(n).find((a) => a.id === s) ?? null;
 }
-function qr(o, r = Ce) {
+function ta(s, n = je) {
   try {
-    const a = Ne(r).filter((n) => n.id !== o);
-    return localStorage.setItem(r, JSON.stringify(a)), !0;
+    const a = Ne(n).filter((r) => r.id !== s);
+    return localStorage.setItem(n, JSON.stringify(a)), !0;
   } catch (t) {
     return console.error("Failed to delete mockup:", t), !1;
   }
 }
-function Ee(o, r = it) {
+function qe(s, n = ct) {
   try {
-    o ? localStorage.setItem(r, o) : localStorage.removeItem(r);
+    s ? localStorage.setItem(n, s) : localStorage.removeItem(n);
   } catch (t) {
     console.error("Failed to save current mockup ID:", t);
   }
 }
-function Er(o = it) {
+function na(s = ct) {
   try {
-    return localStorage.getItem(o);
+    return localStorage.getItem(s);
   } catch {
     return null;
   }
 }
-function nt(o = "Untitled Mockup") {
+function rt(s = "Untitled Mockup") {
   return {
     id: crypto.randomUUID(),
-    name: o,
-    composition: { ...ot },
-    view: { ...Pe },
+    name: s,
+    composition: { ...lt },
+    view: { ...Ce },
     createdAt: Date.now(),
     updatedAt: Date.now()
   };
 }
-var Or = e.from_html('<div class="empty-state svelte-33nadc"><p class="svelte-33nadc">No mockups yet. Create your first mockup to get started!</p> <button class="new-mockup-btn primary svelte-33nadc" type="button"><!> Create Mockup</button></div>'), Vr = e.from_html('<div role="button" tabindex="0"><div class="mockup-card-header svelte-33nadc"><h3 class="mockup-card-title svelte-33nadc"> </h3> <div class="mockup-card-actions svelte-33nadc"><button class="copy-btn svelte-33nadc" type="button" aria-label="Copy config">Copy Config</button> <button class="delete-btn svelte-33nadc" type="button" aria-label="Delete mockup"><!></button></div></div> <div class="mockup-card-info svelte-33nadc"><div class="mockup-card-stat svelte-33nadc"><span class="stat-label svelte-33nadc">Layers:</span> <span class="stat-value svelte-33nadc"> </span></div> <div class="mockup-card-stat svelte-33nadc"><span class="stat-label svelte-33nadc">Size:</span> <span class="stat-value svelte-33nadc"> </span></div></div> <div class="mockup-card-footer svelte-33nadc"><div class="mockup-card-date svelte-33nadc"><span class="date-label svelte-33nadc">Updated:</span> <span class="date-value svelte-33nadc"> </span></div></div></div>'), Ur = e.from_html('<div class="mockup-grid svelte-33nadc"></div>'), Ar = e.from_html('<div class="mockup-list-container svelte-33nadc"><div class="mockup-list-header svelte-33nadc"><h2 class="svelte-33nadc">All Mockups</h2> <button class="new-mockup-btn svelte-33nadc" type="button"><!> New Mockup</button></div> <!></div>');
-const Hr = {
+var ra = e.from_html('<div class="empty-state svelte-33nadc"><p class="svelte-33nadc">No mockups yet. Create your first mockup to get started!</p> <button class="new-mockup-btn primary svelte-33nadc" type="button"><!> Create Mockup</button></div>'), aa = e.from_html('<div role="button" tabindex="0"><div class="mockup-card-header svelte-33nadc"><h3 class="mockup-card-title svelte-33nadc"> </h3> <div class="mockup-card-actions svelte-33nadc"><button class="copy-btn svelte-33nadc" type="button" aria-label="Copy config">Copy Config</button> <button class="delete-btn svelte-33nadc" type="button" aria-label="Delete mockup"><!></button></div></div> <div class="mockup-card-info svelte-33nadc"><div class="mockup-card-stat svelte-33nadc"><span class="stat-label svelte-33nadc">Layers:</span> <span class="stat-value svelte-33nadc"> </span></div> <div class="mockup-card-stat svelte-33nadc"><span class="stat-label svelte-33nadc">Size:</span> <span class="stat-value svelte-33nadc"> </span></div></div> <div class="mockup-card-footer svelte-33nadc"><div class="mockup-card-date svelte-33nadc"><span class="date-label svelte-33nadc">Updated:</span> <span class="date-value svelte-33nadc"> </span></div></div></div>'), sa = e.from_html('<div class="mockup-grid svelte-33nadc"></div>'), oa = e.from_html('<div class="mockup-list-container svelte-33nadc"><div class="mockup-list-header svelte-33nadc"><h2 class="svelte-33nadc">All Mockups</h2> <button class="new-mockup-btn svelte-33nadc" type="button"><!> New Mockup</button></div> <!></div>');
+const ia = {
   hash: "svelte-33nadc",
   code: ".mockup-list-container.svelte-33nadc {background:var(--color-surface, #fff);border-radius:8px;padding:2rem;max-width:900px;width:100%;margin:2rem auto;max-height:calc(100dvh - 4rem);overflow-y:auto;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2);}.mockup-list-header.svelte-33nadc {display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;gap:1rem;}.mockup-list-header.svelte-33nadc h2:where(.svelte-33nadc) {font-size:1.5rem;font-weight:600;color:var(--color-text, #111);margin:0;}.new-mockup-btn.svelte-33nadc {display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--color-primary, #3b82f6);color:white;border:none;border-radius:6px;cursor:pointer;font-size:0.875rem;font-weight:500;transition:background 200ms;}.new-mockup-btn.svelte-33nadc:hover {background:var(--color-primary-dark, #2563eb);}.new-mockup-btn.primary.svelte-33nadc {margin-top:1rem;}.empty-state.svelte-33nadc {text-align:center;padding:4rem 2rem;color:var(--color-text-muted, #666);}.empty-state.svelte-33nadc p:where(.svelte-33nadc) {font-size:1rem;margin-bottom:1.5rem;}.mockup-grid.svelte-33nadc {display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:1rem;}.mockup-card.svelte-33nadc {background:var(--color-surface-alt, #f5f5f5);border:2px solid var(--color-border, #ccc);border-radius:8px;padding:1rem;cursor:pointer;transition:all 200ms;display:flex;flex-direction:column;gap:0.75rem;}.mockup-card.svelte-33nadc:hover {border-color:var(--color-primary, #3b82f6);background:var(--color-surface, #fff);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);}.mockup-card.current.svelte-33nadc {border-color:var(--color-primary, #3b82f6);background:var(--color-primary-light, #eff6ff);}.mockup-card-header.svelte-33nadc {display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;}.mockup-card-title.svelte-33nadc {font-size:1rem;font-weight:600;color:var(--color-text, #111);margin:0;flex:1;word-break:break-word;}.mockup-card-actions.svelte-33nadc {display:flex;align-items:center;gap:0.5rem;flex-shrink:0;}.copy-btn.svelte-33nadc {background:transparent;border:1px solid var(--color-primary, #3b82f6);color:var(--color-primary, #3b82f6);cursor:pointer;padding:0.25rem 0.5rem;border-radius:4px;font-size:0.75rem;transition:all 200ms;display:flex;align-items:center;justify-content:center;}.copy-btn.svelte-33nadc:hover {background:var(--color-primary, #3b82f6);color:white;}.delete-btn.svelte-33nadc {background:transparent;border:none;color:var(--color-text-muted, #666);cursor:pointer;padding:0.25rem;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all 200ms;flex-shrink:0;}.delete-btn.svelte-33nadc:hover {background:#ef4444;color:white;}.mockup-card-info.svelte-33nadc {display:flex;gap:1rem;font-size:0.875rem;}.mockup-card-stat.svelte-33nadc {display:flex;flex-direction:column;gap:0.25rem;}.stat-label.svelte-33nadc {color:var(--color-text-muted, #666);font-size:0.75rem;text-transform:uppercase;}.stat-value.svelte-33nadc {color:var(--color-text, #111);font-weight:500;}.mockup-card-footer.svelte-33nadc {margin-top:auto;padding-top:0.75rem;border-top:1px solid var(--color-border, #ccc);}.mockup-card-date.svelte-33nadc {display:flex;flex-direction:column;gap:0.25rem;font-size:0.75rem;}.date-label.svelte-33nadc {color:var(--color-text-muted, #666);text-transform:uppercase;}.date-value.svelte-33nadc {color:var(--color-text, #111);}"
 };
-function Fr(o, r) {
-  e.push(r, !0), e.append_styles(o, Hr);
-  let t = e.prop(r, "storageKey", 3, "product-mockups"), a = e.state(e.proxy([]));
-  function n() {
+function la(s, n) {
+  e.push(n, !0), e.append_styles(s, ia);
+  let t = e.prop(n, "storageKey", 3, "product-mockups"), a = e.state(e.proxy([]));
+  function r() {
     e.set(a, Ne(t()), !0);
   }
   Te(() => {
-    n();
+    r();
   });
-  function s(u) {
-    r.onSelect(u), r.onclose();
+  function o(p) {
+    n.onSelect(p), n.onclose();
   }
-  function l() {
-    r.onNew(), r.onclose();
+  function i() {
+    n.onNew(), n.onclose();
   }
-  function f(u, g) {
-    u.stopPropagation(), confirm("Are you sure you want to delete this mockup?") && (qr(g, t()), n());
+  function h(p, v) {
+    p.stopPropagation(), confirm("Are you sure you want to delete this mockup?") && (ta(v, t()), r());
   }
-  async function h(u, g) {
-    u.stopPropagation();
+  async function _(p, v) {
+    p.stopPropagation();
     try {
-      const p = JSON.stringify(g, null, 2);
-      await navigator.clipboard.writeText(p);
-    } catch (p) {
-      console.error("Failed to copy config:", p);
+      const f = JSON.stringify(v, null, 2);
+      await navigator.clipboard.writeText(f);
+    } catch (f) {
+      console.error("Failed to copy config:", f);
     }
   }
-  function w(u) {
-    const g = new Date(u);
-    return g.toLocaleDateString() + " " + g.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  function k(p) {
+    const v = new Date(p);
+    return v.toLocaleDateString() + " " + v.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   }
-  Xr(o, {
+  Gr(s, {
     get onclose() {
-      return r.onclose;
+      return n.onclose;
     },
-    children: (u, g) => {
-      var p = Ar(), T = e.child(p), v = e.sibling(e.child(T), 2);
-      v.__click = l;
-      var y = e.child(v);
-      Me(y, {}), e.next(), e.reset(v), e.reset(T);
-      var x = e.sibling(T, 2);
+    children: (p, v) => {
+      var f = oa(), x = e.child(f), y = e.sibling(e.child(x), 2);
+      y.__click = i;
+      var w = e.child(y);
+      Me(w, {}), e.next(), e.reset(y), e.reset(x);
+      var S = e.sibling(x, 2);
       {
-        var z = (k) => {
-          var P = Or(), S = e.sibling(e.child(P), 2);
-          S.__click = l;
-          var b = e.child(S);
-          Me(b, {}), e.next(), e.reset(S), e.reset(P), e.append(k, P);
-        }, _ = (k) => {
-          var P = Ur();
-          e.each(P, 21, () => e.get(a), (S) => S.id, (S, b) => {
-            var d = Vr();
-            let m;
-            d.__click = () => s(e.get(b)), d.__keydown = (W) => W.key === "Enter" && s(e.get(b));
-            var i = e.child(d), c = e.child(i), M = e.child(c, !0);
-            e.reset(c);
-            var I = e.sibling(c, 2), X = e.child(I);
-            X.__click = (W) => h(W, e.get(b));
-            var J = e.sibling(X, 2);
-            J.__click = (W) => f(W, e.get(b).id);
-            var B = e.child(J);
-            Ae(B, {}), e.reset(J), e.reset(I), e.reset(i);
-            var A = e.sibling(i, 2), j = e.child(A), Z = e.sibling(e.child(j), 2), L = e.child(Z, !0);
-            e.reset(Z), e.reset(j);
-            var E = e.sibling(j, 2), q = e.sibling(e.child(E), 2), K = e.child(q);
-            e.reset(q), e.reset(E), e.reset(A);
-            var V = e.sibling(A, 2), G = e.child(V), Y = e.sibling(e.child(G), 2), D = e.child(Y, !0);
-            e.reset(Y), e.reset(G), e.reset(V), e.reset(d), e.template_effect(
-              (W) => {
-                m = e.set_class(d, 1, "mockup-card svelte-33nadc", null, m, { current: e.get(b).id === r.currentMockupId }), e.set_text(M, e.get(b).name), e.set_text(L, e.get(b).composition.layers.length), e.set_text(K, `${e.get(b).composition.width ?? ""} × ${e.get(b).composition.height ?? ""}`), e.set_text(D, W);
+        var I = (u) => {
+          var g = ra(), C = e.sibling(e.child(g), 2);
+          C.__click = i;
+          var M = e.child(C);
+          Me(M, {}), e.next(), e.reset(C), e.reset(g), e.append(u, g);
+        }, P = (u) => {
+          var g = sa();
+          e.each(g, 21, () => e.get(a), (C) => C.id, (C, M) => {
+            var l = aa();
+            let d;
+            l.__click = () => o(e.get(M)), l.__keydown = (O) => O.key === "Enter" && o(e.get(M));
+            var c = e.child(l), b = e.child(c), T = e.child(b, !0);
+            e.reset(b);
+            var m = e.sibling(b, 2), R = e.child(m);
+            R.__click = (O) => _(O, e.get(M));
+            var z = e.sibling(R, 2);
+            z.__click = (O) => h(O, e.get(M).id);
+            var N = e.child(z);
+            Fe(N, {}), e.reset(z), e.reset(m), e.reset(c);
+            var L = e.sibling(c, 2), W = e.child(L), E = e.sibling(e.child(W), 2), Y = e.child(E, !0);
+            e.reset(E), e.reset(W);
+            var U = e.sibling(W, 2), q = e.sibling(e.child(U), 2), J = e.child(q);
+            e.reset(q), e.reset(U), e.reset(L);
+            var A = e.sibling(L, 2), G = e.child(A), Z = e.sibling(e.child(G), 2), B = e.child(Z, !0);
+            e.reset(Z), e.reset(G), e.reset(A), e.reset(l), e.template_effect(
+              (O) => {
+                d = e.set_class(l, 1, "mockup-card svelte-33nadc", null, d, { current: e.get(M).id === n.currentMockupId }), e.set_text(T, e.get(M).name), e.set_text(Y, e.get(M).composition.layers.length), e.set_text(J, `${e.get(M).composition.width ?? ""} × ${e.get(M).composition.height ?? ""}`), e.set_text(B, O);
               },
-              [() => w(e.get(b).updatedAt)]
-            ), e.append(S, d);
-          }), e.reset(P), e.append(k, P);
+              [() => k(e.get(M).updatedAt)]
+            ), e.append(C, l);
+          }), e.reset(g), e.append(u, g);
         };
-        e.if(x, (k) => {
-          e.get(a).length === 0 ? k(z) : k(_, !1);
+        e.if(S, (u) => {
+          e.get(a).length === 0 ? u(I) : u(P, !1);
         });
       }
-      e.reset(p), e.append(u, p);
+      e.reset(f), e.append(p, f);
     },
     $$slots: { default: !0 }
   }), e.pop();
 }
 e.delegate(["click", "keydown"]);
-var Kr = e.from_svg('<svg width=".4em" height="1em" viewBox="8 2 8 20" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>');
-function rt(o, r) {
-  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
-  var n = Kr();
+var ca = e.from_svg('<svg width=".4em" height="1em" viewBox="8 2 8 20" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>');
+function at(s, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = ca();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""}; ${(r.rotate && `rotate: ${r.rotate};`) ?? ""}`), e.set_attribute(n, "stroke", a());
-  }), e.append(o, n);
+    e.set_style(r, `font-size: ${t() ?? ""}; ${(n.rotate && `rotate: ${n.rotate};`) ?? ""}`), e.set_attribute(r, "stroke", a());
+  }), e.append(s, r);
 }
-const Jr = "product-mockups", Gr = "product-mockups-current";
-var $r = e.from_html('<header class="header-logos svelte-w47swm"><!></header>'), Qr = e.from_html('<div class="url-input-group svelte-w47swm"><input type="url" placeholder="https://example.com/image.jpg" class="svelte-w47swm"/> <button type="button" class="svelte-w47swm">Add</button></div>'), ea = e.from_html('<div class="no-layers svelte-w47swm">No layers yet. Add an image to get started.</div>'), ta = e.from_html('<code class="layer-key-badge svelte-w47swm"> </code>'), na = e.from_html('<div role="button" tabindex="0"><div class="layer-item-preview svelte-w47swm"><img alt="Layer preview" class="svelte-w47swm"/></div> <div class="layer-item-info svelte-w47swm"><span class="layer-item-name svelte-w47swm"> <!></span> <div class="layer-item-actions svelte-w47swm"><button class="layer-order-btn svelte-w47swm" aria-label="Move up"><!></button> <button class="layer-order-btn svelte-w47swm" aria-label="Move down"><!></button> <button class="layer-delete-btn svelte-w47swm" aria-label="Delete layer"><!></button></div></div></div>'), ra = e.from_html('<div class="layers-list svelte-w47swm"></div>'), aa = e.from_html('<div class="canvas-header svelte-w47swm"><!></div>'), sa = e.from_html('<div class="processor-container svelte-w47swm"><sidebar class="svelte-w47swm"><!> <div class="editor-items svelte-w47swm"><div class="editor-section svelte-w47swm"><div class="mockup-name-header svelte-w47swm"><div class="mockup-title-group svelte-w47swm"><h3 class="mockup-name-title svelte-w47swm">Mockup</h3></div> <div class="mockup-buttons-group svelte-w47swm"><button class="new-mockup-btn svelte-w47swm" type="button"><!> New Mockup</button> <button class="view-all-btn svelte-w47swm" type="button">View All</button></div></div> <label class="form-label svelte-w47swm">Mockup Name</label> <div class="name-input-group svelte-w47swm"><input type="text" class="form-input name-input svelte-w47swm" placeholder="Mockup name..."/> <button class="copy-config-btn svelte-w47swm" type="button">Copy Config</button></div></div> <div class="editor-section svelte-w47swm"><div class="sidebar-title-2 svelte-w47swm">Canvas Setup</div> <div class="canvas-size-controls svelte-w47swm"><div class="form-input-group svelte-w47swm"><label class="form-label svelte-w47swm">Width</label> <input type="number" class="form-input svelte-w47swm" min="100" max="5000"/></div> <div class="form-input-group svelte-w47swm"><label class="form-label svelte-w47swm">Height</label> <input type="number" class="form-input svelte-w47swm" min="100" max="5000"/></div></div></div> <div class="editor-section svelte-w47swm"><div class="layers-header svelte-w47swm"><div class="layers-title svelte-w47swm"> </div> <div class="add-layer-buttons svelte-w47swm"><button class="add-layer-btn secondary svelte-w47swm" type="button"><!> </button> <label class="add-layer-btn svelte-w47swm"><!> File <input type="file" accept="image/*" style="display: none;"/></label></div></div> <!> <!></div> <!></div></sidebar> <div class="output-canvas svelte-w47swm"><!> <!></div> <!></div>');
-const oa = {
+const da = "product-mockups", ua = "product-mockups-current";
+var pa = e.from_html('<header class="header-logos svelte-w47swm"><!></header>'), ma = e.from_html('<div class="url-input-group svelte-w47swm"><input type="url" placeholder="https://example.com/image.jpg" class="svelte-w47swm"/> <button type="button" class="svelte-w47swm">Add</button></div>'), fa = e.from_html('<div class="no-layers svelte-w47swm">No layers yet. Add an image to get started.</div>'), va = e.from_html('<code class="layer-key-badge svelte-w47swm"> </code>'), ha = e.from_html('<div role="button" tabindex="0"><div class="layer-item-preview svelte-w47swm"><img alt="Layer preview" class="svelte-w47swm"/></div> <div class="layer-item-info svelte-w47swm"><span class="layer-item-name svelte-w47swm"> <!></span> <div class="layer-item-actions svelte-w47swm"><button class="layer-order-btn svelte-w47swm" aria-label="Move up"><!></button> <button class="layer-order-btn svelte-w47swm" aria-label="Move down"><!></button> <button class="layer-delete-btn svelte-w47swm" aria-label="Delete layer"><!></button></div></div></div>'), ga = e.from_html('<div class="layers-list svelte-w47swm"></div>'), ba = e.from_html('<div class="canvas-header svelte-w47swm"><!></div>'), _a = e.from_html('<div class="processor-container svelte-w47swm"><sidebar class="svelte-w47swm"><!> <div class="editor-items svelte-w47swm"><div class="editor-section svelte-w47swm"><div class="mockup-name-header svelte-w47swm"><div class="mockup-title-group svelte-w47swm"><h3 class="mockup-name-title svelte-w47swm">Mockup</h3></div> <div class="mockup-buttons-group svelte-w47swm"><button class="new-mockup-btn svelte-w47swm" type="button"><!> New Mockup</button> <button class="view-all-btn svelte-w47swm" type="button">View All</button></div></div> <label class="form-label svelte-w47swm">Mockup Name</label> <div class="name-input-group svelte-w47swm"><input type="text" class="form-input name-input svelte-w47swm" placeholder="Mockup name..."/> <button class="copy-config-btn svelte-w47swm" type="button">Copy Config</button></div></div> <div class="editor-section svelte-w47swm"><div class="sidebar-title-2 svelte-w47swm">Canvas Setup</div> <div class="canvas-size-controls svelte-w47swm"><div class="form-input-group svelte-w47swm"><label class="form-label svelte-w47swm">Width</label> <input type="number" class="form-input svelte-w47swm" min="100" max="5000"/></div> <div class="form-input-group svelte-w47swm"><label class="form-label svelte-w47swm">Height</label> <input type="number" class="form-input svelte-w47swm" min="100" max="5000"/></div></div></div> <div class="editor-section svelte-w47swm"><div class="layers-header svelte-w47swm"><div class="layers-title svelte-w47swm"> </div> <div class="add-layer-buttons svelte-w47swm"><button class="add-layer-btn secondary svelte-w47swm" type="button"><!> </button> <label class="add-layer-btn svelte-w47swm"><!> File <input type="file" accept="image/*" style="display: none;"/></label></div></div> <!> <!></div> <!></div></sidebar> <div class="output-canvas svelte-w47swm"><!> <!></div> <!></div>');
+const ya = {
   hash: "svelte-w47swm",
   code: `.form-label.svelte-w47swm {display:block;font-size:0.75rem;font-weight:500;color:var(--color-text-muted, #666);margin-bottom:0.375rem;}.form-input.svelte-w47swm {width:100%;padding-top:0.5rem;padding-bottom:0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;margin-bottom:1rem;}.form-input-group.svelte-w47swm .form-input:where(.svelte-w47swm) {margin-bottom:0;}.form-input.svelte-w47swm:focus {outline:none;border-color:var(--color-primary, #3b82f6);}.form-input-group.svelte-w47swm {display:flex;flex-direction:column;gap:0.25rem;}.processor-container.svelte-w47swm {display:flex;height:100%;overflow:hidden;}sidebar.svelte-w47swm {min-width:360px;flex-shrink:0;background:var(--color-surface, #fff);border-right:1px solid var(--color-border, #ccc);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-left:1rem;}.header-logos.svelte-w47swm {display:flex;gap:1rem;font-size:1.5rem;padding:0.5rem;padding-right:1rem;border-bottom:1px solid var(--color-border, #ccc);align-items:center;flex-wrap:wrap;}.editor-items.svelte-w47swm {flex:1;overflow-y:auto;padding:0;padding-right:0.5rem;display:flex;flex-direction:column;}.editor-section.svelte-w47swm {border-bottom:1px solid var(--color-border, #ccc);padding:0.25rem 0 0.75rem 0;}.output-canvas.svelte-w47swm {flex:1;display:flex;min-width:0;background:var(--color-bg, #f5f5f5);overflow:hidden;position:relative;flex-shrink:0;}.canvas-header.svelte-w47swm {display:none;}.sidebar-title-2.svelte-w47swm {font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);padding:0.75rem 0 0.25rem 0;margin-bottom:0.5rem;}.layers-header.svelte-w47swm {display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:0.5rem;}.layers-title.svelte-w47swm {font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);flex:1;}.add-layer-buttons.svelte-w47swm {display:flex;gap:0.25rem;}.add-layer-btn.svelte-w47swm {padding:0.375rem 0.75rem;background:var(--color-primary, #3b82f6);color:white;border:none;border-radius:4px;cursor:pointer;font-size:0.875rem;transition:background 200ms;display:flex;align-items:center;gap:0.375rem;}.add-layer-btn.svelte-w47swm:hover {background:var(--color-primary-dark, #2563eb);}.add-layer-btn.secondary.svelte-w47swm {background:transparent;color:var(--color-text, #111);border:1px solid var(--color-border, #ccc);}.add-layer-btn.secondary.svelte-w47swm:hover {background:var(--color-bg, #f5f5f5);}.url-input-group.svelte-w47swm {display:flex;gap:0.5rem;margin-top:0.5rem;padding:0.75rem;background:var(--color-surface-alt, #f5f5f5);border-radius:4px;}.url-input-group.svelte-w47swm input:where(.svelte-w47swm) {flex:1;padding-top:0.375rem;padding-bottom:0.375rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}.url-input-group.svelte-w47swm button:where(.svelte-w47swm) {padding:0.375rem 0.75rem;background:var(--color-primary, #3b82f6);color:white;border:none;border-radius:4px;cursor:pointer;font-size:0.875rem;transition:background 200ms;}.url-input-group.svelte-w47swm button:where(.svelte-w47swm):hover {background:var(--color-primary-dark, #2563eb);}.canvas-size-controls.svelte-w47swm {display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:1rem;margin-top:0;}.form-input-group.svelte-w47swm {display:flex;flex-direction:column;}.no-layers.svelte-w47swm {padding:1rem;text-align:center;color:var(--color-text-muted, #666);font-size:0.875rem;}.layers-list.svelte-w47swm {display:flex;flex-direction:column;gap:0.5rem;}.layer-item.svelte-w47swm {display:flex;align-items:center;gap:0.5rem;padding:0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;cursor:pointer;transition:all 200ms;background:var(--color-surface, #fff);}.layer-item.svelte-w47swm:hover {border-color:var(--color-primary, #3b82f6);background:var(--color-surface-alt, #f5f5f5);}.layer-item.selected.svelte-w47swm {border-color:var(--color-primary, #3b82f6);background:var(--color-primary-light, #eff6ff);}.layer-item-preview.svelte-w47swm {width:40px;height:40px;flex-shrink:0;border-radius:4px;overflow:hidden;background:#f5f5f5;display:flex;align-items:center;justify-content:center;}.layer-item-preview.svelte-w47swm img:where(.svelte-w47swm) {width:100%;height:100%;object-fit:cover;}.layer-item-info.svelte-w47swm {flex:1;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;}.layer-item-name.svelte-w47swm {font-size:0.875rem;color:var(--color-text, #111);display:flex;flex-direction:column;gap:0.25rem;}.layer-key-badge.svelte-w47swm {font-size:0.7rem;font-family:monospace;background:var(--color-primary-light, #eff6ff);color:var(--color-primary, #3b82f6);padding:0.125rem 0.375rem;border-radius:3px;font-weight:500;}.layer-item-actions.svelte-w47swm {display:flex;gap:0.25rem;align-items:center;}.layer-order-btn.svelte-w47swm {background:transparent;border:1px solid var(--color-border, #ccc);border-radius:3px;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 200ms;color:var(--color-text, #000);padding:0;}.layer-order-btn.svelte-w47swm:hover:not(:disabled) {background:var(--color-primary, #3b82f6);border-color:var(--color-primary, #3b82f6);color:white;}.layer-order-btn.svelte-w47swm:disabled {opacity:0.3;cursor:not-allowed;}.layer-delete-btn.svelte-w47swm {background:#ef4444;color:white;border:none;border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;width:24px;height:24px;cursor:pointer;font-size:1rem;line-height:1;transition:background 200ms;}.layer-delete-btn.svelte-w47swm:hover {background:#dc2626;}.mockup-name-header.svelte-w47swm {display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;}.mockup-title-group.svelte-w47swm {display:flex;align-items:center;gap:0.5rem;}.mockup-buttons-group.svelte-w47swm {display:flex;align-items:center;gap:0.5rem;}.new-mockup-btn.svelte-w47swm {padding:0.375rem 0.75rem;background:var(--color-primary, #3b82f6);color:white;border:none;border-radius:4px;cursor:pointer;font-size:0.875rem;transition:background 200ms;display:flex;align-items:center;gap:0.375rem;}.new-mockup-btn.svelte-w47swm:hover {background:var(--color-primary-dark, #2563eb);}.mockup-name-title.svelte-w47swm {font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);margin:0;}.view-all-btn.svelte-w47swm {padding:0.375rem 0.75rem;background:transparent;color:var(--color-primary, #3b82f6);border:1px solid var(--color-primary, #3b82f6);border-radius:4px;cursor:pointer;font-size:0.875rem;transition:all 200ms;}.view-all-btn.svelte-w47swm:hover {background:var(--color-primary, #3b82f6);color:white;}.form-label.svelte-w47swm {display:block;font-size:0.875rem;font-weight:500;color:var(--color-text, #111);margin-bottom:0.25rem;}.form-input.svelte-w47swm {width:100%;padding:0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;margin-bottom:0.75rem;}.name-input-group.svelte-w47swm {display:flex;gap:0.5rem;align-items:stretch;}.name-input.svelte-w47swm {flex:1;margin-bottom:0;min-width:0;}.copy-config-btn.svelte-w47swm {padding:0.375rem 0.75rem;background:transparent;color:var(--color-primary, #3b82f6);border:1px solid var(--color-primary, #3b82f6);border-radius:4px;cursor:pointer;font-size:0.875rem;transition:all 200ms;white-space:nowrap;flex-shrink:0;}.copy-config-btn.svelte-w47swm:hover {background:var(--color-primary, #3b82f6);color:white;}.no-layers.svelte-w47swm {text-align:center;color:var(--color-text-muted, #666);font-size:0.875rem;padding:2rem;}
 
 	@media (max-width: 768px) {.processor-container.svelte-w47swm {flex-direction:column;height:100%;}sidebar.svelte-w47swm {min-width:unset;width:100%;border-right:none;border-top:1px solid var(--color-border, #ccc);order:2;flex-shrink:1;overflow-y:auto;}sidebar.svelte-w47swm .header-logos:where(.svelte-w47swm) {display:none;}.output-canvas.svelte-w47swm {order:1;flex:0 0 50vh;height:50vh;min-height:50vh;}.canvas-header.svelte-w47swm {display:flex;position:absolute;top:0;left:0;right:0;z-index:10;gap:1rem;font-size:1.5rem;padding:0.5rem 1rem;align-items:center;flex-wrap:wrap;}
 	}`
 };
-function pa(o, r) {
-  e.push(r, !0), e.append_styles(o, oa);
-  let t = e.prop(r, "storageKey", 3, Jr), a = e.prop(r, "currentMockupKey", 3, Gr), n = e.state(e.proxy(nt())), s = e.state(""), l = e.state(null), f = e.state(""), h = e.state(!1), w = e.state(!1), u = null;
-  e.derived(() => e.get(l) ? e.get(n).composition.layers.find((C) => C.id === e.get(l)) ?? null : null);
-  function g(C) {
-    const R = {
+function za(s, n) {
+  e.push(n, !0), e.append_styles(s, ya);
+  let t = e.prop(n, "storageKey", 3, da), a = e.prop(n, "currentMockupKey", 3, ua), r = e.state(e.proxy(rt())), o = e.state(""), i = e.state(null), h = e.state(""), _ = e.state(!1), k = e.state(!1), p = null;
+  e.derived(() => e.get(i) ? e.get(r).composition.layers.find((j) => j.id === e.get(i)) ?? null : null);
+  function v(j) {
+    const X = {
       id: crypto.randomUUID(),
-      src: C,
-      ...nn,
-      effects: [{ ...fe }],
+      src: j,
+      ...cn,
+      effects: [{ ...ve }],
       transform: {
-        x: e.get(n).composition.width / 2,
-        y: e.get(n).composition.height / 2,
+        x: e.get(r).composition.width / 2,
+        y: e.get(r).composition.height / 2,
         scale: 1,
         rotation: 0
       }
     };
-    e.get(n).composition.layers.push(R), e.set(l, R.id, !0), m();
+    e.get(r).composition.layers.push(X), e.set(i, X.id, !0), d();
   }
-  function p() {
-    const C = e.get(f).trim();
-    C && (g(C), e.set(f, ""), e.set(h, !1));
+  function f() {
+    const j = e.get(h).trim();
+    j && (v(j), e.set(h, ""), e.set(_, !1));
   }
-  function T(C) {
-    const R = C.currentTarget, O = R.files?.[0];
-    if (O) {
+  function x(j) {
+    const X = j.currentTarget, V = X.files?.[0];
+    if (V) {
       const $ = new FileReader();
       $.onload = (ne) => {
         const Q = ne.target?.result;
-        typeof Q == "string" && g(Q);
-      }, $.readAsDataURL(O);
+        typeof Q == "string" && v(Q);
+      }, $.readAsDataURL(V);
     }
-    R.value = "";
+    X.value = "";
   }
-  function v(C) {
-    e.set(l, C, !0);
+  function y(j) {
+    e.set(i, j, !0);
   }
-  function y(C, R) {
-    const O = e.get(n).composition.layers.find(($) => $.id === C);
-    O && (O.transform = R, m());
+  function w(j, X) {
+    const V = e.get(r).composition.layers.find(($) => $.id === j);
+    V && (V.transform = X, d());
   }
-  function x(C, R) {
-    const O = e.get(n).composition.layers.find(($) => $.id === C);
-    O && (O.opacity = R, m());
+  function S(j, X) {
+    const V = e.get(r).composition.layers.find(($) => $.id === j);
+    V && (V.opacity = X, d());
   }
-  function z(C, R) {
-    const O = e.get(n).composition.layers.find(($) => $.id === C);
-    O && (O.visible = R, m());
+  function I(j, X) {
+    const V = e.get(r).composition.layers.find(($) => $.id === j);
+    V && (V.visible = X, d());
   }
-  function _(C, R) {
-    const O = e.get(n).composition.layers.find(($) => $.id === C);
-    O && (O.effects = R, m());
+  function P(j, X) {
+    const V = e.get(r).composition.layers.find(($) => $.id === j);
+    V && (V.effects = X, d());
   }
-  function k(C, R) {
-    const O = e.get(n).composition.layers.find(($) => $.id === C);
-    O && (O.name = R.trim() || void 0, m());
+  function u(j, X) {
+    const V = e.get(r).composition.layers.find(($) => $.id === j);
+    V && (V.name = X.trim() || void 0, d());
   }
-  function P(C) {
-    e.get(n).composition.layers = e.get(n).composition.layers.filter((R) => R.id !== C), e.get(l) === C && e.set(l, null), m();
+  function g(j) {
+    e.get(r).composition.layers = e.get(r).composition.layers.filter((X) => X.id !== j), e.get(i) === j && e.set(i, null), d();
   }
-  function S(C) {
-    const R = e.get(n).composition.layers.findIndex((O) => O.id === C);
-    if (R > 0) {
-      const O = [...e.get(n).composition.layers];
-      [O[R - 1], O[R]] = [O[R], O[R - 1]], e.get(n).composition.layers = O, m();
+  function C(j) {
+    const X = e.get(r).composition.layers.findIndex((V) => V.id === j);
+    if (X > 0) {
+      const V = [...e.get(r).composition.layers];
+      [V[X - 1], V[X]] = [V[X], V[X - 1]], e.get(r).composition.layers = V, d();
     }
   }
-  function b(C) {
-    const R = e.get(n).composition.layers.findIndex((O) => O.id === C);
-    if (R >= 0 && R < e.get(n).composition.layers.length - 1) {
-      const O = [...e.get(n).composition.layers];
-      [O[R], O[R + 1]] = [O[R + 1], O[R]], e.get(n).composition.layers = O, m();
+  function M(j) {
+    const X = e.get(r).composition.layers.findIndex((V) => V.id === j);
+    if (X >= 0 && X < e.get(r).composition.layers.length - 1) {
+      const V = [...e.get(r).composition.layers];
+      [V[X], V[X + 1]] = [V[X + 1], V[X]], e.get(r).composition.layers = V, d();
     }
   }
-  function d(C, R) {
-    e.get(n).composition.width = C, e.get(n).composition.height = R, m();
+  function l(j, X) {
+    e.get(r).composition.width = j, e.get(r).composition.height = X, d();
   }
-  function m() {
-    u && clearTimeout(u), u = setTimeout(
+  function d() {
+    p && clearTimeout(p), p = setTimeout(
       () => {
-        i();
+        c();
       },
       500
     );
   }
-  function i() {
-    e.get(n).name = e.get(s) || "Untitled Mockup", e.get(n).updatedAt = Date.now(), Br(e.get(n), t()), Ee(e.get(n).id, a());
-  }
   function c() {
-    i();
-    const C = nt();
-    e.set(n, C, !0), e.set(s, C.name, !0), Ee(null, a());
+    e.get(r).name = e.get(o) || "Untitled Mockup", e.get(r).updatedAt = Date.now(), Qr(e.get(r), t()), qe(e.get(r).id, a());
   }
-  function M(C) {
-    i(), e.set(n, C, !0), e.set(s, C.name, !0), Ee(C.id, a()), e.set(w, !1);
+  function b() {
+    c();
+    const j = rt();
+    e.set(r, j, !0), e.set(o, j.name, !0), qe(null, a());
   }
-  function I() {
-    c(), e.set(w, !1);
+  function T(j) {
+    c(), e.set(r, j, !0), e.set(o, j.name, !0), qe(j.id, a()), e.set(k, !1);
+  }
+  function m() {
+    b(), e.set(k, !1);
   }
-  async function X() {
+  async function R() {
     try {
-      const C = JSON.stringify(e.get(n), null, 2);
-      await navigator.clipboard.writeText(C);
-    } catch (C) {
-      console.error("Failed to copy config:", C);
+      const j = JSON.stringify(e.get(r), null, 2);
+      await navigator.clipboard.writeText(j);
+    } catch (j) {
+      console.error("Failed to copy config:", j);
     }
   }
   Te(() => {
-    const C = Er(a());
-    if (C) {
-      const R = Lr(C, t());
-      R && (e.set(n, R, !0), e.set(s, R.name, !0));
+    const j = na(a());
+    if (j) {
+      const X = ea(j, t());
+      X && (e.set(r, X, !0), e.set(o, X.name, !0));
     }
     return () => {
-      u && clearTimeout(u), i();
+      p && clearTimeout(p), c();
     };
   });
-  var J = sa(), B = e.child(J), A = e.child(B);
+  var z = _a(), N = e.child(z), L = e.child(N);
   {
-    var j = (C) => {
-      var R = $r(), O = e.child(R);
-      e.snippet(O, () => r.children), e.reset(R), e.append(C, R);
+    var W = (j) => {
+      var X = pa(), V = e.child(X);
+      e.snippet(V, () => n.children), e.reset(X), e.append(j, X);
     };
-    e.if(A, (C) => {
-      r.children && C(j);
+    e.if(L, (j) => {
+      n.children && j(W);
     });
   }
-  var Z = e.sibling(A, 2), L = e.child(Z), E = e.child(L), q = e.sibling(e.child(E), 2), K = e.child(q);
-  K.__click = c;
-  var V = e.child(K);
-  Me(V, {}), e.next(), e.reset(K);
-  var G = e.sibling(K, 2);
-  G.__click = () => e.set(w, !0), e.reset(q), e.reset(E);
-  var Y = e.sibling(E, 4), D = e.child(Y);
-  e.remove_input_defaults(D), D.__input = () => {
-    m();
+  var E = e.sibling(L, 2), Y = e.child(E), U = e.child(Y), q = e.sibling(e.child(U), 2), J = e.child(q);
+  J.__click = b;
+  var A = e.child(J);
+  Me(A, {}), e.next(), e.reset(J);
+  var G = e.sibling(J, 2);
+  G.__click = () => e.set(k, !0), e.reset(q), e.reset(U);
+  var Z = e.sibling(U, 4), B = e.child(Z);
+  e.remove_input_defaults(B), B.__input = () => {
+    d();
   };
-  var W = e.sibling(D, 2);
-  W.__click = X, e.reset(Y), e.reset(L);
-  var N = e.sibling(L, 2), H = e.sibling(e.child(N), 2), U = e.child(H), de = e.sibling(e.child(U), 2);
-  e.remove_input_defaults(de), de.__input = (C) => d(Number(C.currentTarget.value), e.get(n).composition.height), e.reset(U);
-  var ie = e.sibling(U, 2), he = e.sibling(e.child(ie), 2);
-  e.remove_input_defaults(he), he.__input = (C) => d(e.get(n).composition.width, Number(C.currentTarget.value)), e.reset(ie), e.reset(H), e.reset(N);
-  var ge = e.sibling(N, 2), le = e.child(ge), be = e.child(le), Re = e.child(be);
+  var O = e.sibling(B, 2);
+  O.__click = R, e.reset(Z), e.reset(Y);
+  var D = e.sibling(Y, 2), K = e.sibling(e.child(D), 2), H = e.child(K), de = e.sibling(e.child(H), 2);
+  e.remove_input_defaults(de), de.__input = (j) => l(Number(j.currentTarget.value), e.get(r).composition.height), e.reset(H);
+  var ie = e.sibling(H, 2), he = e.sibling(e.child(ie), 2);
+  e.remove_input_defaults(he), he.__input = (j) => l(e.get(r).composition.width, Number(j.currentTarget.value)), e.reset(ie), e.reset(K), e.reset(D);
+  var ge = e.sibling(D, 2), le = e.child(ge), be = e.child(le), Re = e.child(be);
   e.reset(be);
   var Se = e.sibling(be, 2), ue = e.child(Se);
-  ue.__click = () => e.set(h, !e.get(h));
-  var Ie = e.child(ue);
-  Me(Ie, {});
-  var _e = e.sibling(Ie);
-  e.reset(ue);
-  var me = e.sibling(ue, 2), ze = e.child(me);
+  ue.__click = () => e.set(_, !e.get(_));
+  var ze = e.child(ue);
   Me(ze, {});
-  var je = e.sibling(ze, 2);
-  je.__change = T, e.reset(me), e.reset(Se), e.reset(le);
-  var pe = e.sibling(le, 2);
+  var _e = e.sibling(ze);
+  e.reset(ue);
+  var pe = e.sibling(ue, 2), Ie = e.child(pe);
+  Me(Ie, {});
+  var We = e.sibling(Ie, 2);
+  We.__change = x, e.reset(pe), e.reset(Se), e.reset(le);
+  var me = e.sibling(le, 2);
   {
-    var ye = (C) => {
-      var R = Qr(), O = e.child(R);
-      e.remove_input_defaults(O), O.__keydown = (ne) => ne.key === "Enter" && p();
-      var $ = e.sibling(O, 2);
-      $.__click = p, e.reset(R), e.bind_value(O, () => e.get(f), (ne) => e.set(f, ne)), e.append(C, R);
+    var ye = (j) => {
+      var X = ma(), V = e.child(X);
+      e.remove_input_defaults(V), V.__keydown = (ne) => ne.key === "Enter" && f();
+      var $ = e.sibling(V, 2);
+      $.__click = f, e.reset(X), e.bind_value(V, () => e.get(h), (ne) => e.set(h, ne)), e.append(j, X);
     };
-    e.if(pe, (C) => {
-      e.get(h) && C(ye);
+    e.if(me, (j) => {
+      e.get(_) && j(ye);
     });
   }
-  var lt = e.sibling(pe, 2);
+  var dt = e.sibling(me, 2);
   {
-    var ct = (C) => {
-      var R = ea();
-      e.append(C, R);
-    }, dt = (C) => {
-      var R = ra();
-      e.each(R, 23, () => e.get(n).composition.layers, (O) => O.id, (O, $, ne) => {
-        var Q = na();
+    var ut = (j) => {
+      var X = fa();
+      e.append(j, X);
+    }, pt = (j) => {
+      var X = ga();
+      e.each(X, 23, () => e.get(r).composition.layers, (V) => V.id, (V, $, ne) => {
+        var Q = ha();
         let te;
-        Q.__click = () => v(e.get($).id), Q.__keydown = (re) => re.key === "Enter" && v(e.get($).id);
-        var Ye = e.child(Q), gt = e.child(Ye);
-        e.reset(Ye);
-        var Fe = e.sibling(Ye, 2), De = e.child(Fe), Ke = e.child(De), bt = e.sibling(Ke);
+        Q.__click = () => y(e.get($).id), Q.__keydown = (re) => re.key === "Enter" && y(e.get($).id);
+        var Xe = e.child(Q), _t = e.child(Xe);
+        e.reset(Xe);
+        var Ke = e.sibling(Xe, 2), Ye = e.child(Ke), Je = e.child(Ye), yt = e.sibling(Je);
         {
-          var _t = (re) => {
-            var Ze = ta(), kt = e.child(Ze, !0);
-            e.reset(Ze), e.template_effect(() => e.set_text(kt, e.get($).name)), e.append(re, Ze);
+          var wt = (re) => {
+            var Le = va(), Tt = e.child(Le, !0);
+            e.reset(Le), e.template_effect(() => e.set_text(Tt, e.get($).name)), e.append(re, Le);
           };
-          e.if(bt, (re) => {
-            e.get($).name && re(_t);
+          e.if(yt, (re) => {
+            e.get($).name && re(wt);
           });
         }
-        e.reset(De);
-        var Je = e.sibling(De, 2), we = e.child(Je);
+        e.reset(Ye);
+        var Ge = e.sibling(Ye, 2), we = e.child(Ge);
         we.__click = (re) => {
-          re.stopPropagation(), S(e.get($).id);
+          re.stopPropagation(), C(e.get($).id);
         };
-        var yt = e.child(we);
-        rt(yt, { rotate: "-90deg" }), e.reset(we);
+        var xt = e.child(we);
+        at(xt, { rotate: "-90deg" }), e.reset(we);
         var xe = e.sibling(we, 2);
         xe.__click = (re) => {
-          re.stopPropagation(), b(e.get($).id);
+          re.stopPropagation(), M(e.get($).id);
         };
-        var wt = e.child(xe);
-        rt(wt, { rotate: "90deg" }), e.reset(xe);
-        var Xe = e.sibling(xe, 2);
-        Xe.__click = (re) => {
-          re.stopPropagation(), P(e.get($).id);
+        var kt = e.child(xe);
+        at(kt, { rotate: "90deg" }), e.reset(xe);
+        var Ee = e.sibling(xe, 2);
+        Ee.__click = (re) => {
+          re.stopPropagation(), g(e.get($).id);
         };
-        var xt = e.child(Xe);
-        Ae(xt, {}), e.reset(Xe), e.reset(Je), e.reset(Fe), e.reset(Q), e.template_effect(() => {
-          te = e.set_class(Q, 1, "layer-item svelte-w47swm", null, te, { selected: e.get(l) === e.get($).id }), e.set_attribute(gt, "src", e.get($).src), e.set_text(Ke, `${(e.get($).name || `Layer ${e.get(ne) + 1}`) ?? ""} `), we.disabled = e.get(ne) === 0, xe.disabled = e.get(ne) === e.get(n).composition.layers.length - 1;
-        }), e.append(O, Q);
-      }), e.reset(R), e.append(C, R);
+        var Mt = e.child(Ee);
+        Fe(Mt, {}), e.reset(Ee), e.reset(Ge), e.reset(Ke), e.reset(Q), e.template_effect(() => {
+          te = e.set_class(Q, 1, "layer-item svelte-w47swm", null, te, { selected: e.get(i) === e.get($).id }), e.set_attribute(_t, "src", e.get($).src), e.set_text(Je, `${(e.get($).name || `Layer ${e.get(ne) + 1}`) ?? ""} `), we.disabled = e.get(ne) === 0, xe.disabled = e.get(ne) === e.get(r).composition.layers.length - 1;
+        }), e.append(V, Q);
+      }), e.reset(X), e.append(j, X);
     };
-    e.if(lt, (C) => {
-      e.get(n).composition.layers.length === 0 ? C(ct) : C(dt, !1);
+    e.if(dt, (j) => {
+      e.get(r).composition.layers.length === 0 ? j(ut) : j(pt, !1);
     });
   }
   e.reset(ge);
-  var ut = e.sibling(ge, 2);
+  var mt = e.sibling(ge, 2);
   {
-    var mt = (C) => {
-      const R = e.derived(() => e.get(n).composition.layers.find((Q) => Q.id === e.get(l)));
-      var O = e.comment(), $ = e.first_child(O);
+    var ft = (j) => {
+      const X = e.derived(() => e.get(r).composition.layers.find((Q) => Q.id === e.get(i)));
+      var V = e.comment(), $ = e.first_child(V);
       {
         var ne = (Q) => {
-          Wr(Q, {
+          Hr(Q, {
             get layer() {
-              return e.get(R);
+              return e.get(X);
             },
             get canvasWidth() {
-              return e.get(n).composition.width;
+              return e.get(r).composition.width;
             },
             get canvasHeight() {
-              return e.get(n).composition.height;
+              return e.get(r).composition.height;
             },
-            onTransformChange: (te) => y(e.get(R).id, te),
-            onOpacityChange: (te) => x(e.get(R).id, te),
-            onVisibilityChange: (te) => z(e.get(R).id, te),
-            onEffectsChange: (te) => _(e.get(R).id, te),
-            onNameChange: (te) => k(e.get(R).id, te),
-            onDelete: () => P(e.get(R).id)
+            onTransformChange: (te) => w(e.get(X).id, te),
+            onOpacityChange: (te) => S(e.get(X).id, te),
+            onVisibilityChange: (te) => I(e.get(X).id, te),
+            onEffectsChange: (te) => P(e.get(X).id, te),
+            onNameChange: (te) => u(e.get(X).id, te),
+            onDelete: () => g(e.get(X).id)
           });
         };
         e.if($, (Q) => {
-          e.get(R) && Q(ne);
+          e.get(X) && Q(ne);
         });
       }
-      e.append(C, O);
+      e.append(j, V);
     };
-    e.if(ut, (C) => {
-      e.get(l) && C(mt);
+    e.if(mt, (j) => {
+      e.get(i) && j(ft);
     });
   }
-  e.reset(Z), e.reset(B);
-  var We = e.sibling(B, 2), He = e.child(We);
+  e.reset(E), e.reset(N);
+  var De = e.sibling(N, 2), He = e.child(De);
   {
-    var pt = (C) => {
-      var R = aa(), O = e.child(R);
-      e.snippet(O, () => r.children), e.reset(R), e.append(C, R);
+    var vt = (j) => {
+      var X = ba(), V = e.child(X);
+      e.snippet(V, () => n.children), e.reset(X), e.append(j, X);
     };
-    e.if(He, (C) => {
-      r.children && C(pt);
+    e.if(He, (j) => {
+      n.children && j(vt);
     });
   }
-  var vt = e.sibling(He, 2);
-  sn(vt, {
-    children: (C, R) => {
-      un(C, {
+  var ht = e.sibling(He, 2);
+  pn(ht, {
+    children: (j, X) => {
+      gn(j, {
         get mockup() {
-          return e.get(n);
+          return e.get(r);
         }
       });
     }
-  }), e.reset(We);
-  var ft = e.sibling(We, 2);
+  }), e.reset(De);
+  var gt = e.sibling(De, 2);
   {
-    var ht = (C) => {
-      Fr(C, {
-        onclose: () => e.set(w, !1),
-        onSelect: M,
-        onNew: I,
+    var bt = (j) => {
+      la(j, {
+        onclose: () => e.set(k, !1),
+        onSelect: T,
+        onNew: m,
         get currentMockupId() {
-          return e.get(n).id;
+          return e.get(r).id;
         },
         get storageKey() {
           return t();
         }
       });
     };
-    e.if(ft, (C) => {
-      e.get(w) && C(ht);
+    e.if(gt, (j) => {
+      e.get(k) && j(bt);
     });
   }
-  e.reset(J), e.template_effect(() => {
-    e.set_value(de, e.get(n).composition.width), e.set_value(he, e.get(n).composition.height), e.set_text(Re, `Layers (${e.get(n).composition.layers.length ?? ""})`), e.set_text(_e, ` ${e.get(h) ? "Cancel" : "URL"}`);
-  }), e.bind_value(D, () => e.get(s), (C) => e.set(s, C)), e.append(o, J), e.pop();
+  e.reset(z), e.template_effect(() => {
+    e.set_value(de, e.get(r).composition.width), e.set_value(he, e.get(r).composition.height), e.set_text(Re, `Layers (${e.get(r).composition.layers.length ?? ""})`), e.set_text(_e, ` ${e.get(_) ? "Cancel" : "URL"}`);
+  }), e.bind_value(B, () => e.get(o), (j) => e.set(o, j)), e.append(s, z), e.pop();
 }
 e.delegate(["click", "input", "change", "keydown"]);
 export {
-  Gr as CURRENT_MOCKUP_KEY,
-  at as InputBatcher,
-  Wr as LayerControls,
-  pa as MockupEditor,
-  un as MockupEditorRenderer,
-  Fr as MockupListModal,
-  ma as MockupRenderer,
-  $t as RenderScheduler,
-  Jr as STORAGE_KEY,
-  sn as ZoomableCanvas,
-  nt as createNewMockup,
-  ot as defaultComposition,
+  ua as CURRENT_MOCKUP_KEY,
+  ot as InputBatcher,
+  Hr as LayerControls,
+  za as MockupEditor,
+  gn as MockupEditorRenderer,
+  la as MockupListModal,
+  Sa as MockupRenderer,
+  an as RenderScheduler,
+  da as STORAGE_KEY,
+  pn as ZoomableCanvas,
+  rt as createNewMockup,
+  lt as defaultComposition,
   ce as defaultCylinderWarp,
   se as defaultImageOnSurface,
-  nn as defaultLayer,
+  cn as defaultLayer,
   ae as defaultPlaneWarp,
-  fe as defaultResizeEffect,
+  ve as defaultResizeEffect,
   ee as defaultRestyleEffect,
   ke as defaultSphereWarp,
-  tn as defaultTransform,
-  Pe as defaultView,
-  ve as defaultWarpDebug,
-  Qe as defaultWarpEffect,
-  qr as deleteMockup,
+  Pe as defaultSvgEffect,
+  ln as defaultTransform,
+  Ce as defaultView,
+  fe as defaultWarpDebug,
+  et as defaultWarpEffect,
+  ta as deleteMockup,
   Ne as loadAllMockups,
-  Er as loadCurrentMockupId,
-  Lr as loadMockup,
-  Oe as renderMockupCanvas,
-  on as renderMockupCanvasEditor,
-  Ee as saveCurrentMockupId,
-  Br as saveMockup
+  na as loadCurrentMockupId,
+  ea as loadMockup,
+  Ue as renderMockupCanvas,
+  mn as renderMockupCanvasEditor,
+  qe as saveCurrentMockupId,
+  Qr as saveMockup
 };